/* Giao diện mobile của bản web (M0 + M1, docs/BAO-CAO-MOBILE-WEB-2026-10-13.md).
   Mọi luật đều bám html[data-mobile="1"] — cờ do webMobileShell.js đặt khi là web + màn cảm ứng + hẹp hơn ngưỡng
   compact. App Windows không nạp file này; web trên máy tính và máy tính bảng không có cờ nên không đổi gì.
   Chỉ dùng token có sẵn (--ui-*, --ux-*, --dt-*), không !important.
   KÍCH THƯỚC (vùng chạm 44, hàng/menu 48, icon, thanh trên) không vá ở đây mà lấy từ trục token Mobile
   (tokens.mobile.css, sinh từ packages/design-tokens — docs/BAO-CAO-TOKEN-MOBILE-WEB-2026-10-15.md): khi có cờ, các
   token --dt-* gốc đổi giá trị nên mọi nút của app tự lớn theo. File này chỉ dùng thêm --dt-mobile-* cho phần riêng. */

html[data-mobile="1"] {
  --mobile-tabbar-h: var(--dt-mobile-tabbar-height);
  /* Thanh tab là viên kính nổi (iOS 27): khe dưới = vùng an toàn (thanh vuốt) hoặc khe tối thiểu. */
  --mobile-tabbar-bottom: max(env(safe-area-inset-bottom), var(--dt-mobile-tabbar-gap));
  /* Tổng chiều cao thanh tab chiếm ở đáy khung (khe trên + viên kính + khe dưới) — sheet, bàn phím… đứng trên mức này. */
  --mobile-tabbar-space: calc(var(--dt-mobile-tabbar-gap) + var(--mobile-tabbar-h) + var(--mobile-tabbar-bottom));
  --mobile-fab-size: var(--dt-mobile-fab-size);
  /* Nút ＋ nay đứng cạnh thanh tab, không đè nội dung — đáy vùng cuộn chỉ cần một nhịp thở. */
  --mobile-fab-clearance: var(--ui-space-6);
  /* Vật liệu kính (mobile.glass.*): nền mờ một phần + viền sáng rõ (iOS 27 bớt dựa vào bóng đổ). */
  --mobile-glass-fill: color-mix(in srgb, var(--ux-header) 72%, transparent);
  --mobile-glass-edge: color-mix(in srgb, var(--ui-text-primary) 12%, transparent);
  --mobile-glass-filter: blur(var(--dt-mobile-glass-blur)) saturate(var(--dt-mobile-glass-saturate));
  /* Rail dọc nhường chỗ cho thanh đáy: mọi chỗ trừ bề rộng rail (đệm .app, lỗ khung ảnh nền, vị trí menu) về 0. */
  --rail-w: 0px;
  /* Màn điện thoại không có chỗ cho "thẻ trong thẻ": thân trang tràn mép, các khe/đệm khung (header, thân trang,
     cột menu) bám --shell-gap đều về 0. Cột hiện từng màn một (xem Notebook / Dự án bên dưới). */
  --shell-gap: 0px;
  /* Khung "Liền mạch" chừa lề phải/dưới riêng (--ui-seamless-inset) — cũng về 0, không còn dải viền ở mép phải. */
  --ui-seamless-inset: 0px;
  /* Nền trang = mặt khung: khi trình duyệt co giãn thanh công cụ, dải lộ ra cùng màu chứ không phải vệt xám. */
  background: var(--ux-frame);
}

/* Trang không bao giờ được tự cuộn: overflow:hidden vẫn để trình duyệt cuộn trang khi focus() (mở Menu, mở ghi
   chú) — trên iPhone cả khung app bị đẩy lên, lộ dải trống dưới thanh đáy ("giật"). clip chặn cả cuộn lập trình. */
html[data-mobile="1"],
html[data-mobile="1"] body {
  overflow: clip;
  overscroll-behavior: none;
}

/* Khung app ghim vào khung nhìn (inset: 0) thay vì cao 100dvh: khi thanh công cụ của Safari/Chrome iOS co giãn,
   mép dưới khung đi cùng mép dưới màn hình nên thanh đáy, sheet Menu và nút ＋ không lệch nhau.
   Vùng an toàn (tai thỏ, thanh vuốt) chừa bằng env() khi mở dạng ứng dụng. */
html[data-mobile="1"] .app {
  position: fixed;
  inset: 0;
  height: auto;
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  border: 0;
  border-radius: 0;
  overflow: clip;
}

html[data-mobile="1"] #navRail { display: none; }

/* Thân trang các module: vuông mép (khe đã về 0 ở trên). */
html[data-mobile="1"] :is(.topbar, .grid, .notics-page, .project-page, .settings-page, .guide-page, .dashboard-page, .premium-page) {
  border-radius: 0;
}

/* Không có chuột thì không có rê chuột: bong bóng gợi ý (title) chỉ hiện ra đè lên nội dung sau mỗi lần chạm. */
html[data-mobile="1"] .app-tooltip { display: none; }

/* Hàng kéo-thả (việc, dự án, hạng mục): kéo-thả HTML5 trên điện thoại không dùng được, còn cử chỉ nhấc phần tử
   của iOS tranh với cử chỉ cuộn khi ngón tay bắt đầu trên hàng. */
html[data-mobile="1"] [draggable="true"] { -webkit-user-drag: none; }

/* --- Thanh tab kiểu iOS 27 (BA 23/10/2026 Q2): viên kính nổi cách mép, icon + nhãn chữ, mục đang chọn có nền viên
   thuốc màu nhấn. Vẫn là phần tử cuối của khung .app (flex cột) nên giữ chỗ — nội dung không chui dưới thanh tab.
   Nút ＋ (Q3) là nút kính tròn đứng ngay bên phải; thanh tab chừa chỗ cho nó khi nút đang hiện. --- */
.mobile-tabbar { display: none; }

html[data-mobile="1"] .mobile-tabbar {
  position: relative;
  z-index: var(--ui-layer-pane-top);
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  height: var(--mobile-tabbar-h);
  margin: var(--dt-mobile-tabbar-gap) var(--dt-mobile-tabbar-inset) var(--mobile-tabbar-bottom);
  padding: var(--dt-mobile-tabbar-item-inset);
  border: var(--ui-stroke-thin) solid var(--mobile-glass-edge);
  border-radius: var(--dt-dimension-radius-full);
  background: var(--mobile-glass-fill);
  -webkit-backdrop-filter: var(--mobile-glass-filter);
  backdrop-filter: var(--mobile-glass-filter);
  box-shadow: var(--ui-elevation-2);
}
html[data-mobile="1"]:has(#mobileFab:not([hidden])) .mobile-tabbar {
  margin-right: calc(var(--dt-mobile-tabbar-inset) + var(--mobile-fab-size) + var(--dt-mobile-tabbar-gap));
}
/* Màn không có nút ＋ (đang đọc ghi chú, chi tiết dự án — luật ẩn nút ở các mục NoteBook / Dự án): thanh tab giãn
   trọn bề ngang, không chừa chỗ trống bên phải. Giữ khớp với các luật ẩn .mobile-fab. */
html[data-mobile="1"]:is([data-view="notics"]:has(#noticsPage[data-has-note]), [data-view="project"][data-mobile-project="detail"]) .mobile-tabbar {
  margin-right: var(--dt-mobile-tabbar-inset);
}

html[data-mobile="1"] .mobile-tabbar-item {
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--dt-mobile-touch-target);
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-px);
  padding: 0;
  border: 0;
  border-radius: var(--dt-dimension-radius-full);
  background: transparent;
  color: var(--ui-text-secondary);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: color var(--ui-duration-fast) var(--ui-ease), background-color var(--ui-duration-fast) var(--ui-ease);
}

