/* === Home (Mobile) — Polished Light Theme === */
/* ใช้กับจอมือถือ/แท็บเล็ตรุ่นเล็ก (max-width:1024.98px) */
/* โฟกัสแก้ header วงรีซ้อน + คง hero/sections เดิม */

:root{
  --bg:#f7fafc; --bg-2:#fff; --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%}
body{
  font-family:'Prompt',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; overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}

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

/* ---------------- HERO ---------------- */
.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}
.hero::before{
  content:""; position:absolute; inset:-10% -5%; 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)}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}

.hero-inner{
  display:grid; grid-template-columns:1fr; gap:16px; align-items:center;
  padding:28px clamp(18px,6vw,28px) 18px;
  padding-left:max(clamp(18px,6vw,28px), env(safe-area-inset-left));
  padding-right:max(clamp(18px,6vw,28px), env(safe-area-inset-right));
}

.hero-text h1{
  margin:0 0 8px; font-size:clamp(24px,6vw,34px); line-height:1.18;
  letter-spacing:-.02em; font-weight:900;
}
.hero-text h1 span{color:var(--brand)}
.muted{color:var(--muted)} .small{font-size:.92rem}
.cta{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid #dbeafe; background:#eef2ff; color:#1e40af;
  border-radius:999px; font-weight:800; font-size:.92rem; margin-bottom:6px;
}

.hero-card{
  background:#fff; border:1px solid var(--ring); border-radius:20px; padding:16px;
  box-shadow:0 22px 60px rgba(15,23,42,.12), 0 10px 24px rgba(15,23,42,.06);
  position:relative; overflow:hidden;
}
.hero-card::after{
  content:""; position:absolute; inset:0; border-radius:20px; padding:1px;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.checklist{margin:8px 0 0; padding-left:18px}
.checklist li{margin:6px 0; color:var(--text)}
.hero-note{font-size:12px; color:var(--muted); margin-top:8px}

/* ---------------- Sections ---------------- */
.benefits{padding:22px 0}
.shortcuts{padding:6px 0 28px}
.shortcuts .shortcuts-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.shortcuts h2{font-size:1.16rem; margin:0}

.grid .container{padding:22px 0}
/* h2 “สำรวจ & จัดการตัวเอง” ให้อยู่กลาง */
.grid h2{margin:0 0 10px; text-align:center}

/* shortcut chips (ถ้ามี) */
.chip-link{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px;
  border-radius:999px; border:1px solid var(--ring); background:#fff; color:var(--text); font-weight:800;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  transition:transform .14s ease, background .18s ease, box-shadow .18s ease;
}
.chip-link:hover{transform:translateY(-1px); background:#f8fafc}

/* ---------------- Cards Grid ---------------- */
.cards{display:grid; grid-template-columns:1fr; gap:14px}
.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}
.card:hover{transform:translateY(-2px); box-shadow:0 16px 30px rgba(2,8,23,.10); border-color:#dbeafe; background:#fcfdff}
.card:hover::before{opacity:1}
.card .icon{font-size:26px}
.card .title{font-weight:900; margin:6px 0 4px}
.card .desc{color:var(--muted); font-size:.95rem}

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

/* --- HERO left-align safeguards --- */
.hero .hero-inner{
  padding-left:max(clamp(18px,6vw,28px), env(safe-area-inset-left)) !important;
  padding-right:max(clamp(18px,6vw,28px), env(safe-area-inset-right)) !important;
}
.hero .hero-text{ text-align:left !important; margin-left:0 !important; margin-right:0 !important; max-width:none !important; }
.hero .cta{ justify-content:flex-start !important; }

/* ===================== HEADER: DOUBLE-RING FIX ===================== */
/* สาเหตุ: ไฟล์ header กลางใส่กรอบ/เงาให้ทั้ง .auth (คอนเทนเนอร์) และชิปด้านในพร้อมกัน
   วิธีแก้: ล้างกรอบคอนเทนเนอร์ .auth ทั้งหมด แล้วให้กรอบอยู่ที่ “องค์ประกอบชิป” ข้างในเท่านั้น */
@media (max-width:1024.98px){
  /* 1) ล้างคอนเทนเนอร์ด้านนอกให้โปร่ง */
  .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; }

  /* 2) ให้กรอบ/ชิปอยู่ที่องค์ประกอบจริงเท่านั้น (ชื่อผู้ใช้หรือปุ่มกรอกข้อมูล) */
  .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;
  }
  /* 3) กัน pseudo-elements ของชิปจากไฟล์กลาง */
  .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;
  }
}

/* === HOME / MOBILE: Footer minimal center (paste at very end) === */
@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)) !important;
  }
  .site-footer .footer-inner > *{ margin:0 !important; }

  /* สี/ขนาดตัวอักษรเทาเรียบ */
  .site-footer .footer-inner small,
  .site-footer .footer-inner p{
    color:var(--muted) !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }

  /* ลิงก์ “ติดต่อเรา” ใต้บรรทัดลิขสิทธิ์ */
  .site-footer .footer-inner a{
    color:var(--muted) !important;
    font-weight:600 !important;
    text-decoration:none !important;
  }
  .site-footer .footer-inner a:hover{ text-decoration:underline !important; }
}

/* === HOME / MOBILE: Footer color parity with Categories (paste at end) === */
@media (max-width:1024.98px){
  /* ใช้สีเทาเดียวกับหน้าหมวดหมู่ */
  .site-footer .footer-inner small,
  .site-footer .footer-inner p,
  .site-footer .footer-inner a{
    color:#94a3b8 !important; /* slate-400 */
  }
  .site-footer .footer-inner a{
    font-weight:600 !important;
    text-decoration:none !important;
  }
  .site-footer .footer-inner a:hover{
    color:#64748b !important;           /* slate-500 เมื่อ hover */
    text-decoration:underline !important;
  }
}