/**
 * Owl Carousel v2.2.1
 * Copyright 2013-2017 David Deutsch
 * Licensed under  ()
 */
/*
 *  Owl Carousel - Core
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease; }

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d; }


  
.owl-nav{
  position: absolute;
  top: -70px;;
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 10;
  border-radius: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;

}

  .owl-prev {
  width: 40px;
  height: 40px;
  background-color: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
  font-size: 20px;
  border: none;
}
.owl-next {
  width: 40px;
  height: 40px;
  background-color: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
  font-size: 20px;
  border: none;
}
.owl-prev:hover, .owl-next:hover {
  background-color: #d4c300; /* สีตอน hover */
}

.owl-prev::before,
.owl-next::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  padding: 5px;
  transform: rotate(45deg);
}

/* ปรับให้ลูกศรหันซ้าย */
.owl-prev::before {
  transform: rotate(135deg);
}

/* ลูกศรขวา */
.owl-next::before {
  transform: rotate(-45deg);
}
.testimonial-section .owl-stage-outer {
  position: relative;
}

/* จัดปุ่มไปไว้ที่มุมขวาบน */
.testimonial-section .owl-nav {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

/* ปรับปุ่มลูกศรใหม่สำหรับหน้าจอเล็ก */
@media (max-width: 768px) {

.owl-nav {
  position: absolute;
  top: -55px;
  left: -10px;
  right: 0px; /* จากเดิม right: 0; */
  width: 100%;
  display: flex;

  align-items: center;
  padding-right: 10px;
  padding-right: 10px;
  z-index: 10;
}
  .owl-prev {
  inset: 0;

}
.owl-next {
  inset: 0;
 

}
.news-category{
  padding-left: 10px;

}
}
.news-section {
  border-bottom: 4px solid #ffee00; /* สีแดงสวยๆ เปลี่ยนได้ */
}
@media (min-width: 1500px) {

 .news-section .owl-nav{
  position: absolute;
  top: -80px!important; /* ตามที่คุณตั้งไว้ */
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 10;
  margin-top: 8px;
}

}

/* =========================
   CONFIG
   ========================= */
:root{
  /* พื้นที่กันทางขวาเผื่อปุ่ม prev/next รวม margin (ถ้าไม่ได้ย้าย nav มาไว้ข้าง H2) */
  --owl-nav-space: 100px;
  --owl-scrollbar-height: 5px;
  --owl-scrollbar-thumb: 1px; /* ขนาดของปุ่ม */
  --owl-scrollbar-color: #d40000;
  --owl-scrollbar-bg: #ddd;
  --owl-scrollbar-initial: 30%; /* ความยาวสีแดงเริ่มต้น */
}

/* =========================
   HEADLINE + SCROLLBAR ROW
   ========================= */
.section-heading-line{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 0 10px;
  position: relative;
  /* กันพื้นที่ให้กับปุ่ม nav ที่ลอย absolute ทับอยู่ด้านขวา (ถ้าคุณยังไม่ย้าย nav ออก) */
  padding-right: var(--owl-nav-space);
}
.section-heading-line h2{
  margin: 0;
  white-space: nowrap;
}

/* =========================
   SCROLLBAR (range)
   ========================= */
.section-heading-line .owl-smooth-scrollbar{
  flex: 1;
  max-width: calc(100% - var(--owl-nav-space));  /* กันไม่ให้ทับปุ่ม nav */
  height: var(--owl-scrollbar-height);
  border-radius: 3px;
  background: linear-gradient(to right, var(--owl-scrollbar-color) var(--owl-scrollbar-initial), var(--owl-scrollbar-bg) var(--owl-scrollbar-initial));
  outline: none;
  cursor: pointer;
  transition: background .2s ease;
  min-width: 60px;
  margin-top: 10px;
  /* -webkit-appearance: none; */
  /* appearance: none; */
}

/* Thumb - Chrome/Safari */
.section-heading-line .owl-smooth-scrollbar::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: var(--owl-scrollbar-thumb);
  height: var(--owl-scrollbar-thumb);
  border-radius: 50%;
  background: var(--owl-scrollbar-color);
  border: none;
  margin-top: calc((var(--owl-scrollbar-height) / 2 * -1) + (var(--owl-scrollbar-thumb) / -2 + var(--owl-scrollbar-height) / 2));
  cursor: pointer;
}

