/* Inter is self-hosted via public/app/fonts/google-fonts.css (loaded in nuxt.config).
   Trirong was unused. Removing these @imports eliminates the external
   fonts.googleapis.com request (ZAP "SRI missing" + render-blocking). */

/* Reset */
:root {
  --bradius:.625rem;
  --bradius-02:1.4375rem;
}

.font-inter{font-family: 'Inter', 'Noto Sans Thai', sans-serif;}
.font-trirong{font-family: 'Trirong', 'Inter', 'Noto Sans Thai', sans-serif;}
.font-default{font-family: 'Noto Sans Thai', sans-serif;}

html, body{
  padding:0; margin:0; overflow-x:hidden;
  font-size:16px; font-weight:300; line-height:1.6;
  font-family:'Noto Sans Thai', sans-serif;
}
/* body.loading{height:100dvh!important; overflow:hidden!important;} */


*{box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; outline:none;}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); border:0;
}

a{color:inherit; transition:opacity .25s, color .25s;}
a, a:hover{text-decoration:none;}
a.link, .a.link{text-decoration:underline;}
.hover-underline-color-p a:hover {text-decoration:underline;}

img.img{display:block; width:100%; height:auto;}

.filter-white {filter: brightness(0) invert(1);}


/* Section & Container */
.section-padding{padding:2rem 0;}
.container{position:relative; width:100%; max-width:calc(1300px - 2rem); padding:0; margin:0 auto;}
@media screen and (min-width:1600px){
  .container{max-width:calc(1600px - 2rem);}
}
@media screen and (max-width:1299.98px){
  .container{max-width:calc(1200px - 2rem);}
}
@media screen and (max-width:1199.98px){
  .container{max-width:calc(992px - 2rem);}
}
@media screen and (max-width:991.98px){
  .section-padding{padding:3.5rem 0;}
  .container{max-width:calc(768px - 2rem);}
}
@media screen and (max-width:767.98px){
  .section-padding{padding:3rem 0;}
  .container{max-width:calc(578px - 2rem);}
}
@media screen and (max-width:575.98px){
  .section-padding{padding:2.5rem 0;}
  .container{max-width:calc(100% - 2rem);}
}

/* Typography */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .p, li, label{
    margin:0; font-weight:300; line-height:1.6;
}
h1, .h1{font-size:4rem; line-height:1.15;}
h1.lg, .h1.lg{font-size:8.75rem;}
h2, .h2{font-size:2.375rem; line-height:1.25;}
h2.lg, .h2.lg{font-size:3.688rem; line-height:1.25;}
h3, .h3{font-size:3rem; line-height:1.45;}
h3.sm, .h3.sm{font-size:2.5rem;}
h4, .h4{font-size:2.125rem;}
h4.sm, .h4.sm{font-size:2rem;}
h5, .h5{font-size:1.5rem;}
h5.lg, .h5.lg{font-size:1.75rem;}
h5.sm, .h5.sm{font-size:1.25rem;}
h6, .h6{font-size:1.25rem;}
p, .p, li, label{font-size:1rem;}
p.lg, .p.lg, li.lg, label.lg{font-size:1.125rem;}
p.md, .p.md, li.md, label.md{font-size:.9375rem;}
p.sm, .p.sm, li.sm, label.sm{font-size:.875rem;}
p.xs, .p.xs, li.xs, label.xs{font-size:.75rem;}
p.xxs, .p.xxs, li.xxs, label.xxs{font-size:.6875rem;}
@media screen and (max-width:1199.98px){
  h1, .h1{font-size:3.75rem; line-height:1.15;}
  h2, .h2{font-size:2.1875rem; line-height:1.25;}
  h2.lg, .h2.lg{font-size:2.1875rem; line-height:1.25;}
  h3, .h3{font-size:1.75rem; line-height:1.45;}
  h4, .h4{font-size:1.625rem;}
  h4.sm, .h4.sm{font-size:1.5rem;}
  h5.lg, .h5.lg{font-size:1.25rem;}
}
@media screen and (max-width:991.98px){
  h1, .h1{font-size:3.375rem; line-height:1.2;}
  h2, .h2{font-size:2rem; line-height:1.3;}
  h2.lg, .h2.lg{font-size:2rem; line-height:1.3;}
  h3, .h3{font-size:1.75rem; line-height:1.5;}
  h4, .h4{font-size:1.625rem;}
  h5, .h5{font-size:1.3125rem;}
}
@media screen and (max-width:767.98px){
  h1, .h1{font-size:3rem; line-height:1.25;}
  h2, .h2{font-size:1.875rem; line-height:1.4;}
  h2.lg, .h2.lg{font-size:1.875rem; line-height:1.4;}
  h3, .h3{font-size:1.5625rem; line-height:1.55;}
  h4, .h4{font-size:1.4375rem;}
  h4.sm, .h4.sm{font-size:1.375rem;}
  h6, .h6{font-size:1.0625rem;}
  h5, .h5{font-size:1.25rem;}
  h5.sm, .h5.sm{font-size:1.125rem;}
}
@media screen and (max-width:575.98px){
  h1, .h1{font-size:2.5rem; line-height:1.3;}
  h2, .h2{font-size:1.625rem; line-height:1.5;}
  h2.lg, .h2.lg{font-size:1.625rem; line-height:1.5;}
  h3, .h3{font-size:1.375rem; line-height:1.6;}
  h4, .h4{font-size:1.25rem;}
  h4.sm, .h4.sm{font-size:1.125rem;}
  h5, .h5{font-size:1.125rem;}
  h6, .h6{font-size:1rem;}
  p, .p, li, label{font-size:.9375rem;}
  p.lg, .p.lg, li.lg, label.lg{font-size:.875rem;}
}

#search::-webkit-search-cancel-button{
  position:relative; border:none; border-radius:.375rem; appearance:none; 
  cursor:pointer; height:100%; border:1px solid transparent; width:100%;
}


/* Utility */
.text-5xl{font-size:380%!important; line-height:.25;}
.text-4xl{font-size:300%!important; line-height:.25;}
.text-3xl{font-size:240%!important; line-height:.25;}
.text-2xl{font-size:150%!important; line-height:.25;}
.text-xl{font-size:128%!important;}
.text-lg{font-size:114%!important;}
.text-md{font-size:110%!important;}
.text-nm{font-size:100%!important;}
.text-sm{font-size:90%!important;}
.text-xs{font-size:80%!important;}
.text-2xs{font-size:70%!important;}
.text-3xs{font-size:60%!important;}

.text-center{text-align:center!important;}
.text-left{text-align:left!important;}
.text-right{text-align:right!important;}

.fw-100{font-weight:100!important;}
.fw-200{font-weight:200!important;}
.fw-300{font-weight:300!important;}
.fw-400{font-weight:400!important;}
.fw-500{font-weight:500!important;}
.fw-600{font-weight:600!important;}
.fw-700{font-weight:700!important;}
.fw-800{font-weight:800!important;}
.fw-900{font-weight:900!important;}

.lh-xl{line-height:2.00;}
.lh-lg{line-height:1.90;}
.lh-nm{line-height:1.60;}
.lh-sm{line-height:1.40;}
.lh-xs{line-height:1.20;}
.lh-2xs{line-height:1.00;}
.lh-3xs{line-height:.80;}

.font-normal{font-style:normal!important;}
.font-italic{font-style:italic!important;}

.c-pointer, .cursor-pointer{cursor:pointer!important;}

.pos-static{position:static!important;}
.pos-relative{position:relative!important;}
.pos-absolute{position:absolute!important;}
.pos-fixed{position:fixed!important;}
.pos-sticky{position:sticky!important;}

.op-100{opacity:1!important;} .op-0{opacity:0!important;}
.op-10{opacity:.1!important;} .op-20{opacity:.2!important;} .op-30{opacity:.3!important;}
.op-40{opacity:.4!important;} .op-50{opacity:.5!important;} .op-60{opacity:.6!important;}
.op-70{opacity:.7!important;} .op-80{opacity:.8!important;} .op-90{opacity:.9!important;}

.z-index-1{z-index:1!important;} .z-index-2{z-index:2!important;}
.z-index-3{z-index:3!important;} .z-index-4{z-index:4!important;} .z-index-5{z-index:5!important;}

.text-indent {text-indent:1.5rem;}
.text-indent-1{text-indent:3.5rem} .text-indent-2{text-indent:5.5rem}

.pe-none{pointer-events:none!important;}

.d-block{display:block!important;}
.d-flex{display:flex!important;}
.d-inline{display:inline!important;}
.d-inline-block{display:inline-block!important;}
.d-inline-flex{display:inline-flex!important;}
.d-none{display:none!important;}

.jc-start{justify-content:flex-start!important;}
.jc-center{justify-content:center!important;}
.jc-end{justify-content:flex-end!important;}
.jc-space-between{justify-content:space-between!important;}
.jc-space-evenly{justify-content:space-evenly!important;}
.ai-center{align-items:center!important;}
.ai-start{align-items:flex-start!important;}
.ai-end{align-items:flex-end!important;}
.ai-unset{align-items:unset!important;}
.fw-wrap{flex-wrap:wrap!important;}
.fw-no-wrap{flex-wrap:nowrap!important;}
.fw-unset{flex-wrap:unset!important;}
.flex-column{flex-direction:column!important;}
@media screen and (max-width:991.98px){
  .md-jc-center{justify-content:center!important;}
  .md-d-none{display: none !important;}
}
@media screen and (max-width:879.98px){
  .ss-sm-jc-center{justify-content:center!important;}
}
@media screen and (max-width:767.98px){
  .sm-jc-start{justify-content:start!important;}
  .sm-jc-center{justify-content:center!important;}
  .sm-jc-end{justify-content:end!important;}
  .sm-column-reverse{flex-direction:column-reverse;}
  .sm-d-none{display: none !important;}
  .sm-text-left{text-align:left!important;}
  .sm-text-right{text-align:right!important;}
  .sm-text-center{text-align:center!important;}
}
@media screen and (max-width:575.98px){
  .xs-jc-center{justify-content:center!important;}
  .xs-d-none{display: none !important;}
  .xs-text-left{text-align:left!important;}
  .xs-text-right{text-align:right!important;}
  .xs-text-center{text-align:center!important;}
}

.min-auto{min-width:auto!important;}
.max-auto{max-width:auto!important;}
.min-100{min-width:100%!important;}
.max-100{max-width:100%!important;}
.width-auto, .w-auto{width:auto!important;}
.width-full, .w-full{width:100%!important; max-width:100%!important;}
.height-auto, .h-auto{height:auto!important;}
.height-full, .h-full{height:100%!important; max-height:100%!important;}
@media screen and (max-width:767.98px){
  .width-full-sm, .w-full-sm{width:100%!important; max-width:100%!important;}
}

.ws-nowrap{white-space:nowrap!important;}
.ws-normal{white-space:normal!important;}
.no-br > br{display:none;}

.no-border{border:0!important;}
.no-border-bottom{border-bottom:0!important;}
.no-border-right{border-right:0!important;}
.border{border:1px solid transparent!important;}
.border-2{border:2px solid transparent!important;}
.border-3{border:3px solid transparent!important;}
.border-4{border:4px solid transparent!important;}
.border-6{border:8px solid transparent!important;}
.border-top-0{border-top:0!important;}
.border-top{border-top:1px solid transparent!important;}
.border-top-2{border-top:2px solid transparent!important;}
.border-top-3{border-top:3px solid transparent!important;}
.border-top-4{border-top:4px solid transparent!important;}
.border-bottom-0{border-bottom:0!important;}
.border-bottom{border-bottom:1px solid transparent!important;}
.border-bottom-2{border-bottom:2px solid transparent!important;}
.border-bottom-3{border-bottom:3px solid transparent!important;}
.border-bottom-4{border-bottom:4px solid transparent!important;}
.border-left-0{border-left:0!important;}
.border-left{border-left:1px solid transparent!important;}
.border-left-2{border-left:2px solid transparent!important;}
.border-left-3{border-left:3px solid transparent!important;}
.border-left-4{border-left:4px solid transparent!important;}
.border-right-0{border-right:0!important;}
.border-right{border-right:1px solid transparent!important;}
.border-right-2{border-right:2px solid transparent!important;}
.border-right-3{border-right:3px solid transparent!important;}
.border-right-4{border-right:4px solid transparent!important;}

