/* =====================================================
   VIDEO PLAYER PAGE — 莲花托举·演说家培训
   意境：莲花从水中托举视频，禅意东方美学
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body.vp-body {
  min-height: 100vh;
  background: #fff8f0;
  color: #3a1a06;
  font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* =====================================================
   深邃背景 — 暗水墨 + 莲花光晕
   ===================================================== */
.vp-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* 橙白底 + 粉紫莲花光晕 */
.vp-bg-ink {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 50% 110%, rgba(210,130,220,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 80% 80% at 20% 90%,  rgba(240,160,230,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 70% 70% at 80% 95%,  rgba(220,140,215,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(240,130,30,0.12)  0%, transparent 50%),
    linear-gradient(180deg, #fff8f0 0%, #fff2ec 40%, #ffeef5 100%);
}

/* 橙金色光点 */
.vp-bg-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 15% 25%, rgba(240,130,30,0.30) 0%, transparent 100%),
    radial-gradient(2px 2px at 35% 15%, rgba(220,100,20,0.22) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 55% 30%, rgba(255,160,60,0.28) 0%, transparent 100%),
    radial-gradient(2px 2px at 75% 18%, rgba(240,140,40,0.20) 0%, transparent 100%),
    radial-gradient(2px 2px at 88% 40%, rgba(230,110,30,0.25) 0%, transparent 100%),
    radial-gradient(2px 2px at 10% 60%, rgba(240,150,50,0.18) 0%, transparent 100%),
    radial-gradient(2px 2px at 65% 55%, rgba(255,180,80,0.18) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 72%, rgba(240,130,40,0.20) 0%, transparent 100%),
    radial-gradient(2px 2px at 28% 80%, rgba(230,110,30,0.14) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 48% 70%, rgba(255,160,70,0.22) 0%, transparent 100%);
}

/* 水面涟漪光晕 */
.vp-bg-water {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: radial-gradient(ellipse 140% 80% at 50% 100%, rgba(210,120,220,0.15) 0%, transparent 60%);
  animation: vpWaterBreath 8s ease-in-out infinite alternate;
}
@keyframes vpWaterBreath {
  0%   { opacity: 0.6; transform: scaleY(1); }
  100% { opacity: 1;   transform: scaleY(1.08); }
}

/* SVG 莲花纹路（背景装饰） */
.vp-bg-lotus-deco {
  position: absolute;
  bottom: -40px; left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 500'%3E%3Cellipse cx='450' cy='480' rx='420' ry='60' fill='none' stroke='%23c060c0' stroke-width='1.5'/%3E%3Cellipse cx='450' cy='460' rx='360' ry='50' fill='none' stroke='%23c060c0' stroke-width='1'/%3E%3Cpath d='M450 480 Q350 380 280 260 Q340 300 390 350 Q420 400 450 430' fill='none' stroke='%23c060c0' stroke-width='1.2'/%3E%3Cpath d='M450 480 Q550 380 620 260 Q560 300 510 350 Q480 400 450 430' fill='none' stroke='%23c060c0' stroke-width='1.2'/%3E%3Cpath d='M450 480 Q420 360 350 220 Q400 280 430 360 Q445 410 450 450' fill='none' stroke='%23c060c0' stroke-width='1'/%3E%3Cpath d='M450 480 Q480 360 550 220 Q500 280 470 360 Q455 410 450 450' fill='none' stroke='%23c060c0' stroke-width='1'/%3E%3Cpath d='M450 480 Q450 360 450 200' fill='none' stroke='%23c060c0' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
}

/* =====================================================
   顶栏
   ===================================================== */
.vp-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  height: 76px;
  background: rgba(255, 248, 250, 0.94);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(190, 100, 210, 0.25);
  box-shadow: 0 2px 16px rgba(180, 80, 200, 0.08);
}

.vp-back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 6px;
  border: 1px solid rgba(170, 80, 200, 0.38);
  background: rgba(190, 100, 220, 0.08);
  color: rgba(150, 60, 180, 0.85);
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 1.5px;
  transition: all 0.24s;
  white-space: nowrap;
}
.vp-back-btn:hover {
  background: rgba(190, 100, 220, 0.16);
  border-color: rgba(170, 80, 200, 0.60);
  color: #8030a0;
  box-shadow: 0 0 16px rgba(190, 100, 220, 0.20);
}
.vp-back-btn i { font-size: 12px; }

