/* roulang page: index */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
        .gradient-bg { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); }
        .nav-link:hover { color: #2563eb; }
        .card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
        .section-padding { padding-top: 3rem; padding-bottom: 3rem; }

/* roulang page: article */
/* roulang page: article */
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f8fafc; color: #1e293b; }
        .nav-link:hover { color: #2563eb; }
        .card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
        .section-padding { padding-top: 3rem; padding-bottom: 3rem; }
        .article-content { font-size: 1.0625rem; line-height: 1.85; color: #334155; }
        .article-content p { margin-bottom: 1.5rem; }
        .article-content h2 { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin-top: 2rem; margin-bottom: 1rem; border-left: 4px solid #1e40af; padding-left: 0.75rem; }
        .article-content h3 { font-size: 1.25rem; font-weight: 600; color: #1e293b; margin-top: 1.5rem; margin-bottom: 0.75rem; }
        .article-content ul, .article-content ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
        .article-content ul { list-style-type: disc; }
        .article-content ol { list-style-type: decimal; }
        .article-content li { margin-bottom: 0.5rem; }
        .article-content blockquote { border-left: 4px solid #cbd5e1; padding-left: 1rem; color: #64748b; font-style: italic; margin-bottom: 1.5rem; }
        .article-content img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1.5rem auto; display: block; }
        @media (max-width: 1024px) {
            .article-layout { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .section-padding { padding-top: 1.5rem; padding-bottom: 1.5rem; }
            .article-content { font-size: 1rem; }
        }

/* roulang page: category1 */
/* roulang page: index & category common styles */
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
    .nav-link:hover { color: #2563eb; }
    .card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
    .section-padding { padding-top: 3.5rem; padding-bottom: 3.5rem; }

    /* category page customized visual system */
    .hero-category-bg {
      background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(30, 58, 138, 0.9)), url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
    }
    .badge-primary {
      background-color: #eff6ff;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    .article-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    .article-card {
      transition: all 0.25s ease-in-out;
    }

    /* responsive media queries */
    @media (max-width: 1024px) {
      .section-padding { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    }
    @media (max-width: 768px) {
      .hero-title { font-size: 1.875rem; line-height: 2.25rem; }
      .section-padding { padding-top: 2rem; padding-bottom: 2rem; }
      .grid-responsive { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    }
    @media (max-width: 520px) {
      .hero-title { font-size: 1.5rem; line-height: 2rem; }
      .btn-responsive { width: 100%; text-align: center; }
    }