/* ==========================================================================
   VOLT PLAY — design system (aubergine + orange)
   โทเคนสี/ฟอนต์มาจาก theme.json · ไฟล์นี้จัด layout + component
   คลาสขึ้นต้นด้วย .vs- ทั้งหมด เพื่อไม่ชนกับบล็อก/ปลั๊กอินอื่น
   ========================================================================== */

:root {
	--vs-accent: var(--wp--preset--color--accent, #ff9233);
	--vs-accent-deep: var(--wp--preset--color--accent-deep, #e86a18);
	--vs-accent-light: var(--wp--preset--color--accent-light, #ffc07a);
	--vs-ink: var(--wp--preset--color--base, #160f1d);
	--vs-ink-2: var(--wp--preset--color--surface, #271d2f);
	--vs-panel: var(--wp--preset--color--panel, #1e1527);
	--vs-line: var(--wp--preset--color--line, #2e2438);
	--vs-light: var(--wp--preset--color--light, #fff);
	--vs-light-2: var(--wp--preset--color--light-2, #f6f9fd);
	--vs-line-light: var(--wp--preset--color--line-light, #e8ecf3);
	--vs-text: var(--wp--preset--color--text, #160f1d);
	--vs-muted: var(--wp--preset--color--muted, #6b6274);
	--vs-on-dark: var(--wp--preset--color--on-dark, #fff);
	--vs-on-dark-2: var(--wp--preset--color--on-dark-2, #c9bfd2);
	--vs-gold: var(--wp--preset--color--gold, #e9c67c);
	--vs-header-h: 88px;
	--vs-header-h-sm: 64px;
	--vs-wrap: 1200px;
	--vs-radius: 10px;
	--vs-pill: 32px;
	--vs-wave-h: 64px;
	--vs-font: var(--wp--preset--font-family--body, "Poppins", "Prompt", sans-serif);
	--vs-font-heading: var(--wp--preset--font-family--heading, "Poppins", "Prompt", sans-serif);
}

/* ---------------------------------------------------------------- base */
body {
	font-family: var(--vs-font);
	-webkit-font-smoothing: antialiased;
}

.wp-site-blocks {
	overflow-x: hidden;
}

h1, h2, h3, h4, .wp-block-heading {
	font-family: var(--vs-font-heading);
	/* ภาษาไทยต้องมี line-height >= 1.3 ไม่งั้นวรรณยุกต์ตัดกับบรรทัดบน */
	line-height: 1.34;
	letter-spacing: 0;
}

.has-text-align-center a,
a {
	text-decoration: none;
}

.vs-accent-text {
	color: var(--vs-accent);
}

.vs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--vs-accent-light);
}

.vs-eyebrow::before {
	content: "";
	width: 34px;
	height: 2px;
	background: var(--vs-accent);
}

/* ---------------------------------------------------------------- header */
.vs-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 90;
	display: flex;
	align-items: center;
	height: var(--vs-header-h);
	margin: 0 !important;
	padding: 0 24px !important;
	max-width: none !important;
	width: 100%;
	background: rgba(22, 15, 29, 0.9);
	backdrop-filter: blur(10px);
	transition: background 0.3s, height 0.3s, box-shadow 0.3s;
}

body:not(.vs-has-sticky-header) .vs-header {
	position: relative;
	inset: auto;
}

body.vs-header-over-hero .vs-header {
	background: linear-gradient(180deg, rgba(22, 15, 29, 0.92), rgba(22, 15, 29, 0));
	backdrop-filter: none;
}

.vs-header.is-stuck {
	height: var(--wp--custom--header-height-stuck, 72px);
	background: var(--vs-ink);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(10px);
}

.vs-header__in {
	display: flex;
	align-items: center;
	gap: 28px;
	width: 100%;
	max-width: var(--vs-wrap);
	margin-inline: auto;
	flex-wrap: nowrap;
}

.vs-brand {
	gap: 10px;
	margin: 0 !important;
}

.vs-brand__title,
.vs-brand .wp-block-site-title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--vs-on-dark);
}

.vs-brand .wp-block-site-title a {
	color: inherit;
}

.vs-brand__logo img,
.vs-brand .custom-logo {
	max-height: 42px;
	width: auto;
}

/* navigation (core/navigation) */
.vs-nav {
	margin-inline: auto;
	--wp--preset--color--foreground: #fff;
}

.vs-nav .wp-block-navigation__container {
	gap: 4px;
}

.vs-nav .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding: 10px 16px;
	border-radius: 8px;
	color: var(--vs-on-dark);
	font-size: 15px;
	transition: color 0.2s, background 0.2s;
}

.vs-nav .wp-block-navigation-item__content:hover,
.vs-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--vs-accent);
	background: rgba(255, 146, 51, 0.1);
}

/* submenu */
.vs-nav .wp-block-navigation__submenu-container {
	background: #1e1527;
	border: 1px solid var(--vs-line);
	border-radius: 12px;
	padding: 8px;
	min-width: 230px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.vs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--vs-on-dark-2);
	font-size: 14px;
}

.vs-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #fff;
	background: rgba(255, 146, 51, 0.14);
}

/* overlay menu (mobile) */
.vs-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: #160f1d;
	color: #fff;
	padding: 24px;
}

.vs-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #fff;
	font-size: 17px;
	padding: 14px 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.vs-nav .wp-block-navigation__responsive-container-close,
.vs-nav .wp-block-navigation__responsive-container-open {
	color: #fff;
}

/* CTA buttons */
.vs-cta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
}

.vs-cta .vs-btn,
.vs-cta .wp-block-button__link {
	font-size: 14px;
	padding: 11px 22px;
	border-radius: var(--vs-pill);
	white-space: nowrap;
}

.vs-btn--solid,
.vs-cta .vs-btn--solid {
	background: linear-gradient(180deg, var(--vs-accent-light), var(--vs-accent) 45%, var(--vs-accent-deep));
	color: #fff;
	box-shadow: 0 8px 22px rgba(255, 146, 51, 0.32);
}

.vs-btn--solid:hover {
	filter: brightness(1.06);
	color: #fff;
}

.vs-btn--ghost,
.vs-cta .vs-btn--ghost {
	background: transparent;
	border: 1px solid var(--vs-accent);
	color: var(--vs-accent);
}

.vs-btn--ghost:hover {
	background: var(--vs-accent);
	color: #fff;
}

.vs-btn--lg {
	padding: 16px 46px !important;
	font-size: 17px !important;
}

/* ---------------------------------------------------------------- main offset */
.vs-main {
	padding-top: var(--vs-header-h);
}

body.vs-header-over-hero .vs-main {
	padding-top: 0;
}

body.vs-has-mobile-bar {
	padding-bottom: 66px;
}

/* ---------------------------------------------------------------- wave divider */
.vs-wave-bottom {
	position: relative;
	padding-bottom: calc(72px + var(--vs-wave-h)) !important;
	overflow: hidden;
}

.vs-wave-bottom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: var(--vs-wave-h);
	background-color: var(--vs-wave-color, #ffffff);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0 74V36C220 6 470 0 720 19s470 46 720 17v38z'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 74' preserveAspectRatio='none'%3E%3Cpath d='M0 74V36C220 6 470 0 720 19s470 46 720 17v38z'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
	pointer-events: none;
	z-index: 2;
}

.vs-wave-to-light { --vs-wave-color: #ffffff; }
.vs-wave-to-soft  { --vs-wave-color: #f6f9fd; }
.vs-wave-to-dark  { --vs-wave-color: #160f1d; }
.vs-wave-to-dark2 { --vs-wave-color: #271d2f; }

/* ---------------------------------------------------------------- hero */
.vs-hero {
	position: relative;
	background: radial-gradient(120% 120% at 12% 30%, #3b2340 0%, #241733 42%, #160f1d 100%);
	color: var(--vs-on-dark);
	/* เผื่อ header ที่ลอยทับ */
	padding-top: calc(var(--vs-header-h) + 56px) !important;
	padding-bottom: 96px !important;
	max-width: none !important;
}

.vs-hero .wp-block-columns {
	max-width: var(--vs-wrap);
	margin-inline: auto;
	gap: 40px;
}

.vs-hero__title {
	margin: 0 0 10px;
	font-size: clamp(34px, 4.4vw, 60px);
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.vs-hero__sub {
	max-width: 46ch;
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--vs-on-dark-2);
}

.vs-hero__cta {
	gap: 14px;
	margin-bottom: 30px;
}

.vs-hero__cta .wp-block-button__link {
	padding: 15px 40px;
	font-size: 16px;
}

.vs-hero__meta {
	gap: 0;
	margin: 0 !important;
}

.vs-hero__meta p {
	margin: 0;
	font-size: 13px;
	color: var(--vs-on-dark-2);
}

.vs-hero__meta strong {
	display: block;
	margin-bottom: 2px;
	font-size: 22px;
	font-weight: 600;
	color: #fff;
}

/* deck (การ์ดเกม 3 ใบใน hero) */
.vs-deck {
	position: relative;
	height: 430px;
	margin: 0 !important;
}

.vs-deck__card {
	position: absolute;
	margin: 0 !important;
	border-radius: 10px;
	border: 1px solid rgba(233, 198, 124, 0.4);
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
	aspect-ratio: 2 / 3;
}

.vs-deck__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vs-deck__card--a {
	width: 38%;
	left: 2%;
	top: 16%;
	rotate: -7deg;
	z-index: 1;
	opacity: 0.94;
}

.vs-deck__card--c {
	width: 50%;
	left: 22%;
	top: 2%;
	z-index: 3;
}

.vs-deck__card--b {
	width: 36%;
	right: 0;
	top: 14%;
	rotate: 8deg;
	z-index: 2;
	opacity: 0.92;
}

/* hero banner (cover) */
.vs-hero-banner {
	min-height: 560px;
	display: flex;
	align-items: center;
	padding-block: calc(var(--vs-header-h) + 40px) 80px;
}

.vs-hero-banner .wp-block-cover__inner-container {
	max-width: var(--vs-wrap);
	width: 100%;
}

.vs-hero-banner h1 {
	color: #fff;
	max-width: 18ch;
}

/* ---------------------------------------------------------------- sections */
.vs-section {
	padding-block: var(--vs-section-pad, 84px);
	max-width: none !important;
}

.vs-section > * {
	max-width: var(--vs-wrap);
	margin-inline: auto;
}

.vs-section--light { background: var(--vs-light); color: var(--vs-text); }
.vs-section--soft { background: var(--vs-light-2); color: var(--vs-text); }
.vs-section--dark { background: var(--vs-ink); color: var(--vs-on-dark); }
.vs-section--dark2 { background: var(--vs-ink-2); color: var(--vs-on-dark); }

.vs-section--dark p,
.vs-section--dark2 p,
.vs-section--dark li,
.vs-section--dark2 li {
	color: var(--vs-on-dark-2);
}

.vs-section--dark h2,
.vs-section--dark h3,
.vs-section--dark2 h2,
.vs-section--dark2 h3 {
	color: var(--vs-on-dark);
}

.vs-sechead {
	margin: 0 auto 48px !important;
	text-align: center;
}

.vs-sechead h2 {
	margin: 0 0 14px;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 600;
	line-height: 1.34;
}

.vs-sechead__sub {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.85;
	color: var(--vs-muted);
}

.vs-section--dark .vs-sechead__sub,
.vs-section--dark2 .vs-sechead__sub {
	color: var(--vs-on-dark-2);
}

/* ---------------------------------------------------------------- features */
.vs-feat {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	text-align: center;
}

.vs-feat__item p {
	margin: 0;
}

.vs-feat__ico {
	font-size: 46px !important;
	line-height: 1 !important;
	color: var(--vs-accent);
	margin-bottom: 16px !important;
}

.vs-feat__cap {
	font-size: 15.5px;
	line-height: 1.6;
	color: #2c2333;
}

/* ---------------------------------------------------------------- row head + carousel */
.vs-rowhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.vs-rowhead__text h2 {
	margin: 0 0 12px;
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 600;
}

.vs-rowhead__text p {
	margin: 0;
	max-width: 78ch;
	font-size: 15px;
	line-height: 1.8;
}

.vs-row {
	margin: 0 !important;
}

.vs-row__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 64px) / 5);
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 8px;
	scrollbar-width: none;
	margin: 0 !important;
}

.vs-row__track::-webkit-scrollbar {
	display: none;
}

.vs-gcard {
	position: relative;
	aspect-ratio: 2 / 3;
	border-radius: 8px;
	overflow: hidden;
	scroll-snap-align: start;
	border: 1px solid rgba(233, 198, 124, 0.35);
	background: var(--wp--preset--color--panel);
	margin: 0 !important;
	transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.vs-gcard p {
	margin: 0;
}

.vs-gcard:hover {
	transform: translateY(-6px);
	border-color: var(--vs-accent);
	box-shadow: 0 16px 40px rgba(255, 146, 51, 0.28);
}

.vs-gcard__img,
.vs-gcard__img figure {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	height: 100%;
}

.vs-gcard__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vs-gcard__tag {
	position: absolute !important;
	top: 10px;
	right: 10px;
	z-index: 2;
	padding: 4px 9px;
	border-radius: 4px;
	background: rgba(255, 146, 51, 0.94);
	color: #fff !important;
	font-size: 10.5px !important;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.vs-gcard__name {
	position: absolute !important;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 26px 12px 12px;
	font-size: 13.5px !important;
	font-weight: 500;
	color: #fff !important;
	background: linear-gradient(180deg, transparent, rgba(9, 6, 12, 0.94));
}

/* ---------------------------------------------------------------- providers */
.vs-prov {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}

.vs-prov__item {
	margin: 0 !important;
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	height: 82px;
	display: grid;
	place-items: center;
	text-align: center;
	font-size: 13.5px !important;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--vs-on-dark-2) !important;
	transition: border-color 0.2s, color 0.2s, transform 0.2s;
}

.vs-prov__item a {
	color: inherit;
}

.vs-prov__item:hover {
	border-color: var(--vs-accent);
	color: #fff !important;
	transform: translateY(-3px);
}

/* ---------------------------------------------------------------- live casino */
.vs-lcards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.vs-lcard {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--vs-radius);
	overflow: hidden;
	border: 1px solid var(--vs-line);
	margin: 0 !important;
}

.vs-lcard__img,
.vs-lcard__img figure {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	height: 100%;
}

.vs-lcard__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s;
}

.vs-lcard:hover .vs-lcard__img img {
	transform: scale(1.05);
}

.vs-lcard__body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 26px 18px 16px;
	background: linear-gradient(180deg, transparent, rgba(9, 6, 12, 0.92));
	margin: 0 !important;
	z-index: 2;
}

.vs-lcard__name {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 600;
	color: #fff !important;
}

.vs-lcard__meta {
	margin: 0 !important;
	font-size: 12.5px !important;
	color: var(--vs-on-dark-2) !important;
}

/* ---------------------------------------------------------------- cards (3-up) */
.vs-cards3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.vs-pcard {
	background: #fff;
	border: 1px solid var(--vs-line-light);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(22, 15, 29, 0.06);
	margin: 0 !important;
	transition: transform 0.25s, box-shadow 0.25s;
}

.vs-pcard:hover {
	transform: translateY(-5px);
	box-shadow: 0 18px 40px rgba(22, 15, 29, 0.14);
}

.vs-pcard__head {
	aspect-ratio: 16 / 9;
	display: grid;
	place-content: center;
	gap: 2px;
	text-align: center;
	color: #fff;
	position: relative;
	margin: 0 !important;
}

.vs-pcard__head::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.22), transparent 45%);
	pointer-events: none;
}

