/* Tuyển dụng dtr.vn — thẻ tin tuyển dụng (dùng ở /tuyen-dung, trang chi tiết, landing) + landing chiến dịch
 * (/tuyen-dung/content-creator-freelance: banner slider · lưới tin · clip review · dải CTA).
 * Brief "Content Creator Freelance" (KH 2026-10-28). Dựa trên token :root của từng trang
 * (--accent, --card, --border…) nên phải nạp SAU <style> của trang. */

/* ---------- Thẻ tin tuyển dụng (H3) ---------- */
.job-card .job-thumb{position:relative;display:grid;place-items:center;aspect-ratio:1/1;overflow:hidden;background:var(--elevated);}
.job-card .job-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 500ms,filter 300ms,opacity 300ms;}
.job-card:hover .job-thumb img{transform:scale(1.045);}
/* Bài không có ảnh (tin văn phòng) → logo DTR mờ trên nền tối thay vì ô trống. */
.job-card .job-thumb img.job-ph{width:46%;height:auto;object-fit:contain;opacity:.55;}
.job-card:hover .job-thumb img.job-ph{transform:none;opacity:.8;}
.job-card .job-thumb:has(.job-ph){background:radial-gradient(circle at 50% 40%,rgba(245,158,11,.12),var(--elevated) 70%);}
.job-card.is-ended .job-thumb img{filter:grayscale(1);opacity:.45;}
.job-badges{display:flex;align-items:center;gap:.5rem;min-height:22px;}
.job-pf{width:18px;height:18px;filter:brightness(0) invert(1);opacity:.9;}
.job-dx{margin-left:.15rem;font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:500;letter-spacing:.06em;color:var(--accent);}
.job-dx.is-ended{color:var(--muted-low);}
.job-title2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:1rem;}
.job-region{font-size:.82rem;color:var(--muted-low);}
.job-applied{font-size:.82rem;color:var(--muted);}
.job-applied b{color:#fff;font-weight:600;}
.job-tag{align-self:flex-start;margin-top:.15rem;padding:.2rem .55rem;border:1px solid rgba(245,158,11,.45);border-radius:.4rem;font-size:.74rem;font-weight:600;color:var(--accent);}
.job-card .news-body{padding:1rem 1.05rem 1.2rem;gap:.45rem;}
@media (max-width:639px){.job-card .news-body{padding:.8rem .8rem 1rem;}.job-title2{font-size:.92rem;}}

/* ---------- Banner slider (H2) ---------- */
.ccf-banners{position:relative;}
.ccf-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:1rem;}
.ccf-track::-webkit-scrollbar{display:none;}
.ccf-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;border-radius:1rem;overflow:hidden;background:var(--elevated);}
/* Lộ mép banner kế (H2-4) — chỉ khi có ≥ 2 banner. */
.ccf-banners.has-many .ccf-slide{flex-basis:calc(100% - 56px);}
.ccf-slide img{display:block;width:100%;height:auto;}
.ccf-ctas{display:flex;flex-wrap:wrap;gap:.7rem;}
/* Desktop: 2 nút nằm góc dưới-trái banner (design chừa trống vùng này). Mobile: xuống dưới ảnh, không che chữ. */
@media (min-width:768px){.ccf-ctas{position:absolute;left:6%;bottom:8%;}}
@media (max-width:767px){.ccf-ctas{padding:.9rem 0 .2rem;}.ccf-ctas .button{flex:1 1 auto;white-space:nowrap;padding-inline:1rem;}}
.ccf-ctas .button{min-height:48px;}
.ccf-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1rem;}
.ccf-dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.25);cursor:pointer;transition:width 200ms,background 200ms;}
.ccf-dots button[aria-current="true"]{width:22px;background:var(--accent);}

/* ---------- Tiêu đề section ---------- */
.ccf-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;}
.ccf-arrows{display:flex;gap:.5rem;}
.ccf-arrow{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:#fff;cursor:pointer;transition:border-color 200ms,background 200ms;}
.ccf-arrow:hover{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.08);}
.ccf-arrow:disabled{opacity:.35;cursor:default;}

