/* ═══ TRANG CHỦ mm.29son.com — NÂNG CẤP 02/10/2026 ══════════════════════
   Anh Sơn: «thêm cho tôi 1 tab quản lý các công việc cần hoàn thành ở trang
   này… nâng cấp lại toàn bộ trang này cho dễ sử dụng».
   Nạp SAU khối <style> trong index.html nên đè được luật cũ.
   ⛔ Chỉ trang chủ dùng file này — màn vẽ ve.html KHÔNG nạp.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- chế độ tối (cùng khoá yana_theme với màn vẽ) ---------- */
:root[data-theme="dark"] {
  --nen: #0f1720; --the: #16202c; --vien: #2a3a4d; --vien-dam: #3a4f68;
  --chu: #e5ecf4; --chu-nhat: #93a3b6; --xanh: #6ea8e8; --xanh-nhat: #14304d;
  --do: #ef6f8e; --xanh-la: #4cc26d; --vang: #e8a83a;
}
:root[data-theme="dark"] body { background: var(--nen); color: var(--chu); }
:root[data-theme="dark"] .muc-cot:hover,
:root[data-theme="dark"] .nut:hover,
:root[data-theme="dark"] .nut.lang:hover { background: #22303f; }
:root[data-theme="dark"] .nut.chinh { background: #1d5fa3; border-color: #1d5fa3; }
:root[data-theme="dark"] .nut.chinh:hover { background: #2470bd; }
:root[data-theme="dark"] .the-hinh { background: #1b2634; }
:root[data-theme="dark"] .hinh-bc { stroke: #5d7086; }
:root[data-theme="dark"] .anh-o.khong .o-hinh { background: #1b2634; }
:root[data-theme="dark"] .loi-bao { background: #2a3a4d; }
:root[data-theme="dark"] .loi-bao.loi { background: #b0284f; }
:root[data-theme="dark"] .loi-bao.xong { background: #237a39; }
:root[data-theme="dark"] .man-mo { background: rgba(0,0,0,.6); }
:root[data-theme="dark"] .cs-dong { border-bottom-color: var(--vien); }
:root[data-theme="dark"] input[type="date"], :root[data-theme="dark"] input[type="time"] { color-scheme: dark; }
:root[data-theme="dark"] select.o-nhap, :root[data-theme="dark"] textarea.o-nhap { background: var(--the); color: var(--chu); }

/* ---------- cột trái: mục Việc cần làm ---------- */
.muc-cot.muc-viec { font-weight: 600; }
.muc-cot .so-viec { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--xanh-nhat); color: var(--xanh); font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; }
.muc-cot .so-viec:empty { display: none; }
.muc-cot .so-viec.do { background: var(--do); color: #fff; }
.vach-cot { height: 1px; background: var(--vien); margin: 10px 4px 0; }

/* ---------- thanh trên lưới bản đồ ---------- */
#thanhLuoi { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; }
#thanhLuoi .tl-ten { font-weight: 600; font-size: 15px; margin-right: auto; }
#thanhLuoi select.o-nhap { width: auto; height: 32px; padding: 0 8px; font-size: 13px; }
#thanhLuoi label { font-size: 12px; color: var(--chu-nhat); display: inline-flex; align-items: center; gap: 6px; }
.the-phu { gap: 6px; }
.the-nut { display: inline-flex; flex: none; }
#hopThu { margin-top: 18px; }
#hopThu .nut { font-size: 12px; }
#luoiThu { margin-top: 12px; opacity: .8; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
@media (max-width: 760px) { #luoiThu { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } }
.the-map.ban-thu { border-style: dashed; }

/* ---------- dải Việc hôm nay + việc khớp ô tìm ---------- */
.dai-viec { background: var(--the); border: 1px solid var(--vien); border-radius: 10px;
  padding: 10px 12px 6px; margin-bottom: 14px; }
.dai-dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.dai-dau b { font-size: 14px; }
.dai-dau .dai-xem { margin-left: auto; color: var(--xanh); font-weight: 600; }
.dai-them { border: 0; background: none; color: var(--xanh); cursor: pointer; padding: 6px 0 4px 38px; font-size: 13px; }

/* ---------- màn Việc cần làm ---------- */
#manViec { max-width: 1180px; }
.vt-dau { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.vt-tieu-de { margin: 0; font-size: 20px; font-weight: 600; }
.vt-tom-tat { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--chu-nhat); }
.vt-tom-tat b { color: var(--chu); font-size: 15px; }
.vt-tom-tat .do b { color: var(--do); }
.vt-tom-tat .cam b { color: #d9480f; }
.vt-tom-tat .xanh b { color: var(--xanh); }
:root[data-theme="dark"] .vt-tom-tat .cam b { color: #f08c4b; }

.vt-nhap { background: var(--the); border: 1px solid var(--vien); border-radius: 10px; padding: 10px; margin-bottom: 12px; }
.vt-hang { display: flex; gap: 8px; }
.vt-hang .o-nhap { height: 40px; font-size: 15px; }
.vt-hang .nut { height: 40px; }
.vt-mo-them { border: 0; background: none; color: var(--xanh); cursor: pointer; font-size: 13px; padding: 8px 2px 0; }
.vt-them { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 10px; }
.vt-o { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vt-o label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--chu-nhat); }
.vt-o textarea.o-nhap { height: auto; padding: 8px 11px; resize: vertical; }
.vt-them .vt-o:last-child { grid-column: 1 / -1; }
.vt-han { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.vt-han input[type="date"] { width: 150px; }
.vt-han input[type="time"] { width: 110px; }
.vt-chip { font-size: 12px; padding: 4px 9px; border: 1px solid var(--vien); border-radius: 999px; cursor: pointer;
  background: var(--the); user-select: none; }
.vt-chip:hover { border-color: var(--xanh); color: var(--xanh); }
.vt-uu { display: inline-flex; border: 1px solid var(--vien); border-radius: 6px; overflow: hidden; flex-wrap: wrap; }
.vt-uu button { border: 0; background: var(--the); padding: 7px 12px; cursor: pointer; font-size: 13px;
  border-right: 1px solid var(--vien); }
.vt-uu button:last-child { border-right: 0; }
.vt-uu button.chon { background: var(--xanh); color: #fff; font-weight: 600; }
.vt-uu button[data-uu="gap"].chon { background: #c92a2a; }
.vt-uu button[data-uu="quan_trong"].chon { background: #e8590c; }

.vt-loc { display: inline-flex; gap: 4px; background: var(--the); border: 1px solid var(--vien); border-radius: 8px;
  padding: 3px; margin-bottom: 14px; flex-wrap: wrap; }
.vt-loc button { border: 0; background: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--chu-nhat); }
.vt-loc button.chon { background: var(--xanh-nhat); color: var(--xanh); font-weight: 600; }

.vt-nhom { margin-bottom: 16px; }
.vt-nhom h3, .vt-gap { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 600;
  color: var(--chu-nhat); text-transform: uppercase; letter-spacing: .03em; }
.vt-gap { border: 0; background: none; cursor: pointer; padding: 6px 0; font: inherit; font-size: 13px; font-weight: 600; }
.nhom-qua h3 { color: var(--do); }
.nhom-nay h3 { color: #d9480f; }
:root[data-theme="dark"] .nhom-nay h3 { color: #f08c4b; }
.vt-dem { font-size: 11px; background: var(--vien); color: var(--chu); border-radius: 9px; padding: 1px 7px; font-weight: 600; }
.nhom-qua .vt-dem { background: var(--do); color: #fff; }

.viec-dong { display: flex; align-items: flex-start; gap: 10px; background: var(--the); border: 1px solid var(--vien);
  border-radius: 8px; padding: 9px 10px; margin-bottom: 6px; transition: opacity .2s, border-color .12s; }
.viec-dong:hover { border-color: var(--vien-dam); }
.nhom-qua .viec-dong { border-left: 3px solid var(--do); }
.nhom-nay .viec-dong { border-left: 3px solid #f08c4b; }
.viec-dong.da-xong .viec-ten { text-decoration: line-through; color: var(--chu-nhat); }
.viec-dong.dang-gui { opacity: .55; }
.dai-viec .viec-dong { border: 0; border-top: 1px solid var(--vien); border-radius: 0; margin: 0; padding: 8px 0; }

.viec-tich { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--vien-dam);
  background: var(--the); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.viec-tich svg { width: 14px; height: 14px; fill: none; stroke: transparent; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.viec-tich:hover:not(:disabled) { border-color: var(--xanh-la); }
.viec-tich:hover:not(:disabled) svg { stroke: var(--xanh-la); }
.viec-tich.tick, .dang-gui .viec-tich:not(.buoc) { background: var(--xanh-la); border-color: var(--xanh-la); }
.viec-tich.tick svg, .dang-gui .viec-tich:not(.buoc) svg { stroke: #fff; }
.viec-tich.buoc { width: auto; height: 26px; border-radius: 13px; padding: 0 10px; font-size: 12px; font-weight: 600;
  color: var(--xanh); border-color: var(--xanh); white-space: nowrap; }
.viec-tich.buoc:hover:not(:disabled) { background: var(--xanh-nhat); }
.viec-tich:disabled { cursor: default; opacity: .55; }
.viec-tich.buoc:disabled { color: var(--vang); border-color: var(--vang); opacity: 1; }

.viec-than { flex: 1; min-width: 0; }
.viec-ten { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-size: 14px; line-height: 1.4;
  color: var(--chu); word-break: break-word; width: 100%; }
.viec-ten:hover { color: var(--xanh); }
.viec-phu { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 12px; color: var(--chu-nhat); align-items: center; }
.viec-han.qua { color: var(--do); font-weight: 600; }
.viec-tt { padding: 0 7px; border-radius: 9px; background: var(--xanh-nhat); color: var(--xanh); font-weight: 600; }
.viec-tt.tt-cho_duyet { background: #fff3bf; color: #a35c00; }
:root[data-theme="dark"] .viec-tt.tt-cho_duyet { background: #3b2e0a; color: #f2c14e; }
.viec-uu { padding: 0 7px; border-radius: 9px; font-weight: 600; }
.viec-uu.gap { background: #ffe3e3; color: #c92a2a; }
.viec-uu.qt { background: #fff0e0; color: #d9480f; }
:root[data-theme="dark"] .viec-uu.gap { background: #3d1520; color: #ff8fa3; }
:root[data-theme="dark"] .viec-uu.qt { background: #3a2410; color: #f5a05a; }
.viec-map { color: var(--xanh); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viec-map:hover { text-decoration: underline; }
.viec-gc { cursor: help; }

.vt-trong { text-align: center; padding: 36px 16px; color: var(--chu-nhat); background: var(--the);
  border: 1px dashed var(--vien); border-radius: 10px; }
.vt-trong-hinh { font-size: 32px; margin-bottom: 6px; }
.vt-trong b { display: block; color: var(--chu); font-size: 15px; margin-bottom: 4px; }
.vt-trong p { margin: 0; font-size: 13px; }

.hop-viec { width: min(560px, calc(100vw - 24px)); }
.hop-viec .vt-o { margin-bottom: 12px; }
.hop-viec .vt-tt button.chon { background: var(--xanh); }
.sv-them { display: flex; flex-direction: column; gap: 8px; }
.sv-link { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-link .nut { text-decoration: none; color: var(--chu); }
.hop-viec .day-nut { align-items: center; flex-wrap: wrap; }
.sv-bo { color: var(--chu-nhat); }

#nutSangToi svg { width: 16px; height: 16px; }

/* ═══ BẢNG 2 CỘT KÉO THẢ + ĐẾM NGƯỢC (bang-2-cot-02-10) ═══════════════ */
.vt-bang { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.vt-tab-cot { display: none; }
.vt-cot { background: rgba(255,255,255,.45); border: 1px solid var(--vien); border-radius: 12px; padding: 10px;
  min-height: 160px; transition: background .12s, border-color .12s, box-shadow .12s; }
:root[data-theme="dark"] .vt-cot { background: rgba(22,32,44,.55); }
.vt-cot.cot-xong { background: rgba(47,158,68,.05); }
.vt-cot.tha-vao, .vt-tab-cot button.tha-vao { border-color: var(--xanh); background: var(--xanh-nhat);
  box-shadow: 0 0 0 3px var(--xanh-nhat); }
.vt-cot.cot-xong.tha-vao { border-color: var(--xanh-la); box-shadow: 0 0 0 3px rgba(47,158,68,.18); background: rgba(47,158,68,.10); }
.vt-cot-dau { display: flex; align-items: center; gap: 8px; margin: 2px 2px 10px; font-size: 14px; font-weight: 600; }
.vt-cot .vt-nhom { margin-bottom: 12px; }
.vt-cot .vt-nhom h4 { display: flex; align-items: center; gap: 6px; margin: 2px 2px 6px; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; color: var(--chu-nhat); }
.vt-cot .nhom-qua h4 { color: var(--do); }
.vt-cot .nhom-nay h4 { color: #d9480f; }
:root[data-theme="dark"] .vt-cot .nhom-nay h4 { color: #f08c4b; }
.vt-cot .vt-trong { padding: 22px 12px; }
.vt-cot-goi { padding: 26px 12px; text-align: center; color: var(--chu-nhat); font-size: 13px;
  border: 1px dashed var(--vien); border-radius: 8px; }
.vt-xem-them { width: 100%; border: 1px dashed var(--vien); background: none; border-radius: 8px; padding: 8px;
  cursor: pointer; color: var(--xanh); font-size: 13px; }
.cho-tha { border: 2px dashed var(--xanh); border-radius: 8px; background: var(--xanh-nhat); opacity: .7; margin-bottom: 6px; }
.cot-xong .cho-tha { border-color: var(--xanh-la); background: rgba(47,158,68,.12); }

.viec-dong.keo-duoc { cursor: grab; }
.viec-keo { flex: none; align-self: center; width: 22px; height: 28px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--chu-nhat); opacity: .5; cursor: grab; touch-action: none; border-radius: 6px; }
.viec-keo svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.viec-dong:hover .viec-keo { opacity: .9; }
.viec-keo:active { cursor: grabbing; }
.viec-dong.dang-keo-goc { opacity: .3; }
.viec-bong-keo { position: fixed !important; z-index: 950; margin: 0 !important; pointer-events: none;
  box-shadow: 0 14px 34px rgba(16,24,40,.28); border-color: var(--xanh) !important; opacity: .96; }
.viec-bong-keo.dang-gui { opacity: .6; }
body.dang-keo-viec, body.dang-keo-viec * { user-select: none; -webkit-user-select: none; cursor: grabbing !important; }

.dem { font-weight: 600; }
.dem-con { color: var(--chu-nhat); }
.dem-gan { color: #d9480f; }
.dem-qua { color: var(--do); }
:root[data-theme="dark"] .dem-gan { color: #f08c4b; }
.dem-dai { margin-top: 6px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 7px 10px; border-radius: 8px; background: var(--xanh-nhat); color: var(--xanh); }
.dem-dai.dem-gan { background: #fff0e0; color: #d9480f; }
.dem-dai.dem-qua { background: #ffe3e3; color: #c92a2a; }
.dem-dai.dem-trong { background: transparent; border: 1px dashed var(--vien); color: var(--chu-nhat); font-weight: 400; font-size: 13px; }
:root[data-theme="dark"] .dem-dai.dem-gan { background: #3a2410; color: #f5a05a; }
:root[data-theme="dark"] .dem-dai.dem-qua { background: #3d1520; color: #ff8fa3; }

@media (max-width: 700px) {
  .vt-bang { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vt-tab-cot { display: flex; gap: 6px; position: sticky; top: var(--cao-tren-bang, 100px); z-index: 12;
    background: var(--nen); padding: 6px 0; }
  .vt-tab-cot button { flex: 1; min-height: 44px; border: 1px solid var(--vien); background: var(--the); border-radius: 10px;
    font-size: 14px; font-weight: 600; color: var(--chu-nhat); cursor: pointer; }
  .vt-tab-cot button.chon { color: var(--xanh); border-color: var(--xanh); background: var(--xanh-nhat); }
  .vt-bang.xem-can .cot-xong, .vt-bang.xem-xong .cot-can { display: none; }
  .vt-cot { padding: 8px; }
  .vt-cot-dau { display: none; }
}
@media (pointer: coarse) {
  .viec-keo { width: 38px; height: 40px; opacity: .75; margin: -6px -6px -6px 0; }
  .viec-keo svg { width: 20px; height: 20px; }
}

/* ---------- điện thoại & máy tính bảng ≤900px: cột trái thành THANH TAB ----------
   Bản 20/09 cho cột thành ngăn kéo ☰ (≤760px). Anh Sơn muốn mở ra là bấm được
   ngay, nên ≤900px cột trái thành một dải tab trượt ngang ngay dưới thanh trên,
   không phải bấm ☰ nữa. Mọi mục vẫn còn (Việc · Tất cả · Của tôi · Được chia
   sẻ · Thùng rác · các ngăn · Chưa xếp). */
@media (max-width: 900px) {
  #nutNgan, #manCheCot, #manCheCot.hien { display: none !important; }
  #than { flex-direction: column; min-height: auto; }
  #cot, #cot.mo {
    position: sticky !important; top: var(--cao-thanh-that, 48px); z-index: 15;
    transform: none !important; box-shadow: none !important;
    width: auto !important; max-width: none !important; bottom: auto !important;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
    overflow-x: auto; overflow-y: hidden; padding: 8px 10px !important;
    border-right: 0; border-bottom: 1px solid var(--vien);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  #cot::-webkit-scrollbar { display: none; }
  #cot h4 { display: none; }
  #cot h4.ngan-dau { display: flex; margin: 0; flex: none; order: 50; }
  #cot h4.ngan-dau { font-size: 0; }
  #cot h4.ngan-dau button { font-size: 16px; width: 36px; height: 36px; border-radius: 18px; }
  #dsNgan { display: contents; }
  .vach-cot { display: none; }
  .muc-cot { flex: none; width: auto; white-space: nowrap; min-height: 36px; padding: 6px 12px;
    border: 1px solid var(--vien); border-radius: 18px; background: var(--the); font-size: 13px; }
  .muc-cot.dang-o { border-color: var(--xanh); }
  .muc-cot .so-map { margin-left: 4px; }
  .muc-cot .sua-ngan { display: none; }
  .muc-cot .so-viec { margin-left: 4px; }
  #chinh { padding: 12px; }
  #manViec { max-width: none; }
}
@media (max-width: 560px) {
  .the-phu { flex-wrap: wrap; }
  .the-phu .chu-nhat { line-height: 1.35; }
  .dai-dau .chu-nhat { order: 3; width: 100%; }
  .vt-loc button { padding: 8px 6px; font-size: 12.5px; }
  .vt-them { grid-template-columns: 1fr; }
  .vt-tieu-de { font-size: 18px; }
  .vt-hang .nut span { display: none; }
  .vt-hang .nut { width: 44px; padding: 0; justify-content: center; }
  .vt-loc { display: flex; }
  .vt-loc button { flex: 1; }
  #thanhLuoi .tl-ten { width: 100%; }
}
@media (pointer: coarse) {
  .viec-dong { padding: 11px 10px; }
  .viec-tich { width: 30px; height: 30px; }
  .viec-tich.buoc { height: 34px; border-radius: 17px; padding: 0 12px; font-size: 13px; }
  .viec-ten { font-size: 15px; min-height: 30px; }
  .vt-chip { padding: 8px 12px; font-size: 13px; }
  .vt-uu button { padding: 10px 14px; }
  .vt-loc button { padding: 10px 12px; }
  .vt-mo-them { padding: 12px 2px 4px; font-size: 14px; }
  .muc-cot { min-height: 40px; }
}

/* tu-chon-dem-nguoc-02-10 */
.dn-hang { margin-top: 2px; }
.dn-tu { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--chu-nhat); flex-wrap: nowrap; }
.dn-tu .o-nhap { width: 58px; height: 32px; padding: 0 6px; text-align: center; }
.dn-tu .nut { height: 32px; }
.vt-them .dn-hang { grid-column: 1 / -1; }

/* ═══ THẺ BẢN ĐỒ CÓ HÌNH XEM TRƯỚC + LƯỚI/DANH SÁCH — 18/10/2026 (đi kèm js/the_xem_truoc.js) ═══
   Anh Sơn: «trang này tôi thấy trình bày hơi khó nhìn cho các mind map». */
#luoi { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.the-hinh.co-xt { height: 132px; padding: 0; background: #f7f9fb; border-bottom: 1px solid var(--vien); }
.the-hinh .xt { width: 100%; height: 100%; display: block; }
.xt .xt-goc { fill: var(--xanh-nhat, #e8eef6); stroke: var(--xanh, #12457c); stroke-width: 1.2; }
.xt .xt-chu-goc { font-size: 10px; font-weight: 600; fill: var(--xanh, #12457c); }
.xt .xt-chu { font-size: 10px; fill: var(--chu, #1a2733); }
.xt .xt-chu-o { font-size: 8px; font-weight: 600; fill: var(--chu, #1a2733); }
.xt .xt-them { font-size: 9px; fill: var(--chu-nhat, #5a6b7d); }
:root[data-theme="dark"] .the-hinh.co-xt { background: #1b2634; }

/* tên: tối đa 2 dòng, đủ chữ khi rê chuột · dòng phụ luôn một dòng */
.the-ten { font-size: 14px; line-height: 1.35; white-space: normal !important; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.7em; }
.the-phu { flex-wrap: nowrap !important; min-width: 0; }
.the-phu .chu-nhat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* nút đổi kiểu xem */
.xt-kieu { display: inline-flex; border: 1px solid var(--vien); border-radius: 6px; overflow: hidden; }
.xt-kieu button { width: 32px; height: 30px; border: 0; background: var(--the); color: var(--chu-nhat);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.xt-kieu button + button { border-left: 1px solid var(--vien); }
.xt-kieu button.chon { background: var(--xanh-nhat); color: var(--xanh); }
.xt-kieu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* kiểu DANH SÁCH: mỗi bản đồ một hàng, hình nhỏ bên trái */
body.mm-xem-ds #luoi { grid-template-columns: 1fr; gap: 8px; }
body.mm-xem-ds #luoi .the-map { display: flex; align-items: stretch; }
body.mm-xem-ds #luoi .the-hinh { width: 132px; height: 72px; flex: none; border-bottom: 0; border-right: 1px solid var(--vien); }
body.mm-xem-ds #luoi .the-hinh .hinh-bc { width: 56px; height: 46px; }
body.mm-xem-ds #luoi .the-than { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
body.mm-xem-ds #luoi .the-ten { flex: 1; min-height: 0; -webkit-line-clamp: 1; margin: 0; }
body.mm-xem-ds #luoi .the-phu { flex: none; gap: 12px; }
@media (max-width: 760px) {
  #luoi { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .the-hinh.co-xt { height: 100px; }
  body.mm-xem-ds #luoi .the-hinh { width: 88px; height: 60px; }
  body.mm-xem-ds #luoi .the-than { flex-direction: column; align-items: flex-start; gap: 2px; }
}