.elementor-28 .elementor-element.elementor-element-0e9e823{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-28 .elementor-element.elementor-element-a303b2a{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-28 .elementor-element.elementor-element-d089757{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-6b06455{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-6a8d37b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-a7b8461{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-75236d1{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-bfe2b32{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28 .elementor-element.elementor-element-14af922{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-28 .elementor-element.elementor-element-0fdd58b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}body.elementor-page-28{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-419c6bc *//* กันสกรอลแนวนอนจาก 100vw */
html, body{overflow-x:hidden;}

/* ===== HERO Full Background (Clean Premium) ===== */
.dx-hero-bgfull{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(-50vw + 50%) !important;

  position:relative;
  overflow:hidden;

  background-image:
    radial-gradient(900px 520px at 18% 48%,
      rgba(0,0,0,.16) 0%,
      rgba(0,0,0,.08) 50%,
      rgba(0,0,0,0) 78%
    ),
    linear-gradient(90deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.82) 42%,
      rgba(255,255,255,.50) 68%,
      rgba(255,255,255,.10) 100%
    ),
    url("https://dixellasia.com/images/hero.webp");

  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;

  min-height:560px;
  display:flex;
  align-items:center;

  border-bottom:1px solid rgba(2,81,152,.08);
}

/* glow เบาๆ ด้านขวา */
.dx-hero-bgfull::before{
  content:"";
  position:absolute;
  right:-10%;
  top:-35%;
  width:52%;
  height:160%;
  background:radial-gradient(closest-side, rgba(2,81,152,.10), rgba(2,81,152,0) 70%);
  transform:rotate(10deg);
  opacity:.55;
  pointer-events:none;
}

/* Inner */
.dx-hero-bgfull__inner{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:84px 20px 70px;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}
.dx-hero-bgfull__inner > *{ max-width:720px; }

/* Kicker (ถ้าอยากใช้ในอนาคต) */
.dx-kicker{
  display:inline-block;
  width:fit-content;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(2,81,152,.08);
  border:1px solid rgba(2,81,152,.14);
  color:#025198;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Title */
.dx-hero-bgfull__inner h1{
  margin:0;
  color:#1f2d3d;
  font-size:2.45rem;
  font-weight:900;
  line-height:1.15;
}

/* Text */
.dx-hero-bgfull__inner p{
  margin:0 0 10px;
  color:#4a5a6a;
  font-size:1.05rem;
  line-height:1.85;
  max-width:680px;
}

/* Buttons */
.dx-btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.dx-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 22px;border-radius:999px;
  font-weight:900;text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  border:1px solid transparent;
}
.dx-btn.primary{
  background:#025198;
  color:#fff;
  box-shadow:0 14px 30px rgba(2,81,152,.20);
}
.dx-btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(2,81,152,.24);
}
.dx-btn.ghost{
  background:rgba(255,255,255,.92);
  color:#025198;
  border:1px solid rgba(2,81,152,.22);
}
.dx-btn.ghost:hover{
  transform:translateY(-2px);
  background:#fff;
}

/* Trust pills */
.dx-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.dx-trust span{
  display:inline-flex;align-items:center;
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(2,81,152,.12);
  box-shadow:0 10px 22px rgba(0,0,0,.045);
  color:rgba(31,45,61,.92);
  font-size:.92rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.dx-trust span:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 26px rgba(0,0,0,.06);
}

/* Fade-up */
@keyframes dxFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.dx-hero-bgfull__inner > *{
  opacity:0;
  animation:dxFadeUp .6s ease forwards;
}
.dx-hero-bgfull__inner h1{animation-delay:.10s}
.dx-hero-bgfull__inner p{animation-delay:.16s}
.dx-hero-bgfull__inner .dx-btns{animation-delay:.22s}
.dx-hero-bgfull__inner .dx-trust{animation-delay:.28s}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dx-hero-bgfull__inner > *{opacity:1;animation:none}
  .dx-btn, .dx-trust span{transition:none}
}

/* Responsive */
@media(max-width:980px){
  .dx-hero-bgfull{
    min-height:480px;
    background-position:center;
    background-image:
      linear-gradient(180deg,
        rgba(255,255,255,.94) 0%,
        rgba(255,255,255,.78) 55%,
        rgba(255,255,255,.55) 100%
      ),
      url("https://dixellasia.com/images/hero.webp");
  }
  .dx-hero-bgfull__inner{padding:58px 18px 46px;}
  .dx-hero-bgfull__inner h1{font-size:1.85rem;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-23b7d09 *//* =========================================================
  PRODUCTS (HYBRID) — HOME (TH) | CLEAN PREMIUM (NO SHADOW)
  OPTION 2: NO DIVIDER LINE (modern) — use spacing + title weight
  UPDATE: Arrow style matches SOLUTIONS (›)
  UPDATED: use global tokens (Kadence)
  FIX: match width with SOLUTIONS = 1320px (single source of truth)
========================================================= */

/* ===== Scope + Tokens ===== */
.dx-products-hybrid{
  --dx-blue: var(--dixell-blue, #025198);
  --dx-text: var(--dark, #0f2a44);
  --dx-soft: var(--soft, #4a5a6a);
  --dx-bg:   var(--bg, #f5f7fb);
  --dx-card: #ffffff;
  --dx-border: rgba(2,81,152,.18);
  --dx-r: 18px;

  /* ✅ match Solutions width */
  --dx-inner: 1320px;
}

/* กันธีม/ปลั๊กอินไปทับ */
.dx-products-hybrid a,
.dx-products-hybrid a:hover,
.dx-products-hybrid a:focus,
.dx-products-hybrid a:active{
  text-decoration:none !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* โชว์ focus สำหรับคีย์บอร์ด (ดูเป็นมืออาชีพ/เข้าถึงได้) */
.dx-products-hybrid a:focus-visible{
  outline:3px solid rgba(28,116,217,.35);
  outline-offset:2px;
  border-radius:14px;
}

/* ===== SECTION ===== */
.dx-products-hybrid{
  background: var(--dx-bg);
  padding: 60px 16px 74px;
}

/* ✅ INNER = 1320px (เหมือน Solutions) */
.dx-products-hybrid .dxph-inner{
  max-width: var(--dx-inner) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== HEAD ===== */
.dx-products-hybrid .dxph-head{
  text-align:center;
  max-width: 980px;
  margin: 0 auto 18px;
}
.dx-products-hybrid .dxph-title{
  margin: 0 0 10px;
  font-size: clamp(26px, 2.2vw, 36px);
  font-weight: 950;
  color: var(--dx-blue);
  letter-spacing: .06em;
}
.dx-products-hybrid .dxph-sub{
  margin: 0 auto;
  color: var(--dx-soft);
  font-size: 16px;
  line-height: 1.7;
}

/* ===== FEATURED GRID ===== */
.dx-products-hybrid .dxph-featured{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
  align-items: stretch;
}

/* Card (no shadow) */
.dx-products-hybrid .dxph-card{
  background: var(--dx-card);
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-r);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.dx-products-hybrid .dxph-card:hover{
  border-color: rgba(2,81,152,.30);
  transform: translateY(-1px);
  background: linear-gradient(0deg, rgba(2,81,152,.012), rgba(2,81,152,0));
}

/* Image */
.dx-products-hybrid .dxph-img{
  display:block;
  background:#fff;
  border-bottom: 1px solid rgba(2,81,152,.10);
  aspect-ratio: 16/7;
}
.dx-products-hybrid .dxph-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding: 10px 12px;
  display:block;
}

/* Body */
.dx-products-hybrid .dxph-body{
  padding: 14px 14px 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  flex:1;
}
.dx-products-hybrid .dxph-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.dx-products-hybrid .dxph-badge{
  display:inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(2,81,152,.06);
  border: 1px solid rgba(2,81,152,.16);
  color: var(--dx-blue);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dx-products-hybrid .dxph-size{
  color: var(--dx-soft);
  font-weight: 800;
  font-size: 13px;
}

/* Title */
.dx-products-hybrid .dxph-h{
  margin:0;
  font-size: 16px;
  font-weight: 950;
  color: var(--dx-text);
  line-height: 1.25;
}
.dx-products-hybrid .dxph-h a{ color: inherit; }

/* bullets */
.dx-products-hybrid .dxph-bullets{
  margin:0;
  padding-left: 18px;
  color: var(--dx-soft);
  font-size: 14px;
  line-height: 1.5;
}
.dx-products-hybrid .dxph-bullets li{ margin: 4px 0; }

/* Footer buttons (no shadow) */
.dx-products-hybrid .dxph-foot{
  margin-top:auto;
  display:flex;
  gap:10px;
}
.dx-products-hybrid .dxph-btn{
  flex:1;
  height: 40px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 15px;
  border: 1px solid transparent;
  box-shadow:none !important;
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.dx-products-hybrid .dxph-btn.primary{
  background: var(--dx-blue);
  border-color: var(--dx-blue);
  color:#fff !important;
}
.dx-products-hybrid .dxph-btn.ghost{
  background: rgba(2,81,152,.06);
  border-color: rgba(2,81,152,.24);
  color: var(--dx-blue) !important;
}
.dx-products-hybrid .dxph-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* ===== CATEGORY (NO LINE) ===== */
.dx-products-hybrid .dxpc-wrap{
  margin-top: 34px;
  border-top: 0 !important;
}
.dx-products-hybrid .dxpc-head{
  text-align:left;
  margin: 0 0 12px;
}
.dx-products-hybrid .dxpc-kicker{
  display:inline-block;
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(2,81,152,.70);
}
.dx-products-hybrid .dxpc-title{
  margin:0;
  font-size: 18px;
  font-weight: 950;
  color: var(--dx-text);
  letter-spacing: -.01em;
}

.dx-products-hybrid .dxpc-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  align-items: stretch;
}
.dx-products-hybrid .dxpc-tile{
  background:#fff;
  border:1px solid rgba(2,81,152,.14);
  border-radius: 16px;
  padding: 14px 14px 12px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  height:100%;
  min-height: 152px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.dx-products-hybrid .dxpc-tile:hover{
  border-color: rgba(2,81,152,.28);
  transform: translateY(-1px);
  background: linear-gradient(0deg, rgba(2,81,152,.010), rgba(2,81,152,0));
}
.dx-products-hybrid .dxpc-name{
  font-weight: 950;
  color: var(--dx-text);
  font-size: 15px;
  line-height: 1.25;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.dx-products-hybrid .dxpc-desc{
  color: var(--dx-soft);
  font-size: 13px;
  line-height: 1.45;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  margin:0;
}

/* Link style to match SOLUTIONS (text + chevron ›) */
.dx-products-hybrid .dxpc-links{ margin-top:auto; }
.dx-products-hybrid .dxpc-link{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  color: var(--dx-blue);
  font-weight: 900;
  font-size: 14px;
}
.dx-products-hybrid .dxpc-chev{
  display:inline-block;
  font-weight: 900;
  opacity: .9;
  transform: translateY(-.5px);
}

/* footer */
.dx-products-hybrid .dxpc-foot{
  display:flex;
  justify-content:center;
  margin-top: 14px;
}
.dx-products-hybrid .dxpc-all{
  color: var(--dx-blue);
  font-weight: 900;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(2,81,152,.22);
  background: rgba(2,81,152,.06);
  box-shadow:none !important;
  display:inline-flex;
  align-items:center;
  gap: 6px;
}

/* Responsive */
@media (max-width:1100px){
  .dx-products-hybrid .dxpc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:980px){
  .dx-products-hybrid .dxph-featured{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:680px){
  .dx-products-hybrid .dxph-featured{ grid-template-columns: 1fr; }
  .dx-products-hybrid .dxpc-grid{ grid-template-columns: 1fr; }
}
@media (max-width:640px){
  .dx-products-hybrid{ padding: 50px 14px 60px; }
  .dx-products-hybrid .dxph-foot{ flex-direction:column; }
  .dx-products-hybrid .dxph-btn{ width:100%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dx-products-hybrid .dxph-card,
  .dx-products-hybrid .dxpc-tile,
  .dx-products-hybrid .dxph-btn{ transition:none; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2e42dbd *//* ==============================
  BIG CTA — SERVICE CENTER 24/7
  Clean / Enterprise / Width 1320
  + Subtle Background Image (Call Center) with Overlay
  (No outer card)
================================ */

/* กันธีม/ปลั๊กอินไปทำ underline/เงา */
#cta-247 a,
#cta-247 a:hover,
#cta-247 a:focus,
#cta-247 a:active{
  text-decoration:none !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* focus ring (ดูโปร + A11y) */
#cta-247 a:focus-visible{
  outline:3px solid rgba(255,255,255,.40);
  outline-offset:3px;
  border-radius:999px;
}

/* ===== Section BG (Gradient + Image) ===== */
.dx-cta247{
  /* เปลี่ยน URL รูปตรงนี้ */
  --dx-bgimg: url("https://dixellasia.com/images/service/service-center.png");

  /* ความจางของรูป (แนะนำ 0.10–0.14) */
  --dx-img-opacity: .18;

  position:relative;
  padding: 56px 16px;
  overflow:hidden; /* กันรูป/เอฟเฟกต์ล้น */

  /* base gradient (แบรนด์เดิม) */
  background:
    radial-gradient(900px 380px at 18% 18%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(180deg, #2f78bd 0%, #1f66ad 55%, #16589a 100%);
}

/* Layer: background image (subtle) */
.dx-cta247::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--dx-bgimg);
  background-size: cover;
  background-position: 78% center; /* ขวาหน่อย ไม่ชนข้อความ */
  background-repeat:no-repeat;
  opacity: var(--dx-img-opacity);
  filter: saturate(.95) contrast(.95);
  transform: scale(1.03); /* กันขอบว่าง */
  z-index:0;
  pointer-events:none;
}

/* Layer: overlay to keep text crisp */
.dx-cta247::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 520px at 18% 45%, rgba(0,0,0,.14), transparent 60%),
    linear-gradient(90deg,
      rgba(10,56,110,.70) 0%,
      rgba(20,92,165,.55) 42%,
      rgba(20,92,165,.40) 70%,
      rgba(20,92,165,.30) 100%
    );
  z-index:1;
  pointer-events:none;
}

/* hairlines บน/ล่าง */
.dx-cta247{
  /* hairlines ใช้ background layer แยก เพื่อไม่ทับ overlay */
}
.dx-cta247 .dx-cta247-hair-top,
.dx-cta247 .dx-cta247-hair-bot{ display:none; } /* เผื่อมีของเดิม */

.dx-cta247 .dx-cta247-inner::before{ display:none; } /* กันของเดิมบางเคส */

.dx-cta247{
  /* ใช้ pseudo แยกเพิ่ม hairline โดยไม่รบกวน overlay */
}
.dx-cta247{
  /* top line */
}
.dx-cta247{
  /* bottom line */
}
.dx-cta247{
  /* ทำเป็น pseudo เพิ่มอีกชุดด้วย box-shadow แทน hairline */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.08);
}

/* ===== Inner layout (1320) ===== */
.dx-cta247-inner{
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;

  /* ✅ ไม่มีกรอบนอก */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;

  /* ให้อยู่เหนือ overlay */
  position:relative;
  z-index:2;
}

/* ===== Left ===== */
.dx-cta247-title{
  margin:0 0 8px;
  color:#fff;
  font-weight:950;
  letter-spacing:-.01em;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height:1.2;
}

.dx-cta247-sub{
  margin:0;
  color: rgba(255,255,255,.90);
  font-size: 15px;
  line-height:1.6;
  max-width: 78ch;
}

/* Trust badges */
.dx-cta247-badges{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.dx-cta247-badges span{
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-weight:900;
  font-size:12px;
  backdrop-filter: blur(2px);
}

/* ===== Right actions (2-3 buttons) ===== */
.dx-cta247-right{
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center;
  align-items:flex-end; /* ✅ desktop ชิดขวาดูเรียบร้อย */
  position:relative;
  z-index:2;
}

/* Base button */
.dx-cta247-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  /* ✅ ยาวแบบ enterprise แต่ไม่ใหญ่เกิน */
  min-height: 48px;
  padding: 0 20px;
  width: auto;

  min-width: 360px;      /* ปรับได้ 340–420 */
  max-width: 520px;

  border-radius: 999px;
  font-weight: 950;
  font-size: 15px;
  text-align:center;

  border:1px solid transparent;
  transition: transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.dx-cta247-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

/* Styles */
.dx-cta247-btn.primary{
  background:#fff;
  color:#0b3f77 !important;
}
.dx-cta247-btn.secondary{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.38);
  color:#fff !important;
}
.dx-cta247-btn.ghost{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.24);
  color:#fff !important;
}
.dx-cta247-btn.outline{
  background: transparent;
  border-color: rgba(255,255,255,.34);
  color:#fff !important;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .dx-cta247-inner{
    grid-template-columns: 1fr;
  }
  .dx-cta247-right{
    align-items:flex-start;
  }
  .dx-cta247-btn{
    min-width: 320px;
  }

  /* ปรับตำแหน่งภาพให้ไม่ชน */
  .dx-cta247::before{
    background-position: 70% center;
  }
}

@media (max-width: 640px){
  .dx-cta247{ padding: 40px 14px; }

  .dx-cta247-right{
    align-items: stretch; /* ✅ มือถือเต็มแถว */
  }
  .dx-cta247-btn{
    width: 100%;
    min-width: 0;
    min-height: 56px;     /* ✅ กดง่าย */
    padding: 0 18px;
    font-size: 16px;
  }

  /* มือถือ: ให้ภาพอยู่ “ด้านหลัง” แบบไม่รบกวน */
  .dx-cta247::before{
    background-position: center;
    opacity: .10;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .dx-cta247-btn{ transition:none; }
}

.dx-cta247-sub{
  color: rgba(255,255,255,.92);
}

@media (min-width: 1600px){
  .dx-cta247{
    --dx-img-opacity: .16;
  }
}

.dx-catstrip-btn-primary i,
.dx-catstrip-btn-primary svg{
  background: rgba(2,81,152,.10);
  padding:6px;
  border-radius:999px;
}

/* เพิ่มความสูงรวมของ Section */
.dx-cta247{
  padding: 72px 16px; /* เดิม 56px → เพิ่มนิดเดียว */
}

.dx-cta247-title{
  margin-bottom: 12px; /* เดิม ~8px */
}

.dx-cta247-sub{
  margin-top: 4px;
}

@media (max-width: 640px){
  .dx-cta247{
    padding: 56px 14px; /* คุมไม่ให้ยืดเกิน */
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3bbfd64 */dx-solutions-section/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7370003 */dx-news-section/* End custom CSS */