@layer legacy {

/* Chỗ giữ chỗ cho module chưa dựng xong — cố ý rất nhạt để không ai nhầm nó
   là một trạng thái rỗng hợp lệ của tính năng đã hoàn thiện. */



/* ==========================================================================
   ANTIPAINT / ANTISCREENSHOT — chi tiết riêng của 2 module gallery+editor.
   Layout khung (.notics-body, .notics-col, .notics-editor-wrap, .notics-toolbar...)
   dùng lại nguyên của Notics ở trên — mỗi module chỉ cần thêm phần khác biệt:
   cột danh sách hẹp hơn (không có cây dự án bên cạnh) và dropdown chọn dự án
   thay cho cây thư mục.
   ========================================================================== */
/* .notics-body là CSS Grid 3 cột cố định cho khuôn Notics (cây dự án / danh
   sách / editor) — AntiPaint/AntiScreenshot chỉ có 2 cột (danh sách / editor),
   nên PHẢI tự đặt lại grid-template-columns ở đây. Không override thì trình
   duyệt vẫn dùng template 3 cột của Notics: 2 phần tử grid item tự động rơi
   vào 2 cột ĐẦU (220px + 260px), cột thứ 3 (1fr, lẽ ra là chỗ của editor) bị
   bỏ trống — editor bị bó hẹp trong cột "danh sách ghi chú" 260px thay vì
   chiếm phần còn lại của trang. `width`/`flex` trên cột danh sách bên dưới
   không có tác dụng gì trong ngữ cảnh grid (chỉ đúng nếu cha là flex), giữ
   lại chỉ để tài liệu — kích thước cột thật do grid-template-columns ở đây
   quyết định. */
/* Track ĐẦU là `auto` chứ không phải một độ dài cụ thể: bề rộng thật nằm ở
   `width` của chính cột danh sách bên dưới. Lý do — transition trên
   grid-template-columns không nội suy được giữa clamp(...) và 44px, nên thu
   gọn/mở ra bị nhảy khựng; animate `width` của phần tử thì mượt. */
.antiscreenshot-page .notics-body { grid-template-columns: auto minmax(0, 1fr); }

/* Thu gọn cột danh sách — đồng bộ với Notics và Project: ẩn hoàn toàn khi thu gọn */
.antiscreenshot-page.is-list-collapsed .notics-body { grid-template-columns: 1fr; }

/* Bề rộng + hiệu ứng trượt ngang của cột danh sách */
/* Đang kéo resizer thì tắt transition, không cột sẽ "đuổi theo" chuột.
   paneResizer.js tự gắn .is-pane-resizing lên .notics-body. */

/* ==========================================================================
   QUICKNOTE — màn hình chính dạng lưới thẻ (Google Keep) + popup soạn thảo.
   Trước đây "Tất cả ghi chú" là một modal nhỏ mở từ topbar còn editor chiếm
   cứng nửa phải. Nay đảo lại: lưới thẻ LÀ màn hình chính (.notespeed-gallery-col),
   editor nổi lên thành popup ~80% màn hình (#noteSpeedEditorModal).
   JS: src/renderer/src/components/noteSpeed.js
   ========================================================================== */

/* Nền do .ux-canvas lo (ui-foundation.css). Nền cũ rgb(--sf-card) là TRẮNG —
   trùng đúng màu của .notespeed-all-card nằm bên trong, nên thẻ ghi chú và thẻ
   bản vẽ chỉ còn nhìn thấy được nhờ đường viền 1px. Đây là lỗi "thẻ chìm vào
   nền" ở QuickNote và Painting. Lưới thẻ là NỀN chứa thẻ nên nó là L2 base,
   thẻ mới là L3 raised. */
.notespeed-gallery-col {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Tiêu đề nhỏ phía trên lưới — cho biết đang xem nhãn lọc nào (cột trái) và
   bao nhiêu ghi chú. Ô tìm kiếm không còn ở đây nữa: dùng chung
   #keywordSearchInput trên topbar, như Notics/Calendar/AntiPaint. */

/* Thanh trên lưới: nhãn lọc bên trái + nút đổi dạng xem (thẻ / chi tiết) bên
   phải. Khi có thanh này, padding dồn về thanh để nhãn và toggle cùng hàng. */
.notespeed-view-toggle {
  flex: 0 0 auto;
}
.notespeed-view-toggle .notics-tab svg { display: block; }
/* Notebook (Notics): toggle nằm cuối .notics-col-head, canh phải. */
.notics-notes-viewtoggle { margin-left: auto; }

/* Thanh ghi nhanh một chạm — tạo ghi chú không cần mở popup soạn thảo.
   Canh mép trong bằng lưới thẻ (padding ngang 22px). */
.notespeed-quick-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* Chừa 25% mỗi bên (ô chiếm nửa giữa, kiểu Google Keep); cửa sổ hẹp thì
     không co dưới 12 ô điều khiển và không vượt lề lưới thẻ 22px mỗi bên. */
  width: clamp(min(var(--dt-component-search-quick-note-composer-min-width), calc(100% - var(--ui-size-touch))), 50%, calc(100% - var(--ui-size-touch)));
  max-width: none;
  margin: var(--ui-space-3) auto;
  padding: var(--ui-space-1) var(--ui-space-3);
  height: var(--ui-size-md);
  box-sizing: border-box;
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-control);
  background: rgba(var(--ui-surface-raised-rgb), 0.96);
  box-shadow: var(--elev-1);
}
.notespeed-quick-bar:focus-within {
  border-color: var(--ui-accent);
  box-shadow: var(--ui-control-ring);
}
.notespeed-quick-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text-primary);
  font-family: inherit;
  font-size: var(--fs-body);
  padding: 0;
  outline: none;
}
.notespeed-quick-input:focus,
.notespeed-quick-input:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
}
.notespeed-quick-input::placeholder { color: color-mix(in srgb, var(--ui-text-secondary) 75%, transparent); }

/* Khung cuộn của lưới. Masonry nằm ở .notespeed-all-masonry (mỗi khối ĐÃ GHIM /
   KHÁC một cụm cột riêng) — nếu để column-* ngay trên khung cuộn thì tiêu đề
   khối cũng bị chia cột theo. */
.notespeed-all-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ui-space-4) var(--ui-space-6) var(--ui-space-6);
}
/* Khi có thanh ghi nhanh đang mở (QuickNote): padding-top của khung cuộn bằng 0
   để khoảng cách trên/dưới ô ghi nhanh đều nhau (var(--ui-space-3) = 12px). */
.notespeed-quick-bar:not(.hidden) + .notespeed-all-grid {
  padding-top: 0;
}
.notespeed-all-section + .notespeed-all-section { margin-top: var(--ui-space-3-5); }
.notespeed-all-section-title {
  padding: var(--ui-space-1) var(--ui-space-0-5) var(--ui-space-2);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--ui-text-secondary);
}