.vp-topbar-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
/* 主标题：演说家培训 */
.vp-topbar-title {
  font-size: 24px;
  font-weight: 700;
  color: #c04010;
  letter-spacing: 6px;
  font-family: 'Noto Serif SC', serif;
  text-shadow:
    0 0 20px rgba(240, 120, 40, 0.35),
    0 2px 8px rgba(200, 60, 10, 0.15);
}
/* 副标题：学员风采 · 视频展示 */
.vp-topbar-sub {
  font-size: 13px;
  color: rgba(160, 80, 20, 0.65);
  letter-spacing: 4px;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 400;
}

.vp-topbar-right { width: 120px; }

/* =====================================================
   主舞台
   ===================================================== */
.vp-stage {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 44px 32px 80px;
}

/* =====================================================
   莲花托举容器
   ===================================================== */
.vp-lotus-scene {
  position: relative;
  width: 100%;
  max-width: 1300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ─── 视频台座区（包含视频 + 莲花花瓣） ─── */
.vp-pedestal {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ─── 视频外框（被托举的主体） ─── */
.vp-video-stage {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 860px;
  border-radius: 12px;
  overflow: visible;
  /* 微悬浮动画 */
  animation: vpFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 30px 60px rgba(180, 90, 200, 0.25)) drop-shadow(0 0 60px rgba(210, 130, 230, 0.14));
}
@keyframes vpFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

/* 视频包裹（16:9 比例盒子） */
.vp-video-wrap {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 2px solid rgba(190, 100, 210, 0.45);
  box-shadow:
    0 0 0 1px rgba(210, 130, 230, 0.15),
    0 12px 40px rgba(180, 80, 200, 0.18),
    inset 0 0 30px rgba(0,0,0,0.35);
}
.vp-video-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
  transition: opacity 0.3s ease;
}

/* 缓冲进度条 */
.vp-buffer-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  z-index: 10;
}
.vp-buffer-bar {
  height: 100%;
  background: linear-gradient(90deg, #d878d0, #f0a8e8);
  width: 0%;
  transition: width 0.2s ease;
  box-shadow: 0 0 10px rgba(216, 120, 208, 0.5);
}

/* 视频四角装饰 */
.vp-video-corner {
  position: absolute;
  width: 20px; height: 20px;
  pointer-events: none;
  z-index: 5;
  opacity: 0.55;
}
.vp-video-corner--tl { top: 0;    left: 0;  border-top: 2px solid rgba(190,100,220,0.88); border-left:  2px solid rgba(190,100,220,0.88); border-radius: 12px 0 0 0; }
.vp-video-corner--tr { top: 0;    right: 0; border-top: 2px solid rgba(190,100,220,0.88); border-right: 2px solid rgba(190,100,220,0.88); border-radius: 0 12px 0 0; }
.vp-video-corner--bl { bottom: 0; left: 0;  border-bottom: 2px solid rgba(190,100,220,0.88); border-left:  2px solid rgba(190,100,220,0.88); border-radius: 0 0 0 12px; }
.vp-video-corner--br { bottom: 0; right: 0; border-bottom: 2px solid rgba(190,100,220,0.88); border-right: 2px solid rgba(190,100,220,0.88); border-radius: 0 0 12px 0; }

/* 加载遮罩 */
.vp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 248, 240, 0.88);
  z-index: 10;
  transition: opacity 0.4s;
  border-radius: 12px;
}
.vp-loading.hidden { opacity: 0; pointer-events: none; }

/* 播放提示 */
.vp-play-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 16px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 15;
  pointer-events: none;
}
.vp-play-hint i {
  font-size: 64px;
  color: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.1); opacity: 1; }
}

.vp-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.vp-loading-lotus {
  position: relative;
  width: 60px; height: 60px;
}
.vp-loading-petal {
  position: absolute;
  width: 18px; height: 26px;
  background: linear-gradient(180deg, rgba(200,110,220,0.70), rgba(160,70,190,0.30));
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: bottom center;
  animation: vpPetalBreath 2s ease-in-out infinite;
}
.vp-loading-petal:nth-child(1) { left: 21px; top:  0;  transform: rotate(0deg);   animation-delay: 0s; }
.vp-loading-petal:nth-child(2) { right: 5px; top: 10px; transform: rotate(51.4deg); animation-delay: 0.29s; }
.vp-loading-petal:nth-child(3) { right: 5px; bottom: 5px; transform: rotate(102.8deg); animation-delay: 0.57s; }
.vp-loading-petal:nth-child(4) { left: 21px; bottom: -2px; transform: rotate(154.3deg); animation-delay: 0.86s; }
.vp-loading-petal:nth-child(5) { left: 5px; bottom: 5px; transform: rotate(205.7deg); animation-delay: 1.14s; }
.vp-loading-petal:nth-child(6) { left: 5px; top: 10px; transform: rotate(257.1deg); animation-delay: 1.43s; }
.vp-loading-petal:nth-child(7) { left: 21px; top: 0; transform: rotate(308.6deg); animation-delay: 1.71s; }
@keyframes vpPetalBreath {
  0%, 100% { opacity: 0.25; transform-origin: bottom center; }
  50%       { opacity: 0.90; }
}
.vp-loading-text {
  font-size: 11px;
  color: rgba(170, 80, 200, 0.75);
  letter-spacing: 3px;
  font-family: 'Noto Serif SC', serif;
}

