/* Bố cục: thanh bên nhẹ (desktop) + vùng làm việc trên nền giấy chấm nhẹ; mobile: thanh trên + tab dưới.
   Tinh thần: bàn làm việc buổi sáng — tách cà phê, chậu cây, quyển sổ; màu dịu, nhiều khoảng thở. */
:root {
  --bg: #f4f4f1;
  --dots: #dfe0da;
  --surface: #ffffff;
  --surface-2: #f8f8f5;
  --sunken: #eeeeea;
  --line: #e5e5df;
  --line-strong: #cfd0c8;
  --fg: #1d2420;
  --fg-2: #414a45;
  --muted: #727a74;
  --accent: #3f7564;
  --accent-ink: #2f5e4f;
  --accent-soft: #e3f0ea;
  --on-accent: #ffffff;
  --ok: #1d7a4a;
  --ok-fill: #2e9a62;
  --ok-soft: #e1f3e8;
  --bad: #c8463f;
  --bad-soft: #fbe9e6;
  --warn: #a86a12;
  --warn-soft: #fbf0d6;
  --heat-1: #e9f1ee;
  --heat-2: #fbf1cf;
  --heat-3: #f9dfc4;
  --paper: #fffdf6;
  --rule: #e6e1d2;
  --margin: #e9b8b0;
  --art-1: #d6ecdf;
  --art-2: #93bfae;
  --art-3: #466f80;
  --deco-fill: color-mix(in srgb, var(--art-1) 55%, transparent);
  --shadow-1: 0 1px 2px rgba(29, 36, 32, .04), 0 2px 8px rgba(29, 36, 32, .04);
  --shadow-2: 0 18px 50px rgba(29, 36, 32, .16), 0 2px 8px rgba(29, 36, 32, .06);
  --font-display: 'Lexend', 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --font-hand: 'Patrick Hand', 'Be Vietnam Pro', 'Segoe Print', cursive;
  --r: 12px;
  --r-lg: 16px;
  --side: 236px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101311; --dots: #1c211e; --surface: #161a18; --surface-2: #1a1f1c; --sunken: #121513; --line: #252b27; --line-strong: #343c37;
    --fg: #e9eee9; --fg-2: #c3cbc5; --muted: #8b958e; --ok: #5fd096; --ok-fill: #3cae73; --ok-soft: #12261b; --bad: #f2776f; --bad-soft: #2e1715; --warn: #e8b04a; --warn-soft: #2b2311;
    --heat-1: #172520; --heat-2: #2b2712; --heat-3: #33230f; --paper: #1b1f1c; --rule: #2a302c; --margin: #5a3330;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 18px 50px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101311; --dots: #1c211e; --surface: #161a18; --surface-2: #1a1f1c; --sunken: #121513; --line: #252b27; --line-strong: #343c37;
  --fg: #e9eee9; --fg-2: #c3cbc5; --muted: #8b958e; --ok: #5fd096; --ok-fill: #3cae73; --ok-soft: #12261b; --bad: #f2776f; --bad-soft: #2e1715; --warn: #e8b04a; --warn-soft: #2b2311;
  --heat-1: #172520; --heat-2: #2b2712; --heat-3: #33230f; --paper: #1b1f1c; --rule: #2a302c; --margin: #5a3330;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 18px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(var(--dots) 1px, transparent 1.2px);
  background-size: 24px 24px;
  color: var(--fg); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hand { font-family: var(--font-hand); letter-spacing: .01em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.label { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 600; }

/* ---------- Trang trí ---------- */
.deco { color: color-mix(in srgb, var(--art-3) 70%, var(--muted)); flex: none; }
.deco .steam { animation: steam 3.2s ease-in-out infinite; transform-origin: center bottom; }
@keyframes steam { 0%, 100% { opacity: .35; transform: translateY(2px); } 50% { opacity: .9; transform: translateY(-3px); } }

/* ---------- Khung ---------- */
.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100%;
  background: radial-gradient(900px 480px at 105% -10%, color-mix(in srgb, var(--art-1) 30%, transparent), transparent 62%), radial-gradient(800px 480px at -8% 110%, color-mix(in srgb, var(--art-2) 14%, transparent), transparent 60%); background-attachment: fixed; }
.side { position: sticky; top: 0; height: 100vh; align-self: start; display: flex; flex-direction: column; gap: 18px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 14px 18px max(14px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(10px); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.brand-mark { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(140deg, var(--art-2), var(--art-3)); }
.brand-name { font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.15; }
.brand-name small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--muted); }
.side-date { margin: 0 6px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--art-1) 40%, var(--surface)), var(--surface)); border: 1px solid var(--line); }
.side-date .k { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 600; }
.side-date .v { font-family: var(--font-mono); font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.side-date .w { font-size: 12px; color: var(--fg-2); }
.side nav { display: grid; gap: 2px; }
.side nav a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; color: var(--fg-2); text-decoration: none; font-weight: 500; transition: background .15s, color .15s; }
.side nav a:hover { background: var(--sunken); color: var(--fg); }
.side nav a.on { background: var(--accent-soft); color: var(--accent-ink); }
.side nav a .badge { margin-left: auto; font-family: var(--font-mono); font-size: 11px; padding: 0 7px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.side-plant { margin: auto auto 0; opacity: .9; }
.side-foot { padding: 0 6px; }
.sync { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.sync i.ok { background: var(--ok-fill); box-shadow: 0 0 0 3px var(--ok-soft); }
.sync i.busy { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.sync i.bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.topbar, .tabs { display: none; }
.main { min-width: 0; padding-block: 30px 96px; padding-left: max(30px, env(safe-area-inset-left, 0px)); padding-right: max(30px, env(safe-area-inset-right, 0px)); }
.page { max-width: 1320px; margin: 0 auto; display: grid; gap: 20px; }
@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
    background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-block: 10px;
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--surface); }
  .main { padding-block: 18px calc(96px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .page { gap: 16px; }
  .tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
    padding: 6px max(4px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px)); }
  .tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px; border-radius: 10px; font-size: 10.5px; color: var(--muted); text-decoration: none; font-weight: 500; }
  .tabs a.on { color: var(--accent); }
}

/* ---------- Tiêu đề trang ---------- */
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; }
.ph-eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.ph h1 { font-size: 30px; line-height: 1.1; }
.ph h1 .soft { color: var(--muted); font-weight: 400; }
@media (max-width: 620px) { .ph h1 { font-size: 23px; } .ph-deco { width: 44px; height: 44px; } }

/* ---------- Thành phần ---------- */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); min-width: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.card-h h2 { font-size: 15.5px; }
.card-h .sub { font-size: 12.5px; color: var(--muted); }
.card-b { padding: 16px 18px; }
.count { font-family: var(--font-mono); font-weight: 500; font-size: 13px; padding: 2px 9px; border-radius: 999px; background: var(--sunken); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 500; white-space: nowrap; text-decoration: none; color: inherit; transition: background .15s, border-color .15s, transform .08s; }
.btn:hover { background: var(--sunken); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--sunken); }
.btn.danger { color: var(--bad); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn.icon { width: 34px; padding: 0; }
.btn.icon.sm { width: 28px; }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn.glass { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .7); color: var(--fg); }
.btn.solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--sunken); border: 1px solid var(--line); gap: 2px; flex-wrap: wrap; }
.seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; height: 28px; padding: 0 11px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--fg-2); }
.seg button:hover { color: var(--fg); }
.seg button.on { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-1); }
.inp { height: 34px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 9px; padding: 0 10px; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.inp.sm { height: 28px; font-size: 12.5px; }
.inp:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inp.bare { border-color: transparent; background: transparent; height: 30px; padding: 0 6px; width: 100%; }
.inp.bare:hover { border-color: var(--line); background: var(--surface-2); }
.inp.bare.ninp { border-color: var(--line-strong); background: var(--surface); height: 34px; padding: 0 10px; }
.search { position: relative; display: flex; align-items: center; }
.search svg { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.search .inp { padding-left: 32px; width: 100%; }
.datef { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); font-size: 12.5px; white-space: nowrap; min-width: 0; }
.datef:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.datef > svg { color: var(--muted); flex: none; margin-left: auto; }
.datef input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }
.datef input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }
.datef-wrap { display: inline-flex; align-items: stretch; gap: 4px; min-width: 0; max-width: 100%; }
.datef-wrap .datef { flex: 1; }
.df-lun { font-size: 11px; color: color-mix(in srgb, var(--accent) 75%, var(--fg-2)); }
.df-moon { flex: none; width: 34px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--accent); font-size: 15px; line-height: 1; }
.df-moon:hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: var(--accent); }
.lpk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lpk-res { display: grid; gap: 4px; margin-top: 14px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); }
.lpk-res b { font-size: 17px; }
.warn-t { color: var(--warn); font-weight: 600; }
.datef.bare { border-color: transparent; background: transparent; height: 30px; padding: 0 6px; }
.df-x { position: relative; z-index: 1; border: 0; background: transparent; color: var(--muted); padding: 2px; display: grid; border-radius: 4px; }
.df-x:hover { color: var(--bad); background: var(--bad-soft); }
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.prio i { width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); flex: none; }
.prio.Cao i { background: var(--bad); } .prio.Trung i { background: var(--warn); } .prio.Thấp i { background: var(--line-strong); }
.status { position: relative; display: inline-flex; align-items: center; }
.status select { appearance: none; -webkit-appearance: none; border: 1px solid transparent; border-radius: 999px; height: 26px; padding: 0 26px 0 10px; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--sunken); color: var(--fg-2); }
.status select:hover { border-color: var(--line-strong); }
.status svg { position: absolute; right: 8px; pointer-events: none; opacity: .7; }
.status.s-dang select { background: var(--accent-soft); color: var(--accent-ink); }
.status.s-hoan select { background: var(--ok-soft); color: var(--ok); }
.status.s-huy select { color: var(--muted); text-decoration: line-through; }
.tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--sunken); color: var(--fg-2); }
.tag.bad { background: var(--bad-soft); color: var(--bad); } .tag.warn { background: var(--warn-soft); color: var(--warn); } .tag.ok { background: var(--ok-soft); color: var(--ok); } .tag.info { background: var(--accent-soft); color: var(--accent-ink); }
.tagc { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; background: color-mix(in srgb, var(--tc) 13%, var(--surface)); color: color-mix(in srgb, var(--tc) 78%, var(--fg)); }
.tagc i { width: 6px; height: 6px; border-radius: 50%; background: var(--tc); }
button.tagc.off { background: transparent; border-color: var(--line-strong); color: var(--muted); }
button.tagc.off i { background: var(--line-strong); }
.tagrow { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.kindc { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--art-3) 14%, var(--surface)); color: color-mix(in srgb, var(--art-3) 80%, var(--fg)); }
.when { display: inline-flex; align-items: center; gap: 4px; }
.when svg { opacity: .65; }
.nodl { font-style: italic; }
.xi { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-family: var(--font-mono); font-size: 11px; }
.empty { text-align: center; padding: 34px 20px; color: var(--muted); display: grid; gap: 8px; justify-items: center; }
.empty b { color: var(--fg); font-family: var(--font-display); font-size: 16px; font-weight: 500; }
.bar { height: 8px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--art-2), var(--art-3)); transition: width .4s ease; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); align-items: center; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 4px; vertical-align: -1px; margin-right: 6px; }
.banner { padding: 11px 14px; border-radius: var(--r); background: var(--bad-soft); color: var(--bad); font-weight: 500; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpis.k5 { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
.kpis.k3 { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis.k5 .ring-card { grid-column: 1 / -1; } }
@media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kpis.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis.k3 .ring-card { grid-column: 1 / -1; } }
.kpi { padding: 14px 16px; display: grid; gap: 4px; overflow: hidden; }
.kpi .v { font-family: var(--font-mono); font-size: 28px; font-weight: 500; line-height: 1.05; letter-spacing: -.03em; }
.kpi .hint { font-size: 12px; color: var(--muted); }
.kpi::after { content: ""; position: absolute; right: -18px; top: -18px; width: 64px; height: 64px; border-radius: 50%; background: var(--line); opacity: .45; }
.kpi.bad .v { color: var(--bad); } .kpi.bad::after { background: var(--bad-soft); opacity: 1; }
.kpi.warn .v { color: var(--warn); } .kpi.warn::after { background: var(--warn-soft); opacity: 1; }
.kpi.ok .v { color: var(--ok); } .kpi.ok::after { background: var(--ok-soft); opacity: 1; }
.kpi.info .v { color: var(--accent-ink); } .kpi.info::after { background: var(--accent-soft); opacity: 1; }
.ring-card { display: flex; align-items: center; gap: 16px; padding: 14px 18px; }
.ring circle { transition: stroke-dashoffset .5s cubic-bezier(.3, .7, .2, 1); }
.ring text { font-family: var(--font-mono); font-weight: 500; fill: var(--fg); }

/* ---------- Hôm nay ---------- */
.hero { position: relative; overflow: hidden; border-radius: 24px; padding: 28px 30px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px;
  background: radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--art-1) 85%, var(--surface)), transparent 70%), radial-gradient(60% 110% at 100% 100%, color-mix(in srgb, var(--art-2) 55%, var(--surface)), transparent 70%), var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.hero-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--fg-2); opacity: .8; }
.hero h1 { font-size: 34px; line-height: 1.1; margin-top: 6px; font-weight: 400; }
.hero .line { margin-top: 8px; font-size: 14px; color: var(--fg-2); max-width: 60ch; }
.hero .line b { font-family: var(--font-mono); font-weight: 600; color: var(--fg); }
.hero .datef { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); }
.hero-cup { color: var(--art-3); margin-right: 10px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero .datef, :root:not([data-theme="light"]) .btn.glass { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--fg); } }
:root[data-theme="dark"] .hero .datef, :root[data-theme="dark"] .btn.glass { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--fg); }
@media (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr); padding: 20px; border-radius: 20px; } .hero h1 { font-size: 25px; } .hero-cup { position: absolute; right: -6px; top: 6px; width: 92px; height: 92px; opacity: .55; } }
.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.today-side { position: sticky; top: 20px; }
@media (max-width: 1100px) { .today-grid { grid-template-columns: minmax(0, 1fr); } .today-side { position: static; } }
.plan { background: linear-gradient(170deg, color-mix(in srgb, var(--art-1) 32%, var(--surface)), var(--surface) 60%); }
.plan-empty { padding: 16px 18px; color: var(--muted); font-size: 13px; display: flex; gap: 10px; align-items: center; }
.sunbtn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); display: grid; place-items: center; padding: 0; transition: all .15s; }
.sunbtn:hover { background: var(--sunken); color: var(--fg); }
.sunbtn.on { background: color-mix(in srgb, var(--warn-soft) 80%, transparent); color: var(--warn); }
.evicon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--art-2), var(--art-3)); }
.group-h { display: flex; align-items: center; gap: 8px; padding: 12px 18px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 600; }
.later-h { width: 100%; border: 0; border-top: 1px solid var(--line); background: var(--surface-2); cursor: pointer; text-align: left; padding: 11px 18px; }
.later-h:hover { color: var(--fg); }
.later-note { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
.task { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto auto; gap: 4px 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.task:hover { background: var(--surface-2); }
.tick { width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; color: transparent; padding: 0; transition: all .15s; flex: none; }
.tick:hover { border-color: var(--ok-fill); color: var(--ok-fill); }
.tick.on { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.tt { font-weight: 500; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); margin-top: 3px; align-items: center; }
.task.done .tt { color: var(--ok); text-decoration: line-through; }
.tstate { font-size: 12.5px; font-weight: 500; color: var(--fg-2); min-width: 0; overflow-wrap: anywhere; }
.tstate.urgent { color: var(--bad); font-weight: 600; }
.tstate.done { color: var(--ok); }
.carry { font-size: 11.5px; color: var(--warn); font-weight: 600; }
@media (max-width: 640px) {
  .task { grid-template-columns: 26px minmax(0, 1fr) auto; padding: 11px 14px; }
  .task .tstate { grid-column: 2; grid-row: 2; }
  .task .sunbtn { grid-column: 3; grid-row: 1; justify-self: end; }
  .task .status { grid-column: 3; grid-row: 2; }
}
.ev { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto 28px; gap: 6px 14px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--line); cursor: pointer; }
.card-h + .ev { border-top: 0; }
.ev:hover { background: var(--surface-2); }
.ev.done .tt { color: var(--ok); text-decoration: line-through; }
.evdate { display: grid; justify-items: center; line-height: 1.05; padding: 6px 0; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.evdate .m { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.evdate .d { font-family: var(--font-mono); font-size: 20px; font-weight: 500; }
.evdate .w { font-size: 10px; color: var(--muted); }
.ev.now .evdate { background: linear-gradient(160deg, var(--art-2), var(--art-3)); border-color: transparent; color: #fff; }
.ev.now .evdate .m, .ev.now .evdate .w { color: rgba(255, 255, 255, .85); }
.meetpill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); text-decoration: none; white-space: nowrap; }
.meetpill:hover { filter: brightness(.96); }
.meetpill.hot { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); animation: meetpulse 1.8s ease-out infinite; }
@keyframes meetpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.cfbadge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: var(--warn); background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); white-space: nowrap; cursor: help; }
.tstate.live { color: var(--ok); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.tstate.ended { color: var(--muted); }
.livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; animation: livedot 1.6s ease-in-out infinite; }
@keyframes livedot { 50% { opacity: .35; transform: scale(.8); } }
.ev.is-live { box-shadow: inset 3px 0 0 var(--ok); }
.di-live { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); vertical-align: 1px; }
.di.live-soon .di-live { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.di-place.di-cf { color: var(--warn); }
.trwrap { display: grid; gap: 0; min-width: 0; }
.trwrap .dwarn { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .meetpill.hot, .livedot { animation: none; } }
.ev-tz { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; color: var(--tz); min-width: 0; }
.ev-tz > svg { flex: none; }
.ev-tz > span { min-width: 0; overflow-wrap: anywhere; }
.ev .tstate { text-align: right; white-space: nowrap; }
.count.wide { font-family: var(--font-body); font-size: 12px; white-space: nowrap; }
.hero-acts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) { .ev { grid-template-columns: 50px minmax(0, 1fr) 28px; padding: 11px 14px; } .ev .tstate { grid-column: 2; grid-row: 2; justify-self: start; text-align: left; } .ev .tick { grid-column: 3; grid-row: 1 / span 2; } }

/* Thêm nhanh */
.qadd { display: grid; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.q-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.q-row .inp.grow { min-width: 180px; }
.qadd.compact { padding: 10px 0 0; background: none; border: 0; }
.dc-add.open .qadd.compact { padding: 8px 0 10px; }
.qadd.compact .seg button { padding: 0 8px; }
.toggle-plan { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--line-strong); background: transparent; font-size: 12px; font-weight: 600; color: var(--muted); }
.toggle-plan.on, .toggle-plan:hover { border-style: solid; border-color: transparent; background: var(--warn-soft); color: var(--warn); }

/* ---------- Sổ tay thói quen ---------- */
.notebook { position: relative; border-radius: 14px 18px 18px 14px; padding: 30px 20px 18px 54px; background: var(--paper); box-shadow: var(--shadow-1), 0 0 0 1px var(--line);
  background-image: linear-gradient(90deg, transparent 40px, var(--margin) 40px, var(--margin) 41.5px, transparent 41.5px), repeating-linear-gradient(to bottom, transparent 0 35px, var(--rule) 35px 36px);
  background-position: 0 0, 0 22px; }
.notebook::before { content: ""; position: absolute; left: 12px; top: 18px; bottom: 18px; width: 12px; background: radial-gradient(circle at 6px 6px, var(--bg) 4.2px, var(--line-strong) 4.8px, transparent 5.4px) 0 0 / 12px 30px repeat-y; }
.notebook::after { content: ""; position: absolute; right: 24px; top: -8px; width: 74px; height: 22px; transform: rotate(3deg); background: color-mix(in srgb, var(--art-2) 45%, transparent); border-radius: 2px; }
.nb-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 22px; line-height: 36px; color: var(--fg); }
.nb-score { color: var(--accent); }
.nb-list { list-style: none; margin: 0; padding: 0; }
.nb-list button { width: 100%; display: flex; align-items: center; gap: 10px; height: 36px; border: 0; background: transparent; text-align: left; padding: 0; font-size: 18px; color: var(--fg); }
.nb-list .hbox { width: 22px; height: 22px; border: 2px solid var(--fg-2); border-radius: 4px 6px 3px 5px; transform: rotate(-2deg); display: grid; place-items: center; color: transparent; flex: none; transition: color .15s; }
.nb-list button:hover .hbox { color: var(--line-strong); }
.nb-list button.on .hbox { color: var(--ok-fill); border-color: var(--ok-fill); }
.nb-list button.on .hand { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--ok-fill); text-decoration-thickness: 2px; }
.nb-empty { font-size: 18px; line-height: 36px; color: var(--muted); }
.nb-foot { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 10px; }
.nb-add { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 12px; }
.nb-add .inp { flex: 1 1 200px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.rt { display: grid; grid-template-columns: 20px 28px minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 36px; }
.rt.dragging { opacity: .35; }
.rt .grip { cursor: grab; color: var(--muted); display: grid; place-items: center; }
.rt .ix { color: var(--muted); font-size: 17px; text-align: right; }
.rt .inp.hand { font-size: 18px; }
@media (max-width: 640px) { .notebook { padding-left: 46px; } .rt { grid-template-columns: 20px minmax(0, 1fr) auto; } .rt .ix { display: none; } .rt .note { grid-column: 2 / -1; grid-row: 2; } }
/* Bảng tick kiểu giấy ô li */
.board { position: relative; border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); padding: 14px 10px;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 18px 18px; }
.board-scroll { overflow-x: auto; }
.hb-table { border-collapse: separate; border-spacing: 3px; font-size: 12.5px; }
.hb-table th { font-size: 10.5px; font-weight: 600; color: var(--muted); text-align: center; padding: 2px 0 4px; line-height: 1.2; }
.hb-table th .d { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-2); }
.hb-table th.we, .hb-table th.we .d { color: var(--warn); }
.hb-table th.td .d { background: var(--accent); color: var(--on-accent); border-radius: 5px; }
.hb-table .nm { position: sticky; left: 0; z-index: 1; background: var(--paper); text-align: left; padding: 0 12px 0 6px; min-width: 190px; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; }
.hb-table th.nm { font-size: 17px; color: var(--fg-2); }
.hb-table td.c { width: 27px; min-width: 27px; height: 27px; border-radius: 6px; text-align: center; cursor: pointer; color: var(--ok-fill); padding: 0; border: 1.5px solid color-mix(in srgb, var(--fg-2) 35%, transparent); background: color-mix(in srgb, var(--paper) 70%, transparent); transition: transform .08s, background .12s; }
.hb-table td.c:hover { background: var(--accent-soft); }
.hb-table td.c:active { transform: scale(.9); }
.hb-table td.c svg { display: block; margin: auto; }
.hb-table td.c.on { background: var(--ok-soft); border-color: var(--ok-fill); }
.hb-table td.c.td { box-shadow: 0 0 0 2px var(--accent); }
.hb-table td.c.void { border: 0; background: repeating-linear-gradient(45deg, var(--rule) 0 2px, transparent 2px 5px); cursor: not-allowed; }
.hb-table td.c.lock { border-style: dashed; cursor: not-allowed; background: transparent; }
.hb-table td.c.na { border-color: transparent; background: transparent; cursor: not-allowed; }
.hb-table .pc { padding-left: 8px; }
.hb-table .pcell { height: 22px; border-radius: 5px; font-family: var(--font-mono); font-size: 9.5px; text-align: center; font-weight: 600; padding: 0; }
.hb-table tr.dayrow td { padding-top: 6px; }
.heatt td.h { text-align: center; font-size: 12px; font-weight: 500; min-width: 46px; height: 30px; border-radius: 6px; }
.dbar { position: relative; width: 104px; height: 22px; border-radius: 6px; background: var(--sunken); overflow: hidden; }
.dbar i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--ok-fill) 35%, transparent); border-right: 2px solid var(--ok-fill); }
.dbar span { position: relative; display: block; padding-left: 7px; line-height: 22px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; }
.lv-bad { background: var(--bad-soft); color: var(--bad); } .lv-mid { background: var(--warn-soft); color: var(--warn); } .lv-ok { background: var(--ok-soft); color: var(--ok); }

/* ---------- Bảng việc ---------- */
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
.tbl th, .tbl td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th { position: sticky; top: 0; z-index: 1; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; background: var(--surface-2); }
.tbl th.sort { cursor: pointer; user-select: none; } .tbl th.sort:hover { color: var(--fg); } .tbl th.sort.on { color: var(--accent); }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tr.sel td { background: var(--accent-soft); }
.tbl td.tcell { cursor: pointer; min-width: 260px; }
.tbl .tname { font-weight: 500; overflow-wrap: break-word; word-break: normal; flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.tc-main { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.tc-main .kindc { flex: none; margin-top: -1px; }
.tc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; min-width: 0; }
.tc-sub .xi.place { max-width: 100%; }
.tbl tr.done .tname { text-decoration: line-through; color: var(--ok); }
.tbl tr.cancel .tname { color: var(--muted); text-decoration: line-through; }
.tbl td.num { text-align: right; }
.tbl td.late { color: var(--bad); font-weight: 700; }
.pager { justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line); position: sticky; left: 0; }
.bulk { position: sticky; top: 8px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r); background: var(--fg); color: var(--bg); box-shadow: var(--shadow-2); }
.bulk .btn { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 30%, transparent); }
.bulk .btn:hover { background: color-mix(in srgb, var(--bg) 14%, transparent); }
.bulk .btn.danger { color: #ff9c96; }

/* ---------- Lịch ---------- */
.overdue-box summary { padding: 12px 18px; cursor: pointer; display: flex; gap: 8px; align-items: center; font-weight: 500; }
.overdue-box .dayitems { padding: 0 12px 12px; }
.agenda3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .agenda3 { grid-template-columns: minmax(0, 1fr); } }
.daycard { padding: 0 0 12px; overflow: hidden; }
.daycard.is-today { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-1); }
.dc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 18px 10px; }
.daycard.is-today .dc-head { background: linear-gradient(170deg, color-mix(in srgb, var(--art-1) 45%, var(--surface)), transparent); }
.dc-lab { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-weight: 600; }
.dc-date { display: flex; align-items: baseline; gap: 10px; }
.dc-date .mono { font-size: 34px; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.dc-date span:last-child { color: var(--fg-2); font-size: 13px; }
.dc-count { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--sunken); white-space: nowrap; }
.dc-count.h-light, .tag.hh-light { background: var(--heat-1); } .dc-count.h-busy, .tag.hh-busy { background: var(--heat-2); color: var(--warn); } .dc-count.h-overload, .tag.hh-overload { background: var(--heat-3); color: var(--bad); }
.dc-add { padding: 8px 14px 0; }
.dadd-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border-radius: 12px; border: 1.5px dashed var(--line-strong); background: transparent; color: var(--fg-2); font-weight: 600; font-size: 13.5px; transition: background .15s, border-color .15s, color .15s; }
.dadd-btn:hover, .dadd-btn:focus-visible { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.dc-add.open { margin: 8px 12px 0; padding: 4px 12px 2px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); animation: pop .18s ease-out; }
.dadd-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; font-size: 12px; font-weight: 650; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.dadd-h > span { display: inline-flex; align-items: center; gap: 6px; }
.dayitems { display: grid; gap: 10px; padding: 0 12px; }
.dayitems.big { min-height: 60px; }
.di-sec { display: grid; gap: 2px; }
.di-h { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.di-h.ev-h { color: color-mix(in srgb, var(--art-3) 80%, var(--fg)); }
.di { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 8px; border-radius: 9px; text-align: left; font-size: 13.5px; min-width: 0; transition: background .12s; }
.di:hover { background: var(--surface-2); }
.di-t { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.di-time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.di.ev-i { background: color-mix(in srgb, var(--art-1) 30%, transparent); border-left: 3px solid var(--art-3); border-radius: 4px 9px 9px 4px; }
.di.ev-i .di-time { color: color-mix(in srgb, var(--art-3) 85%, var(--fg)); font-weight: 600; min-width: 46px; }
.di.ev-i:hover { background: color-mix(in srgb, var(--art-1) 50%, transparent); }
.di-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line-strong); }
.di-dot.p-Cao { background: var(--bad); } .di-dot.p-Trung { background: var(--warn); }
.di.ok .di-t { color: var(--ok); text-decoration: line-through; }
.di.ok { color: var(--ok); }
.di.late .di-t { color: var(--bad); font-weight: 600; }
.di.late { color: var(--bad); }
.di-empty { padding: 14px 8px; color: var(--muted); font-size: 13px; font-style: italic; }
.di-more { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 0 6px; padding: 4px 10px; border-radius: 999px; border: 0; background: var(--sunken); color: var(--fg-2); font-size: 12.5px; font-weight: 650; }
.di-more:hover { background: var(--accent-soft); color: var(--accent); }
.arow2 { border-top: 1px solid var(--line); }
.ar-h { width: 100%; display: grid; grid-template-columns: 90px minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; padding: 11px 18px; border: 0; background: transparent; text-align: left; }
.ar-h:hover { background: var(--surface-2); }
.ar-date { display: flex; gap: 8px; align-items: baseline; font-weight: 500; }
.ar-date .mono { font-size: 15px; }
.ar-peek { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; overflow: hidden; max-height: 26px; }
.peek { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--sunken); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.peek.ev-p { background: color-mix(in srgb, var(--art-1) 40%, transparent); color: color-mix(in srgb, var(--art-3) 85%, var(--fg)); }
.peek.ok { text-decoration: line-through; color: var(--ok); }
.ar-n { display: flex; gap: 4px; }
.ar-b { padding: 0 6px 12px; }
@media (max-width: 640px) { .ar-h { grid-template-columns: 70px minmax(0, 1fr) 18px; padding: 11px 14px; } .ar-peek { display: none; } .ar-n { justify-self: end; } }
.mgrid-h { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.mgrid-h div { padding: 9px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.mgrid-h .we { color: var(--bad); }
.mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); animation: fade .2s ease-out; }
@keyframes fade { from { opacity: .4; } }
.mcell { min-height: 112px; padding: 6px 7px 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: box-shadow .15s; }
.mcell:nth-child(7n) { border-right: 0; }
.mcell:hover { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.mcell.h-light { background: var(--heat-1); } .mcell.h-busy { background: var(--heat-2); } .mcell.h-overload { background: var(--heat-3); }
.mcell.out { background: var(--surface-2); } .mcell.out .mc-n { color: var(--muted); opacity: .6; }
.mcell.drop { box-shadow: inset 0 0 0 2px var(--accent); }
.mc-top { display: flex; justify-content: space-between; align-items: center; }
.mc-n { font-family: var(--font-mono); font-size: 13px; font-weight: 500; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.mcell.today .mc-n { background: var(--accent); color: var(--on-accent); }
.mc-late { font-size: 10.5px; font-weight: 700; color: var(--bad); }
.mc-cnt { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.mc-items { display: grid; gap: 2px; min-width: 0; }
.mc-i { font-size: 11.5px; line-height: 1.45; padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--surface) 75%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-i.is-ev { background: color-mix(in srgb, var(--art-1) 60%, transparent); color: color-mix(in srgb, var(--art-3) 85%, var(--fg)); border-left: 2px solid var(--art-3); }
.mc-i.ok { text-decoration: line-through; color: var(--ok); }
.mc-more { font-size: 11px; color: var(--accent); font-weight: 600; padding-left: 6px; }
.mgrid.compact { gap: 4px; padding: 8px; animation: none; }
.mday { height: 52px; border-radius: 11px; border: 0; background: var(--surface-2); display: grid; justify-items: center; align-content: center; gap: 4px; padding: 0; }
.mday.h-light { background: var(--heat-1); } .mday.h-busy { background: var(--heat-2); } .mday.h-overload { background: var(--heat-3); }
.mday.out { opacity: .4; }
.mday .n { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.mday.today { background: var(--accent); color: var(--on-accent); }
.dots { display: flex; gap: 3px; height: 5px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--fg-2); opacity: .5; }
.dots i.ev { background: var(--art-3); opacity: 1; } .dots i.late { background: var(--bad); opacity: 1; } .dots i.ok { background: var(--ok-fill); opacity: 1; }
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(15, 20, 17, .38); display: grid; place-items: center; padding: 16px; animation: fade .15s ease-out; }
.scrim.top { z-index: 80; }
.daypop { width: min(560px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-2); border: 1px solid var(--line); overflow: hidden; animation: pop .2s ease-out; }
.daypop-b { flex: 1; overflow-y: auto; padding-bottom: 10px; }
.daypop-f { border-top: 1px solid var(--line); padding: 2px 4px 14px; background: var(--surface); }
@media (max-width: 640px) { .scrim:not(.top) { align-items: end; padding: 0; } .daypop { width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } }

/* ---------- Bảng chi tiết việc ---------- */
.sheet-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(15, 20, 17, .32); opacity: 0; pointer-events: none; transition: opacity .25s; }
.sheet-scrim.open { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; z-index: 61; top: 0; right: 0; bottom: 0; width: min(500px, 100%); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-2);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateX(105%); visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility .3s; }
.sheet.open { transform: none; visibility: visible; }
@media (max-width: 640px) { .sheet { top: auto; left: 0; width: 100%; height: 92vh; border-radius: 22px 22px 0 0; border-left: 0; transform: translateY(105%); } }
.sheet-band { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 16px 20px 18px; border-bottom: 1px solid var(--line);
  background: radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--art-1) 70%, var(--surface)), transparent 70%), var(--surface); }
