/* MIDU OS v3: hệ chuẩn. Nạp CUỐI trong index.html nên thắng các file trước khi cùng độ ưu tiên.
 * Một thang cho cả giao diện: sáu cỡ chữ, hai cỡ số, ba chiều cao điều khiển, một kiểu khối, một kiểu ô con.
 * Sửa cỡ, đệm, chiều cao thì sửa ở đây, đừng thêm số lẻ vào file màn hình. Nông trại (.farm-*, .fm-*) có thang riêng, không đụng. */

/* ------------------------------------------------------------- biến */
:root {
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-h1: 28px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --pad-khoi: 16px; --pad-con: 12px;
  --h-sm: 30px; --h-ctl: 36px; --h-tap: 44px;
}
@media (max-width: 860px) { :root { --fs-h1: 22px; --pad-khoi: 12px; } }

/* ------------------------------------------------------------- khối (K.panel sinh .panel.pk) */
/* .pk vốn là ô KPI pastel của bản cũ: bo 22, gap 6, che phần tràn, vòng tròn trang trí. Ở đây thành khối chuẩn. */
.panel.pk.pk { border-radius: var(--r-lg); padding: var(--pad-khoi); gap: var(--sp-3); overflow: visible; box-shadow: none; }
.panel.pk::after { content: none; }
.panel.pk.pk > .section-title { padding: 0; margin: 0; }
.panel.pk.pk > * { margin-top: 0; margin-bottom: 0; }
.panel.pk > .seg:empty { display: none; }
.page-head { padding: 0; }
.list-item:not(.clickable):not(.cv-ga-hang) { padding-left: 0; padding-right: 0; }
/* hàng bấm được: nền hover tràn ra 8px mỗi bên, chữ vẫn thẳng lề với khối */
.list-item.clickable, .list-item.cv-ga-hang { padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; }
.list-item.cv-ga-hang { width: calc(100% + 16px); }

/* ô con trong khối: một đệm, một bo, không viền đôi */
.tile, .kn-cli, .qg-dx, .md-so-o, .md-fp, .cc-chi-ten, .cn-so, .cn-sai, .kx-caption, .kx-tru-o,
.tt-pb, .cv-chay, .cv-ga-tom, .qg-tra, .td-nd, .knt-hop, .da-kenh, .md-bieu { padding: var(--pad-con); border-radius: var(--r); }
.panel .tile, .md-fp, .kx-tru-o, .qg-dx, .tt-pb { border: 0; box-shadow: none; background: var(--fill-2); }
.panel.knt-tong .knt-nhom { padding: 0; border: 0; background: none; border-radius: 0; }
.da-the { padding: var(--pad-khoi); border-radius: var(--r-lg); }

/* ------------------------------------------------------------- chữ */
body { font-size: var(--fs-md); }
.section-title, .da-ten, .tw-ten, .kx-the-ten h2, .md-the-ten, .knt-h-tx h3, .knt-chuong h2, .drawer-title .head-title { font-size: var(--fs-lg); font-weight: 700; }
.panel.pk > .section-title .right, .section-title .muted { font-size: var(--fs-sm); }
.md-da-ten { font-size: var(--fs-xl); font-weight: 700; }
.hm-ten, .tq-ten, .tt-pb-ten, .li-title, .kn-cli-ten, .knt-ten, .md-dai-ten, .md-fp-ten, .md-bai-tieu, .tv-ten b, .kx-tk-ten, .buoc-title { font-size: var(--fs-md); font-weight: 600; }
.li-sub, .field-label, .tq-so { font-size: var(--fs-sm); }
.small, .muted.small, .tl-time { font-size: var(--fs-xs); }
.chip, .lchip, .tab-count { font-size: var(--fs-xs); }
.chip { height: 24px; }
.tile-label, .da-so span, .md-so-o em, .kx-so span, .cn-so span { font-size: var(--fs-sm); }
.tile-sub { font-size: var(--fs-xs); }
.tile-value { font-size: var(--fs-h1); }
.tt-pb-so b, .md-so-o b, .cn-so b, .kx-so b, .tv-so-lon .tv-o b, .da-so b, .so-lon, .bc-so-luoi .tile-value, .qg-cp .tile-value { font-size: var(--fs-xl); font-weight: 700; }
.page-head h1 { font-size: var(--fs-h1); }
.tile-of { font-size: var(--fs-lg); }
.cot-label, .sb-sub, .sidebar .sb-sub, .sidebar .nav-group, kbd, .uc-role { font-size: var(--fs-xs); }
.sidebar .nav-item, .tab, .toast { font-size: var(--fs-md); }
.tb-title, .tb-search input { font-size: var(--fs-md); }
.drawer-title { font-size: var(--fs-lg); }

/* ------------------------------------------------------------- điều khiển: ba chiều cao 30, 36, 44 */
.btn, input.input, select.input, .user-chip { height: var(--h-ctl); font-size: var(--fs-md); }
.btn.sm, input.input.sm, select.input.sm, .fchip { height: var(--h-sm); font-size: var(--fs-sm); }
.seg button { height: var(--h-sm); font-size: var(--fs-sm); }
.btn.lg, input.input.lg { height: var(--h-tap); font-size: var(--fs-lg); }
.icon-btn { width: var(--h-ctl); height: var(--h-ctl); }
.toast-btn { font-size: var(--fs-sm); }
.filters { align-items: center; }

