:root{
      --bg:#f7f7f3;--card:#fff;--text:#1f2328;--muted:#7a7f87;--line:#ececec;--header:#0f0f10;--radius:18px;--shadow:0 8px 24px rgba(0,0,0,.08);
    }
body {
  font-family: 'TH Sarabun', 'Sarabun', sans-serif;
  color: #000 !important;
   background-color: #fdfdf5 !important;
}

#accordion-3, button {
    font-family: 'Prompt', sans-serif !important;
}

.card-header button {
    color: #000 !important;
    background-color: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
    border: none !important;
}

.accordion-wrapper .card-header button:before {
  color: unset !important ;
}
/* ==============================
   Typography
================================ */

.banner_font,
.header,
.hero-title,
h1, h2, h3, h4, h5, h6 {
    color: #000 !important;
      line-height: 1.5;
    font-family: 'Prompt', sans-serif;
}

   .w-50-new{

      width: 30% !important;

   }
   .bg_banner{
      background-color: #000 !important;
   }
   .bg_banner .nav-link {
     color: #fff !important;
    }


/* ถ้าต้องการให้ตอน hover เปลี่ยนเป็นเหลือง (โทน MailMaster) */
.bg_banner .nav-link:hover,
.bg_banner .nav-link.active {
  color: #ffd700 !important; /* หรือ #FFCC00 ตามแบรนด์ */
}
.call-text-w{
     color: #fff !important;
    
}

.navbar-stick:not(.navbar-dark) {
  box-shadow: 0 0 1.25rem rgba(30, 34, 40, 0.06);
  background: #000 !important;
}

.navbar-stick:not(.navbar-dark) .nav-link {
  color: #fff !important;   /* ข้อความเป็นสีขาว */
}

.navbar-stick:not(.navbar-dark) .nav-link:hover,
.navbar-stick:not(.navbar-dark) .nav-link.active {
  color: #ffd700 !important; /* hover/active เป็นเหลือง */
}
.navbar-stick:not(.navbar-dark) .call-text-w {
  color: #fff !important;
}

.banner-img {
  width: 100%;      /* mobile เต็มจอ */
  max-width: 100%;
}

@media (min-width: 768px) {
  .banner-img {
    max-width: 80%; /* tablet */
  }
}

@media (min-width: 1200px) {
  .banner-img {
    max-width: 70%; /* desktop */
  }
}

 #bg-dark2 {
  background-color: #e6e3d2 !important;
  color: #000 !important;   /* ข้อความเป็นสีดำ */
}

#bg-dark2 a {
  color: #000 !important;   /* ลิงก์เป็นสีดำ */
  text-decoration: none;    /* เอาเส้นใต้ลิงก์ออก */
}

#bg-dark2 a:hover {
  color: #333 !important;   /* เวลา hover เป็นสีเทาเข้ม */
  text-decoration: underline; /* เพิ่มเส้นใต้ตอน hover */
}

/* ---------- Replace .icon-wrap / .icon-img with this (no frame, not stretched) ---------- */

/* keep card behavior as before */
.service-card{
  padding: 20px !important;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  background: #fff;
  /* box-shadow: 0 10px 30px rgba(11,11,12,0.04); */
  /* transition: transform .16s ease, box-shadow .16s ease; */
  align-items: flex-start; /* ให้ไอคอนกับหัวข้อชิดบน ไม่ยืดกึ่งกลาง */
}

/* desktop hover */
@media (min-width: 992px){
  .service-card:hover{
    /* transform: translateY(-6px); */
    /* box-shadow: 0 22px 50px rgba(11,11,12,0.08); */
  }
}

/* icon-wrap: ไม่มี border, ขนาดพอดีไอคอน, ไม่บังคับ min-width */
.icon-wrap{
  display: inline-flex;     /* ไม่ให้ยืดเต็มแนว */
  align-items: center;
  justify-content: center;
  padding: 8px;             /* ระยะรอบไอคอน ถ้าอยากชิดลดเป็น 6px */
  background: transparent;   /* ไม่มีพื้นหลัง */
  border: none;              /* เอาเส้นกรอบออก */
  box-shadow: none;          /* เอาเงาออกถ้ามี */
  border-radius: 8px;       /* สามารถเปลี่ยนเป็น 0 หากไม่ต้องการมุมโค้ง */
  flex: 0 0 auto;            /* ห้ามยืดหรือยุบจาก flex layout */
  width: auto;               /* ให้ขนาดขึ้นกับเนื้อหา */
  min-width: 0;              /* ป้องกัน flex-basis บังคับขยาย */
  overflow: visible;
}

/* icon image: ปรับขนาดให้ชัด (เปลี่ยนตามต้องการ) */
.icon-img{
  width: 48px;               /* ถ้าอยากเล็กลงเปลี่ยนเป็น 40px */
  height: 48px;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

/* mobile: ลดขนาด/padding */
@media (max-width: 767.98px){
  .service-card{ padding: 12px !important; }
  .icon-wrap{ padding: 6px; border-radius: 6px; }
  .icon-img{ width: 28px; height: 28px; }
  .row.g-4 { gap: 0.8rem; } /* กระชับช่องว่างบนมือถือ */
}




/* ตัดเงาทิ้งทั้งหมด + ใช้เส้นขอบชัด */
.stats .stat-card{
  background: #fff;
  box-shadow: none !important;           /* ไม่เอาเงา */
  border: 2px solid #e6e6e6 !important;  /* เส้นขอบชัด */
  border-radius: 20px;                    /* มุมโค้งเหมือนเดิม */
}

/* การ์ดใหญ่ซ้าย / การ์ดเล็กขวา: จัดกลางและกำหนดความสูงขั้นต่ำไว้ */
.stats .stat-card .card-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 1.25rem 1.5rem;
  min-height: 160px;   /* การ์ดเล็ก */
}
.stats .stat-card--lg .card-body{
  min-height: 220px;   
}