.sheet.is-ev .sheet-band { background: radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--art-2) 45%, var(--surface)), transparent 70%), var(--surface); }
.sheet-deco { position: absolute; right: 18px; bottom: -6px; opacity: .55; pointer-events: none; }
.sheet-meta { position: relative; padding-right: 72px; min-width: 0; }
.sheet-meta .tstate { white-space: normal; min-width: 0; line-height: 1.4; }
.sheet-title-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding-right: 70px; }
.sheet-title-row .tick { margin-top: 6px; width: 24px; height: 24px; }
.sheet-title { width: 100%; resize: none; border: 1px solid transparent; background: transparent; font-family: var(--font-display); font-size: 22px; line-height: 1.3; font-weight: 500; padding: 2px 6px; border-radius: 8px; overflow: hidden; }
.sheet-title:hover { border-color: var(--line); }
.sheet-title.done { color: var(--ok); text-decoration: line-through; }
.sheet-body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; display: grid; gap: 4px; align-content: start; }
.meet-big { height: 44px; margin-top: 10px; font-size: 14px; }
.sec { padding: 14px 0; border-bottom: 1px dashed var(--line); display: grid; gap: 10px; }
.sec:last-child { border-bottom: 0; }
.sec-h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; color: var(--muted); }
.kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.kv > label { font-size: 13px; color: var(--fg-2); }
@media (max-width: 420px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 4px; } .kv > label { margin-top: 6px; } }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.facts > div { padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); display: grid; }
.facts .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.facts .v { font-size: 20px; font-weight: 500; }
.facts .v small { font-size: 11px; color: var(--muted); font-family: var(--font-body); }
.facts .bad { background: var(--bad-soft); border-color: transparent; } .facts .bad .v { color: var(--bad); }
.note-area { width: 100%; resize: none; min-height: 84px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; line-height: 1.55; overflow: hidden;
  background: var(--paper); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.55em - 1px), var(--rule) calc(1.55em - 1px) 1.55em); background-attachment: local; background-position: 0 10px; }
.links { display: grid; gap: 6px; }
.linkrow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.linkrow .lic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.linkrow a { display: grid; min-width: 0; text-decoration: none; color: var(--fg); }
.linkrow a b { font-weight: 600; font-size: 13.5px; }
.linkrow a .mono { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linkrow a:hover b { color: var(--accent); text-decoration: underline; }
.linkadd { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 6px; }
@media (max-width: 520px) { .linkadd { grid-template-columns: minmax(0, 1fr); } }
.sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }

/* ---------- Báo cáo ---------- */
.rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .rgrid { grid-template-columns: minmax(0, 1fr); } }
.chart text { fill: var(--muted); font-family: var(--font-mono); font-size: 10.5px; }
.chart .gl { stroke: var(--line); stroke-dasharray: 2 4; }
.chart .tl { stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 6 4; }
.chart .vl { fill: var(--fg-2); font-weight: 600; }
.hbars { display: grid; gap: 10px; }
.hb { display: grid; grid-template-columns: 120px minmax(0, 1fr) 110px; gap: 10px; align-items: center; font-size: 13px; }
.hb-l { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-l i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hb-t { height: 12px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.hb-f { display: block; height: 100%; border-radius: 999px; transition: width .4s; }
.hb-v { font-size: 13px; }
@media (max-width: 520px) { .hb { grid-template-columns: 90px minmax(0, 1fr) 90px; } }
.ahead { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; }
.ah { display: grid; justify-items: center; gap: 4px; border: 0; background: transparent; padding: 4px 0; border-radius: 8px; }
.ah:hover { background: var(--surface-2); }
.ah-bar { position: relative; width: 70%; height: 120px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 6px; background: var(--sunken); overflow: hidden; }
.ah-bar i { display: block; width: 100%; }
.ah-bar .t { background: var(--accent); } .ah-bar .e { background: var(--art-3); }
.ah-n { font-size: 11px; color: var(--fg-2); min-height: 14px; }
.ah-d { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.25; }
.ah.now .ah-d { color: var(--accent); font-weight: 700; }

/* ---------- Thiết lập ---------- */
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: start; }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: 12px; font-weight: 600; color: var(--fg-2); }
.field .hint { font-size: 11.5px; color: var(--muted); }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.skin { border: 2px solid var(--line); border-radius: 14px; padding: 0; overflow: hidden; background: var(--surface); text-align: left; transition: transform .15s, border-color .15s; }
.skin:hover { transform: translateY(-2px); }
.skin.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.skin .sw { height: 62px; }
.skin .nm { padding: 8px 10px; font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.tagedit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 9px; }
.tagedit:hover { background: var(--surface-2); }
.palette { display: flex; flex-wrap: wrap; gap: 5px; }
.palette button { width: 20px; height: 20px; border-radius: 6px; border: 2px solid transparent; padding: 0; }
.palette button.on { border-color: var(--fg); }
@media (max-width: 640px) { .tagedit { grid-template-columns: auto minmax(0, 1fr) auto; } .tagedit .palette { grid-column: 1 / -1; } }
.guide { display: grid; gap: 10px; max-width: 76ch; font-size: 13.5px; color: var(--fg-2); }

/* ---------- Khóa, toast, hộp thoại ---------- */
.lockscreen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; overflow: auto;
  background: radial-gradient(60% 70% at 15% 15%, var(--art-1), transparent 70%), radial-gradient(60% 70% at 90% 90%, color-mix(in srgb, var(--art-2) 60%, transparent), transparent 70%), var(--bg); }
.lock-card { position: relative; width: min(380px, 100%); padding: 28px; border-radius: 24px; display: grid; gap: 14px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(16px); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.lock-cup { position: absolute; right: 18px; top: 10px; opacity: .7; }
.lock-card h1 { font-size: 24px; }
.lock-card .err { color: var(--bad); font-size: 13px; font-weight: 500; }
.lock-card label.chk { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fg-2); }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 500; box-shadow: var(--shadow-2); max-width: calc(100% - 32px); display: flex; gap: 8px; align-items: center; }
@media (max-width: 960px) { .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
.dialog { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; width: min(420px, 100%); box-shadow: var(--shadow-2); display: grid; gap: 14px; animation: pop .18s ease-out; }
.dialog h3 { font-size: 17px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.board, .notebook { min-width: 0; }
.nb-list button .hand { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-bar .e { background: var(--art-2); }

/* =====================================================================
   NÚT BẤM: có chiều sâu, có biểu tượng màu, phân biệt rõ theo vai trò
   ===================================================================== */
.btn { background: linear-gradient(180deg, var(--surface), var(--surface-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(29, 36, 32, .06); }
.btn svg { color: var(--accent); flex: none; }
.btn:hover { background: linear-gradient(180deg, var(--surface-2), var(--sunken)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line-strong)); }
.btn.primary { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 55%, var(--accent-ink)); border-color: var(--accent-ink); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn.primary svg, .btn.dangerbtn svg { color: currentColor; }
.btn.primary:hover { filter: brightness(1.06); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 55%, var(--accent-ink)); }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost svg { color: currentColor; }
.btn.ghost:hover { background: var(--sunken); border-color: transparent; }
.btn.danger svg { color: var(--bad); }
.btn.solid { background: var(--fg); box-shadow: none; } .btn.solid svg { color: var(--bg); }
.btn.glass { box-shadow: none; } .btn.glass svg { color: var(--fg-2); }
.btn.tone { background: color-mix(in srgb, var(--tc) 11%, var(--surface)); color: color-mix(in srgb, var(--tc) 82%, var(--fg)); border-color: color-mix(in srgb, var(--tc) 28%, transparent); box-shadow: none; font-weight: 600; }
.btn.tone svg { color: var(--tc); }
.btn.tone:hover { background: color-mix(in srgb, var(--tc) 18%, var(--surface)); border-color: color-mix(in srgb, var(--tc) 45%, transparent); }
.btn.dangerbtn { background: linear-gradient(160deg, #e0605a, #c8463f 60%, #a83631); border-color: #a83631; color: #fff; box-shadow: 0 4px 12px rgba(200, 70, 63, .3); }
.btn.dangerbtn:disabled { filter: grayscale(.6); }
.seg button svg { color: var(--muted); }
.seg button.on svg { color: var(--accent); }
.bulk .btn { box-shadow: none; } .bulk .btn svg { color: currentColor; }
.btn:not(.primary):not(.dangerbtn):disabled:hover { background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.btn.primary:disabled:hover { filter: none; transform: none; }

/* Thẻ công cụ có minh họa */
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tool { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--tc) 22%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 9%, var(--surface)), var(--surface) 70%);
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.tool:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--tc) 16%, transparent); border-color: color-mix(in srgb, var(--tc) 45%, var(--line)); }
.tool-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 75%, #fff), var(--tc)); box-shadow: 0 6px 14px color-mix(in srgb, var(--tc) 30%, transparent); }
.tool-tx { display: grid; gap: 2px; min-width: 0; }
.tool-tx b { font-weight: 600; font-size: 14px; }
.tool-tx span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.tool-go { color: color-mix(in srgb, var(--tc) 70%, var(--muted)); }
.danger-card { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); background: linear-gradient(170deg, color-mix(in srgb, var(--bad-soft) 60%, var(--surface)), var(--surface) 50%); }
.danger-card .card-h { border-bottom-color: color-mix(in srgb, var(--bad) 20%, var(--line)); }
.dz-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--bad); color: #fff; }

