/* roulang page: index */
:root{
  --brand-50:#F2F8FB; --brand-100:#E3EFF6; --brand-200:#C6DFEA; --brand-300:#9CC5DB;
  --brand-400:#6AA6C4; --brand-500:#4288AA; --brand-600:#2F708F; --brand-700:#285D78;
  --brand-800:#224B61; --brand-900:#1A3A4B;
  --sun-400:#F5CD7B; --sun-500:#EEB84E; --sun-600:#D99B2B;
  --page-bg:#F7FAFC; --panel:#FFFFFF; --ink-strong:#13293A; --ink-body:#3B5568;
  --ink-muted:#71869A; --line:#D8E3EC;
  --radius-btn:10px; --radius-card:16px; --radius-img:12px; --radius-banner:24px;
  --shadow-soft:0 2px 16px rgba(19,41,58,0.06); --shadow-hover:0 16px 36px rgba(19,41,58,0.12);
}
html{scroll-behavior:smooth}
body{font-family:'PingFang SC','HarmonyOS Sans SC','Microsoft YaHei','Helvetica Neue',sans-serif;background:var(--page-bg);color:var(--ink-body);line-height:1.6;overflow-wrap:break-word;text-rendering:optimizeLegibility}
*{box-sizing:border-box;margin:0;padding:0}
a{text-decoration:none;color:inherit;transition:color .2s ease}
img{max-width:100%;display:block}
button,input,select{font-family:inherit}
h1,h2,h3{color:var(--ink-strong);line-height:1.3;font-weight:700;text-wrap:balance}
.container-site{max-width:1200px;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
.section-pad{padding-top:5rem;padding-bottom:5rem}
.text-gradient-blue{background:linear-gradient(120deg,#1A3A4B,#2F708F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-gradient{background:linear-gradient(110deg,#1A3A4B,#285D78,#4288AA)}
.nav-link{position:relative;color:rgba(255,255,255,.9);font-weight:500;font-size:15px;padding:.5rem .875rem;border-radius:8px;transition:background .2s}
.nav-link:hover{background:rgba(255,255,255,.15);color:#fff}
.nav-link.active{background:rgba(255,255,255,.18);color:#fff}
.nav-link.active::after{content:'';position:absolute;left:.875rem;right:.875rem;bottom:.25rem;height:2px;background:#F5CD7B;border-radius:2px}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;background:var(--brand-700);color:#fff;font-weight:600;font-size:15px;height:3rem;border-radius:var(--radius-btn);transition:all .2s;border:1px solid transparent}
.btn-primary:hover{background:var(--brand-600);box-shadow:0 10px 20px rgba(40,93,120,.2);transform:translateY(-1px)}
.btn-primary:focus-visible,.btn-line:focus-visible,.btn-cta:focus-visible{outline:2px solid var(--brand-400);outline-offset:2px}
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;background:transparent;color:var(--brand-700);font-weight:600;font-size:15px;height:3rem;border-radius:var(--radius-btn);border:1.5px solid rgba(40,93,120,.5);transition:all .2s}
.btn-line:hover{background:var(--brand-50);border-color:var(--brand-600)}
.btn-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--sun-500);color:var(--ink-strong);font-weight:700;font-size:15px;height:3rem;padding:0 1.75rem;border-radius:var(--radius-btn);transition:all .2s;border:none}
.btn-cta:hover{background:var(--sun-400);transform:translateY(-2px);box-shadow:0 12px 24px rgba(238,184,78,.35)}
.btn-small{height:2.5rem;padding:0 1.125rem;font-size:14px}
.card-soft{background:var(--panel);border:1px solid rgba(216,227,236,.6);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);transition:all .3s ease}
.card-soft:hover{box-shadow:var(--shadow-hover);transform:translateY(-4px)}
.badge-tag{display:inline-block;background:var(--brand-50);color:var(--brand-700);font-size:12px;font-weight:600;padding:.25rem .625rem;border-radius:6px;line-height:1.4}
.badge-sun{display:inline-block;background:var(--sun-500);color:#13293A;font-size:12px;font-weight:700;padding:.25rem .625rem;border-radius:6px}
.rating-num{color:var(--sun-600);font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.hero-bg{background:linear-gradient(115deg, rgba(255,255,255,.93) 0%, rgba(242,248,251,.85) 42%, rgba(198,223,234,.45) 100%), url('/assets/images/backpic/back-1.jpg') center/cover no-repeat}
.step-num{width:2.75rem;height:2.75rem;border-radius:9999px;background:var(--brand-100);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.125rem;color:var(--brand-800);flex-shrink:0}
.faq-item{background:#fff;border:1px solid rgba(216,227,236,.7);border-radius:14px;overflow:hidden;transition:box-shadow .25s}
.faq-item[open]{box-shadow:0 8px 24px rgba(19,41,58,.08)}
.faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;font-weight:600;font-size:1.0625rem;color:var(--ink-strong)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .chevron{flex-shrink:0;width:1.25rem;height:1.25rem;color:var(--brand-600);transition:transform .3s}
.faq-item[open] summary .chevron{transform:rotate(45deg)}
.faq-item .answer{padding:0 1.5rem 1.5rem;color:var(--ink-body);line-height:1.75;font-size:.9375rem}
.footer-bg{background:#13293A}
.footer-link{color:#8CA1B3;font-size:.875rem;transition:color .2s}
.footer-link:hover{color:#F5CD7B}
.footer-title{color:#fff;font-size:.9375rem;font-weight:600;letter-spacing:.02em}
.poster-card img{transition:transform .6s ease, filter .4s ease}
.poster-card:hover img{transform:scale(1.05)}
.img-mask::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(19,41,58,.45), transparent 45%);pointer-events:none}
.play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);opacity:0;transition:all .3s}
.poster-card:hover .play-overlay{opacity:1;transform:translate(-50%,-50%) scale(1)}
.stat-value{color:var(--sun-400);font-size:1.875rem;font-weight:800;line-height:1.2;font-feature-settings:"tnum"}
.eyebrow-letter{display:inline-block;font-size:.75rem;letter-spacing:.2em;font-weight:600;color:var(--brand-600);text-transform:uppercase;margin-bottom:.5rem}
.aspect-16x9{aspect-ratio:16/9;object-fit:cover}
.aspect-poster{aspect-ratio:3/4;object-fit:cover}
.arrow-link{transition:all .25s}
.arrow-link:hover .arrow-icon{transform:translateX(4px)}
.pain-card{transition:box-shadow .3s ease,transform .3s ease}
.pain-card:hover{box-shadow:0 16px 36px rgba(19,41,58,.1);transform:translateY(-5px)}
.avatar-circle{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#C6DFEA,#4288AA);color:#fff;border-radius:9999px;width:2.75rem;height:2.75rem;font-weight:700}
.offer-card{transition:transform .3s ease, box-shadow .3s ease}
.offer-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(19,41,58,.15)}
details summary{padding:1.25rem}
details summary:focus-visible{outline:2px solid var(--brand-400);outline-offset:-2px;border-radius:14px}
.scrollbar-thin{scrollbar-width:thin;scrollbar-color:var(--brand-200) transparent}
.scrollbar-thin::-webkit-scrollbar{height:6px}
.scrollbar-thin::-webkit-scrollbar-track{background:transparent}
.scrollbar-thin::-webkit-scrollbar-thumb{background:var(--brand-200);border-radius:3px}
@media (max-width:768px){
.section-pad{padding-top:3rem;padding-bottom:3rem}
.hero-title{font-size:1.875rem!important;line-height:1.25!important}
.container-site{padding-left:1rem;padding-right:1rem}
}
@media (max-width:640px){
.stat-value{font-size:1.375rem!important}
}
@media (max-width:1024px){
.nav-desktop{display:none}
.nav-mobile-btn{display:flex}
}
.nav-mobile-btn{display:none}
.mobile-menu{display:none}
.mobile-menu.open{display:block}

/* roulang page: category1 */
/* roulang page: category-1 */
        :root {
            --brand-50: #F2F8FB;
            --brand-100: #E3EFF6;
            --brand-200: #C6DFEA;
            --brand-300: #9CC5DB;
            --brand-400: #6AA6C4;
            --brand-500: #4288AA;
            --brand-600: #2F708F;
            --brand-700: #285D78;
            --brand-800: #224B61;
            --brand-900: #1A3A4B;
            --sun-400: #F5CD7B;
            --sun-500: #EEB84E;
            --sun-600: #D99B2B;
            --page-bg: #F7FAFC;
            --panel: #FFFFFF;
            --ink-strong: #13293A;
            --ink-body: #3B5568;
            --ink-muted: #71869A;
            --line: #D8E3EC;
            --radius-btn: 10px;
            --radius-card: 16px;
            --radius-img: 12px;
            --radius-banner: 24px;
            --shadow-soft: 0 2px 16px rgba(19, 41, 58, 0.06);
            --shadow-hover: 0 16px 36px rgba(19, 41, 58, 0.12);
        }
        html {
            scroll-behavior: smooth
        }
        body {
            font-family: 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
            background: var(--page-bg);
            color: var(--ink-body);
            line-height: 1.6;
            overflow-wrap: break-word;
            text-rendering: optimizeLegibility
        }
        a {
            text-decoration: none;
            color: inherit;
            transition: color .2s ease
        }
        img {
            max-width: 100%;
            display: block
        }
        button,
        input,
        select {
            font-family: inherit
        }
        .container-site {
            max-width: 1200px;
            margin: 0 auto;
            padding-left: 1.25rem;
            padding-right: 1.25rem
        }
        .section-pad {
            padding-top: 4.5rem;
            padding-bottom: 4.5rem
        }
        .nav-gradient {
            background: linear-gradient(110deg, #1A3A4B, #285D78, #4288AA)
        }
        .nav-link {
            position: relative;
            color: rgba(255, 255, 255, .9);
            font-weight: 500;
            font-size: 15px;
            padding: .5rem .875rem;
            border-radius: 8px;
            transition: background .2s
        }
        .nav-link:hover {
            background: rgba(255, 255, 255, .15);
            color: #fff
        }
        .nav-link.active {
            background: rgba(255, 255, 255, .18);
            color: #fff
        }
        .nav-link.active::after {
            content: '';
            position: absolute;
            left: .875rem;
            right: .875rem;
            bottom: .25rem;
            height: 2px;
            background: #F5CD7B;
            border-radius: 2px
        }
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .375rem;
            background: var(--brand-700);
            color: #fff;
            font-weight: 600;
            font-size: 15px;
            height: 3rem;
            border-radius: var(--radius-btn);
            transition: all .2s;
            border: 1px solid transparent;
            cursor: pointer
        }
        .btn-primary:hover {
            background: var(--brand-600);
            box-shadow: 0 10px 20px rgba(40, 93, 120, .2);
            transform: translateY(-1px)
        }
        .btn-line {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .375rem;
            background: transparent;
            color: var(--brand-700);
            font-weight: 600;
            font-size: 15px;
            height: 3rem;
            border-radius: var(--radius-btn);
            border: 1.5px solid rgba(40, 93, 120, .5);
            transition: all .2s;
            cursor: pointer
        }
        .btn-line:hover {
            background: var(--brand-50);
            border-color: var(--brand-600)
        }
        .btn-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--sun-500);
            color: var(--ink-strong);
            font-weight: 700;
            font-size: 15px;
            height: 3rem;
            padding: 0 1.5rem;
            border-radius: var(--radius-btn);
            transition: all .2s;
            border: none;
            cursor: pointer
        }
        .btn-cta:hover {
            background: var(--sun-400);
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(238, 184, 78, .35)
        }
        .btn-primary:focus-visible,
        .btn-line:focus-visible,
        .btn-cta:focus-visible,
        .cat-tab:focus-visible {
            outline: 2px solid var(--brand-400);
            outline-offset: 2px
        }
        .card-soft {
            background: var(--panel);
            border: 1px solid rgba(216, 227, 236, .6);
            border-radius: var(--radius-card);
            box-shadow: var(--shadow-soft);
            transition: all .3s ease
        }
        .card-soft:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-4px)
        }
        .badge-tag {
            display: inline-block;
            background: var(--brand-50);
            color: var(--brand-700);
            font-size: 12px;
            font-weight: 600;
            padding: .25rem .625rem;
            border-radius: 6px;
            line-height: 1.4
        }
        .badge-sun {
            display: inline-block;
            background: var(--sun-500);
            color: #13293A;
            font-size: 12px;
            font-weight: 700;
            padding: .25rem .625rem;
            border-radius: 6px
        }
        .eyebrow-letter {
            display: inline-block;
            font-size: .75rem;
            letter-spacing: .2em;
            font-weight: 600;
            color: var(--brand-600);
            margin-bottom: .5rem
        }
        .arrow-link {
            transition: all .25s
        }
        .arrow-link:hover .arrow-icon {
            transform: translateX(4px)
        }
        .footer-bg {
            background: #13293A
        }
        .footer-link {
            color: #8CA1B3;
            font-size: .875rem;
            transition: color .2s
        }
        .footer-link:hover {
            color: #F5CD7B
        }
        .footer-title {
            color: #fff;
            font-size: .9375rem;
            font-weight: 600;
            letter-spacing: .02em
        }
        .hero-cat-bg {
            background: linear-gradient(100deg, rgba(26, 58, 75, .93) 0%, rgba(34, 75, 97, .72) 56%, rgba(66, 136, 170, .5) 100%), url('/assets/images/backpic/back-3.jpg') center/cover no-repeat
        }
        .cat-tab {
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
            background: rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .86);
            font-size: 13px;
            font-weight: 500;
            height: 2.25rem;
            padding: 0 1.125rem;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, .12);
            transition: background .2s, color .2s;
            cursor: pointer
        }
        .cat-tab:hover {
            background: rgba(255, 255, 255, .2);
            color: #fff
        }
        .cat-tab.is-active {
            background: var(--sun-500);
            border-color: var(--sun-500);
            color: #13293A;
            font-weight: 700
        }
        .sticky-filter {
            position: sticky;
            top: 4.25rem;
            z-index: 30;
            background: rgba(247, 250, 252, .82);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(216, 227, 236, .7)
        }
        .poster-media {
            overflow: hidden;
            border-radius: var(--radius-img);
            background: #C6DFEA;
            position: relative
        }
        .poster-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .6s ease
        }
        .media-card:hover .poster-media img {
            transform: scale(1.05)
        }
        .media-card .play-float {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(.85);
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .9);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--brand-800);
            box-shadow: 0 8px 24px rgba(19, 41, 58, .2);
            opacity: 0;
            transition: all .3s
        }
        .media-card:hover .play-float {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1)
        }
        .rank-row:nth-child(even) {
            background: rgba(242, 248, 251, .6)
        }
        .rank-num {
            width: 2rem;
            height: 2rem;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: .9375rem;
            background: var(--brand-100);
            color: var(--brand-800)
        }
        .faq-item {
            background: #fff;
            border: 1px solid rgba(216, 227, 236, .7);
            border-radius: 14px;
            overflow: hidden;
            transition: box-shadow .25s
        }
        .faq-item[open] {
            box-shadow: 0 8px 24px rgba(19, 41, 58, .08)
        }
        .faq-item summary {
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.25rem 1.5rem;
            font-weight: 600;
            font-size: 1.0625rem;
            color: var(--ink-strong)
        }
        .faq-item summary::-webkit-details-marker {
            display: none
        }
        .faq-item summary .chevron {
            flex-shrink: 0;
            width: 1.25rem;
            height: 1.25rem;
            color: var(--brand-600);
            transition: transform .3s
        }
        .faq-item[open] summary .chevron {
            transform: rotate(45deg)
        }
        .faq-item .answer {
            padding: 0 1.5rem 1.5rem;
            color: var(--ink-body);
            line-height: 1.75;
            font-size: .9375rem
        }
        .cta-panel {
            background: linear-gradient(120deg, #224B61, #1A3A4B), linear-gradient(100deg, rgba(238, 184, 78, .15), transparent)
        }
        .cta-light {
            background: linear-gradient(110deg, #E3EFF6 0%, #C6DFEA 70%, #9CC5DB 100%)
        }
        .nav-mobile-btn {
            display: none
        }
        .mobile-menu {
            display: none
        }
        .mobile-menu.open {
            display: block
        }
        @media (max-width: 1023px) {
            .nav-desktop {
                display: none
            }
            .nav-mobile-btn {
                display: flex;
                width: 2.5rem;
                height: 2.5rem;
                align-items: center;
                justify-content: center;
                color: #fff;
                border-radius: 8px
            }
            .nav-mobile-btn:hover {
                background: rgba(255, 255, 255, .1)
            }
            .desktop-only {
                display: none
            }
        }
        @media (max-width: 640px) {
            .section-pad {
                padding-top: 3rem;
                padding-bottom: 3rem
            }
            .container-site {
                padding-left: 1rem;
                padding-right: 1rem
            }
            .faq-item summary {
                padding: 1rem 1.25rem;
                font-size: .9375rem
            }
            .faq-item .answer {
                padding: 0 1.25rem 1.25rem;
                font-size: .875rem;
                line-height: 1.7
            }
            .hero-cat-title {
                font-size: 1.75rem !important;
                line-height: 1.3 !important
            }
            .sticky-filter {
                top: 3.75rem
            }
        }
        @media (max-width: 360px) {
            .container-site {
                padding-left: .75rem;
                padding-right: .75rem
            }
        }