/*
Theme Name: QuickSite
Description: ธีม block เบา สดใหม่ ไม่มี pattern ติดมา — โครงเปล่าไว้สร้างเองทั้งหมด ปรับสี/ฟอนต์/footer ได้จากปลั๊กอิน WP Quick-Setup
Version: 2.27.0
Requires at least: 6.1
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: quicksite
*/

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&display=swap');

.wp-block-button__link { transition: background-color .15s ease; }
img { height: auto; }

/* footer: ใช้กับ shortcode [qs_footer] */
footer .wp-block-shortcode { text-align: center; }
footer .qs-footer { color: #ffffff; font-size: .95rem; }
footer .qs-footer a { color: #ffffff; text-decoration: underline; }
footer .qs-footer a:hover { opacity: .8; }

/* อัพโลโก้แล้วให้โลโก้แทนชื่อเว็บอัตโนมัติ */
.wp-custom-logo header .wp-block-site-title { display: none; }
.wp-block-site-logo img { height: auto; }

/* ===== Header: ฐาน (ทุกแบบใช้ร่วม) ===== */
.qs-header{ border-bottom: 1px solid rgba(127,127,127,.14); }
.qs-header .wp-block-site-title a{ text-decoration: none; font-weight: 700; }
.qs-header-right{ gap: 1.2rem; }
.qs-header .wp-block-navigation{ font-weight: 500; }
.qs-header .wp-block-button__link{ padding: .5rem 1.1rem; font-size: .95rem; }
/* ปุ่ม CTA หัวเว็บ (shortcode [qs_cta]) — เดี่ยว/คู่ จัดระยะไม่ให้ล้น */
.qs-cta{ display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: 0; }
.qs-cta .wp-block-button{ margin: 0; }
/* ปุ่ม "เข้าสู่ระบบ" = outline จริง: พื้นโปร่ง + เส้นขอบสีหลัก + ตัวอักษรสี contrast
   (ใช้ contrast เพราะเป็นคู่สีตัวอักษรที่ออกแบบให้อ่านชัดบนพื้น base ทุกธีม — กันจาง/จม) */
.qs-cta .qs-cta-login .wp-block-button__link{
	background-color: transparent !important;
	background-image: none !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 2px solid var(--wp--preset--color--primary) !important;
}
.qs-cta .qs-cta-login .wp-block-button__link:hover{
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent) !important;
	color: var(--wp--preset--color--contrast) !important;
}
@media (max-width:600px){ .qs-cta .wp-block-button__link{ padding: .42rem .8rem; font-size: .85rem; } }

/* ===== Header: พฤติกรรมติดหน้าจอ =====
   สำคัญ: WordPress ห่อหัวเว็บไว้ใน <header class="wp-block-template-part"> อีกชั้น
   ต้อง sticky ที่ "ตัวห่อชั้นนอก" (ลูกของ .wp-site-blocks สูงเท่าทั้งหน้า)
   ไม่งั้น containing-block จะสั้นเท่าหัวเว็บ แล้วหลุดตามตอนเลื่อน
   คลาส qs-sticky* บนชั้นในเป็นแค่ "ป้ายบอกชนิด" ให้ :has() จับ */
.qs-sticky, .qs-sticky-mobile, .qs-sticky-smart{ position: static; }

.wp-site-blocks > .wp-block-template-part:has(> .qs-sticky),
.wp-site-blocks > .wp-block-template-part:has(> .qs-sticky-smart){ position: sticky; top: 0; z-index: 9990; }
.wp-site-blocks > .wp-block-template-part:has(> .qs-sticky-smart){ transition: transform .35s ease; will-change: transform; }
.wp-site-blocks > .wp-block-template-part.qs-hide{ transform: translateY(-130%); }
/* เฉพาะมือถือ */
@media (max-width:781px){
  .wp-site-blocks > .wp-block-template-part:has(> .qs-sticky-mobile){ position: sticky; top: 0; z-index: 9990; }
}
/* ชดเชยแถบ admin (เฉพาะตอนล็อกอิน) */
body.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .qs-sticky),
body.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .qs-sticky-smart){ top: 32px; }
@media (max-width:782px){
  body.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .qs-sticky),
  body.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .qs-sticky-mobile),
  body.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .qs-sticky-smart){ top: 46px; }
}

/* ===== หัวเว็บ: คุมจาก Quick-Setup (ติ๊กเลือกทั้งเว็บ) — ทับค่าในแพทเทิร์น (ยิงที่ตัวห่อ) ===== */
body.qs-head-off    .wp-site-blocks > .wp-block-template-part:has(> .qs-header){ position: static !important; }
body.qs-head-always .wp-site-blocks > .wp-block-template-part:has(> .qs-header){ position: sticky !important; top: 0 !important; z-index: 9990; }
body.qs-head-always .wp-site-blocks > .wp-block-template-part.qs-hide{ transform: none !important; }
body.qs-head-smart  .wp-site-blocks > .wp-block-template-part:has(> .qs-header){ position: sticky !important; top: 0 !important; z-index: 9990; transition: transform .35s ease; }
body.qs-head-mobile .wp-site-blocks > .wp-block-template-part:has(> .qs-header){ position: static !important; }
@media (max-width:781px){ body.qs-head-mobile .wp-site-blocks > .wp-block-template-part:has(> .qs-header){ position: sticky !important; top: 0 !important; z-index: 9990; } }
body.admin-bar.qs-head-always .wp-site-blocks > .wp-block-template-part:has(> .qs-header),
body.admin-bar.qs-head-smart  .wp-site-blocks > .wp-block-template-part:has(> .qs-header){ top: 32px !important; }
@media (max-width:782px){
  body.admin-bar.qs-head-always .wp-site-blocks > .wp-block-template-part:has(> .qs-header),
  body.admin-bar.qs-head-smart  .wp-site-blocks > .wp-block-template-part:has(> .qs-header),
  body.admin-bar.qs-head-mobile .wp-site-blocks > .wp-block-template-part:has(> .qs-header){ top: 46px !important; }
}
/* เงาเด่นขึ้นเมื่อเริ่มเลื่อน (ใช้คู่ qs-header.js) */
.qs-shadow-scroll{ box-shadow: none; transition: box-shadow .25s ease; }
.qs-shadow-scroll.is-scrolled{ box-shadow: 0 6px 24px rgba(15,23,42,.10); }
/* เงานิ่ง ๆ ตลอด */
.qs-shadow{ box-shadow: 0 2px 12px rgba(15,23,42,.05); }

/* ===== Header: เอฟเฟกต์ hover เมนู (คอม + มือถือ) — ใส่คลาสที่ <header> ===== */
/* ขีดเส้นใต้ขยายจากกลาง */
.qs-nav-underline .wp-block-navigation-item__content{ position: relative; }
.qs-nav-underline .wp-block-navigation-item__content::after{
  content:""; position:absolute; left:50%; right:50%; bottom:-3px; height:2px;
  background:currentColor; transition:left .2s ease, right .2s ease;
}
.qs-nav-underline .wp-block-navigation-item:hover .wp-block-navigation-item__content::after{ left:0; right:0; }
/* พิลล์พื้นหลังเมื่อชี้ */
.qs-nav-pill .wp-block-navigation-item__content{ padding:.35rem .85rem; border-radius:999px; transition:background-color .2s ease; }
.qs-nav-pill .wp-block-navigation-item:hover .wp-block-navigation-item__content{ background:rgba(127,127,127,.16); }
/* ยกขึ้น + ทึบเข้มเมื่อชี้ */
.qs-nav-lift .wp-block-navigation-item__content{ transition:transform .15s ease, opacity .15s ease; opacity:.82; }
.qs-nav-lift .wp-block-navigation-item:hover .wp-block-navigation-item__content{ transform:translateY(-2px); opacity:1; }