/* Hộp thoại công cụ */
.modal { width: min(560px, 100%); max-height: min(90vh, 820px); display: flex; flex-direction: column; background: var(--surface); border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow-2); overflow: hidden; animation: pop .2s ease-out; }
.modal.wide { width: min(880px, 100%); }
.modal-h { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 12%, var(--surface)), var(--surface) 70%); }
.modal-h h3 { font-size: 18px; }
.modal-b { padding: 16px 18px; overflow-y: auto; display: grid; gap: 16px; }
.modal-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 640px) { .modal { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } }
.kindpick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kp { display: grid; gap: 4px; justify-items: start; padding: 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); text-align: left; color: var(--muted); transition: all .15s; }
.kp b { color: var(--fg); font-size: 14px; }
.kp small { font-size: 11.5px; line-height: 1.35; }
.kp:hover { border-color: var(--line-strong); }
.kp.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
@media (max-width: 520px) { .kindpick { grid-template-columns: 1fr; } .kp { grid-template-columns: 26px 1fr; align-items: center; } .kp small { grid-column: 2; } }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .opts { grid-template-columns: 1fr; } }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; }
.opt.on { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.opt span { display: grid; } .opt b { font-weight: 600; font-size: 13px; } .opt small { color: var(--muted); font-size: 11.5px; }
.opt input { margin-top: 2px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 12px; }
.steps li { counter-increment: st; position: relative; padding: 0 0 0 40px; font-size: 13.5px; color: var(--fg-2); }
.steps li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 13px; background: var(--sunken); color: var(--fg-2); border: 1px solid var(--line-strong); }
.steps li.done::before { content: "✓"; background: var(--ok-fill); color: #fff; border-color: var(--ok-fill); }
.steps li b { color: var(--fg); }
.chipbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: 12.5px; color: var(--fg-2); }
.chipbtn.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.preview { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--surface-2); max-height: 360px; overflow: auto; }
.preview .tbl th { background: var(--surface-2); }
.dz-warn { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 14px; background: var(--bad-soft); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
.dz-warn b { color: var(--bad); }
.dz-warn p { margin-top: 4px; font-size: 12.5px; color: color-mix(in srgb, var(--bad) 70%, var(--fg)); }
.kbd { padding: 1px 7px; border-radius: 6px; background: var(--fg); color: var(--bg); font-size: 12px; }
.preview .tbl .tname { font-size: 13px; } .preview .tbl td, .preview .tbl th { padding: 7px 8px; }

/* ---------- Âm lịch ---------- */
.side-lunar { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--fg-2); display: flex; align-items: center; gap: 6px; line-height: 1.35; }
.side-lunar svg, .hero-lunar svg, .dc-lunar svg, .lunar-note svg { flex: none; color: var(--accent); }
.hero-lunar { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--fg-2); background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); }
.dc-lunar { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; color: var(--muted); }
.mc-nw { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.mc-lunar { font-family: var(--font-mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.mc-lunar.first { color: var(--accent); font-weight: 600; }
.mcell.today .mc-lunar { color: var(--accent); }
.mday { position: relative; gap: 2px; }
.mday .ln { font-family: var(--font-mono); font-size: 9px; line-height: 1; color: var(--muted); }
.mday .ln.first { color: var(--accent); font-weight: 600; }
.mday.today .ln { color: var(--on-accent); opacity: .85; }
.lunar-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: -2px 0 4px; font-size: 12.5px; color: var(--fg-2); }
.langs { gap: 6px; }
.langs .chipbtn b { font-size: 10.5px; opacity: .7; }

/* =====================================================================
   LẶP LẠI & KÉO DÀI NHIỀU NGÀY
   ===================================================================== */
.scrim.mdl { z-index: 70; }
.repsel { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 0 10px; border-radius: 999px; border: 1px dashed var(--line-strong); color: var(--fg-2); background: transparent; max-width: 100%; }
.repsel select { border: 0; background: transparent; font: inherit; font-size: 12.5px; color: inherit; max-width: 220px; padding-right: 4px; cursor: pointer; }
.repsel select:focus { outline: none; }
.repsel.on { border-style: solid; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-ink); font-weight: 600; }
.seg.rp-mode { justify-self: start; }
.rp-secs { display: grid; gap: 12px; margin-top: 14px; }
.rp-sec { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.rp-sh { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-2); }
.rp-sh small { margin-left: auto; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.rp-no { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 11.5px; letter-spacing: 0; flex: none; }
.rp-sb { padding: 12px 14px; display: grid; gap: 10px; min-width: 0; }
.rp-opts { display: grid; gap: 8px; }
.rp-opt { border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.rp-opt:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.rp-opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.rp-ol { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; font-size: 14px; font-weight: 500; }
.rp-opt.on .rp-ol { font-weight: 650; color: color-mix(in srgb, var(--accent) 70%, var(--fg)); }
.rp-ol input { accent-color: var(--accent); width: 17px; height: 17px; flex: none; margin: 0; }
.rp-od { display: grid; gap: 10px; margin: 0 12px 12px 39px; padding: 12px 0 0; border-top: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--line)); min-width: 0; }
.rp-quick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
@media (max-width: 560px) { .rp-od { margin-left: 12px; } .rp-sb { padding: 10px; } }
.rp-grid { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px 14px; align-items: center; }
.rp-l { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.inp.num { width: 70px; text-align: center; font-family: var(--font-mono); }
.wdpick { gap: 6px; }
.wd { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: 12.5px; color: var(--fg-2); transition: all .15s; }
.wd.we { color: var(--bad); }
.wd.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 4px 12px -4px var(--accent); }
.rp-opts { display: grid; gap: 6px; }
.rp-days { display: grid; gap: 10px; min-width: 0; }
.dgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; max-width: 380px; }
.dgrid.lunar { grid-template-columns: repeat(10, minmax(0, 1fr)); max-width: 460px; }
.dg { height: 34px; min-width: 0; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); font: 600 13px var(--font-mono); transition: background .12s, color .12s, border-color .12s; }
.dg:hover { border-color: var(--accent); }
.dg.key { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.dg.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dg.wide { grid-column: span 4; font-family: var(--font-body); font-size: 12.5px; }
.lpre { gap: 6px; }
.rp-dl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.rp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.rp-chip small { color: var(--muted); font-size: 11px; }
.rp-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); display: grid; place-items: center; }
.rp-chip button:hover { background: var(--sunken); color: var(--bad); }
@media (max-width: 560px) { .dgrid.lunar { grid-template-columns: repeat(6, minmax(0, 1fr)); } .rp-grid { grid-template-columns: minmax(0, 1fr); gap: 6px 0; } }
.radio { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; font-size: 13.5px; }
.radio.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.radio input { accent-color: var(--accent); }
.rp-preview { border-radius: 14px; padding: 12px 14px; background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface-2)); border: 1px solid var(--line); }
.rp-ph { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.rp-dates { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-d { display: grid; justify-items: center; gap: 1px; min-width: 62px; padding: 7px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.rp-d small { font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.rp-d.we small { color: var(--bad); }
.rp-d b { font-size: 14px; }
.rp-d i { font-style: normal; font-size: 10px; color: var(--muted); }
.rp-d.more { align-content: center; color: var(--muted); }
.rp-sum { flex: 1; min-width: 200px; }
.bad-t { color: var(--bad); }
@media (max-width: 560px) { .rp-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; } .rp-l { margin-top: 8px; } .wd { width: 36px; height: 36px; } }
.xi.rep { color: #6b4fe0; font-family: var(--font-mono); font-size: 11px; gap: 3px; }
.repbtn { margin-top: 10px; border-style: dashed; color: var(--accent-ink); }
.series-card { display: grid; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface) 65%); }
.sc-top { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; }
.sc-top b { display: block; font-size: 14px; line-height: 1.35; }
.sc-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.sc-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.sc-d { flex: none; display: grid; justify-items: center; min-width: 54px; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); }
.sc-d small { font-size: 10px; font-weight: 600; color: var(--muted); }
.sc-d b { font-size: 12.5px; }
.sc-d.cur { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .sc-d.cur small { color: rgba(255, 255, 255, .8); }
.sc-d.ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); } .sc-d.ok b::after { content: " ✓"; color: var(--ok); }
.sc-d.late { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); color: var(--bad); }
.sc-act { gap: 6px; flex-wrap: wrap; }
.sc-hint { margin: 0; }
.dopts { display: grid; gap: 8px; }
.dopt { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer; }
.dopt span { display: grid; gap: 2px; } .dopt b { font-size: 13.5px; } .dopt small { color: var(--muted); font-size: 12px; }
.dopt.on { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad-soft) 70%, transparent); }
.dopt input { margin-top: 3px; accent-color: var(--bad); }
.pick-list { display: grid; gap: 4px; max-height: 300px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.pk { display: grid; grid-template-columns: 20px 96px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.pk.on { background: var(--bad-soft); } .pk.past { opacity: .7; }
.pk input { accent-color: var(--bad); }
.wkpick { gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.focusbtn { margin-left: auto; border-color: color-mix(in srgb, #e0563b 40%, var(--line)); color: #c2452c; }

/* =====================================================================
   ĐỒNG HỒ TẬP TRUNG
   ===================================================================== */
/* Nút nổi: bám mép trái/phải, kéo được; --ffy = khoảng cách thêm tính từ đáy */
.ffab { --fb: 20px; --fc: #e0603f; --fc2: #c94a2c; position: fixed; z-index: 45; bottom: calc(var(--fb) + var(--ffy, 0px)); right: 18px; display: inline-flex; align-items: center;
  touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .28s cubic-bezier(.3,.7,.3,1), opacity .25s, left .2s, right .2s; }
.ffab.side-l { right: auto; left: 18px; }
.ffab.ph-short, .ffab.ph-long { --fc: #2f9a86; --fc2: #237a6b; }
.ffab.drag { transition: none; cursor: grabbing; }
.ffab.drag > * { pointer-events: none; }
/* Chưa chạy: nút tròn nhỏ, nền giấy, không lấn át nội dung */
.ffab-idle { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--fc) 70%, transparent);
  background: radial-gradient(circle at 35% 30%, var(--surface), color-mix(in srgb, var(--fc) 16%, var(--surface)));
  color: var(--fc); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--fc) 75%, transparent), 0 2px 5px rgba(0,0,0,.1); transition: transform .2s, box-shadow .2s, background .2s; }
.ffab-idle:hover { transform: translateY(-2px); background: var(--fc); color: #fff; box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--fc) 85%, transparent); }
/* Đang chạy / tạm dừng: viên thuốc màu, vòng tiến độ tách riêng khỏi chữ */
.ffab.active { height: 50px; padding: 4px 6px 4px 4px; gap: 2px; border-radius: 999px; background: linear-gradient(145deg, var(--fc), var(--fc2)); color: #fff;
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--fc) 90%, transparent), 0 2px 6px rgba(0,0,0,.12); }
.ffab.side-l.active { flex-direction: row; }
.ffab-ring { position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; transition: background .2s; }
.ffab-ring:hover { background: rgba(255,255,255,.24); }
.ffab-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ffab-track { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 2.6; }
.ffab-prog { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; transition: stroke-dashoffset .5s linear; }
.ffab-pp { width: 13px; height: 13px; display: block; }
.ffab-pp svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.ffab-txt { border: 0; background: none; color: inherit; padding: 0 10px 0 7px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.05; max-width: 150px; overflow: hidden;
  transition: max-width .28s cubic-bezier(.3,.7,.3,1), padding .28s, opacity .2s; }
.ffab-txt b { font-size: 16px; font-weight: 650; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.ffab-txt small { font-size: 10.5px; font-weight: 600; opacity: .82; letter-spacing: .03em; white-space: nowrap; margin-top: 2px; }
.ffab.paused { --fc: #8a8f98; --fc2: #6c717a; }
.ffab.paused .ffab-txt b { animation: ffab-blink 1.6s ease-in-out infinite; }
@keyframes ffab-blink { 50% { opacity: .45; } }
.ffab-bell { position: absolute; top: -4px; right: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--fc); box-shadow: 0 1px 4px rgba(0,0,0,.2); pointer-events: none; }
.ffab.side-l .ffab-bell { right: auto; left: -3px; }
.ffab-bell.ring { animation: ffab-ring .5s ease-in-out 3; }
@keyframes ffab-ring { 25% { transform: rotate(-16deg); } 75% { transform: rotate(16deg); } }
/* Khi cuộn xuống: thu gọn để lộ nội dung bên dưới */
.ffab.tuck:not(.active) { opacity: .85; transform: translateX(calc(100% - 24px)); }
.ffab.side-l.tuck:not(.active) { transform: translateX(calc(-100% + 24px)); }
.ffab.tuck.active { opacity: .92; }
.ffab.tuck .ffab-txt { max-width: 0; padding: 0; opacity: 0; }
@media (max-width: 960px) { .ffab { --fb: calc(78px + env(safe-area-inset-bottom, 0px)); right: 12px; } .ffab.side-l { left: 12px; } .ffab-idle { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .ffab, .ffab-txt { transition: none; } .ffab.paused .ffab-txt b { animation: none; } }

.focus-ov { position: fixed; inset: 0; z-index: 72; display: grid; grid-template-rows: auto 1fr auto; color: #fff; overflow: auto; animation: fo-in .35s ease;
  --fo1: #ff9a6b; --fo2: #e0563b; --fo3: #7a2e4f; background: radial-gradient(120% 90% at 50% 0%, var(--fo1), var(--fo2) 45%, var(--fo3)); padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.focus-ov.ph-short, .focus-ov.ph-long { --fo1: #8fe3c8; --fo2: #2f9a8a; --fo3: #1d3f5c; }
@keyframes fo-in { from { opacity: 0; transform: scale(1.02); } }
.fo-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fo-bg i { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .45; background: rgba(255, 255, 255, .35); animation: fo-float 18s ease-in-out infinite; }
.fo-bg i:nth-child(1) { width: 380px; height: 380px; left: -120px; top: 20%; }
.fo-bg i:nth-child(2) { width: 300px; height: 300px; right: -80px; top: -60px; animation-delay: -6s; background: rgba(255, 220, 180, .35); }
.fo-bg i:nth-child(3) { width: 420px; height: 420px; right: 10%; bottom: -200px; animation-delay: -12s; background: rgba(120, 60, 120, .35); }
@keyframes fo-float { 50% { transform: translate(40px, -30px) scale(1.1); } }
.fo-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 22px; flex-wrap: wrap; }
.fo-top .seg { background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .18); }
.fo-top .seg button { color: rgba(255, 255, 255, .8); } .fo-top .seg button.on { background: rgba(255, 255, 255, .95); color: #7a2e4f; }
.focus-ov.ph-short .fo-top .seg button.on, .focus-ov.ph-long .fo-top .seg button.on { color: #1d3f5c; }
.focus-ov .btn.glass { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }
.fo-main { position: relative; display: grid; justify-items: center; align-content: center; gap: 18px; padding: 0 16px; }
.fo-ring { position: relative; width: min(340px, 82vw); aspect-ratio: 1; }
.fo-ring svg { width: 100%; height: 100%; overflow: visible; }
.fo-track { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .16); stroke-width: 10; }
.fo-tick { stroke: rgba(255, 255, 255, .25); stroke-width: 1; } .fo-tick.big { stroke: rgba(255, 255, 255, .5); stroke-width: 1.6; }
.fo-prog { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .5s linear; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .55)); }
.fo-dot { fill: #fff; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .9)); }
.focus-ov.run.ph-focus .fo-ring { animation: fo-breathe 6s ease-in-out infinite; }
.focus-ov.run.ph-short .fo-ring, .focus-ov.run.ph-long .fo-ring { animation: fo-breathe 8s ease-in-out infinite; }
@keyframes fo-breathe { 50% { transform: scale(1.025); } }
.fo-center { position: absolute; inset: 18%; display: grid; place-content: center; justify-items: center; text-align: center; gap: 4px; }
.fo-label { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.fo-time { font-size: clamp(54px, 15vw, 76px); font-weight: 600; line-height: 1; letter-spacing: -.02em; text-shadow: 0 6px 24px rgba(0, 0, 0, .2); }
.fo-task { max-width: 220px; font-size: 13.5px; line-height: 1.35; opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fo-ctrl { display: flex; align-items: center; gap: 22px; }
.fo-play { width: 78px; height: 78px; border-radius: 50%; border: 0; background: #fff; color: var(--fo2); display: grid; place-items: center; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45); transition: transform .15s; }
.fo-play:active { transform: scale(.94); }
.fo-small { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; }
.fo-mins { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.fo-mins .chipbtn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.fo-mins .chipbtn.on { background: #fff; color: var(--fo2); border-color: #fff; }
.fo-step { display: inline-flex; align-items: center; gap: 2px; height: 30px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); padding: 0 4px; }
.fo-step button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 16px; }
.fo-step b { min-width: 34px; text-align: center; font-size: 13px; }
.fo-done { display: grid; justify-items: center; gap: 10px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .96); color: #2b2b2b; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); animation: pop .3s ease; max-width: 520px; text-align: center; }
.fo-done svg { color: var(--fo2); animation: fo-ring 1s ease 2; }
@keyframes fo-ring { 20%, 60% { transform: rotate(-14deg); } 40%, 80% { transform: rotate(14deg); } }
.fo-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr); gap: 14px; align-items: center; margin: 18px; padding: 14px 16px; border-radius: 18px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(12px); }
.fo-panel { align-items: start; }
/* Nút việc ở giữa vòng đồng hồ */
.btn-task { display: inline-flex; align-items: center; gap: 8px; max-width: min(240px, 60vw); margin-top: 6px; padding: 6px 8px 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 13px; font-weight: 600; opacity: 1; -webkit-line-clamp: unset; transition: background .15s; }
.btn-task:hover { background: rgba(255, 255, 255, .24); }
.fo-task-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-task-n { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--fo2); font-size: 11.5px; font-weight: 700; }
.fo-task-n:empty { display: none; }
.fo-done-sub { font-size: 13px; color: #555; }
/* Danh sách việc của phiên (trong bảng kính) */
.fot { display: grid; gap: 8px; min-width: 0; }
.fot-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fot-n { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--fo2); font-size: 11.5px; letter-spacing: 0; }
.fot-x { margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--sunken); color: var(--fg-2); display: grid; place-items: center; }
.fot-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.fot-bar i { display: block; height: 100%; border-radius: inherit; background: #fff; transition: width .35s ease; }
.fot-list { display: grid; gap: 4px; max-height: 188px; overflow-y: auto; margin-right: -4px; padding-right: 4px; }
.fot-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 26px; align-items: center; gap: 8px; padding: 6px 6px 6px 4px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.fot-ck { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .75); background: transparent; color: transparent; display: grid; place-items: center; transition: background .15s, color .15s, transform .15s; }
.fot-ck:active { transform: scale(.9); }
.fot-row.on .fot-ck { background: #fff; border-color: #fff; color: var(--fo2); }
.fot-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fot-t { min-width: 0; flex: 1; font-size: 13.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fot-row.on .fot-t { text-decoration: line-through; opacity: .65; }
.fot-rm { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .55; display: grid; place-items: center; }
.fot-rm:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
.fot-empty { margin: 0; font-size: 13px; opacity: .85; }
.fot-time { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.fot-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.fot-acts { display: inline-flex; gap: 6px; }
.fot .chipbtn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; height: 28px; }
.fot .chipbtn.on { background: #fff; color: var(--fo2); }
.fot-pick { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .55); background: transparent; color: #fff; font-weight: 650; font-size: 13px; }
.fot-pick:hover { background: rgba(255, 255, 255, .12); border-style: solid; }
/* Nhãn hạn dùng chung */
.fp-due { flex: none; font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--sunken); color: var(--fg-2); white-space: nowrap; }
.fp-due.d-late { background: var(--bad-soft); color: var(--bad); }
.fp-due.d-today { background: var(--warn-soft); color: var(--warn); }
.fp-due.d-soon { background: var(--accent-soft); color: var(--accent); }
.fot:not(.fot-sheet) .fp-due { background: rgba(255, 255, 255, .16); color: #fff; }
.fot:not(.fot-sheet) .fp-due.d-late { background: rgba(255, 255, 255, .92); color: #b3261e; }
/* Tấm chọn việc + bảng việc dạng sheet (nền sáng) */
.fp-scrim { position: fixed; inset: 0; z-index: 85; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; background: rgba(20, 12, 20, .45); backdrop-filter: blur(3px); animation: fo-in .2s ease; color: var(--fg); }
.fp, .fot.fot-sheet { width: min(560px, 100%); max-height: min(84vh, 720px); display: flex; flex-direction: column; background: var(--surface); color: var(--fg); border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); overflow: hidden; animation: pop .22s ease-out; }
.fot.fot-sheet { display: grid; gap: 10px; padding: 18px; align-content: start; overflow-y: auto; }
.fot.fot-sheet .fot-n { background: var(--accent-soft); color: var(--accent); }
.fot.fot-sheet .fot-bar { background: var(--sunken); } .fot.fot-sheet .fot-bar i { background: var(--ok); }
.fot.fot-sheet .fot-list { max-height: none; }
.fot.fot-sheet .fot-row { background: var(--surface-2); border: 1px solid var(--line); }
.fot.fot-sheet .fot-ck { border-color: var(--line-strong); }
.fot.fot-sheet .fot-row.on .fot-ck { background: var(--ok); border-color: var(--ok); color: #fff; }
.fot.fot-sheet .fot-rm:hover { background: var(--sunken); }
.fot.fot-sheet .chipbtn { background: var(--surface); border-color: var(--line); color: var(--fg); }
.fot.fot-sheet .chipbtn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.fot.fot-sheet .fot-pick { border-color: var(--line-strong); color: var(--accent); }
.fot.fot-sheet .fot-pick:hover { background: var(--accent-soft); }
.fp-h, .fp-search, .fp-f { flex: none; }
.fp-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 18px 10px; }
.fp-h b { display: block; font-size: 17px; }
.fp-h span { font-size: 12.5px; color: var(--muted); }
.fp-search { display: flex; align-items: center; gap: 8px; margin: 0 18px 8px; padding: 0 12px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.fp-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--fg); outline: none; }
.fp-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fp-b { flex: 1; overflow-y: auto; padding: 4px 12px 12px; display: grid; gap: 12px; align-content: start; }
.fp-g { display: grid; gap: 4px; }
.fp-gh { position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--surface); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fp-gh .mono { margin-left: auto; letter-spacing: 0; font-weight: 600; }
.fp-g.g-plan .fp-gh { color: var(--accent); } .fp-g.g-late .fp-gh { color: var(--bad); } .fp-g.g-today .fp-gh { color: var(--warn); }
.fp-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; transition: background .12s, border-color .12s; }
.fp-row:hover { background: var(--surface-2); }
.fp-row.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.fp-ck { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line-strong); display: grid; place-items: center; color: transparent; transition: background .12s, border-color .12s; }
.fp-row.on .fp-ck { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.fp-main { display: grid; gap: 4px; min-width: 0; }
.fp-t { font-size: 14px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.fp-meta .di-dot { width: 8px; height: 8px; }
.fp-more { justify-self: start; margin-left: 46px; border: 0; background: none; color: var(--accent); font-weight: 650; font-size: 12.5px; padding: 4px 0; }
.fp-f { display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 640px) { .fp-scrim { place-items: end stretch; padding: 0; } .fp, .fot.fot-sheet { width: 100%; max-height: 88vh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); } .fot.fot-sheet { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } }
.fo-stats { display: grid; gap: 4px; justify-items: start; font-size: 12.5px; opacity: .92; }
.fo-tomato { display: inline-flex; gap: 5px; }
.fo-tomato i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); }
.fo-tomato i.on { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .8); }
.fo-toggles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.fo-toggles .chipbtn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; }
.fo-toggles .chipbtn.on { background: rgba(255, 255, 255, .95); color: #333; }
.chipsel { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); }
.chipsel select { border: 0; background: transparent; color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; }
.chipsel select option { color: #222; }
@media (max-width: 860px) { .fo-panel { grid-template-columns: minmax(0, 1fr); margin: 12px; } .fo-toggles { justify-content: flex-start; } .fo-top { padding: 12px 14px; } .fo-main { gap: 14px; } }

/* =====================================================================
   "MẦM" — BẠN ĐỒNG HÀNH
   ===================================================================== */
.buddy-wrap { position: relative; display: grid; justify-items: center; gap: 4px; width: 250px; align-self: center; }
.bd-holder { position: relative; }
.bd-holder.poked { animation: bd-hop .55s ease; }
.buddy { --bd: 148px; display: block; width: var(--bd); height: calc(var(--bd) * 1.06); padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.buddy svg { overflow: visible; }
.buddy * { vector-effect: non-scaling-stroke; }
.bd-shadow { fill: rgba(20, 30, 25, .1); }
.bd-pot { fill: color-mix(in srgb, var(--art-2) 70%, #fff); stroke: var(--fg); stroke-width: 2.2; stroke-linejoin: round; }
.bd-rim { fill: color-mix(in srgb, var(--art-3) 55%, var(--art-2)); stroke: var(--fg); stroke-width: 2.2; }
.bd-soil { fill: none; stroke: #6d5340; stroke-width: 3; stroke-linecap: round; }
.bd-face path, .bd-face ellipse:not(.bd-cheek) { fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; }
.bd-face .bd-eye, .mood-sleepy .bd-face ellipse:not(.bd-cheek) { fill: var(--fg); stroke: none; }
.bd-face .bd-mouth-fill { fill: #b6463c; stroke: var(--fg); }
.bd-cheek { fill: #ff8fa0; opacity: .45; stroke: none; }
.bd-eye { transform-box: fill-box; transform-origin: center; animation: bd-blink 4.6s infinite; }
.bd-stem { fill: none; stroke: #3f8a55; stroke-width: 3; stroke-linecap: round; }
.bd-leaf { fill: #7fc98d; stroke: #2f6f43; stroke-width: 1.8; stroke-linejoin: round; transform-box: fill-box; transform-origin: 0% 100%; animation: bd-grow .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.bd-bud { fill: #f6a6c0; stroke: #b04f73; stroke-width: 1.8; transform-box: fill-box; transform-origin: 50% 100%; animation: bd-grow .7s ease both, bd-bud 3s ease-in-out infinite .7s; }
.bd-petal { fill: #ffb3cf; stroke: #c25883; stroke-width: 1.6; }
.bd-core { fill: #ffd25e; stroke: #b98a14; stroke-width: 1.6; }
.bd-flower { transform-box: fill-box; transform-origin: center; animation: bd-bloom .9s cubic-bezier(.3, 1.6, .5, 1) both, bd-spin 14s linear infinite .9s; }
.bd-plant { transform-origin: 80px 96px; animation: bd-sway 5.5s ease-in-out infinite; }
.bd-sweat { fill: #8fd3ff; stroke: #3b8fc4; stroke-width: 1.4; animation: bd-drip 2.4s ease-in infinite; }
.bd-zzz text { font-family: var(--font-hand, 'Patrick Hand'), sans-serif; font-size: 16px; fill: var(--muted); animation: bd-z 3.2s ease-in-out infinite; }
.bd-zzz text:nth-child(2) { animation-delay: .6s; } .bd-zzz text:nth-child(3) { animation-delay: 1.2s; }
.bd-sparkles path { fill: #ffd25e; stroke: #c99a1e; stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: bd-twinkle 1.8s ease-in-out infinite; }
.bd-focusring circle { fill: none; stroke: color-mix(in srgb, #e0563b 55%, transparent); stroke-width: 2; stroke-dasharray: 4 9; transform-origin: 80px 110px; animation: bd-spin 12s linear infinite; }
.buddy.cheer .bd-body { animation: bd-hop .55s ease 3; transform-origin: 80px 160px; }
.buddy.mood-happy .bd-body { animation: bd-bounce 2.6s ease-in-out infinite; transform-origin: 80px 160px; }
.buddy.mood-sleepy .bd-plant { animation-duration: 9s; }
.buddy:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 20px; }
@keyframes bd-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes bd-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes bd-grow { from { transform: scale(0); opacity: 0; } }
@keyframes bd-bloom { from { transform: scale(0) rotate(-90deg); opacity: 0; } }
@keyframes bd-bud { 50% { transform: scale(1.08); } }
@keyframes bd-spin { to { transform: rotate(360deg); } }
@keyframes bd-hop { 30% { transform: translateY(-14px) scale(1.03, .97); } 55% { transform: translateY(0) scale(1.05, .93); } 75% { transform: translateY(-4px); } }
@keyframes bd-bounce { 50% { transform: translateY(-3px); } }
@keyframes bd-twinkle { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes bd-z { 0% { opacity: 0; transform: translate(0, 6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -10px); } }
@keyframes bd-drip { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
.bd-bubble { position: relative; max-width: 240px; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); font-size: 13px; line-height: 1.35; text-align: center; color: var(--fg); animation: bd-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.bd-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); }
@keyframes bd-pop { from { transform: scale(.6) translateY(6px); opacity: 0; } }
.bd-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-2); }
.bd-lv { font-family: var(--font-mono); font-weight: 700; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.bd-bar { width: 70px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--fg) 10%, transparent); overflow: hidden; }
.bd-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7fc98d, #ffb3cf); transition: width .6s ease; }
.bd-streak { font-weight: 600; }
@media (max-width: 760px) {
  .buddy-wrap { width: auto; justify-self: stretch; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "b t" "b m"; justify-items: start; align-items: center; column-gap: 12px; margin-top: 6px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  .bd-holder { grid-area: b; } .bd-bubble { grid-area: t; text-align: left; max-width: none; align-self: end; } .bd-meta { grid-area: m; align-self: start; flex-wrap: wrap; }
  .bd-bubble::after { left: -6px; top: 50%; bottom: auto; transform: translateY(-50%) rotate(135deg); }
  .buddy { --bd: 100px !important; }
}
.bd-aura { fill: color-mix(in srgb, var(--art-1) 55%, transparent); animation: bd-aura 6s ease-in-out infinite; transform-origin: 80px 100px; }
.buddy.mood-happy .bd-aura, .buddy.cheer .bd-aura { fill: color-mix(in srgb, #ffd9e6 70%, transparent); }
.buddy.mood-focus .bd-aura { fill: color-mix(in srgb, #ffd2c2 60%, transparent); }
@keyframes bd-aura { 50% { transform: scale(1.06); } }
.sc-d.cur.late, .sc-d.cur.ok b::after { color: #fff; }
.focusbtn { position: relative; z-index: 2; background: var(--surface); }

/* =====================================================================
   CHUÔNG CHÁNH NIỆM
   ===================================================================== */
.focus-ov.ph-bell { --fo1: #f6d7b0; --fo2: #8c7bc8; --fo3: #232349; background: radial-gradient(120% 90% at 30% 0%, #f8dcb8, #b49ad8 38%, #4b4592 70%, #1e1e40); }
.focus-ov.ph-bell .fo-bg i:nth-child(1) { background: rgba(255, 230, 190, .45); }
.focus-ov.ph-bell .fo-bg i:nth-child(3) { background: rgba(70, 60, 160, .5); }
.fo-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .2); border: 1px solid rgba(255, 255, 255, .18); }
.fo-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, .82); font-weight: 600; font-size: 13.5px; position: relative; }
.fo-tabs button.on { background: rgba(255, 255, 255, .95); color: #3a2a5c; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4); }
.fo-tabs b { font-size: 12px; padding: 1px 6px; border-radius: 6px; background: rgba(224, 86, 59, .9); color: #fff; }
.fo-dot-on { width: 7px; height: 7px; border-radius: 50%; background: #7dffb3; box-shadow: 0 0 8px #7dffb3; }
.fo-top .fo-phase { margin-right: auto; }
@media (max-width: 640px) { .fo-tabs button { padding: 0 10px; font-size: 12.5px; } .fo-top .fo-phase { order: 3; margin: 0; } }
.bell-view { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 24px; padding: 6px 22px 24px; align-items: center; min-height: 0; }
.bell-left { display: grid; justify-items: center; gap: 14px; }
.bell-stage { position: relative; width: min(420px, 86vw); aspect-ratio: 240 / 220; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bell-svg { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 24px 40px rgba(20, 10, 50, .35)); }
.bell-glow { opacity: .35; transition: opacity 1.2s; transform-origin: 120px 110px; }
.bell-stage.ringing .bell-glow { opacity: 1; animation: bell-glow 3s ease-in-out infinite; }
@keyframes bell-glow { 50% { transform: scale(1.08); opacity: .7; } }
.bell-body { transform-origin: 120px 160px; }
.bell-stage.ringing .bell-body { animation: bell-shiver 0.9s ease-out 3; }
@keyframes bell-shiver { 0% { transform: rotate(0); } 15% { transform: rotate(-1.4deg); } 35% { transform: rotate(1deg); } 55% { transform: rotate(-.6deg); } 75% { transform: rotate(.3deg); } 100% { transform: rotate(0); } }
.bell-striker { transform-origin: 196px 130px; transition: transform .3s; }
.bell-stage:hover .bell-striker { transform: rotate(-6deg); }
.bell-stage.ringing .bell-striker { animation: bell-strike 1.4s ease-out; }
@keyframes bell-strike { 0% { transform: rotate(0); } 18% { transform: rotate(-22deg); } 30% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
.bell-ripples { position: absolute; left: 50%; top: 52%; width: 0; height: 0; pointer-events: none; }
.bell-ripples i { position: absolute; left: -90px; top: -60px; width: 180px; height: 120px; border-radius: 50%; border: 2px solid rgba(255, 240, 210, .75); opacity: 0; animation: bell-ripple 6s cubic-bezier(.2, .6, .3, 1) both; }
.bell-ripples i.soft { border-color: rgba(255, 240, 210, .4); animation-duration: 3s; }
@keyframes bell-ripple { 0% { transform: scale(.6); opacity: 0; } 8% { opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
.bell-caption { display: grid; justify-items: center; gap: 4px; text-align: center; min-height: 52px; }
.bell-caption b { font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.bell-caption > span { font-family: var(--font-hand, 'Patrick Hand'), cursive; font-size: 19px; opacity: .9; }
.bell-play { color: #5a46a8; width: 66px; height: 66px; }
.bell-play:disabled { opacity: .7; }
.breath { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 500; animation: fo-in .6s ease; }
.breath small { opacity: .7; font-size: 12px; }
.breath-dot { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 248, 230, .95); box-shadow: 0 0 18px rgba(255, 240, 200, .9); }
.breath.in .breath-dot { animation: breath-in 5s ease-in-out both; }
.breath.out .breath-dot { animation: breath-out 5s ease-in-out both; }
@keyframes breath-in { from { transform: scale(.6); } to { transform: scale(1.7); } }
@keyframes breath-out { from { transform: scale(1.7); } to { transform: scale(.6); } }
.bell-right { display: grid; gap: 14px; align-content: start; }
.bp-card { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: rgba(20, 16, 50, .28); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(14px); }
.bp-card.live { border-color: rgba(125, 255, 179, .45); box-shadow: 0 0 0 1px rgba(125, 255, 179, .15) inset; }
.bp-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.bp-h .switch { margin-left: auto; }
.bell-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.btype { display: grid; justify-items: start; gap: 2px; padding: 10px 11px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; text-align: left; transition: all .2s; }
.btype:hover { background: rgba(255, 255, 255, .16); }
.btype b { font-size: 13px; } .btype small { font-size: 11px; opacity: .75; }
.btype.on { background: rgba(255, 250, 240, .96); color: #3a2a5c; border-color: transparent; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.bt-ic { position: relative; width: 26px; height: 22px; margin-bottom: 4px; }
.bt-ic i { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 12px; border-radius: 2px 2px 12px 12px; background: linear-gradient(90deg, #8a6223, #f0cf85, #8a6223); }
.bt-ic i + i { left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: #9b3a2e; }
.bt-temple .bt-ic i:first-child { left: 7px; right: 7px; height: 20px; border-radius: 9px 9px 3px 3px; }
.bt-bowl .bt-ic i:first-child { height: 10px; border-radius: 0 0 14px 14px; background: linear-gradient(90deg, #6b5a3a, #d9c9a2, #6b5a3a); }
.bt-crystal .bt-ic i:first-child { background: linear-gradient(90deg, #9fd6ff, #f2fbff, #9fd6ff); }
.bt-chime .bt-ic i:first-child { left: 4px; right: auto; width: 3px; height: 18px; border-radius: 2px; background: #c9ced6; box-shadow: 6px 3px 0 #c9ced6, 12px -1px 0 #c9ced6, 18px 2px 0 #c9ced6; }
.bt-chime .bt-ic i + i { bottom: auto; top: 0; background: #8a6a40; }
.bt-gong .bt-ic i:first-child { left: 4px; right: 4px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #f0cf85 20%, #9a6d28 70%); }
.bt-gong .bt-ic i + i { display: none; }
.bp-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.bp-row.wrap { flex-wrap: wrap; gap: 6px; }
.bp-l { font-size: 12.5px; font-weight: 600; opacity: .85; margin-right: auto; min-width: 90px; }
.bp-row.wrap .bp-l { margin-right: 4px; min-width: 0; }
.bp-row .seg { background: rgba(0, 0, 0, .2); border-color: rgba(255, 255, 255, .15); }
.bp-row .seg button { color: rgba(255, 255, 255, .85); min-width: 36px; justify-content: center; } .bp-row .seg button.on { background: #fff; color: #3a2a5c; }
.bp-row input[type=range] { flex: 1; accent-color: #f6d7b0; }
.bp-row .chipbtn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: #fff; height: 28px; padding: 0 10px; }
.bp-row .chipbtn.on { background: #fff; color: #3a2a5c; border-color: #fff; }
.bp-row .inp { background: rgba(255, 255, 255, .92); color: #222; border-color: transparent; height: 32px; }
.bp-check { cursor: pointer; align-items: flex-start; } .bp-check span { display: grid; } .bp-check b { font-size: 13.5px; } .bp-check small { font-size: 11.5px; opacity: .75; }
.bp-check input { margin-top: 3px; accent-color: #f6d7b0; width: 16px; height: 16px; }
.bp-next { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .18); font-size: 13px; }
.bp-next b { font-size: 18px; } .bp-next small { opacity: .75; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #7dffb3; box-shadow: 0 0 0 0 rgba(125, 255, 179, .7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(125, 255, 179, 0); } 100% { box-shadow: 0 0 0 0 rgba(125, 255, 179, 0); } }
.bp-note { margin: 0; font-size: 11.5px; opacity: .75; line-height: 1.45; }
.switch { position: relative; width: 44px; height: 24px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .25); padding: 0; transition: background .2s; }
.switch i { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.switch.on { background: #3cbf7a; } .switch.on i { transform: translateX(20px); }
@media (max-width: 900px) { .bell-view { grid-template-columns: minmax(0, 1fr); padding: 0 12px 20px; } .bell-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bell-stage { width: min(340px, 80vw); } }
.bell-toast { position: fixed; left: 50%; top: calc(18px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 85; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border: 0; border-radius: 999px; color: #fff;
  background: linear-gradient(120deg, #4b4592, #8c7bc8 60%, #e8b98a); box-shadow: 0 18px 40px -14px rgba(40, 30, 90, .6); animation: bd-pop .5s cubic-bezier(.3, 1.6, .5, 1); text-align: left; }
.bt-bell { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .2); }
.bt-bell.ring { animation: fo-ring 1.2s ease infinite; }
.bt-tx { display: grid; gap: 2px; } .bt-tx b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.bell-toast .breath { font-size: 14px; gap: 8px; } .bell-toast .breath-dot { width: 12px; height: 12px; }
@media (max-width: 640px) { .fo-min span { display: none; } .fo-min { width: 38px; padding: 0; } .fo-top { flex-wrap: nowrap; } .fo-top .fo-phase { display: none; } .focus-ov:not(.ph-bell) .fo-main::before { content: none; } }
@media (max-width: 960px) { .tabs a { font-size: 9.8px; white-space: nowrap; letter-spacing: -.01em; } }

/* =====================================================================
   NHẬT KÝ
   ===================================================================== */
.jgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .jgrid { grid-template-columns: minmax(0, 1fr); } }
.jbook { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-1); overflow: hidden;
  background-image: radial-gradient(color-mix(in srgb, var(--fg) 7%, transparent) 1px, transparent 1.2px); background-size: 18px 18px; }
.jbook::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--art-1), var(--art-2), var(--art-3)); opacity: .8; }
.jb-head { display: flex; justify-content: space-between; gap: 16px; padding: 24px 28px 18px; border-bottom: 1px dashed var(--line-strong); background: linear-gradient(180deg, color-mix(in srgb, var(--art-1) 30%, transparent), transparent); }
.jb-date { font-family: 'Playfair Display', Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1.1; }
.jb-date span { display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 4px; }
.jb-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 13px; color: var(--fg-2); }
.jb-facts b { font-family: var(--font-mono); color: var(--fg); }
.jb-prog { display: flex; align-items: center; gap: 4px; align-self: flex-start; }
.jb-prog i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); }
.jb-prog i.on { background: var(--accent); }
.jb-prog small { margin-left: 6px; color: var(--muted); font-size: 11.5px; }
.jsec { padding: 22px 28px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.jsec h3 { display: flex; align-items: center; gap: 10px; font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 600; margin: 0 0 6px; }
.jn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; background: var(--accent); color: var(--on-accent); flex: none; }
.jhint { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.jsec.two { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; }
@media (max-width: 760px) { .jsec, .jb-head { padding-left: 18px; padding-right: 18px; } .jsec.two { grid-template-columns: minmax(0, 1fr); gap: 20px; } .jb-date { font-size: 25px; } }
.mood { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px; }
.mood-axis { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.mood-axis.y { writing-mode: vertical-rl; transform: rotate(180deg); flex-direction: row-reverse; }
.mood-axis.x { grid-column: 2; }
.mood-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.moodq { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px; border-radius: 16px; background: var(--ms); border: 1.5px solid color-mix(in srgb, var(--mc) 25%, transparent); transition: box-shadow .25s, transform .25s; }
.moodq.dom { box-shadow: 0 10px 26px -14px var(--mc); border-color: var(--mc); }
.moodq small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--mc) 75%, #222); margin-bottom: 8px; }
.mq-words { display: flex; flex-wrap: wrap; gap: 6px; }
.mq-words button { min-height: 30px; padding: 3px 11px; line-height: 1.25; text-align: left; max-width: 100%; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--mc) 35%, transparent); background: rgba(255, 255, 255, .7); color: #2b2b2b; font-size: 13px; font-weight: 500; transition: all .15s; }
.mq-words button:hover { transform: translateY(-1px); }
.mq-words button.on { background: var(--mc); border-color: var(--mc); color: #fff; box-shadow: 0 6px 14px -8px var(--mc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .moodq { background: color-mix(in srgb, var(--mc) 14%, var(--surface)); } :root:not([data-theme="light"]) .mq-words button:not(.on) { background: rgba(255, 255, 255, .06); color: var(--fg); } }
:root[data-theme="dark"] .moodq { background: color-mix(in srgb, var(--mc) 14%, var(--surface)); } :root[data-theme="dark"] .mq-words button:not(.on) { background: rgba(255, 255, 255, .06); color: var(--fg); }
.dscore { display: grid; gap: 10px; }
.ds-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.ds { aspect-ratio: 1; max-width: 46px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--rc) 45%, var(--line)); background: var(--surface); font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--fg-2); transition: all .18s; }
.ds.fill { background: color-mix(in srgb, var(--rc) 22%, var(--surface)); color: var(--fg); }
.ds.on { background: var(--rc); border-color: var(--rc); color: #fff; transform: scale(1.12); box-shadow: 0 8px 18px -8px var(--rc); }
.ds-label { font-size: 15px; font-weight: 600; color: var(--muted); }
.jdims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (max-width: 560px) { .jdims { grid-template-columns: minmax(0, 1fr); } .ds-row { gap: 4px; } .ds { font-size: 12px; } }
.jdim { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.jdim div { display: flex; gap: 4px; }
.jdim button { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--accent); background: transparent; padding: 0; }
.jdim button.on { background: var(--accent); }
.jsuggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: #fde9ef; color: #9b3058; font-size: 13px; }
.jsuggest .btn { margin-left: auto; }
.jtpls { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; }
.jtpl { flex: none; width: 168px; scroll-snap-align: start; display: grid; gap: 3px; justify-items: start; text-align: left; padding: 12px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); position: relative; transition: all .18s; }
.jtpl b { font-size: 13.5px; line-height: 1.25; } .jtpl small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.jtpl em { position: absolute; right: 10px; top: 10px; font-style: normal; font-size: 10.5px; color: var(--muted); }
.jt-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 6px; }
.jtpl.on { border-color: var(--accent); background: linear-gradient(160deg, var(--accent-soft), var(--surface)); box-shadow: 0 10px 24px -16px var(--accent); }
.jtpl.on .jt-ic { background: var(--accent); color: var(--on-accent); }
.jwhy { margin-bottom: 10px; }
.linklike { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; color: var(--accent-ink, var(--accent)); font-size: 13px; font-weight: 600; }
.jwhy p { margin: 8px 0 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; font-size: 13px; line-height: 1.5; }
.jprompts { display: grid; gap: 14px; }
.jprompt { display: grid; gap: 6px; }
.jp-l { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 14px; }
.jp-l i { font-style: normal; font-size: 11px; color: var(--accent); }
.jtext { width: 100%; border: 0; border-radius: 10px; padding: 4px 12px; resize: none; overflow: hidden; font-family: var(--font-hand, 'Patrick Hand'), 'Be Vietnam Pro', cursive; font-size: 19px; line-height: 30px; color: var(--fg); min-height: 64px;
  background: repeating-linear-gradient(transparent 0 29px, color-mix(in srgb, var(--accent) 22%, transparent) 29px 30px), color-mix(in srgb, var(--surface) 70%, transparent); background-attachment: local; }
.jtext:focus { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.jtext::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.jwins { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.jwin { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px dashed var(--line-strong); background: var(--surface); font-size: 12.5px; color: var(--fg-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jwin.on { border-style: solid; border-color: #e9a31b; background: #fff1cf; color: #6b4a07; font-weight: 600; }
.jword { width: 100%; border: 0; border-bottom: 2px solid var(--accent); background: transparent; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 30px; padding: 6px 2px; color: var(--fg); }
.jword:focus { outline: none; border-bottom-color: var(--fg); }
.jif { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 8px; }
.jif > span { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 16px; color: var(--accent-ink, var(--accent)); text-align: right; }
.jif .jtext { min-height: 34px; font-size: 18px; line-height: 30px; }
.jb-foot { display: flex; align-items: center; gap: 10px; padding: 14px 28px; color: var(--muted); font-size: 12.5px; }
.jside { display: grid; gap: 16px; position: sticky; top: 16px; }
@media (max-width: 1100px) { .jside { position: static; } }
.jcard .card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.jcal-h, .jcal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.jcal-h span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.jday { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; align-content: center; gap: 0; padding: 0; font-size: 11.5px; color: var(--fg-2); position: relative; }
.jday.has { background: var(--ms); border-color: color-mix(in srgb, var(--mc) 40%, transparent); color: #2b2b2b; }
.jday.has::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--mc); }
.jday b { font-size: 10px; color: color-mix(in srgb, var(--mc, var(--fg)) 80%, #000); }
.jday.out { opacity: .35; } .jday:disabled { opacity: .25; cursor: default; }
.jday.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.jlegend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin-top: 12px; font-size: 10.5px; color: var(--muted); }
.jlegend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.jtrend { width: 100%; height: auto; overflow: visible; }
.jt-grid { stroke: var(--line); stroke-dasharray: 2 4; }
.jt-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; opacity: .7; }
.jstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.jstats div { display: grid; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.jstats b { font-size: 22px; } .jstats span { font-size: 11.5px; color: var(--muted); }
.jstats em { font-style: normal; margin-left: 6px; font-weight: 700; } .jstats em.up { color: var(--ok); } .jstats em.down { color: var(--bad); }
.jsub { margin: 14px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.jtop { display: flex; flex-wrap: wrap; gap: 6px; }
.jtop span { padding: 3px 10px; border-radius: 999px; background: var(--ms); color: #2b2b2b; font-size: 12.5px; border: 1px solid color-mix(in srgb, var(--mc) 35%, transparent); }
.jinsight { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 12.5px; line-height: 1.45; }
.jmini { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: linear-gradient(140deg, color-mix(in srgb, var(--art-1) 45%, var(--surface)), var(--surface)); }
.jmini.done { background: linear-gradient(140deg, var(--ms, var(--accent-soft)), var(--surface)); border-color: color-mix(in srgb, var(--mc, var(--accent)) 35%, var(--line)); }
.jmini.nudge { animation: jnudge 3s ease-in-out infinite; }
@keyframes jnudge { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } }
.jm-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mc, var(--accent)); color: #fff; }
.jm-tx { display: grid; gap: 2px; min-width: 0; } .jm-tx b { font-size: 14px; } .jm-tx span { font-size: 12.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jm-tx span b { font-size: 12.5px; margin-right: 6px; }

/* Nhật ký — biểu tượng & lộ trình */
.emo { font-size: 15px; line-height: 1; margin-right: 5px; }
.mq-words button { display: inline-flex; align-items: center; }
.mq-words button.on .emo { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
.mq-ic { margin-right: 6px; font-size: 13px; }
.mood-now { grid-column: 2; display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 10px 14px; border-radius: 14px; background: var(--ms); border: 1px solid color-mix(in srgb, var(--mc) 30%, transparent); font-size: 13.5px; color: #2b2b2b; animation: bd-pop .35s ease; }
.mn-emo { font-size: 22px; letter-spacing: 2px; white-space: nowrap; }
.ds-label { display: flex; align-items: center; gap: 10px; }
.ds-emo { font-size: 30px; line-height: 1; display: inline-block; animation: bd-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.jdim span i { font-style: normal; margin-right: 6px; }
.h-emo { font-size: 17px; margin-left: 2px; }
.jt-ic { font-size: 18px; background: color-mix(in srgb, var(--accent-soft) 80%, var(--surface)); }
.jtpl.on .jt-ic { background: var(--surface); box-shadow: 0 0 0 2px var(--accent); }
.jb-head { align-items: flex-start; }
.jb-head > div:first-child { flex: 1; min-width: 0; }
.jb-art { color: var(--art-3); opacity: .55; margin-top: -6px; }
@media (max-width: 560px) { .jb-art { display: none; } }
.jflow { display: flex; align-items: center; gap: 0; margin: 4px 0 16px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px dashed var(--line-strong); overflow-x: auto; }
.jf-step { flex: none; display: grid; justify-items: center; gap: 4px; border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--fg-2); }
.jf-emo { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: var(--surface); border: 1.5px solid var(--line-strong); transition: all .2s; }
.jf-step:hover .jf-emo { transform: translateY(-2px); border-color: var(--accent); }
.jf-step.ok .jf-emo { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 700; }
.jf-step small { font-size: 11px; font-weight: 600; white-space: nowrap; }
.jf-line { flex: 1 0 18px; min-width: 18px; height: 2px; margin: 0 4px 18px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px); }
.jf-line.ok { background: var(--accent); }
.jf-loop { flex: none; margin: 0 0 18px 8px; font-size: 20px; color: var(--accent); }
.jp-emo { font-size: 16px; }
.jwin span { font-size: 14px; }
.jtop span { white-space: nowrap; }
.jm-emo { font-size: 22px; line-height: 1; }
.jmini.done .jm-ic { background: color-mix(in srgb, var(--mc, var(--accent)) 18%, var(--surface)); }

/* =====================================================================
   SỐ LIỆU KIỂU SỔ GHI CHÉP — bỏ thẻ "KPI" chung chung
   ===================================================================== */
.ledger-q { container-type: inline-size; }
.ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--paper); border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.ledger::before { content: ""; position: absolute; left: 18px; right: 18px; top: 10px; height: 3px; border-top: 1.5px solid var(--fg); border-bottom: .5px solid var(--fg); opacity: .75; }
.lg { display: flex; align-items: flex-end; gap: 12px; padding: 26px 20px 16px; min-width: 0; }
.lg + .lg { border-left: 1px dashed var(--line-strong); }
.lg-n { position: relative; font-family: 'Playfair Display', Georgia, serif; font-size: 46px; font-weight: 600; line-height: .9; letter-spacing: -.02em; color: var(--fg); font-variant-numeric: lining-nums; }
.lg-n span { position: relative; }
.lg-bad .lg-n { color: var(--bad); } .lg-warn .lg-n { color: var(--warn); } .lg-ok .lg-n { color: var(--ok); }
.lg-mark { position: absolute; pointer-events: none; overflow: visible; }
.lg-mark path { fill: none; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lg-mark.circle { left: -12px; right: -14px; top: -8px; bottom: -6px; width: calc(100% + 26px); height: calc(100% + 14px); }
.lg-mark.circle path { stroke: color-mix(in srgb, var(--bad) 70%, transparent); stroke-dasharray: 300; animation: draw 1.1s ease-out both; }
.lg-mark.under { left: -2px; bottom: -9px; width: calc(100% + 6px); height: 10px; }
.lg-mark.under path { stroke: color-mix(in srgb, var(--warn) 75%, transparent); stroke-width: 2.4; stroke-dasharray: 120; animation: draw .9s ease-out both; }
@keyframes draw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
.lg-t { display: grid; gap: 1px; min-width: 0; padding-bottom: 2px; }
.lg-t b { font-size: 13px; font-weight: 600; color: var(--fg); }
.lg-t i { font-family: 'Playfair Display', Georgia, serif; font-size: 13px; line-height: 1.3; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lg-n.has-circle { margin: 0 10px 0 8px; }
.tally { margin-top: 4px; overflow: visible; }
.tally path { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; }
@container (max-width: 920px) {
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg { padding: 24px 14px 14px; gap: 10px; } .lg-n { font-size: 38px; }
  .lg:nth-child(3) { border-left: 0; } .lg:nth-child(n+3) { border-top: 1px dashed var(--line-strong); }
}
/* các thẻ số liệu ở Báo cáo / Thói quen: chữ có chân, không còn chấm tròn trang trí */
.kpi::after { content: none; }
.kpi { border-top: 3px double color-mix(in srgb, var(--fg) 70%, transparent); border-radius: 4px 4px var(--r-lg) var(--r-lg); background: var(--paper); }
.kpi .label { font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--fg-2); }
.kpi .v { font-family: 'Playfair Display', Georgia, serif; font-size: 36px; font-weight: 600; letter-spacing: -.02em; }
.kpi .hint { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 12.5px; }

/* =====================================================================
   BẢNG THÓI QUEN THÁNG — nền sạch, ô tròn, cột hôm nay nổi bật
   ===================================================================== */
.board { background: var(--surface) !important; background-image: none !important; padding: 16px 8px 12px; }
.hb-table { border-spacing: 0; }
.hb-table th, .hb-table td { background: transparent; }
.hb-table thead th { padding: 0 0 8px; font-size: 10px; letter-spacing: .02em; }
.hb-table th .d { font-size: 12px; margin-top: 2px; width: 22px; height: 22px; line-height: 22px; margin-inline: auto; border-radius: 50%; }
.hb-table th.we, .hb-table th.we .d { color: var(--bad); }
.hb-table .nm { background: var(--surface); font-family: var(--font-sans, inherit); font-size: 13.5px; font-weight: 500; color: var(--fg); padding: 0 16px 0 12px; min-width: 200px; border-right: 1px solid var(--line); }
.hb-table th.nm { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; }
.hb-table tbody tr:not(.dayrow) td { border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent); }
.hb-table tbody tr:not(.dayrow):hover td:not(.nm) { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.hb-table tbody tr:not(.dayrow):hover td.nm { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
.hb-table .nm { z-index: 3; box-shadow: 6px 0 8px -6px rgba(0, 0, 0, .12); }
.hb-table td.c { position: relative; z-index: 0; }
.hb-table td.c { width: 30px; min-width: 30px; height: 36px; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; cursor: pointer; }
.hb-table td.c .dot { width: 20px; height: 20px; margin: auto; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid color-mix(in srgb, var(--fg) 22%, transparent); color: var(--on-accent); transition: transform .12s, background .15s; }
.hb-table td.c:hover .dot { border-color: var(--accent); transform: scale(1.1); }
.hb-table td.c.on .dot { background: var(--accent); border-color: var(--accent); }
.hb-table td.c.on .dot svg { display: block; }
.hb-table td.c.lock .dot { border: 0; width: 5px; height: 5px; background: color-mix(in srgb, var(--fg) 16%, transparent); }
.hb-table td.c.lock { cursor: default; }
.hb-table td.c.na .dot { border: 0; width: 8px; height: 1.5px; border-radius: 1px; background: color-mix(in srgb, var(--fg) 14%, transparent); }
.hb-table td.c.void { background: transparent !important; }
.hb-table td.c.td, .hb-table th.td { background: color-mix(in srgb, var(--accent-soft) 70%, transparent) !important; }
.hb-table th.td .d { background: var(--accent); color: var(--on-accent); }
.hb-table td.wkend, .hb-table th.wkend { box-shadow: inset -1px 0 0 color-mix(in srgb, var(--line-strong) 70%, transparent) !important; }
.hb-table .pc { padding: 0 6px 0 14px; }
.hb-table tr.dayrow td { padding-top: 10px; border-top: 1px solid var(--line); }
.hb-table td.pbar { height: 38px; vertical-align: bottom; padding: 10px 7px 0; }
.hb-table td.pbar i { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 1px 1px; background: var(--accent); opacity: .55; }
.hb-table td.pbar.lv-ok i { background: var(--ok); opacity: .8; } .hb-table td.pbar.lv-mid i { background: var(--warn); opacity: .7; } .hb-table td.pbar.lv-bad i { background: var(--bad); opacity: .6; }
.hb-table tr.dayrow .nm { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; }

.themebtn { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); display: grid; place-items: center; padding: 0; }
.themebtn:hover { color: var(--fg); border-color: var(--line-strong); }

/* Góc tổng kết ngày (trang Hôm nay) — trang sổ nhỏ, hợp cả sáng & tối */
.jm2 { position: relative; display: grid; gap: 10px; padding: 14px 16px 14px 22px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden;
  background-image: repeating-linear-gradient(transparent 0 27px, color-mix(in srgb, var(--fg) 6%, transparent) 27px 28px); background-position: 0 40px; }
.jm2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--jm); opacity: .85; }
.jm2::after { content: ""; position: absolute; right: 18px; top: -6px; width: 46px; height: 16px; border-radius: 3px; background: color-mix(in srgb, var(--jm) 28%, transparent); transform: rotate(-4deg); }
.jm2-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.jm2-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.jm2-open { border: 0; background: none; padding: 0; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 14px; color: var(--accent-ink, var(--accent)); cursor: pointer; }
.jm2-open:hover { text-decoration: underline; }
.jm2-q { margin: 2px 0 0; font-family: var(--font-hand, 'Patrick Hand'), cursive; font-size: 22px; line-height: 1.2; color: var(--fg); }
.jm2-faces { display: flex; justify-content: space-between; gap: 6px; }
.jm2-faces button { flex: 1; aspect-ratio: 1; max-width: 50px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 24px; display: grid; place-items: center; padding: 0; transition: transform .15s, border-color .15s; filter: saturate(.85); }
.jm2-faces button:hover { transform: translateY(-3px) scale(1.06); border-color: var(--accent); filter: none; }
.jm2-hint { color: var(--muted); font-size: 11.5px; }
.jm2-body { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; border: 0; background: none; padding: 0; color: inherit; cursor: pointer; }
.jm2-emo { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; background: color-mix(in srgb, var(--jm) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--jm) 30%, var(--line)); }
.jm2-main { display: grid; gap: 5px; min-width: 0; }
.jm2-word { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.15; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm2-score { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-2); }
.jm2-dots { display: inline-flex; gap: 3px; }
.jm2-dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--fg) 14%, transparent); }
.jm2-dots i.on { background: var(--jm); }
.jm2-words { display: flex; flex-wrap: wrap; gap: 5px 10px; }
.jm2-words em { font-style: normal; font-size: 12.5px; color: var(--fg-2); display: inline-flex; align-items: center; gap: 5px; }
.jm2-words em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.pj { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line-strong); background: color-mix(in srgb, var(--paper) 70%, var(--surface)); }
.pj-h { display: flex; align-items: center; gap: 8px; font-family: 'Playfair Display', Georgia, serif; font-size: 15px; }
.pj-tpls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pj-tpls .label { margin-right: 4px; }
.pj-tpls .chipbtn { height: 28px; padding: 0 10px; font-size: 12px; }
.topbar .brand-name small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; }
.welcome { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: start; }
.welcome > div { display: grid; gap: 14px; }
.welcome-lead { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 16px; line-height: 1.5; color: var(--fg-2); }
.welcome .field { display: grid; gap: 6px; }
@media (max-width: 520px) { .welcome { grid-template-columns: minmax(0, 1fr); } .welcome .deco { display: none; } }
.nudge { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: 1320px; margin: 0 auto 16px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--warn-soft) 80%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); color: var(--fg); }
.nudge > svg { color: var(--warn); flex: none; }
.nudge > span { flex: 1; min-width: 220px; display: grid; gap: 2px; font-size: 13px; color: var(--fg-2); }
.nudge > span b { color: var(--fg); font-size: 13.5px; }

/* =====================================================================
   SỔ TIỀN — tông giấy kế toán: số liệu monospace, màu theo chiều tiền
   xanh = họ nợ mình · cam đất = mình nợ · chàm = công ty · olive = đồ
   ===================================================================== */
:root { --m-in: #23704f; --m-out: #b0532a; --m-co: #4f53a6; --m-item: #5f7a3a; }
:root[data-theme="dark"] { --m-in: #63c99a; --m-out: #f0946a; --m-co: #9fa3f0; --m-item: #a8c47a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --m-in: #63c99a; --m-out: #f0946a; --m-co: #9fa3f0; --m-item: #a8c47a; } }
.amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; letter-spacing: -.02em; }
.amt.hid { letter-spacing: .12em; color: var(--muted); filter: blur(.4px); }
.g-in { color: var(--m-in); } .g-out { color: var(--m-out); } .g-co { color: var(--m-co); } .g-item { color: var(--m-item); font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.amt.done { color: var(--muted); font-weight: 500; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.mk { display: inline-grid; place-items: center; flex: none; border-radius: 10px; color: var(--kc); background: color-mix(in srgb, var(--kc) 13%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kc) 22%, transparent); }
.mav { display: inline-grid; place-items: center; flex: none; border-radius: 50%; font-family: var(--font-display); font-weight: 600; color: hsl(var(--h) 45% 30%); background: hsl(var(--h) 55% 90%); }
:root[data-theme="dark"] .mav { color: hsl(var(--h) 60% 82%); background: hsl(var(--h) 30% 22%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mav { color: hsl(var(--h) 60% 82%); background: hsl(var(--h) 30% 22%); } }
.fchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12.5px; font-weight: 500; color: var(--fg-2); }
.fchip .mono { font-size: 11px; color: var(--muted); }
.fchip:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); }
.fchip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); } .fchip.on .mono { color: inherit; opacity: .7; }
.fchip.late.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.ck { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ck input { width: 16px; height: 16px; accent-color: var(--accent); }
.txt-late { color: var(--bad); }

/* bảng số liệu đầu trang */
.mledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1);
  background-image: repeating-linear-gradient(transparent 0 27px, color-mix(in srgb, var(--rule) 60%, transparent) 27px 28px); }
.ml { display: grid; gap: 2px; text-align: left; padding: 16px 18px 14px; border: 0; background: transparent; border-right: 1px dashed var(--rule); color: inherit; position: relative; transition: background .15s; }
.ml:last-child { border-right: 0; }
.ml:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
.ml-k { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 600; }
.ml-v { font-size: 26px; line-height: 1.25; font-weight: 600; }
.ml-in .ml-v { color: var(--m-in); } .ml-out .ml-v { color: var(--m-out); } .ml-co .ml-v { color: var(--m-co); } .ml-late .ml-v { color: var(--muted); } .ml-late.on .ml-v { color: var(--bad); }
.ml-s { font-family: var(--font-hand); font-size: 15px; color: var(--fg-2); }
.ml-late.on::after { content: ''; position: absolute; left: 14px; right: 30%; bottom: 10px; height: 7px; border-bottom: 2px solid var(--bad); border-radius: 50%; opacity: .55; transform: rotate(-1.5deg); }

/* ghi nhanh */
.mq-card { padding: 12px 14px; }
.mq { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.mq-row { display: flex; align-items: center; gap: 8px; }
.mqm-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.mq-in { flex: 1; min-width: 0; width: 100%; height: 38px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 12px; background: var(--surface); font-size: 14.5px; }
.mq-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mq.compact .mqm-ic { display: none; } .mq.compact .mq-in { height: 34px; font-size: 13.5px; }
.mq-prev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 40px; animation: fade .15s ease-out; }
.mq.compact .mq-prev { padding-left: 0; }
.mq-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 8px; background: var(--sunken); font-size: 12.5px; color: var(--fg-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-chip.strong { background: var(--fg); color: var(--bg); font-weight: 600; }
.mq-chip.warn { background: var(--warn-soft); color: var(--warn); }
.mq-chip.due { background: var(--bad-soft); color: var(--bad); }
.mq-kind { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px 0 10px; border-radius: 8px; background: color-mix(in srgb, var(--kc, var(--accent)) 14%, var(--surface)); color: var(--kc, var(--accent-ink)); font-size: 12.5px; font-weight: 600; }
.mq-kind select { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; padding-right: 2px; cursor: pointer; }
.mq-kind select:focus { outline: none; }
.mq-kind.sel { --kc: var(--fg-2); height: 28px; border: 1px solid var(--line-strong); background: var(--surface); }
.mq-hint { font-size: 11.5px; color: var(--muted); margin-left: auto; }
.mq-tips { font-size: 12px; color: var(--muted); padding-left: 40px; }
.mtabs button { height: 32px; padding: 0 14px; font-size: 13px; }

/* danh sách */
.mfilter { gap: 10px 14px; }
.msearch { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.msearch .inp { width: 220px; }
.mrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); cursor: pointer; transition: background .12s; }
.mrow:hover { background: var(--surface-2); }
.mrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mrow.st-done, .mrow.st-forgiven, .mrow.st-logged { opacity: .62; }
.mr-main { min-width: 0; display: grid; gap: 3px; }
.mr-t { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; }
.mr-t > span:not(.mr-sep) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mr-t b { font-weight: 600; white-space: nowrap; }
.mr-t svg { color: var(--muted); flex: none; }
.mr-sep { color: var(--muted); }
.mr-m { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.mr-m .late { color: var(--bad); font-weight: 600; } .mr-m .soon { color: var(--warn); font-weight: 600; } .mr-m .ok { color: var(--ok); }
.mr-step { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--sunken); color: var(--fg-2); }
.mr-step.s-sub { background: color-mix(in srgb, var(--m-co) 14%, var(--surface)); color: var(--m-co); }
.mr-step.s-ok { background: var(--warn-soft); color: var(--warn); }
.mr-step.s-paid { background: var(--ok-soft); color: var(--ok); }
.mr-bar { position: relative; height: 5px; border-radius: 9px; background: var(--sunken); max-width: 260px; margin-top: 2px; }
.mr-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 9px; background: var(--ok-fill); }
.mr-bar span { position: absolute; left: calc(100% + 8px); top: -5px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.mr-bar.big { height: 7px; max-width: none; margin: 4px 0 6px; }
.mr-r { display: flex; align-items: center; gap: 10px; }
.mr-r .amt { font-size: 15px; }
.mr-ok { width: 30px; height: 30px; border-radius: 50%; border: 1.5px dashed var(--line-strong); background: transparent; color: var(--muted); display: grid; place-items: center; transition: all .15s; }
.mr-ok:hover { border-style: solid; border-color: var(--ok-fill); background: var(--ok-soft); color: var(--ok); }
.group-h.late { color: var(--bad); }

/* theo người */
.mpeople { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; padding: 14px; }
.mperson { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); color: inherit; transition: border-color .15s, transform .1s; }
.mperson:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.mperson.pos { box-shadow: inset 3px 0 0 var(--m-in); } .mperson.neg { box-shadow: inset 3px 0 0 var(--m-out); }
.mp-t { display: grid; min-width: 0; } .mp-t b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-s { font-size: 12px; color: var(--muted); } .mp-s em { font-style: normal; color: var(--bad); font-weight: 600; }
.mp-r { display: grid; justify-items: end; gap: 1px; } .mp-r .amt { font-size: 15.5px; }
.mp-k { font-size: 11px; color: var(--muted); }
.mp-head { display: flex; gap: 14px; align-items: center; padding: 4px 2px 6px; }
.mp-big { font-family: var(--font-display); font-size: 15px; color: var(--fg-2); }
.mp-amt { font-size: 28px; display: block; }
.mlist { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .mlist .mrow:first-child { border-top: 0; }
.mtop { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 18px; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; text-align: left; }
.mtop:first-of-type { border-top: 0; } .mtop > span:nth-child(2) { flex: 1; min-width: 0; } .mtop em { font-style: normal; color: var(--bad); font-size: 12px; } .mtop:hover { background: var(--surface-2); }

/* hoàn ứng */
.mpipe { display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.mp-st { display: grid; gap: 2px; text-align: left; padding: 12px 16px; border: 0; border-right: 1px solid var(--line); background: transparent; color: inherit; position: relative; }
.mp-st:last-child { border-right: 0; }
.mp-st > span:first-child { font-size: 11.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.mp-st i { font-style: normal; width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; background: var(--sunken); }
.mp-st b { font-size: 20px; font-weight: 600; } .mp-st .amt { font-size: 12.5px; color: var(--fg-2); font-weight: 500; }
.mp-st.on { background: var(--surface-2); } .mp-st.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2.5px; border-radius: 3px; background: var(--m-co); }
.mp-st:not(:last-child):not(:first-child)::before { content: '›'; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); color: var(--line-strong); font-size: 18px; z-index: 1; background: var(--surface); line-height: 1; }
.mreimb { display: grid; }
.mr-headrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px; flex-wrap: wrap; }
.mri { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: center; padding: 0 0 0 18px; border-top: 1px solid var(--line); }
.mri input { width: 16px; height: 16px; accent-color: var(--m-co); }
.mri.sel { background: color-mix(in srgb, var(--m-co) 5%, transparent); }
.mri-b { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 18px 9px 4px; border: 0; background: transparent; color: inherit; text-align: left; }
.mri-t { display: grid; min-width: 0; } .mri-t b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mri-t span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mri-r { display: grid; justify-items: end; gap: 3px; }
.mbulk-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.mbulk-x { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 3px; border-radius: 12px; border: 1px dashed var(--line-strong); }
.mrx-files { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.mrx-dl { border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); color: var(--ok); background: var(--ok-soft); animation: pop .2s ease-out; }
.mbulk { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 92%, transparent); backdrop-filter: blur(8px); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* báo cáo */
.mreport { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.mrep { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--line); }
.mrp { display: grid; gap: 2px; padding: 14px 18px; border-right: 1px dashed var(--rule); }
.mrp:last-child { border-right: 0; }
.mrp > span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.mrp .amt, .mrp b { font-size: 21px; font-weight: 600; } .mrp.in .amt { color: var(--m-in); } .mrp.out .amt { color: var(--m-out); } .mrp.co .amt { color: var(--m-co); }
.mrp i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.mbars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; height: 150px; padding: 18px 18px 8px; align-items: end; }
.mb { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; justify-items: center; font-size: 11px; color: var(--muted); }
.mb-cols { display: flex; align-items: end; gap: 4px; height: 100%; width: 100%; justify-content: center; }
.mb-cols i { width: 38%; max-width: 22px; border-radius: 5px 5px 2px 2px; min-height: 2px; }
.b-got { background: var(--ok-fill); } .b-new { background: color-mix(in srgb, var(--warn) 75%, transparent); }
.mb.cur span { color: var(--fg); font-weight: 700; }

/* form chi tiết */
.mform { display: grid; gap: 14px; }
.mkinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mkg { display: grid; gap: 6px; align-content: start; }
.mkg-b { display: grid; gap: 5px; }
.mkind { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); font-size: 13px; font-weight: 500; text-align: left; transition: all .12s; }
.mkind:hover { border-color: color-mix(in srgb, var(--kc) 45%, var(--line)); }
.mkind.on { border-color: var(--kc); background: color-mix(in srgb, var(--kc) 10%, var(--surface)); color: var(--fg); font-weight: 600; box-shadow: 0 0 0 1px var(--kc); }
.mgrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mgrid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.minp { position: relative; display: block; flex: 1; min-width: 0; }
.minp .inp { width: 100%; padding-right: 34px; font-size: 14px; }
.minp-cur { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); pointer-events: none; }
.mcur { width: 78px; flex: none; padding: 0 6px; }
.mdq { display: flex; flex-wrap: wrap; gap: 4px; }
.mdq button { height: 22px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); font-size: 11.5px; color: var(--fg-2); }
.mdq button:hover { border-color: var(--line-strong); color: var(--fg); }
.mco { border: 1px dashed var(--line-strong); border-radius: 13px; padding: 12px 14px 14px; display: grid; gap: 12px; margin: 0; min-width: 0; }
.mco legend { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--fg-2); }
.mstep { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.mstep button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 0; border-right: 1px solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--muted); font-weight: 500; }
.mstep button:last-child { border-right: 0; }
.mstep i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; background: var(--sunken); }
.mstep button.past { color: var(--fg-2); background: color-mix(in srgb, var(--m-co) 6%, var(--surface)); } .mstep button.past i { background: var(--m-co); color: #fff; }
.mstep button.on { color: #fff; background: var(--m-co); font-weight: 600; } .mstep button.on i { background: rgba(255,255,255,.25); color: #fff; }
.mpays, .mimgs { display: grid; gap: 8px; padding: 12px 14px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); }
.mp-h { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.mpay { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; border-top: 1px dashed var(--line); }
.mpay.add { flex-wrap: wrap; border-top: 0; padding-top: 6px; }
.mpay.add .minp { flex: 0 1 170px; } .mpay.add .inp.grow { min-width: 150px; }
.mdone { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 600; font-size: 13.5px; }
.mi-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.mi { width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); padding: 0; background: var(--surface); }
.mi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mi.add { display: grid; place-items: center; align-content: center; gap: 4px; border-style: dashed; color: var(--muted); font-size: 11.5px; }
.mi.add:hover { color: var(--accent-ink); border-color: var(--accent); }
.mimg-view { position: absolute; inset: 0; z-index: 5; background: rgba(10, 12, 11, .86); display: grid; grid-template-rows: 1fr auto; gap: 12px; padding: 18px; place-items: center; animation: fade .15s; }
.mimg-view img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.modal:has(.mimg-view) { position: relative; }

/* nhắc nợ + QR */
.mremind { display: grid; gap: 16px; }
.mremind.has-qr { grid-template-columns: minmax(0, 1fr) 230px; align-items: start; }
.mremind textarea { font-size: 14px; line-height: 1.55; padding: 10px 12px; resize: vertical; }
.mqr { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 14px; border-radius: 16px; background: #fff; color: #1d2420; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.mqr .muted { color: #6b736e; } .mqr b { font-size: 18px; }
.mqr.empty-qr { background: var(--surface-2); color: var(--muted); font-size: 13px; }
.qrsvg { display: block; border-radius: 6px; }
.small-qr { align-self: start; }
.mset-bank { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 16px; align-items: start; }
.mrates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mrates label { display: flex; align-items: center; gap: 6px; font-size: 12px; } .mrates .inp { width: 100%; }

/* chia nhóm, định kỳ */
.msplit { display: grid; gap: 8px; }
.msp { display: grid; grid-template-columns: minmax(0, 1fr) 190px 30px; gap: 8px; align-items: center; }
.msp-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.msp-amt { position: relative; display: block; min-width: 0; }
.msp-amt .minp { width: 100%; }
.msp-amt .inp::placeholder { color: color-mix(in srgb, var(--accent) 70%, var(--muted)); opacity: 1; font-style: italic; }
.msp-auto { position: absolute; left: 11px; bottom: -13px; line-height: 1; font-size: 10px; font-weight: 600; letter-spacing: .03em; color: var(--accent); text-transform: uppercase; pointer-events: none; }
.msp-reset { position: absolute; top: 50%; right: 28px; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--sunken); color: var(--fg-2); }
.msp-reset:hover { background: var(--accent-soft); color: var(--accent); }
.msp.fixed .msp-amt .inp { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); font-weight: 600; padding-right: 54px; }
.msp { margin-bottom: 10px; }
.msp-me { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink, var(--accent)); font-weight: 650; }
.msp-tip { display: flex; align-items: center; gap: 6px; margin: -2px 0 4px; font-size: 12.5px; color: var(--fg-2); }
.msp-tip svg { color: var(--accent); flex: none; }
.msp-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.msp-sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12.5px; color: var(--fg-2); text-align: right; }
.msp-sum b { color: var(--fg); font-weight: 650; }
.msp-sum b.txt-late { color: var(--bad); }
.msp-v { text-align: right; padding-right: 8px; color: var(--fg-2); }
.mrec { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.mrec.paused { opacity: .65; }
.mrec.open { border-color: color-mix(in srgb, #a5683a 45%, var(--line)); box-shadow: var(--shadow-1); }
.mrec-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mrec-main { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.mrec-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrec-prog { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--fg-2); padding-left: 42px; }
.mrec-stat b { color: var(--fg); font-weight: 700; }
.mrec-stat.ok b { color: var(--ok); } .mrec-stat.warn b { color: var(--warn); }
.mrec-stat em { color: var(--warn); font-style: normal; font-weight: 600; }
.mrec-bar { position: relative; flex-basis: 100%; height: 5px; border-radius: 5px; background: var(--sunken); overflow: hidden; }
.mrec-bar i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, #a5683a 45%, transparent); border-radius: inherit; }
.mrec-bar i.d { background: var(--ok); }
.mrec-more { display: grid; gap: 8px; padding-left: 42px; }
.mrec-dates, .mrec-hist { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mrec-d { display: inline-grid; justify-items: center; padding: 4px 9px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; }
.mrec-d small { font-size: 10.5px; color: var(--muted); }
.mrec-h { font: 600 11.5px var(--font-mono); padding: 2px 8px; border-radius: 999px; background: var(--sunken); color: var(--fg-2); }
.mrec-h.done { background: var(--ok-soft); color: var(--ok); } .mrec-h.late { background: var(--bad-soft); color: var(--bad); } .mrec-h.open { background: var(--warn-soft); color: var(--warn); }
.mrec-act { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.mrec-rule { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: inherit; font: inherit; text-align: left; transition: border-color .15s, background .15s; }
.mrec-rule:hover { border-color: #a5683a; background: color-mix(in srgb, #a5683a 7%, var(--surface)); }
.mrec-rule > svg { color: #a5683a; flex: none; }
.mrec-rule span { flex: 1; display: grid; gap: 2px; min-width: 0; }
.mrec-rule small { color: var(--muted); font-size: 12px; }
.mrec-rule em { font-style: normal; font-weight: 650; color: #a5683a; font-size: 13px; }
.mrec-kinds { flex-wrap: wrap; height: auto; }
@media (max-width: 640px) { .mrec-prog, .mrec-more { padding-left: 0; } }

/* khóa riêng */
.mlock { max-width: 380px; margin: 40px auto; padding: 28px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.mlock .inp { width: 100%; text-align: center; height: 40px; }
.mlock-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }

/* thẻ ở Hôm nay */
.mtoday .card-h { padding: 12px 14px; }
.mt-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 8px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; text-align: left; }
.mt-row:first-of-type { border-top: 0; }
.mt-row:hover { background: var(--surface-2); }
.mt-t { display: grid; min-width: 0; } .mt-t b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-t span { font-size: 11.5px; color: var(--muted); }
.mt-row.late .mt-t span { color: var(--bad); font-weight: 600; }
.mt-row .amt { font-size: 13.5px; }
.mt-more { display: block; padding: 2px 14px 8px; font-size: 12px; color: var(--muted); }
.mt-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 14px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.mt-sum .amt { font-size: 12.5px; }
.mtoday .mq { padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.mt-add { display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--accent-ink); font-weight: 500; font-size: 13px; text-align: left; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.mt-add:hover { background: var(--accent-soft); }

/* lịch + nhật ký */
.di-h.mny-h { color: var(--m-in); }
.mny-i .amt { font-size: 12px; margin-left: auto; }
.mny-dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.mc-badges { display: inline-flex; align-items: center; gap: 5px; }
.mc-mny { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--m-in); background: color-mix(in srgb, var(--m-in) 12%, transparent); border-radius: 5px; padding: 0 4px; line-height: 16px; }
.dots i.mny { background: var(--m-in); opacity: 1; border-radius: 1.5px; }
.mjr { overflow: hidden; }
.mjr-h { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 12px; }
.mjr-h > div { display: grid; gap: 2px; } .mjr-h b { font-family: var(--font-display); font-weight: 500; font-size: 14px; } .mjr-h span { font-size: 12.5px; color: var(--muted); }
.mjr-ic { font-size: 22px; line-height: 1; }
.mjr .mq { padding: 10px 14px 12px; border-top: 1px solid var(--line); }

/* thanh tab dưới 8 mục */
@media (max-width: 760px) {
  .tabs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .tabs a { font-size: 9px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; padding-left: 1px; padding-right: 1px; }
}
@media (max-width: 960px) {
  .mledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml:nth-child(2) { border-right: 0; } .ml:nth-child(-n+2) { border-bottom: 1px dashed var(--rule); }
  .mreport { grid-template-columns: minmax(0, 1fr); }
  .mkinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mpipe { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; }
}
@media (max-width: 640px) {
  .ml { padding: 12px 14px 10px; } .ml-v { font-size: 21px; } .ml-s { font-size: 13.5px; }
  .mq-prev, .mq-tips { padding-left: 0; } .mq-hint, .mqm-ic { display: none; }
  .mrow { padding: 10px 14px; gap: 10px; grid-template-columns: 30px minmax(0, 1fr) auto; } .mrow .mk { width: 30px !important; height: 30px !important; }
  .mr-r { gap: 6px; } .mr-r .amt { font-size: 13.5px; } .mr-ok { width: 28px; height: 28px; }
  .mr-bar span { display: none; }
  .msearch .inp { width: 100%; } .msearch { flex: 1; }
  .mgrid2, .mgrid3 { grid-template-columns: minmax(0, 1fr); }
  .mremind.has-qr, .mset-bank { grid-template-columns: minmax(0, 1fr); }
  .mrep { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mrp:nth-child(2) { border-right: 0; } .mrp:nth-child(-n+2) { border-bottom: 1px dashed var(--rule); }
  .mstep button { font-size: 11px; gap: 3px; padding: 0 2px; } .mstep i { display: none; }
  .mpeople { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .msp { grid-template-columns: minmax(0, 1fr) 138px 28px; }
  .msp-top { grid-template-columns: minmax(0, 1fr); }
  .mrates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mtabs { width: 100%; } .mtabs button { flex: 1; justify-content: center; padding: 0 6px; font-size: 12px; } .mtabs button svg { display: none; }
}
.mform textarea.inp, .mremind textarea.inp { height: auto; min-height: 60px; padding: 8px 10px; line-height: 1.5; }
.mremind textarea.inp { min-height: 190px; }
.mq-kind select { max-width: 170px; text-overflow: ellipsis; }
.tabs a .tl { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   ĐIỀU HƯỚNG — thanh bên (máy tính) & thanh dưới (điện thoại)
   ===================================================================== */
.side nav { gap: 3px; }
.side nav a { position: relative; gap: 10px; padding: 7px 10px 7px 7px; transition: background .18s, color .18s; }
.nav-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--muted); transition: background .18s, color .18s, transform .18s; }
.nav-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side nav a:hover .nav-ic { color: var(--fg); background: var(--surface); box-shadow: var(--shadow-1); }
.side nav a.on { background: var(--surface); color: var(--fg); font-weight: 600; box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
.side nav a.on::before { content: ''; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--accent); }
.side nav a.on .nav-ic { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 70%, transparent); transform: scale(1.04); }
.side nav a.on .badge { background: var(--bad); color: #fff; }
@media (max-height: 760px) { .side-plant { display: none; } .side { gap: 12px; } .side nav a { padding-block: 4px; } }

@media (max-width: 960px) {
  .tabs { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; padding-top: 7px; }
  .tabs a, .tabs > button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 0 2px; border: 0; background: transparent; font: inherit; font-size: 11px !important; letter-spacing: 0 !important; font-weight: 500; color: var(--muted); text-decoration: none; min-width: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .tab-ic { position: relative; width: 56px; height: 30px; border-radius: 999px; display: grid; place-items: center; transition: background .2s, color .2s; }
  .tabs .on { color: var(--accent-ink) !important; font-weight: 700; }
  .tabs .on .tab-ic { background: var(--accent-soft); color: var(--accent-ink); animation: tabpop .28s cubic-bezier(.3, 1.4, .5, 1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
  .tabs .tl { max-width: 100%; padding: 0 2px; }
}
@keyframes tabpop { from { transform: scaleX(.55); opacity: .4; } }
.tab-dot { position: absolute; top: 3px; right: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--surface); }
.navscrim { align-items: end; padding: 0; z-index: 75; }
.navsheet { width: 100%; max-width: 560px; margin: 0 auto; background: var(--surface); border-radius: 22px 22px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--shadow-2); animation: sheetup .24s cubic-bezier(.2, .9, .3, 1); }
@keyframes sheetup { from { transform: translateY(40%); opacity: .3; } }
.ns-grab { display: block; width: 40px; height: 4px; border-radius: 9px; background: var(--line-strong); margin: 2px auto 12px; }
.ns-h { display: grid; gap: 2px; margin-bottom: 14px; } .ns-h b { font-family: var(--font-display); font-size: 16px; font-weight: 500; } .ns-h span { font-size: 12.5px; color: var(--muted); }
.ns-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ns-it { position: relative; }
.ns-it a { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); color: var(--fg-2); text-decoration: none; font-size: 12px; font-weight: 500; text-align: center; }
.ns-ic { position: relative; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-1); color: var(--fg-2); }
.ns-ic .tab-dot { top: -2px; right: -2px; }
.ns-t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-it.on a { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.ns-it.on .ns-ic { background: var(--accent); color: var(--on-accent); }
.ns-pin { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; display: grid; place-items: center; background: transparent; color: var(--line-strong); }
.ns-pin.on { color: var(--accent-ink); background: var(--surface); box-shadow: var(--shadow-1); }

/* =====================================================================
   SẮP XẾP TRANG HÔM NAY
   ===================================================================== */
.today-side.tall { position: static; }
.laylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lay { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: opacity .15s, box-shadow .15s; }
.lay.dragging { box-shadow: 0 0 0 2px var(--accent); opacity: .7; }
.lay.off { background: var(--surface-2); } .lay.off .lay-n, .lay.off .lay-ic { opacity: .45; }
.lay-grip { color: var(--muted); cursor: grab; display: grid; }
.lay-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.lay-n { flex: 1; min-width: 0; font-weight: 500; }
.lay-mv { display: inline-flex; }
.seg.sm button { height: 24px; padding: 0 8px; font-size: 11.5px; }
.tgl { position: relative; width: 40px; height: 24px; border-radius: 999px; border: 0; background: var(--line-strong); padding: 0; flex: none; transition: background .2s; }
.tgl i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.tgl.on { background: var(--accent); } .tgl.on i { transform: translateX(16px); }
@media (max-width: 640px) { .lay-col { display: none; } .lay { padding: 7px 8px; gap: 8px; } }

/* =====================================================================
   SỔ TIỀN — thẻ "ví" ở Hôm nay
   ===================================================================== */
.mwallet { border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.mw-top { position: relative; overflow: hidden; padding: 14px 16px 14px; color: #f3f7f4;
  background: linear-gradient(135deg, #1f4b3f 0%, #2c6655 55%, #3d7a6a 100%); }
:root[data-theme="dark"] .mw-top { background: linear-gradient(135deg, #133129 0%, #1d4a3d 60%, #24584a 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mw-top { background: linear-gradient(135deg, #133129 0%, #1d4a3d 60%, #24584a 100%); } }
.mw-pat { position: absolute; right: -20px; top: -10px; width: 220px; height: 130px; pointer-events: none; }
.mw-pat circle { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 14; }
.mw-h { position: relative; display: flex; align-items: center; gap: 10px; }
.mw-h b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15.5px; color: #fff; }
.mw-h .grow span { font-size: 12px; color: rgba(255, 255, 255, .72); }
.mw-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.mw-eye, .mw-open { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 0; background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; }
.mw-eye:hover, .mw-open:hover { background: rgba(255, 255, 255, .22); }
.mw-stats { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.mw-stats a { display: grid; gap: 1px; padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; min-width: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.mw-stats a:hover { background: rgba(255, 255, 255, .17); }
.mw-stats a > span:first-child { font-size: 11.5px; line-height: 1.25; letter-spacing: 0; color: rgba(255, 255, 255, .7); font-weight: 600; }
.mw-stats .amt { font-size: 17px; color: #fff; }
.mw-stats a:nth-child(1) .amt { color: #b9f2d3; } .mw-stats a:nth-child(2) .amt { color: #ffd2bd; } .mw-stats a:nth-child(3) .amt { color: #d4d6ff; }
.mw-stats i { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .6); }
.mw-body { display: grid; }
.mw-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px dashed var(--line); background: transparent; color: inherit; text-align: left; }
.mw-row:hover { background: var(--surface-2); }
.mw-av { position: relative; display: inline-grid; }
.mw-av i { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.mw-t { display: grid; min-width: 0; } .mw-t b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mw-t span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-r { display: grid; justify-items: end; gap: 2px; } .mw-r .amt { font-size: 14px; }
.mw-due { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--sunken); color: var(--fg-2); white-space: nowrap; }
.mw-due.late { background: var(--bad-soft); color: var(--bad); } .mw-due.soon { background: var(--warn-soft); color: var(--warn); }
.mw-calm { display: flex; gap: 8px; align-items: center; padding: 14px 16px 6px; font-size: 12.5px; color: var(--muted); }
.mw-add { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 14px 14px; height: 38px; border-radius: 12px; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--line-strong)); background: color-mix(in srgb, var(--accent-soft) 50%, transparent); color: var(--accent-ink); font-weight: 600; font-size: 13px; text-decoration: none; }
.mw-add:hover { background: var(--accent-soft); border-style: solid; }
.mwallet .mq { padding: 10px 14px 14px; }
.mwallet .amt.hid { color: inherit; opacity: .75; }
.mav.org { border-radius: 30%; }
.mp-lab { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--sunken); color: var(--fg-2); font-size: 11px; font-weight: 500; vertical-align: 1px; }
.warnt { color: var(--warn); font-style: normal; } .okt { color: var(--ok); font-style: normal; }

/* ô chọn người */
.cpk { position: relative; }
.cpk .inp { width: 100%; }
.cpk-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow-2); padding: 4px; max-height: 300px; overflow-y: auto; }
.cpk-o { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px; background: transparent; color: inherit; text-align: left; font-size: 13.5px; }
.cpk-o.hi, .cpk-o:hover { background: var(--surface-2); } .cpk-o.on { background: var(--accent-soft); }
.cpk-o.add { color: var(--accent-ink); font-weight: 500; border-top: 1px dashed var(--line); border-radius: 0 0 9px 9px; }
.cpk-plus { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); }
.cpk-new { display: grid; gap: 6px; margin-top: 6px; padding: 10px; border-radius: 10px; background: var(--warn-soft); }
.cpk-sel { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 6px 5px 6px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }
.cpk-sel b { font-weight: 600; }
.mq-chip.newp { background: var(--accent-soft); color: var(--accent-ink); }
.mq-kind.need { --kc: var(--warn); border-color: var(--warn); background: var(--warn-soft); animation: needpulse 1.6s ease-in-out infinite; }
@keyframes needpulse { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 25%, transparent); } }
.hint.warnt { color: var(--warn); }

/* hoàn ứng — 3 bước */
.mreimb2 { display: grid; gap: 16px; }
.mr-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 18px; padding: 18px 20px; align-items: center; background: linear-gradient(120deg, color-mix(in srgb, var(--m-co) 9%, var(--surface)), var(--surface) 70%); }
.mrh-main { display: grid; gap: 2px; }
.mrh-v { font-size: 30px; color: var(--m-co); }
.mrh-s { font-size: 12.5px; color: var(--muted); }
.mrh-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: s; }
.mrh-flow li { position: relative; display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.mrh-flow li b { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; background: var(--sunken); color: var(--muted); }
.mrh-flow li.on b { background: var(--m-co); color: #fff; }
.mrh-flow li span { display: grid; gap: 1px; } .mrh-flow li i { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.mrh-flow li:not(:last-child)::after { content: '›'; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); color: var(--line-strong); font-size: 18px; background: var(--surface); line-height: 1; z-index: 1; }
.mri.nock { grid-template-columns: minmax(0, 1fr); padding-left: 6px; }
.mri .amt { font-size: 14px; }
.mbatch { border-top: 1px solid var(--line); }
.mbatch .mri { border-top: 1px dashed var(--line); }
.mb-h { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 18px; background: var(--surface-2); }
.mb-d { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; flex-wrap: wrap; } .mb-d .muted { font-weight: 400; font-size: 12.5px; }
.mb-h .amt { font-size: 16px; }
.mbatch.done .mb-h { background: transparent; }
.mrst { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 11px; background: var(--surface-2); }
.mr-step.s-sub { background: color-mix(in srgb, var(--m-co) 14%, var(--surface)); color: var(--m-co); }
@media (max-width: 760px) {
  .mr-hero { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .mrh-flow { grid-template-columns: minmax(0, 1fr); } .mrh-flow li:not(:last-child)::after { display: none; }
  .mb-h { grid-template-columns: minmax(0, 1fr) auto; } .mb-h > .row { grid-column: 1 / -1; justify-content: flex-end; }
  .mbulk .seg { order: 2; }
}

/* =====================================================================
   SỔ TIỀN v3 — tổng quan tài chính gọn, rõ (thay ledger giấy kẻ & thẻ ví gradient)
   ===================================================================== */
.mic { display: inline-grid; place-items: center; flex: none; border-radius: 10px; }
.mic-in { color: var(--m-in); background: color-mix(in srgb, var(--m-in) 13%, var(--surface)); }
.mic-out { color: var(--m-out); background: color-mix(in srgb, var(--m-out) 13%, var(--surface)); }
.mic-co { color: var(--m-co); background: color-mix(in srgb, var(--m-co) 13%, var(--surface)); }
.mic-late { color: var(--bad); background: var(--bad-soft); border-radius: 50%; }
.mbal-card { padding: 20px 22px; }
.mbal { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr); gap: 16px 28px; align-items: center; }
.mbal-net { display: grid; gap: 2px; }
.mbal-k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mbal-v { font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; }
.mbal-v.pos { color: var(--m-in); } .mbal-v.neg { color: var(--m-out); }
.mbal-f { font-size: 12.5px; color: var(--muted); }
.mbal-bars { display: grid; gap: 8px; }
.mbb { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12px; color: var(--fg-2); }
.mbb-t { display: flex; height: 12px; border-radius: 999px; background: var(--sunken); overflow: hidden; gap: 2px; }
.mbb-t i { display: block; height: 100%; transition: width .5s cubic-bezier(.3, .8, .3, 1); }
.mbb-t i:first-child { border-radius: 999px 0 0 999px; } .mbb-t i:last-child { border-radius: 0 999px 999px 0; } .mbb-t i:only-child { border-radius: 999px; }
.b-in { background: var(--m-in); } .b-co { background: var(--m-co); } .b-out { background: var(--m-out); }
.mbal-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mbt { display: flex; gap: 11px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); color: inherit; min-width: 0; transition: border-color .15s, transform .1s, background .15s; }
.mbt:hover { border-color: var(--line-strong); background: var(--surface); transform: translateY(-1px); }
.mbt-b { display: grid; min-width: 0; }
.mbt-l { font-size: 12px; color: var(--muted); font-weight: 600; }
.mbt-v { font-size: 19px; }
.mbt-in .mbt-v { color: var(--m-in); } .mbt-out .mbt-v { color: var(--m-out); } .mbt-co .mbt-v { color: var(--m-co); }
.mbt-n { font-size: 11.5px; color: var(--muted); } .mbt-n em { font-style: normal; color: var(--bad); font-weight: 600; }
.mbal-late { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--line)); background: var(--bad-soft); color: var(--bad); font-size: 13px; text-align: left; }
.mbal-late > span { flex: 1; } .mbal-late .amt { color: var(--bad); }
/* bản gọn trong thẻ Hôm nay */
.mbal.compact { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 4px 14px 14px; }
.mbal.compact .mbal-v { font-size: 26px; }
.mbal.compact .mbb { grid-template-columns: 74px minmax(0, 1fr); font-size: 11.5px; }
.mbal.compact .mbb-t { height: 8px; }
.mbal.compact .mbal-tiles { gap: 6px; }
.mbal.compact .mbt { flex-direction: column; align-items: flex-start; gap: 6px; padding: 9px 10px; border-radius: 12px; }
.mbal.compact .mbt-v { font-size: 15px; }
.mbal.compact .mbt-l { font-size: 11px; }
.mwallet { position: relative; }
.mwallet::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--m-in), var(--m-co) 55%, var(--m-out)); opacity: .85; }
.mwallet .mw-h { display: flex; align-items: center; gap: 10px; padding: 14px 12px 8px 14px; }
.mwallet .mw-h b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--fg); }
.mwallet .mw-h .grow span { font-size: 12px; color: var(--muted); } .mwallet .mw-h .grow span.late { color: var(--bad); font-weight: 600; }
.mwallet .mw-ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
.mwallet .mw-body { border-top: 1px solid var(--line); }
.mwallet .amt.hid { color: var(--muted); opacity: 1; }
@media (max-width: 760px) {
  .mbal { grid-template-columns: minmax(0, 1fr); }
  .mbal-card { padding: 16px; }
  .mbal-v { font-size: 28px; }
  .mbal-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mbal:not(.compact) .mbt { padding: 10px 12px; }
  .mbal.compact .mbal-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ô nhập số tiền lớn + đọc thành chữ */
.mamt { display: grid; grid-template-columns: minmax(0, 1fr); }
.minp.big .inp { height: 48px; font-size: 21px; font-weight: 600; letter-spacing: .01em; padding-right: 44px; }
.minp.big .minp-cur { font-size: 15px; font-weight: 600; top: 24px; right: 14px; }
.minp-help { display: block; margin-top: 5px; font-size: 12.5px; color: var(--accent-ink); font-style: italic; min-height: 1em; }
.minp { position: relative; }
.minp:not(.big) .minp-cur { top: 50%; }
.mcur { height: 48px; }
.row .minp.big + .mcur, .mamt .mcur { height: 48px; width: 92px; font-weight: 600; }

/* hồ sơ */
.prof { display: flex; gap: 18px; align-items: flex-start; }
.prof-av { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--font-display); font-size: 28px; color: #fff; background: linear-gradient(140deg, var(--art-2), var(--art-3)); }
.prof-f { flex: 1; min-width: 0; display: grid; gap: 14px; }
.prof-f .ninp { max-width: 360px; }
.brand-link { text-decoration: none; color: inherit; border-radius: 12px; }
.brand-link:hover small { color: var(--accent-ink); text-decoration: underline; }
.row:has(> .minp.big) { align-items: flex-start; }
.mbal-late > span { text-align: left; }
.mwallet .mw-h .grow { min-width: 0; } .mwallet .mw-h .grow span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mwallet .mw-open { border: 0; background: transparent; width: auto; height: auto; border-radius: 8px; color: var(--accent-ink); }
@media (max-width: 760px) {
  .mwallet .mw-open span { display: none; }
  .mbal.compact .mic { display: none; }
  .mbal.compact .mbt-n em { display: none; }
  .mbal.compact .mbt { gap: 2px; }
}
.mwallet { container-type: inline-size; }
.mbal.compact .mbb { grid-template-columns: 96px minmax(0, 1fr); }
@container (max-width: 440px) {
  .mwallet .mw-open span { display: none; }
  .mbal.compact .mic { display: none; }
  .mbal.compact .mbt-n em { display: none; }
  .mbal.compact .mbt { gap: 2px; }
  .mbal.compact .mbt-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
@media (max-width: 640px) {
  .hb-table .nm { min-width: 118px; max-width: 128px; padding: 4px 8px 4px 10px; font-size: 12.5px; white-space: normal; line-height: 1.25; display: table-cell; }
  .hb-table td.nm { overflow: hidden; }
}
.mbal-late > .mic { flex: none; }
@media (max-width: 640px) {
  .money .ph > :last-child { flex-wrap: nowrap; gap: 6px; }
  .money .mh-b { padding: 0 10px; }
}
@media (max-width: 400px) { .money .mh-b span { display: none; } .money .mh-b { width: 34px; padding: 0; } }
@container (max-width: 360px) {
  .mbal.compact .mbal-tiles { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mbal.compact .mbt { flex-direction: row; align-items: center; padding: 7px 10px; }
  .mbal.compact .mbt-b { display: flex; align-items: baseline; justify-content: space-between; width: 100%; gap: 8px; }
  .mbal.compact .mbt-n { display: none; }
}

/* =====================================================================
   LỊCH THÁNG — điện thoại: ô sạch, dấu nhỏ, chọn ngày xem ngay bên dưới
   ===================================================================== */
.mgrid.compact { gap: 2px; padding: 6px 6px 8px; }
.mgrid.compact .mday { position: relative; height: 58px; border-radius: 12px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding: 5px 0 0; color: var(--fg); transition: background .15s; }
@media (hover: hover) { .mgrid.compact .mday:hover { background: var(--surface-2); } }
.mgrid.compact .mday .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 500; }
.mgrid.compact .mday.we .n { color: var(--bad); }
.mgrid.compact .mday .ln { font-size: 9px; margin-top: -1px; color: var(--muted); opacity: .8; }
.mgrid.compact .mday .ln.first { color: var(--accent); opacity: 1; }
.mgrid.compact .mday.today .n { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.mgrid.compact .mday.today .ln { color: var(--accent-ink); opacity: 1; }
.mgrid.compact .mday.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.mgrid.compact .mday.out { opacity: .35; }
.mgrid.compact .mday.h-light, .mgrid.compact .mday.h-busy, .mgrid.compact .mday.h-overload { background: transparent; }
.mgrid.compact .mday.sel.h-light, .mgrid.compact .mday.sel.h-busy, .mgrid.compact .mday.sel.h-overload { background: var(--accent-soft); }
.mk2 { display: flex; gap: 3px; height: 5px; margin-top: auto; margin-bottom: 8px; }
.mk2 i { display: block; flex: none; width: 5px; height: 5px; border-radius: 50%; padding: 0; border: 0; }
.mk2 .k-ev { background: var(--art-3); } .mk2 .k-open { background: var(--muted); } .mk2 .k-late { background: var(--bad); } .mk2 .k-ok { background: var(--ok-fill); }
.mk2 .k-mny { background: var(--m-in); border-radius: 1.5px; }
.mday .load { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2.5px; border-radius: 3px; background: transparent; }
.mday.h-busy .load { background: var(--warn); } .mday.h-overload .load { background: var(--bad); }
.mday-ag { overflow: hidden; }
.mda-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 16px 8px; background: linear-gradient(170deg, color-mix(in srgb, var(--art-1) 35%, var(--surface)), transparent); }
.mda-d { display: flex; align-items: baseline; gap: 8px; } .mda-d b { font-size: 28px; font-weight: 500; letter-spacing: -.03em; } .mda-d span { font-size: 13px; color: var(--fg-2); }
.mday-ag .dayitems { padding: 0 10px 6px; }
.mday-ag .dc-add { margin-bottom: 12px; }
.legend .lg-dot { width: 8px; height: 8px; border-radius: 50%; } .legend .lg-dot.sq { border-radius: 2px; } .legend .lg-bar { width: 14px; height: 3px; border-radius: 3px; vertical-align: 3px; }

.topbar .brand-name { white-space: nowrap; }
.topbar .brand { min-width: 0; } .topbar .brand-name small { overflow: hidden; text-overflow: ellipsis; }

/* Lịch tháng điện thoại: hôm nay là một khối gồm cả ngày dương và âm, không che chữ */
.mgrid.compact .mday .nw { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 34px; padding: 3px 5px 4px; border-radius: 11px; line-height: 1; }
.mgrid.compact .mday .nw .n { width: auto; height: auto; border-radius: 0; font-size: 14px; line-height: 1.15; display: block; }
.mgrid.compact .mday .nw .ln { margin-top: 2px; line-height: 1; }
.mgrid.compact .mday.today .n { background: none; color: inherit; }
.mgrid.compact .mday.today .nw { background: var(--accent); color: var(--on-accent); box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--accent) 80%, transparent); }
.mgrid.compact .mday.today .nw .ln { color: var(--on-accent); opacity: .85; }
.mgrid.compact .mday.today.we .n { color: var(--on-accent); }

/* Nhắc nhẹ khi thứ tự ngày bị ngược */
.dwarn { display: grid; gap: 6px; margin-top: 10px; }
.dwarn-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; font-weight: 550; border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.dwarn-r > svg { flex: none; }
.dwarn-r > span { flex: 1; min-width: 160px; }
.dwarn-fix { border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: var(--surface); color: var(--warn); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 650; }
.dwarn-fix:hover { background: var(--warn); color: #fff; }
.qadd .dwarn { margin-top: 8px; }

/* Khung giờ sự kiện: bắt đầu – kết thúc */
.trange { display: grid; gap: 6px; min-width: 0; }
.tr-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.tr-dash { color: var(--muted); font-weight: 600; }
.tr-hint { font-style: italic; }
.tr-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.tr-chips .chipbtn { height: 28px; padding: 0 9px; font-family: var(--font-mono); font-size: 12px; }
.tr-dur { height: 34px; width: auto; min-width: 92px; padding-right: 26px; font-size: 13px; }
.trange .tag.warn { display: inline-flex; align-items: center; gap: 4px; background: var(--warn-soft); color: var(--warn); }
.trange .tag.warn button { border: 0; background: none; color: inherit; display: grid; place-items: center; padding: 0; width: 16px; height: 16px; }
.trange.compact { display: contents; }
.trange.compact .tr-row { display: contents; }
.trange.compact .dwarn { flex-basis: 100%; }

/* Phạm vi sửa cho chuỗi lặp */
.scope-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.scope-bar.wide { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.scope-l { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 75%, var(--fg)); }
.scope-bar .seg { flex-wrap: wrap; height: auto; justify-self: start; }
.scope-bar .seg button.on { color: #6a48f0; }
.scope-h { grid-column: 1 / -1; color: var(--fg-2); font-size: 12px; line-height: 1.45; }
@media (max-width: 560px) { .scope-bar { grid-template-columns: minmax(0, 1fr); } }

/* Địa điểm */
.placef { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.placef-in { position: relative; flex: 1 1 220px; min-width: 0; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px 0 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--muted); }
.placef-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.placef-in input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; color: var(--fg); }
.placef-in .df-x { position: static; }
.placef-map { flex: none; }
.qadd .placef { flex: 1 1 260px; }
.xi.place { display: inline-flex; align-items: center; gap: 3px; max-width: 220px; color: var(--fg-2); text-decoration: none; }
.xi.place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xi.place:hover { color: var(--accent); }
.di-place { display: flex; align-items: center; gap: 3px; margin-top: 1px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placef-in input.inp { border: 0 !important; box-shadow: none !important; background: transparent !important; height: 100%; padding: 0; min-height: 0; }
.placef-in input::-webkit-calendar-picker-indicator { display: none !important; }
.di-place.di-tz { color: var(--tz); }
.xi.place, .di-place { font-family: var(--font-body); letter-spacing: 0; }

/* Múi giờ */
:root { --tz: #2f6a8a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tz: #86bddb; } }
:root[data-theme="dark"] { --tz: #86bddb; }
.tzsel { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 10px; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--muted); max-width: 100%; min-width: 0; }
.tzsel.on { border-style: solid; border-color: color-mix(in srgb, var(--tz) 55%, var(--line)); color: var(--tz); background: color-mix(in srgb, var(--tz) 7%, var(--surface)); }
.tzsel select { border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 13px; height: 100%; min-width: 0; max-width: 260px; padding-right: 4px; cursor: pointer; }
.tzsel.compact select { max-width: 150px; }
.tzrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.tzrow > * { min-width: 0; }
.tzconv { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--tz); font-weight: 550; }
.tzconv > svg { flex: none; margin-top: 2px; }
.tzconv > span { min-width: 0; line-height: 1.45; }
.tzconv .tzday { display: inline-block; margin-left: 6px; }
.tzconv.same { color: var(--muted); font-weight: 500; }
.q-tzconv { margin-top: 8px; }
.tzday { padding: 1px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 11.5px; }
.tzhome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--fg-2); }
.tzhome small { flex-basis: 100%; line-height: 1.45; }

/* ---------- Dòng thời gian trong ngày ---------- */
.tl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tl-day { font-size: 13px; color: var(--fg-2); font-weight: 550; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tl-card { padding: 14px 16px 12px; }
.tl-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tl-allday { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: start; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.tl-lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; padding-top: 6px; }
.tl-ad { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tl-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 0; border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer;
  color: var(--accent-ink); background: var(--accent-soft); overflow-wrap: anywhere; }
.tl-chip small { font-weight: 500; opacity: .75; white-space: nowrap; }
.tl-chip.task { color: var(--fg-2); background: var(--surface-2); font-weight: 500; }
.tl-chip.done { text-decoration: line-through; opacity: .6; }
.tl-grid { position: relative; margin: 8px 0 6px 52px; }
.tl-h { position: absolute; left: -52px; right: 0; height: 0; border-top: 1px dashed color-mix(in srgb, var(--line) 85%, transparent); }
.tl-h > span { position: absolute; left: 0; top: -8px; width: 44px; font-size: 11px; color: var(--muted); text-align: right; background: var(--surface); padding-right: 4px; line-height: 16px; }
.tl-h.last { border-top-style: solid; }
.tl-lane { position: absolute; inset: 0 0 0 4px; }
.tl-b { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; overflow: hidden; border: 0; text-align: left; font: inherit; cursor: pointer; padding: 4px 8px 4px 10px; border-radius: 8px;
  color: var(--fg); background: color-mix(in srgb, var(--art-3) 13%, var(--surface)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--art-3) 75%, transparent); transition: filter .12s, box-shadow .12s; z-index: 1; }
.tl-b:hover, .tl-b:focus-visible { filter: brightness(.97); z-index: 3; box-shadow: inset 3px 0 0 var(--art-3), 0 4px 14px rgba(0, 0, 0, .12); }
.tl-time { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--fg-2); white-space: nowrap; }
.tl-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.tl-sub { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tl-b { container-type: inline-size; }
@container (max-width: 96px) {
  .tl-time { display: none; }
  .tl-sub { display: none; }
  .tl-title { font-size: 11.5px; -webkit-line-clamp: 2; }
}
.tl-b.short { flex-direction: row; align-items: center; gap: 6px; padding-top: 2px; padding-bottom: 2px; }
.tl-b.short .tl-title { -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; display: block; min-width: 0; }
.tl-b.point { background: color-mix(in srgb, var(--art-3) 8%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--art-3) 45%, transparent); }
.tl-b.task { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--muted); border: 1px dashed var(--line); }
.tl-b.done { opacity: .55; }
.tl-b.done .tl-title { text-decoration: line-through; }
.tl-b.cf { box-shadow: inset 3px 0 0 var(--warn), 0 0 0 1.5px color-mix(in srgb, var(--warn) 55%, transparent); }
.tl-cf { position: absolute; top: 4px; right: 5px; color: var(--warn); display: inline-flex; }
.tl-b.cf .tl-time, .tl-b.cf .tl-title { padding-right: 14px; }
.tl-b.ls-live, .tl-b.ls-started { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); box-shadow: inset 3px 0 0 var(--ok); }
.tl-b.ls-live.cf, .tl-b.ls-started.cf { box-shadow: inset 3px 0 0 var(--ok), 0 0 0 1.5px color-mix(in srgb, var(--warn) 55%, transparent); }
.tl-b.ls-ended { opacity: .6; }
.tl-b.cut-s { border-top-left-radius: 2px; border-top-right-radius: 2px; }
.tl-b.cut-e { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }
.tl-now { position: absolute; left: -10px; right: 0; height: 0; border-top: 2px solid var(--bad); z-index: 4; pointer-events: none; }
.tl-now::before { content: ''; position: absolute; left: -4px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--bad); }
.tl-now > span { position: absolute; left: -44px; top: -9px; width: 40px; text-align: center; line-height: 16px; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--bad); border-radius: 5px; padding: 1px 5px; }
.tl-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; pointer-events: none; text-align: center; padding: 0 20px; }
.tl-foot { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; display: grid; gap: 6px; }
.tl-add { margin-top: 10px; }
.tl-go span { white-space: nowrap; }
@media (max-width: 640px) {
  .tl-card { padding: 12px 10px 10px; }
  .tl-grid { margin-left: 44px; }
  .tl-h { left: -44px; }
  .tl-h > span { width: 38px; }
  .tl-now > span { left: -40px; width: 36px; font-size: 10px; }
  .tl-allday { grid-template-columns: 44px minmax(0, 1fr); }
}

/* ---------- Lịch .ics ---------- */
.ics-tabs { margin-bottom: 14px; }
.ics-opts { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; margin: 4px 0 14px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.ics-opt { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 180px; }
.ics-opt .inp { min-width: 0; }
.ics-chk { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--fg); flex: 1 1 240px; cursor: pointer; }
.ics-chk input { margin-top: 3px; flex: none; }
.ics-chk small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ics-tip { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; color: var(--accent-ink); background: var(--accent-soft); }
.ics-tip > svg { flex: none; margin-top: 2px; }
.ics-src { overflow-wrap: anywhere; min-width: 0; }
.ics-tbl td:first-child { white-space: nowrap; }
.ics-tbl td.mono { white-space: nowrap; }
@media (max-width: 640px) {
  .ics-tbl thead { display: none; }
  .ics-tbl, .ics-tbl tbody { display: block; }
  .ics-tbl tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); }
  .ics-tbl td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
  .ics-tbl td.tname, .ics-tbl td:last-child { grid-column: 1 / -1; }
  .ics-tbl td.tname { font-size: 13.5px; }
  .ics-tbl td:last-child:empty { display: none; }
}

/* =====================================================================
   MỤC TIÊU & DỰ ÁN  (tiền tố gl-)  ·  --gc = màu riêng của mục tiêu
   ===================================================================== */
.gl-page, .gl-detail { --gc: var(--accent); }
.gl-bar { display: block; flex: 1; min-width: 40px; height: 8px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.gl-bar.thin { height: 5px; }
.gl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--gc) 70%, #fff), var(--gc)); transition: width .5s cubic-bezier(.3, .7, .2, 1); }
.gl-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.gl-ring > svg { position: absolute; inset: 0; }
.glr-t { stroke: color-mix(in srgb, var(--gc) 16%, var(--sunken)); }
.glr-p { stroke: var(--gc); transition: stroke-dashoffset .6s cubic-bezier(.3, .7, .2, 1); }
.glr-c { position: relative; display: grid; justify-items: center; line-height: 1; font-size: 11px; font-weight: 600; color: var(--fg); }
.gl-sprout { display: block; overflow: visible; }
.gls-pot { fill: color-mix(in srgb, var(--gc) 72%, #7a4a2a); }
.gls-rim { fill: color-mix(in srgb, var(--gc) 86%, #7a4a2a); }
.gls-stem { fill: none; stroke: #2e9b62; stroke-width: 2.6; stroke-linecap: round; }
.gls-leaf { fill: #3db577; }
.gls-seed { fill: #a9793f; }
.gls-bud { fill: color-mix(in srgb, var(--gc) 80%, #fff); }
.gls-flower ellipse { fill: color-mix(in srgb, var(--gc) 75%, #fff); }
.gls-flower circle { fill: #f6c544; }
.gl-sprout.st4 .gls-flower { transform-origin: 32px 15px; animation: gl-bloom .7s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes gl-bloom { from { transform: scale(.2) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.gl-kicker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 650; color: color-mix(in srgb, var(--gc) 70%, var(--fg)); }

/* nhãn mục tiêu trên dòng việc */
.gl-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 190px; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gc) 35%, var(--line)); background: color-mix(in srgb, var(--gc) 10%, var(--surface)); color: color-mix(in srgb, var(--gc) 68%, var(--fg)); font-size: 11.5px; font-weight: 600; flex: none; min-width: 0; }
.gl-chip:hover { background: color-mix(in srgb, var(--gc) 20%, var(--surface)); }
.gl-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* tổng quan */
.gl-sum { display: grid; grid-template-columns: minmax(260px, 1.1fr) minmax(0, 2fr); gap: 18px; padding: 18px 20px; align-items: center; }
.gl-sum-ring { display: flex; align-items: center; gap: 16px; min-width: 0; }
.gl-sum-ring > div { display: grid; gap: 3px; min-width: 0; }
.gl-sum-ring b { font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.gl-sum-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gl-sum-k > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.gl-sum-k .v { font-size: 26px; font-weight: 500; line-height: 1.1; }
.gl-sum-k .k { font-size: 12px; color: var(--fg-2); }
.gl-sum-k .ok .v { color: var(--ok); } .gl-sum-k .warn .v { color: var(--warn); }
.gl-sum-k .warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }

.gl-nexts { padding-bottom: 8px; }
.gl-nx { display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-top: 1px solid var(--line); cursor: pointer; min-width: 0; }
.gl-nx:hover { background: var(--surface-2); }
.gl-nx-t { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
.gl-filter { justify-content: space-between; gap: 10px; }

/* lưới thẻ */
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.gl-card { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); cursor: pointer; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; min-width: 0; }
.gl-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--gc), color-mix(in srgb, var(--gc) 45%, transparent)); }
.gl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--gc) 40%, var(--line)); }
.gl-card:focus-visible { outline: 2px solid var(--gc); outline-offset: 2px; }
.gl-card.st-paused, .gl-card.st-dropped { opacity: .72; }
.gl-card.st-done { background: color-mix(in srgb, var(--ok-soft) 45%, var(--surface)); }
.gl-card-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.gl-card-tt { min-width: 0; display: grid; gap: 3px; }
.gl-card h3 { font-size: 16.5px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gl-pct { font-size: 24px; font-weight: 500; color: color-mix(in srgb, var(--gc) 75%, var(--fg)); align-self: start; }
.gl-pct small { font-size: 12px; margin-left: 1px; color: var(--muted); }
.gl-dots { display: flex; gap: 4px; }
.gl-dots i { flex: 1; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--gc) 14%, var(--sunken)); overflow: hidden; min-width: 4px; }
.gl-dots i b { display: block; height: 100%; background: var(--gc); border-radius: inherit; }
.gl-dots i.on b { width: 100% !important; }
.gl-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12.5px; color: var(--fg-2); }
.gl-card-meta .tag { height: 22px; font-size: 11.5px; }
.gl-kids { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.gl-kid { display: grid; grid-template-columns: minmax(0, 1fr) 70px 34px; gap: 8px; align-items: center; font-size: 12.5px; }
.gl-kid-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-kid .mono { text-align: right; font-size: 11.5px; color: var(--fg-2); }
.gl-next { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; background: color-mix(in srgb, var(--gc) 8%, var(--surface-2)); border: 1px dashed color-mix(in srgb, var(--gc) 35%, var(--line)); min-width: 0; }
.gl-next-t { flex: 1; min-width: 0; display: grid; font-size: 13.5px; font-weight: 550; overflow-wrap: anywhere; line-height: 1.3; }
.gl-next-t small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; }
.gl-next.hint { color: var(--muted); font-size: 12.5px; gap: 6px; }

/* mẫu & màn hình chào */
.gl-welcome { padding: 22px; display: grid; gap: 16px; }
.gl-welcome-h { display: flex; align-items: center; gap: 18px; --gc: #e8862a; }
.gl-welcome-h h2 { font-size: 22px; } .gl-welcome-h p { margin: 6px 0 0; color: var(--fg-2); max-width: 640px; line-height: 1.55; }
.gl-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.gl-tpl { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: all .15s; min-width: 0; }
.gl-tpl:hover { border-color: var(--gc); background: color-mix(in srgb, var(--gc) 7%, var(--surface)); transform: translateY(-1px); }
.gl-tpl-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--gc) 15%, var(--surface)); margin-bottom: 4px; }
.gl-tpl b { font-size: 14px; font-weight: 650; } .gl-tpl small { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* chi tiết */
.gl-crumbs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: -8px; }
.gl-hero { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 20px; background: linear-gradient(150deg, color-mix(in srgb, var(--gc) 11%, var(--surface)), var(--surface) 55%); }
.gl-hero.st-done { background: linear-gradient(150deg, color-mix(in srgb, var(--ok-soft) 80%, var(--surface)), var(--surface) 60%); }
.gl-hero-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.gl-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; border: 1px solid color-mix(in srgb, var(--gc) 35%, var(--line)); background: color-mix(in srgb, var(--gc) 14%, var(--surface)); flex: none; padding: 0; align-self: start; }
button.gl-icon:hover { background: color-mix(in srgb, var(--gc) 24%, var(--surface)); }
.gl-icon.lg { width: 60px; height: 60px; font-size: 30px; align-self: end; }
.gl-hero-tt { min-width: 0; display: grid; gap: 6px; }
textarea.gl-title { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.25; color: var(--fg); padding: 2px 6px; margin-left: -6px; width: calc(100% + 6px); border: 1px solid transparent; border-radius: 9px; background: transparent; resize: none; overflow: hidden; }
textarea.gl-title:hover { border-color: var(--line); } textarea.gl-title:focus { outline: none; border-color: var(--accent); background: var(--surface); }
textarea.gl-title.done { color: var(--ok); }
.gl-why { margin: 0; color: var(--fg-2); font-style: italic; line-height: 1.5; overflow-wrap: anywhere; }
.gl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-hero-ring .glr-c { gap: 2px; } .gl-hero-ring .glr-c b { font-size: 17px; font-weight: 500; }
.gl-cheer { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--gc) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gc) 22%, var(--line)); color: color-mix(in srgb, var(--gc) 45%, var(--fg)); font-weight: 550; font-size: 13.5px; }
.gl-cheer > svg { flex: none; color: var(--gc); } .gl-cheer > span { flex: 1; min-width: 180px; }
.gl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gl-facts > div { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.gl-facts .k { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.gl-facts .v { font-size: 21px; font-weight: 500; line-height: 1.2; }
.gl-facts .s { font-size: 11.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gl-acts .grow { flex: 1; }

.gl-metric { padding: 16px 20px; display: grid; gap: 12px; }
.gl-metric-n { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gl-metric-n .mono { font-size: 34px; font-weight: 500; color: color-mix(in srgb, var(--gc) 75%, var(--fg)); line-height: 1; }
.gl-metric-n small { font-size: 14px; color: var(--fg-2); }
.gl-metric-a { gap: 8px; } .gl-metric-a .inp.num { width: 92px; }

/* hành trình */
.gl-jwrap { overflow: hidden; }
.gl-journey { display: flex; gap: 0; padding: 14px 18px 18px; overflow-x: auto; scrollbar-width: thin; }
.gl-step { position: relative; flex: 1 0 118px; max-width: 220px; display: grid; justify-items: center; gap: 4px; padding: 0 6px; border: 0; background: transparent; text-align: center; color: var(--fg-2); min-width: 0; }
.gl-step-line { position: absolute; top: 15px; left: 50%; width: 100%; height: 4px; background: color-mix(in srgb, var(--gc) 14%, var(--sunken)); border-radius: 999px; overflow: hidden; }
.gl-step-line i { display: block; height: 100%; background: var(--gc); }
.gl-step-n { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid color-mix(in srgb, var(--gc) 30%, var(--line-strong)); font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--fg-2); transition: transform .15s; }
button.gl-step:hover .gl-step-n { transform: scale(1.1); }
.gl-step.done .gl-step-n { background: var(--gc); border-color: var(--gc); color: #fff; }
.gl-step.cur .gl-step-n { border-color: var(--gc); color: var(--gc); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gc) 18%, transparent); animation: gl-pulse 2.4s ease-in-out infinite; }
@keyframes gl-pulse { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--gc) 6%, transparent); } }
.gl-step.late:not(.done) .gl-step-n { border-color: var(--bad); color: var(--bad); }
.gl-step.end .gl-step-n { font-size: 16px; border-style: dashed; }
.gl-step.end.done .gl-step-n { background: var(--ok-soft); border-color: var(--ok-fill); border-style: solid; }
.gl-step-t { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--fg); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gl-step.cur .gl-step-t { color: color-mix(in srgb, var(--gc) 70%, var(--fg)); }
.gl-step-s { font-size: 11px; color: var(--muted); min-height: 14px; }
@media (prefers-reduced-motion: reduce) { .gl-step.cur .gl-step-n, .gl-sprout.st4 .gls-flower { animation: none; } }

