:root {
  --red: #E8112A;
  --red-hi: #FF2D44;
  --red-deep: #A30C1F;
  --red-blood: #6A0612;
  --red-grad: linear-gradient(180deg, #FF2D44 0%, #E8112A 45%, #A30C1F 100%);
  --ink: #0A0608;
  --black:#000000;
  --raised: #2A181F;
  --heirline: #3A1F27;
  --heirline-soft: #28161C;
  --cyan: #34D8D4;
  --cyan-hi: #5AF2EE;
  --cyan-deep: #0E7A78;
  --gold: #F5C84E;
  --magenta: #B9276A;
  --vip-grad: linear-gradient(180deg,#F5C84E 0%, #E58C2C 40%, #B9276A 100%);
  --gold-grad: linear-gradient(180deg,#E8AD68 0%, #B7AFA3 100%);
  --white:#FFFFFF;
  --paper: #F7E8EC;
  --bone: #D6C7CC;
  --ash: #8A7780;
  --smoke: #4D3940;
  --red-black-grad: linear-gradient(180deg,#DF2225 0%, #050608 100%);
  --btn-catg-ai: linear-gradient(180deg,#434343 0%, #060607 100%);
  --headerbar-height: 64px;
  --slide-hero-banner-mb-height: 80px;
  --slide-hero-banner-lg-height: 100px;
  --slide-hero-banner-height: 180px;
  --cyan-glow-soft: 0 0 10px 0 rgba(52, 216, 212, 0.35);
  --cyan-glow: 0 0 14px 0 rgba(52, 216, 212, 0.55), 0 0 38px 0 rgba(52, 216, 212, 0.25);
  --duration : ease .3s;
  --bg-footer: linear-gradient(180deg,#DF2225 0%, #050608 100%);
  --slide-gap: 24px;
  --speed: 40s;
  --bg-box-red-blood:#1A1014;
}
/* Thin - 100 */
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/Prompt/Prompt-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
/* ExtraLight - 200 */
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/Prompt/Prompt-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
/* Light - 300 */
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/Prompt/Prompt-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* Regular - 400 */
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/Prompt/Prompt-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Medium - 500 */
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/Prompt/Prompt-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* SemiBold - 600 */
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/Prompt/Prompt-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Bold - 700 */
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/Prompt/Prompt-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ExtraBold - 800 */
@font-face {
  font-family: 'Prompt';
  src: url('../fonts/Prompt/Prompt-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel/Cinzel-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel/Cinzel-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel/Cinzel-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel';
  src: url('../fonts/Cinzel/Cinzel-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CormorantGaramond';
  src: url('../fonts/Cormorant_Garamond/CormorantGaramond-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CormorantGaramond';
  src: url('../fonts/Cormorant_Garamond/CormorantGaramond-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CormorantGaramond';
  src: url('../fonts/Cormorant_Garamond/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CormorantGaramond';
  src: url('../fonts/Cormorant_Garamond/CormorantGaramond-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
body{
  font-family: 'Prompt';
  font-size: 1rem;
  background-color: var(--ink);
  color:var(--paper);
  padding:0 !important;
  margin:auto;
}
h1, h2, h3, h4, h5, h6{
  margin-bottom: 0;
}
a{
  text-decoration: none;
  outline: none;
  transition: .2s ease-in-out;
}
input{
  border-color: var(--border-input) !important;
}
input[type="text"], input[type="email"]{
  height: 56px;
}
.ff-cinzel{
  font-family: 'Cinzel' !important;
}
.ff-cormorant-garamond{
  font-family: 'CormorantGaramond';
}
.flex-none{
  flex:none;
}
.text-nowarp{
  text-wrap: nowrap;
}
.fs-large{
font-size: 3rem !important;
}
.fs-1{
  font-size: 2.5rem !important;
}
.fs-2{
  font-size: 2rem !important;
}
.fs-3{
  font-size: 1.75rem !important;
}
.fs-4{
  font-size: 1.5rem !important;
}
.fs-5{
  font-size: 1.25rem !important;
}
.fs-6{
  font-size: 1rem !important;
}
.fs-7{
  font-size: .875rem !important;
}
.fs-8{
  font-size: .75rem !important;
}
.text-red{
  color:var(--red) !important;
}
.text-paper{
  color:var(--paper) !important;
}
.text-gold-grad{
  background: var(--gold-grad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-red-grad{
  background: var(--red-grad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-silver{
  background: linear-gradient(180deg, #80848A 30%, #FFF 50%, #80848A 70%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.popular-games{
  font-size:2.5rem;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  z-index: 2;
}
.popular-games .red-grad{
  background: linear-gradient(180deg, #3F0007 20%, #E8112A 50%, #3F0007 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bg-black-op8{
  background-color: rgba(5, 6, 8, 0.80);
}
.title{
  font-family: "CormorantGaramond";
}
.title > span{
  text-shadow: 0 0 24px rgba(223, 34, 37, 0.55);
  background: var(--red-grad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.container-lsm{
  padding-left:1rem;
  padding-right:1rem;
  max-width:1920px;
}
.py-container{
  padding-top:2.5rem;
  padding-bottom:2.5rem;
}

.btn, .btn *{
  transition: 0.2s ease-in-out;
}
.list-none{
  list-style-type: none !important;
}

#header-bar{
  height:var(--headerbar-height);
}
footer{
  background: var(--bg-footer);
  padding-bottom:142px !important;
}
#header-bar .offcanvas-body{
  padding-bottom:142px
}
#slide-venders{
  border:1px solid var(--heirline-soft);
  border-radius: 1rem;
  background: linear-gradient(180deg, #14080C 0%, #0A0608 100%);
}
#slide-venders .swiper-warper{
  counter-reset: step;  
}
#slide-venders .swiper-slide{
  counter-increment: step;
  border-radius: 10px;
  padding:1rem;
  border:1px solid var(--heirline-soft);
  min-height: 260px;
  overflow: hidden;
}
#slide-venders .swiper-slide::after{
  content: counter(step, decimal-leading-zero);
  position:absolute;
  bottom:0;
  right:0;
  transform: translateY(20%);
  color: rgba(232, 17, 42, 0.18);
  text-align: center;
  font-family: 'Cinzel';
  font-size: 120px;
  font-style: normal;
  font-weight: 700;
  line-height: 95px;
  z-index: -1;
}
#slide-venders .swiper-slide::before{
  content:'';
  display: block;
  width: 100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background: radial-gradient(37.67% 42.27% at 50.1% 93.41%, rgba(255, 45, 68, 0.20) 0%, rgba(232, 17, 42, 0.00) 100%), radial-gradient(31.06% 41.14% at 50% -18.18%, #34D8D4 0%, rgba(52, 216, 212, 0.00) 100%);

}
#slide-venders .swiper-slide .tag{
  border: 1px solid var(--cyan);
  display: inline-flex;
  border-radius: 8px;
  padding:2px 8px;
  font-family: 'Prompt';
  font-size:10px;
  font-weight: 500;
  color:var(--cyan);
}
.slide-pagination{
  display: flex;
  justify-content: center;
}
.slide-pagination .swiper-pagination-bullet{
  width:14px;
  height:14px;
  background-color: var(--smoke);
  opacity: 1;
  transition: var(--duration);
}
.slide-pagination .swiper-pagination-bullet-active{
  width:32px;
  border-radius: 10px;;
  background-color: var(--cyan);
  box-shadow: var(--cyan-glow);
}
.btn-navg-s02{
  width: 46px;
  height: 46px;
  border:1px solid var(--cyan) !important;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: rgba(10, 6, 8, 0.60);
}
.btn-no-style{
  border:none;
  padding:0;
  background:none;
}
.offcanvas.offcanvas-end{
  width:360px !important;
}
.row-gap-40{
  row-gap:40px;
}
#btn-menu, #btn-login, #btn-register, #btn-login-offc, #btn-register-offc{
  height:40px;
}
#btn-menu{
  font-size:20px;
  border:none;
  background:transparent;
  color:var(--cyan);
}
#btn-menu > img{
  width: auto;
  height: 36px;
}

#btn-login, #btn-register, #btn-login-offc, #btn-register-offc{
  width:180px;
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: 999px;
  border-width: 1px;
  border-style: solid;
  letter-spacing: 1px;
  position:relative;
  overflow: hidden;
}
#btn-login-mb, #btn-register-mb{
  font-size: clamp(14px, 4.5vw, 24px);
  padding-top:.5rem;
  padding-bottom:.5rem;
  border-radius: 999px;
}

#btn-login, #btn-login-mb, #btn-login-offc{
  background: var(--red-grad);
  border-color: var(--red);
  color:var(--white);
  box-shadow: 0 0 60px 0 rgba(232, 17, 42, 0.02), 0 0 24px 0 rgba(232, 17, 42, 0.45);
}
#btn-login:hover, #btn-login-mb:hover, #btn-login-offc:hover{
  background:var(--red-blood);
}

#btn-register, #btn-register-mb, #btn-register-offc{
  overflow: hidden;
  background: transparent;
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: var(--cyan-glow-soft);
  animation: zoom-in-out 1.5s ease-in-out infinite;
}
#btn-register:hover, #btn-register-mb:hover, #btn-register-offc:hover{
  box-shadow: var(--cyan-glow);
}
#btn-register::after, #btn-register-mb::after, #btn-register-offc::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  display: block;
  width:100%;
  height:100%;
  background:var(--red-grad);
  z-index: -1;
  opacity: .2;
}
#log-mobile{
  margin-bottom:10vw;
}
#offcanvasRight{
  background-color: #00000096;
  color:var(--paper);
}

#offcanvasRight ul > li > a{
  color:var(--white);
  position: relative;
  display: block;
  padding:.5rem 0;
}
#offcanvasRight ul > li > a::before, #offcanvasRight ul > li > a::after{
  content:'';
  display: block;
  height:2px;
  width:0%;
  position:absolute;
  background: linear-gradient(90deg,var(--red) 0%, var(--cyan) 100%);;
  transition:ease .5s;
}
#offcanvasRight ul > li > a::before{
  top:0;
  left:12.5%;
}

