/* =====================================================================
   WebCMS v3 Design Layer — "Liquid Glass + Shader Gradient"
   - ทำงานเฉพาะเมื่อ <body class="fx3"> (เปิด/ปิดได้ที่ Global Settings → ดีไซน์ v3)
   - ใช้สีจากธีม (--c1 สีหลัก, --c2 สีเน้น, --bg, --tx) ทุกจุด เปลี่ยนธีมแล้วตามได้ทันที
   - ไม่แตะ markup/ฟังก์ชัน: เป็น CSS ทับชั้นบนสุดอย่างเดียว
   ===================================================================== */
body.fx3{
  --rr:clamp(14px,calc(var(--r,0px) + 14px),30px);      /* มุมการ์ด */
  --rs:clamp(10px,calc(var(--r,0px) + 10px),20px);      /* มุมปุ่ม/อินพุต */
  --gl-bg:color-mix(in srgb,var(--c1) 58%,transparent);  /* พื้นกระจกโทนสีหลัก */
  --gl-bd:#ffffff2e;                                     /* ขอบกระจก */
  --gl-hi:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #ffffff0d; /* เงาไฮไลต์ขอบบน-ล่าง */
  --sh-1:0 1px 2px #0000000a,0 8px 24px -6px #00000014;
  --sh-2:0 2px 6px #0000000d,0 24px 48px -12px #00000033;
  --ease:cubic-bezier(.22,1,.36,1);
  text-rendering:optimizeLegibility
}
body.fx3 ::selection{background:color-mix(in srgb,var(--c2) 35%,transparent)}
body.fx3 :focus-visible{outline:2px solid var(--c2);outline-offset:3px;border-radius:6px}

