/* Smart Feed v1 — responsive overrides (điện thoại + tablet)
   ------------------------------------------------------------------
   File này KHÔNG nằm trong @layer và được nạp CUỐI CÙNG (base.html + login.html).
   Lý do: nhiều file CSS trang (scenarios, settings modal, audit, db, users,
   scenario_detail, custom_scenario_*) không dùng @layer, nên chỉ có rule
   unlayered nạp sau + cùng/độ ưu tiên cao hơn mới ghi đè được chúng.
   Rule trong @layer (shell, components, home, pending, mobile_demo) thì
   unlayered luôn thắng, không cần !important.

   Breakpoints:
     ≤1023px  tablet dọc / sidebar đã thành drawer (shell.css)
     ≤767px   điện thoại lớn + tablet nhỏ
     ≤479px   điện thoại chuẩn (320–430px)
*/

/* =====================================================================
   0. Sửa lỗi cấu trúc — áp dụng mọi kích thước
   ===================================================================== */

/* Span .sf-sr-only / .sf-visually-hidden dùng position:absolute bên trong <th>.
   Ô bảng không phải containing block nên span "thoát" khỏi vùng cuộn ngang
   của bảng và kéo dài scrollWidth của cả trang (đo được 642px trên Redis,
   871px trên Kịch bản ở khổ 390/768). Cho wrapper cuộn làm containing block. */
.sf-sc-table-wrap,
.sf-set-table-wrap,
.sc-logs-table-wrap,
.sf-users-table-wrap,
.sf-cspd-table-wrap,
.sf-db-body .table-wrap,
.sf-chart-table__scroll,
.table-wrap {
  position: relative;
}

/* vh → dvh: tránh nhảy layout khi thanh địa chỉ mobile ẩn/hiện.
   .sf-app__main KHÔNG đặt 100dvh ở đây: ≤1023 nó nằm dưới topbar 2.75rem trong
   cột flex nên 100dvh + topbar = 44px cuộn chết cuối mọi trang (xem mục 1). */
.sf-app {
  min-height: 100dvh;
}

@media (min-width: 1024px) {
  .sf-app__main {
    min-height: 100dvh;
  }
}

.sf-login {
  min-height: 100dvh;
}

.sf-redis-modal__panel {
  max-height: min(92dvh, 44rem);
}

.sf-users-modal__panel {
  max-height: min(92dvh, 36rem);
}

/* Modal sàn giao dịch có JS thêm class này nhưng chưa có CSS khoá cuộn nền;
   modal mốc quét không thêm class nào → dùng :has() làm lưới an toàn. */
body.settings-market-exchanges-modal-open,
body:has(.settings-scan-milestones-modal.is-open) {
  overflow: hidden;
}

/* Không để :hover "dính" sau khi chạm trên màn cảm ứng */
@media (hover: none) {
  .sf-feed-item:hover {
    background: transparent;
    padding-left: var(--sf-space-2);
  }

  .sf-feed-item:hover::before {
    opacity: 0;
  }

  .sf-nav__link:hover {
    transform: none;
  }
}

/* =====================================================================
   1. ≤1023px — tablet dọc, sidebar đã là drawer
   ===================================================================== */
@media (max-width: 1023px) {
  :root {
    --sf-content-pad: 1.25rem;
  }

  /* Drawer không rộng quá màn hình nhỏ */
  .sf-sidebar {
    width: min(var(--sf-sidebar-w, 14rem), 85vw);
  }

  /* ---- Kịch bản tùy biến: workspace 2 cột KHÔNG collapse vì
     `.sf-app--full .sf-cs-detail > .sf-sc-workspace` (0,3,0) thắng
     media query gốc (0,2,0). Ghi đè với độ ưu tiên ≥ (0,3,0). ---- */
  .sf-app--full .sf-cs-detail > .sf-sc-workspace,
  .sf-app .sf-cs-detail > .sf-sc-workspace,
  .sf-app .sf-sc-detail > .sf-sc-workspace,
  .sf-sc-detail .sf-sc-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sf-space-5);
  }

  .sf-cs-detail .sf-cs-main,
  .sf-sc-detail .sf-sc-main {
    min-width: 0;
    max-width: none;
  }

  /* Rail cấu hình từng là scroller sticky max-height:100vh lồng trong trang */
  .sf-cs-detail .sf-cs-rail,
  .sf-cs-detail .sf-sc-rail,
  .sf-sc-detail .sf-sc-rail {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  /* Tab DB nổi trên topbar (z-index 50 > 40) và che nút Menu */
  .sf-db-page .db-tabs,
  .db-tabs {
    top: calc(2.75rem + 4px);
    z-index: 30;
  }

  /* Nút "Thêm tài khoản" sticky z-index 5 chui dưới topbar */
  .sf-page-header__actions {
    z-index: 30;
  }

  /* Tab Cấu hình: dải cuộn ngang thay vì bó 2 dòng khi sticky */
  .sf-settings-page .sf-settings-tabs,
  .sf-settings-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: var(--sf-space-1);
    margin-inline: calc(-1 * var(--sf-content-pad));
    padding-inline: var(--sf-content-pad);
    -webkit-overflow-scrolling: touch;
  }

  .sf-settings-page .sf-settings-tabs::-webkit-scrollbar,
  .sf-settings-tabs::-webkit-scrollbar {
    display: none;
  }

  .sf-settings-page .sf-settings-tabs .settings-nav-btn,
  .sf-settings-tabs .settings-nav-btn {
    flex: 0 0 auto;
    min-height: var(--sf-touch);
    white-space: nowrap;
  }

  /* Lưới khung giờ sàn: track tối thiểu 16rem vượt bề rộng vùng nội dung */
  .sf-settings-page .sf-set-session-grid,
  #panel-van-hanh .sf-set-session-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Dữ liệu sơ cấp: nav 7 chip sticky bó 3 dòng → dải một dòng cuộn ngang,
     vẫn sticky dưới topbar để scroll-spy (primary_data_page.js) còn ý nghĩa */
  .sf-cspd-nav {
    top: 2.75rem;
    z-index: 30;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--sf-content-pad));
    padding-inline: var(--sf-content-pad);
  }

  .sf-cspd-nav::-webkit-scrollbar {
    display: none;
  }

  .sf-cspd-nav a {
    flex: 0 0 auto;
    min-height: 2.25rem;
  }

  .sf-sc-logs-field--scenario {
    min-width: 0;
  }

  /* Chi tiết DB nằm trong ô bảng rộng 672px → lưới 2 cột dài vô lý */
  .sf-db-body .db-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =====================================================================
   2. ≤767px — điện thoại lớn
   ===================================================================== */
