.elementor-kit-10{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#FFFFFF;--e-global-color-accent:#61CE70;--e-global-color-39eec29:#000000;--e-global-color-92bf6b9:#00001E;--e-global-color-f779b44:#000040;--e-global-color-3b0c939:#ACACAC33;--e-global-color-4192ee0:#ACACAC33;--e-global-color-a5b8472:#FA2F2F;--e-global-color-18cb536:#7A0000;--e-global-color-f470ee9:#F80F0F;--e-global-color-84afa6d:#990000;--e-global-color-c11a2cb:#FFD057;--e-global-color-3c6a015:#744100;--e-global-color-f7c2e61:#FFBE17;--e-global-color-32030ff:#AD6100;--e-global-color-295b9a0:#353535;--e-global-color-1193166:#000000;--e-global-color-df6fac7:#FF2525;--e-global-color-0823b2f:#01FF00;--e-global-color-28e6239:#FA0101;--e-global-color-70e2447:#1D1D1D;--e-global-color-fd0b1dc:#0000B2;--e-global-color-5892ed7:#3A3A3A;--e-global-color-253a157:#FF6A6A;--e-global-color-983f460:#FF1D1D;--e-global-color-6543bbb:#A60000;--e-global-color-e3586f0:#FF4545;--e-global-color-c42b9ef:#DA0000;--e-global-color-2066920:#FF2626;--e-global-color-afb8d69:#FFFFFF;--e-global-color-f439d6f:#FFFFFF;--e-global-color-55490a9:#363636;--e-global-color-baae0a6:#FF6A6A;--e-global-color-1a7b3f8:#FF1D1D;--e-global-color-15dbf2a:#FFFFFF;--e-global-color-9001af2:#FFFFFF;--e-global-color-fb679af:#FFFFFF;--e-global-color-8f05563:#0E0E0E;--e-global-color-c7b3ea2:#FFFFFF;--e-global-color-8820b38:#ADADAD;--e-global-color-ba7dfde:#B2B2B2;--e-global-color-047708d:#505050;--e-global-color-d07fd5a:#262626;--e-global-color-5debaf1:#F70F52;--e-global-color-77a249f:#880000;--e-global-color-77edb93:#FFFFFF;--e-global-color-3338f8a:#FFFFFF;--e-global-color-f4e608c:#000040;--e-global-color-abee314:#00001E;--e-global-color-fd5a110:#1D1D1D;--e-global-color-f0056bf:#00001E;--e-global-color-6a7a53d:#000040;--e-global-color-5ed522c:#0000E9;--e-global-color-1a5a206:#F03636;--e-global-color-945008f:#FFFFFF;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-39eec29 );font-family:"Noto Sans Thai", Sans-serif;font-size:16px;}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.elementor-kit-10 a{color:var( --e-global-color-0823b2f );}.elementor-kit-10 a:hover{color:var( --e-global-color-28e6239 );}.elementor-kit-10 h1{font-size:24px;line-height:1.5em;}.elementor-kit-10 h2{font-size:23px;line-height:1.5em;}.elementor-kit-10 h3{font-size:20px;line-height:1.5em;}.elementor-kit-10 h4{font-size:21px;line-height:1.5em;}.elementor-kit-10 h5{font-size:20px;line-height:1.5em;}.elementor-kit-10 h6{font-size:19px;line-height:1.5em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1120px;}.e-con{--container-max-width:1120px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-10 h1{line-height:1.4em;}.elementor-kit-10 h2{line-height:1.4em;}.elementor-kit-10 h3{line-height:1.4em;}.elementor-kit-10 h4{line-height:1.4em;}.elementor-kit-10 h5{line-height:1.4em;}.elementor-kit-10 h6{line-height:1.4em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*side menu*/
.cs-sidemenu .dialog-close-button{
    border-radius: 30px;
    padding: 5px;
}

.cs-sidemenu .dialog-widget-content:before{
    background:
    linear-gradient(45deg,
    transparent 0%,
    var(--e-global-color-df6fac7) 50%,
    transparent 100%);
    width: 3px;
    position: absolute;
    right: 0;
    top: 50%;
    height: 100%;
    transform: translateY(-50%);
    content: "";
    z-index: 999;
}

/*Border-slice*/
.slice-box{
    border-image:
    linear-gradient(90deg,
    var(--e-global-color-c30d4df),
    var(--e-global-color-e55e28a) 30%,
    var(--e-global-color-30861e5) 50%,
    var(--e-global-color-a46cec9) 70%,
    var(--e-global-color-962e054)) 1;
}

/*Page & Post title text gradient*/
.title-tgr h1.elementor-heading-title,
.title-tgr h2.elementor-heading-title,
.title-tgr h3.elementor-heading-title,
.title-tgr h4.elementor-heading-title,
.title-tgr h5.elementor-heading-title{
    background-image: linear-gradient(to bottom, 
    var(--e-global-color-253a157) 0%,
    var(--e-global-color-983f460) 50%,
    var(--e-global-color-6543bbb) 100%) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*Table*/
.divtable{
  overflow-x: auto;
}

.divtable th, td, tbody{
    color: var(--e-global-color-text);
    background-color: transparent !important;
    text-align: center;
    vertical-align: middle;
}

/*Btn effect*/
@keyframes wink-wink{
    0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    }
    
    100% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    }
}

