/* หน้าที่: สร้างอัตลักษณ์หน้าแรกและหน้าร้านแบบ Spatial โดยยังใช้ข้อมูล/โปสเตอร์/ปุ่มเดิม */
.friendly-body[data-ui-surface=public] { background: #f8f8fc; --xp-glow: #7e75ef; }
.friendly-body.venue-ui-friendly-club { --xp-glow: #5995ff; --xp-secondary: #46dbe6; }
.friendly-body.venue-ui-fc-club { --xp-glow: #e4b552; --xp-secondary: #ffa478; }
.friendly-body.venue-ui-cf-man-club { --xp-glow: #b479ed; --xp-secondary: #ec83bf; }
.friendly-body.venue-ui-friendly-restaurant { --xp-glow: #dd9278; --xp-secondary: #dfc37b; }
.friendly-body.venue-ui-friendly-karaoke { --xp-glow: #e789bf; --xp-secondary: #a58aef; }
.friendly-body[data-ui-surface=public] .site-header { padding: 16px max(2.2vw,16px); }
.friendly-body[data-ui-surface=public] .nav-shell {
  max-width: 1480px; margin: auto; min-height: 68px; padding: 10px 20px; background: #ffffffed;
  border: 1px solid #fff; border-radius: 21px; box-shadow: 0 4px 0 #ffffff22,0 14px 40px #080e252b;
  backdrop-filter: blur(22px); gap: 14px;
}
.friendly-body .nav-links>a,.friendly-body .nav-dropdown>button { font-size: 14px; }
.friendly-body .brand { gap: 9px; }
.friendly-body .brand img { width: 44px; height: 44px; border-radius: 13px; }
.friendly-body .nav-search-trigger { min-width: 44px; }
.friendly-body :where(.nav-links>a.active,.mobile-dock a.active) { color: #6651c0; }
.friendly-body .nav-links>a.active { background: #ede8fc; }
.friendly-body .fg2-home { background: #f8f8fc; overflow: clip; }
/* Hero จัดเป็นฉากลึก 3 ชั้น: แสงพื้นหลัง วงแหวน และโลโก้/การ์ดด้านหน้า */
.friendly-body .fg2-hero,.friendly-body.venue-ui .venue-hero {
  position: relative; isolation: isolate; overflow: clip;
  background: radial-gradient(ellipse at 85% 20%,color-mix(in srgb,var(--xp-glow) 22%,transparent),transparent 55%),linear-gradient(128deg,#10192e 0%,#171831 63%,#21223d);
  color: #fff; min-height: min(970px,110svh); padding: 126px max(5vw,28px) 48px;
}
.friendly-body .fg2-hero::before,.friendly-body.venue-ui .venue-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(#c1c6eb30 .7px,transparent .7px); background-size: 29px 29px;
  mask-image: linear-gradient(#000,transparent 90%);
}
.friendly-body .fg2-hero::after,.friendly-body.venue-ui .venue-hero::after {
  content: ''; position: absolute; z-index: -1; top: auto; left: -30%; right: -30%; height: 64%; bottom: -30%; pointer-events: none;
  background-image: linear-gradient(#a3a3d421 1px,transparent 1px),linear-gradient(90deg,#a3a3d421 1px,transparent 1px);
  background-size: 72px 72px; transform: perspective(700px) rotateX(64deg); transform-origin: center;
  mask-image: radial-gradient(ellipse,#000,transparent 65%);
}
.friendly-body .fg2-hero-shell { max-width: 1400px; }
.friendly-body .fg2-hero-grid { grid-template-columns: minmax(0,1.05fr) minmax(360px,.86fr); gap: clamp(36px,6vw,95px); }
.friendly-body .fg2-hero-copy { padding-block: 40px; }
.friendly-body .fg2-hero-copy h1,.friendly-body.venue-ui .venue-hero h1 {
  font-size: clamp(40px,5.2vw,76px); line-height: 1.32; letter-spacing: -.055em; color: #fff;
  background: none; -webkit-text-fill-color: currentColor; text-wrap: balance;
  text-shadow: 0 2px 0 #969cb144,0 5px 0 #090f2925,0 14px 35px #0005;
}
.friendly-body .fg2-hero-copy h1 { margin-top: 22px; }
.friendly-body .fg2-hero-copy h1 em { background: none; color: #b0a2ff; }
.friendly-body .fg2-hero-copy>p,.friendly-body.venue-ui .venue-hero-copy>p { color: #bdc7de; font-size: 16px; line-height: 1.9; }
.friendly-body :where(.fg2-overline,.venue-chip) { color: #b1a6f3; letter-spacing: .14em; }
.friendly-body .fg2-overline i { background: #ffffff0b; color: #bdb0ff; }
.friendly-body .fg2-greeting-icon { background: #ffffff0b; color: #b5a5ff; border: 1px solid #ffffff18; box-shadow: none; }
.friendly-body .fg2-greeting small,.friendly-body .fg2-live-status small,.friendly-body .fg2-trust-row span { color: #a5b2cc; }
.friendly-body .fg2-greeting strong,.friendly-body .fg2-live-status strong { color: #eef0ff; }
.friendly-body .fg2-live-status>span { color: #8ce1bc; border-color: #ffffff16; background: #ffffff08; }
.friendly-body .fg2-button-primary,.friendly-body.venue-ui .btn-primary-fg {
  border: 1px solid #c6b9ff66; background: linear-gradient(135deg,#8a77df,#6350be); color: #fff;
  box-shadow: 0 4px 0 #3f327c,0 13px 34px #6755c736; border-radius: 14px; min-height: 54px;
}
.friendly-body.venue-ui .btn-primary-fg { background: linear-gradient(140deg,var(--page-accent),color-mix(in srgb,var(--page-accent) 72%,#121a30)); border-color: color-mix(in srgb,var(--xp-glow) 40%,transparent); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb,var(--page-accent) 65%,#10152b),0 13px 34px #0002; }
.friendly-body.venue-ui-fc-club .btn-primary-fg { color: #271c06; background: linear-gradient(135deg,#f0cf7b,#d7ac4b); }
.friendly-body .fg2-button-soft,.friendly-body .venue-hero .btn-ghost-fg { background: #ffffff09; color: #eef1ff; border: 1px solid #ffffff26; box-shadow: none; border-radius: 14px; }
.friendly-body .fg2-logo-stack img { border-color: #28324b; }
.friendly-body .fg2-experience-wrap { position: relative; perspective: 1200px; padding: 16px 0; }
.friendly-body .fg2-experience-console {
  background: linear-gradient(140deg,#ffffff1e,#ffffff0c); border: 1px solid #ffffff35; border-radius: 29px;
  box-shadow: 0 8px 0 #080d273b,0 38px 75px #0004; padding: 11px; color: #f8f8ff; backdrop-filter: blur(14px);
}
.friendly-body .fg2-console-top { padding-bottom: 7px; }
.friendly-body .fg2-console-top button { background: #ffffff0d; border-color: #ffffff25; color: #dad5f5; }
.friendly-body .fg2-console-top strong { font-size: 11px; font-weight: 500; }
.friendly-body .fg2-feature-visual { min-height: 360px; border-radius: 19px; }
.friendly-body .fg2-feature-copy h2 { font-size: clamp(26px,2.8vw,39px); line-height: 1.25; }
.friendly-body .fg2-console-bottom { padding-block: 15px 5px; min-height: 77px; }
.friendly-body .fg2-console-bottom span { color: #aab6cd; }
.friendly-body .fg2-console-bottom>a { color: #242b44; background: #eeebff; border: 1px solid #fff; border-radius: 11px; min-height: 44px; }
.friendly-body .fg2-branch-switcher { margin-top: 28px; gap: 12px; }
.friendly-body .fg2-branch-chip { background: #ffffff08; border: 1px solid #ffffff17; border-radius: 15px; padding: 10px; color: #f0f1ff; height: 80px; }
.friendly-body .fg2-branch-chip img { width: 46px; height: 46px; }
.friendly-body .fg2-branch-chip small { color: #a8b4d0; }
.friendly-body .fg2-branch-chip.active,.friendly-body .fg2-branch-chip:hover { background: #ffffff14; border-color: #b9a8ff75; box-shadow: 0 3px 0 #8e7cd62e; }
.friendly-body .fg2-branch-chip strong { white-space: normal; line-height: 1.5; font-size: 14px; }
.friendly-body .fg2-hero-ambient,.friendly-body .fg2-motion-grid,.friendly-body .fg2-motion-field,.friendly-body .fg2-orbit { display: none; }
.friendly-body .fg2-page-progress { display: none; }
.friendly-body .fg2-motion-marquee,.friendly-body .venue-motion-ticker {
  overflow: hidden; margin: 0; background: #e8e3f2; color: #5b527b; border-block: 1px solid #dcd5e9;
  padding: 18px 0; font-size: 10px; letter-spacing: .21em;
}
.friendly-body .fg2-motion-marquee>div,.friendly-body .venue-motion-ticker>div { display: flex; width: max-content; gap: 48px; align-items: center; animation: none; }
.friendly-body .venue-motion-ticker>div span::after { content: '✦'; display: inline-block; margin-left: 48px; color: #8f7fb3; }
.friendly-body .fg2-motion-marquee i { width: 5px; height: 5px; border-radius: 1px; background: #7e6da8; transform: rotate(45deg); }
.friendly-body .fg2-quick-shell { margin: 34px auto 0; padding-inline: max(4vw,24px); }
.friendly-body .fg2-quick-actions { border-radius: 21px; box-shadow: 0 4px 0 #e8e5ee,0 14px 40px #29244708; border-color: #e1dde9; padding: 10px; }
.friendly-body .fg2-quick-actions>a { border-radius: 14px; padding: 15px; }
.friendly-body .fg2-quick-icon { box-shadow: inset 0 1px 0 #fff,0 4px 0 #443e5b0b; }
.friendly-body :where(.fg2-venues,.fg2-care,.venue-intro,.menu-section,.room-section,.pr-section) { padding-block: clamp(60px,7vw,105px); }
.friendly-body .fg2-section-head h2,.friendly-body .fg2-care-head h2,.friendly-body .section-heading h2 { font-size: clamp(27px,3.2vw,43px); line-height: 1.5; color: #26273f; }
.friendly-body .fg2-section-head>p,.friendly-body .section-heading>p { color: #68728a; }
.friendly-body .fg2-section-icon { border: 1px solid #e3dbf7; background: linear-gradient(145deg,#f7f3ff,#e6dff8); color: #7967b2; box-shadow: 0 4px 0 #dfd6ee; }
.friendly-body .fg2-venue-bento { gap: 22px; }
.friendly-body .fg2-venue-tile { border-radius: 25px; background: linear-gradient(145deg,#fff,color-mix(in srgb,var(--tile-soft) 50%,#fff)); border-color: color-mix(in srgb,var(--tile-accent) 18%,#e9e5ef); box-shadow: 0 5px 0 #e5e0ec,0 14px 35px #24224507; }
.friendly-body .fg2-venue-tile>a { padding: 23px; }
.friendly-body .fg2-tile-body img { width: 137px; height: 137px; border: 5px solid #ffffffa8; box-shadow: 0 7px 0 #dad4e926; filter: drop-shadow(0 18px 18px #24224520); }
.friendly-body .fg2-tile-body h3 { font-size: 18px; line-height: 1.5; }
.friendly-body .fg2-tile-body p { font-size: 16px; line-height: 1.75; }
.friendly-body .fg2-tonight { margin: 0 max(4vw,24px); border-radius: 30px; overflow: clip; min-height: 620px; background: #161e35; }
.friendly-body .fg2-tonight-copy { padding: 58px clamp(26px,4vw,66px); }
.friendly-body .fg2-tonight-copy h2 { font-size: clamp(29px,3.4vw,49px); line-height: 1.5; }
.friendly-body .fg2-tonight-copy>p { color: #acb8d1; }
.friendly-body .fg2-mood-list>a { border-color: #ffffff15; }
.friendly-body .fg2-care { background: radial-gradient(ellipse at 15% 40%,#f1ebff,transparent 60%),#f8f8fc; }
.friendly-body :where(.care-db-card,.pr-card,.food-card,.room-card) { border-radius: 21px; border: 1px solid #e1dce9; box-shadow: 0 4px 0 #e6e1ed,0 15px 32px #26233d08; background: #fff; }
.friendly-body .care-empty { min-height: 160px; border: 1px dashed #d8cfe9; background: #f9f6ff; border-radius: 18px; color: #71648d; padding: 28px; }
.friendly-body .fg2-app { margin: 0 max(4vw,24px) 80px; border-radius: 32px; background: linear-gradient(115deg,#151e34,#2e274e); color: #fff; overflow: clip; grid-template-columns: minmax(0,1fr) minmax(0,300px) minmax(150px,180px); gap: 38px; padding: 65px 45px; }
.friendly-body .fg2-phone { width: 100%; max-width: 300px; }
.friendly-body .fg2-phone-screen { color: #25314a; }
.friendly-body .fg2-store-row { flex-wrap: wrap; }
.friendly-body .fg2-app-badge small { color: #bcb0db; }
.friendly-body .fg2-app-copy h2 { color: #fff; font-size: clamp(34px,3.8vw,53px); line-height: 1.5; }
.friendly-body .fg2-app-copy p { color: #b8c3dc; }
.friendly-body .fg2-app-points { color: #c9d1e4; }
.friendly-body .fg2-qr { background: #fff; color: #2f304a; border: 1px solid #ece4f5; box-shadow: 0 5px 0 #aba1c745,0 24px 50px #080e2540; }
.friendly-body .fg2-qr small { color: #6e6886; }
/* สีร้านยึดค่าจากหลังบ้าน ส่วนฉากมืดคงคอนทราสต์ให้อ่านง่าย */
.friendly-body.venue-ui .venue-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr); align-items: center; gap: 45px; min-height: min(860px,100svh); padding-bottom: 72px; }
.friendly-body.venue-ui .venue-hero-bg { position: absolute; inset: 0; z-index: -2; opacity: .18; background-size: cover; background-position: center; filter: saturate(.7); transform: translate3d(0,var(--xp-parallax,0px),0) scale(1.06); }
.friendly-body.venue-ui .venue-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#101a2e,transparent); }
.friendly-body.venue-ui .venue-hero-copy { max-width: 740px; position: relative; z-index: 2; }
.friendly-body.venue-ui .back-link { color: #bdc6de; font-size: 12px; margin-bottom: 28px; }
.friendly-body.venue-ui .venue-chip { color: var(--xp-glow); background: #ffffff09; border: 1px solid #ffffff17; border-radius: 10px; }
.friendly-body.venue-ui .venue-hero h1 { font-size: clamp(38px,5vw,75px); margin-block: 24px 12px; }
.friendly-body.venue-ui .venue-tagline { color: color-mix(in srgb,var(--xp-glow) 45%,#fff) !important; font-size: 21px; }
.friendly-body.venue-ui .venue-info-row { color: #b2bed6; display: flex; flex-wrap: wrap; gap: 14px 25px; }
.friendly-body.venue-ui .venue-info-row span { font-size: 14px; }
.friendly-body.venue-ui .venue-hero-logo { position: relative; z-index: 1; display: grid; place-items: center; padding: 38px 0; perspective: 1000px; }
.friendly-body.venue-ui .venue-hero-logo img { width: min(340px,100%); aspect-ratio: 1; object-fit: contain; border-radius: 50%; box-shadow: 0 8px 0 #0003,0 26px 70px #0004; border: 1px solid #ffffff22; position: relative; z-index: 2; }
.friendly-body.venue-ui .logo-halo { inset: 12%; border-radius: 50%; background: color-mix(in srgb,var(--xp-glow) 24%,transparent); filter: blur(32px); opacity: .85; animation: none; }
.friendly-body.venue-ui .venue-hero-logo>span { position: relative; margin-top: 34px; color: #b6bfd7; font-size: 9px; letter-spacing: .18em; }
.friendly-body.venue-ui .venue-intro { background: #f9f9fc; }
.friendly-body.venue-ui .kicker { color: color-mix(in srgb,var(--page-accent) 75%,#3a3346); letter-spacing: .12em; }
.friendly-body .discover-stage { border-radius: 22px; overflow: hidden; border: 1px solid #ffffff7d; box-shadow: 0 5px 0 #dfd9e9,0 20px 50px #25213b19; }
.friendly-body .discover-slide img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #13182b; }
.friendly-body .discover-slide figcaption { max-width: calc(100% - 40px); }
.friendly-body .discover-rail button { border-radius: 13px; }
.friendly-body .discover-arrow { background: #11192a99; color: #fff; border: 1px solid #ffffff36; min-width: 44px; min-height: 44px; }
.friendly-body .atmosphere-main { border-radius: 25px; overflow: hidden; }
.friendly-body .atmosphere-side>div { background: #fff; border: 1px solid #e4dfec; border-radius: 20px; box-shadow: 0 4px 0 #e7e2ee; }
.friendly-body .room-card button { min-height: 48px; }
.friendly-body .pr-card .pr-visual { aspect-ratio: 16 / 9; height: auto; }
.friendly-body .pr-visual img { width: 100%; height: 100%; object-fit: contain; }
.friendly-body .venue-cta { margin: 0 max(4vw,24px) 70px; border-radius: 28px; padding: 50px; background: linear-gradient(115deg,#eae5f4,#f5f0fb); border: 1px solid #ddd5ec; }
.friendly-body .venue-cta h2 { font-size: clamp(26px,3vw,42px); line-height: 1.5; }
.friendly-body .site-footer { background: #121b2e; color: #c0cbe0; padding-top: 60px; }
.friendly-body .site-footer h3,.friendly-body .site-footer h4 { color: #eff1ff; }
.friendly-body .site-footer a { color: #aab8d3; min-height: 36px; }
.friendly-body .footer-bottom { border-color: #ffffff10; color: #8f9fbf; }
.friendly-body .mobile-dock { background: #fffffff5; border: 1px solid #fff; box-shadow: 0 4px 0 #ebe7f2,0 0 30px #30344a1c; border-radius: 21px; backdrop-filter: blur(16px); }
/* สแกนวาปใช้ฟอร์มสว่างบนฉากเชิญชวนเข้ม และ LED จำกัดอยู่ในกรอบจอ */
.friendly-body .warp-hero { background: radial-gradient(ellipse at 80% 40%,#875cb740,transparent 55%),#161e34; color: #fff; }
.friendly-body .warp-hero-copy h1 { color: #fff; line-height: 1.4; text-shadow: 0 3px 0 #0c112c80; }
.friendly-body .warp-hero-copy p { color: #b5c1d9; }
.friendly-body .warp-steps { flex-wrap: wrap; }
.friendly-body :where(.warp-submit-card,.warp-qr-card,.warp-rules,.warp-venue-picker,.warp-top-section) { border: 1px solid #e0d9ec; border-radius: 22px; box-shadow: 0 4px 0 #e7e2ef,0 14px 36px #32274108; }
.friendly-body .warp-section-title h2 { line-height: 1.5; }
.friendly-body .warp-venue-tabs button { border-radius: 14px; }
.friendly-body .warp-submit { border-radius: 14px; }
.friendly-body[data-ui-surface=display] { background: #0b1122; overflow: hidden; padding: 0; }
.friendly-body[data-ui-surface=display] .warp-led { max-width: 100vw; min-height: 100dvh; overflow: hidden; }
.friendly-body[data-ui-surface=display] :where(.warp-led-stage,.warp-led-idle) { min-width: 0; max-width: 100%; }
/* ฉากวงแหวนใช้ CSS แทนภาพใหม่ จึงไม่กระทบไฟล์ QR และโลโก้ที่ผู้ดูแลกำหนด */
.xp-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; perspective: 900px; }
.xp-scene-ring { position: absolute; width: min(65vw,720px); aspect-ratio: 1; right: -9%; top: 8%; border: 1px solid #ffffff14; border-radius: 50%; transform: rotateX(54deg) rotateY(-22deg); box-shadow: 0 0 0 35px #ffffff02,0 0 0 90px #ffffff02; }
.xp-scene-ring:nth-child(2) { width: min(44vw,500px); right: -3%; top: 19%; transform: rotateX(58deg) rotateY(27deg); border-color: color-mix(in srgb,var(--xp-glow) 34%,transparent); }
.xp-scene-light { position: absolute; width: 36%; aspect-ratio: 1; right: 5%; top: 9%; border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--xp-glow) 19%,transparent),transparent 70%); filter: blur(15px); }
.xp-scene-spark { width: 8px; height: 8px; border: 1px solid #d7d1fa80; position: absolute; top: 25%; left: 53%; transform: rotate(45deg); box-shadow: 0 0 23px #a99aff55; }
.xp-scene-spark:nth-last-child(1) { top: 75%; left: 90%; width: 5px; height: 5px; }
.xp-tilt { transform-style: preserve-3d; transition: transform .45s var(--xp-ease),box-shadow .3s; }
.friendly-body[data-experience-motion=on] .xp-tilt { transform: perspective(1200px) rotateX(var(--xp-rx,0deg)) rotateY(var(--xp-ry,0deg)) translateY(var(--xp-lift,0px)); }
.friendly-body[data-experience-motion=on] .xp-scene-ring { animation: xp-orbit 22s ease-in-out infinite alternate; }
.friendly-body[data-experience-motion=on] .xp-scene-ring:nth-child(2) { animation-duration: 29s; animation-direction: alternate-reverse; }
.friendly-body[data-experience-motion=on] .xp-scene-light { animation: xp-breathe 13s ease-in-out infinite alternate; }
.friendly-body[data-experience-motion=on] :where(.fg2-motion-marquee,.venue-motion-ticker)>div { animation: xp-marquee 36s linear infinite; }
.friendly-body :where(.fg2-motion-marquee,.venue-motion-ticker):hover>div { animation-play-state: paused; }
@keyframes xp-orbit { from { transform: rotateX(54deg) rotateY(-22deg) rotateZ(-8deg); } to { transform: rotateX(64deg) rotateY(20deg) rotateZ(12deg); } }
@keyframes xp-breathe { from { opacity: .5; transform: translate3d(0,0,0) scale(.9); } to { opacity: 1; transform: translate3d(-6%,9%,0) scale(1.15); } }
@keyframes xp-marquee { to { transform: translateX(-50%); } }
@keyframes xp-arrive { from { opacity: .65; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.friendly-body[data-experience-motion=on] .xp-reveal.xp-in { animation: xp-arrive .65s var(--xp-ease) both; }
/* เค้าโครง Tablet: ใช้พื้นที่สองคอลัมน์เมื่อพอ และรักษาปุ่มสัมผัสขนาด 44px ขึ้นไป */
@media(max-width:1100px) {
  .friendly-body[data-ui-surface=public] .site-header { padding: 10px 14px; }
  .friendly-body[data-ui-surface=public] .nav-shell { padding: 9px 12px; min-height: 64px; border-radius: 18px; gap: 9px; }
  .friendly-body .nav-shell>.experience-motion-toggle { margin-left: auto; order: 3; }
  .friendly-body .nav-shell>.language-switcher { margin-left: 0; }
  .friendly-body .fg2-hero { min-height: auto; padding: 112px 30px 36px; }
  .friendly-body .fg2-hero-grid { grid-template-columns: minmax(0,1fr) minmax(300px,.9fr); gap: 25px; }
  .friendly-body .fg2-hero-copy h1 { font-size: clamp(35px,5vw,52px); }
  .friendly-body .fg2-hero-copy>p { font-size: 14px; }
  .friendly-body .fg2-feature-visual { min-height: 330px; }
  .friendly-body .fg2-branch-switcher { display: grid; grid-template-columns: repeat(5,minmax(145px,1fr)); overflow-x: auto; padding: 4px 0 12px; scrollbar-width: thin; scrollbar-color: #656086 #ffffff09; scroll-snap-type: x mandatory; }
  .friendly-body .fg2-branch-chip { scroll-snap-align: start; }
  .friendly-body .fg2-quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .friendly-body .fg2-quick-actions>a { border-right: 0; }
  .friendly-body .fg2-tonight { min-height: auto; }
  .friendly-body.venue-ui .venue-hero { min-height: 750px; padding: 132px 35px 65px; gap: 24px; grid-template-columns: minmax(0,1.1fr) minmax(240px,.9fr); }
  .friendly-body.venue-ui .venue-hero h1 { font-size: clamp(39px,5.5vw,60px); }
  .friendly-body.venue-ui .venue-hero-logo img { width: 270px; }
  .friendly-body .discover-showcase { width: 100%; display: block; }
  .friendly-body .discover-rail { display: flex; overflow-x: auto; flex-wrap: nowrap; margin-top: 20px; }
  .friendly-body .discover-rail button { flex: 0 0 220px; }
  .friendly-body .fg2-app { margin-inline: 24px; grid-template-columns: minmax(0,1fr) minmax(0,290px); gap: 30px; padding: 45px 35px; }
  .friendly-body .fg2-qr { display: block; grid-column: 1 / -1; width: 190px; margin: 0 auto; }
}
/* เค้าโครง Mobile: ไม่มี scroll แนวนอนทั้งหน้า เลื่อนเฉพาะรายการที่ตั้งใจให้เป็น carousel */
@media(max-width:760px) {
  .friendly-body[data-ui-surface=public] .nav-shell { gap: 6px; padding: 8px 10px; }
  .friendly-body .brand img { width: 36px; height: 36px; }
  .friendly-body .brand>span { display: none; }
  .friendly-body .nav-shell>.experience-motion-toggle { margin-left: auto; }
  .friendly-body .nav-links>a,.friendly-body .nav-dropdown>button { font-size: 14px; }
  .friendly-body .fg2-hero { padding: 100px 20px 27px; }
  .friendly-body .fg2-welcome-bar { margin-bottom: 14px; height: auto; gap: 14px; }
  .friendly-body .fg2-greeting strong { font-size: 11px; }
  .friendly-body .fg2-greeting-icon { width: 36px; height: 36px; flex-shrink: 0; }
  .friendly-body .fg2-live-status>span { display: none; }
  .friendly-body .fg2-live-status strong { font-size: 12px; }
  .friendly-body .fg2-live-status small { max-width: 90px; text-align: right; font-size: 8px; }
  .friendly-body .fg2-hero-grid { grid-template-columns: 1fr; gap: 13px; }
  .friendly-body .fg2-hero-copy { padding: 22px 0 6px; }
  .friendly-body .fg2-hero-copy h1 { font-size: clamp(34px,9vw,56px); line-height: 1.42; margin-block: 19px 16px; }
  .friendly-body .fg2-hero-copy>p { font-size: 16px; line-height: 1.85; max-width: 580px; }
  .friendly-body .fg2-overline { font-size: 9px; letter-spacing: .12em; }
  .friendly-body .fg2-hero-actions { margin: 24px 0 16px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
  .friendly-body .fg2-button { padding: 12px; font-size: 14px; gap: 8px; min-height: 52px; }
  .friendly-body .fg2-button-soft { width: auto; }
  .friendly-body .fg2-button-soft span { display: inline; }
  .friendly-body .fg2-button i:last-child { margin-left: 0; }
  .friendly-body .fg2-trust-row { margin-top: 20px; }
  .friendly-body .fg2-experience-wrap { padding: 17px 0 0; max-width: 600px; width: 100%; margin: auto; }
  .friendly-body .fg2-experience-console { border-radius: 22px; padding: 8px; }
  .friendly-body .fg2-feature-visual { min-height: 0; height: 330px; border-radius: 16px; }
  .friendly-body .fg2-feature-logo { width: 86px; height: 86px; }
  .friendly-body .fg2-feature-copy h2 { font-size: 28px; }
  .friendly-body .fg2-console-bottom { padding-inline: 9px; }
  .friendly-body .fg2-console-top { padding-inline: 9px; height: 47px; }
  .friendly-body .fg2-console-top strong { font-size: 10px; }
  .friendly-body .fg2-branch-switcher { margin-top: 20px; gap: 8px; }
  .friendly-body .fg2-branch-chip { height: auto; min-height: 86px; }
  .friendly-body .fg2-motion-marquee,.friendly-body .venue-motion-ticker { font-size: 9px; padding-block: 14px; }
  .friendly-body .fg2-quick-shell { padding-inline: 16px; margin-top: 25px; }
  .friendly-body .fg2-quick-actions { gap: 3px; padding: 7px; border-radius: 18px; }
  .friendly-body .fg2-quick-actions>a { gap: 9px; padding: 12px 8px; }
  .friendly-body .fg2-quick-icon { width: 36px; height: 38px; flex-basis: 36px; border-radius: 11px; }
  .friendly-body .fg2-quick-actions strong { font-size: 14px; }
  .friendly-body .fg2-quick-actions small { font-size: 12px; }
  .friendly-body .fg2-quick-actions>a>i { display: none; }
  .friendly-body :where(.fg2-venues,.fg2-care,.venue-intro,.menu-section,.room-section,.pr-section) { padding: 56px 18px; }
  .friendly-body .fg2-section-head,.friendly-body .fg2-care-head { gap: 20px; margin-bottom: 24px; }
  .friendly-body .fg2-care-nav { position: static; display: flex; justify-content: flex-end; margin-top: 15px; }
  .friendly-body .fg2-section-head h2,.friendly-body .fg2-care-head h2,.friendly-body .section-heading h2 { font-size: clamp(24px,6.6vw,32px); line-height: 1.6; }
  .friendly-body .fg2-section-head p,.friendly-body .fg2-care-head p { font-size: 16px; }
  .friendly-body .fg2-section-icon { width: 43px; height: 45px; flex-shrink: 0; border-radius: 13px; }
  .friendly-body .fg2-venue-bento { gap: 15px; }
  .friendly-body .fg2-venue-tile { border-radius: 20px; }
  .friendly-body .fg2-venue-tile>a { padding: 17px; }
  .friendly-body .fg2-tile-body img { width: 107px; height: 107px; }
  .friendly-body .fg2-tile-body h3 { font-size: 16px; }
  .friendly-body .fg2-tile-4 .fg2-tile-body,.friendly-body .fg2-tile-5 .fg2-tile-body { grid-template-columns: 110px minmax(0,1fr); }
  .friendly-body .fg2-tile-4 .fg2-tile-body img,.friendly-body .fg2-tile-5 .fg2-tile-body img { width: 105px; height: 105px; }
  .friendly-body .fg2-tile-4 .fg2-tile-body h3,.friendly-body .fg2-tile-5 .fg2-tile-body h3 { font-size: 16px; }
  .friendly-body .fg2-tonight { display: flex; flex-direction: column; margin: 0 16px; border-radius: 23px; }
  .friendly-body .fg2-tonight-copy { padding: 35px 24px; }
  .friendly-body .fg2-tonight-copy h2 { font-size: 29px; }
  .friendly-body .fg2-tonight-media { height: 300px; }
  .friendly-body .fg2-tonight-media::before { background: linear-gradient(#161e35,transparent 30%); }
  .friendly-body .fg2-app { display: grid; grid-template-columns: minmax(0,1fr); margin: 0 16px 50px; border-radius: 23px; padding: 35px 24px; gap: 30px; }
  .friendly-body .fg2-phone { width: 100%; max-width: 300px; margin: 0 auto; }
  .friendly-body .fg2-phone-screen { height: 550px; }
  .friendly-body .fg2-qr { display: block; width: min(190px,100%); margin: 0 auto; }
  .friendly-body .fg2-app-copy h2 { font-size: 33px; }
  .friendly-body.venue-ui .venue-hero { display: flex; flex-direction: column; min-height: auto; padding: 117px 24px 39px; gap: 16px; }
  .friendly-body.venue-ui .venue-hero-copy { width: 100%; }
  .friendly-body.venue-ui .venue-hero h1 { font-size: clamp(37px,10vw,62px); line-height: 1.35; }
  .friendly-body.venue-ui .venue-hero-copy>p { font-size: 16px; }
  .friendly-body.venue-ui .venue-tagline { font-size: 17px !important; }
  .friendly-body.venue-ui .back-link { margin-bottom: 22px; font-size: 11px; }
  .friendly-body.venue-ui .venue-hero-logo { padding: 15px; width: 100%; }
  .friendly-body.venue-ui .venue-hero-logo img { width: 195px; }
  .friendly-body.venue-ui .venue-hero-logo>span { display: block; margin-top: 24px; }
  .friendly-body.venue-ui .venue-info-row { gap: 10px; flex-direction: row; }
  .friendly-body.venue-ui .venue-info-row span { background: #ffffff08; color: #c8d2e9; border: 1px solid #ffffff16; border-radius: 11px; }
  .friendly-body.venue-ui .venue-actions { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
  .friendly-body.venue-ui .venue-actions>* { padding-inline: 12px; font-size: 14px; }
  .friendly-body .discover-stage { border-radius: 13px; }
  .friendly-body .discover-showcase { margin-inline: -6px; width: calc(100% + 12px); max-width: none; }
  .friendly-body .discover-slide figcaption { padding: 9px 11px; max-width: 100%; }
  .friendly-body .discover-slide figcaption strong { font-size: 14px; }
  .friendly-body .discover-slide figcaption span { font-size: 12px; }
  .friendly-body .discover-rail button { flex-basis: 175px; }
  .friendly-body .venue-cta { margin: 0 16px 45px; padding: 30px 23px; border-radius: 22px; }
  .friendly-body .venue-cta h2 { font-size: 27px; }
  .friendly-body .warp-hero { padding-inline: 24px; }
  .friendly-body .warp-hero-copy h1 { font-size: 34px; }
  .friendly-body .warp-section-title h2 { font-size: 21px; }
  .friendly-body .xp-scene-ring { width: 90vw; right: -32%; top: 14%; }
  .friendly-body .xp-scene-ring:nth-child(2) { width: 70vw; right: -25%; top: 22%; }
}
@media(hover:hover) and (pointer:fine) {
  .friendly-body :where(.fg2-quick-actions>a,.fg2-branch-chip,.food-card,.room-card):hover { translate: 0 -3px; }
  .friendly-body :where(.fg2-button,.btn-primary-fg,.primary-dash-button):hover { filter: brightness(1.06); }
}
@media(pointer:coarse) {
  .friendly-body .xp-tilt { transform: none !important; }
  .friendly-body .fg2-venue-tile:hover { transform: none; }
}
/* หน้าที่: รีโนเวทภาพรวมด้วยชั้นพื้น แสงขอบ และวัสดุประจำร้าน ไม่เพิ่มเนื้อหาหรือย้ายลิงก์ */
.friendly-body[data-ui-surface=public] { --xp-stage: #111e39; --xp-glow: #7d9aff; background: #f4f7fc; }
.friendly-body.venue-ui-friendly-club { --xp-stage: #0c2147; --xp-glow: #69aaff; --xp-secondary: #60e0e6; }
.friendly-body.venue-ui-fc-club { --xp-stage: #282012; --xp-glow: #f0c566; --xp-secondary: #eaa268; }
.friendly-body.venue-ui-cf-man-club { --xp-stage: #25113e; --xp-glow: #be87ff; --xp-secondary: #eb9ccd; }
.friendly-body.venue-ui-friendly-restaurant { --xp-stage: #2c1b19; --xp-glow: #eaaa86; --xp-secondary: #edcf8a; }
.friendly-body.venue-ui-friendly-karaoke { --xp-stage: #29172f; --xp-glow: #f0a0ce; --xp-secondary: #aca1ff; }
.friendly-body .fg2-home { background: #f4f7fc; }
.friendly-body .fg2-hero,.friendly-body.venue-ui .venue-hero {
  background: radial-gradient(ellipse at 85% 20%,color-mix(in srgb,var(--xp-glow) 23%,transparent),transparent 56%),linear-gradient(128deg,#0b162a,var(--xp-stage));
  border-bottom: 1px solid color-mix(in srgb,var(--xp-glow) 35%,transparent);
  box-shadow: inset 0 -1px 0 #ffffff15,0 12px 40px #10244b0b;
}
.friendly-body[data-ui-surface=public] .nav-shell { background: #fffffff5; border-color: #e0e8f3; box-shadow: inset 0 1px 0 #fff,0 5px 0 #14253e17,0 18px 40px #07172e24; }
.friendly-body .nav-toggle { display: grid; place-items: center; min-width: 44px; }
@media(min-width:1101px) { .friendly-body .nav-toggle { display: none; } }
.friendly-body .fg2-experience-console { border-color: #d4e1ff5c; box-shadow: inset 0 1px 0 #ffffff4a,0 7px 0 #07132d85,0 22px 0 -12px #7d98df35,0 42px 70px #0005; }
.friendly-body .fg2-experience-console::after { content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--xp-light-x,70%) var(--xp-light-y,15%),#ffffff16,transparent 52%); }
.friendly-body .fg2-feature-visual { border: 1px solid #ffffff24; }
.friendly-body .fg2-console-top strong,.friendly-body .fg2-console-bottom :where(span,strong,a) { font-size: 14px; line-height: 1.7; }
.friendly-body .fg2-console-bottom { gap: 14px; height: auto; align-items: center; flex-wrap: wrap; }
.friendly-body .fg2-branch-chip { min-height: 88px; height: auto; background: #ffffff09; box-shadow: inset 0 1px 0 #ffffff13; }
.friendly-body .fg2-branch-chip.active { background: #ffffff19; border-color: #b1caff; box-shadow: inset 0 1px 0 #ffffff36,0 4px 0 #060f252e; }
.friendly-body .fg2-branch-chip small { font-size: 12px; }
.friendly-body .fg2-venue-tile { background: linear-gradient(145deg,#fff 48%,color-mix(in srgb,var(--tile-soft) 65%,#f6f9ff)); border-color: color-mix(in srgb,var(--tile-accent) 25%,#d7e1ed); box-shadow: var(--xp-shadow-raised); }
.friendly-body .fg2-tile-top { gap: 10px; }
.friendly-body .fg2-tile-bottom { border-top-color: #cbd7e880; }
.friendly-body .fg2-tile-bottom :where(a,span),.friendly-body .fg2-tile-top>span { font-size: 14px; }
.friendly-body .fg2-quick-actions { border-color: #d5dfed; background: #fff; box-shadow: var(--xp-shadow-raised); }
.friendly-body .fg2-quick-actions>a { background: linear-gradient(145deg,#fff,#f6f8fc); min-height: 90px; border: 1px solid transparent; }
.friendly-body .fg2-quick-actions>a:focus-visible { border-color: #a7b8dc; }
.friendly-body :where(.fg2-section-head,.fg2-care-head,.section-heading) :where(h2) { color: #1a2f4c; text-wrap: balance; }
.friendly-body :where(.fg2-section-head,.fg2-care-head,.section-heading)>p { color: #52647e; font-size: 16px; }
.friendly-body :where(.food-card,.room-card,.care-db-card,.pr-card) { border-color: #d8e1ee; box-shadow: var(--xp-shadow-raised); }
.friendly-body :where(.food-card,.room-card,.pr-card) :where(p,span),.friendly-body .care-db-card :where(small,span) { font-size: 14px; line-height: 1.7; }
.friendly-body .care-empty,.friendly-body .ui-empty { grid-column: 1/-1; border: 1px dashed #bacbe2; color: #52647e; background: linear-gradient(135deg,#fff,#edf3fc); border-radius: 20px; padding: 28px; }
.friendly-body .care-empty :where(strong,span),.friendly-body .ui-empty p { font-size: 16px; }
.friendly-body .fg2-app { border: 1px solid #7a93c04a; box-shadow: inset 0 1px 0 #ffffff25,0 6px 0 #b8c6dd,0 28px 45px #1d325a14; }
.friendly-body .fg2-app-copy p,.friendly-body .fg2-app-points { font-size: 16px; }
.friendly-body .fg2-qr :where(strong,small) { font-size: 14px; }
.friendly-body.venue-ui .venue-hero-logo img { border: 1px solid color-mix(in srgb,var(--xp-glow) 45%,#ffffff20); box-shadow: 0 9px 0 #030b2180,0 21px 0 -10px color-mix(in srgb,var(--xp-glow) 28%,transparent),0 35px 60px #0006; }
.friendly-body.venue-ui .venue-info-row span { padding: 10px 13px; border: 1px solid #ffffff23; border-radius: 12px; background: #ffffff07; color: #d0daec; }
.friendly-body .venue-cta { background: radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--xp-glow) 18%,transparent),transparent 70%),#f8fbff; border-color: #cddbef; box-shadow: var(--xp-shadow-raised); }
.friendly-body .site-footer :where(p,a) { font-size: 14px; line-height: 1.8; }
.friendly-body .site-footer a { min-height: 44px; display: inline-flex; align-items: center; }
.friendly-body :where(.fg2-store-row>a,.fg2-console-bottom>a,.venue-actions>a,.pr-pagination button) { min-height: 48px; }
/* หน้าที่: แจ้งสถานะไม่พบหน้า/ไม่มีสิทธิ์ด้วยกรอบเดียวกัน แต่ไม่เปิดทางลัดข้ามสิทธิ์ */
.friendly-body .xp-state-page { min-height: min(760px,90svh); display: grid; place-items: center; padding: 140px 24px 60px; background: radial-gradient(ellipse at 80% 0,#dce8ff,transparent 60%),#f4f7fc; }
.friendly-body[data-ui-surface=workspace] .xp-state-page { min-height: calc(100svh - var(--ui-bar)); padding-top: 36px; }
.friendly-body .xp-state-card { width: min(680px,100%); border: 1px solid #d5dfef; border-radius: 28px; padding: clamp(25px,5vw,50px); text-align: center; background: linear-gradient(145deg,#fff,#f7faff); box-shadow: var(--xp-shadow-raised); }
.friendly-body .xp-state-code { display: inline-grid; place-items: center; min-width: 108px; min-height: 100px; border-radius: 24px; padding: 15px; margin-bottom: 25px; background: linear-gradient(135deg,#7791dc,#413b85); color: #fff; border: 1px solid #acbaf3; font-size: 36px; font-weight: 600; box-shadow: inset 0 1px 0 #ffffff70,0 5px 0 #303d7450,0 18px 25px #32457520; }
.friendly-body .xp-state-card h1 { font-size: clamp(26px,4vw,40px); color: #213759; margin: 0 0 14px; }
.friendly-body .xp-state-card p { color: #52647e; font-size: 16px; margin: 0 0 25px; }
.friendly-body .xp-state-card a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 13px; background: #5148aa; border: 1px solid #7267cc; color: #fff; box-shadow: 0 4px 0 #d2cde9; font-size: 16px; }
@media(hover:hover) and (pointer:fine) {
  .friendly-body :where(.fg2-quick-actions>a,.fg2-venue-tile,.food-card,.room-card,.care-db-card,.pr-card):hover { border-color: #a8b9d8; box-shadow: inset 0 1px 0 #fff,0 5px 0 #cdd8e680,0 24px 40px #233b661a; }
}
@media(min-width:1101px) and (max-width:1280px) {
  .friendly-body[data-ui-surface=public] .nav-shell { flex-wrap: wrap; }
  .friendly-body .nav-links { flex: 1 0 100%; order: 10; justify-content: center; gap: 12px; }
  .friendly-body .fg2-hero,.friendly-body.venue-ui .venue-hero { padding-top: 180px; }
}
@media(max-width:760px) {
  .friendly-body .fg2-hero { padding-inline: 18px; }
  .friendly-body .fg2-branch-switcher { grid-template-columns: repeat(5,minmax(180px,1fr)); }
  .friendly-body .fg2-greeting strong,.friendly-body .fg2-live-status strong { font-size: 14px; }
  .friendly-body .fg2-greeting small,.friendly-body .fg2-live-status small { font-size: 12px; }
  .friendly-body .fg2-live-status small { max-width: 120px; }
  .friendly-body .fg2-quick-actions>a { align-items: flex-start; }
  .friendly-body .fg2-console-top strong { font-size: 14px; }
  .friendly-body .fg2-console-bottom>a { padding-inline: 13px; }
  .friendly-body .fg2-tile-body p { font-size: 14px; }
  .friendly-body .fg2-tile-bottom { flex-wrap: wrap; gap: 8px; }
  .friendly-body .venue-info-row span { flex: 1 1 145px; }
  .friendly-body .discover-slide figcaption { padding: 8px 12px; background: #0b162bd9; }
  .friendly-body .discover-slide figcaption span { display: none; }
  .friendly-body .xp-state-page { padding-inline: 16px; }
}
@media(max-width:380px) {
  .friendly-body .fg2-quick-actions,.friendly-body .fg2-hero-actions,.friendly-body.venue-ui .venue-actions { grid-template-columns: minmax(0,1fr); }
  .friendly-body .fg2-quick-actions>a { min-height: 76px; align-items: center; }
  .friendly-body .fg2-console-bottom { display: grid; grid-template-columns: minmax(0,1fr); }
  .friendly-body .fg2-console-bottom>a { justify-content: center; }
}