:root{
--primary-color: #2d3193;
--secondary-color: #005BAA;
--bg-color: #10137c;
--gradient: linear-gradient(169deg, rgba(50,167,233,1) 0%, rgba(129,104,238,1) 35%, rgba(224,24,241,1) 100%);
--magenta: #d507f4;
--blue: #3496fe;
}
body{
    background: rgb(6,27,39);
    background: linear-gradient(166deg, rgba(182, 97, 214, 1), rgba(24, 25, 173, 1) 38%, rgba(152, 14, 137, 1) 72%, rgba(131, 27, 192, 1));
    background: url(../images/bg-body.jpg) no-repeat center bottom;
    background-size: 100%;
}
section,
#header .header-inner,
#header #header-wrap{
background:transparent;
}
#header.header-modern:not(.header-active) .header-inner{
background: #fff;
border-radius: 50px;
}
#header.header-modern:not(.header-active){ margin: 30px auto 0;}
#header.header-modern:not(.header-active) + .inspiro-slider, #header.header-modern:not(.header-active) + #slider,
#header.header-modern:not(.header-active) + .fullscreen, #header.header-modern:not(.header-active) + .halfscreen,
#header.header-modern:not(.header-active) + #google-map{
top: -110px;
margin-bottom: -110px;
}

.text-magenta{ color:var(--magenta); }
.text-blue{ color: #3496fe !important; }
#slider{ background:transparent; }
a:hover{ cursor:pointer; }

body,
p,
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
#mainMenu nav > ul > li > a,
#footer p,
#footer{
    font-family: "Poppins", "Noto Sans Thai", sans-serif;
    letter-spacing: 0;
}
.font-custom{ font-family: "Sour Gummy", "Noto Sans Thai", sans-serif !important;}

body, p{
font-size: 14px;
color: #162328;
line-height: 1.5;
}
#header.header-sticky.sticky-active .header-inner,
#header.header-sticky.sticky-active #header-wrap{
border-radius: 0;
}

ul.inline{ display: inline-block; }
ul.inline li{ display: inline-block; float: left; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ letter-spacing: 0; font-weight: 600;}
a.btn:not([href]):not([tabindex]).btn-rounded, .btn.btn-rounded{ border-radius: 3em !important; }
.btn{ line-height: 50px; padding: 0 40px; font-size: 15px;}

.cOrange, .cOrg{ color: #f1982a; }
.cDark{ color: #404041; }
.cGray{ color: #6d6f71; }

#search .btn-search-close{ background: #404041; }
button.btn, .btn:not(.close):not(.mfp-close), a.btn:not([href]):not([tabindex]){
padding: 0 18px;
line-height: 40px;
color: #fff;
background: transparent;
/* border-color: #fcc013;*/
border-radius: 50px;
min-width: 140px;
}
button.btn, .btn:not(.close):not(.mfp-close), a.btn:not([href]):not([tabindex]), .flickity-button{
border: none;
border-radius: 30px;
color: #fff !important;
line-height: 40px;
background: var(--gradient);
}
.btn:hover, button.btn:hover, button.btn:focus, button.btn:not(:disabled):not(.disabled):active,
button.btn:not(:disabled):not(.disabled).active, .btn:not(.close):not(.mfp-close):hover,
.btn:not(.close):not(.mfp-close):focus, .btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled):active,
.btn:not(.close):not(.mfp-close):not(:disabled):not(.disabled).active, a.btn:not([href]):not([tabindex]):hover,
a.btn:not([href]):not([tabindex]):focus, a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled):active,
a.btn:not([href]):not([tabindex]):not(:disabled):not(.disabled).active{
background: #d507f4 !important;
/* background: linear-gradient(0deg, rgba(229,120,31,1) 0%, rgba(254,187,54,1) 100%);*/
}
.bg-gradient,
.flickity-button:hover{
background: var(--gradient);
}
.text-bg{
background: rgb(229,120,31);
background: linear-gradient(0deg, rgba(229,120,31,1) 0%, rgba(254,187,54,1) 100%);
color: #fff;
line-height: 1;
display: inline-block;
border-radius: 5px;
padding: 0 4px;
}
.text-bg-purple{
position: relative;
display: inline-block;
background: url('../images/bg/text-bg-purple.jpg') no-repeat;
background-size: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-bg-blue{
position: relative;
display: inline-block;
background: url('../images/bg/text-bg-blue.jpg') no-repeat;
background-size: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* header */
#header{
position: relative;
margin-bottom: -80px;
}
#header .header-inner #logo a > img,
#header #header-wrap #logo a > img{
height: 60px;
vertical-align: middle;
}
#header #header-wrap #logo a{ display: inline-block; }

#slider{ position: relative;}
#slider::before{
position: absolute;
content: "";
width: 100%;
height: 200px;
z-index: 2;
background-color: #000;
left: 0;
top: 0;
background: #061B26;
background: linear-gradient(to top, rgba(6, 27, 38, 0) 13.45%, rgba(93, 13, 123, 1) 98.74%);
}
#slider.inspiro-slider{ height: 100vh;}

