/* VPĐT Mobile App Shell v5 — chuyên nghiệp, chỉ ≤767px. Desktop không đụng. */
:root {
  --m-nav-h: 56px;
  --m-header-h: 48px;
  --m-fab: 52px;
  --m-radius: 14px;
  --m-radius-sm: 10px;
  --m-pad: 10px;
  --m-card-pad: 12px;
  --m-gap: 8px;
  --m-bg: #f2f3f7;
  --m-card: #ffffff;
  --m-ink: #111111;
  --m-muted: #6b7280;
  --m-line: #e5e7eb;
  --m-brand: #E30613;
  --m-shadow: 0 1px 8px rgba(15, 23, 42, 0.07);
  --m-shadow-lg: 0 6px 20px rgba(15, 23, 42, 0.12);
}

@media (max-width: 767px) {
  body.is-mobile {
    background: var(--m-bg);
    -webkit-tap-highlight-color: rgba(227, 6, 19, 0.08);
  }
  body.is-mobile .app-frame,
  body.is-mobile .app-main {
    background: var(--m-bg);
    min-height: 100dvh;
  }

  /* ===== App header ===== */
  body.is-mobile .app-header {
    height: calc(var(--m-header-h) + env(safe-area-inset-top, 0px));
    min-height: calc(var(--m-header-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--m-pad) 0;
    gap: 6px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(1.4) blur(16px);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  body.is-mobile .app-page-title {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  body.is-mobile .app-page-subtitle,
  body.is-mobile .sidebar-toggle {
    display: none !important;
  }
  body.is-mobile .m-back-btn[hidden] { display: none !important; }
  body.is-mobile .m-back-btn:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--m-ink);
    padding: 0;
    flex: 0 0 auto;
  }
  body.is-mobile .hdr-chrome { gap: 2px; }
  body.is-mobile .hdr-chrome-bell,
  body.is-mobile .user-menu-trigger {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 12px;
    justify-content: center;
    padding: 0;
  }
  body.is-mobile .user-menu-caret { display: none; }

  /* ===== Content canvas ===== */
  body.is-mobile .app-content {
    padding: 8px var(--m-pad) calc(var(--m-nav-h) + 16px + env(safe-area-inset-bottom, 0px));
    background: var(--m-bg);
  }
  /* List có FAB: chừa chỗ thumb, không để card cuối bị khuất */
  body.is-mobile .app-content:has(.module-tabs-actions .btn-std-primary),
  body.is-mobile .app-content:has([data-tpl-picker-open]) {
    padding-bottom: calc(var(--m-nav-h) + var(--m-fab) + 24px + env(safe-area-inset-bottom, 0px));
  }

  /* Ẩn tab/FAB trên trang phiếu — không cạnh tranh dock duyệt */
  body.is-mobile .app-content:has(.show-layout) .task-primary-tabs {
    display: none !important;
  }

  /* Tab cấp 1: ẩn chữ, giữ actions (search + FAB) */
  body.is-mobile .task-primary-tabs {
    border: 0;
    min-height: 0;
    margin: 0 0 10px;
    padding: 0;
    display: block;
  }
  body.is-mobile .task-primary-tabs .module-tabs-left {
    display: none !important;
  }
  body.is-mobile .task-primary-tabs .module-tabs-actions {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
  }

  /* Search bar app-like (không float chồng bottom nav) */
  body.is-mobile .module-tabs-actions .module-tabs-search {
    position: static;
    width: 100%;
    max-width: none;
    left: auto;
    right: auto;
    bottom: auto;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--m-line);
    box-shadow: none;
    padding: 0 4px 0 12px;
  }
  body.is-mobile .module-tabs-actions .module-tabs-search input[type="search"] {
    border: 0;
    background: transparent;
    min-height: 42px;
    height: 42px;
    box-shadow: none;
    font-size: .92rem;
  }

  /* FAB */
  body.is-mobile .module-tabs-actions .btn-std-primary,
  body.is-mobile .module-tabs-actions #task-create-btn,
  body.is-mobile .module-tabs-actions [data-tpl-picker-open] {
    position: fixed;
    right: 14px;
    bottom: calc(var(--m-nav-h) + 12px + env(safe-area-inset-bottom, 0px));
    z-index: 36;
    width: var(--m-fab) !important;
    min-width: var(--m-fab) !important;
    height: var(--m-fab) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0;
    box-shadow: 0 10px 28px rgba(227, 6, 19, 0.4);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  body.is-mobile .module-tabs-actions .btn-std-primary::before,
  body.is-mobile .module-tabs-actions #task-create-btn::before,
  body.is-mobile .module-tabs-actions [data-tpl-picker-open]::before {
    content: "+";
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
  }
  body.is-mobile .module-tabs-actions .task-create-chev { display: none; }

  /* Segmented filters (hộp thư) */
  body.is-mobile .req-box-tabs,
  body.is-mobile .task-box-tabs,
  body.is-mobile .module-tabs:not(.task-primary-tabs) {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    overflow: visible;
    background: transparent;
  }
  body.is-mobile .req-box-tabs,
  body.is-mobile .task-box-tabs {
    position: relative;
  }
  body.is-mobile .req-box-tabs::after,
  body.is-mobile .task-box-tabs::after {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28px;
    background: linear-gradient(90deg, transparent, var(--m-bg));
    border-radius: 0 12px 12px 0;
    z-index: 1;
  }
  body.is-mobile .req-box-tabs .module-tabs-left,
  body.is-mobile .task-box-tabs .module-tabs-left {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #e5e7eb;
    border-radius: 12px;
    padding: 3px;
  }
  body.is-mobile .req-box-tabs .module-tabs-left::-webkit-scrollbar,
  body.is-mobile .task-box-tabs .module-tabs-left::-webkit-scrollbar { display: none; }
  body.is-mobile .req-box-tabs a,
  body.is-mobile .task-box-tabs a,
  body.is-mobile .module-tabs:not(.task-primary-tabs) .module-tabs-left > a {
    flex: 0 0 auto;
    padding: 7px 10px;
    min-height: 32px;
    border-radius: 10px;
    border-bottom: 0 !important;
    margin: 0;
    background: transparent;
    color: #4b5563;
    font-size: .76rem;
    font-weight: 650;
    box-shadow: none;
    white-space: nowrap;
  }
  body.is-mobile .req-box-tabs a.active,
  body.is-mobile .task-box-tabs a.active,
  body.is-mobile .module-tabs:not(.task-primary-tabs) .module-tabs-left > a.active {
    background: #fff;
    color: var(--m-brand);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
  }
  body.is-mobile .req-box-tabs a.active .cnt,
  body.is-mobile .task-box-tabs a.active .cnt {
    color: var(--m-brand);
  }

  /* List: bỏ chrome desktop */
  body.is-mobile .list-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }
  body.is-mobile .list-panel > .list-toolbar { display: none; }
  body.is-mobile .list-panel .table-wrap { overflow: visible; }

  /* Table → native cards */
  body.is-mobile .table-erp thead { display: none; }
  body.is-mobile .table-erp,
  body.is-mobile .table-erp tbody { display: block; width: 100%; }
  body.is-mobile .table-erp tbody tr {
    display: block;
    background: var(--m-card);
    border-radius: var(--m-radius);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--m-shadow);
    padding: var(--m-card-pad);
    margin: 0 0 var(--m-gap);
  }
  body.is-mobile .table-erp tbody tr:has(td.col-name) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "code status"
      "name name";
    gap: 6px 10px;
    align-items: start;
  }
  body.is-mobile .table-erp tbody tr:hover { background: var(--m-card); }
  body.is-mobile .table-erp tbody tr.is-overdue {
    box-shadow: var(--m-shadow), inset 3px 0 0 var(--m-brand);
  }
  body.is-mobile .table-erp tbody td {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    width: auto !important;
    max-width: none !important;
  }
  body.is-mobile .table-erp tbody td.col-code {
    grid-area: code;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--m-muted);
  }
  body.is-mobile .table-erp tbody td.col-code a { color: inherit; font-weight: 700; }
  body.is-mobile .table-erp tbody td.col-status { grid-area: status; justify-self: end; }
  body.is-mobile .table-erp tbody td.col-name { grid-area: name; }
  body.is-mobile .table-erp tbody td.col-name .table-name-link {
    font-size: .98rem;
    font-weight: 750;
    line-height: 1.35;
    color: var(--m-ink);
    text-decoration: none;
  }
  body.is-mobile .table-erp tbody td .col-m-meta {
    display: block;
    margin-top: 6px;
    font-size: .78rem;
    color: var(--m-muted);
    line-height: 1.4;
  }
  body.is-mobile .table-erp tbody td.col-m-hide,
  body.is-mobile .table-erp tbody td.col-actions { display: none !important; }
  body.is-mobile .table-erp tbody tr:not(:has(td.col-name)) td:not(.col-m-hide):not(.col-actions) {
    display: block;
    padding: 3px 0 !important;
    font-size: .9rem;
  }
  body.is-mobile .table-erp tbody tr:has(.empty) {
    display: block;
    padding: 36px 18px;
    text-align: center;
    color: var(--m-muted);
  }
  body.is-mobile .table-erp tbody tr:has(.empty) td { display: block; }

  /* Home tiles */
  body.is-mobile .grid.grid-3 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  body.is-mobile .card.stat {
    border-radius: var(--m-radius);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--m-shadow);
    padding: var(--m-card-pad) 14px;
    background: var(--m-card);
  }
  body.is-mobile .card.stat h3 {
    font-size: .82rem;
    font-weight: 650;
    color: var(--m-muted);
    margin: 0 0 6px;
  }
  body.is-mobile .card.stat strong {
    font-size: 1.85rem;
    letter-spacing: -0.03em;
    color: var(--m-ink);
  }
  body.is-mobile .app-content > .card:not(.stat) {
    border-radius: var(--m-radius);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--m-shadow);
  }
  body.is-mobile .app-content > p.muted {
    margin: 0 0 12px;
    font-size: .95rem;
  }

  /* ===== Show ticket: full-bleed app sheet ===== */
  /* Desktop .show-layout dùng align-items:start (grid aside).
     Mobile đổi sang flex cột — nếu giữ start, card co theo nội dung
     khi accordion (Việc con…) đóng → màn «co lại» lệch phải. */
  body.is-mobile .show-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body.is-mobile .show-layout > .show-main-col { order: 1; }
  body.is-mobile .show-layout > .show-act-card { order: 2; }
  body.is-mobile .show-layout > *,
  body.is-mobile .show-layout > .show-main-col,
  body.is-mobile .show-layout > .show-act-card,
  body.is-mobile .show-main-col > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }
  body.is-mobile .disc-composer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.is-mobile .show-content-card,
  body.is-mobile .disc-card,
  body.is-mobile .form-panel.task-part,
  body.is-mobile .show-act-card {
    border-radius: var(--m-radius);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--m-shadow);
    background: var(--m-card);
    overflow: hidden;
  }

  body.is-mobile .show-content-head {
    padding: 14px 14px 8px;
    align-items: flex-start;
  }
  body.is-mobile .show-content-title {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0;
  }

  /* Meta: từng dòng app, không tràn ngang */
  body.is-mobile .show-meta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 0 14px 12px;
    border-bottom: 1px solid var(--m-line);
    max-width: 100%;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  body.is-mobile .show-meta-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
  }
  body.is-mobile .show-meta-line {
    display: block;
    margin: 0;
    font-size: .82rem;
    line-height: 1.45;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  body.is-mobile .show-meta-dot { display: none; }
  body.is-mobile .show-meta-template,
  body.is-mobile .show-meta-creator,
  body.is-mobile .show-meta-when,
  body.is-mobile .show-meta-stage-due,
  body.is-mobile .show-meta-sla {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100%;
  }
  body.is-mobile .show-meta-code { display: none !important; }

  /* Chan tran ngang + bang chi tiet dang card (mobile) */
  body.is-mobile .show-layout,
  body.is-mobile .show-main-col,
  body.is-mobile .show-content-card,
  body.is-mobile .show-fields,
  body.is-mobile .show-field,
  body.is-mobile .show-field-value {
    max-width: 100%;
    min-width: 0;
  }
  body.is-mobile .show-field-value .table-wrap,
  body.is-mobile .show-field-value .form-table-wrap,
  body.is-mobile .form-table-wrap {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible;
    border-radius: 10px;
    box-sizing: border-box;
    background: transparent;
    border: 0;
  }
  body.is-mobile .show-field-value .form-table-wrap::before { display: none !important; content: none !important; }
  body.is-mobile .show-field-value table.form-table-weighted,
  body.is-mobile .show-field-value table.form-table,
  body.is-mobile .show-field-value table.table-erp {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate;
    border-spacing: 0;
  }
  body.is-mobile .show-field-value table.form-table-weighted colgroup,
  body.is-mobile .show-field-value table.form-table colgroup {
    display: none;
  }
  body.is-mobile .show-field-value table.form-table-weighted thead,
  body.is-mobile .show-field-value table.form-table thead {
    display: none;
  }
  body.is-mobile .show-field-value table.form-table-weighted tbody,
  body.is-mobile .show-field-value table.form-table-weighted tfoot,
  body.is-mobile .show-field-value table.form-table-weighted tr,
  body.is-mobile .show-field-value table.form-table-weighted td,
  body.is-mobile .show-field-value table.form-table tbody,
  body.is-mobile .show-field-value table.form-table tfoot,
  body.is-mobile .show-field-value table.form-table tr,
  body.is-mobile .show-field-value table.form-table td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  body.is-mobile .show-field-value table.form-table-weighted tbody tr,
  body.is-mobile .show-field-value table.form-table tbody tr {
    background: #fff;
    border: 1px solid var(--m-line);
    border-radius: 12px;
    margin: 0 0 10px;
    padding: 8px 12px;
    box-shadow: var(--m-shadow);
  }
  body.is-mobile .show-field-value table.form-table-weighted td,
  body.is-mobile .show-field-value table.form-table td,
  body.is-mobile .show-field-value table.form-table-weighted tbody td,
  body.is-mobile .show-field-value table.form-table-weighted tfoot td {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border: 0 !important;
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 8px 0 !important;
    white-space: normal !important;
    text-align: right !important;
    font-size: .9rem;
    color: var(--m-ink);
    position: static !important;
    left: auto !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  body.is-mobile .show-field-value table.form-table-weighted td:last-child,
  body.is-mobile .show-field-value table.form-table td:last-child {
    border-bottom: 0 !important;
  }
  body.is-mobile .show-field-value table.form-table-weighted td::before,
  body.is-mobile .show-field-value table.form-table td::before {
    content: attr(data-label);
    flex: 0 0 44%;
    max-width: 44%;
    text-align: left;
    font-size: .72rem;
    font-weight: 650;
    color: var(--m-muted);
    white-space: normal;
  }
  body.is-mobile .show-field-value table.form-table-weighted td.ft-col-idx,
  body.is-mobile .show-field-value table.form-table-weighted td:first-child {
    font-weight: 750;
    justify-content: flex-start;
    gap: 8px;
  }
  body.is-mobile .show-field-value table.form-table-weighted tfoot tr,
  body.is-mobile .show-field-value table.form-table tfoot tr {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    padding: 8px 12px;
    margin: 0;
  }
  body.is-mobile .show-field-value table.form-table-weighted tfoot td:empty {
    display: none;
  }


  body.is-mobile .show-field-value table.form-table-weighted tfoot td:empty,
  body.is-mobile .show-field-value table.form-table tfoot td:empty {
    display: none !important;
  }
  body.is-mobile .show-field-value table.form-table-weighted tbody td:first-child {
    display: block !important;
    font-size: .78rem;
    font-weight: 800;
    color: var(--m-muted);
    border-bottom: 1px solid #f3f4f6 !important;
    margin-bottom: 2px;
    text-align: left !important;
  }
  body.is-mobile .show-field-value table.form-table-weighted tbody td:first-child::before {
    content: none;
    display: none;
  }


  body.is-mobile .show-field-value table.form-table-weighted tfoot td.is-m-empty,
  body.is-mobile .show-field-value table.form-table tfoot td.is-m-empty {
    display: none !important;
  }
  body.is-mobile .show-field-value table.form-table-weighted tfoot td:first-child {
    display: block !important;
    text-align: left !important;
    font-weight: 800;
    color: var(--m-ink);
    border-bottom: 1px solid #f3f4f6 !important;
  }
  body.is-mobile .show-field-value table.form-table-weighted tfoot td:first-child::before {
    content: none;
    display: none;
  }

  /* Fields: label nhỏ / value rõ */
  body.is-mobile .show-fields {
    padding: 4px 0 8px;
    gap: 0;
  }
  body.is-mobile .show-field,
  body.is-mobile .show-fields .show-field-block-title {
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
    margin: 0;
  }
  body.is-mobile .show-field-label,
  body.is-mobile .show-fields .show-field-label {
    display: block;
    font-size: .72rem;
    font-weight: 650;
    color: var(--m-muted);
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 4px;
  }
  body.is-mobile .show-field-value,
  body.is-mobile .show-field-value-text {
    font-size: .95rem;
    color: var(--m-ink);
    line-height: 1.45;
  }
  body.is-mobile .show-field-value .table-wrap {
    margin-top: 6px;
    border-radius: 10px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Aside: gọn hơn */
  body.is-mobile .show-act-card {
    padding: 4px 0 8px;
  }
  body.is-mobile .show-aside-sec-head {
    padding: 12px 14px;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .04em;
  }
  body.is-mobile .show-aside-sec-body {
    padding: 0 14px 12px;
  }

  /* Dock duyệt — thumb zone */
  body.is-mobile .show-act-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--m-line);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1);
  }
  body.is-mobile .show-act-btns .btn-std {
    flex: 1 1 0;
    min-width: 0;
    height: 46px;
    border-radius: 12px;
    font-size: .95rem;
  }
  body.is-mobile .show-act-card > form:has(> button.btn-std) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px));
    z-index: 45;
    margin: 0;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--m-line);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1);
  }
  body.is-mobile .show-act-card > form:has(> button.btn-std) .btn-std {
    width: 100%;
    height: 46px;
    border-radius: 12px;
  }
  body.is-mobile .app-content:has(.show-act-btns),
  body.is-mobile .app-content:has(.show-act-card > form > .btn-std) {
    padding-bottom: calc(var(--m-nav-h) + 78px + env(safe-area-inset-bottom, 0px));
  }
  body.is-mobile .app-content:has(.show-act-btns) .module-tabs-actions .btn-std-primary,
  body.is-mobile .app-content:has(.show-act-btns) .module-tabs-actions [data-tpl-picker-open],
  body.is-mobile .app-content:has(.show-act-btns) .module-tabs-actions .module-tabs-search {
    display: none !important;
  }

  /* Bottom sheet modal */
  body.is-mobile .show-act-modal {
    align-items: flex-end;
    padding: 0;
  }
  body.is-mobile .show-act-modal-panel {
    width: 100%;
    max-height: min(88dvh, 860px);
    border-radius: 18px 18px 0 0;
    margin: 0;
  }


  /* Aside accordion compact */
  body.is-mobile .show-aside-sec {
    border-top: 1px solid #f0f0f0;
  }
  body.is-mobile .show-aside-sec-head {
    min-height: 44px;
  }

  /* Discussion compact */
  body.is-mobile .disc-card {
    margin-top: 0;
  }
  body.is-mobile .disc-title {
    padding: 12px 14px 0;
  }

  /* Bottom navigation */
  .m-bottom-nav { display: none; }
  body.is-mobile .m-bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    height: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 2px env(safe-area-inset-bottom, 0px);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
  }
  body.is-mobile .m-bottom-nav a,
  body.is-mobile .m-bottom-nav button {
    appearance: none;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: var(--m-nav-h);
    color: #6b7280;
    text-decoration: none;
    font-size: .66rem;
    font-weight: 650;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 2px;
  }
  body.is-mobile .m-bottom-nav a.is-active,
  body.is-mobile .m-bottom-nav button.is-active {
    color: var(--m-brand);
  }
  body.is-mobile .m-bottom-nav svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  /* Drawer */
  body.is-mobile .sidebar {
    width: min(88vw, 330px);
    padding-top: env(safe-area-inset-top, 0px);
  }
  body.is-mobile .sidebar-link,
  body.is-mobile .sidebar-sublink {
    min-height: 44px;
  }

  /* Panels / chrome */
  body.is-mobile .hdr-chrome-panel {
    width: min(100vw - 16px, 400px);
    border-radius: 16px;
    max-height: min(70vh, 520px);
  }
  body.is-mobile .hdr-chrome-panel-body {
    max-height: min(52vh, 380px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Auth */
  body.is-mobile .auth-wrap {
    min-height: 100dvh;
    background: var(--m-bg);
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  body.is-mobile .auth-card {
    width: 100%;
    max-width: 420px;
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-lg);
  }


  /* Home: the thao tac ro */
  body.is-mobile a.card.stat {
    position: relative;
    padding-right: 28px;
  }
  body.is-mobile a.card.stat::after {
    content: '';
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #c4c7cf;
    border-bottom: 2px solid #c4c7cf;
    transform: translateY(-60%) rotate(-45deg);
  }

  /* Pager */
  body.is-mobile .req-list-pager,
  body.is-mobile .task-list-pager {
    justify-content: center;
    margin: 8px 0 16px;
  }

  /* Status filter pills on work */
  body.is-mobile .task-st-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding: 0 0 8px;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 768px) {
  .m-bottom-nav { display: none !important; }
  .m-back-btn { display: none !important; }
}

@media (max-width: 767px) {
  /* Deep-pass v4 — list/search/project/task density */
  body.is-mobile .module-tabs-search,
  body.is-mobile .module-tabs-search input,
  body.is-mobile .module-tabs-actions .module-tabs-search {
    overflow: hidden !important;
    max-width: 100%;
  }
  body.is-mobile .module-tabs-search input {
    height: 40px;
    border-radius: 12px;
  }

  body.is-mobile .module-tabs-actions {
    overflow: visible !important;
  }
  body.is-mobile .module-tabs-actions .module-tabs-search,
  body.is-mobile .module-tabs-search {
    overflow: hidden !important;
    scrollbar-width: none;
  }
  body.is-mobile .module-tabs-search::-webkit-scrollbar { display: none; width: 0; height: 0; }


  /* Hộp thư + status: xếp dọc full width.
     Desktop khóa height:42px (một hàng) — mobile BẮT BUỘC height:auto
     nếu không .task-st-filters tràn đè thẻ list. */
  body.is-mobile .module-tabs.task-box-tabs,
  body.is-mobile .module-tabs.req-box-tabs {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  /* Gradient fade chỉ trên hàng chip cuộn — không phủ cả cột */
  body.is-mobile .req-box-tabs::after,
  body.is-mobile .task-box-tabs::after {
    display: none !important;
  }
  body.is-mobile .task-box-tabs .module-tabs-left,
  body.is-mobile .req-box-tabs .module-tabs-left {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 38px;
    flex: 0 0 auto;
  }
  body.is-mobile .task-box-tabs .module-tabs-left > a,
  body.is-mobile .req-box-tabs .module-tabs-left > a {
    height: auto !important;
  }
  body.is-mobile .task-box-tabs .task-st-filters {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    order: 2;
    gap: 8px;
  }
  body.is-mobile .task-box-tabs .task-st-filters::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* Tùy chỉnh / import-export desktop — ẩn trên mobile */
  body.is-mobile .work-customize,
  body.is-mobile #work-customize-dd,
  body.is-mobile #work-customize-menu {
    display: none !important;
  }

  /* Status filters: chip row riêng, không chồng mailbox */
  body.is-mobile .task-st-filters {
    margin: 0 0 10px;
    gap: 8px;
    padding-bottom: 4px;
  }
  body.is-mobile .task-st-filters a {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 650;
    white-space: nowrap;
  }

  /* Group accordion trên project */
  body.is-mobile .work-group-acc {
    background: transparent;
    border: 0;
    margin: 0 0 12px;
  }
  body.is-mobile .work-group-acc-head {
    min-height: 48px;
    padding: 10px 4px;
    font-size: .9rem;
    font-weight: 750;
  }
  body.is-mobile .work-group-acc .table-wrap {
    overflow: visible;
    margin-top: 6px;
  }

  /* Phiếu việc: ẩn breadcrumb web */
body.is-mobile .show-layout > a[href*="/office/cong-viec/projects/"],
  body.is-mobile .app-content > a[href*="/office/cong-viec/projects/"],
  body.is-mobile a.m-hide-on-mobile-crumb {
    display: none !important;
  }


  /* TinyMCE gọn trên mobile */
  body.is-mobile .tox-editor-header,
  body.is-mobile .tox-toolbar-overlord,
  body.is-mobile .tox-toolbar__primary {
    flex-wrap: wrap !important;
  }
  body.is-mobile .tox-toolbar__group {
    padding: 0 2px !important;
  }
  body.is-mobile .tox-tbtn {
    width: 34px !important;
    height: 34px !important;
  }
  body.is-mobile .tox-edit-area__iframe,
  body.is-mobile .tox .tox-edit-area {
    min-height: 120px !important;
  }



  body.is-mobile .work-customize,
  body.is-mobile #work-customize-dd {
    display: none !important;
  }
  body.is-mobile .task-child-create {
    margin-top: 8px;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    padding: 4px 10px 10px;
    background: #fafafa;
  }
  body.is-mobile .task-child-create > summary {
    list-style: none;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--m-brand) !important;
    font-weight: 750 !important;
  }
  body.is-mobile .task-child-create > summary::-webkit-details-marker { display: none; }

  /* Header avatar align */
  body.is-mobile .user-menu-trigger img,
  body.is-mobile .user-menu-trigger .user-avatar,
  body.is-mobile .hdr-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }
  body.is-mobile .app-header {
    align-items: center;
  }

  /* Show card full bleed hơn một chút */
  body.is-mobile .show-content-card,
  body.is-mobile .form-panel.task-part {
    border-radius: 14px;
  }
  body.is-mobile .show-field,
  body.is-mobile .show-fields .show-field-block-title {
    padding: 12px 12px;
  }
}