.vs-pcard--g1 .vs-pcard__head { background: linear-gradient(135deg, #4a1f6b, var(--vs-accent) 130%); }
.vs-pcard--g2 .vs-pcard__head { background: linear-gradient(135deg, #2a1b4d, #5c3bb5 65%, var(--vs-accent) 150%); }
.vs-pcard--g3 .vs-pcard__head { background: linear-gradient(135deg, #123a4d, #0e7c86 60%, var(--vs-accent) 165%); }

.vs-pcard__num {
	margin: 0 !important;
	font-size: 52px !important;
	font-weight: 700;
	line-height: 1 !important;
}

.vs-pcard__label {
	margin: 0 !important;
	font-size: 13.5px !important;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.92;
}

.vs-pcard__body {
	padding: 22px;
	margin: 0 !important;
}

.vs-pcard__body h3 {
	margin: 10px 0 8px;
	font-size: 19px;
	line-height: 1.45;
}

.vs-pcard__body p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.75;
	color: var(--vs-muted);
}

.vs-tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	background: rgba(255, 146, 51, 0.14);
	color: var(--vs-accent-deep) !important;
	font-size: 11.5px !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 !important;
}

/* ---------------------------------------------------------------- news cards */
.vs-ncard {
	background: #fff;
	border: 1px solid var(--vs-line-light);
	border-radius: var(--vs-radius);
	overflow: hidden;
	margin: 0 !important;
	transition: transform 0.25s, box-shadow 0.25s;
}

.vs-ncard:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(22, 15, 29, 0.12);
}

.vs-ncard__img,
.vs-ncard__img img {
	border-radius: 0 !important;
	margin: 0 !important;
}

.vs-ncard__body {
	padding: 22px 22px 24px;
	margin: 0 !important;
}

.vs-ncard__title {
	margin: 10px 0 10px;
	font-size: 17px;
	line-height: 1.5;
}

.vs-ncard__title a {
	color: var(--vs-text);
}

.vs-ncard__excerpt {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--vs-muted);
}

.vs-ncard__date {
	margin: 0;
	font-size: 13px;
	font-style: italic;
	color: #8c8496;
}

/* ---------------------------------------------------------------- stats + steps */
.vs-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}

.vs-stats__item p {
	margin: 0;
}

.vs-stats__num {
	font-size: clamp(28px, 3vw, 40px) !important;
	font-weight: 700;
	line-height: 1.2 !important;
	color: var(--vs-accent);
}

.vs-stats__label {
	font-size: 14px !important;
	color: var(--vs-on-dark-2) !important;
	margin-top: 6px !important;
}

.vs-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.vs-step {
	background: #fff;
	border: 1px solid var(--vs-line-light);
	border-radius: 12px;
	padding: 30px 26px;
	margin: 0 !important;
}

.vs-step__num {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0 0 16px !important;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--vs-accent-light), var(--vs-accent-deep));
	color: #fff !important;
	font-weight: 700;
	font-size: 18px !important;
}