/* เส้นใต้เมนู "เล่นสีได้" — ดึงสีจากชุดธีม (เปลี่ยนตาม Style Variation) */
.qs-nav-underline-primary .wp-block-navigation-item__content,
.qs-nav-underline-accent .wp-block-navigation-item__content,
.qs-nav-underline-thick .wp-block-navigation-item__content{ position: relative; }
.qs-nav-underline-primary .wp-block-navigation-item__content::after,
.qs-nav-underline-accent .wp-block-navigation-item__content::after,
.qs-nav-underline-thick .wp-block-navigation-item__content::after{
  content:""; position:absolute; left:50%; right:50%; bottom:-3px; height:2px;
  background:currentColor; transition:left .2s ease, right .2s ease;
}
.qs-nav-underline-primary .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.qs-nav-underline-accent .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.qs-nav-underline-thick .wp-block-navigation-item:hover .wp-block-navigation-item__content::after{ left:0; right:0; }
.qs-nav-underline-primary .wp-block-navigation-item__content::after{ background: var(--wp--preset--color--primary); }
.qs-nav-underline-accent  .wp-block-navigation-item__content::after{ background: var(--wp--preset--color--accent); }
.qs-nav-underline-thick   .wp-block-navigation-item__content::after{ height:3px; background: var(--wp--preset--color--primary); }
/* เส้นใต้แบบโชว์ตลอด (ไม่ต้อง hover) — เมนูที่ active/ทุกตัวมีขีดสี */
.qs-nav-line .wp-block-navigation-item__content{ position:relative; padding-bottom:3px; border-bottom:2px solid transparent; transition:border-color .2s ease; }
.qs-nav-line .wp-block-navigation-item:hover .wp-block-navigation-item__content{ border-bottom-color: var(--wp--preset--color--primary); }
/* ===== เอฟเฟกต์เมนู คุมทั้งเว็บผ่าน body class (ตั้ง/สุ่มจาก Quick-Setup) ===== */
body[class*="qs-menu-u"] .wp-block-navigation-item__content{ position:relative; }
body[class*="qs-menu-u"] .wp-block-navigation-item__content::after{ content:""; position:absolute; left:50%; right:50%; bottom:-2px; height:2px; transition:left .2s ease,right .2s ease; }
body.qs-menu-underline .wp-block-navigation-item__content::after{ background:currentColor; }
body.qs-menu-uprimary .wp-block-navigation-item__content::after{ background:var(--wp--preset--color--primary); }
body.qs-menu-uaccent  .wp-block-navigation-item__content::after{ background:var(--wp--preset--color--accent); }
body[class*="qs-menu-u"] .wp-block-navigation-item:hover .wp-block-navigation-item__content::after{ left:0; right:0; }
body.qs-menu-pill .wp-block-navigation-item__content{ padding:.35rem .85rem; border-radius:999px; transition:background-color .2s ease; }
body.qs-menu-pill .wp-block-navigation-item:hover .wp-block-navigation-item__content{ background:color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent); }
body.qs-menu-lift .wp-block-navigation-item__content{ transition:transform .15s ease,opacity .15s ease; opacity:.84; }
body.qs-menu-lift .wp-block-navigation-item:hover .wp-block-navigation-item__content{ transform:translateY(-2px); opacity:1; }
body.qs-menu-line .wp-block-navigation-item__content{ padding-bottom:3px; border-bottom:2px solid transparent; transition:border-color .2s ease; }
body.qs-menu-line .wp-block-navigation-item:hover .wp-block-navigation-item__content{ border-bottom-color:var(--wp--preset--color--accent); }

/* แถบประกาศบนหัว (top bar) */
.qs-topbar{ font-size:.85rem; }
.qs-topbar a{ text-decoration:underline; }
.qs-topbar p{ margin:0; }
/* แถบประกาศสีหลัก (ใช้กับ topbar/bottombar) — พื้นสีหลัก ตัวอักษรสว่าง ตามธีม */
.qs-bar-accent{ font-size:.85rem; }
.qs-bar-accent p{ margin:0; }
.qs-bar-accent a{ text-decoration:underline; }
/* แถบประกาศล่าง (ใต้แถวหลักของหัวเว็บ) */
.qs-bottombar{ font-size:.85rem; border-top:1px solid rgba(127,127,127,.14); }
.qs-bottombar p{ margin:0; }
.qs-bottombar a{ text-decoration:underline; }
/* เส้นสีใต้หัวเว็บ (accent border) — เล่นสีเส้นขอบล่างหัวเว็บ */
.qs-bordered{ border-bottom:3px solid var(--wp--preset--color--primary) !important; }
.qs-bordered-accent{ border-bottom:3px solid var(--wp--preset--color--accent) !important; }

/* ===== แก้บั๊ก: overlay เมนูมือถือถูกขังในกล่อง Header (ไม่เต็มจอ off-canvas) =====
   สาเหตุ: กล่องหัวเว็บ .wp-block-template-part มี will-change:transform จากระบบ sticky/smart-hide
   → มันกลายเป็น containing block ทำให้ position:fixed ของ overlay ไปยึดกับกล่อง header แทนหน้าจอ
   แก้: ขณะเมนูเปิด ปลด transform/will-change ของหัวเว็บชั่วคราว → overlay หลุดเป็น fixed เต็มจอจริง */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-site-blocks > .wp-block-template-part{
  transform: none !important;
  will-change: auto !important;
  transition: none !important;
}

/* ===== เมนูมือถือ (overlay เปิด) ให้เต็มจอ มีระยะขอบ ไม่ตกขอบ ===== */
.wp-block-navigation__responsive-container.is-menu-open{
  padding: 4.5rem 1.5rem 2rem !important;      /* เว้นบนให้พ้นปุ่มปิด + เว้นขอบซ้ายขวา */
}
/* สีเมนู overlay ตามชุดธีม (พื้น = base, ตัวอักษร = contrast) แทนขาว-ดำตายตัว */
.wp-block-navigation__responsive-container.is-menu-open{
  background-color: var(--wp--preset--color--base) !important;
  color: var(--wp--preset--color--contrast) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  color: var(--wp--preset--color--contrast) !important;
}
/* หัวเว็บโทนเข้ม/ไล่สี (ตัวอักษรสว่าง = has-base-color) → เมนูเข้มตาม (พื้น = contrast, ตัวอักษร = base) */
.qs-header.has-base-color .wp-block-navigation__responsive-container.is-menu-open{
  background-color: var(--wp--preset--color--contrast) !important;
  color: var(--wp--preset--color--base) !important;
}
.qs-header.has-base-color .wp-block-navigation__responsive-container.is-menu-open a,
.qs-header.has-base-color .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.qs-header.has-base-color .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  color: var(--wp--preset--color--base) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  align-items: flex-start;     /* เมนูชิดซ้ายแบบมีระยะขอบ ไม่แปะขอบจอ */
  gap: .25rem;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display: block;
  padding: .55rem 0;
  font-size: 1.1rem;
}

/* ===== หัวเว็บบนมือถือ: จัดให้เรียบ ไม่เบียด/ไม่ล้น ===== */
@media (max-width: 600px){
  .qs-hide-mobile{ display: none !important; }          /* ซ่อนข้อความ LINE/เบอร์ + ช่องค้นหาในหัวเว็บ */
  /* ซ่อนตรงโครงสร้างด้วย — มีผลกับหัวเว็บที่วางไปก่อนหน้านี้ทันที ไม่ต้องวางใหม่ */
  .qs-header .wp-block-search{ display: none !important; }   /* ช่องค้นหาในหัวเว็บ */
  .qs-header-right > p{ display: none !important; }          /* ข้อความ LINE/เบอร์ข้างปุ่ม */
  .qs-header .alignwide{ gap: .4rem; }
  .qs-header-right{ gap: .5rem; }
  .qs-header .wp-block-site-logo img{ max-width: 120px; }
  .qs-header .wp-block-site-title{ font-size: 1.1rem; }
  .qs-header .wp-block-button__link{ padding: .42rem .8rem; font-size: .82rem; }  /* ปุ่ม CTA พอดีจอ */
  .qs-navpill-box{ background: transparent; padding: 0; }  /* พิลล์รอบแฮมเบอร์เกอร์ดูแปลก → เอาออก */
  .qs-topbar p{ font-size: .76rem; }                       /* แถบประกาศ พออ่าน ไม่สูงเกิน */
  .qs-header-main .alignwide{ gap: .4rem; }
  /* แบบ 2 ชั้น/แบนเนอร์: กันโลโก้ใหญ่เกินบนจอเล็ก */
  .qs-header .wp-block-site-logo{ flex: 0 0 auto; }
}