/* บรรทัด “5+ Years of Experience” ให้กลมกลืน */
.stats .stat-inline{
  display:flex;
  align-items:baseline;
  gap:.5rem;
}
.stats .stat-number{ line-height:.85; letter-spacing:-0.5px; }
.stats .stat-title{ line-height:1; }

/* ซับไตเติล/คำอธิบายโทนอ่อนลงเล็กน้อย */
.stats .stat-sub{ opacity:.8; }
.stats .stat-caption{ opacity:.9; }


/* ====== การ์ดรีวิว ====== */
.testimonials .testimonial-card {
  background: #fffdf5;
  border: 1px solid #f0e2a6;
  border-radius: 14px;
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* หัวการ์ด (โปรไฟล์ + ชื่อ) */
.testimonials .tc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* รูปโปรไฟล์ */
.testimonials .profile-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #fffdf5, 0 0 0 3px #f0e2a6;
}

/* ข้อความรีวิว */
.testimonials .tc-quote {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
  margin: 0;
  flex: 1;
}

/* ====== Swiper ====== */
.testimonials .swiper {
  padding-bottom: 60px;  /* เผื่อที่ว่างให้ pagination */
}

.testimonials .swiper-wrapper {
  align-items: stretch; /* ให้การ์ดสูงเท่ากัน */
}

.testimonials .swiper-slide {
  height: auto;
  display: flex;
}

/* ✅ Desktop: 3 ใบเต็มจอ ไม่มีขอบขวา */
@media (min-width: 1200px) {
  .testimonials .swiper-slide {
    width: calc((100% - 48px) / 3); 
    /* 100% - (spaceBetween*2) / 3 ใบ */
  }
}

/* Tablet: 2 ใบ */
@media (min-width: 768px) and (max-width: 1199px) {
  .testimonials .swiper-slide {
    width: calc((100% - 20px) / 2);
  }
}

/* Mobile: 1 ใบ */
@media (max-width: 767px) {
  .testimonials .swiper-slide {
    width: 100%;
  }
}

/* ====== Pagination ====== */
.testimonials .swiper-pagination {
  position: relative !important;
  margin-top: 20px;
  bottom: auto !important;
  text-align: center;
}

.testimonials .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #d2d2d2;
  opacity: 1;
  margin: 0 4px !important;
  transition: all 0.3s ease;
}

.testimonials .swiper-pagination-bullet-active {
  background: #f5b301;
  transform: scale(1.2);
}


/* tab */
.bg-tab .nav-tabs-basic .nav-link {
  /* ปรับค่า padding ซ้ายและขวาตามต้องการ */
  padding-left: 20px;
  padding-right: 20px;
}


/* ใส่มุมโค้ง */
.video-frame iframe {
  border-radius: 12px;     /* โค้งมนเหมือนภาพตัวอย่าง */
  /* box-shadow: 0 6px 20px rgba(0,0,0,0.08);  */
}

/* จำกัดความกว้างสูงสุด */
.video-frame {
  max-width: 520px;        /* ปรับตามต้องการ เช่น 480px / 520px */
  margin-left: auto;
  margin-right: auto;
}
.features-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-width: 600px;
            width: 100%;
        }

        .features-list .feature-item {
            background: #fff;
            border-radius: 14px;
            padding: 16px 18px;
            display: flex;
            gap: 14px;
            /* แก้ไขตรงนี้: เปลี่ยนจาก flex-start เป็น center */
            align-items: center; 
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
            transition: all .2s ease;
            cursor: pointer;
        }

        .features-list .feature-item:hover {
            /* transform: translateY(-2px); */
            /* box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); */
        }

        /* SVG icon style */
        .features-list .feature-item svg {
            width: 32px;
            height: 32px;
            min-width: 32px; /* Ensure it maintains its size */
            fill: #2b2b2b;
            display: block;
        }

        .features-list .text-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .features-list .text-content h2 {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 700;
            color: #2b2b2b;
        }

        .features-list .text-content p {
            margin: 0;
            font-size: 0.95rem;
            color: #000;
            line-height: 1.4;
        }


.feature-card {
  background: #fff;
  /* border: 1.5px solid #FFE693;   */
  transition: all .2s ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}



