/*
 * Layout classes extracted from the templates.
 *
 * The markup used to carry Figma's inline style="..." plus long Tailwind
 * utility strings, which made the templates unreadable and pinned the theme to
 * the Tailwind CDN. Every one of those is now a named class in here, so a tag
 * carries only its class name and the values live in one place.
 *
 * Naming: <page>-<section>-<role>. Grouped in the same order as the page.
 */


/* =========================================================
 * Footer — mobile bar, sticky bar, side badges
 * footer.php
 * ====================================================== */


/* --- badge --- */
.foot-badge-side-badge {
  position:fixed;
  left:8px;
  top:50%;
  transform-origin:left center;
  transform:translateY(-50%);
  z-index:60;
}
.foot-badge-side-badge-2 {
  position:fixed;
  right:8px;
  top:50%;
  transform-origin:right center;
  transform:translateY(-50%);
  z-index:60;
}
.foot-badge-side-x { right:0 }
.foot-badge-box { position:relative; width:196px; height:340px }
.foot-badge-box-2 {
  display:flex;
  flex-direction:column;
  gap:8px;
  position:absolute;
  left:8px;
  top:164px;
  width:179px;
}
.foot-badge-txt {
  font-weight:500;
  font-size:24px;
  color:#fff;
  white-space:nowrap;
}

/* --- footer --- */
.foot-footer-img { width:100%; height:100%; object-fit:contain }
.foot-footer-img-2 { height:8px }
.foot-footer-img-3 { height:15px }

