:root{
  --sv-safe-top: env(safe-area-inset-top, 0px);
  --sv-safe-bot: env(safe-area-inset-bottom, 0px);
  --sv-safe-left: env(safe-area-inset-left, 0px);
  --sv-safe-right: env(safe-area-inset-right, 0px);
}

/* =========================
   BASE (desktop/tablet)
========================= */
.sv-page{
  background:#f4f5f7;
  color:#111;
}

/* bỏ title block nếu lỡ có */
.sv-head{ display:none !important; }

/* Stage height do JS set --svh */
.sv-stage{
  --svh: 600px;       /* fallback */
  height: var(--svh);
  min-height: 420px;
  padding: 12px 0 24px;
  box-sizing: border-box;
}

.sv-swiper{ height:100%; overflow:hidden; }

.sv-swiper .swiper-slide{
  height:100%;
  width:100%;
  padding:0;
  display:flex;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
}

/* shell = video + actions ngoài */
.sv-shell{
  display:flex;
  align-items:flex-end;
  gap:12px;
}

/* card theo tỉ lệ 9:16 */
.sv-card{
  position:relative;
  height: calc(var(--svh) - 40px);
  max-height: 760px;
  min-height: 520px;

  width: calc((var(--svh) - 24px) * 9 / 16);
  max-width: 520px;

  background:#000;
  overflow:hidden;
  border-radius:12px;
}

.sv-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}

/* Overlay meta */
.sv-overlay{
  position:absolute;
  inset:0;
  top:0;
  display:flex;
  justify-content:flex-start;
  padding:16px;

  /* quan trọng: mặc định overlay không ăn click */
  pointer-events:none;

  background: linear-gradient(
    180deg,
    rgba(0,0,0,.15) 0%,
    rgba(0,0,0,0) 45%,
    rgba(0,0,0,.55) 100%
  );
}

/* ✅ FIX: meta ăn click để mở panel, không xuyên xuống pause video */
.sv-meta{ 
  max-width:92%;
  color:#fff;
  pointer-events:auto;
  cursor:pointer;
}
.sv-meta *{ pointer-events:auto; }

.sv-meta-title{
  font-size:18px;
  font-weight:800;
  line-height:1.25;
  margin-bottom:6px;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.sv-meta-time{
  font-size:12px;
  opacity:.92;
  color:#fff;
}

/* Actions OUTSIDE */
.sv-actions-out{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-bottom:14px;
}

/* hint */
.sv-tap-hint{
  position:absolute;
  top: calc(12px + var(--sv-safe-top));
  left:12px;
  right:12px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.15);
  font-size:13px;
  color:#fff;
  display:none;
  pointer-events:none;
}
.sv-tap-hint.show{ display:block; }

/* center play */
.sv-center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.sv-play-bubble{
  width:64px;
  height:64px;
  border-radius:999px;
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  backdrop-filter: blur(6px);
  color:#fff;
  opacity:0;
  transform: scale(.96);
  transition:.18s ease;
}
.sv-card.paused .sv-play-bubble,
.sv-card.ended  .sv-play-bubble{
  opacity:1;
  transform: scale(1);
}

/* buttons */
.box-button-fixed{
  width:40px;
  height:40px;
  border-radius:99px;
  border: 1px solid var(--Border-Default-Default, rgba(217, 217, 217, 1));
  display:flex;
  align-items:center;
  justify-content:center;
}
.box-button-fixed img{ height:20px; }

.button-top-page{ display:none; }


/* =========================
   MOBILE (<= 768)
========================= */
@media (max-width: 768px){
  .header, .menu, footer{ display:none; }

  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body.sv-lock{
    height:100%;
    overflow:hidden !important;
    overscroll-behavior:none;
    touch-action:none;
  }

  :root{ --svh: 1vh; } /* JS set theo viewport thật */

  .sv-page{
    background:#000;
    color:#fff;
    height:100dvh;
    height: calc(var(--svh) * 100);
    overflow:hidden;
    width: 100vw;
  }

  .sv-stage{
    height:100%;
    overflow:hidden;
    padding:0;
  }

  .sv-swiper,
  .sv-swiper .swiper-wrapper,
  .sv-swiper .swiper-slide{
    height:100%;
  }

  .sv-swiper{
    width:100%;
    max-width:100%;
    overflow:hidden;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  .sv-swiper .swiper-slide{
    width:100vw;
    max-width:100%;
    overflow:hidden;
    display:flex;
    align-items:stretch;
    justify-content:stretch;
    padding:0;
    box-sizing:border-box;
  }

  .sv-shell{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
  }

  .sv-card{
    position:relative;
    width:100%;
    height:100%;
    border-radius:0;
    overflow:hidden;
    background:#000;
    max-height:100%;
    min-width:100%;
  }

  .sv-video{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    background:#000;
  }

  .sv-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    padding: 16px 16px calc(16px + var(--sv-safe-bot));

    pointer-events:none;

    background: linear-gradient(
      180deg,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,0) 45%,
      rgba(0,0,0,.60) 100%
    );
  }

  /* ✅ vẫn cho meta ăn click trên mobile */
  .sv-meta{
    max-width:100%;
    height:100%;
    pointer-events:auto;
    cursor:pointer;
  }
  .sv-meta *{ pointer-events:auto; }

  .sv-meta-title{
    font-size:18px;
    font-weight:800;
    line-height:1.25;
    margin-bottom:6px;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
  }
  .sv-meta-time{ font-size:12px; opacity:.92; }

  .sv-actions-out{
    position:absolute;
    right:12px;
    bottom: calc(110px + var(--sv-safe-bot));
    z-index:6;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-bottom:0; /* override desktop */
  }

  .box-button-fixed{
    width:40px;
    height:40px;
    border-radius:999px;
    border: 1px solid rgba(255,255,255,.25);
    overflow:hidden;
    background: rgba(0,0,0,.25);
  }

  .box-button-fixed img{
    width:20px;
    height:20px;
    display:block;
  }

  .sv-sound{
    font-size:18px;
    line-height:1;
    color:#fff;
    user-select:none;
  }
}