#offcanvasRight ul > li > a:hover::before{
  width:75%;
}

#offcanvasRight ul > li > a::after{
  bottom:0;
  right:12.5%;
}
#offcanvasRight ul > li > a:hover::after{
  width:75%;
}
#offcanvas-close{
  border:none;
  background:none;
}
#offcanvas-close #i-close{
  transition: var(--duration);
}
#offcanvas-close:hover #i-close{
  fill:var(--red);
}
#logo-header{
  transform: translateY(6px);
}

#slide-hero-banner{
  background: radial-gradient(23.71% 123.06% at 50% 0%, rgba(117, 117, 117, 0.00) 0%, #000 100%);
  height:var(--slide-hero-banner-mb-height);
  font-size:14px;
}

.btn-navg-s01 svg path{
  fill: var(--paper);
}
.btn-navg-s01:hover svg path{
  fill:var(--cyan);
}
#btn-play > svg, .btn-navg-s01 svg{
  width:24px;
  height:auto;
}
.shb-fs-small{
  font-size: 12px;
}
#slide-01{
  overflow: hidden;
  width: 600px;
  max-width: 100%;
}
#nav-games{
  max-width: 1248px;
}
.swiper-button-lock{
  display: inline-block !important;
}
#nav-games > div a{
  display: block;
    border: 2px solid transparent;
    background:
        linear-gradient(var(--ink)) padding-box,
        linear-gradient(0deg, var(--cyan), var(--ink)) border-box;
  border-radius: 20px;
  transition:var(--duration);
}
#nav-games > div a:hover{
  /* border-color:var(--cyan); */
  box-shadow: var(--cyan-glow);
}
#nav-games > div a img{
  transition:var(--duration);
}
#nav-games > div a:hover img{
  transform: scale(1.05);
}

