@layer overrides {
/* =====================================================================
   BỐ CỤC THẺ NỔI — BÊN TRONG TRANG (BA 11/10/2026, báo cáo cấu trúc giao
   diện Q1–Q3, Q5). Khung (rail, header, thân trang) nằm ở styles.css
   @layer overrides; tệp này chỉ lo phần BÊN TRONG thân trang theo Bố cục.

   Hai bố cục, mỗi bố cục MỘT cách tách vùng:
     Thẻ nổi   (data-shell-frame ≠ seamless, data-surface="card"):
               THẺ TRANG (BA 13/10/2026, hướng A): rail là một thẻ; header +
               thân trang là MỘT thẻ --ux-frame trên nền bàn --ux-desk, tách
               bằng khe --shell-gap, không viền. Bên trong thẻ trang, cột menu
               và khối nội dung là Ô (--ux-well, nền nhạt bo góc) — không còn
               tầng tấm lót (--ux-plate) giữa thẻ và ô.
     Liền mạch (data-shell-frame="seamless", data-surface="flat"):
               một tấm, cột liền chia bằng vạch hoặc bậc nền — giữ nguyên
               khối "CHẾ ĐỘ LIỀN MẠCH" của styles.css.

   Trang có cột menu + vùng nội dung (Notebook, Project, Cài đặt): cột menu là
   một ô, vùng nội dung là ô thứ hai (Notebook: danh sách + đọc chung một ô —
   Q3-A); Cài đặt: mỗi .settings-card là một ô. Ô cách mép thẻ trang đúng
   --shell-gap ở trái/phải/dưới; phía trên là dải header.

   --ux-well = "ô nền nhạt": Sáng = bậc chìm (xám nhạt trên thẻ trắng), Tối = bậc
   nổi (sáng hơn thẻ một bậc — luật "nổi = sáng" của Tối). Alpha theo mặt chữ
   (--a-text) nên vẫn đủ đặc trên hình nền.
   ===================================================================== */

/* Khai ở mọi khung (chỉ luật Thẻ nổi tiêu thụ): luật bề mặt thẻ đọc theo data-surface,
   không theo khung, nên biến phải luôn có giá trị. */
:root {
  --ux-well-rgb: var(--ux-raised-rgb);
  --ux-well: rgba(var(--ux-well-rgb), var(--a-text));
}
html[data-mode="light"] {
  --ux-well-rgb: var(--ux-sunken-rgb);
}
/* Thẻ trang: mọi thân trang cùng mặt khung với header (header là dải trên của thẻ). Bóng
   của thẻ nằm ở đây — header không đổ bóng riêng. */
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) :is(.grid, .notics-page, .feedback-admin-page, .project-page, .dashboard-page, .settings-page, .premium-page, .premium-admin-page, .antiscreenshot-page, .guide-page) {
  background-color: var(--ux-frame);
  box-shadow: var(--ui-float-shadow);
}
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) :is(.notics-page:not(.feedback-admin-page) > .notics-body, .project-body, .settings-layout) {
  gap: var(--shell-gap);
  padding: 0 var(--shell-gap) var(--shell-gap);
  background: transparent;
}
/* Cột menu = ô nền nhạt bo góc, không vạch phải. */
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) :is(.notics-body, .project-body, .settings-layout) > .ux-pane {
  border: 0;
  border-radius: var(--ui-radius-window);
  background: var(--ux-well);
  box-shadow: none;
}
/* Vùng nội dung = ô nền nhạt. Cài đặt không có mặt riêng: mỗi thẻ cài đặt là một ô,
   vùng chứa trong suốt. */
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) :is(.notics-body > .notics-col-notes, .project-body > .project-col-main) {
  border-radius: var(--ui-radius-window);
  background: var(--ux-well);
  box-shadow: none;
}
/* Notebook: khe chỉ nằm giữa cây và phần còn lại (margin phải của cây, không dùng gap) —
   danh sách + khung đọc là MỘT thẻ (Q3-A): danh sách vuông góc phải, khung đọc vuông
   góc trái, chia nhau bằng vạch phải sẵn có của danh sách. Cột nào bị ẩn (thu gọn,
   tập trung, khung hẹp) thì thẻ còn lại bo đủ bốn góc. */
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) .notics-page:not(.feedback-admin-page) > .notics-body {
  gap: 0;
}
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) .notics-body > .notics-col-projects {
  margin-right: var(--shell-gap);
}
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) .notics-page[data-notes-view="reading"] .notics-body > .notics-col-notes {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) #noticsEditorModal.is-docked .notespeed-modal-panel {
  border-radius: 0 var(--ui-radius-window) var(--ui-radius-window) 0;
  background: var(--ux-well);
  box-shadow: none;
}
/* Danh sách + khung đọc là MỘT thẻ: cắt bóng của khung đọc ở cạnh trái để không đổ vệt lên cột
   danh sách ngay mép giáp (vệt 255→253→247 ở Sáng). Ba cạnh còn lại giữ bóng của thẻ. */
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) .notics-page:not(.is-notes-collapsed):not(.is-focus-mode):not(.is-reading-focus) #noticsEditorModal.is-docked .notespeed-modal-panel {
  clip-path: inset(calc(-1 * var(--ui-space-2)) calc(-1 * var(--ui-space-2)) calc(-1 * var(--ui-space-2)) 0);
}
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) .notics-page:is(.is-notes-collapsed, .is-focus-mode, .is-reading-focus) #noticsEditorModal.is-docked .notespeed-modal-panel {
  border-radius: var(--ui-radius-window);
}
@container workspace-layout (max-width: 820px) {
  html:not([data-shell-frame="seamless"]):not(.is-image-canvas) .notics-page[data-notes-view="reading"]:not([data-has-note]) .notics-body > .notics-col-notes {
    border-radius: var(--ui-radius-window);
  }
  html:not([data-shell-frame="seamless"]):not(.is-image-canvas) .notics-page[data-has-note] #noticsEditorModal.is-docked .notespeed-modal-panel {
    border-radius: var(--ui-radius-window);
  }
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]):not([data-shell-frame="seamless"]):not(.is-image-canvas) .notics-page[data-notes-view="reading"]:not([data-has-note]) .notics-body > .notics-col-notes,
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]):not([data-shell-frame="seamless"]):not(.is-image-canvas) .notics-page[data-has-note] #noticsEditorModal.is-docked .notespeed-modal-panel {
  border-radius: var(--ui-radius-window);
}