/* ---------- Clip review (H4) ---------- */
.clip-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.25rem;}
.clip-track::-webkit-scrollbar{display:none;}
.clip-card{flex:0 0 calc((100% - 60px) / 4);scroll-snap-align:start;display:flex;flex-direction:column;gap:.7rem;min-width:0;}
@media (max-width:1023px){.clip-card{flex-basis:calc((100% - 40px) / 3);}}
@media (max-width:639px){.clip-card{flex-basis:64%;}} /* thấy ~1.5 clip (brief H4-5) */
.clip-thumb{position:relative;display:block;width:100%;aspect-ratio:9/16;border:1px solid var(--border);border-radius:.9rem;overflow:hidden;background:var(--elevated);cursor:pointer;padding:0;}
.clip-thumb img{width:100%;height:100%;object-fit:cover;transition:transform 500ms;}
.clip-thumb:hover img{transform:scale(1.04);}
.clip-thumb .clip-play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(to top,rgba(0,0,0,.45),transparent 45%);}
.clip-thumb .clip-play span{display:grid;place-items:center;width:56px;height:56px;border-radius:999px;background:rgba(10,10,15,.6);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:32px;transition:background 200ms,transform 200ms;}
.clip-thumb:hover .clip-play span{background:var(--accent);color:var(--background);transform:scale(1.06);}
.clip-thumb .clip-pf{position:absolute;top:.7rem;left:.7rem;width:28px;height:28px;display:grid;place-items:center;border-radius:.45rem;background:rgba(10,10,15,.65);}
.clip-thumb .clip-pf img{width:16px;height:16px;filter:brightness(0) invert(1);}
.clip-caption{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.86rem;line-height:1.55;color:var(--muted);}
.clip-creator{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#fff;min-width:0;}
.clip-creator .job-pf{width:16px;height:16px;}
.clip-creator .clip-avatar{width:26px;height:26px;border-radius:999px;object-fit:cover;background:var(--elevated);flex:none;}
.clip-creator a,.clip-creator span.clip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.clip-creator a{color:#fff;text-decoration:none;transition:color 200ms;}
.clip-creator a:hover{color:var(--accent);}

/* Popup phát clip — mobile toàn màn hình (brief H4-2). */
.clip-modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:1.25rem;background:rgba(5,5,8,.86);backdrop-filter:blur(6px);}
.clip-modal.open{display:flex;}
.clip-frame{position:relative;width:min(420px,100%);aspect-ratio:9/16;max-height:88vh;border-radius:.9rem;overflow:hidden;background:#000;}
.clip-frame.is-wide{width:min(960px,100%);aspect-ratio:16/9;}
.clip-frame iframe,.clip-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;}
.clip-frame video{object-fit:contain;}
.clip-close{position:absolute;top:1rem;right:1rem;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(10,10,15,.6);color:#fff;cursor:pointer;transition:transform 200ms,background 200ms;}
.clip-close:hover{transform:rotate(90deg);background:var(--accent);color:var(--background);}
@media (max-width:639px){.clip-modal{padding:0;}.clip-frame,.clip-frame.is-wide{width:100%;max-height:100vh;border-radius:0;}.clip-frame{height:100%;aspect-ratio:auto;}}

/* ---------- Dải CTA cuối trang ---------- */
.ccf-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;padding:2rem 2.2rem;border:1px solid rgba(245,158,11,.3);border-radius:1rem;background:linear-gradient(120deg,rgba(245,158,11,.14),rgba(26,26,36,.7) 55%);}
.ccf-cta h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(1.25rem,2.2vw,1.65rem);letter-spacing:-.02em;color:#fff;line-height:1.3;}
.ccf-cta p{margin-top:.4rem;color:var(--muted);font-size:.95rem;}
@media (max-width:639px){.ccf-cta{padding:1.5rem 1.25rem;}.ccf-cta .button{width:100%;}}
@media (prefers-reduced-motion:reduce){.ccf-track,.clip-track{scroll-behavior:auto;}}