/* AI Center v1.3: screen styles owned by W-screens (Sổ tay, Kiến thức, Điểm tin, data screens, Đề xuất).
   Loaded once by js/screens/_shared.js. Only tokens from tokens.css (light + dark), no new colours. */

/* ------------------------------------------------------------------ shared */
.scr-back { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: 0 0 4px -4px; padding: 0 8px 0 4px; border-radius: var(--r-ctl); color: var(--body); font-size: 13px; font-weight: 500; text-decoration: none; }
.scr-back:hover { background: var(--hover); color: var(--ink); }
.scr-av { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.scr-av.honey { background: var(--honey-soft); color: var(--honey-ink); }
.scr-av.info { background: var(--info-soft); color: var(--info); }
.scr-av.success { background: var(--success-soft); color: var(--success); }
.scr-av.neutral { background: var(--sunken); color: var(--muted-2); border: 1px solid var(--border); }
.scr-av.ai { background: transparent; }
.scr-hidden { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted-2); font-size: 11px; font-weight: 600; }
.scr-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; border-top: 1px solid var(--border); }
.scr-kv:first-child { border-top: 0; }
.scr-kv .k { color: var(--muted); }
.scr-kv .v { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.scr-noscroll { overflow: hidden; }
.scr-mention-pop { padding: 4px; width: min(420px, calc(100vw - 16px)); }
.scr-mention { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow-y: auto; }
.scr-mention-it { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 4px 10px; border: 0; border-radius: var(--r-ctl); background: transparent; text-align: left; color: var(--ink); font-size: 13px; }
.scr-mention-it.active, .scr-mention-it:hover { background: var(--sunken); }
.scr-mention-it .ty { flex: 0 0 auto; min-width: 64px; font-size: 11px; font-weight: 600; color: var(--muted); }
.scr-mention-it .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.scr-mention-it .d { flex: 0 1 auto; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.scr-mention-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }

/* side panel (row details) */
.scr-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.scr-split.has-side { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
.scr-side { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; outline: none; }
.scr-side-head { display: flex; align-items: flex-start; gap: 8px; }
.scr-side-head h2 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.scr-side-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.scr-side-body h3 { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.scr-side-sec + .scr-side-sec { border-top: 1px solid var(--border); padding-top: 12px; }
.scr-side-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.scr-scrim { display: none; }
@media (max-width: 1180px) {
  .scr-split.has-side { grid-template-columns: minmax(0, 1fr); }
  .scr-side { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(420px, 92vw); max-height: none; border-radius: 0; border-width: 0 0 0 1px; box-shadow: var(--shadow-pop); }
  .scr-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 69; background: var(--overlay); }
}
@media (max-width: 760px) {
  .scr-side { top: auto; left: 0; width: 100%; max-height: 86vh; border-radius: 16px 16px 0 0; border-width: 1px 0 0; padding: 16px; }
}

/* ------------------------------------------------------------------ Sổ tay: feed */
.st-page { gap: 0; }
.st-page > .page-head { margin-bottom: 20px; }
.st-ask { margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-composer); box-shadow: var(--shadow-float); padding: 14px 16px; }
.st-ask-head { display: flex; align-items: flex-start; gap: 10px; }
.st-ask-head .t { font-size: 14px; font-weight: 600; color: var(--ink); }
.st-ask-head .d { font-size: 13px; color: var(--muted); }
.st-ask-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.st-ask-row .input { flex: 1 1 320px; min-width: 0; height: 40px; }
.st-ask-row .btn { min-height: 40px; padding: 8px 16px; }
.st-ask-sugg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.st-sugg { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg); color: var(--body); font-size: 13px; }
.st-sugg:hover { background: var(--hover); color: var(--ink); }
.st-ask .help { margin-top: 10px; }