/* Chưa mở ghi chú: thanh đầu khung đọc không có gì để thao tác — ẩn cả dải lẫn vạch
   dưới (giữ chỗ để không nhảy khi chọn ghi chú). Áp ở cả hai bố cục. */
.notics-page:not([data-has-note]) #noticsEditorModal.is-docked .notics-doc-header {
  visibility: hidden;
  border-bottom-color: transparent;
}

html:not([data-shell-frame="seamless"]):not(.is-image-canvas) .settings-layout > .settings-main {
  background: transparent;
}
/* Ô đầu tiên thẳng mép trên với cột menu, cách cột menu đúng một khe (đệm cũ là đệm của
   tấm lót — trong thẻ trang mép ô do .settings-layout lo). */
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) .settings-page .settings-scroll {
  padding: 0;
}
/* Dashboard: thẻ số liệu = ô nền nhạt, không viền/bóng (thẻ trang đã là lớp nổi). */
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) .dashboard-page :is(.dashboard-card, .dashboard-kpi-card) {
  border-color: transparent;
  background: var(--ux-well);
  box-shadow: none;
}
/* Thẻ cài đặt = ô nền nhạt trong thẻ trang: tách bằng khe + tông ô, không viền (giữ độ dày
   viền trong suốt để hình học không đổi). Vạch giữa các hàng trong ô vẫn giữ — đó là cách
   tách duy nhất giữa các hàng. */
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) .settings-page .settings-card {
  border-color: transparent;
  background: var(--ux-well);
  box-shadow: none;
}

/* Lịch Ngày/Tuần/Danh sách ở Thẻ nổi: thẻ ngày tách bằng khe, không viền, bóng
   theo --ui-float-shadow (chỉ Sáng không hình nền). Bí danh --view-panel-* khai
   ở :root tính từ --cal-day-* nên phải khai lại trong cùng phạm vi. Tháng luôn
   phẳng nên không thuộc phạm vi này. */
