:root{
    --thm-yellow: #EEC743;
    --thm-blue:#2753ED;
    --thm-purple: #8924FF;
    --thm-bg:   #1A1A1A;
    --thm-text: #1a1a1a;
    --thm-summary: #5C727D;
    --thm-border: #dfe0df;

    --thm-white:    #FFFFFF;

    --grd-digishark: linear-gradient(180deg, var(--thm-blue) 0%, var(--thm-yellow) 100%);
    --grd-blue: linear-gradient(180deg, #194CFF 0%, #8924FF 100%);
    --grd-yellow: linear-gradient(180deg, #FFCF2E 0%, #FFA700 100%);
    --grd-black: linear-gradient(180deg, #2B2B2B 0%, #515151 100%);

}

/*
////////////////////////////////////////////////////
*/

@font-face {
    font-family: 'LINE_Regular';
    src: url(../fonts/LINESeedSansTH_W_Rg.eot);
    src: url(../fonts/LINESeedSansTH_W_Rg.woff) format('woff'),
         url(../fonts/LINESeedSansTH_W_Rg.woff2) format('woff2');
}
@font-face {
    font-family: 'LINE_Thin';
    src: url(../fonts/LINESeedSansTH_W_Th.eot);
    src: url(../fonts/LINESeedSansTH_W_Th.woff) format('woff'),
         url(../fonts/LINESeedSansTH_W_Th.woff2) format('woff2');
}
@font-face {
    font-family: 'LINE_Bold';
    src: url(../fonts/LINESeedSansTH_W_Bd.eot);
    src: url(../fonts/LINESeedSansTH_W_Bd.woff) format('woff'),
         url(../fonts/LINESeedSansTH_W_Bd.woff2) format('woff2');
}
@font-face {
    font-family: 'LINE_XBold';
    src: url(../fonts/LINESeedSansTH_W_XBd.eot);
    src: url(../fonts/LINESeedSansTH_W_XBd.woff) format('woff'),
         url(../fonts/LINESeedSansTH_W_XBd.woff2) format('woff2');
}
@font-face {
    font-family: 'LINE_Heavy';
    src: url(../fonts/LINESeedSansTH_W_He.eot);
    src: url(../fonts/LINESeedSansTH_W_He.woff) format('woff'),
         url(../fonts/LINESeedSansTH_W_He.woff2) format('woff2');
}

/*
////////////////////////////////////////////////////
*/



html{
    /* font-family: 'Roboto', "Noto Sans Thai", sans-serif; */
    font-family: "LINE_Regular", sans-serif;
    font-size: 16px;
    font-weight: 400;
}
body{
    position: relative;
    color: var(--thm-white); 
	background-color: var(--thm-bg);
    position: relative;
    z-index: 0;
}

body.loading{
    overflow: hidden;
}
body.loading::before{
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--thm-bg);
    z-index: 1050;
}
body.loading::after{
    content: '\e9d0';
    font-family: 'Material Symbols Outlined';
    font-variation-settings:'FILL' 1,'wght' 900,'GRAD' 200,'opsz' 48;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--thm-yellow);
    z-index: 1097;
    animation: loadspin 1s linear  infinite;
}
@keyframes loadspin {
  100% {transform: rotate(360deg);}
}

@media (max-width: 767.98px){
    body{
        padding-bottom: 50px;
    }
}


a {
    color: var(--thm-gold);
}


/*
////////////////////////////////////////////////////
*/

.text-main{
    color: var(--thm-main);
}
.text-white{
    color: var(--thm-white);
}
.text-default{
    color: var(--thm-text);
}


.bg-default{
    background-color: var(--thm-bg);
}
.bg-white{
    background-color: var(--thm-white);
}
.bg-invert{
    background-color: var(--thm-invert);
}


/*
////////////////////////////////////////////////////
*/

.MSymbols::before{
    font-family: 'Material Symbols Outlined';
}
.MSymbols.bold::before{
    font-family: 'Material Symbols Outlined';
    font-variation-settings:'FILL' 1,'wght' 900,'GRAD' 200,'opsz' 48;
}


/*
////////////////////////////////////////////////////
*/

.isQueryContainer{
    container-type: inline-size;
    height: 100%;
}


/*
////////////////////////////////////////////////////
*/

.isEllipsis{
	/*-webkit-line-clamp: 2;*/
	-webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    overflow: hidden;
}


/*
////////////////////////////////////////////////////
*/



/*
////////////////////////////////////////////////////
*/

.invisibleScroll{
	-ms-overflow-style: none;
    scrollbar-width: none;
}
.invisibleScroll::-webkit-scrollbar {
  	display: none;
}

/*
////////////////////////////////////////////////////
*/