.st-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.st-tb-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 12px; }
.st-tb-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 1 420px; min-width: 0; }
.st-search { position: relative; width: 100%; }
.st-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.st-search .input { padding-left: 36px; height: 40px; }
.st-topic { width: auto; min-width: 150px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--body); font-size: 13px; font-weight: 500; }
.st-chip:hover { border-color: var(--border-strong); color: var(--ink); }
.st-chip .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-chip[aria-pressed="true"] { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-fg); font-weight: 600; }
.st-chip[aria-pressed="true"] .n { color: inherit; opacity: .8; }
.st-chip.sm { min-height: 30px; }
.st-tagnote { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.st-tagnote b { color: var(--ink); }

.st-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.st-main { min-width: 0; }
.st-listhead { font-size: 12px; color: var(--muted); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.st-listhead b { color: var(--ink); font-weight: 600; }
.st-list { display: flex; flex-direction: column; gap: 12px; }
.st-more { display: flex; justify-content: center; margin-top: 14px; }
.st-more:empty { display: none; }

.st-card { padding: 16px 20px 12px; }
.st-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--muted); }
.st-card-top .pill.min76 { min-width: 0; }
.st-topic-l { color: var(--muted); }
.st-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.st-suggest { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); background: var(--honey-soft); color: var(--honey-ink); font-size: 12px; font-weight: 600; }
.st-suggest .dot { width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--honey-line); }
.st-card-t { margin: 10px 0 6px; font-size: 16px; line-height: 1.4; font-weight: 600; }
.st-card-t a { color: var(--ink); text-decoration: none; }
.st-card-t a:hover { color: var(--info); }
.st-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-byline b { color: var(--ink); font-weight: 600; }
.st-byline .sep { color: var(--border-strong); }
.st-byline .src { min-width: 0; overflow-wrap: anywhere; }
.st-excerpt { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--body); overflow-wrap: anywhere; }
.st-thumbs { display: flex; gap: 8px; margin-top: 10px; max-width: 100%; overflow: hidden; text-decoration: none; }
.st-thumbs img { display: block; height: 96px; width: auto; max-width: 240px; min-width: 0; object-fit: cover; object-position: left top; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg); }
.st-thumbs:hover img { border-color: var(--border-strong); }
.st-steps-mini { list-style: none; margin: 12px 0 0; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-card); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.st-steps-mini li { display: flex; align-items: flex-start; gap: 10px; }
.st-steps-mini .n { flex: 0 0 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--muted-2); }
.st-steps-mini li.more { padding-left: 30px; font-size: 12px; color: var(--muted); }
.st-embed-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; max-width: 100%; }
.st-embed-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-embed-link:hover { border-color: var(--border-strong); color: var(--info); }
.st-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.st-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: 0; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted-2); font-size: 12px; font-weight: 500; }
button.st-tag:hover { background: var(--hover); color: var(--ink); }
.st-tag.topic { background: var(--surface); border: 1px solid var(--border); color: var(--body); }
.st-card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.st-cmt-link { font-size: 13px; color: var(--body); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.st-cmt-link:hover { color: var(--info); }
.st-helpful .n { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 500; }
.st-helpful[aria-pressed="true"] { background: var(--info-soft); border-color: var(--info); color: var(--info); }
.st-helpful[aria-pressed="true"] .n { color: inherit; }
.st-save[aria-pressed="true"] { background: var(--sunken); color: var(--ink); }
.st-save[aria-pressed="true"] svg { fill: currentColor; }

/* rail */
.st-rail, .st-post-rail, .st-ed-rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.st-rail-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.st-rail-card h2 { font-size: 14px; font-weight: 600; }
.st-rail-card .skel-lines { padding: 0; }
.st-rail-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.st-rail-h a { font-size: 13px; font-weight: 600; }
.st-p { line-height: 1.5; }
.st-hot { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.st-hot li { display: flex; gap: 12px; }
.st-hot .n { flex: 0 0 auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-hot a { display: block; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.45; }
.st-hot a:hover { color: var(--info); }
.st-hot p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.st-topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-rail-card .st-topic-chips + .help { margin-top: 10px; }
.st-topic-new { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.st-topic-new .input { flex: 1; min-width: 0; }
.st-topic-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.st-topic-rows li { display: flex; gap: 8px; align-items: flex-start; }
.st-topic-rows .help { margin: 4px 0 0; }
.st-sc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-sc-name { display: inline-block; max-width: 100%; padding: 1px 6px; border: 0; border-radius: 4px; background: var(--sunken); color: var(--ink); font-size: 12px; text-align: left; overflow-wrap: anywhere; }
.st-sc-name:hover { background: var(--honey-soft); color: var(--honey-ink); }
.st-sc p { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.st-sc-foot { border-top: 1px solid var(--border); padding-top: 10px; }
.st-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.st-flow li { display: flex; gap: 10px; position: relative; }
.st-flow li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 14px; bottom: -12px; width: 1px; background: var(--border-strong); }
.st-flow .o { flex: 0 0 10px; height: 10px; margin-top: 4px; border-radius: 50%; border: 1.5px solid var(--muted); background: var(--surface); position: relative; z-index: 1; }
.st-flow li.ok .o { border-color: var(--success); }
.st-flow li.ai .o { border-color: var(--honey); background: var(--honey); }
.st-flow b { font-size: 13px; color: var(--ink); font-weight: 600; }
.st-flow li.ai b { color: var(--honey-ink); }
.st-flow p { font-size: 12px; color: var(--muted); line-height: 1.45; }
.st-rail-link { font-size: 13px; font-weight: 600; }

/* ------------------------------------------------------------------ Sổ tay: post page */
.st-post-top { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.st-post-layout { display: grid; grid-template-columns: minmax(0, 760px) 280px; gap: 32px; align-items: start; }
.st-article { min-width: 0; }
.st-crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.st-crumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--body); text-decoration: none; }
.st-crumb a:hover { color: var(--ink); text-decoration: underline; }
.st-post-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.st-post-kicker .pill.min76 { min-width: 0; }
.st-post-t { margin: 10px 0 12px; font-size: 26px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: anywhere; }
.st-post-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.st-post-by .who { line-height: 1.35; }
.st-post-by .who b { display: block; font-size: 14px; color: var(--ink); }
.st-post-by .who span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-vis { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--body); font-size: 12px; }
.st-rule { border: 0; border-top: 1px solid var(--border); margin: 18px 0 20px; }
.st-post-body .md { font-size: 15px; line-height: 1.75; }
.st-post-body .md h2 { font-size: 18px; margin-top: 24px; }
.st-playbook { margin-top: 20px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); display: flex; flex-direction: column; gap: 12px; }
.st-pb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.st-pb-head h2 { font-size: 16px; font-weight: 600; }
.st-pb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-pb-steps li { display: flex; align-items: flex-start; gap: 12px; }
.st-pb-steps .n { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--sunken); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.st-pb-t { flex: 1 1 auto; min-width: 0; padding-top: 2px; font-size: 14px; }
.st-pb-t p { margin: 0; }
.st-embeds { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.st-embed { margin: 0; overflow: hidden; }
.st-embed-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.st-embed-h b { color: var(--ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.st-embed-frame { display: block; width: 100%; height: 460px; border: 0; background: var(--surface); }
.st-embed-frame.tall { height: 640px; }
.st-embed-md { padding: 14px 18px; max-height: 360px; overflow: hidden; position: relative; }
.st-embed-md::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }
.st-embed-md.open { max-height: none; }
.st-embed-md.open::after { display: none; }
.st-embed-md .skel-lines { padding: 0; }
.st-embed-foot { display: flex; justify-content: center; padding: 0 14px 12px; }
.st-embed-foot:empty { display: none; }
.st-embed-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); font-size: 13px; color: var(--body); }
.st-embed-row b { color: var(--ink); }
.st-source { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 12px 14px; border-radius: var(--r-card); background: var(--sunken); border: 1px solid var(--border); font-size: 13px; color: var(--body); line-height: 1.6; }
.st-source svg { margin-top: 2px; color: var(--muted); }
.st-source code { font-family: var(--font-mono); font-size: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.st-source a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.st-source .sep { color: var(--muted); }
.st-post-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.st-comments { margin-top: 24px; }
.st-cmt-h { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; margin-bottom: 14px; }
.st-cmt-h .cnt { font-size: 12px; font-weight: 600; padding: 0 8px; line-height: 20px; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted-2); }
.st-cmt-empty { margin-bottom: 14px; }
.st-cmt-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.st-cmt-list.sub { margin: 12px 0 0; }
.st-cmt { display: flex; align-items: flex-start; gap: 10px; }
.st-cmt.focus > .st-cmt-main { outline: 2px solid var(--honey); outline-offset: 4px; border-radius: 6px; }
.st-cmt-av { flex: 0 0 28px; display: inline-flex; justify-content: center; padding-top: 2px; }
.st-cmt-main { flex: 1 1 auto; min-width: 0; }
.st-cmt.ai > .st-cmt-main { background: var(--honey-soft); border: 1px solid var(--honey-line); border-radius: var(--r-card); padding: 12px 14px; }
.st-cmt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-cmt-meta b { font-size: 13px; color: var(--ink); }
.st-cmt-body { margin-top: 4px; }
.st-cmt-body .md { font-size: 14px; line-height: 1.6; }
.st-cmt-body .md p { margin-bottom: 6px; }
.st-cmt-acts { display: flex; gap: 2px; margin: 2px 0 0 -8px; }
.st-cmt-acts .btn-xs { color: var(--muted); }
.st-cmt-ai-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.st-ai-pending { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--honey-line); border-radius: var(--r-card); background: var(--honey-soft); color: var(--honey-ink); font-size: 13px; }
.st-cmt-form { display: flex; align-items: flex-start; gap: 10px; }
.st-cmt-form.reply { margin-top: 8px; }
.st-cmt-box { flex: 1 1 auto; min-width: 0; border: 1px solid var(--border-strong); border-radius: var(--r-card); background: var(--surface); }
.st-cmt-box:focus-within { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.st-cmt-ta { border: 0; border-radius: var(--r-card) var(--r-card) 0 0; min-height: 0; }
.st-cmt-ta:focus { outline: none; }
.st-cmt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 10px 12px; border-top: 1px solid var(--border); }
.st-cmt-foot .help { flex: 1 1 260px; }
.st-ai-at { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--honey-soft); color: var(--honey-ink); font-weight: 600; }