/* ─── SVG 莲花花瓣（托举主体） ─── */
.vp-lotus-holder {
  position: absolute;
  bottom: -100px;      /* 花瓣从视频底边向下延伸 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 140%;         /* 宽于视频，让花瓣向两侧展开 */
  max-width: 1400px;
  pointer-events: none;
  overflow: visible;
}
.vp-lotus-holder svg {
  width: 100%;
  height: auto;
  overflow: visible;
  /* 莲花跟视频一起浮动，同步动画 */
  animation: vpFloat 6s ease-in-out infinite;
}

/* 莲花茎 */
.vp-lotus-stem {
  position: absolute;
  bottom: -170px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  pointer-events: none;
}

/* 工具栏（悬浮在视频下方） */
.vp-toolbar {
  position: relative;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.vp-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 1.5px;
  transition: all 0.24s;
  text-decoration: none;
  border: 1px solid transparent;
  background: none;
  color: inherit;
}
.vp-toolbar-btn--primary {
  background: linear-gradient(135deg, rgba(180,90,210,0.15), rgba(150,60,190,0.10));
  color: #8028a8;
  border-color: rgba(170, 80, 200, 0.48);
  box-shadow: 0 2px 14px rgba(180, 80, 210, 0.12);
}
.vp-toolbar-btn--primary:hover {
  background: linear-gradient(135deg, rgba(180,90,210,0.26), rgba(150,60,190,0.20));
  color: #601890;
  border-color: rgba(170, 80, 200, 0.72);
  box-shadow: 0 4px 20px rgba(180, 80, 210, 0.24);
  transform: translateY(-1px);
}
.vp-toolbar-btn--ghost {
  color: rgba(150, 70, 180, 0.75);
  border-color: rgba(180, 90, 210, 0.32);
}
.vp-toolbar-btn--ghost:hover {
  border-color: rgba(170, 80, 200, 0.58);
  color: rgba(130, 50, 160, 0.95);
  background: rgba(180, 90, 210, 0.08);
  transform: translateY(-1px);
}

/* =====================================================
   信息卡（视频下方，莲花托举后的信息展示）
   ===================================================== */
.vp-info-band {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 1300px;
  margin-top: 148px;  /* 给莲花花瓣腾出展示空间 */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(190, 100, 210, 0.18);
  border: 1px solid rgba(180, 90, 200, 0.24);
  border-radius: 10px;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.vp-info-main {
  grid-column: 1 / 3;
  background: rgba(255, 252, 255, 0.92);
  padding: 32px 36px;
}

.vp-info-side {
  background: rgba(255, 248, 255, 0.92);
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-left: 1px solid rgba(190, 100, 210, 0.15);
}

/* 分类标签 */
.vp-cat-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 2.5px;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(180, 90, 200, 0.38);
  color: rgba(150, 60, 180, 0.80);
  font-family: 'Noto Sans SC', sans-serif;
  margin-bottom: 14px;
}
.vp-cat-badge.cat-beginner  { border-color: rgba(200,100,220,0.42); color: rgba(170,70,200,0.85); }
.vp-cat-badge.cat-advanced  { border-color: rgba(220,120,200,0.42); color: rgba(190,80,180,0.85); }
.vp-cat-badge.cat-pro       { border-color: rgba(180,60,210,0.42);  color: rgba(150,40,190,0.85); }
.vp-cat-badge.cat-business  { border-color: rgba(40,140,220,0.35); color: rgba(20,100,200,0.75); }
.vp-cat-badge.cat-corporate { border-color: rgba(140,60,220,0.35); color: rgba(120,50,200,0.75); }

/* 大标题 */
.vp-title {
  font-size: 28px;
  font-weight: 600;
  color: #2a1004;
  line-height: 1.5;
  letter-spacing: 1px;
  font-family: 'Noto Serif SC', serif;
  margin-bottom: 14px;
}

