/* Màn hình dữ liệu: dashboard, danh sách đơn, chi tiết đơn, đối chiếu.
   Dùng biến của app.css (--nen, --the, --chu, --chu-phu, --vien, --nhan, --dat, --vang, --do, --bo-goc).
   Mobile trước. Đỏ và vàng chỉ dành cho cảnh báo và cờ cần xem, luôn kèm chữ.
   Màu biểu đồ lấy từ bảng màu dataviz đã qua bộ kiểm validate_palette (hai chuỗi: xanh s1, cam s2; sáng và tối). Không style nội tuyến (CSP). */

.mh {
  /* chuỗi biểu đồ s1 xanh, s2 cam; nền biểu đồ riêng để đúng bề mặt đã kiểm tương phản */
  --mh-be-mat: #fcfcfb;
  --mh-chu: #0b0b0b;
  --mh-chu2: #52514e;
  --mh-luoi: #e1e0d9;
  --mh-truc: #c3c2b7;
  --mh-s1: #2a78d6;
  --mh-s2: #eb6834;
  --mh-vien: rgba(11, 11, 11, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mh, :root:not([data-theme="light"]) .mh-tip {
    --mh-be-mat: #1a1a19;
    --mh-chu: #f0efec;
    --mh-chu2: #c3c2b7;
    --mh-luoi: #2c2c2a;
    --mh-truc: #383835;
    --mh-s1: #3987e5;
    --mh-s2: #d95926;
    --mh-vien: rgba(255, 255, 255, 0.10);
  }
}
:root[data-theme="dark"] .mh, :root[data-theme="dark"] .mh-tip {
  --mh-be-mat: #1a1a19;
  --mh-chu: #f0efec;
  --mh-chu2: #c3c2b7;
  --mh-luoi: #2c2c2a;
  --mh-truc: #383835;
  --mh-s1: #3987e5;
  --mh-s2: #d95926;
  --mh-vien: rgba(255, 255, 255, 0.10);
}
.mh-tip { --mh-be-mat: #fcfcfb; --mh-chu: #0b0b0b; --mh-chu2: #52514e; --mh-vien: rgba(11, 11, 11, 0.14); --mh-s1: #2a78d6; --mh-s2: #eb6834; }

.mh-h1 { margin: 0.2rem 0 0.8rem; }
.mh-h2 { font-size: 1.1rem; margin: 1rem 0 0.4rem; }
.mh-h3 { font-size: 1rem; margin: 0.8rem 0 0.4rem; }
.mh-an { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mh-lui { margin: 0 0 0.4rem; }
.mh-lui a { display: inline-flex; align-items: center; min-height: 44px; }
.mh-ghi { color: var(--chu-phu); font-size: 0.9rem; }
.mh-chua { color: var(--chu-phu); }
.mh-chua-co { color: var(--chu-phu); padding: 0.6rem 0; }
.mh-lay { color: var(--chu-phu); font-size: 0.85rem; margin: 0.4rem 0 0; }

/* ---------- tab và chọn kỳ */
.mh-tabs { display: flex; gap: 0.4rem; overflow-x: auto; margin: 0 0 0.75rem; -webkit-overflow-scrolling: touch; }
.mh-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px;
  border: 1px solid var(--vien); background: var(--the); color: var(--chu); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.mh-tab[aria-current="page"] { background: var(--nhan); border-color: var(--nhan); color: var(--nhan-chu); }
.mh-ky { display: flex; align-items: flex-end; gap: 0.6rem; margin: 0 0 0.75rem; }
.mh-ky .mh-truong { flex: 1 1 auto; max-width: 18rem; margin: 0; }
.mh-truong { display: block; margin: 0 0 0.6rem; }
.mh-truong > span { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }

/* ---------- cảnh báo, luôn trên cùng */
.mh-canh-bao { margin: 0 0 1rem; }
.mh-khong-cb { margin: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--vien); border-radius: 8px; background: var(--the); color: var(--chu-phu); font-size: 0.92rem; }
.mh-cb-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.cb {
  display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: baseline; padding: 0.55rem 0.8rem; border-radius: 6px;
  border-left: 6px solid var(--vang); background: var(--nen-vang); color: var(--chu); line-height: 1.4;
}
.cb-nang { border-left-color: var(--do); background: var(--nen-do); }
.cb-nhan { font-weight: 800; font-size: 0.85rem; white-space: nowrap; }
.cb-noi { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.cb a { color: var(--chu); font-weight: 700; }

/* ---------- số lớn */
.mh-hero { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 0.9rem 1rem; margin: 0 0 1rem; }
.mh-nhan { display: block; font-size: 0.85rem; color: var(--chu-phu); line-height: 1.35; }
.mh-so-lon { display: block; font-size: 3rem; line-height: 1.1; font-weight: 650; color: var(--chu); text-decoration: none; margin: 0.2rem 0; overflow-wrap: anywhere; }
a.mh-so-lon:hover { text-decoration: underline; }
.mh-so-chua { font-size: 1.6rem; color: var(--chu-phu); }
.mh-phu { display: block; font-size: 0.85rem; color: var(--chu-phu); line-height: 1.35; margin: 0.15rem 0; }

/* ---------- thẻ */
.mh-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.65rem; margin: 0 0 1rem; }
.mh-the {
  display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; min-height: 5.5rem; margin: 0; padding: 0.7rem 0.8rem;
  color: var(--chu); text-decoration: none;
}
a.mh-the:hover { border-color: var(--nhan); }
.mh-the .mh-so { font-size: 1.5rem; line-height: 1.25; font-weight: 650; margin: 0.15rem 0; overflow-wrap: anywhere; }
.mh-xem { border-left: 5px solid var(--vang); }
.mh-xem-chu { align-self: flex-start; margin-top: 0.2rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--nen-vang); border: 1px solid var(--vang); font-size: 0.78rem; font-weight: 800; color: var(--chu); }
.mh-the-cho { background: var(--nen); border-style: dashed; }
.mh-cho { font-size: 1rem; color: var(--chu-phu); margin-top: 0.3rem; }
.mh-khoi-the { margin: 0 0 0.5rem; }

/* ---------- biểu đồ */
.mh-bieu-do { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 0.9rem; margin: 0 0 1rem; }
.mh-bd { margin: 0; min-width: 0; padding: 0.7rem 0.8rem; background: var(--mh-be-mat); border: 1px solid var(--mh-vien); border-radius: var(--bo-goc); color: var(--mh-chu); }
.mh-bd-td { font-weight: 700; font-size: 0.95rem; }
.mh-bd-phu { color: var(--mh-chu2); font-size: 0.82rem; margin-bottom: 0.3rem; }
.mh-bd .mh-chua-co { color: var(--mh-chu2); }
.mh-cg { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.85rem; color: var(--mh-chu2); margin: 0.2rem 0 0.3rem; }
.mh-cg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
.mh-cg .s1, .mh-tip .s1 { background: var(--mh-s1); }
.mh-cg .s2, .mh-tip .s2 { background: var(--mh-s2); }
.mh-svg { display: block; width: 100%; height: auto; max-width: 560px; overflow: visible; }
.mh-svg path.s1 { fill: var(--mh-s1); }
.mh-svg path.s2 { fill: var(--mh-s2); }
.mh-svg .luoi { stroke: var(--mh-luoi); stroke-width: 1; }
.mh-svg .truc { stroke: var(--mh-truc); stroke-width: 1; }
.mh-svg .tk { fill: var(--mh-chu2); font-size: 11px; font-family: inherit; font-variant-numeric: tabular-nums; }
.mh-svg .gt { fill: var(--mh-chu); font-size: 11px; font-family: inherit; }
.mh-svg .nhan-dam { fill: var(--mh-chu); font-weight: 700; }
.mh-svg .vung { fill: transparent; cursor: default; outline: none; }
.mh-svg .vung:hover, .mh-svg .vung:focus { fill: rgba(128, 128, 128, 0.14); }
.mh-svg .vung:focus-visible { stroke: var(--mh-chu); stroke-width: 1.5; }
.mh-bang-so { margin-top: 0.4rem; font-size: 0.85rem; }
.mh-bang-so summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; color: var(--mh-chu2); }
.mh-bang-so .mh-bang { color: var(--mh-chu); }
.mh-tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 16rem; padding: 0.4rem 0.65rem; border-radius: 8px;
  background: var(--mh-be-mat); color: var(--mh-chu); border: 1px solid var(--mh-vien); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-size: 0.82rem; line-height: 1.45;
}
.mh-tip[hidden] { display: none; }
.mh-tip .t-td { color: var(--mh-chu2); margin-bottom: 0.15rem; }
.mh-tip .t-d { display: flex; align-items: center; gap: 0.4rem; }
.mh-tip .t-d i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.mh-tip .t-d b { font-weight: 700; }