.vs-step h3 {
	margin: 0 0 8px;
	font-size: 19px;
}

.vs-step p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--vs-muted);
}

/* ---------------------------------------------------------------- strip */
.vs-strip {
	background: var(--wp--preset--color--panel);
	border-block: 1px solid var(--vs-line);
	padding-block: 16px;
	max-width: none !important;
}

.vs-strip__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	max-width: var(--vs-wrap);
	margin-inline: auto;
}

.vs-strip p {
	margin: 0;
}

.vs-strip__label {
	font-size: 12.5px !important;
	letter-spacing: 0.04em;
	color: #8e8199 !important;
}

.vs-strip__logos {
	display: flex;
	gap: 26px;
	align-items: center;
	flex-wrap: wrap;
}

.vs-strip__logo {
	font-size: 15px !important;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--vs-on-dark-2) !important;
	opacity: 0.75;
}

/* ---------------------------------------------------------------- awards */
.vs-awards__title {
	font-size: 26px !important;
	margin-bottom: 34px;
}

.vs-awards {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 22px;
}

.vs-awards__item {
	display: grid;
	place-items: center;
	min-height: 70px;
	margin: 0 !important;
	padding: 10px;
	border: 1px dashed rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	text-align: center;
	font-size: 12.5px !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	color: #8e8199 !important;
}

/* ---------------------------------------------------------------- CTA band */
.vs-ctaband {
	background: linear-gradient(100deg, var(--vs-accent-deep), var(--vs-accent) 55%, #ffb25c);
	color: #fff;
	padding-block: 54px;
	max-width: none !important;
}

.vs-ctaband__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	max-width: var(--vs-wrap);
	margin-inline: auto;
}

.vs-ctaband h2 {
	margin: 0 0 8px;
	font-size: clamp(24px, 2.6vw, 32px);
	color: #fff;
}

.vs-ctaband p {
	margin: 0;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.92) !important;
}

.vs-btn--light {
	background: #fff !important;
	color: var(--vs-accent-deep) !important;
}

/* ---------------------------------------------------------------- FAQ */
.vs-faq {
	display: grid;
	gap: 10px;
	margin-top: 30px !important;
}

.vs-faq__item {
	background: #fff;
	border: 1px solid var(--vs-line-light);
	border-radius: var(--vs-radius);
	padding: 0 20px;
	margin: 0 !important;
}

.vs-faq__item summary {
	cursor: pointer;
	padding: 18px 0;
	font-weight: 500;
	font-size: 16px;
	color: var(--vs-text);
}

.vs-faq__item p {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.85;
	color: var(--vs-muted) !important;
}

/* ---------------------------------------------------------------- SEO content */
.vs-seo h2 {
	margin: 0 0 14px;
	font-size: clamp(24px, 2.6vw, 32px);
}

.vs-seo h3 {
	margin: 28px 0 10px;
	font-size: 20px;
}

.vs-seo p,
.vs-seo li {
	font-size: 15.5px;
	line-height: 1.9;
	color: #3c3346;
}

/* ---------------------------------------------------------------- page / post */
.vs-page,
.vs-single,
.vs-archive,
.vs-search,
.vs-404 {
	padding-block: 56px 84px;
}

.vs-page--wide,
.vs-page--bare {
	padding-block: 0 0;
}

.vs-page-title {
	margin: 0 0 22px;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.3;
}

.vs-page__head {
	margin-bottom: 10px !important;
}

.vs-single__meta {
	gap: 18px;
	margin: 0 0 26px !important;
	font-size: 13.5px;
	color: var(--vs-muted);
}

.vs-single__img {
	margin: 0 0 30px !important;
}

.vs-cards {
	row-gap: 26px;
}

.vs-404__code {
	margin: 0 0 8px !important;
	font-size: 92px !important;
	font-weight: 700;
	line-height: 1 !important;
	color: rgba(255, 146, 51, 0.22) !important;
}

/* ---------------------------------------------------------------- buttons (global) */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	border: 1px solid var(--vs-accent);
	color: var(--vs-accent);
	background: transparent;
}

.wp-block-button .wp-block-button__link.is-style-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--vs-accent);
	color: #fff;
}

.vs-section--dark .wp-block-button.is-style-outline .wp-block-button__link,
.vs-section--dark2 .wp-block-button.is-style-outline .wp-block-button__link,
.vs-rowhead .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--vs-accent);
}

/* ---------------------------------------------------------------- footer */
.vs-footer {
	background: var(--wp--preset--color--base);
	color: var(--vs-on-dark-2);
	border-top: 3px solid var(--vs-accent);
	padding-block: 64px 0;
	max-width: none !important;
}

.vs-footer__cols,
.vs-legal {
	max-width: var(--vs-wrap);
	margin-inline: auto;
}

.vs-footer__cols {
	gap: 40px;
	padding-bottom: 44px;
	flex-wrap: wrap;
}

.vs-footer__h {
	margin: 0 0 16px !important;
	font-size: 13.5px !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff !important;
}

.vs-footer__col p,
.vs-footer__linklist,
.vs-footer__tagline {
	font-size: 14px;
	line-height: 1.85;
	color: var(--vs-on-dark-2) !important;
}

.vs-footer__linklist a {
	color: var(--vs-on-dark-2);
}

.vs-footer__linklist a:hover {
	color: var(--vs-accent);
}

.vs-footer__tagline {
	max-width: 38ch;
	margin: 16px 0 20px !important;
}

.vs-footer__pays {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 !important;
}

.vs-footer__pays span {
	padding: 7px 11px;
	border-radius: 6px;
	border: 1px solid var(--vs-line);
	background: #1a1220;
	font-size: 11.5px !important;
	color: #b6aac1 !important;
}

.vs-footer__nav .wp-block-navigation-item__content {
	color: var(--vs-on-dark-2);
	font-size: 14px;
	padding: 5px 0;
}

.vs-footer__nav .wp-block-navigation-item__content:hover {
	color: var(--vs-accent);
}

.vs-footer .vs-cta {
	margin-top: 18px !important;
	flex-wrap: wrap;
}

.vs-legal {
	border-top: 1px solid var(--vs-line);
	padding-block: 22px 30px;
}

.vs-legal__row {
	gap: 18px;
	align-items: flex-start;
	margin-bottom: 14px !important;
}

.vs-legal__badge {
	display: grid;
	place-items: center;
	min-width: 52px;
	height: 52px;
	margin: 0 !important;
	border: 2px solid var(--vs-accent);
	border-radius: 8px;
	color: var(--vs-accent) !important;
	font-weight: 700;
	font-size: 17px !important;
}

.vs-legal__text {
	margin: 0 !important;
	max-width: 70ch;
	font-size: 12.5px !important;
	line-height: 1.8;
	color: #7d7188 !important;
}

.vs-legal__copy {
	margin: 0 !important;
	font-size: 12.5px;
	color: #7d7188 !important;
}

.vs-legal__copy a {
	color: #c9bfd2;
}

/* ---------------------------------------------------------------- mobile bar */
.vs-mbar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 95;
	display: none;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 10px;
	background: rgba(15, 10, 20, 0.97);
	border-top: 1px solid var(--vs-line);
	backdrop-filter: blur(10px);
}

body.vs-has-mobile-bar .vs-mbar {
	display: grid;
}

.vs-mbar__item {
	display: grid;
	place-items: center;
	gap: 2px;
	padding: 8px 0;
	border-radius: 8px;
	font-size: 11.5px;
	color: var(--vs-on-dark-2);
}