/* ==========================================================================
   QUICKNOTE — dạng xem chi tiết (bảng). Bảng nằm phẳng trên nền .ux-canvas
   (L2), khung bảng là L3 raised, hàng hover dùng --ux-hover. Không màu cứng.
   JS: renderAllList() trong noteSpeed.js.
   ========================================================================== */
.notespeed-all-grid.is-list-view {
  padding: var(--ui-space-4) var(--ui-space-6) var(--ui-space-6);
  overflow-x: auto;               /* lưới an toàn cuối khi cột bị bóp quá hẹp */
}
.notespeed-table-wrap {
  border: var(--ui-stroke-thin) solid var(--ux-divider);
  border-radius: var(--ui-radius-panel);
  overflow: hidden;               /* bo góc ăn vào bảng */
  background: var(--ux-raised);
}
.notespeed-table {
  --note-table-pin-width: 4%;
  --note-table-title-width: 20%;
  --note-table-preview-width: 24%;
  --note-table-project-width: 12%;
  --note-table-section-width: 13%;
  --note-table-updated-width: 17%;
  --note-table-created-width: 10%;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.notespeed-table thead th {
  background: var(--ux-sunken);
  padding: var(--ui-space-1) var(--ui-space-3);
  height: var(--dt-dimension-row-list-dense);
  font-size: var(--fs-caption);
  font-weight: var(--fw-overline);
  color: var(--ui-text-muted);
  border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notespeed-th > span { vertical-align: middle; }
.notespeed-th > svg { vertical-align: middle; margin-left: var(--ui-space-1); }
.notespeed-th.is-sortable { cursor: pointer; }
.notespeed-th.is-sortable:hover { color: var(--ui-text-primary); }
.notespeed-th.is-sorted { color: var(--ui-accent); }
.notespeed-th:focus-visible { outline: var(--ui-stroke-thick) solid var(--ui-accent); outline-offset: calc(-1 * var(--ui-stroke-thick)); }

.notespeed-row { cursor: pointer; }
.notespeed-row + .notespeed-row .notespeed-row-cell { border-top: var(--ui-stroke-thin) solid var(--ux-divider); }
.notespeed-row:hover { background: var(--ux-hover); }
.notespeed-row:focus-visible { outline: var(--ui-stroke-thick) solid var(--ui-accent); outline-offset: calc(-1 * var(--ui-stroke-thick)); }
.notespeed-row-cell {
  padding: var(--ui-space-1) var(--ui-space-3);
  height: var(--ui-list-row-min);
  font-size: var(--fs-body);
  line-height: var(--lh-body-sm);
  color: var(--ui-text-primary);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Một contract tỷ lệ dùng chung cho Notebook, QuickNote và Project → Ghi chú.
   Bảy cột cộng đúng 100% (2026-09-13: tách "Dự án / Hạng mục" ghép trước đây
   thành 2 cột riêng); khi responsive ẩn cột phụ, fixed table tự phân phối
   phần còn lại theo tỷ lệ và tiếp tục ưu tiên hai vùng đọc Tiêu đề + Nội dung. */
.notespeed-table thead th,
.notespeed-row-cell {
  box-sizing: border-box;
  text-align: left;
}
.notespeed-row-cell.col-pin,
.notespeed-th.col-pin { width: var(--note-table-pin-width); text-align: center; padding-inline: var(--ui-space-1-5); }
.notespeed-row-cell.col-title,
.notespeed-th.col-title { width: var(--note-table-title-width); }
.notespeed-row-cell.col-created,
.notespeed-th.col-created { width: var(--note-table-created-width); }
.notespeed-row-cell.col-preview,
.notespeed-th.col-preview { width: var(--note-table-preview-width); }
.notespeed-row-cell.col-project,
.notespeed-th.col-project { width: var(--note-table-project-width); }
.notespeed-row-cell.col-section,
.notespeed-th.col-section { width: var(--note-table-section-width); }
.notespeed-row-cell.col-updated,
.notespeed-th.col-updated { width: var(--note-table-updated-width); }
.notespeed-row-cell.col-created,
.notespeed-row-cell.col-updated { color: var(--ui-text-muted); font-size: var(--fs-caption); }
.notespeed-row-cell.col-preview { color: var(--ui-text-secondary); }
.notespeed-row-title { font-weight: var(--fw-medium); }
.notespeed-row-lock { margin-left: var(--ui-space-1-5); color: var(--ui-text-muted); }
.notespeed-row-lock svg { vertical-align: middle; }
.notespeed-col-project-label { vertical-align: middle; }
/* Biến thể nút của ô "Dự án / Hạng mục" trong dạng bảng — bấm mở bảng chọn
   dự án/hạng mục ngay tại chỗ, không cần mở ghi chú trước (2026-09-13). */
button.notespeed-col-project-btn {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: var(--ui-icon-md);
  padding: 0 var(--ui-space-2);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-secondary);
  font-size: var(--fs-caption);
  line-height: 1;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
button.notespeed-col-project-btn:hover,
button.notespeed-col-project-btn:focus-visible {
  border-style: solid;
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  background: var(--ux-hover);
  outline: none;
}
.notespeed-row-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-size-sm);
  height: var(--ui-size-sm);
  padding: 0;
  border: var(--ui-stroke-thin) solid transparent;
  border-radius: var(--ui-radius-circle);
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  transition: color var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease), background var(--ui-duration-fast) var(--ui-ease);
}
.notespeed-row-pin:hover { border-color: var(--ux-border-hover); color: var(--ui-text-primary); }
.notespeed-row-pin.is-pinned { color: var(--ui-accent); }

.notespeed-row.is-selected {
  background: color-mix(in srgb, var(--ui-accent) 12%, var(--ux-raised));
}
.notespeed-row.is-selected:hover {
  background: color-mix(in srgb, var(--ui-accent) 18%, var(--ux-raised));
}

.notespeed-row-cell.col-select,
.notespeed-th.col-select {
  width: var(--ui-size-lg);
  min-width: var(--ui-size-lg);
  max-width: var(--ui-size-lg);
  text-align: center;
  vertical-align: middle;
  padding: var(--ui-space-2) 0;
  box-sizing: border-box;
}

.notespeed-table-select-btn,
.notespeed-table-select-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-size-sm);
  height: var(--ui-size-sm);
  padding: 0;
  margin: 0 auto;
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-circle);
  background: var(--ux-raised);
  color: var(--ui-text-muted);
  cursor: pointer;
  vertical-align: middle;
  box-sizing: border-box;
  transition: color var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease), background var(--ui-duration-fast) var(--ui-ease);
}

.notespeed-table-select-btn:hover,
.notespeed-table-select-all-btn:hover {
  border-color: var(--ux-border-hover);
  color: var(--ui-text-primary);
}

