/* Màn tai-lieu (mockup 4q) — CSS riêng của màn này (chỉ dùng token trong tokens.css). */
.tl-man { display: flex; flex-direction: column; gap: 16px; }
.tl-mo { margin-top: 6px; }
.tl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.tl-trai { gap: 12px; min-width: 0; }
.tl-bang { overflow-x: auto; }
.tl-bang .tbl td { padding-top: 4px; padding-bottom: 4px; }

/* Thanh tab là nút bấm được (hub.css .seg chỉ định dạng span) */
.seg button { height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--font-sans); color: var(--ink-muted); background: var(--surface); border: 0; border-right: 1px solid var(--line); cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--ink); color: var(--surface); font-weight: 600; }
.seg button em { font-style: normal; font-variant-numeric: tabular-nums; opacity: .75; }
.tl-tim { height: 34px; width: 220px; max-width: 100%; color: var(--ink-subtle); }
.tl-tim input { border: 0; outline: 0; background: transparent; color: var(--ink); font: var(--text-body); font-family: var(--font-sans); width: 100%; min-width: 0; }
.tl-tim:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--selected-tint); }

.tl-link { height: auto; min-height: 38px; padding: 4px 4px 4px 12px; }
.tl-url { flex: 1; min-width: 0; overflow-wrap: anywhere; font: var(--text-small); }
.tl-link .btn { flex: none; }
textarea.tl-mt { min-height: 60px; }
.tl-ban { gap: 8px; }
.tl-tep { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tl-tep-t { min-width: 0; flex: 1 1 200px; gap: 8px; flex-wrap: nowrap; align-items: flex-start; font: var(--text-body); }
.tl-tep-t .i, .tl-tep-t b { flex: none; margin-top: 3px; }
.tl-tep-t b { font: 600 12px/1 var(--font-sans); color: var(--ink-muted); }
.tl-ten { flex: 1; min-width: 0; overflow-wrap: break-word; color: var(--ink); }
.tl-tep-n { flex: none; gap: 2px; margin-left: auto; }
.tl-tep-n label.btn { cursor: pointer; }
.tl-nut { justify-content: space-between; }
.tl-con { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tl-con li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tl-mo-tl { border: 0; background: none; padding: 0; text-align: left; color: var(--link); font: var(--text-body); cursor: pointer; min-width: 0; }
.tl-mo-tl:hover { text-decoration: underline; }
.tl-file { height: auto; padding: 7px 10px; }

@media (max-width: 1100px) {
  .tl-grid { grid-template-columns: minmax(0, 1fr); }
}