:root{
  --brand:#2563eb; --text:#0f172a; --muted:#64748b; --line:#e5e7eb;
  --surface:#fff; --shadow:0 12px 24px rgba(2,6,23,.10);
}
.videos-page .container{ width:min(1200px,92%); margin-inline:auto; }

/* hero */
.videos-page .v-hero{ background:linear-gradient(180deg,#0b3a78,#0a2f63);
  margin-bottom: 20px;
   border:1px solid var(--line); border-radius:12px; margin-top:12px; padding:52px 0 38px; }
.videos-page .breadcrumb-mini{ font-size:.9rem; color:var(--muted); margin-bottom:.35rem; }
.videos-page .breadcrumb-mini a{ color:var(--brand); text-decoration:none; }
.videos-page .v-hero h1{ font-weight:800; margin:0 0 .35rem; }
.videos-page .v-hero .sub{ color:var(--muted); }

/* grid */
.videos-page .v-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-bottom:40px; }
@media (max-width:1100px){ .videos-page .v-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){  .videos-page .v-grid{ grid-template-columns:1fr;} }

.videos-page .v-card{
  position:relative; overflow:hidden; border-radius:14px; background:#ddd; box-shadow:var(--shadow);
}
.videos-page .v-card .thumb{
  width:100%; height:250px; object-fit:cover; display:block;
  transition: transform .5s ease, opacity .5s ease;
}
.videos-page .v-card:hover .thumb{ transform: scale(1.03); }
.videos-page .play-badge{
  position:absolute; inset:auto 12px 12px auto;
  background:rgba(0,0,0,.6); color:#fff; border-radius:999px; width:44px; height:44px;
  display:grid; place-items:center; font-weight:800; font-size:20px; pointer-events:none;
}
.videos-page .v-card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px; color:#fff; background:linear-gradient(180deg,transparent,rgba(0,0,0,.65));
  font-size:.95rem;
}
.videos-page .v-card figcaption { 
  display: none !important;
}

/* lightbox */
.videos-page .lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index:1050; }
.videos-page .lightbox.show{ display:flex; animation: lbIn .2s ease; }
@keyframes lbIn { from{ opacity:0 } to{ opacity:1 } }
.videos-page .lb-video{ max-width:92vw; max-height:86vh; border-radius:8px; box-shadow:0 16px 40px rgba(0,0,0,.5); background:#000; }
.videos-page .lb-close{ position:absolute; top:16px; right:18px; font-size:32px; color:#fff; background:transparent; border:none; cursor:pointer; }

/* fade-in */
.videos-page .fade{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.videos-page .fade.show{ opacity:1; transform:none; 
   color: #ffd24d;
      font-weight:700;
       letter-spacing: 0.1rem; 
}

/* buttons */
.videos-page .v-actions{ text-align:center; }
.videos-page .btn-more{
  display:inline-block; background:var(--brand); color:#fff; border:none; border-radius:999px;
  padding:11px 22px; font-weight:700; text-decoration:none; box-shadow:0 10px 22px rgba(37,99,235,.28);
  transition: background .25s, transform .25s, box-shadow .25s, opacity .25s;
}
.videos-page .btn-more:hover{ background:#1d4ed8; transform: translateY(-2px); box-shadow:0 14px 28px rgba(37,99,235,.36); }
.videos-page .btn-more.hidden{ opacity:0; pointer-events:none; }