.notespeed-table-select-btn.is-selected,
.notespeed-table-select-all-btn.is-selected {
  background: var(--ui-accent-solid);
  border-color: var(--ui-accent);
  color: var(--ui-text-on-accent);
}

.notespeed-table-select-btn svg,
.notespeed-table-select-all-btn svg {
  display: block;
  flex-shrink: 0;}

/* Lưới thẻ kiểu Google Keep (QuickNote / Ghi chú Notics / AntiPaint).
   JS (src/renderer/src/utils/keepMasonry.js) chia thẻ vào các cột `.km-col`:
   tối đa 5 cột, cụm cột luôn căn giữa khung — 1 thẻ ra chính giữa, 2–3 thẻ
   thành cụm cân đối. Mỗi thẻ cao thấp theo nội dung (không bị kéo bằng hàng).
   `flex-wrap` chỉ để trạng thái trước khi JS chạy không vỡ. */
.notespeed-all-masonry {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--ui-space-3);
}
.notespeed-all-masonry .km-col {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  flex: 0 0 auto;
  min-width: 0;
}
.notespeed-all-masonry > .notespeed-all-card { flex: 0 1 var(--ui-note-card-w, var(--dt-dimension-layout-256)); }

.notespeed-all-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1-5);
  width: 100%;
  margin: 0;
  padding: var(--ui-space-3) var(--ui-space-3);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-panel);
  /* L3 raised — cách nền lưới (.ux-canvas, L2) đúng một bậc. */
  background: var(--ux-raised);
  cursor: pointer;
  text-align: left;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease), transform var(--ui-duration-fast) var(--ui-ease);
}

.notespeed-all-card:hover {
  border-color: var(--ux-border-hover);
  box-shadow: var(--ui-elevation-2);
}
.notespeed-all-card:focus-visible { outline: var(--ui-stroke-thick) solid var(--ui-accent); outline-offset: var(--ui-stroke-thick); }

/* Nút ghim nổi góc trên-phải, hiện khi hover thẻ (hoặc luôn hiện nếu đã ghim)
   — cùng khuôn .project-note-card-pin-toggle của tab Ghi chú Project. Nền
   đặc (rgb(--sf-card)) + viền thay vì nền mờ theo --ink: thẻ ở đây có thể tô
   màu bất kỳ (kể cả đen), nền mờ hover từng khiến icon biến mất trên thẻ tối. */
.notespeed-all-card-pin-toggle {
  position: absolute; top: var(--ui-space-1-5); right: var(--ui-space-1-5); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--ui-size-sm); height: var(--ui-size-sm); padding: 0;
  border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-circle);
  /* Nút ghim nổi trên thẻ: phải ĐỤC. Thẻ có thể mang màu người dùng chọn (kể
     cả đen), nền mờ theo vật liệu sẽ ăn màu thẻ và icon biến mất. */
  background: rgb(var(--ux-raised-rgb));
  color: var(--ui-text-muted); cursor: pointer;
  box-shadow: var(--ui-elevation-1);
  opacity: 0; transition: opacity var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease);
}
.notespeed-all-card:hover .notespeed-all-card-pin-toggle,
.notespeed-all-card:focus-within .notespeed-all-card-pin-toggle,
.notespeed-all-card-pin-toggle.is-pinned { opacity: 1; }
.notespeed-all-card-pin-toggle:hover { border-color: var(--ux-border-hover); color: var(--ui-text-primary); }
.notespeed-all-card-pin-toggle.is-pinned { color: var(--ui-accent); border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--stroke)); }

.notespeed-all-card-head { display: flex; align-items: flex-start; gap: var(--ui-space-1-5); padding-right: var(--ui-space-6); }
.notespeed-all-card-title {
  flex: 1; min-width: 0;
  /* Tiêu đề thẻ = vai body (14) + semibold — trước ở --fs-title (16) đọc quá to
     trong ô lưới ~230px, lệch hẳn khỏi thang chữ của phần còn lại. */
  font-size: var(--fs-body);
  font-weight: var(--fw-title);
  line-height: var(--lh-title);
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notespeed-all-card-lock {
  flex: 0 0 auto; display: inline-flex; color: var(--ui-text-muted); margin-top: var(--ui-space-px);
}

.notespeed-all-card-snippet {
  /* Đoạn xem trước = vai body-sm (13), tụt một bậc dưới tiêu đề thẻ. */
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body-sm);
  color: var(--ui-text-secondary);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.notespeed-all-card-meta {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  font-size: var(--fs-caption);
  line-height: var(--lh-tight, 1.25);
  color: var(--ui-text-muted);
  margin-top: 0;
  margin-left: auto;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}


.notespeed-all-card-meta .notespeed-col-project-label {
  vertical-align: middle;
  line-height: inherit;
}

/* Checkbox tròn chọn nhiều thẻ ở góc trên-trái — đặt nổi trên viền (Google Keep style) */
.notespeed-card-select-btn {
  position: absolute;
  top: calc(-1 * var(--ui-space-1-5));
  left: calc(-1 * var(--ui-space-1-5));
  z-index: var(--ui-layer-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-size-sm);
  height: var(--ui-size-sm);
  padding: 0;
  border: var(--ui-stroke-thick) solid var(--ux-border, var(--stroke));
  border-radius: var(--ui-radius-circle);
  background: var(--ux-overlay);
  color: var(--ui-text-primary);
  cursor: pointer;
  box-shadow: var(--ui-elevation-1);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease), background-color var(--ui-duration-fast) var(--ui-ease), transform var(--ui-duration-fast) var(--ui-ease);
}

:is(.notespeed-all-card, .project-note-card):hover .notespeed-card-select-btn,
:is(.notespeed-all-card, .project-note-card).is-selected .notespeed-card-select-btn,
body.has-note-selection .notespeed-card-select-btn {
  opacity: 1;
  transform: var(--ui-interaction-stable-transform);
}

.notespeed-card-select-btn:hover {
  border-color: var(--ux-border-hover);
  color: var(--ui-text-primary);
}

article:is(.notespeed-all-card, .project-note-card).is-selected .notespeed-card-select-btn,
.notespeed-card-select-btn.is-selected {
  background: var(--ui-accent-solid);
  border-color: var(--ui-accent);
  color: var(--ui-text-on-accent);
  opacity: 1;
}

article:is(.notespeed-all-card, .project-note-card).is-selected {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 var(--ui-focus-ring-width) color-mix(in srgb, var(--ui-accent) 45%, transparent);
}

/* Footer chân thẻ: MỘT dòng — nút thao tác bên trái (hover mới hiện), tag/ngày
   bên phải (Google Keep). BA 29/09/2026: 2 dòng cũ để trống ~20px mỗi thẻ.
   Hàng thao tác vẫn giữ chỗ cố định nên hover không giật chiều cao. */
.notespeed-card-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--ui-space-2);
  margin-top: auto;
  position: relative;
  overflow: visible;
  width: 100%;
}

