/* Trang /tuyen-dung: thanh lọc dính (dropdown) + danh sách rộng + cột Tài trợ bên phải. JS: assets/js/p-jdd.js. Phân phối ô trả phí: src/modules/dental/job-slots.js */

/* ---------- thanh công cụ dính ---------- */
.jbar{position:sticky;top:var(--hdr-h,103px);z-index:15;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);margin:0 0 8px}
.jf-top{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;min-width:0}
.jf-top .cnt{font-size:13px;color:var(--ink-2);white-space:nowrap}
.jf-top .cnt b{color:var(--ink);font-size:15px}
.jsort{margin-left:auto;display:flex;gap:4px;align-items:center;min-width:0}
.jsort .tab{white-space:nowrap;font-size:13px;padding:6px 11px;min-height:32px}
.jf-open,.jf-sh,.jf-bd{display:none}
.jf-sheet{border-top:1px solid var(--line-2)}
.jf-dds{display:flex;flex-wrap:wrap;gap:6px;padding:7px 8px 8px 12px;align-items:center}

.jdd{position:relative}
.jdd-b{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.jdd-b i:first-child{font-size:15px}
.jdd-b .cv{font-size:11px;color:var(--ink-3);transition:transform .2s}
.jdd-b:hover{border-color:var(--ink-4)}
.jdd.open .jdd-b{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-s)}
.jdd.open .jdd-b .cv{transform:rotate(180deg)}
.jdd.act .jdd-b{border-color:var(--mint);background:var(--mint-s)}
.jdd .n,.jf-open .n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--mint);color:#fff;font-size:11px;font-weight:700;line-height:1}
.jdd-p{padding:6px;min-width:0}
.jdd-js .jdd-p{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:230px;max-width:320px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);padding:6px}
.jdd-js .jdd.open .jdd-p{display:block}
.jdd-js .jdd.r .jdd-p{left:auto;right:0}
.jdd-p .ck{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:var(--r-s);font-size:14px;color:var(--ink);cursor:pointer;margin:0}
.jdd-p .ck:hover{background:var(--bg-2)}
.jdd-p .ck input{accent-color:var(--mint);width:16px;height:16px;flex:none;margin:0}
.jdd-p .ck .n{margin-left:auto;background:var(--bg-3);color:var(--ink-3);font-weight:600}
.jdd-p .ck[hidden]{display:none}
.jdd-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:8px 9px 2px}
.jdd-q{display:flex;align-items:center;gap:6px;margin:2px 2px 6px;padding:0 9px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff}
.jdd-q i{color:var(--ink-3);font-size:15px}
.jdd-q input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:14px;height:34px}
.jdd-q:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-s)}
.jdd-list{max-height:248px;overflow-y:auto}
.jdd-f{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:8px 4px 2px;border-top:1px solid var(--line-2)}
.jdd-clr{background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer;padding:6px 4px}
.jdd-clr:hover{color:var(--rose)}
.jf-ft{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:1px solid var(--line-2)}
.jdd-js .jf-ft{display:none}
.jf-clear,.jchips-x{font-size:13px;font-weight:600;color:var(--blue)}
.jf-clear:hover,.jchips-x:hover{text-decoration:underline}

