/* ═══════════════════════════════════════════════════════════════════
   Phong cách CHUNG cho 4 trang khám phá sản phẩm TikTok Shop:
   /tiktok-shop-product-search · /tiktok-shop-bestselling · /tiktok-shop-videos · /tiktok-shop-lives

   Vì sao có file này: 4 trang dựng thẻ/bảng riêng (class ps-* / bs-* / bsm-*) nên trước đây
   mỗi trang một kiểu (accent hồng TikTok, khối đen, trạng thái rỗng là 1 dòng chữ xám).
   File này gom phần "nhìn giống nhau": huy hiệu hạng, nhãn hoa hồng, bảng, thanh công cụ,
   trạng thái rỗng/lỗi/đang tải — tông cam của trang chính /tiktok-shop.

   Nạp SAU CSS riêng của trang (và sau tiktok-shop-mobile.css) để thắng cascade mà không
   cần !important. Không đụng hero (đã do tiktok-shop-subpage-hero.css lo).
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --tsd-primary: #ea580c;
    --tsd-primary-dark: #c2410c;
    --tsd-soft: #fff7ed;
    --tsd-soft-border: #fed7aa;
    --tsd-soft-ink: #9a3412;
    --tsd-ink: #111827;
    --tsd-muted: #6b7280;
    --tsd-line: #eef0f3;
    --tsd-money: #15803d;
}

/* ─── Thẻ: trắng, bo 14, viền mảnh, bóng rất nhẹ ─── */
.ps-card, .bs-card, .mvr-col, .ps-panel {
    border: 1px solid var(--tsd-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}
.ps-card:hover, .bs-card:hover { box-shadow: 0 8px 22px rgba(17, 24, 39, .08); border-color: #fde3cc; }

/* ─── Huy hiệu hạng: top 3 cam đặc, còn lại xám nhạt (bỏ gradient hồng cũ) ─── */
.rank-badge { background: #f3f4f6; color: #374151; border-radius: 9px; }
.rank-badge.top, .bs-rank.top { background: var(--tsd-primary); color: #fff; }
.bs-rank { background: rgba(17, 24, 39, .72); }

/* Biến động hạng: "MỚI" dùng cam thay hồng. */
.mv-new { background: var(--tsd-primary); color: #fff; }

/* ─── Nhãn hoa hồng: điểm nhấn chính của thẻ ─── */
.tsd-rate {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 8px; border-radius: 999px;
    background: var(--tsd-soft); border: 1px solid var(--tsd-soft-border);
    color: var(--tsd-soft-ink); font-size: .74rem; font-weight: 800; line-height: 1.15; white-space: nowrap;
}
.tsd-rate b { color: var(--tsd-primary); font-weight: 800; }
.tsd-rate.is-none { background: #f3f4f6; border-color: #e5e7eb; color: #9ca3af; font-weight: 600; }

/* ─── Bảng: đầu bảng nền cam nhạt thay khối cam đặc của theme ─── */
.tsd-table { --bs-table-bg: transparent; margin-bottom: 8px; }
.tsd-table > thead { --bs-table-bg: var(--tsd-soft); --bs-table-color: var(--tsd-soft-ink); }
.tsd-table > thead th {
    font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
    border-bottom: 1px solid var(--tsd-soft-border); padding-top: 10px; padding-bottom: 10px; white-space: nowrap;
}
.tsd-table > thead th:first-child { border-top-left-radius: 12px; }
.tsd-table > thead th:last-child { border-top-right-radius: 12px; }
.tsd-table > tbody > tr > td { border-color: var(--tsd-line); }
/* Chỉ desktop: trên mobile dòng bảng thành thẻ, hover dính sau khi chạm sẽ tô nền lốm đốm. */
@media (min-width: 576px) { .tsd-table > tbody > tr:hover > td { background: #fffaf5; } }
.tsd-table-wrap {
    background: #fff; border: 1px solid var(--tsd-line); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
}
.tsd-table-wrap > .tsd-table { margin-bottom: 0; }
.tsd-table-wrap > .tsd-table > tbody > tr:last-child > td { border-bottom: 0; }
/* Bootstrap gán màu chữ cho mọi ô bảng qua --bs-table-color ⇒ cần selector đủ dài mới đè được. */
.tsd-gmv, .tsd-table > tbody > tr > td.tsd-gmv { color: var(--tsd-money); font-weight: 800; white-space: nowrap; }

/* ─── Thanh tiêu đề khu + công cụ (khoảng thời gian · bảng/lưới · tải lại · CSV) ─── */
.tsd-head h6 { font-size: 1rem; font-weight: 800; color: var(--tsd-ink); }
.tsd-head small { color: var(--tsd-muted); }
.tsd-toolbar .form-select { border-radius: 10px; font-weight: 600; background-color: #fff; }
.tsd-toolbar .btn-group .btn.active { background: var(--tsd-soft); border-color: var(--tsd-soft-border); color: var(--tsd-primary); }
.tsd-toolbar .btn-group .btn { border-radius: 0; }
.tsd-toolbar .btn-group .btn:first-child { border-radius: 10px 0 0 10px; }
.tsd-toolbar .btn-group .btn:last-child { border-radius: 0 10px 10px 0; }
.tsd-toolbar > .btn { border-radius: 10px; }

/* Ghi chú cập nhật cuối danh sách */
.cache-note { font-size: .72rem; color: #9ca3af; }

/* ─── Trạng thái rỗng / lỗi ─── */
.tsd-state {
    text-align: center; padding: 36px 18px; background: #fff;
    border: 1px dashed #e5e7eb; border-radius: 14px; color: var(--tsd-muted);
}
.tsd-state-ic {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--tsd-soft); color: var(--tsd-primary); font-size: 1.5rem;
}
.tsd-state .t { font-weight: 800; color: var(--tsd-ink); margin-bottom: 4px; font-size: .95rem; }
.tsd-state .d { font-size: .82rem; line-height: 1.45; max-width: 420px; margin: 0 auto; }
.tsd-state .btn { margin-top: 14px; }
.tsd-state.is-err { border-style: solid; border-color: #fde2e1; background: #fffbfb; }
.tsd-state.is-err .tsd-state-ic { background: #fef2f2; color: #dc2626; }

/* ─── Đang tải: khung xương theo đúng hình thẻ/dòng thay vì 1 khối xám ─── */
.tsd-sk {
    background: linear-gradient(90deg, #f3f4f6 25%, #e9eaee 50%, #f3f4f6 75%);
    background-size: 200% 100%; animation: tsdShimmer 1.2s infinite; border-radius: 14px;
}
.tsd-sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tsd-sk-grid .tsd-sk { height: 300px; }
.tsd-sk-list { display: flex; flex-direction: column; gap: 8px; }
.tsd-sk-list .tsd-sk { height: 64px; border-radius: 12px; }
@keyframes tsdShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

@media (max-width: 575.98px) {
    .tsd-sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tsd-sk-grid .tsd-sk { height: 240px; }
    .tsd-sk-list .tsd-sk { height: 86px; }
    .tsd-state { padding: 28px 14px; }
    /* Bảng → danh sách thẻ trên mobile: bỏ khung bao, mỗi dòng tự là một thẻ. */
    .tsd-table-wrap { background: transparent; border: 0; box-shadow: none; }
    .tsd-head h6 { font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tsd-sk { animation: none; }
}