@media (max-width: 767px) {
  :root {
    --sf-content-pad: 1rem;
  }

  /* Lưới an toàn: không cho trang cuộn ngang dù còn phần tử lệch */
  html,
  body.sf-body {
    overflow-x: clip;
  }

  .sf-app__main,
  .sf-app__body,
  .sf-main,
  .sf-feed-list-wrap,
  .sf-feed-item__body {
    min-width: 0;
    max-width: 100%;
  }

  /* ---- Khung trang: bớt đệm để dành chỗ cho nội dung ---- */
  .sf-app__body {
    padding: var(--sf-space-3) var(--sf-content-pad);
  }

  .sf-page-controls,
  .sf-feed-controls {
    margin: calc(-1 * var(--sf-space-3)) calc(-1 * var(--sf-content-pad)) var(--sf-space-4);
    padding: var(--sf-space-4) var(--sf-content-pad) var(--sf-space-3);
  }

  .sf-page-controls .sf-page-header,
  .sf-feed-controls .sf-page-header {
    margin-bottom: var(--sf-space-3);
  }

  .sf-page-body,
  .sf-feed-body,
  .sf-pending-body {
    padding: var(--sf-space-4) var(--sf-content-pad) var(--sf-space-5);
    gap: var(--sf-space-3);
  }

  .sf-page-header {
    gap: var(--sf-space-3);
  }

  .sf-page-header__title {
    font-size: clamp(1.25rem, 5.5vw, 1.625rem);
  }

  .sf-page-header__lead {
    font-size: var(--sf-text-xs);
  }

  .sf-page-header__actions {
    width: 100%;
  }

  .sf-flash {
    gap: var(--sf-space-2);
  }

  /* ---- Ô nhập ≥16px: iOS Safari không tự zoom khi focus ---- */
  .sf-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .sf-body select,
  .sf-body textarea,
  .sf-body .sf-input,
  .sf-body .sf-input--select,
  .sf-settings-page .form-control,
  .sf-sc-detail .form-control,
  .sf-sc-detail .cs-modal-def__input,
  .sf-sc-detail .cs-modal-preview__code,
  .settings-chart-modal .settings-chart-modal__input {
    font-size: 16px;
  }

  /* ---- Vùng chạm tối thiểu ---- */
  .sf-btn--compact {
    min-height: 2.5rem;
  }

  .sf-input--select {
    min-height: var(--sf-touch);
  }

  .sf-settings-page .form-control {
    min-height: var(--sf-touch);
  }

  .sf-pagination__link {
    min-width: 2.5rem;
    min-height: 2.5rem;
  }

  .sf-sc-more__toggle,
  .sf-settings-page .sf-row-more__toggle {
    width: 2.5rem;
    height: 2.5rem;
  }

  .sf-settings-page .sf-row-more__item {
    padding: 0.625rem 0.75rem;
  }

  /* ---- Toolbar lọc dùng chung (home, pending, audit, DB, kịch bản, log) ---- */
  .sf-feed-toolbar {
    padding: var(--sf-space-3);
    gap: var(--sf-space-3);
  }

  .sf-feed-toolbar__row {
    gap: var(--sf-space-2) var(--sf-space-3);
  }

  .sf-feed-search {
    flex: 1 1 100%;
    min-width: 0;
  }

  .sf-feed-field {
    flex: 1 1 calc(50% - var(--sf-space-2));
    min-width: 0;
  }

  .sf-feed-toolbar__actions {
    margin-left: 0;
    width: 100%;
  }

  .sf-feed-toolbar__actions .sf-btn {
    flex: 1 1 auto;
  }

  .sf-feed-count {
    overflow-wrap: anywhere;
  }

  .sf-redis-page .sf-feed-count code {
    word-break: break-all;
  }

  /* ---- Phân trang: meta trên một dòng riêng ---- */
  .sf-pagination {
    margin-top: var(--sf-space-5);
    gap: var(--sf-space-1);
  }

  .sf-pagination__meta {
    flex: 1 0 100%;
    margin: 0 0 var(--sf-space-2);
    text-align: center;
  }

  /* ---- Bảng dữ liệu chung ---- */
  .sf-sc-table-wrap,
  .sf-set-table-wrap,
  .sc-logs-table-wrap,
  .sf-db-body .table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Thẻ trạng thái nowrap trong chế độ card phải được xuống dòng */
  .sf-sc-table td .sf-badge,
  .sf-sc-table td .sf-sc-status,
  .sf-sc-table td [class*="badge"] {
    white-space: normal;
    max-width: 100%;
  }

  .sf-sc-table td > * {
    min-width: 0;
  }

  /* ---- Trang chủ (Tin thị trường) ---- */
  .sf-feed-item {
    padding: var(--sf-space-4) 0;
  }

  .sf-feed-item__preview {
    max-width: none;
    overflow-wrap: anywhere;
  }

  .sf-feed-item__title {
    font-size: var(--sf-text-base);
  }

  /* Inspector tin: header 3 nút không wrap → tràn ngang */
  .fi-header {
    padding: var(--sf-space-3) var(--sf-content-pad) var(--sf-space-3);
  }

  .fi-header-top {
    flex-wrap: wrap;
    gap: var(--sf-space-2);
  }

  .fi-header-text {
    flex: 1 1 100%;
  }

  .fi-header-actions {
    flex-shrink: 1;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }

  a.fi-scenario-link {
    white-space: normal;
  }

  .fi-title {
    font-size: var(--sf-text-lg);
  }

  .fi-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .fi-nav::-webkit-scrollbar {
    display: none;
  }

  .fi-nav-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .fi-panels {
    padding: var(--sf-content-pad);
  }

  .fi-panel[data-panel="demo"] {
    margin: calc(-1 * var(--sf-content-pad));
  }

  .fi-panel[data-panel="demo"].is-active {
    min-height: 0;
  }

  .fi-footer {
    flex-wrap: wrap;
    gap: var(--sf-space-2);
    padding: var(--sf-space-3) var(--sf-content-pad);
  }

  .fi-pre {
    max-height: 12rem;
  }

  /* Khung điện thoại giả (mockup) lồng trong điện thoại thật → bỏ viền, dùng full bề rộng */
  .sf-phone-preview {
    padding: 0;
  }

  .sf-phone-preview__device {
    width: 100%;
  }

  .sf-phone-preview__frame {
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .sf-phone-preview__status,
  .sf-phone-preview__home-bar {
    display: none;
  }

  .sf-phone-preview__screen {
    height: auto;
    min-height: 0;
    border-radius: 0;
    overflow: visible;
    overscroll-behavior: auto;
  }

  .sf-mfeed--fi .sf-mdemo-hero {
    padding-top: var(--sf-space-4);
  }

  /* Biểu đồ: hàng số liệu nowrap + lưới 1fr không co */
  .sf-chart-vnindex__card-head {
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
  }

  .sf-chart-vnindex__card-stats {
    flex-shrink: 1;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.25rem 0.6rem;
  }

  .sf-chart-vnindex__card-value {
    font-size: 1.35rem;
  }

  .sf-chart-vnindex__breadth-legend {
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
  }

  .sf-chart-heat__grid {
    grid-template-columns: repeat(var(--heat-cols, 3), minmax(0, 1fr));
  }

  .sf-mdemo-chart .sf-chart-heat--echarts .sf-echart-host {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  /* ---- Chờ tạo tay: so sánh phiên bản bị ép 2 cột (~97px mỗi cột) ---- */
  .sf-pending-compare.sf-feed-compare {
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-pending-compare .sf-feed-compare__col {
    padding: var(--sf-space-3);
  }

  .sf-pending-form {
    padding: var(--sf-space-4) 0;
  }

  /* ---- Kịch bản (danh sách) ---- */
  .sf-sc-header-actions,
  .sf-cs-detail .sf-sc-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .sf-sc-header-actions__more,
  .sf-cs-detail .sf-sc-header-actions__more {
    padding-left: 0;
    border-left: 0;
    flex-wrap: wrap;
  }

  .sf-cs-detail .sf-cs-header-divider {
    display: none;
  }

  /* ---- Log evaluate: chế độ card nhưng bảng vẫn min-width 44rem ---- */
  .sf-sc-logs-body .sc-logs-table {
    min-width: 0;
    width: 100%;
  }

  .sf-sc-logs-body .sc-logs-table-wrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }

  .sf-sc-logs-body .sc-logs-table td {
    flex-wrap: wrap;
    min-width: 0;
  }

  .sf-sc-logs-body .sc-logs-table td::before {
    flex: 0 0 5.5rem;
  }

  .sf-sc-logs-body .sc-logs-table td > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* ---- Kịch bản tùy biến (chi tiết) ---- */
  .sf-cs-detail .cs-facts-preview {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sf-cs-detail .cs-facts-preview__table th:last-child,
  .sf-cs-detail .cs-facts-preview__table td:last-child {
    width: auto;
  }

  .sf-cs-detail .cs-facts-preview__table td.cs-facts-preview__val--long {
    max-width: none;
  }

  /* Nút xoá biến chỉ hiện khi hover → không chạm được */
  .sf-sc-detail .cs-var-row__remove {
    opacity: 1;
  }

  /* Thanh Lưu bám đáy viewport thật (trước đó bám đáy rail cuộn) */
  .sf-cs-detail .sf-cs-rail__save {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 0 calc(-1 * var(--sf-content-pad));
    padding: var(--sf-space-2) var(--sf-content-pad) calc(var(--sf-space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--sf-surface);
    border-top: 1px solid var(--sf-border-strong);
  }

  /* Modal thêm điều kiện / facts / NL / preview: 96–98vw + padding overlay 2rem > viewport */
  .sf-sc-detail .fi-overlay,
  .sf-sc-detail #cs-modal-def.fi-overlay,
  .sf-sc-detail #cs-modal-facts.fi-overlay,
  .sf-sc-detail #cs-modal-nl.fi-overlay,
  .sf-sc-detail #cs-modal-prompt-preview.fi-overlay {
    padding: 0;
    align-items: stretch;
  }

  .sf-sc-detail #cs-modal-def .cs-modal-def__dialog,
  .sf-sc-detail #cs-modal-facts .cs-modal-facts__dialog,
  .sf-sc-detail #cs-modal-nl .cs-modal-nl__dialog,
  .sf-sc-detail #cs-modal-prompt-preview .cs-modal-preview__dialog,
  .sf-sc-detail .cs-modal .fi-dialog,
  .sf-sc-detail .cs-modal .cs-modal__dialog,
  .sf-sc-detail .cs-modal__dialog--narrow {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border-inline: 0;
  }

  .sf-sc-detail #cs-modal-def .cs-modal-def__body {
    padding: var(--sf-space-3);
    gap: var(--sf-space-4);
  }

  .sf-sc-detail .cs-modal-def__section {
    padding: var(--sf-space-3);
  }

  .sf-sc-detail .cs-modal-def__section-body {
    padding-left: 0;
  }

  .sf-sc-detail #cs-modal-def .cs-modal-def__header,
  .sf-sc-detail #cs-modal-def .cs-modal-def__footer {
    padding: var(--sf-space-3);
  }

  .sf-sc-detail #cs-modal-facts .cs-modal-facts__header,
  .sf-sc-detail #cs-modal-facts .cs-modal-facts__toolbar,
  .sf-sc-detail #cs-modal-facts .cs-modal-facts__body,
  .sf-sc-detail #cs-modal-facts .cs-modal-facts__footer,
  .sf-sc-detail #cs-modal-prompt-preview .cs-modal-preview__header,
  .sf-sc-detail #cs-modal-prompt-preview .cs-modal-preview__body,
  .sf-sc-detail #cs-modal-prompt-preview .cs-modal-preview__footer {
    padding-inline: var(--sf-space-3);
  }

  .sf-sc-detail .cs-formula-toolbar {
    gap: var(--sf-space-3);
    padding: var(--sf-space-2);
  }

  .sf-sc-detail .cs-formula-toolbar__group {
    flex: 1 1 100%;
  }

  .sf-sc-detail .cs-formula-toolbar__group--sep {
    padding-left: 0;
    border-left: 0;
  }

  .sf-sc-detail .cs-formula-toolbar__group--actions {
    margin-left: 0;
  }

  .sf-sc-detail .cs-trigger-row,
  .sf-sc-detail .cs-modal-def__trigger-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .sf-sc-detail .cs-modal-def__trigger-op,
  .sf-sc-detail .cs-modal-def__trigger-value,
  .sf-sc-detail .cs-trigger-field--value,
  .sf-sc-detail .cs-trigger-field--min,
  .sf-sc-detail .cs-trigger-field--max {
    width: 100%;
    max-width: 100%;
  }

  .sf-sc-detail .cs-trigger-threshold,
  .sf-sc-detail .cs-trigger-threshold--range {
    flex: 1 1 100%;
  }

  .sf-sc-detail #cs-modal-facts .cs-fact-row {
    flex-wrap: wrap;
  }

  .sf-sc-detail #cs-modal-facts .cs-fact-row__text strong,
  .sf-sc-detail #cs-modal-facts .cs-fact-row__desc {
    white-space: normal;
    overflow: visible;
  }

  .sf-sc-detail #cs-modal-facts .cs-fact-row__val {
    max-width: none;
  }

  /* ---- Dữ liệu sơ cấp (admin): bảng 68rem + cột sticky 176px ---- */
  .sf-cspd-body--admin .sf-cspd-table--admin {
    min-width: 46rem;
  }

  .sf-cspd-body--admin .sf-cspd-table th:first-child,
  .sf-cspd-body--admin .sf-cspd-table td:first-child {
    position: static;
    min-width: 6rem;
    box-shadow: none;
  }

  .sf-cspd-body--admin .sf-cspd-table--admin .sf-cspd-col-desc {
    min-width: 10rem;
    width: auto;
  }

  .sf-cspd-desc-input,
  .sf-cspd-col-group,
  .sf-cspd-col-ref {
    min-width: 0;
  }

  .sf-cspd-toast {
    left: var(--sf-space-3);
    right: var(--sf-space-3);
    max-width: none;
  }

  /* ---- Audit ---- */
  .sf-audit-body .audit-detail-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
  }

  .sf-audit-body .audit-event__meta {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .sf-audit-body .audit-event__meta code,
  .sf-audit-body .audit-change__key,
  .sf-audit-body .audit-change__label {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .sf-audit-body .audit-day__events {
    padding-left: 0.85rem;
    margin-left: 0.25rem;
  }

  .sf-audit-body .audit-event::before {
    left: calc(-0.85rem - 5px);
  }

  .sf-audit-body .audit-event {
    padding: 0.65rem 0.6rem;
  }

  /* ---- Dữ liệu DB ---- */
  .sf-db-page .db-tabs,
  .db-tabs {
    padding: 0.35rem;
    gap: 0.25rem;
  }

  .sf-db-page .db-tabs a,
  .db-tabs a {
    padding: 0.4rem 0.6rem;
    font-size: var(--sf-text-xs);
  }

  .sf-db-body thead th {
    position: static;
  }

  .sf-db-body .db-kv {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .sf-db-body .db-detail {
    padding: 0.65rem 0.6rem;
  }

  .sf-db-body .db-pre {
    max-height: 240px;
  }

  /* ---- Người dùng: chế độ card nhưng bảng vẫn min-width 42rem ---- */
  .sf-users-table {
    min-width: 0;
    width: 100%;
  }

  .sf-users-table-wrap {
    overflow-x: visible;
  }

  .sf-users-table td {
    grid-template-columns: 6rem minmax(0, 1fr);
  }

  .sf-users-table__account {
    min-width: 0;
  }

  .sf-users-table td.sf-users-table__account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sf-space-2);
  }

  .sf-users-table td.sf-users-table__account::before {
    flex: 1 0 100%;
  }

  .sf-users-table td > * {
    min-width: 0;
  }

  /* ---- Cấu hình ---- */
  .sf-settings-page .sf-set-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  /* Bảng cấu hình co lại thành ô 6 dòng thay vì cuộn → đặt min-width để cuộn */
  .sf-settings-page .sf-card-types__table {
    min-width: 44rem;
  }

  .sf-settings-page .sf-chart-catalog__table {
    min-width: 40rem;
  }

  .sf-settings-page .sf-chart-config__table {
    min-width: 36rem;
  }

  .sf-settings-page .sf-scan-milestones__table {
    min-width: 28rem;
  }

  .sf-settings-page .sf-card-types__table th,
  .sf-settings-page .sf-card-types__table td,
  .sf-settings-page .sf-chart-catalog__table th,
  .sf-settings-page .sf-chart-catalog__table td,
  .sf-settings-page .sf-chart-config__table th,
  .sf-settings-page .sf-chart-config__table td,
  .sf-settings-page .sf-scan-milestones__table th,
  .sf-settings-page .sf-scan-milestones__table td {
    padding: 0.5rem;
  }

  .sf-settings-page .sf-card-types__col-facts {
    min-width: 9rem;
    max-width: 14rem;
  }

  /* Menu thao tác dòng bị clip trong wrapper overflow → bottom sheet */
  .sf-settings-page .sf-row-more {
    position: static;
  }

  .sf-settings-page .sf-row-more__menu {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    z-index: 300;
    min-width: 0;
    width: 100%;
    max-height: 60dvh;
    overflow-y: auto;
    border-radius: var(--sf-radius-lg) var(--sf-radius-lg) 0 0;
    border-inline: 0;
    border-bottom: 0;
    padding: var(--sf-space-2) var(--sf-space-2) calc(var(--sf-space-2) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.22);
  }

  .sf-settings-page .sf-set-field--inline {
    flex-direction: column;
    align-items: stretch;
  }

  .sf-settings-page .sf-set-field--inline .form-control {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .settings-chart-config .sf-set-chart-filters select {
    min-width: 0;
    width: 100%;
  }

  .sf-settings-page .sf-set-chart-filters,
  .sf-settings-page .settings-chart-config__toolbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--sf-space-2);
    padding: var(--sf-space-2);
  }

  .sf-settings-page .settings-chart-config__toolbar > label {
    flex: 1 1 100%;
  }

  .sf-settings-page .settings-chart-config__toolbar > .sf-btn,
  .sf-settings-page .settings-chart-config__toolbar > a.sf-btn {
    flex: 1 1 calc(50% - var(--sf-space-1));
    min-height: var(--sf-touch);
  }

  .sf-settings-page .settings-chart-config__toolbar select,
  .sf-settings-page .settings-chart-config__toolbar input {
    min-width: 0;
    width: 100%;
  }

  .sf-settings-page .settings-chart-config__spacer,
  .sf-settings-page .sf-set-toolbar__spacer {
    display: none;
  }

  .sf-settings-page .sf-set-toolbar {
    padding: var(--sf-space-2);
  }

  .sf-settings-page .sf-set-toolbar .sf-btn {
    flex: 1 1 auto;
  }

  /* Vùng cuộn lồng (fallback model) → để nở ra, trang cuộn thay */
  .sf-settings-page .llm-provider-card .settings-field--fallbacks .choice-grid,
  #panel-he-thong .llm-provider-card .settings-field--fallbacks .choice-grid {
    max-height: none;
    overflow: visible;
  }

  /* Picker facts từng là scroller 240px lồng trong form modal đã tự cuộn */
  .ct-publish-picker {
    max-height: none;
    overflow: visible;
  }

  /* Thanh Lưu sticky: bỏ blur, chừa safe-area, nút full width */
  .sf-settings-page .sf-set-save,
  #panel-van-hanh .sf-set-save,
  #panel-he-thong .sf-set-save {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--sf-zone-content-bg);
    padding-bottom: calc(var(--sf-space-3) + env(safe-area-inset-bottom, 0px));
  }

  .sf-settings-page .sf-set-save .sf-btn {
    width: 100%;
    min-height: 3rem;
  }

  #panel-he-thong .sf-set-block .sf-set-save {
    position: static;
  }

  /* Modal cấu hình → sheet toàn màn hình, head/foot cố định
     (rule gốc unlayered ở settings.css:2668+, cần cùng độ ưu tiên) */
  .settings-chart-modal.settings-chart-modal {
    padding: 0;
    align-items: flex-end;
  }

  .settings-chart-modal .settings-chart-modal__panel,
  .settings-chart-modal.settings-card-types-modal .settings-chart-modal__panel {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
  }

  .settings-chart-modal .settings-chart-modal__head {
    flex: 0 0 auto;
    padding: var(--sf-space-3);
    padding-top: calc(var(--sf-space-3) + env(safe-area-inset-top, 0px));
  }

  .settings-chart-modal .settings-chart-modal__close {
    min-width: var(--sf-touch);
    min-height: var(--sf-touch);
  }

  .settings-chart-modal .settings-chart-modal__form {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--sf-space-3);
  }

  .settings-chart-modal .settings-chart-modal__foot {
    position: sticky;
    bottom: 0;
    margin: var(--sf-space-2) calc(-1 * var(--sf-space-3)) calc(-1 * var(--sf-space-3));
    padding: var(--sf-space-3) var(--sf-space-3) calc(var(--sf-space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--sf-surface);
    border-top: 1px solid var(--sf-border);
    flex-wrap: nowrap;
  }

  .settings-chart-modal .settings-chart-modal__foot .sf-btn {
    flex: 1 1 0;
    min-height: 3rem;
  }

  .settings-chart-modal select[multiple] {
    min-height: 12rem;
  }

  /* ---- Redis ---- */
  .sf-redis-modal {
    padding: var(--sf-space-2);
  }

  .sf-redis-modal__panel {
    max-height: 96dvh;
  }
}