/* ---------- bảng chung */
.mh-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--vien); border-radius: var(--bo-goc); background: var(--the); margin: 0.4rem 0; }
.mh-bang { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mh-bang th, .mh-bang td { text-align: left; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--vien); vertical-align: top; }
.mh-bang thead th { background: var(--nen); white-space: nowrap; }
.mh-bang tbody tr:last-child td, .mh-bang tbody tr:last-child th { border-bottom: 0; }
.mh-bang .mh-so-o { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mh-bang-don td { overflow-wrap: anywhere; }
.mh-o-ma a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; margin-right: 0.3rem; }
.mh-sdt { display: block; }
.mh-hang-huy td { color: var(--chu-phu); }
.mh-hang-huy .mh-o-ma a, .mh-hang-huy td { text-decoration: none; }

/* huy hiệu */
.mh-hh { display: inline-block; padding: 0.05rem 0.55rem; margin: 0.1rem 0.2rem 0.1rem 0; border-radius: 999px; border: 1px solid var(--vien); background: var(--nen); color: var(--chu); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.mh-hh-xem { background: var(--nen-vang); border-color: var(--vang); color: var(--chu); white-space: normal; }
.mh-hh-ds { display: flex; flex-wrap: wrap; gap: 0.2rem; margin: 0 0 0.6rem; }
.mh-co-ds { display: flex; flex-wrap: wrap; gap: 0.15rem; }

/* ---------- bộ lọc và tóm tắt */
.mh-loc { padding: 0.7rem 0.8rem; background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc); margin: 0 0 0.9rem; }
.mh-tim { display: flex; align-items: flex-end; gap: 0.6rem; }
.mh-tim .mh-truong { flex: 1 1 auto; margin: 0; min-width: 0; }
.mh-tim .nut { flex: 0 0 auto; }
.mh-loc-them { margin-top: 0.5rem; }
.mh-loc-them > summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; font-weight: 700; }
.mh-loc-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 0.75rem; margin-top: 0.4rem; }
.mh-loc-nut { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* bảng gọn (đối chiếu): giữ dạng bảng ở mọi khổ, không thành thẻ */
.mh-gon-cuon { overflow-x: auto; border: 1px solid var(--vien); border-radius: var(--bo-goc); background: var(--the); margin: 0.4rem 0; }
.mh-gon { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.mh-gon th, .mh-gon td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--vien); vertical-align: top; }
.mh-gon thead th { background: var(--nen); font-size: 0.8rem; }
.mh-gon .mh-so-o { text-align: right; font-variant-numeric: tabular-nums; }
.mh-gon tbody:last-child tr:last-child td, .mh-gon tbody:last-child tr:last-child th { border-bottom: 0; }
.mh-gon .mh-lech td { background: var(--nen-vang); text-align: left; }
.mh-khop { display: block; font-weight: 400; color: var(--chu-phu); }
@media (max-width: 760px) {
  .mh-gon { font-size: 0.78rem; }
  .mh-gon th, .mh-gon td { padding: 0.35rem 0.3rem; }
  .mh-gon .mh-so-o { overflow-wrap: anywhere; }
}
.mh-dang-loc { padding: 0.5rem 0.8rem; border: 1px solid var(--nhan); background: var(--nen-tin); border-radius: 8px; }
.mh-dang-loc a { display: inline-flex; align-items: center; min-height: 44px; }
.mh-tom-tat { margin: 0 0 0.9rem; }
.mh-tt-dong { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center; margin: 0 0 0.4rem; }
.mh-tt-tien { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.5rem; margin: 0; }
.mh-tt-tien > div { background: var(--the); border: 1px solid var(--vien); border-radius: 8px; padding: 0.45rem 0.7rem; }
.mh-tt-tien dt { font-size: 0.8rem; color: var(--chu-phu); }
.mh-tt-tien dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.mh-trang { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0; }
.mh-trang-tat { color: var(--chu-phu); padding: 0 0.8rem; }
.mh-trang-so { font-weight: 600; }

