/* Giao diện KeyStay: tối giản, bề mặt trung tính, viền mảnh, ít bóng. 2 chế độ sáng / tối theo <html data-theme>
   (đặt trong index.html trước khi tải CSS, đổi ở menu tài khoản). Màn hình mới chỉ dùng token dưới đây, không viết mã màu cứng.
   Nhận diện: xanh ngọc + hồng trên nền đen (logo ở public/brand/); --brand chỉ để trang trí, chữ / nút dùng --accent. */
:root {
  color-scheme: light;
  --bg: #f7f7f8; --panel: #fff; --panel-2: #fafafb; --hover: #f1f2f4; --input-bg: #fff;
  --ink: #111214; --ink-2: #50545c; --muted: #71767f; --line: #e7e8eb; --line-2: #d9dbdf;
  --accent: #12807a; --on-accent: #fff; --accent-soft: #e5f3f2; --accent-2: #c03583; --accent-2-soft: #fce9f3;
  --ring: rgba(18,128,122,.2); --on-solid: #fff;
  --teal: #0d9488; --teal-soft: #e0f4f1; --pink: #db2777; --pink-soft: #fce8f1; --info: #0369a1; --info-soft: #e3f1fb;
  --ok: #15803d; --ok-soft: #e7f5ec; --warn: #a15c00; --warn-soft: #fdf3e2; --bad: #c0262d; --bad-soft: #fdecec;
  --gold: #a07a14; --gold-soft: #fbf3dc; --vip: #6b2fb8; --vip-soft: #f1e8fb; --neutral: #5a6270; --neutral-soft: #eef0f2;
  --indigo: #4f46e5; --orange: #c2410c; --sky: #0284c7;
  --track: #d4d7dc; --tl-done: #c3c7cf; --partial: #eab308;
  --nav-bg: #fbfbfc; --toast-bg: #111214; --toast-ink: #fff;
  --brand: #4fc3be; --brand-pink: #ef73ba; --brand-ink: #0b0b0c;
  --radius: 12px; --r-sm: 8px;
  --shadow: 0 1px 2px rgba(16,17,20,.04);
  --shadow-pop: 0 0 0 1px var(--line), 0 12px 32px rgba(16,17,20,.12);
  --grad: var(--accent);
}
/* Chế độ tối chỉ áp lên màn hình: khi in luôn dùng bảng màu sáng (biên bản ca, phiếu in ra giấy trắng) */
@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0b0c; --panel: #131416; --panel-2: #17181b; --hover: #1d1e22; --input-bg: #0f1012;
    --ink: #ececee; --ink-2: #b2b5bc; --muted: #7c818a; --line: #24262a; --line-2: #31343a;
    --accent: #4fc3be; --on-accent: #0b0b0c; --accent-soft: rgba(79,195,190,.13); --accent-2: #ef73ba; --accent-2-soft: rgba(239,115,186,.13);
    --ring: rgba(79,195,190,.28); --on-solid: #0b0b0c;
    --teal: #2dd4bf; --teal-soft: rgba(45,212,191,.12); --pink: #f472b6; --pink-soft: rgba(244,114,182,.13); --info: #60a5fa; --info-soft: rgba(96,165,250,.13);
    --ok: #4ade80; --ok-soft: rgba(74,222,128,.12); --warn: #fbbf24; --warn-soft: rgba(251,191,36,.12); --bad: #f87171; --bad-soft: rgba(248,113,113,.13);
    --gold: #e3b341; --gold-soft: rgba(227,179,65,.13); --vip: #c4a1ff; --vip-soft: rgba(196,161,255,.14); --neutral: #b2b5bc; --neutral-soft: #222428;
    --indigo: #a5b4fc; --orange: #fb923c; --sky: #7dd3fc;
    --track: #3a3d44; --tl-done: #474b54; --partial: #facc15;
    --nav-bg: #0f1012; --toast-bg: #222428; --toast-ink: #ececee;
    --shadow: 0 1px 2px rgba(0,0,0,.4);
    --shadow-pop: 0 0 0 1px var(--line-2), 0 16px 40px rgba(0,0,0,.55);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 'Be Vietnam Pro', system-ui, sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.02em; }
h2 { font-size: 15px; font-weight: 600; margin: 0 0 12px; letter-spacing: -.01em; }
h3 { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--ink-2); }
a { color: var(--accent); cursor: pointer; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .err { color: var(--bad); min-height: 1em; }
.mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
::selection { background: var(--ring); }

.brand { display: flex; gap: 10px; align-items: center; }
.brand small { display: block; color: var(--muted); font-size: 11px; }
.logo { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-ink) url('brand/mark.svg') center / 16px no-repeat; flex: none; }
html[data-theme="dark"] .logo { box-shadow: 0 0 0 1px var(--line-2); }
.wordmark { font-family: 'Montserrat', 'Be Vietnam Pro', sans-serif; font-weight: 600; letter-spacing: .16em; }

.login { background: radial-gradient(900px 520px at 0% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 65%), radial-gradient(800px 480px at 100% 100%, color-mix(in srgb, var(--brand-pink) 14%, transparent), transparent 65%), var(--bg); min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card.wide { max-width: 520px; }
.login-card h3 { margin: 4px 0 0; }
.login-card { width: 100%; max-width: 380px; background: var(--panel); padding: 28px; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(16,17,20,.06); display: grid; gap: 14px; }
.login-theme { position: fixed; top: 16px; right: 16px; }
label { display: grid; gap: 5px; font-size: 12px; color: var(--ink-2); font-weight: 500; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--input-bg); color: var(--ink); min-width: 0; transition: border-color .12s, box-shadow .12s; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
textarea { min-height: 120px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }

/* Nút: 1 kiểu cho mọi màn hình — cao tối thiểu 38px (nhỏ 32px; màn cảm ứng 44/38px), icon 16px bên trái nhãn (gắn tự động trong app.js) */
.btn { font: inherit; font-weight: 500; line-height: 1.2; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); min-height: 38px; padding: 6px 14px; border-radius: var(--r-sm); cursor: pointer; box-shadow: var(--shadow);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; vertical-align: middle; text-align: center; transition: border-color .12s, background .12s, filter .12s; }
.btn:hover { background: var(--hover); text-decoration: none; }
.btn:focus-visible, .chip:focus-visible, .seg button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.btn .ico-btn { width: 16px; height: 16px; flex: none; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--hover); }
.btn.small { min-height: 32px; padding: 4px 10px; font-size: 13px; gap: 5px; }
.btn.small .ico-btn { width: 15px; height: 15px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.danger { background: var(--bad); color: var(--on-solid); border-color: transparent; }
.btn.danger:hover { filter: brightness(1.08); }

/* Hộp thoại chung (dialog() trong app.js): 1 hộp cho mọi xác nhận / nhập lý do / thu tiền & trả phòng */
.dlg { border: 0; padding: 0; border-radius: 16px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow-pop); width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.dlg.wide { width: min(620px, calc(100vw - 32px)); }
.dlg::backdrop { background: rgba(10,11,13,.45); }
.dlg-form { display: grid; gap: 12px; padding: 18px 20px 16px; }
.dlg-head { display: flex; align-items: flex-start; gap: 10px; }
.dlg-head h2 { margin: 0; flex: 1; font-size: 16px; line-height: 1.35; }
.dlg-x { font: inherit; font-size: 22px; line-height: 1; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 2px; }
.dlg-body { display: grid; gap: 10px; }
.dlg-body p { margin: 0; }
.dlg-err:empty { display: none; }
.dlg-err { margin: 0; }
.dlg-acts { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dlg-sum { display: grid; gap: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.dlg-sum > div { display: flex; justify-content: space-between; gap: 12px; }
.dlg-sum .owe b { color: var(--bad); } .dlg-sum .over b { color: var(--warn); }
.dlg-step { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
@media (max-width: 520px) { .dlg-acts .btn { flex: 1 1 auto; } }

/* Chọn giao diện Sáng / Tối / Theo hệ thống */
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--hover); border-radius: var(--r-sm); }
.seg button { font: inherit; font-size: 12px; font-weight: 500; border: 0; background: none; color: var(--ink-2); padding: 4px 10px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.seg button svg { width: 14px; height: 14px; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.tb-theme { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 12px; color: var(--ink-2); font-size: 13px; }

.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
/* Menu trái cao hết màn: logo, cơ sở đang làm việc, menu chia khu, tài khoản ở đáy */
.nav { grid-column: 1; grid-row: 1 / span 2; background: var(--panel); color: var(--ink); border-right: 1px solid var(--line); padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; overflow: hidden; }
.nav nav#menu { overflow-y: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.nav .nav-brand { justify-content: flex-start; padding: 2px 8px; color: var(--ink); cursor: pointer; text-decoration: none; }
.nav .nav-brand:hover { background: none; text-decoration: none; }
.nav-brand .logo { width: 34px; height: 34px; border-radius: 9px; background-size: 18px; }
.nav-brand b { font-size: 14px; font-weight: 700; letter-spacing: .18em; }
.nav-brand small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.nav-prop { position: relative; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin: 0 2px; cursor: pointer; }
.nav-prop:hover { border-color: var(--line-2); }
.nav-prop-code { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 11.5px; flex: none; }
.nav-prop-text { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.nav-prop select { appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; min-height: 0; font: inherit; font-weight: 600; font-size: 13px; color: var(--ink); box-shadow: none; width: 100%; text-overflow: ellipsis; cursor: pointer; }
.nav-prop select:disabled { opacity: 1; cursor: default; }
.nav-prop select:focus-visible { outline: none; }
.nav-prop:focus-within { box-shadow: 0 0 0 3px var(--ring); }
.nav-prop small { font-size: 11.5px; color: var(--muted); }
.nav-prop-chev { color: var(--muted); flex: none; }
.nav-sec { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; }
.nav-sec:first-child { padding-top: 0; }
.nav-me { border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; }
.nav-me .tb-me { width: 100%; text-align: left; }
.tb-who { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.tb-who b { font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-who small { font-size: 11.5px; color: var(--muted); }
/* Thanh trên: nút ẩn menu, đường dẫn, tìm kiếm (⌘K), giao diện, việc cần xử lý */
.topbar { grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 40; min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 8px 28px 8px 20px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.tb-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; }
.tb-crumb svg { flex: none; opacity: .6; }
.tb-crumb b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tb-search { position: relative; flex: 0 1 360px; min-width: 0; margin-left: auto; }
.tb-search input { width: 100%; border-radius: 999px; padding-left: 38px; padding-right: 48px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23868b94' stroke-width='2' stroke-linecap='round' d='M3.5 10.5a7 7 0 1 0 14 0 7 7 0 1 0-14 0M21 21l-5.2-5.2'/%3E%3C/svg%3E") no-repeat 14px center; border-color: var(--line); }
.tb-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 11px 'Be Vietnam Pro', sans-serif; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; pointer-events: none; }
.tb-search:focus-within .tb-kbd { display: none; }
.tb-item { position: relative; flex: none; }
.tb-icon { position: relative; border: 0; background: none; color: var(--ink-2); padding: 8px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; }
.tb-icon:hover { background: var(--hover); color: var(--ink); }
.tb-badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: var(--on-solid); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--panel); }
.tb-badge:empty { display: none; }
/* Chip Ca thu ngân của cơ sở (thanh trên): giờ mở · đã thu; chưa mở ca thì viền nét đứt */
.tb-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.tb-chip:hover { background: var(--hover); }
.tb-chip.off { border-style: dashed; color: var(--muted); }
.tb-me { display: flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 6px 8px; border-radius: 10px; font: inherit; color: var(--muted); }
.tb-me:hover { background: var(--hover); }
.tb-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none; }
.tb-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; min-width: 100%; max-height: 70vh; overflow-y: auto; background: var(--panel); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; }
.tb-pop.tb-right { left: auto; right: 0; width: 340px; }
.tb-pop.tb-up { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; min-width: 0; }
.tb-pop.tb-up .tb-head { display: block; }
.tb-up .tb-head .small { overflow-wrap: anywhere; }
.tb-pop.tb-up .tb-theme { flex-wrap: wrap; padding: 8px 12px; }
.tb-pop a, .tb-pop .tb-row { display: block; padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink); cursor: pointer; text-decoration: none; }
.tb-pop a:hover, .tb-pop a.active { background: var(--hover); }
.tb-pop .tb-head { padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.tb-pop .tb-head [data-read-all] { margin-left: auto; }
.tb-pop .tb-head [data-inbox-all] { margin-left: auto; }
/* Chuông: tab Cần xử lý / Thông báo (N2.3) */
.tb-pop .tb-tabs { display: flex; gap: 6px; padding: 6px 8px 2px; }
.tb-pop a.tb-read { opacity: .72; }
.tb-pop a.tb-read b { font-weight: 500; }
.tb-pop .tb-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: middle; }
.tb-pop .tb-sep { border-top: 1px solid var(--line); margin: 4px 0; }
.tb-pop .danger { color: var(--bad); }
.nav nav { display: grid; gap: 1px; flex: 1; align-content: start; }
.nav a { color: var(--ink-2); padding: 7px 10px; border-radius: 10px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.nav a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.nav .brand small { color: var(--muted); }
.nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav svg { flex: none; }
/* Nhóm bấm để mở / đóng > mục con */
.mg-head { width: 100%; display: flex; align-items: center; gap: 11px; background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 13.5px; font-weight: 500; padding: 7px 10px; border-radius: 10px; cursor: pointer; text-align: left; }
.mg-head:hover { background: var(--hover); color: var(--ink); }
.mg-head > span { flex: 1; }
.mg-chev { opacity: .45; transition: transform .15s ease; }
.mg.open .mg-chev { transform: rotate(90deg); }
.mg:has(a.active) > .mg-head { color: var(--ink); font-weight: 600; }
.mg-items { display: none; padding: 1px 0 6px 12px; margin-left: 18px; border-left: 1px solid var(--line); }
.mg.open .mg-items { display: grid; gap: 1px; }
.nav a.mg-sub { padding: 6px 10px; font-size: 13px; font-weight: 400; }
.nav a.mg-sub.active { font-weight: 600; }
.nav a.mg-sub > span:first-child { flex: 1; }
.nav a.mg-leaf { justify-content: flex-start; gap: 11px; font-size: 13.5px; }
.nav a.mg-leaf > svg + span { flex: 1; }
.tb-burger { margin-left: -6px; }
/* Máy tính: ẩn menu bên trái (nút ☰), nội dung chiếm hết chiều ngang */
@media (min-width: 721px) {
  body.nav-hidden .shell { grid-template-columns: minmax(0, 1fr); }
  body.nav-hidden .nav { display: none; }
  body.nav-hidden .topbar, body.nav-hidden .main { grid-column: 1; }
}
.nav-backdrop { position: fixed; inset: 0; z-index: 65; background: rgba(11,11,12,.5); }
body.nav-open { overflow: hidden; }
.pill { background: var(--bad); color: var(--on-solid); border-radius: 10px; font-size: 11px; padding: 0 7px; font-weight: 600; }
.pill:empty { display: none; }
.main { grid-column: 2; padding: 28px 32px 64px; min-width: 0; }
.head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.card > h2:first-child { display: flex; align-items: center; gap: 8px; }
.card > h2:first-child::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--brand); flex: none; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); min-width: 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: 2fr 1fr; }
/* Thẻ số: nền nhuốm nhẹ màu riêng của từng thẻ, chấm màu cạnh nhãn */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { --c: var(--accent); --cs: var(--accent-soft); background: color-mix(in srgb, var(--c) 6%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c) 20%, var(--line)); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.kpi:nth-child(8n+2) { --c: var(--accent-2); --cs: var(--accent-2-soft); }
.kpi:nth-child(8n+3) { --c: var(--teal); --cs: var(--teal-soft); }
.kpi:nth-child(8n+4) { --c: var(--ok); --cs: var(--ok-soft); }
.kpi:nth-child(8n+5) { --c: var(--pink); --cs: var(--pink-soft); }
.kpi:nth-child(8n+6) { --c: var(--warn); --cs: var(--warn-soft); }
.kpi:nth-child(8n+7) { --c: var(--info); --cs: var(--info-soft); }
.kpi:nth-child(8n+8) { --c: var(--bad); --cs: var(--bad-soft); }
.kpi .label { color: var(--ink-2); font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.kpi .label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.kpi .value { font-size: 26px; font-weight: 600; letter-spacing: -.03em; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--c); }
.kpi .sub { font-size: 12px; color: var(--muted); }

table { width: 100%; border-collapse: collapse; }
th { background: var(--panel-2); text-align: left; font-size: 12px; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.click:hover td { background: var(--hover); cursor: pointer; }
.table-wrap { overflow-x: auto; }

.bar { height: 6px; background: var(--hover); border-radius: 3px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.chan { display: grid; grid-template-columns: 110px 1fr 110px; gap: 10px; align-items: center; padding: 5px 0; }

.badge { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: var(--neutral-soft); color: var(--neutral); white-space: nowrap; }
.t-member { background: var(--neutral-soft); } .t-silver { background: var(--neutral-soft); color: var(--neutral); }
.t-gold { background: var(--gold-soft); color: var(--gold); } .t-vip { background: var(--vip-soft); color: var(--vip); }
.s-open, .s-pending { background: var(--accent-soft); color: var(--accent); }
.s-in_progress, .s-waiting { background: var(--warn-soft); color: var(--warn); }
.s-resolved, .s-closed, .s-processed, .s-sent { background: var(--ok-soft); color: var(--ok); }
.s-failed, .s-dead, .p-urgent, .overdue { background: var(--bad-soft); color: var(--bad); }
.p-high { background: var(--warn-soft); color: var(--warn); }
.s-dry_run { background: var(--neutral-soft); color: var(--neutral); }
.tag { display: inline-block; font-size: 11px; background: var(--panel-2); border: 1px solid var(--line); padding: 0 6px; border-radius: 6px; margin: 0 4px 4px 0; }

.alerts li { padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; }
.alerts li:last-child { border-bottom: 0; }
.alerts { list-style: none; margin: 0; padding: 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--accent); }
.dot.high { background: var(--bad); } .dot.info { background: var(--ok); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { font: inherit; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); border-radius: 999px; min-height: 32px; padding: 4px 13px; font-size: 13px; cursor: pointer; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s, color .12s; }
.chip .ico-btn { width: 15px; height: 15px; flex: none; }
.filters .chips, .head .chips { margin-bottom: 0; }
@media (pointer: coarse) { .btn { min-height: 44px; } .btn.small, .chip { min-height: 38px; } }
.chip:hover { background: var(--hover); color: var(--ink); }
.chip.active { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.chip b { margin-left: 4px; font-weight: 600; opacity: .7; }

.profile { display: grid; grid-template-columns: 320px 1fr; gap: 16px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.stat-row div { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px; }
.stat-row b { display: block; font-size: 16px; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ico { width: 28px; height: 28px; border-radius: 50%; background: var(--hover); display: grid; place-items: center; font-size: 13px; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 4px 8px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }

.kanban { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; }
.col { --c: var(--accent); background: color-mix(in srgb, var(--c) 5%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--c) 18%, var(--line)); border-radius: var(--radius); padding: 10px; min-height: 200px; }
.col h3 { display: flex; align-items: center; }
.col h3::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 8px; flex: none; }
.col h3 > span { margin-left: auto; color: var(--muted); font-weight: 500; }
.col:nth-child(2) { --c: var(--warn); }
.col:nth-child(3) { --c: var(--teal); }
.col:nth-child(4) { --c: var(--ok); }
.tk { background: var(--panel); border-radius: 10px; padding: 10px; margin-bottom: 8px; border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 6px; }
.tk.is-overdue { border-color: var(--bad); }
.tk .meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); }

.dup { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: stretch; }
.dup .side { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 6px; }

.src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.src { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.src b { text-transform: capitalize; }
.copy { display: flex; gap: 6px; } .copy input { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 12px; }

.toasts { position: fixed; top: 16px; right: 16px; display: grid; gap: 10px; z-index: 57; width: min(340px, calc(100vw - 32px)); }
/* Băng cảnh báo khu vực đang gián đoạn (gateway, S4.6) */
.svc-banner { background: var(--warn-soft); color: var(--warn); border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; font-weight: 500; line-height: 1.45; }
.toast { background: var(--toast-bg); color: var(--toast-ink); border-radius: 12px; padding: 14px; box-shadow: var(--shadow-pop); animation: in .2s ease-out; }
.toast .t-head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.toast b { font-size: 16px; display: block; margin: 2px 0; }
.toast .btn { margin-top: 8px; background: var(--panel); color: var(--ink); border: 0; }
.toast-fix { position: relative; padding-right: 34px; }
.toast-fix > .dlg-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; }
/* B5: gợi ý + nút sửa dưới lỗi (toast, hộp thoại) */
.fix-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.fix-acts > .small { flex-basis: 100%; opacity: .85; }
.fix-acts .btn { margin-top: 0; width: auto; }
@keyframes in { from { transform: translateY(-8px); opacity: 0; } }

.switch { position: relative; width: 36px; height: 20px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--track); border-radius: 20px; transition: .15s; cursor: pointer; }
.switch span::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(16px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--ring); }