html[data-mobile="1"] .mobile-tabbar-icon {
  display: inline-flex;
  position: relative;
  width: var(--dt-mobile-tabbar-icon-size);
  height: var(--dt-mobile-tabbar-icon-size);
  transition: transform var(--ui-duration-fast) var(--ui-ease);
}
html[data-mobile="1"] .mobile-tabbar-label {
  max-width: 100%;
  overflow: hidden;
  font-size: var(--dt-mobile-tabbar-label-size);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Nhấn: icon lún nhẹ ngay dưới ngón tay (chỉ transform — lớp ghép, không tính lại bố cục). */
html[data-mobile="1"] .mobile-tabbar-item:active .mobile-tabbar-icon { transform: scale(.9); }
html[data-mobile="1"] .mobile-tabbar-item svg[data-dual] :is(.nav-icon-outline, .nav-icon-fill) {
  transition: opacity var(--ui-duration-fast) var(--ui-ease);
}
html[data-mobile="1"] .mobile-tabbar-icon svg { width: 100%; height: 100%; }

/* Chấm trạng thái đồng bộ trên "Menu" (webMobileShell.js#watchSyncBadge) — cùng màu với chấm avatar của máy tính. */
html[data-mobile="1"] .mobile-tabbar-sync {
  position: absolute;
  top: calc(-1 * var(--ui-space-0-5));
  right: calc(-1 * var(--ui-space-0-5));
  width: var(--ui-space-2-5);
  height: var(--ui-space-2-5);
  border-radius: var(--ui-radius-circle);
  border: var(--ui-stroke-thick) solid var(--ux-header);
  background: var(--ui-text-secondary);
}
html[data-mobile="1"] .mobile-tabbar-sync[hidden] { display: none; }
html[data-mobile="1"] .mobile-tabbar-sync[data-sync-phase="error"] { background: var(--ui-danger); }
html[data-mobile="1"] .mobile-tabbar-sync[data-sync-phase="offline"] { background: var(--ui-warning); }
html[data-mobile="1"] .mobile-tabbar-sync[data-sync-phase="busy"] { background: var(--ui-accent); }

/* Mục đang chọn: chữ + icon màu nhấn trên nền viên thuốc nhạt (iOS 27: nền mục chọn đậm hơn nền thanh). */
html[data-mobile="1"] .mobile-tabbar-item.is-active {
  color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 14%, transparent);
}
/* Mục đang chọn đổi icon nét → icon đặc, cùng cách rail làm (svg[data-dual]). */
html[data-mobile="1"] .mobile-tabbar-item.is-active svg[data-dual] .nav-icon-outline { opacity: 0; }
html[data-mobile="1"] .mobile-tabbar-item.is-active svg[data-dual] .nav-icon-fill { opacity: 1; }

html[data-mobile="1"] .mobile-tabbar-item:focus-visible {
  outline: var(--ui-stroke-thick) solid var(--ui-accent);
  outline-offset: calc(-1 * var(--ui-stroke-thick));
}

/* --- Nút ＋: nút kính tròn tô màu nhấn, cạnh phải thanh tab (iOS 26/27, BA 23/10/2026 Q3). Thêm việc / ghi chú /
   dự án theo module đang mở. --- */
.mobile-fab { display: none; }

html[data-mobile="1"] .mobile-fab {
  position: fixed;
  z-index: var(--ui-layer-pane-top);
  right: calc(var(--dt-mobile-tabbar-inset) + env(safe-area-inset-right));
  bottom: var(--mobile-tabbar-bottom);
  width: var(--mobile-fab-size);
  height: var(--mobile-fab-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: var(--ui-stroke-thin) solid var(--mobile-glass-edge);
  border-radius: var(--ui-radius-circle);
  background: color-mix(in srgb, var(--ui-accent) 88%, transparent);
  -webkit-backdrop-filter: var(--mobile-glass-filter);
  backdrop-filter: var(--mobile-glass-filter);
  color: var(--ui-text-on-accent);
  box-shadow: var(--ui-elevation-2);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform var(--ui-duration-fast) var(--ui-ease);
}
html[data-mobile="1"] .mobile-fab:active { transform: scale(.94); }
html[data-mobile="1"] .mobile-fab svg {
  width: var(--dt-mobile-fab-icon-size);
  height: var(--dt-mobile-fab-icon-size);
}
html[data-mobile="1"] .mobile-fab[hidden],
html[data-mobile="1"].has-blocking-overlay .mobile-fab { display: none; }
html[data-mobile="1"] .mobile-fab:focus-visible {
  outline: var(--ui-stroke-thick) solid var(--ui-accent);
  outline-offset: var(--ui-stroke-thick);
}

/* "Giảm độ trong suốt" (Cài đặt iOS › Trợ năng): kính → nền đặc, không làm mờ. */
@media (prefers-reduced-transparency: reduce) {
  html[data-mobile="1"] {
    --mobile-glass-fill: var(--ux-header);
    --mobile-glass-filter: none;
  }
  html[data-mobile="1"] .mobile-fab { background: var(--ui-accent); }
}

/* --- Menu: menu tài khoản có sẵn (#navAvatarMenu) trình bày thành tấm kính nổi trượt lên, đứng ngay trên thanh tab
   (thanh tab vẫn bấm được: chạm lại "Menu" để đóng, chạm mục khác để chuyển module). --- */
html[data-mobile="1"] .nav-avatar-menu {
  top: auto;
  right: var(--dt-mobile-tabbar-inset);
  bottom: var(--mobile-tabbar-space);
  left: var(--dt-mobile-tabbar-inset);
  width: auto;
  max-height: calc(100dvh - env(safe-area-inset-top) - var(--mobile-tabbar-space) - var(--ui-space-6));
  padding: var(--ui-space-2);
  border-radius: var(--dt-mobile-sheet-radius);
  /* Nền mờ phía sau sheet: bóng trải rộng thay cho một lớp phủ riêng, chạm ra ngoài vẫn đóng như popover cũ. */
  box-shadow: 0 0 0 100vmax rgba(var(--ui-scrim-rgb), .34);
  transform-origin: center bottom;
}
html[data-mobile="1"] .nav-avatar-menu:not(.hidden) { animation-name: mobileSheetRise; }
/* Khi sheet mở, thanh đáy nổi trên lớp nền mờ để vẫn đọc và bấm được. */
html[data-mobile="1"]:has(#navAvatarMenu:not(.hidden)) .mobile-tabbar { z-index: calc(var(--layer-popover) + 3); }

@keyframes mobileSheetRise {
  0% { transform: translateY(var(--ui-space-6)); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

html[data-mobile="1"] .nav-avatar-menu .nav-avatar-action {
  min-height: var(--dt-mobile-sheet-item-height);
}
/* Phím tắt không có nghĩa trên điện thoại: bỏ mục "Phím tắt" và mọi nhãn phím (<kbd>, chữ cái mờ ở mép phải menu
   ghi chú / menu chuột phải — vd. "Thêm công việc  C", "Mở ghi chú  Enter"). */
html[data-mobile="1"] .nav-avatar-menu [data-avatar-action="shortcuts"],
html[data-mobile="1"] :is(kbd, .notics-note-menu-hint, .linked-note-kbd, .nav-context-menu-kbd) { display: none; }
/* Gợi ý tổ hợp phím trong menu (Ctrl+Shift+P, F1): styles.css ép display của .nav-avatar-action-hint bằng
   !important trong @layer legacy nên không ẩn được bằng display — giấu bằng visibility (chỗ trống vốn ở mép phải).
   Gợi ý mô tả ("Tự động", "Kéo thả") của các mục sắp xếp giữ nguyên. */
html[data-mobile="1"] .nav-avatar-menu :is([data-avatar-action="privacy-blur"], [data-avatar-action="guide"]) .nav-avatar-action-hint {
  visibility: hidden;
}

/* iOS tự phóng to trang khi chạm vào ô nhập có chữ nhỏ hơn 16px (1rem); giữ chữ ô nhập tối thiểu 1rem. */
html[data-mobile="1"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
  font-size: max(1rem, 1em);
}

/* Lát I0 iOS 27 (BA 23/10/2026, docs/BAO-CAO-MOBILE-IOS27-2026-10-23.md): CHỮ đã theo thang Dynamic Type qua token
   (typography.fontSize.* trên trục Mobile). ICON thì nhiều chỗ ghi cứng width/height ngay trong mã vẽ (icon('…', 9–15))
   nên không đi theo token — nâng lên sàn mobile.icon.inlineMin. Dùng min-*: chỉ nâng icon nhỏ, không thu icon nào CSS
   đã đặt lớn hơn (thanh trên 24, thanh đáy 28…). */
html[data-mobile="1"] svg[data-icon] {
  min-width: var(--dt-mobile-icon-inline-min);
  min-height: var(--dt-mobile-icon-inline-min);
}

/* Nội dung ghi chú (NoteBook, ghi chú Dự án): cỡ 100% do richEditor.js#createZoomControl đọc --font-task TRÊN khung
   soạn — renderer ghi --font-task ở :root bằng px của token body máy tính (14). Đặt lại ngay trên khung soạn = chữ đọc
   bodyLarge (iOS Ghi chú: 17). webMobileShell.js phát 'appearance-change' khi cờ bật để khung soạn tính lại. */
html[data-mobile="1"] :is(#noticsEditor, #pnpEditor) {
  --font-task: var(--dt-typography-font-size-body-large);
}

/* ======================================================================================================
   CÔNG VIỆC (Lịch)
   ====================================================================================================== */

/* Đệm khung lịch vừa màn điện thoại (máy tính 24px), chừa đáy cho nút ＋ để thẻ cuối kéo lên được trọn vẹn. */
html[data-mobile="1"] #grid:is(.today-view, .agenda-view) {
  padding: var(--ui-space-3) var(--ui-space-3) var(--mobile-fab-clearance);
  /* Khung "Liền mạch" ép overflow: hidden lên mọi thân trang — dạng Ngày/Danh sách trên điện thoại phải cuộn dọc. */
  overflow: hidden auto;
}

/* Hàng việc / cuộc họp: KHÔNG có gì đổi theo :hover. Safari iOS coi lần chạm đầu vào phần tử mà :hover làm hiện
   thêm thứ gì (nút "…", ô tích thay số thứ tự) là "rê chuột" — phải chạm lần 2 mới bấm; còn nút hiện/ẩn lẫn lộn
   theo ngón tay. Trên điện thoại: ô tích luôn hiện (bỏ số thứ tự), nút "…" luôn hiện và có chỗ riêng. */
html[data-mobile="1"] #grid .task-item .task-prefix { opacity: 0; }
html[data-mobile="1"] #grid .task-item .task-box { opacity: 1; }
html[data-mobile="1"] #grid :is(.task-item, .gcal-event-item, .outlook-event-item) .calendar-item-more {
  opacity: 1;
  visibility: visible;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text-secondary);
}
/* Chừa lề phải cho nút "…" để nút không đè lên tiêu đề việc. */
html[data-mobile="1"] #grid :is(.task-item, .gcal-event-item, .outlook-event-item) :is(.task-text, .gcal-event-title, .outlook-event-title) {
  padding-inline-end: var(--ui-control-h-compact);
}
/* Vùng chạm của nút "…" ≥ 44px nhưng hình vẫn gọn: phần mở rộng vô hình quanh nút. */
html[data-mobile="1"] #grid .calendar-item-more::after {
  content: "";
  position: absolute;
  inset: calc((var(--dt-mobile-touch-target) - var(--ui-control-h-compact)) / -2);
}
/* "+ Thêm" ở chân cột ngày (dạng Tuần) luôn hiện — trên máy tính chỉ hiện khi rê vào cột. */
html[data-mobile="1"] #grid .day-footer .ui-btn { visibility: visible; }