/* ------------------------------------------------------------- vùng chạm 44px ở điện thoại */
@media (max-width: 860px) {
  .btn, .btn.sm, .btn.lg, .icon-btn, input.input, input.input.sm, select.input, select.input.sm, .seg button, .fchip,
  .tab, .chip.as-btn, .tm-node, .fe-step, .kh-share, .user-chip, .gop-y-btn, .kn-x,
  .farm-zoom button { min-height: var(--h-tap); height: auto; }
  .btn, .btn.sm, .seg button, .fchip, .user-chip { padding-top: 0; padding-bottom: 0; }
  .icon-btn, .kn-x, .farm-zoom button { min-width: var(--h-tap); }
  .kn-x { width: var(--h-tap); height: var(--h-tap); }
  .seg { padding: 2px; }
  /* nút giữa dòng chữ cũng đủ cao */
  .btn.link, a.btn { min-height: var(--h-tap); }
}

/* nút tròn đánh dấu xong: vòng 20px vẽ bằng ::before, vùng bấm thật 44px (bù lề âm để hàng không cao thêm) */
@media (max-width: 860px) {
  .check { width: var(--h-tap); height: var(--h-tap); margin: -11px -12px -13px; border: 0; position: relative; }
  .check::before { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid var(--hair-2); }
  .check:hover::before { border-color: var(--good); }
  .check.on, .check:hover { background: transparent; }
  .check.on::before { background: var(--good); border-color: var(--good); }
  .check .ic { position: relative; }
}

/* ------------------------------------------------------------- lưới: thẻ theo nội dung, không kéo cao bằng nhau */
.tq-luoi { align-items: start; }
.da-the > :last-child { margin-top: auto; }

/* Nông trại nhúng trong Tổng quan: một khối chuẩn, cột bên không thành thẻ trong thẻ */
.panel.tq-farm-panel { padding: var(--pad-khoi); display: flex; flex-direction: column; gap: var(--sp-3); border-radius: var(--r-lg); }
.panel.tq-farm-panel > .section-title { padding: 0; margin: 0; }
.tq-farm .farm-side { border: 0; padding: 0; background: none; }
.tq-farm .farm-side .seg:empty { display: none; }

/* ------------------------------------------------------------- hàng tab và nhóm lọc cuộn ngang: mờ dần ở mép phải để biết còn nữa */
@media (max-width: 520px) {
  .tabs[role="tablist"], .kx-tabs, .kx-nt, .kn-seg { flex-wrap: nowrap; overflow-x: auto; padding-right: 32px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .tabs[role="tablist"]::-webkit-scrollbar, .kx-tabs::-webkit-scrollbar, .kx-nt::-webkit-scrollbar, .kn-seg::-webkit-scrollbar { display: none; }
  .tabs[role="tablist"] > *, .kx-tabs > *, .kx-nt > *, .kn-seg > * { flex: none; white-space: nowrap; }
}

/* hàng ô số: nhãn một hay hai dòng thì số vẫn thẳng hàng (ba hàng con dùng chung với lưới ngoài) */
.tq-tiles > .tile, .md-tiles > .tile { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: var(--sp-1); align-content: start; }
.tq-tiles > .tile > .tile-label, .md-tiles > .tile > .tile-label { align-items: flex-start; }

/* ------------------------------------------------------------- điện thoại: Góp ý gọn, thông báo nổi đủ rộng, ô chọn chia đều */
@media (max-width: 860px) {
  /* chỉ còn biểu tượng 44x44, chữ ẩn bằng cỡ 0 (trình đọc màn hình vẫn đọc được) */
  .gop-y-btn { width: var(--h-tap); padding: 0; gap: 0; justify-content: center; font-size: 0; }
  .gop-y-btn .ic { width: 20px; height: 20px; }
  .filters select.input.sm { flex: 1 1 calc(50% - 6px); min-width: 0; width: auto; }
}
@media (max-width: 520px) {
  .toast-root { left: var(--sp-3); right: var(--sp-3); transform: none; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); align-items: stretch; }
  .toast { width: 100%; max-width: none; }
  .toast > span:not(.ic) { flex: 1; min-width: 0; }
  .toast-btn { flex: none; white-space: nowrap; min-height: var(--h-tap); padding: 0 var(--sp-3); }
}

/* tiêu đề khối có ghi chú bên phải: hết chỗ thì ghi chú xuống dòng, tiêu đề không bị bóp thành hai dòng */
.panel.pk > .section-title { flex-wrap: wrap; row-gap: var(--sp-1); }
@media (max-width: 860px) { .knt-btn { flex: 1 1 0; } }

