/* Bảng tin ưu đãi TikTok — dùng chung cho trang danh sách (/tiktok-shop-deals)
   và trang chi tiết (/tiktok-shop-deals/{slug}). */

.tts-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; }
.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; }
.not-connected-notice { background:#fff9e6; border:1.5px dashed #ffc107; border-radius:12px; padding:32px; text-align:center; }
.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} }

/* ── Thẻ chiến dịch ─────────────────────────────────────────────────── */
.deal { background:#fff; border:1px solid #f0f0f0; border-radius:18px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06); margin-bottom:24px; }
/* KV agency đủ mọi tỉ lệ — nhiều cái vuông 1:1. Ép khung 21/9 + cover thì cắt
   mất gần hết nội dung; để contain thì KV vuông lại chừa 2 dải trống hai bên.
   Giải: ảnh thật contain ở giữa, hai bên lấp bằng chính ảnh đó phóng to + làm mờ. */
.deal-cover { position:relative; width:100%; background:linear-gradient(135deg,#2d1f0e,#1a1a1a); overflow:hidden; display:flex; align-items:center; justify-content:center; max-height:300px; }
.deal-cover-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(28px) brightness(.5); transform:scale(1.2); }
.deal-cover img { position:relative; max-width:100%; max-height:300px; width:auto; height:auto; object-fit:contain; display:block; }
.deal-cover.noimg { height:210px; }
.deal-cover.noimg::after { content:'\F5A2'; font-family:'bootstrap-icons'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:3rem; color:rgba(255,255,255,.18); }
.deal-badge { position:absolute; top:14px; left:14px; padding:5px 12px; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.04em; background:linear-gradient(135deg,#ff0050,#ff5b8a); color:#fff; box-shadow:0 3px 10px rgba(255,0,80,.35); }
.deal-count { position:absolute; top:14px; right:14px; padding:5px 12px; border-radius:999px; font-size:.74rem; font-weight:700; background:rgba(0,0,0,.62); color:#fff; backdrop-filter:blur(4px); }
.deal-count.urgent { background:linear-gradient(135deg,#dc2626,#f97316); }
.deal-body { padding:18px 20px 20px; }
.deal-title { font-size:1.15rem; font-weight:800; color:#212529; margin:0 0 4px; }
.deal-sub { font-size:.86rem; color:#6c757d; margin:0 0 12px; }
.perks { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.perk { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:10px; font-size:.78rem; font-weight:700; background:linear-gradient(135deg,#fff1f4,#ffe9ef); color:#d6006a; border:1px solid #ffd3e0; }
.deal-cta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.deal-note { font-size:.78rem; color:#6c757d; margin-top:10px; padding-top:10px; border-top:1px dashed #eee; white-space:pre-line; }

/* Kết quả tạo link */
.linkbox { margin-top:12px; background:#f8fff9; border:1.5px solid #b7e4c7; border-radius:12px; padding:12px 14px; }
.linkbox .lbl { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:#198754; font-weight:700; margin-bottom:4px; }
.linkbox code { display:block; word-break:break-all; font-size:.8rem; color:#14532d; }
.linkbox.err { background:#fff5f5; border-color:#f3b8b8; }
.linkbox.err code { color:#b42318; }

/* ── Hướng dẫn ──────────────────────────────────────────────────────── */
.guide { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:16px 0 4px; }
.guide-step { position:relative; background:#f8f9fb; border:1px solid #eef0f4; border-radius:14px; padding:14px 14px 14px 46px; }
.guide-step .n { position:absolute; left:14px; top:13px; width:22px; height:22px; border-radius:50%; background:#111; color:#fff; font-size:.72rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.guide-step .t { font-size:.84rem; font-weight:700; color:#212529; margin-bottom:2px; }
.guide-step .d { font-size:.76rem; color:#6c757d; line-height:1.45; }

/* ── Sản phẩm nên đẩy ───────────────────────────────────────────────── */
.dp-head { display:flex; align-items:center; gap:8px; margin:18px 0 10px; font-weight:800; font-size:.92rem; color:#212529; }
/* Thẻ nằm ngang: ảnh nhỏ bên trái, nội dung bên phải. Dạng dọc cũ cho ảnh
   chiếm gần hết thẻ, vừa chiếm chỗ vừa buộc cắt ảnh cho vừa khung vuông. */
.dp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
/* Trần 3 cột trên PC: tên sản phẩm agency rất dài, để auto-fill dàn 4-5 cột thì thẻ
   bị bóp hẹp và tên xuống dòng loạn. Rộng hơn vẫn 3 cột, chỉ thẻ to ra. */
@media (min-width:992px) { .dp-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Dạng danh sách: 1 sản phẩm 1 hàng, tên đủ chỗ nằm 1 dòng, giá/HH/nút xếp ngang.
   Chỉ đổi class trên #dpGrid nên không phải vẽ lại thẻ. */
.dp-grid.list { grid-template-columns:1fr; gap:8px; }
.dp-grid.list .dp-card { align-items:center; padding:8px 10px; }
.dp-grid.list .dp-thumb { width:56px; height:56px; flex-basis:56px; }
.dp-grid.list .dp-body { flex-direction:row; align-items:center; gap:14px; }
.dp-grid.list .dp-link { flex:1; min-width:0; }
.dp-grid.list .dp-name { -webkit-line-clamp:1; }
.dp-grid.list .dp-meta, .dp-grid.list .dp-foot { flex:0 0 auto; margin-top:0; }
.dp-grid.list .dp-foot .btn-rh-outline { margin-left:0; }
@media (max-width:767.98px) {
  /* Màn hẹp: dạng danh sách quay về xếp dọc, nếu không giá và nút chen nhau vỡ hàng. */
  .dp-grid.list .dp-body { flex-direction:column; align-items:flex-start; gap:6px; }
  .dp-grid.list .dp-name { -webkit-line-clamp:2; }
}
.dp-card { border:1px solid #f0f0f0; border-radius:14px; background:#fff; display:flex; gap:10px; padding:10px; transition:.18s; min-width:0; }
.dp-card:hover { box-shadow:0 6px 18px rgba(0,0,0,.10); transform:translateY(-2px); }
/* contain, KHÔNG cover: ảnh sản phẩm agency đủ mọi tỉ lệ, cover cắt mất mép. */
.dp-thumb { position:relative; width:92px; height:92px; flex:0 0 92px; border-radius:10px; background:#f6f7f9; overflow:hidden; display:flex; align-items:center; justify-content:center; }
/* Hạng bán chạy do agency xếp — thứ tự trong sheet, trước giờ không hiện ra. */
.dp-rank { position:absolute; top:0; left:0; background:rgba(17,17,17,.78); color:#fff; font-size:.66rem;
  font-weight:800; padding:2px 6px; border-radius:10px 0 8px 0; letter-spacing:.02em; }
.dp-thumb img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.dp-rate { padding:2px 8px; border-radius:7px; font-size:.72rem; font-weight:800; background:#198754; color:#fff; white-space:nowrap; }
.dp-body { display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.dp-link, .dp-thumb { text-decoration:none; color:inherit; }
.dp-link { display:block; }
.dp-link:hover .dp-name { color:#d6006a; text-decoration:underline; }
.dp-name { font-size:.82rem; font-weight:600; color:#212529; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dp-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dp-price { font-size:.8rem; font-weight:700; color:#d6006a; }
.dp-foot { display:flex; align-items:center; gap:6px; margin-top:auto; }
/* Nút gọn lại: 200 thẻ mà nút to thì tên sản phẩm và giá không còn chỗ. */
.dp-card .btn { font-size:.72rem; padding:5px 11px; border-radius:8px; }
.dp-foot .btn-rh-outline { margin-left:auto; padding:5px 9px; }
/* Tiền ước tính cho 1 đơn — %HH không cho KOC hình dung được bao nhiêu. */
/* Ngành hàng + shop lấy từ sheet agency. Chỉ hiện khi deal đã nhập lại CSV sau 09/09. */
.dp-src { display:flex; align-items:center; gap:10px; font-size:.71rem; color:#6c757d; min-width:0; }
.dp-src i { margin-right:3px; opacity:.75; }
.dp-cat { white-space:nowrap; }
.dp-shop { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.dp-est { font-size:.72rem; font-weight:700; color:#198754; background:#eaf6ef; padding:2px 7px; border-radius:7px; white-space:nowrap; }

/* ── Thanh công cụ grid sản phẩm ────────────────────────────────────── */
/* Deal có thể tới vài trăm SP nên phải có tìm/lọc/sắp. Mọi thao tác chạy
   client-side trên mảng đã tải, không gọi thêm API. */
.dp-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.dp-search { position:relative; flex:1 1 240px; min-width:0; }
.dp-search i { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:#adb5bd; font-size:.85rem; }
.dp-search input { width:100%; border:1px solid #e6e8ec; border-radius:10px; padding:7px 12px 7px 32px; font-size:.82rem; background:#fff; }
.dp-search input:focus { outline:none; border-color:#d6006a; box-shadow:0 0 0 3px rgba(214,0,106,.10); }
.dp-chips { display:flex; gap:6px; flex-wrap:wrap; }
.dp-chip { border:1px solid #e6e8ec; background:#fff; border-radius:999px; padding:6px 12px; font-size:.76rem; font-weight:700; color:#6c757d; }
.dp-chip:hover { border-color:#d6006a; color:#d6006a; }
.dp-chip.on { background:#d6006a; border-color:#d6006a; color:#fff; }
.dp-check { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:#6c757d; font-weight:600; white-space:nowrap; }
.dp-sort { border:1px solid #e6e8ec; border-radius:10px; padding:7px 10px; font-size:.78rem; background:#fff; color:#212529; max-width:100%; }
.dp-view { display:flex; gap:2px; border:1px solid #e6e8ec; border-radius:10px; overflow:hidden; }
.dp-view button { border:none; background:#fff; color:#6c757d; padding:7px 11px; font-size:.8rem; }
.dp-view button.on { background:#d6006a; color:#fff; }
.dp-count { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.78rem; color:#6c757d; margin-bottom:8px; }
.dp-clear { border:none; background:none; padding:0; color:#d6006a; font-size:.78rem; font-weight:700; }
.dp-more-wrap { display:flex; justify-content:center; margin-top:12px; }
.dp-more { font-size:.82rem; font-weight:700; padding:8px 20px; }
/* Khối trống chiếm trọn hàng của grid, không để lọt 1 ô lệch bên trái. */
.dp-empty { grid-column:1/-1; text-align:center; padding:34px 16px; color:#6c757d; font-size:.85rem; }
@media (max-width:575.98px) {
  .dp-tools { gap:6px; }
  .dp-search { flex-basis:100%; }
  .dp-sort { flex:1 1 100%; }
}
@media (max-width:575.98px) {
  .dp-grid { grid-template-columns:1fr; }
  .dp-thumb { width:72px; height:72px; flex-basis:72px; }
}
.deal-empty { text-align:center; padding:40px 20px; color:#6c757d; }

/* ── Thẻ rút gọn ở trang danh sách ──────────────────────────────────── */
/* Cả thẻ là 1 link sang /tiktok-shop-deals/{slug}; bìa thấp hơn trang chi tiết
   để nhiều chiến dịch cùng nằm gọn trong một màn. */
.deal-card-link { display:block; text-decoration:none; color:inherit; }
.deal-card-link:hover { box-shadow:0 8px 24px rgba(0,0,0,.12); transform:translateY(-2px); }
.deal-card-link { transition:.18s; }
.deal-cover.sm { max-height:190px; }
.deal-cover.sm img { max-height:190px; }
.deal-cover.sm.noimg { height:150px; }
.deal-count-sp { font-size:.82rem; color:#6c757d; font-weight:600; display:inline-flex; align-items:center; }

/* ── Lời mời cho khách / người chưa vào RioMCN ──────────────────────── */
/* Chỉ hiện với 2 nhóm đó; member không thấy gì thêm so với trước. */
.deal-promo { display:flex; gap:12px; align-items:flex-start; background:linear-gradient(135deg,#fff5f9,#fff);
  border:1px solid #ffd9e8; border-radius:14px; padding:14px 16px; margin-bottom:16px; }
.deal-promo > i { font-size:1.25rem; color:#d6006a; line-height:1.4; }
.deal-promo-text { font-size:.85rem; color:#212529; line-height:1.5; }
@media (max-width:575.98px) { .deal-promo { padding:12px; } }

/* ── Xem nhanh sản phẩm (modal tự dựng, không dùng Bootstrap JS) ─────── */
.dq-wrap { position:fixed; inset:0; z-index:1080; display:flex; align-items:center; justify-content:center; padding:16px; }
.dq-backdrop { position:absolute; inset:0; background:rgba(17,17,17,.55); }
.dq-panel { position:relative; background:#fff; border-radius:16px; max-width:760px; width:100%;
  max-height:90vh; overflow:auto; box-shadow:0 18px 50px rgba(0,0,0,.28); }
.dq-x { position:absolute; top:10px; right:10px; z-index:1; border:none; background:#fff; color:#6c757d;
  width:32px; height:32px; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.14); }
.dq-body { display:flex; gap:20px; padding:20px; }
.dq-media { position:relative; flex:0 0 280px; height:280px; border-radius:12px; background:#f6f7f9;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dq-media img { max-width:100%; max-height:100%; object-fit:contain; }
.dq-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
/* Tên đầy đủ, KHÔNG cắt dòng — đây là lý do chính người ta mở xem nhanh. */
.dq-name { font-size:1rem; font-weight:700; line-height:1.45; margin:0; color:#212529; }
.dq-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dq-price { font-size:1.05rem; font-weight:800; color:#d6006a; }
.dq-note { font-size:.76rem; color:#6c757d; line-height:1.5; margin:0; }
.dq-id { font-size:.76rem; color:#6c757d; }
.dq-id code { color:#212529; background:#f6f7f9; padding:1px 6px; border-radius:6px; }
.dq-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
body.dq-open { overflow:hidden; }
@media (max-width:767.98px) {
  .dq-body { flex-direction:column; padding:16px; gap:14px; }
  .dq-media { flex-basis:auto; width:100%; height:220px; }
}

/* ── Mobile gọn (14/09 — trang này mở trong AppView của app) ─────────────
   Khối tiêu đề đen chữ 1.5rem, bìa trống 210px, 3 thẻ hướng dẫn to và ô sắp xếp
   cao chiếm gần trọn màn đầu. Chỉ đổi dưới 576px; desktop giữ nguyên. */
@media (max-width:575.98px) {
  .tts-hero { background:#fff7ed; border:1px solid #fed7aa; color:#111827; border-radius:14px; padding:12px 14px; margin-bottom:12px; }
  .tts-hero::before { display:none; }
  .tts-hero h1 { font-size:1.02rem; font-weight:800; color:#111827; }
  .tts-hero h1 .bi { color:#ea580c; }
  .tts-hero p { color:#6b7280; font-size:.78rem; line-height:1.4; }

  .deal-promo { padding:10px 12px; margin-bottom:12px; gap:10px; }
  .deal-promo-text { font-size:.8rem; }

  .deal { border-radius:14px; margin-bottom:12px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
  .deal-cover, .deal-cover img { max-height:200px; }
  .deal-cover.sm, .deal-cover.sm img { max-height:160px; }
  /* Chưa có ảnh KV: dải cam nhạt thấp thay khối đen 210px + icon mờ. */
  .deal-cover.noimg, .deal-cover.sm.noimg { height:64px; background:linear-gradient(135deg,#fff1e6,#ffe4ea); }
  .deal-cover.noimg::after { display:none; }
  .deal-badge, .deal-count { top:10px; padding:4px 10px; font-size:.7rem; }
  .deal-badge { left:10px; }
  .deal-count { right:10px; }
  .deal-body { padding:12px 14px 14px; }
  .deal-title { font-size:.98rem; line-height:1.35; }
  .deal-sub { font-size:.8rem; line-height:1.45; margin-bottom:10px; }
  .perk { padding:4px 9px; font-size:.72rem; }
  .deal-cta .btn { font-size:.84rem; padding:8px 14px; }

  /* 3 bước: danh sách gọn thay 3 thẻ xám to. */
  .guide { gap:0; margin:12px 0 2px; border:1px solid #eef0f4; border-radius:12px; overflow:hidden; }
  .guide-step { border:0; border-radius:0; background:#fff; padding:9px 12px 9px 42px; }
  .guide-step + .guide-step { border-top:1px solid #f1f2f5; }
  .guide-step .n { left:12px; top:10px; width:20px; height:20px; background:#ea580c; }
  .guide-step .t { font-size:.8rem; margin-bottom:0; }
  .guide-step .d { font-size:.72rem; }

  .dp-head { margin:14px 0 8px; font-size:.88rem; }
  .dp-search input { padding:8px 12px 8px 32px; }
  .dp-chip { padding:5px 10px; font-size:.72rem; }
  .dp-sort { height:38px; padding:0 10px; font-size:16px; }
  .dp-view button { padding:6px 10px; }
  .dp-count { margin-bottom:6px; }
  .dp-card { padding:8px; gap:10px; border-radius:12px; }
  .dp-card:hover { transform:none; box-shadow:none; }
  .dp-card .btn { padding:5px 10px; }
}