/* Dạng Tuần trên điện thoại (BA 23/10/2026): mỗi ngày là MỘT màn — cột đúng bằng bề ngang khung, thẻ ngày nằm giữa
   với lề hai bên như dạng Ngày, KHÔNG ló thẻ ngày bên cạnh. Vuốt ngang mỗi lần sang đúng một ngày (snap giữa +
   snap-stop), như lật trang lịch iOS. Bảy cột 144px chen nhau như máy tính thì chữ bị cắt còn vài ký tự. */
html[data-mobile="1"] #grid[data-view-mode="week"] {
  grid-template-columns: repeat(var(--day-count, 7), 100%);
  column-gap: 0;
  padding: var(--ui-space-2) 0 var(--mobile-fab-clearance);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  overscroll-behavior-x: contain;
}
html[data-mobile="1"] #grid[data-view-mode="week"] > .day-col {
  min-width: 0;
  margin-inline: var(--ui-space-3);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Menu thao tác của việc: chữ cái phím tắt (S, D, G, H, C, X) vô nghĩa khi không có bàn phím. */
html[data-mobile="1"] .calendar-action-menu-shortcut { display: none; }

/* Thanh trên Công việc: nút chạm 44 (trục token Mobile) không đủ chỗ cho Hôm nay · ‹ · › · Tháng · Tìm · Dạng xem
   trên 390px. BA 15/10/2026 (Q3): bỏ ‹ › — chọn ngày bằng bộ chọn tháng, "Hôm nay" để quay về; vuốt đổi ngày ở T3. */
/* responsive-layout.css ép display: flex !important lên nút cụm tuần → không ẩn được bằng display: thu về 0 + visibility
   (visibility: hidden cũng loại khỏi thứ tự Tab và trình đọc màn hình). */
html[data-mobile="1"] :is(#prevBtn, #nextBtn) {
  visibility: hidden;
  width: 0;
  min-width: 0;
  max-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

/* Dạng Tháng: bảy cột vừa đúng bề ngang (bỏ cột số tuần T40…), mỗi việc một dòng chữ nhỏ sau chấm màu — không ô
   tích, không nút "…", không nút ＋ ẩn hiện theo rê chuột (ô ngày chỉ ~50px). Thao tác việc ở dạng Ngày. */
html[data-mobile="1"] #grid.multi-week {
  --cell-gap: 0px;
  grid-template-columns: 0 repeat(7, minmax(0, 1fr));
  overflow-x: hidden;
}
html[data-mobile="1"] #grid.multi-week .week-rail { visibility: hidden; overflow: hidden; }
html[data-mobile="1"] #grid.multi-week :is(.task-box, .calendar-item-more, .calendar-item-month-tags, .month-add-btn, .day-chip, .month-add-hint) {
  display: none;
}
html[data-mobile="1"] #grid.multi-week .task-item { padding-inline: var(--ui-space-0-5); }
html[data-mobile="1"] #grid.multi-week .task-text {
  padding-inline-end: 0;
  font-size: var(--fs-caption);
}
html[data-mobile="1"] #grid.multi-week .task-time-label { display: none; }

/* Dạng Danh sách: thanh tổng hợp tuần xuống dòng thay vì chồng chữ; bỏ lề trong ~70px của danh sách việc. */
html[data-mobile="1"] .agenda-week-anchor {
  flex-wrap: wrap;
  row-gap: var(--ui-space-1);
  padding: var(--ui-space-2) var(--ui-space-3);
}
html[data-mobile="1"] .agenda-week-overview { flex: 1 0 100%; min-width: 0; }
html[data-mobile="1"] .agenda-week-metrics { flex: 1 0 100%; justify-content: space-between; }
html[data-mobile="1"] #grid.agenda-view .task-list { padding-inline: var(--ui-space-1); }
html[data-mobile="1"] #grid.agenda-view .day-footer { margin-inline: 0; padding-inline: var(--ui-space-3); }
/* Ô trống của Tháng: gợi ý "Nhấp đúp để thêm" hiện theo rê chuột — trên điện thoại chạm vào ô là mở danh sách
   việc của ngày (calendarGrid.js), gợi ý chỉ làm lần chạm đầu bị nuốt. */
