/* Theme clickup-radar: class thành phần và bố cục.
   Nạp sau tokens.css. Mô tả và HTML mẫu ở components.md. */

body { margin: 0; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Tiện ích ---------- */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Thẻ ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.item { transition: border-color .15s ease, box-shadow .15s ease; }
.item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-pop); }

/* ---------- Nút ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--h-btn); padding: 0 14px; border-radius: var(--r-btn); border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: transform .12s ease, background .12s ease; text-decoration: none; white-space: nowrap; box-sizing: border-box; }
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.sm { height: var(--h-btn-sm); padding: 0 11px; font-size: 12.5px; border-radius: var(--r-btn-sm); }
.btn.pri { background: var(--acc); border-color: var(--acc); color: var(--acc-fg); }
.btn.pri:hover { background: var(--acc-hover); border-color: var(--acc-hover); }
.btn.icon { width: 30px; padding: 0; border-color: transparent; background: transparent; color: var(--fg3); }
.btn.icon:hover { background: var(--hover); color: var(--fg); }
.btn.icon.danger:hover { background: var(--err-bg); color: var(--err-fg); }

/* ---------- Ô nhập ---------- */
.field { height: var(--h-field); box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--surface); color: var(--fg); font: inherit; font-size: 13.5px; padding: 0 12px; }
.field::placeholder { color: var(--fg3); }
.btn:focus-visible, .field:focus-visible, a:focus-visible, .seg button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.search { position: relative; }
.search > svg { position: absolute; left: 11px; top: 10px; color: var(--fg3); }
.search > .field { width: 100%; padding-left: 34px; }
.search > .kbd { position: absolute; right: 9px; top: 9px; }
.kbd { font-family: var(--font-mono); font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg3); }

/* ---------- Thanh bên ---------- */
.nav { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 7px; color: var(--fg2); font-size: 13.5px; font-weight: 500; }
.nav svg { color: var(--fg3); flex: none; }
.nav:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
.nav.on { background: var(--acc-soft); color: var(--acc); font-weight: 700; }
.nav.on svg { color: var(--acc); }
.navsec { margin: 14px 0 4px; padding: 0 10px; font-size: 11.5px; font-weight: 600; color: var(--fg3); }
.count { font-family: var(--font-mono); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill); background: var(--acc); color: var(--acc-fg); }
.count.soft { background: var(--acc-soft); color: var(--acc); }

/* ---------- Tab view (gạch chân tím) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--fg2); font-size: 14px; font-weight: 600; }
.tabs a svg { color: var(--fg3); }
.tabs a:hover { color: var(--fg); text-decoration: none; }
.tabs a.on { color: var(--fg); border-bottom-color: var(--acc); }
.tabs a.on svg { color: var(--acc); }

/* ---------- Bộ lọc liền khối (mục chọn tô đen) ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--fg2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.seg button:hover { color: var(--fg); background: var(--hover); }
.seg button.on { background: var(--ink); color: var(--ink-fg); }

/* ---------- Chip, nhãn ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); color: var(--fg2); font-size: 12.5px; font-weight: 500; }

/* nhãn loại: nền đặc, chữ in hoa */
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-badge); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--k-fg); }
.badge.tip { background: var(--k-tip); }
.badge.tool { background: var(--k-tool); }
.badge.trend { background: var(--k-trend); }
.badge.opp { background: var(--k-opp); }
.badge.news { background: var(--k-news); }

/* nhãn trạng thái: nền nhạt, có chấm */
.spill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.spill::before { content: ''; width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; }
.spill.new { color: var(--s-new); background: var(--s-new-bg); }
.spill.watch { color: var(--s-watch); background: var(--s-watch-bg); }
.spill.sent { color: var(--s-sent); background: var(--s-sent-bg); }
.spill.seen { color: var(--s-seen); background: var(--s-seen-bg); }

/* ---------- Hàng cài đặt (ô icon + tiêu đề + phụ đề + mũi tên) ---------- */
.tile { width: 36px; height: 36px; flex: none; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--fg2); display: flex; align-items: center; justify-content: center; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--fg); }
.row:hover { text-decoration: none; border-color: var(--line-strong); }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font-size: 13.5px; font-weight: 700; }
.row-sub { font-size: 12.5px; color: var(--fg3); }
.row > svg:last-child { color: var(--fg3); flex: none; }

