/* Zulo 0.4.9 — gọn nhẹ như bản 0.2.x (màu #0068ff, bo 6–10px, chữ 13–14px). Dưới 900px: toàn màn hình; từ 900px: khung trong trang. */
html.zulo-lock, html.zulo-lock body { overflow: hidden !important; height: 100%; }
.zh-app, .zh-app *, .zh-app *:before, .zh-app *:after { box-sizing: border-box; }
.zh-app { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.4; color: #222; background: #fff; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-wrap: anywhere; }
.zh-app button, .zh-app input, .zh-app textarea { font-family: inherit; font-size: inherit; color: inherit; }
.zh-app button { cursor: pointer; margin: 0; }
.zh-app img { max-width: 100%; }
.zh-app a { color: #0068ff; }
.zh-app [hidden] { display: none !important; }

.zh-ui { position: fixed; inset: 0; z-index: 99990; display: flex; flex-direction: column; width: 100%; height: 100%; height: 100dvh; overflow: hidden; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
.zh-top { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 8px; padding-top: calc(4px + env(safe-area-inset-top)); background: #fff; border-bottom: 1px solid #eef1f5; position: relative; z-index: 6; }
.zh-brand { flex: 0 0 auto; font-weight: 700; font-size: 18px; color: #0068ff; }
.zh-hacc { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; margin-right: auto; }
.zh-hacc-one { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
.zh-hacc .zh-avatar { width: 22px; height: 22px; font-size: 12px; }
.zh-hacc-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #44546a; }
.zh-hacc-cur { font-weight: 600; color: #1565c0; }
.zh-zchips { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.zh-zchip { display: inline-flex; align-items: center; gap: 3px; min-height: 28px; padding: 0 7px 0 3px; border: 1px solid #d0e3fb; border-radius: 14px; background: #f3f8ff; color: #1565c0; font-size: 13px; font-weight: 600; }
.zh-zchip.on { background: #0068ff; border-color: #0068ff; color: #fff; }
.zh-zchip-dead { border-color: #f0c4c4; } .zh-zchip-dead:not(.on) { background: #fdecea; color: #c62828; }
.zh-alias { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 8px; background: #e3f0ff; color: #0d47a1; font-size: 11px; font-weight: 700; line-height: 15px; vertical-align: middle; }
.zh-menuwrap { position: relative; flex: 0 0 auto; }
.zh-iconbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; padding: 0 6px; border: 1px solid #e3e8ef; border-radius: 6px; background: #fff; color: #44546a; font-size: 18px; line-height: 1; text-decoration: none; }
.zh-iconbtn.spin { animation: zh-spin .8s linear infinite; }
.zh-whoami { display: inline-flex; align-items: center; gap: 5px; max-width: 46%; min-height: 32px; padding: 0 10px; border: 1px solid #d0e3fb; border-radius: 16px; background: #f3f8ff; color: #1565c0; font-size: 14px; }
.zh-whoami-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-nav { flex: 0 0 auto; display: flex; background: #fff; border-top: 1px solid #e3e8ef; z-index: 4; }
.zh-navb { flex: 1 1 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 48px; padding: 4px 6px; border: none; background: #fff; color: #6b7a90; font-size: 13px; font-weight: 500; white-space: nowrap; }
.zh-navb .zh-ni { font-size: 19px; line-height: 1; filter: grayscale(1); opacity: .75; }
.zh-navb.on { color: #0068ff; font-weight: 700; box-shadow: inset 0 2px 0 #0068ff; }
.zh-navb.on .zh-ni { filter: none; opacity: 1; }
.zh-navb .zh-nav-badge { position: absolute; top: 4px; left: calc(50% + 10px); margin: 0; }
.zh-nav-badge, .zh-badge { display: inline-block; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e53935; color: #fff; font-size: 12px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: middle; }
.zh-badge-s { margin-left: 4px; }
.zh-main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: 0 0 10px; position: relative; }
.zh-main.zh-nosc { overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.zh-ptr { height: 0; overflow: hidden; text-align: center; font-size: 13px; color: #888; line-height: 32px; transition: height .15s; }
.zh-ptr.ready { color: #0068ff; font-weight: 600; }

/* menu tài khoản */
.zh-menu-bg { position: fixed; inset: 0; z-index: 7; background: transparent; }
.zh-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 8; width: 240px; max-width: calc(100vw - 16px); padding: 6px; background: #fff; border: 1px solid #d9e0ea; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.zh-menu-who { display: flex; flex-direction: column; padding: 6px 8px 8px; margin-bottom: 4px; border-bottom: 1px solid #eef1f5; }
.zh-menu-who b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-menu-who span { font-size: 13px; color: #888; }
.zh-menu-t { padding: 4px 6px 6px; font-weight: 600; color: #0068ff; }
.zh-mi { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 0 10px; border: none; border-radius: 6px; background: none; color: #222 !important; font-size: 15px; text-align: left; text-decoration: none !important; }
.zh-mi:hover { background: #f3f8ff; }
.zh-mi-out { color: #c62828 !important; }
.zh-ml { display: block; margin: 4px 6px; font-size: 13px; color: #555; }
.zh-mf { display: block; width: 100%; min-height: 38px; margin-top: 3px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 17px; background: #fff; }
.zh-menu .zh-mf { margin: 0 0 6px; }
.zh-menu .zh-ml .zh-mf { margin-top: 3px; }
.zh-menu .zh-err { margin: 4px 6px; }
.zh-menu .zh-mact { margin: 8px 6px 4px; }

/* nút */
.zh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 14px; border: none; border-radius: 6px; background: #0068ff; color: #fff !important; font-size: 15px; line-height: 1.3; text-decoration: none !important; text-align: center; }
.zh-btn:hover { background: #0056d6; }
.zh-btn:disabled { background: #9fbff0; cursor: not-allowed; }
.zh-btn-light { background: #e3f2fd; color: #1565c0 !important; }
.zh-btn-light:hover { background: #bbdefb; }
.zh-btn-claim { background: #fff; color: #0068ff !important; border: 1px solid #0068ff; border-radius: 12px; padding: 0 8px; min-height: 26px; font-size: 13px; font-weight: 700; line-height: 1.2; }
.zh-btn-claim:hover { background: #f3f8ff; }
.zh-btn-claim:disabled { background: #fff; border-color: #9fbff0; color: #9fbff0 !important; }
.zh-btn-danger { background: #fff; color: #c62828 !important; border: 1px solid #f0c4c4; }
.zh-btn-danger:hover { background: #fdecea; }
.zh-block { display: flex; width: 100%; margin-top: 8px; }
.zh-send { align-self: flex-end; }
.zh-linkbtn { min-height: 28px; padding: 0 2px; border: none; background: none; color: #0068ff; font-size: 13px; text-align: left; }
.zh-chip-done { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid #43a047; border-radius: 16px; background: #e8f5e9; color: #2e7d32; font-size: 14px; }
.zh-err { margin-top: 6px; padding: 6px 10px; border-radius: 6px; background: #fdecea; color: #b71c1c; font-size: 14px; }
.zh-notice { margin: 8px 10px 0; padding: 8px 12px; background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px; font-size: 14px; color: #6d4c00; }
.zh-box .zh-notice { margin: 8px 0; }
.zh-empty { padding: 20px 14px; text-align: center; color: #999; font-size: 14px; }
.zh-pick-hint { margin: auto; }

/* tab Lịch */
.zh-col { width: 100%; max-width: 800px; margin: 0 auto; }
.zh-chips { display: flex; gap: 6px; overflow-x: auto; padding: 6px 8px; position: sticky; top: 0; z-index: 3; background: #fff; border-bottom: 1px solid #f0f2f5; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.zh-chips::-webkit-scrollbar { display: none; }
.zh-chips { cursor: grab; user-select: none; -webkit-user-select: none; }
.zh-chips.zh-dragging { cursor: grabbing; scroll-behavior: auto; }
.zh-fchip { flex: 0 0 auto; position: relative; width: 38px; height: 38px; min-height: 0; padding: 0; border: 2px solid transparent; border-radius: 50%; background: #e3f2fd; color: #1565c0; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.zh-fchip .zh-avatar { width: 100%; height: 100%; border-radius: 50%; font-size: 16px; pointer-events: none; -webkit-user-drag: none; }
.zh-fchip.on { border-color: #0068ff; box-shadow: 0 0 0 2px #cfe2ff; }
.zh-fall.on { background: #0068ff; color: #fff; }
.zh-list { padding: 6px 8px 0; }
.zh-card { background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; padding: 8px 10px; margin: 0 0 6px; }
.zh-card.zh-new { background: #e3f2fd; border-color: #bbdefb; }
.zh-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.zh-card-who { flex: 1; min-width: 0; line-height: 1.25; }
.zh-sender { font-size: 15px; font-weight: 600; color: #0068ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-card-meta { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-group { color: #0068ff; font-weight: 600; font-size: 13px; }
.zh-group.zh-linked { color: #2e7d32 !important; text-decoration: none; }
.zh-time { flex: 0 0 auto; font-size: 12px; color: #999; text-align: right; white-space: nowrap; }
.zh-ago { display: none; }
.zh-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.zh-avatar-letter { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 15px; }
.zh-quote { background: #f0f2f5; border-left: 3px solid #0068ff; padding: 4px 8px; margin: 2px 0 4px; border-radius: 4px; }
.zh-quote-name { font-weight: 600; font-size: 13px; }
.zh-quote-text { font-size: 13px; color: #555; white-space: pre-wrap; max-height: 4.2em; overflow: hidden; }
.zh-text { white-space: pre-wrap; font-size: 15px; line-height: 1.4; }
.zh-text.zh-clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.zh-recalled { color: #888; font-style: italic; }
.zh-photo { display: block; max-width: 100%; max-height: 260px; margin-top: 6px; border-radius: 6px; object-fit: contain; background: #f5f5f5; }
.zh-card-act { display: flex; align-items: center; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.zh-card-act .zh-btn { flex: 0 0 auto; }
.zh-card-act .zh-btn-light { padding: 0 8px; min-height: 26px; font-size: 13px; font-weight: 700; line-height: 1.2; border-radius: 12px; }
.zh-card-act .zh-iconbtn { margin-left: auto; min-width: 34px; min-height: 34px; font-size: 16px; }
.zh-act-claim { display: contents; }
.zh-act-claim.zh-act-done { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; min-width: 0; }
.zh-owner-line { flex: 1 1 0; min-width: 0; min-height: 26px; padding: 2px 8px; border: 1px solid #ffe082; border-radius: 12px; background: #fff8e1; color: #8a6100; font-size: 13px; font-weight: 700; text-align: left; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zh-owner-line.on { border-color: #43a047; background: #e8f5e9; color: #1b5e20; font-weight: 700; }
.zh-pinbar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: -2px -2px 6px; padding: 5px 8px; border-radius: 6px; background: #fff8e1; color: #6d4c00; font-size: 13px; line-height: 1.35; }
.zh-pinbar .zh-pin-t { flex: 1 1 200px; min-width: 0; }
.zh-pinbar .zh-linkbtn { flex: 0 0 auto; min-height: 26px; font-weight: 600; }
.zh-pin-cd { font-variant-numeric: tabular-nums; color: #c62828; }
.zh-pin-sticky { background: #e3f0ff; color: #0d47a1; }
.zh-card.zh-pinned { border-color: #ffd54f; }
.zh-pagebar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 0; font-size: 16px; }
.zh-pagebar b { color: #0068ff; }
.zh-more { text-align: center; padding: 8px; }
.zh-end { padding: 10px; font-size: 13px; }
.zh-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.zh-center { justify-content: center; }

/* tab Phản hồi */
.zh-split { flex: 1 1 auto; min-height: 0; display: flex; position: relative; background: #fff; }
.zh-lpane, .zh-dpane { flex: 1 1 100%; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.zh-dpane { display: none; }
.zh-split.zh-detail-open .zh-lpane { display: none; }
.zh-split.zh-detail-open .zh-dpane { display: flex; }
.zh-ptitle { padding: 8px 10px 4px; font-size: 16px; font-weight: 600; color: #0068ff; }
.zh-psub { display: block; font-size: 12px; font-weight: 400; color: #888; }
.zh-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: 0 8px 8px; }
.zh-row { display: flex; align-items: flex-start; gap: 8px; width: 100%; min-height: 48px; padding: 8px 10px; margin: 0 0 6px; border: 1px solid #e3e8ef; border-radius: 8px; background: #fff; text-align: left; }
.zh-row.on { background: #e3f2fd; border-color: #bbdefb; }
.zh-row.unread { border-color: #7fb2ff; }
.zh-row-body { flex: 1; min-width: 0; display: block; line-height: 1.3; }
.zh-row-top { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.zh-row-name { color: #0068ff; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-row-top time { flex: 0 0 auto; font-size: 12px; color: #999; }
.zh-row-grp, .zh-row-last { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #777; }
.zh-row-last { color: #333; }
.zh-row-st { display: inline-block; margin-top: 1px; font-size: 12px; color: #b26a00; }
.zh-row-st.has { color: #2e7d32; font-weight: 600; }
.zh-row .zh-badge { align-self: center; }
.zh-dhead { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-bottom: 1px solid #eef1f5; }
.zh-dtitle { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.zh-dtitle b { color: #0068ff; }
.zh-dtitle b, .zh-dtitle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-dtitle span { font-size: 13px; color: #777; }
.zh-dhead .zh-back { font-size: 23px; }
.zh-seg { display: flex; gap: 6px; padding: 6px 8px; }
.zh-seg button { flex: 0 0 auto; min-height: 30px; padding: 0 14px; border: 1px solid #bbdefb; border-radius: 15px; background: #e3f2fd; color: #1565c0; font-size: 13px; }
.zh-seg button.on { background: #0068ff; border-color: #0068ff; color: #fff; }
.zh-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: 6px 8px; background: #f5f7fa; }
.zh-orig { margin: 2px 0 8px; padding: 6px 10px; border-radius: 6px; background: #fff; border: 1px dashed #c8d3e3; font-size: 13px; }
.zh-orig-h { font-weight: 600; color: #555; margin-bottom: 2px; }
.zh-orig-t { white-space: pre-wrap; max-height: 6em; overflow: hidden; color: #333; }
.zh-bub { display: flex; margin: 4px 0; }
.zh-bub-me { justify-content: flex-end; }
.zh-bub-in { max-width: 88%; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1px solid #e3e8ef; }
.zh-bub-me .zh-bub-in { background: #e3f2fd; border-color: #bbdefb; }
.zh-bub-name { font-size: 13px; font-weight: 600; color: #0068ff; }
.zh-bub-text { white-space: pre-wrap; font-size: 15px; }
.zh-bub-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #999; }
.zh-compose { flex: 0 0 auto; padding: 6px 8px; border-top: 1px solid #e3e8ef; background: #fff; }
.zh-to { font-size: 13px; color: #777; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-compose-row { display: flex; gap: 6px; align-items: flex-end; }
.zh-ta { flex: 1; min-width: 0; width: 100%; padding: 7px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 17px; line-height: 1.35; resize: none; max-height: 36vh; background: #fff; }
.zh-check { display: block; margin: 10px 0 4px; font-size: 15px; font-weight: 500; cursor: pointer; }
.zh-check input { margin-right: 6px; transform: scale(1.2); vertical-align: middle; }
.zh-check-s { margin: 4px 0 0; font-size: 13px; font-weight: 400; }

/* hộp thoại, bảng trả lời, toast */
.zh-layer { position: fixed; inset: 0; z-index: 99999; display: none; }
.zh-layer.on { display: block; }
.zh-layer .zh-back { position: absolute; inset: 0; background: rgba(15,23,42,.45); border: none; border-radius: 0; font-size: 0; min-height: 0; }
.zh-modal, .zh-sheet { position: absolute; background: #fff; padding: 14px; }
.zh-modal { left: 50%; top: 50%; transform: translate(-50%,-50%); width: calc(100% - 32px); max-width: 380px; max-height: 86vh; overflow-y: auto; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.zh-sheet { left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; max-height: 86vh; overflow-y: auto; border-radius: 12px 12px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.zh-grab { width: 36px; height: 4px; border-radius: 2px; background: #d0d5dd; margin: -4px auto 8px; }
.zh-mt { margin: 0 0 6px; font-size: 17px; font-weight: 600; color: #0068ff; }
.zh-mp { margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.zh-mq { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #0068ff; background: #f0f2f5; border-radius: 4px; font-size: 13px; color: #555; white-space: pre-wrap; max-height: 5em; overflow: hidden; }
.zh-mact { display: flex; gap: 8px; margin-top: 10px; }
.zh-mact .zh-btn { flex: 1; }
.zh-toast { position: fixed; left: 50%; bottom: calc(66px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(16px); max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 18px; background: rgba(23,32,51,.92); color: #fff; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 100000; text-align: center; }
.zh-toast.on { opacity: 1; transform: translateX(-50%); }

/* tab Tài khoản Zalo + đăng nhập Zalo */
.zh-sec { margin: 8px 8px 0; padding: 10px 12px; background: #fff; border: 1px solid #e3e8ef; border-radius: 8px; }
.zh-sh { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #0068ff; }
.zh-hintp { margin: 0 0 6px; font-size: 13px; color: #888; }
.zh-accs { display: flex; gap: 6px; overflow-x: auto; padding: 6px 8px; border-bottom: 1px solid #eef1f5; }
.zh-acc { flex: 0 0 auto; max-width: 200px; min-height: 32px; padding: 0 12px; border: 1px solid #d0e3fb; border-radius: 16px; background: #f3f8ff; color: #1565c0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zh-acc.active { background: #0068ff; border-color: #0068ff; color: #fff; }
.zh-acc-add { background: #fff; border-style: dashed; color: #0068ff; }
.zh-accrow { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 4px 2px; border: none; border-bottom: 1px solid #f0f2f5; background: none; text-align: left; }
.zh-accrow-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-accrow-s { flex: 0 0 auto; font-size: 13px; color: #888; }
.zh-accrow.on .zh-accrow-s { color: #2e7d32; font-weight: 600; }
.zh-dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #bbb; }
.zh-dot-on { background: #43a047; } .zh-dot-warn { background: #fb8c00; } .zh-dot-off { background: #e53935; } .zh-dot-wait { background: #90caf9; }
.zh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.zh-tag { display: inline-block; max-width: 100%; padding: 4px 10px; border-radius: 12px; background: #e3f2fd; color: #1565c0 !important; border: 1px solid #bbdefb; font-size: 13px; text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-tag-nolink { background: #f1f3f4; color: #555 !important; border-color: #e0e0e0; }
.zh-setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; border-bottom: 1px solid #f0f2f5; font-size: 14px; }
.zh-switch { position: relative; flex: 0 0 auto; width: 40px; height: 24px; border: none; border-radius: 12px; background: #cbd5e1; padding: 0; }
.zh-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.zh-switch.on { background: #0068ff; } .zh-switch.on i { left: 19px; }
.zh-mode { font-size: 13px; color: #888; }
.zh-mode:before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #bbb; margin-right: 5px; vertical-align: middle; }
.zh-mode.on:before { background: #43a047; }
.zh-ver { text-align: center; font-size: 12px; color: #aaa; margin: 10px 0 2px; }
.zh-picker { margin-top: 8px; padding: 8px; background: #f5f7fa; border: 1px solid #e3e8ef; border-radius: 8px; }
.zh-picker-top { display: flex; gap: 6px; flex-wrap: wrap; }
.zh-search { flex: 1; min-width: 120px; min-height: 36px; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 17px; }
.zh-count, .zh-sync { margin: 6px 0 4px; font-size: 13px; color: #555; }
.zh-glist { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; max-height: 40vh; overflow-y: auto; background: #fff; border: 1px solid #e3e8ef; border-radius: 6px; }
.zh-pick { font-size: 13px; line-height: 1.4; min-height: 30px; padding: 4px 10px; border-radius: 15px; background: #fff; color: #333; border: 1px solid #d0d7de; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zh-pick.on { background: #0068ff; color: #fff; border-color: #0068ff; }
.zh-box { max-width: 640px; margin: 10px auto; padding: 12px 14px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fff; }
.zh-v-add .zh-box, .zh-v-qr .zh-box, .zh-v-dead .zh-box, .zh-v-auth .zh-box, .zh-v-error .zh-box { margin-left: 8px; margin-right: 8px; }
.zh-title { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: #0068ff; }
.zh-consent { white-space: pre-wrap; font-size: 14px; line-height: 1.5; color: #333; background: #f7f9fc; border-left: 3px solid #0068ff; padding: 8px 10px; border-radius: 4px; max-height: 36vh; overflow: auto; }
.zh-nameline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.zh-name { font-size: 16px; }
.zh-logout { font-size: 13px; color: #888 !important; text-decoration: underline !important; }
.zh-qrbox { text-align: center; }
.zh-qr img { width: 240px; height: auto; max-width: 78vw; image-rendering: pixelated; border: 1px solid #eee; border-radius: 8px; padding: 6px; background: #fff; }
.zh-countdown { font-size: 13px; color: #888; margin: 6px 0; min-height: 1em; }
.zh-steps { text-align: left; display: inline-block; margin: 6px 0 0; padding-left: 20px; font-size: 14px; }
.zh-hint { text-align: left; margin-top: 10px; padding: 8px 10px; background: #e3f2fd; border-radius: 6px; font-size: 13px; line-height: 1.5; }
.zh-hint ul { margin: 6px 0 8px; padding-left: 18px; }
.zh-ok { color: #2e7d32; font-size: 15px; }
.zh-qrbox .zh-actions { justify-content: center; }

/* đăng ký / đăng nhập SĐT + PIN (0.2.2) */
.zh-auth-box { text-align: center; }
.zh-auth-box p { line-height: 1.5; }
.zh-auth-box .zh-actions { justify-content: center; }
.zh-wpuser { margin: 10px 10px 0; font-size: 13px; color: #999; text-align: center; }
.zh-atabs { display: flex; gap: 4px; margin: 10px 0; border-bottom: 1px solid #e3e8ef; }
.zh-atab { flex: 1; padding: 10px 8px; min-height: 38px; background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; font-size: 16px; color: #555; font-family: inherit; }
.zh-atab-on { color: #0068ff; border-bottom-color: #0068ff; font-weight: 600; }
.zh-authform { text-align: left; max-width: 360px; margin: 0 auto; }
.zh-authform[hidden] { display: none; }
.zh-authform label { display: block; margin: 10px 0; font-size: 15px; color: #333; }
.zh-authform input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px; font-size: 17px; min-height: 38px; border: 1px solid #cfd8e3; border-radius: 6px; }
.zh-authmsg { min-height: 1.2em; margin: 6px 0; font-size: 14px; color: #c62828; }
.zh-authmsg.zh-authmsg-wait { color: #8a5a00; background: #fff4d6; border-radius: 6px; padding: 6px 8px; }   /* 0.8.10: giới hạn tốc độ — khác lỗi sai PIN */
.zh-small { font-size: 13px; margin-top: 12px; }

@keyframes zh-spin { to { transform: rotate(360deg); } }

/* máy tính / tablet ngang: khung trong trang, panel Phản hồi 2 cột */
@media (min-width: 900px) {
  .zh-ui { position: relative; inset: auto; z-index: 1; width: 100%; max-width: 860px; height: min(86vh, 860px); min-height: 520px; margin: 12px auto; border: 1px solid #e3e8ef; border-radius: 10px; padding: 0; }
  .zh-top { padding-top: 4px; }
  .zh-toast { bottom: 70px; }
  .zh-ago { display: inline; }
  .zh-split .zh-lpane { flex: 0 0 300px; border-right: 1px solid #eef1f5; }
  .zh-split .zh-dpane { display: flex; flex: 1 1 auto; }
  .zh-split.zh-detail-open .zh-lpane { display: flex; }
  .zh-dhead .zh-back { display: none; }
}
@media (hover: hover) { .zh-row:hover, .zh-pick:hover, .zh-fchip:hover { filter: brightness(.97); } }
@media (max-width: 380px) { .zh-brand { font-size: 17px; } .zh-hacc-cur { display: none; } .zh-btn { padding: 6px 10px; } }
@media (prefers-reduced-motion: reduce) { .zh-app * { animation: none !important; transition: none !important; } }

/* 0.4.2 */
.zh-chip-done { font-size: 13px; font-weight: 700; }
.zh-card .zh-text:not(.zh-recalled) { cursor: copy; }
.zh-navb { flex-direction: row; gap: 6px; }
.zh-navb .zh-ni { font-size: 18px; }
.zh-navb .zh-nav-badge { position: static; margin: 0 0 0 2px; }
@media (min-width: 900px) {
  .zh-ui { position: fixed; inset: 0; z-index: 99990; width: 100%; max-width: 860px; height: 100dvh; min-height: 0; margin: 0 auto; border: 0; border-radius: 0; box-shadow: 0 0 0 100vmax #eef1f5, 0 0 24px 100vmax rgba(0,0,0,.02); }
  body.admin-bar .zh-ui { top: 32px; height: calc(100dvh - 32px); }
}
@media (max-width: 782px) { body.admin-bar .zh-ui { top: 46px; height: calc(100dvh - 46px); } }
.zh-card-act .zh-btn-claim, .zh-card-act .zh-owner-line, .zh-card-act .zh-chip-done { font-size: 13px; font-weight: 700; line-height: 1.25; min-height: 26px; }
.zh-card-act .zh-btn-claim { padding: 0 8px; }
.zh-card-act .zh-owner-line { padding: 2px 8px; }

/* ===== 0.4.3 ===== */
.zh-brand { display: inline-flex; align-items: center; gap: 5px; }
.zh-logo { flex: 0 0 auto; width: 24px; height: 24px; display: block; }
.zh-auth-logo { display: block; margin: 0 auto 6px; width: 64px; height: 64px; }
.zh-hacc-n { font-weight: 700; }
/* xanh tươi thay cho xanh đậm */
.zh-group.zh-linked { color: #16a34a !important; }
.zh-row-st.has, .zh-accrow.on .zh-accrow-s { color: #16a34a; }
.zh-ok { color: #16a34a; }
.zh-dot-on { background: #22c55e; }
.zh-mode.on:before { background: #22c55e; }
/* @Ok / Trả lời / Ghim: cùng nền xanh nhạt */
.zh-card-act .zh-btn-claim, .zh-card-act .zh-btn-light, .zh-card-act .zh-chip-done { background: #e6f9ec; border: 1px solid #b6ebc8; color: #16a34a !important; }
.zh-card-act .zh-btn-claim:hover, .zh-card-act .zh-btn-light:hover { background: #d3f5df; }
.zh-card-act .zh-btn-claim:disabled { background: #eefbf2; border-color: #cfeedb; color: #86d6a3 !important; }
.zh-owner-line.on { border-color: #34c759; background: #e6f9ec; color: #16a34a; }
/* Xem thêm / Ẩn bớt: thẻ nhỏ ở lề phải, xa nút @Ok */
/* ghi chú trong khung soạn tin / bảng trả lời */
.zh-note { margin: 4px 0 6px; padding: 5px 8px; border-radius: 8px; background: #f1fcf5; border: 1px solid #cfeedb; color: #3b5a47; font-size: 13px; line-height: 1.4; }
.zh-note-warn { background: #fff8e1; border-color: #ffe082; color: #7a5600; }
.zh-note-hl { background: #fff3c4; border-color: #ffd54f; transition: background .3s; }
.zh-inlink { display: inline; min-height: 0; padding: 0; margin: 0; border: none; background: none; color: #0068ff; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.zh-card-act .zh-chip-done { padding: 0 8px; border-radius: 12px; }

/* ---- 0.4.4 ---- */
.zh-iconbtn[data-act="refresh"] { font-size: 22px; font-weight: 400; color: #1f2937; -webkit-text-stroke: 0; text-shadow: none; }
.zh-card-act .zh-btn-claim, .zh-card-act .zh-btn-light, .zh-card-act .zh-chip-done { background: #d9f7e3; border: 1px solid #a9e6bf; color: #4b5563 !important; }
.zh-card-act .zh-btn-claim:hover, .zh-card-act .zh-btn-light:hover { background: #c6f1d5; }
.zh-card-act .zh-btn-claim:disabled { background: #e8faee; border-color: #cfeedb; color: #9ca3af !important; }
.zh-chip-done { gap: 3px; }
.zh-qn { color: #0068ff; font-weight: 700; }
.zh-chip-done .zh-qn { display: inline-block; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-owner-line.on { background: #f3f4f6; border-color: #d9dde3; color: #374151; }
.zh-owner-line.on.kg { background: #d9f7e3; border-color: #a9e6bf; color: #374151; }
.zh-owner-line.on.kr { background: #fde4e4; border-color: #f5b5b5; color: #374151; }
.zh-owner-line .zh-qn { color: #0068ff; }

/* ---- 0.4.5 ---- */
.zh-card .zh-more { display: inline-block; vertical-align: baseline; margin: 0 0 0 2px; padding: 0 7px; min-height: 0; border: none; border-radius: 9px; background: #e5e7eb; color: #4b5563; font-size: 12px; font-weight: 700; line-height: 17px; text-align: center; white-space: nowrap; cursor: pointer; }
.zh-card .zh-more:hover { background: #d1d5db; }
.zh-card-act .zh-btn-undo { background: #fff; border: 1px solid #d1d5db; color: #4b5563 !important; }
.zh-card-act .zh-btn-undo:hover { background: #f3f4f6; }
.zh-card-act .zh-btn-undo:disabled { color: #9ca3af !important; background: #f9fafb; }
/* nút mặc định (chưa bấm): xám rất nhạt; đã bấm ("✓ Đã Ok") vẫn xanh */
.zh-card-act .zh-btn-claim, .zh-card-act .zh-btn-light { background: #f6f7f9; border: 1px solid #e5e7eb; color: #4b5563 !important; }
.zh-card-act .zh-btn-claim:hover, .zh-card-act .zh-btn-light:hover { background: #eceef2; }
.zh-card-act .zh-btn-claim:disabled { background: #f9fafb; border-color: #eef0f3; color: #9ca3af !important; }
.zh-card-act .zh-btn-undo { background: #fff; }
/* "↑ N tin mới" + nút "Top" */
.zh-newpill, .zh-totop { position: absolute; z-index: 7; border: none; cursor: pointer; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .22); }
.zh-newpill { left: 50%; transform: translateX(-50%); padding: 0 14px; height: 28px; line-height: 28px; border-radius: 14px; background: #0068ff; color: #fff !important; font-size: 13px; white-space: nowrap; }
.zh-totop { right: 10px; height: 26px; padding: 0 10px; border-radius: 13px; background: rgba(255, 255, 255, .95); border: 1px solid #d1d5db; color: #4b5563 !important; font-size: 12px; line-height: 24px; }
.zh-totop::before { content: "↑ "; }

/* ---- 0.4.7: chữ +1 cỡ (đã cộng 1px cho mọi cỡ chữ ở trên); hàng nút canh phải; tên nhóm xám + nút "Vào"; nút "Giao nhận"; khung hội thoại nhóm ---- */
.zh-card-act { justify-content: flex-end; align-items: center; }
.zh-card-act .zh-owner-line { flex: 1 1 130px; min-width: 0; margin-right: auto; }
.zh-card-act .zh-btn-gn { background: #d9f7e3; border: 1px solid #a9e6bf; color: #166534 !important; padding: 0 9px; min-height: 27px; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 1.25; }
.zh-card-act .zh-btn-gn:hover { background: #c6f1d5; }
.zh-sender-row { display: flex; align-items: baseline; gap: 8px; }
.zh-sender-row .zh-sender { flex: 1 1 auto; min-width: 0; }
.zh-card-meta { display: flex; align-items: center; gap: 8px; overflow: visible; white-space: normal; margin-top: 1px; }
.zh-gname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-group, .zh-group.zh-linked { color: #6b7280 !important; font-weight: 600; text-decoration: none; }
.zh-gobtn { flex: 0 0 auto; margin-left: auto; min-height: 26px; padding: 0 12px; border: 1px solid #bfd8ff; border-radius: 13px; background: #eaf2ff; color: #0068ff !important; font-size: 14px; font-weight: 700; line-height: 1.2; }
.zh-gobtn:hover { background: #d7e8ff; }
.zh-toast { z-index: 20; }
/* khung hội thoại nhóm */
.zh-gv { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; background: #e9edf3; padding-bottom: env(safe-area-inset-bottom); }
.zh-gv-head { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 4px 8px; padding-top: calc(4px + env(safe-area-inset-top)); background: #0068ff; color: #fff; }
.zh-gv-head .zh-iconbtn { background: transparent; border-color: transparent; color: #fff; font-size: 28px; min-width: 40px; }
.zh-gv-title { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.zh-gv-title b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-gv-title span { font-size: 13px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-gv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; padding: 8px 8px 12px; }
.zh-gv-end { margin: 8px auto; max-width: 92%; text-align: center; font-size: 13px; color: #6b7280; }
.zh-gv-err { color: #c62828; }
.zh-gv-day { display: flex; justify-content: center; margin: 10px 0 6px; }
.zh-gv-day span { padding: 2px 12px; border-radius: 11px; background: rgba(15, 23, 42, .32); color: #fff; font-size: 12.5px; }
.zh-gv-row { display: flex; align-items: flex-end; gap: 6px; margin: 8px 0 0; }
.zh-gv-row.cont { margin-top: 2px; }
.zh-gv-row.me { justify-content: flex-end; }
.zh-gv-av { flex: 0 0 32px; width: 32px; }
.zh-gv-av .zh-avatar { width: 32px; height: 32px; font-size: 14px; }
.zh-gv-bub { max-width: 82%; padding: 6px 10px 4px; border-radius: 14px; background: #fff; color: #1f2937; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); min-width: 64px; }
.zh-gv-row.them .zh-gv-bub { border-bottom-left-radius: 4px; }
.zh-gv-row.me .zh-gv-bub { background: #cfe3ff; color: #0b2447; border-bottom-right-radius: 4px; }
.zh-gv-n { font-size: 13px; font-weight: 700; margin-bottom: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-gv-t { white-space: pre-wrap; font-size: 15px; line-height: 1.35; }
.zh-gv-rc { color: #8a94a3; font-style: italic; }
.zh-gv-q { display: flex; flex-direction: column; margin: 2px 0 4px; padding: 3px 8px; border-left: 3px solid #0068ff; border-radius: 4px; background: rgba(0, 104, 255, .08); font-size: 13px; line-height: 1.3; }
.zh-gv-q b { color: #0068ff; font-size: 12.5px; }
.zh-gv-q span { color: #4b5563; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zh-gv-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; font-size: 12px; color: #8a94a3; }
.zh-gv-row.me .zh-gv-f { justify-content: flex-end; color: #5b7aa8; }
.zh-gv-rp { min-height: 0; padding: 0 2px; border: none; background: none; color: #0068ff !important; font-size: 12.5px; font-weight: 600; }
.zh-gv .zh-photo { max-height: 240px; }
.zh-gv-down { position: absolute; right: 12px; bottom: 120px; z-index: 3; width: 38px; height: 38px; padding: 0; border: 1px solid #d1d5db; border-radius: 19px; background: #fff; color: #0068ff; font-size: 20px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.zh-gv-compose { flex: 0 0 auto; padding: 6px 8px 8px; border-top: 1px solid #d9e0ea; background: #fff; }
.zh-gv-compose .zh-note { margin: 0 0 4px; }
.zh-gv-compose .zh-ta { min-height: 38px; max-height: 110px; }
@media (min-width: 900px) {
  .zh-gv-body { padding: 10px 16px 14px; }
  .zh-gv-bub { max-width: 66%; }
}

/* ===== 0.4.8 ===== */
.zh-gobtn { font-weight: 400 !important; }
.zh-card { --okw: 64px; }
/* nút Ok / ✓ Đã Ok rộng cố định → tin kề nhau so le đúng 1 thân nút (zh-st0 / zh-st1 cố định theo từng tin) */
.zh-card-act .zh-btn-claim, .zh-card-act .zh-chip-done { box-sizing: border-box; width: var(--okw); min-width: var(--okw); justify-content: center; padding: 0 4px; white-space: nowrap; }
.zh-card-act .zh-btn-claim:disabled { width: auto; }
/* 0.4.9: so le trái / phải — tin st1 canh trái (Ok sát lề trái), tin st0 canh phải (Ok sát lề phải) */
.zh-card.zh-st1 .zh-card-act { flex-direction: row-reverse; justify-content: flex-end; }
/* khung chủ lịch trả lời: full rộng, dưới tin, chữ thường cùng cỡ chữ tin nhắn */
.zh-card .zh-owner-box { display: block; -webkit-line-clamp: unset; overflow: visible; flex: none; width: 100%; box-sizing: border-box; margin: 6px 0 0; padding: 6px 10px; min-height: 0; border-radius: 8px; font-size: 15px; font-weight: 400; line-height: 1.4; text-align: left; white-space: pre-wrap; cursor: pointer; }
.zh-card .zh-owner-box .zh-ob-n { color: #1f2937; font-weight: 400; }
.zh-modal-claim { max-width: 420px; }
.zh-modal-claim .zh-cm-meta { margin: 0 0 6px; font-size: 14px; color: #4b5563; }
.zh-modal-claim .zh-cm-meta b { color: #0068ff; font-weight: 600; }
.zh-modal-claim .zh-cm-text { max-height: 42vh; overflow-y: auto; margin: 0 0 8px; padding: 8px 10px; border-left: 3px solid #0068ff; background: #f0f2f5; border-radius: 4px; font-size: 15px; line-height: 1.4; color: #222; white-space: pre-wrap; -webkit-overflow-scrolling: touch; }
.zh-modal-claim .zh-cm-text .zh-photo { display: block; max-width: 100%; margin-top: 6px; border-radius: 6px; }
.zh-modal-claim .zh-cm-note { margin: 0 0 8px; font-size: 12px; line-height: 1.4; color: #6b7280; }

/* ===== 0.4.9 ===== */
.zh-card-act .zh-btn-gn { background: #f6f7f9; border: 1px solid #e5e7eb; color: #4b5563 !important; padding: 0 8px; min-height: 26px; border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.2; }
.zh-card-act .zh-btn-gn:hover { background: #eceef2; }
.zh-card .zh-owner-box.zh-owner-wait { font-size: 13px; line-height: 1.3; padding: 2px 10px; margin-top: 4px; border-radius: 6px; }
.zh-badge-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; border-radius: 50%; line-height: 10px; vertical-align: middle; }
.zh-orig-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: none; overflow: hidden; }
.zh-orig.open .zh-orig-t { display: block; max-height: 14em; overflow-y: auto; }
.zh-orig-act { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.zh-orig-act .zh-linkbtn { min-height: 28px; font-size: 14px; }
.zh-orig-act .zh-orig-send { font-weight: 700; text-align: right; }

/* ===== 0.5.0 ===== */
/* tin lịch của chính mình + khung "Nhà xe trả lời" */
.zh-owntag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: #e8f0fe; color: #1a56c8; font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: middle; }
.zh-card .zh-owner-box.zh-drv { cursor: default; padding: 6px 10px 6px; margin-top: 6px; }
.zh-drv-h { display: flex; align-items: flex-start; gap: 8px; }
.zh-drv-h .zh-avatar { width: 28px !important; height: 28px !important; font-size: 13px; margin-top: 1px; }
.zh-drv-w { flex: 1 1 auto; min-width: 0; }
.zh-drv-n { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; font-size: 13px; color: #1f2937; }
.zh-drv-n b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.zh-drv-n time { flex: 0 0 auto; font-size: 12px; color: #9ca3af; }
.zh-drv-t { font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.zh-card .zh-drv .zh-ob-n { font-weight: 600; color: #1f2937; }
.zh-drv-act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.zh-drv-act .zh-btn-claim, .zh-drv-act .zh-btn-bay, .zh-drv-act .zh-chip-done { box-sizing: border-box; min-width: 64px; justify-content: center; padding: 0 8px; white-space: nowrap; }
.zh-drv-act .zh-btn-claim:disabled { min-width: 0; }
.zh-drv-act .zh-btn-gn { background: #f6f7f9; border: 1px solid #e5e7eb; color: #4b5563 !important; padding: 0 8px; min-height: 26px; border-radius: 12px; font-size: 13px; font-weight: 700; }
.zh-drv-act .zh-btn-undo { min-height: 26px; font-size: 13px; }
.zh-drv-more { display: block; margin: 4px 0 0 auto; }
.zh-card .zh-drv .zh-err { margin-top: 4px; }
.zh-card.zh-own .zh-owner-wait { cursor: default; }
/* menu Tin nhắn: hộp tìm kiếm, tab Trò chuyện / Danh bạ */
.zh-tsbox { position: relative; padding: 4px 8px 0; }
.zh-tsinput { width: 100%; box-sizing: border-box; min-height: 36px; padding: 0 32px 0 12px; border: 1px solid #d5dbe5; border-radius: 18px; background: #f6f7f9; font-size: 15px; color: #111; -webkit-appearance: none; appearance: none; }
.zh-tsinput:focus { outline: none; border-color: #0068ff; background: #fff; }
.zh-tsinput::-webkit-search-cancel-button { display: none; }
.zh-tsclear { position: absolute; right: 12px; top: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #6b7280; font-size: 14px; line-height: 28px; padding: 0; }
.zh-tsclear[hidden] { display: none !important; }
.zh-mseg { padding-top: 6px; padding-bottom: 6px; }
.zh-sech { margin: 6px 2px 4px; font-size: 12px; font-weight: 700; color: #6b7280; }
.zh-row mark { background: #fff3a3; color: inherit; padding: 0 1px; border-radius: 2px; }
.zh-crow .zh-row-last { color: #6b7280; }
.zh-empty-s { padding: 8px; font-size: 12px; }
.zh-cnote { margin: 8px 2px; }
.zh-dhead .zh-avatar { width: 32px; height: 32px; }
.zh-bub-name { font-size: 11px; }
.zh-drv-act .zh-btn { flex: 0 0 auto; padding: 0 8px; min-height: 26px; font-size: 13px; font-weight: 700; line-height: 1.2; border-radius: 12px; }
.zh-drv-act .zh-btn-claim { background: #d9f7e3; border: 1px solid #a9e6bf; color: #166534 !important; }
.zh-drv-act .zh-btn-claim:hover { background: #c6f1d5; }
.zh-drv-act .zh-btn-claim:disabled { background: #e8faee; border-color: #cfeedb; color: #9ca3af !important; }
.zh-drv-act .zh-btn-bay { background: #fde8e8; border: 1px solid #f5b5b5; color: #b91c1c !important; }
.zh-drv-act .zh-btn-bay:hover { background: #fbd5d5; }
.zh-drv-act .zh-chip-done { display: inline-flex; align-items: center; min-height: 26px; font-size: 13px; font-weight: 700; border-radius: 12px; background: #d9f7e3; border: 1px solid #a9e6bf; color: #166534; }
.zh-drv-act .zh-btn-undo { background: #fff; border: 1px solid #d1d5db; color: #4b5563 !important; }
.zh-drv-act .zh-btn-undo:disabled { color: #9ca3af !important; background: #f9fafb; }

/* ===== 0.5.3 ===== */
/* mọi nút hành động trên thẻ (Ok, Thu hồi Ok, Ghim, Giao nhận, Bay, ✓ Đã …) cùng màu nền/viền với nút "Vào nhóm" cũ (xanh nhạt) */
.zh-app .zh-card-act .zh-btn, .zh-app .zh-card-act .zh-chip-done, .zh-app .zh-drv-act .zh-btn, .zh-app .zh-drv-act .zh-chip-done {
    background: #eaf2ff !important; border: 1px solid #bfd8ff !important; color: #0068ff !important; }
.zh-app .zh-card-act .zh-btn:hover, .zh-app .zh-drv-act .zh-btn:hover { background: #d7e8ff !important; }
.zh-app .zh-card-act .zh-btn:disabled, .zh-app .zh-drv-act .zh-btn:disabled { opacity: .55; }
.zh-app .zh-card-act .zh-chip-done, .zh-app .zh-drv-act .zh-chip-done { border-style: dashed !important; }   /* trạng thái đã Ok / đã Bay: cùng màu, viền nét đứt + dấu ✓ */
/* "Vào nhóm": chỉ còn chữ, cuối dòng tên nhóm */
.zh-app .zh-gobtn { background: transparent !important; border: 0 !important; padding: 0 2px !important; min-height: 24px; border-radius: 0; color: #0068ff !important; font-size: 14px !important; font-weight: 400 !important; }
.zh-app .zh-gobtn:hover { background: transparent !important; text-decoration: underline; }
/* avatar bên cạnh bong bóng tin nhắn riêng / trả lời trong nhóm */
.zh-bub-them { align-items: flex-end; }
.zh-bub-av { flex: 0 0 auto; margin-right: 6px; }
.zh-bub-av .zh-avatar { width: 28px; height: 28px; font-size: 13px; }
.zh-bub-them .zh-bub-in { max-width: calc(88% - 34px); }
/* ô trích dẫn trong hộp soạn của hội thoại nhóm */
.zh-gv-qbar { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 8px; border-left: 3px solid #0068ff; border-radius: 6px; background: #f1f5fb; }
.zh-gv-qbar[hidden] { display: none !important; }
.zh-gv-qt { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; }
.zh-gv-qt b { display: block; color: #0068ff; font-weight: 700; }
.zh-gv-qt span { display: block; color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-gv-qx { flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #6b7280; font-size: 15px; line-height: 28px; padding: 0; cursor: pointer; }

/* 0.5.4: emoji · sticker · ảnh */
.zh-app .zh-mtools { display: flex; gap: 6px; align-items: center; padding: 4px 0 2px; }
.zh-app .zh-mtb { font-size: 18px !important; line-height: 1 !important; min-width: 40px; height: 36px; padding: 0 10px; border: 1px solid #d6e0ee; border-radius: 18px; background: #fff; color: #1a2b44; cursor: pointer; }
.zh-app .zh-mtb:hover { background: #eef4ff; }
.zh-app .zh-mtb-stk { font-size: 13px !important; font-weight: 600; }
.zh-app .zh-mreg:empty { display: none; }
.zh-app .zh-mp { border: 1px solid #d6e0ee; border-radius: 12px; background: #fff; margin: 4px 0; padding: 6px; max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.zh-app .zh-mtabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid #e6edf7; padding-bottom: 4px; margin-bottom: 4px; }
.zh-app .zh-mtab { font-size: 18px !important; border: 0; background: transparent; border-radius: 8px; padding: 4px 8px; cursor: pointer; }
.zh-app .zh-mtab.on { background: #dfeaff; }
.zh-app .zh-egrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; }
.zh-app .zh-emo { font-size: 24px !important; line-height: 1 !important; border: 0; background: transparent; border-radius: 8px; height: 40px; cursor: pointer; }
.zh-app .zh-emo:hover, .zh-app .zh-emo:active { background: #eef4ff; }
.zh-app .zh-mhint { color: #6b7a90; font-size: 13px; padding: 8px 4px; grid-column: 1 / -1; }
.zh-app .zh-mnote { font-size: 11.5px !important; padding: 4px; }
.zh-app .zh-stksearch { display: flex; gap: 6px; margin-bottom: 6px; }
.zh-app .zh-stkq { flex: 1; min-width: 0; height: 36px; border: 1px solid #d6e0ee; border-radius: 18px; padding: 0 12px; font-size: 14px !important; }
.zh-app .zh-stkchips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.zh-app .zh-stkchip { flex: none; font-size: 13px !important; border: 1px solid #d6e0ee; background: #f4f8ff; border-radius: 14px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.zh-app .zh-stkchip.on { background: #dfeaff; border-color: #9db9e8; }
.zh-app .zh-stkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; }
.zh-app .zh-stk { border: 0; background: transparent; padding: 2px; border-radius: 8px; cursor: pointer; }
.zh-app .zh-stk:hover, .zh-app .zh-stk:active { background: #eef4ff; }
.zh-app .zh-stk img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.zh-app .zh-mstrip { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; }
.zh-app .zh-mth { position: relative; width: 64px; height: 64px; }
.zh-app .zh-mth img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid #d6e0ee; display: block; }
.zh-app .zh-mrm { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 0; background: #1a2b44; color: #fff; font-size: 12px !important; line-height: 22px !important; cursor: pointer; }
.zh-app .zh-mcnt { font-size: 12px; color: #6b7a90; }
.zh-app .zh-stkimg { width: 120px; height: 120px; object-fit: contain; display: block; margin-top: 4px; }
.zh-app .zh-photo { cursor: zoom-in; }
.zh-app .zh-lb { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.zh-app .zh-lb img { max-width: 96vw; max-height: 92vh; object-fit: contain; }
.zh-app .zh-lbx { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; font-size: 18px !important; cursor: pointer; }

/* 0.5.6: hộp soạn kiểu Zalo */
.zh-app .zh-zrow { display: flex; align-items: flex-end; gap: 0; background: #fff; }
.zh-app .zh-zi { flex: none; width: 44px; height: 44px; padding: 0; margin: 0; border: 0 !important; background: transparent !important; color: #6b7785; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.zh-app .zh-zi svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.zh-app .zh-zi:hover { color: #3b4655; }
.zh-app .zh-zi.on { color: #0068ff; }
.zh-app .zh-zsend { display: none; color: #0068ff; }
.zh-app .zh-zrow.has .zh-zsend { display: inline-flex; }
.zh-app .zh-zsend:disabled, .zh-app .zh-zsend.zh-busy { opacity: .45; }
.zh-app .zh-zrow .zh-ta { flex: 1 1 auto; min-width: 0; width: auto; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0; padding: 11px 4px; min-height: 44px; max-height: 120px; line-height: 22px; font-size: 16px !important; resize: none; overflow-y: auto; }
.zh-app .zh-zrow .zh-ta::placeholder { color: #8a95a3; }
.zh-app .zh-mpanel:empty { display: none; }
.zh-app .zh-mpanel { background: #fff; border-top: 1px solid #e3e9f2; height: min(40vh, 300px); overflow-y: auto; -webkit-overflow-scrolling: touch; animation: zhsheet .16s ease-out; margin: 2px -8px 0; padding: 0 8px 8px; }
@keyframes zhsheet { from { transform: translateY(18px); opacity: .2; } to { transform: none; opacity: 1; } }
.zh-app .zh-mpanel .zh-mp { border: 0; border-radius: 0; margin: 0; padding: 4px 0 0; max-height: none; overflow: visible; background: transparent; }
.zh-app .zh-mtabs2 { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; background: #fff; padding: 6px 0 4px; border-bottom: 1px solid #eef2f8; }
.zh-app .zh-mtab2 { flex: 1 1 0; font-size: 14px !important; font-weight: 600; color: #6b7785; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 8px 4px; cursor: pointer; white-space: nowrap; }
.zh-app .zh-mtab2.on { color: #0068ff; border-bottom-color: #0068ff; }
.zh-app .zh-emop .zh-mtabs { position: static; }
.zh-app .zh-mreg .zh-err { margin: 2px 4px; }
.zh-app .zh-compose, .zh-app .zh-gv-compose { padding-bottom: 0; }
.zh-app .zh-compose .zh-to { padding: 4px 6px 0; }
.zh-app .zh-gv-compose .zh-note { margin: 0 0 2px; }

/* 0.5.7: bấm tên / avatar → Nhắn riêng 1-1 */
.zh-app .zh-who[data-act="open-user"] { cursor: pointer !important; }
.zh-app .zh-sender.zh-who:hover, .zh-app .zh-gv-n.zh-who:hover, .zh-app .zh-drv-n b.zh-who:hover, .zh-app .zh-ob-n .zh-who:hover { text-decoration: underline; }
.zh-app .zh-avatar.zh-who:hover { filter: brightness(.92); }

/* 0.5.9: dòng ghim gọn 1 hàng, nút không đậm; nhiều lần chủ lịch trả lời */
.zh-app .zh-pinbar { flex-wrap: nowrap; gap: 4px; padding: 4px 8px; }
.zh-app .zh-pinbar .zh-pin-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zh-app .zh-pinbar .zh-linkbtn { flex: 0 0 auto; min-height: 24px; padding: 0 4px; font-size: 13px; font-weight: 400 !important; white-space: nowrap; }
.zh-app .zh-orow { cursor: pointer; }
.zh-app .zh-orow + .zh-orow { margin-top: 6px; }
.zh-app .zh-drv-act .zh-btn-dm { min-width: 0; }

/* 0.6.0: viền ghim đậm hơn, bỏ nền đánh dấu tin mới nhất */
.zh-app .zh-card.zh-pinned { border: 3px solid #f2a900; padding: 6px 8px; }
.zh-app .zh-card.zh-new { background: #fff; border-color: #e3e8ef; }

/* 0.6.1: Bắn lịch */
.zh-app .zh-blast { padding: 10px 10px 16px; }
.zh-app .zh-bl-box { position: relative; }
.zh-app .zh-bl-ta { display: block; width: 100%; box-sizing: border-box; min-height: 130px; max-height: 40vh; padding: 10px; border: 1px solid #ccd3dc; border-radius: 8px; font-size: 17px !important; line-height: 1.4; resize: vertical; }
.zh-app .zh-bl-cnt { text-align: right; font-size: 12px; color: #6b7684; margin: 2px 4px 0; }
.zh-app .zh-bl-head { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; }
.zh-app .zh-bl-q { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1px solid #ccd3dc; border-radius: 8px; font-size: 16px !important; }
.zh-app .zh-bl-all { flex: 0 0 auto; min-height: 40px; padding: 0 12px; border: 1px solid #1a73e8; border-radius: 8px; background: #fff; color: #1a73e8; font-size: 15px !important; font-weight: 600; cursor: pointer; }
.zh-app .zh-bl-list { border: 1px solid #e3e8ef; border-radius: 8px; background: #fff; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.zh-app .zh-bl-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 10px; border: 0; border-bottom: 1px solid #f0f2f5; background: #fff; text-align: left; cursor: pointer; font-size: 16px !important; color: #1c2430; }
.zh-app .zh-bl-row:last-child { border-bottom: 0; }
.zh-app .zh-bl-row.on { background: #eef5ff; }
.zh-app .zh-bl-row .zh-avatar { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.zh-app .zh-bl-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-app .zh-bl-ck { flex: 0 0 24px; width: 24px; height: 24px; border: 2px solid #b6bfcb; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; color: #fff; background: #fff; }
.zh-app .zh-bl-row.on .zh-bl-ck { background: #1a73e8; border-color: #1a73e8; }
.zh-app .zh-bl-foot { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 0 4px; margin-top: 8px; background: linear-gradient(rgba(244,246,249,0), #f4f6f9 30%); }
.zh-app .zh-bl-send { flex: 1 1 auto; min-height: 46px; font-size: 17px !important; font-weight: 700; }
.zh-app .zh-bl-send[disabled] { opacity: .5; cursor: default; }
.zh-app .zh-bl-hint { flex: 0 0 auto; font-size: 12px; color: #6b7684; }
.zh-app .zh-bl-err { margin-top: 6px; }
.zh-app .zh-bl-res { margin-top: 10px; padding: 8px 10px; border: 1px solid #e3e8ef; border-radius: 8px; background: #fff; }
.zh-app .zh-bl-rh { font-weight: 700; margin-bottom: 4px; }
.zh-app .zh-bl-ri { display: flex; gap: 8px; padding: 3px 0; font-size: 15px; }
.zh-app .zh-bl-ri b { flex: 0 0 18px; text-align: center; }
.zh-app .zh-bl-ok { color: #1e8e3e; }
.zh-app .zh-bl-er { color: #d93025; }
.zh-app .zh-bl-wt { color: #8a94a3; }
.zh-app .zh-bl-ri i { color: #d93025; font-style: normal; }

/* 0.6.4: dải emoji dưới ô soạn Bắn lịch — đúng 2 dòng, số ô mỗi dòng theo bề rộng màn hình */
.zh-app .zh-bl-emo { display: grid; grid-template-columns: repeat(auto-fill, 28px); justify-content: space-between; grid-auto-rows: 28px; max-height: 56px; height: 56px; overflow: hidden; margin: 6px 0 0; padding: 0; }
.zh-app .zh-bl-e { width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; font-size: 18px !important; line-height: 28px; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.zh-app .zh-bl-e:active { background: #e8f0fe; }

/* 0.7.2: thẻ vị trí (kiểu Zalo) + thẻ danh thiếp */
.zh-app .zh-loc { display: block; width: 100%; max-width: 280px; min-width: 200px; margin: 2px 0; border: 1px solid #d6e2f5; border-radius: 12px; background: #fff; overflow: hidden; text-decoration: none; color: inherit; }
.zh-app .zh-loc-map { display: flex; align-items: center; justify-content: center; height: 84px; position: relative; background-color: #e8eef6;
  background-image: linear-gradient(135deg, rgba(255,255,255,.55) 0 18%, transparent 18% 50%, rgba(255,255,255,.55) 50% 68%, transparent 68%),
    repeating-linear-gradient(0deg, rgba(160,180,205,.35) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(160,180,205,.35) 0 1px, transparent 1px 22px); }
.zh-app .zh-loc-pin { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); align-items: center; justify-content: center; }
.zh-app .zh-loc-t { display: block; padding: 8px 10px 9px; }
.zh-app .zh-loc-t b { display: block; font-size: 13px; color: #1b2733; }
.zh-app .zh-loc-t > span { display: block; font-size: 14px; color: #1b2733; line-height: 1.35; word-break: break-word; margin: 2px 0 4px; }
.zh-app .zh-loc-t u { font-size: 12px; font-weight: 700; color: #0068ff; text-decoration: none; }
.zh-app .zh-ccard { width: 100%; max-width: 280px; min-width: 200px; margin: 2px 0; border: 1px solid #d6e2f5; border-radius: 12px; background: #fff; padding: 10px; }
.zh-app .zh-ccard-h { display: flex; align-items: center; gap: 10px; }
.zh-app .zh-ccard-av { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; background: #0068ff; color: #fff; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.zh-app .zh-ccard-t { min-width: 0; display: block; }
.zh-app .zh-ccard-t b { display: block; font-size: 15px; color: #1b2733; word-break: break-word; }
.zh-app .zh-ccard-t span { display: block; font-size: 13px; color: #5a6b7b; }
.zh-app .zh-ccard-act { display: flex; gap: 8px; margin-top: 10px; }
.zh-app .zh-ccard-act .zh-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; text-decoration: none; }
.zh-app .zh-bub-me .zh-loc, .zh-app .zh-bub-me .zh-ccard { background: #fff; }

/* 0.7.3: tên + ảnh đại diện tài khoản Zalo đang đăng nhập thay cho "Tôi" */
.zh-bub-av-me { margin: 0 0 0 6px; }
.zh-bub-me .zh-bub-name { color: #2a5fa8; text-align: right; }
.zh-gv-row.me .zh-gv-av { order: 2; }
.zh-gv-row.me .zh-gv-bub { order: 1; }
.zh-gv-n.zh-gv-nme { color: #2a5fa8; text-align: right; }

/* 0.7.5: dòng trả lời = avatar bên trái + "<Tên> trả lời: nội dung", giờ ở góc phải; tên dài cắt bằng … */
.zh-drv-t .zh-time { float: right; margin: 2px 0 0 8px; font-size: 12px; color: #9ca3af; font-weight: 400; }
.zh-drv-t .zh-ob-n b.zh-nm { display: inline-block; max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-weight: 600; color: #1f2937; }
.zh-card .zh-owner-box .zh-ob-n { font-weight: 400; }
.zh-card .zh-owner-box .zh-ob-n b.zh-nm { font-weight: 600; }
.zh-card .zh-owner-line.zh-owner-box .zh-drv-h .zh-avatar { margin-top: 0; }
.zh-app .zh-drv-t b.zh-who:hover { text-decoration: underline; }

/* 0.7.6: khung trả lời dạng bong bóng chat — mỗi tin 1 bong bóng, avatar ngoài bên trái, khoảng cách sát */
.zh-card .zh-owner-box.zh-bub-box, .zh-card .zh-owner-box.zh-bub-box.on { background: transparent; border: 0; padding: 0; margin: 3px 0 0; border-radius: 0; }
.zh-bub-box .zh-drv-h { gap: 6px; align-items: flex-end; }
.zh-bub-box .zh-drv-h .zh-avatar, .zh-bub-box .zh-av-sp { width: 28px !important; height: 28px !important; flex: 0 0 28px; margin: 0; }
.zh-bub-box .zh-av-sp { display: block; }
.zh-bub-box .zh-drv-w { flex: 0 1 auto; max-width: calc(100% - 36px); padding: 4px 10px 5px; border-radius: 4px 14px 14px 14px; background: #f3f4f6; }
.zh-bub-box .zh-drv-h + .zh-drv-act, .zh-bub-box > .zh-drv-act { margin-top: 3px; padding-left: 34px; }
.zh-bub-box.on.kg .zh-drv-w { background: #d9f7e3; }
.zh-bub-box.on.kr .zh-drv-w { background: #fde4e4; }
.zh-bub-box.zh-bub-self .zh-drv-w { background: #e0edff; }
.zh-bub-box .zh-drv-t { font-size: 15px; line-height: 1.4; }   /* 0.7.16: cỡ chữ nội dung trả lời = cỡ tin nhắn */
.zh-bub-box .zh-drv-t .zh-time { margin-top: 1px; }
.zh-bub-box .zh-err { margin-left: 34px; }
.zh-card .zh-drv-more { margin-top: 3px; }
.zh-app .zh-orow + .zh-orow { margin-top: 3px; }

/* 0.7.7: khung soạn tin tách hẳn khỏi vùng chat — nền trắng, viền + bóng đổ phía trên, ô nhập dạng viên thuốc nền xám nhạt có viền */
.zh-app .zh-compose, .zh-app .zh-gv-compose { position: relative; z-index: 3; background: #fff !important; border-top: 1px solid #cfd6e0 !important; box-shadow: 0 -3px 8px -2px rgba(15, 30, 60, .14); padding: 6px 8px 6px; }
.zh-app .zh-compose .zh-to, .zh-app .zh-gv-compose .zh-note { padding: 0 6px 4px; margin: 0 0 2px; font-size: 12px; line-height: 1.3; color: #6b7785; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zh-app .zh-compose .zh-to b { color: #374151; }
.zh-app .zh-zrow { align-items: flex-end; gap: 2px; background: transparent; padding: 0; }
.zh-app .zh-zrow .zh-zi { width: 42px; height: 42px; }
.zh-app .zh-zrow .zh-ta { background: #f1f3f5 !important; border: 1px solid #cdd5df !important; border-radius: 20px !important; padding: 9px 14px !important; min-height: 42px; max-height: 120px; line-height: 22px; margin: 0 2px; box-sizing: border-box; }
.zh-app .zh-zrow .zh-ta:focus { background: #fff !important; border-color: #0068ff !important; box-shadow: 0 0 0 2px rgba(0, 104, 255, .12) !important; }
.zh-app .zh-zrow .zh-ta::placeholder { color: #6b7785; opacity: 1; }
.zh-app .zh-gv-qbar { border: 1px solid #d5e1f3; border-left: 3px solid #0068ff; background: #f1f5fb; margin: 0 0 6px; }
.zh-app .zh-bl-ta { background: #f6f7f9; border-color: #c3ccd8; }
.zh-app .zh-bl-ta:focus { background: #fff; border-color: #0068ff; outline: 0; }

/* 0.7.8: nút hành động dưới bong bóng trả lời = chỉ chữ xanh (không khung, không nền), gọn, căn phải một hàng */
.zh-app .zh-bub-box .zh-drv-act { gap: 2px; margin-top: 1px; flex-wrap: wrap; }
.zh-app .zh-bub-box .zh-drv-act .zh-btn, .zh-app .zh-bub-box .zh-drv-act .zh-chip-done { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 6px; color: #0068ff !important; min-width: 0 !important; min-height: 24px; padding: 0 8px !important; font-size: 14px; font-weight: 600; line-height: 24px; }
.zh-app .zh-bub-box .zh-drv-act .zh-btn:hover, .zh-app .zh-bub-box .zh-drv-act .zh-btn:active { background: #e6efff !important; }
.zh-app .zh-bub-box .zh-drv-act .zh-btn:disabled { opacity: .5; background: transparent !important; }
.zh-app .zh-bub-box .zh-drv-act .zh-chip-done { color: #1e8e3e !important; border-style: none !important; }
.zh-app .zh-bub-box .zh-drv-act .zh-btn-undo { color: #6b7785 !important; }

/* 0.7.9: bong bóng trả lời nằm DƯỚI hàng nút của thẻ */
.zh-card .zh-card-act + .zh-owner-box, .zh-card .zh-card-act + .zh-err + .zh-owner-box { margin-top: 6px; }
.zh-card .zh-card-act + .zh-owner-box.zh-bub-box { margin-top: 5px; }

/* 0.7.10: bong bóng Ok / Bay của chính mình (trích dẫn nhỏ + chữ Ok / Bay) + "thu hồi" chỉ chữ; Giao nhận chỉ chữ */
.zh-bub-ok .zh-bq { margin: 2px 0 3px; padding: 0 0 0 6px; border-left: 3px solid #7fb0ff; font-size: 12px; line-height: 1.3; color: #6b7785; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; word-break: break-word; }
.zh-bub-ok .zh-bw { font-size: 15px; line-height: 1.4; font-weight: 400; color: #1f2937; }   /* 0.7.16: nội dung trả lời chữ thường, cỡ như tin nhắn (15px) */
.zh-bub-ok .zh-drv-t .zh-ob-n { font-size: 12px; }
.zh-bub-ok .zh-drv-t .zh-ob-n b.zh-nm { font-size: 12px; font-weight: 600; color: #4b5563; }
.zh-app .zh-bub-box.zh-bub-ok .zh-drv-act .zh-btn-undo { font-size: 13px; font-weight: 500; color: #6b7785 !important; min-height: 22px; line-height: 22px; padding: 0 6px !important; }
.zh-app .zh-card .zh-card-act .zh-btn-gn { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #0068ff !important; padding: 0 8px !important; font-weight: 600; }
.zh-app .zh-card .zh-card-act .zh-btn-gn:hover, .zh-app .zh-card .zh-card-act .zh-btn-gn:active { background: #e6efff !important; }
/* 0.7.13: Ok của nhà xe khác khi chủ lịch đã Ok một nhà xe ở tin này: mờ + không bấm được (Bay / Nhắn tin vẫn dùng) */
.zh-app .zh-btn.zh-btn-off, .zh-app .zh-bub-box .zh-drv-act .zh-btn.zh-btn-off { opacity: .35; cursor: not-allowed; text-decoration: none; filter: grayscale(.6); }
.zh-app .zh-btn.zh-btn-off:hover, .zh-app .zh-btn.zh-btn-off:active { background: transparent !important; }

/* 0.7.14: Bắn lịch — nút Gửi lên góc phải (chỗ "Chọn tất cả" cũ); dòng chữ "Tối đa 30 nhóm / lần" (trái) + liên kết chữ "Chọn tất cả" (phải) giữa ô tìm và danh sách */
.zh-app .zh-bl-head .zh-bl-send { flex: 0 0 auto; min-height: 40px; padding: 0 14px; font-size: 15px !important; font-weight: 700; white-space: nowrap; }
.zh-app .zh-bl-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 6px; }
.zh-app .zh-bl-meta .zh-bl-hint { font-size: 13px; color: #6b7684; text-align: left; }
.zh-app .zh-bl-meta .zh-bl-all, .zh-app .zh-bl-meta .zh-bl-all:hover, .zh-app .zh-bl-meta .zh-bl-all:active, .zh-app .zh-bl-meta .zh-bl-all:focus { flex: 0 0 auto; min-height: 0; padding: 2px 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; color: #0068ff; font-size: 14px !important; font-weight: 600; cursor: pointer; text-align: right; }
.zh-app .zh-bl-meta .zh-bl-all:hover { text-decoration: underline; }

/* 0.7.15: tin trả lời có trích dẫn của người khác (kiểu bong bóng trích dẫn như Ok/Bay của mình) + nội dung chữ thường */
.zh-drv-wq .zh-bq { margin: 2px 0 3px; padding: 0 0 0 6px; border-left: 3px solid #7fb0ff; font-size: 12px; line-height: 1.3; color: #6b7785; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; word-break: break-word; }
.zh-drv-wq .zh-bw.zh-bw-n { font-size: 15px; line-height: 1.4; font-weight: 400; color: #1f2937; }
.zh-drv-wq .zh-drv-t .zh-ob-n b.zh-nm { font-size: 12px; font-weight: 600; color: #4b5563; }
/* 0.7.15: thẻ "nhận lịch" (tin của người khác mình Ok): hàng nút có Giao nhận canh PHẢI như thẻ giao lịch (bỏ so le trái/phải) */
.zh-card .zh-card-act.zh-act-r, .zh-card.zh-st1 .zh-card-act.zh-act-r { flex-direction: row; justify-content: flex-end; }

/* 0.7.17: Bắn lịch — nút "Gửi N nhóm" nằm bên TRÁI ô tìm nhóm; dưới danh sách có dòng thu hồi cả lượt vừa bắn */
.zh-app .zh-bl-head .zh-bl-send { order: 0; margin: 0; }
.zh-app .zh-bl-head .zh-bl-q { order: 1; }
.zh-app .zh-bl-rec { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 8px 10px; border: 1px dashed #ccd3dc; border-radius: 8px; background: #fff; }
.zh-app .zh-bl-rhint { font-size: 13px; line-height: 1.35; color: #6b7684; word-break: break-word; }
.zh-app .zh-bl-recall { align-self: flex-start; min-height: 40px; padding: 0 14px; font-size: 15px !important; font-weight: 700; color: #d93025; border-color: #d93025; white-space: normal; }
.zh-app .zh-bl-recall[disabled] { opacity: .45; cursor: default; }

/* 0.7.18: bộ icon SVG outline thay emoji ở thanh dưới / tiêu đề / menu — xanh #0068ff khi bật, xám xanh khi tắt */
.zh-ico { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; vertical-align: middle; }
.zh-ico.zh-ico-s { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.zh-app .zh-navb { color: #7b8ba3; }
.zh-app .zh-navb .zh-ni { display: inline-flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; filter: none; opacity: 1; color: #7b8ba3; }
.zh-app .zh-navb .zh-ni .zh-ico { width: 24px; height: 24px; }
.zh-app .zh-navb.on, .zh-app .zh-navb.on .zh-ni { color: #0068ff; }
.zh-app .zh-navb.on .zh-ni .zh-ico { stroke-width: 2.2; }
.zh-iconbtn .zh-ico { width: 22px; height: 22px; color: #0068ff; }
.zh-gv-head .zh-iconbtn .zh-ico { color: #fff; }
.zh-iconbtn.spin .zh-ico { animation: none; }
.zh-pinbar .zh-ico-s { width: 15px; height: 15px; margin-right: 4px; color: #0068ff; vertical-align: -3px; }
.zh-mi .zh-ico-s { color: #0068ff; margin-right: 10px; width: 18px; height: 18px; vertical-align: middle; }
.zh-mi-out .zh-ico-s { color: #c62828; }

/* 0.7.19: avatar chưa có ảnh → vòng tròn gradient 2 màu (cặp màu cố định theo mã người dùng, đặt bằng --zh-g1/--zh-g2/--zh-ga từ JS) + chữ cái đầu trắng có bóng nhẹ */
.zh-avatar-letter { background: #4c6ef5; background: linear-gradient(var(--zh-ga, 135deg), var(--zh-g1, #4facfe), var(--zh-g2, #3b5bdb)); color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
/* 0.8.7: thông tin gói + nút thêm Zalo khi đủ số */
.zh-plan .zh-dot { margin-right: 6px; vertical-align: middle; }
.zh-btn-light:disabled { opacity: .55; cursor: not-allowed; }
.zh-limit { text-align: center; margin-top: 6px; }

/* ===== 0.8.11: nhiều Zalo trên một màn — nhãn màu Z1/Z2/Z3/Z4, hàng "Zalo đang thao tác", phiên bản trong menu ===== */
.zh-alias.zs0 { background: #e3f0ff; color: #0d47a1; }
.zh-alias.zs1 { background: #fff1e0; color: #e65100; }
.zh-alias.zs2 { background: #e0f7f1; color: #00695c; }
.zh-alias.zs3 { background: #f1e6ff; color: #6a1b9a; }
.zh-zchip.zs1:not(.on) { border-color: #ffd8a8; background: #fff7ee; color: #e65100; }
.zh-zchip.zs2:not(.on) { border-color: #b2e5d6; background: #f0fbf7; color: #00695c; }
.zh-zchip.zs3:not(.on) { border-color: #dcc6f5; background: #f8f2ff; color: #6a1b9a; }
.zh-zchip.zs1.on { background: #e65100; border-color: #e65100; color: #fff; }
.zh-zchip.zs2.on { background: #00897b; border-color: #00897b; color: #fff; }
.zh-zchip.zs3.on { background: #7b1fa2; border-color: #7b1fa2; color: #fff; }
.zh-zchip.zh-zall { padding: 0 9px; }
.zh-zchip.zh-zall.on { background: linear-gradient(90deg, #0068ff, #e65100); border-color: transparent; color: #fff; }
.zh-app .zh-acting { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 8px; padding: 6px 8px; border: 1px dashed #c9d8ee; border-radius: 10px; background: #f7faff; font-size: 13px; color: #44546a; }
.zh-app .zh-actchip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px 0 4px; border: 1px solid #d0dbea; border-radius: 15px; background: #fff; color: #1a2b44; font-size: 13px; font-weight: 600; }
.zh-app .zh-actchip.on { border-color: #0068ff; background: #e8f1ff; box-shadow: 0 0 0 1px #0068ff inset; }
.zh-app .zh-actas { margin: -2px 0 8px; font-size: 13px; color: #44546a; }
.zh-app .zh-actas b { color: #1a2b44; }
.zh-app .zh-pickfrom .zh-pickbtn { margin: 8px 0; min-height: 46px; justify-content: flex-start; gap: 6px; background: #fff; color: #1a2b44 !important; border: 1px solid #c9d8ee; font-weight: 600; }
.zh-app .zh-pickfrom .zh-pickbtn:hover { background: #eef5ff; }
.zh-app .zh-menu-ver { padding: 8px 14px 4px; font-size: 12px; color: #8a96a8; text-align: center; }

/* ===== 0.8.11 / 0.8.20: màn Đăng nhập / Đăng ký màu xanh Zulo (gọn, neo trên, bàn phím) ===== */
.zh-app.zh-auth { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; background: #0068ff; padding: 14px 12px 10px; border-radius: 14px; min-height: 100dvh; box-sizing: border-box; }
.zh-auth .zh-auth-top { width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-start; }
.zh-auth .zh-auth-hero { text-align: center; color: #fff; margin: 0 0 10px; }
.zh-auth .zh-auth-brandline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.zh-auth .zh-auth-hero .zh-auth-logo { width: 40px; height: 40px; padding: 4px; border-radius: 11px; background: #fff; box-shadow: 0 3px 10px rgba(0, 40, 120, .22); margin: 0; }
.zh-auth .zh-auth-hero .zh-title { color: #fff; font-size: 26px; font-weight: 800; margin: 0; line-height: 1; letter-spacing: .2px; }
.zh-auth .zh-auth-hero p { margin: 0; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .92); }
.zh-auth .zh-auth-box { margin: 0; padding: 12px 14px 10px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(0, 60, 160, .14); }
.zh-auth .zh-atabs { gap: 3px; margin: 0 0 4px; padding: 2px; border: 0; border-radius: 9px; background: #eaf2ff; }
.zh-auth .zh-atab { min-height: 36px; padding: 7px 10px; border: 0; border-radius: 7px; color: #1565c0; font-weight: 800; font-size: 14px; }
.zh-auth .zh-atab-on { background: #0068ff; color: #fff; box-shadow: 0 2px 6px rgba(0, 104, 255, .3); }
.zh-auth .zh-authform label { color: #1a2b44; font-weight: 600; font-size: 13px; margin: 6px 0; }
.zh-auth .zh-authform input { border: 1.4px solid #9fc4f5; border-radius: 10px; background: #f7faff; font-weight: 400; min-height: 42px; padding: 8px 12px; font-size: 16px; margin-top: 3px; } /* 16px tránh zoom iOS */
.zh-auth .zh-authform input:focus { outline: 0; border-color: #0068ff; box-shadow: 0 0 0 3px rgba(0, 104, 255, .18); background: #fff; }
.zh-auth .zh-auth-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.zh-auth .zh-auth-main-stack { flex-direction: column; }
.zh-auth .zh-auth-main .zh-btn:not(.zh-linkbtn),
.zh-auth .zh-actions .zh-btn:not(.zh-linkbtn) { flex: 0 1 auto; width: auto; min-width: 160px; max-width: 280px; min-height: 46px; padding: 10px 22px; border-radius: 10px; font-size: 16px; font-weight: 800; margin-left: auto; margin-right: auto; }
.zh-auth .zh-btn:disabled, .zh-auth .zh-btn.zh-btn-busy { background: #0068ff !important; color: #fff !important; opacity: 1; cursor: wait; }
.zh-auth .zh-btn.zh-btn-busy::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 8px; border: 2.4px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: zh-spin .7s linear infinite; vertical-align: -3px; }
@keyframes zh-spin { to { transform: rotate(360deg); } }
.zh-auth .zh-btn-light { background: #0068ff; color: #fff !important; }
.zh-auth .zh-btn-light:hover { background: #0056d6; }
.zh-auth .zh-btn.zh-btn-zalo { background: #fff; color: #0068ff !important; border: 1.5px solid #0068ff; min-width: 200px; min-height: 44px; padding: 10px 16px; font-size: 15px; font-weight: 800; }
.zh-auth .zh-btn.zh-btn-zalo:hover { background: #eef5ff; }
.zh-auth .zh-auth-or { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; color: #8a96a8; font-size: 12px; }
.zh-auth .zh-auth-or:before, .zh-auth .zh-auth-or:after { content: ""; flex: 1; height: 1px; background: #e1e8f2; }
.zh-auth .zh-auth-note { text-align: center; color: #5a6b7b; font-size: 14px; }
.zh-auth .zh-auth-forgot { text-align: center; margin: 2px 0 4px; }
.zh-auth .zh-linkbtn { font-weight: 600; }
.zh-auth .zh-linkbtn-lg { font-size: 15px !important; font-weight: 700 !important; color: #0068ff !important; padding: 6px 8px; }
.zh-auth [data-otp-why], .zh-auth [data-otp-hint] { padding: 8px 10px; border-radius: 8px; background: #f1f6ff; color: #1a2b44; font-size: 15px; font-weight: 600; line-height: 1.35; }
.zh-auth .zh-auth-ver { display: none; } /* 0.8.19+: bỏ dòng phiên bản trên màn auth */
/* 0.8.20: di động — form ≤ min(60dvh, visualViewport); khi bàn phím mở dùng hết VV (không *0.6) */
@media (max-width: 720px) {
  .zh-app.zh-auth {
    position: fixed; inset: 0; z-index: 99990; margin: 0; border-radius: 0;
    padding: 4px 10px 4px; padding-top: calc(4px + env(safe-area-inset-top, 0px));
    background: #0068ff;
    min-height: 100dvh; height: var(--zh-vvh, 100dvh); max-height: var(--zh-vvh, 100dvh);
    overflow: hidden; justify-content: flex-start; align-items: stretch;
  }
  .zh-auth .zh-auth-top {
    max-height: min(60dvh, var(--zh-vvh, 100dvh));
    overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    flex: 0 1 auto; width: 100%;
  }
  .zh-auth .zh-auth-hero { margin: 0 0 6px; }
  .zh-auth .zh-auth-hero .zh-auth-logo { width: 36px; height: 36px; padding: 3px; border-radius: 10px; }
  .zh-auth .zh-auth-hero .zh-title { font-size: 24px; margin: 0; line-height: 1; }
  .zh-auth .zh-auth-hero p { display: none; }
  .zh-auth .zh-auth-box { padding: 8px 10px 6px; border-radius: 12px; }
  .zh-auth .zh-atabs { margin: 0 0 2px; padding: 2px; border-radius: 8px; gap: 2px; }
  .zh-auth .zh-atab { min-height: 34px; padding: 6px 8px; font-size: 13px; font-weight: 800; border-radius: 7px; }
  .zh-auth .zh-authform label { font-size: 12px; margin: 4px 0; }
  .zh-auth .zh-authform input { min-height: 40px; padding: 5px 10px; margin-top: 2px; border-radius: 7px; }
  .zh-auth .zh-authmsg { min-height: 0; margin: 4px 0; font-size: 12px; }
  .zh-auth .zh-auth-main { gap: 6px; margin: 4px 0 0; }
  .zh-auth .zh-auth-main .zh-btn:not(.zh-linkbtn),
  .zh-auth .zh-actions .zh-btn:not(.zh-linkbtn) {
    flex: 0 0 auto; width: fit-content; min-width: 132px; max-width: 85%;
    min-height: 42px; padding: 8px 16px; font-size: 15px; font-weight: 800;
  }
  .zh-auth .zh-btn.zh-btn-zalo { max-width: 96%; min-height: 42px; padding: 8px 14px; font-size: 14px; white-space: normal; line-height: 1.2; }
  .zh-auth .zh-auth-or { margin: 2px 0 0; font-size: 11px; gap: 6px; }
  .zh-auth .zh-auth-note { font-size: 11px; margin: 2px 0 0; }
  .zh-auth .zh-linkbtn { font-size: 13px; padding: 2px 4px; min-height: 0; }
  .zh-auth .zh-linkbtn-lg { font-size: 14px !important; }
  .zh-auth [data-otp-why], .zh-auth [data-otp-hint] { padding: 6px 8px; font-size: 14px; line-height: 1.35; margin: 0 0 4px; }
  .zh-auth .zh-actions { margin: 4px 0 0; }
  .zh-auth [data-otp-step="pin"] > p { font-size: 12px; line-height: 1.3; margin: 0 0 4px; }
  /* 0.8.21: bước xác minh gọn (ô nhập mã + gửi mã) */
  .zh-auth [data-otp-step="code"] label { font-size: 12px; margin: 4px 0 0; }
  .zh-auth [data-otp-step="code"] input { min-height: 34px; padding: 6px 10px; font-size: 15px; }
  .zh-auth [data-otp-step="code"] .zh-otp-sendbox { margin: 4px 0 0; }
  .zh-auth [data-otp-step="code"] .zh-otp-sendbox .zh-btn { min-height: 30px; padding: 3px 10px; font-size: 12px; }
  .zh-auth [data-otp-linkbox] .zh-btn { min-height: 34px; padding: 5px 12px; font-size: 13px; }
}

.zh-authmsg.zh-authmsg-ok { color: #0b6b2f; }   /* 0.8.11: thông báo đã gửi mã — không phải lỗi */

/* 0.8.12: Bắn lịch gọn — bỏ bộ đếm, 1 dòng emoji (mở rộng 6 dòng), thẻ phân loại, ô tìm hẹp, dòng nhóm gọn, nút gửi nổi ở đáy rộng 50% màn hình */
.zh-app .zh-blast { padding-bottom: 8px; }
.zh-app .zh-bl-ta { min-height: 110px; }
.zh-app .zh-bl-emw { display: flex; align-items: flex-start; gap: 4px; margin: 6px 0 0; }
.zh-app .zh-bl-emw .zh-bl-emo { flex: 1 1 auto; min-width: 0; margin: 0; grid-template-columns: repeat(auto-fill, 28px); grid-auto-rows: 28px; height: 28px; max-height: 28px; overflow: hidden; }
.zh-app .zh-bl-emw.open .zh-bl-emo { height: auto; max-height: 168px; overflow-y: auto; }
.zh-app .zh-bl-emt, .zh-app .zh-bl-emt:hover, .zh-app .zh-bl-emt:focus { flex: 0 0 28px; width: 28px; height: 28px; min-height: 0; padding: 0; border: 1px solid #ccd3dc; border-radius: 6px; background: #fff; color: #0068ff; font-size: 14px !important; line-height: 26px; text-align: center; cursor: pointer; box-shadow: none; }
.zh-app .zh-bl-tabs { display: flex; gap: 6px; align-items: center; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 8px 0 6px; padding: 1px 0; }
.zh-app .zh-bl-tabs::-webkit-scrollbar { display: none; }
.zh-app .zh-bl-tab, .zh-app .zh-bl-tab:hover, .zh-app .zh-bl-tab:focus { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 0; height: 28px; padding: 0 10px; border: 1px solid #ccd3dc; border-color: var(--lc, #ccd3dc); border-radius: 14px; background: #fff; color: #1c2430; font-size: 14px !important; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: none; }
.zh-app .zh-bl-tab small { font-size: 12px; font-weight: 500; color: #6b7684; }
.zh-app .zh-bl-tab.on { background: var(--lc, #0068ff); border-color: var(--lc, #0068ff); color: #fff; }
.zh-app .zh-bl-tab.on small { color: rgba(255,255,255,.85); }
.zh-app .zh-bl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lc, #8a94a3); }
.zh-app .zh-bl-tab.on .zh-bl-dot { background: #fff; }
.zh-app .zh-bl-temo { font-size: 14px; line-height: 1; }
.zh-app .zh-bl-tz { flex: 0 0 auto; }
.zh-app .zh-bl-tz .zh-alias { margin: 0; }
.zh-app .zh-bl-tref, .zh-app .zh-bl-tref:hover, .zh-app .zh-bl-tref:focus { flex: 0 0 28px; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #0068ff; font-size: 17px !important; line-height: 28px; cursor: pointer; box-shadow: none; }
.zh-app .zh-bl-tref.busy { animation: zh-bl-spin 1s linear infinite; opacity: .6; }
@keyframes zh-bl-spin { to { transform: rotate(360deg); } }
.zh-app .zh-bl-meta { margin: 0 0 6px; padding-right: 4px; }
.zh-app .zh-bl-meta .zh-bl-q { flex: 0 1 220px; width: 50%; min-width: 0; height: 32px; min-height: 0; padding: 2px 10px; font-size: 15px !important; border-radius: 16px; }
.zh-app .zh-bl-list { max-height: none; overflow: visible; }
.zh-app .zh-bl-row { gap: 8px; min-height: 0; padding: 5px 10px; font-size: 15px !important; line-height: 1.3; }
.zh-app .zh-bl-row .zh-avatar { flex: 0 0 18px; width: 18px; height: 18px; min-width: 0; min-height: 0; font-size: 9px !important; line-height: 18px; }
.zh-app .zh-bl-ck { flex: 0 0 16px; width: 16px; height: 16px; border-width: 1.5px; border-radius: 4px; font-size: 11px; }
.zh-app .zh-bl-foot { position: sticky; bottom: 8px; z-index: 3; display: flex; justify-content: center; margin: 8px 0 0; padding: 0; background: none; pointer-events: none; }
.zh-app .zh-bl-foot .zh-bl-send { flex: 0 0 auto; width: 50vw; max-width: 100%; min-height: 0; height: 38px; padding: 0 12px; border-radius: 19px; font-size: 15px !important; font-weight: 700; box-shadow: 0 3px 10px rgba(0, 60, 160, .28); pointer-events: auto; }
.zh-app .zh-bl-foot .zh-bl-send[disabled] { opacity: .55; box-shadow: none; }
.zh-app .zh-bl-who { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: #fff8e1; border: 1px solid #ffd54f; color: #5d4300; font-size: 14px; }
.zh-app .zh-bl-who b { color: #1c2430; }
.zh-app .zh-bl-wav { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

/* ===== 0.8.18: không để lộ trang WordPress (đầu trang, bài viết, chân trang) phía sau giao diện Zulo ===== */
/* giao diện đã dựng (html.zulo-lock): mọi phần tử khác của trang bị ẩn hẳn, không chỉ bị che */
html.zulo-lock body > *:not(.zh-app):not(.zh-upd):not(script):not(style):not(link):not(video):not(textarea):not(#wpadminbar) { display: none !important; }
html.zulo-lock, html.zulo-lock body { background: #eef1f5; }
/* trong app (app Zulo WebView / Zulo N): luôn toàn màn hình — kể cả màn ngang / máy tính bảng / đổi cỡ chữ (không còn khung 860px giữa trang) */
html.zulo-inapp .zh-ui { max-width: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html.zulo-inapp #zulo-app:not(.zh-ui) { position: fixed; inset: 0; z-index: 99990; overflow: auto; background: #f0f2f5; }
html.zulo-inapp .zh-app.zh-auth { position: fixed; inset: 0; z-index: 99990; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 0; margin: 0; justify-content: flex-start; padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
html.zulo-inapp .zh-auth .zh-auth-top { max-height: min(60dvh, var(--zh-vvh, 100dvh)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
html.zulo-inapp:has(.zh-auth), html.zulo-inapp:has(.zh-auth) body { overflow: hidden !important; height: 100%; }

/* 0.8.19: trang auth di động — khóa cuộn nền; lớp auth fixed đã che chrome theme */
@media (max-width: 720px) {
  html.zulo-auth-page, html.zulo-auth-page body { overflow: hidden !important; height: 100%; }
}