/* =====================================================================================================
   GIAO DIEN DIEN THOAI (<= 768px) - nap SAU style.css, chi ghi de khi man hinh nho; may tinh khong bi anh huong.
   Gom: thanh tren gon, menu keo ben trai (drawer), thanh dieu huong duoi (Menu / Tong quan / Muc nay / Tai khoan),
   bang cuon ngang, o nhap + nut to de bam, hop thoai toan man hinh, ho tro tai tho (safe-area) khi mo tu icon man hinh chinh.
   JS dieu khien: public/js/mobile.js
   ===================================================================================================== */
.m-only, .m-backdrop, .m-acct-extra { display: none; }

@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
  button, .nav-btn, a, select, summary, label { touch-action: manipulation; }
  .m-only { display: revert; }
  .m-hide { display: none !important; }

  /* ---- Khung chinh: chiem du man hinh, tru thanh duoi ---- */
  .app { height: 100vh; height: 100dvh; }
  .layout { position: relative; }
  main#content { padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
  main#content.wide { padding-left: 8px; padding-right: 8px; }
  main#content > * { max-width: 100%; }

  /* ---- Thanh tren: ‹ / ☰ · Ten trang · ⋯ ---- */
  .topbar {
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px; gap: 8px; min-height: 54px; /* khong dat z-index o day: khung Tai khoan (fixed) nam trong .topbar phai noi len tren thanh duoi */
  }
  .topbar h1 { display: none; }
  .m-top-title { display: block; flex: 1; min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.25; color: #fff; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-top-btn {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.16);
    color: #fff; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  }
  .m-top-btn:active { background: rgba(255,255,255,.32); }
  .m-top-btn[hidden] { display: none; }

  /* ---- Menu keo ben trai (chinh la .sidebar) ---- */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; width: 88%; max-width: 340px; flex-direction: column; flex-wrap: nowrap;
    border-right: 1px solid var(--border); border-bottom: none; padding: calc(10px + env(safe-area-inset-top)) 10px calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-105%); transition: transform .22s ease; box-shadow: none; overscroll-behavior: contain;
  }
  body.drawer-open .sidebar { transform: translateX(0); box-shadow: 8px 0 28px rgba(0,0,0,.28); }
  .nav-group { flex-direction: column; flex-wrap: nowrap; }
  .nav-btn, .nav-group-header { min-height: 46px; padding-top: 11px; padding-bottom: 11px; font-size: 15px; }
  .nav-btn.sub3, .nav-btn.sub4 { font-size: 14px; }
  .m-backdrop { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(15,23,42,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.drawer-open .m-backdrop, body.acct-open .m-backdrop { opacity: 1; pointer-events: auto; }
  body.drawer-open, body.acct-open { overflow: hidden; }

  /* ---- Thanh dieu huong duoi ---- */
  .m-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: flex; background: #fff; border-top: 1px solid var(--border);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  }
  .m-bottom-nav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border: none; background: none;
    color: var(--text-muted); font-size: 11.5px; font-weight: 600; line-height: 1.2; border-radius: 10px; cursor: pointer; padding: 4px 2px;
  }
  .m-bottom-nav button .ico { font-size: 21px; line-height: 1; }
  .m-bottom-nav button.on { color: var(--primary); background: #eff6ff; }
  .m-bottom-nav button[hidden] { display: none; }

  /* ---- Tai khoan: .undo-controls thanh bang keo tu duoi len ---- */
  .undo-controls {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; flex-wrap: wrap; gap: 8px; align-items: center;
    background: #fff; color: var(--text); padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.3);
  }
  body.acct-open .undo-controls { display: flex; }
  .undo-controls .current-user-name { flex: 1 1 100%; font-size: 16px; font-weight: 600; color: var(--ink); }
  .undo-controls #logout-btn { flex: 1 1 100%; min-height: 46px; font-size: 15px; background: #fef2f2; color: var(--red); border: 1px solid #fecaca; border-radius: 10px; order: 9; }
  .undo-controls .undo-btn { width: 46px; height: 46px; background: #f3f4f6; color: var(--ink-2); border: 1px solid var(--border); font-size: 20px; }
  .undo-controls .history-dropdown { position: fixed; left: 10px; right: 10px; bottom: calc(120px + env(safe-area-inset-bottom)); top: auto; width: auto; max-height: 50vh; z-index: 1002; }
  .m-acct-extra { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; order: 8; }
  .m-acct-extra button { min-height: 46px; font-size: 15px; border-radius: 10px; border: 1px solid var(--border); background: #f3f4f6; color: var(--ink-2); font-weight: 600; cursor: pointer; }
  .m-acct-extra .m-install { background: var(--primary); color: #fff; border-color: var(--primary); }
  .m-acct-extra .m-hint { font-size: 13px; line-height: 1.5; color: var(--text-muted); background: #f9fafb; border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; }

  /* ---- Tro ly AI: nam tren thanh duoi ---- */
  .ai-fab { bottom: calc(68px + env(safe-area-inset-bottom)); right: 12px; }

  /* ---- Noi dung ---- */
  h1 { font-size: 21px; } h2 { font-size: 17px; }
  .card { padding: 12px 12px; margin-bottom: 12px; border-radius: 10px; }
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-box { padding: 10px 12px; }
  .stat-box .value { font-size: 18px; word-break: break-word; }
  .menu-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .menu-hub-header { gap: 14px; margin-bottom: 16px; }
  .menu-hub-card { padding: 12px; border-radius: 12px; }
  .menu-hub-card-icon { width: 40px; height: 40px; font-size: 19px; margin-bottom: 8px; }
  .menu-hub-card-title { font-size: 14px; line-height: 1.3; }
  .menu-hub-card-desc { font-size: 12px; line-height: 1.35; min-height: 0; margin-bottom: 8px; }
  .menu-hub-card-badge { font-size: 11px; padding: 3px 8px; }
  .menu-hub-greeting { font-size: 21px; }

  /* Form: xep doc, o nhap full chieu ngang, to de bam */
  .form-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .field { min-width: 0; width: 100%; }
  .field input, .field select, .field textarea, .field.wide input, .field.wide textarea { min-width: 0; width: 100%; min-height: 44px; padding: 9px 11px; }
  input[type="date"], input[type="month"], input[type="time"], input[type="number"], input[type="text"], input[type="search"], input[type="password"], input[type="email"], select { min-height: 42px; }
  textarea { min-height: 88px; }
  button { min-height: 40px; }
  button.primary { height: auto; min-height: 44px; padding: 10px 16px; }
  button.small, button.danger { min-height: 38px; padding: 7px 12px; }
  button.small.tabbtn { white-space: nowrap; }

  /* Hang nut / bo loc co the cuon ngang thay vi tran man hinh */
  .pg-tabs, .tabs, .tab-row, .filter-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pg-tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }

  /* Bang: cuon ngang trong khung, chu vua phai, de bam dong */
  .m-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; max-width: 100%; border-radius: 6px; }
  .m-scroll > table { min-width: max-content; }
  table { font-size: 13px; }
  th, td { padding: 8px 8px; }

  /* Hop thoai: toan man hinh */
  .pt-modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  .pt-modal-box { max-width: 100%; width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 16px 16px 0 0; }
  .pt-modal-body { padding: 14px; }
  [class*="modal"] > [class*="box"], [class*="modal"] > .card { max-width: 100%; }

  /* Man hinh dang nhap */
  .login-card { width: calc(100% - 28px); max-width: 420px; }
  .login-screen { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
}

/* Khi mo tu icon man hinh chinh (khong thanh dia chi): them lai khoang thu lai cho tai tho */
@media (display-mode: standalone) and (max-width: 768px) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
@media print { .m-bottom-nav, .m-backdrop, .m-top-btn, .m-top-title { display: none !important; } }

/* =====================================================================================================
   DANH SACH DAI TREN DIEN THOAI: bang nhieu cot -> the doc (class .m-cards do mobile.js gan), o loc nhanh, nut len dau trang
   ===================================================================================================== */
@media (max-width: 768px) {
  table.m-cards, table.m-cards tbody, table.m-cards tfoot, table.m-cards tr, table.m-cards td, table.m-cards th { display: block; width: auto; }
  table.m-cards { min-width: 0 !important; border: none; }
  table.m-cards thead { display: none; }
  table.m-cards tr:hover td { background: transparent; }
  table.m-cards tr.m-row {
    position: relative; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 8px; margin: 0 0 10px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
  }
  table.m-cards tr.m-row > td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 6px 0; border: none; border-bottom: 1px dashed #eceff3; text-align: right; font-size: 13.5px; min-width: 0 !important; width: auto !important; }
  table.m-cards tr.m-row > td::before { content: attr(data-label); flex: 0 0 40%; max-width: 40%; text-align: left; color: var(--text-muted); font-size: 12px; font-weight: 600; line-height: 1.4; padding-top: 2px; }
  table.m-cards tr.m-row > td:not([data-label])::before { content: none; }
  table.m-cards tr.m-row > td > * { max-width: 100%; }
  table.m-cards tr.m-row > td > input:not([type=checkbox]):not([type=radio]), table.m-cards tr.m-row > td > select { min-width: 0 !important; width: 100% !important; max-width: 60%; flex: 1 1 auto; text-align: right; }
  table.m-cards tr.m-row > td.m-title { display: block; text-align: left; font-size: 16px; font-weight: 700; color: var(--ink); padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
  table.m-cards tr.m-row > td.m-title::before { content: none; }
  table.m-cards tr.m-row > td.m-empty { display: none; }
  table.m-cards tr.m-row > td.m-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; border-bottom: none; padding-top: 10px; text-align: left; }
  table.m-cards tr.m-row > td.m-actions > button { flex: 1 1 auto; }
  table.m-cards tr.m-row > td.m-keep { position: absolute; top: 10px; right: 12px; padding: 0; border: none; width: auto; }
  /* Phan 'Xem them' */
  table.m-cards tr.m-has-more:not(.m-open) > td.m-more { display: none; }
  table.m-cards tr.m-has-more::after { content: 'Xem thêm ▾'; display: block; text-align: center; margin-top: 6px; padding: 10px 0 4px; border-top: 1px solid var(--border); color: var(--primary); font-weight: 600; font-size: 13.5px; cursor: pointer; }
  table.m-cards tr.m-has-more.m-open::after { content: 'Thu gọn ▴'; }
  table.m-cards tr.m-special, table.m-cards tfoot tr { padding: 8px 4px; }
  table.m-cards tr.m-special > td, table.m-cards tfoot td, table.m-cards tfoot th { text-align: left; border: none; padding: 4px 0; }
  table.m-cards tr.m-special > td.empty { text-align: center; }

  /* O loc nhanh */
  .m-filter { position: sticky; top: -12px; z-index: 5; display: flex; align-items: center; gap: 8px; background: var(--bg); padding: 8px 0 8px; margin-bottom: 4px; }
  .m-filter input { flex: 1; min-width: 0; min-height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: #fff; }
  .m-filter-count { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--text-muted); }

  /* Nut len dau trang */
  .m-up { position: fixed; left: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 940; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--primary); font-size: 22px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.2); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
  .m-up[hidden] { display: none; }

  /* Bo loc / form-row: 2 cot de do dai doc hon */
  .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .form-row > * { min-width: 0; }
  .form-row > .field.wide, .form-row > h2, .form-row > h3, .form-row > button.primary, .form-row > p, .form-row > div:not(.field) { grid-column: 1 / -1; }
  .form-row .field:only-child { grid-column: 1 / -1; }
}
.m-up { display: none; }
@media (max-width: 768px) { .m-up { display: flex; } }
@media (max-width: 768px) {
  table.m-cards tr.m-row > td input:not([type=checkbox]):not([type=radio]), table.m-cards tr.m-row > td select, table.m-cards tr.m-row > td textarea { border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; min-height: 38px; background: #fff; font-size: 15px !important; }
}
@media (max-width: 768px) {
  /* Cot tieu de (ma lenh/ten) luon len dau the du nam o cot nao */
  table.m-cards tr.m-row { display: flex; flex-direction: column; }
  table.m-cards tr.m-row > td.m-title { order: -1; }
  table.m-cards tr.m-row.m-has-more::after { order: 99; }
}

/* =====================================================================================================
   TRANG CHU (Menu tong hop) + TRANG CHI TIET tren dien thoai (4/11/2026)
   ===================================================================================================== */
#m-chips { display: none; }
@media (max-width: 768px) {
  /* Tieu de 2 dong: ten muc nho + ten trang */
  .m-top-title { line-height: 1.2; }
  .m-top-title small { display: block; font-size: 11px; font-weight: 500; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-top-title span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Thanh chip cac trang cung muc */
  #m-chips { display: flex; gap: 8px; overflow-x: auto; flex-shrink: 0; padding: 8px 10px; border-bottom: 1px solid var(--border); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #m-chips[hidden] { display: none; }
  #m-chips::-webkit-scrollbar { display: none; }
  .m-chip { flex: 0 0 auto; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.85); color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
  .m-chip.on { background: var(--m-accent, var(--primary)); color: var(--m-accent-text, #fff); border-color: transparent; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
  main#content { padding-top: 10px; }

  /* Trang chu: dau trang gon */
  .menu-hub-header { align-items: center; gap: 12px; margin-bottom: 12px; }
  .menu-hub-avatar { width: 54px !important; height: 54px !important; font-size: 22px !important; }
  .menu-hub-avatar-edit { width: 22px !important; height: 22px !important; font-size: 11px !important; }
  .menu-hub-eyebrow { font-size: 12px; }
  .menu-hub-greeting { font-size: 18px; line-height: 1.25; }
  .menu-hub-date { font-size: 12px; }

  .m-hub-search { position: sticky; top: -10px; z-index: 6; background: var(--bg); padding: 4px 0 10px; }
  .m-hub-search input { width: 100%; min-height: 48px; border: 1px solid var(--border); border-radius: 14px; padding: 10px 16px; font-size: 16px; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.06); }
  .m-hub-h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 6px 2px 8px; }
  .m-hub-recent { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 6px; scrollbar-width: none; }
  .m-hub-recent::-webkit-scrollbar { display: none; }
  .m-recent { flex: 0 0 auto; min-height: 40px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--border); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
  .m-hub-results { display: flex; flex-direction: column; gap: 8px; }
  .m-hub-results[hidden], .m-hub-main[hidden] { display: none; }
  .m-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 54px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: #fff; cursor: pointer; }
  .m-result b { font-size: 15px; color: var(--ink); }
  .m-result small { font-size: 12px; color: var(--text-muted); }
  .m-hub-none { padding: 24px 8px; text-align: center; color: var(--text-muted); }

  /* O vuong module: kieu ung dung, 3 cot */
  .menu-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .menu-hub-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 14px 6px 10px; min-height: 108px; border-radius: 16px; }
  .menu-hub-card:active { transform: scale(.97); }
  .menu-hub-card-icon { width: 46px; height: 46px; font-size: 23px; margin: 0 0 8px; border-radius: 14px; }
  .menu-hub-card-title { font-size: 12.5px; line-height: 1.25; font-weight: 700; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .menu-hub-card-desc, .menu-hub-card-badge, .menu-hub-card-count { display: none; }

  /* Bang chon trang cua 1 muc */
  .m-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; max-height: 82vh; max-height: 82dvh; display: flex; flex-direction: column; background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(0,0,0,.3); transform: translateY(110%); transition: transform .22s ease; padding-bottom: env(safe-area-inset-bottom); }
  body.sheet-open .m-sheet { transform: translateY(0); }
  body.sheet-open .m-backdrop { opacity: 1; pointer-events: auto; }
  body.sheet-open { overflow: hidden; }
  .m-sheet-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; border-radius: 20px 20px 0 0; }
  .m-sheet-ico { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex: 0 0 auto; }
  .m-sheet-head > div { flex: 1; min-width: 0; }
  .m-sheet-title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.25; }
  .m-sheet-sub2 { font-size: 12px; color: var(--text-muted); }
  .m-sheet-x { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0,0,0,.07); font-size: 16px; cursor: pointer; padding: 0; }
  .m-sheet-body { overflow-y: auto; padding: 6px 10px 14px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .m-sheet-sub { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 12px 6px 4px; }
  .m-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 54px; padding: 10px 12px; border: none; border-bottom: 1px solid #f0f1f3; background: none; text-align: left; font-size: 15.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; border-radius: 10px; }
  .m-sheet-row:active { background: #f3f4f6; }
  .m-sheet-row.on { background: #eff6ff; color: var(--primary); font-weight: 700; }
  .m-sheet-row i { font-style: normal; color: #9ca3af; font-size: 20px; }
}
@media print { #m-chips, .m-sheet { display: none !important; } }

/* O nhap so luong THEO SIZE (Ke hoach SX, cot Lenh): 1 hang ngang, thang hang deu nhau */
@media (max-width: 768px) {
  table.m-cards tr.m-row > td.m-wide { display: block; text-align: left; }
  table.m-cards tr.m-row > td.m-wide::before { display: block; max-width: none; flex: none; margin-bottom: 6px; }
  .plan-size-row { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px !important; align-items: end !important; }
  .plan-size-row > span { min-width: 0; width: 100%; }
  .plan-size-row > span > label { text-align: center; font-size: 12px !important; font-weight: 700; color: var(--ink-2) !important; margin-bottom: 3px !important; }
  .plan-size-row .plan-size-input { width: 100% !important; min-width: 0 !important; min-height: 42px; padding: 6px 2px !important; text-align: center !important; font-size: 15px !important; -moz-appearance: textfield; }
  .plan-size-row > .tag-chip, .plan-size-row > .tag-input-field { grid-column: span 3; min-width: 0; width: auto !important; }
  .plan-size-row > .tag-chip input { min-width: 0; }
}

/* =====================================================================================================
   QUY TAC CHUNG cho cac mau inline hay gap trong cac trang (rong co dinh, hang flex khong xuong dong, luoi co dinh, hop thoai)
   ===================================================================================================== */
@media (max-width: 768px) {
  /* Bo loc chon nhieu (Kenh ban...): tran man hinh o ban dau */
  details.ch-multi { display: block !important; width: 100%; }
  details.ch-multi > summary { min-width: 0 !important; width: 100%; }
  details.ch-multi > div { min-width: 0 !important; left: 0 !important; right: 0 !important; }

  /* O nhap / chon co min-width, width co dinh lon: khong vuot man hinh */
  main#content input[style*="min-width"], main#content select[style*="min-width"], main#content textarea[style*="min-width"] { min-width: 0 !important; }
  main#content input[style*="width"], main#content select[style*="width"], main#content textarea[style*="width"] { max-width: 100%; }
  main#content img, main#content canvas, main#content svg { max-width: 100%; height: auto; }
  main#content pre { white-space: pre-wrap; word-break: break-word; overflow-x: auto; }

  /* Hang flex viet inline: cho xuong dong thay vi tran ngang */
  main#content [style*="display:flex"]:not(.plan-size-row):not(.tag-box):not([style*="flex-wrap:nowrap"]),
  main#content [style*="display: flex"]:not(.plan-size-row):not(.tag-box):not([style*="flex-wrap:nowrap"]) { flex-wrap: wrap; }

  /* Luoi co dinh nhieu cot -> 1 cot (tru lich 7 ngay) */
  main#content [style*="grid-template-columns"]:not([style*="repeat(7"]) { grid-template-columns: minmax(0, 1fr) !important; }

  /* Hop thoai tu dung bang style inline (position:fixed): khong rong hon man hinh */
  [style*="position:fixed"] > div, [style*="position: fixed"] > div { max-width: calc(100vw - 16px) !important; }
  .pt-modal-box, [class*="modal-box"] { max-width: 100% !important; }

  /* Chu dai (ma, email, duong dan) khong day vo bo cuc */
  main#content td, main#content th, main#content .card { overflow-wrap: anywhere; }
  main#content table:not(.m-cards) td, main#content table:not(.m-cards) th { overflow-wrap: normal; }
}

@media (max-width: 768px) {
  .ai-fab { touch-action: none; user-select: none; -webkit-user-select: none; }
}

/* =====================================================================================================
   BANG SO LIEU (m-mx): ton kho theo size, bao cao... -> bang NGANG, cot dau co dinh, so can phai thang hang (5/11/2026)
   + O so lieu tong quan (grid-stats) deu nhau, nhan checkbox khong rot dong, nut/o loc cung cao
   ===================================================================================================== */
@media (max-width: 768px) {
  table.m-mx { font-size: 13px; border-collapse: separate; border-spacing: 0; }
  table.m-mx th, table.m-mx td { padding: 9px 10px; white-space: nowrap; vertical-align: middle; border-bottom: 1px solid var(--border); }
  table.m-mx th { background: #f3f4f6; font-size: 11.5px; position: sticky; top: 0; }
  table.m-mx td.m-num, table.m-mx th.m-num { text-align: right; font-variant-numeric: tabular-nums; }
  table.m-mx tbody tr > :first-child, table.m-mx thead tr > :first-child, table.m-mx tfoot tr > :first-child {
    position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 2px 0 0 var(--border);
  }
  table.m-mx thead tr > :first-child { background: #f3f4f6; z-index: 3; }
  table.m-mx tfoot td, table.m-mx tfoot th { background: #f9fafb; font-weight: 700; }
  table.m-mx tbody tr:nth-child(even) > td { background-color: #fafbfc; }
  table.m-mx tbody tr:nth-child(even) > :first-child { background: #fafbfc; }
  table.m-mx td input[type=number] { width: 64px !important; min-width: 0 !important; min-height: 34px; padding: 4px 6px; text-align: right; }
  .m-scroll:has(> table.m-mx) { border: 1px solid var(--border); border-radius: 10px; background: #fff; }

  /* O so lieu tong quan: deu chieu cao, so thang hang, khong tran chu */
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
  .grid-stats > .stat-box { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 88px; padding: 10px 12px; }
  .grid-stats > .stat-box .label { margin: 0; line-height: 1.35; min-height: 2.7em; }
  .grid-stats > .stat-box .value { white-space: nowrap; font-size: clamp(13px, 3.9vw, 19px); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
  .grid-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Nhan co checkbox: khong de o tich rot xuong dong rieng */
  main#content label[style*="display:flex"], main#content label[style*="display: flex"] { flex-wrap: nowrap !important; white-space: normal !important; align-items: flex-start; }
  main#content label > input[type=checkbox], main#content label > input[type=radio] { flex: 0 0 auto; margin-top: 2px; }

  /* Hang bo loc: o nhap va nut cung cao, can day */
  .form-row > button.small, .form-row > button.primary, .form-row > .field > button { min-height: 44px; }
  input[type=date], input[type=month], input[type=time], input[type=datetime-local] { height: 44px; line-height: 1.2; -webkit-appearance: none; appearance: none; padding-top: 0; padding-bottom: 0; }
}
@media (max-width: 768px) {
  .form-row > label { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .m-dwrap { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; }
  .m-dwrap.block { display: block; width: 100%; }
  .m-dwrap > input { width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 6px; text-align: left; padding-left: 11px; }
  .m-dwrap > .m-ph { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 15px; pointer-events: none; }
  .m-dwrap > .m-ph[hidden] { display: none; }
}
@media (max-width: 768px) {
  /* Cot dau (ma) cua bang so lieu hep lai, cho phep xuong dong de nhuong cho cac cot so */
  table.m-mx tbody tr > :first-child:not([colspan]), table.m-mx thead tr > :first-child {
    white-space: normal; overflow-wrap: anywhere; min-width: 92px; max-width: 128px; font-size: 12.5px; line-height: 1.3;
  }
  table.m-mx td[colspan], table.m-mx th[colspan] { text-align: left !important; }
}
@media (max-width: 768px) {
  /* Cot chu (Ten, Loai...) trong bang so lieu: cho xuong dong, khong day cot so ra xa */
  table.m-mx td:not(.m-num):not(:first-child):not([colspan]), table.m-mx th:not(.m-num):not(:first-child) { white-space: normal; min-width: 96px; max-width: 170px; overflow-wrap: anywhere; line-height: 1.3; }
}