.videos-page,.video-detail-page { color: #0b2852; background: #fff; }
.videos-hero,.video-detail-hero { position: relative; overflow: hidden; padding: 24px 0 66px; background: radial-gradient(circle at 85% 20%,rgba(190,151,242,.28),transparent 28%),linear-gradient(135deg,#fbf9ff 0%,#f2eaff 100%); }
.videos-hero::after,.video-detail-hero::after { position: absolute; right: -110px; bottom: -180px; width: 390px; height: 390px; content: ""; border: 1px solid rgba(126,79,199,.14); border-radius: 50%; }
.videos-breadcrumb { position: relative; z-index: 1; margin-bottom: 45px; font-size: 12px; font-weight: 700; }
.videos-breadcrumb a { color: #7d55c6; text-decoration: none; }
.videos-kicker { display: block; margin-bottom: 11px; color: #8653ce; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.videos-hero h1,.video-detail-hero h1 { position: relative; z-index: 1; max-width: 860px; margin: 0 0 17px; font-size: clamp(42px,5vw,62px); font-weight: 800; line-height: 1.06; letter-spacing: -.055em; }
.videos-hero p { max-width: 730px; margin: 0; color: #5d6d81; font-size: 15px; line-height: 1.8; }
.videos-hero-note { display: flex; gap: 14px; padding: 18px; align-items: center; color: #fff; background: linear-gradient(135deg,#9563db,#7243bd); border-radius: 18px; box-shadow: 0 15px 35px rgba(112,64,189,.2); }
.videos-hero-note > i { font-size: 30px; }
.videos-hero-note span,.videos-hero-note strong,.videos-hero-note small { display: block; }
.videos-hero-note strong { font-size: 14px; }
.videos-hero-note small { margin-top: 3px; color: rgba(255,255,255,.8); font-size: 12px; }
.videos-content { padding: 70px 0 82px; }
.featured-video { display: grid; grid-template-columns: 1.12fr .88fr; overflow: hidden; margin-bottom: 48px; background: linear-gradient(145deg,#9563db,#7545bf); border-radius: 26px; box-shadow: 0 22px 55px rgba(112,64,189,.2); }
.featured-video-cover { position: relative; display: block; min-height: 410px; overflow: hidden; }
.featured-video-cover::after,.video-cover::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,transparent 45%,rgba(3,20,45,.45)); }
.featured-video-cover img,.video-cover img { width: 100%; height: 100%; object-fit: cover; }
.play-button,.video-cover > span { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg,#a16ce3,#7545c0); border-radius: 50%; box-shadow: 0 12px 28px rgba(68,35,114,.35); transform: translate(-50%,-50%); transition: transform .2s ease; }
.play-button { width: 78px; height: 78px; font-size: 38px; }
.featured-video-cover:hover .play-button,.video-cover:hover > span { transform: translate(-50%,-50%) scale(1.08); }
.featured-video-copy { display: flex; padding: 48px; flex-direction: column; justify-content: center; color: #fff; }
.video-label { display: block; margin-bottom: 12px; color: #caa7f5; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.featured-video-copy h2 { margin-bottom: 16px; font-size: clamp(27px,3vw,39px); font-weight: 800; line-height: 1.16; letter-spacing: -.045em; }
.featured-video-copy > p { margin-bottom: 22px; color: rgba(255,255,255,.73); font-size: 14px; line-height: 1.75; }
.video-author,.detail-presenter { display: flex; gap: 11px; align-items: center; }
.video-author > span,.detail-presenter > span { display: flex; width: 43px; height: 43px; align-items: center; justify-content: center; color: #fff; font-size: 18px; background: rgba(255,255,255,.13); border-radius: 12px; }
.video-author small,.video-author strong,.detail-presenter small,.detail-presenter strong { display: block; }
.video-author small,.detail-presenter small { color: rgba(255,255,255,.65); font-size: 12px; }
.video-author strong,.detail-presenter strong { margin-top: 2px; font-size: 13px; }
.featured-video-link { display: inline-flex; width: fit-content; margin-top: 26px; align-items: center; gap: 8px; color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }
.videos-toolbar { display: flex; margin-bottom: 43px; align-items: center; justify-content: space-between; gap: 22px; }
.videos-search { position: relative; flex: 1 1 390px; max-width: 480px; }
.videos-search i { position: absolute; top: 50%; left: 17px; color: #8755d0; font-size: 17px; transform: translateY(-50%); }
.videos-search input { width: 100%; min-height: 52px; padding: 12px 16px 12px 46px; color: #173454; font-size: 13px; background: #faf9fc; border: 1px solid #e2ddea; border-radius: 13px; outline: 0; }
.videos-search input:focus { border-color: #9a6cda; box-shadow: 0 0 0 4px rgba(143,91,211,.1); }
.videos-filters { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.videos-filters button { padding: 10px 14px; color: #58677b; font-size: 12px; font-weight: 800; background: #fff; border: 1px solid #e2ddea; border-radius: 999px; }
.videos-filters button:hover,.videos-filters button.active { color: #fff; background: #8150ca; border-color: #8150ca; }
.videos-heading { display: flex; margin-bottom: 24px; align-items: flex-end; justify-content: space-between; gap: 20px; }
.videos-heading span { color: #8553cd; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.videos-heading h2 { margin: 5px 0 0; font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.videos-heading > p { margin: 0; color: #717c8d; font-size: 12px; }
.video-list-item { transition: opacity .2s ease; }
.video-card { overflow: hidden; background: #fff; border: 1px solid #e7e2eb; border-radius: 20px; box-shadow: 0 11px 28px rgba(28,42,79,.07); transition: transform .22s ease,box-shadow .22s ease; }
.video-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(28,42,79,.12); }
.video-cover { position: relative; display: block; height: 215px; overflow: hidden; background: #eee5fb; }
.video-cover > span { width: 58px; height: 58px; font-size: 28px; }
.video-card-body { display: flex; min-height: 235px; padding: 23px; flex-direction: column; }
.video-card-body > small { color: #8755ce; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.video-card-body h3 { margin: 9px 0 12px; color: #102d55; font-size: 17px; font-weight: 800; line-height: 1.4; }
.video-card-body p { margin: auto 0 18px; color: #677487; font-size: 13px; }
.video-card-body > a { display: inline-flex; align-items: center; gap: 7px; color: #7c4fc4; font-size: 13px; font-weight: 800; text-decoration: none; }
.videos-pagination { display: flex; margin-top: 48px; align-items: center; justify-content: center; gap: 8px; }
.videos-pagination a { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; color: #647185; font-size: 13px; font-weight: 800; text-decoration: none; background: #fff; border: 1px solid #e2ddea; border-radius: 11px; }
.videos-pagination a.active { color: #fff; background: #8050c8; border-color: #8050c8; }.videos-pagination a.disabled { opacity: .4; pointer-events: none; }
.videos-empty { padding: 55px 20px; text-align: center; background: #faf8fd; border: 1px solid #e6dfed; border-radius: 20px; }.videos-empty i { color: #8552cd; font-size: 30px; }.videos-empty h2 { margin: 12px 0 7px; font-size: 22px; font-weight: 800; }.videos-empty p { margin: 0; color: #6b7789; font-size: 13px; }

.video-detail-hero { padding-bottom: 58px; }.video-detail-hero h1 { max-width: 980px; font-size: clamp(38px,4.7vw,58px); }.detail-presenter > span { color: #fff; background: #8452cc; }.detail-presenter small { color: #778295; }.detail-presenter strong { color: #203a5c; font-size: 14px; }
.video-watch-section { padding: 66px 0 82px; }.video-player { position: relative; overflow: hidden; padding-top: 56.25%; background: #071d3d; border-radius: 23px; box-shadow: 0 20px 48px rgba(6,31,67,.18); }.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-description { padding: 40px 5px 0; }.video-description h2 { margin-bottom: 16px; font-size: 29px; font-weight: 800; letter-spacing: -.04em; }.video-description p { color: #5c6b80; font-size: 15px; line-height: 1.85; }.educational-notice { display: flex; gap: 15px; margin-top: 27px; padding: 20px; align-items: flex-start; color: #654987; background: #f2e9ff; border-radius: 16px; }.educational-notice > i { flex: 0 0 auto; color: #8251ca; font-size: 23px; }.educational-notice strong,.educational-notice span { display: block; }.educational-notice strong { margin-bottom: 4px; font-size: 14px; }.educational-notice span { font-size: 13px; line-height: 1.65; }
.video-side-card { margin-bottom: 22px; padding: 27px; background: #fff; border: 1px solid #e5dfea; border-radius: 20px; box-shadow: 0 12px 30px rgba(27,42,78,.07); }.aside-icon { display: flex; width: 49px; height: 49px; margin-bottom: 16px; align-items: center; justify-content: center; color: #fff; font-size: 20px; background: linear-gradient(135deg,#9563db,#7243bd); border-radius: 14px; }.video-side-card > small { color: #8553cc; font-size: 12px; font-weight: 800; text-transform: uppercase; }.video-side-card h2 { margin: 8px 0 10px; font-size: 20px; font-weight: 800; }.video-side-card > p { margin: 0; color: #667386; font-size: 13px; line-height: 1.7; }
.related-videos > a:not(.all-videos-link) { display: flex; gap: 12px; padding: 14px 0; align-items: center; color: #173555; text-decoration: none; border-top: 1px solid #ece8ef; }.related-videos img { flex: 0 0 86px; width: 86px; height: 67px; object-fit: cover; border-radius: 10px; }.related-videos a span,.related-videos a strong,.related-videos a small { display: block; }.related-videos a strong { font-size: 12px; line-height: 1.45; }.related-videos a small { margin-top: 4px; color: #748092; font-size: 12px; }.all-videos-link { display: inline-flex; margin-top: 13px; align-items: center; gap: 7px; color: #7b4dc4; font-size: 13px; font-weight: 800; text-decoration: none; }

@media (max-width: 991.98px) { .featured-video { grid-template-columns: 1fr; }.featured-video-cover { min-height: 390px; }.videos-hero-note { max-width: 420px; }.videos-toolbar { align-items: flex-start; flex-direction: column; }.videos-search { width: 100%; max-width: none; flex-basis: auto; }.videos-filters { justify-content: flex-start; } }
@media (max-width: 575.98px) { .videos-hero,.video-detail-hero { padding: 20px 0 52px; }.videos-breadcrumb { margin-bottom: 34px; }.videos-hero h1,.video-detail-hero h1 { font-size: 38px; }.videos-hero p { font-size: 14px; }.videos-content,.video-watch-section { padding: 52px 0 64px; }.featured-video { border-radius: 20px; }.featured-video-cover { min-height: 250px; }.featured-video-copy { padding: 30px 24px; }.featured-video-copy h2 { font-size: 27px; }.videos-filters { flex-wrap: nowrap; width: 100%; padding-bottom: 5px; overflow-x: auto; }.videos-filters button { flex: 0 0 auto; }.videos-heading { align-items: flex-start; flex-direction: column; gap: 7px; }.video-cover { height: 220px; }.video-card-body { min-height: 0; }.video-watch-section .row { margin-right: 0; margin-left: 0; }.video-watch-section .row > * { padding-right: 0; padding-left: 0; }.video-description { padding-top: 31px; }.video-description h2 { font-size: 26px; }.video-side-card { padding: 23px; } }