/* roulang page: index */
:root {
            --primary: #1e40af;
            --primary-hover: #1d4ed8;
            --accent: #0284c7;
            --bg-base: #f8fafc;
            --text-main: #0f172a;
            --text-muted: #475569;
            --border-soft: #e2e8f0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            color: var(--text-main);
            background-color: var(--bg-base);
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
        }

        .ticket-cutout-left {
            position: absolute;
            left: -12px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #f8fafc;
            box-shadow: inset -2px 0 3px rgba(0,0,0,0.05);
        }

        .ticket-cutout-right {
            position: absolute;
            right: -12px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #f8fafc;
            box-shadow: inset 2px 0 3px rgba(0,0,0,0.05);
        }

        .custom-dashed-line {
            border-top: 2px dashed #cbd5e1;
        }

        .dropdown-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(8px);
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .dropdown-group:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        details summary::-webkit-details-marker {
            display: none;
        }

/* roulang page: category1 */
:root {
      --primary: #1e40af;
      --primary-hover: #1d4ed8;
      --accent: #0284c7;
      --bg-base: #f8fafc;
      --text-main: #0f172a;
      --text-muted: #475569;
      --border-soft: #e2e8f0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--text-main);
      background-color: var(--bg-base);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
    .mega-menu {
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mega-menu-trigger:hover .mega-menu,
    .mega-menu-trigger:focus-within .mega-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }