/* === Knowledge (Mobile) — Matched to Desktop Aesthetic (Header rules removed) */
/* ใช้กับจอ <= 1024.98px */

:root{
  --bg:#f7fafc; --bg-2:#ffffff; --text:#111827; --muted:#6b7280; --ring:#e5e7eb;
  --brand:#2563eb; --accent:#38bdf8; --shadow:0 12px 34px rgba(2,8,23,.08); --radius:16px;
  --good1:#7C3AED; --good2:#A78BFA; --skill1:#2563EB; --skill2:#38BDF8; --happy1:#10B981; --happy2:#34D399;
  --hero-drift-speed:26s;
  --fg:var(--text); --line:var(--ring);
}

/* -------- Base -------- */
*{box-sizing:border-box}
html,body{margin:0; font-family:'Prompt',system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai",sans-serif; background:var(--bg); color:var(--text)}
body{overflow-x:hidden; padding-bottom:env(safe-area-inset-bottom)}
.container{max-width:1200px; margin:0 auto; padding:0 16px}
a{color:inherit; text-decoration:none}

/* ===== (Header styles removed — now controlled by global header.mobile.css) ===== */

/* -------- HERO (พื้นหลัง+glow เหมือน Desktop) -------- */
.hero{
  position:relative; overflow:visible; /* ปล่อยให้แสงล้นได้ */
  padding:34px 0 18px; border-bottom:1px solid var(--ring);
  background:
    radial-gradient(1200px 600px at 18% -10%, #e7f2ff, transparent 70%),
    radial-gradient(1200px 600px at 92% 110%, #e8fff6, transparent 65%),
    linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
}
.hero > *{position:relative; z-index:1}
.hero::before{
  content:""; position:absolute; inset:-10% -6%; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(900px 520px at 80% 110%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
  filter:blur(28px); animation:heroBgDrift var(--hero-drift-speed) ease-in-out infinite alternate; will-change:transform;
}
@keyframes heroBgDrift{
  0%{transform:translate3d(-2%,-1%,0)} 50%{transform:translate3d(2%,1%,0)} 100%{transform:translate3d(1%,-2%,0)}
}

/* Layout มือถือ: 1 คอลัมน์, โปร่งกำลังดี */
.hero .hero-inner{
  display:grid; grid-template-columns:1fr; align-items:center; gap:18px;
}
.hero .hero-text{
  max-width:min(92vw,640px); margin:0 auto; text-align:center;
}
.hero .hero-text h1{
  margin:0 0 10px; font-weight:800; letter-spacing:-0.01em;
  font-size:clamp(26px,6.2vw,34px); line-height:1.16;
}
.hero .hero-text h1 span,
.hero .hero-text h1 .gx,
.hero .hero-text h1 strong.accent{
  background-image:linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .hero-text p{margin:0; font-size:clamp(14px,4vw,16px); color:#6b7280}

.hero-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px}
.btn.lg{padding:12px 16px; font-size:15px; border-radius:14px}

/* Search */
.search{margin-top:12px; position:relative; max-width:560px; margin-left:auto; margin-right:auto}
.search input[type="search"]{
  width:100%; padding:12px 42px 12px 14px; border-radius:14px; border:1px solid var(--ring); background:#fff; color:#111827;
  box-shadow:0 6px 24px rgba(15,23,42,.06); font-size:15px; outline:none; transition:box-shadow .18s, border-color .18s;
}
.search input[type="search"]::placeholder{color:#94a3b8}
.search input[type="search"]:focus{
  border-color:#dbeafe; box-shadow:0 0 0 4px rgba(37,99,235,.15), 0 8px 26px rgba(15,23,42,.08)
}
.search .icon{position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:14px; color:#94a3b8; pointer-events:none}

/* Chips */
.filters{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; justify-content:center}
.chip{
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ring); background:#fff; color:#111827;
  padding:9px 12px; border-radius:999px; cursor:pointer; font-weight:700; transition:transform .14s, background .18s, box-shadow .18s;
}
.chip:hover{transform:translateY(-1px); background:#f8fafc}
.chip.active{
  color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--brand),var(--accent)); box-shadow:0 10px 26px rgba(37,99,235,.22);
}

/* Hero panel */
.hero-panel{
  background:#fff; border:1px solid var(--ring); border-radius:20px; box-shadow:0 22px 60px rgba(15,23,42,.12), 0 10px 24px rgba(15,23,42,.06);
  padding:16px; margin:0 auto; max-width:min(92vw,640px);
}
.hero-panel .pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--ring);
  background:#f8fafc; font-weight:800; font-size:13px; color:#0f172a;
}
.hero-panel ul{margin:12px 0 6px; padding:0; list-style:none}
.hero-panel li{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px}
.hero-panel li::before{content:"•"; font-size:18px; line-height:1; transform:translateY(-2px)}
.hero-panel .note{font-size:12px; color:#6b7280; margin-top:4px}

/* Full-bleed hero inside container */
.container > .hero{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw}
.hero .hero-inner{max-width:1200px; margin:0 auto; padding:0 16px}

/* -------- Cards Grid (มือถือ: 1 คอลัมน์) -------- */
.cards{display:grid; grid-template-columns:repeat(12,1fr); gap:14px; margin:18px 0 28px}
.card{
  grid-column:span 12; background:#fff; border:1px solid var(--ring); border-radius:16px; overflow:hidden;
  box-shadow:0 12px 30px rgba(15,23,42,.06); transition:transform .18s, box-shadow .18s, border-color .18s;
}
.card .thumb{position:relative; aspect-ratio:4/3; background:#f1f5f9; border-bottom:1px solid var(--ring); overflow:hidden}
.card .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .35s; filter:saturate(112%)}
.card .body{padding:14px}
.card .title{margin:0 0 6px; font-size:18px; font-weight:800; letter-spacing:.2px}
.meta{display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:#6b7280; font-size:13px}
.meta .dot{display:inline-block; width:8px; height:8px; border-radius:50%}
.dot.good{background:linear-gradient(45deg,var(--good1),var(--good2))}
.dot.skill{background:linear-gradient(45deg,var(--skill1),var(--skill2))}
.dot.happy{background:linear-gradient(45deg,var(--happy1),var(--happy2))}
.actions{display:flex; gap:8px; align-items:center; margin-top:12px}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 30px rgba(2,8,23,.12); border-color:#dbeafe}

/* -------- Status Pills -------- */
.status{
  display:inline-flex; align-items:center; gap:6px; appearance:none; -webkit-appearance:none;
  border:1px solid var(--ring); border-radius:999px; padding:8px 12px; font-size:12px; color:#111827;
  background:#fff; cursor:pointer; box-shadow:inset 0 -1px 0 rgba(0,0,0,.02);
  transition:background .15s, border-color .15s, transform .12s;
}
.status .dot{width:8px; height:8px; border-radius:50%}
.status:hover{background:#f8fafc}
.status:active{transform:translateY(1px)}
.status.unread .dot{background:#94a3b8}
.status.inprogress{background:#fef9c3; border-color:#fde68a}
.status.inprogress .dot{background:#f59e0b}
.status.done{background:#dcfce7; border-color:#bbf7d0}
.status.done .dot{background:#10b981}

/* -------- Toast -------- */
.toast{
  position:fixed; left:50%; bottom:max(16px, env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px); background:#111827; color:#fff;
  padding:10px 14px; border-radius:12px; opacity:0; pointer-events:none; transition:.25s; z-index:50;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}