#search{
height:300px;
background: linear-gradient(169deg, rgba(50,167,233,1) 0%, rgba(129,104,238,1) 35%, rgba(224,24,241,1) 100%);
color: #fff;
}
#search .search-form .text-muted{ color: #f2f2f2 !important; }
#search .search-form .form-control,
#search .search-form .form-control:focus{
background: #fff;
border-radius: 50px;
padding: 0 30px;
}
#btn-search{
    width: 32px;
    height: 32px;
    line-height: 32px;
    vertical-align: middle;
    display: inline-block;
    border-radius: 50%;
    top: -5px;
    color: #fff;
    font-size: 15px;
    text-align: center;
}
#btn-search i{
    font-size: inherit;
    color: inherit;
}
#btn-search{
    background: var(--gradient);
    color: #fff;
}

.font18{ font-size: 18px; }
.font20{ font-size: 20px; }
.font-600{ font-weight: 600; }
.w100{ width: 100%; }
.w50{ width: 50%; display: inline-block; float: left; }

a{ color: #27171F; }
a:not(.btn):hover, a:not(.btn):focus, a:not(.btn):active{ color: #f1982a;}
[class*="col-md-"]{ float: left; }
a:not(.btn):not(.badge):hover, a:not(.btn):not(.badge):focus, a:not(.btn):not(.badge):active{
color: var(--magenta);
}
.list-icon.list-icon-colored li:before, .list-icon.icon-list-colored i{
color: #ffffff;
}
.text-link{
display: inline-block;
line-height: 24px;
}
.text-link i{
display: inline-block;
line-height: 24px;
vertical-align: middle;
}

.link-custom{
color: #f1982a;
display: inline-block;
line-height: 40px;
}
.link-custom span{
display: inline-block;
float: left;
margin-right: 12px;
}
.right-circle{
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
background: #fcc013;
text-align: center;
color: #fff;
font-size: 1.5em;
display: inline-block;
}
.right-circle i{ transition: all .2s ease-in-out;}
a:hover > .right-circle i{ transform: translate(3px,0);}
.text-lg{ font-weight: 800; font-size: 4.3em; }
.text-md{ font-weight: 800; font-size: 3.3em; }
.limit1, .limit2, .limit3, .limit4, .limit5{
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
display: -webkit-box;
}
.limit1{-webkit-line-clamp: 1;}
.limit2{-webkit-line-clamp: 2;}
.limit3{-webkit-line-clamp: 3;}
.limit4{-webkit-line-clamp: 4;}
.limit5{-webkit-line-clamp: 5;}
.inline{ display: inline-block; }
.hvr-expand{ -webkit-transition: all ease-out 0.2s; -moz-transition: all ease-out 0.2s; -o-transition: all ease-out
0.2s; transition: all ease-out 0.2s;}
.hvr-expand:hover{ transform: scale(1.025);}

.hvr-up{ -webkit-transition: all ease-out 0.2s; -moz-transition: all ease-out 0.2s; -o-transition: all ease-out 0.2s;
transition: all ease-out 0.2s;}
.hvr-up:hover{ transform: translate(0,-10px); box-shadow: 0 26px 23px rgba(51, 51, 51, 0.12);}

.top-language{ float: left; }
.top-language ul{ margin: 0; float: left;}
.top-language ul li{
margin-left: 5px;
line-height: 80px;
}
.top-language ul li span{ display: none; }
.top-language a{
display: inline-block;
border: 2px solid transparent;
width: 28px;
height: 28px;
border-radius: 50%;
top: 5px;
position: relative;
}
.top-language ul li.active > a{
border: 2px solid #ddd;
color: #ddd;
}
.top-language img{
height: 100%;
float: left;
padding: 5%;
}

.top-contact{
border-left: 1px solid rgba(148, 146, 146, 0.59);
display: inline-block;
margin-left: 15px;
padding-left: 15px;
line-height: 1;
}
.header-extras > ul > li{ margin-left: 10px; }

.inspiro-slider .slide .slide-captions h1,
.inspiro-slider .slide .slide-captions h4{
color: #414141;
}

.text-bg{
background: url('../images/text-bg.jpg') no-repeat;
background-size: contain;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-repeat: initial;
}

/* MENU */
#mainMenu nav > ul > li{ padding: 0 15px; }
#mainMenu nav > ul > li > a{
font-size: 1.3em;
position: relative;
font-weight: 600;
padding: 0;
line-height: 80px;
display: inline-block;
text-transform: inherit;
color: rgba(40, 42, 108, 0.73);
}
.dropdown-menu{ font-size: 1em; }
#mainMenu nav > ul > li.dropdown > a:after{
font-family: inspiro-icons !important;
content: "\e92e";
font-size: 12px;
}
#mainMenu nav > ul > li.dropdown > a >span{ padding-right: 20px; }
#mainMenu nav > ul > li.active > a{ color: var(--primary-color);}