/* =====================================================================
   3. ≤479px — điện thoại chuẩn (320–430px)
   ===================================================================== */
@media (max-width: 479px) {
  :root {
    --sf-content-pad: 0.75rem;
  }

  .sf-topbar {
    min-height: 2.75rem;
  }

  .sf-app__body {
    padding: var(--sf-space-2) var(--sf-content-pad);
  }

  .sf-page-controls,
  .sf-feed-controls {
    margin-top: calc(-1 * var(--sf-space-2));
    padding-top: var(--sf-space-3);
  }

  .sf-page-header__title {
    font-size: 1.25rem;
  }

  .sf-page-header__actions {
    gap: var(--sf-space-2);
  }

  .sf-page-header__actions > .sf-btn,
  .sf-page-header__actions > a.sf-btn,
  .sf-page-header__actions > form > .sf-btn {
    flex: 1 1 calc(50% - var(--sf-space-1));
  }

  .sf-page-header__actions > .sf-btn--icon,
  .sf-page-header__actions > a.sf-btn--icon {
    flex: 0 0 auto;
  }

  /* Toolbar: mỗi trường lọc một dòng (45% ≈ 115px không đọc được nhãn) */
  .sf-feed-toolbar {
    padding: var(--sf-space-2) var(--sf-space-3);
  }

  .sf-feed-field {
    flex: 1 1 100%;
  }

  .sf-feed-field__label {
    font-size: 0.6875rem;
  }

  /* Phân trang: chỉ giữ trước / hiện tại / sau */
  .sf-pagination__link:not(:first-child):not(:last-child):not(.is-current),
  .sf-pagination__gap {
    display: none;
  }

  /* Trang chủ */
  .sf-feed-item {
    padding: var(--sf-space-3) 0;
  }

  .sf-feed-item__top {
    flex-wrap: wrap;
    gap: var(--sf-space-1) var(--sf-space-2);
  }

  .sf-feed-item__rail {
    gap: var(--sf-space-1) var(--sf-space-2);
    font-size: 0.6875rem;
  }

  .sf-feed-item__meta-line {
    overflow-wrap: anywhere;
  }

  .fi-title {
    font-size: var(--sf-text-base);
  }

  .fi-nav-btn {
    padding: 0.6rem 0.5rem;
    font-size: 0.75rem;
  }

  .fi-panels {
    padding: var(--sf-space-3);
  }

  .fi-panel[data-panel="demo"] {
    margin: calc(-1 * var(--sf-space-3));
  }

  .fi-pre {
    max-height: 10rem;
    font-size: 0.6875rem;
  }

  .sf-chart-vnindex__card-value {
    font-size: 1.15rem;
  }

  .sf-chart-heat__grid {
    --heat-cols: 2;
  }

  .sf-chart-table th,
  .sf-chart-table td {
    padding: 0.35rem 0.4rem;
    font-size: 0.72rem;
  }

  /* Card-row của bảng (kịch bản, dữ liệu sơ cấp, người dùng): nhãn xếp trên giá trị */
  .sf-sc-table td,
  .sf-users-table td,
  .sf-cspd-body:not(.sf-cspd-body--admin) .sf-cspd-table td {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .sf-sc-table td::before,
  .sf-users-table td::before,
  .sf-cspd-body:not(.sf-cspd-body--admin) .sf-cspd-table td::before {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .sf-sc-table__col-actions .sf-sc-more {
    justify-content: flex-start;
  }

  .sf-users-row-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: var(--sf-space-2);
  }

  .sf-users-row-actions .sf-btn {
    flex: 1 1 auto;
  }

  .sf-sc-logs-body .sc-logs-table td {
    flex-direction: column;
    gap: 0.15rem;
  }

  .sf-sc-logs-body .sc-logs-table td::before {
    flex: 0 0 auto;
  }

  /* Chờ tạo tay */
  .sf-pending-form {
    padding: var(--sf-space-3) 0;
  }

  .sf-pending-item__rail {
    gap: var(--sf-space-1) var(--sf-space-2);
  }

  /* Kịch bản tùy biến */
  .sf-cs-detail .sf-cs-card__inner {
    padding: var(--sf-space-3);
  }

  .sf-cs-detail .sf-cs-card__content {
    padding: var(--sf-space-3);
  }

  .sf-cs-detail .sf-page-header__title {
    font-size: 1.375rem;
  }

  .sf-cs-detail .sf-cs-rail__card {
    padding: var(--sf-space-3);
  }

  .sf-cs-detail .sf-cs-rail__chip {
    flex: 1 1 45%;
    justify-content: center;
  }

  .sf-cs-detail .sf-cs-rail__chip--milestone {
    min-width: 0;
  }

  .sf-sc-header-actions__workflow,
  .sf-sc-header-actions__more {
    width: 100%;
  }

  .sf-sc-header-actions__workflow .sf-btn,
  .sf-sc-header-actions__more .sf-btn {
    width: 100%;
  }

  .sf-sc-empty__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .sf-sc-detail #cs-modal-def .cs-modal-def__footer,
  .sf-sc-detail #cs-modal-nl .cs-modal-nl__footer,
  .sf-sc-detail #cs-modal-prompt-preview .cs-modal-preview__footer,
  .sf-sc-detail .cs-modal .fi-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .sf-sc-detail .cs-modal-def__btn,
  .sf-sc-detail .cs-modal-preview__btn {
    width: 100%;
  }

  .sf-sc-detail .dry-run-group__body,
  #scenario-dry-run-modal .dry-run-group__body {
    padding: 0.2rem;
  }

  .sf-sc-detail .dry-run-group__body > .dry-run-group,
  #scenario-dry-run-modal .dry-run-group__body > .dry-run-group {
    margin-left: 0;
  }

  /* Dữ liệu sơ cấp */
  .sf-cspd-body--admin .sf-cspd-table--admin {
    min-width: 40rem;
    font-size: var(--sf-text-xs);
  }

  .sf-cspd-nav a {
    padding: 0.3rem 0.5rem;
  }

  /* Audit */
  .sf-audit-body .audit-day__events {
    padding-left: 0.6rem;
    border-left-width: 1px;
  }

  .sf-audit-body .audit-event::before {
    left: calc(-0.6rem - 4px);
    width: 8px;
    height: 8px;
  }

  .sf-audit-body .audit-diff__pre {
    max-height: 160px;
    font-size: 0.68rem;
  }

  /* DB: dải tab cuộn ngang thay vì bó 3 dòng */
  .sf-db-page .db-tabs,
  .db-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sf-db-page .db-tabs::-webkit-scrollbar,
  .db-tabs::-webkit-scrollbar {
    display: none;
  }

  .sf-db-page .db-tabs a,
  .db-tabs a {
    white-space: nowrap;
  }

  .sf-db-body .cell-mono[style] {
    font-size: 0.7rem !important;
  }

  /* Redis: modal sát mép */
  .sf-redis-modal {
    padding: 0;
  }

  .sf-redis-modal__panel {
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .sf-redis-modal .redis-pre {
    min-height: 8rem;
    font-size: 0.7rem;
  }

  /* Cấu hình */
  .sf-settings-page .sf-page-controls {
    padding-block: var(--sf-space-3);
  }

  #panel-van-hanh .sf-set-block,
  #panel-he-thong .sf-set-block {
    padding: var(--sf-space-2);
  }

  #panel-van-hanh .sf-set-session-card {
    padding: var(--sf-space-2);
  }

  #panel-van-hanh .sf-set-session-row .form-control {
    flex: 1 1 0;
    min-width: 0;
  }

  .sf-settings-page .sf-settings-tabs .settings-nav-btn {
    padding-inline: 0.625rem;
  }

  #panel-he-thong .llm-provider-card {
    padding: var(--sf-space-2);
  }

  .sf-settings-page .llm-provider-card__key-row .llm-discover-btn {
    width: 100%;
  }

  .sf-settings-page .sf-set-expert-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .sf-settings-page .sf-set-expert-toolbar label,
  #panel-he-thong .sf-set-expert-toolbar label {
    flex: 1 1 auto;
    max-width: none;
  }

  .sf-settings-page textarea.form-control,
  .sf-settings-page .form-control-prompt,
  .sf-settings-page .form-control-json {
    max-height: 40dvh;
  }

  .sf-settings-page .sf-card-types__col-actions,
  .sf-settings-page .sf-chart-catalog__col-actions,
  .sf-settings-page .sf-chart-config__col-actions {
    width: 2.75rem;
  }

  /* Người dùng: nút thao tác full width */
  .sf-users-table__account {
    min-width: 0;
  }
}

