/*
Welcome to Custom CSS!

To learn how this works, see http://wp.me/PEmnE-Bt
*/
.imgtransparent {
	opacity: 1;
/* สำหรับ IE8 ขึ้นไป */
}


.imgtransparent:hover {
	opacity: .5;
/* สำหรับ IE8 ขึ้นไป */
}
/*ภาพจากเมื่อคลิก */


.polaroid {
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	text-align: center;
/*เงาใต้ภาพ */
}


/* ตั้งค่าส่วนของเนื้อหา */
.content {
  height: 100vh;
  background-image: url('path/to/background-image.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}

/* ตั้งค่าการเลื่อนหน้าจอ */
.content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  pointer-events: none;
  z-index: -1;
}

/* แสดงเนื้อหาในส่วนของเนื้อหา */
.content .content-inner {
  position: relative;
  z-index: 1;
  padding: 20px;
  color: #ffffff;
}

/* ปรับแต่งตัวอักษรและระยะห่างของเนื้อหา */
.content p {
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 10px;
}


/* เทเบิ้ลที่อยู่บนเลเยอร์หลัก */
.table {
  position: relative;
  z-index: 1;
}

/* เทเบิ้ลที่ซ้อนอยู่บนเลเยอร์ */
.overlay-table {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* ตัวอย่างการปรับแต่งสีพื้นหลังและสีตัวอักษรของเทเบิ้ลที่ซ้อนอยู่บนเลเยอร์ */
.overlay-table {
  background-color: rgba(0, 0, 0, 0);
  color: #ffffff;
}



/* ตัวอย่างโค้ด CSS เพื่อใส่เงาลงไปหลังตาราง */

.table-with-shadow {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}


/* กำหนดขนาดและตำแหน่งของภาพ และกำหนดแสดงผลแบบพลิกกลับด้าน */

.flip-container {
  perspective: 1000px;
  display: inline-block;
}

.flip-image {
  width: 300px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.flip-container:hover .flip-image {
  transform: rotateY(180deg);
}


/* กดคลิกที่ภาพแล้วมีแสงขึ้ร imgtransparent size-large */


/* กำหนดคลาสสำหรับภาพที่ต้องการให้มีขนาดใหญ่ขึ้นเมื่อเมาส์วาง */
.enlarge-image:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease-in-out;
}

.enlarge-image-2:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}


/* ลดช่องว่างระหว่างคอลัมน์ใน WordPress */
.column {
  margin-right: 0px;
  margin-left: 0px;
}

/* ลดช่องว่างระหว่างคอลัมน์ใน Gutenberg */
.wp-block-column {
  margin-right: 0px;
  margin-left: 0px;
}


/* ภาพเปลี่ยนเมื่อวางเมาส์บนภาพ */
.custom-cover:hover .custom-image {
    opacity: 1;
}
.custom-image {
    margin: 0;
    opacity: 0;
    transition: 0.3s ease-in-out;
}

/* ภาพไม่มีขอบ */
.sqs-block.image-block {
 padding-top: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
 padding-right: 0px;
}


/* ตารางไม่มีขอบ*/
.noBorder {
    border: 0px;
    padding:0; 
    margin:0;
  	border-spacing: 0;
    border-collapse: collapse;
	  box-sizing: border-box;
}

.noBorder-2 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ข้อความอยู่ตรงกลาง */
.font-cen {
  text-align: center;
  }


/* ภาพโค้ง */
.border
{ border:8px 
padding:20px 80px; 
border-radius:35px; }



/* เปลี่ยนเรียงภาพเป็นสแต็กเมื่อแสดงบนอุปกรณ์มือถือ */
@media (max-width: 767px) {
  .image-container {
    display: flex;
    flex-direction: column;
  }

  .image-container img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }
}


/*ดุ๊กดิ๊กเบาๆ ทั้งเวลา (สุภาพ ไม่เวียนหัว)*
 *  ใช้ img class="wiggle-soft"*/