/* กรอบที่มองเห็น — ซ่อนส่วนที่ล้นออก */
.viewport {
  width: 100%;
  overflow: hidden;
  border:1px solid var(--red);
  border-radius: 10px;
  padding:1rem;
  background: linear-gradient(90deg, rgba(232, 17, 42, 0.20) 0%, rgba(232, 17, 42, 0.00) 6%, rgba(232, 17, 42, 0.00) 94%, rgba(232, 17, 42, 0.20) 100%), rgba(232, 17, 42, 0.04);
  box-shadow: 0 0 18px 0 rgba(232, 17, 42, 0.18), 0 0 
}

/* แถวเลื่อน — เนื้อหาซ้ำ 2 ชุดอยู่ข้างใน */
.track {
  display: flex;
  gap: var(--slide-gap);
  width: max-content;
  animation: scroll var(--speed) linear infinite;
}

/* หยุดเมื่อเอาเมาส์ชี้ (optional) */
.viewport:hover .track { animation-play-state: paused; }

.slide {
  width: auto;
  height: auto;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: #0f1115;
  flex-shrink: 0;
  display: flex;
}
.slide > img {
  width:auto;
  height:30px;
}
.slide::before {
  content:'✦';
  font-size: 1rem;;
  color:var(--cyan);
  display: inline-flex;
  margin-right:var(--slide-gap);
}
#side-menu{
  position:fixed;
  right:1rem;
  bottom:6rem;
  z-index: 9;
}
#side-menu button{
  width:64px;
  height:64px;
  animation: zoom-in-out 1.5s ease-in-out infinite;
}