/* ---------- thẻ lọc đang áp dụng ---------- */
.jchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.jchips:empty{display:none}
.jchips-l{font-size:12px;color:var(--ink-3);margin-right:2px}
.jchip{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 11px;border-radius:999px;background:var(--blue-s);border:1px solid #c6d7f6;color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap}
.jchip i{font-size:11px;color:var(--ink-3)}
.jchip:hover{border-color:var(--blue)}
.jchip:hover i{color:var(--rose)}

/* ---------- bố cục chính ---------- */
.jlay{display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:16px;align-items:start}
.jmain{min-width:0}
.jmain .rlist{gap:8px}
.jslot{display:grid;gap:0;border:1px solid #f1cfa6;border-radius:var(--r);background:var(--orange-s);padding:0 0 0}
.jslot .job{border:0;border-top:1px solid #f1cfa6;border-radius:0 0 var(--r) var(--r);margin:0}
.jslot-tag{display:flex;align-items:center;gap:6px;padding:5px 12px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--orange-ink)}
.jslot-tag i{font-size:13px}
.jnote{margin-top:12px}

/* ---------- cột Tài trợ ---------- */
.jside{position:sticky;top:calc(var(--hdr-h,103px) + var(--jbar-h,90px) + 14px);display:grid;gap:10px;max-height:calc(100vh - var(--hdr-h,103px) - var(--jbar-h,90px) - 24px);overflow-y:auto;scrollbar-width:none;padding-bottom:2px}
.jside::-webkit-scrollbar{display:none}
.pb{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px}
.pb header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pb h2{font-size:15px;font-weight:700;display:flex;align-items:center;gap:7px;margin:0;line-height:1.3}
.pb h2 i{font-size:17px;color:var(--orange-ink)}
.pb-tag{margin-left:auto;flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:3px;background:var(--blue-s);color:var(--blue)}
.pb-tag.hot{background:var(--orange-s);color:var(--orange-ink)}
.pb-tag.spon{background:#fff4e5;color:var(--orange-ink);border:1px solid #f8d6b5}
.pb-paid{border-top:3px solid var(--gold,#d9a441)}
.pb-free{border-top-color:var(--line);background:var(--bg-2)}
.pb-emp,.pb-jobs,.pb-open{list-style:none;margin:0;padding:0}
.pb-emp li+li,.pb-jobs li+li{border-top:1px solid var(--line-2)}
.pb-emp a{display:flex;align-items:center;gap:10px;padding:9px 0;color:inherit}
.pb-emp .lg{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:13px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.pb-emp .lg img{width:100%;height:100%;object-fit:cover;display:block}
.pb-emp .nm{min-width:0;flex:1}
.pb-emp b,.pb-jobs b{display:block;font-size:14px;font-weight:700;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pb-emp small,.pb-jobs small{display:block;font-size:12px;color:var(--ink-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis}
.pb-emp .bdg{flex:none;font-size:11px}
.pb-emp a:hover b,.pb-jobs a:hover b{color:var(--blue)}
.pb-jobs a{display:block;padding:9px 0;color:inherit}
.pb-jobs .sal{display:inline-flex;gap:4px;align-items:center;font-size:12px;font-weight:700;color:var(--mint);margin-top:3px}
.pb-open li{display:flex;gap:9px;font-size:12.5px;color:var(--ink-2);padding:6px 0;line-height:1.45}
.pb-open li>i{font-size:17px;color:var(--ink-3);margin-top:1px;flex:none}
.pb-open b{display:block;font-size:13px;color:var(--ink)}
.pb-lk{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--blue);margin-top:4px}
.pb-cta p{font-size:13px;color:var(--ink-2);line-height:1.55;margin:0 0 10px}
.pb-cta .btn{width:100%;justify-content:center}
.pb-cta .up{margin-top:10px;font-size:12px;line-height:1.5;color:#7a4a0c;background:var(--orange-s);border-radius:var(--r-s);padding:8px 10px;display:flex;gap:7px}
.pb-cta .up i{color:var(--orange-ink);font-size:15px;flex:none;margin-top:1px}
.pb-cta .up a{color:var(--blue);font-weight:600}

/* dải nổi bật trên điện thoại */
.jstrip{display:none}

/* ---------- máy tính nhỏ / máy tính bảng ---------- */
@media (max-width:1000px){
  .jlay{grid-template-columns:minmax(0,1fr) 260px}
  .jsort .tab{padding:6px 9px}
}

/* ---------- điện thoại: một cột, bảng lọc trượt từ dưới lên ---------- */
@media (max-width:720px){
  .jlay{grid-template-columns:minmax(0,1fr);gap:10px}
  .jside{position:static;max-height:none;overflow:visible}
  .jside .pb-paid{display:none}
  .jbar{margin-bottom:8px}
  .jf-top{gap:8px;padding:6px 8px}
  .jf-top .cnt{font-size:12px;flex:none}
  .jf-top .cnt b{font-size:14px}
  .jsort{flex:1;margin-left:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none}
  .jsort::-webkit-scrollbar{display:none}
  .jsort .tab{flex:none;scroll-snap-align:start;min-height:34px}
  .jf-open{display:inline-flex;align-items:center;gap:6px;flex:none;height:36px;padding:0 12px;background:var(--ink);color:#fff;border:0;border-radius:var(--r-s);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
  .jf-open i{font-size:15px}
  .jf-open .n{background:#fff;color:var(--ink)}
  .jbar.sheet-open{z-index:90}
  .jf-bd{display:block;position:fixed;inset:0;background:rgba(20,33,61,.45)}
  .jf-bd[hidden]{display:none}
  .jf-sheet{display:none;position:fixed;left:0;right:0;bottom:0;z-index:2;flex-direction:column;max-height:86dvh;background:#fff;border-radius:14px 14px 0 0;border-top:0;box-shadow:0 -10px 40px rgba(20,33,61,.25)}
  .jbar.sheet-open .jf-sheet{display:flex;animation:jfUp .26s cubic-bezier(.2,.8,.2,1)}
  .jf-sh{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-size:16px}
  .jf-sh b{display:flex;gap:8px;align-items:center;font-weight:800}
  .jf-sh b i{color:var(--blue)}
  .jf-x{width:40px;height:40px;border:0;background:var(--bg-2);border-radius:50%;font-size:16px;color:var(--ink);cursor:pointer;display:grid;place-items:center}
  .jf-dds{display:block;flex:1;min-height:0;overflow-y:auto;padding:4px 14px 8px}
  .jdd{padding:10px 0;border-bottom:1px solid var(--line-2)}
  .jdd:last-child{border:0}
  .jdd-b{pointer-events:none;border:0;background:none!important;box-shadow:none!important;height:auto;padding:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
  .jdd-b .cv{display:none}
  .jdd-js .jdd-p,.jdd-p{display:grid!important;position:static;grid-template-columns:1fr 1fr;gap:4px;min-width:0;max-width:none;border:0;box-shadow:none;padding:0;background:none}
  .jdd-p .ck{min-height:44px;padding:10px;border:1px solid var(--line);font-size:14px}
  .jdd-p .ck:has(input:checked){border-color:var(--mint);background:var(--mint-s);font-weight:600}
  .jdd-prov,.jdd-prov .jdd-list{grid-template-columns:1fr}
  .jdd-prov .jdd-list{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-height:220px}
  .jdd-q,.jdd-h{grid-column:1/-1}
  .jdd-f{display:none!important}
  .jf-ft,.jdd-js .jf-ft{display:flex;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff}
  .jf-ft .btn{min-height:44px;padding:0 22px;font-size:15px}
  .jf-clear{font-size:14px;padding:10px 4px}
  html.jf-lock{overflow:hidden}
  .jchips{flex-wrap:nowrap;overflow-x:auto;margin-bottom:8px;padding-bottom:2px;scrollbar-width:none}
  .jchips::-webkit-scrollbar{display:none}
  .jchips>*{flex:none}
  /* dải nổi bật / tài trợ trượt ngang trên danh sách */
  .jstrip{display:block;margin:0 0 10px}
  .jstrip-in{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px}
  .jstrip-in::-webkit-scrollbar{display:none}
  .jcard{flex:none;width:224px;scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold,#d9a441);border-radius:var(--r);padding:9px 11px;color:inherit}
  .jcard b{font-size:14px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .jcard small{font-size:12px;color:var(--ink-3);display:flex;gap:4px;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .jcard small.sal{color:var(--mint);font-weight:700}
  .jcard-tag{align-self:flex-start;display:inline-flex;gap:4px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 6px;border-radius:3px;background:var(--blue-s);color:var(--blue)}
  .jcard-tag.hot{background:var(--orange-s);color:var(--orange-ink)}
  .jcard-tag.spon{background:#fff4e5;color:var(--orange-ink)}
  .jcard-tag.vip{background:#17140c;color:#f3d98b}
}
@keyframes jfUp{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.jbar.sheet-open .jf-sheet{animation:none}.jdd-b .cv{transition:none}}
/* máy tính: dropdown tràn ra ngoài khung → khung lọc không được phủ mép mờ (mép mờ chỉ dành cho bảng cuộn trên điện thoại) */
@media (min-width:721px){.jf-dds.vs{-webkit-mask-image:none!important;mask-image:none!important;overflow:visible}}
.jdd-f .btn i,.jf-ft .btn i{color:#fff}
@media (max-width:720px){.jf-top .cnt-x{display:none}.jdd-prov .jdd-list{grid-template-columns:1fr}}
.jchips-x{display:inline-flex;align-items:center;min-height:32px;padding:0 6px}