@media (max-width: 767px) {
  /* ===== UX Sync v5: mật độ + đồng bộ thẻ + vùng an toàn nút ===== */

  /* Header gọn, avatar không hộp vuông */
  body.is-mobile .app-header {
    height: calc(var(--m-header-h) + env(safe-area-inset-top, 0px));
    min-height: calc(var(--m-header-h) + env(safe-area-inset-top, 0px));
  }
  body.is-mobile .app-page-title { font-size: 1.05rem; }
  body.is-mobile .hdr-chrome-bell,
  body.is-mobile .user-menu-trigger {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 12px !important;
  }
  body.is-mobile .user-menu-trigger img,
  body.is-mobile .user-menu-trigger .user-avatar,
  body.is-mobile .hdr-user-avatar,
  body.is-mobile .user-menu-trigger span[style],
  body.is-mobile .user-avatar-fallback {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 0 !important;
  }

  /* Home: bớt khoảng trắng */
  body.is-mobile .m-home-hello {
    margin: 0 0 8px !important;
    line-height: 1.25;
  }
  body.is-mobile .m-home-hello strong { font-size: 1.05rem !important; }
  body.is-mobile .grid.grid-3 { gap: var(--m-gap); }
  body.is-mobile .card.stat h3 {
    margin: 0 0 2px;
    font-size: .72rem;
    font-weight: 650;
    color: var(--m-muted);
  }
  body.is-mobile .card.stat strong {
    font-size: 1.55rem;
    line-height: 1.1;
  }
  body.is-mobile .card.stat .muted,
  body.is-mobile .card.stat p.muted {
    margin: 4px 0 0 !important;
    font-size: .72rem !important;
    opacity: .85;
  }
  body.is-mobile .app-content > .card:not(.stat) {
    margin-top: var(--m-gap) !important;
    padding: var(--m-card-pad) 14px !important;
    border-radius: var(--m-radius) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: var(--m-shadow) !important;
    background: var(--m-card) !important;
  }
  body.is-mobile .app-content > .card:not(.stat) h2 {
    margin: 0 0 4px !important;
    font-size: .95rem !important;
  }
  body.is-mobile .app-content > .card:not(.stat) p {
    margin: 0 !important;
    font-size: .82rem !important;
    line-height: 1.4;
  }

  /* Đồng bộ mọi thẻ nội dung */
  body.is-mobile .show-content-card,
  body.is-mobile .disc-card,
  body.is-mobile .form-panel.task-part,
  body.is-mobile .show-act-card,
  body.is-mobile .list-panel .table-erp tbody tr,
  body.is-mobile .card.stat {
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow) !important;
  }
  body.is-mobile .show-content-head {
    padding: 12px 12px 6px !important;
  }
  body.is-mobile .show-content-title {
    font-size: 1.08rem !important;
    line-height: 1.25 !important;
  }
  body.is-mobile .show-meta {
    padding: 0 12px 10px !important;
    gap: 6px !important;
  }
  body.is-mobile .show-meta-line { font-size: .78rem !important; }
  body.is-mobile .show-field,
  body.is-mobile .show-fields .show-field-block-title {
    padding: 10px 12px !important;
  }
  body.is-mobile .show-field-label,
  body.is-mobile .show-fields .show-field-label {
    margin: 0 0 2px !important;
    font-size: .7rem !important;
  }
  body.is-mobile .show-field-value,
  body.is-mobile .show-field-value-text {
    font-size: .92rem !important;
    line-height: 1.4 !important;
  }

  /* Task parts denser */
  body.is-mobile .task-part-head {
    min-height: 44px;
    padding: 8px 12px !important;
  }
  body.is-mobile .task-part-title { font-size: .92rem !important; }
  body.is-mobile .form-panel-body { padding: 8px 12px 12px !important; }
  body.is-mobile .form-panel-footer {
    padding: 8px 12px 12px !important;
    display: flex;
    gap: 8px;
  }
  body.is-mobile .form-panel-footer .btn-std {
    flex: 1 1 0;
    min-height: 44px;
    border-radius: 12px;
  }

  /* Segment: bỏ gạch chân desktop / đồng bộ pill */
  body.is-mobile .task-box-tabs a,
  body.is-mobile .req-box-tabs a,
  body.is-mobile .module-tabs:not(.task-primary-tabs) .module-tabs-left > a {
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  body.is-mobile .task-box-tabs a.active,
  body.is-mobile .req-box-tabs a.active {
    border-bottom: 0 !important;
  }
  body.is-mobile .task-box-tabs .module-tabs-left,
  body.is-mobile .req-box-tabs .module-tabs-left {
    background: #e8eaef;
  }

  /* Search: hết artifact scrollbar */
  body.is-mobile .module-tabs-actions,
  body.is-mobile .module-tabs-search,
  body.is-mobile .module-tabs-search input {
    overflow: hidden !important;
    scrollbar-width: none !important;
  }
  body.is-mobile .module-tabs-search::-webkit-scrollbar,
  body.is-mobile .module-tabs-search input::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  body.is-mobile .module-tabs-search input {
    height: 38px !important;
    border-radius: 12px !important;
  }

  /* FAB: không tràn mép, không đè bottom nav */
  body.is-mobile .module-tabs-actions .btn-std-primary,
  body.is-mobile .module-tabs-actions [data-tpl-picker-open] {
    right: max(10px, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--m-nav-h) + 14px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 46 !important;
    width: var(--m-fab) !important;
    height: var(--m-fab) !important;
    max-width: var(--m-fab) !important;
    box-sizing: border-box !important;
  }

  /* Dock duyệt: sát nav, không chồng, không tràn */
  body.is-mobile .show-act-btns,
  body.is-mobile .show-act-card > form:has(> button.btn-std) {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    bottom: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 48 !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  body.is-mobile .show-act-btns .btn-std {
    flex: 1 1 0;
    min-width: 0 !important;
    max-width: 100%;
    height: 44px !important;
    border-radius: 12px !important;
  }
  body.is-mobile .app-content:has(.show-act-btns),
  body.is-mobile .app-content:has(.show-act-card > form > .btn-std) {
    padding-bottom: calc(var(--m-nav-h) + 64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Bottom nav gọn */
  body.is-mobile .m-bottom-nav {
    height: calc(var(--m-nav-h) + env(safe-area-inset-bottom, 0px));
    z-index: 50 !important;
  }

  /* Group accordion denser */
  body.is-mobile .work-group-acc-head {
    min-height: 44px;
    padding: 8px 2px !important;
  }
  body.is-mobile .work-group-acc .empty,
  body.is-mobile .table-erp .empty {
    padding: 16px 12px !important;
    font-size: .84rem;
  }

  /* Aside / thảo luận không bị dock che */
  body.is-mobile .disc-card { margin-bottom: 4px; }
  body.is-mobile .disc-composer,
  body.is-mobile .disc-input-wrap {
    padding-bottom: 4px;
  }

  /* Modal bottom sheet không tràn */
  body.is-mobile .show-act-modal-panel {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    border-radius: 16px 16px 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body.is-mobile .show-act-modal-panel .btn-std {
    min-height: 44px;
  }

  /* Ẩn khối picker/modal heading chiếm chỗ ảo trên trang */
  body.is-mobile .tpl-picker[hidden],
  body.is-mobile [hidden].tpl-picker,
  body.is-mobile .show-act-modal[hidden] {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* v5.1 — siết padding phiếu + search overflow gốc desktop */
  body.is-mobile .show-content-card {
    padding: 0 !important;
  }
  body.is-mobile .show-content-card > .show-content-head,
  body.is-mobile .show-content-card > .show-meta,
  body.is-mobile .show-content-card > .show-fields {
    /* giữ nhịp trong thẻ */
  }
  body.is-mobile .task-primary-tabs,
  body.is-mobile .task-primary-tabs .module-tabs-actions,
  body.is-mobile .module-tabs.task-primary-tabs {
    overflow: visible !important;
  }
  body.is-mobile .module-tabs-search,
  body.is-mobile .module-tabs-actions .module-tabs-search,
  body.is-mobile .module-tabs-search .ts-wrapper,
  body.is-mobile .module-tabs-search form {
    overflow: hidden !important;
    max-height: 40px;
  }
  body.is-mobile .module-tabs-search input.form-control,
  body.is-mobile .module-tabs-search input[type="search"],
  body.is-mobile .module-tabs-search input[type="text"] {
    overflow: hidden !important;
    max-height: 38px !important;
    line-height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Field denser một chút nữa */
  body.is-mobile .show-field,
  body.is-mobile .show-fields .show-field-block-title {
    padding: 8px 12px !important;
  }
  body.is-mobile .show-content-head {
    padding: 10px 12px 4px !important;
  }
  body.is-mobile .show-meta {
    padding: 0 12px 8px !important;
  }
  /* Table-row card trong form: đỡ phình */
  body.is-mobile .show-field-value table.form-table-weighted tbody tr,
  body.is-mobile .show-field-value table.form-table tbody tr {
    padding: 6px 10px !important;
    margin-bottom: 8px !important;
  }
  body.is-mobile .show-field-value table.form-table-weighted td,
  body.is-mobile .show-field-value table.form-table td {
    padding: 5px 0 !important;
  }
  /* List card denser */
  body.is-mobile .table-erp tbody tr:has(td.col-name) {
    padding: 10px 12px !important;
    gap: 4px 8px !important;
  }
  body.is-mobile .table-erp tbody td.col-name .table-name-link {
    font-size: .94rem !important;
  }
  body.is-mobile .table-erp tbody td .col-m-meta {
    margin-top: 4px !important;
    font-size: .75rem !important;
  }
}

@media (max-width: 767px) {
  /* ===== Shell sync: Thảo luận / Aside / Theo dõi ===== */

  /* Tiêu đề section cùng một khuôn (bỏ xanh desktop lệch) */
  body.is-mobile .disc-title,
  body.is-mobile .show-aside-sec-head {
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #6b7280 !important;
    margin: 0 !important;
  }
  body.is-mobile .disc-head {
    margin-bottom: 8px !important;
    padding: 10px 12px 8px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    align-items: center !important;
  }
  body.is-mobile .disc-count { font-size: .72rem !important; color: #9ca3af !important; }
  body.is-mobile .show-aside-sec-head {
    min-height: 44px;
    padding: 10px 12px !important;
    justify-content: space-between;
  }
  body.is-mobile .show-aside-chev {
    border-color: #9ca3af !important;
  }
  body.is-mobile .show-aside-sec-body {
    padding: 0 12px 12px !important;
  }
  body.is-mobile .show-aside-sections {
    margin-top: 0 !important;
    border-top: 0 !important;
  }
  body.is-mobile .show-aside-sec {
    border-bottom: 1px solid #f0f0f0 !important;
  }
  body.is-mobile .show-aside-sec:last-child {
    border-bottom: 0 !important;
  }

  /* Thảo luận: composer đồng bộ nút tròn 40px */
  body.is-mobile .disc-card {
    padding-bottom: 4px;
  }
  body.is-mobile .disc-composer {
    padding: 0 12px 10px !important;
    margin-bottom: 0 !important;
  }
  body.is-mobile .disc-composer-head {
    margin-bottom: 8px !important;
  }
  body.is-mobile .disc-attach-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px dashed #d1d5db !important;
    background: #fff !important;
    color: #6b7280 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  body.is-mobile .disc-attach-btn > span:not(.disc-attach-ico) {
    display: none !important; /* chỉ giữ icon — đồng bộ nút + theo dõi */
  }
  body.is-mobile .disc-attach-ico svg {
    width: 18px !important;
    height: 18px !important;
  }
  body.is-mobile .disc-compose-shell {
    gap: 8px !important;
    align-items: center !important;
  }
  body.is-mobile .disc-compose-shell .disc-textarea {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 20px !important;
    padding: 8px 14px !important;
    border-color: #e5e7eb !important;
    font-size: .9rem !important;
  }
  body.is-mobile .disc-compose-shell .disc-textarea:focus {
    border-color: #f0b4b8 !important;
    box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.1) !important;
  }
  body.is-mobile .disc-compose-shell .disc-send-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #e5e7eb !important;
  }
  body.is-mobile .disc-compose-shell .disc-send-btn.is-ready {
    background: var(--m-brand, #E30613) !important;
  }
  body.is-mobile .disc-compose-shell .disc-send-btn.is-ready:hover {
    background: #c10510 !important;
  }
  body.is-mobile .disc-compose-shell .disc-send-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Người theo dõi: cùng 40px circle dashed */
  body.is-mobile .show-follow-add-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    border: 1px dashed #d1d5db !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    color: #6b7280 !important;
  }
  body.is-mobile .show-follow-av,
  body.is-mobile .show-follow-av .avatar,
  body.is-mobile .show-follow-avatar-img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
  }

  /* Thông tin chung: mật độ + căn hàng */
  body.is-mobile .show-taskinfo-list {
    gap: 6px !important;
  }
  body.is-mobile .show-taskinfo-row {
    align-items: center !important;
    gap: 10px !important;
    min-height: 32px;
    font-size: .84rem !important;
    line-height: 1.35 !important;
  }
  body.is-mobile .show-taskinfo-ico {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    margin-top: 0 !important;
    border-radius: 8px;
    background: #f3f4f6;
    color: #6b7280 !important;
  }
  body.is-mobile .show-taskinfo-ico svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Status bar: cùng bo góc hệ thống, cao đủ chạm */
  body.is-mobile .task-st-btn,
  body.is-mobile summary.task-st-btn,
  body.is-mobile details.task-st > summary.task-st-btn {
    min-height: 44px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
  }
  body.is-mobile details.task-st {
    margin-top: 10px !important;
  }

  /* Việc con CTA: cùng dashed circle language */
  body.is-mobile .task-child-create {
    border-radius: 12px !important;
    padding: 2px 10px 8px !important;
  }
  body.is-mobile .task-child-create > summary {
    min-height: 40px !important;
    justify-content: flex-start !important;
    gap: 8px;
  }
}

@media (max-width: 767px) {
  /* ===== Composer row sync: attach + textarea + send ===== */
  body.is-mobile .disc-composer {
    display: grid !important;
    grid-template-columns: 1fr 40px 40px;
    grid-template-areas:
      "user user user"
      "input attach send"
      "preview preview preview";
    column-gap: 8px;
    row-gap: 8px;
    align-items: center;
    padding: 0 12px 10px !important;
  }
  body.is-mobile .disc-composer-head {
    display: contents !important;
    margin: 0 !important;
  }
  body.is-mobile .disc-composer-user {
    grid-area: user;
    margin: 0 !important;
  }
  body.is-mobile .disc-attach-btn {
    grid-area: attach;
    align-self: center;
    justify-self: center;
    margin: 0 !important;
  }
  body.is-mobile .disc-compose-shell {
    display: contents !important;
    gap: 0 !important;
  }
  body.is-mobile .disc-input-wrap {
    grid-area: input;
    min-width: 0;
  }
  body.is-mobile .disc-compose-shell .disc-textarea {
    width: 100% !important;
  }
  body.is-mobile .disc-compose-shell .disc-send-btn {
    grid-area: send;
    align-self: center;
    justify-self: center;
  }
  body.is-mobile .disc-file-preview {
    grid-area: preview;
  }
  /* Secondary actions: cùng dashed circle (attach = follow+) */
  body.is-mobile .disc-attach-btn {
    border: 1px dashed #d1d5db !important;
    background: #fff !important;
  }
  /* Tiêu đề section: cùng độ đậm */
  body.is-mobile .disc-title,
  body.is-mobile .show-aside-sec-head {
    font-weight: 800 !important;
    color: #6b7280 !important;
  }
}

@media (max-width: 767px) {
  /* ===== Show-layout shrink guard ===== */
  body.is-mobile .show-layout,
  body.is-mobile .show-main-col {
    align-items: stretch !important;
  }
  body.is-mobile .disc-card,
  body.is-mobile .form-panel.task-part,
  body.is-mobile .show-content-card,
  body.is-mobile .show-act-card,
  body.is-mobile .card.disc-card {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }
}

@media (max-width: 767px) {
  /* ===== WF board mobile: process tabs + kanban ===== */

  /* Desktop ghép tab + tools một hàng → search/bộ lọc đè tab.
     Mobile: xếp dọc full bề ngang. */
  body.is-mobile .wf-process-tabs.module-tabs {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    min-width: 0 !important;
  }
  body.is-mobile .wf-process-tabs .module-tabs-left {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #e5e7eb;
    border-radius: 12px;
    padding: 3px;
  }
  body.is-mobile .wf-process-tabs .module-tabs-left::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  body.is-mobile .wf-process-tabs .module-tabs-left > a {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }

  /* Tools trên hàng title layout-tabs */
  body.is-mobile .wf-layout-tabs {
    flex-wrap: wrap !important;
    align-items: stretch !important;
    height: auto !important;
  }
  body.is-mobile .wf-layout-tabs .wf-layout-tools {
    display: flex !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
  }
  body.is-mobile .wf-process-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  body.is-mobile .wf-process-tabs .wf-process-count {
    width: 100% !important;
    margin: 4px 0 0 !important;
    justify-content: flex-start !important;
  }
  body.is-mobile .wf-process-tabs .wf-task-count {
    color: #6b7280 !important;
    font-size: .8rem !important;
    font-weight: 650 !important;
  }
  body.is-mobile .wf-process-tools .vpdt-search-combo,
  body.is-mobile .wf-process-tools .wf-task-search--combo {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    border-radius: 12px !important;
  }
  body.is-mobile .wf-process-tools .vpdt-search-combo input[type="search"],
  body.is-mobile .wf-process-tools .wf-task-search--combo input[type="search"] {
    height: 38px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  
  body.is-mobile .list-searchbar .vpdt-search-combo,
  body.is-mobile .list-searchbar .search-field {
    flex: 1 1 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
    border-radius: 12px !important;
  }

  body.is-mobile .wf-process-tools .wf-task-filter--ico {
    width: 40px !important;
    min-width: 40px !important;
  }
  body.is-mobile .wf-process-tools .wf-filter-panel {
    left: auto;
    right: 0;
    width: min(360px, calc(100vw - 24px)) !important;
  }

  /* Nút tạo nhiệm vụ → FAB (cùng khuôn Công việc) */
  body.is-mobile .wf-process-tools > a.btn-std-primary {
    position: fixed !important;
    right: 14px !important;
    bottom: calc(var(--m-nav-h, 56px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 36 !important;
    width: var(--m-fab, 56px) !important;
    min-width: var(--m-fab, 56px) !important;
    height: var(--m-fab, 56px) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow: 0 10px 28px rgba(227, 6, 19, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    grid-column: 1 / -1;
  }
  body.is-mobile .wf-process-tools > a.btn-std-primary::before {
    content: "+";
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
  }

  /* Chip «Danh sách quy trình» — CHỈ layout-tabs quy trình.
     Cấm đụng task-box / req-box / task-primary (đã từng ép tab Công việc full-width). */
  body.is-mobile .app-content > .module-tabs:not(.wf-process-tabs):not(.task-primary-tabs):not(.task-box-tabs):not(.req-box-tabs) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 0 8px !important;
  }
  body.is-mobile .app-content > .module-tabs:not(.wf-process-tabs):not(.task-primary-tabs):not(.task-box-tabs):not(.req-box-tabs) .module-tabs-left {
    width: 100% !important;
  }
  body.is-mobile .app-content > .module-tabs:not(.wf-process-tabs):not(.task-primary-tabs):not(.task-box-tabs):not(.req-box-tabs) .module-tabs-left > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    border: 1px solid #f0b4b8;
    border-radius: 12px;
    background: #fff;
    color: var(--m-brand, #E30613) !important;
    font-weight: 700;
    box-shadow: none !important;
  }
  body.is-mobile .app-content > .module-tabs:not(.wf-process-tabs):not(.task-primary-tabs):not(.task-box-tabs):not(.req-box-tabs) .module-tabs-left > a.active {
    background: #fff !important;
    color: var(--m-brand, #E30613) !important;
    box-shadow: none !important;
  }

  /* Khôi phục chip mailbox Công việc / Đề xuất (auto width, cuộn ngang) */
  body.is-mobile .task-box-tabs .module-tabs-left > a,
  body.is-mobile .req-box-tabs .module-tabs-left > a {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    border: 0 !important;
    border-radius: 10px !important;
    justify-content: center;
    min-height: 32px !important;
    padding: 7px 10px !important;
    font-weight: 650 !important;
    color: #4b5563 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body.is-mobile .task-box-tabs .module-tabs-left > a.active,
  body.is-mobile .req-box-tabs .module-tabs-left > a.active {
    background: #fff !important;
    color: var(--m-brand, #E30613) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1) !important;
    border: 0 !important;
  }

  /* Kanban: full bề ngang vùng nội dung; cột cuộn ngang (peek cột kế) */
  body.is-mobile .app-frame:has(.wf-kanban--process) {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  body.is-mobile .app-frame:has(.wf-kanban--process) .app-main {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.is-mobile .app-frame:has(.wf-kanban--process) .app-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-bottom: calc(var(--m-nav-h, 56px) + 16px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }
  body.is-mobile .wf-kanban,
  body.is-mobile .wf-kanban--process {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.is-mobile .app-frame:has(.wf-kanban--process) .wf-kanban--process {
    flex: 1 1 auto !important;
    min-height: 280px !important;
  }
  body.is-mobile .wf-kanban--process > .wf-col {
    flex: 0 0 min(280px, 82vw) !important;
    width: min(280px, 82vw) !important;
    max-width: min(280px, 82vw) !important;
    min-width: 0 !important;
  }
}

@media (max-width: 767px) {
  /* ===== FAB create menu + status chip center ===== */

  /* Thẻ trạng thái: bỏ height:22px + border-bottom tab desktop (làm chữ lệch trên) */
  body.is-mobile .module-tabs.task-box-tabs a.task-st-filter,
  body.is-mobile .task-st-filters a.task-st-filter,
  body.is-mobile .task-st-filters a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    line-height: 32px !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
  }
  body.is-mobile .module-tabs.task-box-tabs a.task-st-filter--doing { border-color: #93c5fd !important; }
  body.is-mobile .module-tabs.task-box-tabs a.task-st-filter--overdue { border-color: #fdba74 !important; }
  body.is-mobile .module-tabs.task-box-tabs a.task-st-filter--done { border-color: #86efac !important; }
  body.is-mobile .module-tabs.task-box-tabs a.task-st-filter--failed { border-color: #fca5a5 !important; }
  body.is-mobile .task-box-tabs .task-st-filters {
    align-items: center !important;
    min-height: 36px;
  }

  /* FAB + menu tạo việc:
     Desktop #task-create-menu width:100% theo #task-create-dd.
     Khi nút position:fixed, dd co ~0 → menu thành dải dọc đè filter. */
  body.is-mobile #task-create-dd {
    position: static !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  body.is-mobile #task-create-btn {
    /* giữ FAB — đã style ở block FAB */
  }
  body.is-mobile #task-create-menu,
  body.is-mobile #task-create-btn[aria-expanded="true"] + #task-create-menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--m-nav-h, 56px) + var(--m-fab, 56px) + 72px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 45 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    background: #fff !important;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  body.is-mobile #task-create-menu[hidden],
  body.is-mobile #task-create-btn[aria-expanded="false"] + #task-create-menu {
    display: none !important;
  }
  body.is-mobile #task-create-menu .task-create-opt,
  body.is-mobile #task-create-menu .show-more-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: .95rem !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    text-align: left !important;
  }
}

@media (max-width: 767px) {
  /* ===== Nhắc việc cạnh chuông (mobile) ===== */
  /* Trước đây ẩn hẳn — PO cần icon nhắc việc cạnh chuông */
  body.is-mobile .hdr-chrome-wrap[data-chrome="remind"] {
    display: block !important;
  }
  body.is-mobile .hdr-chrome-remind-label {
    display: none !important;
  }
  body.is-mobile .hdr-chrome-remind {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
    justify-content: center !important;
  }
  body.is-mobile .hdr-chrome-remind-ico {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--m-ink, #111);
  }
  body.is-mobile .hdr-chrome-remind-ico svg {
    width: 20px !important;
    height: 20px !important;
  }
  body.is-mobile .hdr-chrome-remind .hdr-chrome-badge {
    top: 2px !important;
    right: 2px !important;
  }
}