@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html, body{
  position: relative; padding:0; margin:0;
  font-size:16px; font-weight:300; line-height:1.6;
   font-family: "Kanit", sans-serif;
}

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

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


.text-center{text-align:center;}

/* Section & Container */
.section-padding{padding:4rem 0;}
@media screen and (max-width:1199.98px){
  .section-padding{padding:3.5rem 0;}
}
@media screen and (max-width:991.98px){
  .section-padding{padding:3rem 0;}
}
@media screen and (max-width:767.98px){
  .section-padding{padding:3rem 0;}
}
@media screen and (max-width:575.98px){
  .section-padding{padding:2.5rem 0;}
}
@media screen and (max-width:414.98px){
  .section-padding{padding:2rem 0;}
}


/* Typography */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .p, li, label{
   line-height:1.62;
}
h1, .h1{font-size:4rem!important; line-height:1.1!important;}
h2, .h2{font-size:3.5rem!important; line-height:1.1!important;}
h3, .h3{font-size:2.75rem!important; line-height:1.2!important;}
h4, .h4{font-size:2rem!important; line-height:1.4!important;}
h5, .h5{font-size:1.75rem!important; line-height:1.5!important;}
h6, .h6{font-size:1.25rem!important;}
p.lg, .p.lg, li.lg, label.lg{font-size:1.0625rem!important;}
p, .p, li, label{font-size:1rem!important;}
p.sm, .p.sm, li.sm, label.sm{font-size:.9375rem!important;}
p.xs, .p.xs, li.xs, label.xs{font-size:.875rem!important;}
p.xxs, .p.xxs, li.xxs, label.xxs{font-size:.8125rem!important;}
@media screen and (max-width:1199.98px){
h1, .h1{font-size:3.625rem!important; line-height:1.15!important;}
h3, .h3{font-size:2.5rem!important; line-height:1.25!important;}
h4, .h4{font-size:1.875rem!important; line-height:1.4!important;}
h5, .h5{font-size:1.625rem!important; line-height:1.55!important;}
}
@media screen and (max-width:991.98px){
h1, .h1{font-size:3.25rem!important; line-height:1.2!important;}
h3, .h3{font-size:2.25rem!important; line-height:1.3!important;}
h4, .h4{font-size:1.75rem!important; line-height:1.45!important;}
h5, .h5{font-size:1.5rem!important; line-height:1.62!important;}
}
@media screen and (max-width:767.98px){
h1, .h1{font-size:2.875rem!important; line-height:1.25!important;}
h3, .h3{font-size:2rem!important; line-height:1.35!important;}
h4, .h4{font-size:1.625rem!important; line-height:1.5!important;}
h5, .h5{font-size:1.375rem!important; line-height:1.62!important;}
}
@media screen and (max-width:575.98px){
h1, .h1{font-size:2.5rem!important; line-height:1.3!important;}
h3, .h3{font-size:1.75rem!important; line-height:1.4!important;}
p.lg, .p.lg, li.lg, label.lg{font-size:1rem!important;}
h6, .h6{font-size:1.125rem!important;}
}


/* line-height: 1; */
.leading-none {
  line-height: 1!important;
}

/* line-height: 1.25; */
.leading-tight {
  line-height: 1.25!important;
}

/* line-height: 1.375; */
.leading-snug {
  line-height: 1.375!important;
}

/* line-height: 1.5; */
.leading-normal {
  line-height: 1.5!important;
}

/* line-height: 1.625; */
.leading-relaxed {
  line-height: 1.625!important;
}

/* line-height: 2; */
.leading-loose {
  line-height: 2!important;
}


/* Special Card */
.ss-card{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 .25s;
}

/* Special Image */
.ss-img{display:block; position:relative; width:100%; padding:64% 0 0 0; overflow:hidden;}
.ss-img.square{padding:100% 0 0 0;}
.ss-img.horizontal{padding:50% 0 0 0;}
.ss-img.horizontal-02{padding:45% 0 0 0;}
.ss-img.vertical{padding:120% 0 0 0;}
.ss-img.vertical-02{padding:140% 0 0 0;}
.ss-img > .img-bg{
    position:absolute; top:0; bottom:0; left:0; right:0; background-size:cover;
    background-position:center; transition:transform .75s, filter .5s;
}
.ss-card:hover .ss-img:not(.no-hover) > .img-bg,
.ss-img:not(.no-hover):hover > .img-bg{transform:scale(1.05);}


/* --- Micro Spacing (0 - 10px) --- */
.gap-0      { gap: 0px; }
.gap-px     { gap: 1px; }
.gap-0\.5   { gap: 0.125rem; } /* 2px */
.gap-1      { gap: 0.25rem; }  /* 4px */
.gap-1\.5   { gap: 0.375rem; } /* 6px */
.gap-2      { gap: 0.5rem; }   /* 8px */
.gap-2\.5   { gap: 0.625rem; } /* 10px */

/* --- Small Spacing (12px - 20px) --- */
.gap-3      { gap: 0.75rem; }  /* 12px */
.gap-3\.5   { gap: 0.875rem; } /* 14px */
.gap-4      { gap: 1rem; }     /* 16px */
.gap-5      { gap: 1.25rem; }  /* 20px */