#mainMenu nav > ul > li:hover > a,
#mainMenu nav > ul > li.dropdown:hover > a,
#mainMenu nav > ul > li .dropdown-menu > li:hover > a,
#mainMenu nav > ul > li .dropdown-menu > li.active > a{
    color: var(--primary-color) !important; 
}
#mainMenu nav > ul > li .dropdown-menu li{ line-height: 40px; }

/* sect-logo-brands */
.sect-logo-brands{
position: relative;
background: rgba(255, 216, 0, 1);
overflow: initial;
z-index: 3;
padding-top: 40px;
}
.sect-logo-brands::before{
position: absolute;
content: "";
width: 100%;
height: 130px;
left: 0;
background: url(../images/decor/top.png) no-repeat;
top: -130px;
z-index: 200;
}

.headbar{
position: relative;
margin-bottom: 15px;
}
.headbar .htitle{
    font-size: 5em;
    font-family: "Sour Gummy", "Noto Sans Thai", sans-serif !important;
    line-height: 1;
    color: #673dbe;
    font-weight: 700;
    /* text-shadow: 2px 3px 1px #d18cde; */
}
.headbar .btn-right{
    position: absolute !important;
    top: 0;
    right: 15px;
    bottom: 0;
    margin: auto;
    height: -webkit-fit-content;
    padding: 0 15px;
    border-radius: 50px;
    line-height: 40px;
    background: transparent;
    border: 2px solid #ffffff;
    color: #fff !important;
}
.headbar .btn-right::after{
    content: "";
    display: inline-flex;
    width: 27px;
    height: 27px;
    background: url(../images/icon/right-arrow.png) no-repeat;
    background-size: 100%;
    margin-left: 10px;
    vertical-align: middle;
    transition: all .3s ease-in-out;
}
.headbar .btn-right.light::after{ filter: brightness(1) invert(1); }
.headbar .btn-right:hover::after{ transform: translate(5px,0); }
.headbar .btn-right:hover{
border-color: #21b6f0;
background: #21b6f0;
box-shadow: -5.9869384765625px 10.84375px 19px rgba(210, 20, 215, 0.6);
}