.notice { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); margin-bottom: 14px; }
.ok-msg { color: var(--ok); }
/* QR thiết lập 2FA (SVG vẽ ở máy chủ, nền trắng cả khi giao diện tối) + danh sách phiên (N1.6) */
.qr-box { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.qr-box .qr { background: #fff; padding: 6px; border-radius: var(--r-sm); border: 1px solid var(--line); line-height: 0; }
.qr-box .qr svg { width: 196px; height: 196px; max-width: 100%; }
.sess-list { display: grid; gap: 8px; margin: 8px 0 12px; }
.sess-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.sess-row > div { min-width: 0; }
.codes { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; margin: 8px 0 12px; line-height: 1.9; }
.secret { background: var(--accent-soft); padding: 2px 6px; border-radius: 4px; }
.steps { padding-left: 18px; } .steps li { margin-bottom: 6px; }
label.inline { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; font-weight: 400; color: var(--ink); }
.integ { display: grid; gap: 8px; align-content: start; }
.wrap { overflow-wrap: anywhere; }
tr.selected td { background: var(--accent-soft); }
.split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1280px) { .split { grid-template-columns: minmax(0, 1fr) 380px; } }
.nowrap { white-space: nowrap; }
table.matrix td { min-width: 120px; }
table.matrix input { width: 100%; margin-bottom: 4px; }
table.matrix input.extra { font-size: 12px; padding: 4px 8px; color: var(--ink-2); }
.room-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.room-chip { font: inherit; font-weight: 600; border: 1px solid transparent; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-sm); padding: 6px 10px; cursor: pointer; display: grid; text-align: center; min-width: 58px; }
.room-chip span { font-size: 10px; font-weight: 500; opacity: .75; }
.room-chip.picked { background: var(--accent); color: var(--on-accent); }
table.avail td.ok { color: var(--ok); font-weight: 600; } table.avail td.low { color: var(--warn); font-weight: 600; background: var(--warn-soft); }
table.avail td.full { color: var(--bad); font-weight: 600; background: var(--bad-soft); }
.floor { margin-bottom: 14px; }
/* Sơ đồ phòng: trạng thái bằng vạch màu bên trái (inset shadow để giữ bo góc) */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 6px; }
.room-card { --rc: var(--line-2); background: var(--panel); border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--rc); border-radius: 10px; padding: 10px 10px 10px 13px; cursor: pointer; min-height: 96px; display: grid; gap: 2px; align-content: start; transition: border-color .12s; }
.room-card:hover { border-color: var(--line-2); }
.room-card[class*="st-"]:not(.st-free) { background: color-mix(in srgb, var(--rc) 13%, var(--panel)); }
.room-card.st-reserved { --rc: var(--bs-reserved); } .room-card.st-late { --rc: var(--bs-late); } .room-card.st-in_house { --rc: var(--bs-in_house); }
.room-card.st-overdue { --rc: var(--bs-overdue); } .room-card.st-checked_out { --rc: var(--bs-checked_out); } .room-card.st-blocked { --rc: var(--bs-blocked); } .room-card.st-hold { --rc: var(--bs-hold); }
.room-card.hk-dirty .rc-hk { color: var(--bad); font-weight: 600; }
.room-card.st-blocked { background: repeating-linear-gradient(45deg, var(--panel-2), var(--panel-2) 6px, var(--panel) 6px, var(--panel) 12px); }
/* Thẻ Đơn giản: chỉ khối màu + số phòng, vừa cả cơ sở trên một màn */
.room-grid.simple { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.room-card.simple { position: relative; min-height: 44px; padding: 4px; display: flex; align-items: center; justify-content: center; box-shadow: none; border-radius: 8px; }
.room-card.simple b { font-size: 14px; } .room-card.simple i { position: absolute; left: 3px; top: 1px; font-style: normal; font-size: 10px; } .room-card.simple .bd-clean { position: absolute; right: 2px; bottom: 2px; font-size: 11px; }
.room-card.simple[class*="st-"]:not(.st-free) { background: var(--rc); color: var(--rc-fg); border-color: transparent; }
.room-card.st-reserved { --rc-fg: var(--bs-reserved-fg); } .room-card.st-late { --rc-fg: var(--bs-late-fg); } .room-card.st-in_house { --rc-fg: var(--bs-in_house-fg); }
.room-card.st-overdue { --rc-fg: var(--bs-overdue-fg); } .room-card.st-checked_out { --rc-fg: var(--bs-checked_out-fg); } .room-card.st-blocked { --rc-fg: var(--bs-blocked-fg); } .room-card.st-hold { --rc-fg: var(--bs-hold-fg); }
.rc-head { display: flex; justify-content: space-between; } .rc-head b { font-size: 16px; } .rc-head span { font-size: 11px; color: var(--muted); }
.rc-guest { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-time, .rc-hk { font-size: 11px; color: var(--ink-2); }
.tl { padding: 0; overflow-x: auto; position: relative; }
.tl { --tl-wk: color-mix(in srgb, var(--ink) 5%, transparent); }
.tl-body { position: relative; min-width: var(--tl-min, 720px); }
.tl-row { display: grid; grid-template-columns: 110px 1fr; min-width: var(--tl-min, 720px); border-bottom: 1px solid var(--line); }
.tl-headrow { position: sticky; top: 0; background: var(--panel); z-index: 2; height: 32px; }
.tl-label { position: sticky; left: 0; z-index: 3; background: var(--panel); padding: 6px 10px; font-weight: 600; font-size: 13px; border-right: 1px solid var(--line); }
.tl-track { position: relative; height: 34px; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), var(--tl-wkimg, none); background-size: calc(100% / var(--tl-cols, 7)) 100%, 100% 100%; }
.tl-track.drop { background-color: var(--accent-soft); }
.tl-track.drop-bad { background-color: var(--bad-soft, color-mix(in srgb, var(--bad) 18%, transparent)); }
.tl-day { position: absolute; top: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); padding-left: 6px; }
.tl-group { padding: 6px 10px; background: var(--panel-2); font-size: 12px; font-weight: 600; color: var(--ink-2); min-width: var(--tl-min, 720px); }
button.tl-group, button.rc-group { display: block; width: 100%; border: 0; text-align: left; font-family: inherit; cursor: pointer; }
button.rc-group { background: none; padding: 2px 0; }
.tl-gname { position: sticky; left: 10px; }
.tl-bar { position: absolute; top: 5px; height: 24px; min-width: 16px; z-index: 1; border-radius: 6px; font-size: 11px; font-weight: 600; padding: 4px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; color: var(--on-accent); }
/* Thanh dài hơn phần đang thấy (Xem Ngày, cuộn ngang): chữ bám mép trái; overflow: clip để sticky bám theo vùng cuộn .tl, không bám thanh */
.tl-bar { overflow: clip; } .tl-txt { position: sticky; left: 118px; }
.tl-bar.st-reserved { background: var(--bs-reserved); color: var(--bs-reserved-fg); } .tl-bar.st-late { background: var(--bs-late); color: var(--bs-late-fg); }
.tl-bar.st-in_house { background: var(--bs-in_house); color: var(--bs-in_house-fg); } .tl-bar.st-overdue { background: var(--bs-overdue); color: var(--bs-overdue-fg); }
.tl-bar.st-checked_out { background: var(--bs-checked_out); color: var(--bs-checked_out-fg); } .tl-bar.st-blocked { background: var(--bs-blocked); color: var(--bs-blocked-fg); }
.tl-bar.st-hold { background: var(--bs-hold); color: var(--bs-hold-fg); outline: 1.5px dashed currentColor; outline-offset: -3px; }
.room-card.st-hold { border-style: dashed; border-color: var(--bs-hold); }
.bd-pop-held { font-size: 12px; font-weight: 600; color: var(--warn, #b26a00); margin: 2px 0 4px; }
.tl-bar.cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; } .tl-bar.cut-r { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Vạch tiền bên trái thanh booking: chưa thu / thu một phần / đủ */
.tl-bar { padding-left: 12px; }
.tl-bar.moved { opacity: .75; background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ink) 8%, transparent) 6px 12px); cursor: pointer; }
.tl-bar .pay { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-right: 1px solid var(--panel); }
.pay.unpaid { background: var(--bad); } .pay.partial { background: var(--partial); } .pay.paid { background: var(--ok); }
.tl-un .tl-track { background-color: var(--bad-soft); }
.tl-un-head { background: var(--bad-soft); }
.tl-day.today { color: var(--bad); }
.tl-hour { font-weight: 500; color: var(--muted); padding-left: 4px; }
.tl-label.tl-hk { display: flex; align-items: center; gap: 6px; width: 100%; font-family: inherit; color: var(--ink); text-align: left; border-width: 0 1px 0 0; border-style: solid; border-color: var(--line); border-radius: 0; margin: 0; }
button.tl-label.tl-hk { cursor: pointer; } button.tl-label.tl-hk:hover { background: var(--hover); } button.tl-label.tl-hk:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ring); }
.tl-hk svg { flex: none; } .tl-hk.hk-dirty svg { color: var(--bad); } .tl-hk.hk-inspected svg { color: var(--ok); } .tl-hk.hk-out_of_order svg, .tl-hk.hk-out_of_service svg { color: var(--warn); }
.tl-headrow .tl-label { padding: 8px 10px; font-size: 12px; white-space: nowrap; color: var(--ink-2); } .tl-headrow .tl-label.today { color: var(--bad); }
.tl-track[data-droproom] { cursor: cell; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 12px 12px; align-items: center; }
.tl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; position: static; border: 0; }
/* Khung chi tiết đặt phòng: trượt từ phải, giữ nguyên trang phía sau */
.dr-wrap { position: fixed; inset: 0; z-index: 56; display: flex; justify-content: flex-end; }
.dr-back { position: absolute; inset: 0; background: rgba(11,11,12,.4); }
.dr { position: relative; width: min(1040px, 100vw); height: 100%; display: flex; flex-direction: column; background: var(--bg); box-shadow: var(--shadow-pop); animation: dr-in .16s ease-out; }
@keyframes dr-in { from { transform: translateX(32px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .dr { animation: none; } }
body.dr-on { overflow: hidden; }
/* Tab Nhận phòng nhanh: khổ hẹp cạnh sơ đồ, mọi thứ nằm gọn một cột */
.qk-wrap { position: fixed; inset: 0; z-index: 56; display: flex; justify-content: flex-end; }
.qk { position: relative; width: min(440px, 100vw); height: 100%; background: var(--panel); box-shadow: var(--shadow-pop); animation: dr-in .16s ease-out; }
@media (prefers-reduced-motion: reduce) { .qk { animation: none; } }
.qk form { display: flex; flex-direction: column; height: 100%; }
.qk-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.qk-head h2 { margin: 0; font-size: 15px; }
.qk-body { flex: 1; overflow-y: auto; padding: 0 16px 12px; }
.qk-body section { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.qk-body section:last-of-type { border-bottom: 0; }
.qk-body h3 { margin: 0; font-size: 14px; }
.qk-body input:not([type=checkbox]):not([type=radio]), .qk-body select { width: 100%; min-width: 0; height: 36px; box-sizing: border-box; }
.qk-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.qk-line input { max-width: 150px; text-align: right; }
.qk-line label.inline { font-weight: 400; margin: 0; }
.qk-times { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.qk-times input { font-size: 13px; padding-inline: 6px; }
.qk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; }
.qk-three { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; align-items: center; }
.qk-total { justify-self: end; background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.qk-num { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--muted); }
.qk-step { display: inline-flex; align-items: center; gap: 8px; padding: 2px; border-radius: 999px; background: var(--accent-soft); }
.qk-step b { min-width: 52px; text-align: center; font-size: 13px; color: var(--accent); }
.qk-step button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-solid); font-size: 16px; line-height: 1; cursor: pointer; }
.qk-gender { display: grid; grid-template-columns: 1fr 1fr; padding: 2px; border-radius: 8px; background: var(--line); }
.qk-gender label { margin: 0; cursor: pointer; }
.qk-gender input { position: absolute; opacity: 0; width: 0 !important; }
.qk-gender span { display: block; padding: 6px 0; border-radius: 6px; text-align: center; font-size: 13px; }
.qk-gender input:checked + span { background: var(--panel); color: var(--accent); font-weight: 600; }
.qk-gender input:focus-visible + span { outline: 2px solid var(--accent); }
.qk-scan { display: grid; gap: 6px; }
.qk-paynote { margin: 0; }
.qk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); }
.qk-foot span { flex: 1 1 100%; text-align: right; }
.qk-foot span:empty { display: none; }
.qk-foot .btn { white-space: nowrap; }
.qk-foot .btn svg { vertical-align: -3px; }
#drHead { padding: 12px 18px 0; background: var(--panel); border-bottom: 1px solid var(--line); }
.dr-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dr-title { flex: 1; min-width: 180px; font-size: 15px; }
.dr-bal { display: grid; justify-items: end; line-height: 1.2; } .dr-bal b { font-size: 16px; } .dr-bal.owe b { color: var(--bad); }
.dr-tabs { margin: 10px 0; }
.sp { --sp: var(--line-2); --sp-soft: var(--panel-2); --sp-ink: var(--ink); display: flex; flex-direction: column; gap: 14px; }
.sp[data-mode="now"] { --sp: var(--accent); --sp-soft: var(--accent-soft); --sp-ink: var(--accent); }
.sp[data-mode="out"] { --sp: var(--accent-2); --sp-soft: var(--accent-2-soft); --sp-ink: var(--accent-2); }
.sp-backbar { margin-bottom: 10px; }
.sp-done { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--ok-soft); border: 1px solid var(--ok); } .sp-done > div { flex: 1 1 260px; }
.sp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.sp-card { font: inherit; color: var(--ink); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--radius); border: 2px solid var(--line); background: var(--panel); }
.sp-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.sp-card.now { --c: var(--accent); --c-soft: var(--accent-soft); } .sp-card.out { --c: var(--accent-2); --c-soft: var(--accent-2-soft); }
.sp-card.on { border-color: var(--c); background: var(--c-soft); }
.sp-card-top { display: flex; align-items: center; gap: 8px; } .sp-card-top b { font-size: 16px; } .sp-card.on .sp-card-top b { color: var(--c); }
.sp-dot { width: 16px; height: 16px; flex: none; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--muted); } .sp-card.on .sp-dot { border: 5px solid var(--c); }
.sp-tag { margin-left: auto; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--hover); color: var(--ink-2); white-space: nowrap; } .sp-card.on .sp-tag { background: var(--c); color: var(--on-accent); }
.sp-card-sum { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; } .sp-card-sum .sp-due { font-size: 20px; }
.sp-due.owe { color: var(--bad); } .sp-due.over { color: var(--accent); } .sp-due.ok { color: var(--ok); }
.sp-cols { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.sp-main { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .sp-main .sp-bill { flex: none; }
.sp-bill { flex: 999 1 460px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.sp-rail { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sp-fx { margin: -6px 0 0; text-align: right; } /* nút thu / hoàn ngoại tệ ngay dưới bộ thu (spFxOk) */
.sp-bill-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; background: var(--sp-soft); border-bottom: 2px solid var(--sp); } .sp-bill-label { font-size: 13px; font-weight: 600; color: var(--sp-ink); } .sp-bill-acts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sp-sec { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px 2px; } .sp-sec.line { margin-top: 6px; border-top: 1px solid var(--line); }
.sp-h { font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .02em; }
.sp-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 14px; } .sp-name { font-weight: 500; } .sp-amt { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sp-empty { margin: 2px 14px; } .sp-skip { margin: 2px 14px 4px; padding: 5px 9px; border-radius: var(--r-sm); background: var(--hover); color: var(--ink-2); }
.linkish { font: inherit; border: 0; background: none; padding: 4px 2px; min-height: 32px; color: var(--accent); font-weight: 600; cursor: pointer; }
.sp-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 6px 14px; padding: 10px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line); }
.sp-form label { font-size: 12px; color: var(--ink-2); display: grid; gap: 2px; } .sp-form .grow { flex: 1 1 180px; } .sp-form .sm { flex: 0 0 64px; } .sp-form .md { flex: 0 1 130px; } .sp-form input, .sp-form select { width: 100%; box-sizing: border-box; }
.sp-voucher { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 14px 12px; align-items: center; } .sp-voucher .grow { flex: 1 1 180px; } .sp-voucher input { width: 100%; box-sizing: border-box; } .sp-vmsg { flex-basis: 100%; min-height: 0; }
.sp-total { margin-top: 6px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--panel-2); display: grid; gap: 3px; } .sp-total > div { display: flex; justify-content: space-between; gap: 12px; } .sp-left { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line-2); align-items: baseline; font-weight: 600; } .sp-left .sp-due { font-size: 22px; }
.sp-step { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--panel); } .sp-step h3 { margin: 0; font-size: 15px; } .sp-step .sp-row { padding: 3px 0; } .sp-step p { margin: 0; }
.sp-out { border: 2px solid var(--sp); }
.sp-pay { display: flex; flex-direction: column; gap: 8px; } .sp-pay label { font-size: 12px; color: var(--ink-2); display: grid; gap: 2px; } .sp-pay label.inline { display: flex; align-items: center; gap: 6px; } .sp-pay input:not([type=checkbox]), .sp-pay select { width: 100%; box-sizing: border-box; }
.sp-purpose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: var(--r-sm); background: var(--hover); } .sp-purpose button { font: inherit; font-weight: 600; min-height: 36px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer; } .sp-purpose button.on { background: var(--panel); color: var(--accent); box-shadow: 0 0 0 1px var(--line); }
.filters.sp-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .sp-methods button { font: inherit; font-size: 13px; font-weight: 600; min-height: 44px; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); cursor: pointer; } .sp-methods button.on { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent); }
.sp-amount input { font-size: 18px; font-weight: 700; text-align: right; } .sp-go { width: 100%; min-height: 46px; justify-content: center; font-weight: 700; } .sp-go.big { min-height: 50px; font-size: 16px; }
.sp-ok { padding: 9px 12px; border-radius: var(--r-sm); background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.sp-paid { border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 4px; }
.sp-check { display: flex; align-items: center; gap: 10px; min-height: 40px; } .sp-check + .sp-check { border-top: 1px solid var(--line); padding-top: 8px; } .sp-check > span, .sp-check > label { flex: 1; min-width: 0; } .sp-check label { display: flex; align-items: center; gap: 10px; cursor: pointer; } .sp-check b { font-weight: 600; display: block; } .sp-check .small { display: block; }
.sp-confirm { display: flex; flex-direction: column; gap: 8px; } .sp-confirm-btns { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; } .sp-confirm-btns .btn { min-height: 46px; justify-content: center; }
.sp-foot { display: flex; align-items: center; gap: 12px; position: sticky; bottom: -32px; margin: 8px -18px -32px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -8px 16px -12px rgba(0,0,0,.25); z-index: 2; }
.sp-foot-sel { flex: 1; min-width: 0; display: grid; line-height: 1.25; } .sp-foot-sel b { font-size: 15px; } .sp-foot-due { display: grid; text-align: right; line-height: 1.2; } .sp-foot-due .sp-due { font-size: 20px; } .sp-foot .btn { min-height: 40px; }
/* Điện thoại: chữ "Đã chọn 2/2 phòng: …" bị ép còn 0px, đè lên số còn phải thu — lưới 2 cột: phòng chọn | số tiền, hàng dưới là nút */
@media (max-width: 560px) {
  .sp-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; }
  .sp-foot-sel { grid-column: 1; } .sp-foot-sel:not(:has(b:not(:empty), span:not(:empty))) { display: none; }
  .sp-foot-due { grid-column: 2; align-self: center; } .sp-foot .btn { justify-content: center; } .sp-foot .btn:only-of-type { grid-column: 1 / -1; }
}
.sp-pick { padding: 12px 14px; display: grid; gap: 10px; } .sp-pick-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .sp-pick-h b { font-size: 15px; } .sp-pick-acts { margin-left: auto; display: flex; gap: 14px; }
.sp-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.sp-room { font: inherit; color: var(--ink); position: relative; text-align: left; display: grid; gap: 2px; padding: 10px 12px 10px 40px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--panel); cursor: pointer; }
.sp-room::before { content: ""; position: absolute; left: 12px; top: 13px; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--line-2); background: var(--panel); box-sizing: border-box; }
.sp-room.on { border-color: var(--accent); background: var(--accent-soft); } .sp-room.on::before { background: var(--accent); border-color: var(--accent); content: "✓"; color: var(--on-accent); font-size: 12px; line-height: 14px; text-align: center; }
.sp-room.out { opacity: .55; cursor: default; background: var(--hover); } .sp-room.out::before { content: "—"; border-style: dashed; text-align: center; line-height: 14px; color: var(--muted); }
.sp-room:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .sp-room-tag { position: absolute; right: 10px; top: 10px; } .sp-room b { font-size: 15px; }
.sp-room-amt { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .sp-room-amt strong { font-variant-numeric: tabular-nums; }
.sp-roomhead { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sp-roomsum { margin-left: auto; font-variant-numeric: tabular-nums; }
.sp-out.all { border-color: var(--bad); }
.dr-body { flex: 1; overflow-y: auto; padding: 16px 18px 32px; }
.dr-body #flBack { display: none; }
.dr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.dr-col { display: grid; gap: 10px; padding: 14px; background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.dr-col h3 { margin: 0; color: var(--ink); }
.dr-lines > div, .dr-cart { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.dr-charge { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; } .dr-charge legend { font-size: 12.5px; padding: 0 4px; }
.dr-shop { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
@media (max-width: 720px) { .dr-shop { grid-template-columns: minmax(0, 1fr); } }
.dr-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 46vh; overflow-y: auto; }
.dr-svc { display: grid; gap: 2px; padding: 8px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; } .dr-svc:hover { border-color: var(--accent); }
.dr-qty { display: inline-flex; align-items: center; gap: 6px; } .dr-cart.total { border-bottom: 0; font-weight: 600; }
/* Sơ đồ phòng: thao tác tại chỗ */
.bd-menu { position: fixed; z-index: 59; min-width: 190px; max-width: min(300px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow-y: auto; display: grid; gap: 1px; padding: 6px; background: var(--panel); border-radius: 10px; box-shadow: var(--shadow-pop); font-size: 13px; }
.bd-menu button { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 6px 9px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bd-menu button:hover, .bd-menu button:focus-visible { background: var(--hover); outline: none; }
.bd-menu button.danger { color: var(--bad); }
@media (pointer: coarse) { .bd-menu button { min-height: 44px; } }
.bd-menu.sheet { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: none; max-height: 80dvh; border-radius: 14px 14px 0 0; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.bd-menu.sheet:not(.all) .later { display: none; }
.bd-menu hr { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.bd-menu-h { display: grid; gap: 2px; padding: 4px 9px 7px; margin-bottom: 3px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-2); } .bd-menu-h b { color: var(--ink); }
.bd-clean { padding: 0 2px; border: 0; background: none; font-size: 12px; line-height: 1; cursor: pointer; border-radius: 4px; } .bd-clean:hover { background: var(--hover); }
.bd-un-badge { margin-left: 2px; min-width: 18px; padding: 0 4px; border: 0; border-radius: 9px; background: var(--bad); color: var(--on-solid); font: inherit; font-size: 10px; font-weight: 600; line-height: 16px; cursor: pointer; }
.bd-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
/* Đầu màn Sơ đồ phòng: lọc bên trái, kiểu xem trong khung riêng bên phải */
.bd-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.bd-top h1 { margin: 0; }
.bd-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.bd-actions .btn svg { vertical-align: -3px; }
#bdSel:empty { display: none; }
#bdSel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Thanh công cụ: bên trái tìm + thời gian, bên phải cách hiển thị; mọi ô cùng cao 34px */
.bd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 10px; margin-bottom: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); }
.bd-block { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.bd-right { margin-left: auto; }
.bd-sep { width: 1px; height: 22px; background: var(--line); }
.bd-bar input:not([type=checkbox]), .bd-bar select { height: 34px; padding-block: 0; box-sizing: border-box; font-size: 13px; }
.bd-bar .btn { height: 34px; box-sizing: border-box; }
.bd-bar label.inline { margin: 0; white-space: nowrap; }
.bd-bar .seg { height: 34px; box-sizing: border-box; }
.bd-bar .seg button, .bd-top .seg button { padding: 4px 10px; }
.bd-bar .seg button.on { color: var(--accent); font-weight: 600; }
.bd-bar #bdQ { width: 150px; padding-inline: 10px; }
.bd-bar input[type=date] { width: 132px; }
.bd-bar #bdBy { width: 132px; }
.bd-nav { display: inline-flex; align-items: center; gap: 4px; }
.bd-view { flex: none; border: 1px solid var(--line-2); background: var(--panel); }
.bd-view button { min-height: 28px; }
.bd-view button.on { background: var(--accent); color: var(--on-solid); box-shadow: none; font-weight: 600; }
.bd-tools-btn { display: none; }
.tl-bar { touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tl-grip { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.tl-grip::after { content: ''; position: absolute; right: 2px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: currentColor; opacity: .45; }
@media (pointer: coarse) { .tl-grip { width: 18px; } }
.tl.dragging { user-select: none; -webkit-user-select: none; } .tl.dragging .tl-bar { pointer-events: none; }
.tl-bar.drag-src { opacity: .35; }
.tl-ghost.bad { outline-color: var(--bad); }
.tl-drag-label.bad { background: var(--bad); color: var(--on-solid); }
.tl-ghost { opacity: .85; outline: 2px dashed var(--ink); outline-offset: -2px; z-index: 2; pointer-events: none; }
.bd-grp { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; vertical-align: -3px; }
.tl-rubber { position: absolute; top: 5px; height: 24px; border-radius: 6px; background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; pointer-events: none; }
.tl-drag-label { position: fixed; z-index: 60; padding: 2px 7px; border-radius: 6px; background: var(--toast-bg); color: var(--toast-ink); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; }
@media (max-width: 720px) {
  .bd-tools-btn { display: inline-flex; }
  #bdRoot:not(.tools-open) .bd-tools { display: none; }
  .bd-bar { padding: 0; border: 0; background: none; }
  .bd-bar .bd-block { flex-basis: 100%; margin-left: 0; }
  .bd-sep { display: none; }
  .bd-bar .seg { flex-basis: 100%; }
  .bd-bar .seg button { flex: 1; justify-content: center; }
  .bd-actions { margin-left: 0; }
  .bd-nav { flex-basis: 100%; }
  .bd-nav input[type=date] { flex: 1; width: 0; }
  .bd-bar #bdBy, .bd-bar #bdQ { flex: 1 1 130px; width: auto; }
}
/* Chú thích + số đếm đầu màn Sơ đồ phòng: bấm để lọc */
.bd-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; }
.bd-lg-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bd-lg-name { margin-right: 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* Mỗi chip mang màu trạng thái của nó (đúng màu trên thanh, thẻ); đang lọc thì tô đặc */
.bd-chip { --c: var(--line-2); --c-fg: var(--ink); display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, var(--panel)); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
.bd-chip:hover { border-color: var(--c); } .bd-chip b { font-weight: 700; }
.bd-chip.none { opacity: .6; }
.bd-chip.active { background: var(--c); border-color: var(--c); color: var(--c-fg); opacity: 1; }
.bd-chip .sw, .bd-pop .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--line-2); margin-right: 1px; }
.bd-pop { position: fixed; z-index: 58; max-width: min(320px, calc(100vw - 16px)); display: grid; gap: 2px; padding: 10px 12px; font-size: 12px; line-height: 1.45; background: var(--panel); color: var(--ink); border-radius: 10px; box-shadow: var(--shadow-pop); pointer-events: none; }
.bd-pop-h { color: var(--ink-2); display: flex; align-items: center; gap: 5px; } .bd-pop b { font-size: 13px; }
.bd-pop-n { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.bd-holds { display: grid; gap: 6px; margin-bottom: 10px; }
/* Cấu hình màu trạng thái */
.bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 14px; }
.bc-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bc-row input[type=color] { flex: none; width: 40px; height: 30px; padding: 2px; }
.bc-demo { flex: 1; min-width: 0; padding: 5px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-card.picked { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bad); z-index: 2; pointer-events: none; }
.tl-now span { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); padding: 0 4px; border-radius: 4px; background: var(--bad); color: var(--on-solid); font-size: 10px; font-weight: 600; line-height: 16px; }
.room-chip.off { background: var(--hover); color: var(--muted); text-decoration: line-through; }
.room-chip:disabled { cursor: default; }
.quote-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.quote-total b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--accent); }
.notice-inline { background: var(--warn-soft); color: var(--warn); border-radius: 6px; padding: 4px 8px; margin-bottom: 6px; }
td.actions { white-space: nowrap; } td.actions .btn { margin: 0 2px 2px 0; }
tr.strike td { text-decoration: line-through; }
.folio-sum { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: flex-end; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); margin-top: 6px; }
.folio-sum b { font-size: 16px; }
.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
tr.total td { border-top: 1px solid var(--line-2); font-weight: 600; }
@media (max-width: 720px) { .kpis.k3 { grid-template-columns: 1fr; } .hide-sm { display: none; } }

@media (max-width: 960px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2, .g3, .profile { grid-template-columns: 1fr; }
  .dup { grid-template-columns: 1fr; }
}
.tk .filters { flex-wrap: nowrap; }
.tk .filters select { flex: 1; min-width: 0; font-size: 12px; padding: 4px 6px; }
@media (max-width: 720px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav, .main { min-width: 0; }
  .head .filters { width: 100%; }
  .head .filters select { flex: 1 1 100%; }
  .head .filters input[type=date] { flex: 1; width: 0; }
  .head .filters .chips { flex-basis: 100%; }
  .kpi .value { font-size: 21px; }
  /* Menu thành ngăn kéo trượt từ trái, ẩn mặc định (bấm nút ☰ trên header) */
  .nav { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); height: auto; z-index: 70; padding: 16px 12px; transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow-pop); }
  .nav.open { transform: none; }
  .topbar, .main { grid-column: 1; }
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 16px; }
  .tb-crumb { flex: 1; }
  .tb-search { order: 5; flex-basis: 100%; margin-left: 0; }
  .tb-kbd { display: none; }
  .tb-chip { padding: 5px 9px; }
  .tb-chip .tb-chip-x { display: none; } /* điện thoại: chip Ca chỉ còn giờ mở */
  /* chỗ cho chip Ca / Chờ duyệt / ?: bỏ breadcrumb và nút giao diện (đã có trong menu tài khoản) */
  .tb-crumb, #tbTheme { display: none; }
  #tbMenu { margin-right: auto; }
  .nav { height: auto; }
  .tb-pop.tb-right { position: fixed; top: 64px; left: 16px; right: 16px; width: auto; min-width: 0; }
  .main { padding: 16px; }
}

