/* roulang page: index */
:root {
    --ink: #111827;
    --ink-2: #4B5563;
    --ink-3: #9CA3AF;
    --border: #E5E7EB;
    --primary: #0B2E26;
    --accent: #C2955B;
    --bg: #F2F4F7;
    --card: #FFFFFF;
    --radius: 12px;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin:0; font-family: "PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif; background:var(--bg); color:var(--ink); line-height:1.6; }
  .container { max-width:1200px; margin:0 auto; padding:0 1.25rem; }
  img { display:block; max-width:100%; }
  a { text-decoration:none; color:inherit; }
  button { cursor:pointer; }

  .site-header { background:rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom:1px solid rgba(229,231,235,0.8); }
  .nav-link { position:relative; color:#374151; font-size:15px; font-weight:500; padding:10px 2px 8px; border-bottom:2px solid transparent; transition:color .2s; white-space:nowrap; }
  .nav-link:hover { color:var(--primary); border-bottom-color:var(--primary); }
  .nav-link.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }

  .tag-pill { background:#F3F4F6; color:#4B5563; font-size:12px; padding:4px 12px; border-radius:999px; transition:all .2s; border:1px solid transparent; }
  .tag-pill:hover { border-color:var(--accent); color:var(--primary); }

  .btn-primary { background:var(--primary); color:#fff; padding:12px 28px; border-radius:8px; font-weight:600; font-size:15px; transition:all .2s; display:inline-block; border:1px solid var(--primary); }
  .btn-primary:hover { background:var(--accent); border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.12); }
  .btn-ghost { background:transparent; color:var(--primary); padding:12px 28px; border-radius:8px; font-weight:600; font-size:15px; border:1px solid var(--primary); transition:all .2s; display:inline-block; }
  .btn-ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

  .card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 1px 3px rgba(0,0,0,0.05); transition:all .25s ease; }
  .card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,0.08); }

  .section-title { font-size:1.9rem; line-height:1.2; font-weight:800; letter-spacing:-0.02em; display:flex; align-items:center;}
  .section-title::before { content:""; width:5px; height:30px; background:var(--accent); border-radius:4px; margin-right:12px; }

  .hero-watermark { position:absolute; right:-30px; bottom:-60px; font-size:220px; font-weight:900; color:rgba(194,149,91,0.12); pointer-events:none; user-select:none; z-index:0; line-height:1; letter-spacing:-0.06em; }

  .countdown-item { background:var(--primary); border-radius:14px; min-width:82px; padding:14px 10px 10px; text-align:center; color:#fff; box-shadow:0 8px 20px rgba(11,46,38,0.12); }
  .countdown-num { font-size:2.1rem; font-weight:800; line-height:1.1; font-variant-numeric: tabular-nums; letter-spacing:-0.04em; }
  .countdown-unit { color:rgba(255,255,255,0.68); font-size:13px; font-weight:400; }

  .feature-card { position:relative; overflow:hidden; }
  .feature-card img { width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .35s ease; }
  .feature-card:hover img { transform:scale(1.05); }

  .list-card { display:flex; align-items:center; padding:20px 6px; border-bottom:1px solid #EEF0F3; transition:all .2s; }
  .list-card:hover { padding-left:12px; background:#FAFBFD; }
  .list-card:last-child { border-bottom:none; }

  .faq-item { border-bottom:1px solid #EFF1F4; }
  .faq-item:last-child { border-bottom:none; }
  .faq-q { padding:20px 2px; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:16px; cursor:pointer; transition:color .2s; }
  .faq-q:hover { color:var(--primary); }
  .faq-a { display:none; color:#5B6472; font-size:15px; padding:0 2px 20px; }

  .foot { background:var(--primary); color:rgba(255,255,255,.7); }
  .foot a { color:rgba(255,255,255,.6); transition:color .2s; }
  .foot a:hover { color:#fff; text-decoration:underline; }
  .foot-title { color:#fff; font-weight:600; font-size:16px; margin-bottom:14px; }

  .subscribe-row { background:var(--primary); border-radius:18px; padding:34px 36px; color:#fff; position:relative; overflow:hidden; }
  .subscribe-row::after { content:""; position:absolute; right:-30px; top:-50px; width:180px; height:180px; border-radius:50%; background:rgba(194,149,91,0.16); }

  @media (max-width: 768px) {
    .section-title { font-size:1.55rem; }
    .hero-watermark { font-size:140px; right:-10px; bottom:-30px; }
    .subscribe-row { padding:24px 20px; }
    .countdown-item { min-width:70px; }
  }

/* roulang page: category2 */
:root {
            --primary: #0B2E26;
            --accent: #C2955B;
            --bg: #F2F4F7;
            --text: #111827;
            --text-2: #4B5563;
            --text-3: #9CA3AF;
            --card: #FFFFFF;
            --border: #E5E7EB;
            --radius: 8px;
            --shadow: 0 1px 3px rgba(0, 0, 0, .06);
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }
        .container-custom {
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }
        a,
        button,
        input {
            transition: all .25s ease;
        }
        img {
            max-width: 100%;
            display: block;
            object-fit: cover;
        }
        .nav-link {
            position: relative;
            color: rgba(255, 255, 255, .82);
            font-size: .95rem;
            padding: .45rem .9rem;
            border-radius: 6px;
            letter-spacing: .02em;
            white-space: nowrap;
            transition: all .25s;
        }
        .nav-link:hover {
            color: #fff;
            background: rgba(255, 255, 255, .14);
        }
        .nav-link.active {
            color: #fff;
            font-weight: 600;
        }
        .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: .7rem;
            right: .7rem;
            border-bottom: 2px solid var(--accent);
            border-radius: 2px;
        }
        .header {
            background: rgba(11, 46, 38, .96);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            position: sticky;
            top: 0;
            z-index: 50;
        }
        .btn-main {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            background: var(--primary);
            color: #fff;
            font-weight: 600;
            padding: .72rem 1.45rem;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(11, 46, 38, .15);
            border: 1px solid transparent;
            cursor: pointer;
            font-size: .95rem;
            letter-spacing: .01em;
        }
        .btn-main:hover {
            background: var(--accent);
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(194, 149, 91, .32);
        }
        .btn-outline {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            background: transparent;
            color: var(--primary);
            font-weight: 600;
            padding: .7rem 1.3rem;
            border-radius: 8px;
            border: 1.5px solid rgba(11, 46, 38, .28);
            font-size: .95rem;
        }
        .btn-outline:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: rgba(194, 149, 91, .06);
            transform: translateY(-1px);
        }
        .btn-gold {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--accent);
            color: #fff;
            font-weight: 600;
            padding: .72rem 1.45rem;
            border-radius: 8px;
            gap: .4rem;
            cursor: pointer;
            border: 1px solid transparent;
            font-size: .95rem;
        }
        .btn-gold:hover {
            background: #a97f45;
            transform: translateY(-1px);
            box-shadow: 0 8px 16px rgba(194, 149, 91, .28);
        }
        .badge {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            background: rgba(194, 149, 91, .14);
            color: #8b6736;
            font-size: .8rem;
            font-weight: 600;
            padding: .25rem .8rem;
            border-radius: 999px;
            border: 1px solid rgba(194, 149, 91, .2);
        }
        .info-chips {
            display: inline-flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        .section-block {
            padding: 5rem 0;
        }
        .section-title {
            font-size: 2rem;
            font-weight: 700;
            color: #0B2E26;
            position: relative;
            padding-left: 18px;
            letter-spacing: -.02em;
            margin-bottom: .75rem;
            line-height: 1.2;
        }
        .section-title::before {
            content: '';
            position: absolute;
            left: 0;
            top: 10%;
            width: 5px;
            background: linear-gradient(180deg, #0B2E26, #C2955B);
            border-radius: 4px;
        }
        .foot {
            background: #0B2E26;
            color: rgba(255, 255, 255, .8);
        }
        .foot-title {
            color: #fff;
            font-weight: 600;
            font-size: .85rem;
            text-transform: uppercase;
            letter-spacing: .1em;
            margin-bottom: 1.2rem;
            padding-bottom: .4rem;
            border-bottom: 2px solid rgba(255, 255, 255, .08);
            display: inline-block;
        }
        .foot a {
            color: rgba(255, 255, 255, .48);
            text-decoration: none;
            font-size: .9rem;
        }
        .foot a:hover {
            color: #C2955B;
            padding-left: 4px;
        }
        .search-box {
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: 25px;
            padding: .4rem .35rem .4rem 1rem;
            width: 220px;
            color: #fff;
            font-size: .9rem;
        }
        .search-box::placeholder {
            color: rgba(255, 255, 255, .4);
        }
        .mobile-nav {
            position: fixed;
            top: 0;
            right: -290px;
            width: 280px;
            height: 100vh;
            background: #0B2E26;
            z-index: 100;
            transition: right .3s cubic-bezier(.4, 0, .2, 1);
            padding: 60px 28px 20px;
        }
        .mobile-nav.show {
            right: 0;
        }
        .overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .25);
            z-index: 99;
            opacity: 0;
            pointer-events: none;
            transition: all .3s;
        }
        .overlay.show {
            opacity: 1;
            pointer-events: auto;
        }
        .card {
            background: #fff;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
            overflow: hidden;
            transition: transform .3s, box-shadow .3s;
        }
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
        }
        .badge-live {
            position: absolute;
            top: 14px;
            left: 14px;
            background: rgba(11, 46, 38, .85);
            color: #fff;
            padding: .25rem .7rem;
            border-radius: 999px;
            font-size: .75rem;
            backdrop-filter: blur(5px);
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .faq-item {
            border-radius: 12px;
            padding: 1.2rem 1.4rem;
            background: #fff;
            border: 1px solid #e5e7eb;
            transition: .3s;
        }
        .faq-item:hover {
            border-color: rgba(194, 149, 91, .5);
            box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
        }
        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            color: #111827;
            font-size: 1.02rem;
            cursor: pointer;
        }
        .faq-question .icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(194, 149, 91, .15);
            color: #C2955B;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            flex-shrink: 0;
            transition: .3s;
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease;
            color: #4b5563;
            font-size: .93rem;
            padding: 0 1.2rem 0 0;
        }
        .faq-item.open .faq-answer {
            max-height: 180px;
            padding-top: .6rem;
        }
        .faq-item.open .faq-question .icon {
            transform: rotate(45deg);
        }
        .tag {
            display: inline-block;
            background: #eef3f1;
            color: rgba(11, 46, 38, .68);
            font-size: .8rem;
            padding: .2rem .75rem;
            border-radius: 999px;
            margin-right: .35rem;
            margin-bottom: .3rem;
            font-weight: 500;
            border: 1px solid transparent;
        }
        .tag:hover {
            border-color: rgba(194, 149, 91, .5);
            color: #C2955B;
            background: #fff;
        }
        .reply-select {
            border: 1px solid #d1d5db;
            padding: .68rem 1.2rem;
            border-radius: 8px;
            background: #fff;
            color: #111;
            font-size: .92rem;
        }
        @media (max-width: 1024px) {
            .section-block {
                padding: 2rem 0;
            }
            .nav-desktop {
                display: none;
            }
            .search-box {
                width: auto;
            }
        }
        @media (max-width: 640px) {
            .section-block {
                padding-top: 2rem;
            }
            .section-title {
                font-size: 1.5rem;
            }
        }

/* roulang page: category1 */
:root{
  --primary:#0B2E26;
  --accent:#C2955B;
  --canvas:#F2F4F7;
  --ink:#111827;
  --ink-2:#4B5563;
  --meta:#9CA3AF;
  --line:#E5E7EB;
  --radius:12px;
  --shadow-card:0 1px 3px rgba(0,0,0,0.06);
  --shadow-hover:0 12px 30px rgba(0,0,0,0.12);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'PingFang SC','Microsoft YaHei','Helvetica Neue',sans-serif;background:var(--canvas);color:var(--ink);line-height:1.75;letter-spacing:0.01em;}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
button,input,select,textarea{font-family:inherit;outline:none;}
.container{max-width:1200px;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem;}
.icon-gold{color:var(--accent);}
.menu-bg{background:#0d3a30;}
.bg-canvas{background:var(--canvas);}
.section-pad{padding:4.5rem 0;}
@media(max-width:768px){.section-pad{padding:3rem 0;}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;color:var(--primary);font-weight:600;}
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:2rem;}
.section-head::before{content:'';width:5px;height:28px;background:var(--accent);border-radius:3px;flex:none;}
.section-title{font-size:1.8rem;font-weight:800;letter-spacing:-0.02em;color:var(--primary);}
@media(max-width:640px){.section-title{font-size:1.45rem;}}
.chip{padding:4px 12px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:12px;color:var(--ink-2);transition:0.2s;cursor:default;}
.card-white{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);transition:0.25s ease;}
.card-white.hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:#fff;border-radius:10px;padding:11px 24px;font-weight:600;font-size:14px;transition:0.2s;border:2px solid transparent;}
.btn-primary:hover{background:var(--accent);transform:translateY(-1px);border-color:var(--accent);}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--primary);padding:11px 24px;border:1.5px solid #d1d5db;border-radius:10px;font-weight:600;font-size:14px;transition:0.2s;}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.tag{display:inline-block;background:rgba(194,149,91,0.12);color:#9a6a33;padding:2px 10px;border-radius:6px;font-size:12px;}
.badge-sm{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:2px 8px;font-size:12px;color:var(--ink-2);}
.nav-link{color:#cbd5d1;font-weight:500;font-size:15px;padding:4px 2px;transition:0.2s;position:relative;}
.nav-link:hover{color:#fff;}
.nav-link.active{color:#fff;}
.nav-link.active::after{content:'';height:3px;width:100%;border-radius:5px;background:var(--accent);display:block;margin-top:2px;}
.foot-title{color:#fff;font-weight:700;margin-bottom:1rem;font-size:1rem;}
.foot a,.footer-list-item{transition:0.2s;}
.foot{background:#08241e;}
.foot p,.foot a{color:#e2e4df;}
.hero-bg{background-size:cover;background-position:center;position:relative;}
.hero-bg::before{content:'';position:absolute;inset:0;background:linear-gradient(98deg,rgba(4,29,23,0.93) 10%,rgba(11,46,38,0.86) 55%,rgba(8,36,30,0.75));}
.video-meta-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.floating-badge{position:absolute;top:22px;right:22px;background:rgba(255,255,255,0.16);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.24);color:#fff;padding:9px 14px;border-radius:999px;font-size:13px;z-index:3;display:flex;align-items:center;gap:8px;}
.cta-band{background:#0B2E26;position:relative;overflow:hidden;}
.cta-band::after{content:'';position:absolute;right:-70px;top:-100px;width:320px;height:320px;border-radius:50%;background:rgba(194,149,91,0.18);}
@media(min-width:768px){
.hero-right-card{max-width:420px;}
}
.hero-grid-main{display:grid;grid-template-columns:1.1fr 0.9fr;gap:50px;}
@media(max-width:1024px){.hero-grid-main{grid-template-columns:1fr;gap:32px;}}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media(max-width:768px){.feature-grid{grid-template-columns:1fr;}}
.main-card-row{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
@media(max-width:768px){.main-card-row{grid-template-columns:1fr;}}
.flow-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:1024px){.flow-steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.flow-steps{grid-template-columns:1fr;}}

/* roulang page: article */
:root {
  --bg: #F2F4F7; --primary: #0B2E26; --accent: #C2955B; --text: #111827;
  --muted: #4B5563; --subtle: #9CA3AF; --card: #FFFFFF; --border: #E5E7EB;
  --radius: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 12px 30px rgba(0,0,0,0.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; transition: all .3s; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(194,149,91,0.6); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.header-main { background: var(--card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-sm); }
.brand { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); display:flex; align-items:center;}
.brand-icon { width: 40px; height: 40px; background: var(--accent); border-radius: 10px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-right: .65rem; flex-shrink:0; }
.brand small { display:block; font-size:.7rem; font-weight:400; color:#4B5563; letter-spacing:0; margin-top:2px;}
.nav-link { font-weight: 500; font-size: .93rem; padding: .5rem 1.15rem; border-bottom: 2px solid transparent; color: #4B5563; transition: color .2s, border-color .2s; white-space: nowrap;}
.nav-link:hover { color: var(--primary); border-color: var(--accent); }
.nav-link.active { color: var(--primary); border-color: #0B2E26; font-weight: 600; }
.search-wrap { position: relative; max-width: 240px; width: 100%; }
.search-wrap input { width: 100%; height: 42px; background: #F9FAFB; border: 1px solid var(--border); padding: 0 .75rem 0 2.5rem; border-radius: 999px; font-size: .9rem; transition: border-color .2s, box-shadow .2s; }
.search-wrap input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194,149,91,.15); }
.search-wrap i { position:absolute; left:1rem; top:50%; transform:translateY(-50%); color: #9CA3AF; font-size:.9rem; }
.hamburger { display: none; width: 44px; height: 44px; border-radius: 8px; align-items:center; justify-content:center; border: 1px solid var(--border); background:#fff; cursor:pointer; }
.mobile-menu { display: none; border-top: 1px solid var(--border); background:#fff; position:absolute; top:100%; left:0; right:0; padding:1rem 1.5rem; z-index:60; }
.mobile-menu.open { display: block; animation:fallDown .2s ease; }
@keyframes fallDown { from { opacity:0; transform:translateY(-8px);} to { opacity:1; transform:translateY(0);} }
.mobile-menu a { display:block; padding:.75rem .25rem; border-bottom:1px dashed #eee; font-weight:500;}
.mobile-menu a:last-child { border-bottom:none; }
.breadcrumb { display:flex; align-items:center; gap:.45rem; font-size:.85rem; color:#9CA3AF; padding-top:1.75rem; padding-bottom:.75rem; flex-wrap:wrap; }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb i { font-size:.65rem; }
@media (max-width: 1024px) {
  .hamburger { display:flex; }
  .desktop-nav { display:none !important; }
  .desktop-tools { display:none !important; }
}
.content-area { padding-top:1.5rem; padding-bottom:3rem; }
.article-header { margin-bottom: 2rem; }
.article-header h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; color: #6B7280; margin-top: .75rem; font-size: .9rem; align-items: center; }
.main-grid { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }
.article-box { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); padding: 2.2rem; box-shadow: var(--shadow-sm); }
.article-body { color: #374151; font-size: 1.05rem; }
.article-body h2 { font-size: 1.5rem; font-weight:700; margin: 2rem 0 .5rem; color:#111827; }
.article-body p { margin-bottom: 1.2rem; }
.article-body blockquote { margin:1.5rem 0; padding:1.2rem 1.5rem; background:#F9FAFB; border-left:4px solid var(--accent); border-radius:0 8px 8px 0; color:#4B5563; }
.article-body hr { border:none; border-top:1px solid var(--border); margin:2rem 0; }
.article-feature { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; margin:1.5rem 0; }
.article-feature div { background:#F9FAFB; border-radius:8px; padding:1.2rem 1.4rem; }
.article-feature h4 { display:flex; gap:.5rem; align-items:center; color:var(--primary); margin-bottom:.25rem; font-size:1px; }
.article-feature h4 i { color: var(--accent); font-size:1.1rem; }
.side-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; margin-bottom:1.5rem; }
.side-title { font-size:1.2rem; font-weight:700; padding-left:.85rem; position:relative; margin-bottom:1.1rem; }
.side-title::before { content:''; position:absolute; left:0; top:.25rem; width:4px; height:1.2rem; background:var(--accent); border-radius:999px; }
.side-news li { display:flex; gap:1rem; padding: .85rem 0; border-bottom:1px dashed #E9EBEE; }
.side-news li:last-child{border-bottom:none;}
.news-thumb { width:92px; height:64px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.foot { background:#0F352C; }
.foot-title { color:#fff; font-weight:700; margin-bottom:.75rem; font-size:1rem; }
.foot a { color:#C6D0CC; }
.foot a:hover { color: #C2955B; }
@media (max-width: 1024px){
  .main-grid { grid-template-columns:1fr; }
  .article-box { padding: 1.6rem; }
  .container { padding-left:1.2rem; padding-right:1.2rem; }
}
@media (max-width: 640px){
  .article-header h1 { font-size: 1.45rem; }
  .article-box { padding:1.1rem; }
  .article-feature { grid-template-columns:1fr; }
}