/* roulang page: index */
:root {
      --primary: #00C37A;
      --primary-hover: #00AA6A;
      --bg-dark: #0D1311;
      --bg-card: #141D19;
      --bg-light: #F6F8F7;
      --text-main: #FFFFFF;
      --text-muted: #768580;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --transition-base: cubic-bezier(0.16, 1, 0.3, 1);
    }
    body {
      background-color: var(--bg-dark);
      color: #D1DCD6;
      font-family: Inter, "PingFang SC", "HarmonyOS Sans", sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    .hero-bg {
      background-image: linear-gradient(180deg, rgba(13, 19, 17, 0.72) 0%, rgba(13, 19, 17, 0.98) 100%), url('/assets/images/1cb6b4386ee1eded.webp');
      background-size: cover;
      background-position: center;
    }
    .custom-card {
      background: #121A17;
      border: 1px solid var(--border-subtle);
      transition: all 0.35s var(--transition-base);
    }
    .custom-card:hover {
      border-color: rgba(0, 195, 122, 0.35);
      transform: translateY(-4px);
    }
    details summary::-webkit-details-marker {
      display: none;
    }

/* roulang page: category1 */
:root {
      --primary: #00C37A;
      --primary-hover: #00AA6A;
      --bg-dark: #0D1311;
      --bg-card: #141D19;
      --bg-light: #F6F8F7;
      --text-main: #FFFFFF;
      --text-muted: #768580;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --transition-base: cubic-bezier(0.16, 1, 0.3, 1);
    }
    body {
      background-color: var(--bg-dark);
      color: #D1DCD6;
      font-family: Inter, "PingFang SC", "HarmonyOS Sans", sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    .custom-card {
      background: #121A17;
      border: 1px solid var(--border-subtle);
      transition: all 0.35s var(--transition-base);
    }
    .custom-card:hover {
      border-color: rgba(0, 195, 122, 0.35);
      transform: translateY(-4px);
    }
    .custom-table th, .custom-table td {
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    details summary::-webkit-details-marker {
      display: none;
    }

/* roulang page: category2 */
:root {
      --primary: #00C37A;
      --primary-hover: #00AA6A;
      --bg-dark: #0D1311;
      --bg-card: #141D19;
      --bg-light: #F6F8F7;
      --text-main: #FFFFFF;
      --text-muted: #768580;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --transition-base: cubic-bezier(0.16, 1, 0.3, 1);
    }
    body {
      background-color: var(--bg-dark);
      color: #D1DCD6;
      font-family: Inter, "PingFang SC", "HarmonyOS Sans", sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    .custom-card {
      background: #121A17;
      border: 1px solid var(--border-subtle);
      transition: all 0.35s var(--transition-base);
    }
    .custom-card:hover {
      border-color: rgba(0, 195, 122, 0.35);
      transform: translateY(-4px);
    }
    .banner-hero-bg {
      background-image: linear-gradient(180deg, rgba(13, 19, 17, 0.85) 0%, rgba(13, 19, 17, 0.98) 100%), url('/assets/images/8250ddc2a83a736d.webp');
      background-size: cover;
      background-position: center;
    }
    details summary::-webkit-details-marker {
      display: none;
    }
    details[open] summary .faq-icon {
      transform: rotate(45deg);
      color: var(--primary);
    }
    .filter-btn.active {
      background-color: var(--primary);
      color: #0D1311;
      border-color: var(--primary);
      font-weight: 700;
    }

/* roulang page: category4 */
:root {
      --primary: #00C37A;
      --primary-hover: #00AA6A;
      --bg-dark: #0D1311;
      --bg-card: #141D19;
      --bg-light: #F6F8F7;
      --text-main: #FFFFFF;
      --text-muted: #768580;
      --border-subtle: rgba(255, 255, 255, 0.08);
      --transition-base: cubic-bezier(0.16, 1, 0.3, 1);
    }
    body {
      background-color: var(--bg-dark);
      color: #D1DCD6;
      font-family: Inter, "PingFang SC", "HarmonyOS Sans", -apple-system, sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    .hero-bg {
      background-image: linear-gradient(180deg, rgba(13, 19, 17, 0.85) 0%, rgba(13, 19, 17, 0.98) 100%), url('/assets/images/7aff0c3ee6b38a34.webp');
      background-size: cover;
      background-position: center;
    }
    .custom-card {
      background: #121A17;
      border: 1px solid var(--border-subtle);
      transition: all 0.35s var(--transition-base);
    }
    .custom-card:hover {
      border-color: rgba(0, 195, 122, 0.35);
      transform: translateY(-4px);
    }
    .filter-chip.active {
      background-color: var(--primary);
      color: #080D0B;
      font-weight: 600;
      border-color: var(--primary);
    }
    details summary::-webkit-details-marker {
      display: none;
    }
    details[open] summary .faq-icon {
      transform: rotate(45deg);
      color: var(--primary);
    }

/* roulang page: category3 */
:root {
            --primary: #00C37A;
            --primary-hover: #00AA6A;
            --bg-dark: #0D1311;
            --bg-card: #141D19;
            --bg-light: #F6F8F7;
            --text-main: #FFFFFF;
            --text-muted: #768580;
            --border-subtle: rgba(255, 255, 255, 0.08);
            --transition-base: cubic-bezier(0.16, 1, 0.3, 1);
        }
        body {
            background-color: var(--bg-dark);
            color: #D1DCD6;
            font-family: Inter, "PingFang SC", "HarmonyOS Sans", -apple-system, sans-serif;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }
        .custom-card {
            background: #121A17;
            border: 1px solid var(--border-subtle);
            transition: all 0.35s var(--transition-base);
        }
        .custom-card:hover {
            border-color: rgba(0, 195, 122, 0.35);
            transform: translateY(-4px);
        }
        details summary::-webkit-details-marker {
            display: none;
        }