/* Font Nunito removed - dùng SFProDisplay */

@font-face {
  font-family: "SFProDisplay";
  src:
    url("../fonts/SFProDisplay-Bold.woff2") format("woff2"),
    url("../fonts/SFProDisplay-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SFProDisplay";
  src:
    url("../fonts/SFProDisplay-Regular.woff2") format("woff2"),
    url("../fonts/SFProDisplay-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SFProDisplay";
  src:
    url("../fonts/SFProDisplay-Medium.woff2") format("woff2"),
    url("../fonts/SFProDisplay-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html {
  font-size: 13px;
}

body {
  font-family: "SFProDisplay", sans-serif;
  background: transparent;
  position: relative;
  overflow: hidden;
}

/* Lớp phủ giảm độ sáng nhẹ */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.03);
  pointer-events: none;
  z-index: 9999;
}

#app {
  padding: 45px 10px 10px 10px;
  background-image: linear-gradient(100deg, #1e55d1 0%, #ac8edd 100%);
}

[class*="ag-theme-"] {
  font-family: "SFProDisplay", sans-serif !important;
}

/* Pinned bottom row - TỔNG CỘNG */
.ag-floating-bottom {
  font-weight: bold !important;
  background-color: #ffffff !important;
  border-top: 2px solid #dee2e6 !important;
}

.ag-floating-bottom .ag-row {
  background-color: #ffffff !important;
}

.ag-floating-bottom .ag-cell {
  font-weight: 600 !important;
  color: #212529 !important;
  background-color: #ffffff !important;
}

/* Currency Filter Dropdown */
#currencyFilter {
  width: auto;
  min-width: unset;
  padding: 2px 36px 2px 8px !important;
}

.ag-watermark {
  display: none !important;
}

#contextMenu,
#contextMenuCategory,
#contextMenuPhoi,
#contextMenuWhatsApp,
#contextMenuInsta,
#igContextMenu,
#acContextMenu {
  background-color: #fff;
  z-index: 9999999 !important;
  position: fixed;
}

#contextMenu:not(.open),
#igContextMenu:not(.open),
#acContextMenu:not(.open) {
  top: -999px;
  left: -999px;
}

#contextMenuCategory:not(.open),
#contextMenuPhoi:not(.open),
#contextMenuWhatsApp:not(.open),
#contextMenuInsta:not(.open) {
  display: none;
}

.account-wrapper {
  width: calc(100% - 350px);
  height: calc(100vh - 55px);
}

.folded .account-wrapper {
  width: 100% !important;
}

#app[data="clone"] .account-wrapper {
  width: 100% !important;
}

#app #accounts {
  overflow: hidden;
  padding-right: 350px;
}

#app[data="clone"] #accounts {
  padding-right: 0;
  margin-right: 350px;
}

/* 3 grid Camp + tab row — chừa 350px cho #adPanel absolute.
   Pattern margin-right giống trang clone. */
#app[data="ads"] #campTabsRow,
#app[data="ads"] #campaignsGrid,
#app[data="ads"] #adsetsGrid,
#app[data="ads"] #adsGrid {
  margin-right: 350px;
}
.folded #app[data="ads"] #campTabsRow,
.folded #app[data="ads"] #campaignsGrid,
.folded #app[data="ads"] #adsetsGrid,
.folded #app[data="ads"] #adsGrid {
  margin-right: 0;
}

/* Cell content căn giữa dọc — match style bảng TKQC gốc */
#campaignsGrid .ag-cell,
#adsetsGrid .ag-cell,
#adsGrid .ag-cell {
  display: flex;
  align-items: center;
  padding: 0 10px;
  line-height: normal;
}

/* Camp toggle — custom div pill (filled violet w/ white thumb, like screenshot) */
._camp-switch {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
  user-select: none;
}
._camp-switch._camp-switch-on {
  background: var(--primary-end, #8b5cf6);
}
._camp-switch._camp-switch-disabled {
  opacity: 0.5;
  cursor: wait;
}
._camp-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: left 0.2s ease;
}
._camp-switch._camp-switch-on ._camp-switch-thumb {
  left: 18px;
}

#accounts .ag-ltr .ag-cell {
  padding: 10px;
}

#igGrid .ag-ltr .ag-cell {
  padding: 10px;
}

/* IG Panel Footer - đồng bộ style với bảng chính */
#igPanel > div:last-child {
  font-size: 13px;
  font-family: "SFProDisplay", sans-serif;
}

#igPanel .badge {
  font-size: 0.75em;
  padding: 0.35em 0.65em;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* IG Panel Resizer */
#igResizer {
  transition: opacity 0.2s;
}

#igResizer > div {
  transition: all 0.2s;
}

#igResizer > div:hover {
  background: #f8f9fa !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
  transform: scale(1.1);
}

#igResizer > div:active {
  background: #e9ecef !important;
  transform: scale(1);
}

.app-wrapper {
  background: #fff;
}

/* ===== Sidebar trái TÁCH RỜI — DÙNG CHUNG mọi trang app (khối riêng, có gap với app-wrapper) =====
   Styling look "tách card" áp THEO NGỮ CẢNH .page-body: HOME đặt <aside> NGOÀI .page-body nên giữ
   look tích hợp cũ; các trang app bọc .page-body → sidebar thành card tách rời. */
.page-body {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.page-body > :not(.hm-side-slot) {
  /* con-chính (app-wrapper hoặc #mainContainer của bm) chiếm phần còn lại */
  flex: 1 1 auto;
  min-width: 0;
}
/* Slot GIỮ CHỖ cố định trong flex-row; là mốc position cho sidebar overlay bên trong.
   Peek KHÔNG đổi width slot → nội dung KHÔNG BAO GIỜ xê dịch. */
.page-body > .hm-side-slot {
  flex: 0 0 224px;
  align-self: stretch;
  position: relative;
  z-index: 30;
  transition: flex-basis 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.hm-side-slot.hm-rail {
  flex-basis: 66px;
} /* thu gọn: slot còn 66px (chỉ icon) */

#userInfo a {
  position: absolute;
  top: 0;
  right: 0;
}

#panel {
  width: 370px;
  position: absolute;
  top: 40px;
  right: 10px;
  bottom: 10px;
}

#adPanel {
  width: 350px;
  position: absolute;
  background: #fff;
  top: 105px;
  height: calc(100% - 157px);
  right: 10px;
}

#app[data="via"] #adPanel {
  height: calc(100% - 115px) !important;
}

.folded #adPanel {
  width: 0px !important;
  margin-left: 0 !important;
  border-left: 0 !important;
}

#adPanel #foldButton .ri-arrow-drop-left-line,
.folded #adPanel #foldButton .ri-arrow-drop-right-line {
  display: none;
}

.folded #adPanel #foldButton .ri-arrow-drop-left-line {
  display: block;
}

#viaPanel {
  padding-right: 350px !important;
}

.folded #viaPanel {
  padding-right: 0 !important;
}

#foldButton {
  position: absolute;
  width: 22px;
  height: 48px;
  background: #fff;
  right: 349px;
  top: 50%;
  margin-top: -24px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.folded #adPanel #foldButton {
  right: -10px;
}

.folded #app #accounts {
  padding-right: 0;
}

.folded #app[data="clone"] #accounts {
  margin-right: 0;
}

#header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  color: #fff;
  padding: 0 10px;
  height: 40px;
}

.header-top a:hover {
  background: #0000003b;
}

.header-top {
  height: 45px;
}
.header-bottom {
  height: 40px;
  background: rgb(0 0 0 / 10%);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: calc(100vw - 400px);
}

#header .titleBarButtons button {
  border: 0;
  background: transparent;
  border-radius: 5px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-left: 8px;
  cursor: pointer;
  -webkit-app-region: no-drag;
  font-size: 16px;
}

.ag-root-wrapper.ag-layout-normal {
  border: 0 !important;
}

/* .nav-tabs {
    background-color: #f5f7f7;
}

.nav-link.active {
    border-top-color: transparent!important;
}

.nav-item:first-child .nav-link.active {
    border-left: 0!important;
} */

.ag-header-cell:last-child:after {
  display: none;
}

/* Universal: textarea có nút copy ở góc — giữ embedded look cũ của nút,
   nhưng thêm 1 viền pseudo trên wrapper qua ::after với z-index cao →
   viền render ĐÈ LÊN seam của nút copy ở góc trên-phải, tạo cảm giác
   ô textarea có viền liền mạch.
   Dùng :has() selector → target wrapper không cần thêm class vào HTML.
   Yêu cầu Chrome 105+ (extension chạy Chrome current, OK). */
div:has(> .form-control + .textarea-copy-btn) {
  position: relative;
  border-radius: 0.375rem;
}
div:has(> .form-control + .textarea-copy-btn)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.375rem;
  pointer-events: none;
  border: 1px solid #dee2e6;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  z-index: 3;
}
div:has(> .form-control:focus + .textarea-copy-btn)::after {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.15);
}
/* Textarea bên trong: ẩn viền của chính nó (đã thay bằng wrapper ::after,
   tránh double border). Cần !important vì modern-theme.css set focus border. */
div:has(> .form-control + .textarea-copy-btn) > .form-control,
div:has(> .form-control + .textarea-copy-btn) > .form-control:focus {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Nút "Xóa nội dung" — inject runtime (scripts.js) làm tab trái cạnh nút copy.
   DOM order: textarea → copy → clear (clear là con cuối để giữ adjacency
   textarea+copy cho selector ::after ở trên). Vị trí trái copy qua right offset. */
.textarea-clear-btn {
  position: absolute;
  top: 1.2px;
  /* right:32 → mép phải nút clear nằm DƯỚI nút copy (overlap), nút copy
     z-index cao hơn che phần thừa → biên luôn sạch tại mép trái copy,
     không phụ thuộc chính xác bề rộng copy (tránh hở 1-2px). */
  right: 32px;
  cursor: pointer;
  padding: 4px 9px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-top: 0;
  border-right: 0;
  border-bottom-left-radius: 0.375rem;
  color: #6c757d;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  user-select: none;
  z-index: 1;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.textarea-clear-btn:hover {
  background: #fff1f0;
  color: #ef4444;
}
/* Nút copy hover xanh indigo (phân biệt với nút xóa đỏ).
   !important vì copy có inline color/background trong card.html. */
.textarea-copy-btn {
  transition:
    color 0.15s ease,
    background 0.15s ease;
}
.textarea-copy-btn:hover {
  background: #eef2ff !important;
  color: var(--primary-start, #6366f1) !important;
}

/* ===== Empty state sidebar tính năng (khi không có tính năng nào) ===== */
/* Cho vùng cuộn thành flex-column → container fill phần dưới header →
   empty-state flex:1 tự căn giữa khoảng trống thật (không đo bằng JS). */
.flex-grow-1.overflow-auto:has(> [id$="SortableCards"]) {
  display: flex;
  flex-direction: column;
}
[id$="SortableCards"]:has(> .fx-feat-empty) {
  flex: 1 1 auto;
}
.fx-feat-empty {
  display: none; /* JS toggle → flex */
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* padding-bottom dư 40px = chiều cao header "Chức năng" (nằm trên vùng căn
     giữa) → đẩy nội dung lên 20px để khớp tâm với overlay no-data của grid. */
  padding: 24px 20px 64px;
}
.fx-feat-empty-ic {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ede9fe, #e0e7ff);
  color: #7c3aed;
  font-size: 22px;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.14);
}
.fx-feat-empty-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 5px;
}
.fx-feat-empty-sub {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.5;
  max-width: 210px;
  margin-bottom: 14px;
}
.fx-feat-empty-btn {
  border: none;
  border-radius: 9px;
  height: 34px;
  padding: 0 16px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-end, #8b5cf6), #a855f7);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 5px 14px rgba(var(--primary-end-rgb, 139, 92, 246), 0.32);
  transition: filter 0.15s ease;
}
.fx-feat-empty-btn:hover {
  filter: brightness(1.07);
}
.fx-feat-empty-btn i {
  font-size: 14px;
  line-height: 1;
}

/* ===== Empty state giữa bảng (overlayNoRowsTemplate) — thay ảnh Nodata ===== */
.fx-grid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 20px;
  /* .ag-overlay có pointer-events:none (click xuyên qua) → bật lại cho
     empty-state để nút "Tải dữ liệu" bấm được. */
  pointer-events: auto;
}
.fx-grid-empty-ic {
  width: 48px !important;
  height: 48px !important;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ede9fe, #e0e7ff);
  color: #7c3aed;
  font-size: 22px !important;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.14);
}
.fx-grid-empty-title {
  font-size: 13.5px !important;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 5px;
}
.fx-grid-empty-sub {
  font-size: 11.5px !important;
  color: #94a3b8;
  line-height: 1.5;
  max-width: 210px;
  margin-bottom: 14px;
}
.fx-grid-empty-btn {
  border: none;
  border-radius: 9px;
  height: 34px !important;
  padding: 0 16px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--primary-end, #8b5cf6), #a855f7);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 5px 14px rgba(var(--primary-end-rgb, 139, 92, 246), 0.32);
  transition: filter 0.15s ease;
}
.fx-grid-empty-btn:hover {
  filter: brightness(1.07);
}
.fx-grid-empty-btn i {
  font-size: 14px !important;
  line-height: 1 !important;
}
/* Biến thể "Đăng nhập Facebook" (khi chưa login FB) */
.fx-grid-empty-ic--fb {
  background: linear-gradient(135deg, #e7f0ff, #dbeafe) !important;
  color: #1877f2 !important;
}
.fx-grid-empty-btn--fb {
  background: linear-gradient(135deg, #1877f2, #0c63d4) !important;
  box-shadow: 0 5px 14px rgba(24, 119, 242, 0.34) !important;
}

/* ===== Popup Ghi chú (window._openNoteEditor) ===== */
.swal2-popup.fxnote-popup {
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 460px !important;
}
.swal2-popup.fxnote-popup .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
}
.fxnote {
  text-align: left;
}
.fxnote-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.fxnote-ic {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--primary-end, #8b5cf6),
    var(--primary-start, #6366f1)
  );
  color: #fff;
  font-size: 22px;
  box-shadow:
    0 6px 16px rgba(var(--primary-rgb, 99, 102, 241), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.fxnote-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.fxnote-sub {
  font-size: 12.5px;
  color: #94a3b8;
  margin-top: 2px;
}
.fxnote-field {
  position: relative;
}
.fxnote-field textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  box-sizing: border-box;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px 26px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  background: #f9fafb;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.fxnote-field textarea:focus {
  border-color: var(--primary-start, #6366f1);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 99, 102, 241), 0.12);
}
.fxnote-field textarea::placeholder {
  color: #b6bdc9;
}
.fxnote-count {
  position: absolute;
  right: 12px;
  bottom: 9px;
  font-size: 11px;
  color: #cbd5e1;
  pointer-events: none;
}
.fxnote-actions {
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
.fxnote-save,
.fxnote-cancel {
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition:
    filter 0.15s ease,
    background 0.15s ease;
}
.fxnote-save {
  background: linear-gradient(
    135deg,
    var(--primary-end, #8b5cf6),
    var(--primary-start, #6366f1)
  );
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb, 99, 102, 241), 0.35);
}
.fxnote-save:hover {
  filter: brightness(1.07);
}
.fxnote-cancel {
  background: #f1f5f9;
  color: #64748b;
}
.fxnote-cancel:hover {
  background: #e2e8f0;
}

/* Bảng thống kê link backup (AG-Grid trong popup Swal) — viền ngoài + đường
   kẻ phân tầng: header đậm, kẻ dọc/ngang nhạt cho hài hòa. */
.bst-grid {
  border: 1px solid #cbd5e1; /* viền ngoài bảng */
  border-radius: 8px;
  overflow: hidden;
  /* Header chỉ dùng dấu "|" đậm (column separator) — KHÔNG kẻ full-height */
  --ag-header-column-separator-display: block;
  --ag-header-column-separator-height: 50%;
  --ag-header-column-separator-width: 2px;
  --ag-header-column-separator-color: #94a3b8;
}
.bst-grid .ag-header {
  border-bottom: 2px solid #cbd5e1 !important; /* đường dưới header đậm nhất */
  background: #f8fafc;
}
.bst-grid .ag-cell {
  border-right: 1px solid #f1f5f9; /* kẻ dọc ô — nhạt */
}
.bst-grid .ag-row {
  border-bottom: 1px solid #f1f5f9; /* kẻ ngang dòng — nhạt */
}
/* Khi có nút clear (tab trái): copy z-index cao hơn để che overlap +
   bỏ bo góc trong bottom-left (đường cong trong chuyển sang nút clear). */
div:has(> .textarea-clear-btn) > .textarea-copy-btn {
  border-bottom-left-radius: 0 !important;
  z-index: 2 !important;
}

/* .ag-header-cell .ag-header-cell-text:before {
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 5px;
}

.ag-header-cell[col-id="account"] .ag-header-cell-text:before {
    content: '\f264'
}

.ag-header-cell[col-id="email"] .ag-header-cell-text:before {
    content: '\eef6'
}

.ag-header-cell[col-id="passMail"] .ag-header-cell-text:before {
    content: '\eef8'
}

.ag-header-cell[col-id="cookies"] .ag-header-cell-text:before {
    content: '\ec16'
} */

#contextMenu {
  background-color: #fff;
  z-index: 9999999999999 !important;
  position: fixed;
}

#contextMenu:not(.open) {
  top: -999px;
  left: -999px;
}

.form-switch.form-switch-md {
  margin-bottom: 0.75rem; /* JUST FOR STYLING PURPOSE */
}

.form-switch.form-switch-md .form-check-input {
  height: 1.25rem;
  width: calc(2rem + 0.5rem);
  border-radius: 3rem;
  margin-top: 0;
}

.control-btn {
  padding: 0 20px 0 10px;
  display: flex;
  align-items: center;
  font-weight: 700;
}

/* ===== Nút phóng to / thu nhỏ giao diện (zoom) — góc phải header-top (nền tím) ===== */
/* Cột phải (badge quality + nút zoom) bị flex-line của nav (cao hơn header) kéo
   lệch xuống ~3px. Tách khỏi flex flow, định vị tuyệt đối canh giữa dọc theo
   .row (= chiều cao header), không phụ thuộc chiều cao nav nữa. */
.header-top > .row {
  position: relative;
}
.header-top > .row > .col-4:last-child {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: auto;
  height: auto;
  align-items: center !important;
}

/* ===== Zoom CHỈ bảng AG-Grid (header cột + body) =====
   Nút +/- đặt --fiox-zoom trên :root (scripts.js). Zoom .ag-root-wrapper (gồm
   .ag-header cột + .ag-body rows) → phóng to/thu nhỏ riêng bảng; header trang,
   toolbar, panel Chức năng, footer GIỮ NGUYÊN.
   KHÔNG bù width/height: CSS `zoom` đã tự scale phần trăm — width/height:100%
   của wrapper (AG-Grid set) trong vùng zoom đã tham chiếu kích-thước-cha/zoom,
   render ×zoom là vừa khít container; thêm /zoom nữa sẽ thành 1/zoom² → chừa nền.
   AG-Grid tự cuộn nội bộ khi phóng to. Mặc định 1 → 100% như cũ. */
.ag-root-wrapper {
  zoom: var(--fiox-zoom, 1);
}
/* Cụm zoom thu gọn: chỉ 1 icon kính lúp; bấm mới xổ popover stepper − % + */
.fiox-zoom-ctrl {
  position: relative;
  display: flex;
  align-items: center;
  align-self: center;
  margin-left: 8px;
  flex-shrink: 0;
}
/* Nút icon kính lúp — glass giống nút Sáng/Tối + chuông */
.fiox-zoom-toggle {
  position: relative;
  height: 28px;
  width: 28px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.fiox-zoom-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}
.fiox-zoom-ctrl.open .fiox-zoom-toggle {
  background: rgba(255, 255, 255, 0.28);
}
/* Chấm vàng báo bảng đang khác 100% (khi popover đóng) */
.fiox-zoom-ctrl.is-zoomed .fiox-zoom-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd43b;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15);
}
/* Popover xổ xuống dưới — theo theme: Sáng = nền trắng chữ tối, Tối = nền tối chữ trắng */
.fiox-zoom-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: none;
  align-items: stretch;
  height: 32px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  z-index: 1035;
}
.fiox-zoom-ctrl.open .fiox-zoom-pop {
  display: flex;
}
/* Stepper trong popover (đè màu trắng gốc của header) — chế độ Sáng */
.fiox-zoom-pop .fiox-zoom-btn {
  color: #3a4256;
}
.fiox-zoom-pop .fiox-zoom-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
.fiox-zoom-pop .fiox-zoom-val {
  color: #1b2030;
  border-color: rgba(0, 0, 0, 0.1);
}
/* Chế độ Tối — popover tối, chữ sáng */
[data-bs-theme="dark"] .fiox-zoom-pop {
  background: #2b3346;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
[data-bs-theme="dark"] .fiox-zoom-pop .fiox-zoom-btn {
  color: #fff;
}
[data-bs-theme="dark"] .fiox-zoom-pop .fiox-zoom-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
[data-bs-theme="dark"] .fiox-zoom-pop .fiox-zoom-val {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}

/* [THỬ] Avatar tài khoản ở góc phải header — vòng + chấm đổi màu theo trạng thái acc.
   Thêm mới cạnh nút zoom/chuông; KHÔNG thay #userInfo cũ ở toolbar. Màu do JS set
   qua biến --asa-color (đọc từ badge trạng thái). */
.acc-status-avatar {
  --asa-color: #9ca3af;
  --asa-glow: rgba(156, 163, 175, 0.9);
  position: relative;
  z-index: 2;
  width: 31px;
  height: 31px;
  padding: 2.5px;
  margin-left: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--asa-color);
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.25),
    0 0 5px 1px var(--asa-glow);
  transition: filter 0.15s;
}
.acc-status-avatar:hover {
  filter: brightness(1.06);
}
.acc-status-avatar .asa-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-sizing: border-box;
  background: #fff;
}
.acc-status-avatar .asa-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--asa-color);
  border: 2px solid #fff;
}
/* Hiệu ứng "throb": avatar phồng nhẹ + quầng sáng màu trạng thái tỏa ra rồi dịu.
   Không dùng vòng sonar to vì header 38px + body overflow:hidden sẽ cắt mất. */
@keyframes asa-throb {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.25),
      0 0 5px 1px var(--asa-glow);
  }
  50% {
    transform: scale(1.13);
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.25),
      0 0 14px 5px var(--asa-glow);
  }
}
@media (prefers-reduced-motion: reduce) {
  .acc-status-avatar {
    animation: none;
  }
}
/* Viên Tên + UID (2 dòng) dính bên TRÁI avatar — khách dễ nhận biết tài khoản. Bấm = copy UID. */
.acc-id-pill {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0;
  cursor: pointer;
  align-self: center;
  height: 31px;
  margin-left: -16px;
  padding: 2px 14px 2px 29px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 0 15.5px 15.5px 0;
  color: #fff;
  line-height: 1.2;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: background 0.15s;
}
.acc-id-pill:hover {
  background: rgba(255, 255, 255, 0.26);
}
.acc-id-pill .aip-name {
  font-size: 11.5px;
  font-weight: 700;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-id-pill .aip-uid {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}
/* Cụm tài khoản 350px cũ ở toolbar ĐÃ THAY bằng avatar góc phải header (#accStatusAvatar).
   ẨN — KHÔNG xoá: avatar mới vẫn đọc ảnh + trạng thái và mở dropdown (#avatarArea/#userDropdownPopup) từ đây. */
#userInfo {
  display: none !important;
}
/* Badge chất lượng ở header ĐÃ ẨN — link business-support đã chuyển vào menu tài khoản
   (#userDropdownPopup, chèn bởi scripts.js). Giữ trong DOM để đọc href/uid. */
#quality {
  display: none !important;
}
/* Badge trạng thái trong #userDropdownPopup (giờ là link business-support) — thêm chấm
   pulse trắng ở trước cho giống badge cũ ở header (.nh-quality .badge::before). */
#userDropdownPopup .badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
#userDropdownPopup .badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  animation: nh-pulse-w 2.4s ease-in-out infinite;
}

/* ===== Redesign #userDropdownPopup: bìa (cover) + avatar tràn một nửa + vòng màu
   theo chất lượng tài khoản. Chỉ CSS override cấu trúc libs render + JS set --dd-ring. ===== */
#userDropdownPopup {
  width: 288px !important;
  border-radius: 18px !important;
  --dd-bg: #ffffff;
  --dd-ink: #1b2030;
  --dd-muted: #8b93a6;
  --dd-ring: #9ca3af;
  --dd-ring-soft: rgba(156, 163, 175, 0.3);
}
/* Nền tối: cả khối vẽ từ 3 biến này (nền bìa, viền avatar, chữ tên + UID) nên khai lại
   đúng ba biến là đủ. --dd-ring giữ nguyên vì nó do JS đặt theo chất lượng tài khoản. */
[data-bs-theme="dark"] #userDropdownPopup {
  --dd-bg: #232e3d;
  --dd-ink: #e2e8f0;
  --dd-muted: #94a3b8;
}
/* Header block → dải bìa gradient (cao 84px) + nền trắng phía dưới */
#userDropdownPopup > div:nth-of-type(1) {
  background:
    radial-gradient(
        circle at 82% 24%,
        rgba(255, 255, 255, 0.22),
        transparent 26%
      )
      top / 100% 84px no-repeat,
    radial-gradient(circle at 14% 16%, #a78bfa, transparent 44%) top / 100% 84px
      no-repeat,
    radial-gradient(circle at 94% 86%, #7c3aed, transparent 46%) top / 100% 84px
      no-repeat,
    radial-gradient(circle at 46% 122%, #4c1d95, transparent 56%) top / 100%
      84px no-repeat,
    linear-gradient(135deg, #8b5cf6, #6b4ce6) top / 100% 84px no-repeat,
    var(--dd-bg) !important;
  padding: 44px 18px 14px !important;
}
/* Avatar → vòng màu chất lượng + quầng nhịp, tràn xuống chồng mép bìa */
#userDropdownPopup > div:nth-of-type(1) > div:nth-of-type(1) {
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 5px !important;
  padding: 4px !important;
  background: var(--dd-ring) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.22),
    0 0 0 4px var(--dd-ring-soft) !important;
  animation: dd-ring-pulse 2.2s ease-in-out infinite;
}
#userDropdownPopup > div:nth-of-type(1) > div:nth-of-type(1) > img {
  border: 3px solid var(--dd-bg) !important;
}
@keyframes dd-ring-pulse {
  0%,
  100% {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.22),
      0 0 0 3px var(--dd-ring-soft);
  }
  50% {
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.22),
      0 0 0 8px transparent;
  }
}
/* Tên + UID rơi xuống nền trắng → đổi chữ sang màu tối (đè màu trắng gốc) */
#userDropdownPopup > div:nth-of-type(1) > div:nth-of-type(2) {
  color: var(--dd-ink) !important;
  font-size: 16px !important;
  margin-top: 8px !important;
}
#userDropdownPopup > div:nth-of-type(1) > div:nth-of-type(3) {
  color: var(--dd-muted) !important;
}
@media (prefers-reduced-motion: reduce) {
  #userDropdownPopup > div:nth-of-type(1) > div:nth-of-type(1) {
    animation: none;
  }
}

/* ===== Card "Đăng bài lên Page" — compose UI (tinh gọn) ===== */
[data-feature="page-dang-bai"] .db-wrap {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
/* ---- Khung soạn kiểu Facebook "Tạo bài viết" — copy NGUYÊN .gmw-editor .gmw-fb-* của quan-ly-nhom
   (group.css 123-171, 208, 213-225), đổi bộ chọn sang card. Phần Trang có mà Nhóm không có: ô ảnh
   đại diện dự phòng, nút Video, ô video trong lưới và nhãn Thước phim. ---- */
[data-feature="page-dang-bai"] .gmw-fb-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
[data-feature="page-dang-bai"] .gmw-fb-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e5e7eb;
}
[data-feature="page-dang-bai"] .gmw-fb-avnone {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #65676b;
  font-size: 20px;
}
[data-feature="page-dang-bai"] .gmw-fb-hdmeta {
  min-width: 0;
}
[data-feature="page-dang-bai"] .gmw-fb-nm {
  font-weight: 600;
  font-size: 15px;
  color: #1c1e21;
  line-height: 1.2;
}
[data-feature="page-dang-bai"] .gmw-fb-pgmore:not(:empty) {
  margin-left: 5px;
  color: #65676b;
}
[data-feature="page-dang-bai"] .gmw-fb-priv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #65676b;
  background: #e4e6eb;
  border-radius: 6px;
  padding: 2px 8px;
  margin-top: 3px;
}
/* Khối soạn: ô chữ + ảnh/video + hàng công cụ chung 1 khung */
[data-feature="page-dang-bai"] .gmw-fb-box {
  border: 1px solid #dddfe2;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #fff;
}
[data-feature="page-dang-bai"] .gmw-fb-ed {
  transition: background 0.15s;
}
/* Ô chữ TỰ GIÃN theo nội dung (autoGrowMsg); sàn chiều cao do thuộc tính rows quyết định, không đặt min-height */
[data-feature="page-dang-bai"] .gmw-fb-ed .gmw-msg {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  resize: none;
  overflow: hidden;
  background: transparent;
  font-size: 19px;
  line-height: 1.45;
  color: #1c1e21;
  min-height: 0;
  padding: 14px;
  font-family: inherit;
  display: block;
}
[data-feature="page-dang-bai"] .gmw-fb-ed .gmw-msg::placeholder {
  color: #65676b;
}
/* Bấm vào ô chữ KHÔNG vẽ thêm viền/vòng sáng — trong khung chỉ còn 1 đường kẻ của hàng công cụ */
[data-feature="page-dang-bai"] .gmw-fb-ed .gmw-msg:focus {
  border: 0;
  box-shadow: none;
}
[data-feature="page-dang-bai"] .gmw-fb-ed.hasbg {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
[data-feature="page-dang-bai"] .gmw-fb-ed.hasbg .gmw-msg {
  min-height: auto;
  padding: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: inherit;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
[data-feature="page-dang-bai"] .gmw-fb-ed.hasbg .gmw-msg::placeholder {
  color: rgba(255, 255, 255, 0.85);
}
[data-feature="page-dang-bai"] .gmw-fb-media {
  margin: 0 14px 10px;
}
/* Chưa có tệp thì dải ảnh KHÔNG chiếm chỗ — tránh hở 10px giữa ô chữ và đường kẻ */
[data-feature="page-dang-bai"] .gmw-fb-media:empty {
  display: none;
}
/* Lưới ảnh thông minh kiểu Facebook: bố cục đổi theo SỐ ô, tối đa 5 */
[data-feature="page-dang-bai"] .gmw-fb-mwrap {
  border: 1px solid #dddfe2;
  border-radius: 10px;
  padding: 8px;
}
[data-feature="page-dang-bai"] .gmw-fb-grid {
  display: grid;
  gap: 2px;
  border-radius: 8px;
  overflow: hidden;
  background: #dddfe2;
}
[data-feature="page-dang-bai"] .gmw-fb-tile {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="1"] {
  grid-template-columns: 1fr;
}
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="1"] .gmw-fb-tile {
  aspect-ratio: 3 / 2;
}
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="2"],
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="4"] {
  grid-template-columns: 1fr 1fr;
}
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="3"] {
  grid-template-columns: 1fr 1fr;
}
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="3"] .gmw-fb-tile:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
}
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="5"] {
  grid-template-columns: repeat(6, 1fr);
}
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="5"] .gmw-fb-tile:nth-child(-n + 2) {
  grid-column: span 3;
  aspect-ratio: 3 / 2;
}
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="5"] .gmw-fb-tile:nth-child(n + 3) {
  grid-column: span 2;
}
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="2"] .gmw-fb-tile,
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="3"] .gmw-fb-tile:nth-child(n + 2),
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="4"] .gmw-fb-tile,
[data-feature="page-dang-bai"] .gmw-fb-grid[data-n="5"] .gmw-fb-tile:nth-child(n + 3) {
  aspect-ratio: 1 / 1;
}
/* Thước phim (đúng 1 video, không ảnh): khung DỌC 9:16 nằm giữa như FB, thay khung ngang 3:2 của 1 ảnh.
   Phải đứng SAU các luật [data-n] vì cùng độ ưu tiên. */
[data-feature="page-dang-bai"] .gmw-fb-grid[data-reel] {
  grid-template-columns: min(100%, 240px);
  justify-content: center;
  background: transparent;
}
[data-feature="page-dang-bai"] .gmw-fb-grid[data-reel] .gmw-fb-tile {
  aspect-ratio: 9 / 16;
  border-radius: 8px;
}
[data-feature="page-dang-bai"] .gmw-fb-tile.vid {
  background-color: #0f172a;
  overflow: hidden;
}
[data-feature="page-dang-bai"] .gmw-fb-tile.vid video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-feature="page-dang-bai"] .gmw-fb-tile .db-mplay {
  font-size: 34px;
}
[data-feature="page-dang-bai"] .gmw-fb-reel {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}
/* Ô cuối khi còn tệp chưa hiện: phủ đen mờ + số còn lại */
[data-feature="page-dang-bai"] .gmw-fb-more {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Thanh nút trên lưới — hai đầu, gọn để vừa cột soạn hẹp */
[data-feature="page-dang-bai"] .gmw-fb-mtools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
[data-feature="page-dang-bai"] .gmw-fb-mbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  background: #f0f2f5;
  color: #1c1e21;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  min-width: 0;
  transition: background 0.15s;
}
[data-feature="page-dang-bai"] .gmw-fb-mbtn i {
  font-size: 14px;
  flex-shrink: 0;
}
[data-feature="page-dang-bai"] .gmw-fb-mbtn:hover {
  background: #e4e6eb;
}
[data-feature="page-dang-bai"] .gmw-fb-mclear {
  color: #dc2626;
}
[data-feature="page-dang-bai"] .gmw-fb-mclear:hover {
  background: #fef2f2;
}
[data-feature="page-dang-bai"] .gmw-swwrap {
  margin-bottom: 12px;
}
/* Hàng công cụ nằm TRONG khung, ngăn bằng đường kẻ trên */
[data-feature="page-dang-bai"] .gmw-fb-add {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #dddfe2;
  padding: 9px 12px;
}
[data-feature="page-dang-bai"] .gmw-fb-addlbl {
  font-size: 14px;
  font-weight: 600;
  color: #1c1e21;
}
[data-feature="page-dang-bai"] .gmw-fb-addic {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Aa, Ảnh, Video cùng cỡ, cùng bo góc — nhìn là một bộ */
[data-feature="page-dang-bai"] .gmw-fb-addbtn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 21px;
  border: 0;
  flex-shrink: 0;
  margin: 0;
  transition:
    filter 0.15s,
    background 0.15s;
}
[data-feature="page-dang-bai"] .gmw-aa-btn {
  background: linear-gradient(135deg, #f09433, #dc2743 50%, #bc1888);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
[data-feature="page-dang-bai"] .gmw-aa-btn:hover {
  filter: brightness(1.06);
}
[data-feature="page-dang-bai"] .gmw-aa-btn.on {
  box-shadow:
    inset 0 0 0 2px #fff,
    0 0 0 2px #1877f2;
}
[data-feature="page-dang-bai"] .gmw-add-photo {
  background: #e3f5e8;
  color: #36a852;
}
[data-feature="page-dang-bai"] .gmw-add-photo:hover {
  background: #d5efdc;
}
[data-feature="page-dang-bai"] .gmw-add-video {
  background: #fde7ea;
  color: #e41e3f;
}
[data-feature="page-dang-bai"] .gmw-add-video:hover {
  background: #fbd5da;
}
/* Không dùng pointer-events:none — nuốt luôn cả tooltip "Bỏ nền để thêm …" lẫn con trỏ báo khoá.
   Là <span> không chứa input và không handler nào khớp → bấm vẫn vô hại. */
[data-feature="page-dang-bai"] .gmw-add-photo.disabled,
[data-feature="page-dang-bai"] .gmw-add-video.disabled {
  background: #f0f2f5;
  color: #bcc0c4;
  cursor: not-allowed;
}
[data-feature="page-dang-bai"] .db-in {
  font-size: 12.5px;
  border-radius: 10px;
}
[data-feature="page-dang-bai"] .db-in:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
/* Ô dán link + nút Tải lên gộp liền 1 khối (input-group) */
[data-feature="page-dang-bai"] .db-io {
  display: flex;
  align-items: stretch;
  border: 1px solid #dfe3ec;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
[data-feature="page-dang-bai"] .db-io:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
[data-feature="page-dang-bai"] .db-io .db-in {
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  padding: 8px 11px;
  resize: none;
}
[data-feature="page-dang-bai"] .db-io .db-fbtn {
  align-self: stretch;
  flex: none;
  border: 0;
  border-left: 1px solid #dfe3ec;
  border-radius: 0;
  margin: 0;
  padding: 0 14px;
  background: transparent;
  color: #6d28d9;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
[data-feature="page-dang-bai"] .db-io .db-fbtn:hover {
  background: #f1ebff;
}
[data-feature="page-dang-bai"] .db-io .db-fbtn i {
  font-size: 15px;
}
/* Tên file đã chọn: chip tím có ✓, tự ẩn khi rỗng */
[data-feature="page-dang-bai"] .db-fname {
  display: none;
}
[data-feature="page-dang-bai"] .db-fname:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  max-width: 100%;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: #f1ebff;
  color: #6d28d9;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-feature="page-dang-bai"] .db-fname:not(:empty)::before {
  content: "✓";
  font-size: 10px;
  font-weight: 700;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #8b5cf6;
  color: #fff;
}
[data-feature="page-dang-bai"] .db-bgprev {
  min-height: 72px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 12px;
  line-height: 1.35;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, #f5576c, #f093fb);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.16);
}
/* Dải nền chữ — copy NGUYÊN .gmw-editor .db-sw* của quan-ly-nhom (group.css 277-294):
   ô vuông bo góc lớn, nút ▦ xám mở lưới đầy đủ, chọn = viền xanh, không nút ◄ ► */
[data-feature="page-dang-bai"] .db-swswrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* padding 6px: chừa chỗ cho viền chọn phồng ra 4px — overflow-x:auto cắt cả chiều dọc ở mép padding */
[data-feature="page-dang-bai"] .db-sws {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 4px;
  flex: 1;
  min-width: 0;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
[data-feature="page-dang-bai"] .db-sws::-webkit-scrollbar {
  display: none;
}
[data-feature="page-dang-bai"] .db-swnav {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 0;
  background: #e4e6eb;
  color: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.15s;
}
[data-feature="page-dang-bai"] .db-swnav:hover:not(:disabled) {
  background: #d8dadf;
}
[data-feature="page-dang-bai"] .db-swnav:disabled {
  opacity: 0.4;
  cursor: default;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-swnav {
  background: #3a3b3c;
  color: #e4e6eb;
}
[data-bs-theme="dark"]
  [data-feature="page-dang-bai"]
  .db-swnav:hover:not(:disabled) {
  background: #4e4f50;
}
[data-feature="page-dang-bai"] .db-swexpand i {
  font-size: 20px;
}
[data-feature="page-dang-bai"] .db-swx {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  cursor: pointer;
  flex: none;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  background-size: cover;
  background-position: center;
}
[data-feature="page-dang-bai"] .db-swx.on {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #1877f2;
}
[data-feature="page-dang-bai"] .db-bgload {
  font-size: 12px;
  color: #9099a9;
  padding: 6px 2px;
  align-self: center;
}
[data-feature="page-dang-bai"] .db-bgerr {
  color: #ef4444;
  cursor: pointer;
  text-decoration: underline;
}
[data-feature="page-dang-bai"] .db-soon {
  font-size: 11px;
  color: #9099a9;
  display: flex;
  align-items: center;
  gap: 5px;
}
[data-feature="page-dang-bai"] .db-soon i {
  color: #7c3aed;
}
[data-feature="page-dang-bai"] .db-seg {
  display: flex;
  gap: 3px;
  background: #f2f3f8;
  border-radius: 10px;
  padding: 3px;
}
[data-feature="page-dang-bai"] .db-sg {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7488;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
[data-feature="page-dang-bai"] .db-sg i {
  font-size: 14px;
}
[data-feature="page-dang-bai"] .db-sg.active {
  background: #7c3aed;
  color: #fff;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.26);
}
[data-feature="page-dang-bai"] .db-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #9099a9;
}
[data-feature="page-dang-bai"] .db-foot i {
  color: #7c3aed;
}
[data-feature="page-dang-bai"] .db-foot b {
  color: #161a24;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-seg {
  background: rgba(255, 255, 255, 0.06);
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-sg {
  color: #9aa3b6;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-io {
  border-color: #333c4e;
  background: rgba(255, 255, 255, 0.04);
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-io .db-fbtn {
  border-left-color: #333c4e;
  color: #cbb8ff;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-io .db-fbtn:hover {
  background: rgba(124, 58, 237, 0.2);
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-fname:not(:empty) {
  background: rgba(124, 58, 237, 0.2);
  color: #cbb8ff;
}
[data-bs-theme="dark"]
  [data-feature="page-dang-bai"]
  .db-fname:not(:empty)::before {
  color: #151b28;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-foot {
  color: #657085;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-foot b {
  color: #e9edf6;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-swx.on {
  box-shadow:
    0 0 0 2px #242526,
    0 0 0 4px #2d88ff;
}
/* Đăng bài — khung soạn kiểu Facebook, chế độ tối (copy group.css 197-203, 255-267) */
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-nm {
  color: #e4e6eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-priv,
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-avnone {
  background: #3a3b3c;
  color: #b0b3b8;
}
/* ⚠ Phải trừ .hasbg: cùng độ ưu tiên với `.gmw-fb-ed.hasbg .gmw-msg{color:inherit}` mà nằm sau nên thắng
   → ô có nền mất màu chữ của preset, nền sáng thì chữ gần như tàng hình. */
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-ed:not(.hasbg) .gmw-msg {
  color: #e4e6eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-ed:not(.hasbg) .gmw-msg::placeholder {
  color: #b0b3b8;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-box {
  border-color: #3a3b3c;
  background: #242526;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-add {
  border-top-color: #3a3b3c;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-addlbl {
  color: #e4e6eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-add-photo {
  background: rgba(54, 168, 82, 0.2);
  color: #5fd07d;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-add-photo:hover {
  background: rgba(54, 168, 82, 0.3);
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-add-video {
  background: rgba(228, 30, 63, 0.2);
  color: #ff6b81;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-add-video:hover {
  background: rgba(228, 30, 63, 0.3);
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-add-photo.disabled,
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-add-video.disabled {
  background: #3a3b3c;
  color: #6b6e70;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-aa-btn.on {
  box-shadow:
    inset 0 0 0 2px #242526,
    0 0 0 2px #2d88ff;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-mwrap {
  border-color: #3a3b3c;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-grid {
  background: #3a3b3c;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-grid[data-reel] {
  background: transparent;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-tile {
  background-color: #3a3b3c;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-mbtn {
  background: #3a3b3c;
  color: #e4e6eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-mbtn:hover {
  background: #4e4f50;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-mclear {
  color: #f87171;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .gmw-fb-mclear:hover {
  background: rgba(220, 38, 38, 0.18);
}
[data-feature="page-dang-bai"] .db-swx-none {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
  color: #65676b;
  box-shadow: inset 0 0 0 1px #e4e6eb;
}
[data-feature="page-dang-bai"] .db-swx-none i {
  font-size: 22px;
}
[data-feature="page-dang-bai"] .db-bgprev.plain {
  background: #f8fafc !important;
  color: #64748b !important;
  box-shadow: inset 0 0 0 1px #eef2f7;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-swx-none {
  background: #3a3b3c;
  color: #b0b3b8;
  box-shadow: inset 0 0 0 1px #4e4f50;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-bgprev.plain {
  background: #1e2530 !important;
  color: #94a3b8 !important;
  box-shadow: inset 0 0 0 1px #2e3947;
}
/* Popup lưới đầy đủ "Chọn phông nền" — copy .gmw-bgmodal của quan-ly-nhom (group.css 227-242).
   Gắn thẳng <body> nên KHÔNG scope [data-feature]; z-index cùng tầng hộp thoại của workspace (3400). */
.db-bgmodal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3400;
}
.db-bgmodal-card {
  background: #fff;
  border-radius: 14px;
  width: min(600px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}
.db-bgmodal-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e4e6eb;
  font-weight: 700;
  font-size: 18px;
  color: #1c1e21;
  flex-shrink: 0;
}
.db-bgmodal-x {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #e4e6eb;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #1c1e21;
}
.db-bgmodal-x:hover {
  background: #d8dadf;
}
.db-bgmodal-scroll {
  overflow: auto;
  padding-bottom: 8px;
}
.db-bgmodal-ttl {
  flex: 1;
  min-width: 0;
}
/* "Không nền" nằm trên đầu popup, tách khỏi 3 mục nền */
.db-bgnone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid #dddfe2;
  background: #fff;
  color: #1c1e21;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.db-bgnone i {
  font-size: 15px;
}
.db-bgnone:hover {
  background: #f0f2f5;
}
.db-bgnone.on {
  border-color: #1877f2;
  background: #e7f0ff;
  color: #1877f2;
}
/* 3 mục tách bạch: tiêu đề đậm kèm số lượng, vạch ngăn giữa các mục */
.db-bgsec + .db-bgsec {
  border-top: 1px solid #e4e6eb;
}
.db-bgmodal-sec {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 6px;
  font-weight: 700;
  color: #1c1e21;
  font-size: 15px;
}
.db-bgsec-n {
  font-size: 12px;
  font-weight: 600;
  color: #65676b;
  background: #f0f2f5;
  border-radius: 999px;
  padding: 1px 8px;
}
.db-bgmodal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 6px 16px 14px;
}
.db-bgcell {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #65676b;
  font-size: 22px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.db-bgcell.on {
  border-color: #1877f2;
}
[data-bs-theme="dark"] .db-bgmodal-card {
  background: #242526;
}
[data-bs-theme="dark"] .db-bgmodal-hd {
  color: #e4e6eb;
  border-color: #3a3b3c;
}
[data-bs-theme="dark"] .db-bgmodal-x {
  background: #3a3b3c;
  color: #e4e6eb;
}
[data-bs-theme="dark"] .db-bgnone {
  background: #3a3b3c;
  border-color: #4e4f50;
  color: #e4e6eb;
}
[data-bs-theme="dark"] .db-bgnone:hover {
  background: #4e4f50;
}
[data-bs-theme="dark"] .db-bgnone.on {
  background: rgba(24, 119, 242, 0.2);
  border-color: #2d88ff;
  color: #6bb0ff;
}
[data-bs-theme="dark"] .db-bgsec + .db-bgsec {
  border-top-color: #3a3b3c;
}
[data-bs-theme="dark"] .db-bgmodal-sec {
  color: #e4e6eb;
}
[data-bs-theme="dark"] .db-bgsec-n {
  background: #3a3b3c;
  color: #b0b3b8;
}
/* Hộp thoại "Chỉnh sửa tất cả" — copy .gmw-edall-* của quan-ly-nhom (group.css 173-195, tối 204-207).
   Gắn thẳng <body> (dùng lại vỏ .db-bgmodal) nên KHÔNG scope [data-feature] — mọi rule .db-m* của card
   không với tới, phải khai đủ ở đây. Thêm so với Nhóm: hàng video (tên tệp thay ô văn bản thay thế) và
   nền hàng ở chế độ tối (bên Nhóm hàng vẫn trắng trên hộp tối). */
.db-edall-card {
  width: min(680px, 94vw);
}
.db-edall-hd {
  align-items: flex-start;
}
.db-edall-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #e7f0ff;
  color: #1877f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.db-edall-ttl {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.db-edall-ttl small {
  font-size: 13px;
  font-weight: 400;
  color: #65676b;
}
.db-edall-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}
.db-edall-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fff;
}
.db-edall-row .db-mgrip {
  flex-shrink: 0;
  cursor: grab;
  color: #cbd5e1;
  font-size: 18px;
  line-height: 1;
  padding-top: 24px;
}
.db-edall-row .db-mgrip:active {
  cursor: grabbing;
}
.db-edall-row .db-mthumb {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 66px;
  height: 66px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: #f1f5f9;
}
.db-edall-row .db-mvid {
  background-color: #0f172a;
}
.db-edall-row .db-mvid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.db-edall-row .db-mplay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 22px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.db-edall-txt {
  flex: 1;
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 13.5px;
  line-height: 1.5;
  font-family: inherit;
  color: #334155;
  resize: vertical;
  box-sizing: border-box;
  background: #fff;
}
.db-edall-txt:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.db-edall-vname {
  flex: 1;
  min-width: 0;
  align-self: center;
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-edall-row .db-mdel {
  flex-shrink: 0;
  margin-top: 19px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.db-edall-row .db-mdel:hover {
  background: #fef2f2;
  color: #dc2626;
}
/* Bản "ma" lúc kéo — Sortable chạy forceFallback nên bản sao gắn ở body */
.db-edall-row.sortable-ghost {
  opacity: 0.35;
}
.db-edall-ft {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid #e4e6eb;
  flex-shrink: 0;
}
.db-edall-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: #1877f2;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 22px;
  cursor: pointer;
}
.db-edall-done i {
  font-size: 17px;
}
.db-edall-done:hover {
  background: #166fe5;
}
[data-bs-theme="dark"] .db-edall-ic {
  background: rgba(24, 119, 242, 0.22);
  color: #6bb0ff;
}
[data-bs-theme="dark"] .db-edall-ttl small {
  color: #b0b3b8;
}
[data-bs-theme="dark"] .db-edall-row {
  background: #2d2e2f;
  border-color: #3a3b3c;
}
[data-bs-theme="dark"] .db-edall-row .db-mthumb:not(.db-mvid) {
  background-color: #3a3b3c;
}
[data-bs-theme="dark"] .db-edall-vname {
  color: #e4e6eb;
}
[data-bs-theme="dark"] .db-edall-txt {
  background: #3a3b3c;
  border-color: #4e4f50;
  color: #e4e6eb;
}
[data-bs-theme="dark"] .db-edall-ft {
  border-top-color: #3a3b3c;
}
[data-feature="page-dang-bai"] .db-adv-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #94a3b8;
  margin-top: 4px;
}
[data-feature="page-dang-bai"] .db-adv {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
[data-feature="page-dang-bai"] .db-adv-rest {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
[data-feature="page-dang-bai"] .db-arow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fff;
}
[data-feature="page-dang-bai"] .db-ac {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
[data-feature="page-dang-bai"] .db-ac-sky {
  background: #e0f2fe;
  color: #0284c7;
}
[data-feature="page-dang-bai"] .db-ac-pink {
  background: #fce7f3;
  color: #db2777;
}
[data-feature="page-dang-bai"] .db-ac-green {
  background: #dcfce7;
  color: #16a34a;
}
[data-feature="page-dang-bai"] .db-ac-violet {
  background: #ede9fe;
  color: #7c3aed;
}
[data-feature="page-dang-bai"] .db-ac-indigo {
  background: #e0e7ff;
  color: #4f46e5;
}
[data-feature="page-dang-bai"] .db-at {
  flex: 1;
  min-width: 0;
}
[data-feature="page-dang-bai"] .db-at b {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  display: block;
}
[data-feature="page-dang-bai"] .db-at small {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.4;
}
[data-feature="page-dang-bai"] .db-sw2 {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
[data-feature="page-dang-bai"] .db-sw2 input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
[data-feature="page-dang-bai"] .db-sw2 span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.16s;
}
[data-feature="page-dang-bai"] .db-sw2 span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: left 0.16s;
}
[data-feature="page-dang-bai"] .db-sw2 input:checked + span {
  background: #7c3aed;
}
[data-feature="page-dang-bai"] .db-sw2 input:checked + span::after {
  left: 21px;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-arow {
  background: #1e2530;
  border-color: #2e3947;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-at b {
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-sw2 span {
  background: #3a4658;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-ac-sky {
  background: rgba(2, 132, 199, 0.22);
  color: #38bdf8;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-ac-pink {
  background: rgba(219, 39, 119, 0.22);
  color: #f472b6;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-ac-green {
  background: rgba(22, 163, 74, 0.22);
  color: #4ade80;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-ac-violet {
  background: rgba(124, 58, 237, 0.26);
  color: #a78bfa;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-ac-indigo {
  background: rgba(99, 102, 241, 0.24);
  color: #a5b4fc;
}
/* Đăng lên nhóm: bộ chọn nhóm */
[data-feature="page-dang-bai"] .db-grp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fafbfc;
}
[data-feature="page-dang-bai"] .db-grptop {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
[data-feature="page-dang-bai"] .db-grphint {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  flex: 1;
  min-width: 90px;
}
[data-feature="page-dang-bai"] .db-grpselall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #ddd6fe;
  background: #f5f3ff;
  color: #6d28d9;
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
[data-feature="page-dang-bai"] .db-grpselall:hover {
  background: #ede9fe;
  border-color: #a78bfa;
}
[data-feature="page-dang-bai"] .db-grpselall i {
  font-size: 14px;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-grpselall {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.4);
  color: #c4b5fd;
}
[data-feature="page-dang-bai"] .db-grpreload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #4f46e5;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
[data-feature="page-dang-bai"] .db-grpreload:hover {
  background: #e0e7ff;
}
[data-feature="page-dang-bai"] .db-grpreload i {
  font-size: 14px;
}
[data-feature="page-dang-bai"] .db-grpman {
  display: flex;
  gap: 8px;
}
[data-feature="page-dang-bai"] .db-grpin {
  flex: 1;
  min-width: 0;
  border: 1px solid #dfe3ec;
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 12.5px;
  font-family: inherit;
  background: #fff;
}
[data-feature="page-dang-bai"] .db-grpin:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
[data-feature="page-dang-bai"] .db-grpaddbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #4f46e5;
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
[data-feature="page-dang-bai"] .db-grpaddbtn:hover {
  background: #e0e7ff;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-grpin {
  background: #171d27;
  border-color: #333c4e;
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-grpaddbtn {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}
[data-feature="page-dang-bai"] .db-grplist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
[data-feature="page-dang-bai"] .db-grp-state {
  padding: 14px;
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
}
[data-feature="page-dang-bai"] .db-grp-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid #e6e9f2;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
[data-feature="page-dang-bai"] .db-grp-item.on {
  border-color: #a5b4fc;
  background: #f5f7ff;
}
[data-feature="page-dang-bai"] .db-grp-item input {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: #6366f1;
  cursor: pointer;
  margin: 0;
}
[data-feature="page-dang-bai"] .db-grp-av {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #eef2f7;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-feature="page-dang-bai"] .db-grp-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-feature="page-dang-bai"] .db-grp-noav {
  color: #94a3b8;
  font-size: 15px;
}
[data-feature="page-dang-bai"] .db-grp-nm {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  overflow: hidden;
}
[data-feature="page-dang-bai"] .db-grp-nm small {
  font-weight: 500;
  font-size: 10.5px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes db-grp-rot {
  to {
    transform: rotate(360deg);
  }
}
[data-feature="page-dang-bai"] .db-grp-spin {
  display: inline-block;
  animation: db-grp-rot 0.7s linear infinite;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-grp {
  background: rgba(255, 255, 255, 0.03);
  border-color: #2e3947;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-grp-item {
  background: #171d27;
  border-color: #333c4e;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-grp-item.on {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.5);
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-grp-nm {
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-grp-av {
  background: #2e3947;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-grpreload {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.4);
  color: #a5b4fc;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-grphint {
  color: #94a3b8;
}
[data-feature="page-dang-bai"] .db-medialist {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
/* (0,3,0) — phải thắng margin-top 0 của `.gmw-fb-media` (0,2,0), như bên Nhóm */
[data-feature="page-dang-bai"] .db-medialist.has {
  margin-top: 10px;
}
/* .db-mvid / .db-mplay còn dùng cho ô media trong Bình luận sau khi đăng */
[data-feature="page-dang-bai"] .db-mvid {
  background: #0f172a;
}
[data-feature="page-dang-bai"] .db-mvid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-feature="page-dang-bai"] .db-mplay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 18px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
/* Hẹn giờ — ô chọn giờ có icon */
[data-feature="page-dang-bai"] .db-time {
  position: relative;
}
[data-feature="page-dang-bai"] .db-timebox {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #dfe3ec;
  background: #fff;
  border-radius: 10px;
  padding: 11px 12px;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
[data-feature="page-dang-bai"] .db-timebox:hover {
  border-color: #c4b5fd;
}
[data-feature="page-dang-bai"] .db-timebox.open {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
[data-feature="page-dang-bai"] .db-timebox > i:first-child {
  color: #7c3aed;
  font-size: 17px;
  flex-shrink: 0;
}
[data-feature="page-dang-bai"] .db-timeval {
  flex: 1;
  text-align: left;
  font-size: 13px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-feature="page-dang-bai"] .db-timeval.has {
  color: #334155;
  font-weight: 600;
}
[data-feature="page-dang-bai"] .db-timecaret {
  color: #94a3b8;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
[data-feature="page-dang-bai"] .db-timebox.open .db-timecaret {
  transform: rotate(180deg);
}
[data-feature="page-dang-bai"] .db-dp {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #e6e9f2;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  padding: 12px;
}
[data-feature="page-dang-bai"] .db-dp.d-none {
  display: none;
}
[data-feature="page-dang-bai"] .db-dp-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
[data-feature="page-dang-bai"] .db-dp-my {
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
}
[data-feature="page-dang-bai"] .db-dp-nav {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 0;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}
[data-feature="page-dang-bai"] .db-dp-nav:hover:not(:disabled) {
  background: #ede9fe;
  color: #7c3aed;
}
[data-feature="page-dang-bai"] .db-dp-nav:disabled {
  opacity: 0.3;
  cursor: default;
}
[data-feature="page-dang-bai"] .db-dp-wk {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
[data-feature="page-dang-bai"] .db-dp-wk span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #94a3b8;
  padding: 2px 0;
}
[data-feature="page-dang-bai"] .db-dp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
[data-feature="page-dang-bai"] .db-dp-day {
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-size: 12.5px;
  color: #334155;
  cursor: pointer;
  font-family: inherit;
}
[data-feature="page-dang-bai"] .db-dp-day.empty {
  visibility: hidden;
}
[data-feature="page-dang-bai"] .db-dp-day:hover:not(.past) {
  background: #f1f5f9;
}
[data-feature="page-dang-bai"] .db-dp-day.today {
  color: #7c3aed;
  font-weight: 700;
}
[data-feature="page-dang-bai"] .db-dp-day.sel {
  background: #7c3aed;
  color: #fff;
  font-weight: 700;
}
[data-feature="page-dang-bai"] .db-dp-day.sel:hover {
  background: #6d28d9;
}
[data-feature="page-dang-bai"] .db-dp-day.past {
  color: #cbd5e1;
  cursor: default;
}
[data-feature="page-dang-bai"] .db-dp-tm {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eef2f7;
}
[data-feature="page-dang-bai"] .db-dp-tm > i {
  color: #7c3aed;
  font-size: 16px;
}
[data-feature="page-dang-bai"] .db-dp-tlb {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-right: auto;
}
[data-feature="page-dang-bai"] .db-dp-tm b {
  color: #94a3b8;
}
[data-feature="page-dang-bai"] .db-dp-sel {
  border: 1px solid #dfe3ec;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
}
[data-feature="page-dang-bai"] .db-dp-sel:focus {
  outline: none;
  border-color: #8b5cf6;
}
[data-feature="page-dang-bai"] .db-dp-ft {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
[data-feature="page-dang-bai"] .db-dp-clear {
  border: 1px solid #e6e9f2;
  background: #fff;
  color: #64748b;
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
[data-feature="page-dang-bai"] .db-dp-clear:hover {
  background: #f8fafc;
}
[data-feature="page-dang-bai"] .db-dp-ok {
  margin-left: auto;
  border: 0;
  background: #7c3aed;
  color: #fff;
  border-radius: 9px;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
[data-feature="page-dang-bai"] .db-dp-ok:hover {
  background: #6d28d9;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-timebox {
  background: rgba(255, 255, 255, 0.04);
  border-color: #333c4e;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-timeval.has {
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-dp {
  background: #1a212b;
  border-color: #2e3947;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-dp-my {
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-dp-nav {
  background: #232e3d;
  color: #cbd5e1;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-dp-nav:hover {
  background: rgba(124, 58, 237, 0.28);
  color: #c4b5fd;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-dp-day {
  color: #cbd5e1;
}
[data-bs-theme="dark"]
  [data-feature="page-dang-bai"]
  .db-dp-day:hover:not(.past) {
  background: #232e3d;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-dp-day.past {
  color: #475569;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-dp-tm {
  border-color: #2e3947;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-dp-sel {
  background: #171d27;
  border-color: #333c4e;
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-dp-clear {
  background: #171d27;
  border-color: #333c4e;
  color: #cbd5e1;
}
/* Bình luận sau khi đăng — nhiều bình luận đánh số, delay + upload nhiều + camera từng cái */
[data-feature="page-dang-bai"] .db-cmt,
[data-feature="page-tuong-tac"] .db-cmt {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-feature="page-dang-bai"] .db-cmtopts,
[data-feature="page-tuong-tac"] .db-cmtopts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
[data-feature="page-dang-bai"] .db-cmtfld,
[data-feature="page-tuong-tac"] .db-cmtfld {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
[data-feature="page-dang-bai"] .db-cmtfld > label,
[data-feature="page-tuong-tac"] .db-cmtfld > label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
[data-feature="page-dang-bai"] .db-cmtnum,
[data-feature="page-tuong-tac"] .db-cmtnum {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #dfe3ec;
  background: #fff;
  border-radius: 10px;
  padding: 0 12px;
}
[data-feature="page-dang-bai"] .db-cmtnum:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
[data-feature="page-tuong-tac"] .db-cmtnum:focus-within {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
[data-feature="page-dang-bai"] .db-cmtnum input,
[data-feature="page-tuong-tac"] .db-cmtnum input {
  width: 88px;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 0;
  color: #334155;
  font-family: inherit;
}
[data-feature="page-tuong-tac"] .db-cmtnum input {
  width: 44px;
  text-align: center;
}
[data-feature="page-dang-bai"] .db-cmtnum span,
[data-feature="page-tuong-tac"] .db-cmtnum span {
  font-size: 12px;
  color: #94a3b8;
}
/* Hàng gợi ý + nút upload nhiều ảnh (Seeding) */
[data-feature="page-tuong-tac"] .ptt-cmthint {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}
/* Hàng nút đáy khối bình luận: "Thêm bình luận" trái, "Upload nhiều ảnh" đẩy phải (margin-left:auto sẵn có) */
[data-feature="page-tuong-tac"] .db-cmtbtns {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Ép 2 nút cao bằng nhau (icon Upload 16px vốn làm nút cao hơn) */
[data-feature="page-tuong-tac"] .db-cmtbtns .db-cmtadd,
[data-feature="page-tuong-tac"] .db-cmtbtns .db-cmtbulk {
  box-sizing: border-box;
  height: 42px;
}
/* ===== Nút AI (viết bình luận / nội dung chia sẻ) — nhấn tím "phép thuật" ===== */
[data-feature="page-tuong-tac"] .ptt-airow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e9d5ff;
  background: linear-gradient(135deg, #faf5ff, #eef2ff);
  border-radius: 11px;
}
[data-feature="page-tuong-tac"] .ptt-ai-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #6d28d9;
}
[data-feature="page-tuong-tac"] .ptt-ai-lbl i {
  font-size: 15px;
}
[data-feature="page-tuong-tac"] .ptt-ai-num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  margin-left: auto;
}
[data-feature="page-tuong-tac"] .ptt-ai-count {
  width: 54px;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  background: #fff;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #4c1d95;
  text-align: center;
  outline: none;
}
[data-feature="page-tuong-tac"] .ptt-ai-count:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}
[data-feature="page-tuong-tac"] .ptt-ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  padding: 9px 15px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  box-shadow: 0 4px 12px -4px rgba(99, 102, 241, 0.6);
  transition:
    filter 0.15s,
    transform 0.1s;
}
[data-feature="page-tuong-tac"] .ptt-ai-btn:hover {
  filter: brightness(1.06);
}
[data-feature="page-tuong-tac"] .ptt-ai-btn:active {
  transform: translateY(1px);
}
[data-feature="page-tuong-tac"] .ptt-ai-btn.busy {
  opacity: 0.7;
  pointer-events: none;
}
[data-feature="page-tuong-tac"] .ptt-ai-btn .spin {
  animation: pqm-spin 0.7s linear infinite;
}
[data-feature="page-tuong-tac"] .ptt-ai-msg {
  flex: 1 0 100%;
  font-size: 12px;
  line-height: 1.4;
}
/* Gộp hàng AI + textarea chia sẻ thành 1 khối: hàng AI là header, textarea liền bên dưới, chung 1 viền */
[data-feature="page-tuong-tac"] .ptt-aiwrap {
  border: 1px solid #e9d5ff;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
}
[data-feature="page-tuong-tac"] .ptt-aiwrap .ptt-airow {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #e9d5ff;
}
[data-feature="page-tuong-tac"] .ptt-aiwrap .ptt-cmts {
  border: 0;
  border-radius: 0;
  resize: vertical;
}
[data-feature="page-tuong-tac"] .ptt-aiwrap .ptt-cmts:focus {
  box-shadow: none;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-aiwrap {
  border-color: #3b2f66;
  background: #171d27;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-aiwrap .ptt-airow {
  border-bottom-color: #3b2f66;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-airow {
  border-color: #3b2f66;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(99, 102, 241, 0.12));
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-ai-lbl {
  color: #c4b5fd;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-ai-num {
  color: #94a3b8;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-ai-count {
  background: #171d27;
  border-color: #3b2f66;
  color: #ddd6fe;
}
[data-feature="page-dang-bai"] .db-cmtbulk,
[data-feature="page-tuong-tac"] .db-cmtbulk {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  color: #0284c7;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
[data-feature="page-dang-bai"] .db-cmtbulk:hover,
[data-feature="page-tuong-tac"] .db-cmtbulk:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
}
[data-feature="page-dang-bai"] .db-cmtbulk i,
[data-feature="page-tuong-tac"] .db-cmtbulk i {
  font-size: 16px;
}
[data-feature="page-dang-bai"] .db-cmtlist,
[data-feature="page-tuong-tac"] .db-cmtlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-feature="page-dang-bai"] .db-cmtblock,
[data-feature="page-tuong-tac"] .db-cmtblock {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
[data-feature="page-dang-bai"] .db-cmthd,
[data-feature="page-tuong-tac"] .db-cmthd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-feature="page-dang-bai"] .db-cmtlbl,
[data-feature="page-tuong-tac"] .db-cmtlbl {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}
[data-feature="page-dang-bai"] .db-cmtbody,
[data-feature="page-tuong-tac"] .db-cmtbody {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
[data-feature="page-dang-bai"] .db-cmttawrap,
[data-feature="page-tuong-tac"] .db-cmttawrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
[data-feature="page-dang-bai"] .db-cmtin,
[data-feature="page-tuong-tac"] .db-cmtin {
  width: 100%;
  border: 1px solid #dfe3ec;
  border-radius: 12px;
  padding: 12px 14px 36px;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
  min-height: 84px;
  font-family: inherit;
  background: #fff;
}
[data-feature="page-dang-bai"] .db-cmtin:focus,
[data-feature="page-tuong-tac"] .db-cmtin:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
[data-feature="page-dang-bai"] .db-cmttatools,
[data-feature="page-tuong-tac"] .db-cmttatools {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: flex;
  gap: 2px;
}
[data-feature="page-dang-bai"] .db-cmtcam,
[data-feature="page-tuong-tac"] .db-cmtcam {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 18px;
  cursor: pointer;
}
[data-feature="page-dang-bai"] .db-cmtcam:hover,
[data-feature="page-tuong-tac"] .db-cmtcam:hover {
  background: #f1f5f9;
  color: #7c3aed;
}
[data-feature="page-dang-bai"] .db-cmtdel,
[data-feature="page-tuong-tac"] .db-cmtdel {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 6px;
}
[data-feature="page-dang-bai"] .db-cmtdel:hover,
[data-feature="page-tuong-tac"] .db-cmtdel:hover {
  color: #dc2626;
  background: #fef2f2;
}
[data-feature="page-dang-bai"] .db-cmtmedia,
[data-feature="page-tuong-tac"] .db-cmtmedia {
  position: relative;
  width: 88px;
  flex-shrink: 0;
}
[data-feature="page-dang-bai"] .db-cmtthumb,
[data-feature="page-tuong-tac"] .db-cmtthumb {
  display: block;
  width: 88px;
  height: 100%;
  min-height: 88px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: #f1f5f9;
  position: relative;
  overflow: hidden;
}
[data-feature="page-dang-bai"] .db-cmtthumb video,
[data-feature="page-tuong-tac"] .db-cmtthumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-feature="page-dang-bai"] .db-cmtmdel,
[data-feature="page-tuong-tac"] .db-cmtmdel {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
[data-feature="page-dang-bai"] .db-cmtadd,
[data-feature="page-tuong-tac"] .db-cmtadd {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #16a34a;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
[data-feature="page-dang-bai"] .db-cmtadd:hover,
[data-feature="page-tuong-tac"] .db-cmtadd:hover {
  background: #dcfce7;
  border-color: #86efac;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-cmtfld > label,
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-cmtfld > label {
  color: #94a3b8;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-cmtnum,
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-cmtnum {
  background: #171d27;
  border-color: #333c4e;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-cmtnum input,
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-cmtnum input {
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-cmtlbl,
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-cmtlbl {
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-cmtin,
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-cmtin {
  background: #171d27;
  border-color: #333c4e;
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-cmtbulk,
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-cmtbulk {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.4);
  color: #7dd3fc;
}
[data-bs-theme="dark"] [data-feature="page-dang-bai"] .db-cmtadd,
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-cmtadd {
  background: rgba(22, 163, 74, 0.14);
  border-color: rgba(22, 163, 74, 0.4);
  color: #4ade80;
}

/* ===== page-auto-reply (Tự trả lời bình luận) ===== */
[data-feature="page-auto-reply"] .par-wrap {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
[data-feature="page-auto-reply"] .db-hint {
  font-size: 11px;
  color: #9099a9;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.45;
}
[data-feature="page-auto-reply"] .db-hint i {
  color: #0ea5e9;
  flex: none;
  margin-top: 1px;
}
[data-feature="page-auto-reply"] .par-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-feature="page-auto-reply"] .par-rule {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
[data-feature="page-auto-reply"] .par-rule-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
[data-feature="page-auto-reply"] .par-kw,
[data-feature="page-auto-reply"] .par-reply,
[data-feature="page-auto-reply"] .par-in {
  font-size: 12.5px;
  border-radius: 9px;
}
[data-feature="page-auto-reply"] .par-reply {
  resize: vertical;
  min-height: 40px;
  line-height: 1.45;
}
[data-feature="page-auto-reply"] .par-kw:focus,
[data-feature="page-auto-reply"] .par-reply:focus,
[data-feature="page-auto-reply"] .par-in:focus,
[data-feature="page-auto-reply"] .par-sel:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
[data-feature="page-auto-reply"] .par-del {
  flex: none;
  width: 34px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 9px;
  color: #ef4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    border-color 0.15s;
}
[data-feature="page-auto-reply"] .par-del i {
  font-size: 16px;
}
[data-feature="page-auto-reply"] .par-del:hover {
  background: #fef2f2;
  border-color: #fecaca;
}
[data-feature="page-auto-reply"] .par-add {
  align-self: flex-start;
  border: 1px dashed #cbd5e1;
  background: transparent;
  color: #0284c7;
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
[data-feature="page-auto-reply"] .par-add i {
  font-size: 15px;
}
[data-feature="page-auto-reply"] .par-add:hover {
  background: rgba(14, 165, 233, 0.08);
  border-color: #7dd3fc;
}
[data-feature="page-auto-reply"] .par-opts {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px 11px;
  background: #f6f8fb;
  border-radius: 11px;
}
[data-feature="page-auto-reply"] .par-chk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #374151;
  cursor: pointer;
  margin: 0;
}
[data-feature="page-auto-reply"] .par-chk .form-check-input {
  margin: 0;
  flex: none;
}
[data-feature="page-auto-reply"] .par-int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: #374151;
}
[data-feature="page-auto-reply"] .par-int .par-sel {
  max-width: 132px;
  font-size: 12.5px;
  border-radius: 9px;
}
[data-feature="page-auto-reply"] .db-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #9099a9;
  line-height: 1.4;
}
[data-feature="page-auto-reply"] .db-foot i {
  color: #0ea5e9;
  flex: none;
}
[data-feature="page-auto-reply"] .db-foot b {
  color: #161a24;
}
[data-bs-theme="dark"] [data-feature="page-auto-reply"] .par-del {
  border-color: #333c4e;
  background: rgba(255, 255, 255, 0.04);
}
[data-bs-theme="dark"] [data-feature="page-auto-reply"] .par-del:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
}
[data-bs-theme="dark"] [data-feature="page-auto-reply"] .par-add {
  border-color: #3a4459;
  color: #7dd3fc;
}
[data-bs-theme="dark"] [data-feature="page-auto-reply"] .par-add:hover {
  background: rgba(14, 165, 233, 0.16);
  border-color: rgba(14, 165, 233, 0.5);
}
[data-bs-theme="dark"] [data-feature="page-auto-reply"] .par-opts {
  background: rgba(255, 255, 255, 0.05);
}
[data-bs-theme="dark"] [data-feature="page-auto-reply"] .par-chk,
[data-bs-theme="dark"] [data-feature="page-auto-reply"] .par-int {
  color: #c4ccda;
}
[data-bs-theme="dark"] [data-feature="page-auto-reply"] .db-foot {
  color: #657085;
}
[data-bs-theme="dark"] [data-feature="page-auto-reply"] .db-foot b {
  color: #e9edf6;
}

/* ===== page-seeding (Seeding bình luận) ===== */
[data-feature="page-seeding"] .psd-wrap {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
[data-feature="page-seeding"] .psd-in,
[data-feature="page-seeding"] .psd-cmts {
  font-size: 12.5px;
  border-radius: 10px;
}
[data-feature="page-seeding"] .psd-cmts {
  resize: vertical;
  min-height: 74px;
  line-height: 1.5;
}
[data-feature="page-seeding"] .psd-in:focus,
[data-feature="page-seeding"] .psd-cmts:focus,
[data-feature="page-seeding"] .psd-num:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
[data-feature="page-seeding"] .psd-opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 11px;
  background: #f6f8fb;
  border-radius: 11px;
}
[data-feature="page-seeding"] .psd-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #374151;
  margin: 0;
}
[data-feature="page-seeding"] .psd-num {
  width: 72px;
  font-size: 12.5px;
  border-radius: 9px;
  text-align: center;
}
[data-feature="page-seeding"] .psd-chk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #374151;
  cursor: pointer;
  margin: 0;
}
[data-feature="page-seeding"] .psd-chk .form-check-input {
  margin: 0;
  flex: none;
}
[data-feature="page-seeding"] .db-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #9099a9;
  line-height: 1.4;
}
[data-feature="page-seeding"] .db-foot i {
  color: #f97316;
  flex: none;
}
[data-feature="page-seeding"] .db-foot b {
  color: #161a24;
}
[data-bs-theme="dark"] [data-feature="page-seeding"] .psd-opts {
  background: rgba(255, 255, 255, 0.05);
}
[data-bs-theme="dark"] [data-feature="page-seeding"] .psd-field,
[data-bs-theme="dark"] [data-feature="page-seeding"] .psd-chk {
  color: #c4ccda;
}
[data-bs-theme="dark"] [data-feature="page-seeding"] .db-foot {
  color: #657085;
}
[data-bs-theme="dark"] [data-feature="page-seeding"] .db-foot b {
  color: #e9edf6;
}

/* ===== page-tuong-tac (Seeding bài viết: thả cảm xúc + bình luận + chia sẻ) ===== */
/* Panel cao đầy tới chân trang như .pqm-npg-card & các tab khác (mặc định .pqm-panel đã full height).
   Host lấp đầy thân panel, nút "Thực hiện" ghim đáy; bỏ log (đã có 3 cột trạng thái trên từng Trang).
   Neo .pqm-ws-page để KHÔNG giáng sang /quan-ly-nhom (chỉ trang có tab này). */
.pqm-ws-page :is(.pqm-panel[data-panel="tuong-tac"], .pqm-panel[data-panel="theo-doi"]) .pqm-host {
  min-height: 100%;
}
/* Tab Seeding không có cột phải (sidepv "Danh sách bài") như Đăng bài → khối .pqm-work hụt bên phải.
   Căn GIỮA riêng .pqm-work (giữ nguyên .pqm-nav tại chỗ). Chỉ bó khi màn đủ rộng (max-width) —
   màn hẹp vẫn lấp đầy như thường. Class pqm-tab-tt do switchTab gắn. */
.pqm-ws-page .pqm-main.pqm-tab-tt > .pqm-work {
  max-width: 1016px; /* navpg 270 + panel 720 (= .pqm-host) + inset 26 → panel vừa bằng host, hết dư */
  margin-left: auto;
  margin-right: auto;
}
.pqm-ws-page :is(.pqm-panel[data-panel="tuong-tac"], .pqm-panel[data-panel="theo-doi"]) .pqm-runbar {
  margin-top: auto;
}
.pqm-ws-page .pqm-panel[data-panel="tuong-tac"] .pqm-log {
  display: none;
}
/* ===== Tăng theo dõi (page-theo-doi) — 2 khối: TRÊN cấu hình + Bắt đầu, DƯỚI nhập link + tiến trình.
   Runbar/log mặc định của host ẩn hẳn ở tab này (nút Bắt đầu nằm trong thẻ, tiến trình vẽ riêng). ===== */
.pqm-ws-page .pqm-panel[data-panel="theo-doi"] .pqm-runbar {
  display: none;
}
/* Bảng kết quả 8 cột không vừa 720px của thẻ công cụ thường → nới riêng tab này.
   `pqm-tab-td` do switchTab gắn (chỉ tab theo-doi), khác `pqm-tab-tt` dùng chung với Seeding. */
.pqm-ws-page .pqm-main.pqm-tab-td > .pqm-work {
  max-width: 1320px;
}
.pqm-ws-page .pqm-panel[data-panel="theo-doi"] .pqm-host {
  max-width: none;
}
/* ⚠ PHẢI có: nhiều khối dưới đây đặt display:flex/inline-flex, mà `display` của tác giả THẮNG
   `hidden` của trình duyệt → khối Kết quả, nút Dừng, nút Sửa, dòng "không khớp bộ lọc" sẽ hiện
   sai lúc (đã dính khi dựng thử). Ẩn bằng thuộc tính `hidden` nên phải chặn lại ở đây. */
[data-feature="page-theo-doi"] [hidden] {
  display: none !important;
}
[data-feature="page-theo-doi"] input {
  box-sizing: border-box;
}
[data-feature="page-theo-doi"] .ptd-hic {
  color: #0ea5e9;
}
[data-feature="page-theo-doi"] .ptd-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* --- Khối (① Đối tượng · ② Cấu hình · ③ Kết quả): đầu khối 1 hàng, thân thu gọn được --- */
[data-feature="page-theo-doi"] .ptd-sec {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 12px;
  border-top: 1px solid #eef2f7;
}
[data-feature="page-theo-doi"] .ptd-sec:first-child {
  padding-top: 0;
  border-top: 0;
}
[data-feature="page-theo-doi"] .ptd-sh {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 26px;
}
[data-feature="page-theo-doi"] .ptd-sp {
  flex: 1;
}
[data-feature="page-theo-doi"] .ptd-lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}
[data-feature="page-theo-doi"] .ptd-lbl i {
  color: #0ea5e9;
  font-size: 14px;
}
[data-feature="page-theo-doi"] .ptd-cnt,
[data-feature="page-theo-doi"] .ptd-est {
  font-size: 11.5px;
  color: #94a3b8;
  white-space: nowrap;
}
[data-feature="page-theo-doi"] .ptd-cnt b,
[data-feature="page-theo-doi"] .ptd-est b {
  color: #475569;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Tóm tắt khi khối thu gọn: chip xám, KHÔNG màu */
[data-feature="page-theo-doi"] .ptd-sum {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
[data-feature="page-theo-doi"] .ptd-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #f1f5f9;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}
[data-feature="page-theo-doi"] .ptd-chip b {
  color: #334155;
  font-variant-numeric: tabular-nums;
}
/* Nút phụ nhỏ (Dán · Tệp · Xoá · Sửa · Copy · Thử lại · Xuất) */
[data-feature="page-theo-doi"] .ptd-xs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 4px 9px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
[data-feature="page-theo-doi"] .ptd-xs i {
  font-size: 13px;
}
[data-feature="page-theo-doi"] .ptd-xs b {
  color: #334155;
  font-variant-numeric: tabular-nums;
}
[data-feature="page-theo-doi"] .ptd-xs:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #334155;
}
[data-feature="page-theo-doi"] .ptd-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
[data-feature="page-theo-doi"] .ptd-collapsed > .ptd-body {
  display: none;
}
/* Thu gọn rồi thì: ô đếm "N ID" TRÙNG với chip tóm tắt, còn 3 nút Dán/Tệp/Xoá lại ghi vào ô nhập
   đang ẩn → giấu cả hai, chỉ chừa nút Sửa để mở lại. */
[data-feature="page-theo-doi"] .ptd-collapsed .ptd-cnt,
[data-feature="page-theo-doi"] .ptd-collapsed .ptd-tool {
  display: none;
}
[data-feature="page-theo-doi"] .ptd-collapsed .ptd-runrow {
  margin-top: 0;
}
[data-feature="page-theo-doi"] .ptd-in {
  font-size: 12.5px;
  border-radius: 10px;
  resize: vertical;
  min-height: 104px;
  line-height: 1.5;
}
[data-feature="page-theo-doi"] .ptd-in:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
[data-feature="page-theo-doi"] .ptd-foot {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}
[data-feature="page-theo-doi"] .ptd-foot i {
  color: #0ea5e9;
  font-size: 14px;
  margin-top: 1px;
}
/* --- ② Cấu hình: 2 DÒNG INLINE, ô số nằm THẲNG trong dòng chữ, mục ngăn bằng vạch dọc mảnh.
   Không hộp, không viền từng ô — bản trước (hộp 4 hàng × 2 ô) user vẫn chê cồng kềnh. --- */
[data-feature="page-theo-doi"] .ptd-cfg {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
[data-feature="page-theo-doi"] .ptd-cline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 30px;
}
[data-feature="page-theo-doi"] .ptd-ci {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}
[data-feature="page-theo-doi"] .ptd-ci > i:first-child {
  font-size: 14px;
  color: #94a3b8;
}
[data-feature="page-theo-doi"] .ptd-ci em {
  font-style: normal;
  font-weight: 500;
  color: #94a3b8;
}
[data-feature="page-theo-doi"] .ptd-ci input {
  width: 46px;
  height: 28px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 0 4px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  color: #334155;
  background: #fff;
  font-variant-numeric: tabular-nums;
}
[data-feature="page-theo-doi"] .ptd-ci input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}
/* vạch dọc ngăn các mục — thay cho viền quanh từng ô */
[data-feature="page-theo-doi"] .ptd-cdot {
  width: 1px;
  height: 16px;
  flex-shrink: 0;
  background: #e8eaf1;
}
[data-feature="page-theo-doi"] .ptd-dash {
  font-style: normal;
  color: #cbd5e1;
}
/* Cặp lựa chọn (Theo dõi/Bỏ theo dõi · Phân phối): segmented control LIỀN KHỐI, 1 viền bao ngoài */
[data-feature="page-theo-doi"] .ptd-seg {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
[data-feature="page-theo-doi"] .ptd-opt {
  position: relative;
  margin: 0;
  cursor: pointer;
}
[data-feature="page-theo-doi"] .ptd-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
[data-feature="page-theo-doi"] .ptd-opt span {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
[data-feature="page-theo-doi"] .ptd-opt + .ptd-opt span {
  border-left: 1px solid #e2e8f0;
}
[data-feature="page-theo-doi"] .ptd-opt span i {
  font-size: 14px;
  color: #94a3b8;
}
[data-feature="page-theo-doi"] .ptd-opt input:checked + span {
  background: #f0f9ff;
  color: #0369a1;
}
[data-feature="page-theo-doi"] .ptd-opt input:checked + span i {
  color: #0ea5e9;
}
[data-feature="page-theo-doi"] .ptd-opt input:focus-visible + span {
  outline: 2px solid #0ea5e9;
  outline-offset: -2px;
}
[data-feature="page-theo-doi"] .ptd-swl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
}
[data-feature="page-theo-doi"] .ptd-sw {
  position: relative;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}
[data-feature="page-theo-doi"] .ptd-sw input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
[data-feature="page-theo-doi"] .ptd-sw i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.16s;
}
[data-feature="page-theo-doi"] .ptd-sw i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: left 0.16s;
}
[data-feature="page-theo-doi"] .ptd-sw input:checked + i {
  background: #0ea5e9;
}
[data-feature="page-theo-doi"] .ptd-sw input:checked + i::after {
  left: 17px;
}
/* --- Hàng chạy: Bắt đầu / Dừng + dòng "đang làm gì" --- */
[data-feature="page-theo-doi"] .ptd-runrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
[data-feature="page-theo-doi"] .ptd-start {
  min-width: 132px;
  height: 36px;
  justify-content: center;
  font-size: 13px;
}
[data-feature="page-theo-doi"] .ptd-stop {
  height: 36px;
  color: #dc2626;
  border-color: #fecaca;
}
[data-feature="page-theo-doi"] .ptd-stop:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}
[data-feature="page-theo-doi"] .ptd-live {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-feature="page-theo-doi"] .ptd-live b {
  color: #334155;
  font-variant-numeric: tabular-nums;
}
[data-feature="page-theo-doi"] .ptd-live > i {
  flex-shrink: 0;
  font-size: 14px;
  color: #0ea5e9;
}
[data-feature="page-theo-doi"] .ptd-spin {
  animation: pqm-spin 0.7s linear infinite;
}
/* --- ③ Kết quả THEO ID: 4 ô đếm + thanh tiến độ + bảng --- */
[data-feature="page-theo-doi"] .ptd-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
[data-feature="page-theo-doi"] .ptd-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #fff;
}
[data-feature="page-theo-doi"] .ptd-kpi .k {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-feature="page-theo-doi"] .ptd-kpi .v {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
[data-feature="page-theo-doi"] .ptd-kpi small {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-feature="page-theo-doi"] .ptd-kpi small b {
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
[data-feature="page-theo-doi"] .ptd-kpi.err .v {
  color: #dc2626;
}
[data-feature="page-theo-doi"] .ptd-prog {
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-feature="page-theo-doi"] .ptd-bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}
[data-feature="page-theo-doi"] .ptd-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #0ea5e9;
  transition: width 0.25s;
}
[data-feature="page-theo-doi"] .ptd-progtx {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
}
[data-feature="page-theo-doi"] .ptd-progtx b {
  color: #334155;
  font-variant-numeric: tabular-nums;
}
[data-feature="page-theo-doi"] .ptd-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
[data-feature="page-theo-doi"] .ptd-find {
  position: relative;
  flex: 1;
  min-width: 170px;
  max-width: 260px;
}
[data-feature="page-theo-doi"] .ptd-find i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #94a3b8;
}
[data-feature="page-theo-doi"] .ptd-find input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px 6px 31px;
  font-family: inherit;
  font-size: 12.5px;
  color: #334155;
  background: #fff;
}
[data-feature="page-theo-doi"] .ptd-find input:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}
[data-feature="page-theo-doi"] .ptd-ff {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
[data-feature="page-theo-doi"] .ptd-ff button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
[data-feature="page-theo-doi"] .ptd-ff button em {
  font-style: normal;
  font-weight: 700;
  color: #334155;
  font-variant-numeric: tabular-nums;
}
[data-feature="page-theo-doi"] .ptd-ff button:hover {
  border-color: #cbd5e1;
  color: #334155;
}
[data-feature="page-theo-doi"] .ptd-ff button.on {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0369a1;
}
[data-feature="page-theo-doi"] .ptd-ff button.on em {
  color: #0369a1;
}
[data-feature="page-theo-doi"] .ptd-tw {
  position: relative;
  max-height: 460px;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  background: #fff;
  overflow: auto;
}
[data-feature="page-theo-doi"] .ptd-tbl {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
[data-feature="page-theo-doi"] .ptd-c-ix {
  width: 34px;
}
[data-feature="page-theo-doi"] .ptd-c-n {
  width: 82px;
}
[data-feature="page-theo-doi"] .ptd-c-pr {
  width: 92px;
}
[data-feature="page-theo-doi"] .ptd-c-kq {
  width: 148px;
}
[data-feature="page-theo-doi"] .ptd-c-ch {
  width: 30px;
}
[data-feature="page-theo-doi"] .ptd-tbl th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 9px;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-align: left;
  white-space: nowrap;
}
[data-feature="page-theo-doi"] .ptd-tbl th.c,
[data-feature="page-theo-doi"] .ptd-tbl td.c {
  text-align: center;
}
[data-feature="page-theo-doi"] .ptd-tbl td {
  padding: 7px 9px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  overflow: hidden;
}
[data-feature="page-theo-doi"] .ptd-tbl tr:last-child td {
  border-bottom: 0;
}
[data-feature="page-theo-doi"] .ptd-r {
  cursor: pointer;
}
[data-feature="page-theo-doi"] .ptd-r:hover td {
  background: #f8fafc;
}
/* Dòng lỗi / đang chạy: CHỈ vạch mảnh bên trái — không tô nền cả hàng cho đỡ rối */
[data-feature="page-theo-doi"] .ptd-r.f td:first-child {
  box-shadow: inset 2px 0 0 #ef4444;
}
[data-feature="page-theo-doi"] .ptd-r.r td:first-child {
  box-shadow: inset 2px 0 0 #0ea5e9;
}
[data-feature="page-theo-doi"] .ptd-ix {
  font-size: 11px;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}
[data-feature="page-theo-doi"] .ptd-tg {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
[data-feature="page-theo-doi"] .ptd-nm {
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-feature="page-theo-doi"] .ptd-id {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* 3 cột số: thành công = chữ đậm trung tính, lỗi = đỏ, bỏ qua = xám; số 0 mờ hẳn */
[data-feature="page-theo-doi"] .ptd-num {
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  font-variant-numeric: tabular-nums;
}
[data-feature="page-theo-doi"] .ptd-num.fail {
  color: #dc2626;
}
[data-feature="page-theo-doi"] .ptd-num.skip {
  color: #64748b;
}
[data-feature="page-theo-doi"] .ptd-num.z {
  color: #dbe1ea;
  font-weight: 600;
}
/* Tiến độ mỗi ID: N đoạn = N Trang đã tick */
[data-feature="page-theo-doi"] .ptd-segs {
  display: flex;
  gap: 2px;
  height: 5px;
  margin-bottom: 3px;
}
[data-feature="page-theo-doi"] .ptd-segs i {
  flex: 1;
  border-radius: 2px;
  background: #eef2f7;
}
[data-feature="page-theo-doi"] .ptd-segs i.ok {
  background: #0ea5e9;
}
[data-feature="page-theo-doi"] .ptd-segs i.fail {
  background: #ef4444;
}
[data-feature="page-theo-doi"] .ptd-segs i.skip {
  background: #cbd5e1;
}
[data-feature="page-theo-doi"] .ptd-segs i.run {
  background: #7dd3fc;
}
[data-feature="page-theo-doi"] .ptd-tbl td.c small {
  display: block;
  font-size: 10.5px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
/* Nhãn kết quả: chip xám; chỉ bản có lỗi mới đỏ */
[data-feature="page-theo-doi"] .ptd-bdg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 20px;
  background: #f1f5f9;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
}
[data-feature="page-theo-doi"] .ptd-bdg b {
  color: #334155;
  font-variant-numeric: tabular-nums;
}
[data-feature="page-theo-doi"] .ptd-bdg i {
  font-size: 13px;
}
[data-feature="page-theo-doi"] .ptd-bdg.ok,
[data-feature="page-theo-doi"] .ptd-bdg.run {
  background: #f0f9ff;
  color: #0369a1;
}
[data-feature="page-theo-doi"] .ptd-bdg.ok b {
  color: #0369a1;
}
[data-feature="page-theo-doi"] .ptd-bdg.run i {
  animation: pqm-spin 0.7s linear infinite;
}
[data-feature="page-theo-doi"] .ptd-bdg.err {
  background: #fef2f2;
  color: #dc2626;
}
[data-feature="page-theo-doi"] .ptd-bdg.err b {
  color: #dc2626;
}
[data-feature="page-theo-doi"] .ptd-chev {
  font-size: 15px;
  color: #cbd5e1;
}
/* Chi tiết mở dưới mỗi ID: Trang nào lỗi / bỏ qua kèm nguyên văn lý do */
[data-feature="page-theo-doi"] .ptd-d td {
  padding: 2px 9px 9px 43px;
  background: #fbfcfe;
}
[data-feature="page-theo-doi"] .ptd-dt {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
[data-feature="page-theo-doi"] .ptd-dl {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 9px;
  border: 1px solid #eef2f7;
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
}
[data-feature="page-theo-doi"] .ptd-dl > i {
  flex-shrink: 0;
  font-size: 14px;
  color: #94a3b8;
}
[data-feature="page-theo-doi"] .ptd-dl.fail {
  border-color: #fee2e2;
}
[data-feature="page-theo-doi"] .ptd-dl.fail > i {
  color: #ef4444;
}
[data-feature="page-theo-doi"] .ptd-dl.ok > i {
  color: #0ea5e9;
}
[data-feature="page-theo-doi"] .ptd-dl.run > i {
  color: #0ea5e9;
  animation: pqm-spin 0.7s linear infinite;
}
[data-feature="page-theo-doi"] .ptd-dl b {
  flex-shrink: 0;
  max-width: 190px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-feature="page-theo-doi"] .ptd-why {
  flex: 1;
  min-width: 0;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-feature="page-theo-doi"] .ptd-dl.fail .ptd-why {
  color: #dc2626;
}
[data-feature="page-theo-doi"] .ptd-t {
  flex-shrink: 0;
  font-size: 11px;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}
[data-feature="page-theo-doi"] .ptd-dl.act {
  padding: 2px 0 0;
  border: 0;
  background: transparent;
}
[data-feature="page-theo-doi"] .ptd-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 26px 12px;
  font-size: 12.5px;
  color: #94a3b8;
}
[data-feature="page-theo-doi"] .ptd-empty i {
  font-size: 18px;
  color: #cbd5e1;
}
[data-feature="page-theo-doi"] .ptd-tfoot {
  font-size: 11.5px;
  color: #94a3b8;
}
[data-feature="page-theo-doi"] .ptd-tfoot b {
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-sec {
  border-top-color: #2e3947;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-lbl,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-ci,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-opt span,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-swl {
  color: #cbd5e1;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-kpi,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-tw,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-dl {
  background: #1e2530;
  border-color: #2e3947;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-cdot,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-opt + .ptd-opt span {
  border-color: #2e3947;
  background: #2e3947;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-opt + .ptd-opt span {
  background: transparent;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-xs,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-seg,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-ci input,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-find input,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-ff button {
  background: #1e2530;
  border-color: #2e3947;
  color: #cbd5e1;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-xs:hover,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-ff button:hover {
  background: #262f3c;
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-opt input:checked + span,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-ff button.on {
  background: rgba(14, 165, 233, 0.14);
  border-color: rgba(14, 165, 233, 0.5);
  color: #7dd3fc;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-ff button.on em {
  color: #7dd3fc;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-chip,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-bdg {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-chip b,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-cnt b,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-est b,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-xs b,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-live b,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-progtx b,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-ff button em,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-bdg b,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-nm,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-num,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-dl b {
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-kpi .v {
  color: #f1f5f9;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-num.z {
  color: #3a4658;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-num.skip,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-foot,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-why {
  color: #94a3b8;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-tbl th {
  background: #171d27;
  border-bottom-color: #2e3947;
  color: #7a8496;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-tbl td {
  border-bottom-color: #2a3341;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-r:hover td {
  background: #232b37;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-d td {
  background: #171d27;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-bar,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-segs i {
  background: #2e3947;
}
/* ⚠ Rule ngay trên ĐẶC HIỆU HƠN `.ptd-segs i.ok` của nền sáng nên nuốt màu từng đoạn — ở nền tối
   mọi đoạn đều xám, mất phân biệt thành công/lỗi (đã dính khi dựng thử). Khai lại đủ 4 trạng thái. */
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-segs i.ok {
  background: #0ea5e9;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-segs i.fail {
  background: #ef4444;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-segs i.skip {
  background: #4a5668;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-segs i.run {
  background: #7dd3fc;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-bdg.ok,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-bdg.run {
  background: rgba(14, 165, 233, 0.16);
  color: #7dd3fc;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-bdg.ok b {
  color: #7dd3fc;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-bdg.err {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-bdg.err b,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-num.fail,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-kpi.err .v,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-dl.fail .ptd-why {
  color: #f87171;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-dl.fail {
  border-color: rgba(239, 68, 68, 0.35);
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-stop {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-stop:hover {
  background: rgba(239, 68, 68, 0.14);
  border-color: #ef4444;
  color: #fca5a5;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-sw i {
  background: #3a4658;
}
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-ix,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-t,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-chev,
[data-bs-theme="dark"] [data-feature="page-theo-doi"] .ptd-ci em {
  color: #7a8496;
}
[data-feature="page-tuong-tac"] .ptt-wrap {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
[data-feature="page-tuong-tac"] .ptt-lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin: 2px 0 -4px;
}
[data-feature="page-tuong-tac"] .ptt-lbl i {
  color: #0ea5e9;
  font-size: 14px;
}
[data-feature="page-tuong-tac"] .ptt-in,
[data-feature="page-tuong-tac"] .ptt-cmts {
  font-size: 12.5px;
  border-radius: 10px;
}
[data-feature="page-tuong-tac"] .ptt-cmts {
  resize: vertical;
  min-height: 66px;
  line-height: 1.5;
}
[data-feature="page-tuong-tac"] .ptt-in:focus,
[data-feature="page-tuong-tac"] .ptt-cmts:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
/* Hàng thao tác dạng toggle-box (Thả cảm xúc / Bình luận / Chia sẻ) */
[data-feature="page-tuong-tac"] .db-arow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fff;
}
[data-feature="page-tuong-tac"] .db-ac {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
[data-feature="page-tuong-tac"] .db-ac-sky {
  background: #e0f2fe;
  color: #0284c7;
}
[data-feature="page-tuong-tac"] .db-ac-pink {
  background: #fce7f3;
  color: #db2777;
}
[data-feature="page-tuong-tac"] .db-ac-green {
  background: #dcfce7;
  color: #16a34a;
}
[data-feature="page-tuong-tac"] .db-at {
  flex: 1;
  min-width: 0;
}
[data-feature="page-tuong-tac"] .db-at b {
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  display: block;
}
[data-feature="page-tuong-tac"] .db-at small {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.4;
}
[data-feature="page-tuong-tac"] .db-sw2 {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}
[data-feature="page-tuong-tac"] .db-sw2 input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
[data-feature="page-tuong-tac"] .db-sw2 span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background 0.16s;
}
[data-feature="page-tuong-tac"] .db-sw2 span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: left 0.16s;
}
[data-feature="page-tuong-tac"] .db-sw2 input:checked + span {
  background: #0ea5e9;
}
[data-feature="page-tuong-tac"] .db-sw2 input:checked + span::after {
  left: 21px;
}
/* Khối gộp viền: header công tắc + nội dung mở-ra chung 1 viền bo (accordion) */
[data-feature="page-tuong-tac"] .db-encl {
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
[data-feature="page-tuong-tac"] .db-encl > .db-arow {
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* Nội dung con: tuck vào trong bằng divider mảnh + nền nhạt; ẩn khi công tắc tắt */
[data-feature="page-tuong-tac"] .db-encl > .ptt-sub {
  margin: 0;
  padding: 12px;
  border-top: 1px solid #eef2f7;
  background: #fafbfc;
}
[data-feature="page-tuong-tac"] .db-encl > .db-arow:has(input:not(:checked)) + .ptt-sub {
  display: none;
}
/* Hàng nút chọn loại cảm xúc — chỉ emoji, gọn 1 hàng không cuộn (tên hiện khi rê chuột) */
[data-feature="page-tuong-tac"] .ptt-reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
[data-feature="page-tuong-tac"] .ptt-react {
  margin: 0;
  cursor: pointer;
  flex: 0 0 auto;
}
[data-feature="page-tuong-tac"] .ptt-react input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
[data-feature="page-tuong-tac"] .ptt-react span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid #e5e9f0;
  border-radius: 10px;
  background: #fff;
  font-size: 20px;
  line-height: 1;
  transition:
    border-color 0.15s,
    background 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
}
[data-feature="page-tuong-tac"] .ptt-react span em {
  display: none;
}
[data-feature="page-tuong-tac"] .ptt-react:hover span {
  transform: translateY(-1px);
}
[data-feature="page-tuong-tac"] .ptt-react:hover span {
  border-color: #bae6fd;
}
[data-feature="page-tuong-tac"] .ptt-react input:checked + span {
  border-color: #0ea5e9;
  background: #e0f2fe;
  box-shadow: 0 1px 3px rgba(14, 165, 233, 0.25);
}
[data-feature="page-tuong-tac"] .ptt-react input:checked + span em {
  color: #0369a1;
}
[data-feature="page-tuong-tac"] .ptt-react input:focus-visible + span {
  outline: 2px solid #0ea5e9;
  outline-offset: 1px;
}
/* Nút "Ngẫu nhiên" — viền nét đứt cho biết là mục đặc biệt */
[data-feature="page-tuong-tac"] .ptt-react-rnd span {
  border-style: dashed;
}
/* Thẻ "Cấu hình chung" — gom Số bình luận/Trang + Giãn cách + Xáo trộn, chia 3 ô đều */
[data-feature="page-tuong-tac"] .ptt-cfgcard {
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fff;
  padding: 13px 14px 15px;
}
[data-feature="page-tuong-tac"] .ptt-cfgtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 13px;
}
[data-feature="page-tuong-tac"] .ptt-cfgtitle i {
  color: #0ea5e9;
  font-size: 15px;
}
[data-feature="page-tuong-tac"] .ptt-cfggrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
[data-feature="page-tuong-tac"] .ptt-cfggrid > .db-cmtfld {
  padding: 0 14px;
}
[data-feature="page-tuong-tac"] .ptt-cfggrid > .db-cmtfld:first-child {
  padding-left: 0;
}
[data-feature="page-tuong-tac"] .ptt-cfggrid > .db-cmtfld:last-child {
  padding-right: 0;
}
[data-feature="page-tuong-tac"] .ptt-cfggrid > .db-cmtfld + .db-cmtfld {
  border-left: 1px solid #eef2f7;
}
[data-feature="page-tuong-tac"] .ptt-cfggrid .db-sw2 {
  margin-top: 8px;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-cfgcard {
  background: #1e2530;
  border-color: #2e3947;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-cfgtitle {
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-cfggrid > .db-cmtfld + .db-cmtfld {
  border-left-color: #2e3947;
}
[data-feature="page-tuong-tac"] .db-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #9099a9;
  line-height: 1.4;
}
[data-feature="page-tuong-tac"] .db-foot i {
  color: #0ea5e9;
  flex: none;
}
[data-feature="page-tuong-tac"] .db-foot b {
  color: #161a24;
}
/* Dark */
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-lbl {
  color: #c4ccda;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-arow {
  background: #1e2530;
  border-color: #2e3947;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-at b {
  color: #e5e7eb;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-sw2 span {
  background: #3a4658;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-ac-sky {
  background: rgba(2, 132, 199, 0.22);
  color: #38bdf8;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-ac-pink {
  background: rgba(219, 39, 119, 0.22);
  color: #f472b6;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-ac-green {
  background: rgba(22, 163, 74, 0.22);
  color: #4ade80;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-encl {
  background: #1e2530;
  border-color: #2e3947;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-encl > .ptt-sub {
  border-top-color: #2e3947;
  background: rgba(255, 255, 255, 0.03);
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-cmthint {
  color: #7a8496;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-react span {
  background: #1e2530;
  border-color: #2e3947;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-react span em {
  color: #94a3b8;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-react input:checked + span {
  background: rgba(14, 165, 233, 0.22);
  border-color: #0ea5e9;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .ptt-react input:checked + span em {
  color: #7dd3fc;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-foot {
  color: #657085;
}
[data-bs-theme="dark"] [data-feature="page-tuong-tac"] .db-foot b {
  color: #e9edf6;
}

/* ===== page-drip (Chuỗi bài Drip) ===== */
[data-feature="page-drip"] .pdr-wrap {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
[data-feature="page-drip"] .pdr-posts {
  font-size: 12.5px;
  border-radius: 10px;
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}
[data-feature="page-drip"] .pdr-posts:focus,
[data-feature="page-drip"] .pdr-start:focus,
[data-feature="page-drip"] .pdr-num:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
[data-feature="page-drip"] .db-hint {
  font-size: 11px;
  color: #9099a9;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.45;
}
[data-feature="page-drip"] .db-hint i {
  color: #6366f1;
  flex: none;
  margin-top: 1px;
}
[data-feature="page-drip"] .db-hint b {
  color: #4f46e5;
}
[data-feature="page-drip"] .pdr-opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 11px;
  background: #f6f8fb;
  border-radius: 11px;
}
[data-feature="page-drip"] .pdr-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #374151;
  margin: 0;
}
[data-feature="page-drip"] .pdr-start {
  max-width: 190px;
  font-size: 12.5px;
  border-radius: 9px;
}
[data-feature="page-drip"] .pdr-num {
  width: 72px;
  font-size: 12.5px;
  border-radius: 9px;
  text-align: center;
}
[data-feature="page-drip"] .pdr-unit {
  font-size: 12px;
  color: #6b7280;
}
[data-feature="page-drip"] .db-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #9099a9;
  line-height: 1.4;
}
[data-feature="page-drip"] .db-foot i {
  color: #6366f1;
  flex: none;
}
[data-feature="page-drip"] .db-foot b {
  color: #161a24;
}
[data-bs-theme="dark"] [data-feature="page-drip"] .pdr-opts {
  background: rgba(255, 255, 255, 0.05);
}
[data-bs-theme="dark"] [data-feature="page-drip"] .pdr-field {
  color: #c4ccda;
}
[data-bs-theme="dark"] [data-feature="page-drip"] .pdr-unit {
  color: #9aa3b6;
}
[data-bs-theme="dark"] [data-feature="page-drip"] .db-hint b {
  color: #a5b4fc;
}
[data-bs-theme="dark"] [data-feature="page-drip"] .db-foot {
  color: #657085;
}
[data-bs-theme="dark"] [data-feature="page-drip"] .db-foot b {
  color: #e9edf6;
}
.fiox-zoom-btn {
  border: 0;
  background: transparent;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  transition: background 0.15s;
}
.fiox-zoom-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.fiox-zoom-btn:active {
  background: rgba(255, 255, 255, 0.3);
}
.fiox-zoom-val {
  min-width: 46px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.fiox-zoom-val:hover {
  opacity: 0.85;
}

/* Nút Sáng/Tối (dark mode) — cạnh nút zoom, cùng style glass trên header tím */
.fiox-theme-btn {
  height: 28px;
  width: 28px;
  margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  transition: background 0.15s;
}
.fiox-theme-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Nút "Quản trị" (chỉ admin) cạnh logo — dùng chung cho grid pages, giống HOME */
.nh-admin-btn {
  font-size: 0.75rem;
  font-weight: 700;
  color: #6d28d9;
  background: #fff;
  padding: 4px 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.nh-admin-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  color: #6d28d9;
}

/* Nút chuông âm báo khi xong — cạnh phải nút zoom, vàng khi BẬT */
.fiox-sound-btn {
  height: 28px;
  width: 28px;
  margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  transition:
    background 0.15s,
    color 0.15s;
}
.fiox-sound-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}
.fiox-sound-btn.is-on {
  color: #ffd43b;
}

/* Container query — scope theo width toolbar, không viewport (đúng khi sidebar đổi).
   container-type: inline-size tạo stacking context mới → dropdown popups (Lọc / Xuất /
   Toàn thời gian) bị nhốt trong scope toolbar, AG Grid sibling đè lên do DOM order.
   Fix bằng position:relative + z-index cao hơn AG Grid (auto = ~0). */
.tkqc-toolbar {
  container-type: inline-size;
  container-name: tkqctoolbar;
  position: relative;
  z-index: 10;
}
/* Dropdown menus ở mức cao hơn nữa để chắc nổi trên grid + status filter dropdown. */
.tkqc-toolbar .dropdown-menu,
.tkqc-toolbar .date-range-picker {
  z-index: 1080 !important;
}

/* Toolbar hẹp: co label→icon theo TẦNG (JS toolbar-responsive thêm .tbc-1/2/3 vào
   .tkqc-toolbar khi tràn ngang) — GIỮ nút hiện dạng icon thay vì ẩn. Ưu tiên giữ
   cụm quản lý phải [data-tool="general"]: cụm tiện ích trái (.border-end.ms-3) co
   TRƯỚC, cụm phải co SAU; chỉ ẩn cụm trái khi rất hẹp. Hover icon còn tooltip (title
   = nhãn, JS gán). Search min-width để nút co trước khi ô tìm kiếm teo quá nhỏ. */
.tkqc-toolbar > .flex-grow-1 {
  min-width: 150px;
}
.tkqc-toolbar.tbc-1 .border-end.ms-3 .btn-label {
  display: none;
}
.tkqc-toolbar.tbc-1 .border-end.ms-3 .btn-icon {
  margin-right: 0 !important;
}
.tkqc-toolbar.tbc-2 [data-tool="general"] .btn-label {
  display: none;
}
.tkqc-toolbar.tbc-2 [data-tool="general"] .btn-icon {
  margin-right: 0 !important;
}
.tkqc-toolbar.tbc-3 .border-end.ms-3 {
  display: none !important;
}

.control-btn i {
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 18px;
  font-weight: 400;
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
}

#checkingScreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

#category {
  white-space: nowrap;
  font-size: 0;
  padding: 0 5px;
}

.cat-item:not(.active):before {
  content: "";
  left: -1px;
  position: absolute;
  top: 10px;
  width: 1px;
  bottom: 10px;
  background: rgb(255 255 255 / 24%);
}

.cat-item.active:after,
.cat-item.active:before,
.tool-item.active:after,
.tool-item.active:before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="4.894" height="4.91" viewBox="0 0 4.894 4.91"><path id="Path_1" data-name="Path 1" d="M4.895,5H0V.09A5.045,5.045,0,0,0,4.895,5Z" transform="translate(-0.001 -0.09)" fill="%23fff"/></svg>');
  bottom: 0;
  right: -5px;
  top: inherit;
}

.cat-item.active:before,
.tool-item.active:before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="5" height="5" viewBox="0 0 5 5"><defs><clipPath id="clip-Web_1920_1"><rect width="5" height="5"/></clipPath></defs><g id="Web_1920_1" data-name="Web 1920 – 1" clip-path="url(%23clip-Web_1920_1)"><path id="Path_1" data-name="Path 1" d="M0,5H4.895V.09A5.045,5.045,0,0,1,0,5Z" transform="translate(0.105 0)" fill="%23fff"/></g></svg>');
  right: inherit;
  left: -5px;
}

.cat-item,
.tool-item,
#addCategory {
  border: 0;
  padding: 10px 20px;
  font-weight: 700;
  color: #fff;
  height: 40px;
  display: inline-block;
  background: transparent;
  font-size: 1rem;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  position: relative;
}

.cat-item.active,
.tool-item.active {
  color: #666;
  background: #fff;
}

.cat-item:not(.active):hover,
.tool-item:not(.active):hover {
  background: rgb(0 0 0 / 12%);
}

.tool-item.active:first-child:before {
  left: 0px;
  bottom: -3px;
  background: #fff;
}

.tool-item.active:last-child:after {
  right: 0px;
  bottom: -3px;
  background: #fff;
}

.category-nav-wrapper {
  position: relative;
}

/* .category-nav-wrapper:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -30px;
  width: 30px;
  background: linear-gradient(to right, #ff000000 0%,#0000001f 100%);
} */

button.category-nav {
  background: transparent;
  color: #fff;
}

button.category-nav:disabled {
  opacity: 0.5;
}

#addCategory {
  background: transparent;
}

#logs {
  height: 400px;
  overflow-y: auto;
}

.log-item {
  display: flex;
}

.log-item label {
  width: 100%;
  display: block;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.log-item input:checked + label {
  background-color: #0d6efd;
  color: #fff;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  padding: 10px;
}

::-webkit-scrollbar-track-piece {
  background: #fff;
}

::-webkit-scrollbar-thumb {
  background: #c2c2c2;
  border-radius: 5px;
}

.phoiItem {
  position: relative;
  cursor: pointer;
}

.phoiItem.active {
  background-color: #f5f5f5;
}

.phoiItem.active i {
  display: block;
}

.phoiItem i {
  display: none;
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 1;
}

.modal-backdrop,
.modal {
  /* top: 40px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: inherit;
  height: inherit;
  background: transparent; */
}

#regModal .modal-dialog {
  max-width: calc(100% - 100px) !important;
}

.swal2-backdrop-show {
  background-color: transparent !important;
}

/* Swal default z-index 1060, không đủ khi mở từ trong cc-overlay (z-index 9999).
   Bump global để Swal modal/toast luôn trên top. */
.swal2-container {
  z-index: 10001 !important;
}

.swal2-popup {
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #e2e2e2;
  padding: 10px 12px !important;
  border-radius: 22px !important;
}

.swal2-popup .swal2-title {
  padding: 0 0 8px 0 !important;
  margin: 0 !important;
}

.swal2-popup .swal2-html-container {
  padding: 0 !important;
  margin: 0 !important;
}

.swal2-popup .swal2-html-container input[type="radio"],
.swal2-popup .swal2-html-container input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  float: right !important;
  margin-left: auto !important;
  margin-right: -5px !important;
}

.swal2-popup .swal2-html-container label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.swal2-popup .swal2-actions {
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
}

/* Bo góc nút Tải dữ liệu và Hủy */
.swal2-popup .swal2-actions button {
  border-radius: 10px !important;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu:hover .dropdown-menu {
  display: block;
}

.dropdown-submenu .dropdown-menu {
  display: none;
  bottom: -50px;
  position: absolute;
  left: calc(100% - 25px);
  margin-top: -1px;
  z-index: 99999999;
}

.checkbox-lg .form-check-input {
  top: 0.8rem;
  scale: 1.4;
  margin-right: 0.7rem;
}

.checkbox-lg .form-check-label {
  padding-top: 13px;
}

#menuButton {
  position: absolute;
  background: #fff;
  z-index: 99;
  width: 30px;
  height: 50px;
  top: 50%;
  margin-top: -25px;
  border: 0;
  right: 370px;
  padding: 0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -5px 0 5px 0 rgb(0 0 0 / 9%);
  font-size: 20px;
}

.ri-arrow-left-s-line {
  display: none;
}

body.hideMenu #panel {
  width: 0;
}

body.hideMenu #menuButton .ri-arrow-right-s-line {
  display: none;
}

body.hideMenu #menuButton .ri-arrow-left-s-line {
  display: block;
}

body.hideMenu #menuButton {
  right: 0;
}

body.hideMenu .account-wrapper,
body.hideMenu .header-bottom {
  width: calc(100vw - 20px);
}

.saveLogStatus .spinner-border {
  display: none;
}

.saveLogStatus.running .spinner-border {
  display: block;
}

#loadingScreen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  background: #ffffff7a;
}

.swal2-actions.swal2-loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 350px;
  bottom: 0;
  background: #ffffffc7;
  z-index: 5;
}
.folded #loading {
  right: 0;
}

/* Ẩn nodata overlay khi đang loading */
#accounts.is-loading .ag-overlay {
  display: none !important;
}

/* Meta Logo Loader - chỉ dùng cho fallback, chính là SVG trong HTML */
.loader {
  width: 80px;
  height: 60px;
}

.moreCard {
  position: absolute;
  min-width: 100px;
  z-index: 999;
  background: #fff;
  line-height: initial;
}
.cardItem:not(:last-child) {
  margin-bottom: 10px;
}

#adSelect .select2-container .select2-selection--single {
  height: inherit;
  border: 0;
  box-shadow: none !important;
  outline: none !important;
}

#adSelect
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 3px;
}

#adSelect
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  padding-left: 0;
}

.select2-container .select2-selection--single {
  height: 33px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
  border-radius: var(--bs-border-radius);
}
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 33px;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 4px;
}
.select2-container--open .select2-dropdown {
  border: var(--bs-border-width) solid var(--bs-border-color);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.select2-search--dropdown .select2-search__field {
  border: var(--bs-border-width) solid var(--bs-border-color);
  outline: none;
}
.select2-container--default .select2-results__option--selected {
  background-color: transparent;
}
.select2-container {
  width: 100% !important;
}

.phoiItem {
  position: relative;
  cursor: pointer;
}

.phoiItem.active {
  background-color: #f5f5f5;
}

.phoiItem.active i {
  display: block;
}

.phoiItem i {
  display: none;
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 1;
}

.account-rename-btn:hover,
.bm-rename-btn:hover,
.page-rename-btn:hover,
._camp-budget-edit:hover {
  color: var(--primary-start, #6366f1) !important;
}

/* ============================================================
   .nh-quality — badge "Account Quality" với chấm tròn + animation
   pulse trắng. Render từ libs.js: <a class="badge text-bg-X">...</a>.
   Dùng ở hero (index) và header navbar (ads/bm/clone/page/group).
   ============================================================ */
.nh-quality {
  display: inline-flex;
}
.nh-quality .badge {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  margin: 0 !important;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.nh-quality .badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  animation: nh-pulse-w 2.4s ease-in-out infinite;
}
@keyframes nh-pulse-w {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
  }
}

/* ============================================================
   Rename Account Modal — reuse .scm-* base, thêm pill ID + footer 2 nút
   ============================================================ */
.ren-id-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.2);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  color: #475569;
  align-self: flex-start;
}
.ren-id-pill > span {
  font-weight: 500;
  color: #64748b;
}
.ren-id-pill strong {
  color: #0f172a;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Popup Đổi tên (BM/TKQC/Page) — bố cục thanh công cụ trên: [back] [tiêu đề] [Lưu] */
.scm-modal.ren-modal {
  overflow: hidden;
}
.ren-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
  border-bottom: 1px solid #ececf5;
}
.ren-bar-title {
  flex: 1;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.ren-back {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--primary-start, #6366f1);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.ren-back:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.12);
}
.ren-bar-save {
  border: none;
  background: var(--primary-start, #6366f1);
  color: #fff;
  border-radius: 9px;
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.ren-bar-save:hover {
  background: #4f46e5;
}
.ren-bar-save:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Ô "Ghi chú" đang sửa inline — editor riêng (viền chấm + nút ✓ lưu) chiếm trọn ô */
.ag-cell[col-id="note"].ag-cell-inline-editing {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.note-editor {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 0 6px;
  border: 2px dotted var(--primary-start, #6366f1);
  border-radius: 6px;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.06);
  box-sizing: border-box;
}
.note-editor-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 13px;
  color: inherit;
  padding: 0;
}
.note-editor-save {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 5px;
  background: var(--primary-start, #6366f1);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  transition: background 0.15s;
}
.note-editor-save:hover {
  background: #4f46e5;
}

/* Cột SL Account BM / Share — icon đầu dòng + màu Live (xanh) / Die (đỏ) */
.acc-ic {
  margin-right: 5px;
  opacity: 0.7;
}
.acc-live {
  color: #16a34a;
  font-weight: 600;
}
.acc-die {
  color: #dc2626;
  font-weight: 600;
}
[data-bs-theme="dark"] .acc-live {
  color: #4ade80;
}
[data-bs-theme="dark"] .acc-die {
  color: #f87171;
}
/* SL Quản trị viên — FB xanh Facebook, IG gradient đỏ→hồng */
.acc-fb {
  color: #60a5fa;
  font-weight: 600;
}
.acc-ig {
  color: #e1306c;
  font-weight: 600;
}
[data-bs-theme="dark"] .acc-fb {
  color: #93c5fd;
}
[data-bs-theme="dark"] .acc-ig {
  color: #f472b6;
}

.ren-footer {
  display: flex;
  justify-content: flex-end;
  padding: 12px 24px 20px;
  border-top: 1px solid #f0f0f0;
}

.avatar-letter {
  width: 32px;
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  color: white;
  font-weight: 900;
  font-size: 14px;
  font-family: "SFProDisplay", "Microsoft YaHei", "Segoe UI", sans-serif;
  line-height: 32px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: #6c757d; /* Màu nền mặc định cho ký tự đặc biệt */
}

.avatar-letter:after {
  content: attr(data-letter);
}

.avatar-letter[data-letter="0"] {
  background-color: #6c757d;
}
.avatar-letter[data-letter="A"],
.avatar-letter[data-letter="1"] {
  background-color: #e25f50;
}
.avatar-letter[data-letter="B"],
.avatar-letter[data-letter="2"] {
  background-color: #f25e90;
}
.avatar-letter[data-letter="C"],
.avatar-letter[data-letter="3"] {
  background-color: #bc67cb;
}
.avatar-letter[data-letter="D"],
.avatar-letter[data-letter="4"] {
  background-color: #9672cf;
}
.avatar-letter[data-letter="E"],
.avatar-letter[data-letter="5"] {
  background-color: #7984ce;
}
.avatar-letter[data-letter="F"],
.avatar-letter[data-letter="6"] {
  background-color: #5c96fa;
}
.avatar-letter[data-letter="G"],
.avatar-letter[data-letter="7"] {
  background-color: #7bdeeb;
}
.avatar-letter[data-letter="H"],
.avatar-letter[data-letter="8"] {
  background-color: #45d0e2;
}
.avatar-letter[data-letter="I"],
.avatar-letter[data-letter="9"] {
  background-color: #48b7ad;
}
.avatar-letter[data-letter="J"] {
  background-color: #52bc89;
}
.avatar-letter[data-letter="K"] {
  background-color: #9ace5f;
}
.avatar-letter[data-letter="L"] {
  background-color: #d4e34a;
}
.avatar-letter[data-letter="M"] {
  background-color: #f9d715;
}
.avatar-letter[data-letter="N"] {
  background-color: #fac400;
}
.avatar-letter[data-letter="O"] {
  background-color: #ffaa00;
}
.avatar-letter[data-letter="P"] {
  background-color: #ff8b61;
}
.avatar-letter[data-letter="Q"] {
  background-color: #c2c2c2;
}
.avatar-letter[data-letter="R"] {
  background-color: #8ea3af;
}
.avatar-letter[data-letter="S"] {
  background-color: #a1877d;
}
.avatar-letter[data-letter="T"] {
  background-color: #a3a3a3;
}
.avatar-letter[data-letter="U"] {
  background-color: #b0b6e3;
}
.avatar-letter[data-letter="V"] {
  background-color: #b49cde;
}
.avatar-letter[data-letter="W"] {
  background-color: #c2c2c2;
}
.avatar-letter[data-letter="X"] {
  background-color: #7bdeeb;
}
.avatar-letter[data-letter="Y"] {
  background-color: #bcaaa4;
}
.avatar-letter[data-letter="Z"] {
  background-color: #aed77f;
}

input[name="delay"]::-webkit-inner-spin-button,
input[name="delay"]::-webkit-outer-spin-button,
input[name="limit"]::-webkit-inner-spin-button,
input[name="limit"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.swal2-container {
  background: #00000057 !important;
}

[data-bs-theme="dark"] .dark-bg {
  background: #2f333d !important;
}

[data-bs-theme="dark"] .dark-border-0 {
  border: 0 !important;
}

[data-bs-theme="dark"] .dark-border {
  border-color: #49505780 !important;
}

[data-bs-theme="dark"] .dark-link {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .dark-body-bg {
  background: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] {
  --bs-body-bg: #272b34;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track-piece {
  background: #2f333d;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #ffffff0f;
}

/* ========================================
   CUSTOM CHECKBOX STYLES
   ======================================== */

/* Custom tất cả checkbox (không phải switch) với màu #6366f1 */
.form-check:not(.form-switch) .form-check-input[type="checkbox"] {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  border: 2px solid #d1d5db;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"]:hover {
  border-color: var(--primary-start, #6366f1);
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
  background-color: var(--primary-start, #6366f1);
  border-color: var(--primary-start, #6366f1);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb, 99, 102, 241), 0.4);
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"]:focus {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.25);
}

/* Custom checkbox với label component */
.custom-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  margin-bottom: 8px;
}

.custom-checkbox:hover {
  background: #e9ecef;
  border-color: #dee2e6;
}

.custom-checkbox input[type="checkbox"] {
  display: none;
}

.custom-checkbox .checkbox-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  transition: all 0.2s ease;
  background: #fff;
  flex-shrink: 0;
}

.custom-checkbox .checkbox-icon i {
  font-size: 14px;
  color: transparent;
  transition: all 0.2s ease;
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-icon {
  background: #84cc16;
  border-color: #84cc16;
  box-shadow: 0 2px 8px rgba(132, 204, 22, 0.4);
}

.custom-checkbox input[type="checkbox"]:checked + .checkbox-icon i {
  color: #fff;
}

.custom-checkbox .checkbox-label {
  font-weight: 500;
  flex-grow: 1;
}

/* Dark mode */
[data-bs-theme="dark"]
  .form-check:not(.form-switch)
  .form-check-input[type="checkbox"] {
  background-color: #2f333d;
  border-color: #6c757d;
}

[data-bs-theme="dark"]
  .form-check:not(.form-switch)
  .form-check-input[type="checkbox"]:checked {
  background-color: #84cc16;
  border-color: #84cc16;
}

[data-bs-theme="dark"] .custom-checkbox {
  background: #343a40;
  border-color: #495057;
}

[data-bs-theme="dark"] .custom-checkbox:hover {
  background: #3d444b;
  border-color: #6c757d;
}

[data-bs-theme="dark"] .custom-checkbox .checkbox-icon {
  background: #2f333d;
  border-color: #6c757d;
}

/* Skeleton loading animation cho các ô đang chờ dữ liệu */
.cell-loading {
  background: #f0f0f0;
  animation: pulse 1.2s infinite ease-in-out;
  border-radius: 4px;
  min-height: 16px;
}

@keyframes pulse {
  0%,
  100% {
    background: #e8e8e8;
  }
  50% {
    background: #f8f8f8;
  }
}

/* Placeholder text cho skeleton */
.cell-loading-placeholder {
  display: inline-block;
  width: 70%;
  height: 16px;
  background: #e0e0e0;
  animation: pulse 1.2s infinite ease-in-out;
  border-radius: 4px;
}

/* Login Dialog Checkbox Styles */
.login-checkbox-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.login-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  margin: 0;
  padding: 0;
}

.login-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: #4267b2;
}

.login-checkbox-label span {
  font-size: 14px;
  color: #333;
}

/* ========================================
   SELECT2 - Đồng bộ font với form labels
   ======================================== */

/* Text hiển thị trong select box (giá trị đã chọn) */
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  font-size: 0.875rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 400;
  color: var(--text-primary, #1e293b);
}

/* Dropdown options */
.select2-container--default .select2-results__option {
  font-size: 0.875rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-weight: 400;
  padding: 8px 12px;
}

/* Search input trong dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  font-size: 0.875rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

/* Process badge */
.process-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.4;
  border: 1.5px solid transparent;
}
.process-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
.process-badge.finished {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}
.process-badge.finished::before {
  background: #22c55e;
}
.process-badge.running {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}
.process-badge.running::before {
  background: #f59e0b;
}
[data-bs-theme="dark"] .process-badge.finished {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
}
[data-bs-theme="dark"] .process-badge.running {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
}

/* Placeholder */
.select2-container--default
  .select2-selection--single
  .select2-selection__placeholder {
  font-size: 0.875rem;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

/* ===================================================================
   HOME SIDEBAR (hm-*) — chỉ dùng ở trang Home (index.html)
   =================================================================== */
#viaPanel.hm-content {
  display: flex !important;
  overflow: hidden !important;
  padding: 0 !important;
}
.hm-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(30, 41, 90, 0.14);
  padding: 18px 12px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: width 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Header (thẻ user + Tải Extension) TRÊN + Đăng xuất DƯỚI cố định; phần menu ở giữa cuộn riêng */
.hm-side-header {
  flex-shrink: 0;
}
.hm-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hm-sidebar > .hm-sep,
.hm-sidebar > .hm-item {
  flex-shrink: 0;
}
.hm-scroll {
  overflow-x: hidden;
}
/* Nhãn không tràn (nowrap + cắt) */
.hm-item-label,
.hm-sec-name,
.hm-side-download > span {
  white-space: nowrap;
  overflow: hidden;
  max-width: 170px;
  opacity: 1;
  transition:
    max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.18s;
}
/* Welcome sau đăng ký — VIEW RIÊNG /hello (tách khỏi dashboard); ẨN sidebar lúc đầu, sau 10s lòi ra */
.hm-view[data-view="hello"] {
  position: relative;
}
#homeWelcome.hw-embed {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #fffdf9;
}
#homeWelcome.hw-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.hm-content.hw-nosidebar .hm-sidebar {
  display: none;
}
.hm-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 6px 14px 4px;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Accordion — nhóm "Công cụ" (nút gập là 1 DÒNG BẤM: icon + nhãn + mũi tên như 1 mục menu) */
.hm-sec-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  border-radius: 10px;
  cursor: pointer;
  color: #475569;
  font-size: 13.5px;
  font-weight: 600;
  user-select: none;
  background: rgba(59, 130, 246, 0.09);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.32);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.hm-sec-toggle:hover {
  background: rgba(59, 130, 246, 0.14);
  color: #334155;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.48);
}
.hm-sec-ic {
  font-size: 18px;
  width: 20px;
  flex-shrink: 0;
  display: inline-flex;
  justify-content: center;
}
.hm-sec-name {
  flex: 1;
}
.hm-sec-chev {
  font-size: 17px;
  color: #b0b7c3;
  transition: transform 0.22s ease;
}
.hm-group.collapsed .hm-sec-chev {
  transform: rotate(-90deg);
}
.hm-group-items {
  overflow: hidden;
  max-height: 600px;
  transition: max-height 0.26s ease;
  margin-left: 14px;
  padding-left: 15px;
}
.hm-group.collapsed .hm-group-items {
  max-height: 0;
}
/* Cách nút "Công cụ" 1 chút để mục đầu (Mail tạm) không dính sát khi mở (gập vẫn ẩn nhờ overflow:hidden) */
.hm-group-items > .hm-item:first-child {
  margin-top: 5px;
}
/* Đường kẻ dạng cây bo tròn: mỗi mục 1 nhánh ╰ mềm quẹo vào; các đoạn dọc trùm nhau 8px
   (= bán kính bo) để đường dọc liền mạch, không hở ở khúc cong; mục CUỐI kết thúc bằng
   nhánh cong (└) — không thừa đường xuống dưới. */
.hm-group-items > .hm-item::after {
  content: "";
  position: absolute;
  left: -15px;
  top: calc(
    -50% - 8px
  ); /* trùm 8px = bán kính bo → khúc cong vẫn được đoạn dưới lấp kín */
  bottom: 50%; /* dừng ở tâm mục này */
  width: 12px;
  /* MÀU ĐẶC (không alpha): các đoạn trùm nhau chồng lên nhau KHÔNG bị đậm gấp đôi,
     nhờ vậy đường dọc đều một nét, không còn "lằn 1 / 1-2 / 1-2-3" đi xuống. */
  border-left: 1.5px solid #c9caee;
  border-bottom: 1.5px solid #c9caee;
  border-bottom-left-radius: 8px;
  pointer-events: none;
}
.hm-group-items > .hm-item:first-child::after {
  top: -8px;
} /* mục đầu: rail bắt đầu gần đỉnh */
/* Mục đang chọn: SÁNG LÊN cả ĐƯỜNG DẪN tới mục active.
   - Các mục PHÍA TRÊN active (đứng trước active): chỉ TRỤC DỌC (border-left) sáng primary,
     còn nhánh ngang (border-bottom) vẫn neutral vì chúng không được chọn.
   - Mục active: cả trục dọc + nhánh cong quẹo vào đều sáng primary.
   z-index nâng đoạn active lên trên đoạn kế → không bị màu neutral vẽ đè lúc trùm 8px. */
.hm-group-items > .hm-item:has(~ .hm-item.active)::after {
  border-left-color: var(--primary-start, #6366f1);
}
.hm-group-items > .hm-item.active {
  z-index: 1;
}
.hm-group-items > .hm-item.active::after {
  border-left-color: var(--primary-start, #6366f1);
  border-bottom-color: var(--primary-start, #6366f1);
}
/* Đường kẻ ngăn cách trong sidebar */
.hm-sep {
  height: 1px;
  background: rgba(15, 23, 42, 0.07);
  margin: 8px 8px;
}
/* Đẩy phần tử (+ các mục sau nó) xuống sát đáy sidebar */
.hm-push-bottom {
  margin-top: auto;
}
.hm-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  border-radius: 10px;
  color: #475569;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  user-select: none;
  /* Cho variant <a> (vd. Hướng dẫn link YouTube) */
  text-decoration: none;
}
/* Pill bar dọc mép trái — chỉ hiện khi active (học style xmeta.vn) */
.hm-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 20px;
  background: var(--primary-start, #6366f1);
  border-radius: 3px;
  transition: transform 0.18s ease;
}
.hm-item:hover {
  text-decoration: none;
}
.hm-item i {
  font-size: 18px;
  flex-shrink: 0;
  width: 20px;
  display: inline-flex;
  justify-content: center;
  /* color set inline trên từng <i> — mỗi item 1 màu */
}
/* Icon menu (không nền) tô gradient chuyển sắc — đồng bộ phong cách app launcher.
   --c set inline trên từng <i>; chỉ áp cho icon menu trong .hm-scroll (né fold-row/control) */
.hm-scroll > .hm-item > i {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c, #64748b) 52%, #ffffff),
    var(--c, #64748b)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Icon control khác trong sidebar (applist, thu gọn, ví số dư, cài đặt, đăng xuất)
   cũng gradient — dùng class .hm-grad-ic + --c inline. KHÔNG áp cho nút Tải Extension
   (icon trắng trên nền gradient tím). */
.hm-sidebar .hm-grad-ic {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c, #6366f1) 52%, #ffffff),
    var(--c, #6366f1)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hm-item:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
  color: #334155;
}
.hm-item.active {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.12);
  color: var(--primary-start, #6366f1);
  font-weight: 600;
  /* Viền mỏng tím bao quanh (inset để không đẩy layout) */
  box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb, 99, 102, 241), 0.35);
}
.hm-item.active::before {
  transform: translateY(-50%) scaleY(1);
}
/* Logout item — đỏ NHẸ (như đang hover) + viền đỏ mảnh bao quanh (inset, không đẩy layout) */
.hm-item-danger {
  background: rgba(239, 68, 68, 0.05);
  color: #dc2626;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.26);
}
.hm-item-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.4);
}
/* Cài đặt — cùng kiểu pill như Đăng xuất (nền tint + viền inset), màu tím riêng */
.hm-item-settings {
  background: rgba(139, 92, 246, 0.05);
  color: #7c3aed;
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.26);
}
.hm-item-settings:hover {
  background: rgba(139, 92, 246, 0.1);
  color: #6d28d9;
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.4);
}
/* Nút thu gọn / mở rộng menu — hàng ở đáy */
.hm-fold-row {
  color: #64748b;
}
.hm-fold-row:hover {
  background: rgba(100, 116, 139, 0.1);
  color: #334155;
}
/* menu-fold là glyph thanh kẻ nên nhìn mảnh — bơm cỡ + độ đậm (synth-bold) cho dày, đỡ mảnh */
.hm-fold-row i {
  transition: transform 0.25s ease;
  font-size: 21px;
  font-weight: 800;
}
/* ---- Trạng thái RAIL (thu gọn ~66px): sidebar chỉ còn icon ---- */
.hm-sidebar.hm-collapsed {
  padding-left: 8px;
  padding-right: 8px;
}
.hm-collapsed .hm-item-label,
.hm-collapsed .hm-sec-name,
.hm-collapsed .hm-side-download > span {
  max-width: 0 !important;
  opacity: 0;
}
.hm-collapsed .hm-item,
.hm-collapsed .hm-sec-toggle {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}
.hm-collapsed .hm-sec-chev {
  display: none;
}
.hm-collapsed .hm-section-label {
  display: block;
  padding: 0;
  margin: 10px 0 5px;
  height: 2px;
  overflow: hidden;
}
.hm-collapsed .hm-section-label::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: #e5e7f0;
  border-radius: 2px;
}
.hm-collapsed .hm-group-items {
  margin-left: 0;
  padding-left: 0;
}
.hm-collapsed .hm-group-items > .hm-item::after {
  display: none;
}
.hm-collapsed .hm-group-items > .hm-item:first-child {
  margin-top: 2px;
}
.hm-collapsed .hm-side-header {
  padding: 8px 6px;
  gap: 6px;
  align-items: center;
}
.hm-collapsed .hm-side-user {
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hm-collapsed .hm-side-info {
  display: none;
}
/* Rail: avatar + 2 nút + nút tải BẰNG NHAU 40×40, bo góc 11, canh giữa */
.hm-collapsed .hm-side-avatar {
  width: 40px;
  height: 40px;
}
.hm-collapsed .hm-side-actions {
  gap: 6px;
}
.hm-collapsed .hm-side-act {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}
.hm-collapsed .hm-side-act i {
  font-size: 18px;
}
.hm-collapsed .hm-side-download {
  width: 40px;
  height: 40px;
  padding: 0;
  gap: 0;
  border-radius: 11px;
}
/* Tooltip nhãn khi thu gọn (rail) — hiện NGAY, khỏi trễ như title mặc định */
.hm-tip {
  position: fixed;
  z-index: 3000;
  transform: translateY(-50%);
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.08s ease;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.22);
}
.hm-tip.on {
  opacity: 1;
}

/* ============================================================
   DANH SÁCH ỨNG DỤNG — launcher ở đầu + popup flyout bên cạnh
   ============================================================ */
.hm-applist {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.09);
  color: #4f46e5;
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb, 99, 102, 241), 0.22);
  transition: background 0.15s ease;
}
.hm-applist > i:first-child {
  font-size: 18px;
  flex-shrink: 0;
}
.hm-applist-lb {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-applist-arw {
  font-size: 15px;
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.hm-applist:hover,
.hm-applist.open {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.16);
}
.hm-applist.open .hm-applist-arw {
  transform: translateX(2px);
}
/* Popup flyout bên phải sidebar */
/* Popup flyout bên phải sidebar - Bento Grid Launchpad (Signature FIOX) */
.hm-app-popup {
  position: absolute;
  left: calc(100% + 12px);
  top: 8px;
  width: 450px;
  max-width: calc(100vw - 260px);
  z-index: 50;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow:
    0 20px 50px -12px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(99, 102, 241, 0.06);
  padding: 14px;
  display: flex;
  flex-direction: column;
  max-height: min(82vh, 620px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px) scale(0.98);
  transform-origin: left top;
  pointer-events: none;
  transition:
    opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.hm-app-popup.open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.hm-app-popup::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 18px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  transform: rotate(45deg);
}
.hm-app-popup-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 10px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.hm-app-popup-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #6366f1;
  text-transform: uppercase;
}
.hm-app-popup-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6366f1;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
  flex-shrink: 0;
}
.hm-app-popup-count {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid #e2e8f0;
  font-family: var(--bs-font-monospace, monospace);
}
/* Ô tìm ứng dụng (lọc realtime) */
.hm-app-search {
  position: relative;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.hm-app-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: #94a3b8;
  pointer-events: none;
  transition: color 0.15s ease;
}
.hm-app-search:focus-within i {
  color: #6366f1;
}
.hm-app-search-input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #1e293b;
  font-size: 12.5px;
  outline: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.hm-app-search-input::placeholder {
  color: #94a3b8;
}
.hm-app-search-input:focus {
  border-color: #6366f1;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* Bento 2-column Grid */
.hm-app-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
  overflow-y: auto;
  min-height: 0;
  padding: 8px 4px 8px 4px;
  margin: 0 -4px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.hm-app-grid::-webkit-scrollbar {
  width: 6px;
}
.hm-app-grid::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 99px;
}
.hm-app-grid::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Bento App Card */
.hm-app-grid .hm-app {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  padding: 11px;
  border-radius: 14px;
  text-align: left;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.18s cubic-bezier(0.2, 0, 0, 1),
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.hm-app-grid .hm-app::before {
  display: none;
}
.hm-app-grid .hm-app:hover {
  z-index: 2;
  transform: translateY(-2px);
  background: #ffffff;
  border-color: color-mix(in srgb, var(--c, #6366f1) 45%, #e2e8f0);
  box-shadow:
    0 8px 20px -4px rgba(15, 23, 42, 0.08),
    0 0 0 1px color-mix(in srgb, var(--c, #6366f1) 20%, transparent);
}
.hm-app-grid .hm-app:active {
  transform: translateY(0);
}
.hm-app-grid .hm-app.active {
  z-index: 2;
  background: color-mix(in srgb, var(--c, #6366f1) 10%, #ffffff);
  border-color: color-mix(in srgb, var(--c, #6366f1) 50%, #e2e8f0);
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--c, #6366f1) 40%, transparent);
}
.hm-app-grid .hm-app.active .hm-app-lb {
  color: var(--c, #6366f1);
}
.hm-app-grid .hm-app.hm-app-hide {
  display: none !important;
}

/* Icon Container */
.hm-app-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--c, #6366f1) 12%, #f1f5f9);
  border: 1px solid color-mix(in srgb, var(--c, #6366f1) 22%, transparent);
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease;
}
.hm-app-grid .hm-app:hover .hm-app-ic {
  transform: scale(1.08);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c, #6366f1) 30%, transparent);
}
.hm-app-ic i {
  font-size: 20px;
  width: auto;
  line-height: 1;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c, #64748b) 60%, #ffffff),
    var(--c, #64748b)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* App text info */
.hm-app-tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hm-app-lb {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}
.hm-app-grid .hm-app:hover .hm-app-lb {
  color: var(--c, #6366f1);
}
.hm-app-de {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-app-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 10px;
  color: #94a3b8;
  font-size: 12.5px;
}
.hm-app-empty i {
  font-size: 28px;
  opacity: 0.7;
}

/* ============ Widget Chat Hỗ trợ AI (HOME) ============ */
.sup-chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 3000;
}
/* Cụm đếm bên PHẢI của footer lưới (clone/page/bm/pixel/group) né nút hỗ trợ .sup-fab (56px, góc phải-dưới) */
.border-top.d-flex.justify-content-between.align-items-center
  > .d-flex.align-items-center.border.rounded:last-child {
  margin-right: 70px;
}
/* Ads: cụm trạng thái là #footerStats (tab TKQC) / #footerStatsCamp (tab Camp), KHÔNG phải last-child → target theo id */
#footerStats,
#footerStatsCamp {
  margin-right: 70px;
}
.sup-fab {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #d6f7f9 100%);
  box-shadow:
    0 8px 22px -4px rgba(45, 205, 210, 0.55),
    0 2px 7px rgba(8, 90, 95, 0.18),
    0 0 0 3px rgba(45, 205, 210, 0.22);
  transition:
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease;
  overflow: visible;
  animation: supAura 2.8s ease-in-out infinite;
}
/* Tia sáng quét ngang — hiệu ứng "lung linh" (sweep teal để hợp với gif) */
.sup-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    120deg,
    transparent 34%,
    rgba(45, 205, 210, 0.28) 50%,
    transparent 66%
  );
  background-size: 260% 100%;
  background-position: 180% 0;
  animation: supShine 4.8s ease-in-out infinite;
  pointer-events: none;
}
.sup-fab img {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 50%;
  display: block;
  pointer-events: none;
}
.sup-fab:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    0 14px 30px -6px rgba(45, 205, 210, 0.68),
    0 3px 9px rgba(8, 90, 95, 0.22),
    0 0 0 5px rgba(45, 205, 210, 0.26);
}
.sup-fab:active {
  transform: scale(0.95);
}
/* Có tin chưa đọc → rung nhẹ + huy hiệu số */
@keyframes supShake {
  0%,
  88%,
  100% {
    transform: rotate(0);
  }
  90% {
    transform: rotate(-11deg);
  }
  93% {
    transform: rotate(9deg);
  }
  96% {
    transform: rotate(-5deg);
  }
}
@keyframes supPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}
@keyframes supAura {
  0%,
  100% {
    filter: drop-shadow(0 0 3px rgba(45, 205, 210, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(45, 205, 210, 0.78));
  }
}
@keyframes supShine {
  0% {
    background-position: 180% 0;
  }
  16% {
    background-position: -80% 0;
  }
  100% {
    background-position: -80% 0;
  }
}
.sup-chat.sup-unread .sup-fab {
  animation:
    supShake 3.2s ease-in-out infinite,
    supAura 2.8s ease-in-out infinite;
}
.sup-chat.sup-unread .sup-fab::after {
  content: attr(data-count);
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border-radius: 999px;
  border: 2px solid #fff;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  animation: supPulse 1.8s ease-out infinite;
}
.sup-panel {
  position: absolute;
  right: 0;
  bottom: 66px;
  width: 366px;
  max-width: calc(100vw - 40px);
  height: 524px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border: 1px solid rgba(99, 102, 241, 0.12);
  border-radius: 18px;
  box-shadow:
    0 24px 60px -14px rgba(60, 50, 120, 0.4),
    0 6px 18px -8px rgba(30, 20, 70, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transform-origin: bottom right;
  transition:
    opacity 0.2s ease,
    transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
}
.sup-chat.open .sup-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.sup-chat.open .sup-fab {
  transform: scale(0.9);
}
.sup-hd {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  background: linear-gradient(135deg, #6d6ff2 0%, #8b5cf6 60%, #a855f7 100%);
  color: #fff;
  box-shadow: 0 3px 12px -3px rgba(99, 102, 241, 0.4);
}
.sup-hd-t {
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sup-hd-t i {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  font-size: 17px;
}
.sup-hd-t i::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid #8b5cf6;
}
.sup-x {
  background: rgba(255, 255, 255, 0.18);
  border: 0;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s;
}
.sup-x:hover {
  background: rgba(255, 255, 255, 0.32);
}
.sup-th {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f7f8fb;
  scrollbar-width: thin;
  scrollbar-color: #cdd2dc transparent;
}
.sup-th::-webkit-scrollbar {
  width: 5px;
}
.sup-th::-webkit-scrollbar-track {
  background: transparent;
}
.sup-th::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5);
  border-radius: 99px;
}
.sup-th::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.8);
}
.sup-in textarea {
  scrollbar-width: thin;
  scrollbar-color: #cdd2dc transparent;
}
.sup-in textarea::-webkit-scrollbar {
  width: 4px;
}
.sup-in textarea::-webkit-scrollbar-track {
  background: transparent;
}
.sup-in textarea::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.5);
  border-radius: 99px;
}
.sup-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
}
.sup-msg.u {
  align-self: flex-end;
  align-items: flex-end;
}
.sup-msg.a {
  align-self: flex-start;
  align-items: flex-start;
}
.sup-bub {
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.sup-bub.u {
  background: linear-gradient(135deg, #6366f1, #7c6ff0);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.sup-bub.a {
  background: #fff;
  color: #334155;
  border: 1px solid #e6e9f1;
  border-bottom-left-radius: 4px;
}
.sup-agent-tag {
  font-size: 10.5px;
  font-weight: 700;
  color: #16a34a;
  margin: 0 0 3px 4px;
}
.sup-navlink {
  color: #6366f1;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.sup-navlink[data-view-nav],
.sup-navlink.sup-pagelink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 5px 3px 1px 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff !important;
  text-decoration: none;
  font-size: 12.5px;
  box-shadow: 0 3px 10px -3px rgba(99, 102, 241, 0.5);
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease;
}
.sup-navlink[data-view-nav]:hover,
.sup-navlink.sup-pagelink:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px -3px rgba(99, 102, 241, 0.6);
}
[data-bs-theme="dark"] .sup-navlink {
  color: #a5b4fc;
}
.sup-typing {
  display: flex;
  gap: 4px;
  align-items: center;
}
.sup-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b6bdca;
  animation: sup-blink 1.2s infinite;
}
.sup-typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.sup-typing span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes sup-blink {
  0%,
  60%,
  100% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }
}
.sup-in {
  position: relative;
  flex-shrink: 0;
  padding: 10px;
  border-top: 1px solid #e6e9f1;
  background: #fff;
}
.sup-in textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  border: 1px solid #e6e9f1;
  border-radius: 12px;
  padding: 9px 46px 9px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  font-family: inherit;
  outline: none;
  max-height: 96px;
  background: #f7f8fb;
  color: #334155;
  transition: border-color 0.15s;
}
.sup-in textarea:focus {
  border-color: #6366f1;
  background: #fff;
}
/* Ghim MÉP DƯỚI: 1 dòng thì căn giữa dòng, gõ nhiều dòng nút bám đáy (không nhảy lên trên) */
.sup-send {
  position: absolute;
  right: 15px;
  bottom: 14px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    filter 0.15s,
    transform 0.12s;
}
.sup-send:hover {
  filter: brightness(1.08);
}
.sup-send:active {
  transform: scale(0.9);
}
[data-bs-theme="dark"] .sup-panel {
  background: #1b2130;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .sup-th {
  background: #12161f;
}
[data-bs-theme="dark"] .sup-bub.a {
  background: #232e3d;
  color: #e7eaf0;
  border-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .sup-in {
  background: #1b2130;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .sup-in textarea {
  background: #12161f;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e7eaf0;
}
[data-bs-theme="dark"] .sup-th::-webkit-scrollbar-thumb {
  background: #3a4150;
}
/* Rail: launcher chỉ còn icon */
.hm-collapsed .hm-applist {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}
.hm-collapsed .hm-applist-lb,
.hm-collapsed .hm-applist-arw {
  display: none;
}

/* ================================================================
   Sidebar header: user card ở đầu sidebar
   ================================================================ */
.hm-side-header {
  position: relative;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 11px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e6e9f1;
  box-shadow: 0 6px 18px -8px rgba(30, 41, 90, 0.18);
}

/* Thẻ user — kiểu "Thẻ ngân hàng tím" (mẫu 20): gradient tím + vệt holographic, chip vàng, nhãn MEMBER, số thẻ mono */
.hm-side-user {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Avatar — huy hiệu tròn tím gradient, chữ tắt trắng */
.hm-side-avatar {
  position: relative;
  z-index: 2;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  background: linear-gradient(
    135deg,
    var(--primary-start, #6366f1),
    var(--primary-end, #8b5cf6) 60%,
    #a855f7
  );
  box-shadow: 0 3px 8px -2px rgba(var(--primary-rgb, 99, 102, 241), 0.5);
}
/* Chấm online + vòng nhịp */
.hm-side-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  z-index: 3;
  background: radial-gradient(circle at 35% 30%, #6ee7b7, #10b981 60%, #059669);
  box-shadow:
    0 0 0 2.5px #ffffff,
    0 0 5px rgba(16, 185, 129, 0.5);
}
.hm-side-info {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Nhãn MEMBER + tên chủ thẻ */
.hm-side-name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.12;
  color: #1e293b;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-side-name::before {
  content: "MEMBER";
  display: block;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #a78bfa;
  margin-bottom: 1px;
}
/* Số dư = số thẻ mono, xanh phát sáng */
.hm-side-bal {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-family:
    ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #059669;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-side-bal i {
  font-size: 13px;
  flex-shrink: 0;
  color: #059669;
}
/* Hành động tài khoản (Cài đặt / Đăng xuất) — nút icon trắng mờ trên thẻ tím */
.hm-side-actions {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hm-side-act {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  background: #f1f5f9;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease;
}
.hm-side-act i {
  font-size: 14px;
  line-height: 1;
}
.hm-side-act:hover {
  background: #efeafe;
  color: #7c3aed;
  transform: translateY(-1px);
}
.hm-side-act:active {
  transform: translateY(0);
}
.hm-side-act-danger:hover {
  background: #fdecec;
  color: #dc2626;
}
/* Nút tải Extension — dưới user card, gradient tím khớp theme app */
.hm-side-download {
  position: relative;
  z-index: 1;
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 13px;
  background:
    radial-gradient(
      140% 120% at 0% 0%,
      rgba(255, 255, 255, 0.14),
      transparent 48%
    ),
    linear-gradient(
      135deg,
      var(--primary-start, #6366f1) 0%,
      var(--primary-end, #8b5cf6) 55%,
      #a855f7 100%
    );
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.15px;
  text-decoration: none;
  box-shadow:
    0 5px 16px -6px rgba(var(--primary-rgb, 99, 102, 241), 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
  overflow: hidden;
}
/* Highlight góc tĩnh — đồng bộ thẻ user (đã bỏ vệt chạy) */
.hm-side-download::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    120% 90% at 88% -20%,
    rgba(255, 255, 255, 0.2),
    transparent 55%
  );
}
.hm-side-download > i,
.hm-side-download > span {
  position: relative;
  z-index: 2;
}
.hm-side-download i {
  font-size: 15px;
}
.hm-side-download b {
  font-weight: 800;
}
.hm-side-download:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.05);
  box-shadow: 0 8px 20px rgba(var(--primary-rgb, 99, 102, 241), 0.4);
  color: #ffffff;
}
/* shine sweep nhẹ khi hover */
.hm-side-download::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transition: left 0.55s ease;
}
.hm-side-download:hover::before {
  left: 130%;
}

.hm-view {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
}
.hm-view.active {
  display: block;
}

.hm-empty-view {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 48px 24px;
}
.hm-empty-ico {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.08),
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.06)
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hm-empty-ico i {
  font-size: 34px;
  color: var(--primary-start, #6366f1);
  opacity: 0.8;
}
.hm-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: #475569;
  margin: 0;
}
.hm-empty-sub {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
  max-width: 360px;
  line-height: 1.5;
}

/* Tablet — rail mode (icon only) */
@media (max-width: 1024px) {
  .hm-sidebar {
    flex: 0 0 64px;
    padding: 14px 8px;
  }
  .hm-item {
    justify-content: center;
    padding: 12px;
    gap: 0;
  }
  .hm-item::before,
  .hm-item.active::before {
    display: none;
  }
  .hm-item-label,
  .hm-section-label {
    display: none;
  }
  /* Sidebar header thu gọn — chỉ hiện avatar */
  .hm-side-info {
    display: none;
  }
  .hm-side-user {
    justify-content: center;
    padding: 6px;
    border-radius: 50%;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .hm-side-user:hover {
    transform: none;
    box-shadow: none;
    border: none;
  }
}
/* ============================================================
   MOBILE (≤640px) — VỎ ĐIỆN THOẠI THỐNG NHẤT (mọi trang)
   • app-switcher (#header .col giữa) → bottom-nav cố định
   • sidebar (.hm-sidebar) → drawer trượt, mở bằng hamburger
   • nội dung full-width. Hamburger/backdrop do scripts.js tạo.
   ============================================================ */
@media (max-width: 640px) {
  html,
  body {
    zoom: 1 !important;
  }
  #app {
    padding: 0 !important;
  }
  .page-body {
    gap: 0 !important;
  }
  /* thu slot 224px → 0 (nội dung full-width) + bỏ stacking-context để drawer nổi trên cùng */
  .page-body > .hm-side-slot {
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    position: static !important;
    z-index: auto !important;
  }

  /* --- Header: app-switcher xuống bottom-nav, ẩn brand + zoom --- */
  #header {
    pointer-events: none;
  }
  #header .col-4:not(.justify-content-center) {
    display: none !important;
  }
  #header .col-4.d-flex.justify-content-center {
    pointer-events: auto;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    z-index: 1100;
  }
  /* ⚠ PHẢI scope dưới #header ...rounded: modern-theme.css có
     "#header .nav-pills-container, #header .rounded.row {background:transparent!important}" (1,2,0)
     và "#header .nav-pills-container a.active {background:trắng!important}" (1,1,2) — rule .nav-pills-container
     trần (0,1,0) THUA → nền trắng KHÔNG áp (nền tím lộ qua = "tù"). #header .nav-pills-container.rounded (1,2,0+) mới thắng. */
  /* ⚠ dùng .rounded.row (1,3,0): style.css nạp TRƯỚC modern-theme.css → nếu chỉ .rounded (1,2,0)
     sẽ HÒA với "#header .rounded.row{transparent!important}" và THUA (nạp sau). .row nâng lên (1,3,0) thắng chắc. */
  #header .nav-pills-container.rounded.row {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    --bs-gutter-x: 0px !important;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px 22px 0 0 !important;
    background: #fff !important;
    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.12) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow: visible !important;
    line-height: 1.1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #header .nav-pills-container.rounded.row > a {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 600 !important;
    color: #8b93a7 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    overflow: visible !important;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s ease;
  }
  /* diệt overlay ::after (glass gradient) của modern-theme trên từng item */
  #header .nav-pills-container.rounded.row > a::after {
    display: none !important;
    content: none !important;
  }
  /* icon = "chip" bo góc; active = chip GRADIENT nổi khối, nhấc lên -3px + glow (premium) */
  #header .nav-pills-container.rounded.row > a .nav-pill-ic {
    font-size: 20px !important;
    margin: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 15px !important;
    border-radius: 14px !important;
    color: #8b93a7 !important;
    transition:
      transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
      background 0.22s ease,
      box-shadow 0.22s ease,
      color 0.18s ease !important;
  }
  #header .nav-pills-container.rounded.row > a span {
    font-size: 10px !important;
    color: #98a0b3 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }
  #header .nav-pills-container.rounded.row > a.active {
    color: #6d5efc !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #header .nav-pills-container.rounded.row > a.active .nav-pill-ic {
    background: linear-gradient(
      135deg,
      #6366f1 0%,
      #8b5cf6 52%,
      #a855f7 100%
    ) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(99, 102, 241, 0.42) !important;
    transform: translateY(-3px) !important;
  }
  #header .nav-pills-container.rounded.row > a.active span {
    color: #6d5efc !important;
    font-weight: 700 !important;
  }
  /* Chạm/hover/focus: TẮT hộp bao quanh cả nút của modern-theme (::before viền gradient +
     box-shadow "bong bóng"/glow + transform translateY/scale) — nhìn cực xấu với chip mới.
     Chỉ chip icon phản hồi. (::after đã display:none ở trên.) */
  #header .nav-pills-container.rounded.row > a::before {
    display: none !important;
    content: none !important;
  }
  #header .nav-pills-container.rounded.row > a:hover,
  #header .nav-pills-container.rounded.row > a:focus,
  #header .nav-pills-container.rounded.row > a:focus-visible,
  #header .nav-pills-container.rounded.row > a:active {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    border-color: transparent !important;
  }
  #header .nav-pills-container.rounded.row > a:not(.active):hover,
  #header .nav-pills-container.rounded.row > a:not(.active):focus {
    color: #8b93a7 !important;
  }
  /* Phản hồi chạm nhẹ: chỉ tô chip icon (không phải cả nút) */
  #header
    .nav-pills-container.rounded.row
    > a:not(.active):active
    .nav-pill-ic {
    background: rgba(109, 94, 252, 0.12) !important;
    color: #6d5efc !important;
  }

  /* --- Nội dung full-width + chừa chỗ bottom-nav --- */
  .app-wrapper {
    border-radius: 0 !important;
  }
  /* Reserve chiều cao BOTTOM-NAV: account-wrapper có height:calc(100vh-55px) CỐ ĐỊNH
     (page-body height auto, padding-bottom KHÔNG đẩy được). Co account-wrapper thêm chiều
     cao nav -> page-body/nội dung KẾT THÚC TRÊN nav, không bị nav fixed đè lên. */
  .account-wrapper {
    height: calc(100vh - 106px) !important;
    height: calc(100dvh - 106px - env(safe-area-inset-bottom, 0px)) !important;
  }
  .account-wrapper,
  .hm-content {
    padding-bottom: 0 !important;
  }
  #app[data="via"] .hm-content {
    padding-top: 52px !important;
  }
  /* #adPanel absolute neo viewport, height:calc(100% - 153px) = chừa 55px đáy (chuẩn desktop).
     Mobile page-body đã co lên chừa bottom-nav -> đáy adPanel PHẢI dừng TRÊN footer
     (.border-top Tổng/Đã chọn), như desktop, nếu không nó thò xuống che footer + đè bottom-nav.
     Reserve = nav-reserve(67) + footer(≤45) + gap(6) = 118px. Ghim bằng bottom + top:98 giữ nguyên.
     #app #adPanel (2,0,0) để height:auto thắng modern-theme #adPanel height:...!important (1,0,0). */
  #app #adPanel {
    top: 98px !important;
    height: auto !important;
    bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --- Sidebar → drawer trượt (mở bằng hamburger) --- */
  .hm-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84vw;
    max-width: 320px;
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
    border-radius: 0 !important;
    background: #fff !important;
    padding: 58px 12px 24px !important;
  }
  body.hm-drawer-open .hm-sidebar {
    transform: translateX(0) !important;
  }
  .hm-sidebar .hm-item {
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 11px 14px !important;
  }
  .hm-sidebar .hm-item-label,
  .hm-sidebar .hm-section-label {
    display: block !important;
  }
  .hm-sidebar .hm-side-info {
    display: flex !important;
  }
  .hm-sidebar .hm-side-user {
    justify-content: flex-start !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(99, 102, 241, 0.06) !important;
    border: 1px solid rgba(99, 102, 241, 0.12) !important;
  }

  #hmDrawerBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s;
    z-index: 1150;
  }
  body.hm-drawer-open #hmDrawerBackdrop {
    opacity: 1;
    visibility: visible;
  }
  #hmDrawerBurger {
    position: fixed;
    top: 8px;
    left: 10px;
    width: 42px;
    height: 42px;
    z-index: 1250;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.4);
    cursor: pointer;
  }

  /* --- Chân trang app-page (Tổng/Đã chọn/Bôi đen + Tiền tệ) — gọn phẳng, 1 hàng --- */
  .border-top.d-flex.justify-content-between {
    padding: 9px 12px !important;
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    align-items: center !important;
  }
  .border-top.d-flex.justify-content-between::-webkit-scrollbar {
    display: none !important;
  }
  .border-top.d-flex.justify-content-between > div,
  .border-top.d-flex.justify-content-between > span {
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
  }
  .border-top.d-flex.justify-content-between .border {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .border-top.d-flex.justify-content-between .d-flex.gap-2 {
    gap: 12px !important;
  }
  .border-top.d-flex.justify-content-between strong {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    white-space: nowrap !important;
  }
  .border-top.d-flex.justify-content-between .badge {
    font-size: 10.5px !important;
    padding: 0.22em 0.5em !important;
    font-weight: 600 !important;
  }
  .border-top.d-flex.justify-content-between label,
  .border-top.d-flex.justify-content-between span {
    white-space: nowrap !important;
  }
  .border-top.d-flex.justify-content-between .border-end {
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding-right: 9px !important;
    margin-right: 7px !important;
  }
  .border-top.d-flex.justify-content-between select.form-select,
  .border-top.d-flex.justify-content-between .select2-selection__rendered {
    font-size: 11px !important;
  }
  .border-top.d-flex.justify-content-between .select2-container {
    min-width: 66px !important;
  }
  [data-bs-theme="dark"] .border-top.d-flex.justify-content-between strong {
    color: #cbd5e1 !important;
  }

  /* Support FAB nâng trên chân trang */
  .sup-chat {
    bottom: 120px !important;
  }

  /* --- Nút chữ → ICON (giảm kích thước toolbar/panel trên mobile) --- */
  #start,
  #stop {
    font-size: 0 !important;
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    margin-right: 8px !important;
    justify-content: center !important;
    gap: 0 !important;
  }
  #start > i,
  #stop > i {
    font-size: 20px !important;
    margin: 0 !important;
  }
  [id^="btnSort"][id$="Features"],
  [id^="btnOpen"][id*="FeatureStore"] {
    font-size: 0 !important;
    padding: 6px 9px !important;
  }
  [id^="btnSort"][id$="Features"] > i,
  [id^="btnOpen"][id*="FeatureStore"] > i {
    font-size: 15px !important;
    margin: 0 !important;
  }

  /* Popup (Swal modal) — vừa màn hình + KHÔNG phủ đè bottom-nav (dừng trên thanh nav) */
  .swal2-container {
    padding: 16px !important;
  }
  .swal2-container.swal2-center {
    bottom: 54px !important;
    height: auto !important;
  }
  .swal2-popup {
    width: auto !important;
    max-width: calc(100vw - 28px) !important;
    padding: 22px 18px !important;
  }

  /* Dark mode */
  [data-bs-theme="dark"] #header .nav-pills-container.rounded.row {
    background: #161b26 !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45) !important;
  }
  [data-bs-theme="dark"] #header .nav-pills-container.rounded.row > a,
  [data-bs-theme="dark"]
    #header
    .nav-pills-container.rounded.row
    > a
    .nav-pill-ic {
    color: #7b8395 !important;
  }
  [data-bs-theme="dark"] #header .nav-pills-container.rounded.row > a span {
    color: #6f778a !important;
  }
  [data-bs-theme="dark"] #header .nav-pills-container.rounded.row > a.active {
    color: #a99bff !important;
  }
  [data-bs-theme="dark"]
    #header
    .nav-pills-container.rounded.row
    > a.active
    .nav-pill-ic {
    color: #fff !important;
  }
  [data-bs-theme="dark"]
    #header
    .nav-pills-container.rounded.row
    > a.active
    span {
    color: #a99bff !important;
  }
  [data-bs-theme="dark"] .hm-sidebar {
    background: #1b2130 !important;
  }
  [data-bs-theme="dark"] .hm-sidebar .hm-side-user {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }
}
/* Hamburger/backdrop chỉ dùng ở mobile */
@media (min-width: 641px) {
  #hmDrawerBurger,
  #hmDrawerBackdrop {
    display: none !important;
  }
}

/* ===================================================================
   TRUNG TÂM HỖ TRỢ (sup-*) — view Nhóm hỗ trợ trong HOME
   =================================================================== */
/* ===================================================================
   TRUNG TÂM HỖ TRỢ (sup-*) — view Nhóm hỗ trợ trong HOME (REDESIGN)
   SaaS-clean: hero compact + stat chips glass, banner FB ngang full-width
   gradient xanh, card lưới trục ngang icon-trái/body/CTA-phải, shadow tinh tế.
   =================================================================== */
.sup-page {
  padding: 28px 28px 44px;
  max-width: 1080px;
  margin: 0 auto;
}

/* ---- HERO — gradient compact, stat chips bên phải ---- */
.sup-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 24px 28px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    var(--primary-start, #6366f1) 0%,
    var(--primary-end, #8b5cf6) 52%,
    #ec4899 100%
  );
  color: #ffffff;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(var(--primary-rgb, 99, 102, 241), 0.24);
  margin-bottom: 28px;
}
.sup-hero::before {
  content: "";
  position: absolute;
  top: -65%;
  right: 14%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.18),
    transparent 70%
  );
  pointer-events: none;
}
.sup-hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1 1 360px;
  min-width: 0;
}
.sup-hero-icon {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.sup-hero-icon i {
  font-size: 30px;
  color: #ffffff;
}
.sup-hero-text {
  min-width: 0;
}
.sup-hero-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.2;
}
.sup-hero-sub {
  margin: 7px 0 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
  max-width: 460px;
}

/* Stat chips trong hero — glass nhẹ */
.sup-hero-stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.sup-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sup-stat > i {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #ffffff;
  flex-shrink: 0;
}
.sup-stat-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.sup-stat-num {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.1px;
}
.sup-stat-lbl {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 1px;
  white-space: nowrap;
}

/* ---- POSTER HERO — ảnh nền + overlay + số liệu + QR góc ---- */
.sup-poster {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 300px;
  border-radius: 18px;
  margin-bottom: 28px;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.5);
}
.sup-poster-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sup-poster-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(10, 15, 40, 0.94),
    rgba(10, 15, 40, 0.35) 55%,
    rgba(10, 15, 40, 0.05)
  );
}
.sup-poster-in {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  color: #ffffff;
}
.sup-poster-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sup-poster-eyebrow i {
  color: #f59e0b;
}
.sup-poster-title {
  margin: 12px 0 0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.4px;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
}
.sup-poster-stats {
  display: flex;
  gap: 34px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.sup-poster-stat-num {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}
.sup-poster-stat-lbl {
  font-size: 11.5px;
  opacity: 0.82;
  margin-top: 3px;
}
.sup-poster-qr {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 3;
  width: fit-content;
  padding: 10px;
  border-radius: 14px;
  text-align: center;
  text-decoration: none;
  background: #ffffff;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.sup-poster-qr:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(0, 0, 0, 0.55);
}
.sup-poster-qr img {
  width: 112px;
  height: 112px;
  display: block;
}
.sup-poster-qr span {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: #0068ff;
}

/* ---- SECTION ---- */
.sup-section {
  margin-bottom: 26px;
}
.sup-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0 2px;
}
.sup-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.1px;
}
.sup-section-title i {
  color: var(--primary-start, #6366f1);
  font-size: 17px;
}
.sup-section-meta {
  font-size: 12px;
  color: #94a3b8;
}

/* ---- BANNER NỔI BẬT (Facebook) — ngang full-width, gradient xanh FB ---- */
.sup-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
  border-radius: 18px;
  text-decoration: none;
  overflow: hidden;
  color: #ffffff;
  background: linear-gradient(
    120deg,
    var(--primary-start, #6366f1) 0%,
    var(--primary-end, #8b5cf6) 100%
  );
  box-shadow: 0 14px 34px rgba(var(--primary-rgb, 99, 102, 241), 0.32);
  transition:
    transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.24s ease;
}
.sup-banner:hover {
  text-decoration: none;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(var(--primary-rgb, 99, 102, 241), 0.42);
}
.sup-banner-glow {
  position: absolute;
  top: -60%;
  right: -4%;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.22),
    transparent 68%
  );
  pointer-events: none;
}
.sup-banner-avatar {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sup-banner-avatar i {
  font-size: 40px;
  color: #ffffff;
}
.sup-banner-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sup-banner-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #ffffff;
}
.sup-banner-eyebrow i {
  font-size: 13px;
}
.sup-banner-name {
  margin-top: 9px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.1px;
}
.sup-banner-desc {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
}
.sup-banner-cta {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: 12px;
  background: #ffffff;
  color: #6d28d9;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.1px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.sup-banner-cta i {
  font-size: 16px;
  transition: transform 0.2s ease;
}
.sup-banner:hover .sup-banner-cta {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
.sup-banner:hover .sup-banner-cta i {
  transform: translate(2px, -2px);
}

/* ---- ZALO BANNER (trên cùng) — nền TÍM NHẸ (tông tím app), card trắng, icon tím ---- */
.sup-zbanner {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 26px 30px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #f4f2fe 0%, #ebe5fb 55%, #e2dbf8 100%);
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.14);
  box-shadow: 0 10px 30px rgba(var(--primary-rgb, 99, 102, 241), 0.14);
}
/* Vệt sáng + lưới chấm mờ tạo chiều sâu */
.sup-zbanner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(var(--primary-rgb, 99, 102, 241), 0.07) 1px,
    transparent 1px
  );
  background-size: 18px 18px;
  opacity: 0.6;
  pointer-events: none;
}
.sup-zbanner-glow {
  position: absolute;
  top: -45%;
  right: -2%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.16),
    transparent 70%
  );
  pointer-events: none;
}
.sup-zbanner-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.sup-zbanner-logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.14);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 99, 102, 241), 0.2);
}
.sup-zbanner-logo img {
  width: 26px;
  height: 26px;
}
.sup-zbanner-badge {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 99, 102, 241), 0.35);
}
.sup-zbanner-title {
  position: relative;
  z-index: 1;
  font-size: 30px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: #312e81;
  margin-bottom: 18px;
}
.sup-zbanner-title strong {
  color: #7c3aed;
  font-weight: 900;
}
.sup-zbanner-feats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.sup-zfeat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.1);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb, 99, 102, 241), 0.1);
}
.sup-zfeat > i {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #6d28d9;
  box-shadow: 0 3px 8px rgba(124, 58, 237, 0.2);
}
.sup-zfeat-t {
  font-size: 14px;
  font-weight: 800;
  color: #312e81;
  line-height: 1.2;
}
.sup-zfeat-d {
  font-size: 12px;
  color: #6b6f8c;
  line-height: 1.45;
  margin-top: 2px;
}
.sup-zbanner-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(var(--primary-rgb, 99, 102, 241), 0.2);
  font-size: 13.5px;
  font-weight: 700;
  color: #4338ca;
  text-align: center;
}
.sup-zbanner-foot i {
  color: #7c3aed;
  font-size: 17px;
  flex-shrink: 0;
}
@media (max-width: 760px) {
  .sup-zbanner-feats {
    grid-template-columns: 1fr;
  }
  .sup-zbanner-title {
    font-size: 23px;
  }
}

/* ---- GRID ---- */
.sup-grid {
  display: grid;
  gap: 14px;
}
.sup-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sup-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- CARD — base, QR card dọc căn giữa ---- */
.sup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 20px 16px 16px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}
.sup-card:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-3px);
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.28);
  box-shadow: 0 14px 30px rgba(var(--primary-rgb, 99, 102, 241), 0.14);
}
.sup-card-badge {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  background: linear-gradient(135deg, #eef2ff, #ede9fe);
  color: var(--primary-start, #6366f1);
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.15);
}
/* QR image trong card */
.sup-card-qr-img {
  width: 130px;
  height: 130px;
  padding: 8px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e6eaf5;
  box-shadow: 0 6px 16px -8px rgba(0, 104, 255, 0.35);
  flex-shrink: 0;
}
.sup-card-qr-img img {
  width: 100%;
  height: 100%;
  display: block;
}
/* Nhãn "Quét" — pill nhỏ dưới card */
.sup-card-scan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0068ff;
  background: #eef4ff;
}
.sup-card-scan i {
  font-size: 14px;
}
.sup-card-admin-bill .sup-card-scan {
  color: #b45309;
  background: #fef3c7;
}
.sup-card-admin-dev .sup-card-scan {
  color: #6d28d9;
  background: #ede9fe;
}
.sup-card-zalo .sup-card-name i {
  color: #0068ff;
}
.sup-card-admin-bill .sup-card-name i {
  color: #d97706;
}
.sup-card-admin-dev .sup-card-name i {
  color: #7c3aed;
}
.sup-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  flex-shrink: 0;
}
.sup-card-zalo .sup-card-icon {
  background: linear-gradient(135deg, #dbeafe, #e0f2fe);
}
.sup-card-zalo .sup-card-icon img {
  width: 28px;
  height: 28px;
}
.sup-card-admin-bill .sup-card-icon {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.18);
}
.sup-card-admin-dev .sup-card-icon {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #7c3aed;
  box-shadow: 0 4px 10px rgba(124, 58, 237, 0.18);
}
.sup-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sup-card-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sup-free {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  padding: 2px 7px;
  border-radius: 5px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.32);
}
.sup-card-desc {
  margin-top: 4px;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
}
.sup-card-tags {
  margin-top: 9px;
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sup-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}
.sup-tag-amber {
  background: #fef3c7;
  color: #b45309;
}
.sup-tag-violet {
  background: #ede9fe;
  color: #6d28d9;
}
.sup-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  align-self: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary-start, #6366f1);
  letter-spacing: 0.1px;
}
.sup-card-cta i {
  font-size: 14px;
  transition: transform 0.2s ease;
}
.sup-card:hover .sup-card-cta i {
  transform: translate(2px, -2px);
}
/* CTA dạng pill nền tô cho card admin → khối phải không rỗng */
.sup-card-cta-pill {
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
  transition: background 0.2s ease;
}
.sup-card-admin-bill .sup-card-cta-pill {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
}
.sup-card-admin-dev .sup-card-cta-pill {
  background: rgba(124, 58, 237, 0.1);
  color: #6d28d9;
}
.sup-card-admin-bill:hover .sup-card-cta-pill {
  background: rgba(245, 158, 11, 0.18);
}
.sup-card-admin-dev:hover .sup-card-cta-pill {
  background: rgba(124, 58, 237, 0.18);
}
/* Admin card — QR card căn giữa như các card khác */
.sup-card-admin {
  align-items: center;
}

/* ---- TIP — amber ---- */
.sup-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.08),
    rgba(251, 191, 36, 0.05)
  );
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #92400e;
  font-size: 13px;
  line-height: 1.55;
}
.sup-tip i {
  font-size: 20px;
  color: #d97706;
  flex-shrink: 0;
  margin-top: 1px;
}
.sup-tip a {
  color: #b45309;
  font-weight: 700;
  text-decoration: underline;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .sup-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sup-hero-stats {
    flex: 1 1 100%;
  }
  .sup-stat {
    flex: 1;
  }
}
@media (max-width: 760px) {
  .sup-page {
    padding: 20px 16px 36px;
  }
  .sup-poster {
    min-height: 0;
  }
  .sup-poster-in {
    padding: 22px;
  }
  .sup-poster-title {
    font-size: 23px;
  }
  .sup-poster-stats {
    gap: 22px;
  }
  .sup-poster-qr {
    position: static;
    margin-top: 18px;
    padding: 8px;
  }
  .sup-poster-qr img {
    width: 96px;
    height: 96px;
  }
  .sup-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .sup-hero-stats {
    width: 100%;
    flex-wrap: wrap;
  }
  .sup-stat {
    flex: 1 1 calc(50% - 5px);
  }
  .sup-grid-3,
  .sup-grid-2 {
    grid-template-columns: 1fr;
  }
  .sup-banner {
    flex-wrap: wrap;
    gap: 16px;
  }
  .sup-banner-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ===================================================================
   ĐĂNG NHẬP / ĐĂNG KÝ (au-*) — view 'auth' trong HOME, sidebar ẨN
   =================================================================== */
/* Khi auth view active → ẩn sidebar (full-page login) */
.hm-view.active[data-view="auth"] ~ .hm-sidebar,
.hm-sidebar:has(~ .hm-view.active[data-view="auth"]) {
  display: none;
}
/* Fallback: dùng class body khi view active (JS toggle) */
body.au-active .hm-sidebar {
  display: none !important;
}

/* HOME header — ẩn quality slot trên cùng (theo yêu cầu user).
   Giữ #quality ở hero dashboard (line 1445) và grid pages (BM/Ads/Page). */
#qualityHeader {
  display: none !important;
}

/* ===== AUTH FULLSCREEN MODE =====
   html.au-need-login set bởi inline script trong <head> (đọc localStorage
   sync TRƯỚC khi render) → ẩn header + reset #app padding/background NGAY,
   tránh flash thanh tím khi page load. body.au-active là fallback async. */
html.au-need-login #header,
body.au-active #header {
  display: none !important;
}
html.au-need-login #app,
body.au-active #app {
  padding: 0 !important;
  background-image: none !important;
  background: transparent !important;
}
html.au-need-login .app-wrapper,
body.au-active .app-wrapper {
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Cần login (sync html.au-need-login / async body.au-active) → ẩn overlay
   "Đang tải dữ liệu" (#loading) để KHÔNG flash trước màn đăng nhập khi F5.
   Màn login không tải data nên overlay này thừa. */
html.au-need-login #loading,
body.au-active #loading {
  display: none !important;
}
/* Trên route auth (html.au-need-login set sync ở <head>): ẩn LUÔN sidebar + mọi view
   non-auth + HIỆN view auth ngay từ paint đầu (dashboard là view active MẶC ĐỊNH trong
   HTML) → hết nháy vỏ trang HOME trước khi via.js kịp bật màn login. */
html.au-need-login .hm-sidebar {
  display: none !important;
}
html.au-need-login .hm-view.active:not([data-view="auth"]) {
  display: none !important;
}
html.au-need-login .hm-view[data-view="auth"] {
  display: block !important;
}

/* ===== AUTH PAGE — premium glass + animated mesh + decorative shapes =====
   Layered effects: dark gradient base + 4 mesh blobs (multi-color shift)
   + diagonal light beams + floating decorative shapes scattered. Card
   center là glass blur strong với border gradient highlight. */
.au-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 22px;
  background: linear-gradient(
    135deg,
    #050518 0%,
    #1a0b2e 35%,
    #16213e 70%,
    #0f0a26 100%
  );
  overflow: hidden;
}
/* Mesh blob 1 — top-left indigo */
.au-page::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  top: -160px;
  left: -120px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--primary-start, #6366f1) 0%,
    transparent 65%
  );
  filter: blur(80px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  animation: auMeshShift1 14s ease-in-out infinite alternate;
}
/* Mesh blob 2 — bottom-right pink */
.au-page::after {
  content: "";
  position: absolute;
  width: 640px;
  height: 640px;
  bottom: -200px;
  right: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, #ec4899 0%, transparent 65%);
  filter: blur(85px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  animation: auMeshShift2 16s ease-in-out infinite alternate;
}
/* Container các decorative shapes + extra mesh blobs (cyan, violet) */
.au-page > .au-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.au-deco::before {
  /* Mesh blob 3 — center cyan */
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  top: 30%;
  left: 50%;
  margin-left: -240px;
  border-radius: 50%;
  background: radial-gradient(circle, #06b6d4 0%, transparent 65%);
  filter: blur(90px);
  opacity: 0.32;
  animation: auMeshShift3 18s ease-in-out infinite alternate;
}
.au-deco::after {
  /* Diagonal light beam SW→NE */
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: conic-gradient(
    from 220deg at 50% 50%,
    transparent 0deg,
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.08) 30deg,
    transparent 60deg,
    transparent 220deg,
    rgba(236, 72, 153, 0.06) 250deg,
    transparent 280deg
  );
  animation: auBeamRotate 30s linear infinite;
}
/* Floating decorative shapes */
.au-shape {
  position: absolute;
  border-radius: 20%;
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
}
.au-shape.s1 {
  width: 80px;
  height: 80px;
  top: 12%;
  right: 18%;
  background: linear-gradient(135deg, #f472b6, #ec4899);
  border-radius: 24px;
  transform: rotate(15deg);
  box-shadow: 0 12px 32px rgba(236, 72, 153, 0.35);
  animation: auFloatY 6s ease-in-out infinite alternate;
}
.au-shape.s2 {
  width: 64px;
  height: 64px;
  bottom: 18%;
  left: 12%;
  background: linear-gradient(135deg, #60a5fa, var(--primary-start, #6366f1));
  border-radius: 50%;
  box-shadow: 0 12px 32px rgba(var(--primary-rgb, 99, 102, 241), 0.4);
  animation: auFloatY 7s ease-in-out infinite alternate-reverse;
}
.au-shape.s3 {
  width: 52px;
  height: 52px;
  top: 22%;
  left: 8%;
  background: linear-gradient(135deg, #facc15, #f59e0b);
  border-radius: 16px;
  transform: rotate(-12deg);
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.35);
  animation: auFloatY 8s ease-in-out infinite alternate;
}
.au-shape.s4 {
  width: 44px;
  height: 44px;
  bottom: 22%;
  right: 14%;
  background: linear-gradient(135deg, #34d399, #10b981);
  border-radius: 50%;
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.35);
  animation: auFloatY 5.5s ease-in-out infinite alternate-reverse;
}
@keyframes auMeshShift1 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(90px, 70px) scale(1.12);
  }
}
@keyframes auMeshShift2 {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(-70px, -90px) scale(1.15);
  }
}
@keyframes auMeshShift3 {
  0% {
    transform: translate(-20px, -30px) scale(1);
  }
  100% {
    transform: translate(40px, 50px) scale(1.18);
  }
}
@keyframes auBeamRotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes auFloatY {
  0% {
    transform: translateY(0) rotate(var(--rot, 0deg));
  }
  100% {
    transform: translateY(-22px) rotate(var(--rot, 0deg));
  }
}

/* Floating glass card — split 2-pane (hero + form) horizontal slide
   khi switch login↔register. Glass effect mạnh: blur 30px + opacity ~0.92
   form pane (giữ readable). Border highlight gradient + multi-tier shadow.
   min-height 660px: đủ room cho form + error message (.au-error) không
   gây scroll trong form pane. Card expand thêm 40px khi has-error class
   set (JS toggle để xử lý case error dài 2-3 dòng). */
.au-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  min-height: 660px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    0 40px 80px rgba(15, 23, 42, 0.5),
    0 16px 32px rgba(var(--primary-rgb, 99, 102, 241), 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  transition: min-height 0.3s ease;
}
.au-card.has-error {
  min-height: 720px;
}
/* Gradient border highlight — pseudo element padding 1px around card */
.au-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.6),
    rgba(236, 72, 153, 0.4) 50%,
    rgba(var(--primary-rgb, 99, 102, 241), 0.6)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}

/* HERO — default RIGHT 50%, slide sang LEFT khi .is-register */
.au-hero {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  padding: 40px 36px;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    var(--primary-start, #6366f1) 0%,
    var(--primary-end, #8b5cf6) 45%,
    #d946ef 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
  transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
.au-card.is-register .au-hero {
  transform: translateX(-100%);
}

/* Hero contents — 2 variants (login/register), display swap */
.au-hero-content {
  position: relative;
  z-index: 1;
  transition:
    opacity 0.35s ease 0.2s,
    transform 0.35s ease 0.2s;
}
.au-hero-login {
  display: flex;
  flex-direction: column;
}
.au-hero-register {
  display: none;
  flex-direction: column;
}
.au-card.is-register .au-hero-login {
  display: none;
}
.au-card.is-register .au-hero-register {
  display: flex;
}
.au-hero-glow {
  position: absolute;
  inset: -40% -30% auto auto;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.22),
    transparent 70%
  );
  pointer-events: none;
}
.au-logo {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2);
}
.au-logo i {
  font-size: 30px;
  color: #fff;
}
.au-hero-title {
  position: relative;
  margin: 14px 0 0;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.1;
  /* Gradient text shimmer — background-clip text với animate shift */
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fef3c7 25%,
    #fff 50%,
    #fce7f3 75%,
    #fff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: auTitleShimmer 6s linear infinite;
}
@keyframes auTitleShimmer {
  to {
    background-position: -200% 0;
  }
}
.au-hero-sub {
  position: relative;
  margin: 10px 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  max-width: 320px;
}
/* Hidden — legacy bullets giữ HTML nhưng đã thay bằng stat cards */
.au-hero-bullets {
  display: none;
}

/* Hero brand wordmark — "XMETA PRO" caps next to logo */
.au-hero-brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.au-hero-brand-text {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #fff, #fde68a, #fbcfe8, #fff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: auTitleShimmer 6s linear infinite;
}
.au-hero-brand-tag {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Hero stats — 3 col grid, mỗi cell có number + label */
.au-hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0 4px;
  padding: 16px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.au-stat {
  text-align: center;
}
.au-stat-num {
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1;
}
.au-stat-num span {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.85;
  margin-left: 1px;
}
.au-stat-label {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 4px;
}

/* Decorative orbs inside hero — 3 glassy bubbles floating */
.au-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(0.3px);
}
.au-hero-orb.o1 {
  width: 110px;
  height: 110px;
  bottom: -30px;
  right: -20px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.08) 60%,
    transparent 70%
  );
  box-shadow:
    inset -10px -10px 30px rgba(255, 255, 255, 0.2),
    0 12px 32px rgba(236, 72, 153, 0.25);
  animation: auFloatY 6s ease-in-out infinite alternate;
}
.au-hero-orb.o2 {
  width: 70px;
  height: 70px;
  top: 30%;
  right: 18%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(253, 224, 71, 0.5),
    rgba(253, 224, 71, 0.08) 60%,
    transparent 70%
  );
  box-shadow:
    inset -8px -8px 24px rgba(253, 224, 71, 0.2),
    0 10px 28px rgba(245, 158, 11, 0.25);
  animation: auFloatY 7s ease-in-out infinite alternate-reverse;
}
.au-hero-orb.o3 {
  width: 50px;
  height: 50px;
  top: 14%;
  left: -10px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(167, 139, 250, 0.6),
    rgba(167, 139, 250, 0.08) 60%,
    transparent 70%
  );
  box-shadow:
    inset -6px -6px 18px rgba(167, 139, 250, 0.2),
    0 8px 22px rgba(var(--primary-end-rgb, 139, 92, 246), 0.3);
  animation: auFloatY 5s ease-in-out infinite alternate;
}

/* Form pane mini header — welcome + tagline (compact) */
.au-form-head {
  margin-bottom: 22px;
}
.au-form-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.au-form-head-wave {
  display: inline-block;
  font-size: 22px;
  transform-origin: 70% 70%;
  animation: auWave 2.6s ease-in-out infinite;
}
@keyframes auWave {
  0%,
  60%,
  100% {
    transform: rotate(0);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
.au-form-head-sub {
  margin: 0;
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.5;
}
.au-hero-switch {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.au-hero-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: #6d28d9;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
  letter-spacing: 0.2px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}
.au-hero-switch-btn:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
}
.au-hero-switch-btn i {
  font-size: 14px;
}

/* FORM PANE — default LEFT 50%, slide sang RIGHT khi .is-register */
.au-form-pane {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  z-index: 1;
  overflow-y: auto;
  transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
.au-card.is-register .au-form-pane {
  transform: translateX(100%);
}
/* ---------- Đổi ngôn ngữ ở màn Auth (login / nhập key) — đặt cạnh cụm form ---------- */
.au-lang {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 6;
}
/* Toggle: KHÔNG viền/nền — chỉ lá cờ tròn + mũi tên xuống */
.au-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.16s ease;
}
.au-lang-toggle:hover {
  opacity: 0.82;
}
/* Lá cờ tròn (flag-icons) — dùng cho cả nút và menu */
.au-lang-flag.fi {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
  flex-shrink: 0;
}
.au-lang-caret {
  font-size: 16px;
  color: #94a3b8;
  transition: transform 0.18s ease;
}
.au-lang.open .au-lang-caret {
  transform: rotate(180deg);
}
.au-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0.16s;
}
.au-lang.open .au-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.au-lang-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
}
.au-lang-opt:hover {
  background: #f1f5f9;
}
.au-lang-opt.selected {
  background: #eef2ff;
  color: #4338ca;
  font-weight: 600;
}
.au-lang-name {
  flex: 1;
}
/* Cờ trong menu nhỏ hơn nút */
.au-lang-menu .au-lang-flag.fi {
  width: 20px;
  height: 20px;
}
.au-lang-check {
  font-size: 15px;
  color: #4f46e5;
  opacity: 0;
}
.au-lang-opt.selected .au-lang-check {
  opacity: 1;
}
[data-bs-theme="dark"] .au-lang-caret {
  color: #94a3b8;
}
[data-bs-theme="dark"] .au-lang-flag.fi {
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.3);
}
[data-bs-theme="dark"] .au-lang-menu {
  background: #1e293b;
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
[data-bs-theme="dark"] .au-lang-opt {
  color: #cbd5e1;
}
[data-bs-theme="dark"] .au-lang-opt:hover {
  background: rgba(148, 163, 184, 0.14);
}
[data-bs-theme="dark"] .au-lang-opt.selected {
  background: rgba(99, 102, 241, 0.22);
  color: #c7d2fe;
}
@media (max-width: 860px) {
  .au-lang {
    top: 12px;
    right: 12px;
  }
  .au-lang-cur {
    max-width: 76px;
  }
}
/* Tabs đã ẨN HẲN (user yêu cầu bỏ 2 nút Đăng nhập/Nhập key trên cùng).
   Form switch qua link 'Đã có key?' / 'Quay lại Đăng nhập'. Cần !important
   để override JS auSwitchTab .toggle() có thể bật lại. */
.au-tabs {
  display: none !important;
}
/* Footer link row — link 'Đã có key?' + 'Quên mật khẩu' nằm cùng dòng */
.au-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.au-tab {
  flex: 1;
  padding: 9px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.au-tab.is-active {
  background: #ffffff;
  color: var(--primary-start, #6366f1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.au-form {
  display: none;
  flex-direction: column;
  gap: 14px;
}
.au-form.au-form-active {
  display: flex;
}
.au-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.au-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  letter-spacing: 0.1px;
}
.au-optional {
  font-weight: 400;
  color: #94a3b8;
  font-size: 11.5px;
  margin-left: 4px;
}
.au-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.au-input-wrap > i {
  position: absolute;
  left: 12px;
  font-size: 17px;
  color: #94a3b8;
  pointer-events: none;
}
.au-input {
  width: 100%;
  height: 40px;
  padding: 8px 12px 8px 38px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 13.5px;
  color: #0f172a;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.au-input:focus {
  outline: none;
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.16);
}
.au-input::placeholder {
  color: #cbd5e1;
}
.au-toggle-pass {
  position: absolute;
  right: 6px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.au-toggle-pass:hover {
  background: #f1f5f9;
  color: #475569;
}
.au-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.45;
  cursor: pointer;
  user-select: none;
}
.au-check input {
  margin-top: 1px;
  accent-color: var(--primary-start, #6366f1);
}
.au-link {
  color: var(--primary-start, #6366f1);
  font-weight: 600;
  text-decoration: none;
}
.au-link:hover {
  text-decoration: underline;
}
.au-error {
  font-size: 12.5px;
  color: #dc2626;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  display: none;
}
.au-error.is-show {
  display: block;
}
.au-btn {
  position: relative;
  height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.au-btn-primary {
  background: linear-gradient(
    135deg,
    var(--primary-end, #8b5cf6),
    var(--primary-start, #6366f1)
  );
  color: #fff;
  box-shadow: 0 6px 18px rgba(var(--primary-rgb, 99, 102, 241), 0.36);
}
.au-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(var(--primary-rgb, 99, 102, 241), 0.45);
}

/* OAuth divider — giữa Google button (trên) và form email (dưới) */
.au-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 8px;
}
.au-divider::before,
.au-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}
.au-divider span {
  font-size: 11.5px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}
/* Google button — light theme với Google brand red icon */
.au-btn-google {
  background: #ffffff;
  color: #334155;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.au-btn-google:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}
.au-btn-google .au-btn-label i {
  font-size: 19px;
  background: linear-gradient(
    135deg,
    #ea4335 0%,
    #fbbc05 35%,
    #34a853 65%,
    #4285f4 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.au-btn-google .au-btn-spin {
  border: 2px solid rgba(var(--primary-rgb, 99, 102, 241), 0.2);
  border-top-color: var(--primary-start, #6366f1);
}
/* Google sign-in popup flow (initCodeClient ux_mode:'popup' trong via.js)
   — không cần CSS đặc biệt cho native button. Custom button #auGoogleVisualBtn
   đã có style .au-btn-google chung. Click trigger popup OAuth Google. */

/* License Key button — đồng bộ style trắng với Google button (chỉ khác icon).
   Icon key tím #8b5cf6 (brand color) phân biệt với icon Google multi-color. */
.au-btn-licensekey {
  background: #ffffff;
  color: #334155;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.au-btn-licensekey:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}
.au-btn-licensekey .au-btn-label i {
  color: var(--primary-end, #8b5cf6);
  font-size: 18px;
}
.au-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.au-btn-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.au-btn-label i {
  font-size: 17px;
}
.au-btn-spin {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: auSpin 0.7s linear infinite;
}
.au-btn.is-loading .au-btn-label {
  display: none;
}
.au-btn.is-loading .au-btn-spin {
  display: inline-block;
}
@keyframes auSpin {
  to {
    transform: rotate(360deg);
  }
}
.au-meta {
  text-align: center;
  margin-top: 4px;
  font-size: 12.5px;
}
.au-link-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-start, #6366f1);
  font-weight: 600;
  font-size: 12.5px;
}
.au-link-btn:hover {
  text-decoration: underline;
}
.au-link-btn i {
  font-size: 13px;
}

/* Forgot password section */
.au-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.au-section-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.1px;
}
.au-section-title i {
  color: var(--primary-start, #6366f1);
  font-size: 18px;
}
.au-section-sub {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.55;
}
.au-fg-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.au-fg-step[hidden] {
  display: none;
}
.au-input-code {
  text-align: center;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 19px;
  letter-spacing: 8px;
  padding-left: 38px !important;
  font-weight: 700;
  color: #4f46e5;
}

/* SUCCESS panel */
.au-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  flex: 1;
}
.au-success-icon {
  font-size: 56px;
  color: #10b981;
  margin-bottom: 16px;
  line-height: 1;
}
.au-success-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}
.au-success-sub {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: #64748b;
}

/* Responsive: ≤820px → stack vertical, bỏ position absolute slide */
@media (max-width: 820px) {
  .au-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 460px;
  }
  .au-hero,
  .au-form-pane {
    position: relative;
    width: 100%;
    height: auto;
    transform: none !important;
    padding: 28px;
  }
  .au-hero-sub {
    max-width: 100%;
  }
  .au-card.is-register .au-hero-login,
  .au-card .au-hero-register {
    display: none;
  }
  .au-card.is-register .au-hero-register {
    display: flex;
  }
}

/* ===================================================================
   LOGIN REDESIGN — Dark + Grid · card giữa · tự sáng/tối theo giờ
   Kích hoạt bằng class .au-grid trên .au-page. Ghi đè layout split cũ:
   ẩn hero, form-pane full-width tĩnh, card đơn ở giữa. JS (via.js) gắn
   .au-day / .au-night theo new Date().getHours() + set --mx/--my (glow).
   =================================================================== */
/* nền + tắt trang trí cũ (mesh blob, shapes, beam).
   position:fixed + inset:0 → phủ KÍN viewport, thoát mọi padding/chiều-cao
   của container cha (#app/.app-wrapper/.hm-view) và lệch do zoom theo vh. */
.au-page.au-grid {
  position: fixed;
  inset: 0;
  z-index: 30;
  min-height: 0;
  overflow-y: auto;
  padding: 44px 22px;
  background: #0f1426;
}
.au-page.au-grid.au-day {
  background: #f4f5fb;
}
.au-page.au-grid::before,
.au-page.au-grid::after,
.au-grid > .au-deco,
.au-grid > .au-shape {
  display: none !important;
}

/* lưới: lớp tĩnh (dim) + lớp sáng reveal bám con trỏ + quầng glow */
.au-page.au-grid {
  --au-gl: rgba(255, 255, 255, 0.05);
  --au-glb: rgba(180, 160, 255, 0.6);
}
.au-page.au-grid.au-day {
  --au-gl: rgba(var(--primary-rgb, 99, 102, 241), 0.1);
  --au-glb: rgba(var(--primary-rgb, 99, 102, 241), 0.5);
}
.au-grid .au-grid-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.au-grid .au-grid-fx::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--au-gl) 1px, transparent 1px),
    linear-gradient(90deg, var(--au-gl) 1px, transparent 1px);
  background-size: 38px 38px;
}
.au-grid .au-grid-lines,
.au-grid .au-grid-glow {
  position: absolute;
  inset: 0;
}
.au-grid .au-grid-lines {
  background-image:
    linear-gradient(var(--au-glb) 1px, transparent 1px),
    linear-gradient(90deg, var(--au-glb) 1px, transparent 1px);
  background-size: 38px 38px;
  /* đốm sáng đơn giản: lưới sáng lên quanh con trỏ */
  -webkit-mask: radial-gradient(
    circle 150px at var(--mx, -400px) var(--my, -400px),
    #000 0%,
    rgba(0, 0, 0, 0.35) 50%,
    transparent 75%
  );
  mask: radial-gradient(
    circle 150px at var(--mx, -400px) var(--my, -400px),
    #000 0%,
    rgba(0, 0, 0, 0.35) 50%,
    transparent 75%
  );
}
.au-grid .au-grid-glow {
  background: radial-gradient(
    circle 180px at var(--mx, -400px) var(--my, -400px),
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.3) 0%,
    rgba(var(--primary-rgb, 99, 102, 241), 0.12) 42%,
    transparent 70%
  );
}

/* card đơn ở giữa — bỏ split 900px */
.au-grid .au-card {
  max-width: 412px;
  min-height: 0;
  border-radius: 22px;
  background: #1a2138;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.au-grid .au-card.has-error {
  min-height: 0;
}
/* điểm nhấn: viền gradient phát sáng quanh card (tím → cyan) */
.au-grid .au-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.85),
    rgba(var(--primary-rgb, 99, 102, 241), 0.15) 45%,
    rgba(6, 182, 212, 0.6)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
.au-page.au-grid.au-night .au-card {
  background: #1a2138 !important;
  box-shadow:
    0 30px 70px -20px rgba(0, 0, 0, 0.65),
    0 0 54px -18px rgba(var(--primary-end-rgb, 139, 92, 246), 0.45);
}
.au-page.au-grid.au-day .au-card {
  background: #ffffff !important;
  box-shadow: 0 28px 64px -22px rgba(15, 23, 42, 0.4);
}

/* ẩn hero hẳn; form-pane full-width tĩnh (không trượt) */
.au-grid .au-hero {
  display: none !important;
}
.au-page.au-grid .au-form-pane {
  position: relative;
  width: 100%;
  height: auto;
  transform: none !important;
  background: transparent !important;
  padding: 34px 32px;
  overflow: visible;
}

/* logo thật trần + căn giữa head */
.au-grid .au-brand-logo {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
/* quầng sáng tím sau logo (điểm nhấn, chỉ bật ở bản tối) */
.au-grid .au-brand-logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 120px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.55),
    transparent 70%
  );
  filter: blur(22px);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.au-page.au-grid.au-night .au-brand-logo::before {
  opacity: 1;
}
.au-grid .au-brand-logo img {
  position: relative;
  z-index: 1;
  height: 56px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 1px rgba(35, 28, 80, 0.6))
    drop-shadow(0 2px 4px rgba(35, 28, 80, 0.3));
}
.au-page.au-grid.au-night .au-brand-logo img {
  filter: drop-shadow(
    0 5px 16px rgba(var(--primary-end-rgb, 139, 92, 246), 0.6)
  );
}
.au-grid .au-form-head {
  text-align: center;
}
.au-grid .au-form-head-title {
  justify-content: center;
}
/* bỏ dòng phụ thừa "Đăng nhập để tiếp tục với XMETA" */
.au-grid .au-form-head-sub {
  display: none;
}
.au-grid .au-meta-reg {
  color: inherit;
}

/* ----- NIGHT: tông tối cho chữ / input / nút ----- */
.au-page.au-grid.au-night .au-form-head-title,
.au-page.au-grid.au-night .au-section-title {
  color: #ffffff;
}
.au-page.au-grid.au-night .au-form-head-sub,
.au-page.au-grid.au-night .au-section-sub,
.au-page.au-grid.au-night .au-meta,
.au-page.au-grid.au-night .au-meta-row,
.au-page.au-grid.au-night .au-check {
  color: #9aa6c0;
}
.au-page.au-grid.au-night .au-label {
  color: #aab2c8;
}
.au-page.au-grid.au-night .au-input {
  background: #11162a;
  border-color: #2a3350;
  color: #e7eaf3;
}
.au-page.au-grid.au-night .au-input::placeholder {
  color: #5b647d;
}
.au-page.au-grid.au-night .au-input-wrap > i {
  color: #7c83a3;
}
.au-page.au-grid.au-night .au-input:focus {
  border-color: var(--primary-end, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(var(--primary-end-rgb, 139, 92, 246), 0.25);
}
.au-page.au-grid.au-night .au-btn-google,
.au-page.au-grid.au-night .au-btn-licensekey {
  background: #11162a;
  color: #dfe4f0;
  border-color: #2a3350;
}
.au-page.au-grid.au-night .au-btn-licensekey .au-btn-label i {
  color: #c4b5fd;
}
.au-page.au-grid.au-night .au-divider span {
  color: #5b647d;
}
.au-page.au-grid.au-night .au-divider::before,
.au-page.au-grid.au-night .au-divider::after {
  background: linear-gradient(90deg, transparent, #2a3350, transparent);
}
.au-page.au-grid.au-night .au-toggle-pass {
  color: #7c83a3;
}
.au-page.au-grid.au-night .au-toggle-pass:hover {
  background: #232b45;
  color: #cdd3e3;
}
.au-page.au-grid.au-night .au-input-code {
  color: #c4b5fd;
}
.au-page.au-grid.au-night .au-success-title {
  color: #ffffff;
}
.au-page.au-grid.au-night .au-success-sub {
  color: #9aa6c0;
}

/* ===================================================================
   CÀI ĐẶT (st-*) — view Settings trong HOME
   =================================================================== */
.st-page {
  padding: 26px 28px 36px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Hero gradient violet→purple */
.st-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    var(--primary-end, #8b5cf6) 0%,
    var(--primary-start, #6366f1) 50%,
    #4f46e5 100%
  );
  color: #fff;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(var(--primary-rgb, 99, 102, 241), 0.26);
  margin-bottom: 20px;
}
.st-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.2),
    transparent 70%
  );
  pointer-events: none;
}
.st-hero-icon {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.26);
}
.st-hero-icon i {
  font-size: 28px;
  color: #fff;
}
.st-hero-text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.st-hero-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.2;
}
.st-hero-sub {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
  max-width: 620px;
}

/* Card */
.st-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.st-card:hover {
  box-shadow: 0 6px 18px rgba(var(--primary-rgb, 99, 102, 241), 0.08);
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.18);
}
.st-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
}
.st-card-head-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  flex-shrink: 0;
}
.st-card-head-icon-zalo {
  background: linear-gradient(135deg, #dbeafe, #e0f2fe);
}
.st-card-head-icon-purple {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #7c3aed;
}
.st-card-head-text {
  flex: 1;
  min-width: 0;
}
.st-card-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.1px;
}
.st-card-desc {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.45;
}
.st-card-body {
  padding: 18px 20px;
}
.st-card-form-body {
  padding: 0;
}
/* Panel "Tài khoản" (setting.html popup) — gọn lại, bỏ khoảng thừa */
[data-set-panel="account"] .st-card {
  margin-bottom: 12px;
  border-radius: 12px;
}
[data-set-panel="account"] .st-card:last-child {
  margin-bottom: 0;
}
[data-set-panel="account"] .st-card-head {
  padding: 11px 16px;
  gap: 11px;
}
[data-set-panel="account"] .st-card-head-icon {
  width: 34px;
  height: 34px;
  font-size: 17px;
  border-radius: 9px;
}
[data-set-panel="account"] .st-card-desc {
  display: none;
}
[data-set-panel="account"] .st-card-body {
  padding: 14px 16px;
}
[data-set-panel="account"] .sec-field {
  margin-bottom: 11px;
}
[data-set-panel="account"] #secProfileForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
[data-set-panel="account"] #secProfileForm .sec-msg,
[data-set-panel="account"] #secProfileForm .sec-actions {
  grid-column: 1 / -1;
}

/* Zalo status pill */
.st-zalo-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.st-zalo-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
}
.st-zalo-status-checking {
  background: #f1f5f9;
  color: #64748b;
  border-color: rgba(100, 116, 139, 0.2);
}
.st-zalo-status-checking .st-zalo-status-dot {
  background: #94a3b8;
  animation: stPulseGray 1.4s ease-out infinite;
}
.st-zalo-status-connected {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.25);
}
.st-zalo-status-connected .st-zalo-status-dot {
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: stPulseGreen 2.4s ease-out infinite;
}
/* Disconnected: pill biến thành nút CTA (gradient indigo→tím), click → start link */
.st-zalo-status-disconnected {
  background: linear-gradient(
    135deg,
    var(--primary-end, #8b5cf6),
    var(--primary-start, #6366f1)
  );
  color: #ffffff;
  border-color: transparent;
  cursor: pointer;
  padding: 6px 14px 6px 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 99, 102, 241), 0.32);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.st-zalo-status-disconnected:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--primary-rgb, 99, 102, 241), 0.45);
}
.st-zalo-status-disconnected .st-zalo-status-dot {
  background: #ffffff;
  opacity: 0.95;
}
.st-zalo-status-pending {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.25);
}
.st-zalo-status-pending .st-zalo-status-dot {
  background: #f59e0b;
  animation: stPulseAmber 1.2s ease-out infinite;
}
@keyframes stPulseGreen {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}
@keyframes stPulseAmber {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}
@keyframes stPulseGray {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Skeleton loader */
.st-zalo-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.st-skel-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: stSkelShimmer 1.4s ease-in-out infinite;
}
.st-skel-bar-w70 {
  width: 70%;
}
.st-skel-bar-w50 {
  width: 50%;
}
@keyframes stSkelShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Zalo: initial (disconnected) state */
.st-zalo-init {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.st-zalo-desc {
  margin: 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.55;
}

/* Zalo: link flow (code waiting) */
.st-zalo-link-flow {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.st-zalo-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.st-zalo-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #334155;
}
.st-zalo-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.st-zalo-code-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.06),
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.04)
  );
  border: 1px dashed rgba(var(--primary-rgb, 99, 102, 241), 0.3);
  flex-wrap: wrap;
}
.st-zalo-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 800;
  color: #4f46e5;
  letter-spacing: 4px;
  flex: 1;
  text-align: center;
  user-select: all;
}
.st-zalo-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.25);
  color: var(--primary-start, #6366f1);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.st-zalo-copy:hover {
  background: var(--primary-start, #6366f1);
  color: #fff;
}
.st-zalo-expire {
  width: 100%;
  font-size: 12px;
  color: #b45309;
  font-weight: 600;
  text-align: center;
  margin-top: 4px;
}
.st-zalo-expire #stZaloRemain {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 800;
}

/* Zalo: connected state — gọn trong header, không box riêng.
   Body ẩn khi đã kết nối; nút Huỷ nằm cạnh pill "Đã kết nối". */
.st-zalo-unlink-head {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #ef4444;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.st-zalo-unlink-head:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.5);
}

/* Buttons */
.st-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
  letter-spacing: 0.2px;
}
.st-btn i {
  font-size: 16px;
}
.st-btn-primary {
  background: linear-gradient(
    135deg,
    var(--primary-end, #8b5cf6),
    var(--primary-start, #6366f1)
  );
  color: #fff;
  box-shadow: 0 4px 14px rgba(var(--primary-rgb, 99, 102, 241), 0.32);
}
.st-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--primary-rgb, 99, 102, 241), 0.4);
}
.st-btn-danger {
  background: #fee2e2;
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.2);
}
.st-btn-danger:hover {
  background: #fecaca;
}
.st-btn-outline-danger {
  background: #fff;
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.3);
}
.st-btn-outline-danger:hover {
  background: #fee2e2;
}

/* Trang Bảo mật — form đổi mật khẩu */
.sec-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sec-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sec-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
}
.sec-inp {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  font: inherit;
  font-size: 14px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.sec-inp:focus {
  outline: none;
  border-color: var(--primary-start, #6366f1);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.14);
}
.sec-inp-wrap {
  position: relative;
}
.sec-inp-wrap .sec-inp {
  padding-right: 42px;
}
.sec-eye {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 17px;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.sec-eye:hover {
  color: var(--primary-start, #6366f1);
}
[data-bs-theme="dark"] .sec-eye {
  color: #64748b;
}
[data-bs-theme="dark"] .sec-eye:hover {
  color: #93c5fd;
}
.sec-msg {
  font-size: 12.5px;
  font-weight: 500;
}
.sec-msg:empty {
  display: none;
}
.sec-msg.ok {
  color: #16a34a;
}
.sec-msg.err {
  color: #dc2626;
}
.sec-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}
[data-bs-theme="dark"] .sec-lbl {
  color: #94a3b8;
}
[data-bs-theme="dark"] .sec-inp {
  background: #1a2029;
  border-color: #2c313b;
  color: #e7ebf2;
}
[data-bs-theme="dark"] .sec-inp:focus {
  background: #151a22;
}

/* Action bar */
.st-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  position: sticky;
  bottom: 14px;
  z-index: 5;
}

@media (max-width: 900px) {
  .st-page {
    padding: 18px 16px 30px;
  }
  .st-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }
  .st-card-head {
    flex-wrap: wrap;
  }
  .st-zalo-status {
    margin-top: 4px;
  }
}

/* ===================================================================
   MAIL TẠM (mt-*) — view trong home sidebar
   =================================================================== */
/* View mail-temp full chiều cao — không scroll, để card tự scroll bên trong */
.hm-view.active[data-view="mail-temp"] {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.mt-page {
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 100%;
  overflow: hidden;
}
.mt-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mt-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.mt-title i {
  font-size: 22px;
  color: #f59e0b;
}
.mt-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}
.mt-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  overflow: hidden;
}

/* Header + form Tạo email không bị flex-shrink khi list/inbox dài */
.mt-page > .mt-header,
.mt-page > .mt-create-card {
  flex-shrink: 0;
}
.mt-card-head {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  background: #fafafb;
}
.mt-card-head-row {
  justify-content: space-between;
}
.mt-card-head i {
  font-size: 16px;
}

/* Tạo email form — chỉ Input co dãn (flex 1), Subdomain ẩn → Input nở thêm */
.mt-create-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  align-items: flex-end;
}
.mt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 0 0 auto;
}
.mt-field-grow {
  flex: 1 1 250px;
}
.mt-field:has(#mtSubdomain),
.mt-field:has(#mtDomain),
.mt-field:has(#mtServer) {
  flex-basis: 200px;
}
.mt-create-form .mt-btn {
  flex: 0 0 auto;
}
.mt-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0;
}
.mt-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.mt-input::placeholder {
  color: #cbd5e1;
}
.mt-input:focus {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.12);
}
.mt-input[readonly] {
  background: #f8fafc;
  color: #475569;
  cursor: default;
}
.mt-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%2364748b' d='M6 8L2 4h8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  cursor: pointer;
}
.mt-input:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}
.mt-btn {
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.mt-btn:hover:not(:disabled) {
  filter: brightness(1.05);
}
.mt-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.mt-btn-primary {
  background: var(--primary-start, #6366f1);
  color: #fff;
  padding: 9px 12px;
}
.mt-btn-amber {
  background: #f59e0b;
  color: #0f172a;
  min-width: 130px;
}
.mt-btn i {
  font-size: 14px;
}

/* Grid 2 cột Danh sách + Hộp thư — full chiều cao còn lại của .mt-page */
.mt-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 18px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
.mt-list-card,
.mt-inbox-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.mt-right-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}
.mt-right-col .mt-inbox-card {
  flex: 1 1 auto;
  min-height: 0;
}
.mt-card-hidden {
  display: none !important;
}

/* Links card — show extracted FB links */
.mt-links-list {
  padding: 8px 12px 12px;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mt-link-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.mt-link-row:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.06);
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.3);
}
.mt-link-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1e293b;
}
.mt-link-action {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #94a3b8;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.mt-link-action:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.1);
  color: var(--primary-start, #6366f1);
}
.mt-link-action.copied {
  color: #10b981;
  font-size: 10px;
  font-weight: 600;
}
.mt-pill-green {
  border-color: rgba(16, 185, 129, 0.4);
  color: #10b981;
}
.mt-pill-green:hover {
  background: rgba(16, 185, 129, 0.08);
}

/* Per-message OTP / Link badges (đặt trong .mt-msg-right) */
.mt-otp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef3c7;
  color: #92400e;
  font-size: 11.5px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border: 0;
}
.mt-otp-badge:hover {
  background: #fde68a;
}
.mt-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dbeafe;
  color: #1e40af;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border: 0;
}
.mt-link-btn:hover {
  background: #bfdbfe;
}
.mt-link-btn.copied {
  background: #d1fae5;
  color: #059669;
}

/* ===================================================================
   LƯU NOTE (nt-*) — clone từ xmeta.vn/tools/note
   =================================================================== */
.hm-view.active[data-view="note"] {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.nt-page {
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}
.nt-page > .nt-header {
  flex-shrink: 0;
}
.nt-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nt-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.nt-title i {
  font-size: 22px;
  color: #10b981;
}
.nt-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}
.nt-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  flex: 1 1 auto;
  min-height: 0;
}
.nt-editor-card,
.nt-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.nt-editor-card {
  overflow: hidden;
}
.nt-head-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nt-auto-status {
  font-size: 11px;
  font-weight: 500;
  display: none;
  align-items: center;
  gap: 4px;
}
.nt-auto-status.saving {
  color: #f59e0b;
  display: inline-flex;
}
.nt-auto-status.saved {
  color: #10b981;
  display: inline-flex;
}
.nt-auto-status.error {
  color: #ef4444;
  display: inline-flex;
}
.nt-auto-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.nt-auto-status.saving::before {
  animation: nt-blink 1s infinite;
}
@keyframes nt-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
.nt-count {
  font-size: 11px;
  color: #94a3b8;
}
.nt-editor-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
  gap: 12px;
}
.nt-toolbar {
  display: flex;
  gap: 8px;
}
.nt-toolbar .mt-input {
  flex: 1;
}
.nt-btn-cancel {
  background: transparent;
  color: #475569;
  border: 1px solid #e2e8f0 !important;
}
.nt-btn-cancel:hover {
  background: #f1f5f9;
}
.nt-textarea {
  flex: 1;
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: #0f172a;
  resize: none;
  outline: none;
  min-height: 0;
}
.nt-textarea:focus {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.12);
}

/* Side: search + list */
.nt-side {
  gap: 12px;
}
.nt-search-card {
  flex-shrink: 0;
}
.nt-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
}
.nt-search-row i {
  color: #94a3b8;
  font-size: 16px;
}
.nt-search-row input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
  color: #0f172a;
}
.nt-search-row input::placeholder {
  color: #cbd5e1;
}
.nt-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.nt-item {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.nt-item.active {
  border-color: #f59e0b;
  background: #fffbeb;
}
.nt-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.nt-item-meta {
  flex: 1;
  min-width: 0;
}
.nt-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nt-edit-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fef3c7;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.nt-item-date {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
}
.nt-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.nt-action-btn {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #94a3b8;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.nt-action-btn:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.1);
  color: var(--primary-start, #6366f1);
}
.nt-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.nt-action-btn.success:hover {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}
.nt-action-btn.warning:hover {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}
.nt-item-preview {
  background: #f8fafc;
  border-radius: 6px;
  padding: 6px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #475569;
  max-height: 60px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}
.nt-empty {
  text-align: center;
  color: #94a3b8;
  padding: 32px 16px;
  font-size: 13px;
}
.nt-empty i {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
  opacity: 0.5;
}

@media (max-width: 1024px) {
  .nt-grid {
    grid-template-columns: 1fr;
  }
}

/* Share Note modal — redesign */
.nt-share-popup {
  border-radius: 16px !important;
  overflow: hidden !important;
}
.nt-share-popup .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
.nt-share-modal {
  padding: 22px 24px 24px;
}
.nt-share-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  margin-bottom: 18px;
}
.nt-share-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.12),
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.12)
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nt-share-icon i {
  font-size: 22px;
  color: var(--primary-start, #6366f1);
}
.nt-share-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.nt-share-sub {
  font-size: 12.5px;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 460px;
}
.nt-share-section {
  margin-bottom: 14px;
}
.nt-share-section:last-child {
  margin-bottom: 0;
}
.nt-share-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nt-share-label.nt-blue {
  color: #2563eb;
}
.nt-share-label.nt-amber {
  color: #d97706;
}
.nt-share-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.nt-share-row:focus-within {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.1);
}
.nt-share-row input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  outline: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #1e293b;
  background: #fafafb;
}
.nt-share-btn {
  border: 0;
  border-left: 1px solid #e2e8f0;
  cursor: pointer;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  transition: filter 0.15s ease;
  flex-shrink: 0;
}
.nt-share-btn:hover {
  filter: brightness(1.08);
}
.nt-share-btn.nt-blue-bg {
  background: #3b82f6;
}
.nt-share-btn.nt-amber-bg {
  background: #f59e0b;
}
.nt-share-btn-open {
  background: #f1f5f9;
  color: #475569;
}
.nt-share-btn-open:hover {
  background: #e2e8f0;
  color: #1e293b;
}
.nt-share-btn-copied {
  background: #10b981 !important;
  color: #fff !important;
}
.nt-share-hint {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nt-share-warn {
  color: #d97706;
}

/* ===================================================================
   CHECK FACEBOOK (cf-*) — clone từ xmeta.vn/tools/check-uid
   =================================================================== */
.hm-view.active[data-view="check-fb"] {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.cf-page {
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}
.cf-page > .cf-header {
  flex-shrink: 0;
}
.cf-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cf-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.cf-title i {
  font-size: 22px;
  color: var(--primary-end, #8b5cf6);
}
.cf-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}
.cf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  flex: 1 1 auto;
  min-height: 0;
}
.cf-input-card,
.cf-output-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.cf-input-body,
.cf-output-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
  gap: 10px;
}
.cf-output-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.cf-output-col .cf-output-card {
  flex: 1 1 0;
  min-height: 0;
}
.cf-textarea {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: #0f172a;
  resize: none;
  outline: none;
}
.cf-textarea:focus {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.12);
}
.cf-textarea[readonly] {
  background: #fafafb;
}

.cf-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.cf-pill {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #475569;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
}
.cf-pill i {
  font-size: 13px;
}
.cf-pill:hover:not(:disabled) {
  background: #f1f5f9;
}
.cf-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cf-pill-indigo {
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4);
  color: var(--primary-start, #6366f1);
}
.cf-pill-indigo:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
}
.cf-pill-amber {
  border-color: rgba(245, 158, 11, 0.4);
  color: #f59e0b;
}
.cf-pill-amber:hover {
  background: rgba(245, 158, 11, 0.08);
}
.cf-pill-green {
  border-color: rgba(16, 185, 129, 0.4);
  color: #10b981;
}
.cf-pill-green:hover {
  background: rgba(16, 185, 129, 0.08);
}
.cf-pill-purple {
  border-color: rgba(var(--primary-end-rgb, 139, 92, 246), 0.4);
  color: var(--primary-end, #8b5cf6);
}
.cf-pill-purple:hover {
  background: rgba(var(--primary-end-rgb, 139, 92, 246), 0.08);
}
.cf-pill-cyan {
  border-color: rgba(14, 165, 233, 0.4);
  color: #0ea5e9;
}
.cf-pill-cyan:hover {
  background: rgba(14, 165, 233, 0.08);
}
.cf-pill-red {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
.cf-pill-red:hover {
  background: rgba(239, 68, 68, 0.08);
}
.cf-pill-blue {
  border-color: rgba(59, 130, 246, 0.4);
  color: #3b82f6;
}
.cf-pill-blue:hover {
  background: rgba(59, 130, 246, 0.08);
}
.cf-pill.stop {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: #ef4444 !important;
}

.cf-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #64748b;
  flex-shrink: 0;
}
.cf-progress-percent {
  font-weight: 700;
  color: #0f172a;
}
.cf-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
  flex-shrink: 0;
}
.cf-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(
    90deg,
    var(--primary-start, #6366f1),
    var(--primary-end, #8b5cf6)
  );
  transition: width 0.2s ease;
}

@media (max-width: 1024px) {
  .cf-grid {
    grid-template-columns: 1fr;
  }
}

/* Custom toast (thay Swal toast để tránh conflict) */
#mtToastBox {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.mt-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  max-width: 360px;
  pointer-events: auto;
}
.mt-toast.mt-toast-show {
  opacity: 1;
  transform: translateX(0);
}
.mt-toast i {
  font-size: 16px;
  flex-shrink: 0;
}
.mt-toast span {
  word-break: break-word;
}
.mt-list-actions {
  display: flex;
  gap: 6px;
}
.mt-pill {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  background: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.mt-pill i {
  font-size: 13px;
}
.mt-pill-purple {
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4);
  color: var(--primary-start, #6366f1);
}
.mt-pill-purple:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
}
.mt-pill-red {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
.mt-pill-red:hover {
  background: rgba(239, 68, 68, 0.08);
}
.mt-pill-blue {
  border-color: rgba(59, 130, 246, 0.4);
  color: #3b82f6;
}
.mt-pill-blue:hover {
  background: rgba(59, 130, 246, 0.08);
}

/* Danh sách items */
.mt-list-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.mt-item {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.mt-item:hover {
  border-color: var(--primary-start, #6366f1);
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.04);
}
.mt-item.active {
  border-color: var(--primary-start, #6366f1);
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
}
.mt-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mt-item-email {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  word-break: break-all;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.mt-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.mt-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.mt-icon-btn:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.12);
  color: var(--primary-start, #6366f1);
}
.mt-icon-btn.mt-icon-red:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.mt-item-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.12);
  color: var(--primary-start, #6366f1);
  letter-spacing: 0.5px;
  width: fit-content;
}

/* Hộp thư */
.mt-inbox-body {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  min-height: 0;
}
.mt-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
}
.mt-empty-ico {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mt-empty-ico i {
  font-size: 28px;
  color: #94a3b8;
}
.mt-empty-text {
  font-size: 13.5px;
  color: #94a3b8;
  margin: 0;
}
.mt-mail-msg {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fff;
}
.mt-mail-from {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}
.mt-mail-subj {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}
.mt-mail-body {
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
  word-break: break-word;
}
.mt-mail-body a {
  color: #3b82f6;
}
.mt-otp-card {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1),
    rgba(var(--primary-rgb, 99, 102, 241), 0.08)
  );
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mt-otp-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #047857;
  letter-spacing: 0.6px;
}
.mt-otp-value {
  font-size: 22px;
  font-weight: 800;
  color: #047857;
  letter-spacing: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.mt-link-list-head,
.mt-msg-head {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 8px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mt-link-list-head i,
.mt-msg-head i {
  color: var(--primary-start, #6366f1);
}
.mt-link-list {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mt-msg-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mt-msg {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease;
  margin-bottom: 10px;
}
.mt-msg:last-child {
  margin-bottom: 0;
}
.mt-msg:hover {
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4);
}
.mt-msg.expanded {
  border-color: var(--primary-start, #6366f1);
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.02);
}
.mt-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}
.mt-msg-meta {
  flex: 1;
  min-width: 0;
}
.mt-msg-from {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-msg-subj {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-msg-snippet {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-msg.expanded .mt-msg-subj,
.mt-msg.expanded .mt-msg-snippet {
  white-space: normal;
  overflow: visible;
}
.mt-msg.expanded .mt-msg-snippet {
  display: none;
}
.mt-msg-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}
.mt-msg-time {
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mt-msg-body {
  display: none;
}

/* Modal mail viewer */
.mt-modal .swal2-html-container {
  margin: 0 !important;
  padding: 8px 18px 18px !important;
  text-align: left !important;
}
.mt-modal .swal2-title {
  text-align: left !important;
  padding: 18px 18px 6px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.mt-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: #64748b;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  margin-bottom: 10px;
}
.mt-modal-meta > div {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mt-modal-meta i {
  color: #94a3b8;
}
.mt-modal-iframe {
  width: 100%;
  height: 60vh;
  min-height: 400px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  display: block;
}
.mt-link-item {
  font-size: 12.5px;
  padding: 8px 10px;
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  color: #1d4ed8;
  word-break: break-all;
  display: block;
  text-decoration: none;
}
.mt-link-item:hover {
  background: rgba(59, 130, 246, 0.12);
}

/* Responsive */
@media (max-width: 1100px) {
  .mt-grid {
    grid-template-columns: 1fr;
  }
}

/* Column Customizer modal (cc-*) — dùng cho 3 bảng Campaign/AdSet/Ad */
.cc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cc-overlay.cc-show {
  display: flex;
}
.cc-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 1180px;
  height: 90vh;
  max-height: 720px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  /* overflow:visible cho phép nút X tràn ra góc -14px (pattern đồng nhất
     với ba-popup / scm-modal / id-popup). Inner panels có overflow-y riêng. */
  overflow: visible;
  position: relative;
}
.cc-header {
  display: flex;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.cc-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}
.cc-title-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
/* Close X tròn trắng góc phải trên cùng, tràn ra ngoài -14px
   (pattern đồng nhất với ba-popup / scm-modal / id-popup) */
.cc-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  color: #666;
  font-size: 22px;
  font-weight: 400;
  padding: 0;
  margin: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition:
    color 0.15s,
    box-shadow 0.15s;
  z-index: 10;
}
.cc-close:hover {
  color: #111;
  background: #fff;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
}
.cc-close:focus {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  outline: none;
}
.cc-body {
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  flex: 1 1 auto;
  min-height: 0;
}
.cc-sidebar {
  border-right: 1px solid #e2e8f0;
  overflow-y: auto;
  padding: 14px 10px;
  background: #fafafb;
}
.cc-sidebar-item {
  display: block;
  padding: 10px 14px;
  margin-bottom: 2px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #475569;
  cursor: pointer;
  font-weight: 500;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-sidebar-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.cc-sidebar-item.cc-sidebar-active {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.1);
  color: var(--primary-start, #6366f1);
  font-weight: 700;
}
.cc-middle {
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cc-search-wrap {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
  flex-shrink: 0;
}
.cc-search {
  width: 100%;
  padding: 9px 12px 9px 36px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.cc-search:focus {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.12);
}
.cc-search-icon {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
  font-size: 14px;
}
.cc-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 18px 18px;
}
.cc-group-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 14px 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cc-group-label .cc-group-toggle {
  cursor: pointer;
  font-size: 13px;
  color: #94a3b8;
  border: none;
  background: transparent;
}
.cc-col-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.cc-col-row:hover {
  background: #f8fafc;
}
.cc-col-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary-start, #6366f1);
  flex-shrink: 0;
}
.cc-col-row span {
  font-size: 13.5px;
  color: #1e293b;
  flex: 1;
}
.cc-col-row.cc-col-locked input[type="checkbox"] {
  cursor: not-allowed;
}
.cc-col-row.cc-col-locked span {
  color: #64748b;
}
.cc-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cc-right-head {
  padding: 14px 18px 8px;
  font-size: 13px;
  color: #64748b;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.cc-right-head strong {
  color: #0f172a;
  font-weight: 700;
}
.cc-right-actions {
  display: flex;
  gap: 6px;
}
.cc-right-actions .camp-tools-btn {
  font-size: 11.5px;
  padding: 4px 9px;
}
.cc-right-actions .camp-tools-btn i {
  font-size: 13px;
}
.cc-selected-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-selected-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  color: #1e293b;
  transition: border-color 0.12s;
}
.cc-selected-pill:hover {
  border-color: #cbd5e1;
}
/* Pill non-locked: cursor grab toàn khối (sau khi chuyển sang Sortable.js
   không còn attribute draggable="true"). Nút X (.cc-pill-remove) override
   bằng cursor:pointer ở dưới. */
.cc-selected-pill:not(.cc-pill-locked) {
  cursor: grab;
}
.cc-selected-pill:not(.cc-pill-locked):active {
  cursor: grabbing;
}
.cc-selected-pill .cc-pill-remove {
  cursor: pointer;
}
.cc-selected-pill.cc-drag-active {
  opacity: 0.4;
}
.cc-selected-pill.cc-drag-over-top {
  border-top: 2px solid var(--primary-start, #6366f1);
  border-radius: 0 0 8px 8px;
}
.cc-selected-pill.cc-drag-over-bottom {
  border-bottom: 2px solid var(--primary-start, #6366f1);
  border-radius: 8px 8px 0 0;
}
.cc-selected-pill.cc-pill-locked {
  background: #fafafb;
}
.cc-drag-handle {
  color: #cbd5e1;
  cursor: grab;
  user-select: none;
  font-size: 14px;
  letter-spacing: -1px;
  flex-shrink: 0;
}
.cc-drag-handle:active {
  cursor: grabbing;
}
.cc-pill-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-pill-locked-icon {
  color: #94a3b8;
  font-size: 13px;
}
.cc-pill-remove {
  cursor: pointer;
  color: #94a3b8;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 14px;
  flex-shrink: 0;
}
.cc-pill-remove:hover {
  background: #fee2e2;
  color: #ef4444;
}
.cc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.cc-footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-preset-wrap {
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
/* Custom dropdown preset (inline edit/delete icons mỗi item) */
.cc-preset-dd {
  position: relative;
  width: 100%;
}
.cc-preset-trigger {
  width: 100%;
  height: 39px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.cc-preset-trigger:hover {
  border-color: #cbd5e1;
}
.cc-preset-trigger.open {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.12);
}
.cc-preset-trigger > i {
  font-size: 16px;
  color: #94a3b8;
  transition: transform 0.15s;
}
.cc-preset-trigger.open > i {
  transform: rotate(180deg);
}
.cc-preset-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  z-index: 100;
  padding: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.cc-preset-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  margin-bottom: 4px;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.cc-preset-item:last-of-type {
  margin-bottom: 0;
}
.cc-preset-item:hover {
  background: #f8fafc;
}
.cc-preset-item.cc-preset-active {
  border-color: var(--primary-start, #6366f1);
  background: #eef2ff;
}
.cc-preset-name {
  flex: 1;
  font-size: 13px;
  color: #0f172a;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-preset-icon-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.12s;
}
.cc-preset-icon-btn:hover {
  background: #e2e8f0;
}
.cc-preset-edit {
  color: var(--primary-start, #6366f1);
}
.cc-preset-del {
  color: #ef4444;
}
.cc-preset-create-btn {
  width: 100%;
  padding: 8px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: transparent;
  color: var(--primary-start, #6366f1);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  transition: background 0.12s;
}
.cc-preset-create-btn:hover {
  background: #eef2ff;
}
.cc-footer-left input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-start, #6366f1);
  cursor: pointer;
}
.cc-footer-left label {
  font-size: 13px;
  color: #475569;
  cursor: pointer;
}
.cc-footer-right {
  display: flex;
  gap: 10px;
  margin-left: auto;
}
.cc-btn-cancel {
  padding: 9px 20px;
  background: #fff;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.cc-btn-cancel:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08);
}
.cc-btn-apply {
  padding: 9px 24px;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb, 99, 102, 241), 0.3);
}
.cc-btn-apply:hover {
  opacity: 0.92;
}
.cc-empty {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
  font-size: 13px;
}

/* Tùy chỉnh cột button (in camp tab row) */
.camp-tab-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
/* Date filter khi được move vào camp row: bỏ me-2 (đã có gap) */
.camp-tab-row-right #dateFilterWrap {
  margin-right: 0;
}
/* Style trong camp row: JS swap class sang .camp-tools-btn → match height/look 100%,
   không cần CSS override. Chỉ cần lo state .btn-primary (filter active) */
/* Khi date filter có range active (btn-primary): ép bg gradient + text trắng.
   Cần override .control-btn (modern-theme.css) đang set bg trắng cùng specificity. */
#dateFilterBtn.btn-primary {
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)
  ) !important;
  border-color: transparent !important;
  color: #fff !important;
}
#dateFilterBtn.btn-primary #dateFilterLabel,
#dateFilterBtn.btn-primary i {
  color: #fff !important;
}
.camp-tools-btn {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  white-space: nowrap;
}
.camp-tools-btn:hover:not(:disabled) {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}
.camp-tools-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Tool button icon — sky cho refresh (cyclical), violet cho layout */
#btnCampRefresh .camp-tab-icon {
  color: #0ea5e9;
}
#btnCcOpen .camp-tab-icon {
  color: var(--primary-end, #8b5cf6);
}

/* Trình QC — Camp tabs row + placeholder grids */
.camp-tab-btn {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
  white-space: nowrap;
}
.camp-tab-btn:not(.camp-tab-active) {
  border-color: #e2e8f0;
}
.camp-tab-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.camp-tab-btn.camp-tab-active {
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb, 99, 102, 241), 0.25);
}
.camp-tab-btn.camp-tab-active:hover {
  background: linear-gradient(135deg, #5558e3, #7d3df0);
  color: #fff;
}
/* Tab icon = RemixIcon font, fs-5 (1.25rem) như icon toolbar khác.
   font-weight: normal CHỐNG synth-bold do parent .camp-tab-btn / .camp-tools-btn = 600
   (RemixIcon @font-face không có bold variant, browser sẽ fake bold làm strokes dày đôi) */
.camp-tab-icon {
  flex-shrink: 0;
  font-weight: 400;
}
/* Mỗi tab có icon riêng theo palette analogous (sky → indigo → violet → pink) */
.camp-tab-btn[data-camp-tab="tkqc"] .camp-tab-icon {
  color: #0ea5e9;
}
.camp-tab-btn[data-camp-tab="campaign"] .camp-tab-icon {
  color: var(--primary-start, #6366f1);
}
.camp-tab-btn[data-camp-tab="adset"] .camp-tab-icon {
  color: var(--primary-end, #8b5cf6);
}
.camp-tab-btn[data-camp-tab="ad"] .camp-tab-icon {
  color: #ec4899;
}
/* Tab đang active: icon trắng để đọc trên gradient violet */
.camp-tab-btn.camp-tab-active .camp-tab-icon {
  color: #fff;
}
.camp-empty-state {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
}
.camp-empty-state > i {
  font-size: 56px;
  opacity: 0.35;
  margin-bottom: 12px;
}
.camp-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}
.camp-empty-sub {
  font-size: 13px;
  max-width: 360px;
  line-height: 1.5;
}

/* 2FA Generator */
.hm-view.active[data-view="2fa-gen"] {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.tfa-page {
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.tfa-page > .tfa-header {
  flex-shrink: 0;
}
.tfa-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tfa-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.tfa-title i {
  font-size: 22px;
  color: #ef4444;
}
.tfa-subtitle {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}
.tfa-timer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 0 2px;
}
.tfa-timer-row > i {
  color: #94a3b8;
  font-size: 16px;
}
.tfa-timer-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}
.tfa-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--primary-start, #6366f1),
    var(--primary-end, #8b5cf6)
  );
  transition: width 1s linear;
}
.tfa-timer-text {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  min-width: 28px;
  text-align: right;
}
.tfa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  flex: 1 1 auto;
  min-height: 0;
}
.tfa-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.tfa-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
  gap: 10px;
}
.tfa-input-row {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.tfa-input {
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 9px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: #0f172a;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  background: #fff;
}
.tfa-input-row .tfa-input {
  flex: 1 1 auto;
  width: auto;
}
.tfa-input:focus {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.12);
}
.tfa-input.tfa-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
.tfa-btn-add {
  flex-shrink: 0;
  border: none;
  background: linear-gradient(
    90deg,
    var(--primary-start, #6366f1),
    var(--primary-end, #8b5cf6)
  );
  color: #fff;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}
.tfa-btn-add:hover {
  opacity: 0.9;
}
.tfa-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}
.tfa-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  height: 92px;
  flex-shrink: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.tfa-item:hover {
  border-color: #cbd5e1;
}
.tfa-item-saved {
  border-color: rgba(245, 158, 11, 0.25);
  background: #fffaf0;
}
.tfa-item-saved:hover {
  border-color: rgba(245, 158, 11, 0.5);
}
.tfa-info {
  flex: 1;
  min-width: 0;
}
.tfa-secret {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tfa-saved-label {
  font-size: 12px;
  color: #f59e0b;
  font-weight: 600;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tfa-code {
  font-size: 22px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 3px;
  color: #0f172a;
  cursor: pointer;
  transition: color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  margin-top: 2px;
  display: inline-block;
}
.tfa-code:hover {
  color: var(--primary-start, #6366f1);
}
.tfa-code:active {
  color: #4338ca;
}
.tfa-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.tfa-act-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.tfa-act-save {
  border-color: rgba(16, 185, 129, 0.4);
  color: #10b981;
}
.tfa-act-save:hover {
  background: rgba(16, 185, 129, 0.08);
}
.tfa-act-edit {
  border-color: rgba(245, 158, 11, 0.4);
  color: #f59e0b;
}
.tfa-act-edit:hover {
  background: rgba(245, 158, 11, 0.08);
}
.tfa-act-del {
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}
.tfa-act-del:hover {
  background: rgba(239, 68, 68, 0.08);
}
.tfa-empty {
  text-align: center;
  padding: 32px 16px;
  color: #94a3b8;
  font-size: 13px;
}
.tfa-empty i {
  font-size: 36px;
  opacity: 0.4;
  display: block;
  margin-bottom: 8px;
}
@media (max-width: 1024px) {
  .tfa-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Spend Cap Modal — popup "Đặt giới hạn chi tiêu" cho TKQC.
   Theme đồng nhất với các popup khác (cc-modal/customizeModal/Camp tab):
   indigo #6366f1 → #8b5cf6 gradient cho title-icon + accents.
   ============================================================ */
/* ===== Payment Methods Modal (cột Thanh toán TKQC → click) ===== */
.pm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.pm-modal {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  overflow: visible;
  font-size: 14px;
}
.pm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.pm-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.pm-title-icon {
  color: #ef4444;
  font-size: 20px;
  line-height: 1;
}
.pm-account {
  margin: 14px 20px 2px;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.06);
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.18);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pm-account strong {
  font-size: 13.5px;
  color: #1a1a1a;
}
.pm-account small {
  font-size: 11.5px;
  color: #64748b;
  font-family: ui-monospace, Menlo, monospace;
}
.pm-list {
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}
.pm-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
}
.pm-card > img {
  width: 34px;
  height: auto;
  flex-shrink: 0;
}
.pm-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pm-card-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pm-card-num {
  font-weight: 700;
  color: #1a1a1a;
}
.pm-card-sub {
  font-size: 11.5px;
  color: #64748b;
}
.pm-del-btn {
  flex-shrink: 0;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #ef4444;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.pm-del-btn:hover {
  background: #fee2e2;
}
.pm-del-btn.pm-confirm {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}
.pm-del-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.pm-empty {
  text-align: center;
  color: #94a3b8;
  padding: 26px 0;
  font-size: 13px;
}

.scm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.scm-modal {
  position: relative;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  overflow: visible; /* cho close button thoát viền */
  font-size: 14px;
}

.scm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.scm-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.scm-title-icon {
  color: var(--primary-start, #6366f1);
  font-size: 20px;
  line-height: 1;
}

/* Close button: floating circle ngoài góc trên-phải. Bg trắng cùng màu
   với modal → intersection (phần overlap với góc modal) hòa làm 1, không
   shadow tạo viền tách bạch. z-index cao đảm bảo click dễ. */
.scm-close-btn {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #fff; /* same as modal — intersection seamless */
  box-shadow: none; /* KHÔNG shadow — tránh viền giả ở góc giao */
  cursor: pointer;
  color: #94a3b8;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
  transition:
    color 0.15s,
    transform 0.15s;
}
.scm-close-btn:hover {
  color: #ef4444;
  transform: scale(1.1);
}

.scm-content {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.scm-banner {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.06);
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.18);
  border-radius: 12px;
  padding: 16px;
}
.scm-account {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.scm-account strong {
  font-size: 14px;
  color: #0f172a;
  font-weight: 600;
  margin-bottom: 2px;
}
.scm-account small {
  color: #94a3b8;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", monospace;
}
.scm-status-main {
  font-size: 14px;
  color: #0f172a;
  font-weight: 600;
  margin-bottom: 4px;
}
.scm-status-main strong {
  color: var(--primary-start, #6366f1);
  font-weight: 700;
}
.scm-status-sub {
  font-size: 13px;
  color: #475569;
}
.scm-status-sub strong {
  color: var(--primary-start, #6366f1);
  font-weight: 600;
}
.scm-dot {
  margin: 0 6px;
  color: rgba(var(--primary-rgb, 99, 102, 241), 0.5);
}
.scm-divider {
  height: 1px;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.18);
  margin: 12px 0;
}
.scm-hint {
  display: block;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.scm-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.scm-radio-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.scm-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #0f172a;
  transition: all 0.15s;
  user-select: none;
  background: #fff;
}
.scm-radio:hover {
  border-color: var(--primary-start, #6366f1);
}
.scm-radio input[type="radio"] {
  display: none;
}
.scm-radio-dot {
  width: 16px;
  height: 16px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s;
}
.scm-radio-active {
  border-color: var(--primary-start, #6366f1);
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
  font-weight: 600;
}
.scm-radio-active .scm-radio-dot {
  border-color: var(--primary-start, #6366f1);
}
.scm-radio-active .scm-radio-dot::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--primary-start, #6366f1);
  border-radius: 50%;
}

.scm-input-wrap label {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
  font-weight: 500;
}
.scm-input-row {
  display: flex;
  align-items: center;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 0 14px;
  background: #fff;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.scm-input-row:focus-within {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.15);
}
.scm-input-row input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  background: transparent;
}
.scm-input-ccy {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-start, #6366f1);
  letter-spacing: 0.5px;
}
.scm-input-wrap.scm-input-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.scm-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid #f1f5f9;
}
.scm-submit-btn {
  width: 100%;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)
  );
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition:
    transform 0.1s,
    box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 99, 102, 241), 0.3);
}
.scm-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--primary-rgb, 99, 102, 241), 0.4);
}
.scm-submit-btn:active {
  transform: translateY(0);
}
.scm-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
 * AUTO CHECK — standalone tool page (Công cụ → Auto Check)
 * Tái sử dụng class .nh-ac-* từ inline style của dashboard
 * ============================================================ */
.hm-view.active[data-view="auto-check"] {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.ac-page {
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}
.ac-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.ac-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.ac-title i {
  font-size: 22px;
  color: var(--primary-start, #6366f1);
}
.ac-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.ac-card-head {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  flex-shrink: 0;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
}
/* Mọi control giữ nguyên kích thước, chỉ search co lại khi thiếu chỗ */
.ac-card-head .nh-ac-tabs,
.ac-card-head .ac-head-divider,
.ac-card-head .ac-cat-chip,
.ac-card-head .ac-hbtn,
.ac-card-head .ac-hour-inline {
  flex-shrink: 0;
}
.ac-hour-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 39px;
}
.ac-hour-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 39px;
  padding: 0 4px 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: #ffffff;
  box-sizing: border-box;
}
.ac-hour-box .nh-ac-hour-select {
  border: none;
  background-color: transparent;
  padding-left: 0;
  padding-right: 22px;
}
.ac-hour-box .nh-ac-hour-select:focus {
  box-shadow: none;
}
.ac-hour-box .ac-hm-sep {
  color: #475569;
  font-weight: 700;
  margin: 0 1px;
  user-select: none;
}

/* Custom Giờ/Phút dropdown */
.ac-hm-pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 4px 4px 7px;
  border-radius: 7px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.85rem;
  color: #0f172a;
  user-select: none;
  transition:
    background 0.14s,
    box-shadow 0.14s;
}
.ac-hm-pick:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
}
.ac-hm-pick.is-open {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.12);
  color: #4338ca;
}
.ac-hm-pick:focus-visible {
  outline: 2px solid rgba(var(--primary-rgb, 99, 102, 241), 0.4);
  outline-offset: 1px;
}
.ac-hm-caret {
  font-size: 0.95rem;
  color: #94a3b8;
  transition: transform 0.18s;
}
.ac-hm-pick.is-open .ac-hm-caret {
  transform: rotate(180deg);
  color: #4f46e5;
}
.ac-hm-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  width: 84px;
  max-height: 260px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.14),
    0 2px 6px rgba(15, 23, 42, 0.06);
  padding: 6px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.16s,
    transform 0.18s,
    visibility 0s linear 0.18s;
}
.ac-hm-pick.is-open .ac-hm-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 0.16s,
    transform 0.18s,
    visibility 0s linear 0s;
}
.ac-hm-menu::-webkit-scrollbar {
  width: 6px;
}
.ac-hm-menu::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.14);
  border-radius: 3px;
}
.ac-hm-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #475569;
  border-radius: 7px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition:
    background 0.12s,
    color 0.12s;
}
.ac-hm-opt:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
  color: #4338ca;
}
.ac-hm-opt.is-active {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.16),
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.16)
  );
  color: #4338ca;
  font-weight: 700;
}

/* Đồng bộ chiều cao 39px cho mọi control ở ac-card-head */
.ac-card-head .nh-ac-tabs,
.ac-card-head .ac-cat-chip,
.ac-card-head .nh-ac-hour-select,
.ac-card-head .nh-ac-btn {
  height: 39px;
  box-sizing: border-box;
}
.ac-card-head .nh-ac-hour-select {
  padding-top: 0;
  padding-bottom: 0;
}
.ac-card-head .nh-ac-btn {
  padding-top: 0;
  padding-bottom: 0;
}
.ac-card .nh-ac-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
}
.ac-card .nh-ac-panel.is-active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.ac-card .nh-ac-row {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ac-card .ac-textarea-lg {
  flex: 1 1 auto;
  min-height: 280px;
}

/* ── Bảng UID/BM ─────────────────────────────────────── */
.ac-tbl-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 10px;
}
.ac-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.12s;
  white-space: nowrap;
}
.ac-btn-sm i {
  font-size: 0.95rem;
}
.ac-btn-sm:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ac-btn-sm:not(:disabled):active {
  transform: translateY(1px);
}
.ac-btn-primary {
  color: #ffffff;
  background: linear-gradient(135deg, #4f46e5, var(--primary-start, #6366f1));
  border-color: #4f46e5;
}
.ac-btn-primary:not(:disabled):hover {
  background: linear-gradient(135deg, #4338ca, #4f46e5);
}
.ac-btn-danger {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fecaca;
}
.ac-btn-danger:not(:disabled):hover {
  background: #fecaca;
}
/* Divider giữa tabs và chip Danh mục */
.ac-head-divider {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  background: rgba(15, 23, 42, 0.12);
  margin: 2px 2px;
}

/* Chip "Danh mục" ở ac-card-head — match height + style với tabs */
.ac-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 39px;
  padding: 0 12px 0 11px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.08),
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.08)
  );
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.18);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4338ca;
  position: relative;
  cursor: pointer;
  transition:
    background 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
  box-sizing: border-box;
}
.ac-cat-chip:hover {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.14),
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.14)
  );
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.32);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb, 99, 102, 241), 0.12);
}
.ac-cat-chip:focus-within {
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.18);
}
.ac-cat-chip-ico {
  font-size: 1.05rem;
  color: var(--primary-start, #6366f1);
  flex-shrink: 0;
}
.ac-cat-chip-caret {
  font-size: 1rem;
  color: var(--primary-start, #6366f1);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.ac-cat-chip.is-open .ac-cat-chip-caret,
.ac-cat-chip:focus-within .ac-cat-chip-caret {
  transform: rotate(180deg);
}
.ac-cat-chip-value {
  color: #4338ca;
  font-weight: 700;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown menu */
.ac-cat-chip-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 140px;
  max-width: 240px;
  max-height: 320px;
  overflow: auto;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.14),
    0 2px 6px rgba(15, 23, 42, 0.06);
  padding: 6px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.16s,
    transform 0.18s,
    visibility 0s linear 0.18s;
  cursor: default;
}
.ac-cat-chip.is-open .ac-cat-chip-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.16s,
    transform 0.18s,
    visibility 0s linear 0s;
}
.ac-cat-chip-menu::-webkit-scrollbar {
  width: 6px;
}
.ac-cat-chip-menu::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.14);
  border-radius: 3px;
}
.ac-cat-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 0.84rem;
  font-weight: 500;
  color: #0f172a;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.14s,
    color 0.14s;
}
.ac-cat-opt:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
  color: #4338ca;
}
.ac-cat-opt.is-active {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.14),
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.14)
  );
  color: #4338ca;
  font-weight: 700;
}
.ac-cat-opt-lbl {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Header action buttons (Lọc / Nhập) — match chip style */
.ac-hbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 39px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  position: relative;
  user-select: none;
  box-sizing: border-box;
  transition:
    background 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.ac-hbtn:hover {
  background: #f8fafc;
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.3);
}
.ac-hbtn.is-open {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.08),
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.08)
  );
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.4);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.12);
}
.ac-hbtn > i {
  color: #64748b;
  font-size: 1rem;
}
.ac-hbtn.is-open > i {
  color: #4f46e5;
}
.ac-hbtn-caret {
  transition: transform 0.2s;
}
.ac-hbtn.is-open .ac-hbtn-caret {
  transform: rotate(180deg);
}
.ac-hbtn-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow:
    0 10px 28px rgba(15, 23, 42, 0.14),
    0 2px 6px rgba(15, 23, 42, 0.06);
  padding: 6px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.16s,
    transform 0.18s,
    visibility 0s linear 0.18s;
  cursor: default;
}
.ac-hbtn.is-open .ac-hbtn-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.16s,
    transform 0.18s,
    visibility 0s linear 0s;
}
.ac-filter-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 0.84rem;
  font-weight: 500;
  color: #0f172a;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.14s;
}
.ac-filter-opt:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.08);
}
.ac-filter-opt > span:nth-child(2) {
  flex: 1;
}
.ac-filter-check {
  accent-color: #4f46e5;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Search box trong ac-card-head */
.ac-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 39px;
  flex: 1 1 0;
  min-width: 0;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  padding: 0 10px;
  box-sizing: border-box;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.ac-search-input {
  min-width: 0;
}
.ac-search:focus-within {
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.5);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.14);
}
.ac-search-ico {
  font-size: 1rem;
  color: #94a3b8;
  flex-shrink: 0;
  margin-right: 6px;
}
.ac-search:focus-within .ac-search-ico {
  color: #4f46e5;
}
.ac-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 500;
  color: #0f172a;
  padding: 0;
  outline: none;
}
.ac-search-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
}
.ac-search-clear {
  font-size: 1rem;
  color: #cbd5e1;
  flex-shrink: 0;
  margin-left: 4px;
  cursor: pointer;
  transition: color 0.14s;
}
.ac-search-clear:hover {
  color: #ef4444;
}

.ac-cat-opt-count {
  flex-shrink: 0;
  padding: 1px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 999px;
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ac-cat-opt:hover .ac-cat-opt-count,
.ac-cat-opt.is-active .ac-cat-opt-count {
  color: #4f46e5;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.16);
}
.ac-aggrid {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Zalo link gate — hiển thị thay cho card khi user chưa liên kết Zalo */
.ac-zalo-gate {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 48px 32px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
}
.ac-zalo-gate-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(0, 104, 255, 0.1);
  color: #0068ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
}
.ac-zalo-gate-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.ac-zalo-gate-desc {
  font-size: 14px;
  color: #64748b;
  max-width: 480px;
  line-height: 1.55;
  margin: 0;
}
.ac-zalo-gate-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}
.ac-zalo-gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.12s;
  text-decoration: none;
}
.ac-zalo-gate-btn i {
  font-size: 16px;
}
.ac-zalo-gate-btn-primary {
  color: #ffffff;
  background: #0068ff;
  border-color: #0068ff;
}
.ac-zalo-gate-btn-primary:hover {
  background: #0057d6;
  border-color: #0057d6;
  color: #ffffff;
}
.ac-zalo-gate-btn-ghost {
  color: #475569;
  background: transparent;
  border-color: rgba(15, 23, 42, 0.12);
}
.ac-zalo-gate-btn-ghost:hover {
  background: #f8fafc;
  color: #0f172a;
}
.ac-zalo-gate-btn-ghost:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ac-zalo-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ac-zalo-code-box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: linear-gradient(
    135deg,
    rgba(0, 104, 255, 0.06),
    rgba(0, 87, 214, 0.04)
  );
  border: 1px dashed rgba(0, 104, 255, 0.35);
  border-radius: 14px;
  cursor: pointer;
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.12s;
}
.ac-zalo-code-box:hover {
  background: linear-gradient(
    135deg,
    rgba(0, 104, 255, 0.12),
    rgba(0, 87, 214, 0.08)
  );
  border-color: rgba(0, 104, 255, 0.6);
}
.ac-zalo-code-box:active {
  transform: scale(0.98);
}
.ac-zalo-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 28px;
  font-weight: 800;
  color: #0068ff;
  letter-spacing: 4px;
}
.ac-zalo-code-box i {
  color: #0068ff;
  font-size: 18px;
}
.ac-zalo-countdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #64748b;
}
.ac-zalo-countdown i {
  color: #f59e0b;
  font-size: 14px;
}
.ac-zalo-countdown strong {
  color: #0f172a;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Footer: 2 nhóm thống kê (Tổng/Đã chọn/Bôi đen | status counts) */
.ac-card .nh-ac-foot {
  padding: 8px 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  flex-shrink: 0;
}
.ac-stats-grp {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px 4px 4px 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #ffffff;
}
.ac-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: #334155;
  padding: 0 10px;
  border-right: 1px solid rgba(15, 23, 42, 0.08);
}
.ac-stat-item:last-child {
  border-right: none;
}
.ac-stat-item strong {
  color: #475569;
  font-weight: 600;
}
.ac-stat-item .badge {
  font-weight: 700;
  font-size: 0.82rem;
  padding: 4px 9px;
  font-variant-numeric: tabular-nums;
}
.ac-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ac-dot-live {
  background: #16a34a;
}
.ac-dot-die {
  background: #dc2626;
}
.ac-dot-err {
  background: #f59e0b;
}
.ac-dot-pending {
  background: #94a3b8;
}
/* Căn giữa nội dung mọi cell trong AG-Grid của Auto Check */
.ac-aggrid .ag-cell {
  display: flex;
  align-items: center;
}
.ac-aggrid .ag-cell-value {
  width: 100%;
}
/* Cột ID: chữ in đậm, không decor */
.ac-aggrid .ac-cell-id {
  font-weight: 700;
  color: #0f172a;
}
.ac-grid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 40px 20px;
  color: #94a3b8;
}
.ac-grid-empty i {
  font-size: 36px;
  color: #cbd5e1;
}
.ac-grid-empty p {
  margin: 0;
  font-size: 0.86rem;
}

/* ── Trạng thái: dấu chấm trước + chữ đậm ─────────────── */
.ac-st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
}
.ac-st .ac-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ac-st strong {
  font-weight: 700;
}
.ac-st-live {
  color: #16a34a;
}
.ac-st-live .ac-dot {
  background: #16a34a;
}
.ac-st-die {
  color: #dc2626;
}
.ac-st-die .ac-dot {
  background: #dc2626;
}
.ac-st-err {
  color: #d97706;
}
.ac-st-err .ac-dot {
  background: #f59e0b;
}
.ac-st-pending {
  color: #64748b;
}
.ac-st-pending .ac-dot {
  background: #94a3b8;
}

/* ============================================ */
/* HOME License card — state biến đổi theo key */
/* ============================================ */
.nh-stat.nh-license.is-danger .nh-license-dot {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.22);
  animation: nh-license-pulse-danger 1.6s ease-in-out infinite;
}
.nh-stat.nh-license.is-danger .nh-license-status {
  color: #b91c1c;
}
.nh-stat.nh-license.is-warning .nh-license-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22);
  animation: nh-license-pulse-warning 2s ease-in-out infinite;
}
.nh-stat.nh-license.is-warning .nh-license-status {
  color: #b45309;
}
.nh-stat.nh-license.is-danger,
.nh-stat.nh-license.is-warning {
  transition: transform 0.18s ease;
}
.nh-stat.nh-license.is-danger:hover,
.nh-stat.nh-license.is-warning:hover {
  transform: translateY(-1px);
}
@keyframes nh-license-pulse-danger {
  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(239, 68, 68, 0);
  }
}
@keyframes nh-license-pulse-warning {
  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(245, 158, 11, 0);
  }
}

/* ============================================ */
/* FB SESSIONS — Phiên Facebook (home tools)   */
/* ============================================ */
/* View full-height — card chiếm toàn bộ phần dư, bảng scroll bên trong */
.hm-view.active[data-view="fb-sessions"] {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.fbs-page {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 22px 22px;
  box-sizing: border-box;
  overflow: hidden;
}
.fbs-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 4px;
  flex-shrink: 0;
}
.fbs-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin: 0;
}
.fbs-title i {
  font-size: 1.55rem;
  color: #1877f2;
}
.fbs-subtitle {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
  line-height: 1.55;
}

.fbs-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.fbs-card > .mt-card-head {
  flex-shrink: 0;
}

.fbs-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fbs-head-actions > .fbs-quota,
.fbs-head-actions > .mt-pill {
  height: 30px;
  padding: 0 12px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1;
}
.fbs-head-actions > .fbs-quota i,
.fbs-head-actions > .mt-pill i {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.fbs-quota {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  border-radius: 8px;
  background: #fef3c7;
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.18);
}
.fbs-quota.fbs-quota-danger {
  background: #fee2e2;
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.18);
}
.fbs-quota.fbs-quota-success {
  background: #dcfce7;
  color: #15803d;
  border-color: rgba(21, 128, 61, 0.18);
}
.fbs-quota.fbs-quota-hidden {
  display: none;
}

.fbs-table-wrap {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border-top: 1px solid #f1f5f9;
}
.fbs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.fbs-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.fbs-table thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #64748b;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.fbs-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
  vertical-align: middle;
}
.fbs-table tbody tr:last-child td {
  border-bottom: none;
}
.fbs-table tbody tr:hover td {
  background: #f8fafc;
}
.fbs-th-num {
  width: 56px;
}
.fbs-th-action {
  width: 100px;
  text-align: right;
}
.fbs-num {
  font-weight: 700;
  color: var(--primary-start, #6366f1);
}
.fbs-uid-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #1877f2;
  text-decoration: none;
  font-weight: 600;
}
.fbs-uid-link:hover {
  text-decoration: underline;
}
.fbs-uid-link i {
  font-size: 0.78rem;
  opacity: 0.7;
}
.fbs-cell-muted {
  color: #64748b;
  font-size: 0.82rem;
}
.fbs-browser {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}
.fbs-time {
  font-variant-numeric: tabular-nums;
  color: #475569;
  font-size: 0.82rem;
}

.fbs-row-actions {
  text-align: right;
}
.fbs-btn-delete {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b91c1c;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.fbs-btn-delete:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}
.fbs-btn-delete:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.fbs-empty {
  text-align: center;
  padding: 56px 16px !important;
  color: #94a3b8;
}
.fbs-empty i {
  font-size: 48px;
  color: #cbd5e1;
  opacity: 0.65;
}
.fbs-empty .ri-spin {
  animation: fbs-spin 0.9s linear infinite;
}
@keyframes fbs-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.fbs-empty-text {
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: #64748b;
}

.fbs-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-top: 1px solid #f1f5f9;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: #fff;
}
.fbs-pagination:empty {
  display: none;
}
.fbs-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}
.fbs-page-btn:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.fbs-page-btn.is-active {
  background: var(--primary-start, #6366f1);
  border-color: var(--primary-start, #6366f1);
  color: #fff;
}
.fbs-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fbs-page-info {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0 6px;
}

/* ============================================ */
/* HEADER USER BOX (HOME page top-right)        */
/* Single row compact pill — fit gọn header tím */
/* ============================================ */
.hub {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 12px 0 4px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #fff;
  transition: background 0.18s ease;
}
.hub:hover {
  background: rgba(255, 255, 255, 0.16);
}
.hub-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #ec4899);
  color: #fff;
  font-weight: 800;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.hub-name {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.2px;
}
.hub-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hub-chip i {
  font-size: 0.95rem;
}
.hub-chip-balance {
  background: rgba(16, 185, 129, 0.22);
  color: #d1fae5;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.hub-chip-balance i {
  color: #34d399;
}
.hub-chip-pkg {
  background: rgba(245, 158, 11, 0.22);
  color: #fef3c7;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.hub-chip-pkg i {
  color: #fcd34d;
}

/* ============================================ */
/* DEPOSIT (Nạp tiền) — HOME view              */
/* ============================================ */
.hm-view.active[data-view="deposit"] {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.dep-page {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  box-sizing: border-box;
  /* Thiếu chiều cao → CUỘN, không co ép banner/nội dung (flex con đều flex-shrink:0). */
  overflow-y: auto;
  overflow-x: hidden;
}
.dep-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 4px;
  flex-shrink: 0;
}
.dep-grid {
  flex-shrink: 0;
}
/* Đồng bộ tiêu đề mục với "Lịch sử giao dịch" (tx-title) — cùng size/letter-spacing + icon gradient */
.dep-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.3px;
}
.dep-title i {
  font-size: 1.65rem;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dep-subtitle {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
  line-height: 1.55;
}

.dep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
/* Số cột co theo số phương thức nạp đang bật (JS gán dep-cols-N). 1 cột → căn giữa, giới hạn bề ngang. */
.dep-grid.dep-cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.dep-grid.dep-cols-2 {
  grid-template-columns: 1fr 1fr;
}
.dep-grid.dep-cols-1 {
  grid-template-columns: minmax(0, 600px);
  justify-content: center;
}
@media (max-width: 1100px) {
  .dep-grid,
  .dep-grid.dep-cols-2,
  .dep-grid.dep-cols-3 {
    grid-template-columns: 1fr;
  }
}
/* Chưa cấu hình phương thức nạp nào */
.dep-no-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 48px 22px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
}
.dep-no-method > i {
  font-size: 52px;
  color: #94a3b8;
}
.dep-no-method-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 6px 0 0;
}
.dep-no-method-desc {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0 0 6px;
}
.dep-card {
  display: flex;
  flex-direction: column;
  min-height: 380px;
}
/* Card-head phương thức khớp card-head "Chi tiết giao dịch" (tx-table-card): cùng weight/size/viền */
.dep-card > .mt-card-head {
  font-weight: 700;
  font-size: 0.92rem;
  border-bottom: 1px solid #f1f5f9;
}
.dep-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.dep-note {
  font-size: 0.82rem;
  color: #64748b;
  margin: 0 0 6px;
  line-height: 1.55;
  text-align: center;
}
.dep-warn {
  display: block;
  color: #d97706;
  font-weight: 600;
  margin-top: 4px;
}

.dep-field {
  display: grid;
  grid-template-columns: 110px 1fr 32px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.dep-field-highlight {
  background: #fffbeb;
  border-color: #fcd34d;
}
.dep-label {
  font-size: 0.75rem;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dep-label i {
  font-size: 0.9rem;
}
.dep-val {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.88rem;
  word-break: break-all;
}
.dep-mono {
  font-family: monospace;
  letter-spacing: 0.5px;
}
.dep-content-val {
  color: #dc2626;
  font-weight: 700;
}
.dep-copy {
  width: 32px;
  height: 32px;
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  transition: all 0.15s ease;
}
.dep-copy:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.dep-copy.dep-copy-warn {
  background: #fbbf24;
  color: #78350f;
  border-color: #f59e0b;
}
.dep-copy.dep-copy-warn:hover {
  background: #f59e0b;
}

.dep-qr-body {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dep-qr-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(var(--primary-rgb, 99, 102, 241), 0.1);
  min-height: 260px;
  min-width: 260px;
}
.dep-qr-img {
  max-width: 240px;
  border-radius: 8px;
  display: block;
}
.dep-qr-empty {
  color: #94a3b8;
  text-align: center;
}
.dep-qr-empty i {
  font-size: 64px;
  opacity: 0.4;
}
.dep-qr-empty p {
  margin: 8px 0 0;
  font-size: 0.88rem;
}
.dep-qr-hint {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 12px;
}
.dep-qr-hint i {
  color: var(--primary-start, #6366f1);
}
.dep-qr-content {
  color: #dc2626;
}

.dep-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  margin-left: 8px;
  letter-spacing: 0.5px;
}
.dep-badge-success {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}
.dep-usdt-disabled {
  text-align: center;
}
.dep-zalo-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #0088ff, #0066cc);
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  margin-top: 12px;
}
.dep-zalo-btn:hover {
  color: #fff;
  opacity: 0.9;
}

.dep-usdt-rate {
  font-size: 0.8rem;
  color: #64748b;
  text-align: center;
  margin: 0 0 12px;
}
.dep-usdt-rate strong {
  color: #26a17b;
}
.dep-input-lbl {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 4px;
}
.dep-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.9rem;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease;
}
.dep-input:focus {
  border-color: #26a17b;
}
.dep-input-hint {
  display: block;
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 4px;
}
.dep-usdt-preview {
  font-size: 0.85rem;
  color: #475569;
  margin: 10px 0;
}
.dep-usdt-preview strong {
  color: #26a17b;
  font-weight: 700;
}
.dep-usdt-create-btn {
  width: 100%;
  padding: 11px;
  background: linear-gradient(135deg, #26a17b, #1a7a5a);
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dep-usdt-create-btn:hover {
  opacity: 0.92;
}
.dep-usdt-create-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.dep-usdt-error {
  background: #fee2e2;
  color: #b91c1c;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-top: 10px;
  border: 1px solid #fecaca;
}

.dep-usdt-info-bar {
  background: rgba(38, 161, 123, 0.1);
  border: 1px solid rgba(38, 161, 123, 0.3);
  color: #1a7a5a;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  margin-bottom: 12px;
}
.dep-usdt-amount-box {
  background: rgba(38, 161, 123, 0.06);
  border: 2px solid rgba(38, 161, 123, 0.4);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.dep-usdt-amount-lbl {
  font-size: 0.7rem;
  color: #64748b;
  margin-bottom: 4px;
}
.dep-usdt-amount-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dep-usdt-amount-val {
  flex: 1;
  font-size: 1.25rem;
  font-weight: 700;
  color: #dc2626;
  font-family: monospace;
  word-break: break-all;
}
.dep-usdt-copy {
  padding: 6px 10px;
  background: linear-gradient(135deg, #26a17b, #1a7a5a);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.dep-usdt-vnd-eq {
  font-size: 0.7rem;
  color: #64748b;
  margin-top: 4px;
}
.dep-usdt-wallet-box {
  background: rgba(38, 161, 123, 0.06);
  border: 2px solid rgba(38, 161, 123, 0.3);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}
.dep-usdt-wallet-lbl {
  font-size: 0.7rem;
  color: #64748b;
  margin-bottom: 4px;
}
.dep-usdt-wallet-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dep-usdt-wallet-val {
  flex: 1;
  font-size: 0.7rem;
  color: #26a17b;
  word-break: break-all;
  background: transparent;
  padding: 0;
}
.dep-usdt-status-row {
  text-align: center;
  margin-bottom: 12px;
}
.dep-usdt-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f59e0b;
  color: #fff;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.78rem;
  margin-bottom: 6px;
}
.dep-usdt-status-badge.is-completed {
  background: #10b981;
}
.dep-usdt-status-badge.is-expired {
  background: #94a3b8;
}
.dep-usdt-status-badge.is-cancelled {
  background: #64748b;
}
.dep-usdt-countdown {
  font-size: 0.78rem;
  color: #64748b;
}
.dep-usdt-cd-val {
  font-weight: 700;
  color: #dc2626;
}
.dep-usdt-cancel-btn {
  width: 100%;
  padding: 7px;
  background: #fff;
  color: #64748b;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
}
.dep-usdt-cancel-btn:hover {
  background: #f1f5f9;
}
.dep-usdt-cancel-confirm {
  display: flex;
  gap: 8px;
}
.dep-usdt-cancel-yes {
  flex: 1;
  padding: 7px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}
.dep-usdt-cancel-no {
  flex: 1;
  padding: 7px;
  background: #fff;
  color: #64748b;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
}

.dep-history-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dep-history-card > .mt-card-head {
  flex-shrink: 0;
}
.dep-history-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.dep-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.dep-history-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}
.dep-history-table thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #64748b;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.dep-history-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
}
.dep-history-table tbody tr:hover td {
  background: #f8fafc;
}
.dep-history-empty {
  text-align: center;
  padding: 56px 16px !important;
  color: #94a3b8;
}
.dep-history-empty i {
  font-size: 48px;
  color: #cbd5e1;
  opacity: 0.65;
}
.dep-history-empty p {
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: #64748b;
}
.dep-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}
.dep-status-pill.is-completed {
  background: #dcfce7;
  color: #15803d;
}
.dep-status-pill.is-pending {
  background: #fef3c7;
  color: #b45309;
}
.dep-status-pill.is-cancelled {
  background: #f1f5f9;
  color: #64748b;
}

/* ============================================ */
/* PACKAGES (Mua gói) — HOME view              */
/* Theme: indigo/violet primary + emerald accent + amber CHỈ ở badge */
/* ============================================ */
.hm-view.active[data-view="packages"] {
  display: flex !important;
  flex-direction: column;
  overflow: auto;
  background:
    radial-gradient(
      ellipse 800px 400px at top right,
      rgba(var(--primary-end-rgb, 139, 92, 246), 0.05),
      transparent
    ),
    radial-gradient(
      ellipse 600px 300px at bottom left,
      rgba(var(--primary-rgb, 99, 102, 241), 0.04),
      transparent
    ),
    #fafafb;
}
.pkg-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  box-sizing: border-box;
}
.pkg-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 4px;
}
.pkg-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.55rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.3px;
}
.pkg-title i {
  font-size: 1.65rem;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pkg-subtitle {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
  line-height: 1.55;
}

/* Active package banner — gradient indigo/violet, có CTA hủy bên trong */
.pkg-active-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.1),
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.08)
  );
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.22);
  color: #4338ca;
  border-radius: 14px;
  font-size: 0.9rem;
  position: relative;
  overflow: hidden;
}
.pkg-active-info::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    var(--primary-start, #6366f1),
    var(--primary-end, #8b5cf6)
  );
  border-radius: 14px 0 0 14px;
}
.pkg-active-info > i {
  font-size: 1.2rem;
  flex-shrink: 0;
  color: var(--primary-start, #6366f1);
}
/* Hộp hướng dẫn nâng cấp (thay chỗ nút Hủy gói cũ) — tông emerald như nút Nâng cấp */
.pkg-upgrade-guide {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 14px;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1),
    rgba(5, 150, 105, 0.06)
  );
  border: 1px solid rgba(16, 185, 129, 0.22);
  color: #047857;
  border-radius: 12px;
  font-size: 0.83rem;
  line-height: 1.5;
}
.pkg-upgrade-guide > i {
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 1px;
  color: #10b981;
}
.pkg-upgrade-guide b {
  color: #065f46;
  font-weight: 700;
}

/* Tự động gia hạn — mẫu "Viền gradient sáng" (switch trong hộp Thanh toán khi đang có gói) */
.pkg-autorenew-row {
  position: relative;
  margin: 6px 0 12px;
  padding: 2px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow:
    0 8px 24px -10px rgba(99, 102, 241, 0.5),
    0 0 18px -4px rgba(139, 92, 246, 0.35);
}
.pkg-autorenew-row .pkg-ar2-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "ic ttl sw" "ic desc sw";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
}
.pkg-autorenew-row .pkg-ar2-ic {
  grid-area: ic;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.55);
}
.pkg-autorenew-row .pkg-ar2-ic i {
  font-size: 21px;
}
.pkg-autorenew-row .pkg-ar2-ttl {
  grid-area: ttl;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.pkg-autorenew-row .pkg-ar2-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow:
    0 0 0 3px rgba(34, 197, 94, 0.18),
    0 0 8px rgba(34, 197, 94, 0.7);
  display: none;
}
.pkg-autorenew-row:has(#pkgAutoRenewSwitch:checked) .pkg-ar2-dot {
  display: inline-block;
}
.pkg-autorenew-row .pkg-ar2-desc {
  grid-area: desc;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #64748b;
}
.pkg-autorenew-row .pkg-ar2-cb {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.pkg-autorenew-row .pkg-ar2-sw {
  grid-area: sw;
  display: inline-block;
  width: 44px;
  height: 25px;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  background: #e2e8f0;
  transition: 0.28s;
}
.pkg-autorenew-row .pkg-ar2-sw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
  transition: 0.28s;
}
.pkg-autorenew-row .pkg-ar2-cb:checked + .pkg-ar2-sw {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 0 14px rgba(99, 102, 241, 0.6);
}
.pkg-autorenew-row .pkg-ar2-cb:checked + .pkg-ar2-sw::after {
  transform: translateX(19px);
}
.pkg-autorenew-row .pkg-ar2-cb:disabled + .pkg-ar2-sw {
  opacity: 0.6;
  cursor: default;
}
.pkg-autorenew-row .pkg-ar2-cb:focus-visible + .pkg-ar2-sw {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
.pkg-buy-ar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
}
.pkg-buy-ar .form-check-input {
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
[data-bs-theme="dark"] .pkg-autorenew-row .pkg-ar2-inner {
  background: #1b2433;
}
[data-bs-theme="dark"] .pkg-autorenew-row .pkg-ar2-ttl {
  color: #e7ebf2;
}
[data-bs-theme="dark"] .pkg-autorenew-row .pkg-ar2-desc {
  color: #94a3b8;
}
[data-bs-theme="dark"] .pkg-autorenew-row .pkg-ar2-sw {
  background: #3a4557;
}
[data-bs-theme="dark"] .pkg-buy-ar {
  color: #cbd5e1;
}

.pkg-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .pkg-grid {
    grid-template-columns: 1fr;
  }
}

.pkg-col-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  align-self: stretch;
}
.pkg-card-section {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pkg-col-main > .pkg-card-section:last-child {
  flex: 1 1 auto;
}
.pkg-card-section > .mt-card-head {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  font-weight: 700;
  font-size: 0.92rem;
  color: #0f172a;
}
.pkg-card-section > .mt-card-head i {
  font-size: 1.05rem;
}

/* Duration — 4 ô chia đều (grid repeat 4) */
.pkg-duration-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px;
}
@media (max-width: 600px) {
  .pkg-duration-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.pkg-duration-card {
  padding: 14px 12px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  position: relative;
}
.pkg-duration-card:hover {
  border-color: #a5b4fc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 99, 102, 241), 0.08);
}
.pkg-duration-card.is-active {
  border-color: var(--primary-start, #6366f1);
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.08),
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.04)
  );
  box-shadow: 0 4px 14px rgba(var(--primary-rgb, 99, 102, 241), 0.15);
}
.pkg-duration-card.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: 18px;
  height: 18px;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  clip-path: polygon(0 100%, 0 0, 100% 100%);
  border-radius: 0 0 0 12px;
}
.pkg-duration-lbl {
  font-weight: 700;
  color: #0f172a;
  font-size: 0.95rem;
  letter-spacing: -0.2px;
}
.pkg-duration-discount {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 3px 9px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
  z-index: 2;
}

/* Package cards — bold visual */
.pkg-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 16px;
  flex: 1 1 auto;
  align-content: space-evenly;
}
@media (max-width: 900px) {
  .pkg-list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .pkg-list-grid {
    grid-template-columns: 1fr;
  }
}
.pkg-card {
  padding: 18px 16px 16px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.pkg-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--primary-start, #6366f1),
    var(--primary-end, #8b5cf6)
  );
  opacity: 0;
  transition: opacity 0.18s ease;
}
.pkg-card:hover {
  border-color: #a5b4fc;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--primary-rgb, 99, 102, 241), 0.1);
}
.pkg-card:hover::before {
  opacity: 0.6;
}
/* Gói ĐANG CHỌN — nổi bật (phóng nhẹ + glow tím) để thấy rõ đang chọn gì */
.pkg-card.is-active {
  border-color: var(--primary-start, #6366f1);
  background: linear-gradient(
    180deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.06),
    #fff 32%
  );
  box-shadow: 0 8px 18px -4px rgba(var(--primary-rgb, 99, 102, 241), 0.42);
  transform: scale(1.03);
  z-index: 1;
}
.pkg-card.is-active::before {
  opacity: 1;
  height: 4px;
}

/* Explainer 'Số phiên hoạt động là gì' */
.pkg-explain {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pkg-explain-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #0f172a;
  margin-bottom: 10px;
}
.pkg-explain-head i {
  color: var(--primary-start, #6366f1);
  font-size: 1.15rem;
}
.pkg-explain-lead {
  margin: 0 0 12px;
  font-size: 0.83rem;
  color: #374151;
  line-height: 1.5;
}
.pkg-explain-lead b {
  color: var(--primary-start, #6366f1);
}
.pkg-explain-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.pkg-explain-step {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #f6f7fb;
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
}
.pkg-explain-step .pes-ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex: none;
}
.pkg-explain-step b {
  display: block;
  font-size: 0.8rem;
  color: #0f172a;
}
.pkg-explain-step small {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.4;
  display: block;
  margin-top: 1px;
}
.pkg-explain-notes {
  margin: 0;
  padding-left: 18px;
}
.pkg-explain-notes li {
  font-size: 0.76rem;
  color: #475569;
  margin-bottom: 4px;
  line-height: 1.5;
}
.pkg-explain-notes li b {
  color: #0f172a;
}
@media (max-width: 600px) {
  .pkg-explain-steps {
    grid-template-columns: 1fr;
  }
}

.pkg-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 12px;
  border: 0;
  box-shadow: 0 10px 24px -8px rgba(var(--primary-rgb, 99, 102, 241), 0.6);
}
.pkg-card.is-active .pkg-card-icon {
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb, 99, 102, 241), 0.35);
}
.pkg-card-name {
  font-weight: 800;
  font-size: 1.1rem;
  color: #0f172a;
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.pkg-card-desc {
  display: none;
}
.pkg-card-price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 12px;
  background: #f0effe;
  padding: 7px 18px;
  border-radius: 999px;
}
.pkg-card-price {
  font-weight: 800;
  color: var(--primary-start, #6366f1);
  font-size: 1.2rem;
  letter-spacing: -0.3px;
}
.pkg-card-price-suffix {
  font-size: 0.76rem;
  color: #94a3b8;
  font-weight: 600;
}
.pkg-card-popular {
  position: absolute;
  top: -1px;
  right: 12px;
  background: linear-gradient(135deg, #ec4899, #f59e0b);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 0 0 8px 8px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(236, 72, 153, 0.3);
}
/* Nhãn "Đang dùng" (emerald) đè nhãn Phổ biến/Dùng thử trên gói hiện tại */
.pkg-card-popular.pkg-card-current {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}
.pkg-card.is-current {
  border-color: #10b981;
}
.pkg-card-sessions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #475569;
  margin-top: auto;
  padding: 2px 0;
  background: none;
  border-radius: 0;
  font-weight: 600;
  width: auto;
}
.pkg-card-sessions + .pkg-card-sessions {
  margin-top: 4px;
}
.pkg-card-sessions i {
  color: #10b981;
  font-size: 0.95rem;
}

/* Summary card */
.pkg-col-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: stretch;
}
.pkg-summary-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pkg-summary-card > .mt-card-head {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  font-weight: 700;
  font-size: 0.92rem;
  color: #0f172a;
}
.pkg-summary-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}
.pkg-summary-body > .pkg-sum-balance {
  margin-top: auto;
}
.pkg-sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 0.86rem;
  color: #64748b;
}
.pkg-sum-row strong {
  color: #0f172a;
  font-weight: 700;
}
.pkg-sum-divider {
  border-top: 1px dashed #e2e8f0;
  padding-top: 12px;
  margin-top: 6px;
}
.pkg-sum-discount {
  color: #10b981 !important;
}
.pkg-sum-total {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb, 99, 102, 241), 0.1),
    rgba(var(--primary-end-rgb, 139, 92, 246), 0.06)
  );
  padding: 14px !important;
  border-radius: 10px;
  margin: 10px 0 !important;
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.18);
}
.pkg-sum-total span {
  font-weight: 700;
  color: #4338ca;
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.5px;
}
.pkg-sum-total strong {
  font-size: 1.4rem;
  font-weight: 800;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.5px;
}
.pkg-sum-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #64748b;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 10px;
}
.pkg-sum-balance strong {
  color: #10b981;
  font-weight: 800;
}
.pkg-purchase-btn {
  width: 100%;
  padding: 13px;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 0.95rem;
  letter-spacing: -0.2px;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb, 99, 102, 241), 0.3);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.pkg-purchase-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(var(--primary-rgb, 99, 102, 241), 0.4);
}
.pkg-purchase-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
/* Balance không đủ — visual amber (different from primary tím) NHƯNG vẫn
   clickable (mở popup Quick Deposit). KHÔNG dùng attribute disabled vì
   browser block click events → handler không fire. */
.pkg-purchase-btn.is-insufficient {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  cursor: pointer;
  opacity: 0.95;
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3);
}
.pkg-purchase-btn.is-insufficient:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.42);
  opacity: 1;
}
/* Nút Nâng cấp — emerald (khác nút Thanh toán tím). Đặt sau .pkg-purchase-btn
   để thắng nền base; .is-insufficient (2 class) vẫn đè amber khi thiếu số dư. */
.pkg-upgrade-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
}
.pkg-upgrade-btn:hover:not(:disabled) {
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.42);
}
.pkg-cancel-btn {
  width: 100%;
  padding: 11px;
  background: #fff;
  color: #b91c1c;
  border: 1.5px solid #fca5a5;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  margin-top: 8px;
  transition: all 0.15s ease;
}
.pkg-cancel-btn:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

/* Promo card */
.pkg-promo-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pkg-promo-card > .mt-card-head {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  font-weight: 700;
  font-size: 0.92rem;
  color: #0f172a;
}
.pkg-promo-body {
  padding: 14px;
  display: flex;
  gap: 8px;
}
.pkg-promo-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 0.88rem;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  transition: border-color 0.15s ease;
}
.pkg-promo-input:focus {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.1);
}
.pkg-promo-btn {
  padding: 10px 16px;
  background: linear-gradient(135deg, #ec4899, var(--primary-end, #8b5cf6));
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.25);
}
.pkg-promo-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(236, 72, 153, 0.35);
}
.pkg-promo-msg {
  padding: 10px 14px;
  margin: 0 14px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
}
.pkg-promo-msg.is-success {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
.pkg-promo-msg.is-error {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

/* ============================================ */
/* TRANSACTIONS (Lịch sử giao dịch) — HOME view */
/* ============================================ */
.hm-view.active[data-view="transactions"] {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse 700px 350px at top left,
      rgba(var(--primary-rgb, 99, 102, 241), 0.05),
      transparent
    ),
    radial-gradient(
      ellipse 600px 300px at bottom right,
      rgba(var(--primary-end-rgb, 139, 92, 246), 0.04),
      transparent
    ),
    #fafafb;
}
/* ===== LỊCH SỬ BIẾN ĐỘNG / GIAO DỊCH (TX-PAGE) RE-DESIGN ===== */
.dep-page .tx-page {
  padding: 0;
  margin-top: 6px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.tx-page {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  box-sizing: border-box;
}

/* Header cụm lịch sử */
.tx-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 2px;
  box-sizing: border-box;
}
.tx-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tx-title-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.12),
    rgba(139, 92, 246, 0.18)
  );
  color: var(--primary-start, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.15);
}
.tx-title-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tx-section-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.3px;
}
.tx-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary-start, #6366f1);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tx-section-desc {
  margin: 0;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.4;
}

/* Header Actions: Switcher + Refresh */
.tx-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tx-view-switcher {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  gap: 2px;
}
.tx-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.18s ease;
  line-height: 1;
  white-space: nowrap;
}
.tx-view-btn i {
  font-size: 0.95rem;
}
.tx-view-btn:hover {
  color: #0f172a;
}
.tx-view-btn.is-active {
  background: #fff;
  color: #4338ca;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.tx-btn-refresh {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #64748b;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tx-btn-refresh:hover {
  border-color: #cbd5e1;
  color: #0f172a;
  background: #f8fafc;
}
.tx-btn-refresh.is-spinning i {
  display: inline-block;
  animation: txSpin 0.75s linear infinite;
}
@keyframes txSpin {
  100% {
    transform: rotate(360deg);
  }
}

/* Card tổng */
.tx-table-card {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 520px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  border: 1px solid #e2e8f0;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-self: stretch;
}
.tx-table-card.is-view-feed {
  flex: 1 1 auto;
  min-height: 540px;
}
.tx-table-card.is-view-table {
  flex: 1 1 auto;
  min-height: 420px;
}

/* Filter Bar */
.tx-filter-bar-wrap {
  width: 100%;
  padding: 12px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  box-sizing: border-box;
  overflow: visible;
  flex-shrink: 0;
}
.tx-filter-bar-wrap::-webkit-scrollbar {
  height: 4px;
}
.tx-filter-bar-wrap::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 4px;
}
.tx-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.tx-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.tx-filter i {
  font-size: 0.95rem;
  color: #94a3b8;
  transition: color 0.18s;
}
.tx-filter:hover {
  border-color: #cbd5e1;
  color: #334155;
  background: #fdfdfd;
}
.tx-filter.is-active {
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28);
}
.tx-filter.is-active i {
  color: #fff;
}

/* VIEW 1: TABLE */
.tx-table-wrap {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: auto;
  overflow-y: auto;
  box-sizing: border-box;
}
.tx-table-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.tx-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 6px;
}
.tx-table {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.86rem;
}
.tx-table thead th {
  background: #f8fafc;
  padding: 11px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.tx-table th.th-balance,
.tx-table th.th-amount {
  text-align: right;
}
.tx-table th.th-status {
  text-align: center;
}
.tx-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #1e293b;
}
.tx-table tbody tr:hover td {
  background: #f8fafc;
}
.tx-table tbody tr:last-child td {
  border-bottom: none;
}

/* Table cells */
.tx-type-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tx-type-ic {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.tx-type-ic.is-deposit {
  background: #ecfdf5;
  color: #10b981;
}
.tx-type-ic.is-buy_package {
  background: #f5f3ff;
  color: #8b5cf6;
}
.tx-type-ic.is-buy_feature {
  background: #eff6ff;
  color: #3b82f6;
}
.tx-type-ic.is-upgrade {
  background: #f0fdf4;
  color: #16a34a;
}
.tx-type-ic.is-adjust {
  background: #fffbeb;
  color: #f59e0b;
}
.tx-type-ic.is-refund {
  background: #ecfeff;
  color: #06b6d4;
}
.tx-type-name {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}
.tx-desc-cell {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #475569;
  font-size: 0.83rem;
}
.tx-time-cell {
  color: #64748b;
  font-size: 0.8rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tx-time-cell i {
  color: #94a3b8;
}
.tx-num-mono {
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
  white-space: nowrap;
}
.tx-before {
  color: #94a3b8;
}
.tx-after {
  color: #0f172a;
  font-weight: 700;
}
.tx-amount-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tx-amount-badge.is-positive {
  background: #ecfdf5;
  color: #059669;
}
.tx-amount-badge.is-negative {
  background: #fef2f2;
  color: #dc2626;
}
.tx-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.tx-status-tag.is-success {
  background: #f0fdf4;
  color: #16a34a;
}

/* VIEW 2: FEED / TIMELINE */
.tx-feed-wrap {
  width: 100%;
  flex: 1 1 auto;
  min-height: 480px;
  max-height: none;
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-sizing: border-box;
}
.tx-feed-wrap::-webkit-scrollbar {
  width: 6px;
}
.tx-feed-wrap::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 6px;
}
.tx-feed-list {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}
.tx-feed-wrap .tx-empty {
  flex: 1 1 auto;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tx-feed-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 14px;
  transition: all 0.2s ease;
  position: relative;
  box-sizing: border-box;
}
.tx-feed-item:hover {
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
  transform: translateY(-1px);
}
.tx-feed-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}
.tx-feed-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.tx-feed-icon.is-deposit {
  background: #ecfdf5;
  color: #10b981;
}
.tx-feed-icon.is-buy_package {
  background: #f5f3ff;
  color: #8b5cf6;
}
.tx-feed-icon.is-buy_feature {
  background: #eff6ff;
  color: #3b82f6;
}
.tx-feed-icon.is-upgrade {
  background: #f0fdf4;
  color: #16a34a;
}
.tx-feed-icon.is-adjust {
  background: #fffbeb;
  color: #f59e0b;
}
.tx-feed-icon.is-refund {
  background: #ecfeff;
  color: #06b6d4;
}

.tx-feed-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tx-feed-headline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tx-feed-title {
  font-size: 0.92rem;
  font-weight: 750;
  color: #0f172a;
}
.tx-feed-time {
  font-size: 0.76rem;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.tx-feed-desc {
  font-size: 0.82rem;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-feed-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.tx-feed-flow-arrow {
  font-size: 0.75rem;
  color: #cbd5e1;
}
.tx-feed-flow .tx-after {
  color: #475569;
  font-weight: 600;
}

.tx-feed-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.tx-feed-amount {
  font-size: 1.1rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.tx-feed-amount.is-positive {
  color: #059669;
}
.tx-feed-amount.is-negative {
  color: #dc2626;
}
.tx-feed-amount .tx-curr {
  font-size: 0.82rem;
  font-weight: 700;
  margin-left: 2px;
}

/* Empty State */
.tx-empty {
  text-align: center;
  padding: 48px 16px !important;
  color: #94a3b8;
}
.tx-empty i {
  font-size: 48px;
  color: #cbd5e1;
  opacity: 0.7;
}
.tx-empty p {
  margin: 10px 0 0;
  font-size: 0.88rem;
  color: #64748b;
  font-weight: 500;
}

/* ===== page-doi-avatar: folder picker ===== */
.fiox-folder-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  padding: 10px 14px;
  color: #6b7280;
  font-size: 14px;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
  cursor: pointer;
  text-align: left;
}
.fiox-folder-pick:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #374151;
}
.fiox-folder-pick > i {
  font-size: 20px;
  color: #9ca3af;
  flex-shrink: 0;
  line-height: 1;
}
.fiox-folder-pick.has-folder {
  background: linear-gradient(135deg, #faf5ff 0%, #fdf4ff 100%);
  border: 1px solid #e9d5ff;
  color: #581c87;
}
.fiox-folder-pick.has-folder:hover {
  background: linear-gradient(135deg, #f3e8ff 0%, #fae8ff 100%);
  border-color: #d8b4fe;
}
.fiox-folder-pick.has-folder > i {
  color: #a855f7;
}
.fiox-folder-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.fiox-folder-badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fiox-folder-badge:empty {
  display: none;
}
.fiox-folder-badge.granted {
  background: #dcfce7;
  color: #15803d;
}
.fiox-folder-badge.granted::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}
.fiox-folder-badge.prompt {
  background: #fef3c7;
  color: #b45309;
}
.fiox-folder-badge.prompt::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

/* ============ Góp ý / Yêu cầu tính năng (data-view="feature-requests") ============ */
/* Đồng bộ HOME bento (nh-*): card bo 22px, viền mảnh, gradient indigo→tím, full-width */
.fr {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 18px 18px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fr *,
.fr *::before,
.fr *::after {
  box-sizing: border-box;
}

/* Bento row: giới thiệu (trái) + form (phải) */
.fr-top {
  display: grid;
  grid-template-columns: 1.45fr minmax(380px, 1fr);
  gap: 18px;
  align-items: stretch;
}

/* Giới thiệu / hero */
.fr-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 22px;
  padding: 26px 30px;
}
.fr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 70% at 100% 0%,
      rgba(var(--primary-end-rgb, 139, 92, 246), 0.12) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 60% at 0% 100%,
      rgba(var(--primary-rgb, 99, 102, 241), 0.08) 0%,
      transparent 60%
    );
}
.fr-hero-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.fr-hero-icon {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 10px 26px rgba(var(--primary-rgb, 99, 102, 241), 0.34);
}
.fr-greet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary-start, #6366f1);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.fr-greet::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-start, #6366f1);
  box-shadow: 0 0 10px rgba(var(--primary-rgb, 99, 102, 241), 0.5);
}
.fr-hero-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.6px;
  margin: 4px 0 0;
  line-height: 1.15;
}
.fr-hero-sub {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}
.fr-steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}
.fr-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.fr-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.1);
  color: var(--primary-start, #6366f1);
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fr-step-t {
  font-size: 0.86rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.3;
}
.fr-step-d {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.4;
}
/* Callout "Mới" + danh sách mẹo trong hero (lấp khoảng trống giữa phụ đề và các bước) */
.fr-hero-note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.07);
  border: 1px solid rgba(var(--primary-rgb, 99, 102, 241), 0.18);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.5;
}
.fr-hero-note > i {
  color: var(--primary-start, #6366f1);
  font-size: 1.05rem;
  margin-top: 1px;
  flex-shrink: 0;
}
.fr-hero-note b {
  color: #0f172a;
  font-weight: 700;
}
.fr-hero-tips {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.fr-hero-tips li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.45;
}
.fr-hero-tips li > i {
  color: #10b981;
  font-size: 0.98rem;
  margin-top: 1px;
  flex-shrink: 0;
}

/* Card chung */
.fr-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 22px;
  padding: 22px 26px;
}
.fr-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.fr-section-label i {
  font-size: 0.95rem;
  color: var(--primary-start, #6366f1);
}
.fr-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.08), transparent);
}

/* Form */
.fr-form-card {
  display: flex;
  flex-direction: column;
}
.fr-form-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.fr-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fr-field-content {
  flex: 1;
}
.fr-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 7px;
}
.fr-req {
  color: #ef4444;
}
.fr-input-wrap {
  position: relative;
}
.fr-input-wrap > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1rem;
  pointer-events: none;
}
.fr-input-wrap .fr-input {
  padding-left: 36px;
}
.fr-input {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 0.9rem;
  color: #0f172a;
  outline: none;
  background: #f8fafc;
  font-family: inherit;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.fr-input::placeholder {
  color: #94a3b8;
}
.fr-input:focus {
  border-color: var(--primary-start, #6366f1);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.12);
}
.fr-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
  flex: 1;
}
.fr-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  border: none;
  cursor: pointer;
  padding: 11px 22px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  background: var(
    --primary-gradient,
    linear-gradient(135deg, #6366f1, #8b5cf6)
  );
  box-shadow: 0 4px 14px rgba(var(--primary-rgb, 99, 102, 241), 0.35);
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    filter 0.18s;
}
.fr-btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(var(--primary-rgb, 99, 102, 241), 0.45);
  filter: brightness(1.04);
}
.fr-btn-submit:active {
  transform: translateY(0);
}
.fr-btn-submit:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.fr-hint {
  font-size: 0.74rem;
  color: #94a3b8;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.45;
}
.fr-hint i {
  margin-top: 1px;
  flex-shrink: 0;
}

/* Ảnh minh hoạ: nút tải + đếm + lưới preview (đang soạn) + lưới ảnh trong danh sách */
.fr-optional {
  font-weight: 400;
  color: #94a3b8;
  font-size: 0.78em;
}
.fr-img-count {
  font-weight: 600;
  color: var(--primary-end, #8b5cf6);
  font-size: 0.78em;
}
.fr-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  cursor: pointer;
  text-align: center;
  margin-top: 2px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #64748b;
  padding: 16px 14px;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}
.fr-dropzone:hover {
  border-color: var(--primary-start, #6366f1);
  background: #f5f3ff;
  color: #6366f1;
}
.fr-dropzone > i {
  font-size: 1.55rem;
  color: #94a3b8;
  transition: color 0.15s;
}
.fr-dropzone:hover > i {
  color: #6366f1;
}
.fr-dropzone .fr-dz-main {
  font-size: 0.85rem;
  font-weight: 600;
}
.fr-dropzone .fr-dz-sub {
  font-size: 0.72rem;
  color: #94a3b8;
}
.fr-dropzone:disabled {
  opacity: 0.55;
  cursor: default;
}
.fr-dropzone.loading > i {
  animation: fr-spin 0.9s linear infinite;
  color: #6366f1;
}
.fr-img-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.fr-img-grid:empty {
  margin-top: 0;
}
.fr-img-item {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.fr-img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fr-img-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fr-img-del:hover {
  background: #ef4444;
}
.fr-item-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 2px;
}
.fr-item-imgs img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  display: block;
  transition:
    transform 0.12s,
    border-color 0.12s;
}
.fr-item-imgs a:hover img {
  transform: scale(1.05);
  border-color: #a5b4fc;
}

/* Toolbar: tabs (segmented) + refresh */
.fr-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.fr-tabs {
  display: inline-flex;
  gap: 4px;
  background: #eef0f4;
  padding: 4px;
  border-radius: 12px;
}
.fr-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  padding: 8px 16px;
  border-radius: 9px;
  background: transparent;
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.fr-tab:hover {
  color: #334155;
}
.fr-tab.active {
  background: #fff;
  color: #4f46e5;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.fr-refresh {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  width: 38px;
  height: 38px;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition:
    background 0.15s,
    color 0.15s;
}
.fr-refresh:hover {
  background: #f1f5f9;
  color: #4f46e5;
}

/* List grid full-width */
.fr-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.fr-item {
  position: relative;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 18px;
  padding: 16px 18px;
  transition:
    transform 0.18s,
    box-shadow 0.18s,
    border-color 0.18s;
}
.fr-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -16px rgba(15, 23, 42, 0.3);
  border-color: rgba(var(--primary-rgb, 99, 102, 241), 0.25);
}
.fr-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.fr-who {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.fr-who i {
  color: #94a3b8;
  flex-shrink: 0;
}
.fr-you {
  font-size: 0.66rem;
  font-weight: 600;
  color: #4f46e5;
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.1);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.fr-content {
  font-size: 0.9rem;
  color: #1e293b;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
}
.fr-meta {
  font-size: 0.74rem;
  color: #94a3b8;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fr-note {
  margin-top: 10px;
  font-size: 0.78rem;
  color: #475569;
  background: #f8fafc;
  border-left: 3px solid #c7d2fe;
  border-radius: 8px;
  padding: 8px 11px;
  line-height: 1.5;
}
.fr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
}

/* Empty / loading — chiếm trọn chiều ngang grid */
.fr-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
  padding: 46px 0;
  background: #fff;
  border: 1px dashed rgba(15, 23, 42, 0.1);
  border-radius: 18px;
}
.fr-empty i {
  font-size: 1.9rem;
  color: #cbd5e1;
}
.fr-spin {
  animation: fr-spin 0.9s linear infinite;
}
@keyframes fr-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Pager */
.fr-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.fr-page-btn {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 10px;
  width: 36px;
  height: 36px;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition:
    background 0.15s,
    color 0.15s;
}
.fr-page-btn:hover:not(:disabled) {
  background: #f1f5f9;
  color: #4f46e5;
}
.fr-page-btn:disabled {
  color: #cbd5e1;
  cursor: default;
}
.fr-page-info {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
}

/* Responsive */
@media (max-width: 992px) {
  .fr-top {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .fr {
    padding: 14px 12px 24px;
  }
  .fr-hero {
    padding: 20px;
  }
  .fr-hero-icon {
    width: 50px;
    height: 50px;
    font-size: 1.35rem;
  }
  .fr-hero-title {
    font-size: 1.2rem;
  }
  .fr-list {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================
   POPUP ĐIỀU KHOẢN & CHÍNH SÁCH (màn đăng ký)
   =================================================================== */
.fx-terms-pop .swal2-html-container {
  margin: 0 !important;
}
.fx-terms {
  text-align: left;
  max-height: 64vh;
  overflow-y: auto;
  padding: 2px 6px 2px 2px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #334155;
}
.fx-terms-intro {
  margin: 0 0 12px;
  color: #475569;
}
.fx-terms details {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.fx-terms details[open] {
  border-color: #c4b5fd;
}
.fx-terms summary {
  cursor: pointer;
  padding: 11px 14px;
  font-weight: 700;
  color: #6d28d9;
  background: #faf9ff;
  list-style: none;
  user-select: none;
  font-size: 14px;
}
.fx-terms summary::-webkit-details-marker {
  display: none;
}
.fx-terms summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
  color: #a78bfa;
}
.fx-terms details[open] summary::before {
  transform: rotate(90deg);
}
.fx-terms details > b {
  display: block;
  margin: 12px 14px 2px;
  color: #1e293b;
  font-size: 13.5px;
}
.fx-terms details > p {
  margin: 2px 14px;
}
.fx-terms details > p:last-child {
  margin-bottom: 12px;
}
.fx-terms .fx-legal {
  color: #94a3b8;
  font-size: 12px;
  font-style: italic;
  margin-top: 4px;
}
.fx-terms-tablewrap {
  overflow-x: auto;
  margin: 4px 14px 12px;
}
.fx-terms-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  min-width: 520px;
}
.fx-terms-table th,
.fx-terms-table td {
  border: 1px solid #e2e8f0;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
.fx-terms-table th {
  background: #f4f2ff;
  color: #6d28d9;
  font-weight: 700;
}
.fx-terms-foot {
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  margin: 12px 0 2px;
}

/* ===================================================================
   POPUP ĐĂNG NHẬP (loginDialog) — header gradient tím 3 lớp sóng
   =================================================================== */
.lgn {
  text-align: left;
}
.lgn-hd {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--primary-start, #6366f1),
    var(--primary-end, #8b5cf6) 55%,
    #a855f7
  );
  padding: 22px 24px 40px;
  color: #fff;
  overflow: hidden;
}
.lgn-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
}
.lgn-w1 {
  height: 48px;
}
.lgn-w2 {
  height: 45px;
}
.lgn-w3 {
  height: 42px;
}
.lgn-hd-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lgn-logo {
  height: 34px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
}
.lgn-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.lgn-body {
  padding: 16px 24px 4px;
}
.lgn-ta {
  width: 100%;
  border: 1.5px solid #e6e8ee;
  border-radius: 13px;
  padding: 12px 14px;
  font-size: 13px;
  font-family: inherit;
  resize: none;
  outline: none;
  background: #fbfbfe;
  color: #1f2733;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.lgn-ta:focus {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb, 99, 102, 241), 0.14);
  background: #fff;
}
.lgn-ta::placeholder {
  color: #aab0be;
}
.lgn-seg {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.lgn-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border: 1.5px solid #e6e8ee;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
  background: #fff;
  transition: all 0.15s;
}
.lgn-opt i {
  font-size: 16px;
}
.lgn-opt input {
  display: none;
}
.lgn-opt:has(input:checked) {
  border-color: var(--primary-start, #6366f1);
  background: #f3f2ff;
  color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.1);
}
.lgn-opt-fb:has(input:checked) {
  border-color: #1877f2;
  background: #eaf2ff;
  color: #1877f2;
  box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.1);
}

/* Swal overrides cho popup đăng nhập (specificity cao đè CSS Swal chung) */
.swal2-popup.lgn-pop {
  padding: 0 !important;
  border: none !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}
.swal2-popup.lgn-pop .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
}
/* chip Facebook/Hotmail — huỷ justify space-between của label Swal chung */
.swal2-popup.lgn-pop .lgn-opt {
  display: flex !important;
  justify-content: center !important;
}
.swal2-popup.lgn-pop .swal2-actions {
  margin: 14px 24px 22px !important;
  padding: 0 !important;
  gap: 10px;
  width: auto;
  display: flex;
}
.swal2-popup.lgn-pop .swal2-styled {
  margin: 0 !important;
  flex: 1;
  padding: 12px 16px !important;
  border-radius: 13px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.swal2-popup.lgn-pop .swal2-confirm {
  flex: 1.3;
  background: linear-gradient(
    135deg,
    var(--primary-start, #6366f1),
    var(--primary-end, #8b5cf6) 55%,
    #a855f7
  ) !important;
  box-shadow: 0 12px 26px -8px rgba(124, 58, 237, 0.5) !important;
}
.swal2-popup.lgn-pop .swal2-deny {
  order: -1;
  background: #f2f1fb !important;
  color: #6d5bd0 !important;
}

/* ===== Ô chọn quốc gia (feature Hạn chế quốc gia) — select2 multiple gọn/đẹp ===== */
.select2-container--default .select2-selection--multiple {
  border: 1.5px solid #e6e8ee !important;
  border-radius: 12px !important;
  min-height: 42px;
  padding: 2px 6px 6px !important;
  background: #fbfbfe;
}
.select2-container--default.select2-container--focus
  .select2-selection--multiple,
.select2-container--default.select2-container--open
  .select2-selection--multiple {
  border-color: var(--primary-end, #8b5cf6) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-end-rgb, 139, 92, 246), 0.14);
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background: #eef2ff !important;
  border: 1px solid #e0e3ff !important;
  border-radius: 999px !important;
  color: #4f46e5 !important;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 25px 3px 11px !important;
  margin: 4px 0 0 5px !important;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__display {
  padding: 0 !important;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  left: auto !important;
  right: 0 !important;
  border: none !important;
  border-left: 1px solid #e0e3ff !important;
  border-radius: 0 999px 999px 0 !important;
  color: var(--primary-end, #8b5cf6) !important;
  padding: 0 7px !important;
  height: 100%;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:hover {
  background: #f5f3ff !important;
  color: #ef4444 !important;
}
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--primary-start, #6366f1) !important;
}

/* ===== Dark mode cho view HOME redesign: Góp ý (.fr-*), Mua gói (.pkg-*), nút Quản trị ===== */
[data-bs-theme="dark"] .fr-hero,
[data-bs-theme="dark"] .fr-card,
[data-bs-theme="dark"] .fr-item,
[data-bs-theme="dark"] .pkg-card,
[data-bs-theme="dark"] .pkg-explain {
  background: #1b2433;
  border-color: #262c37;
}
[data-bs-theme="dark"] .fr-hero-title,
[data-bs-theme="dark"] .fr-step-t,
[data-bs-theme="dark"] .fr-section-label,
[data-bs-theme="dark"] .pkg-explain-head,
[data-bs-theme="dark"] .pkg-explain-step b {
  color: #e7ebf2;
}
[data-bs-theme="dark"] .fr-input,
[data-bs-theme="dark"] .fr-textarea {
  background: #0f131a;
  border-color: #262c37;
  color: #e7ebf2;
}
[data-bs-theme="dark"] .fr-input:focus {
  background: #1b2433;
}
[data-bs-theme="dark"] .fr-tabs {
  background: #12161d;
}
[data-bs-theme="dark"] .fr-tab.active {
  background: #262c37;
  color: #a5b4fc;
}
[data-bs-theme="dark"] .pkg-explain-step {
  background: #232d3d;
}
[data-bs-theme="dark"] .pkg-card-price-row {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.16);
}
[data-bs-theme="dark"] .nh-admin-btn {
  background: #262c37;
  color: #e7ebf2;
}
[data-bs-theme="dark"] .pkg-explain-lead,
[data-bs-theme="dark"] .pkg-explain-notes li,
[data-bs-theme="dark"] .pkg-explain-step small {
  color: #cbd5e1;
}
[data-bs-theme="dark"] .pkg-explain-notes li b {
  color: #e7ebf2;
}
[data-bs-theme="dark"] .fr-who {
  color: #e7ebf2;
}
[data-bs-theme="dark"] .fr-content {
  color: #cbd5e1;
}
[data-bs-theme="dark"] .fr-hero-note {
  background: rgba(99, 102, 241, 0.13);
  border-color: rgba(99, 102, 241, 0.3);
  color: #cbd5e1;
}
[data-bs-theme="dark"] .fr-hero-note b {
  color: #e7ebf2;
}
[data-bs-theme="dark"] .fr-hero-tips li {
  color: #cbd5e1;
}
[data-bs-theme="dark"] .fr-label {
  color: #94a3b8;
}
[data-bs-theme="dark"] .fr-refresh {
  background: #262c37;
  border-color: #262c37;
  color: #cbd5e1;
}
[data-bs-theme="dark"] .fr-refresh:hover {
  background: #313846;
  color: #a5b4fc;
}
[data-bs-theme="dark"] .fr-optional {
  color: #64748b;
}
[data-bs-theme="dark"] .fr-dropzone {
  background: #1a1f29;
  border-color: #3b4557;
  color: #94a3b8;
}
[data-bs-theme="dark"] .fr-dropzone:hover {
  background: #1e2536;
  border-color: #6366f1;
  color: #a5b4fc;
}
[data-bs-theme="dark"] .fr-dropzone .fr-dz-sub {
  color: #64748b;
}
[data-bs-theme="dark"] .fr-img-item,
[data-bs-theme="dark"] .fr-item-imgs img {
  border-color: #313846;
}

/* ==== C1-C5 views: referral / ctv / auto-monitor ==== */
.cx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.cx-stat {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cx-stat-ic {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #fff;
}
.cx-stat-val {
  font-size: 21px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
}
.cx-stat-lbl {
  font-size: 12.5px;
  color: #64748b;
  font-weight: 600;
}
.cx-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(100, 116, 139, 0.15);
  color: inherit;
}
.cx-status.is-live,
.cx-status.is-active,
.cx-status.is-completed {
  background: #dcfce7;
  color: #15803d;
}
.cx-status.is-die,
.cx-status.is-closed,
.cx-status.is-banned {
  background: #fee2e2;
  color: #dc2626;
}
.cx-status.is-pending,
.cx-status.is-error,
.cx-status.is-unknown {
  background: #fef3c7;
  color: #b45309;
}
.mon-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}
.mon-toolbar .sec-field {
  margin: 0;
  min-width: 130px;
  flex: 1 1 130px;
}
.cx-icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 7px;
  border-radius: 6px;
  color: #64748b;
  line-height: 1;
}
.cx-icon-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.cx-icon-btn.is-danger:hover {
  background: #fee2e2;
  color: #dc2626;
}
[data-bs-theme="dark"] .cx-stat {
  background: #1a1f28;
  border-color: #262c37;
}
[data-bs-theme="dark"] .cx-stat-val {
  color: #f1f5f9;
}
[data-bs-theme="dark"] .cx-stat-lbl {
  color: #94a3b8;
}
[data-bs-theme="dark"] .cx-icon-btn {
  color: #94a3b8;
}
[data-bs-theme="dark"] .cx-icon-btn:hover {
  background: #262c37;
  color: #f1f5f9;
}

/* =============================================================================
   BẢO MẬT BM — Quy tắc giám sát (panel + form + nhật ký + an toàn)
   Popup SweetAlert2 (customClass bmp-pop). Tông giống Ads: icon nền NHẠT + chữ màu,
   nhưng nút/công tắc/nhấn giữ TÍM (#8b5cf6). Dark: [data-bs-theme="dark"].
   ============================================================================= */
.swal2-popup.bmp-pop {
  overflow: visible !important;
  border-radius: 16px !important;
  padding: 0 !important;
  width: 640px !important;
}
.swal2-popup.bmp-pop-wide {
  width: 700px !important;
}
.swal2-popup.bmp-pop .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.swal2-popup.bmp-pop .swal2-close {
  position: absolute !important;
  top: -13px !important;
  right: -13px !important;
  width: 30px;
  height: 30px;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
  color: #666 !important;
  font-size: 21px !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.bmp-w {
  text-align: left;
  font-family: inherit;
}
.bmp-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px 13px;
  border-bottom: 1px solid #f1f5f9;
}
.bmp-hd-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #f5f3ff;
  color: #8b5cf6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.bmp-hd-t {
  flex: 1;
  min-width: 0;
}
.bmp-hd-ti {
  font-size: 15px;
  font-weight: 800;
  color: #111827;
  line-height: 1.15;
}
.bmp-hd-sub {
  font-size: 11.5px;
  color: #6b7280;
  margin-top: 3px;
}
.bmp-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 13px;
  border: none;
  border-radius: 9px;
  background: #8b5cf6;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}
.bmp-cta:hover {
  background: #7c3aed;
}
.bmp-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 20px 0;
  border-bottom: 1px solid #f1f5f9;
}
.bmp-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border: none;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
}
.bmp-tab i {
  font-size: 15px;
}
.bmp-tab:hover {
  color: #7c3aed;
}
.bmp-tab.on {
  color: #8b5cf6;
  border-bottom-color: #8b5cf6;
}
.bmp-bd {
  padding: 14px 20px;
  max-height: 60vh;
  overflow-y: auto;
}
.bmp-empty {
  padding: 22px 16px;
  text-align: center;
  color: #94a3b8;
  border: 1.5px dashed #e5e7eb;
  border-radius: 12px;
}
.bmp-empty i {
  font-size: 30px;
  opacity: 0.5;
  display: block;
  margin-bottom: 8px;
}
.bmp-empty p {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 500;
}
.bmp-starter {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1.5px solid #e5e7eb;
  border-radius: 11px;
  cursor: pointer;
  margin-bottom: 8px;
  background: #fff;
  transition: all 0.15s;
}
.bmp-starter:hover {
  border-color: #c4b5fd;
  background: #faf5ff;
}
.bmp-starter-ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #f5f3ff;
  color: #8b5cf6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.bmp-starter-tx {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.bmp-starter-ti {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
}
.bmp-starter-de {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}
.bmp-rule {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 9px;
  background: #fff;
}
.bmp-rule.off {
  opacity: 0.62;
}
.bmp-rule-main {
  flex: 1;
  min-width: 0;
}
.bmp-rule-name {
  font-size: 13px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bmp-rule-name .bmp-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #64748b;
  text-transform: none;
}
.bmp-rule-name .bmp-pill.auto {
  background: #fee2e2;
  color: #dc2626;
}
.bmp-rule-sent {
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  line-height: 1.55;
}
.bmp-lead {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #9ca3af;
}
.bmp-tok {
  background: #f1f5f9;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  padding: 1px 7px;
  font-weight: 600;
  color: #374151;
}
.bmp-tok.act {
  background: #ede9fe;
  border-color: #ddd6fe;
  color: #6d28d9;
}
.bmp-tok.act.red {
  background: #fee2e2;
  border-color: #fecaca;
  color: #dc2626;
}
.bmp-arrow {
  color: #c4b5fd;
}
.bmp-rule-r {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.bmp-gic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.15s;
}
.bmp-gic:hover {
  border-color: #c4b5fd;
  color: #7c3aed;
}
.bmp-gic.del:hover {
  border-color: #fca5a5;
  color: #dc2626;
}
.bmp-sw {
  width: 42px;
  height: 24px;
  border-radius: 24px;
  background: #cbd5e1;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  transition: 0.2s;
}
.bmp-sw::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.bmp-sw.on {
  background: #8b5cf6;
}
.bmp-sw.on::before {
  transform: translateX(18px);
}
.bmp-flabel {
  font-size: 11px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 14px 0 7px;
}
.bmp-flabel:first-child {
  margin-top: 2px;
}
.bmp-flabel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bmp-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13.5px;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  color: #1f2937;
}
.bmp-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.bmp-ivsel {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  background: #fff;
  color: #1f2937;
}
.bmp-opts {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.bmp-opts.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.bmp-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.bmp-opt:hover {
  border-color: #c4b5fd;
}
.bmp-opt.on {
  border-color: #a78bfa;
  background: #faf5ff;
}
.bmp-opt.on.red {
  border-color: #fca5a5;
  background: #fef2f2;
}
.bmp-ck {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #d1d5db;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
}
.bmp-opt.on .bmp-ck {
  background: #8b5cf6;
  border-color: #8b5cf6;
}
.bmp-opt.on.red .bmp-ck {
  background: #dc2626;
  border-color: #dc2626;
}
.bmp-opt-tx {
  flex: 1;
  min-width: 0;
}
.bmp-opt-ti {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}
.bmp-opt-de {
  font-size: 11px;
  color: #6b7280;
  margin-top: 1px;
}
.bmp-search {
  width: 100%;
  padding: 8px 11px;
  border: 1.5px solid #e5e7eb;
  border-radius: 9px;
  font-size: 12.5px;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 7px;
  font-family: inherit;
}
.bmp-alltoggle {
  font-size: 11.5px;
  font-weight: 700;
  color: #8b5cf6;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.bmp-alltoggle:hover {
  text-decoration: underline;
}
.bmp-warn {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  padding: 9px 11px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 9px;
  font-size: 11px;
  color: #b91c1c;
  line-height: 1.45;
}
.bmp-warn i {
  font-size: 14px;
  color: #ef4444;
  flex-shrink: 0;
  margin-top: 1px;
}
.bmp-hint {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 7px;
  line-height: 1.5;
}
.bmp-hint i {
  color: #f59e0b;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.bmp-hint b {
  color: #b45309;
  font-weight: 700;
}
.bmp-foot {
  display: flex;
  gap: 9px;
  padding: 12px 20px 16px;
}
.bmp-btn {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #374151;
  transition: all 0.15s;
}
.bmp-btn.pri {
  background: #8b5cf6;
  color: #fff;
  border: none;
}
.bmp-btn:hover {
  filter: brightness(1.02);
}
.bmp-btn.pri:hover {
  background: #7c3aed;
  filter: none;
}
.bmp-bd.bmp-2col {
  display: flex;
  gap: 16px;
  align-items: stretch;
  overflow: visible;
  max-height: none;
}
.bmp-col-l {
  flex: 1.35;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.bmp-col-r {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.bmp-preview {
  margin-top: auto;
  padding: 11px 13px;
  background: #f8f7ff;
  border: 1px solid #eee9fe;
  border-radius: 11px;
  font-size: 12px;
  color: #4b5563;
  line-height: 1.6;
}
.bmp-preview i {
  color: #8b5cf6;
  margin-right: 5px;
}
.bmp-preview b {
  color: #1f2937;
  font-weight: 700;
}
.bmp-preview.warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.bmp-preview.warn i {
  color: #f59e0b;
}
.bmp-bmlist {
  max-height: 30vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #eef0f4;
  border-radius: 10px;
  padding: 8px;
}
.bmp-bmlist.tall {
  flex: 1;
  max-height: 380px;
  min-height: 150px;
}
.bmp-bmi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1.5px solid #eef0f4;
  border-radius: 10px;
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.bmp-bmi:hover {
  border-color: #ddd6fe;
  background: #faf9ff;
}
.bmp-bmi.on {
  border-color: #a78bfa;
  background: #f5f3ff;
}
.bmp-bmi-av {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #ede9fe;
  color: #7c3aed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.bmp-bmi.on .bmp-bmi-av {
  background: #8b5cf6;
  color: #fff;
}
.bmp-bmi.on .bmp-ck {
  background: #8b5cf6;
  border-color: #8b5cf6;
}
.bmp-bmi-tx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.bmp-bmi-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bmp-bmi-id {
  font-size: 10.5px;
  color: #9ca3af;
  font-family: ui-monospace, Menlo, monospace;
}
.bmp-bmempty {
  padding: 18px;
  text-align: center;
  color: #9ca3af;
  font-size: 12px;
}
.bmh-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  align-items: center;
}
.bmh-fchip {
  padding: 4px 10px;
  border: 1.5px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
}
.bmh-fchip.on {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: #fff;
}
.bmh-item {
  display: flex;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #eef0f4;
  border-radius: 9px;
  margin-bottom: 6px;
  background: #fff;
}
.bmh-ic {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.bmh-ic.t-new {
  background: #fee2e2;
  color: #dc2626;
}
.bmh-ic.t-removed {
  background: #fef3c7;
  color: #b45309;
}
.bmh-ic.t-role_changed {
  background: #e0e7ff;
  color: #4338ca;
}
.bmh-ic.t-invited {
  background: #cffafe;
  color: #0e7490;
}
.bmh-main {
  flex: 1;
  min-width: 0;
}
.bmh-line1 {
  font-size: 12.5px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.35;
}
.bmh-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 5px;
  margin-left: 6px;
  background: #dcfce7;
  color: #15803d;
}
.bmh-rule {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 5px;
  margin-left: 6px;
  background: #ede9fe;
  color: #6d28d9;
}
.bmh-line2 {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bmh-line2 .bmh-id {
  font-family: ui-monospace, Menlo, monospace;
}
.bmh-time {
  font-size: 10.5px;
  color: #b0b6c0;
  white-space: nowrap;
  flex-shrink: 0;
}
.bmh-empty {
  padding: 36px 16px;
  text-align: center;
  color: #9ca3af;
}
.bmh-empty i {
  font-size: 30px;
  opacity: 0.4;
  display: block;
  margin-bottom: 8px;
}
.bmh-empty p {
  margin: 0;
  font-size: 12.5px;
}
.bms-safe-card {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 16px;
  background: #fff;
  border: 1px solid #e8eaf1;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 8px 20px -12px rgba(16, 24, 40, 0.12);
  margin-bottom: 11px;
}
.bms-safe-ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.bms-safe-ic.green {
  background: #dcfce7;
  color: #16a34a;
}
.bms-safe-ic.amber {
  background: #fef3c7;
  color: #b45309;
}
.bms-safe-ic.red {
  background: #fee2e2;
  color: #dc2626;
}
.bms-safe-tx {
  flex: 1;
  min-width: 0;
}
.bms-safe-t {
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
}
.bms-safe-d {
  font-size: 11.5px;
  color: #6b7280;
  margin-top: 3px;
  line-height: 1.5;
}
.bms-safe-btn {
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
}
.bms-safe-btn:hover {
  border-color: #c4b5fd;
  color: #7c3aed;
}
.bms-safe-btn.danger:hover {
  border-color: #fca5a5;
  color: #dc2626;
}
.bms-safe-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 6px;
  flex-shrink: 0;
}
.bms-safe-badge.on {
  background: #dcfce7;
  color: #15803d;
}
.bms-safe-badge.off {
  background: #f1f5f9;
  color: #64748b;
}
.bmp-sl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  margin: 2px 2px 10px;
}
.bmp-flabel2 {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9ca3af;
  margin: 12px 0 8px;
}
.bmp-chlist {
  border: 1px solid #e8eaf1;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
}
.bmp-chrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  cursor: pointer;
  user-select: none;
}
.bmp-chrow + .bmp-chrow {
  border-top: 1px solid #f1f3f7;
}
.bmp-chrow:hover {
  background: #faf9ff;
}
.bmp-chrow-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.bmp-chrow-ic.telegram {
  background: #e0f2fe;
  color: #229ed9;
}
.bmp-chrow-ic.zalo {
  background: #dbeafe;
  color: #2563eb;
}
.bmp-chrow-ic.chrome {
  background: #f5f3ff;
  color: #7c3aed;
}
.bmp-chrow-ic.sound {
  background: #fef3c7;
  color: #d97706;
}
.bmp-chrow-t {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #374151;
}
.bmp-chrow-warn {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #b45309;
  background: #fef3c7;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
}
.bmp-sw2 {
  width: 40px;
  height: 22px;
  border-radius: 22px;
  background: #cbd5e1;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
  cursor: pointer;
}
.bmp-sw2::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.bmp-sw2.on {
  background: #8b5cf6;
}
.bmp-sw2.on::before {
  transform: translateX(18px);
}
.bmp-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: #8b5cf6;
  color: #fff;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.bmp-link-btn:hover {
  background: #7c3aed;
}
.bmp-bd::-webkit-scrollbar,
.bmp-bmlist::-webkit-scrollbar {
  width: 6px;
}
.bmp-bd::-webkit-scrollbar-thumb,
.bmp-bmlist::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
@media (max-width: 600px) {
  .bmp-bd.bmp-2col {
    flex-direction: column;
  }
  .bmp-bmlist.tall {
    max-height: 300px;
  }
  .bmp-preview {
    margin-top: 12px;
  }
}
/* Bảo mật BM — DARK */
[data-bs-theme="dark"] .swal2-popup.bmp-pop {
  background: #1b1e26 !important;
}
[data-bs-theme="dark"] .swal2-popup.bmp-pop .swal2-close {
  background: #262b34 !important;
  color: #cbd5e1 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}
[data-bs-theme="dark"] .bmp-hd,
[data-bs-theme="dark"] .bmp-tabs {
  border-bottom-color: #2a2f3a;
}
[data-bs-theme="dark"] .bmp-hd-sub,
[data-bs-theme="dark"] .bmp-tab {
  color: #9aa3b4;
}
[data-bs-theme="dark"] .bmp-hd-ic,
[data-bs-theme="dark"] .bmp-starter-ic,
[data-bs-theme="dark"] .bmp-bmi-av {
  background: #2e2740;
  color: #b794f6;
}
[data-bs-theme="dark"] .bmp-tab.on,
[data-bs-theme="dark"] .bmp-tab:hover,
[data-bs-theme="dark"] .bmp-alltoggle {
  color: #b794f6;
}
[data-bs-theme="dark"] .bmp-tab.on {
  border-bottom-color: #b794f6;
}
[data-bs-theme="dark"] .bmp-rule,
[data-bs-theme="dark"] .bmp-starter,
[data-bs-theme="dark"] .bms-safe-card,
[data-bs-theme="dark"] .bmp-opt,
[data-bs-theme="dark"] .bmp-bmi,
[data-bs-theme="dark"] .bmh-item {
  background: #23272f;
  border-color: #2f3540;
}
[data-bs-theme="dark"] .bmp-rule-name,
[data-bs-theme="dark"] .bmp-starter-ti,
[data-bs-theme="dark"] .bms-safe-t,
[data-bs-theme="dark"] .bmp-opt-ti,
[data-bs-theme="dark"] .bmp-bmi-name,
[data-bs-theme="dark"] .bmh-line1,
[data-bs-theme="dark"] .bmp-chrow-t,
[data-bs-theme="dark"] .bmp-hd-ti {
  color: #e7eaf0;
}
[data-bs-theme="dark"] .bmp-rule-sent,
[data-bs-theme="dark"] .bmp-starter-de,
[data-bs-theme="dark"] .bms-safe-d,
[data-bs-theme="dark"] .bmp-opt-de,
[data-bs-theme="dark"] .bmp-empty p {
  color: #9aa3b4;
}
[data-bs-theme="dark"] .bmp-tok {
  background: #2a2f3a;
  border-color: #3a4150;
  color: #cbd5e1;
}
[data-bs-theme="dark"] .bmp-pill,
[data-bs-theme="dark"] .bms-safe-badge.off {
  background: #2a2f3a;
  color: #9aa3b4;
}
[data-bs-theme="dark"] .bmp-gic,
[data-bs-theme="dark"] .bmp-btn,
[data-bs-theme="dark"] .bms-safe-btn,
[data-bs-theme="dark"] .bmh-fchip {
  background: #262b34;
  border-color: #333944;
  color: #cbd5e1;
}
[data-bs-theme="dark"] .bmp-empty,
[data-bs-theme="dark"] .bmp-bmlist {
  background: #1b1e26;
  border-color: #2a2f3a;
}
[data-bs-theme="dark"] .bmp-sw,
[data-bs-theme="dark"] .bmp-sw2 {
  background: #3a4150;
}
[data-bs-theme="dark"] .bmp-flabel {
  color: #9aa3b4;
}
[data-bs-theme="dark"] .bmp-input,
[data-bs-theme="dark"] .bmp-ivsel,
[data-bs-theme="dark"] .bmp-search {
  background: #262b34;
  border-color: #333944;
  color: #e7eaf0;
}
[data-bs-theme="dark"] .bmp-opt.on {
  background: #2a2338;
  border-color: #6d28d9;
}
[data-bs-theme="dark"] .bmp-opt.on.red {
  background: #331a1f;
  border-color: #b91c1c;
}
[data-bs-theme="dark"] .bmp-ck {
  background: #262b34;
  border-color: #4a5160;
}
[data-bs-theme="dark"] .bmp-bmi:hover {
  background: #262b34;
  border-color: #4a4066;
}
[data-bs-theme="dark"] .bmp-bmi.on {
  background: #2a2338;
  border-color: #7c5cd6;
}
[data-bs-theme="dark"] .bmp-bmi-id,
[data-bs-theme="dark"] .bmh-line2,
[data-bs-theme="dark"] .bmp-bmempty {
  color: #6b7486;
}
[data-bs-theme="dark"] .bmp-preview {
  background: #221f30;
  border-color: #3a2f5a;
  color: #c3cad6;
}
[data-bs-theme="dark"] .bmp-preview b {
  color: #e7eaf0;
}
[data-bs-theme="dark"] .bmp-preview.warn {
  background: #332a12;
  border-color: #5a4a1a;
  color: #fbbf24;
}
[data-bs-theme="dark"] .bmp-hint {
  color: #8b93a3;
}
[data-bs-theme="dark"] .bmh-time {
  color: #5b6472;
}
[data-bs-theme="dark"] .bmp-chlist {
  background: #12161d;
  border-color: #2a313c;
}
[data-bs-theme="dark"] .bmp-chrow + .bmp-chrow {
  border-color: #232a34;
}
[data-bs-theme="dark"] .bmp-chrow:hover {
  background: #1b212b;
}
[data-bs-theme="dark"] .bmp-chrow-t {
  color: #cbd5e1;
}
[data-bs-theme="dark"] .bmp-link-btn {
  background: #2a2338;
  border-color: #6d28d9;
  color: #b794f6;
}
[data-bs-theme="dark"] .bms-safe-card {
  background: #171c24;
  border-color: #262c36;
  box-shadow: none;
}

/* ===== Chia sẻ cho khách — panel đại lý (ads-share.js), prefix .ashr-* ===== */
.ashr-panel {
  position: absolute;
  inset: 0;
  z-index: 15;
  background: #f6f7f9;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 13px;
  color: #111827;
  text-align: left;
}
.ashr-hd {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 16px;
  background: #fff;
  border-bottom: 1px solid #ececf1;
  flex-shrink: 0;
}
.ashr-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.ashr-back i {
  font-size: 16px;
}
.ashr-back:hover {
  background: #bae6fd;
}
.ashr-hd-ic {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ccfbf1;
  color: #0d9488;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.ashr-hd-t {
  flex: 1;
  min-width: 0;
}
.ashr-hd-ti {
  font-size: 15px;
  font-weight: 700;
}
.ashr-hd-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 1px;
}
.ashr-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 15px;
  border: none;
  border-radius: 9px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.28);
}
.ashr-new:hover {
  filter: brightness(1.05);
}
.ashr-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}
.ashr-load {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px;
  color: #6366f1;
  font-size: 13.5px;
}
.ashr-spin {
  display: inline-block;
  animation: ashrspin 1s linear infinite;
}
@keyframes ashrspin {
  to {
    transform: rotate(360deg);
  }
}
.ashr-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  padding: 56px 22px;
  color: #6b7280;
  line-height: 1.6;
}
.ashr-empty i {
  font-size: 40px;
  color: #c7d2fe;
}
.ashr-empty b {
  color: #374151;
}
.ashr-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.ashr-card {
  background: #fff;
  border: 1px solid #e8eaf1;
  border-radius: 14px;
  padding: 13px 15px;
  display: flex;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.ashr-card.off {
  opacity: 0.6;
}
.ashr-c-main {
  flex: 1;
  min-width: 0;
}
.ashr-c-label {
  font-weight: 750;
  font-size: 13.5px;
  margin-bottom: 3px;
}
.ashr-tag.off {
  font-size: 10px;
  font-weight: 700;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 4px;
}
.ashr-c-acc {
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.ashr-c-perms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.ashr-perm {
  font-size: 10.5px;
  font-weight: 650;
  color: #4338ca;
  background: #eef2ff;
  border-radius: 5px;
  padding: 2px 7px;
}
.ashr-c-meta {
  font-size: 11px;
  color: #9ca3af;
}
.ashr-c-acts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.ashr-a {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f8f9fb;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  text-decoration: none;
}
.ashr-a:hover {
  color: #4338ca;
  border-color: #c7d2fe;
}
.ashr-a.revoke:hover {
  color: #dc2626;
  border-color: #fecaca;
  background: #fef2f2;
}

/* Modal tạo liên kết */
.ashr-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  backdrop-filter: blur(3px);
}
.ashr-m-in {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ashr-m-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 18px;
  font-size: 15px;
  font-weight: 750;
  color: #0f766e;
  background: #f0fdfa;
  border-bottom: 1px solid #e6faf5;
}
.ashr-m-hd i {
  font-size: 19px;
}
.ashr-m-x {
  margin-left: auto;
  border: none;
  background: transparent;
  font-size: 16px;
  color: #9ca3af;
  cursor: pointer;
}
.ashr-m-bd {
  padding: 16px 18px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.ashr-f {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ashr-f > span {
  font-size: 12.5px;
  font-weight: 650;
  color: #374151;
}
.ashr-row {
  display: flex;
  gap: 12px;
}
.ashr-row .ashr-f {
  flex: 1;
  min-width: 0;
}
.ashr-modal .select2-container {
  width: 100% !important;
}
.ashr-modal .select2-container--default .select2-selection--single {
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  background: #fff;
}
.ashr-modal
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 36px;
  padding-left: 11px;
  color: #111827;
}
.ashr-modal
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 36px;
}
[data-bs-theme="dark"]
  .ashr-modal
  .select2-container--default
  .select2-selection--single {
  background: #12161d;
  border-color: #333b47;
}
[data-bs-theme="dark"]
  .ashr-modal
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #e5e7eb;
}
[data-bs-theme="dark"] .ashr-modal .select2-dropdown {
  background: #171c24;
  border-color: #2a313c;
}
[data-bs-theme="dark"] .ashr-modal .select2-search__field {
  background: #12161d;
  color: #e5e7eb;
  border-color: #333b47;
}
.ashr-in {
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  padding: 9px 11px;
  font-size: 13px;
  color: #111827;
  background: #fff;
  outline: none;
  width: 100%;
}
.ashr-in:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}
.ashr-radio {
  display: flex;
  gap: 16px;
}
.ashr-radio label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  cursor: pointer;
}
.ashr-camps {
  margin-top: 8px;
  max-height: 150px;
  overflow: auto;
  border: 1px solid #eef0f4;
  border-radius: 9px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ashr-cam {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  cursor: pointer;
}
.ashr-cam-empty {
  font-size: 12px;
  color: #9ca3af;
}
.ashr-perms-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ashr-pk {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid #eef0f4;
  border-radius: 9px;
  background: #f8f9fb;
}
.ashr-note {
  display: flex;
  gap: 7px;
  font-size: 12px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 9px;
  padding: 9px 11px;
  line-height: 1.5;
}
.ashr-note i {
  flex-shrink: 0;
  margin-top: 1px;
}
.ashr-m-ft {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid #f0f1f4;
}
.ashr-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.ashr-btn.ghost {
  background: #f3f4f6;
  color: #374151;
}
.ashr-btn.ghost:hover {
  background: #e5e7eb;
}
.ashr-btn.primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}
.ashr-btn.primary:hover {
  filter: brightness(1.05);
}
.ashr-btn:disabled {
  opacity: 0.65;
  cursor: default;
}
.ashr-done {
  text-align: center;
  padding: 12px 6px;
}
.ashr-done > i {
  font-size: 42px;
  color: #16a34a;
}
.ashr-done b {
  display: block;
  font-size: 16px;
  margin: 8px 0 4px;
}
.ashr-done-sub {
  font-size: 12.5px;
  color: #6b7280;
  margin-bottom: 14px;
}
.ashr-link {
  display: flex;
  gap: 8px;
}
.ashr-link .ashr-in {
  font-size: 12px;
  color: #4338ca;
}

[data-bs-theme="dark"] .ashr-panel {
  background: #0f1319;
  color: #e5e7eb;
}
[data-bs-theme="dark"] .ashr-hd {
  background: #171c24;
  border-color: #262c36;
}
[data-bs-theme="dark"] .ashr-hd-ti {
  color: #f3f4f6;
}
[data-bs-theme="dark"] .ashr-hd-ic {
  background: #0e3a34;
  color: #5eead4;
}
[data-bs-theme="dark"] .ashr-back {
  background: #0e3a52;
  color: #7dd3fc;
}
[data-bs-theme="dark"] .ashr-card {
  background: #171c24;
  border-color: #262c36;
}
[data-bs-theme="dark"] .ashr-c-label {
  color: #f3f4f6;
}
[data-bs-theme="dark"] .ashr-perm {
  background: #1e2140;
  color: #a5b4fc;
}
[data-bs-theme="dark"] .ashr-a {
  background: #12161d;
  border-color: #333b47;
  color: #9ca3af;
}
[data-bs-theme="dark"] .ashr-a:hover {
  color: #a5b4fc;
}
[data-bs-theme="dark"] .ashr-empty b {
  color: #cbd5e1;
}
[data-bs-theme="dark"] .ashr-m-in {
  background: #171c24;
}
[data-bs-theme="dark"] .ashr-m-hd {
  background: #0e2a26;
  color: #5eead4;
  border-color: #14433c;
}
[data-bs-theme="dark"] .ashr-m-bd .ashr-f > span {
  color: #cbd5e1;
}
[data-bs-theme="dark"] .ashr-in {
  background: #12161d;
  border-color: #333b47;
  color: #e5e7eb;
}
[data-bs-theme="dark"] .ashr-pk,
[data-bs-theme="dark"] .ashr-camps {
  background: #12161d;
  border-color: #2a313c;
}
[data-bs-theme="dark"] .ashr-note {
  background: #2a1c0e;
  border-color: #4a3413;
  color: #fdba74;
}
[data-bs-theme="dark"] .ashr-m-ft {
  border-color: #262c36;
}
[data-bs-theme="dark"] .ashr-btn.ghost {
  background: #232a34;
  color: #cbd5e1;
}
[data-bs-theme="dark"] .ashr-done-sub {
  color: #9aa3b2;
}

/* Ẩn ký hiệu tiền tệ mờ ở các cột số tiền (số dư/ngưỡng/limit/spend) — toggle #toggleCurSuffixBtn */
body.hide-cur-suffix .tkqc-cur {
  display: none !important;
}
#toggleCurSuffixBtn.active {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}
/* Nút đổi định dạng số VN/Âu ↔ Anh-Mỹ (#toggleNumFmtBtn) — active = đang kiểu Anh-Mỹ. Tím đồng nhất với nút "Ẩn tiền tệ" */
#toggleNumFmtBtn.active {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}

/* Footer BM: span #statusWrapperN cuối cùng đang HIỂN THỊ vẫn giữ me-2 pe-2 (border-end đã gỡ ở bm.js) → dư khoảng phải.
   Selector tự áp cho span cuối còn hiện (không có statusWrapper nào KHÔNG d-none đứng sau) → khỏi hardcode #statusWrapper4. */
.d-flex.align-items-center.border
  > span[id^="statusWrapper"]:not(.d-none):not(
    :has(~ span[id^="statusWrapper"]:not(.d-none))
  ) {
  margin-right: 0 !important;
  padding-right: 0 !important;
  border-right: 0 !important;
}

/* ============================================
   FXA START CONFIRM POPUP (Xác nhận chạy tính năng)
   ============================================ */
.swal2-popup.fxa-confirm-popup {
  padding: 18px 20px 20px !important;
  border-radius: 16px !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.swal2-popup.fxa-confirm-popup .swal2-icon {
  display: none !important;
}
.swal2-popup.fxa-confirm-popup .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  text-align: initial !important;
}
.fxa-wrap {
  width: 100%;
}
.fxa-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 10px;
}
.fxa-hd-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}
.fxa-hd-t {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.fxa-hd-ti {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}
.fxa-hd-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.3;
}
.fxa-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 7px;
  background: #f5f3ff;
  color: #7c3aed;
  font-weight: 700;
  font-size: 11.5px;
  white-space: nowrap;
}
.fxa-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 6px;
  font-size: 12px;
  color: #64748b;
}
.fxa-toolbar-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #64748b;
}
.fxa-toolbar-hint i.ri-information-line {
  color: #6366f1;
  font-size: 13px;
}
.fxa-btn-clear-all {
  background: transparent;
  border: none;
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 600;
  color: #ef4444;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.fxa-btn-clear-all:hover {
  background: #fee2e2;
}
.fxa-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  padding: 2px 4px 2px 2px;
  margin: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.fxa-flow::-webkit-scrollbar {
  width: 5px;
}
.fxa-flow::-webkit-scrollbar-track {
  background: transparent;
}
.fxa-flow::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
/* Specificity cao hơn [data-feature]{display:none} (rule ẩn card feature ở 1 số trang)
   để bước trong popup KHÔNG bị ẩn oan. Kèm user-select:none chống bôi đen chữ khi kéo. */
.fxa-flow .fxa-step {
  display: flex;
}
.fxa-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px 8px 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  position: relative;
  /* KHÔNG transition transform — để SortableJS tự điều khiển animation kéo (tránh giật). */
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
.fxa-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  align-self: stretch;
  color: #94a3b8;
  cursor: grab;
  flex-shrink: 0;
  border-radius: 6px;
  font-size: 16px;
  transition:
    color 0.15s,
    background 0.15s;
}
.fxa-drag:hover {
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
}
.fxa-drag:active {
  cursor: grabbing;
}
/* Ghost = vị trí sẽ thả (nét đứt, ẩn nội dung). Clone kéo (.sortable-fallback ở body
   khi forceFallback) = card nổi có bóng — GIỮ nền theo theme, chỉ thêm viền + bóng. */
.fxa-step.fxa-ghost {
  opacity: 1;
  background: rgba(139, 92, 246, 0.08);
  border: 1px dashed #a78bfa;
}
.fxa-step.fxa-ghost > * {
  visibility: hidden;
}
.fxa-step.fxa-chosen {
  border-color: #c4b5fd;
}
.fxa-step.fxa-dragging,
.sortable-fallback.fxa-step {
  display: flex;
  border-color: #8b5cf6 !important;
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.28) !important;
}
.fxa-step:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.fxa-step-idx {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  font-weight: 800;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}
.fxa-step-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.fxa-step-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.fxa-step-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fxa-step-key {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #64748b;
  line-height: 1.2;
  margin-top: 1px;
}
.fxa-btn-remove {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  padding: 0;
}
.fxa-btn-remove:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fecaca;
  transform: scale(1.08);
}
.fxa-btn-remove:active {
  transform: scale(0.95);
}
.fxa-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px;
  text-align: center;
}
.fxa-empty-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 8px;
}
.fxa-empty-t {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 3px;
}
.fxa-empty-sub {
  font-size: 12px;
  color: #94a3b8;
}
.fxa-confirm-actions {
  margin-top: 14px !important;
  gap: 10px;
}
.fxa-confirm-actions .swal2-styled {
  margin: 0 !important;
  padding: 8px 22px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

/* ============================================
   CAMP BUDGET EDIT POPUP (Sửa ngân sách chiến dịch / nhóm QC)
   ============================================ */
.swal2-popup.camp-budget-popup {
  padding: 18px 22px 22px !important;
  border-radius: 16px !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.16),
    0 4px 12px rgba(0, 0, 0, 0.08) !important;
  max-width: 95vw !important;
}
.swal2-popup.camp-budget-popup .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  text-align: initial !important;
}
.cbp-wrap {
  width: 100%;
}
/* Header */
.cbp-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 14px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 14px;
}
.cbp-hd-ic {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.cbp-hd-t {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.cbp-hd-ti {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}
.cbp-hd-sub {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.3;
}
/* Info Card */
.cbp-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.cbp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.cbp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
}
.cbp-badge.campaign {
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}
.cbp-badge.adset {
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
}
.cbp-id {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #94a3b8;
}
.cbp-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}
.cbp-cur-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  font-size: 12px;
}
.cbp-cur-lbl {
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cbp-cur-val {
  font-weight: 700;
  color: #0f172a;
}
/* Form Input */
.cbp-form-group {
  margin-bottom: 8px;
}
.cbp-form-lbl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.cbp-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  margin: 0;
}
.cbp-lbl-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  background: #f1f5f9;
  border-radius: 5px;
  color: #64748b;
}
.cbp-input-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 0 12px;
  height: 48px;
  gap: 8px;
  transition: all 0.18s ease;
}
.cbp-input-box:focus-within {
  border-color: var(--primary-start, #6366f1);
  box-shadow: 0 0 0 3.5px rgba(99, 102, 241, 0.16);
}
.cbp-input-icon {
  font-size: 20px;
  color: #94a3b8;
  display: flex;
  align-items: center;
}
.cbp-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  outline: none;
  padding: 0;
}
.cbp-input::placeholder {
  color: #cbd5e1;
  font-weight: 500;
  font-size: 15px;
}
.cbp-input-suffix {
  font-size: 12.5px;
  font-weight: 700;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
}
/* Live Preview Bar */
.cbp-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 6px 4px 0;
  font-size: 12px;
}
.cbp-preview-left {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cbp-prev-lbl {
  color: #64748b;
}
.cbp-prev-num {
  font-weight: 700;
  color: #0f172a;
}
.cbp-diff {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
}
.cbp-diff.same {
  background: #f1f5f9;
  color: #64748b;
}
.cbp-diff.up {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.cbp-diff.down {
  background: rgba(245, 158, 11, 0.14);
  color: #d97706;
}
.cbp-diff.invalid {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
/* Quick Presets Row */
.cbp-presets-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}
.cbp-presets-lbl {
  display: block;
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 7px;
}
.cbp-presets {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.cbp-chip {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.cbp-chip:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  transform: translateY(-1px);
}
.cbp-chip:active {
  transform: translateY(0);
}
.cbp-chip[data-pct^="+"],
.cbp-chip[data-pct="100"] {
  color: #059669;
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.04);
}
.cbp-chip[data-pct^="+"]:hover,
.cbp-chip[data-pct="100"]:hover {
  background: rgba(16, 185, 129, 0.12);
}
.cbp-chip[data-pct^="-"] {
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.04);
}
.cbp-chip[data-pct^="-"]:hover {
  background: rgba(245, 158, 11, 0.12);
}
.cbp-chip.reset {
  color: #64748b;
  padding: 4px 8px;
}
/* Swal Actions */
.cbp-actions {
  margin-top: 18px !important;
  gap: 10px;
}
.cbp-actions .swal2-styled {
  margin: 0 !important;
  padding: 9px 22px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}