/* ---------- chi tiết */
.mh-dau-don { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; }
.mh-khoi { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 0.8rem 1rem; margin: 0 0 0.9rem; }
.mh-khoi h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.mh-khoi .mh-khoi { border: 0; padding: 0; margin: 0 0 0.6rem; background: transparent; }
.mh-khoi-xem { border-left: 6px solid var(--vang); background: var(--nen-vang); }
.mh-khoi-xem ul { margin: 0; padding-left: 1.1rem; }
.mh-dl { margin: 0; }
.mh-dl-h { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: 0.2rem 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--vien); }
.mh-dl-h:last-child { border-bottom: 0; }
.mh-dl dt { color: var(--chu-phu); font-size: 0.9rem; }
.mh-dl dd { margin: 0; overflow-wrap: anywhere; }
.mh-ghi-chu { white-space: pre-wrap; }
.mh-nguon { color: var(--chu-phu); font-size: 0.88rem; margin: 0.6rem 0 1rem; }

/* ---------- điện thoại: bảng thành thẻ, không tràn ngang */
.mh-o-viec > div + div { margin-top: 0.25rem; }

@media (max-width: 760px) {
  .mh-h1 { font-size: 1.3rem; }
  .mh-dl-h { grid-template-columns: 1fr; }
  .mh-cuon { overflow-x: visible; border: 0; background: transparent; }
  .mh-bang thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mh-bang, .mh-bang tbody, .mh-bang tfoot, .mh-bang tr { display: block; width: 100%; }
  .mh-bang tr { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 0.4rem 0.8rem; margin: 0 0 0.6rem; }
  .mh-bang th, .mh-bang td { display: flex; justify-content: space-between; gap: 0.8rem; text-align: right; padding: 0.3rem 0; border: 0; min-width: 0; }
  .mh-bang th[data-nhan], .mh-bang td[data-nhan] { border-bottom: 1px dashed var(--vien); }
  .mh-bang tr > :last-child { border-bottom: 0; }
  .mh-bang td[data-nhan]::before, .mh-bang th[data-nhan]::before { content: attr(data-nhan); flex: 0 0 38%; max-width: 38%; text-align: left; color: var(--chu-phu); font-weight: 600; }
  .mh-bang .mh-o-ma { justify-content: flex-start; font-size: 1.05rem; }
  .mh-bang .mh-o-ma::before { display: none; }
  .mh-bang .mh-o-khach, .mh-bang .mh-o-co { flex-wrap: wrap; }
  .mh-bang .mh-so-o { white-space: normal; }
  /* Lịch sử sửa: nhiều câu trong một ô, xếp dọc, canh trái. Kiểu mặc định chia cột ngang làm tràn trang. */
  .mh-bang td.mh-o-viec { display: block; text-align: left; }
  .mh-bang td.mh-o-viec::before { display: block; max-width: none; margin-bottom: 0.2rem; }
  .mh-bang-so .mh-cuon { overflow-x: auto; border: 1px solid var(--mh-vien); background: transparent; }
  .mh-bang-so .mh-bang { display: table; }
  .mh-bang-so .mh-bang thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .mh-bang-so .mh-bang tbody { display: table-row-group; }
  .mh-bang-so .mh-bang tr { display: table-row; background: transparent; border: 0; padding: 0; margin: 0; }
  .mh-bang-so .mh-bang th, .mh-bang-so .mh-bang td { display: table-cell; text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--mh-luoi); }
  .mh-bang-so .mh-bang td { text-align: right; }
}
@media (min-width: 761px) {
  .mh-bang-don { min-width: 70rem; }
  /* overflow-wrap: anywhere cho phép cột co tới từng ký tự: mã đơn, ngày chốt, cờ cần xem rớt dòng dù bảng còn chỗ */
  .mh-bang-don td { overflow-wrap: break-word; }
  .mh-bang-don .c-ma a, .mh-bang-don .c-ngay { white-space: nowrap; }
  .mh-bang-don .mh-o-co { min-width: 8rem; }
  .mh-bang-don .mh-hh-xem { border-radius: 8px; }
  /* 13 cột: cho trang này rộng hơn khung chung và ô gọn lại để máy 1280 không phải cuộn ngang */
  .chinh:has(.mh-bang-don) { max-width: 1500px; }
  .mh-bang-don { font-size: 0.85rem; }
  .mh-bang-don th, .mh-bang-don td { padding-left: 0.35rem; padding-right: 0.35rem; }
  .mh-bang-don td:nth-child(5) { min-width: 6rem; }
}
@media print {
  .mh-tabs, .mh-ky, .mh-loc, .mh-trang { display: none; }
}