.bradius{border-radius:var(--bradius)!important;}
.bradius-02{border-radius:var(--bradius-02);}
.bradius-03{border-radius:.313rem!important;}

.no-bradius{border-radius:0!important;}
.no-padding{padding:0!important;}
.box-shadow{box-shadow:0px 5px 20px 10px rgba(0,0,0,.1);}

.ovf-hidden{overflow:hidden!important;}
.ovf-visible{overflow:visible!important;}

.wb-break-all{word-break:break-all!important;}
.wb-break-word{word-break:break-word!important;}
.wb-normal{word-break:normal!important;}
.wb-keep-all{word-break:keep-all!important;}

img.sm {max-width: 1rem;}

@media screen and (min-width:1299.98px){
  .xxl-no-br > br{display:none;}
}
@media screen and (max-width:1299.98px){
  .xl-no-br > br{display:none;}
}
@media screen and (max-width:1199.98px){
  .lg-no-br > br{display:none;}
}
@media screen and (max-width:991.98px){
  .md-no-br > br{display:none;}
}
@media screen and (max-width:767.98px){
  .sm-no-br > br{display:none;}
}
@media screen and (max-width:575.98px){
  .xs-no-br > br{display:none;}
  .xs-hide{display:none;}
}

/* Scrollbar */
::-webkit-scrollbar{width:7px; border-radius:.25rem;}
::-webkit-scrollbar-track{background:#dddddd;}
::-webkit-scrollbar-thumb{background:#999999; border-radius:.25rem;}
::-webkit-scrollbar-thumb:hover{background:#999999;}
::-webkit-scrollbar:horizontal{height:7px;}


/* Scroll Wrapper */
.scroll-wrapper{width:100%; overflow:hidden;}
.scroll-x-wrapper{width:100%; overflow-x:auto; overflow-y:hidden; padding:0 0 .875rem 0;}
.scroll-y-wrapper{width:100%; overflow-x:hidden; overflow-y:auto; padding:0 .875rem 0 0;}


/* Spacing */
.p-0{padding:0!important;}
.p-1{padding:.25rem!important;} .p-2{padding:.5rem!important;}
.p-3{padding:.75rem!important;} .p-4{padding:1rem!important;}
.p-5{padding:1.25rem!important;} .p-6{padding:1.5rem!important;}
.pt-0{padding-top:0!important;} 
.pt-1{padding-top:.25rem!important;} .pt-2{padding-top:.5rem!important;} 
.pt-3{padding-top:.75rem!important;} .pt-4{padding-top:1rem!important;}
.pt-5{padding-top:1.25rem!important;} .pt-6{padding-top:1.5rem!important;}
.pt-7{margin-top:1.75rem!important;} .pt-8{margin-top:2rem!important;}
.pr-0{padding-right:0!important;} 
.pr-1{padding-right:.25rem!important;} .pr-2{padding-right:.5rem!important;} 
.pr-3{padding-right:.75rem!important;} .pr-4{padding-right:1rem!important;}
.pr-5{padding-right:1.25rem!important;} .pr-6{padding-right:1.5rem!important;}
.pb-0{padding-bottom:0!important;} 
.pb-1{padding-bottom:.25rem!important;} .pb-2{padding-bottom:.5rem!important;}
.pb-3{padding-bottom:.75rem!important;} .pb-4{padding-bottom:1rem!important;}
.pb-5{padding-bottom:1.25rem!important;} .pb-6{padding-bottom:1.5rem!important;}
.pl-0{padding-left:0!important;} 
.pl-1{padding-left:.25rem!important;} .pl-2{padding-left:.5rem!important;}
.pl-3{padding-left:.75rem!important;} .pl-4{padding-left:1rem!important;}
.pl-5{padding-left:1.25rem!important;} .pl-6{padding-left:1.5rem!important;}
.py-0{padding-top:0!important; padding-bottom:0!important;}
.py-1{padding-top:.25rem!important; padding-bottom:.25rem!important;}
.py-2{padding-top:.5rem!important; padding-bottom:.5rem!important;}
.py-3{padding-top:.75rem!important; padding-bottom:.75rem!important;}
.py-4{padding-top:1rem!important; padding-bottom:1rem!important;}
.py-5{padding-top:1.25rem!important; padding-bottom:1.25rem!important;}
.py-6{padding-top:1.5rem!important; padding-bottom:1.5rem!important;}
.px-0{padding-left:0!important; padding-right:0!important;}
.px-1{padding-left:.25rem!important; padding-right:.25rem!important;}
.px-2{padding-left:.5rem!important; padding-right:.5rem!important;}
.px-3{padding-left:.75rem!important; padding-right:.75rem!important;}
.px-4{padding-left:1rem!important; padding-right:1rem!important;}
.px-5{padding-left:1.25rem!important; padding-right:1.25rem!important;}
.px-6{padding-left:1.5rem!important; padding-right:1.5rem!important;}

.m-0{margin:0!important;} .m-auto{margin-left:auto!important; margin-right:auto!important;}
.m-1{margin:.25rem!important;} .m-2{margin:.5rem!important;}
.m-3{margin:.75rem!important;} .m-4{margin:1rem!important;}
.m-5{margin:1.25rem!important;} .m-6{margin:1.5rem!important;}
.mt-0{margin-top:0!important;} 
.mt-1{margin-top:.25rem!important;} .mt-2{margin-top:.5rem!important;}
.mt-3{margin-top:.75rem!important;} .mt-4{margin-top:1rem!important;}
.mt-5{margin-top:1.25rem!important;} .mt-6{margin-top:1.5rem!important;}
.mr-0{margin-right:0!important;} 
.mr-1{margin-right:.25rem!important;} .mr-2{margin-right:.5rem!important;}
.mr-3{margin-right:.75rem!important;} .mr-4{margin-right:1rem!important;}
.mr-5{margin-right:1.25rem!important;} .mr-6{margin-right:1.5rem!important;}
.mb-0{margin-bottom:0!important;} 
.mb-1{margin-bottom:.25rem!important;} .mb-2{margin-bottom:.5rem!important;}
.mb-3{margin-bottom:.75rem!important;} .mb-4{margin-bottom:1rem!important;}
.mb-5{margin-bottom:1.25rem!important;} .mb-6{margin-bottom:1.5rem!important;}
.ml-0{margin-left:0!important;} 
.ml-1{margin-left:.25rem!important;} .ml-2{margin-left:.5rem!important;}
.ml-3{margin-left:.75rem!important;} .ml-4{margin-left:1rem!important;}
.ml-5{margin-left:1.25rem!important;} .ml-6{margin-left:1.5rem!important;}
.my-0{margin-top:0!important; margin-bottom:0!important;}
.my-1{margin-top:.25rem!important; margin-bottom:.25rem!important;}
.my-2{margin-top:.5rem!important; margin-bottom:.5rem!important;}
.my-3{margin-top:.75rem!important; margin-bottom:.75rem!important;}
.my-4{margin-top:1rem!important; margin-bottom:1rem!important;}
.my-5{margin-top:1.25rem!important; margin-bottom:1.25rem!important;}
.my-6{margin-top:1.5rem!important; margin-bottom:1.5rem!important;}
.mx-0{margin-left:0!important; margin-right:0!important;}
.mx-1{margin-left:.25rem!important; margin-right:.25rem!important;}
.mx-2{margin-left:.5rem!important; margin-right:.5rem!important;}
.mx-3{margin-left:.75rem!important; margin-right:.75rem!important;}
.mx-4{margin-left:1rem!important; margin-right:1rem!important;}
.mx-5{margin-left:1.25rem!important; margin-right:1.25rem!important;}
.mx-6{margin-left:1.5rem!important; margin-right:1.5rem!important;}
.ml-auto{margin-left:auto!important;} .mr-auto{margin-right:auto!important;}
.mx-auto{margin-left:auto!important; margin-right:auto!important;}

.mt-negative{margin-top:-4rem; padding-top:8rem;}

.gap-1 {gap:.25rem!important;} .gap-2 {gap:.5rem!important;}
.gap-3 {gap:.75rem!important;} .gap-4 {gap:1rem!important;}
.gap-5 {gap:1.25rem!important;} .gap-6 {gap:1.5rem!important;}

.top-0 {top: 0 !important;}
.bottom-0 {bottom: 0 !important;}
.left-0 {left: 0 !important;}
.right-0 {right: 0 !important;}

@media screen and (max-width:1299.98px){
  .d-none-lg{display:none;}
}
@media screen and (max-width:991.98px){
  .mt-2-md{margin-top:.5rem!important;}
  .d-none-md{display:none;}
}
@media screen and (max-width:767.98px){
  .mt-negative{margin-top:-4.5rem;}

  .sm-mt-4{margin-top:1rem;} .sm-mt-6{margin-top:1.5rem;}
  .sm-mb-5{margin-bottom:1.25rem;} .sm-mb-6{margin-bottom:1.5rem;}
  
  .sm-pb-5{padding-bottom:1.25rem;} .sm-pb-6{padding-bottom:1.5rem;}
}
@media screen and (max-width:575.98px){
  .mt-negative{margin-top:-5rem;}
}

/* Button */
.btns{
  display:flex; align-items:center; flex-wrap:wrap;
  margin:-.25rem -.125rem 0 -.125rem; width:calc(100% + .25rem);
}
.btns > .btn{margin:.25rem .3125rem 0 .3125rem;}
.btn.btn-action{
  display:block; font-size:1rem; font-weight:400; outline:none; box-shadow:none;
  white-space:nowrap; border:.125rem solid transparent; padding:.757rem 1.25rem .757rem 1.25rem;
  text-decoration:none; border-radius:1000em; min-width:9rem; text-align:center;
  cursor:pointer; transition:all .25s;
}
.btn.btn-action.md {padding:.5rem;}
.btn.btn-action.sm{font-size:.75rem; padding:.375rem .375rem .25rem .375rem;}
.btn.btn-action.xs{font-size:.75rem; min-width:6rem; padding:.375rem .375rem .25rem .375rem;}
.btn.btn-action.upload-file{border-radius: 0 .375rem .375rem 0;}

.btn.btn-icon{display:flex; align-items:center; justify-content:center;}
.btn.btn-icon .icon{margin-right:.5rem; display:flex; align-items:center;}

.btn.btn-circle{
  border-radius:50%; width:2.3rem; height:2.3rem; min-width:unset;
  display:flex; justify-content:center; align-items:center; padding:unset;
}
.btn.btn-circle .icon svg{width:auto; height:1rem; display:block; }
.btn-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-collision{position: relative; border: 1px solid transparent; overflow: hidden; transition: all .8s;}
.btn-collision > * {position: relative; z-index: 1;}
.btn-collision:before,
.btn-collision:after {
  content: ''; position: absolute; top: 50%;
  width: .563rem; height: .563rem; border-radius: 50%;
  transform: translateY(-50%);
}
.btn-collision:before {left: -20px;}
.btn-collision:after {right: -20px;}
.btn-collision:hover:before {animation: criss-cross-left 0.8s both alternate;}
.btn-collision:hover:after {animation: criss-cross-right 0.8s both alternate;}
.btn-collision:hover img {filter: brightness(0) invert(1);}

/* Key Collision Gradient */
@keyframes criss-cross-left {
  0% {
    left: -20px;
    width: .563rem;
    height: .563rem;
  }
  50% {
    left: calc(50% - .281rem);
    width: .563rem;
    height: .563rem;
  }
  100% {
    left: -10%;
    width: 150%;
    height: 150%;
    border-radius: 4rem;
    background: var(--color-p);
  }
}
@keyframes criss-cross-right {
  0% {
    right: -20px;
    width: .563rem;
    height: .563rem;
  }
  50% {
    right: calc(50% - .281rem);
    width: .563rem;
    height: .563rem;
  }
  100% {
    right: 50%;
    opacity: 0;
  }
}

/* Key Collision Yellow */
@keyframes criss-cross-yellow-left {
  0% {
    left: -20px;
    width: .563rem;
    height: .563rem;
  }
  50% {
    left: calc(50% - .281rem);
    width: .563rem;
    height: .563rem;
  }
  100% {
    left: -10%;
    width: 150%;
    height: 150%;
    border-radius: 4rem;
    background: var(--color-t);
  }
}
@keyframes criss-cross-yellow-right {
  0% {
    right: -20px;
    width: .563rem;
    height: .563rem;
  }
  50% {
    right: calc(50% - .281rem);
    width: .563rem;
    height: .563rem;
  }
  100% {
    right: 50%;
    opacity: 0;
  }
}


/* Inputs */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel],
input[type=number], input[type=phone], input[type=submit], input[type=file], select, 
textarea, button{font-family:'Noto Sans Thai', sans-serif;}
input[type=text], input[type=search], input[type=email], input[type=password], input[type=date], input[type=tel],
input[type=number], input[type=phone], input[type=submit], input[type=file], select, textarea{
  box-shadow:none!important; width:100%;
  padding:.757rem 1rem; font-size:1rem; font-weight:300; margin:0; line-height:1.5;
  outline:none!important; transition:border-color .25s, color .25s; border-radius:1.5rem;
  border:1px solid transparent;
}
input::placeholder, textarea::placeholder{font-weight: 300;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance:textfield;
}


/* Form Input */
.form-input{position:relative;}
.form-input select{appearance:none;}
.form-input .dropdown-icon{
  position:absolute; bottom:0; right:0; width:3.125rem; height:3.125rem;
  pointer-events:none; border-radius:.375rem;
  display:flex; justify-content:center; align-items:center;
  border:1px solid transparent;
}
.form-input .dropdown-icon[data-toggle="password"] {pointer-events: all;}
.form-input .dropdown-icon .icon-show {display:none;}
.form-input .dropdown-icon7 .icon-hide {display:block;}
.form-input .dropdown-icon.show .icon-show {display:block;}
.form-input .dropdown-icon.show .icon-hide {display:none;}
.form-groups{display:flex;}
.custom-select select.style-02{padding:.257rem; border-radius:.375rem; min-width:4.125rem;}
.form-input .select-custom {
  cursor: pointer; border: 1px solid #e5e5e5; padding: 10px; border-radius: 2rem; background: #fff; 
  display: flex; justify-content: space-between; align-items: center;
}
.form-input .dropdown-options {
  display: none; position: absolute; width: 100%; 
  background: #fff; border: 1px solid #e5e5e5; 
  z-index: 99; max-height: 200px; overflow-y: auto; top: 100%;
}
.form-input .dropdown-options label {
  display: flex; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f9f9f9;
}
.form-input .dropdown-options label input[type="checkbox"] {
  margin-right: 10px; margin-top: 4px;
}


/* Input Date */
.date-wrapper {position:relative;}
.date-wrapper .dropdown-icon{
  position:absolute; right:0; pointer-events:none; width:3rem; height:100%; border-radius:0 .375rem .375rem 0;
  top:0; bottom:0; display:flex; justify-content:center; align-items:center; border:1px solid transparent;
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  border-radius: 2rem !important; height: 32px;
}


/* Input Form Check */
.form-check{
  position:relative; display:flex; align-items:center;  margin:.25rem 0;
  /* padding-left:1.5rem; */
}
.form-check label{
  font-size:.9375rem; font-weight:300; margin:.1875rem 0 0 0; cursor:pointer; 
}
.form-check > input[type="checkbox"], .form-check > input[type="radio"]{
  font-size:1rem; width:1rem; height:1rem; cursor:pointer;
}
.form-check .checkmark{
  position:relative; top:0; left:0; border-radius:.25rem;
  height:1.375rem; width:1.375rem; cursor:pointer; border: 1px solid transparent;
}
.form-check.style-02{padding-left:1.25rem!important;}
.form-check.style-02 .checkmark{height:1.25rem; width:1.25rem; top:0; border:1px solid transparent; margin-right: .5rem;}
.form-check.style-02 .checkmark::after{left:.35rem; top:.05rem;}
.form-check input{position:absolute; opacity:0; cursor:pointer; height:0; width:0;}
.form-check .checkmark:after{
  left:.36875rem; top:2px; width:5px; height:9px;
  border:solid transparent; border-width: 0 3px 3px 0;
  -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);
}
.form-check:not(.form-check-container-02) .checkmark:after{left:.45rem; top:.2rem;}
.form-check .checkmark:after{content:''; position:absolute; display:none;}
.form-check input:checked ~ .checkmark:after{display:block;}


/* Box Input (Gender Selection) */
.form-check.box-input {
  padding-left: 0;
  margin: 0;
}
.form-check.box-input .form-check-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.form-check.box-input .form-check-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.757rem 1.5rem;
  background-color: #ffffff;
  border: 1px solid var(--color-p);
  border-radius: 50px;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 8.75rem;
  margin: 0;
}
.form-check.box-input .form-check-input:checked ~ .form-check-label {
  background-color: var(--color-p);
  color: #ffffff;
}
.form-check.box-input .form-check-input:checked ~ .form-check-label::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-right: 8px;
  margin-bottom: 2px;
}

