/* SPEC 41 (2026-10-22): Điểm tin "so với hôm qua" (diemtin.js) and Đặt lịch › Theo space (tudong_space.js).
   Colours come from tokens.css only, so light and dark both work. */

/* ------------------------------------------------------------------ Điểm tin */
.dt2-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.dt2-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); color: var(--body); font: inherit; cursor: pointer; }
.dt2-tile:hover { border-color: var(--border-strong); }
.dt2-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dt2-tile b { font-size: 26px; line-height: 1.15; font-weight: 700; color: var(--ink); }
.dt2-tile .l { font-weight: 600; }
.dt2-tile .s { font-size: 12px; color: var(--muted); }
.dt2-tile.new { background: var(--honey-soft); border-color: var(--honey-line); }
.dt2-tile.new b, .dt2-tile.new .l { color: var(--honey-ink); }
.dt2-tile.worse { background: var(--danger-soft); }
.dt2-tile.worse b, .dt2-tile.worse .l { color: var(--danger); }
.dt2-tile.better { background: var(--success-soft); }
.dt2-tile.better b, .dt2-tile.better .l { color: var(--success); }

.dt2-sec { display: flex; flex-direction: column; gap: 10px; }
.dt2-sec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.dt2-sec-h h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.dt2-changes { padding: 0; overflow: hidden; }
.dt2-cblock { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; }
.dt2-cblock + .dt2-cblock { border-top: 1px solid var(--border); }
.dt2-cb-h { display: flex; align-items: center; gap: 8px; }
.dt2-crow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; }
.dt2-ct { flex: 1 1 460px; min-width: 0; }
.dt2-ct b { color: var(--ink); font-weight: 600; }
.dt2-ct p { margin: 2px 0 0; color: var(--body); }
.dt2-ct p.note.worse { color: var(--danger); font-weight: 600; }
.dt2-ct p.note.better { color: var(--success); font-weight: 600; }
.dt2-cacts { display: flex; gap: 8px; flex: none; }
.dt2-gone { margin: 0; padding-left: 18px; color: var(--muted); }

.dt2-all { display: flex; flex-direction: column; gap: 12px; }
.dt2-levels { padding: 0; overflow: hidden; }
.dt2-lh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.dt2-lh b { color: var(--ink); }
.dt2-tbl { overflow-x: auto; }
.dt2-tbl table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.dt2-tbl th { padding: 8px 12px; text-align: left; font-weight: 600; color: var(--muted); background: var(--sunken); white-space: nowrap; }
.dt2-tbl td { padding: 9px 12px; border-top: 1px solid var(--border); color: var(--body); vertical-align: middle; }
.dt2-tbl th:first-child, .dt2-tbl td:first-child { padding-left: 18px; }
.dt2-tbl .num { text-align: right; }
.dt2-tbl .muted { color: var(--muted); }
.dt2-tbl .nowrap { white-space: nowrap; }
.dt2-lrow { cursor: pointer; }
.dt2-lrow:hover td { background: var(--hover); }
.dt2-lrow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dt2-lrow .lv { font-weight: 700; color: var(--ink); }
.dt2-lrow.open td { background: var(--sunken); }
.dt2-ldet td { background: var(--sunken); border-top: 0; padding: 4px 18px 14px; }
.dt2-foot { margin: 0; padding: 8px 18px 12px; }

.dt2-groups { padding: 0; overflow: hidden; }
.dt2-group + .dt2-group { border-top: 1px solid var(--border); }
.dt2-group > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 13px 18px; cursor: pointer; list-style: none; }
.dt2-group > summary::-webkit-details-marker { display: none; }
.dt2-group > summary b { color: var(--ink); }
.dt2-group > summary .chev { margin-left: auto; color: var(--muted); transition: transform .15s; }
.dt2-group[open] > summary .chev { transform: rotate(180deg); }
.dt2-group > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.dt2-items { display: flex; flex-direction: column; padding: 0 10px 10px; }
.dt2-ihead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px;
  background: transparent; color: var(--body); font: inherit; text-align: left; cursor: pointer; }
.dt2-ihead:hover { background: var(--hover); }
.dt2-ihead:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.dt2-ihead .t { flex: 1 1 320px; min-width: 0; color: var(--ink); }
.dt2-ihead .since { white-space: nowrap; }
.dt2-item.open { background: var(--sunken); border-radius: 10px; }
.dt2-detail { display: flex; flex-direction: column; gap: 8px; padding: 4px 8px 12px; }
.dt2-detail .dt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dt2-detail .grow { flex: 1 1 auto; }

.dt2-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border: 1px solid var(--honey-line);
  border-radius: var(--r-card); background: var(--honey-soft); color: var(--honey-ink); }
.dt2-callout > span { flex: 1 1 360px; min-width: 0; }
.dt2-reps { padding: 0; overflow: hidden; }
.dt2-rep { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 11px 18px; }
.dt2-rep + .dt2-rep { border-top: 1px solid var(--border); }
.dt2-rep .when { flex: none; min-width: 110px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dt2-rep .name { flex: 1 1 300px; min-width: 0; color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ Đặt lịch › Theo space */
.tsp-intro { margin: 0; }
.tsp-card { padding: 0; overflow: hidden; }
.tsp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.tsp-head .grow { flex: 1 1 320px; min-width: 0; }
.tsp-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.tsp-head p { margin: 2px 0 0; }
.tsp-advs { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; }
.tsp-adv { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.tsp-adv.high { border-color: var(--danger); background: var(--danger-soft); }
.tsp-adv.medium { border-color: var(--honey-line); background: var(--honey-soft); }
.tsp-adv-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tsp-adv-h b { color: var(--ink); }
.tsp-adv p { margin: 0; color: var(--body); }
.tsp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tsp-tbl { overflow-x: auto; border-top: 1px solid var(--border); }
.tsp-tbl table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 13px; }
.tsp-tbl th { padding: 8px 12px; text-align: left; font-weight: 600; color: var(--muted); background: var(--sunken); white-space: nowrap; }
.tsp-tbl td { padding: 9px 12px; border-top: 1px solid var(--border); color: var(--body); }
.tsp-tbl th:first-child, .tsp-tbl td:first-child { padding-left: 18px; }
.tsp-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tsp-tbl .nowrap { white-space: nowrap; }
.tsp-tbl tr.off td { color: var(--muted); }
.tsp-tbl a { color: var(--ink); font-weight: 600; }
.tsp-always { color: var(--warning); }