html[data-mobile="1"] #grid.multi-week .empty-hint { display: none; }

/* Chạm đúp không phóng to trang (iOS) — ô ngày, nút tích, nút bấm liên tiếp phản hồi ngay, không trễ chờ chạm 2. */
html[data-mobile="1"] { touch-action: manipulation; }

/* ======================================================================================================
   NÚT ← CHUNG (webMobileNav.js) — đứng đầu thanh trên, chỉ hiện khi còn màn để quay về
   ====================================================================================================== */
.mobile-back-btn { display: none; }
html[data-mobile="1"][data-mobile-back] .mobile-back-btn {
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--dt-mobile-touch-target);
  height: var(--ui-header-control-size);
  margin-inline-start: calc(-1 * var(--ui-space-2));
}

/* Đi sâu / quay ra (iOS 27): màn mới trượt vào từ phải, quay ra thì màn trước trượt vào từ trái
   (webMobileNav.js#animateNav đặt html[data-mobile-nav-anim] trong đúng một nhịp chuyển động). Chỉ transform/opacity. */
html[data-mobile="1"][data-mobile-nav-anim] :is(.notics-col-projects, .notics-col-notes, .notics-col-editor, .project-col-list, .project-col-main, .settings-sidebar, .settings-main) {
  animation: mobileNavPush var(--ui-duration-page) var(--ui-ease-enter);
}
html[data-mobile="1"][data-mobile-nav-anim="pop"] :is(.notics-col-projects, .notics-col-notes, .notics-col-editor, .project-col-list, .project-col-main, .settings-sidebar, .settings-main) {
  animation-name: mobileNavPop;
}
@keyframes mobileNavPush {
  from { transform: translateX(var(--ui-space-12)); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes mobileNavPop {
  from { transform: translateX(calc(-1 * var(--ui-space-12))); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-mobile="1"][data-mobile-nav-anim] :is(.notics-col-projects, .notics-col-notes, .notics-col-editor, .project-col-list, .project-col-main, .settings-sidebar, .settings-main) { animation: none; }
}

/* Icon nút thanh trên: trên máy tính mỗi nút lấy một token icon riêng (control 20, context…) nên trên điện thoại ra
   lẫn lộn 20/22 và trông nhỏ trong nút 44 (BA 15/10/2026). Gom về một cỡ: token icon header (Mobile 24). Mũi tên ▾
   cạnh nhãn (bộ chọn tháng, phạm vi ghi chú) không phải nút chỉ-icon nên giữ nguyên. */
html[data-mobile="1"] .topbar :is(.icon-btn, .ui-btn--icon, .topbar-search-toggle, .notics-create-btn, .notics-open-project-btn) svg {
  width: var(--ui-header-icon-size);
  height: var(--ui-header-icon-size);
}

/* Nút ẩn/hiện cột kiểu máy tính vô nghĩa khi mỗi màn chỉ một cột (đã có ← thay thế). */
html[data-mobile="1"] :is(#noticsSidebarToggle, #noticsNotesToggleBtn, #projectSidebarToggle) { display: none; }

/* ======================================================================================================
   NOTEBOOK: Cây → Danh sách → Ghi chú (html[data-mobile-notics] = tree | list; đang mở ghi chú = [data-has-note])
   ====================================================================================================== */
html[data-mobile="1"] .notics-page .notics-body { grid-template-columns: minmax(0, 1fr); }
html[data-mobile="1"]:not([data-mobile-notics="list"]) .notics-page .notics-col-notes,
html[data-mobile="1"][data-mobile-notics="list"] .notics-page .notics-col-projects { display: none; }
html[data-mobile="1"] .notics-page :is(.notics-col-projects, .notics-col-notes) {
  /* Máy tính ghim cột cây 200px (kéo được); điện thoại: cột đang hiện lấy trọn bề ngang. */
  flex: 1 1 auto;
  width: auto;
  border-radius: 0;
  background: transparent;
}
html[data-mobile="1"] .notics-page .notics-resizer { display: none; }
/* Thanh trên: chỉ một dạng xem (Danh sách) trên điện thoại; "+ Ghi chú" đã có nút ＋ nổi. */
html[data-mobile="1"] :is(#noticsViewModeBtn, #noticsNewNoteHeaderBtn, .notics-view-mode-wrap) { display: none; }
/* Chừa đáy cho nút ＋ ở cây và danh sách ghi chú. */
html[data-mobile="1"] .notics-page :is(#noticsProjectList, #noticsNoteList) { padding-bottom: var(--mobile-fab-clearance); }

/* Hàng cây: KHÔNG đổi gì theo :hover (Safari iOS: lần chạm đầu chỉ là "rê" → chạm tên dự án không mở hạng mục).
   Mũi tên mở/thu luôn hiện, đứng trước chấm màu; nút ⋯ luôn hiện; nút ＋ hạng mục đã có trong menu ⋯. */
html[data-mobile="1"] :is(.notics-tree-project, .notics-tree-section, .notics-tree-heading) {
  min-height: var(--dt-mobile-touch-target-comfortable);
}
html[data-mobile="1"] .notics-tree-project .notics-tree-caret {
  position: static;
  visibility: visible;
}
html[data-mobile="1"] .notics-tree-project .notics-project-dot { visibility: visible; margin-inline: 0; }
html[data-mobile="1"] .notics-tree-heading-caret { visibility: visible; }
html[data-mobile="1"] :is(.notics-tree-project, .notics-tree-section) .notics-item-edit-btn {
  display: inline-flex;
  width: var(--dt-mobile-touch-target);
  height: var(--dt-mobile-touch-target);
}
html[data-mobile="1"] .notics-tree-project .notics-item-addsection-btn { display: none; }
html[data-mobile="1"] .notics-tree-project .notics-project-label strong { color: var(--ui-text-primary); }

/* Đang mở ghi chú: không nút ＋ nổi (che chữ đang đọc/soạn). */
html[data-mobile="1"][data-view="notics"]:has(#noticsPage[data-has-note]) .mobile-fab { display: none; }

/* Khung đọc/soạn: tràn mép. Thanh định dạng cố định ẩn trên điện thoại — bôi đen chữ để hiện thanh định dạng nổi
   (noticsSmartUi) ngay trên đoạn chọn; thanh cố định xếp dọc 4 tầng chiếm nửa màn và đè lên tiêu đề. */
html[data-mobile="1"] #noticsEditorModal.is-docked .notespeed-modal-panel { border-radius: 0; }
html[data-mobile="1"] #noticsEditorModal :is(#noticsToolbar, #noticsEditorExpandBtn) { display: none; }
html[data-mobile="1"] #noticsEditorModal .notics-doc-header {
  flex-wrap: nowrap;
  gap: var(--ui-space-1);
  padding-inline: var(--ui-space-3);
}
html[data-mobile="1"] #noticsEditorModal .notics-doc-location { flex: 1 1 auto; min-width: 0; }

/* ======================================================================================================
   DỰ ÁN: Danh sách dự án → Chi tiết (html[data-mobile-project] = list | detail)
   ====================================================================================================== */
html[data-mobile="1"] .project-page .project-body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
html[data-mobile="1"]:not([data-mobile-project="detail"]) .project-page .project-col-main,
html[data-mobile="1"][data-mobile-project="detail"] .project-page .project-col-list { display: none; }
html[data-mobile="1"] .project-page :is(.project-col-list, .project-col-main) {
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-mobile="1"] .project-page .notics-resizer { display: none; }
/* Danh sách dự án: chưa có dự án nào đang mở thì không có tab để đổi. */
html[data-mobile="1"]:not([data-mobile-project="detail"])[data-view="project"] #projectTabCompact { display: none; }
html[data-mobile="1"] .project-list-item { min-height: var(--dt-mobile-touch-target-comfortable); }
html[data-mobile="1"] #projectList { padding-bottom: var(--mobile-fab-clearance); }
/* Nút ＋ nổi ở Dự án = tạo dự án: chỉ có nghĩa ở danh sách dự án. */
html[data-mobile="1"][data-view="project"][data-mobile-project="detail"] .mobile-fab { display: none; }
/* Kế hoạch / Báo cáo tuần: thanh định dạng ẩn trên điện thoại (BA 13/10/2026) — 3 tầng nút chiếm 1/3 màn. Vẫn gõ
   và sửa nội dung bình thường. */
html[data-mobile="1"] .project-weekly-toolbar { display: none; }
/* Lưới thẻ ghi chú kiểu Keep: máy tính ghim bề rộng cột (keepMasonry đặt width nội tuyến); flex-basis 0 cho các
   cột chia đều trọn bề ngang màn điện thoại thay vì một cột hẹp lệch trái. */
html[data-mobile="1"] .km-col { flex: 1 1 0; min-width: 0; }
html[data-mobile="1"] .km-col > * { max-width: none; align-self: stretch; }

/* ======================================================================================================
   CÀI ĐẶT kiểu Cài đặt iOS (lát I3, BA 23/10/2026 Q5): màn gốc là DANH SÁCH NHÓM bo góc (inset grouped) có tiêu đề
   lớn; chạm một mục → màn con của mục đó, ← / vuốt mép quay về danh sách (webMobileNav.js: html[data-mobile-settings]
   = root | section). Cột mục dọc của máy tính và thanh mục cuộn ngang 15/10 không còn trên điện thoại.
   ====================================================================================================== */
html[data-mobile="1"] .settings-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
html[data-mobile="1"]:not([data-mobile-settings="section"]) .settings-layout > .settings-main,
html[data-mobile="1"][data-mobile-settings="section"] .settings-layout > .settings-sidebar { display: none; }
html[data-mobile="1"] .settings-layout > .settings-sidebar {
  height: auto;
  min-height: 0;
  flex-direction: column;
  padding: 0 0 var(--ui-space-8);
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[data-mobile="1"] .settings-nav {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: auto;
  padding: 0 var(--dt-mobile-group-inset);
}
/* Tiêu đề nhóm = tiêu đề phần của iOS (Footnote 13, chữ phụ), cách nhóm trên một nhịp lớn. */
html[data-mobile="1"] .settings-nav .settings-nav-group {
  display: block;
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  margin: var(--dt-mobile-group-header-gap) 0 var(--ui-space-1-5);
  line-height: var(--lh-snug);
  padding: 0 var(--ui-space-4);
  color: var(--ui-text-secondary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-normal);
  letter-spacing: 0;
  text-transform: none;
}
html[data-mobile="1"] .settings-nav .settings-nav-divider {
  display: block;
  height: var(--dt-mobile-group-header-gap);
  margin: 0;
  border: 0;
}
/* Hàng: icon trong ô bo màu nhấn nhạt + tên 17 + › ; nền nhóm, đường kẻ thụt sau icon như iOS. */
/* Không đặt display ở đây: mục chỉ-Desktop bị webHost.css ẩn bằng display: none (cùng độ ưu tiên thấp hơn). */
html[data-mobile="1"] .settings-nav-item:not([hidden]):not(.hidden) {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  min-height: var(--dt-mobile-group-row-height);
  margin: 0;
  padding: var(--ui-space-1-5) var(--ui-space-4);
  grid-template-columns: var(--dt-mobile-touch-target-comfortable) minmax(0, 1fr) auto;
  align-items: center;
  /* Khổ compact/tight của máy tính căn giữa mục (cột icon thu gọn) — hàng iOS canh trái. */
  justify-items: stretch;
  place-content: center stretch;
  gap: 0;
  border-radius: 0;
  background: var(--ux-raised);
  color: var(--ui-text-primary);
  text-align: start;
}
html[data-mobile="1"] .settings-nav-item::after {
  content: "›";
  grid-column: 3;
  color: var(--ui-text-muted);
  font-size: var(--fs-title-lg);
  line-height: var(--lh-none);
}
html[data-mobile="1"] .settings-nav-item[data-mobile-edge~="last"]::before { display: none; }
html[data-mobile="1"] .settings-nav-item::before {
  content: "";
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: calc(var(--ui-space-4) + var(--dt-mobile-touch-target-comfortable));
  width: auto;
  height: var(--ui-stroke-thin);
  transform: none;
  border-radius: 0;
  background: var(--ux-divider);
}
/* Đầu nhóm bo góc trên, cuối nhóm bo góc dưới (webMobileNav.js#markSettingsGroups đánh dấu mục đầu/cuối đang hiện). */
html[data-mobile="1"] .settings-nav .settings-nav-item[data-mobile-edge~="first"]:not([hidden]):not(.hidden) {
  border-start-start-radius: var(--dt-mobile-group-radius);
  border-start-end-radius: var(--dt-mobile-group-radius);
}
html[data-mobile="1"] .settings-nav .settings-nav-item[data-mobile-edge~="last"]:not([hidden]):not(.hidden) {
  border-end-start-radius: var(--dt-mobile-group-radius);
  border-end-end-radius: var(--dt-mobile-group-radius);
}
html[data-mobile="1"] .settings-nav-item.active { background: var(--ux-raised); color: var(--ui-text-primary); }
html[data-mobile="1"] .settings-nav-item .settings-nav-icon {
  width: var(--ui-space-8);
  height: var(--ui-space-8);
  border-radius: var(--ui-radius-control);
  background: color-mix(in srgb, var(--ui-accent) 16%, transparent);
  color: var(--ui-accent);
}
html[data-mobile="1"] .settings-nav-item .settings-nav-icon svg { width: var(--ui-icon-control); height: var(--ui-icon-control); }
html[data-mobile="1"] .settings-nav-item .settings-nav-copy { display: flex; min-width: 0; align-items: flex-start; text-align: start; }
html[data-mobile="1"] .settings-nav-item .settings-nav-copy strong {
  overflow: hidden;
  font-size: var(--fs-body);
  font-weight: var(--fw-normal);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Dòng mô tả của mục (máy tính có chỗ) — Cài đặt iOS chỉ một dòng tên. */
html[data-mobile="1"] .settings-nav-item .settings-nav-copy small { display: none; }
/* Lối tắt tài khoản ở chân cột dọc: trên điện thoại tài khoản nằm trong Menu và mục Tài khoản của danh sách. */
html[data-mobile="1"] .settings-sidebar .settings-account-shortcut { display: none; }
/* Thanh trên: màn gốc đã có tiêu đề lớn → bỏ breadcrumb; màn con chỉ còn tên mục (← quay về danh sách). */
html[data-mobile="1"]:not([data-mobile-settings="section"]) .topbar-section-settings .notics-heading { visibility: hidden; }
html[data-mobile="1"] .topbar-section-settings :is(.notics-eyebrow, .notics-heading-separator) { display: none; }
/* Ô chọn trong màn con (Ngôn ngữ, Định dạng giờ…): trọn bề ngang hàng, không cắt chữ "Tiếng Vi…". */
html[data-mobile="1"] .settings-page :is(.token-select, .token-select-trigger, .token-date-trigger, select.form-select) {
  width: 100%;
  max-width: none;
}
/* "Đã lưu": iOS lưu tức thì, không báo. */
html[data-mobile="1"] .settings-saved { display: none; }
html[data-mobile="1"] .settings-page .settings-scroll { padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-8); }

/* Cây NoteBook + danh sách Dự án cũng là danh sách nhóm kiểu iOS (lát I3): hàng nền nhóm, lề hai bên, đầu/cuối nhóm bo
   góc (webMobileNav.js#markGroupEdges), đường kẻ mảnh giữa hai hàng; không còn nền xám tràn mép + vạch màu đánh dấu mục
   đang chọn của máy tính (iOS: mục chọn chỉ đổi màu chữ). Tiêu đề nhóm = Footnote 13 chữ phụ. */
html[data-mobile="1"] .notics-page #noticsProjectList,
html[data-mobile="1"] .project-page .project-col-list > :is(.project-portfolio-menu, #projectList) {
  padding-inline: var(--dt-mobile-group-inset);
}
html[data-mobile="1"] #noticsProjectList :is(.notics-tree-section, .notics-tree-project),
html[data-mobile="1"] .project-col-list :is(.project-portfolio-plan-btn, .project-list-item) {
  margin: 0;
  border-radius: 0;
  background: var(--ux-raised);
  box-shadow: inset 0 calc(-1 * var(--ui-stroke-thin)) 0 var(--ux-divider);
}
html[data-mobile="1"] #noticsProjectList :is(.notics-tree-section, .notics-tree-project)[data-mobile-edge~="first"],
html[data-mobile="1"] .project-col-list :is(.project-portfolio-plan-btn, .project-list-item)[data-mobile-edge~="first"] {
  border-start-start-radius: var(--dt-mobile-group-radius);
  border-start-end-radius: var(--dt-mobile-group-radius);
}
html[data-mobile="1"] #noticsProjectList :is(.notics-tree-section, .notics-tree-project)[data-mobile-edge~="last"],
html[data-mobile="1"] .project-col-list :is(.project-portfolio-plan-btn, .project-list-item)[data-mobile-edge~="last"] {
  border-end-start-radius: var(--dt-mobile-group-radius);
  border-end-end-radius: var(--dt-mobile-group-radius);
  box-shadow: none;
}
html[data-mobile="1"] #noticsProjectList :is(.notics-tree-section, .notics-tree-project)::before,
html[data-mobile="1"] .project-col-list :is(.project-portfolio-plan-btn, .project-list-item)::before { display: none; }
html[data-mobile="1"] #noticsProjectList :is(.notics-tree-section, .notics-tree-project):is(.is-active, [aria-selected="true"]),
html[data-mobile="1"] .project-col-list :is(.project-portfolio-plan-btn, .project-list-item):is(.is-active, .active, [aria-current="true"]) {
  background: var(--ux-raised);
  color: var(--ui-accent);
}
html[data-mobile="1"] #noticsProjectList .notics-tree-heading,
html[data-mobile="1"] .project-col-list .project-list-head {
  min-height: 0;
  margin: var(--dt-mobile-group-header-gap) 0 var(--ui-space-1-5);
  padding-inline: var(--ui-space-4);
  background: transparent;
  color: var(--ui-text-secondary);
  font-size: var(--fs-caption);
}
html[data-mobile="1"] .project-col-list .project-list-head { padding-inline-start: calc(var(--dt-mobile-group-inset) + var(--ui-space-4)); }
html[data-mobile="1"] #noticsProjectList > .notics-tree-heading:first-child { margin-top: var(--ui-space-2); }

/* Tiêu đề lớn đầu màn gốc (webMobileNav.js#ensureLargeTitle): Cài đặt, NoteBook, Dự án — iOS Large Title 34 đậm. */
.mobile-large-title { display: none; }
html[data-mobile="1"] .mobile-large-title {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  padding: var(--dt-mobile-large-title-padding-top) var(--ui-space-5) var(--dt-mobile-large-title-padding-bottom);
  color: var(--ui-text-primary);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight, 0);
}
/* Cài đặt → Dự án: lưới 6 cột thẳng hàng của máy tính (kéo | chấm | loại | tên | đồng bộ | thao tác) chỉ để lại
   ~2 ký tự cho tên. Điện thoại: mỗi hàng tự xếp — chấm + tên trọn dòng, nút đồng bộ/khôi phục/chuyển + thao tác
   xuống dòng dưới, canh phải. Bỏ tay kéo (không kéo-thả trên điện thoại) và huy hiệu loại. */
html[data-mobile="1"] :is(.projects-management-list, .project-settings-section) {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}
html[data-mobile="1"] .project-settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--ui-space-2);
  row-gap: var(--ui-space-1);
}
html[data-mobile="1"] .project-settings-row > :is(.project-settings-drag, .project-type-badge-slot, .project-type-badge) { display: none; }
html[data-mobile="1"] .project-settings-row > .project-settings-main { flex: 1 1 70%; min-width: 0; }
html[data-mobile="1"] .project-settings-row > :is(.project-settings-sync, .project-restore-btn, .project-promote-btn) { margin-inline-start: auto; }
/* Công tắc bật/tắt: máy tính ghép từ size.lg (ray rộng) + icon.md (ray cao) + icon.dense (núm) + quãng trượt 18px ghi
   cứng (settings.css). Trục Mobile phóng ba token đó lệch nhau → núm to bằng ray, tràn mép, trượt không tới đầu kia.
   Điện thoại dùng hình học riêng (mobile.switch.*); núm luôn căn giữa ray, quãng trượt tính từ chính các token đó. */
html[data-mobile="1"] :is(.checkbox-box, .settings-switch-input, .shortcut-switch input[type="checkbox"], .settings-option-row input[type="checkbox"]) {
  --mobile-switch-inset: calc((var(--dt-mobile-switch-track-height) - var(--ui-stroke-thin) * 2 - var(--dt-mobile-switch-thumb-size)) / 2);
  width: var(--dt-mobile-switch-track-width);
  height: var(--dt-mobile-switch-track-height);
}
html[data-mobile="1"] :is(.checkbox-box, .settings-switch-input, .shortcut-switch input[type="checkbox"], .settings-option-row input[type="checkbox"])::after {
  top: var(--mobile-switch-inset);
  left: var(--mobile-switch-inset);
  width: var(--dt-mobile-switch-thumb-size);
  height: var(--dt-mobile-switch-thumb-size);
}
html[data-mobile="1"] :is(.checkbox-box.checked, .settings-switch-input:checked, .shortcut-switch input[type="checkbox"]:checked, .settings-option-row input[type="checkbox"]:checked)::after {
  transform: translateX(calc(var(--dt-mobile-switch-track-width) - var(--ui-stroke-thin) * 2 - var(--dt-mobile-switch-thumb-size) - var(--mobile-switch-inset) * 2));
}

/* Cài đặt → Lịch nghỉ trong năm: hàng nhập 5 ô của máy tính (từ → đến | loại | ghi chú | Thêm) xếp 3 dòng. */
html[data-mobile="1"] .work-override-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--ui-space-2);
}
html[data-mobile="1"] .work-override-add > #workOverrideKind { grid-column: 1; }
html[data-mobile="1"] .work-override-add > #workOverrideName { grid-column: 2 / -1; }
html[data-mobile="1"] .work-override-add > #workOverrideAddBtn { grid-column: 1 / -1; }

/* ======================================================================================================
   POPUP / HỘP THOẠI
   ====================================================================================================== */
/* Chữ phím tắt mờ trên nút hộp thoại ("Hủy H", "Xóa X") — không có bàn phím thì chỉ gây rối. */
html[data-mobile="1"] .ui-btn-shortcut { display: none; }
/* Menu thao tác của việc (mở "Dời ngày khác" dài thêm 4 hàng) không vượt quá phần nhìn thấy: cuộn bên trong. */
html[data-mobile="1"] .calendar-action-menu {
  max-height: calc(100dvh - env(safe-area-inset-top) - var(--ui-space-4));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Lát I2 iOS 27 (BA 23/10/2026): popup cạnh nút → SHEET trượt từ đáy, trọn bề ngang, bo góc trên lớn, có tay nắm.
   Menu thao tác việc (calendarActionMenu.js bỏ định vị inline khi có cờ → .is-phone-sheet), bộ chọn tháng, bộ chọn tab
   Dự án, hộp soạn / chi tiết việc. Nền mờ phía sau: bóng trải rộng (như sheet Menu), chạm ra ngoài vẫn đóng như cũ. */
html[data-mobile="1"] {
  --mobile-sheet-max-h: calc((100dvh - env(safe-area-inset-top)) * var(--dt-mobile-sheet-max-height));
  --mobile-sheet-scrim: 0 0 0 100vmax rgba(var(--ui-scrim-rgb), .34);
}
html[data-mobile="1"] :is(.calendar-action-menu.is-phone-sheet, #projectTabCompactPanel),
html[data-mobile="1"][data-view="calendar"] #pickerPanel {
  position: fixed;
  z-index: calc(var(--layer-popover) + 2);
  top: auto;
  right: 0;
  bottom: var(--mobile-keyboard-inset, 0px);
  left: 0;
  width: auto;
  max-width: none;
  max-height: var(--mobile-sheet-max-h);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--ui-space-4) + var(--dt-mobile-sheet-grabber-height)) var(--ui-space-4) calc(env(safe-area-inset-bottom) + var(--ui-space-3));
  border: 0;
  border-top: var(--ui-stroke-thin) solid var(--mobile-glass-edge);
  border-radius: var(--dt-mobile-sheet-radius) var(--dt-mobile-sheet-radius) 0 0;
  background: var(--ux-overlay);
  box-shadow: var(--mobile-sheet-scrim);
  transform-origin: center bottom;
  animation: mobileSheetRise var(--ui-duration-standard) var(--ui-ease-enter) both;
}
/* Sheet mở thì che cả thanh tab như iOS. Bộ chọn tháng / tab Dự án nằm trong lớp xếp chồng của thanh trên nên không
   vượt được thanh tab bằng z-index — ẩn thanh tab + nút ＋ trong lúc sheet mở (chạm nền mờ vẫn đóng sheet). */