/* =====================================================================
   4. Lượt rà soát 2 (2026-09-04) — bổ sung sau khi rà mã nguồn từng trang
   Giữ cùng cấu trúc: (0) mọi kích thước → ≤1023 → ≤767 → ≤479.
   Ghi chú độ ưu tiên: home/pending(v1)/mobile_demo/feed_charts/shell/
   components/settings.css(1-2665) nằm trong @layer → rule ở đây luôn thắng;
   scenarios/users/db/redis/audit/scenario_detail/custom_scenario_* và
   settings modal(2668+), audit.css, pending.css(legacy) KHÔNG layer → cần
   selector cùng hoặc cao hơn độ ưu tiên gốc (ghi kèm từng rule).
   ===================================================================== */

/* ---- 4.0 Mọi kích thước ---- */

/* Chờ tạo tay: nhãn A/B của khối so sánh chỉ có style trong home.css (không nạp) */
.sf-pending-compare .sf-feed-compare__label {
  margin: 0 0 var(--sf-space-1);
  font-family: var(--sf-font-mono);
  font-size: var(--sf-text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-fg-muted);
}

/* Cấu hình: dòng fact đã chọn chỉ nhận biết qua checkbox gốc */
.ct-publish-row:has(input:checked) {
  background: var(--sf-bg-accent);
}