/* Ca & quỹ: biên bản bàn giao in được */
.shift-report h3 { font-size: 13px; margin: 14px 0 6px; }
.sign-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 18px; text-align: center; font-size: 13px; }
.ok { color: var(--ok); }
@media print {
  body { background: #fff; }
  .topbar, .nav, .head, #shBody > .filters, #shBody > .kpis, #shBody > .grid, #shBody > form, #shBody > .card:not(.shift-report), .no-print { display: none !important; }
  .shell { display: block; } .main { padding: 0; } .shift-report, .bf-print { box-shadow: none; border: 0; }
}

/* Kênh OTA */
.ota-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ota-card { font: inherit; color: var(--ink); text-align: left; display: grid; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; box-shadow: var(--shadow); transition: border-color .12s; }
.ota-card:hover { border-color: var(--line-2); }
.ota-card b { font-size: 15px; }
.ota-card.picked { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
/* Giá & đóng bán OTA (đợt C4): lịch loại phòng × đêm */
.rate-grid th, .rate-grid td { padding: 4px; text-align: center; vertical-align: top; }
.rate-grid th.rt { text-align: left; position: sticky; left: 0; background: var(--panel); z-index: 1; min-width: 110px; }
.rate-grid th.today { color: var(--accent); }
.rate-grid th.weekend { color: var(--accent-2); }
.rate-cell { font: inherit; color: var(--ink); width: 100%; min-width: 84px; min-height: 52px; display: grid; gap: 2px; justify-items: center; align-content: start;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 4px; cursor: pointer; font-size: 13px; }
.rate-cell:hover:not(:disabled) { border-color: var(--line-2); background: var(--hover); }
.rate-cell:disabled { opacity: .45; cursor: default; }
.rate-cell.closed { background: var(--bad-soft); }
.rate-cell.closed b { color: var(--bad); }
.rate-cell.set { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.rate-tag { font-size: 11px; line-height: 1.2; color: var(--ink-2); }
.recon-lines { margin: 4px 0; padding-left: 18px; max-height: 220px; overflow: auto; }

/* Buồng phòng: thẻ việc cho điện thoại */
.hk-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.hk-card { --rc: var(--warn); background: var(--panel); border: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--rc), var(--shadow); border-radius: var(--radius); padding: 14px 14px 14px 18px; display: grid; gap: 10px; }
.hk-card.doing { --rc: var(--accent); }
.hk-head { display: flex; gap: 12px; align-items: center; }
.hk-room { font-size: 28px; font-weight: 600; letter-spacing: -.02em; min-width: 64px; }
.hk-note { background: var(--accent-soft); border-radius: var(--r-sm); padding: 8px 10px; font-weight: 600; }
.hk-check { display: grid; gap: 8px; }
.hk-check label { display: flex; gap: 10px; align-items: center; font-weight: 400; font-size: 15px; color: var(--ink); }
.hk-check input { width: 22px; height: 22px; accent-color: var(--accent); }
.hk-big { padding: 14px; font-size: 16px; width: 100%; }
/* Ảnh đính kèm (N2.2, public/photos.js): lưới ảnh nhỏ, nút chụp, xem lớn */
.ph-strip { display: grid; gap: 4px; }
.ph-grid { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ph-thumb { position: relative; width: 64px; height: 64px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--hover); overflow: hidden; cursor: zoom-in; display: grid; place-items: center; }
.ph-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-thumb.broken { border-color: var(--bad); }
.ph-pdf { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ph-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; font-size: 13px; text-align: center; }
label.ph-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 64px; height: 64px; padding: 0 14px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 600; }
label.ph-add:hover { background: var(--hover); }
label.ph-add.busy { opacity: .5; pointer-events: none; }
.ph-strip.compact .ph-thumb, .ph-strip.compact label.ph-add { width: 40px; min-width: 40px; height: 40px; padding: 0; }
.ph-strip.compact .ph-add-t { display: none; }
.ph-view { position: fixed; inset: 0; z-index: 80; background: rgba(11,11,12,.92); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
.ph-view img { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; min-height: 0; }
.ph-view-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; color: #fff; }
.ph-view-bar span { margin-right: auto; }
.hk-issue { display: grid; gap: 8px; border-top: 1px dashed var(--line-2); padding-top: 10px; }
.tk-photos { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* Hôm nay (lễ tân): lời chào + ô tìm, thẻ số bấm được, lưới thẻ có nút làm ngay */
.td2 { max-width: 1120px; margin: 0 auto; }
.td2 .btn { border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; }
.td2 .btn svg { width: 16px; height: 16px; flex: none; }
.td-hero { text-align: center; padding: 14px 0 6px; background: radial-gradient(640px 220px at 50% 0, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%); }
.td-hello { color: var(--muted); font-size: 13px; margin: 0; }
.td-hero h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: -.02em; margin: 6px 0 8px; }
.td-lead { color: var(--ink-2); font-size: 15px; max-width: 520px; margin: 0 auto 20px; }
.td-box { max-width: 760px; margin: 0 auto; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 10px 40px -12px rgba(16,24,40,.16); padding: 10px; }
.td-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.td-tab { font: inherit; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; }
.td-tab:hover { background: var(--hover); color: var(--ink); }
.td-tab.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.td-search { display: flex; align-items: center; gap: 10px; padding: 6px 12px 0; color: var(--muted); }
.td-search input { flex: 1; border: 0; outline: 0; background: transparent; box-shadow: none; font-size: 15px; padding: 10px 0 34px; min-height: 0; color: var(--ink); }
.td-search input:focus { box-shadow: none; }
.td-hint { margin: 0; padding: 0 12px 12px; font-size: 12px; color: var(--muted); }
.td-hits { display: grid; gap: 4px; padding: 0 4px; }
.td-hits:not(:empty) { padding-bottom: 8px; }
.td-hits > p { margin: 0 8px 4px; }
.td-hit { font: inherit; color: var(--ink); text-align: left; display: flex; align-items: center; gap: 10px; border: 0; background: var(--panel-2); border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.td-hit:hover { background: var(--hover); }
.td-hit > span:nth-child(2) { flex: 1; min-width: 0; }
.td-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding: 10px 2px 0; }
.td-bar .ghost { margin-left: auto; }
.td-bar .primary { padding-left: 18px; padding-right: 18px; }
.td-under { text-align: center; color: var(--muted); font-size: 12px; margin: 12px 0 0; }
.td-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.td-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 32px 0 26px; }
.td-kpi { font: inherit; color: var(--ink); text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; display: grid; gap: 2px; transition: border-color .12s, box-shadow .12s; }
button.td-kpi { cursor: pointer; }
button.td-kpi:hover { border-color: var(--line-2); }
.td-kpi b small { font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.td-track { height: 6px; border-radius: 9px; background: var(--hover); margin: 6px 0 4px; overflow: hidden; }
.td-track i { display: block; height: 100%; background: var(--accent); border-radius: 9px; }
.td-kpi .label { font-size: 12.5px; color: var(--muted); }
.td-kpi b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.td-kpi .sub { font-size: 12px; color: var(--muted); }
.td-kpi .warn { color: var(--warn); font-weight: 500; } .td-kpi .err { font-weight: 500; }
.td-h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.td-h2 h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.td-h2 a { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 13px; }
.td-alert svg { color: var(--warn); flex: none; }
.td-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 25%, var(--line)); border-radius: 14px; padding: 11px 16px; margin-bottom: 14px; }
.td-handover { background: var(--accent-soft, var(--warn-soft)); align-items: flex-start; }
.td-handover svg { color: var(--accent); margin-top: 2px; }
.td-handover > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-handover-note { white-space: pre-line; overflow-wrap: anywhere; }
.td-alert-go { margin-left: auto; font: inherit; font-weight: 600; color: var(--warn); background: none; border: 0; cursor: pointer; padding: 0; }
.td-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.td-f { font: inherit; font-weight: 500; font-size: 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.td-f em { font-style: normal; font-size: 11px; background: var(--hover); color: var(--muted); border-radius: 999px; padding: 0 7px; }
.td-f.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.td-f.on em { background: rgba(255,255,255,.22); color: inherit; }
.tdc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.tdc { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.tdc-top { display: flex; align-items: center; gap: 8px; }
.tdc-room { font-weight: 700; font-size: 15px; background: var(--hover); border-radius: 10px; padding: 3px 10px; }
.tdc-room.none { color: var(--muted); }
.tdc-src { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 9px; background: var(--info-soft); color: var(--info); }
.tdc-time { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tdc-name { font-size: 15px; font-weight: 600; }
.tdc-meta { font-size: 12.5px; color: var(--muted); }
.tdc-money { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; background: var(--panel-2); border-radius: 10px; padding: 7px 10px; }
.tdc-acts { display: flex; gap: 8px; align-items: center; margin-top: auto; flex-wrap: wrap; }
.tdc-acts .btn { flex: 1; justify-content: center; }
.tdc-acts select { flex: 1 1 100%; }
.td-bottom { display: grid; gap: 14px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-top: 28px; }
.td-bottom .card { border-radius: 18px; }
.td-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; margin-bottom: 12px; }
.td-bar-v { height: 64px; border-radius: 10px; background: var(--hover); display: flex; align-items: flex-end; overflow: hidden; margin: 4px 0; }
.td-bar-v i { display: block; width: 100%; background: var(--accent); border-radius: 10px 10px 0 0; min-height: 3px; }
.td-room { display: inline-block; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
.td-types summary { cursor: pointer; margin-top: 4px; }
.td-types[open] summary { margin-bottom: 8px; }
.room-chip.off-clean { background: var(--warn-soft); color: var(--warn); }
.td-avail td.warn { color: var(--warn); font-weight: 600; }
.td-avail td.err { font-weight: 700; }
@media (max-width: 960px) { .td-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .td-bottom { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .td-bar .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; } .td-bar .ghost { margin-left: 0; } .td-bar .primary { flex-basis: 100%; } .td-tab { padding: 7px 11px; } }
.dot.urgent { background: var(--bad); } .dot.high { background: var(--warn); }

/* Quét CCCD (đợt A6) */
.scan-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; background: var(--accent-soft); border-radius: var(--r-sm); padding: 8px 10px; }
.scan-cam { display: grid; gap: 8px; justify-items: start; }
.scan-cam video { width: 100%; max-width: 420px; border-radius: var(--r-sm); background: #000; }
.notice-ok { background: var(--ok-soft); color: var(--ok); border-radius: 6px; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.small.ok { color: var(--ok); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* In phiếu (đợt A7): chỉ #printArea khi in; khổ A4 hoặc K80 (máy in nhiệt 80mm). Luôn chữ đen nền trắng, không theo chế độ tối */
#printArea { display: none; }
@media print {
  body.printing > *:not(#printArea) { display: none !important; }
  body.printing #printArea { display: block; }
}
.pr { color: #000; background: #fff; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.35; }
.pr-a4 { font-size: 13px; }
.pr-k80 { font-size: 11px; width: 74mm; }
.pr h1 { font-size: 1.35em; text-align: center; margin: 8px 0 2px; letter-spacing: .02em; }
.pr h2 { font-size: 1.05em; margin: 10px 0 4px; }
.pr-head, .pr-sub { text-align: center; }
.pr-sub { margin-bottom: 8px; }
.pr table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.pr th, .pr td { padding: 3px 4px; text-align: left; vertical-align: top; }
.pr th { text-transform: none; letter-spacing: 0; background: none; color: #000; font-size: inherit; font-weight: 700; }
.pr-kv td { border-bottom: 0; }
.pr-table th { border-bottom: 1px solid #000; }
.pr-table td { border-bottom: 1px dotted #999; }
.pr .num { text-align: right; white-space: nowrap; }
.pr .small { font-size: .85em; color: #333; }
.pr-kv td:first-child { width: 42%; color: #333; }
.pr-words { font-style: italic; margin: 6px 0; }
.pr-big { font-size: 1.3em; }
.pr-note { margin-top: 8px; border-top: 1px dashed #999; padding-top: 6px; white-space: pre-line; }
.pr-sign { display: flex; justify-content: space-around; gap: 8px; margin-top: 14px; text-align: center; min-height: 80px; }
.pr-k80 .pr-sign { min-height: 56px; }
.pr-time { margin-top: 10px; font-size: .8em; text-align: center; color: #555; }
.print-bar { margin: -6px 0 12px; }

/* Vào / Ra ca (chấm công H3) — dùng trên điện thoại */
.punch-card { text-align: center; max-width: 460px; }
.punch-clock { font-size: 44px; font-weight: 600; margin: 10px 0 2px; letter-spacing: 1px; }
.punch-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 10px; }
.punch-btn { min-height: 64px; font-size: 18px; justify-content: center; }

/* Hướng dẫn sử dụng (public/help.js): ngăn theo màn + trang tài liệu */
.help-drawer { position: fixed; inset: 0; z-index: 60; }
.help-drawer.hidden { display: none; }
.help-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.25); }
.help-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: var(--panel); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.help-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 4px 16px; }
.help-panel > input[type=search] { margin: 6px 16px 8px; }
.help-panel-body { flex: 1; overflow: auto; padding: 0 16px 20px; }
.help-where { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.help-sec { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 6px; }
.help-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.help-item:hover { border-color: var(--accent); background: var(--hover); }
.help-item > span:last-child { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.help-tag { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); align-self: start; white-space: nowrap; }
.help-tag.wf { background: var(--accent-2-soft); color: var(--accent-2); }
.help-all { margin-top: 10px; }
.help-title { margin: 6px 0 4px; }
.help-meta { margin-bottom: 10px; }
.help-doc { line-height: 1.65; }
.help-doc h2 { font-size: 17px; margin: 18px 0 6px; }
.help-doc h3 { font-size: 15px; margin: 14px 0 4px; }
.help-doc p { margin: 6px 0; }
.help-doc ul, .help-doc ol { margin: 6px 0; padding-left: 22px; }
.help-doc li { margin: 3px 0; }
.help-doc code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 12.5px; }
.help-doc table { margin: 8px 0; }
.help-doc a { color: var(--accent); }
.help-callout { border-left: 3px solid var(--info); background: var(--info-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 6px 12px; margin: 10px 0; }
.help-callout.tip { border-color: var(--ok); background: var(--ok-soft); }
.help-callout.warn { border-color: var(--warn); background: var(--warn-soft); }
.help-callout p { margin: 4px 0; }
.help-hero { max-width: 760px; margin-bottom: 18px; }
.help-hero input[type=search] { width: 100%; font-size: 15px; padding: 10px 14px; }
.help-h2 { font-size: 16px; margin: 20px 0 10px; }
.help-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.help-cat { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); text-decoration: none; }
.help-cat:hover { border-color: var(--accent); }
.help-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 12px; }
.help-page { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: start; max-width: 1080px; }
.help-page article { min-width: 0; }
.help-side { position: sticky; top: 72px; display: grid; gap: 2px; font-size: 13px; border-left: 1px solid var(--line); padding-left: 14px; }
.help-side b { margin-bottom: 6px; }
.help-side a { color: var(--ink-2); text-decoration: none; padding: 4px 0; }
.help-side a.active, .help-side a:hover { color: var(--accent); }
.help-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 900px) { .help-page { grid-template-columns: 1fr; } .help-side { position: static; border-left: 0; padding-left: 0; } }

/* Đặt phòng (mockup docs/mockup-dat-phong.html, Khải duyệt 07/11/2026): 4 bước bên trái, tóm tắt + nút đặt bám theo khi cuộn bên phải */
.bk-head { align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; padding-bottom: 0; }
.bk-head h1 { padding-bottom: 10px; }
.bk-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.bk-tab { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px; color: var(--ink-2); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.bk-tab.on { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.bk-cnt { font-size: 11px; font-weight: 600; background: var(--hover); color: var(--ink-2); border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.bk-cnt.warn { background: var(--warn-soft); color: var(--warn); }
.bk-kb { margin-left: auto; padding-bottom: 12px; }
.bk-kb kbd { font: 600 11px/1 inherit; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 2px 5px; background: var(--panel); }
.bk-form { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; scroll-margin-top: 76px; }
@media (min-width: 1100px) { .bk-form { grid-template-columns: minmax(0, 1fr) 320px; } .bk-side { position: sticky; top: 76px; } }
@media (min-width: 1400px) { .bk-form { grid-template-columns: minmax(0, 1fr) 360px; } }
.bk-main { display: grid; gap: 0; padding: 0; }
.bk-sec { display: grid; gap: 12px; padding: 18px 20px; }
.bk-sec + .bk-sec { border-top: 1px solid var(--line); }
.bk-sec > h2 { display: flex; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap; }
.bk-sec > h2 small { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.bk-h-r { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--accent); }
.bk-step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.bk-step.done { background: var(--accent); color: var(--on-accent); }
.bk-lbl { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }
.bk-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.bk-kind { font: inherit; text-align: left; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 9px 12px; cursor: pointer; color: var(--ink); min-width: 0; }
.bk-kind:hover { border-color: var(--line-2); }
.bk-kind.on { border-color: var(--accent); background: var(--accent-soft); }
.bk-kind-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--hover); display: grid; place-items: center; color: var(--ink-2); }
.bk-kind.on .bk-kind-ic { background: var(--accent); color: var(--on-accent); }
.bk-kind-t { display: grid; min-width: 0; line-height: 1.25; }
.bk-kind-t b { font-weight: 600; }
.bk-kind-t span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-kind .bk-cnt { margin-left: auto; align-self: flex-start; }
.bk-kind.on .bk-cnt { background: var(--panel); color: var(--accent); }
.bk-pkgs { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--accent-soft); background: var(--panel-2); border-radius: var(--radius); }
.bk-pkgl { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-pkg { font: inherit; text-align: left; border: 1.5px solid var(--line); background: var(--panel); border-radius: 10px; padding: 6px 12px; cursor: pointer; display: grid; line-height: 1.3; color: var(--ink); }
.bk-pkg b { font-size: 13px; font-weight: 600; }
.bk-pkg span { font-size: 11.5px; color: var(--muted); }
.bk-pkg.on { border-color: var(--accent); background: var(--accent-soft); }
.bk-pkg.on b { color: var(--accent); }
.bk-when { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; align-items: end; }
.bk-arrow { display: none; }
.bk-dt { display: flex; margin-top: 4px; }
.bk-dt input { min-width: 0; }
.bk-dt input[type=date] { flex: 1 1 0; width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.bk-dt input[type=time] { width: 104px; flex: none; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bk-chips .chip { min-height: 28px; padding: 2px 11px; font-size: 12.5px; }
.bk-chips .chip.on { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.bk-dur { margin-left: auto; font-size: 12.5px; color: var(--ink-2); background: var(--hover); border-radius: 8px; padding: 3px 10px; }
.bk-dur b { color: var(--ink); }
.bk-tip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--info-soft); color: var(--info); border-radius: 10px; padding: 7px 12px; font-size: 13px; }
.bk-tip .btn { margin-left: auto; }
.bk-guests { display: flex; flex-wrap: wrap; gap: 18px; align-items: end; }
.bk-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--input-bg); }
.bk-stepper button { font: inherit; width: 34px; height: 36px; border: 0; background: none; cursor: pointer; font-size: 17px; color: var(--ink-2); }
.bk-stepper button:hover:not(:disabled) { background: var(--hover); }
.bk-stepper button:disabled { opacity: .35; cursor: default; }
.bk-stepper output { min-width: 28px; text-align: center; font-weight: 600; }
.bk-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 36px; }
.bk-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk-switch i { width: 34px; height: 20px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .15s; }
.bk-switch i::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.bk-switch input:checked + i { background: var(--accent); }
.bk-switch input:checked + i::after { left: 16px; }
.bk-switch input:focus-visible + i { box-shadow: 0 0 0 3px var(--ring); }
.bk-nobf { display: inline-flex; align-items: center; min-height: 36px; }
.bk-cal summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 500; }
.bk-cal[open] summary { margin-bottom: 8px; }
.bk-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.bk-rt { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 11px 13px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.bk-rt.on { border-color: var(--accent); }
.bk-rt.off { opacity: .6; }
.bk-rt-nm { min-width: 0; }
.bk-rt-meta { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.bk-rt-meta b { color: var(--ink); }
.bk-rt .bk-stepper { grid-row: 1 / 3; grid-column: 2; }
.bk-rt-wide { grid-column: 1 / -1; }
.bk-rt-rooms { border-top: 1px dashed var(--line-2); margin-top: 6px; padding-top: 8px; display: grid; gap: 6px; }
.bk-rt-hint { display: flex; justify-content: space-between; gap: 8px; }
.warn-t { color: var(--warn); }
.bk-free { font-weight: 600; }
.bk-free.ok { color: var(--ok); } .bk-free.low { color: var(--warn); } .bk-free.full { color: var(--bad); }
.bk-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bk-match { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--accent-soft); border-radius: 10px; padding: 9px 12px; }
.bk-match > div { flex: 1; min-width: 160px; }
.bk-match .av { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--panel); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: 12px; }
.bk-more summary, .bk-ovr summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 500; }
.bk-more[open] summary { margin-bottom: 10px; }
.bk-ovr input { margin-top: 6px; width: 100%; }
.bk-src { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 12px; }
@media (max-width: 640px) { .bk-src { grid-template-columns: 1fr; } .bk-kinds { grid-template-columns: 1fr 1fr; } .bk-kind { padding: 8px 10px; } .bk-kind-ic { display: none; } }
.bk-side { display: grid; gap: 12px; }
.bk-side-hd { display: grid; gap: 2px; }
.bk-side-hd h2 { margin: 0; }
.bk-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; margin: 0; font-size: 13px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.bk-dl dt { color: var(--muted); }
.bk-dl dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.bk-lines { display: grid; gap: 5px; font-size: 13px; }
.bk-lines > div { display: flex; justify-content: space-between; gap: 10px; }
.bk-lines > div > span:first-child { color: var(--ink-2); }
.bk-lines .notice-inline { margin: 0; }
.bk-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px; }
.bk-total span { color: var(--ink-2); font-weight: 500; }
.bk-total b { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.bk-vat { text-align: right; margin-top: -8px; }
.bk-vat:empty { display: none; }
.bk-status { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bk-status label { border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 10px; cursor: pointer; font-size: 12px; line-height: 1.3; display: grid; }
.bk-status label b { font-size: 13px; }
.bk-status label span { color: var(--muted); }
.bk-status input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk-status label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.bk-status label:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.bk-checks { display: grid; gap: 4px; font-size: 12.5px; }
.bk-checks > div { display: flex; gap: 8px; align-items: center; }
.bk-checks .ok { color: var(--ok); } .bk-checks .no { color: var(--warn); }
.bk-checks i { font-style: normal; flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.bk-checks .ok i { background: var(--ok-soft); } .bk-checks .no i { background: var(--warn-soft); }
.bk-acts { display: grid; gap: 8px; }
.bk-acts .btn { width: 100%; justify-content: center; }
.bk-acts p { margin: 0; text-align: center; }
.bk-submit { min-height: 44px; font-size: 15px; }
#bkList { scroll-margin-top: 76px; }
table.avail td[data-pick-rt] { cursor: pointer; }
table.avail td[data-pick-rt]:hover { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Folio: tóm tắt đặt phòng + số tiền ở đầu, folio bên trái, việc cần làm / điểm thưởng bên phải; thao tác folio dạng tab */
.fl-hero { display: grid; gap: 16px 24px; grid-template-columns: minmax(0, 1fr); margin-bottom: 16px; }
@media (min-width: 900px) { .fl-hero { grid-template-columns: minmax(0, 1fr) 300px; } }
.fl-info { display: grid; gap: 10px; align-content: start; }
.fl-guest b { font-size: 17px; }
.fl-rooms { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-room { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; display: grid; gap: 2px; }
.fl-note { background: var(--warn-soft); color: var(--ink); border-radius: var(--r-sm); padding: 6px 10px; }
.fl-money { display: grid; gap: 6px; align-content: start; }
.fl-money > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--ink-2); }
.fl-money > div b { color: var(--ink); font-size: 15px; }
.fl-money .fl-due { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.fl-money .fl-due b { font-size: 24px; letter-spacing: -.02em; }
.fl-due.owe b { color: var(--bad); } .fl-due.over b { color: var(--warn); } .fl-due.ok b { color: var(--ok); }
.fl-money .btn { margin-top: 6px; width: 100%; }
.fl-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1440px) { .fl-layout { grid-template-columns: minmax(0, 1fr) 340px; } .fl-side { position: sticky; top: 76px; } }
.fl-side { display: grid; gap: 14px; } .fl-side > div:empty { display: none; } .fl-side .card { margin-bottom: 0 !important; }
.fl-sec-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.fl-sec-head h2 { margin: 0; }
.fl-card-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fl-card-head h2 { margin: 0; }
.fl-card:not(.moving) .fl-pick { display: none; }
.fl-card.moving .fl-pick { background: var(--accent-soft); }
.fl-totals { display: grid; gap: 4px; margin: 8px 0 0 auto; padding: 10px 0; border-top: 1px solid var(--line); max-width: 320px; }
.fl-totals > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.fl-totals .fl-due b { font-size: 18px; }
.fl-h3 { margin: 14px 0 6px; }
.fl-actions { margin-top: 14px; padding: 12px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line); display: grid; gap: 12px; }
.fl-tabs { justify-self: start; flex-wrap: wrap; }
.fl-tabs button { font-size: 13px; padding: 6px 12px; }
.fl-panel { align-items: end; }
.fl-hint { flex-basis: 100%; }
/* Folio đầy đủ theo bố cục tab Thanh toán (Khải duyệt mockup 07/11/2026): thanh tóm tắt dính, thanh bước, Bill trái + cột phải thu / kiểm tra / trả phòng */
.fl-sum { position: sticky; top: 60px; z-index: 12; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 24px; align-items: center; padding: 12px 16px; margin-bottom: 12px; }
.fl-sum-guest b { font-size: 17px; } .fl-rchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fl-rchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel-2); font-size: 13px; }
.fl-rchip.in { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; } .fl-rchip.out { color: var(--muted); }
.fl-sum-money { display: flex; gap: 22px; align-items: center; } .fl-sum-money > div { display: grid; text-align: right; } .fl-sum-money span { font-size: 12px; color: var(--muted); } .fl-sum-money b { font-size: 16px; font-variant-numeric: tabular-nums; } .fl-sum-money .sp-due { font-size: 24px; }
.fl-flow { display: flex; margin: 0 0 12px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.fl-flow li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-right: 1px solid var(--line); font-weight: 600; color: var(--muted); } .fl-flow li:last-child { border-right: 0; }
.fl-flow li i { font-style: normal; display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--hover); font-size: 12px; }
.fl-flow li small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); } .fl-flow li.now { color: var(--ink); background: var(--accent-soft); } .fl-flow li.now i { background: var(--accent); color: var(--on-accent); }
.fl-flow li.done { color: var(--ink-2); } .fl-flow li.done i { background: var(--ok); color: var(--on-solid); }
.fl-cols { --sp: var(--accent); --sp-soft: var(--accent-soft); --sp-ink: var(--accent); display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .fl-cols:not(.solo) { grid-template-columns: minmax(0, 1fr) 360px; } .fl-rail { position: sticky; top: 150px; } }
.fl-main { min-width: 0; display: grid; gap: 14px; } .fl-rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fl-ftabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.fl-ftab { font: inherit; text-align: left; display: grid; line-height: 1.25; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); cursor: pointer; font-weight: 600; }
.fl-ftab small { font-weight: 400; font-size: 12px; color: var(--muted); } .fl-ftab.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.fl-bill { padding: 0; overflow: hidden; }
.fl-line { align-items: center; } .fl-line-main { flex: 1; min-width: 0; } .fl-pick { flex: none; width: 22px; } .fl-pick input { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); }
.fl-line.strike .sp-name { text-decoration: line-through; }
.fl-pickbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 8px 14px; background: var(--accent); color: var(--on-accent); font-weight: 600; } .fl-pickbar label { font-size: 12px; display: grid; gap: 2px; font-weight: 400; } .fl-pickbar .btn { align-self: end; }
.fl-room-h { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; } .fl-room-sum { margin-left: auto; font-variant-numeric: tabular-nums; }
.fl-car { color: var(--muted); transition: transform .15s; } .fl-room-h.shut .fl-car { transform: rotate(-90deg); } .fl-room-h.shut + .fl-room-body { display: none; }
.fl-paid { padding: 8px 14px 12px; }
.fl-more { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .fl-more > summary { padding: 11px 14px; font-weight: 700; cursor: pointer; }
.fl-more-list { padding: 0 14px 12px; display: grid; gap: 6px; } .fl-more-list .btn { justify-content: flex-start; width: 100%; }
@media (max-width: 1099px) { .fl-sum { position: static; grid-template-columns: 1fr; } .fl-sum-money { justify-content: space-between; } .fl-flow { flex-wrap: wrap; } .fl-flow li { flex: 1 1 45%; } }
.fl-print { position: relative; }
.fl-print > summary { list-style: none; } .fl-print > summary::-webkit-details-marker { display: none; }
.fl-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; display: grid; gap: 2px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-pop); }
.fl-pop .btn { justify-content: flex-start; }
.fl-pop label { padding: 6px 8px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
@media (max-width: 720px) { .fl-pop { right: auto; left: 0; } }

/* Góp ý (public/feedback.js) */
.fb-form { display: grid; gap: 12px; }
.fb-form textarea, .fb-item textarea, #fbPU textarea { font-family: inherit; font-size: 14px; min-height: 84px; }
.fb-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fb-list { display: grid; gap: 12px; max-width: 860px; }
.fb-item { display: grid; gap: 6px; }
.fb-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--muted); }
.fb-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; margin: 0; }
.fb-reply { border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 8px 12px; font-size: 13.5px; }
.fb-reply > div { white-space: pre-wrap; margin-top: 2px; }
.fb-kv { font-size: 13px; margin: 8px 0; }
.fb-kv th { text-align: left; color: var(--muted); font-weight: 500; width: 120px; vertical-align: top; }
.fb-merged { padding: 4px 0; font-size: 13px; }
.fb-merged a, #fbPU a { color: var(--accent); cursor: pointer; }
@media (max-width: 720px) { .fb-row { grid-template-columns: 1fr; } }
.fb-detail h3 { margin: 16px 0 4px; font-size: 14px; }

