/* 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;
}
#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: 23px;
height: 40px;
background: #fff;
right: 349px;
top: 50%;
margin-top: -20px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
font-size: 30px;
line-height: 40px;
text-align: left;
cursor: pointer;
z-index: 99;
}
.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);
}
.fiox-zoom-ctrl {
display: flex;
align-items: stretch;
align-self: center;
height: 26px;
margin-left: 12px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 7px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
flex-shrink: 0;
}
.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: 24.5px;
width: 32px;
margin-left: 8px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 7px;
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: 24.5px;
width: 32px;
margin-left: 8px;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 7px;
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;
}
/* Nút Camp: gạch chéo xám khi chưa active (panel campaign chưa mở) */
#btnCamp:not(.active) {
position: relative;
overflow: visible;
}
#btnCamp:not(.active)::after {
content: "";
position: absolute;
top: 50%;
left: 6%;
right: 6%;
height: 1.5px;
background: #94a3b8;
transform: translateY(-50%) rotate(14deg);
transform-origin: center;
pointer-events: none;
border-radius: 2px;
opacity: 0.85;
}
/* 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;
}
@container tkqctoolbar (max-width: 900px) {
/* Tải lại + Lịch (Toàn thời gian): collapse text → icon only */
.tkqc-toolbar .btn-collapse .btn-label { display: none; }
.tkqc-toolbar .btn-collapse .btn-icon { margin-right: 0 !important; }
/* Các nút khác: ẩn hẳn (user prefer hide over collapse). */
.tkqc-toolbar .btn-hide-on-shrink { 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,');
bottom: 0;
right: -5px;
top: inherit;
}
.cat-item.active:before,
.tool-item.active:before {
background: url('data:image/svg+xml,');
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 {
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: ....
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 {
flex: 0 0 220px;
background: #ffffff;
border-right: 1px solid rgba(15, 23, 42, 0.06);
padding: 18px 12px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 2px;
}
/* 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-danger { flex-shrink: 0; }
/* 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; }
.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ẻ 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 (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 — mỗi item 1 màu */
}
.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);
}
/* ================================================================
Sidebar header: user card ở đầu sidebar
================================================================ */
.hm-side-header {
position: relative;
padding-bottom: 12px;
margin-bottom: 8px;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
/* Aurora glow phía sau card — radial gradient mờ, tạo lighting effect */
.hm-side-header::before {
content: "";
position: absolute;
inset: -10px -6px 6px -6px;
background: radial-gradient(
ellipse 80% 70% at 25% 40%,
rgba(var(--primary-rgb, 99, 102, 241), 0.18) 0%,
rgba(168, 85, 247, 0.10) 40%,
transparent 75%
);
filter: blur(14px);
z-index: 0;
pointer-events: none;
opacity: 0.85;
}
/* 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;
z-index: 1;
display: flex;
align-items: center;
gap: 11px;
padding: 12px 14px;
border-radius: 15px;
overflow: hidden;
isolation: isolate;
background:
repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.05) 0 1.5px, transparent 1.5px 9px),
radial-gradient(140% 120% at 0% 0%, rgba(255, 255, 255, 0.16), transparent 45%),
linear-gradient(135deg, var(--primary-start, #6366f1) 0%, var(--primary-end, #8b5cf6) 55%, #a855f7 100%);
box-shadow:
0 8px 20px -6px rgba(var(--primary-rgb, 99, 102, 241), 0.5),
0 2px 6px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}
/* Vệt sáng holographic + highlight góc */
.hm-side-user::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
mix-blend-mode: screen;
background:
radial-gradient(120% 80% at 88% -12%, rgba(255, 255, 255, 0.3), transparent 55%),
linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.18) 50%, transparent 58%);
background-size: 100% 100%, 250% 100%;
background-repeat: no-repeat;
animation: hmSideSheen 6.5s ease-in-out infinite;
}
@keyframes hmSideSheen {
0%, 100% { background-position: 0 0, -70% 0; }
50% { background-position: 0 0, 170% 0; }
}
/* Chip EMV vàng góc phải-trên */
.hm-side-user::after {
content: "";
position: absolute;
top: 10px;
right: 12px;
width: 23px;
height: 16px;
border-radius: 4px;
z-index: 2;
background:
linear-gradient(rgba(146, 64, 14, 0.5), rgba(146, 64, 14, 0.5)) center/68% 1px no-repeat,
linear-gradient(rgba(146, 64, 14, 0.5), rgba(146, 64, 14, 0.5)) 50% 33%/46% 1px no-repeat,
linear-gradient(rgba(146, 64, 14, 0.5), rgba(146, 64, 14, 0.5)) 50% 67%/46% 1px no-repeat,
linear-gradient(135deg, #fef3c7, #fbbf24 42%, #d97706 100%);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.42),
inset 0 -2px 3px rgba(146, 64, 14, 0.45),
0 1px 2px rgba(0, 0, 0, 0.35);
}
/* Avatar = huy hiệu kính viền vàng mảnh */
.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.45);
background: linear-gradient(140deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.55),
inset 0 -2px 4px rgba(0, 0, 0, 0.3),
0 2px 5px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.14),
0 0 0 2px rgba(252, 211, 77, 0.35);
}
/* 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 #7c5cf5, 0 0 6px rgba(16, 185, 129, 0.7);
}
.hm-side-dot::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
border: 1.5px solid rgba(16, 185, 129, 0.6);
animation: hmSidePulse 2s ease-out infinite;
}
@keyframes hmSidePulse {
0% { transform: scale(0.6); opacity: 0.9; }
100% { transform: scale(1.6); opacity: 0; }
}
.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: #fff;
text-transform: capitalize;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.hm-side-name::before {
content: "MEMBER";
display: block;
font-size: 7.5px;
font-weight: 800;
letter-spacing: 1.4px;
color: #fcd34d;
opacity: 0.88;
margin-bottom: 1px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
/* Số dư = số thẻ mono, xanh phát sáng */
.hm-side-bal {
display: flex;
align-items: center;
gap: 6px;
margin-top: 5px;
font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 1px;
color: #6ee7b7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 0 10px rgba(16, 185, 129, 0.45), 0 1px 1px rgba(0, 0, 0, 0.45);
}
.hm-side-bal i {
font-size: 15px;
flex-shrink: 0;
color: #34d399;
text-shadow: 0 0 4px rgba(16, 185, 129, 0.55);
}
/* 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-top: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 9px 12px;
border-radius: 11px;
background:
repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.05) 0 1.5px, transparent 1.5px 9px),
radial-gradient(140% 120% at 0% 0%, rgba(255, 255, 255, 0.16), transparent 45%),
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 6px 16px -4px rgba(var(--primary-rgb, 99, 102, 241), 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.22),
inset 0 -1px 0 rgba(0, 0, 0, 0.2);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
filter 0.2s ease;
overflow: hidden;
}
/* Vệt holographic tự chạy — đồng bộ phong cách thẻ user bên trên */
.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.26), transparent 55%),
linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.18) 50%, transparent 58%);
background-size: 100% 100%, 250% 100%;
background-repeat: no-repeat;
animation: hmSideSheen 6.5s ease-in-out infinite;
}
.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 — ẩn sidebar */
@media (max-width: 640px) {
.hm-sidebar {
display: none;
}
}
/* ===================================================================
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 (đọ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;
}
/* ===== 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%);
}
/* 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,");
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; }
.dep-title { display: flex; align-items: center; gap: 10px; font-size: 1.45rem; font-weight: 800; color: #0f172a; margin: 0; }
.dep-title i { font-size: 1.55rem; color: #10b981; }
.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; }
@media (max-width: 1100px) { .dep-grid { grid-template-columns: 1fr; } }
.dep-card { display: flex; flex-direction: column; min-height: 380px; }
.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);
}
/* 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);
}
.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;
}
.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;
}
.tx-page {
width: 100%;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px;
box-sizing: border-box;
overflow: hidden;
}
.tx-header { display: flex; flex-direction: column; gap: 4px; padding: 2px 4px; flex-shrink: 0; }
.tx-title {
display: flex; align-items: center; gap: 10px;
font-size: 1.55rem; font-weight: 800;
color: #0f172a; margin: 0;
letter-spacing: -0.3px;
}
.tx-title i {
font-size: 1.65rem;
background: var(--primary-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.tx-subtitle { font-size: 0.88rem; color: #64748b; margin: 0; line-height: 1.55; }
.tx-filter-bar {
display: flex;
gap: 8px;
flex-wrap: wrap;
flex-shrink: 0;
padding: 2px 4px;
}
.tx-filter {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 999px;
cursor: pointer;
font-size: 0.82rem;
font-weight: 600;
color: #475569;
transition: all 0.18s ease;
white-space: nowrap;
}
.tx-filter i { font-size: 0.95rem; }
.tx-filter:hover {
border-color: #a5b4fc;
color: #4338ca;
transform: translateY(-1px);
}
.tx-filter.is-active {
background: var(--primary-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
color: #fff;
border-color: var(--primary-start, #6366f1);
box-shadow: 0 4px 14px rgba(var(--primary-rgb, 99, 102, 241), 0.32);
}
.tx-table-card {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tx-table-card > .mt-card-head {
flex-shrink: 0;
padding: 12px 16px;
border-bottom: 1px solid #f1f5f9;
font-weight: 700;
font-size: 0.92rem;
color: #0f172a;
}
.tx-table-wrap {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
}
.tx-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.tx-table thead {
position: sticky;
top: 0;
z-index: 2;
}
.tx-table thead th {
text-align: left;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #64748b;
padding: 11px 16px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
white-space: nowrap;
}
.tx-table tbody td {
padding: 12px 16px;
border-bottom: 1px solid #f1f5f9;
color: #0f172a;
vertical-align: middle;
}
.tx-table tbody tr:hover td { background: #f8fafc; }
.tx-table tbody tr:last-child td { border-bottom: none; }
.tx-type-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
white-space: nowrap;
}
.tx-type-pill i { font-size: 0.86rem; }
.tx-type-pill.is-deposit { background: #dcfce7; color: #15803d; }
.tx-type-pill.is-buy_package { background: #ede9fe; color: #6d28d9; }
.tx-type-pill.is-buy_feature { background: #e0e7ff; color: #4338ca; }
.tx-type-pill.is-adjust { background: #fef3c7; color: #b45309; }
.tx-type-pill.is-refund { background: #cffafe; color: #0e7490; }
.tx-amount { font-weight: 800; font-variant-numeric: tabular-nums; }
.tx-amount.is-positive { color: #10b981; }
.tx-amount.is-negative { color: #ef4444; }
.tx-balance-before { color: #94a3b8; font-variant-numeric: tabular-nums; }
.tx-balance-after { color: var(--primary-start, #6366f1); font-weight: 700; font-variant-numeric: tabular-nums; }
.tx-desc {
color: #64748b;
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.tx-time { color: #64748b; font-size: 0.82rem; white-space: nowrap; }
.tx-time i { color: #cbd5e1; margin-right: 4px; }
.tx-empty {
text-align: center;
padding: 56px 16px !important;
color: #94a3b8;
}
.tx-empty i { font-size: 56px; color: #cbd5e1; opacity: 0.65; }
.tx-empty p { margin: 12px 0 0; font-size: 0.9rem; color: #64748b; }
/* ===== 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; }
/* 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 .15s, box-shadow .15s, background .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 .18s, box-shadow .18s, filter .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: .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; }
/* 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 .15s, color .15s, box-shadow .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 .15s, color .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 .18s, box-shadow .18s, border-color .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 .15s, color .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-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; }
/* ==== 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; }