: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;
  --green: #00F80C;
  --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;
}

/* ซ่อน scrollbar ทั้งหน้า (ครอบคลุมทุก browser) */
html {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE / legacy Edge */
}

html::-webkit-scrollbar {
    display: none;               /* Chrome, Safari, Edge (Chromium) */
}

body{
  font-family: 'Prompt';
  font-size: 1rem;
  background-color: var(--ink);
  color:var(--paper);
  padding:0 !important;
  margin:auto;
}
.ff-cinzel{
  font-family: 'Cinzel' !important;
}
.ff-cormorant-garamond{
  font-family: 'CormorantGaramond';
}
.container-ai, .offcanvas{
    width: 100%;
    max-width: 412px;
    margin:auto;
}
.offcanvas{
  height:auto !important;
  background: var(--btn-catg-ai) !important;
  border-radius: 20px 20px 0 0;
}
.offcanvas button.btn-close{
  position: absolute;
  top:1rem;
  right: 1rem;
  border : 1px solid var(--paper);
  border-radius: 999px;
  padding:.5rem;
  background-color: var(--paper);
}
#imgOff{
  width:auto;
  height:120px;
  object-fit: contain;
  border-radius: 28px;
  display: block;
  transform: translate(-50%, -50%);
  position:absolute;
  top:0;
  left:50%;
}
#bg_off_ai{
  overflow: hidden;
  position: absolute;
  width: 80%;
  left:50%;
  top:0;
  transform: translate(-50%, -62%);
}
#bg_off_ai > img{
  width:100%;
  height:auto;
    animation: 6s linear 0s infinite normal none running spin;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.bg-off-ai{
  width: 100%;
  height:auto;
  overflow: hidden;
}

.text-green{
    color:var(--green);
}
.text-paper{
  color:var(--paper);
}

.nav.nav-tabs{
    border:0;
}
#MainTab button, #btn-play-game{
    width: 100%;
    padding:4px;
    border-radius:999px;
    min-height:42px;
    font-weight: 600;
    color:var(--white);
    border: 1px solid var(--Cyan, #34D8D4);
    background: linear-gradient(180deg, rgba(255, 45, 68, 0.20) 0%, rgba(232, 17, 42, 0.20) 45%, rgba(163, 12, 31, 0.20) 100%);

/* Cyan-glow-soft */
box-shadow: 0 0 10px 0 rgba(52, 216, 212, 0.35);
}
#MainTab button.active, #btn-play-game{
    border-color: var(--red);
    background: var(--red-grad);
    box-shadow: 0 0 60px 0 rgba(232, 17, 42, 0.02), 0 0 24px 0 rgba(232, 17, 42, 0.45);
}

#tab-menu{
    border-radius: 10px;
    background: linear-gradient(180deg, #202125 0%, #202125 100%);
}
.flex-none{
  flex:none !important;
}
.btn-cate{
    width:70px;
    height:70px;
    padding:4px;
    border-radius: 999px;
    background: var(--btn-catg-ai, linear-gradient(180deg, #434343 0%, #060607 100%));
    box-shadow: 0 3px 10px 0 #000;
    position: relative;
}
.btn-cate.active{
  border-color: var(--red);
  background: var(--red-grad);
}
#myTab .swiper-slide:first-child .btn-cate::after{
  content:'มาแรง';
  display: inline-flex;
  position: absolute;
  top:0;
  left:50%;
  transform: translate(-50%,-50%);
  font-size: 10px;
  white-space: nowrap;
  width:auto;
  padding:0 8px 0 16px;
  border-radius: 8px;
  background-color: rgba(196, 196, 196, 0.85);
  background-image: url(../images/fire.avif);
  background-position:  center left 4px;
  background-size: auto 80%;
  background-repeat: no-repeat;
  color:#000;
  font-weight: 500;
  pointer-events: none;
}
#myTab .nav-item{
    width:70px;
}

#gameTabContent .tab-pane {
  counter-reset: game-counter;
}
#gameTabContent > .tab-pane > .list{
  position:relative;
  padding-left:48px;
  padding-right:.5rem;
}
#gameTabContent > .tab-pane > .list::before {
  counter-increment: game-counter;
  content: counter(game-counter);
  display: block;
  position: absolute;
  top:0%;
  left:0;
  transform: translateY(-20%);
  font-size:90px;
  font-weight: 600;
  color:var(--smoke);
  z-index: -1;
}
#gameTabContent .tab-pane .img{
  max-width: 40vw;
}

@property --percent {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

.bar-track {
  position: relative;
  width: 100%;
  height: 8px;
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  --percent: 0;
  position: absolute;
  inset: 0;
  width: calc(var(--percent) * 1%);
  border-radius: 999px;
  background: hsl(calc(var(--percent) * 1.2deg), 90%, 45%);
  animation: barLoad 1.5s ease-out forwards;
}

@keyframes barLoad {
  to { --percent: var(--target); }
}

.num {
  color: hsl(calc(var(--percent, 0) * 1.2deg), 90%, 45%);
}

.text-green{
  color:var(--green);
}
.img-g-rt{
  border-radius: 20px;
}
div[data-bs-toggle="offcanvas"]{
  transition: ease .25s;
  cursor: pointer;
}
div[data-bs-toggle="offcanvas"]:hover{
  transform: scale(1.1);
}
.offcanvas-body{
  padding-top:80px;
}
.container-ai{
  overflow: hidden;
}
@media (min-width: 412px) {
  #gameTabContent > .tab-pane > .list{
    padding-right:0;
  }
  #gameTabContent .tab-pane .img{
    max-width: 160px;
  }
  .container-ai{
    overflow: visible;
  }
}