/* Trang tìm sản phẩm affiliate (/tiktok-shop-product-search).
   Tách khỏi PHP để trang giữ được phần markup ngắn; dùng chung tông với
   tiktok-shop-bestselling.php (hero đen–đỏ, thẻ bo 14px). */

.ps-hero { background:linear-gradient(135deg,#010101 0%,#1a1a1a 60%,#2d1f0e 100%); border-radius:16px; padding:24px 28px; margin-bottom:20px; color:#fff; position:relative; overflow:hidden; }
.ps-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%); }
.ps-hero h1 { font-size:1.5rem; font-weight:800; margin:0 0 4px; }
.ps-hero p { color:rgba(255,255,255,.65); font-size:.875rem; margin:0; }

/* Thanh tìm kiếm + bộ lọc */
.ps-panel { background:#fff; border:1px solid #f0f0f0; border-radius:14px; padding:14px 16px; box-shadow:0 1px 4px rgba(0,0,0,.06); margin-bottom:16px; }
.ps-searchbar { display:flex; gap:8px; }
.ps-searchbar input { flex:1; min-width:0; }
.ps-filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-top:12px; }
.ps-f label { font-size:.68rem; font-weight:700; color:#8a8f98; text-transform:uppercase; letter-spacing:.3px; display:block; margin-bottom:3px; }
.ps-range { display:flex; align-items:center; gap:5px; }
.ps-range input { min-width:0; }
.ps-range span { color:#c5c9cf; font-size:.8rem; }
.ps-toggle { display:none; }
/* Hàng nút cuối panel: "Xoá bộ lọc" + "Tìm". Hai nút cùng class kích thước ⇒ luôn cao
   bằng nhau (bản cũ ép nút reset theo .form-select-sm nên lệch với nút Tìm ở thanh trên). */
.ps-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid #f3f3f3; }
.ps-actions .btn { height:40px; min-height:40px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
.ps-actions #psSubmit { min-width:120px; }

/* Dải báo chế độ khách */
.ps-guest { display:flex; align-items:center; gap:12px; background:#fff7f9; border:1px solid #ffd3de; border-radius:12px; padding:10px 14px; margin-bottom:12px; font-size:.84rem; color:#5b2330; }
.ps-guest > i { font-size:1.4rem; color:#fe2c55; flex:0 0 auto; }
.ps-guest > div { flex:1; min-width:0; }
/* Nút gọn: .btn-rh-primary của theme ép min-height 44px + padding lớn trên mobile ⇒ dải báo
   phình theo nút. Ghi đè bằng 2 class (đủ độ ưu tiên, khỏi !important). */
.ps-guest .btn { flex:0 0 auto; min-height:0; padding:.3rem .9rem; font-size:.8rem; line-height:1.4; white-space:nowrap; }
.ps-guest.d-none { display:none; }

/* Lưới kết quả */
.ps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.ps-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; }
.ps-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.10); transform:translateY(-2px); }
.ps-thumb { position:relative; aspect-ratio:1/1; background:#f6f7f9; overflow:hidden; }
.ps-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ps-thumb .ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#2d1f0e,#1a1a1a); color:rgba(255,255,255,.35); font-size:2rem; }
.ps-rate { position:absolute; top:10px; left:10px; padding:3px 9px; border-radius:20px; font-size:.72rem; font-weight:800; color:#fff; background:linear-gradient(135deg,#ff0050,#ff7aa2); }
.ps-rate.none { background:rgba(0,0,0,.55); }
.ps-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:7px; flex:1; }
.ps-name { font-size:.85rem; font-weight:600; line-height:1.35; color:#212529; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.3em; }
.ps-price { font-size:.95rem; font-weight:800; color:#212529; line-height:1.1; }
.ps-price .est { font-size:.62rem; font-weight:600; color:#aab; margin-left:4px; }
/* Ba dòng meta CỐ ĐỊNH (giá · lượt bán+đánh giá · shop), mỗi dòng đúng 1 hàng: thiếu dữ
   liệu thì để trống chứ không bỏ dòng, nếu không lưới sẽ so le thẻ 2 dòng / thẻ 3 dòng. */
.ps-stats { display:flex; justify-content:space-between; align-items:center; gap:8px;
            font-size:.72rem; color:#8a8f98; white-space:nowrap; min-height:1.15em; }
.ps-stats > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ps-stats .star { color:#f59e0b; font-weight:700; flex:0 0 auto; }
.ps-shop { font-size:.72rem; color:#8a8f98; white-space:nowrap; overflow:hidden;
           text-overflow:ellipsis; min-height:1.15em; }
.ps-shop .s-rating { color:#f59e0b; font-weight:700; }
.ps-act { margin-top:auto; padding-top:4px; }
.ps-act .btn { font-size:.76rem; padding:5px 8px; }
/* Hàng nút: "Tạo link" (tạo nhanh) + nút thẻ mở ô Sub ID */
.ps-actrow { display:flex; gap:6px; }
.ps-actrow .btn:first-child { flex:1; min-width:0; }
.ps-actrow .btn:last-child { flex:0 0 auto; padding:5px 9px; }
.ps-subid { display:flex; gap:5px; }
.ps-subid input { flex:1; min-width:0; font-size:.74rem; padding:4px 7px; }
.ps-subid .btn { flex:0 0 auto; }
.ps-hint { font-size:.64rem; color:#aab; margin-top:3px; }

/* Link đã tạo trong thẻ */
.ps-link { display:flex; gap:6px; align-items:center; background:#f1f8f3; border:1px solid #cfe8d8; border-radius:9px; padding:6px 8px; }
.ps-link a { flex:1; min-width:0; font-family:monospace; font-size:.68rem; color:#0d6efd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
.ps-link button { flex:0 0 auto; }
.ps-cardmsg { font-size:.72rem; line-height:1.35; border-radius:9px; padding:6px 8px; }
.ps-cardmsg.warn { background:#fff8e6; color:#7a5b00; border:1px solid #ffe2a6; }
.ps-cardmsg.err { background:#fdeceb; color:#a12722; border:1px solid #f6c9c6; }

/* Trạng thái rỗng / skeleton */
.ps-empty { text-align:center; padding:40px 18px; color:#8a8f98; }
.ps-empty i { font-size:2.2rem; display:block; margin-bottom:10px; color:#d5d9de; }
.ps-empty .t { font-weight:700; color:#495057; margin-bottom:4px; }
.ps-sk { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:psShimmer 1.2s infinite; border-radius:14px; height:280px; }
@keyframes psShimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Mobile: bộ lọc gập vào, mở bằng nút — tránh chiếm hết màn hình 390px */
@media (max-width:640px) {
  .ps-hero { padding:18px 18px; }
  .ps-hero h1 { font-size:1.2rem; }
  .ps-toggle { display:inline-flex; }
  .ps-filters { display:none; grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Mobile: vùng chạm 44px như ô nhập; hai nút chia đôi hàng. */
  .ps-actions .btn { height:44px; min-height:44px; flex:1; }
  .ps-filters.open { display:grid; }
  .ps-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .ps-body { padding:10px; gap:6px; }
  .ps-name { font-size:.78rem; }
  .ps-stats .rv { display:none; }   /* thẻ 2 cột quá hẹp cho cả "(18.671)" */
  .ps-guest { gap:10px; padding:8px 10px; font-size:.78rem; }
  .ps-guest > i { display:none; }   /* màn hẹp: nhường chỗ cho chữ, nút vẫn cùng hàng */
  .ps-guest-more { display:none; }  /* câu phụ — nút "Đăng nhập" đã nói thay */
}