html[data-surface="card"]:not(.is-image-canvas) :is(#grid[data-view-mode="week"], #grid[data-view-mode="today"], #grid.agenda-view) {
  --cal-day-border: transparent;
  /* Mọi thẻ trong Lịch (thẻ ngày, khung Hôm nay, thẻ Tiến độ/Mốc, thẻ Danh sách) bo CÙNG bậc
     khối lớn với rail/header (Phương án A, BA 11/10/2026). */
  --cal-day-radius: var(--ui-radius-window);
  --view-panel-radius: var(--ui-radius-window);
  --cal-day-shadow: none;
  --cal-day-shadow-hover: none;
  --view-panel-border: transparent;
  --view-panel-shadow: none;
}
/* Thẻ trang (BA 13/10/2026): thẻ ngày, khung Hôm nay, thẻ Tiến độ/Mốc, thẻ Danh sách = ô
   nền nhạt; thân lịch là phần dưới của thẻ trang (mặt khung). Thanh tuần Agenda nằm giữa
   header và lưới nên vuông góc, cùng mặt. */
html[data-surface="card"]:not([data-shell-frame="seamless"]):not(.is-image-canvas) :is(#grid[data-view-mode="week"], #grid[data-view-mode="today"], #grid.agenda-view) {
  --cal-day-surface: var(--ux-well);
  --view-panel-bg: var(--cal-day-surface);
}
html[data-surface="card"]:not([data-shell-frame="seamless"]):not(.is-image-canvas) :is(#grid[data-view-mode="week"], #grid[data-view-mode="today"], #grid.agenda-view),
html[data-surface="card"]:not([data-shell-frame="seamless"]):not(.is-image-canvas) .agenda-week-bar {
  background-color: var(--ux-frame);
}
html:not([data-shell-frame="seamless"]):not(.is-image-canvas) .agenda-week-bar {
  border-radius: 0;
}
/* Thẻ tiêu đề tuần (anh em của #grid nên không thừa hưởng biến của lưới) cùng khuôn ô ngày;
   cột ngày của thẻ Danh sách ăn theo nền ô, chỉ tách bằng vạch phải sẵn có. */
html[data-surface="card"]:not([data-shell-frame="seamless"]):not(.is-image-canvas) .agenda-week-bar {
  --view-panel-bg: var(--ux-well);
  --view-panel-shadow: none;
}
html[data-surface="card"]:not([data-shell-frame="seamless"]):not(.is-image-canvas) #grid.agenda-view .agenda-day .day-head {
  background: transparent;
}
/* Đầu thẻ ngày tách khỏi danh sách việc bằng khoảng trắng, không bằng vạch. */
html[data-surface="card"] #grid[data-view-mode="week"] .day-head {
  border-bottom: 0;
}

/* =====================================================================
   THANG ĐỘ TRONG KHI CÓ HÌNH NỀN (BA 11/10/2026, Q4/Q6). Nguồn số: DTCG
   material.<bậc>.wallpaper.* — khung (rail, header, cột menu, dải Liền mạch: CÙNG một độ đục,
   Phương án A) và thẻ có chữ giữ đủ đặc cho tương phản
   AA; tấm thân trang (plate) mang phần lớn khác biệt; blur làm mờ ẢNH một lần
   ở .app-bg-image (không blur từng thẻ). Không hình nền: mọi hệ số = 1 và bề
   mặt vẽ ra luôn là Đục (settingsPanel.effectiveMaterial).
   ===================================================================== */
:root { --a-chrome: 1; --a-text: 1; --a-plate: 1; }
html.has-wallpaper[data-material="focus"]:not(.is-image-canvas) {
  --a-chrome: var(--dt-material-focus-wallpaper-chrome);
  --a-text: var(--dt-material-focus-wallpaper-text);
  --a-plate: var(--dt-material-focus-wallpaper-plate);
  --glass-blur: var(--dt-material-focus-wallpaper-blur);
}
html.has-wallpaper[data-material="acrylic"]:not(.is-image-canvas) {
  --a-chrome: var(--dt-material-acrylic-wallpaper-chrome);
  --a-text: var(--dt-material-acrylic-wallpaper-text);
  --a-plate: var(--dt-material-acrylic-wallpaper-plate);
  --glass-blur: var(--dt-material-acrylic-wallpaper-blur);
}
html.has-wallpaper[data-material="glass"]:not(.is-image-canvas) {
  --a-chrome: var(--dt-material-glass-wallpaper-chrome);
  --a-text: var(--dt-material-glass-wallpaper-text);
  --a-plate: var(--dt-material-glass-wallpaper-plate);
  --glass-blur: var(--dt-material-glass-wallpaper-blur);
}
/* Tối: thẻ tối trên ảnh sáng lọt 6% đã thấy hoạ tiết sau chữ (04/10/2026) → .97. */
html.has-wallpaper[data-material="glass"][data-mode="dark"]:not(.is-image-canvas) {
  --a-chrome: var(--dt-material-glass-wallpaper-chrome-dark);
  --a-text: var(--dt-material-glass-wallpaper-text-dark);
}
html.has-wallpaper[data-material="solid"]:not(.is-image-canvas) {
  --glass-blur: var(--dt-material-solid-wallpaper-blur);
}