/* Radio */
.form-check.radio {}
.form-check.radio .checkmark {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.form-check.radio .checkmark:after {
  width: 0;
  height: 0;
  border-radius: 50%;
  border-width: 5px;
  top: 4.5px;
  left: 4.5px;
}


/* Upload Container */
.upload-container{
  display:flex; justify-content:center; flex-direction:column;
  align-items:center; border:1px solid transparent; padding:2.25rem;
  border-radius:.375rem;
}
.upload-container.style-02{position:relative; padding:0 0 0 1rem; height:3.125rem; align-items:start;}
.upload-container.style-02 .upload-btn{position:absolute; top:-.0875rem; right:-.0875rem; bottom:-.0875rem;border-radius: 0 .375rem .375rem 0;}
.upload-container.style-03{width:15rem; height:15rem; position:relative; max-width:100%; overflow:hidden;}
.upload-container.style-03 input{
  position:absolute; top:0; left:0; right:0; bottom:0; opacity:0;
  cursor: pointer;
}
.upload-container.style-03 #preview{position:absolute; top:0; left:0; right:0; bottom:0; pointer-events:none;}
.upload-container.style-03 #preview img{width:100%; height:100%; opacity: .5;}
.upload-container.style-02.bradius-round{border-radius: 2rem;}
.upload-container.style-02.bradius-round .upload-btn{border-radius: 2rem !important;}


/* Error */
form label.error {font-size: .75rem;}



/* Global Search Container */
.global-search-container{
  display:block; position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:100;
  opacity:0; pointer-events:none; padding:1.5rem; display:flex; justify-content:center; align-items:center;
}
.global-search-container .search-bg{position:absolute; top:0; left:0; right:0; bottom:0;}
.global-search-container .logo-container{display:flex; justify-content:center;}
.global-search-container .logo-container .wrapper{display:flex; align-items:center;}
.global-search-container .logo-container .logo{
  width:4rem; height:4rem; display:flex; justify-content:center; 
  align-items:center;
}
.global-search-container .logo-container .logo img{
  display:block; max-width:100%; width:auto; max-height:100%; height:3.5rem;
}
.global-search-container .logo-container .text{padding:0 .75rem; width:calc(100% - 4rem);}
.global-search-container .pattern{
  position:absolute; top:0; right:0; bottom:0; left:0; z-index:2;
  pointer-events:none;
}
.global-search-container .pattern img{
  display:block; max-width:100%; width:100%; max-height:100%; height:auto;
}
.global-search-container:not(.use-gsap){transition:opacity .45s;}
.global-search-container.active{opacity:1; pointer-events:all;}
.global-search-container > .wrapper{
  position:relative; width:100%; height:100%; padding:1.5rem 1.5rem 6rem 1.5rem;;
  display:flex; align-items:center;
}
.global-search-container .input-wrapper{display:flex; align-items:center;}
.global-search-container .input-inner{position:relative; width:calc(100% - 2rem);}
.global-search-container .btn-close{
  width:2rem; display:flex; justify-content:center; transition:opacity .25s;;
}
.global-search-container .btn-close:hover{opacity:.7;}
.global-search-container .input-inner input{
  background:transparent!important; border:0!important; font-weight:400;
  border-bottom:1px solid transparent!important; border-radius:0;
}
.global-search-container .input-inner button{
  position:absolute; top:0; right:0; bottom:0; width:3rem; background:transparent; transition:.25s;
  display:flex; justify-content:center; align-items:center; border:0; cursor:pointer;
}
.global-search-container .input-inner button:hover{opacity:.7;}
.global-search-container .input-inner button img {width: 1.2rem;}
.global-search-container .hamburger{position:relative; transition:all .3s ease-in-out;}
.global-search-container .hamburger{cursor:pointer;}
.global-search-container .hamburger > *{
  position:relative; width:1.625rem; height:.125rem;
  transform:translateX(.375rem); transition:all .45s;
}
.global-search-container .hamburger > *:nth-child(2){margin:.4375rem 0; width:2rem; transform:none;}
.global-search-container .hamburger.active > *:nth-child(1){
  width:1.25rem; -webkit-transform:rotate(-45deg)translate(-.4rem, .4rem);
  transform:rotate(-45deg)translate(-.4rem, .4rem);
}
.global-search-container .hamburger.active > *:nth-child(2){opacity:0; transform:translateX(2rem);}
.global-search-container .hamburger.active > *:nth-child(3){
  width:1.25rem; -webkit-transform:rotate(45deg)translate(-.4rem,-.4rem);
  transform:rotate(45deg)translate(-.4rem, -.4rem);
}
.global-search-container .contents{
  position:relative; z-index:3; width:100%; max-width:700px; margin:0 auto;
}
.global-search-container .content-lists{max-height:30rem; overflow-y:auto;}
.global-search-container form{width:100%;  position:relative;}
.global-search-container .input-container{position:relative;}
.global-search-container input[type=text]{
  width:100%; font-size:1.25rem; font-weight:700; border:1.5px solid transparent; border-radius:0;
  padding:.75rem 3.75rem .75rem 0; margin:0; box-shadow:none; transition:border-color .3s;
}
.global-search-container input[type=text]::placeholder{
  font-weight:700;
}
@media screen and (max-width:1299.98px){
  .global-search-container .search-pattern{right:calc(100% - 11rem);}
}
@media screen and (max-width:575.98px){
  .global-search-container > .wrapper{padding:1.5rem 0 6rem 0}
}
@media screen and (max-width:490.98px){
  .global-search-container > .wrapper{padding:1.5rem 0rem 6rem 0rem}
}


/* Embed code */
.popup-embed{
  display:none; position:absolute; z-index:999;
  width:300px; border: 1px solid transparent;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15); border-radius: var(--bradius-02);
  padding: 1rem;
}
.popup-embed .popup-inner{position:relative;}
.popup-embed .popup-close{
  position: absolute; right:-.5rem; top:-.75rem;
  background: transparent; border:none; font-size:1.2rem;
  cursor:pointer;
}
.popup-embed .embed-code{
  width:100%; min-height:60px; resize:none;
  margin-bottom:.5rem; border: 1px solid transparent; border-radius: 4px;
  padding: .5rem; font-family: monospace;
}


/* Marquee */
.marquee{width:100%; overflow:hidden; white-space:nowrap; box-sizing:border-box;}
.marquee p, .marquee .p{
  display:inline-block; padding-left:100%;
  animation:marquee 30s linear infinite;
}
.marquee p:hover, .marquee p:focus,
.marquee .p:hover, .marquee .p:focus{animation-play-state:paused;}
.map{border:none; width:100%; height:100%; border-radius:.5rem;}
@keyframes marquee {
  from { transform:translateX(0); }
  to { transform:translateX(-100%); }
}