/* các chặng + việc */
.gl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.gl-msl, .gl-side { display: grid; gap: 12px; min-width: 0; }
.gl-ms { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); min-width: 0; }
.gl-ms.cur { border-color: color-mix(in srgb, var(--gc) 50%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc) 10%, transparent), var(--shadow-1); }
.gl-ms.done { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.gl-ms.loose { border-style: dashed; }
.gl-ms-h { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0; }
.gl-ms-n { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; padding: 0; border: 2px solid color-mix(in srgb, var(--gc) 35%, var(--line-strong)); background: var(--surface); font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--fg-2); }
.gl-ms.done .gl-ms-n { background: var(--gc); border-color: var(--gc); color: #fff; }
.gl-ms.cur .gl-ms-n { border-color: var(--gc); color: var(--gc); }
.gl-ms-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gl-ms-name, .inp.bare.gl-ms-name { font-size: 15px; font-weight: 650; height: auto; padding: 2px 6px; margin-left: -6px; width: 100%; min-width: 0; }
b.gl-ms-name { padding-left: 0; margin-left: 0; }
.gl-ms.done .gl-ms-name { color: var(--fg-2); }
.gl-ms-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--fg-2); }
.gl-ms-sub .datef.bare { height: 24px; font-size: 12px; padding: 0 4px; margin-left: -4px; }
.gl-ms-sub .tag { height: 20px; font-size: 11px; }
.gl-here { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: #fff; background: var(--gc); padding: 2px 8px; border-radius: 999px; }
.gl-ms-bar { width: 84px; flex: none; display: flex; }
.gl-ms-menu { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px 56px; }
.gl-ms-b { display: grid; gap: 2px; padding: 4px 8px 8px; border-top: 1px dashed var(--line); }
.gl-task { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; min-width: 0; }
.gl-task:hover { background: var(--surface-2); }
.gl-task-t { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; font-size: 14px; }
.gl-task-t > svg { vertical-align: -2px; margin-right: 5px; color: var(--art-3); }
.gl-task.done .gl-task-t { color: var(--muted); text-decoration: line-through; }
.gl-task-x { color: var(--muted); display: inline-flex; flex: none; }
.gl-task-hi { flex: none; font-size: 10.5px; font-weight: 700; color: var(--bad); background: var(--bad-soft); padding: 1px 7px; border-radius: 999px; }
.gl-task-d { flex: none; font-size: 11px; color: var(--muted); }
.gl-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 8px 4px 11px; margin-top: 2px; border-radius: 10px; color: var(--muted); min-width: 0; }
.gl-add:focus-within { background: var(--surface-2); color: var(--gc); }
.gl-add > svg { flex: none; }
.gl-add .inp.bare { flex: 1; min-width: 150px; height: 32px; }
.gl-ms-chk { display: flex; align-items: flex-start; gap: 9px; padding: 8px; font-size: 13px; color: var(--fg-2); cursor: pointer; }
.gl-ms-chk input { margin-top: 2px; accent-color: var(--gc); }
.gl-addms { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 16px; border: 1px dashed var(--line-strong); }
.gl-addms .inp { min-width: 160px; }
.gl-addms-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; border-radius: 16px; border: 1px dashed var(--line-strong); background: transparent; color: var(--fg-2); font-weight: 600; }
.gl-addms-btn:hover { border-color: var(--gc); color: var(--gc); background: color-mix(in srgb, var(--gc) 6%, transparent); }
.gl-sub { display: grid; padding: 4px 8px 10px; }
.gl-subi { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 12px; background: transparent; text-align: left; min-width: 0; }
.gl-subi:hover { background: var(--surface-2); }
.gl-subi-t { flex: 1; min-width: 0; display: grid; }
.gl-subi-t b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-subi-t small { font-size: 11.5px; color: var(--muted); }
.gl-subi.st-done b { color: var(--ok); }
.gl-subi > svg { color: var(--muted); flex: none; }
.gl-empty-s { padding: 4px 18px 16px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* hộp thoại */
.gl-form { display: grid; gap: 14px; }
.gl-form-top { display: flex; align-items: flex-end; gap: 12px; }
.gl-form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gl-form-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gl-form .seg { flex-wrap: wrap; } .gl-form .datef { width: 100%; } .gl-form .inp { width: 100%; }
.gl-per { min-width: 110px; text-align: center; font-weight: 600; }
.gl-icons { display: flex; flex-wrap: wrap; gap: 4px; }
.gl-icons button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid transparent; background: transparent; font-size: 18px; padding: 0; }
.gl-icons button:hover { background: var(--surface-2); }
.gl-icons button.on { border-color: var(--gc); background: color-mix(in srgb, var(--gc) 14%, var(--surface)); }
.gl-colors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gl-colors button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); padding: 0; }
.gl-colors button.on { box-shadow: 0 0 0 2px var(--fg); transform: scale(1.1); }
.gl-msed { display: grid; gap: 8px; }
.gl-msed-r { display: grid; grid-template-columns: auto minmax(0, 1fr) 150px auto; gap: 8px; align-items: center; }
.gl-msed-r .gl-ms-n { width: 26px; height: 26px; font-size: 11.5px; }
.gl-delopts { display: grid; gap: 8px; }
.gl-pick { display: grid; gap: 2px; max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.gl-pick-r { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; cursor: pointer; min-width: 0; }
.gl-pick-r:hover { background: var(--surface-2); } .gl-pick-r.on { background: var(--accent-soft); }
.gl-pick-t { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; }
.gl-pick-t > svg { vertical-align: -2px; margin-right: 5px; }
.gl-pick-other { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--fg-2); cursor: pointer; }