/* Hàng nút thao tác (đổi nền, xóa) nằm ở dòng riêng dưới cùng (Google Keep style),
   cố định chiều cao và chỉ hiện khi hover thẻ */
.notespeed-card-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  height: var(--ui-size-dense);
  min-height: var(--ui-size-dense);
  flex: 0 0 auto;
  order: -1;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--ui-duration-fast) var(--ui-ease), visibility var(--ui-duration-fast) var(--ui-ease);
  border-radius: var(--ui-radius-control);
}

:is(.notespeed-all-card, .project-note-card):hover .notespeed-card-actions,
:is(.notespeed-all-card, .project-note-card):focus-within .notespeed-card-actions,
.notespeed-card-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}


:is(.notespeed-all-card, .project-note-card)[data-bg="black"] :is(.notespeed-all-card-lock, .project-note-card-lock) {
  color: var(--ui-note-on-dark-muted);
}

/* Floating Batch Action Bar — canh giữa tuyệt đối trong cột gallery nội dung (cùng trục với ô tìm kiếm / quick add) */
.notespeed-batch-bar {
  position: absolute;
  bottom: var(--ui-space-6);
  left: 50%;
  transform: translateX(-50%) translateY(24px);
  z-index: var(--ui-layer-modal);
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-1-5) var(--ui-space-3-5);
  max-width: calc(100% - var(--ui-space-8));
  background: var(--ux-overlay);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-full);
  box-shadow: var(--ui-elevation-2); /* --shadow-modal/--ui-shadow chưa từng tồn tại → trước đây không có bóng */
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--ui-duration-standard) var(--ui-ease), transform var(--ui-duration-standard) var(--ui-ease), visibility var(--ui-duration-standard);
  white-space: nowrap;
}

.notespeed-batch-bar.is-visible {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.notespeed-batch-count {
  font-size: var(--fs-body);
  font-weight: var(--dt-typography-weight-semibold);
  color: var(--ui-text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  padding-right: var(--ui-space-2-5);
  border-right: var(--ui-stroke-thin) solid var(--stroke);
}

.notespeed-batch-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1-5);
}

.notespeed-batch-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  padding: var(--ui-space-1) var(--ui-space-3);
  font-size: var(--fs-body);
  border-radius: var(--ui-radius-full);
  border: var(--ui-stroke-thin) solid var(--stroke);
  background: var(--ux-raised);
  color: var(--ui-text-primary);
  cursor: pointer;
  transition: background var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease);
}

.notespeed-batch-btn:hover {
  background: var(--ux-hover);
  border-color: var(--ux-border-hover);
}

.notespeed-batch-btn.is-danger:hover {
  border-color: var(--ui-danger);
  color: var(--ui-danger);
}

.notespeed-batch-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-size-dense);
  height: var(--ui-size-dense);
  border-radius: var(--ui-radius-circle);
  border: var(--ui-stroke-thin) solid transparent;
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  margin-left: var(--ui-space-0-5);
}

.notespeed-batch-close-btn:hover {
  background: var(--ux-hover);
  color: var(--ui-text-primary);
}


/* === Google Keep: chốt cỡ thẻ ghi chú trong lưới ==========================
   Áp cho QuickNote + Notebook (.notespeed-all-card) và tab Ghi chú Project
   (.project-note-card). Keep giữ mỗi thẻ trong một khung ~240px × ~400px:
   thẻ dài KHÔNG được kéo cao cả cột. Tiêu đề (đã clamp 2 dòng) và chân thẻ
   luôn hiện; phần thân bị cắt theo max-height — line-clamp lo phần "…", còn
   max-height là chốt cứng phòng khi Chromium bỏ qua line-clamp (thân nhiều
   \n hoặc nằm trong flex item). */
.notespeed-all-card,
.project-note-card {
  max-width: var(--dt-dimension-layout-256);
  max-height: var(--dt-dimension-layout-600);
  overflow: visible;
}
.notespeed-all-card-snippet,
.project-note-card-preview {
  max-height: 34em;   /* ~22 dòng; đoạn preview đã bị cắt 280 ký tự ở nguồn
                         (notePreview trong src/notics.js) nên thường ngắn hơn */
  -webkit-line-clamp: 22;
  overflow: hidden;
}
.project-note-card-preview.is-untitled { max-height: 36em; -webkit-line-clamp: 24; }

/* Nền thẻ — dùng lại đúng bảng màu token của trình soạn Notics
   (.project-note-card[data-bg=…] ở khối tab Ghi chú).
   Bảng màu nền ghi chú, khai báo qua biến --ns-note-* rồi mới áp ở dưới —
   tách bảng màu khỏi chỗ dùng để sau này thêm bề mặt khác không phải chép lại.
   Trang soạn (Notebook/AntiNote/popup Ghi chú dự án): .note-doc[data-note-bg] ở
   styles/note-editor-shell.css, cùng bộ token. */
:is(.notespeed-all-card, .project-note-card)[data-bg="default"] { --ns-note-bg: var(--ux-raised); --ns-note-fg: var(--ui-text-primary); --ns-note-sub: var(--ui-text-secondary); }
:is(.notespeed-all-card, .project-note-card)[data-bg="white"] { --ns-note-bg: var(--ui-note-bg-white); --ns-note-fg: var(--ui-text-primary); --ns-note-sub: var(--ui-text-secondary); }
:is(.notespeed-all-card, .project-note-card)[data-bg="black"] { --ns-note-bg: var(--ui-note-bg-black); --ns-note-fg: var(--ui-note-on-dark); --ns-note-sub: var(--ui-note-on-dark-muted); }
:is(.notespeed-all-card, .project-note-card)[data-bg="yellow"] { --ns-note-bg: var(--ui-note-bg-yellow); --ns-note-fg: var(--ui-note-on-paper); --ns-note-sub: var(--ui-note-on-paper-muted); }
:is(.notespeed-all-card, .project-note-card)[data-bg="green"] { --ns-note-bg: var(--ui-note-bg-green); --ns-note-fg: var(--ui-note-on-paper); --ns-note-sub: var(--ui-note-on-paper-muted); }
:is(.notespeed-all-card, .project-note-card)[data-bg="blue"] { --ns-note-bg: var(--ui-note-bg-blue); --ns-note-fg: var(--ui-note-on-paper); --ns-note-sub: var(--ui-note-on-paper-muted); }
:is(.notespeed-all-card, .project-note-card)[data-bg="pink"] { --ns-note-bg: var(--ui-note-bg-pink); --ns-note-fg: var(--ui-note-on-paper); --ns-note-sub: var(--ui-note-on-paper-muted); }
:is(.notespeed-all-card, .project-note-card)[data-bg="purple"] { --ns-note-bg: var(--ui-note-bg-purple); --ns-note-fg: var(--ui-note-on-paper); --ns-note-sub: var(--ui-note-on-paper-muted); }
:is(.notespeed-all-card, .project-note-card)[data-bg="gray"] { --ns-note-bg: var(--ui-note-bg-gray); --ns-note-fg: var(--ui-note-on-paper); --ns-note-sub: var(--ui-note-on-paper-muted); }