.vs-mbar__ico {
	font-size: 16px;
	line-height: 1;
}

.vs-mbar__item--hl {
	background: linear-gradient(180deg, var(--vs-accent-light), var(--vs-accent-deep));
	color: #fff;
	font-weight: 600;
}

/* ---------------------------------------------------------------- age gate */
.vs-gate {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(9, 6, 12, 0.88);
	backdrop-filter: blur(4px);
}

.vs-gate[hidden] {
	display: none;
}

.vs-gate__box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: min(880px, 94vw);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}

.vs-gate__brand {
	display: grid;
	place-content: center;
	gap: 18px;
	padding: 44px 34px;
	text-align: center;
	background: linear-gradient(160deg, var(--vs-accent-light), var(--vs-accent) 55%, var(--vs-accent-deep));
	color: #fff;
}

.vs-gate__brand strong {
	font-size: 25px;
	line-height: 1.4;
	font-weight: 600;
}

.vs-gate__badge {
	justify-self: center;
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	font-weight: 700;
	font-size: 18px;
}

.vs-gate__body {
	display: grid;
	place-content: center;
	gap: 18px;
	padding: 44px 34px;
	text-align: center;
}

.vs-gate__body p {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
	color: #2c2333;
}

.vs-gate__decline {
	font-size: 15px;
	font-weight: 600;
	color: var(--vs-accent-deep);
}

body.vs-gate-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------- search form */
.vs-searchform .wp-block-search__input {
	border-radius: var(--vs-pill);
	border: 1px solid var(--vs-line-light);
	padding: 12px 22px;
	font-family: var(--vs-font);
}

.vs-searchform .wp-block-search__button {
	border-radius: var(--vs-pill);
	background: var(--vs-accent);
	color: #fff;
}

.vs-pagination {
	margin-top: 34px;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1080px) {
	.vs-nav {
		order: 3;
	}

	.vs-hero {
		padding-top: calc(var(--vs-header-h) + 40px) !important;
	}

	.vs-deck {
		height: 360px;
		margin-top: 30px !important;
		opacity: 0.95;
	}

	.vs-row__track {
		grid-auto-columns: calc((100% - 32px) / 3);
	}

	.vs-prov,
	.vs-awards {
		grid-template-columns: repeat(3, 1fr);
	}

	.vs-feat {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}
}

@media (max-width: 781px) {
	.vs-header {
		height: var(--vs-header-h-sm);
		padding: 0 16px !important;
	}

	.vs-main {
		padding-top: var(--vs-header-h-sm);
	}

	body.vs-header-over-hero .vs-main {
		padding-top: 0;
	}

	.vs-hero {
		padding-top: calc(var(--vs-header-h-sm) + 34px) !important;
	}

	.vs-hero .wp-block-columns {
		gap: 18px;
	}

	.vs-hero__sub {
		font-size: 15px;
	}

	.vs-header__side .vs-cta {
		display: none;
	}

	.vs-section {
		padding-block: calc(var(--vs-section-pad, 84px) * 0.66);
	}

	.vs-cards3,
	.vs-lcards,
	.vs-steps {
		grid-template-columns: 1fr;
	}

	.vs-row__track {
		grid-auto-columns: calc((100% - 16px) / 2);
	}

	.vs-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 26px;
	}

	.vs-prov,
	.vs-awards {
		grid-template-columns: repeat(2, 1fr);
	}

	.vs-feat {
		grid-template-columns: 1fr 1fr;
	}

	.vs-footer__cols {
		gap: 26px;
	}

	.vs-gate__box {
		grid-template-columns: 1fr;
	}

	.vs-gate__brand {
		padding: 28px 22px;
	}

	.vs-gate__brand strong {
		font-size: 20px;
	}

	.vs-deck {
		height: 300px;
	}

	.vs-page,
	.vs-single,
	.vs-archive,
	.vs-search,
	.vs-404 {
		padding-block: 34px 60px;
	}
}

/* ---------------------------------------------------------------- editor tweaks */
.editor-styles-wrapper .vs-hero {
	padding-top: 70px !important;
}

.editor-styles-wrapper .vs-deck {
	height: 380px;
}

/* ---------------------------------------------------------------- carousel arrows */
.vs-row {
	position: relative;
}

.vs-row__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--vs-line);
	background: rgba(22, 15, 29, 0.82);
	color: var(--vs-accent);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.vs-row__arrow:hover {
	background: var(--vs-accent);
	border-color: var(--vs-accent);
	color: #fff;
}

.vs-row__arrow--prev { left: -20px; }
.vs-row__arrow--next { right: -20px; }

@media (min-width: 1081px) {
	.vs-row__arrow { display: grid; }
}

/* ==========================================================================
   FIX pass 1 — หลังทดสอบบน WordPress จริง
   ========================================================================== */

/* 1) แถบมือถือต้องแสดงเฉพาะจอเล็ก (เดิมทับเดสก์ท็อป) */
body.vs-has-mobile-bar .vs-mbar { display: none; }
body.vs-has-mobile-bar { padding-bottom: 0; }

@media (max-width: 781px) {
	body.vs-has-mobile-bar .vs-mbar { display: grid; }
	body.vs-has-mobile-bar { padding-bottom: 66px; }
}

/* 2) เมนูหลัก: บังคับสีขาว karena core ส่ง preset foreground มาเป็นสีเข้ม */
.vs-nav .wp-block-navigation__container {
	--wp--preset--color--foreground: #ffffff;
	--wp--preset--color--background: transparent;
}

.vs-nav .wp-block-navigation-item__content,
.vs-nav .wp-block-navigation-item__content:visited {
	color: #ffffff !important;
}

.vs-nav .wp-block-navigation-item__content:hover,
.vs-nav .current-menu-item > .wp-block-navigation-item__content,
.vs-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--vs-accent) !important;
	background: transparent !important;
	box-shadow: inset 0 -2px 0 var(--vs-accent);
}

/* 3) ปุ่ม: ตัดขอบ default ของ browser + กันขอบซ้อนบนปุ่ม outline */
.wp-block-button__link,
button.vs-btn,
.vs-btn {
	font-family: var(--vs-font);
	cursor: pointer;
}

.wp-block-button__link.wp-element-button {
	border: 1px solid transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	background: transparent;
	border: 1px solid var(--vs-accent);
	color: var(--vs-accent);
	padding: 13px 30px;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--vs-accent);
	color: #fff;
}

button.vs-btn {
	border: 0;
	padding: 14px 34px;
	font-size: 15px;
	border-radius: var(--vs-pill);
	color: #fff;
}

/* 4) hero deck: figure ที่เป็น absolute ต้องไม่มี margin/width จาก core */
.vs-deck .wp-block-image,
.vs-deck figure {
	margin: 0;
}

.vs-deck .wp-block-image img,
.vs-deck figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

/* 5) การ์ดเกม/การ์ดสด: ให้ figure เต็มพื้นที่แม้ไม่มี sizeSlug */
.vs-gcard .wp-block-image,
.vs-lcard .wp-block-image {
	margin: 0;
	height: 100%;
}

/* 6) เช็คช่องไฟใต้ hero (strip ต้องติดขอบ) */
.vs-hero + .vs-strip {
	margin-top: 0;
}

/* 7) หน้า archive/blog: ระยะห่างหัวข้อ */
.vs-archive .wp-block-query-title,
.vs-search .wp-block-query-title {
	margin-bottom: 30px;
}

/* ==========================================================================
   FIX pass 2 — header ทึบเมื่อเลื่อน, ไอคอนจุดเด่น, ปุ่มขอบมนสม่ำเสมอ
   ========================================================================== */

/* header: gradient โปร่งใสใช้เฉพาะตอนอยู่บนสุด (เดิมทับสถานะ is-stuck) */
body.vs-header-over-hero .vs-header.is-stuck,
body.vs-header-over-hero .vs-header.is-stuck:hover {
	background: var(--vs-ink) !important;
	backdrop-filter: blur(10px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* ปุ่ม outline: ให้มุมโค้งเท่ากันทั้งกล่องและ link */
.wp-block-button,
.wp-block-button__link,
.wp-block-button.is-style-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	border-radius: var(--vs-pill);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	box-shadow: none;
}

/* โฟกัสมองเห็นชัด (a11y) */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--vs-accent);
	outline-offset: 3px;
}

/* ไอคอนจุดเด่น: ทำเป็นวงกลมขอบส้ม แทนตัวอักษรลอย */
.vs-feat__ico {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: 0 auto 18px !important;
	border: 1px solid rgba(255, 146, 51, 0.55);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, rgba(255, 146, 51, 0.16), transparent 70%);
	font-size: 30px !important;
	line-height: 1 !important;
}

