/* MIDU OS v3: bảng tổng hợp kết nối ở đầu màn /ket-noi (MIDU, Xưởng, PostMate, SEO). Tiền tố knt-. */

.knt-chuong { margin: 22px 2px 10px; }
.knt-chuong h2 { font-size: var(--fs-lg); line-height: 1.25; font-weight: 700; margin: 0 0 2px; }

.panel.knt-tong { padding-top: 14px; }
.knt-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }

.knt-nhom[data-nhom="midu"], .knt-nhom[data-nhom="xuong"] { grid-column: 1 / -1; }
.knt-nhom { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--fill-2); }
.knt-h { display: flex; flex-direction: column; gap: 10px; }
.knt-h-ten { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.knt-h-ic { flex: none; width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.knt-h-ic .ic { width: 18px; height: 18px; }
.knt-h-tx { flex: 1; min-width: 0; }
.knt-h-tx h3 { margin: 0; font-size: var(--fs-md); line-height: 1.3; font-weight: 700; }
.knt-h-tx .muted { line-height: 1.4; }
.knt-che { flex: none; }
.knt-dems { display: flex; flex-wrap: wrap; gap: 6px; }
.knt-dem { font-variant-numeric: tabular-nums; }
.knt-dem-ok { color: var(--good); background: var(--good-soft); }
.knt-dem-loi { color: var(--crit); background: var(--crit-soft); }
.knt-dem-han { background: var(--warn-soft); }

.knt-ghi { margin: 0; line-height: 1.45; }
.knt-hop { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--crit-soft); font-size: var(--fs-sm); line-height: 1.45; }
.knt-hop > .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--crit); }
.knt-hop .small { color: var(--text-2); margin-top: 2px; }

.knt-ds { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.knt-dong { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "ic main tt" ". nut nut"; align-items: start; gap: 6px 12px; padding: 10px 2px; border-bottom: 1px solid var(--hair); min-width: 0; }
.knt-dong:last-child { border-bottom: 0; padding-bottom: 2px; }
.knt-dong > .cc-ic { grid-area: ic; }
.knt-main { grid-area: main; min-width: 0; }
.knt-tt { grid-area: tt; justify-self: end; white-space: nowrap; }
.knt-nut { grid-area: nut; display: flex; flex-wrap: wrap; gap: 6px; }
.knt-ten { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.knt-ten-lk { color: inherit; text-decoration: none; }
.knt-ten-lk:hover { color: var(--accent); text-decoration: none; }
.knt-phu, .knt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 2px; line-height: 1.4; }
.knt-cham { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); opacity: 0.7; }
.knt-han-sap { color: #9a6a00; font-weight: 600; }
.knt-han-het { color: var(--crit); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .knt-han-sap { color: var(--warn); } }
:root[data-theme="dark"] .knt-han-sap { color: var(--warn); }
.knt-loi { margin-top: 6px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--crit-soft); color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; }
.knt-btn { max-width: 100%; }
.knt-ngoai { width: 12px; height: 12px; margin-left: 2px; opacity: 0.7; }
.knt-nhan-ma { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

@media (min-width: 900px) {
  .knt-dong { grid-template-columns: 32px minmax(0, 1fr) auto minmax(230px, auto); grid-template-areas: "ic main tt nut"; align-items: center; }
  .knt-nut { justify-content: flex-end; }
}
@media (max-width: 900px) {
  .knt-luoi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .knt-dong { grid-template-areas: "ic main tt" "nut nut nut"; }
  .knt-nhom { padding: 12px; }
  .knt-btn { flex: 1 1 auto; justify-content: center; }
  .knt-nut { padding-left: 0; }
  .knt-h-ten { flex-wrap: wrap; }
  .knt-che { flex-basis: 100%; }
}