/* ═══════════════════════════════════════════════════════════════════
   /tiktok-shop-videos + /tiktok-shop-lives — "Video / LIVE bán chạy"
   CSS dùng chung 2 trang (trước là 2 block <style> inline gần trùng nhau).

   ⚠ <link> file này SAU tiktok-shop-mobile.css: block mobile bên dưới cần
   đè `.bs-card { padding:10px }` + `.bs-grid` 1 cột ≤399.98 của file đó.

   Mobile (≤575.98 — trang mở trong AppView của app):
   - Bảng 10/6 cột bị `td { overflow-wrap:anywhere }` (mobile-optimizations)
     bóp thành 1 ký tự/dòng ⇒ đổi mỗi <tr> thành thẻ flex nhiều dòng.
     Thứ tự dòng dựa `order` + 2 pseudo ::before/::after làm "ngắt dòng".
   - Lưới: 2 cột thẻ gọn, thumb nền cam nhạt thấp thay khối đen 16/10.
   Desktop giữ nguyên như bản inline cũ.
   ═══════════════════════════════════════════════════════════════════ */

.tts-hero { background: linear-gradient(135deg,#010101 0%,#1a1a1a 60%,#2d1f0e 100%); border-radius:16px; padding:28px 32px; margin-bottom:24px; color:#fff; position:relative; overflow:hidden; }
.tts-hero::before { content:''; position:absolute; top:-40px; right:-40px; width:200px; height:200px; background:radial-gradient(circle,rgba(254,44,85,.25) 0%,transparent 70%); }
.tts-hero h1 { font-size:1.5rem; font-weight:800; margin:0 0 4px; }
.tts-hero p  { color:rgba(255,255,255,.65); font-size:.875rem; margin:0; }
.skeleton { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:shimmer 1.2s infinite; border-radius:6px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ─── Lưới thẻ (chung video / LIVE) ─── */
.bs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.bs-card { background:#fff; border:1px solid #f0f0f0; border-radius:14px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06); display:flex; flex-direction:column; transition:.18s; text-decoration:none; color:inherit; }
.bs-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.10); transform:translateY(-2px); }
a.bs-card { cursor:pointer; }
.bs-thumb { position:relative; aspect-ratio:16/10; background:linear-gradient(135deg,#2d1f0e,#1a1a1a); overflow:hidden; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.30); font-size:2.5rem; }
.bs-thumb .bs-open { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.0); opacity:0; transition:.18s; color:#fff; font-size:.78rem; font-weight:700; gap:5px; }
.bs-card:hover .bs-open { opacity:1; background:rgba(0,0,0,.35); }
.bs-rank { position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 8px; border-radius:9px; font-weight:800; font-size:.85rem; background:rgba(0,0,0,.65); color:#fff; backdrop-filter:blur(3px); }
.bs-rank.top { background:linear-gradient(135deg,#ff0050,#ff7aa2); }
.bs-dur-badge { position:absolute; bottom:8px; right:8px; font-size:.68rem; font-weight:700; padding:2px 7px; border-radius:6px; background:rgba(0,0,0,.7); color:#fff; }
.bs-live-badge { position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:800; letter-spacing:.5px; padding:3px 8px; border-radius:6px; background:#fe2c55; color:#fff; }
.bs-live-badge .dot { width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.bs-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:7px; flex:1; }
.bs-creator { font-size:.9rem; font-weight:700; color:#212529; line-height:1.2; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bs-pub { font-size:.72rem; color:#8a8f98; margin-top:-3px; }
.bs-user { font-size:.72rem; color:#8a8f98; margin-top:-3px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bs-title { font-size:.8rem; color:#555; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.2em; }
.bs-stats { display:flex; flex-wrap:wrap; gap:10px; font-size:.74rem; color:#6b7280; }
.bs-stats span { display:inline-flex; align-items:center; gap:3px; }
.bs-meta { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto; }
.bs-gmv { display:flex; flex-direction:column; }
.bs-gmv .v { font-size:.92rem; font-weight:800; color:#198754; line-height:1.1; }
.bs-gmv .l { font-size:.62rem; color:#aab; text-transform:uppercase; letter-spacing:.4px; }
.bs-stat { font-size:.72rem; color:#8a8f98; text-align:right; white-space:nowrap; }
.bs-stat .d { font-weight:700; color:#555; }

/* ─── Bảng ─── */
.rank-badge { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; font-weight:800; font-size:.85rem; background:#f0f0f0; color:#555; }
.rank-badge.top { background:linear-gradient(135deg,#ff0050,#ff7aa2); color:#fff; }
.bs-avatar-lg { width:68px; height:68px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.7); box-shadow:0 2px 8px rgba(0,0,0,.3); }
.bs-avatar-sm { width:30px; height:30px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:#eee; }
.bs-name-cell { display:flex; align-items:center; gap:8px; }
.cache-note { font-size:.72rem; color:#999; }

/* ═══ MOBILE ═══════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {

    /* Hero sáng, gọn (đồng bộ các trang đã làm lại) */
    .tts-hero { background:#fff7ed; border:1px solid #fed7aa; color:#111827; border-radius:14px; padding:12px 14px !important; margin-bottom:12px; }
    .tts-hero::before { display:none; }
    .tts-hero h1 { font-size:1rem; font-weight:800; color:#111827; margin-bottom:2px; }
    .tts-hero h1 .bi { color:#ea580c; }
    .tts-hero p { color:#6b7280; font-size:.76rem; line-height:1.4; }

    /* Tiêu đề khu + thanh công cụ: 1 hàng, control cao 38px */
    .bsm-head { margin-bottom:10px !important; row-gap:8px !important; }
    .bsm-head h6 { font-size:.92rem; }
    .bsm-head small { font-size:.72rem; }
    .bsm-toolbar { width:100%; flex-wrap:nowrap !important; gap:6px !important; }
    .bsm-toolbar .form-select { flex:1 1 auto; width:auto; min-width:0; height:38px; min-height:38px; padding:0 30px 0 12px; font-size:16px; border-radius:10px; background-color:#fff; background-position:right 10px center; }
    .bsm-toolbar .btn { min-height:38px; height:38px; min-width:40px; padding:0 11px; border-radius:10px; font-size:.95rem; }
    .bsm-toolbar .btn-group .btn { border-radius:0; }
    .bsm-toolbar .btn-group .btn:first-child { border-radius:10px 0 0 10px; }
    .bsm-toolbar .btn-group .btn:last-child { border-radius:0 10px 10px 0; }

    /* ─── Bảng → danh sách thẻ ─── */
    .bsm-table-wrap { overflow:visible; }
    .bsm-table { margin-bottom:8px; }
    .bsm-table > thead { display:none; }
    .bsm-table, .bsm-table > tbody { display:block; width:100%; }
    .bsm-table > tbody > tr { display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:4px; position:relative; background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:10px 12px 10px 48px; margin-bottom:8px; }
    /* 2 "ngắt dòng" vô hình: đẩy các ô order≥2 / order≥4 xuống dòng mới */
    .bsm-table > tbody > tr::before,
    .bsm-table > tbody > tr::after { content:''; flex-basis:100%; height:0; }
    .bsm-table > tbody > tr::before { order:1; }
    .bsm-table > tbody > tr::after { order:3; }
    .bsm-table > tbody > tr > td { display:block; padding:0; border:0; background:transparent; box-shadow:none; font-size:.8rem; text-align:left !important; overflow-wrap:normal; min-width:0; }
    .bsm-table > tbody > tr > td.bsm-rank { position:absolute; left:10px; top:10px; }
    .bsm-table .rank-badge { width:28px; height:28px; font-size:.8rem; }
    .bsm-table > tbody > tr > td.bsm-creator { flex:1 1 0; order:0; }
    .bsm-table .bs-name-cell { min-width:0; }
    .bsm-table .bs-name-cell > span, .bsm-table .bs-name-cell > div { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .bsm-table .bs-name-cell a, .bsm-table .bs-name-cell .fw-semibold { font-size:.86rem; color:#111827; }
    .bsm-table > tbody > tr > td.bsm-gmv { order:2; font-size:.9rem; font-weight:800; white-space:nowrap; }
    .bsm-table > tbody > tr > td.bsm-gmv::after { content:' GMV'; font-size:.66rem; font-weight:600; color:#9ca3af; }
    .bsm-table > tbody > tr > td.bsm-action { order:0; flex:0 0 auto; }
    .bsm-table > tbody > tr > td.bsm-action .btn { min-height:30px; height:30px; padding:0 10px; font-size:.76rem; border-radius:15px; }
    .bsm-table > tbody > tr > td.bsm-title { order:2; flex:1 1 100%; color:#374151; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .bsm-table > tbody > tr > td.bsm-stat { order:4; flex:0 0 auto; font-size:.74rem !important; color:#6b7280; white-space:nowrap; }
    .bsm-table > tbody > tr > td.bsm-stat .bi { margin-right:2px; font-size:.72rem; }
    /* Video: ngày đăng lên hàng GMV, sát phải (hàng chỉ số khỏi rớt dòng 3) */
    .bsm-table > tbody > tr > td.bsm-date { order:2; margin-left:auto; }
    /* LIVE: GMV nằm hàng 1 bên phải (video: hàng 2) */
    .bsm-table--lives > tbody > tr > td.bsm-gmv { order:0; }

    /* ─── Lưới: 2 cột thẻ gọn ─── */
    .bs-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .bs-card { padding:0; border:0; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
    .bs-card:hover { transform:none; box-shadow:0 1px 3px rgba(0,0,0,.06); }
    .bs-card .bs-open { display:none; }
    .bs-thumb { aspect-ratio:auto; height:88px; background:linear-gradient(135deg,#fff1e6,#ffe4ea); color:#fdba74; font-size:1.8rem; }
    .bs-avatar-lg { width:50px; height:50px; border-width:2px; box-shadow:0 1px 4px rgba(0,0,0,.15); }
    .bs-rank { top:6px; left:6px; min-width:24px; height:24px; padding:0 6px; border-radius:7px; font-size:.72rem; }
    .bs-live-badge { top:6px; right:6px; padding:2px 6px; font-size:.6rem; }
    .bs-dur-badge { bottom:6px; right:6px; font-size:.62rem; padding:1px 6px; }
    .bs-body { padding:8px 10px 10px; gap:4px; }
    .bs-creator { font-size:.82rem; }
    .bs-pub, .bs-user { font-size:.68rem; margin-top:-2px; }
    .bs-title { font-size:.74rem; min-height:2.7em; }
    .bs-stats { gap:4px 8px; font-size:.68rem; }
    .bs-meta { flex-direction:column; align-items:flex-start; gap:2px; }
    .bs-gmv .v { font-size:.84rem; }
    .bs-gmv .l { font-size:.58rem; }
    .bs-stat { text-align:left; font-size:.66rem; white-space:normal; }
    .bs-actions { margin-top:4px; }
    .bs-actions .btn { min-height:32px; height:32px; padding:0 8px; font-size:.76rem; border-radius:16px; }
}