/* TẢI VIDEO TIKTOK — hero xanh giống ảnh + khu kết quả dùng tokens TechPulse */

.tptk-wrap{ max-width:1000px; margin:10px auto 0; font-family:var(--tp-font-body); }

/* ---- Hero ---- */
.tptk-hero{
	background:linear-gradient(135deg,#1e50d8 0%,#2563eb 60%,#1d4ed8 100%);
	color:#fff; border-radius:var(--tp-radius-lg); padding:46px 22px 40px; text-align:center;
	box-shadow:var(--tp-shadow);
}
.tptk-hero h1{ font-family:var(--tp-font-display); font-weight:800; font-size:clamp(1.6rem,4.2vw,2.4rem); line-height:1.15; margin:0 0 10px; color:#fff; }
.tptk-sub{ margin:0 auto 26px; max-width:640px; font-size:1rem; color:rgba(255,255,255,.92); }

.tptk-form{ display:flex; gap:8px; max-width:760px; margin:0 auto; background:#fff; border-radius:12px; padding:8px; box-shadow:0 14px 34px rgba(0,0,0,.22); }
.tptk-input{ flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:1rem; padding:12px 14px; color:#111827; }
.tptk-input::placeholder{ color:#9aa1ab; }
.tptk-paste{ display:inline-flex; align-items:center; gap:6px; border:1px solid #c7d2fe; background:#eef2ff; color:#3b41d6; font-weight:700; font-size:.9rem; border-radius:8px; padding:0 14px; cursor:pointer; white-space:nowrap; transition:filter .15s var(--tp-ease); }
.tptk-paste:hover{ filter:brightness(.97); }
.tptk-go{ display:inline-flex; align-items:center; gap:8px; background:#16a34a; color:#fff; font-weight:700; font-size:.95rem; border:0; border-radius:8px; padding:12px 22px; cursor:pointer; white-space:nowrap; transition:filter .15s var(--tp-ease); }
.tptk-go:hover{ filter:brightness(1.06); }
.tptk-go:disabled{ opacity:.7; cursor:progress; }

.tptk-feats{ display:flex; flex-wrap:wrap; gap:16px 28px; justify-content:center; margin-top:24px; }
.tptk-feat{ display:flex; align-items:center; gap:8px; color:#fff; font-weight:600; font-size:.92rem; }
.tptk-feat .ck{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); border-radius:5px; font-size:.72rem; }

/* ---- Kết quả ---- */
.tptk-results{ margin:22px auto 0; }
.tptk-status{ text-align:center; color:var(--tp-ink-mute); padding:14px; font-size:.95rem; }
.tptk-status.err{ color:#dc2626; }
.tptk-spin{ display:inline-block; width:18px; height:18px; border:2px solid var(--tp-line-strong); border-top-color:var(--tp-accent); border-radius:50%; animation:tptk-spin .7s linear infinite; vertical-align:-4px; margin-right:8px; }
@keyframes tptk-spin{ to{ transform:rotate(360deg); } }

.tptk-bar{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.tptk-bar h3{ margin:0; font-family:var(--tp-font-display); font-size:1.1rem; color:var(--tp-ink); }
.tptk-all{ background:#16a34a; color:#fff; border:0; border-radius:var(--tp-radius); padding:10px 18px; font-weight:700; cursor:pointer; }
.tptk-all:hover{ filter:brightness(1.06); }

.tptk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.tptk-results.is-single .tptk-grid{ grid-template-columns:minmax(0,460px); justify-content:center; }

.tptk-card{ background:var(--tp-surface); border:1px solid var(--tp-line); border-radius:var(--tp-radius-lg); overflow:hidden; box-shadow:var(--tp-shadow); display:flex; flex-direction:column; }
.tptk-card .thumb{ aspect-ratio:9/16; max-height:300px; background:var(--tp-bg-sunken) no-repeat center/cover; }
.tptk-results.is-single .tptk-card .thumb{ aspect-ratio:16/10; max-height:260px; }
.tptk-card .meta{ padding:12px; display:flex; flex-direction:column; gap:8px; flex:1; }
.tptk-card .ttl{ font-size:.9rem; line-height:1.4; color:var(--tp-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tptk-card .auth{ font-size:.8rem; color:var(--tp-ink-mute); }
.tptk-card .acts{ margin-top:auto; display:flex; gap:8px; }
.tptk-dl{ flex:1; background:#16a34a; color:#fff; border:0; border-radius:var(--tp-radius); padding:10px; font-weight:700; font-size:.86rem; cursor:pointer; text-align:center; transition:filter .15s var(--tp-ease); }
.tptk-dl:hover{ filter:brightness(1.06); }
.tptk-dl.alt{ flex:0 0 auto; background:var(--tp-bg-soft); color:var(--tp-ink-soft); border:1px solid var(--tp-line); }
.tptk-dl.alt:hover{ border-color:var(--tp-accent); color:var(--tp-accent); filter:none; }

@media (max-width:540px){
	.tptk-form{ flex-wrap:wrap; }
	.tptk-input{ flex:1 1 100%; }
	.tptk-paste,.tptk-go{ flex:1; justify-content:center; }
	.tptk-hero{ padding:34px 16px 30px; }
}