/* roulang page: index */
:root {
      --bg-main: #080c14;
      --card-bg: #151d2c;
      --accent-color: #f59e0b;
      --border-color: #1e293b;
    }
    body {
      background-color: var(--bg-main);
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    }
    .poster-ratio {
      aspect-ratio: 2 / 2.9;
    }
    .hero-shadow {
      background: linear-gradient(180deg, rgba(8, 12, 20, 0.1) 0%, rgba(8, 12, 20, 0.85) 85%, #080c14 100%);
    }
    .glass-btn {
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.35);
    }
    .glass-btn:hover {
      background: rgba(245, 158, 11, 0.25);
    }
    .line-clamp-2 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    @media (max-width: 1024px) {
      .grid-responsive-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
    @media (max-width: 768px) {
      .grid-responsive-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 520px) {
      .grid-responsive-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
      }
    }

/* roulang page: category1 */
:root {
      --bg-main: #080c14;
      --card-bg: #151d2c;
      --accent-color: #f59e0b;
      --border-color: #1e293b;
    }
    body {
      background-color: var(--bg-main);
      color: #e2e8f0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    }
    .hero-shadow {
      background: linear-gradient(180deg, rgba(8, 12, 20, 0.1) 0%, rgba(8, 12, 20, 0.85) 85%, #080c14 100%);
    }
    .glass-btn {
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.35);
    }
    .glass-btn:hover {
      background: rgba(245, 158, 11, 0.25);
    }
    .grid-movie-cards {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1.25rem;
    }
    @media (max-width: 1024px) {
      .grid-movie-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
      }
    }
    @media (max-width: 768px) {
      .grid-movie-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.875rem;
      }
    }
    @media (max-width: 520px) {
      .grid-movie-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.625rem;
      }
    }
    .filter-chip.active {
      background-color: #f59e0b;
      color: #080c14;
      font-weight: 600;
    }