.video-archive-page { background: #f5f8fa; }
.video-archive-page > .container { padding-block: 26px!important; }
.video-archive-page .video-archive-header { text-align: right!important; padding-bottom: 18px; margin-bottom: 22px!important; border-bottom: 1px solid #dce7ef; }
.video-archive-page .video-category-badge { background: #e8f2f9!important; color: #276a99!important; font-size: 11px; padding: 6px 11px!important; margin-bottom: 12px!important; box-shadow: none; }
.video-archive-page .archive-title { color: #082b49; font-size: 28px; line-height: 1.7; margin-bottom: 0!important; }
.video-archive-page .archive-title::after { display: none; }
.video-archive-page .archive-description { font-size: 13px; line-height: 1.9; margin-top: 8px; }
.video-archive-page .video-grid > .row { --bs-gutter-x: 18px; --bs-gutter-y: 18px; }
.video-archive-page .video-card { display: flex; flex-direction: column; background: #fff; padding: 7px; border: 1px solid #e0e9ef; border-radius: 14px; box-shadow: none; }
.video-archive-page .video-card:hover { transform: none; box-shadow: none; border-color: #87aecb; }
.video-archive-page .video-thumbnail { aspect-ratio: 16/9; height: auto; padding: 0; overflow: hidden; border-radius: 9px; background: #092337; }
.video-archive-page .video-thumbnail > a { display: block; width: 100%; height: 100%; }
.video-archive-page .video-thumbnail img { position: static; width: 100%; height: 100%; object-fit: cover; }
.video-archive-page .archive-video-placeholder { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg,#092337,#164b70); color: #5a8aaa; font-size: 44px; }
.video-archive-page .play-icon { top: 50%; left: 50%; right: auto; transform: translate(-50%,-50%); display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ffffff80; border-radius: 50%; background: #06233bba; color: #fff; opacity: 1; font-size: 14px; }
.video-archive-page .video-card:hover .play-icon { transform: translate(-50%,-50%); background: #1763a0; }
.video-archive-page .video-duration { right: auto; left: 8px; bottom: 8px; background: #031523d9; border-radius: 5px; padding: 3px 6px; font-size: 10px; color: #fff; }
.video-archive-page .video-content { display: flex; flex-direction: column; flex: 1; gap: 9px; padding: 13px 9px 8px!important; }
.video-archive-page .video-categories { display: flex; flex-wrap: wrap; gap: 5px; margin: 0!important; }
.video-archive-page .video-categories .badge { background: #eaf3fa; color: #39779f!important; font-size: 9px; font-weight: 500; border-radius: 5px; }
.video-archive-page .video-title { font-size: 15px; line-height: 1.8; margin: 0!important; }
.video-archive-page .video-title a { color: #123b59!important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-archive-page .video-meta { padding-top: 10px; margin-top: auto; border-top: 1px solid #e8eef3; font-size: 10px; gap: 8px; flex-wrap: wrap; }
.video-archive-page .video-pagination { margin-top: 24px!important; }
.video-archive-page .video-pagination .nav-links { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.video-archive-page .page-numbers { min-width: 38px; padding: 9px 12px; border: 1px solid #d6e4ee; border-radius: 9px; color: #276a99; }
.video-archive-page .page-numbers.current { background: #103d70; color: #fff; border-color: #103d70; }
.video-archive-page a:focus-visible { outline: 2px solid #4aa3df; outline-offset: 3px; }
[data-theme="dark"] .video-archive-page { background: #021321; }
[data-theme="dark"] .video-archive-page .video-card { background: #092337; border-color: #1a3c54; }
[data-theme="dark"] .video-archive-page :is(.archive-title,.video-title a) { color: #e0eaf3!important; }
[data-theme="dark"] .video-archive-page :is(.video-archive-header,.video-meta) { border-color: #1a3c54; }
[data-theme="dark"] .video-archive-page .video-categories .badge { background: #10344d; color: #9fcbea!important; }
@media(max-width:575.98px) {
 .video-archive-page > .container { padding-block: 18px!important; }
 .video-archive-page .archive-title { font-size: 23px; }
 .video-archive-page .video-title { font-size: 14px; }
 .video-archive-page .video-grid > .row { --bs-gutter-y: 14px; }
}