<style>
    /* ===== Thai ===== */
      html:lang(th) body,
      html:lang(th) span,
      html:lang(th) p,
      html:lang(th) label,
      html:lang(th) h1,
      html:lang(th) h2,
      html:lang(th) h3,
      html:lang(th) h4,
      html:lang(th) h5,
      html:lang(th) h6,
      html:lang(th) .underline {
        font-family: 'Prompt', sans-serif !important;
      }

      /* ===== English ===== */
      html:lang(en) body,
      html:lang(en) span,
      html:lang(en) p,
      html:lang(en) label,
      html:lang(en) h1,
      html:lang(en) h2,
      html:lang(en) h3,
      html:lang(en) h4,
      html:lang(en) h5,
      html:lang(en) h6,
      html:lang(en) .underline {
        font-family: 'Poppins', sans-serif !important;
      }

    /* ทำให้ฟอนต์เนียนขึ้น */
    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    html[lang="th"] .hero-section-wrapper-2 .hero-style-2 .hero-image {
      margin-bottom: 20px;
    }
    html[lang="en"] .hero-section-wrapper-2 .hero-style-2 .hero-image {
      margin-bottom: 20px;
    }

    html:lang(th) p {
      font-size: clamp(13px, 1.05vw, 15px);
      line-height: 1.7 !important;
    }
    html:lang(en) p {
      font-size: clamp(13px, 1.05vw, 15px);
      line-height: 1.6 !important;
    }

    body p {
      font-size: clamp(13px, 1.1vw, 15px) !important;
    }

    .tx-16 {
      font-size: clamp(14px, 1.2vw, 16px) !important;
    }

    .tx-18 {
      font-size: clamp(15px, 1.4vw, 18px) !important;
    }

    .tx-20 {
      font-size: clamp(16px, 1.6vw, 20px) !important;
    }

    .tx-22 {
      font-size: clamp(17px, 1.8vw, 22px) !important;
    }

    .tx-30 {
      font-size: clamp(22px, 3vw, 30px) !important;
    }

    .tx-16-en {
      font-size: clamp(14px, 1.2vw, 16px) !important;
    }

    .tx-18-en {
      font-size: clamp(15px, 1.4vw, 18px) !important;
    }

    .tx-20-en {
      font-size: clamp(16px, 1.6vw, 20px) !important;
    }

    .tx-22-en {
      font-size: clamp(17px, 1.8vw, 22px) !important;
    }

    .tx-30-en {
      font-size: clamp(22px, 3vw, 30px) !important;
    }

    .mb-8 {
      margin-bottom: 8px;
    }

    .pricing-style-1 .single-pricing h6 {
      color: #585978;
      margin-bottom: 8px !important;
    }

    .hero-section-wrapper-2 .hero-style-2 .hero-content-wrapper h4 {
        font-weight: 600;
        /* color: #2F80ED; */
        color: #009fe3 !important;
        margin-bottom: 30px;
    }

    .feature-style-2 .single-feature .icon {
      /*margin-bottom: 30px;*/
      width: 80px;
      height: 80px;
      border-radius: 20px;
      background: #009fe3 !important;
      color: #ffffff;
      font-size: 45px;
      display: flex;
      align-items: center;
      margin: 0 auto 16px;
    }
    .pricing-style-1 .single-pricing {
      background: #ffffff;
      border-radius: 10px;
      box-shadow: 0px 5px 25px rgb(218 211 211 / 81%);
      margin-bottom: 40px;
      padding: 8px 16px;
      border: 1px solid transparent;
      transition: all 0.3s ease-out 0s;
      position: relative;
    }
    .pricing-style-1 .single-pricing .image {
      width: 120px;
      height: 120px;
      background: #EBF4FF;
      border-radius: 50%;
      /*margin-bottom: 30px;*/
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto 16px;
    }
    .pricing-style-1 .single-pricing h6 {
      color: #585978;
      margin-bottom: 8px !important;
      text-align: center;
    }

    .css-app {
        height: 40px;
        width: 135px;
        -webkit-background-size: cover;
        background-size: cover;
        -webkit-background-position: center;
        background-position: center;
        background-image: url("assets/img/socialmedia/applestore.png");
    }
    .css-play {
        height: 40px;
        width: 135px;
        -webkit-background-size: cover;
        background-size: cover;
        -webkit-background-position: center;
        background-position: center;
    }
    .css-app, .css-play {
        margin-right: 10px;
    }
    .hero-section-wrapper-2 .hero-style-2::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 50%;
        height: 90%;
        background: none !important;
        z-index: -1;
    }
    .single-feature .icon {
      display: flex;
      justify-content: center;
      margin-bottom: 15px;
    }
    .single-feature p {
      min-height: 80px;
    }

    #product .single-pricing {
      display: flex;
      flex-direction: column;
      height: 90%;
    }
    
    .contact-style-6 .contact-form-wrapper form .single-input i {
        position: absolute;
        right: 21px;
        top: 36.5px !important;
    }
    .contact-style-6 .contact-form-wrapper form .single-input input {
      height: 40px !important;
    }
    .contact-style-6 .contact-form-wrapper form .single-input label {
        display: block;
        width: 100%;
        margin-bottom: 0px !important;
    }

    @media only screen and (min-width: 1200px) and (max-width: 1399px) {
      .hero-section-wrapper-2 .hero-style-2 .hero-content-wrapper {
          padding: 45px 0;
      }
    }

    .a-link {
      color: #585978 !important;
    }
    .a-link:hover {
      color: #0d6efd !important;
    }

    a {
      text-decoration: none !important;
    }

    a:hover {
      color: #009fe3 !important;
    }

    #product-cctv {
      scroll-margin-top: 120px; /* ปรับตามความสูง header */
    }

    .scroll-top {
      background: #009fe3 !important;
    }
    .scroll-top:hover i {
      color: #fff !important;
    }

    .button {
      background: #009fe3 !important;
    }

    .language-switch .lang-item {
      color: #585978;           /* สีปกติ */
      font-weight: 500;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    /* สีตอน hover */
    .language-switch .lang-item:hover {
      color: #009fe3;
    }

    /* ภาษาที่เลือกอยู่ */
    .language-switch .lang-item.active {
      color: #009fe3;
      font-weight: 700;
    }

    .language-switch span {
      color: #b0b0c3;           /* สีเส้น | */
    }

    .header.header-2 .navbar-nav .nav-item a:hover, .header.header-2 .navbar-nav .nav-item a.active {
      color: #009fe3 !important;
    }
    .header.header-2 .navbar-nav .nav-item a::after {
      background: #009fe3 !important;
    }

    .contact-style-6 .left-wrapper .single-item .icon {
      /* background: #2F80ED; */
      background: #009fe3 !important;
    }

    .nav-item.has-sub-menu > a {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .nav-item.has-sub-menu > a i {
      font-size: 12px;
      transition: transform 0.3s ease;
    }
    .nav-item.has-sub-menu:hover > a i {
      transform: rotate(180deg);
    }

    /* ทำให้ accordion-button ใน column ซ้ายและขวา มีความสูงเท่ากัน */
    .accordion-item .accordion-button {
      height: 60px; /* ปรับค่าให้พอดีตามที่ต้องการ */
      display: flex;
      align-items: center; /* จัดข้อความให้อยู่กึ่งกลางแนวตั้ง */
    }
    /* ถ้าอยากให้ทุกปุ่มสูงเท่ากันโดยอิงปุ่มสูงสุดใน row */
    .row .accordion-item {
      display: flex;
      flex-direction: column;
    }
    .row .accordion-item .accordion-button {
      flex: 1;
      align-items: center;
      font-size: 14px;
    }
    .accordion-body {
      font-size: 14px;
    }
	
    .custom-caption {
        background-color: rgba(0, 0, 0, 0.5); /* สีดำโปร่งใส */
        padding: 20px; /* เพิ่มพื้นที่ภายในกรอบ */
        border-radius: 15px; /* มุมโค้ง */
        display: inline-block; /* ให้ขนาดพอดีกับข้อความ */
        width: 300px;
        text-align: center;
    }
    .custom-caption h4, 
    .custom-caption p {
        color: #fff;
        margin: 0;
    }

    /*.carousel-item {
        position: relative;
    }

    .left-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 500px;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 1;
    }

    .carousel-caption-left {
        position: absolute;
        top: 0;
        left: 0;
        width: 500px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 30px;
        color: #fff;
        z-index: 2;
    }*/
  </style>