/* =========================================================
   ALBUMS GRID
========================================================= */
.vapvl-albums-grid{
  --vap-cols: 3;
  --vap-thumb-h: 120px;

  display: grid;
  grid-template-columns: repeat(var(--vap-cols), 1fr);
  gap: 18px;
}

/* Album Card */
.vapvl-album-card{
  text-decoration: none;
  color: #111;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.vapvl-album-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

/* Album Thumbnail */
.vapvl-album-thumb{
  position: relative;
  height: var(--vap-thumb-h);
  background-color: #e5e5e5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay gradient */
.vapvl-album-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.05),
    rgba(0,0,0,.45)
  );
}

/* Album Meta */
.vapvl-album-meta{
  padding: 12px;
  text-align: center;
}
.vapvl-album-title{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.vapvl-album-count{
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}


/* =========================================================
   FILTER BUTTONS
========================================================= */
.vapvl-filter{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 16px;
}
.vapvl-filter button{
  border: 1px solid #ddd;
  background: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  transition: all .2s ease;
}
.vapvl-filter button:hover{
  border-color: #111;
}
.vapvl-filter button.active{
  background: #111;
  color: #fff;
  border-color: #111;
}


/* =========================================================
   VIDEOS GRID
========================================================= */
.vapvl-videos-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

/* Video Card */
.vapvl-video-card{
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}
.vapvl-video-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

/* Video Thumb */
.vapvl-video-thumb{
  position: relative;
  background: #000;
}
.vapvl-video-thumb img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.vapvl-video-card:hover .vapvl-video-thumb img{
  transform: scale(1.06);
}

/* Play Icon */
.vapvl-play{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: #fff;
  opacity: .85;
  text-shadow: 0 10px 22px rgba(0,0,0,.45);
  pointer-events: none;
}

/* Video Title */
.vapvl-video-title{
  padding: 10px 12px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #111;
}


/* =========================================================
   MODAL POPUP
========================================================= */
.vapvl-modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.82);
  z-index: 99999;
  padding: 18px;
}
.vapvl-modal.active{
  display: flex;
}

.vapvl-modal-inner{
  width: min(980px, 96vw);
  position: relative;
}

.vapvl-close{
  position: absolute;
  right: -6px;
  top: -46px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 44px;
  cursor: pointer;
}

.vapvl-modal-video iframe,
.vapvl-modal-video video{
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
  background: #000;
}


/* =========================================================
   EMPTY MESSAGE
========================================================= */
.vapvl-empty{
  padding: 12px 14px;
  border: 1px solid #ffeeba;
  background: #fff3cd;
  border-radius: 12px;
  color: #5a4500;
}


/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1024px){
  .vapvl-albums-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px){
  .vapvl-albums-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px){
  .vapvl-albums-grid{
    grid-template-columns: repeat(1, 1fr);
  }
}
/*chi tiết Album*/
.vapvl-videos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}

.vapvl-video-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  transition:transform .2s ease;
}

.vapvl-video-card:hover{
  transform:translateY(-4px);
}

.vapvl-video-thumb img{
  width:100%;
  height:150px;
  object-fit:cover;
}

.vapvl-video-title{
  padding:10px 12px;
  font-size:13px;
  font-weight:600;
}

/*end*/
/*nút quay về*/
.vapvl-back-wrap{
  margin-bottom:16px;
}

.vapvl-back-albums{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  background:#fff;
  border-radius:999px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  color:#1a73e8;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  transition:all .2s ease;
}

.vapvl-back-albums:hover{
  background:#f1f3f4;
  transform:translateY(-2px);
}

/* =====================================================
   MOBILE OPTIMIZATION – VIDEO GRID
   ===================================================== */

/* Mặc định desktop đã OK, chỉ chỉnh mobile */
@media (max-width: 768px){

  .vapvl-videos-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
  }

  .vapvl-video-card{
    border-radius:14px;
  }

  /* Thumb chuẩn 16:9 – KHÔNG MÉO */
  .vapvl-video-thumb{
    position:relative;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#000;
  }

  .vapvl-video-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* Play icon to – dễ bấm */
  .vapvl-play{
    font-size:36px;
    opacity:.9;
  }

  /* Title gọn – không chiếm chỗ */
  .vapvl-video-title{
    padding:8px 10px;
    font-size:13px;
    line-height:1.3;
    font-weight:600;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* Nút quay về album gọn lại */
  .vapvl-back-albums{
    padding:6px 12px;
    font-size:12px;
  }
}

/* MÀN RẤT NHỎ (≤480px) → 1 CỘT */
@media (max-width: 480px){

  .vapvl-videos-grid{
    grid-template-columns:1fr;
  }

  .vapvl-video-title{
    font-size:14px;
  }

  .vapvl-play{
    font-size:42px;
  }
}