.vs-feat__item {
	display: grid;
	justify-items: center;
}

/* ปุ่มบนแถบส้ม: ขาวทึบ ตัวอักษรส้มเข้ม (เดิมขาวจมบนพื้นส้มอ่อน) */
.wp-block-button.vs-btn--light .wp-block-button__link,
.wp-block-button.vs-btn--light .wp-block-button__link:hover {
	background: #ffffff;
	color: var(--vs-accent-deep);
	border-color: #ffffff;
	font-weight: 600;
}

.wp-block-button.vs-btn--light .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.9);
}

/* ระยะลิสต์ลิงก์ใน footer */
.vs-footer__linklist br {
	line-height: 2.1;
}

.vs-footer__linklist a {
	display: inline-block;
	padding-block: 3px;
}

/* ==========================================================================
   FIX pass 3 — ระยะขอบซ้าย/ขวาบนมือถือ (root padding จาก theme.json + fallback)
   ========================================================================== */
@media (max-width: 781px) {
	.wp-site-blocks > *,
	.vs-main > * {
		padding-inline: 16px;
	}

	/* section ที่เต็มความกว้างยังต้องมีขอบใน */
	.vs-hero,
	.vs-section,
	.vs-strip,
	.vs-ctaband,
	.vs-footer,
	.vs-hero-banner {
		padding-inline: 16px !important;
	}

	.vs-header {
		padding-inline: 16px !important;
	}
}

@media (min-width: 782px) {
	.vs-hero,
	.vs-section,
	.vs-strip,
	.vs-ctaband,
	.vs-footer,
	.vs-hero-banner {
		padding-inline: 24px;
	}
}

/* การ์ด/กริดไม่ต้องมี padding-inline ซ้ำ */
.vs-section > .vs-hero__inner,
.vs-section > .vs-cards3,
.vs-section > .vs-prov,
.vs-section > .vs-awards,
.vs-section > .vs-feat,
.vs-section > .vs-steps,
.vs-section > .vs-stats,
.vs-section > .vs-row,
.vs-section > .vs-lcards {
	padding-inline: 0;
}

/* ==========================================================================
   FIX pass 4 — root padding = 0 (ไม่ให้ section เต็มความกว้างถูกดันเข้าขอบ)
   ใส่ระยะขอบให้ "เนื้อหาข้างใน" แทน เพื่อให้แถบสีเต็มขอบจอจริง
   ========================================================================== */
.vs-header__in,
.vs-hero .wp-block-columns,
.vs-strip__in,
.vs-ctaband__in,
.vs-footer__cols,
.vs-legal,
.vs-section > *,
.vs-page,
.vs-single,
.vs-archive,
.vs-search,
.vs-404 {
	padding-inline: clamp(16px, 4vw, 24px);
}

/* ยกเลิกการ์ด/กริดที่ได้ padding ซ้ำจากกฎข้างบน */
.vs-section > .vs-cards3,
.vs-section > .vs-prov,
.vs-section > .vs-awards,
.vs-section > .vs-feat,
.vs-section > .vs-steps,
.vs-section > .vs-stats,
.vs-section > .vs-row,
.vs-section > .vs-lcards,
.vs-section > .vs-hero__inner {
	padding-inline: 0;
}

/* กริดการ์ดในการ์ดที่เต็มความกว้าง: ให้การ์ดมีขอบในตอนจอเล็ก */
@media (max-width: 781px) {
	.vs-row__track {
		padding-inline: 0;
	}
}

/* ลบ padding-inline ที่เคยใส่ให้ section โดยตรงใน pass 3 */
.vs-hero,
.vs-section,
.vs-strip,
.vs-ctaband,
.vs-footer,
.vs-hero-banner,
.vs-header {
	padding-inline: 0 !important;
}

/* ==========================================================================
   FIX pass 5 — รูปในการ์ดเกม/การ์ดสด: core block CSS (height:auto) ทับ rule ของธีม
   ต้องบังคับ height:100% + object-fit:cover ไม่งั้นรูป方形จะไม่เต็มการ์ด 2:3
   ========================================================================== */
.vs-gcard .wp-block-image,
.vs-gcard__img,
.vs-lcard .wp-block-image,
.vs-lcard__img {
	position: absolute !important;
	inset: 0 !important;
	height: 100% !important;
	width: 100% !important;
	margin: 0 !important;
}

.vs-gcard .wp-block-image img,
.vs-gcard__img img,
.vs-lcard .wp-block-image img,
.vs-lcard__img img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}

.vs-gcard .wp-block-image a,
.vs-lcard .wp-block-image a {
	display: block;
	height: 100%;
	width: 100%;
}

/* การ์ดเกม: ให้ชื่อเกมอยู่เหนือรูปเสมอ */
.vs-gcard__name,
.vs-gcard__tag {
	z-index: 3;
}

.vs-lcard__body {
	z-index: 3;
}

/* ==========================================================================
   FIX pass 6 — ให้ carousel/grid อยู่ในกรอบ content (เดิมชิดขอบจอเพราะปิด padding)
   ========================================================================== */
.vs-section > .vs-cards3,
.vs-section > .vs-prov,
.vs-section > .vs-awards,
.vs-section > .vs-feat,
.vs-section > .vs-steps,
.vs-section > .vs-stats,
.vs-section > .vs-row,
.vs-section > .vs-lcards,
.vs-section > .vs-hero__inner,
.vs-section > .vs-faq {
	padding-inline: clamp(16px, 4vw, 24px);
}

/* ลูกศร carousel: วางในกรอบ ไม่ให้ล้นออกนอก container */
.vs-row__arrow--prev { left: 6px; }
.vs-row__arrow--next { right: 6px; }

@media (max-width: 1080px) {
	.vs-row__arrow { display: none !important; }
}

/* .vs-row ตั้ง margin:0!important ทำให้หลุดการจัดกลางของ .vs-section > * */
.vs-section > .vs-row,
.vs-section > .vs-rowhead,
.vs-section > .vs-lcards,
.vs-section > .vs-faq,
.vs-section > .vs-cards3,
.vs-section > .vs-prov,
.vs-section > .vs-awards,
.vs-section > .vs-feat,
.vs-section > .vs-steps,
.vs-section > .vs-stats {
	margin-inline: auto !important;
	max-width: var(--vs-wrap);
}

/* ==========================================================================
   Header แบบไม่มีเมนู (ค่าเริ่มต้น): โลโก้ซ้าย + ปุ่มสมัคร/เข้าสู่ระบบขวา
   ========================================================================== */
.vs-header--simple .vs-header__in {
	justify-content: space-between;
}

.vs-header--simple .vs-header__side {
	margin-left: auto;
}

@media (max-width: 781px) {
	/* ไม่มีเมนู → ต้องเห็นปุ่มสมัครบนมือถือ (ปุ่ม login อยู่ในแถบล่างจอแล้ว) */
	.vs-header--simple .vs-header__side .vs-cta {
		display: flex;
		gap: 8px;
	}

	.vs-header--simple .vs-header__side .vs-btn--ghost {
		display: none;
	}

	.vs-header--simple .vs-header__side .vs-btn--solid {
		padding: 9px 18px !important;
		font-size: 13px;
	}

	.vs-header--simple .vs-brand__title {
		font-size: 15px;
		letter-spacing: 0.1em;
	}
}

/* ==========================================================================
   FIX pass 7 — การ์ด hero ที่รูปถูกห่อด้วย <a> + ระยะเผื่อ admin bar
   ========================================================================== */
.vs-deck__card a,
.vs-deck .wp-block-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.vs-deck__card img,
.vs-deck .wp-block-image a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* admin bar: header แบบ fixed ต้องไม่ทับแถบ admin */
body.admin-bar .vs-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

body.admin-bar.vs-header-over-hero .vs-hero {
	padding-top: calc(var(--vs-header-h) + 56px + var(--wp-admin--admin-bar--height, 32px)) !important;
}

body.admin-bar.vs-header-over-hero .vs-hero-banner {
	padding-block-start: calc(var(--vs-header-h) + 40px + var(--wp-admin--admin-bar--height, 32px));
}

/* ==========================================================================
   FIX pass 8 — .vs-main > * ที่เติม padding ทำให้ hero ถูกดันเข้าขอบ (2 ชั้น)
   entry-content ต้องไม่มี padding เพราะ section ข้างในจัดการเอง
   ========================================================================== */
.entry-content,
.wp-block-post-content {
	padding-inline: 0 !important;
}

.wp-block-post-content > .vs-section,
.wp-block-post-content > .vs-hero,
.wp-block-post-content > .vs-strip,
.wp-block-post-content > .vs-ctaband,
.wp-block-post-content > .vs-hero-banner {
	max-width: none;
	width: 100%;
}