.st-rel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-rel li { padding: 10px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; }
.st-rel li:first-child { border-top: 0; padding-top: 0; }
.st-rel .k { font-size: 12px; color: var(--muted); }
.st-rel a { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.45; }
.st-rel a:hover { color: var(--info); }
.st-rel .d { font-size: 12px; color: var(--muted); }
.st-used { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-ctl); text-decoration: none; color: var(--body); }
.st-used:hover { border-color: var(--border-strong); }
.st-used .k { display: block; font-size: 12px; color: var(--muted); }
.st-used b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.st-vers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.st-vers li { display: flex; gap: 10px; }
.st-vers .dot { flex: 0 0 8px; height: 8px; margin-top: 6px; background: var(--surface); border: 1.5px solid var(--muted); }
.st-vers li.cur .dot { background: var(--ink); border-color: var(--ink); }
.st-vers .l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--body); font-variant-numeric: tabular-nums; }
.st-vers .l1 b { color: var(--ink); }
.st-vers .l2 { font-size: 12px; color: var(--muted); }
.st-vlink { padding: 0; border: 0; background: none; font-size: 12px; font-weight: 600; color: var(--info); text-decoration: underline; text-underline-offset: 3px; }
.st-admin { border-style: dashed; background: transparent; }
.st-admin-k { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.st-admin .btn { align-self: flex-start; }

/* ------------------------------------------------------------------ Sổ tay: editor */
.st-ed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.st-ed-card { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.st-radios { display: grid; gap: 10px; }
.st-radios.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-radios.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-radio { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-card); background: var(--surface); cursor: pointer; min-width: 0; }
.st-radio:hover { border-color: var(--muted); }
.st-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.st-radio .mk { flex: 0 0 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--muted); background: var(--surface); }
.st-radio input:checked + .mk { border: 5px solid var(--ink); }
.st-radio:has(input:checked) { border: 2px solid var(--ink); padding: 11px 13px; }
.st-radio:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-radio .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-radio .tx b { font-size: 14px; color: var(--ink); font-weight: 600; }
.st-radio .tx span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.st-ed-title { height: 44px; font-size: 16px; font-weight: 600; }
.st-ed-box { border: 1px solid var(--border-strong); border-radius: var(--r-ctl); background: var(--surface); overflow: hidden; }
.st-ed-box:focus-within { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.st-toolbar-ed { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; background: var(--bg); border-bottom: 1px solid var(--border); }
.st-tool { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.st-tool.io { width: 32px; justify-content: center; padding: 0; }
.st-tool:hover { background: var(--hover); }
.st-tool[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow-seg); font-weight: 600; }
.st-tool-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--border-strong); }
.st-ed-ta { display: block; width: 100%; min-height: 220px; padding: 12px 14px; border: 0; background: var(--surface); color: var(--ink); font-size: 14px; line-height: 1.65; resize: vertical; }
.st-ed-ta:focus { outline: none; }
.st-ed-preview { padding: 12px 14px; min-height: 220px; }
.st-ed-embeds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -8px; }
.st-attach { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 4px 0 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font-size: 12px; color: var(--body); }
.st-attach b { color: var(--muted-2); font-weight: 600; }
.st-attach .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.st-attach .x { flex: 0 0 20px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.st-attach .x:hover { background: var(--hover); color: var(--ink); }
.st-ed-steps { display: flex; flex-direction: column; gap: 8px; }
.st-ed-lblrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.st-ed-steplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st-ed-steplist li { display: flex; align-items: center; gap: 10px; }
.st-ed-steplist .n { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--sunken); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--ink); }
.st-ed-steplist .input { height: 38px; }
.st-addstep { align-self: flex-start; margin-left: 30px; }
.st-ed-honey { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-card); background: var(--honey-soft); color: var(--honey-ink); font-size: 13px; }
.st-ed-honey b { display: block; font-weight: 600; }
.st-ed-honey p { color: var(--honey-ink); opacity: .92; }
.st-ed-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.st-ed-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.st-ed-foot .help { flex: 1 1 260px; }
.st-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-recent li { display: flex; align-items: center; gap: 10px; }
.st-recent b { display: block; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-recent span { font-size: 12px; color: var(--muted); }
.st-inserted { background: var(--success-soft) !important; border-color: transparent !important; color: var(--success) !important; }
.st-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--body); }
.st-check li { display: flex; gap: 8px; align-items: flex-start; }
.st-check svg { color: var(--success); margin-top: 2px; }
.st-rail-ai { display: flex; align-items: center; gap: 8px; }
.st-picker { display: flex; flex-direction: column; min-width: 280px; max-height: 340px; overflow-y: auto; }
.st-picker .menu-item { min-height: 36px; font-size: 13px; }
.st-picker .skel-lines { padding: 8px; }