/* ghép vào trang khác */
.gl-tic { background: linear-gradient(140deg, #f2a84b, #e8862a); }
.gl-tlist { display: grid; padding: 2px 8px 10px; }
.gl-trow { display: grid; padding: 4px 0; border-top: 1px solid var(--line); min-width: 0; }
.gl-trow:first-child { border-top: 0; }
.gl-trow-h { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; background: transparent; border-radius: 12px; text-align: left; min-width: 0; }
.gl-trow-h:hover { background: var(--surface-2); }
.gl-trow-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.gl-trow-t b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-trow-t small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-trow-h .tag { height: 20px; font-size: 10.5px; padding: 0 7px; }
.gl-trow-n { display: flex; align-items: center; gap: 9px; margin: 0 8px 6px 20px; padding: 6px 9px; border-radius: 10px; background: color-mix(in srgb, var(--gc) 7%, var(--surface-2)); font-size: 13px; cursor: pointer; min-width: 0; }
.gl-trow-n > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.gl-trow-n .tick { width: 20px; height: 20px; }
.gl-tlist .di-more { margin: 6px 8px 0; text-decoration: none; }
.gl-fieldsec .gl-field { display: grid; gap: 8px; }
.gl-fieldsec .inp { width: 100%; }
.gl-fieldgo { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--gc) 28%, var(--line)); background: color-mix(in srgb, var(--gc) 7%, var(--surface)); font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--gc) 60%, var(--fg)); }
.gl-fieldgo:hover { background: color-mix(in srgb, var(--gc) 14%, var(--surface)); }
.repsel.gl-qsel.on { border-style: solid; border-color: color-mix(in srgb, #e8862a 50%, var(--line)); background: color-mix(in srgb, #e8862a 11%, var(--surface)); color: color-mix(in srgb, #e8862a 70%, var(--fg)); font-weight: 600; }
.repsel.gl-qsel select { max-width: 150px; }
.di-h.gl-dih { color: color-mix(in srgb, #e8862a 75%, var(--fg)); }
.di.gl-di { border-left: 3px solid var(--gc); border-radius: 4px 9px 9px 4px; background: color-mix(in srgb, var(--gc) 8%, transparent); }
.di.gl-di:hover { background: color-mix(in srgb, var(--gc) 16%, transparent); }
.gl-di-ic { flex: none; font-size: 15px; }
.mc-goal { font-size: 10px; line-height: 1; }
.gl-rep { grid-column: 1 / -1; }
.gl-rep .card-b { display: grid; gap: 2px; }
.gl-rep-r { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 2fr) 44px 110px; gap: 12px; align-items: center; padding: 7px 8px; border: 0; background: transparent; border-radius: 10px; text-align: left; font-size: 13.5px; min-width: 0; }
.gl-rep-r:hover { background: var(--surface-2); }
.gl-rep-t { display: flex; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.gl-rep-p { text-align: right; } .gl-rep-s { text-align: right; white-space: nowrap; }
.gl-hidnote { display: flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 12px; color: var(--muted); border-top: 1px dashed var(--line); }
.gl-hidnote a { color: var(--accent); font-weight: 600; }

@media (max-width: 1000px) { .gl-cols { grid-template-columns: minmax(0, 1fr); } .gl-sum { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .gl-hero { padding: 16px; } .gl-hero-main { grid-template-columns: auto minmax(0, 1fr); }
  .gl-hero-ring { grid-column: 1 / -1; justify-self: center; order: -1; }
  .gl-icon { width: 46px; height: 46px; font-size: 23px; border-radius: 13px; }
  textarea.gl-title { font-size: 21px; }
  .gl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-sum-k { grid-template-columns: minmax(0, 1fr); } .gl-sum-k > div { grid-template-columns: 44px minmax(0, 1fr); align-items: center; } .gl-sum-k .v { font-size: 22px; }
  .gl-grid { grid-template-columns: minmax(0, 1fr); }
  .gl-ms-bar { display: none; } .gl-ms-menu { padding-left: 14px; }
  .gl-form-2, .gl-form-3 { grid-template-columns: minmax(0, 1fr); }
  .gl-msed-r { grid-template-columns: auto minmax(0, 1fr) auto; } .gl-msed-r .datef-wrap, .gl-msed-r > .datef { grid-column: 2 / 3; grid-row: 2; }
  .gl-rep-r { grid-template-columns: minmax(0, 1fr) 44px; } .gl-rep-r .gl-bar { grid-column: 1 / -1; grid-row: 2; } .gl-rep-s { display: none; }
  .gl-welcome-h { flex-direction: column; align-items: flex-start; }
  .gl-nx { padding: 9px 12px; flex-wrap: wrap; } .gl-nx-t { flex-basis: calc(100% - 40px); }
  .gl-chip { max-width: 140px; }
}

.mk2 .k-goal { background: #e8862a; transform: rotate(45deg); border-radius: 1px; }
#flt-goal, #bulk-goal, #gl-pick-ms { max-width: 240px; text-overflow: ellipsis; }
.gl-fieldsec select, .gl-form select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.gl-fieldsec .gl-field, .gl-form .field { min-width: 0; }
.repsel.gl-qsel select { max-width: 150px; }

/* ---------- Mục tiêu: OKR · SMART · Kanban · Eisenhower · thói quen dẫn dắt · rà soát · dòng thời gian ---------- */
.gl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.gl-wig { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #f6c544; color: #5b4300; letter-spacing: .04em; font-size: 10px; }
.gl-card.wig { border-color: color-mix(in srgb, #f6c544 65%, var(--line)); box-shadow: 0 0 0 2px color-mix(in srgb, #f6c544 22%, transparent), var(--shadow-1); }
.gl-wigbtn { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px dashed var(--line-strong); background: transparent; font-size: 12px; font-weight: 600; color: var(--fg-2); }
.gl-wigbtn:hover { border-color: #d9a400; color: #a67c00; }
.gl-wigbtn.on { border-style: solid; border-color: #e3b21c; background: #f6c544; color: #5b4300; }
.gl-card-krs { display: grid; gap: 6px; }
.gl-card-krs .gl-kid { grid-template-columns: minmax(0, 1fr) 64px auto; }
.gl-card-krs .gl-kid .mono { min-width: 44px; }

.gl-krs .card-h { align-items: flex-start; }
.gl-krl { display: grid; }
.gl-kr { display: grid; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); min-width: 0; }
.gl-kr-h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gl-kr-ic { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--gc) 14%, var(--surface)); color: var(--gc); }
.gl-kr.done .gl-kr-ic { background: var(--gc); color: #fff; }
.gl-kr-t, .inp.bare.gl-kr-t { flex: 1; min-width: 0; font-weight: 650; font-size: 14.5px; height: auto; padding: 2px 6px; margin-left: -6px; }
b.gl-kr-t { margin-left: 0; padding-left: 0; }
.gl-kr-p { font-size: 17px; font-weight: 500; color: color-mix(in srgb, var(--gc) 75%, var(--fg)); flex: none; }
.gl-kr-bar { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--fg-2); }
.gl-kr-bar .mono { flex: none; white-space: nowrap; }
.gl-kr-a { gap: 6px; } .gl-kr-a .inp.num { width: 84px; height: 30px; }
.gl-kr-e { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.gl-kr-e label { display: grid; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--fg-2); }
.gl-kr-e .inp { height: 32px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); padding: 0 8px; width: 110px; }
.gl-kr-e .inp.num { width: 84px; }
.gl-kr-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px dashed var(--line); }
.gl-kr-new .inp.grow { flex: 1 1 220px; min-width: 0; } .gl-kr-new label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-2); }
.gl-kr-new .inp.num { width: 80px; } .inp.gl-kr-nu { width: 100px; }
.gl-kred-r { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto 72px 96px auto; gap: 6px; align-items: center; }
.gl-kred-r .inp { width: 100%; min-width: 0; } .gl-kred-r .inp.num { width: 100%; }

.gl-smart { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 25%, var(--line)); min-width: 0; }
.gl-smart.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, var(--line)); align-items: center; }
.gl-smart-l { display: inline-flex; gap: 3px; flex: none; }
.gl-smart-l i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: var(--surface); color: var(--muted); border: 1px solid var(--line-strong); }
.gl-smart-l i.on { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.gl-smart-t { display: grid; gap: 2px; min-width: 0; font-size: 12.5px; }
.gl-smart-t.ok { color: var(--ok); font-weight: 600; }
.gl-smart-b { border: 0; background: transparent; padding: 1px 0; text-align: left; font: inherit; color: var(--warn); overflow-wrap: anywhere; }
.gl-smart-b:not(:disabled):hover { text-decoration: underline; } .gl-smart-b:disabled { cursor: default; }

.gl-viewsw { justify-content: space-between; margin-bottom: -6px; }
.gl-wipnote { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); font-weight: 600; }
.gl-side.wide { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.gl-kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.gl-kbc { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 16px; background: var(--sunken); border: 1px solid var(--line); min-width: 0; min-height: 140px; transition: border-color .12s, background .12s; }
.gl-kbc.over { border-color: var(--gc); background: color-mix(in srgb, var(--gc) 9%, var(--sunken)); }
.gl-kbc.wip { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.gl-kbc > header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 4px; font-size: 13px; }
.gl-kbc > header .tag { height: 20px; font-size: 10.5px; }
.gl-kbl { display: grid; gap: 6px; }
.gl-kbi { display: grid; gap: 6px; padding: 9px 10px; border-radius: 11px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gc); cursor: grab; min-width: 0; box-shadow: var(--shadow-1); }
.gl-kbi:hover { border-color: color-mix(in srgb, var(--gc) 45%, var(--line)); border-left-color: var(--gc); }
.gl-kbi:active { cursor: grabbing; }
.gl-kbi.done { opacity: .7; border-left-color: var(--ok-fill); } .gl-kbi.done .gl-kbi-t { text-decoration: line-through; color: var(--muted); }
.gl-kbi-t { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.gl-kbi-t > svg { vertical-align: -2px; margin-right: 4px; color: var(--art-3); }
.gl-kbi-m { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.gl-kbi-m small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.gl-kbi-mv { margin-left: auto; display: inline-flex; gap: 2px; }
.gl-kbi-mv button { width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; padding: 0; color: var(--fg-2); }
.gl-kbi-mv button:hover { border-color: var(--gc); color: var(--gc); }
.gl-kb-empty { padding: 14px 8px; text-align: center; font-size: 12.5px; color: var(--muted); font-style: italic; }
.gl-kb-more { padding: 2px 6px; }
.gl-kbc .gl-add { background: var(--surface); border: 1px dashed var(--line-strong); }

.gl-hl { display: grid; padding: 0 14px 12px; gap: 10px; }
.gl-h { display: grid; gap: 6px; min-width: 0; }
.gl-h-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13.5px; }
.gl-h-t b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; } .gl-h-t .ok { color: var(--ok); } .gl-h-t .low { color: var(--warn); }
.gl-h-d { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.gl-h-d button { position: relative; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; padding: 0; color: #fff; }
.gl-h-d button small { font-size: 9.5px; color: var(--muted); font-weight: 600; }
.gl-h-d button.on { background: var(--gc); border-color: var(--gc); } .gl-h-d button.on small { display: none; }
.gl-h-d button.today { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc) 35%, transparent); }
.gl-h-d button:disabled { opacity: .35; }
.gl-h-x { justify-self: start; }
.gl-hpick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 14px; border-top: 1px dashed var(--line); }
.gl-hpick .chipbtn { height: auto; min-height: 28px; padding: 4px 10px; text-align: left; white-space: normal; }