/* กล่องการ์ด */
.feature-box{
  background:#fff;
  /* border:1.5px solid #FFE693;  */
  border-radius:16px;
  padding:22px 24px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

/* หัวข้อการ์ด */
.feature-box .box-title{
  font-weight:800;
  font-size:18px;
  color:#111;
  margin-bottom:20px;
}

/* ฟีเจอร์ย่อย = แนวตั้ง จัดกึ่งกลาง */
.mini-feature{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}

/* ไอคอนเหลือง */
.icon-badge{
  width:48px;height:48px;
  border-radius:12px;
  background:#FFE693;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  margin-bottom:6px;
}
.icon-badge i{ font-size:22px; color:#2b2b2b; }

/* ข้อความย่อย */
.mini-title{ font-weight:700; font-size:15px; color:#111; }
.mini-desc {
  font-size: 13px;           /* เล็กลงนิดหน่อย */
  line-height: 1.5;          /* ระยะบรรทัดไม่อัดแน่นเกินไป */
 
  max-width: 240px;          /* จำกัดความกว้างให้แต่ละบล็อกใกล้เคียงกัน */
  margin: 0 auto;            /* จัดกึ่งกลางข้อความในบล็อก */
  min-height: 60px;          /* กำหนดความสูงขั้นต่ำ → ทำให้แต่ละช่องสูงเท่ากัน */
  display: flex;             
  align-items: flex-start;   /* จัดข้อความให้อยู่ต้นบรรทัด */
  text-align: center;        /* จัดกลางแนวนอน (เหมาะกับ 3 คอลัมน์) */
}


/* พื้นหลัง section ให้ใกล้ภาพต้นแบบ */
#features.bg-light{ background:#f7f7ef !important; }

/* ปรับบนจอเล็ก */
@media (max-width:576px){
  .feature-box{ padding:18px; }
}
@media (max-width: 576px) {
  .mini-desc {
    font-size: 13px;
    line-height: 1.5;
  }
}
@media (min-width: 1200px) {
  .mini-desc {
    font-size: 14px;
  }
}


/* ===== HERO (พื้นหลัง/สีตัวอักษร) ===== */
.app-hero{ background:#f5c94b; color:#0b0b0c; }
.app-hero h2{ letter-spacing:.1px; }
.app-hero .lead{ color:#1e1e1e; opacity:.9; }

/* ===== LAYOUT ALIGN ===== */
.app-hero-row{ align-items:center; } /* จอกว้าง: กึ่งกลางแนวตั้ง */
@media (min-width:992px){
  .app-hero-row{ align-items:stretch; }   /* คอลัมน์สูงเท่ากัน */
}

/* ===== IMAGE BLOCK ===== */
.device-frame{
  border-radius:16px;
  overflow:hidden;
  /* background:#fff; */
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  /* คุมความสูงให้บาลานซ์กับกองปุ่ม */
  max-height:360px;          /* ปรับได้ 320–380 ตามความยาวข้อความ */
  margin-inline:auto;
}
.device-frame img{
  width:100%;
  height:100%;
  object-fit:cover;          /* เติมเต็มกรอบไม่บี้ภาพ */
}

/* ===== PILL BUTTONS ===== */
.pill-stack{ display:flex; flex-direction:column; }
.client-pill{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-radius:14px;
  background:#fff; 
  color:#111; 
  text-decoration:none;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
  min-height:64px;           /* ความสูงเท่ากันทุกปุ่ม */
}
.client-pill:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.09); }
.pill-icons i{ font-size:20px; margin-left:8px; }

/* ===== RESPONSIVE ===== */
@media (max-width:1199.98px){
  .device-frame{ max-height:340px; }
}
@media (max-width:991.98px){                /* Tablet & down: เรียงแนวตั้ง */
  .app-hero .lead{ font-size:1rem; }
  .device-frame{ max-height:320px; margin-top:8px; }
}
@media (max-width:575.98px){                /* Mobile: ปุ่มกะทัดรัด */
  .client-pill{ padding:12px 14px; min-height:58px; }
  .pill-icons i{ font-size:18px; }
  .device-frame{ max-height:280px; }
}

/* ซ่อนตอนโหลดเฉพาะกรณีที่ <html class="loading"> มีจริง */
html.loading .integration .swiper { visibility: hidden; }

/* รูปในสไลด์ */
.integration .swiper-slide img{
  border:2px solid #ddd; border-radius:8px; padding:4px; background:#fff; transition:.3s;
}
.integration .swiper-slide img:hover{
  /* border-color:#fbc531; box-shadow:0 4px 12px rgba(0,0,0,.15); */
}

/* พื้นที่และจุด */
.integration .swiper{ 
  padding-bottom:34px; 
  /* overflow:visible;  */
}
.integration .swiper .swiper-pagination{ bottom:6px !important; left:0; width:100%; }

/* bullet */
.integration .swiper .swiper-pagination-bullet{
  width:12px; height:12px; margin:0 6px !important; border-radius:50%;
  background:#cfd3d7 !important; opacity:1 !important; border:0 !important; box-shadow:none !important;
}
.integration .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background:#f5b301 !important; transform:scale(1.1);
}

/* อย่าใช้กฎนี้เพราะไป override สี active ทิ้ง
.swiper-controls .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: unset; }
*/


.swiper-controls 
.swiper-pagination 
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    transform: scale(1);
    background: unset;
   
}


.integration .swiper-pagination-bullet-active {
    background: #f5b301;   /* สีเหลืองตอน active */
    transform: scale(1.2); /* ขยายจุด */
}


/* Override บังคับไม่ให้มี border */
.swiper-controls .swiper-pagination 
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    border: none !important;
    box-shadow: none !important; /* กันมีเงามาแทน */
}

/* #scenario { 
  background:#f7f7f1; 
} */

/* Table */
#scenario .table-clean {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
  border:1px solid #ddd;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  color:#000;
}

/* ===== Header (เล็กลง) ===== */
#scenario .table-clean thead th {
  background:#0f0f10;
  color:#fff;
  font-weight:600;
  padding:8px 10px;        /* เล็กลงจากเดิม */
  border:1px solid #0f0f10;
  font-size:14px;
  text-align:center;
}
#scenario .table-clean thead th:first-child { border-top-left-radius:8px; }
#scenario .table-clean thead th:last-child  { border-top-right-radius:8px; }

/* ===== Body (ชิด & จัดกลาง) ===== */
#scenario .table-clean tbody td {
  padding:4px 8px;
  border:1px solid #ddd;
  vertical-align:middle;
  background:#fff;
  font-size:13px;
  color:#000;
  line-height:1.2;
  text-align:center;      /* จัดกลางทั้ง tbody */
}

/* มุมล่าง */
#scenario .table-clean tbody tr:last-child td:first-child { border-bottom-left-radius:8px; }
#scenario .table-clean tbody tr:last-child td:last-child  { border-bottom-right-radius:8px; }

 /* ----- Voice AI Section Styles ----- */
        #voice-ai {
            display: flex;
            flex-direction: column;
            gap: 20px;
            /* max-width: 900px; */
            width: 100%;
        }

        #voice-ai .section-header {
            text-align: center;
            margin-bottom: 20px;
        }

        #voice-ai .section-header h2 {
            font-size: 2rem;
            font-weight: 700;
            color: #2b2b2b;
            margin-bottom: 5px;
        }

        #voice-ai .section-header p {
            font-size: 1rem;
            color: #000;
        }

        #voice-ai .voice-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 20px;
        }

        #voice-ai .voice-card {
            display: flex;
            align-items: center;
            gap: 18px; /* ขยายระยะระหว่าง avatar กับข้อความ */
    padding: 20px 24px; /* เพิ่ม padding ด้านในให้โปร่งขึ้น */
            border-radius: 14px;
            background-color: #fff;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
            transition: all 0.2s ease;
            cursor: pointer;
            position: relative; /* สำหรับสถานะการเล่น */
        }
     /* hover */
