/* =====================================
   老挝支付资讯文章详情页 CSS
   PC + Mobile Responsive
===================================== */



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



html {
    scroll-behavior: smooth;
}



body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    background: #020817;
    color: #fff;
    overflow-x: hidden;
}



p {
    color: #cbd5e1;
    line-height: 1.9;
    font-size: 16px;
}



a {
    color: #fff;
    text-decoration: none;
}





/* =========================
背景
========================= */


.bg-animation {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient( circle at top, #123d70, #020817 70% );
}








/* =========================
Header
========================= */


.header {
    height: 80px;
    padding: 0 8%;
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 99;
}



.logo {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #00eaff;
}



    .logo span {
        color: #fff;
    }




.nav {
    display: flex;
    gap: 35px;
}



    .nav a {
        transition: .3s;
    }



        .nav a:hover {
            color: #00eaff;
        }

    /* ==========================
 当前导航选中状态
========================== */


    .nav a {
        position: relative;
        padding: 10px 18px;
        border-radius: 25px;
        transition: .35s;
    }



        /* 鼠标经过 */

        .nav a:hover {
            color: #00eaff;
            background: rgba(0,234,255,.08);
        }



        /* 当前页面 */

        .nav a.active {
            color: #00eaff;
            background: linear-gradient( 90deg, rgba(0,234,255,.18), rgba(37,99,235,.25) );
            border: 1px solid rgba(0,234,255,.45);
            box-shadow: 0 0 15px rgba(0,234,255,.35), inset 0 0 15px rgba(0,234,255,.15);
        }



            /* 底部发光线 */

            .nav a.active::after {
                content: "";
                position: absolute;
                left: 50%;
                bottom: 3px;
                width: 35px;
                height: 2px;
                transform: translateX(-50%);
                background: #00eaff;
                box-shadow: 0 0 10px #00eaff;
                border-radius: 10px;
            }

.menu-btn {
    display: none;
    font-size: 30px;
    color: #00eaff;
}









/* =========================
文章Banner
========================= */


.article-banner {
    height: 500px;
    padding: 150px 20px 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient( 120deg, rgba(0,234,255,.12), transparent );
}




    .article-banner h1 {
        font-size: 52px;
        line-height: 1.3;
        background: linear-gradient( 90deg, #00eaff, #8b5cf6 );
        -webkit-background-clip: text;
        color: transparent;
    }



    .article-banner p {
        font-size: 24px;
        margin-top: 20px;
    }



.date {
    margin-top: 25px;
    color: #94a3b8;
}









/* =========================
文章主体
========================= */


.article-container {
    width: 1200px;
    max-width: 90%;
    margin: 80px auto;
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 40px;
}









/* =========================
正文
========================= */


.article-content {
    padding: 45px;
    border-radius: 25px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
}





.summary {
    padding: 30px;
    margin-bottom: 40px;
    border-radius: 20px;
    background: rgba(0,234,255,.08);
    border-left: 4px solid #00eaff;
    font-size: 18px;
    line-height: 1.8;
}





.article-content h2 {
    font-size: 30px;
    margin: 45px 0 20px;
    color: #00eaff;
}



.article-content ul {
    margin-left: 30px;
    color: #cbd5e1;
    line-height: 2;
}









/* =========================
功能模块
========================= */


.feature-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-top: 30px;
}



    .feature-grid div {
        padding: 25px;
        text-align: center;
        border-radius: 18px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.15);
        transition: .3s;
    }



        .feature-grid div:hover {
            transform: translateY(-8px);
            border-color: #00eaff;
        }









/* =========================
侧边栏
========================= */


aside {
    display: flex;
    flex-direction: column;
    gap: 25px;
}



.side-box {
    padding: 30px;
    border-radius: 25px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
}




    .side-box h3 {
        font-size: 24px;
        margin-bottom: 20px;
        color: #00eaff;
    }



    .side-box a {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
        color: #cbd5e1;
        transition: .3s;
    }



        .side-box a:hover {
            color: #00eaff;
        }





.btn {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 15px 35px;
    border-radius: 40px;
    background: linear-gradient( 90deg, #00eaff, #2563eb );
    box-shadow: 0 0 30px rgba(0,234,255,.5);
    color: #fff !important;
    border: none !important;
}









/* =========================
Footer
========================= */


footer {
    padding: 100px 20px;
    text-align: center;
    background: linear-gradient( 120deg, #071b38, #020817 );
}



    footer h2 {
        font-size: 40px;
        margin-bottom: 20px;
    }









/* =========================
滚动动画
========================= */


.hidden {
    opacity: 0;
    transform: translateY(50px);
    transition: all .8s ease;
}



.show {
    opacity: 1;
    transform: translateY(0);
}










/* =========================
手机适配
========================= */


@media(max-width:900px) {



    .header {
        height: 70px;
        padding: 0 20px;
    }



    .menu-btn {
        display: block;
    }




    .nav {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        display: none;
        flex-direction: column;
        padding: 25px;
        background: #06152d;
        gap: 20px;
    }



        .nav.show {
            display: flex;
        }








    .article-banner {
        height: auto;
        padding: 130px 25px 70px;
    }



        .article-banner h1 {
            font-size: 34px;
        }



        .article-banner p {
            font-size: 18px;
        }







    .article-container {
        display: block;
        width: auto;
        max-width: none;
        margin: 50px 20px;
    }



    .article-content {
        padding: 25px;
    }



        .article-content h2 {
            font-size: 24px;
        }



    .feature-grid {
        grid-template-columns: 1fr;
    }



    aside {
        margin-top: 30px;
    }




    footer h2 {
        font-size: 28px;
    }



    .btn {
        width: 100%;
    }
}








@media(max-width:375px) {


    .article-banner h1 {
        font-size: 30px;
    }
}

/* ==============================
友情链接
============================== */


.friend-links {
    margin: 40px auto;
    max-width: 900px;
}



    .friend-links h3 {
        font-size: 18px;
        margin-bottom: 20px;
        color: #00eaff;
    }



.links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}



    .links a {
        padding: 10px 22px;
        border: 1px solid rgba(0,220,255,.3);
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        background: rgba(0,200,255,.08);
        transition: .3s;
    }



        .links a:hover {
            background: #00d9ff;
            color: #001018;
            transform: translateY(-3px);
        }