/* Trang /message (Tin nhắn): cùng bảng màu brand.css và cách dựng của trang Giao dịch (transactions.css).
   Bảng trên màn rộng, thẻ trên màn hẹp (container query), không cuộn ngang trên điện thoại. */
.message-page, .msg-modal {
  --message-collect-color: red;
  --message-pay-color: #0000ff;
}
.message-page {
  --message-control-accent: var(--tts-xanh, #146db1);
  --message-control-hover: var(--tts-navy, #22356b);
  --message-control-soft: #eaf3fb;
  --message-control-border: #c9ddef;
  --message-blue-soft: #edf4fa;
  --message-gold-soft: #fff5df;
  --message-red-soft: #fceff0;
  --message-green: #13795b;
  --message-green-soft: #e8f6f0;
  container: message / inline-size;
  padding: 2px 24px 28px;
  color: var(--tts-muc, #23334e);
  background: var(--tts-nen, #f4f6fa);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
}
.message-page *, .message-page *::before, .message-page *::after { box-sizing: border-box; }
.message-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.message-page button, .message-page input { font: inherit; }
.message-page button { cursor: pointer; }
.message-page button:disabled { cursor: default; opacity: .45; }
.message-page :is(button, input, [tabindex]):focus-visible { outline: 2px solid var(--tts-xanh, #146db1); outline-offset: 2px; }

/* Thanh trên: ngày, tìm khách, thêm tin, menu */
.message-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; padding: 10px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 10px; background: #fff; }
.message-periods { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 10px; background: #f7f9fc; }
.message-periods > button { min-height: 32px; padding: 6px 14px; border: 0; border-radius: 7px; color: var(--tts-muc, #23334e); background: transparent; font-weight: 600; white-space: nowrap; }
.message-periods > button:hover { background: var(--message-blue-soft); }
.message-periods > button.is-selected { background: var(--message-control-soft); color: var(--message-control-accent); box-shadow: inset 0 0 0 1px var(--message-control-border); }
.message-date { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 8px; color: var(--tts-muc-nhat, #64748b); }
.message-date input { width: 104px; height: 34px; border: 0; outline: 0; padding: 0; color: var(--tts-muc, #23334e); background: transparent; font-variant-numeric: tabular-nums; }
.message-search { display: flex; align-items: center; gap: 8px; min-width: 0; height: 40px; box-sizing: border-box; margin: 0; padding: 0 4px 0 11px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 8px; color: var(--tts-muc-nhat, #64748b); background: #fff; }
.message-search:focus-within { border-color: var(--tts-xanh, #146db1); box-shadow: 0 0 0 3px rgba(20, 109, 177, .15); }
/* Ô nhập nằm trong khung bo tròn: khung đã báo focus (viền xanh + quầng), bỏ viền vuông của quy tắc focus chung ở ô nhập */
.message-page .message-search input:focus, .message-page .message-search input:focus-visible,
.message-page .message-date input:focus, .message-page .message-date input:focus-visible { outline: 0; box-shadow: none; }
.message-date:focus-within { border-radius: 7px; color: var(--tts-xanh, #146db1); background: var(--message-blue-soft); }
.message-search input { flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; padding: 0; color: var(--tts-muc, #23334e); background: transparent; }
.message-search input::placeholder { color: var(--tts-muc-nhat, #64748b); }
.message-search input::-webkit-search-cancel-button { display: none; }
.message-search.is-server { flex: 0 1 260px; }
.message-search.is-unified { flex: 1 1 260px; }
.message-search-go { min-height: 32px; padding: 4px 12px; border: 0; border-radius: 6px; color: var(--tts-navy, #22356b); background: var(--message-blue-soft); font-weight: 600; }
.message-clear { border: 0; background: transparent; color: var(--tts-muc-nhat, #64748b); padding: 5px 8px; }
.message-toolbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.message-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 14px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 8px; color: var(--tts-muc, #23334e); background: #fff; font-weight: 600; white-space: nowrap; }
.message-button:hover { background: var(--message-blue-soft); }
.message-button.is-primary { border-color: var(--message-control-accent); color: #fff; background: var(--message-control-accent); }
.message-button.is-primary:hover { border-color: var(--message-control-hover); background: var(--message-control-hover); }
.message-add { min-height: 40px; padding: 8px 18px; font-size: 14px; box-shadow: 0 2px 4px rgba(20, 109, 177, .14); }
.message-button.message-add.is-primary { border-color: var(--tts-do, #b91e23); background: var(--tts-do, #b91e23); box-shadow: 0 2px 4px rgba(185, 30, 35, .14); }
.message-button.message-add.is-primary:hover { border-color: var(--tts-do-dam, #a11b24); background: var(--tts-do-dam, #a11b24); }
/* Nút biểu tượng trên thanh trên (Phân loại đề, Xoá tin theo ngày); data-tip hiện tên ngay khi rê chuột hoặc focus */
.message-icon-action { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--message-control-border); border-radius: 8px; color: var(--message-control-accent); background: var(--message-control-soft); font-size: 14px; }
.message-icon-action:hover { color: var(--message-control-hover); border-color: #a9c7e1; background: #dcecf9; }
.message-icon-action.is-danger { border-color: #f0d7d9; color: var(--tts-do, #b91e23); background: #fff5f5; }
.message-icon-action.is-danger:hover { border-color: #f4d5d7; color: var(--tts-do, #b91e23); background: var(--message-red-soft); }
.message-icon-action[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; z-index: 20; padding: 5px 9px; border-radius: 6px; color: #fff; background: var(--tts-navy, #22356b); font-size: 11px; font-weight: 600; white-space: nowrap; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .12s; }
.message-icon-action:hover::after, .message-icon-action:focus-visible::after { opacity: 1; }

/* Tab xanh thao tác tách khỏi header navy; đỏ chỉ nhấn số tin lỗi. */
.message-card { border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 12px; background: #fff; overflow: visible; box-shadow: 0 4px 20px rgba(35, 51, 78, .035); }
.message-cardhead { padding: 8px; border-bottom: 1px solid #dce5ef; border-radius: 12px 12px 0 0; background: #edf2f8; }
.message-tabs { display: flex; gap: 8px; width: 100%; min-width: 0; }
.message-tab { position: relative; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 12px; border: 1px solid transparent; border-radius: 7px; color: #52627c; background: transparent; font-weight: 700; letter-spacing: .2px; white-space: nowrap; transition: background .15s, color .15s; }
.message-tab > i { opacity: .7; font-size: 12px; }
.message-tab:hover { color: var(--message-control-accent); background: var(--message-control-soft); }
.message-tab.is-active { color: #fff; border-color: var(--message-control-accent); background: var(--message-control-accent); box-shadow: 0 2px 5px rgba(20, 109, 177, .16); }
.message-tab.is-active > i { opacity: 1; }
.message-tab.is-other { color: #52627c; }
.message-tab.is-other:hover { color: var(--message-control-accent); background: var(--message-control-soft); }
.message-tab.is-other.is-active { color: #fff; border-color: var(--message-control-accent); background: var(--message-control-accent); box-shadow: 0 2px 5px rgba(20, 109, 177, .16); }
.message-tab.is-other.is-active .message-tab-count { color: var(--message-control-accent); background: #fff; }
.message-tab-count { min-width: 20px; padding: 1px 6px; border-radius: 99px; color: #fff; background: var(--tts-do, #b91e23); font-size: 11px; text-align: center; }
.message-summary { padding: 14px 16px; border-bottom: 1px solid var(--tts-vien, #e4e9f0); }
.message-summary-numbers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 0 0 10px; color: var(--tts-muc-nhat, #64748b); font-size: 12px; }
.message-summary-numbers > span:first-child { padding: 2px 8px; border-radius: 6px; color: var(--tts-navy, #22356b); background: var(--message-blue-soft); font-weight: 600; }
.message-summary-numbers strong { margin-left: 4px; color: var(--tts-navy, #22356b); font-size: 14px; font-variant-numeric: tabular-nums; }
.message-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.message-filters .message-search { flex: 1 1 240px; height: 36px; }
.message-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.message-chips > button { min-height: 30px; padding: 4px 11px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 99px; color: var(--tts-muc, #23334e); background: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.message-chips > button:hover { background: var(--message-blue-soft); }
.message-chips > button.is-selected { border-color: var(--tts-navy, #22356b); color: #fff; background: var(--tts-navy, #22356b); }
/* Tuỳ chọn hiển thị: công tắc bật/tắt, tách khỏi các nút lọc */
/* Nút "Hiển thị": bảng nhỏ chứa các công tắc */
.message-view-menu { position: relative; margin-left: auto; }
.message-view-button { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 8px; color: var(--tts-muc, #23334e); background: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.message-view-button:hover, .message-view-button.is-open { border-color: #cfd7e3; background: var(--message-blue-soft); }
.message-view-count { min-width: 18px; padding: 0 5px; border-radius: 99px; color: #fff; background: var(--tts-xanh, #146db1); font-size: 10.5px; text-align: center; }
.message-view-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 240px; padding: 6px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(35, 51, 78, .16); }
.message-view-panel > button { justify-content: flex-start; min-height: 36px; padding: 0 8px !important; border-radius: 7px; }
.message-view-panel > button:hover { background: var(--message-blue-soft); }
.message-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.message-toggles-label { color: var(--tts-muc-nhat, #64748b); font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.message-toggles > button { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0; border: 0; color: var(--tts-muc-nhat, #64748b); background: transparent; font-size: 12px; font-weight: 600; white-space: nowrap; }
.message-toggles > button.is-on { color: var(--tts-muc, #23334e); }
.message-switch { position: relative; flex: 0 0 28px; width: 28px; height: 16px; border-radius: 99px; background: #cfd7e3; transition: background .15s; }
.message-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(35, 51, 78, .25); transition: transform .15s; }
.message-toggles > button.is-on .message-switch { background: var(--tts-xanh, #146db1); }
.message-toggles > button.is-on .message-switch::after { transform: translateX(12px); }
.message-inline-toggles { gap: 3px; padding: 3px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 8px; background: #f7f9fc; }
.message-inline-toggles > button { min-height: 32px; padding: 4px 6px; gap: 5px; border-radius: 5px; color: #52627c; font-size: 11px; }
.message-inline-toggles > button:hover { color: var(--message-control-accent); background: #edf3f9; }
.message-inline-toggles > button.is-on { color: var(--message-control-accent); background: var(--message-control-soft); }
.message-inline-toggles > button.is-on .message-switch { background: var(--message-control-accent); }

/* Bảng tin */
.message-table-scroll { width: 100%; max-height: 72vh; overflow: auto; border-radius: 0 0 12px 12px; }
.message-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; }
.message-table th, .message-table td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--tts-vien, #e4e9f0); vertical-align: top; line-height: 1.5; }
.message-table > thead > tr > th { position: sticky; top: 0; z-index: 2; color: var(--tts-navy, #22356b); background: #edf2f9; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.message-table tbody tr:last-child td { border-bottom: 0; }
.message-table > tbody > tr { --message-row-background: #fff; background: var(--message-row-background); transition: none; }
.message-table > tbody > tr:where(:nth-child(even)) { --message-row-background: #fbfcfe; }
.message-table > tbody > tr > td { background: var(--message-row-background); transition: none; }
/* Chọn nhiều tin để xoá */
.message-table .message-col-check { width: 44px; min-width: 44px; box-sizing: border-box; padding: 10px 12px; text-align: center; }
.message-col-check input { display: inline-block; width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--tts-xanh, #146db1); cursor: pointer; }
.message-table > tbody > tr.is-selected { --message-row-background: #eaf2fc; }
.message-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 16px; border-bottom: 1px solid #f1df8a; color: var(--tts-muc, #23334e); background: #fff8d7; font-size: 13px; }
.message-bulk-clear { padding: 0; border: 0; color: var(--tts-xanh, #146db1); background: transparent; font-weight: 600; text-decoration: underline; }
.message-bulkbar .message-button { margin-left: auto; min-height: 34px; padding: 6px 12px; }
.message-button.is-danger { border-color: var(--tts-do, #b91e23); color: #fff; background: var(--tts-do, #b91e23); }
.message-button.is-danger:hover { background: var(--tts-do-dam, #a11b24); }
/* Trúng theo nhóm trong cột Trúng / thu trả */
.message-win-groups { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; color: var(--tts-muc-nhat, #64748b); font-size: 12px; }
.message-win-groups b { color: var(--message-pay-color, #0000ff); font-size: 13px; }
.message-col-index { width: 44px; color: var(--tts-muc-nhat, #64748b); font-variant-numeric: tabular-nums; }
.message-col-customer { width: 125px; min-width: 105px; max-width: 160px; overflow-wrap: anywhere; }
.message-col-customer .message-source { display: block; margin-top: 4px; }
.message-col-message { min-width: 200px; width: 28%; }
.message-col-winnings { min-width: 140px; width: 12%; }
.message-col-status { width: 110px; }
.message-col-time { width: 88px; color: var(--tts-muc-nhat, #64748b); white-space: nowrap; font-variant-numeric: tabular-nums; }
.message-col-time i { margin-right: 3px; font-size: 11px; }
.message-money-total { display: block; margin-bottom: 4px; color: var(--tts-navy, #22356b); font-size: 16px; line-height: 1.25; letter-spacing: -.2px; }
.message-col-money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.message-col-money small { display: block; color: var(--tts-muc-nhat, #64748b); font-size: 11px; }
.message-col-actions { width: 1%; white-space: nowrap; text-align: right; }
.message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--tts-muc-nhat, #64748b); font-size: 12px; }
.message-seq { padding: 1px 6px; border-radius: 5px; color: var(--tts-navy, #22356b); background: var(--message-blue-soft); font-size: 11px; font-weight: 700; }
.message-id { padding: 0; border: 0; color: var(--tts-xanh, #146db1); background: transparent; font-variant-numeric: tabular-nums; }
.message-id:hover { text-decoration: underline; }
.message-player { color: var(--tts-muc, #23334e); font-size: 13px; font-weight: 600; }
.message-telegram-icon { display: inline-block; margin-left: 6px; color: #229ed9; font-size: 13px; vertical-align: baseline; }
.message-source { color: #229ed9; font-size: 11px; font-weight: 600; }
.message-content { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; width: 100%; max-width: 560px; margin: 0; padding: 0; border: 0; color: var(--tts-xanh, #146db1); background: transparent; font-size: 13px; line-height: 1.6; text-align: left; white-space: pre-line; overflow-wrap: anywhere; cursor: pointer; }
.message-content:hover { color: var(--tts-xanh, #146db1); }
.message-kinds { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 10px; max-width: 260px; margin-left: auto; color: var(--tts-muc-nhat, #64748b); font-size: 11px; white-space: normal; }
.message-kinds b { color: var(--tts-navy, #22356b); }
.message-table .message-col-stake { width: 30%; min-width: 260px; max-width: 480px; text-align: left; white-space: normal; }
.message-stake-summary { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--tts-muc, #23334e); font-size: 12px; }
.message-stake-summary > span { white-space: nowrap; }
.message-win-totals { flex-wrap: nowrap; min-width: max-content; }
.message-stake-parts { color: var(--tts-muc-nhat, #64748b); }
.message-money-details { display: flex; flex-direction: column; gap: 5px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.message-money-line { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: baseline; gap: 8px; }
.message-money-label { color: var(--tts-muc-nhat, #64748b); font-size: 11px; font-weight: 500; }
.message-money-values { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.message-money-entry { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 3px 6px; color: #52627c; }
.message-money-entry strong { color: var(--tts-navy, #22356b); font-variant-numeric: tabular-nums; }
.message-winning-details { padding-top: 3px; border-top: 1px dashed var(--tts-vien, #e4e9f0); }
.message-winning-details summary { width: fit-content; color: var(--tts-xanh, #146db1); cursor: pointer; font-size: 11px; font-weight: 600; }
.message-winning-details summary span { color: var(--tts-muc-nhat, #64748b); font-weight: 400; }
.message-winning-details summary:focus-visible { outline: 2px solid var(--tts-xanh, #146db1); outline-offset: 3px; }
.message-winning-content { padding-top: 5px; color: #52627c; }
.message-money-winning-number { margin-right: 8px; }
.message-table > tbody > tr.message-totals-row { --message-row-background: #f1f5fb; background: var(--message-row-background); }
.message-table .message-totals-row > :is(th, td) { position: sticky; top: var(--message-header-height, 48px); z-index: 1; padding-top: 11px; padding-bottom: 11px; border-bottom: 2px solid #dce5f1; background: #f1f5fb; vertical-align: middle; }
.message-totals-label { color: var(--tts-navy, #22356b); text-transform: uppercase; font-size: 12px; }
/* Dòng chi tiết nhóm dưới tin */
.message-table tr.has-breakdown td { border-bottom: 0; }
.message-table tr.message-breakdown-row td { padding-top: 0; }
.message-breakdown { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 24px; padding: 10px 12px; border-radius: 8px; background: #f8fafc; }
.message-breakdown-table { margin: 0; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.message-breakdown-table th, .message-breakdown-table td { padding: 3px 12px; border: 0; text-align: right; white-space: nowrap; }
.message-breakdown-table :is(th, td):first-child { padding-left: 0; text-align: left; color: var(--tts-muc, #23334e); }
.message-breakdown-table th { color: var(--tts-muc-nhat, #64748b); font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.message-breakdown-table td { color: var(--tts-navy, #22356b); }
.message-breakdown-table th:first-child { color: var(--tts-muc-nhat, #64748b); }
.message-win-numbers { flex: 1 1 280px; min-width: 0; font-size: 12px; }
.message-win-numbers-title { display: block; margin-bottom: 4px; color: var(--tts-xanh, #146db1); font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.message-win-numbers ul { margin: 0; padding: 0; list-style: none; }
.message-win-numbers li { margin: 0 0 3px; color: var(--tts-muc, #23334e); line-height: 1.5; overflow-wrap: anywhere; }
.message-win-numbers li b { display: inline-block; min-width: 38px; margin-right: 6px; padding: 0 6px; border-radius: 5px; color: var(--tts-xanh, #146db1); background: var(--message-blue-soft); font-size: 11px; text-align: center; }
.message-win { color: var(--message-pay-color, #0000ff) !important; font-weight: 600; }
.message-collect { color: var(--message-collect-color, red) !important; font-weight: 700; }
.message-pay { color: var(--message-pay-color, #0000ff) !important; font-weight: 700; }
.message-muted { color: #94a3b8; }
.message-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; color: var(--tts-muc-nhat, #64748b); background: #f0f3f7; font-size: 11px; font-weight: 600; white-space: nowrap; }
.message-status > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.message-status.is-success { color: var(--tts-xanh, #146db1); background: var(--message-blue-soft); }
.message-status.is-done { color: var(--message-green); background: var(--message-green-soft); }
.message-status.is-pending { color: #896a00; background: var(--message-gold-soft); }
.message-status.is-danger { color: var(--tts-do, #b91e23); background: var(--message-red-soft); }
.message-status-detail { display: block; margin-top: 5px; color: #846111; font-size: 11px; white-space: nowrap; }
.message-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 2px; border: 1px solid transparent; border-radius: 7px; color: var(--tts-muc-nhat, #64748b); background: transparent; }
.message-icon-button:hover { border-color: var(--tts-vien, #e4e9f0); color: var(--tts-navy, #22356b); background: var(--message-blue-soft); }
.message-icon-button.is-danger:hover { color: var(--tts-do, #b91e23); background: var(--message-red-soft); }
.message-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 220px; padding: 30px 20px; color: var(--tts-muc-nhat, #64748b); text-align: center; }
.message-state > i { font-size: 28px; color: #9eafc5; }
.message-state p { margin: 0; }

/* Khi bảng phải cuộn ngang, các nút vẫn luôn nằm trong vùng nhìn thấy.
   Chỉ ghim chế độ bảng; thẻ mobile không dùng sticky. */
@container message (min-width: 761px) {
  .message-table { border-collapse: separate; border-spacing: 0; }
  .message-table > :is(thead, tbody) > tr > :is(th, td) { border: 1px solid var(--tts-vien, #e4e9f0); }
  /* Mỗi cạnh chỉ vẽ một lần, viền đi cùng ô sticky và không bị chồng thành 2px. */
  .message-table > :is(thead, tbody) > tr > :is(th, td) { border-width: 0 1px 1px 0; }
  .message-table > :is(thead, tbody) > tr > :is(th, td):first-child { border-left-width: 1px; }
  /* Header sticky tự vẽ đường kẻ bên trong ô, không dùng viền bảng có thể trôi khi cuộn. */
  #app .message-table > thead > tr > th {
    border-width: 0;
    box-shadow: inset -1px 0 var(--tts-xanh, #146db1), inset 0 -1px var(--tts-xanh, #146db1), inset 0 1px var(--tts-xanh, #146db1);
  }
  #app .message-table > thead > tr > th:first-child {
    box-shadow: inset 1px 0 var(--tts-xanh, #146db1), inset -1px 0 var(--tts-xanh, #146db1), inset 0 -1px var(--tts-xanh, #146db1), inset 0 1px var(--tts-xanh, #146db1);
  }
  .message-table > tbody > tr > td.message-col-actions {
    position: sticky; right: 0; z-index: 1; min-width: 116px;
    background: var(--message-row-background); box-shadow: -6px 0 10px -8px rgba(35, 51, 78, .45);
  }
  .message-table > thead > tr > th.message-col-actions {
    right: 0; z-index: 4; min-width: 116px;
    box-shadow: -6px 0 10px -8px rgba(35, 51, 78, .45);
  }
  .message-table > tbody > tr.message-totals-row > td.message-col-actions {
    top: var(--message-header-height, 48px); z-index: 3; background: #f1f5fb;
  }
}

/* Màn hẹp: mỗi tin một thẻ, không cuộn ngang */
@container message (max-width: 760px) {
  /* Hàng đầu: Thêm tin (rộng) + hai nút biểu tượng; dưới là chọn ngày, tìm khách */
  .message-add { order: 0; flex: 1 1 auto; }
  .message-toolbar-actions { order: 1; margin-left: 0; }
  .message-periods { order: 2; }
  .message-search.is-server { order: 3; }
  .message-search.is-unified { order: 3; flex: 1 1 100%; }
  .message-periods { flex: 1 1 100%; }
  .message-periods > button { flex: 1; padding: 6px 8px; }
  .message-search.is-server { flex: 1 1 auto; }
  .message-search input { font-size: 16px; }
  .message-tab { min-height: 42px; padding: 8px 5px; gap: 5px; font-size: 12px; }
  .message-tab > i { display: none; }
  .message-tabs { gap: 4px; }
  .message-summary { padding: 12px; }
  .message-summary-numbers { gap: 6px 14px; }
  .message-cardhead { padding: 7px; }
  .message-summary-numbers { flex: 1 1 100%; padding-left: 6px; }
  .message-table tr.has-breakdown { margin-bottom: 0; border-bottom: 0; border-radius: 10px 10px 0 0; }
  .message-table tr.message-breakdown-row { display: block; margin-bottom: 10px; padding: 0 12px 12px; border: 1px solid var(--tts-vien, #e4e9f0); border-top: 0; border-radius: 0 0 10px 10px; }
  .message-table tr.message-breakdown-row td.message-col-index { display: none; }
  .message-table tr.message-breakdown-row td { display: block; }
  .message-breakdown-table { width: 100%; }
  .message-table-scroll { max-height: none; overflow: visible; padding: 10px 12px 12px; }
  .message-table, .message-table tbody { display: block; }
  .message-table thead { display: none; }
  .message-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 10px; }
  .message-table tr:last-child { margin-bottom: 0; }
  .message-table td { padding: 0; border: 0; }
  .message-table td.message-col-index { display: none; }
  .message-table .message-col-check { display: none; }
  .message-win-groups { align-items: flex-start; }
  .message-table td.message-col-customer { grid-column: 1; order: 0; min-width: 0; max-width: none; }
  .message-table td.message-col-time { grid-column: 2; order: 0; width: auto; font-size: 12px; text-align: right; }
  .message-table td.message-col-message { grid-column: 1 / -1; order: 1; min-width: 0; width: auto; padding-bottom: 8px; border-bottom: 1px solid #edf1f6; }
  .message-content { max-width: none; }
  .message-table td.message-col-money { grid-column: 1 / -1; order: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 4px 0; text-align: left; white-space: normal; }
  .message-money-total { margin: 0; font-size: 16px; }
  .message-table td.message-col-money small { margin-left: auto; }
  .message-table td.message-col-money::before { content: attr(data-label); color: var(--tts-muc-nhat, #64748b); font-size: 11px; }
  .message-table td.message-col-stake { display: block; width: auto; min-width: 0; max-width: none; }
  .message-table td.message-col-winnings { width: auto; min-width: 0; }
  .message-table td.message-col-stake::before { display: block; margin-bottom: 4px; }
  .message-totals-row > .message-col-customer, .message-totals-row > .message-col-time,
  .message-totals-row > .message-col-status, .message-totals-row > .message-col-actions { display: none !important; }
  .message-table .message-totals-row > :is(th, td) { position: static; padding: 0; border-bottom: 0; }
  .message-totals-row .message-totals-label { grid-column: 1 / -1; }
  .message-kinds { flex: 1 0 100%; order: 3; max-width: none; margin: 0; justify-content: flex-start; }
  .message-table td.message-col-status { order: 3; align-self: center; }
  .message-table td.message-col-actions { order: 3; text-align: right; }
}
@media (max-width: 767px) { .message-page { padding: 2px 12px 20px; } }

/* Chi tiết tin (modal): bảng tổng hợp theo nhóm tiền xác */
.message-summary-table { width: 100%; max-width: 560px; margin: 4px 0 10px; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.message-summary-table th, .message-summary-table td { padding: 7px 12px; border: 1px solid var(--tts-vien, #e4e9f0); text-align: right; }
.message-summary-table th { color: var(--tts-muc-nhat, #64748b); background: #f8fafc; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.message-summary-table :is(th, td):first-child { text-align: left; }
.message-summary-table .msg-group-total td { color: var(--tts-navy, #22356b); font-weight: 700; }
/* Bảng theo nhóm trong modal (Kết quả kiểm tra, Sửa tin) */
.msg-group-table { margin-bottom: 14px; }
.msg-group-tools { display: flex; margin: 8px 0 0; }
/* Kết quả kiểm tra: tiêu đề, chọn kiểu xem và nút ẩn trên một hàng */
.msg-check-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.msg-check-title { color: var(--tts-navy, #22356b); font-size: 13px; font-weight: 700; }
.msg-segment { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 9px; background: #f8fafc; }
.msg-segment button { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 12px; border: 0; border-radius: 6px; color: var(--tts-muc-nhat, #64748b); background: transparent; font-size: 12px; font-weight: 600; white-space: nowrap; }
.msg-segment button:hover { color: var(--tts-navy, #22356b); }
.msg-segment button.is-active { color: var(--tts-navy, #22356b); background: #fff; box-shadow: 0 1px 3px rgba(35, 51, 78, .12); }
/* Phân loại đề */
#message-filter .modal-header { padding: 12px 18px; background: #f4f8fd; box-shadow: none; }
#message-filter .modal-body { padding: 14px 18px; }
#message-filter .msg-modal-sub { font-size: 11px; }
.msg-filter-toolbar { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; background: transparent; }
.msg-filter-pickers { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.msg-filter-user { flex: 1 1 260px; min-width: 0; }
.msg-filter-pickers .msg-segment { flex: 0 0 auto; border-color: #dce7f3; background: #f3f7fc; }
.msg-filter-pickers .msg-segment button { min-height: 32px; padding: 4px 14px; font-size: 13px; }
.msg-filter-pickers .msg-segment button.is-active { color: #fff; background: var(--tts-xanh, #146db1); box-shadow: 0 1px 3px rgba(20,109,177,.15); }
.msg-filter-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
/* Danh sách loại đề: một hàng số liệu (cột thẳng hàng với tiêu đề), dưới là tin thu gọn một dòng */
.msg-filter-list { overflow: hidden; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 10px; }
.msg-filter-row { display: grid; grid-template-columns: minmax(110px, 1.4fr) repeat(5, minmax(64px, 1fr)) 36px; align-items: center; gap: 3px 12px; padding: 7px 12px; border-bottom: 1px solid var(--tts-vien, #e4e9f0); }
.msg-filter-row:not(.is-head):not(.is-total):hover { background: #f8fbff; }
.msg-filter-row:last-child { border-bottom: 0; }
.msg-filter-row.is-head { padding-top: 7px; padding-bottom: 7px; color: var(--tts-muc-nhat, #64748b); background: #f8fafc; font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }
.msg-filter-row.is-total { border-bottom: 1px solid #d7e4f2; background: #edf4fc; }
.msg-filter-row.is-total .msg-filter-num { color: var(--tts-navy, #22356b); font-weight: 700; }
.msg-filter-name { min-width: 0; color: var(--tts-navy, #22356b); font-size: 13px; }
/* Cột Trúng có tiền: xanh thương hiệu, khác xanh đậm của "trả" trong cột Thu/trả (đỏ thu / xanh trả như danh sách tin) */
.msg-filter-num.msg-filter-hit { color: var(--tts-xanh, #146db1); }
.msg-filter-num { color: var(--tts-muc, #23334e); font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg-filter-provisional { flex-basis: 100%; color: #64748b; font-size: 10px; font-weight: 500; text-align: right; }
.msg-filter-row > .msg-filter-num { align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding-left: 10px; border-left: 1px solid var(--tts-vien, #e4e9f0); }
@media (min-width: 768px) {
  .msg-filter-row:not(.is-head):not(.is-total) > .msg-filter-num { grid-row: 1 / span 2; margin-top: -7px; margin-bottom: -7px; padding-top: 7px; padding-bottom: 7px; }
  .msg-filter-row > .msg-filter-num:nth-child(2) { grid-column: 2; }
  .msg-filter-row > .msg-filter-num:nth-child(3) { grid-column: 3; }
  .msg-filter-row > .msg-filter-num:nth-child(4) { grid-column: 4; }
  .msg-filter-row > .msg-filter-num:nth-child(5) { grid-column: 5; }
  .msg-filter-row > .msg-filter-num:nth-child(6) { grid-column: 6; }
  .msg-filter-row > .msg-copy { grid-column: 7; grid-row: 1; }
  .msg-filter-msg.is-open { grid-row: 3; }
}
.msg-copy { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 7px; color: var(--tts-xanh, #146db1); background: #fff; font-size: 13px; }
.msg-copy:hover:not(:disabled) { background: #edf4fa; }
.msg-copy:disabled { color: #c4ccd8; cursor: default; }
.msg-filter-msg { grid-column: 1; display: block; width: 100%; min-width: 0; box-sizing: border-box; margin-top: 2px; padding: 0; overflow: hidden; border: 0; color: var(--tts-xanh, #146db1); background: transparent; font-size: 12px; line-height: 1.55; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
button.msg-filter-msg:hover, button.msg-filter-msg:focus-visible { color: var(--tts-navy, #22356b); text-decoration: none; }
button.msg-filter-msg:focus-visible { outline: 2px solid var(--tts-xanh, #146db1); outline-offset: 3px; }
.msg-filter-msg.is-open { grid-column: 1 / -1; width: 100%; padding: 8px 10px; border-radius: 6px; color: var(--tts-xanh, #146db1); background: #edf4fc; white-space: pre-wrap; overflow-wrap: anywhere; cursor: zoom-out; }
.msg-filter-msg.is-empty { color: #b0bccb; cursor: default; }
.msg-filter-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; border: 1px dashed var(--tts-vien, #e4e9f0); border-radius: 10px; color: var(--tts-muc-nhat, #64748b); text-align: center; }
.msg-filter-state > i { font-size: 26px; color: #9eafc5; }
.msg-filter-state p { margin: 0; }
@media (max-width: 767px) {
  .msg-filter-pickers .msg-segment { display: flex; flex: 1 1 100%; }
  .msg-filter-pickers .msg-segment button { flex: 1; justify-content: center; }
  /* Điện thoại: 5 cột số chia 2 hàng (Đặt, Xác, Sau cò / Trúng, Thu/trả), nút chép bên phải hàng đầu */
  .msg-filter-row { grid-template-columns: repeat(3, minmax(0, 1fr)) 32px; }
  .msg-filter-row > .msg-copy, .msg-filter-row.is-total > span:last-child { grid-column: 4; grid-row: 2; }
  .msg-filter-row .msg-filter-name { grid-column: 1 / -1; }
  .msg-filter-msg { grid-column: 1 / -1; }
  .msg-filter-row.is-head { display: none; }
  .msg-filter-num { text-align: left; }
  .msg-filter-row > .msg-filter-num { flex-direction: column; align-items: flex-start; justify-content: center; }
  .msg-filter-provisional { flex-basis: auto; text-align: left; }
  .msg-filter-num::before { content: attr(data-label); display: block; color: var(--tts-muc-nhat, #64748b); font-size: 10px; font-weight: 600; text-transform: uppercase; }
}
/* Số đếm cạnh tên tab */
.msg-tab-count { min-width: 20px; padding: 1px 6px; border-radius: 99px; color: var(--tts-navy, #22356b); background: #edf4fa; font-size: 11px; text-align: center; }
.msg-segment .msg-tab-count { min-width: 18px; padding: 0 5px; font-size: 10.5px; }
.msg-check-hide { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 8px; border: 0; border-radius: 6px; color: var(--tts-muc-nhat, #64748b); background: transparent; font-size: 12px; font-weight: 600; }
.msg-check-hide:hover { color: var(--tts-navy, #22356b); background: #edf4fa; }
/* Công tắc nhỏ (Hiện nhóm bằng 0) */
.msg-modal .msg-mini-switch { position: relative; display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--tts-muc-nhat, #64748b); font-size: 12px; font-weight: 600; cursor: pointer; }
.msg-mini-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.msg-mini-switch .msg-switch { flex-basis: 28px; width: 28px; height: 16px; }
.msg-mini-switch .msg-switch::after { top: 2px; left: 2px; width: 12px; height: 12px; }
.msg-mini-switch input:checked + .msg-switch { background: var(--tts-xanh, #146db1); }
.msg-mini-switch input:checked + .msg-switch::after { transform: translateX(12px); }
.msg-group-table .msg-section-head { margin-bottom: 4px; }
.msg-group-title { display: block; margin: 0 0 6px; color: var(--tts-navy, #22356b); font-size: 12px; font-weight: 700; }
.msg-group-table .message-summary-toggle { margin: 0; }
.msg-group-table .message-summary-table { width: 100%; max-width: none; margin: 0; overflow: hidden; border: 1px solid var(--tts-vien, #e4e9f0); border-collapse: separate; border-spacing: 0; border-radius: 10px; }
.msg-group-table .message-summary-table tbody tr:last-child td { border-bottom: 1px solid var(--tts-vien, #e4e9f0); }
.msg-group-table .message-summary-table .msg-group-total td { background: #f1f5fb; }
.message-summary-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--tts-muc-nhat, #64748b); font-size: 12px; cursor: pointer; }

/* ===== Modal của trang tin nhắn (.msg-modal): thêm tin, sửa tin, nội dung, xoá theo ngày, phân loại đề, lịch sử, chạy số =====
   Cùng bảng màu brand.css; ghi đè giao diện Bootstrap/admin.css (đầu bảng đỏ, nút in hoa, viền dày) chỉ trong các modal này. */
.msg-modal .modal-content { overflow: hidden; border: 0; border-radius: 14px; color: var(--tts-muc, #23334e); background: #fff; box-shadow: 0 24px 60px rgba(35, 51, 78, .22); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; }
.msg-modal .modal-header { align-items: flex-start; padding: 12px 18px; border-top: 0; border-bottom: 1px solid var(--tts-vien, #e4e9f0); background: #f4f8fd; box-shadow: none; }
.msg-modal .modal-title { display: flex; flex-direction: column; gap: 3px; margin: 0; color: var(--tts-navy, #22356b); font-size: 17px; font-weight: 700; line-height: 1.3; }
.msg-modal-sub { color: var(--tts-muc-nhat, #64748b); font-size: 12px; font-weight: 400; line-height: 1.4; }
.msg-modal .modal-header .close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -4px -6px 0 12px; padding: 0; border-radius: 8px; color: var(--tts-muc-nhat, #64748b); font-size: 22px; font-weight: 400; text-shadow: none; opacity: 1; }
.msg-modal .modal-header .close:hover { color: var(--tts-navy, #22356b); background: #edf4fa; }
.msg-modal .modal-body { padding: 14px 18px; }
.msg-modal .modal-body .paddingAll { padding: 0; }
.msg-modal .modal-footer { gap: 8px; padding: 10px 18px; border-top: 1px solid var(--tts-vien, #e4e9f0); background: #f8fafc; }
.msg-modal .modal-footer > * { margin: 0; }
/* Giữ kích thước dialog hiện có; tiêu đề và hàng nút đứng yên, phần giữa cuộn. */
.msg-modal .modal-dialog { display: flex; max-height: calc(100vh - 60px); }
.msg-modal .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 60px); }
.msg-modal .modal-header, .msg-modal .modal-footer { flex-shrink: 0; }
.msg-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.msg-modal .modal-body.table-responsive { overflow-x: auto; }
/* Căn giữa popup nhỏ, không đổi display của .modal để Bootstrap vẫn quản lý ẩn/hiện và focus. */
.msg-modal-centered { --msg-centered-gap: 60px; }
.msg-modal-centered .modal-dialog { min-height: calc(100% - var(--msg-centered-gap)); align-items: center; }
.msg-modal-centered .modal-content { max-height: calc(100vh - var(--msg-centered-gap)); max-height: calc(100dvh - var(--msg-centered-gap)); }

/* Ô nhập */
.msg-modal label { margin-bottom: 6px; color: var(--tts-muc-nhat, #64748b); font-size: 12px; font-weight: 600; }
.msg-modal .form-group { margin-bottom: 14px; }
.msg-modal .form-control { min-height: 38px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 8px; color: var(--tts-muc, #23334e); background-color: #fff; font-size: 13px; box-shadow: none; }
.msg-modal .form-control:focus { border-color: var(--tts-xanh, #146db1); box-shadow: 0 0 0 3px rgba(20, 109, 177, .15); }
.msg-modal textarea.form-control { padding: 10px 12px; line-height: 1.6; resize: vertical; }
/* Ô nội dung có lớp tô đỏ chỗ sai cú pháp nằm đè (admin.css .tts-highlights-textarea): ô và lớp tô phải cùng chiều cao,
   đệm, cỡ chữ, khoảng cách chữ thì chỗ tô mới trùng chữ */
.msg-modal .tts-highlights-textarea textarea,
.msg-modal .tts-highlights-textarea .backdrop { height: 240px; }
.msg-modal .tts-highlights-textarea textarea,
.msg-modal .tts-highlights-textarea .backdrop .highlights { padding: 10px 12px; font-size: 14px; letter-spacing: .3px; line-height: 1.6; }
.msg-modal .tts-highlights-textarea .backdrop { border-radius: 8px; }
/* Sửa tin: ô nội dung gốc (chỉ đọc) cao bằng ô đã sửa bên cạnh */
.msg-modal #messageOrigin { height: 240px; }
.msg-modal .form-control[readonly], .msg-modal .msg-readonly { background: #f8fafc; }
/* Ô chọn người chơi (select2 theme classic): bỏ nền gradient và mũi tên tam giác, danh sách xổ xuống gắn trong modal
   (userSelect.js dropdownParent) nên dùng chung giao diện modal */
.msg-modal .select2-container--classic .select2-selection--single { display: flex; align-items: center; height: 40px; border: 1px solid var(--tts-vien, #e4e9f0) !important; border-radius: 8px !important; background: #fff !important; background-image: none !important; outline: 0; }
.msg-modal .select2-container--classic .select2-selection--single:hover { border-color: #cfd7e3 !important; }
.msg-modal .select2-container--classic.select2-container--open .select2-selection--single,
.msg-modal .select2-container--classic.select2-container--focus .select2-selection--single { border-color: var(--tts-xanh, #146db1) !important; box-shadow: 0 0 0 3px rgba(20, 109, 177, .15); }
.msg-modal .select2-container--classic .select2-selection--single .select2-selection__rendered { flex: 1; padding: 0 36px 0 12px; color: var(--tts-muc, #23334e); font-size: 13px; font-weight: 600; line-height: 38px; }
.msg-modal .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: var(--tts-muc-nhat, #64748b); }
.msg-modal .select2-container--classic .select2-selection--single .select2-selection__arrow { top: 0; right: 0; width: 36px; height: 38px; border: 0 !important; border-radius: 0 8px 8px 0; background: transparent !important; background-image: none !important; }
.msg-modal .select2-container--classic .select2-selection--single .select2-selection__arrow b { display: none; }
.msg-modal .select2-container--classic .select2-selection--single .select2-selection__arrow::before { content: "\f078"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tts-muc-nhat, #64748b); font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px; transition: transform .15s; }
.msg-modal .select2-container--classic.select2-container--open .select2-selection__arrow::before { transform: rotate(180deg); color: var(--tts-xanh, #146db1); }
.msg-modal .select2-container--classic.select2-container--open .select2-selection--single { border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; }

.msg-modal .select2-container--classic .select2-dropdown { overflow: hidden; margin-top: 4px; border: 1px solid var(--tts-vien, #e4e9f0) !important; border-radius: 10px !important; background: #fff; box-shadow: 0 12px 32px rgba(35, 51, 78, .16); }
.msg-modal .select2-container--classic .select2-dropdown--above { margin-top: -4px; }
.msg-modal .select2-container--classic .select2-search--dropdown { position: relative; padding: 8px; border-bottom: 1px solid var(--tts-vien, #e4e9f0); }
.msg-modal .select2-container--classic .select2-search--dropdown::before { content: "\f002"; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); color: var(--tts-muc-nhat, #64748b); font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; pointer-events: none; }
.msg-modal .select2-container--classic .select2-search--dropdown .select2-search__field { height: 36px; padding: 6px 10px 6px 32px; border: 1px solid var(--tts-vien, #e4e9f0) !important; border-radius: 8px; color: var(--tts-muc, #23334e); font-size: 13px; outline: 0; }
.msg-modal .select2-container--classic .select2-search--dropdown .select2-search__field:focus { border-color: var(--tts-xanh, #146db1) !important; box-shadow: 0 0 0 3px rgba(20, 109, 177, .12); }
.msg-modal .select2-container--classic .select2-results > .select2-results__options { max-height: 280px; padding: 4px; }
.msg-modal .select2-container--classic .select2-results__option { margin: 1px 0; padding: 7px 10px; border-radius: 7px; color: var(--tts-muc, #23334e); font-size: 13px; }
.msg-modal .select2-container--classic .select2-results__option--highlighted[aria-selected] { color: var(--tts-navy, #22356b); background: #edf4fa; }
.msg-modal .select2-container--classic .select2-results__option[aria-selected="true"] { color: var(--tts-navy, #22356b); background: #eef0f8; font-weight: 700; }
.msg-modal .select2-container--classic .select2-results__option[aria-selected="true"] .msg-user-option::after { content: "\f00c"; margin-left: auto; color: var(--tts-xanh, #146db1); font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 11px; }
.msg-modal .select2-container--classic .select2-results__message { color: var(--tts-muc-nhat, #64748b); }
.msg-user-option { display: flex; align-items: center; gap: 10px; min-width: 0; }
.msg-user-option.is-placeholder { color: var(--tts-muc-nhat, #64748b); font-style: italic; font-weight: 400; }
.msg-user-avatar { display: inline-flex; flex: 0 0 26px; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: var(--tts-navy, #22356b); background: #fff8d7; font-size: 11px; font-weight: 700; }
.msg-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 20px; }
.msg-date-field { flex: 0 0 auto; }
.msg-date-picker { display: flex; align-items: center; gap: 8px; }
.msg-date-picker .form-control { width: 140px; }
.msg-date-quick { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 10px; background: #fff; }
.msg-date-quick button { min-height: 30px; padding: 4px 12px; border: 0; border-radius: 7px; color: var(--tts-muc, #23334e); background: transparent; font-size: 12px; font-weight: 600; white-space: nowrap; }
.msg-date-quick button:hover { background: #edf4fa; }
.msg-date-quick button.is-selected { color: #fff; background: var(--tts-xanh, #146db1); }
.msg-switches { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.msg-modal .msg-switch-field { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; margin: 0; color: var(--tts-muc, #23334e); font-size: 13px; font-weight: 600; cursor: pointer; }
.msg-switch-field input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.msg-switch { position: relative; flex: 0 0 34px; width: 34px; height: 20px; border-radius: 99px; background: #cfd7e3; transition: background .15s; }
.msg-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(35, 51, 78, .25); transition: transform .15s; }
.msg-switch-field input:checked + .msg-switch { background: var(--tts-xanh, #146db1); }
.msg-switch-field input:checked + .msg-switch::after { transform: translateX(14px); }
.msg-switch-field input:focus-visible + .msg-switch { outline: 2px solid var(--tts-xanh, #146db1); outline-offset: 2px; }
.msg-hint { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; color: var(--tts-muc, #23334e); background: #edf4fa; font-size: 12px; line-height: 1.55; }
.msg-hint > i { margin-top: 2px; color: var(--tts-xanh, #146db1); }
.msg-hint a { color: var(--tts-xanh, #146db1); font-weight: 600; text-decoration: underline; }
.msg-hint code { padding: 1px 5px; border-radius: 4px; color: var(--tts-navy, #22356b); background: #fff; font-size: 12px; }
.msg-hint.is-danger { color: #7a1a1e; background: #fceff0; }
.msg-hint.is-danger > i { color: var(--tts-do, #b91e23); }
.msg-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.msg-section-head label { color: var(--tts-navy, #22356b); font-size: 13px; font-weight: 700; }

/* Nút */
.msg-modal .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none; }
.msg-modal .btn-sm { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.msg-modal .btn-primary { border-color: var(--tts-xanh, #146db1); background: var(--tts-xanh, #146db1); color: #fff; }
.msg-modal .btn-primary:hover:not(:disabled) { border-color: var(--tts-navy, #22356b); background: var(--tts-navy, #22356b); }
.msg-modal .btn-outline-primary { border-color: var(--tts-xanh, #146db1); background: #fff; color: var(--tts-xanh, #146db1); }
.msg-modal .btn-outline-primary:hover:not(:disabled) { background: #edf4fa; color: var(--tts-navy, #22356b); }
.msg-modal .btn-secondary { border-color: var(--tts-vien, #e4e9f0); background: #fff; color: var(--tts-muc, #23334e); }
.msg-modal .btn-secondary:hover { border-color: #cfd7e3; background: #f0f3f7; color: var(--tts-muc, #23334e); }
.msg-modal .btn-danger { border-color: var(--tts-do, #b91e23); background: var(--tts-do, #b91e23); color: #fff; }
.msg-modal .btn-danger:hover:not(:disabled) { border-color: var(--tts-do-dam, #a11b24); background: var(--tts-do-dam, #a11b24); }
.msg-modal .btn-warning { border-color: var(--tts-vang, #f8d114); background: var(--tts-vang, #f8d114); color: var(--tts-navy, #22356b); }
.msg-modal .btn-link { padding-left: 0; padding-right: 0; color: var(--tts-xanh, #146db1); }
.msg-modal .btn:disabled { opacity: .5; }

/* Bảng trong modal: bỏ đầu bảng đỏ và viền dày của admin.css */
.msg-modal .table-responsive, .msg-modal .msg-table-wrap { overflow: auto; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 10px; }
.msg-modal .modal-body.table-responsive { border: 0; border-radius: 0; }
.msg-modal .table { margin: 0; color: var(--tts-muc, #23334e); font-size: 12px; font-variant-numeric: tabular-nums; }
.msg-modal .table.table-bordered, .msg-modal .table.table-bordered :is(th, td) { border: 1px solid var(--tts-vien, #e4e9f0); }
.msg-modal .table :is(th, td) { padding: 6px 10px; border-bottom: 1px solid var(--tts-vien, #e4e9f0) !important; vertical-align: middle; }
.msg-modal .table .thead-light th, .msg-modal .table thead th { position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--tts-vien, #e4e9f0) !important; color: var(--tts-navy, #22356b); background: #edf3fa; font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; }
.msg-modal .table tbody tr:last-child td { border-bottom: 1px solid var(--tts-vien, #e4e9f0) !important; }
.msg-modal .table tbody tr:nth-child(even) { background: #f8fafd; }
.msg-modal .msg-segment button.is-active { color: #fff; background: var(--tts-xanh, #146db1); box-shadow: 0 1px 3px rgba(20,109,177,.15); }
.msg-modal button:focus-visible, .msg-modal a:focus-visible { outline: 2px solid var(--tts-xanh, #146db1); outline-offset: 2px; }
.msg-hit-badge { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 5px; color: var(--tts-xanh, #146db1); background: #edf4fa; font-size: 10.5px; font-weight: 700; vertical-align: 1px; cursor: help; }
.msg-modal .badge-danger { padding: 2px 6px; border-radius: 5px; background: var(--tts-do, #b91e23); font-size: 10px; }
.msg-modal .msg-empty { padding: 24px 10px !important; color: var(--tts-muc-nhat, #64748b); text-align: center; }
.msg-modal .msg-link { color: var(--tts-xanh, #146db1); }
.msg-modal .msg-link:hover { text-decoration: underline; }
.msg-modal .msg-icon-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; color: var(--tts-muc-nhat, #64748b); }
.msg-modal .msg-icon-link:hover { color: var(--tts-navy, #22356b); background: #edf4fa; }

/* Tab Tin nhận / Tin bỏ qua trong sửa tin */
.msg-modal .line-tab-tts { gap: 2px; margin-bottom: 0; border-bottom: 1px solid var(--tts-vien, #e4e9f0); }
.msg-modal .line-tab-tts .nav-link { position: relative; padding: 9px 14px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: var(--tts-muc-nhat, #64748b); background: transparent; font-size: 12px; font-weight: 700; }
.msg-modal .line-tab-tts .nav-link.active { color: var(--tts-xanh, #146db1); border-bottom-color: var(--tts-xanh, #146db1); background: #edf4fc; }
.msg-modal .rightCircle { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; border-radius: 99px; color: #fff; background: var(--tts-do, #b91e23); font-size: 10px; vertical-align: 1px; }

/* So sánh trước / sau */
.msg-diff-label { display: block; margin-bottom: 6px; color: var(--tts-muc-nhat, #64748b); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.msg-modal .msg-diff { min-height: 120px; padding: 12px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 10px; background: #f8fafc; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }

@media (max-width: 575px) {
  .msg-modal-centered { --msg-centered-gap: 16px; }
  .msg-modal .modal-dialog { margin: 8px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .msg-modal .modal-content { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .msg-modal .modal-header, .msg-modal .modal-body, .msg-modal .modal-footer { padding-left: 14px; padding-right: 14px; }
  .msg-modal .modal-footer { flex-wrap: wrap; }
  .msg-modal .modal-footer .btn { flex: 1 1 auto; }
  .msg-modal .modal-footer .mr-auto { flex: 0 0 auto; }
  .msg-date-field { flex: 1 1 100%; }
  .msg-date-picker .form-control { flex: 1; width: auto; min-width: 0; }
  .msg-modal .tts-highlights-textarea textarea,
  .msg-modal .tts-highlights-textarea .backdrop { height: 180px; }
}

/* Sửa tin: hai ô đối chiếu, tiền tóm tắt và hai chế độ xem độc lập với trạng thái nhận phiếu. */
.msg-edit-modal .modal-dialog { width: calc(100% - 48px); max-width: 1120px; margin: 24px auto; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
.msg-edit-modal .modal-content { width: 100%; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
.msg-edit-modal .modal-header { border-top: 0; padding: 12px 18px; background: #f4f8fd; box-shadow: none; }
.msg-edit-modal .msg-edit-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; }
.msg-edit-modal .msg-edit-body > * { flex-shrink: 0; }
.msg-edit-editors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.msg-edit-editor { min-width: 0; }
.msg-edit-editor .form-group { margin: 0; }
.msg-edit-editor label { display: flex; align-items: center; gap: 7px; min-height: 22px; margin-bottom: 6px; color: var(--tts-navy, #22356b); font-size: 12px; font-weight: 700; }
.msg-edit-editor label > i { font-size: 12px; }
.msg-edit-field-hint { margin-left: auto; padding: 2px 7px; border-radius: 5px; color: var(--tts-muc-nhat, #64748b); background: #eef2f6; font-size: 10px; font-weight: 500; }
.msg-edit-editor.is-editable label { color: var(--tts-xanh, #146db1); }
.msg-edit-editor.is-editable .msg-edit-field-hint { color: var(--tts-xanh, #146db1); background: #eaf3fb; }
.msg-edit-modal #messageOrigin, .msg-edit-modal .tts-highlights-textarea textarea, .msg-edit-modal .tts-highlights-textarea .backdrop { height: clamp(160px, 26dvh, 280px); min-height: 160px; box-sizing: border-box; }
.msg-edit-modal #messageOrigin, .msg-edit-modal #messageEdit { resize: none; overflow-y: auto; }
.msg-edit-modal #messageOrigin { padding: 10px 12px; color: #52627c; background: #f5f7fa; font-size: 14px !important; line-height: 1.6; }
.msg-edit-modal #messageEdit { color: var(--tts-muc, #23334e); border-color: #becfe2; }
.msg-edit-modal .tts-highlights-textarea textarea, .msg-edit-modal .tts-highlights-textarea .highlights { font-size: 14px; line-height: 1.6; }
.msg-edit-metrics .msg-edit-bet-split { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px 12px; padding: 0; color: var(--tts-muc-nhat, #64748b); }
.msg-edit-metrics .msg-edit-bet-split small { font-size: 11px; white-space: nowrap; }
.msg-edit-metrics .msg-edit-bet-split strong { color: #52627c; font-size: 11px; font-weight: 600; }
.msg-edit-metrics { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 3px 24px; border: 0; border-radius: 0; background: transparent; }
.msg-edit-metrics > div { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; padding: 2px 0; border: 0; background: transparent; }
.msg-edit-metrics .msg-edit-settlement { justify-content: flex-end; }
.msg-edit-metrics span { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; color: var(--tts-muc-nhat, #64748b); font-size: 11px; font-weight: 600; letter-spacing: .2px; }
.msg-edit-metrics span > i { display: none; }
.msg-edit-metrics span > b { margin: 0 -2px; }
.msg-edit-metrics strong { color: var(--tts-navy, #22356b); font-size: 18px; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Màu tiền trúng của Sửa tin (kết quả Kiểm tra của Thêm tin không tính tiền trúng) */
.msg-edit-modal .message-win-negative { color: var(--message-pay-color, #0000ff); font-weight: 700; }
.msg-edit-modal .message-win-positive { color: var(--message-collect-color, red); font-weight: 700; }
.msg-edit-metrics .is-pay strong, .msg-edit-metrics .msg-edit-pay-label { color: var(--message-pay-color, #0000ff); }
.msg-edit-metrics .is-collect strong, .msg-edit-metrics .msg-edit-collect-label { color: var(--message-collect-color, red); }
.msg-edit-results { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 10px; overflow: hidden; }
.msg-edit-view-tabs { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-bottom: 1px solid var(--tts-vien, #e4e9f0); background: #f3f7fc; }
.msg-edit-view-tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 12px; border: 1px solid transparent; border-radius: 6px; color: #64748b; background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.msg-edit-view-tabs button:hover { color: var(--tts-navy, #22356b); background: #e0e8f4; }
.msg-edit-view-tabs button.is-active { color: #fff; border-color: var(--tts-xanh, #146db1); background: var(--tts-xanh, #146db1); box-shadow: 0 1px 3px rgba(20,109,177,.15); }
.msg-edit-status-tabs { display: flex; align-items: center; padding: 4px 10px; border-bottom: 1px solid var(--tts-vien, #e4e9f0); background: #f3f7fc; }
.msg-edit-status-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--tts-vien, #e4e9f0); border-radius: 8px; background: #f5f7fa; }
.msg-edit-status-switch button { min-height: 28px; padding: 3px 9px; border: 1px solid transparent; border-radius: 6px; color: #64748b; background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.msg-edit-status-switch button.is-active { border-color: #c3d8eb; color: var(--tts-xanh, #146db1); background: #eaf3fb; font-weight: 700; box-shadow: none; }
.msg-edit-status-switch button:hover { color: var(--tts-navy, #22356b); }
.msg-edit-pending-count { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; color: #9a5b00; background: #fff0cc; font-size: 10px; font-weight: 700; }
.msg-edit-summary-panel { grid-column: 1 / -1; padding: 10px 12px; }
.msg-edit-summary-panel .msg-group-table { width: 100%; max-width: 560px; margin: 0; }
.msg-edit-summary-panel .message-summary-table { border-collapse: collapse; border-radius: 0; }
.msg-edit-summary-panel .message-summary-table :is(th, td) { padding: 4px 8px; border: 1px solid var(--tts-vien, #e4e9f0); line-height: 1.4; }
#modal2 .msg-group-table { width: 100%; max-width: 560px; margin: 0; }
#modal2 .message-summary-table { border-collapse: collapse; border-radius: 0; }
#modal2 .message-summary-table :is(th, td) { padding: 4px 8px; border: 1px solid var(--tts-vien, #e4e9f0); line-height: 1.4; }
.msg-edit-detail-panel { grid-column: 1 / -1; max-height: 420px; overflow: auto; }
.msg-edit-detail-panel .table th { white-space: nowrap; }
.msg-edit-modal .msg-edit-detail-panel .table :is(th, td) { padding: 6px 10px; border: 1px solid var(--tts-vien, #e4e9f0); }
.msg-edit-modal .msg-edit-detail-panel .table tbody tr:last-child td { border-bottom: 1px solid var(--tts-vien, #e4e9f0) !important; }
.msg-edit-detail-panel .table td { font-variant-numeric: tabular-nums; }
.msg-edit-modal .msg-edit-detail-panel .table { font-size: 12px; }
.msg-edit-modal .msg-edit-detail-panel .table thead th { color: var(--tts-navy, #22356b); background: #edf3fa; font-size: 10px; letter-spacing: .25px; }
.msg-edit-modal .msg-edit-detail-panel .table tbody tr { background: #fff; }
.msg-edit-modal .msg-edit-detail-panel .table tbody tr:nth-child(even) { background: #f8fafd; }
.msg-edit-modal .msg-edit-detail-panel .table .msg-edit-number { text-align: right; white-space: nowrap; }
.msg-edit-modal .msg-edit-detail-panel .table :is(.message-win-positive, .message-win-negative) { text-align: right; white-space: nowrap; }
/* Tiêu đề bảng trong popup ghim khi cuộn (sticky, xem .msg-modal .table thead th). Với border-collapse: collapse viền thuộc về
   cả bảng nên không đi theo ô tiêu đề: cuộn xuống là tiêu đề mất vạch dọc, thân bảng lộ dưới. Tách viền về từng ô
   (separate, mỗi ô viền phải + dưới, cột đầu thêm viền trái, tiêu đề thêm viền trên) để tiêu đề ghim giữ nguyên viền */
.msg-modal .table-bordered { border: 0; border-collapse: separate; border-spacing: 0; }
.msg-modal .table-bordered :is(th, td), .msg-edit-modal .msg-edit-detail-panel .table :is(th, td) { border-width: 0 1px 1px 0; }
.msg-modal .table-bordered :is(th, td):first-child, .msg-edit-modal .msg-edit-detail-panel .table :is(th, td):first-child { border-left-width: 1px; }
.msg-modal .table-bordered thead th, .msg-edit-modal .msg-edit-detail-panel .table thead th { border-top-width: 1px; }
.msg-edit-ticket-content { color: #64748b; overflow-wrap: anywhere; }
.msg-edit-ticket-numbers { display: inline-block; padding: 1px 6px; border-radius: 4px; color: var(--tts-navy, #22356b); background: #eaf1f9; font-weight: 600; white-space: nowrap; }
.msg-edit-bonus { color: #64748b; font-size: 11px; }
.msg-edit-detail-panel input { min-width: 70px; }
.msg-edit-modal button:focus-visible, .msg-edit-modal a:focus-visible { outline: 2px solid var(--tts-xanh, #146db1); outline-offset: 2px; }
.msg-edit-modal .modal-footer { justify-content: flex-end; background: #f8fafc; }
.msg-edit-modal .modal-footer .mr-auto { margin-right: auto !important; }
/* Màn rộng: modal cao vừa nội dung (tin ít phiếu không còn khoảng trống), tối đa bằng màn hình (max-height ở trên);
   tin nhiều phiếu thì khung kết quả co lại và bảng phiếu cuộn bên trong */
@media (min-width: 768px) {
  .msg-edit-modal .modal-content { height: auto; }
  .msg-edit-modal .msg-edit-body { min-height: 0; overflow: hidden; }
  .msg-edit-modal .msg-edit-body > .msg-edit-results { flex: 0 1 auto; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  .msg-edit-summary-panel, .msg-edit-detail-panel { min-height: 0; max-height: none; overflow: auto; }
}
@media (max-width: 767px) {
  .msg-edit-editors { grid-template-columns: 1fr; gap: 12px; }
  .msg-edit-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
  .msg-edit-metrics .msg-edit-settlement { justify-content: flex-start; }
  .msg-edit-metrics strong { font-size: 15px; }
  .msg-edit-summary-panel { padding: 12px; }
  .msg-edit-detail-panel { max-height: 45vh; max-height: 45dvh; }
}
@media (max-width: 575px) {
  .msg-edit-modal .modal-dialog { width: calc(100% - 16px); margin: 8px auto; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .msg-edit-modal .modal-content { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .msg-edit-modal .msg-edit-body { padding: 14px; gap: 12px; }
  .msg-edit-results { grid-template-columns: minmax(0, 1fr); }
  .msg-edit-status-tabs { padding: 5px 10px; }
}