/* Liền mạch + hình nền: tấm thân trang cũng theo --a-plate (Đục kín, Kính trong lộ ảnh) — trước
   đây mọi bậc để tấm trong suốt hẳn. Trang mà chính vỏ trang mang chữ vẫn nhận mặt chữ ở luật
   Kính trong riêng của styles.css (khai trên phần tử nên thắng giá trị kế thừa này). */
html.has-wallpaper[data-shell-frame="seamless"]:not(.is-image-canvas) {
  --surface-page: rgba(var(--ux-base-rgb), var(--a-plate));
}

/* LỊCH — MỘT CHUẨN NỀN cho Ngày / Tuần / Tháng / Danh sách (BA 11/10/2026: Hôm nay thấy ảnh,
   Tuần không, Tháng đen tuyền).
   - Mặt ngày (cột Tuần, khung Hôm nay, thẻ Danh sách, ô tháng đang xem) = --cal-day-surface.
   - Ô tháng liền kề lùi một bậc = base (Sáng #f3f4f6 · Tối #1c1d21). Trước đây Tối đảo ngược:
     ô tháng đang xem dùng bậc chìm #0f1012 (gần đen), tháng liền kề lại sáng hơn.
   - LUẬT CHUNG (BA chốt 11/10/2026): ảnh nền KHÔNG bao giờ nằm sau chữ, nhưng lộ ở MỌI chỗ
     trống. Liền mạch: Ngày/Danh sách là tấm theo độ trong (--a-plate) — thấy ảnh quanh khung;
     Tuần/Tháng là tấm mặt chữ vì cột ngày/cột số tuần nằm thẳng trên tấm (không còn chỗ trống).
   - Thẻ nổi: Hôm nay / Tuần / Danh sách là thẻ trên tấm --ux-plate (ảnh lộ ở khe theo độ
     trong); Tháng là một thẻ liền. */
html[data-mode] {
  --cal-month-in-surface: var(--cal-day-surface);
  --cal-month-out-surface: rgba(var(--ux-base-rgb), var(--a-text));
}
html.has-wallpaper[data-shell-frame="seamless"]:not(.is-image-canvas) :is(#grid[data-view-mode="week"], #grid.multi-week) {
  background-color: rgba(var(--ux-base-rgb), var(--a-text));
}
html.has-wallpaper[data-shell-frame="seamless"]:not(.is-image-canvas) :is(#grid[data-view-mode="today"], #grid.agenda-view, .agenda-week-bar:not(.hidden)) {
  background-color: rgba(var(--ux-base-rgb), var(--a-plate));
}

/* Thẻ ngày (Thẻ nổi) = ô nền nhạt, alpha theo mặt chữ của thang. */
html.has-wallpaper[data-surface="card"]:not(.is-image-canvas) :is(#grid[data-view-mode="week"], #grid[data-view-mode="today"], #grid.agenda-view) {
  --cal-day-surface: var(--ux-well);
  --view-panel-bg: var(--cal-day-surface);
}

/* Liền mạch + hình nền, Acrylic/Kính trong (Q6): dải khung trong theo --a-chrome. Ảnh nền
   trải cả cửa sổ; rail và header tự tô màu khung (trong theo --a-chrome) — đây cũng là
   nền mà bộ đo tương phản thấy dưới chữ header. Khe phải/dưới quanh tấm thân trang do
   MỘT lớp phủ .app-background::after tô cùng màu; mặt nạ của nó = toàn khung TRỪ (vùng
   rail + vùng header + tấm thân trang bo góc = hai chữ nhật chéo + bốn hình tròn góc), nên
   không chồng hai lớp alpha ở đâu cả. */
