:root{
  --brand:#0aa8b0;
  --bg-hero: linear-gradient(135deg,#0c8796 0%,#0fb0c1 100%);
  --text-dark:#071125;
  --muted:#6c7a86;
  --shadow: 0 10px 30px rgba(13, 35, 57, 0.08);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
}


*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text-dark);background:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none}
.container{max-width:1150px}


.navbar{
  background:#fff;
  padding:0.5rem 0;
  border-bottom:1px solid rgba(10,10,10,0.04);
  transition:box-shadow .18s, transform .18s;
}
.navbar .container{display:flex;align-items:center;gap:1rem}
.navbar .navbar-brand{color:var(--brand);font-weight:700}
.navbar .nav-link{color:rgba(0,0,0,0.75);padding:0.6rem 0.9rem;position:relative;display:inline-block}
.navbar .nav-link:hover{color:var(--brand)}

.navbar .nav-link::after{
  content:"";
  display:block;
  height:3px;
  width:0;
  background:var(--brand);
  transition:width .22s ease;
  position:absolute;
  left:0;
  bottom:-8px;
  border-radius:2px;
}
.navbar .nav-link:hover::after{width:100%}


.navbar .nav-link.active{color:var(--brand);font-weight:600}
.navbar .nav-link.active::after{width:100%}


body { padding-top:72px; } 


#hero{min-height:78vh;background-image:var(--bg-hero);background-size:cover;background-position:center;display:flex;align-items:center;padding-top:20px;position:relative}
.display-3{color:#fff;font-weight:800;line-height:1.02}
.lead{color:rgba(255,255,255,0.95);opacity:0.95}
.btn-cta{background:#fff;color:var(--brand);font-weight:600;border-radius:14px;padding:12px 26px;box-shadow:var(--shadow)}
.btn-outline-light{border-radius:14px;padding:10px 22px}
.text-light-50{color:rgba(255,255,255,0.8)}
.btn-contact{background:var(--brand);color:#fff;border-radius:10px;padding:8px 16px}


.section-gap{padding-top:64px;padding-bottom:64px}
.section-gap-lg{padding-top:96px;padding-bottom:96px}


.category-card{border-radius:14px;padding:22px}
.icon-square{width:56px;height:56px;display:inline-flex;align-items:center;justify-content:center;font-size:24px}
.bg-primary{background:linear-gradient(180deg,#0b889a,#0b6f86)}
.bg-pink{background:linear-gradient(180deg,#ff4d97,#ff7aa3)}
.bg-green{background:linear-gradient(180deg,#1bcf8a,#14b67a)}
.bg-yellow{background:linear-gradient(180deg,#f0a71b,#f39c12)}
.link-primary{color:var(--brand);font-weight:600}


.video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1100px){ .video-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:768px){ .video-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px){ .video-grid{grid-template-columns:1fr;} }

.video-card{
  background:#fff;border-radius:12px;box-shadow:0 14px 32px rgba(11,34,56,0.06);
  overflow:hidden;display:flex;flex-direction:column;height:100%;position:relative;
}
.video-thumb{
  height:150px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;background:linear-gradient(180deg,#0b889a,#0b6f86);
  overflow:hidden;position:relative;
}
.video-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;
}
.video-card:hover .video-thumb img{transform:scale(1.05)}
.video-body{padding:14px;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.video-title{font-weight:700;margin-bottom:6px}
.video-desc{font-size:0.92rem;color:var(--muted);margin-bottom:8px}
.video-cta{align-self:flex-start;padding:6px 10px;border-radius:8px;background:transparent;color:var(--brand);font-weight:600;border:1px solid rgba(10,168,176,0.12)}
.video-meta{font-size:0.85rem;color:var(--muted);margin-top:8px}


.preview-badge{
  position:absolute;top:10px;left:10px;background:rgba(0,0,0,0.45);color:#fff;padding:6px 8px;border-radius:6px;font-weight:600;font-size:12px;
}


.slider{max-width:900px;margin:0 auto;position:relative}
.slide{padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 16px 36px rgba(13,35,57,0.08)}
.hidden{display:none}
.star{font-size:28px;color:var(--brand);margin-bottom:8px}


.cta-banner{background:linear-gradient(90deg,#0b889a,#0b6f86);border-radius:14px;color:#fff;max-width:900px;margin:auto;box-shadow:0 30px 60px rgba(11,105,120,0.08)}


.bg-footer{background:linear-gradient(180deg,#081022,#0b1220);color:#c7d4df}
footer a{color:inherit;opacity:.95}


.category-hero{min-height:38vh;padding-top:80px;padding-bottom:80px}
.entertainment-page .category-hero{background:linear-gradient(135deg,#7b36f6,#d26df3)}
.music-page .category-hero{background:linear-gradient(135deg,#ff6aa0,#ff8cc1)}
.education-page .category-hero{background:linear-gradient(135deg,#1bcf8a,#7be8b7)}
.live-page .category-hero{background:linear-gradient(135deg,#f0a71b,#ffbe49)}

.rounded-lg{border-radius:14px}


.sep-lg{margin-top:40px;margin-bottom:40px}


@media (max-width:992px){
  .display-3{font-size:2rem}
  .container{max-width:920px}
  body { padding-top:80px; }
}
@media (max-width:576px){
  .display-3{font-size:1.5rem}
  .btn-cta{padding:10px 18px}
  .container{max-width:540px}
  .icon-square{width:48px;height:48px}
}