/* ===== THEME SYSTEM ===== ค่าเริ่มต้น (ไม่มี data-theme บน ) = ม่วง-ชมพู เดิม สลับธีมได้จากปุ่ม "🎨" บน topbar (inc/header.php) — ทำงานผ่าน data-theme + localStorage (ดู inc/footer.php) */ :root { --primary: #6366F1; --primary-dark: #4F46E5; --primary-light: #EEF0FF; --accent: #F59E0B; --danger: #EF4444; --success: #10B981; --warning: #F59E0B; --bg: #F8FAFC; --card-bg: #FFFFFF; --text: #1E293B; --muted: #64748B; --border: #E2E8F0; --shadow: 0 1px 2px rgba(15,23,42,.04), 0 2px 8px rgba(15,23,42,.06); --shadow-hover: 0 4px 6px -1px rgba(15,23,42,.08), 0 8px 20px -4px rgba(15,23,42,.12); --hero-grad-1: #6366F1; --hero-grad-2: #7C3AED; --hero-grad-3: #DB2777; } [data-theme="orange"] { --primary: #FF6B35; --primary-dark: #E85A2A; --primary-light: #FFEEE6; --accent: #7C3AED; --bg: #FFF8F3; --card-bg: #FFFFFF; --text: #1E293B; --muted: #78716C; --border: #F1E4DA; --hero-grad-1: #FF6B35; --hero-grad-2: #FCA311; --hero-grad-3: #F59E0B; } [data-theme="blue"] { --primary: #2563EB; --primary-dark: #1D4ED8; --primary-light: #EAF2FF; --accent: #0EA5E9; --bg: #F5F9FF; --card-bg: #FFFFFF; --text: #0F172A; --muted: #64748B; --border: #DCEAFE; --hero-grad-1: #2563EB; --hero-grad-2: #38BDF8; --hero-grad-3: #0EA5E9; } [data-theme="green"] { --primary: #16A34A; --primary-dark: #15803D; --primary-light: #EAFBF0; --accent: #F59E0B; --bg: #F5FBF6; --card-bg: #FFFFFF; --text: #14291C; --muted: #5B6B60; --border: #DDEFE1; --hero-grad-1: #16A34A; --hero-grad-2: #22C55E; --hero-grad-3: #84CC16; } [data-theme="red"] { --primary: #EF4444; --primary-dark: #DC2626; --primary-light: #FEECEC; --accent: #F59E0B; --bg: #FFF7F5; --card-bg: #FFFFFF; --text: #291414; --muted: #78716C; --border: #FBDCDC; --hero-grad-1: #EF4444; --hero-grad-2: #F97316; --hero-grad-3: #FBBF24; } [data-theme="dark"] { --primary: #818CF8; --primary-dark: #6366F1; --primary-light: #1E2138; --accent: #FBBF24; --danger: #F87171; --success: #34D399; --bg: #0B0F19; --card-bg: #161B2C; --text: #E5E7EB; --muted: #94A3B8; --border: #232A3E; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.35); --shadow-hover: 0 4px 6px -1px rgba(0,0,0,.4), 0 8px 20px -4px rgba(0,0,0,.5); --hero-grad-1: #1E1B4B; --hero-grad-2: #4C1D95; --hero-grad-3: #831843; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Noto Sans Thai', 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); } .topbar { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .topbar .logo { font-size: 20px; font-weight: 700; color: var(--primary); } .userchip { display: flex; align-items: center; gap: 10px; } .nav-menu { display: flex; gap: 14px; margin-right: 14px; } .hamburger { display: none; background: none; border: 1px solid var(--border); border-radius: 6px; font-size: 20px; line-height: 1; padding: 6px 10px; cursor: pointer; } .wrap { max-width: 480px; margin: 32px auto; padding: 0 16px; } .wrap.wide { max-width: 1240px; } .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 24px; box-shadow: var(--shadow); transition: box-shadow .15s ease, transform .15s ease; } a.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); } .card h1 { font-size: 20px; margin: 0 0 20px; } h1 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; } h2 { font-size: 17px; font-weight: 700; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 14px; margin-bottom: 4px; color: var(--muted); } .field .hint { font-size: 12px; color: var(--muted); } .input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-family: inherit; background: var(--card-bg); color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; } .input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .btn { display: inline-block; padding: 10px 18px; border-radius: 8px; border: none; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .15s ease, box-shadow .15s ease, transform .05s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(99,102,241,.3); } .btn-primary:hover { background: var(--primary-dark); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #DC2626; } .btn-block { width: 100%; } .btn-lg { padding: 13px 18px; font-size: 16px; } .btn-sm { padding: 6px 12px; font-size: 13px; } .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; } .small { font-size: 13px; } .hint { color: var(--muted); } .error-text { color: var(--danger); } .success-box { background: #EAF9EF; border: 1px solid var(--success); color: #0F6E33; border-radius: 10px; padding: 16px; } .badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; margin-left: 6px; } .badge-pending { background: #FEF3C7; color: #92400E; } .badge-active { background: #D1FAE5; color: #065F46; } .badge-suspended { background: #FEE2E2; color: #991B1B; } .badge-neutral { background: var(--border); color: var(--muted); } .badge-unread { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 1.5; } .foot { text-align: center; color: var(--muted); font-size: 13px; padding: 24px; } .chat-box { height: 400px; overflow-y: auto; } /* ===== Landing: hero ===== */ .hero { padding: 44px 32px; border-radius: 20px; background: linear-gradient(135deg, var(--hero-grad-1) 0%, var(--hero-grad-2) 55%, var(--hero-grad-3) 100%); color: #fff; margin-bottom: 28px; box-shadow: var(--shadow-hover); transition: background .2s ease; } .hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; } .hero h1 { color: #fff; font-size: 2rem; margin: 0 0 12px; letter-spacing: -0.02em; } .hero h1 .accent { color: #FDE68A; } .hero-lead { color: rgba(255,255,255,.88); font-size: 1.02rem; margin: 0 0 22px; max-width: 480px; } .hero-search { display: flex; gap: 8px; max-width: 440px; } .hero-search input { flex: 1; border: none; border-radius: 999px; padding: 13px 20px; font-size: 15px; font-family: inherit; } .hero-search input:focus { outline: 3px solid rgba(255,255,255,.4); } .hero-search button { border-radius: 999px; background: #fff; color: var(--primary-dark); border: none; padding: 13px 22px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 15px; } .hero-actions { margin-top: 14px; } .hero-actions a { color: rgba(255,255,255,.85); font-size: 13px; text-decoration: underline; } .hero-stats { display: flex; gap: 30px; margin-top: 26px; flex-wrap: wrap; } .hero-stats .num { font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.2; } .hero-stats .label { font-size: 12px; color: rgba(255,255,255,.78); } .hero-feature-card { background: rgba(255,255,255,.14); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.25); border-radius: 18px; padding: 18px; text-decoration: none; color: #fff; display: block; } .hero-feature-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 14px; background: rgba(255,255,255,.15); } .hero-feature-card .tag { display: inline-block; background: #FDE68A; color: #78350F; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; } .hero-feature-card .name { font-size: 15px; font-weight: 600; margin-bottom: 6px; } .hero-feature-card .price { color: #FDE68A; font-size: 1.25rem; font-weight: 700; } .hero-feature-card .stars { color: #FDE68A; font-size: 13px; } @media (max-width: 768px) { .hero { padding: 32px 20px; } .hero-grid { grid-template-columns: 1fr; } .hero-feature-card { display: none; } .hero-stats { gap: 22px; } } /* ===== Landing: features bar ===== */ .features-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; } .feature-item { display: flex; gap: 12px; align-items: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; } .feature-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .feature-item h4 { margin: 0 0 2px; font-size: 13px; } .feature-item p { margin: 0; font-size: 12px; color: var(--muted); } @media (max-width: 768px) { .features-bar { grid-template-columns: repeat(2, 1fr); } } /* ===== Landing: section heading ===== */ .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .section-head h2 { margin: 0; font-size: 18px; } .section-head a { font-size: 13px; font-weight: 600; } /* ===== Shop / product cards ===== */ .stars { color: var(--accent); letter-spacing: 1px; } .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .shop-card { text-decoration: none; color: inherit; overflow: hidden; padding: 0; } .shop-card .shop-cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--primary-light); display: block; } .shop-card .shop-cover.placeholder { display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 28px; font-weight: 700; } .shop-card .shop-body { padding: 16px; } .shop-card .shop-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; } .shop-card .shop-desc { font-size: 12px; color: var(--muted); } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; } .product-card { text-decoration: none; color: inherit; padding: 0; overflow: hidden; position: relative; } .product-card .product-img-wrap { position: relative; width: 100%; aspect-ratio: 1; background: var(--bg); } .product-card .product-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-card .p-badge { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #fff; } .product-card .p-badge.new { background: var(--success); } .product-card .p-badge.best { background: var(--accent); color: #78350F; } .product-card .product-body { padding: 14px; } .product-card .p-shop { font-size: 11px; color: var(--muted); margin-bottom: 2px; } .product-card .p-name { font-size: 14px; font-weight: 600; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .product-card .p-rating { font-size: 12px; margin-bottom: 6px; } .product-card .p-rating .stars { font-size: 12px; } .product-card .p-price { color: var(--primary-dark); font-weight: 700; font-size: 15px; } /* ===== แถบเลือกหมวดหมู่ (หน้าแรก: สินค้าทั้งหมด/สินค้ายอดนิยม) ===== */ .cat-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } /* ===== ปุ่มเปลี่ยนธีมสี (topbar ทุกหน้า) ===== */ .theme-switch { position: relative; } .theme-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 200; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-hover); padding: 8px; min-width: 230px; } .theme-menu[hidden] { display: none; } .theme-menu-title { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .02em; padding: 6px 8px 4px; text-transform: uppercase; } .theme-menu-divider { border-top: 1px solid var(--border); margin: 6px 2px; } .theme-option { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; padding: 8px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--text); } .theme-option:hover { background: var(--bg); } .theme-option.active { background: var(--primary-light); font-weight: 700; } .theme-option .dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset; } @media (max-width: 640px) { .theme-btn-label { display: none; } .theme-menu { left: auto; right: 0; } } /* มือถือ: เมนูพับเป็นแฮมเบอร์เกอร์, กันช่องกรอก iOS ซูมอัตโนมัติ (ต้อง font-size >=16px), ขยาย touch target ปุ่ม */ @media (max-width: 640px) { .hamburger { display: block; } .nav-menu { display: none; flex-direction: column; gap: 2px; width: 100%; margin: 10px 0 0; order: 3; } .nav-menu.open { display: flex; } .nav-menu a { padding: 10px 4px; border-top: 1px solid var(--border); } .topbar { flex-wrap: wrap; } .input { font-size: 16px; } .btn-sm { padding: 9px 14px; font-size: 14px; min-height: 38px; } .chat-box { height: min(400px, 55vh); } }