/* Kịch bản: menu dòng z-index 40 bằng topbar → đè nút Menu khi cuộn (gốc 0,1,0) */
.sf-sc-more__menu {
  z-index: 35;
}

@media (hover: none) {
  /* Chờ tạo tay: hover dính sau khi chạm (giống .sf-feed-item đã xử lý) */
  .sf-pending-item:hover {
    background: transparent;
  }

  .sf-pending-item:hover::before {
    opacity: 0;
    transform: translateY(-50%) scaleY(0);
  }

  /* Trang chủ: thẻ tin không còn dấu hiệu bấm được khi bỏ hover → chevron cố định */
  .sf-feed-item {
    padding-right: 1.5rem;
  }

  .sf-feed-item::after {
    content: "›";
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-55%);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--sf-fg-muted);
    opacity: 0.6;
  }

  /* Cấu hình: link kịch bản trong bảng chart chỉ đổi màu khi hover */
  .sf-chart-config__cell-primary {
    color: var(--sf-brand);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* Kịch bản tùy biến: dải nhảy mục và mô tả fact inline chỉ dùng trên màn nhỏ */
.sf-cs-jump,
.cs-fact-row__desc--touch {
  display: none;
}

/* Tooltip fact bám theo mouseenter — trên cảm ứng nó "dính" sau khi chạm */
@media (hover: none) {
  .cs-fact-tip {
    display: none;
  }
}

/* Toolbar lọc: nút "Bộ lọc" chỉ tồn tại trên điện thoại (xem 4.2) */
.sf-feed-toolbar__toggle {
  display: none;
}

/* ---- 4.1 ≤1023px ---- */
@media (max-width: 1023px) {
  /* Bù topbar 2.75rem (shell.css dùng 100vh; ở đây dvh) — hết 44px cuộn chết */
  .sf-app__main {
    min-height: calc(100dvh - 2.75rem);
  }

  /* Topbar: tên trang hiện tại ở giữa (H1 cuộn mất là không còn biết đang ở đâu),
     nút Menu có icon */
  .sf-topbar__title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-family: var(--sf-font-display);
    font-size: var(--sf-text-base);
    font-weight: 500;
    color: var(--sf-fg);
  }

  .sf-topbar__menu {
    gap: 0.4rem;
  }

  .sf-topbar__menu-icon {
    flex: 0 0 auto;
  }

  /* Drawer và panel inspector: không kéo cuộn lan ra trang phía sau */
  .sf-sidebar,
  .fi-panels {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Kịch bản tùy biến: 5 card + rail + lịch sử xếp dọc 8–10 màn hình không có
     điều hướng → dải chip sticky dưới topbar nhảy tới từng mục */
  .sf-cs-detail .sf-cs-jump {
    display: flex;
    position: sticky;
    top: 2.75rem;
    z-index: 30;
    gap: var(--sf-space-1);
    margin: 0 calc(-1 * var(--sf-content-pad)) var(--sf-space-3);
    padding: var(--sf-space-2) var(--sf-content-pad);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: var(--sf-zone-content-bg);
    border-bottom: 1px solid var(--sf-border);
  }

  .sf-cs-detail .sf-cs-jump::-webkit-scrollbar {
    display: none;
  }

  .sf-cs-detail .sf-cs-jump a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 0.7rem;
    border: 1px solid var(--sf-border-strong);
    border-radius: 999px;
    background: var(--sf-surface);
    color: var(--sf-fg-secondary);
    font-size: var(--sf-text-xs);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }

  .sf-cs-detail.is-milestone-mode .sf-cs-jump .sf-cs-jump__builder {
    display: none;
  }

  .sf-cs-detail .sf-cs-card__title,
  .sf-cs-detail #cs-history {
    scroll-margin-top: 6.5rem;
  }

  /* Neo #feed-list (phân trang, cuộn sau khi lọc) không bị topbar che */
  #feed-list {
    scroll-margin-top: 3.25rem;
  }

  /* Nút sticky trong header trang (Người dùng: "Thêm tài khoản") — users.css
     đặt top:0 z-index:5 ở ≤767, chui dưới topbar. Đặt ngay dưới topbar. */
  .sf-page-header__actions {
    top: 2.75rem;
  }
}

