:root{
  --navy:#1F3964; --gold:#C8A24B; --bg:#f4f6fa; --card:#fff; --ink:#1b2330; --muted:#6b7688;
  --line:#e5e9f0; --ok:#137a4b; --err:#c0392b; --warn:#b26a00;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.wrap{max-width:720px;margin:0 auto;padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 1px 3px rgba(20,30,60,.04)}
h1{font-size:20px;margin:0 0 4px}h2{margin:.2em 0}h3{margin:.2em 0 .6em}h4{margin:.9em 0 .3em}
.muted{color:var(--muted)}.small{font-size:12.5px}.err{color:var(--err);min-height:1em}
.pill{display:inline-block;background:#eef1f7;color:var(--navy);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600}
.pill.warn{background:#fff2df;color:var(--warn)}
/* Mã SP (mã gửi khách): chữ đều nét để đọc qua điện thoại không nhầm, nền nhạt hơn mã căn — mã căn
   vẫn là thứ sale dùng hằng ngày, mã SP chỉ tra khi khách nhắc tới. */
.pill.sp{background:#f4f0e6;color:#6b5626;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.4px}
.pill.shop{background:#dff3e6;color:#0f6b40}
.pill.won{background:#e6f0ff;color:#1746a2}
.pill.fix{background:#fff2df;color:var(--warn)}
.pill.dnc{background:#fde8e8;color:var(--err)}
.dnc-note{color:var(--err);font-size:12.5px;margin-top:3px;font-weight:600}
.subfilter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.chip{background:#eef1f7;color:var(--navy);border-radius:999px;padding:5px 11px;font-size:12.5px;font-weight:600}
.chip.active{background:var(--navy);color:#fff}
.chip span{opacity:.7;margin-left:2px}
.pill.loai{background:#ede7fb;color:#5b3fb0}
.pill.nt{background:#e2f4ee;color:#0f6b52}
/* Hướng (ban công/view): pill màu theo hướng để quét nhanh */
.pill.huong{background:#eaf0fb;color:#2456a3}
.pill.h-tb{background:#e6eefb;color:#2456a3}
.pill.h-db{background:#e0f1ec;color:#1f7d6e}
.pill.h-dn{background:#fbeddc;color:#b0651a}
.pill.h-tn{background:#efe9fa;color:#6a4bb0}
.curchips{margin:5px 0 2px}
.priceline{margin:3px 0 1px;font-size:13px;font-weight:700;color:#0f6b40}
.listbar{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.listctrl{display:flex;gap:8px;align-items:center}
.loaichips{display:flex;gap:6px;flex-wrap:wrap}
/* Dropdown Thuê/Bán + nút sort giá: ép CÙNG height 38px (border-box) để bằng nhau */
.listsort{width:auto;flex:0 0 auto;margin-top:0;height:38px;box-sizing:border-box;padding:0 34px 0 12px;font-size:12.5px}
.dirbtn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:38px;box-sizing:border-box;padding:0 12px;border:1px solid var(--line);border-radius:9px;color:var(--navy);font-size:12.5px;font-weight:600;background:#fff}
.dirbtn svg{flex:none}
.chip span{opacity:.7;margin-left:4px}
/* --- Thanh lọc rổ hàng: 1 nút ＋ + bảng 2 tầng (anh Đạt chốt 20/9/2026, thay tường 17 chip) ---
   Hàng chip giờ chỉ chứa chip ĐANG bật nên rỗng gần như suốt: :empty phải ẩn hẳn, không thì gap
   8px của .listbar vẫn chừa một khoảng trống vô nghĩa. */
.loaichips:empty{display:none}
/* Chip ＋ dùng CHUNG một hình dạng cho mọi tab (anh Đạt chốt 21/9/2026). Bản đầu bên tab Ký gửi mặc
   áo .dirbtn cho bằng chiều cao ô Thuê/Bán, thành ra hai tab hai kiểu nút cho cùng một việc. Nay cả
   hai là chip bo tròn; viền để tách khỏi đám chip đang bật nằm cạnh. */
.chip.chipadd{background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;gap:5px}
.chipadd .fmdem{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 5px;border-radius:999px;background:var(--navy);color:#fff;font-size:10.5px;font-weight:700;
  margin:0;opacity:1}
.fmcard{max-width:380px}
/* Bảng lọc nằm NGOÀI .wrap nên không ăn luật `.wrap .ghost` — không có dòng này thì nút ✕ và ‹
   giữ màu trắng mặc định của .ghost, tức là trắng trên nền thẻ trắng: bấm được mà không thấy gì. */
.modal-card .ghost{border-color:var(--line);color:var(--navy)}
.fmbody{margin:12px 0 10px;max-height:62vh;overflow:auto}
/* Dòng trong bảng lọc: gõ được bằng ngón cái (44px) — bảng này dùng trên điện thoại là chính. */
.fmrow{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:10px 12px;
  border-radius:10px;background:#f7f9fd;color:var(--navy);font-size:14px;text-align:left}
.fmrow+.fmrow{margin-top:4px}
.fmrow.on{background:var(--navy);color:#fff}
.fmten{font-weight:600}
.fmval{margin-left:auto;color:var(--muted);font-size:12.5px;white-space:normal;text-align:right}
.fmval.on{color:var(--navy);font-weight:600}
.fmar{color:#9aa4bb;font-size:17px;line-height:1}
.fmnum{margin-left:auto;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.fmrow.on .fmnum{color:rgba(255,255,255,.72)}
.fmtick{width:14px;flex:none;font-weight:800}
.fmclear{margin-top:10px;justify-content:center;background:#fff;border:1px solid var(--line);color:var(--err)}
.kygui{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.kg-head{margin-bottom:6px}
/* Tiêu đề "🌐 Lên web Giỏ hàng" (kg-head đứng ngay sau lưới giá) — thêm khoảng cách + divider tách khỏi ô Giá thuê */
.kg-grid + .kg-head{margin-top:16px;padding-top:13px;border-top:1px dashed var(--line)}
.kg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Nhãn 2 dòng ("Mô tả web (hướng/view)") đứng cạnh nhãn 1 dòng ("Ghi chú web") thì hai ô nhập
   so le nhau. Nhãn thành flex dọc + space-between -> ô nhập luôn nằm đáy ô lưới nên thẳng hàng. */
.kg-grid label{margin:0;font-size:12.5px;font-weight:600;display:flex;flex-direction:column;justify-content:space-between}
/* Ô ngày đứng một mình ở hàng cuối -> trải hết chiều ngang, khỏi hở trống nửa hàng.
   iOS Safari để input[type=date] co theo nội dung, không ép thì ô ngắn hơn hẳn mấy ô trên. */
.kg-grid label.kg-wide{grid-column:1/-1}
.kg-grid input[type=date]{-webkit-appearance:none;appearance:none;min-width:0}
.kg-grid input,.kg-grid select{margin-top:3px;padding:8px}
.kg-grid select{padding-right:32px}   /* chừa chỗ mũi tên tự vẽ (option nội thất dài) */
/* Dòng máy tự nhận ngày hết HĐ từ ghi chú — phải đập vào mắt sale trước khi bấm Lưu, nhưng không
   chen vào lưới ô nhập. Dùng đúng cặp màu cảnh báo sẵn có của app (pill.warn). */
.thue-goiy{margin-top:8px;padding:7px 9px;border-radius:8px;background:#fff2df;color:var(--warn);line-height:1.45}
.hidden{display:none!important}
/* Ảnh/video từng căn — dải cuộn ngang FULL bề ngang thẻ, bấm ảnh phóng to */
.poolitem{flex-wrap:wrap}
.poolitem > .mediabox,.poolitem > .sharebox{flex-basis:100%;min-width:0}
/* Khung Chia sẻ căn: nội dung sửa được + chọn ảnh gửi kèm. Rỗng thì không chiếm hàng (khỏi dư gap). */
.sharebox:empty{display:none}
.sharebox{margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.sharetxt{width:100%;margin:0 0 8px;font-size:13.5px;line-height:1.5}
.sharepics{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px 0}
.spic{position:relative;flex:none;width:76px;height:76px;border-radius:9px;overflow:hidden;
  border:2px solid var(--line);cursor:pointer;opacity:.5}
.spic.on{opacity:1;border-color:var(--navy)}
.spic img,.spic video{width:100%;height:100%;object-fit:cover;display:block}
.spic.svid{background:#0d1526}
.spic .mplay{font-size:20px}
.spic .stick{position:absolute;right:3px;top:3px;width:19px;height:19px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:12px;line-height:19px;text-align:center;display:none}
.spic.on .stick{display:block}
.sharephone{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap}
.sharephone .shph{width:auto;flex:1;min-width:150px;margin:0;padding:8px 10px}
.sharepick{display:flex;gap:6px;margin:6px 0}
/* Ô báo của khung Chia sẻ nằm TRÊN hàng nút: toast "Đã sao chép vào bộ nhớ tạm" của Android
   đứng đè đáy màn hình, để dưới là câu báo lỗi bị che đúng lúc cần đọc nhất (đo 9/9/2026). */
.shmsg{font-size:13px;line-height:1.45;margin-top:8px;padding:8px 10px;border-radius:8px;
  border:1px solid #f0c36d;background:#fff8e6;color:#6b4c00;word-break:break-word}
.shmsg:empty{display:none}
.sharebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.mediabox:empty{display:none}   /* đóng panel = không chiếm hàng (tránh dư gap) */
.mediabox{margin-top:0}
.mediastrip{display:flex;gap:6px;overflow-x:auto;padding:6px 1px;margin:2px 0 4px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.mcell{position:relative;flex:0 0 92px;width:92px;height:92px;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;background:#0b1220;scroll-snap-align:start;cursor:zoom-in}
.mcell img,.mcell video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.mcell.mvid{cursor:pointer}
.mplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;background:rgba(0,0,0,.28);pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.mcell .mdel{position:absolute;top:0;right:0;background:rgba(190,30,30,.88);color:#fff;border:none;
  border-radius:0 0 0 9px;padding:5px 10px;font-size:13px;font-weight:700;cursor:pointer;line-height:1.2}
.maddtile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:#eef1f7;color:var(--navy);border:1.5px dashed var(--navy);cursor:pointer;
  font-size:24px;font-weight:700;line-height:1}
.maddtile span{font-size:11.5px;font-weight:600}
.mupload{display:inline-block;background:#eef1f7;color:var(--navy);border:none;border-radius:9px;
  padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;margin-right:8px}
.mfile{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;
  color:#cfd8ea;font-size:12px;text-align:center;padding:4px;text-decoration:none}
/* Lightbox phóng to */
.lb{position:fixed;inset:0;z-index:95;background:rgba(8,12,22,.94);display:flex;align-items:center;justify-content:center}
.lb .lbbody{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:14px}
.lb .lbbody img,.lb .lbbody video{max-width:96vw;max-height:88vh;object-fit:contain;border-radius:6px}
.lb .lbwait{color:#c8d2e4;font-size:13px}
.lb .lbmo{filter:blur(3px)}   /* bản nhỏ phóng to = ảnh TẠM; làm mờ để khỏi tưởng ảnh vỡ nét */
.lb .lbx{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;border:none;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;line-height:0}
.lb .lbnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:64px;border:none;
  border-radius:10px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;line-height:0}
.lb .lbnav svg{width:30px;height:30px}
.lb .lbprev{left:8px}
.lb .lbnext{right:8px}
.lb .lbx:hover,.lb .lbnav:hover{background:rgba(255,255,255,.28)}
.lb .lbcnt{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:#dfe6f3;
  font-size:13.5px;font-weight:600;letter-spacing:1px;background:rgba(0,0,0,.35);border-radius:999px;padding:4px 14px}
.lb .lbfile{height:auto;font-size:16px;color:#fff;background:rgba(255,255,255,.1);border-radius:12px;padding:22px 30px}
/* Admin: sửa vùng của NV (đa vùng) ngay trong ô Vùng */
.zcell{display:flex;flex-wrap:wrap;gap:5px;align-items:center;white-space:normal}
.zchip{display:inline-flex;align-items:center;gap:3px;background:#eef1f7;color:var(--navy);border-radius:999px;padding:2px 4px 2px 10px;font-size:12.5px;font-weight:600}
.zchip .zx{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 3px;font-weight:700}
.zchip .zx:hover{color:var(--err)}
.addzone{width:auto;margin:0;padding:4px 6px;font-size:12.5px;border-radius:7px}
.acc-name{font-weight:600;display:flex;align-items:center;gap:6px}
.nedit{background:transparent;border:none;padding:2px;color:var(--muted);cursor:pointer;line-height:0}
.nedit:hover{color:var(--navy)}
.acc-name .nameedit{width:150px;margin:0;padding:6px 8px;font-size:13.5px}
.acc-name .btn.small{padding:6px 9px}
.addbtn{min-width:38px;padding:8px 12px;font-size:18px;line-height:1}
/* Dialog thêm NV */
.modal{position:fixed;inset:0;z-index:80;background:rgba(15,22,40,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.modal-card{background:var(--card);border-radius:14px;padding:18px;max-width:420px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.modal-card h3{margin:0}
.ztags-head{margin:12px 0 4px;font-weight:600;font-size:14px}
.ztags{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.ztag{background:#eef1f7;color:var(--navy);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.ztag.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.modal-card .btn.primary{width:100%;margin-top:4px}
.row{display:flex;align-items:center;gap:10px}.row.gap{gap:12px}.row.between{justify-content:space-between}
/* Nút ảnh/video (mọi danh sách): icon + số đếm, đếm rỗng thì ẩn */
.mbtn{display:inline-flex;align-items:center;justify-content:center;gap:3px}
.mbtn svg{flex:none}
.mcnt:empty{display:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}

/* Appbar dính (sticky ở wrapper). Ô tra cứu bung phủ absolute LÊN topbar khi mở kính lúp. */
.apphead{position:sticky;top:0;z-index:30;box-shadow:0 2px 8px rgba(20,30,60,.08)}
.topbar{position:relative;display:flex;justify-content:space-between;align-items:center;
  background:var(--navy);color:#fff;padding:12px 16px}
.searchbar{position:absolute;inset:0;display:none;align-items:center;gap:6px;
  background:var(--navy);padding:0 10px;z-index:2}
.searchbar.open{display:flex}
.searchbar .iconbtn{color:#fff;background:transparent;border:none;flex:none}
.searchbar input{flex:1;min-width:0;height:38px;margin:0;border:none;border-radius:9px;
  background:rgba(255,255,255,.16);color:#fff;padding:0 12px;font:inherit}
.searchbar input::placeholder{color:rgba(255,255,255,.7)}
.searchbar input:focus{outline:2px solid var(--gold);outline-offset:0}
/* Ẩn nút X mặc định của trình duyệt trong ô search (đã có nút X riêng bên ngoài, tránh trùng) */
.searchbar input::-webkit-search-cancel-button,.searchbar input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.topbar b{color:#fff}.topbar .pill{background:rgba(255,255,255,.15);color:#fff}
.quota{font-size:13px;color:#dfe6f3}

label{display:block;margin:8px 0;font-size:14px;font-weight:600}
input,select,textarea{width:100%;margin-top:4px;padding:10px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-weight:400;background:#fff}
textarea{resize:vertical}
/* Mọi dropdown: bỏ mũi tên native, tự vẽ chevron cách mép phải 12px + chừa padding-right cho khỏi đè chữ */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding-right:34px}

button,.btn{cursor:pointer;border:none;border-radius:10px;padding:11px 16px;font:inherit;font-weight:600;white-space:nowrap}
button:disabled{opacity:.45;cursor:not-allowed}
.btn.primary,form button[type=submit]{background:var(--navy);color:#fff}
.login button{width:100%;background:var(--navy);color:#fff;margin-top:8px}
.btn.call{background:var(--ok);color:#fff;text-decoration:none;display:inline-block;font-size:18px;padding:14px 22px}
.btn.small{padding:8px 12px;font-size:13px;background:var(--navy);color:#fff}
.ghost{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;padding:8px 12px;border-radius:9px;white-space:nowrap}
.wrap .ghost{border-color:var(--line);color:var(--navy)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;padding:8px;line-height:0}

/* Hàng nút hành động trong thẻ đang gọi: 4 nút icon 1 hàng đều nhau.
   PHẢI nằm SAU .btn.call/.btn.small (cùng specificity — thứ tự quyết định thắng thua,
   đặt trước là .btn.call{display:inline-block;padding:14px 22px} đè mất căn giữa icon). */
.actrow{display:flex;gap:8px;margin:2px 0}
.actrow .btn{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:46px;padding:0;border-radius:12px;font-size:13px;font-weight:700}
.actrow .btn svg{flex:none}
.actrow .btn.call{flex:1.35}
/* Nút gọi số dự phòng: mọc ra sau lượt gọi đầu ở căn chủ có 2 số. Xanh đậm hơn nút gọi chính
   và hẹp hơn, để không ai quen tay bấm số 2 trước. */
.actrow .btn.call2{flex:.75;background:#0f5c38}
.btn.call2 .so2{font-size:12px;font-weight:800;line-height:1}
.btn.zalo{background:#0068ff;color:#fff}
.btn.vcard{background:#eef1f7;color:var(--navy)}

.login{max-width:360px;width:100%}
.card.login{padding-bottom:8px}
.card.login #err{margin-top:8px;min-height:0}
.loginhead{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-bottom:32px}
.loginhead h1{margin:0}
.login .brand{height:24px;width:auto;flex:0 0 auto}
.current{border:2px solid var(--gold)}
.current .tag{display:inline-block;background:var(--gold);color:#3a2c00;font-weight:700;font-size:12px;border-radius:6px;padding:2px 8px}
.noteform{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.noteform .row.gap{margin-top:14px;justify-content:center}
/* Tên NV nắm căn ký gửi — góc phải dưới cột thông tin (bên trái cột nút) */
.ownertag{margin-top:6px;text-align:right}
.ownertag span{display:inline-block;background:#f1f3f8;border-radius:8px;padding:2px 8px;font-size:12px;color:#39435a;font-weight:700}

/* Chừa đáy vừa đủ cho nút "Lên đầu" (cao 44px, cách đáy 10px -> mép trên ở 54px so với đáy màn hình).
   Padding của .card + .wrap đã lo gần hết: đo thật còn thiếu 6px trên mobile 390px, 0px trên desktop
   -> 12px là đủ cho cả hai. Trước đây để 76px nên đáy trang hụt ra một mảng trống to. */
.pool{list-style:none;margin:8px 0 0;padding:0 0 12px}
.poolitem{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px}
/* Tab Cần gọi — đánh dấu số ĐÃ GỌI để biết mình dừng ở đâu sau khi tải lại.
   .called = chính mình đã gọi (xám rõ + vạch trái); .calledteam = người khác cùng vùng đã gọi (nhạt).
   Đặt TRƯỚC .due/.active (cùng specificity) để 2 trạng thái kia luôn thắng màu.
   Vạch trái bằng box-shadow inset, không đổi border → không xê dịch nội dung. */
.poolitem.calledteam{background:#f4f7fb;box-shadow:inset 3px 0 0 #dbe2ec}
.poolitem.called{background:#e9edf4;border-color:#ccd5e3;box-shadow:inset 3px 0 0 #8d9cb5}
.poolitem.called .grow > b{color:#55617a}
/* Rổ hàng — hạn theo dõi căn 14 ngày. Cùng chỗ đặt như .called: TRƯỚC .due/.active để 2 cái kia thắng màu.
   Chỉ 2 trạng thái CẦN HÀNH ĐỘNG mới ăn màu mạnh (sắp hết hạn = phải gọi chủ, hết hạn = chưa ai update);
   căn mình đang theo còn dài ngày và căn người khác đang theo để nền thường cho khỏi loạn cả danh sách.
   23/8/2026 bỏ nền xám + chữ mờ của hold-other: từ khi bỏ độc quyền thì căn đó vẫn gọi được bình
   thường, làm mờ thẻ là báo sai — người nắm căn chỉ còn hiện ở nhãn tên bên dưới. */
.poolitem.hold-warn{background:#fff6e8;border-color:#e2a24a;box-shadow:inset 4px 0 0 #e07b1f}
.poolitem.hold-free{background:#f1faf4;border-color:#a9d9bd;box-shadow:inset 4px 0 0 #2f9e5e}
.ownertag .hold-warn{background:#f8dfbc;color:#7a4405}
.ownertag .hold-free{background:#d6f0e0;color:#18653c}
.ownertag .hold-mine{background:#e4ecfa;color:#26406e}
.poolitem.due{border-color:var(--gold);background:#fffdf5}
.poolitem.active{display:block;border:2px solid var(--gold);background:#fffdf5}
.poolitem.active .tag{display:inline-block;background:var(--gold);color:#3a2c00;font-weight:700;font-size:12px;border-radius:6px;padding:2px 8px}
.poolitem.active .curma{margin:.25em 0 .15em;font-size:18px}
.poolitem.active .acthist{margin:.4em 0}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:.3em 0 .6em}
table{width:100%;border-collapse:collapse;font-size:14px;margin:0}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
/* Bảng thống kê cuộc gọi: cột số canh phải + tabular-nums để các chữ số thẳng hàng khi so sánh NV. */
table.stats .num{text-align:right;font-variant-numeric:tabular-nums}
table.stats td:first-child{font-weight:600}
table.stats .warnnum{color:#b4451f;font-weight:700}   /* ghi ÍT hơn gọi = gọi xong chưa ghi kết quả */
th{color:var(--muted);font-weight:600;font-size:12.5px}
code{background:#eef1f7;border-radius:5px;padding:1px 5px;font-size:12.5px}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:#111a2b;color:#fff;padding:11px 18px;border-radius:10px;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:9}

/* Nút "Lên đầu trang" — góc phải-dưới, tròn 48px (touch target ≥44px WCAG), navy khớp brand.
   Ẩn mặc định (opacity+scale+pointer-events:none), JS thêm .show khi cuộn > ngưỡng. */
.totop{position:fixed;right:16px;bottom:10px;z-index:40;width:44px;height:44px;padding:0;border:none;border-radius:50%;
  background:var(--navy);color:#fff;box-shadow:0 4px 14px rgba(20,30,60,.30);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.totop svg{width:22px;height:22px}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:active{transform:scale(.94)}
.totop:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}

/* Tab điều hướng: kiểu gạch chân (khác hẳn chip lọc dạng pill ở dưới).
   Chỉ cuộn NGANG: overflow-y hidden (overflow-x:auto một mình sẽ ép overflow-y=auto → thanh tab trôi dọc);
   đường kẻ chân = box-shadow inset (không border + negative margin → không tạo overflow dọc). */
.tabs{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;box-shadow:inset 0 -2px 0 var(--line);scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{display:none}
/* Vệt mờ 2 mép dải tab: gợi ý còn tab để cuộn (thanh cuộn đang ẩn). JS bật .more-left/.more-right theo scrollLeft. */
/* Dải tab DÍNH ngay dưới thanh tiêu đề (anh Đạt chốt 21/9/2026). Trước đây nó cuộn đi mất, muốn đổi
   tab phải kéo cả danh sách mấy trăm căn về đầu trang. Nay: cuộn xuống xem hàng thì nó trượt lên giấu
   đi cho rộng màn, kéo ngược lên một chút là tụt xuống lại ngay tại chỗ đang đứng.
   --headH do JS đo (thanh tiêu đề xuống dòng trên máy hẹp thì cao hơn); 56px chỉ là số đỡ lúc chưa đo.
   z-index thấp hơn .apphead (30) để nó trượt CHUI XUỐNG dưới thanh tiêu đề chứ không đè lên. */
.tabwrap{position:sticky;top:var(--headH,56px);z-index:20;margin-bottom:10px;background:var(--card);
  transition:transform .22s cubic-bezier(.4,0,.2,1)}
.tabwrap.an{transform:translateY(calc(-100% - 10px))}
@media (prefers-reduced-motion:reduce){.tabwrap{transition:none}}
.tabwrap::before,.tabwrap::after{content:"";position:absolute;top:0;bottom:2px;width:32px;pointer-events:none;z-index:2;opacity:0;transition:opacity .15s ease}
.tabwrap::before{left:0;background:linear-gradient(to right,var(--card) 20%,rgba(255,255,255,0))}
.tabwrap::after{right:0;background:linear-gradient(to left,var(--card) 20%,rgba(255,255,255,0))}
.tabwrap.more-left::before{opacity:1}
.tabwrap.more-right::after{opacity:1}
.tab{flex:0 0 auto;background:transparent;color:var(--muted);border-radius:0;padding:8px 10px;font-size:13.5px;font-weight:700;border-bottom:3px solid transparent;scroll-snap-align:center}
.tab.active{background:transparent;color:var(--navy);border-bottom-color:var(--gold)}
.tab .cnt{display:inline-block;min-width:18px;text-align:center;background:#eef1f7;color:var(--navy);border-radius:999px;padding:0 6px;font-size:12px;margin-left:2px}
.tab.active .cnt{background:var(--navy);color:#fff}
.poolitem.col{align-items:flex-start}
.poolitem .grow{flex:1;min-width:0}
.poolitem .actions{display:flex;flex-direction:column;gap:6px;flex:none}
.btn.ghost2{background:#eef1f7;color:var(--navy)}
.lastnote{margin-top:4px;font-size:13px;font-style:italic;color:#39435a}
/* Dòng tên chủ căn hộ (Tên · Block · Tầng) — tách khỏi hàng pill/giá phía trên */
.infoline{margin-top:6px}
.pill.small{font-size:11px;padding:1px 7px}
.history,.hist{margin:2px 0}
.tl-wrap{background:#f7f9fc;border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-top:6px}
.tl-title{margin-bottom:4px;font-weight:600}
.tl{list-style:none;margin:0;padding:0}
.tl li{padding:5px 0;border-bottom:1px solid var(--line)}
.tl li:last-child{border-bottom:none}
.tl .who{font-weight:700;color:var(--navy);font-size:13px}
.tl-note{margin-top:2px;font-size:13px;white-space:pre-wrap}

/* Mobile: bớt padding kép (.wrap + .card) cho rộng chỗ; topbar gọn lại */
@media(max-width:480px){
  .wrap{padding:10px}
  .card{padding:13px}
  .topbar{padding:10px 12px}
}
/* Đề xuất sửa tên chủ/SĐT trong thẻ đang gọi */
.editrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.editbox:empty{display:none}
.editbox .addcard{margin-top:8px}
/* Bảng duyệt đề xuất (trang Quản trị) */
.edrow{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#fbfcfe}
.edrow.done{background:#f7f9fc;opacity:.75}
.eddiff{margin:6px 0;font-size:13.5px}
.eddiff .old{color:var(--muted);text-decoration:line-through}
.eddiff .new{color:var(--ok);font-weight:700}
.edrow .row{margin-top:8px;flex-wrap:wrap}
.edrow input{width:auto;flex:1;min-width:160px;margin:0;padding:8px}
/* Tab "Thêm căn" — lưới ô căn theo tầng: ô mờ = đã có, ô nét đứt = còn thiếu (bấm để thêm) */
.addrow{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.addgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:10px}
.acell{display:flex;align-items:center;justify-content:center;gap:3px;height:46px;border-radius:10px;
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.acell.has{background:#f1f3f8;color:#98a2b5;border:1px solid var(--line)}
.acell.free{background:#fff;color:var(--navy);border:1.5px dashed var(--navy);cursor:pointer}
.acell.free span{font-size:17px;line-height:1;opacity:.75}
.acell.free:active{background:#eef1f7}
.addcard{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fbfcfe}
.addcard b{font-size:16px}
.addcard .row.gap{margin-top:12px}
.addcard .err{margin:8px 0 0;font-size:13px}
/* Tab "Đóng dấu ảnh" — lưới ảnh đã gắn logo, mỗi ô 1 nút tải */
.wmbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 2px}
.wmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px;padding-bottom:12px}
.wmcell{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fafbfd}
.wmcell img{width:100%;display:block;aspect-ratio:4/3;object-fit:contain;background:#eef1f7}
.wmdl{width:100%;border:none;border-top:1px solid var(--line);background:#eef1f7;color:var(--navy);font-weight:600;font-size:12.5px;padding:9px 0;cursor:pointer}
.wmdl:hover{background:var(--navy);color:#fff}

/* Tình trạng khai thác căn trong rổ hàng (anh Đạt chốt 18/8): tô NGUYÊN THẺ, cùng lối với thẻ
   "đến hẹn" ở tab Đang chăm — không nhồi thêm pill. Đặt SAU nhóm .hold-* để giành phần nền/viền;
   vạch trái (box-shadow) vẫn của .hold-* nên hai thông tin không đè nhau. */
.poolitem.thue-trong{background:#f1faf4;border-color:#a9d9bd}
.poolitem.thue-dathue{background:#fdf0f0;border-color:#e6b4b4}
.poolitem.thue-dathue .grow > b{color:#8c2f2f}
.poolitem.thue-saphet{background:#fffaea;border-color:#e8cf86}
.poolitem.thue-saphet .grow > b{color:#7a5600}
/* Nhãn xuống 2 dòng: ô tick phải thẳng DÒNG ĐẦU. Để căn giữa thì nó lửng lơ giữa hai dòng. */
.kg-check{display:flex;align-items:flex-start;gap:8px;margin-top:12px;font-size:13px;line-height:1.45}
.kg-check input{width:auto;margin:1px 0 0;flex:none}

/* Khối Tên-ngày khi căn CỦA MÌNH sắp hết hạn nắm (≤3 ngày): phải bật hẳn lên, vì mất căn là mất
   thật. Chỉ chiếm khối này, KHÔNG đụng nền thẻ — nền vẫn dành cho tình trạng thuê (anh Đạt 18/8). */
.ownertag .hold-warn{background:#d9600a;color:#fff;font-size:13px;padding:4px 12px;
  box-shadow:0 1px 4px rgba(217,96,10,.45)}
/* Đường kẻ ngăn khối ghim đầu danh sách với phần sắp theo giá. */
/* Vạch tên khối trong rổ = NÚT thu gọn cả khối, nên phải nhìn ra là nút: nền riêng, mũi tên trong
   nút tròn, cả dải đổi màu khi đang gọn. Bản 21/9 đầu tiên chỉ là dòng chữ mờ + ký tự ▾ nên không ai
   biết bấm được (anh Đạt: "UX ổn, UI chưa trực quan"). */
.pinsep{list-style:none;margin:16px 0 8px;padding:9px 11px;font-size:12px;font-weight:700;
  color:#4c566b;text-transform:uppercase;letter-spacing:.04em;
  background:#eef2f9;border-radius:11px;
  display:flex;align-items:center;gap:9px;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:background .15s ease,color .15s ease}
.pinsep:hover{background:#e4ebf7}
.pinsep:active{background:#dae3f3}
.pinsep:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.pinsep .pinar{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:23px;height:23px;border-radius:999px;background:#fff;color:var(--navy);
  box-shadow:0 1px 2px rgba(31,57,100,.14)}
/* Mở = chevron chúc xuống, gọn = quay sang phải. Đây là tín hiệu chính cho biết vạch bấm được. */
.pinsep .pinar svg{transition:transform .22s cubic-bezier(.4,0,.2,1)}
.pinsep.gap .pinar svg{transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){ .pinsep .pinar svg{transition:none} }
.pinsep .pinten{min-width:0}
.pinsep .pinnum{margin-left:auto;flex:none;background:#fff;color:var(--navy);border-radius:999px;
  padding:2px 9px;letter-spacing:0;font-variant-numeric:tabular-nums;
  box-shadow:0 1px 2px rgba(31,57,100,.10)}
/* Đang gọn: cả dải tô đậm — liếc một cái là biết còn nguyên một nhóm đang giấu bên dưới. */
.pinsep.gap{background:var(--navy);color:#fff}
.pinsep.gap:hover{background:#27467a}
.pinsep.gap .pinar{background:rgba(255,255,255,.16);color:#fff;box-shadow:none}
.pinsep.gap .pinnum{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.khoi-an{display:none}