html[data-mobile="1"]:is(:has(#pickerPanel:not(.hidden)), :has(#projectTabCompactPanel:not(.hidden)), :has(.calendar-action-menu.is-phone-sheet.is-open), :has(#editOverlay:not(.hidden))) :is(.mobile-tabbar, .mobile-fab) {
  visibility: hidden;
}
/* Tay nắm (iOS 36×5) ở mép trên sheet. */
html[data-mobile="1"] :is(.calendar-action-menu.is-phone-sheet, #projectTabCompactPanel, #editPanel)::before,
html[data-mobile="1"][data-view="calendar"] #pickerPanel::before {
  content: "";
  position: absolute;
  top: var(--ui-space-2);
  left: 50%;
  width: var(--dt-mobile-sheet-grabber-width);
  height: var(--dt-mobile-sheet-grabber-height);
  transform: translateX(-50%);
  border-radius: var(--ui-radius-pill);
  background: color-mix(in srgb, var(--ui-text-secondary) 45%, transparent);
  pointer-events: none;
}
/* Menu thao tác: máy tính phóng từ góc nút "…" (scale) — sheet trượt lên từ đáy. */
html[data-mobile="1"] .calendar-action-menu.is-phone-sheet { transform: translateY(var(--ui-space-6)); animation: none; }
html[data-mobile="1"] .calendar-action-menu.is-phone-sheet.is-open { transform: none; }
html[data-mobile="1"] .calendar-action-menu.is-phone-sheet [role="menuitem"] { min-height: var(--dt-mobile-sheet-item-height); }
html[data-mobile="1"] #projectTabCompactPanel [role="menuitem"] { min-height: var(--dt-mobile-sheet-item-height); }
html[data-mobile="1"] #projectTabCompactPanel.hidden { display: none; }

/* Bộ chọn tháng: lưới trọn bề ngang, mỗi ngày là vùng chạm 44 (vòng tròn hôm nay nằm gọn trong ô, không đè ô bên). */
html[data-mobile="1"][data-view="calendar"] #pickerPanel .month-day,
html[data-mobile="1"][data-view="calendar"] #pickerPanel .month-week-number {
  min-height: var(--dt-mobile-touch-target);
  font-size: var(--fs-body);
}
html[data-mobile="1"][data-view="calendar"] #pickerPanel .month-day {
  width: var(--dt-mobile-touch-target);
  max-width: 100%;
  border-radius: var(--ui-radius-circle);
}
html[data-mobile="1"][data-view="calendar"] #pickerPanel :is(.month-picker-label, .month-today-btn) { font-size: var(--fs-title); }