/* --- badge --- */
.foot-badge-link { display:block; width:196px; height:196px }
.foot-badge-img { width:100%; height:100%; object-fit:cover }
.foot-badge-link-2 {
  position:absolute;
  left:0;
  top:0;
  width:196px;
  height:196px;
}
.foot-badge-link-3 {
  border-width:1px;
  border-color:rgba(199,131,5,0.5);
  border-style:solid;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:24px;
  padding-right:24px;
  padding-top:8px;
  padding-bottom:8px;
  border-radius:9999px;
  width:100%;
  text-decoration:none;
  background-image:linear-gradient(to bottom,#f9d01b,#e25c15);
}
.foot-badge-link-4 {
  border-width:1px;
  border-color:rgba(80,133,218,0.5);
  border-style:solid;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:24px;
  padding-right:24px;
  padding-top:8px;
  padding-bottom:8px;
  border-radius:100px;
  width:100%;
  text-decoration:none;
  background-image:linear-gradient(to bottom,#0062ff,#002c84);
}
.foot-badge-link-5 {
  border-width:1px;
  border-color:rgba(42,183,74,0.5);
  border-style:solid;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:24px;
  padding-right:24px;
  padding-top:8px;
  padding-bottom:8px;
  border-radius:100px;
  width:100%;
  text-decoration:none;
  background-image:linear-gradient(to bottom,#2ab74a,#006a18);
}

/* =========================================================
 * Header — desktop bar
 * header.php
 * ====================================================== */


/* --- head --- */

/* Two shells, exactly as the static build has them — see pg_canvas().
   index.html: gradient background, height from content, header bar in flow.
   sub-pages : flat #001433, a fixed canvas height, header bar absolute. */
.page-home {
  position:relative;
  width:1920px;
  background:radial-gradient(ellipse 49% 42% at 50% 44%,#0051d0 0%,#0042a8 25%,#003381 50%,#00235a 75%,#001433 100%);
  display:flow-root;
}
.page-sub {
  position:relative;
  width:1920px;
  background:#001433;
  display:flow-root;
}

/* Every sub-page frame is content-sized now, so the canvas takes its height from
   what is actually on the page — no fixed values to outgrow. .page-gap-* below
   keeps each page's original frame-to-footer gap so a design-sized page is
   pixel-identical to the static build. */
/* page.php / single.php: canvas follows the content, like every other page */

.head-bar-home {
  position:relative;
  z-index:30;
  width:1920px;
  height:128px;
}
.head-bar-sub {
  position:absolute;
  left:0;
  top:0;
  z-index:30;
  width:1920px;
  height:128px;
}
.head-box-3 {
  border-color:rgba(60,236,251,0.3);
  border-bottom-width:1px;
  border-style:solid;
  position:relative;
  width:100%;
  height:100%;
  background-image:linear-gradient(to bottom,#002455,#054990);
}

/* --- logo --- */
.head-logo-absolute {
  position:absolute;
  display:contents;
  left:0;
  top:0;
}
.head-logo-absolute-2 {
  position:absolute;
  height:138px;
  left:0;
  top:0;
  width:230px;
}
.head-logo-absolute-3 { position:absolute; inset:0 -1.74% -5.8% -1.74% }
.head-logo-absolute-4 {
  position:absolute;
  left:30.19px;
  width:126.5px;
  height:126.5px;
  top:2.88px;
  filter:drop-shadow(0 0 13px rgba(60,236,251,0.5));
}

/* --- nav --- */
.head-nav-absolute {
  position:absolute;
  display:flex;
  align-items:stretch;
  left:325px;
  top:0;
  width:990px;
  height:128px;
}

/* --- btns --- */
.head-btns-absolute {
  position:absolute;
  display:flex;
  gap:24px;
  align-items:center;
  right:228px;
  top:42px;
}
.head-btns-txt {
  font-weight:500;
  color:#f0f0f0;
  font-size:18px;
  white-space:nowrap;
}

/* --- logo --- */
.head-logo-img {
  display:block;
  max-width:none;
  width:100%;
  height:100%;
}
.head-logo-absolute-5 {
  position:absolute;
  inset:0;
  max-width:none;
  object-fit:cover;
  pointer-events:none;
  width:100%;
  height:100%;
}

/* --- btns --- */
.head-btns-link {
  border-width:2px;
  border-color:rgba(255,255,255,0.5);
  border-style:solid;
  display:flex;
  gap:8px;
  height:44px;
  align-items:center;
  justify-content:center;
  padding-left:24px;
  padding-right:24px;
  border-radius:40px;
  text-decoration:none;
  background-image:linear-gradient(to bottom,#efad3d,#eb6010);
}
.head-btns-link-2 {
  border-width:2px;
  border-color:rgba(255,255,255,0.5);
  border-style:solid;
  display:flex;
  gap:8px;
  height:44px;
  align-items:center;
  justify-content:center;
  padding-left:32px;
  padding-right:32px;
  border-radius:40px;
  text-decoration:none;
  background-image:linear-gradient(to bottom,#1cc2f2,#116fc7,#1252ac);
}

/* =========================================================
 * Generic page fallback
 * page.php
 * ====================================================== */


/* --- page --- */
.page-absolute {
  position:relative;
  margin:160px 0 0 228px;
  width:1464px;
}
.page-absolute-2 {
  position:absolute;
  transform:translateX(-50%);
  align-content:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  left:50%;
  top:-10px;
  width:430px;
  z-index:10;
}
.page-absolute-3 {
  position:relative;
  z-index:1;
  width:1272px;
  margin:0 auto;
  padding:120px 0;
}
.page-absolute-4 {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

/* =========================================================
 * Single post
 * single.php
 * ====================================================== */


/* --- single --- */
.single-absolute {
  position:relative;
  margin:160px 0 0 228px;
  width:1464px;
}
.single-absolute-2 {
  position:absolute;
  transform:translateX(-50%);
  align-content:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  left:50%;
  top:-10px;
  width:430px;
  z-index:10;
}
.single-absolute-3 {
  position:relative;
  z-index:1;
  width:1272px;
  margin:0 auto;
  padding:120px 0;
}
.single-ttl {
  color:#fff;
  font-weight:500;
  font-size:34px;
  margin:0 0 20px;
}
.single-box {
  padding:3px;
  border-radius:14px;
  background:linear-gradient(90deg,#5188C9 0%,#3CECFB 25%,#FBFFFF 50%,#3CECFB 75%,#5188C9 100%);
  margin-bottom:24px;
}
.single-box-2 { color:#e9eff8; font-size:20px; line-height:34px }
.single-ttl-2 {
  color:#fff;
  font-size:18px;
  font-weight:500;
  margin:14px 0 10px;
}
.single-absolute-4 {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

/* =========================================================
 * บทความ — desktop
 * template-parts/article-desktop.php
 * ====================================================== */


/* --- sec --- */
/* Content-sized — see .promo-sec-absolute. 126 top / 63 bottom are the static
   paddings. */
.art-sec-absolute {
  position:relative;
  margin:160px 0 0 228px;
  width:1464px;
}
.art-sec-absolute-2 {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#7fe4ff 0%,#2b90e2 50%,#0f57a6 100%);
  filter:drop-shadow(0 0 16px rgba(60,190,255,.45));
}
.art-sec-absolute-3 {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#021737 0%,#03305f 55%,#053f74 100%);
  box-shadow:inset 0 0 60px rgba(0,10,35,.55);
}

/* --- grid --- */
.art-grid-absolute {
  display:grid;
  width:1264px;
  grid-template-columns:repeat(3,395px);
  column-gap:39.5px;
  row-gap:31px;
  margin:0 0 0 100px;
  padding:126px 0 63px;
  position:relative;
  z-index:1;
}

/* --- tab --- */
.art-tab-absolute {
  position:absolute;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  left:710px;
  top:150px;
  width:500px;
  height:92px;
}
.art-tab-txt {
  position:relative;
  font-weight:600;
  color:#fff;
  font-size:30px;
  text-shadow:0 2px 6px rgba(0,20,60,.6);
}
.art-tab-absolute-2 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* =========================================================
 * รับเหรียญฟรี — desktop
 * template-parts/coins-desktop.php
 * ====================================================== */


/* --- sec --- */
/* Content-sized — see .promo-sec-absolute. 131 top / 119 bottom are the static
   paddings, so three cards still give exactly 698px. */
.coins-sec-absolute {
  position:relative;
  margin:160px 0 0 228px;
  width:1464px;
}

/* --- pill --- */
.coins-pill-absolute {
  position:absolute;
  transform:translateX(-50%);
  align-content:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  left:50%;
  top:-10px;
  width:430px;
  z-index:10;
}
.coins-pill-box {
  height:5px;
  position:relative;
  flex-shrink:0;
  width:192px;
}
.coins-pill-box-2 {
  height:80px;
  position:relative;
  flex-shrink:0;
  width:430px;
}
.coins-pill-absolute-2 {
  position:absolute;
  transform:translateX(-50%);
  font-weight:600;
  line-height:normal;
  left:50%;
  font-style:normal;
  font-size:32px;
  text-align:center;
  color:#fff;
  top:calc(50% - 24px);
  white-space:nowrap;
}

/* --- cards --- */
/* 3 x 396px card + 2 x 42px gap = 1272px, so exactly three fit per row.
   It used to be 1270px, two pixels short, which pushed the third card onto a
   second row and out through the bottom of the frame. */
.coins-cards-absolute {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:42px;
  width:1272px;
  margin:0 auto;
  padding:131px 0 119px;
  position:relative;
  z-index:1;
}

/* --- sec --- */
.coins-sec-absolute-2 {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

/* --- pill --- */
.coins-pill-absolute-3 {
  position:absolute;
  display:block;
  inset:0;
  max-width:none;
  width:100%;
  height:100%;
}

/* =========================================================
 * เครดิตฟรี — desktop
 * template-parts/credit-desktop.php
 * ====================================================== */


/* --- main --- */
.credit-main-absolute {
  position:relative;
  margin:160px 0 0 228px;
  width:1464px;
}
.credit-main-box {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.credit-main-box-2 {
  position:relative;
  flex-shrink:0;
  width:100%;
}
.credit-main-absolute-2 {
  position:absolute;
  height:2038px;
  left:0;
  top:0;
  width:1464px;
}
.credit-main-absolute-3 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:40px;
  align-items:flex-start;
  position:relative;
  width:1272px;
  margin:0 auto;
  padding:120px 0;
}
.credit-main-box-3 {
  align-content:stretch;
  display:flex;
  gap:24px;
  align-items:flex-start;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.credit-main-box-4 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
  justify-content:center;
  position:relative;
  flex-shrink:0;
}
.credit-main-box-5 {
  position:relative;
  flex-shrink:0;
  width:597px;
  height:597px;
}
.credit-main-txt {
  font-weight:400;
  line-height:normal;
  min-width:100%;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  color:#f9d01b;
  font-size:16px;
  text-align:center;
}
.credit-main-box-6 {
  flex:1 0 0;
  font-weight:400;
  line-height:0;
  min-width:1px;
  font-style:normal;
  position:relative;
  font-size:16px;
  color:#fff;
  white-space:pre-wrap;
}

/* --- frame --- */
.credit-frame-txt { line-height:normal; margin-bottom:0 }
.credit-frame-txt-2 { line-height:normal }
.credit-frame-box {
  border-width:1px;
  border-color:rgba(102,161,255,0.7);
  border-style:solid;
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:center;
  padding:32px;
  position:relative;
  border-radius:16px;
  flex-shrink:0;
  width:597px;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
.credit-frame-absolute {
  position:absolute;
  background:#001433;
  inset:0;
  pointer-events:none;
  border-radius:16px;
}
.credit-frame-box-2 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.credit-frame-box-3 {
  align-content:stretch;
  display:flex;
  align-items:center;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.credit-frame-box-4 {
  display:flex;
  flex:1 0 0;
  flex-direction:column;
  font-weight:400;
  justify-content:center;
  line-height:0;
  min-width:1px;
  font-style:normal;
  position:relative;
  color:#f0f0f0;
  font-size:14px;
}
.credit-frame-box-5 {
  background:#001433;
  border-color:rgba(60,236,251,0.15);
  border-style:solid;
  align-content:stretch;
  display:flex;
  align-items:center;
  padding-left:12px;
  padding-right:12px;
  padding-top:10px;
  padding-bottom:10px;
  position:relative;
  border-radius:8px;
  flex-shrink:0;
  width:100%;
}
.credit-frame-box-6 {
  display:flex;
  flex:1 0 0;
  flex-direction:column;
  font-weight:400;
  justify-content:center;
  line-height:0;
  min-width:1px;
  font-style:normal;
  position:relative;
  color:#717171;
  font-size:14px;
}
.credit-frame-box-7 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  position:relative;
  flex-shrink:0;
  width:517px;
}
.credit-frame-txt-3 {
  font-weight:500;
  line-height:normal;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  color:#f0f0f0;
  font-size:12px;
  width:100%;
}
.credit-frame-box-8 {
  background:rgba(0,0,0,0.4);
  border-width:1px;
  border-color:rgba(60,236,251,0.15);
  border-style:dashed;
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  padding:24px;
  position:relative;
  border-radius:8px;
  flex-shrink:0;
  width:100%;
}
.credit-frame-box-9 {
  overflow:clip;
  position:relative;
  flex-shrink:0;
  width:24px;
  height:24px;
}
.credit-frame-absolute-2 { position:absolute; display:contents; inset:13.62% 0 }
.credit-frame-absolute-3 { position:absolute; inset:13.62% 0 }
.credit-frame-txt-4 {
  font-weight:400;
  line-height:normal;
  min-width:100%;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  color:#717171;
  font-size:12px;
  text-align:center;
}
.credit-frame-txt-5 {
  font-weight:400;
  line-height:normal;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  color:#f9d01b;
  font-size:12px;
  width:100%;
}
.credit-frame-box-10 {
  background:#9a9a9a;
  border-width:2px;
  border-color:rgba(255,255,255,0.5);
  border-style:solid;
  align-content:stretch;
  display:flex;
  height:44px;
  align-items:center;
  justify-content:center;
  padding-left:16px;
  padding-right:16px;
  padding-top:8px;
  padding-bottom:8px;
  position:relative;
  border-radius:40px;
  flex-shrink:0;
}
.credit-frame-txt-6 {
  font-weight:500;
  line-height:normal;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  color:#f0f0f0;
  font-size:18px;
  text-align:center;
  white-space:nowrap;
}
.credit-frame-absolute-4 {
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0px -8px 16px 0px rgba(60,236,251,0.2);
}
.credit-frame-box-11 {
  flex:1 0 0;
  font-weight:400;
  line-height:0;
  min-width:1px;
  font-style:normal;
  position:relative;
  color:#f9d01b;
  font-size:16px;
}
.credit-frame-box-12 {
  border-width:1px;
  border-color:rgba(102,161,255,0.7);
  border-style:solid;
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:center;
  padding:32px;
  position:relative;
  border-radius:16px;
  flex-shrink:0;
  width:100%;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
.credit-frame-txt-7 {
  font-weight:500;
  line-height:normal;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  font-size:24px;
  text-align:center;
  color:#fff;
  white-space:nowrap;
}
.credit-frame-box-13 {
  align-content:stretch;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.credit-frame-box-14 {
  align-content:stretch;
  display:flex;
  gap:16px;
  align-items:center;
  position:relative;
  flex-shrink:0;
}
.credit-frame-box-15 {
  position:relative;
  flex-shrink:0;
  width:32px;
  height:32px;
}
.credit-frame-absolute-5 {
  position:absolute;
  transform:translateX(-50%);
  aspect-ratio:100/100;
  bottom:0;
  left:50%;
  top:0;
}
.credit-frame-absolute-6 {
  position:absolute;
  transform:translateX(-50%);
  aspect-ratio:24/24;
  bottom:24.41%;
  left:50%;
  overflow:clip;
  top:25.59%;
}
.credit-frame-absolute-7 { position:absolute; display:contents; inset:8.33% 12.5% 0.78% 12.5% }
.credit-frame-absolute-8 { position:absolute; inset:96.43% 46.2% 0.78% 50.32% }
.credit-frame-absolute-9 { position:absolute; inset:8.33% 12.5% }
.credit-frame-txt-8 {
  font-weight:400;
  line-height:normal;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  font-size:16px;
  text-align:center;
  color:#fff;
  white-space:nowrap;
}
.credit-frame-txt-9 {
  font-weight:400;
  line-height:normal;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  color:#9a9a9a;
  font-size:16px;
  text-align:center;
  white-space:nowrap;
}
.credit-frame-box-16 {
  align-content:stretch;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  position:relative;
}
.credit-frame-box-17 {
  align-content:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:clip;
  padding:4px;
  position:relative;
  border-radius:40px;
  flex-shrink:0;
  width:28px;
  height:28px;
}
.credit-frame-box-18 {
  position:relative;
  flex-shrink:0;
  width:16px;
  height:16px;
}
.credit-frame-icon { display:block }
.credit-frame-box-19 {
  background:#0062ff;
  align-content:stretch;
  display:flex;
  height:29px;
  align-items:center;
  justify-content:center;
  overflow:clip;
  padding:4px;
  position:relative;
  border-radius:40px;
  flex-shrink:0;
  width:28px;
}
.credit-frame-txt-10 {
  font-weight:500;
  line-height:normal;
  font-size:14px;
  text-align:center;
  color:#fff;
}
.credit-frame-box-20 {
  align-content:stretch;
  display:flex;
  height:29px;
  align-items:center;
  justify-content:center;
  overflow:clip;
  padding:4px;
  position:relative;
  border-radius:40px;
  flex-shrink:0;
  width:28px;
}
.credit-frame-absolute-10 {
  position:absolute;
  transform:translateX(-50%);
  align-content:stretch;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  left:50%;
  overflow:clip;
  top:-10px;
  width:430px;
  z-index:10;
}
.credit-frame-box-21 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  height:90px;
  align-items:center;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.credit-frame-box-22 {
  height:5px;
  position:relative;
  flex-shrink:0;
  width:192px;
}
.credit-frame-box-23 {
  height:80px;
  position:relative;
  flex-shrink:0;
  width:430px;
}
.credit-frame-absolute-11 {
  position:absolute;
  transform:translateX(-50%);
  font-weight:600;
  line-height:normal;
  left:50%;
  font-style:normal;
  font-size:32px;
  text-align:center;
  color:#fff;
  top:calc(50% - 24px);
  white-space:nowrap;
}

/* --- tab --- */
.credit-tab-absolute {
  position:absolute;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  left:710px;
  top:150px;
  width:500px;
  height:92px;
}
.credit-tab-txt {
  position:relative;
  font-weight:600;
  color:#fff;
  font-size:30px;
  text-shadow:0 2px 6px rgba(0,20,60,.6);
}

/* --- main --- */
.credit-main-absolute-4 {
  position:absolute;
  display:block;
  inset:0;
  max-width:none;
  width:100%;
  height:100%;
}
.credit-main-absolute-5 {
  position:absolute;
  inset:0;
  max-width:none;
  object-fit:cover;
  pointer-events:none;
  width:100%;
  height:100%;
}

/* --- tab --- */
.credit-tab-absolute-2 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* =========================================================
 * เครดิตฟรี — mobile
 * template-parts/credit-mobile.php
 * ====================================================== */


/* --- mcredit --- */
.mcredit-m-gcard { width:311px; height:300px }

/* =========================================================
 * Footer — desktop
 * template-parts/desktop-footer.php
 * ====================================================== */


/* --- dfoot --- */
.dfoot-box {
  position:relative;
  left:0;
  overflow:hidden;
  margin-top:96px;
  width:1921px;
  height:317px;
  background:linear-gradient(180deg,#011434 0%,#065498 100%);
  border-top:1px solid #12556f;
}

/* --- brand ---
   Logo and blurb sit 22px higher than the static build had them (the 14px gap
   between the two is unchanged). The design text was five lines; the copy coming
   from Options is six, and 182 + 6x24 = 326 ran past the 317px footer, which
   `overflow:hidden` then cut through the middle of the last line. From 160 the
   same six lines end at 304, inside the box. */
.dfoot-brand-box {
  position:absolute;
  left:228px;
  top:16px;
  width:130px;
  height:130px;
  filter:drop-shadow(0 0 13px rgba(60,236,251,0.4));
}
.dfoot-brand-ft-desc { left:228px; top:160px; width:470px }

/* --- menu --- */
.dfoot-menu-ft-h { left:826px }
.dfoot-menu-ft-col { left:971px }

/* --- download --- */
.dfoot-download-ft-h { left:1171px }
.dfoot-download-box {
  position:absolute;
  left:1171px;
  top:100px;
  display:flex;
  gap:16px;
}
.dfoot-download-box-2 {
  border-width:2px;
  border-color:rgba(255,255,255,0.5);
  border-style:solid;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  flex-shrink:0;
  background-image:linear-gradient(to bottom,#1cc2f2,#116fc7,#1252ac);
  width:236px;
  height:44px;
}
.dfoot-download-txt {
  font-weight:500;
  line-height:normal;
  color:#f0f0f0;
  font-size:18px;
  text-align:center;
  white-space:nowrap;
  margin:0;
}
.dfoot-download-box-3 {
  border-width:2px;
  border-color:rgba(255,255,255,0.5);
  border-style:solid;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  flex-shrink:0;
  background-image:linear-gradient(to bottom,#efad3d,#eb6010);
  width:236px;
  height:44px;
}
.dfoot-download-box-4 {
  position:absolute;
  left:1171px;
  top:161px;
  display:flex;
  gap:16px;
}
.dfoot-download-box-5 {
  position:relative;
  flex-shrink:0;
  width:236px;
  height:69px;
}
.dfoot-download-absolute {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding-left:16px;
  gap:11px;
}
.dfoot-download-box-6 { flex-shrink:0; width:34px; height:42px }
.dfoot-download-box-7 {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.dfoot-download-box-8 { height:12px }
.dfoot-download-box-9 { height:22px }
.dfoot-download-box-10 { flex-shrink:0; width:34px; height:39px }

/* --- brand --- */
.dfoot-brand-img { width:100%; height:100%; object-fit:contain }

/* --- download --- */
.dfoot-download-absolute-2 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.dfoot-download-img {
  height:100%;
  width:auto;
  object-fit:contain;
  object-position:left;
}

/* =========================================================
 * ดาวน์โหลด — desktop
 * template-parts/download-desktop.php
 * ====================================================== */


/* --- sec --- */
.dl-sec-absolute {
  position:relative;
  margin:160px 0 0 228px;
  width:1464px;
}

/* --- border --- */
.dl-border-absolute {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#7fe4ff 0%,#2b90e2 50%,#0f57a6 100%);
  filter:drop-shadow(0 0 16px rgba(60,190,255,.45));
}

/* --- fill --- */
.dl-fill-absolute {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#021737 0%,#03305f 45%,#054889 80%,#075699 100%);
  box-shadow:inset 0 0 60px rgba(0,10,35,.55);
}

/* --- banner --- */
.dl-banner-absolute {
  position:absolute;
  left:94px;
  top:118px;
  width:614px;
  height:614px;
  border-radius:26px;
  padding:3px;
  background:linear-gradient(180deg,rgba(120,220,255,.7),rgba(30,120,210,.5));
}

/* --- app --- */
.dl-app-absolute {
  position:absolute;
  left:763px;
  top:197px;
  width:594px;
  height:456px;
}

/* --- body --- */
.dl-body-absolute {
  color:#e9eff8;
  font-size:24px;
  line-height:33px;
  font-weight:400;
  position:relative;
  width:1280px;
  margin:0 auto;
  padding:808px 0 120px;
}
.dl-body-txt { margin:0 0 22px 0 }
.dl-body-txt-2 { margin:0 0 26px 0 }
.dl-body-txt-3 { margin:0 }

/* --- tab --- */
.dl-tab-absolute {
  position:absolute;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  left:710px;
  top:150px;
  width:500px;
  height:92px;
}
.dl-tab-txt {
  position:relative;
  font-weight:600;
  color:#fff;
  font-size:30px;
  text-shadow:0 2px 6px rgba(0,20,60,.6);
}

/* --- banner --- */
.dl-banner-img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:23px;
  display:block;
}

/* --- app --- */
.dl-app-img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* --- tab --- */
.dl-tab-absolute-2 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* =========================================================
 * ดาวน์โหลด — mobile
 * template-parts/download-mobile.php
 * ====================================================== */


/* --- mdl --- */
.mdl-m-gcard { width:311px }

/* =========================================================
 * ทางเข้า — desktop
 * template-parts/entry-desktop.php
 * ====================================================== */


/* --- sec --- */
.entry-sec-absolute {
  position:relative;
  margin:160px 0 0 228px;
  width:1464px;
}
.entry-sec-absolute-2 {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#7fe4ff 0%,#2b90e2 50%,#0f57a6 100%);
  filter:drop-shadow(0 0 16px rgba(60,190,255,.45));
}
.entry-sec-absolute-3 {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#021737 0%,#03305f 55%,#053f74 100%);
  box-shadow:inset 0 0 60px rgba(0,10,35,.55);
}
.entry-sec-absolute-4 {
  color:#e9eff8;
  font-size:20px;
  line-height:28px;
  font-weight:400;
  position:relative;
  width:1180px;
  margin:0 auto;
  padding:120px 0;
}
.entry-sec-txt { margin:0 0 22px 0 }
.entry-sec-link { color:#6cc6ff }
.entry-sec-txt-2 { margin:0 }

/* --- tab --- */
.entry-tab-absolute {
  position:absolute;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  left:710px;
  top:150px;
  width:500px;
  height:92px;
}
.entry-tab-txt {
  position:relative;
  font-weight:600;
  color:#fff;
  font-size:30px;
  text-shadow:0 2px 6px rgba(0,20,60,.6);
}
.entry-tab-absolute-2 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* =========================================================
 * คู่มือ — desktop
 * template-parts/guide-desktop.php
 * ====================================================== */


/* --- sec --- */
.guide-sec-absolute {
  position:relative;
  margin:160px 0 0 228px;
  width:1464px;
}
.guide-sec-absolute-2 {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#7fe4ff 0%,#2b90e2 50%,#0f57a6 100%);
  filter:drop-shadow(0 0 16px rgba(60,190,255,.45));
}
.guide-sec-absolute-3 {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#021737 0%,#03305f 55%,#053f74 100%);
  box-shadow:inset 0 0 60px rgba(0,10,35,.55);
}

/* --- subtitle --- */
.guide-subtitle-absolute {
  position:absolute;
  text-align:center;
  color:#fff;
  font-weight:400;
  left:0;
  right:0;
  top:158px;
  font-size:26px;
}

/* --- acc --- */
.guide-acc-faqwrap {
  position:relative;
  width:1272px;
  margin:0 auto;
  padding:232px 0 120px;
}

/* --- tab --- */
.guide-tab-absolute {
  position:absolute;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  left:710px;
  top:150px;
  width:500px;
  height:92px;
}
.guide-tab-txt {
  position:relative;
  font-weight:600;
  color:#fff;
  font-size:30px;
  text-shadow:0 2px 6px rgba(0,20,60,.6);
}
.guide-tab-absolute-2 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* =========================================================
 * Home — desktop
 * template-parts/home-desktop.php
 * ====================================================== */


/* --- hero --- */
.home-hero-box { margin-top:32px }
.home-hero-box-2 {
  position:relative;
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:96px;
  align-items:flex-start;
  width:1464px;
  margin-left:228px;
  margin-top:105px;
}
.home-hero-box-3 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:35px;
  align-items:flex-start;
  position:relative;
  flex-shrink:0;
  width:100%;
  margin-bottom:9px;
}

/* --- promotion --- */
.home-promotion-box {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:23px;
  align-items:center;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-promotion-box-2 {
  align-content:stretch;
  display:flex;
  gap:24px;
  align-items:flex-start;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-promotion-box-3 {
  align-content:stretch;
  display:flex;
  gap:8px;
  height:24px;
  align-items:center;
  justify-content:center;
  overflow:clip;
  padding-left:12px;
  padding-right:12px;
  padding-top:8px;
  padding-bottom:8px;
  position:relative;
  border-radius:12px;
  flex-shrink:0;
}
.home-promotion-box-4 {
  align-content:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:clip;
  position:relative;
  flex-shrink:0;
  width:8px;
  height:8px;
}
.home-promotion-box-5 {
  position:relative;
  flex-shrink:0;
  width:8px;
  height:8px;
}
.home-promotion-box-6 {
  position:relative;
  flex-shrink:0;
  width:6px;
  height:6px;
}
.home-promotion-box-7 {
  position:relative;
  flex-shrink:0;
  width:4px;
  height:4px;
}

/* --- game --- */
.home-game-box {
  align-content:stretch;
  display:flex;
  gap:24px;
  align-items:center;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-game-box-2 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:35px;
  align-items:flex-start;
  position:relative;
  flex-shrink:0;
  width:100%;
}

/* --- download --- */
.home-download-box {
  flex:1 0 0;
  height:445px;
  min-width:1px;
  position:relative;
}
.home-download-absolute {
  position:absolute;
  transform:translateX(-50%);
  left:50%;
  width:408px;
  height:408px;
  top:0.02px;
}
.home-download-absolute-2 {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.home-download-absolute-3 {
  position:absolute;
  transform:translateX(-50%);
  bottom:0;
  align-content:stretch;
  display:flex;
  gap:10px;
  align-items:center;
  left:50%;
}
.home-download-box-2 {
  height:80px;
  position:relative;
  flex-shrink:0;
  width:343px;
}
.home-download-absolute-4 {
  position:absolute;
  transform:translateX(-50%);
  font-weight:600;
  line-height:normal;
  left:calc(50% + 0.5px);
  font-style:normal;
  font-size:32px;
  text-align:center;
  color:#fff;
  top:calc(50% - 24px);
  white-space:nowrap;
}
.home-download-absolute-5 {
  position:absolute;
  height:71px;
  left:85px;
  top:294px;
  width:235px;
}
.home-download-absolute-6 { position:absolute; inset:0; pointer-events:none }
.home-download-absolute-7 { position:absolute; inset:0; overflow:hidden }
.home-download-absolute-8 {
  position:absolute;
  height:71px;
  left:72px;
  top:294px;
  width:235px;
}
.home-download-box-3 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-download-box-4 {
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-download-absolute-9 {
  position:absolute;
  height:1008px;
  left:0;
  top:0;
  width:1464px;
}
.home-download-absolute-10 {
  font-weight:400;
  line-height:0;
  font-style:normal;
  color:#fff;
  position:relative;
  width:1272px;
  margin:0 auto;
  padding:120px 0;
}
.home-download-txt { margin-bottom:0; font-size:16px }
.home-download-txt-2 { line-height:normal }
.home-download-link { cursor:pointer; line-height:normal }
.home-download-txt-3 { line-height:normal; margin-bottom:0; font-size:16px }
.home-download-txt-4 { line-height:normal; font-size:16px }
.home-download-absolute-11 {
  position:absolute;
  transform:translateX(-50%);
  align-content:stretch;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  left:50%;
  overflow:clip;
  top:-10px;
  width:430px;
  z-index:10;
}
.home-download-box-5 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  height:90px;
  align-items:center;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-download-box-6 {
  height:5px;
  position:relative;
  flex-shrink:0;
  width:192px;
}
.home-download-box-7 {
  height:80px;
  position:relative;
  flex-shrink:0;
  width:430px;
}

/* --- seo --- */
.home-seo-absolute {
  position:absolute;
  transform:translateX(-50%);
  font-weight:600;
  line-height:normal;
  left:50%;
  font-style:normal;
  font-size:32px;
  text-align:center;
  color:#fff;
  top:calc(50% - 24px);
  white-space:nowrap;
}
.home-seo-box {
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-seo-absolute-2 {
  position:absolute;
  height:1824px;
  left:0;
  top:0;
  width:1464px;
}
.home-seo-absolute-3 {
  font-weight:400;
  line-height:0;
  font-style:normal;
  font-size:16px;
  color:#fff;
  position:relative;
  width:1272px;
  margin:0 auto;
  padding:120px 0;
}
.home-seo-txt { line-height:normal; margin-bottom:0 }
.home-seo-box-2 {
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-seo-absolute-4 {
  position:absolute;
  height:1037px;
  left:0;
  top:0;
  width:1464px;
}
.home-seo-absolute-5 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:32px;
  align-items:flex-start;
  position:relative;
  width:1272px;
  margin:0 auto;
  padding:120px 0;
}
.home-seo-box-3 {
  position:relative;
  flex-shrink:0;
  width:597px;
  height:597px;
}
.home-seo-box-4 {
  flex:1 0 0;
  font-weight:400;
  line-height:0;
  min-width:1px;
  font-style:normal;
  position:relative;
  font-size:16px;
  color:#fff;
}
.home-seo-box-5 {
  font-weight:400;
  line-height:0;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  font-size:16px;
  color:#fff;
  width:100%;
}

/* --- seo2 --- */
.home-seo2-box {
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-seo2-absolute {
  position:absolute;
  height:837px;
  left:0;
  top:0;
  width:1464px;
}
.home-seo2-absolute-2 {
  align-content:stretch;
  display:flex;
  gap:24px;
  align-items:flex-start;
  position:relative;
  width:1272px;
  margin:0 auto;
  padding:120px 0;
}
.home-seo2-box-2 {
  flex:1 0 0;
  font-weight:400;
  line-height:0;
  min-width:1px;
  font-style:normal;
  position:relative;
  font-size:16px;
  color:#fff;
}
.home-seo2-box-3 {
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-seo2-absolute-3 {
  position:absolute;
  height:2038px;
  left:0;
  top:0;
  width:1464px;
}
.home-seo2-absolute-4 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:40px;
  align-items:flex-start;
  position:relative;
  width:1272px;
  margin:0 auto;
  padding:120px 0;
}
.home-seo2-box-4 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
  justify-content:center;
  position:relative;
  flex-shrink:0;
}
.home-seo2-txt {
  font-weight:400;
  line-height:normal;
  min-width:100%;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  color:#f9d01b;
  font-size:16px;
  text-align:center;
}

/* --- frame --- */
.home-frame-box {
  border-width:1px;
  border-color:rgba(102,161,255,0.7);
  border-style:solid;
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:center;
  padding:32px;
  position:relative;
  border-radius:16px;
  flex-shrink:0;
  width:597px;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
.home-frame-absolute {
  position:absolute;
  background:#001433;
  inset:0;
  pointer-events:none;
  border-radius:16px;
}
.home-frame-box-2 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-frame-box-3 {
  align-content:stretch;
  display:flex;
  align-items:center;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-frame-box-4 {
  display:flex;
  flex:1 0 0;
  flex-direction:column;
  font-weight:400;
  justify-content:center;
  line-height:0;
  min-width:1px;
  font-style:normal;
  position:relative;
  color:#f0f0f0;
  font-size:14px;
}
.home-frame-box-5 {
  background:#001433;
  border-color:rgba(60,236,251,0.15);
  border-style:solid;
  align-content:stretch;
  display:flex;
  align-items:center;
  padding-left:12px;
  padding-right:12px;
  padding-top:10px;
  padding-bottom:10px;
  position:relative;
  border-radius:8px;
  flex-shrink:0;
  width:100%;
}
.home-frame-box-6 {
  display:flex;
  flex:1 0 0;
  flex-direction:column;
  font-weight:400;
  justify-content:center;
  line-height:0;
  min-width:1px;
  font-style:normal;
  position:relative;
  color:#717171;
  font-size:14px;
}
.home-frame-box-7 {
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
  position:relative;
  flex-shrink:0;
  width:517px;
}
.home-frame-txt {
  font-weight:500;
  line-height:normal;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  color:#f0f0f0;
  font-size:12px;
  width:100%;
}
.home-frame-box-8 {
  background:rgba(0,0,0,0.4);
  border-width:1px;
  border-color:rgba(60,236,251,0.15);
  border-style:dashed;
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  padding:24px;
  position:relative;
  border-radius:8px;
  flex-shrink:0;
  width:100%;
}
.home-frame-box-9 {
  overflow:clip;
  position:relative;
  flex-shrink:0;
  width:24px;
  height:24px;
}
.home-frame-absolute-2 { position:absolute; display:contents; inset:13.62% 0 }
.home-frame-absolute-3 { position:absolute; inset:13.62% 0 }
.home-frame-txt-2 {
  font-weight:400;
  line-height:normal;
  min-width:100%;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  color:#717171;
  font-size:12px;
  text-align:center;
}
.home-frame-txt-3 {
  font-weight:400;
  line-height:normal;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  color:#f9d01b;
  font-size:12px;
  width:100%;
}
.home-frame-box-10 {
  background:#9a9a9a;
  border-width:2px;
  border-color:rgba(255,255,255,0.5);
  border-style:solid;
  align-content:stretch;
  display:flex;
  height:44px;
  align-items:center;
  justify-content:center;
  padding-left:16px;
  padding-right:16px;
  padding-top:8px;
  padding-bottom:8px;
  position:relative;
  border-radius:40px;
  flex-shrink:0;
}
.home-frame-txt-4 {
  font-weight:500;
  line-height:normal;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  color:#f0f0f0;
  font-size:18px;
  text-align:center;
  white-space:nowrap;
}
.home-frame-absolute-4 {
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0px -8px 16px 0px rgba(60,236,251,0.2);
}
.home-frame-box-11 {
  flex:1 0 0;
  font-weight:400;
  line-height:0;
  min-width:1px;
  font-style:normal;
  position:relative;
  color:#f9d01b;
  font-size:16px;
}
.home-frame-box-12 {
  border-width:1px;
  border-color:rgba(102,161,255,0.7);
  border-style:solid;
  align-content:stretch;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:center;
  padding:32px;
  position:relative;
  border-radius:16px;
  flex-shrink:0;
  width:100%;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
.home-frame-txt-5 {
  font-weight:500;
  line-height:normal;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  font-size:24px;
  text-align:center;
  color:#fff;
  white-space:nowrap;
}
.home-frame-box-13 {
  align-content:stretch;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-frame-box-14 {
  align-content:stretch;
  display:flex;
  gap:16px;
  align-items:center;
  position:relative;
  flex-shrink:0;
}
.home-frame-box-15 {
  position:relative;
  flex-shrink:0;
  width:32px;
  height:32px;
}
.home-frame-absolute-5 {
  position:absolute;
  transform:translateX(-50%);
  aspect-ratio:100/100;
  bottom:0;
  left:50%;
  top:0;
}
.home-frame-absolute-6 {
  position:absolute;
  transform:translateX(-50%);
  aspect-ratio:24/24;
  bottom:24.41%;
  left:50%;
  overflow:clip;
  top:25.59%;
}
.home-frame-absolute-7 { position:absolute; display:contents; inset:8.33% 12.5% 0.78% 12.5% }
.home-frame-absolute-8 { position:absolute; inset:96.43% 46.2% 0.78% 50.32% }
.home-frame-absolute-9 { position:absolute; inset:8.33% 12.5% }
.home-frame-txt-6 {
  font-weight:400;
  line-height:normal;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  font-size:16px;
  text-align:center;
  color:#fff;
  white-space:nowrap;
}
.home-frame-txt-7 {
  font-weight:400;
  line-height:normal;
  font-style:normal;
  position:relative;
  flex-shrink:0;
  color:#9a9a9a;
  font-size:16px;
  text-align:center;
  white-space:nowrap;
}
.home-frame-box-16 {
  align-content:stretch;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  position:relative;
}
.home-frame-box-17 {
  align-content:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:clip;
  padding:4px;
  position:relative;
  border-radius:40px;
  flex-shrink:0;
  width:28px;
  height:28px;
}
.home-frame-box-18 {
  position:relative;
  flex-shrink:0;
  width:16px;
  height:16px;
}
.home-frame-icon { display:block }
.home-frame-box-19 {
  background:#0062ff;
  align-content:stretch;
  display:flex;
  height:29px;
  align-items:center;
  justify-content:center;
  overflow:clip;
  padding:4px;
  position:relative;
  border-radius:40px;
  flex-shrink:0;
  width:28px;
}
.home-frame-txt-8 {
  font-weight:500;
  line-height:normal;
  font-size:14px;
  text-align:center;
  color:#fff;
}
.home-frame-box-20 {
  align-content:stretch;
  display:flex;
  height:29px;
  align-items:center;
  justify-content:center;
  overflow:clip;
  padding:4px;
  position:relative;
  border-radius:40px;
  flex-shrink:0;
  width:28px;
}
.home-frame-box-21 {
  position:relative;
  flex-shrink:0;
  width:100%;
}
.home-frame-absolute-10 {
  position:absolute;
  height:758px;
  left:0;
  top:0;
  width:1464px;
}

/* --- promotion --- */
.home-promotion-absolute {
  position:absolute;
  display:block;
  inset:0;
  max-width:none;
  width:100%;
  height:100%;
}

/* --- download --- */
.home-download-absolute-12 {
  position:absolute;
  left:-12.98%;
  max-width:none;
  width:125.88%;
  height:125.88%;
  top:-7.32%;
}
.home-download-absolute-13 {
  position:absolute;
  left:-15.62%;
  max-width:none;
  width:121.29%;
  height:121.29%;
  top:-5.86%;
}
.home-download-absolute-14 {
  position:absolute;
  height:124.22%;
  left:-6.2%;
  max-width:none;
  top:-9.94%;
  width:112.78%;
}
.home-download-absolute-15 {
  position:absolute;
  height:123.46%;
  left:-6.39%;
  max-width:none;
  top:-11.73%;
  width:112.78%;
}
.home-download-absolute-16 {
  position:absolute;
  left:-1.47%;
  max-width:none;
  width:110.8%;
  height:110.8%;
  top:-1.41%;
}

/* --- seo --- */
.home-seo-absolute-6 {
  position:absolute;
  inset:0;
  max-width:none;
  object-fit:cover;
  pointer-events:none;
  width:100%;
  height:100%;
}

/* =========================================================
 * Home — mobile
 * template-parts/home-mobile.php
 * ====================================================== */


/* --- banner --- */
.mhome-banner-m-dots { position:absolute; top:129px; left:0 }

/* --- faq --- */
.mhome-faq-m-gcard { width:311px }

/* =========================================================
 * โปรโมชั่น — desktop
 * template-parts/promotion-desktop.php
 * ====================================================== */


/* --- sec --- */
/* Content-sized frame: the grid sits in normal flow, so the frame is exactly as
   tall as the cards it holds. The static build hard-coded 1853px for twelve
   cards, which left a huge empty box when fewer posts exist.
   105 top / 117 bottom are the static paddings, so twelve cards still give
   exactly 1853px. */
.promo-sec-absolute {
  position:relative;
  margin:160px 0 0 228px;
  width:1464px;
}
.promo-sec-absolute-2 {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#7fe4ff 0%,#2b90e2 50%,#0f57a6 100%);
  filter:drop-shadow(0 0 16px rgba(60,190,255,.45));
}
.promo-sec-absolute-3 {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#021737 0%,#03305f 55%,#053f74 100%);
  box-shadow:inset 0 0 60px rgba(0,10,35,.55);
}

/* --- grid --- */
.promo-grid-absolute {
  display:grid;
  width:1268px;
  grid-template-columns:repeat(3,400px);
  column-gap:34px;
  row-gap:37px;
  margin:0 0 0 98px;
  padding:105px 0 117px;
  position:relative;
  z-index:1;
}

/* --- tab --- */
.promo-tab-absolute {
  position:absolute;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  left:710px;
  top:150px;
  width:500px;
  height:92px;
}
.promo-tab-txt {
  position:relative;
  font-weight:600;
  color:#fff;
  font-size:30px;
  text-shadow:0 2px 6px rgba(0,20,60,.6);
}
.promo-tab-absolute-2 {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* =========================================================
 * Cards built inside PHP loops
 * These used to carry their CSS as inline style / utility strings inside the
 * printf() calls in the templates, which is the least readable place of all.
 * ====================================================== */

/* --- home: Promotion / Big Win card, Game tile --- */
.home-card {
  position:relative;
  flex:1 0 0;
  min-width:1px;
  aspect-ratio:1254/1254;
  display:block;
}
.home-tile {
  position:relative;
  flex:1 0 0;
  min-width:1px;
  aspect-ratio:161/256;
}
.home-card-img {
  position:absolute;
  inset:0;
  max-width:none;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

/* --- home: คำถามที่พบบ่อย accordion row --- */
.home-faq-item {
  position:relative;
  width:100%;
  flex-shrink:0;
  background:#001433;
  border:1px solid rgba(102,161,255,0.4);
  border-radius:12px;
}
.home-faq-head {
  display:flex;
  align-content:stretch;
  align-items:center;
  justify-content:space-between;
  padding-left:24px;
  padding-right:24px;
}
.home-faq-q {
  position:relative;
  color:#fff;
  font-size:20px;
  font-weight:500;
  font-style:normal;
  line-height:normal;
}
.home-faq-chev { position:relative; flex-shrink:0; width:24px; height:24px }

/* --- โปรโมชั่น: grid card --- */
.promo-card {
  display:block;
  width:400px;
  height:380px;
  border-radius:18px;
  padding:3px;
  background:linear-gradient(90deg,#5188C9 0%,#3CECFB 25%,#FBFFFF 50%,#3CECFB 75%,#5188C9 100%);
  box-shadow:0 0 16px rgba(60,236,251,.35);
}
.promo-card-img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:15px;
}

/* --- รับเหรียญฟรี: card + caption --- */
.coins-card { display:flex; flex-direction:column; align-items:center; width:396px }
.coins-card-link { display:block }
.coins-card-img { width:396px; height:381px }
/* .coin-cap is defined in the static build's coins.html <style> block, which was
   never copied into the theme's stylesheets. Values below are that rule verbatim. */
.coin-cap {
  margin:43px 0 0 0;
  font-size:20px;
  font-weight:400;
  color:#fff;
  line-height:1.2;
  text-align:center;
  white-space:normal;
  width:100%;
}

/* --- บทความ: grid card --- */
.art-card { display:flex; flex-direction:column }
.art-card-frame {
  padding:3px;
  border-radius:14px;
  background:linear-gradient(90deg,#5188C9 0%,#3CECFB 25%,#FBFFFF 50%,#3CECFB 75%,#5188C9 100%);
  box-shadow:0 0 12px rgba(60,236,251,.3);
}
.art-card-img {
  display:block;
  width:100%;
  height:126px;
  object-fit:cover;
  border-radius:11px;
}
.art-card-ttl { margin-top:16px; color:#fff; font-size:24px; font-weight:500 }
.art-card-exc { margin-top:10px; color:#9fb3d0; font-size:15px; line-height:24px; font-weight:400 }
.art-card-more {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  text-decoration:none;
}
.art-card-more-txt  { color:#f0a12a; font-size:16px; font-weight:500 }
.art-card-more-icon { color:#f0a12a; font-size:16px }

/* --- คู่มือ: accordion chevron (moved out of desktop.css / pages.css) --- */
.faqwrap .fh > svg.guide-acc-chev {
  position:absolute;
  right:34px;
  top:50%;
  transform:translateY(-50%);
  transition:transform .22s;
}
.faqwrap .faq.open .fh > svg.guide-acc-chev { transform:translateY(-50%) rotate(180deg) }

/* --- mobile card sizes (were inline width/height args to pg_gcard) --- */
.m-gcard.sub.m-gcard-promo { width:311px; height:311px }
/* 311x311, not the 311x299 this used to say: measured off PAGE/รับเหรียญ mobile.png,
   the coin card in the design is square like the promotion one, and the 12px
   difference was cropping a strip off the top and bottom of every card. */
.m-gcard.sub.m-gcard-coin  { width:311px; height:311px }
.m-gcard.sub.m-gcard-art   { width:311px; height:104px }

/* --- side badge close button ---
   The static build used 34px on index.html and 36px on every sub-page. Keeping
   that difference rather than unifying it, so no page moves. */
body.home .side-x { width:34px; height:34px }

/* =========================================================
 * Desktop nav — built by pg_desktop_nav() in inc/helpers.php
 * Values taken verbatim from the static build's nav markup. inc/ was missed by
 * the first Tailwind sweep, so these nine links had no styling once the CDN went.
 * ====================================================== */
.head-nav-link {
  position:relative;
  flex:1 1 0%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-decoration:none;
}
.head-nav-glow {
  position:absolute;
  left:4px;
  right:4px;
  top:0;
  bottom:0;
  border-bottom-left-radius:18px;
  border-bottom-right-radius:18px;
  background:linear-gradient(180deg,rgba(60,236,251,0.35),rgba(20,120,200,0.12));
  border:1px solid rgba(90,220,255,0.7);
  border-top:none;
  box-shadow:0 0 22px rgba(60,236,251,0.55),inset 0 0 18px rgba(60,236,251,0.25);
}
.head-nav-icon {
  width:42px;
  height:42px;
  object-fit:contain;
}
.head-nav-icon.is-active {
  position:relative;
  filter:drop-shadow(0 0 6px rgba(60,236,251,0.9));
}
.head-nav-label {
  color:#fff;
  font-size:17px;
  font-weight:400;
  white-space:nowrap;
}
.head-nav-label.is-active {
  position:relative;
  font-weight:500;
}

/* =========================================================
 * Desktop footer — sub-page variant (template-parts/desktop-footer-sub.php)
 * Values verbatim from promotion.html / article.html / credit.html /
 * download.html / entry.html / guide.html.
 * ====================================================== */
/* Pinned to the bottom of the fixed-height sub-pages… */
.dfoot-sub {
  position:absolute;
  left:0;
  bottom:0;
  width:1921px;
  height:317px;
  overflow:hidden;
  background:linear-gradient(180deg,#002455,#001433);
  border-top:1px solid rgba(60,236,251,0.3);
}

/* …but in normal flow on the pages whose frame is content-sized, so it rides up
   when there are fewer cards instead of leaving a gap. The margin is the gap the
   static page has between frame and footer, so design-sized content is identical. */
.page-flow .dfoot-sub {
  position:relative;
  bottom:auto;
  margin-top:127px;
}
.page-gap-article .dfoot-sub { margin-top:84px }
.dfoot-sub-glow {
  position:absolute;
  left:0;
  right:0;
  top:0;
  width:1446px;
  margin:auto;
}
.dfoot-sub-glow-img { width:100%; height:100% }

.dfoot-sub-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:64px 228px 0 228px;
}

.dfoot-sub-brand { display:flex; flex-direction:column; gap:16px; width:420px }
.dfoot-sub-logo {
  width:150px;
  height:150px;
  filter:drop-shadow(0 0 13px rgba(60,236,251,0.4));
}
.dfoot-sub-logo-img { width:100%; height:100%; object-fit:contain }
.dfoot-sub-desc { color:#9fb0c9; font-size:14px; font-weight:400; line-height:1.6 }

.dfoot-sub-menu { display:flex; flex-direction:column; gap:18px; margin-top:8px }
.dfoot-sub-h    { color:#fff; font-size:20px; font-weight:500 }
.dfoot-sub-cols { display:flex; gap:80px }
.dfoot-sub-col  { display:flex; flex-direction:column; gap:16px }
.dfoot-sub-link { color:#cfd8e8; font-size:16px; font-weight:400; white-space:nowrap }

.dfoot-sub-dl   { display:flex; flex-direction:column; gap:16px; align-items:flex-start; margin-top:8px }
.dfoot-sub-btns { display:flex; gap:16px }
.dfoot-sub-btn-blue,
.dfoot-sub-btn-org {
  display:flex;
  height:44px;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,0.5);
  border-radius:40px;
}
.dfoot-sub-btn-blue {
  padding-left:40px;
  padding-right:40px;
  background-image:linear-gradient(to bottom,#1cc2f2,#116fc7,#1252ac);
}
.dfoot-sub-btn-org {
  padding-left:32px;
  padding-right:32px;
  background-image:linear-gradient(to bottom,#efad3d,#eb6010);
}
.dfoot-sub-btn-txt { color:#f0f0f0; font-size:18px; font-weight:500; white-space:nowrap }

.dfoot-sub-store      { display:flex; gap:16px }
.dfoot-sub-store-item { position:relative; width:180px; height:56px; display:block }
.dfoot-sub-store-bg   { position:absolute; inset:0; width:100%; height:100% }
.dfoot-sub-store-in {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:18px;
}
.dfoot-sub-store-ic     { flex-shrink:0; width:24px; height:31px }
.dfoot-sub-store-ic2    { flex-shrink:0; width:26px; height:30px }
.dfoot-sub-store-ic-img { width:100%; height:100%; object-fit:contain }
.dfoot-sub-store-tx     { display:flex; flex-direction:column; gap:3px; align-items:flex-start }
.dfoot-sub-store-t1     { height:9px }
.dfoot-sub-store-t2     { height:21px }
.dfoot-sub-store-t-img  { height:100%; width:auto; object-fit:contain; object-position:left }

.dfoot-sub-copy {
  position:absolute;
  left:0;
  right:0;
  bottom:16px;
  text-align:center;
  color:#7d8ba5;
  font-size:13px;
  font-weight:400;
}

/* =========================================================
 * Side badges — template-parts/side-badges.php
 * Two variants from the static build: 196px on index.html, 320px elsewhere.
 * ====================================================== */
.side-badge   { position:fixed; top:50%; z-index:60; transform:translateY(-50%) }
.side-badge-l { left:8px;  transform-origin:left center }
.side-badge-r { right:8px; transform-origin:right center }
.side-x-r     { right:0 }

.side-box     { position:relative }
.side-pic     { position:absolute; display:block }
.side-pic-img { width:100%; height:100%; object-fit:contain }

/* small (index.html) */
.side-box-sm-l  { width:196px; height:196px }
.side-pic-sm-l  { left:0; top:0; width:196px; height:196px }
.side-box-sm-r  { width:196px; height:340px }
.side-pic-sm-r  { left:0; top:0; width:196px; height:196px }
.side-btns-sm   { left:8px; top:164px; width:179px; gap:8px }
.side-btns-sm .side-btn     { padding:8px 24px }
.side-btns-sm .side-btn-txt { font-size:24px }

/* large (sub-pages) */

.side-btns {
  position:absolute;
  display:flex;
  flex-direction:column;
}
.side-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  border-radius:9999px;
  border-style:solid;
  border-width:1px;
}
.side-btn-org  { background-image:linear-gradient(to bottom,#f9d01b,#e25c15); border-color:rgba(199,131,5,0.5) }
.side-btn-blue { background-image:linear-gradient(to bottom,#0062ff,#002c84); border-color:rgba(80,133,218,0.5) }
.side-btn-line { background-image:linear-gradient(to bottom,#2ab74a,#006a18); border-color:rgba(42,183,74,0.5) }
.side-btn-txt  { color:#fff; font-weight:500; white-space:nowrap }



/* =========================================================
 * Desktop card sliders (Promotion / Big Win / Game)
 * The static build drew eight fixed dot images under each row, so the bullets
 * never matched the number of items and nothing auto-advanced. These are real
 * Swiper rows now; the bullets are generated from the slide count.
 * ====================================================== */
.home-slider { width:100%; overflow:hidden }
.home-slider .swiper-slide { height:auto }

/* a card fills its slide instead of being a flex child of the old row */
.home-slider .home-card,
.home-slider .home-tile { flex:none; width:100%; min-width:0 }

.pg-dots {
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  height:24px;
  margin-top:23px;
  width:100%;
}
/* Swiper writes the bullets in here; keep the row's height either way so the
   section below does not jump when a post is added or removed. */
.pg-dots:empty { visibility:hidden }
.pg-dots .swiper-pagination-bullet {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#1b4f86;
  opacity:1;
  margin:0;
  cursor:pointer;
  transition:background .2s, box-shadow .2s;
}
.pg-dots .swiper-pagination-bullet-active {
  background:#3cecfb;
  box-shadow:0 0 8px rgba(60,236,251,.85);
}

/* =========================================================
 * Vector frame (reusable)
 *
 * assets/imgUnion*.svg carries preserveAspectRatio="none", so stretching it to a
 * taller box skews the 45° corner chamfers. The same shape already exists as the
 * .fclip / .fclipIn clip-paths, whose bottom edge is calc(100% - …) — those keep
 * every corner exact at any height, which is what a content-sized frame needs.
 *
 * Colours are imgUnion.svg's own two gradients, so the frame looks identical:
 *   fill  vertical   #001433 -> #065498
 *   edge  horizontal #5188C9 -> #3CECFB -> #FBFFFF -> #3CECFB -> #5188C9  (3px)
 *
 * Usage — inside a position:relative box:
 *   <div class="fclip uframe-edge"></div>
 *   <div class="fclipIn uframe-fill"></div>
 * ====================================================== */
.uframe-edge {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#5188C9 0%,#3CECFB 25%,#FBFFFF 50%,#3CECFB 75%,#5188C9 100%);
  filter:drop-shadow(0 0 16px rgba(60,190,255,.35));
}
.uframe-fill {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#001433 0%,#065498 100%);
}

/* =========================================================
 * SEO copy coming from an ACF field
 *
 * The Figma export put line-height:0 on the frame's text wrapper and
 * line-height:normal back on every child <p>. Copy pasted from a wysiwyg field
 * has no such classes, so the wrapper needs to normalise its own children —
 * otherwise every line collapses on top of the next.
 *
 * Values are the ones the export used: 16px / 400 / white / normal leading,
 * paragraphs flush (margin 0) and links in the design's blue.
 * ====================================================== */
.pg-copy {
  line-height:normal;
  font-size:16px;
  font-weight:400;
}
/* White by default — a few wrappers carried no colour of their own, and copy
   coming from a field then fell through to the browser default (black on the dark
   canvas). The two "หมายเหตุ" blocks are the only intentional exception. */
.pg-copy            { color:#fff }
.pg-copy *          { color:inherit }
.pg-copy a          { color:#6cc6ff }
.home-frame-box-11.pg-copy,
.credit-frame-box-11.pg-copy { color:#f9d01b }

/* The row inside .home-seo-absolute-5: picture on the left, copy beside it. The
   design's own values — landing-pgslot/index.html has
   `flex gap-[24px] items-start shrink-0 w-full` here, with .home-seo-box-5 as a
   second, full-width copy block below it (the column's gap-[32px] separates the
   two). Both copy boxes come from their own ACF field, so the editor controls
   where the text breaks; this used to be one field with a floated image, which
   produced the same shape but gave no way to say "this part goes underneath". */
.home-seo-row {
  display:flex;
  gap:24px;
  align-items:flex-start;
  position:relative;
  flex-shrink:0;
  width:100%;
}
.pg-copy > *:first-child { margin-top:0 }
.pg-copy > *:last-child  { margin-bottom:0 }
.pg-copy p,
.pg-copy li,
.pg-copy span,
.pg-copy strong,
.pg-copy em {
  line-height:normal;
  font-size:inherit;
}
.pg-copy p { margin:0 }
.pg-copy h1, .pg-copy h2, .pg-copy h3, .pg-copy h4 {
  font-size:inherit;
  font-weight:600;
  line-height:normal;
  margin:0;
}
.pg-copy a { color:#6cc6ff; cursor:pointer; line-height:normal }
.pg-copy ul, .pg-copy ol { margin:0; padding-left:1.4em; list-style:revert }
.pg-copy img { max-width:100%; height:auto }

/* --- "ข้อความนำ" above a card list (pg_page_intro) ---
   The field existed from the start but no template ever printed it. */
.pg-page-intro {
  position:relative;
  margin:0 98px 32px;
}
/* the frame's own padding already provides the top inset */

/* --- home SEO / activity frames ---
   The six frames used to be a stretched imgUnion*.svg inside a box with a
   hard-coded height (1008 / 1824 / 1037 / 837 / 2038 / 758px) — fine while the
   copy was hard-coded too, but the copy comes from ACF now and can be any
   length. The frame graphic is .fclip/.fclipIn (vector, exact corners at any
   height) and the copy sits in normal flow with a symmetric 120px inset, so
   each frame is exactly as tall as its own content. */
.home-download-box-4,
.home-seo-box,
.home-seo-box-2,
.home-seo2-box,
.home-seo2-box-3,
.home-frame-box-21 { position:relative; width:100% }
.credit-main-box-2 { position:relative; width:100% }
.page-gap-credit .dfoot-sub { margin-top:48px }
.page-gap-download .dfoot-sub { margin-top:342px }
.page-gap-entry    .dfoot-sub { margin-top:83px }
.page-gap-guide    .dfoot-sub { margin-top:86px }

/* Wrappers with a deliberate colour keep it regardless of rule order. */
.home-download-absolute-10.pg-copy,
.home-seo-absolute-3.pg-copy,
.home-seo2-box-2.pg-copy,
.credit-main-box-6.pg-copy { color:#fff }
.dl-body-absolute.pg-copy,
.entry-sec-absolute-4 .pg-copy,
.entry-sec-txt-2.pg-copy { color:#e9eff8 }

/* Uploaded store badges keep their own aspect ratio in both desktop footers. */
.dfoot-sub-store-item > img.pg-store-img,
.dfoot-download-box img.pg-store-img { object-fit:contain; object-position:left center }

/* =========================================================
 * Hero banner — dim the side slides
 * The coverflow effect already scales the neighbours down; darkening them as
 * well makes the centre slide read as the active one.
 * ====================================================== */
#heroBanner .swiper-slide,
#mBanner .swiper-slide { position:relative }

#heroBanner .swiper-slide::after,
#mBanner .swiper-slide::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  border-radius:16px;
  background:rgba(0,6,20,.6);
  transition:background .35s ease;
}
#mBanner .swiper-slide::after { border-radius:10px }

/* the centre slide stays clear */
#heroBanner .swiper-slide-active::after,
#mBanner .swiper-slide-active::after { background:rgba(0,6,20,0) }

/* =========================================================
 * Card with no featured image yet
 * Dropping the whole card made posts look like they had vanished (the admin can
 * see them in Posts but not on the page). The card keeps its frame and shows the
 * post title instead, so the post is visible and obviously needs a picture.
 * ====================================================== */
.pg-card-noimg {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:inherit;
  padding:18px;
  box-sizing:border-box;
  text-align:center;
  color:#cfe4ff;
  font-size:20px;
  font-weight:500;
  line-height:1.35;
  background:linear-gradient(180deg,#0b2a52 0%,#08203f 100%);
}
.art-card-noimg { height:126px; font-size:15px }

/* =========================================================
 * Card artwork: no object-fit at all on โปรโมชั่น and รับเหรียญฟรี
 *
 * .gcard>img and .m-gcard>img use object-fit:cover (as the static build does),
 * and .promo-card-img repeats it. cover silently crops whatever does not match
 * the box — on the รับเหรียญฟรี cards it ate the bottom line of the artwork — so
 * these two pages were switched to contain, which showed the whole picture but
 * paid for it with letterbox bars whenever the ratios were a hair apart.
 *
 * Client's decision: neither. `fill` IS the property's initial value, so this is
 * object-fit switched off — the picture simply occupies its box, nothing cropped
 * and no bars. It works because the boxes now match the artwork: the รับเหรียญฟรี
 * card is square (aspect-ratio:1/1) like its square artwork, and the desktop
 * โปรโมชั่น card's 390x370 content box matches promo art at 401x380 to within a
 * tenth of a percent. Off-ratio artwork is stretched rather than cut.
 *
 * บทความ keeps contain: .art-card-frame has no fixed height, and the hero banner
 * keeps cover — it is authored 3:1 and meant to fill.
 * ====================================================== */
.coins-card-img { background:#08203f }
.coins-card-img > img,
.promo-card-img { object-fit:fill }
.art-card-img { object-fit:contain }

.m-gcard.m-gcard-promo,
.m-gcard.m-gcard-coin { background:#08203f }
.m-gcard.m-gcard-promo > img,
.m-gcard.m-gcard-coin > img { object-fit:fill }

/* =========================================================
 * Uploaded artwork is never upscaled or cropped
 *
 * The design was cut to the exact pixel size of every box, so the boxes were
 * written as exact pixels too:
 *
 *   .home-seo-box-3    width:597px; height:597px   (+ the <img> at inset:0, cover)
 *   .coins-card-img    width:396px; height:381px
 *
 * A picture uploaded from wp-admin is whatever size the client has. Forced into a
 * fixed box, a smaller one is stretched up until it goes soft, and `cover` cuts
 * whatever does not match the box's ratio off the edges.
 *
 * The Big Win and Promotion cards on the front page never had that problem
 * because they were written as a ratio, not a size:
 *
 *   .home-card { aspect-ratio:1254/1254 }
 *
 * The three boxes above follow that lead now. The two SEO pictures size
 * themselves from the file and are only ever scaled *down* (max-width, height
 * auto — an <img> with no width renders at its natural size), and the
 * รับเหรียญฟรี card is a square ratio like Big Win's, so square artwork fills it
 * exactly instead of being letterboxed by the old 396x381.
 *
 * The ratio alone could not repair a file that was already cut, and both coin
 * card files were: assets/coins-shop.png and assets/coins-newmember.png shipped
 * as 387x371 / 386x371 crops of square artwork, missing the PG SLOT badge at the
 * top and the conditions line at the bottom. Both are square now — rebuilt from
 * PAGE/รับเหรียญ mobile.png, where the card measures 311x311 and shows the whole
 * picture. See pgslot99_resync_coin_cards() for pushing them onto a site that was
 * installed with the cut versions.
 * ====================================================== */

/* --- the two front-page SEO pictures ---
   Both sit in a .home-seo-box-3 wrapper and were absolutely positioned to fill
   it; they go back to normal flow so the wrapper shrinks to the picture instead
   of the picture stretching to the wrapper. Written as img.<class> rather than
   .<class> because `.pg-copy img { max-width:100% }` above is (0,1,1) and would
   otherwise out-rank a bare class. */
img.home-seo-absolute-6 {
  display:block;
  position:static;
  inset:auto;
  max-width:100%;        /* the wrapper below is what caps the width at 597px */
  width:auto;
  height:auto;
  object-fit:fill;       /* nothing to fit: the box follows the picture */
  border:5px solid #5188c9;
  border-radius:16px;
  background:#08203f;
}
.home-seo-box-3 {
  width:auto;
  height:auto;
  max-width:597px;       /* the design's own slot — a ceiling now, not a size, so a
                            bigger upload scales down to it and a smaller one is
                            left at its own size instead of being stretched up */
  line-height:0;         /* no descender gap under the picture */
}

/* --- รับเหรียญฟรี card ---
   The <a> between the card and its frame is a flex item under
   align-items:center, so it sizes to its content. With width:100% on the frame
   that is circular — content width depends on the <a>, the <a> on the content —
   and both collapsed to nothing. Stretching the link to the card's own width
   gives the percentage something definite to resolve against. */
.coins-card-link {
  width:100%;
}
.coins-card-img {
  width:100%;
  height:auto;
  aspect-ratio:1/1;
}

/* =========================================================
 * โปรโมชั่น / บทความ cards get the รับเหรียญฟรี card border
 *
 * Both faked their border with padding:3px over a 90deg gradient. A horizontal
 * gradient is white (#FBFFFF) at the middle and #5188C9 at both ends, so the
 * edge read as bright across the centre of the top and bottom and all but
 * vanished down the left and right — the border looked a different size on every
 * side. The รับเหรียญฟรี cards use .gcard instead: an even 5px #5188C9 border on
 * all four sides, with the light streak riding the top and bottom edges.
 *
 * The border lives here rather than on .gcard itself because .gcard also pins its
 * <img> with position:absolute, which the article card (a frame with no fixed
 * height) cannot use. Same look, same numbers, image left in normal flow.
 * ====================================================== */
.promo-card,
.art-card-frame {
  position:relative;
  padding:0;
  border:5px solid #5188c9;
  border-radius:16px;
  background:#08203f;
}
.promo-card::before,
.promo-card::after,
.art-card-frame::before,
.art-card-frame::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:5px;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(90deg,rgba(79,238,251,0) 0%,rgba(79,238,251,.45) 16%,rgba(79,238,251,.95) 34%,#ffffff 50%,rgba(79,238,251,.95) 66%,rgba(79,238,251,.45) 84%,rgba(79,238,251,0) 100%);
}
.promo-card::before,
.art-card-frame::before { top:-5px }
.promo-card::after,
.art-card-frame::after { bottom:-5px }

/* inner radius = outer 16px - 5px border, as .gcard>img has it */
.promo-card-img,
.art-card-img { border-radius:11px }

/* =========================================================
 * Frame layers stay behind their content
 *
 * .uframe-edge / .uframe-fill / .fclip / .fclipIn are position:absolute, and CSS
 * paints positioned boxes AFTER non-positioned ones in the same stacking context.
 * A content wrapper without its own `position` therefore ended up *underneath*
 * the frame fill: the promotion and article grids vanished completely, and on
 * รับเหรียญฟรี the cards survived (.gcard is position:relative) while the plain
 * <p> caption did not.
 *
 * Pinning the layers to z-index:0 makes that impossible to reintroduce, whatever
 * a future wrapper does.
 * ====================================================== */
.uframe-edge,
.uframe-fill,
.fclip,
.fclipIn { z-index:0 }

/* --- store badges ---
   The client supplied one flat 236x73 image per store, so the badge is a single
   <img> instead of the design's four-piece SVG composite. Options can override
   the file; the plate follows whatever image is used so nothing is stretched. */
.dfoot-download-box-5 { display:block; width:236px; height:auto; position:relative }
.dfoot-download-box-5 > img.pg-store-img,
.dfoot-sub-store-item > img.pg-store-img {
  position:relative;
  inset:auto;
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.dfoot-sub-store-item { width:180px; height:auto }

/* =========================================================
 * Hexagonal title pill on the desktop canvas
 *
 * pg_pill() is used by page.php and single.php, but .pill was only ever styled
 * inside .m-art (the mobile frame) — on desktop the three plate images fell out
 * at their natural size and the caption dropped underneath them as plain text.
 * Geometry mirrors the pill the รับเหรียญฟรี page builds inline.
 * ====================================================== */
#page .pill {
  position:absolute;
  left:50%;
  top:-10px;
  transform:translateX(-50%);
  width:430px;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:10;
}
#page .pill .bar   { position:relative; flex-shrink:0; width:192px; height:5px }
#page .pill .plate { position:relative; flex-shrink:0; width:430px; height:80px }
#page .pill .bar > img,
#page .pill .plate > img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
}
#page .pill > span {
  position:absolute;
  left:50%;
  top:calc(50% - 24px);
  transform:translateX(-50%);
  font-size:32px;
  font-weight:600;
  line-height:normal;
  color:#fff;
  text-align:center;
  white-space:nowrap;
}
.page-gap-auto .dfoot-sub { margin-top:96px }

/* =========================================================
 * Every page uses the front page's footer (.dfoot-box)
 *
 * pg_canvas() returns 'home' for all eight pages now, so .dfoot-sub above is
 * dormant — but the frame-to-footer gap it carried per page is still the design's
 * spacing, and .dfoot-box's own margin-top:96px is only right for the front page
 * and รับเหรียญฟรี. Each gap is repeated here for .dfoot-box so switching the
 * footer changed the footer and nothing else.
 *
 * Kept in one block after every .page-gap-* rule above: these are all 0,2,0
 * specificity, so they beat the plain .dfoot-box rule, and only one page-gap-*
 * class is ever on #page at a time.
 * ====================================================== */
/* =========================================================
 * เครดิตฟรี claim form — real controls inside the design's boxes
 * inc/credit-claim.php
 *
 * The design drew the field, the drop zone and the button as <div>s with text in
 * them. They are an <input>, a <label> and a <button> now, sitting in the very
 * same wrappers, so the only styling needed is to stop the browser's own control
 * chrome from showing through: no border, no background, inherited type. Nothing
 * here changes a box the design measured.
 * ====================================================== */
.pg-input {
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  font:inherit;
  line-height:normal;   /* the cell it sits in has line-height:0 */
  color:#f0f0f0;
}
.pg-input::placeholder { color:#717171; opacity:1 }
.pg-input:focus-visible { outline:1px solid rgba(60,236,251,.55); outline-offset:3px }

/* .m-form .inp is a border + padding rule the design already defines, so the
   mobile field only needs the colour and the reset above. */
.m-form input.inp { color:#f0f0f0 }

/* The drop zone is a <label> wrapping a hidden file input, so a click anywhere in
   the dashed box opens the picker — including on the icon and the caption. */
.pg-drop { cursor:pointer }
.pg-file {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.pg-drop:focus-within { border-color:rgba(60,236,251,.5) }
/* claim.js writes how many images were chosen in here; it turns cyan so it is
   obvious the pick worked. */
.pg-drop.has-file .pg-drop-txt { color:#3cecfb }

/* The previews of a multiple pick. Empty until claim.js fills it, so the box keeps
   the height the design measured until there is something to show. */
.pg-thumbs {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  align-items:center;
  width:100%;
}
.pg-thumbs:empty { display:none }

.pg-thumb {
  position:relative;
  display:block;
  width:64px;
  height:64px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(60,236,251,.35);
  background:rgba(0,0,0,.5);
}
/* object-fit so a tall phone screenshot and a wide desktop one sit in the same
   square instead of stretching. */
.pg-thumb img { width:100%; height:100%; object-fit:cover; display:block }

.pg-thumb-x {
  position:absolute;
  top:0;
  right:0;
  width:18px;
  height:18px;
  padding:0;
  border:0;
  border-bottom-left-radius:6px;
  background:rgba(0,0,0,.72);
  color:#fff;
  /* Spelled out rather than the font shorthand: the shorthand cannot take
     font-family:inherit, so `font:600 12px/18px inherit` is invalid and the whole
     declaration is dropped — which left the ✕ in the browser's serif default. */
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  line-height:18px;
  text-align:center;
  cursor:pointer;
}
.pg-thumb-x:hover,
.pg-thumb-x:focus-visible { background:#b32d2e }

/* Not a button: it sits inside the <label>, so a click on it opens the picker on
   its own. Sized to match a thumbnail so the strip stays even. */
.pg-thumb-add {
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:6px;
  border:1px dashed rgba(60,236,251,.35);
  color:#3cecfb;
  font-size:11px;
  text-align:center;
  line-height:1.2;
}

.pg-drop-err {
  width:100%;
  color:#ff8a8a;
  font-size:11px;
  line-height:1.4;
  text-align:center;
}

.pg-submit {
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  cursor:pointer;
}
.pg-submit[disabled] { cursor:default; opacity:.6 }

/* The honeypot: off-screen rather than display:none, because some bots skip
   hidden inputs but not positioned ones. Never shown to a person. */
.pg-claim-hp {
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.pg-claim-msg {
  position:relative;
  width:100%;
  margin:0;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  line-height:1.5;
  font-weight:400;
}
.pg-claim-msg.is-ok  { background:rgba(10,124,47,.18);  border:1px solid rgba(60,236,251,.45); color:#d6ffe4 }
.pg-claim-msg.is-err { background:rgba(179,45,46,.18); border:1px solid rgba(255,120,120,.45); color:#ffdede }

/* =========================================================
 * Participant list pager (assets/pager.js)
 *
 * The design draws the page numbers and arrows as plain <div>/<span>, which give
 * no hover cue and let a double-click select the digit. These four lines are the
 * only styling the working pager needed — the highlight itself reuses the
 * design's own current-page class, swapped by pager.js.
 * ====================================================== */
.pg-num,
.pg-nav {
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
}
.pg-nav[aria-disabled="true"] { cursor:default }

.page-gap-promotion .dfoot-box { margin-top:127px }  /* .page-flow default */
.page-gap-article   .dfoot-box { margin-top:84px }
.page-gap-credit    .dfoot-box { margin-top:48px }
.page-gap-download  .dfoot-box { margin-top:342px }
.page-gap-entry     .dfoot-box { margin-top:83px }
.page-gap-guide     .dfoot-box { margin-top:86px }
.page-gap-auto      .dfoot-box { margin-top:96px }

/* =========================================================
 * ดาวน์โหลด — the app picture is a link when "ลิงก์ดาวน์โหลด" is filled in
 *
 * The <a> sits between the sized box and the <img>, and both templates size the
 * picture as a percentage of its parent: .dl-app-img is width/height:100% of the
 * 594x456 .dl-app-absolute, .dlapp img is width:100% of the 311px .dlapp. An
 * inline <a> has no definite size of its own, so those percentages would resolve
 * against nothing and the picture would collapse — the same trap
 * .coins-card-link fell into. Stretching the link to its box fixes both.
 * ====================================================== */
.dl-app-link {
  display:block;
  width:100%;
  height:100%;
}

/* …and the link still could not be clicked, because .dl-body-absolute covers it.
 * That block is `position:relative; width:1280px; margin:0 auto;
 * padding:808px 0 120px` — the 808px of top padding is how the design pushes the
 * copy below the two pictures, so its *box* spans the whole top of the section,
 * pictures included. It comes after them in the DOM and is positioned, so it
 * paints on top and swallows every click: elementFromPoint at the centre of the
 * app picture returned DIV.dl-body-absolute, not the <a>.
 *
 * Lifting the two picture boxes above it costs nothing visually — the copy's
 * padding area is empty where they sit — and hands the clicks back.
 * ====================================================== */
.dl-banner-absolute,
.dl-app-absolute { z-index:1 }

/* =========================================================
 * Footer "เมนูลัด" — nine entries instead of the design's seven
 *
 * The quick menu is the header menu now (see pg_footer_menu_columns()), so the
 * two columns carry 5 + 4 rows where the design drew 4 + 3. Desktop just fits:
 * .ft-col is top:104px with 19px rows and a 24px gap, so five rows end at 295px
 * inside the 317px .dfoot-box. Six would end at 338 and be clipped, which is
 * what .tight is for — pg_footer_col_class() adds it past five rows.
 *
 * Mobile has no room to spare: #mFoot pins .btns at 440px and five 29px rows
 * starting at 338px end at 483px, straight through the buttons. The whole lower
 * half moves down 60px and the footer grows to match.
 * ====================================================== */
.ft-col.tight { gap:12px }

/* Unwrapped, like the #mFoot rules in mobile.css: the whole mobile canvas is
   already hidden above 767px by #stageM. */
#mFoot { height:696px }
#mFoot .btns { top:500px }
#mFoot .store { top:552px }