/* MIDU OS v3: màn /mo-dun (trang chọn, PostMate, SEO). Tiền tố md-. Chỉ xem, không có nút ghi. */

.md-page { min-width: 0; }
.md-nd-goc { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---- dải trạng thái mô đun */
.panel.md-dai { padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.md-dai-hang { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.md-dai-hang .sp { flex: 1 1 0; }
.md-dai-ten { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--fs-md); }
.md-dai-ten .ic { width: 16px; height: 16px; color: var(--accent); }
.md-chips { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.md-kiem { white-space: nowrap; }
.md-dai-ghi { font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.md-nut { text-decoration: none; justify-content: center; }

/* ---- ô lỗi */
.md-loi { padding: 28px 20px; }
.md-loi .empty-title { font-weight: 600; font-size: var(--fs-md); color: var(--text); }
.md-loi-nd { max-width: 480px; line-height: 1.5; overflow-wrap: anywhere; }
.md-loi-nut { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }

/* ---- số liệu: chữ to, nhãn nhỏ */
.md-so { display: grid; gap: 10px; min-width: 0; }
.md-so-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-so-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-so-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md-so-o { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--r); background: var(--fill-2); }
.md-so-o b { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.md-so-o span { font-size: var(--fs-xs); line-height: 1.35; color: var(--text-3); }
.md-so-o b .md-vt { font-size: var(--fs-xl); color: var(--text); line-height: 1.3; }
.md-so-o em { font-style: normal; font-size: var(--fs-xs); color: var(--text-3); }

/* ---- trang chọn mô đun */
.md-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: stretch; }
.panel.pk.md-the { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; }
.panel.pk.md-the:hover { box-shadow: 0 0 0 .5px var(--hair-2), var(--sh-2); text-decoration: none; }
.md-the-dau { display: flex; align-items: center; gap: 12px; min-width: 0; }
.md-the-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); }
.md-the-ten { margin: 0; font-size: var(--fs-lg); line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.md-the-mo-ta { margin: 0; font-size: var(--fs-md); line-height: 1.5; }
.md-the-tt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.md-the-chan { margin-top: auto; display: flex; }

/* ---- PostMate: Fanpage */
.md-fp-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; align-items: stretch; }
.md-fp { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--r); background: var(--card); }
.md-fp-ten { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-md); line-height: 1.3; min-width: 0; }
.md-fp-ten .ic { flex: none; width: 16px; height: 16px; color: var(--accent); }
.md-fp-ten span { min-width: 0; overflow-wrap: anywhere; }
.md-fp .md-so-o { padding: 0; background: transparent; }
.md-fp .md-so-o b { font-size: var(--fs-xl); }