/* ---------- danh sách đơn trên điện thoại: mỗi đơn 5 hàng
   hàng 1 mã đơn và trạng thái; 2 khách và 3 số cuối; 3 ngày chốt và sale; 4 ba số tiền; 5 cờ cần xem nếu có */
@media (max-width: 760px) {
  .mh-tt-tien { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-bang-don tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0.4rem; row-gap: 0.1rem; padding: 0.5rem 0.7rem; }
  .mh-bang-don td { padding: 0; border: 0; display: block; text-align: left; min-width: 0; }
  .mh-bang-don td::before { display: none; }
  .mh-bang-don .c-an, .mh-bang-don .c-trong { display: none; }
  .mh-bang-don .c-ma { grid-column: 1 / 3; grid-row: 1; }
  .mh-bang-don .c-tt { grid-column: 3; grid-row: 1; text-align: right; }
  .mh-bang-don .c-khach { grid-column: 1 / 4; grid-row: 2; display: flex; justify-content: space-between; gap: 0.6rem; font-weight: 600; }
  .mh-bang-don .c-khach .mh-sdt { display: inline; font-weight: 400; white-space: nowrap; }
  .mh-bang-don .c-ngay { grid-column: 1 / 3; grid-row: 3; color: var(--chu-phu); font-size: 0.88rem; }
  .mh-bang-don .c-sale { grid-column: 3; grid-row: 3; text-align: right; color: var(--chu-phu); font-size: 0.88rem; }
  .mh-bang-don .c-vat, .mh-bang-don .c-thu, .mh-bang-don .c-con { grid-row: 4; padding-top: 0.3rem; font-weight: 700; font-size: 0.8rem; text-align: left; white-space: nowrap; overflow-wrap: normal; }
  .mh-bang-don .c-con { white-space: normal; }
  .mh-bang-don .c-vat { grid-column: 1; }
  .mh-bang-don .c-thu { grid-column: 2; }
  .mh-bang-don .c-con { grid-column: 3; }
  /* Độ ưu tiên cao hơn quy tắc chung `.mh-bang td[data-nhan]::before` (max-width 38%) đã ép nhãn hẹp, làm nhãn gãy 3 đến 4 dòng. */
  .mh-bang.mh-bang-don td.c-vat::before, .mh-bang.mh-bang-don td.c-thu::before, .mh-bang.mh-bang-don td.c-con::before {
    display: block; content: attr(data-nhan); flex: none; width: auto; max-width: none; min-height: 2.4em; line-height: 1.2;
    white-space: normal; overflow-wrap: normal; font-weight: 400; font-size: 0.72rem; color: var(--chu-phu);
  }
  .mh-bang-don .c-co { grid-column: 1 / 4; grid-row: 5; padding-top: 0.3rem; }
  .mh-bang-don .mh-hh { white-space: normal; }
}