.wink-wink a{
    animation: wink-wink .4s linear infinite alternate;
}

/*Archive Posts Pagination*/
.custom-pgn .page-numbers {
    background: 
    linear-gradient(180deg,
    var(--e-global-color-047708d) 30%,
    var(--e-global-color-d07fd5a));
    display: inline-block;
    margin: 5px 0px;
    padding: 10px 10px;
    border-radius: 10px;
}

/*Archive Posts Pagination hover*/
.custom-pgn .page-numbers:hover {
    background:
    linear-gradient(90deg,
    var(--e-global-color-5debaf1) 0%,
    var(--e-global-color-77a249f) 100%);
    text-shadow:
    0 0 5px var(--e-global-color-77edb93),
    0 0 10px var(--e-global-color-3338f8a);
}

/*Archive Posts Pagination active*/
.custom-pgn nav .current{
    background:
    linear-gradient(90deg,
    var(--e-global-color-5debaf1) 0%,
    var(--e-global-color-77a249f) 100%);
    text-shadow:
    0 0 5px var(--e-global-color-77edb93),
    0 0 10px var(--e-global-color-3338f8a);
}

/*cat btn*/
.cat-btn .elementor-widget-container h5{
    font-family: var(--e-global-typography-primary-font-family);
    font-weight: var(--e-global-typography-primary-font-weight);
    color: var(--e-global-color-primary);
}

.cat-btn .elementor-widget-container ul{
    padding: 0;
    margin: 0;
}