.gl-rvl { display: grid; padding: 0 10px 10px; gap: 2px; }
.gl-rvi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 8px; border-radius: 10px; align-items: start; text-align: left; border: 0; background: transparent; font: inherit; color: inherit; width: 100%; }
.gl-rvi.as-btn:hover { background: var(--surface-2); }
.gl-rvi-c { font-size: 15px; line-height: 1.3; }
.gl-rvi-h { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; align-items: baseline; }
.gl-rvi p { margin: 3px 0 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; color: var(--fg-2); }
.gl-rvi p.gl-rvi-n { color: color-mix(in srgb, var(--gc, var(--accent)) 60%, var(--fg)); font-weight: 550; }
.gl-rvd { display: grid; gap: 14px; }
.gl-rvd-h { display: flex; align-items: center; gap: 14px; }
.gl-rvd-h > div { display: grid; gap: 4px; min-width: 0; } .gl-rvd-h b { font-size: 16px; overflow-wrap: anywhere; }
.gl-rvd-h .glr-c b { font-size: 14px; }
.gl-rvd-prev { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border-left: 3px solid var(--gc); font-size: 13.5px; }
.gl-rvd-prev small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 650; }
.gl-conf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gl-conf button { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: 13px; }
.gl-conf button span { font-size: 20px; }
.gl-conf button.on { box-shadow: 0 0 0 2px currentColor inset; }
.gl-conf button.on.c3 { color: var(--ok); background: var(--ok-soft); } .gl-conf button.on.c2 { color: var(--warn); background: var(--warn-soft); } .gl-conf button.on.c1 { color: var(--bad); background: var(--bad-soft); }
.gl-rvd .inp { width: 100%; }