@media (max-width: 1180px) {
  .st-layout, .st-ed-layout { grid-template-columns: minmax(0, 1fr); }
  .st-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .st-post-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .st-post-rail, .st-ed-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 760px) {
  .st-tb-right { flex-basis: 100%; align-items: stretch; }
  .st-tb-row > .seg { width: 100%; }
  .st-tb-row > .seg button { flex: 1 1 auto; padding: 0 8px; }
  .st-card { padding: 14px 14px 10px; }
  .st-thumbs img { height: 72px; max-width: 46%; }
  .st-card-acts .btn-ai .lbl { display: none; }
  .st-radios.three, .st-radios.two, .st-ed-grid { grid-template-columns: minmax(0, 1fr); }
  .st-ed-card { padding: 16px; }
  .st-post-t { font-size: 22px; }
  .st-embed-frame { height: 380px; }
  .st-embed-frame.tall { height: 480px; }
  .st-rail, .st-post-rail, .st-ed-rail { grid-template-columns: minmax(0, 1fr); }
  .st-tool span { display: none; }
  .st-tool { width: 34px; justify-content: center; padding: 0; }
}

/* ------------------------------------------------------------------ Kiến thức & kỹ năng */
.kt-page > .tabs { margin-bottom: 4px; }
.kt-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kt-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px; border-radius: var(--r-card); font-size: 14px; line-height: 1.55; }
.kt-banner p { flex: 1 1 360px; min-width: 0; }
.kt-banner.honey { background: var(--honey-soft); border: 1px solid var(--honey-line); color: var(--body); }
.kt-banner.info { background: var(--info-soft); color: var(--ink); }
.kt-banner.info > svg { color: var(--info); }
.kt-banner.info a { font-weight: 600; font-size: 13px; }
.kt-banner-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kt-skill-ex { background: var(--surface); border: 1px solid var(--honey-line); height: 30px; padding: 0 12px; }
.kt-skill-ex .dot { width: 8px; height: 8px; }
.kt-skill-ex b { color: var(--ink); font-weight: 600; }
.kt-split { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.kt-list { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.kt-list-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 16px 16px 10px; }
.kt-list-h h2 { font-size: 15px; font-weight: 600; }
.kt-items, .kt-docs { list-style: none; margin: 0; padding: 4px 6px 6px; display: flex; flex-direction: column; gap: 2px; }
.kt-item { display: block; padding: 10px 12px; border-radius: var(--r-ctl); text-decoration: none; color: var(--body); position: relative; }
.kt-item:hover { background: var(--bg); }
.kt-item[aria-current="page"] { background: var(--sunken); }
.kt-item[aria-current="page"]::before, .kt-doc[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--honey); }
.kt-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kt-item-top b { font-size: 14px; color: var(--ink); font-weight: 600; min-width: 0; }
.kt-item-d { margin-top: 3px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-item-m { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kt-cr-n { margin-left: auto; padding: 0 7px; border-radius: var(--r-pill); background: var(--honey-soft); color: var(--honey-ink); font-weight: 600; }
.kt-list-foot { padding: 12px 16px 14px; border-top: 1px solid var(--border); line-height: 1.5; }
.kt-detail { padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.kt-d-head { display: flex; flex-direction: column; gap: 6px; }
.kt-d-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kt-d-title h2, .kt-doc-t { font-size: 20px; font-weight: 600; line-height: 1.3; }
.kt-d-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kt-d-meta b { color: var(--ink); font-weight: 600; }
.kt-d-meta code { font-family: var(--font-mono); font-size: 12px; }
.kt-d-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.kt-d-acts .kt-on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.kt-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--border); }
.kt-admin-k { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.kt-danger { color: var(--danger) !important; }
.kt-ok { color: var(--success) !important; }
.kt-form { padding: 16px 18px; border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.kt-form h3, .kt-hist h3 { font-size: 14px; font-weight: 600; color: var(--ink); }
.kt-form .textarea { background: var(--surface); }
.kt-hist { padding: 14px 16px; border-radius: var(--r-card); border: 1px solid var(--border); }
.kt-vers { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.kt-vers li { display: flex; flex-wrap: wrap; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.kt-sec h3 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.kt-sec > p { font-size: 14px; line-height: 1.6; }
.kt-quotes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kt-quote { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg); color: var(--body); font-size: 13px; text-align: left; }
.kt-quote:hover { border-color: var(--border-strong); color: var(--ink); }
.kt-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kt-steps li { display: flex; align-items: flex-start; gap: 12px; }
.kt-steps .n { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--sunken); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--ink); }
.kt-step-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kt-step-t b { font-size: 14px; color: var(--ink); font-weight: 600; }
.kt-steps p, .kt-step-sub { margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.kt-step-sub p { margin: 0; }
.kt-step-sub code { font-size: 11.5px; }
.kt-doc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.kt-code { font-family: var(--font-mono); font-size: 11.5px; padding: 1px 6px; border-radius: 4px; background: var(--sunken); color: var(--ink); }
.kt-tests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kt-test { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-card); }
.kt-test b { font-size: 14px; color: var(--ink); font-weight: 600; }
.kt-test p { margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.kt-test-ic { flex: 0 0 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.kt-test-ic.ok { background: var(--success-soft); color: var(--success); }
.kt-test-ic.bad { background: var(--danger-soft); color: var(--danger); }
.kt-origin { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--border); }
.kt-origin > svg { color: var(--muted); margin-top: 2px; }
.kt-origin a { font-weight: 600; }
.kt-origin p { margin-top: 2px; font-size: 13px; color: var(--muted); }
.kt-crs { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kt-crs li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.kt-crs p { color: var(--body); }
.kt-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.kt-guide { border: 1px solid var(--border); border-radius: var(--r-card); padding: 0; }
.kt-guide summary { cursor: pointer; padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--ink); list-style-position: inside; }
.kt-guide[open] summary { border-bottom: 1px solid var(--border); }
.kt-guide > .md { padding: 14px 18px; font-size: 13.5px; }
.kt-search { position: relative; margin: 0 16px 8px; }
.kt-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.kt-search .input { padding-left: 36px; }
.kt-doclist { border-top: 1px solid var(--border); padding-bottom: 6px; }
.kt-grp { padding: 14px 16px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.kt-doc { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r-ctl); text-decoration: none; color: var(--body); position: relative; }
.kt-doc > svg { color: var(--muted); margin-top: 2px; }
.kt-doc:hover { background: var(--bg); }
.kt-doc[aria-current="page"] { background: var(--sunken); }
.kt-doc b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.kt-doc p { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-always { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--honey-soft); color: var(--honey-ink); font-size: 12px; font-weight: 600; }
.kt-reader { gap: 12px; }
.kt-rule { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }
.kt-doc-body .md { font-size: 14px; line-height: 1.7; }
.kt-doc-foot { border-top: 1px solid var(--border); padding-top: 12px; }
.kt-sc { display: flex; flex-direction: column; gap: 20px; }
.kt-sc-grp h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.kt-sc-grp h2 .cnt { font-size: 12px; font-weight: 600; padding: 0 8px; line-height: 20px; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted-2); }
.kt-sc-list { padding: 0; }
.kt-sc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px 16px; padding: 14px 16px; }
.kt-sc-row + .kt-sc-row { border-top: 1px solid var(--border); }
.kt-sc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kt-sc-name { font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--sunken); padding: 2px 8px; border-radius: 4px; overflow-wrap: anywhere; }
.kt-sc-d { margin-top: 4px; font-size: 14px; color: var(--ink); }
.kt-sc-tpl { margin-top: 2px; font-size: 13px; color: var(--muted); }
.kt-sc-row .help { margin-top: 4px; }
.kt-sc-acts { display: flex; align-items: center; gap: 6px; }
.kt-te { display: flex; flex-direction: column; gap: 8px; }
.kt-te-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.kt-te-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.kt-body-ta { font-size: 12.5px; }
@media (max-width: 1023px) {
  .kt-split { grid-template-columns: minmax(0, 1fr); }
  .kt-admin { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .kt-detail { padding: 16px; }
  .kt-te-row { grid-template-columns: minmax(0, 1fr); }
  .kt-sc-row { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ data screens (Sức khỏe level pattern) */
.ds-page { gap: 16px; }
.ds-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ds-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ds-ai { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.ds-ai-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.ds-ai-head h2 { font-size: 15px; font-weight: 600; }
.ds-ai-when { margin-left: auto; font-size: 12px; color: var(--honey-ink); opacity: .9; }
.ds-ai-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.6; color: var(--body); font-variant-numeric: tabular-nums; }
.ds-ai-list b { color: var(--ink); font-weight: 600; }
.ds-ai-list a { font-weight: 600; }
.ds-ai-skill { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--honey-ink); }
.ds-ai-skill a { color: var(--info); }
.ds-ai-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 2px; }
.ds-ai-acts .btn-secondary { background: var(--surface); }
.ds-ai-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.ds-ai-src { font-size: 12px; color: var(--honey-ink); min-width: 0; overflow-wrap: anywhere; }
.ds-ai-src code { font-family: var(--font-mono); font-size: 11.5px; }
.ds-legend { margin: 10px 0 4px; }
.ds-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--honey); border: 1.5px solid var(--honey-ink); margin-right: 6px; vertical-align: middle; }
.ds-chart { min-height: 220px; margin-top: 6px; }
.ds-chart.scroll { overflow-x: auto; margin: 6px -4px 0; padding-bottom: 4px; }
.ds-chart.scroll .ds-curve { width: auto; max-width: none; }
.ds-curve { display: block; max-width: 100%; height: auto; }
.ds-curve .ds-band { fill: var(--band); }
.ds-curve .ds-median { fill: none; stroke: var(--series-ref); stroke-width: 1.2; stroke-dasharray: 4 3; }
.ds-curve .ds-line { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.ds-curve .ds-pt { cursor: pointer; outline: none; }
.ds-curve .ds-pt .hit { fill: transparent; }
.ds-curve .ds-pt .dot { fill: var(--honey); stroke: var(--honey-ink); stroke-width: 1.2; }
.ds-curve .ds-pt:hover .dot, .ds-curve .ds-pt:focus-visible .dot { stroke: var(--ink); stroke-width: 2; }
.ds-curve .ds-pt.sel .dot { stroke: var(--ink); stroke-width: 2.5; }
.ds-curve .ds-pt-l { font-size: 11px; font-weight: 600; fill: var(--honey-ink); }
.ds-curve .ds-sel { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.ds-curve .ds-sel-l { font-size: 12px; font-weight: 600; fill: var(--ink); }
.ds-curve .ds-sel-g { font-size: 11.5px; fill: var(--muted); }
.ds-curve .ds-sel-g.neg { fill: var(--danger); }
.ds-tablecard > .card-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
.ds-tablecard .tbl th, .ds-tablecard .tbl td { vertical-align: middle; }
.ds-tablecard .tbl td { padding: 9px 12px; font-size: 14px; }
.ds-tablecard .tbl th:first-child, .ds-tablecard .tbl td:first-child { padding-left: 20px; }
.ds-tablecard .tbl tr.hl td { font-weight: 500; }
.ds-tablecard .tbl tr.hl td:first-child { box-shadow: inset 3px 0 0 var(--honey); }
.ds-lv { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ds-gap { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-gap.neg { color: var(--danger); font-weight: 600; }
.ds-gap.pos { color: var(--info); font-weight: 600; }
.ds-flags { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ds-row-acts { display: inline-flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.ds-tfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 20px 14px; border-top: 1px solid var(--border); }
.ds-tfoot .help { flex: 1 1 360px; }
.ds-side-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; }
.ds-cmp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ds-cmp-h h3 { margin: 0; }
.ds-cmp { position: relative; height: 10px; margin: 30px 0 4px; border-radius: 999px; background: var(--sunken); }
.ds-cmp .band { position: absolute; top: 0; bottom: 0; background: var(--band); border-radius: 999px; }
.ds-cmp .med { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); }
.ds-cmp .me { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--honey); border: 2px solid var(--honey-ink); }
.ds-cmp .lbl { position: absolute; top: -26px; transform: translateX(-50%); font-size: 12px; color: var(--body); white-space: nowrap; }
.ds-cmp .lbl.r { transform: translateX(-100%); }
.ds-cmp .lbl.l { transform: none; }
.ds-cmp-axis { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ds-cmp-axis b { color: var(--honey-ink); }
.ds-stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--sunken); }
.ds-stack .w, .ds-stack-l i.w { background: var(--success); }
.ds-stack .l, .ds-stack-l i.l { background: var(--danger); opacity: .8; }
.ds-stack .q, .ds-stack-l i.q { background: var(--muted); opacity: .7; }
.ds-stack-l { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 6px; font-size: 13px; color: var(--body); font-variant-numeric: tabular-nums; }
.ds-stack-l i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.ds-stack-l b { color: var(--ink); }
.ds-cycle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; height: 76px; align-items: end; margin: 6px 0 6px; }
.ds-cycle .col { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; height: 100%; gap: 3px; }
.ds-cycle .bar { display: block; border-radius: 3px 3px 0 0; background: var(--border-strong); min-height: 4px; }
.ds-cycle .col.on .bar { background: var(--honey); }
.ds-cycle .x { font-size: 10.5px; text-align: center; color: var(--muted); font-family: var(--font-mono); }
.ds-cycle .col.on .x { color: var(--honey-ink); font-weight: 600; }
.ds-flaglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ds-flaglist li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ds-flaglist li > span:last-child { color: var(--muted); }
.ds-note p { font-size: 13px; line-height: 1.55; margin-bottom: 6px; }
.ds-note details summary { font-size: 13px; font-weight: 600; cursor: pointer; }
.ds-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.scr-side-sec p { font-size: 13px; }
@media (max-width: 760px) {
  .ds-page .kpis, .ds-body .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ds-page .kpi { padding: 12px; }
  .ds-page .kpi .v { font-size: 22px; }
  .st-card-acts .st-promote { display: none; }
  .ds-ai { padding: 14px 16px; }
  .ds-ai-when { margin-left: 0; width: 100%; }
  .ds-tablecard > .card-head { padding: 14px 16px 10px; }
  .ds-tablecard .tbl td:first-child, .ds-tablecard .tbl th:first-child { padding-left: 14px; }
  .ds-tfoot { padding: 12px 16px; }
}

