/* Reolink Vision Toggle Pro 1.2.1 - Fixed Width & Padding Conflicts */
.rvtp-wrap{--fg:#fff;--bg:#000;--border:#fff;--gap:12px;--rvtp-aspect:16/9;background:var(--bg);border-radius:24px;padding:0}
.rvtp-full-bleed{padding:0}
.rvtp-title{margin:0 0 8px 0;color:#fff;font-size:clamp(20px,2.2vw,28px)}
/* แก้ไข: เปลี่ยน max-width เป็น 100% เพื่อให้ Elementor ควบคุมความกว้างได้ */
.rvtp-desc{margin:0;color:#e5e7eb;max-width:100% !important}

.rvtp-tabs{display:flex;justify-content:center;margin:18px 0}
.rvtp-tablist{display:grid;gap:var(--gap);flex-wrap:wrap;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:center}
.rvtp-tab{appearance:none;cursor:pointer;padding:10px 16px;border:1px solid var(--border);
  background:#000;color:#fff;border-radius:12px;font:600 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;display:inline-flex;align-items:center}
.rvtp-tab[aria-selected="true"]{background:#fff;color:#000}

.rvtp-card{position:relative;background:#000;border-radius:18px;padding:8px;overflow:hidden}
.rvtp-panel{}
.rvtp-media{position:relative}
.rvtp-aspect{position:relative;width:100%;aspect-ratio:var(--rvtp-aspect)}
.rvtp-aspect > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rvtp-aspect .rvtp-poster-only{position:absolute;inset:0;}
.rvtp-aspect .rvtp-poster-only img{width:100%;height:100%;object-fit:cover;display:block;}

/* Presets via CSS variables */
.preset-classic{--bg:#000;--border:#fff}
.preset-light{--bg:#fff;--border:#000}
.preset-outline .rvtp-tab{background:transparent}
.preset-pill .rvtp-tab{border-radius:999px}

/* Per-device hide utilities */
@media (min-width:1025px){ .rvtp-wrap .rvtp-hide-desktop{display:none !important} }
@media (min-width:768px) and (max-width:1024px){ .rvtp-wrap .rvtp-hide-tablet{display:none !important} }
@media (max-width:767px){ .rvtp-wrap .rvtp-hide-mobile{display:none !important} }

/* Desktop/Mobile source switch */
.rvtp-above-768{display:none}
.rvtp-below-768{display:block}
@media(min-width:768px){.rvtp-above-768{display:block}.rvtp-below-768{display:none}}

/* Underline variant for tabs */
.rvtp-tabs-underline .rvtp-tab{
  background:transparent;
  border-radius:0;
  border:none;
  border-bottom:2px solid transparent;
  padding-top:8px;
  padding-bottom:8px;
}
.rvtp-tabs-underline .rvtp-tab[aria-selected="true"]{
  border-bottom-color:currentColor;
}

/* Safeguard for tabs */
.rvtp-tabs{display:flex !important}
.rvtp-tab{display:inline-flex !important}

/* Overlay Play/Pause button */
.rvtp-aspect.has-overlay{position:relative}
.rvtp-overlay-btn{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.55);
  color:inherit;
  padding:0;
  width:48px;
  height:48px;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,transform .15s ease,box-shadow .15s ease,opacity .2s ease;
}
.rvtp-overlay-btn:hover{
  transform:scale(1.03);
  box-shadow:0 10px 20px rgba(0,0,0,.4);
}
.rvtp-overlay-btn .rvtp-ico{
  display:none;
}
.rvtp-overlay-btn[data-state="paused"] .rvtp-ico-play{
  display:flex;
}
.rvtp-overlay-btn[data-state="playing"] .rvtp-ico-pause{
  display:flex;
}

/* Icon style variations */
.rvtp-overlay-btn[data-icon-style="play-only"] .rvtp-ico-pause{
  display:none !important;
}
.rvtp-overlay-btn[data-icon-style="pause-only"] .rvtp-ico-play{
  display:none !important;
}

/* Positions */
.rvtp-pos-center{top:50%;left:50%;transform:translate(-50%, -50%)}
.rvtp-pos-top-left{top:16px;left:16px}
.rvtp-pos-top-right{top:16px;right:16px}
.rvtp-pos-bottom-left{bottom:16px;left:16px}
.rvtp-pos-bottom-right{bottom:16px;right:16px}

/* Offsets via CSS vars */
.rvtp-aspect.has-overlay .rvtp-overlay-btn{
  transform:translate(var(--rvtp-offset-x,0),var(--rvtp-offset-y,0));
}
.rvtp-aspect.has-overlay .rvtp-overlay-btn.rvtp-pos-center{
  transform:translate(calc(-50% + var(--rvtp-offset-x,0)),calc(-50% + var(--rvtp-offset-y,0)));
}

/* Overlay visibility by device */
@media (min-width:1025px){ .rvtp-overlay-hide-desktop{display:none !important} }
@media (min-width:768px) and (max-width:1024px){ .rvtp-overlay-hide-tablet{display:none !important} }
@media (max-width:767px){ .rvtp-overlay-hide-mobile{display:none !important} }

/* Replay icon state */
.rvtp-overlay-btn .rvtp-ico-replay{display:none;}
.rvtp-overlay-btn[data-state="replay"] .rvtp-ico-replay{display:flex;}
.rvtp-overlay-btn[data-state="replay"] .rvtp-ico-play,
.rvtp-overlay-btn[data-state="replay"] .rvtp-ico-pause{display:none !important;}
.rvtp-overlay-btn[data-state="replay"]:hover .rvtp-ico-replay svg{ animation:rvtp-replay-spin 1.4s linear infinite; }
@keyframes rvtp-replay-spin{ to { transform:rotate(360deg); } }

/* ===== LR Layout ===== */
.rvtp-wrap.rvtp-lr{
  display:grid;
  grid-template-columns: minmax(0, var(--rvtp-lr-text,50%)) minmax(0, var(--rvtp-lr-video,50%));
  column-gap:var(--rvtp-lr-gap,0px);
  row-gap:0;
  align-items:stretch;
}
/* Text Left · Video Right */
.rvtp-wrap.rvtp-lr.rvtp-lr-text_left .rvtp-head,
.rvtp-wrap.rvtp-lr.rvtp-lr-text_left .rvtp-tabs{ grid-column:1; }
.rvtp-wrap.rvtp-lr.rvtp-lr-text_left .rvtp-card{ grid-column:2; grid-row:1 / span 2; }
/* Video Left · Text Right */
.rvtp-wrap.rvtp-lr.rvtp-lr-video_left .rvtp-head,
.rvtp-wrap.rvtp-lr.rvtp-lr-video_left .rvtp-tabs{ grid-column:2; }
.rvtp-wrap.rvtp-lr.rvtp-lr-video_left .rvtp-card{ grid-column:1; grid-row:1 / span 2; }
/* Mobile: stack */
@media (max-width:767px){ .rvtp-wrap.rvtp-lr{ display:block; } }

/* === Vertical Layout === */
.rvtp-wrap.rvtp-lr.rvtp-lr-text_top,
.rvtp-wrap.rvtp-lr.rvtp-lr-video_top{ display:flex; flex-direction:column; row-gap:var(--rvtp-lr-gap,0px); }
.rvtp-wrap.rvtp-lr.rvtp-lr-video_top .rvtp-card{ order:1; }
.rvtp-wrap.rvtp-lr.rvtp-lr-video_top .rvtp-head,
.rvtp-wrap.rvtp-lr.rvtp-lr-video_top .rvtp-tabs{ order:2; }
@media (max-width:767px){
  .rvtp-wrap.rvtp-lr.rvtp-lr-text_top,
  .rvtp-wrap.rvtp-lr.rvtp-lr-video_top{ display:flex; }
}

/* ===== Single Layout Modes ===== */
.rvtp-wrap.rvtp-single-video .rvtp-head,
.rvtp-wrap.rvtp-single-video .rvtp-tabs{ display: none !important; }
.rvtp-wrap.rvtp-single-video .rvtp-media{ width: 100%; }
.rvtp-wrap.rvtp-single-text .rvtp-media{ display: none !important; }
.rvtp-wrap.rvtp-single-text .rvtp-head,
.rvtp-wrap.rvtp-single-text .rvtp-tabs{ width: 100%; }

/* ===== Text Overlay on Video ===== */
.rvtp-wrap.rvtp-text-overlay-on{ position: relative; }
.rvtp-wrap.rvtp-text-overlay-on .rvtp-card{ position: relative; overflow: hidden; }
.rvtp-wrap.rvtp-text-overlay-on .rvtp-head{
  position: absolute; left: 0; right: 0; z-index: 3; pointer-events: none;
}
.rvtp-wrap.rvtp-text-overlay-on .rvtp-head > *{ pointer-events: auto; }
.rvtp-wrap.rvtp-text-overlay-on.rvtp-text-overlay-pos-bottom .rvtp-head{
  bottom: 0; transform: translateY(var(--rvtp-overlay-offset-y,0)); padding: 16px 20px 20px;
}
.rvtp-wrap.rvtp-text-overlay-on.rvtp-text-overlay-pos-middle .rvtp-head{
  top: 50%; transform: translateY(calc(-50% + var(--rvtp-overlay-offset-y,0))); padding: 16px 20px;
}
.rvtp-wrap.rvtp-text-overlay-on.rvtp-text-overlay-pos-top .rvtp-head{
  top: 0; transform: translateY(var(--rvtp-overlay-offset-y,0)); padding: 20px 20px 16px;
}
.rvtp-wrap.rvtp-text-overlay-on .rvtp-head::before{ content: ''; position: absolute; left: 0; right: 0; z-index: -1; }
.rvtp-wrap.rvtp-text-overlay-on.rvtp-text-overlay-pos-bottom .rvtp-head::before{
  bottom: 0; height: 60%;
  background: linear-gradient(to top, var(--rvtp-overlay-bg, rgba(0,0,0,0.75)), rgba(0,0,0,0));
}
.rvtp-wrap.rvtp-text-overlay-on.rvtp-text-overlay-pos-top .rvtp-head::before{
  top: 0; height: 60%;
  background: linear-gradient(to bottom, var(--rvtp-overlay-bg, rgba(0,0,0,0.75)), rgba(0,0,0,0));
}
.rvtp-wrap.rvtp-text-overlay-on.rvtp-text-overlay-pos-middle .rvtp-head::before{
  top: -20%; bottom: -20%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), var(--rvtp-overlay-bg, rgba(0,0,0,0.75)) 30%, var(--rvtp-overlay-bg, rgba(0,0,0,0.75)) 70%, rgba(0,0,0,0));
}
.rvtp-wrap.rvtp-text-overlay-on .rvtp-tabs{ margin-top: 10px; margin-bottom: 0; justify-content: flex-start; }
@media (max-width: 767px){ .rvtp-wrap.rvtp-text-overlay-on .rvtp-card{ padding-bottom: 0; } }
.rvtp-aspect.has-overlay .rvtp-overlay-btn{ z-index: 4; }

/* Popup external video */
.rvtp-popup{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; z-index:9999;
}
.rvtp-popup.is-open{ opacity:1; pointer-events:auto; }
.rvtp-popup-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7); opacity:0; transition:opacity .25s ease; }
.rvtp-popup.is-open .rvtp-popup-backdrop{ opacity:1; }
.rvtp-popup-inner{
  position:relative; max-width:960px; width:90%; background:transparent;
  transform:translateY(16px) scale(.96); opacity:0; transition:transform .25s ease, opacity .25s ease;
}
.rvtp-popup.is-open .rvtp-popup-inner{ transform:translateY(0) scale(1); opacity:1; }
.rvtp-popup-player{ position:relative; padding-top:56.25%; background:#000; border-radius:16px; overflow:hidden; }
.rvtp-popup-player iframe, .rvtp-popup-player video{ position:absolute; inset:0; width:100%; height:100%; }
.rvtp-popup-close{
  position:absolute; top:var(--rvtp-popup-close-top,-32px); right:0; left:auto; width:32px; height:32px;
  border-radius:999px; border:2px solid var(--rvtp-popup-close-border,#fff); background:var(--rvtp-popup-close-bg,transparent);
  color:var(--rvtp-popup-close-color,#fff); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transform:translate(var(--rvtp-popup-close-offset-x,0),var(--rvtp-popup-close-offset-y,0));
}
.rvtp-wrap.rvtp-popup-close-left .rvtp-popup-close{ right:auto; left:0; }
.rvtp-popup-close-icon{ font-size:20px; line-height:1; }
html.rvtp-no-scroll, body.rvtp-no-scroll{ overflow:hidden; }

/* Overlay popup text/icon layout */
.rvtp-overlay-btn .rvtp-overlay-text{ display:inline-block; }
.rvtp-overlay-btn .rvtp-overlay-icon.only{ display:inline-flex; }
.rvtp-overlay-btn .rvtp-overlay-icon.before,
.rvtp-overlay-btn .rvtp-overlay-icon.after{ display:inline-flex; }

/* SVG icon helpers */
.rvtp-svg-icon svg{ width:1em; height:1em; }
.rvtp-svg-icon svg path{ fill:currentColor; }