:root { /* พาเลตสี CHIMCHIM (จากบลูปรินท์ข้อ 3) */ --primary: #ff999d; /* Pastel Pink - สีหลัก */ --secondary: #ffc2a8; /* Pastel Peach - สีรอง */ --dark: #8f82b8; /* Dusty Lavender - มาสคอต/ปุ่มเน้น/หัวข้อ */ --darkbg: #5b4f7d; /* lavender เข้ม ใช้เป็นพื้นหลังโซนมืดแทนสีดำเดิม อ่านง่ายกว่า */ --green: #46b087; /* mint เข้ม ใช้แทนที่สีเขียวเดิม (success / follow) */ --mint: #b5e8d0; /* Pastel Mint - accent/badge */ --cream: #f0f8c9; /* Pastel Cream - พื้นหลังสลับ section */ --cream2: #fbfce4; --light: #fff6f1; --shadow: 0 8px 40px rgba(143, 130, 184, 0.14); --shadow-lg: 0 20px 60px rgba(143, 130, 184, 0.22); --surface: #fff; /* พื้นผิวการ์ด/ป็อปอัพ/อินพุตทั่วแอป — สลับเป็นสีเข้มในโหมด Dark */ --text: #444; /* สีตัวอักษรหลัก — สลับเป็นสีอ่อนในโหมด Dark */ --text-muted: #939393; --border-soft: rgba(0, 0, 0, 0.06); } /* ===================================================================== DARK MODE — สลับผ่าน Settings (js/chimchim-i18n.js ตั้ง data-theme บน ) จำกัดขอบเขตเฉพาะโครงแอป (body.appshell + คอมโพเนนต์ในแอป) ไม่กระทบหน้า landing เดิม (index.html) ที่ไม่ได้ใช้ class appshell ===================================================================== */ [data-theme="dark"] { --surface: #2b2836; --text: #ece8f6; --text-muted: #a79fc2; --border-soft: rgba(255, 255, 255, 0.08); --cream: #332f2a; --cream2: #2a2735; --shadow: 0 8px 40px rgba(0, 0, 0, 0.4); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5); } [data-theme="dark"] body.appshell { background: #1a1822; color: var(--text); } [data-theme="dark"] .searchwrap { background: #1a1822; } [data-theme="dark"] .mtit, [data-theme="dark"] .mrestaurant, [data-theme="dark"] .rowtitle, [data-theme="dark"] .profname, [data-theme="dark"] .chnm, [data-theme="dark"] .rdtitle, [data-theme="dark"] .aires-title, [data-theme="dark"] .aichat-hi, [data-theme="dark"] .chatcard-title, [data-theme="dark"] .dtit, [data-theme="dark"] .stitle, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--text); } [data-theme="dark"] .mdesc, [data-theme="dark"] .mmeta, [data-theme="dark"] .sdesc, [data-theme="dark"] .aichat-sub, [data-theme="dark"] .chatcard-meta, [data-theme="dark"] .aires-shop, [data-theme="dark"] .profemail, [data-theme="dark"] .mhbadge span, [data-theme="dark"] .rowsub { color: var(--text-muted); } [data-theme="dark"] .homesearch input { color: var(--text); } [data-theme="dark"] .catchip img { filter: brightness(0.9); } [data-theme="dark"] .fctrl { background: #211f2b; color: var(--text); border-color: var(--border-soft); } [data-theme="dark"] .fctrl::placeholder { color: var(--text-muted); } [data-theme="dark"] .chatbubble.bot { color: var(--text); } [data-theme="dark"] .aichat-inputbar input { background: var(--surface); color: var(--text); } [data-theme="dark"] .apptop, [data-theme="dark"] .appnav { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .rmodebtn { color: var(--text-muted); } /* ---- ปุ่มลัดตั้งค่าด่วน (จากไอคอนเฟืองบนแถบบน) — สลับ Light/Dark + EN/TH โดยไม่ต้องเข้าหน้า Settings ---- */ .qsettingswrap { position: relative; } .qspanel { position: absolute; top: calc(100% + 10px); right: 0; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 14px; min-width: 230px; z-index: 950; } .qsrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .qslbl { font-size: 0.78rem; font-weight: 700; color: var(--dark); } .qstoggle { display: flex; gap: 6px; } .qstoggle button { border: 2px solid transparent; background: var(--cream2); color: #888; border-radius: 10px; width: 38px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 800; cursor: pointer; transition: 0.2s; } .qstoggle button.active { border-color: var(--primary); background: linear-gradient(135deg, var(--dark), #7d6fb0); color: #fff; } .qsmore { display: block; text-align: center; font-size: 0.72rem; color: #999; text-decoration: none; padding-top: 10px; border-top: 1px solid var(--border-soft); margin-top: 2px; } .qsmore:hover { color: var(--dark); } /* ---- หน้า Settings: สลับ Light/Dark + EN/TH ---- */ /* ---- ฟีดอัปเดตร้านที่ Follow (หน้า Following > Restaurants) ---- */ .updatecard { display: flex; align-items: center; gap: 14px; background: var(--surface); border-radius: 16px; padding: 14px; box-shadow: var(--shadow); margin-bottom: 12px; text-decoration: none; color: inherit; } .updatecard img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex-shrink: 0; } .updateshop { font-weight: 800; font-size: 0.85rem; color: var(--dark); margin-bottom: 2px; } .updatetxt { font-size: 0.78rem; color: #888; display: flex; align-items: center; gap: 6px; } .updateicon { font-size: 1rem; flex-shrink: 0; } .settoggle { display: flex; gap: 12px; } .settopt { flex: 1; background: var(--cream2); border: 2px solid transparent; border-radius: 16px; padding: 20px 10px; text-align: center; cursor: pointer; font-family: "Prompt", sans-serif; font-weight: 700; font-size: 0.85rem; line-height: 1.4; color: #888; transition: 0.2s; } .settopt i { display: block; font-size: 1.3rem; margin-bottom: 9px; } .settopt:hover { transform: translateY(-2px); } .settopt.active { border-color: var(--primary); background: linear-gradient(135deg, var(--dark), #7d6fb0); color: #fff; } * { margin: 0; padding: 0; box-sizing: border-box; } /* กันไว้ไม่ให้ class ที่ตั้ง display เอง (เช่น .apptop-avatar, .wresultbtns) มาทับ attribute [hidden] เวลา JS สั่งซ่อน element ผ่าน .hidden */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { font-family: "Prompt", sans-serif; color: var(--text); background: var(--surface); overflow-x: hidden; } h1, h2, h3, h4, h5 { font-family: "Prompt", sans-serif; color: var(--dark); } a { text-decoration: none; transition: all 0.3s; } img { max-width: 100%; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 14px; } /* ===================== TOP BAR ===================== */ #topbar { background: var(--darkbg); padding: 8px 0; font-size: 0.82rem; } #topbar span { color: #aaa; margin-right: 16px; } #topbar span i { color: var(--secondary); margin-right: 5px; } #topbar .tsoc a { width: 27px; height: 27px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: inline-flex; align-items: center; justify-content: center; color: #bbb; font-size: 0.75rem; margin-left: 5px; transition: 0.3s; } #topbar .tsoc a:hover { background: var(--primary); color: #fff; } .ttag { background: var(--primary); color: #fff; padding: 2px 10px; border-radius: 26px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; } /* ===================== NAVBAR ===================== */ #nav { background: var(--surface); position: sticky; top: 0; z-index: 990; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07); transition: 0.4s; } #nav.scrolled { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.14); } .blogo { display: flex; align-items: center; gap: 10px; } .bico { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff; box-shadow: 0 4px 15px rgba(255, 153, 157, 0.35); } .bname { font-family: "Prompt", sans-serif; font-size: 1.5rem; font-weight: 900; color: var(--dark); } .bname span { color: var(--primary); } .bsub { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 2px; color: #aaa; } .navbar-nav .nav-link { font-size: 0.87rem; font-weight: 500; color: #333 !important; padding: 26px 13px !important; position: relative; } .navbar-nav .nav-link::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 3px; background: var(--primary); border-radius: 5px 5px 0 0; transition: 0.3s; } .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { width: 55%; } .navbar-nav .nav-link:hover { color: var(--primary) !important; } /* FIX 1 — Search btn in navbar */ #navSearchBtn { background: none; border: none; cursor: pointer; color: #555; font-size: 1rem; padding: 8px 10px; border-radius: 12px; transition: 0.3s; } #navSearchBtn:hover { background: rgba(255, 153, 157, 0.08); color: var(--primary); } .nav-cta { background: linear-gradient(135deg, var(--primary), #ff7d83); color: #fff !important; border-radius: 12px; padding: 10px 20px !important; font-size: 0.84rem !important; font-weight: 600 !important; box-shadow: 0 4px 15px rgba(255, 153, 157, 0.3); margin-left: 6px; } .nav-cta::after { display: none !important; } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255, 153, 157, 0.4); } /* ===================== AUTH / USER MENU (navbar) ===================== */ #loginBtn { background: var(--surface); border: 2px solid var(--dark); color: var(--dark); border-radius: 12px; padding: 8px 18px; font-size: 0.84rem; font-weight: 600; font-family: "Prompt", sans-serif; cursor: pointer; margin-left: 6px; transition: 0.3s; } #loginBtn:hover { background: var(--dark); color: #fff; } #userArea { position: relative; margin-left: 6px; } #userMenuBtn { display: flex; align-items: center; gap: 8px; background: var(--cream); border: none; border-radius: 40px; padding: 6px 14px 6px 6px; cursor: pointer; font-family: "Prompt", sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--darkbg); transition: 0.3s; } #userMenuBtn:hover { background: var(--mint); } .uavt { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; font-size: 1rem; } #userNameLbl { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #userMenuDrop { display: none; position: absolute; top: calc(100% + 12px); right: 0; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); width: 230px; padding: 8px; z-index: 1000; } #userArea.open #userMenuDrop { display: block; animation: fadeov 0.2s ease; } .umhead { padding: 12px 14px; border-bottom: 1px solid #f0eef8; margin-bottom: 6px; } .umname { font-weight: 700; color: var(--darkbg); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .umrole { display: inline-block; margin-top: 4px; font-size: 0.68rem; font-weight: 700; padding: 2px 10px; border-radius: 20px; background: rgba(143, 130, 184, 0.14); color: var(--dark); } .umitem { width: 100%; text-align: left; background: none; border: none; padding: 11px 14px; border-radius: 10px; font-family: "Prompt", sans-serif; font-size: 0.85rem; color: var(--text); cursor: pointer; transition: 0.2s; } .umitem:hover { background: var(--cream); } .umdanger { color: #e5576b; } .umdanger:hover { background: rgba(229, 87, 107, 0.08); } /* ===================== DINO FLOATING MASCOT ===================== */ #dinoFab { position: fixed; right: 20px; bottom: 24px; z-index: 950; cursor: pointer; } #dinoFab img { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(143, 130, 184, 0.45)); animation: dinobob 2.6s ease-in-out infinite; transition: 0.3s; } #dinoFab:hover img { transform: scale(1.1) rotate(-6deg); } #dinoBubble { position: absolute; bottom: 78px; right: 0; background: var(--surface); color: var(--darkbg); font-size: 0.76rem; font-weight: 600; padding: 9px 14px; border-radius: 14px 14px 4px 14px; box-shadow: var(--shadow); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: 0.3s; pointer-events: none; } #dinoFab:hover #dinoBubble, #dinoFab.show-bubble #dinoBubble { opacity: 1; transform: translateY(0); } @media (max-width: 767px) { #dinoFab { right: 14px; bottom: 84px; } #dinoFab img { width: 52px; height: 52px; } } /* ===================== AUTH / SHOP / ABOUT POPUPS ===================== */ #authPop, #profDetailPop, #aboutPop, #postViewModal, #shopDetailPop, #recommendPop, #reportPopModal { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 18px; } /* รายงานเนื้อหาต้องเปิดซ้อนทับ popup อื่นได้เสมอ (เช่น เปิดจากใน postViewModal) */ #reportPopModal { z-index: 100000; } #authPop.open, #profDetailPop.open, #aboutPop.open, #postViewModal.open, #shopDetailPop.open, #recommendPop.open, #reportPopModal.open { display: flex; animation: fadeov 0.25s ease; } .rphrowwrap { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 2px; } .rphrowwrap .mcard { width: 100%; } .rphrowwrap .mimg { height: 140px; } /* ---- popup "ร้านแนะนำ" บนหน้าวงล้อ — โชว์แค่ 2 ร้านท็อปสุด เรียงคู่กันสวย ๆ แทนลิสต์ยาว ---- */ .rprecgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rprecgrid .mcard { width: 100%; } .rprecgrid .mimg { height: 150px; } .apbox { position: relative; background: var(--surface); border-radius: 26px; width: 100%; max-width: 420px; padding: 34px 30px 26px; max-height: 92vh; overflow-y: auto; box-shadow: 0 30px 70px rgba(91, 79, 125, 0.35); animation: popin 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes popin { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .apclose { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--cream); color: #888; cursor: pointer; transition: 0.3s; } .apclose:hover { background: var(--primary); color: #fff; } .apdino { width: 76px; height: 76px; object-fit: contain; display: block; margin: 0 auto 8px; } .aptabs { display: flex; background: var(--cream); border-radius: 40px; padding: 4px; margin-bottom: 18px; } .aptab { flex: 1; border: none; background: none; padding: 10px 8px; border-radius: 40px; font-family: "Prompt", sans-serif; font-size: 0.85rem; font-weight: 600; color: #888; cursor: pointer; transition: 0.3s; } .aptab.active { background: var(--surface); color: var(--primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .apform .flbl { margin-top: 18px; } .apform .fctrl { margin-top: 8px; } .apnote { text-align: center; font-size: 0.82rem; color: #888; margin: 16px 0 0; } .apnote a { color: var(--primary); font-weight: 700; text-decoration: none; } .apdisclaimer { text-align: center; font-size: 0.7rem; color: #aaa; margin-top: 12px; } .aperr { display: none; background: rgba(229, 87, 107, 0.1); color: #e5576b; font-size: 0.8rem; padding: 9px 13px; border-radius: 10px; margin-bottom: 4px; } .aperr.show { display: block; } .aprolewrap { display: flex; gap: 10px; margin-top: 8px; } .aprole { flex: 1; border: 2px solid #eee; border-radius: 16px; padding: 16px 10px; text-align: center; cursor: pointer; transition: 0.25s; } .aprole strong { display: block; font-size: 0.83rem; color: var(--darkbg); margin-bottom: 3px; } .aprole span { font-size: 0.68rem; color: #999; line-height: 1.4; display: block; } .aprico { font-size: 1.7rem; margin-bottom: 6px; } .aprole.active { border-color: var(--primary); background: rgba(255, 153, 157, 0.07); } .spbox2 { max-width: 560px; } .sptitle2 { color: var(--darkbg); font-size: 1.25rem; margin-bottom: 4px; } .apsub { color: #888; font-size: 0.82rem; margin-bottom: 10px; } .aboutbox { max-width: 480px; padding: 14px; } .aboutbox img { width: 100%; border-radius: 16px; display: block; } /* ===================== SECTION COMMONS ===================== */ section { padding: 88px 0; } .slbl { font-family: "Prompt", sans-serif; font-size: 1.35rem; color: var(--primary); display: block; margin-bottom: 4px; } .stitle { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 900; line-height: 1.2; margin-bottom: 12px; } .stitle span { color: var(--primary); background: linear-gradient(120deg, var(--primary) 10%, #ff7d83 55%, var(--dark) 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ใช้กับคำแรกของหัวข้อที่ต้องมี data-i18n เป็นของตัวเอง (เช่นสลับลำดับคำ TH/EN ได้) แต่ไม่อยากให้ไล่สีเหมือนคำเด่นหลัก */ .stitle span.stitleplain { color: inherit; background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; } .sline { width: 58px; height: 4px; border-radius: 6px; background: linear-gradient(90deg, var(--primary), var(--secondary)); margin: 0 auto 12px; } .sline.lft { margin-left: 0; } .sdesc { color: #777; font-size: 0.93rem; line-height: 1.8; } .btn-red { background: linear-gradient(135deg, var(--dark), #7d6fb0 45%, var(--primary) 115%); background-size: 160% 160%; background-position: 0% 50%; color: #fff; border: none; border-radius: 50px; padding: 14px 32px; font-weight: 600; font-size: 0.93rem; box-shadow: 0 8px 24px rgba(143, 130, 184, 0.4), 0 2px 6px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s, background-position 0.5s; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-family: "Prompt", sans-serif; } .btn-red:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 40px rgba(143, 130, 184, 0.55), 0 4px 10px rgba(0, 0, 0, 0.08); background-position: 100% 50%; color: #fff; } .btn-red:active { transform: translateY(-1px) scale(0.99); } /* ===================== HERO ===================== */ #hero { background: var(--cream); min-height: 92vh; display: flex; align-items: center; position: relative; overflow: hidden; } .hbgtxt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 22vw; font-weight: 900; font-family: "Prompt", sans-serif; color: rgba(0, 0, 0, 0.04); pointer-events: none; white-space: nowrap; } .hs { position: absolute; border-radius: 50%; pointer-events: none; } .hs1 { width: 480px; height: 480px; background: radial-gradient(circle, rgba(255, 153, 157, 0.07), transparent 70%); top: -90px; right: -80px; animation: fsh 8s ease-in-out infinite; } .hs2 { width: 280px; height: 280px; background: radial-gradient( circle, rgba(255, 194, 168, 0.09), transparent 70% ); bottom: -50px; left: 8%; animation: fsh 10s ease-in-out infinite reverse; } @keyframes fsh { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-28px); } } .hbadge { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 30px; padding: 6px 16px 6px 6px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); margin-bottom: 22px; } .hbadge .hbi { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.78rem; } .hbadge span { font-size: 0.76rem; font-weight: 600; color: var(--dark); } .htitle { font-size: clamp(2.7rem, 6vw, 4.8rem); font-weight: 900; line-height: 1.1; margin-bottom: 18px; } .htitle .hl { color: var(--primary); background: linear-gradient(120deg, var(--primary) 10%, #ff7d83 55%, var(--dark) 110%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; display: inline-block; } .htitle .hl::before { content: ""; position: absolute; bottom: 2px; left: 0; right: 0; height: 7px; background: rgba(255, 153, 157, 0.14); border-radius: 6px; z-index: -1; } .hdesc { font-size: 1rem; color: #666; line-height: 1.8; max-width: 470px; margin-bottom: 30px; } /* FIX 2 — Video play button */ .btn-play { display: inline-flex; align-items: center; gap: 12px; color: var(--dark); font-weight: 600; font-size: 0.9rem; padding: 10px 16px; transition: 0.3s; cursor: pointer; } .btn-play .pico { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); color: var(--primary); font-size: 0.95rem; transition: 0.3s; flex-shrink: 0; } .btn-play:hover .pico { background: var(--primary); color: #fff; transform: scale(1.1); } .btn-play:hover { color: var(--primary); } .hstats { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 32px; } .hstat .snum { font-family: "Prompt", sans-serif; font-size: 1.9rem; font-weight: 900; color: var(--dark); display: block; line-height: 1; } .hstat .snum em { color: var(--primary); font-style: normal; } .hstat small { font-size: 0.7rem; color: #aaa; text-transform: uppercase; letter-spacing: 1px; } .sdiv { width: 1px; background: #ddd; height: 38px; align-self: center; } .hcircle { width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff8f0, #ffe5c8); display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; box-shadow: 0 28px 76px rgba(255, 153, 157, 0.14); } .hcircle img { width: 90%; height: 90%; object-fit: cover; border-radius: 50%; } .fcard { position: absolute; background: var(--surface); border-radius: 15px; padding: 10px 15px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 9px; } .fcard.fc1 { top: 55px; left: -15px; animation: fltc 4s ease-in-out infinite; } .fcard.fc2 { bottom: 75px; right: -25px; animation: fltc 4s ease-in-out infinite 1.5s; } .fcard.fc3 { top: 38%; right: -45px; animation: fltc 4s ease-in-out infinite 0.8s; } @keyframes fltc { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .fcoi { width: 34px; height: 34px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; } .fcoi.r { background: rgba(255, 153, 157, 0.11); color: var(--primary); } .fcoi.y { background: rgba(255, 194, 168, 0.14); color: var(--secondary); } .fcoi.g { background: rgba(70, 176, 135, 0.11); color: var(--green); } .fcnum { font-weight: 700; font-size: 0.92rem; color: var(--dark); display: block; line-height: 1; } .fcsm { font-size: 0.66rem; color: #999; } /* ===================== MARQUEE ===================== */ .mqsec { background: var(--primary); padding: 13px 0; overflow: hidden; } .mqtrack { display: flex; gap: 38px; white-space: nowrap; animation: mqrun 22s linear infinite; } .mqitem { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 0.86rem; font-weight: 500; } .mqitem i { color: rgba(255, 255, 255, 0.55); font-size: 0.55rem; } @keyframes mqrun { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ===================== AMBIENT BACKGROUND GLOWS (ใช้ซ้ำได้หลาย section) ===================== */ .sec-glow { position: relative; overflow: hidden; } .glob { position: absolute; border-radius: 50%; pointer-events: none; animation: fsh 9s ease-in-out infinite; } .glob.a { width: 380px; height: 380px; background: radial-gradient(circle, rgba(255, 153, 157, 0.1), transparent 70%); top: -110px; left: -90px; } .glob.b { width: 300px; height: 300px; background: radial-gradient(circle, rgba(143, 130, 184, 0.1), transparent 70%); bottom: -80px; right: -60px; animation-delay: 1.2s; animation-direction: reverse; } .glob.c { width: 220px; height: 220px; background: radial-gradient(circle, rgba(255, 194, 168, 0.14), transparent 70%); top: 20%; right: 6%; animation-delay: 2s; } .sec-glow > .container { position: relative; z-index: 1; } /* ===================== CATEGORY ===================== */ #category { background: var(--cream); } .catcard { background: var(--surface); border-radius: 20px; padding: 22px 14px; text-align: center; cursor: pointer; transition: 0.4s; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); border: 2px solid transparent; } .catcard:hover, .catcard.active { transform: translateY(-7px); box-shadow: 0 14px 38px rgba(255, 153, 157, 0.14); border-color: var(--primary); } .catimg { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; transition: 0.4s; } .catcard:hover .catimg { transform: scale(1.1) rotate(-4deg); } .catnm { font-size: 0.86rem; font-weight: 600; color: var(--dark); margin-bottom: 3px; } .catct { font-size: 0.73rem; color: #bbb; } /* ===================== ABOUT ===================== */ #about { background: var(--surface); } .astack { position: relative; } .amain { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); } .amain img { width: 100%; height: 440px; object-fit: cover; display: block; } .asm { position: absolute; bottom: -26px; right: -26px; width: 170px; height: 170px; border-radius: 20px; overflow: hidden; border: 5px solid #fff; box-shadow: var(--shadow); } .asm img { width: 100%; height: 100%; object-fit: cover; } .aexp { position: absolute; top: 28px; left: -16px; background: var(--primary); color: #fff; border-radius: 20px; padding: 18px 22px; text-align: center; box-shadow: 0 10px 28px rgba(255, 153, 157, 0.4); } .aexp .anum { font-family: "Prompt", sans-serif; font-size: 2.3rem; font-weight: 900; line-height: 1; display: block; } .aexp small { font-size: 0.7rem; opacity: 0.9; } .fti { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 18px; } .ftico { width: 46px; height: 46px; border-radius: 15px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; transition: 0.3s; } .ftico.r { background: rgba(255, 153, 157, 0.1); color: var(--primary); } .ftico.y { background: rgba(255, 194, 168, 0.11); color: var(--secondary); } .ftico.g { background: rgba(70, 176, 135, 0.1); color: var(--green); } .fti:hover .ftico { transform: scale(1.1); } .fti h6 { font-size: 0.9rem; font-weight: 700; color: var(--dark); margin-bottom: 2px; font-family: "Prompt", sans-serif; } .fti p { font-size: 0.8rem; color: #888; margin: 0; line-height: 1.6; } /* ===================== MENU ===================== */ #menu { background: var(--light); } /* FIX 3 — Filter buttons */ .filtbtn { border: 2px solid #e5e5e5; background: var(--surface); border-radius: 50px; padding: 10px 20px; font-size: 0.84rem; font-weight: 600; color: #666; cursor: pointer; transition: 0.3s; margin: 4px; font-family: "Prompt", sans-serif; } .filtbtn.active, .filtbtn:hover { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 5px 18px rgba(255, 153, 157, 0.24); } .mwrap { transition: 0.35s; } .mwrap.gone { display: none !important; } /* Lemon8-style masonry feed */ #mgrid { display: block; column-count: 2; column-gap: 12px; margin: 0 !important; } #mgrid.mwrap, #mgrid > .mwrap { display: inline-block; width: 100% !important; float: none !important; padding: 0 !important; margin: 0 0 12px; break-inside: avoid; } @media (min-width: 640px) { #mgrid { column-count: 3; column-gap: 14px; } #mgrid > .mwrap { margin-bottom: 14px; } } #mgrid .mimg { height: 170px; } #mgrid > .mwrap:nth-child(4n+2) .mimg { height: 230px; } #mgrid > .mwrap:nth-child(4n+3) .mimg { height: 140px; } #mgrid > .mwrap:nth-child(5n+4) .mimg { height: 200px; } .mcard { background: var(--surface); border-radius: 24px; overflow: hidden; transition: transform 0.4s, box-shadow 0.4s; box-shadow: 0 4px 22px rgba(0, 0, 0, 0.07); cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.04); } .mcard:hover { transform: translateY(-9px); box-shadow: 0 20px 50px rgba(255, 153, 157, 0.22), 0 8px 20px rgba(0, 0, 0, 0.08); border-color: rgba(255, 153, 157, 0.25); } .mimg { position: relative; overflow: hidden; height: 215px; background: var(--cream2); } .mimg img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; } .mcard:hover .mimg img { transform: scale(1.09); } .mbdg { position: absolute; top: 13px; left: 13px; background: var(--primary); color: #fff; border-radius: 10px; padding: 3px 11px; font-size: 0.7rem; font-weight: 700; } .mbdg.new { background: var(--green); } .mbdg.hot { background: var(--secondary); color: var(--dark); } /* FIX 4 — Heart & Plus buttons stop propagation */ .mhrt { position: absolute; bottom: 13px; right: 13px; width: 33px; height: 33px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; color: #ccc; cursor: pointer; transition: 0.3s; box-shadow: 0 2px 9px rgba(0, 0, 0, 0.1); z-index: 3; } .mhrt:hover { color: var(--primary); transform: scale(1.18); } .mhrt.liked { color: var(--primary); } .mhrtcount { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.58rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; white-space: nowrap; pointer-events: none; } .mbody { padding: 14px; } #mgrid .mdesc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mcat { font-size: 0.7rem; font-weight: 600; color: var(--secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; } .mtit { font-size: 1.05rem; font-weight: 700; margin-bottom: 5px; font-family: "Prompt", sans-serif; } .mdesc { font-size: 0.78rem; color: #aaa; margin-bottom: 13px; line-height: 1.5; } .mfoot { display: flex; align-items: center; justify-content: space-between; } .mprice { font-size: 1.25rem; font-weight: 800; color: var(--primary); font-family: "Prompt", sans-serif; } .mprice small { font-size: 0.72rem; font-weight: 400; color: #ccc; text-decoration: line-through; margin-left: 5px; } .mstars { font-size: 0.73rem; color: var(--secondary); } /* FIX 4 — Plus button opens detail popup */ .madd { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #ff7d83); border: none; color: #fff; font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 11px rgba(255, 153, 157, 0.28); } .madd:hover { transform: scale(1.15) rotate(90deg); } /* ===================== SPECIAL OFFER ===================== */ #special { background: linear-gradient(135deg, #1a0000 0%, #2d0000 100%); position: relative; overflow: hidden; } .spbg { position: absolute; inset: 0; pointer-events: none; opacity: 0.03; background: repeating-linear-gradient( 45deg, #fff 0, #fff 1px, transparent 0, transparent 50% ); background-size: 40px 40px; } .sptag { display: inline-block; background: var(--secondary); color: var(--dark); border-radius: 9px; padding: 4px 15px; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 14px; } .sptitle { font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 900; color: #fff; line-height: 1.1; } .sptitle span { color: var(--secondary); } .spdesc { color: rgba(255, 255, 255, 0.62); margin: 18px 0; font-size: 0.93rem; line-height: 1.8; } .cdwrap { display: flex; gap: 14px; margin: 26px 0; } .cditem { text-align: center; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 15px; padding: 13px 18px; min-width: 72px; } .cdnum { font-family: "Prompt", sans-serif; font-size: 2.1rem; font-weight: 900; color: #fff; display: block; line-height: 1; } .cdlbl { font-size: 0.63rem; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.48); margin-top: 3px; display: block; } .spimgw { position: relative; text-align: center; } .spglow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 360px; height: 360px; border-radius: 50%; background: radial-gradient( circle, rgba(255, 194, 168, 0.24), transparent 70% ); } .spimgw img { position: relative; z-index: 2; width: 100%; max-width: 440px; filter: drop-shadow(0 28px 56px rgba(255, 194, 168, 0.28)); animation: fltimg 5s ease-in-out infinite; } @keyframes fltimg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-17px); } } .sppbdg { position: absolute; top: 18px; left: 18px; z-index: 3; background: var(--primary); color: #fff; width: 86px; height: 86px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: 0 8px 24px rgba(255, 153, 157, 0.5); animation: plsbdg 2.5s ease-in-out infinite; } @keyframes plsbdg { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); box-shadow: 0 12px 34px rgba(255, 153, 157, 0.7); } } .sppbdg .old { font-size: 0.68rem; text-decoration: line-through; opacity: 0.7; } .sppbdg .np { font-size: 1.25rem; font-weight: 900; } /* ===================== GALLERY ===================== */ #gallery { background: var(--light); } .ggrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 215px); gap: 13px; } .gitem { border-radius: 20px; overflow: hidden; position: relative; cursor: pointer; } .gitem:first-child { grid-row: span 2; } .gitem img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; } .gitem:hover img { transform: scale(1.08); } .gover { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.76), transparent 60%); opacity: 0; transition: 0.4s; display: flex; align-items: flex-end; padding: 18px; } .gitem:hover .gover { opacity: 1; } .gover span { color: #fff; font-weight: 600; font-size: 0.88rem; } .gover i { color: var(--secondary); margin-right: 5px; } /* ===================== HISTORY — FIX 8 ===================== */ /* ===================== FOOD ROULETTE (สุ่มเมนู) ===================== */ #roulette { background: var(--cream); overflow: hidden; min-height: calc(100vh - 180px); display: flex; align-items: center; justify-content: center; } #roulette > .container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .rmodes { display: flex; gap: 8px; margin-bottom: 10px; } .rmodebtn { flex: 1; background: var(--surface); border: 2px solid transparent; border-radius: 16px; padding: 13px 6px; text-align: center; cursor: pointer; font-family: "Prompt", sans-serif; font-weight: 700; font-size: 0.68rem; line-height: 1.35; color: #888; box-shadow: var(--shadow); transition: 0.2s; } .rmodebtn .rmico { display: block; font-size: 1.15rem; margin-bottom: 5px; } .rmodebtn:hover { transform: translateY(-2px); } .rmodebtn.active { border-color: var(--primary); background: linear-gradient(135deg, var(--dark), #7d6fb0); color: #fff; } .rmodedesc { text-align: center; font-size: 0.74rem; color: #999; margin-bottom: 14px; min-height: 1.4em; } .wheelwrap { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1/1; margin: 0 auto; } .wheelwrap::before { content: ""; position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 153, 157, 0.22), rgba(143, 130, 184, 0.12) 55%, transparent 75%); filter: blur(6px); z-index: -1; animation: fsh 5s ease-in-out infinite; } .wheelmascot { position: absolute; top: -46px; right: -14px; width: 78px; height: 78px; object-fit: contain; z-index: 4; filter: drop-shadow(0 6px 14px rgba(143, 130, 184, 0.35)); animation: dinobob 2.4s ease-in-out infinite; } @keyframes dinobob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } } .wheelptr { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); color: var(--dark); font-size: 2.4rem; z-index: 5; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.2)); } .wheeldisc { width: 100%; height: 100%; border-radius: 50%; position: relative; border: 6px solid #fff; box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(143, 130, 184, 0.15); background: conic-gradient( #ff999d 0deg 30deg, #ffc2a8 30deg 60deg, #8f82b8 60deg 90deg, #46b087 90deg 120deg, #ffb3b8 120deg 150deg, #ffd9bd 150deg 180deg, #a99bd1 180deg 210deg, #c9f2e0 210deg 240deg, #fff3b0 240deg 270deg, #5fcf9e 270deg 300deg, #ffe0e6 300deg 330deg, #d8f3ff 330deg 360deg ); transition: transform 4.2s cubic-bezier(0.17, 0.67, 0.14, 1); transform: rotate(0deg); } .wslice { position: absolute; top: 50%; left: 50%; width: 0; height: 0; font-size: 0.62rem; font-weight: 700; color: var(--darkbg); white-space: nowrap; text-align: center; line-height: 1.15; pointer-events: none; } .wslice b { display: block; font-size: 1.05rem; line-height: 1; margin-bottom: 1px; } .wheelbtn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; background: linear-gradient(135deg, var(--primary), #ff7d83); color: #fff; font-family: "Prompt", sans-serif; font-weight: 800; font-size: 1rem; cursor: pointer; box-shadow: 0 8px 22px rgba(255, 153, 157, 0.55); z-index: 6; transition: 0.25s; animation: wpulse 2.4s ease-in-out infinite; } @keyframes wpulse { 0%, 100% { box-shadow: 0 8px 22px rgba(255, 153, 157, 0.55); } 50% { box-shadow: 0 8px 26px rgba(255, 153, 157, 0.8), 0 0 0 8px rgba(255, 153, 157, 0.12); } } .wheelbtn:hover { transform: translate(-50%, -50%) scale(1.08); animation-play-state: paused; } .wheelbtn:disabled { opacity: 0.7; cursor: not-allowed; animation: none; } .wsimilar { margin-top: 20px; } .wresultcard { background: var(--surface); border-radius: 24px; box-shadow: var(--shadow); padding: 22px; display: flex; gap: 20px; align-items: center; min-height: 200px; } .wresultcard img { width: 130px; height: 130px; border-radius: 18px; object-fit: cover; flex-shrink: 0; background: var(--cream2); } .wresultbody { flex: 1; } .wrtag { display: inline-block; background: rgba(255, 153, 157, 0.14); color: var(--primary); font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: 30px; margin-bottom: 8px; } .wresultbody h4 { font-size: 1.2rem; color: var(--darkbg); margin-bottom: 8px; } .wresultbody p { font-size: 0.85rem; color: #888; line-height: 1.6; margin-bottom: 0; } .wresultbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .wghostbtn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 30px; border: 2px solid var(--dark); color: var(--dark); font-size: 0.85rem; font-weight: 700; text-decoration: none; transition: 0.3s; } .wghostbtn:hover { background: var(--dark); color: #fff; } @media (max-width: 767px) { .wresultcard { flex-direction: column; text-align: center; } .wresultbtns { justify-content: center; } } /* ===================== VENDOR CTA ===================== */ #vendorCta { background: var(--surface); padding-top: 0; } .vcbox { background: linear-gradient(120deg, var(--darkbg), #6d5fa0); border-radius: 28px; padding: 40px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; box-shadow: var(--shadow-lg); } .vcdino { width: 110px; height: 110px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.25)); } .vctext { flex: 1; min-width: 240px; } .vctag { display: inline-block; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 5px 14px; border-radius: 30px; margin-bottom: 10px; } .vctext h3 { color: #fff; font-size: 1.35rem; margin-bottom: 8px; } .vctext p { color: rgba(255, 255, 255, 0.78); font-size: 0.87rem; margin: 0; max-width: 480px; } @media (max-width: 767px) { .vcbox { padding: 28px 22px; text-align: center; justify-content: center; } .vctext p { max-width: none; } } /* ===================== CHEFS ===================== */ #chefs { background: var(--surface); } .chcard { border-radius: 24px; overflow: hidden; background: var(--surface); transition: 0.4s; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07); } .chcard:hover { transform: translateY(-9px); box-shadow: var(--shadow-lg); } .chimg { position: relative; overflow: hidden; aspect-ratio: 1 / 1; height: auto; background: var(--cream2); display: block; } .chimg img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: 0.5s; } .chcard:hover .chimg img { transform: scale(1.05); } .chsoc { position: absolute; bottom: -50px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; transition: 0.4s; padding: 10px 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); } .chcard:hover .chsoc { bottom: 0; } .chsoc a { width: 33px; height: 33px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.78rem; transition: 0.3s; } .chsoc a:hover { background: var(--primary); } .chbody { padding: 18px; text-align: center; } .chnm { font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; } .chrole { font-size: 0.78rem; color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; } .chexp { font-size: 0.76rem; color: #bbb; margin-top: 5px; } /* ===================== HOURS ===================== */ #hours { background: linear-gradient(135deg, var(--darkbg), #3a3050); position: relative; overflow: hidden; } .hrsbg { position: absolute; inset: 0; opacity: 0.05; background: repeating-linear-gradient( 45deg, #fff 0, #fff 1px, transparent 0, transparent 50% ); background-size: 28px 28px; } .hrscard { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 24px; padding: 28px; } .hrsrow { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.09); } .hrsrow:last-child { border: none; } .hrsday { color: rgba(255, 255, 255, 0.78); font-size: 0.9rem; font-weight: 500; } .hrstime { color: #fff; font-weight: 700; font-size: 0.9rem; } .hdot { width: 7px; height: 7px; border-radius: 50%; } .hdot.on { background: #4ade80; box-shadow: 0 0 7px #4ade80; } .hdot.off { background: #ff8a8a; } .hrscta { background: var(--primary); border-radius: 24px; padding: 28px; text-align: center; box-shadow: 0 18px 48px rgba(255, 153, 157, 0.4); } .hrscta h4 { color: #fff; font-size: 1.4rem; font-weight: 800; } .hrscta p { color: rgba(255, 255, 255, 0.78); font-size: 0.86rem; margin: 9px 0 18px; } .btnw { background: var(--surface); color: var(--primary); border-radius: 50px; padding: 11px 28px; font-weight: 700; font-size: 0.88rem; display: inline-block; transition: 0.3s; } .btnw:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); color: var(--primary); } /* ===================== TESTIMONIALS ===================== */ #testimonials { background: var(--surface); } .tescard { background: var(--cream); border-radius: 24px; padding: 28px; position: relative; overflow: hidden; transition: 0.4s; } .tescard:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .tesq { position: absolute; top: 18px; right: 22px; font-size: 4.5rem; color: rgba(255, 153, 157, 0.07); font-family: "Prompt", sans-serif; line-height: 1; } .tess { color: var(--secondary); font-size: 0.83rem; margin-bottom: 12px; } .testxt { font-size: 0.88rem; color: #666; line-height: 1.8; margin-bottom: 18px; } .tesauth { display: flex; align-items: center; gap: 11px; } .tesauth img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); } .tesnm { font-weight: 700; font-size: 0.88rem; color: var(--dark); margin-bottom: 1px; font-family: "Prompt", sans-serif; } .tesrl { font-size: 0.73rem; color: #aaa; } /* ===================== RESERVATION — FIX 5 ===================== */ #reservation { background: var(--light); } .resico { width: 54px; height: 54px; border-radius: 18px; background: rgba(255, 153, 157, 0.1); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.25rem; flex-shrink: 0; } .flbl { font-size: 0.83rem; font-weight: 600; color: var(--dark); margin-bottom: 8px; line-height: 1.4; display: block; } .fctrl { width: 100%; border: 2px solid #eee; border-radius: 13px; padding: 13px 16px; font-family: "Prompt", sans-serif; font-size: 0.88rem; outline: none; transition: 0.3s; color: var(--dark); background: var(--surface); appearance: auto; } .fctrl:focus { border-color: var(--primary); } .fcard { background: var(--surface); border-radius: 24px; padding: 32px; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08); } .sucmsg { display: none; text-align: center; padding: 16px; background: rgba(70, 176, 135, 0.07); border-radius: 15px; margin-top: 14px; } .sucmsg i { color: var(--green); font-size: 1.7rem; display: block; margin-bottom: 7px; } .sucmsg p { color: var(--green); font-weight: 600; margin: 0; font-size: 0.88rem; } /* ===================== BLOG ===================== */ #blog { background: var(--light); } .blcard { background: var(--surface); border-radius: 24px; overflow: hidden; transition: 0.4s; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); } .blcard:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); } .blimg { position: relative; height: 195px; overflow: hidden; } .blimg img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; } .blcard:hover .blimg img { transform: scale(1.06); } .bldatebdg { position: absolute; top: 14px; left: 14px; background: var(--primary); color: #fff; border-radius: 13px; padding: 5px 11px; text-align: center; line-height: 1.2; } .bldatebdg .bd { font-size: 1.15rem; font-weight: 800; display: block; } .bldatebdg .bm { font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.8px; } .blbody { padding: 20px; } .bltag { font-size: 0.7rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 7px; } .bltit { font-size: 1rem; font-weight: 700; margin-bottom: 9px; line-height: 1.4; } .bltit a { color: var(--dark); } .bltit a:hover { color: var(--primary); } .blmeta { display: flex; gap: 14px; font-size: 0.76rem; color: #bbb; margin-bottom: 13px; } .blmeta i { color: var(--primary); margin-right: 3px; } .blmore { font-size: 0.8rem; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 5px; } .blmore i { transition: 0.3s; } .blmore:hover { color: var(--dark); } .blmore:hover i { transform: translateX(5px); } /* ===================== NEWSLETTER ===================== */ #newsletter { background: linear-gradient(135deg, var(--primary), #8b0000); position: relative; overflow: hidden; padding: 80px 0; } .nlbg { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='white' stroke-width='.4' opacity='.1'/%3E%3C/svg%3E"); background-size: 75px; } .nlw { position: relative; z-index: 2; } .nlw h2 { color: #fff; font-size: 2.1rem; } /* Newsletter form — fixed layout */ .nl-form-wrap { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; align-items: center; } .nlinput { flex: 1; min-width: 0; border: none; border-radius: 50px; padding: 14px 22px; font-size: 0.9rem; outline: none; font-family: "Prompt", sans-serif; color: #333; } .nlbtn { flex-shrink: 0; background: var(--secondary); color: var(--dark); border: none; border-radius: 50px; padding: 14px 26px; font-weight: 700; font-size: 0.9rem; cursor: pointer; white-space: nowrap; transition: 0.3s; font-family: "Prompt", sans-serif; } .nlbtn:hover { transform: scale(1.05); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); } @media (max-width: 540px) { .nl-form-wrap { flex-direction: column; padding: 0 10px; } .nlinput { width: 100%; border-radius: 16px; } .nlbtn { width: 100%; border-radius: 16px; } } /* ===================== CONTACT — FIX 6 ===================== */ #contact-section { background: var(--surface); } .ctdark { background: var(--darkbg); border-radius: 24px; padding: 38px; height: 100%; } .ctdark h4 { color: #fff; margin-bottom: 7px; } .ctdark .ctsub { color: rgba(255, 255, 255, 0.58); font-size: 0.88rem; margin-bottom: 26px; } .ctitem { display: flex; gap: 13px; margin-bottom: 20px; align-items: flex-start; } .cticon { width: 40px; height: 40px; border-radius: 13px; background: rgba(255, 153, 157, 0.18); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 0.9rem; flex-shrink: 0; } .ctinfo strong { display: block; color: #aaa; font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 1px; font-family: "Prompt", sans-serif; } .ctinfo span { color: #fff; font-size: 0.87rem; } .ctsocrow { display: flex; gap: 8px; margin-top: 14px; } .ctsocrow a { width: 35px; height: 35px; border-radius: 12px; background: rgba(255, 255, 255, 0.09); display: flex; align-items: center; justify-content: center; color: #bbb; transition: 0.3s; } .ctsocrow a:hover { background: var(--primary); color: #fff; } /* ===================== FOOTER ===================== */ footer { background: var(--darkbg); padding: 68px 0 0; } .fnm { font-family: "Prompt", sans-serif; font-size: 1.9rem; font-weight: 900; color: #fff; } .fnm span { color: var(--primary); } .fdesc { color: #777; font-size: 0.86rem; line-height: 1.8; margin-top: 9px; } .fsoc { display: flex; gap: 9px; margin-top: 18px; } .fsoc a { width: 36px; height: 36px; border-radius: 13px; background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; color: #777; font-size: 0.88rem; transition: 0.3s; } .fsoc a:hover { background: var(--primary); color: #fff; transform: translateY(-3px); } .ftit { color: #fff; font-size: 0.95rem; font-weight: 700; margin-bottom: 18px; padding-bottom: 9px; border-bottom: 2px solid var(--primary); display: inline-block; font-family: "Prompt", sans-serif; } .flinks li { list-style: none; margin-bottom: 9px; } .flinks a { color: #777; font-size: 0.86rem; display: inline-flex; align-items: center; gap: 7px; transition: 0.3s; } .flinks a:hover { color: var(--secondary); padding-left: 5px; } .flinks a i { color: var(--primary); font-size: 0.68rem; } .fci { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; } .fciico { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 153, 157, 0.14); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 0.82rem; flex-shrink: 0; } .fciinfo { color: #777; font-size: 0.83rem; line-height: 1.6; } .fciinfo strong { color: #bbb; display: block; font-size: 0.77rem; } .fbot { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 18px 0; margin-top: 46px; } .fbot p { color: #555; font-size: 0.8rem; margin: 0; } .fbot span { color: var(--primary); } .fbot a { color: #555; font-size: 0.8rem; margin-left: 18px; } .fbot a:hover { color: var(--secondary); } /* ===================== UTILITIES ===================== */ #btt { position: fixed; bottom: 28px; right: 28px; z-index: 9990; width: 44px; height: 44px; border-radius: 15px; background: linear-gradient(135deg, var(--primary), #ff7d83); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; box-shadow: 0 6px 18px rgba(255, 153, 157, 0.38); opacity: 0; transform: translateY(18px); transition: 0.4s; } #btt.show { opacity: 1; transform: translateY(0); } #btt:hover { transform: translateY(-4px) !important; } .cartfl { position: fixed; bottom: 28px; left: 28px; z-index: 9990; background: var(--secondary); border-radius: 50px; padding: 11px 18px; display: flex; align-items: center; gap: 9px; box-shadow: 0 7px 22px rgba(255, 194, 168, 0.38); cursor: pointer; transition: 0.3s; color: var(--dark); font-weight: 700; font-size: 0.88rem; } .cartfl:hover { transform: translateY(-4px); } .cartfl .ccount { background: var(--primary); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; } /* ==================================================== ALL POPUP / MODAL STYLES ==================================================== */ /* --- FIX 1: SEARCH POPUP --- */ #searchOv { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(5, 5, 5, 0.97); flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 78px; } #searchOv.open { display: flex; animation: fadeov 0.28s ease; } @keyframes fadeov { from { opacity: 0; } to { opacity: 1; } } #searchOv .sovclose { position: absolute; top: 22px; right: 28px; background: rgba(255, 255, 255, 0.08); border: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.15rem; cursor: pointer; transition: 0.3s; } #searchOv .sovclose:hover { background: var(--primary); } .sovbox { width: 100%; max-width: 680px; padding: 0 18px; } .sovbox h4 { color: #fff; text-align: center; font-size: 1.5rem; margin-bottom: 26px; font-family: "Prompt", sans-serif; } .sovinput { display: flex; border: 2px solid rgba(255, 255, 255, 0.18); border-radius: 60px; overflow: hidden; background: rgba(255, 255, 255, 0.05); } .sovinput input { flex: 1; background: transparent; border: none; padding: 17px 24px; color: #fff; font-size: 1.05rem; font-family: "Prompt", sans-serif; outline: none; } .sovinput input::placeholder { color: rgba(255, 255, 255, 0.38); } .sovinput button { background: var(--primary); border: none; padding: 0 26px; color: #fff; font-size: 1.1rem; cursor: pointer; transition: 0.3s; } .sovinput button:hover { background: #ff7d83; } .sovcats { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 28px; } .sovcat { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 50px; padding: 7px 18px; color: rgba(255, 255, 255, 0.78); font-size: 0.83rem; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 7px; font-family: "Prompt", sans-serif; } .sovcat img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .sovcat:hover, .sovcat.active { background: var(--primary); border-color: var(--primary); color: #fff; } .sovtrend { text-align: center; margin-top: 26px; } .sovtrend p { color: rgba(255, 255, 255, 0.45); font-size: 0.8rem; margin-bottom: 9px; } .sovtrend .ttag { display: inline-block; margin: 3px; background: rgba(255, 194, 168, 0.13); border: 1px solid rgba(255, 194, 168, 0.28); color: var(--secondary); border-radius: 26px; padding: 3px 13px; font-size: 0.76rem; cursor: pointer; transition: 0.3s; } .sovtrend .ttag:hover { background: var(--secondary); color: var(--dark); } /* --- FIX 4: MENU DETAIL POPUP --- */ #menuPop { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.84); backdrop-filter: blur(5px); align-items: center; justify-content: center; padding: 18px; } #menuPop.open { display: flex; animation: fadeov 0.28s ease; } .mpbox { background: var(--surface); border-radius: 28px; max-width: 800px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative; display: flex; flex-wrap: wrap; } .mpbox::-webkit-scrollbar { width: 3px; } .mpbox::-webkit-scrollbar-thumb { background: var(--primary); } .mpbox .mpimg { width: 44%; background: var(--cream2); display: flex; align-items: center; justify-content: center; border-radius: 28px 0 0 28px; overflow: hidden; min-height: 400px; } .mpbox .mpimg img { width: 100%; height: 100%; object-fit: cover; } .mpbox .mpbody { width: 56%; padding: 34px 30px; } .mpclose { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: #f2f2f2; border: none; font-size: 0.95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; z-index: 2; } .mpclose:hover { background: var(--primary); color: #fff; } #mpCat { font-size: 0.7rem; font-weight: 700; color: var(--secondary); text-transform: uppercase; letter-spacing: 1.3px; margin-bottom: 7px; } #mpTitle { font-size: 1.7rem; font-weight: 900; margin-bottom: 9px; font-family: "Prompt", sans-serif; color: var(--dark); } #mpStars { color: var(--secondary); font-size: 0.88rem; margin-bottom: 14px; } #mpDesc { font-size: 0.88rem; color: #777; line-height: 1.8; margin-bottom: 18px; } #mpPrice { font-size: 1.9rem; font-weight: 900; color: var(--primary); margin-bottom: 14px; font-family: "Prompt", sans-serif; } #mpPrice small { font-size: 0.95rem; color: #ccc; text-decoration: line-through; margin-left: 7px; } .mpmeta { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; } .mpm { text-align: center; background: var(--light); border-radius: 13px; padding: 9px 14px; } .mpmv { font-weight: 700; font-size: 0.92rem; color: var(--dark); } .mpml { font-size: 0.68rem; color: #bbb; } .mpqty { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; } .mpqbtn { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--primary); background: transparent; color: var(--primary); font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; font-weight: 700; } .mpqbtn:hover { background: var(--primary); color: #fff; } .mpqnum { font-size: 1.15rem; font-weight: 700; color: var(--dark); min-width: 30px; text-align: center; } .mptags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px; } .mptag { background: rgba(255, 194, 168, 0.11); color: var(--dark); border-radius: 26px; padding: 3px 11px; font-size: 0.73rem; font-weight: 600; } .mpaddcart { width: 100%; background: linear-gradient(135deg, var(--primary), #ff7d83); color: #fff; border: none; border-radius: 16px; padding: 15px; font-size: 0.96rem; font-weight: 700; cursor: pointer; font-family: "Prompt", sans-serif; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 9px; } .mpaddcart:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(255, 153, 157, 0.38); } /* --- FIX 7: GALLERY POPUP --- */ #galPop { display: none; position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.96); align-items: center; justify-content: center; padding: 18px; } #galPop.open { display: flex; animation: fadeov 0.28s ease; } .gpbox { max-width: 880px; width: 100%; position: relative; text-align: center; } .gpbox img { width: 100%; max-height: 64vh; object-fit: contain; border-radius: 20px; } .gpclose { position: absolute; top: -46px; right: 0; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); border: none; color: #fff; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; } .gpclose:hover { background: var(--primary); } .gpcap { color: #fff; margin-top: 18px; } .gpcap h5 { font-size: 1.25rem; margin-bottom: 5px; color: #fff; } .gpcap p { color: rgba(255, 255, 255, 0.58); font-size: 0.88rem; } .gpnav { display: flex; justify-content: center; gap: 11px; margin-top: 14px; } .gpnav button { background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; border-radius: 50px; padding: 7px 20px; cursor: pointer; font-size: 0.83rem; font-family: "Prompt", sans-serif; transition: 0.3s; } .gpnav button:hover { background: var(--primary); border-color: var(--primary); } /* Magnific video override */ .mfp-bg { background: #000 !important; opacity: 0.93 !important; } .mfp-close { color: #fff !important; } /* ===================== RESPONSIVE ===================== */ @media (max-width: 991px) { .hcircle { width: 320px; height: 320px; } .fc1, .fc2, .fc3 { transform: scale(0.82); transform-origin: center; } .ggrid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .gitem:first-child { grid-row: span 1; } .asm { display: none; } .mpbox .mpimg, .mpbox .mpbody { width: 100%; } .mpbox .mpimg { border-radius: 28px 28px 0 0; min-height: 240px; } .mpbox .mpbody { padding: 22px 18px; } .wheelmascot { width: 62px; height: 62px; top: -34px; } } @media (max-width: 480px) { .wheelwrap { max-width: 250px; } .wresultcard { padding: 16px; min-height: unset; } .wresultcard img { width: 100px; height: 100px; } } @media (max-width: 767px) { section { padding: 55px 0; } #topbar .top-contact span:last-child { display: none; } .hcircle { width: 260px; height: 260px; } /* Hide only hero floating cards, NOT form cards */ .fcard.fc1, .fcard.fc2, .fcard.fc3 { display: none !important; } .hstats { display: none !important; } .ggrid { grid-template-columns: 1fr 1fr; } .cdwrap { gap: 8px; } .cditem { min-width: 56px; padding: 9px; } .nl-form-wrap { flex-direction: column; padding: 0 8px; } .nlinput, .nlbtn { width: 100%; border-radius: 16px; } .fcard { padding: 22px 18px; } .navbar-nav { margin-bottom: 10px; } #loginBtn, #userArea { margin-left: 0; margin-top: 8px; } #userMenuDrop { right: auto; left: 0; } .vcbox { flex-direction: column; text-align: center; } .aprolewrap { flex-direction: column; } } @media (max-width: 480px) { .hcircle { width: 220px; height: 220px; } .htitle { font-size: 2.4rem; } .stitle { font-size: 1.8rem; } } /* ===================================================================== CHIMCHIM — ส่วนที่เพิ่มใหม่ (ปุ่มภาษา, Match %, ปุ่ม Save/Follow, AI Finder) ===================================================================== */ /* ---- ปุ่มสลับภาษา TH/EN บน topbar ---- */ .langsw { display: inline-flex; background: rgba(255, 255, 255, 0.12); border-radius: 26px; padding: 2px; margin-left: 10px; } .langbtn { border: none; background: transparent; color: #ddd; font-size: 0.72rem; font-weight: 700; padding: 3px 11px; border-radius: 22px; cursor: pointer; transition: 0.25s; font-family: "Prompt", sans-serif; } .langbtn.active { background: var(--primary); color: #fff; } /* ---- Match % badge บนการ์ดเมนู ---- */ .mmatch { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, var(--mint), #8fd8b8); color: #1f4f3c; font-size: 0.74rem; font-weight: 800; padding: 5px 12px; border-radius: 20px; box-shadow: 0 4px 12px rgba(70, 176, 135, 0.35); z-index: 2; cursor: pointer; } .mrestaurant { font-size: 0.74rem; color: var(--dark); font-weight: 600; margin-bottom: 2px; } .mmeta { display: flex; gap: 10px; font-size: 0.74rem; color: #999; margin: 4px 0 8px; flex-wrap: wrap; } .mmeta span i { color: var(--secondary); margin-right: 4px; } .mtagswrap { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; } .mtagit { background: var(--cream); color: #6b6b3f; font-size: 0.68rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; } /* ---- แท็บ For You / Near You / Hidden Gems / Popular / New ใช้คลาส .filtbtn เดิมได้เลย ---- */ /* ---- Popup เมนู: กล่อง Match % + เหตุผล ---- */ .mpmatch { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--mint), #8fd8b8); color: #1f4f3c; font-weight: 800; padding: 7px 16px; border-radius: 20px; cursor: pointer; margin: 6px 0 4px; font-size: 0.95rem; } .mpreason { display: none; background: var(--cream2); border: 1px dashed var(--secondary); border-radius: 14px; padding: 12px 14px; font-size: 0.82rem; color: #6b6250; margin-bottom: 10px; } .mpreason.show { display: block; } .mpactions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } .mpactbtn { flex: 1; min-width: 110px; border: 2px solid var(--primary); background: var(--surface); color: var(--primary); font-family: "Prompt", sans-serif; font-weight: 700; font-size: 0.84rem; padding: 11px 14px; border-radius: 20px; cursor: pointer; transition: 0.25s; display: flex; align-items: center; justify-content: center; gap: 6px; } .mpactbtn:hover { background: var(--primary); color: #fff; } .mpactbtn.saved { background: var(--primary); color: #fff; } .mpactbtn.following { background: var(--green); border-color: var(--green); color: #fff; } /* ---- ปุ่ม Follow นักรีวิว ---- */ .followbtn { border: 2px solid var(--dark); background: var(--surface); color: var(--dark); font-family: "Prompt", sans-serif; font-weight: 700; font-size: 0.78rem; padding: 7px 20px; border-radius: 20px; cursor: pointer; transition: 0.25s; } .followbtn:hover { background: var(--dark); color: #fff; } .followbtn.following { background: var(--green); border-color: var(--green); color: #fff; } .chlv { font-size: 0.76rem; color: var(--primary); font-weight: 700; margin-top: 2px; } /* ---- Sponsored match text ---- */ .spmatch { display: inline-block; background: rgba(255, 255, 255, 0.85); color: #1f4f3c; font-weight: 700; font-size: 0.8rem; padding: 5px 14px; border-radius: 20px; margin-bottom: 14px; } /* ---- AI Food Finder แบบย่อ (แทนฟอร์มจองโต๊ะเดิม) ---- */ .aiw { background: var(--cream2); border-radius: 26px; padding: 34px; } .aiprogress { display: flex; gap: 6px; margin-bottom: 18px; } .aiprogress span { flex: 1; height: 6px; border-radius: 10px; background: #ecebe0; } .aiprogress span.done { background: var(--primary); } .aistepnum { font-size: 0.76rem; color: #999; font-weight: 600; margin-bottom: 6px; } .aiq { font-size: 1.15rem; font-weight: 800; color: var(--dark); margin-bottom: 18px; } .aiopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } .aiopt { background: var(--surface); border: 2px solid transparent; border-radius: 18px; padding: 16px 10px; text-align: center; cursor: pointer; font-family: "Prompt", sans-serif; font-weight: 600; font-size: 0.86rem; color: #555; transition: 0.2s; } .aiopt .aiemo { display: block; font-size: 1.6rem; margin-bottom: 6px; } .aiopt:hover { border-color: var(--secondary); transform: translateY(-3px); } .aiopt.picked { border-color: var(--primary); background: var(--light); color: var(--primary); } .aistepbtns { display: flex; justify-content: space-between; margin-top: 22px; } .aiback { background: none; border: none; color: #999; font-weight: 600; cursor: pointer; font-family: "Prompt", sans-serif; } .airesults { display: none; } .airesults.show { display: block; } .airescard { display: flex; gap: 14px; background: var(--surface); border-radius: 18px; padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow); align-items: center; } .airescard img { width: 84px; height: 84px; object-fit: cover; border-radius: 14px; flex-shrink: 0; } .aires-title { font-weight: 800; color: var(--dark); font-size: 0.95rem; } .aires-shop { font-size: 0.76rem; color: #999; margin-bottom: 4px; } .aires-why { font-size: 0.76rem; color: #7a7a7a; margin-top: 4px; } .aires-match { background: var(--mint); color: #1f4f3c; font-weight: 800; font-size: 0.76rem; padding: 3px 10px; border-radius: 20px; display: inline-block; margin-bottom: 3px; } .airetrybtn { background: none; border: 2px dashed var(--secondary); color: var(--dark); font-weight: 700; font-family: "Prompt", sans-serif; padding: 10px 20px; border-radius: 20px; cursor: pointer; margin-top: 6px; } /* ---- AI Food Finder แบบแชท (แทนวิซาร์ด 4 ขั้นตอนเดิม) ---- */ .aichat-wrap { display: flex; flex-direction: column; min-height: calc(100vh - 180px); max-width: 640px; margin: 0 auto; padding: 12px 16px 0; } .aichat-top { display: flex; align-items: center; gap: 12px; padding: 4px 2px 14px; flex-shrink: 0; } .aichat-top img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } .aichat-hi { font-weight: 800; color: var(--dark); font-size: 1.15rem; line-height: 1.3; } .aichat-sub { font-size: 0.78rem; color: #999; } .aichat-body { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 4px 2px 16px; scrollbar-width: none; } .aichat-body::-webkit-scrollbar { display: none; } .chatbubble { max-width: 84%; padding: 13px 17px; border-radius: 18px; font-size: 0.85rem; line-height: 1.55; } .chatbubble.bot { background: var(--surface); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: var(--shadow); } .chatbubble.user { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 600; } .chattyping { display: flex; gap: 4px; align-self: flex-start; background: var(--surface); padding: 14px 16px; border-radius: 18px; border-bottom-left-radius: 4px; box-shadow: var(--shadow); } .chattyping span { width: 6px; height: 6px; border-radius: 50%; background: #ccc; animation: typingBounce 1.2s infinite; } .chattyping span:nth-child(2) { animation-delay: 0.2s; } .chattyping span:nth-child(3) { animation-delay: 0.4s; } @keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } .chatcardrow { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px 4px; align-self: flex-start; max-width: 100%; scrollbar-width: none; } .chatcardrow::-webkit-scrollbar { display: none; } .chatcard { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); min-width: 168px; max-width: 168px; overflow: hidden; cursor: pointer; flex-shrink: 0; transition: 0.2s; } .chatcard:hover { transform: translateY(-3px); } .chatcard img { width: 100%; height: 100px; object-fit: cover; } .chatcard-body { padding: 8px 10px 10px; } .chatcard-match { display: inline-block; background: var(--mint); color: #1f4f3c; font-weight: 800; font-size: 0.66rem; padding: 2px 8px; border-radius: 20px; margin-bottom: 4px; } .chatcard-title { font-weight: 800; font-size: 0.78rem; color: var(--dark); line-height: 1.25; margin-bottom: 2px; } .chatcard-meta { font-size: 0.66rem; color: #999; } .aichat-suggestrow { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; flex-shrink: 0; scrollbar-width: none; } .aichat-suggestrow::-webkit-scrollbar { display: none; } .chatchip { background: var(--surface); border: 1.5px solid var(--secondary); color: var(--dark); font-weight: 700; font-size: 0.78rem; padding: 7px 15px; border-radius: 20px; white-space: nowrap; cursor: pointer; flex-shrink: 0; font-family: "Prompt", sans-serif; transition: 0.2s; } .chatchip:hover { background: var(--cream); transform: translateY(-2px); } .aichat-inputbar { display: flex; gap: 8px; align-items: center; padding: 6px 2px 16px; flex-shrink: 0; } .aichat-inputbar input { flex: 1; min-width: 0; border: none; background: var(--surface); border-radius: 24px; padding: 13px 18px; font-size: 0.85rem; font-family: "Prompt", sans-serif; box-shadow: var(--shadow); color: var(--darkbg); } .aichat-inputbar input:focus { outline: 2px solid var(--secondary); } .aichat-inputbar input::placeholder { color: #bbb; } .aichat-inputbar button { width: 46px; height: 46px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--dark), #7d6fb0); color: #fff; font-size: 1.05rem; cursor: pointer; box-shadow: 0 6px 16px rgba(143, 130, 184, 0.4); flex-shrink: 0; } /* ===================================================================== APP SHELL — โครงแอปแบบหลายหน้า + bottom nav (ตามภาพตัวอย่างที่ผู้ใช้ส่งมา) ===================================================================== */ body.appshell { background: var(--light); padding-bottom: 110px; max-width: 480px; margin: 0 auto; min-height: 100vh; } /* บนจอกว้างกว่ามือถือ (แท็บเล็ต/เดสก์ท็อป) ใส่กรอบ+เงาให้ดูเป็น "แอปมือถือ" อยู่กลางจอ แทนที่จะยืดเต็มความกว้างจอจนทุกอย่างดูใหญ่ผิดสัดส่วน — บนมือถือจริง (จอ ≤480px) จะไม่เห็นผลต่างเลย */ @media (min-width: 481px) { html { background: #e9e6f2; } html[data-theme="dark"] { background: #14121c; } body.appshell { box-shadow: 0 0 60px rgba(0, 0, 0, 0.12); background: var(--surface); } } /* ---- แถบบนสุด (แทนที่ topbar + navbar เดิม) ---- */ .apptop { position: sticky; top: 0; z-index: 900; background: var(--surface); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .apptop-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; } .apptop-logo .aico { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--dark), var(--secondary)); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 14px rgba(143, 130, 184, 0.4); } .apptop-logo .aico img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .apptop-logo .anm { font-family: "Prompt", sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--dark); line-height: 1; } .apptop-logo .anm span { color: var(--primary); } .apptop-actions { display: flex; align-items: center; gap: 8px; } .apptop-btn { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--cream); color: var(--dark); display: flex; align-items: center; justify-content: center; font-size: 1rem; text-decoration: none; cursor: pointer; transition: 0.25s; flex-shrink: 0; } .apptop-btn:hover { background: var(--mint); color: var(--darkbg); } #loginBtn.apptop-loginbtn { background: linear-gradient(135deg, var(--dark), #7d6fb0); border: none; color: #fff; border-radius: 30px; padding: 9px 18px; font-size: 0.8rem; font-weight: 700; font-family: "Prompt", sans-serif; cursor: pointer; box-shadow: 0 6px 16px rgba(143, 130, 184, 0.4); margin-left: 0; } .apptop-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--dark), #6d5fa0); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; text-decoration: none; box-shadow: 0 4px 14px rgba(143, 130, 184, 0.35); } /* ---- แถบล่าง (bottom nav) ---- */ .appnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; background: var(--surface); box-shadow: 0 -6px 26px rgba(0, 0, 0, 0.09); display: flex; align-items: flex-end; justify-content: space-around; padding: 9px 4px calc(9px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0; max-width: 480px; margin: 0 auto; } .anitem { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #c2c2c2; text-decoration: none; font-size: 0.62rem; font-weight: 700; padding: 6px 4px; border-radius: 14px; transition: 0.25s; flex: 1; min-width: 0; } .anitem i { font-size: 1.2rem; } .anitem.active, .anitem:hover { color: var(--dark); } .ancenter { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--dark), #6d5fa0); display: flex; align-items: center; justify-content: center; margin-top: -32px; box-shadow: 0 12px 28px rgba(143, 130, 184, 0.55); flex-shrink: 0; transition: 0.25s; border: 4px solid #fff; } .ancenter img { width: 32px; height: 32px; object-fit: contain; } .ancenter:hover { transform: translateY(-3px) scale(1.06); } /* ---- Toast แจ้งเตือนลอยด้านล่าง (เหนือ bottom nav) ---- */ #appToast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(10px); background: var(--darkbg); color: #fff; padding: 12px 22px; border-radius: 30px; font-size: 0.82rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); z-index: 1200; opacity: 0; pointer-events: none; transition: 0.3s; max-width: 90vw; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #appToast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---- Home: แถบค้นหา + การ์ด CTA คู่ ---- */ .homesearch { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 18px; padding: 13px 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); color: #aaa; font-size: 0.85rem; width: 100%; font-family: "Prompt", sans-serif; } .homesearch i { color: var(--primary); } .homesearch input { border: none; outline: none; flex: 1; font-size: 0.85rem; font-family: "Prompt", sans-serif; color: var(--darkbg); background: transparent; } .homesearch input::placeholder { color: #bbb; } .rowsub { font-size: 0.74rem; color: #999; margin: -8px 0 12px; } .searchwrap { position: sticky; top: 73px; z-index: 850; background: var(--light); padding-top: 8px; margin-top: -8px; } .locationprompt { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--mint), #c9f2e0); border-radius: 18px; padding: 14px 16px; } .locationprompticon { font-size: 1.3rem; color: var(--dark); flex-shrink: 0; } .locationprompttext { flex: 1; min-width: 0; } .locationprompttit { font-size: 0.85rem; font-weight: 700; color: var(--darkbg); } .locationpromptdesc { font-size: 0.75rem; color: #555; margin-top: 2px; } .locationpromptbtn { flex-shrink: 0; padding: 8px 16px; font-size: 0.8rem; width: auto; } .locationpromptclose { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.6); color: var(--dark); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; } @media (max-width: 420px) { .locationprompttit { font-size: 0.8rem; } .locationpromptdesc { display: none; } } .searchpanel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 8px; z-index: 500; max-height: 60vh; overflow-y: auto; } .spgroup { margin-bottom: 4px; } .spgrouplbl { font-size: 0.68rem; font-weight: 800; color: var(--dark); text-transform: uppercase; letter-spacing: 0.03em; padding: 8px 10px 4px; } .spitem { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; cursor: pointer; text-decoration: none; color: inherit; } .spitem:hover { background: var(--cream2); } .spitem img, .spitem .spavatar { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; } .spitem .spavatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.95rem; } .spitem .sptit { font-weight: 700; font-size: 0.82rem; color: var(--text); } .spitem .spsub { font-size: 0.7rem; color: #999; } .spempty { text-align: center; color: #bbb; font-size: 0.8rem; padding: 16px 0; } .sellpoint { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, var(--dark), #7d6fb0); color: #fff; border-radius: 14px; padding: 12px 16px; font-size: 0.78rem; font-weight: 600; } .sellpoint i { font-size: 1.15rem; flex-shrink: 0; } .rowtitle { font-weight: 800; color: var(--darkbg); font-size: 1.02rem; margin-bottom: 12px; display: flex; align-items: center; gap: 7px; } .hrowwrap { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 16px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 6px; } .hrowwrap::-webkit-scrollbar { display: none; } .hrowwrap .mcard { min-width: 195px; max-width: 195px; scroll-snap-align: start; cursor: pointer; } .hrowwrap .mimg { height: 130px; } /* ---- Match Hero — สไลด์ภาพร้านที่ Match สูงสุดเรียงกันเป็นแถว เลื่อนซ้ายขวาดูได้ทีละร้าน พร้อมป้ายลอย (Match% / ระยะทาง) ต่อร้าน ข้อมูลคำนวณจริงจาก Food DNA ปัจจุบัน ---- */ .matchhero { position: relative; height: 430px; max-width: 400px; margin: 0 auto 12px; } .mhring { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 360px; height: 360px; border-radius: 50%; background: var(--secondary); opacity: 0.4; } .mhcirclewrap { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 340px; height: 340px; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lg); z-index: 2; border: 4px solid var(--surface); cursor: pointer; } .mhslides { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mhslides::-webkit-scrollbar { display: none; } .mhslides img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; } .mhbadge { position: absolute; display: flex; align-items: center; gap: 8px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 8px 12px; z-index: 3; max-width: 175px; } .mhicon { width: 30px; height: 30px; border-radius: 50%; background: var(--cream2); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .mhbadge b { display: block; font-size: 0.78rem; font-weight: 800; color: var(--dark); line-height: 1.2; } .mhbadge span { display: block; font-size: 0.62rem; color: #999; line-height: 1.3; } .mhbadge-match { top: 0; left: 0; } .mhbadge-dist { top: 255px; right: 0; } .discoverytrack { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .discoverytrack::-webkit-scrollbar { display: none; } .dcard { position: relative; flex: 0 0 68%; max-width: 230px; aspect-ratio: 3/4; border-radius: 22px; overflow: hidden; scroll-snap-align: center; cursor: pointer; box-shadow: var(--shadow); flex-shrink: 0; } .dcard img { width: 100%; height: 100%; object-fit: cover; display: block; } .dcard-badge { position: absolute; padding: 4px 11px; border-radius: 20px; font-size: 0.7rem; font-weight: 800; color: #fff; backdrop-filter: blur(4px); } .dcard-match { top: 10px; left: 10px; background: linear-gradient(135deg, rgba(143, 130, 184, 0.9), rgba(255, 153, 157, 0.9)); } .dcard-price { top: 10px; right: 10px; background: rgba(0, 0, 0, 0.55); } .dcard-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 14px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); color: #fff; } .dcard-cap .dtit { font-weight: 800; font-size: 0.95rem; margin-bottom: 2px; } .dcard-cap .dsub { font-size: 0.72rem; opacity: 0.85; } .ctarow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cta2card { border-radius: 20px; padding: 20px; position: relative; overflow: hidden; text-decoration: none; display: block; min-height: 120px; transition: 0.3s; } .cta2card:hover { transform: translateY(-4px); } .cta2card.ai { background: linear-gradient(135deg, #fff0f1, #ffe3e5); } .cta2card.roulette { background: linear-gradient(135deg, #f1eefc, #e6e0fa); } .cta2card .ctaico { width: 42px; height: 42px; object-fit: contain; margin-bottom: 12px; } .cta2card h4 { font-size: 0.95rem; font-weight: 800; color: var(--darkbg); margin-bottom: 3px; } .cta2card p { font-size: 0.72rem; color: #888; margin: 0; } .cta2card .ctaarrow { position: absolute; bottom: 16px; right: 16px; color: var(--primary); font-size: 0.9rem; } /* ---- Home: แถบไอคอนหมวดหมู่ (เลื่อนแนวนอนบนมือถือ) ---- */ .catstrip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .catstrip::-webkit-scrollbar { display: none; } .catchip { flex-shrink: 0; width: 68px; text-align: center; cursor: pointer; } .catchip img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; border: 2px solid transparent; transition: 0.25s; } .catchip.active img, .catchip:hover img { border-color: var(--primary); transform: scale(1.06); } .catchip span { font-size: 0.68rem; font-weight: 600; color: var(--dark); display: block; } /* ---- ตัวหมุนโหลดโพสต์เพิ่มท้ายฟีดชุมชน ---- */ .feedloadingmore { color: #999; font-size: 0.78rem; padding: 14px 0 6px; display: flex; align-items: center; justify-content: center; gap: 7px; } .feedloadingmore i { color: var(--primary); } /* ---- แถบหมวดหมู่อาหารหน้าเทรนด์ (แทนแบนเนอร์ Match % เดิม) — กดแล้วกรองทั้งหน้าเลย ---- */ .trendcatstrip { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; } .trendcatstrip::-webkit-scrollbar { display: none; } .trendcatchip { flex-shrink: 0; width: 66px; text-align: center; cursor: pointer; } .trendcaticon { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--cream2); border: 3px solid transparent; margin: 0 auto 6px; transition: 0.25s; } .trendcatchip.active .trendcaticon { border-color: var(--dark); background: var(--surface); box-shadow: 0 4px 14px rgba(143, 130, 184, 0.3); transform: scale(1.06); } .trendcatchip span { font-size: 0.66rem; font-weight: 600; color: var(--text); display: block; line-height: 1.25; } .trendcatchip.active span { color: var(--dark); font-weight: 800; } /* ---- Welcome / splash screen ---- */ #welcome { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; background: radial-gradient(circle at 50% 0%, var(--cream), #fff 65%); position: relative; overflow-x: hidden; overflow-y: auto; } /* บนมือถือจริง 100vh มักสูงกว่าพื้นที่มองเห็นจริง (เพราะแถบ URL ของเบราว์เซอร์กินพื้นที่ไป) ถ้าเนื้อหาสูงเกินพอดี ปุ่ม "ดูแอปเลย" ที่อยู่ล่างสุดจะโดนตัดมองไม่เห็น กดไม่ได้เลย (overflow:hidden เดิมซ่อนไว้) เปลี่ยนเป็น overflow-y:auto ด้านบนให้เลื่อนดูได้ถ้าจำเป็น + ลดระยะห่างบนจอเตี้ยกันไม่ให้ล้นตั้งแต่แรก */ @media (max-height: 700px) { #welcome { padding: 24px 24px; } .weldino { width: 140px; margin-bottom: 2px; } .weltag { margin-bottom: 20px; } .welbtns { gap: 8px; } .welskip { margin-top: 12px; } } .weldino { width: 200px; margin-bottom: 6px; filter: drop-shadow(0 18px 32px rgba(143, 130, 184, 0.35)); animation: dinobob 3s ease-in-out infinite; } .wellogo { font-family: "Prompt", sans-serif; font-weight: 900; font-size: 2.5rem; color: var(--dark); margin-bottom: 4px; } .wellogo span { color: var(--primary); } .weltag { color: #888; font-size: 0.95rem; margin-bottom: 38px; } .welbtns { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 12px; } .welbtns .btn-red { justify-content: center; width: 100%; } .welbtn-outline { border: 2px solid var(--dark); color: var(--dark); background: var(--surface); border-radius: 50px; padding: 14px 32px; font-weight: 700; font-size: 0.93rem; font-family: "Prompt", sans-serif; cursor: pointer; transition: 0.3s; width: 100%; } .welbtn-outline:hover { background: var(--dark); color: #fff; } .welskip { color: #aaa; font-size: 0.82rem; margin-top: 20px; text-decoration: underline; cursor: pointer; background: none; border: none; font-family: "Prompt", sans-serif; } /* ===================================================================== ONBOARDING WIZARD (profile-setup.html) — ใช้สไตล์เดียวกับ .aiopt/.aistepbox เดิม ===================================================================== */ .obwrap { max-width: 480px; margin: 0 auto; padding: 26px 20px 40px; } .obtopnav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .obback { width: 38px; height: 38px; border-radius: 50%; background: var(--cream); border: none; color: var(--dark); display: flex; align-items: center; justify-content: center; cursor: pointer; } .obstepnum { font-size: 0.76rem; font-weight: 700; color: #aaa; } .obprogress { display: flex; gap: 6px; margin-bottom: 26px; } .obprogress span { flex: 1; height: 5px; border-radius: 6px; background: #eee; } .obprogress span.done { background: linear-gradient(90deg, var(--primary), var(--secondary)); } .obq { font-size: 1.4rem; font-weight: 800; color: var(--darkbg); margin-bottom: 6px; } .obhint { font-size: 0.85rem; color: #999; margin-bottom: 24px; } .obgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; } .obopt { background: var(--surface); border: 2px solid #eee; border-radius: 18px; padding: 18px 12px; text-align: center; cursor: pointer; transition: 0.25s; font-size: 0.85rem; font-weight: 600; color: var(--darkbg); } .obopt .obemo { font-size: 1.6rem; display: block; margin-bottom: 8px; } .obopt:hover { border-color: var(--secondary); } .obopt.picked { border-color: var(--primary); background: rgba(255, 153, 157, 0.08); box-shadow: 0 6px 18px rgba(255, 153, 157, 0.2); } .obrange { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; } .obrangeopt { background: var(--surface); border: 2px solid #eee; border-radius: 16px; padding: 14px 18px; cursor: pointer; transition: 0.25s; font-size: 0.88rem; font-weight: 600; color: var(--darkbg); display: flex; justify-content: space-between; align-items: center; } .obrangeopt:hover { border-color: var(--secondary); } .obrangeopt.picked { border-color: var(--primary); background: rgba(255, 153, 157, 0.08); } .obnextbtn { width: 100%; justify-content: center; } .obdone { text-align: center; padding-top: 30px; } .obdone img { width: 150px; margin-bottom: 6px; filter: drop-shadow(0 14px 26px rgba(255, 153, 157, 0.35)); } .obdone h2 { font-size: 1.5rem; font-weight: 900; color: var(--darkbg); margin-bottom: 6px; } .obdone p { color: #888; font-size: 0.88rem; margin-bottom: 22px; } .obdna { background: var(--surface); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); text-align: left; margin-bottom: 24px; } .obdnatit { font-size: 0.82rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; } .analyticstotal { font-size: 2.2rem; font-weight: 800; color: var(--darkbg); } .obdnarow { margin-bottom: 14px; } .obdnarow:last-child { margin-bottom: 0; } .obdnalbl { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 600; color: var(--darkbg); margin-bottom: 5px; } .obdnabar { height: 8px; border-radius: 10px; background: var(--cream2); overflow: hidden; } .obdnabar span { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 0.8s ease; width: 0%; } /* ===================================================================== RESTAURANT DETAIL PAGE (restaurant.html) ===================================================================== */ .rdhero { position: relative; height: 260px; background: var(--cream2); } .rdhero img { width: 100%; height: 100%; object-fit: cover; } .rdheroback, .rdherosave, .rdheroshare, .rdheroreport { position: absolute; top: 16px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; color: var(--dark); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); text-decoration: none; cursor: pointer; border: none; } .rdheroback { left: 16px; } .rdherosave { right: 108px; } .rdheroreport { right: 62px; } .rdheroshare { right: 16px; } .rdherosave.saved { color: var(--primary); } .rdlikecount { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.58rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; white-space: nowrap; } .rdbody { padding: 22px 20px 20px; margin-top: -22px; background: var(--surface); border-radius: 24px 24px 0 0; position: relative; max-width: 620px; margin-left: auto; margin-right: auto; } .rdcat { font-size: 0.78rem; color: var(--primary); font-weight: 700; margin-bottom: 4px; } .rdtitle { font-size: 1.35rem; font-weight: 800; color: var(--darkbg); margin-bottom: 6px; } .rdmeta { font-size: 0.8rem; color: #999; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 12px; } .rdmeta span, .rdmeta a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; } .rdmeta i { color: var(--secondary); } .rdmeta a.rdshoplink { cursor: pointer; color: var(--dark); font-weight: 600; } .rdmeta a.rdshoplink:hover { text-decoration: underline; } .rdmeta a.rdshoplink .rdshopchevron { font-size: 0.75rem; opacity: 0.6; } .rdfollowbtn { border: 2px solid var(--dark); background: var(--surface); color: var(--dark); border-radius: 30px; padding: 9px 20px; font-size: 0.8rem; font-weight: 700; font-family: "Prompt", sans-serif; cursor: pointer; transition: 0.25s; margin-bottom: 18px; } .rdfollowbtn.following { background: var(--dark); color: #fff; } .rdmatchbox { background: linear-gradient(135deg, var(--mint), #c9f2e0); border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; } .rdmatchpct { font-size: 1.3rem; font-weight: 900; color: #1f4f3c; } .rdmatchreason { font-size: 0.78rem; color: #2e5f4a; margin-top: 4px; } .rddesc { font-size: 0.87rem; color: #666; line-height: 1.7; margin-bottom: 18px; } .rdtagswrap { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } .rdinfobox { margin-bottom: 14px; } .rdinforow { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #777; } .rdinforow i { color: var(--dark); width: 18px; text-align: center; } .rdinforow b { color: var(--darkbg); font-weight: 700; margin-left: auto; } .rdpromobox { background: linear-gradient(135deg, var(--cream), var(--cream2)); border-radius: 16px; padding: 14px 16px; margin-bottom: 20px; } .rdpromotit { font-weight: 800; font-size: 0.82rem; color: var(--dark); margin-bottom: 8px; } .rdpromoitem { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--darkbg); font-weight: 600; } .rdpromoicon { font-size: 1.2rem; flex-shrink: 0; } .rdtabs { display: flex; gap: 4px; border-bottom: 1px solid #eee; margin-bottom: 18px; } .rdtab { padding: 9px 6px; font-size: 0.84rem; font-weight: 700; color: #aaa; border-bottom: 2px solid transparent; cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; font-family: "Prompt", sans-serif; } .rdtab.active { color: var(--primary); border-bottom-color: var(--primary); } .rdpane { display: none; } .rdpane.active { display: block; } .rdactions { display: flex; gap: 10px; margin-top: 24px; } .rdactions .btn-red, .rdactions .rdghost { flex: 1; justify-content: center; } .rdghost { border: 2px solid var(--dark); color: var(--dark); background: var(--surface); border-radius: 50px; padding: 13px 20px; font-weight: 700; font-size: 0.88rem; font-family: "Prompt", sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: 0.25s; } .rdghost:hover { background: var(--dark); color: #fff; } .rdreviewrow { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f2f2f2; } .rdreviewactions { display: flex; gap: 6px; flex-shrink: 0; align-self: flex-start; } .rdreviewactions button { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--surface2, #f2f2f2); color: #999; font-size: 0.72rem; cursor: pointer; } .rdreviewactions .rdreviewdel:hover { background: #e5576b; color: #fff; } .rdreviewactions .rdreviewedit:hover { background: var(--primary); color: #fff; } .rdreviewavt { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; } .rdreviewnm { font-size: 0.85rem; font-weight: 700; color: var(--darkbg); } .rdreviewscore { font-size: 0.72rem; color: var(--primary); font-weight: 700; margin: 2px 0 4px; } .rdreviewtxt { font-size: 0.82rem; color: #777; line-height: 1.6; } .rdempty { text-align: center; color: #aaa; font-size: 0.85rem; padding: 30px 0; } /* ===================================================================== REVIEW PAGE (review.html) ===================================================================== */ .revwrap { max-width: 480px; margin: 0 auto; padding: 22px 20px 40px; } .revshop { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); margin-bottom: 26px; } .revshop img { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; } .revshop .rname { font-weight: 700; color: var(--darkbg); font-size: 0.9rem; } .revshop .rdish { font-size: 0.76rem; color: #999; } .revrow { margin-bottom: 22px; } .revlbl { font-size: 0.86rem; font-weight: 700; color: var(--darkbg); margin-bottom: 10px; } .revdinos { display: flex; gap: 8px; } .revdino { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; cursor: pointer; opacity: 0.32; transition: 0.2s; border: 2px solid transparent; background: var(--cream2); } .revdino.on { opacity: 1; border-color: var(--primary); transform: scale(1.1); } .revdino img { width: 100%; height: 100%; object-fit: cover; } .revsubmitbtn { width: 100%; justify-content: center; margin-top: 8px; } /* ===================================================================== PROFILE PAGE (profile.html) ===================================================================== */ .profwrap { max-width: 520px; margin: 0 auto; padding: 10px 20px 30px; } .profhead { display: flex; align-items: center; gap: 16px; padding: 22px 0 26px; } /* ---- เพจร้านอาหาร (หน้า Settings) ---- */ .pagepreview { display: flex; align-items: center; gap: 12px; background: var(--cream2); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; } .pagepreviewavatar { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--cream2); } .pagepreviewname { font-weight: 800; font-size: 0.9rem; color: var(--dark); } .pagepreviewcat { font-size: 0.76rem; color: #999; } .postingasrow { display: flex; align-items: center; gap: 8px; background: var(--cream2); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; text-decoration: none; color: var(--dark); font-size: 0.78rem; font-weight: 700; } .postingasrow img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .postingasrow span { flex: 1; } .postingasrow i { font-size: 0.7rem; color: #999; } .profavatar { width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: #fff; flex-shrink: 0; } .profname { font-size: 1.2rem; font-weight: 800; color: var(--darkbg); } .profemail { font-size: 0.78rem; color: #999; } .profrole { display: inline-block; margin-top: 5px; font-size: 0.7rem; font-weight: 700; padding: 3px 12px; border-radius: 20px; background: rgba(143, 130, 184, 0.14); color: var(--dark); } /* ---- โปรไฟล์สไตล์ IG: อวตาร+สถิติแถวบน / ชื่อ+bio / ปุ่มแก้ไข-แชร์ ---- */ .ighead { display: flex; align-items: center; gap: 22px; padding: 22px 0 14px; } .igavatar { width: 86px; height: 86px; font-size: 2rem; border: 3px solid var(--surface); box-shadow: 0 0 0 1px rgba(143, 130, 184, 0.25); } .igstats { display: flex; flex: 1; justify-content: space-around; } .igstat { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: inherit; } .igstat b { font-size: 1.1rem; font-weight: 800; color: var(--darkbg); } .igstat span { font-size: 0.72rem; color: #999; } .ignamewrap { padding-bottom: 14px; } .ignamewrap .profrole { margin-left: 8px; } .ignamewrap .profemail { margin-top: 4px; } .profbio { margin: 6px 0 0; font-size: 0.82rem; color: var(--darkbg); line-height: 1.4; white-space: pre-wrap; } .igbtnrow { display: flex; gap: 8px; padding-bottom: 20px; } .igbtn { flex: 1; text-align: center; border: none; background: var(--cream2); color: var(--darkbg); font-family: "Prompt", sans-serif; font-size: 0.82rem; font-weight: 700; border-radius: 10px; padding: 9px 10px; text-decoration: none; cursor: pointer; } .igbtn:hover { background: rgba(143, 130, 184, 0.18); } .profcard { background: var(--surface); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); margin-bottom: 20px; } .profcardtit { font-size: 0.85rem; font-weight: 800; color: var(--darkbg); margin-bottom: 12px; margin-bottom: 14px; } .profcardbtn { display: block; width: 100%; text-align: left; border: none; cursor: pointer; font-family: "Prompt", sans-serif; } .profcardbtn .profcardtit { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; } .profcardbtn .profcardtit::after { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #ccc; font-size: 0.8rem; } .profcardbtnhint { font-size: 0.78rem; color: #999; margin: 6px 0 0; } .profshoprow { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid #f2f2f2; } .profshoprow:last-child { border-bottom: none; } .profshoprow img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex-shrink: 0; } .profshopnm { font-size: 0.86rem; font-weight: 700; color: var(--darkbg); } .profshopmeta { font-size: 0.74rem; color: #999; } .profreviewitem { padding: 11px 0; border-bottom: 1px solid #f2f2f2; } .profreviewitem:last-child { border-bottom: none; } .profreviewrow { display: flex; gap: 12px; align-items: center; cursor: pointer; } .profreviewrow img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; flex-shrink: 0; } .profreviewtxt { font-size: 0.76rem; color: #888; margin: 6px 0 0; line-height: 1.5; } .profbtn { width: 100%; justify-content: center; margin-bottom: 12px; } .proflogoutbtn { width: 100%; background: none; border: 2px solid #f0c1c8; color: #e5576b; border-radius: 50px; padding: 13px 20px; font-weight: 700; font-size: 0.88rem; font-family: "Prompt", sans-serif; cursor: pointer; transition: 0.25s; } .proflogoutbtn:hover { background: #e5576b; color: #fff; border-color: #e5576b; } .profguestbox { text-align: center; padding: 60px 20px; } .profguestbox img { width: 140px; margin-bottom: 16px; filter: drop-shadow(0 14px 26px rgba(143, 130, 184, 0.3)); } .profguestbox h3 { font-size: 1.2rem; font-weight: 800; color: var(--darkbg); margin-bottom: 8px; } .profguestbox p { color: #999; font-size: 0.87rem; margin-bottom: 22px; } /* ---- โพสต์ (ภาพ + แคปชั่น) บนโปรไฟล์ ---- */ /* ---- Post Viewer Modal (กดดูโพสต์แบบเต็มจอ เหมือนอินสตาแกรม) ---- */ .pvbox { position: relative; background: var(--surface); border-radius: 20px; width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; box-shadow: 0 30px 70px rgba(91, 79, 125, 0.35); animation: popin 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .pvimgs { position: relative; } .pvimgstrip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .pvimgstrip::-webkit-scrollbar { display: none; } .pvimgstrip img { width: 100%; flex: 0 0 100%; max-height: 60vh; object-fit: cover; display: block; scroll-snap-align: start; background: var(--cream2); } .pvbox .pvimgstrip img:first-child { border-radius: 20px 20px 0 0; } .pvdots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; } .pvdots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: 0.2s; } .pvdots span.active { background: #fff; width: 16px; border-radius: 4px; } .pvactions { margin: 10px 0 2px; } .pvlikebtn { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: #999; font-size: 0.85rem; font-weight: 700; cursor: pointer; padding: 4px 0; } .pvlikebtn i { font-size: 1.05rem; } .pvlikebtn.liked, .pvlikebtn.liked i { color: var(--primary); } .pvreportbtn { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: #bbb; font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 4px 0; margin-left: 14px; } .pvreportbtn:hover { color: #d33; } .reportreasonlist { display: flex; flex-direction: column; } .pvclose { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } .pvinfo { padding: 16px 18px 20px; } .pvhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .pvavatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.9rem; flex-shrink: 0; } .pvname { font-weight: 800; font-size: 0.88rem; color: var(--dark); } .pvcap { font-size: 0.85rem; color: var(--text); line-height: 1.5; } .pvcomments { max-height: 180px; overflow-y: auto; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); } .pvcommentrow { font-size: 0.8rem; color: var(--text); line-height: 1.5; margin-bottom: 8px; } .pvcommentrow b { color: var(--dark); margin-right: 4px; } .pvcommentsempty { font-size: 0.78rem; color: #bbb; text-align: center; padding: 6px 0; } .pvcommentform { display: flex; gap: 8px; align-items: center; margin-top: 12px; } .pvcommentform input { flex: 1; min-width: 0; border: none; background: var(--cream2); border-radius: 20px; padding: 10px 16px; font-size: 0.8rem; font-family: "Prompt", sans-serif; color: var(--text); } .pvcommentform input::placeholder { color: #aaa; } .pvcommentform button { width: 38px; height: 38px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--dark), #7d6fb0); color: #fff; font-size: 0.9rem; cursor: pointer; flex-shrink: 0; } .ppgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .ppost { position: relative; aspect-ratio: 1/1; border-radius: 2px; overflow: hidden; cursor: pointer; background: var(--cream2); } .ppost img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; } .ppost:hover img { transform: scale(1.06); } .ppostcap { position: absolute; inset: auto 0 0 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), transparent); color: #fff; font-size: 0.62rem; padding: 14px 7px 6px; line-height: 1.3; opacity: 0; transition: 0.25s; } .ppost:hover .ppostcap { opacity: 1; } .ppostdel, .ppostedit { position: absolute; top: 5px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; border: none; font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ppostdel { right: 5px; } .ppostedit { right: 31px; } .addpostbox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 2px dashed #ddd; border-radius: 16px; padding: 16px; color: #bbb; font-size: 0.78rem; cursor: pointer; margin-bottom: 14px; transition: 0.25s; } .addpostbox:hover { border-color: var(--dark); color: var(--dark); } /* ---- กล่องอัปโหลดรูปเอง (แทนดรอปดาวน์เลือกรูปสต็อก) — รูปเพจร้าน/รูปเมนูเด่น ---- */ .imguploadbox { position: relative; border: 2px dashed #ddd; border-radius: 16px; overflow: hidden; margin-bottom: 14px; transition: 0.25s; } .imguploadbox:hover { border-color: var(--dark); } .imguploadpreview { display: block; width: 100%; max-height: 220px; object-fit: cover; } .imguploadlbl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; color: #bbb; font-size: 0.78rem; cursor: pointer; margin: 0; } .imguploadlbl i { font-size: 1.4rem; } .imguploadbox:hover .imguploadlbl { color: var(--dark); } .imguploadbox.haspreview .imguploadlbl { position: absolute; inset: auto 0 0 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent); color: #fff; flex-direction: row; padding: 8px 12px; font-size: 0.72rem; gap: 6px; } .imguploadbox.haspreview:hover .imguploadlbl { color: #fff; } .ppostmulti { position: absolute; top: 6px; right: 6px; color: #fff; font-size: 0.72rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } /* ---- เลือกรูปหลายรูปตอนสร้างโพสต์ (เหมือน IG) ---- */ .postimglist { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; } .postimglist:empty { margin: 0; } .postimgthumb { position: relative; width: 60px; height: 60px; border-radius: 10px; overflow: hidden; background: var(--cream2); } .postimgthumb img { width: 100%; height: 100%; object-fit: cover; } .postimgthumb button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* ---- ฟีดชุมชนหน้าแรก (สไตล์ IG/Facebook/Lemon8) ---- */ .feeditem { background: var(--surface); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.04); margin-bottom: 16px; } .feedhead { display: flex; align-items: center; gap: 10px; padding: 12px 14px; } .feedavatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 0.9rem; } .feednm { min-width: 0; } .feedname { font-weight: 800; font-size: 0.85rem; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feedstoreico { color: var(--secondary); font-size: 0.75rem; } .feedtime { font-size: 0.68rem; color: #aaa; margin-top: 1px; } .feedimgs { position: relative; } .feedimgstrip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: pointer; } .feedimgstrip::-webkit-scrollbar { display: none; } .feedimgstrip img { width: 100%; flex: 0 0 100%; aspect-ratio: 1/1; object-fit: cover; display: block; scroll-snap-align: start; background: var(--cream2); } .feeddots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; } .feeddots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: 0.2s; } .feeddots span.active { background: #fff; width: 16px; border-radius: 4px; } .feedactions { display: flex; gap: 16px; padding: 10px 14px 0; } .feedlikebtn, .feedcommentbtn { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; color: #999; font-size: 0.82rem; font-weight: 700; cursor: pointer; padding: 4px 0; } .feedlikebtn i, .feedcommentbtn i { font-size: 1.1rem; } .feedlikebtn.liked, .feedlikebtn.liked i { color: var(--primary); } .feedcap { font-size: 0.82rem; color: var(--text); line-height: 1.5; padding: 6px 14px 14px; } .feedcap b { color: var(--dark); margin-right: 4px; } @media (max-width: 480px) { .obgrid { gap: 10px; } .rdactions { flex-direction: column; } } /* ===================================================================== Animation & micro-interactions — ทำให้แอปดูมีชีวิตชีวา ไม่นิ่งเกินไป ===================================================================== */ /* --- โครงกระดูก (skeleton) ระหว่างรอข้อมูลจริงจาก Supabase — ใช้แทนหน้าว่าง ๆ/ข้อความ "ไม่พบ" ที่โผล่มาแวบหนึ่ง ก่อนข้อมูลจริงมาถึง (เช่น เปิดโปรไฟล์คนอื่น/ร้านที่เพิ่ง sync จากเครื่องอื่น) --- */ .skeleton { background: linear-gradient(90deg, #eee 25%, #e2e2e2 37%, #eee 63%); background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite; border-radius: 8px; } [data-theme="dark"] .skeleton { background: linear-gradient(90deg, #34303f 25%, #3d3850 37%, #34303f 63%); background-size: 400% 100%; } @keyframes skeletonShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* --- หัวใจ/ปุ่มถูกใจเด้งตอนกด — เห็นชัดว่าแอปตอบสนองจริง ไม่ใช่แค่เปลี่ยนสีเฉย ๆ --- */ @keyframes likeBounce { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 55% { transform: scale(0.9); } 100% { transform: scale(1); } } .mhrt.liked i, .rdherosave.saved i, .feedlikebtn.liked i, .pvlikebtn.liked i { animation: likeBounce 0.4s ease; } /* --- ปุ่มยุบตัวนิดหน่อยตอนกด (tactile feedback) ให้รู้สึกว่ากดโดนจริง ๆ --- */ .btn-red, .rdghost, .filtbtn, .igbtn, .apptop-btn, .apptop-loginbtn, .mcard, .feedlikebtn, .feedcommentbtn { transition: transform 0.15s ease; } .btn-red:active, .rdghost:active, .filtbtn:active, .igbtn:active, .apptop-btn:active, .apptop-loginbtn:active, .mcard:active, .feedlikebtn:active, .feedcommentbtn:active { transform: scale(0.96); } /* --- การ์ด/โพสต์ที่เพิ่งสร้างขึ้นมาใหม่ (เช่น sync ข้อมูลจริงมาเติมฟีด) ค่อย ๆ ลอยขึ้นแทนที่จะโผล่มาทื่อ ๆ --- */ @keyframes cardEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .card-enter { animation: cardEnter 0.35s ease both; } /* --- เปลี่ยนหน้าแล้วค่อย ๆ จางเข้ามาแทนที่จะกระพริบขาวโพลนทันที (เว็บนี้ไม่ใช่ SPA เปลี่ยนหน้าจริงทุกครั้ง) --- */ @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } body.appshell { animation: pageFadeIn 0.25s ease; } /* หมายเหตุ: กรอบแอปบนจอกว้าง (คอม/แท็บเล็ต) ย้ายไปรวมไว้ที่กฎ body.appshell + .appnav ตัวหลักแล้ว (ค้นหา "บนจอกว้างกว่ามือถือ") ใช้ max-width เดียวกันทั้งหน้า ไม่ใช่แค่แถบบน/ล่าง กันปัญหากรอบ header/nav กับเนื้อหาข้างในกว้างไม่เท่ากัน */