/* ---------- form tạo, sửa đơn và các form nhỏ trong trang chi tiết */
.mh-form input[type="tel"], .mh-form input[type="email"], .mh-form input[type="number"], .mh-form input[type="text"], .mh-form input[type="date"],
.mh-form input:not([type]), .mh-form select, .mh-form textarea {
  width: 100%; min-height: 48px; padding: 0.55rem 0.75rem; font: inherit; font-size: 16px; color: var(--chu); background: var(--the);
  border: 1px solid var(--vien); border-radius: 8px;
}
.mh-form input[type="file"] { width: 100%; min-height: 48px; padding: 0.5rem 0; font: inherit; font-size: 16px; }
.mh-form textarea { min-height: 5rem; }
.mh-truong abbr { text-decoration: none; color: var(--chu-phu); }
.mh-co-loi input, .mh-co-loi select, .mh-co-loi textarea { border-color: var(--do); border-width: 2px; }
.mh-loi { margin: 0.25rem 0 0; padding: 0.3rem 0.6rem; border-left: 5px solid var(--do); background: var(--nen-do); color: var(--chu); font-size: 0.9rem; border-radius: 4px; }
.mh-loi::before { content: "Cần sửa: "; font-weight: 800; }
.mh-loi-chung { margin: 0 0 0.9rem; padding: 0.7rem 0.9rem; border-left: 6px solid var(--do); background: var(--nen-do); color: var(--chu); border-radius: 6px; }
.mh-canh-nhe { padding: 0.5rem 0.7rem; border-left: 5px solid var(--vang); background: var(--nen-vang); color: var(--chu); border-radius: 4px; }
.mh-chon { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; margin: 0 0 0.5rem; cursor: pointer; }
.mh-chon input { width: 24px; height: 24px; flex: 0 0 auto; }
.mh-dong-may { border-top: 1px dashed var(--vien); padding-top: 0.4rem; margin-top: 0.6rem; }
.mh-dong-may[hidden], .mh-hd[hidden], [data-may-khac][hidden] { display: none; }
.mh-hang-3 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 0.5rem; }
.mh-hang-3 .mh-truong span { font-size: 0.8rem; }
.mh-tong { display: grid; gap: 0.3rem; padding: 0.7rem 0.9rem; margin: 0.6rem 0; background: var(--nen); border: 1px solid var(--vien); border-radius: var(--bo-goc); }
.mh-tong > div { display: flex; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.mh-tong strong { font-variant-numeric: tabular-nums; }
.mh-nut-luu { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.4rem 0 1.5rem; }
.mh-chi-js { display: none; }
.mh-js .mh-chi-js { display: inline-flex; }
.mh-hanh-dong { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.9rem; }
.mh-hanh-dong .nut { flex: 1 1 10rem; }
.mh-tai { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: stretch; }
.mh-hanh-dong > .mh-tai { flex: 1 1 18rem; }
.mh-tai .nut { flex: 1 1 10rem; }
.mh-tai .nut-nho { flex: 0 1 auto; }
@media (max-width: 760px) { .mh-tai .nut-nho { flex: 1 1 100%; } }
.mh-ngang { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.7rem; }
.mh-ngang .mh-truong { flex: 1 1 9rem; margin: 0; }
.mh-hang-nut { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.3rem 0; }
.mh-ds-tep, .mh-ds-dm { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.5rem; }
.mh-ds-tep li, .mh-ds-dm li { padding: 0.5rem 0.7rem; border: 1px solid var(--vien); border-radius: 8px; background: var(--the); }
.mh-ds-tep a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; overflow-wrap: anywhere; }
.mh-dm-ten { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; }
.mh-sua-dm > summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; }
.mh-huy > summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; }
.mh-chep-so { width: 100%; font: 0.85rem/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre; overflow: auto; background: var(--the); color: var(--chu); border: 1px solid var(--vien); border-radius: 8px; padding: 0.6rem; margin-top: 0.5rem; }
.mh-ke-toan { border-left: 6px solid var(--nhan); }
.mh-loi-js { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--chu); border-left: 5px solid var(--do); background: var(--nen-do); padding: 0.3rem 0.6rem; border-radius: 4px; }
@media (max-width: 420px) {
  .mh-hang-3 { grid-template-columns: 1fr 1fr; }
  .mh-hang-3 .mh-truong:nth-child(2) { grid-column: 1 / -1; order: -1; }
}
.mh-js .mh-chi-js[hidden] { display: none; }