/* ---- 4.2 ≤767px ---- */
@media (max-width: 767px) {
  /* ===== Dùng chung ===== */

  /* Ô tìm kiếm toolbar 36px trong khi select đã 40px (components.css, layer) */
  .sf-feed-search .sf-input {
    min-height: var(--sf-touch);
  }

  /* Toolbar lọc 4–9 trường luôn mở chiếm 500–650px trước nội dung đầu tiên.
     Thu gọn: dòng 1 = [ô tìm kiếm][Bộ lọc ▾]; shell.js thêm .is-expanded. */
  .sf-feed-toolbar__toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--sf-touch);
  }

  .sf-feed-toolbar__toggle-glyph {
    transition: transform var(--sf-motion-quick);
  }

  .sf-feed-toolbar.is-expanded .sf-feed-toolbar__toggle-glyph {
    transform: rotate(180deg);
  }

  /* basis 12rem: cùng dòng với nút Bộ lọc; khi trang có thêm nút (Audit: Mở tất
     cả / Thu gọn) thì ô tìm kiếm xuống dòng riêng thay vì bị ép còn ~70px */
  .sf-feed-toolbar__row:has(.sf-feed-toolbar__toggle) .sf-feed-search {
    flex: 1 1 12rem;
    min-width: 0;
  }

  .sf-feed-toolbar:not(.is-expanded) .sf-feed-field,
  .sf-feed-toolbar:not(.is-expanded) .sf-feed-toolbar__actions {
    display: none;
  }

  /* Sàn chữ 12px cho meta/badge (home.css & pending.css v1 đều trong layer) */
  .sf-feed-item__top .sf-feed-item__badge,
  .sf-feed-item__top .sf-feed-item__type,
  .sf-feed-item__rail time,
  .sf-feed-item__meta-line,
  .sf-feed-compare__label,
  .fi-badge,
  .sf-pending-item__type,
  .sf-pending-item__kicker,
  .sf-pending-form .sf-field__label {
    font-size: var(--sf-text-xs);
  }

  /* ===== Trang chủ — inspector tin ===== */

  /* Dialog 100% của overlay fixed → trên iOS bị thanh công cụ che đáy */
  .fi-dialog {
    height: 100dvh;
    max-height: 100%;
  }

  /* Nút Đóng là nút thứ ba trong hàng wrap → nút X 40px ghim góc phải header */
  .fi-header {
    position: relative;
    padding-right: 3.5rem;
  }

  .fi-header-actions .fi-close {
    position: absolute;
    top: var(--sf-space-2);
    right: var(--sf-space-2);
    width: var(--sf-touch);
    height: var(--sf-touch);
    min-height: 0;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    font-size: 1.05rem;
    line-height: 1;
  }

  .fi-close__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .fi-close::before {
    content: "✕";
  }

  /* Header có thể chiếm 200–260px: ẩn kicker, giới hạn tiêu đề 3 dòng */
  .fi-kicker {
    display: none;
  }

  .fi-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  /* Link JSON API là tiện ích debug desktop, chiếm chỗ hàng nút */
  .fi-header-actions .fi-feed-api-link {
    display: none;
  }

  /* Tab inspector: vùng chạm 40px + fade mép phải báo còn tab bị khuất */
  .fi-nav {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);
    scroll-snap-type: x proximity;
  }

  .fi-nav-btn {
    min-height: var(--sf-touch);
    scroll-snap-align: start;
  }

  /* Nút Copy prompt 27px */
  .fi-copy-btn {
    min-height: 2.25rem;
    padding-inline: 0.75rem;
  }

  /* Nút "Demo mobile" ghost trong thẻ cũng bấm được → nhìn như chữ thường */
  .sf-feed-item__actions .sf-btn--ghost {
    border: 1px solid var(--sf-border-strong);
    background: var(--sf-surface);
  }

  /* "Trên trang" 20/50/100 là một hàng thừa trên điện thoại */
  .sf-feed-field:has(#feed-per-page) {
    display: none;
  }

  /* Tab Demo: khung điện thoại giả đã bỏ nhưng nền sáng kẻ sọc còn lộ dưới feed tối */
  .sf-phone-preview {
    background: var(--mdemo-base, #1a1a1a);
  }

  /* Chữ 9.3px trong bản demo (hiển thị kích thước thật khi bỏ khung) */
  .sf-mdemo-tile__label,
  .sf-mdemo-tile__value {
    white-space: normal;
  }

  .sf-mdemo-tile__label {
    font-size: 0.7rem;
  }

  /* ===== Chờ tạo tay: đưa breakpoint 720 (pending.css v1) về 767 ===== */
  .sf-pending-form {
    grid-template-columns: 1fr;
    gap: var(--sf-space-3);
    padding-left: var(--sf-space-3);
  }

  .sf-pending-item__rail {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sf-space-2);
  }

  .sf-pending-item__type {
    border-top: 0;
    border-left: 1px solid currentColor;
    padding-left: var(--sf-space-2);
  }

  .sf-pending-item__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .sf-pending-item__actions-secondary {
    width: 100%;
  }

  .sf-pending-item__actions .sf-btn {
    flex: 1 1 auto;
  }

  .sf-pending-item__publish {
    width: 100%;
  }

  /* ===== Kịch bản (danh sách) — scenarios.css không layer ===== */

  /* Menu dòng (Nhân bản / Xóa) 32px — gốc .sf-sc-more__item (0,1,0) */
  .sf-sc-more__menu .sf-sc-more__item,
  .sf-sc-more__menu .sf-sc-more__muted {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
  }

  /* Pill "Số tin" là link 21px — gốc (0,1,0) */
  .sf-sc-count-link {
    min-width: 2.5rem;
    height: 2.25rem;
    padding: 0 0.6rem;
  }

  /* Card kịch bản 12–13 hàng: # và Ver không cần trên điện thoại —
     phải thắng `.sf-sc-table td { display: grid }` (0,1,1) */
  .sf-sc-table td.sf-sc-table__col-id,
  .sf-sc-table td.sf-sc-table__col-ver {
    display: none;
  }

  /* Chữ 10–11px — gốc (0,1,0)/(0,2,0) */
  .sf-sc-meta__code,
  .sf-sc-name-row .sf-badge {
    font-size: var(--sf-text-xs);
  }

  /* ===== Log evaluate — scenario_logs.css không layer, gốc (0,3,0) ===== */
  .sf-sc-logs-body .sc-logs-json-details summary {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
  }

  /* ===== Kịch bản tùy biến — custom_scenario_detail.css / scenario_detail.css không layer ===== */

  /* Tên kịch bản bị cắt 1 dòng còn ~12 ký tự — gốc .sf-sc-detail .sf-page-header__title (0,2,0) */
  .sf-sc-detail .sf-page-header__title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Textarea prompt 13px và @-editor thắng rule 16px chung (gốc (0,3,1)/(0,4,0)) → iOS zoom */
  .sf-cs-detail .sf-cs-prompt-details textarea[name="pv_system"],
  .sf-cs-detail .sf-cs-prompt-details textarea[name="pv_user"],
  .sf-cs-detail .sf-cs-prompt-details .sf-at-editor.sf-input {
    font-size: 1rem;
  }

  /* Menu @-mention: rộng 16–22rem đặt theo con trỏ (JS ghi inline left) → nửa menu
     ra ngoài màn hình và bị overflow-x:clip cắt. Ghim hai mép, giới hạn cao. */
  .sf-at-menu {
    left: var(--sf-space-2) !important;
    right: var(--sf-space-2);
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: 45dvh;
  }

  /* Thanh Lưu: sticky chỉ bám trong rail (cuối DOM) → không thấy khi đang sửa 5 card.
     Ghim đáy viewport thật; chừa chỗ cuối trang. Gốc (0,2,0) ở ≤767. */
  .sf-cs-detail .sf-cs-rail__save {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    margin: 0;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
  }

  .sf-cs-detail {
    padding-bottom: 4.75rem;
  }

  /* Modal Chạy thử: rule toàn màn hình gốc chỉ ≤639 và dùng 100vh (gốc (1,1,0)) */
  #scenario-dry-run-modal.sdr-modal {
    padding: 0;
    align-items: stretch;
  }

  #scenario-dry-run-modal .sdr-modal__dialog {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  #scenario-dry-run-modal .fi-panels {
    padding-bottom: calc(var(--sf-space-4) + env(safe-area-inset-bottom, 0px));
  }

  /* Cây điều kiện trong Chạy thử: chữ 11–13px, thụt lề mỗi cấp (gốc pending.css legacy (0,1,0)) */
  #scenario-dry-run-modal .dry-run-group__head,
  #scenario-dry-run-modal .dry-run-tree-clause,
  #scenario-dry-run-modal .dry-run-zchart__meta {
    font-size: var(--sf-text-xs);
  }

  #scenario-dry-run-modal .dry-run-group__body {
    padding: 0.2rem;
  }

  #scenario-dry-run-modal .dry-run-group__body > .dry-run-group {
    margin-left: 0;
  }

  /* So sánh prompt trong Chạy thử / chi tiết: cột min 13–14rem cuộn ngang trong modal đã cuộn dọc */
  .sf-sc-detail .sf-feed-compare,
  #scenario-dry-run-modal .sf-feed-compare {
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
  }

  .sf-sc-detail .sf-feed-compare__col {
    min-width: 0;
  }

  /* Modal facts: mô tả từng fact chỉ có ở tooltip hover → hiện inline (builder.js thêm span) */
  .sf-sc-detail #cs-modal-facts .cs-fact-row__desc--touch {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--sf-text-xs);
    font-weight: 400;
    color: var(--sf-fg-muted);
    white-space: normal;
  }

  /* Bàn phím công thức: chip 32px là cách nhập duy nhất (ô công thức readonly) — gốc (0,2,0) */
  .sf-sc-detail .cs-formula-chip {
    min-width: 2.75rem;
    height: 2.75rem;
    font-size: 0.9375rem;
  }

  /* Kết quả live đặt absolute góc dưới phải đè lên công thức khi xuống 2–3 dòng */
  .sf-sc-detail .cs-formula-display {
    padding-bottom: 2.75rem;
  }

  /* Nút xóa biến 32px (opacity đã sửa ở mục 2) — gốc (0,2,0) */
  .sf-sc-detail .cs-var-row__remove {
    width: 2.75rem;
    height: 2.75rem;
    justify-self: end;
  }

  /* Hàng biến ≤900px mất tiêu đề cột → nhãn đặt qua data-label (JS thêm ở bước 2) */
  .sf-sc-detail .cs-var-row {
    row-gap: 0.4rem;
    padding: 0.65rem 0.5rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    background: var(--sf-surface);
  }

  .sf-sc-detail .cs-var-row > [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--sf-fg-muted);
  }

  .sf-sc-detail .cs-var-row__preview-wrap {
    text-align: left;
  }

  /* "Cần ít nhất N điều kiện": ô số 44×28px với chữ 16px — gốc (0,2,0) */
  .sf-cs-detail .cs-activate__min-input {
    width: 4rem;
    height: 2.75rem;
  }

  .sf-cs-detail .cs-activate__min-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Modal Thêm điều kiện: mọi input/select/nút 36px — gốc (0,2,0) */
  .sf-sc-detail .cs-modal-def__input,
  .sf-sc-detail .cs-modal-def__btn {
    height: auto;
    min-height: var(--sf-touch);
  }

  /* Lịch sử: log là scroller 240px lồng trong trang (đã phân trang) — gốc (0,2,0) */
  .sf-cs-detail .cs-log-list {
    max-height: none;
    overflow: visible;
  }

  /* Phân trang mini Trước/Sau ~20px — gốc (0,2,0) */
  .sf-cs-detail .cs-pagination-mini {
    font-size: var(--sf-text-xs);
  }

  .sf-cs-detail .cs-pagination-mini__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding-inline: 0.75rem;
    font-size: var(--sf-text-sm);
  }

  /* Panel phiên bản/log chữ 11px, meta 2 mục đụng nhau ở 360px — gốc (0,2,0) */
  .sf-cs-detail .cs-rail-panel__count,
  .sf-cs-detail .cs-version-item__meta,
  .sf-cs-detail .cs-log-item {
    font-size: var(--sf-text-xs);
  }

  .sf-cs-detail .cs-version-item__meta,
  .sf-cs-detail .cs-log-item__head {
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
  }

  /* Chip lịch chạy: 480–767 vẫn min-width 3.25rem ragged (rule cũ chỉ ≤479) — gốc (0,2,0) */
  .sf-cs-detail .sf-cs-rail__chip {
    flex: 1 1 45%;
    justify-content: center;
  }

  .sf-cs-detail .sf-cs-rail__chip--milestone {
    min-width: 0;
  }

  .sf-cs-detail .sf-cs-rail__chip--probe {
    flex: 1 1 100%;
  }

  /* Ô giá trị facts: scroller 8rem lồng trong bảng đã cuộn ngang — gốc (0,2,0) */
  .sf-cs-detail .cs-facts-preview__val-box {
    max-height: 12rem;
  }

  /* Badge số thứ tự 01–05 đứng một mình một dòng khi card xếp dọc (≤639) */
  .sf-cs-detail .sf-cs-card__num {
    display: none;
  }

  /* ===== Dữ liệu sơ cấp — custom_scenario_primary_data.css không layer ===== */

  /* Ô tìm kiếm chừa 72px cho phím tắt đã ẩn — gốc (0,2,0) */
  .sf-cspd-search .sf-input {
    padding-right: var(--sf-space-3);
  }

  /* Checkbox Ẩn/Active 16px trong bảng cuộn ngang — gốc (0,2,1) */
  .sf-cspd-edit-row input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.35rem;
  }

  /* ===== Cấu hình ===== */

  /* Thanh Lưu sticky không tràn mép → nội dung cuộn lộ hai bên. Không dùng
     margin âm (lồng trong block có padding riêng) — kéo nền bằng box-shadow
     rồi clip theo chiều dọc. */
  .sf-settings-page .sf-set-save,
  #panel-van-hanh .sf-set-save,
  #panel-he-thong .sf-set-save {
    box-shadow: 0 0 0 100vmax var(--sf-zone-content-bg);
    clip-path: inset(0 -100vmax);
  }

  /* Chip lựa chọn 36px / 32px (layer) */
  .sf-settings-page .choice-chip,
  .sf-settings-page .choice-chip--sm {
    min-height: var(--sf-touch);
  }

  /* Lưới chip: 1 cột full-width cho mã sàn 4 ký tự là quá tay; giữ 1 cột cho tên model dài */
  .sf-settings-page .choice-grid {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  }

  .sf-settings-page .settings-field--fallbacks .choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Picker facts: dòng 28px, chip bỏ chọn 24px, id 11px (layer) */
  .ct-publish-row {
    align-items: center;
    min-height: var(--sf-touch);
    padding-block: 0.5rem;
  }

  .ct-publish-row input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0;
    flex: 0 0 auto;
  }

  .ct-publish-row__id {
    font-size: var(--sf-text-xs);
  }

  .ct-publish-chip {
    min-height: 2.25rem;
    padding-inline: 0.8rem;
  }

  /* Badge "Chính"/"Có key" 9.9px (layer) */
  .sf-settings-page .llm-provider-card__badge {
    font-size: var(--sf-text-xs);
  }

  /* 5 bảng CRUD cuộn ngang 28–44rem: cột thao tác ghim mép phải để không phải
     kéo qua 2 màn hình mới tới nút. (Chế độ card cần data-label — để lượt sau.) */
  .sf-settings-page .sf-card-types__col-actions,
  .sf-settings-page .sf-chart-catalog__col-actions,
  .sf-settings-page .sf-chart-config__col-actions,
  .sf-settings-page .sf-scan-milestones__col-actions {
    position: sticky;
    right: 0;
    z-index: 1;
    background: var(--sf-surface);
    box-shadow: -2px 0 4px rgba(15, 23, 42, 0.06);
  }

  .sf-settings-page th.sf-card-types__col-actions,
  .sf-settings-page th.sf-chart-catalog__col-actions,
  .sf-settings-page th.sf-chart-config__col-actions,
  .sf-settings-page th.sf-scan-milestones__col-actions {
    background: var(--sf-surface-muted);
  }

  /* Bảng sàn giao dịch dùng lại class bảng loại tin (7 cột) nhưng có 9 cột */
  .sf-settings-page .sf-card-types__table:has(th:nth-child(9)) {
    min-width: 52rem;
  }

  /* Bottom sheet menu dòng: thêm scrim mờ nền */
  .sf-settings-page .sf-row-more.is-open .sf-row-more__menu::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(15, 23, 42, 0.28);
  }

  /* Modal cấu hình (unlayered 2668+): checkbox ~20px, input 37px, nút X không theo
     safe-area, tiêu đề chừa 2rem cho nút 2.5rem */
  .settings-chart-modal .settings-chart-modal__check {
    display: flex;
    align-items: center;
    min-height: var(--sf-touch);
  }

  .settings-chart-modal .settings-chart-modal__check input {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
  }

  .settings-chart-modal .settings-chart-modal__input:not([multiple]) {
    min-height: var(--sf-touch);
  }

  .settings-chart-modal .settings-chart-modal__close {
    top: calc(var(--sf-space-2) + env(safe-area-inset-top, 0px));
  }

  .settings-chart-modal .settings-chart-modal__title {
    padding-right: 3rem;
  }

  /* ===== Người dùng — users.css không layer ===== */

  /* Tiêu đề/subtitle modal chạy dưới nút X (chừa 2rem, nút 2.5rem + 0.5rem lề) */
  .sf-users-modal__title,
  .sf-users-modal__subtitle,
  .sf-users-modal__text {
    padding-right: 3rem;
  }

  /* ===== Dữ liệu DB — db.css / db_browser.css không layer ===== */

  /* Tab DB ~27px sau khi thu chữ (rule mục 2) */
  .sf-db-page .db-tabs a,
  .db-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
  }

  /* Cột đầu sticky có thể là key config 30+ ký tự → che gần hết màn hình — gốc (0,2,1) */
  .sf-db-body tbody td:first-child {
    max-width: 45vw;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* Panel Chi tiết nằm trong ô cuối của bảng 42rem → phải kéo qua 6 cột mới đọc.
     Khi mở: biến <details> thành bottom sheet cố định; chạm "Chi tiết" để đóng. */
  .sf-db-body .db-expand[open] {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    max-height: 85dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--sf-content-pad) calc(var(--sf-space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--sf-surface);
    border-top: 1px solid var(--sf-border-strong);
    border-radius: var(--sf-radius-lg) var(--sf-radius-lg) 0 0;
    box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.22);
  }

  .sf-db-body .db-expand[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(15, 23, 42, 0.28);
  }

  .sf-db-body .db-expand[open] > summary {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 3rem;
    margin: 0 calc(-1 * var(--sf-content-pad));
    padding: 0 var(--sf-content-pad);
    background: var(--sf-surface-muted);
    border-bottom: 1px solid var(--sf-border);
    font-weight: 600;
  }

  .sf-db-body .db-expand[open] > summary::after {
    content: "Đóng";
    margin-left: auto;
    font-size: var(--sf-text-xs);
    color: var(--sf-fg-muted);
  }

  .sf-db-body .db-expand[open] .db-detail {
    padding-top: var(--sf-space-3);
  }

  .sf-db-body .db-pre {
    overflow-x: auto;
  }

  body:has(.sf-db-body .db-expand[open]) {
    overflow: hidden;
  }

  /* ===== Redis — bảng dùng .sf-sc-table (components, layer) nhưng không nạp
     card-mode của scenarios.css: 6 cột / 36rem trên 360px ===== */
  .sf-redis-page .sf-sc-table {
    min-width: 24rem;
  }

  .sf-redis-page .sf-sc-table th:nth-child(3),
  .sf-redis-page .sf-sc-table td:nth-child(3),
  .sf-redis-page .sf-sc-table th:nth-child(5),
  .sf-redis-page .sf-sc-table td:nth-child(5) {
    display: none;
  }

  .sf-redis-page .sf-sc-table .cell-truncate {
    max-width: none;
    white-space: normal;
  }

  .sf-redis-page .sf-sc-table .cell-mono code {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .sf-redis-modal__head-text {
    padding-right: 3rem;
  }

  /* ===== Audit — audit.css legacy không layer ===== */

  /* Nút Copy 18px, chip nhóm 15px (là <a>), summary đổi diff 30px — gốc (0,1,0)/(0,2,1) */
  .sf-audit-body .audit-copy,
  .sf-audit-body .audit-change__group {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.6rem;
    font-size: var(--sf-text-xs);
  }

  .sf-audit-body .audit-event__changes > summary {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }

  /* Breakpoint 720 của audit.css → 767 (721–767 vẫn 2 cột ~350px) */
  .sf-audit-body .audit-change,
  .sf-audit-body .audit-diff__cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- 4.3 ≤479px ---- */
@media (max-width: 479px) {
  /* Bản demo: 3 ô chỉ số ~104px mỗi ô → nhãn "THANH KHOẢN" luôn bị cắt */
  .sf-mdemo-pulse--count-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Đăng nhập: bớt đệm để form nằm trên bàn phím */
  .sf-login {
    padding: var(--sf-space-4) var(--sf-space-3);
  }
}