:root {
  --pink: #ff606e;
	--opensans: 'Open Sans', sans-serif;
}
 
@keyframes animatetop{
	from {opacity: 0; transform: translateY(150px);}
    to {opacity: 1;}
}

@keyframes animateright{
	from {opacity: 0; transform: translateX(200px);}
    to {opacity: 1;}
}

@keyframes animateleft{
	from {opacity: 0; transform: translateX(-300px);}
    to {opacity: 1;}
}

html{
	scroll-behavior: smooth;
}

body{
  width: 100%;
  margin: 0px;
  padding: 0px;
  color: white;
  background-color: black;
  background-image: url(../images/pattern.jpg);
  font-family: 'Noto Sans SC', sans-serif;
	font-family: 'Open Sans', sans-serif;
  display: flex;
  justify-content: center;
}

/* width */
::-webkit-scrollbar {
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #141414;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #1a1a1a;
}

.mainwrapper{
  width: 100%;
  max-width: 1920px;
  margin: auto;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.contentwrapper{
  margin-top: 100px;
}

body h1{
  font-weight: 900;
  text-transform: uppercase;
}

.navigation{
  padding: 10px 50px;
  z-index: 999;
  background-image: linear-gradient(#2c2c2cd7,#202020d7);
}

.navwrapper{
  justify-content: flex-end;
}

.navigationitem{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.navigationitem a{
  width: 100%;
  height: 58px;
  background: url(../images/nav-hover.png);
  background-repeat: no-repeat;
  background-size: 116px 58px;
  background-position: -116px;
}

.navigationitem a:hover,
.navigationitem a.active{
  background-position: 0;
  transition: .3s ease-out;
}

.navigationitem a img{
  width: 48px;
  height: 26px;
  object-fit: cover;
  object-position: 0;
  margin: 0 30px;
  font-size: 0;
  scale: .85;
}

.navigationitem:nth-child(2) img{
  object-position: -123px center;
  width: 100px;
}

.navigationitem:nth-child(3) img{
  object-position: -295px center;
  width: 100px;
}

/* .navigationitem:nth-child(4) img{
  object-position: -468px center;
  width: 112px;
}

.navigationitem:nth-child(5) img{
  object-position: -653px center;
  width: 37px;
} */

.navigationitem:nth-child(4) img{
  object-position: -764px center;
  width: 100px;
}

.navigationitem2 span{
  font-weight: 900;
  color: white;
}

.navigationitem.en a img{
  width: 49px;
  height: 21px;
  object-fit: cover;
  object-position: 0;
  margin: 0 30px;
  font-size: 0;
  scale: .85;
}

.navigationitem.en:nth-child(2) img{
  object-position: -116px center;
  width: 115px;
}

.navigationitem.en:nth-child(3) img{
  object-position: -299px center;
  width: 128px;
}

/* .navigationitem.en:nth-child(4) img{
  object-position: -493px center;
  width: 112px;
}

.navigationitem.en:nth-child(5) img{
  object-position: -675px center;
  width: 37px;
} */

.navigationitem.en:nth-child(4) img{
  object-position: -779px center;
  width: 78px;
}

.navigationitem a:hover img,
.navigationitem a.active img{
  scale: 1;
  transition: .3s;
}

.navigationitem2 a:hover span{
  scale: 1.15;
  transition: .3s;
}

.navbar-toggler{
  color: white;
  background-color: transparent;
  border: var(--bs-border-width) solid white;
}

@media screen and (max-width: 1400px) {
  .navbar-nav{padding-top: 30px; margin: 15px 0; gap: 20px; border-top: .5px solid rgba(255, 255, 255, 0.3);}
	.navigationitem a img, .navigationitem.en a img{scale: 1;}
  .navigation{ background-image: linear-gradient(#2c2c2cd7,#202020d7);}
  .navigationitem2{ margin-left: 20px;}
}

.kv{
  width: 100%;
  max-width: 1920px;
  height: 1061px;

  background-image: url(../images/kvbg2.png);
  background-repeat: no-repeat;
  background-size: cover;

  background-position: center 0px;

  display: flex;
  justify-content: center;
}


.kvbutton{
  margin-top: 450px; /* เดิม 550px → ลด = ขยับขึ้น */
}

.kvwrapper{
  width: 100%;
  height: 900px;
  display: flex;
  align-items: end;
  margin: 0;
  margin-top: -125px;
}

/* vd */
.video-popup-container{
	position: fixed;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, .7);
}

#video-popup-close{
  cursor: pointer;
  position: absolute;
  right: -15px;
  top: -15px;
  z-index: 998;
  width: 50px;
  height: 50px;
  border-radius: 35px;
  text-align: center;
  font-size: 12px;
  background-color: #000;
  line-height: 50px;
  color: #fff;
}

.vdwrapper{
  margin: auto;
  margin-top: 10.75rem;
}

.vdpop {
    max-width: 1000px;
}

.video-popup-iframe-container {
  background: none;
  border: 0;
  width: 100%;
  max-width: 1000px;
  min-width: 300px;
}

#video-popup-close:hover{
  color: var(--pink);
  transform: rotate(180deg);
  font-size: 16px;
  transition: .5s ease;
  scale: 1.05;
}

/* button */
.kvbutton{
  display: flex;
  margin-top: 550px;
  flex-direction: row;
  justify-content: center;
}

@media screen and (max-width: 500px) {
  .kvbutton{
    flex-direction: column;
    align-items: center;
  }
}

.button{
  font-size: 0;
  display: block;
  width: 280px;
  height: 120px;
  margin: 0 18px;
  animation: animatetop 1s ease;
  background-size: contain;
  border: 0;
}

.register-en{
  background: url(../images/en-registerbtn.png) no-repeat center;
}

.download-en{
  background: url(../images/en-downloadbtn.png) no-repeat center;
}


.button:hover{
  transform: translateY(-5px);
  background-size: contain;
  transition: .3s ease;
}

.videothumbnail{
  display: flex;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
}

.btn-check:checked+.btn:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible, .btn:first-child:active:focus-visible, :not(.btn-check)+.btn:active:focus-visible{
  background: none;
  border: 0;
  box-shadow: none;
  --bs-btn-box-shadow: none;
}

.btn:focus-visible,
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
  background-color: rgba(0,0,0,0);
  border: 0;
  box-shadow: none;
  --bs-btn-box-shadow: none;
  outline: 0;
}

.videocontainer{
  background-color: var(--pink);
  width: 500px;
  height: 290px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: animateright 1s ease;
  border: 0;
  border-radius: 0;
}

.wpvideocontainer{
  background-color: var(--pink);
  width: 100%;
  height: 100%;
  display: inline-flex;
  padding: 120px;
  align-items: center;
  justify-content: center;
  animation: animateright 1s ease;
  border: 0;
  border-radius: 0;
}

.videocontainer:hover{
  background-color: var(--pink);
  border: 0;
}

.videocontainer:hover img{
  scale: 1.1;
  transition: .5s;
}

.ctnpopup{
  max-width: 1400px;
  border: 0;
  align-items: center;
  justify-content: center;
  background-image: url(../images/pattern.jpg);
  background-color: rgba(0, 0, 0, .7);
  backdrop-filter: blur(9px);
}

.ctnpopupbg{
  background: none;
  padding: 50px;
  min-width: 450px;

}

.section2{
  z-index: 2;
  margin-top: -30px;
  margin-bottom: 100px;
  height: max-content;
  display: flex;
  justify-content: center;
}

.section2wrapper{
  width: 100%;
  max-width: 1420px;
}

.infobanner{
  display: flex;
  justify-content: center;
  align-items: center;
}

.infobanner img{
  width: 100%;
  max-width: 648px;
}

.infobannertitle{
  position: absolute;
  left: 0;
  mix-blend-mode: lighten;
  z-index: 50;
}

.infowrapper{
  padding: 60px 50px;
}

.title{
  position: relative;
  margin: 50px 0;
}

.title img{
  z-index: 3;
  max-width: 325px;
  min-width: 220px;
}

.title.en img{
  z-index: 3;
  max-width: 500px;
  min-width: 220px;
}

.title span{
  position: absolute;
  right: -70px;
  top: -10px;
  width: 200px;
  height: 119px;
  background-image: url(../images/cloud.png);
  background-repeat: no-repeat;
  background-size: contain;
  animation: animateleft 1.2s ease;
}

.section3{
  padding-bottom: 100px;
  height: max-content;
  display: flex;
  justify-content: center;
	background: linear-gradient(to bottom, transparent, black) 
  no-repeat bottom;
	background-size: 100% 20%;
}

.section3wrapper{
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.newswrapper.row{
  gap: 20px;
  margin-top: 50px;
  justify-content: center;
}

.newsbox{
  text-decoration: none;
  color: white;
  width: 100%;
  display: flex;
  align-items: center;
  max-width: 383px;
  height: 400px;
  overflow: hidden;
  flex-direction: column;
  column-gap: 20px;
  justify-content: flex-end;
  padding: 0;
}

.newsimg{
  z-index: 1;

  width: 100%;
}

.newsimg img {
  width: 100%;
}

.newsbox:hover{
  /* height: 475px; */
  /* margin-top: -75px; */
  transition: .5s;
}

.newsbox:hover .newsimg{
  height: 280px;
  scale: 1.2;
  transition: .5s ease-in-out;
}


.newsctn{
  width: 100%;
  z-index: 3;
  height: fit-content;
  min-height: 210px;
  padding: 30px 20px;
  background-color: rgb(34, 34, 34);
  background-image: linear-gradient(#575757,#202020);
}

h2{
  font-weight: 900;
  font-size: 1.6rem;
}

.section4{

  height: max-content;
  display: flex;
  padding: 0;
  margin-top: -2px;
  justify-content: center;
  background-image: url(../images/featurebg.png);
  /* background-attachment: fixed; */
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 1920px 1816px;
}

.section4main{
  width: 100%;
  background: linear-gradient(to top, transparent, black) no-repeat top;
  background-size: 100% 20%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.section4wrapper{
  width: 100%;
  padding: 50px 70px;
  column-gap: 25px;
  justify-content: center;
}

.weaponctn{
  position: relative;
  width: 120%;
  max-width: 748px;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 25px;
  margin-top: 150px;
  z-index: 5;
}

.weapontitle{
  position: absolute;
  top: -150px;
  width: 100%;
  max-width: 748px;
}

.weaponbtn{
  display: flex;
  flex-wrap: wrap;
  font-size: 0;
  flex-direction: row;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 1024px) {
  .weaponbtn{justify-content: center; gap: 10px 20px;}
}

.weaponbtn span{
  cursor: pointer;
  width: 103px;
  height: 103px;
  background-image: url(../images/swordbtn.png);
  background-position: center;
  background-repeat: no-repeat;
}

.weaponbtn span:hover,
.weaponbtn span.active{
  background-image: url(../images/swordbtn-hvr.png);
}

.weaponbtn span:nth-child(2) {
  background-image: url(../images/spearbtn.png);
}

.weaponbtn span:nth-child(2):hover,
.weaponbtn span:nth-child(2).active{
  background-image: url(../images/spearbtn-hvr.png);
}

.weaponbtn span:nth-child(3) {
  background-image: url(../images/katanabtn.png);
}

.weaponbtn span:nth-child(3):hover,
.weaponbtn span:nth-child(3).active{
  background-image: url(../images/katanabtn-hvr.png);
}

.weaponbtn span:nth-child(4) {
  background-image: url(../images/bowbtn.png);
}

.weaponbtn span:nth-child(4):hover,
.weaponbtn span:nth-child(4).active{
  background-image: url(../images/bowbtn-hvr.png);
}

.weaponbtn span:nth-child(5) {
  background-image: url(../images/fistbtn.png);
}

.weaponbtn span:nth-child(5):hover,
.weaponbtn span:nth-child(5).active{
  background-image: url(../images/fistbtn-hvr.png);
}

.weaponbtn span:nth-child(6) {
  background-image: url(../images/dartbtn.png);
}

.weaponbtn span:nth-child(6):hover,
.weaponbtn span:nth-child(6).active{
  background-image: url(../images/dartbtn-hvr.png);
}

/* EN weaponbtn */
.weaponbtn.en span{
  width: 95px;
  height: 95px;
  background-image: url(../images/en-swordbtn.png);
  background-position: center;
  background-repeat: no-repeat;
}

.weaponbtn.en span:hover,
.weaponbtn.en span.active{
  background-image: url(../images/en-swordbtn-hvr.png);
}

.weaponbtn.en span:nth-child(2) {
  background-image: url(../images/en-spearbtn.png);
}

.weaponbtn.en span:nth-child(2):hover,
.weaponbtn.en span:nth-child(2).active{
  background-image: url(../images/en-spearbtn-hvr.png);
}

.weaponbtn.en span:nth-child(3) {
  background-image: url(../images/en-katanabtn.png);
}

.weaponbtn.en span:nth-child(3):hover,
.weaponbtn.en span:nth-child(3).active{
  background-image: url(../images/en-katanabtn-hvr.png);
}

.weaponbtn.en span:nth-child(4) {
  background-image: url(../images/en-bowbtn.png);
}

.weaponbtn.en span:nth-child(4):hover,
.weaponbtn.en span:nth-child(4).active{
  background-image: url(../images/en-bowbtn-hvr.png);
}

.weaponbtn.en span:nth-child(5) {
  background-image: url(../images/en-fistbtn.png);
}

.weaponbtn.en span:nth-child(5):hover,
.weaponbtn.en span:nth-child(5).active{
  background-image: url(../images/en-fistbtn-hvr.png);
}

.weaponbtn.en span:nth-child(6) {
  background-image: url(../images/en-dartbtn.png);
}

.weaponbtn.en span:nth-child(6):hover,
.weaponbtn.en span:nth-child(6).active{
  background-image: url(../images/en-dartbtn-hvr.png);
}

/* wizard button */
.weaponbtn.en span:nth-child(7){
  background-image: url(../images/en-wizardbtn.png);
}

.weaponbtn.en span:nth-child(7):hover,
.weaponbtn.en span:nth-child(7).active{
  background-image: url(../images/en-wizardbtn-hvr.png);
}

.weaponinfo{
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  margin: 20px 0;
}

.weaponinfo p{
 font-size: 1.3rem;
}

.wpname{
  width: 100%;
  display: flex;
}

.wpname h2{
  text-align: center;
  white-space: nowrap;
  margin: 0 20px;
}

.wpname span{
  width: 100%;
  border-bottom: 1px solid white;
  margin-bottom: 15px;
}

@media screen and (max-width: 650px) {
  .wpname h2{white-space: wrap;}
  .wpname span{display: none;}
}

.weaponvideo{
  width: 100%;

  padding: 50px;
}

.weaponchar{
  width: 100%;
  max-width: 850px;
}

.weaponchar img{
  position: absolute;
  right: 90px;
  max-width: max-content;
  height: 100%;
  max-height: 900px;
  animation: animatetop 1s ease;
  z-index: 0;
}

@media screen and (max-width: 1650px) {
  .weaponbtn span,  .featurebtn span{ width: 80px; height: 80px; background-size: 80px 80px;}
  .weaponchar img{height: 800px;}

}

.section5{
  display: flex;
  background: linear-gradient(to bottom, transparent, black) no-repeat bottom;
  margin-top: 150px;
  /* background-size: 100% 20%; */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section5wrapper{
  width: 100%;
  max-width: 1300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.section5wrapper img{
  /* position: absolute; */
  width: 100%;
  max-width: 1050px;
  animation: animatetop 1s ease;
  z-index: 5;
}

@media screen and (max-width: 1200px) {
  .weaponchar{display: flex; align-items: center; justify-content: center;}
  .weaponchar img{position: relative; height: 100%; min-width: 300px; right: 0;}
  .section4wrapper{flex-direction: column-reverse; justify-content: start; align-items: center;}
  .weapontitle{position: relative; top: 0;}
  .weaponctn{margin: 0;}

}

.featuretitle{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.featuretitle span{
  width: 100%;
  max-width: 1250px;
  margin: 0 50px;
  height: 100%;
  position: absolute;
  background-image: url(../images/feature.png);
  background-size: contain;
  background-repeat: no-repeat;
    margin-top: -60px;
  animation: animatetop .5s ease;
}

.featuretitle.en span{
  background-image: url(../images/en-feature.png);

}


.section6{
  display: flex;
  justify-content: center;
  margin-top: -100px;
  z-index: 10;
  background: linear-gradient(to top, transparent, black) no-repeat;
  background-position-y: 100px;
  background-size: 100% 20%;
}

.section6wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1200px;
    margin: 20px;
    margin-bottom: 50px;
    padding: 50px;
    justify-content: center;
    background-color: #1f1f1f;
    border: 1px solid white;
    border-radius: 50px;
    align-items: center;
    overflow: hidden;
}

.featurebtn{
  display: flex;
  flex-wrap: wrap;
  font-size: 0;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.featurebtn span{
  cursor: pointer;
  width: 87px;
  height: 87px;
  background-image: url(../images/fbtn1.png);
  background-position: center;
  background-repeat: no-repeat;
}

.featurebtn span:hover,
.featurebtn span.active{
  background-image: url(../images/fbtn1-hvr.png);
}

.featurebtn span:nth-child(2) {
  background-image: url(../images/fbtn2.png);
}

.featurebtn span:nth-child(2):hover,
.featurebtn span:nth-child(2).active{
  background-image: url(../images/fbtn2-hvr.png);
}

.featurebtn span:nth-child(3) {
  background-image: url(../images/fbtn3.png);
}

.featurebtn span:nth-child(3):hover,
.featurebtn span:nth-child(3).active{
  background-image: url(../images/fbtn3-hvr.png);
}

.featurebtn span:nth-child(4) {
  background-image: url(../images/fbtn4.png);
}

.featurebtn span:nth-child(4):hover,
.featurebtn span:nth-child(4).active{
  background-image: url(../images/fbtn4-hvr.png);
}

.featurebtn span:nth-child(5) {
  background-image: url(../images/fbtn5.png);
}

.featurebtn span:nth-child(5):hover,
.featurebtn span:nth-child(5).active{
  background-image: url(../images/fbtn5-hvr.png);
}

.featurebtn span:nth-child(6) {
  background-image: url(../images/fbtn6.png);
}

.featurebtn span:nth-child(6):hover,
.featurebtn span:nth-child(6).active{
  background-image: url(../images/fbtn6-hvr.png);
}

.featurebanner{
  position: relative;
  display: flex;
  max-height: 600px;
  margin-top: 30px;
  margin-bottom: 75px;
  gap: 10px;
}

.featurebanner img{
  width: 100%;
  height: fit-content;
  min-width: 250px;
  max-width: 900px;
}

.featuretab{
  font-size: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
}

.sidetab{
  font-size: 0;
  width: 5px;
  height: 100%;
  padding: 0;
  border: none;
  background-color: white;
}

.sidetab.active,
.sidetab:hover{
  background-color: var(--pink);
  transition: all.5s;
}

.fadeslide {
  animation-name: fadeslide;
  animation-duration: 1s;
}

@keyframes fadeslide {
	from {opacity: .4; transform: translateY(25px);}
	to {opacity: 1;}
}


/* footer */
.section7{
  width: 100%;
  max-width: 1920px;
  background-image: url(../images/contactbg.png);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 50px;
  padding: 100px 0;
  z-index: 5;
}

.section7wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  row-gap: 20px;
}

.contact{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0;
  padding: 0 50px;
  gap: 30px;
  
}

.contact span{
  display: block;
  content: ""; 

  width: 50px;
  height: 100px;
  border-left: 1.5px solid white;
  transform: translateX(25px);

}

.fb{
  width: 93px;
  height: 93px;
  background-image: url(../images/fbbtn.png);
  background-repeat: no-repeat;
  background-position: center;

}

/*.fb:hover{
  background-image: url(../images/fbbtn-hover.png);
}*/

h3{
  font-size: 1.2rem;
}

.contactbtn{
  column-gap: 50px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.callbtn{
  font-size: 0;
  width: 350px;
  height: 150px;
  background: url(../images/callbtn.png) no-repeat center;
  background-size: contain;
}

/* .callbtn:hover{
  background: url(../img/button/callbtn-hover.png) no-repeat center;
  background-size: contain;
} */

.emailbtn{
  font-size: 0;
  width: 350px;
  height: 150px;
  background: url(../images/emailbtn.png) no-repeat center;
  background-size: contain;
}

/*.emailbtn:hover{
  background: url(../images/emailbtn-hover.png) no-repeat center;
  background-size: contain;
}*/

@media screen and (max-width: 900px) {
  .callbtn, .emailbtn{scale: 0.8;}
}

.footer{
  background-color: var(--pink);
  margin: auto;
  padding: 50px;
  z-index: 5;
}

.footerwrapper{
  width: 100%;
  margin: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.footerlogo{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 80px;
}

.footerlogo img{
  height: 100%;
  max-height: 50px;
}

.footerinfo{
  text-align: center;
}

.footerinfo a{
  text-align: center;
  text-decoration: 0;
  color: white;
}

.footerinfo a:hover{
  color: #b01010;
}



/* news */
.searchsection{
  width: 100%;
  max-width: 1080px;
  /* margin-right: 20%; */
  display: flex;
  justify-content: flex-end;
}


.searchbar{
  margin: 35px 0px;
  display: flex;
  align-items: center;
  gap: 0;
  height: 35px;
}

.searchbarctn{
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border: none;
  color: white;
  padding: 9px 15px;
  background-color: #565656a6;

}

.searchicon{
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 9px 0 9px 25px;
  background-color: #565656a6;
}

.searchicon img:last-child{
  display: none;
}

.searchicon:hover img:first-child{
  display: none;
}

.searchicon:hover img:last-child{
  display: block;
}

.searchbar [type="search"]{
  outline: none;
}

.dataTables_wrapper .dataTables_filter {
  margin-bottom: 25px;
}

.newsctnwrapper{
  width: 100%;
  position: relative;
  margin: auto;
  margin-bottom: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
} 

.mainnewswrapper{
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.mainnewsbox{
  position: relative;
  text-decoration: none;
  color: white;
  width: 100%;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  flex-direction: row;
  background-image: linear-gradient(#575757,#202020);
  padding: 0;
}

.mainnewsimg{
  overflow: hidden;
}

.mainnewsimg img {
  width: 100%;
}

.mainnewsbox:hover img {
  scale: 1.15;
  transition: .5s;
}

.mainnewsctn{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 700px;
  gap: 5px;
  position: relative;
  z-index: 3;
  padding: 30px 35px;
  padding-right: 75px;
  justify-content: space-between;
}

.mainnewsctn span{
  margin-top: 50px;
  font-size: medium;
  font-weight: 200;
  color: #b3b3b3;
}

.readmore{
  position: absolute;
  z-index: 99;
  width: 150px;
  right: 60px;
  bottom: 10px;
  border: none;
  background: url(../images/readbtn.png) no-repeat center;
  background-size: contain;
}

.readmore:hover{
  background: url(../images/readbtn-hover.png) no-repeat center;
  background-size: contain;
  transform: translateY(-5px);
  transition: .5s;
}

.readmore.en{
  background: url(../images/en-viewallbtn.png) no-repeat center;
  background-size: contain;
}

.readmore.en:hover{
  background: url(../images/en-viewallbtn-hover.png) no-repeat center;
  background-size: contain;
  transform: translateY(-5px);
  transition: .5s;
}

@media screen and (max-width: 1010px) {
 .mainnewsbox{flex-direction: column;}
 .mainnewsctn{padding: 30px;}
}

/* Pagination */
.newspagctn{
  margin-top: 70px;
}

.newspg{
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px 10px;
}

.page-item{
  color: white;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
}

.newspglink{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.newspglink:hover{
  font-weight: 900;
}

.pglink{
  border: 2px solid #565656;
  width: 110px;
  height: 35px;
  padding: 0 20px;
}

.pglink:hover{
  background-color: #565656;
  font-size: 18px;
  transition: 0.3s;
}

.numlink{
  position: relative;
  margin: 5px;
  width: 45px;
  height: 45px;
  border-radius: 50px;
}

.numlink::after{
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 45px;
  height: 45px;
  border-radius: 50px;
  border: 0 solid var(--pink);
}

.numlink:hover,
.numlink.active{
  background-color: var(--pink);
}

.numlink:hover::after,
.numlink.active::after{ 
  border: 1px solid var(--pink);
  display: block;
  top: 6px;
  left: 5px;
  transition: .5s;
}

.newspglink.disable{
  color: #565656; 
}

/* info */
.infocontentwrapper{
  margin-top: 55px;
}

.infocontent{
  width: 100%;
  max-width: 1420px;
  padding: 50px;
  background-image: linear-gradient(to right, #575757,#202020);
}

.infoitem{
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
  margin: 0;
}

.infolink{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.infolink::after{
  content: '';
  height: 8px;
  width: 8px;
  transform: rotate(45deg);
  background-color: var(--pink);
}

.infolink:last-child::after{
  content: '';
  display: none;
}

.infolink a{
  list-style: none;
  text-align: center;
  text-decoration: none;
  color: white;
}

.infolink a:hover{
  font-weight: 600;
}


/* faqtab */
.faqtab{
  margin-bottom: 35px;
  display: flex;
  justify-content: center;
}

.integrate{
  background: url(../images/all.png) no-repeat center;
}

.integrate:hover,
.integrate.active{
  background: url(../images/all-hover.png) no-repeat center;
}

.account{
  background: url(../images/account.png) no-repeat center;
}

.account:hover,
.account.active{
  background: url(../images/account-hover.png) no-repeat center;
}

.technical{
  background: url(../images/technical.png) no-repeat center;
}

.technical:hover,
.technical.active{
  background: url(../images/technical-hover.png) no-repeat center;
}

.refund{
  background: url(../images/refund.png) no-repeat center;
}

.refund:hover,
.refund.active{
  background: url(../images/refund-hover.png) no-repeat center;
}

.gameplay{
  background: url(../images/problem.png) no-repeat center;
}

.gameplay:hover,
.gameplay.active{
  background: url(../images/problem-hover.png) no-repeat center;
}

.others{
  background: url(../images/other.png) no-repeat center;
}

.others:hover,
.others.active{
  background: url(../images/other-hover.png) no-repeat center;
}

/* EN faqtab */
.integrate-en{
  background: url(../images/en-all.png) no-repeat center;
}

.integrate-en:hover,
.integrate-en.active{
  background: url(../images/en-all-hover.png) no-repeat center;
}

.account-en{
  background: url(../images/en-account.png) no-repeat center;
}

.account-en:hover,
.account-en.active{
  background: url(../images/en-account-hover.png) no-repeat center;
}

.technical-en{
  background: url(../images/en-technical.png) no-repeat center;
}

.technical-en:hover,
.technical-en.active{
  background: url(../images/en-technical-hover.png) no-repeat center;
}

.refund-en{
  background: url(../images/en-refund.png) no-repeat center;
}

.refund-en:hover,
.refund-en.active{
  background: url(../images/en-refund-hover.png) no-repeat center;
}

.gameplay-en{
  background: url(../images/en-problem.png) no-repeat center;
}

.gameplay-en:hover,
.gameplay-en.active{
  background: url(../images/en-problem-hover.png) no-repeat center;
}

.others-en{
  background: url(../images/en-other.png) no-repeat center;
}

.others-en:hover,
.others-en.active{
  background: url(../images/en-other-hover.png) no-repeat center;
}

.faqctnwrapper{
  width: 100%;
  max-width: 1300px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.faqctn{
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 50px;
  padding: 0;
}

.faqctn a{
  color: white;
  text-decoration: none;
  padding: 0;
  margin: 0;
}

.faqctn a:hover{
  color: var(--pink);
}

.faqid{
  width: 190px;
  height: 62px;
}

.fq1{
  background: url(../images/f1.png) no-repeat center;
}

.fq2{
  background: url(../images/f2.png) no-repeat center;
}

.fq3{
  background: url(../images/f3.png) no-repeat center;
}

.fq4{
  background: url(../images/f4.png) no-repeat center;
}

.fq5{
  background: url(../images/f5.png) no-repeat center;
}

.fq1.en{
  background: url(../images/en-f1.png) no-repeat center;
}

.fq2.en{
  background: url(../images/en-f2.png) no-repeat center;
}

.fq3.en{
  background: url(../images/en-f3.png) no-repeat center;
}

.fq4.en{
  background: url(../images/en-f4.png) no-repeat center;
}

.fq5.en{
  background: url(../images/en-f5.png) no-repeat center;
}

.topic{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 50px;
  text-align: center;
}

.gamenewswrapper{
  width: fit-content;
  max-width: 1000px;
  min-height: 1200px;
  padding: 50px;
  background-image: linear-gradient(#575757,#202020);
  display: flex;
  flex-direction: column;
  align-items: center;
}


#news_details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

#mevent_img {
  display: contents;
}

.img-fluid {
  height: auto !important;
  /* max-width: 80vw; */
  height: auto;
}

#news_details p img{
  /*width: 100%;
  max-width: 100%;
  margin: auto;
  height: auto !important;*/
  padding: 10px;
} 

#event_detail {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

#event_detail p img{
  width: 100%;
  max-width: 100%;
  margin: auto;
  height: auto !important;
} 

.newslist {
  width: 100%;
}

.newslist ~ img{
  width: 100%;
  max-width: 100%;
}

.text-center {
  text-align: center!important;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.banner{
  width: 100%;
  height: 700px;
  background-color: #0f0f0f;
  margin-bottom: 25px;
}

.gamenews.container-fluid{
  padding: 0;
}

.newsthumbnail{
  width: 100%;
  background-color: rgba(0, 0, 0, .7);
  display: flex;
  margin-top: 80px;
  padding: 50px 0 ;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 50px;

}

.thumbnail{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 450px;
  height: 230px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
}

.thumbnail img{
  position: absolute;
  width: 100%;
  top: 0;
}

.thumbnail:hover img,
.thumbnail.active img{
  z-index: -1;
  transition: .5s;
}

.bcktop{
  margin-top: 50px;
  background: url(../images/bcktopbtn.png) no-repeat center;
}

.bcktop:hover{
  background: url(../images/bcktopbtn-hover.png) no-repeat center;
}

.bcktop-en{
  margin-top: 50px;
  background: url(../images/en-bcktopbtn.png) no-repeat center;
}

.bcktop-en:hover{
  background: url(../images/en-bcktopbtn-hover.png) no-repeat center;
}

.register-en,
.download-en{
  width: 300px;      /* เดิม 191px */
  height: 135px;     /* เดิม 98px */
  background-size: contain;
}

.kvbutton{
  position: relative;
  top: -420px;   /* ค่าติดลบ = ขยับขึ้น */
}

.callbtn,
.emailbtn{
  display: inline-block;
  cursor: pointer;
  transition: transform .25s ease, filter .25s ease;
}

.callbtn:hover,
.emailbtn:hover{
  transform: translateY(-8px);
  filter: brightness(1.1);
}

.contactbtn{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;   /* ชิดมาก */
  flex-wrap: nowrap;
}

:root{
  --fire:#ff6a00;
  --red:#ff2f2f;
  --dark:#0b0b0b;
}

/* ===== NAV ===== */
.nav{
  position:fixed;
  top:0;
  width:100%;
  z-index:9999;
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.4));
  box-shadow:0 0 40px rgba(255,90,0,.25);
}

.nav-inner{
  width: 100%;
  max-width: 1920px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 44px 30px;
  margin: 0 auto;
}



.logo{
  margin-left:0;
}



.menu{
  display:flex;
  gap:40px;
}

.menu a{
  color:#ddd;
  text-decoration:none;
  font-size:20px;      /* ← ขนาดตัวหนังสือ */
  font-weight:800;     /* ← หนาขึ้น */
  letter-spacing:2px;  /* ← ระยะห่าง */
  position:relative;
  transition:.3s;
}


.menu a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:2px;
  background:linear-gradient(90deg, var(--fire), var(--red));
  box-shadow:0 0 12px var(--fire);
  transition:.3s;
}

.menu a:hover{
  color:#fff;
  text-shadow:0 0 10px var(--fire);
}

.menu a:hover::after{
  width:100%;
}

.mainwrapper{
  padding-top:120px;
}

/* ===== DARKSTORY NAV FONT FIX ===== */
.nav{
  font-family: 'Orbitron', sans-serif;
}

.logo{
  font-size:22px;
  font-weight:900;
  letter-spacing:3px;
  color:#ff6a00;
  text-shadow:
    0 0 10px rgba(255,120,0,.9),
    0 0 30px rgba(255,80,0,.8),
    0 0 60px rgba(255,50,0,.6);
}


/* ===== FLOATING LOGO ===== */
.floating-logo{
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatLogo 4s ease-in-out infinite;
}

.floating-logo img{
  width: 120%;
  max-width: 460px;
  filter:
    drop-shadow(0 0 20px rgba(255,100,0,.6))
    drop-shadow(0 0 50px rgba(255,60,0,.4));
}

/* ลอยขึ้นลง */
@keyframes floatLogo{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

.kv{
  position: relative;
}

.server-box{
  position: absolute;
  left: 10%;
  bottom: 300px;

  width: 330px;
  padding: 38px 20px;

  background: rgba(0,0,0,.75);
  border-radius: 10px;

  box-shadow:
    0 0 20px rgba(0,0,0,.9),
    inset 0 0 15px rgba(255,255,255,.05);

  font-family: 'Orbitron', sans-serif;
  z-index: 30;
}

.server-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;

  font-size: 16px;
  color: #ffc266;
}

.server-row:last-child{
  margin-bottom: 0;
}

.server-status{
  font-weight: 700;
}

.online-dot{
  color: #00ff4c;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(0,255,76,.8);
}

/* ไอคอนคน */
.user-icon::before{
  content: "👤";
  margin-right: 6px;
}