/* .vs-main เป็นตัวห่อ ไม่ต้องมี padding-inline (section/หน้าแต่ละแบบจัดการเอง) */
.vs-main {
	padding-inline: 0 !important;
}

/* ==========================================================================
   FIX pass 9 — มือถือ: สถิติ hero ให้เรียงแนวนอน (เดิมเรียงตั้ง กินความสูง)
   ========================================================================== */
@media (max-width: 781px) {
	.vs-hero__meta {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 0 !important;
		margin-top: 6px !important;
	}

	.vs-hero__meta .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1 !important;
		min-width: 0;
	}

	.vs-hero__meta strong {
		font-size: 19px;
	}

	.vs-hero__meta p {
		font-size: 11.5px;
		line-height: 1.5;
	}

	.vs-hero {
		padding-bottom: 40px !important;
	}

	.vs-hero__cta {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.vs-hero__cta .wp-block-button,
	.vs-hero__cta .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   FIX pass 10 — ช่องว่าง 24px เหนือ hero บนมือถือ (block gap ระหว่าง header/main)
   ========================================================================== */
.wp-site-blocks {
	display: block;
}

.wp-site-blocks > *,
.wp-site-blocks > .wp-block-template-part + * {
	margin-block-start: 0 !important;
}

/* header ที่ไม่ sticky ต้องไม่ถูกดันลงด้วย top ของ admin bar */
body:not(.vs-has-sticky-header) .vs-header {
	top: 0 !important;
}

/* ==========================================================================
   Patterns ใหม่: ตาราง / โน้ต / กล่องฟอร์ม / กล่องเตือน / สารบัญ / VIP
   ========================================================================== */
.vs-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--vs-line-light);
	margin: 26px 0 0 !important;
}

.vs-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.vs-table th,
.vs-table td {
	padding: 13px 16px;
	text-align: left;
	border-bottom: 1px solid #edf1f7;
}

.vs-table thead th {
	background: #f1f5fb;
	font-weight: 600;
	color: var(--vs-text);
}

.vs-table tbody tr:last-child td {
	border-bottom: 0;
}

.vs-section--dark .vs-table,
.vs-section--dark2 .vs-table {
	background: #1e1527;
	border-color: var(--vs-line);
}

.vs-section--dark .vs-table th,
.vs-section--dark .vs-table td,
.vs-section--dark2 .vs-table th,
.vs-section--dark2 .vs-table td {
	border-bottom-color: var(--vs-line);
	color: var(--vs-on-dark-2);
}

.vs-section--dark .vs-table thead th,
.vs-section--dark2 .vs-table thead th {
	background: #271d2f;
	color: #fff;
}

.vs-table--compare td:first-child {
	width: 32%;
}

.vs-table--compare thead th:nth-child(2) {
	color: var(--vs-accent-deep);
}

.vs-note {
	margin-top: 14px !important;
	font-size: 13px !important;
	line-height: 1.8;
	color: var(--vs-muted) !important;
	font-style: italic;
}

.vs-formbox {
	background: #fff;
	border: 1px solid var(--vs-line-light);
	border-radius: 12px;
	padding: 28px 26px;
	margin-top: 34px !important;
	box-shadow: 0 10px 30px rgba(22, 15, 29, 0.06);
}

.vs-warnbox {
	background: rgba(183, 1, 0, 0.06);
	border: 1px solid rgba(183, 1, 0, 0.28);
	border-left: 4px solid var(--wp--preset--color--danger, #b70100);
	border-radius: 10px;
	padding: 20px 22px;
	margin-top: 30px !important;
}

.vs-warnbox p {
	margin: 0 0 10px !important;
	font-size: 14.5px !important;
}

.vs-warnbox p:last-child {
	margin-bottom: 0 !important;
}

.vs-toc {
	background: var(--vs-light-2);
	border: 1px solid var(--vs-line-light);
	border-radius: 10px;
	padding: 18px 22px 18px 40px !important;
	margin-bottom: 30px !important;
	font-size: 14.5px;
}

.vs-toc li {
	margin-bottom: 6px;
	color: var(--vs-text);
}

.vs-vip__head {
	aspect-ratio: auto;
	padding: 30px 20px;
}

.vs-vip__head .vs-pcard__num {
	font-size: 30px !important;
	letter-spacing: 0.02em;
}

.vs-vip__list {
	margin: 0 0 18px !important;
	padding-left: 20px;
}

.vs-vip__list li {
	font-size: 14px;
	line-height: 1.9;
	color: var(--vs-muted);
}

.vs-pcard--g1 .vs-vip__list li {
	color: var(--vs-accent-deep);
	font-weight: 500;
}

/* ==========================================================================
   FIX pass 11 — hero banner (cover) : ข้อความชิดซ้าย + ระยะขอบถูกต้องบนมือถือ
   ========================================================================== */
.vs-hero-banner .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--vs-wrap);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 24px);
	text-align: left;
}

.vs-hero-banner .wp-block-heading,
.vs-hero-banner h1,
.vs-hero-banner p {
	text-align: left !important;
}

.vs-hero-banner .vs-hero__sub {
	max-width: 48ch;
}

.vs-hero-banner .wp-block-buttons {
	justify-content: flex-start;
	gap: 12px;
}

@media (max-width: 781px) {
	.vs-hero-banner {
		min-height: 460px;
		padding-block: calc(var(--vs-header-h-sm) + 34px) 44px !important;
	}

	.vs-hero-banner .wp-block-heading,
	.vs-hero-banner h1 {
		font-size: 28px !important;
		line-height: 1.4;
	}

	.vs-hero-banner .vs-hero__sub {
		font-size: 14.5px;
		margin-bottom: 20px;
	}

	.vs-hero-banner .wp-block-buttons,
	.vs-hero-banner .wp-block-button,
	.vs-hero-banner .wp-block-button__link {
		width: 100%;
	}

	.vs-hero-banner .wp-block-button__link {
		text-align: center;
		padding: 14px 20px !important;
	}
}

