/* 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; }
.dp-card { border:1px solid #f0f0f0; border-radius:14px; background:#fff; display:flex; gap:12px; padding:10px; transition:.18s; }
.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 { width:88px; height:88px; flex:0 0 88px; border-radius:10px; background:#f6f7f9; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.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:6px; 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; }
.dp-card .btn { font-size:.75rem; }
@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; }