/* Glider */
.glider {
  position: absolute; top: .3rem; left: 0;height: 100%;
  border-radius: 25px; z-index: 0; transition: all 0.3s ease;
}


/* text style */
.text-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 4rem; margin: 0 .325rem;
}
.text-gradient {
  background: var(--color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}


/* ss title */
.ss-title {
  display: flex; align-items: center;
  gap: .725rem;
}

/* ss tag */
.ss-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.ss-tags .icon,
.ss-link  .icon {
  width: 2.813rem;
}
.ss-tags .tag {
  padding: 0 1rem;
  border-radius: 2rem;
}


/* ss stat */
.ss-stats {
  display: flex; flex-wrap:wrap; justify-content:start; align-items:center;
  gap: .5rem;
}
.ss-stats .stat{
  display:flex; align-items:start; justify-content:center; align-items: center;
  gap: .25rem;
}
.ss-stats .stat .title {min-height: auto !important;}
.ss-stats .stat .icon{display: flex; align-items: center;}
.ss-stats .stat .icon .xs {max-width: 1rem;}
.ss-stats .stat .icon svg.xs{width: 1.188rem;}
.ss-card:not(.ss-card-04):hover .ss-stats .icon {filter: brightness(0) invert(1);}
table tr:hover .ss-stats .icon {filter: brightness(0) invert(1);}


/* Special Card */
.ss-card{position:relative; display:block; width:100%;}
.ss-card .text-container .title, 
.ss-card .text-container .desc{
  display:block; display:-webkit-box; text-overflow:ellipsis; overflow:hidden;
  -webkit-box-orient:vertical; transition:color .3s;
}
.ss-card .text-container .img-icon {
  position:absolute; top:-4rem; left:0; width:100%;
  display:flex; justify-content:center; align-items:center;
}
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
  .ss-card .text-container .img-icon {
    top: 0rem;
  }
}
@media screen and (max-width: 469.98px) {
  .ss-card .text-container .img-icon {
    top: -1rem;
  }
}


/* card 01 */
.ss-card-01{
  position: relative;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  align-content:center; gap:1.2rem; border-radius:1.25rem;
  height:13.25rem; min-width:7.5rem;
}
.ss-card-01 > * {position: relative; z-index: 1;}
.ss-card-01::before{
  content:''; position:absolute; top:0; left:0;
  width:100%; height:100%; opacity:0; border-radius:1.25rem;
  transform:scale(0.5); 
  transition:transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s ease;
}
.ss-card-01 .icon-container{
  display:flex; justify-content:center; align-items:center;
  height:4.25rem; font-size:4rem;
}
.ss-card-01 .icon-container svg, .ss-card-01 .icon-container path{transition:all .8s;}
.ss-card-01 .text-container .title {
  min-height:3rem; transition:all .8s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.ss-card-01:hover::before{
  width:100%; height:100%; transform:scale(1); opacity:1;
}
.ss-card-01:hover .icon-container img {
  filter: brightness(0) invert(1);
}

/* card 02 */
.ss-card-02 .img-container {
  position: relative;
  padding: 55% 0 0 0;
}
.ss-card-02 .img-container > .img-bg {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  transition: ease-in-out .3s all;
}
.ss-card-02 .text-container{
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: end;
  bottom: -5.5rem;
  width: 100%;
  padding: 5rem 1rem 1rem 1rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 17.13%, rgba(0, 0, 0, 0.6) 50.96%, rgba(0, 0, 0, 0.8) 100%);
  transition: ease-in-out .3s all;
}
.ss-card-02 .text-container .title {-webkit-line-clamp:2; min-height:3.25rem;}
.ss-card-02 .text-container .desc {-webkit-line-clamp:3; opacity: 0;}
.ss-card-02:hover .img-bg{transform:scale(1.2);}
.ss-card-02:hover .text-container{bottom:0;}
.ss-card-02:hover .desc{opacity: 1;}

.relate-news .ss-card-02 .img-container {
  padding: 70% 0 0 0;
}

/* .ss-card-02.large .text-container {bottom: -4.85rem;} */
/* .ss-card-02.large:hover .text-container {bottom: -4.85rem;} */
@media screen and (max-width: 1199.98px) {
  .ss-card-02 .img-container {padding: 65% 0 0 0;}
}
@media screen and (max-width: 767.98px) {
  .ss-card-02 .text-container .title {min-height:2.5rem;}
}
@media screen and (max-width: 567.98px) {
  .ss-card-02 .img-container{padding: 75% 0 0 0; height: auto;}
}

/* card 03 */
.ss-card-03{height: 21.5rem; overflow: hidden;}
.ss-card-03 .img-container {
  position: relative; transition: ease-in-out .3s all;
  padding: 76% 0 0 0;
}
.ss-card-03 .img-container > .img-bg {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  transition: ease-in-out .3s all;
}
.ss-card-03 .img-container > .img-date {
  position:absolute; bottom:.5rem; left:.5rem; transition: ease-in-out .3s all;
}
.ss-card-03 .img-container > .img-icon {
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; justify-content:center; align-items:center;
}
.ss-card-03 .text-container{
  position: relative; padding: 1rem;
}
.ss-card-03 .text-container .title {-webkit-line-clamp:2; min-height:2.25rem;}
.ss-card-03 .text-container .desc {-webkit-line-clamp:3; position: relative; opacity:0;}
.ss-card-03 .text-container .weblink {
  position: absolute; left: 0; opacity:0; width: 100%;
  display:flex; align-items:center; justify-content:center; gap:.5rem; 
}
.ss-card-03:hover .img-container{
    padding: 55% 0 0 0;
}
.ss-card-03:hover .text-container .desc,
.ss-card-03:hover .text-container .weblink{
  animation: showDesc 0.3s both alternate;
}
.ss-card-03.style-02{text-align: center;}
.ss-card-03.style-02:hover .img-container {height: 13.375rem;}
.ss-card-03.style-03 {height: 34.5rem;}
.ss-card-03.style-03 .img-container {padding: 120% 0 0 0; height: auto;}
.ss-card-03.style-03:hover .img-container {padding: 100% 0 0 0; height: auto;}

.relate-news .ss-card-03{height: 23.5rem;}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .ss-card-03.style-03 {height: 25rem;}
}
@media screen and (max-width: 1199.98px) {
  .ss-card-03{height: 19rem;}
  .relate-news .ss-card-03{height: 21.5rem;}
}
@media screen and (max-width: 991.98px) {
  .ss-card-03{height: 23.5rem;}
  .relate-news .ss-card-03{height: 20.5rem;}
}
@media screen and (max-width: 767.98px) {
  .ss-card-03,
  .relate-news .ss-card-03 {height: 31rem; margin-bottom: 1rem;}
}
@media screen and (max-width: 459.98px) {
  .ss-card-03 {height: 23.5rem;}
  .relate-news .ss-card-03 {height: 26rem;}
}
@media screen and (min-width: 1200px) and (max-width: 1599px) {
  .ss-card-03.style-03 {height: 30rem;}
}
@media screen and (min-width: 1200px) {
  .ss-card-03 .img-container {padding: 76% 0 0 0;}
  .ss-card-03:hover .img-container {padding: 55% 0 0 0; height: auto;}
}
@media screen and (min-width: 1500px) {
  .ss-card-03 {height: 21.5rem;}
}
@media screen and (min-width: 1600px) {
  .ss-card-03 {height: 24rem;}
  .relate-news .ss-card-03 {height: 27rem;}
}
@keyframes showDesc {
  0% {
    position: absolute; opacity:0; height:0;
  }
  50% {
    opacity: .3;
  }
  80% {
    opacity: .8;
  }
  100% {
    opacity:1; height:4.25rem;
  }
}


/* card 04 */
.ss-card-04{height: 100%;}
.ss-card-04 .img-container {
  position: relative; height: 21vw; transition: ease-in-out .3s all;
}
.ss-card-04 .img-container > .img-bg {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  transition: ease-in-out .3s all;
}
.ss-card-04 .img-container > .img-date {
  position:absolute; bottom:1rem; left:1rem;
}
.ss-card-04 .img-container > .img-icon {
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; justify-content:center; align-items:center;
}
.ss-card-04 .text-container{
  position: relative; padding: .75rem;
}
.ss-card-04 .text-container .title {-webkit-line-clamp:2; min-height:2.25rem;}
.ss-card-04:hover .img-bg{transform:scale(1.2);}

@media screen and (max-width: 767.98px) {
  .ss-card-04 .img-container{height: 118vw;}
}


/* card 05 */
.ss-card-05{display:flex; transition: ease-in-out .3s all; min-height: 10rem;}
.ss-card-05 .img-container {
  position: relative; width: 25%; transition: ease-in-out .3s all;
}
.ss-card-05 .img-container > .img-bg {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  transition: ease-in-out .3s all;
}
.ss-card-05:hover .img-bg {transform:scale(1.2);}
.ss-card-05 .img-container > .img-date {
  position:absolute; bottom:1rem; left:1rem; transition: ease-in-out .3s all;
}
.ss-card-05 .img-container > .img-icon {
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; justify-content:center; align-items:center;
}
.ss-card-05 .text-container {
  width: 75%; padding: 1rem;
}
.ss-card-05 .text-container .title {-webkit-line-clamp:2; min-height:2.25rem;}
.ss-card-05 .text-container .desc {-webkit-line-clamp:3; min-height:4.25rem;}
.ss-card-05 .text-container .weblink {
  display:flex; align-items:center; justify-content:flex-start; gap:.5rem; margin-top:.5rem;
  transition: ease-in-out .3s all;
}
.ss-card-05 .text-container .weblink .hover {
  display:none;
}
.ss-card-05:hover .text-container .weblink .show {
  display:none;
}
.ss-card-05:hover .text-container .weblink .hover {
  display:block;
}
.ss-card-05 .text-container .weblink .icon svg path{transition: ease-in-out .3s all; }
.ss-card-05.style-02 .img-container {width:35%;}
.ss-card-05.style-03 .img-container {padding: 10% 8%; width: auto;}
.ss-card-05.style-03 .text-container {width: 84%;}
.ss-card-05.style-04 .img-container{width: 40%;}
.ss-card-05.style-04 .text-container{width: 60%;}

@media screen and (max-width: 1199.98px) {
  .ss-card-05 .img-container{width: 35%;}
  .ss-card-05 .text-container{width: 65%;}
}
@media screen and (max-width: 991.98px) {
  .ss-card-05 .img-container{width: 40%;}
  .ss-card-05 .text-container{width: 70%;}
}
@media screen and (max-width: 567.98px) {
  .ss-card-05 {flex-wrap: wrap;}
  .ss-card-05 .img-container,
  .ss-card-05.style-02 .img-container,
  .ss-card-05.style-04 .img-container{width: 100%; height: 15rem;}
  .ss-card-05 .text-container,
  .ss-card-05.style-04 .text-container{width: 100%;}
  .ss-card-05.style-03 .img-container {padding: 130% 100% 0 0; width: auto;}
  .ss-card-05.style-03 .text-container {width: 100%;}
}


/* card 06 */
.ss-card-06{
  height: 100%; min-height: 25rem; padding: 1rem 1.5rem; border-radius: 1.125rem; 
  transition: ease-in-out .3s all;
}
.ss-card-06 .text-container .title {
  -webkit-line-clamp:2; min-height:3.75rem;
}
.ss-card-06 .desc {
  -webkit-line-clamp:8; min-height:12.25rem;
}
.ss-card-06.style-02 {min-height: 22rem;}
.ss-card-06.style-02 .desc {
  -webkit-line-clamp:10; min-height:16.15rem;
}