/* การ์ด VIP / การ์ดที่มีหัวสี: ให้หัวมีการไล่สีเสมอ (เดิมการ์ดที่ไม่มีคลาส g1-g3 หัวจะโปร่ง) */
.vs-pcard__head {
	background: linear-gradient(135deg, #2a1b4d, #5c3bb5 65%, var(--vs-accent) 150%);
}

.vs-pcard--g1 .vs-pcard__head { background: linear-gradient(135deg, #4a1f6b, var(--vs-accent) 130%); }
.vs-pcard--g2 .vs-pcard__head { background: linear-gradient(135deg, #2a1b4d, #5c3bb5 65%, var(--vs-accent) 150%); }
.vs-pcard--g3 .vs-pcard__head { background: linear-gradient(135deg, #123a4d, #0e7c86 60%, var(--vs-accent) 165%); }

/* ==========================================================================
   FIX pass 12 — ระยะเผื่อ admin bar บนมือถือ + แถบ Quick Edit ไม่ทับการ์ด/เกต
   ========================================================================== */
@media (max-width: 781px) {
	body.admin-bar.vs-header-over-hero .vs-hero {
		padding-top: calc(var(--vs-header-h-sm) + 30px + var(--wp-admin--admin-bar--height, 46px)) !important;
	}

	body.admin-bar.vs-header-over-hero .vs-hero-banner {
		padding-block-start: calc(var(--vs-header-h-sm) + 30px + var(--wp-admin--admin-bar--height, 46px)) !important;
	}
}

/* age gate ต้องอยู่เหนือทุกอย่าง รวมถึงแถบ Quick Edit */
.vs-gate {
	z-index: 100000;
}

/* Quick Edit บนมือถือ: ย่อเป็นปุ่มกลมมุมขวาล่าง ไม่ทับปุ่มอื่น */
@media (max-width: 781px) {
	.vs-qe-bar {
		right: 10px;
		bottom: 84px;
		padding: 6px !important;
		border-radius: 999px;
	}

	.vs-qe-bar__toggle {
		padding: 8px 14px !important;
		font-size: 12px;
	}

	.vs-qe-bar__toggle .vs-qe-bar__dot {
		width: 9px;
		height: 9px;
	}

	.vs-qe-bar__toggle[aria-pressed="true"] .vs-qe-bar__dot {
		background: #fff;
		box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
	}
}

/* ==========================================================================
   Patterns ใหม่ v1.5 — hero split/cinematic, wins, jackpot, tabs+grid,
   provider cards/table, game info, gallery
   ========================================================================== */
/* --- hero split --- */
.vs-hs__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 36px;
	align-items: center;
	max-width: var(--vs-wrap);
	margin-inline: auto;
}

.vs-hs__title {
	margin: 0 0 14px;
	font-size: clamp(30px, 3.8vw, 52px);
	line-height: 1.32;
	color: #fff;
}

.vs-hs__offer {
	margin: 0 0 22px !important;
	font-size: 17px;
	color: var(--vs-on-dark-2) !important;
}

.vs-hs__offer strong {
	color: var(--vs-accent-light);
}

.vs-hs__trust {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 22px !important;
}

.vs-hs__trust p {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--vs-on-dark-2) !important;
}

.vs-hs__art img {
	max-width: 100%;
	border-radius: 14px;
	border: 1px solid rgba(233, 198, 124, 0.35);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

/* --- hero cinematic --- */
.vs-hero-cine {
	min-height: 620px;
	display: flex;
	align-items: flex-end;
	padding-block: calc(var(--vs-header-h) + 40px) 60px;
}

.vs-hero-cine .wp-block-cover__inner-container {
	max-width: var(--vs-wrap);
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 24px);
	text-align: left;
}

.vs-hero-cine__title {
	margin: 0 0 12px;
	font-size: clamp(30px, 3.6vw, 50px);
	line-height: 1.3;
	color: #fff;
	text-align: left !important;
}

.vs-hero-cine .vs-hero__cta {
	justify-content: flex-start;
}

.vs-hero-cine p {
	text-align: left;
}

/* --- wins ticker --- */
.vs-section--tight {
	padding-block: 40px !important;
}

.vs-wins__title {
	font-size: 20px !important;
	margin: 0 !important;
}

.vs-wins {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	margin-top: 18px !important;
}

.vs-win {
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--vs-line);
	border-radius: 8px;
	padding: 8px;
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 9px;
	align-items: center;
	margin: 0 !important;
}

.vs-win p {
	margin: 0 !important;
}

.vs-win__img,
.vs-win__img img {
	width: 42px;
	height: 42px;
	margin: 0 !important;
	border-radius: 6px;
	object-fit: cover;
}

.vs-win__user {
	font-size: 11px !important;
	color: #8e8199 !important;
}

.vs-win__amount {
	font-size: 13.5px !important;
	font-weight: 600;
	color: var(--vs-success, #39c46e) !important;
}

.vs-win__time {
	font-size: 10.5px !important;
	color: #7d7188 !important;
}

/* --- jackpot band --- */
.vs-pots {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.vs-pot {
	border: 1px solid var(--vs-line);
	border-radius: 10px;
	padding: 16px 18px;
	text-align: center;
	background: linear-gradient(180deg, rgba(255, 146, 51, 0.08), transparent);
	margin: 0 !important;
}

.vs-pot p {
	margin: 0 !important;
}

.vs-pot__label {
	font-size: 11.5px !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vs-accent) !important;
}

.vs-pot__num {
	font-size: clamp(18px, 2vw, 24px) !important;
	font-weight: 700;
	color: #fff !important;
	margin: 4px 0 !important;
}

.vs-pot__meta {
	font-size: 11.5px !important;
	color: #8e8199 !important;
}

/* --- tabs + grid --- */
.vs-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 18px 0 22px !important;
}

.vs-tab {
	margin: 0 !important;
}

.vs-tab a {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--vs-line);
	font-size: 13.5px;
	color: var(--vs-on-dark-2);
	transition: 0.2s;
}

.vs-tab a:hover,
.vs-tab.is-active a {
	background: var(--vs-accent);
	border-color: var(--vs-accent);
	color: #fff;
}

.vs-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}

.vs-gcard--grid {
	aspect-ratio: 2 / 3;
}

/* --- provider cards --- */
.vs-pcards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 30px !important;
}

.vs-pcard2 {
	background: #fff;
	border: 1px solid var(--vs-line-light);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 10px 30px rgba(22, 15, 29, 0.06);
	margin: 0 !important;
	transition: 0.25s;
}

.vs-pcard2:hover {
	transform: translateY(-4px);
	border-color: var(--vs-accent);
}

.vs-pcard2 p {
	margin: 0 !important;
}

.vs-pcard2__logo {
	font-size: 18px !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--vs-text) !important;
}

.vs-pcard2__count {
	font-size: 29px !important;
	font-weight: 700;
	color: var(--vs-accent-deep) !important;
	margin: 6px 0 10px !important;
}

.vs-pcard2__desc {
	font-size: 14px !important;
	line-height: 1.75;
	color: var(--vs-muted) !important;
	margin-bottom: 16px !important;
}

/* --- game info --- */
.vs-infogrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 32px;
	background: #fff;
	border: 1px solid var(--vs-line-light);
	border-radius: 12px;
	padding: 10px 24px;
	margin-top: 18px !important;
}

.vs-inforow {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid #edf1f7;
	margin: 0 !important;
}

.vs-inforow p {
	margin: 0 !important;
	font-size: 14.5px !important;
}

.vs-inforow__k {
	color: var(--vs-muted) !important;
}

.vs-inforow__v {
	font-weight: 600;
	color: var(--vs-text) !important;
}

/* --- gallery --- */
.vs-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 20px !important;
}

.vs-gallery__item {
	margin: 0 !important;
}

.vs-gallery__img img {
	border-radius: 10px;
}

.vs-gallery__cap {
	margin: 8px 0 0 !important;
	font-size: 12.5px !important;
	color: var(--vs-muted) !important;
	text-align: center;
}

/* --- responsive --- */
@media (max-width: 1080px) {
	.vs-hs__grid {
		grid-template-columns: 1fr;
	}

	.vs-hs__art {
		order: -1;
		max-width: 460px;
	}

	.vs-wins {
		grid-template-columns: repeat(3, 1fr);
	}

	.vs-pots {
		grid-template-columns: repeat(2, 1fr);
	}

	.vs-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.vs-pcards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 781px) {
	.vs-wins {
		grid-template-columns: repeat(2, 1fr);
	}

	.vs-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.vs-pcards,
	.vs-gallery {
		grid-template-columns: 1fr;
	}

	.vs-infogrid {
		grid-template-columns: 1fr;
		padding: 6px 16px;
	}

	.vs-hero-cine {
		min-height: 480px;
	}

	.vs-hs__title {
		font-size: 28px;
	}
}

/* ==========================================================================
   TONE SYSTEM — ใช้ตัวแปรจาก inc/theme-tone.php (โทนพื้น/accent/radius/โหมดสว่าง)
   ========================================================================== */
:root {
	--vs-radius-sm: 6px;
	--vs-shadow-accent: rgba(255, 146, 51, 0.32);
}

/* ใช้ตัวแปรความโค้งจากการตั้งค่า */
.vs-gcard,
.vs-lcard,
.vs-pcard,
.vs-ncard,
.vs-pcard2,
.vs-step,
.vs-faq__item,
.vs-win,
.vs-pot,
.vs-table,
.vs-infogrid,
.vs-gallery__img img,
.vs-deck__card,
.vs-hs__art img {
	border-radius: var(--vs-radius);
}

.vs-tag,
.vs-gcard__tag,
.vs-prov__item,
.vs-footer__pays span,
.vs-note,
.vs-toc {
	border-radius: var(--vs-radius-sm);
}

.vs-btn--solid,
.vs-cta .vs-btn--solid,
.wp-block-button__link {
	box-shadow: 0 8px 22px var(--vs-shadow-accent);
}

/* --- โหมดสว่าง (tone = studio) --- */
body.vs-tone-light {
	background: var(--wp--preset--color--base);
}

body.vs-tone-light .vs-section--dark,
body.vs-tone-light .vs-section--dark2 {
	background: var(--wp--preset--color--surface);
	color: #14181f;
}

body.vs-tone-light .vs-section--dark h2,
body.vs-tone-light .vs-section--dark h3,
body.vs-tone-light .vs-section--dark2 h2,
body.vs-tone-light .vs-section--dark2 h3 {
	color: #14181f;
}

body.vs-tone-light .vs-section--dark p,
body.vs-tone-light .vs-section--dark li,
body.vs-tone-light .vs-section--dark2 p,
body.vs-tone-light .vs-section--dark2 li,
body.vs-tone-light .vs-section--dark2 .vs-sechead__sub {
	color: #4a5568 !important;
}