/* ---------- Bài viết dài ---------- */
.md { font-size: 15px; line-height: 1.7; color: var(--fg); }
.md h2 { font-size: 16px; margin: 20px 0 6px; }
.md h2:first-child { margin-top: 0; }
.md p, .md ol { margin: 0 0 12px; }
.md li { margin-bottom: 4px; }
.md code { font-family: var(--font-mono); font-size: 13px; background: var(--sunk); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.md pre { margin: 0 0 14px; padding: 14px 16px; border-radius: 10px; background: var(--code-bg); color: var(--code-fg); overflow: auto; }
.md pre code { background: none; border: 0; padding: 0; color: inherit; font-size: 12.5px; line-height: 1.6; }
.md blockquote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--acc); background: var(--acc-soft); border-radius: 0 8px 8px 0; }

/* ================= Bố cục ================= */

/* khung: thanh bên 232px + phần chính; màn hẹp thì thanh bên xuống trên */
.app { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; background: var(--bg); }
.side { flex: 1 1 var(--w-side); box-sizing: border-box; padding: 12px 10px; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
.side-foot { margin-top: auto; display: flex; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.side-foot .nav { flex: 1; }
.maincol { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }

/* khối chuyển workspace ở đầu thanh bên */
.ws { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--fg); font: inherit; cursor: pointer; text-align: left; }
.ws:hover { background: var(--hover); }
.ws-logo { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--acc); color: var(--acc-fg); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; }
.ws-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ws-name { font-size: 14px; font-weight: 700; }
.ws-sub { font-size: 11.5px; color: var(--fg3); }

/* thanh trên 56px: đường dẫn, ô tìm, chuông, avatar */
.top { height: var(--h-top); box-sizing: border-box; padding: 0 28px; display: flex; align-items: center; gap: 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.crumb { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.crumb a { color: var(--fg3); font-weight: 500; }
.crumb .sep { color: var(--line-strong); }
.crumb b { font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.top .search { flex: 0 1 300px; }
.top .search .field { background: var(--sunk); border-color: var(--line); padding-right: 36px; }
.dot { position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--bad); border: 2px solid var(--surface); }
.avatar { flex: none; width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--acc-soft); color: var(--acc); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; }

/* vùng nội dung */
.page { box-sizing: border-box; padding: 28px 32px 64px; }
.page-in { max-width: var(--w-page); margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

/* đầu trang: tiêu đề to + phụ đề xám, nút bên phải */
.ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.ph-text { display: flex; flex-direction: column; gap: 6px; }
.ph h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.ph-sub { margin: 0; font-size: 14.5px; color: var(--fg2); max-width: 560px; }
.ph-meta { margin: 0; font-size: 12.5px; color: var(--fg3); }
.ph-actions { display: flex; gap: 10px; }

/* 4 ô số liệu */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.stat { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.stat-label { font-size: 13px; font-weight: 500; color: var(--fg2); }
.stat-value { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.stat-note { font-size: 12px; font-weight: 600; } /* đặt màu bằng style: var(--ok), var(--acc), var(--s-new), var(--fg3) */

/* thẻ tóm nhanh: lưới hàng cài đặt */
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }

/* thẻ lọc */
.filter { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filter-bar .search { flex: 1 1 220px; }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.filter-chips > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--fg3); margin-right: 4px; }

/* lưới thẻ 2 cột; thẻ đang mở thì chiếm cả hàng: style="grid-column: 1 / -1" */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; }
.sec-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; align-items: stretch; }

/* thẻ tin trong lưới */
.ic { display: flex; flex-direction: column; }
.ic-body { flex: 1; padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.ic-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ic-head > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ic-topic { font-size: 12.5px; font-weight: 500; color: var(--fg3); }
.ic-title-row { display: flex; align-items: flex-start; gap: 14px; }
.ic h3 { flex: 1; min-width: 0; margin: 0; font-size: 16.5px; line-height: 1.4; font-weight: 700; letter-spacing: -0.005em; }
.ic-desc { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--fg2); }
.ic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--fg3); }
.ic-foot { padding: 10px 12px 10px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ic-foot > div { display: flex; align-items: center; gap: 8px; }
.ic-foot > div:last-child { gap: 2px; }

/* ô điểm 48px: điểm cao nền tím, điểm thường nền chìm */
.score { flex: none; width: 48px; height: 48px; border-radius: 10px; background: var(--sunk); color: var(--fg); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score.hi { background: var(--acc); color: var(--acc-fg); border-color: var(--acc); }
.score b { font-family: var(--font-mono); font-size: 18px; font-weight: 700; line-height: 1; }
.score span { font-size: 10px; font-weight: 600; opacity: .85; margin-top: 2px; }

/* hộp nhấn tím nhạt ("Vì sao đáng xem") */
.callout { padding: 12px 14px; border-radius: 10px; background: var(--acc-soft); border: 1px solid var(--acc-line); display: flex; flex-direction: column; gap: 4px; }
.callout > span { font-size: 12px; font-weight: 700; color: var(--acc); }
.callout > p { margin: 0; font-size: 14px; line-height: 1.6; }