/* =====================================================================================
   ลูกเล่นหน้าเว็บ — ใช้ร่วมกันทุกหน้าลูกค้า (เรียกผ่าน fx_head() ใน all/fx_lib.php)
   ===================================================================================== */
:root{ --fx-ink:#0b0b0c; --fx-gold:#c8a45d; --fx-gold-soft:#e2c98f; --fx-ivory:#f7f4ee; --fx-line:#e7e1d5; --fx-mute:#6b6b70; --fx-ease:cubic-bezier(.2,.7,.2,1); --fx-bottom:0px; }

/* ---------- 1) เปลี่ยนหน้าแบบภาพยนตร์ (Chrome / Edge / Safari 18+ — เบราว์เซอร์อื่นเปลี่ยนหน้าปกติ) ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:fx-vt-out .38s var(--fx-ease) both; }
::view-transition-new(root){ animation:fx-vt-in .5s var(--fx-ease) both; }
::view-transition-group(fx-hero){ animation-duration:.6s; animation-timing-function:var(--fx-ease); }
::view-transition-old(fx-hero),::view-transition-new(fx-hero){ height:100%; object-fit:cover; }
@keyframes fx-vt-out{ to{ opacity:0; transform:scale(.985); } }
@keyframes fx-vt-in{ from{ opacity:0; transform:translateY(14px); } }

/* ---------- 2) รูปโหลดแบบเบลอแล้วค่อยชัด ---------- */
img.fx-wait{ opacity:0; filter:blur(18px); transform:scale(1.06); }
img.fx-in{ transition:opacity .7s var(--fx-ease), filter .9s var(--fx-ease), transform 1.2s var(--fx-ease) !important; }
.fx-skel{ background-image:linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(200,164,93,.16) 50%, rgba(255,255,255,0) 70%) !important; background-size:220% 100% !important; animation:fx-shimmer 1.4s linear infinite; }
@keyframes fx-shimmer{ from{ background-position:120% 0; } to{ background-position:-120% 0; } }

/* ---------- 3) parallax รูปตามการเลื่อนจอ (เฉพาะเบราว์เซอร์ที่รองรับ — ไม่รองรับก็แสดงปกติ) ---------- */
@supports (animation-timeline: view()){
	.fx-par{ animation:fx-par linear both; animation-timeline:view(); animation-range:cover 0% cover 100%; }
	@keyframes fx-par{ from{ transform:translateY(-7%) scale(1.14); } to{ transform:translateY(7%) scale(1.14); } }
}
.fx-count{ font-variant-numeric:lining-nums tabular-nums; }

/* ---------- 6) ♡ บันทึกบ้านที่สนใจ ---------- */
.fx-heart{ position:absolute; z-index:6; top:10px; right:10px; width:38px; height:38px; border-radius:50%; border:0; padding:0; cursor:pointer;
	display:flex; align-items:center; justify-content:center; background:rgba(11,11,12,.55); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
	transition:transform .25s var(--fx-ease), background .25s; -webkit-tap-highlight-color:transparent; }
.fx-heart svg{ width:19px; height:19px; transition:transform .3s var(--fx-ease); }
.fx-heart:hover{ background:rgba(11,11,12,.75); transform:scale(1.06); }
.fx-heart.is-on{ background:#fff; color:#c0392b; }
.fx-heart.is-on svg{ fill:currentColor; }
.fx-heart.is-pop svg{ animation:fx-pop .45s var(--fx-ease); }
@keyframes fx-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.35); } 100%{ transform:scale(1); } }
.fx-heart:focus-visible{ outline:2px solid var(--fx-gold); outline-offset:2px; }
/* การ์ดที่มีป้ายมุมขวาบนอยู่แล้ว → เลื่อนหัวใจลงมาไม่ทับ */
.fx-heart--low{ top:auto; bottom:12px; }