body.vs-tone-light .vs-hero,
body.vs-tone-light .vs-hero-cine {
	background: radial-gradient(120% 120% at 12% 30%, #ffffff 0%, #eef3fa 45%, #e3ebf6 100%);
}

body.vs-tone-light .vs-hero h1,
body.vs-tone-light .vs-hs__title,
body.vs-tone-light .vs-hero-cine__title {
	color: #14181f;
}

body.vs-tone-light .vs-hero__sub,
body.vs-tone-light .vs-hs__offer,
body.vs-tone-light .vs-hero__meta p,
body.vs-tone-light .vs-hs__trust p {
	color: #4a5568 !important;
}

body.vs-tone-light .vs-hero__meta strong {
	color: #14181f;
}

body.vs-tone-light .vs-strip {
	background: #eef3fa;
	border-color: #dce4f0;
}

body.vs-tone-light .vs-strip__label,
body.vs-tone-light .vs-strip__logo {
	color: #4a5568 !important;
}

body.vs-tone-light .vs-prov__item,
body.vs-tone-light .vs-win,
body.vs-tone-light .vs-pot {
	background: #ffffff;
	border-color: #dce4f0;
	color: #2a3444 !important;
}

body.vs-tone-light .vs-gcard__name,
body.vs-tone-light .vs-gcard__tag,
body.vs-tone-light .vs-lcard__name,
body.vs-tone-light .vs-pcard__num,
body.vs-tone-light .vs-pcard__label {
	color: #fff !important;
}

body.vs-tone-light .vs-footer {
	background: #0b0b0d;
}

body.vs-tone-light .vs-footer .vs-brand__title,
body.vs-tone-light .vs-footer__h {
	color: #fff !important;
}

/* --- โหมดพื้นแบน (ไม่มีเงา) --- */
body.vs-surface-flat .vs-pcard,
body.vs-surface-flat .vs-ncard,
body.vs-surface-flat .vs-pcard2,
body.vs-surface-flat .vs-step,
body.vs-surface-flat .vs-formbox {
	box-shadow: none !important;
}

/* ==========================================================================
   v1.6 patterns — list rows, compact grid, provider wall/rows, screen frame,
   phone hero, editorial lead, compact FAQ
   ========================================================================== */
/* --- list rows --- */
.vs-rows {
	display: grid;
	gap: 8px;
	margin-top: 22px !important;
}

.vs-lrow {
	display: grid;
	grid-template-columns: 56px 1.4fr 1fr 0.8fr 0.6fr auto;
	gap: 14px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--vs-line-light);
	border-radius: var(--vs-radius);
	padding: 10px 16px;
	margin: 0 !important;
	transition: border-color 0.2s, transform 0.2s;
}

.vs-lrow:hover {
	border-color: var(--vs-accent);
	transform: translateX(2px);
}

.vs-lrow p {
	margin: 0 !important;
}

.vs-lrow__thumb,
.vs-lrow__thumb img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	margin: 0 !important;
}

.vs-lrow__name {
	font-size: 15px !important;
	font-weight: 600;
	color: var(--vs-text) !important;
}

.vs-lrow__meta,
.vs-lrow__vol {
	font-size: 13px !important;
	color: var(--vs-muted) !important;
}

.vs-lrow__rtp {
	font-size: 13px !important;
	font-weight: 600;
	color: var(--vs-accent-deep) !important;
}

.vs-lrow__cta {
	margin: 0 !important;
}

.vs-lrow__cta .wp-block-button__link {
	padding: 8px 20px !important;
	font-size: 13px;
}

.vs-lrow--provider {
	grid-template-columns: 1.4fr 0.8fr 0.8fr 1.6fr auto;
}

.vs-bar {
	height: 6px;
	background: var(--vs-line-light);
	border-radius: 999px;
	overflow: hidden;
	margin: 0 !important;
	display: block;
}

.vs-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--vs-accent-deep), var(--vs-accent));
	border-radius: 999px;
}

/* dark section variant */
.vs-section--dark .vs-lrow,
.vs-section--dark2 .vs-lrow {
	background: var(--wp--preset--color--panel);
	border-color: var(--vs-line);
}

.vs-section--dark .vs-lrow__name,
.vs-section--dark2 .vs-lrow__name {
	color: #fff !important;
}

/* --- compact game wall --- */
.vs-gwall {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 8px;
	margin-top: 22px !important;
}

.vs-gwall__item,
.vs-gwall__item img {
	margin: 0 !important;
}

.vs-gwall__item img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid rgba(233, 198, 124, 0.3);
	transition: transform 0.2s, border-color 0.2s;
}

.vs-gwall__item:hover img {
	transform: scale(1.04);
	border-color: var(--vs-accent);
}

/* --- provider wall --- */
.vs-pwall {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 22px !important;
}

.vs-pwall__item {
	background: var(--wp--preset--color--panel);
	border: 1px solid var(--vs-line);
	border-radius: var(--vs-radius);
	padding: 16px 14px;
	text-align: center;
	margin: 0 !important;
	transition: border-color 0.2s, transform 0.2s;
}

.vs-pwall__item:hover {
	border-color: var(--vs-accent);
	transform: translateY(-2px);
}

.vs-pwall__item p {
	margin: 0 !important;
}

.vs-pwall__name {
	font-size: 14px !important;
	font-weight: 600;
	color: #fff !important;
}

.vs-pwall__count {
	font-size: 11.5px !important;
	color: var(--vs-accent) !important;
	margin-top: 4px !important;
}

/* --- screen frame --- */
.vs-screen {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(233, 198, 124, 0.35);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
	margin: 0 !important;
}

.vs-screen__img,
.vs-screen__img img {
	margin: 0 !important;
	width: 100%;
}

.vs-screen__img img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.vs-screen__overlay {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 22px 24px;
	background: linear-gradient(0deg, rgba(9, 6, 12, 0.92), transparent);
	margin: 0 !important;
}

.vs-screen__label {
	margin: 0 !important;
	font-size: 12px !important;
	letter-spacing: 0.2em;
	font-weight: 700;
	color: var(--vs-accent-light) !important;
}

.vs-screen__cta {
	margin: 0 !important;
}

/* --- phone hero --- */
.vs-hm__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 36px;
	align-items: center;
	max-width: var(--vs-wrap);
	margin-inline: auto;
}

.vs-phone {
	position: relative;
	max-width: 290px;
	margin-inline: auto !important;
	border-radius: 34px;
	padding: 12px;
	background: linear-gradient(160deg, var(--wp--preset--color--surface-2), var(--wp--preset--color--base));
	border: 1px solid rgba(233, 198, 124, 0.35);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

.vs-phone::before {
	content: "";
	position: absolute;
	top: 14px;
	left: 50%;
	translate: -50% 0;
	width: 68px;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
}

.vs-phone__screen,
.vs-phone__screen img {
	margin: 0 !important;
}

.vs-phone__screen img {
	border-radius: 26px;
	aspect-ratio: 9 / 19;
	object-fit: cover;
}

/* --- editorial lead --- */
.vs-lead {
	font-size: clamp(17px, 1.6vw, 21px) !important;
	line-height: 1.9;
	color: #2c2333;
}

.vs-lead a {
	color: var(--vs-accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vs-lead-stats {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	margin-top: 22px !important;
	padding-top: 18px;
	border-top: 1px solid var(--vs-line-light);
}

.vs-lead-stats p {
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--vs-muted) !important;
}

.vs-lead-stats strong {
	display: block;
	font-size: 22px;
	color: var(--vs-text);
}

/* --- compact FAQ 2 col --- */
.vs-faq--2col {
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

/* --- responsive --- */
@media (max-width: 1080px) {
	.vs-gwall { grid-template-columns: repeat(6, 1fr); }
	.vs-pwall { grid-template-columns: repeat(3, 1fr); }
	.vs-lrow { grid-template-columns: 48px 1.4fr 1fr auto; }
	.vs-lrow__vol { display: none; }
	.vs-hm__grid { grid-template-columns: 1fr; }
}

@media (max-width: 781px) {
	.vs-lrow {
		grid-template-columns: 44px 1fr auto;
		grid-template-areas: "thumb name cta" "thumb meta cta";
		row-gap: 2px;
		padding: 10px 12px;
	}
	.vs-lrow__thumb { grid-area: thumb; }
	.vs-lrow__name { grid-area: name; }
	.vs-lrow__meta { grid-area: meta; }
	.vs-lrow__rtp, .vs-lrow__vol { display: none; }
	.vs-lrow__cta { grid-area: cta; }
	.vs-gwall { grid-template-columns: repeat(4, 1fr); }
	.vs-pwall { grid-template-columns: repeat(2, 1fr); }
	.vs-faq--2col { grid-template-columns: 1fr; }
	.vs-phone { max-width: 220px; }
	.vs-screen__overlay { padding: 14px; }
}

/* หน้า non-hero: header ทึบ + main เว้นที่ให้ header */
body.vs-header-solid .vs-main {
	padding-top: var(--vs-header-h);
}

@media (max-width: 781px) {
	body.vs-header-solid .vs-main {
		padding-top: var(--vs-header-h-sm);
	}
}

/* เทมเพลตหน้าเต็มความกว้าง (page-full) */
.vs-page--full,
.vs-page--full .wp-block-post-content,
.vs-page--full > .wp-block-group {
	max-width: none !important;
}