/* card 07 */
.swiper-highlight .swiper[data-item="1.5"] .swiper-slide:not(.swiper-slide-active) .ss-card > * {
  opacity: 0;
}
.ss-card-07 {
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0px 0px 20px rgba(49, 136, 170, 0.2);
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.ss-card-07 .img-container {
  position: relative;
  width: 45%;
  border-radius: 1.2rem;
  padding: 58% 0 0 0;
  overflow: hidden;
}
.ss-card-07 .img-container .img-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .3s ease-in-out;
}
.ss-card-07:hover .img-container .img-bg {
  transform: scale(1.1);
}
.ss-card-07 .text-container {
  width: 55%;
  padding: 1.2rem;
}
.ss-card-07 .text-container .text-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  height: 100%;
}
.ss-card-07 .title {
  -webkit-line-clamp: 2;
  line-height: 2rem;
}
.ss-card-07 .desc {
  -webkit-line-clamp: 3;
  line-height: 1.4rem;
}
.ss-card-07:hover button img {
  filter: brightness(0) invert(1);
}
@media screen and (max-width:991.98px){
  .ss-card-07 .img-container{width:50%;}
  .ss-card-07 .text-container{width:50%;}
}
@media screen and (max-width:767.98px){
  .ss-card-07 .img-container{width:100%;}
  .ss-card-07 .text-container{width:100%;}
}
@media screen and (max-width:575.98px){
  .ss-card-07 .img-container{width:100%; padding: 120% 0 0 0;}
  .ss-card-07 .text-container{width:100%;}
}


/* Card 08 */
.ss-card-08 {
  padding: .85rem; 
  margin: .25rem 0;
  border-radius: .75rem; 
  transition: ease-in-out .3s all;}


/* Special Image */
.ss-img{display:block; position:relative; width:100%; padding:65% 0 0 0; overflow:hidden;}
.ss-img.square{padding:100% 0 0 0;}
.ss-img.square-2{padding:70% 0 0 0;}
.ss-img.square-3{padding:75% 0 0 0;}
.ss-img.horizontal{padding:55% 0 0 0;}
.ss-img.horizontal-2{padding:50% 0 0 0;}
.ss-img.horizontal-3{padding:60% 0 0 0;}
.ss-img.vertical{padding:150% 0 0 0;}
.ss-img.vertical-2{padding:120% 0 0 0;}
.ss-img > .img-bg{
    position:absolute; top:0; bottom:0; left:0; right:0; background-size:cover;
    background-position:center; background-repeat:no-repeat; transition:transform .3s;
}
.ss-img:hover > .img-bg, .ss-card:hover .ss-img > .img-bg{transform:scale(1.1);}
.ss-img.no-hover > .img-bg, .ss-card .ss-img.no-hover > .img-bg{transform:none!important;}

.ss-img .hover-container{
    position:absolute; top:0; bottom:0; left:0; right:0; opacity:0;
    display:flex; justify-content:center; align-items:center;
    transition:opacity .25s, background .25s;
}
.ss-img:hover .hover-container, .ss-card:hover .ss-img .hover-container{opacity:1;}
.ss-img .hover-container .icon{display:block; width:4rem;}
.ss-img .hover-container .icon.md{display:block; width:3rem;}
.ss-img .hover-container .icon > img{display:block; width:100%; height:auto;}
.ss-img .hover-container .icon > em{position:relative; z-index:2; font-size:3.5rem;}

.filter-01{position:absolute; top:0; right:0; bottom:0; left:0;}

.bg-cover {
  position: absolute; width: 100%; height: 100%;
  background-position: center; background-size: cover;
  background-repeat: no-repeat;
}


/* Youtube Player */
.youtube-player iframe {width: 100%; height: 30vw;}
@media screen and (max-width: 567.98px) {
  .youtube-player iframe {height: 50vw;}
}


/* Table */
table.table{width:100%; border-spacing:0; border:0; margin:0;}
table.table th, table.table td{
    vertical-align:middle; border-color:transparent;
    border-left:0!important; border-right:0!important;
}
table.table td{
    padding:.5625rem .625rem; font-size:.9375rem; font-weight:300;
    border:0; border-bottom:1px solid transparent;
}
table.table td:first-child{padding:.5625rem .625rem .5625rem 0;}
table.table tr:last-child > td{border-bottom:0;}
table tr:hover .btn-arrow img{filter: brightness(0) invert(1);}


/* Table 01 */
table.table-01 tr{display: flex; border-radius: 1.125rem; overflow: hidden;}
table.table-01 td:first-child{width: 7rem; padding: .25rem;}
table.table.table-01 tr > td.text-container{
  padding: 1rem;
  width: calc(100% - 10rem);
}
table.table.table-01 tr > td.button-container{
  width: 5rem; display:flex; justify-content:center; align-items:center;;
}
table.table.table-01 .pattern-02 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
table.table.table-01 .box-bg {
  position: absolute;
  top: .25rem;
  left: .25rem;
  width: 92%;
  height: 92%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 1.125rem;
}
table.table.table-01 .box-bg img,
table.table.table-01 tr .file-container img {
  filter: brightness(0) invert(1);
}
table.table.table-01 tr:hover .box-bg img,
table.table.table-01 tr:hover .file-container img {
  filter: unset;
}
table.table.table-01 .title{
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  transition: color .3s;
  -webkit-line-clamp: 2;
  min-height: 2.8rem;

}
.table.table-01 .arrow-icon {
  position: relative;
  display: flex;
  align-items: center;
  transition: all .25s;
  width: 5rem;
  height: 5rem;
  transform: unset;
}
.table.table-01 .btn-arrow{
  display: flex;
  align-items: center;
}
table.table.table-01.style-03 tr td.file-container .icon {
  display:flex; justify-content:center; align-items:center;
  width:100%; height:100%; border-radius:1.125rem;
}
table.table.table-01.style-03 tr > td.text-container {
  padding: 1rem .5rem;
  width: calc(100% - 12.5rem);
}
table.table.table-01.style-03 tr > td.btn-container {
  width: 4rem; display: flex; justify-content:center; align-items:center;
}
table.table.table-01.style-03 tr > td.btn-container .btn-toggle{
  display:flex; justify-content:center; align-items:center; cursor: pointer;
  width:2.5rem; height:2.5rem; border-radius:50%;
}
@media screen and (max-width: 565.98px) {
  table.table-01 td:first-child {
    padding-left: 0;
    width: 7rem;
  }
  table.table.table-01 tr > td.text-container {
    padding: 1rem .25rem;
  }
  table.table.table-01 tr > td.button-container {
    width: 3rem;
  }
  table.table.table-01.style-03 tr > td.text-container {
    width: calc(100% - 10rem);
  }
  table.table-01.style-03 td:first-child {padding-left: .25rem;}
}

table.table-02 tr{display: flex; border-radius: .625rem; overflow: hidden; margin-bottom: .5rem;}
table.table-02 td:first-child {
  width: 4rem; padding: .25rem;
}
table.table-02 tr > td.text-container {
  padding: 1rem .5rem; width: calc(100% - 8rem);
  display: flex; justify-content: space-between; align-items: center;
}
table.table-02 tr > td.btn-container {
  width: 4rem; display: flex; justify-content: center; align-items: center;
}
table.table-02 tr td.file-container .icon {
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: 100%; border-radius: 1.125rem;
}
table.table-02 .ss-stats .stat {width: 4rem; justify-content: start;}
table.table-02 tr:hover .ss-stats .stat .icon {filter: unset !important;}
table.table-02 .btn-container .btn-toggle {
  display: flex; justify-content: center; align-items: center;
}
table.table-02 .btn-container img.lg {width: 1.375rem; filter: unset !important;}
@media screen and (max-width: 565.98px) {
  table.table-02 tr > td.text-container {flex-wrap: wrap;}
}

table.table-03 tr{display: flex; border-radius: .625rem; overflow: hidden;}
table.table-03 td:first-child {
  width: 5.6rem; padding: .25rem;
}
table.table-03 tr > td.text-container {
  padding: 1rem .5rem; width: calc(100% - 7rem);
  display: flex; flex-wrap: wrap; justify-content: space-between; 
  align-items: start; flex-direction: column;
}
table.table.table-03 .title {
  display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical;
  transition: color .3s; -webkit-line-clamp: 2;
}
table.table-03 tr > td.btn-container {
  width: 4rem; display: flex; justify-content: center; align-items: center;
}
table.table.table-03 tr > td.btn-container .btn-toggle {
  display: flex; justify-content: center; align-items: center;
  cursor: pointer; width: 2.5rem; height: 2.5rem;
  border-radius: 50%; border: 1px solid transparent;
}
table.table-03 tr td.file-container .icon {
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: 100%; border-radius: 1rem;
}
table.table-03 .ss-stats .stat {width: 4rem; justify-content: start;}
table.table-03 .ss-stats .stat.date-between {width: 12rem;}
@media screen and (max-width: 565.98px) {
  table.table-03 tr > td.text-container {flex-wrap: wrap;}
}

table.table-webboard td:first-child {
  width: 8rem;
}


/* faq-01 */
.faq-01 .content {
  border-radius: 1.125rem; overflow: hidden;
}
.faq-01 .content .wrapper {max-width: 100%;}
.faq-01 .content .icon-plus {
  transition: transform .3s;
}
.faq-01 .content.active .icon-plus {
  transform: rotate(90deg);
}
.faq-01 .content.active .file-container img {filter: unset;}
.faq-01 .answer {
  position: relative;
  display: none;
  border-top: 1px solid transparent;
  padding: .5rem .85rem;
}
.faq-01 .content.active .btn-toggle img,
.faq-01 .content:hover .btn-toggle img {
  filter: brightness(0) invert(1);
}

.faq-01.style-02 .btn-toggle svg,
.faq-01.style-02 .btn-toggle img {transition: all .3s;}
.faq-01.style-02 .content.active .btn-toggle svg,
.faq-01.style-02 .content.active .btn-toggle img {transform: rotate(180deg);}

.faq-01.style-03 .content .wrapper {cursor: pointer;}
.faq-01.style-03 .content.active .wrapper td.file-container .icon, 
.faq-01.style-03 .content:hover .wrapper td.file-container .icon {
  background: var(--color-p) !important;
}
.faq-01.style-03 .content.active .wrapper td.file-container .icon path {
  fill: transparent;
}
.faq-01.style-03 .content:hover .wrapper tr .title,
.faq-01.style-03 .content.active .wrapper tr .title {
  color: #000000 !important;
}
.faq-01.style-03 .content.active .wrapper .btn-toggle, 
.faq-01.style-03 .content:hover .wrapper .btn-toggle {
  border-color: var(--color-p) !important;
}
.faq-01.style-03 .content.active .wrapper .btn-toggle path, 
.faq-01.style-03 .content:hover .wrapper .btn-toggle path {
  fill: var(--color-p);
}
.faq-01.style-03 .answer {padding: .5rem .85rem 1.5rem;}

.faq-01.style-04 .answer {
  padding: .5rem 0;
}
.faq-01.style-04 .content {
  border-radius: 0;
}
.faq-01.style-04 table.table.table-01.style-03 tr {
  border-radius: 0;
  border-bottom: 1px solid transparent;
}
.faq-01.style-04 table.table.table-01.style-03 tr > td.text-container {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  width: calc(100% - 3.5rem);
}
.faq-01.style-04 table.table.table-01 .title {
  -webkit-line-clamp: 4;
  min-height: unset;
}
.faq-01.style-04 .btn-toggle img {
  transition: all .3s;
}
.faq-01.style-04 table.table.table-01 .title,
.faq-01.style-04 .content.active .btn-toggle {
  margin-bottom: .25rem;
}
.faq-01.style-04 .content.active .btn-toggle img {
  transform: rotate(180deg);
}


/* Column */
.column-6{width:calc(100% / 2);}
.column-7{width:calc(100% / 2);}
@media screen and (min-width: 768px) {
  .column-6{width:calc(100% / 2);}
  .column-7{width:calc(100% / 4);}
}
@media screen and (min-width: 1200px) {
  .column-6{width:calc(100% / 6);}
  .column-7{width:calc(100% / 7);}
}