/* Màu người dùng chọn LUÔN thắng thang bề mặt — token chỉ là giá trị dự phòng. */
.notespeed-all-card[data-bg] { background: var(--ns-note-bg, var(--ux-raised)); }
.notespeed-all-card[data-bg] .notespeed-all-card-title,
.notespeed-all-card[data-bg] .notespeed-all-card-snippet { color: var(--ns-note-fg, inherit); }
.notespeed-all-card[data-bg] .notespeed-all-card-meta { color: var(--ns-note-sub, var(--ui-text-muted)); }

/* Trong Notebook, đưa màu nền thẻ về đồng nhất chuẩn bề mặt (--ux-card),
   giữ nhận diện màu sắc tinh tế ở viền trên để tránh loang lổ thị giác (chuẩn Linear/Craft). */
.notics-page .notespeed-all-card[data-bg] {
  color: var(--ui-text-primary);}
/* Dải tông màu ở cạnh trên là LỚP PHỦ (::after), không phải border-top 2px:
   viền thật của thẻ giữ đồng nhất 1px bốn cạnh. Bản cũ dùng border-top 2px nên
   khi hover (viền chuyển --ux-border-hover) cạnh trên đậm gấp đôi ba cạnh kia,
   góc bo phình lệch. Hover/chọn thì ẩn dải màu để viền hover/viền chọn liền mạch;
   hình học thẻ không đổi nên nội dung không nhảy. */
.notics-page .notespeed-all-card[data-bg]:not([data-bg="default"]):not([data-bg="black"]):not([data-bg="white"])::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--ui-space-px));
  border-top: var(--ui-stroke-thick) solid var(--ns-note-bg);
  border-radius: inherit;
  pointer-events: none;
  transition: opacity var(--ui-duration-fast) var(--ui-ease);
}
.notics-page .notespeed-all-card[data-bg]:is(:hover, .is-selected)::after { opacity: 0; }

/* ==========================================================================
   QUICKNOTE — popup soạn thảo (gần kín khung module), kiểu Google Keep.
   Nằm trong #noteSpeedPage (đã position:relative) nên chỉ phủ khung module,
   không che topbar/nav rail. Các popover dựng ở <body> (menu "…", bubble
   toolbar, bảng lệnh) là position:fixed ở stacking context gốc nên vẫn nổi
   trên popup, không cần nâng z-index thêm.
   ========================================================================== */
.notespeed-modal {
  position: absolute;
  inset: 0;
  z-index: 40; /* audit-keep: thứ tự chồng lớp cục bộ phải giữ đúng số so với hàng xóm cùng ngữ cảnh xếp chồng, thang layer không có bậc tương ứng */
  display: flex;
  align-items: center;
  justify-content: center;
}
.notespeed-modal.hidden { display: none; }

.notespeed-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--ui-shadow-rgb), 0.38);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  animation: notespeed-modal-fade var(--ui-duration-standard) var(--ui-ease) both;
  transform: translateZ(0);
  will-change: opacity;
}

/* Notebook/QuickNote được portal thẳng ra <body>, nên modal phải bám viewport
   thay vì containing block của trang. Scrim riêng của trình soạn thảo không
   blur/layer hóa nền trong suốt thời gian cuộn: nội dung ảnh lớn bên trong
   panel không còn phải cạnh tranh compositor với một backdrop toàn màn hình. */
#noticsEditorModal { position: fixed; }
#noticsEditorModal .notespeed-modal-scrim {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  will-change: auto;
}

/* Selector 2 lớp là CỐ Ý: panel cũng mang class .notics-col (đặt
   border-radius: 0) — cùng specificity thì thắng thua chỉ nhờ thứ tự file,
   quá mong manh cho một thứ dễ bị dời như bo góc.
   Bo góc dùng --sf-radius-card, KHÔNG phải --sf-radius-win: token "win" là bo
   góc khung cửa sổ hệ điều hành, luôn = 0 ở mọi theme (Fluent/Glass × light/
   dark — xem ui-theme-core.css) vì cửa sổ app không tự bo góc riêng. Dùng
   nhầm token đó là lý do popup từng bị vuông; đây là đúng token bề mặt "thẻ
   nổi lên trên nội dung" mà .pnp-card (projectNotePopup.js) cũng dùng. */
#noticsEditorModal .notespeed-modal-panel {
  position: relative;
  z-index: 1;
  /* Editor là một workspace, không phải dialog biểu mẫu. Chừa đúng edge-gap
     chuẩn của hệ thống ở bốn phía và dùng toàn bộ phần còn lại; compact/tight
     vẫn được responsive contract bên dưới chuyển thành full viewport. */
  width: calc(100% - var(--ui-dialog-edge-gap) - var(--ui-dialog-edge-gap));
  height: calc(100% - var(--ui-dialog-edge-gap) - var(--ui-dialog-edge-gap));
  max-width: none;
  max-height: none;
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-panel);
  box-shadow: var(--elev-4);
  overflow: hidden;
  animation: notespeed-modal-pop .17s cubic-bezier(.2, .8, .3, 1) both; /* audit-keep: chuyển động biên đạo riêng (keyframes), không thuộc nhịp giao diện chuẩn */
}

/* Popup soạn thảo (Notebook + Ghi chú dự án) KHÔNG dùng backdrop-filter dù theme
   Kính gắn blur(30px) cho mọi .overlay-panel (styles.css). App vẽ bằng CPU (không
   GPU): mỗi lần cuộn nội dung bên trong, Chromium phải làm mờ lại cả mảng nền
   ~1500×900px → 1/4 khung hình mất >100ms (BA 2026-09-23 "cuộn trang chậm"; đo:
   tắt blur còn 1 khung >33ms). Bỏ blur thì nền phải đục hẳn, không thì lộ chữ
   màn sau (Kính + Sáng: --ux-overlay chỉ đục 95%). Nền lớp nổi do hợp đồng
   "background: var(--surface-raised) !important" (styles.css) quyết định, nên
   đặt lại CHÍNH biến đó trên panel thay vì chồng thêm !important.
   Selector có id để thắng khối :is(...) blur của theme. */
#noticsEditorModal .notespeed-modal-panel,
#projectNotePopup .pnp-card {
  --surface-raised: rgb(var(--ui-surface-raised-rgb)); /* audit-keep: nền lớp nổi ĐỤC cho popup soạn thảo không blur (cuộn CPU); thang token chưa có bậc opaque */
  background: var(--surface-raised);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@keyframes notespeed-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes notespeed-modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .notespeed-modal-scrim, .notespeed-modal-panel { animation: none; }
}