/* ---- PostMate: dự án */
.md-da { color: inherit; text-decoration: none; min-height: 60px; }
.md-da:hover { text-decoration: none; }
.md-da .li-main { flex: 1; min-width: 0; }
.md-trang { max-width: 100%; }
.md-trang .ellip { min-width: 0; }
.md-da-so { flex: none; display: flex; align-items: center; gap: 22px; }
.md-da-o { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 80px; }
.md-da-o b { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.md-da-o span { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }
.md-da-mui { flex: none; display: inline-flex; color: var(--text-3); }
.md-da-mui .ic { width: 18px; height: 18px; }

/* ---- PostMate: bài của một dự án */
.md-quay { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: var(--fs-md); font-weight: 500; color: var(--text-2); text-decoration: none; }
.md-quay:hover { color: var(--accent); text-decoration: none; }
.md-quay .ic { width: 16px; height: 16px; }
.md-da-dau { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--edge); box-shadow: 0 0 0 .5px var(--hair), var(--sh-1); min-width: 0; }
.md-da-ten { margin: 0; font-size: var(--fs-xl); line-height: 1.25; overflow-wrap: anywhere; }
.md-loc-hang { margin-bottom: 10px; }
.md-bai { align-items: flex-start; }
.md-bai-tieu { font-size: var(--fs-md); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.md-bai .li-sub { margin-top: 3px; }

/* ---- SEO */
.md-tiles .tile-sub { white-space: normal; }
.md-tk-cong { margin-bottom: 10px; }
.md-tim { max-width: 360px; }
.md-bang { table-layout: auto; }
.md-bang th.num { text-align: right; }
.md-sap { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--text-3); cursor: pointer; white-space: nowrap; }
.md-sap:hover, .md-sap.on { color: var(--text); }
.md-sap:focus-visible, .md-tk-nut:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.md-sap-mui { display: inline-block; width: 10px; text-align: left; }
.md-tk-nut { padding: 0; border: 0; background: transparent; font: inherit; font-weight: 500; color: var(--text); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.md-bang td.tk { min-width: 180px; }
.md-trang-o { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: var(--text-2); font-size: var(--fs-sm); }
.md-nhan-nho { display: none; }
.md-vt { display: inline-block; min-width: 30px; padding: 1px 8px; border-radius: 99px; background: var(--fill); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.md-vt-top3 { background: var(--good-soft); }
.md-vt-top10 { background: var(--accent-soft); }
.md-doi { display: inline-block; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.md-len { color: color-mix(in srgb, var(--good) 78%, var(--text)); }
.md-xuong { color: color-mix(in srgb, var(--crit) 85%, var(--text)); }
.md-giu { color: var(--text-3); font-weight: 500; }
.md-moi { color: var(--accent); }
.md-ghi { margin-top: 10px; }
.md-cot-bao { margin-top: 14px; }
.md-cot-moc { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }

/* ---- ngăn kéo lịch sử vị trí */
.md-nd { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.md-so-doi { margin-top: -6px; }
.md-bieu-bao { display: flex; flex-direction: column; gap: 4px; }
.md-bieu-truc, .md-bieu-moc { display: flex; justify-content: space-between; gap: 8px; }
.md-bieu { padding: 8px; border-radius: var(--r); background: var(--fill-2); }
.md-bieu .spark { display: block; width: 100%; height: 140px; }
.md-bieu .spark polyline { vector-effect: non-scaling-stroke; }
.md-chi-tiet summary { cursor: pointer; font-size: var(--fs-md); font-weight: 500; color: var(--text-2); padding: 6px 0; }
.md-chi-tiet[open] summary { margin-bottom: 6px; }
.md-bang-ngay td, .md-bang-ngay th { white-space: nowrap; }

@media (max-width: 900px) {
  .md-so-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- điện thoại */
@media (max-width: 640px) {
  .md-luoi { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .md-fp-luoi { grid-template-columns: minmax(0, 1fr); }
  .md-nut { min-height: 44px; }
  .md-dai-hang .sp { display: none; }
  .md-dai-hang .md-nut { flex: 1 1 100%; }
  .md-kiem { white-space: normal; }
  .md-so-3 { gap: 8px; }
  .md-so-o { padding: 9px 10px; }
  .md-so-o b { font-size: var(--fs-xl); }
  .md-so-2 .md-so-o b, .md-so-4 .md-so-o b { font-size: var(--fs-xl); }
  .md-tiles.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .md-quay { min-height: 44px; }
  .md-loc.seg { display: flex; width: 100%; }
  .md-loc.seg button { flex: 1; justify-content: center; min-height: 44px; }

  .md-da { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; padding: 12px 6px; }
  .md-da .li-main { flex: 1 1 calc(100% - 30px); }
  .md-da-so { order: 3; flex: 1 1 100%; gap: 24px; justify-content: flex-start; }
  .md-da-o { align-items: flex-start; min-width: 0; }
  .md-da-mui { order: 2; margin-left: auto; align-self: center; position: absolute; right: 8px; }
  .md-da { position: relative; padding-right: 32px; }
  .md-da-so { padding-right: 0; }

  .md-tim { max-width: none; }
  .md-tk-cong .input { height: 44px; font-size: var(--fs-lg); }

  /* bảng từ khóa thành danh sách thẻ; tiêu đề cột thành hàng nút sắp xếp */
  .md-bang-bao { overflow: visible; }
  .md-bang, .md-bang thead, .md-bang tbody, .md-bang tr, .md-bang td, .md-bang th { display: block; }
  .md-bang thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--hair-2); }
  .md-bang thead th { padding: 0; border: 0; }
  .md-bang thead .md-sap { min-height: 44px; padding: 0 12px; border-radius: var(--r); background: var(--fill-2); font-size: var(--fs-sm); }
  .md-bang thead .md-sap.on { background: var(--accent-soft); color: var(--text); }
  .md-bang tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tk vt" "tr tr" "dt lv" "cn cn"; gap: 6px 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--hair); }
  .md-bang tbody tr:last-child { border-bottom: 0; }
  .md-bang tbody td { padding: 0; border: 0; min-width: 0; text-align: left; }
  .md-bang tbody tr.clickable:hover td { background: transparent; }
  .md-bang tbody tr.clickable:hover { background: var(--fill-2); }
  .md-bang td.tk { grid-area: tk; min-width: 0; }
  .md-bang td.tr { grid-area: tr; }
  .md-bang td.vt { grid-area: vt; justify-self: end; text-align: right; }
  .md-bang td.dt { grid-area: dt; }
  .md-bang td.lv { grid-area: lv; justify-self: end; text-align: right; font-size: var(--fs-sm); }
  .md-bang td.cn { grid-area: cn; }
  .md-bang td.cn::before { content: "Cập nhật "; font-size: var(--fs-xs); color: var(--text-3); }
  .md-tk-nut { min-height: 44px; display: inline-flex; align-items: center; font-size: var(--fs-md); }
  .md-trang-o { max-width: 100%; display: block; }
  .md-nhan-nho { display: inline; color: var(--text-3); font-size: var(--fs-xs); }
  .md-vt { font-size: var(--fs-md); }

  .md-chi-tiet summary { min-height: 44px; display: flex; align-items: center; }
}