/* Thumb - Firefox */
.section-heading-line .owl-smooth-scrollbar::-moz-range-thumb{
  width: var(--owl-scrollbar-thumb);
  height: var(--owl-scrollbar-thumb);
  border-radius: 50%;
  background: var(--owl-scrollbar-color);
  border: none;
  cursor: pointer;
}

/* =========================
   OWL NAV (กรณี “ย้าย nav มาอยู่ข้าง H2”
   ========================= */
.section-heading-line .owl-nav{
  position: static !important;   /* ยกเลิก absolute ของเดิม */
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  align-items: center;
}

/* ปรับขนาดปุ่มให้เล็กลงนิดเพื่อไม่กินพื้นที่ scrollbar */
.section-heading-line .owl-prev,
.section-heading-line .owl-next{
  width: 32px;
  height: 32px;
  background-color: #333;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background-color .3s ease;
  border: none;
  position: relative;
  font-size: 18px;
}
.section-heading-line .owl-prev:hover,
.section-heading-line .owl-next:hover{
  background-color: #d4c300;
}
.section-heading-line .owl-prev::before,
.section-heading-line .owl-next::before{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  padding: 4px;
  transform: rotate(45deg);
}
.section-heading-line .owl-prev::before{
  transform: rotate(135deg);
}
.section-heading-line .owl-next::before{
  transform: rotate(-45deg);
}

/* =========================
   OWL NAV (กรณี “ยังไม่ได้ย้าย nav”
   จะลอย absolute อยู่ด้านขวา เหนือสไลด์
   ========================= */
.news-section .owl-nav{
  position: absolute;
  top: -70px; /* ตามที่คุณตั้งไว้ */
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 10;
  margin-top: 8px;
}
.news-section .owl-prev,
.news-section .owl-next{
  width: 40px;
  height: 40px;
  background-color: #333;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background-color .3s ease;
  position: relative;
  font-size: 20px;
  border: none;
}
.news-section .owl-prev:hover,
.news-section .owl-next:hover{
  background-color: #d4c300;
}
.news-section .owl-prev::before,
.news-section .owl-next::before{
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  padding: 5px;
  transform: rotate(45deg);
}
.news-section .owl-prev::before{
  transform: rotate(135deg);
}
.news-section .owl-next::before{
  transform: rotate(-45deg);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1024px){
  :root{
    --owl-nav-space: 80px;
  }
}
@media (max-width: 768px){
  :root{
    --owl-nav-space: 60px;
  }

  .news-section .owl-nav{
    top: -55px;
    left: -10px;
    right: 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding-right: 10px;
    z-index: 10;
  }
  .section-heading-line{
    flex-wrap: wrap; /* ให้ h2, scrollbar, nav ลงบรรทัดใหม่ได้เมื่อพื้นที่ไม่พอ */
    padding-right: 10px; /* ลดกันพื้นที่ลง */
  }
  .section-heading-line h2{
    flex: 0 0 100%;
  }
  .section-heading-line .owl-smooth-scrollbar{
    max-width: 70%;
  }
}
@media (max-width: 768px) {
  .section-heading-line {
    flex-wrap: wrap;       /* ให้ h2, scrollbar, nav ลงบรรทัดใหม่ถ้าไม่พอ */
  }

  .section-heading-line h2 {
    flex: 0 0 100%;
  }

  .section-heading-line .owl-smooth-scrollbar {
    flex: 0 0 100%;
    margin: 8px 0;
  }

  .section-heading-line .owl-nav {
    justify-content: flex-end;
    width: 100%;
  }
  .news-section .owl-nav{
  position: absolute;
  top: -63px; /* ตามที่คุณตั้งไว้ */
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 10;
  margin-top: 7px;
}
}


.owl-nav span{
  display: none;
}


.owl-nav .disabled {
  opacity: .3;
  pointer-events: none;
}