/* roulang page: index */
:root {
            --primary: #0A4D9C;
            --accent: #00A389;
            --bg-light: #F8FAFC;
            --text-main: #0F172A;
            --text-muted: #334155;
            --border-color: #E2E8F0;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
            color: var(--text-muted);
            background-color: var(--bg-light);
            line-height: 1.6;
        }
        .coupon-ticket {
            background: linear-gradient(135deg, #0A4D9C 0%, #1565C0 100%);
            position: relative;
            mask-image: radial-gradient(circle at left, transparent 14px, black 15px), radial-gradient(circle at right, transparent 14px, black 15px);
            mask-position: 0 50%, 100% 50%;
            mask-size: 100% 100%;
            mask-repeat: no-repeat;
        }
        .hero-banner-bg {
            background-image: linear-gradient(to right, rgba(11, 25, 44, 0.92), rgba(10, 77, 156, 0.82)), url('/assets/images/35b4cf3e8e6e669d.webp');
            background-size: cover;
            background-position: center;
        }
        .industrial-bg {
            background-image: linear-gradient(to bottom, rgba(11, 25, 44, 0.95), rgba(7, 54, 110, 0.95)), url('/assets/images/ca81dc4c06d3fe2d.webp');
            background-size: cover;
            background-position: center;
        }