/* Trợ lý KeyStay (public/assistant.js): nút bot nổi góc dưới phải + khung chat */
.asst-btn { position: fixed; right: 20px; bottom: 20px; z-index: 55; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; box-shadow: var(--shadow-pop); display: grid; place-items: center; transition: transform .15s; }
.asst-btn:hover { transform: translateY(-2px); }
.asst-btn.active { transform: scale(.92); }
.asst-btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.asst-panel { position: fixed; right: 20px; bottom: 88px; z-index: 55; width: min(440px, calc(100vw - 24px)); height: min(600px, calc(100vh - 120px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; overflow: hidden; }
.asst-panel.hidden { display: none; }
body.no-asst .asst-btn, body.no-asst .asst-panel { display: none; } /* Chat Đa Kênh: không có trợ lý (NO_ASSISTANT_VIEWS, app.js) */
.asst-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.asst-head > div { display: grid; flex: 1; line-height: 1.3; }
.asst-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.asst-ava svg { width: 20px; height: 20px; }
.asst-log { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.asst-empty { font-size: 14px; }
.asst-sug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.asst-sug .chip, .asst-src .chip { white-space: normal; text-align: left; height: auto; }
.asst-msg { max-width: 92%; font-size: 14px; border-radius: 14px; padding: 8px 12px; overflow-wrap: anywhere; }
.asst-msg.me { align-self: flex-end; background: var(--accent); color: #fff; white-space: pre-wrap; border-bottom-right-radius: 4px; }
.asst-msg.bot { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.asst-msg.bot .help-doc { line-height: 1.55; }
.asst-msg.bot .help-doc > :first-child { margin-top: 0; }
.asst-msg.bot .help-doc > :last-child { margin-bottom: 0; }
.asst-src { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.asst-act { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
.asst-rate { border: 1px solid transparent; background: none; border-radius: 8px; cursor: pointer; padding: 2px 6px; font-size: 15px; opacity: .55; }
.asst-rate:hover, .asst-rate.on { opacity: 1; border-color: var(--line-2); }
.asst-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 4px; border-top: 1px solid var(--line); }
.asst-form.hidden { display: none; }
.asst-form textarea { flex: 1; resize: none; min-height: 40px; max-height: 140px; font-family: inherit; font-size: 14px; }
.asst-note { font-size: 11px; color: var(--muted); margin: 0; padding: 2px 12px 10px; }
@media (max-width: 720px) {
  .asst-btn { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .asst-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
}
@media print { .asst-btn, .asst-panel { display: none !important; } }

/* A2: ảnh / đoạn chat kèm góp ý, nháp góp ý trong khung trợ lý */
.fb-shot { display: grid; gap: 4px; }
.fb-shot-prev { display: flex; gap: 8px; align-items: center; }
.fb-shot-prev img { max-height: 90px; max-width: 160px; border-radius: 6px; border: 1px solid var(--line); }
.fb-img { max-width: 100%; max-height: 360px; border-radius: 8px; border: 1px solid var(--line); }
.fb-chat { display: grid; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; }
.fb-chat > div { display: grid; gap: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-chat-me > div { font-weight: 500; }
.asst-draft { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); display: grid; gap: 8px; }
.asst-draft.sent { color: var(--ok); font-size: 13px; }
.asst-draft summary { cursor: pointer; margin-bottom: 8px; }
.asst-draft .fb-form { gap: 8px; }
.asst-draft .fb-row { grid-template-columns: 1fr; }
.asst-sim { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 13px; }
.asst-status { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; animation: asstPulse 1.2s ease-in-out infinite; }
@keyframes asstPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .asst-status { animation: none; } }
/* Bảng số liệu trong khung chat hẹp: không bẻ chữ, cuộn ngang */
.asst-msg.bot .help-doc table { display: block; overflow-x: auto; max-width: 100%; font-size: 12.5px; border-collapse: collapse; }
.asst-msg.bot .help-doc th, .asst-msg.bot .help-doc td { white-space: nowrap; padding: 4px 8px; }

/* Bảng thao tác lượt ở (Sơ đồ phòng): nút chính trên cùng, thao tác ít dùng gom vào "Thao tác khác" */
.st-more { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.st-more > summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.st-more-body { display: grid; gap: 8px; margin-top: 8px; }
.fl-room-acts { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }

/* Chốt ngày & doanh thu: thẻ ngày cần chốt (số liệu tạm + kiểm tra trước khi chốt) ở trên, 2 bảng bên dưới */
.na-page { display: grid; gap: 16px; }
.na-hero { display: grid; gap: 14px; }
.na-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.na-date { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.na-act { display: grid; gap: 6px; justify-items: end; }
.na-kpis { margin-bottom: 0; }
.na-h3 { margin: 2px 0 -4px; }
.na-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.na-checks li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); flex-wrap: wrap; }
.na-checks li > span:nth-child(2) { flex: 1; min-width: 200px; }
.na-checks li.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, var(--line)); }
.na-checks li.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 22%, var(--line)); }
.na-ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; color: var(--on-solid); background: var(--ok); }
.na-checks .warn .na-ic { background: var(--warn); } .na-checks .info .na-ic { background: var(--info); }
.na-checks a { font-weight: 500; white-space: nowrap; }
.na-table td, .na-table th { padding-top: 8px; padding-bottom: 8px; }
.na-table tr.na-open td { background: var(--accent-soft); }
.na-table tr.na-total td { font-weight: 600; border-top: 2px solid var(--line-2); }
@media (max-width: 960px) { .na-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .na-act { justify-items: stretch; width: 100%; } .na-act .btn { width: 100%; } .na-date { font-size: 22px; } }
/* Khung trợ lý phóng to (nút ⤢ trên đầu khung) */
.asst-panel { transition: width .18s ease, height .18s ease; }
.asst-panel.wide { width: min(920px, calc(100vw - 40px)); height: calc(100vh - 108px); }
.asst-panel.wide .asst-log { padding: 18px 22px; gap: 12px; }
.asst-panel.wide .asst-msg { font-size: 15px; max-width: 86%; }
.asst-panel.wide .asst-msg.bot .help-doc table { font-size: 13.5px; }
.asst-panel.wide .asst-form textarea { font-size: 15px; }
@media (max-width: 720px) { .asst-wide-btn { display: none; } .asst-panel.wide { width: 100vw; height: 100dvh; } }
@media (prefers-reduced-motion: reduce) { .asst-panel { transition: none; } }

/* Vị trí & quyền (N1.4): bảng tick thao tác theo nhóm */
.perm-search { width: 100%; }
.perm-groups { display: grid; gap: 10px; max-height: min(52dvh, 460px); overflow: auto; padding-right: 4px; }
.perm-group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0; display: grid; gap: 6px; }
.perm-group legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.perm-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; cursor: pointer; }
.perm-item input { margin-top: 2px; flex: none; }
.perm-item .badge { font-size: 11px; }
.perm-add select { flex: 1 1 220px; min-width: 0; }
.perm-add input { flex: 1 1 160px; min-width: 0; }
.perm-eff { display: grid; gap: 6px; margin-top: 6px; }
.perm-eff ul { margin: 2px 0 0; padding-left: 18px; }
.pos-table td:first-child { min-width: 220px; }
.staff-table td:nth-child(2) { min-width: 170px; }