.fx-favbtn{ position:fixed; z-index:44; left:16px; bottom:calc(16px + var(--fx-bottom) + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:8px;
	padding:11px 16px 11px 13px; border:1px solid rgba(200,164,93,.55); border-radius:30px; background:rgba(11,11,12,.92); color:#fff; font:500 14px/1 'Prompt',Tahoma,sans-serif;
	cursor:pointer; box-shadow:0 14px 34px -14px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
	transform:translateY(140%); opacity:0; transition:transform .45s var(--fx-ease), opacity .3s; }
.fx-favbtn.is-show{ transform:none; opacity:1; }
.fx-favbtn svg{ width:18px; height:18px; color:#e05a4a; fill:currentColor; }
.fx-favbtn b{ min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--fx-gold); color:var(--fx-ink); font-size:12px; display:inline-flex; align-items:center; justify-content:center; }
.fx-favbtn.is-bump{ animation:fx-bump .5s var(--fx-ease); }
@keyframes fx-bump{ 30%{ transform:scale(1.12); } }

.fx-drawer{ position:fixed; inset:0; z-index:200; visibility:hidden; }
.fx-drawer.is-open{ visibility:visible; }
.fx-shade{ position:absolute; inset:0; background:rgba(11,11,12,.55); opacity:0; transition:opacity .3s; }
.fx-drawer.is-open .fx-shade{ opacity:1; }
.fx-panel{ position:absolute; top:0; right:0; bottom:0; width:min(420px,100%); background:var(--fx-ivory); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .4s var(--fx-ease);
	font-family:'Prompt',Tahoma,sans-serif; color:var(--fx-ink); }
.fx-drawer.is-open .fx-panel{ transform:none; }
.fx-ph{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 20px; background:var(--fx-ink); color:#fff; }
.fx-ph small{ display:block; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--fx-gold); }
.fx-ph h3{ margin:2px 0 0; font-size:19px; font-weight:600; }
.fx-x{ width:40px; height:40px; border:1px solid rgba(255,255,255,.25); background:none; color:#fff; font-size:20px; cursor:pointer; }
.fx-list{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; -webkit-overflow-scrolling:touch; }
.fx-item{ display:grid; grid-template-columns:96px minmax(0,1fr) 34px; gap:12px; align-items:center; background:#fff; border:1px solid var(--fx-line); padding:8px; }
.fx-item img{ width:96px; height:72px; object-fit:cover; background:#1b1b1d; display:block; }
.fx-item a{ color:inherit; text-decoration:none; min-width:0; }
.fx-item b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:500; font-size:14px; line-height:1.45; }
.fx-item small{ display:block; font-size:12px; color:#8a6a2b; margin-top:2px; }
.fx-item button{ width:34px; height:34px; border:1px solid var(--fx-line); background:#fff; cursor:pointer; color:var(--fx-mute); font-size:16px; }
.fx-item button:hover{ color:#b4412f; border-color:#b4412f; }
.fx-empty{ text-align:center; color:var(--fx-mute); padding:40px 10px; font-size:14px; }
.fx-empty svg{ width:40px; height:40px; color:#d9c9a4; margin-bottom:8px; }
.fx-pf{ padding:14px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--fx-line); background:#fff; display:flex; flex-direction:column; gap:8px; }
.fx-btn{ display:flex; align-items:center; justify-content:center; gap:8px; height:48px; border:1px solid var(--fx-gold); background:var(--fx-gold); color:var(--fx-ink); font:500 15px 'Prompt',Tahoma,sans-serif; cursor:pointer; text-decoration:none; }
.fx-btn:hover{ background:var(--fx-gold-soft); }
.fx-btn--line{ background:#06c755; border-color:#06c755; color:#fff; }
.fx-btn--line:hover{ background:#05b14c; }
.fx-btn--ghost{ background:#fff; border-color:var(--fx-line); }
.fx-btn svg{ width:18px; height:18px; }
.fx-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fx-hint{ font-size:12px; color:var(--fx-mute); text-align:center; }

/* ---------- 7) ปุ่มบันทึก/แชร์ในหน้ารายละเอียด ---------- */
.fx-actions{ display:flex; gap:8px; margin:14px 0 4px; }
.fx-act{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 14px; border:1px solid var(--fx-line); background:#fff; color:var(--fx-ink);
	font:500 14px 'Prompt',Tahoma,sans-serif; cursor:pointer; transition:border-color .25s, background .25s; }
.fx-act:hover{ border-color:var(--fx-gold); }
.fx-act svg{ width:18px; height:18px; }
.fx-act.is-on{ border-color:#e05a4a; color:#c0392b; background:#fff6f4; }
.fx-act.is-on svg{ fill:currentColor; }
.fx-sharebox{ position:fixed; left:50%; bottom:calc(20px + var(--fx-bottom)); z-index:210; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:all .3s var(--fx-ease);
	background:#fff; border:1px solid var(--fx-line); box-shadow:0 20px 50px -18px rgba(0,0,0,.45); padding:14px; width:min(360px,calc(100% - 32px)); font-family:'Prompt',Tahoma,sans-serif; }
.fx-sharebox.is-open{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.fx-sharebox h4{ margin:0 0 10px; font-size:15px; font-weight:600; display:flex; justify-content:space-between; align-items:center; }
.fx-sharebox h4 button{ border:0; background:none; font-size:18px; cursor:pointer; color:var(--fx-mute); }
.fx-sharebox .fx-row{ grid-template-columns:repeat(3,1fr); }
.fx-sharebox .fx-btn{ height:44px; font-size:13px; }
.fx-btn--fb{ background:#1877f2; border-color:#1877f2; color:#fff; }

.fx-toast{ position:fixed; left:50%; bottom:calc(84px + var(--fx-bottom)); z-index:220; transform:translate(-50%,16px); opacity:0; pointer-events:none; transition:all .35s var(--fx-ease);
	background:var(--fx-ink); color:#fff; padding:11px 18px; font:400 14px 'Prompt',Tahoma,sans-serif; border-left:3px solid var(--fx-gold); max-width:calc(100% - 32px); }
.fx-toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ---------- 9) ชวนติดตั้งเป็นแอป ---------- */
.fx-install{ position:fixed; left:12px; right:12px; bottom:calc(12px + var(--fx-bottom) + env(safe-area-inset-bottom)); z-index:150; max-width:460px; margin:0 auto;
	display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 12px 12px 12px; background:rgba(11,11,12,.96); color:#fff;
	border:1px solid rgba(200,164,93,.45); box-shadow:0 20px 50px -18px rgba(0,0,0,.7); font-family:'Prompt',Tahoma,sans-serif;
	transform:translateY(160%); transition:transform .5s var(--fx-ease); }
.fx-install.is-show{ transform:none; }
.fx-install img{ width:52px; height:52px; display:block; }
.fx-install b{ display:block; font-weight:500; font-size:14px; }
.fx-install span{ display:block; font-size:12px; color:#a3a3a8; line-height:1.45; }
.fx-install .fx-ib{ display:flex; gap:6px; align-items:center; }
.fx-install button{ height:38px; padding:0 14px; border:1px solid var(--fx-gold); background:var(--fx-gold); color:var(--fx-ink); font:500 13px 'Prompt',Tahoma,sans-serif; cursor:pointer; }
.fx-install .fx-no{ background:none; border:0; color:#a3a3a8; font-size:18px; padding:0 6px; }
.fx-ios-share{ display:inline-block; width:15px; height:15px; vertical-align:-2px; }

@media (max-width:600px){
	.fx-heart{ width:36px; height:36px; }
	.fx-favbtn{ left:12px; padding:10px 14px 10px 12px; }
}
@media (prefers-reduced-motion: reduce){
	img.fx-wait{ filter:none; transform:none; }
	.fx-par{ animation:none !important; }
	::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important; }
}
@media print{ .fx-heart,.fx-favbtn,.fx-install,.fx-actions{ display:none !important; } }