/* Hộp soạn / chi tiết việc: sheet lớn (90% màn) neo đáy thay cho hộp nổi giữa màn; nút ⤢ phóng to và dòng gợi ý phím
   tắt vô nghĩa trên điện thoại; nút xác nhận trọn bề ngang ở chân sheet. */
html[data-mobile="1"] #editOverlay { align-items: flex-end; justify-content: stretch; padding: 0; }
html[data-mobile="1"] #editPanel {
  position: relative;
  width: 100%;
  max-width: none;
  height: var(--mobile-sheet-max-h);
  max-height: none;
  margin: 0 0 var(--mobile-keyboard-inset, 0px);
  padding-top: calc(var(--ui-space-2) + var(--dt-mobile-sheet-grabber-height));
  border: 0;
  border-top: var(--ui-stroke-thin) solid var(--mobile-glass-edge);
  border-radius: var(--dt-mobile-sheet-radius) var(--dt-mobile-sheet-radius) 0 0;
  transform: none;
  animation: mobileSheetRise var(--ui-duration-standard) var(--ui-ease-enter) both;
}
html[data-mobile="1"] #editPanel .item-detail-drawer { border-radius: var(--dt-mobile-sheet-radius) var(--dt-mobile-sheet-radius) 0 0; }
html[data-mobile="1"] :is(#drawerExpandBtn, #editPanel .edit-hint) { display: none; }
html[data-mobile="1"] #editPanel :is(.drawer-footer, .edit-footer) { padding-bottom: calc(env(safe-area-inset-bottom) + var(--ui-space-3)); }
html[data-mobile="1"] #editPanel .drawer-footer > .ui-btn--primary {
  flex: 1 1 auto;
  min-height: var(--dt-mobile-touch-target-comfortable);
  font-size: var(--fs-title);
}
@media (prefers-reduced-motion: reduce) {
  html[data-mobile="1"] :is(.calendar-action-menu.is-phone-sheet, #projectTabCompactPanel, #editPanel),
  html[data-mobile="1"][data-view="calendar"] #pickerPanel { animation: none; transition: none; }
}

/* Bàn phím ảo đang bật (webMobileShell.js#syncKeyboard): khung app co vào đúng phần còn nhìn thấy trên bàn phím,
   như ứng dụng điện thoại; thanh đáy và nút ＋ nhường chỗ cho vùng soạn. */
html[data-mobile="1"][data-mobile-keyboard] .app {
  inset: auto 0;
  top: var(--mobile-visual-top);
  height: var(--mobile-visual-h);
}
html[data-mobile="1"][data-mobile-keyboard] :is(.mobile-tabbar, .mobile-fab) { display: none; }

/* Người dùng bật "Giảm chuyển động": thanh đáy đổi trạng thái tức thì. */
@media (prefers-reduced-motion: reduce) {
  html[data-mobile="1"] .mobile-tabbar-item.is-active::before { animation: none; }
  html[data-mobile="1"] :is(.mobile-tabbar-item, .mobile-tabbar-icon, .mobile-tabbar-item svg[data-dual] *) { transition: none; }
}

/* ======================================================================================================
   CÔNG VIỆC kiểu Lịch / Lời nhắc iOS (lát I4, BA 23/10/2026 — webMobileCalendar.js)
   ====================================================================================================== */
/* Thanh phân đoạn Ngày · Tuần · Tháng · Danh sách (iOS segmented control ~32pt, chữ 13 đậm) thay nút dạng xem. */
.mobile-segmented { display: none; }
html[data-mobile="1"][data-view="calendar"] .mobile-segmented {
  display: flex;
  flex: 0 0 auto;
  gap: var(--ui-space-0-5);
  margin: var(--ui-space-1) var(--dt-mobile-group-inset) var(--ui-space-2);
  padding: var(--ui-space-0-5);
  border-radius: var(--ui-radius-control);
  background: color-mix(in srgb, var(--ui-text-primary) 8%, transparent);
}
html[data-mobile="1"] .mobile-segmented-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: var(--ui-space-8);
  padding: 0 var(--ui-space-1);
  border: 0;
  border-radius: calc(var(--ui-radius-control) - var(--ui-space-0-5));
  background: transparent;
  color: var(--ui-text-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--ui-duration-fast) var(--ui-ease);
}
/* Vùng chạm 44 dù đoạn chỉ cao 32 (iOS). */
html[data-mobile="1"] .mobile-segmented-item::after {
  content: "";
  position: absolute;
  inset: calc((var(--dt-mobile-touch-target) - var(--ui-space-8)) / -2) 0;
}
html[data-mobile="1"] .mobile-segmented-item[hidden] { display: none; }
html[data-mobile="1"] .mobile-segmented-item.is-active {
  background: var(--ux-raised);
  box-shadow: var(--ui-elevation-1);
}
/* Nút dạng xem chỉ-icon trên thanh trên: đã có thanh phân đoạn. */
html[data-mobile="1"] .view-mode-wrap { display: none; }