html.has-wallpaper[data-shell-frame="seamless"]:is([data-material="acrylic"], [data-material="glass"]):not(.is-image-canvas) {
  --ui-chrome-band: color-mix(in srgb, var(--ui-chrome-surface) calc(var(--a-chrome) * 100%), transparent);
}
html.has-wallpaper[data-shell-frame="seamless"]:is([data-material="acrylic"], [data-material="glass"]):not(.is-image-canvas) .app-background {
  inset: 0;
  border-radius: inherit;
}
/* Ngắm hình nền (wallpaperPeek.js): lớp nền phủ kín cửa sổ, không còn rail/header/tấm
   thân trang để chừa lỗ — dải khung này mà vẽ thì thành viền thừa quanh ảnh (BA 12/10/2026). */
html.has-wallpaper[data-shell-frame="seamless"]:is([data-material="acrylic"], [data-material="glass"]):not(.is-image-canvas, .is-wallpaper-peek) .app-background::after {
  /* Lỗ tấm thân trang thu vào hai nét (2px, như lớp ảnh của khung Trung tính/Trắng): lớp phủ lót dưới mép tấm, chỗ khử răng cưa của cung
     bo góc không lộ ảnh nền (tấm vẽ đè lên trên). Vùng rail/header trừ ra đúng kích thước THẬT
     (--rail-w, --ui-header-h) — trừ rộng hơn 1px là hở một vạch ảnh nền dọc rail và dưới header,
     hai vạch gặp nhau thành góc vuông ở góc trên-trái tấm (BA 11/10/2026). */
  --hole-l: calc(var(--rail-w) + var(--ui-stroke-thick));
  --hole-t: calc(var(--ui-header-h) + var(--ui-stroke-thick));
  --hole-r: calc(var(--ui-seamless-inset) + var(--ui-stroke-thick));
  --hole-b: calc(var(--ui-seamless-inset) + var(--ui-stroke-thick));
  --hole-radius: calc(var(--ui-seamless-canvas-radius) - var(--ui-stroke-thick));
  --hole-d: calc(var(--hole-radius) * 2);
  --hole-mask-images:
    linear-gradient(black 0 0),
    linear-gradient(black 0 0),
    linear-gradient(black 0 0),
    linear-gradient(black 0 0),
    linear-gradient(black 0 0),
    radial-gradient(circle closest-side, black 98%, transparent 100%),
    radial-gradient(circle closest-side, black 98%, transparent 100%),
    radial-gradient(circle closest-side, black 98%, transparent 100%),
    radial-gradient(circle closest-side, black 98%, transparent 100%);
  --hole-mask-size:
    100% 100%,
    var(--rail-w) 100%,
    100% var(--ui-header-h),
    calc(100% - var(--hole-l) - var(--hole-r)) calc(100% - var(--hole-t) - var(--hole-b) - var(--hole-d)),
    calc(100% - var(--hole-l) - var(--hole-r) - var(--hole-d)) calc(100% - var(--hole-t) - var(--hole-b)),
    var(--hole-d) var(--hole-d), var(--hole-d) var(--hole-d), var(--hole-d) var(--hole-d), var(--hole-d) var(--hole-d);
  --hole-mask-position:
    0 0,
    0 0,
    0 0,
    left var(--hole-l) top calc(var(--hole-t) + var(--hole-radius)),
    left calc(var(--hole-l) + var(--hole-radius)) top var(--hole-t),
    left var(--hole-l) top var(--hole-t),
    right var(--hole-r) top var(--hole-t),
    left var(--hole-l) bottom var(--hole-b),
    right var(--hole-r) bottom var(--hole-b);
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--ui-chrome-band);
  -webkit-mask-image: var(--hole-mask-images);
  mask-image: var(--hole-mask-images);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--hole-mask-size);
  mask-size: var(--hole-mask-size);
  -webkit-mask-position: var(--hole-mask-position);
  mask-position: var(--hole-mask-position);
  /* Lớp trên cùng (toàn khung) TRỪ hợp các mảnh bên dưới. */
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over, source-over, source-over, source-over;
  mask-composite: subtract, add, add, add, add, add, add, add, add;
}
html.has-wallpaper[data-shell-frame="seamless"]:is([data-material="acrylic"], [data-material="glass"]):not(.is-image-canvas) .app {
  background: transparent;
}
html.has-wallpaper[data-shell-frame="seamless"]:is([data-material="acrylic"], [data-material="glass"]):not(.is-image-canvas) :is(.nav-rail, .topbar) {
  background: var(--ui-chrome-band);
}
} /* @layer overrides */