#btn-vip > img{
  border-radius: 999px;
  box-shadow: 0 0 6px 0 #C5D5FE;
  background:none;
}

#btn-slothack > img{
  border-radius: 999px;
  box-shadow: 0 0 6px 0 #2CBE44;
  background:none;
}
.box-red-grad{
  border-radius: 10px;
  padding:1rem;
  border: 1px solid var(--red);
  background: linear-gradient(90deg, rgba(232, 17, 42, 0.20) 0%, rgba(232, 17, 42, 0.00) 6%, rgba(232, 17, 42, 0.00) 94%, rgba(232, 17, 42, 0.20) 100%), rgba(232, 17, 42, 0.04);
  box-shadow: 0 0 18px 0 rgba(232, 17, 42, 0.18), 0 0 24px 0 rgba(232, 17, 42, 0.08);
}
.box-red-blood{
  border-radius: 20px;
  border: 1px solid var(--heirline);
  background: var(--bg-box-red-blood);
}
.box-gameded{
  border:4px solid #696969;
  border-radius:20px;
  background-color: rgba(0, 0, 0, 0.8);
}

.box-gameded [class*="box-1"]::after, .box-gameded [class*="box-4"]::after {
  content:'';
  display: block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:transparent;
  box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.6);
  z-index: 2;
  transition: var(--duration);
  pointer-events: none;
}
.box-gameded [class*="box-1"] img, .box-gameded [class*="box-4"] img{
  transition: var(--duration);
}
.box-gameded [class*="box-1"]:hover img, .box-gameded [class*="box-4"]:hover img{
  transform: scale(1.1);
}
.box-gameded [class*="box-1"]:hover::after, .box-gameded [class*="box-4"]:hover::after{
  box-shadow: inset 0 0 30px rgba(255, 0, 0, 0.6);
}
.box-premium-game{
  border: 4px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(var(--ink), var(--ink)) padding-box,           /* พื้นด้านใน */
    linear-gradient(to bottom, #696969, transparent) border-box;  /* gradient ตรงขอบ */
}

.title-ogs{
  display: flex;
  flex-direction: row;
  gap:8px;
  font-size:20px;
  justify-content: center;
}
.title-ogs::before, .title-ogs::after{
  content: '';
  display: inline-flex;
  width:20px;
  height: 20px;
  background-image: url(../images/ogs.svg);
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(3px);
}
.box-16-9{
  background: #C4C4C4;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.box-4-3{
  background: #C4C4C4;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.box-1-1{
  background: #C4C4C4;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.box-16-9 .poster, .box-1-1 .poster, .box-4-3 .poster{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: var(--duration);
}
.box-poster:hover .poster{
    transform: scale(1.1);
}
.box-bd-red{
    border-radius: 20px;
    border: 1px solid var(--heirline);
    background: linear-gradient(180deg, #1A0A14 0%, #0A0608 100%);
    transition:var(--duration);
}
.box-bd-red.have-hov:hover {
    border-color: var(--red-blood);
    box-shadow: 0 0 60px 0 rgba(232, 17, 42, 0.02), 0 0 24px 0 rgba(232, 17, 42, 0.45);
}
.navigation.pagination{
  justify-content: center;
  margin-top:24px;
}
.pagination .nav-links{
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
  align-items: center;
  justify-content: center;
}
.pagination .nav-links > *{
  border:1px solid var(--cyan);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:transparent;
  border-radius: 999px;
  color:var(--white);
  box-shadow: var(--cyan-glow-soft);
}
.pagination .nav-links > span{
 color:var(--cyan-hi); 
}
.pagination .nav-links > a:hover{
  box-shadow: var(--cyan-glow);
  color: var(--cyan);
}
.pagination .nav-links > .next.page-numbers, .pagination .nav-links > .prev.page-numbers{
  color:transparent;
  background-image: url(../images/next.svg);
  background-position: center;
  background-repeat: no-repeat;
}
.pagination .nav-links > .next.page-numbers{
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.bg-gameded{
    /* background-image: url(../images/background/gameded.avif); */
    background: radial-gradient(69.75% 72.29% at 48.59% 50.02%, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 8%, rgba(0, 0, 0, 0.8) 100%), url(../images/background/gameded.avif) lightgray 50% / cover no-repeat;
    background-position: top center;
}
.post-detail p{
  margin-bottom:0;
  color:var(--paper);
}
#mobile-menu{
  position:fixed;
  left:0;
  bottom:0;
  display: flex;
  gap:4px;
  flex-grow: 1;
  flex-direction: row;
  width:100%;
  height:80px;
  background:var(--bg-footer);
  padding-bottom:1rem;
  z-index: 9999;
  border-radius: 10px 10px 0 0;
}
#mobile-menu > *, #mobile-menu > .dropup .dropdown-toggle{
  font-size:12px;
  font-weight:600;
  color:var(--paper);
    width: 100%;
  flex-grow: 1;
  row-gap:4px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  position:relative;
}
#mobile-menu > *.active{
  color:var(--cyan);
}
#mobile-menu > *.active svg > path{
  fill:var(--cyan);
}
#mobile-menu > .dropup .dropdown-toggle{
  background:transparent;
  border:none;
}
#mobile-menu > .dropup .dropdown-toggle::after{
  display: none;
}
#mobile-menu .dropdown-menu{
  background-color: #0a0608e9;
}
#mobile-menu .dropdown-menu a{
  color:var(--paper);
}
#login-mobile{
  background: #1a1a2e;
  background: linear-gradient(180deg, var(--ink) 50%, var(--red) 50%);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding:10px;
  border-radius: 100%;
}
#login-mobile > button{
  width:70px;
  aspect-ratio: 1/1;
  background: linear-gradient(180deg, #002827 0%, #008681 50.91%, #00E4DB 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap:4px;
  border-radius: 100%;
  color:var(--paper);
  font-size:12px;
  font-weight: 600;
  border:none;
}
#bg-login-mobile{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 134%;
  height: 134%;
  transform: translate(-50%, -50%);
  z-index: -1;
  object-fit: cover;
  mix-blend-mode: luminosity; /* ตรงกับ Luminosity ใน Figma */
}
#footer_witch > img{
  display: block;
  width:100%;
  max-width: 1400px;
  height:auto;
  margin:auto;
  margin-bottom:-8.86%;
}
.bg-img{
  background-size:cover !important;
  opacity: 0.1;
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  pointer-events: none;
  z-index: -1;
}