#voice-ai .voice-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
}

/* Active */
#voice-ai .voice-card.active {
    box-shadow: 0 0 0 2px #FFE693, 0 14px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

        #voice-ai .profile-pic {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            min-width: 60px;
        }

        #voice-ai .voice-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex-grow: 1;
        }

        #voice-ai .voice-info h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 700;
            color: #2b2b2b;
        }

        #voice-ai .voice-info p {
            margin: 0;
            font-size: 0.85rem;
            color: #000;
        }


        #voice-ai .play-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;   /* เดิม 44px → ขยายให้ใหญ่ขึ้น */
    height: 54px;
    border-radius: 50%;
    background-color: #2b2b2b;
    color: #fff;
    font-size: 24px; /* เดิม 20px → ไอคอนใหญ่ขึ้น */
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

#voice-ai .play-button:hover {
    background-color: #000; /* hover เข้มขึ้น */
    transform: scale(1.05);
}
        /* Playing Status */
        #voice-ai .playing-status {
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: #2b2b2b;
            color: #fff;
            padding: 4px 10px;
            border-radius: 10px;
            font-size: 0.75rem;
            white-space: nowrap;
            display: none;
        }

        #voice-ai .voice-card.playing .playing-status {
            display: block;
        }

      
       
         /* ----- Integration Section Styles ----- */
        #integration {
            width: 100%;
            padding: 40px 0;
        }

        #integration .integration-header h2 {
            font-size: 2.25rem;
            font-weight: 700;
            color: #2b2b2b;
            line-height: 1.2;
        }

        #integration .integration-header p {
            font-size: 1rem;
            color: #000;
            line-height: 1.6;
        }

        #integration .integration-card {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 20px;
            border-radius: 14px;
            background-color: #fff;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            cursor: pointer;
            width: 100%;
            height: 100%; /* Make card fill its container */
        }

        #integration .integration-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
        }

        #integration .integration-card img {
            width: 54px;
            height: 54px;
            margin-bottom: 10px;
        }

        #integration .integration-card h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: #2b2b2b;
            margin: 0;
        }

        #integration .integration-card p {
            font-size: 0.9rem;
            color: #000;
            margin: 0;
        }
        
        #integration .swiper-slide {
            background: transparent;
        }
        
        #integration .swiper-pagination-bullet {
            background-color: #000;
            opacity: 0.7;
        }

        #integration .swiper-pagination-bullet-active {
            background-color: #FFE693;
            opacity: 1;
        }


           /* ----- Gallery Section Styles (formerly Testimonials) ----- */
        #scenario {
            padding: 60px 0;
            /* background-color: #ffffff; */
        }
        
        #scenario .swiper-slide img {
            border-radius: 14px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
        }

        #scenario .swiper-slide a:hover img {
             box-shadow: 0 12px 28px rgba(0,0,0,0.1);
             transform: translateY(-2px);
        }

        #scenario .swiper-pagination-bullet-active {
            background-color: #2b2b2b;
        }

        /* ----- Swiper Loading Fix ----- */
        .swiper {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
        }

        .swiper-initialized {
            visibility: visible;
            opacity: 1;
        }

         /* ----- Swiper Loading Fix ----- */
        .swiper {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.4s ease-in-out;
        }

        .swiper-initialized {
            visibility: visible;
            opacity: 1;
        }

        /* ----- Pagination Spacing Fix ----- */
        .swiper-pagination {
            position: static !important;
            margin-top: 25px;
        }
          @media (max-width: 992px) {
            #integration .integration-header {
                text-align: center;
            }
        }

        /* ===== Price Plan Card Table with Vertical Borders Only ===== */
#price_plan {
  /* max-width: 1000px; */
    /* max-width: 1000px; */
  margin: 0 auto;
  font-family: 'Sarabun', sans-serif;
}

#price_plan .table-wrap {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;

  /* เงาสวยแบบ soft card */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08), 
              0 2px 6px rgba(0,0,0,0.05);
}


#price_plan table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  border: none;
}

/* Header row */
#price_plan thead th {
  background: #111;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 16px;
  border: none; /* ลบเส้นแนวนอนของ header */
}

#price_plan thead th:first-child {
  text-align: left;
}

/* Price row */
#price_plan .price-row th {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  padding: 12px;
  border: none; /* ไม่มีเส้นแนวนอน */
}

#price_plan .price-row td {
  background: #fff;
  padding: 14px 12px;
  border: none; /* ไม่มีเส้นแนวนอน */
}

#price_plan .price-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px;
}

#price_plan .price-pill .main {
  font-size: 17px;
  font-weight: 700;
  color: #111;
}

#price_plan .price-pill .main strong {
  color: #e53935;
}

#price_plan .price-pill .note {
  font-size: 12px;
  color: #691515;
  font-style: italic;
}

/* Body rows */
#price_plan tbody th,
#price_plan tbody td {
  padding: 10px 14px;
  font-size: 16px;
  border-top:1px solid #ddd !important;     /* ❌ ไม่มีเส้นบน */
  border-bottom:1px solid #ddd !important;  /* ❌ ไม่มีเส้นล่าง */
  border-left: 1px solid #ddd !important;  /* ✅ เปิดเส้นแนวตั้ง */
  border-right: 1px solid #ddd !important; /* ✅ เปิดเส้นแนวตั้ง */
}

/* ลบเส้นซ้ายสุด-ขวาสุด */
#price_plan .table th:first-child,
#price_plan .table td:first-child {
  border-left: none !important;
}