/* ------------------------------------------------------------------ A/B test, Event, Install extras */
.ds-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ds-exp { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
.ds-side-mono { font-family: var(--font-mono); font-size: 16px !important; overflow-wrap: anywhere; }
.ds-params { font-size: 11.5px; overflow-wrap: anywhere; }
.ds-split { display: inline-flex; align-items: center; gap: 8px; }
.ds-split .bar { display: inline-flex; width: 96px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--sunken); }
.ds-split .bar span { display: block; height: 100%; }
.ds-split .s0 { background: var(--series-android); }
.ds-split .s1 { background: var(--series-ios); }
.ds-split .s2 { background: var(--series-3); }
.ds-split .s3 { background: var(--series-5); }
.ds-ro { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.ds-ro-item { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-card); display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.55; }
.ds-ro-q { color: var(--ink); font-weight: 600; }
.ds-evname b { color: var(--ink); }
.ds-camp { display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; }
.ds-camp code { font-family: var(--font-mono); font-size: 12px; color: var(--ink); overflow-wrap: anywhere; }
.ds-alerts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ds-alerts li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ds-ev { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.55; }
.ds-sites { margin: 6px 0 10px; }
.ds-notfound { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ds-tablecard .tbl td .help { font-size: 12px; }

/* ------------------------------------------------------------------ Điểm tin */
.dt-page { gap: 14px; max-width: 1080px; }
.dt-toolbar { display: flex; flex-direction: column; gap: 10px; }
.dt-tb-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.dt-search { flex: 0 1 340px; min-width: 0; }
.dt-list { display: flex; flex-direction: column; gap: 22px; }
.dt-day-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted-2); letter-spacing: .02em; margin-bottom: 10px; }
.dt-day-h .cnt { font-size: 11px; padding: 0 7px; line-height: 18px; border-radius: var(--r-pill); background: var(--sunken); }
.dt-cards { display: flex; flex-direction: column; gap: 10px; }
.dt-card { padding: 14px 18px 10px; display: flex; flex-direction: column; gap: 6px; }
.dt-card.hi { border-left: 3px solid var(--danger); padding-left: 16px; }
.dt-card.focus { outline: 2px solid var(--honey); outline-offset: 2px; }
.dt-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--muted); }
.dt-card-top .pill.min84 { min-width: 0; }
.dt-dom { display: inline-flex; align-items: center; gap: 5px; color: var(--body); font-weight: 500; }
.dt-t { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.dt-sum { font-size: 14px; line-height: 1.6; color: var(--body); overflow-wrap: anywhere; }
.dt-metric { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dt-metric .k { text-transform: none; }
.dt-metric b { color: var(--ink); }
.dt-toggle { align-self: flex-start; margin-left: -8px; color: var(--muted); }
.dt-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.dt-more { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--bg); border: 1px solid var(--border); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.dt-more b { color: var(--ink); }
.dt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; }

/* ------------------------------------------------------------------ Đề xuất */
.dx-items { padding-top: 0; }
.dx-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dx-hist li { display: flex; gap: 10px; align-items: flex-start; }
.dx-hist .l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.dx-hist .l1 b { color: var(--ink); }
.dx-hist p { font-size: 13px; margin-top: 2px; }
.dx-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.dx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.dx-foot .help { flex: 1 1 240px; }
.dx-diff { display: flex; flex-direction: column; gap: 8px; }
.dx-diff .kt-te-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto; }