@media screen and (max-width: 1024px){
    .cat-btn .elementor-widget-container ul{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.cat-btn .elementor-widget-container li{
    list-style: none;
     padding: 0;
     margin: 0;
}

/*cat btn normal*/
.cat-btn .elementor-widget-container ul li a{
    text-align: center;
    padding: 10px 3px;
    margin: 0px 5px;
    margin-bottom: 10px;
    display: block;
    color: var(--e-global-color-text);
    background: var(--e-global-color-55490a9);
    border-radius: 8px;
    font-size: 16px;
}

/*cat btn hover*/
.cat-btn .elementor-widget-container ul li a:hover{
    background: linear-gradient(180deg,
    var(--e-global-color-baae0a6),
    var(--e-global-color-1a7b3f8));
    text-shadow:
    0 0 5px var(--e-global-color-15dbf2a),
    0 0 10px var(--e-global-color-9001af2);
}

/*cat btn active*/
.cat-btn .elementor-widget-container .current-cat a{
    background: linear-gradient(180deg,
    var(--e-global-color-baae0a6),
    var(--e-global-color-1a7b3f8));
    text-shadow:
    0 0 5px var(--e-global-color-15dbf2a),
    0 0 10px var(--e-global-color-9001af2);
}

/*Footer menu*/
.ft-menu-left {
    display: flex;
    flex: 1;
    z-index: 2;
    padding-bottom: 6px;
    background: 
    linear-gradient(180deg,
    var(--e-global-color-f0056bf),
    var(--e-global-color-6a7a53d));
    border-top: 3px solid 
    var(--e-global-color-5ed522c);
    transition: -webkit-filter .2s;
    transition: filter .2s;
    transition: filter .2s, -webkit-filter .2s;
    border-top-left-radius: 10px;
    border-top-right-radius: 30px;
}

.ft-menu-mid {
  position: absolute;
  width: 60px;
  height: 60px;
  margin: 0 8px 16px;
  background:
  linear-gradient(160deg,
  var(--e-global-color-f0056bf),
  var(--e-global-color-6a7a53d));
  border: 2px solid 
  var(--e-global-color-5ed522c);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--e-global-color-1a5a206);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 3;
}

.ft-menu-mid-img {
    position: absolute;
    width: 65px !important;
    max-width: inherit !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -10px;
}

.footer-shape {
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  width: 110%;
  height: auto;
  position: relative;
  top: 0;
}

.footer-shape svg {
  width: 100%;
  height: 100%;
}

.ft-menu-right {
    display: flex;
    flex: 1;
    z-index: 2;
    padding-bottom: 6px;
    background: 
    linear-gradient(180deg,
    var(--e-global-color-f0056bf),
    var(--e-global-color-6a7a53d));
    border-top: 3px solid 
    var(--e-global-color-5ed522c);
    transition: -webkit-filter .2s;
    transition: filter .2s;
    transition: filter .2s, -webkit-filter .2s;
    border-top-right-radius: 10px;
    border-top-left-radius: 30px;
}

/* =========================================================
   ONLINE | HOT badge — Elementor-ready version
   วิธีใช้:
   1) วางโค้ดนี้ทั้งหมดใน Site Settings > Custom CSS
      (หรือ Appearance > Customize > Additional CSS)
   2) เลือก Image Widget แต่ละรูป > แท็บ Advanced > CSS Classes
      แล้วใส่คลาสตามลำดับ เช่น
        รูปที่ 1: img-fire img-fire-1
        รูปที่ 2: img-fire img-fire-2
        รูปที่ 3: img-fire img-fire-3
      ... ไปเรื่อยๆ ถึง img-fire-6
   3) ถ้ามีมากกว่า 6 รูป ให้ copy บล็อก .img-fire-7 เพิ่มเอง
      (ดูตัวอย่างวิธีเพิ่มด้านล่างสุดของไฟล์)
   ========================================================= */

/* ---------- โครงสร้างหลัก (ใส่ครั้งเดียว ใช้ร่วมกันทุกรูป) ---------- */
.img-fire {
  position: relative;
  display: inline-block;
  isolation: isolate;
  z-index: 1;
}
.img-fire > img {
  width: 100%;
  height: auto;
  display: block;
}

.img-fire::before,
.img-fire::after {
  position: absolute;
  top: 8px;
  padding: 4px 10px 4px 20px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  border-radius: 999px;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
}

/* ป้ายสีเขียว (ตัวเลขคนออนไลน์) */
.img-fire::before {
  left: 8px;
  padding-left: 20px;
  color: #fff;
  background-color: #0b6f2d;
  border: 1px solid #063f1a;
  box-shadow: 0 2px 6px rgba(0,0,0,.7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8V22h19.2v-2.8c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position: 6px center;
  content: "1,245";
  animation: onlineBase 14s infinite steps(1,end);
}

/* ป้าย HOT สีชมพู/แดง */
.img-fire::after {
  right: 8px;
  content: "HOT";
  color: #fff;
  background-color: #f23062;
  box-shadow: 0 0 6px rgba(255,80,80,.9);
  /* ⚠️ เปลี่ยนเป็น URL เต็มของเว็บคุณ เช่น https://yourdomain.com/wp-content/uploads/2026/07/fire01.gif */
  background-image: url('https://yourdomain.com/wp-content/uploads/2026/07/fire01.gif');
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: 5px -2px;
}

/* ---------- ตัวเลขสุ่มพื้นฐาน (fallback ถ้าไม่ได้ใส่คลาสลำดับ) ---------- */
@keyframes onlineBase {
  0%   { content: "1,245"; }
  25%  { content: "1,258"; }
  50%  { content: "1,239"; }
  75%  { content: "1,266"; }
  100% { content: "1,245"; }
}

/* ---------- ตัวเลขแยกตามรูป (ใช้คลาส img-fire-1 ถึง img-fire-6) ---------- */
.img-fire-1::before { animation: online1 14s infinite steps(1,end); }
.img-fire-2::before { animation: online2 14s infinite steps(1,end); }
.img-fire-3::before { animation: online3 14s infinite steps(1,end); }
.img-fire-4::before { animation: online4 14s infinite steps(1,end); }
.img-fire-5::before { animation: online5 14s infinite steps(1,end); }
.img-fire-6::before { animation: online6 14s infinite steps(1,end); }

@keyframes online1 { 0%{content:"1,248";} 25%{content:"1,261";} 50%{content:"1,254";} 75%{content:"1,273";} 100%{content:"1,248";} }
@keyframes online2 { 0%{content:"2,486";} 25%{content:"2,503";} 50%{content:"2,492";} 75%{content:"2,518";} 100%{content:"2,486";} }
@keyframes online3 { 0%{content:"1,892";} 25%{content:"1,905";} 50%{content:"1,884";} 75%{content:"1,913";} 100%{content:"1,892";} }
@keyframes online4 { 0%{content:"3,102";} 25%{content:"3,128";} 50%{content:"3,111";} 75%{content:"3,145";} 100%{content:"3,102";} }
@keyframes online5 { 0%{content:"2,301";} 25%{content:"2,322";} 50%{content:"2,314";} 75%{content:"2,337";} 100%{content:"2,301";} }
@keyframes online6 { 0%{content:"1,954";} 25%{content:"1,968";} 50%{content:"1,943";} 75%{content:"1,979";} 100%{content:"1,954";} }

/* ---------- Responsive: จอมือถือ ---------- */
@media (max-width: 480px) {
  .img-fire::before,
  .img-fire::after {
    top: 6px;
    font-size: 7px;
    min-height: 14px;
    padding: 2px 7px 2px 18px;
  }
  .img-fire::before {
    background-size: 10px 10px;
    background-position: 5px center;
  }
  .img-fire::after {
    background-size: 11px 11px;
    background-position: 4px center;
  }
}

/* =========================================================
   วิธีเพิ่มรูปที่ 7 เป็นต้นไป (ตัวอย่าง)
   -----------------------------------------------------------
   .img-fire-7::before { animation: online7 14s infinite steps(1,end); }
   @keyframes online7 {
     0%{content:"2,001";} 25%{content:"2,015";}
     50%{content:"1,998";} 75%{content:"2,022";}
     100%{content:"2,001";}
   }
   แล้วใส่คลาส "img-fire img-fire-7" ในรูปที่ 7
   ========================================================= *//* End custom CSS */