#price_plan .table th:last-child,
#price_plan .table td:last-child {
  border-right: none !important;
}

/* Icons */
#price_plan .yes {
  font-size: 18px;
  color: #000;
  font-weight: bold;
}

#price_plan .no {
  font-size: 18px;
  color: #ccc;
}

/* ADDONS — cleaner, more minimal */
.addons {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    margin-top: 26px;
}

.addon {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.addon .head {
    background: var(--header);
    color: #fff;
    padding: 16px 18px;
    font-weight: 700;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.addon .body {
    padding: 18px 18px 20px;
    line-height: 1.6;
}

.addon .big {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
}

.addon .note {
    font-size: 14px;
    color: #8b8f96;
    margin: 0 0 12px;
}

.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list li {
    position: relative;
    padding-left: 28px;
    margin: 8px 0;
}

.list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    font-weight: 700;
    color: var(--text);
}

@media (max-width: 992px) {
    .addons {
        grid-template-columns: repeat(6, 1fr);
    }
    .addon {
        grid-column: span 6;
    }
}

@media (max-width: 640px) {
    .wrapper {
        padding: 32px 12px;
    }
    .addons {
        grid-template-columns: 1fr;
    }
    .addon {
        grid-column: span 1;
    }
    thead th,
    tbody td,
    tbody th {
        padding: 12px;
    }
}
.table-s{
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}


.feature-box {
            background: #fff;
            border-radius: 12px;
            padding: 20px; /* Increased padding for better spacing */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
          
            flex: 1; /* This makes all feature boxes the same height */
            display: flex; /* Added to help with internal alignment if needed */
            flex-direction: column; /* Stack content vertically */
        }

     

        .feature-number {
            font-weight: 700; /* Bolder font weight */
            font-size: 1rem;
            color: #d9822b;
            margin-bottom: 8px; /* Increased margin */
        }

        .feature-box p {
            margin: 0;
            font-size: 0.9rem; /* Slightly larger font for readability */
            line-height: 1.6;
            color: #333;
        }

     #pricrplan .wrapper, .priceplan-vip  .wrapper {
            width: 100%;
            overflow-x: hidden;
        }

        #pricrplan .container, .priceplan-vip  .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }

        #pricrplan .py-5, .priceplan-vip  .py-5 { padding-top: 3rem; padding-bottom: 3rem; }
        #pricrplan .py-md-5, .priceplan-vip  .py-md-5 { padding-top: 3rem; padding-bottom: 3rem; }
        #pricrplan .py-md-10, .priceplan-vip  .py-md-10 { padding-top: 5rem; padding-bottom: 5rem; }
        #pricrplan .mb-5, .priceplan-vip  .mb-5 { margin-bottom: 3rem; }
        #pricrplan .text-center, .priceplan-vip  .text-center { text-align: center; }

        #pricrplan .display-4, .priceplan-vip  .display-4 {
            font-size: 2.25rem;
            font-weight: 700;
            line-height: 1.2;
        }
        
        #pricrplan h1.display-4, .priceplan-vip  h1.display-4,
        #pricrplan h2.display-4, .priceplan-vip  h2.display-4,
        .priceplan-vip  .h2 {
            font-weight: bold;
        }

        /* Grid System */
        #pricrplan .row, .priceplan-vip  .row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
            justify-content: center;
        }

        #pricrplan .col-lg-6, .priceplan-vip  .col-lg-6 {
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            box-sizing: border-box;
        }

        @media (min-width: 992px) {
            #pricrplan .col-lg-6, .priceplan-vip  .col-lg-6 {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }
        
        /* Card Styling */
        #pricrplan .div_plantableboxshadow, .priceplan-vip  .div_plantableboxshadow {
            background-color: #ffffff;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            margin-bottom: 1.5rem;
            overflow: hidden;
            /* transition: transform 0.3s ease; */
        }

        /* #pricrplan .div_plantableboxshadow:hover, .priceplan-vip  .div_plantableboxshadow:hover {
            transform: translateY(-5px);
        } */

        #pricrplan .header_suite_1, .priceplan-vip  .bg-table-vip {
            background-color: #000;
            color: #ffffff;
        }
        
        #pricrplan .padding-campaign20, .priceplan-vip  .padding-campaign20 {
             padding: 0.75rem 1.25rem;
        }

        #pricrplan .pricing-title, .priceplan-vip  .pricing-title {
            font-size: 0.9rem;
            font-weight: 600;
        }
        
        .priceplan-vip  .h2 {
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            text-align: left;
        }
        
        #pricrplan .price-padding, #pricrplan .price-padding1 {
            padding: 1rem;
            text-align: center;
        }

        #pricrplan .txt_black {
            font-size: 1.5rem;
            font-weight: 700;
            color: #111827;
        }
        
        #pricrplan .price-padding1 span {
            font-size: 0.8rem;
            color: #000;
        }

        #pricrplan .price-tr-bottom {
             border-bottom: 1px solid #e5e7eb;
        }

        /* VIP Tables */
        #pricrplan .table-striped, .priceplan-vip  .table-striped {
            width: 100%;
            border-collapse: collapse;
        }
        
        .priceplan-vip  .vip-table td {
            padding: 0.5rem 1rem;
            vertical-align: middle;
        }
        
        .priceplan-vip  .vip-table tbody tr:not(:last-child) {
             border-bottom: 1px solid #f3f4f6;
        }

        .priceplan-vip  .price1-vip {
            /* font-family: monospace; */
            font-size: 0.9rem;
            color: #000;
            font-weight: 500;
        }
        
        .priceplan-vip  .price-strike {
            color: #9ca3af;
            text-decoration: line-through;
            font-size: 0.75rem;
        }
        
        .priceplan-vip  .price_dic {
            font-size: 1rem;
            font-weight: 700;
            color: #ef4444;
            margin-left: 0.5rem;
        }

        .priceplan-vip  .sold-out-badge {
            background-color: #ef4444;
            color: white;
            font-size: 0.6rem;
            font-weight: 700;
            padding: 2px 5px;
            border-radius: 4px;
            margin-left: 8px;
            vertical-align: middle;
            display: inline-block;
        }

        /* Sold Out Row Styling */
        .priceplan-vip  .sold-out-row td {
            color: #b0b0b0;
        }
        .priceplan-vip  .sold-out-row .price1-vip,
        .priceplan-vip  .sold-out-row .price_dic {
             color: #b0b0b0;
             font-weight: 500;
        }
        .priceplan-vip  .sold-out-row .price-strike {
            color: #d1d1d1;
        }
  .c-white{
      color: #fff;
  }
  .f-b{
    color: #000;
  }

  .text-white{
     color: #fff !important;
  }


    .pricing-card {
            max-width: 400px;
            width: 100%;
            border-radius: 0.75rem;
            border: 1px solid #e0e0e0;
            overflow: hidden; /* เพื่อให้ขอบ card-header โค้งมนตาม card */
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
           
        }
        .pricing-card .card-header {
            background-color: #000; /* สีดำ */
             /* color: #fff; */
        }
           .pricing-card .card-header h5 {
         
             color: #fff !important;
        }
        .pricing-card .price {
            font-size: 2.75rem;
            font-weight: 700;
        }
        .pricing-card .price-period {
            font-size: 1.5rem;
            font-weight: 500;
        }
        .feature-list li {
            padding: 0.5rem;
            border-top: 1px solid #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .feature-list li:first-child {
            border-top: 1px solid #e0e0e0;
        }
         /* จัดเนื้อหาให้อยู่กึ่งกลางจอ */
        .vh-100 {
            min-height: 100vh;
        }

        .bg-dark {
    --bs-bg-opacity: 1;
    background-color:#000 !important;
}
.text-dark {
    --bs-text-opacity: 1;
    color: #000 !important;
}
.bg-white1{
  color: #fff !important;
}