/* Nhập từ Excel (B7): bảng xem trước, dòng lỗi tô đỏ */
.xl-table td, .xl-table th { white-space: nowrap; }
.xl-table .xl-err { white-space: normal; min-width: 220px; max-width: 420px; color: var(--bad); font-size: 12.5px; }
.xl-table tr.xl-bad td { background: var(--bad-soft); }
.ok-line { color: var(--ok); }
#xlCard input[type=file] { max-width: 100%; }
/* Cài đặt › Thông báo (N2.3): bảng loại × vị trí */
.np-table td.np-cell { white-space: nowrap; }
.np-table td.np-cell label { display: block; font-size: 13px; }
.np-table td.np-def label { font-style: italic; color: var(--muted); }

/* Giải thích giá (B2) */
.why-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.why-table td, .why-table th { vertical-align: top; }
.why-head td { background: var(--panel-2); font-weight: 600; font-size: 12.5px; }
.why-hit td { background: var(--warn-soft); }
.why-total td { border-top: 2px solid var(--line-2); }
@media (max-width: 600px) { .why-table td, .why-table th { padding: 6px 4px; } }

/* Hôm nay của chủ (N2.6): thẻ số lớn, ưu tiên điện thoại. Chỉ dùng token màu của :root */
.ot-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ot-head h1 { margin: 0 0 2px; }
.ot-head p { margin: 0; }
.ot-chips { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
.ot-chip { font: inherit; font-size: 13px; color: var(--ink-2); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; min-height: 36px; cursor: pointer; white-space: nowrap; }
.ot-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.ot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ot-card { font: inherit; color: var(--ink); text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: grid; gap: 4px; align-content: start; min-width: 0; }
button.ot-card { cursor: pointer; transition: border-color .12s; }
button.ot-card:hover, button.ot-card:focus-visible { border-color: var(--accent); }
.ot-main { grid-column: span 2; }
.ot-wide { grid-column: 1 / -1; }
.ot-label { font-size: 12.5px; color: var(--muted); }
.ot-big { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ot-big.warn { color: var(--warn); }
.ot-sub { font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.ot-track { height: 6px; border-radius: 9px; background: var(--hover); overflow: hidden; margin: 2px 0; }
.ot-track i { display: block; height: 100%; background: var(--accent); border-radius: 9px; }
.ot-vsl { display: grid; gap: 2px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.ot-vs { font-size: 12.5px; color: var(--muted); }
.ot-vs b { font-variant-numeric: tabular-nums; }
.ot-vs.up b { color: var(--ok); }
.ot-vs.down b { color: var(--bad); }
.ot-vs.flat b { color: var(--ink-2); }
.ot-vs em { font-style: normal; }
.ot-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.ot-trio b { display: block; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ot-trio span { font-size: 12px; color: var(--muted); }
.ot-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; margin-top: 6px; }
.ot-day { display: grid; gap: 4px; justify-items: center; font-size: 12px; }
.ot-bar { width: 100%; max-width: 38px; height: 72px; background: var(--hover); border-radius: 8px; display: flex; align-items: flex-end; overflow: hidden; }
.ot-bar i { display: block; width: 100%; background: var(--accent); border-radius: 8px 8px 0 0; }
.ot-dv { font-weight: 600; font-variant-numeric: tabular-nums; }
.ot-dd { color: var(--muted); }
.ot-h2 { margin: 24px 0 10px; }
.ot-h2 h2 { margin: 0; font-size: 16px; }
.ot-count { display: inline-block; min-width: 22px; padding: 0 7px; margin-left: 4px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; text-align: center; }
.ot-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ot-prop { font: inherit; color: var(--ink); text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 3px; cursor: pointer; }
.ot-prop:hover, .ot-prop:focus-visible { border-color: var(--accent); }
.ot-pv { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ot-pv em { font-style: normal; color: var(--muted); }
.ot-todo { border-radius: 18px; }
.ot-todo a { color: var(--ink); text-decoration: none; }
@media (max-width: 960px) { .ot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ot-main { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .ot-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ot-card { padding: 14px 16px; }
  .ot-big { font-size: 28px; }
  .ot-bar { height: 56px; }
  .ot-chip { min-height: 40px; }
}

/* ---- Thiết lập nhanh + checklist (N1.5, public/setup.js) ---- */
.sw-steps { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sw-st { font: inherit; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 6px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); color: var(--ink-2); cursor: pointer; }
.sw-st:hover { background: var(--hover); }
.sw-st:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.sw-st.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.sw-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--hover); font-size: 13px; font-weight: 600; flex: none; }
.sw-st.done .sw-n { background: var(--ok-soft); color: var(--ok); }
.sw-st.skip { color: var(--muted); }
.sw-st.on .sw-n { background: var(--accent); color: var(--on-accent); }
.sw-body { max-width: 860px; }
.sw-body h2 { margin: 0 0 6px; }
.sw-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0; }
.sw-type { display: grid; gap: 6px; align-content: start; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); cursor: pointer; }
.sw-type:hover { background: var(--hover); }
.sw-type.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--ring); }
.sw-type input { position: absolute; opacity: 0; pointer-events: none; }
.sw-type:focus-within { box-shadow: 0 0 0 3px var(--ring); }
.sw-type b { font-size: 16px; }
.sw-form { display: grid; gap: 12px; margin: 14px 0; }
.sw-form label { display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.sw-prices input { width: 120px; }
.sw-prices input.extra { display: block; margin-top: 4px; width: 120px; }
.sw-try { margin-top: 16px; background: var(--panel-2); }
.sw-try h2 { font-size: 15px; }
.sw-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.sw-foot .grow { flex: 1; }
.sw-hide { margin-top: 14px; }
.sw-check { margin-bottom: 16px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-soft); }
.sw-check h2 { margin: 0; font-size: 17px; }
.sw-check-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 220px); gap: 16px; align-items: center; margin-bottom: 10px; }
.sw-check-head p { margin: 2px 0 0; }
.sw-bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.sw-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.sw-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 18px; }
.sw-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; align-items: center; min-height: 36px; }
.sw-list li > span.small { grid-column: 2; margin-top: -8px; }
.sw-list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.sw-list a:hover { text-decoration: underline; }
.sw-list li.done a { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.sw-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: 12px; color: var(--on-accent); background: var(--panel); }
.sw-list li.done .sw-dot { background: var(--accent); border-color: var(--accent); }
.sw-list li.skip .sw-dot { border-style: dashed; }
@media (max-width: 560px) {
  .sw-check-head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sw-st span:last-child { font-size: 13px; }
  .sw-foot .btn, .sw-form .btn { min-height: 44px; }
  .sw-prices input, .sw-prices input.extra { width: 100px; }
}
.sw-new[hidden] { display: none; }

/* ---- N2.6: Hôm nay một tay cho lễ tân trên điện thoại (tdPhone trong app-today.js, chỉ vẽ khi ≤ 720px) ---- */
.tdm { display: grid; gap: 12px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.tdm .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 12px; }
.tdm .btn svg { flex: none; width: 18px; height: 18px; } /* .tdm cũng là .td2 (checklist thiết lập chèn vào đó): giữ cỡ icon */
.tdm { max-width: none; }
.tdm-head { display: flex; align-items: center; gap: 10px; }
.tdm-head > div { flex: 1; min-width: 0; }
.tdm-head p { margin: 0; }
.tdm-head h1 { margin: 2px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.tdm-todo { font: inherit; font-size: 13.5px; font-weight: 600; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line)); background: var(--warn-soft); color: var(--warn); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.tdm-todo em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--warn); color: var(--panel); font-size: 11.5px; line-height: 20px; text-align: center; }
.tdm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tdm-kpis > div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 6px; display: grid; justify-items: center; text-align: center; }
.tdm-kpis b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdm-kpis span { font-size: 11px; color: var(--muted); line-height: 1.25; }
.tdm .td-alert { margin: 0; padding: 10px 12px; font-size: 13px; }
.tdm-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: var(--hover); border-radius: 14px; padding: 4px; } /* không sticky: thanh trên của điện thoại cao 2 hàng, dễ che */
.tdm-seg button { font: inherit; font-size: 13.5px; font-weight: 500; min-height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; padding: 0 4px; white-space: nowrap; }
.tdm-seg button em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.tdm-seg button.on { background: var(--panel); color: var(--accent); font-weight: 600; box-shadow: var(--shadow); }
.tdm-list { display: grid; gap: 10px; }
.tdm-list .card { margin: 0; }
.tdm-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: grid; gap: 10px; }
.tdm-row { display: flex; align-items: center; gap: 10px; }
.tdm-row .tdc-room { font-size: 17px; min-width: 52px; text-align: center; padding: 8px 6px; }
.tdm-who { flex: 1; min-width: 0; display: grid; }
.tdm-who b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdm-card p { margin: 0; }
.tdm-money { display: flex; justify-content: flex-end; font-size: 14px; background: var(--panel-2); border-radius: 10px; padding: 6px 10px; }
.tdm-acts { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 6px; }
.tdm-acts .btn { padding: 0 8px; font-size: 14px; gap: 5px; white-space: nowrap; }
.tdm-acts.show { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* + nút Cho khách xem (TT2): 2 hàng × 2 nút */
.tdm-more { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.tdm-more .btn { flex: none; min-height: 40px; border-radius: 999px; }
/* Thanh thao tác chính ở đáy màn (vùng ngón cái) */
.tdm-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px -12px rgba(16,24,40,.18); }
.tdm-dock button { position: relative; font: inherit; font-size: 12px; font-weight: 600; min-height: 56px; border: 0; border-radius: 14px; background: none; color: var(--ink-2); display: grid; place-items: center; gap: 2px; padding: 6px 2px; cursor: pointer; }
.tdm-dock button:active { background: var(--hover); }
.tdm-dock button.on { background: var(--accent); color: var(--on-accent); }
.tdm-dock button:disabled { opacity: .55; }
.tdm-dock em { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: var(--on-solid); font-size: 11px; font-style: normal; line-height: 18px; }
body:has(.tdm-dock) .asst-btn { bottom: calc(86px + env(safe-area-inset-bottom)); right: 12px; width: 44px; height: 44px; } /* nút trợ lý nằm trên thanh dưới, nhỏ lại đỡ che thẻ */
/* Bảng chọn (tdmPick): mỗi dòng 1 nút to */
.tdm-pick-h { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 -2px !important; }
.tdm-picks { display: grid; gap: 6px; }
.tdm-pick { font: inherit; color: var(--ink); text-align: left; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); cursor: pointer; }
.tdm-pick:active, .tdm-pick:hover { background: var(--hover); }
.tdm-pick > svg { flex: none; color: var(--accent); }
.tdm-pick-main { flex: 1; min-width: 0; display: grid; }
.tdm-pick-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdm-pick .tdc-room { min-width: 46px; text-align: center; }
.tdm-pick .dot { flex: none; }
.tdm-picks:has(> .tdm-pick > b:first-child) { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } /* phòng trống: ô vuông */
.tdm-pick > b:first-child { font-size: 17px; }
.tdm-pick:has(> b:first-child) { display: grid; justify-items: center; gap: 0; text-align: center; }
.dlg.tdm-sheet .dlg-body { max-height: 62dvh; overflow-y: auto; }
/* Điện thoại: mọi hộp thoại thành bảng trượt từ đáy màn, nút to trong vùng ngón cái */
@media (max-width: 520px) {
  .dlg, .dlg.wide { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 20px 20px 0 0; max-height: 92dvh; }
  .dlg-form { padding: 16px 16px calc(14px + env(safe-area-inset-bottom)); }
  .dlg-acts .btn { min-height: 48px; }
  .dlg-body input, .dlg-body select { font-size: 16px; }
  .dlg-body .filters > input, .dlg-body .filters > select { flex: 1 1 140px; width: auto !important; }
}
/* Quét CCCD trên điện thoại: khung ngắm vừa màn 375px, nút to */
.scan-view { position: relative; width: 100%; max-width: 420px; overflow: hidden; border-radius: var(--r-sm); }
.scan-view video { display: block; }
.scan-frame { position: absolute; inset: 14% 22%; border: 3px solid rgba(255,255,255,.9); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none; }
.scan-cam p { margin: 0; }
@media (max-width: 720px) {
  .scan-bar label { flex: 1 1 100%; }
  .scan-bar input { width: 100% !important; font-size: 16px; }
  .scan-bar .btn { flex: 1 1 100%; min-height: 48px; font-size: 15px; }
  .scan-view { max-width: none; }
  .scan-view video { aspect-ratio: 4 / 3; object-fit: cover; max-width: none; }
  .scan-cam { justify-items: stretch; }
  .scan-cam .btn { min-height: 48px; }
}
/* Kiểm minibar (public/app-hk.js minibarDialog): mỗi món một hàng, ô số to cho ngón tay */
.mb-grid { display: grid; gap: 8px; margin-bottom: 10px; }
.mb-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mb-item input { width: 72px; text-align: center; font-size: 16px; }
/* Kết quả ô tìm (đặt phòng + chức năng, đợt U2): không hẹp theo ô nhập khi thanh trên chật */
#tbResults { min-width: min(340px, 90vw); }
/* Folio: thanh tóm tắt dính khi khối đầu trang cuộn khuất (đợt U3, public/app-folio.js folioBar) + vạch chia trong menu Thêm */
.fl-bar { display: none; position: sticky; top: 60px; z-index: 20; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-pop); }
.fl-bar.show { display: flex; }
.fl-bar-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-bar-due { margin-left: 8px; font-weight: 600; }
.fl-bar-due.owe { color: var(--bad); }
.fl-pop-sep { border-top: 1px solid var(--line); margin: 4px 0; }
@media (max-width: 720px) { .fl-bar .filters { width: 100%; } }
/* Tổng quan quản lý trên điện thoại: "Cần quyết" + duyệt nhanh lên ngay dưới tiêu đề (đợt U3, docs/ADMIN-UX-PLAN.md mục 6.7) */
@media (max-width: 720px) { .ot { display: flex; flex-direction: column; } .ot > .ot-head { order: -2; } .ot > .ot-decide { order: -1; } }
/* Dịch vụ & tài khoản quỹ (public/app-pricing.js PR.services): tab con, thanh công cụ, bảng dịch vụ nhóm theo danh mục */
.sv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.sv-toolbar input[type=search] { flex: 1 1 220px; min-width: 0; }
.sv-toolbar > p { flex: 1 1 260px; margin: 0; }
.sv-sp { flex: 1; }
.sv-hint { margin: 0 0 10px; }
.sv-empty { padding: 18px 4px; }
.sv-table td, .sv-table th { vertical-align: middle; }
.sv-table tr.sv-grp th { background: var(--hover); text-align: left; font-weight: 600; padding-top: 8px; padding-bottom: 8px; }
.sv-table .sv-price { width: 120px; text-align: right; }
.sv-table .sv-vat { width: 72px; text-align: right; }
td.center, th.center { text-align: center; }
.sv-code-m { display: none; }
@media (max-width: 720px) {
  .sv-sp { display: none; } .sv-toolbar .btn { flex: 1; white-space: nowrap; }
  .sv-table .sv-code { display: none; } .sv-code-m { display: inline; } /* điện thoại: mã xuống dòng phụ để cột tên đủ rộng */
  .sv-table .sv-price { width: 92px; } .sv-table .sv-vat { width: 60px; }
}