/* ---------- ปุ่ม ---------- */
body.fx3:not([class*=" btn-"]) .btn{border-radius:var(--rs);position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,color-mix(in srgb,var(--c2) 92%,#fff),var(--c2) 55%,color-mix(in srgb,var(--c2) 80%,#000));
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--c2) 70%,transparent),var(--gl-hi);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s}
body.fx3:not([class*=" btn-"]) .btn:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
body.fx3:not([class*=" btn-"]) .btn:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--c2) 92%,#fff),var(--c2));color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px -10px color-mix(in srgb,var(--c2) 80%,transparent),var(--gl-hi)}
body.fx3:not([class*=" btn-"]) .btn:hover:before{transform:translateX(120%)}
body.fx3:not([class*=" btn-"]) .btn:active{transform:translateY(0) scale(.98)}
body.fx3 .hero .btn.btn-o,body.fx3 .bkh .btn.btn-o{background:#ffffff1a;border-color:#ffffff59;-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:var(--gl-hi)}
body.fx3 .hero .btn.btn-o:hover{background:#ffffff33;color:#fff}

/* ---------- Header: กระจกใสเมื่อเลื่อน ---------- */
body.fx3 .nav{transition:background .45s var(--ease),padding .45s var(--ease),box-shadow .45s,backdrop-filter .45s}
body.fx3 .nav.sc,body.fx3.nav-solid .nav{background:var(--gl-bg)!important;-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  box-shadow:0 1px 0 var(--gl-bd),0 18px 40px -20px #0008}
body.fx3 .nav nav>a,body.fx3 .nav nav .dd>a{position:relative}
body.fx3 .nav nav>a:not(.rsv):after,body.fx3 .nav nav .dd>a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--c2);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
body.fx3 .nav nav>a:not(.rsv):hover:after,body.fx3 .nav nav .dd:hover>a:after{transform:scaleX(1)}
body.fx3 .rsv{border-radius:999px;background:#ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--gl-hi)}
body.fx3 .rsv:hover{background:var(--c2);border-color:var(--c2)}
body.fx3 .tools .lang{border-color:#ffffff4d;background:#ffffff12}
@media(min-width:1025px){
  body.fx3 .menu:before{border-radius:16px;background:color-mix(in srgb,var(--c1) 72%,transparent);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);border:1px solid var(--gl-bd);box-shadow:0 24px 50px -16px #000a,var(--gl-hi)}
  body.fx3 .menu a{border-radius:10px;margin:2px 8px}
  body.fx3 .menu{padding-bottom:8px}
}

/* ---------- Hero ---------- */
body.fx3 .hero .slide:after{background:linear-gradient(180deg,#0000004d 0%,#0000 30%,#0000 55%,#000000a6 100%)!important}
body.fx3 .hero h1{text-shadow:0 2px 30px #0006;letter-spacing:-.01em}
body.fx3 .prev,body.fx3 .next{background:#ffffff14!important;border:1px solid #ffffff40!important;-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);box-shadow:var(--gl-hi);transition:transform .3s var(--ease),background .3s}
body.fx3 .prev:hover,body.fx3 .next:hover{background:#ffffff33!important;transform:scale(1.06)}

/* ---------- แถบจองห้อง: การ์ดกระจก ---------- */
body.fx3 .bkf{border-radius:var(--rr);overflow:hidden;background:color-mix(in srgb,var(--card) 82%,transparent);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
  border:1px solid color-mix(in srgb,var(--card) 60%,#ffffff);box-shadow:0 30px 70px -24px #0007,var(--gl-hi)}
body.fx3 .bkf input,body.fx3 .bkf select{border-radius:10px}

/* ---------- หัวข้อ Section ---------- */
body.fx3 .sh>small:first-child,body.fx3 .eb{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--c2) 12%,transparent);border:1px solid color-mix(in srgb,var(--c2) 28%,transparent);letter-spacing:.24em}
body.fx3 .sh>small:first-child:before,body.fx3 .eb:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c2);box-shadow:0 0 0 3px color-mix(in srgb,var(--c2) 25%,transparent)}
body.fx3 h2{letter-spacing:-.015em}

/* ---------- การ์ดกิจการ / ห้องพัก ---------- */
body.fx3 .stay{border-radius:var(--rr);box-shadow:var(--sh-1);transition:transform .5s var(--ease),box-shadow .5s var(--ease);isolation:isolate}
body.fx3 .stay:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
body.fx3 .stay:before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff1f;pointer-events:none}
body.fx3 .stay:after{background:linear-gradient(180deg,transparent 35%,color-mix(in srgb,var(--c1) 55%,#000) 100%)}
body.fx3 .sl>i{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:10px;background:#ffffff1a;border:1px solid #ffffff33;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--gl-hi);font-size:1.25rem}

/* ---------- การ์ดทั่วไป / Event / โปรโมชั่น ---------- */
body.fx3 .card{border-radius:var(--rr);border:1px solid var(--line);box-shadow:var(--sh-1);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
body.fx3 .card:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
body.fx3 .card img{transition:transform .8s var(--ease)}body.fx3 .card:hover img{transform:scale(1.04)}
body.fx3 .card .cimg{overflow:hidden}
body.fx3 .pr{border-radius:var(--rr);overflow:hidden;box-shadow:var(--sh-1);border:1px solid var(--line)}
body.fx3 .bkc-i{border-radius:var(--rr)!important;border:1px solid var(--line);background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 92%,var(--c2)))!important;box-shadow:var(--sh-1)!important;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
body.fx3 .bkc-i:hover{transform:translateY(-5px);box-shadow:var(--sh-2)!important}
body.fx3 .bkc-i .ic{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,var(--c2) 13%,transparent);border:1px solid color-mix(in srgb,var(--c2) 25%,transparent);margin-bottom:6px}
body.fx3 .bkti-i{border-radius:var(--rr)}
body.fx3 .bkti-i .no{border-radius:999px;padding:3px 10px;background:#0000004d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* ---------- แกลเลอรี่ / วิดีโอ / พันธมิตร ---------- */
body.fx3 .gal{gap:12px}body.fx3 .gal a{border-radius:calc(var(--rr) - 4px)}
body.fx3 .vw{border-radius:var(--rr);box-shadow:var(--sh-2)}
body.fx3 .pl{filter:grayscale(1);opacity:.6}body.fx3 .pl:hover{filter:none;opacity:1;transform:translateY(-2px)}
body.fx3 .ab-i .i1,body.fx3 .ab-i .i2{border-radius:var(--rr)}
body.fx3 .rev{border-radius:999px}

/* ---------- Section ที่มีพื้นหลัง ShaderGradient ---------- */
[data-fx]{position:relative;isolation:isolate;overflow:hidden}
[data-fx]>.fx-host{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
[data-fx].fx-live>.fx-host{opacity:1}
[data-fx]>:not(.fx-host){position:relative;z-index:1}
body.fx3 .stats[data-fx],body.fx3 .cband[data-fx],body.fx3 .ph.ph-fx{background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--c2) 45%,var(--c1)) 0%,var(--c1) 45%,color-mix(in srgb,var(--c1) 70%,#000) 100%)}
body.fx3 .stats[data-fx]:after,body.fx3 .cband[data-fx]:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#00000040,#0000 30%,#0000 70%,#00000040);pointer-events:none}
body.fx3 .stats .st{padding:26px 18px;border-radius:var(--rr);background:#ffffff12;border:1px solid #ffffff26;-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:var(--gl-hi),0 20px 40px -24px #0008}
body.fx3 .cband .big2{text-shadow:0 4px 40px #0006}
body.fx3 .cband p a,body.fx3 .cband .ad{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:#ffffff14;border:1px solid #ffffff2b;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.fx3 .ph:before{background:linear-gradient(180deg,#0000008c,#0000004d 60%,#00000080)}
body.fx3 .ph.ph-fx:before{background:linear-gradient(180deg,#00000059,#0000001a 60%,#0000004d)}

/* ---------- ฟอร์ม ---------- */
body.fx3 .cf input,body.fx3 .cf textarea,body.fx3 .nlf input{border-radius:var(--rs);transition:border-color .25s,box-shadow .25s}
body.fx3 .cf input:focus,body.fx3 .cf textarea:focus,body.fx3 .nlf input:focus{outline:0;border-color:var(--c2);box-shadow:0 0 0 4px color-mix(in srgb,var(--c2) 22%,transparent)}

/* ---------- Footer ---------- */
body.fx3 footer{position:relative;background:linear-gradient(180deg,var(--c1),color-mix(in srgb,var(--c1) 78%,#000))}
body.fx3 footer:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c2) 80%,transparent),transparent)}
body.fx3 .soc a{background:#ffffff0f;border-color:#ffffff2e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--gl-hi);transition:transform .35s var(--ease),background .3s,border-color .3s}
body.fx3 .soc a:hover{background:var(--c2);border-color:var(--c2);transform:translateY(-3px)}
body.fx3 .copy{border-top:1px solid #ffffff14}

/* ---------- ปุ่มลอย / ป๊อปอัพ / คุกกี้ ---------- */
body.fx3 .fab a,body.fx3 .fab button{box-shadow:0 10px 26px -8px #0008,var(--gl-hi);border:1px solid #ffffff38}
body.fx3 .pop .box{border-radius:var(--rr);overflow:hidden}
body.fx3 #ck{border-radius:18px;background:color-mix(in srgb,#141210 78%,transparent);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid #ffffff1f;box-shadow:0 24px 50px -18px #000a,var(--gl-hi)}
body.fx3 #ck .btn{margin-top:0}
body.fx3 .lb button{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #ffffff33}

/* ---------- การเข้าถึง: ลดความโปร่งใส / ลดการเคลื่อนไหว ---------- */
@media (prefers-reduced-transparency:reduce){
  body.fx3 .nav.sc,body.fx3.nav-solid .nav,body.fx3 .bkf,body.fx3 #ck,body.fx3 .menu:before{-webkit-backdrop-filter:none;backdrop-filter:none}
  body.fx3 .nav.sc,body.fx3.nav-solid .nav{background:var(--c1)!important}
  body.fx3 .bkf{background:var(--card)}body.fx3 #ck{background:#1b1816}
}
@media (prefers-reduced-motion:reduce){
  body.fx3 .btn:before{display:none}
  body.fx3 .stay,body.fx3 .card,body.fx3 .bkc-i,body.fx3 .card img{transition:none}
  body.fx3 .stay:hover,body.fx3 .card:hover,body.fx3 .bkc-i:hover{transform:none}
}
html.no-webgl [data-fx]>.fx-host{display:none}
/* ข้อความบนพื้น ShaderGradient: ขาวล้วน + ม่านมืดกลางภาพเพื่อความคมชัด (contrast ≥ 4.5:1) */
body.fx3 .cband[data-fx]:after,body.fx3 .stats[data-fx]:after{background:radial-gradient(60% 75% at 50% 50%,#00000073,#0000 75%),linear-gradient(180deg,#00000040,#0000 30%,#0000 70%,#00000040)}
body.fx3 [data-fx] .big2{color:#fff}
body.fx3 [data-fx] .eb,body.fx3 [data-fx] .sh>small:first-child{color:#fff;background:#ffffff1a;border-color:#ffffff38}
body.fx3 [data-fx] .eb:before,body.fx3 [data-fx] .sh>small:first-child:before{background:var(--c2);box-shadow:0 0 0 3px #ffffff26}
body.fx3 .stats[data-fx] .st i{color:#fff}