/* Vuốt hàng việc (Ngày / Danh sách): ngón tay kéo ngang hàng; nền báo trước hành động khi qua ngưỡng. Hàng nhường cử chỉ
   dọc cho trình duyệt (cuộn), cử chỉ ngang cho JS. Dạng Tuần giữ cuộn ngang để lật ngày. */
html[data-mobile="1"] #grid:is(.today-view, .agenda-view) .task-item { touch-action: pan-y; }
html[data-mobile="1"] #grid .task-item[data-mobile-swipe] { position: relative; z-index: 1; transition: none; }
html[data-mobile="1"] #grid .task-item[data-mobile-swipe="complete"] { background: color-mix(in srgb, var(--ui-success) 22%, transparent); }
html[data-mobile="1"] #grid .task-item[data-mobile-swipe="more"] { background: color-mix(in srgb, var(--ui-accent) 18%, transparent); }
html[data-mobile="1"] #grid .task-item:not([data-mobile-swipe]) { transition: transform var(--ui-duration-fast) var(--ui-ease); }

/* Dạng Tháng kiểu Lịch iOS: ô ngày chỉ có SỐ + CHẤM màu (không chữ bị cắt "T…"); chạm ngày mở sheet danh sách việc
   của ngày đó (calendarGrid.js#openMonthDayPreview → sheet). Nút T7/CN nổi đè tiêu đề cột Thứ 7: đã có trong Cài đặt. */