@media (max-width: 1023px) {
  .ds-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dt-card { padding: 12px 14px 8px; }
  .dt-search { flex-basis: 100%; }
  .dt-tb-row > .seg { width: 100%; }
  .dx-diff .kt-te-row { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ v1.3.1: Sổ tay feed preview (SoTay.dc.html KPI strip) */
.st-pv-slot { margin-top: 12px; }
.st-pv-slot > .st-embed-link { margin-top: 0; }
.st-pv { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.st-pv-box { display: flex; flex-wrap: wrap; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); overflow: hidden; font-variant-numeric: tabular-nums; }
.st-pv-kpi { flex: 1 1 130px; min-width: 0; padding: 10px 14px; border-right: 1px solid var(--border); }
.st-pv-kpi .l { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pv-kpi .v { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.st-pv-kpi .v.bad { color: var(--danger); }
.st-pv-kpi .v.good { color: var(--success); }
.st-pv-kpi .s { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pv-chart { flex: 2 1 220px; min-width: 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; }
.st-pv-chart .l { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pv-spark { display: block; width: 100%; height: 56px; }
.st-pv-leg { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--muted); }
.st-pv-leg span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.st-pv-leg i { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.st-pv-leg i.ref { width: 0; height: 10px; border-left: 2px dashed var(--series-ref); border-radius: 0; }
.st-pv-box > :last-child { border-right: 0; }
.st-pv-tbl { flex: 1 1 100%; min-width: 0; overflow-x: auto; }
.st-pv-tbl table { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-pv-tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 7px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.st-pv-tbl td { padding: 6px 12px; color: var(--body); border-bottom: 1px solid var(--grid); white-space: nowrap; }
.st-pv-tbl tr:last-child td { border-bottom: 0; }
.st-pv-tbl td.n { text-align: right; }
.st-pv figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--muted); min-width: 0; }
.st-pv figcaption svg { flex: 0 0 auto; }
.st-pv figcaption a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.st-pv figcaption a:hover { color: var(--info); }

/* ------------------------------------------------------------------ v1.3.1: attachments in the Sổ tay editor + images in posts */
.st-ed-box { position: relative; }
.st-ed-box.drop { outline: 2px dashed var(--info); outline-offset: -2px; }
.st-drop-hint { display: none; position: absolute; inset: 0; z-index: 2; align-items: center; justify-content: center; gap: 8px; background: color-mix(in srgb, var(--info-soft) 88%, transparent); color: var(--info); font-size: 14px; font-weight: 600; pointer-events: none; }
.st-ed-box.drop .st-drop-hint { display: flex; }
.st-ups { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface); }
.st-ups[hidden] { display: none; }
.st-up { display: flex; align-items: center; gap: 8px; max-width: 260px; min-width: 0; padding: 4px 4px 4px 4px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg); }
.st-up .th { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 6px; object-fit: cover; background: var(--sunken); }
.st-up .th.ico { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.st-up .tx { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: 2px; }
.st-up .tx b { font-size: 12px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-up .tx .m { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-up.err { border-color: var(--danger); background: var(--danger-soft); }
.st-up.err .tx .m { color: var(--danger); }
.st-up .bar { display: block; height: 4px; border-radius: 2px; background: var(--hover); overflow: hidden; }
.st-up .bar > span { display: block; height: 100%; background: var(--info); transition: width .2s ease; }
.st-up .x { flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.st-up .x:hover { background: var(--hover); color: var(--ink); }
.md .st-img { display: inline-block; max-width: 100%; margin: 4px 0; border: 1px solid var(--border); border-radius: var(--r-ctl); overflow: hidden; background: var(--sunken); line-height: 0; }
.md .st-img img { display: block; max-width: 100%; max-height: 520px; height: auto; }
.md .st-img.broken { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; line-height: 1.4; font-size: 13px; color: var(--muted); }
.md a.st-file { display: inline-flex; align-items: center; gap: 4px; }
.md a.st-file svg { flex: 0 0 auto; }
@media (max-width: 760px) {
  .st-pv-kpi { flex-basis: 45%; }
  .st-pv-kpi:nth-child(2n) { border-right: 0; }
  .st-pv-chart { flex-basis: 100%; }
  .st-pv-box > * { border-bottom: 1px solid var(--border); margin-bottom: -1px; }
  .st-up { max-width: 100%; flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ v1.3.1: Sức khỏe level "Nền tảng" filter */
.ds-platnote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ds-platnote > :first-child { flex: 1 1 360px; min-width: 0; }
.ds-platnote-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-platmix { display: flex; align-items: center; gap: 6px; margin: 0; }
.ds-body[aria-busy="true"] { opacity: .6; transition: opacity .15s ease; }