/* Giao diện Apartment Manager (nội bộ). Không dùng style nội tuyến; mọi kiểu ở đây. */
:root {
  --bg: #f3f5fa; --card: #fff; --ink: #1b2437; --muted: #64708a; --line: #e4e9f2;
  --brand: #2563eb; --brand-ink: #fff; --ok: #16a34a; --warn: #d97706; --bad: #dc2626;
  --radius: 12px; --shadow: 0 1px 3px rgba(20, 33, 61, .08), 0 4px 12px rgba(20, 33, 61, .04);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.45 system-ui, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--ink); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.25; }
h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
button, input, select, textarea { font: inherit; color: inherit; }
.boot { padding: 2rem; text-align: center; color: var(--muted); }
[hidden] { display: none !important; }

/* Đăng nhập */
.auth { max-width: 380px; margin: 8vh auto; padding: 0 16px; }
.auth .card { padding: 24px; }
.auth h1 { text-align: center; font-size: 1.5rem; margin-bottom: 1rem; }

/* Khung */
.topbar { background: linear-gradient(90deg, #14213d, #1b2f57); color: #fff; display: flex; align-items: center; gap: 14px; padding: 0 20px; min-height: 56px; position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 8px rgba(20, 33, 61, .25); }
.topbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.brand-logo { height: 30px; width: auto; border-radius: 6px; background: #fff; padding: 2px; }
.topbar nav { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { color: #c7d2e6; text-decoration: none; padding: 8px 12px; border-radius: 8px; font-size: .93rem; white-space: nowrap; transition: background .15s, color .15s; }
.topbar nav a.active { color: #fff; background: rgba(255, 255, 255, .16); font-weight: 600; }
.topbar nav a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.topbar .who { font-size: .88rem; color: #c7d2e6; display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.topbar .who button { background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #e2e8f0; border-radius: 8px; padding: 5px 12px; cursor: pointer; }
.topbar .who button:hover { background: rgba(255, 255, 255, .12); }
.menu-btn { display: none; background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: #fff; border-radius: 8px; font-size: 1.25rem; line-height: 1; padding: 6px 12px; cursor: pointer; }
@media (max-width: 1200px) {
  .topbar { flex-wrap: wrap; padding: 8px 14px; gap: 8px; }
  .topbar .brand { flex: 1; }
  .menu-btn { display: block; order: 2; }
  .topbar .who { order: 3; }
  .topbar .who-name { display: none; }
  .topbar nav { order: 4; display: none; flex-basis: 100%; flex-direction: column; overflow: visible; padding-bottom: 6px; }
  .topbar.open nav { display: flex; }
  .topbar nav a { padding: 11px 12px; font-size: 1rem; }
}
main { max-width: 1520px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card.pad { padding: 16px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.page-head h2 { margin: 0; }

/* Biểu mẫu */
label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 4px; }
.field { margin-bottom: 12px; }
.field .err { color: var(--bad); font-size: .8rem; margin-top: 3px; display: block; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #9db9ff; border-color: var(--brand); }
textarea { min-height: 70px; resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: .95rem; }
.check input { width: auto; }
.grid { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid .wide { grid-column: 1 / -1; }
.roomlist { display: flex; flex-wrap: wrap; gap: 8px; }
.roomlist label { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 0; color: var(--ink); cursor: pointer; }

/* Nút */
.btn { border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; padding: 7px 14px; cursor: pointer; font-weight: 500; }
.btn:hover { background: #f1f5f9; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { background: #2559c7; }
.btn.danger { color: var(--bad); border-color: #f3b4ae; }
.btn.small { padding: 3px 9px; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: wait; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }

/* Bảng */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.filters .field { margin: 0; min-width: 130px; }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: #f8fafc; }
td.num, th.num { text-align: right; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: #f5f8ff; }
.empty { padding: 28px; text-align: center; color: var(--muted); }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; color: var(--muted); font-size: .9rem; }

/* Nhãn trạng thái */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #eef2f7; color: #475467; }
.badge.created { background: #e8f0ff; color: #2559c7; }
.badge.checked_in { background: #e0f6e9; color: #14783f; }
.badge.checked_out { background: #eceff3; color: #475467; }
.badge.cancelled { background: #fde8e6; color: #b42318; }
.badge.clean { background: #e0f6e9; color: #14783f; }
.badge.dirty { background: #fff3d6; color: #9a6400; }
.badge.maintenance { background: #fde8e6; color: #b42318; }

/* Hộp thoại */
.overlay { position: fixed; inset: 0; background: rgba(16, 24, 40, .5); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 12px; overflow-y: auto; z-index: 50; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 760px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.modal.narrow { max-width: 440px; }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal header h3 { margin: 0; }
.modal header button { border: 0; background: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); }
.modal .body { padding: 18px; }
.modal footer { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.formerr { background: #fde8e6; color: #912018; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: .9rem; }
.notice { background: #fff6dd; color: #7a5200; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: .9rem; }

/* Chi tiết */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 16px; margin-bottom: 14px; }
.kv div span { display: block; font-size: .78rem; color: var(--muted); }
.kv div b { font-weight: 600; }
.sect { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.money { font-variant-numeric: tabular-nums; }
.total { font-size: 1.1rem; font-weight: 700; }
.cols { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.facility-card { margin-bottom: 16px; }
.facility-card > header { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); gap: 8px; flex-wrap: wrap; }
.muted { color: var(--muted); }

/* Thông báo nhanh */
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: #14213d; color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: var(--shadow); max-width: 360px; }
.toast.bad { background: #b42318; }

@media (max-width: 640px) {
  main { padding: 10px; }
  th, td { padding: 8px; }
  .topbar nav a { padding: 10px; }
}

/* Lịch đặt phòng (phòng x ngày) */
.tl-wrap { --tl-name: 150px; overflow: hidden; }
.tl-nav { display: flex; gap: 10px; align-items: center; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.tl-month { font-weight: 700; min-width: 70px; text-align: center; }
.tl-scroll { overflow-x: auto; max-height: 70vh; overflow-y: auto; min-width: 0; }
.tl-scroll > .tl-row, .tl-scroll > .tl-facility { min-width: 1500px; }
.tl-row { display: grid; align-items: stretch; border-bottom: 1px solid var(--line); position: relative; }
.tl-row > * { grid-row: 1; }
.tl-head { position: sticky; top: 0; z-index: 4; background: #f8fafc; border-bottom: 2px solid var(--line); }
.tl-name { position: sticky; left: 0; z-index: 3; background: #fff; padding: 8px 10px; display: flex; align-items: center; gap: 6px; border-right: 1px solid var(--line); }
.tl-head .tl-name { background: #f8fafc; font-weight: 700; z-index: 5; }
.tl-day { text-align: center; padding: 5px 0; font-size: .72rem; border-left: 1px solid var(--line); line-height: 1.2; }
.tl-day b { display: block; }
.tl-day span { color: var(--muted); }
.tl-day.weekend { background: #fff4f2; }
.tl-day.today, .tl-cell.today { background: #fff3cd; box-shadow: inset 2px 0 0 #e5484d, inset -2px 0 0 #e5484d; }
.tl-facility { position: sticky; left: 0; background: #e8f0ff; color: #2559c7; font-weight: 700; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.tl-cell { border-left: 1px solid #eef1f5; min-height: 38px; cursor: pointer; }
.tl-cell:hover { background: #eef4ff; }
.tl-cell.weekend { background: #fffafa; }
.tl-bar { z-index: 2; margin: 6px 1px; border-radius: 6px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #fff; font-size: .78rem; font-weight: 600; cursor: pointer; overflow: hidden; white-space: nowrap; }
.tl-bar.created { background: #2f80ed; }
.tl-bar.checked_in { background: #f59e0b; }
.tl-bar.checked_out { background: #98a2b3; }
.tl-bar .tl-out { font-size: .68rem; opacity: .9; font-weight: 500; }
.tl-bar:hover { filter: brightness(1.08); }
.tl-legend { display: flex; gap: 10px; align-items: center; padding: 10px 12px; flex-wrap: wrap; }

/* Bảng tổng hợp tháng */
tr.overdue td { background: #fff1f0; }
tr.overdue td.due { color: var(--bad); font-weight: 700; }
td.due { color: var(--warn); font-weight: 600; }
.modal.wide { max-width: 960px; }

/* Bill (xem trước và in) */
.bill { border: 1px solid #222; padding: 14px 16px; background: #fff; color: #111; font-size: 13px; }
.bill h2 { text-align: center; font-size: 1.05rem; margin: 6px 0 2px; }
.bill-sub { text-align: center; margin: 0 0 10px; font-weight: 600; }
.bill-head { display: flex; justify-content: space-between; align-items: flex-start; }
.bill-brand { font-weight: 800; font-size: 1.1rem; }
.bill-code { font-size: .72rem; color: #555; }
.bill-info { display: grid; gap: 2px; margin-bottom: 8px; }
.bill-table { border: 1px solid #222; }
.bill-table th, .bill-table td { border: 1px solid #222; padding: 4px 8px; white-space: normal; vertical-align: top; background: #fff; }
.bill-table th { font-size: .72rem; text-transform: none; color: #111; background: #f3f3f3; }
.bill-detail { display: flex; justify-content: space-between; gap: 10px; }
.bill-summary { margin: 8px 0; }
.bill-sum { display: flex; justify-content: space-between; padding: 2px 0; }
.bill-sum.strong { border-top: 1px solid #222; font-size: 1.05rem; padding-top: 4px; }
.bill-notes { margin: 6px 0; }
.bill-sign { display: flex; justify-content: space-around; margin: 36px 0 6px; font-weight: 700; }
.bill-foot { font-size: .75rem; color: #444; }
#print-area { display: none; }
@media print {
  @page bill { size: A4 landscape; margin: 8mm; }
  @page doc { size: 595.5pt 842pt; margin: 24pt 22pt 34pt 22pt; @bottom-center { content: counter(page); font: 10pt "Times New Roman", Times, serif; } }
  body.printing-bill > *:not(#print-area) { display: none !important; }
  body.printing-bill #print-area { display: block !important; }
  .print-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; page: bill; }
  .print-doc { page: doc; }
  .print-doc .wp { padding: 0 !important; width: auto !important; box-shadow: none; }
  .bill { font-size: 10.5px; padding: 8px 10px; }
}

/* Dashboard và Báo cáo */
.stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.stat-value { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: .8rem; color: var(--muted); }
.stat.warn .stat-value { color: var(--warn); } .stat.bad .stat-value { color: var(--bad); } .stat.ok .stat-value { color: var(--ok); }
.dash-h { margin-top: 14px; }
.bars { display: grid; gap: 6px; }
.bar-row { display: grid; grid-template-columns: minmax(80px, 160px) 1fr minmax(120px, auto); gap: 8px; align-items: center; font-size: .85rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: #eef2f7; border-radius: 6px; height: 14px; display: block; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 6px; }
.bar-val { text-align: right; white-space: nowrap; }
.colchart { display: flex; align-items: flex-end; gap: 3px; height: 150px; border-bottom: 1px solid var(--line); padding-top: 6px; }
.colchart.tall { height: 180px; margin-top: 12px; }
.col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; min-width: 6px; }
.col-fill { display: block; width: 100%; background: var(--brand); border-radius: 3px 3px 0 0; }
.col.group .col-fill { width: 33%; max-width: 18px; }
.col-fill.rev { background: #2f6fed; } .col-fill.exp { background: #e5484d; } .col-fill.prof { background: #30a46c; } .col-fill.neg { background: #b42318; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
table.report td.child { color: var(--muted); }
table.report tr.toggle { cursor: pointer; font-weight: 600; }
table.report tr.profit td { font-weight: 700; border-top: 2px solid var(--line); }
table.report tr.info td { color: var(--muted); }
td.neg { color: var(--bad); }
td.differs { background: #fff3b8; outline: 1px solid #e0b400; }
@media print { .topbar, .filters, .page-head button { display: none !important; } main { padding: 0; } .card { box-shadow: none; } }

/* Nhật ký, Lịch sử */
.nav-badge { background: #e5484d; color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 700; padding: 1px 7px; margin-left: 6px; }
table.diff { margin: 8px 0; font-size: .85rem; }
table.diff td.diff-before { background: #fff1f0; } table.diff td.diff-after { background: #eafaf0; }
.hist { border-left: 3px solid var(--line); padding: 4px 0 4px 10px; margin: 8px 0; }
.hist-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
tr.attn td { background: #fff7e6; }
table.audit td { white-space: normal; vertical-align: top; }
.filters-fold summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.au-feed { padding: 0 4px 4px; }
.au-day { position: sticky; top: 0; background: #f8fafc; color: var(--muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.au-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; gap: 10px; align-items: start; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; border-left: 3px solid transparent; }
.au-row:hover { background: #f5f8ff; }
.au-row.attn { background: #fff7e6; border-left-color: var(--warn); }
.au-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; padding-top: 2px; }
.ev-code { display: inline-block; text-align: center; min-width: 34px; padding: 2px 0; border-radius: 6px; font-size: .75rem; font-weight: 700; background: #eef2f7; color: #475569; }
.ev-T { background: #dcfce7; color: #166534; } .ev-Q { background: #ede9fe; color: #5b21b6; } .ev-C { background: #e0f2fe; color: #075985; } .ev-X { background: #fee2e2; color: #991b1b; }
.au-desc { line-height: 1.4; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.au-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; font-size: .8rem; color: var(--muted); }
.au-who { font-weight: 600; color: var(--ink); }
.au-chip { background: #f1f5f9; border-radius: 999px; padding: 0 8px; }
.au-chip.obj { background: #eff6ff; color: #1d4ed8; }
.au-reason { margin-top: 3px; font-size: .82rem; color: var(--muted); font-style: italic; }

/* Hợp đồng: vẽ đúng bố cục file Word (độ rộng, lề, viền lấy từ form) */
.wp { background: #fff; color: #000; margin: 0 auto; box-sizing: content-box; line-height: 1.17; }
.wp-outer { width: 100%; border-collapse: collapse; }
.wp-outer > thead > tr > td, .wp-outer > tbody > tr > td { padding: 0; border: 0; white-space: normal; background: transparent; text-align: left; }
.wp-p { margin: 0; white-space: normal; word-wrap: break-word; }
.wp-marker { display: inline-block; text-indent: 0; }
.wp-tbl { table-layout: fixed; border-collapse: collapse; }
.wp-tbl td { white-space: normal; vertical-align: top; background: transparent; word-wrap: break-word; }
.contract-scroll { overflow: auto; max-height: 70vh; background: #e9edf3; padding: 12px; }
.contract-scroll .wp { box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.bill-brand { display: flex; align-items: center; gap: 8px; }
.bill-logo { height: 40px; width: auto; background: #1b1b1b; padding: 3px 6px; border-radius: 4px; }

/* Sửa mẫu hợp đồng (Cài đặt) */
.tpl-edit h4 { margin: 14px 0 6px; }
.tpl-para { border: 1px solid #d5dbe5; border-radius: 6px; padding: 6px; margin: 0 0 6px; background: #fff; }
.tpl-run { display: block; width: 100%; box-sizing: border-box; margin: 0 0 4px; padding: 4px 6px; font: 14px/1.4 "Times New Roman", Times, serif; border: 1px solid #e2e6ee; border-radius: 4px; resize: vertical; }
.tpl-run.b { font-weight: 700; }
.tpl-run.i { font-style: italic; }
.tpl-tools { display: flex; gap: 6px; justify-content: flex-end; }
.tpl-tbl-title { margin: 12px 0 4px; font-weight: 600; color: #345; }
.tpl-cell { border-left: 3px solid #b9c6dd; padding-left: 8px; margin: 0 0 8px; }

/* Sửa mẫu hợp đồng ngay trên bản xem trước */
.wp-edit { cursor: text; }
.wp-edit:hover { background: #fff8d6; outline: 1px dashed #d9b84a; }
.wp-lock { position: relative; }
.wp-lock:hover { background: #eef1f6; cursor: not-allowed; }
.wp-lock:hover::after { content: "🔒"; position: absolute; right: -2px; top: 0; font-size: 11px; }
.tpl-inline { border: 2px solid #2f6fdc; border-radius: 4px; padding: 6px; margin: 2px 0; background: #fff; }

/* dòng "Nhãn: ………" : dấu chấm vừa hết phần còn lại của dòng */
.wp-fit { display: flex; text-indent: 0 !important; }
.wp-fit .wp-lab { flex: none; white-space: pre-wrap; }
.wp-fit .wp-dots { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; }
.ct-type { display: inline-block; min-width: 150px; font-weight: 600; }

/* ---- Dashboard: thẻ số liệu màu, biểu đồ ---- */
.dash-filter { background: #fff; border-radius: 12px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(15,30,60,.08); margin-bottom: 16px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 18px; }
.kpis.small { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 4px rgba(15,30,60,.10); color: #1b2a41; display: flex; flex-direction: column; gap: 6px; }
.kpi-top { display: flex; align-items: center; gap: 10px; }
.kpi-ic { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; }
.kpi-label { font-size: .86rem; color: #3b4a63; }
.kpi-val { font-size: 1.65rem; font-weight: 700; line-height: 1.15; word-break: break-word; }
.kpis.small .kpi-val { font-size: 1.3rem; }
.kpi-sub { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: #4a5a75; }
.kpi-link { color: #1d4ed8; text-decoration: none; margin-left: auto; }
.kpi.blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); } .kpi.blue .kpi-ic { color: #2563eb; }
.kpi.purple { background: linear-gradient(135deg, #f3e8ff, #e0c8f0); } .kpi.purple .kpi-ic { color: #9333ea; }
.kpi.green { background: linear-gradient(135deg, #dcfce7, #bde5c8); } .kpi.green .kpi-ic { color: #15803d; }
.kpi.orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); } .kpi.orange .kpi-ic { color: #ea580c; }
.kpi.cyan { background: linear-gradient(135deg, #cffafe, #a5e8f5); } .kpi.cyan .kpi-ic { color: #0e7490; }
.kpi.teal { background: linear-gradient(135deg, #ccfbf1, #a7ecd9); } .kpi.teal .kpi-ic { color: #0f766e; }
.kpi.red { background: linear-gradient(135deg, #fee2e2, #fecaca); } .kpi.red .kpi-ic { color: #dc2626; }
.kpi.gray { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); } .kpi.gray .kpi-ic { color: #64748b; }
.dcard { background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 4px rgba(15,30,60,.10); margin: 0 0 18px; min-width: 0; }
.dcard h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 1rem; color: #1b2a41; }
.dcard-ic { display: inline-flex; color: #2563eb; }
.dcard-ic svg { width: 18px; height: 18px; }
.dash-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dash-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .dash-grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .dash-grid2, .dash-grid3 { grid-template-columns: 1fr; } }
.dbars { display: flex; align-items: flex-end; gap: 4px; height: 220px; padding-bottom: 34px; position: relative; }
.dbar { flex: 1; height: 100%; display: flex; align-items: flex-end; position: relative; min-width: 0; }
.dbar-fill { display: block; width: 100%; background: linear-gradient(180deg, #3b82f6, #2563eb); border-radius: 3px 3px 0 0; min-height: 1px; }
.dbar-lbl { position: absolute; left: 50%; bottom: -30px; font-size: .68rem; color: #5b6b85; white-space: nowrap; transform-origin: top left; transform: rotate(45deg); }
.pie-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.pie { width: 170px; height: 170px; flex: none; }
.pie-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 8px; }
.pie-row { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.pie-row .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.pie-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pie-pct { font-variant-numeric: tabular-nums; color: #3b4a63; }

@media (min-width: 1100px) { .kpis { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
@media (min-width: 1100px) { .kpis.small { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.topbar nav a { padding: 8px 9px; font-size: .9rem; }
.topbar { gap: 10px; padding: 0 16px; }
@media (max-width: 1200px) { .menu-btn { order: 3; } .topbar .who { order: 2; } .topbar .brand span:last-child { font-size: .95rem; } }
@media (max-width: 600px) {
  .kpis, .kpis.small { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 11px 12px; }
  .kpi-val { font-size: 1.25rem; }
  .kpis.small .kpi-val { font-size: 1.1rem; }
  .kpi-label { font-size: .8rem; }
  .dbars { height: 180px; }
}
@media (max-width: 1200px) { .topbar .brand { min-width: 0; } .topbar .brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
/* ô lọc và nút cùng chiều cao, thẳng hàng */
.filters input[type=text], .filters input[type=date], .filters input[type=month], .filters input[type=number], .filters input[type=search], .filters select { height: 40px; padding-top: 0; padding-bottom: 0; }
.filters .btn, .filters .btn.small { height: 40px; padding: 0 14px; font-size: .92rem; display: inline-flex; align-items: center; }
.filters .field label { line-height: 1.2; height: 18px; }
.dash-filter .btn.small { background: #f1f5fb; border-color: #d5deef; }
.kpi-val { word-break: normal; overflow-wrap: normal; font-size: clamp(1.1rem, 1.7vw, 1.65rem); }
.kpis.small .kpi-val { font-size: clamp(1.05rem, 1.4vw, 1.3rem); }

/* ---- Đặt phòng ---- */
.seg { display: inline-flex; background: #e8edf7; border-radius: 10px; padding: 3px; gap: 2px; }
.seg-b { border: 0; background: transparent; color: #3b4a63; padding: 7px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.seg-b.on { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(20, 33, 61, .18); }
.fcard { background: #fff; border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow); margin-bottom: 16px; }
.btn.icon { width: 36px; height: 36px; padding: 0; font-size: 1.3rem; line-height: 1; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.kpi-ic.glyph { font-size: 1.15rem; font-weight: 700; justify-content: center; }
.kpi.green .kpi-ic.glyph { color: #15803d; } .kpi.purple .kpi-ic.glyph { color: #9333ea; } .kpi.cyan .kpi-ic.glyph { color: #0e7490; } .kpi.orange .kpi-ic.glyph { color: #ea580c; }
.bk-strip { margin-bottom: 16px; }
.tl-nav { background: #fff; border-radius: 12px; padding: 10px 16px; box-shadow: var(--shadow); margin-bottom: 14px; justify-content: flex-start; }
.tl-month { font-size: 1.1rem; min-width: 130px; }
.tl-key { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tl-wrap { border-radius: 12px; border: 0; box-shadow: var(--shadow); }
.tl-scroll > .tl-row, .tl-scroll > .tl-facility { min-width: 1700px; }
.tl-row { min-height: 52px; }
.tl-head { min-height: 52px; background: #f1f5fb; border-bottom: 1px solid var(--line); }
.tl-head .tl-name { background: #f1f5fb; color: #3b4a63; text-transform: uppercase; font-size: .76rem; letter-spacing: .04em; }
.tl-name { padding: 8px 14px; font-size: .95rem; }
.tl-name b { font-size: 1.02rem; }
.tl-day { font-size: .74rem; padding: 7px 0; border-left: 1px solid #e8edf5; }
.tl-day b { font-size: .72rem; color: #3b4a63; letter-spacing: .03em; }
.tl-day.weekend { background: #fdf3f3; }
.tl-day.weekend b { color: #c2410c; }
.tl-day.today { background: #2563eb; box-shadow: none; }
.tl-day.today b, .tl-day.today span { color: #fff; }
.tl-cell { border-left: 1px solid #eef1f6; min-height: 52px; }
.tl-cell.weekend { background: #fffafa; }
.tl-cell.today { background: #eaf1ff; box-shadow: inset 1px 0 0 #93b4f5, inset -1px 0 0 #93b4f5; }
.tl-facility { background: #eef3ff; color: #1d4ed8; border-left: 4px solid #2563eb; font-size: .92rem; padding: 8px 14px; }
.tl-bar { margin: 8px 2px; border-radius: 9px; font-size: .84rem; box-shadow: 0 1px 3px rgba(20, 33, 61, .25); letter-spacing: .01em; }
.tl-bar.created { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.tl-bar.checked_in { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #3b2a00; }
.tl-bar.checked_out { background: linear-gradient(135deg, #a9b4c6, #8793ab); }
.tl-bar .tl-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-legend { display: none; }
/* bảng đặt phòng */
.card .tablewrap table tbody tr:nth-child(even) { background: #fafbfe; }
.card .tablewrap table tbody tr.click:hover { background: #eef4ff; cursor: pointer; }
.card .tablewrap th { background: #f1f5fb; color: #3b4a63; }
@media (max-width: 640px) { .tl-wrap { --tl-name: 100px; } .tl-nav { padding: 8px 10px; } .tl-key { margin-left: 0; } .tl-month { min-width: 0; font-size: 1rem; } }
.tl-key .badge.checked_in { background: #fff1cc; color: #8a5a00; }
.tl-key .badge.created { background: #dbe8ff; color: #1d4ed8; }
.tl-key .badge.checked_out { background: #e3e8f0; color: #55637d; }

/* biểu tượng Lucide */
.lucide { flex: none; vertical-align: middle; }
.topbar nav a { display: inline-flex; align-items: center; gap: 7px; }
.seg-b { display: inline-flex; align-items: center; gap: 7px; }
.kpi-ic svg { width: 22px; height: 22px; }
@media (min-width: 1201px) and (max-width: 1560px) { .topbar .brand > span { display: none; } .topbar .who-name { display: none; } .topbar nav a { padding: 8px 8px; gap: 6px; } }

/* thanh lọc + số liệu nhanh cùng một hàng */
.bk-bar { align-items: flex-end; }
.bk-stats { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; align-self: stretch; align-items: stretch; }
.bk-stat { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 12px; border-radius: 10px; min-width: 120px; color: #1b2a41; }
.bk-stat-ic { display: inline-flex; width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .65); align-items: center; justify-content: center; }
.bk-stat-tx { display: flex; flex-direction: column; line-height: 1.15; }
.bk-stat-tx b { font-size: 1.15rem; }
.bk-stat-tx span { font-size: .74rem; color: #43536d; white-space: nowrap; }
.bk-stat.green { background: linear-gradient(135deg, #dcfce7, #bde5c8); } .bk-stat.green .bk-stat-ic { color: #15803d; }
.bk-stat.purple { background: linear-gradient(135deg, #f3e8ff, #e0c8f0); } .bk-stat.purple .bk-stat-ic { color: #9333ea; }
.bk-stat.cyan { background: linear-gradient(135deg, #cffafe, #a5e8f5); } .bk-stat.cyan .bk-stat-ic { color: #0e7490; }
.bk-stat.orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); } .bk-stat.orange .bk-stat-ic { color: #ea580c; }
@media (max-width: 1100px) { .bk-stats { margin-left: 0; width: 100%; } .bk-stat { flex: 1; } }
@media (max-width: 600px) { .bk-stat { min-width: 45%; } }
.bk-stat.red { background: linear-gradient(135deg, #fee2e2, #fecaca); } .bk-stat.red .bk-stat-ic { color: #dc2626; }

/* thanh chuyển tháng tinh gọn */
.tl-nav { padding: 8px 14px; gap: 12px; border: 1px solid var(--line); box-shadow: none; }
.tl-pager { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: #f7f9fd; padding: 2px; }
.tl-step { width: 34px; height: 34px; border: 0; background: transparent; border-radius: 9px; color: #3b4a63; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tl-step:hover { background: #e6edfb; color: var(--brand); }
.tl-pager .tl-month { font-size: .98rem; font-weight: 600; min-width: 124px; padding: 0 6px; color: #1b2437; letter-spacing: .01em; }
.tl-today { height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid #cfdcf7; background: #f0f5ff; color: var(--brand); border-radius: 11px; font-weight: 600; font-size: .9rem; cursor: pointer; }
.tl-today:hover { background: #e4edff; }
.tl-key { gap: 18px; align-items: center; }
.tl-k { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: #55637d; }
.tl-dot { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }
.tl-dot.created { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.tl-dot.checked_in { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.tl-dot.checked_out { background: linear-gradient(135deg, #a9b4c6, #8793ab); }
/* ---- Lịch: tăng độ tương phản, bớt chìm ---- */
.tl-wrap { border: 1px solid #cfd9ec; box-shadow: 0 2px 10px rgba(20, 33, 61, .10); background: #fff; }
.tl-head { background: #e3ebfa; border-bottom: 2px solid #c3d1ee; }
.tl-head .tl-name { background: #e3ebfa; color: #1f2d4a; border-right: 2px solid #c3d1ee; }
.tl-day { border-left: 1px solid #cdd8ee; color: #1b2437; }
.tl-day b { color: #1f2d4a; font-size: .74rem; }
.tl-day span { color: #4a5a78; }
.tl-day.weekend { background: #ffe7df; }
.tl-day.weekend b { color: #c2410c; }
.tl-day.today { background: #2563eb; box-shadow: 0 2px 6px rgba(37, 99, 235, .45); }
.tl-day.today b, .tl-day.today span { color: #fff; }
.tl-facility { background: #d9e6ff; color: #1741a8; border-left: 5px solid #2563eb; border-bottom: 1px solid #c3d1ee; font-size: .95rem; }
.tl-row { border-bottom: 1px solid #d5deef; }
.tl-name { background: #f4f7fd; border-right: 2px solid #c3d1ee; }
.tl-name b { font-size: 1.08rem; color: #14213d; }
.tl-cell { border-left: 1px solid #dfe6f3; }
.tl-cell.weekend { background: #fff3ef; }
.tl-cell:hover { background: #e4eeff; }
.tl-cell.today { background: #d6e5ff; box-shadow: inset 2px 0 0 #2563eb, inset -2px 0 0 #2563eb; }
.tl-bar { margin: 7px 2px; box-shadow: 0 2px 6px rgba(20, 33, 61, .30); font-weight: 700; }
.tl-bar.created { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.tl-bar.checked_in { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #2f2200; }
.tl-bar.checked_out { background: linear-gradient(135deg, #94a3b8, #6b7a93); }
/* cột hôm nay giữ màu đỏ */
.tl-day.today { background: #e5484d; box-shadow: 0 2px 6px rgba(229, 72, 77, .45); }
.tl-cell.today { background: #fff0f0; box-shadow: inset 2px 0 0 #e5484d, inset -2px 0 0 #e5484d; }

/* ================= iPad / màn hình cảm ứng ================= */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
a, button, select, input, label, summary, .click, .tl-cell, .tl-bar { touch-action: manipulation; }
.topbar { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.card:not(.tl-wrap) { max-width: 100%; overflow-x: auto; }
.tl-scroll, .tablewrap, .contract-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
@media (min-width: 601px) and (max-width: 1200px) {
  .topbar.open nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px 0 12px; }
  .topbar nav a { justify-content: flex-start; background: rgba(255, 255, 255, .07); }
}
@media (pointer: coarse) {
  /* chữ trong ô nhập từ 16px để iPad không tự phóng to khi chạm vào */
  input, select, textarea { font-size: 16px; }
  /* vùng chạm tối thiểu ~44px */
  .btn { min-height: 44px; padding: 10px 18px; font-size: 1rem; }
  .btn.small { min-height: 40px; padding: 8px 14px; font-size: .95rem; }
  .btn.icon, .tl-step { width: 44px; height: 44px; min-height: 44px; }
  .tl-today, .seg-b { min-height: 44px; }
  .menu-btn { min-height: 44px; min-width: 48px; }
  .topbar nav a { min-height: 44px; }
  .topbar .who button { min-height: 40px; }
  input[type=text], input[type=password], input[type=number], input[type=date], input[type=month], input[type=search], select { min-height: 44px; }
  .filters input[type=text], .filters input[type=date], .filters input[type=month], .filters input[type=number], .filters input[type=search], .filters select,
  .filters .btn, .filters .btn.small { height: 44px; }
  .check input, input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  .roomlist label { padding: 10px 14px; }
  th, td { padding-top: 12px; padding-bottom: 12px; }
  .tl-cell { min-height: 56px; }
  .tl-row { min-height: 56px; }
  .tl-bar { margin: 8px 2px; }
  .modal header button { width: 44px; height: 44px; }
  .badge { padding: 4px 11px; }
}
/* cửa sổ (modal) vừa khít iPad */
@media (max-width: 1200px) { .modal { max-width: min(96vw, 900px); } .modal.wide { max-width: 96vw; } .modal .body { max-height: calc(100vh - 150px); overflow-y: auto; -webkit-overflow-scrolling: touch; } }
@media (max-width: 1200px) { .bk-stat { flex: 1 1 150px; min-width: 150px; } .bk-stat-tx span { white-space: normal; } .bk-stat-tx b { white-space: nowrap; } }

/* ---- Lịch đặt phòng: rộng hết cỡ, nhiều cột nhất ---- */
main.wide { max-width: none; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.tl-wrap { --tl-name: 92px; }
.tl-scroll { max-height: calc(100vh - 290px); min-height: 300px; }
.tl-scroll > .tl-row, .tl-scroll > .tl-facility { min-width: calc(var(--tl-name) + var(--tl-days, 31) * 30px); }
.tl-name { padding: 6px 10px; gap: 4px; flex-wrap: wrap; }
.tl-name b { font-size: 1rem; }
.tl-head .tl-name { font-size: .7rem; padding: 6px 10px; }
.tl-day { padding: 6px 0; }
.tl-day b { font-size: .66rem; letter-spacing: 0; }
.tl-day span { font-size: .8rem; font-weight: 600; color: #1b2437; }
.tl-day.today span, .tl-day.today b { color: #fff; }
.tl-bar { font-size: .8rem; padding: 0 7px; }
.tl-bar .tl-out { font-size: .66rem; }
.tl-facility { padding: 7px 12px; }
@media (max-width: 1200px) { .tl-scroll { max-height: none; } }

.tl-bar { justify-content: flex-start; }
.tl-bar .tl-who { min-width: 0; }

/* ---- Popup đặt phòng theo nhóm ---- */
.modal.bkform { max-width: min(94vw, 880px); width: 100%; background: #f6f8fc; border-radius: 16px; }
.modal.bkform header { background: #fff; border-radius: 16px 16px 0 0; }
.modal.bkform header h3 { font-size: 1.15rem; }
.modal.bkform .body { padding: 16px 18px; background: #f6f8fc; }
.modal.bkform footer { background: #fff; border-radius: 0 0 16px 16px; position: sticky; bottom: 0; }
.fsec { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 6px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(20, 33, 61, .04); }
.fsec h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: .98rem; color: #1b2437; }
.fsec-ic { width: 30px; height: 30px; border-radius: 9px; background: #e8f0ff; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; }
.fgrid .field { margin-bottom: 12px; min-width: 0; }
.fgrid .field.wide, .fgrid .field:has(.roomlist), .fgrid .field:has(textarea) { grid-column: 1 / -1; }
.modal.bkform .roomlist { gap: 10px; }
.modal.bkform .roomlist label { border: 1.5px solid #d5deef; border-radius: 10px; padding: 9px 16px; font-weight: 600; background: #fff; transition: background .12s, border-color .12s; }
.modal.bkform .roomlist label:has(input:checked) { background: #e8f0ff; border-color: var(--brand); color: #1d4ed8; }
.fpill-wrap { display: flex; align-items: flex-end; }
.fpill { display: inline-block; background: #e8f0ff; color: #1d4ed8; font-weight: 700; border-radius: 999px; padding: 8px 16px; font-size: .95rem; }
.fpill.bad { background: #fee2e2; color: #b42318; }
.ftotal { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: linear-gradient(135deg, #dbeafe, #c7ddff); border-radius: 12px; padding: 12px 16px; color: #1b2a41; }
.ftotal-l { font-size: .85rem; color: #3b4a63; }
.ftotal-v { font-size: 1.4rem; }
.ftotal-v.small { font-size: .9rem; font-weight: 600; }
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0; color: var(--ink); font-size: .98rem; }
.switch input { width: 46px; height: 26px; flex: none; appearance: none; -webkit-appearance: none; border-radius: 999px; background: #cbd5e1; position: relative; cursor: pointer; transition: background .15s; border: 0; padding: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(20px); }
.modal.bkform .formerr { margin-bottom: 12px; }
@media (max-width: 640px) { .modal.bkform { border-radius: 0; max-width: 100vw; } .fgrid { grid-template-columns: 1fr 1fr; } .fgrid .field.wide { grid-column: 1 / -1; } }
.modal.bkform { width: min(94vw, 880px); max-width: none; }
.modal.bkform { max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.modal.bkform .body { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none; -webkit-overflow-scrolling: touch; }
.modal.bkform header, .modal.bkform footer { flex: none; }
.modal.bkform footer { position: static; box-shadow: 0 -1px 0 var(--line); }

/* thẻ chọn Tháng / Qua đêm */
.ktabs { display: flex; gap: 6px; background: #e8edf7; border-radius: 14px; padding: 5px; margin-bottom: 14px; }
.ktab { flex: 1; border: 0; background: transparent; border-radius: 10px; padding: 11px 14px; font-size: 1rem; font-weight: 700; color: #4a5a78; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: background .12s, color .12s; }
.ktab.on { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(20, 33, 61, .2); }
.ktab:not(.on):hover { background: rgba(255, 255, 255, .55); }
.modal.bkform [hidden] { display: none !important; }

/* bố cục nhập đặt phòng: 3 cột, dấu * đỏ */
.req { color: #dc2626; font-weight: 700; }
.fgrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid.c3 .field.span2 { grid-column: span 2; }
.fgrid.c3 .field.wide { grid-column: 1 / -1; }
.fgrid.c3 .field:has(textarea) { grid-column: 1 / -1; }
@media (max-width: 760px) { .fgrid.c3 { grid-template-columns: 1fr 1fr; } .fgrid.c3 .field.span2 { grid-column: 1 / -1; } }
@media (max-width: 460px) { .fgrid.c3 { grid-template-columns: 1fr; } }

/* hàng Cơ sở | Phòng | Check-in | Check-out trên một dòng */
.fgrid .frow { grid-column: 1 / -1; display: grid; gap: 0 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fgrid .frow.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid .frow .field { margin-bottom: 12px; min-width: 0; }
.fgrid .fhint { margin: -4px 0 8px; }
.fgrid .fhint .fpill { padding: 3px 12px; font-size: .82rem; }
@media (max-width: 760px) { .fgrid .frow, .fgrid .frow.c3 { grid-template-columns: 1fr 1fr; } }
input[data-money] { text-align: right; font-variant-numeric: tabular-nums; }

.fgrid .frow.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .fgrid .frow.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fgrid .frow.c5 { grid-template-columns: 1fr 1fr; } }

/* ---- Đặt phòng: độ rộng ô, độ tương phản, trình bày ---- */
.fgrid .frow.c5 { grid-template-columns: 0.8fr 0.8fr 0.8fr 1.3fr 1.3fr; }
@media (max-width: 900px) { .fgrid .frow.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fgrid .frow.c5 { grid-template-columns: 1fr 1fr; } }
.lbl-hint { font-weight: 500; color: #6b7a95; font-size: .78rem; }
.lbl-hint[hidden] { display: none; }
.modal.bkform { background: #eef2f9; box-shadow: 0 24px 60px rgba(15, 25, 50, .45); }
.modal.bkform header { border-bottom: 1px solid #cfd9ec; }
.modal.bkform header h3 { color: #12203a; font-size: 1.2rem; }
.modal.bkform .body { background: #eef2f9; }
.modal.bkform .fsec { background: #fff; border: 1px solid #c7d3ea; box-shadow: 0 2px 6px rgba(20, 33, 61, .08); }
.modal.bkform .fsec h4 { color: #12203a; font-size: 1rem; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid #e1e8f5; }
.modal.bkform .fsec-ic { background: #dbe8ff; color: #1d4ed8; }
.modal.bkform label { color: #26344f; font-weight: 600; font-size: .82rem; }
.modal.bkform input[type=text], .modal.bkform input[type=date], .modal.bkform input[type=number], .modal.bkform select, .modal.bkform textarea {
  border: 1.5px solid #9fb1cf; background: #fff; border-radius: 10px; min-height: 42px; color: #0f1b33; }
.modal.bkform textarea { min-height: 84px; }
.modal.bkform input::placeholder { color: #8795ae; }
.modal.bkform input:hover, .modal.bkform select:hover { border-color: #6f8bbd; }
.modal.bkform input:focus, .modal.bkform select:focus, .modal.bkform textarea:focus { outline: 3px solid rgba(37, 99, 235, .25); border-color: #2563eb; }
.modal.bkform .ktabs { background: #d5def0; border: 1px solid #c0cde6; }
.modal.bkform .ktab { color: #3a4a68; }
.modal.bkform .ktab.on { color: #fff; background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 3px 8px rgba(29, 78, 216, .4); }
.modal.bkform .ktab:not(.on):hover { background: #e6edf9; }
.modal.bkform .ftotal { background: linear-gradient(135deg, #cfe0ff, #b4cdff); border: 1px solid #a9c2f5; }
.modal.bkform .ftotal-v { color: #0f2a6b; }
.modal.bkform .req { color: #d92d20; }
.modal.bkform footer { border-top: 1px solid #cfd9ec; background: #fff; }
.modal.bkform footer .btn { min-width: 110px; }
.modal.bkform .err { color: #c8261b; font-weight: 600; }
/* màn Đặt phòng: viền và chữ rõ hơn */
.fcard { border: 1px solid #cfd9ec; box-shadow: 0 2px 6px rgba(20, 33, 61, .08); }
.fcard label { color: #26344f; font-weight: 600; }
.fcard input, .fcard select { border: 1.5px solid #9fb1cf; border-radius: 10px; }
.fcard input:focus, .fcard select:focus { outline: 3px solid rgba(37, 99, 235, .25); border-color: #2563eb; }
.tl-nav { border: 1px solid #cfd9ec; box-shadow: 0 2px 6px rgba(20, 33, 61, .08); }
.bk-stat-tx b { color: #0f1b33; }
.bk-stat-tx span { color: #2f3f5c; }
.bk-stat { box-shadow: 0 2px 5px rgba(20, 33, 61, .12); border: 1px solid rgba(20, 33, 61, .06); }
.card .tablewrap th { background: #dfe8f7; color: #1f2d4a; }
.card .tablewrap table tbody tr:nth-child(even) { background: #f3f6fc; }
.page-head h2 { color: #12203a; }
.fgrid .frow.c5 { grid-template-columns: 0.95fr 1.05fr 0.85fr 1.2fr 1.2fr; align-items: end; }
.fgrid .frow .field > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .fgrid .frow.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fgrid .frow.c5 { grid-template-columns: 1fr 1fr; } }

.fhelp { margin-top: 4px; font-size: .76rem; color: #5b6b87; line-height: 1.2; }
.fhelp[hidden] { display: none; }
/* popup đặt phòng rộng hơn trên máy tính */
.modal.bkform { width: min(95vw, 1040px); }
@media (min-width: 1500px) { .modal.bkform { width: min(95vw, 1120px); } }

/* popup cân đối: nằm giữa màn hình, cách đều trên và dưới */
.overlay { align-items: flex-start; padding: 16px 12px; }
.overlay > .modal { margin: auto; }
.modal.bkform { max-height: calc(100vh - 32px); }
.lbl-hint { font-size: .7rem; font-weight: 500; color: #6b7a95; margin-left: 4px; white-space: nowrap; }

/* ---- Bộ chọn ngày ---- */
.dp { position: relative; }
.dp-btn { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border: 1.5px solid #9fb1cf; border-radius: 10px; background: #fff; color: #0f1b33; font: inherit; cursor: pointer; text-align: left; }
.dp-btn:hover { border-color: #6f8bbd; }
.dp-btn:focus-visible { outline: 3px solid rgba(37, 99, 235, .25); border-color: #2563eb; }
.dp-btn.is-blank .dp-label { color: #8795ae; }
.dp-ic { display: inline-flex; color: #2563eb; }
.dp-pop { position: fixed; z-index: 1000; background: #fff; border: 1px solid #cdd8ee; border-radius: 16px; box-shadow: 0 18px 44px rgba(15, 25, 50, .28), 0 2px 8px rgba(15, 25, 50, .12); padding: 12px 12px 10px; box-sizing: border-box; user-select: none; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-title { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.dp-title b { font-size: 1rem; color: #12203a; }
.dp-title span { font-size: .78rem; color: #6b7a95; }
.dp-nav { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #f0f4fb; color: #3a4a68; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dp-nav:hover { background: #dbe8ff; color: #1d4ed8; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dp-wd { text-align: center; font-size: .72rem; font-weight: 700; color: #6b7a95; padding: 5px 0; }
.dp-wd.we { color: #d9531e; }
.dp-day { aspect-ratio: 1 / 1; min-height: 34px; border: 0; border-radius: 50%; background: transparent; font: inherit; font-size: .9rem; color: #1b2437; cursor: pointer; }
.dp-day:hover:not(:disabled) { background: #e4eeff; }
.dp-day.we { color: #c2410c; }
.dp-day.today { box-shadow: inset 0 0 0 1.5px #2563eb; font-weight: 700; }
.dp-day.sel { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; font-weight: 700; box-shadow: 0 3px 8px rgba(29, 78, 216, .4); }
.dp-day.off { color: #c3cbda; cursor: not-allowed; text-decoration: none; background: transparent; }
.dp-foot { display: flex; justify-content: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e6ecf7; }
.dp-today { border: 0; background: #eaf1ff; color: #1d4ed8; font-weight: 700; border-radius: 10px; padding: 7px 18px; cursor: pointer; }
.dp-today:hover:not(:disabled) { background: #d5e4ff; }
.dp-today:disabled { color: #aab5cb; background: #f3f5fa; cursor: not-allowed; }

.dp-day { min-height: 0; font-size: .86rem; }
.dp-pop { padding: 10px 8px 8px; }

/* ---- Popup chi tiết đặt phòng ---- */
.bkdetail .dt-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; font-size: .86rem; }
.dt-chips { display: grid; grid-template-columns: 1.3fr 1.4fr 1.1fr 0.8fr 0.9fr; gap: 10px; margin-bottom: 14px; }
.dt-chip { border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; color: #12203a; box-shadow: 0 2px 6px rgba(20, 33, 61, .10); border: 1px solid rgba(20, 33, 61, .06); }
.dt-chip-l { font-size: .74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #3b4a68; }
.dt-chip-v { font-size: 1.12rem; line-height: 1.25; overflow-wrap: anywhere; }
.dt-chip-s { font-size: .78rem; color: #3b4a68; }
.dt-chip.blue { background: linear-gradient(135deg, #dbeafe, #bfd6fb); }
.dt-chip.purple { background: linear-gradient(135deg, #f1e6ff, #ddc6f3); }
.dt-chip.orange { background: linear-gradient(135deg, #ffedd5, #fed3a2); }
.dt-chip.green { background: linear-gradient(135deg, #dcfce7, #b6e6c6); }
.dt-chip.red { background: linear-gradient(135deg, #fee2e2, #fbbcbc); }
.dt-chip.red .dt-chip-v { color: #b42318; }
.dt-chip.teal { background: linear-gradient(135deg, #ccfbf1, #a1e8d6); }
.dt-chip.gray { background: linear-gradient(135deg, #eef2f7, #dde4ee); }
.dt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.dt-card { background: #fff; border: 1px solid #c7d3ea; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 2px 6px rgba(20, 33, 61, .08); min-width: 0; }
.dt-grid2 .dt-card { margin-bottom: 0; }
.dt-card h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #e1e8f5; font-size: 1rem; color: #12203a; }
.dt-card table { margin: 0; }
.dt-rows { display: flex; flex-direction: column; }
.dt-row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed #e1e8f5; }
.dt-row:last-child { border-bottom: 0; }
.dt-occs { display: flex; flex-direction: column; gap: 3px; text-align: right; }
.dt-k { color: #5b6b87; font-size: .88rem; flex: none; }
.dt-v { color: #0f1b33; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.dt-v.strong { font-size: 1.02rem; }
.dt-money { display: flex; flex-direction: column; gap: 2px; }
.dt-mrow { display: flex; justify-content: space-between; padding: 8px 4px; border-bottom: 1px dashed #e1e8f5; font-size: .98rem; }
.dt-mrow b { font-variant-numeric: tabular-nums; }
.dt-mtotal { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(135deg, #cfe0ff, #b4cdff); border: 1px solid #a9c2f5; color: #0f2a6b; font-size: 1.1rem; }
.dt-mtotal b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.bkdetail .dt-card .kv { margin-bottom: 12px; }
.bkdetail .dt-card .sect { border-top: 0; padding-top: 0; margin-top: 0; }
.dt-actions { position: sticky; bottom: -16px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; margin: 6px -18px -16px; padding: 12px 18px; background: #fff; border-top: 1px solid #cfd9ec; box-shadow: 0 -6px 14px rgba(20, 33, 61, .08); }
.dt-actions .btn { border-radius: 10px; font-weight: 600; }
.dt-actions .btn.primary { background: linear-gradient(135deg, #3b82f6, #1d4ed8); border-color: #1d4ed8; box-shadow: 0 3px 8px rgba(29, 78, 216, .35); }
.dt-actions .btn.danger { margin-left: auto; background: #fff5f4; border-color: #f0a79f; color: #b42318; }
@media (max-width: 1000px) { .dt-chips { grid-template-columns: 1fr 1fr 1fr; } .dt-grid2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dt-chips { grid-template-columns: 1fr 1fr; } }
.bkdetail .sect { background: #fff; border: 1px solid #c7d3ea; border-top: 1px solid #c7d3ea; border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; box-shadow: 0 2px 6px rgba(20, 33, 61, .08); }
.bkdetail .sect > h3 { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #e1e8f5; font-size: 1rem; color: #12203a; }
.bkdetail .modal-x { display: none; }
.dt-card .kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.dt-card .kv > div { background: #f3f6fc; border: 1px solid #dde5f3; border-radius: 10px; padding: 8px 12px; }
.dt-card .kv > div span { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #5b6b87; }
.dt-card .kv > div b { display: block; font-size: 1.02rem; color: #0f1b33; }
.dt-card td .btnrow { flex-wrap: nowrap; gap: 4px; }
.dt-card th, .dt-card td { padding: 9px 10px; }
@media (max-width: 800px) { .dt-card .kv { grid-template-columns: 1fr 1fr; } }

/* ---- Thẻ trong popup chi tiết ---- */
.dt-tabs { display: flex; gap: 6px; background: #d5def0; border: 1px solid #c0cde6; border-radius: 14px; padding: 5px; margin-bottom: 14px; position: sticky; top: -16px; z-index: 4; }
.dt-tab { flex: 1; border: 0; background: transparent; border-radius: 10px; padding: 10px 12px; font-size: .96rem; font-weight: 700; color: #3a4a68; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.dt-tab:hover { background: #e6edf9; }
.dt-tab.on { color: #fff; background: linear-gradient(135deg, #3b82f6, #1d4ed8); box-shadow: 0 3px 8px rgba(29, 78, 216, .4); }
.dt-panel[hidden] { display: none; }
.dt-card h4 .dt-h-t { flex: 1; }
.dt-card h4 .btn { margin-left: auto; }
@media (max-width: 560px) { .dt-tab span { display: none; } }

/* =====================================================================
   HỆ THỐNG GIAO DIỆN V2: áp dụng chung cho mọi màn hình và popup
   ===================================================================== */
body { background: linear-gradient(180deg, #e9eef8 0, #f3f6fb 280px) fixed; color: #1b2437; }
h2, h3 { color: #12203a; }
/* nút */
.btn { border: 1.5px solid #b4c3df; background: #fff; color: #1b2a49; border-radius: 10px; padding: 8px 16px; font-weight: 600; box-shadow: 0 1px 2px rgba(20, 33, 61, .06); transition: background .12s, border-color .12s, box-shadow .12s, transform .05s; }
.btn:hover:not([disabled]) { background: #f0f5ff; border-color: #7f9bd0; box-shadow: 0 2px 6px rgba(37, 99, 235, .15); }
.btn:active:not([disabled]) { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 3px solid rgba(37, 99, 235, .3); outline-offset: 1px; }
.btn.primary { background: linear-gradient(135deg, #3b82f6, #1d4ed8); border-color: #1d4ed8; color: #fff; box-shadow: 0 3px 8px rgba(29, 78, 216, .35); }
.btn.primary:hover:not([disabled]) { background: linear-gradient(135deg, #4a8ff8, #2257e0); border-color: #1d4ed8; box-shadow: 0 4px 12px rgba(29, 78, 216, .45); }
.btn.danger { background: #fff5f4; border-color: #f0a79f; color: #b42318; }
.btn.danger:hover:not([disabled]) { background: #ffe9e6; border-color: #e5827a; box-shadow: 0 2px 6px rgba(217, 45, 32, .18); }
.btn.small { padding: 5px 12px; font-size: .84rem; border-radius: 8px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
/* ô nhập */
input[type=text], input[type=password], input[type=number], input[type=date], input[type=month], input[type=search], input[type=email], select, textarea {
  border: 1.5px solid #9fb1cf; border-radius: 10px; min-height: 40px; color: #0f1b33; background: #fff; transition: border-color .12s, box-shadow .12s; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: #6f8bbd; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(37, 99, 235, .22); outline-offset: 0; border-color: #2563eb; }
input::placeholder, textarea::placeholder { color: #8795ae; }
label { color: #2b3a56; font-weight: 600; font-size: .82rem; }
/* tiêu đề trang */
.page-head { margin-bottom: 14px; }
.page-head h2 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.page-head h2::before { content: ""; width: 6px; height: 26px; border-radius: 4px; background: linear-gradient(180deg, #3b82f6, #1d4ed8); display: inline-block; }
/* thanh lọc */
.filters { background: #fff; border: 1px solid #cfd9ec; border-radius: 12px; padding: 12px 16px; box-shadow: 0 2px 6px rgba(20, 33, 61, .07); margin-bottom: 14px; }
/* thẻ */
.card { border: 1px solid #cfd9ec; border-radius: 14px; box-shadow: 0 2px 8px rgba(20, 33, 61, .08); }
.card.pad { padding: 18px 20px; }
.card.pad > h3 { margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid #e1e8f5; font-size: 1.02rem; }
/* bảng */
table { border-collapse: separate; border-spacing: 0; }
th { background: #e2eaf8; color: #1f2d4a; font-size: .73rem; letter-spacing: .04em; padding: 11px 14px; border-bottom: 1px solid #c7d3ea; }
td { padding: 11px 14px; border-bottom: 1px solid #e3e9f4; color: #14213d; }
th:first-child { border-top-left-radius: 10px; } th:last-child { border-top-right-radius: 10px; }
tbody tr:nth-child(even) td { background: #f7f9fd; }
tbody tr:hover td { background: #eaf1ff; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.click { cursor: pointer; }
.tablewrap { border-radius: 12px; }
.pager { background: #f7f9fd; border-top: 1px solid #dde5f3; border-radius: 0 0 14px 14px; }
.empty { padding: 36px; color: #6b7a95; background: repeating-linear-gradient(45deg, #fafcff, #fafcff 10px, #f5f8fd 10px, #f5f8fd 20px); border-radius: 12px; }
/* nhãn, thông báo */
.badge { padding: 3px 11px; font-size: .76rem; font-weight: 700; letter-spacing: .01em; }
.notice { background: #fff8e1; border: 1px solid #f1d27a; border-left: 5px solid #e6a700; color: #5c4300; border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; }
.formerr { background: #fff1f0; border: 1px solid #f3b4ae; border-left: 5px solid #d92d20; color: #8a1d14; border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; font-weight: 600; }
.toast { background: linear-gradient(135deg, #1b2f57, #14213d); border-radius: 12px; padding: 12px 18px; box-shadow: 0 10px 30px rgba(15, 25, 50, .4); font-weight: 600; }
/* popup chung */
.overlay { background: rgba(15, 25, 50, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.modal { border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 25, 50, .45); overflow: hidden; }
.modal header { padding: 16px 22px; background: linear-gradient(180deg, #f6f9ff, #fff); border-bottom: 1px solid #d5deef; }
.modal header h3 { font-size: 1.12rem; font-weight: 800; color: #12203a; }
.modal header button { width: 36px; height: 36px; border-radius: 10px; line-height: 1; transition: background .12s; }
.modal header button:hover { background: #e9eff9; color: #12203a; }
.modal .body { padding: 20px 22px; }
.modal footer { padding: 14px 22px; background: #f6f9fe; border-top: 1px solid #d5deef; gap: 10px; }
.modal footer .btn { min-width: 96px; }
.modal .field { margin-bottom: 14px; }
.modal .sect { border-top: 1px solid #dde5f3; padding-top: 14px; margin-top: 14px; }
.modal .sect > h3 { font-size: 1rem; margin: 0 0 10px; }
.modal .kv > div { background: #f3f6fc; border: 1px solid #dde5f3; border-radius: 10px; padding: 8px 12px; }
.modal .kv > div span { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #5b6b87; }
.modal .kv > div b { display: block; font-size: 1rem; color: #0f1b33; }
details > summary { cursor: pointer; font-weight: 700; color: #1d4ed8; padding: 6px 0; }
.check input { accent-color: #2563eb; }
/* màn đăng nhập */
.auth .card { border-radius: 20px; box-shadow: 0 24px 60px rgba(20, 33, 61, .22); border: 1px solid #cfd9ec; padding: 30px; }
.auth h1 { font-weight: 800; background: linear-gradient(135deg, #1d4ed8, #3b82f6); -webkit-background-clip: text; background-clip: text; color: transparent; }

.rv-kpis:empty { display: none; }

/* Tổng hợp tháng */
.mt-note { background: #fff; border: 1px solid #cfd9ec; border-left: 5px solid #3b82f6; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; color: #3b4a68; }
tr.overdue td:first-child { box-shadow: inset 4px 0 0 #e5484d; }
td.due { color: #b42318; font-weight: 700; }
tfoot td { background: #dbe7ff !important; font-weight: 800; color: #0f2a6b; border-top: 2px solid #a9c2f5; padding: 12px 14px; }
td.total, .money.total { font-weight: 800; }

/* Phòng & cơ sở */
.facility-card { margin-bottom: 18px; overflow: hidden; }
.facility-card > header { background: linear-gradient(180deg, #f4f8ff, #fff); padding: 14px 18px; border-bottom: 1px solid #d5deef; }
.fac-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fac-ic { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(29, 78, 216, .35); }
.fac-name { font-size: 1.1rem; color: #12203a; margin-right: 8px; }
.fac-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-left: 8px; }
.fac-stat { padding: 4px 12px; border-radius: 999px; background: #e8edf7; color: #2f3f5c; font-size: .8rem; font-weight: 700; }
.fac-stat.ok { background: #dcfce7; color: #15803d; } .fac-stat.blue { background: #dbe8ff; color: #1d4ed8; }
.fac-stat.warn { background: #fff1cc; color: #8a5a00; } .fac-stat.bad { background: #fee2e2; color: #b42318; }
.room-chip { display: inline-block; min-width: 64px; text-align: center; padding: 5px 12px; border-radius: 9px; background: #e8f0ff; color: #1d4ed8; font-weight: 800; border: 1px solid #c3d6fb; }
select.st-sel { font-weight: 700; border-width: 1.5px; }
select.st-clean { background: #e8fbef; border-color: #86d9a4; color: #14783f; }
select.st-dirty { background: #fff7de; border-color: #f0cc6a; color: #8a5a00; }
select.st-maintenance { background: #ffecec; border-color: #f0a7a2; color: #b42318; }

/* Nhật ký: mã sự kiện có màu theo nhóm */
.ev-code { display: inline-block; min-width: 34px; text-align: center; padding: 2px 8px; border-radius: 8px; font-size: .74rem; font-weight: 800; letter-spacing: .02em; }
.ev-T { background: #fff1cc; color: #8a5a00; } .ev-Q { background: #fee2e2; color: #b42318; }
.ev-C { background: #ede0ff; color: #6d28d9; } .ev-N { background: #dbe8ff; color: #1d4ed8; }
td { vertical-align: middle; }

/* Nhân viên */
.user-cell { display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #3b82f6; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 2px 5px rgba(20, 33, 61, .25); flex: none; }
.role-pill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.role-admin { background: #ede0ff; color: #6d28d9; } .role-manager { background: #dcfce7; color: #15803d; } .role-staff { background: #dbe8ff; color: #1d4ed8; }
/* Cài đặt: thẻ rộng rãi, dòng danh sách rõ ràng */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; align-items: start; }
.cols > .card.pad { height: 100%; }
.card.pad > h3::before { content: ""; display: inline-block; width: 5px; height: 16px; margin-right: 9px; border-radius: 3px; background: linear-gradient(180deg, #3b82f6, #1d4ed8); vertical-align: -2px; }
.card.pad .btnrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #e1e8f5; flex-wrap: wrap; }
.card.pad .btnrow:last-child { border-bottom: 0; }
.card.pad .btnrow input { max-width: 150px; }
/* hàng nhập gồm nhiều ô (ví dụ chia tiền theo tháng) */
.modal .btnrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modal .btnrow > input[type=month], .modal .btnrow > input[type=date], .modal .btnrow > select { width: auto; flex: 0 1 180px; }
.modal .btnrow > input[type=text] { width: auto; flex: 1 1 160px; }
.modal .grid { gap: 0 14px; }
.modal .roomlist label { border: 1.5px solid #c5d2ea; border-radius: 10px; padding: 8px 14px; background: #fff; font-weight: 600; }

/* Cài đặt: cột trái danh mục, cột phải nội dung */
.set-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.set-nav { position: sticky; top: 72px; background: #fff; border: 1px solid #cfd9ec; border-radius: 14px; padding: 10px; box-shadow: 0 2px 8px rgba(20, 33, 61, .08); display: flex; flex-direction: column; gap: 3px; }
.set-group { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b7a95; padding: 12px 12px 5px; }
.set-group:first-child { padding-top: 4px; }
.set-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; padding: 10px 12px; border-radius: 10px; color: #2b3a56; font: inherit; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
.set-item:hover { background: #eef3fc; }
.set-item.on { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; box-shadow: 0 3px 8px rgba(29, 78, 216, .35); }
.set-pane { min-width: 0; }
.set-pane > .card.pad { margin-bottom: 14px; max-width: 760px; }
@media (max-width: 900px) {
  .set-layout { grid-template-columns: 1fr; }
  .set-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .set-group { display: none; }
  .set-item { width: auto; }
}
.set-pane > .card.pad { max-width: 900px; }

/* Tab Thanh toán: bảng kỳ thu */
.dt-sub { margin: 16px 0 6px; font-size: .9rem; font-weight: 800; color: #1d4ed8; }
td.num.due { color: #b42318; font-weight: 700; }

/* Bảng cột cố định, nút bút chì, nút xếp dọc */
.tbl-fixed { table-layout: fixed; width: 100%; min-width: 720px; }
.tbl-fixed th, .tbl-fixed td { overflow-wrap: anywhere; }
.tbl-fixed td.num, .tbl-fixed th.num { text-align: right; }
.btn.iconbtn { padding: 5px 8px; min-width: 0; line-height: 0; vertical-align: middle; margin-left: 6px; }
.btn.iconbtn.txt { line-height: normal; padding: 5px 12px; }
.btnrow.col { flex-direction: column; align-items: stretch; gap: 4px; }

/* Sổ thu tháng */
table.so-thu td, table.so-thu th { white-space: nowrap; }
table.so-thu td.bill-cell { white-space: nowrap; display: table-cell; }
table.so-thu td.bill-cell .btn { margin-left: 6px; }
table.so-thu tr.co-row td { background: #fff7e6; border-top: 0; font-size: .92rem; }
table.so-thu tr.co-row:hover td { background: #ffefcc; }
table.so-thu tr.has-co td { border-bottom-color: transparent; }
.co-tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #f59e0b; color: #fff; font-weight: 800; font-size: .78rem; }
td.co-result { font-weight: 700; color: #92400e; white-space: normal; }
table.so-thu { font-size: .86rem; }
table.so-thu th, table.so-thu td { padding: 8px 7px; }
table.so-thu td.bill-cell .btn { margin: 4px 0 0; display: block; }
table.so-thu td.bill-cell .badge { display: inline-block; }
table.so-thu td input[type=text] { width: 100px; }
table.so-thu th, table.so-thu td { padding: 7px 5px; }
table.so-thu td input[type=text] { width: 84px; padding: 5px 6px; }
td.co-result { min-width: 110px; }

/* Sổ thu tháng v2: bảng cố định, một cỡ chữ, mỗi ô một dòng */
table.tbl-fixed.so-thu { min-width: 1382px; table-layout: fixed; font-size: .85rem; line-height: 1.25; }
table.so-thu th, table.so-thu td { padding: 8px 7px; white-space: nowrap; vertical-align: middle; font-size: .85rem; font-variant-numeric: tabular-nums; }
table.so-thu th { font-size: .75rem; }
table.so-thu td.ell { overflow: hidden; text-overflow: ellipsis; }
table.so-thu td.bill-cell { text-align: center; }
table.so-thu td.bill-cell .btn, table.so-thu td.meter-cell .btn { margin: 0; display: inline-flex; font-size: .78rem; padding: 4px 10px; }
table.so-thu td.meter-cell { white-space: nowrap; }
table.so-thu td.meter-cell .meter-v { display: inline-block; min-width: 96px; }
table.so-thu td.meter-cell .btn.iconbtn { padding: 4px 7px; margin-left: 2px; }
table.so-thu td input[type=text] { width: 100%; padding: 5px 7px; font-size: .85rem; box-sizing: border-box; }
.btn.small.ok { background: #dcfce7; border-color: #86d9a4; color: #14783f; font-weight: 700; }
table.so-thu .badge { font-size: .75rem; }
table.so-thu tr.co-row td { font-size: .85rem; }
.co-tag { font-size: .75rem; padding: 2px 9px; }
td.co-result { min-width: 0; font-weight: 700; color: #92400e; }

table.tbl-fixed.so-thu { min-width: 1388px; }
table.so-thu th, table.so-thu th.num { text-align: center; }
table.so-thu td.ctr { text-align: center; }
.bdg-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 999px; padding: 3px 11px; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; line-height: 1.3; }
.bdg-btn.ok { background: #dcfce7; color: #14783f; border-color: #86d9a4; }
.bdg-btn.ok:hover { background: #bbf7d0; }
.bdg-btn.warn { background: #fff1cc; color: #8a5a00; border-color: #f0cc6a; }
.bdg-btn.warn:hover { background: #ffe39a; }
.bdg-btn.go { background: #dbe8ff; color: #1d4ed8; border-color: #a9c2f5; }
.bdg-btn.go:hover { background: #c3d6fb; }

table.so-thu td.paid-cell { display: table-cell; text-align: right; }
table.so-thu td.paid-cell .bdg-btn { float: left; }
table.so-thu td.meter-cell .meter-v { min-width: 40px; text-align: center; font-weight: 700; }

table.so-thu td.paid-cell .bdg-btn { float: none; }
table.so-thu td.paid-cell .paid-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
table.so-thu td.paid-cell .paid-v { min-width: 84px; text-align: right; }
table.so-thu tbody td { height: 46px; }
table.so-thu tr.co-row td { height: 40px; }
table.so-thu td.paid-cell .paid-wrap { gap: 6px; }
table.so-thu td.paid-cell .paid-v { min-width: 0; }
table.so-thu td.paid-cell .bdg-btn { padding: 3px 9px; flex: none; }
.mt-note-box { margin: 14px 0 0; }
.mt-note-box .mt-note-h { display: block; margin-bottom: 4px; color: #1d4ed8; }
.mt-note-box ul { margin: 0; padding-left: 20px; color: #7a889f; font-style: italic; }
.mt-note-box li b { color: #4b5b78; }
.mt-note-box li { margin: 3px 0; }

/* Sổ thu: cột Số điện canh giữa, bút nhỏ không viền, dấu - nhỏ */
table.so-thu td.meter-cell { text-align: center; }
table.so-thu td.meter-cell .meter-v { min-width: 0; margin-right: 4px; }
.icon-edit { border: 0; background: transparent; padding: 2px 3px; color: #1d4ed8; cursor: pointer; line-height: 0; vertical-align: middle; border-radius: 4px; }
.icon-edit:hover { background: #e8f0ff; }
.adj-mark { display: inline-block; margin-right: 6px; padding: 0 6px; font-size: 11px; font-weight: 600; color: #b45309; background: #fef3c7; border: 1px solid #f5d38a; border-radius: 999px; vertical-align: middle; cursor: help; white-space: nowrap; }
/* trong ô bảng: nhãn nằm DƯỚI số tiền, nhỏ, canh phải, không làm rộng cột hay làm số nhảy dòng */
td.money { white-space: nowrap; }
td .adj-mark { display: block; width: fit-content; margin: 2px 0 0 auto; padding: 0 5px; font-size: 10px; line-height: 14px; font-weight: 600; }
.icon-edit.icon-del { color: #dc2626; }
.icon-edit.icon-del:hover { background: #fee2e2; }
table.so-thu .dash { text-align: center; font-size: .8rem; color: #9aa7bd; font-weight: 400; }
table.so-thu td.num.dash { text-align: right; }
table.so-thu td.ctr.total-kwh, table.so-thu tfoot td.ctr { text-align: center; font-weight: 800; }

.badge.new-ci { background: #cffafe; color: #0e7490; border-color: #67e8f9; }

/* Ghi chú Sổ thu: ô xem nhanh + sticky note */
table.so-thu td.note-cell { padding: 4px 7px; }
.note-btn { display: block; width: 100%; text-align: left; border: 1px dashed #c3cde0; background: #fbfcff; color: #9aa7bd; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: .85rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-btn.has { border-style: solid; border-color: #f0cc6a; background: #fff8dc; color: #4a3b00; }
.note-btn:hover { border-color: #3b82f6; }
.sticky-note { position: fixed; z-index: 1000; background: #fff7c2; border: 1px solid #e6c84a; border-radius: 6px; box-shadow: 0 10px 28px rgba(60, 50, 0, .28), 0 2px 4px rgba(60, 50, 0, .18); padding: 10px 12px 12px; }
.sticky-h { font-weight: 800; font-size: .8rem; color: #7a5f00; margin-bottom: 6px; }
.sticky-ta { width: 100%; box-sizing: border-box; border: 1px solid #e6d27a; border-radius: 4px; background: #fffdf0; padding: 8px; font: inherit; font-size: .9rem; line-height: 1.4; resize: vertical; min-height: 110px; }
.sticky-ta:focus { outline: 2px solid #f2c94c; outline-offset: 0; }
.sticky-f { display: flex; gap: 6px; justify-content: flex-end; margin-top: 8px; }
.sticky-err { color: #b42318; font-size: .8rem; margin-top: 4px; }

/* Hộp Thêm / Sửa khoản thu */
.pay-target { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; background: #f1f6ff; border: 1px solid #c9dcfb; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
.pay-target-ic { width: 34px; height: 34px; border-radius: 10px; background: #dbe8ff; color: #1d4ed8; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pay-target-l { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7a95; }
.pay-hint { margin: -4px 0 10px; font-size: .85rem; }
.alloc-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1.4fr) auto; gap: 10px; margin-bottom: 10px; align-items: center; }
.alloc-row .btn { padding: 8px 10px; line-height: 0; }
.alloc-foot { display: flex; align-items: center; gap: 14px; margin: 2px 0 12px; flex-wrap: wrap; }
.alloc-info { font-size: .85rem; font-weight: 700; }
.alloc-info.ok { color: #14783f; }
.alloc-info.bad { color: #b42318; }
.fsec .fgrid .field.span2 { grid-column: span 2; }

.pay-target { margin-bottom: 14px; }
.tag-manual, .tag-auto { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; vertical-align: middle; }
.tag-manual { background: #fff1cc; color: #8a5a00; }
.tag-auto { background: #dcfce7; color: #14783f; }
input.pay-content::placeholder { font-size: .8rem; }
table.auto-alloc { min-width: 0; font-size: .88rem; }
table.auto-alloc td.pay-on { color: #14783f; font-weight: 800; }
table.auto-alloc td.pay-off { color: #9aa7bd; }
table.auto-alloc tfoot td { font-weight: 800; }

.bill-col { grid-column: span 2; min-width: 0; }
.bill-col .field { margin-bottom: 2px; }
.bill-hint { font-size: .78rem; color: #6b7a95; margin: 0 0 10px; min-height: 1em; }
.fgrid.c3 .field.wide { grid-column: 1 / -1; }

.fgrid.pay-row4 { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, 1.6fr) minmax(0, 1.6fr); }
.fgrid.pay-row4.no-bill { grid-template-columns: minmax(0, .85fr) minmax(0, 1.6fr) minmax(0, 1.6fr); }
.fgrid.pay-row4 .bill-col { grid-column: auto; }
.fgrid.pay-row4 .field.wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .fgrid.pay-row4, .fgrid.pay-row4.no-bill { grid-template-columns: 1fr; } }

.modal.pay-wide { width: min(96vw, 940px); max-width: 940px; }

.fgrid.pay-row4 { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, 1.55fr) minmax(0, 1.55fr); }
.fgrid.pay-row4.no-bill { grid-template-columns: minmax(0, .8fr) minmax(0, 1.55fr) minmax(0, 1.55fr); }

.fsec .fgrid.pay-row4 { border-top: 1px dashed #dbe3f2; padding-top: 14px; margin-top: 2px; }

.fgrid.pay-row1 { grid-template-columns: minmax(0, .9fr) minmax(0, .75fr) minmax(0, 1.6fr); }
.fgrid.pay-row1.no-bill { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fgrid.pay-row1 .bill-col { grid-column: auto; }
.fgrid.pay-row4, .fgrid.pay-row4.no-bill { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); }
.fsec .fgrid.pay-row4 { border-top: 0; padding-top: 0; margin-top: 0; }
@media (max-width: 760px) { .fgrid.pay-row1, .fgrid.pay-row1.no-bill, .fgrid.pay-row4 { grid-template-columns: 1fr; } }

/* Sổ thu: dải tổng hợp gọn */
.mt-count { font-weight: 600; font-size: .9rem; color: #6b7a95; }
.mt-strip { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px 12px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(20, 33, 61, .06); }
.mt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mt-stat { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 3px solid #d5def0; }
.mt-stat-l { font-size: .78rem; font-weight: 700; color: #6b7a95; letter-spacing: .01em; }
.mt-stat-v { font-size: 1.45rem; color: #12203a; font-variant-numeric: tabular-nums; }
.mt-stat-v.ok { color: #14783f; }
.mt-stat-v.bad { color: #b42318; }
.mt-prog { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.mt-bar { flex: 1; height: 8px; border-radius: 999px; background: #e6ecf7; overflow: hidden; display: block; }
.mt-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 999px; }
.mt-prog-t { font-size: .8rem; font-weight: 700; color: #4b5b78; white-space: nowrap; }
.mt-stats6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1280px) { .mt-stats6 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } }
.mt-stat-btn { font: inherit; background: none; border-top: 0; border-right: 0; border-bottom: 0; text-align: left; cursor: pointer; flex-direction: row; align-items: center; gap: 12px; border-radius: 0 10px 10px 0; }
.mt-stat-btn:hover { background: #f5f8ff; }
.mt-stat-btn.on { background: #eaf1ff; box-shadow: 0 0 0 2px #3b82f6; }
.mt-stat.warn { border-left-color: #f0cc6a; }
.mt-stat.warn .mt-stat-ic { background: #fff1cc; color: #8a5a00; }
.mt-stat-v.warn { color: #8a5a00; }
.mt-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.mt-chip.bad { background: #fee2e2; color: #b42318; border-color: #f5b5b0; }
.mt-chip.warn { background: #fff1cc; color: #8a5a00; border-color: #f0cc6a; }
.mt-chip.zero { background: #f1f4fa; color: #8a97af; border-color: #dbe3f2; }
.mt-chip.info { background: #dcfce7; color: #14783f; border-color: #86d9a4; cursor: default; }
.mt-chip.on { box-shadow: 0 0 0 2px #3b82f6; }
@media (max-width: 760px) { .mt-stats { grid-template-columns: 1fr; } }

.mt-chip-host { display: inline-flex; }
.mt-chip-host .mt-chips { margin: 0; }
table.so-thu tbody tr.overdue > td { background: #fff1f0; }
table.so-thu tbody tr.overdue:hover > td { background: #ffe4e1; }

/* Sổ thu: bỏ sọc xen kẽ, nền trắng; quá hạn hồng, đã thu đủ xanh nhạt */
table.so-thu tbody tr > td { background: #fff; }
table.so-thu tbody tr:hover > td { background: #f4f8ff; }
table.so-thu tbody tr.paid > td { background: #eefaf1; }
table.so-thu tbody tr.paid:hover > td { background: #e0f5e6; }
table.so-thu tbody tr.overdue > td { background: #fff1f0; }
table.so-thu tbody tr.overdue:hover > td { background: #ffe4e1; }

/* Sổ thu: nhãn nền trắng + viền đậm để nổi trên dòng tô màu */
table.so-thu td .badge, table.so-thu td .bdg-btn { background: #fff; border: 1px solid #cbd5e1; box-shadow: 0 1px 1px rgba(15, 23, 42, .06); }
table.so-thu td .badge.clean, table.so-thu td .bdg-btn.ok { color: #166534; border-color: #4ade80; }
table.so-thu td .badge.cancelled, table.so-thu td .badge.maintenance { color: #b42318; border-color: #f87171; }
table.so-thu td .badge.created, table.so-thu td .bdg-btn.go { color: #1d4ed8; border-color: #93c5fd; }
table.so-thu td .badge.new-ci { color: #0e7490; border-color: #67e8f9; }
table.so-thu td .bdg-btn.warn { color: #8a5a00; border-color: #f0cc6a; background: #fffdf2; }
table.so-thu td .bdg-btn.ok:hover { background: #f0fdf4; }
table.so-thu td .bdg-btn.go:hover { background: #eff6ff; }
table.so-thu td .bdg-btn.warn:hover { background: #fff6d6; }


.mt-stat-l { display: flex; align-items: center; gap: 7px; }
.mt-stat-ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #e8f0ff; color: #1d4ed8; flex: none; }
.mt-stat.ok .mt-stat-ic { background: #dcfce7; color: #15803d; }
.mt-stat.bad .mt-stat-ic { background: #fee2e2; color: #b42318; }
.mt-stat.gray .mt-stat-ic { background: #eef1f6; color: #6b7a95; }
.mt-stat.blue { border-left-color: #93c5fd; }
.mt-stat.ok { border-left-color: #86d9a4; }
.mt-stat.bad { border-left-color: #f5b5b0; }

/* Sổ thu: icon to bên trái, nhãn + số tiền bên phải */
.mt-stat { flex-direction: row; align-items: center; gap: 14px; padding-left: 0; border-left: 0; }
.mt-stat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-stat-l { display: block; }
.mt-stat-ic { width: 52px; height: 52px; border-radius: 14px; flex: none; }

/* Sổ thu: tiêu đề nằm trong thanh công cụ, trước ô tháng */
.mt-title { margin: 0 6px 0 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: #12203a; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.mt-title::before { content: ""; width: 5px; height: 26px; border-radius: 4px; background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.page-head.mt-head { justify-content: flex-end; margin-bottom: 8px; }

.mt-fac { margin-left: auto; display: flex; align-items: center; }
.mt-fac .field { margin: 0; display: flex; align-items: center; gap: 8px; }
.mt-fac .field label { margin: 0; white-space: nowrap; }
.mt-fac select { min-width: 150px; }
/* trả lại vạch dọc bên trái mỗi số */
.mt-stat { border-left: 3px solid #d5def0; padding-left: 14px; }
.mt-stat.blue { border-left-color: #93c5fd; }
.mt-stat.ok { border-left-color: #86d9a4; }
.mt-stat.bad { border-left-color: #f5b5b0; }

/* Popup thông tin phòng: thẻ tóm tắt + nút theo nhóm */
.dt-hero { display: grid; grid-template-columns: 1.5fr 1.3fr 1.2fr; gap: 0; background: #fff; border: 1px solid #d5def0; border-radius: 14px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(20, 33, 61, .06); }
.dt-hero-col { padding: 14px 18px; display: flex; flex-direction: column; gap: 3px; min-width: 0; justify-content: center; }
.dt-hero-col + .dt-hero-col { border-left: 1px solid #e3e9f5; }
.dt-hero-cust { flex-direction: row; align-items: center; gap: 14px; }
.dt-hero-av { width: 46px; height: 46px; font-size: 1.2rem; flex: none; background: #3b82f6; color: #fff; }
.dt-hero-main { min-width: 0; }
.dt-hero-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.15rem; color: #12203a; }
.dt-hero-sub { font-size: .85rem; color: #6b7a95; }
.dt-hero-l { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7a95; }
.dt-hero-date { font-size: 1.1rem; color: #12203a; }
.dt-hero-money { gap: 8px; }
.dt-hero-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-left: 3px solid #d5def0; padding-left: 10px; }
.dt-hero-stat .dt-hero-l { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.dt-hero-v { font-size: 1.1rem; font-variant-numeric: tabular-nums; color: #12203a; }
.dt-hero-stat.red { border-left-color: #f5b5b0; } .dt-hero-stat.red .dt-hero-v { color: #b42318; }
.dt-hero-stat.green { border-left-color: #86d9a4; } .dt-hero-stat.green .dt-hero-v { color: #14783f; }
.dt-hero-stat.teal { border-left-color: #7dd3d0; }
.dt-hero-foot { grid-column: 1 / -1; padding: 8px 18px; border-top: 1px solid #e3e9f5; font-size: .78rem; background: #f8faff; border-radius: 0 0 14px 14px; }
.dt-actions { align-items: stretch; gap: 10px; }
.dt-act-group { display: flex; flex-direction: column; gap: 5px; padding: 7px 10px 8px; border: 1px solid #e3e9f5; border-radius: 12px; background: #fafcff; }
.dt-act-cap { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a97af; }
.dt-act-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-actions .dt-act-row .btn.danger { margin-left: 0; }
@media (max-width: 1000px) { .dt-hero { grid-template-columns: 1fr; } .dt-hero-col + .dt-hero-col { border-left: 0; border-top: 1px solid #e3e9f5; } }
.dt-act-row .btn { padding: 6px 11px; font-size: .86rem; }
.dt-actions { flex-wrap: nowrap; }
.dt-act-row { flex-wrap: nowrap; }
.dt-act-group { flex: 0 1 auto; }
@media (max-width: 1100px) { .dt-actions, .dt-act-row { flex-wrap: wrap; } }
.dt-act-row .btn { padding: 5px 9px; font-size: .82rem; white-space: nowrap; }
.dt-actions { flex-wrap: wrap; }
table.svc-tbl { min-width: 0; font-size: .88rem; }
table.svc-tbl tfoot td { font-weight: 800; }

.dt-tab { min-width: 0; }
.dt-tabs .dt-tab { flex: 1 1 0; }
table.svc-tbl td.ctr { text-align: center; }
table.svc-tbl td.note-col { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4b5b78; }

.bill-hint.bad { color: #b42318; font-weight: 700; }
label.cancel-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: #6b7a95; margin: 0 0 8px; cursor: pointer; }
.dt-subrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 6px; flex-wrap: wrap; }
.dt-subrow .dt-sub { margin: 0; }
.dt-subrow label.cancel-toggle { margin: 0; }

/* cột Thao tác: tiêu đề và nút cùng căn giữa */
th.ctr, td.ctr { text-align: center; }
td.ctr .btnrow, td.ctr > .btnrow { justify-content: center; }

.sect[hidden] { display: none !important; }

.dt-card .kv { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.dt-card .kv.kv4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kv .kv-total { color: #14783f; font-size: 1.1rem; font-weight: 800; }
@media (max-width: 900px) { .dt-card .kv.kv4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Popup đặt phòng: đồng bộ cỡ chữ và kiểu số */
.dt-panel td.money, .dt-panel td.num { font-size: .95rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.dt-panel td.num.total, .dt-panel td.money.total { font-size: .95rem; font-weight: 700; }
.dt-panel td.num.due { font-weight: 700; }
.dt-panel tfoot td.money, .dt-panel tfoot td.num { font-weight: 700; }
.dt-card .kv b, .dt-hero-v { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kv .kv-total { font-size: 1.05rem; font-weight: 700; }
/* Còn phải thu ở thẻ đầu popup: nổi bật */
.dt-hero-money { gap: 10px; }
.dt-hero-stat.red, .dt-hero-stat.green { padding: 9px 12px; border-radius: 10px; border: 1px solid; border-left-width: 4px; flex-direction: column; align-items: flex-start; gap: 2px; }
.dt-hero-stat.red { background: #fff1f0; border-color: #f5b5b0; border-left-color: #e5484d; }
.dt-hero-stat.green { background: #eefaf1; border-color: #bfe8cd; border-left-color: #22c55e; }
.dt-hero-stat.red .dt-hero-l, .dt-hero-stat.green .dt-hero-l { font-weight: 800; font-size: .82rem; }
.dt-hero-stat.red .dt-hero-v, .dt-hero-stat.green .dt-hero-v { font-size: 1.55rem; font-weight: 800; }
.dt-card .kv div b { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* thu nhỏ khung Còn phải thu */
.dt-hero-stat.red, .dt-hero-stat.green { padding: 6px 10px; border-left-width: 3px; gap: 0; }
.dt-hero-stat.red .dt-hero-l, .dt-hero-stat.green .dt-hero-l { font-size: .76rem; }
.dt-hero-stat.red .dt-hero-v, .dt-hero-stat.green .dt-hero-v { font-size: 1.25rem; }
.dt-hero-money { gap: 6px; }

/* Bảng kỳ thu trong popup: số dễ đọc, cùng cỡ chữ và độ đậm; 0 mờ; chỉ Còn lại > 0 màu đỏ */
table.period-tbl { min-width: 0; font-size: .92rem; }
table.period-tbl th, table.period-tbl td { padding: 11px 12px; }
table.period-tbl td.money, table.period-tbl td.num { font-size: .92rem; font-weight: 500; letter-spacing: .01em; color: #12203a; white-space: nowrap; }
table.period-tbl td.zero { color: #9aa7bd; font-weight: 400; }
table.period-tbl td.dash { color: #b4bfd2; font-weight: 400; }
table.period-tbl td.due { color: #b42318; font-weight: 700; }

/* bảng kỳ thu: cột Thao tác và nút nhỏ lại */
table.period-tbl td .btnrow.col .btn { padding: 3px 8px; font-size: .76rem; border-radius: 8px; }
table.period-tbl .badge { font-size: .74rem; white-space: nowrap; }
table.period-tbl th { font-size: .74rem; padding-left: 6px; padding-right: 6px; }
table.period-tbl th, table.period-tbl td { padding-left: 8px; padding-right: 8px; }
table.period-tbl td.money, table.period-tbl td.num { font-size: .86rem; }
table.period-tbl th, table.period-tbl td { padding-left: 5px; padding-right: 5px; }
table.period-tbl .badge { font-size: .7rem; padding: 2px 7px; }
table.period-tbl td .btnrow.col .btn { padding: 3px 6px; font-size: .72rem; }

/* Bảng kỳ thu: tiêu đề căn giữa cột; chữ nhỏ, đồng đều */
table.period-tbl th, table.period-tbl th.num, table.period-tbl th.ctr { text-align: center; font-size: .68rem; letter-spacing: .03em; }
table.period-tbl td, table.period-tbl td b { font-size: .78rem; }
table.period-tbl td.money, table.period-tbl td.num { font-size: .78rem; }
table.period-tbl td b { font-weight: 600; }
table.period-tbl .badge { font-size: .66rem; padding: 2px 8px; }
table.period-tbl td .btnrow.col .btn { font-size: .68rem; padding: 3px 7px; }
.badge.warn { background: #fff1cc; color: #8a5a00; border: 1px solid #f0cc6a; }
table.period-tbl td .badge.warn { background: #fff7dc; color: #8a5a00; border-color: #f0cc6a; }

/* Tab Thanh toán: bốn ô tóm tắt, icon trái - chữ phải */
.dt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.dt-stat { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e3e9f5; border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(20, 33, 61, .06); min-width: 0; }
.dt-stat-ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.dt-stat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dt-stat-l { font-size: .74rem; font-weight: 700; color: #6b7a95; letter-spacing: .02em; }
.dt-stat-v { font-size: 1.1rem; font-weight: 800; color: #12203a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-stat.blue { border-left: 4px solid #93c5fd; } .dt-stat.blue .dt-stat-ic { background: #e8f0ff; color: #1d4ed8; }
.dt-stat.green { border-left: 4px solid #86d9a4; } .dt-stat.green .dt-stat-ic { background: #dcfce7; color: #15803d; }
.dt-stat.amber { border-left: 4px solid #fcc27a; } .dt-stat.amber .dt-stat-ic { background: #ffedd5; color: #c2410c; }
.dt-stat.total { background: #eefaf1; border-color: #bfe8cd; border-left: 4px solid #22c55e; } .dt-stat.total .dt-stat-ic { background: #22c55e; color: #fff; } .dt-stat.total .dt-stat-v { color: #14783f; font-size: 1.2rem; }
@media (max-width: 1000px) { .dt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dt-hero-stat.warn { border-left-color: #f59e0b; }
.dt-hero-stat.warn .dt-hero-v { color: #c2410c; font-size: .95rem; }
.dt-hero-stat.warn { flex-direction: column; align-items: flex-start; gap: 0; }

.dt-stat.red { background: #fff1f1; border-color: #f5c2c2; border-left: 4px solid #ef4444; } .dt-stat.red .dt-stat-ic { background: #ef4444; color: #fff; } .dt-stat.red .dt-stat-v { color: #b42318; font-size: 1.2rem; }

.dt-card h4 .util-sw { margin-left: auto; font-size: .86rem; gap: 8px; }
.dt-card h4 .util-sw input { width: 38px; height: 22px; }
.dt-card h4 .util-sw input::after { width: 16px; height: 16px; }
.dt-card h4 .util-sw input:checked::after { transform: translateX(16px); }
.dt-card h4 .util-sw + .btn { margin-left: 4px; }
.dt-sub { font-size: .76rem; font-weight: 700; color: #6b7a95; letter-spacing: .02em; margin: 0 0 4px; }

/* tab Điện & Nước: 2 cột, cột trái (30%) là cài đặt và đơn giá, cột phải là hai bảng theo tháng */
.util-grid { display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: 14px; align-items: start; }
.util-grid > .dt-card { margin-bottom: 0; }
.util-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.util-right > .dt-card { margin-bottom: 0; }
.util-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.util-left > .dt-card { margin-bottom: 0; }
.kwh-note { font-size: .74rem; margin: 6px 0 0; }
.util-ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.util-ctl .util-sw { margin-left: 0; }
.util-grid .dt-mtotal { margin-top: 12px; flex-direction: column; align-items: flex-start; gap: 2px; }
@media (max-width: 860px) { .util-grid { grid-template-columns: minmax(0, 1fr); } }
.util-grid .dt-mtotal { font-size: .8rem; padding: 10px 12px; } .util-grid .dt-mtotal b { font-size: 1.1rem; }

.tbl-fixed.util-tbl { min-width: 0; font-size: .84rem; }
.tbl-fixed.util-tbl th, .tbl-fixed.util-tbl td { padding-left: 6px; padding-right: 6px; }
.tbl-fixed.util-tbl th { font-size: .72rem; }
.util-sub { font-size: .74rem; }

/* hộp nhập gọn: chữ, ô nhập và khoảng cách nhỏ lại; ô có span xếp lưới 6 cột */
.pd > .muted, .pd > p { margin: 0 0 8px; font-size: .84rem; }
.pd .field { margin-bottom: 8px; }
.pd .field label { font-size: .78rem; margin-bottom: 2px; }
.pd .field input, .pd .field select { padding: 6px 9px; font-size: .92rem; }
.pd-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 10px; }
.pd-grid .field { grid-column: span 6; min-width: 0; }
.pd-grid .field.s2 { grid-column: span 2; } .pd-grid .field.s3 { grid-column: span 3; } .pd-grid .field.s4 { grid-column: span 4; }
.pd-grid .field input, .pd-grid .field select { width: 100%; box-sizing: border-box; min-width: 0; } .pd-grid { column-gap: 12px; }

/* Bill theo mẫu của chủ hệ thống: logo cùng hàng với tiêu đề (Việt trên, Anh dưới), ghi chú 3 dòng chấm, chừa chỗ ký tên */
.modal.bill-modal { max-width: 700px; }
.bill { font-family: Arial, Helvetica, sans-serif; }
.bill-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 8px; }
.bill-head .bill-brand { justify-self: start; }
.bill-head .bill-code { justify-self: end; align-self: start; }
.bill-title { text-align: center; }
.bill-title h2 { margin: 0; font-size: 1.05rem; letter-spacing: .01em; }
.bill-en { font-weight: 700; font-size: .85em; }
.bill-title .bill-sub { margin: 2px 0 0; font-size: .9em; font-weight: 700; }
.bill-cust { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bill-addr { font-size: .9em; color: #333; }
.bill-intro p { margin: 0 0 3px; font-size: .92em; }
.bill-intro { margin: 6px 0 8px; }
.bill-table { width: 100%; border-collapse: collapse; border: 1.5px solid #1f3b73; }
.bill-table th, .bill-table td { border: 1px solid #1f3b73; padding: 3px 7px; }
.bill-table th { font-weight: 700; background: #fff; line-height: 1.2; }
.bill-table td.ctr, .bill-table th.ctr { text-align: center; }
.bill-table td.num { text-align: right; white-space: nowrap; }
.bill-table tr.blank td { height: 1.6em; }
.bill-table tfoot td { font-weight: 700; }
.bill-h { font-weight: 700; text-decoration: underline; margin: 0 0 3px; }
.bill-summary { margin: 10px 0 6px; }
.bill-sum { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.bill-sum.strong { border-top: 0; font-size: 1em; font-weight: 700; padding-top: 2px; }
.bill-sum.strong span { padding-left: 24px; }
.bill-bank { margin: 4px 0; font-size: .92em; }
.bill-notes { margin: 8px 0 0; }
.bill-line { min-height: 1.5em; border-bottom: 1px dotted #444; line-height: 1.5em; }
.bill-date { text-align: right; margin: 10px 0 0; font-size: .9em; }
.bill-sign { display: flex; justify-content: space-around; margin: 6px 0 0; padding-bottom: 54px; font-weight: 700; }
.bill-thanks { margin: 6px 0 0; font-size: .9em; }
.bill-staff { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.bill-stamp { display: flex; flex-direction: column; align-items: center; gap: 1px; font-weight: 400; }
.bill-stamp-b { display: inline-block; padding: 0 9px; border-radius: 999px; background: #dcfce7; color: #166534; border: 1px solid #86efac; font-size: .78em; font-weight: 700; line-height: 1.5; white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bill-stamp-t { font-size: .72em; color: #444; line-height: 1.3; white-space: nowrap; }
@media print { .bill-sign { padding-bottom: 36px; } .bill-line { min-height: 1.35em; line-height: 1.35em; } .bill-head .bill-logo { height: 30px; } }
.bill-table { table-layout: fixed; } .bill-table th:nth-child(1), .bill-table td:nth-child(1) { width: 9%; } .bill-table th:nth-child(2), .bill-table td:nth-child(2) { width: 22%; } .bill-table th:nth-child(4), .bill-table td:nth-child(4) { width: 21%; } .bill-table tfoot td:nth-child(1) { width: auto; }

.bill-sum.strong span { padding-left: 0; }
.bill-date { text-align: right; margin: 0; padding-top: 6px; border-top: 1px solid #ccc; }
.bill-sign { padding-bottom: 54px; }

.bill-subtext { display: block; font-size: .82em; color: #444; }

/* Bản in bill: hai bản cạnh nhau vừa khít một tờ A4 ngang (vùng in 281 x 194 mm), giữa có đường chấm dọc để cắt đôi */
.print-sheet { display: grid; grid-template-columns: 1fr 10mm 1fr; gap: 0; width: 281mm; height: 193mm; overflow: hidden; }
.print-sheet .print-cut { border-left: 1.5px dotted #555; margin-left: 5mm; width: 0; }
.print-sheet .bill { height: 193mm; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; font-size: 11.5px; padding: 5mm 6mm; }
.print-sheet .bill-head { margin-bottom: 0; }
.print-sheet .bill-head .bill-logo { height: 34px; }
.print-sheet .bill-title h2 { font-size: 1.25rem; }
.print-sheet .bill-intro { margin: 0; }
.print-sheet .bill-table th, .print-sheet .bill-table td { padding: 5px 7px; }
.print-sheet .bill-summary, .print-sheet .bill-notes { margin: 0; }
.print-sheet .bill-sum { padding: 2px 0; }
.print-sheet .bill-line { min-height: 1.9em; line-height: 1.9em; }
.print-sheet .bill-sign { margin: 0; padding-bottom: 14mm; }
.print-sheet .bill-date { padding-top: 5px; }
.print-sheet .bill-code { font-size: .68rem; white-space: nowrap; }
.bill-sign { justify-content: space-between; padding-left: 9%; padding-right: 9%; } .print-sheet .bill-sign { padding-left: 9%; padding-right: 9%; }

.print-sheet .bill-sign { padding-bottom: 12mm; }
.print-sheet .bill-line { min-height: 1.7em; line-height: 1.7em; }
.print-sheet .bill-table th, .print-sheet .bill-table td { padding: 4px 6px; }

.print-sheet .bill-title h2 { font-size: 1.35em; }
.print-sheet .bill-table th { font-size: 1em; }
.print-sheet .bill-code { font-size: .75em; }

/* Menu chọn ngôn ngữ khi in bill */
.print-menu { position: fixed; z-index: 100000; min-width: 130px; background: #fff; border: 1px solid #cdd7ea; border-radius: 10px; box-shadow: 0 8px 24px rgba(20, 33, 61, .2); padding: 4px; display: flex; flex-direction: column; }
.print-menu button { border: 0; background: transparent; text-align: left; padding: 8px 12px; border-radius: 7px; font: inherit; font-size: .9rem; cursor: pointer; color: #12203a; }
.print-menu button:hover { background: #e8f0ff; color: #1d4ed8; }

.btn.ic { display: inline-flex; align-items: center; gap: 5px; }
.btn.ic svg { flex: none; }
.print-menu button { display: flex; align-items: center; gap: 8px; }
.flag-ic { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); flex: none; }

.lock-ok { display: inline-flex; color: #16a34a; vertical-align: middle; margin-left: 10px; }

.lock-ok { margin-left: 12px; }
.tbl-fixed.bill-tbl { min-width: 0; }
.tbl-fixed.bill-tbl td { padding-left: 6px; padding-right: 6px; }
.tbl-fixed.bill-tbl .badge { font-size: .74rem; white-space: nowrap; }

/* Tab Bill tháng: Danh sách bill đã in (70%) và Bill checkout (30%) trên cùng một hàng */
.bill-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 14px; align-items: start; }
.bill-pair > .dt-card { margin-bottom: 0; min-width: 0; }
.bill-pair .btnrow.col { flex-direction: column; align-items: stretch; gap: 8px; }
@media (max-width: 860px) { .bill-pair { grid-template-columns: minmax(0, 1fr); } }

.co-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.co-btns { display: flex; flex-direction: column; gap: 8px; }
.co-btns .btn.primary { width: 100%; justify-content: center; }
.co-btns .btnrow { display: flex; gap: 8px; }
.co-btns .btnrow .btn { flex: 1; justify-content: center; }

.tbl-fixed.bill-tbl td.muted .util-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-fixed.bill-tbl td b { font-size: .84rem; }

.co-fees { margin-top: 10px; }
.co-fee { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dashed #e1e8f5; font-size: .84rem; }
.co-fee-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bill-fees { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 10px; font-size: .86rem; }
.bill-fees-l { font-weight: 700; color: #425273; }
.bill-fee-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid #cdd7ea; border-radius: 999px; background: #f4f7fd; }
.bill-fee-t { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dep-lines > summary { cursor: pointer; list-style: none; padding: 2px 0; }
.dep-lines > summary::-webkit-details-marker { display: none; }
.dep-lines > summary::before { content: '▸ '; color: #6b7a95; }
.dep-lines[open] > summary::before { content: '▾ '; }
.dep-lines tr.toggle { cursor: pointer; }
.dep-lines tr.child td { background: #f7f9fd; font-size: .86rem; }

.dt-v.good { color: #15803d; font-weight: 800; }
.dt-v.bad { color: #b42318; font-weight: 800; }
.co-fees .btn { margin-top: 8px; }
.dt-tabs .dt-tab { padding: 10px 6px; font-size: .86rem; gap: 6px; white-space: nowrap; } .dt-tabs .dt-tab svg { width: 16px; height: 16px; flex: none; }

/* Tab Check-out: phép tính Cọc - Nợ - Chi phí = Hoàn; hai khung Bill checkout và Chốt trả phòng cùng hàng */
.co-eq { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr); gap: 10px; align-items: stretch; margin-bottom: 12px; }
.co-op { align-self: center; font-size: 1.6rem; font-weight: 800; color: #6b7a95; }
.co-eq .dt-stat { padding: 10px 12px; }
.co-eq .dt-stat-v { font-size: 1.05rem; }
.co-eq .dt-stat.total .dt-stat-v, .co-eq .dt-stat.red .dt-stat-v { font-size: 1.25rem; }
.dt-stat-n { font-size: .72rem; color: #6b7a95; }
.co-break { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; font-size: .86rem; }
.co-break-l { font-weight: 700; color: #425273; }
.co-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 10px; border: 1px solid #cdd7ea; border-radius: 999px; background: #f4f7fd; }
.co-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.co-pair > .dt-card { margin-bottom: 0; }
@media (max-width: 860px) { .co-eq { grid-template-columns: minmax(0, 1fr); } .co-op { display: none; } .co-pair { grid-template-columns: minmax(0, 1fr); } }
.co-eq .dt-stat { flex-direction: column; align-items: flex-start; gap: 6px; } .co-eq .dt-stat-ic { width: 30px; height: 30px; border-radius: 9px; } .co-eq .dt-stat-ic svg { width: 18px; height: 18px; }
.co-fees { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; } .co-fees .dt-sub { margin: 0; } .co-fees p { margin: 0; } .co-fees .btn { margin-top: 0; } .co-fees .co-fee { flex: 0 1 auto; border-bottom: 0; gap: 8px; padding: 3px 4px 3px 10px; border: 1px solid #cdd7ea; border-radius: 999px; background: #f4f7fd; }

/* Tab Check-out: bảng tính dạng dòng, dòng chính đậm, dòng con thụt vào, dòng kết quả nổi bật */
.co-tbl { display: flex; flex-direction: column; }
.co-r { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px dashed #e1e8f5; }
.co-r .co-k { flex: 1; min-width: 0; }
.co-r .co-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-r.main { font-size: 1.02rem; font-weight: 700; color: #12203a; }
.co-r.minus .co-k { color: #b45309; }
.co-r.sub { padding-left: 30px; font-size: .92rem; color: #425273; }
.co-r.sub .co-v { font-weight: 600; }
.co-r.sub2 { padding-left: 52px; font-size: .86rem; color: #5b6b88; }
.co-r.total { margin-top: 8px; border: 1px solid #bfe8cd; border-radius: 12px; background: #eefaf1; padding: 13px 16px; font-size: 1.12rem; font-weight: 800; color: #14783f; }
.co-r.total.owe { border-color: #f5c2c2; background: #fff1f1; color: #b42318; }
.co-r.total .co-v { font-size: 1.3rem; }
.co-main { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 14px; align-items: start; }
.co-main > .dt-card { margin-bottom: 0; }
.co-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.co-side > .dt-card { margin-bottom: 0; }
.co-side .btnrow { flex-wrap: wrap; }
@media (max-width: 860px) { .co-main { grid-template-columns: minmax(0, 1fr); } }
.co-locked { display: inline-flex; align-items: center; gap: 6px; color: #15803d; font-weight: 800; padding: 0 6px; } .co-locked svg { flex: none; }
.modal.bill-modal footer { flex-wrap: nowrap; gap: 6px; } .modal.bill-modal footer .btn { padding: 8px 11px; font-size: .88rem; white-space: nowrap; } .modal.bill-modal footer .btn svg { width: 15px; height: 15px; }
.modal.bill-modal header { justify-content: flex-start; gap: 12px; } .modal.bill-modal header button { margin-left: auto; }
.dt-card h4 .co-locked { margin-left: auto; padding: 0; }
.btn.red-solid { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; border-color: #b91c1c; box-shadow: 0 3px 8px rgba(185, 28, 28, .35); font-weight: 700; }
.btn.red-solid:hover:not(:disabled) { filter: brightness(1.06); }
.btn.red-solid:disabled { opacity: .5; box-shadow: none; }

/* Xem bill thu nhỏ có kính lúp + và − */
.bz { border: 1px solid #cdd7ea; border-radius: 12px; background: #eef2f9; margin-bottom: 12px; overflow: hidden; }
.bz-bar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff; border-bottom: 1px solid #dde5f3; }
.bz-t { flex: 1; font-weight: 700; font-size: .86rem; color: #12203a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-pct { min-width: 42px; text-align: center; font-size: .82rem; font-variant-numeric: tabular-nums; color: #425273; }
.bz-wrap { max-height: 360px; overflow: auto; padding: 10px; }
.bz-sizer { position: relative; margin: 0 auto; }
.bz-inner { position: absolute; left: 0; top: 0; }
.sd-sum { font-size: .86rem; margin: 0 0 8px; }
.sd-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sd-res { font-size: 1.15rem; font-weight: 800; color: #14783f; }
.sd-res.owe { color: #b42318; }
.sd-row .field.sd-method { margin: 0; min-width: 190px; }
.sd-row .field.sd-method label { font-size: .76rem; margin-bottom: 2px; }
.sd-row .field.sd-method select { padding: 6px 9px; }
.sd-row { align-items: flex-start; } .sd-left { flex: 1; min-width: 0; } .sd-note { margin: 4px 0 0; font-size: .88rem; }
.modal.sd-modal { max-width: 520px; }
.sd-res { white-space: nowrap; font-size: 1.02rem; } .modal.sd-modal .sd-row .field.sd-method { min-width: 160px; }

/* Toàn site: mọi tiêu đề (popup, khung, mục) có thanh dọc xanh phía trước để dễ phân biệt */
.modal header h3, .card.pad > h3, .card > h3, .sect > h3, .dcard h3 { display: flex; align-items: center; gap: 9px; }
.modal header h3::before, .card.pad > h3::before, .card > h3::before, .sect > h3::before, .dcard h3::before {
  content: ""; flex: none; width: 4px; height: 1.15em; border-radius: 3px; background: linear-gradient(180deg, #3b82f6, #1d4ed8);
}

/* Hộp Check-out: chữ nhỏ lại cho cân đối */
.modal.sd-modal header h3 { font-size: 1rem; }
.modal.sd-modal .bz-t { font-size: .78rem; }
.modal.sd-modal .bz-bar .btn { padding: 3px 8px; font-size: .78rem; }
.modal.sd-modal .bz-pct { font-size: .76rem; min-width: 36px; }
.modal.sd-modal .sd-res { font-size: .92rem; }
.modal.sd-modal .sd-note { font-size: .76rem; line-height: 1.35; }
.modal.sd-modal .sd-row .field.sd-method label { font-size: .72rem; }
.modal.sd-modal .sd-row .field.sd-method select { font-size: .84rem; padding: 5px 8px; }
.modal.sd-modal footer .btn { padding: 7px 14px; font-size: .86rem; }

/* Quy tắc rộng hơn: mọi h3 trong vùng chính và popup (trừ các khung có icon riêng) */
#main h3, .modal h3 { display: flex; align-items: center; gap: 9px; }
#main h3::before, .modal h3::before { content: ""; flex: none; width: 4px; height: 1.15em; border-radius: 3px; background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.dt-card h3::before, .set-nav h3::before { display: none; }

/* Hộp Chỉnh bill: hai cột nhập (số tiền, nội dung hiện trên bill) */
.adj-modal { max-width: 780px; width: calc(100vw - 32px); }
.adj-grid { display: grid; grid-template-columns: 130px 150px 1fr; gap: 8px 10px; align-items: center; margin-bottom: 12px; }
.adj-h { font-size: 12px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .02em; }
.adj-l { display: flex; flex-direction: column; line-height: 1.25; }
.adj-l .muted { font-size: 12px; }
.adj-grid input { width: 100%; min-width: 0; }
.adj-grid2 { grid-template-columns: 150px 1fr; margin-bottom: 8px; }
.util-amt { white-space: nowrap; }
.dt-rent .dt-row:last-child { border-bottom: 1px dashed #e1e8f5; }
.dt-h-acts { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.dt-card h4:has(.dt-h-acts) { flex-wrap: wrap; row-gap: 6px; }
.dt-card h4:has(.dt-h-acts) .dt-h-t { flex: 0 0 auto; white-space: nowrap; }
.dt-card h4:has(.dt-h-acts) .dt-h-acts { flex: 1 1 auto; }
.rentsched { background: #f6f9ff; border: 1px solid #dbe5f7; border-radius: 10px; padding: 8px 12px; font-size: .88rem; }
.rentsched .rs-row { display: flex; justify-content: space-between; padding: 2px 0; }
.rentsched .muted { margin-top: 4px; font-size: .78rem; }
.dt-card h4 .dt-h-acts .btn { margin-left: 0; }
.util-adj { color: #b45309; font-weight: 700; cursor: help; }
.util-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 500; color: #64748b; white-space: nowrap; }
.util-legend-sw { width: 10px; height: 10px; border-radius: 3px; background: #b45309; display: inline-block; }
@media (max-width: 700px) { .adj-grid { grid-template-columns: 1fr; } .adj-h { display: none; } }

/* Nhãn loại thuê cạnh tiêu đề popup đặt phòng */
.kind-badge { display: inline-block; margin-left: 12px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: middle; border: 1px solid transparent; }
.kind-badge.month { color: #1d4ed8; background: #e0ebff; border-color: #bcd2fb; }
.kind-badge.night { color: #b45309; background: #fef3c7; border-color: #f5d38a; }
.kind-badge.other { color: #6d28d9; background: #ede9fe; border-color: #d4c7f8; }
.modal header .kind-badge { margin-right: auto; }

/* Ô tiền đầu popup khi đã check-out */
.dt-hero-stat.green.co-hero-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.co-hero-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; text-align: left; }
.co-hero-btn { white-space: nowrap; flex: none; }
.co-hero-txt .dt-hero-v { font-size: 1.1rem; white-space: nowrap; }

/* Cảnh báo trả sớm trong ô Thời gian ở */
.dt-early { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #b45309; background: #fef3c7; border: 1px solid #f5d38a; width: fit-content; }

/* Danh sách khách ở */

/* Hộp nhập danh sách khách ở: 6 cột + nút xóa hàng */
.occ-modal { max-width: 980px; width: calc(100vw - 32px); }
.occ-grid { display: grid; grid-template-columns: 34px 1.5fr 1.1fr 1fr 1fr 1.3fr 28px; gap: 8px 8px; align-items: center; margin-bottom: 10px; }
.occ-grid input { width: 100%; min-width: 0; }
.occ-bar { display: flex; align-items: center; gap: 12px; }
@media (max-width: 760px) { .occ-grid { grid-template-columns: 1fr; } .occ-grid .adj-h { display: none; } }
.fsec h4 .sec-tag { font-weight: 600; font-size: .85em; color: var(--muted, #64748b); margin-left: 2px; }

/* Màu nút ở chân popup đặt phòng theo chức năng */
.dt-actions .btn.c-money { background: linear-gradient(135deg, #22c55e, #15803d); border-color: #15803d; color: #fff; }
.dt-actions .btn.c-money-o { background: #f0fdf4; border-color: #86d9a4; color: #166534; }
.dt-actions .btn.c-checkin { background: linear-gradient(135deg, #3b82f6, #1d4ed8); border-color: #1d4ed8; color: #fff; }
.dt-actions .btn.c-checkout { background: linear-gradient(135deg, #ef4444, #b91c1c); border-color: #b91c1c; color: #fff; }
.dt-actions .btn.c-undo { background: #fff7ed; border-color: #f5b27a; color: #c2410c; }
.dt-actions .btn.c-move { background: #eef2ff; border-color: #a5b4fc; color: #4338ca; }
.dt-actions .btn.c-contract { background: #f5f3ff; border-color: #c4b5fd; color: #6d28d9; }
.dt-actions .btn.c-link { background: #ecfeff; border-color: #67e8f9; color: #0e7490; }
.dt-actions .btn.c-hist { background: #f8fafc; border-color: #cbd5e1; color: #475569; }
.dt-actions .btn.c-edit { background: #eff6ff; border-color: #bfd4f6; color: #1e40af; }
.dt-actions .btn.c-link .lucide, .dt-actions .btn.c-link svg { margin-right: 2px; vertical-align: -2px; }
.dt-actions .btn:disabled { filter: grayscale(.35); }
.set-links { margin-top: 18px; padding-top: 12px; border-top: 1px solid #e3e9f4; }

/* Popup Lịch sử: mỗi sự kiện là một thẻ gọn, bảng Trước/Sau nhỏ và thẳng cột */
.hist { border: 1px solid #dfe6f3; border-left: 4px solid #8fb0ee; border-radius: 10px; padding: 10px 14px; margin: 10px 0; background: #fff; }
.hist.attn { border-left-color: #f0a24b; }
.hist-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .85rem; color: #64748b; }
.hist-time { color: #0f172a; }
.hist-who::before { content: '·'; margin-right: 8px; color: #94a3b8; }
.hist-desc { margin-top: 4px; font-weight: 600; color: #1e293b; line-height: 1.35; }
.hist-reason { margin-top: 2px; font-size: .85rem; color: #64748b; }
.hist table.diff { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 8px 0 0; font-size: .82rem; border: 1px solid #e3e9f4; border-radius: 8px; overflow: hidden; }
.hist table.diff th { background: #f3f6fc; color: #64748b; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; padding: 5px 10px; text-align: left; }
.hist table.diff th:first-child, .hist table.diff td.diff-k { width: 34%; }
.hist table.diff td { padding: 5px 10px; border-top: 1px solid #edf1f8; word-break: break-word; vertical-align: top; }
.hist table.diff td.diff-k { color: #475569; font-weight: 600; }
.hist table.diff td.diff-before { background: #fff7f6; color: #7f1d1d; }
.hist table.diff td.diff-after { background: #f1fbf4; color: #14532d; }
.hist table.diff td.diff-empty { color: #94a3b8; font-style: italic; }

/* Lịch sử: mỗi sự kiện 2 dòng, chi tiết sổ xuống khi bấm Xem thêm */
.hist { padding: 8px 14px; margin: 8px 0; }
.hist-head { gap: 8px; }
.hist-desc { margin-top: 2px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-tog { margin-left: auto; border: 0; background: none; color: #1d4ed8; font-size: .8rem; font-weight: 600; cursor: pointer; padding: 0 2px; }
.hist-tog:hover { text-decoration: underline; }
.hist-more { margin-top: 6px; }
.hist-more[hidden] { display: none; }

/* Lịch sử: thanh lọc (dính ở đầu popup) */
.hist-filter { position: sticky; top: -1px; z-index: 2; display: flex; gap: 8px; align-items: center; padding: 6px 0 8px; background: #fff; border-bottom: 1px solid #edf1f8; }
.hist-filter .hist-q { flex: 1 1 auto; min-width: 0; }
.hist-filter select { flex: none; width: auto; }
.hist-count { flex: none; font-size: .8rem; white-space: nowrap; }

.hist-filter { flex-direction: column; align-items: stretch; gap: 6px; }
.hist-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hist-row input[type=date], .hist-row select { flex: none; width: auto; max-width: 100%; }
.hist-row .hist-q { flex: 1 1 160px; }

/* Nhật ký đối tượng: thanh lọc gọn, ô có chiều rộng cố định để hai hàng đều nhau */
.hist-filter .hist-row { gap: 8px; flex-wrap: nowrap; }
.hist-filter .hist-row .hist-q { flex: 1 1 auto; min-width: 0; width: auto; }
.hist-filter .hist-row select { flex: none; width: 140px; }
.hist-filter .hist-row input[type=date] { flex: none; width: 140px; }
.hist-filter .hist-row .hist-count { margin-left: auto; }
.hist-filter .hist-row.r2 .spacer { flex: 1 1 auto; }
@media (max-width: 640px) { .hist-filter .hist-row { flex-wrap: wrap; } .hist-filter .hist-row select, .hist-filter .hist-row input[type=date] { flex: 1 1 130px; } }
.hist-filter input, .hist-filter select { height: 34px; padding-top: 4px; padding-bottom: 4px; font-size: .9rem; }
.hist-filter .btn { height: 34px; padding-top: 0; padding-bottom: 0; }
.hist-filter input, .hist-filter select { min-height: 34px; height: 34px; }

/* Nhật ký đối tượng: cả thanh lọc trên MỘT dòng */
.hist-filter .hist-row { flex-wrap: nowrap; gap: 6px; }
.hist-filter .hist-row .hist-q { flex: 1 1 110px; min-width: 90px; }
.hist-filter .hist-row select { width: 112px; padding-left: 8px; padding-right: 22px; }
.hist-filter .hist-row input[type=date] { width: 132px; padding-left: 6px; padding-right: 4px; font-size: .85rem; }
.hist-filter .hist-row .btn { flex: none; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.hist-filter .hist-row .hist-count { margin-left: 4px; font-size: .75rem; }
@media (max-width: 760px) { .hist-filter .hist-row { flex-wrap: wrap; } .hist-filter .hist-row .hist-q { flex: 1 1 100%; } }
.modal.hist-modal { max-width: 1040px; width: calc(100vw - 32px); }

/* ===== Điện thoại / iPad dọc: chân popup đặt phòng KHÔNG dính đáy nữa (chiếm quá nhiều màn hình), nằm cuối nội dung ===== */
@media (max-width: 860px) {
  .dt-actions { position: static; margin: 14px 0 0; padding: 10px 0 0; box-shadow: none; border-top: 1px solid #cfd9ec; background: transparent; }
  .dt-actions .dt-act-group { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .dt-actions .dt-act-row { flex-wrap: wrap; }
  .dt-actions .btn { min-height: 38px; }
}
@media (max-width: 560px) {
  .dt-actions .dt-act-group { flex: 1 1 100%; }
  .dt-actions .btn { min-height: 42px; font-size: .9rem; }
}

/* Danh sách khách ở (popup và form): mỗi khách một hàng; trên điện thoại mỗi khách là một thẻ nhỏ gọn */
.occ-grid { display: block; margin-bottom: 10px; }
.occ-row { display: grid; grid-template-columns: 34px 1.5fr 1.1fr 1fr 1fr 1.3fr 28px; gap: 8px; align-items: center; margin-bottom: 8px; }
.occ-row .ctr { text-align: center; }
@media (max-width: 760px) {
  .occ-head { display: none; }
  .occ-row:not(.occ-head) { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; padding-top: 30px; border: 1px solid #dfe6f3; border-radius: 12px; background: #fbfcff; position: relative; }
  .occ-row:not(.occ-head) > .ctr { position: absolute; top: 8px; left: 12px; text-align: left; font-weight: 800; color: #64748b; }
  .occ-row:not(.occ-head) > .ctr::before { content: 'Khách '; font-weight: 600; }
  .occ-row:not(.occ-head) > input:nth-of-type(1) { grid-column: 1 / -1; }
  .occ-row:not(.occ-head) > .icon-del { position: absolute; top: 4px; right: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Nhật ký đối tượng trên điện thoại: thanh lọc xếp lưới 2 cột, nút Xem thêm dễ bấm */
@media (max-width: 700px) {
  .hist-filter .hist-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .hist-filter .hist-row .hist-q { grid-column: 1 / -1; width: 100%; }
  .hist-filter .hist-row select, .hist-filter .hist-row input[type=date] { width: 100%; }
  .hist-filter .hist-row .hist-count { margin-left: 0; text-align: right; align-self: center; }
  .hist-tog { padding: 8px 6px; }
  .modal.hist-modal { max-width: calc(100vw - 16px); }
}
@media (pointer: coarse) { .icon-edit { min-width: 34px; min-height: 34px; } }

/* ===== iPad dọc (561-1000px): ô tóm tắt 2 cột (khách trên cả hàng; thời gian ở và tiền cạnh nhau), hai khung thông tin cạnh nhau ===== */
@media (min-width: 561px) and (max-width: 1000px) {
  .dt-hero { grid-template-columns: 1fr 1fr; }
  .dt-hero > .dt-hero-cust { grid-column: 1 / -1; }
  .dt-hero > .dt-hero-col:nth-child(2) { border-top: 1px solid #e3e9f5; border-left: 0; }
  .dt-hero > .dt-hero-money { border-top: 1px solid #e3e9f5; border-left: 1px solid #e3e9f5; }
  .dt-hero > .dt-hero-foot { grid-column: 1 / -1; }
  .dt-grid2 { grid-template-columns: 1fr 1fr; }
}

/* Tab trong popup chi tiết trên iPad/điện thoại: bỏ biểu tượng để chữ đủ chỗ */
@media (min-width: 561px) and (max-width: 900px) { .dt-tabs .dt-tab svg { display: none; } .dt-tabs .dt-tab { padding: 10px 4px; font-size: .82rem; } }

/* Bảng khách ở: nhãn "Người đặt phòng" nằm trong ô tên, dưới tên khi hẹp; điện thoại hiện từng khách là một thẻ */
.guest-badge { display: block; width: fit-content; margin: 3px 0 0; }
.guest-tbl td { vertical-align: middle; }
@media (max-width: 560px) {
  .guest-tbl, .guest-tbl tbody, .guest-tbl tr, .guest-tbl td { display: block; width: 100% !important; }
  .guest-tbl thead, .guest-tbl colgroup { display: none; }
  .guest-tbl { table-layout: auto; }
  .guest-tbl tr { border: 1px solid #dfe6f3; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; background: #fbfcff; }
  .guest-tbl td { border: 0; padding: 2px 0; text-align: left !important; }
  .guest-tbl td[data-l]::before { content: attr(data-l) ': '; color: #64748b; font-size: .8rem; }
  .guest-tbl td[data-l="STT"] { font-weight: 800; }
  .guest-tbl td[data-l="STT"]::before { content: 'Khách '; font-weight: 600; }
  .guest-tbl td[colspan] { color: #94a3b8; }
}
/* Khung Danh sách khách ở trên điện thoại: tiêu đề một dòng, nút xuống dòng dưới; thẻ khách không tràn */
@media (max-width: 560px) {
  .dt-card h4:has(.guest-edit) { flex-wrap: wrap; row-gap: 8px; }
  .dt-card h4:has(.guest-edit) .dt-h-t { flex: 1 1 60%; min-width: 0; }
  .dt-card h4 .guest-edit { margin-left: 0; width: 100%; justify-content: center; }
  .guest-tbl, .guest-tbl tbody, .guest-tbl tr, .guest-tbl td { box-sizing: border-box; }
  .tablewrap:has(.guest-tbl) { overflow-x: visible; }
}
@media (max-width: 560px) { .guest-tbl { min-width: 0 !important; width: 100% !important; } }

/* ===== Điện thoại: bảng từ 5 cột trở lên thành danh sách thẻ (mỗi dòng một thẻ, mỗi ô có nhãn cột) ===== */
@media (max-width: 640px) {
  .tablewrap:has(table.as-cards) { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  table.as-cards, table.as-cards tbody, table.as-cards tfoot { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto; border: 0; }
  table.as-cards thead, table.as-cards colgroup { display: none; }
  table.as-cards tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 10px 12px; margin: 0 0 10px; border: 1px solid #dfe6f3 !important; border-radius: 12px; background: #fff !important; box-shadow: 0 1px 2px rgba(20, 33, 61, .05); }
  table.as-cards td { display: block; padding: 0 !important; border: 0 !important; text-align: left !important; min-width: 0; white-space: normal !important; overflow-wrap: anywhere; background: transparent !important; width: auto !important; }
  table.as-cards td[data-l]:not([data-l=""])::before { content: attr(data-l); display: block; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7b8aa5; margin-bottom: 1px; }
  table.as-cards td:first-child { grid-column: 1 / -1; font-size: 1rem; font-weight: 700; }
  table.as-cards td:first-child::before { display: inline !important; margin-right: 6px; }
  table.as-cards td[data-l="Thao tác"], table.as-cards td[data-l="Ghi chú"], table.as-cards td[colspan], table.as-cards td.note-col { grid-column: 1 / -1; }
  table.as-cards td:empty { display: none; }
  table.as-cards td .btnrow, table.as-cards td .btnrow.col { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  table.as-cards tr.click:active { background: #eef4ff !important; }
  /* ô tổng hợp ở đầu tab Thanh toán: mỗi thẻ một hàng, gọn */
  .dt-stats { grid-template-columns: 1fr !important; gap: 8px; }
  .dt-stat { padding: 8px 12px; }
}
@media (max-width: 640px) { table.as-cards td.zero, table.as-cards td.dash { display: none; } }
@media (max-width: 640px) { table.as-cards td .adj-mark { margin: 3px 0 0; } }
@media (max-width: 640px) {
  table.as-cards td .badge { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
  table.as-cards td[data-l="Tình trạng"], table.as-cards td[data-l="Trạng thái"] { grid-column: 1 / -1; }
}

/* ===== Màn hình THẤP (điện thoại xoay ngang, cửa sổ nhỏ): chân popup không dính đáy, thanh tab và ô tóm tắt gọn lại ===== */
@media (max-height: 640px) {
  .dt-actions { position: static; margin: 12px 0 0; padding: 10px 0 0; box-shadow: none; border-top: 1px solid #cfd9ec; background: transparent; }
  .dt-actions .dt-act-group { flex: 1 1 auto; min-width: 0; }
  .dt-actions .dt-act-row { flex-wrap: wrap; }
  .dt-tabs { top: 0; padding: 3px; margin-bottom: 10px; border-radius: 10px; }
  .dt-tabs .dt-tab { padding: 6px 4px; }
  .dt-hero-col { padding: 8px 14px; }
  .modal header { padding: 8px 16px; }
  .modal header h3 { font-size: 1rem; }
}

/* ===== Thanh nút chân popup đặt phòng: từ 561px trở lên LUÔN một hàng; chữ và nút tự thu nhỏ theo bề rộng popup (container query) ===== */
@media (min-width: 561px) {
  .dt-actions { container-type: inline-size; flex-wrap: nowrap; gap: .5rem; }
  .dt-actions .dt-act-group { flex: 0 1 auto; min-width: 0; font-size: clamp(.6rem, 1.38cqi, .84rem); padding: .45em .6em .5em; gap: .3em; }
  .dt-actions .dt-act-row { flex-wrap: nowrap; gap: .4em; }
  .dt-actions .btn { font-size: 1em; padding: .4em .62em; min-height: 0; white-space: nowrap; border-radius: .7em; }
  .dt-actions .dt-act-cap { font-size: .78em; }
  .dt-actions .btn svg { width: 1em; height: 1em; }
}

/* nhãn dài / ngắn của nút ở chân popup: popup hẹp (dưới 820px) dùng nhãn ngắn để vừa một hàng */
.dt-actions .btn .sh, .dt-actions .btn.c-contract .ct-short { display: none; }
@container (max-width: 1060px) {
  .dt-actions .btn .lg, .dt-actions .btn.c-contract .ct-long { display: none; }
  .dt-actions .btn .sh, .dt-actions .btn.c-contract .ct-short { display: inline; }
}
@media (min-width: 561px) and (max-width: 900px) { .dt-tabs .dt-tab { font-size: .76rem; padding-left: 2px; padding-right: 2px; } }
/* 561-660px (điện thoại ngang hẹp): một hàng không đủ chỗ cho chữ đọc được, nên cho phép xuống hàng theo nhóm */
@media (min-width: 561px) and (max-width: 660px) {
  .dt-actions { flex-wrap: wrap; }
  .dt-actions .dt-act-group { flex: 1 1 calc(50% - 8px); font-size: .8rem; }
  .dt-actions .dt-act-row { flex-wrap: wrap; }
}


/* Màu theo ý nghĩa: đỏ = nợ/quá hạn, cam = khách trả dư, vàng = chưa chốt, tím = tiền chi ra (hoàn cọc) */
.mt-stat.orange { border-left-color: #fdba74; }
.mt-stat.orange .mt-stat-ic { background: #ffedd5; color: #c2410c; }
.mt-stat-v.orange { color: #c2410c; }
.mt-stat.purple { border-left-color: #c4b5fd; }
.mt-stat.purple .mt-stat-ic { background: #ede9fe; color: #6d28d9; }
.mt-stat-v.purple { color: #6d28d9; }
.kpi-more { border: 0; background: rgba(255,255,255,.65); color: #c2410c; font-weight: 600; font-size: .78rem; padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; margin-left: auto; }
.kpi-more:hover { background: #fff; }
/* Khóa sổ tháng */
.lock-form { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.lock-form .dp { width: 190px; }
.lock-list { display: flex; flex-wrap: wrap; gap: 10px; }
.lock-chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border: 1px solid #dbe3f2; border-radius: 999px; background: #f8fafd; }
.lock-chip.locked { border-color: #f3c9c9; background: #fff6f6; }
.lock-chip .btn.small { border-radius: 999px; }
/* Bộ chọn tháng */
.mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 2px; }
.mp-m { height: 40px; border: 0; border-radius: 10px; background: #f4f7fd; font: inherit; font-size: .88rem; color: #1b2437; cursor: pointer; }
.mp-m:hover:not(:disabled) { background: #e4eeff; color: #1d4ed8; }
.mp-m.today { box-shadow: inset 0 0 0 1.5px #2563eb; font-weight: 700; }
.mp-m.sel { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; font-weight: 700; box-shadow: 0 3px 8px rgba(29, 78, 216, .4); }
.mp-m.off { color: #c3cbda; background: transparent; cursor: not-allowed; }
.dp-btn:disabled { opacity: .6; cursor: not-allowed; }
.alloc-row .dp { min-width: 130px; }
.mp-m { white-space: nowrap; font-size: .8rem; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.mp-m.lk { box-shadow: inset 0 0 0 1.5px #e11d48; background: #fff1f2; color: #be123c; }
.mp-m.lk.sel { background: linear-gradient(135deg, #f43f5e, #be123c); color: #fff; }
.dp-foot { gap: 8px; } .dp-clear { border: 0; background: #f3f5fa; color: #55637f; font-weight: 700; border-radius: 10px; padding: 7px 18px; cursor: pointer; } .dp-clear:hover:not(:disabled) { background: #e3e8f3; } .dp-clear:disabled { color: #b3bccd; cursor: not-allowed; }
.dp-title { flex-direction: row; align-items: baseline; gap: 6px; }
.dp-title span { font-size: .9rem; }
.dp-day.other:not(.sel) { opacity: .38; }

.kpi-click { cursor: pointer; transition: transform .1s, box-shadow .1s; }
.kpi-click:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(15,30,60,.18); }
.kpi-click.active { outline: 2px solid #2563eb; outline-offset: -2px; }
.pie-money { display: block; font-size: .8rem; color: #64748b; font-variant-numeric: tabular-nums; }

/* kéo thả đổi vị trí mục danh mục */
.drag-cell { width: 34px; }
.drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: #64748b; cursor: grab; user-select: none; }
.drag-handle:hover { background: #e2e8f0; color: #1b2a41; }
tr.dragging { background: #dbeafe; box-shadow: 0 2px 8px rgba(37,99,235,.25); }
tr.dragging .drag-handle { cursor: grabbing; }
.drag-handle { touch-action: none; }
body.row-dragging { user-select: none; cursor: grabbing; }
.roles-tbl td.role-yes { color: #15803d; font-weight: 700; }
.roles-tbl { table-layout: fixed; width: 100%; min-width: 0; font-size: .84rem; }
.roles-tbl th, .roles-tbl td { padding: 7px 10px; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.roles-tbl th:first-child, .roles-tbl td:first-child { width: 40%; }
.roles-tbl th:not(:first-child), .roles-tbl td:not(:first-child) { width: 20%; }
.roles-tbl td.ctr, .roles-tbl th.ctr { text-align: center; }
.roles-card { margin-top: 16px; }
.roles-tbl tr.roles-group td { background: #eef2fb; font-weight: 700; color: #1b2a41; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.roles-tbl .roles-ex { font-size: .75rem; margin-top: 2px; }
.roles-tbl input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; }

/* ---- Tab Báo cáo: biểu đồ có nhãn tháng + chú thích, bảng dễ đọc, thống kê 2 cột */
.rp-chart { border: 1px solid #e1e8f5; border-radius: 12px; padding: 12px 14px 8px; margin: 14px 0; background: #fbfcff; }
.rp-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rp-chart-head h4 { margin: 0; font-size: .95rem; }
.rp-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .82rem; color: #3b4a63; }
.rp-lg { display: inline-flex; align-items: center; gap: 6px; }
.rp-lg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.rp-chart .colchart.tall { height: 200px; gap: 6px; margin-top: 8px; border-bottom: 0; }
.rp-chart .col-wrap { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.rp-chart .col-wrap .col { flex: 1; min-height: 0; border-bottom: 1px solid #cfd9ec; }
.rp-chart .col-lbl { text-align: center; font-size: .74rem; color: #64748b; padding-top: 4px; }
.rp-chart .col-wrap:hover { background: #eef4ff; border-radius: 6px; }
.rp-note { font-size: .82rem; margin: 8px 0 0; }
table.report { min-width: 900px; }
table.report td.zero { color: #b6c0d4; }
table.report th:first-child, table.report td:first-child { position: sticky; left: 0; background: inherit; z-index: 1; min-width: 150px; }
table.report tbody tr:not(.profit):not(.info) td:first-child { background: #fff; }
table.report tr.profit td { background: #eef6ff; }
table.report td.total { background: #f3f6fc; }
.rp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.rp-stats h4 { margin: 4px 0 8px; font-size: .92rem; }
@media (max-width: 1000px) { .rp-stats { grid-template-columns: 1fr; } }
.rp-stats2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
@media (max-width: 1000px) { .rp-stats2 { grid-template-columns: 1fr; } }
/* Bảng báo cáo: thu nhỏ chữ để đủ 12 tháng + cột Tổng trên một hàng */
table.report { min-width: 1000px; width: 100%; table-layout: fixed; }
table.report th, table.report td { padding: 8px 4px; font-size: .72rem; letter-spacing: 0; }
table.report th:first-child, table.report td:first-child { width: 118px; min-width: 0; padding-left: 8px; font-size: .8rem; }
table.report th:last-child, table.report td:last-child { width: 92px; }
table.report td.num, table.report td.money { font-size: .72rem; font-weight: 500; }
table.report td.total, table.report td.money.total { font-size: .78rem; font-weight: 700; }
table.report tr.profit td { font-size: .74rem; }
/* Bấm vào ô tiền của bảng báo cáo để xem các khoản tạo nên số đó */
table.report td.drill { cursor: pointer; }
table.report td.drill:hover { background: #dbeafe !important; color: #1d4ed8; text-decoration: underline; }
.modal.rp-detail { max-width: 1120px; width: 96vw; }
.modal.rp-detail .body { max-height: 70vh; overflow: auto; }
.modal.rp-detail td.note-col { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
/* Biểu đồ tròn theo khối: tiêu đề khối đậm, nhóm con thụt vào */
.pie-legend.grouped .pie-head { margin-top: 8px; font-weight: 700; }
.pie-legend.grouped .pie-head:first-child { margin-top: 0; }
.pie-legend.grouped .pie-sub { padding-left: 24px; font-size: .86rem; color: #3b4a63; }
.pie-legend.grouped { gap: 5px; }
.pie-legend.grouped .pie-sub .pie-money { font-size: .86rem; color: #12203a; min-width: 100px; text-align: right; }
.pie-legend.grouped .pie-sub .pie-pct { min-width: 48px; text-align: right; }
.pie-legend.grouped .pie-head .pie-pct { min-width: 48px; text-align: right; }
/* Gọn hơn: biểu đồ khối nhỏ lại, chú thích sát dòng, chữ nhỏ */
.pie-wrap:has(.pie-legend.grouped) { gap: 14px; align-items: flex-start; }
.pie-wrap:has(.pie-legend.grouped) .pie { width: 130px; height: 130px; flex: none; }
.pie-legend.grouped { gap: 1px; min-width: 260px; }
.pie-legend.grouped .pie-row { font-size: .8rem; line-height: 1.25; gap: 6px; }
.pie-legend.grouped .pie-head { margin-top: 5px; }
.pie-legend.grouped .pie-head .sw { width: 10px; height: 10px; }
.pie-legend.grouped .pie-head .pie-name { display: flex; justify-content: space-between; gap: 8px; }
.pie-legend.grouped .pie-head .pie-money { display: inline; font-size: .8rem; color: #12203a; font-weight: 600; }
.pie-legend.grouped .pie-sub { padding-left: 16px; font-size: .78rem; }
.pie-legend.grouped .pie-sub .pie-money { font-size: .78rem; min-width: 84px; }
.pie-legend.grouped .pie-sub .pie-pct, .pie-legend.grouped .pie-head .pie-pct { min-width: 40px; }
/* Chú thích chia 2 cột: cột 1 = Vận hành + Trả lại khách; cột 2 = Chung + Đầu tư */
.pie-legend.grouped { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; align-items: start; min-width: 520px; }
.pie-legend.grouped.one-col { grid-template-columns: 1fr; min-width: 260px; }
.pie-legend.grouped .pie-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pie-legend.grouped .pie-col .pie-head:first-child { margin-top: 0; }
@media (max-width: 1100px) { .pie-legend.grouped { grid-template-columns: 1fr; min-width: 260px; } }
/* Biểu đồ chi: lưới 2x2 (Vận hành | Chung / Trả lại | Đầu tư), lát bấm được, tên không xuống dòng */
.rp-struct { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; align-items: start; }
@media (min-width: 1100px) { .rp-struct { grid-template-columns: 1fr 2fr; } }
.pie-wrap:has(.pie-legend.grouped) .pie { width: 150px; height: 150px; }
.pie.pick path, .pie.pick circle { cursor: pointer; transition: opacity .1s; }
.pie.pick path:hover, .pie.pick circle:hover { opacity: .85; }
.pie-legend.grouped { row-gap: 8px; }
.pie-legend.grouped .pie-col { gap: 1px; }
.pie-legend.grouped .pie-head.pick { cursor: pointer; }
.pie-legend.grouped .pie-head.pick:hover .pie-name { text-decoration: underline; }
.pie-legend.grouped .pie-sub .pie-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pie-legend.grouped .pie-sub.drill { padding-left: 0; font-size: .86rem; }
.pie-legend.grouped .pie-sub.drill .pie-money { font-size: .86rem; min-width: 110px; }
.pie-drill-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; font-size: .9rem; }
/* Biểu đồ chi bằng cỡ biểu đồ doanh thu (170px), chữ bên phải thu gọn */
.pie-wrap:has(.pie-legend.grouped) .pie { width: 170px; height: 170px; }
.pie-legend.grouped { column-gap: 18px; min-width: 0; }
.pie-legend.grouped .pie-row { font-size: .74rem; line-height: 1.2; gap: 4px; }
.pie-legend.grouped .pie-head .pie-money { font-size: .74rem; }
.pie-legend.grouped .pie-sub { padding-left: 12px; font-size: .72rem; }
.pie-legend.grouped .pie-sub .pie-money { font-size: .72rem; min-width: 72px; }
.pie-legend.grouped .pie-sub.drill { font-size: .8rem; }
.pie-legend.grouped .pie-sub.drill .pie-money { font-size: .8rem; min-width: 90px; }
.pie-legend.grouped .pie-sub .pie-pct, .pie-legend.grouped .pie-head .pie-pct { min-width: 36px; }
.pie-legend.grouped .pie-head .sw { width: 9px; height: 9px; }
@media (min-width: 1100px) { .rp-struct { grid-template-columns: 1fr 1.7fr; } }
/* Bấm tháng ở biểu đồ cột để lọc hai biểu đồ tổng hợp bên dưới */
.rp-chart .col-wrap.pick { cursor: pointer; border-radius: 6px; transition: background .1s; }
.rp-chart .col-wrap.pick:hover { background: #eef4ff; }
.rp-chart .col-wrap.sel { background: #dbeafe; box-shadow: inset 0 0 0 2px #3b82f6; }
.rp-chart .col-wrap.sel .col-lbl { color: #1d4ed8; font-weight: 700; }
.rp-sel { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Cột doanh thu/chi/lợi nhuận: định vị theo đường 0 để lỗ vẽ xuống dưới */
.rp-chart .col.group { position: relative; }
.rp-chart .col-slot { position: relative; flex: 0 0 30%; max-width: 18px; height: 100%; }
.rp-chart .col-slot .col-fill { position: absolute; left: 0; right: 0; width: auto; max-width: none; }
.rp-chart .col-slot .col-fill.neg { border-radius: 0 0 3px 3px; }
.rp-chart .zero-line { position: absolute; left: 0; right: 0; height: 1px; background: #94a3b8; z-index: 1; pointer-events: none; }
.rp-chart .colchart.has-loss .col-wrap .col { border-bottom: 0; }
.rp-chart .zero-line { background: #64748b; }
/* Khóa sổ tháng: lưới 12 tháng */
.lk-explain { background: #f4f8ff; border: 1px solid #d6e4fb; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: .88rem; color: #26364f; }
.lk-explain p { margin: 0 0 4px; }
.lk-explain ul { margin: 0; padding-left: 18px; }
.lk-explain li { margin: 2px 0; }
.lk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lk-year { font-size: 1.05rem; min-width: 90px; text-align: center; }
.lk-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .lk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lk-tile { border: 1px solid #cfe3d6; background: #f3fbf6; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; min-height: 104px; }
.lk-tile.locked { border-color: #f1c4c4; background: #fff4f4; }
.lk-tile.future { border-color: #e2e8f0; background: #f8fafc; color: #94a3b8; }
.lk-tile.now { box-shadow: inset 0 0 0 2px #3b82f6; }
.lk-month { font-weight: 800; font-size: 1rem; color: #12203a; }
.lk-tile.future .lk-month { color: #94a3b8; }
.lk-state { font-size: .8rem; display: flex; align-items: center; gap: 4px; color: #166534; }
.lk-tile.locked .lk-state { color: #b42318; font-weight: 600; }
.lk-tile.future .lk-state { color: #94a3b8; }
.lk-note { font-size: .72rem; color: #64748b; }
.lk-tile .btn { margin-top: auto; align-self: flex-start; }
.lk-confirm p { margin: 0 0 8px; }

/* ====== In báo cáo: A4 ngang, bảng vừa khổ giấy, không nhảy dòng, bỏ nút và khối khóa sổ ====== */
.rp-print-title { display: none; }
@media print {
  main:has(.rp-root) { padding: 0 !important; }
  main:has(.rp-root) * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  main:has(.rp-root) button, main:has(.rp-root) .lk-card, main:has(.rp-root) .rp-sel, main:has(.rp-root) .notice.btnrow { display: none !important; }
  .rp-print-title { display: block; margin: 0 0 6px; font-size: 9pt; color: #334155; }
  main:has(.rp-root) .page-head { margin: 0 0 2px; }
  main:has(.rp-root) .page-head h2 { font-size: 13pt; }
  main:has(.rp-root) .card, main:has(.rp-root) .card.pad { box-shadow: none !important; border: 0 !important; padding: 0 !important; overflow: visible !important; max-width: none !important; }
  main:has(.rp-root) .card.pad > h3, main:has(.rp-root) details > summary { font-size: 11pt; margin: 6px 0 4px; break-after: avoid; }
  main:has(.rp-root) .tablewrap { overflow: visible !important; }
  /* bảng theo tháng: vừa chiều ngang giấy, mỗi ô một dòng */
  main:has(.rp-root) table.report { min-width: 0 !important; width: 100% !important; table-layout: fixed; }
  main:has(.rp-root) table.report th, main:has(.rp-root) table.report td { padding: 2.5px 2px !important; font-size: 7pt !important; white-space: nowrap; overflow: hidden; text-overflow: clip; }
  main:has(.rp-root) table.report th:first-child, main:has(.rp-root) table.report td:first-child { position: static !important; width: 26mm; font-size: 7.5pt !important; white-space: normal; }
  main:has(.rp-root) table.report th:last-child, main:has(.rp-root) table.report td:last-child { width: 21mm; }
  main:has(.rp-root) table.report td.drill { text-decoration: none !important; background: transparent; }
  main:has(.rp-root) tr, main:has(.rp-root) thead { break-inside: avoid; }
  main:has(.rp-root) thead { display: table-header-group; }
  /* khối thẻ, biểu đồ: không bị cắt đôi giữa hai trang */
  main:has(.rp-root) .kpis, main:has(.rp-root) .rp-chart, main:has(.rp-root) .rp-struct, main:has(.rp-root) .dcard { break-inside: avoid; }
  main:has(.rp-root) details > summary { list-style: none; font-weight: 700; font-size: 11pt; margin: 0 0 4px; }
  main:has(.rp-root) details > summary::-webkit-details-marker { display: none; }
  main:has(.rp-root) .dash-h { break-inside: auto; }
  main:has(.rp-root) .kpis.small { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)) !important; gap: 6px; margin: 4px 0 6px; }
  main:has(.rp-root) .kpi { padding: 6px 8px; }
  main:has(.rp-root) .kpi-val { font-size: 11pt !important; }
  main:has(.rp-root) .kpi-label { font-size: 7.5pt; }
  main:has(.rp-root) .rp-chart { margin: 6px 0; padding: 6px 8px; }
  main:has(.rp-root) .rp-chart .colchart.tall { height: 110px; }
  main:has(.rp-root) .rp-struct { grid-template-columns: 1fr 1.7fr !important; gap: 8px; margin: 6px 0; }
  main:has(.rp-root) .pie-wrap:has(.pie-legend.grouped) .pie, main:has(.rp-root) .pie { width: 100px !important; height: 100px !important; }
  main:has(.rp-root) .pie-legend.grouped { grid-template-columns: 1fr 1fr !important; min-width: 0 !important; }
  main:has(.rp-root) .pie-legend .pie-row { font-size: 6.5pt !important; }
  main:has(.rp-root) .dcard h3 { font-size: 9pt; }
  main:has(.rp-root) .rp-note { font-size: 7pt; }
}

/* Nút In thả xuống */
.rp-dd { position: relative; display: inline-block; }
.rp-dd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; background: #fff; border: 1px solid #cfd9ec; border-radius: 10px; box-shadow: 0 10px 28px rgba(20, 33, 61, .18); padding: 6px; display: flex; flex-direction: column; }
.rp-dd-menu[hidden] { display: none; }
.rp-dd-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; }
.rp-dd-item:hover { background: #eef4ff; }
.rp-dd-item .muted { font-size: .78rem; }
@media print { .no-print { display: none !important; } }

/* Bảng doanh thu theo phòng của từng cơ sở: gọn, vừa khung, ô tháng hai dòng */
.rp-sub-title { margin: 14px 0 6px; font-size: .95rem; }
table.report.rooms { min-width: 0; width: 100%; table-layout: fixed; }
table.report.rooms th, table.report.rooms td { padding: 5px 3px; font-size: .7rem; line-height: 1.2; vertical-align: middle; }
table.report.rooms th:first-child, table.report.rooms td:first-child { width: 64px; position: static; padding-left: 8px; font-size: .78rem; font-weight: 600; white-space: normal; }
table.report.rooms th:last-child, table.report.rooms td:last-child { width: 84px; }
table.report.rooms .rm-val { display: block; font-weight: 600; }
table.report.rooms .rm-sub { display: block; font-size: .62rem; color: #64748b; font-weight: 400; }
table.report.rooms .rm-empty { color: #cbd5e1; text-align: center; }
table.report.rooms tfoot td { font-weight: 700; background: #eef6ff; border-top: 2px solid #cfd9ec; }
table.report.rooms td.zero, table.report.rooms .zero { color: #b6c0d4; font-weight: 400; }
@media print { main:has(.rp-root) table.report.rooms th, main:has(.rp-root) table.report.rooms td { font-size: 6.5pt !important; padding: 2px 1.5px !important; } main:has(.rp-root) table.report.rooms .rm-sub { font-size: 5.5pt; } main:has(.rp-root) .rp-sub-title { font-size: 9pt; margin: 6px 0 3px; break-after: avoid; } }
table.report.rooms th:last-child, table.report.rooms td:last-child { width: 100px; }
table.report.rooms th { white-space: nowrap; }

/* Bảng phòng (bản thiết kế lại): ít cột hơn nên chữ rõ hơn; cột tổng bên phải tách riêng */
table.report.rooms th, table.report.rooms td { font-size: .78rem; padding: 6px 6px; }
table.report.rooms th:first-child, table.report.rooms td:first-child { width: 78px; font-size: .85rem; }
table.report.rooms th:last-child, table.report.rooms td:last-child { width: 120px; }
table.report.rooms .rm-sum { background: #f3f6fc; border-left: 1px solid #e1e8f5; font-weight: 700; }
table.report.rooms th.rm-sum { background: #dfe8f7; white-space: normal; line-height: 1.15; }
table.report.rooms th.rm-sum:nth-last-child(2), table.report.rooms td.rm-sum:nth-last-child(2) { width: 74px; }
table.report.rooms th.rm-sum:nth-last-child(3), table.report.rooms td.rm-sum:nth-last-child(3) { width: 120px; }
table.report.rooms .rm-sum.zero { color: #b6c0d4; font-weight: 400; }
table.report.rooms .rm-cell { border-radius: 0; }
table.report.rooms .rm-val { font-size: .82rem; }
table.report.rooms .rm-sub { font-size: .68rem; }
table.report.rooms .rm-empty { background: transparent; }
@media print { main:has(.rp-root) table.report.rooms th, main:has(.rp-root) table.report.rooms td { font-size: 7pt !important; padding: 2.5px 2px !important; } main:has(.rp-root) table.report.rooms .rm-sub { font-size: 5.5pt; } }

/* Bảng phòng hiện đủ các tháng của kỳ: thu nhỏ chữ cho vừa khung */
table.report.rooms th, table.report.rooms td { font-size: .72rem; padding: 5px 3px; }
table.report.rooms th:first-child, table.report.rooms td:first-child { width: 62px; font-size: .78rem; padding-left: 8px; }
table.report.rooms .rm-val { font-size: .72rem; }
table.report.rooms .rm-sub { font-size: .6rem; white-space: nowrap; }
table.report.rooms th.rm-sum:nth-last-child(3), table.report.rooms td.rm-sum:nth-last-child(3) { width: 92px; }
table.report.rooms th.rm-sum:nth-last-child(2), table.report.rooms td.rm-sum:nth-last-child(2) { width: 56px; }
table.report.rooms th:last-child, table.report.rooms td:last-child { width: 92px; }
table.report.rooms td.rm-sum { font-size: .74rem; }

/* Bảng phòng: thêm cột OCC (giữa Số đêm và Chi riêng phòng) */
table.report.rooms th.rm-sum:nth-last-child(4), table.report.rooms td.rm-sum:nth-last-child(4) { width: 92px; }
table.report.rooms th.rm-sum:nth-last-child(3), table.report.rooms td.rm-sum:nth-last-child(3) { width: 54px; }
table.report.rooms th.rm-sum:nth-last-child(2), table.report.rooms td.rm-sum:nth-last-child(2) { width: 52px; }
table.report.rooms th:last-child, table.report.rooms td:last-child { width: 92px; }

/* Tab: Báo cáo tổng | từng cơ sở */
.rp-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; border-bottom: 2px solid #dbe3f2; }
.rp-tab { padding: 10px 18px; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: .82rem; letter-spacing: .03em; text-transform: uppercase; color: #64748b; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; border-radius: 10px 10px 0 0; }
.rp-tab:hover { background: #f1f5fb; color: #1d4ed8; }
.rp-tab.on { color: #1d4ed8; background: #eef4ff; border-bottom-color: #2563eb; }
.rp-panel[hidden] { display: none; }
.rp-panel > .card { margin-top: 0; }
@media print { main:has(.rp-root) .rp-tabs { display: none !important; } }

/* Bảng phòng: ô bấm được + phần mô tả */
table.report.rooms td.drill { cursor: pointer; }
table.report.rooms td.drill:hover { outline: 2px solid #3b82f6; outline-offset: -2px; text-decoration: none; }
.rp-summary { background: #eef4ff; border: 1px solid #cfe0fb; border-radius: 8px; padding: 8px 12px; margin: 0 0 8px; font-weight: 600; }
.rp-legend-box { margin: 10px 0 0; padding: 10px 14px 10px 30px; background: #f8fafd; border: 1px solid #e1e8f5; border-radius: 10px; font-size: .84rem; color: #26364f; line-height: 1.5; }
.rp-legend-box li { margin: 2px 0; }
@media print { main:has(.rp-root) .rp-legend-box { font-size: 6.5pt; padding: 4px 8px 4px 16px; } }

/* Khóa sổ theo từng cơ sở: chọn cơ sở + ô tháng khóa một phần */
.lk-fac { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.lk-fac-label { font-weight: 700; margin-right: 4px; }
.lk-fac-btn { padding: 7px 14px; border: 1px solid #cfd9ec; background: #fff; border-radius: 999px; font: inherit; font-weight: 600; color: #475569; cursor: pointer; }
.lk-fac-btn:hover { background: #f1f5fb; }
.lk-fac-btn.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.lk-tile.partial { border-color: #f0d28a; background: #fff9e8; }
.lk-tile.partial .lk-state { color: #92600a; font-weight: 600; }
.lk-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.lk-tile .lk-btns .btn { margin-top: 0; }

/* ===== iPad / màn hẹp: bảng giữ độ rộng tối thiểu và cuộn ngang, cột đầu cố định; thẻ số gọn 2x2; chú thích 2 cột tới 760px ===== */
.rp-panel .tablewrap { -webkit-overflow-scrolling: touch; }
table.report.rooms th:first-child, table.report.rooms td:first-child { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 1px 0 0 #e1e8f5; }
table.report.rooms th:first-child { background: #dfe8f7; }
table.report.rooms tfoot td:first-child { background: #eef6ff; }
@media (max-width: 1100px) { .pie-legend.grouped { grid-template-columns: 1fr 1fr; min-width: 0; } }
@media (max-width: 760px) { .pie-legend.grouped { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .rp-panel .kpis.small { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 860px) { .rp-tabs { overflow-x: auto; flex-wrap: nowrap; } .rp-tab { white-space: nowrap; padding: 10px 14px; } }
@media print { table.report.rooms { min-width: 0 !important; } table.report.rooms th:first-child, table.report.rooms td:first-child { position: static; box-shadow: none; } }
/* cột đầu cố định phải có nền đặc, không để số của cột cuộn bên dưới lộ ra */
table.report tbody tr td:first-child { background: #fff; }
table.report tbody tr:nth-child(even) td:first-child { background: #f3f6fc; }
table.report tbody tr.info td:first-child { background: #f8fafd; }
table.report tbody tr.profit td:first-child { background: #eef6ff; }
table.report tbody tr.child td:first-child { background: #fcfdff; }
@media (max-width: 900px) { .pie-legend.grouped { grid-template-columns: 1fr; } }

/* Trang Chi phí: ba biểu đồ một hàng, chia 50% / 30% / 20% */
@media (min-width: 1000px) { .dash-grid3.ex-row { grid-template-columns: 5fr 3fr 2fr; } }
.dash-grid3.ex-row .dcard { min-width: 0; }
.dash-grid3.ex-row .pie-wrap { justify-content: flex-start; }
/* Thẻ cơ cấu ở trang Chi phí (50% chiều ngang): các khối xếp dọc một cột, nhóm con thụt vào dưới từng khối */
.dash-grid3.ex-row .pie-legend.grouped { grid-template-columns: 1fr !important; row-gap: 6px; min-width: 0; }
.dash-grid3.ex-row .pie-wrap { flex-wrap: nowrap; align-items: flex-start; }
.dash-grid3.ex-row .pie-wrap .pie { flex: none; }
.dash-grid3.ex-row > .dcard:not(:first-child) .pie-wrap { flex-wrap: wrap; justify-content: flex-start; }
.dash-grid3.ex-row > .dcard:not(:first-child) .pie-wrap .pie { flex: none; }
/* Thẻ cơ cấu ở trang Chi phí: chú thích 2 cột x 2 hàng (Vận hành | Chung / Trả lại khách | Đầu tư) */
.dash-grid3.ex-row > .dcard:first-child .pie-legend.grouped { grid-template-columns: 1fr 1fr !important; column-gap: 16px; row-gap: 8px; align-items: start; }
.dash-grid3.ex-row > .dcard:first-child .pie-wrap .pie { width: 140px !important; height: 140px !important; }
.dash-grid3.ex-row > .dcard:first-child .pie-legend .pie-row { font-size: .72rem; }
.dash-grid3.ex-row > .dcard:first-child .pie-legend .pie-sub .pie-money { min-width: 66px; }
.dash-grid3.ex-row > .dcard:first-child .pie-legend .pie-sub { padding-left: 10px; }
@media (max-width: 1000px) { .dash-grid3.ex-row > .dcard:first-child .pie-legend.grouped { grid-template-columns: 1fr 1fr !important; } }
/* Thẻ "Theo hình thức chi" (20%): biểu đồ nhỏ lại; tên, số tiền, % nằm cùng một hàng, sát nhau */
.dash-grid3.ex-row > .dcard:last-child .pie-wrap { gap: 10px; justify-content: center; }
.dash-grid3.ex-row > .dcard:last-child .pie-wrap .pie { width: 120px !important; height: 120px !important; }
.dash-grid3.ex-row > .dcard:last-child .pie-legend { gap: 5px; min-width: 0; flex: 1 1 100%; }
.dash-grid3.ex-row > .dcard:last-child .pie-row { font-size: .84rem; gap: 6px; flex-wrap: nowrap; }
.dash-grid3.ex-row > .dcard:last-child .pie-name { flex: 0 1 auto; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.dash-grid3.ex-row > .dcard:last-child .pie-money { display: inline; font-size: .78rem; margin: 0; }
.dash-grid3.ex-row > .dcard:last-child .pie-pct { margin-left: 2px; font-weight: 600; }
/* Thẻ "Theo hình thức chi": tên bên trái, số tiền canh phải, % sát lề phải, các hàng thẳng cột */
.dash-grid3.ex-row > .dcard:last-child .pie-legend { width: 100%; flex: 1 1 100%; gap: 7px; }
.dash-grid3.ex-row > .dcard:last-child .pie-row { width: 100%; gap: 10px; }
.dash-grid3.ex-row > .dcard:last-child .pie-name { flex: 1 1 auto; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.dash-grid3.ex-row > .dcard:last-child .pie-money { text-align: right; font-variant-numeric: tabular-nums; }
.dash-grid3.ex-row > .dcard:last-child .pie-pct { min-width: 46px; text-align: right; margin-left: 0; }

.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Bộ lọc đang hoạt động: viền xanh + nền xanh nhạt; nút Tháng này sáng lên; Xóa lọc nổi bật khi đang có lọc */
.filters input, .filters select, .filters .dp-btn, .filters .btn, .filters .check { transition: border-color .15s, background-color .15s, box-shadow .15s, color .15s; }
.filters input.filter-on, .filters select.filter-on { border-color: #2563eb !important; background-color: #eef4ff !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.filters .dp.filter-on .dp-btn { border-color: #2563eb !important; background: #eef4ff !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.filters .check.filter-on { color: #1d4ed8; font-weight: 700; }
.filters .btn.on { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; box-shadow: 0 2px 8px rgba(37, 99, 235, .35); }
.filters .btn.attn { border-color: #e5484d; color: #b42318; background: #fff5f5; }
.filters .btn:active { transform: scale(.97); }
.filters .filter-tools { flex-wrap: nowrap; white-space: nowrap; }

/* Popup "Khoản trừ từ cọc khi trả phòng": thẻ tổng, mỗi phòng một thẻ có sơ đồ cọc - nợ - chi phí = kết quả */
.modal.dep-modal { max-width: 900px; width: 94vw; }
.dep-dlg { display: flex; flex-direction: column; gap: 12px; }
.dep-note { margin: 0; padding: 9px 12px; background: #f4f8ff; border: 1px solid #d6e4fb; border-radius: 10px; font-size: .86rem; color: #26364f; line-height: 1.45; }
.dep-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.dep-stat { border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 3px; border: 1px solid transparent; }
.dep-stat-l { font-size: .74rem; color: #475569; }
.dep-stat-v { font-size: 1.05rem; color: #12203a; }
.dep-stat.gray { background: #f1f5f9; border-color: #e2e8f0; }
.dep-stat.blue { background: #eaf2ff; border-color: #cfe0fb; }
.dep-stat.orange { background: #fff3e4; border-color: #fbd9a8; }
.dep-stat.green { background: #e8f8ee; border-color: #bfe8cd; }
.dep-stat.red { background: #fdeaea; border-color: #f5c2c2; }
.dep-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; }
.dep-chips-l { color: #475569; font-weight: 600; margin-right: 2px; }
.dep-chip { padding: 3px 10px; border-radius: 999px; background: #eef6ff; border: 1px solid #cfe0fb; color: #1d4ed8; }
.dep-chip b { color: #12203a; margin-left: 2px; }
.dep-list { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow: auto; padding-right: 2px; }
.dep-card { border: 1px solid #dbe3f2; border-radius: 12px; padding: 10px 12px; background: #fff; }
.dep-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dep-head b { font-size: 1rem; }
.dep-sub { font-size: .8rem; color: #64748b; }
.dep-flow { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.dep-step { flex: 1 1 110px; min-width: 100px; border: 1px solid #e1e8f5; border-radius: 8px; padding: 6px 10px; background: #f8fafd; display: flex; flex-direction: column; gap: 2px; }
.dep-step.held { background: #eaf2ff; border-color: #cfe0fb; }
.dep-step-l { font-size: .72rem; color: #64748b; }
.dep-step-v { font-size: .92rem; color: #12203a; font-variant-numeric: tabular-nums; }
.dep-op { align-self: center; font-weight: 700; color: #94a3b8; }
.dep-result.refund { background: #e8f8ee; border-color: #9fd9b5; }
.dep-result.refund .dep-step-v { color: #166534; }
.dep-result.due { background: #fdeaea; border-color: #f0b4b4; }
.dep-result.due .dep-step-v { color: #b42318; }
.dep-result.even { background: #f1f5f9; }
.dep-lines-tbl { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: .82rem; }
.dep-lines-tbl th { text-align: left; font-size: .72rem; color: #64748b; font-weight: 600; padding: 3px 6px; border-bottom: 1px solid #e1e8f5; background: transparent; }
.dep-lines-tbl th.num, .dep-lines-tbl td.num { text-align: right; }
.dep-lines-tbl td { padding: 4px 6px; border-bottom: 1px dashed #e8edf6; white-space: normal; }
.dep-lines-tbl .dep-content { color: #475569; }
.dep-scope { font-size: .86rem; color: #12203a; padding: 7px 12px; background: #fff8e6; border: 1px solid #f1d27a; border-radius: 10px; }
.dep-scope-hint { color: #7a5c13; font-size: .78rem; }

/* Doanh thu: dòng liên kết đặt phòng bấm được; nút thao tác */
tr.rv-link { cursor: pointer; }
tr.rv-link:hover td { background: #eef4ff !important; }
.rv-act { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }

.rv-act { flex-wrap: nowrap; gap: 5px; white-space: nowrap; }
.rv-act .btn.small { padding: 4px 9px; font-size: .78rem; }
.rv-act { gap: 4px; }
.rv-act .btn.small { padding: 4px 7px; }
td.ctr:has(.rv-act) { padding-left: 6px; padding-right: 6px; }

/* Nút thao tác dạng biểu tượng */
.icon-act { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cfd9ec; border-radius: 9px; background: #fff; color: #475569; cursor: pointer; transition: background .12s, color .12s, border-color .12s, transform .08s; }
.icon-act:hover { background: #eef4ff; border-color: #93b4ee; color: #1d4ed8; }
.icon-act:active { transform: scale(.94); }
.icon-act.view { color: #2563eb; }
.icon-act.print { color: #475569; }
.icon-act.edit { color: #0f766e; }
.icon-act.edit:hover { background: #e6f7f4; border-color: #8dd5ca; color: #0f766e; }
.icon-act.cancel { color: #dc2626; border-color: #f3c0c0; background: #fff6f6; }
.icon-act.cancel:hover { background: #fde8e8; border-color: #e58a8a; color: #b91c1c; }
.icon-act.log { color: #64748b; }
.rv-act { gap: 6px; }

/* Cột thao tác khoản thu: lưới 5 ô đều nhau để các biểu tượng thẳng hàng, thẳng cột */
.rv-act { display: grid !important; grid-template-columns: repeat(5, 32px); gap: 6px; justify-content: center; align-items: center; }
.rv-act .icon-gap { width: 32px; height: 32px; }
.rv-act .rv-sys { grid-column: 3 / span 3; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 9px; background: #dff5e6; color: #166534; font-size: .76rem; font-weight: 700; white-space: nowrap; }



/* Phiếu thu tự lập: khung đơn giản, chữ có chân, dòng chấm, ba cột ký tên */
.modal.rcpt-modal { max-width: 780px; width: 94vw; }
.rcpt { position: relative; max-width: 700px; margin: 0 auto; background: #fff; color: #111; border: 1.5px solid #333; border-radius: 3px; padding: 18px 28px 22px; font-family: "Times New Roman", Times, serif; font-size: 16px; line-height: 1.5; }
.rcpt-head { display: flex; align-items: center; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid #888; }
.rcpt-logo { height: 48px; width: auto; }
.rcpt-org { flex: 1; display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.35; min-width: 0; }
.rcpt-org b { font-size: 17px; text-transform: uppercase; }
.rcpt-no { text-align: right; font-size: 13.5px; display: flex; flex-direction: column; line-height: 1.3; }
.rcpt-no b { font-size: 17px; }
.rcpt-title { text-align: center; margin: 14px 0 0; font-size: 26px; letter-spacing: .16em; font-weight: 700; }
.rcpt-date { text-align: center; font-style: italic; margin: 0 0 14px; }
.rcpt-line, .rcpt-amount, .rcpt-words { display: flex; align-items: baseline; gap: 10px; margin: 5px 0; }
.rcpt-l { flex: 0 0 160px; font-weight: 700; }
.rcpt-v { flex: 1; padding-bottom: 1px; border-bottom: 1px dotted #777; overflow-wrap: anywhere; }
.rcpt-amount b { font-size: 22px; }
.rcpt-words i { flex: 1; }
.rcpt-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; text-align: center; }
.rcpt-sign > div { display: flex; flex-direction: column; align-items: center; min-height: 112px; }
.rcpt-sign b { font-size: 15px; }
.rcpt-sign span { font-size: 12.5px; font-style: italic; color: #555; }
.rcpt-sign em { margin-top: auto; font-style: normal; font-weight: 700; min-height: 22px; }
.rcpt-stamp { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) rotate(-16deg); border: 4px solid #c0392b; color: #c0392b; font-size: 44px; font-weight: 700; padding: 4px 22px; border-radius: 4px; opacity: .5; pointer-events: none; }
@media print { .rcpt-sheet { padding-top: 8mm; } .rcpt-sheet .rcpt { max-width: none; width: 100%; font-size: 13pt; } }
.rcpt-print-at { margin-top: 10px; padding-top: 6px; border-top: 1px solid #ddd; text-align: right; font-size: 12px; font-style: italic; color: #666; }

/* hai mục trên cùng một dòng: Phòng/đặt phòng + Nhóm thu; Số tiền + Bằng chữ */
.rcpt-row2 { display: flex; align-items: baseline; gap: 22px; }
.rcpt-row2 > .rcpt-line, .rcpt-row2 > .rcpt-amount, .rcpt-row2 > .rcpt-words { margin: 5px 0; min-width: 0; }
.rcpt-row2 > .rcpt-line { flex: 1 1 0; }
.rcpt-row2 .rcpt-l { flex: 0 0 auto; }
.rcpt-row2:not(.rcpt-money) > .rcpt-line:first-child .rcpt-l { flex: 0 0 auto; }
.rcpt-row2.rcpt-money > .rcpt-amount { flex: 0 0 auto; }
.rcpt-row2.rcpt-money > .rcpt-words { flex: 1 1 0; }
.rcpt-row2:not(.rcpt-money) > .rcpt-line:first-child { flex: 1.35 1 0; }
.rcpt-row2 .rcpt-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Phiếu thu: lưới 4 cột nhãn | giá trị | nhãn | giá trị, cùng cỡ chữ, thẳng cột */
.rcpt-grid4 { display: grid; grid-template-columns: 158px minmax(0, 1fr) 92px minmax(0, 1.35fr); column-gap: 12px; row-gap: 9px; align-items: baseline; }
.rcpt-gl { font-weight: 700; font-size: 16px; line-height: 1.45; }
.rcpt-gv { font-size: 16px; line-height: 1.45; padding-bottom: 1px; border-bottom: 1px dotted #777; overflow-wrap: anywhere; min-height: 1.45em; }
.rcpt-gv.rcpt-amt { font-weight: 700; }
.rcpt-gv.rcpt-words { font-style: italic; }
@media print { .rcpt-sheet .rcpt-gl, .rcpt-sheet .rcpt-gv { font-size: 13pt; } }

/* Phiếu chi: lưới 7 ô thao tác */
.rv-act.ex-act { grid-template-columns: repeat(7, 32px); }
.icon-act.copy { color: #7c3aed; }
.icon-act.copy:hover { background: #f3ecff; border-color: #c9b2f5; color: #6d28d9; }
.icon-act.open { color: #0369a1; }
.rv-act.ex-act { grid-template-columns: repeat(6, 32px); }

/* Nút sửa, hủy bị khóa (tháng đã khóa sổ / đặt phòng đã chốt trả phòng): mờ đi, vẫn bấm được để xem lý do */
.icon-act.blocked { opacity: .45; background: #f3f4f6; border-color: #e1e5eb; color: #94a3b8; cursor: not-allowed; }
.icon-act.blocked:hover { background: #f3f4f6; border-color: #e1e5eb; color: #94a3b8; }

.rv-sys-tag { margin-left: 8px; font-size: .72rem; white-space: nowrap; }
.rv-act { grid-template-columns: repeat(5, 32px); }
.rv-act.ex-act { grid-template-columns: repeat(6, 32px); }

/* biểu đồ báo cáo theo ngày (chọn đúng một tháng): nhiều cột hơn nên thu nhỏ khoảng cách và chữ nhãn */
.rp-chart .colchart.tall.daily { gap: 2px; }
.rp-chart .colchart.daily .col-lbl { font-size: .64rem; padding-top: 3px; }
.rp-chart .colchart.daily .col-slot { min-width: 0; }

/* tổng hợp theo phòng: mỗi phòng một ô */
.rp-roomsum-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.rp-roomsum-bar .btn.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.rp-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.rp-room { background: #fff; border: 1px solid #dbe4f3; border-top: 4px solid #94a3b8; border-radius: 12px; padding: 10px 12px 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; padding-bottom: 12px; }
.rp-room.good { border-top-color: #30a46c; }
.rp-room.mid { border-top-color: #f5a524; }
.rp-room.low { border-top-color: #e5484d; }
.rp-room-top { display: flex; align-items: baseline; gap: 8px; }
.rp-room-name { font-size: 1.25rem; color: #0f172a; }
.rp-room-fac { font-size: .76rem; color: #64748b; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-room-rank { margin-left: auto; font-size: .74rem; font-weight: 700; color: #1d4ed8; background: #e8f0ff; border-radius: 999px; padding: 1px 8px; }
.rp-room-body { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rp-room-rev { display: flex; flex-direction: column; min-width: 0; }
.rp-room-rev small, .rp-room-occ small { font-size: .7rem; color: #64748b; text-transform: uppercase; letter-spacing: .03em; }
.rp-room-rev b { font-size: 1.05rem; color: #1d4ed8; font-variant-numeric: tabular-nums; }
.rp-room-share { font-size: .74rem; color: #64748b; }
.rp-room-occ { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: .72rem; color: #475569; flex: none; }
.rp-ring { --p: 0%; --c: #94a3b8; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(var(--c) var(--p), #e8edf6 0); display: grid; place-items: center; position: relative; }
.rp-ring::before { content: ''; position: absolute; inset: 7px; background: #fff; border-radius: 50%; }
.rp-ring span { position: relative; font-weight: 700; font-size: .78rem; color: #0f172a; }
.rp-ring.good { --c: #30a46c; }
.rp-ring.mid { --c: #f5a524; }
.rp-ring.low { --c: #e5484d; }
.rp-room-track { height: 5px; background: #eef2f9; margin: 0 -12px; }
.rp-room-track i { display: block; height: 100%; background: #2f6fed; }

/* bảng thống kê theo phòng */
.rp-roomtbl { margin-top: 4px; }
.rp-roomtbl .rp-st-name { font-weight: 700; }
.rp-pill { display: inline-block; min-width: 52px; text-align: center; padding: 1px 8px; border-radius: 999px; font-weight: 700; font-size: .82rem; background: #eef2f9; color: #475569; }
.rp-pill.good { background: #dcf5e8; color: #1a7f4e; }
.rp-pill.mid { background: #fdf0d3; color: #a16207; }
.rp-pill.low { background: #fde4e4; color: #b42318; }
.rp-roomtbl { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; }
.rp-roomtbl th { background: #eef3fc; color: #334155; font-size: .76rem; text-transform: uppercase; letter-spacing: .02em; padding: 9px 10px; text-align: left; white-space: normal; }
.rp-roomtbl td { padding: 9px 10px; border-top: 1px solid #e6ecf6; white-space: nowrap; }
.rp-roomtbl th.num, .rp-roomtbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rp-roomtbl tbody tr:hover { background: #f5f8ff; }
.rp-roomtbl tfoot td { background: #eaf1ff; font-weight: 700; border-top: 2px solid #c7d6f2; }

/* biểu đồ so sánh giữa các phòng */
.rp-cmp { background: #fff; border: 1px solid #dbe4f3; border-radius: 12px; padding: 12px 14px 8px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 14px; }
.rp-cmp-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 2px; }
.rp-cmp-title b { font-size: .95rem; color: #0f172a; }
.rp-cmp-title .muted { font-size: .78rem; }
.rp-cmp-block + .rp-cmp-block { border-top: 1px dashed #dbe4f3; padding-top: 12px; }
.rp-cmp-scroll { overflow-x: auto; }
.rp-cmp-svg { display: block; max-width: none; font-family: inherit; }
.rp-cmp-svg .grid { stroke: #e6ecf6; stroke-width: 1; }
.rp-cmp-svg .ax { font-size: 11px; fill: #64748b; }
.rp-cmp-svg .hit { fill: transparent; }
.rp-cmp-svg g:hover .hit { fill: #f1f6ff; }
.rp-cmp-svg .bar.rev { fill: #2f6fed; }
.rp-cmp-svg .bar.good { fill: #30a46c; } .rp-cmp-svg .bar.mid { fill: #f5a524; } .rp-cmp-svg .bar.low { fill: #e5484d; } .rp-cmp-svg .bar.none { fill: #cbd5e1; }
.rp-cmp-svg .val { font-size: 11px; font-weight: 700; fill: #334155; }
.rp-cmp-svg .val.rev { fill: #1d4ed8; }
.rp-cmp-svg .lbl { font-size: 12.5px; font-weight: 700; fill: #0f172a; }
.rp-cmp-svg .lbl2 { font-size: 9.5px; fill: #64748b; }
.rp-cmp-svg .avg { stroke: #64748b; stroke-width: 1.2; stroke-dasharray: 5 4; }
.rp-cmp-svg .avgt { font-size: 10.5px; fill: #64748b; }

/* tiêu đề từng phần trong báo cáo: thanh dọc xanh phía trước, chữ đậm hơn */
.rp-sub-title { display: flex; align-items: center; gap: 9px; margin: 22px 0 10px; font-size: 1.08rem; font-weight: 800; color: #0f172a; }
.rp-sub-title::before { content: ""; flex: none; width: 4px; height: 1.2em; border-radius: 3px; background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.rp-sub-title svg { flex: none; color: #2563eb; }
.rp-room-help { margin: 0 0 10px; }
.rp-cmp-svg .bar.elec { fill: #f59e0b; }
.rp-cmp-svg .val.elec { fill: #b45309; }
.rp-cmp-svg .bar.common { fill: #94a3b8; }
.rp-lg i.lg-elec { background: #f59e0b; }
.rp-lg i.lg-common { background: #94a3b8; }
.rp-lg i.lg-over { background: #e5484d; }
.rp-neg { color: #b42318; font-weight: 700; }
.rp-cmp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: .8rem; margin-bottom: 4px; }

/* điện chung của tòa nhà */
.ec-sum { background: #fff; border: 1px solid #dbe4f3; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.ec-eq { margin: 0 0 12px; color: #334155; line-height: 1.5; }
.ec-eq-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 12px; }
.ec-op { align-self: center; font-size: 1.5rem; font-weight: 700; color: #94a3b8; }
.ec-box { flex: 1 1 150px; border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; border: 1px solid transparent; }
.ec-box small { font-size: .78rem; color: #475569; }
.ec-box b { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: #0f172a; }
.ec-box span { font-size: .8rem; color: #64748b; }
.ec-box.bill { background: #f1f5f9; border-color: #dbe4f3; }
.ec-box.rooms { background: #fff4de; border-color: #f8d99a; }
.ec-box.common { background: #e8edf4; border-color: #c4cfde; }
.ec-box.neg b, .ec-nums .neg, .ec-nums em.neg { color: #b42318; }
.ec-bar { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #eef2f9; }
.ec-bar .ec-rooms { background: #f59e0b; }
.ec-bar .ec-common { background: #94a3b8; }
.ec-bar .ec-over { background: #e5484d; }
.ec-list { display: flex; flex-direction: column; gap: 10px; }
.ec-row { background: #fff; border: 1px solid #dbe4f3; border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.ec-month { font-size: .98rem; color: #0f172a; }
.ec-nums { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .85rem; color: #475569; }
.ec-nums b { color: #0f172a; font-variant-numeric: tabular-nums; }
.ec-nums em { flex-basis: 100%; font-style: normal; font-size: .8rem; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.dot.bill { background: #64748b; } .dot.rooms { background: #f59e0b; } .dot.common { background: #94a3b8; }
.ec-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .8rem; color: #64748b; margin: 10px 2px 0; }
.ec-nums i.dot, .ec-legend i.dot { display: inline-block; width: 10px; height: 10px; min-width: 10px; padding: 0; margin: 0 6px 0 0; border-radius: 50%; flex: none; vertical-align: baseline; }

/* điện chung: bánh tròn và cột chồng */
.ec-top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; background: #fff; border: 1px solid #dbe4f3; border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; }
.ec-donut { flex: none; }
.ec-d-big { font-size: 24px; font-weight: 800; fill: #0f172a; }
.ec-d-small { font-size: 11px; fill: #64748b; }
.ec-legend-big { display: flex; flex-direction: column; gap: 12px; flex: 1 1 280px; min-width: 0; }
.ec-lrow { display: flex; align-items: flex-start; gap: 12px; }
.ec-lrow .sw { flex: none; width: 14px; height: 14px; border-radius: 4px; margin-top: 5px; }
.ec-lrow .sw.whole { background: #fff; border: 2px solid #475569; }
.ec-lrow .sw.rooms { background: #f59e0b; }
.ec-lrow .sw.common { background: #94a3b8; }
.ec-lrow small { display: block; color: #475569; font-size: .82rem; }
.ec-lrow b { font-size: 1.3rem; color: #0f172a; font-variant-numeric: tabular-nums; margin-right: 8px; }
.ec-lrow span { font-size: .82rem; color: #64748b; }
.ec-svg .ec-seg.rooms { fill: #f59e0b; }
.ec-svg .ec-seg.common { fill: #94a3b8; }
.ec-svg .ec-seg.over { fill: #e5484d; }
.ec-svg .ec-in { font-size: 11.5px; font-weight: 700; fill: #fff; }
.ec-svg .ec-in.dark { fill: #422006; }
.ec-svg .ec-tot { font-size: 12.5px; font-weight: 800; fill: #0f172a; }

/* tiền điện 12 tháng: cột bên trái, biểu đồ tròn bên phải */
.ec12-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ec12-chart { flex: 1 1 520px; min-width: 0; }
.ec12-pie { flex: 0 0 240px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 12px 10px; border-left: 1px dashed #dbe4f3; }
.ec12-pie-title { font-weight: 700; color: #0f172a; font-size: .92rem; align-self: flex-start; }
.ec12-pie .ec-lrow { align-self: stretch; }
.ec12-pie .ec-lrow b { font-size: 1.05rem; }
.ec12-pie p { margin: 0; font-size: .8rem; align-self: flex-start; }
@media (max-width: 900px) { .ec12-pie { border-left: 0; flex-basis: 100%; } }
.ec12-chart .rp-cmp-svg { width: 100%; height: auto; min-width: 620px; max-width: 100%; }

/* tiền điện 12 tháng: bấm cột để xem chi tiết tháng */
.rp-cmp-svg .hit.pick { cursor: pointer; }
.rp-cmp-svg .hit.sel { fill: #e3eeff; }
.ec12-detail { margin-top: 10px; }
.ec12-detail .ec-row { background: #f8faff; }
.ec12-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ec12-hint { margin: 0; font-size: .82rem; }
.ec12-boxes { margin-bottom: 12px; }
.ec-box > small { display: flex; align-items: center; gap: 6px; }
.ec-box > small svg { flex: none; }
.ec-box.bill > small svg { color: #475569; }
.ec-box.rooms > small svg { color: #d97706; }
.ec-box.common > small svg { color: #64748b; }
.ec-box > small span { font-size: inherit; color: inherit; }
.ec12-chart .ec-seg.rooms { fill: #f59e0b; }
.ec12-chart .ec-seg.common { fill: #94a3b8; }
.ec12-chart .ec-seg.over { fill: #e5484d; }
.ec12-chart .ec-in { font-size: 11px; font-weight: 700; fill: #fff; }
.ec12-chart .ec-in.dark { fill: #422006; }

/* tiền điện 12 tháng: chú thích phía dưới */
.ec12-hint { display: flex; align-items: center; gap: 8px; margin-top: 2px; padding: 8px 12px; background: #f3f7ff; border: 1px dashed #bcd0f5; border-radius: 10px; color: #1d4ed8; font-size: .85rem; }
.ec12-hint svg { flex: none; }
.ec12-notes { margin-top: 12px; padding: 12px 14px; background: #f8fafc; border: 1px solid #e3eaf5; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.ec12-notes-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #0f172a; font-size: .9rem; }
.ec12-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 18px; }
.ec12-key { display: flex; gap: 10px; align-items: flex-start; }
.ec12-key .sw { flex: none; width: 14px; height: 14px; border-radius: 4px; margin-top: 3px; }
.ec12-key .sw.rooms { background: #f59e0b; } .ec12-key .sw.common { background: #94a3b8; } .ec12-key .sw.over { background: #e5484d; }
.ec12-key b { display: block; font-size: .85rem; color: #0f172a; }
.ec12-key span { font-size: .8rem; color: #64748b; line-height: 1.4; }
.ec12-how { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: #475569; }
.ec12-how b { color: #0f172a; }
.ec12-warn { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; background: #fff7e6; border: 1px solid #f8d99a; border-radius: 10px; color: #7a4a05; font-size: .84rem; line-height: 1.45; }
.ec12-warn svg { flex: none; margin-top: 2px; color: #d97706; }

/* tab cấp 2 trong báo cáo: Tổng hợp chung | Tổng hợp theo phòng | Điện, nước & phí khác */
.rp-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.rp-subtab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: 1px solid #cfdaf0; border-radius: 999px; background: #fff; font: inherit; font-size: .88rem; font-weight: 600; color: #475569; cursor: pointer; }
.rp-subtab:hover { background: #f1f6ff; color: #1d4ed8; }
.rp-subtab.on { background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, .3); }
@media (max-width: 860px) { .rp-subtabs { flex-wrap: nowrap; overflow-x: auto; } .rp-subtab { white-space: nowrap; } }
@media print { .rp-subtabs { display: none !important; } .rp-subpanel[hidden] { display: block !important; } }

/* huy hiệu bộ lọc cạnh tiêu đề phần */
.rp-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 3px 11px; border-radius: 999px; background: #e8f0ff; border: 1px solid #c3d6fb; color: #1d4ed8; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.rp-badge span { font: inherit; }
.rp-cmp-svg.fit { width: 100%; height: auto; }

/* menu In: theo từng cơ sở, chọn in toàn bộ hoặc từng phần */
.rp-dd-menu { min-width: 280px; max-height: 70vh; overflow-y: auto; }
.rp-dd-group { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px 4px; }
.rp-dd-group b { color: #0f172a; font-size: .88rem; }
.rp-dd-group .muted { font-size: .76rem; }
.rp-dd-group:not(:first-child) { border-top: 1px solid #e6ecf6; margin-top: 4px; padding-top: 10px; }
.rp-dd-sub { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 10px 6px 18px; border: 0; background: transparent; border-radius: 8px; font: inherit; font-size: .85rem; color: #334155; cursor: pointer; text-align: left; }
.rp-dd-sub svg { flex: none; color: #2563eb; }
.rp-dd-sub:hover { background: #eef4ff; color: #1d4ed8; }
.rp-dd-sub.all { font-weight: 700; }
@media print { .rp-subpanel[hidden].no-print, .rp-subpanel.no-print { display: none !important; } }
.rp-dd-menu { min-width: 320px; }
.rp-dd-group { white-space: nowrap; }
.rp-dd-group b { flex: none; }
.rp-dd-group .muted { overflow: hidden; text-overflow: ellipsis; }
.rp-dd-sub span { white-space: nowrap; }

/* phần nước: đổi màu cam sang xanh nước */
.rp-cmp-svg .bar.water { fill: #0ea5e9; }
.rp-cmp-svg .val.water { fill: #0369a1; }
.ec-water .ec-seg.rooms { fill: #0ea5e9; }
.ec-water .ec-in.dark { fill: #fff; }
.ec-water .ec-box.rooms { background: #e3f4fd; border-color: #a6dbf5; }
.ec-water .ec-box.rooms > small svg { color: #0284c7; }
.ec-water .sw.rooms, .ec-water .dot.rooms { background: #0ea5e9; }
.ec-water .ec-bar .ec-rooms { background: #0ea5e9; }
.ec-water .rp-lg i.lg-elec { background: #0ea5e9; }

/* nước: phần khách trả vượt là lợi nhuận (màu xanh lá), không phải lỗi */
.ec-water .ec-seg.over { fill: #22c55e; }
.ec-water .ec-bar .ec-over { background: #22c55e; }
.ec-water .sw.over, .ec-water .dot.profit { background: #22c55e; }
.ec-box.profit { background: #e6f7ec; border-color: #a9e0bb; }
.ec-box.profit > small svg { color: #16a34a; }
.ec-nums .profit, .ec-nums .profit b { color: #15803d; }
.ec12-pie-title { align-self: center; text-align: center; }

/* các phần báo cáo bổ sung: công nợ, nguồn khách, dự báo, hủy và hoàn tiền */
.x-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
@media (max-width: 900px) { .x-grid2 { grid-template-columns: 1fr; } }
.x-bars { display: flex; flex-direction: column; gap: 8px; }
.x-bar-row, .x-age-row { display: grid; grid-template-columns: minmax(90px, 32%) 1fr auto; align-items: center; gap: 10px; font-size: .85rem; }
.x-bar-name, .x-age-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; }
.x-bar-track { height: 12px; background: #eef2f9; border-radius: 6px; overflow: hidden; display: block; }
.x-bar-track i { display: block; height: 100%; border-radius: 6px; }
.x-bar-track i.blue { background: #2f6fed; } .x-bar-track i.green { background: #30a46c; } .x-bar-track i.purple { background: #8b5cf6; } .x-bar-track i.orange { background: #f59e0b; }
.x-bar-track i.mid { background: #f5b740; } .x-bar-track i.mid2 { background: #f08a3c; } .x-bar-track i.low { background: #e5484d; } .x-bar-track i.low2 { background: #b42318; }
.x-bar-val, .x-age-val { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-variant-numeric: tabular-nums; min-width: 110px; }
.x-bar-val span, .x-age-val span { font-size: .74rem; color: #64748b; }
.x-aging { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.x-months { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.x-month-row { display: grid; grid-template-columns: 54px 1fr 70px 1fr 120px; align-items: center; gap: 10px; font-size: .82rem; }
.x-month-val { text-align: right; color: #475569; font-variant-numeric: tabular-nums; }
.x-reason { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.rp-roomtbl tbody tr.click { cursor: pointer; }
.rp-roomtbl tbody tr.click:hover { background: #eef4ff; }
.rp-cmp-svg .val.good { fill: #1a7f4e; } .rp-cmp-svg .val.mid { fill: #a16207; } .rp-cmp-svg .val.low { fill: #b42318; }
.x-bar-row.click { cursor: pointer; border-radius: 8px; padding: 3px 6px; margin: -3px -6px; }
.x-bar-row.click:hover { background: #eef4ff; }

/* popup chi tiết báo cáo: một bảng vừa khung, không bị cắt; bộ lọc riêng */
.modal.rp-detail .tablewrap { overflow-x: visible; }
.modal.rp-detail table { width: 100%; min-width: 0; table-layout: auto; }
.modal.rp-detail th, .modal.rp-detail td { padding: 8px 10px; white-space: normal; word-break: break-word; }
.modal.rp-detail td.num, .modal.rp-detail th.num, .modal.rp-detail td.money { white-space: nowrap; }
.modal.rp-detail td.note-col { max-width: none; overflow: visible; text-overflow: clip; }
.rp-popfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.rp-popfilter input, .rp-popfilter select { height: 34px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font: inherit; font-size: .86rem; }
.rp-popfilter input { min-width: 220px; flex: 1 1 220px; }
.rp-popfilter input.filter-on, .rp-popfilter select.filter-on { border-color: #2563eb; background: #eef4ff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.rp-popfilter .btn.attn { border-color: #e5484d; color: #b42318; background: #fff5f5; }
.rp-filter-count { margin-left: auto; font-size: .8rem; }
.rp-popfilter select { width: auto; flex: 0 1 190px; } .rp-popfilter input { width: auto; }
.rp-cmp .rp-popfilter { margin: 4px 0 8px; } .rp-popfilter select { min-width: 140px; }
.rp-pf-field { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: #475569; }
.rp-pf-field .dp { min-width: 150px; }
.rp-cmp-svg .avgt { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.rp-cmp-svg .val.hoverval { opacity: 0; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.rp-cmp-svg g:hover .val.hoverval { opacity: 1; }

/* thẻ tổng quan bấm được */
.kpi.kpi-click { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.kpi.kpi-click:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30, 64, 175, .18); }
.kpi.kpi-click:focus-visible { outline: 3px solid #93b4f5; outline-offset: 2px; }
.x-stack { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }

/* hoa hồng sales */
.x-person { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.x-person i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.x-calcbar { padding: 10px 12px; background: #f3f7ff; border: 1px dashed #bcd0f5; border-radius: 10px; margin: 8px 0 10px; }
.x-calcbar svg { color: #2563eb; }
.x-calcbar input { min-width: 80px; flex: none; width: 90px; }
.x-calc-info { flex: 1 1 260px; margin: 0; font-size: .84rem; }
.x-calc { color: #b45309; }
.x-rate { width: 70px; height: 32px; padding: 0 8px; text-align: right; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: .86rem; }
.x-rate.filter-on { border-color: #2563eb; background: #eef4ff; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }

/* chốt hoa hồng ở chi tiết đặt phòng */
.dt-source { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.dt-commission-btn { display: inline-flex; align-items: center; gap: 5px; color: #b45309; border-color: #f3c98b; background: #fff8ec; }
.dt-commission-btn:hover { background: #ffefd0; }
.dt-commission.done { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; background: #e3f6ea; color: #1a7f4e; font-size: .8rem; font-weight: 700; }
button.rp-pill.x-link { border: 0; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; }
button.rp-pill.x-link:hover { filter: brightness(.95); text-decoration: underline; }
button.dt-commission.done { border: 0; cursor: pointer; font-family: inherit; }
button.dt-commission.done:hover { background: #cfeedb; text-decoration: underline; }
.rcpt-sign .rcpt-closed { display: block; margin-top: 4px; font-size: .78rem; font-weight: 700; font-style: normal; color: #1a7f4e; }
@media print { .rcpt-sign .rcpt-closed { color: #000; } }
.x-zero { color: #b6c0d4; font-weight: 400; }
tr.x-empty-row td { opacity: .55; }
.x-share { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; width: 100%; }
.x-share-bar { flex: 0 1 70px; height: 8px; background: #eaf0fb; border-radius: 4px; overflow: hidden; display: inline-block; }
.x-share-bar i { display: block; height: 100%; background: #2f6fed; border-radius: 4px; }
.x-share b { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }

/* biểu đồ tròn tỷ trọng doanh thu phòng theo nguồn */
.x-pie-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.x-pie-legend { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.x-pie-row { display: grid; grid-template-columns: 14px minmax(80px, 1fr) 60px auto; align-items: center; gap: 10px; padding: 7px 10px; border: 0; background: transparent; border-radius: 8px; font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.x-pie-row:hover { background: #eef4ff; }
.x-pie-row i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.x-pie-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; font-weight: 600; }
.x-pie-row b { text-align: right; font-variant-numeric: tabular-nums; }
.x-pie-amt { color: #64748b; font-size: .84rem; font-variant-numeric: tabular-nums; text-align: right; min-width: 110px; }
circle.x-slice { cursor: pointer; transition: stroke-width .12s; }
circle.x-slice:hover { stroke-width: 30; }

/* bảng 60% trái, biểu đồ tròn 40% phải */
.x-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 820px) { .x-split { grid-template-columns: 1fr; } }
.x-split-main, .x-split-side { min-width: 0; }
.x-compact .rp-roomtbl th, .x-compact .rp-roomtbl td { padding: 8px 8px; font-size: .84rem; }
.x-split-side .x-pie-wrap { flex-direction: column; align-items: stretch; gap: 10px; }
.x-split-side .x-pie-wrap > svg { align-self: center; }
.x-split-side .x-pie-legend { flex: none; }
.x-split-side .x-pie-row { grid-template-columns: 14px minmax(60px, 1fr) 54px auto; }
.x-split-side .x-pie-amt { display: inline; min-width: 0; font-size: .8rem; }
.x-split-side { display: flex; flex-direction: column; gap: 12px; }
.x-pie-row.plain { cursor: default; }
.x-pie-row.plain:hover { background: transparent; }

/* hai bánh cạnh nhau ở nửa phải, ghi % trên bánh */
.x-split-side { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 820px) { .x-split-side { grid-template-columns: 1fr; } }
.x-split-side .dcard { padding: 12px; }
.x-split-side .dcard h3 { font-size: .98rem; }
.x-pie { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.x-pie-slice { stroke: #fff; stroke-width: 2; }
.x-pie-slice.click { cursor: pointer; }
.x-pie-slice.click:hover { filter: brightness(1.08); }
.x-pie-pct { fill: #fff; font-size: 13px; font-weight: 800; pointer-events: none; paint-order: stroke; stroke: rgba(15, 23, 42, .25); stroke-width: 2px; }
.x-pie-total { margin: 6px 0 0; text-align: center; font-size: .82rem; color: #64748b; font-weight: 600; }
.x-split-side .x-pie-row { grid-template-columns: 12px minmax(40px, 1fr) auto; padding: 5px 6px; font-size: .84rem; gap: 8px; }
.x-split-side .x-pie-amt { min-width: 0; font-size: .78rem; white-space: nowrap; }
.x-split-main.x-compact .rp-roomtbl th, .x-split-main.x-compact .rp-roomtbl td { padding: 7px 6px; font-size: .78rem; }
.x-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 4px 0; font-size: .82rem; }
.x-more .btn { margin-left: 0; }
tr[hidden] { display: none; }

.au-who { font-weight: 600; font-size: .88rem; }
.au-fac { font-size: .85rem; color: var(--muted); }
.au-flag { text-align: right; }
.au-banner { background: #fff7e6; border: 1px solid #f5c26b; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-weight: 600; }
.au-banner[hidden] { display: none; }
.au-row.attn .au-flag .badge { font-weight: 700; }
@media (max-width: 760px) { .au-row { grid-template-columns: 48px 1fr; } .au-who, .au-fac, .au-flag { grid-column: 2; text-align: left; } }

.au-ico { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.au-tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-right: 4px; vertical-align: 1px; }
.au-desc { display: block; font-size: .95rem; }
.au-m { display: inline-flex; align-items: center; gap: 4px; margin-right: 12px; }
.au-m svg { opacity: .7; }
.au-m.reason { font-style: italic; }
.k-ok { background: #dcfce7; color: #15803d; } .k-edit { background: #dbeafe; color: #1d4ed8; } .k-bad { background: #fee2e2; color: #b91c1c; }
.k-money { background: #fef3c7; color: #b45309; } .k-in { background: #cffafe; color: #0e7490; } .k-out { background: #ffedd5; color: #c2410c; }
.k-acc { background: #ede9fe; color: #6d28d9; } .k-cfg { background: #e2e8f0; color: #475569; }
.au-row.attn .au-ico { box-shadow: 0 0 0 3px #f5c26b; }

.au-chartbox { padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
.au-charttitle { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: .9rem; }
.au-legend { font-size: .8rem; color: var(--muted); } .au-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 3px 0 8px; vertical-align: -1px; }
.au-legend i.o, .au-bar i.o { background: #60a5fa; } .au-legend i.a, .au-bar i.a { background: #f59e0b; }
.au-chart { display: flex; gap: 6px; align-items: flex-end; height: 130px; overflow-x: auto; }
.au-col { flex: 1 0 34px; max-width: 70px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; font-size: .72rem; }
.au-colnum { font-weight: 700; margin-bottom: 2px; }
.au-bar { width: 100%; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; max-height: 90px; }
.au-bar i { display: block; width: 100%; } .au-bar i.o { border-radius: 4px 4px 0 0; } .au-bar i.a { border-radius: 4px 4px 0 0; }
.au-collbl { color: var(--muted); margin-top: 3px; }
.au-what { margin: 0 0 10px; font-size: .9rem; } .au-what summary { cursor: pointer; color: var(--brand); font-weight: 600; } .au-what ul { margin: 6px 0 0; padding-left: 20px; color: var(--muted); }

/* Dashboard: thẻ bấm được, tiêu đề từng khối, thanh lấp đầy */
.dash-sec { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 8px; }
.dash-sec .dash-h { margin: 0; }
.dash-sec .muted { font-size: .82rem; }
.kpi.click { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.kpi.click:hover, .kpi.click:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,30,60,.18); }
.kpi.click:focus-visible { outline: 2px solid var(--brand); }
.kpis.act .kpi.red, .kpis.act .kpi.orange { box-shadow: 0 0 0 2px rgba(220,38,38,.25), 0 1px 4px rgba(15,30,60,.10); }
.kpis.act .kpi.gray { opacity: .72; }
.kpi.occ .kpi-val { font-size: 1.2rem; }
.occ-meter { height: 10px; background: rgba(255,255,255,.7); border-radius: 999px; overflow: hidden; }
.occ-meter i { display: block; height: 100%; background: #16a34a; border-radius: 999px; }
@media (min-width: 1100px) { .kpis.small.with-occ { grid-template-columns: 2fr repeat(3, 1fr); } }
table tr.click { cursor: pointer; } table tr.click:hover td { background: #f5f8ff; }

/* Phòng trống sắp tới */
.vc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.vc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.vc-chip { background: #f1f5f9; border-radius: 999px; padding: 4px 12px; font-size: .85rem; }
.vc-chip b { font-size: 1.05rem; }
.vc-chip.now { background: #dcfce7; color: #166534; }
.vc-axis { display: flex; justify-content: space-between; margin: 0 86px 2px 76px; font-size: .72rem; color: var(--muted); }
.vc-list { max-height: 520px; overflow-y: auto; }
.vc-fac { display: flex; align-items: center; gap: 6px; padding: 8px 4px 4px; margin-top: 4px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); }
.vc-row { display: grid; grid-template-columns: 64px 1fr 82px; gap: 12px; align-items: center; padding: 7px 4px; border-bottom: 1px solid #f1f4f9; }
.vc-row:hover { background: #f5f8ff; }
.vc-room { font-weight: 700; font-size: 1.02rem; }
.vc-track { position: relative; height: 14px; background: repeating-linear-gradient(90deg, #e2e8f0 0, #e2e8f0 1px, #f1f5f9 1px, #f1f5f9 100%); background-size: calc(100% / 7) 100%; border-radius: 7px; overflow: hidden; }
.vc-seg { position: absolute; top: 0; bottom: 0; background: #60a5fa; border-radius: 7px; }
.vc-seg.now { background: #22c55e; }
.vc-seg.open { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); }
.vc-note { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.vc-tag { text-align: center; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 3px 6px; background: #dbeafe; color: #1d4ed8; }
.vc-tag.now { background: #dcfce7; color: #166534; }
@media (max-width: 640px) { .vc-axis { margin: 0 0 2px 0; } .vc-row { grid-template-columns: 52px 1fr; } .vc-tag { grid-column: 2; justify-self: start; } }

/* Phòng trống: dạng ô vuông gọn (thay thanh thời gian) */
.vc-list { max-height: none; overflow: visible; }
.vc-fac { border: 0; padding: 10px 2px 6px; position: static; }
.vc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vc-tile { border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 12px; padding: 10px 12px; }
.vc-tile.now { border-color: #86efac; background: #f0fdf4; }
.vc-tile:hover { box-shadow: 0 4px 12px rgba(15,30,60,.14); }
.vc-tile .vc-room { font-size: 1.3rem; }
.vc-l1 { font-weight: 700; color: #1d4ed8; font-size: .9rem; }
.vc-tile.now .vc-l1 { color: #15803d; }
.vc-l2 { font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* Phòng trống: xanh lá = chưa có khách đặt tiếp, cam = đã có khách đặt tiếp */
.vc-tile.free { border-color: #4ade80; background: #f0fdf4; } .vc-tile.free .vc-l1 { color: #15803d; }
.vc-tile.booked { border-color: #fdba74; background: #fff7ed; } .vc-tile.booked .vc-l1 { color: #c2410c; }
.vc-key { font-size: .8rem; color: var(--muted); margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.vc-key i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-left: 10px; } .vc-key i:first-child { margin-left: 0; }
.vc-key i.free { background: #4ade80; } .vc-key i.booked { background: #fb923c; }

/* Khách sắp đến / sắp đi */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .mv-grid { grid-template-columns: 1fr; } }
.mv-col { border-radius: 12px; padding: 10px 12px; border: 1px solid var(--line); }
.mv-col.in { background: #f0fdfa; border-color: #99f6e4; } .mv-col.out { background: #fff7ed; border-color: #fed7aa; }
.mv-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mv-col.in .mv-title svg { color: #0f766e; } .mv-col.out .mv-title svg { color: #c2410c; }
.mv-count { margin-left: auto; background: #fff; border-radius: 999px; padding: 0 10px; font-weight: 700; }
.mv-list { max-height: 360px; overflow-y: auto; }
.mv-day { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 8px 2px 3px; }
.mv-day.today { color: #b91c1c; }
.mv-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: baseline; background: #fff; border-radius: 8px; padding: 6px 10px; margin-bottom: 4px; }
.mv-row:hover { box-shadow: 0 2px 8px rgba(15,30,60,.14); }
.mv-room { font-weight: 800; } .mv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mv-sub { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.mv-empty { padding: 8px 2px; }

/* Khách sắp đến / sắp đi: dòng thời gian theo ngày */
.mv-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mv-chip { border: 1px solid var(--line); background: #f1f5f9; border-radius: 999px; padding: 5px 14px; font-size: .9rem; cursor: pointer; }
.mv-chip.in.on { background: #14b8a6; border-color: #14b8a6; color: #fff; } .mv-chip.out.on { background: #f97316; border-color: #f97316; color: #fff; } .mv-chip.all.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.mv-feed { max-height: 460px; overflow-y: auto; }
.mv-daybox { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); }
.mv-daybox.today { background: #fff7f7; border-radius: 10px; }
.mv-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #eff6ff; border-radius: 12px; padding: 8px 4px; }
.mv-daybox.today .mv-date { background: #fee2e2; }
.mv-date b { font-size: 1.7rem; line-height: 1; } .mv-date span { font-size: .78rem; color: var(--muted); margin-top: 2px; } .mv-date em { font-style: normal; font-size: .74rem; font-weight: 700; color: #1d4ed8; margin-top: 3px; }
.mv-daybox.today .mv-date em { color: #b91c1c; }
.mv-evs { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.mv-ev { display: grid; grid-template-columns: 118px 90px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; border-left: 5px solid; font-size: .98rem; }
.mv-ev.in { background: #f0fdfa; border-left-color: #14b8a6; } .mv-ev.out { background: #fff7ed; border-left-color: #f97316; }
.mv-ev:hover { box-shadow: 0 3px 10px rgba(15,30,60,.15); }
.mv-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .82rem; }
.mv-tag.in { color: #0f766e; } .mv-tag.out { color: #c2410c; }
.mv-ev .mv-room { font-weight: 800; } .mv-ev .mv-name { font-weight: 600; } .mv-ev .mv-sub { font-size: .85rem; }
@media (max-width: 760px) { .mv-daybox { grid-template-columns: 64px 1fr; } .mv-ev { grid-template-columns: 1fr auto; } .mv-ev .mv-tag { grid-column: 1 / -1; } }

/* Khách sắp đến / sắp đi: bản đơn giản (ghi đè bản trước) */
.mv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .mv-grid2 { grid-template-columns: 1fr; } }
.mv-grid2 .mv-col { padding: 0; border: 0; background: none; }
.mv-grid2 .mv-title { padding: 8px 12px; border-radius: 10px 10px 0 0; margin: 0; color: #fff; }
.mv-grid2 .mv-col.in .mv-title { background: #14b8a6; } .mv-grid2 .mv-col.out .mv-title { background: #f97316; }
.mv-grid2 .mv-count { background: rgba(255,255,255,.28); color: #fff; }
.mv-line { display: grid; grid-template-columns: 78px 54px 1fr; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-top: 0; font-size: 1rem; }
.mv-line:last-child { border-radius: 0 0 10px 10px; }
.mv-line:hover { background: #f5f8ff; }
.mv-line.today { background: #fff7f7; }
.mv-line .mv-d { color: var(--muted); font-weight: 600; } .mv-line.today .mv-d { color: #b91c1c; font-weight: 800; }
.mv-line .mv-r { font-weight: 800; } .mv-line .mv-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-grid2 .mv-empty { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; padding: 12px; margin: 0; }

/* Khách sắp đến / sắp đi: màu đậm hơn, dễ phân biệt nhận và trả */
.mv-grid .mv-col { padding: 0; overflow: hidden; border-width: 2px; }
.mv-grid .mv-col.in { border-color: #14b8a6; background: #f0fdfa; } .mv-grid .mv-col.out { border-color: #f97316; background: #fff7ed; }
.mv-grid .mv-title { margin: 0; padding: 9px 14px; color: #fff; font-size: 1rem; }
.mv-grid .mv-col.in .mv-title { background: #0d9488; } .mv-grid .mv-col.out .mv-title { background: #ea580c; }
.mv-grid .mv-col.in .mv-title svg, .mv-grid .mv-col.out .mv-title svg { color: #fff; }
.mv-grid .mv-count { background: #fff; } .mv-grid .mv-col.in .mv-count { color: #0f766e; } .mv-grid .mv-col.out .mv-count { color: #c2410c; }
.mv-grid .mv-list { padding: 4px 10px 10px; }
.mv-grid .mv-day { display: inline-block; margin: 10px 0 4px; padding: 2px 10px; border-radius: 999px; font-size: .78rem; color: #fff; background: #64748b; }
.mv-grid .mv-col.in .mv-day { background: #14b8a6; } .mv-grid .mv-col.out .mv-day { background: #f97316; }
.mv-grid .mv-col .mv-day.today { background: #dc2626; }
.mv-grid .mv-row { border-left: 5px solid #cbd5e1; box-shadow: 0 1px 2px rgba(15,30,60,.08); }
.mv-grid .mv-col.in .mv-row { border-left-color: #14b8a6; } .mv-grid .mv-col.out .mv-row { border-left-color: #f97316; }
.mv-grid .mv-room { color: #0f172a; font-size: 1.05rem; } .mv-grid .mv-name { color: #1e293b; font-weight: 600; }
.mv-grid .mv-sub { color: #475569; font-size: .82rem; }
.mv-grid .mv-empty { padding: 12px 14px; }

/* Khách sắp đến / sắp đi: bản tinh tế (nền trắng, màu dịu chỉ ở điểm nhấn) */
.dash-moves .mv-grid .mv-col { background: #fff; border: 1px solid #e6eaf2; border-radius: 14px; box-shadow: 0 1px 3px rgba(15,30,60,.06); overflow: hidden; padding: 0; }
.dash-moves .mv-grid .mv-title { background: none; color: #1e293b; padding: 12px 16px 8px; margin: 0; font-size: 1rem; gap: 10px; }
.dash-moves .mv-grid .mv-title svg { box-sizing: content-box; padding: 6px; border-radius: 9px; }
.dash-moves .mv-grid .mv-col.in .mv-title svg { background: #e6f6f4; color: #0f766e; }
.dash-moves .mv-grid .mv-col.out .mv-title svg { background: #fdf0e6; color: #b45309; }
.dash-moves .mv-grid .mv-count { background: #f1f5f9; color: #475569; font-size: .85rem; padding: 1px 10px; }
.dash-moves .mv-grid .mv-list { padding: 0 8px 10px; }
.dash-moves .mv-grid .mv-day, .dash-moves .mv-grid .mv-col .mv-day { display: block; background: none; color: #94a3b8; padding: 10px 8px 4px; margin: 0; border-radius: 0; font-size: .74rem; font-weight: 700; letter-spacing: .05em; }
.dash-moves .mv-grid .mv-col .mv-day.today { background: none; color: #dc2626; }
.dash-moves .mv-grid .mv-col .mv-day.today::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #dc2626; margin-right: 6px; vertical-align: 1px; }
.dash-moves .mv-grid .mv-row { background: none; border: 0; border-radius: 10px; box-shadow: none; padding: 7px 8px; margin: 0; grid-template-columns: 52px 1fr auto; }
.dash-moves .mv-grid .mv-row:hover { background: #f6f8fc; box-shadow: none; }
.dash-moves .mv-grid .mv-room { text-align: center; border-radius: 8px; padding: 2px 0; font-size: .95rem; font-weight: 700; }
.dash-moves .mv-grid .mv-col.in .mv-room { background: #e6f6f4; color: #0f766e; }
.dash-moves .mv-grid .mv-col.out .mv-room { background: #fdf0e6; color: #b45309; }
.dash-moves .mv-grid .mv-name { color: #1e293b; font-weight: 500; }
.dash-moves .mv-grid .mv-sub { color: #94a3b8; font-size: .8rem; }
.dash-moves .mv-grid .mv-empty { padding: 4px 16px 14px; }
.dash-moves .mv-grid .mv-col.in .mv-title, .dash-moves .mv-grid .mv-col.out .mv-title { background: none; color: #1e293b; }
.dash-moves .mv-grid .mv-col.in .mv-count, .dash-moves .mv-grid .mv-col.out .mv-count { background: #f1f5f9; color: #475569; }
.dash-moves .mv-grid .mv-col.in { border: 1px solid #e6eaf2; background: #fff; } .dash-moves .mv-grid .mv-col.out { border: 1px solid #e6eaf2; background: #fff; }
.dash-moves .mv-grid .mv-col.in .mv-row, .dash-moves .mv-grid .mv-col.out .mv-row { border-left: 0; }

/* Khách sắp đến / sắp đi: tông ấm (kem, đất nung, xanh rêu) */
.dash-moves .mv-grid .mv-col, .dash-moves .mv-grid .mv-col.in, .dash-moves .mv-grid .mv-col.out { background: #fffcf7; border-color: #efe4d4; box-shadow: 0 1px 4px rgba(120,80,30,.08); }
.dash-moves .mv-grid .mv-col.in .mv-title, .dash-moves .mv-grid .mv-col.out .mv-title { color: #3f3a34; }
.dash-moves .mv-grid .mv-col.in .mv-title svg { background: #eef3dc; color: #5f7a1f; }
.dash-moves .mv-grid .mv-col.out .mv-title svg { background: #fbe6d8; color: #bf5a22; }
.dash-moves .mv-grid .mv-col.in .mv-count, .dash-moves .mv-grid .mv-col.out .mv-count { background: #f6ecdc; color: #7a6548; }
.dash-moves .mv-grid .mv-col .mv-day { color: #b3a48f; }
.dash-moves .mv-grid .mv-col .mv-day.today { color: #c2410c; }
.dash-moves .mv-grid .mv-col .mv-day.today::before { background: #c2410c; }
.dash-moves .mv-grid .mv-row:hover { background: #fbf3e6; }
.dash-moves .mv-grid .mv-col.in .mv-room { background: #eef3dc; color: #566f1a; }
.dash-moves .mv-grid .mv-col.out .mv-room { background: #fbe6d8; color: #b4501b; }
.dash-moves .mv-grid .mv-name { color: #3f3a34; }
.dash-moves .mv-grid .mv-sub { color: #aa9b86; }

/* Tình hình hôm nay: các ô chia đều, ô phòng đang có khách thu gọn */
@media (min-width: 1100px) { .kpis.small.with-occ { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.kpi.occ .kpi-val { font-size: 1.05rem; }

/* Khách sắp đến / sắp đi: nhận = xanh lá, trả = đỏ hồng */
.dash-moves .mv-grid .mv-col.in .mv-title svg, .dash-moves .mv-grid .mv-col.in .mv-room { background: #e3f4e6; color: #2e7d46; }
.dash-moves .mv-grid .mv-col.out .mv-title svg, .dash-moves .mv-grid .mv-col.out .mv-room { background: #fde6e8; color: #c23a4a; }
.dash-moves .mv-grid .mv-col.in { border-color: #d3ead8; background: #fbfefb; }
.dash-moves .mv-grid .mv-col.out { border-color: #f4d3d7; background: #fffafa; }
.dash-moves .mv-grid .mv-col.in .mv-count { background: #e3f4e6; color: #2e7d46; }
.dash-moves .mv-grid .mv-col.out .mv-count { background: #fde6e8; color: #c23a4a; }
.dash-moves .mv-grid .mv-col.in .mv-row:hover { background: #f1f9f2; } .dash-moves .mv-grid .mv-col.out .mv-row:hover { background: #fff1f2; }
.dash-moves .mv-grid .mv-col .mv-day.today, .dash-moves .mv-grid .mv-col .mv-day.today::before { color: #c23a4a; }
.dash-moves .mv-grid .mv-col .mv-day.today::before { background: #c23a4a; }

/* Thu và chi theo ngày */
.tc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: .9rem; }
.tc-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 10px; } .tc-legend i:first-child { margin-left: 0; }
.tc-legend .muted { margin-left: auto; font-size: .8rem; }
.tc-t { background: #3b82f6; } .tc-c { background: #ef6a6a; }
.tc-scroll { overflow-x: auto; }
.tc-plot { display: flex; gap: 4px; height: 240px; min-width: 100%; padding-top: 6px; border-bottom: 1px solid var(--line); }
.tc-day { flex: 1 0 28px; min-width: 28px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; position: relative; }
.tc-day:hover { background: #f5f8ff; border-radius: 6px; }
.tc-day.today { background: #fff7e6; border-radius: 6px; }
.tc-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; padding: 0 2px; }
.tc-bars i { flex: 1; display: block; border-radius: 3px 3px 0 0; min-height: 0; }
.tc-lbl { text-align: center; font-size: .7rem; color: var(--muted); padding: 4px 0 2px; }

/* Lịch phòng: ô thống kê bấm được để lọc nhanh */
.bk-stat.click { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.bk-stat.click:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,30,60,.16); }
.bk-stat.on { box-shadow: 0 0 0 2px #2563eb, 0 4px 12px rgba(37,99,235,.25); }

/* Lịch phòng: một thanh duy nhất gồm tháng, bộ lọc và ô thống kê thu gọn */
.tl-nav.tl-one { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tl-one > input[type=search] { width: 190px; height: 38px; padding: 0 10px; }
.tl-one > select { height: 38px; padding: 0 8px; max-width: 170px; }
.tl-one .bk-stats { margin-left: 0; gap: 6px; align-self: center; flex-wrap: wrap; }
.tl-one .bk-stat { min-width: 0; padding: 3px 10px 3px 6px; gap: 6px; border-radius: 9px; }
.tl-one .bk-stat-ic { width: 26px; height: 26px; border-radius: 7px; }
.tl-one .bk-stat-ic svg { width: 15px; height: 15px; }
.tl-one .bk-stat-tx { flex-direction: row; align-items: baseline; gap: 5px; }
.tl-one .bk-stat-tx b { font-size: 1rem; } .tl-one .bk-stat-tx span { font-size: .74rem; }
.tl-one .tl-key { margin-left: auto; }

.tl-one > input[type=search] { width: 160px; } .tl-one > select { max-width: 145px; }
.tl-one .bk-stats { margin-left: auto; flex-wrap: nowrap; }
/* Lịch phòng: ô thống kê to hơn một chút */
.tl-one .bk-stats { gap: 8px; }
.tl-one .bk-stat { padding: 5px 14px 5px 8px; gap: 8px; border-radius: 11px; }
.tl-one .bk-stat-ic { width: 32px; height: 32px; border-radius: 9px; }
.tl-one .bk-stat-ic svg { width: 18px; height: 18px; }
.tl-one .bk-stat-tx b { font-size: 1.2rem; } .tl-one .bk-stat-tx span { font-size: .85rem; }

/* Thanh gộp của trang Đặt phòng: nút đặt phòng mới nằm bên phải */
.tl-one .bk-new, .bk-tbl-bar .bk-new { margin-left: auto; white-space: nowrap; height: 38px; }
.tl-one .bk-stats { margin-left: 0; }

/* Lịch phòng: vừa khít chiều cao màn hình, không cuộn dọc (JS đặt --tl-row-h; đủ chỗ tối thiểu 30 hàng) */
.tl-scroll { max-height: none !important; min-height: 0 !important; overflow-y: visible; }
.tl-scroll .tl-row { min-height: var(--tl-row-h, 52px) !important; height: var(--tl-row-h, auto); }
.tl-scroll .tl-head { min-height: var(--tl-head-h, 46px) !important; height: var(--tl-head-h, auto); }
.tl-scroll .tl-cell { min-height: 0 !important; }
.tl-scroll .tl-name { padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; overflow: hidden; }
.tl-scroll .tl-name b { font-size: calc(var(--tl-fs, .84rem) + .16rem); }
.tl-scroll .tl-name .badge { font-size: .62rem; padding: 0 5px; line-height: 1.5; }
.tl-scroll .tl-facility { height: var(--tl-row-h, auto); display: flex; align-items: center; padding-top: 0; padding-bottom: 0; font-size: calc(var(--tl-fs, .84rem) + .06rem); }
.tl-scroll .tl-bar { margin: calc(var(--tl-row-h, 52px) * .13) 2px; font-size: var(--tl-fs, .84rem); border-radius: 6px; padding: 0 6px; }
.tl-scroll .tl-day { padding: 3px 0; }

/* Thanh công cụ Đặt phòng: luôn một hàng, co theo bề ngang màn hình (kích thước tính theo em, chữ co theo vw) */
.tl-nav.tl-one { flex-wrap: nowrap; font-size: clamp(10px, 0.82vw, 15px); gap: .6em; padding: .6em .8em; }
.tl-one > * { flex: 0 0 auto; min-width: 0; }
.tl-one .seg-b, .tl-one .tl-today, .tl-one .tl-month { font-size: 1em; padding: .45em .9em; }
.tl-one .tl-month { min-width: 0; padding: 0 .6em; }
.tl-one .tl-step { width: 2.2em; height: 2.2em; }
.tl-one > input[type=search] { flex: 1 1 9em; width: auto; min-width: 4.5em; height: 2.7em; font-size: 1em; padding: 0 .7em; }
.tl-one > select { flex: 0 1 11em; width: auto; max-width: none; min-width: 6em; height: 2.7em; font-size: 1em; padding: 0 .4em; }
.tl-one .bk-stats { flex: 0 1 auto; flex-wrap: nowrap; gap: .5em; }
.tl-one .bk-stat { padding: .35em .9em .35em .5em; gap: .5em; min-width: 0; border-radius: .8em; }
.tl-one .bk-stat-ic { width: 2.3em; height: 2.3em; border-radius: .7em; }
.tl-one .bk-stat-ic svg { width: 1.35em; height: 1.35em; }
.tl-one .bk-stat-tx { white-space: nowrap; }
.tl-one .bk-stat-tx b { font-size: 1.3em; } .tl-one .bk-stat-tx span { font-size: .92em; }
.tl-one .bk-new { margin-left: auto; height: 2.7em; padding: 0 1.1em; font-size: 1em; white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 1250px) { .tl-one .bk-stat-tx span { display: none; } .tl-one .bk-stat { padding-right: .7em; } }
@media (max-width: 950px) { .tl-one .bk-stat-ic { display: none; } .tl-one .tl-today span { display: none; } .tl-one .bk-new { padding: 0 .8em; } }
/* thanh lọc của dạng Bảng: cũng một hàng */
.filters.bk-tbl-bar { flex-wrap: nowrap; font-size: clamp(10px, 0.82vw, 15px); gap: .6em; align-items: flex-end; }
.bk-tbl-bar > * { min-width: 0; }
.bk-tbl-bar .field { flex: 1 1 8em; min-width: 5em; }
.bk-tbl-bar input, .bk-tbl-bar select, .bk-tbl-bar .dp-btn { font-size: 1em; width: 100%; }
.bk-tbl-bar .bk-new { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }

/* Lịch phòng và bảng danh sách: co theo bề ngang màn hình, không cuộn ngang */
.tl-wrap { --tl-name: clamp(48px, 6vw, 110px); }
.tl-scroll > .tl-row, .tl-scroll > .tl-facility { min-width: 0 !important; }
.tl-scroll .tl-name { padding-left: .5em; padding-right: .3em; font-size: clamp(9px, .8vw, 14px); }
.tl-scroll .tl-day { font-size: clamp(8px, .62vw, 12px); }
.tl-scroll .tl-day span { font-size: clamp(9px, .75vw, 13px); }
.bk-tbl-bar ~ .card { overflow-x: visible; }
.bk-tbl-bar ~ .card .tablewrap { overflow-x: visible; }
.bk-tbl-bar ~ .card table { width: 100%; table-layout: auto; font-size: clamp(10px, .85vw, 15px); }
.bk-tbl-bar ~ .card th, .bk-tbl-bar ~ .card td { padding: .55em .6em; white-space: normal; word-break: break-word; }
.bk-tbl-bar ~ .card td.num, .bk-tbl-bar ~ .card th.num { white-space: nowrap; }

/* Tên người dùng ở thanh trên: bấm để xổ menu */
.topbar .who-wrap { position: relative; display: inline-block; }
.topbar .who .who-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: #c7d2e6; font-size: inherit; padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.topbar .who .who-btn:hover, .topbar .who .who-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .14); color: #fff; }
.who-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,30,60,.22); padding: 6px; z-index: 60; }
.who-menu[hidden] { display: none; }
.topbar .who .who-menu .who-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; color: #1b2437; padding: 9px 12px; border-radius: 8px; font-size: .92rem; cursor: pointer; }
.topbar .who .who-menu .who-item:hover { background: #eef3ff; color: #1d4ed8; }
@media (max-width: 760px) { .topbar .who-name { display: inline-flex; } }

/* Tab Mã lỗi trong Cài đặt: bảng chữ, cột tự co giãn, chữ xuống dòng */
table.errcodes { width: 100%; border-collapse: collapse; table-layout: auto; }
table.errcodes th, table.errcodes td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
table.errcodes th:first-child, table.errcodes td:first-child { width: 26%; font-weight: 600; }
table.errcodes th:nth-child(2), table.errcodes td:nth-child(2) { width: 32%; }
/* Tab Mã lỗi: thẻ rộng hết khung, bảng không kéo ngang */
.set-pane > .card.pad.errcodes-card { max-width: none; }
.errcodes-wrap { overflow-x: auto; cursor: grab; }
.errcodes-wrap.grabbing { cursor: grabbing; user-select: none; }
table.errcodes { min-width: 0; }

/* Cài đặt chung: các thẻ xếp dọc, gọn */
.gen-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.gen-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1100px) { .gen-wrap { grid-template-columns: 1fr; } }
.gen-col > .card.pad, .gen-card { margin: 0; max-width: none; }
.gen-card h3, .gen-col > .card.pad h3 { margin: 0 0 6px; }
.gen-card .muted { margin: 0 0 12px; }
.gen-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.gen-logo-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.gen-logo { height: 64px; max-width: 220px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; padding: 6px; background: #fff; }
.gen-logo-row .gen-actions { margin-top: 0; }
.gen-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 6px 0 12px; }
.gen-label { font-weight: 600; }
.gen-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.gen-fields .field { margin-bottom: 12px; min-width: 0; }
.gen-fields input { width: 100%; }
@media (max-width: 560px) { .gen-fields { grid-template-columns: 1fr; } }
/* Nút "+ Thu cọc còn thiếu" dưới bảng thanh toán: cách bảng một khoảng, không viền gạch */
.btnrow.pay-add, .card .btnrow.pay-add, .card.pad .btnrow.pay-add { margin-top: 14px; padding: 0; border: 0; justify-content: flex-start; }

/* Trang Bảng giá */
.price-wrap { display: flex; flex-direction: column; gap: 14px; }
.price-card h3 { margin: 0 0 10px; }
.price-tbl { width: 100%; border-collapse: collapse; }
.price-tbl th, .price-tbl td { padding: 12px 16px; text-align: left; border: 1px solid var(--line); }
.price-tbl thead th { background: #dfe8f7; color: #1f2d4a; font-weight: 700; }
.price-tbl .price-rooms { font-size: 1.1rem; font-weight: 600; letter-spacing: .02em; }
.price-tbl .price-val { text-align: right; width: 34%; font-weight: 700; white-space: nowrap; }
.price-tbl tbody tr:nth-child(even) { background: #f3f6fc; }
.price-tbl tr.price-none td { color: var(--muted); font-weight: 500; }
.price-edit h4 { margin: 4px 0 8px; }
.price-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
.price-edit-grid .field { margin-bottom: 10px; min-width: 0; }
.price-edit-grid input { width: 100%; }

/* Trang Bảng giá: hai cột 30% bảng giá | 70% ảnh phòng */
.price-fac { margin: 6px 0 0; }
.price-layout { display: grid; grid-template-columns: 3fr 7fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .price-layout { grid-template-columns: 1fr; } }
.price-layout .card { margin: 0; max-width: none; min-width: 0; }
.price-card .price-tbl th, .price-card .price-tbl td { padding: 10px 12px; }
.price-card .price-tbl .price-rooms { font-size: 1rem; }
.price-card .price-tbl .price-val { width: auto; }
.album-card h3, .price-card h3 { margin: 0 0 10px; }
.acc-list { display: flex; flex-direction: column; gap: 8px; }
.acc-item { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.acc-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f3f6fc; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.acc-head:hover { background: #e8eefb; }
.acc-title { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-title b { font-size: 1rem; }
.acc-title small { color: var(--muted); }
.acc-meta { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.acc-head svg { transition: transform .15s; flex: none; }
.acc-head.open svg { transform: rotate(180deg); }
.acc-album { padding: 12px; border-top: 1px solid var(--line); }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.album-thumb { padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #e8eefb; cursor: zoom-in; aspect-ratio: 4 / 3; }
.album-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.album-thumb:hover img { transform: scale(1.04); }
/* Xem ảnh phóng to */
.pv-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 12, 24, .88); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
.pv-box { max-width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pv-img { max-width: 100%; max-height: calc(100vh - 90px); border-radius: 10px; object-fit: contain; background: #111; }
.pv-count { color: #e5e9f5; font-size: .95rem; }
.pv-nav { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pv-nav:hover { background: rgba(255, 255, 255, .3); }
.pv-close { position: absolute; top: 12px; right: 18px; font-size: 2rem; line-height: 1; background: none; border: 0; color: #fff; cursor: pointer; }
/* Cài đặt > Bảng giá & ảnh phòng */
.rp-admin .gen-col { gap: 14px; }
.rp-group { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 12px; background: #fbfcff; }
.rp-group-head { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.rp-group-head input { flex: 1 1 200px; min-width: 0; }
.rp-label { font-weight: 600; margin: 8px 0 6px; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 600; }
.rp-chip input { margin: 0; }
.rp-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.rp-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #e8eefb; }
.rp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .75); color: #fff; cursor: pointer; line-height: 1; font-size: 1rem; }
.rp-del:hover { background: #b42318; }
/* Cài đặt > bảng giá sửa được: giống bảng ở trang Bảng giá */
.rp-pricebox .price-tbl .price-rooms { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rp-pricebox .price-tbl td.price-val { width: 40%; }
.rp-pricebox .pe-price { width: 100%; text-align: right; font-weight: 700; }
.pe-chip { padding: 4px 10px; border: 2px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font: inherit; font-weight: 700; }
.pe-chip:hover { border-color: #93b4f5; }
.pe-chip.sel { border-color: #2563eb; background: #e8f0ff; color: #1d4ed8; }
.pe-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pe-bar .pe-price { flex: 1 1 180px; width: auto; text-align: right; }
/* Kéo thả phòng giữa các dòng giá (Cài đặt > Bảng giá & ảnh phòng) */
.pe-chip { display: inline-block; padding: 5px 12px; border: 2px solid var(--line); border-radius: 999px; background: #fff; cursor: grab; font-weight: 700; user-select: none; touch-action: none; }
.pe-chip:hover { border-color: #93b4f5; background: #f3f7ff; }
.pe-chip.dragging { opacity: .35; }
.pe-ghost { position: fixed; z-index: 2000; pointer-events: none; padding: 5px 12px; border-radius: 999px; background: #2563eb; color: #fff; font-weight: 800; box-shadow: 0 6px 18px rgba(37, 99, 235, .4); }
.rp-pricebox .price-tbl tr.drop td { background: #dbeafe !important; outline: 2px dashed #2563eb; outline-offset: -3px; }
.rp-pricebox .price-tbl .price-rooms .muted { font-weight: 500; }
/* Nhóm ảnh trong Cài đặt: mỗi nhóm là một dòng xổ xuống */
.rp-acc { margin-bottom: 8px; }
.rp-acc > .rp-group { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin: 0; background: #fbfcff; }
/* Kéo thả đổi vị trí ảnh trong album */
.rp-photo { cursor: grab; user-select: none; }
.rp-photo.dragging { opacity: .35; outline: 2px dashed #2563eb; outline-offset: -2px; }
.rp-ghost { position: fixed; z-index: 2000; pointer-events: none; width: 96px; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 22px rgba(15, 23, 42, .45); opacity: .92; transform: rotate(-3deg); }
.rp-ghost img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
/* Menu xổ chọn cơ sở dưới mục Bảng giá */
.nav-pop { position: fixed; z-index: 900; min-width: 200px; max-width: 280px; background: #fff; border: 1px solid #cfd9ec; border-radius: 12px; box-shadow: 0 10px 28px rgba(20, 33, 61, .22); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.nav-pop-item { text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: inherit; color: var(--ink); font-weight: 600; }
.nav-pop-item:hover { background: #eef4ff; color: #1d4ed8; }
/* Cài đặt > Bảng giá & ảnh phòng: mỗi cơ sở một dòng xổ xuống */
.rp-facs { display: flex; flex-direction: column; gap: 10px; }
.rp-fac { margin: 0; }
.rp-fac > .rp-fac-body { padding: 12px; border-top: 1px solid var(--line); background: #fbfcff; }
.rp-fac > .acc-head b { font-size: 1.05rem; }
/* Biểu tượng liên hệ (Zalo, WhatsApp, Telegram) trên thanh đầu trang, cạnh tên người dùng */
.contact-bar { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.contact-btn { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; transition: transform .12s, box-shadow .12s; }
.contact-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.contact-zalo { background: #0068ff; font-size: .62rem; letter-spacing: -.02em; }
.contact-whatsapp { background: #25d366; }
.contact-telegram { background: #229ed9; }
.contact-ic { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.contact-pop { text-align: center; }
.contact-img { max-width: 100%; max-height: 70vh; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
/* Cài đặt chung > Liên hệ */
.ct-row { display: grid; grid-template-columns: 90px 72px 1fr; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px dashed #e1e8f5; }
.ct-name { font-weight: 700; }
.ct-thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); background: #fff; }
.ct-empty { display: flex; align-items: center; justify-content: center; font-size: .78rem; color: var(--muted); background: #f3f6fc; }
.ct-row .gen-actions { margin-top: 0; }

/* ================= Điện thoại và iPad (≤ 1200px): thanh đầu trang gọn, menu trượt ngang từ trái sang phải ================= */
.nav-close { display: none; }
.who-logout { display: none !important; }
@media (max-width: 1200px) {
  .topbar { flex-wrap: nowrap; gap: 8px; padding: 6px 10px; min-height: 52px; }
  .menu-btn { display: inline-flex; align-items: center; justify-content: center; order: 0; min-width: 42px; min-height: 40px; padding: 4px 10px; flex: none; }
  .topbar .brand { order: 1; flex: none; }
  .topbar .brand > span { display: none; }
  .topbar .who { order: 3; margin-left: auto; gap: 6px; min-width: 0; }
  .topbar .who > button:not(.who-btn) { display: none; }       /* nút Đăng xuất riêng: đã chuyển vào menu tên người dùng */
  .who-logout { display: flex !important; }
  .topbar .who-name { display: inline-flex; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
  .contact-bar { margin-right: 0; gap: 4px; }
  .contact-btn { width: 26px; height: 26px; }
  .contact-zalo { font-size: .55rem; }
  .contact-btn svg { width: 15px; height: 15px; }
  /* ngăn menu: trượt từ mép trái sang phải */
  .topbar nav, .topbar.open nav {
    display: flex; flex-direction: column; grid-template-columns: none; gap: 4px;
    position: fixed; top: 0; left: 0; bottom: 0; width: min(80vw, 300px); max-width: 100%;
    margin: 0; padding: 12px 10px 16px; overflow-y: auto; overflow-x: hidden;
    background: linear-gradient(180deg, #14213d, #1b2f57); z-index: 60;
    transform: translateX(-102%); visibility: hidden;
    transition: transform .26s ease, visibility 0s linear .26s;
    box-shadow: 6px 0 24px rgba(0, 0, 0, .35);
  }
  .topbar.open nav { transform: translateX(0); visibility: visible; transition: transform .26s ease, visibility 0s; }
  .topbar nav a { padding: 12px 14px; font-size: 1rem; background: transparent; }
  .topbar nav a.active { background: rgba(255, 255, 255, .16); }
  .nav-close { display: block; align-self: flex-end; width: 40px; height: 36px; margin-bottom: 4px; border: 0; background: none; color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
  /* nền tối phía sau ngăn menu */
  .topbar.open::after { content: ''; position: fixed; inset: 0; background: rgba(8, 12, 24, .55); z-index: 50; }
}

/* Nút liên hệ: kiểu riêng phải "thắng" kiểu chung `.topbar .who button` (viền trong suốt, padding 12px) */
.topbar .who .contact-btn { width: 30px; height: 30px; min-height: 0; min-width: 0; padding: 0; border: 0; border-radius: 50%; color: #fff; }
.topbar .who .contact-zalo { background: #0068ff; }
.topbar .who .contact-whatsapp { background: #25d366; }
.topbar .who .contact-telegram { background: #229ed9; }
.topbar .who .contact-btn:hover { filter: brightness(1.1); }
@media (max-width: 760px) { .topbar .who .contact-btn { width: 26px; height: 26px; } }
/* Đầu ngăn menu trượt: logo + tên + nút đóng (chỉ hiện ở màn hình hẹp) */
.nav-head { display: none; }
@media (max-width: 1200px) {
  .nav-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .14); color: #fff; }
  .nav-head .brand-logo { height: 32px; }
  .nav-head-name { font-weight: 700; font-size: 1.02rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-head .nav-close { align-self: auto; margin: 0; flex: none; }
}
/* Màn hình hẹp: nút ba gạch nằm bên phải thanh (sau tên người dùng) */
@media (max-width: 1200px) {
  .topbar .brand { order: 0; }
  .topbar .who { order: 1; margin-left: auto; }
  .menu-btn { order: 2; }
}

/* iPad: còn chỗ nên cho hiện tên người dùng đầy đủ hơn */
@media (min-width: 761px) and (max-width: 1200px) {
  .topbar .who-name { max-width: 240px; font-size: .9rem; }
  .topbar .brand > span { display: inline; }
  .contact-bar { gap: 8px; margin-right: 6px; }
}
/* Ảnh nhỏ đầu dòng nhóm ảnh */
.acc-thumb { flex: none; width: 56px; height: 42px; border-radius: 8px; object-fit: cover; background: #dfe8f7; border: 1px solid var(--line); display: block; }
.acc-thumb-empty { display: inline-flex; align-items: center; justify-content: center; color: #8a97b1; }
@media (max-width: 760px) { .acc-thumb { width: 46px; height: 36px; } }
.price-stamp { margin: 10px 0 0; font-size: .88rem; text-align: right; }

/* Nút thêm nhanh phiếu chi (góc phải dưới, mọi trang) */
.fab { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; box-shadow: 0 8px 22px rgba(37, 99, 235, .45); transition: transform .12s, box-shadow .12s; }
.fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37, 99, 235, .55); }
.fab:active { transform: translateY(0); }
.fab svg { flex: none; }
@media (max-width: 760px) { .fab { width: 54px; height: 54px; padding: 0; justify-content: center; } .fab .fab-label { display: none; } }
@media print { .fab { display: none !important; } }

/* Nút + thêm nhanh xổ ra 3 việc: Phiếu chi, Phiếu thu, Nhập số điện (PC, iPad, điện thoại) */
.fab-wrap { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab-wrap .fab { position: static; }
.fab-wrap.open .fab svg { transform: rotate(45deg); }
.fab svg { transition: transform .18s; }
.fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab-menu[hidden] { display: none; }
.fab-item { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 0; font: inherit; animation: fabIn .16s ease both; }
.fab-item:nth-child(2) { animation-delay: .04s; }
.fab-item:nth-child(1) { animation-delay: .08s; }
.fab-item-label { background: #fff; color: #1b2437; font-weight: 700; font-size: .92rem; padding: 7px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(15, 30, 60, .22); border: 1px solid var(--line); }
.fab-item-ic { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #1d4ed8; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(15, 30, 60, .25); border: 1px solid var(--line); }
.fab-item:hover .fab-item-ic { background: #e8f0ff; }
.fab-item:hover .fab-item-label { color: #1d4ed8; }
@keyframes fabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media print { .fab-wrap { display: none !important; } }

/* Nút + thêm nhanh: mọi khổ màn hình đều là nút tròn chỉ có dấu + (như điện thoại) */
.fab, .fab-wrap .fab { width: 54px; height: 54px; padding: 0; justify-content: center; gap: 0; }
.fab .fab-label { display: none; }
/* Logo + tên hệ thống trên thanh đầu trang: bấm để về Dashboard */
a.brand { color: inherit; text-decoration: none; cursor: pointer; border-radius: 8px; }
a.brand:hover { opacity: .9; }
a.brand:focus-visible { outline: 2px solid #93b4f5; outline-offset: 2px; }

/* ================= Trang Hướng dẫn sử dụng ================= */
.gd-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.gd-side { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 90px); }
.gd-search { width: 100%; }
.gd-toc { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.gd-toc-i { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: .9rem; cursor: pointer; color: var(--ink); }
.gd-toc-i:hover { background: #eef4ff; color: #1d4ed8; }
.gd-content { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gd-sec { margin: 0; scroll-margin-top: 76px; max-width: none; }
.gd-sec h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.12rem; }
.gd-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #2563eb; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; }
.gd-who { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: #eef4ff; color: #1d4ed8; font-size: .8rem; font-weight: 700; }
.gd-intro { margin: 4px 0 12px; color: #3b4a63; }
.gd-steps { margin: 12px 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.gd-steps li::marker { font-weight: 800; color: #2563eb; }
.gd-tipbox { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #fff8e6; border: 1px solid #f3d99a; }
.gd-tipbox ul { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.gd-tbl { width: 100%; border-collapse: collapse; margin: 8px 0; }
.gd-tbl th, .gd-tbl td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; font-size: .92rem; }
.gd-tbl th { background: #dfe8f7; }
@media (max-width: 1000px) {
  .gd-layout { grid-template-columns: 1fr; }
  .gd-side { position: static; max-height: none; }
  .gd-toc { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .gd-toc-i { white-space: nowrap; }
}
/* hình minh họa */
.gd-mock { margin: 10px 0 14px; padding: 14px; border: 1px dashed #b9c8e6; border-radius: 12px; background: #f6f9ff; overflow-x: auto; }
.gd-wrap { position: relative; display: inline-flex; max-width: 100%; }
.gd-wrap.gd-grow { flex: 1; min-width: 0; }
.gd-wrap > .gd-n { position: absolute; top: -9px; left: -9px; z-index: 2; }
.gd-n { width: 20px; height: 20px; border-radius: 50%; background: #dc2626; color: #fff; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.gd-legend { margin: 12px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; counter-reset: gdl; }
.gd-legend li { counter-increment: gdl; display: flex; gap: 8px; font-size: .92rem; }
.gd-legend li::before { content: counter(gdl); flex: none; width: 20px; height: 20px; border-radius: 50%; background: #dc2626; color: #fff; font-size: .72rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.gd-bar { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #14213d, #1b2f57); border-radius: 10px; padding: 10px 14px; color: #fff; min-width: 640px; }
.gd-logo { background: #fff; color: #14213d; font-weight: 800; font-size: .72rem; border-radius: 6px; padding: 5px 10px; }
.gd-tabs { display: flex; gap: 4px; overflow: hidden; }
.gd-tab { padding: 5px 9px; border-radius: 7px; font-size: .78rem; color: #c7d2e6; white-space: nowrap; }
.gd-tab.on { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 700; }
.gd-dots { display: inline-flex; gap: 5px; }
.gd-dot { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 800; color: #fff; }
.gd-dot.z { background: #0068ff; } .gd-dot.w { background: #25d366; } .gd-dot.t { background: #229ed9; }
.gd-user { font-size: .8rem; color: #c7d2e6; white-space: nowrap; }
.gd-menu { border: 1px solid rgba(255, 255, 255, .35); border-radius: 7px; padding: 3px 9px; }
.gd-screen { position: relative; min-height: 230px; border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 14px; }
.gd-lines { display: flex; flex-direction: column; gap: 10px; }
.gd-line { display: block; height: 12px; border-radius: 6px; background: #e3eaf6; }
.gd-line.l1 { width: 80%; } .gd-line.l2 { width: 60%; } .gd-line.l3 { width: 70%; }
.gd-fab-area { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.gd-fab-item { display: inline-flex; align-items: center; gap: 8px; }
.gd-fab-lbl { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 700; box-shadow: 0 2px 8px rgba(15, 30, 60, .15); }
.gd-fab-ic { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: #1d4ed8; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; box-shadow: 0 2px 8px rgba(15, 30, 60, .15); }
.gd-fab { width: 46px; height: 46px; border-radius: 50%; background: #2563eb; color: #fff; font-size: 1.5rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(37, 99, 235, .45); }
.gd-dash { display: flex; flex-direction: column; gap: 14px; }
.gd-row { display: flex; gap: 8px; flex-wrap: wrap; }
.gd-card { display: inline-flex; flex-direction: column; gap: 4px; min-width: 130px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.gd-card.a { background: #f3e9ff; } .gd-card.b { background: #dff7fb; } .gd-card.c { background: #ffe3e3; } .gd-card.d { background: #e1f6e7; } .gd-card.e { background: #e3edff; }
.gd-card-t { font-size: .75rem; color: #3b4a63; }
.gd-card-v { font-size: 1.2rem; font-weight: 800; }
.gd-form, .gd-dlg { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.gd-dlg.narrow { max-width: 460px; }
.gd-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.gd-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.gd-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; width: 100%; }
.gd-lbl { font-size: .72rem; font-weight: 700; color: #3b4a63; }
.gd-inp { display: block; border: 1px solid #b6c2dc; border-radius: 8px; padding: 6px 8px; font-size: .8rem; background: #fff; min-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-actions { display: flex; justify-content: flex-end; gap: 8px; width: 100%; }
.gd-btn { display: inline-block; padding: 6px 14px; border-radius: 8px; border: 1px solid #b6c2dc; background: #fff; font-size: .8rem; font-weight: 700; }
.gd-btn.pri { background: #2563eb; border-color: #2563eb; color: #fff; }
.gd-btn.sm { padding: 3px 10px; font-size: .72rem; }
.gd-dlg-h { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.gd-dlg-t { font-weight: 800; font-size: .85rem; }
.gd-badge { padding: 2px 10px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: .72rem; font-weight: 800; }
.gd-tabs2 { display: flex; gap: 4px; flex-wrap: wrap; }
.gd-tab2 { padding: 5px 10px; border-radius: 8px; background: #eef2fa; font-size: .76rem; font-weight: 700; color: #3b4a63; }
.gd-tab2.on { background: #2563eb; color: #fff; }
.gd-dlg-b { display: flex; flex-direction: column; gap: 8px; }
.gd-table { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 520px; }
.gd-tools { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.gd-chip { padding: 5px 12px; border-radius: 8px; border: 1px solid #b6c2dc; font-size: .78rem; font-weight: 700; background: #fff; }
.gd-tr { display: grid; grid-template-columns: .6fr 1.4fr 1fr 1fr 1fr 1fr; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); font-size: .8rem; }
.gd-tr.head { background: #dfe8f7; font-weight: 800; border-top: 0; }
.gd-td.n { text-align: right; } .gd-td.s { font-weight: 800; } .gd-td.warn { color: #b42318; font-weight: 800; }
.gd-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.gd-step { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.gd-step-n { width: 26px; height: 26px; border-radius: 50%; background: #dc2626; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; }
.gd-step-t { font-weight: 800; }
.gd-step-d { font-size: .8rem; color: #3b4a63; }
.gd-arrow { display: inline-flex; align-items: center; font-size: 1.4rem; color: #2563eb; font-weight: 800; }
.gd-two { display: grid; grid-template-columns: 3fr 7fr; gap: 12px; align-items: start; min-width: 520px; }
.gd-pt, .gd-acc { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; width: 100%; }
.gd-pt .gd-tr { grid-template-columns: 1.5fr 1fr; }
.gd-stamp { display: block; padding: 6px 10px; font-size: .72rem; color: var(--muted); text-align: right; }
.gd-acc-i { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--line); background: #f3f6fc; }
.gd-acc-i:first-child { border-top: 0; }
.gd-thumb { width: 44px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #cfe0ff, #9db9ee); }
.gd-acc-t { flex: 1; font-weight: 800; font-size: .82rem; }
.gd-acc-m { font-size: .75rem; color: var(--muted); }
.gd-set { display: grid; grid-template-columns: 200px 1fr; gap: 12px; min-width: 520px; align-items: start; }
.gd-set-menu { display: flex; flex-direction: column; gap: 3px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.gd-set-g { font-size: .65rem; font-weight: 800; letter-spacing: .06em; color: #64748b; margin-top: 6px; }
.gd-set-i { padding: 5px 8px; border-radius: 7px; font-size: .78rem; color: #1b2437; }
.gd-set-i.on { background: #2563eb; color: #fff; font-weight: 700; }
.gd-set-pane { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; width: 100%; }

/* danh sách khách ở: khung bảng 60% + khung ghi chú 40%, hai khung riêng cùng một hàng; chữ bảng thu nhỏ để đủ cột không phải cuộn ngang */
.guest-split { display: flex; gap: 14px; align-items: stretch; margin-bottom: 14px; }
.guest-split > .dt-card { margin-bottom: 0; }
.guest-split .guest-left { flex: 0 0 calc(60% - 7px); max-width: calc(60% - 7px); min-width: 0; }
.guest-split .guest-right { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.guest-split .guest-right textarea { width: 100%; box-sizing: border-box; resize: vertical; flex: 1; min-height: 110px; }
.guest-split .guest-right button { align-self: flex-end; }
.guest-split .guest-tbl.tbl-fixed { font-size: 12px; table-layout: fixed; width: 100%; min-width: 0; }
.guest-split .guest-tbl th { font-size: 11px; }
.guest-split .guest-tbl th, .guest-split .guest-tbl td { padding: 6px 4px; word-break: break-word; }
.guest-split .tablewrap { overflow-x: visible; }
@media (max-width: 720px) { .guest-split { flex-direction: column; } .guest-split .guest-left { flex-basis: auto; max-width: 100%; width: 100%; } }

/* biểu đồ dùng điện: tháng | cột (số kWh và tiền nằm trong cột); đường đỏ nét đứt là mức trung bình, nhãn kWh ở trên, nhãn tiền ở dưới */
.kwh-rows { }
.kwh-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px; align-items: center; }
.kwh-m { text-align: right; font-size: .82rem; font-weight: 600; color: #1e293b; font-variant-numeric: tabular-nums; }
.kwh-track { display: block; border-left: 2px solid #94a3b8; }
.kwh-bar { position: relative; display: flex; align-items: center; height: 42px; }
.kwh-top .kwh-bar, .kwh-foot .kwh-bar { height: 20px; }
.kwh-top .kwh-track, .kwh-foot .kwh-track { border-left-color: transparent; }
.kwh-fill { display: flex; flex-direction: column; justify-content: center; min-width: 84px; height: 34px; padding: 0 8px; background: #1f5a8a; font-style: normal; border-radius: 0 4px 4px 0; color: #fff; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kwh-fill.hi { background: #d97706; }
.kwh-fill b { font-size: .76rem; }
.kwh-fill small { font-size: .66rem; opacity: .92; }
.kwh-avg { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #ef4444; text-decoration: none; pointer-events: none; }
.kwh-avg-l { position: absolute; transform: translateX(-50%); font-style: normal; font-size: .68rem; font-weight: 700; color: #ef4444; white-space: nowrap; }
.kwh-top .kwh-avg-l { bottom: 2px; } .kwh-foot .kwh-avg-l { top: 2px; }

/* hộp danh sách đặt phòng chưa có số điện thoại: rộng hơn, vừa chiều cao màn hình, chỉ cuộn khi danh sách dài hơn */
.modal.phonelist { max-width: min(96vw, 1000px); }
.modal.phonelist .body { max-height: calc(92vh - 76px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal.phonelist .tbl-fixed th { position: sticky; top: 0; z-index: 1; }
.rep-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0; padding: 6px 8px; border-radius: 8px; background: #fff7e6; font-size: .84rem; }
.rep-tag { color: #9a6400; font-weight: 600; }
.mh-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 520px; margin: 8px 0 12px; }
.mh-rep td { background: #fff7e6; }

/* công tắc hiện số nợ cạnh tiêu đề popup bill tháng */
.bill-debt-sw { display: inline-flex; margin-left: 14px; gap: 8px; font-size: .9rem; font-weight: 500; }


/* hộp "Vì sao ra số Chưa thu" */
.dt-hero-stat.click { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.dt-hero-stat.click:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(20, 33, 61, .18); }
.rx-big { font-size: 1.15rem; font-weight: 700; margin: 0 0 6px; }
.rx-big.bad { color: #b42318; } .rx-big.ok { color: #14783f; }
.rx tfoot td { font-weight: 600; background: #f3f6fd; }
.rx tr.rx-sum td { background: #e6eefc; font-weight: 700; }
.rx tr.rx-skip td { color: #64748b; background: #f8fafc; }
.period-tbl tr.period-total td { font-weight: 700; background: #e6eefc; border-top: 2px solid #a9c2f5; }
.rx tr.click { cursor: pointer; }
.rx tr.click:hover td { background: #eef4ff; }