.red{
  color: red;
}


 .circle-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.0rem; /* 40px */
            height: 2.0rem; /* 40px */
            border-radius: 50%;
            background-color: #000; /* Bootstrap dark color */
            color: #fff;
            font-weight: bold;
        }

           .stat-number-lg {
            font-size: 6rem; /* Custom font size for "5+" */
            line-height: 1;
        }

/* ===== Scoped CSS เฉพาะตาราง Price Plan ===== */
.price-plan-table {
  width: 100%;
  border-collapse: collapse;
}

/* Header ของตาราง (Enterprise / Ultimate) */
.price-plan-table thead th {
  padding: 14px 12px;   /* ให้ header มีระยะหายใจมากกว่า */
  font-size: 16px;
  font-weight: 700;
  background: #000;
  color: #fff;
  text-align: center;
}

/* แถวเนื้อหาทั่วไป */
.price-plan-table tbody th,
.price-plan-table tbody td {
  padding: 6px 10px !important; /* กระชับแถว */
  font-size: 14px;
  line-height: 1.4;
  vertical-align: middle;
  border-top: 1px solid #eee;
}

/* คำอธิบายย่อยใน th */
.price-plan-table tbody th span {
  font-size: 12px;
  font-weight: normal;
  color: #555;
}

/* Cell ติ๊กถูก */
.price-plan-table td.yes {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.price-plan-table tbody th {
  padding-left: 20px !important;  /* ขยับข้อความออกจากขอบซ้าย */
}

.price-plan-table thead th:first-child {
  padding-left: 18px !important;
  text-align: left;
}

/* ข้อความฝั่งซ้ายให้กระชับขึ้น */
.why-choose .points li { margin-bottom: 12px; }
.why-choose .fs-18 { line-height: 1.5; }

/* กำหนดกรอบแสดงผลของภาพให้ไม่ล้น และกลางคอลัมน์ */
.why-choose .visual {
  max-width: 600px;   /* เดิม 420–460px → ขยายให้ใหญ่ขึ้น */
  width: 100%;
}

.why-choose .visual-img {
  max-height: 420px;  /* เดิม 360px → สูงขึ้น */
}
/* รูปเดี่ยว: คุมสัดส่วนให้สวย ไม่กินพื้นที่เกินไป */


/* ถ้ามีหลายรูป: ใช้กริดนี้แทน (ใส่ .visual-grid แทน .visual-img) */
.why-choose .visual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 520px;
}
.why-choose .visual-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;          /* รูปไม่ยืด เลือก 4/3 ดูพอดีตา */
  object-fit: cover;
  border-radius: 16px;
}
.why-choose .visual-grid .big {
  grid-column: span 2;        /* รูปใหญ่แถวบนกิน 2 คอลัมน์ */
  aspect-ratio: 16/10;
}

/* Responsive: จอเล็กให้รูปลงเต็มและมีระยะหายใจ */
@media (max-width: 991.98px) {
  .why-choose .visual { max-width: 520px; }
}
@media (max-width: 575.98px) {
  .why-choose .visual { max-width: 100%; }
  .why-choose .visual-grid { grid-template-columns: 1fr; }
}


.bg-yellow {
  background-color: #f7c80a !important; /* พื้นหลังเหลือง */
}

.btn-dark {
  background-color: #000;
  border: none;
  font-weight: 600;
  transition: 0.2s ease-in-out;
}
.btn-dark:hover {
  background-color: #333;
}

.btn-outline-dark {
  border: 2px solid #000;
  font-weight: 600;
  transition: 0.2s ease-in-out;
}
.btn-outline-dark:hover {
  background-color: #000;
  color: #fff;
}


/* จัด layout ช่องหมายเลขให้อยู่บรรทัดเดียว */
.vip-table .price1-vip{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;           /* กันขึ้นบรรทัดใหม่ */
}