.gl-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.gl-banner > div { flex: 1 1 240px; display: grid; gap: 2px; min-width: 0; } .gl-banner span { font-size: 13px; color: var(--fg-2); }
.gl-banner-ic { flex: none !important; font-size: 24px !important; }
.gl-banner.rv { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.gl-banner.wip { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.gl-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gl-how > div { display: grid; gap: 3px; align-content: start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.gl-how span { font-size: 22px; } .gl-how b { font-size: 14px; } .gl-how small { font-size: 12.5px; color: var(--fg-2); line-height: 1.45; }

.gl-mx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gl-mxc { display: grid; gap: 4px; align-content: start; padding: 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--qc) 30%, var(--line)); background: color-mix(in srgb, var(--qc) 6%, var(--surface)); min-height: 150px; min-width: 0; }
.gl-mxc > header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 0 2px 4px; }
.gl-mxc > header b { color: color-mix(in srgb, var(--qc) 75%, var(--fg)); font-size: 14px; } .gl-mxc > header small { font-size: 11px; color: var(--muted); flex: 1; }
.gl-mxi { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); min-width: 0; cursor: grab; }
.gl-mxi .tick { width: 20px; height: 20px; }
.gl-mxi-t { flex: 1; min-width: 0; display: grid; border: 0; background: transparent; text-align: left; font: inherit; font-size: 13.5px; padding: 0; overflow-wrap: anywhere; line-height: 1.3; color: var(--fg); }
.gl-mxi-t small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-mxi .sunbtn { flex: none; }

