/* roulang page: index */
:root {
            --primary: #0F52BA;
            --primary-dark: #0A3A85;
            --accent: #2563EB;
            --success: #0D9488;
            --text-dark: #1E293B;
            --text-light: #64748B;
            --bg-light: #F8FAFC;
            --card-border: #E2E8F0;
        }
        html {
            scroll-behavior: smooth;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        }
        .hero-banner {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.88) 0%, rgba(15, 82, 186, 0.82) 100%), url('/assets/images/cfe0254c16473be3.jpg') center/cover no-repeat;
        }
        .coupon-notch-l {
            position: absolute;
            left: -10px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background-color: #F8FAFC;
            border-radius: 50%;
        }
        .coupon-notch-r {
            position: absolute;
            right: -10px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background-color: #F8FAFC;
            border-radius: 50%;
        }
        .card-shadow {
            box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
            transition: all 0.25s ease;
        }
        .card-shadow:hover {
            box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
            transform: translateY(-3px);
        }