/* 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);
  --mobile-fab-size: var(--dt-mobile-fab-size);
  /* Khoảng chừa ở đáy vùng cuộn để mục cuối không nằm dưới nút ＋ nổi. */
  --mobile-fab-clearance: calc(var(--mobile-fab-size) + var(--ui-space-4) * 2);
  /* 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 đáy: Công việc · NoteBook · Dự án · Menu — chỉ icon (tên ở aria-label), mục đang chọn có vạch màu nhấn ở
   mép trên, kiểu app ngân hàng (BA 15/10/2026). --- */
.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;
  min-height: var(--mobile-tabbar-h);
  padding: 0 var(--ui-space-1) env(safe-area-inset-bottom);
  border-top: var(--ui-stroke-thin) solid var(--stroke);
  background: var(--ux-header);
}

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;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text-secondary);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: color var(--ui-duration-fast) var(--ui-ease);
}

html[data-mobile="1"] .mobile-tabbar-icon {
  display: inline-flex;
  width: var(--dt-mobile-tabbar-icon-size);
  height: var(--dt-mobile-tabbar-icon-size);
  transition: transform var(--ui-duration-fast) var(--ui-ease);
}
/* 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-icon { position: relative; }
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); }

html[data-mobile="1"] .mobile-tabbar-item.is-active { color: var(--ui-accent); }
/* Vạch đang chọn: phủ lên đường viền trên của thanh đáy, căn giữa mục. */
html[data-mobile="1"] .mobile-tabbar-item.is-active::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--ui-stroke-thin));
  left: 50%;
  width: var(--dt-mobile-tabbar-indicator-width);
  height: var(--dt-mobile-tabbar-indicator-height);
  transform: translateX(-50%);
  border-radius: 0 0 var(--ui-radius-pill) var(--ui-radius-pill);
  background: var(--ui-accent);
  animation: mobileTabIndicator var(--ui-duration-standard) var(--ui-ease);
}
/* Vạch mọc ra từ giữa thay vì bật cứng (chỉ transform). */
@keyframes mobileTabIndicator {
  from { transform: translateX(-50%) scaleX(0); }
  to { transform: translateX(-50%) scaleX(1); }
}
/* 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ổi: 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(--ui-space-4) + env(safe-area-inset-right));
  bottom: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom) + var(--ui-space-4));
  width: var(--mobile-fab-size);
  height: var(--mobile-fab-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--dt-dimension-radius-xl);
  background: var(--ui-accent);
  color: var(--ui-text-on-accent);
  box-shadow: var(--ui-elevation-3);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
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);
}

/* --- Menu: menu tài khoản có sẵn (#navAvatarMenu) trình bày thành sheet trượt lên, đứng ngay trên thanh đáy
   (thanh đáy 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: 0;
  bottom: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom));
  left: 0;
  width: auto;
  max-height: calc(100dvh - env(safe-area-inset-top) - var(--mobile-tabbar-h) - env(safe-area-inset-bottom) - var(--ui-space-6));
  padding: var(--ui-space-2);
  border-radius: var(--dt-dimension-radius-xl) var(--dt-dimension-radius-xl) 0 0;
  /* 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);
}

/* ======================================================================================================
   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: mỗi cột ngày gần trọn bề ngang (ló mép cột sau để biết còn vuốt được), vuốt ngang
   dừng đúng đầu từng ngày. 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), calc(100% - var(--ui-space-8)));
  padding: var(--ui-space-2) var(--ui-space-3) var(--mobile-fab-clearance);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--ui-space-3);
}
html[data-mobile="1"] #grid[data-view-mode="week"] .day-col { scroll-snap-align: start; }

/* 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));
}

/* 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: cột mục dọc 48px (nhãn nhóm bị cắt chữ) → thanh mục cuộn ngang ở đầu, nội dung trọn bề ngang
   ====================================================================================================== */
html[data-mobile="1"] .settings-layout {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
}
html[data-mobile="1"] .settings-layout > .settings-sidebar {
  height: auto;
  flex-direction: row;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-right: 0;
  border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
html[data-mobile="1"] .settings-sidebar::-webkit-scrollbar { display: none; }
html[data-mobile="1"] .settings-nav {
  flex-direction: row;
  align-items: center;
  gap: var(--ui-space-1);
  height: auto;
}
html[data-mobile="1"] .settings-nav :is(.settings-nav-group, .settings-nav-divider) { display: none; }
/* Mục = viên thuốc icon + tên; ẩn mục nào thì vẫn ẩn (display: none của app thắng vì nằm trên .hidden). */
html[data-mobile="1"] .settings-nav-item:not([hidden]):not(.hidden) {
  flex: 0 0 auto;
  width: auto;
  min-height: var(--dt-mobile-touch-target);
  margin: 0;
  padding: 0 var(--ui-space-3);
  grid-template-columns: var(--ui-icon-control) auto;
  gap: var(--ui-space-1-5);
  border-radius: var(--ui-radius-full);
}
html[data-mobile="1"] .settings-nav-item .settings-nav-copy { display: flex; }
html[data-mobile="1"] .settings-nav-item.active::before { 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 thanh này. */
html[data-mobile="1"] .settings-sidebar .settings-account-shortcut { display: none; }
html[data-mobile="1"] .settings-page .settings-scroll { padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-8); }
/* 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;
}

/* 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; }
}