* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f3f4f6; color: #111827; }
.hidden { display: none !important; }
/* ---- Login ---- */
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.85); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.login-card { background: #fff; padding: 32px; border-radius: 12px; width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.login-card h2 { margin: 0 0 8px; }
.login-card p { color: #6b7280; margin: 0 0 16px; font-size: 14px; }
.login-card input { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; margin-bottom: 12px; font-family: monospace; }
.login-card button { width: 100%; padding: 10px; border: none; border-radius: 8px; background: #2563eb; color: white; font-weight: 600; cursor: pointer; }
.login-card button:hover { background: #1d4ed8; }
#login-error { color: #dc2626; margin-top: 8px; font-size: 13px; min-height: 18px; }
/* ---- Top bar ---- */
.topbar {
display: flex; align-items: stretch;
padding: 0 20px; background: #fff;
border-bottom: 1px solid #e5e7eb;
height: 52px; position: sticky; top: 0; z-index: 50;
box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.brand {
font-weight: 800; font-size: 16px;
margin-right: 24px; color: #1e3a8a;
letter-spacing: -.015em;
display: flex; align-items: center;
}
.tabs {
display: flex; gap: 0; flex: 1;
align-items: stretch;
}
.tab {
background: transparent; border: none;
padding: 0 14px;
font-size: 13px; color: #64748b;
cursor: pointer;
font-weight: 600; letter-spacing: -.005em;
border-radius: 0;
position: relative;
display: inline-flex; align-items: center; gap: 6px;
transition: color .15s, background .15s;
/* underline indicator */
border-bottom: 2px solid transparent;
margin-bottom: -1px; /* overlap parent border */
/* 2026-06-15: tab giờ là — bỏ underline mặc định + giữ cursor pointer */
text-decoration: none;
}
.tab:hover, .tab:focus, .tab:visited, .tab:active { text-decoration: none; }
.tab .tab-ico {
font-size: 14px; line-height: 1;
display: inline-block;
transition: transform .2s;
filter: grayscale(.4);
}
.tab:hover {
color: #1e3a8a;
background: linear-gradient(180deg, transparent 0%, #f8fafc 100%);
}
.tab:hover .tab-ico {
filter: grayscale(0);
transform: scale(1.08);
}
.tab.active {
color: #1e3a8a;
font-weight: 800;
border-bottom-color: #1e3a8a;
background: linear-gradient(180deg, transparent 0%, #eff6ff 100%);
}
.tab.active .tab-ico {
filter: grayscale(0);
transform: scale(1.05);
}
/* Compact responsive: bỏ label khi quá hẹp, chỉ giữ icon */
@media (max-width: 1100px) {
.tab { padding: 0 10px; }
.tab .tab-lbl { font-size: 12px; }
}
@media (max-width: 900px) {
.tab .tab-lbl { display: none; }
.tab { padding: 0 10px; }
.tab .tab-ico { font-size: 18px; }
}
/* Brand subtitle "by Tona Toàn" — nhẹ, ý nhị, không nổi */
.brand-sub {
font-weight: 400;
font-size: 10px;
color: #94a3b8;
letter-spacing: .02em;
margin-left: 6px;
opacity: .8;
font-style: italic;
}
/* Status pill — minimal, không viền không nền */
.status-pill {
font-size: 11px; color: #64748b;
padding: 2px 4px;
background: transparent; border: none; border-radius: 0;
cursor: pointer; user-select: none;
display: inline-flex; align-items: center;
transition: color .15s;
}
.status-pill:hover { background: transparent; color: #1e3a8a; }
.status-pill .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.status-pill .dot.ok { background: #22c55e; }
.status-pill .dot.run { background: #eab308; animation: pulse 1.2s infinite; }
.status-pill .dot.err { background: #ef4444; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* ---- Main ---- */
/* padding-bottom đủ dài để row cuối: (1) shadow hover không bị cắt, (2) native title
tooltip trên rank/price hiển thị được dưới element mà không bị viewport che,
(3) scroll-padding cho keyboard nav. */
main { padding: 10px 12px 96px; }
@media (min-height: 800px) { main { padding-bottom: 120px; } }
/* ===== V3 Persistent Tab DOM ===== */
/* Mỗi tab có 1 .tab-root div riêng trong #main. Chỉ tab .active hiển thị.
Tab inactive: display:none → 0 layout cost + content-visibility:auto cho browser hint. */
#main .tab-root {
display: none;
contain: layout style;
}
#main .tab-root.active {
display: block;
}
#main .tab-root:not(.active) {
/* Browser skip render off-screen tabs entirely → free CPU + memory */
content-visibility: auto;
contain-intrinsic-size: 0 1000px;
}
/* ===== V3 View Transitions ===== */
/* Smooth fade khi đổi tab (Chrome 111+, FF 121+, Safari 18+). Browser unsupported = no-op. */
::view-transition-old(root) {
animation: tab-fade-out 100ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
::view-transition-new(root) {
animation: tab-fade-in 140ms cubic-bezier(0, 0, 0.2, 1) forwards;
}
@keyframes tab-fade-out { to { opacity: 0; transform: translateY(-2px); } }
@keyframes tab-fade-in { from { opacity: 0; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* ---- Toolbar ---- */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; background: #fff; padding: 8px 12px; border-radius: 8px; border: 1px solid #e5e7eb; }
.toolbar input, .toolbar select { padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 12px; }
.preset-btn {
padding: 4px 10px; font-size: 11px; border: 1px solid #d1d5db; background: #fff;
color: #475569; border-radius: 6px; cursor: pointer; font-weight: 500;
}
.preset-btn:hover { background: #f3f4f6; border-color: #94a3b8; color: #1e293b; }
.preset-btn.active { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
/* ===== Rank slider (compact, inline với toolbar) ===== */
.rank-slider-inline {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px;
background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 14px;
font-size: 11px;
flex-shrink: 0;
}
.rs-edge-label {
font-size: 13px; line-height: 1;
user-select: none; cursor: help;
}
.rs-edge-hot { filter: hue-rotate(-10deg); }
.rs-edge-all { font-size: 16px; color: #16a34a; font-weight: 700; }
.rs-slider-wrap {
position: relative; width: 180px;
display: inline-flex; align-items: center;
vertical-align: middle;
}
.rank-slider {
width: 100%; height: 6px; cursor: pointer; margin: 0;
-webkit-appearance: none; appearance: none;
background: linear-gradient(to right, #ef4444 0%, #f59e0b 25%, #3b82f6 60%, #16a34a 100%);
border-radius: 3px; outline: none;
}
.rank-slider::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px; border-radius: 50%;
background: #1e3a8a; border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
cursor: grab; transition: transform .12s;
}
.rank-slider:hover::-webkit-slider-thumb,
.rank-slider:focus::-webkit-slider-thumb { transform: scale(1.18); }
.rank-slider::-webkit-slider-thumb:active { transform: scale(1.25); cursor: grabbing; }
.rank-slider::-moz-range-thumb {
width: 16px; height: 16px; border-radius: 50%;
background: #1e3a8a; border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.25);
cursor: grab;
}
/* Tick marks via background pseudo */
.rs-slider-wrap::before {
content: ''; position: absolute; left: 8px; right: 8px; top: 50%;
height: 1px; pointer-events: none;
background-image: radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1.5px);
background-size: 10% 100%; background-repeat: repeat-x;
background-position: 0 center;
transform: translateY(-1px);
}
/* Floating tooltip showing current label */
.rs-thumb-tooltip {
position: absolute; bottom: 20px;
padding: 2px 7px; border-radius: 4px;
background: #1e3a8a; color: #fff;
font-size: 10px; font-weight: 700; line-height: 1.3;
white-space: nowrap; pointer-events: none;
opacity: 0; transition: opacity .15s;
transform: translateX(-50%);
}
.rs-thumb-tooltip.visible { opacity: 1; }
.rs-thumb-tooltip::after {
content: ''; position: absolute; bottom: -4px; left: 50%;
margin-left: -4px; width: 0; height: 0;
border: 4px solid transparent; border-top-color: #1e3a8a;
border-bottom: 0;
}
.rs-current {
font-size: 11px; color: #64748b; padding-left: 8px;
border-left: 1px solid #e5e7eb; margin-left: 2px;
}
.rs-current strong {
color: #1e3a8a; font-weight: 800; font-size: 12px;
padding: 1px 5px; background: #eff6ff; border-radius: 3px;
margin-left: 3px;
}
.btn-reset {
padding: 3px 9px; font-size: 11px; font-weight: 500;
background: #fff; color: #64748b;
border: 1px solid #cbd5e1; border-radius: 5px;
cursor: pointer; letter-spacing: .01em;
transition: all .12s;
}
.btn-search {
padding: 3px 9px; font-size: 11px; font-weight: 600;
background: #38bdf8; color: #fff;
border: 1px solid #38bdf8; border-radius: 5px;
cursor: pointer; letter-spacing: .01em;
transition: all .12s;
box-shadow: 0 2px 6px rgba(56, 189, 248, 0.22);
}
.btn-search:hover { background: #0ea5e9; border-color: #0ea5e9; }
.btn-search:active { transform: scale(0.96); }
.btn-reset:hover { background: #f8fafc; color: #ef4444; border-color: #fca5a5; }
.btn-reset:active { transform: scale(0.96); }
.toolbar label { font-size: 12px; color: #4b5563; display: flex; align-items: center; gap: 5px; }
.toolbar .count { margin-left: auto; color: #6b7280; font-size: 12px; }
.search-box {
position: relative;
min-width: 220px;
flex: 1 1 260px;
max-width: 340px;
}
.search-box input {
width: 100%;
}
.search-history-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 20;
background: #fff;
border: 1px solid #dbe3f0;
border-radius: 10px;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
overflow: hidden;
}
.search-history-item {
display: flex;
align-items: stretch;
border-top: 1px solid #eef2f7;
}
.search-history-item:first-child {
border-top: 0;
}
.search-history-term,
.search-history-remove {
border: 0;
background: transparent;
font-size: 12px;
cursor: pointer;
}
.search-history-term {
flex: 1;
padding: 9px 12px;
color: #334155;
text-align: left;
}
.search-history-term:hover {
background: #eff6ff;
color: #1d4ed8;
}
.search-history-remove {
width: 36px;
color: #94a3b8;
}
.search-history-remove:hover {
background: #fef2f2;
color: #dc2626;
}
/* ---- Product grid: COMPACT (ưu tiên thấy đủ 2 hàng ~12 áo trên laptop desktop) ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(182px, 1fr)); gap: 8px; align-items: start; }
@media (min-width: 1600px) {
.grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
}
@media (min-width: 2200px) {
.grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1099px) and (min-height: 900px) {
.topbar { padding: 0 12px; }
.brand { margin-right: 14px; font-size: 15px; white-space: nowrap; }
.tabs { gap: 4px; }
.tab { padding: 8px 10px; font-size: 12px; }
.status-pill { padding: 4px 8px; font-size: 11px; }
.grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.card .img-wrap { aspect-ratio: 0.96 / 1; }
}
@media (min-width: 1100px) and (max-width: 1399px) and (min-height: 900px) {
.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.card .img-wrap { aspect-ratio: 1 / 1; }
}
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; transition: box-shadow .15s, transform .15s; cursor: pointer; display: flex; flex-direction: column; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-1px); border-color: #cbd5e1; }
.card.removed { border-color: #fecaca; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.08); }
.card.removed:hover { border-color: #f87171; }
.card .img-wrap {
--card-image-focus-y: 34%;
--card-image-zoom: 1;
--card-image-hover-zoom: 1;
--card-image-shift-y: -2%;
--card-image-hover-shift-y: -2%;
background: #f9fafb;
aspect-ratio: 1.08 / 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.card .img-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center var(--card-image-focus-y);
transform: translateY(var(--card-image-shift-y)) scale(var(--card-image-zoom));
transform-origin: center var(--card-image-focus-y);
transition: transform .3s;
}
.card:hover .img-wrap img {
transform: translateY(var(--card-image-hover-shift-y)) scale(var(--card-image-hover-zoom));
}
/* Magnifier icon — top-right corner, small + professional */
.card .magnifier-hint {
position: absolute; top: 6px; right: 6px;
width: 26px; height: 26px;
background: rgba(255, 255, 255, 0.95);
color: #1e3a8a;
border: 1px solid rgba(30, 58, 138, 0.15);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; line-height: 1;
opacity: 0; transform: translateY(-3px);
transition: opacity .15s, transform .15s, background .15s, color .15s;
pointer-events: none; cursor: pointer;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
backdrop-filter: blur(4px);
}
.card:hover .magnifier-hint {
opacity: 1; transform: translateY(0);
pointer-events: auto;
}
.card .magnifier-hint::before {
/* SVG inline cho icon kính lúp sắc nét hơn emoji */
content: '';
width: 14px; height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-size: contain;
transition: filter .15s;
}
.card .magnifier-hint:hover {
background: #1e3a8a;
color: #fff;
border-color: #1e3a8a;
transform: translateY(0) scale(1.08);
}
.card .magnifier-hint:hover::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Khi card có corner-tags ở top-left, magnifier vẫn ở top-right không đụng */
.card .corner-tags { z-index: 1; }
.card .magnifier-hint { z-index: 2; }
.card .img-wrap .updated-stamp { position: absolute; top: 6px; right: 6px; background: rgba(17,24,39,.78); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 500; }
.card .img-wrap .card-badge-stack { position: absolute; top: 6px; left: 6px; display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.card .img-wrap .corner-tags { position: static; display: flex; flex-direction: column; gap: 3px; }
.bookmark-btn {
width: 18px; height: 18px;
border: 0;
background: transparent;
color: #94a3b8;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
font-size: 16px; line-height: 1;
cursor: pointer;
/* 2026-06-16: chỉ transition transform (hover scale), KHÔNG transition color
→ đổi sao ★ ↔ ☆ flip màu TỨC THÌ, không có 150ms fade gây cảm giác trễ. */
transition: transform .12s;
}
.bookmark-btn:hover {
color: #ea580c;
transform: scale(1.06);
}
.bookmark-btn.saved {
color: #f59e0b;
}
/* Modal star — dùng cùng class .bookmark-btn với card nhưng inline cạnh actions buttons */
.bookmark-btn.modal-star {
position: static;
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
font-size: 22px; line-height: 1;
border: 1.5px solid #cbd5e1; background: #fff;
border-radius: 8px; cursor: pointer;
color: #94a3b8;
vertical-align: middle;
transition: all .15s;
}
.bookmark-btn.modal-star:hover {
background: #fef3c7; color: #f59e0b; border-color: #fbbf24;
transform: scale(1.05);
}
.bookmark-btn.modal-star.saved {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #f59e0b; border-color: #f59e0b;
}
.bookmark-btn.modal-star.saved:hover {
background: linear-gradient(135deg, #fde68a, #fbbf24);
}
.card-body { padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 5px; }
.card-title { font-size: 11px; font-weight: 600; color: #111827; line-height: 1.2; max-height: 1.2em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.card-title.removed,
.card.removed .card-title { color: #ef4444; text-decoration: line-through; }
.info-table {
display: grid; grid-template-columns: 38px 1fr;
row-gap: 4px; column-gap: 6px;
font-size: 10px;
border: 1px solid #e5e7eb; border-radius: 6px;
padding: 6px 8px; background: #fafbfc;
}
.info-table .k {
color: #94a3b8; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
font-size: 8px; padding-top: 2px;
align-self: center;
}
/* Source label cho dòng date — Listed (green) | Seen (amber) | Removed (red).
Chỉ giữ màu chữ, KHÔNG background, KHÔNG border. */
.info-table .k-source {
font-size: 9px; font-weight: 800;
cursor: help;
text-transform: none; letter-spacing: 0;
line-height: 1.3;
white-space: nowrap;
}
.info-table .k-src-listed { color: #15803d; }
.info-table .k-src-seen { color: #92400e; }
.info-table .k-src-removed { color: #b91c1c; }
.info-table .v {
color: #111827;
display: flex; align-items: center; gap: 5px;
flex-wrap: wrap; font-size: 10px;
min-height: 15px;
}
/* BSR / Listed / ASIN row: cho phép WRAP xuống dòng khi card hẹp,
không bao giờ CLIP nội dung. */
.info-table .v-bsr,
.info-table .v {
flex-wrap: wrap;
column-gap: 6px;
row-gap: 3px;
min-width: 0;
}
.info-table .v-bsr .bsr-badge,
.info-table .v-bsr .delta {
flex-shrink: 0;
white-space: nowrap;
}
/* Khi vừa đủ: delta đẩy phải; khi wrap thì xuống dòng bình thường */
.info-table .v-bsr .delta { margin-left: auto; }
/* Listed: badge + date */
.info-table .v .ago-badge { flex-shrink: 0; }
.info-table .v .ago-badge + small { margin-left: auto; padding-left: 4px; white-space: nowrap; }
/* ASIN: text + copy */
.info-table .v .asin { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.info-table .v .copy-btn { margin-left: auto; flex-shrink: 0; }
.bsr-badge {
padding: 2px 7px; border-radius: 999px; font-weight: 800;
font-size: 11px; color: #fff;
display: inline-flex; align-items: center; gap: 4px;
letter-spacing: -.02em;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
flex-shrink: 0;
white-space: nowrap;
}
.bsr-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .85; }
.bsr-badge.green { background: #22c55e; }
.bsr-badge.yellow { background: #eab308; }
.bsr-badge.orange { background: #f97316; }
.bsr-badge.red { background: #ef4444; }
.bsr-badge.gray { background: #9ca3af; }
.delta {
font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 4px;
display: inline-flex; align-items: center; gap: 2px;
letter-spacing: -0.02em;
}
.delta.up { color: #15803d; background: #dcfce7; } /* rank IMPROVED (số giảm) = xanh */
.delta.down { color: #b91c1c; background: #fee2e2; } /* rank WORSE (số tăng) = đỏ */
.delta.flat { color: #64748b; background: #f1f5f9; } /* rank không đổi = xám */
.delta.neutral { color: #1e40af; background: #dbeafe; } /* chưa có lịch sử = xanh nhạt */
.ago-badge { padding: 1px 5px; border-radius: 999px; font-size: 9px; font-weight: 600; background: #e5e7eb; color: #475569; }
.ago-badge.neutral { background: #e5e7eb; color: #475569; }
.ago-badge.green { background: #dcfce7; color: #166534; }
.ago-badge.yellow { background: #fef3c7; color: #92400e; }
.ago-badge.orange { background: #ffedd5; color: #c2410c; }
.ago-badge.removed { background: #fee2e2; color: #991b1b; }
.updated-badge {
padding: 1px 7px; border-radius: 4px; font-size: 10px; font-weight: 600;
display: inline-flex; align-items: center; gap: 3px;
}
.updated-badge::before {
content: '●'; font-size: 8px;
}
.updated-badge.fresh { background: #ecfdf5; color: #047857; } /* < 8h: vừa update */
.updated-badge.mid { background: #fef3c7; color: #92400e; } /* 8-24h */
.updated-badge.stale { background: #f3f4f6; color: #6b7280; } /* > 24h */
/* ASIN font: dùng cùng font với cả app (sans-serif). Click vào để copy. */
.asin {
font-family: inherit; font-size: 10px; color: #475569;
letter-spacing: .02em; font-weight: 500;
cursor: pointer; user-select: all;
padding: 1px 4px; border-radius: 3px;
transition: background .15s;
}
.asin:hover { background: #eff6ff; color: #1e3a8a; }
.asin.copied { background: #dcfce7; color: #15803d; }
.copy-btn { background: #2563eb; color: white; font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 3px; border: none; cursor: pointer; line-height: 1.3; }
.copy-btn:hover { background: #1d4ed8; }
/* Sales-past-month badge — trực quan, nổi bật */
.sales-badge {
display: inline-flex; align-items: center; gap: 4px;
background: linear-gradient(135deg, #f97316, #ea580c);
color: #fff; font-weight: 700; font-size: 9px;
padding: 2px 7px; border-radius: 999px;
box-shadow: 0 1px 3px rgba(234, 88, 12, 0.3);
}
.sales-badge::before { content: '🔥'; font-size: 11px; }
/* Youth Size badge — vàng nổi, có icon trẻ em */
.youth-badge {
display: inline-flex; align-items: center; gap: 4px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #78350f; font-weight: 700; font-size: 10px;
padding: 2px 8px; border-radius: 999px;
border: 1px solid #fcd34d;
box-shadow: 0 1px 3px rgba(245, 158, 11, 0.25);
}
/* Update timestamp — đặt CUỐI card, mờ nhẹ, không nổi bật */
.card .update-bottom {
margin-top: 2px; padding-top: 4px;
border-top: 1px dashed #eef0f3;
font-size: 9px; color: #94a3b8;
font-weight: 400; letter-spacing: 0;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.card .update-bottom::before { content: none; }
.card .update-bottom .asin-refresh-status {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card .asin-refresh-btn {
width: 20px; height: 20px;
flex: 0 0 20px;
border-radius: 999px;
border: 1px solid #dbe3ee;
background: #fff;
color: #64748b;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
font-size: 11px; line-height: 1;
cursor: pointer;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
transition: transform .15s, background .15s, border-color .15s, color .15s;
}
.card .asin-refresh-btn:hover {
background: #eff6ff;
border-color: #93c5fd;
color: #1d4ed8;
transform: scale(1.06);
}
.card .asin-refresh-btn:disabled {
cursor: wait;
opacity: 1;
}
.card .asin-refresh-btn.loading {
color: #475569;
background: #f8fafc;
animation: spin 1s linear infinite;
}
.card .asin-refresh-btn.queued {
background: #dcfce7;
border-color: #86efac;
color: #15803d;
}
.card .asin-refresh-btn.error {
background: #fee2e2;
border-color: #fca5a5;
color: #b91c1c;
}
.tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.tag.new { background: #fef3c7; color: #92400e; }
.tag.removed { background: #fee2e2; color: #991b1b; }
.tag.youth { background: #fef9c3; color: #854d0e; }
.tag.mod { background: #dbeafe; color: #1e40af; }
.tag.release { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; }
.tag.bestseller { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
/* Badges row: sales / new release / best seller */
.badges-row { display: flex; gap: 4px; flex-wrap: wrap; min-height: 0; }
.sales-badge.release-badge { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.sales-badge.release-badge::before { content: ''; }
.sales-badge.bestseller-badge { background: linear-gradient(135deg, #f59e0b, #d97706); }
.sales-badge.bestseller-badge::before { content: ''; }
.trend-badge {
display: inline-flex; align-items: center;
padding: 2px 7px; border-radius: 999px;
font-size: 9px; font-weight: 700;
letter-spacing: .02em;
}
.trend-badge.up { background: #dcfce7; color: #166534; }
.trend-badge.down { background: #fee2e2; color: #991b1b; }
.trend-badge.flat { background: #e5e7eb; color: #475569; }
.price-row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #4b5563; }
.price-row .price { font-weight: 700; color: #111827; font-size: 12px; }
.price-row .stars { color: #f59e0b; font-size: 10px; }
@media (min-width: 1024px) and (max-height: 860px) {
.topbar { height: 50px; }
main { padding: 8px 10px; }
.toolbar { margin-bottom: 6px; padding: 6px 10px; }
.grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.card .img-wrap {
--card-image-focus-y: 32%;
--card-image-zoom: 1;
--card-image-hover-zoom: 1;
--card-image-shift-y: -3%;
--card-image-hover-shift-y: -3%;
aspect-ratio: 1 / 1;
}
.card-body { padding: 5px 6px 6px; gap: 4px; }
.card-title { font-size: 10px; }
.info-table { padding: 4px 6px; row-gap: 3px; }
.badges-row {
display: flex;
gap: 3px;
}
.badges-row .sales-badge {
font-size: 8px;
padding: 1px 6px;
gap: 3px;
}
.badges-row .sales-badge::before { font-size: 9px; }
.card .update-bottom {
margin-top: 1px;
padding-top: 3px;
gap: 4px;
font-size: 8px;
justify-content: space-between;
}
.card .update-bottom .asin-refresh-status {
display: block;
font-size: 8px;
letter-spacing: -.01em;
}
.card .asin-refresh-btn {
width: 18px;
height: 18px;
flex: 0 0 18px;
font-size: 10px;
}
.bsr-badge { font-size: 10px; padding: 2px 6px; }
.delta { font-size: 8px; }
.price-row { font-size: 9px; }
.price-row .price,
.price-row .stars { font-size: 10px; }
}
/* ---- Keywords tab ---- */
/* Word cloud */
.wordcloud {
background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
padding: 24px; min-height: 240px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 8px 14px; line-height: 1.2;
}
.wc-word {
display: inline-block; cursor: pointer; transition: transform .15s, color .15s;
font-weight: 700; color: #1e3a8a;
}
.wc-word:hover { transform: scale(1.1); color: #ef4444; }
.wc-word .ct { font-size: .6em; color: #9ca3af; margin-left: 3px; font-weight: 500; }
.kw-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.kw-table th, .kw-table td { padding: 10px 14px; text-align: left; font-size: 13px; border-bottom: 1px solid #f3f4f6; }
.kw-table th { background: #f9fafb; font-weight: 600; color: #6b7280; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.kw-table tr:hover { background: #f9fafb; }
.kw-count { font-weight: 700; color: #1e3a8a; }
.kw-change.up { color: #16a34a; font-weight: 600; }
.kw-change.down { color: #dc2626; font-weight: 600; }
.kw-change.flat { color: #9ca3af; }
.kw-top { display: flex; gap: 6px; flex-wrap: wrap; }
.kw-top a { font-size: 11px; color: #2563eb; text-decoration: none; padding: 2px 6px; background: #eff6ff; border-radius: 4px; }
.kw-top a:hover { text-decoration: underline; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .kw-table { min-width: 720px; }
/* ===== Modal: Helium-style detail ===== */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modal-body { position: relative; background: #fff; border-radius: 12px; max-width: 980px; width: 95%; max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 28px; cursor: pointer; color: #6b7280; z-index: 10; }
.modal-close:hover { color: #111827; }
.detail-head { display: grid; grid-template-columns: 240px 1fr; gap: 20px; padding: 20px 24px 16px; border-bottom: 1px solid #f1f5f9; }
.detail-img { position: relative; width: 100%; aspect-ratio: 1; background: #f9fafb; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.detail-img img { width: 100%; height: 100%; object-fit: contain; }
.detail-img .detail-image-star {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
width: 28px;
height: 28px;
font-size: 30px;
color: #94a3b8;
text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
}
.detail-img .detail-image-star:hover {
color: #ea580c;
}
.detail-img .detail-image-star.saved {
color: #f59e0b;
}
.detail-info h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.detail-info h2.removed { text-decoration: line-through; color: #ef4444; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: #475569; margin-bottom: 12px; }
.detail-meta strong { color: #111827; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.detail-actions a, .detail-actions button {
padding: 6px 12px; font-size: 12px; border-radius: 6px; border: 1px solid #d1d5db;
background: #fff; color: #1e3a8a; cursor: pointer; text-decoration: none; font-weight: 500;
}
.detail-actions a:hover, .detail-actions button:hover { background: #f3f4f6; }
.detail-actions a.primary { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
.detail-actions a.primary:hover { background: #1e40af; }
.detail-section { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; }
.detail-section h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #334155; text-transform: uppercase; letter-spacing: .04em; }
/* Chart Helium-style */
.chart-toolbar { display: flex; gap: 6px; align-items: center; margin-bottom: 12px; }
.chart-range { padding: 4px 12px; font-size: 12px; border: 1px solid #d1d5db; background: #fff; color: #475569; border-radius: 5px; cursor: pointer; font-weight: 500; }
.chart-range:hover { background: #f3f4f6; }
.chart-range.active { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
.chart-legend { display: flex; gap: 16px; margin-left: auto; font-size: 12px; color: #475569; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 14px; height: 3px; display: inline-block; border-radius: 2px; }
.chart-legend i.rank { background: #3b82f6; }
.chart-legend i.price { background: #22c55e; }
.chart-legend i.dfa { background: #eab308; }
.chart-wrap { position: relative; background: #fafbfc; border: 1px solid #eef0f3; border-radius: 6px; padding: 8px; }
.chart-wrap svg { width: 100%; display: block; cursor: crosshair; }
.chart-tooltip {
position: absolute; pointer-events: none; background: rgba(17,24,39,.92); color: #fff;
padding: 6px 10px; border-radius: 6px; font-size: 11px; line-height: 1.5; display: none;
transform: translate(8px, -100%); white-space: nowrap;
}
.chart-tooltip.show { display: block; }
.chart-tooltip .row { display: flex; gap: 10px; justify-content: space-between; }
.chart-tooltip .row b { font-weight: 600; }
.about-list { margin: 0; padding-left: 18px; color: #334155; font-size: 13px; line-height: 1.6; }
.about-list li { margin-bottom: 4px; }
.keyword-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.keyword-chips span { background: #eff6ff; color: #1e40af; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
.history-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.history-table th { padding: 6px 8px; text-align: left; color: #6b7280; font-weight: 600; font-size: 10px; text-transform: uppercase; background: #f8fafc; }
.history-table td { padding: 5px 8px; border-bottom: 1px solid #f1f5f9; }
.empty { padding: 40px; text-align: center; color: #9ca3af; }
/* ===== Skeleton loading — perceived speed cao hơn "Loading..." text ===== */
.skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
padding: 12px;
}
.skeleton-card {
border-radius: 8px;
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
background-size: 200% 100%;
animation: skel-shimmer 1.6s linear infinite;
min-height: 280px;
}
.skeleton-table { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.skeleton-row {
height: 36px; border-radius: 6px;
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
background-size: 200% 100%;
animation: skel-shimmer 1.6s linear infinite;
}
@keyframes skel-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Fade-in cards khi mới insert vào DOM — perceived smooth thay vì flash.
Animation chỉ chạy 1 lần, không tác động hover/scroll. */
.grid > .card {
animation: card-fade-in 180ms ease-out;
animation-fill-mode: backwards;
/* CSS containment giảm reflow khi insert hàng loạt */
contain: layout style paint;
}
@keyframes card-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---- Sources tab ---- */
.src-table { font-size: 13px; }
.src-table tr.src-hidden { opacity: 0.45; }
.src-table tr.src-hidden td strong { text-decoration: line-through; color: #94a3b8; }
.src-toggle { display: inline-flex; cursor: pointer; user-select: none; }
.src-toggle input { display: none; }
.src-toggle-pill {
padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 700;
background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb;
}
.src-toggle input:checked + .src-toggle-pill {
background: #16a34a; color: #fff; border-color: #15803d;
}
.src-cat-badge {
display: inline-block; padding: 2px 8px; background: #dbeafe; color: #1e40af;
border-radius: 4px; font-size: 11px; font-weight: 600;
}
.src-del-btn {
background: transparent; border: 1px solid #fca5a5; color: #ef4444;
padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.src-del-btn:hover { background: #fef2f2; }
/* System Control Bar — top of Sources tab */
.src-control-bar {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
background: #fff; padding: 12px 16px; margin-bottom: 12px;
border: 1px solid #e5e7eb; border-radius: 8px;
border-left: 4px solid #1e3a8a;
}
.src-find-row {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
border-top: 1px solid #f1f5f9; padding-top: 10px;
}
.src-find-status {
font-size: 11px;
color: #475569;
min-width: 180px;
}
.src-table tr.src-row-match td {
background: #eff6ff;
}
.src-table tr.src-row-hit td {
background: #dbeafe;
box-shadow: inset 0 0 0 1px #93c5fd;
}
.btn-control {
padding: 6px 14px; font-size: 12px; font-weight: 600;
border: none; border-radius: 6px; cursor: pointer;
color: #fff; transition: transform .1s, box-shadow .15s;
}
.btn-control:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.btn-control:disabled { opacity: .55; cursor: not-allowed; }
.btn-control.btn-blue { background: #2563eb; }
.btn-control.btn-blue:hover:not(:disabled) { background: #1d4ed8; }
.btn-control.btn-orange { background: #ea580c; }
.btn-control.btn-orange:hover:not(:disabled) { background: #c2410c; }
.btn-control.btn-red { background: #dc2626; }
.btn-control.btn-red:hover:not(:disabled) { background: #991b1b; }
#src-control-status .ok { color: #16a34a; font-weight: 600; }
#src-control-status .err { color: #dc2626; font-weight: 600; }
/* Live State Panel (top of Sources tab) */
.live-panel {
background: #fff; border-radius: 8px; padding: 12px 16px; margin-bottom: 12px;
border-left: 4px solid #9ca3af;
}
.live-panel.idle { border-left-color: #9ca3af; }
.live-panel.running { border-left-color: #16a34a; background: linear-gradient(to right, #f0fdf4, #fff 30%); }
.live-header { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #111827; }
.live-dot {
display: inline-block; width: 10px; height: 10px; border-radius: 50%;
background: #9ca3af;
}
.live-dot.running { background: #16a34a; animation: pulse 1.5s infinite; }
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0.6); }
50% { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
}
.live-progress { margin-top: 10px; font-size: 12px; }
.live-progress-label { color: #475569; margin-bottom: 4px; font-weight: 600; }
.live-progress-bar { height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.live-progress-bar > div { height: 100%; background: linear-gradient(90deg, #3b82f6, #16a34a); transition: width .5s; }
.live-current { margin-top: 8px; max-height: 240px; overflow-y: auto; font-size: 11px; color: #475569; }
.live-current-row { padding: 6px 0; border-bottom: 1px dashed #f1f5f9; }
.live-current-row:last-child { border-bottom: none; }
.live-current-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.live-current-head strong { font-family: ui-monospace, monospace; color: #1e3a8a; font-size: 11px; }
.cat-pill {
background: #dbeafe; color: #1e40af; font-size: 10px; padding: 1px 6px;
border-radius: 3px; font-weight: 600;
}
.kw-pill {
background: #fef3c7; color: #92400e; font-size: 10px; padding: 1px 6px;
border-radius: 3px; font-weight: 700;
}
.page-pill {
margin-left: auto; background: #f1f5f9; color: #475569;
font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600;
}
.live-mini-bar {
height: 3px; background: #e5e7eb; border-radius: 2px;
overflow: hidden; margin-top: 4px;
}
.live-mini-bar > div { height: 100%; background: #3b82f6; transition: width .3s; }
.live-panel.has-errors { border-left-color: #f97316; background: linear-gradient(to right, #fff7ed, #fff 30%); }
.err-pill {
background: #fee2e2; color: #991b1b; padding: 2px 8px;
border-radius: 999px; font-size: 11px; font-weight: 700;
}
/* Skip reasons summary */
.live-skip-reasons { margin-top: 12px; padding: 8px 12px; background: #f8fafc; border-radius: 6px; }
.live-skip-reasons-head { font-size: 11px; color: #475569; font-weight: 700; margin-bottom: 6px; }
.skip-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.skip-tag {
font-size: 11px; padding: 2px 8px; border-radius: 999px;
background: #e5e7eb; color: #475569; font-weight: 500;
}
.skip-tag b { font-weight: 800; margin-left: 3px; }
.skip-tag.skip-no-title { background: #fef3c7; color: #92400e; }
.skip-tag.skip-timeout { background: #fee2e2; color: #991b1b; }
.skip-tag.skip-http-5xx { background: #fecaca; color: #7f1d1d; }
.skip-tag.skip-captcha { background: #fde68a; color: #78350f; }
.skip-tag.skip-removed { background: #ddd6fe; color: #5b21b6; }
.skip-tag.skip-brand-block { background: #cffafe; color: #155e75; }
.skip-tag.skip-3p-seller { background: #d1fae5; color: #065f46; }
/* Recent skips list */
.live-skips { margin-top: 10px; padding: 8px 12px; background: #fafbfc; border: 1px solid #e5e7eb; border-radius: 6px; }
.live-skips-head { font-size: 11px; color: #6b7280; font-weight: 700; margin-bottom: 4px; }
.live-skips ul { margin: 0; padding-left: 18px; font-size: 11px; color: #475569; max-height: 100px; overflow-y: auto; }
.live-skips li { padding: 1px 0; }
.live-skips code { background: #eff6ff; color: #1e40af; padding: 0 4px; border-radius: 2px; font-size: 10px; }
.skip-reason { color: #94a3b8; font-size: 10px; margin-left: 4px; }
.live-errors {
margin-top: 12px; padding: 8px 12px;
background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px;
}
.live-errors-head {
font-size: 11px; color: #9a3412; font-weight: 700; margin-bottom: 4px;
}
.live-errors ul { margin: 0; padding-left: 18px; font-size: 11px; color: #7c2d12; max-height: 100px; overflow-y: auto; }
.live-errors li { padding: 1px 0; }
.err-ctx {
background: #fed7aa; color: #7c2d12; padding: 0 4px;
border-radius: 2px; font-family: ui-monospace, monospace; font-size: 10px;
}
.copy-saved-btn {
margin-left: auto; background: #1e3a8a; color: #fff; border: none;
padding: 2px 8px; border-radius: 4px; font-size: 10px; cursor: pointer; font-weight: 600;
}
.copy-saved-btn:hover { background: #1e40af; }
.live-recent-label { display: flex; align-items: center; gap: 8px; }
.live-kpis {
display: grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
gap: 8px; margin-top: 12px;
}
.live-kpi {
background: #f8fafc; padding: 6px 10px; border-radius: 6px;
display: flex; flex-direction: column; align-items: center; font-size: 10px; color: #6b7280;
}
.live-kpi b { font-size: 16px; font-weight: 800; color: #111827; margin-top: 2px; }
.live-kpi.green b { color: #16a34a; }
.live-kpi.blue b { color: #2563eb; }
.live-kpi.red b { color: #dc2626; }
.live-recent { margin-top: 10px; }
.live-recent-label { font-size: 11px; color: #6b7280; font-weight: 600; margin-bottom: 4px; }
.live-recent ul { margin: 0; padding-left: 18px; font-size: 11px; color: #334155; max-height: 140px; overflow-y: auto; }
.live-recent li { padding: 1px 0; }
.live-recent li code { font-family: ui-monospace, monospace; background: #eff6ff; color: #1e40af; padding: 0 3px; border-radius: 2px; }
/* Pinned row (priority >= 50) */
.src-table tr.src-pinned td { background: #fffbeb; }
.src-table tr.src-pinned td strong { color: #92400e; }
.src-pin-badge {
display: inline-block; padding: 1px 6px; margin-left: 4px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #78350f; font-weight: 700; font-size: 9px;
border-radius: 3px; letter-spacing: .03em;
}
/* 2026-06-16: AI badge — keyword được accept từ AI Suggestion */
.src-ai-badge {
display: inline-block; padding: 1px 6px; margin-left: 4px;
background: linear-gradient(135deg, #c084fc, #a855f7);
color: #fff; font-weight: 700; font-size: 9px;
border-radius: 3px; letter-spacing: .04em;
cursor: help;
}
/* 2026-06-22: badge keyword AI chưa từng spy lần nào kể từ khi thêm */
.src-neverspy-badge {
display: inline-block; padding: 1px 6px; margin-left: 4px;
background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa;
font-weight: 700; font-size: 9px; border-radius: 3px; letter-spacing: .03em; cursor: help;
}
.src-prio-input { border: 1px solid #d1d5db; border-radius: 4px; }
.src-prio-input:focus { outline: 2px solid #1e3a8a; border-color: #1e3a8a; }
/* ===== Settings tab ===== */
/* 2026-06-21: Settings FULL-WIDTH grid (đồng bộ full-màn với toàn web) — card responsive auto-fill.
Section đơn giản = card; section phức tạp (Workers/Orchestrator) + header + save-bar = full-row. */
.settings-container {
max-width: 1600px; margin: 0 auto; padding: 0 16px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
gap: 16px;
align-items: start;
}
.settings-container > h2,
.settings-container > .settings-save-bar,
.settings-container > #orchestrator-section { grid-column: 1 / -1; }
/* 2026-06-21: full-row general (không cần con-trực-tiếp) → áp cho cả section append qua wrapper.
#ai-cred-host (bọc AI Redesign + Keyword LLM) dùng display:contents để 2 section trở thành
grid-item trực tiếp của settings-container → mới full-row + cred-grid bung full viền được. */
.settings-section--full { grid-column: 1 / -1; }
#ai-cred-host { display: contents; }
.settings-section {
background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
padding: 16px 18px; margin: 0; /* gap của grid thay margin-bottom */
display: flex; flex-direction: column;
}
.settings-header {
display: flex; gap: 12px; align-items: flex-start;
border-bottom: 1px solid #f1f5f9; padding-bottom: 10px; margin-bottom: 14px;
}
.settings-icon { font-size: 24px; }
.settings-header h3 { margin: 0; font-size: 14px; color: #111827; font-weight: 700; }
.settings-header p { margin: 4px 0 0; font-size: 12px; color: #6b7280; line-height: 1.4; }
.settings-link {
font-size: 11px; color: #2563eb; text-decoration: none;
border: 1px solid #dbeafe; padding: 3px 8px; border-radius: 4px;
white-space: nowrap; align-self: flex-start;
}
.settings-link:hover { background: #eff6ff; }
.settings-form { display: flex; flex-direction: column; gap: 12px; }
.settings-form label {
display: flex; flex-direction: column; gap: 4px;
font-size: 12px; color: #475569; font-weight: 600;
}
.settings-form input, .settings-form select, .settings-form textarea {
padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px;
font-size: 13px; font-family: inherit;
}
/* 2026-06-21: textarea (proxy pool) dùng font chung sans-serif (như research), KHÔNG monospace mặc định */
.settings-form textarea { resize: vertical; line-height: 1.45; min-height: 64px; }
.settings-form input:focus, .settings-form select:focus, .settings-form textarea:focus {
outline: 2px solid #1e3a8a; border-color: #1e3a8a;
}
.settings-form small { color: #94a3b8; font-size: 11px; font-weight: 500; }
.settings-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.btn-test {
background: #f3f4f6; border: 1px solid #d1d5db; padding: 6px 12px;
border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; color: #1e3a8a;
}
.btn-test:hover:not(:disabled) { background: #e5e7eb; }
.btn-test:disabled { opacity: 0.5; cursor: not-allowed; }
.test-result { font-size: 12px; }
.test-result .ok { color: #16a34a; font-weight: 700; }
.test-result .err { color: #dc2626; font-weight: 600; }
.token-plain-wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.token-plain-input {
flex: 1; min-width: 280px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: #f8fafc;
}
.btn-copy {
background: #fff; color: #1e3a8a; border: 1px solid #cbd5e1; padding: 8px 12px;
border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.btn-copy:hover { background: #eff6ff; }
.settings-save-bar {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
padding: 14px; background: #f9fafb; border-radius: 8px; border: 1px dashed #cbd5e1;
}
.btn-save {
background: #16a34a; color: #fff; border: none; padding: 8px 16px;
border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.btn-save:hover:not(:disabled) { background: #15803d; }
.btn-restart {
background: #ea580c; color: #fff; border: none; padding: 8px 16px;
border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.btn-restart:hover:not(:disabled) { background: #c2410c; }
.save-status { font-size: 12px; flex: 1; }
.save-status .ok { color: #16a34a; font-weight: 600; }
.save-status .err { color: #dc2626; font-weight: 600; }
.settings-note {
margin-top: 16px; padding: 12px 14px;
background: #fefce8; border-left: 3px solid #facc15; border-radius: 4px;
font-size: 12px; color: #713f12; line-height: 1.5;
}
/* Blocked Brands table */
.bb-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.bb-table th { text-align: left; padding: 6px 8px; background: #f9fafb; color: #6b7280; font-size: 10px; text-transform: uppercase; }
.bb-table td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; }
.bb-table code { background: #fee2e2; color: #991b1b; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.bb-unblock-btn {
padding: 3px 8px; font-size: 11px; background: #fff; color: #475569;
border: 1px solid #cbd5e1; border-radius: 4px; cursor: pointer;
}
.bb-unblock-btn:hover { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
/* ---- Stats tab ---- */
.stats-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 18px; }
.kpi-label { font-size: 11px; color: #6b7280; text-transform: uppercase; font-weight: 600; letter-spacing: .04em; margin-bottom: 6px; }
.kpi-value { font-size: 28px; font-weight: 800; color: #111827; line-height: 1.1; }
.kpi-sub { font-size: 10px; color: #94a3b8; margin-top: 4px; }
.kpi-hint { font-size: 10px; color: #2563eb; margin-top: 4px; font-weight: 600; opacity: 0; transition: opacity .15s; }
.kpi.clickable { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.kpi.clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.08); border-color: #2563eb; }
.kpi.clickable:hover .kpi-hint { opacity: 1; }
.kpi-value.green { color: #16a34a; }
.kpi-value.red { color: #dc2626; }
.kpi-value.blue { color: #2563eb; }
.movers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mover-card { display: flex; gap: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px; text-decoration: none; color: inherit; transition: transform .15s; }
.mover-card:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.06); }
.mover-img { width: 60px; height: 60px; background: #f9fafb; border-radius: 6px; flex-shrink: 0; overflow: hidden; }
.mover-img img { width: 100%; height: 100%; object-fit: contain; }
.mover-body { flex: 1; min-width: 0; }
.mover-title { font-size: 12px; font-weight: 600; color: #111827; line-height: 1.3; max-height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 4px; }
.mover-stats { font-size: 11px; color: #475569; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* ---- Archives day grouping ---- */
.archive-day-header {
grid-column: 1 / -1;
background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #1e3a8a;
padding: 10px 14px; border-radius: 6px;
display: flex; justify-content: space-between; align-items: center;
font-size: 13px; color: #1e3a8a; font-weight: 600;
margin: 12px 0 10px;
}
.archive-day-header strong { font-weight: 800; }
.archive-day-count { font-size: 11px; color: #6b7280; font-weight: 500; }
@media (max-width: 768px) {
.topbar {
height: auto;
flex-wrap: wrap;
gap: 6px;
align-items: center;
padding: 8px 10px;
}
.brand {
margin-right: 0;
font-size: 14px;
flex: 1 1 auto;
min-width: 0;
}
.tabs {
order: 2;
width: 100%;
flex: 0 0 100%;
display: flex;
flex-wrap: nowrap;
gap: 5px;
overflow-x: auto;
padding: 2px 0 2px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
flex: 0 0 auto;
min-width: 78px;
white-space: nowrap;
text-align: center;
line-height: 1.05;
min-height: 32px;
padding: 6px 9px;
font-size: 11px;
font-weight: 700;
color: #334155;
background: #f8fafc;
border: 1px solid #dbe3f0;
}
.tab.active::after {
display: none;
}
.tab.active {
box-shadow: 0 2px 8px rgba(30,58,138,.22);
}
.status-pill {
order: 1;
margin-left: auto;
flex: 0 0 auto;
max-width: 32vw;
padding: 4px 8px;
font-size: 10px;
border-radius: 999px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
main {
padding: 10px;
}
.toolbar {
gap: 7px;
padding: 9px 10px;
}
.search-box {
min-width: 0;
max-width: none;
flex-basis: 100%;
}
.toolbar .count {
flex-basis: 100%;
margin-left: 0;
}
#dfrom,
#dto {
width: 100% !important;
}
.grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.card .img-wrap {
--card-image-focus-y: 34%;
--card-image-zoom: 1;
--card-image-hover-zoom: 1;
--card-image-shift-y: -2%;
--card-image-hover-shift-y: -2%;
}
.card-body {
padding: 6px 6px 7px;
gap: 5px;
}
.card-title {
font-size: 10px;
line-height: 1.2;
max-height: 2.4em;
-webkit-line-clamp: 2;
}
.info-table {
grid-template-columns: 34px 1fr;
row-gap: 4px;
column-gap: 5px;
padding: 6px 6px;
font-size: 9px;
}
.info-table .k {
font-size: 8px;
padding-top: 2px;
}
.info-table .v {
font-size: 9px;
gap: 4px;
min-height: 14px;
}
.bsr-badge {
padding: 2px 6px;
font-size: 10px;
}
.delta {
font-size: 8px;
padding: 1px 4px;
}
.ago-badge,
.updated-badge,
.asin,
.copy-btn,
.sales-badge,
.youth-badge,
.tag {
font-size: 8px;
}
.price-row {
font-size: 9px;
}
.price-row .price {
font-size: 11px;
}
.price-row .stars {
font-size: 9px;
}
.card .update-bottom {
padding-top: 4px;
gap: 5px;
font-size: 8px;
}
.card .asin-refresh-btn {
width: 18px;
height: 18px;
flex-basis: 18px;
font-size: 10px;
}
.bookmark-btn {
width: 16px;
height: 16px;
font-size: 14px;
}
.modal-body {
width: calc(100vw - 12px);
max-height: calc(100vh - 12px);
}
.detail-head {
grid-template-columns: 1fr;
gap: 14px;
padding: 16px;
}
.detail-section {
padding: 14px 16px;
}
.stats-kpis {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.kpi {
padding: 14px;
}
.kpi-value {
font-size: 24px;
}
.movers-grid {
grid-template-columns: 1fr;
}
.login-card {
width: min(360px, calc(100vw - 24px));
padding: 24px;
}
}
@media (max-width: 480px) {
.brand {
font-size: 13px;
}
.tab {
min-width: 72px;
min-height: 30px;
padding: 5px 8px;
font-size: 10px;
}
.status-pill {
max-width: 28vw;
font-size: 9px;
padding: 3px 7px;
}
.status-pill .dot {
width: 6px;
height: 6px;
margin-right: 4px;
}
}
/* ---- Pagination ---- */
.pagination {
display: flex; justify-content: center; align-items: center; gap: 4px;
padding: 16px 0 4px;
flex-wrap: wrap;
position: sticky; bottom: 0;
background: linear-gradient(to top, #f3f4f6 70%, rgba(243,244,246,0));
margin-top: 12px;
}
.pg-btn {
min-width: 32px; height: 32px; padding: 0 10px;
border: 1px solid #d1d5db; background: #fff; border-radius: 6px;
font-size: 13px; font-weight: 500; color: #475569; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.pg-btn:hover:not(:disabled):not(.active) { background: #f3f4f6; border-color: #94a3b8; }
.pg-btn.active { background: #1e3a8a; color: #fff; border-color: #1e3a8a; cursor: default; }
.pg-btn:disabled { color: #cbd5e1; cursor: not-allowed; background: #f9fafb; }
.pg-ellipsis { color: #94a3b8; padding: 0 4px; font-size: 13px; }
.pg-info { color: #6b7280; font-size: 12px; margin-left: 12px; }
.pg-jump { display: inline-flex; align-items: center; gap: 6px; margin-left: 16px; font-size: 12px; color: #6b7280; }
.pg-jump input { width: 50px; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px; text-align: center; }
/* Find Similar — match-reason chips dưới mỗi card */
.sim-reasons {
border-top: 1px dashed #e5e7eb;
padding: 6px 8px 7px;
background: #fafbfc;
display: flex;
flex-direction: column;
gap: 4px;
}
.sim-reasons .sim-score {
font-size: 11px;
font-weight: 600;
color: #b45309;
}
.sim-reasons .sim-chips {
display: flex;
flex-wrap: wrap;
gap: 3px;
}
.sim-chip {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
line-height: 1;
padding: 3px 6px;
border-radius: 8px;
background: #f1f5f9;
color: #475569;
border: 1px solid #e2e8f0;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.sim-chip.sim-cat { background:#e0e7ff; color:#3730a3; border-color:#c7d2fe; }
.sim-chip.sim-aud { background:#dcfce7; color:#15803d; border-color:#bbf7d0; }
.sim-chip.sim-brand { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.sim-chip.sim-bsr { background:#fce7f3; color:#9d174d; border-color:#fbcfe8; }
.sim-chip.sim-longtail { background:#ffedd5; color:#9a3412; border-color:#fed7aa; font-weight:600; }
.sim-chip.sim-bigram { background:#cffafe; color:#155e75; border-color:#a5f3fc; }
.sim-chip.sim-shared { background:#f3e8ff; color:#6b21a8; border-color:#e9d5ff; }
/* Sources tab — per-keyword today counters */
.kw-today {
display: inline-block;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 10px;
letter-spacing: 0.3px;
}
.kw-today.kw-new { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }
.kw-today.kw-active { background:#fed7aa; color:#9a3412; border:1px solid #fdba74; }
.kw-today.kw-all { background:#ede9fe; color:#5b21b6; border:1px solid #ddd6fe; }
.kw-today.kw-disc { background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; }
.src-hist-btn { background:none; border:1px solid #e5e7eb; padding:3px 6px; border-radius:4px; cursor:pointer; font-size:12px; margin-right:4px; }
.src-hist-btn:hover { background:#f3f4f6; border-color:#94a3b8; }
.kw-today.kw-click { cursor: pointer; transition: transform 0.1s, box-shadow 0.1s; }
.kw-today.kw-click:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
/* ===== A10 Score Badge (Trend tab) ===== */
.a10-badge {
display: inline-block;
font-size: 10px;
font-weight: 800;
padding: 2px 7px;
border-radius: 10px;
letter-spacing: 0.3px;
white-space: nowrap;
margin-right: 4px;
cursor: help;
}
.a10-badge.a10-hot { background:linear-gradient(135deg,#dc2626,#f97316); color:#fff; box-shadow:0 1px 3px rgba(220,38,38,.3); }
.a10-badge.a10-warm { background:linear-gradient(135deg,#f97316,#facc15); color:#fff; }
.a10-badge.a10-mid { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.a10-badge.a10-cold { background:#f1f5f9; color:#64748b; border:1px solid #e2e8f0; }
/* ===================== AI REDESIGN TAB ===================== */
.ai-container { max-width: 1200px; margin: 0 auto; padding: 0 8px 24px; display: flex; flex-direction: column; gap: 16px; }
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 880px) { .ai-grid { grid-template-columns: 1fr; } }
.ai-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.ai-section-title { margin: 0 0 12px; font-size: 14px; color: #1e3a8a; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ai-warn { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; padding: 8px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; }
.ai-empty { color: #94a3b8; font-size: 13px; text-align: center; padding: 24px 12px; }
/* Drop zone */
.ai-dropzone {
border: 2px dashed #cbd5e1; border-radius: 10px; padding: 20px;
display: flex; flex-direction: column; align-items: center; gap: 12px;
transition: border-color .15s, background .15s; min-height: 240px; justify-content: center;
}
.ai-dropzone.drag { border-color: #2563eb; background: #eff6ff; }
.ai-dropzone.has-input { border-style: solid; border-color: #93c5fd; background: #f8fafc; }
.ai-dropzone:focus { outline: none; border-color: #60a5fa; }
.ai-preview-img { max-width: 100%; max-height: 260px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.1); object-fit: contain; background: #fff; }
.ai-preview-fallback { padding: 24px; background: #fef3c7; border-radius: 6px; color: #92400e; font-size: 12px; }
.ai-input-label { font-size: 12px; color: #475569; word-break: break-all; text-align: center; }
.ai-drop-hint { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ai-drop-icon { font-size: 36px; }
.ai-drop-text { color: #475569; font-size: 13px; text-align: center; }
.ai-drop-or { color: #94a3b8; font-size: 11px; margin: 4px 0; }
.ai-asin-input {
padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px;
font-family: ui-monospace, monospace; text-transform: uppercase; width: 100%; max-width: 320px;
margin-top: 6px;
}
/* Buttons */
.ai-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
border: 1px solid transparent; cursor: pointer; text-decoration: none;
transition: background .15s, transform .05s;
}
.ai-btn:active { transform: translateY(1px); }
.ai-btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; }
.ai-btn-primary:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af); }
.ai-btn-primary:disabled { background: #94a3b8; cursor: not-allowed; }
.ai-btn-ghost { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.ai-btn-ghost:hover { background: #e2e8f0; }
.ai-btn-lg { padding: 10px 20px; font-size: 14px; width: 100%; }
.ai-btn-sm { padding: 4px 10px; font-size: 11px; }
/* Action toggle */
.ai-action-row { display: flex; gap: 6px; margin-bottom: 8px; }
.ai-action-btn {
flex: 1; padding: 10px 8px; border-radius: 8px; border: 1px solid #cbd5e1;
background: #fff; color: #475569; font-size: 12px; font-weight: 600;
cursor: pointer; transition: all .15s;
}
.ai-action-btn:hover { border-color: #93c5fd; background: #eff6ff; }
.ai-action-btn.active {
background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff;
border-color: #1d4ed8; box-shadow: 0 1px 3px rgba(37,99,235,.3);
}
.ai-action-hint { font-size: 11px; color: #6b7280; line-height: 1.4; }
/* Style picker */
.ai-style-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px;
margin-bottom: 10px;
}
.ai-style-btn {
padding: 8px 10px; border: 1px solid #cbd5e1; background: #fff;
border-radius: 6px; font-size: 12px; color: #475569; cursor: pointer;
text-align: center; font-weight: 500; transition: all .15s;
}
.ai-style-btn:hover { border-color: #93c5fd; background: #eff6ff; color: #1e3a8a; }
.ai-style-btn.active {
background: #1e3a8a; color: #fff; border-color: #1e3a8a;
}
.ai-prompt {
width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px;
font-family: inherit; font-size: 12px; resize: vertical; min-height: 60px;
box-sizing: border-box;
}
.ai-prompt:focus { outline: none; border-color: #60a5fa; }
.hidden { display: none !important; }
/* Result */
.ai-go-row { margin-top: 8px; }
/* 2026-06-19: Remove BG panel — redesign chuyên nghiệp */
.ai-removebg-panel {
margin-top: 14px;
padding: 14px 16px !important;
background: linear-gradient(135deg, #fafbff 0%, #f3f4fb 100%) !important;
border: 1px solid #e0e7ef !important;
border-radius: 10px;
}
.ai-rmbg-head { margin-bottom: 10px; }
.ai-rmbg-title-row {
display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.ai-rmbg-icon {
font-size: 22px; line-height: 1;
display: inline-grid; place-items: center;
width: 32px; height: 32px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
border-radius: 8px; color: #fff;
}
.ai-rmbg-title {
margin: 0;
font-size: 14px; font-weight: 700;
color: #1e1b4b; letter-spacing: -.01em;
}
.ai-rmbg-badge {
margin-left: auto;
font-size: 10px; font-weight: 700;
padding: 3px 9px; border-radius: 12px;
letter-spacing: .03em; text-transform: uppercase;
}
.ai-rmbg-badge.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.ai-rmbg-badge.warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.ai-rmbg-sub {
font-size: 11px; color: #64748b;
padding-left: 40px;
}
.ai-rmbg-sub code {
background: #e0e7ef; color: #4338ca;
padding: 1px 6px; border-radius: 4px; font-size: 10px;
}
.ai-rmbg-alert {
background: #fef2f2; border: 1px solid #fecaca;
border-radius: 8px;
padding: 10px 12px; margin: 8px 0 10px;
font-size: 12px; color: #991b1b; line-height: 1.55;
}
.ai-rmbg-link { color: #b91c1c; font-weight: 600; }
.ai-rmbg-link:hover { text-decoration: underline; }
.ai-rmbg-info {
background: #fff; border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 8px 12px; margin: 8px 0 10px;
}
.ai-rmbg-info-row {
display: flex; align-items: center; gap: 8px;
padding: 4px 0;
font-size: 11.5px; color: #475569;
}
.ai-rmbg-info-row + .ai-rmbg-info-row { border-top: 1px solid #f1f5f9; }
.ai-rmbg-bullet {
display: inline-grid; place-items: center;
width: 18px; height: 18px;
background: #eef2ff; color: #4f46e5;
border-radius: 50%; font-size: 10px; font-weight: 700;
}
.ai-rmbg-cta { display: flex; }
.ai-btn-rmbg {
flex: 1;
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
padding: 11px 18px;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
color: #fff;
border: 0; border-radius: 10px;
font-size: 13.5px; font-weight: 700; letter-spacing: -.005em;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 4px 12px rgba(99,102,241,.25);
transition: transform .12s, box-shadow .12s, opacity .12s;
}
.ai-btn-rmbg:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 6px 16px rgba(99,102,241,.35);
}
.ai-btn-rmbg:active:not(:disabled) { transform: translateY(0); }
.ai-btn-rmbg:disabled { opacity: .55; cursor: not-allowed; }
.ai-btn-rmbg .ai-btn-icon { font-size: 16px; }
.ai-removebg-copy {
font-size: 12px;
line-height: 1.5;
color: #475569;
margin-bottom: 10px;
}
.ai-removebg-row {
display: flex;
gap: 10px;
align-items: end;
flex-wrap: wrap;
}
.ai-removebg-label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
color: #475569;
min-width: 220px;
flex: 1;
}
.ai-removebg-select {
padding: 8px 10px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 12px;
background: #fff;
color: #1e293b;
}
.ai-removebg-select:focus { outline: none; border-color: #60a5fa; }
.ai-removebg-hint {
margin-top: 10px;
font-size: 11px;
color: #6b7280;
line-height: 1.45;
}
.ai-result-panel { min-height: 260px; }
.ai-result-img {
max-width: 100%; max-height: 480px; border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,.12);
display: block; margin: 0 auto;
}
.ai-result-card img {
width: 100%; aspect-ratio: 1; object-fit: contain;
}
/* BG preview toggle (cho phép check transparent) */
.ai-result-header {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.ai-result-header .ai-section-title { margin: 0; }
.ai-bg-toggle {
display: inline-flex; gap: 0; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden;
}
.ai-bg-btn {
background: #fff; border: none; padding: 4px 8px; cursor: pointer;
font-size: 13px; color: #475569; border-right: 1px solid #e5e7eb;
}
.ai-bg-btn:last-child { border-right: none; }
.ai-bg-btn:hover { background: #f1f5f9; }
.ai-bg-btn.active { background: #2563eb; color: #fff; }
/* 4 nền preview area — apply background lên .ai-result-img + .ai-result-card img */
.ai-bg-check .ai-result-img,
.ai-bg-check .ai-result-card img {
background-color: #fff;
background-image:
linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.ai-bg-white .ai-result-img,
.ai-bg-white .ai-result-card img { background: #ffffff; }
.ai-bg-black .ai-result-img,
.ai-bg-black .ai-result-card img { background: #000000; }
.ai-bg-dark .ai-result-img,
.ai-bg-dark .ai-result-card img { background: #1f2937; }
.ai-result-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center; }
.ai-tag {
display: inline-block; padding: 3px 8px; border-radius: 4px;
background: #dbeafe; color: #1e40af; font-size: 11px; font-weight: 600;
}
.ai-tag-dim { background: #f1f5f9; color: #64748b; }
.ai-tag-err { background: #fee2e2; color: #b91c1c; }
.ai-prompt-debug { margin-top: 10px; }
.ai-prompt-debug summary { cursor: pointer; font-size: 11px; color: #6b7280; }
.ai-prompt-debug pre {
background: #f8fafc; border: 1px solid #e2e8f0; padding: 8px;
border-radius: 4px; font-size: 11px; line-height: 1.4;
white-space: pre-wrap; word-break: break-word; margin-top: 6px;
}
.ai-result-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.ai-spinner { padding: 60px 12px; text-align: center; color: #6b7280; font-size: 14px; }
/* 2026-06-15: AI loading animation — đẹp + nhẹ, pure CSS (không JS, không SVG) */
.ai-loading {
padding: 56px 16px 60px;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
color: #475569;
}
.ai-loading-orb {
width: 64px; height: 64px;
border-radius: 50%;
background: conic-gradient(from 0deg, #6366f1, #ec4899, #f59e0b, #10b981, #3b82f6, #6366f1);
position: relative;
animation: ai-orb-spin 1.6s linear infinite;
filter: drop-shadow(0 0 12px rgba(99, 102, 241, .35));
}
.ai-loading-orb::before {
content: '';
position: absolute; inset: 6px;
background: #fff;
border-radius: 50%;
}
.ai-loading-orb::after {
content: '✨';
position: absolute; inset: 0;
display: grid; place-items: center;
font-size: 22px;
animation: ai-orb-pulse 1.2s ease-in-out infinite;
}
@keyframes ai-orb-spin { to { transform: rotate(360deg); } }
@keyframes ai-orb-pulse {
0%, 100% { transform: scale(1); opacity: .85; }
50% { transform: scale(1.18); opacity: 1; }
}
.ai-loading-label {
font-size: 14px;
font-weight: 600;
color: #1e293b;
}
.ai-loading-sub {
font-size: 12px;
color: #94a3b8;
}
/* Shimmer progress bar — gradient di chuyển */
.ai-loading-bar {
width: 220px; height: 4px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.ai-loading-bar::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, #6366f1, transparent);
animation: ai-loading-bar-slide 1.4s ease-in-out infinite;
}
@keyframes ai-loading-bar-slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(220px); }
}
/* ===== 2026-06-16: Spy Live tab ===== */
.live-header {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; margin-bottom: 12px;
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 1px solid #93c5fd; border-radius: 8px;
}
.live-header strong { color: #1e3a8a; font-size: 14px; }
.live-updated { font-size: 11px; color: #64748b; flex: 1; }
.live-section {
margin-bottom: 14px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 12px 14px;
}
.live-section-title {
font-weight: 700; color: #1e293b; font-size: 13px;
padding-bottom: 8px; margin-bottom: 10px;
border-bottom: 1px solid #f1f5f9;
}
.live-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; flex-wrap: wrap; }
.live-meta { font-size: 12px; color: #475569; }
.live-sub { font-size: 11px; color: #64748b; }
.live-pill {
font-size: 11px; font-weight: 700;
padding: 3px 10px; border-radius: 12px;
letter-spacing: .02em;
}
.live-pill-run { background: #d1fae5; color: #047857; animation: live-pulse 2s infinite; }
.live-pill-idle { background: #f1f5f9; color: #64748b; }
.live-pill-disabled { background: #fef2f2; color: #991b1b; }
@keyframes live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .65; }
}
.live-table {
width: 100%; border-collapse: collapse; font-size: 12px;
}
.live-table thead th {
text-align: left; padding: 6px 8px;
background: #f8fafc; color: #475569;
font-size: 11px; font-weight: 600;
border-bottom: 1px solid #e2e8f0;
}
.live-table tbody td {
padding: 6px 8px;
border-bottom: 1px solid #f1f5f9;
}
.live-table tbody tr:hover { background: #f8fafc; }
.live-table code {
font-size: 11px; background: #f1f5f9; padding: 2px 6px;
border-radius: 3px; color: #1e293b;
}
.live-status {
font-size: 11px; font-weight: 600;
padding: 2px 6px; border-radius: 3px;
}
.live-status-ok { background: #d1fae5; color: #047857; }
.live-status-warn { background: #fef3c7; color: #92400e; }
.live-status-err { background: #fee2e2; color: #991b1b; }
.live-bar {
height: 8px; width: 100%;
background: #f1f5f9;
border-radius: 4px; overflow: hidden;
min-width: 100px;
}
.live-bar-fill {
height: 100%;
background: linear-gradient(90deg, #3b82f6, #6366f1);
transition: width .3s;
}
.live-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px; margin-bottom: 12px;
}
.live-kpi {
padding: 10px 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
}
.live-kpi-label { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.live-kpi-value { font-size: 22px; font-weight: 700; color: #1e3a8a; margin: 4px 0; }
.live-kpi-sub { font-size: 11px; color: #64748b; }
.live-spark-wrap { padding-top: 8px; border-top: 1px solid #f1f5f9; }
.live-spark-label { font-size: 11px; color: #64748b; margin-bottom: 4px; }
.live-spark {
display: flex; align-items: flex-end; height: 40px; gap: 2px;
}
.live-spark-bar {
flex: 1;
background: linear-gradient(180deg, #6366f1, #3b82f6);
border-radius: 2px 2px 0 0;
min-height: 2px;
cursor: help;
}
.live-spark-bar:hover { opacity: .7; }
/* ===== 2026-06-16: AI Credentials cards (Settings tab) ===== */
.cred-grid {
display: grid;
/* 2026-06-21: auto-fit (KHÔNG auto-fill) → khi section full-row, cred-cards stretch lấp đầy
full viền (2 card AI dàn đều; nhiều provider LLM xếp 1 hàng). */
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 12px;
margin-top: 12px;
}
.cred-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 14px;
display: flex; flex-direction: column; gap: 10px;
}
.cred-card-head {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: #1e293b;
flex-wrap: wrap;
}
.cred-badge {
font-size: 9px; font-weight: 700;
padding: 2px 6px; border-radius: 4px;
text-transform: uppercase; letter-spacing: .05em;
}
.cred-badge.free { background: #d1fae5; color: #047857; }
.cred-badge.db { background: #dbeafe; color: #1e40af; }
.cred-badge.env { background: #fef3c7; color: #92400e; }
.cred-cost {
font-size: 10px; color: #64748b;
font-family: monospace;
}
.cred-status-pill {
margin-left: auto;
font-size: 11px; font-weight: 700;
padding: 2px 8px; border-radius: 10px;
}
.cred-status-pill.ok { background: #d1fae5; color: #047857; }
.cred-status-pill.missing { background: #fee2e2; color: #991b1b; }
.cred-card-row {
display: flex; align-items: center; gap: 8px;
}
.cred-card-row label {
font-size: 11px; color: #475569; min-width: 60px; flex-shrink: 0;
}
.cred-card-row input,
.cred-card-row select {
flex: 1; font-size: 12px;
padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 6px;
font-family: monospace;
background: #fff;
}
.cred-card-row select {
cursor: pointer;
}
.cred-card-row { flex-wrap: wrap; }
.cred-card-row input[data-field="model-custom"] {
font-style: italic;
font-size: 11px;
}
.cred-card-actions {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
border-top: 1px solid #f1f5f9; padding-top: 10px;
}
.cred-card-actions .preset-btn { font-size: 11px; padding: 4px 10px; }
.cred-register-link {
font-size: 11px; color: #3b82f6; text-decoration: none;
margin-left: auto;
}
.cred-register-link:hover { text-decoration: underline; }
.cred-result { font-size: 11px; flex-basis: 100%; min-height: 14px; }
.cred-ok { color: #16a34a; font-weight: 600; }
.cred-err { color: #dc2626; font-weight: 600; }
.cred-note {
font-size: 11px; color: #64748b; font-style: italic;
padding: 6px 8px; background: #f8fafc; border-radius: 4px;
}
.cred-default-row {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px; margin-top: 10px;
background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 6px;
font-size: 12px;
}
.cred-default-row label { color: #475569; font-weight: 600; }
.cred-default-row select { padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; }
.cred-status { font-size: 11px; margin-left: 8px; }
/* ===== 2026-06-16: AI Keyword Suggestions panel (Sources tab) ===== */
.ai-sug-panel {
margin-top: 18px;
background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
border: 1px solid #cbd5e1;
border-radius: 10px;
overflow: hidden;
}
.ai-sug-header {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 12px 16px;
background: transparent;
border: none;
cursor: pointer;
font-size: 14px;
color: #1e293b;
text-align: left;
}
.ai-sug-header:hover { background: rgba(99,102,241,.06); }
.ai-sug-icon { font-size: 20px; }
.ai-sug-title { font-weight: 700; color: #1e3a8a; }
.ai-sug-meta { font-size: 11px; color: #64748b; margin-left: auto; }
.ai-sug-arrow { font-size: 12px; color: #94a3b8; }
.ai-sug-body { padding: 12px 16px 16px; border-top: 1px solid #e2e8f0; background: #fff; }
.ai-sug-controls {
display: flex; align-items: center; gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #f1f5f9;
margin-bottom: 12px;
}
.ai-sug-status { font-size: 11px; flex: 1; }
.ai-sug-list { display: flex; flex-direction: column; gap: 10px; }
.ai-sug-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.ai-sug-section-head {
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #64748b;
}
.ai-sug-section-stack { display: flex; flex-direction: column; gap: 10px; }
.ai-sug-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 12px 14px;
transition: box-shadow .15s, border-color .15s;
}
.ai-sug-card:hover { border-color: #6366f1; box-shadow: 0 2px 8px rgba(99,102,241,.1); }
.ai-sug-card-head {
display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.ai-sug-keyword { font-size: 14px; color: #1e293b; }
.ai-sug-cat {
font-size: 10px;
background: #e0e7ff; color: #4338ca;
padding: 2px 8px; border-radius: 10px;
text-transform: uppercase; font-weight: 700;
}
.ai-sug-conf {
margin-left: auto;
font-size: 11px; font-weight: 700;
padding: 2px 8px; border-radius: 10px;
}
.ai-sug-conf.high { background: #d1fae5; color: #047857; }
.ai-sug-conf.med { background: #fef3c7; color: #92400e; }
.ai-sug-conf.low { background: #fee2e2; color: #991b1b; }
.ai-sug-reasoning {
font-size: 12px; color: #475569; line-height: 1.5;
margin-bottom: 8px;
}
.ai-sug-evidence {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 10px;
}
.ai-sug-asin {
font-size: 10px; font-family: monospace;
background: #f1f5f9; color: #475569;
padding: 2px 6px; border-radius: 4px;
text-decoration: none;
}
.ai-sug-asin:hover { background: #dbeafe; color: #1e40af; }
/* 2026-06-22: thumbnail áo theo source ASIN (click mở to) */
.ai-sug-thumb {
width: 46px; height: 46px; object-fit: cover; border-radius: 6px;
border: 1px solid #e2e8f0; background: #f8fafc; cursor: zoom-in;
transition: transform .12s, box-shadow .12s;
}
.ai-sug-thumb:hover { transform: scale(1.12); box-shadow: 0 4px 12px rgba(0,0,0,.18); border-color: #6366f1; }
/* Popup xem áo to */
.asin-thumb-overlay {
position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.7);
display: flex; align-items: center; justify-content: center; padding: 24px;
}
.asin-thumb-overlay.hidden { display: none; }
.atp-box { position: relative; background: #fff; border-radius: 12px; padding: 14px; max-width: 92vw; max-height: 92vh; box-shadow: 0 20px 60px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 10px; }
.atp-img { max-width: 80vw; max-height: 74vh; object-fit: contain; border-radius: 8px; background: #f1f5f9; }
.atp-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(15,23,42,.7); color: #fff; font-size: 16px; cursor: pointer; }
.atp-close:hover { background: #ef4444; }
.atp-meta { text-align: center; }
.atp-title { font-size: 13px; font-weight: 600; color: #0f172a; margin-bottom: 4px; max-width: 600px; }
.atp-link { font-size: 12px; color: #4f46e5; text-decoration: none; }
.atp-link:hover { text-decoration: underline; }
/* Agent spec (.md) viewer/editor */
.ai-sug-md-wrap { margin-top: 12px; border-top: 1px solid #eef2ff; padding-top: 10px; }
.ai-sug-md-head { background: none; border: none; color: #475569; font-weight: 700; font-size: 12px; cursor: pointer; padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.ai-sug-md-head:hover { color: #4f46e5; }
.ai-sug-md-arrow { font-size: 9px; color: #94a3b8; }
.ai-sug-md-body { margin-top: 8px; }
.ai-sug-md-text { width: 100%; min-height: 320px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px; resize: vertical; }
.ai-sug-md-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.ai-sug-actions { display: flex; gap: 8px; }
.ai-sug-btn {
font-size: 12px; padding: 5px 12px; border-radius: 6px;
cursor: pointer; font-weight: 600;
border: 1px solid;
}
.ai-sug-btn.approve { background: #16a34a; color: #fff; border-color: #15803d; }
.ai-sug-btn.approve:hover { background: #15803d; }
.ai-sug-btn.reject { background: #fff; color: #dc2626; border-color: #fca5a5; }
.ai-sug-btn.reject:hover { background: #fef2f2; }
.ai-sug-history-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.ai-sug-history-row {
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
padding: 10px 12px;
}
.ai-sug-history-main {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.ai-sug-history-main strong {
color: #1e293b;
font-size: 13px;
}
.ai-sug-history-status {
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: .04em;
}
.ai-sug-history-status.approved { background: #dcfce7; color: #166534; }
.ai-sug-history-status.rejected { background: #fee2e2; color: #991b1b; }
.ai-sug-history-status.expired { background: #e5e7eb; color: #475569; }
.ai-sug-history-conf {
margin-left: auto;
font-size: 10px;
color: #64748b;
font-weight: 700;
}
.ai-sug-history-meta {
margin-top: 6px;
font-size: 11px;
color: #64748b;
}
/* AI image viewer modal — same pattern as detail/similar modal */
.ai-image-modal { z-index: 1100; }
.ai-image-modal .modal-body { max-width: 92vw; max-height: 92vh; padding: 12px; background: #0b0f17; }
.ai-image-modal .modal-close { color: #fff; background: rgba(0,0,0,.4); }
.ai-image-modal .modal-close:hover { background: rgba(0,0,0,.7); }
.ai-image-viewer {
display: flex; align-items: center; justify-content: center;
min-height: 60vh;
}
.ai-image-viewer img {
max-width: 88vw; max-height: 84vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.ai-image-modal .ai-image-actions {
position: absolute; bottom: 12px; left: 50%;
transform: translateX(-50%);
display: flex; gap: 8px;
}
.ai-image-modal .ai-image-actions a,
.ai-image-modal .ai-image-actions button {
background: rgba(255,255,255,.92);
color: #1e293b;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
border: none;
text-decoration: none;
cursor: pointer;
}
.ai-image-modal .ai-image-actions a:hover,
.ai-image-modal .ai-image-actions button:hover { background: #fff; }
/* 2026-06-16: Edit button — emphasized so user notices */
.ai-image-modal .ai-image-edit-btn {
background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
color: #fff !important;
padding: 7px 16px !important;
}
.ai-image-modal .ai-image-edit-btn:hover {
background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
}
.ai-image-modal .ai-image-edit-btn:disabled {
opacity: .6; cursor: wait;
}
.ai-error { padding: 16px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; color: #b91c1c; font-size: 13px; }
/* History */
.ai-history-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.ai-hist-card {
border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: #fff;
display: flex; flex-direction: column; transition: transform .1s;
}
.ai-hist-card:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.ai-hist-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #f8fafc; cursor: pointer; }
.ai-hist-broken {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
background: #fee2e2; color: #b91c1c; font-size: 11px;
}
.ai-hist-meta { padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.ai-hist-row1 { display: flex; flex-wrap: wrap; gap: 3px; }
.ai-hist-row1 .ai-tag { font-size: 10px; padding: 2px 5px; }
.ai-hist-sub { font-size: 10px; color: #94a3b8; }
.ai-hist-actions { display: flex; gap: 4px; }
.ai-mini-btn {
padding: 2px 8px; border: 1px solid #cbd5e1; background: #fff;
border-radius: 4px; font-size: 11px; cursor: pointer; color: #475569;
}
.ai-mini-btn:hover { background: #f1f5f9; }
/* Card AI icon */
.ai-card-btn {
position: absolute; bottom: 6px; left: 6px;
width: 26px; height: 26px; border-radius: 50%;
background: rgba(255,255,255,.92); border: 1px solid #cbd5e1;
font-size: 13px; cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .15s, transform .1s, background .15s;
z-index: 3;
}
.card:hover .ai-card-btn { opacity: 1; }
.ai-card-btn:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border-color: #1d4ed8; transform: scale(1.1);
}
/* Optional label hint */
.ai-optional { font-size: 11px; color: #94a3b8; font-weight: 500; }
.ai-prompt-hint { margin-top: 8px; font-size: 11px; color: #6b7280; line-height: 1.5; }
/* Toggle switches (Upscale / Remove BG) */
.ai-toggle {
display: flex; align-items: center; gap: 12px; padding: 10px;
border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; margin-bottom: 8px;
transition: all .15s; background: #fff;
}
.ai-toggle:hover { background: #f8fafc; border-color: #cbd5e1; }
.ai-toggle.active { border-color: #2563eb; background: #eff6ff; }
.ai-toggle input { display: none; }
.ai-toggle-track {
flex-shrink: 0; width: 36px; height: 20px; border-radius: 12px; background: #cbd5e1;
position: relative; transition: background .2s;
}
.ai-toggle.active .ai-toggle-track { background: #2563eb; }
.ai-toggle-knob {
position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
border-radius: 50%; background: #fff; transition: transform .2s;
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.ai-toggle.active .ai-toggle-knob { transform: translateX(16px); }
.ai-toggle-body { flex: 1; min-width: 0; }
.ai-toggle-label { font-size: 13px; font-weight: 600; color: #1e3a8a; }
.ai-toggle-sub { font-size: 11px; color: #6b7280; margin-top: 2px; line-height: 1.4; }
/* Batch controls */
.ai-style-auto { background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border-color: #86efac; color: #166534; font-weight: 700; }
.ai-style-auto.active { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; border-color: #15803d; }
.ai-batch-row {
margin-top: 12px; padding: 10px; border: 1px dashed #cbd5e1; border-radius: 8px;
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
background: #fafafa;
}
.ai-count-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; }
.ai-count-label select { padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 12px; }
.ai-batch-summary { font-size: 12px; color: #475569; }
/* Result grid (batch output) */
.ai-result-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.ai-result-card {
background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;
display: flex; flex-direction: column;
}
.ai-result-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #f8fafc; }
.ai-result-card-meta { padding: 6px 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.ai-result-card-actions { padding: 0 8px 8px; display: flex; gap: 4px; }
/* Secret input reveal/copy buttons */
.secret-input-row { display: flex; gap: 4px; align-items: stretch; }
.secret-input-row input { flex: 1; min-width: 0; }
.secret-eye-btn, .secret-copy-btn {
flex-shrink: 0; padding: 6px 10px; border: 1px solid #cbd5e1; background: #f8fafc;
border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1;
transition: background .15s;
}
.secret-eye-btn:hover, .secret-copy-btn:hover { background: #eff6ff; border-color: #93c5fd; }
/* Workers control plane */
.workers-list-wrap { margin: 12px 0; overflow-x: auto; }
.workers-perf-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 10px;
margin: 0 0 12px;
}
.workers-perf-card {
background: linear-gradient(180deg, #f8fbff, #eef6ff);
border: 1px solid #cfe2ff;
border-radius: 8px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 3px;
}
.workers-perf-card strong { color: #1d4ed8; font-size: 18px; line-height: 1.1; }
.workers-perf-card small { color: #64748b; font-size: 11px; }
.workers-perf-label { color: #475569; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.workers-list-loading, .workers-empty {
color: #6b7280; font-size: 13px; padding: 16px; text-align: center;
background: #f8fafc; border-radius: 6px;
}
.workers-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.workers-table th, .workers-table td { padding: 6px 8px; border-bottom: 1px solid #e5e7eb; text-align: left; }
.workers-table th { background: #f1f5f9; color: #475569; font-weight: 600; }
.workers-table td small { color: #94a3b8; font-size: 10px; }
.workers-mini-btn {
padding: 3px 8px; border: 1px solid #cbd5e1; background: #fff;
border-radius: 4px; font-size: 11px; cursor: pointer; margin-right: 3px;
}
.workers-mini-btn:hover { background: #eff6ff; border-color: #93c5fd; }
.workers-mini-del { color: #b91c1c; border-color: #fecaca; }
.workers-mini-del:hover { background: #fef2f2; border-color: #fca5a5; }
.workers-rename-btn {
background: none; border: none; cursor: pointer; padding: 1px 4px; font-size: 12px;
margin-left: 4px; opacity: 0.6; transition: opacity .15s;
}
.workers-rename-btn:hover { opacity: 1; }
.workers-ctrl-row { display: flex; flex-wrap: wrap; gap: 3px; }
.workers-ctrl-btn {
padding: 3px 7px; border: 1px solid #93c5fd; background: #eff6ff;
border-radius: 4px; font-size: 11px; cursor: pointer; color: #1e40af;
}
.workers-ctrl-btn:hover { background: #dbeafe; }
.workers-ctrl-warn { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.workers-ctrl-warn:hover { background: #fde68a; }
.workers-ctrl-danger { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.workers-ctrl-danger:hover { background: #fee2e2; }
.workers-ctrl-wake {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
border-color: #a78bfa; color: #5b21b6; font-weight: 700;
}
.workers-ctrl-wake:hover { background: linear-gradient(135deg, #ddd6fe, #c4b5fd); }
.workers-history-modal { padding: 16px; max-width: 720px; }
.workers-history-modal h4 { margin: 0 0 12px; color: #1e3a8a; }
.workers-history-modal table { font-size: 11px; }
.workers-history-modal td small { color: #94a3b8; }
.dot-online, .dot-offline {
display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle;
}
.dot-online { background: #16a34a; box-shadow: 0 0 4px rgba(34, 197, 94, .5); }
.dot-offline { background: #9ca3af; }
/* Grok model select row */
.grok-model-row { display: flex; gap: 6px; align-items: stretch; }
.grok-model-select { flex: 1; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; }
.grok-model-select:focus { outline: none; border-color: #60a5fa; }
.btn-icon { padding: 6px 10px; font-size: 14px; }
.dim { color: #94a3b8; }
/* ===== 2026-06-19: AI Orchestrator Settings panel ===== */
.orc-summary { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.orc-summary code { background: #eef2ff; padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.orc-toggles { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 12px; }
.orc-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.orc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; margin-bottom: 12px; }
.orc-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #475569; }
.orc-grid input, .orc-grid select { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 13px; }
.orc-md-details summary { padding: 6px 0; }
.orc-table { font-size: 12px; overflow-x: auto; }
.orc-tbl { width: 100%; border-collapse: collapse; }
.orc-tbl th, .orc-tbl td { padding: 5px 8px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.orc-tbl thead th { background: #f1f5f9; font-weight: 600; color: #334155; position: sticky; top: 0; }
.orc-tbl tr:hover { background: #fafbfc; }
.orc-tbl code { background: #f3f4f6; padding: 1px 5px; border-radius: 3px; font-size: 11px; }
/* ===== 2026-06-19: AI Redesign 3-tab + Bulk + Templates ===== */
/* 2026-06-20: segmented control nhỏ gọn — Single/Bulk không quan trọng, để mảnh, fit-content, canh trái */
.ai-tabs-nav { display: flex; align-self: flex-start; gap: 4px; background: #f1f5f9; padding: 4px; border-radius: 10px; margin-bottom: 16px; }
.ai-tab-btn {
display: inline-flex; flex-direction: row; gap: 7px; align-items: center; white-space: nowrap;
padding: 7px 16px; background: transparent; border: none; border-radius: 8px;
cursor: pointer; transition: all 0.15s; color: #475569;
}
.ai-tab-btn:hover { background: #e2e8f0; color: #1e293b; }
.ai-tab-btn.active { background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1); color: #1e3a8a; }
.ai-tab-btn .ai-tab-ico { font-size: 15px; line-height: 1; }
.ai-tab-btn .ai-tab-text { font-weight: 700; font-size: 13px; }
.ai-tab-btn .ai-tab-sub { display: none; }
.ai-tabpane.hidden { display: none; }
/* Bulk */
.ai-bulk-wrap { display: flex; flex-direction: column; gap: 16px; }
.ai-bulk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .ai-bulk-grid { grid-template-columns: 1fr; } }
.ai-bulk-textarea {
width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px;
font-family: ui-monospace, Menlo, monospace; font-size: 13px; resize: vertical;
}
.ai-bulk-counter { margin-top: 8px; color: #64748b; font-size: 13px; }
.ai-bulk-counter span { color: #1e3a8a; font-weight: 700; }
.ai-bulk-cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ai-bulk-cfg-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #475569; }
.ai-bulk-select { padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; }
.ai-bulk-sub-h { margin: 10px 0 6px; color: #1e3a8a; font-size: 13px; font-weight: 600; }
.ai-bulk-opt { display: flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 13px; cursor: pointer; }
.ai-bulk-actions { margin-top: 12px; }
.ai-bulk-jobs { display: flex; flex-direction: column; gap: 10px; }
.ai-bulk-job { background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #94a3b8; border-radius: 8px; padding: 12px; }
.ai-bulk-job-ok { border-left-color: #10b981; }
.ai-bulk-job-err { border-left-color: #ef4444; }
.ai-bulk-job-run { border-left-color: #3b82f6; }
.ai-bulk-job-queued { border-left-color: #f59e0b; }
.ai-bulk-job-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ai-bulk-job-id { font-weight: 700; color: #1e293b; }
.ai-bulk-job-status { text-transform: uppercase; font-size: 11px; font-weight: 700; color: #64748b; }
.ai-bulk-progress-bar { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.ai-bulk-progress-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); transition: width 0.3s; }
.ai-bulk-progress-text { margin-top: 4px; font-size: 12px; color: #64748b; }
.ai-bulk-job-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: #64748b; }
.ai-bulk-job-actions { display: flex; gap: 8px; margin-top: 10px; }
.ai-bulk-detail { margin-top: 10px; padding: 8px; background: white; border-radius: 6px; max-height: 240px; overflow-y: auto; }
.ai-bulk-item { display: flex; gap: 8px; align-items: center; padding: 5px 0; font-size: 12px; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.ai-bulk-item-done .ai-bulk-item-status { color: #10b981; font-weight: 600; }
.ai-bulk-item-error .ai-bulk-item-status { color: #ef4444; font-weight: 600; }
.ai-bulk-item-running .ai-bulk-item-status { color: #3b82f6; font-weight: 600; }
.ai-bulk-item-pos { color: #94a3b8; min-width: 30px; }
.ai-bulk-out-link { color: #6366f1; text-decoration: none; padding: 2px 6px; background: #eef2ff; border-radius: 3px; font-size: 11px; }
.ai-error-tag { color: #ef4444; font-size: 11px; background: #fee2e2; padding: 2px 5px; border-radius: 3px; }
/* Templates */
.ai-templates-wrap { display: flex; flex-direction: column; gap: 16px; }
.ai-templates-desc { color: #64748b; margin-bottom: 12px; }
.ai-templates-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .ai-templates-grid { grid-template-columns: 1fr; } }
.ai-template-card {
background: linear-gradient(135deg, #f8fafc, #f1f5f9); border: 1px solid #e2e8f0;
border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.ai-template-card h4 { margin: 0; color: #1e3a8a; font-size: 18px; }
.ai-template-card p { margin: 0; font-size: 13px; color: #475569; }
.ai-template-card code { background: #eef2ff; padding: 2px 6px; border-radius: 3px; font-size: 11px; }
.ai-template-icon { font-size: 32px; line-height: 1; }
.ai-template-list { margin: 8px 0; padding-left: 20px; font-size: 12px; color: #475569; }
.ai-howto { padding-left: 20px; color: #475569; line-height: 1.7; }
.ai-howto code { background: #f1f5f9; padding: 1px 5px; border-radius: 3px; font-size: 12px; }
/* ===== 2026-06-19: POD Calendar tab ===== */
.cal-container { max-width: 1280px; margin: 0 auto; padding: 16px; }
.cal-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.cal-title { color: #1e3a8a; font-size: 22px; margin: 0; }
.cal-sub { color: #64748b; font-weight: 500; font-size: 14px; }
.cal-agent-status { font-size: 12px; }
.cal-agent-info { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.cal-agent-pill { display: inline-block; padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 11px; text-transform: uppercase; }
.cal-agent-ok { background: #d1fae5; color: #047857; }
.cal-agent-error { background: #fee2e2; color: #b91c1c; }
.cal-agent-running { background: #dbeafe; color: #1e40af; }
.cal-agent-never { background: #f1f5f9; color: #64748b; }
.cal-agent-off { color: #94a3b8; font-style: italic; }
.cal-agent-sub { color: #64748b; }
.cal-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: #f8fafc; border: 1px solid #e2e8f0; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; }
.cal-tool-group { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cal-tool-group label { color: #475569; font-weight: 600; font-size: 12px; }
.cal-tool-group select { padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 13px; }
.cal-tool-right { margin-left: auto; }
.cal-view-btn { padding: 6px 12px; border: 1px solid #cbd5e1; background: white; border-radius: 6px; cursor: pointer; font-size: 12px; transition: all 0.15s; }
.cal-view-btn:hover { background: #eef2ff; border-color: #6366f1; }
.cal-view-btn.active { background: #6366f1; color: white; border-color: #6366f1; }
.cal-btn { padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; }
.cal-btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; }
.cal-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }
.cal-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
/* Upcoming panel */
.cal-upcoming-panel { background: linear-gradient(135deg, #fef3c7, #fde68a); border: 1px solid #f59e0b; border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.cal-section-title { color: #92400e; margin: 0 0 10px; font-size: 16px; }
.cal-upcoming-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cal-up-card { background: white; border-radius: 8px; padding: 12px; cursor: pointer; transition: all 0.15s; border-left: 4px solid #94a3b8; }
.cal-up-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.cal-up-urgent { border-left-color: #ef4444; }
.cal-up-soon { border-left-color: #f59e0b; }
.cal-up-plan { border-left-color: #3b82f6; }
.cal-up-far { border-left-color: #94a3b8; }
.cal-up-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.cal-up-weeks { font-weight: 700; color: #1e3a8a; font-size: 14px; }
.cal-up-roi { font-size: 11px; color: #b45309; font-weight: 700; }
.cal-up-name { font-weight: 700; color: #0f172a; font-size: 14px; }
.cal-up-date { color: #64748b; font-size: 11px; margin-top: 2px; }
.cal-up-niche { color: #475569; font-size: 11px; margin-top: 6px; line-height: 1.4; }
.cal-upcoming-empty { padding: 20px; background: #f8fafc; border-radius: 8px; text-align: center; color: #64748b; }
/* Month grid */
.cal-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.cal-month-card { background: white; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; }
.cal-month-title { color: #1e3a8a; margin: 0 0 8px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.cal-month-num { background: #eef2ff; color: #6366f1; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; }
.cal-month-events { display: flex; flex-direction: column; gap: 8px; }
/* Event card */
.cal-event-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; cursor: pointer; transition: all 0.15s; border-left: 4px solid #94a3b8; }
.cal-event-card:hover { background: #eef2ff; transform: translateX(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.cal-event-lead { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #f59e0b; border-left-color: #f59e0b; }
.cal-event-urgent { background: linear-gradient(135deg, #fee2e2, #fecaca); border-color: #ef4444; border-left-color: #ef4444; }
.cal-event-head { display: flex; justify-content: space-between; align-items: center; }
.cal-event-name { font-weight: 700; color: #0f172a; font-size: 14px; }
.cal-star { color: #f59e0b; font-size: 14px; }
.cal-event-roi { font-size: 11px; font-weight: 700; color: #6366f1; background: #eef2ff; padding: 2px 8px; border-radius: 10px; }
.cal-event-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 11px; color: #64748b; }
.cal-event-weeks { font-weight: 600; }
.cal-event-weeks.urgent { color: #b91c1c; }
.cal-event-warn { margin-top: 6px; padding: 5px 8px; background: #fef9c3; border-left: 3px solid #f59e0b; color: #92400e; font-size: 11px; font-weight: 600; border-radius: 3px; }
.cal-cat-tag { padding: 1px 6px; border-radius: 3px; font-size: 10px; text-transform: uppercase; font-weight: 700; }
.cal-cat-tag-major { background: #dbeafe; color: #1e40af; }
.cal-cat-tag-awareness { background: #fce7f3; color: #be185d; }
.cal-cat-tag-patriotic { background: #fee2e2; color: #b91c1c; }
.cal-cat-tag-cultural { background: #fef3c7; color: #b45309; }
.cal-cat-tag-religious { background: #ede9fe; color: #6d28d9; }
.cal-cat-tag-seasonal { background: #d1fae5; color: #047857; }
/* Detail modal */
.cal-detail { padding: 16px; max-width: 760px; }
.cal-detail-title { color: #1e3a8a; margin: 0 0 8px; font-size: 22px; display: flex; align-items: center; gap: 10px; }
.cal-detail-cat { font-size: 11px; padding: 3px 8px; border-radius: 4px; background: #eef2ff; color: #6366f1; text-transform: uppercase; }
.cal-detail-meta { color: #475569; line-height: 1.6; margin-bottom: 16px; }
.cal-detail h3 { color: #1e3a8a; margin: 20px 0 8px; font-size: 15px; }
.cal-detail h4 { color: #475569; margin: 14px 0 6px; font-size: 13px; }
.cal-detail-niche { background: #f8fafc; padding: 12px; border-radius: 8px; border-left: 4px solid #6366f1; color: #334155; }
.cal-detail-empty { color: #94a3b8; padding: 12px; background: #f8fafc; border-radius: 6px; }
.cal-seeds-list { display: flex; flex-direction: column; gap: 4px; }
.cal-seed { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 5px; font-size: 12px; }
.cal-seed-pushed { background: #d1fae5; }
.cal-seed-queued { background: #fef3c7; }
.cal-seed-kw { font-weight: 600; color: #0f172a; }
/* ===== 2026-06-20: AI Studio + Calendar Control Center redesign ===== */
.ai-container {
max-width: none;
margin: 0;
padding: 4px 12px 28px;
gap: 10px;
}
.ai-studio-hero {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.8fr);
gap: 14px;
padding: 7px 18px;
border: 1px solid #d9e5ff;
border-radius: 12px;
background:
radial-gradient(circle at top left, rgba(59, 130, 246, 0.15), transparent 30%),
linear-gradient(135deg, #ffffff 0%, #f7faff 48%, #eef4ff 100%);
box-shadow: 0 6px 18px rgba(30, 64, 175, 0.06);
}
.ai-studio-hero-copy { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.ai-studio-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
padding: 2px 9px;
border-radius: 999px;
background: #dbeafe;
color: #1d4ed8;
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ai-studio-title {
margin: 0;
font-size: 15px;
line-height: 1.2;
letter-spacing: -0.02em;
color: #0f172a;
}
.ai-studio-note {
margin: 0;
max-width: 90ch;
font-size: 11.5px;
line-height: 1.35;
color: #475569;
}
.ai-studio-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.ai-studio-stat {
min-height: 0;
padding: 4px 10px;
border: 1px solid rgba(148, 163, 184, .22);
border-radius: 9px;
background: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
gap: 1px;
justify-content: center;
}
.ai-studio-stat-k {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
color: #64748b;
font-weight: 700;
}
.ai-studio-stat-v {
font-size: 17px;
line-height: 1;
color: #1e3a8a;
}
.ai-single-shell {
display: grid;
grid-template-columns: minmax(360px, 430px) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.ai-sidebar-stack,
.ai-stage-stack {
min-width: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.ai-sidebar-stack .ai-panel,
.ai-stage-stack .ai-panel {
border-radius: 16px;
border-color: #dbe3ef;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
/* 2026-06-20 v5: bỏ sticky result panel theo yêu cầu user — kéo xuống không cố định */
.ai-stage-stack .ai-result-panel {
position: static;
}
.ai-result-panel {
min-height: 420px;
background:
linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.98));
}
.ai-history-panel { min-height: 220px; }
.ai-history-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.ai-history-sub {
font-size: 12px;
line-height: 1.6;
color: #64748b;
max-width: 68ch;
}
.ai-history-grid {
grid-template-columns: repeat(auto-fill, minmax(162px, 1fr));
gap: 12px;
}
.ai-hist-card {
border-radius: 12px;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.ai-hist-card img { aspect-ratio: 1 / 1; object-fit: cover; }
/* 2026-06-20 v6: tab nav nhỏ gọn — bỏ thẻ cao 86px, dùng segmented control mảnh */
.ai-tabs-nav {
position: static;
padding: 4px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #f1f5f9;
box-shadow: none;
margin-bottom: 4px;
}
.ai-tab-btn {
min-height: 0;
justify-content: center;
border-radius: 8px;
}
.ai-tab-btn.active {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.ai-result-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ai-result-card {
border-radius: 12px;
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.05);
}
.ai-result-card-actions {
padding: 0 10px 10px;
justify-content: flex-end;
}
.ai-templates-wrap .ai-panel,
.ai-bulk-pro-wrap {
border-radius: 18px;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}
.cal-container {
max-width: none;
margin: 0;
padding: 12px 14px 30px;
}
.cal-shell {
display: grid;
grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.cal-sidebar,
.cal-main { min-width: 0; }
.cal-sidebar-sticky {
position: sticky;
top: 78px;
display: flex;
flex-direction: column;
gap: 14px;
}
.cal-sidebar-card,
.cal-main-head,
.cal-month-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 18px;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}
.cal-sidebar-card { padding: 16px; }
.cal-sidebar-hero {
background:
radial-gradient(circle at top left, rgba(99, 102, 241, 0.18), transparent 30%),
linear-gradient(135deg, #ffffff 0%, #f8faff 42%, #eef2ff 100%);
}
.cal-sidebar-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
background: #eef2ff;
color: #4f46e5;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.cal-title { margin: 10px 0 6px; font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; }
.cal-sub {
display: block;
font-size: 13px;
line-height: 1.6;
color: #64748b;
}
.cal-sidebar-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 14px;
}
.cal-btn-ghost {
background: #f8fafc;
border: 1px solid #cbd5e1;
color: #475569;
}
.cal-btn-ghost:hover { background: #eef2ff; border-color: #93c5fd; }
.cal-side-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.cal-side-title {
margin: 0;
color: #0f172a;
font-size: 15px;
}
.cal-side-note {
color: #64748b;
font-size: 11px;
}
.cal-toolbar-sidebar {
display: grid;
gap: 10px;
padding: 0;
margin: 0;
border: none;
background: transparent;
}
.cal-view-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cal-stats-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.cal-stat-card {
min-height: 92px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid #e2e8f0;
background: linear-gradient(180deg, #f8fafc, #ffffff);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cal-stat-k {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: #64748b;
}
.cal-stat-v {
font-size: 24px;
line-height: 1;
color: #1e3a8a;
}
.cal-stat-sub {
font-size: 11px;
color: #64748b;
}
.cal-upcoming-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.cal-up-card {
width: 100%;
text-align: left;
border: 1px solid #e2e8f0;
}
.cal-up-card.selected {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.cal-spotlight-panel {
min-height: 280px;
background:
radial-gradient(circle at top right, rgba(251, 191, 36, 0.12), transparent 28%),
linear-gradient(180deg, #ffffff, #fffaf1);
}
.cal-spotlight-card {
display: flex;
flex-direction: column;
gap: 14px;
}
.cal-spotlight-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.cal-spotlight-name {
font-size: 20px;
line-height: 1.2;
font-weight: 800;
color: #0f172a;
}
.cal-spotlight-date {
margin-top: 4px;
font-size: 12px;
color: #64748b;
}
.cal-spotlight-roi {
flex-shrink: 0;
padding: 6px 10px;
border-radius: 999px;
background: #eef2ff;
color: #4f46e5;
font-size: 12px;
font-weight: 800;
}
.cal-spotlight-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cal-spotlight-chip {
padding: 3px 8px;
border-radius: 999px;
background: #f8fafc;
color: #475569;
font-size: 11px;
font-weight: 700;
}
.cal-spotlight-section { display: flex; flex-direction: column; gap: 8px; }
.cal-spotlight-section-title {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: #64748b;
}
.cal-spotlight-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cal-spotlight-loading,
.cal-spotlight-empty,
.cal-spotlight-error {
padding: 18px;
border-radius: 12px;
background: #f8fafc;
color: #475569;
line-height: 1.6;
}
.cal-spotlight-error {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
}
.cal-main {
display: flex;
flex-direction: column;
gap: 16px;
}
.cal-main-head {
padding: 18px 20px;
display: grid;
gap: 14px;
background:
radial-gradient(circle at top left, rgba(191, 219, 254, 0.28), transparent 32%),
linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}
.cal-main-eyebrow {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .08em;
color: #64748b;
}
.cal-main-title {
margin: 4px 0 6px;
font-size: 22px;
color: #0f172a;
}
.cal-main-note {
font-size: 13px;
line-height: 1.6;
color: #64748b;
}
.cal-priority-strip {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cal-priority-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid #dbeafe;
background: #f8fbff;
color: #1e3a8a;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.cal-priority-chip strong { color: #4f46e5; }
.cal-priority-chip.active {
background: #1e3a8a;
border-color: #1e3a8a;
color: #fff;
}
.cal-priority-chip.active strong { color: #bfdbfe; }
.cal-priority-empty {
padding: 8px 0;
color: #64748b;
font-size: 12px;
}
.cal-months {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
.cal-month-card { padding: 14px; }
.cal-event-card {
width: 100%;
text-align: left;
}
.cal-event-card.selected {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.cal-seeds-section.compact h4 {
margin: 10px 0 6px;
font-size: 12px;
}
.cal-seed {
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 6px 8px;
}
.cal-seed-src {
grid-column: 1 / -1;
font-size: 10px;
color: #64748b;
}
@media (max-width: 1180px) {
.ai-single-shell,
.cal-shell {
grid-template-columns: 1fr;
}
.ai-stage-stack .ai-result-panel,
.cal-sidebar-sticky,
.ai-tabs-nav {
position: static;
}
}
@media (max-width: 900px) {
.ai-studio-hero {
grid-template-columns: 1fr;
padding: 8px 16px;
}
.ai-studio-title { font-size: 15px; }
.ai-studio-stats,
.cal-stats-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 640px) {
.ai-container,
.cal-container {
padding-left: 8px;
padding-right: 8px;
}
.ai-studio-stats,
.cal-stats-grid {
grid-template-columns: 1fr;
}
.ai-tab-btn {
min-height: 0;
padding: 7px 12px;
}
.cal-sidebar-actions,
.cal-spotlight-actions {
flex-direction: column;
}
.cal-sidebar-actions .cal-btn,
.cal-spotlight-actions .cal-btn {
width: 100%;
}
}
.cal-seed-pri { font-size: 10px; color: #6366f1; font-weight: 700; }
.cal-seed-src { font-size: 10px; color: #64748b; }
.cal-seed-pushed .cal-seed-pushed,
.cal-seed-pushed { color: #047857; font-size: 11px; }
/* ===== 2026-06-19: Bulk Pipeline horizontal layout (per ASIN, 6 stages) ===== */
.ai-pipeline-table { display: flex; flex-direction: column; gap: 4px; background: #0f172a; border-radius: 8px; padding: 8px; overflow-x: auto; }
.ai-pipeline-head, .ai-pipeline-row { display: grid; grid-template-columns: 110px repeat(6, 1fr); gap: 6px; align-items: stretch; min-width: 880px; }
.ai-pipeline-head { padding: 6px 8px; color: #cbd5e1; font-weight: 700; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid #334155; }
.ai-pipeline-row { background: #1e293b; border-radius: 6px; padding: 6px; transition: background 0.15s; }
.ai-pipeline-row:hover { background: #334155; }
.ai-pipe-running { background: #1e3a5f; }
.ai-pipe-done { background: #1e293b; }
.ai-pipe-error { background: #4a1d1d; }
.ai-pipe-queued { background: #2d2d3a; opacity: 0.8; }
.ai-pipe-col { background: #0f172a; border-radius: 4px; padding: 6px; display: flex; align-items: center; justify-content: center; min-height: 90px; }
.ai-pipe-col-asin { background: transparent; padding: 8px 4px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; justify-content: center; }
.ai-pipe-col-asin code { color: #60a5fa; font-size: 12px; font-weight: 700; }
.ai-pipe-pos { color: #64748b; font-size: 10px; }
.ai-pipe-thumb img { max-width: 100%; max-height: 80px; border-radius: 3px; object-fit: contain; background: white; }
.ai-pipe-placeholder { color: #475569; font-size: 24px; opacity: 0.5; }
.ai-pipe-err { color: #ef4444; font-size: 24px; font-weight: 700; cursor: help; }
.ai-pipe-action-btn { background: #334155; color: #cbd5e1; border: none; border-radius: 4px; padding: 6px 10px; cursor: pointer; font-size: 16px; transition: all 0.15s; text-decoration: none; display: inline-block; }
.ai-pipe-action-btn:hover { background: #475569; color: white; transform: scale(1.1); }
.ai-pipe-seo { display: flex; flex-direction: column; gap: 4px; padding: 4px; width: 100%; }
.ai-pipe-seo-title { color: #fbbf24; font-size: 11px; font-weight: 600; line-height: 1.3; }
.ai-pipe-seo-tags { color: #94a3b8; font-size: 10px; line-height: 1.4; }
.ai-pipe-export { display: flex; gap: 6px; align-items: center; }
.ai-pipe-count { background: #6366f1; color: white; border-radius: 10px; padding: 1px 7px; font-size: 10px; font-weight: 700; }
/* ===== 2026-06-20: Bulk Pro pipeline (Auto Design Pro style) ===== */
.ai-bulk-pro-wrap { background: linear-gradient(135deg, #1e1b4b, #0f172a); border-radius: 12px; padding: 14px; color: #e2e8f0; }
/* Toolbar */
.ai-bulk-pro-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; background: rgba(15, 23, 42, 0.5); border: 1px solid #334155; border-radius: 10px; margin-bottom: 12px; }
.ai-pro-btn { padding: 7px 13px; border-radius: 6px; border: 1px solid #334155; background: #1e293b; color: #cbd5e1; cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s; }
.ai-pro-btn:hover { background: #334155; color: white; transform: translateY(-1px); }
.ai-pro-btn-primary { background: linear-gradient(135deg, #8b5cf6, #6366f1); border-color: #6366f1; color: white; padding: 8px 16px; font-weight: 700; }
.ai-pro-btn-primary:hover { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); }
.ai-pro-btn-refresh { background: #1e3a5f; }
.ai-pro-btn-export { background: #1e4d3f; }
.ai-pro-btn-ghost { background: transparent; border-color: #475569; }
.ai-pro-toolbar-sep { width: 1px; height: 24px; background: #334155; }
.ai-pro-toolbar-input { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #94a3b8; }
.ai-pro-toolbar-input input { width: 50px; padding: 4px 6px; background: #0f172a; color: #e2e8f0; border: 1px solid #334155; border-radius: 4px; font-size: 13px; }
.ai-pro-toolbar-grow { flex: 1; }
/* Create form (collapsible) */
.ai-bulk-pro-create { background: rgba(30, 41, 59, 0.6); border: 1px solid #334155; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.ai-bulk-pro-create summary { cursor: pointer; font-weight: 700; color: #e2e8f0; font-size: 14px; user-select: none; }
.ai-bulk-counter-inline { float: right; font-weight: 400; color: #94a3b8; font-size: 12px; }
.ai-bulk-create-body { padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ai-bulk-create-body .ai-bulk-textarea { background: #0f172a; color: #e2e8f0; border-color: #334155; }
.ai-bulk-create-config { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ai-bulk-create-config label { display: flex; flex-direction: column; font-size: 11px; color: #94a3b8; gap: 3px; }
.ai-bulk-select { padding: 6px 8px; background: #0f172a; color: #e2e8f0; border: 1px solid #334155; border-radius: 5px; font-size: 13px; }
.ai-bulk-styles-wrap { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.ai-bulk-styles-lbl { font-size: 11px; color: #94a3b8; padding-right: 4px; }
.ai-style-pill { background: #1e293b; color: #cbd5e1; border: 1px solid #334155; padding: 4px 9px; border-radius: 12px; font-size: 11px; cursor: pointer; }
.ai-style-pill.active { background: #6366f1; color: white; border-color: #6366f1; }
/* Pipeline 6-col grid */
.ai-pro-pipeline { background: rgba(15, 23, 42, 0.4); border: 1px solid #334155; border-radius: 8px; overflow-x: auto; }
.ai-pro-pipe-cols-head { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 6px; min-width: 1200px; }
.ai-pro-stage-head { background: rgba(30, 41, 59, 0.8); border: 1px solid #334155; border-radius: 6px; padding: 10px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; }
.ai-pro-stage-head.disabled { opacity: 0.4; }
.ai-pro-stage-title-row { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid #334155; }
.ai-pro-stage-check { width: 14px; height: 14px; accent-color: #6366f1; }
.ai-pro-stage-num { color: #94a3b8; font-weight: 700; font-size: 14px; }
.ai-pro-stage-ico { font-size: 16px; }
.ai-pro-stage-title { color: #e2e8f0; font-weight: 700; font-size: 13px; flex: 1; }
.ai-pro-stage-count { color: #6366f1; background: rgba(99, 102, 241, 0.15); padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; }
.ai-pro-stage-config { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
/* Radio row */
.ai-pro-radio-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-pro-radio { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: #0f172a; border: 1px solid #334155; border-radius: 4px; cursor: pointer; font-size: 11px; color: #cbd5e1; }
.ai-pro-radio.active { background: #1e3a8a; border-color: #6366f1; color: white; }
.ai-pro-radio input { width: 12px; height: 12px; accent-color: #6366f1; }
/* Checkbox row */
.ai-pro-checkbox-row { display: flex; gap: 4px; flex-wrap: wrap; }
.ai-pro-checkbox { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #cbd5e1; cursor: pointer; }
.ai-pro-checkbox input { accent-color: #6366f1; }
/* Slider row */
.ai-pro-slider-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #94a3b8; }
.ai-pro-slider-row input[type="range"] { flex: 1; accent-color: #6366f1; }
.ai-pro-resize-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-pro-resize-row label { color: #cbd5e1; font-size: 11px; display: flex; align-items: center; gap: 4px; }
.ai-pro-inp { padding: 5px 8px; background: #0f172a; color: #e2e8f0; border: 1px solid #334155; border-radius: 4px; font-size: 12px; width: 100%; }
.ai-pro-inp-small { width: 55px; padding: 3px 5px; background: #0f172a; color: #e2e8f0; border: 1px solid #334155; border-radius: 4px; font-size: 12px; }
.ai-pro-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ai-pro-btn-mini { padding: 4px 8px; font-size: 11px; background: #1e293b; color: #cbd5e1; border: 1px solid #334155; border-radius: 4px; cursor: pointer; }
.ai-pro-adv summary { cursor: pointer; color: #94a3b8; font-size: 11px; }
.ai-pro-hint { color: #64748b; font-size: 10px; }
/* Pipeline body — per ASIN row */
.ai-pro-pipe-body { padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 1200px; }
.ai-pro-pipe-empty { padding: 30px; text-align: center; color: #64748b; font-style: italic; }
.ai-pro-pipe-job-label { font-size: 11px; color: #94a3b8; font-weight: 600; padding: 4px 8px; }
.ai-pro-pipe-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 6px; background: rgba(30, 41, 59, 0.5); border: 1px solid #334155; border-radius: 6px; transition: all 0.15s; }
.ai-pro-pipe-row:hover { background: rgba(51, 65, 85, 0.6); border-color: #475569; }
.ai-pro-row-running { border-left: 3px solid #3b82f6; }
.ai-pro-row-done { border-left: 3px solid #10b981; }
.ai-pro-row-error { border-left: 3px solid #ef4444; }
.ai-pro-row-queued { border-left: 3px solid #f59e0b; }
.ai-pro-pipe-cell { background: #0f172a; border-radius: 4px; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90px; }
.ai-pro-cell-thumb img { max-width: 100%; max-height: 80px; object-fit: contain; border-radius: 3px; background: white; }
.ai-pro-cell-label { margin-top: 3px; font-size: 9px; color: #64748b; }
.ai-pro-cell-label code { background: transparent; color: #60a5fa; }
.ai-pro-cell-placeholder { color: #475569; font-size: 22px; opacity: 0.5; }
.ai-pro-cell-err { color: #ef4444; font-size: 22px; font-weight: 700; cursor: help; }
.ai-pro-cell-btn { background: #334155; color: #cbd5e1; border: none; border-radius: 4px; padding: 5px 9px; cursor: pointer; font-size: 14px; transition: all 0.15s; text-decoration: none; display: inline-block; }
.ai-pro-cell-btn:hover { background: #475569; color: white; transform: scale(1.1); }
.ai-pro-cell-seo { padding: 4px; width: 100%; display: flex; flex-direction: column; gap: 3px; }
.ai-pro-cell-title { color: #fbbf24; font-size: 10px; font-weight: 600; line-height: 1.3; }
.ai-pro-cell-tags { color: #94a3b8; font-size: 9px; line-height: 1.4; }
.ai-pro-cell-export { display: flex; gap: 4px; align-items: center; }
.ai-pro-cell-count { background: #6366f1; color: white; border-radius: 8px; padding: 1px 6px; font-size: 9px; font-weight: 700; }
.ai-pro-jobs-section { margin-top: 14px; }
.ai-pro-section-h { color: #cbd5e1; font-size: 14px; margin: 0 0 8px; }
/* ===== 2026-06-20 v2: BULK PRO LIGHT THEME + FULL WIDTH (override dark) ===== */
.ai-bulk-pro-wrap {
background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%) !important;
border: 1px solid #e2e8f0;
color: #0f172a !important;
padding: 16px;
margin: 0 -12px; /* gần full site width — break out main padding */
border-radius: 0;
min-height: 70vh;
}
@media (min-width: 1400px) {
.ai-bulk-pro-wrap { margin: 0 -32px; padding: 20px 32px; }
}
/* Toolbar light */
.ai-bulk-pro-toolbar {
background: white !important;
border: 1px solid #cbd5e1 !important;
padding: 10px 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ai-pro-btn {
background: #f1f5f9 !important;
color: #1e293b !important;
border: 1px solid #cbd5e1 !important;
}
.ai-pro-btn:hover { background: #e2e8f0 !important; color: #0f172a !important; }
.ai-pro-btn-primary {
background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
color: white !important;
border-color: #6366f1 !important;
}
.ai-pro-btn-primary:hover { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); }
.ai-pro-btn-refresh { background: #dbeafe !important; color: #1e40af !important; border-color: #93c5fd !important; }
.ai-pro-btn-export { background: #d1fae5 !important; color: #047857 !important; border-color: #6ee7b7 !important; }
.ai-pro-btn-ghost { background: transparent !important; border-color: #cbd5e1 !important; color: #475569 !important; }
.ai-pro-toolbar-sep { background: #cbd5e1 !important; }
.ai-pro-toolbar-input { color: #475569 !important; }
.ai-pro-toolbar-input input {
background: white !important; color: #0f172a !important; border-color: #cbd5e1 !important;
}
/* Create form */
.ai-bulk-pro-create {
background: white !important;
border: 1px solid #cbd5e1 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ai-bulk-pro-create summary { color: #1e3a8a !important; }
.ai-bulk-counter-inline { color: #64748b !important; }
.ai-bulk-create-body .ai-bulk-textarea {
background: white !important; color: #0f172a !important; border-color: #cbd5e1 !important;
}
.ai-bulk-create-config label { color: #475569 !important; }
.ai-bulk-select {
background: white !important; color: #0f172a !important; border-color: #cbd5e1 !important;
}
.ai-bulk-styles-lbl { color: #475569 !important; }
.ai-style-pill {
background: #f1f5f9 !important; color: #475569 !important; border-color: #cbd5e1 !important;
}
.ai-style-pill.active { background: #6366f1 !important; color: white !important; border-color: #6366f1 !important; }
/* Pipeline 6-col grid LIGHT */
.ai-pro-pipeline {
background: white !important;
border: 1px solid #cbd5e1 !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ai-pro-pipe-cols-head { padding: 8px; }
.ai-pro-stage-head {
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
border: 1px solid #cbd5e1 !important;
color: #0f172a !important;
min-height: 220px;
}
.ai-pro-stage-title-row { border-bottom-color: #cbd5e1 !important; }
.ai-pro-stage-num { color: #6366f1 !important; }
.ai-pro-stage-title { color: #1e3a8a !important; }
.ai-pro-stage-count { background: #eef2ff !important; color: #6366f1 !important; }
.ai-pro-stage-config { color: #475569 !important; }
.ai-pro-radio {
background: white !important; color: #475569 !important; border-color: #cbd5e1 !important;
}
.ai-pro-radio.active { background: #6366f1 !important; color: white !important; border-color: #6366f1 !important; }
.ai-pro-checkbox { color: #475569 !important; }
.ai-pro-slider-row { color: #475569 !important; }
.ai-pro-resize-row label { color: #475569 !important; }
.ai-pro-inp, .ai-pro-inp-small {
background: white !important; color: #0f172a !important; border-color: #cbd5e1 !important;
}
.ai-pro-btn-mini {
background: #f1f5f9 !important; color: #1e293b !important; border-color: #cbd5e1 !important;
}
.ai-pro-hint { color: #94a3b8 !important; }
.ai-pro-adv summary { color: #64748b !important; }
/* Pipeline body */
.ai-pro-pipe-body { padding: 8px; }
.ai-pro-pipe-empty { color: #94a3b8 !important; }
.ai-pro-pipe-job-label { color: #475569 !important; }
.ai-pro-pipe-row {
background: #fafbfc !important;
border: 1px solid #e2e8f0 !important;
}
.ai-pro-pipe-row:hover { background: #f1f5f9 !important; border-color: #cbd5e1 !important; }
.ai-pro-pipe-cell {
background: white !important;
border: 1px solid #e2e8f0;
min-height: 100px;
}
.ai-pro-cell-label code { color: #1e40af !important; }
.ai-pro-cell-placeholder { color: #cbd5e1 !important; }
.ai-pro-cell-btn { background: #f1f5f9 !important; color: #1e293b !important; }
.ai-pro-cell-btn:hover { background: #6366f1 !important; color: white !important; }
.ai-pro-cell-title { color: #1e3a8a !important; }
.ai-pro-cell-tags { color: #64748b !important; }
.ai-pro-section-h { color: #1e3a8a !important; }
/* Stage 1 input full row layout — render input thumbs grid theo từng ASIN */
.ai-pro-pipe-cols-head { grid-template-columns: 1.2fr 1.2fr 1.1fr 1.1fr 1.4fr 1fr !important; }
.ai-pro-pipe-row { grid-template-columns: 1.2fr 1.2fr 1.1fr 1.1fr 1.4fr 1fr !important; }
/* ===================================================================
2026-06-20 v3: CLEAN REBUILD — Calendar + Bulk theo design system app
- settings-section base: white card, border slate-200, radius 10
- Header: navy h3 + slate body
- Buttons: btn-save (green) + btn-test (slate)
=================================================================== */
/* ===== Calendar v3 ===== */
/* 2026-06-21: Calendar redesign — override .settings-container grid (calendar stack dọc, chuyên nghiệp) */
.cal-v3-container {
display: flex !important; flex-direction: column; gap: 10px;
grid-template-columns: none !important;
max-width: none; margin: 0; padding: 8px 18px 16px; /* 2026-06-21: full site, hero kéo sát trên */
}
.cal-v3-container > .settings-section { margin: 0; }
/* Hero gradient chuyên nghiệp */
.cal-v3-hero {
background: linear-gradient(135deg, #1e3a8a 0%, #4f46e5 55%, #7c3aed 100%) !important;
border: none !important; color: #fff; box-shadow: 0 8px 24px rgba(79,70,229,.25);
}
.cal-v3-hero h3, .cal-v3-hero p { color: #fff !important; }
.cal-v3-hero p { opacity: .9; }
/* Stat cards + month cards — accent + shadow cho chuyên nghiệp */
.cal-v3-stat { border-left: 3px solid #6366f1; transition: transform .15s, box-shadow .15s; }
.cal-v3-stat:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(99,102,241,.14); }
.cal-v3-month { box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: box-shadow .15s; }
.cal-v3-month:hover { box-shadow: 0 6px 18px rgba(0,0,0,.09); }
.cal-v3-agent-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px; margin-top: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 12px; color: #475569; }
.cal-v3-agent-pill { padding: 2px 8px; border-radius: 4px; font-weight: 700; font-size: 11px; text-transform: uppercase; }
.cal-v3-agent-pill.ok { background: #d1fae5; color: #047857; }
.cal-v3-agent-pill.err { background: #fee2e2; color: #b91c1c; }
.cal-v3-agent-pill.run { background: #dbeafe; color: #1e40af; }
.cal-v3-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cal-v3-stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.cal-v3-stat-k { font-size: 11px; color: #64748b; text-transform: uppercase; font-weight: 600; letter-spacing: 0.03em; }
.cal-v3-stat strong { font-size: 22px; color: #1e3a8a; font-weight: 800; }
.cal-v3-stat small { color: #94a3b8; font-size: 11px; }
/* 2026-06-21: toolbar 1 hàng, inline, dồn trái đều */
.cal-v3-toolbar { padding: 8px 14px !important; }
.cal-v3-tool-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: flex-start; }
.cal-v3-tool-grp { display: flex; flex-direction: row; align-items: center; gap: 7px; font-size: 12px; color: #475569; font-weight: 700; }
.cal-v3-tool-grp select { padding: 6px 9px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; min-width: 110px; }
.cal-v3-view-row { display: flex; gap: 4px; flex-wrap: wrap; }
.cal-v3-view { background: #f3f4f6; border: 1px solid #d1d5db; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; color: #475569; font-weight: 600; }
.cal-v3-view:hover { background: #e5e7eb; color: #1e3a8a; }
.cal-v3-view.active { background: #1e3a8a; border-color: #1e3a8a; color: white; }
/* 2026-06-21: wrapper là block — mỗi view tự mang lưới riêng */
.cal-v3-months { display: block; }
.cal-ov-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.cal-v3-month { padding: 14px; display: flex; flex-direction: column; max-height: 420px; }
.cal-v3-month .cal-v3-evt-grid { overflow-y: auto; flex: 1; padding-right: 4px; }
.cal-v3-month .cal-v3-evt-grid::-webkit-scrollbar { width: 6px; }
.cal-v3-month .cal-v3-evt-grid::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.cal-v3-month-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-shrink: 0; }
.cal-v3-month-head h3 { margin: 0; color: #1e3a8a; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.cal-v3-month-num { background: #eef2ff; color: #6366f1; padding: 2px 7px; border-radius: 4px; font-size: 11px; }
.cal-v3-month-count { font-size: 11px; color: #64748b; }
.cal-v3-evt-grid, .cal-v3-evt-flat { display: flex; flex-direction: column; gap: 8px; }
.cal-v3-evt-flat { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cal-v3-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; cursor: pointer; border-left: 3px solid #cbd5e1; transition: all 0.15s; }
.cal-v3-card:hover { background: #eef2ff; transform: translateX(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.cal-v3-card.urgent { border-left-color: #ef4444; }
.cal-v3-card.today { border-left-color: #f59e0b; background: #fef9c3; }
.cal-v3-card.past { opacity: 0.55; }
.cal-v3-card-head { display: flex; justify-content: space-between; align-items: center; }
.cal-v3-name { font-weight: 700; color: #0f172a; font-size: 13px; }
.cal-v3-star { color: #f59e0b; font-size: 13px; }
.cal-v3-roi { font-size: 11px; font-weight: 700; color: #6366f1; background: #eef2ff; padding: 2px 8px; border-radius: 10px; }
.cal-v3-card-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 11px; color: #64748b; }
.cal-v3-days { font-weight: 700; color: #1e3a8a; }
.cal-v3-cat { padding: 1px 6px; border-radius: 3px; font-size: 10px; text-transform: uppercase; font-weight: 700; }
.cal-v3-cat.cat-major { background: #dbeafe; color: #1e40af; }
.cal-v3-cat.cat-awareness { background: #fce7f3; color: #be185d; }
.cal-v3-cat.cat-patriotic { background: #fee2e2; color: #b91c1c; }
.cal-v3-cat.cat-cultural { background: #fef3c7; color: #b45309; }
.cal-v3-cat.cat-religious { background: #ede9fe; color: #6d28d9; }
.cal-v3-cat.cat-seasonal { background: #d1fae5; color: #047857; }
.cal-v3-badges { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }
.cal-v3-badge { font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 700; }
.cal-v3-badge.today { background: #f59e0b; color: white; }
.cal-v3-badge.urgent { background: #ef4444; color: white; }
.cal-v3-badge.inpush { background: #10b981; color: white; }
.cal-v3-badge.lead { background: #fbbf24; color: #78350f; }
.cal-v3-modal { padding: 16px; max-width: 800px; }
.cal-v3-modal-h { color: #1e3a8a; margin: 0 0 8px; font-size: 22px; display: flex; align-items: center; gap: 10px; }
.cal-v3-modal-cat { font-size: 11px; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; font-weight: 700; }
.cal-v3-modal-meta { color: #475569; line-height: 1.6; margin-bottom: 14px; font-size: 13px; }
.cal-v3-yr-pill { display: inline-block; margin-right: 6px; padding: 2px 8px; background: #eef2ff; color: #6366f1; border-radius: 4px; font-size: 11px; font-weight: 600; }
.cal-v3-modal h3 { color: #1e3a8a; margin: 14px 0 6px; font-size: 14px; }
.cal-v3-modal h4 { color: #475569; margin: 10px 0 6px; font-size: 12px; }
.cal-v3-niche { background: #f8fafc; padding: 10px 12px; border-radius: 6px; border-left: 3px solid #6366f1; color: #334155; font-size: 13px; }
.cal-v3-seeds { display: flex; flex-direction: column; gap: 3px; }
.cal-v3-seed { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 4px; font-size: 12px; }
.cal-v3-seed.pushed { background: #d1fae5; }
.cal-v3-seed.queued { background: #fef3c7; }
.cal-v3-seed code { background: transparent; color: #0f172a; font-weight: 600; flex: 1; }
.cal-v3-seed-pri { color: #6366f1; font-size: 11px; font-weight: 700; }
/* 2026-06-23: seed per-chip actions + bulk-add/push tools */
.cal-v3-seed .cal-seed-push,
.cal-v3-seed .cal-seed-del {
border: 1px solid #cbd5e1; background: #fff; border-radius: 4px; cursor: pointer;
font-size: 11px; line-height: 1; padding: 3px 6px; color: #334155; opacity: .55; transition: all .12s;
}
.cal-v3-seed:hover .cal-seed-push, .cal-v3-seed:hover .cal-seed-del { opacity: 1; }
.cal-v3-seed .cal-seed-push:hover { background: #2563eb; color: #fff; border-color: #1d4ed8; }
.cal-v3-seed .cal-seed-del { color: #b91c1c; font-weight: 700; }
.cal-v3-seed .cal-seed-del:hover { background: #dc2626; color: #fff; border-color: #b91c1c; }
.cal-seed-tools { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; margin: 6px 0 12px; }
.cal-seed-addrow { display: flex; gap: 8px; align-items: flex-start; }
.cal-seed-add-input { flex: 1; font-size: 12px; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; resize: vertical; font-family: inherit; }
.cal-seed-pushrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.cal-push-btn { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
.cal-push-btn:hover { background: #1d4ed8; }
.cal-seed-status { font-size: 11px; flex: 1; min-width: 140px; }
.cal-seed-status .ok { color: #15803d; }
.cal-seed-status .err { color: #dc2626; }
.cal-seed-hint { font-size: 10.5px; color: #94a3b8; margin-top: 8px; line-height: 1.4; }
.cal-seed-hint code { background: #eef2ff; color: #4338ca; padding: 1px 4px; border-radius: 3px; }
/* 2026-06-24: per-holiday Trend Agent run + push-window config */
.cal-trend-run-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.cal-trend-run-hint { font-size: 11px; color: #64748b; }
.cal-pushwin { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #475569; background: #eef2ff; border: 1px solid #dbe3ff; border-radius: 8px; padding: 3px 8px; }
.cal-pushwin input { width: 40px; font-size: 11px; padding: 2px 4px; border: 1px solid #cbd5e1; border-radius: 5px; text-align: center; }
.cal-pushwin-status { font-size: 11px; }
.cal-pushwin-status.ok { color: #15803d; }
.cal-pushwin-status.err { color: #dc2626; }
/* ===== Month-grid (calendar thật kiểu Google) — 2026-06-21 ===== */
.cal-grid-section { padding: 16px 18px 20px; grid-column: 1 / -1; width: 100%; }
.cal-grid-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cal-grid-title { font-size: 22px; font-weight: 800; color: #0f172a; letter-spacing: -0.3px; min-width: 230px; }
.cal-nav-btn { width: 38px; height: 38px; border: 1px solid #e2e8f0; background: #fff; border-radius: 9px; font-size: 20px; line-height: 1; color: #334155; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; justify-content: center; }
.cal-nav-btn:hover { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
.cal-nav-btn.cal-nav-today { width: auto; padding: 0 16px; font-size: 13px; font-weight: 700; margin-left: auto; }
.cal-grid-banners { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: .5px; padding: 4px 0 8px; }
.cal-cell { min-height: 148px; background: #fff; border: 1px solid #eef2f6; border-radius: 10px; padding: 8px 8px 6px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.cal-cell:hover { border-color: #c7d2fe; box-shadow: 0 4px 14px rgba(30,58,138,.07); }
.cal-cell-empty { background: #fafbfc; border-color: #f1f5f9; box-shadow: none; }
.cal-cell-empty:hover { box-shadow: none; }
.cal-cell-num { font-size: 13px; font-weight: 700; color: #64748b; line-height: 1; align-self: flex-start; }
.cal-cell-today { border-color: #1e3a8a; box-shadow: 0 0 0 1px #1e3a8a inset; }
.cal-cell-today .cal-cell-num { background: #1e3a8a; color: #fff; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.cal-cell-evts { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; flex: 1; }
.cal-cell-evts::-webkit-scrollbar { width: 4px; }
.cal-cell-evts::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.cal-chip { font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid currentColor; transition: filter .12s; line-height: 1.25; }
.cal-chip:hover { filter: brightness(.94); }
.cal-chip-ml { font-weight: 700; }
.cal-chip.cat-major { background: #dbeafe; color: #1e40af; }
.cal-chip.cat-awareness { background: #fce7f3; color: #be185d; }
.cal-chip.cat-patriotic { background: #fee2e2; color: #b91c1c; }
.cal-chip.cat-cultural { background: #fef3c7; color: #b45309; }
.cal-chip.cat-religious { background: #ede9fe; color: #6d28d9; }
.cal-chip.cat-seasonal { background: #d1fae5; color: #047857; }
.cal-chip.cat-other { background: #f1f5f9; color: #475569; }
@media (max-width: 720px) {
.cal-cell { min-height: 78px; }
.cal-chip { font-size: 10px; padding: 2px 5px; }
.cal-grid-title { font-size: 18px; min-width: 0; }
}
/* ===== Hero slim + stats nhỏ (2026-06-21: 2 bảng trên không quan trọng → gọn 1 dòng) ===== */
/* 2026-06-21: hero 1 HÀNG NGANG, nhỏ, không wrap (scroll-x nếu chật) */
.cal-v3-hero-slim { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding: 5px 12px !important; scrollbar-width: thin; }
.cal-v3-hero-slim::-webkit-scrollbar { height: 4px; }
.cal-v3-hero-slim::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 2px; }
.cal-v3-hero-slim > * { flex-shrink: 0; }
.cal-v3-hero-slim .settings-icon { font-size: 15px; }
.cal-v3-hero-title { display: flex; align-items: baseline; gap: 6px; line-height: 1.2; white-space: nowrap; }
.cal-v3-hero-title b { font-size: 12px; font-weight: 800; }
.cal-v3-hero-meta { font-size: 10px; opacity: .85; white-space: nowrap; }
.cal-v3-hero-stats { display: flex; gap: 5px; flex-wrap: nowrap; margin-left: auto; }
.cal-v3-mini-stat { background: rgba(255,255,255,.16); border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.cal-v3-mini-stat b { font-size: 11px; font-weight: 800; margin-right: 2px; }
.cal-v3-hero-btn { padding: 3px 9px !important; font-size: 11px !important; border-radius: 7px; white-space: nowrap; }
.cal-v3-hero-slim .cal-v3-agent-pill { background: rgba(255,255,255,.92); }
/* ===== YEAR VIEW — 2 tháng / hàng, ô ngày hiện TÊN lễ (chip) ===== */
.cal-year-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal-year-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.cal-ymonth { background: #fff; border: 1px solid #e9eef3; border-radius: 12px; padding: 14px 14px 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: box-shadow .15s; }
.cal-ymonth:hover { box-shadow: 0 6px 18px rgba(30,58,138,.08); }
.cal-ymonth-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; cursor: pointer; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.cal-ymonth-head:hover .cal-ymonth-name { color: #4f46e5; }
.cal-ymonth-name { font-size: 16px; font-weight: 800; color: #1e3a8a; letter-spacing: -.2px; }
.cal-mini-count { font-size: 11px; color: #94a3b8; font-weight: 700; background: #f1f5f9; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.cal-ygrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-ydow { font-size: 10px; text-align: center; color: #94a3b8; font-weight: 800; text-transform: uppercase; padding-bottom: 3px; }
.cal-ycell { min-height: 70px; background: #fff; border: 1px solid #eef2f6; border-radius: 8px; padding: 4px 4px 3px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-ycell-empty { background: #fafbfc; border-color: #f1f5f9; }
.cal-ycell-num { font-size: 11px; font-weight: 700; color: #64748b; line-height: 1; }
.cal-ycell-today { border-color: #1e3a8a; box-shadow: 0 0 0 1px #1e3a8a inset; }
.cal-ycell-today .cal-ycell-num { background: #1e3a8a; color: #fff; border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.cal-ycell-evts { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-chip-sm { font-size: 10px; padding: 1px 5px; border-radius: 4px; border-left-width: 2px; line-height: 1.3; }
@media (max-width: 1100px) { .cal-year-grid { grid-template-columns: 1fr; } .cal-ov-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cal-ov-grid { grid-template-columns: 1fr; } }
/* ===== Test proxy box (Settings) — 2026-06-21 ===== */
.proxy-test-box { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 12px; margin-top: 6px; }
.proxy-test-box textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.proxy-test-result { font-size: 13px; display: inline-block; }
.proxy-test-result .ok { color: #047857; font-weight: 700; }
.proxy-test-result .err { color: #b91c1c; font-weight: 700; }
.proxy-test-snippet { margin-top: 8px; background: #0f172a; border-radius: 6px; padding: 8px 10px; max-height: 150px; overflow: auto; }
.proxy-test-snippet code { color: #a5b4fc; font-size: 11px; white-space: pre-wrap; word-break: break-all; }
/* ===== Bulk v3 ===== */
.bulk-v3-container { max-width: 1280px; padding: 16px 12px; }
.bulk-v3-cfg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.bulk-v3-styles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bulk-v3-style-pill { background: #f3f4f6; color: #475569; border: 1px solid #d1d5db; padding: 5px 12px; border-radius: 16px; cursor: pointer; font-size: 12px; font-weight: 600; }
.bulk-v3-style-pill:hover { background: #e5e7eb; }
.bulk-v3-style-pill.active { background: #1e3a8a; color: white; border-color: #1e3a8a; }
.bulk-v3-opts { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.bulk-v3-opt { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 500 !important; }
.bulk-v3-jobs { padding: 0; }
.bulk-v3-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.bulk-v3-tbl thead th { background: #f8fafc; padding: 8px 10px; text-align: left; color: #475569; font-weight: 700; border-bottom: 1px solid #e2e8f0; font-size: 11px; text-transform: uppercase; }
.bulk-v3-tbl tbody td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.bulk-v3-job-row { transition: background 0.15s; }
.bulk-v3-job-row:hover { background: #f8fafc; }
.bulk-v3-job-row.status-running { background: #eff6ff; }
.bulk-v3-job-row.status-done { background: #f0fdf4; }
.bulk-v3-job-row.status-error { background: #fef2f2; }
.bulk-v3-prog { width: 120px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.bulk-v3-prog-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); transition: width 0.3s; }
.bulk-v3-status-pill { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.bulk-v3-status-pill.status-queued { background: #fef3c7; color: #92400e; }
.bulk-v3-status-pill.status-running { background: #dbeafe; color: #1e40af; }
.bulk-v3-status-pill.status-done { background: #d1fae5; color: #047857; }
.bulk-v3-status-pill.status-error { background: #fee2e2; color: #b91c1c; }
.bulk-v3-expand-btn { padding: 4px 10px; font-size: 11px; }
.bulk-v3-del-btn { padding: 4px 8px; font-size: 11px; color: #b91c1c !important; border-color: #fca5a5 !important; }
.bulk-v3-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.bulk-v3-result-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; border-left: 3px solid #cbd5e1; }
.bulk-v3-result-card.status-done { border-left-color: #10b981; }
.bulk-v3-result-card.status-error { border-left-color: #ef4444; }
.bulk-v3-result-card.status-running { border-left-color: #3b82f6; }
.bulk-v3-result-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.bulk-v3-result-head code { background: transparent; color: #1e40af; font-weight: 700; }
.bulk-v3-result-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; }
.bulk-v3-thumb-cell { background: white; border: 1px solid #e2e8f0; border-radius: 6px; padding: 5px; display: flex; flex-direction: column; align-items: center; position: relative; }
.bulk-v3-thumb-lbl { font-size: 9px; color: #64748b; margin-bottom: 3px; font-weight: 600; text-align: center; }
.bulk-v3-thumb-cell img { max-width: 100%; max-height: 90px; object-fit: contain; }
.bulk-v3-thumb-empty { color: #94a3b8; font-size: 11px; padding: 20px 0; }
.bulk-v3-thumb-dl { position: absolute; bottom: 3px; right: 3px; background: rgba(255,255,255,0.9); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #1e3a8a; font-size: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.bulk-v3-thumb-dl:hover { background: #1e3a8a; color: white; }
.bulk-v3-result-meta { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0; }
.bulk-v3-meta-title { color: #1e3a8a; font-weight: 600; font-size: 13px; }
.bulk-v3-meta-tags { color: #64748b; font-size: 11px; margin-top: 3px; }
/* ===================================================================
2026-06-20 v4: Bulk pipeline 5-stage + Single tab narrow
=================================================================== */
/* === Single tab narrower (max-width 920px center) === */
.ai-tabpane[data-aipane="single"] .ai-grid {
max-width: 920px;
margin: 0 auto;
}
/* === Bulk v4 cfg / pipeline === */
.bulk-v4-container { max-width: 1400px; padding: 16px 12px; }
.bulk-v4-cfg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.bulk-v4-styles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bulk-v4-style-pill { background: #f3f4f6; color: #475569; border: 1px solid #d1d5db; padding: 5px 12px; border-radius: 16px; cursor: pointer; font-size: 12px; font-weight: 600; }
.bulk-v4-style-pill:hover { background: #e5e7eb; }
.bulk-v4-style-pill.active { background: #1e3a8a; color: white; border-color: #1e3a8a; }
.bulk-v4-opts { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.bulk-v4-opt { display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; font-weight: 500 !important; flex-direction: row !important; font-size: 13px !important; color: #475569 !important; }
/* Jobs table */
.bulk-v4-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.bulk-v4-tbl thead th { background: #f8fafc; padding: 8px 10px; text-align: left; color: #475569; font-weight: 700; border-bottom: 1px solid #e2e8f0; font-size: 11px; text-transform: uppercase; }
.bulk-v4-tbl tbody td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.bulk-v4-tbl tbody tr:hover { background: #f8fafc; }
.bulk-v4-tbl tr.status-running { background: #eff6ff; }
.bulk-v4-tbl tr.status-done { background: #f0fdf4; }
.bulk-v4-tbl tr.status-error { background: #fef2f2; }
.bulk-v4-prog { width: 120px; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
.bulk-v4-prog-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); transition: width 0.3s; }
.bulk-v4-pill { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.bulk-v4-pill.status-queued { background: #fef3c7; color: #92400e; }
.bulk-v4-pill.status-running { background: #dbeafe; color: #1e40af; }
.bulk-v4-pill.status-done { background: #d1fae5; color: #047857; }
.bulk-v4-pill.status-error { background: #fee2e2; color: #b91c1c; }
.bulk-v4-expand { padding: 4px 10px; font-size: 11px; }
.bulk-v4-del { padding: 4px 8px; font-size: 11px; color: #b91c1c !important; border-color: #fca5a5 !important; }
/* Pipeline view per-ASIN */
.bulk-v4-pipe-wrap { background: white; border: 1px solid #e5e7eb; border-radius: 8px; overflow-x: auto; }
.bulk-v4-pipe-head, .bulk-v4-pipe-row {
display: grid;
grid-template-columns: 100px 1fr 1.5fr 1.5fr 1.3fr 0.8fr;
gap: 6px;
align-items: stretch;
min-width: 980px;
}
.bulk-v4-pipe-head { padding: 8px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; }
.bulk-v4-pipe-body { padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.bulk-v4-pipe-row { padding: 6px; background: #fafbfc; border: 1px solid #e5e7eb; border-radius: 6px; border-left: 3px solid #cbd5e1; transition: all 0.15s; }
.bulk-v4-pipe-row:hover { background: #f1f5f9; }
.bulk-v4-pipe-row.status-running { border-left-color: #3b82f6; background: #eff6ff; }
.bulk-v4-pipe-row.status-done { border-left-color: #10b981; }
.bulk-v4-pipe-row.status-error { border-left-color: #ef4444; background: #fef2f2; }
.bulk-v4-pipe-row.status-queued { border-left-color: #f59e0b; opacity: 0.75; }
.bulk-v4-pipe-asin-col { display: flex; flex-direction: column; gap: 2px; justify-content: center; padding: 4px 6px; }
.bulk-v4-pipe-asin-col code { color: #1e40af; font-weight: 700; font-size: 12px; }
.bulk-v4-asin-pos { color: #94a3b8; font-size: 10px; }
.bulk-v4-pipe-col {
background: white; border: 1px solid #e5e7eb; border-radius: 5px;
padding: 6px; min-height: 100px;
display: flex; align-items: center; justify-content: center;
}
.bulk-v4-pipe-col img { max-width: 100%; max-height: 90px; object-fit: contain; }
.bulk-v4-cell-empty { color: #cbd5e1; font-size: 22px; opacity: 0.5; }
.bulk-v4-cell-err { color: #ef4444; font-size: 22px; font-weight: 700; cursor: help; }
.bulk-v4-cell-loading { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #6366f1; font-size: 20px; }
.bulk-v4-cell-loading span { font-size: 10px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.bulk-v4-loading-anim { animation: bulk-v4-pulse 1.4s ease-in-out infinite; }
@keyframes bulk-v4-pulse {
0%, 100% { opacity: 0.4; transform: scale(0.95); }
50% { opacity: 1; transform: scale(1.05); }
}
.bulk-v4-cell-thumbs { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.bulk-v4-cell-thumbs img { max-height: 80px; max-width: 80px; border-radius: 3px; background: white; border: 1px solid #e5e7eb; }
.bulk-v4-cell-seo { padding: 4px; width: 100%; display: flex; flex-direction: column; gap: 3px; }
.bulk-v4-seo-t { color: #1e3a8a; font-size: 11px; font-weight: 600; line-height: 1.3; }
.bulk-v4-seo-tags { color: #64748b; font-size: 10px; line-height: 1.4; }
.bulk-v4-cell-export { display: flex; gap: 4px; align-items: center; }
.bulk-v4-dl-btn { background: #f3f4f6; color: #1e3a8a; border: 1px solid #d1d5db; border-radius: 4px; padding: 4px 8px; text-decoration: none; font-size: 13px; transition: all 0.15s; }
.bulk-v4-dl-btn:hover { background: #1e3a8a; color: white; }
.bulk-v4-more { font-size: 10px; color: #6366f1; background: #eef2ff; padding: 2px 6px; border-radius: 8px; font-weight: 700; }
/* ===================================================================
2026-06-20 v5: Final consistency pass
- Single tab: .ai-panel visual identical to .settings-section
- Bulk: 4-col pipeline (Input/Design/NoBG/Export), NO templates UI
- Container: max-width 1200px center, padding theo settings
=================================================================== */
/* Single tab: align .ai-panel to settings-section visual exactly */
.ai-tabpane[data-aipane="single"] .ai-container,
.ai-tabpane[data-aipane="single"] .ai-grid {
max-width: 980px !important;
margin: 0 auto !important;
}
.ai-tabpane[data-aipane="single"] .ai-panel,
.ai-tabpane[data-aipane="single"] .ai-result-panel,
.ai-tabpane[data-aipane="single"] .ai-history-panel,
.ai-tabpane[data-aipane="single"] .ai-removebg-panel {
background: #fff !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
padding: 16px 18px !important;
box-shadow: none !important;
}
.ai-tabpane[data-aipane="single"] .ai-section-title {
color: #1e3a8a !important;
font-size: 14px !important;
font-weight: 700 !important;
margin: 0 0 12px !important;
border-bottom: 1px solid #f1f5f9;
padding-bottom: 8px;
}
.ai-tabpane[data-aipane="single"] .ai-btn-primary {
background: #16a34a !important;
border-color: #16a34a !important;
color: white !important;
border-radius: 6px !important;
}
.ai-tabpane[data-aipane="single"] .ai-btn-primary:hover:not(:disabled) {
background: #15803d !important;
}
.ai-tabpane[data-aipane="single"] .ai-btn-ghost {
background: #f3f4f6 !important;
color: #1e3a8a !important;
border: 1px solid #d1d5db !important;
border-radius: 6px !important;
}
/* 2026-06-20: pipeline 5 stage cols (Input/Thiết kế/Upscale/Tách nền/Export) + ASIN */
.bulk-v4-pipe-head, .bulk-v4-pipe-row {
grid-template-columns: 92px 0.85fr 1.5fr 1.2fr 1.2fr 0.85fr !important;
min-width: 1080px !important;
}
/* Nút thao tác per-item trong pipeline cell */
.bulk-v4-cell-acts { margin-top: 6px; display: flex; justify-content: center; width: 100%; }
.bulk-v4-act-btn {
font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px;
border: 1px solid #cbd5e1; background: #fff; color: #1e3a8a; cursor: pointer;
white-space: nowrap; transition: all .15s; line-height: 1.3;
}
.bulk-v4-act-btn:hover { background: #eff6ff; border-color: #93c5fd; }
.bulk-v4-act-btn:disabled { opacity: .6; cursor: default; }
/* cell có cả thumb + nút → xếp dọc, căn giữa */
.bulk-v4-pipe-col { flex-direction: column; gap: 4px; }
/* Remove templates UI elements completely */
.bulk-v4-tmpl-row, .bulk-v4-tmpl-select { display: none !important; }
/* ===================================================================
2026-06-20: AI Bulk Pipeline — REDESIGN đồng bộ với AI Studio
Thay thế scaffolding .settings-* (mượn từ tab Settings) bằng hệ
.ai-panel / .ai-studio-hero / .ai-style-btn / .ai-toggle / .ai-btn
để Bulk tab nhìn giống hệt Single tab. Element id giữ nguyên.
=================================================================== */
.ai-bulk-studio { display: flex; flex-direction: column; gap: 12px; }
/* Hero dùng lại .ai-studio-hero — 4 stat ô 2×2 (giống Single) */
.ai-bulk-hero .ai-studio-title { font-size: 15px; }
/* Shell 2 cột: config (trái) · monitor (phải) — mirror .ai-single-shell */
.ai-bulk-shell {
display: grid;
grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.ai-bulk-stack { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ai-bulk-config, .ai-bulk-monitor { min-width: 0; }
/* Panel bulk: bo tròn + shadow mềm giống .ai-sidebar-stack .ai-panel */
.ai-bulk-studio .ai-panel {
border-radius: 16px;
border-color: #dbe3ef;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
padding: 16px 18px;
}
.ai-bulk-studio .ai-section-title {
border-bottom: 1px solid #f1f5f9;
padding-bottom: 10px;
}
/* CTA chính bulk = xanh lá giống nút Generate ở Single tab (đồng bộ) */
.ai-bulk-studio .ai-btn-primary {
background: #16a34a; border-color: #16a34a; color: #fff;
}
.ai-bulk-studio .ai-btn-primary:hover:not(:disabled) { background: #15803d; }
.ai-bulk-studio .ai-btn-primary:disabled { background: #94a3b8; border-color: #94a3b8; cursor: not-allowed; }
/* ASIN textarea */
.ai-bulk-asin-ta {
width: 100%; box-sizing: border-box; resize: vertical; min-height: 130px;
padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 10px;
font-family: ui-monospace, "SF Mono", monospace; font-size: 13px; line-height: 1.6;
letter-spacing: .02em; color: #1e293b; background: #f8fafc;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.ai-bulk-asin-ta:focus { outline: none; border-color: #60a5fa; background: #fff; box-shadow: 0 0 0 3px rgba(96,165,250,.18); }
.ai-bulk-hint { margin-top: 8px; font-size: 12px; line-height: 1.5; color: #64748b; }
.ai-bulk-hint b { color: #1e3a8a; }
/* 2026-06-21: Bulk dropzone ảnh/URL (mỗi ảnh/URL = 1 item) */
.ai-bulk-dropzone {
border: 2px dashed #cbd5e1; border-radius: 10px; padding: 18px 12px; text-align: center;
background: #f8fafc; cursor: pointer; transition: all .15s; outline: none;
}
.ai-bulk-dropzone:hover, .ai-bulk-dropzone:focus { border-color: #60a5fa; background: #f0f7ff; }
.ai-bulk-dropzone.dragover { border-color: #2563eb; background: #dbeafe; transform: scale(1.01); }
.ai-bulk-dropzone .ai-drop-icon { font-size: 26px; }
.ai-bulk-dropzone .ai-drop-text { font-size: 12px; color: #64748b; margin-top: 4px; }
.ai-bulk-url-row { display: flex; gap: 8px; margin-top: 10px; }
.ai-bulk-url-row input { flex: 1; }
.ai-bulk-uploads { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ai-bulk-up-item {
display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #e2e8f0;
border-radius: 8px; padding: 4px 6px 4px 4px; max-width: 200px;
}
.ai-bulk-up-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 5px; background: #f1f5f9; flex-shrink: 0; }
.ai-bulk-up-name { font-size: 11px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-bulk-up-x { border: none; background: #fef2f2; color: #dc2626; border-radius: 5px; cursor: pointer; font-size: 12px; padding: 2px 6px; flex-shrink: 0; }
.ai-bulk-up-x:hover { background: #fecaca; }
/* Config selects — 3 cột co giãn */
.ai-bulk-cfg-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ai-bulk-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: #475569; }
.ai-bulk-select {
padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 13px;
background: #fff; color: #1e293b; cursor: pointer; transition: border-color .15s;
}
.ai-bulk-select:focus { outline: none; border-color: #60a5fa; }
.ai-bulk-styles-block { margin-bottom: 14px; }
.ai-bulk-field-lbl { font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 8px; }
.ai-bulk-styles-block .ai-style-grid { margin-bottom: 0; }
/* Style pill bulk — class riêng (KHÔNG dùng .ai-style-btn để tránh va chạm
handler tab Single trong wireAiRedesign), nhưng look y hệt cho đồng bộ. */
.ai-bulk-style-btn {
padding: 8px 10px; border: 1px solid #cbd5e1; background: #fff;
border-radius: 6px; font-size: 12px; color: #475569; cursor: pointer;
text-align: center; font-weight: 500; transition: all .15s;
}
.ai-bulk-style-btn:hover { border-color: #93c5fd; background: #eff6ff; color: #1e3a8a; }
.ai-bulk-style-btn.active { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
/* Toggles trong bulk cách nhau đều */
.ai-bulk-studio .ai-toggle { margin-top: 10px; }
.ai-bulk-studio .ai-toggle:first-of-type { margin-top: 4px; }
/* Submit panel — nhấn nhẹ bằng gradient xanh */
.ai-bulk-submit-panel {
background: linear-gradient(135deg, #ffffff 0%, #f3faf5 100%) !important;
border-color: #cdebd7 !important;
display: flex; flex-direction: column; gap: 12px;
}
.ai-bulk-summary { font-size: 13px; line-height: 1.5; color: #475569; }
.ai-bulk-summary b { color: #16a34a; }
.ai-bulk-warn-txt { color: #b91c1c; font-weight: 700; }
.ai-bulk-result { min-height: 18px; font-size: 13px; }
.ai-bulk-result .ok { color: #047857; font-weight: 600; }
.ai-bulk-result .err { color: #b91c1c; font-weight: 600; }
.ai-bulk-foot { font-size: 11.5px; line-height: 1.5; color: #64748b; padding-top: 4px; border-top: 1px dashed #e2e8f0; }
.ai-bulk-foot b { color: #1e3a8a; }
/* Panel header (jobs / pipeline) — title trái, action phải */
.ai-bulk-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ai-bulk-panel-head .ai-section-title { border: 0; padding: 0; }
.ai-bulk-jobs-list { min-height: 60px; }
/* Actions trong jobs table → căn hàng, không xuống dòng lộn xộn */
.bulk-v4-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bulk-v4-actions .bulk-v4-del { color: #b91c1c; }
.bulk-v4-actions .bulk-v4-del:hover { background: #fee2e2; border-color: #fca5a5; }
/* Pipeline nằm trong .ai-panel → bỏ viền kép, dùng nền nhạt */
.ai-bulk-studio .bulk-v4-pipe-wrap { border: 0; border-radius: 12px; background: #f8fafc; }
/* Responsive: gập 1 cột khi hẹp */
@media (max-width: 1080px) {
.ai-bulk-shell { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.ai-bulk-hero .ai-studio-title { font-size: 16px; }
.ai-bulk-cfg-3 { grid-template-columns: 1fr 1fr; }
}
/* ===== Trend GG (Google Trends) tab — 2026-06-30. Scope .tgg-* riêng, không đụng class chung. ===== */
.tgg-wrap { padding: 12px 16px; }
.tgg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tgg-wins { display: flex; gap: 6px; flex-wrap: wrap; }
.tgg-win { padding: 5px 14px; font-size: 12px; font-weight: 600; border: 1px solid #d1d5db; background: #fff; color: #475569; border-radius: 999px; cursor: pointer; }
.tgg-win:hover { background: #f3f4f6; border-color: #94a3b8; }
.tgg-win.active { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
.tgg-actions { display: flex; gap: 6px; }
.tgg-btn { padding: 5px 12px; font-size: 12px; font-weight: 600; border: 1px solid #d1d5db; background: #fff; color: #1e293b; border-radius: 8px; cursor: pointer; }
.tgg-btn:hover { background: #f3f4f6; }
.tgg-btn:disabled { opacity: .6; cursor: default; }
.tgg-btn-add { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.tgg-note { font-size: 11px; color: #6b7280; margin-bottom: 12px; }
.tgg-note b { color: #374151; }
.tgg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.tgg-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.tgg-card-head { border-bottom: 1px solid #f1f5f9; padding-bottom: 10px; margin-bottom: 10px; }
.tgg-seed { font-size: 16px; font-weight: 700; color: #111827; }
.tgg-geo { font-size: 10px; font-weight: 600; color: #64748b; background: #f1f5f9; padding: 1px 6px; border-radius: 4px; vertical-align: middle; }
.tgg-card-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.tgg-spark { display: block; }
.tgg-spark-empty { color: #cbd5e1; letter-spacing: 1px; }
.tgg-interest { font-size: 12px; color: #475569; }
.tgg-interest b { color: #1e3a8a; font-size: 14px; }
.tgg-fresh { font-size: 11px; color: #94a3b8; margin-left: auto; }
.tgg-section-lbl { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .3px; margin: 10px 0 4px; }
.tgg-kw-list { display: flex; flex-direction: column; gap: 2px; }
.tgg-kw-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 13px; }
.tgg-kw-row:hover { background: #f8fafc; }
.tgg-kw-rising { background: #fffbeb; }
.tgg-kw-rising:hover { background: #fef3c7; }
.tgg-kw-name { flex: 1; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tgg-vol { font-size: 11px; color: #64748b; font-variant-numeric: tabular-nums; }
.tgg-empty-row { font-size: 12px; color: #b0b7c3; padding: 4px 6px; }
.tgg-chg { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tgg-chg-breakout { background: #dc2626; color: #fff; }
.tgg-chg-hot { background: #ffedd5; color: #c2410c; }
.tgg-chg-up { background: #dcfce7; color: #15803d; }
.tgg-chg-mild { background: #f1f5f9; color: #64748b; }
.tgg-chg-down { background: #fee2e2; color: #b91c1c; }
.tgg-baskets { display: inline-flex; gap: 4px; }
.tgg-baskets a { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: #f1f5f9; text-decoration: none; font-size: 13px; line-height: 1; transition: background .1s; }
.tgg-baskets a:hover { background: #dbeafe; }
@media (max-width: 720px) {
.tgg-cards { grid-template-columns: 1fr; }
}
/* ===== Trend GG — layout CỘT theo khung giờ (2026-07-01) ===== */
.tgg-title { font-size: 13px; color: #374151; font-weight: 600; }
.tgg-title .tgg-sub { color: #6b7280; font-weight: 400; font-size: 11px; }
.tgg-sections { display: flex; flex-direction: column; gap: 16px; }
.tgg-seed-title { font-size: 15px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.tgg-del-seed { background: none; border: none; cursor: pointer; font-size: 13px; opacity: .5; margin-left: 6px; padding: 2px 5px; border-radius: 4px; vertical-align: middle; }
.tgg-del-seed:hover { opacity: 1; background: #fee2e2; }
.tgg-status { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.tgg-status:empty { display: none; }
.tgg-status--run { color: #b45309; background: #fffbeb; }
.tgg-status--ok { color: #15803d; background: #dcfce7; }
.tgg-status--warn { color: #b91c1c; background: #fef2f2; }
.tgg-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.tgg-col { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; min-width: 0; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.tgg-col-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: #1e3a8a; border-bottom: 1px solid #f1f5f9; padding-bottom: 6px; margin-bottom: 6px; }
.tgg-col-head .tgg-fresh { font-size: 10px; color: #94a3b8; font-weight: 500; margin-left: 0; }
.tgg-col-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.tgg-col-empty { color: #b0b7c3; font-size: 12px; text-align: center; padding: 16px 0; }
@media (max-width: 1180px) { .tgg-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tgg-cols { grid-template-columns: 1fr; } }
/* ===== Chấm đỏ TREND trên áo (2026-07-01) — góc dưới-trái ảnh, khớp cụm từ Google Trends ===== */
.card .img-wrap { position: relative; }
.trend-dot { --tc: #ef4444; position: absolute; bottom: 6px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--tc); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); z-index: 5; cursor: help; }
.trend-dot--hot { --tc: #ef4444; } /* đỏ: 1h / 4h */
.trend-dot--warm { --tc: #f97316; } /* cam: 1 ngày */
.trend-dot--mild { --tc: #eab308; } /* vàng: 7 ngày */
.trend-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--tc); opacity: .55; animation: trend-pulse 1.6s ease-out infinite; }
@keyframes trend-pulse { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.9); opacity: 0; } }
/* ===== Force Re-scrape: flash card vừa cập nhật (2026-07-07) — xác nhận rank/price đổi NGAY ===== */
.card-just-updated { animation: cardJustUpdated 1.6s ease-out; }
@keyframes cardJustUpdated {
0% { box-shadow: 0 0 0 2px #22c55e, 0 0 14px rgba(34,197,94,.65); }
70% { box-shadow: 0 0 0 2px #22c55e, 0 0 8px rgba(34,197,94,.35); }
100% { box-shadow: none; }
}
/* ===== Remove BG provider selector (Ideogram | OpenAI) — 2026-07-11 ===== */
.ai-rmbg-provider { margin: 12px 0 4px; }
.ai-rmbg-provider-label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 6px; font-weight: 600; }
.ai-rmbg-provider-seg { display: flex; gap: 6px; }
.ai-rmbg-prov-btn { flex: 1; padding: 8px 10px; border: 1px solid #334155; background: #1e293b; color: #cbd5e1; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.ai-rmbg-prov-btn:hover:not(:disabled) { border-color: #3b82f6; }
.ai-rmbg-prov-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.ai-rmbg-prov-btn:disabled { opacity: .45; cursor: not-allowed; }
.ai-rmbg-provider-hint { margin-top: 7px; font-size: 11px; color: #94a3b8; line-height: 1.5; }