/*end*/
/* ==============================
   VIDEO LABEL (ALBUM TAG)
   ============================== */
.vapvl-video-label{
  position:absolute;
  top:8px;
  left:8px;
  padding:4px 10px;
  font-size:11px;
  font-weight:600;
  color:#fff;
  border-radius:999px;
  background:#666;
  z-index:3;
  backdrop-filter:blur(4px);
}

/* MÀU RIÊNG CHO TỪNG ALBUM */
.album-nature{ background:#2e7d32; }   /* xanh lá */
.album-travel{ background:#1565c0; }   /* xanh dương */
.album-music { background:#6a1b9a; }   /* tím */
.album-sport { background:#ef6c00; }   /* cam */

/* ==============================
   PLAY BUTTON – TRÒN NHƯ YOUTUBE
   ============================== */
.vapvl-play-btn{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:#fff;
  width:56px;
  height:56px;
  margin:auto;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  transition:all .25s ease;
  z-index:2;
}

.vapvl-video-card:hover .vapvl-play-btn{
  transform:scale(1.15);
  background:#ff0000; /* đỏ YouTube */
}

/* ==============================
   ĐẢM BẢO THUMB POSITION
   ============================== */
.vapvl-video-thumb{
  position:relative;
  overflow:hidden;
}
@media (max-width:768px){

  .vapvl-video-label{
    font-size:10px;
    padding:3px 8px;
  }

  .vapvl-play-btn{
    width:48px;
    height:48px;
    font-size:26px;
  }
}
/* nhiều nhãn */
.vapvl-video-labels{
  position:absolute;
  top:8px;
  left:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  z-index:3;
  max-width: calc(100% - 16px);
}

.vapvl-video-label{
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  border-radius:999px;
  line-height:1.1;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  white-space:nowrap;
}

/* mobile gọn hơn */
@media (max-width:768px){
  .vapvl-video-label{
    font-size:10px;
    padding:3px 8px;
  }
}
.vapvl-album-title,
.vapvl-video-title{
  color: var(--vap-title-color, #111);
}

.vapvl-album-thumb,
.vapvl-video-thumb img{
  border-radius: var(--vap-thumb-radius, 12px);
}
/* ===== FIX RADIUS ALBUM (BẮT BUỘC) ===== */
.vapvl-album-card{
  border-radius: var(--vap-thumb-radius, 12px) !important;
  overflow: hidden !important;
}

.vapvl-album-thumb{
  border-radius: var(--vap-thumb-radius, 12px) !important;
  overflow: hidden !important;
}
.vapvl-video-views{
  position:absolute;
  right:8px;
  bottom:8px;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:4px;
}
.vapvl-video-label{
  background: var(--vap-album-color);
  color:#fff;
  border-radius:999px;
}
.vapvl-album-card{ overflow:hidden; }

.vapvl-album-thumb{ position:relative; height: var(--vap-thumb-h,120px); }

.vapvl-album-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
}

/* dùng màu album làm glow */
.vapvl-album-card{
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}
.vapvl-album-card:hover{
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

/* badge theo màu album */
.vapvl-album-badge{
  position:absolute;
  left:10px; top:10px;
  background: var(--vap-album-color, #1565c0);
  color:#fff;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
}
/* ===============================
 *  YOUTUBE PLAY ICON (ALBUM)
 * =============================== */

.vapvl-album-thumb{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vapvl-album-play{
  position: absolute;
  width: 42px;
  height: 42px;
  background: rgba(255,0,0,0.95);
  color: #fff;
  font-size: 20px;
  line-height: 42px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  transform: scale(1);
  transition: all .25s ease;
  pointer-events: none; /* không chặn click */
}

/* hover effect */
.vapvl-album-card:hover .vapvl-album-play{
  transform: scale(1.15);
  background: #ff0000;
}

/* mobile */
@media (max-width: 768px){
  .vapvl-album-play{
    width: 48px;
    height: 48px;
    font-size: 22px;
    line-height: 48px;
  }
}

.vapvl-pagination{
  margin:30px 0;
  text-align:center;
}
.vapvl-pagination .page-numbers{
  display:inline-block;
  margin:0 4px;
  padding:8px 14px;
  border-radius:999px;
  background:#f2f2f2;
  color:#111;
  text-decoration:none;
  font-size:14px;
}
.vapvl-pagination .current{
  background:#111;
  color:#fff;
}

.vapvl-breadcrumb{
  font-size:14px;
  margin:10px 0 20px;
  color:#666;
}
.vapvl-breadcrumb a{
  color:#1565c0;
  text-decoration:none;
}
.vapvl-breadcrumb span{
  margin:0 6px;
}
.vapvl-breadcrumb .current{
  color:#111;
  font-weight:600;
}