/* ===== Footer (4 คอลัมน์ + แถบลิขสิทธิ์) ===== */
.qs-footer-wrap .wp-block-heading{ color:#ffffff; margin-bottom:.6rem; }
.qs-footer-wrap p, .qs-footer-wrap li{ color:#cbd5e1; margin:.25rem 0; }
.qs-footer-wrap a{ color:#cbd5e1; text-decoration:none; }
.qs-footer-wrap a:hover{ color:#ffffff; text-decoration:underline; }
.qs-footer-wrap .wp-block-separator{ border-color:#ffffff; opacity:.15; margin:1.6rem 0 1.1rem; }
.qs-footer-wrap .wp-block-shortcode{ text-align:center; }

/* ===== การ์ด (ใช้ใน pattern — กัน invalid block จาก inline border) ===== */
/* ===== ตัวกำหนดกลาง (design tokens) — แก้ที่เดียว เปลี่ยนทั้งเว็บ =====
   ค่าเริ่มต้น = ชุดผิว "นุ่ม (soft)" · ชุดผิวอื่นด้านล่าง override ค่าพวกนี้
   สี/เงา ดึงจาก palette → สลับ Style Variation แล้วเปลี่ยนตามอัตโนมัติ */
:root{
  --qs-radius: 14px;
  --qs-shadow: 0 6px 20px rgba(15,23,42,.06);
  --qs-border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
  --qs-surface: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, var(--wp--preset--color--base));
  --qs-section-pad: 3rem;
  --qs-gap: 1.2rem;
}
/* การ์ด/พื้นผิว ดูดค่าจาก token ทั้งหมด — เลิกฮาร์ดโค้ดในแพทเทิร์น */
.qs-card{ background:var(--qs-surface); border:var(--qs-border); border-radius:var(--qs-radius); box-shadow:var(--qs-shadow); padding:18px 16px; }
.qs-surface{ background:var(--qs-surface); border:var(--qs-border); border-radius:var(--qs-radius); box-shadow:var(--qs-shadow); }
.qs-section{ padding-top:var(--qs-section-pad); padding-bottom:var(--qs-section-pad); }

/* ===== ชุดผิว (skin) — เลือกจาก Quick-Setup หรือสุ่ม (ใส่คลาสที่ <body>) ===== */
/* แบน มินิมอล ไม่มีเงา/ขอบ */
body.qs-skin-flat{ --qs-radius:10px; --qs-shadow:none; --qs-border:0 solid transparent; --qs-surface:color-mix(in srgb, var(--wp--preset--color--contrast) 6%, var(--wp--preset--color--base)); }
/* เส้นขอบบาง ไม่มีเงา พื้นโปร่ง */
body.qs-skin-outline{ --qs-radius:12px; --qs-shadow:none; --qs-border:1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent); --qs-surface:transparent; }
/* เหลี่ยมคม โมเดิร์น */
body.qs-skin-sharp{ --qs-radius:0px; --qs-shadow:none; --qs-border:1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent); --qs-surface:color-mix(in srgb, var(--wp--preset--color--contrast) 4%, var(--wp--preset--color--base)); }
/* การ์ดเรืองแสงสีหลัก (สายเกม) */
body.qs-skin-glow{ --qs-radius:16px; --qs-border:1px solid color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent); --qs-shadow:0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent), 0 10px 28px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent); --qs-surface:color-mix(in srgb, var(--wp--preset--color--contrast) 6%, var(--wp--preset--color--base)); }

/* ===== ไอคอน SVG (เปลี่ยนสีด้วย currentColor — แก้สีตัวอักษรของกล่อง) ===== */
.qs-icon{ display:inline-flex; line-height:0; }
.qs-icon svg{ width:46px; height:46px; }
.qs-icon-wrap{ text-align:center; }