/* ป้าย SOLD OUT ให้อยู่ขวาเสมอ */
.vip-table .price1-vip .sold-out-badge{
  margin-left:auto;             /* ดันไปขวา */
  display:inline-block;
  padding:2px 8px;
  font-size:9px;
  line-height:1.3;
  font-weight:700;
  color:#fff;
  background:#e63946;
  border-radius:6px;
  letter-spacing:.2px;
}

/* แถวที่ขายหมด ทำให้สีอ่อนลงนิดหน่อย (ปรับได้) */
.vip-table tr.sold-out-row td{
  color:#000;
  opacity:.9;
}
.vip-table tr.sold-out-row .price_dic{ opacity:.5; }



/* ฟอนต์ในเบอร์ */
.vip-table .price1-vip {
  font-family: 'Manrope', sans-serif;
  font-size: 18px;       /* ขนาดฟอนต์กำลังดี */
  font-weight: 800;      /* น้ำหนักกลางๆ อ่านง่าย */
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  gap: 6px;
  padding: 4px 8px;
  
}

/* tbody กระชับกว่าหัวตาราง */
.vip-table tbody td {
  padding: 4px 8px;   /* ลดลงจาก 6–8px → 4px */
  font-size: 14px;    /* ย่อเล็กน้อยให้แน่นขึ้น */
  line-height: 1.3;   /* ลดช่องว่างบรรทัด */
  vertical-align: middle;
}

/* ป้าย SOLD OUT */
.vip-table .price1-vip .sold-out-badge {
  font-family: 'Manrope', sans-serif; /* ให้ป้ายใช้ฟอนต์เดียวกัน */
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e63946;
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
}

/* บังคับราคาเก่า-ใหม่ให้อยู่ในบรรทัดเดียว */
.vip-table td {
  white-space: nowrap;   /* ห้ามตัดบรรทัด */
}

.vip-table .price-strike,
.vip-table .price_dic {
  display: inline-block;
  margin: 0 4px 0 0;
  vertical-align: middle;
}

/* ราคาใหม่เน้นชัด */
.vip-table .price_dic {
  font: 700 18px/1 'Manrope', sans-serif;
  color: #ff3b30;
}

@media (min-width: 992px) {
  header .navbar-expand-lg {
    padding-top: 0.4rem !important;   /* ปรับได้ตามที่ชอบ */
    padding-bottom: 0.4rem !important;
  }
   .navbar-stick:not(.navbar-dark) {
    /* box-shadow: 0 0 1.25rem rgba(30, 34, 40, 0.06); */
    /* background: #000 !important; */
     padding-top: 0.4rem !important;   /* ปรับได้ตามที่ชอบ */
    padding-bottom: 0.4rem !important;
}
}

.btn-outline-white {
  color: #fff;
  border: 2px solid #fff;
  background: transparent;
  transition: all .25s ease;
}
.btn-outline-white:hover {
  color: #000;
  background: #fff;
}

/* ปุ่ม outline ดำ */
.btn-outline-black {
  color: #000;
  border: 2px solid #000;
  background: transparent;
  transition: all .25s ease;
}
.btn-outline-black:hover {
  color: #fff;
  background: #000;
}

.btn-white {
  background: #fff;
  color: #000;
  border: 2px solid #fff;
  transition: all .25s ease;
}
/* .btn-white:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
} */

.navbar.navbar-stick:not(.navbar-dark) .btn-m-contact {
  /* ใช้ตัวแปรของ Bootstrap 5 เพื่อความแน่นอนในการ override */
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-color: #212529;

  /* เผื่อธีมเดิมไม่ได้ใช้ตัวแปร */
  background-color: #fff !important;
  border-color: #fff !important;
  color: #212529 !important;

  transition: background-color .2s, color .2s, border-color .2s;
}

@media (max-width: 1080px) {
  .hide-1080 {
    display: none !important;
  }
}

/* ===== 2 คอลัมน์เมื่อ <=1080px ===== */
@media (max-width:1080px){
  /* ครอบ row ที่มีตารางไว้ด้วยคลาส .vip-row (ถ้ามี) 
     ถ้ายังไม่มี ให้ใช้ .row ตามตัวอย่างนี้ได้เลย */
  .row > .col-lg-4{
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* ย่อหัวข้อให้สมส่วน */
  .h2, h2 { font-size: 1.5rem; }

  /* กล่องตารางเว้นขอบล่างเพิ่มนิดหน่อย */
  .div_plantableboxshadow{ margin-bottom: 18px; }

  /* ตารางให้กระชับขึ้นเล็กน้อย */
  .vip-table thead td{ padding:10px 12px; }
  .vip-table tbody td{
    padding:6px 10px;
    font-size:14px;
    line-height:1.3;
  }

  /* ราคาเก่า-ใหม่ให้อยู่บรรทัดเดียวเสมอ */
  .vip-table td{ white-space:nowrap; }
  .vip-table .price-strike,
  .vip-table .price_dic{
    display:inline-block;
    margin-right:6px;
    vertical-align:middle;
  }

  /* ป้าย SOLD OUT ให้เล็กลงนิดนึง */
  .vip-table .sold-out-badge{
    font-size:11px;
    line-height:1.2;
    padding:2px 6px;
  }
}

/* ===== 1 คอลัมน์เมื่อ <=768px ===== */
@media (max-width:768px){
  .row > .col-lg-4{
    flex: 0 0 100%;
    max-width: 100%;
  }
  .h2, h2{ font-size:1.25rem; }
}


/* ให้ตารางอ่านง่ายเมื่อการ์ดแคบลง */
.vip-table{ table-layout: fixed; }

/* ล็อกคอลัมน์ราคา ~140–160px */
.vip-table thead td:last-child,
.vip-table tbody td:last-child{
  width: 150px;     /* ปรับได้ 140–170 ตามสายตา */
  white-space: nowrap;
}

/* ราคาเก่า+ใหม่อยู่บรรทัดเดียว */
.vip-table .price-strike,
.vip-table .price_dic{
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

/* กระชับระยะในช่วงจอแคบ */
@media (max-width: 1200px){
  .vip-table thead td{ padding: 10px 12px; }
  .vip-table tbody td{ padding: 6px 10px; font-size: 14px; line-height: 1.3; }
  .vip-table .sold-out-badge{ font-size: 11px; padding: 2px 6px; }
}

@media (max-width: 1200px) {
  .vip-grid > .col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .lh-05{
     line-height: unset !important;
  }
}

/* เมื่อจอกว้าง <=768px ให้เหลือ 1 คอลัมน์เต็ม */
@media (max-width: 768px) {
  .vip-grid > .col-lg-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.text-red {

   color: #ef0320 !important;
}

 @media (min-width: 576px) {
    .modal-quote {
      max-width: 540px; /* เพิ่มจาก 480px เป็น 540px */
    }
  }

    #quoteModal .form-control {
    padding: 0.65rem 1rem;
    /* font-size: 1rem; */
  }
/* 
  #quoteModal .btn {
    font-size: 1.05rem;
    padding: 0.55rem 1.25rem;
  } */

#quoteModal .modal-title {
  margin-bottom: 0.25rem;  /* ลดจาก default ที่ห่างมาก */
  line-height: 1.25;       /* กระชับบรรทัด */
}

#quoteModal .modal-title small {
  display: block;
  margin-top: 0rem;        /* ไม่มีช่องว่างด้านบน */
  line-height: 1.2;
  /* font-size: 1.05rem; */
}

  #quoteModal .modal-body {
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
  }

  ul.list-unstyled a {
  text-decoration: none !important;
}
ul.list-unstyled a:hover {
  text-decoration: none !important;
}

