/* ===== ธีม Funcrowd — สีดึงจากโลโก้ (อินดิโก้-ม่วง ไล่เฉด) ===== */
:root{
  --brand:#5560AE; --brand-light:#7C87D4; --brand-deep:#3B3765; --brand-darker:#2C2A4D;
  --brand-soft:#ECEEF9; --brand-ring:rgba(85,96,174,.35);

  --bg:#F6F7FB; --surface:#FFFFFF; --ink:#1E1F33; --ink-2:#63667F; --line:#E3E5F0;
  --chip:#EFF1F8; --danger:#B3372F;
  --good-bg:#E4F1E7; --good-ink:#256B38;
  --warn-bg:#FBF0D7; --warn-ink:#87610F;
  --check-bg:#F6E5F3; --check-ink:#8E3480;
  --shadow:0 1px 2px rgba(30,31,51,.05),0 6px 18px rgba(59,55,101,.07);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand:#8B95DC; --brand-light:#A6AFE8; --brand-deep:#C3C9F0; --brand-darker:#D6DAF6;
    --brand-soft:#282A45; --brand-ring:rgba(139,149,220,.4);

    --bg:#14151F; --surface:#1D1F2E; --ink:#E9EAF4; --ink-2:#9A9DB8; --line:#2E3145;
    --chip:#262940; --danger:#E08880;
    --good-bg:#1F3325; --good-ink:#8FCC9C;
    --warn-bg:#37301A; --warn-ink:#E0B95C;
    --check-bg:#3A2338; --check-ink:#E294D6;
    --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --brand:#8B95DC; --brand-light:#A6AFE8; --brand-deep:#C3C9F0; --brand-darker:#D6DAF6;
  --brand-soft:#282A45; --brand-ring:rgba(139,149,220,.4);
  --bg:#14151F; --surface:#1D1F2E; --ink:#E9EAF4; --ink-2:#9A9DB8; --line:#2E3145;
  --chip:#262940; --danger:#E08880;
  --good-bg:#1F3325; --good-ink:#8FCC9C;
  --warn-bg:#37301A; --warn-ink:#E0B95C;
  --check-bg:#3A2338; --check-ink:#E294D6;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
/* ต้องมาก่อนทุก rule ที่ตั้ง display — ไม่งั้น element ที่ใส่ hidden จะยังโผล่มาบังหน้าจอ */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 15px/1.6 "IBM Plex Sans Thai",-apple-system,"Segoe UI",sans-serif}
a{color:var(--brand)}
.wrap{max-width:1240px;margin:0 auto;padding:0 18px 80px}