/* Mở rộng giữ nguyên toolbar; Chế độ tập trung còn ẩn toolbar bằng JS. Class
   đặt trực tiếp trên modal vì editor đã được portal khỏi .notics-page. */
#noticsEditorModal:is(.is-expanded, .is-focus-mode) .notespeed-modal-panel {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}
#noticsEditorModal:is(.is-expanded, .is-focus-mode) .notespeed-modal-scrim { display: none; }



/* --- Tab Kế hoạch & Báo cáo (Weekly Notes) -------------------------------- */
#projectTabPlan, #projectTabReport {
  display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; padding: 0;
}
#projectTabPlan.hidden, #projectTabReport.hidden { display: none; }

.project-weekly-container {
  display: flex; flex-direction: column; height: 100%; min-height: 0; width: 100%;
}
/* Một hàng (BA 10/10/2026): tên dự án · thanh định dạng · [Tuần này] ‹ ›. Cao tự
   động để thanh công cụ (khi bật Công cụ nâng cao ở bề ngang hẹp) xuống dòng
   trong chính hàng này thay vì tràn. */
.project-weekly-head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--ui-size-touch); padding: var(--ui-space-1) var(--ui-space-4);
  border-bottom: var(--ui-resizer-line) solid var(--ux-divider);
  background: rgba(var(--ink), 0.02);
  flex: 0 0 auto; gap: var(--ui-space-3);
}
.project-weekly-title-wrap {
  display: flex; align-items: center; gap: var(--ui-space-2); min-width: 0; flex: 0 1 auto;
  max-width: 30%;
}
.project-weekly-badge {
  padding: var(--ui-space-1) var(--ui-space-2); border-radius: var(--ui-radius-control);
  font: var(--fw-bold) var(--fs-micro)/var(--lh-tight) var(--app-font);  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  color: var(--ui-accent); flex: none;
}
.project-weekly-title {
  font: var(--fw-bold) var(--fs-body)/var(--lh-tight) var(--app-font); color: var(--ui-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-weekly-nav {
  display: flex; align-items: center; gap: var(--ui-space-1-5); flex: 0 0 auto; margin-left: auto;
  justify-content: flex-end;
}
.project-weekly-nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-1-5);
  min-height: var(--ui-size-sm); padding: 0 var(--ui-space-2);
  border-radius: var(--ui-radius-control); border: var(--ui-stroke-thin) solid transparent;
  background: transparent;
  font: var(--fw-semibold) var(--fs-caption)/var(--lh-none) var(--app-font); color: var(--ui-text-secondary);
  white-space: nowrap; cursor: pointer;
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-fast);
}
.project-weekly-nav-btn:hover {
  background: var(--ui-hover);
  color: var(--ui-text-primary); border-color: transparent;
}
/* Thoáng–Gọn (BA 10/10/2026): cụm [Tuần này] ‹ › kiểu Google Calendar — nút chữ
   trung tính, không nền màu nhấn; nhãn ngắn cố định nên không cần ghim bề rộng. */
.project-weekly-nav-btn.is-today {
  color: var(--ui-text-primary);
  border-color: transparent;
}

/* Cùng khuôn với thanh Notebook (.notics-toolbar): dải nền "fill" bo tròn tách
   khỏi phần đầu và hai thẻ tuần, vạch ngăn nhóm cùng màu --stroke. */
.project-weekly-toolbar {
  /* basis 0: chiếm đúng phần còn lại giữa tên và điều hướng tuần, để
     createToolbarMoreGroups đo "vừa một hàng" theo bề rộng thật của khe này. */
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: var(--ui-space-1); flex-wrap: wrap;
  margin: 0;
  padding: var(--ui-space-1) var(--ui-space-2);
  border-radius: var(--ui-radius-lg);
  background: rgb(var(--ui-surface-fill-rgb));
}
.project-weekly-toolbar .ql-formats {
  display: inline-flex; align-items: center; gap: var(--ui-space-0-5);
}
.project-weekly-toolbar .ql-formats + .ql-formats {
  margin-left: var(--ui-space-1); padding-left: var(--ui-space-1-5); border-left: var(--ui-stroke-thin) solid var(--stroke);
}
.project-weekly-toolbar button {
  width: var(--ui-editor-toolbar-control); height: var(--ui-editor-toolbar-control); padding: 0; border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-text-secondary);
  cursor: pointer; font-family: inherit; line-height: var(--lh-none);
  display: inline-flex; align-items: center; justify-content: center;
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-fast);
}
.project-weekly-toolbar button:hover {
  background: var(--ui-hover); color: var(--ui-text-primary);
}
.project-weekly-toolbar button.ql-active {
  background: var(--ui-accent-solid); color: var(--ui-text-on-accent);
}
.project-weekly-toolbar select {
  height: var(--ui-control-h-compact); border: var(--ui-stroke-thin) solid transparent;
  border-radius: var(--ui-radius-control);
  background: color-mix(in srgb, var(--ui-text-primary) 5%, transparent); color: var(--ui-text-primary);
  font-family: inherit; font-size: var(--fs-caption); padding: 0 var(--ui-space-1);
  cursor: pointer;
}
.project-weekly-toolbar select:hover {
  background: var(--ui-hover);
}

.project-weekly-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-3-5);
  padding: var(--ui-space-3-5) var(--ui-space-4); flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.project-weekly-card {
  display: flex; flex-direction: column; min-height: 0; height: 100%;
  border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-panel);
  background: var(--ux-raised); overflow: hidden;
  box-shadow: var(--ui-elevation-1);
  transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.project-weekly-card.is-active {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 1px var(--ui-accent), 0 2px 8px rgba(var(--ui-black-rgb), 0.06); /* audit-keep: quầng sáng màu trạng thái (glow), không phải bậc độ nổi */
}
.project-weekly-card-head {
  display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box; min-height: var(--ui-size-md);
  padding: var(--ui-space-1) var(--ui-space-3); border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
  background: rgba(var(--ink), 0.02); flex: 0 0 auto; gap: var(--ui-space-2);
}
.project-weekly-card-tag { display: flex; align-items: center; gap: var(--ui-space-1-5); flex: none; }
.project-weekly-tag-dot { width: var(--ui-space-2); height: var(--ui-space-2); border-radius: var(--ui-radius-circle); background: var(--ui-accent); }
/* Nhãn cột viết thường đầu câu, chữ phụ (BA 10/10/2026 — bỏ CHỮ HOA giãn chữ). */
.project-weekly-col-badge {
  font: var(--fw-medium) var(--fs-caption)/var(--lh-none) var(--app-font);
  color: var(--ui-text-secondary);
}
.project-weekly-card-title-wrap {
  display: flex; align-items: center; gap: var(--ui-space-1-5);
  min-width: 0; margin-left: auto;
}
.project-weekly-expand-btn { flex: 0 0 auto; }
.project-weekly-grid.is-single-column { grid-template-columns: minmax(0, 1fr); }
.project-tab-weekly .project-weekly-card.is-collapsed,
.project-weekly-grid .project-weekly-card.is-collapsed { display: none; }
.project-weekly-card-title {
  margin: 0; font: var(--fw-bold) var(--fs-body)/var(--lh-tight) var(--app-font); color: var(--ui-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-weekly-card-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-icon-md);
  height: var(--ui-icon-md);
  flex: 0 0 var(--ui-space-5);
  color: var(--ui-text-muted);
  border-radius: var(--ui-radius-full);
  transition: color var(--ui-duration-fast) var(--ui-ease), opacity var(--ui-duration-fast) var(--ui-ease);
}
.project-weekly-card-status.is-synced,
.project-weekly-card-status.is-saved {
  color: var(--ui-accent);
}
.project-weekly-card-status.is-saving svg,
.project-weekly-card-status.is-loading svg {
  animation: weekly-status-spin var(--ui-duration-spin) linear infinite;
}
.project-weekly-card-status.is-dirty {
  color: var(--ui-text-muted);
}
.project-weekly-card-status.is-error {
  color: var(--ui-danger);
}
.project-weekly-card-status.is-empty {
  visibility: hidden;
}
.project-weekly-status-dot {
  width: var(--ui-space-1-5);
  height: var(--ui-space-1-5);
  border-radius: var(--ui-radius-circle);
  background: var(--ui-text-muted);
  display: block;
}
@keyframes weekly-status-spin {
  to { transform: rotate(360deg); }
}