@keyframes wiggleSoft {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-0.8deg); }
}
img.wiggle-soft {
  animation: wiggleSoft 2.6s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
/* เคารพผู้ใช้ที่ปิดแอนิเมชัน */
@media (prefers-reduced-motion: reduce) {
  img.wiggle-soft { animation: none; }
}


/*ลอยขึ้น–ลงนุ่มๆ (แนว “float”)
 ใช้ img class="floaty"*/
@keyframes floaty {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
img.floaty {
  animation: floaty 4s ease-in-out infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { img.floaty { animation: none; } }



/*ปุ่มสั่น */
@keyframes shake-soft {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-2px); }
}
.btn-shake {
  animation: shake-soft 1.2s ease-in-out infinite;
}

/*ปุ่มสั่น 2*/
@keyframes shake-cta {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.btn-shake-periodic {
  animation: shake-cta 0.8s ease-in-out infinite;
  animation-delay: 2s; /* เริ่มสั่นหลังโหลด */
}


/* ===== Menu: ขาวล้วน + เส้นใต้ส้มตอน hover (เวอร์ชันเข้มงวด) ===== */

/* ลิงก์เมนูหลัก (Elementor / ธีมทั่วไป) */
.elementor-nav-menu--main .elementor-item,
.main-navigation > ul > li > a,
.main-header-menu > li > a,
.site-header .menu > li > a {
  background: #fff !important;
  color: #c4510d !important;
  border: none !important;
  outline: 0;
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: none !important;
  text-decoration: none;

  /* เส้นใต้ส้ม (เริ่มซ่อน) */
  background-image: linear-gradient(#c4510d, #c4510d);
  background-repeat: no-repeat;
  background-position: 0 100%;   /* ชิดด้านล่าง */
  background-size: 0 2px;        /* ยังไม่แสดง */
  transition: background-size .18s ease, color .18s ease, transform .12s ease;
}

/* โชว์เส้นใต้ตอน hover */
.elementor-nav-menu--main .elementor-item:hover,
.main-navigation > ul > li > a:hover,
.main-header-menu > li > a:hover,
.site-header .menu > li > a:hover {
  background-size: 100% 2px;
}

/* คลิกแล้วขยับลงเล็กน้อย */
.elementor-nav-menu--main .elementor-item:active,
.main-navigation > ul > li > a:active,
.main-header-menu > li > a:active,
.site-header .menu > li > a:active {
  transform: translateY(1px);
}

/* โฟกัสจากคีย์บอร์ด (ใช้ :focus แทน :focus-visible เพื่อผ่านตัวตรวจของ WP) */
.elementor-nav-menu--main .elementor-item:focus,
.main-navigation > ul > li > a:focus,
.main-header-menu > li > a:focus,
.site-header .menu > li > a:focus {
  box-shadow: 0 0 0 3px rgba(196,81,13,.28);
}

/* ตัด pseudo-element ที่ธีมอาจเติม */
.elementor-nav-menu--main .elementor-item:before,
.elementor-nav-menu--main .elementor-item:after,
.main-navigation > ul > li > a::before,
.main-navigation > ul > li > a::after,
.main-header-menu > li > a::before,
.main-header-menu > li > a::after,
.site-header .menu > li > a::before,
.site-header .menu > li > a::after {
  content: none !important;
}

/* Submenu */
.main-navigation .sub-menu a,
.main-header-menu .sub-menu a,
.elementor-nav-menu--dropdown a,
.site-header .sub-menu a {
  background: #fff !important;
  color: #333 !important;
  border: none !important;
  border-radius: 6px;
  padding: 8px 12px;
}
.main-navigation .sub-menu a:hover,
.main-header-menu .sub-menu a:hover,
.elementor-nav-menu--dropdown a:hover,
.site-header .sub-menu a:hover {
  background: #c4510d !important;
  color: #fff !important;
}

/* มือถือ */
@media (max-width: 1024px){
  .elementor-nav-menu--dropdown a,
  .main-navigation .sub-menu a,
  .main-header-menu .sub-menu a {
    background: transparent;
    border: none;
  }
}

/* ===== ปรับขนาดและน้ำหนักฟอนต์ของเมนูหลัก ===== */

.elementor-nav-menu--main .elementor-item,
.main-navigation > ul > li > a,
.main-header-menu > li > a,
.site-header .menu > li > a {
  font-size: 16px !important;   /* ขนาดตัวอักษร ปรับได้: 15-18px */
  font-weight: 600 !important;  /* น้ำหนักตัวอักษร: 400=ปกติ, 500=กลาง, 600=หนาเล็กน้อย */
  letter-spacing: 0.3px;        /* ระยะห่างระหว่างตัวอักษรนิดหน่อยให้อ่านง่าย */
  line-height: 1.5;             /* ความสูงบรรทัดให้ดูโปร่งขึ้น */
  font-family: 'Prompt', sans-serif !important; /* ตัวอย่างฟอนต์ไทย-อังกฤษอ่านง่าย */
}


/* ===== Dropdown Menu – Minimal Smooth Style (no border, no bullet) ===== */
:root{
  --tdg-brand: #f07335;
  --tdg-bg: #ffffff;
  --tdg-text: #333333;
  --tdg-muted: #666666;
  --tdg-shadow: 0 18px 42px rgba(0,0,0,.08);
}

/* กล่องเมนูย่อยหลัก */
@media (min-width: 1025px){
  .elementor-nav-menu--main .sub-menu,
  .main-navigation .sub-menu,
  .main-header-menu .sub-menu,
  .site-header .sub-menu {
    background: var(--tdg-bg);
    border: none;                       /* ❌ ไม่มีเส้นขอบ */
    border-radius: 14px;                /* มุมมนเล็กน้อย */
    padding: 8px;
    box-shadow: var(--tdg-shadow);
    overflow: hidden;
    transform: translateY(8px);
    opacity: 0;
    visibility: hidden;
    transition: transform .18s ease, opacity .18s ease, visibility 0s linear .18s;
  }

  /* แสดงเมนูย่อยตอน hover */
  li.menu-item-has-children:hover > .sub-menu,
  .menu-item:hover > .sub-menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform .18s ease, opacity .18s ease;
  }

  /* ปิดลูกศรสามเหลี่ยมด้านบน */
  .elementor-nav-menu--main .sub-menu::before,
  .main-navigation .sub-menu::before,
  .main-header-menu .sub-menu::before,
  .site-header .sub-menu::before {
    content: none !important;
  }

  /* ลิงก์ใน dropdown */
  .elementor-nav-menu--main .sub-menu a,
  .main-navigation .sub-menu a,
  .main-header-menu .sub-menu a,
  .site-header .sub-menu a {
    display: flex;
    align-items: center;
    font-size: 16px !important;
    color: var(--tdg-text) !important;
    line-height: 1.6;
    padding: 10px 16px !important;
    border-radius: 8px;
    background: transparent;
    text-decoration: none;
    letter-spacing: 0.2px;
    transition: background .18s ease, color .18s ease, padding .16s ease;
  }

  /* ❌ ไม่มีจุดหน้าข้อความ */
  .elementor-nav-menu--main .sub-menu a::before,
  .main-navigation .sub-menu a::before,
  .main-header-menu .sub-menu a::before,
  .site-header .sub-menu a::before {
    content: none !important;
  }

  /* Hover แบบนุ่ม */
  .elementor-nav-menu--main .sub-menu a:hover,
  .elementor-nav-menu--main .sub-menu a:focus,
  .main-navigation .sub-menu a:hover,
  .main-navigation .sub-menu a:focus,
  .main-header-menu .sub-menu a:hover,
  .main-header-menu .sub-menu a:focus,
  .site-header .sub-menu a:hover,
  .site-header .sub-menu a:focus {
    background: rgba(240,115,53,.08);   /* พื้นอ่อนส้มจาง */
    color: var(--tdg-brand) !important;
  }

  /* active page */
  .elementor-nav-menu--main .sub-menu .current-menu-item > a,
  .main-navigation .sub-menu .current-menu-item > a,
  .main-header-menu .sub-menu .current-menu-item > a,
  .site-header .sub-menu .current-menu-item > a {
    background: rgba(240,115,53,.10);
    color: var(--tdg-brand) !important;
    font-weight: 600;
  }
}

/* มือถือ / off-canvas */
@media (max-width: 1024px){
  .elementor-nav-menu--dropdown a {
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding: 12px 14px !important;
    border-radius: 8px;
  }
  .elementor-nav-menu--dropdown a:hover,
  .elementor-nav-menu--dropdown a:focus {
    background: rgba(240,115,53,.08) !important;
    color: var(--tdg-brand) !important;
  }
}

/* ลด motion */
@media (prefers-reduced-motion: reduce){
  .elementor-nav-menu--main .sub-menu,
  .main-navigation .sub-menu,
  .main-header-menu .sub-menu,
  .site-header .sub-menu {
    transition: none !important;
  }
}

/* ===== ปรับ Hover ให้พื้นส้มเข้ม + ตัวอักษรสีขาว ===== */
@media (min-width: 1025px){
  .elementor-nav-menu--main .sub-menu a:hover,
  .elementor-nav-menu--main .sub-menu a:focus,
  .main-navigation .sub-menu a:hover,
  .main-navigation .sub-menu a:focus,
  .main-header-menu .sub-menu a:hover,
  .main-header-menu .sub-menu a:focus,
  .site-header .sub-menu a:hover,
  .site-header .sub-menu a:focus {
    background: #f07335 !important;  /* พื้นหลังส้ม TDG */
    color: #ffffff !important;       /* ตัวอักษรขาว อ่านง่าย */
    transition: background .2s ease, color .2s ease;
  }

  /* ตัว active page ด้วยให้เหมือน hover */
  .elementor-nav-menu--main .sub-menu .current-menu-item > a,
  .main-navigation .sub-menu .current-menu-item > a,
  .main-header-menu .sub-menu .current-menu-item > a,
  .site-header .sub-menu .current-menu-item > a {
    background: #f07335 !important;
    color: #ffffff !important;
    font-weight: 600;
  }
}

/* มือถือด้วย */
@media (max-width: 1024px){
  .elementor-nav-menu--dropdown a:hover,
  .elementor-nav-menu--dropdown a:focus {
    background: #f07335 !important;
    color: #ffffff !important;
  }
}

/* ===== ปิด preloader / spinner / page transition ทั้งหมด ===== */

/* ตัว overlay หรือ animation ตอนโหลดหน้า */
.e-page-transition,
.elementor-loading,
.elementor-spinner,
.page-preloader,
.page-loader,
.preloader,
#preloader,
#page-preloader,
.site-preloader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* กันไม่ให้ html/body ถูกล็อก scroll หรือคลิกระหว่างโหลด */
html.e-page-transition,
body.e-page-transition,
html.is-loading,
body.is-loading {
  overflow: auto !important;
  pointer-events: auto !important;
}

/* ลบ animation เฟดเข้า/ออกจาก elementor ถ้ามี */
.elementor-animate-fade-in,
.elementor-animate-fade-out,
.elementor-animate-fade {
  animation: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* บางธีมใช้ pseudo element เพื่อทำ overlay */
body::before,
body::after,
html::before,
html::after {
  animation: none !important;
  content: none !important;
  display: none !important;
}


/* ตัดช่องว่างใต้ Header และบน Section แรกของหน้า Home */
.home .elementor-location-header,
.home header#masthead,
.home .site-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.home main,
.home .site-main,
.home #content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* กันไว้: ถ้า Section แรกมี margin/padding ติดมา */
.home .elementor-section:first-of-type,
.home .elementor-top-section:first-of-type {
  margin-top: 0 !important;
}

/* ถ้าใช้ Sticky Header ของ Elementor แล้วมีตัวคั่น (spacer) โผล่มา */
.home .e-sticky__spacer {
  height: 0 !important;
}

/* ซ่อนทุกชนิดของ Page Title / Page Header / Breadcrumbs บนหน้า Home */
.home .page-header,
.home .entry-header,
.home .page-title,
.home .page-title-wrap,
.home .nv-page-title-wrap,
.home .ct-page-title,
.home .blocksy-page-title,
.home .oceanwp-page-header,
.home .archive-header,
.home .breadcrumbs,
.home .breadcrumb,
.home .woocommerce-breadcrumb {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* กันเผื่อคอนเทนต์เลื่อนลงเพราะเฮดเดอร์แบบ sticky ใส่ spacer */
.home .e-sticky__spacer { height: 0 !important; }

/* บีบพื้นที่หลักให้ชิดด้านบน */
.home main,
.home .site-main,
.home #content,
.home .content-area {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ทำให้ทุก Carousel ของ Elementor/WordPress เลื่อนลื่นขึ้น */
.swiper-wrapper {
  transition-timing-function: linear !important; /* ลื่นแบบเส้นตรง */
}

/* เพิ่มความนุ่มนวลตอนสไลด์ */
.swiper-slide {
  transition: transform 0.6s ease-in-out !important;
}

/* แถบโลโก้ไหลลื่นต่อเนื่องสุด ๆ */
.client-logos-marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.logo-track {
  display: inline-flex;
  gap: 64px; /* ระยะห่างระหว่างโลโก้ */
  animation: scroll-logos 30s linear infinite; /* ปรับความเร็วได้ตรงนี้ */
}

.logo-track img {
  height: 42px;
  width: auto;
  opacity: .9;
  filter: grayscale(100%);
  transition: filter .2s ease, opacity .2s ease;
}
.logo-track img:hover {
  filter: none;
  opacity: 1;
}

/* แอนิเมชันเคลื่อนแบบต่อเนื่อง */
@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* เลื่อนไปครึ่งความยาว */
}

@media (max-width: 768px){
  .logo-track { gap: 36px; animation-duration: 24s; }
  .logo-track img { height: 32px; }
}


/* ปิดการคลิกและ zoom ที่โลโก้ลูกค้าทั้งหมด */

/* กำหนดเป้าหมายกว้างๆ ครอบคลุมทุก section ที่มีโลโก้ */
.logo-client-section *,
.client-logos *,
.partner-logos *,
.trust-section *,
.customer-logo *,
.brand-logos *,
[class*="logo"] img,
[class*="client"] img,
[class*="partner"] img,
[class*="brand"] img {
    pointer-events: none !important;
    cursor: default !important;
}

/* เจาะจง link และรูปภาพ */
.logo-client-section a,
.logo-client-section img,
.client-logos a,
.client-logos img,
.partner-logos a,
.partner-logos img,
.trust-section a,
.trust-section img {
    pointer-events: none !important;
    cursor: default !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* บังคับปิด lightbox plugins ทั่วไป */
a[data-lightbox],
a[data-fancybox],
a[data-gall],
a[href$=".jpg"],
a[href$=".png"],
a[href$=".gif"],
a[href$=".jpeg"],
a[href$=".webp"] {
    pointer-events: none !important;
    cursor: default !important;
}

/* ปิด cursor แบบ zoom-in */
*[style*="cursor: zoom"],
*[style*="cursor: pointer"],
.zoom-cursor,
.lightbox-enabled {
    cursor: default !important;
}

/* ยกเลิก hover effects ที่อาจทำให้เข้าใจผิดว่าคลิกได้ */
.logo-client-section a:hover,
.client-logos a:hover,
.partner-logos a:hover,
.trust-section a:hover {
    transform: none !important;
    opacity: 1 !important;
    cursor: default !important;
}