/* --- Medium Spacing (24px - 48px) --- */
.gap-6      { gap: 1.5rem; }   /* 24px */
.gap-7      { gap: 1.75rem; }  /* 28px */
.gap-8      { gap: 2rem; }     /* 32px */
.gap-9      { gap: 2.25rem; }  /* 36px */
.gap-10     { gap: 2.5rem; }   /* 40px */
.gap-11     { gap: 2.75rem; }  /* 44px */
.gap-12     { gap: 3rem; }     /* 48px */

/* --- Large Spacing (56px - 96px) --- */
.gap-14     { gap: 3.5rem; }   /* 56px */
.gap-16     { gap: 4rem; }     /* 64px */
.gap-20     { gap: 5rem; }     /* 80px */
.gap-24     { gap: 6rem; }     /* 96px */

/* --- Extra Large Spacing (100px+) --- */
.gap-28     { gap: 7rem; }     /* 112px */
.gap-32     { gap: 8rem; }     /* 128px */
.gap-36     { gap: 9rem; }     /* 144px */
.gap-40     { gap: 10rem; }    /* 160px */
.gap-44     { gap: 11rem; }    /* 176px */
.gap-48     { gap: 12rem; }    /* 192px */
.gap-52     { gap: 13rem; }    /* 208px */
.gap-56     { gap: 14rem; }    /* 224px */
.gap-60     { gap: 15rem; }    /* 240px */
.gap-64     { gap: 16rem; }    /* 256px */
.gap-72     { gap: 18rem; }    /* 288px */
.gap-80     { gap: 20rem; }    /* 320px */
.gap-96     { gap: 24rem; }    /* 384px */

/* 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;}

.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;}


/* 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:1px solid transparent; padding:.625rem 1.25rem .625rem 1.25rem;
  text-decoration:none;  border-radius:1000em; min-width:9rem; text-align:center;
  cursor:pointer; transition:all .25s;
}
.btn.btn-action.btn-sm{
  padding:.25rem 1.25rem .25rem 1.25rem; min-width:8rem; font-weight:300;
  border-radius:1000em;
}


/* Thin (100) */
.font-thin {
  font-weight: 100;
}

/* Extra Light (200) */
.font-extralight {
  font-weight: 200;
}

/* Light (300) */
.font-light {
  font-weight: 300;
}

/* Normal (400) - ค่าเริ่มต้น */
.font-normal {
  font-weight: 400;
}

/* Medium (500) */
.font-medium {
  font-weight: 500;
}

/* Semibold (600) */
.font-semibold {
  font-weight: 600;
}

/* Bold (700) */
.font-bold {
  font-weight: 700;
}

/* Extra Bold (800) */
.font-extrabold {
  font-weight: 800;
}

/* Black (900) */
.font-black {
  font-weight: 900;
}



.ss-card-01 .ss-img{
  border-radius:.4375rem;
}

.ss-card-02 .ss-img{
  border-radius: .75rem;
}
.ss-card .category{
  text-transform:uppercase;
}
.ss-card-02 .title{
  -webkit-line-clamp:2; min-height:3.239rem;
}
.ss-card-02 .desc{
  -webkit-line-clamp:3; min-height:4.85rem;
}
@media screen and (max-width:640.98px){
  .ss-card-02 .title, .ss-card-02 .desc{
    min-height:unset;
  }
}


.bradius-01{border-radius:.75rem;}


@media (min-width: 0px) {
    /* sm:mt Classes */
    .xs\:mt-1 { margin-top: 0.25rem; } 
    .xs\:mt-2 { margin-top: 0.5rem; }
    .xs\:mt-4 { margin-top: 1rem; }
    .xs\:mt-8 { margin-top: 2rem; }
    .xs\:mt-12 { margin-top: 3rem; }
    /* ... sm:mt-16, sm:mt-20, etc. */
}

@media (min-width: 640px) {
    /* sm:mt Classes */
    .sm\:mt-1 { margin-top: 0.25rem; } 
    .sm\:mt-2 { margin-top: 0.5rem; }
    .sm\:mt-4 { margin-top: 1rem; }
    .sm\:mt-8 { margin-top: 2rem; }
    .sm\:mt-12 { margin-top: 3rem; }
    /* ... sm:mt-16, sm:mt-20, etc. */
}

@media (min-width: 768px) {
    /* md:mt Classes */
    .md\:mt-1 { margin-top: 0.25rem; } 
    .md\:mt-2 { margin-top: 0.5rem; }
    .md\:mt-4 { margin-top: 1rem; }
    .md\:mt-8 { margin-top: 2rem; }
    .md\:mt-12 { margin-top: 3rem; }
    /* ... md:mt-16, md:mt-20, etc. */
}

@media (min-width: 1024px) {
    /* lg:mt Classes */
    .lg\:mt-1 { margin-top: 0.25rem; } 
    .lg\:mt-2 { margin-top: 0.5rem; }
    .lg\:mt-4 { margin-top: 1rem; }
    .lg\:mt-8 { margin-top: 2rem; }
    .lg\:mt-12 { margin-top: 3rem; }
    /* ... lg:mt-16, lg:mt-20, etc. */
}