/* ══════════════════════════════════════════════════════════════════════ Condo platform — public page styles. ค่าทั้งหมดยกมาจากแบบที่อนุมัติ (Pleno mockup) 1:1 แต่เปลี่ยนสีเป็น token ทำให้สลับธีมได้โดยหน้าตาโครงสร้างเหมือนเดิมทุกจุด ══════════════════════════════════════════════════════════════════════ */ :root{ --primary:#8f2c26; --primary-dark:#71201b; --accent:#e8b23c; --bg:#faf7f2; --bg-2:#f3ede3; --surface:#fff; --surface-2:#f1eeeb; --ink:#2b241e; --muted:#6f665e; --muted-2:#8a8078; --line:#e7dfd3; --field:#ddd2c2; --pill:#f0e9de; --tint:#f7e7e5; --tint-ink:#8a7370; --tint-strong:#b4635c; --promo-bg:#8b2a24; --promo-dark:#7a231d; --line-btn:#37a63f; --line-btn-dark:#2f8f36; --maxw:480px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg-2);color:var(--ink); font-family:"IBM Plex Sans Thai",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:var(--primary);text-decoration:none} a:hover{color:var(--primary-dark)} h1,h2,h3{font-family:"Noto Serif Thai",serif;margin:0} .serif{font-family:"Noto Serif Thai",serif} /* ข้อความสำหรับโปรแกรมอ่านหน้าจอ/AI agent เท่านั้น — ยังอยู่ใน a11y tree แต่ตาไม่เห็น (ห้ามใช้ display:none หรือ visibility:hidden จะหายจาก a11y tree ไปด้วย) */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} summary::-webkit-details-marker{display:none} summary{list-style:none;cursor:pointer} .scr{scrollbar-width:none}.scr::-webkit-scrollbar{display:none} input,select,button,textarea{font-family:inherit} @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} .page{max-width:var(--maxw);margin:0 auto;background:var(--bg);position:relative; overflow-x:hidden;box-shadow:0 0 60px -22px rgba(0,0,0,.22)} /* placeholder ภาพ (ตอนยังไม่ใส่รูปจริง) */ .slot{background:repeating-linear-gradient(125deg,#ded5c6 0 10px,#e8e0d2 10px 20px)} .ph{display:flex;align-items:center;justify-content:center;text-align:center; font:500 10px/1.7 ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#9b8f7e} /* ── HERO ─────────────────────────────────────────────────────────── */ .hero{position:relative;height:580px;display:flex;flex-direction:column;align-items:center; justify-content:flex-end;padding:0 22px 40px;text-align:center;color:#fff} .hero .bg{position:absolute;inset:0;background-size:cover;background-position:center; background-color:#6f6156;background-image:repeating-linear-gradient(122deg,#6f6156 0 11px,#7a6b5e 11px 22px)} .hero .scrim{position:absolute;inset:0; background:linear-gradient(to top,rgba(35,25,20,.9) 0%,rgba(35,25,20,.35) 48%,rgba(35,25,20,.12) 100%)} .hero .in{position:relative;display:flex;flex-direction:column;align-items:center;gap:11px} .hero .logo{font-family:"Noto Serif Thai",serif;font-weight:600;font-size:44px;line-height:1} /* เป็น

แล้ว (เพื่อ AI agent/เสิร์ช) — ทับกฎ h1 ที่บังคับ serif ไว้ ให้หน้าตาเหมือนเดิมเป๊ะ */ .hero .t{font-family:inherit;font-size:17px;font-weight:600} .hero .s{font-size:13px;line-height:1.6;color:rgba(255,255,255,.82)} .hero .link-u{font-size:13px;color:#fff;text-decoration:underline;text-underline-offset:4px} /* ── ปุ่ม ─────────────────────────────────────────────────────────── */ .btn-line{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px; border:none;border-radius:22px;background:var(--line-btn);color:#fff;font-size:14px;font-weight:600;cursor:pointer} .btn-line:hover{background:var(--line-btn-dark);color:#fff} .btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 22px;border:none; border-radius:14px;background:var(--primary);color:#fff;font-size:15px;font-weight:600;cursor:pointer} .btn:hover{background:var(--primary-dark);color:#fff} .btn.w{width:100%} .btn.ghost{background:var(--surface);border:1px solid var(--field);color:var(--ink)} .btn.ghost:hover{background:var(--bg-2);color:var(--ink)} .btn.txt{background:none;color:var(--muted-2);height:38px;font-size:13px;font-weight:400} .btn.txt:hover{background:none;color:var(--ink)} /* ── SECTION NAV (sticky) ─────────────────────────────────────────── */ .nav{position:sticky;top:0;z-index:30;display:flex;gap:4px;padding:11px 16px;overflow-x:auto; background:rgba(250,247,242,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav a{flex:none;font-size:12.5px;font-weight:600;color:var(--ink);padding:7px 12px;border-radius:999px;background:var(--pill)} .nav a:hover{filter:brightness(.95);color:var(--ink)} /* ── BREADCRUMB ───────────────────────────────────────────────────── */ /* เป็น