/* Panels */
.panels{position: relative; display:flex; flex-wrap: wrap;}
.panels .panel-left{
  position: relative; width: 60%;
}
.panels .panel-left > .wrapper {max-width: calc(780px - 1rem); margin-left: auto; margin-right: 1rem;}
.panels .panel-right{
  position: relative; width: 40%;
}
.panels .panel-right > .wrapper {max-width: calc(520px - 1rem); margin-left: 1rem; margin-right: auto;}

@media screen and (max-width: 1299.98px) {
  .panels .panel-left > .wrapper{max-width: calc(720px - 1rem);}
  .panels .panel-right > .wrapper {max-width: calc(480px - 1rem); margin-right: auto;}
}
@media screen and (max-width: 1199.98px) {
  .panels .panel-left > .wrapper{max-width: calc(595.2px - 1rem);}
  .panels .panel-right > .wrapper {max-width: calc(324.8px - 1rem); margin-right: auto;}
}
@media screen and (max-width: 991.98px) {
  .panels .panel-left > .wrapper{max-width: calc(460.8px - 1rem); padding-left: 1rem;}
  .panels .panel-right > .wrapper {max-width: calc(307.2px - 1rem); margin-right: auto; padding-right: 1rem;}
}
@media screen and (max-width: 767.98px) {
  .panels .panel-left{width: 100%;}
  .panels .panel-left > .wrapper{max-width: calc(578px - 2rem); margin: auto; padding-left: 0;}
  .panels .panel-right{width: 100%;}
  .panels .panel-right > .wrapper {max-width: calc(578px - 2rem); margin: auto; padding-right: 0;}
}
@media screen and (max-width: 575.98px) {
  .panels .panel-left{width: 100%;}
  .panels .panel-left > .wrapper{max-width: calc(100% - 2rem); margin: auto;}
  .panels .panel-right{width: 100%;}
  .panels .panel-right > .wrapper {max-width: calc(100% - 2rem); margin: auto;}
}
@media screen and (min-width: 1600px) {
  .panels .panel-left .wrapper{max-width: calc(960px - 1rem);}
  .panels .panel-right .wrapper {max-width: calc(640px - 1rem); margin-right: auto;}
}


/* Popup Container */
.popup-container{
  display:block; position:fixed; top:0; left:0;
  width:100%; height:100vh; z-index:9999; border:1px solid transparent;
  opacity:0; pointer-events:none; background:rgba(0,0,0,.6);
  transition: opacity .45s;
}
.popup-container.active{opacity: 1; pointer-events: all;}
.popup-container .box-body{position:relative; width: 100%; border-radius:1rem;}
.popup-container .box-body .icon{
  display:block; max-width:100%; width:auto;
  max-height:100%; height:5.5rem; margin:0 auto;
}
.popup-container .box-body .icon.size-02{height:16rem;}
.popup-container .box-body{background:#ffffff;}
.popup-container .box-body{
  width:100%; padding:1.75rem; max-height:calc(100vh - 7rem);
  overflow-x:hidden; overflow-y:auto;
}
.popup-container .popup-box {
  display:block; position:relative; 
  width:100%; padding: 0; margin: 0 auto;
  max-width:520px; border-radius:.6125rem;
}
.popup-container .popup-box .circle-drop{
  display:flex; align-items:center; justify-content:center;
  width:4.5rem; height:4.5rem; border-top-left-radius:50px; margin:0 auto;
  border-top-right-radius:50px; border-bottom-left-radius:50px;
}
.popup-container .popup-box .circle-drop svg{
  display:block; max-width:100%; max-height:100%;
  width:auto; height:3.25rem;
}
.popup-container.size-02 .popup-box{width:100%; max-width:750px;}
.popup-container .popup-box.size-02{width:42rem;}
.popup-container > .wrapper{
  position: relative; width:100%;
  height:100%; display:flex; align-items:center; padding: 1rem;
}
.popup-container > .wrapper{top:-50rem; transition:all .75s;}
.popup-container.active > .wrapper{top:unset;}
.popup-container .box-body .close-popup{position:absolute; top:.875rem; right:.875rem;}
.close-popup {
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.close-popup div {
  position: absolute;
  background-color: #989898;
  border-radius: 2px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.close-popup div:first-child {
  width: 100%;
  height: 2px;
  transform: rotate(45deg);
}
.close-popup div:last-child {
  width: 100%;
  height: 2px;
  transform: rotate(-45deg);
}
.popup-container .popup-box .rating{
  display:flex; justify-content:center; margin-top:1rem; align-items:center; flex-wrap:wrap;
}
.popup-container .popup-box .rating > .rating-item{display:flex; align-items:center;}
.popup-container .popup-box .rating .rating-desc{display:flex; align-items:center; margin:.25rem 0;}
.popup-container .popup-box .rating .rating-item{
  width:2rem; height:2rem; display:flex; align-items:center; margin:.25rem .125rem; font-weight:400;
  justify-content:center; border-radius:50%; transition:background .25s; cursor:pointer; 
}
.popup-container .popup-box .rating .rating-desc .icon{
  display:block; width:auto; height:2rem; max-width:100%; max-height:100%;
}
.popup-container .popup-box .rating .title{font-size:.625rem; font-weight:400;}
.popup-container .popup-box .code-inputs{
  display:flex; justify-content:center;
  width:25rem; gap:.625rem; margin:1rem auto 0;
}
.popup-container .popup-box .code-input{
  width:2.5rem; height:3.125rem; text-align: center; font-size:1.125rem;
  border: 1px solid transparent; border-radius:.3125rem; outline:none;
}


/* List Header */
.list-header{
  position:relative; width:100%; display:flex; align-items:center;
  justify-content:space-between; padding:.125rem 0; margin:0;
}
.list-header .option .dropdown-icon{
  position:absolute; right:0; pointer-events:none; width:2.5rem; height:100%; border-radius:0 .375rem .375rem 0;
  top:0; bottom:0; display:flex; justify-content:center; align-items:center; border:1px solid transparent;
  font-size: .75rem;
}
.list-header .option.search .dropdown-icon{pointer-events:all;}
.list-header .options{display:flex; align-items:center; flex-wrap:wrap; margin:0; width:100%; gap:.75rem;}
/* .list-header .option.view{display:flex; flex-wrap:wrap; align-items:center; gap:.25rem;} */
.list-header .option > .ui.icon.input input{
  background:#eeeeee!important; border:1px solid transparent; 
}
.list-header .option input,
.list-header .option.cate select{
  width:18.75rem; max-width: 100%;
}
.list-header .option select {width: 11.625rem; max-width: 100%;}
.list-header .option.view > .wrapper {
  position: relative; display: flex; gap:.25rem;
}
.list-header .option .icon-view{
  display:flex; align-items:center; justify-content:center; width:3.125rem; height:3.125rem; cursor:pointer;
  border:1px solid transparent; border-radius:50%; font-size:1.125rem; transition:all .25s;
}
.list-header .option .icon-view img,
.list-header .option .icon-view svg{
  display:block; max-width:100%; width:auto; max-height:1.5rem;
}
.list-header .option .icon-view:hover img,
.list-header .option .icon-view.active img {filter: brightness(0) invert(1);}
.list-header .option .icon-view.disable{pointer-events:none;}
@media screen and (max-width: 565.98px) {
  .list-header .option,
  .list-header .option select,
  .list-header .option input,
  .list-header .option.cate select,
  .list-header .form-input,
  .list-header .option button {width:100%;}
}


/* List Footer */
.list-footer{
  margin:-.5rem 0; display:flex; align-items:center;
  justify-content:space-between; font-weight:300; white-space:nowrap;
}
.list-footer .option{display:flex; align-items:center; margin:.5rem 0;}
@media screen and (max-width:991.98px){
  .list-footer{display:block;}
  .list-footer .option{width:100%; justify-content:center;}
}
@media screen and (max-width:435.98px){
  .list-footer .option{flex-direction:column;}
}


/* Cookie Consent */
.cookie-banner {
  position: fixed;
  bottom: 2rem;
  width: 100%;
  max-width:calc(1300px - 2rem);
  border-radius: var(--bradius-02);
  padding: 1.45rem 1rem;
  z-index: 9999;
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-left: 10px solid transparent;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.15);
}
.cookie-consent-text > * {max-width: 46rem;}
.cookie-consent-btn{
  display: flex;
  justify-content: center;
  align-items: center;
}
.cookie-banner button {
  margin: 0 10px;
  padding: 8px 15px;
  border: none;
  cursor: pointer;
  min-width: auto !important;
}
@media screen and (min-width:1600px){
  .cookie-banner{max-width:calc(1600px - 2rem);}
}
@media screen and (max-width:1299.98px){
  .cookie-banner{max-width:calc(1200px - 2rem);}
}
@media screen and (max-width:1199.98px){
  .cookie-banner{max-width:calc(992px - 2rem);}
}
@media screen and (max-width:991.98px){
  .cookie-banner{max-width:calc(768px - 2rem);}
}
@media screen and (max-width:767.98px){
  .cookie-banner{max-width:calc(578px - 2rem);}
}
@media screen and (max-width:575.98px){
  .cookie-banner{max-width:calc(100% - 2rem); flex-wrap: wrap;}
}

/* Webboard */
.webboard-list-header .list-header .option.order  {
  margin-left: auto;
}

/* Card */
.card {
  position: relative;
  margin-bottom: 1rem;
  z-index: 1;
}
.card .card-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.2rem;
}
.card .card-body {
  position: relative;
  padding: 0 1.2rem;
}
.card .card-body:last-child {
  padding-bottom: 1.2rem;
}
.card .card-body .content.md {
  padding: 0 3.5rem;
}
.card-footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 1.2rem .8rem;
  border-top: 1px solid transparent;
}

.card:has(+ .sub-card) {z-index: 2;}
.card.sub-card:has(+ .sub-card) {z-index: 1;}
.card.sub-card {
  margin-left: 6.125rem;
}
.card.sub-card::before {
  content: '';
  position: absolute;
  bottom: calc(100% - 2rem);
  right: 100%;
  width: 3.125rem;
  height: calc(100% + 2rem);
  border-width: 0 0 1px 1px;
  border-style: solid;
  border-radius: 0 0 0 1.25rem;
}


/* User Account */
.user-account {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
}
.user-account .image {
  width: 2.375rem;
  height: 2.375rem;
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.user-account .image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
}


/* Comment Setting */
.comment-setting {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .5rem;
  cursor: pointer;
}
.popup-comment {
  display: none;
  position: absolute;
  right: 0;
  z-index: 999;
  width: 200px;
  border: 1px solid transparent;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-radius: 1rem;
  padding: .75rem;
}
.popup-comment .items {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.popup-comment .items .item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  gap: .5rem;
  padding: .5rem;
  border-radius: .5rem;
  transition: all .3s ease-in-out;
}
.popup-comment .items .item > .icon,
.popup-comment .items .item > .text {
  display: flex;
  align-items: center;
}
.menu-user-account .popup-comment {
  top: calc(100% + .5rem);
  width: 220px;
  padding: .75rem 1.25rem;
} 
.menu-user-account .popup-comment .item {
  position: relative;
  padding: .5rem 1rem;
  overflow: hidden;
  border-radius: 3rem;
}
.menu-user-account .popup-comment .item:not(:last-child)::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  top: calc(100% + .125rem);
  left: 0;
}
.menu-user-account .popup-comment .item::after {
  content: ''; position: absolute; top: 50%; left: -20px;
  width: .563rem; height: .563rem; border-radius: 50%;
  transform: translateY(-50%);
}
.menu-user-account .popup-comment .item:hover::after {animation: criss-cross-left 0.8s both alternate;}
.menu-user-account .popup-comment .item .text {position: relative; z-index: 1;}

.menu-user-account {
  position: relative;
}