.project-weekly-editor-wrap {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior-y: contain;
  padding: var(--ui-space-3-5) var(--ui-space-4-5); background: transparent;
}
.project-weekly-editor {
  height: 100%; min-height: var(--dt-dimension-layout-120); font-size: var(--font-task); line-height: var(--lh-normal);
  font-family: var(--app-font);
  color: var(--ui-text-primary); outline: none;
}
.project-weekly-editor .ql-editor {
  font-family: var(--app-font);
  padding: 0; min-height: 100%; outline: none;
  color: var(--ui-text-primary); counter-reset: list-0 list-1 list-2 list-3;
}
.project-weekly-editor .ql-editor :is(p, ol, ul) { margin: 0 0 .12em; padding: 0; }
/* Bullet/numbered/checklist — app không nạp quill.core.css nên phần hiển thị
   marker (chấm, số thứ tự, ô check) và bộ đếm phải tự viết, giống hệt
   .notics-editor / .today-note-editor. Trước đây Kế hoạch/Báo cáo tuần thiếu
   khối này nên rơi về marker <ol> mặc định của trình duyệt: số đè lên chữ
   ("mất chữ") và bộ đếm không reset qua đoạn văn ("gõ . cách vẫn ra số 2"). */
.project-weekly-editor .ql-editor :is(p, h1, h2, h3, h4, h5, h6, blockquote, pre, table, hr, antinote-att) {
  counter-set: list-0 0 list-1 0 list-2 0 list-3 0;
  counter-reset: list-0 list-1 list-2 list-3;
}
.project-weekly-editor .ql-editor ol { padding-left: 1.5em; counter-reset: list-0 list-1 list-2 list-3; }
.project-weekly-editor .ql-editor li { position: relative; padding-left: 1.5em; list-style: none; }
.project-weekly-editor .ql-editor li > .ql-ui::before {
  display: inline-block; width: 1.2em; margin-left: -1.5em; margin-right: .3em;
  text-align: right; white-space: nowrap;
}
.project-weekly-editor .ql-editor li[data-list="bullet"] > .ql-ui::before { content: "•"; }
/* Bộ đếm theo cấp — cùng công thức .notics-editor (notics.css): mỗi mục đặt lại
   các cấp SÂU hơn trong MỘT counter-set. Bản cũ tách rule cùng độ ưu tiên nên rule
   sau đè rule trước: danh sách con của mục "2." đánh tiếp c, d thay vì a. */
.project-weekly-editor .ql-editor li[data-list]:not([class*="ql-indent-"]) { counter-set: list-1 0 list-2 0 list-3 0; }
.project-weekly-editor .ql-editor li[data-list]:not([data-list="ordered"]):not([class*="ql-indent-"]) { counter-set: list-0 0 list-1 0 list-2 0 list-3 0; }
.project-weekly-editor .ql-editor li[data-list].ql-indent-1 { counter-set: list-2 0 list-3 0; }
.project-weekly-editor .ql-editor li[data-list]:not([data-list="ordered"]).ql-indent-1 { counter-set: list-1 0 list-2 0 list-3 0; }
.project-weekly-editor .ql-editor li[data-list].ql-indent-2 { counter-set: list-3 0; }
.project-weekly-editor .ql-editor li[data-list]:not([data-list="ordered"]).ql-indent-2 { counter-set: list-2 0 list-3 0; }
.project-weekly-editor .ql-editor li[data-list]:not([data-list="ordered"]):is(.ql-indent-3, .ql-indent-4, .ql-indent-5, .ql-indent-6, .ql-indent-7, .ql-indent-8) { counter-set: list-3 0; }
.project-weekly-editor .ql-editor li[data-list="ordered"] { counter-increment: list-0; }
.project-weekly-editor .ql-editor li[data-list="ordered"] > .ql-ui::before { content: counter(list-0, decimal) ". "; }
.project-weekly-editor .ql-editor li[data-list="ordered"].ql-indent-1 { counter-increment: list-1; }
.project-weekly-editor .ql-editor li[data-list="ordered"].ql-indent-1 > .ql-ui::before { content: counter(list-1, lower-alpha) ". "; }
.project-weekly-editor .ql-editor li[data-list="ordered"].ql-indent-2 { counter-increment: list-2; }
.project-weekly-editor .ql-editor li[data-list="ordered"].ql-indent-2 > .ql-ui::before { content: counter(list-2, lower-roman) ". "; }
.project-weekly-editor .ql-editor li[data-list="ordered"]:is(.ql-indent-3, .ql-indent-4, .ql-indent-5, .ql-indent-6, .ql-indent-7, .ql-indent-8) { counter-increment: list-3; }
.project-weekly-editor .ql-editor li[data-list="ordered"]:is(.ql-indent-3, .ql-indent-4, .ql-indent-5, .ql-indent-6, .ql-indent-7, .ql-indent-8) > .ql-ui::before { content: counter(list-3, decimal) ". "; }
.project-weekly-editor .ql-editor li[data-list="unchecked"] > .ql-ui,
.project-weekly-editor .ql-editor li[data-list="checked"] > .ql-ui { cursor: pointer; font-size: 1.05em; }
.project-weekly-editor .ql-editor li[data-list="unchecked"] > .ql-ui::before { content: "\2610"; }
.project-weekly-editor .ql-editor li[data-list="checked"] > .ql-ui::before { content: "\2611"; color: var(--ui-accent); }
.project-weekly-editor .ql-editor li[data-list="checked"] { color: var(--ui-text-muted); text-decoration: line-through; }
/* Quill lưu cấp thụt lề trên block bằng class ql-indent-N. Notics đã có bộ
   CSS riêng ở trên, còn Kế hoạch/Báo cáo tuần trước đây không có nên Tab vẫn
   đổi Delta nhưng không dịch nội dung trên màn hình. Giữ list cộng thêm 1.5em
   để marker (số/chấm) không đè lên phần chữ. */
