.elementor-20 .elementor-element.elementor-element-0f424d7{--display:flex;--min-height:520px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:48px 0px;--row-gap:48px;--column-gap:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:24px;--padding-right:24px;}.elementor-20 .elementor-element.elementor-element-0f424d7:not(.elementor-motion-effects-element-type-background), .elementor-20 .elementor-element.elementor-element-0f424d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(135deg, #0F0C29 0%, #302B63 100%);}.elementor-20 .elementor-element.elementor-element-98be9c8{width:var( --container-widget-width, 400px );max-width:400px;--container-widget-width:400px;--container-widget-flex-grow:0;}.elementor-20 .elementor-element.elementor-element-e227b11{--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-20 .elementor-element.elementor-element-e7b529a{--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-20 .elementor-element.elementor-element-2d99a25{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-fd34e77 *//* ===== SECTION ===== */
.guru-section {
  background: #0f0d25;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 24px;
  color: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

/* ===== HEADER ===== */
.guru-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.guru-header h2 {
  font-size: 28px;
  margin: 0;
  color: #fff;
}

.guru-header a {
  color: #c9b8ff;
  text-decoration: none;
  font-size: 15px;
}

/* ===== GRID ===== */
.guru-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

/* ===== CARD ===== */
.guru-card {
  background: #16142f;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.25s ease;
  position: relative;
}

.guru-card:hover {
  transform: translateY(-6px);
  border-color: rgba(140,100,255,.6);
  box-shadow: 0 12px 30px rgba(100,60,255,.25);
}

/* ===== IMAGE ===== */
.guru-image {
  height: 150px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background-size: cover;
  background-position: center;
  position: relative;
}

/* glow overlay */
.guru-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.15), transparent 60%);
}

/* fallback gradient (ถ้ายังไม่ใส่ g1-g5) */
.guru-image {
  background: linear-gradient(135deg, #6425d9, #27115f);
}

/* ===== แต่ละการ์ด ===== */
.guru-image.g1 {
  background-image:
    url('https://via.placeholder.com/200x200'),
    linear-gradient(135deg, #6425d9, #27115f);
}

.guru-image.g2 {
  background-image:
    url('https://via.placeholder.com/200x200'),
    linear-gradient(135deg, #1393e8, #19314a);
}

.guru-image.g3 {
  background-image:
    url('https://via.placeholder.com/200x200'),
    linear-gradient(135deg, #e36f6b, #7d4be8);
}

.guru-image.g4 {
  background-image:
    url('https://via.placeholder.com/200x200'),
    linear-gradient(135deg, #36384b, #6a5be8);
}

.guru-image.g5 {
  background-image:
    url('https://via.placeholder.com/200x200'),
    linear-gradient(135deg, #787c70, #ffd166);
}

/* ===== BODY ===== */
.guru-body {
  padding: 14px;
}

/* ===== NAME ROW ===== */
.guru-name-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.guru-name-row h3 {
  margin: 0;
  font-size: 17px;
  color: #fff;
}

/* ===== BADGE ===== */
.guru-name-row span {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
}

.guru-name-row span.guru {
  background: rgba(140,100,255,.15);
  color: #cbb6ff;
}

.guru-name-row span.expert {
  background: rgba(255,170,80,.15);
  color: #ffcc80;
}

/* ===== TEXT ===== */
.guru-rating,
.guru-points,
.guru-tags {
  font-size: 14px;
  margin-top: 6px;
  color: #e9e5ff;
}

.guru-rating small {
  color: #b9b3d4;
}

.guru-tags {
  color: #c9c3df;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8c384b9 */.qa-section {
  margin-top: 40px;
}

.qa-section h2 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #1a1a1a;
}

.qa-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qa-item {
  background: #ffffff;
  padding: 18px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  font-size: 16px;
  transition: all .2s ease;
  cursor: pointer;
}

.qa-item:hover {
  transform: translateY(-2px);
}

.qa-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.1);
}

.qa-section {
  margin-top: 48px;
}

.qa-item {
  border-radius: 14px;
}

.qa-item:hover {
  transform: translateY(-3px);
}/* End custom CSS */