/* =========================
   SIDE PANEL
========================= */
.sv-side{
  position:fixed;
  top:0;
  right:0;
  width:380px;
  max-width:92vw;
  height:100vh;
  background:#fff;
  z-index:9999;
  transform: translateX(102%);
  transition: transform .22s ease;
  box-shadow: -12px 0 32px rgba(0,0,0,.16);
  padding:22px 18px;
  overflow:auto;
}
.sv-side.open{ transform: translateX(0); }

.sv-side-backdrop{
  position:absolute;
  inset:0;
  z-index:9998;
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
  border-radius:12px;
}

.sv-side-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.sv-side-close{
  position:absolute;
  top:10px;
  right:12px;
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  font-size:28px;
  line-height:36px;
  cursor:pointer;
}

.sv-side-head{ padding-right:42px; }
.sv-side-type{ font-size:14px; color:#666; margin-bottom:6px; }
.sv-side-title{ font-size:26px; font-weight:700; line-height:1.25; color: var(--Text-Neutral-Default, rgba(48, 48, 48, 1));}
.sv-side-desc{
  margin-top:10px;
  font-size:15px;
  line-height:1.45;
  color:#444;
}

.sv-side-actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  align-items:center;
}

/* Mobile: bottom drawer */
@media (max-width: 991px){
  #svSide.sv-side{
    background:#fff;
    color:#111;
    z-index: 9999;
  }

  #svSide .sv-side-head{
    padding-right: 42px;
  }

  #svSide #svSideTitle{
    display:block !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color:#111 !important;
    margin-top: 8px;
    white-space: normal;
  }

  #svSide #svSideDesc{
    display:block;
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.45;
    color:#444;
    white-space: normal;
  }
}

/* ===== INLINE PANEL NẰM CẠNH CARD ===== */
.sv-shell{
  display:flex;
  gap:12px;
  position:relative;
  align-items:flex-end; /* bạn thích canh đáy thì giữ */
}

/* ===== DESKTOP: panel nằm cạnh card, đóng thì co về 0 ===== */
.sv-side-inline{
  /* quan trọng: mặc định KHÔNG chiếm chỗ */
  flex: 0 0 0;
  max-width: 0;
  width: 0;

  height: calc(var(--svh) - 40px);
  max-height:760px;
  min-height:520px;

  background:#fff;
  border-radius:12px;

  /* đóng thì bỏ padding/border để không còn “cấn” */
  padding: 0;
  border: 0;
  box-shadow: none;

  overflow: hidden;          /* để co về 0 gọn */
  opacity: 0;
  pointer-events: none;

  transform: translateX(14px);

  /* animate được */
  transition:
    flex-basis .22s ease,
    max-width .22s ease,
    padding .22s ease,
    transform .22s ease,
    opacity .18s ease;
}

/* mở panel */
.sv-side-inline.open{
  flex: 0 0 380px;            /* CHIẾM CHỖ LÚC MỞ */
  max-width: 100%;
  width: 380px;

  padding:18px 16px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 32px rgba(0,0,0,.10);

  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  	z-index: 99999;
	position: relative;
}

/* khi mở panel: ẩn cụm nút actions để không bị “đè nút” */
.sv-shell.has-side .sv-actions-out{
  display:none !important;
}

/* nút X */
.sv-side-inline .sv-side-close{
  position:sticky;
  top:0;
  margin-left:auto;
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  font-size:28px;
  line-height:36px;
  cursor:pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== MOBILE: drawer dưới (đóng bằng translateY, không chiếm chỗ) ===== */
@media (max-width: 768px){
  .sv-side-inline{
	left: 0;
	right: 0;
	bottom: 0;
	top: 150px;

    height: 100%;
    border-radius:16px 16px 0 0;

    /* trạng thái đóng */
    transform: translateY(105%);
    opacity: 1;               /* drawer dùng translateY */
    pointer-events:none;

    padding:16px 16px calc(16px + var(--sv-safe-bot));
    border: 0;
    box-shadow: 0 -12px 32px rgba(0,0,0,.22);

    transition: transform .22s ease;
  }

  .sv-side-inline.open{
    transform: translateY(0);
    pointer-events:auto;
	position: absolute;
	width: 100vw;
  }
}