html[data-mobile="1"] #grid.multi-week .task-text { font-size: 0; line-height: 0; padding: 0; }
html[data-mobile="1"] #grid.multi-week .task-item {
  display: inline-flex;
  min-height: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}
html[data-mobile="1"] #grid.multi-week .task-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-0-5);
  padding-inline: var(--ui-space-1);
}
html[data-mobile="1"] #grid .weekend-toggle { display: none; }
/* "+ 1 việc" cạnh số ngày (ô ~50px) bị cắt còn "+1 v…": chấm đã báo có việc, chạm ngày mở trọn danh sách. */
html[data-mobile="1"] #grid.multi-week .multi-week-more-items { display: none; }

/* ======================================================================================================
   NOTEBOOK + DỰ ÁN kiểu Ghi chú iOS (lát I5, BA 23/10/2026 — webMobileMore.js)
   ====================================================================================================== */
/* Thanh trên chỉ giữ thao tác chính; thao tác phụ vào ⋯ (webMobileMore.js bấm hộ đúng nút gốc). */
html[data-mobile="1"] :is(#noticsOpenProjectBtn, #noticsLockBtn) { display: none; }
html[data-mobile="1"] .project-col-main .project-overview-actions { display: none; }
.mobile-more-btn { display: none; }
html[data-mobile="1"] .mobile-more-btn:not([hidden]) {
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--dt-mobile-touch-target);
  height: var(--ui-header-control-size);
}
html[data-mobile="1"] .mobile-more-btn svg { width: var(--ui-header-icon-size); height: var(--ui-header-icon-size); }

/* Sheet ⋯: nổi ở đáy như sheet thao tác iOS, mục 48 có icon. */
.mobile-action-sheet[hidden] { display: none; }
html[data-mobile="1"] .mobile-action-sheet:not([hidden]) {
  position: fixed;
  z-index: calc(var(--layer-popover) + 2);
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  max-height: var(--mobile-sheet-max-h);
  overflow-y: auto;
  padding: calc(var(--ui-space-4) + var(--dt-mobile-sheet-grabber-height)) var(--ui-space-3) calc(env(safe-area-inset-bottom) + var(--ui-space-3));
  border-top: var(--ui-stroke-thin) solid var(--mobile-glass-edge);
  border-radius: var(--dt-mobile-sheet-radius) var(--dt-mobile-sheet-radius) 0 0;
  background: var(--ux-overlay);
  box-shadow: var(--mobile-sheet-scrim);
  animation: mobileSheetRise var(--ui-duration-standard) var(--ui-ease-enter) both;
}
html[data-mobile="1"] .mobile-action-sheet::before {
  content: "";
  position: absolute;
  top: var(--ui-space-2);
  left: 50%;
  width: var(--dt-mobile-sheet-grabber-width);
  height: var(--dt-mobile-sheet-grabber-height);
  transform: translateX(-50%);
  border-radius: var(--ui-radius-pill);
  background: color-mix(in srgb, var(--ui-text-secondary) 45%, transparent);
}
html[data-mobile="1"] .mobile-action-sheet-item {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  min-height: var(--dt-mobile-sheet-item-height);
  padding: 0 var(--ui-space-3);
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-primary);
  font-size: var(--fs-body);
  text-align: start;
}
html[data-mobile="1"] .mobile-action-sheet-item:active { background: var(--ux-hover); }
html[data-mobile="1"] .mobile-action-sheet-item.is-danger { color: var(--ui-danger); }
html[data-mobile="1"] .mobile-action-sheet-item svg { flex: 0 0 auto; color: currentColor; }
html[data-mobile="1"]:has(#mobileMoreSheet:not([hidden])) :is(.mobile-tabbar, .mobile-fab) { visibility: hidden; }

/* Danh sách ghi chú: dòng phụ (giờ + xem trước) = iOS Subheadline 15 thay chú thích 13. */
html[data-mobile="1"] .notics-page :is(.note-row-snippet, .note-row-time) { font-size: var(--fs-body-sm); }
/* Tiêu đề ghi chú đang mở = iOS Title 1 (28 đậm), ô chạm ≥ 44. */
html[data-mobile="1"] #noticsNoteTitle {
  min-height: var(--dt-mobile-touch-target);
  font-size: var(--fs-headline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* Dự án: ô tìm việc / ghi chú cao 44 (máy tính 25), chữ 17; nút ‹ › đổi tuần ≥ 44; bỏ ⤢ mở rộng thẻ tuần. */
html[data-mobile="1"] .project-col-main .project-notes-search { min-height: var(--dt-mobile-touch-target); }
html[data-mobile="1"] .project-col-main .project-notes-search-input { min-height: var(--dt-mobile-touch-target); font-size: var(--fs-body); }
html[data-mobile="1"] :is(#projectPlanPrevBtn, #projectPlanNextBtn, #projectReportPrevBtn, #projectReportNextBtn) {
  min-width: var(--dt-mobile-touch-target);
  min-height: var(--dt-mobile-touch-target);
}
html[data-mobile="1"] .project-weekly-expand-btn { display: none; }