/* หัวใจของการวน: เลื่อนไป -50% (= ความกว้างของ 1 ชุดพอดี)
    พอถึงจุดนั้น ชุดที่ 2 จะตรงกับตำแหน่งเริ่มต้น → วนได้ไร้รอยต่อ
    หมายเหตุ: ต้องบวก 1 gap เข้าไปด้วยเพราะ flex ใส่ gap คั่นทุกชิ้น */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--slide-gap) / 2)); }
}

/* เคารพผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
}

@media (min-width: 576px) {
  .fs-sm-1{
  font-size: 2.5rem !important;
  }
  .fs-sm-2{
    font-size: 2rem !important;
  }
  .fs-sm-3{
    font-size: 1.75rem !important;
  }
  .fs-sm-4{
    font-size: 1.5rem !important;
  }
  .fs-sm-5{
    font-size: 1.25rem !important;
  }
  .fs-sm-6{
    font-size: 1rem !important;
  }
  .fs-sm-7{
    font-size: .875rem !important;
  }
  .fs-sm-8{
    font-size: .75rem !important;
  }

  #main-header > picture > img{
    height: 820px !important;
    object-fit: cover;
    object-position: top;  
  }
  #slide-hero-banner{
    height:var(--slide-hero-banner-lg-height);
  }
  #log-mobile{
    margin-bottom:36px;
  }
  #slide-hero-banner{
    font-size:16px;
  }
  .shb-fs-small{
    font-size: 14px;
  }
}

@media (min-width: 768px) {
  .fs-md-1{
  font-size: 2.5rem !important;
  }
  .fs-md-2{
    font-size: 2rem !important;
  }
  .fs-md-3{
    font-size: 1.75rem !important;
  }
  .fs-md-4{
    font-size: 1.5rem !important;
  }
  .fs-md-5{
    font-size: 1.25rem !important;
  }
  .fs-md-6{
    font-size: 1rem !important;
  }
  .fs-md-7{
    font-size: .875rem !important;
  }
  .fs-md-8{
    font-size: .75rem !important;
  }
  #main-header > picture > img{
    height: 100% !important;
  }
  #slide-hero-banner{
    font-size:20px;
  }
  .shb-fs-small{
    font-size: 16px;
  }
  .row-cols-md-8 > * {
    flex: 0 0 auto;
    width: 12.5%;   /* 100% / 8 */
  }
  #slide-hero-banner > div:not(:nth-child(2)) {
    width:166px;
  }
  .title-ogs{
    font-size:36px;
  }
  .title-ogs::before, .title-ogs::after{
    width:24px;
    height: 24px;
    transform: translateY(12px);
    filter: drop-shadow(0 0 14px rgba(223, 34, 37, 0.55));
  }
  .popular-games{
    font-size:60px;
  }
  #mobile-menu{
    display: none;
  }
  #side-menu{
    bottom:3rem;
  }
  footer{
    padding-bottom:2.5rem !important;
  }
  #header-bar .offcanvas-body{
    padding-bottom:1rem;
  }
}