.project-weekly-editor .ql-editor .ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; }
.project-weekly-editor .ql-editor li.ql-indent-1:not(.ql-direction-rtl) { padding-left: 4.5em; }
.project-weekly-editor .ql-editor .ql-indent-2:not(.ql-direction-rtl) { padding-left: 6em; }
.project-weekly-editor .ql-editor li.ql-indent-2:not(.ql-direction-rtl) { padding-left: 7.5em; }
.project-weekly-editor .ql-editor .ql-indent-3:not(.ql-direction-rtl) { padding-left: 9em; }
.project-weekly-editor .ql-editor li.ql-indent-3:not(.ql-direction-rtl) { padding-left: 10.5em; }
.project-weekly-editor .ql-editor .ql-indent-4:not(.ql-direction-rtl) { padding-left: 12em; }
.project-weekly-editor .ql-editor li.ql-indent-4:not(.ql-direction-rtl) { padding-left: 13.5em; }
.project-weekly-editor .ql-editor .ql-indent-5:not(.ql-direction-rtl) { padding-left: 15em; }
.project-weekly-editor .ql-editor li.ql-indent-5:not(.ql-direction-rtl) { padding-left: 16.5em; }
.project-weekly-editor .ql-editor .ql-indent-6:not(.ql-direction-rtl) { padding-left: 18em; }
.project-weekly-editor .ql-editor li.ql-indent-6:not(.ql-direction-rtl) { padding-left: 19.5em; }
.project-weekly-editor .ql-editor .ql-indent-7:not(.ql-direction-rtl) { padding-left: 21em; }
.project-weekly-editor .ql-editor li.ql-indent-7:not(.ql-direction-rtl) { padding-left: 22.5em; }
.project-weekly-editor .ql-editor .ql-indent-8:not(.ql-direction-rtl) { padding-left: 24em; }
.project-weekly-editor .ql-editor li.ql-indent-8:not(.ql-direction-rtl) { padding-left: 25.5em; }

} /* @layer legacy */

/* ==========================================================================
   MÀN QUICKNOTE / NOTESPEED — GĐ4 (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §7.2, khung A)
   Thẻ ghi chú trong Notebook theo thẻ chuẩn (bo radius.lg, đệm --ui-card-pad) —
   giới hạn trong .notics-page vì lưới AntiPaint dùng chung class với đệm riêng.
   Ô ghi nhanh là một ô nhập chuẩn (md 32, viền/nền ô nhập, chữ body 14, không
   bóng). Nút ghim cùng cỡ sm 24 với nút chọn/thao tác. Thanh thao tác hàng loạt
   (dùng chung QuickNote/Project/AntiPaint): khung bo radius.lg, nút .ui-btn subtle.
   ========================================================================== */
@layer modules {
  .notics-page .notespeed-all-card {
    padding: var(--ui-card-pad);
    border-radius: var(--ui-radius-lg);
  }
  .notespeed-all-card-pin-toggle {
    width: var(--ui-size-sm);
    height: var(--ui-size-sm);
  }
  .notespeed-quick-bar {
    box-sizing: border-box;
    height: var(--ui-size-md);
    padding: 0 var(--ui-space-3);
    border: var(--ui-resizer-line) solid var(--ux-input-border);
    border-radius: var(--ui-radius-control);
    background-color: var(--ux-input-bg);
    box-shadow: none;
  }
  .notespeed-quick-bar:focus-within {
    border-color: var(--ui-accent);
  }
  .notespeed-quick-input {
    font-size: var(--fs-body);
  }
  .notespeed-batch-bar {
    gap: var(--ui-space-2);
    padding: var(--ui-space-1) var(--ui-space-1) var(--ui-space-1) var(--ui-space-4);
    border-radius: var(--ui-radius-lg);
  }
  .notespeed-batch-btn.is-danger {
    color: var(--ui-danger);
  }
  /* Nút trên thẻ ghi chú (.ui-btn nhẹ). Thẻ nền đen — kể cả khi app ở chế độ
     Sáng — dùng token on-dark để icon không chìm (đen trên đen). Trang Notebook
     KHÔNG tô nền thẻ (chỉ dải màu cạnh trên) nên loại ra: icon on-dark trên thẻ
     trắng từng gần như vô hình. */
  :is(.notespeed-all-card, .project-note-card)[data-bg="black"]:not(.notics-page .notespeed-all-card) .ui-btn.notespeed-card-action-btn {
    color: var(--ui-note-on-dark-muted);
  }
  :is(.notespeed-all-card, .project-note-card)[data-bg="black"]:not(.notics-page .notespeed-all-card) .ui-btn.notespeed-card-action-btn:is(:hover, .is-popover-open) {
    background: color-mix(in srgb, var(--ui-note-on-dark) 16%, transparent);
    color: var(--ui-note-on-dark);
  }
  :is(.notespeed-all-card, .project-note-card)[data-bg="black"]:not(.notics-page .notespeed-all-card) .ui-btn.notespeed-card-action-btn.ui-btn--danger-hover:hover {
    background: color-mix(in srgb, var(--ui-danger) 24%, transparent);
    color: var(--ui-danger);
  }
  :is(.notespeed-all-card, .project-note-card)[data-bg="black"]:not(.notics-page .notespeed-all-card) .ui-btn.notespeed-card-action-btn:focus-visible {
    outline-color: var(--ui-note-on-dark);
  }
}

/* Khai báo từng là !important trong @layer legacy — chuyển sang layer cuối `overrides`
   (thắng mọi khai báo thường ở mọi layer, đúng như cờ important cũ), cùng selector, cùng
   thứ tự, cùng ngữ cảnh @media. Sinh tự động 01/10/2026 (KE-HOACH-DAT-CHUAN-QUOC-TE-UI GĐ B–E);
   thuộc tính ẩn/hiện/định vị giữ cờ important vì JS gắn nội tuyến. */
@layer overrides {
  .notespeed-table-select-btn svg, .notespeed-table-select-all-btn svg { margin: 0; }
  .notics-page .notespeed-all-card[data-bg] { background: var(--ux-card); }
  .notics-page .notespeed-all-card[data-bg] .notespeed-all-card-title, .notics-page .notespeed-all-card[data-bg] .notespeed-all-card-snippet { color: var(--ui-text-primary); }
}