/* Cấu hình cơ sở (Phòng & giá › Cấu hình cơ sở, PR.settings): mục lục bám trái + các phần một cột + thanh Lưu bám đáy */
.cfg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.cfg-toc { display: none; }
@media (min-width: 1100px) {
  .cfg { grid-template-columns: 190px minmax(0, 820px); }
  .cfg-toc { display: grid; gap: 1px; position: sticky; top: 76px; font-size: 13px; border-left: 1px solid var(--line); }
}
.cfg-toc button { all: unset; cursor: pointer; padding: 6px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-2); border-radius: 0 6px 6px 0; }
.cfg-toc button:hover { color: var(--ink); background: var(--hover); }
.cfg-toc button.active { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }
.cfg-toc button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cfg-main { display: grid; gap: 16px; min-width: 0; }
.cfg-sec { scroll-margin-top: 76px; display: grid; gap: 14px; align-content: start; }
.cfg-sec > h2 { margin: 0; }
.cfg-desc { margin: -6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 70ch; }
.cfg-fields { display: grid; gap: 14px; align-content: start; }
.cfg-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; align-items: start; }
.cfg-cols.cfg-wide { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.cfg-cols textarea { min-height: 0; }
.cfg-hint { display: block; font-size: 12px; font-weight: 400; color: var(--muted); line-height: 1.45; }
.cfg-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 400; color: var(--ink); cursor: pointer; }
.cfg-check input { margin: 2px 0 0; flex: none; width: 16px; height: 16px; accent-color: var(--accent); }
.cfg-check small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.45; }
.cfg-check:has(input:disabled) { cursor: default; }
.cfg-group { display: grid; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--line); }
.cfg-group > h3 { margin: 0; color: var(--ink); }
.cfg-group > h3 + .cfg-hint { margin-top: -8px; }
.cfg-table { display: grid; gap: 6px; max-width: 560px; }
.cfg-line { display: grid; grid-template-columns: var(--cols); gap: 8px; align-items: center; }
.cfg-line.head { font-size: 12px; color: var(--muted); font-weight: 500; }
.shift-cols { --cols: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 34px; }
.vat-cols { --cols: minmax(0, 1fr) minmax(0, 1fr) 34px; }
.cfg-del { padding: 0; width: 34px; justify-content: center; color: var(--muted); }
.cfg-del:hover { color: var(--bad); }
.cfg-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.cfg-row .cfg-check { min-width: 230px; }
.cfg-num input { width: 150px; }
.cfg-num:has(input:disabled) { opacity: .55; }
.cfg-bar { position: sticky; bottom: 12px; z-index: 30; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 10px 14px; margin-top: 4px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.cfg-bar .cfg-state { color: var(--muted); margin-left: 4px; }
.cfg-bar.dirty { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow-pop, var(--shadow)); }
.cfg-bar.dirty .cfg-state { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.cfg-bar.dirty .cfg-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
@media (max-width: 720px) {
  .cfg-bar { bottom: 8px; padding: 8px 72px 8px 10px; gap: 6px 8px; } /* chừa nút trợ lý (.asst-btn) góc phải */
  .cfg-bar .btn { padding-inline: 12px; }
  .cfg-bar .cfg-state { display: none; } .cfg-bar.dirty .cfg-state { display: inline-flex; flex-basis: 100%; order: -1; margin-left: 0; }
  .shift-cols { --cols: minmax(0, 1fr) minmax(0, 1fr) 34px; } .shift-cols > :first-child { grid-column: 1 / -1; } .shift-cols.head { display: none; }
  .shift-cols:not(.head) { padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
}

/* Tự động hoá (N3.3): dòng điều kiện / hành động trong hộp sửa quy tắc */
.dlg.wide:has(#autoConds) { width: min(820px, calc(100vw - 32px)); }
.auto-table { min-width: 860px; }
.auto-table td:nth-child(1), .auto-table td:nth-child(2) { min-width: 150px; }
.auto-table td:nth-child(3), .auto-table td:nth-child(4) { min-width: 170px; }
.auto-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(90px, .7fr) minmax(120px, 1fr) auto; gap: 6px; align-items: start; margin: 6px 0; }
.auto-act { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px; margin: 6px 0; background: var(--panel); }
.auto-act .auto-act { background: var(--panel-2); }
.auto-act-head { display: flex; gap: 6px; align-items: center; }
.auto-act-head select { flex: 1; }
.auto-act-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.auto-act-body:empty { display: none; }
.auto-act-body > .small { grid-column: 1 / -1; }
.auto-preview { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 600px) {
  .auto-row { grid-template-columns: 1fr 1fr; }
  .auto-row [data-v] { grid-column: 1 / 2; }
  .auto-act-body { grid-template-columns: 1fr; }
}

/* Gợi ý khi di chuột / focus (public/app.js TIP_SEL) */
.ks-tip { position: fixed; z-index: 1000; max-width: 280px; padding: 5px 8px; border-radius: 6px; background: var(--toast-bg); color: var(--toast-ink); font-size: 12px; line-height: 1.35; pointer-events: none; box-shadow: var(--shadow-pop); }
.ks-tip.hidden { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- Hộp thư đa kênh (M11 P3, public/app-inbox*.js; mockup docs/mockups/omnichannel/Main.dc.html) ----------------
   3 cột lấp đầy chiều cao màn: thanh lọc dọc · danh sách · khung chat · khách. Chia 6 khối theo file giao diện (đợt C0, docs/archive/CHAT-UI-PLAN.md) — sửa vùng nào thì sửa trong khối của vùng đó. Màu thẻ là dữ liệu (inline), chữ trên thẻ luôn đậm / trắng. */
/* === Chat Đa Kênh: khung màn, trạng thái, phần dùng chung (public/app-inbox.js) === */
#view.main:has(> .ib) { padding: 0; }
.ib { display: flex; flex-direction: column; height: calc(100dvh - var(--ib-top, 61px)); min-height: 480px; background: var(--bg); }
.ib-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ib-head h1 { font-size: 18px; }
.ib-prop { display: flex; align-items: center; gap: 8px; grid-auto-flow: column; font-size: 13px; }
.ib-prop select { min-height: 36px; }
.ib-chans { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-pill { font: inherit; font-size: 13px; padding: 5px 12px; min-height: 34px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); cursor: pointer; }
.ib-pill.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ib-grow { flex: 1; }
.ib-body { flex: 1; display: flex; min-height: 0; position: relative; }
body.no-topbar .topbar { display: none; }
.ib-rbtn, .ib-ibtn { width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; position: relative; flex: none; }
.ib-rbtn:hover, .ib-ibtn:hover:not(:disabled) { background: var(--hover); }
.ib-ibtn:disabled { opacity: .4; cursor: not-allowed; }
.ib-rbtn:focus-visible, .ib-ibtn:focus-visible, .ib-row:focus-visible, .ib-tag:focus-visible, .ib-pal:focus-visible, .ib-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.ib-link { font: inherit; font-size: 12px; border: 0; background: transparent; color: var(--accent); font-weight: 600; cursor: pointer; padding: 2px 4px; }
.ib-pad { padding: 16px; margin: 0; }
.ib-av { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--neutral-soft); color: var(--ink-2); }
.ib-av.lg { width: 48px; height: 48px; font-size: 18px; }
.ib-av.sm { width: 32px; height: 32px; font-size: 13px; }
.ib-av { overflow: hidden; }
.ib-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ib-av[data-hue="1"] { background: var(--accent-soft); color: var(--accent); } .ib-av[data-hue="2"] { background: var(--pink-soft); color: var(--pink); }
.ib-av[data-hue="3"] { background: var(--ok-soft); color: var(--ok); } .ib-av[data-hue="4"] { background: var(--info-soft); color: var(--info); }
.ib-av[data-hue="5"] { background: var(--vip-soft); color: var(--vip); }
.ib-chip { padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; white-space: nowrap; }
/* Dấu thẻ nguồn Pancake (đồng bộ 2 chiều) — thẻ KeyStay không có dấu */
.ib-tsrc { display: inline-grid; place-items: center; width: 11px; height: 11px; margin-right: 3px; border-radius: 50%; border: 1.2px solid currentColor; color: inherit; font: 800 7px/1 system-ui, sans-serif; font-style: normal; vertical-align: 1px; flex: none; box-sizing: border-box; }
.ib-pal .ib-tsrc { margin: 0; width: 10px; height: 10px; color: #14161a; background: rgba(255, 255, 255, .85); border: 0; }
p .ib-tsrc { color: var(--ink); }
.ib-empty { margin: auto; padding: 24px; text-align: center; }
.ib-back, .ib-guest-btn, .ib-side-x { display: none; }
.ib-var { background: var(--info-soft); color: var(--info); border-radius: 4px; padding: 0 3px; }
.ib-ibtn.on { background: var(--warn-soft); color: var(--warn); }
.ib-ibtn.hidden { display: none; }
/* Ảnh hội thoại nhóm (Chat C1): 2 ảnh thành viên đan chéo + "+X"; chưa có ảnh -> icon nhóm */
.ib-grpav { position: relative; display: block; flex: none; width: 40px; height: 40px; }
.ib-grpav .ib-av { position: absolute; width: 26px; height: 26px; font-size: 11px; box-shadow: 0 0 0 2px var(--panel); }
.ib-grpav .a1 { left: 0; top: 0; } .ib-grpav .a2 { right: 0; bottom: 0; }
.ib-grpav .more { position: absolute; left: 0; bottom: 0; min-width: 16px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--hover); color: var(--ink-2); box-shadow: 0 0 0 2px var(--panel); font-size: 9px; line-height: 14px; font-weight: 700; text-align: center; }
.ib-grpav.sm { width: 28px; height: 28px; } .ib-grpav.sm .ib-av { width: 19px; height: 19px; font-size: 9px; } .ib-grpav.sm .more { height: 12px; min-width: 14px; font-size: 8px; line-height: 12px; }
.ib-row.on .ib-grpav .ib-av, .ib-row.on .ib-grpav .more { box-shadow: 0 0 0 2px var(--accent-soft); }
/* Thanh kéo đổi rộng danh sách / cột khách (Chat C1, ibBindResize): rộng 6px, vạch 2px giữa, tay nắm; màn hẹp ẩn */
.ib-rz { flex: none; width: 6px; position: relative; cursor: col-resize; touch-action: none; outline: none; background: var(--panel); }
.ib-rz::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 2px; background: var(--line); transition: background .12s; }
.ib-rz::before { content: ""; position: absolute; top: 50%; left: 1px; width: 4px; height: 28px; margin-top: -14px; border-radius: 3px; background: var(--line-2); z-index: 1; }
.ib-rz:hover::after, .ib-rz:focus-visible::after, .ib-rz.drag::after { background: var(--accent); }
.ib-dragging { cursor: col-resize; user-select: none; }
.ib-dragging iframe, .ib-dragging img { pointer-events: none; }
.ib-rz[data-rz="s"]:has(+ .ib-side:empty) { display: none; }
@media (min-width: 721px) {
  .ib-body > .ib-list { flex: 0 1 var(--ib-wl, 300px); min-width: 240px; border-right: 0; }
  .ib-body > .ib-chat { flex: 1 1 0; min-width: 360px; } /* khung chat lấy phần còn lại; cột hai bên chỉ co khi chat chạm 360px */
}
@media (min-width: 1181px) {
  .ib-body > .ib-side { flex: 0 1 var(--ib-ws, 390px); min-width: 320px; border-left: 0; }
}
@media (max-width: 1180px) { .ib-rz[data-rz="s"] { display: none; } }
/* Điện thoại: 1 cột — danh sách, bấm hội thoại thì sang khung chat (nút quay lại) */
@media (max-width: 720px) {
  .ib-rz { display: none; }
  .ib-head { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
  .ib-head h1, .ib-head > .ib-grow { display: none; }
  .ib-prop { flex: 1; min-width: 0; font-size: 0; } .ib-prop select { flex: 1; min-width: 0; width: 100%; font-size: 14px; } /* bỏ chữ "Cơ sở" cho vừa một hàng */
  .ib-body { position: relative; }
}

/* === Chat Đa Kênh: thanh lọc, danh sách (public/app-inbox-list.js) === */
.ib-wait { font: inherit; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-sm); border: 1px solid transparent; background: var(--warn-soft); color: var(--warn); font-weight: 500; cursor: pointer; }
.ib-wait.on { border-color: var(--warn); }
/* P6: page cần kiểm tra kết nối (webhook bỏ sót tin / kéo bù lỗi) */
.ib-sync { display: grid; gap: 6px; justify-items: start; padding: 8px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: 13px; }
.ib-sync.hidden { display: none; }
.ib-rail { flex: none; width: 56px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0; }
.ib-rbtn.on { background: var(--accent-soft); color: var(--accent); }
.ib-rbadge { position: absolute; top: 5px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent-2); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }
.ib-list { flex: 0 1 360px; min-width: 280px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.ib-list-top { padding: 12px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); }
.ib-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 0 10px; min-height: 38px; color: var(--muted); grid-auto-flow: column; }
.ib-search input { border: 0; box-shadow: none; padding: 6px 0; flex: 1; background: transparent; }
.ib-search input:focus { box-shadow: none; }
.ib-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.ib-tf-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.ib-tf-head b { color: var(--ink); }
.ib-seg { display: flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; }
.ib-seg button { font: inherit; font-size: 12px; padding: 2px 10px; min-height: 26px; border: 0; background: var(--panel); color: var(--ink-2); cursor: pointer; }
.ib-seg button.on { background: var(--ink); color: var(--panel); }
.ib-palette { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
.ib-pal { height: 16px; padding: 0; border-radius: 3px; cursor: pointer; border: 1px solid rgba(17,18,20,.08); }
.ib-pal.on { border: 2px solid var(--ink); }
.ib-tf-text { min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.ib-rows { flex: 1; overflow-y: auto; }
.ib-row { font: inherit; color: inherit; text-align: left; width: 100%; display: flex; gap: 10px; padding: 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; align-items: flex-start; }
.ib-row:hover { background: var(--hover); }
.ib-row.unread { background: color-mix(in srgb, var(--accent) 7%, transparent); } /* tin chưa đọc: nền nhạt */
.ib-row.waiting { background: color-mix(in srgb, var(--warn) 13%, transparent); } /* khách đang chờ trả lời: nền hổ phách (ưu tiên hơn chưa đọc) */
.ib-row.unread:hover, .ib-row.waiting:hover { background: var(--hover); }
.ib-row.on, .ib-row.on:hover { background: var(--accent-soft); }
/* Cột phải thẳng hàng một mép (Khải 10/11/2026): giờ / "chờ N phút" ở trên, số chưa đọc ở giữa, icon điện thoại ở dưới — như Pancake */
.ib-row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 44px; text-align: right; }
.ib-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ib-row-top { display: flex; justify-content: space-between; gap: 8px; }
.ib-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-row.unread .ib-name { font-weight: 700; }
.ib-time { color: var(--muted); font-size: 12px; flex: none; }
.ib-waitt { color: var(--warn); font-size: 12px; font-weight: 600; flex: none; }
.ib-prev { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-row.unread .ib-prev { color: var(--ink); }
.ib-bad { color: var(--bad); font-weight: 600; }
.ib-row-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ib-src { color: var(--ink-2); font-size: 12px; }
.ib-dot { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent-2); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.ib-cat, .ib-asg { font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.ib-top-row { display: flex; gap: 8px; align-items: center; }
.ib-top-row .ib-search { flex: 1; min-width: 0; }
.ib-staff select { min-height: 38px; padding: 4px 6px; max-width: 132px; font-size: 13px; }
/* Điện thoại: 1 cột — danh sách, bấm hội thoại thì sang khung chat (nút quay lại) */
@media (max-width: 720px) {
  .ib-wait { width: 100%; justify-content: center; }
  .ib-rail { width: 48px; } .ib-rbtn { width: 40px; height: 40px; }
  .ib-list { flex: 1; min-width: 0; border-right: 0; }
  .ib-open .ib-rail, .ib-open .ib-list, .ib-open .ib-head { display: none; }
}
/* Danh sách hội thoại gọn như Pancake: huy hiệu kênh trên ảnh đại diện, hàng thấp hơn, thanh lọc thẻ một hàng */
.ib-avw { position: relative; flex: none; display: block; width: 40px; height: 40px; }
.ib-plat { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--panel); background: var(--muted); color: #fff; font: 700 10px/13px var(--font, inherit); font-style: normal; text-align: center; }
.ib-plat[data-p="personal_zalo"], .ib-plat[data-p="zalo"], .ib-plat[data-p="facebook"], .ib-plat[data-p="telegram"] { background: #0a7cff; }
.ib-plat[data-p="whatsapp"] { background: #25d366; }
.ib-plat[data-p="instagram"] { background: #d6249f; }
.ib-plat[data-p^="tiktok"] { background: #111214; }
.ib-row { padding: 9px 12px; gap: 10px; }
.ib-row-main { gap: 2px; }
.ib-row-tags:empty { display: none; }
.ib-list-top { padding: 8px 10px; gap: 6px; }
.ib-tf-head { gap: 6px; }
.ib-tf-head b { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ib-tf-text { display: none; }
.ib-palette { gap: 2px; }
.ib-pal { height: 14px; }
.ib-bulk-row { display: flex; align-items: center; gap: 8px; }
.ib-bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; background: var(--hover); font-size: 13px; }
.ib-bulkbar.hidden { display: none; }
.ib-selbox { flex: none; align-self: center; width: 20px; height: 20px; border: 2px solid var(--line-2); border-radius: 5px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; }
.ib-selbox.on { background: var(--accent); border-color: var(--accent); }
.ib-row.picked { background: var(--accent-soft); }
/* Thông báo của màn gom vào một chuông ở đầu trang; thẻ chưa gán làm mờ như Pancake; logo kênh ở ô soạn tin */
.ib-alerts { position: relative; }
.ib-alerts.hidden, .ib-alerts-panel.hidden { display: none; }
.ib-alerts-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(420px, 86vw); display: grid; gap: 8px; padding: 10px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-pop); }
.ib-alerts-panel .ib-sync.hidden, .ib-alerts-panel .ib-wait.hidden { display: none; }
.ib-alerts-panel .ib-wait { width: 100%; justify-content: flex-start; }
.ib-tf-block { display: grid; gap: 6px; }
.ib-tf-block.hidden { display: none; }
.ib-bulk-row { flex-wrap: wrap; row-gap: 2px; }
#ibTfToggle.on { font-weight: 700; }
/* Chip thẻ + nhãn nguồn / loại / phân công ở dòng danh sách: 9,5px, lề nhỏ (mockup Chat C1) */
.ib-row-tags { gap: 3px; }
.ib-row-tags .ib-chip { padding: 0 5px; border-radius: 3px; font-size: 9.5px; line-height: 15px; }
.ib-row-tags .ib-cat, .ib-row-tags .ib-asg { font-size: 9.5px; line-height: 13px; padding: 0 5px; }
.ib-row-tags .ib-asg svg { width: 10px; height: 10px; }
.ib-av-grp { color: var(--ink-2); }

/* === Chat Đa Kênh: đầu khung chat, luồng tin (public/app-inbox-chat.js) === */
.ib-chat { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
/* Đầu khung chat 2 hàng (Chat C2, mockup): ảnh 28px + tên 14px + dòng phụ 11px; hàng icon 26px không vạch ngăn, popover dưới hàng icon */
.ib-chat-head { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; row-gap: 2px; padding: 6px 10px 3px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.ib-chat-head > .ib-av { width: 28px; height: 28px; font-size: 12px; }
.ib-ch-main { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 0; line-height: 1.25; }
.ib-ch-main b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-ch-main .small { font-size: 11px; }
.hc-row { flex: 1 0 100%; display: flex; align-items: center; gap: 2px; margin-left: -4px; min-width: 0; }
.hc-left, .hc-right { display: flex; align-items: center; gap: 2px; flex: none; min-width: 0; }
.hc { position: relative; height: 26px; min-width: 26px; padding: 0 5px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; gap: 4px; font: inherit; font-size: 12px; cursor: pointer; }
button.hc:hover { background: var(--hover); color: var(--ink); }
.hc:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.hc[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.hc-more { border: 1px solid var(--line-2); margin-left: 2px; }
.hc-more svg path { stroke-width: 3.2; }
.hc-asg > span { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-n { position: absolute; top: -2px; right: -3px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font: 700 9px/14px var(--f-body, inherit); font-style: normal; }
.hc-pop { position: absolute; top: calc(100% + 4px); z-index: 20; width: 300px; max-width: calc(100% - 16px); max-height: min(420px, 60vh); overflow-y: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 10px 12px; display: grid; gap: 8px; align-content: start; font-size: 13px; }
.hc-pop[hidden] { display: none; }
.hc-pop.r { right: 8px; }
.hc-pop p { margin: 0; }
.hc-q { width: 100%; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; background: var(--input-bg, var(--panel)); color: var(--ink); }
.hc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hc-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.hc-list time { color: var(--muted); flex: none; }
.hc-list.pick li { padding: 0; }
.hc-cur { padding: 6px 8px; display: flex; gap: 8px; align-items: center; font-size: 12.5px; background: var(--accent-soft); border-radius: 8px; }
.hc-list.pick button { width: 100%; text-align: left; border: 0; background: transparent; color: var(--ink); border-radius: 8px; padding: 6px 8px; display: flex; gap: 8px; align-items: center; font: inherit; font-size: 12.5px; cursor: pointer; }
.hc-list.pick button:hover, .hc-list.pick button:focus-visible { background: var(--hover); outline: none; }
.hc-list .ib-avw { width: 32px; height: 32px; }
.hc-sib { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.hc-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 12.5px; }
.hc-kv dt { color: var(--muted); } .hc-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hc-field { display: grid; gap: 4px; font-size: 12px; color: var(--ink-2); }
.hc-field select { min-height: 32px; font-size: 13px; }
.hc-pop .ib-resolve { justify-self: start; }
/* Tin trong nhóm: ảnh + tên người gửi ở dòng đầu mỗi lượt, các dòng sau thụt thẳng hàng */
.ib-gline { display: flex; gap: 8px; align-items: flex-end; align-self: flex-start; max-width: min(76%, 600px); min-width: 0; }
.ib-gline.first { margin-top: 6px; }
.ib-gav { flex: none; width: 28px; height: 28px; font-size: 12px; align-self: flex-start; }
.ib-gline.first .ib-gav { margin-top: 17px; }
.ib-gcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ib-gcol .ib-msg { max-width: 100%; }
.ib-gname { font-size: 12px; font-weight: 600; color: var(--ink-2); padding-left: 2px; }
.ib-msgs { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.ib-older { align-self: center; }
.ib-daysep { align-self: center; font-size: 12px; color: var(--muted); }
.ib-msg { max-width: min(70%, 560px); padding: 5px 9px; /* lề gọn (Khải 09/11/2026) */ border-radius: 4px 14px 14px 14px; background: var(--panel); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; align-self: flex-start; position: relative; }
.ib-msg.out { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-color: transparent; border-radius: 14px 4px 14px 14px; }
.ib-msg.bot { align-self: flex-end; background: var(--info-soft); border-color: transparent; border-radius: 14px 4px 14px 14px; }
.ib-msg.sending { opacity: .7; }
/* Tin chỉ có ảnh / nhãn dán / video: không khung bong bóng (09/11/2026) */
.ib-msg.bare, html:not([data-theme="dark"]) .ib-msg.out.bare { padding: 0; background: none; border-color: transparent; color: var(--ink); }
.ib-msg.bare .ib-media { margin: 0; }
.ib-msg.bare .ib-media + .ib-media { margin-top: 4px; }
/* Khung chat kiểu Pancake (sáng): nền be xám, tin khách nền trắng, tin của cơ sở xanh lá nhạt chữ đậm. Chế độ tối giữ màu cũ. */
html:not([data-theme="dark"]) .ib-msgs { background: #e6e1da; }
html:not([data-theme="dark"]) .ib-msg { border-color: transparent; border-radius: 12px; box-shadow: 0 1px 1px rgba(17,18,20,.08); }
html:not([data-theme="dark"]) .ib-msg.out { background: #d3f4bd; color: var(--ink); }
html:not([data-theme="dark"]) .ib-msg.out .ib-meta { color: var(--muted); }
html:not([data-theme="dark"]) .ib-msg.bot { background: #cfe4fb; }
html:not([data-theme="dark"]) .ib-daysep { background: rgba(255,255,255,.6); padding: 2px 10px; border-radius: 999px; }
.ib-who { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
.ib-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.ib-msg.out .ib-meta { color: color-mix(in srgb, var(--on-accent) 80%, transparent); }
.ib-sysline { display: inline-block; margin: 2px 0; font-size: 12px; font-style: italic; color: var(--muted); }
.ib-att { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; padding: 14px 16px; min-width: 120px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 13px; }
/* Ảnh / video / tệp trong tin (CDN của nền tảng qua Pancake; ảnh / tệp nhân viên gửi từ KeyStay) */
.ib-media { display: block; margin: 4px 0; max-width: min(280px, 100%); border-radius: 10px; overflow: hidden; }
.ib-media img, .ib-media video { display: block; max-width: 100%; max-height: 320px; width: auto; height: auto; object-fit: contain; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ib-media audio { display: block; max-width: 100%; }
.ib-vid { display: grid; gap: 4px; }
.ib-ksfile { border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13px; color: inherit; background: color-mix(in srgb, var(--ink) 8%, transparent); min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.ib-ksfile:not(:has(img)) { padding: 10px 14px; }
.ib-file { color: inherit; text-decoration: none; max-width: 100%; }
.ib-file > span { overflow-wrap: anywhere; }
.ib-file:hover { text-decoration: underline; }
.ib-react { position: absolute; bottom: -10px; right: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0 5px; font-size: 12px; }
.ib-fail { margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: var(--bad-soft); color: var(--bad); font-size: 12px; white-space: normal; }
.ib-fail .ib-link { color: var(--bad); text-decoration: underline; }
/* P4: ghi chú nội bộ (nền vàng, không gửi khách), dòng sự kiện, giao người, loại nội bộ, ảnh của mẫu, màn quản trị thẻ / mẫu */
.ib-note { align-self: stretch; background: var(--warn-soft); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ib-note .ib-meta { color: var(--muted); }
.ib-evt { align-self: center; font-size: 12px; color: var(--muted); text-align: center; }
.ib-evt.ok { color: var(--ok); font-weight: 600; }
.ib-seen { color: var(--ink-2); font-weight: 600; }
/* Điện thoại: 1 cột — danh sách, bấm hội thoại thì sang khung chat (nút quay lại) */
@media (max-width: 720px) {
  .ib-chat-head { gap: 6px; padding-top: 4px; padding-bottom: 4px; }
  .ib-head-more { display: grid; }
  .hc-row { display: none; margin-left: 0; padding: 0 2px 2px; }
  .ib-chat-head.ctl-open .hc-row { display: flex; }
  .ib-gline { max-width: 90%; }
  .ib-chat { display: none; }
  .ib-open .ib-chat { display: flex; }
  .ib-back { display: grid; }
  .ib-chat-head { padding-left: 4px; }
  .ib-msg { max-width: 85%; }
  /* Di động: giờ + thao tác hiện ngay dưới tin khi chạm (không đủ chỗ hai bên) */
  .ib-aside { top: 100%; margin-top: 2px; }
  .ib-msg.in .ib-aside { left: 0; } .ib-msg.out .ib-aside, .ib-msg.bot .ib-aside { right: 0; left: auto; }
  .ib-mmenu { top: auto; bottom: calc(100% + 4px); }
  .ib-msg.in .ib-mmenu { left: 0; } .ib-msg.out .ib-mmenu, .ib-msg.bot .ib-mmenu { right: 0; left: auto; }
}
/* Đợt 1: thao tác khi rê chuột lên tin (Trả lời / Chuyển tiếp / ⋯), trích dẫn trong tin, khung trả lời trên ô soạn, hộp chuyển tiếp */
.ib-aside { position: absolute; top: 2px; display: none; align-items: center; gap: 4px; white-space: nowrap; z-index: 2; padding: 0 6px; }
.ib-msg.in .ib-aside { left: 100%; flex-direction: row; }
.ib-msg.out .ib-aside, .ib-msg.bot .ib-aside { right: 100%; flex-direction: row-reverse; }
.ib-msg:hover .ib-aside, .ib-msg:focus-within .ib-aside, .ib-msg.ib-tap .ib-aside { display: flex; }
.ib-stamp { display: grid; gap: 0; font-size: 12px; line-height: 1.25; color: var(--muted); }
.ib-stamp b { font-weight: 600; color: var(--ink-2); }
.ib-msg.out .ib-stamp, .ib-msg.bot .ib-stamp { text-align: right; }
.ib-mtools { display: flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 10px; background: rgba(255,255,255,.55); }
.ib-mt { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.ib-mt:hover { color: var(--accent); background: rgba(17,18,20,.08); }
.ib-mt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.ib-mmenu { position: absolute; top: 36px; z-index: 3; min-width: 200px; padding: 6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-pop); white-space: nowrap; }
.ib-msg.in .ib-mmenu { left: calc(100% + 6px); }
.ib-msg.out .ib-mmenu, .ib-msg.bot .ib-mmenu { right: calc(100% + 6px); }
.ib-mmenu button { font: inherit; font-size: 14px; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.ib-mmenu button svg { flex: none; color: var(--ink-2); }
.ib-mmenu button:hover { background: var(--hover); }
.ib-quote { font: inherit; font-size: 12.5px; text-align: left; display: grid; gap: 1px; width: 100%; margin: 0 0 4px; padding: 4px 7px; border: 0; border-left: 3px solid var(--accent); border-radius: 4px; background: rgba(17,18,20,.06); color: inherit; cursor: pointer; }
.ib-quote > b { font-size: 12px; color: var(--accent); }
.ib-mention { color: var(--accent); font-weight: 600; }
.ib-quote > span { color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ib-msg.ib-flash { animation: ib-flash 1.4s ease-out; }
@keyframes ib-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--ring); } 100% { box-shadow: none; } }
.ib-fw-list { max-height: 260px; overflow-y: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; }
.ib-fw-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ib-fw-row:last-child { border-bottom: 0; }
.ib-fw-row:hover { background: var(--hover); }
.ib-fw-row input { flex: none; width: 16px; height: 16px; }
.ib-fw-main { display: grid; min-width: 0; }
@media (hover: none) { .ib-mtools { display: none !important; } }
.ib-resolve { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ib-resolve.on { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
/* Đợt 3: thanh tin ghim / nhắc hẹn, chọn nhiều hội thoại, chữ ký */
.ib-pinbar { display: flex; align-items: center; gap: 10px; padding: 5px 14px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px; }
.ib-pinbar.hidden { display: none; }
.ib-pin-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; font: inherit; color: var(--ink-2); text-align: left; cursor: pointer; padding: 2px 0; }
.ib-pin-main b { flex: none; color: var(--accent); font-size: 12px; }
.ib-pin-main span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-rm-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* Màn điện thoại: đầu chat một hàng — hàng icon (phân công, loại…) gom sau nút ⋯ */
.ib-ch-main .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-head-more { display: none; }

/* === Chat Đa Kênh: ô soạn, mẫu nhanh, lưới thẻ (public/app-inbox-compose.js) === */
.ib-compose { position: relative; background: var(--panel); border-top: 1px solid var(--line); --ib-th: 66px; }
/* 8 cột như Pancake khi khung chat đủ rộng; hẹp thì tự giảm cột để tên thẻ còn đọc được */
.ib-tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(72px, calc((100% - 14px) / 8)), 1fr)); gap: 2px; padding: 2px; }
.ib-tag { font: inherit; font-size: 10px; line-height: 1.15; min-height: 19px; padding: 1px 3px; border: 0; border-radius: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; }
.ib-tag.on { font-weight: 700; box-shadow: inset 0 0 0 1px #111214; }
.ib-tag:disabled { opacity: .6; }
.ib-tdot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ib-blocked { margin: 10px 16px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: 13px; }
.ib-input { display: flex; gap: 10px; padding: 4px 16px 4px; align-items: flex-start; }
.ib-mark { flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--brand-ink); display: grid; place-items: center; }
.ib-ta { flex: 1; display: flex; }
.ib-ta textarea { font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.45; flex: 1; min-height: 0; height: var(--ib-th); border: 0; box-shadow: none; resize: none; padding: 8px 0; background: transparent; }
.ib-ta textarea::placeholder { font-size: 13px; font-weight: 400; color: var(--muted); }
.ib-ta textarea:focus { box-shadow: none; }
.ib-tools { display: flex; align-items: center; gap: 2px; padding: 2px 10px 8px; color: var(--muted); }
.ib-qr { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); max-height: min(470px, 60vh); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-pop); overflow: hidden; z-index: 5; }
.ib-qr-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.ib-qr-head > span { flex: 1; }
.ib-qr-list { overflow-y: auto; }
.ib-qr-item { font: inherit; color: inherit; text-align: left; width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.ib-qr-item.on { background: var(--info-soft); }
.ib-qr-top { display: flex; align-items: center; gap: 8px; }
.ib-qr-key { padding: 2px 10px; border-radius: 999px; background: var(--hover); font-size: 13px; }
.ib-qr-topic { padding: 2px 12px; border-radius: 6px; background: var(--info); color: #fff; font-size: 12px; font-weight: 600; }
.ib-qr-body { font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ib-help { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.ib-input.note { background: var(--warn-soft); border-radius: var(--r-sm); margin: 8px 12px 0; padding-top: 6px; }
.ib-qrfiles { margin: 8px 16px 0; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ib-qr-img { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
/* Điện thoại: 1 cột — danh sách, bấm hội thoại thì sang khung chat (nút quay lại) */
@media (max-width: 720px) {
  .ib-tags { max-height: 52px; overflow-y: auto; } /* 2,5 hàng (ô 19px): hàng thứ 3 ló ra báo còn thẻ để cuộn */
  .ib-tools .ib-ibtn { width: 38px; }
  .ib-input { padding: 8px 12px 0; gap: 8px; } .ib-mark, .ib-pageav { display: none; }
  .ib-hgrip { display: none; }
  .ib-ta textarea { height: 44px; }
  .ib-tools .ib-send { margin-left: 8px; }
}
.ib-replybar { display: flex; align-items: center; gap: 10px; margin: 6px 12px 0; padding: 6px 6px 6px 12px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--hover); color: var(--ink-2); }
.ib-replybar.hidden { display: none; }
.ib-rb-main { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13px; }
.ib-rb-main b { color: var(--accent); font-size: 12px; }
.ib-rb-main span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-tag:not(.on) { opacity: .45; }
.ib-tag:not(.on):hover, .ib-tag:not(.on):focus-visible { opacity: .9; }
.ib-mark-ch { color: #fff; font-weight: 700; font-size: 14px; letter-spacing: -.2px; background: var(--muted); }
.ib-mark-ch[data-p="personal_zalo"], .ib-mark-ch[data-p="zalo"], .ib-mark-ch[data-p="facebook"], .ib-mark-ch[data-p="telegram"] { background: #0a7cff; }
.ib-mark-ch[data-p="facebook"] { font-size: 22px; font-family: Georgia, serif; }
.ib-mark-ch[data-p="whatsapp"] { background: #25d366; }
.ib-mark-ch[data-p="instagram"] { background: linear-gradient(45deg, #f9a03f, #d6249f 55%, #5b51d8); }
.ib-mark-ch[data-p^="tiktok"] { background: #111214; font-size: 11px; }
.ib-tools .ib-send { flex: none; width: 42px; height: 42px; margin-left: 14px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--hover); color: var(--muted); cursor: pointer; }
.ib-tools .ib-send.ready { background: var(--accent); color: var(--on-accent); box-shadow: 0 2px 6px rgba(18,128,122,.35); }
.ib-tools .ib-send:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

/* C3: ảnh page đang trả lời (28px + huy hiệu kênh), thanh kéo đổi cao, bảng nổi Phím tắt / Mẹo + Danh thiếp */
.ib-pageav { position: relative; flex: none; width: 22px; height: 22px; margin-top: 8px; }
.ib-pageav .ib-av { width: 22px; height: 22px; font-size: 10px; }
.ib-pageav .ib-plat { width: 11px; height: 11px; font-size: 7px; line-height: 7px; right: -3px; bottom: -3px; border-width: 1.5px; }
/* Ô soạn: chữ kênh (khi page chưa có ảnh) cùng cỡ với ảnh page — nhỏ gọn (Khải 10/11/2026) */
.ib-input > .ib-mark { width: 22px; height: 22px; border-radius: 50%; font-size: 10px; margin-top: 8px; }
.ib-hgrip { position: relative; height: 12px; cursor: row-resize; touch-action: none; outline: none; border-top: 1px solid var(--line); }
.ib-hgrip::after { content: ""; position: absolute; left: 50%; top: 4px; width: 40px; height: 4px; margin-left: -20px; border-radius: 3px; background: var(--line-2); transition: background .12s; }
.ib-hgrip:hover::after, .ib-hgrip:focus-visible::after, .ib-hgrip.drag::after { background: var(--accent); }
body.ib-vdrag { cursor: row-resize; user-select: none; }
.ib-pop { position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 6; width: min(440px, calc(100% - 16px)); max-height: min(460px, 60vh); overflow: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 10px 14px 12px; font-size: 12.5px; }
.ib-pop[hidden] { display: none; }
.ib-pop-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ib-pop-x { width: 28px; height: 28px; }
.ib-pop-sec { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 8px 0 4px; }
.ib-keys { display: grid; grid-template-columns: max-content 1fr; gap: 5px 12px; margin: 0; align-items: baseline; }
.ib-keys dd { margin: 0; color: var(--ink-2); }
.ib-pop kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--panel-2, var(--hover)); font: 600 11px/18px inherit; text-align: center; margin: 0 1px; }
.ib-tips { margin: 0; padding-left: 16px; display: grid; gap: 5px; color: var(--ink-2); }
.ib-pop .ib-var { font-size: 11.5px; }
.ib-cardpop { left: 48px; width: min(360px, calc(100% - 56px)); }
.ib-card-q { width: 100%; margin: 6px 0; }
.ib-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ib-card { font: inherit; color: inherit; width: 100%; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 6px 8px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.ib-card:hover, .ib-card:focus-visible { background: var(--hover); outline: none; }
.ib-card .ib-card-av { flex: none; width: 32px; height: 32px; font-size: 13px; }
.ib-card-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ib-card-prop { display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.ib-card-txt { display: grid; min-width: 0; line-height: 1.3; }
.ib-card-txt b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-card-txt span { font-size: 12px; color: var(--muted); }
.ib-card-note { margin: 6px 0 0; }
@media (max-width: 720px) { .ib-cardpop { left: 8px; width: calc(100% - 16px); } }

/* === Chat Đa Kênh: cột khách, tab Đặt phòng, giấy tờ (public/app-inbox-booking.js, app-inbox-guest.js, app-inbox-transfer.js) === */
.ib-side { flex: 0 1 320px; min-width: 260px; background: var(--panel); border-left: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.ib-side:empty { display: none; }
.ib-stabs { display: flex; gap: 4px; background: var(--hover); padding: 4px; border-radius: 10px; align-items: center; }
.ib-stabs button:not(.ib-ibtn) { flex: 1; font: inherit; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); min-height: 34px; }
.ib-stabs button.on { background: var(--panel); color: var(--ink); font-weight: 600; }
.ib-stabs button:disabled { opacity: .5; }
.ib-stabs .ib-ibtn { width: 34px; height: 34px; }
.ib-g-head { display: flex; gap: 12px; align-items: center; }
.ib-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.ib-stats > div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; display: grid; }
.ib-stats b { font-size: 17px; } .ib-stats span { font-size: 12px; color: var(--muted); }
.ib-warnline { color: var(--warn); }
.ib-sec { display: flex; flex-direction: column; gap: 4px; }
.ib-sec > b { font-size: 13px; }
.ib-gtags { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
.ib-gtags span:not(.muted) { padding: 2px 8px; border-radius: 999px; background: var(--hover); }
.ib-side-acts { margin-top: auto; display: grid; gap: 8px; }
.ib-pc-note { white-space: pre-wrap; overflow-wrap: anywhere; border-left: 3px solid var(--line-2); padding-left: 8px; margin: 2px 0; }
/* C4: tab Đặt phòng 3 bước (Tư vấn → Giữ & cọc → Chốt, mockup docs/mockup-chat-dat-phong.html); nút chính dính đáy cột */
.ib-bk { display: flex; flex-direction: column; gap: 10px; flex: 1; font-size: 12.5px; } /* chữ nhỏ cho gọn (Khải 09/11/2026) */
.ib-bk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.ib-bk-st { display: grid; gap: 4px; font: inherit; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 0; text-align: left; min-height: 32px; }
.ib-bk-st:disabled { cursor: default; }
.ib-bk-st i { height: 4px; border-radius: 9px; background: var(--line-2); }
.ib-bk-st b { font-weight: 600; }
.ib-bk-st span { font-size: 11px; }
.ib-bk-st.done i, .ib-bk-st.cur i { background: var(--accent); }
.ib-bk-st.done { color: var(--ink-2); } .ib-bk-st.cur { color: var(--ink); }
.ib-bk-st.wait { color: var(--warn); }
.ib-bk-st.wait i { background: repeating-linear-gradient(90deg, var(--warn) 0 8px, var(--warn-soft) 8px 12px); }
.ib-bk-body { display: grid; gap: 14px; align-content: start; }
.ib-bk-foot { position: sticky; bottom: -16px; margin: auto -16px -16px; padding: 10px 16px 14px; border-top: 1px solid var(--line); background: var(--panel); display: grid; gap: 6px; z-index: 1; }
.ib-bk-main { width: 100%; min-height: 44px; font-size: 14.5px; }
.ib-bk-menu { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.ib-bk-note { text-align: center; }
.ib-bk-f { display: grid; gap: 3px; font-size: 12px; color: var(--ink-2); }
.ib-bk-f select, .ib-bk-f input { width: 100%; min-width: 0; font-size: 13px; min-height: 32px; }
.ib-bk-date { display: flex; gap: 6px; align-items: center; }
.ib-bk-date .ib-bk-chips { flex: none; flex-wrap: nowrap; }
.ib-bk-date input { flex: 1; width: auto; }
.ib-bk-need { border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: grid; gap: 8px; background: var(--panel-2); }
.ib-bk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.ib-bk-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ib-bk-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ib-bk-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); background: var(--hover); border-radius: 9px; padding: 3px; gap: 3px; }
.ib-bk-seg button { font: inherit; font-size: 12px; border: 0; background: none; border-radius: 7px; min-height: 30px; color: var(--ink-2); line-height: 1.2; padding: 3px 4px; }
.ib-bk-seg button small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 400; }
.ib-bk-seg button.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.ib-bk-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ib-bk-chips input { width: 88px; min-height: 28px; font-size: 12.5px; }
.ib-bk-chip { font: inherit; font-size: 12px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); border-radius: 99px; padding: 3px 10px; min-height: 28px; }
.ib-bk-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.ib-bk-stepper { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line-2); border-radius: 9px; background: var(--input-bg); padding: 2px; }
.ib-bk-stepper button { width: 30px; height: 30px; border: 0; background: none; border-radius: 7px; font-size: 16px; color: var(--ink); }
.ib-bk-stepper button:hover:not(:disabled) { background: var(--hover); }
.ib-bk-stepper button:disabled { opacity: .35; }
.ib-bk-stepper span { font-weight: 600; color: var(--ink); }
.ib-bk-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; background: var(--info-soft); color: var(--ink); border-radius: 10px; padding: 8px 10px; }
.ib-bk-hint svg { color: var(--info); margin-top: 2px; flex: none; }
.ib-bk-hint.warn { background: var(--warn-soft); } .ib-bk-hint.warn svg { color: var(--warn); }
.ib-bk-sec { display: grid; gap: 8px; }
.ib-bk-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ib-bk-sec-h b { font-size: 13px; }
.ib-bk-rooms { display: grid; gap: 6px; }
.ib-bk-rooms[aria-busy="true"] { opacity: .6; }
.ib-bk-room { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(104px, 46%); gap: 8px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--panel); }
.ib-bk-room.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ib-bk-room.off { opacity: .6; }
.ib-bk-room input[type=checkbox] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.ib-bk-rname { display: grid; gap: 3px; min-width: 0; align-content: start; }
.ib-bk-rname b { font-weight: 600; }
.ib-bk-price { display: grid; justify-items: end; gap: 3px; text-align: right; }
.ib-bk-price > b { font-size: 14.5px; white-space: nowrap; }
.ib-bk-price .why-link { font-size: 11.5px; }
.ib-bk-fx { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.ib-bk-left { font-size: 11.5px; font-weight: 600; padding: 0 7px; border-radius: 99px; justify-self: start; }
.ib-bk-left.lo { background: var(--warn-soft); color: var(--warn); } .ib-bk-left.ok { background: var(--ok-soft); color: var(--ok); } .ib-bk-left.no { background: var(--bad-soft); color: var(--bad); }
.ib-bk-tag { font-size: 11px; font-weight: 600; padding: 0 6px; border-radius: 99px; background: var(--accent-2-soft); color: var(--accent-2); }
.ib-bk-tag.ok { background: var(--ok-soft); color: var(--ok); }
.ib-bk-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; background: var(--panel); }
.ib-bk-card.accent { border-color: var(--accent); }
.ib-bk-card.rescue, .ib-bk-card.warn { border-color: var(--warn); background: var(--warn-soft); }
.ib-bk-card.ok { border-color: var(--ok); background: var(--ok-soft); }
/* Dòng nhận tiền nổi bật (Khải 10/11/2026): số tiền đã vào folio to, đậm, nền xanh viền dày */
.ib-bk-recv { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--ok); border-radius: 12px; background: var(--ok-soft); }
.ib-bk-recv-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: 18px; font-weight: 800; }
.ib-bk-recv-t { display: grid; gap: 1px; min-width: 0; }
.ib-bk-recv-k { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--ok); }
.ib-bk-recv-v { font-size: 24px; line-height: 1.15; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ib-bk-recv-s { font-size: 12.5px; color: var(--ink-2); }
.ib-bk-acts .ib-bk-wide { grid-column: 1 / -1; padding-top: 9px; padding-bottom: 9px; font-weight: 700; }
.ib-bk-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }
.ib-bk-opt b { font-size: 13px; }
.ib-bk-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; margin: 0; }
.ib-bk-kv dt { color: var(--muted); } .ib-bk-kv dd { margin: 0; text-align: right; font-weight: 500; }
.ib-bk-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line-2); padding-top: 8px; }
.ib-bk-total b { font-size: 17px; }
.ib-bk-preview { border: 1px dashed var(--line-2); border-radius: 12px; padding: 10px; background: var(--bg); display: grid; gap: 8px; }
.ib-bk-pmsg { justify-self: end; max-width: 92%; font-size: 12.5px; background: var(--accent); color: var(--on-accent); border-radius: 12px 12px 4px 12px; padding: 8px 10px; overflow-wrap: anywhere; }
.ib-bk-pqr { justify-self: end; width: min(220px, 80%); }
.ib-bk-pqr img, .ib-bk-pqr canvas { width: 100%; height: auto; border-radius: 10px; display: block; }
.ib-bk-count { display: flex; align-items: center; gap: 14px; }
.ib-bk-ring { width: 68px; height: 68px; flex: none; }
.ib-bk-ring text { font: 600 14px system-ui, sans-serif; fill: var(--ink); }
.ib-bk-countt { display: grid; gap: 2px; min-width: 0; }
.ib-bk-tl { list-style: none; margin: 0; padding: 0; display: grid; }
.ib-bk-tl li { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; font-size: 12.5px; padding: 4px 0; }
.ib-bk-tl li::before { content: ""; width: 10px; height: 10px; border-radius: 99px; background: var(--accent); margin-top: 5px; justify-self: center; }
.ib-bk-tl li.todo::before { background: var(--panel); border: 2px solid var(--warn); }
.ib-bk-tl li.todo { color: var(--warn); font-weight: 600; }
.ib-bk-tl li.plan::before { background: var(--panel); border: 2px dashed var(--line-2); }
.ib-bk-tl li.plan { color: var(--muted); }
.ib-bk-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ib-bk-acts .ib-bk-danger { color: var(--bad); }
.ib-bk-check { display: grid; gap: 6px; }
.ib-bk-chk { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.ib-bk-chk .ib-bk-dot { width: 18px; height: 18px; border-radius: 99px; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: 11px; }
.ib-bk-chk.done .ib-bk-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.ib-bk-chk.done .t { color: var(--muted); }
.ib-bk-chk.fail { border-color: var(--bad); } .ib-bk-chk.fail .sub { color: var(--bad); }
.ib-bk-wf > summary { cursor: pointer; list-style: none; } .ib-bk-wf > summary::-webkit-details-marker { display: none; } .ib-bk-wf > summary::before { content: '▸'; margin-right: 6px; color: var(--muted); } .ib-bk-wf[open] > summary::before { content: '▾'; }
.ib-bk-chk .sub { display: block; font-size: 11.5px; color: var(--muted); }
.ib-bk-others summary { cursor: pointer; font-size: 13px; }
.ib-bk-hold { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: grid; gap: 4px; margin-top: 6px; }
.ib-bk-hold.off { opacity: .7; }
.ib-idoc-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-top: 2px; }
.ib-idoc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ib-idoc > img { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 8px; background: var(--hover); }
.ib-idoc-f { display: grid; gap: 8px; }
@media (max-width: 640px) { .ib-idoc { grid-template-columns: 1fr; } }
.ib-bk-hold-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
/* P5 ghép khách: cảnh báo nghi trùng, ô chọn hồ sơ */
.ib-dup { border: 1px solid var(--warn); border-radius: 10px; padding: 8px 10px; }
.ib-dup > b { color: var(--warn); }
.ib-dup-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; padding-top: 4px; }
.ib-dup-pick { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; }
.ib-cust-list { max-height: 260px; overflow-y: auto; margin-top: 6px; }
/* Màn vừa: cột khách thành ngăn trượt, mở bằng nút trên đầu khung chat */
@media (max-width: 1180px) {
  .ib-guest-btn, .ib-side-x { display: grid; }
  .ib-side { position: fixed; top: var(--ib-top, 61px); right: 0; bottom: 0; width: min(340px, 92vw); z-index: 30; box-shadow: var(--shadow-pop); transform: translateX(105%); transition: transform .18s; }
  .ib-side-open .ib-side { transform: none; }
}
/* C5: 1b Chuyển cơ sở (đồng hồ hạn nhận), hộp Khách không đặt, mục lọc mới ở thanh trái (viền hồng như mockup) */
.ib-bk-sla { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.ib-bk-sla .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--warn); animation: ib-pulse 1.4s ease-in-out infinite; }
@keyframes ib-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ib-bk-sla .dot { animation: none; } }
#ibBk textarea { width: 100%; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--input-bg, var(--panel)); color: inherit; resize: vertical; }
.ib-lost { display: grid; gap: 6px; border: 0; padding: 0; margin: 0 0 10px; }
.ib-rbtn.new { outline: 1.5px dashed var(--pink); outline-offset: -3px; }
.ib-rbtn.new.on { background: var(--pink-soft); color: var(--pink); }

/* Điện thoại: 1 cột — danh sách, bấm hội thoại thì sang khung chat (nút quay lại) */
@media (max-width: 720px) {
  .ib-side { top: 0; z-index: 60; } /* phủ cả thanh trên, đóng bằng nút × */
}

/* === Chat Đa Kênh: Thiết lập, Báo cáo (public/app-inbox-setup.js) === */
.ib-ops-fu { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } /* C5: ngưỡng nhắc khách im */
.ib-card-row { display: inline-flex; align-items: center; gap: 8px; } /* C3: Thiết lập › Danh thiếp */
.ib-setuppane { position: absolute; inset: 0; z-index: 5; overflow: auto; background: var(--bg); padding: 16px 20px; }
#ibSetup.on { background: var(--accent-soft); color: var(--accent); }
.ir-hours { display: grid; gap: 4px; }
.ir-hour { display: grid; grid-template-columns: 36px minmax(60px, 1fr) minmax(0, 1.4fr); gap: 8px; align-items: center; }
.ir-bar { height: 10px; background: var(--hover); border-radius: 999px; overflow: hidden; }
.ir-bar > span { display: block; height: 100%; background: var(--accent); }
.ib-setup-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.ib-setup-bar .grow { flex: 1; }
td .ib-qr-key { white-space: nowrap; }
.ib-qr-cell { max-width: 420px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.ib-qr-thumb { position: relative; display: inline-block; margin: 6px 6px 0 0; }
.ib-qr-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.ib-qr-thumb .dlg-x { position: absolute; top: -6px; right: -6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 50%; width: 22px; height: 22px; line-height: 18px; }
.ib-props { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ib-import { max-height: 320px; overflow: auto; }
.ib-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .ib-grid2 { grid-template-columns: 1fr; } }
/* Đợt 2: Thiết lập › Vận hành + nút đánh dấu đã xử lý */
.ib-ops { display: grid; gap: 16px; max-width: 640px; }
.ib-ops fieldset { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ib-ops legend { font-weight: 600; padding: 0 6px; }
.ib-ops .inline { display: flex; align-items: flex-start; gap: 8px; }
.ib-ops-days { display: grid; gap: 6px; }
.ib-ops-day { display: grid; grid-template-columns: 120px auto auto auto auto; align-items: center; gap: 8px; }
.ib-ops-staff { display: grid; gap: 6px; padding-left: 24px; }
.ib-ops .hidden { display: none; }

/* Khách lưu trú (khai báo): danh sách gọn + hộp thêm / sửa khách; chọn cách nhập giấy tờ (camera / tải ảnh / máy quét USB) */
.kb-card { padding: 0; overflow: hidden; } .kb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; } .kb-head h2 { margin: 0; font-size: 16px; } .kb-head .btn { margin-left: auto; }
.kb-list { border-top: 1px solid var(--line); } .kb-row { display: grid; grid-template-columns: minmax(130px, 1.3fr) minmax(130px, 1.2fr) 48px minmax(110px, .9fr) auto; gap: 8px 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); } .kb-row:last-child { border-bottom: 0; }
.kb-who { display: grid; } .kb-acts { display: flex; gap: 4px; }
@media (max-width: 720px) { .kb-row { grid-template-columns: 1fr auto; } .kb-doc, .kb-room, .kb-st { grid-column: 1 / -1; } }
.kb-id { display: grid; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.kb-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.kb-opt { font: inherit; color: var(--ink); display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border: 2px dashed var(--line-2); border-radius: var(--radius); background: var(--panel-2); cursor: pointer; }
.kb-opt:hover, .kb-opt:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; } .kb-opt > span { grid-row: 1 / 3; font-size: 26px; line-height: 1; } .kb-opt small { color: var(--muted); }
.kb-usb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .kb-usb input { flex: 1 1 200px; max-width: 280px; }
.kb-photo { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); } .kb-photo img { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; background: #000; }
.kb-sec { display: grid; gap: 8px; margin-top: 10px; } .kb-sec h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-2); }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; } .kb-grid label { display: grid; gap: 2px; font-size: 12px; color: var(--ink-2); } .kb-grid label.wide { grid-column: span 2; } .kb-grid input, .kb-grid select { width: 100%; box-sizing: border-box; }
@media (max-width: 520px) { .kb-grid label.wide { grid-column: auto; } .kb-photo { grid-template-columns: 72px 1fr; } .kb-photo .btn { grid-column: 1 / -1; } }
.kb-more { margin-top: 10px; }

/* ---- Phòng & giá: 4 bước cấu hình giá (public/app-pricing-rates.js, mockup docs/mockups/pricing-config.html) ---- */
.grow { flex: 1; min-width: 0; }
.pr-badge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 99px; background: var(--warn-soft); color: var(--warn); font-size: 11px; font-weight: 700; text-align: center; }
.pr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; flex: none; vertical-align: baseline; }
.pr-tip { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--hover); color: var(--muted); font-size: 10px; font-weight: 700; cursor: help; }
.pr-help kbd { border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font: 600 11px inherit; background: var(--panel); }
.pr-help { margin-bottom: 10px; line-height: 1.6; }
.pr-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.pr-card .pr-rt { align-items: center; margin: 10px 0; }
.pr-save { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius); padding: 8px 14px; margin-bottom: 12px; box-shadow: var(--shadow-pop); }
.pr-warn { display: flex; gap: 10px; align-items: center; background: var(--warn-soft); color: var(--warn); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
.pr-warn > div { flex: 1; }
table.pr-matrix th { vertical-align: top; } table.pr-matrix th small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
table.pr-matrix td { min-width: 112px; padding: 5px; } table.pr-matrix td.rh { min-width: 190px; width: 190px; }
table.pr-matrix td.rh b { display: block; } table.pr-matrix td.rh span { font-size: 11.5px; color: var(--muted); }
.sl { cursor: pointer; } .sl:hover { background: var(--accent-soft); }
.pr-cell { border: 1.5px solid transparent; border-radius: 9px; padding: 6px 9px; cursor: pointer; min-height: 52px; user-select: none; background: var(--panel-2); }
.pr-cell:hover { border-color: var(--line-2); }
.pr-cell .v { font-weight: 600; font-variant-numeric: tabular-nums; } .pr-cell .e { font-size: 11.5px; color: var(--muted); } .pr-cell .e:hover { color: var(--accent); text-decoration: underline; }
.pr-cell.empty { background: var(--warn-soft); border: 1.5px dashed var(--warn); } .pr-cell.empty .v { color: var(--warn); font-weight: 500; font-size: 12.5px; }
.pr-cell.sel { border-color: var(--accent); background: var(--accent-soft); } .pr-cell.chg { box-shadow: inset 3px 0 0 var(--accent); }
.pr-toolbar { position: sticky; bottom: 14px; margin-top: 14px; z-index: 4; background: #111214; color: #fff; border-radius: 14px; padding: 10px 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; box-shadow: 0 12px 32px rgba(16,17,20,.25); }
.pr-toolbar .lbl { font-size: 12.5px; color: #aab; }
.pr-toolbar input, .pr-toolbar select { background: #26282c; border-color: #3a3d43; color: #fff; width: 110px; min-height: 32px; }
.pr-toolbar select { width: auto; } .pr-toolbar .pr-from input { width: 64px; }
.pr-toolbar .btn { background: #26282c; border-color: #3a3d43; color: #fff; box-shadow: none; } .pr-toolbar .btn:hover { background: #34373d; }
.pr-toolbar .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pr-toolbar .seg.dark { background: #26282c; } .pr-toolbar .seg.dark button { color: #cfd2d8; } .pr-toolbar .seg.dark button.on { background: var(--accent); color: #fff; box-shadow: none; }
.pr-tlw { overflow: auto; border: 1px solid var(--line); border-radius: 10px; max-height: 420px; }
.pr-tlt { border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.pr-tlt th, .pr-tlt td { border-right: 1px solid var(--panel); border-bottom: 1px solid var(--panel); min-width: 46px; text-align: center; padding: 5px 0; }
.pr-tlt .fc { position: sticky; left: 0; z-index: 2; background: var(--panel); min-width: 150px; text-align: left; padding: 5px 10px; font-weight: 600; border-right: 1px solid var(--line); }
.pr-tlt .mh { text-align: left; padding: 5px 8px; background: var(--panel-2); } .pr-tlt .dh { background: var(--panel-2); font-weight: 600; }
.pr-tlt .dh small { display: block; font-weight: 400; font-size: 10px; color: var(--muted); } .pr-tlt .dh.we { color: var(--accent-2); }
.pr-tlt .tc { cursor: pointer; font-weight: 600; user-select: none; position: relative; }
.pr-tlt .tc.own::after { content: ""; position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.pr-tlt .tc.sel { outline: 2px solid var(--ink); outline-offset: -2px; }
.pr-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.pr-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.pr-week .wd { border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; text-align: center; background: var(--panel); }
.pr-week .wd b { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 6px; }
.pr-week select { width: 100%; font-size: 12.5px; padding: 5px 4px; font-weight: 600; border: 0; border-radius: 8px; text-align: center; text-align-last: center; cursor: pointer; }
.pr-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.pr-cals { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pr-cals .mon > b { display: block; font-size: 13px; margin-bottom: 6px; }
.pr-cals .mg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .pr-cals .mg i { font-style: normal; font-size: 10.5px; color: var(--muted); text-align: center; }
.pr-cals .dy { aspect-ratio: 1.15; border-radius: 7px; display: grid; place-items: center; font-size: 12px; cursor: pointer; font-weight: 500; user-select: none; position: relative; }
.pr-cals .dy.o::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); } .pr-cals .dy:hover { outline: 2px solid var(--ink-2); }
.pr-grp { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 2px solid var(--line); border-radius: 10px; margin-bottom: 6px; background: var(--panel); cursor: pointer; }
.pr-grp.on { border-color: var(--ink); background: var(--hover); } .pr-grp.off { opacity: .5; }
.pr-adv { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; } .pr-adv summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.pr-fb { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pr-stl { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.pr-si { display: flex; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; margin-bottom: 8px; align-items: center; }
.pr-si.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } .pr-si.off { opacity: .55; }
.pr-si .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: var(--hover); flex: none; }
.pr-si b { display: block; font-size: 13.5px; line-height: 1.3; } .pr-si span { font-size: 11.5px; color: var(--muted); }
.pr-tpl { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.pr-tpl button { font: inherit; border: 1px dashed var(--line-2); background: var(--panel-2); border-radius: 12px; padding: 10px; text-align: left; cursor: pointer; }
.pr-tpl button:hover { border-color: var(--accent); background: var(--accent-soft); } .pr-tpl b { display: block; font-size: 13px; } .pr-tpl span { font-size: 11.5px; color: var(--muted); }
.pr-sent { font-size: 15px; line-height: 2.6; color: var(--ink-2); }
.pr-sent input { width: 78px; text-align: center; font-weight: 600; color: var(--accent); border-style: dashed; padding: 3px 6px; min-height: 0; }
.pr-sent input[type=time] { width: 110px; } .pr-conv { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.pr-tl { margin: 14px 0 4px; } .pr-tl .bar { position: relative; height: 34px; background: var(--hover); border-radius: 8px; overflow: hidden; margin-top: 4px; }
.pr-tl .bar i { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; font-size: 11px; font-style: normal; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; }
.pr-tl .ax { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.pr-fee { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.pr-feet { width: 100%; border-collapse: collapse; margin-top: 8px; } .pr-feet td { padding: 6px 4px; border-bottom: 1px dashed var(--line); font-size: 13px; } .pr-feet input { width: 80px; min-height: 0; padding: 3px 6px; }
.pr-note { margin-top: 12px; background: var(--info-soft); color: var(--info); border-radius: 10px; padding: 10px 12px; font-size: 13px; } .pr-note input { background: var(--panel); }
.pr-rtc { margin-bottom: 14px; } .pr-flr { font-size: 11.5px; color: var(--muted); font-weight: 600; margin: 8px 0 4px; }
.pr-occ { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 12px; }
.pr-occ > div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; } .pr-occ label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }
.pr-occ input { width: 120px; }
.pr-step { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 99px; background: var(--panel); }
.pr-step button { border: 0; background: none; width: 28px; height: 28px; font-size: 16px; cursor: pointer; color: var(--ink-2); } .pr-step span { min-width: 22px; text-align: center; font-weight: 600; }
.tag.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .tag.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
@media (max-width: 980px) { .pr-stl, .pr-split { grid-template-columns: 1fr; } .pr-week { grid-template-columns: repeat(4, 1fr); } }
.pr-mode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }
.pr-mode input, .pr-mode select { min-height: 32px; }
.pr-cell.auto { background: var(--panel); border: 1px dashed var(--line-2); } .pr-cell.auto .v { color: var(--ink-2); font-weight: 500; }
.pr-cell.pin { position: relative; } .pr-cell.pin::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }
.pr-tlt .tc.pov { font-weight: 800; text-decoration: underline; } .pr-tlt .tc.pov::before { content: ""; position: absolute; top: 3px; left: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); }
.pr-tlt .tc.pov-d { font-style: italic; text-decoration: underline dotted; }

/* Ô chọn @ thành viên nhóm (ô soạn, như Pancake) */
.ib-at-item { flex-direction: row; align-items: center; gap: 8px; padding: 4px 10px; font-size: 13px; }
.ib-at-item .ib-av.sm { width: 22px; height: 22px; font-size: 10px; }
.ib-at-item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Danh sách @ gọn (Khải 10/11/2026): hẹp, sát mép trái ô soạn, thấp hơn, thanh hướng dẫn một dòng nhỏ */
.ib-qr.at { right: auto; width: min(300px, calc(100% - 16px)); max-height: min(280px, 45vh); border-radius: 10px; }
.ib-qr.at .ib-qr-head { padding: 3px 4px 3px 10px; font-size: 11px; gap: 6px; }
.ib-qr.at .ib-qr-head > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-at-all { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--info-soft); color: var(--accent); flex: none; }

/* Xem cả ảnh trong tin (ibLightbox) + link trong tin */
.ib-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.86); display: grid; place-items: center; padding: 48px 16px 16px; }
.ib-lightbox img { max-width: min(96vw, 1400px); max-height: calc(100vh - 72px); object-fit: contain; border-radius: 6px; }
.ib-lb-bar { position: fixed; top: 8px; right: 12px; display: flex; gap: 12px; align-items: center; }
.ib-lb-bar a { color: #fff; font-size: 13px; }
.ib-lb-bar .ib-ibtn { color: #fff; }
button.ib-media.ib-img { border: 0; padding: 0; background: none; cursor: zoom-in; display: block; }
.ib-sticker { cursor: default; }
.ib-msglink { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }

/* Danh sách hội thoại: đã có SĐT của khách */
.ib-hasphone { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--ok); color: #fff; }
.ib-hasphone svg { width: 12px; height: 12px; }

/* Thông báo nổi khi có tin mới (góc trên bên phải, mọi màn) */
.ib-pops { position: fixed; top: 64px; right: 16px; z-index: 900; display: grid; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.ib-pop-card { display: flex; align-items: flex-start; gap: 4px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-bottom: 3px solid var(--accent); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 8px 6px 8px 10px; animation: ib-pop-in .18s ease-out; }
.ib-pop-open { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.ib-pop-txt { min-width: 0; display: grid; gap: 2px; }
.ib-pop-txt b { font-size: 14px; }
.ib-pop-txt span { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ib-pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ib-pop-card { animation: none; } }

/* Sổ quỹ (public/app-shift.js VIEWS.shift cashbook) */
.cb-filters { margin-bottom: 12px; }
.cb-dates { display: inline-flex; align-items: center; gap: 6px; }
.cb-bar { margin-bottom: 10px; }
.cb-bar .chips { margin-bottom: 0; }
.cb-bar input[type=search] { min-width: 240px; }
.cb-grow { flex: 1; }
.cb-accs { margin-bottom: 12px; padding: 10px 14px; }
.cb-accs summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.cb-accs[open] summary { margin-bottom: 8px; }
.cb-bk { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cb-bk-title { font-size: 18px; font-weight: 700; }
.cb-bk-act { display: flex; gap: 8px; flex-wrap: wrap; }
.cb-table td { vertical-align: top; }
.cb-table .nowrap { white-space: nowrap; }
.cb-table .linkish, .cb-accs .linkish { padding: 0; min-height: 0; }
.cb-table tfoot td { border-top: 2px solid var(--line-2); }
.cb-memo { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .cb-bar input[type=search] { min-width: 0; flex: 1 1 100%; } .cb-grow { display: none; } }
/* Đặt phòng: đoàn nhiều hình thức (vd. 1 phòng Qua đêm + 1 phòng Ngày đêm) — thanh nhóm đầu form, nút thêm nhóm cuối bước 2 */
.bk-grp { display: grid; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--bg, transparent); border-radius: var(--radius) var(--radius) 0 0; }
.bk-grp.hidden, .bk-grp-add.hidden { display: none; }
.bk-grp-hd { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.bk-grp-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.bk-grp-it { position: relative; display: flex; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.bk-grp-it.on { border: 1.5px dashed var(--accent); background: var(--accent-soft); }
.bk-grp-b { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: 13px; color: var(--ink); background: none; border: 0; padding: 8px 10px; border-radius: inherit; }
button.bk-grp-b { cursor: pointer; }
button.bk-grp-b:hover { background: var(--accent-soft); }
.bk-grp-b > span:nth-child(2) { flex: 1; min-width: 0; }
.bk-grp-b small { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.bk-grp-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--accent); color: var(--on-solid); }
.bk-grp-it:not(.on) .bk-grp-n { background: var(--line); color: var(--ink-2); }
.bk-grp-x { flex: none; width: 32px; border: 0; border-left: 1px solid var(--line); background: none; color: var(--muted); font-size: 18px; cursor: pointer; border-radius: 0 var(--radius) var(--radius) 0; }
.bk-grp-x:hover { color: var(--bad); background: var(--bad-soft, transparent); }
.bk-grp-add { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; width: 100%; margin-top: 10px; padding: 10px 14px; border: 1.5px dashed var(--accent); border-radius: var(--radius); background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.bk-grp-add:hover { background: var(--accent-soft); }
.bk-grp-add:disabled { opacity: .6; cursor: wait; }
.bk-grp-add span { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.bk-lines .bk-lg { display: block; margin-top: 4px; font-weight: 600; color: var(--ink); }
.bk-lines .bk-lg:first-child { margin-top: 0; }
.bk-lines .bk-lg span { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.bk-flash { animation: bkFlash 1.2s ease-out; border-radius: var(--radius); }
@keyframes bkFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--ring); } 100% { box-shadow: 0 0 0 3px transparent; } }
@media (prefers-reduced-motion: reduce) { .bk-flash { animation: none; } }