/* Rating Container */
.rating-container{display:flex; flex-wrap:wrap; gap:10px;}
.rating-option{
  display:inline-block; padding:10px 20px;
  border:1px solid transparent; border-radius:.75rem;
  cursor:pointer; text-align:left;
  transition: background-color .2s, border-color .2s;
  width: 100%;
}
.rating-option input[type="radio"]{display: none;}
.rating-option label{
  display:block; cursor:pointer; position:relative; 
  padding-left:1.625rem; font-weight:400;
}
.rating-option label::before{
  content:''; position:absolute; top:50%;
  left:0; transform: translateY(-50%);
  width:1rem; height:1rem; border:2px solid transparent;
  border-radius:50%; background-color:#fff;
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"%3E%3Cpath d="M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z"/%3E%3C/svg%3E');
  background-color:#D8D8D8; border-color:#D8D8D8;
  transition:background-color 0.2s, border-color 0.2s;
}
.rating-option input[type="radio"]:checked + label::before {
  background-color: #ffffff; border-color:#ffffff;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233A8246"%3E%3Cpath d="M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z"/%3E%3C/svg%3E');
  background-repeat:no-repeat; background-position: center;
}
.rating-option.result{
  position: relative; overflow: hidden;
  pointer-events:none; display:flex; align-items:center;
  justify-content:space-between;
}
.rating-option.result p {position: relative;}
.rating-option.result .bg-color {
  position: absolute; height: 100%; left: 0;
}
@media screen and (max-width:767.98px){
  .rating-container{justify-content:center;}
}


/* Chart */
.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.chart-container .chart-poll {
  width: 13rem;
  height: 13rem;
}
.chart-container .chart-data .list-item {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.chart-container .chart-data .list-item .dot {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
}
.chart-container .chart-data .list-item:nth-child(1) .dot{background:#265B0F;}
.chart-container .chart-data .list-item:nth-child(2) .dot{background:#3A8246;}
.chart-container .chart-data .list-item:nth-child(3) .dot{background:#FFD400;}
.chart-container .chart-data .list-item:nth-child(4) .dot{background:#FF981A;}
.chart-container .chart-data .list-item:nth-child(5) .dot{background:#F25356;}


/* ol circle number */
ol.circle-number {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
ol.circle-number > li {
  position: relative;
  counter-increment: item;
  padding-left: 2.2rem;
  margin: .5rem 0;
}
ol.circle-number > li:before {
  content: counter(item);
  position: absolute;
  left: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  text-align: center;
  font-weight: 600;
}
ol.sub-number {
  list-style-type: none;
  counter-reset: subitem;
  margin: 0.5rem 0 0 0;
  padding: 0;
}
ol.sub-number > li {
  position: relative;
  counter-increment: subitem;
  padding-left: 2.2rem;
  margin-bottom: 0.5rem;
}
ol.sub-number > li:before {
  content: counter(item) "." counters(subitem, ".");
  position: absolute;
  left: 0;
}
ol.sub-number ol.sub-number {
  margin-top: .5rem;
  padding-left: .5rem;
}
ol.sub-number  ol.sub-number > li {
  padding-left: 3.2rem;
}

/* Step Line */
.step-line {
  padding: 2rem 0;
  margin-bottom: 1rem;
}
.step-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}
/* .step-list::before {
  content: '';
  position: absolute;
  top: 1.719rem;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  z-index: 1;
} */
.step {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 25%;
}
.step .circle {
  width: 3.438rem;
  height: 3.438rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-weight: 600;
  font-size: 1.25rem;
  border: 4px solid white; /* This should be the background color of the container */
  position: relative;
  z-index: 2;
}
.step .text {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}
.step::after {
  content: '';
  position: absolute;
  top: 1.719rem;
  height: 2px;
  z-index: 1;
  /* left: -50%;
  width: 100%; */
  left: -40%;
  width: 80%;
}
.step:first-child::after {
  content: none;
}

/* Step Line Responsive */
@media screen and (max-width: 767.98px) {
  .step-line {
    overflow-x: auto;
    padding-bottom: 1rem;
  }
  .step-line::-webkit-scrollbar{display: none;}
  .step-list {
    flex-direction: row;
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
  }
  .step {
    width: 140px;
    text-align: center;
    padding-left: 0;
    min-height: auto;
    display: block;
    flex-shrink: 0;
  }
  .step::after {
    left: -29%;
  }
  .step .circle {
    position: relative;
    left: auto;
    top: auto;
    margin: 0 auto;
  }
  .step .text {
    margin-top: 0.5rem;
  }
  .step.active::after {
    display: block;
  }
}

/* 404 */
.content-error {
  position: relative;
}
.content-error .img > img {
  display: block;
  width: 100%;
}
.content-error .img > img.mobile {display: block;}
.content-error .img > img.tablet {display: none;}
.content-error .img > img.desktop {display: none;}
.content-error .text {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  width: 95%;
  height: 91%;
  bottom: 0;
  right: 0;
  transform: scale(0.7);
}
@media screen and (min-width: 768px) {
  .content-error .img > img.mobile {display: none;}
  .content-error .img > img.tablet {display: block;}
  .content-error .text {
    gap: .8rem;
    height: 93%;
    transform: scale(1);
  }
}
@media screen and (min-width: 1200px) {
  .content-error .img > img.tablet {display: none;}
  .content-error .img > img.desktop {display: block;}
}
@media screen and (min-width: 1600px) {
  .content-error .text {
    width: 100%;
  }
}

/* intro */
.intro-01 {
  display:block; position:relative; width:100%;
  height:100vh; overflow:hidden;
}
.intro-01 .intro-container {
  position:relative; width:100%; height: calc(100% - 7.375rem);
}
.intro-01 .swiper{height:100%; position: relative;}
.intro-01{position:relative;}

.intro-01 .swiper-slide{position:relative; overflow:hidden;}
.intro-01 .swiper-slide > .wrapper{position:relative; width:100%; height:100%;}
.intro-01 .swiper-slide .bg-img{
  position:absolute; top:0; left:0; right:0; bottom:0; transition:opacity .25s;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.intro-01 .intro-container .bg-img.tablet,
.intro-01 .intro-container .bg-img.mobile {
  display: none;
}
.intro-01 .arrows{
  position:absolute; width:100%; top:calc(50% - 2rem); left:0; display:flex; 
  justify-content:space-between; align-items:center; z-index:2; pointer-events:none;
}
.intro-01 .arrows > .arrow{
  position:relative; font-size:1.25rem; border-radius:50%; z-index:3; width:2.5rem; height:2.5rem;
  transition:color .25s, opacity .25s; cursor:pointer; pointer-events:auto; 
  display:flex; justify-content:center; align-items:center; margin:0 .5rem;
  border: 1px solid transparent; border-radius: 2rem;opacity:.7;
}
.intro-01 .arrows > .arrow:hover{opacity:1;}
.intro-01 .intro-footer{
  position:relative; display:block; padding:1.125rem 0 .625rem;
}
.intro-01 .intro-footer::before {
  content: '';
  position: absolute;
  height: .625rem;
  width: 100%;
  top: 0;
  left: 0;
}
.intro-01 .intro-footer .bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}
.intro-01 .intro-footer .bg-img.mobile {
  display: none;
}
.intro-01 .intro-footer .footer-content .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.intro-01 .intro-footer .footer-content .wrapper .btn-container {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 1199.98px) {
  .intro-01 .swiper-slide .bg-img {
    background-size: contain;
  }
}
@media screen and (max-width: 991.98px) {
  .intro-01 .container {
    max-width: calc(768px - 1rem);
  }
  .intro-01 .intro-container {
    height: calc(100% - 11rem);
  }
  .intro-01 .intro-container .bg-img.desktop,
  .intro-01 .intro-container .bg-img.mobile {
    display: none;
  }
  .intro-01 .intro-container .bg-img.tablet {
    display: block;
  }
  .intro-01 .intro-footer .footer-content .wrapper {
    flex-direction: column;
    justify-content: center;
  }
}
@media screen and (max-width: 565.98px) {
  .intro-01 .intro-footer .bg-img {display: none;}
  .intro-01 .intro-footer .bg-img.mobile {display: block;}
  .intro-01 .intro-container {height: 60%;}
  .intro-01 .intro-container .bg-img.desktop,
  .intro-01 .intro-container .bg-img.tablet {
    display: none;
  }
  .intro-01 .intro-container .bg-img.mobile {
    display: block;
  }
  .intro-01 .footer-content .logo-container img {
    max-height: 3.5rem;
  }
  .intro-01 .swiper-slide .wrapper{min-height: 50vw;}
  .intro-01 .arrows > .arrow{transform: scale(.7);}
  .intro-01 .intro-footer .footer-content .wrapper .btn-container {
    justify-content: center;
    flex-direction: column;
    gap: .25rem !important;
  }
  .intro-01 .intro-footer .footer-content .wrapper .btn-container .btn {
    font-size: .8rem;
  }
  .intro-01 .intro-footer .footer-content .wrapper .btn-container .pattern {
    max-width: 1rem;
    margin: auto;
  }
}

/* Preloader */
.preloader {
  position: fixed;
  /* display: none; */
  /* top: 0; */
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 99999;
}
.loading .preloader{
  display: block;
  /* animation-name: slideUp;
  animation-duration: 3.2s;  
  animation-delay: .5s; */
}
.preloader > .wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.preloader > .wrapper .loader{
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  animation-duration: 1s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}
.preloader > .wrapper .slide-left {
  animation-name: slideLeft;
  left: -0%;
}
.preloader > .wrapper .slide-left .content {
  position: relative;
}
.preloader > .wrapper .slide-left::before {
  position: absolute;
  content: '';
  right: -.188rem;
  width: .375rem;
  height: 0;
  transform: translateY(-50%);
  animation: lineGrow 1s ease-in-out forwards;
}
.preloader > .wrapper .slide-right {
  animation-name: slideRight;
  right: -0%;
}
.preloader > .wrapper .loader img {max-width: 100%;}
@keyframes slideLeft {
  from {transform: translateX(0);}
  to {transform: translateX(-100%);}
}
@keyframes slideRight {
  from {transform: translateX(0);}
  to {transform: translateX(100%);}
}
@keyframes lineGrow {
  0% {height: 0; opacity: 1; transform: translateY(-50%);}
  80% {height: 100%; opacity: 1; transform: translateY(0);}
  100% {height: 100%; opacity: 0; transform: translateY(0);}
}


/* Profressional */
.perfressional {position: relative;}
.perfressional-highlight {position: relative;}
.perfressional-highlight .highlight-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  max-width: 57.5rem;
  margin: auto;
  padding-top: 1rem;
}
.perfressional-highlight .highlight-content .content-left {
  width: 35%;
}
.perfressional-highlight .highlight-content .content-rigth {
  width: 65%;
  display: flex;
  align-items: center;
}
.profile-picture {
  height: 26rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.profile-picture > img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: top;
}
.perfressional-highlight .profile-detail {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem 2.5rem 4rem;
  margin: auto;
  width: 100%;
  min-height: 21.75rem;
  max-width: 33rem;
}
.perfressional-highlight .profile-detail::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg width='559' height='378' viewBox='0 0 559 378' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 20C0 8.9543 8.95431 0 20 0H539C550.046 0 559 8.9543 559 20V318.508C559 329.553 550.046 338.507 539 338.507H51.3813C33.2436 338.507 16.5283 348.33 7.70152 364.175L0 378V20Z' fill='black'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml,%3csvg width='559' height='378' viewBox='0 0 559 378' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 20C0 8.9543 8.95431 0 20 0H539C550.046 0 559 8.9543 559 20V318.508C559 329.553 550.046 338.507 539 338.507H51.3813C33.2436 338.507 16.5283 348.33 7.70152 364.175L0 378V20Z' fill='black'/%3e%3c/svg%3e");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.perfressional-highlight .profile-detail > .top,
.perfressional-highlight .profile-detail > .bottom {
  position: relative;
}
.perfressional .contact {
  display: flex;
  gap: .5rem;
}
.perfressional .contact .text {
  display: flex;
  gap: .5rem;
}

.perfressional-lists {
  background-size: cover;
  background-position: center;
}
.perfressional-lists .content-detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 1.5rem;
}
.perfressional-lists .item {
  width: 25%;
  cursor: pointer;
}
.perfressional-lists .item .wrapper {
  display: flex;
  align-items: start;
  border-radius: 0.625rem;
  padding: 0.75rem;
  height: 100%;
  transition: all 0.3s;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
}
.perfressional-lists .item.active .wrapper {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); transform: translateY(-3px);
}
.perfressional-lists .item:hover .wrapper {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}
.perfressional-lists .item .image {
  position: relative;
  width: 6.25rem;
  height: 7.5rem;
  flex-shrink: 0;
  margin-top: -.75rem;
  margin-right: 0.75rem;
  border-radius: .75rem;
  overflow: hidden;
}
.perfressional-lists .item .image::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 88%;
  border-radius: .75rem;
}
.perfressional-lists .item .image .img-bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top center;
}
.perfressional-lists .contact {
  height: 1rem;
  align-items: center;
}
.perfressional-lists .contact .icon img {
  max-width: .85rem;
}
.perfressional-lists .item .text {
  width: calc(100% - 4.25rem);
  align-items: center;
}

@media screen and (max-width: 567.98px) {
  .perfressional-highlight .highlight-content .content-left {
    order: 2;
    width: 100%;
  }
  .perfressional-highlight .highlight-content .content-rigth {
    order: 1;
    width: 100%;
  }
  .perfressional-highlight .profile-detail {
    min-height: 17.75rem;
    padding: 2rem 1.5rem 4rem;
  }
}
@media screen and (max-width: 1199.98px) {
  .perfressional-lists .item { width: 33.33%; }
}
@media screen and (max-width: 991.98px) {
  .perfressional-lists .item { width: 50%; }
}
@media screen and (max-width: 575.98px) {
  .perfressional-lists .item { width: 100%; }
}


/* Password Level */
.password-level{display:block; width:100%;}
.password-level > .levels{
  /* width:calc(100% - 12rem); max-width: 12rem;  */
  display:flex; align-items:center; justify-content:start;
  margin:.4375rem 0 .3125rem 0; gap: .5rem
}
.password-level > .levels > *{
  display:block; width:100%; max-width: 3.125rem; height:.125rem;
  transition:background .25s;
}
.password-level > .levels.bradius > *{border-radius:.3rem;}
.password-level > p > span{transition:color .25s;}


/* Plus Toggle */
.plus-toggle {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
}
.plus-toggle div {
  position: absolute;
  transition: transform 0.3s ease;
  border-radius: 2px;
}
.plus-toggle div:first-child {
  width: 1.2rem;
  height: 2px;
}
.plus-toggle div:last-child {
  width: 2px;
  height: 1.2rem;
}
.content.active .plus-toggle div:last-child {
  transform: rotate(90deg);
}

/* Satisfaction Score */
.rating-circle {
  position: relative;
  cursor: pointer;
  margin-bottom: 0;
}
.rating-circle input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.rating-circle .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-weight: 700;
  transition: all 0.3s ease;
}


