/* ===================== BASE (from home.css) ===================== */
:root{
  --bg: #f7fafc;
  --bg-2: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --ring: #e5e7eb;
  --brand: #2563eb;
  --brand-2:#60a5fa;
  --accent: #34d399;
  --shadow: 0 12px 34px rgba(2,8,23,.08);
  --radius: 16px;
  --hero-drift-speed: 26s;
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{
  font-family:'Prompt',system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai",sans-serif;
  background:
    radial-gradient(900px 500px at 70% -10%, rgba(96,165,250,.12), transparent),
    linear-gradient(180deg, #f6fbff 0%, var(--bg) 38%);
  color:var(--text);
  margin:0;
}

.container{max-width:1120px; margin:0 auto; padding:0 16px}
a{color:inherit; text-decoration:none}

/* Focus */
:where(a, button, .chip, .card):focus{outline:none}
:where(a, button, .chip, .card):focus-visible{
  box-shadow:0 0 0 3px rgba(37,99,235,.25), 0 0 0 6px rgba(37,99,235,.12);
  border-radius:12px;
}

/* HERO base (จะถูก override ด้านล่างสำหรับ mobile) */
.hero{
  position:relative; overflow:hidden;
  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, #ffffff);
  border-bottom:1px solid var(--ring);
}
.hero > *{position:relative; z-index:1}

/* Cards base */
.cards{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.card{
  background:#fff; border:1px solid var(--ring); border-radius:20px; padding:16px;
  color:inherit; box-shadow:0 12px 30px rgba(15,23,42,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:22px;
  background:linear-gradient(135deg, rgba(37,99,235,.22), rgba(52,211,153,.22));
  opacity:0; transition:opacity .18s ease;
}

/* Footer */
.site-footer{border-top:1px solid var(--ring); background:var(--bg-2)}
.footer-inner{display:flex; justify-content:space-between; align-items:center; padding:16px 0}

@media (max-width:1024px){ .cards{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
}

/* ===================== CATEGORIES: MOBILE OVERRIDES ===================== */
/* categories.mobile.css — Mobile-only overrides */

:root{ --ring:#e5e7eb; --bg-2:#fff; --brand:#2563eb; --text:#0f172a; }

body{
  overflow-x:hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============ Hero / Search / Chips ============ */
.hero{ background: transparent; position:relative; overflow: visible !important; }
.hero-inner{ padding: 20px 0 56px; position:relative; overflow: visible !important; }
.hero-text{ max-width: 92vw; margin: 0 auto; text-align: center; }
.hero-text h1{ margin: 2px 0 14px; font-size: clamp(22px,6.2vw,30px); line-height: 1.15; }
.hero .hero-text h1 span{
  color: var(--brand) !important; background: none !important;
  -webkit-background-clip: initial !important; text-shadow: none !important;
}

/* Toolbar */
.toolbar{
  gap: 12px; display:flex; flex-direction:column; align-items:center;
  position: relative !important;
  width: 100vw !important; max-width: 100vw !important;
  left: 50% !important; transform: translateX(-50%) !important;
  padding-left: 12px !important; padding-right: 12px !important;
  overflow: visible !important;
  box-sizing: border-box !important; /* ป้องกัน 100vw + padding ล้นขอบ */
}

/* Search input */
.input{
  display:block !important; box-sizing:border-box !important;
  width: min(92vw, 640px) !important;
  margin-left:auto !important; margin-right:auto !important;
  padding: 12px 84px 12px 40px; font-size: 16px;
  border: 1.5px solid var(--ring); border-radius: 14px; background: #fff;
  box-shadow: 0 6px 20px rgba(15,23,42,.08);
}

/* Chips row (base) */
.tags{
  position: relative !important;
  /* ใช้ grid แนวนอนเพื่อการเลื่อนที่นิ่งกว่า flex บนมือถือ */
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: max-content !important;
  gap: 10px !important;
  justify-content: start !important;
  align-items: center !important;
  white-space: nowrap !important;        /* กันการตัดบรรทัดของชิป */
  pointer-events: auto !important;       /* ให้รับ gesture เลื่อนเอง */
  max-width: 100vw !important;           /* ไม่ให้คอนเทนเนอร์กว้างเกินหน้าจอ */
  padding-left: 12px !important; padding-right: 12px !important;
  padding-top: 6px !important; padding-bottom: 6px !important; /* ขยาย hit area แนวตั้ง */
  z-index: 10 !important;                /* กันเลเยอร์อื่นบังพื้นที่คลิก */

  overflow-x: auto !important; overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important; touch-action: pan-x !important;
  -ms-touch-action: pan-x !important;    /* Edge/IE (เผื่อเครื่องเก่า) */

  /* กันการคลิป/มาสก์ */
  -webkit-mask: none !important; mask: none !important;
  -webkit-clip-path: none !important; clip-path: none !important;
  contain: paint !important;             /* แยกชั้นวาด ลดแถบเงาครอบทั้งแท่ง */
  background-clip: padding-box !important; /* กันรอยเข้มตามขอบ */
  outline: 1px solid transparent !important; /* ปิด anti-alias เส้นขอบ */
}
.tags::-webkit-scrollbar{ display:none; height:0; }

/* === Hairline fix: กันเส้นจาง ๆ ใต้แถวชิป (iOS/Safari) === */
.hero .tags{
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  backface-visibility: hidden;
  background-clip: padding-box;
  border-bottom: 1px solid transparent;  /* กินเส้น */
  margin-bottom: -1px;                   /* ดึงขึ้น 1px */
}
.hero .toolbar{
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  backface-visibility: hidden;
}

/* Chip */
.tag{
  flex: none !important; padding:9px 12px; min-height:40px;
  scroll-snap-align: start;
  box-shadow: none !important;                 /* ตัดเงาพื้นฐานที่รวมกันเป็นแถบ */
  background-clip: padding-box !important;     /* มุมเนียน ไม่เกิดกรอบ */
  border:1.5px solid var(--ring); border-radius:999px; font-weight:800; background:#fff;
  transition: transform .16s ease, box-shadow .20s ease, background .20s ease, border-color .20s ease, color .20s ease;
  box-shadow: 0 6px 18px rgba(2,8,23,.06), inset 0 -1px 0 rgba(255,255,255,.6);
}
.tag:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(2,8,23,.12), inset 0 -1px 0 rgba(255,255,255,.55); }
.tag:active{ transform: translateY(0); box-shadow: 0 6px 16px rgba(2,8,23,.10), inset 0 1px 0 rgba(0,0,0,.03); }
.tag:focus-visible{ outline:none; box-shadow: 0 0 0 4px rgba(37,99,235,.25), 0 10px 24px rgba(15,23,42,.16); }
:root{ --chip-green-1:#34d399; --chip-green-2:#10b981; --chip-green-ring:rgba(34,197,94,.35); }
.tag.is-active, .tag[aria-selected="true"], .tag.selected{
  background: linear-gradient(135deg,var(--chip-green-1),var(--chip-green-2)) !important;
  color:#fff !important; border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(16,185,129,.28) !important;
}
.tag.is-active:focus-visible, .tag[aria-selected="true"]:focus-visible, .tag.selected:focus-visible{
  box-shadow: 0 0 0 4px var(--chip-green-ring), 0 12px 28px rgba(16,185,129,.28) !important;
}

/* ============ Grid & Cards ============ */
.grid{ --min:100%; display:grid; grid-template-columns:repeat(auto-fill, minmax(var(--min),1fr)); gap:12px; }
.card{
  position: relative;
  padding:14px; padding-right:108px; border-radius:16px; background:#fff; border:1px solid var(--ring);
  box-shadow:0 12px 22px rgba(2,8,23,.06);
  transition: transform .2s ease, box-shadow .2s ease; will-change: transform;
}
.card::before{ content: none !important; opacity: 0 !important; background: none !important; }
.card:active, .card:focus{ animation: card-pop-mob .24s cubic-bezier(.22,.9,.24,1) both; }
@keyframes card-pop-mob{ 0%{transform:scale(1);} 60%{transform:scale(1.03);} 100%{transform:scale(1);} }

/* === Title & Meta (ให้เหมือนเดสก์ท็อป) === */
.card .row .title{
  font-family: inherit;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.card .row .meta{
  font-family: inherit;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.45;
  font-weight: 400;
}

/* BADGES */
.card .badge{
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.45);
  font-weight: 900; letter-spacing: .2px; line-height: 1; color: #fff;
  background: #94a3b8; z-index: 1;
  box-shadow: 0 10px 22px rgba(2,8,23,.16), inset 0 1px 0 rgba(255,255,255,.28);
  max-width: 46vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.card .badge.ready{ background: linear-gradient(135deg, #34d399, #10b981); }
.card .badge.soon { background: linear-gradient(135deg, #f59e0b, #f97316); }
.card .badge:active{ transform: translateY(-50%) scale(.98); }

/* Spacing */
.groups{ padding:18px 0 24px; }
.group{ margin:16px 0; }
.group h2{ font-size:18px; }
.footer-inner{ flex-direction:column; gap:6px; padding:12px 0; }

/* ลด motion */
@media (prefers-reduced-motion: reduce){
  .card{ transition: none; }
  .card:active, .card:focus{ animation: none; }
}

/* ===== Remove thin separator under HERO (mobile) ===== */
.hero{ border-bottom: 0 !important; box-shadow: none !important; }
.hero::after{ content: none !important; }

/* === EDGE-TRUTH FULL BLEED (final, paste at very end) ============ */
@media (max-width:1024.98px){
  /* ฆ่า overlay/fade ของ hero ทุกชั้น */
  .hero::before, .hero::after,
  .hero-inner::before, .hero-inner::after,
  .hero .toolbar::before, .hero .toolbar::after{
    content:none !important;
  }

  /* แถวชิป: ชนขอบจอจริง ไม่มีบัฟเฟอร์พิเศษ */
  .hero .tags, .hero .filter-tags{
    position:relative !important;
    z-index:10 !important;               /* ดันให้อยู่เหนือ overlay อื่น */
    pointer-events:auto !important;

    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;

    /* ไม่มี padding เพิ่ม — ให้ชนขอบจอจริง (คง safe-area) */
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-top: 6px !important; padding-bottom: 6px !important; /* เพิ่มพื้นที่กดด้านบน/ล่าง */

    /* ตัดการเลื่อนด้วย left/transform ที่เคยตั้งไว้ */
    left:auto !important; right:auto !important; transform:none !important;

    /* ใช้ grid สำหรับแนวนอนให้เลื่อนนิ่งกว่า บังคับคอลัมน์ต่อเนื่อง */
    display:grid !important; grid-auto-flow: column !important; grid-auto-columns: max-content !important;
    white-space: nowrap !important;
    overflow-x:auto !important; overflow-y:hidden !important; pointer-events:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-x:contain !important; touch-action:pan-x !important;

    /* ไม่ให้ mask/clip ใด ๆ ทำงานกับแถวชิป */
    -webkit-mask:none !important; mask:none !important; 
    -webkit-clip-path:none !important; clip-path:none !important;
  }

  /* ยกเลิก end-cap ที่เคยเพิ่มไว้ */
  .hero .tags::before, .hero .tags::after,
  .hero .filter-tags::before, .hero .filter-tags::after{
    content:none !important;
  }
}

/* ===================== TOAST (final, paste at very end) ===================== */
/* Global toast for "เร็วๆ นี้" or any notice; safe to append; no HTML/JS change */

.toast{
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom)); /* รองรับขอบจอ iPhone */
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  pointer-events: none;

  background: #111827;          /* Slate-900 */
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(2,8,23,.18);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;

  z-index: 9999;
  transition: transform .2s ease, opacity .2s ease;
}

/* เมื่อเรียก showToast() ให้เพิ่มคลาส .show ที่ element */
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* โทนสีเสริม (ถ้ามีการส่ง type จาก JS) */
.toast.success{ background:#065f46; border-color:#10b981; } /* เขียว */
.toast.warn{    background:#92400e; border-color:#f59e0b; } /* ส้ม */
.toast.error{   background:#7f1d1d; border-color:#ef4444; } /* แดง */

/* ปรับขนาดบนจอเล็ก */
@media (max-width: 480px){
  .toast{
    font-size: 0.92rem;
    padding: 10px 14px;
    max-width: min(92vw, 520px);
    text-align: center;
  }
}

/* ======================================================================
   HERO PARITY (mobile) — make mobile hero match desktop look & feel
   Usage: Paste near the END of categories.mobile.css
   Note: If you already have "EDGE-TRUTH FULL BLEED (...)" keep that block last.
   ====================================================================== */

/* ปรับความเร็วแอนิเมชัน (ใช้ซ้ำกับเดสก์ท็อป) */
:root{ --hero-drift-speed: 26s; }

/* ---------- HERO: พื้นหลังโทนเดียวกับเดสก์ท็อป + soft glow ---------- */
.hero{
  position: relative;
  /* ไม่ใช้ overflow:hidden เพื่อไม่ให้ไปตัด full-bleed ของแถวชิปด้านล่าง */
  overflow: visible;
  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%);
  border-bottom: 1px solid var(--ring);
}
.hero > *{ position: relative; z-index: 1; }

.hero::before{
  /* HERO-RESTORE: เปิด glow ลอยช้าอีกครั้ง แม้เคยถูกปิดไว้ก่อนหน้า */
  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;
}
@media (prefers-reduced-motion: reduce){
  .hero::before{ animation: none; }
}
@keyframes heroBgDrift{
  0%{ transform: translate3d(-2%,-1%,0); }
  50%{ transform: translate3d( 2%, 1%,0); }
  100%{ transform: translate3d( 1%,-2%,0); }
}

/* ---------- HERO: ระยะ/เลย์เอาต์บนจอเล็ก ---------- */
.hero .hero-inner{
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 18px;
  padding: 34px 0 18px; /* โปร่งขึ้นเล็กน้อย */
}

/* ---------- HERO: ตัวอักษร/หัวเรื่องให้ใกล้เดสก์ท็อป ---------- */
.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;
}
/* รองรับกรณีมี <span> หรือคลาสเน้นคำใน h1 ให้ทำเป็น gradient text */
.hero .hero-text h1 span,
.hero .hero-text h1 .accent,
.hero .hero-text h1 strong.accent{
  background-image: linear-gradient(135deg, var(--brand), var(--brand-2), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero .hero-text p{
  margin: 0;
  font-size: clamp(14px, 4vw, 16px);
  color: var(--muted);
}

/* ---------- ความเข้ากัน/ความปลอดภัย UI ---------- */
/* ป้องกันเงา/แสงล้นชนพื้นที่ safe-area บนอุปกรณ์จอบาก */
@supports(padding: max(0px)) {
  .hero{ padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* ===================== HEADER: DOUBLE-RING FIX (Mobile) ===================== */
@media (max-width:1024.98px){
  .site-header .auth{
    padding:0 !important; margin:0 !important;
    border:0 !important; background:transparent !important;
    box-shadow:none !important; -webkit-box-shadow:none !important;
    outline:none !important;
  }
  .site-header .auth::before,
  .site-header .auth::after{ content:none !important; }

  .site-header .auth .profile-chip,
  .site-header .auth .user-pill,
  .site-header .auth .btn#toRegister,
  .site-header .auth #toRegister{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 10px !important;
    border:1px solid var(--ring) !important;
    border-radius:999px !important;
    background:#fff !important; color:var(--text) !important;
    box-shadow:0 6px 18px rgba(15,23,42,.06) !important;
    -webkit-box-shadow:0 6px 18px rgba(15,23,42,.06) !important;
    font-weight:800 !important; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; max-width:60vw;
  }
  .site-header .auth .profile-chip::before,
  .site-header .auth .profile-chip::after,
  .site-header .auth .user-pill::before,
  .site-header .auth .user-pill::after,
  .site-header .auth .btn#toRegister::before,
  .site-header .auth .btn#toRegister::after,
  .site-header .auth #toRegister::before,
  .site-header .auth #toRegister::after{
    content:none !important;
  }
}

/* ===================== Footer parity with Home (Mobile) ===================== */
@media (max-width:1024.98px){
  .site-footer{
    background:#fff !important;
    border-top:1px solid var(--ring) !important;
  }
  .site-footer .footer-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:4px;
    padding:10px 0 max(12px, env(safe-area-inset-bottom));
  }
  .site-footer .footer-inner > *{ margin:0 !important; }
  /* utility classes used in footer markup */
  .muted{ color: var(--muted) !important; }
  .small{ font-size:13px !important; line-height:1.25 !important; }
  .site-footer .links a{
    color: var(--muted) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  .site-footer .links a:hover{ text-decoration: underline !important; }
}

/* === CHIP BAR GHOST-FRAME FIX (put at very end) === */
.toolbar{
  overflow: visible !important;           /* อย่าตัดเงาภายในคอนเทนเนอร์ */
  background: transparent !important;     /* ล้างพื้นหลังจาง ๆ */
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-mask: none !important;          /* กัน mask กลบขอบ */
  mask: none !important;
  backdrop-filter: none !important;       /* กันเบลอครอบทั้งแท่ง */
}
/* แถวชิป: ควบคุมการเลื่อนที่ element จริง (#filterTags + .tags) */
#filterTags,
.tags {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important; touch-action: pan-x !important;
  background: transparent !important;
  border: 0 !important; box-shadow: none !important; outline: none !important;
  -webkit-mask: none !important; mask: none !important; backdrop-filter: none !important;
}
.tags::-webkit-scrollbar{ display:none; height:0; }
#filterTags::-webkit-scrollbar{ display:none; height:0; }

/* ปิด overlay/pseudo-element ที่อาจสร้างกรอบ */
.toolbar::before, .toolbar::after,
#filterTags::before, #filterTags::after,
.tags::before, .tags::after {
  content: none !important;
}

/* ให้ชิปลอยอยู่เหนือเอฟเฟกต์อื่น ๆ */
#filterTags .tag, .tags .tag {
  position: relative;
  z-index: 1;
}

/* ===== Mobile Chip Bar — HARD RESET (remove ghost frame/hairline) ===== */
@media (max-width:1024.98px){
  .hero .toolbar,
  .hero #filterTags,
  .hero .tags{
    background: transparent !important; background-image: none !important;
    border: 0 !important; border-radius: 0 !important; border-image: none !important;
    box-shadow: none !important; -webkit-box-shadow: none !important; outline: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important;
    -webkit-mask: none !important; mask: none !important; mask-image: none !important;
    -webkit-clip-path: none !important; clip-path: none !important;
    mix-blend-mode: normal !important; isolation: isolate !important;
  }
  .hero .tags{
    border-bottom: 0 !important;   /* override earlier hairline trick */
    margin-bottom: 0 !important;
    /* keep scroll behavior controlled elsewhere */
  }
  .hero .toolbar::before, .hero .toolbar::after,
  .hero #filterTags::before, .hero #filterTags::after,
  .hero .tags::before, .hero .tags::after{
    content:none !important; border:0 !important; box-shadow:none !important; background:transparent !important;
  }
}