.gl-tl { overflow: hidden; }
.gl-tl-s { overflow-x: auto; scrollbar-width: thin; }
.gl-tl-in { padding: 12px 16px 6px; }
.gl-tl-ax { position: relative; height: 20px; margin-left: 220px; }
.gl-tl-ax span { position: absolute; top: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); padding-left: 4px; white-space: nowrap; }
.gl-tl-ax span.yr { color: var(--fg); font-weight: 600; }
.gl-tl-b { position: relative; display: grid; gap: 4px; padding: 6px 0 10px; }
.gl-tl-ov { position: absolute; top: 0; bottom: 0; left: 220px; right: 0; pointer-events: none; }
.gl-tl-g { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.gl-tl-now { position: absolute; top: -4px; bottom: 0; width: 2px; margin-left: -1px; background: var(--bad); z-index: 2; }
.gl-tl-now em { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 700; color: var(--bad); white-space: nowrap; background: var(--surface); padding: 0 4px; border-radius: 4px; }
.gl-tl-r { position: relative; z-index: 1; display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; height: 32px; border: 0; background: transparent; padding: 0; text-align: left; border-radius: 8px; }
.gl-tl-r:hover { background: color-mix(in srgb, var(--gc) 7%, transparent); }
.gl-tl-n { display: flex; align-items: center; gap: 6px; min-width: 0; padding-right: 10px; font-size: 13px; font-weight: 550; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gl-tl-n small { margin-left: auto; font-size: 11px; color: var(--muted); flex: none; padding-left: 6px; }
.gl-tl-track { position: relative; height: 18px; }
.gl-tl-bar { position: absolute; top: 0; height: 18px; border-radius: 9px; background: color-mix(in srgb, var(--gc) 22%, var(--sunken)); overflow: visible; min-width: 8px; }
.gl-tl-bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9px; background: var(--gc); max-width: 100%; }
.gl-tl-bar > b { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; transform: rotate(45deg); background: var(--surface); border: 2px solid var(--gc); border-radius: 2px; z-index: 1; }
.gl-tl-bar > b.on { background: var(--gc); border-color: var(--surface); }
.gl-tl-r.st-paused .gl-tl-bar, .gl-tl-r.st-dropped .gl-tl-bar { opacity: .5; } .gl-tl-r.late .gl-tl-bar { box-shadow: 0 0 0 1.5px var(--bad); }
.gl-tl-lg { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 16px 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.gl-tl-lg span { display: inline-flex; align-items: center; gap: 6px; }
.gl-tl-lg i { display: inline-block; } .gl-tl-lg i.b { width: 22px; height: 8px; border-radius: 4px; background: var(--line-strong); } .gl-tl-lg i.f { width: 22px; height: 8px; border-radius: 4px; background: var(--accent); } .gl-tl-lg i.m { width: 8px; height: 8px; transform: rotate(45deg); border: 2px solid var(--accent); border-radius: 2px; }

@media (max-width: 760px) {
  .gl-kb { grid-template-columns: minmax(0, 1fr); } .gl-kbc { min-height: 0; }
  .gl-mx { grid-template-columns: minmax(0, 1fr); } .gl-mxc { min-height: 0; }
  .gl-how { grid-template-columns: minmax(0, 1fr); }
  .gl-kred-r { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr) auto; } .gl-kred-r > .inp:first-child { grid-column: 1 / -1; }
  .gl-kr { padding: 12px 14px; } .gl-kr-new { padding: 12px 14px; }
  .gl-tl-ax { margin-left: 130px; } .gl-tl-ov { left: 130px; } .gl-tl-r { grid-template-columns: 130px minmax(0, 1fr); } .gl-tl-n small { display: none; }
  .gl-smart { flex-direction: column; gap: 6px; }
}
textarea.gl-kr-t { display: block; font: inherit; font-weight: 650; font-size: 14.5px; line-height: 1.35; color: var(--fg); border: 1px solid transparent; border-radius: 8px; background: transparent; resize: none; overflow: hidden; }
textarea.gl-kr-t:hover { border-color: var(--line); } textarea.gl-kr-t:focus { outline: none; border-color: var(--accent); background: var(--surface); }

/* ---------- Sửa hiển thị trên điện thoại hẹp (đo bằng phông chữ thật) ---------- */
.topbar > .row { flex-wrap: nowrap; min-width: 0; }
.topbar .sync { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .sync i { flex: none; }
.topbar .themebtn { flex: none; }
@media (max-width: 480px) {
  .mood { gap: 6px; }
  .moodq { padding: 9px 8px; border-radius: 14px; }
  .mq-words { gap: 5px; }
  .mq-words button { font-size: 12.5px; padding: 3px 9px 3px 7px; }
  .mq-ic { margin-right: 4px; }
}
@container (max-width: 920px) {
  .lg { align-items: center; }
  .lg-n { min-width: 1.2em; text-align: center; flex: none; }
  .lg-n.has-circle { margin: 0 8px 0 6px; }
  .lg-t { padding-bottom: 0; }
}
.topbar .sync { display: block; } .topbar .sync i { display: inline-block; margin-right: 7px; vertical-align: 1px; }
.tabs > button .tl { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Luồng làm việc: tab xem việc · dọn tồn · hộp chờ · rà soát tuần (tiền tố fl-) ---------- */
.fl-tabs { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--line); max-width: 100%; }
.fl-tabs a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--fg-2); text-decoration: none; white-space: nowrap; min-width: 0; }
.fl-tabs a:hover { color: var(--fg); }
.fl-tabs a.on { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-1); }
.fl-star { color: #d9a400; margin-right: 4px; font-size: .95em; }
.fl-bfilter { gap: 10px; } .fl-bfilter select.inp { max-width: 240px; }
.btn.glass.fl-tri { color: var(--bad); font-weight: 650; }
.fl-load { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 8px 16px; font-size: 12px; color: var(--fg-2); background: var(--surface-2); border-top: 1px solid var(--line); }
.fl-load > svg { flex: none; color: var(--muted); } .fl-load b { font-weight: 650; }
.fl-load.over { background: var(--warn-soft); color: var(--warn); }
.group-h.fl-gh { display: flex; align-items: center; gap: 6px; }
.later-note.warn { color: var(--warn); font-weight: 600; }
.fl-est { display: flex; flex-wrap: wrap; gap: 5px; } .fl-est .chipbtn { height: 28px; padding: 0 10px; font-size: 12.5px; }

.fl-step { display: grid; gap: 10px; }
.fl-prog { height: 5px; border-radius: 999px; background: var(--sunken); overflow: hidden; }
.fl-prog span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .35s; }
.fl-step-n { font-size: 11.5px; color: var(--muted); }
.fl-step-t { border: 0; background: transparent; padding: 0; text-align: left; font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--fg); overflow-wrap: anywhere; }
.fl-step-t:hover { color: var(--accent-ink); }
.fl-step-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .fl-step-m .tag svg { margin-right: 3px; }
.fl-step-note { margin: 0; font-size: 13px; color: var(--fg-2); padding: 8px 12px; border-radius: 10px; background: var(--surface-2); overflow-wrap: anywhere; }
.fl-q { margin: 4px 0 0; font-size: 13px; color: var(--fg-2); font-weight: 600; }
.fl-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.fl-act { display: grid; justify-items: start; gap: 1px; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--line-strong); background: var(--surface); text-align: left; min-width: 0; transition: transform .1s, border-color .12s, background .12s; }
.fl-act:hover { border-color: var(--accent); transform: translateY(-1px); }
.fl-act > span { font-size: 18px; line-height: 1.2; } .fl-act b { font-size: 13.5px; font-weight: 650; } .fl-act small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.fl-act.main { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.fl-act.on { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.fl-act.ok:hover { border-color: var(--ok); background: var(--ok-soft); } .fl-act.bad:hover { border-color: var(--bad); background: var(--bad-soft); }
.fl-pick { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); } .fl-pick .inp { width: 100%; max-width: 100%; min-width: 0; }
.fl-done { display: grid; justify-items: center; gap: 4px; padding: 26px 12px; text-align: center; }
.fl-done > span:first-child { font-size: 42px; } .fl-done b { font-size: 17px; font-family: var(--font-display); font-weight: 500; } .fl-done span { color: var(--fg-2); font-size: 13.5px; }

.fl-inic { background: linear-gradient(140deg, #6aa3ff, #2f6bff); } .fl-inic.ok { background: linear-gradient(140deg, #4cc38a, #169a6a); }
.fl-inadd { display: flex; align-items: center; gap: 8px; padding: 6px 14px 8px; color: var(--muted); border-top: 1px solid var(--line); }
.fl-inadd:focus-within { color: var(--accent); } .fl-inadd .inp.bare { flex: 1; min-width: 0; height: 34px; } .fl-inadd > svg { flex: none; }
.fl-inrow { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-top: 1px dashed var(--line); cursor: pointer; min-width: 0; }
.fl-inrow:hover { background: var(--surface-2); }
.fl-indot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid #2f6bff; flex: none; }
.fl-inrow-t { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; line-height: 1.35; }
.fl-inbox .di-more { margin: 4px 14px 10px; }

.fl-wsl { display: grid; gap: 8px; }
.fl-ws { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.fl-ws.ok { background: color-mix(in srgb, var(--ok-soft) 55%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 25%, var(--line)); }
.fl-ws-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; border: 2px solid var(--line-strong); color: var(--fg-2); background: var(--surface); }
.fl-ws.ok .fl-ws-n { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.fl-ws-b { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.fl-ws-b > b { font-size: 14.5px; } .fl-ws-b > span { font-size: 12.5px; color: var(--fg-2); line-height: 1.45; } .fl-ws-b .note-area { width: 100%; }
.fl-wkl { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-wk { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: 999px; background: #fdf3cf; color: #5b4300; font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.fl-wk button { border: 0; background: transparent; padding: 2px; display: grid; place-items: center; color: inherit; opacity: .6; border-radius: 50%; flex: none; } .fl-wk button:hover { opacity: 1; }
.fl-wj .fl-wk { padding-right: 10px; }
.fl-cands { display: grid; gap: 4px; width: 100%; max-height: 260px; overflow-y: auto; }
.fl-cand { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); text-align: left; min-width: 0; font-size: 13.5px; }
.fl-cand:hover { border-color: #d9a400; } .fl-cand.on { background: #fdf3cf; border-color: #e3b21c; color: #3d2e00; }
.fl-cand-t { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; } .fl-cand .fl-star { margin: 0; font-size: 15px; }
.fl-wb { margin-bottom: -2px; }
.fl-wj p { margin: 0 0 8px; line-height: 1.5; overflow-wrap: anywhere; }

.fl-rep { grid-column: 1 / -1; }
.fl-rk { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; padding: 4px 18px 16px; }
.fl-rk > div { display: grid; gap: 2px; align-content: start; justify-items: start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.fl-rk .v { font-size: 28px; font-weight: 500; line-height: 1.1; } .fl-rk .k { font-size: 13px; font-weight: 600; } .fl-rk .s { font-size: 11.5px; color: var(--muted); line-height: 1.4; } .fl-rk .btn { margin-top: 6px; }
.fl-rk .ok .v { color: var(--ok); } .fl-rk .warn .v { color: var(--warn); } .fl-rk .bad .v { color: var(--bad); }
.fl-rg { display: grid; gap: 6px; padding: 0 18px 16px; }
.fl-rg-r { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(60px, 2fr) 64px; gap: 12px; align-items: center; font-size: 13px; }
.fl-rg-t { display: flex; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .fl-rg-r .mono { text-align: right; font-size: 12px; }
:root[data-theme="dark"] .fl-wk, :root[data-theme="dark"] .fl-cand.on { background: #4a3a05; color: #ffe9a6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fl-wk, :root:not([data-theme="light"]) .fl-cand.on { background: #4a3a05; color: #ffe9a6; } }
@media (max-width: 640px) {
  .fl-tabs { display: flex; align-self: stretch; } .fl-tabs a { flex: 1; justify-content: center; padding: 0 6px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
  .fl-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fl-step-t { font-size: 18px; }
  .fl-rk { padding: 4px 14px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .fl-rg { padding: 0 14px 14px; } .fl-rg-r { grid-template-columns: minmax(0, 1fr) 56px; } .fl-rg-r .gl-bar { grid-column: 1 / -1; grid-row: 2; }
}

.kindc.fl-inb { background: color-mix(in srgb, #2f6bff 12%, var(--surface)); color: #2f6bff; margin-left: 6px; }

/* =====================================================================
   GỌN & SINH ĐỘNG — dòng việc gọn, chế độ Tập trung, chuyển động
   ===================================================================== */
/* dòng việc: trên màn hình rộng giữ cột trạng thái; trên điện thoại gom thành một dòng phụ */
.tstate.in, .t-doing { display: none; }
.t-est { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); }
.task.hi { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--bad) 70%, transparent); }
.btn.glass.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.fl-fmore { border: 1px dashed var(--line-strong); background: transparent; border-radius: 14px; padding: 12px; font-size: 13px; color: var(--fg-2); text-align: center; }
.fl-fmore:hover { border-color: var(--accent); color: var(--accent-ink); }
@media (max-width: 640px) {
  .task { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 14px; align-items: start; }
  .task > .tick { margin-top: 1px; }
  .task > .tstate, .task > .status { display: none; }
  .task .sunbtn { grid-column: 3; grid-row: 1; justify-self: end; margin: -4px -4px 0 0; }
  .task .meta { gap: 4px 8px; margin-top: 4px; }
  .task .meta .tstate.in { display: inline; font-size: 12px; }
  .task .meta .t-doing { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; font-weight: 650; }
  .task .meta .prio:not(.Cao), .task .meta .when { display: none; }
  .task .meta .tagchip, .task .meta .gl-chip { height: 20px; font-size: 11px; padding: 0 7px; }
  .task .tt { line-height: 1.35; }
}

/* dấu tick vẽ dần */
.tick-svg path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .28s cubic-bezier(.5, 0, .2, 1) .06s; }
.tick:hover .tick-svg path, .tick.on .tick-svg path { stroke-dashoffset: 0; }
.tick.on { animation: tick-pop .34s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tick-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.task.done .tt, .gl-task.done .gl-task-t { text-decoration: line-through; animation: strike .45s ease-out; }
@keyframes strike { from { text-decoration-color: transparent; } }
.task.done { animation: row-settle .4s ease-out; }
@keyframes row-settle { from { background: color-mix(in srgb, var(--ok-soft) 80%, transparent); } }

/* trang, thẻ và hộp thoại xuất hiện nhẹ nhàng */
.page { animation: page-in .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
.gl-grid > *, .gl-kbl > *, .fl-wsl > *, .fl-acts > * { animation: rise .32s cubic-bezier(.2, .7, .2, 1) backwards; }
.gl-grid > :nth-child(2), .fl-wsl > :nth-child(2), .fl-acts > :nth-child(2) { animation-delay: .04s; } .gl-grid > :nth-child(3), .fl-wsl > :nth-child(3), .fl-acts > :nth-child(3) { animation-delay: .08s; }
.gl-grid > :nth-child(4), .fl-wsl > :nth-child(4), .fl-acts > :nth-child(4) { animation-delay: .12s; } .gl-grid > :nth-child(n+5), .fl-wsl > :nth-child(n+5), .fl-acts > :nth-child(n+5) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.fl-step { animation: step-in .26s cubic-bezier(.2, .7, .2, 1); }
@keyframes step-in { from { opacity: 0; transform: translateX(18px); } }
.fl-done > span:first-child { animation: tick-pop .5s cubic-bezier(.3, 1.6, .5, 1); display: inline-block; }
.gl-sprout { animation: sprout-grow .6s cubic-bezier(.3, 1.5, .5, 1); transform-origin: 50% 95%; }
@keyframes sprout-grow { from { transform: scale(.72); } }
.gl-banner, .fl-load { animation: rise .3s ease-out; }
.count, .gl-pct, .gl-kr-p { transition: color .2s; }

/* kéo thả ở bảng */
.gl-kbi { transition: transform .15s, box-shadow .15s, opacity .15s, border-color .12s; }
.gl-kbi:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.gl-kbi.dragging { opacity: .35; transform: rotate(-1.5deg) scale(.98); }
.gl-kbc.over { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.gl-kbc.over .gl-kbl::after { content: ''; display: block; height: 44px; border-radius: 11px; border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); background: color-mix(in srgb, var(--accent) 8%, transparent); animation: rise .15s ease-out; }
.gl-mxc { transition: box-shadow .15s; }

/* thống nhất thẻ giữa trang mới và trang cũ */
.gl-card, .gl-ms, .gl-kbc, .gl-banner, .fl-ws, .gl-addms, .gl-addms-btn { border-radius: var(--r-lg); }
.gl-kbi, .fl-act, .gl-tpl { border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .page, .gl-grid > *, .gl-kbl > *, .fl-wsl > *, .fl-acts > *, .fl-step, .gl-sprout, .gl-banner, .fl-load, .tick.on, .task.done, .fl-done > span:first-child, .gl-kbc.over .gl-kbl::after { animation: none !important; }
  .task.done .tt, .gl-task.done .gl-task-t { animation: none; }
  .tick-svg path { transition: none; } .gl-kbi, .gl-kbi:hover { transition: none; transform: none; }
}

/* đang chờ / phụ thuộc · kế hoạch sáng · đóng ngày */
.fl-blk { display: inline-flex; align-items: center; gap: 3px; max-width: 180px; height: 22px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, #8b5cf6 12%, var(--surface)); color: color-mix(in srgb, #8b5cf6 75%, var(--fg)); font-size: 11.5px; font-weight: 600; min-width: 0; }
.fl-blk > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-blk small { font-size: 10.5px; opacity: .8; flex: none; }
.fl-blk.due { background: var(--warn-soft); color: var(--warn); }
.fl-waitadd { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line-strong); background: transparent; color: var(--fg-2); font-size: 13px; text-align: left; }
.fl-waitadd:hover { border-color: #8b5cf6; color: #8b5cf6; }
.fl-wait { display: grid; gap: 6px; } .fl-wait label { font-size: 12px; font-weight: 600; color: var(--fg-2); margin-top: 4px; }
.fl-wait .inp { width: 100%; max-width: 100%; min-width: 0; height: 36px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; background: var(--surface); } .fl-wait .chipbtn { height: 30px; }
.fl-link { border: 0; background: transparent; padding: 0; color: var(--accent); font-weight: 600; font-size: inherit; } .fl-link:hover { text-decoration: underline; }
.fl-wrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); min-width: 0; }
.fl-wrow.due { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: var(--warn-soft); }
.fl-wrow-t { flex: 1 1 180px; min-width: 0; display: grid; gap: 1px; border: 0; background: transparent; padding: 0; text-align: left; }
.fl-wrow-t b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .fl-wrow-t small { font-size: 12px; color: var(--fg-2); overflow-wrap: anywhere; }
.fl-plist { display: grid; gap: 4px; max-height: min(46vh, 420px); overflow-y: auto; }
.fl-prow { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); min-width: 0; transition: background .12s, border-color .12s; }
.fl-prow.on { background: color-mix(in srgb, #f6c544 14%, var(--surface)); border-color: color-mix(in srgb, #e3b21c 55%, var(--line)); }
.fl-prow-t { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; text-align: left; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; color: var(--fg); }
.fl-prow-t.static { padding-left: 6px; } .fl-prow small { font-size: 11.5px; color: var(--muted); flex: none; }
.fl-mev { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.fl-mev-r { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: 13px; } .fl-mev-r .mono { color: var(--fg-2); font-size: 12px; } .fl-mev-r span:last-child { overflow-wrap: anywhere; }
.fl-warn { color: var(--warn); font-weight: 600; } .fl-okt { color: var(--ok); font-weight: 600; }
.fl-planfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); }
.fl-cd-sum { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(140deg, color-mix(in srgb, var(--ok-soft) 80%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 22%, var(--line)); }
.fl-cd-n { font-size: 40px; font-weight: 500; color: var(--ok); line-height: 1; } .fl-cd-sum > div { display: grid; gap: 2px; min-width: 0; } .fl-cd-sum span { font-size: 12.5px; color: var(--fg-2); overflow-wrap: anywhere; }
.fl-cd-ok { padding: 10px 12px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 13.5px; }
.fl-faces { display: flex; gap: 8px; } .fl-faces button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); font-size: 22px; padding: 0; transition: transform .15s; }
.fl-faces button:hover { transform: scale(1.1); } .fl-faces button.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); transform: scale(1.12); }
.gl-banner.am { background: linear-gradient(120deg, color-mix(in srgb, #f6c544 22%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, #e3b21c 40%, var(--line)); }
.gl-banner.pm { background: linear-gradient(120deg, color-mix(in srgb, #6b5bd6 16%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, #6b5bd6 35%, var(--line)); }
@media (max-width: 640px) { .fl-mev-r { grid-template-columns: 84px minmax(0, 1fr); } .fl-blk { max-width: 150px; height: 20px; font-size: 11px; } }

.fl-cd-n { flex: none; white-space: nowrap; }
.fl-prow { flex-wrap: wrap; } .fl-prow-t { flex: 1 1 150px; } .fl-prow > .row { margin-left: auto; }

/* ===== v48 · Đồng hồ tập trung & chuông: nền phẳng, tĩnh; tên việc là nhân vật chính ===== */
.focus-ov { --fo1: #1f2d29; --fo2: #1f2d29; --fo3: #1f2d29; --fo-acc: #f0c27a; background: #1f2d29; animation: fo-in .25s ease; }
.focus-ov.ph-short, .focus-ov.ph-long { --fo1: #1d2c33; --fo2: #1d2c33; --fo3: #1d2c33; --fo-acc: #a5d8c6; background: #1d2c33; }
.focus-ov.ph-bell { --fo1: #29263a; --fo2: #29263a; --fo3: #29263a; --fo-acc: #e9cfa0; background: #29263a; }
@keyframes fo-in { from { opacity: 0; } }
.fo-bg { display: none; }
.fo-top .seg button.on, .focus-ov.ph-short .fo-top .seg button.on, .focus-ov.ph-long .fo-top .seg button.on, .fo-tabs button.on { color: var(--fo2); box-shadow: none; }
.fo-tabs b { background: rgba(0, 0, 0, .14); color: inherit; }
.fo-tabs button:not(.on) b { background: rgba(255, 255, 255, .16); }
.fo-main { gap: 16px; padding-bottom: 6px; }
.fo-hero { display: grid; justify-items: center; gap: 6px; width: min(560px, 100%); text-align: center; }
.fo-hero .fo-task { max-width: 100%; font-family: var(--font-display); font-size: clamp(19px, 5vw, 26px); font-weight: 550; line-height: 1.28; opacity: 1; color: #fff; -webkit-line-clamp: 3; }
.fo-hero .btn-task { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 8px; border-radius: 12px; }
.fo-hero .btn-task:hover { background: rgba(255, 255, 255, .07); }
.fo-hero .fo-task-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; }
.fo-hero .fo-task-n { font-family: var(--font-body); font-size: 12px; background: rgba(255, 255, 255, .14); color: #fff; }
.fo-est { font-size: 13px; color: rgba(255, 255, 255, .72); }
.fo-ring { width: min(290px, 70vw); }
.fo-track { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 6; }
.fo-tick { display: none; }
.fo-prog { stroke: var(--fo-acc); stroke-width: 6; filter: none; }
.fo-dot { fill: var(--fo-acc); filter: none; r: 6px; }
.focus-ov.run.ph-focus .fo-ring, .focus-ov.run.ph-short .fo-ring, .focus-ov.run.ph-long .fo-ring { animation: none; }
.fo-label { font-size: 13.5px; font-weight: 500; letter-spacing: 0; text-transform: none; opacity: .7; }
.fo-time { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-size: clamp(56px, 16vw, 78px); font-weight: 400; letter-spacing: -.03em; text-shadow: none; }
.fo-play { width: 72px; height: 72px; background: var(--fo-acc); color: var(--fo2); box-shadow: none; }
.fo-small { border-color: rgba(255, 255, 255, .22); background: transparent; }
.fo-small:hover { background: rgba(255, 255, 255, .08); }
.fo-optbtn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 0; background: transparent; color: rgba(255, 255, 255, .72); font-size: 13px; }
.fo-optbtn:hover, .fo-optbtn.on { background: rgba(255, 255, 255, .1); color: #fff; }
.fo-mins.hid { display: none; }
.fo-mins .chipbtn.on, .fo-toggles .chipbtn.on { background: var(--fo-acc); border-color: var(--fo-acc); color: var(--fo2); }
.fo-toggles .chipbtn:disabled { opacity: .4; }
.fo-sugg { display: grid; justify-items: center; gap: 3px; max-width: min(460px, 100%); padding: 10px 16px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .32); background: transparent; color: #fff; text-align: center; }
.fo-sugg:hover { background: rgba(255, 255, 255, .07); border-style: solid; }
.fo-sugg small { font-size: 12px; color: rgba(255, 255, 255, .65); }
.fo-sugg b { font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fo-sugg span { font-size: 12.5px; color: var(--fo-acc); font-weight: 600; }
.fo-done { box-shadow: none; border-radius: 14px; }
.fo-done svg { color: #1f2d29; }
.fo-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 8px 0 2px; font-weight: 600; font-size: 14.5px; }
.fo-ask span { min-width: 0; overflow-wrap: anywhere; }
.fo-panel { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); backdrop-filter: none; }
.fo-tomato i.on { background: var(--fo-acc); border-color: var(--fo-acc); box-shadow: none; }
.fo-goal { position: relative; display: block; width: 100%; min-width: 190px; padding-top: 9px; }
.fo-goal::before, .fo-goal i { content: ''; position: absolute; left: 0; top: 2px; height: 3px; border-radius: 2px; }
.fo-goal::before { width: 100%; background: rgba(255, 255, 255, .16); }
.fo-goal i { background: var(--fo-acc); transition: width .4s ease; }
.fo-goal b { font-weight: 500; }
.ffab-idle { position: relative; }
.ffab-goal { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); pointer-events: none; }
.ffab-goal circle { fill: none; stroke: var(--fc); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
/* chuông */
.bp-check { align-items: flex-start; gap: 10px; cursor: pointer; }
.bp-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: #e9cfa0; }
.bp-check span { display: grid; gap: 1px; min-width: 0; }
.bp-check b { font-weight: 600; font-size: 13.5px; }
.bp-check small { font-size: 12px; opacity: .7; line-height: 1.4; }
.bp-count { display: flex; align-items: baseline; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .14); }
.bp-count b { font-family: var(--font-display); font-size: 26px; font-weight: 500; }
.bp-count span { font-size: 13px; opacity: .8; }
.bp-skip { font-size: 12.5px; padding: 7px 10px; border-radius: 9px; background: rgba(255, 255, 255, .1); }
.bell-jr { display: flex; align-items: center; gap: 9px; padding: 10px 2px; color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--line); }
.bell-jr svg { flex: none; color: var(--accent); }
.fo-time { display: inline-flex; justify-content: center; }
.fo-time .d { width: .6em; text-align: center; } .fo-time .c { width: .3em; text-align: center; }
.bp-h, .fot-h { font-size: 14px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.focus-ov .btn.glass svg { color: #fff; stroke: currentColor; }
.fo-tabs button { white-space: nowrap; }
@media (max-width: 640px) { .fo-tabs button b { display: none; } }
.fo-tabs { min-width: 0; } .fo-tabs button { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .fo-tabs button:not(.on) { font-size: 0; gap: 0; padding: 0 12px; flex: none; } }

/* ===== v49 · Kiểu "sổ tay giấy" (data-look="paper") — lớp phủ, tắt được trong Thiết lập =====
   Nguyên tắc: giấy ấm + mực đậm; một màu nhấn (theo chủ đề) + một màu phụ ấm; phẳng, không bóng, không dải màu chuyển;
   nhãn viết thường; chữ số dùng chung phông thân bài; chỉ còn chuyển động đáp lại thao tác. */
:root[data-look="paper"] {
  --bg: #f4f0e6; --dots: transparent; --surface: #fbf9f3; --surface-2: #f6f2e8; --sunken: #ece7da; --line: #e0d9c8; --line-strong: #c9c1ad;
  --fg: #23221d; --fg-2: #47453d; --muted: #7a7566; --paper: #fdfbf4; --rule: #e4dece;
  --warm: #b0731c; --warm-soft: #f4e7cc;
  --shadow-1: none; --shadow-2: 0 14px 40px rgba(35, 34, 29, .16);
  --font-display: var(--font-body); --font-mono: var(--font-body);
  --r: 8px; --r-lg: 10px;
}
@media (prefers-color-scheme: dark) { :root[data-look="paper"]:not([data-theme="light"]) {
  --bg: #181713; --surface: #1f1e19; --surface-2: #24221c; --sunken: #141310; --line: #302e26; --line-strong: #454236; --fg: #ece8dc; --fg-2: #c8c3b4; --muted: #948e7d; --paper: #211f1a; --rule: #34312a; --warm: #e0aa55; --warm-soft: #33290f; --shadow-2: 0 14px 40px rgba(0, 0, 0, .5); } }
:root[data-look="paper"][data-theme="dark"] {
  --bg: #181713; --surface: #1f1e19; --surface-2: #24221c; --sunken: #141310; --line: #302e26; --line-strong: #454236; --fg: #ece8dc; --fg-2: #c8c3b4; --muted: #948e7d; --paper: #211f1a; --rule: #34312a; --warm: #e0aa55; --warm-soft: #33290f; --shadow-2: 0 14px 40px rgba(0, 0, 0, .5); }
[data-look="paper"] body, [data-look="paper"] .shell { background: var(--bg); background-image: none; }
[data-look="paper"] .mono, [data-look="paper"] .num { letter-spacing: 0; font-variant-numeric: tabular-nums; }
[data-look="paper"] h1, [data-look="paper"] h2, [data-look="paper"] h3 { letter-spacing: -.01em; }
/* chuyển động: bỏ hiệu ứng tự chạy khi vào trang */
[data-look="paper"] .page, [data-look="paper"] .gl-banner, [data-look="paper"] .fl-load, [data-look="paper"] .gl-grid > *, [data-look="paper"] .card { animation: none; }
/* nút: phẳng */
[data-look="paper"] .btn { background: var(--surface); box-shadow: none; border-color: var(--line-strong); font-weight: 550; }
[data-look="paper"] .btn:hover { background: var(--surface-2); }
[data-look="paper"] .btn svg { color: currentColor; opacity: .8; }
[data-look="paper"] .btn.primary, [data-look="paper"] .btn.primary:hover { background: var(--accent); border-color: var(--accent); box-shadow: none; filter: none; }
[data-look="paper"] .btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
[data-look="paper"] .btn.ghost, [data-look="paper"] .btn.glass { background: transparent; border-color: transparent; }
[data-look="paper"] .btn.glass:hover, [data-look="paper"] .btn.ghost:hover { background: var(--sunken); }
/* thanh bên */
[data-look="paper"] .brand-mark { background: var(--accent); border-radius: 8px; }
[data-look="paper"] .side-date { background: transparent; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; margin: 0 14px; padding: 12px 0; }
[data-look="paper"] .side-date .k, [data-look="paper"] .evdate .m, [data-look="paper"] .hero-eyebrow, [data-look="paper"] .group-h, [data-look="paper"] .jm2-kicker, [data-look="paper"] .mbal-k { text-transform: none; letter-spacing: 0; }
[data-look="paper"] .side-date .k { font-size: 12.5px; }
[data-look="paper"] .side-date .v { font-size: 21px; font-weight: 600; }
/* thẻ: phẳng, viền mảnh; tiêu đề thẻ không còn ô biểu tượng màu */
[data-look="paper"] .card { box-shadow: none; }
[data-look="paper"] .card-h h2 { font-size: 16.5px; font-weight: 650; }
[data-look="paper"] .evicon { width: auto; height: auto; background: none; color: var(--accent); border-radius: 0; }
[data-look="paper"] .evicon svg { width: 20px; height: 20px; }
[data-look="paper"] .group-h { font-size: 13px; font-weight: 650; color: var(--fg-2); padding-top: 14px; }
[data-look="paper"] .group-h.late { color: var(--bad); }
[data-look="paper"] .fl-star { color: var(--warm); }
/* đầu trang Hôm nay: không còn là thẻ — chỉ chữ trên giấy */
[data-look="paper"] .hero { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 8px 2px 4px; }
[data-look="paper"] .hero::before, [data-look="paper"] .hero::after { content: none; }
[data-look="paper"] .hero-eyebrow { font-size: 14px; font-weight: 500; opacity: 1; color: var(--muted); }
[data-look="paper"] .hero h1 { font-size: clamp(28px, 4.2vw, 38px); font-weight: 650; letter-spacing: -.02em; }
[data-look="paper"] .hero-lunar { background: none; border: 0; padding: 0; color: var(--muted); font-size: 13px; }
[data-look="paper"] .hero .line { display: none; } /* số liệu đã có ở trang sổ ngay bên dưới */
[data-look="paper"] .hero .datef { background: var(--surface); border-color: var(--line-strong); }
/* dải nhắc: một vạch nhấn bên trái, không nền màu, không biểu tượng cảm xúc */
[data-look="paper"] .gl-banner, [data-look="paper"] .gl-banner.rv, [data-look="paper"] .gl-banner.wip, [data-look="paper"] .gl-banner.am, [data-look="paper"] .gl-banner.pm { background: none; border: 0; border-left: 3px solid var(--warm); border-radius: 0; padding: 4px 0 4px 14px; }
[data-look="paper"] .gl-banner-ic { display: none; }
[data-look="paper"] .gl-banner b { font-weight: 650; }
/* hàng việc */
[data-look="paper"] .task.hi { box-shadow: inset 2px 0 0 var(--bad); }
[data-look="paper"] .tag { background: none; padding: 0; height: auto; font-weight: 500; color: var(--fg-2); border: 0; }
[data-look="paper"] .status select { background: transparent; border-color: var(--line-strong); color: var(--fg-2); font-weight: 550; }
[data-look="paper"] .status.s-dang select { background: transparent; border-color: var(--accent); color: var(--accent-ink); }
[data-look="paper"] .status.s-hoan select { background: transparent; border-color: transparent; color: var(--ok); }
[data-look="paper"] .evdate { background: none; border-radius: 6px; }
[data-look="paper"] .card.plan { background: var(--surface); }
/* đồng hồ nổi */
[data-look="paper"] .ffab-idle { background: var(--surface); box-shadow: none; }
.look-seg { margin-bottom: 12px; }
/* nhãn: chấm màu + chữ, không còn viên thuốc màu */
[data-look="paper"] .tagc { background: none; border: 0; padding: 0; height: auto; color: var(--fg-2); font-weight: 500; font-size: 12.5px; }
[data-look="paper"] button.tagc, [data-look="paper"] .tagrow .tagc { padding: 0 9px; height: 26px; border: 1px solid var(--line-strong); }
[data-look="paper"] button.tagc.off { border-style: dashed; color: var(--muted); }
[data-look="paper"] .meetpill { background: none; padding: 0; height: auto; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
[data-look="paper"] .meetpill.hot { background: var(--accent); color: var(--on-accent); padding: 0 9px; height: 22px; text-decoration: none; animation: none; box-shadow: none; }
[data-look="paper"] .gl-chip { background: none; border: 0; padding: 0; height: auto; color: var(--fg-2); font-weight: 550; }
[data-look="paper"] .count { background: none; padding: 0; color: var(--muted); font-weight: 600; }
[data-look="paper"] .fp-due { background: none; padding: 0; font-size: 12px; }
[data-look="paper"] .sunbtn.on { background: none; color: var(--warm); }
[data-look="paper"] .fl-load { background: none; }
[data-look="paper"] .fl-load.over { background: none; color: var(--warm); }
[data-look="paper"] .jm2, [data-look="paper"] .mwallet, [data-look="paper"] .ledger, [data-look="paper"] .notebook { box-shadow: none; border-radius: var(--r-lg); }
[data-look="paper"] .mwallet::before { content: none; }
[data-look="paper"] .mwallet .mw-ic { background: none; width: auto; height: auto; color: var(--accent); }
[data-look="paper"] .mwallet .mw-h b { font-weight: 650; font-size: 16.5px; }
[data-look="paper"] .tstate.urgent { color: var(--bad); }
[data-look="paper"] .nudge { background: none; border: 0; border-left: 3px solid var(--warm); border-radius: 0; box-shadow: none; padding: 4px 0 4px 14px; }

/* ===== v49 · Hộp "Lịch lặp": cùng một mẫu với phần còn lại của ứng dụng (màu nhấn theo chủ đề, nhãn viết thường, bớt khung lồng khung) ===== */
.rp-secs { gap: 0; margin-top: 6px; }
.rp-sec { border: 0; border-radius: 0; background: none; overflow: visible; padding: 14px 0; border-top: 1px solid var(--line); }
.rp-sec:first-child { border-top: 0; }
.rp-sh { padding: 0 0 10px; background: none; border: 0; font-size: 14px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--fg); }
.rp-no { width: auto; height: auto; background: none; color: var(--muted); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.rp-no::after { content: '.'; }
.rp-sb { padding: 0; }
.rp-opts { gap: 2px; }
.rp-opt { border: 0; border-radius: 10px; background: none; }
.rp-opt:hover { background: var(--surface-2); }
.rp-opt.on { background: var(--accent-soft); box-shadow: none; }
.rp-ol { padding: 9px 12px; }
.rp-opt.on .rp-ol { color: var(--accent-ink); }
.rp-od { border-top: 0; padding-top: 2px; }
.rp-preview { background: var(--surface-2); border: 0; border-radius: 12px; }
.rp-ph, .rp-l, .rp-d small, .scope-l { text-transform: none; letter-spacing: 0; font-size: 13px; }
.rp-d { box-shadow: none; border-radius: 10px; }
.wd.on { box-shadow: none; }
.df-moon { color: var(--accent); }
.modal[style*="--tc"] .modal-h { background: var(--surface); }
.modal-h .tool-ic { background: var(--accent-soft); color: var(--accent-ink); box-shadow: none; }
[data-look="paper"] .modal-h .tool-ic { background: none; width: auto; color: var(--accent); }
[data-look="paper"] .modal-h { grid-template-columns: auto minmax(0, 1fr) auto; }
[data-look="paper"] .modal, [data-look="paper"] .sheet { box-shadow: var(--shadow-2); }
.rp-no { display: none; }

/* nhãn viết thường ở mọi trang (sinh tự động từ các bộ chọn đang in hoa) */
[data-look="paper"] .label,
[data-look="paper"] .side-date .k,
[data-look="paper"] .ph-eyebrow,
[data-look="paper"] .hero-eyebrow,
[data-look="paper"] .group-h,
[data-look="paper"] .evdate .m,
[data-look="paper"] .tbl th,
[data-look="paper"] .dc-lab,
[data-look="paper"] .dadd-h,
[data-look="paper"] .di-h,
[data-look="paper"] .mgrid-h div,
[data-look="paper"] .sec-h,
[data-look="paper"] .facts .k,
[data-look="paper"] .rp-sh,
[data-look="paper"] .rp-l,
[data-look="paper"] .rp-ph,
[data-look="paper"] .rp-d small,
[data-look="paper"] .fot-h,
[data-look="paper"] .fp-gh,
[data-look="paper"] .bp-h,
[data-look="paper"] .bt-tx b,
[data-look="paper"] .mood-axis,
[data-look="paper"] .moodq small,
[data-look="paper"] .jsub,
[data-look="paper"] .hb-table th.nm,
[data-look="paper"] .hb-table tr.dayrow .nm,
[data-look="paper"] .jm2-kicker,
[data-look="paper"] .ml-k,
[data-look="paper"] .mrp > span:first-child,
[data-look="paper"] .msp-auto,
[data-look="paper"] .mbal-k,
[data-look="paper"] .scope-l,
[data-look="paper"] .tl-lab,
[data-look="paper"] .gl-kicker,
[data-look="paper"] .gl-next-t small,
[data-look="paper"] .gl-facts .k,
[data-look="paper"] .gl-here,
[data-look="paper"] .gl-rvd-prev small { text-transform: none; letter-spacing: 0; }

[data-look="paper"] .label, [data-look="paper"] .ph-eyebrow, [data-look="paper"] .dc-lab, [data-look="paper"] .di-h, [data-look="paper"] .jsub, [data-look="paper"] .gl-kicker, [data-look="paper"] .tbl th, [data-look="paper"] .moodq small { font-size: 12.5px; }
[data-look="paper"] .ph-eyebrow { font-size: 13.5px; font-weight: 500; }
[data-look="paper"] .mood-axis, [data-look="paper"] .gl-next-t small { font-size: 11.5px; }
[data-look="paper"] .tbl th { background: var(--surface); border-bottom: 1.5px solid var(--line-strong); color: var(--fg-2); }
/* Lịch */
[data-look="paper"] .dc-head { background: none; }
[data-look="paper"] .dc, [data-look="paper"] .daycard { box-shadow: none; }
/* Mục tiêu */
[data-look="paper"] .gl-card::before { background: var(--gc); height: 3px; }
[data-look="paper"] .gl-card { box-shadow: none; }
[data-look="paper"] .gl-card:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }
[data-look="paper"] .gl-bar i { background: var(--gc); }
[data-look="paper"] .gl-next { background: none; border: 0; border-top: 1px dashed var(--line-strong); border-radius: 0; padding: 10px 2px 2px; }
[data-look="paper"] .gl-wig { background: none; padding: 0; color: var(--warm); font-size: 12px; font-weight: 650; }
[data-look="paper"] .gl-wigbtn.on { background: none; border-color: var(--warm); color: var(--warm); }
[data-look="paper"] .gl-kbi { box-shadow: none; }
[data-look="paper"] .gl-kbi:hover { transform: none; box-shadow: none; }
/* Nhật ký */
[data-look="paper"] .jbook { box-shadow: none; border-radius: var(--r-lg); background-image: none; }
[data-look="paper"] .jbook::before { background: var(--accent); width: 3px; opacity: 1; }
[data-look="paper"] .jb-head { background: none; }
[data-look="paper"] .jtpl.on { background: var(--accent-soft); box-shadow: none; }
[data-look="paper"] .moodq { border-width: 1px; border-radius: 10px; }
/* Thiết lập */
[data-look="paper"] .tool { background: var(--surface); border-color: var(--line); }
[data-look="paper"] .tool:hover { transform: none; box-shadow: none; border-color: var(--line-strong); background: var(--surface-2); }
[data-look="paper"] .tool .tool-ic { background: none; color: var(--tc); box-shadow: none; width: auto; }
[data-look="paper"] .tool { grid-template-columns: 28px minmax(0, 1fr) 20px; }
[data-look="paper"] .prof-av { background: var(--accent); }
[data-look="paper"] .danger-card { background: var(--surface); }
[data-look="paper"] .skin.on { box-shadow: none; }
.look-seg { display: inline-flex; width: auto; justify-self: start; }
/* Thói quen */
[data-look="paper"] td.nm, [data-look="paper"] th.nm { box-shadow: none; border-right: 1px solid var(--line); }
/* Sổ tiền */
[data-look="paper"] .mov, [data-look="paper"] .m-over { border-radius: var(--r); }
.look-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .look-row .look-seg { margin: 0; }
.emo-ic { display: inline-grid; place-items: center; color: var(--accent); }
[data-look="paper"] .fl-act.bad .emo-ic { color: var(--bad); }
[data-look="paper"] .fl-done .emo-ic svg { width: 30px; height: 30px; }
[data-look="paper"] .h-emo, [data-look="paper"] .mjr-ic, [data-look="paper"] .pj-h > span[aria-hidden] { display: none; }
[data-look="paper"] .fl-act { box-shadow: none; background: var(--surface); }
[data-look="paper"] .fl-act.main { background: var(--accent-soft); border-color: var(--accent); }
.gl-promo { display: grid; gap: 14px; }
.gl-pr-steps { min-height: 150px; line-height: 1.6; resize: vertical; padding: 10px 12px; }
.gl-splitbtn { margin-top: 8px; justify-self: start; }
.gl-split { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--accent-soft); color: var(--accent-ink); text-align: left; transition: border-color .15s, transform .15s; }
.gl-split:hover { border-color: var(--accent); }
.gl-split:active { transform: scale(.99); }
.gl-split-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.gl-split-t { display: grid; gap: 1px; min-width: 0; }
.gl-split-t b { font-size: 14px; font-weight: 650; }
.gl-split-t small { font-size: 12.5px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-twin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: var(--warn-soft, var(--surface-2)); font-size: 13px; color: var(--fg-2); }
.gl-twin > span { flex: 1 1 220px; min-width: 0; }
.gl-twin > svg { flex: none; }
[data-look="paper"] .gl-split { background: none; border: 1px solid var(--line-strong); color: var(--fg); }
[data-look="paper"] .gl-split-ic { background: none; color: var(--accent); width: auto; }
[data-look="paper"] .gl-twin { background: none; border-left: 3px solid var(--warm); border-radius: 0; padding: 4px 0 4px 12px; }
.gl-toall { margin-left: auto; }
/* Ghi chú phương pháp Kanban */
.gl-kbnote { margin: 12px 0 14px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.gl-kbnote-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gl-kbnote-h b { flex: 1 1 200px; font-size: 14px; font-weight: 650; min-width: 0; }
.gl-kbnote-h .btn { margin-left: auto; }
.gl-kbbadge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.gl-kbp { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 18px; }
.gl-kbp li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.gl-kbp li > svg { margin-top: 2px; color: var(--accent); }
.gl-kbp span { display: grid; gap: 2px; min-width: 0; }
.gl-kbp b { font-size: 13.5px; font-weight: 650; }
.gl-kbp small { font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }
.gl-kbsrc { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); line-height: 1.5; }
.gl-kbnote.mini { padding: 8px 12px; }
[data-look="paper"] .gl-kbnote { background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding-left: 0; padding-right: 0; }
[data-look="paper"] .gl-kbbadge { background: none; color: var(--accent-ink); border: 1px solid var(--accent); }
.gl-kbnote-h { flex-wrap: nowrap; align-items: flex-start; }
.gl-kbnote-h b { flex: 1 1 auto; padding-top: 1px; }
.gl-kbnote-h .btn { flex: none; margin-top: -4px; }

/* ===== Bản web: đăng nhập & tài khoản ===== */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; align-content: center; gap: 22px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); }
.auth-card { width: min(400px, 100%); padding: 28px 26px 26px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.auth-card form { display: grid; gap: 10px; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg-2); margin-bottom: 22px; }
.auth-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.auth-card h1 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.auth-sub { margin: 0 0 8px; color: var(--fg-2); font-size: 14px; line-height: 1.55; }
.auth-l { font-size: 13px; font-weight: 600; color: var(--fg-2); margin-top: 4px; }
.auth-inp { height: 46px; font-size: 16px; }
.auth-code { letter-spacing: .35em; font-size: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.auth-btn { height: 46px; justify-content: center; font-size: 15px; margin-top: 6px; }
.auth-err { margin: 2px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--bad-soft, #fdecea); color: var(--bad, #b3261e); font-size: 13.5px; line-height: 1.45; }
.auth-alt { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.auth-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; max-width: 420px; }
.auth-langs button { border: 0; background: none; padding: 6px 8px; border-radius: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.auth-langs button.on { color: var(--fg); font-weight: 650; background: var(--surface); }
.acct-b { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acct-who { display: grid; gap: 2px; min-width: 0; }
.acct-who b { font-size: 15px; overflow-wrap: anywhere; }
.acct-who small { color: var(--muted); font-size: 12.5px; }
.pwa-upd { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--fg); color: var(--bg); font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: calc(100vw - 32px); }
.pwa-upd button { border: 0; border-radius: 9px; padding: 7px 12px; font-weight: 650; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.auth-pwrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.auth-link { border: 0; background: none; padding: 8px 0 0; color: var(--accent-ink); font-size: 13.5px; font-weight: 550; cursor: pointer; text-align: center; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.acct-pw { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; align-items: center; padding-top: 4px; }
.acct-warn { color: var(--bad); font-size: 12.5px; grid-column: 1 / -1; }