body{font-family:'Kanit',sans-serif} .btn{padding:.6rem 1rem;border-radius:.5rem;font-weight:500;display:inline-flex;align-items:center;gap:.4rem;transition:.15s} /* โทนเขียวหลักของ TarardLand: 500-600 = ปุ่มหลัก, 700 = hover, 900 = พื้นเข้ม */ .btn-primary{background:#059669;color:#fff}.btn-primary:hover{background:#047857} .btn-gold{background:#d4af37;color:#064e3b}.btn-gold:hover{filter:brightness(.95)} .btn-outline{border:1px solid #059669;color:#059669}.btn-outline:hover{background:#ecfdf5} .card{background:#fff;border-radius:.75rem;box-shadow:0 1px 3px rgba(0,0,0,.08)} .input{width:100%;border:1px solid #cbd5e1;border-radius:.5rem;padding:.55rem .75rem;font-size:.9rem;background:#fff} .input:focus{outline:none;border-color:#059669;box-shadow:0 0 0 3px rgba(5,150,105,.15)} .label{font-size:.82rem;font-weight:500;color:#475569;margin-bottom:.3rem;display:block} .line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .nav-link{display:flex;align-items:center;gap:.5rem;padding:.65rem 1rem;font-size:.92rem;color:#fff;opacity:.9} .nav-link:hover{background:rgba(255,255,255,.1);opacity:1} /* เมนูย่อยแบบ dropdown ในแถบบน (พื้นขาว ตัวอักษรเข้ม) */ .nav-item{display:flex;align-items:center;gap:.5rem;padding:.55rem .9rem;font-size:.9rem;color:#334155} .nav-item:hover{background:#f1f5f9;color:#047857} /* เมนูหลักด้านบน (หน้าแรก/ประกาศขาย/ประกาศซื้อ/คำนวณ/บริการ) + สถานะไฮไลต์หน้าที่กำลังเปิดอยู่ */ .nav-top{position:relative;color:#475569} .nav-top:hover{color:#0f172a;background:#f1f5f9} .nav-on,.nav-on:hover{background:#059669 !important;color:#fff !important;font-weight:600;box-shadow:0 1px 2px rgba(5,150,105,.35)} .nav-on i,.nav-on:hover i{color:#fff !important} html.dark .nav-top{color:#b6c2d4} html.dark .nav-top:hover{background:#16233c;color:#f1f5f9} html.dark .nav-on,html.dark .nav-on:hover{background:#0f3d31 !important;color:#6ee7b7 !important;box-shadow:inset 0 0 0 1px #1d5a48} /* แถบใต้เมนูหน้าปัจจุบัน ให้เห็นชัดขึ้นอีกชั้น */ .nav-on::after{content:'';position:absolute;left:12%;right:12%;bottom:-1px;height:2px;border-radius:2px;background:#047857} html.dark .nav-on::after{background:#34d399} /* สถานะเปิดของเมนูย่อย — เดิมใช้พื้นขาวโปร่ง ซึ่งมองไม่เห็นบนหัวเว็บพื้นขาว */ [data-menu][data-open]>[data-menu-btn]{background:#ecfdf5;color:#047857} .prose-desc{white-space:pre-wrap;line-height:1.8} .mapbox{height:320px;border-radius:.75rem;overflow:hidden;border:1px solid #cbd5e1} .galery-main{height:420px;background:#0f172a;border-radius:.75rem;overflow:hidden} .galery-main img{width:100%;height:100%;object-fit:cover} .thumb img{border:2px solid transparent;border-radius:.5rem;object-fit:cover} .thumb.active img{border-color:#059669} /* ===== แถบเมนูด้านซ้ายของหลังบ้าน ===== */ .admin-sidebar ul, .admin-sidebar nav { list-style: none; margin: 0; padding: 0; } @media (min-width: 1024px) { .admin-sidebar { max-width: 16rem; } } /* ===== ย่อ/ขยายกลุ่มเมนูด้านซ้ายของหลังบ้าน ===== */ .admin-sidebar .adm-grp-dots { letter-spacing: 1px; font-weight: 700; } /* ตอนกลุ่มถูกย่อ ปุ่ม ... จะอยู่ซ้ายสุด ให้ช่องกดกว้างเต็มแถว */ .admin-sidebar .adm-grp[aria-expanded="false"] { padding-left: 0.75rem; padding-right: 0.75rem; } .admin-sidebar .adm-grp[aria-expanded="false"] .adm-grp-dots { color: #059669; background: #ecfdf5; border-radius: 9999px; width: 2.25rem; padding: 0.125rem 0; } /* ===================================================================== ธีมมืด (Dark mode) — เปิดด้วยปุ่มอาทิตย์/พระจันทร์ในแถบหัวเว็บ กลไก: ใส่ class "dark" ที่ แล้ว override คลาส Tailwind ที่ใช้จริงในเว็บ ===================================================================== */ .theme-toggle .theme-icon-dark, html.dark .theme-toggle .theme-icon-light { display: none; } html.dark .theme-toggle .theme-icon-dark { display: inline-block; } /* --- พื้นหลังและตัวอักษรหลัก --- */ html.dark body { background:#0b1220; color:#e2e8f0; } html.dark .bg-white { background:#111c31 !important; } html.dark .bg-slate-50 { background:#0b1220 !important; } html.dark .bg-slate-100 { background:#16233c !important; } html.dark .bg-slate-200 { background:#1e2d4a !important; } html.dark .text-slate-900 { color:#f1f5f9 !important; } html.dark .text-slate-800 { color:#e2e8f0 !important; } html.dark .text-slate-700 { color:#cbd5e1 !important; } html.dark .text-slate-600 { color:#b6c2d4 !important; } html.dark .text-slate-500 { color:#94a3b8 !important; } html.dark .text-slate-400 { color:#8494ab !important; } html.dark .text-slate-300 { color:#94a3b8 !important; } html.dark .text-slate-200 { color:#cbd5e1 !important; } /* --- เส้นขอบ --- */ html.dark .border-slate-100 { border-color:#1b2740 !important; } html.dark .border-slate-200 { border-color:#26364f !important; } html.dark .border-slate-300 { border-color:#334561 !important; } html.dark .divide-slate-200 > * + * { border-color:#26364f !important; } /* --- คอมโพเนนต์ของแบบฟอร์ม (มีสไตล์อยู่ใน .btn/.card/.input) --- */ html.dark .card { background:#111c31; box-shadow:0 1px 3px rgba(0,0,0,.5); } html.dark .input { background:#0f1929; border-color:#2c3c58; color:#e2e8f0; } html.dark .input:focus { border-color:#059669; } html.dark .label { color:#a9b6ca; } html.dark .nav-item { color:#cbd5e1; } html.dark .nav-item:hover { background:#16233c; color:#34d399; } [data-menu][data-open]>[data-menu-btn]{background:#ecfdf5;color:#047857} html.dark [data-menu]>[data-menu-btn][data-open], html.dark [data-menu][data-open]>[data-menu-btn] { background:#123a2e; color:#6ee7b7; } /* --- โทนเขียวของแบรนด์ ให้ยังอ่านออกบนพื้นมืด --- */ html.dark .bg-land-50 { background:#0f2a22 !important; } html.dark .bg-land-100 { background:#123a2e !important; } html.dark .text-land-600{ color:#34d399 !important; } html.dark .text-land-700{ color:#6ee7b7 !important; } html.dark .ring-land-200{ --tw-ring-color:#1d5a48 !important; } html.dark .border-land-200 { border-color:#1d5a48 !important; } html.dark .btn-outline:hover { background:#0f2a22; } html.dark .btn-outline { color:#34d399; border-color:#059669; } /* --- สีสถานะที่พื้นหลังอ่อน ต้องทึบขึ้นในโหมดมืด --- */ html.dark .bg-emerald-50, html.dark .bg-amber-50, html.dark .bg-red-50, html.dark .bg-sky-50, html.dark .bg-cyan-50, html.dark .bg-rose-50, html.dark .bg-orange-50, html.dark .bg-lime-50, html.dark .bg-teal-50 { background:#152238 !important; } html.dark .bg-emerald-100, html.dark .bg-amber-100, html.dark .bg-red-100, html.dark .bg-sky-100, html.dark .bg-cyan-100, html.dark .bg-orange-100 { background:#1c2c46 !important; } html.dark .text-emerald-700, html.dark .text-emerald-800 { color:#6ee7b7 !important; } html.dark .text-rose-700, html.dark .text-rose-800, html.dark .text-rose-500 { color:#fca5a5 !important; } /* --- เส้นขอบของการ์ดสถานะ (ผลลัพธ์ทดสอบ ประกาศสถานะ) --- */ html.dark .border-emerald-100, html.dark .border-emerald-200, html.dark .border-rose-100, html.dark .border-rose-200, html.dark .border-amber-200, html.dark .border-sky-200 { border-color:#26364f !important; } /* --- ชิปตัวอย่างคำถาม --- */ html.dark .test-chip { background:#16233c !important; border-color:#2c3c58 !important; color:#b6c2d4 !important; } .test-chip:hover { background:#ecfdf5; border-color:#a7f3d0; color:#047857; } html.dark .text-amber-700, html.dark .text-amber-800 { color:#fcd34d !important; } html.dark .text-red-700, html.dark .text-red-800 { color:#fca5a5 !important; } html.dark .text-sky-700, html.dark .text-sky-800 { color:#7dd3fc !important; } html.dark .text-cyan-700, html.dark .text-cyan-800 { color:#67e8f9 !important; } html.dark .text-amber-300, html.dark .text-amber-400 { color:#fcd34d !important; } html.dark .text-white\/60, html.dark .text-white\/70 { color:#cbd5e1 !important; } html.dark .hover\:bg-slate-50:hover { background:#16233c !important; } html.dark .hover\:bg-slate-100:hover { background:#1a2740 !important; } html.dark .hover\:text-slate-900:hover{ color:#f1f5f9 !important; } html.dark .hover\:bg-land-50:hover { background:#123a2e !important; } html.dark .hover\:text-land-700:hover { color:#6ee7b7 !important; } html.dark .hover\:bg-amber-50:hover { background:#2a2313 !important; } html.dark .hover\:text-amber-600:hover{ color:#fcd34d !important; } html.dark .hover\:bg-red-50:hover { background:#2b1620 !important; } html.dark .hover\:text-red-600:hover { color:#fca5a5 !important; } /* --- พื้นที่มืดเดิมของเว็บ (แผนที่/แกลเลอรี) --- */ html.dark .galery-main { background:#060b14; } html.dark .mapbox { border-color:#26364f; } html.dark select { background:#0f1929; color:#e2e8f0; } html.dark textarea { background:#0f1929; color:#e2e8f0; } html.dark option { background:#0f1929; color:#e2e8f0; } /* --- เลื่อนแถบแนวตั้ง (เช่น Dropdown เรียง) --- */ html.dark .bg-slate-900 { background:#0f1929 !important; } /* --- กล่องตัวเลขสถิติ (เทียบราคากับตลาดในพื้นที่) --- */ .pi-stat{background:rgba(255,255,255,.65);border:1px solid rgba(15,23,42,.06);border-radius:.6rem;padding:.5rem .25rem;text-align:center;transition:background .2s,border-color .2s} .pi-stat:hover{background:rgba(255,255,255,.9)} .pi-stat-k{font-size:.72rem;color:#64748b;line-height:1.35;margin:0 0 .15rem} .pi-stat-v{font-size:.9rem;font-weight:600;color:#1e293b;line-height:1.3;margin:0;word-break:break-word} html.dark .pi-stat{background:#1b2b48;border-color:#2b3f63} html.dark .pi-stat:hover{background:#22355a} html.dark .pi-stat-k{color:#9fb0c9} html.dark .pi-stat-v{color:#f1f5f9} /* --- เส้นคั่นบาง ๆ บนพื้นมืด --- */ html.dark hr { border-color:#1b2740; } /* ===================================================================== อัปโหลดรูปแบบลากวาง (รองรับการเพิ่มรูปทีละรูป) ===================================================================== */ .uploader-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden} .uploader-drop{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.35rem;padding:2rem 1.25rem;text-align:center;cursor:pointer; border:2px dashed #cbd5e1;border-radius:1rem;background:#f8fafc; transition:border-color .2s, background .2s, transform .2s; } .uploader-drop:hover{border-color:#059669;background:#f0fdf4} .uploader-drop:focus-visible{outline:2px solid #059669;outline-offset:3px} .uploader.is-drag .uploader-drop{ border-color:#059669;background:#ecfdf5;transform:scale(1.01); box-shadow:0 0 0 4px rgba(5,150,105,.12); } .uploader-ico{ width:3.5rem;height:3.5rem;border-radius:9999px;display:grid;place-items:center; font-size:1.5rem;color:#059669;background:#ecfdf5;border:1px solid #a7f3d0;margin-bottom:.25rem; } .uploader.is-drag .uploader-ico{background:#059669;color:#fff;border-color:#059669} .uploader-t{font-weight:600;color:#1e293b;font-size:1rem;margin:0} .uploader-s{font-size:.85rem;color:#64748b;margin:0} .uploader-s b{color:#059669} .uploader-h{font-size:.72rem;color:#94a3b8;margin:.35rem 0 0} .uploader-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-top:.75rem} .uploader-count{font-size:.78rem;color:#64748b;flex:1;min-width:12rem} .uploader-count.is-active{color:#059669;font-weight:500} .uploader-busy{font-size:.78rem;color:#d97706} .uploader-busy::before{ content:'';display:inline-block;width:.7rem;height:.7rem;margin-right:.35rem; border:2px solid #fbbf24;border-top-color:transparent;border-radius:9999px; animation:upspin .7s linear infinite;vertical-align:-1px; } @keyframes upspin{to{transform:rotate(360deg)}} .uploader-clear{ font-size:.78rem;color:#dc2626;border:1px solid #fecaca;background:#fff; padding:.3rem .7rem;border-radius:.5rem;display:inline-flex;align-items:center;gap:.3rem;transition:.15s; } .uploader-clear:hover{background:#fef2f2;border-color:#fca5a5} /* --- กริดรูปพรีวิว --- */ .uploader-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.75rem;margin-top:.75rem} .up-tile{ position:relative;aspect-ratio:1/1;border-radius:.85rem;overflow:hidden; border:1px solid #e2e8f0;background:#f1f5f9; animation:uppop .25s ease-out; } @keyframes uppop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}} .up-tile img{width:100%;height:100%;object-fit:cover;display:block} .up-badge-cover{ position:absolute;top:.35rem;left:.35rem;font-size:.65rem;font-weight:600;color:#fff; background:#d4af33;padding:.15rem .45rem;border-radius:9999px; display:inline-flex;align-items:center;gap:.2rem;box-shadow:0 1px 3px rgba(0,0,0,.25); } .up-badge-num{ position:absolute;top:.35rem;left:.35rem;font-size:.65rem;font-weight:600;color:#fff; background:rgba(15,23,42,.7);width:1.35rem;height:1.35rem;border-radius:9999px; display:grid;place-items:center;backdrop-filter:blur(2px); } .up-badge-size{ position:absolute;bottom:0;left:0;right:0;font-size:.65rem;color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.75));padding:.6rem .3rem .2rem;text-align:center; } .up-del{ position:absolute;top:.3rem;right:.3rem;width:1.6rem;height:1.6rem;border-radius:9999px; background:rgba(15,23,42,.72);color:#fff;border:none;cursor:pointer;font-size:.7rem; display:grid;place-items:center;opacity:0;transition:opacity .15s, background .15s; } .up-tile:hover .up-del,.up-tile:focus-within .up-del{opacity:1} .up-del:hover{background:#dc2626} .up-warn{font-size:.75rem;color:#dc2626;margin-top:.5rem} /* ตัวแทนรูปตัวอย่างสำหรับไฟล์ที่ดูรูปไม่ได้ (เช่น PDF) */ .up-filebox{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.2rem;background:#f1f5f9;color:#ef4444; } .up-filebox i{font-size:1.5rem} .up-filebox b{font-size:.65rem;font-weight:700;letter-spacing:.04em;color:#64748b} /* --- โหมดมืด --- */ html.dark .uploader-drop{border-color:#334155;background:#0f1929} html.dark .uploader-drop:hover{border-color:#34d399;background:#0f2a22} html.dark .uploader.is-drag .uploader-drop{border-color:#34d399;background:#0f2a22} html.dark .uploader-ico{background:#0f2a22;border-color:#1d5a48;color:#34d399} html.dark .uploader.is-drag .uploader-ico{background:#34d399;color:#06281c} html.dark .uploader-t{color:#e2e8f0} html.dark .uploader-s{color:#94a3b8} html.dark .uploader-s b{color:#34d399} html.dark .uploader-count{color:#94a3b8} html.dark .uploader-count.is-active{color:#34d399} html.dark .uploader-clear{background:#0f1929;border-color:#7f1d1d;color:#fca5a5} html.dark .uploader-clear:hover{background:#2a1116} html.dark .up-tile{border-color:#26364f;background:#16233c} html.dark .up-warn{color:#fca5a5} html.dark .up-filebox{background:#16233c;color:#f87171} html.dark .up-filebox b{color:#94a3b8} /* ===== เมนูเกินขอบ (...) บนหน้ารายละเอียดประกาศ ===== */ .ov-item{ display:flex;align-items:center;gap:.5rem;width:100%;text-align:left; padding:.55rem .9rem;font-size:.9rem;color:#334155;background:none;border:0;cursor:pointer; } .ov-item:hover{background:#f1f5f9;color:#047857} /* ===== ปุ่มชื่นชอบ ===== */ [data-fav-btn]:disabled{opacity:.6;cursor:progress} /* --- โหมดมืด --- */ html.dark .ov-item{color:#cbd5e1} html.dark .ov-item:hover{background:#16233c;color:#34d399} html.dark [data-fav-btn].bg-white{border-color:#334561} html.dark [data-fav-btn].bg-red-50{border-color:#7f1d1d} html.dark .ov-msg{color:#94a3b8} /* ===================================================================== ฟุตเตอร์ 4 คอลัมน์ — พื้นน้ำเงินเข้มเหมือนกันทั้งสองธีม คอลัมน์: แบรนด์ | ติดต่อเรา | การรับประกันและบริการ | ติดต่อสอบถาม ===================================================================== */ .lt-footer{background:#0b1220;color:#94a3b8;border-top:1px solid #1b2740} .lt-footer-mark{ font-family:'Kanit',sans-serif;font-size:1.4rem;font-weight:700; letter-spacing:-.02em;color:#f1f5f9;line-height:1.1; } /* โลโก้ฟุตเตอร์: ใช้ไฟล์จริง assets/img/logo-64.png (วงกลมโปร่งใสขอบ) */ .lt-footer-logo{ width:2.25rem;height:2.25rem;border-radius:50%;display:block;object-fit:contain; flex-shrink:0; } .lt-footer-sub{font-size:.84rem;color:#8fa3bd;line-height:1.75} /* ---------- ฟุตเตอร์: จัดชิดซ้ายทั้งหมดทุกขนาดจอ ---------- เดิมเป็นกึ่งกลางเฉพาะจอกว้าง ทำให้รายการลิงก์เยื้องยาวและอ่านยาก ตอนนี้ซ้ายชิดทุกจอ จัดลำดับการอ่านได้ชัดเจนและเลื่อนตามสบาย */ .lt-footer-grid{text-align:left} .lt-footer-grid > div{display:flex;flex-direction:column;align-items:flex-start} .lt-footer-grid .inline-flex{justify-content:flex-start} .lt-footer-grid .lt-footer-sub{margin:0} .lt-footer-grid .lt-footer-h{margin:0 0 1rem} .lt-footer-grid .lt-footer-list{width:100%;align-items:flex-start} .lt-footer-grid .lt-footer-list li{justify-content:flex-start} .lt-footer-h{font-size:.95rem;font-weight:600;color:#f1f5f9;margin:0 0 1rem} .lt-footer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem} .lt-footer-list li{display:flex;align-items:baseline;gap:.3rem} .lt-footer-list a,.lt-footer-list .is-static{font-size:.88rem;color:#94a3b8;transition:color .15s;text-decoration:none} .lt-footer-list a:hover{color:#34d399} /* เครื่องหมาย '>' เฉพาะลิงก์นำทาง ไม่ติดกับอีเมล/โทรที่อยู่ในบรรทัดเดียวกับป้ายกำกับ */ .lt-footer-list a[href^="http"]::before, .lt-footer-list a[href^="/"]::before{ content:'\f105';font-family:'Font Awesome 6 Free';font-weight:900; font-size:.7rem;margin-right:.55rem;opacity:.55; } /* ลิงก์ติดต่อ: ไม่มีเครื่องหมายนำหน้า เพราะมีป้ายกำกับ "อีเมล:"/"โทรศัพท์:" นำหน้าแล้ว */ .lt-footer-list a[href^="mailto:"],.lt-footer-list a[href^="tel:"]{margin-left:0} .lt-footer-list .is-static{cursor:default;color:#94a3b8} .lt-footer-k{font-size:.88rem;color:#64748b;flex-shrink:0} /* ---------- แถบความน่าเชื่อถือ: ทำเป็นป้าย pill ---------- */ .lt-footer-meta{ margin-top:2.25rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem .75rem; } .lt-chip{ display:inline-flex;align-items:center;gap:.5rem; padding:.42rem .9rem;border-radius:999px; background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.18); font-size:.8rem;color:#9fb3c8;line-height:1.5; } .lt-chip i{color:#34d399;font-size:.85rem;flex-shrink:0} .lt-chip:hover{border-color:rgba(52,211,153,.35);color:#cbd5e1} /* ---------- ส่วนล่างสุด ---------- */ .lt-footer-bottom{ margin-top:2.75rem;padding-top:2rem;border-top:1px solid #1b2740; text-align:center;display:flex;flex-direction:column;align-items:center; } /* ป้าย Create with AI */ .lt-footer-ai{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:.5rem .75rem;margin-bottom:1.1rem; } .lt-ai-badge{ display:inline-flex;align-items:center;gap:.5rem; padding:.4rem .95rem;border-radius:999px; background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(16,185,129,.14)); border:1px solid rgba(212,175,55,.35); font-size:.8rem;font-weight:500;color:#e7d9a8;letter-spacing:.01em; box-shadow:0 2px 14px rgba(212,175,55,.10); } .lt-ai-badge i{color:#d4af37;font-size:.85rem} .lt-ai-badge strong{ font-weight:700;letter-spacing:.04em; background:linear-gradient(90deg,#f2d98a,#34d399); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .lt-ai-note{font-size:.78rem;color:#7d8ea8} /* บรรทัดลิขสิทธิ์ */ .lt-footer-copy{ font-size:.86rem;color:#94a3b8;line-height:1.9;margin:0; display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:.15rem .45rem;max-width:52rem; } .lt-footer-copy strong{color:#f1f5f9;font-weight:600} .lt-footer-copy-sep{color:#3d4d66} .lt-footer-copy-right{color:#5a6a80} /* ข้อความยกเว้นความรับผิด */ .lt-footer-disclaimer{ margin:.85rem auto 0 !important;max-width:46rem; font-size:.78rem;line-height:1.85;color:#5a6a80; } /* ลิงก์กฎหมาย */ .lt-footer-legal{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap; gap:.5rem .75rem;margin-top:1.1rem; } .lt-footer-legal a{ display:inline-flex;align-items:center;gap:.4rem; padding:.34rem .8rem;border-radius:999px; background:rgba(148,163,184,.06);border:1px solid rgba(148,163,184,.14); font-size:.78rem;color:#8fa3bd;text-decoration:none; transition:color .15s,border-color .15s,background .15s; } .lt-footer-legal a i{font-size:.75rem;opacity:.8} .lt-footer-legal a:hover{ color:#6ee7b7;border-color:rgba(52,211,153,.32);background:rgba(52,211,153,.08); } .lt-footer-legal-dot{color:#3d4d66;font-size:.7rem} /* โหมดมืด: พื้นเข้มขึ้นอีกนิดให้กลืนกับหน้าเนื้อหา */ html.dark .lt-footer{background:#080e1a;border-top-color:#16223a} html.dark .lt-footer-bottom{border-top-color:#16223a} html.dark .lt-footer-sub{color:#7d8ea8} html.dark .lt-chip{background:rgba(52,211,153,.06);border-color:rgba(52,211,153,.15);color:#8ea2ba} html.dark .lt-ai-note{color:#6b7d95} html.dark .lt-footer-copy{color:#8ea2ba} html.dark .lt-footer-disclaimer{color:#55657c !important} html.dark .lt-footer-legal a{background:rgba(148,163,184,.05);border-color:rgba(148,163,184,.12)} /* มือถือ: บรรทัดลิขสิทธิ์/ลิงก์กฎหมายต้องพอดีจอ ไม่ล้น */ @media (max-width:640px){ .lt-footer-bottom{padding-top:1.5rem;margin-top:2rem} .lt-footer-copy{font-size:.8rem;line-height:1.8;gap:.1rem .35rem} .lt-footer-copy-right{display:block;width:100%} .lt-ai-badge{font-size:.76rem;padding:.34rem .8rem} .lt-ai-note{font-size:.74rem} .lt-footer-disclaimer{font-size:.74rem;margin-top:.7rem !important} .lt-footer-legal a{font-size:.75rem;padding:.3rem .7rem} .lt-chip{font-size:.76rem;padding:.36rem .78rem} } /* ===================================================================== หน้าเงื่อนไขการใช้งาน / นโยบายความเป็นส่วนตัว (terms.php, privacy.php) เนื้อหาสร้างเป็น HTML ตรง ๆ ใน PHP จึงต้องมีสไตล์พื้นฐานของ p/ul/a เพิ่ม ===================================================================== */ .legal-text{font-size:.92rem;line-height:1.85;color:#475569} .legal-text p{margin:0 0 .75rem} .legal-text p:last-child{margin-bottom:0} .legal-text ul,.legal-text ol{margin:.25rem 0 .75rem;padding-left:1.15rem;display:flex;flex-direction:column;gap:.5rem} .legal-text li{padding-left:.15rem} .legal-text ul > li{list-style:disc} .legal-text ol > li{list-style:decimal} .legal-text a{color:#059669;text-decoration:underline;text-underline-offset:2px;transition:color .15s} .legal-text a:hover{color:#047857} .legal-text strong{color:#1e293b;font-weight:600} /* โหมดมืด */ html.dark .legal-text{color:#b6c2d4} html.dark .legal-text a{color:#34d399} html.dark .legal-text a:hover{color:#6ee7b7} html.dark .legal-text strong{color:#e2e8f0} html.dark .hover\:text-emerald-300:hover{color:#6ee7b7 !important} /* ฟุตเตอร์บนมือถือ: ลิงก์ต้องกดง่าย ไม่ล้นขอบจอ */ @media (max-width:640px){ .lt-footer-list{gap:.85rem} .lt-footer-list a,.lt-footer-list .is-static,.lt-footer-k{font-size:.95rem} .lt-footer-meta{gap:.5rem 1.1rem} .lt-footer-meta span{font-size:.86rem} .lt-footer-disclaimer{font-size:.78rem !important} } /* ===================================================================== ธีมมืด — ช่องกรอกข้อมูล (ยึดกับ element ไม่ใช่แค่คลาส .input เพื่อให้แน่นอน 100% ไม่ว่าหน้าไหนจะใช้คลาสอะไรก็ตาม) ===================================================================== */ html.dark input:not([type=checkbox]):not([type=radio]):not([type=file]), html.dark textarea, html.dark select{ background:#0f1929 !important; border-color:#2c3c58 !important; color:#e2e8f0 !important; } html.dark input::placeholder,html.dark textarea::placeholder{color:#6b7f9c !important} /* แก้ปัญหาช่องที่ Chrome เติมข้อมูลอัตโนมัติแล้วเป็นสีขาวทับธีมมืด */ html.dark input:-webkit-autofill, html.dark input:-webkit-autofill:hover, html.dark input:-webkit-autofill:focus{ -webkit-text-fill-color:#e2e8f0 !important; -webkit-box-shadow:0 0 0 1000px #0f1929 inset !important; caret-color:#e2e8f0; } /* ให้วิดเจ็ตของเบราว์เซอร์ (แถบเลื่อน, ลิสต์, ปฏิทิน) เข้าธีมมืดตาม */ html.dark{color-scheme:dark} html:not(.dark){color-scheme:light} /* ช่องที่อ่านได้อย่างเดียว (ละติจูด/ลองจิจูด) ให้เข้มกว่าช่องปกติเล็กน้อย เพื่อสื่อว่าแก้ไขไม่ได้ */ html.dark input[readonly],html.dark textarea[readonly]{background:#0b1524 !important;color:#93a4bf !important} /* Drawer เมนูมือถือ — เดิมเป็นเขียวสว่างจัดเกินไปเมื่ออยู่ในโหมดมืด */ html.dark #navDrawer{background:linear-gradient(180deg,#0f1b2e 0%,#0c1526 100%)} html.dark #navDrawer .border-white\/10{border-color:#22304a} /* ===================================================================== Social Login (Google / LINE) + หน้าตั้งค่า API ของ Admin ===================================================================== */ .sso-btn{ display:flex;align-items:center;justify-content:center;gap:.65rem;width:100%; padding:.7rem 1rem;border-radius:.6rem;border:1px solid #cbd5e1;background:#fff; font-weight:500;font-size:.92rem;color:#334155;cursor:pointer; transition:box-shadow .15s, background .15s, border-color .15s; } .sso-btn:hover{background:#f8fafc;border-color:#94a3b8;box-shadow:0 1px 3px rgba(0,0,0,.06)} .sso-btn i{font-size:1.1rem} .sso-btn.is-google i{color:#ea4335} .sso-btn.is-line i{color:#06c755} html.dark .sso-btn{background:#0f1929;border-color:#2c3c58;color:#e2e8f0} html.dark .sso-btn:hover{background:#16233c;border-color:#3b5075} .sso-divider{display:flex;align-items:center;gap:.75rem;color:#94a3b8;font-size:.8rem;margin:1.25rem 0} .sso-divider::before,.sso-divider::after{content:'';flex:1;height:1px;background:#e2e8f0} html.dark .sso-divider::before,html.dark .sso-divider::after{background:#2c3c58} /* การ์ดตั้งค่าแต่ละผู้ให้บริการ */ .int-card{background:#fff;border:1px solid #e2e8f0;border-radius:.9rem;overflow:hidden} html.dark .int-card{background:#111c31;border-color:#1b2740} .int-head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.15rem;border-bottom:1px solid #e2e8f0} html.dark .int-head{border-bottom-color:#1b2740} .int-ico{ width:2.5rem;height:2.5rem;border-radius:.65rem;display:grid;place-items:center; font-size:1.15rem;color:#fff;flex-shrink:0; } .int-name{font-weight:600;font-size:1rem;color:#0f172a;line-height:1.2} html.dark .int-name{color:#f1f5f9} .int-sub{font-size:.75rem;color:#64748b} .int-state{margin-left:auto;flex-shrink:0} .int-body{padding:1.15rem;display:flex;flex-direction:column;gap:1rem} .int-uri{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem; background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;padding:.5rem .65rem; color:#334155;word-break:break-all; } html.dark .int-uri{background:#0b1524;border-color:#1b2740;color:#b6c2d4} .int-steps{font-size:.8rem;color:#64748b;line-height:1.8;margin:0;padding-left:1.1rem} .int-steps a{color:#059669;text-decoration:underline} html.dark .int-steps a{color:#34d399} .secret-wrap{position:relative} .secret-wrap .input{padding-right:2.6rem} .secret-toggle{ position:absolute;right:.4rem;top:50%;transform:translateY(-50%); background:none;border:none;color:#94a3b8;cursor:pointer;padding:.35rem;font-size:.9rem; } .secret-toggle:hover{color:#059669} /* สวิตช์เปิด/ปิด */ .sw{position:relative;display:inline-block;width:2.75rem;height:1.5rem;flex-shrink:0} .sw input{opacity:0;width:0;height:0} .sw span{ position:absolute;inset:0;background:#cbd5e1;border-radius:999px; transition:background .2s;cursor:pointer; } .sw span::before{ content:'';position:absolute;height:1.15rem;width:1.15rem;left:.175rem;bottom:.175rem; background:#fff;border-radius:50%;transition:transform .2s; } .sw input:checked + span{background:#059669} .sw input:checked + span::before{transform:translateX(1.25rem)} .sw input:focus-visible + span{outline:2px solid #059669;outline-offset:2px} /* ============================================================ Talaland AI — กล่องพูดคุยอัจฉริยะ ============================================================ */ /* --- ปุ่มลอยมุมจอ --- */ .talaland-fab{ position:fixed;right:1.25rem;bottom:1.25rem;z-index:1200; width:3.5rem;height:3.5rem;border-radius:999px;border:none;cursor:pointer; display:grid;place-items:center;color:#fff; background:linear-gradient(135deg,#059669,#10b981); box-shadow:0 10px 28px -8px rgba(5,150,105,.6); transition:transform .2s, box-shadow .2s; } .talaland-fab:hover{transform:translateY(-2px) scale(1.04)} .talaland-fab:focus-visible{outline:3px solid #a7f3d0;outline-offset:2px} .talaland-fab__ico{font-size:1.25rem} .talaland-fab__ring{ position:absolute;inset:0;border-radius:999px; border:2px solid rgba(16,185,129,.55);animation:talalandPulse 2.4s ease-out infinite; } @keyframes talalandPulse{ 0%{transform:scale(1);opacity:.7} 70%{transform:scale(1.35);opacity:0} 100%{transform:scale(1.35);opacity:0} } /* --- แผงแชต --- */ .talaland-panel{ position:fixed;right:1.25rem;bottom:5.25rem;z-index:1201; width:min(23rem,calc(100vw - 2rem)); height:min(34rem,calc(100vh - 8rem)); display:flex;flex-direction:column;overflow:hidden; background:#fff;border:1px solid #e2e8f0;border-radius:1.25rem; box-shadow:0 24px 60px -18px rgba(15,23,42,.35); animation:talalandIn .18s ease-out; } .talaland-panel[hidden]{display:none} @keyframes talalandIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}} .talaland-head{ display:flex;align-items:center;gap:.625rem;flex-shrink:0; padding:.875rem 1rem;color:#fff; background:linear-gradient(135deg,#047857,#10b981); } .talaland-head__ico{ width:2.125rem;height:2.125rem;border-radius:.75rem;flex-shrink:0; display:grid;place-items:center;background:rgba(255,255,255,.2); } .talaland-head__title{margin:0;font-weight:700;font-size:.875rem;display:flex;align-items:center;gap:.375rem} .talaland-head__sub{margin:0;font-size:.6875rem;opacity:.9} .talaland-dot{width:.5rem;height:.5rem;border-radius:999px;background:#6ee7b7;animation:talalandBlink 1.6s infinite} @keyframes talalandBlink{0%,100%{opacity:1}50%{opacity:.35}} .talaland-x{ flex-shrink:0;width:2rem;height:2rem;border:none;border-radius:.5rem;cursor:pointer; background:transparent;color:rgba(255,255,255,.85);font-size:.95rem; } .talaland-x:hover{background:rgba(255,255,255,.18);color:#fff} /* --- ปุ่มทางลัด --- */ .talaland-quick{ display:flex;gap:.375rem;flex-shrink:0;overflow-x:auto; padding:.625rem .75rem;border-bottom:1px solid #f1f5f9;background:#f8fafc; } .talaland-quick::-webkit-scrollbar{height:0} .talaland-chip{ flex-shrink:0;padding:.3125rem .625rem;border:1px solid #d1fae5;border-radius:999px; background:#fff;color:#047857;font-size:.6875rem;font-weight:600;cursor:pointer;white-space:nowrap; transition:background .15s; } .talaland-chip:hover{background:#d1fae5} /* --- บันทึกการสนทนา --- */ .talaland-log{ flex:1;overflow-y:auto;padding:.875rem .875rem .25rem; display:flex;flex-direction:column;gap:.625rem;background:#f8fafc; } .talaland-msg{display:flex} .talaland-msg--me{justify-content:flex-end} .talaland-bubble{ max-width:88%;padding:.625rem .75rem;border-radius:.875rem; font-size:.8125rem;line-height:1.5; } .talaland-bubble p{margin:0} .talaland-msg--ai .talaland-bubble{background:#fff;border:1px solid #e2e8f0;border-bottom-left-radius:.25rem} .talaland-msg--me .talaland-bubble{background:#059669;color:#fff;border-bottom-right-radius:.25rem} .talaland-lead{font-weight:600;color:#065f46} .talaland-sub{margin-top:.5rem !important;font-size:.6875rem;color:#64748b} .talaland-typing{display:flex;align-items:center;gap:.25rem;color:#64748b;font-size:.75rem} .talaland-typing i{ width:.3rem;height:.3rem;border-radius:999px;background:#94a3b8; animation:talalandDot 1.1s infinite; } .talaland-typing i:nth-child(2){animation-delay:.15s} .talaland-typing i:nth-child(3){animation-delay:.3s} @keyframes talalandDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}} /* --- การ์ดที่ดินในแชต --- */ .talaland-card{ display:flex;gap:.625rem;margin-top:.5rem;padding:.625rem; background:#fff;border:1px solid #e2e8f0;border-radius:.75rem; } .talaland-card__img{ width:3.75rem;height:3.75rem;border-radius:.5rem;object-fit:cover;flex-shrink:0;background:#f1f5f9; } .talaland-card__img--ph{display:grid;place-items:center;color:#cbd5e1} .talaland-card__body{min-width:0;flex:1} .talaland-card__title{ margin:0;font-size:.8125rem;font-weight:600;color:#0f172a; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .talaland-card__meta{margin:.125rem 0 0;font-size:.6875rem;color:#64748b} .talaland-card__price{margin:.25rem 0 0;font-size:.8125rem;font-weight:700;color:#047857} .talaland-tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.375rem} .talaland-tag{ padding:.0625rem .375rem;border-radius:.375rem;background:#ecfdf5; color:#047857;font-size:.625rem;font-weight:600; } .talaland-card__acts{display:flex;flex-wrap:wrap;gap:.3125rem;margin-top:.5rem} .talaland-btn{ padding:.25rem .5rem;border:none;border-radius:.5rem;cursor:pointer; background:#059669;color:#fff;font-size:.6875rem;font-weight:600;text-decoration:none; display:inline-flex;align-items:center;gap:.25rem;line-height:1.4; } .talaland-btn:hover{background:#047857} .talaland-btn--ghost{background:#f1f5f9;color:#475569} .talaland-btn--ghost:hover{background:#e2e8f0} .talaland-dist{margin:.375rem 0 0 !important;font-size:.6875rem;font-weight:600;color:#0284c7} .talaland-map{ width:100%;height:11rem;margin-top:.5rem;border-radius:.75rem; border:1px solid #e2e8f0;background:#f1f5f9;z-index:0; } .talaland-mapwrap{margin-top:.25rem} .talaland-hint{ margin-top:.5rem !important;padding:.5rem .625rem;border-radius:.625rem; background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;font-size:.6875rem; } .talaland-hint a{color:#047857;font-weight:700;text-decoration:underline} /* --- ปุ่ม "เริ่มคุยใหม่" --- */ .talaland-clear{ align-self:center;margin:.5rem auto .25rem;padding:.3125rem .75rem; border:1px solid #cbd5e1;border-radius:999px;background:#fff; color:#64748b;font-size:.6875rem;cursor:pointer;transition:background .15s,color .15s; } .talaland-clear:hover{background:#f1f5f9;color:#0f172a} .dark .talaland-clear{background:#1e293b;border-color:#334155;color:#cbd5e1} /* --- ช่องพิมพ์ --- */ .talaland-form{ display:flex;gap:.5rem;flex-shrink:0;padding:.75rem; border-top:1px solid #e2e8f0;background:#fff; } .talaland-form input{ flex:1;min-width:0;padding:.5rem .75rem;border:1px solid #cbd5e1;border-radius:.625rem; font-size:.8125rem;outline:none; } .talaland-form input:focus{border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.15)} .talaland-send{ width:2.375rem;height:2.375rem;flex-shrink:0;border:none;border-radius:.625rem;cursor:pointer; background:#059669;color:#fff;font-size:.8125rem; } .talaland-send:hover{background:#047857} .talaland-note{margin:0;padding:0 .75rem .75rem;background:#fff;font-size:.625rem;color:#94a3b8;text-align:center} /* --- จอเล็ก: ย่อแผงให้เต็มจอ --- */ @media (max-width:480px){ .talaland-panel{ right:.5rem;left:.5rem;bottom:4.5rem;width:auto;height:min(30rem,calc(100vh - 6rem)); } .talaland-fab{right:.75rem;bottom:.75rem} } /* --- จับคู่โหมดมืด --- */ .dark .talaland-panel{background:#0f172a;border-color:#1e293b} .dark .talaland-log{background:#020617} .dark .talaland-quick{background:#0f172a;border-bottom-color:#1e293b} .dark .talaland-chip{background:#0f172a;color:#6ee7b7;border-color:#134e4a} .dark .talaland-chip:hover{background:#134e4a} .dark .talaland-msg--ai .talaland-bubble{background:#1e293b;border-color:#334155;color:#e2e8f0} .dark .talaland-form{background:#0f172a;border-top-color:#1e293b} .dark .talaland-form input{background:#1e293b;border-color:#334155;color:#e2e8f0} .dark .talaland-card{background:#1e293b;border-color:#334155} .dark .talaland-card__title{color:#f1f5f9} .dark .talaland-btn--ghost{background:#334155;color:#e2e8f0} .dark .talaland-note{background:#0f172a;color:#64748b} .dark .talaland-map{border-color:#334155} /* ============================================================ TarardLand UI Kit — โมดัลยืนยัน/แจ้งเตือน + Toast (ใช้แทน alert()/confirm()/prompt() ของเบราว์เซอร์) จับคู่กับ assets/js/lt-ui.js ============================================================ */ /* ล็อกการเลื่อนหน้าขณะเปิดกล่องข้อความ */ html.modal-open,html.modal-open body{overflow:hidden} /* ---------- ฉากหลัง ---------- */ .lt-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:1rem} .lt-modal[hidden]{display:none} .lt-modal__backdrop{ position:absolute;inset:0;background:rgba(15,23,42,.55); backdrop-filter:blur(3px);opacity:0;transition:opacity .18s ease; } .lt-modal.is-open .lt-modal__backdrop{opacity:1} /* ---------- กล่อง ---------- */ .lt-modal__box{ position:relative;width:100%;max-width:26rem;max-height:calc(100vh - 2rem); display:flex;flex-direction:column;background:#fff;border-radius:1rem; box-shadow:0 20px 45px -12px rgba(15,23,42,.35),0 0 0 1px rgba(15,23,42,.05); opacity:0;transform:translateY(12px) scale(.96); transition:opacity .18s ease,transform .18s ease;overflow:hidden; } .lt-modal.is-open .lt-modal__box{opacity:1;transform:none} /* ---------- ส่วนหัว ---------- */ .lt-modal__head{display:flex;align-items:flex-start;gap:.75rem;padding:1.15rem 1.15rem .9rem} .lt-modal__ico{ flex:none;width:2.5rem;height:2.5rem;border-radius:.75rem; display:grid;place-items:center;font-size:1.05rem;background:#ecfdf5;color:#059669; } .lt-modal__title{margin:0;font-size:1.05rem;font-weight:600;line-height:1.45;flex:1;padding-top:.35rem;color:#0f172a} .lt-modal__x{ flex:none;width:2rem;height:2rem;border-radius:.5rem;border:0;background:transparent; color:#94a3b8;cursor:pointer;transition:.15s; } .lt-modal__x:hover{background:#f1f5f9;color:#475569} /* ---------- เนื้อหา ---------- */ .lt-modal__body{padding:0 1.15rem 1.15rem;overflow-y:auto} .lt-modal__text{margin:0;font-size:.9rem;line-height:1.75;color:#475569;word-break:break-word} .lt-modal__input{margin-top:.75rem} /* ---------- ปุ่มล่าง ---------- */ .lt-modal__foot{ display:flex;justify-content:flex-end;gap:.5rem;flex-wrap:wrap; padding:.9rem 1.15rem;background:#f8fafc;border-top:1px solid #e2e8f0; } .lt-modal__btn{padding:.5rem 1.1rem;font-size:.85rem;border-radius:.5rem;cursor:pointer;border:1px solid transparent} .lt-modal__btn--primary{background:#059669;color:#fff} /* ---------- Toast ---------- */ .lt-toasts{ position:fixed;top:1rem;right:1rem;z-index:10000; display:flex;flex-direction:column;gap:.5rem; width:min(22rem,calc(100vw - 2rem));pointer-events:none; } .lt-toast{ display:flex;align-items:flex-start;gap:.6rem;pointer-events:auto; padding:.75rem .8rem;border-radius:.75rem;background:#fff; border:1px solid #e2e8f0;border-left:4px solid #059669; box-shadow:0 10px 25px -8px rgba(15,23,42,.28); animation:ltToastIn .22s ease-out; } .lt-toast.is-out{opacity:0;transform:translateX(16px);transition:opacity .2s ease,transform .2s ease} .lt-toast__ico{flex:none;margin-top:.15rem;color:#059669;font-size:.95rem} .lt-toast__msg{flex:1;font-size:.85rem;line-height:1.6;color:#334155;word-break:break-word} .lt-toast__x{ flex:none;border:0;background:transparent;color:#94a3b8;cursor:pointer; padding:.1rem .25rem;border-radius:.35rem;font-size:.8rem;transition:.15s; } .lt-toast__x:hover{background:#f1f5f9;color:#475569} .lt-toast--success{border-left-color:#059669} .lt-toast--success .lt-toast__ico{color:#059669} .lt-toast--error {border-left-color:#dc2626} .lt-toast--error .lt-toast__ico{color:#dc2626} .lt-toast--warning{border-left-color:#d97706} .lt-toast--warning .lt-toast__ico{color:#d97706} .lt-toast--info {border-left-color:#2563eb} .lt-toast--info .lt-toast__ico{color:#2563eb} @keyframes ltToastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}} /* ---------- โทนมืด ---------- */ html.dark .lt-modal__box{background:#0f1929;box-shadow:0 20px 45px -10px rgba(0,0,0,.7),0 0 0 1px #1e293b} html.dark .lt-modal__title{color:#f1f5f9} html.dark .lt-modal__text{color:#cbd5e1} html.dark .lt-modal__foot{background:#0b1424;border-top-color:#1e293b} html.dark .lt-modal__x:hover{background:#1a2740;color:#e2e8f0} html.dark .lt-modal__btn--ghost{background:#1a2740;color:#cbd5e1;border-color:#334561} html.dark .lt-modal__btn--ghost:hover{background:#223352} html.dark .lt-modal__ico--question,html.dark .lt-modal__ico--success{background:#0f2a22;color:#34d399} html.dark .lt-modal__ico--danger,html.dark .lt-modal__ico--error{background:#2b1620;color:#fca5a5} html.dark .lt-modal__ico--warning{background:#2a2313;color:#fcd34d} html.dark .lt-modal__ico--info{background:#13233c;color:#7dd3fc} html.dark .lt-modal__ico--prompt{background:#211a38;color:#c4b5fd} html.dark .lt-modal__backdrop{background:rgba(2,6,16,.7)} html.dark .lt-toast{background:#0f1929;border-color:#1e293b;box-shadow:0 10px 25px -8px rgba(0,0,0,.6)} html.dark .lt-toast__msg{color:#cbd5e1} html.dark .lt-toast__x:hover{background:#1a2740;color:#e2e8f0} html.dark .lt-toast--success .lt-toast__ico{color:#34d399} html.dark .lt-toast--error .lt-toast__ico{color:#fca5a5} html.dark .lt-toast--warning .lt-toast__ico{color:#fcd34d} html.dark .lt-toast--info .lt-toast__ico{color:#7dd3fc} /* ---------- จอเล็ก ---------- */ @media (max-width:480px){ .lt-modal__box{max-width:none} .lt-modal__foot{flex-direction:column-reverse} .lt-modal__btn{width:100%;justify-content:center} .lt-toasts{top:auto;bottom:1rem;right:.5rem;left:.5rem;width:auto} } .lt-modal__btn--primary:hover{background:#047857} .lt-modal__btn--danger{background:#dc2626;color:#fff} .lt-modal__btn--danger:hover{background:#b91c1c} /* ============================================================ ปุ่มลอยบนแผนที่ (tools/zoning-map.php) ============================================================ */ .map-fab{ width:2.25rem;height:2.25rem;border-radius:.6rem;border:1px solid #e2e8f0; background:#fff;color:#475569;cursor:pointer;display:grid;place-items:center; font-size:.85rem;box-shadow:0 2px 6px rgba(15,23,42,.12);transition:.15s; } .map-fab:hover{background:#059669;color:#fff;border-color:#059669} .map-fab:focus-visible{outline:2px solid #059669;outline-offset:2px} .map-fab:active{transform:scale(.94)} /* ปุ่มลอยต้องอยู่เหนือแผนที่ Leaflet เสมอ */ .leaflet-container .leaflet-control-container{z-index:800} .lt-modal__btn--warning{background:#d97706;color:#fff} .lt-modal__btn--warning:hover{background:#b45309} .lt-modal__btn--ghost{background:#fff;color:#475569;border-color:#cbd5e1} .lt-modal__btn--ghost:hover{background:#f1f5f9} /* ---------- ไอคอนตามโทน ---------- */ .lt-modal__ico--question{background:#ecfdf5;color:#059669} .lt-modal__ico--danger {background:#fef2f2;color:#dc2626} .lt-modal__ico--warning {background:#fffbeb;color:#d97706} .lt-modal__ico--info {background:#eff6ff;color:#2563eb} .lt-modal__ico--success {background:#ecfdf5;color:#059669} .lt-modal__ico--error {background:#fef2f2;color:#dc2626} .lt-modal__ico--prompt {background:#f5f3ff;color:#7c3aed} /* ============================================================ แถบติดต่อด่วนบนมือถือ (หน้ารายละเอียดประกาศ) จับคู่กับ .lt-contactbar ใน view-property.php ============================================================ */ .lt-contactbar{ position:fixed;left:0;right:0;bottom:0;z-index:900; display:none;gap:.5rem;align-items:center; padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-top:1px solid #e2e8f0; box-shadow:0 -6px 20px -8px rgba(15,23,42,.22); } .lt-contactbar__btn{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem; min-height:2.9rem;padding:.4rem .3rem;border-radius:.7rem; font-size:.7rem;font-weight:600;line-height:1.2;text-align:center; border:1px solid #e2e8f0;background:#f8fafc;color:#475569; transition:transform .12s ease,background .15s ease,opacity .15s ease; } .lt-contactbar__btn i{font-size:1.05rem} .lt-contactbar__btn--call{flex:2;background:#059669;border-color:#059669;color:#fff;font-size:.85rem} .lt-contactbar__btn--call:hover{background:#047857;border-color:#047857} .lt-contactbar__btn:active{transform:scale(.97)} .lt-contactbar__btn:focus-visible{outline:2px solid #059669;outline-offset:2px} /* ยังไม่ผ่านการยืนยันว่าไม่ใช่บอท — ปุ่มโทรถูกล็อกไว้ */ .lt-contactbar__btn.is-locked{opacity:.5;cursor:not-allowed} /* ประกาศไม่ได้ใส่เบอร์โทรไว้เลย */ .lt-contactbar__btn.is-empty{background:#f1f5f9;color:#94a3b8;border-color:#e2e8f0;cursor:default} /* เว้นที่ท้ายหน้าไม่ให้เนื้อหาโดนแถบบัง (เฉพาะตอนแถบแสดงจริง) */ /* ---------- โทนมืด ---------- */ html.dark .lt-contactbar{background:rgba(15,25,41,.97);border-top-color:#1e293b;box-shadow:0 -6px 20px -8px rgba(0,0,0,.6)} html.dark .lt-contactbar__btn{background:#1a2740;border-color:#334561;color:#cbd5e1} html.dark .lt-contactbar__btn--call{background:#059669;border-color:#059669;color:#fff} html.dark .lt-contactbar__btn--call:hover{background:#047857} html.dark .lt-contactbar__btn.is-empty{background:#0b1424;color:#64748b;border-color:#1e293b} /* ---------- จอเล็ก (มือถือ) ---------- */ @media (max-width:1023px){ .lt-contactbar{display:flex} body.has-contactbar{padding-bottom:calc(4.5rem + env(safe-area-inset-bottom))} } @media (max-width:480px){ .lt-contactbar__btn{font-size:.66rem;min-height:2.75rem} .lt-contactbar__btn--call{font-size:.8rem} } /* ============================================================ การ์ดตัวเลือกแบบเลือกได้ (radio) — ใช้ในหน้าโฆษณา user/boost.php รองรับโหมดมืด: ต้องกำหนดสีข้อความเองด้วย ไม่ใช่พึ่งสีของพื้นหลังอย่างเดียว ============================================================ */ .lt-pick{ border-width:2px;border-color:#e2e8f0;background:#fff; border-radius:.75rem;cursor:pointer; transition:border-color .15s,background-color .15s,box-shadow .15s; } .lt-pick:hover{border-color:#fcd34d;background:#fffbeb} /* สถานะที่เลือก */ .lt-pick:has(:checked){border-color:#f59e0b;background:#fffbeb;box-shadow:0 0 0 1px rgba(245,158,11,.25)} .lt-pick:has(:checked) .lt-pick__title{color:#92400e} .lt-pick:has(:checked) .lt-pick__desc{color:#a16207} .lt-pick--muted{opacity:.4;cursor:not-allowed} .lt-pick--muted:hover{border-color:#e2e8f0;background:#fff} /* ---------- โทนมืด ---------- */ html.dark .lt-pick{border-color:#334155;background:#0f1c33} html.dark .lt-pick:hover{border-color:#b45309;background:#152238} html.dark .lt-pick:has(:checked){border-color:#f59e0b;background:#2a2213;box-shadow:0 0 0 1px rgba(245,158,11,.3)} html.dark .lt-pick:has(:checked) .lt-pick__title{color:#fcd34d} html.dark .lt-pick:has(:checked) .lt-pick__desc{color:#d6b46a} html.dark .lt-pick--muted{opacity:.45} html.dark .lt-pick--muted:hover{border-color:#334155;background:#0f1c33} /* ============================================================ การ์ดเลือกธนาคาร (พร้อมโลโก้) — user/boost.php