/* ---------- Header ---------- */
.site-head{background:linear-gradient(120deg,var(--brand-darker),var(--brand) 60%,var(--brand-light));
  color:#fff;padding:18px 0 20px;margin-bottom:20px}
.site-head .inner{max-width:1240px;margin:0 auto;padding:0 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{width:46px;height:46px;border-radius:11px;object-fit:cover;background:#fff;
  padding:3px;flex:0 0 auto;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.site-head h1{font:700 clamp(19px,2.6vw,26px)/1.25 "Bai Jamjuree","IBM Plex Sans Thai",sans-serif;
  margin:0;letter-spacing:.2px}
.site-head .tag{font-size:12.5px;opacity:.9;margin:2px 0 0}
.head-spacer{flex:1}
.head-link{color:#fff;text-decoration:none;font-size:13px;font-weight:500;
  border:1px solid rgba(255,255,255,.45);border-radius:8px;padding:7px 14px;white-space:nowrap}
.head-link:hover{background:rgba(255,255,255,.16)}

/* ---------- แถบกรอง ---------- */
.controls{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:16px;box-shadow:var(--shadow)}
.filter-toggle{display:none}
.row1{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
input[type=search],select,input[type=text],input[type=url],input[type=password],textarea{
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:10px 13px;font:inherit;font-size:14px}
input[type=search]{flex:1 1 260px;min-width:180px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-ring)}
.provs{display:flex;flex-wrap:wrap;gap:7px}
.pchip{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;
  padding:6px 14px;font:500 13px/1.4 inherit;cursor:pointer;transition:.12s}
.pchip:hover{border-color:var(--brand-light)}
.pchip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.pchip .n{opacity:.7;font-size:11.5px;margin-left:5px}

.count{color:var(--ink-2);font-size:13px;margin:0 0 14px;display:flex;
  flex-wrap:wrap;gap:10px;align-items:center}

/* ---------- การ์ด ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.card-top{display:flex;gap:12px;padding:15px 16px 0}
.avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--brand-soft);border:2px solid var(--line)}
.avatar-ph{width:54px;height:54px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand-light),var(--brand));color:#fff;
  font:700 19px/1 "Bai Jamjuree",sans-serif;border:2px solid var(--line)}
.card-id{min-width:0;flex:1}
.card h3{margin:0 0 2px;font:600 16.5px/1.35 "Bai Jamjuree","IBM Plex Sans Thai",sans-serif;
  overflow-wrap:anywhere}
.handle{font:500 12.5px/1.4 "IBM Plex Mono",monospace;color:var(--brand);
  text-decoration:none;overflow-wrap:anywhere}
.handle:hover{text-decoration:underline}
.card-body{padding:10px 16px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.meta{display:flex;flex-wrap:wrap;gap:5px}
.tag{background:var(--chip);color:var(--ink-2);border-radius:6px;padding:2px 9px;
  font-size:11.5px;font-weight:500}
.tag.prov{background:var(--brand-soft);color:var(--brand-deep)}
.tag.conf-h{background:var(--good-bg);color:var(--good-ink)}
.tag.conf-m{background:var(--warn-bg);color:var(--warn-ink)}
.tag.conf-c{background:var(--check-bg);color:var(--check-ink)}
.fol{font-size:12.5px;color:var(--ink-2)}
.fol b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.note{font-size:12px;color:var(--ink-2)}

/* ---------- carousel วิดีโอ ---------- */
.vids{border-top:1px solid var(--line);padding:11px 0 13px;margin-top:auto}
.vids-h{font-size:11.5px;font-weight:600;color:var(--ink-2);padding:0 16px 8px;
  letter-spacing:.3px;text-transform:uppercase}
.vid-track{display:flex;gap:9px;overflow-x:auto;padding:0 16px 3px;
  scroll-snap-type:x mandatory;scrollbar-width:thin}
.vid-track::-webkit-scrollbar{height:5px}
.vid-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.vid{flex:0 0 108px;scroll-snap-align:start;text-decoration:none;color:inherit}
.vid-thumb{width:108px;height:150px;border-radius:9px;object-fit:cover;display:block;
  background:linear-gradient(140deg,var(--brand-soft),var(--chip));border:1px solid var(--line)}
.vid-ph{width:108px;height:150px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-light),var(--brand));color:#fff;font-size:24px;
  border:1px solid var(--line)}
.vid-cap{font-size:11px;line-height:1.35;color:var(--ink-2);margin-top:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vid-stats{font-size:10.5px;color:var(--brand);font-weight:600;margin-top:2px}
.vid:hover .vid-thumb,.vid:hover .vid-ph{outline:2px solid var(--brand);outline-offset:1px}

.empty{text-align:center;color:var(--ink-2);padding:60px 0}
.btn{background:var(--brand);color:#fff;border:none;border-radius:10px;padding:10px 18px;
  font:600 13.5px/1.4 inherit;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn.ghost:hover{background:var(--chip);filter:none}
.btn.small{padding:7px 13px;font-size:12.5px}
footer{margin-top:36px;color:var(--ink-2);font-size:12.5px;
  border-top:1px solid var(--line);padding-top:16px}

/* ---------- มือถือ: ซ่อน/แสดงแถบกรองได้ ---------- */
@media (max-width:720px){
  .wrap{padding:0 12px 60px}
  .site-head{padding:14px 0 16px}
  .logo{width:38px;height:38px}
  .grid{grid-template-columns:1fr}
  .filter-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;background:none;border:none;color:var(--ink);font:600 14px/1.4 inherit;
    padding:0;cursor:pointer}
  .filter-toggle .caret{transition:transform .2s;color:var(--brand)}
  .controls[data-open="false"] .filter-toggle .caret{transform:rotate(-90deg)}
  .controls[data-open="false"] .filter-body{display:none}
  .filter-body{padding-top:13px}
}
@media (min-width:721px){.filter-body{display:block!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}