/* 学员姓名 */
.vp-student {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: rgba(140, 60, 170, 0.80);
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 400;
  letter-spacing: 0.8px;
  margin-bottom: 18px;
}
.vp-student i { font-size: 13px; color: rgba(170, 80, 200, 0.48); }

/* 标签组 */
.vp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.vp-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 4px 13px;
  border-radius: 20px;
  background: rgba(190, 100, 220, 0.08);
  color: rgba(150, 60, 180, 0.85);
  border: 1px solid rgba(180, 90, 210, 0.24);
  font-family: 'Noto Sans SC', sans-serif;
  letter-spacing: 0.5px;
}
.vp-tag i { font-size: 10px; color: rgba(170, 80, 200, 0.42); }

/* 简介 */
.vp-desc {
  font-size: 14px;
  color: rgba(90, 45, 110, 0.68);
  line-height: 2.1;
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
  border-top: 1px solid rgba(180,90,210,0.12);
  padding-top: 18px;
}

/* 右侧统计 */
.vp-side-section-title {
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(160, 80, 190, 0.55);
  font-family: 'Noto Sans SC', sans-serif;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.vp-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vp-stat {
  display: flex;
  align-items: center;
  gap: 12px;
}
.vp-stat-icon-wrap {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(180, 90, 210, 0.30);
  background: rgba(190, 100, 220, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vp-stat-icon {
  font-size: 11px;
  color: rgba(170, 80, 200, 0.78);
}
.vp-stat-text { display: flex; flex-direction: column; gap: 1px; }
.vp-stat-num {
  font-size: 16px;
  font-weight: 600;
  color: #6020a0;
  font-family: 'Noto Sans SC', sans-serif;
  line-height: 1.2;
}
.vp-stat-label {
  font-size: 10px;
  color: rgba(150, 70, 180, 0.55);
  font-family: 'Noto Sans SC', sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
}

/* 侧边分隔 */
.vp-side-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(180,90,210,0.20), transparent);
}

/* 装饰字符 */
.vp-side-deco {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.30;
}
.vp-side-deco-line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, rgba(180,90,210,0.50));
}
.vp-side-deco-line:last-child {
  background: linear-gradient(to left, transparent, rgba(180,90,210,0.50));
}
.vp-side-deco-char {
  font-size: 14px;
  color: rgba(200, 120, 220, 0.80);
  font-family: 'Noto Serif SC', serif;
}

/* =====================================================
   无数据 / 错误态
   ===================================================== */
.vp-error {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 50;
  background: #fff8f0;
}
.vp-error-icon {
  font-size: 42px;
  color: rgba(180, 80, 210, 0.45);
}
.vp-error-title {
  font-size: 20px;
  color: rgba(140, 60, 170, 0.80);
  letter-spacing: 5px;
  font-family: 'Noto Serif SC', serif;
}
.vp-error-sub {
  font-size: 13px;
  color: rgba(150, 70, 180, 0.60);
  letter-spacing: 1px;
}
.vp-error-back {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 6px;
  background: rgba(180, 90, 210, 0.10);
  border: 1px solid rgba(170, 80, 200, 0.36);
  color: rgba(150, 60, 180, 0.88);
  font-size: 13px;
  font-family: 'Noto Serif SC', serif;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.22s;
}
.vp-error-back:hover {
  background: rgba(180, 90, 210, 0.20);
  color: #601890;
  border-color: rgba(170, 80, 200, 0.62);
}

/* =====================================================
   Toast
   ===================================================== */
.vp-toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: rgba(255, 250, 255, 0.96);
  color: rgba(130, 50, 165, 0.92);
  border: 1px solid rgba(180, 90, 210, 0.32);
  backdrop-filter: blur(16px);
  padding: 10px 24px;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 1px;
  font-family: 'Noto Serif SC', serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: 0 6px 28px rgba(180, 90, 210, 0.15);
}
.vp-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =====================================================
   响应式
   ===================================================== */
@media (max-width: 1024px) {
  .vp-info-band {
    grid-template-columns: 1fr;
    margin-top: 80px;
  }
  .vp-info-main { grid-column: 1 / 2; }
  .vp-info-side { border-left: none; border-top: 1px solid rgba(200, 100, 40, 0.10); }
  .vp-stats { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .vp-stage { padding: 24px 16px 60px; }
  .vp-topbar { padding: 0 16px; }
  .vp-title { font-size: 20px; }
  .vp-info-main { padding: 22px 20px; }
  .vp-info-band { margin-top: 60px; }
  .vp-lotus-holder { bottom: -60px; }
}
@media (max-width: 480px) {
  .vp-title { font-size: 17px; }
  .vp-topbar-sub { display: none; }
}