/* ===== แถวโลโก้/ไอคอน "เทา → มีสีเมื่อชี้" (ลุคน่าเชื่อถือ) ===== */
.qs-logowall{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:center; }
.qs-logowall .qs-icon svg, .qs-logowall img{ filter:grayscale(1); opacity:.55; transition:filter .25s, opacity .25s; }
.qs-logowall .qs-icon:hover svg, .qs-logowall a:hover .qs-icon svg, .qs-logowall img:hover{ filter:none; opacity:1; }
.qs-logowall .qs-icon svg{ width:54px; height:54px; }
.qs-logowall img{ max-height:48px; width:auto; }
/* กล่องรูป mockup เปล่า (ช่องวางโลโก้/รูป) */
.qs-ph{ background:#f1f5f9; border:1px dashed #cbd5e1; border-radius:12px; min-height:90px; display:flex; align-items:center; justify-content:center; color:#94a3b8; }
/* รูป placeholder — ล็อกสัดส่วนกัน layout ขยับ (แก้พรีวิว Inserter สั่น) */
.qs-ph-img img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border-radius:8px; background:#eef2f6; }
.qs-logowall .qs-ph-img img{ width:auto; height:48px; aspect-ratio:auto; border-radius:0; }
/* ไอคอนเป็นรูป (บล็อกรูป) */
.qs-icon-img img{ width:54px; height:54px; }
.qs-iconrow{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }
.qs-iconrow figure{ margin:0; }

/* ===== ไอคอนหมวดเกม "ปรับสีตามธีม" (CSS mask → เทสีจาก palette) ===== */
.qs-gico{ display:block; width:56px; height:56px; margin:0 auto;
  background-color: var(--wp--preset--color--primary);
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.qs-gico.qs-ico-accent{ background-color: var(--wp--preset--color--accent); }
.qs-gico.qs-ico-text{ background-color: currentColor; }
.qs-gi-slot{ -webkit-mask-image:url(assets/icons/icon-game-slot.png); mask-image:url(assets/icons/icon-game-slot.png); }
.qs-gi-cards{ -webkit-mask-image:url(assets/icons/icon-game-cards.png); mask-image:url(assets/icons/icon-game-cards.png); }
.qs-gi-football{ -webkit-mask-image:url(assets/icons/icon-game-football.png); mask-image:url(assets/icons/icon-game-football.png); }
.qs-gi-fish{ -webkit-mask-image:url(assets/icons/icon-game-fish.png); mask-image:url(assets/icons/icon-game-fish.png); }

/* ===== คลังไอคอน QuickSite (43 ตัว) ปรับสีตามธีมด้วยมาสก์ — ใช้คู่ .qs-gico ===== */
.qs-mi-icon-contact-chat{-webkit-mask-image:url(assets/icons/icon-contact-chat.png);mask-image:url(assets/icons/icon-contact-chat.png)}
.qs-mi-icon-contact-location{-webkit-mask-image:url(assets/icons/icon-contact-location.png);mask-image:url(assets/icons/icon-contact-location.png)}
.qs-mi-icon-contact-mail{-webkit-mask-image:url(assets/icons/icon-contact-mail.png);mask-image:url(assets/icons/icon-contact-mail.png)}
.qs-mi-icon-contact-phone{-webkit-mask-image:url(assets/icons/icon-contact-phone.png);mask-image:url(assets/icons/icon-contact-phone.png)}
.qs-mi-icon-contact-send{-webkit-mask-image:url(assets/icons/icon-contact-send.png);mask-image:url(assets/icons/icon-contact-send.png)}
.qs-mi-icon-device-desktop{-webkit-mask-image:url(assets/icons/icon-device-desktop.png);mask-image:url(assets/icons/icon-device-desktop.png)}
.qs-mi-icon-device-laptop{-webkit-mask-image:url(assets/icons/icon-device-laptop.png);mask-image:url(assets/icons/icon-device-laptop.png)}
.qs-mi-icon-device-mobile{-webkit-mask-image:url(assets/icons/icon-device-mobile.png);mask-image:url(assets/icons/icon-device-mobile.png)}
.qs-mi-icon-device-tablet{-webkit-mask-image:url(assets/icons/icon-device-tablet.png);mask-image:url(assets/icons/icon-device-tablet.png)}
.qs-mi-icon-finance-baht{-webkit-mask-image:url(assets/icons/icon-finance-baht.png);mask-image:url(assets/icons/icon-finance-baht.png)}
.qs-mi-icon-finance-bank{-webkit-mask-image:url(assets/icons/icon-finance-bank.png);mask-image:url(assets/icons/icon-finance-bank.png)}
.qs-mi-icon-finance-card{-webkit-mask-image:url(assets/icons/icon-finance-card.png);mask-image:url(assets/icons/icon-finance-card.png)}
.qs-mi-icon-finance-coin{-webkit-mask-image:url(assets/icons/icon-finance-coin.png);mask-image:url(assets/icons/icon-finance-coin.png)}
.qs-mi-icon-finance-deposit{-webkit-mask-image:url(assets/icons/icon-finance-deposit.png);mask-image:url(assets/icons/icon-finance-deposit.png)}
.qs-mi-icon-finance-growth{-webkit-mask-image:url(assets/icons/icon-finance-growth.png);mask-image:url(assets/icons/icon-finance-growth.png)}
.qs-mi-icon-finance-moneybag{-webkit-mask-image:url(assets/icons/icon-finance-moneybag.png);mask-image:url(assets/icons/icon-finance-moneybag.png)}
.qs-mi-icon-finance-wallet{-webkit-mask-image:url(assets/icons/icon-finance-wallet.png);mask-image:url(assets/icons/icon-finance-wallet.png)}
.qs-mi-icon-finance-withdraw{-webkit-mask-image:url(assets/icons/icon-finance-withdraw.png);mask-image:url(assets/icons/icon-finance-withdraw.png)}
.qs-mi-icon-game-cards{-webkit-mask-image:url(assets/icons/icon-game-cards.png);mask-image:url(assets/icons/icon-game-cards.png)}
.qs-mi-icon-game-diamond{-webkit-mask-image:url(assets/icons/icon-game-diamond.png);mask-image:url(assets/icons/icon-game-diamond.png)}
.qs-mi-icon-game-dice{-webkit-mask-image:url(assets/icons/icon-game-dice.png);mask-image:url(assets/icons/icon-game-dice.png)}
.qs-mi-icon-game-fish{-webkit-mask-image:url(assets/icons/icon-game-fish.png);mask-image:url(assets/icons/icon-game-fish.png)}
.qs-mi-icon-game-football{-webkit-mask-image:url(assets/icons/icon-game-football.png);mask-image:url(assets/icons/icon-game-football.png)}
.qs-mi-icon-game-heart{-webkit-mask-image:url(assets/icons/icon-game-heart.png);mask-image:url(assets/icons/icon-game-heart.png)}
.qs-mi-icon-game-roulette{-webkit-mask-image:url(assets/icons/icon-game-roulette.png);mask-image:url(assets/icons/icon-game-roulette.png)}
.qs-mi-icon-game-slot{-webkit-mask-image:url(assets/icons/icon-game-slot.png);mask-image:url(assets/icons/icon-game-slot.png)}
.qs-mi-icon-pay-auto{-webkit-mask-image:url(assets/icons/icon-pay-auto.png);mask-image:url(assets/icons/icon-pay-auto.png)}
.qs-mi-icon-pay-mobile{-webkit-mask-image:url(assets/icons/icon-pay-mobile.png);mask-image:url(assets/icons/icon-pay-mobile.png)}
.qs-mi-icon-pay-qr{-webkit-mask-image:url(assets/icons/icon-pay-qr.png);mask-image:url(assets/icons/icon-pay-qr.png)}
.qs-mi-icon-pay-transfer{-webkit-mask-image:url(assets/icons/icon-pay-transfer.png);mask-image:url(assets/icons/icon-pay-transfer.png)}
.qs-mi-icon-promo-fire{-webkit-mask-image:url(assets/icons/icon-promo-fire.png);mask-image:url(assets/icons/icon-promo-fire.png)}
.qs-mi-icon-promo-gift{-webkit-mask-image:url(assets/icons/icon-promo-gift.png);mask-image:url(assets/icons/icon-promo-gift.png)}
.qs-mi-icon-promo-percent{-webkit-mask-image:url(assets/icons/icon-promo-percent.png);mask-image:url(assets/icons/icon-promo-percent.png)}
.qs-mi-icon-promo-refer{-webkit-mask-image:url(assets/icons/icon-promo-refer.png);mask-image:url(assets/icons/icon-promo-refer.png)}
.qs-mi-icon-promo-ticket{-webkit-mask-image:url(assets/icons/icon-promo-ticket.png);mask-image:url(assets/icons/icon-promo-ticket.png)}
.qs-mi-icon-service-bolt{-webkit-mask-image:url(assets/icons/icon-service-bolt.png);mask-image:url(assets/icons/icon-service-bolt.png)}
.qs-mi-icon-service-clock{-webkit-mask-image:url(assets/icons/icon-service-clock.png);mask-image:url(assets/icons/icon-service-clock.png)}
.qs-mi-icon-service-crown{-webkit-mask-image:url(assets/icons/icon-service-crown.png);mask-image:url(assets/icons/icon-service-crown.png)}
.qs-mi-icon-service-headset{-webkit-mask-image:url(assets/icons/icon-service-headset.png);mask-image:url(assets/icons/icon-service-headset.png)}
.qs-mi-icon-service-shield{-webkit-mask-image:url(assets/icons/icon-service-shield.png);mask-image:url(assets/icons/icon-service-shield.png)}
.qs-mi-icon-service-star{-webkit-mask-image:url(assets/icons/icon-service-star.png);mask-image:url(assets/icons/icon-service-star.png)}
.qs-mi-icon-service-trophy{-webkit-mask-image:url(assets/icons/icon-service-trophy.png);mask-image:url(assets/icons/icon-service-trophy.png)}
.qs-mi-icon-service-verified{-webkit-mask-image:url(assets/icons/icon-service-verified.png);mask-image:url(assets/icons/icon-service-verified.png)}

/* ===== Footer: แบบกลมกลืนสีธีม (พื้นเดียวกับเว็บ + เส้นคั่นบน) ===== */
.qs-footer-light{ border-top:1px solid rgba(127,127,127,.16); }
.qs-footer-light .wp-block-heading{ margin-bottom:.6rem; }
.qs-footer-light p, .qs-footer-light li{ margin:.25rem 0; opacity:.85; }
.qs-footer-light a{ text-decoration:none; opacity:.85; }
.qs-footer-light a:hover{ opacity:1; text-decoration:underline; }
.qs-footer-light .wp-block-separator{ opacity:.12; margin:1.4rem 0 1rem; }

/* ===== Footer "สลับสีตามธีม" (invert: พื้น=ตัวอักษรธีม / อักษร=พื้นธีม) — recolor อัตโนมัติ =====
   ใช้คู่กับ backgroundColor:"contrast" textColor:"base" ในแพทเทิร์น */
/* invert footer = ดำลึกอมสีหลักของธีม "เสมอ" (ธีมเข้มก็เข้ม ธีมสว่างก็เข้ม) — ไม่จืด เปลี่ยนเฉพาะโทน/ลิงก์ตามธีม */
.qs-footer-invert{ background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, #0b0b12) !important; color:#e9e9ee !important; }
.qs-footer-invert .wp-block-heading{ color:#ffffff; margin-bottom:.6rem; }
.qs-footer-invert p, .qs-footer-invert li{ margin:.25rem 0; color:rgba(255,255,255,.74); }
.qs-footer-invert a{ color:rgba(255,255,255,.82); text-decoration:none; }
.qs-footer-invert a:hover{ color:var(--wp--preset--color--accent); text-decoration:underline; }
.qs-footer-invert .wp-block-site-title a{ color:#ffffff; }
.qs-footer-invert .wp-block-separator{ border-color:#ffffff; opacity:.16; margin:1.5rem 0 1.1rem; }

/* footer พื้นสีหลักเต็ม (โดดเด่น) — ตัวอักษรใช้ base ของธีม (อ่านออกตามที่ตรวจ ≥3.4) */
.qs-footer-primary .wp-block-heading{ color: inherit; margin-bottom:.6rem; }
.qs-footer-primary p, .qs-footer-primary li{ margin:.25rem 0; opacity:.92; }
.qs-footer-primary a{ color: inherit; text-decoration:none; }
.qs-footer-primary a:hover{ text-decoration:underline; }
.qs-footer-primary .wp-block-site-title a{ color: inherit; }
.qs-footer-primary .wp-block-separator{ border-color: currentColor; opacity:.25; margin:1.5rem 0 1.1rem; }

/* ตำแหน่งข้อความลิขสิทธิ์ [qs_footer] — เลือก/สุ่ม ซ้าย/กลาง/ขวา (ค่าเริ่มต้น=กลาง) */
footer .qs-footer{ display:block; text-align:center; }
body.qs-foot-align-left footer .qs-footer{ text-align:left !important; }
body.qs-foot-align-right footer .qs-footer{ text-align:right !important; }
/* Footer "เข้มลึก" — ดำตลอด (อ่านง่ายชัวร์) แต่อมโทนสีหลักของธีม + ลิงก์ hover สีรอง */
.qs-footer-deep{ background: color-mix(in srgb, var(--wp--preset--color--primary) 16%, #0a0a10); color:#e9e9ee; }
.qs-footer-deep .wp-block-heading{ color:#ffffff; margin-bottom:.6rem; }
.qs-footer-deep p, .qs-footer-deep li{ color: rgba(255,255,255,.72); margin:.25rem 0; }
.qs-footer-deep a{ color: rgba(255,255,255,.82); text-decoration:none; }
.qs-footer-deep a:hover{ color: var(--wp--preset--color--accent); text-decoration:underline; }
.qs-footer-deep .wp-block-separator{ border-color:#ffffff; opacity:.14; margin:1.5rem 0 1.1rem; }
.qs-footer-deep .wp-block-site-title a{ color:#ffffff; }
/* Footer "นุ่มสว่าง" — พื้นเดียวกับเว็บ + แถบสีหลักด้านบน (recolor) */
.qs-footer-soft{ border-top:3px solid var(--wp--preset--color--primary); }
.qs-footer-soft .wp-block-heading{ margin-bottom:.6rem; }
.qs-footer-soft p, .qs-footer-soft li{ margin:.25rem 0; opacity:.85; }
.qs-footer-soft a{ text-decoration:none; opacity:.85; }
.qs-footer-soft a:hover{ opacity:1; color: var(--wp--preset--color--primary); text-decoration:underline; }
.qs-footer-soft .wp-block-separator{ opacity:.12; margin:1.4rem 0 1rem; }

/* แถวไอคอน "รองรับ..." (เบราว์เซอร์/ธนาคาร/อุปกรณ์/ความปลอดภัย) ในฟุตเตอร์ */
.qs-foot-icons{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.qs-foot-icons figure{ margin:0; }
.qs-foot-icons img{ height:30px; width:auto; }
.qs-foot-icons.qs-center{ justify-content:center; }
/* แถวป้ายน่าเชื่อถือ (มีไอคอน+ข้อความ) */
.qs-trust-row{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.qs-trust-row .qs-trust{ display:flex; align-items:center; gap:8px; opacity:.9; }
.qs-trust-row .qs-trust img{ height:26px; width:auto; }

/* โลโก้ใน footer */
.qs-footer-logo img, .qs-footer-wrap .wp-block-site-logo img{ max-height:46px; width:auto; }
.qs-footer-wrap .wp-block-site-title a{ color:#fff; text-decoration:none; }
/* อัปโลโก้แล้ว → footer โชว์โลโก้อย่างเดียว (ซ่อนชื่อเว็บที่เป็นตัวอักษร เหมือน header) */
.wp-custom-logo .qs-footer-wrap .wp-block-site-title,
.wp-custom-logo .qs-footer-light .wp-block-site-title,
.wp-custom-logo .qs-footer-invert .wp-block-site-title{ display:none; }

/* แถวไอคอนโซเชียลใน footer */
.qs-social-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.qs-social-row figure{ margin:0; }
.qs-social-row img{ width:30px; height:30px; transition:transform .15s ease, opacity .15s ease; opacity:.9; }
.qs-social-row a:hover img, .qs-social-row img:hover{ transform:translateY(-2px); opacity:1; }
.qs-social-center .qs-social-row{ justify-content:center; }

/* แถบ CTA เหนือ footer */
.qs-footer-cta{ text-align:center; }

/* ===== ลุคหัวเว็บเพิ่มเติม ===== */
/* กระจกฝ้า (โปร่งแสง+เบลอ) — ใช้สี base ของธีม → กลืนทั้งธีมเข้ม/สว่าง (ตัวอักษร contrast อ่านออกเสมอ) */
.qs-glass{ background:color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent); }
/* กล่องเมนูพิลล์ลอย */
.qs-navpill-box{ background:rgba(127,127,127,.10); border-radius:999px; padding:.25rem .6rem; }
/* ช่องค้นหาในหัวเว็บ */
.qs-header .wp-block-search{ margin:0; }
.qs-header .wp-block-search .wp-block-search__input{ padding:.45rem .85rem; border-radius:999px; border:1px solid rgba(127,127,127,.25); min-width:160px; }
.qs-header .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper{ border-radius:999px; }
/* หัวเว็บไล่สี: ลิงก์/ปุ่มให้อ่านง่ายบนพื้นไล่สี */
.qs-header.has-background .wp-block-navigation a{ color:inherit; }
/* แถวเมนูชั้นล่าง (header แบบ 2 ชั้น) */
.qs-navbar{ border-top:1px solid rgba(255,255,255,.08); }

/* ===== ส่วนท้ายเพิ่มเติม ===== */
/* แถบโซเชียลเด่นเต็มกว้าง */
.qs-social-bar .qs-social-row img{ width:34px; height:34px; }
/* กล่องดาวน์โหลด/QR — ขนาดมาจาก block (กันเบี้ยว) */
.qs-qr img{ background:#fff; padding:6px; border-radius:10px; height:auto; }
/* ข้อความกำกับ/disclaimer */
.qs-disclaimer p{ font-size:.78rem; opacity:.65; line-height:1.6; }

/* ===== เมนูล่างมือถือ (Bottom Navigation / dock) — แสดงเฉพาะมือถือ ===== */
.qs-botbar{ display:none !important; }
@media (max-width:600px){
  .qs-botbar{
    display:flex !important; position:fixed; left:0; right:0; bottom:0; z-index:9980;
    gap:0; padding:6px 2px;
    background: color-mix(in srgb, var(--wp--preset--color--primary) 16%, #0a0a12);
    box-shadow:0 -2px 16px rgba(0,0,0,.28);
    transition: transform .35s ease; will-change: transform;
  }
  .qs-botbar.qs-hide{ transform: translateY(125%); }      /* สมาท: เลื่อนลงซ่อน */
  body.admin-bar .qs-botbar{ /* แถบ admin อยู่บน ไม่กระทบล่าง */ }
  /* กันบาร์ทับเนื้อหาท้าย — ยืด "พื้น footer (สีเข้ม)" ลงไปเติม ไม่ให้เห็นแถบสีพื้นเว็บโผล่ */
  .wp-block-template-part:has(> .qs-botbar) > footer{ padding-bottom: 84px !important; }
  .wp-site-blocks:has(.qs-botbar) > .wp-block-template-part:last-child{ margin-bottom:0; }
  /* กรณีเมนูล่างฉีดระดับ body (จาก Quick-Setup) เป็นพี่น้องหลัง .wp-site-blocks → เผื่อที่กันบาร์ทับ */
  .wp-site-blocks:has(~ .qs-botbar){ padding-bottom: 70px; }
}
/* แต่ละช่อง */
.qs-botbar .qs-bi-tab{ flex:1 1 0; text-align:center; }
.qs-botbar .qs-bi-tab img{ width:24px !important; height:24px; }
.qs-botbar .qs-bi-tab p{ margin:0; font-size:11px; line-height:1.2; }
.qs-botbar .qs-bi-tab a{ color:#fff; text-decoration:none; opacity:.85; }
.qs-botbar .qs-bi-tab:hover a, .qs-botbar .qs-bi-tab:focus-within a{ opacity:1; color: var(--wp--preset--color--accent); }
/* ===== สไตล์เมนูล่าง (สุ่มได้): flat(เริ่มต้น)/pill/glass/bordered/gradient/bubble ===== */
@media (max-width:600px){
  .qs-botbar.qs-bs-pill{ left:10px; right:10px; bottom:10px; border-radius:18px; }
  .qs-botbar.qs-bs-glass{ background: color-mix(in srgb, var(--wp--preset--color--primary) 26%, rgba(8,8,16,.5)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .qs-botbar.qs-bs-bordered{ border-top: 2px solid var(--wp--preset--color--accent); }
  .qs-botbar.qs-bs-gradient{ background: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--primary) 72%, #0a0a12), color-mix(in srgb, var(--wp--preset--color--accent) 72%, #0a0a12)); }
  /* bubble: ยกปุ่มกลางเป็นวงกลมเด่น (ใช้กับ 3/5 คอลัมน์สวยสุด) */
  .qs-botbar.qs-bs-bubble{ overflow: visible; }
  .qs-botbar.qs-bs-bubble .qs-bi-mid a{ background: var(--wp--preset--color--primary); width:54px; height:54px; border-radius:50%; margin:-26px auto 0; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.4); opacity:1; }
  .qs-botbar.qs-bs-bubble .qs-bi-mid p{ display:none; }
}
/* ===== ลูกเล่นสายเกม ===== */
/* ป้าย LIVE จุดกะพริบ */
.qs-livedot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:#ef4444; margin-right:6px; vertical-align:middle; box-shadow:0 0 0 0 rgba(239,68,68,.6); animation:qs-pulse 1.6s infinite; }
@keyframes qs-pulse{ 0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)} 70%{box-shadow:0 0 0 8px rgba(239,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }
/* ป้ายพิลล์ (LIVE/HOT/VIP) */
.qs-badge{ display:inline-block; padding:.15rem .7rem; border-radius:999px; font-size:.78rem; font-weight:600; background:var(--wp--preset--color--primary); color:#fff; }
.qs-badge p{ margin:0; }
/* แถวสถิติ (สมาชิกออนไลน์/ยอดจ่าย) */
.qs-stat{ text-align:center; }
.qs-stat .qs-stat-num{ font-weight:700; color:var(--wp--preset--color--accent); }
/* ปุ่มกลางเด่น (สมัคร/ฝาก) */
.qs-bi-bubble{ width:48px; height:48px; margin:-22px auto 0; border-radius:50%;
  background: var(--wp--preset--color--primary);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.35); }
.qs-bi-bubble img{ width:24px !important; height:24px; }
/* ในตัวแก้ไข (Site Editor) ให้เมนูล่างมือถือโผล่แบบ static จะได้คลิกแก้ไอคอน/ข้อความได้ (หน้าเว็บจริงยัง mobile-only) */
.editor-styles-wrapper .qs-botbar{ display:flex !important; position:static !important; transform:none !important; box-shadow:none; }
/* ปุ่มติดต่อลอย: ในตัวแก้ไข/พรีวิว ให้โชว์แบบ static (ไม่งั้นการ์ดพรีวิวว่างเปล่า หายาก) */
.editor-styles-wrapper .qs-float-contact{ position:static !important; right:auto !important; left:auto !important; bottom:auto !important; transform:none !important; opacity:1 !important; flex-direction:row !important; box-shadow:none; }
.editor-styles-wrapper .qs-float-collapsible .qs-float-btn{ display:block !important; }

/* ===== ปุ่มติดต่อลอยด้านข้าง (floating contact) — แทรกในส่วน Footer · สุ่มมี/ไม่มีได้ ===== */
.qs-float-contact{ position:fixed; right:14px; bottom:96px; z-index:9970; display:flex; flex-direction:column; gap:10px; }
.qs-float-contact .wp-block-image{ margin:0; }
.qs-float-contact img{ width:48px; height:48px; border-radius:50%; background:#fff; padding:7px; box-shadow:0 4px 14px rgba(0,0,0,.28); transition:transform .15s ease; }
.qs-float-contact a:hover img, .qs-float-contact img:hover{ transform:scale(1.1); }
@media (max-width:600px){ .qs-float-contact{ right:10px; bottom:84px; } .qs-float-contact img{ width:42px; height:42px; } }
/* ฝั่งซ้าย */
.qs-float-left{ left:14px; right:auto; }
@media (max-width:600px){ .qs-float-left{ left:10px; right:auto; } }
/* สมาท: เลื่อนลง=ซ่อน(เลื่อนออกข้าง) เลื่อนขึ้น=โผล่ (ใช้คู่ qs-header.js) */
.qs-float-smart{ transition: transform .35s ease, opacity .3s ease; }
.qs-float-smart.qs-hide{ transform: translateX(135%); opacity:0; pointer-events:none; }
.qs-float-left.qs-float-smart.qs-hide{ transform: translateX(-135%); }
/* แบบพับเก็บได้: ปุ่มหลัก (FAB) กดเพื่อกาง/ซ่อนปุ่มย่อย */
.qs-float-fab{ width:54px; height:54px; border-radius:50%; background:var(--wp--preset--color--primary); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.3); cursor:pointer; order:99; }
.qs-float-fab .qs-gico{ background-color:#fff; width:28px; height:28px; margin:0; }
@media (max-width:781px){
  .qs-float-collapsible .qs-float-btn{ display:none; }
  .qs-float-collapsible.qs-open .qs-float-btn{ display:block; animation:qs-pop .2s ease; }
}
@keyframes qs-pop{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }

/* ===== เส้นเรืองแสงมีสี (recolor) — ใส่ที่ header/footer · เปิด/ปิดได้ (toggle สำหรับระบบสุ่ม) ===== */
.qs-glow-top{ border-top:2px solid var(--wp--preset--color--primary); box-shadow:0 -4px 20px -6px color-mix(in srgb, var(--wp--preset--color--primary) 80%, transparent); }
.qs-glow-bottom{ border-bottom:2px solid var(--wp--preset--color--primary); box-shadow:0 4px 20px -6px color-mix(in srgb, var(--wp--preset--color--primary) 80%, transparent); }
.qs-glow-top-accent{ border-top:2px solid var(--wp--preset--color--accent); box-shadow:0 -4px 20px -6px color-mix(in srgb, var(--wp--preset--color--accent) 80%, transparent); }
.qs-glow-bottom-accent{ border-bottom:2px solid var(--wp--preset--color--accent); box-shadow:0 4px 20px -6px color-mix(in srgb, var(--wp--preset--color--accent) 80%, transparent); }

/* ===== แถบประกาศ: รูปแบบความกว้าง/ลูกเล่น (toggle สำหรับสุ่ม) ===== */
/* ตัววิ่ง (marquee) — สไตล์สายเกม · ชี้ค้างเพื่อหยุด */
.qs-marquee{ display:block !important; overflow:hidden; }
.qs-marquee p{ display:inline-block; white-space:nowrap; padding-left:100%; margin:0; animation:qs-marquee 22s linear infinite; }
.qs-marquee:hover p{ animation-play-state:paused; }
@keyframes qs-marquee{ 0%{ transform:translateX(0) } 100%{ transform:translateX(-100%) } }
@media (prefers-reduced-motion: reduce){ .qs-marquee p{ animation:none; padding-left:0; white-space:normal; } }
/* แถบประกาศ/แถบเมนู ให้เต็มขอบจอจริง — กันช่องว่างซ้าย-ขวาจาก root padding ของ WP */
.qs-topbar.alignfull:not(.qs-bar-pill):not(.qs-bar-wide),
.qs-bar-accent.alignfull:not(.qs-bar-pill):not(.qs-bar-wide),
.qs-bottombar.alignfull:not(.qs-bar-pill):not(.qs-bar-wide),
.qs-navbar.alignfull:not(.qs-bar-pill):not(.qs-bar-wide){
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw;
}
/* แถบพิลล์กลาง (ไม่เต็มจอ มุมมน) */
.qs-bar-pill{ max-width:1100px; margin-left:auto !important; margin-right:auto !important; border-radius:999px; margin-top:.55rem; }
/* แถบตามความกว้างเนื้อหา (ขอบมน) */
.qs-bar-wide{ max-width:1180px; margin-left:auto !important; margin-right:auto !important; border-radius:10px; margin-top:.5rem; }

/* ===== พื้นหลังเว็บ (Background FX) — CSS ล้วน ดึงสีจาก palette · ใส่ที่ <body> · เปลี่ยนตามธีม ===== */
/* ไล่สี: ฐานเข้ม → อมสีหลักด้านบน */
body.qs-bg-gradient{ background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--primary) 14%, var(--wp--preset--color--base)) 0%, var(--wp--preset--color--base) 55%) no-repeat; background-attachment: fixed; }
/* แสงเรือง (เนบิวลา) มุมบน — สายเกม/อวกาศ */
body.qs-bg-glow{ background:
   radial-gradient(60% 45% at 18% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 24%, transparent), transparent 70%),
   radial-gradient(50% 40% at 92% 8%, color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent), transparent 70%),
   var(--wp--preset--color--base); background-attachment: fixed; }
/* ออโรรา/เมช — หย่อมสีลอย พรีเมียม */
body.qs-bg-aurora{ background:
   radial-gradient(38% 38% at 12% 18%, color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent), transparent 70%),
   radial-gradient(40% 38% at 88% 30%, color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent), transparent 70%),
   radial-gradient(50% 45% at 50% 105%, color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent), transparent 70%),
   var(--wp--preset--color--base); background-attachment: fixed; }
/* VIP ทอง/แสงสีหลักกลางบน + ขอบเข้ม */
body.qs-bg-luxe{ background:
   radial-gradient(70% 50% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent), transparent 62%),
   radial-gradient(140% 120% at 50% 40%, transparent 60%, color-mix(in srgb, #000 35%, transparent)),
   var(--wp--preset--color--base); background-attachment: fixed; }
/* อวกาศ + ดาวกระจาย + เนบิวลา */
body.qs-bg-space{ background-color: var(--wp--preset--color--base);
   background-image:
     radial-gradient(1px 1px at 20% 30%, color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent), transparent),
     radial-gradient(1px 1px at 75% 55%, color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent), transparent),
     radial-gradient(1.5px 1.5px at 42% 78%, color-mix(in srgb, var(--wp--preset--color--accent) 65%, transparent), transparent),
     radial-gradient(1px 1px at 88% 80%, color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent), transparent),
     radial-gradient(60% 40% at 50% -8%, color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent), transparent 72%);
   background-attachment: fixed; }
/* ตารางจุด (tech/guardian) */
body.qs-bg-grid{ background-color: var(--wp--preset--color--base);
   background-image: radial-gradient(color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent) 1px, transparent 1px);
   background-size: 22px 22px; }
/* เส้นทแยงบาง ๆ */
body.qs-bg-stripes{ background: repeating-linear-gradient(45deg, var(--wp--preset--color--base), var(--wp--preset--color--base) 16px, color-mix(in srgb, var(--wp--preset--color--contrast) 4%, var(--wp--preset--color--base)) 16px, color-mix(in srgb, var(--wp--preset--color--contrast) 4%, var(--wp--preset--color--base)) 32px); }
/* ขอบเข้ม cinematic (vignette) */
body.qs-bg-vignette{ background: radial-gradient(120% 95% at 50% 0%, var(--wp--preset--color--base), color-mix(in srgb, #000 22%, var(--wp--preset--color--base)) 120%) no-repeat; background-attachment: fixed; }
/* มือถือ: ปิด fixed กันกระตุก */
@media (max-width:781px){ body[class*="qs-bg-"]{ background-attachment: scroll !important; } }
/* ให้พื้นหลัง FX ที่ <body> โชว์ทะลุ: ตัวห่อเนื้อหาต้องโปร่ง (ไม่ทับพื้นหลังธีม) */
.wp-site-blocks{ background: transparent !important; }

/* กล่อง CTA พื้นสีหลัก: บังคับหัวข้อใช้สี base ตามที่กล่องตั้งไว้
   (กันสีหัวข้อ global ของธีมมาทับจนตัวอักษรสว่างจมบนพื้นสีหลัก) — base-on-primary สมมาตรกับ primary-on-base ที่ audit ผ่าน ≥4.5 */
.has-primary-background-color.has-base-color :where(h1,h2,h3,h4,h5,h6){ color: var(--wp--preset--color--base) !important; }

/* ===== เลย์เอาต์ Sidebar (เนื้อหา + แถบข้าง) — เลือกใช้เฉพาะหน้า ===== */
@media (min-width:782px){
	/* sticky: แถบข้างเลื่อนตามจอ (เผื่อ header ~90px) */
	.qs-haside .qs-side.qs-side-sticky{ position: sticky; top: 90px; align-self: flex-start; }
	body.admin-bar .qs-haside .qs-side.qs-side-sticky{ top: 122px; }
}
@media (max-width:781px){
	/* มือถือ: เรียงต่อกัน ให้เนื้อหาหลักอยู่บนเสมอ แถบข้างลงล่าง */
	.qs-haside{ flex-direction: column; }
	.qs-haside .qs-main{ order: 1; }
	.qs-haside .qs-side{ order: 2; }
}
/* การ์ดในแถบข้างเว้นระยะสวยๆ */
.qs-side > *{ margin-top: 0; margin-bottom: 1rem; }
.qs-side > *:last-child{ margin-bottom: 0; }

/* ============================================================
   ⭐ เลย์เอาต์เต็มหน้า: สไลด์ / แบนเนอร์ / ฮีโร่ (เกม/สปอร์ต/คาสิโน)
   ============================================================ */

/* กัน scroll แนวนอนเกินจากแถบ full-bleed (100vw รวม scrollbar) — clip ที่ตัวห่อ
   ไม่ทำให้ body เป็น scroll container จึงไม่กระทบ sticky header / ปุ่มลอย fixed */
.wp-site-blocks{ overflow-x: clip; }

/* ---- social-proof: เลขแจ็คพอตวิ่ง ---- */
.qs-jackpot{ text-align: center; }
.qs-jackpot-num{
	display: inline-block; font-variant-numeric: tabular-nums; font-weight: 800;
	font-size: clamp(2rem, 7vw, 3.4rem); letter-spacing: .02em; line-height: 1.1;
	color: var(--wp--preset--color--accent);
	text-shadow: 0 0 18px color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}
/* ---- social-proof: ป๊อปอัปกิจกรรม (เด้งมุมล่างซ้าย) ---- */
.qs-social-toast{
	position: fixed; left: 14px; bottom: 16px; z-index: 9960;
	display: flex; gap: .6rem; align-items: center;
	max-width: min(330px, 86vw); padding: .7rem .9rem;
	border-radius: var(--qs-radius, 14px);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, var(--wp--preset--color--base));
	border: var(--qs-border, 1px solid rgba(127,127,127,.18));
	box-shadow: var(--qs-shadow, 0 8px 28px rgba(0,0,0,.16));
	transform: translateY(150%); opacity: 0; pointer-events: none;
	transition: transform .4s ease, opacity .4s ease;
}
.qs-social-toast.show{ transform: translateY(0); opacity: 1; }
.qs-social-toast .qs-st-ico{ font-size: 1.5rem; line-height: 1; flex: none; }
.qs-social-toast .qs-st-body{ display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.qs-social-toast .qs-st-title{ font-size: .8rem; color: var(--wp--preset--color--primary); }
.qs-social-toast .qs-st-text{ font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-social-toast .qs-st-time{ font-size: .7rem; opacity: .6; }
.qs-social-toast.qs-pos-right{ left: auto; right: 14px; }   /* ตำแหน่งขวาล่าง */
@media (max-width:600px){ .qs-social-toast{ bottom: 76px; left: 10px; max-width: 82vw; } /* เลี่ยงเมนูล่างมือถือ */
	.qs-social-toast.qs-pos-right{ right: 10px; left: auto; } }
/* ในตัวแก้ไข: โชว์นิ่งๆ ไม่ลอย */
.editor-styles-wrapper .qs-social-toast{ position: static !important; transform: none !important; opacity: 1 !important; }
/* ---- กล่องรายการสด (วิดเจ็ตในหน้า) ---- */
.qs-feed{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.qs-feed li{ display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, var(--wp--preset--color--base)); border: 1px solid rgba(127,127,127,.14); }
.qs-feed .qs-fd-ico{ font-size: 1.25rem; flex: none; line-height: 1; }
.qs-feed .qs-fd-body{ display: flex; flex-direction: column; min-width: 0; line-height: 1.25; flex: 1 1 auto; }
.qs-feed .qs-fd-text{ font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-feed .qs-fd-time{ font-size: .7rem; opacity: .6; }
/* ยอดเงิน: ฝาก=+เขียว ถอน=−แดง (ใช้สีเซแมนติกเฉพาะ "ตัวเลข" ไม่แตะสีธีม จะได้ไม่ตีกัน) · รางวัล=สีแอคเซนต์ธีม */
.qs-feed .qs-fd-amt{ margin-left: auto; padding-left: .5rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--wp--preset--color--accent); }
.qs-feed .qs-fd-amt.qs-amt-pos{ color: #16a34a; }
.qs-feed .qs-fd-amt.qs-amt-neg{ color: #e0413b; }
/* รูปแบบการเด้งของรายการใหม่ (เลือกด้วยคลาส qs-anim-slide / qs-anim-pop / qs-anim-fade — ไว้ให้สุ่ม) */
.qs-feed li.qs-fd-in-slide{ animation: qs-fd-slide .5s ease; }
.qs-feed li.qs-fd-in-pop{ animation: qs-fd-pop .45s cubic-bezier(.2,1.3,.5,1); }
.qs-feed li.qs-fd-in-fade{ animation: qs-fd-fade .6s ease; }
@keyframes qs-fd-slide{ from{ opacity: 0; transform: translateY(-12px); } to{ opacity: 1; transform: none; } }
@keyframes qs-fd-pop{ from{ opacity: 0; transform: scale(.82); } to{ opacity: 1; transform: none; } }
@keyframes qs-fd-fade{ from{ opacity: 0; } to{ opacity: 1; } }

/* ---- สไลด์แบนเนอร์ (CSS scroll-snap + ปัดนิ้ว/ลาก) ---- */
.qs-slider{
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	gap: 0 !important;
	border-radius: var(--qs-radius, 14px);
	scrollbar-width: none;
}
.qs-slider::-webkit-scrollbar{ display: none; }
.qs-slider > *{ flex: 0 0 100% !important; min-width: 100% !important; scroll-snap-align: center; margin: 0 !important; }
.qs-slider .wp-block-cover{ border-radius: var(--qs-radius, 14px); overflow: hidden; }
/* จุดบอกตำแหน่ง (สร้างด้วย qs-slider.js) */
.qs-slider-dots{ display: flex; gap: 8px; justify-content: center; align-items: center; margin: 14px 0 0; padding: 0; list-style: none; }
.qs-slider-dots button{ width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: color-mix(in srgb, var(--wp--preset--color--contrast) 28%, transparent); transition: all .25s ease; }
.qs-slider-dots button.is-active{ width: 24px; border-radius: 5px; background: var(--wp--preset--color--primary); }

/* ---- ฮีโร่ไล่สีตามธีม (เข้มเสมอ → ตัวอักษรขาวอ่านชัดทุกธีม) ---- */
.qs-hero-grad{
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--wp--preset--color--primary) 58%, #0b0b12),
		color-mix(in srgb, var(--wp--preset--color--accent) 58%, #0b0b12)) !important;
	border-radius: var(--qs-radius, 14px);
	overflow: hidden;
	position: relative;
}
.qs-hero-grad::after{ /* แสงวับมุมบน */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(80% 120% at 85% -10%, color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent), transparent 60%);
}
.qs-hero-grad, .qs-hero-grad :where(h1,h2,h3,h4,p,li,span){ color: #fff !important; }
.qs-hero-grad > *{ position: relative; z-index: 1; }
/* เฉดไล่สีสำรอง (ใช้สลับในสไลด์ไล่สีให้ต่างกัน) */
.qs-hero-grad.qs-grad-b{ background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--accent) 58%, #0b0b12), color-mix(in srgb, var(--wp--preset--color--primary) 58%, #0b0b12)) !important; }
.qs-hero-grad.qs-grad-c{ background: linear-gradient(160deg, color-mix(in srgb, var(--wp--preset--color--primary) 50%, #0b0b12), color-mix(in srgb, var(--wp--preset--color--muted) 72%, #0b0b12)) !important; }
/* แถบสถิติ — ดำอมสีหลักของธีม (กลืนสกิน แทนสเลตตายตัว) · เลขไฮไลต์ = accent ของธีม */
.qs-statband{ background: color-mix(in srgb, var(--wp--preset--color--primary) 48%, #0b0b12) !important; }
.qs-statband :where(h1,h2,h3,h4){ color:#fff !important; }
.qs-statband .qs-stat-hi{ color: var(--wp--preset--color--accent) !important; }
.qs-statband p{ color: rgba(255,255,255,.72) !important; }

/* ---- แบนเนอร์เพียวๆ (ไม่มีปุ่มในภาพ) + ปุ่มแยกด้านล่าง ---- */
.qs-banner-pure .wp-block-cover, .qs-banner-pure.wp-block-cover{ border-radius: var(--qs-radius, 14px); overflow: hidden; }
.qs-banner-cta{ display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1rem; }
.qs-banner-cta .wp-block-button{ margin: 0; }

/* ---- การ์ดหมวดเกม (ใช้ไอคอนรีคัลเลอร์ qs-gico) ---- */
.qs-tile{ background: var(--qs-surface); border: var(--qs-border, 1px solid rgba(127,127,127,.16)); border-radius: var(--qs-radius, 14px); padding: 1.1rem .6rem; text-align: center; transition: transform .18s ease, box-shadow .18s ease; }
.qs-tile:hover{ transform: translateY(-4px); box-shadow: var(--qs-shadow, 0 8px 28px rgba(0,0,0,.14)); }
.qs-tile .qs-gico{ width: 46px; height: 46px; }
.qs-tile p{ margin: .5rem 0 0; font-weight: 600; font-size: .92rem; }

/* ---- มือถือ ---- */
@media (max-width:781px){
	.qs-hero-grad{ text-align: center; }
	.qs-banner-cta .wp-block-button__link{ padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width:600px){
	.qs-slider .wp-block-cover{ min-height: 230px !important; }
	.qs-hero-grad .wp-block-cover, .qs-hero-grad{ min-height: auto; }
	.qs-tile{ padding: .9rem .4rem; }
	.qs-tile .qs-gico{ width: 40px; height: 40px; }
}