@media (min-width: 992px) {
  .fs-lg-1{
  font-size: 2.5rem !important;
  }
  .fs-lg-2{
    font-size: 2rem !important;
  }
  .fs-lg-3{
    font-size: 1.75rem !important;
  }
  .fs-lg-4{
    font-size: 1.5rem !important;
  }
  .fs-lg-5{
    font-size: 1.25rem !important;
  }
  .fs-lg-6{
    font-size: 1rem !important;
  }
  .fs-lg-7{
    font-size: .875rem !important;
  }
  .fs-lg-8{
    font-size: .75rem !important;
  }
  .play-lsm928{
    font-size:24px;
  }
  #btn-play > svg, .btn-navg-s01 svg {
    width: 40px;
  }
  #slide-hero-banner > div:not(:nth-child(2)) {
    width:208px;
  }
}

@media (min-width: 1200px) {
  .fs-xl-1{
  font-size: 2.5rem !important;
  }
  .fs-xl-2{
    font-size: 2rem !important;
  }
  .fs-xl-3{
    font-size: 1.75rem !important;
  }
  .fs-xl-4{
    font-size: 1.5rem !important;
  }
  .fs-xl-5{
    font-size: 1.25rem !important;
  }
  .fs-xl-6{
    font-size: 1rem !important;
  }
  .fs-xl-7{
    font-size: .875rem !important;
  }
  .fs-xl-8{
    font-size: .75rem !important;
  }
}

@media (min-width: 1400px) {
 #footer_witch > img{
  margin-bottom:-124px;
}
}

@keyframes zoom-in-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05); /* Adjust this to change the zoom size */
  }
  100% {
    transform: scale(1);
  }
}