.btn-equal {
    min-width: 220px; /* ปรับค่าตามต้องการ */
    text-align: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lh-05{
    line-height: 0.5;
  }


/* ใช้เฉพาะสไลด์รีวิว */
.t-swiper .swiper-wrapper { align-items: stretch; }
.t-swiper .swiper-slide { height: auto; display: flex; }
.t-swiper .swiper-slide > * { width: 100%; }

/* การ์ดรีวิว: ใช้ grid ให้ footer ติดก้นการ์ดเสมอ */
.t-swiper .testimonial-card{
  display: grid;
  grid-template-rows: auto 1fr auto; /* head / content / footer */
  height: 100%;
  width: 100%;
  padding: 20px;
  border: 1px solid #f0e6cc;
  border-radius: 12px;
  background: #fffdf6;
}

/* ส่วนหัวให้เรียงกลางแนวตั้ง */
.t-swiper .tc-head{ display:flex; gap:12px; align-items:center; }
.t-swiper .profile-img{ width:64px; height:64px; object-fit:cover; border-radius:50%; }

/* ข้อความรีวิวอยู่โซนกลาง (แถวที่ 2) */
.t-swiper .tc-quote{ margin: 14px 0; }

/* ส่วนท้ายอยู่แถวสุดท้ายเสมอ */
.t-swiper .testimonial-footer{ margin-top:0; }

/* บรรทัดโลโก้ + ชื่อบริษัท: สูงคงที่ และจัดกลางแนวตั้ง */
.t-swiper .company-line{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:48px;          /* บรรทัดสูงเท่ากันทุกใบ */
}

/* กันสไตล์ที่อื่นทับโลโก้ — ใช้ selector เจาะจง + !important */
.t-swiper .testimonial-footer img,
.t-swiper .company-line img,
.t-swiper .company-logo{
  max-height:40px !important;
  height:auto !important;
  width:auto !important;
  max-width:180px;
  object-fit:contain;
  display:block;
  flex-shrink:0;
}

/* กันข้อความชื่อบริษัทดันแตกบรรทัดแปลก ๆ */
.t-swiper .company-line span{
  line-height:1.2;
  word-break:break-word;
}

.t-swiper .testimonial-footer img { height:auto !important; width:auto !important; max-height:40px !important; }
.testimonial-footer{
  display: contents;
}




.service figure img {
  max-width: 100%;
  width: 500px;
  height: auto;
  border-radius: 12px; /* Added for rounded corners on the main image */
}

.service .trusted-card {
    font-family: 'Prompt', sans-serif !important;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: -40px;
  right: 10px;
  /* --- Style Updates --- */
  background-color: #FFFFFF; /* Changed background to white */
  color: #212529; /* Changed text color to a dark shade */
  border: 2px solid #F3CA5A; /* Added a gold border */
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1); /* Softened the box shadow */
  /* --- End Style Updates --- */
  border-radius: 24px; /* Increased from 12px for more rounded corners */
  z-index: 5;
  width: 200px;
  padding: 10px;
}

/* Style for the highlighted number */
.service .trusted-card .highlight-text {
    color: #F3CA5A; /* Gold color for the number */
    font-weight: bold;
}

.text-y{
   color: #F3CA5A; /* Gold color for the number */
    font-weight: bold;
}


@media (max-width: 780.98px) {
  .trusted-card {
      right: -60px !important;
  }

}
@media (max-width: 600.98px) {
  .trusted-card {
        top: -60px !important;
        right: -16px !important;
  }

}

/* CSS - ปุ่มโทนดาร์กเข้ม */
.btn-dark-brand{
  background:#111;           /* ดำสนิท */
  color:#fff;
  border:1px solid #111;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  transition:all .2s ease;
}
.btn-dark-brand:hover{
  background:#000;
  border-color:#000;
  color:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.btn-dark-brand:active{
  background:#0a0a0a;
  border-color:#0a0a0a;
}
.btn-dark-brand:focus{
  outline:0;
  box-shadow:0 0 0 .2rem rgba(0,0,0,.15);
}

/* ไอคอนให้ตามสีข้อความ */
.btn-dark-brand i{ color:inherit; }