.flickity-page-dots .dot:after{ background-color: #fff;}
.flickity-page-dots .dot{ box-shadow: 0 0 0 2px #fff inset;}


.social-icons li.social-facebook a:hover{background-color:#227df5!important;color: #fff; }
.social-icons li.social-youtube a:hover{background-color:#ff0000!important;color: #fff; }
.social-icons li.social-line a{background-color:#00c300 !important;color: #fff; }
.social-icons li.social-x a{background-color:#000!important; color: #fff !important; }
.social-icons li.social-x a img, .social-icons li.social-line a img{ filter: brightness(0) invert(1); }
/* .social-icons li.social-tiktok a{background-color:#000!important;color: #fff; } */
.social-icons li.social-linkedin a{background-color:#0b66c2!important;color: #fff; }
.social-icons li.social-instagram a{
background-color: transparent;
background: url('../images/social/instagram-bg.jpg') no-repeat;
background-size: cover;
background-position: center;
}
.social-icons li.social-tiktok a{
background-color: transparent;
background: #000 url('../images/social/tiktok-bg.webp') no-repeat;
background-size: 15px;
background-position: center;
}
.social-icons li.social-tiktok a img{ opacity:0; }
.image-icon-social{
height: 24px;
top: -1px;
position: relative;
filter: brightness(0);
}
.social-icons.social-icons-large li a{
    font-size: 23px;
    margin: 0 4px;
}

.social-icons.light .image-icon-social{filter: brightness(0) invert(1);}
#topbar .image-icon-social, footer .social-icons li a:hover .image-icon-social{ filter: brightness(1) invert(1); }
footer .social-icons li.social-line a:hover .image-icon-social { filter: brightness(0) invert(1); }
.social-x a:hover{color:#0766c2; }
footer .social-icons li.social-instagram a:hover{ color:#fff; }
.social-icons li:hover img { -webkit-animation: toTopFromBottom 0.3s forwards; animation: toTopFromBottom 0.3s forwards;
}


.head_title{
margin-top: 30px;
color: #fcc013;
font-weight: 300;
}

/* Headbanner */
.inspiro-slider .container{
    position: absolute !important;
    bottom: 40px;
    left: 0;
    right: 0;
}
.inspiro-slider .flickity-button{ border-radius: 50%; }
.inspiro-slider .slide .slide-captions h1{ font-size: 5em; }
.inspiro-slider .slide .slide-captions h4{ font-weight: 500; font-size: 14px;}
.inspiro-slider .flickity-page-dots .dot:after{
background-color: #c8c3c3;
box-shadow: 0 0 1px #fff;
}
.inspiro-slider .flickity-page-dots .dot{
box-shadow: 0 0 0 2px #cbcbcb inset;
}
.inspiro-slider .container button.btn{
    font-size: 3em !important;
    background: #000 !important;
    color: #fff !important;
    padding: 10px 30px !important;
    font-style: italic !important;
    border-radius: 100px !important;
    box-shadow: 1.98699951171875px 11.010416984558105px 10px rgba(0, 0, 0, 0.53);
    transition: all .3s ease-in-out;
}
.inspiro-slider .container button.btn:hover{
    background: var(--gradient) !important;
    color: #fff !important;
}


/* sect-bestseller */
.sect-bestseller{ 
    background: #ffc600;
    padding-bottom: 0;
}
.slide-bestseller .item{padding: 20px;}
.slide-bestseller .item img{ transition: all .3s ease-in-out; }
.slide-bestseller .item:hover img{transform: scale(1.1) translateY(-10px);}
.slide-bestseller .item .btn{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: -webkit-max-content;
    opacity: 0;
    transition: all .3s ease-in-out;
}
.slide-bestseller .item:hover .btn{
    bottom: 20px;
    opacity: 1;
}
.slide-bestseller .item .btn:hover{ background: var(--gradient); color: #fff; }
.slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(1){background: #eb008b; }
.slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(2){background: #a3cd39; }
.slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(3){background: #f6931e; }
.slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(4){background: #fed000; }
.slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(5){background: #ff1102; }
.slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(6){background: #bc25a8; }
.slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(7){background: #c9db37; }
.slide-bestseller .flickity-slider > .polo-carousel-item:nth-child(8){background: #476dcf; }


/* sect-newproducts – CarouselProductsBig ref: lays.com Featured Products */
.sect-newproducts .headbar{
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 80px;
    max-width: 1140px;
    margin: auto;
}
.sect-newproducts{
    background: #fff;
    padding: 0;
    overflow: hidden;
}
.sect-newproducts .headbar .htitle{
    color: #ffffff !important;
    text-shadow: 2px 3px 1px rgba(0, 0, 0, 0.38);
}
.sect-newproducts .headbar .btn-right{
    border-color: #ffffff;
    color: #ffffff !important;
}
.sect-newproducts .headbar .btn-right:hover{
    border-color: #e31c2b;
    background: #e31c2b;
    box-shadow: -5.9869384765625px 10.84375px 19px rgba(227, 28, 43, 0.45);
}

.slide-newproducts .polo-carousel-item{
    display: flex;
    align-items: stretch;
}
.slide-newproducts .item{
    padding: 120px 0 80px 0;
    width: 100%;
    background: url(../images/bg-product/1.jpg) no-repeat center center;
    background-size: cover;
    transition: background-size .4s ease-in-out !important;
}
/* .slide-newproducts .item:hover{transform: scale(1.1);} */
.slide-newproducts .product-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 24px;
    padding: 40px 30px 36px;
    min-height: 420px;
    transition: transform .35s ease, box-shadow .35s ease;
}
.slide-newproducts .product-image{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}
.slide-newproducts .product-image img{
    max-height: 550px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform .35s ease;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.18));
}
.slide-newproducts .product-name{
    font-family: "Sour Gummy", "Noto Sans Thai", sans-serif;
    font-size: 1.35em;
    font-weight: 700;
    color: #fff;
    margin: 0 0 18px;
    line-height: 1.2;
    text-transform: uppercase;
}
.slide-newproducts .btn-discover{
    display: inline-block;
    line-height: 44px;
    padding: 0 32px;
    border-radius: 50px;
    background: #fff;
    color: #1a1a1a !important;
    font-weight: 600;
    font-size: 14px;
    transition: all .3s ease;
    border: 2px solid transparent;
}
.slide-newproducts .btn-discover:hover{
    background: #1a1a1a;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* center-slide emphasis (Lay's peek + focus) */
.slide-newproducts .polo-carousel-item{
    opacity: .55;
    transform: scale(1);
    transition: opacity .35s ease;
}
.slide-newproducts .polo-carousel-item.is-selected{
    opacity: 1;
}
.slide-newproducts .polo-carousel-item.is-selected .product-image img{
    transform: scale(1.05);
}
.slide-newproducts .polo-carousel-item:hover .product-image img{
    transform: rotate(-10deg) scale(1.15);
}

/* per-slide brand colors */
/* .slide-newproducts .polo-carousel-item:nth-child(1) .product-card{ background: #eb008b; }
.slide-newproducts .polo-carousel-item:nth-child(2) .product-card{ background: #a3cd39; }
.slide-newproducts .polo-carousel-item:nth-child(3) .product-card{ background: #f6931e; }
.slide-newproducts .polo-carousel-item:nth-child(4) .product-card{ background: #fed000; }
.slide-newproducts .polo-carousel-item:nth-child(5) .product-card{ background: #ff1102; }
.slide-newproducts .polo-carousel-item:nth-child(6) .product-card{ background: #bc25a8; }
.slide-newproducts .polo-carousel-item:nth-child(7) .product-card{ background: #476dcf; }
.slide-newproducts .polo-carousel-item:nth-child(8) .product-card{ background: #c9db37; } */

/* carousel nav arrows */
.slide-newproducts .flickity-button{
    width: 52px;
    height: 52px;
    background: #fff !important;
    border-radius: 50%;
    opacity: 1;
    top: 42%;
}
.slide-newproducts .flickity-button:hover{
    background: var(--yellow) !important;
}
.slide-newproducts .flickity-button.previous,
.slide-newproducts:hover .flickity-button.previous{ 
    left: 20%; 
}
.slide-newproducts .flickity-button.next,
.slide-newproducts:hover .flickity-button.next{ 
    right: 20%; 
}
.slide-newproducts .flickity-button:disabled{ opacity: .35; }

@media (max-width: 991px){
    .slide-newproducts .product-card{ min-height: 360px; padding: 30px 20px 28px; }
    .slide-newproducts .product-image img{ max-height: 200px; }
    .slide-newproducts .flickity-button.previous{ left: 8px; }
    .slide-newproducts .flickity-button.next{ right: 8px; }
}

/* sect-clip – ref: Lay's Recipes masonry blog grid */
.sect-clip{
    background: #f3ede0;
    padding: 70px 0 90px;
}
.clip-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 240px 240px 240px;
    gap: 18px;
}
.clip-head{
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    padding-top: 10px;
}
.clip-title{
    font-family: "Sour Gummy", "Noto Sans Thai", sans-serif;
    font-size: 4.8em;
    font-weight: 700;
    line-height: 1;
    color: #1a1a1a;
    margin: 0 0 22px;
}
.btn-clip-view{
    display: inline-block;
    line-height: 48px;
    padding: 0 28px;
    border-radius: 50px;
    background: #e31c2b;
    color: #fff !important;
    font-weight: 700;
    font-size: 15px;
    transition: all .3s ease;
    box-shadow: 0 8px 18px rgba(227, 28, 43, 0.25);
}
.btn-clip-view:hover{
    background: #c41624;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(227, 28, 43, 0.35);
}

.clip-card{
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
    min-height: 100%;
    transition: transform .35s ease, box-shadow .35s ease;
}
.clip-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}
.clip-card-media{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #000;
}
.clip-card-media .tiktok-embed{
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    inset: 0;
}
.sect-clip .clip-card-media .tiktok-embed iframe{
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: auto !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    border: 0 !important;
}
.clip-card-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.78) 100%);
    z-index: 1;
    pointer-events: none;
}
.clip-card-content{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 20px;
    pointer-events: none;
}
.clip-card-title{
    font-family: "Poppins", "Noto Sans Thai", sans-serif;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    margin: 0;
    max-width: calc(100% - 56px);
}
.clip-card-arrow{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffc600;
    color: #1a1a1a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all .3s ease;
    pointer-events: auto;
}
.clip-card:hover .clip-card-arrow{
    background: #fff;
    transform: translateX(4px);
}

/* masonry placement */
.clip-card:nth-of-type(2){
    grid-column: 2;
    grid-row: 1 / 3;
}
.clip-card:nth-of-type(3){
    grid-column: 3;
    grid-row: 1 / 3;
}
.clip-card:nth-of-type(4){
    grid-column: 1;
    grid-row: 2 / 4;
}
.clip-card:nth-of-type(5){
    grid-column: 2;
    grid-row: 3;
}
.clip-card:nth-of-type(6){
    grid-column: 3;
    grid-row: 3;
}

@media (max-width: 991px){
    .clip-grid{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .clip-head{
        grid-column: 1 / -1;
        grid-row: auto;
        margin-bottom: 10px;
    }
    .clip-title{ font-size: 3.6em; }
    .clip-card{
        min-height: 240px;
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .clip-card:nth-of-type(2),
    .clip-card:nth-of-type(6){
        min-height: 320px;
    }
}
@media (max-width: 575px){
    .sect-clip{ padding: 50px 0 60px; }
    .clip-grid{
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .clip-title{ font-size: 3em; }
    .clip-card{ min-height: 220px !important; }
}

/* tiktok */
.tiktok-video{
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 9px solid #ffffff;
    background: #fff;
    max-height: 530px;
    overflow: scroll;
}
.tiktok-video blockquote{
    margin: 0;
}
.sect-tiktok .headbar{
    display: flex;
    justify-content: center;
}
.sect-tiktok .headbar h2{ color: #fff !important;}
.sect-tiktok .headbar img{
    height: 70px;
    margin-right: 15px;
}


/* about */
.sect-about{
    position: relative;
    padding: 0;
}
.sect-about::before{
    position: absolute;
    content: "";
    width: 94%;
    height: 85%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #fff;
    background: #5AC1F0;
    background: linear-gradient(320deg, rgba(90, 193, 240, 1), rgb(33, 181, 241) 38.24%, rgba(121, 29, 191, 1));
    border-radius: 50px;
}
.sect-about .cleft{ padding: 80px 120px;} 
.sect-about .cright{ padding: 80px;}
.sect-about .cright{
    text-align: center;
    background: var(--yellow);
    border-radius: 80px;
    position: relative;
    right: 40px;
    background: url(../images/bg-contact.jpg) no-repeat center;
    background-size: cover;
}
.sect-about .about-inner-box h2{
    font-size: 3em;
}
.sect-about .about-inner-box strong{
    background: rgba(16, 19, 124, 0.51);
    border-radius: 50px;
    padding: 0 7px;
    backdrop-filter: blur(20px);
}
.sect-about .cright .list-contact,
.sect-about .cright .list-contact a{
    font-weight: 500;
    color: #000;
}
.sect-about .cright .list-contact a:hover{ text-decoration: underline;}

/* news */
.sect-news{
    position: relative;
    overflow: hidden;
    padding: 80px 0;
}
.sect-tiktok .row,
.sect-news .row{
    background: rgba(255, 255, 255, 0.15);
border-radius: 53px;
padding: 40px;
/* background: #ffffff; */
/* background: linear-gradient(to top, rgba(255, 255, 255, 0.63), rgba(255, 255, 255, 0.27)); */
background: rgba(28, 27, 27, 0.85);
box-shadow: -0.0103759765625px 36.84375px 39px rgba(230, 28, 101, 0.34);
}
.sect-news .headbar .htitle{
    /* color: #3423a6 !important; */
    /* text-shadow: 2px 3px 1px rgba(110, 13, 232, 0.51); */
}
.news-carousel{ padding: 10px 0 30px; }
.news-item{
    height: 100%;
}
.news-item .news-card{
    display: block;
    height: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 24px;
    overflow: hidden;
    transition: all .3s ease;
    color: #fff;
}
.news-item .news-card:hover{
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.28);
    background: rgba(255, 255, 255, 0.12);
}
.news-item .boxImageHg{
    height: 220px;
    border-radius: 0;
}
.news-item .boxImageHg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    transform: none;
    transition: transform .35s ease;
}
.news-item .news-card:hover .boxImageHg img{
    transform: scale(1.06);
}
.news-card-body{
    padding: 22px 24px 28px;
    background: rgba(255, 255, 255, 0.94);
}
.news-tag{
    display: inline-block;
    line-height: 28px;
    padding: 0 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 12px;
    background: var(--gradient);
    color: #fff;
}
.news-item .htitle{
    font-size: 1.15em;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.45;
}
.news-item .desc{
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.6;
}
.news-readmore{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all .3s ease;
    color: #000;
}
.news-item .news-card:hover .news-readmore{
    gap: 12px;
}
.news-carousel .flickity-button{
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.news-carousel .flickity-button:hover{
    background: var(--gradient) !important;
    border-color: transparent;
}
.post-date-box{
width: 60px;
border-radius: 5px;
position: absolute;
top: 10px;
right: 10px;
padding: 5px;
line-height: 1;
font-size: 10px;
text-align: center;
color: #656565;
background: rgba(255, 255, 255, 0.95);
}
.post-date-box strong{
display: block;
font-size: 30px;
}
.news-item .htitle{ line-height: 1.6; }
.news-item .desc{ margin: 15px 0; }

.boxImageHg{
position: relative;
height: 232px;
overflow: hidden;
background-color: #000;
}
.boxImageHg img{
position: relative;
top: 50%;
transform: translate(0, -50%);
}

.slick-wrapper{ padding: 0; }
.project-item{
padding: 0 10px;
}
.project-item .inner{
position: relative;
overflow: hidden;
z-index: 2;
}
.box-inner{
padding: 20px;
position: absolute;
background: rgba(0, 0, 0, 0.36);
z-index: 2;
width: 100%;
bottom: -100px;
opacity: 0;
transition: all .2s ease-in-out;
}
.project-item:hover .box-inner{
opacity: 1;
bottom: 0;
/*background: #fff;*/
background: linear-gradient(0deg, rgba(229,120,31,1) 0%, rgba(254,187,54,1) 100%);
}

.sect-certificate{ padding-bottom: 160px; }
.slide-certificate .flickity-page-dots{ bottom: -40px; }
.sect-certificate .cRight{ padding-left: 80px; margin-top: 60px;}
.certificate-logo{ }

.title-dec{ position: relative; }
.title-dec:after{
position: absolute;
content: "";
width: 25px;
height: 25px;
right: -19px;
top: -5px;
background: url(../images/bg/sign.png);
background-position: center;
background-size: 100%;
}

footer .footer-top{
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.23);
    margin-bottom: 30px;
}
footer .footer-top .imagebox{
    border: 1px solid #ffffff;
    display: inline-block;
    border-radius: 50px;
    padding: 10px 20px;
    background: #ffffff;
    position: relative;
    top: 25px;
    box-shadow: 0 0 10px #ffffff;
}
footer .footer-top .imagebox img{ height:30px; }

footer{ 
    padding: 0px 0 20px 0;
    /* background: linear-gradient(rgba(21, 66, 89, 0) 42.86%, rgba(0, 125, 213, 0.45)); */
    background: #fff;
    position: relative;
}
footer::before{
    content: '';
    height: 7px;
    width: 100%;
    background: url("../images/triangle.png");
    background-size: 15px 7px;
    background-repeat: repeat-x;
    background-position: center top;
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
    transform: translateY(-7px);
    outline: none;
    border-bottom: 1px solid #fff;
}
footer, footer p, footer h4,
footer a, footer .list li a, .widget a{
    color: #ddd;
    color: #000f60;
    font-weight: 600;
    font-size: 15px;
}
footer .ft-bttm-social{ float: right;}
footer .footer-content{ padding-top: 20px;}
footer .footer-content .container-fluid{ max-width: 93%;}
footer .list-link{
    display: flex;
    gap: 20px;
    margin-bottom: 0;
}
footer .ft-copyright{
    display: flex;
}
footer .list-policy{
    list-style: none;
    margin-left: 15px;
    display: flex;
    gap: 15px;
}
footer .list-policy a{ font-size: 13px;}
footer .footer-bottom ul.list-menu li{ margin-left: 10px; }
footer .ft-bttm-link{ float: right; }
footer .ft-bttm-copyright{ float: left; margin-right: 20px;}
footer .ft-social{
    position: relative;
    top: 15px;
    z-index: 1;
}
footer .copyRight{ line-height: 32px; }
footer .ft-connect .widget{
display: inline-block;
float: right;
background: linear-gradient(0deg, rgba(229,120,31,1) 0%, rgba(254,187,54,1) 100%);
padding: 95px 20px 0px 20px;
top: -95px;
margin-bottom: -95px;
}
footer .ft-connect .widget,
footer .ft-connect .widget h4,
footer .ft-connect .widget .widget-title,
footer .ft-connect .widget a{
color: #333;
}
footer .ft-connect .widget a:hover{ color: #fff; }
footer .ft-connect .line-icon{ filter: brightness(0); }
footer .copyright-text{ text-align: right;}

ul.list-contact i{ width: 18px; display:inline-block; }
ul.list-contact li strong{
display: inline-block;
}
footer .line-icon{
width: 22px;
float: right;
}
footer .hr{
display: inline-block;
width: 100%;
height: 1px;
background: #5c5c5c;
margin-bottom: 5px;
}
footer .social-icons li a{ color: #ddd;}


.fix-dec-plus{ position: relative; }
.fix-dec-plus:before{
position: absolute;
content: "";
right: 6%;
top: -120px;
width: 100px;
height: 100px;
background: url(../images/bg/sign.png) no-repeat;
background-position: center;
background-size: 100%;

}
.fix-dec-plus.left:before{
right: initial;
left: -200px;
top: 200px;
opacity: 1;
}

.ball {
--delay:0s;
--size:0.4;
--speed: 20s;

aspect-ratio:1;
width:calc( 150% * var(--size) );

/* background: linear-gradient(259.53deg, #0A3FFF 6.53%, #F55F0A 95.34%);*/
background: linear-gradient(259.53deg, #0f105a 6.53%, #c30980 95.34%);
filter:blur( 10vw );

border-radius:50%;

position:absolute;
top:100%;
left:0;
bottom: 0;
margin: auto;

animation: loop var(--speed) infinite linear;
animation-delay: var(--delay);
transform-origin: 50% 50%;
opacity:0.6;
pointer-events: none;
}

@keyframes loop {
0% { transform: translate3D( 0%, 51%, 0 ) rotate(0deg); }
5% { transform: translate3D( 8%, 31%, 0 ) rotate(18deg); }
10% { transform: translate3D( 22%, 13%, 0 ) rotate(36deg); }
15% { transform: translate3D( 40%, 2%, 0 ) rotate(54deg); }
20% { transform: translate3D( 46%, 21%, 0 ) rotate(72deg); }
25% { transform: translate3D( 50%, 47%, 0 ) rotate(90deg); }
30% { transform: translate3D( 53%, 80%, 0 ) rotate(108deg); }
35% { transform: translate3D( 59%, 98%, 0 ) rotate(125deg); }
40% { transform: translate3D( 84%, 89%, 0 ) rotate(144deg); }
45% { transform: translate3D( 92%, 68%, 0 ) rotate(162deg); }
50% { transform: translate3D( 99%, 47%, 0 ) rotate(180deg); }
55% { transform: translate3D( 97%, 21%, 0 ) rotate(198deg); }
60% { transform: translate3D( 80%, 7%, 0 ) rotate(216deg); }
65% { transform: translate3D( 68%, 25%, 0 ) rotate(234deg); }
70% { transform: translate3D( 59%, 41%, 0 ) rotate(251deg); }
75% { transform: translate3D( 50%, 63%, 0 ) rotate(270deg); }
80% { transform: translate3D( 38%, 78%, 0 ) rotate(288deg); }
85% { transform: translate3D( 21%, 92%, 0 ) rotate(306deg); }
90% { transform: translate3D( 3%, 79%, 0 ) rotate(324deg); }
100% { transform: translate3D( 0%, 51%, 0 ) rotate(360deg); }

}

/*.glow-container {
overflow-x:hidden;
overflow-y: hidden;
position:fixed;

width:100%;
min-height:100vh;
}*/


#page-title[data-bg-parallax], [data-bg-parallax]{
    background: transparent;
}

/* bg parallax wrapper */
.sect-parallax-wrap{
    position: relative;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
}
.sect-parallax-wrap > section{
    position: relative;
    z-index: 2;
}
.sect-parallax-wrap .parallax-container{
    opacity: 1 !important;
    height: 140%;
    top: -20%;
    z-index: 0;
    will-change: transform;
    background-size: 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat;
    transition: none !important;
    pointer-events: none;
}
.sect-parallax-wrap .parallax-container.parallax-smooth{
    backface-visibility: hidden;
}