/* Timeline */
.timeline {
  position: relative;
  padding: 4rem 0;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}
.timeline .items {
  position: relative;
}
.timeline .item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4rem;
  position: relative;
}
.timeline .item:last-child {
  margin-bottom: 0;
}
.timeline .item .image,
.timeline .item .text {
  width: calc(50% - .5rem);
  position: relative;
}
.timeline .item:nth-child(odd) {
  flex-direction: row;
}
.timeline .item:nth-child(odd) .text {
  text-align: left;
  padding-left: 2rem;
}
.timeline .item:nth-child(odd) .image {
  text-align: right;
  padding-right: 2rem;
}
.timeline .item:nth-child(even) {
  flex-direction: row-reverse;
}
.timeline .item:nth-child(even) .text {
  text-align: right;
  padding-right: 2rem;
}
.timeline:not(.style-02) .item:first-child:nth-child(odd) .text {
  padding-top: 1.5rem !important;
}
.timeline .item:nth-child(even) .image {
  text-align: left;
  padding-left: 2rem;
}
.timeline .item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: .7rem;
  transform: translateX(-50%);
  width: 2rem;
  height: 2.813rem;
  background-image: url('../img/pattern/thai-pattern.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 1;
}
.timeline::after {
  content: '';
  position: absolute;
  bottom: -16px; 
  left: 50%;
  transform: translateX(-50%);
  width: 2rem;
  height: 2.813rem;
  background-image: url('../img/pattern/thai-pattern.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 1;
}
.timeline:not(.style-02) .item:first-child::before {
  top: 2.5rem;
}


.timeline.style-02 .item:nth-child(odd) {
  flex-direction: row-reverse;
}
.timeline.style-02 .item:nth-child(odd) .text {
  text-align: right;
  padding-right: 2rem;
}
.timeline.style-02 .item:nth-child(odd) .image {
  text-align: left;
  padding-left: 2rem;
}
.timeline.style-02 .item:nth-child(even) {
  flex-direction: row;
}
.timeline.style-02 .item:nth-child(even) .text {
  text-align: left;
  padding-left: 2rem;
}
.timeline.style-02 .item:nth-child(even) .image {
  text-align: right;
  padding-right: 2rem;
}
@media (max-width: 991px) {
  .timeline::before {
    left: 16px;
  }
  .timeline .item {
    flex-direction: column-reverse !important;
    margin-left: 48px;
    margin-bottom: 3rem;
  }
  .timeline .item .image,
  .timeline .item .text {
    width: 100%;
    text-align: left !important;
    padding: 0 !important;
  }
  .timeline .item .image {
    margin-top: 1rem;
  }
  .timeline .item::before {
    top: 0;
    left: -3rem;
    transform: none;
  }
  .timeline .item:first-child::before {
    top: 1.5rem;
  }
  .timeline::after {
    left: 16px;
  }
}

/* about */
.about-bottom {
  padding-bottom: 24vw;
}
@media screen and (max-width: 991.98px) {
  .about-bottom {
    padding-bottom: 64vw;
  }
}
@media screen and (max-width: 465.98px) {
  .about-bottom {
    padding-bottom: 113vw;
  }
}
.about-pattern .pattern{position:absolute; pointer-events:none; z-index: 1;}
.about-pattern .pattern.style-01{top:2rem; left:0;}
.about-pattern .pattern.style-01 img{width: 15vw; height: auto; max-width: 16.25rem;}
.about-pattern .pattern.style-02{bottom:6vw; right:0;}
.about-pattern .pattern.style-02 img{width: 15vw; height: auto; max-width: 16.25rem;}


/* List item pattern */
.list-item-pattern {
  position: relative;
  width: 60%;
  display: flex;
  margin-left: auto;
}
.list-item-pattern::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
}
.list-item-pattern .items {
  position: relative;
  padding: 4rem 1.5rem 1.5rem;
}
.list-item-pattern .item {
  position: relative;
  padding: 2rem .5rem;
  border-bottom: 2px solid transparent;
}
.list-item-pattern .item:last-child {
  border-bottom: none;
  padding-bottom: .5rem;
}
.list-item-pattern .item::before {
  content: '';
  position: absolute;
  left: -1.5rem;
  top: 3rem;
  transform: translateX(-50%);
  width: 2rem;
  height: 2.813rem;
  background-image: url('../img/pattern/thai-pattern.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 1;
}
.list-item-pattern .item .title {
  position: absolute;
  text-align: right;
  width: 40%;
  right: 108%;
}
.list-item-pattern .item .title .head,
.list-item-pattern .item .title .sub,
.list-item-pattern .item .title .head span,
.list-item-pattern .item .title .sub span {
  position: relative;
  font-weight: 600;
}
.list-item-pattern .item .title .head::before,
.list-item-pattern .item .title .sub::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  text-align: right;
  -webkit-text-stroke: 6px #FFFFFF;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.list-item-pattern .item .detail .list {
  display: flex;
  padding: .35rem 0;
}
.list-item-pattern .item .detail .list .marker {
  font-size: 3.625rem;
  font-weight: 699;
  font-style: italic;
  line-height: 1.25;
  width: 4rem;
  margin-right: .5rem;
  text-align: center;
}
.list-item-pattern .item .detail .list .text {
  width: calc(100% - 2rem);
}
@media screen and (max-width: 1199.98px) {
  .list-item-pattern .item .detail .list .marker {
    font-size: 2.5rem;
  }
  .list-item-pattern .item .title {
    right: 110%;
    top: 3.4rem;
  }
}
@media screen and (max-width: 991.98px) {
  .list-item-pattern {
    width: 70%;
  }
  .list-item-pattern .item .title {
    right: 116%;
  }
}
@media screen and (max-width: 565.98px) {
  .list-item-pattern {
    width: 100%;;
  }
  .list-item-pattern .item::before {
    top: 2rem;
  }
  .list-item-pattern .item .title {
    position: relative;
    top: unset;
    right: unset;
    text-align: left;
  }
  .list-item-pattern .item .title .head::before, 
  .list-item-pattern .item .title .sub::before {
    text-align: left;
    right: unset;
  }
  .list-item-pattern .item .detail .list .marker {
    font-size: 2rem;
    width: 2rem;
  }
}

/* Service Slider */
.service-slider {
  max-width: fit-content;
  margin: auto;
  overflow: hidden;
  min-height: 18.25rem; /* Prevent CLS: reserve space before Swiper init (card 13.25rem + padding 2.5rem*2) */
}
.service-slider .swiper {
  padding: 2.5rem 2rem;
}
.ss-card-01 .icon-container img {
  max-width: 100%;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.ss-card-01:hover .icon-container img.nohover {
  filter: unset;
}
/* .service-slider .arrows .arrow {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  top: calc(50% - 1.5rem);
  left: 0;
  z-index: 2;
} */
.service-slider .arrows > .arrow {
  position: absolute;
  top: calc(50% - 1.5rem);
  cursor: pointer;
  transition: all .3s ease-in-out;
  z-index: 2;
}
.service-slider .arrows > .arrow.arrow-prev {
  left: 0;
  padding: .75rem 1.95rem .75rem .5rem;
}
.service-slider .arrows > .arrow.arrow-next {
  right: 0;
  padding: .75rem .5rem .75rem 1.95rem;
}
.service-slider .arrows > .arrow:hover {
  opacity: .5;
}
.service-slider .swiper-pagination {
  bottom: .313rem;
}


/* Card Ribbon */
.card-ribbon {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
}
.card-ribbon .img-container {
  position: relative;
  padding: 115% 0 0 0;
  overflow: hidden;
  border-radius: 1.25rem;
  margin-left: 2rem;
}
.card-ribbon .img-container .img-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  top: 0;
  left: 0;
}
.card-ribbon .text-container {
  position: absolute;
  left: 0;
  bottom: 14%;
  width: 100%;
  padding: 1.25rem 2rem;
  text-align: center;
  border-radius: 1.25rem 0 0 0;
}
.card-ribbon .text-container::before,
.card-ribbon .text-container::after {
  content: '';
  position: absolute;
  width: 2rem;
  height: 2.5rem;
  bottom: -2.5rem;
  left: 0;
  border-bottom-left-radius: 1.25rem;
}
.card-ribbon .text-container::after {
  border-top-left-radius: 1.25rem;
}
.card-ribbon .text-container .title,
.card-ribbon .text-container .desc {
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}

/* CIF Table Styles */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cif-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-weight: 400;
}
.cif-table thead th {
  text-align: center;
  padding: 12px 10px;
  font-size: 1.25rem;
  font-weight: bold;
  border: 1px solid transparent;
}
.cif-table tbody td,
.cif-table tfoot td {
  padding: 12px 10px;
  border: 1px solid transparent;
}
.td-code {
  width: 60px;
  text-align: center;
}
.td-country-name {
  text-align: left;
}
.td-number {
  text-align: right;
}

/* Swiper */
.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  margin: 0 8px !important;
}