.elementor-354 .elementor-element.elementor-element-8483299{--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;--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-354 .elementor-element.elementor-element-a65c9b2{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-354 .elementor-element.elementor-element-23094df .elementor-heading-title{color:var( --e-global-color-secondary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-354 .elementor-element.elementor-element-bb75628{--display:flex;}.elementor-354 .elementor-element.elementor-element-b0a0dab{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-354 .elementor-element.elementor-element-6a80315{text-align:start;}.elementor-354 .elementor-element.elementor-element-914cb27{--display:flex;}.elementor-354 .elementor-element.elementor-element-353e8b8{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-354 .elementor-element.elementor-element-227ccd0{--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-354 .elementor-element.elementor-element-9b00bbb{--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-354 .elementor-element.elementor-element-dbe3b55{--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-354 .elementor-element.elementor-element-4b41839 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:20px 20px 20px 20px;}.elementor-354 .elementor-element.elementor-element-2ea2d30{--display:flex;}.elementor-354 .elementor-element.elementor-element-a0a7320{--spacer-size:50px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-354 .elementor-element.elementor-element-227ccd0{--width:50%;}.elementor-354 .elementor-element.elementor-element-9b00bbb{--width:50%;}}/* Start custom CSS *//* ================================
   Guide / Hotspot Global CSS
   ================================ */

.guide-box {
  position: relative;
  max-width: 1200px;
  margin: auto;
}

.guide-box img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Hotspot ===== */
.guide-box .hotspot {
  position: absolute;
  border: 2px solid red;
  border-radius: 6px;
  cursor: pointer;
  z-index: 5;
  background: rgba(255, 0, 0, 0);
}

/* hover highlight */
.guide-box .hotspot:hover {
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.2);
}

/* ===== Step number (Responsive) ===== */
.guide-box .hotspot::after {
  content: attr(data-step);
  position: absolute;
  top: -0.6em;
  right: -0.6em;

  width: clamp(18px, 2.2vw, 24px);
  height: clamp(18px, 2.2vw, 24px);

  background: red;
  color: #fff;
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: bold;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Tooltip (Responsive Core) ===== */
.guide-box .tooltip {
  position: absolute;
  bottom: 100%;
  left: 0;

  background: rgba(0, 0, 0, 0.85);
  color: #fff;

  padding: clamp(8px, 1.5vw, 14px);
  border-radius: 8px;

  font-size: clamp(12px, 1.4vw, 14px);
  line-height: 1.5;

  width: max-content;
  max-width: min(90vw, 360px); /* สำคัญมาก */
  white-space: normal;
  word-break: break-word;

  /* hide */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 10;
}

/* Tooltip ยาวพิเศษ */
.guide-box .tooltip.long {
  max-width: min(90vw, 420px);
}

/* ===== Desktop Hover ===== */
@media (hover: hover) {
  .guide-box .hotspot:hover .tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* ===== Touch / Mobile ===== */
@media (hover: none) {
  .guide-box .hotspot {
    outline: none;
  }

  .guide-box .hotspot:focus .tooltip,
  .guide-box .hotspot:focus-within .tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* ===== Tablet ===== */
@media (max-width: 1024px) {
  .guide-box .tooltip {
    font-size: 13px;
    max-width: 80vw;
  }
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  .guide-box .hotspot {
    border-width: 1.5px;
  }.guide-box .hotspot::after {
    width: 10px;
    height: 10px;
    font-size: 8px;
  }

  .guide-box .tooltip {
    font-size: 10px;
    max-width: 55vw;
    left: 100px;
    transform: translate(-50%, 8px);
    text-align: left;
  }

  .guide-box .hotspot:focus .tooltip,
  .guide-box .hotspot:focus-within .tooltip {
    transform: translate(-50%, 0);
  }
}/* End custom CSS */