/* câu gợi ý của Quản gia: có khung như chip ở các màn khác */
.qg-goi-y .btn.ghost { border-color: var(--hair-2); background: var(--paper); height: auto; min-height: var(--h-sm); white-space: normal; text-align: left; padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
@media (max-width: 860px) { .qg-goi-y .btn.ghost { min-height: var(--h-tap); } }

/* ngăn kéo đóng nằm ngoài màn hình nhưng bóng vẫn lọt vào mép phải */
.drawer:not(.open) { box-shadow: none; visibility: hidden; transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility 0s .24s; }

/* ------------------------------------------------------------- vòng 2: cỡ chữ, đệm, vùng chạm, bố cục điện thoại */

/* Cỡ chữ ngoài thang, chỉ có hai nhóm được phép:
 * 1) số đếm trong huy hiệu (.nav-count 11.5, .tab-badge 11, .tb-badge 10.5) cỡ 10 đến 11.5 vì khung tròn 16px không chứa nổi cỡ 12;
 * 2) .sb-name cỡ 17 (chữ ký thương hiệu ở thanh bên, cố ý). Nông trại có thang riêng. */
.form label, .form-row label, .brand-meta label, .gts label { font-size: var(--fs-sm); }
.modal-title { font-size: var(--fs-lg); }
.empty-title { font-size: var(--fs-md); }
.chip .av, .user-chip .av, .tt-av .av { font-size: var(--fs-xs) !important; } /* core.js đặt cỡ chữ avatar bằng style trong dòng */
.tv-dau .av { font-size: var(--fs-xl) !important; }
.tb-badge, .tab-badge, .nav-count { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .tile-of { font-size: var(--fs-sm); }
  .tab-item { font-size: var(--fs-xs); }
}

/* Đệm: khối dùng --pad-khoi, ô con dùng --pad-con */
.panel.kx-dai, .panel.kx-the, .panel.kx-tk, .panel.kx-sd, .panel.kx-luat, .panel.kx-canh-khoi, .panel.md-dai, .panel.tv-card { padding: var(--pad-khoi); }
.kx-canh, .tv-o { padding: var(--pad-con); }
.tq-farm-panel .fm-stats div { padding: var(--pad-con); }
.tq-farm-panel .panel.fm-person { padding: var(--pad-con); }
.panel.fm-person { padding: var(--pad-khoi); }
/* bốn số của thẻ thành viên xếp hai hàng hai cột để đệm 12px không làm chữ bị cắt */
.tv-so { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Đăng nhập: thẻ nằm giữa màn hình theo chiều dọc */
body.auth #view { display: flex; align-items: center; justify-content: center; min-height: 100%; }
body.auth .login-wrap { width: 100%; }

/* ------------------------------------------------------------- điện thoại (860px trở xuống) */
@media (max-width: 860px) {
  /* Góp ý nằm cùng hàng với thanh tab, bên phải, không đè lên nội dung đang cuộn */
  body:has(.gop-y-btn) .tabbar { right: calc(8px + var(--h-tap) + 8px); }
  .gop-y-btn { right: 8px; bottom: 16px; }
  body:has(.gop-y-btn) .content { padding-bottom: 92px; }
  .tabbar .tab-item { min-width: 0; padding-left: 0; padding-right: 0; }

  /* Vùng chạm 44x44. Liên kết trong dòng chữ nới bằng đệm cộng lề âm nên hàng không cao thêm. */
  :is(.content, .drawer, .modal) a:not([class]),
  a.small, .muted a, .knt-ten-lk, .kx-quay, .section-title a, .cell-link, .goal-link, .back { padding: 14px 8px; margin: -14px -8px; }
  .qg-lien { padding: 10px 6px; margin: -10px -6px; min-height: var(--h-tap); }
  .agent-pill { min-height: var(--h-tap); min-width: var(--h-tap); justify-content: center; }
  .kx-quay { margin-bottom: -10px; }
  .section-title a { display: inline-block; }
  a.tq-row { padding-top: 12px; padding-bottom: 12px; margin-top: -7px; margin-bottom: -7px; }
  .da-the a.chip { position: relative; }
  .da-the a.chip::after, .tag-list a.chip::after { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
  .user-chip { min-width: var(--h-tap); }
  .seg button { min-width: var(--h-tap); }
  .sidebar .nav-item { height: auto; min-height: var(--h-tap); }
  .prop-input, .modal input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .modal select, .modal textarea { min-height: var(--h-tap); }
  .hd-tick, .fm-switch, .fm-more > summary, .kn-tick, label.kn-tick, .form label.kn-tick, label.cc-tick { min-height: var(--h-tap); }
}

/* nhãn phụ và nhãn cột tối đa hai dòng thay vì cắt bằng dấu ba chấm */
@media (max-width: 520px) {
  .tile-sub, .cot-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------- Nông trại: chip phiên và dải thời kỳ (chỉ đụng hai chỗ này, bản đồ giữ nguyên) */
.fm-top .lchip { flex: none; max-width: none; }
@media (max-width: 720px) {
  .fe-steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; padding-right: 32px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
  .fe-steps::-webkit-scrollbar { display: none; }
  .fe-step { flex: none; }
  .fe-step b { overflow: visible; text-overflow: clip; }
}