/* roulang page: index */
:root{
  --ht-bg:#F7FAFD;
  --ht-white:#FFFFFF;
  --ht-blue:#1E6FD9;
  --ht-blue-dark:#1556B0;
  --ht-blue-light:#EEF5FE;
  --ht-blue-line:#D5E5F7;
  --ht-title:#0E2A43;
  --ht-text:#33506B;
  --ht-muted:#7A8FA3;
  --ht-coral:#FB6B47;
  --ht-coral-dark:#E5532F;
  --ht-green:#1F9D6B;
  --ht-warning:#EA8A00;
  --ht-radius:20px;
  --ht-radius-sm:14px;
  --ht-shadow:0 8px 22px rgba(20,62,105,.06);
  --ht-shadow-lg:0 16px 34px rgba(20,62,105,.12);
  --ht-font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}
*,
*::before,
*::after{
  box-sizing:border-box;
}
body{
  margin:0;
  background:var(--ht-bg);
  color:var(--ht-text);
  font-family:var(--ht-font);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{
  max-width:100%;
  display:block;
}
a{
  color:var(--ht-blue);
  text-decoration:none;
  transition:color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,opacity .2s ease;
}
a:hover{
  color:var(--ht-blue-dark);
}
button,input,textarea,select{
  font-family:inherit;
}
.h1,.h2,.h3,.h4,.h5,h1,h2,h3,h4,h5{
  color:var(--ht-title);
  line-height:1.35;
  font-weight:700;
}
.container-xxl{
  max-width:1280px;
}
.section{
  padding-top:clamp(64px,8vw,104px);
  padding-bottom:clamp(64px,8vw,104px);
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:2rem;
}
.section-head .section-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background:var(--ht-blue-light);
  color:var(--ht-blue-dark);
  border:1px solid rgba(30,111,217,.10);
  padding:.3rem .8rem;
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  margin-bottom:.7rem;
}
.section-head h2{
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  letter-spacing:-.02em;
  margin:0 0 .2rem;
}
.section-desc{
  color:var(--ht-muted);
  font-size:.95rem;
  max-width:620px;
  margin:0;
}
.arrow-link{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:600;
  color:var(--ht-title);
  padding:.45rem .8rem;
  border-radius:999px;
  white-space:nowrap;
}
.arrow-link i{
  transition:transform .2s ease;
}
.arrow-link:hover{
  color:var(--ht-blue-dark);
  background:var(--ht-blue-light);
}
.arrow-link:hover i{
  transform:translateX(4px);
}
.empty-v-space{
  height:clamp(56px,6vw,90px);
}
/* ---------- buttons ---------- */
.btn{
  border-radius:999px;
  padding:.68rem 1.35rem;
  font-weight:600;
  border-width:1.5px;
  transition:all .2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
}
.btn-lg{
  padding:.9rem 1.75rem;
}
.btn-primary{
  background:var(--ht-blue);
  border-color:var(--ht-blue);
  color:#fff;
}
.btn-primary:hover,.btn-primary:focus{
  background:var(--ht-blue-dark)!important;
  border-color:var(--ht-blue-dark)!important;
  color:#fff;
  box-shadow:0 10px 20px rgba(21,86,176,.22);
  transform:translateY(-1px);
}
.btn-accent{
  background:var(--ht-coral);
  border-color:var(--ht-coral);
  color:#fff;
  box-shadow:0 10px 22px rgba(251,107,71,.28);
}
.btn-accent:hover,.btn-accent:focus{
  background:var(--ht-coral-dark)!important;
  border-color:var(--ht-coral-dark)!important;
  color:#fff;
  box-shadow:0 12px 26px rgba(251,107,71,.34);
  transform:translateY(-2px);
}
.btn-outline-primary{
  border-color:var(--ht-blue);
  color:var(--ht-blue);
  background:rgba(255,255,255,.82);
}
.btn-outline-primary:hover{
  background:var(--ht-blue-light)!important;
  color:var(--ht-blue-dark)!important;
  border-color:var(--ht-blue)!important;
}
.btn-outline-light{
  border-color:rgba(255,255,255,.7);
  color:#fff;
}
.btn-outline-light:hover{
  background:rgba(255,255,255,.14)!important;
  border-color:#fff!important;
  color:#fff!important;
}
.btn:focus-visible,.form-control:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(30,111,217,.22);
}
/* ---------- header & nav ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1080;
  background:rgba(255,255,255,.98);
  box-shadow:0 1px 18px rgba(14,42,67,.08);
}
.navbar{
  padding:.72rem 0;
}
.brand-logo{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  line-height:1;
}
.brand-cn{
  font-size:1.55rem;
  font-weight:800;
  color:var(--ht-title);
  letter-spacing:-.02em;
}
.brand-app{
  font-size:.92rem;
  font-weight:800;
  background:var(--ht-blue);
  color:#fff;
  padding:.24rem .5rem;
  border-radius:.6rem;
  letter-spacing:.02em;
  transform:translateY(1px);
}
.brand-flag{
  background:var(--ht-blue-light);
  border:1px solid var(--ht-blue-line);
  color:var(--ht-blue-dark);
  font-size:.72rem;
  font-weight:600;
  padding:.22rem .55rem;
  border-radius:999px;
  white-space:nowrap;
}
.navbar-nav{
  gap:.15rem;
  margin:0 auto;
}
.navbar .nav-link{
  color:var(--ht-title);
  font-weight:600;
  padding:.55rem .9rem!important;
  border-radius:999px;
  white-space:nowrap;
}
.navbar .nav-link:hover{
  color:var(--ht-blue);
  background:var(--ht-blue-light);
}
.navbar .nav-link.active{
  color:var(--ht-blue-dark);
  background:var(--ht-blue-light);
}
.live-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--ht-blue-light);
  color:var(--ht-blue-dark);
  padding:.42rem .85rem;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  white-space:nowrap;
}
.pulse-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ht-green);
  position:relative;
  display:inline-block;
}
.pulse-dot::after{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid rgba(31,157,107,.45);
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(.45);opacity:.9;}
  70%{transform:scale(1.4);opacity:0;}
  100%{opacity:0;}
}
.navbar-toggler{
  border:none;
  color:var(--ht-title);
  padding:.4rem;
}
.navbar-toggler:focus{
  box-shadow:0 0 0 3px rgba(30,111,217,.2);
}
/* ---------- hero ---------- */
.hero-section{
  position:relative;
  padding:clamp(64px,7vw,104px) 0 clamp(46px,5vw,64px);
  overflow:hidden;
  background:
    linear-gradient(115deg,rgba(229,239,252,.96) 0%,rgba(245,250,255,.92) 44%,rgba(247,250,253,.86) 100%),
    url('/assets/images/backpic/back-1.png') no-repeat center center/cover;
}
.hero-section::before{
  content:'';
  position:absolute;
  right:-120px;
  top:-100px;
  width:380px;
  height:380px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(251,107,71,.16) 0,rgba(251,107,71,0) 64%);
  pointer-events:none;
}
.hero-section::after{
  content:'';
  position:absolute;
  left:-160px;
  bottom:-180px;
  width:460px;
  height:460px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(30,111,217,.14) 0,rgba(30,111,217,0) 66%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  z-index:3;
}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:#fff;
  border:1px solid var(--ht-blue-line);
  color:var(--ht-blue-dark);
  font-weight:600;
  font-size:.85rem;
  padding:.4rem .95rem;
  border-radius:999px;
  box-shadow:var(--ht-shadow);
  margin-bottom:1.4rem;
}
.hero-eyebrow i{
  color:var(--ht-coral);
}
.hero-title{
  font-size:clamp(2.1rem,4.2vw,3.4rem);
  line-height:1.24;
  font-weight:800;
  letter-spacing:-.03em;
  margin:0 0 1.1rem;
  max-width:720px;
}
.hero-title .text-coral{
  color:var(--ht-coral);
}
.hero-title .text-blue{
  color:var(--ht-blue);
}
.hero-lead{
  font-size:1.06rem;
  color:var(--ht-text);
  line-height:1.85;
  max-width:640px;
  margin-bottom:1.7rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-bottom:1.8rem;
}
.hero-trust{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.6rem;
  list-style:none;
  padding:0;
  margin:0;
  color:var(--ht-muted);
  font-size:.9rem;
}
.hero-trust li{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.hero-trust i{
  color:var(--ht-green);
}
.hero-visual{
  position:relative;
  min-height:460px;
  max-width:520px;
  margin-left:auto;
}
.phone-frame{
  position:absolute;
  top:0;
  right:26px;
  width:266px;
  background:#fff;
  border-radius:46px;
  padding:13px;
  box-shadow:0 28px 60px rgba(14,42,67,.22);
}
.phone-screen{
  border-radius:34px;
  overflow:hidden;
  aspect-ratio:9/18;
  position:relative;
  background:#0F2034;
}
.phone-screen img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.92;
}
.phone-screen::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:52%;
  background:linear-gradient(180deg,rgba(8,20,34,0) 0%,rgba(8,20,34,.88) 100%);
}
.phone-live{
  position:absolute;
  top:14px;
  left:14px;
  z-index:4;
  background:rgba(251,107,71,.94);
  color:#fff;
  border-radius:999px;
  font-size:.72rem;
  font-weight:600;
  padding:.28rem .7rem;
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  box-shadow:0 6px 14px rgba(251,107,71,.35);
}
.phone-live i{
  font-size:.58rem;
}
.phone-info{
  position:absolute;
  left:16px;
  right:16px;
  bottom:18px;
  z-index:4;
  color:#fff;
}
.phone-info h3{
  color:#fff;
  font-size:.95rem;
  margin:0 0 .2rem;
}
.phone-info p{
  font-size:.78rem;
  color:rgba(255,255,255,.72);
  margin:0;
}
.float-media{
  position:absolute;
  left:0;
  bottom:34px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 40px rgba(14,42,67,.16);
  padding:.7rem .85rem;
  display:flex;
  align-items:center;
  gap:.8rem;
  width:246px;
  z-index:5;
}
.float-media-thumb{
  width:66px;
  height:66px;
  border-radius:14px;
  overflow:hidden;
  flex:none;
}
.float-media-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.float-media-title{
  font-weight:700;
  color:var(--ht-title);
  font-size:.88rem;
  line-height:1.4;
  margin-bottom:.25rem;
}
.float-media-meta{
  color:var(--ht-muted);
  font-size:.75rem;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.float-media-meta i{
  color:var(--ht-coral);
}
.hero-stat{
  position:absolute;
  right:-8px;
  top:124px;
  z-index:5;
  background:#fff;
  border:1px solid var(--ht-blue-line);
  border-radius:16px;
  padding:.6rem .75rem;
  box-shadow:var(--ht-shadow-lg);
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:92px;
}
.hero-stat strong{
  font-size:1.2rem;
  color:var(--ht-blue-dark);
  line-height:1.2;
}
.hero-stat span{
  color:var(--ht-muted);
  font-size:.72rem;
}
/* ---------- shelf ---------- */
.shelf-zone{
  background:#fff;
  border-top:1px solid rgba(213,229,247,.6);
}
.shelf-wrap{
  display:flex;
  gap:20px;
  overflow-x:auto;
  padding:.35rem .4rem 1.25rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  position:relative;
}
.shelf-wrap::-webkit-scrollbar{
  display:none;
}
.shelf-card{
  flex:0 0 222px;
  scroll-snap-align:start;
  background:transparent;
  transition:transform .2s ease;
}
.shelf-card:hover{
  transform:translateY(-4px);
}
.poster{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:3/4;
  background:var(--ht-blue-light);
  box-shadow:var(--ht-shadow);
  margin-bottom:.8rem;
}
.poster img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.shelf-card:hover .poster img{
  transform:scale(1.05);
}
.poster::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 62%,rgba(10,25,45,.72) 100%);
  opacity:.8;
  transition:opacity .3s ease;
  pointer-events:none;
}
.poster-tag{
  position:absolute;
  top:12px;
  left:12px;
  z-index:3;
  background:rgba(14,42,67,.72);
  color:#fff;
  font-size:.72rem;
  font-weight:600;
  padding:.25rem .65rem;
  border-radius:999px;
  backdrop-filter:blur(6px);
}
.poster-live{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  background:var(--ht-coral);
  color:#fff;
  font-size:.72rem;
  padding:.25rem .55rem;
  border-radius:999px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
}
.poster-play{
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ht-blue);
  opacity:0;
  transition:opacity .25s ease,transform .25s ease;
  z-index:4;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.shelf-card:hover .poster-play{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.04);
}
.poster-caption{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:3;
  color:#fff;
}
.poster-caption h3{
  color:#fff;
  font-size:.95rem;
  font-weight:700;
  line-height:1.45;
  margin:0 0 .15rem;
}
.poster-caption span{
  font-size:.74rem;
  color:rgba(255,255,255,.72);
}
.shelf-arrows{
  display:flex;
  gap:.55rem;
}
.arrow-btn{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--ht-blue-line);
  background:var(--ht-white);
  color:var(--ht-title);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all .2s ease;
}
.arrow-btn:hover{
  background:var(--ht-blue-light);
  color:var(--ht-blue);
  border-color:var(--ht-blue);
}
.shelf-card-title{
  font-weight:700;
  color:var(--ht-title);
  font-size:.92rem;
  line-height:1.5;
  padding:0 .1rem;
}
.shelf-card-note{
  font-size:.78rem;
  color:var(--ht-muted);
  margin-top:.2rem;
  padding:0 .1rem;
}
/* ---------- hot replay ---------- */
.hot-zone{
  background:var(--ht-bg);
}
.editor-card{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  min-height:420px;
  height:100%;
  display:flex;
  align-items:flex-end;
  color:#fff;
  box-shadow:var(--ht-shadow);
}
.editor-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(14,42,67,0) 38%,rgba(14,42,67,.8) 100%);
  z-index:1;
}
.editor-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}
.editor-content{
  position:relative;
  z-index:2;
  padding:2rem 1.7rem;
  color:#fff;
  width:100%;
}
.editor-content .coral-text{
  color:#ffc2b2;
  font-size:.8rem;
  font-weight:600;
}
.editor-content h3{
  color:#fff;
  font-size:clamp(1.16rem,2vw,1.68rem);
  margin:.3rem 0 .35rem;
}
.editor-content p{
  color:rgba(255,255,255,.78);
  font-size:.92rem;
  max-width:540px;
  margin-bottom:1.1rem;
}
.editor-content .btn{
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:var(--ht-title);
  border:none;
  padding:.55rem 1rem;
  font-size:.88rem;
  font-weight:700;
}
.editor-content .btn:hover{
  background:#fff;
  color:var(--ht-blue-dark);
  transform:translateY(-2px);
}
.editor-content .btn i{
  color:var(--ht-coral);
}
.hot-panel{
  background:#fff;
  border-radius:24px;
  box-shadow:var(--ht-shadow);
  padding:1.5rem 1.4rem;
  height:100%;
  min-height:420px;
  display:flex;
  flex-direction:column;
}
.hot-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1rem;
}
.hot-panel-head h3{
  margin:0;
  font-size:1.12rem;
}
.hot-panel-head .hot-fire{
  color:var(--ht-coral);
  background:rgba(251,107,71,.12);
  font-size:.78rem;
  padding:.2rem .65rem;
  border-radius:999px;
  font-weight:600;
}
.rank-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  flex:1;
}
.rank-row{
  display:flex;
  align-items:center;
  gap:.85rem;
  background:transparent;
  padding:.7rem .7rem;
  border-radius:14px;
  cursor:pointer;
  transition:background .2s ease;
}
.rank-row:hover{
  background:var(--ht-blue-light);
}
.rank-no{
  flex:none;
  width:35px;
  color:var(--ht-blue);
  font-size:1.05rem;
  font-weight:800;
  text-align:center;
  opacity:.85;
}
.rank-row:nth-child(1) .rank-no{
  color:var(--ht-coral);
}
.rank-thumb{
  flex:none;
  width:66px;
  height:52px;
  border-radius:10px;
  overflow:hidden;
}
.rank-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.rank-info{
  min-width:0;
  flex:1;
}
.rank-info h4{
  color:var(--ht-title);
  font-size:.88rem;
  font-weight:600;
  margin:0 0 .12rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rank-meta{
  color:var(--ht-muted);
  font-size:.74rem;
  display:flex;
  gap:.55rem;
}
.rank-meta .tag{
  color:var(--ht-blue);
}
/* ---------- tabs ---------- */
.topic-zone{
  background:#fff;
  border-top:1px solid rgba(213,229,247,.6);
  border-bottom:1px solid rgba(213,229,247,.6);
}
.topic-tabs{
  border-bottom:none;
  margin-bottom:1.4rem;
}
.topic-tabs .nav-link{
  background:#fff;
  border:1px solid var(--ht-blue-line);
  color:var(--ht-text);
  border-radius:999px;
  padding:.5rem 1.1rem;
  font-weight:600;
  margin-right:.55rem;
}
.topic-tabs .nav-link:hover{
  border-color:var(--ht-blue);
  color:var(--ht-blue-dark);
  background:var(--ht-blue-light);
}
.topic-tabs .nav-link.active{
  background:var(--ht-blue);
  border-color:var(--ht-blue);
  color:#fff;
}
.topic-card{
  background:#F7FAFD;
  border-radius:20px;
  overflow:hidden;
  height:100%;
  transition:transform .25s ease,box-shadow .25s ease;
}
.topic-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--ht-shadow-lg);
}
.topic-card-img{
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--ht-blue-light);
}
.topic-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.topic-card:hover .topic-card-img img{
  transform:scale(1.04);
}
.topic-card-body{
  padding:1rem 1.15rem 1.2rem;
}
.topic-label{
  font-size:.75rem;
  color:var(--ht-blue);
  background:var(--ht-blue-light);
  border-radius:999px;
  padding:.18rem .65rem;
  font-weight:600;
  display:inline-block;
  margin-bottom:.5rem;
}
.topic-label.warm{
  color:var(--ht-coral-dark);
  background:rgba(251,107,71,.12);
}
.topic-card-body h3{
  font-size:1rem;
  font-weight:700;
  margin-bottom:.3rem;
  line-height:1.5;
}
.topic-card-body p{
  color:var(--ht-muted);
  font-size:.85rem;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.topic-more-link{
  margin-top:.6rem;
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-weight:600;
  font-size:.82rem;
  color:var(--ht-blue);
}
.topic-more-link:hover{
  color:var(--ht-coral);
}
/* ---------- CTA banner 1 ---------- */
.mini-cta{
  background:var(--ht-bg);
  padding:clamp(50px,6vw,78px) 0;
}
.cta-strip{
  background:var(--ht-title);
  border-radius:28px;
  padding:2.2rem 2.4rem;
  position:relative;
  overflow:hidden;
  background-image:
    radial-gradient(circle at 85% 20%,rgba(30,111,217,.55) 0,transparent 46%),
    linear-gradient(135deg,#10253D,#1E6FD9 160%);
}
.cta-strip::after{
  content:'';
  position:absolute;
  right:-80px;
  bottom:-130px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:rgba(251,107,71,.25);
}
.cta-strip .row{
  position:relative;
  z-index:2;
}
.cta-strip h2,.cta-strip p{
  color:#fff;
}
.cta-strip h2{
  font-size:clamp(1.45rem,2.3vw,2rem);
}
.cta-strip p{
  color:rgba(255,255,255,.76);
  max-width:590px;
  margin-bottom:0;
}
.cta-strip .badge{
  background:rgba(255,255,255,.18);
  color:#fff;
  border-radius:999px;
  padding:.4rem .8rem;
  font-size:.8rem;
  margin-right:.5rem;
  border:1px solid rgba(255,255,255,.18);
}
/* ---------- news / CMS ---------- */
.news-zone{
  background:var(--ht-bg);
  padding-bottom:clamp(64px,7vw,100px);
}
.news-card{
  background:#fff;
  border-radius:20px;
  box-shadow:var(--ht-shadow);
  height:100%;
  padding:1.4rem;
  transition:box-shadow .25s ease,transform .25s ease;
}
.news-card:hover{
  box-shadow:var(--ht-shadow-lg);
  transform:translateY(-4px);
}
.news-card h3{
  font-size:1rem;
  font-weight:700;
  line-height:1.55;
}
.news-card p{
  font-size:.88rem;
  color:var(--ht-muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:.7rem;
}
.news-lead{
  background:var(--ht-white);
  border-radius:24px;
  box-shadow:var(--ht-shadow);
  height:100%;
  padding:1.6rem;
  transition:box-shadow .25s ease,transform .25s ease;
}
.news-lead:hover{
  box-shadow:var(--ht-shadow-lg);
  transform:translateY(-4px);
}
.news-lead h3{
  font-size:1.3rem;
  line-height:1.5;
}
.news-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem .8rem;
  color:var(--ht-muted);
  font-size:.79rem;
  margin:.5rem 0 .75rem;
}
.news-meta .badge-cat{
  background:var(--ht-blue-light);
  border:1px solid var(--ht-blue-line);
  color:var(--ht-blue-dark);
  border-radius:999px;
  padding:.2rem .7rem;
  font-weight:600;
}
.news-meta .badge-news{
  background:rgba(251,107,71,.12);
  color:var(--ht-coral-dark);
  border-radius:999px;
  padding:.2rem .7rem;
  font-weight:600;
}
.read-more{
  font-weight:700;
  color:var(--ht-blue);
  font-size:.86rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.read-more i{
  transition:transform .2s ease;
}
.read-more:hover i{
  transform:translateX(4px);
}
.empty-state{
  background:#fff;
  color:var(--ht-muted);
  border-radius:20px;
  padding:3rem 1.5rem;
  text-align:center;
  box-shadow:var(--ht-shadow);
}
.empty-state i{
  font-size:2.4rem;
  color:var(--ht-blue-line);
  display:block;
  margin-bottom:.6rem;
}
/* ---------- faq ---------- */
.faq-zone{
  background:#fff;
}
.accordion{
  --bs-accordion-border-width:0;
  --bs-accordion-border-radius:18px;
  --bs-accordion-inner-border-radius:18px;
  --bs-accordion-bg:#fff;
  --bs-accordion-btn-padding-y:1.15rem;
  --bs-accordion-btn-padding-x:1.3rem;
}
.accordion-item{
  margin-bottom:.9rem;
  border:1px solid var(--ht-blue-line)!important;
  border-radius:18px!important;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(20,62,105,.03);
}
.accordion-button{
  color:var(--ht-title);
  font-weight:600;
  font-size:1rem;
  background:#fff!important;
}
.accordion-button:not(.collapsed){
  color:var(--ht-blue-dark);
  background:var(--ht-blue-light)!important;
  box-shadow:none;
}
.accordion-button:focus{
  box-shadow:0 0 0 3px rgba(30,111,217,.16)!important;
}
.accordion-button::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231E6FD9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231E6FD9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-body{
  color:var(--ht-text);
  font-size:.92rem;
  padding:0 1.3rem 1.2rem;
}
/* ---------- download cta ---------- */
.download-zone{
  background:
    linear-gradient(135deg,rgba(233,243,255,.94) 0,rgba(247,250,253,.96) 62%),
    url('/assets/images/backpic/back-3.webp') no-repeat center/cover;
  padding:clamp(64px,7vw,96px) 0;
  border-top:1px solid rgba(213,229,247,.7);
}
.download-panel{
  background:#fff;
  border-radius:32px;
  box-shadow:0 24px 60px rgba(14,42,67,.12);
  padding:clamp(1.6rem,4vw,3rem);
  position:relative;
  overflow:hidden;
}
.download-panel::before{
  content:'';
  position:absolute;
  top:-110px;
  right:-110px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(251,107,71,.15) 0,rgba(251,107,71,0) 68%);
}
.download-panel .row{
  position:relative;
  z-index:2;
  align-items:center;
}
.download-panel h2{
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  letter-spacing:-.02em;
}
.download-panel .sub{
  color:var(--ht-text);
  max-width:560px;
  margin:.5rem 0 1.5rem;
}
.download-btns{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-bottom:1.2rem;
}
.official-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.official-badges .badge{
  background:var(--ht-blue-light);
  color:var(--ht-blue-dark);
  border:1px solid var(--ht-blue-line);
  border-radius:999px;
  font-size:.82rem;
  font-weight:600;
  padding:.45rem .85rem;
}
.official-badges .badge i{
  color:var(--ht-green);
}
.qr-block{
  background:#F7FAFD;
  border-radius:22px;
  padding:1.2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border:1px dashed var(--ht-blue-line);
}
.qr-block .qr-img{
  width:132px;
  height:132px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--ht-blue-line);
  box-shadow:var(--ht-shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ht-blue);
  overflow:hidden;
}
.qr-block .qr-img i{
  font-size:3rem;
  opacity:.75;
}
.qr-block h4{
  font-size:.9rem;
  margin:.75rem 0 .1rem;
  font-weight:700;
}
.qr-block p{
  font-size:.75rem;
  color:var(--ht-muted);
  margin:0;
}
/* ---------- footer ---------- */
.site-footer{
  background:#EAF2FB;
  padding-top:3.4rem;
  border-top:1px solid rgba(213,229,247,.9);
}
.footer-brand-block{
  max-width:390px;
}
.footer-brand-block .footer-logo{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
}
.footer-brand-block p{
  color:var(--ht-text);
  font-size:.9rem;
}
.footer-title{
  font-size:.86rem;
  color:var(--ht-muted);
  text-transform:none;
  font-weight:700;
  letter-spacing:.06em;
  margin-bottom:1rem;
}
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li{
  margin-bottom:.5rem;
}
.footer-links a{
  color:var(--ht-text);
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.footer-links a:hover{
  color:var(--ht-blue);
}
.footer-links a i{
  color:var(--ht-blue);
  font-size:.68rem;
}
.footer-bottom{
  border-top:1px solid rgba(213,229,247,.9);
  padding:1.3rem 0;
  margin-top:2.6rem;
  color:var(--ht-muted);
  font-size:.82rem;
}
.footer-bottom .fw-semibold{
  color:var(--ht-blue-dark);
}
/* ---------- responsive ---------- */
@media (max-width:1199.98px){
  .phone-frame{
    width:244px;
  }
  .hero-visual{
    min-height:420px;
  }
}
@media (max-width:991.98px){
  .navbar-nav{
    margin:.5rem 0 .7rem;
  }
  .navbar .nav-link{
    padding:.7rem 1rem!important;
  }
  .live-pill{
    margin:0 0 .4rem;
  }
  .hero-visual{
    min-height:430px;
    margin-top:2rem;
  }
  .hero-title{
    font-size:clamp(1.9rem,3.8vw,2.8rem);
  }
  .editor-card{
    min-height:360px;
    margin-bottom:1.2rem;
  }
  .hot-panel{
    min-height:auto;
  }
  .section-head{
    flex-wrap:wrap;
  }
}
@media (max-width:767.98px){
  .section{
    padding-top:56px;
    padding-bottom:56px;
  }
  .section-head{
    align-items:flex-start;
  }
  .arrow-link{
    padding-left:.2rem;
  }
  .hero-section{
    padding-top:52px;
    padding-bottom:46px;
  }
  .hero-visual{
    display:none;
  }
  .hero-actions .btn{
    width:auto;
  }
  .cta-strip{
    padding:1.8rem 1.4rem;
  }
  .download-panel{
    border-radius:24px;
  }
}
@media (max-width:575.98px){
  .hero-title{
    font-size:1.7rem;
    line-height:1.35;
  }
  .hero-lead{
    font-size:.96rem;
  }
  .hero-trust{
    gap:.6rem .9rem;
    font-size:.78rem;
  }
  .btn{
    padding:.6rem 1.05rem;
    font-size:.9rem;
  }
  .topic-tabs{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:.2rem;
    margin-bottom:1rem;
  }
  .topic-tabs .nav-link{
    flex:0 0 auto;
    white-space:nowrap;
    padding:.45rem .9rem;
    margin-right:.5rem;
  }
  .news-lead{
    padding:1.2rem;
  }
  .news-card{
    padding:1.15rem;
  }
  .download-btns .btn{
    width:100%;
  }
  .brand-cn{
    font-size:1.3rem;
  }
  .brand-flag{
    font-size:.67rem;
    padding:.2rem .45rem;
  }
}

/* roulang page: category1 */
:root {
  --page-bg: #F7FAFD;
  --card-bg: #FFFFFF;
  --brand-primary: #1E6FD9;
  --brand-primary-hover: #1556B0;
  --brand-light: #EEF5FE;
  --brand-border: #D5E5F7;
  --heading-color: #0E2A43;
  --body-color: #33506B;
  --muted-text: #7A8FA3;
  --accent-color: #FB6B47;
  --accent-hover: #DB4E2C;
  --success: #1F9D6B;
  --warning: #EA8A00;
  --footer-bg: #EAF2FB;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 8px 22px rgba(20, 62, 105, 0.06);
  --shadow-hover: 0 16px 34px rgba(20, 62, 105, 0.12);
  --transition-default: all .25s ease;
  --section-space: clamp(64px, 8vw, 108px);
}
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-stack);
  background: var(--page-bg);
  color: var(--body-color);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; transition: var(--transition-default); }
ul, ol, p { margin: 0; }
h1, h2, h3, h4, h5, h6 { color: var(--heading-color); margin-top: 0; }
.container-xxl { max-width: 1280px; }
.overflow-hidden { overflow: hidden; }
/* ---------- Header Nav ---------- */
.site-header {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 1080;
  box-shadow: 0 1px 0 rgba(20,62,105,.06);
  transition: box-shadow .3s ease;
}
.site-header.scrolled {
  box-shadow: 0 10px 30px rgba(20,62,105,.08);
}
.site-header .navbar { padding: 0; min-height: 76px; }
.brand-logo,
.footer-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  white-space: nowrap;
}
.brand-cn { color: var(--brand-primary); }
.brand-app { color: var(--heading-color); font-size: .72em; font-weight: 700; margin-left: 2px; text-transform: uppercase; }
.brand-flag {
  font-size: .55em;
  background: var(--brand-light);
  color: var(--brand-primary);
  border: 1px solid var(--brand-border);
  padding: 3px 7px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 10px;
  letter-spacing: .3px;
}
.brand-flag.green {
  background: #E7F5EE;
  color: var(--success);
  border-color: #CFEBDD;
}
.navbar-nav { gap: 2px; margin-left: 2rem; }
.navbar-nav .nav-link {
  padding: 10px 16px !important;
  color: var(--body-color);
  font-weight: 500;
  border-radius: 999px;
  font-size: 15px;
  transition: var(--transition-default);
  position: relative;
}
.navbar-nav .nav-link:hover { color: var(--brand-primary); background: var(--brand-light); }
.navbar-nav .nav-link.active { color: var(--brand-primary); background: var(--brand-light); font-weight: 600; }
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFF2ED;
  color: var(--accent-hover);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.live-pill .pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-color);
  display: inline-block;
  animation: pulse 2s infinite;
  position: relative;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(251,107,71,.5); }
  70% { box-shadow: 0 0 0 6px rgba(251,107,71,0); }
  100% { box-shadow: 0 0 0 0 rgba(251,107,71,0); }
}
.btn {
  font-weight: 600;
  border-radius: 999px;
  transition: all .25s ease;
  border: 1px solid transparent;
  font-size: 15px;
  padding: 10px 22px;
  line-height: 1.5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn:focus,
.btn:focus-visible,
.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(30,111,217,.2);
}
.btn-primary, .btn-brand {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.btn-primary:hover,
.btn-brand:hover {
  background-color: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(30,111,217,.2);
}
.btn-accent {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}
.btn-accent:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(251,107,71,.25);
}
.btn-nav { padding: 9px 20px; font-size: 14px; }
.btn-outline-brand {
  background: transparent;
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
}
.btn-outline-brand:hover { background: var(--brand-light); color: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.btn-ghost { background: transparent; border: none; color: var(--body-color); }
.btn-ghost:hover { background: var(--brand-light); color: var(--brand-primary); }
.btn-lg { padding: 15px 34px; font-size: 16px; }
/* ---------- Reusable Section ---------- */
.section-space { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.section-title-wrap { position: relative; }
.section-heading h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; margin-bottom: 6px; line-height: 1.3; }
.section-heading .section-desc { color: var(--muted-text); font-size: 15px; margin-bottom: 0; max-width: 600px;}
.section-heading .bar-line { width: 34px; height: 4px; border-radius: 4px; background: var(--accent-color); margin-bottom: 12px; }
.link-more { color: var(--brand-primary); font-weight: 600; font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.link-more i { transition: transform .2s ease; }
.link-more:hover { color: var(--brand-primary-hover); }
.link-more:hover i { transform: translateX(4px); }
/* ---------- Channel Hero ---------- */
.channel-hero {
  position: relative;
  background: linear-gradient(135deg, #EAF2FB 0%, #F7FAFD 70%), var(--brand-light);
  border-radius: 0 0 42px 42px;
  margin-bottom: var(--section-space);
  padding: clamp(48px, 7vw, 88px) 0;
  overflow: hidden;
}
.channel-hero .hero-bg-img {
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/backpic/back-2.webp');
  background-size: cover;
  background-position: center 70%;
  opacity: .2;
}
.channel-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.82) 45%, rgba(247,250,253,.6) 100%);
}
.channel-hero .content { position: relative; z-index: 2; }
.channel-tag { background: var(--accent-color); color: #fff; font-size: 13px; padding: 5px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 22px; }
.channel-hero h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; line-height: 1.22; color: var(--heading-color); margin: 0 0 18px; letter-spacing: -0.5px; }
.channel-hero h1 .highlight { color: var(--brand-primary); position: relative; }
.channel-hero .lead-desc { max-width: 640px; color: var(--body-color); font-size: 1.06rem; line-height: 1.8; margin-bottom: 30px; }
.hero-meta-list { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 28px; margin-bottom: 22px; }
.hero-meta-list .item { display: flex; align-items: center; gap: 8px; color: #57708A; font-size: 14px; }
.hero-meta-list .item i { color: var(--success); font-size: 16px; }
.keyword-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.keyword-tags .tag { background: rgba(255,255,255,.75); border: 1px solid var(--brand-border); color: var(--brand-primary); padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; transition: var(--transition-default); }
.keyword-tags .tag:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
/* ---------- Match main layout ---------- */
.match-main-section { padding-bottom: var(--section-space); }
.match-main-wrap {
  background: var(--card-bg);
  border-radius: 28px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.main-match-card { position: relative; height: 100%; min-height: 430px; }
.match-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.main-match-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,42,67,0) 0%, rgba(6,20,36,.25) 45%, rgba(6,17,28,.9) 100%);
  display: flex;
  align-items: flex-end;
}
.main-match-content { padding: 36px 32px; color: #fff; width: 100%; }
.match-live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-color); color: #fff;
  font-size: 12px; font-weight: 600; padding: 4px 12px;
  border-radius: 999px; margin-bottom: 14px;
}
.match-live-badge i { font-size: 8px; }
.match-live-content { display: inline-flex; background: rgba(0,0,0,.5); color: #fff; border-radius: 999px; font-size: 12px; padding: 4px 12px; gap: 8px; margin-bottom: 14px; }
.main-match-content h3 { color: #fff; font-size: 1.55rem; font-weight: 700; line-height: 1.35; margin-bottom: 12px; }
.main-match-content .match-meta { display: flex; flex-wrap: wrap; gap: 14px; color: rgba(255,255,255,.8); font-size: 13px; }
.main-match-content .match-meta a { color: #fff; text-decoration: underline; }
.right-match-list { background: #fff; padding: 14px 16px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.random-match-item {
  display: block;
  border-radius: 16px;
  padding: 12px 10px;
  transition: var(--transition-default);
}
.random-match-item:hover { background: #F3F8FE; }
.random-match-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.match-league { font-size: 12px; color: var(--muted-text); background: #F2F6FA; border-radius: 6px; padding: 3px 10px; }
.match-action { color: var(--brand-primary); font-size: 12px; font-weight: 600; }
.random-match-title { font-weight: 600; color: var(--heading-color); font-size: 15px; line-height: 1.5; }
.random-meta { display: flex; gap: 12px; font-size: 12px; color: var(--muted-text); margin-top: 6px; }
.random-meta i { margin-right: 4px; }
/* ---------- featured cards more ---------- */
.featured-grid .media-card {
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
  border: none;
}
.featured-grid .media-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.media-thumb { position: relative; overflow: hidden; border-radius: 20px 20px 0 0; aspect-ratio: 16/9; background: #ddd; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.media-card:hover .media-thumb img { transform: scale(1.06); }
.media-badge { position: absolute; left: 12px; top: 12px; background: rgba(14,42,67,.78); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.media-view { position: absolute; right: 12px; bottom: 12px; background: rgba(14,42,67,.55); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; display: flex; gap: 5px; align-items: center; }
.media-body { padding: 16px 16px 18px; }
.media-body h3 { font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 8px; }
.media-body h3 a { color: var(--heading-color); }
.media-body h3 a:hover { color: var(--brand-primary); }
.media-body .meta-info { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted-text); font-size: 12px; }
.dot-tag { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--accent-color); margin-right: 6px; }
/* match quality list */
.match-quality {
  background: #fff;
  border-radius: 28px;
  padding: clamp(28px, 5vw, 48px);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.match-quality h2 { font-weight: 700; }
.rich-match-item {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #EDF2F7;
  padding: 16px 18px;
  border-radius: 20px;
  transition: var(--transition-default);
  background: #fff;
  height: 100%;
}
.rich-match-item:hover { box-shadow: var(--shadow-hover); border-color: transparent; transform: translateY(-3px); }
.rank-no { font-size: 1.9rem !important; font-weight: 800 !important; background: linear-gradient(135deg, #DCEAFB, #EEF5FE); -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 46px; text-align: center; }
.rich-match-content { flex: 1; min-width: 0; }
.rich-match-content h3 { font-size: 16px; margin-bottom: 6px; }
.rich-match-content h3 a { color: var(--heading-color); font-weight: 600; }
.rich-match-content h3 a:hover { color: var(--brand-primary); }
.rich-match-content p { font-size: 13px; color: var(--muted-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.match-rate { display: inline-flex; gap: 10px; font-size: 12px; align-items: center; }
.match-rate .tag-live { color: var(--accent-color); font-weight: 600; }
.match-rate .tag-hot { color: var(--warning); font-weight: 600; }
.cover-thumb-type { width: 112px; height: 92px; object-fit: cover; border-radius: 14px; flex-shrink: 0; }
/* ---------- Sport moments ---------- */
.sport-moments { background: #fff; border-radius: 32px; overflow: hidden; box-shadow: var(--shadow-card); padding: 0; }
.sport-moments .timeline-side { padding: clamp(28px, 4vw, 48px); }
.sport-moments-img-wrap { position: relative; min-height: 100%; }
.sport-moments-img-wrap img { object-fit: cover; width: 100%; height: 100%; min-height: 280px; }
.moments-quote {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  background: rgba(14,42,67,.8);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 18px 20px;
  color: #fff;
}
.moments-quote span { color: rgba(255,255,255,.8); font-size: 13px; }
.moment-item {
  display: flex;
  gap: 16px;
  border-bottom: 1px dashed #E2E9F1;
  padding: 13px 0;
}
.moment-item:last-child { border-bottom: none; padding-bottom: 0;}
.moment-item .date-line { min-width: 86px; }
.moment-item .date-line strong { display: block; color: var(--heading-color); font-size: 18px; line-height: 1.2; }
.moment-item .date-line span { color: var(--muted-text); font-size: 12px; }
.moment-item i { color: var(--brand-primary); font-size: 18px; margin-top: 4px; }
.moment-item p { margin: 0; font-size: 14px; color: var(--body-color); line-height: 1.6; }
/* ---------- counter ---------- */
.counter-panel {
  display: flex;
  gap: 20px;
  background: #10283d;
  background-image: url('/assets/images/backpic/back-1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 32px;
  padding: clamp(24px, 4vw, 44px) clamp(20px, 5vw, 64px);
  justify-content: space-between;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.counter-panel::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 24, 38,.85) 0%, rgba(8, 24, 38,.62) 100%); }
.counter-panel .counter-item { flex: 1; position: relative; z-index: 2; text-align: center; padding: 10px; }
.counter-panel .num { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; display: flex; justify-content: center; align-items: baseline; letter-spacing: 1px; }
.counter-panel .num span { color: var(--accent-color); margin-right: 4px; }
.counter-panel .label { opacity: .75; font-size: 14px; margin-top: 5px; }
/* ---------- FAQ ---------- */
.faq-section { max-width: 860px; }
.faq-section .accordion-item {
  background: #fff;
  border-radius: 18px !important;
  margin-bottom: 14px;
  border: 1px solid #EAF1F9;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 62, 105, .03);
}
.faq-section .accordion-button {
  background: #fff;
  color: var(--heading-color);
  padding: 20px 24px;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 1px solid transparent;
}
.faq-section .accordion-button:not(.collapsed) {
  color: var(--brand-primary);
  background: #F5F9FE;
  box-shadow: none;
  border-bottom: 1px solid #E4EEF9;
}
.faq-section .accordion-button:focus { box-shadow: none; border-color: transparent; }
.faq-section .accordion-button::after { font-size: 12px; }
.faq-section .accordion-body { padding: 18px 24px 22px; color: var(--body-color); font-size: 15px; }
/* ---------- Download CTA ---------- */
.download-cta-section {
  background: linear-gradient(135deg, #102A44 0%, #1E6FD9 150%); 
  border-radius: 36px;
  position: relative;
  overflow: hidden;
}
.download-cta-section .row { display: flex; align-items: center; }
.download-cta-section .info-side { color: #fff; padding: clamp(24px,4vw,52px); }
.download-cta-section h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 12px; }
.download-cta-section p { color: rgba(255,255,255,.78); font-size: 1rem; max-width: 420px; margin-bottom: 24px;}
.download-cta-section .btn-light-accent { display:inline-flex; align-items: center; gap: 10px; color: #fff; background: var(--accent-color); font-weight: 600; padding: 14px 32px; border-radius: 999px; border: none; }
.download-cta-section .btn-light-accent:hover { background: #db4e2c; }
.download-cta-section .btn-ghost-white { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; padding: 13px 30px; border-radius: 999px; font-weight: 600; transition: all .25s;}
.download-cta-section .btn-ghost-white:hover { background: rgba(255,255,255,0.08); border-color: #fff; }
.qr-card {
  background: #fff;
  border-radius: 28px;
  padding: 30px 25px;
  text-align: center;
  box-shadow: var(--shadow-card);
  margin: 24px;
}
.qr-img { width: 132px; height: 132px; display: block; margin: 0 auto 12px; border-radius: 14px; }
.qr-card .note { color: var(--muted-text); font-weight: 500; font-size: 13px; }
.qr-card .official-icon { color: var(--success); font-size: 13px; font-weight: 600; display: flex; align-items:center; justify-content:center; gap: 5px; margin-bottom: 10px;}
/* ---------- footer ---------- */
.site-footer {
  background: var(--footer-bg);
  padding-top: 64px;
  margin-top: var(--section-space);
  border-radius: 56px 56px 0 0;
}
.footer-logo .brand-cn { font-size: 2rem; }
.footer-logo .brand-app { font-size: 1.1rem; }
.footer-brand-block { color: #3C566E; max-width: 420px; }
.footer-brand-block p { margin-top: 14px; font-size: 15px; }
.footer-title { font-size: 14px; color: var(--heading-color); font-weight: 700; margin-bottom: 18px; letter-spacing: .5px; text-transform: uppercase; }
.footer-links { list-style: none; padding: 0; margin: 0;}
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: #4B637B; font-size: 14px; display:inline-flex; align-items:center; gap: 4px; line-height: 1.6; }
.footer-links a i { font-size: 11px; color: #9FB4C9; }
.footer-links a:hover { color: var(--brand-primary); padding-left: 4px;}
.footer-bottom {
  border-top: 1px solid #D3E3F2;
  margin-top: 44px;
  padding: 18px 0 22px;
  color: #6E8398;
  font-size: 13px;
}
/* ---------- 响应式 ---------- */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse { background: #fff; padding: 15px 10px; border-radius: 20px; box-shadow: var(--shadow-card); margin-top: 8px;}
  .navbar-nav { margin-left: 0; gap: 4px; margin-bottom: 14px;}
  .navbar-nav .nav-link { padding: 12px 16px !important; }
  .channel-hero .hero-bg-img { opacity: .12; }
  .channel-hero .hero-overlay { background: rgba(255,255,255,.94); }
}
@media (max-width: 767.98px) {
  .main-match-card { min-height: 320px; }
  .right-match-list { gap: 0px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
  .counter-panel { flex-direction: column; }
  .rich-match-item { flex-wrap: wrap; }
  .cover-thumb-type { width: 100%; height: 160px; margin-bottom: 4px; }
  .footer-brand-block { max-width: 100%;}
  .footer-links a:hover { padding-left: 0;}
}
@media (max-width: 575.98px) {
  .hero-meta-list { gap: 12px; }
  .sport-moments-img-wrap img { max-height: 300px; }
  .download-cta-section .btn-light-accent, .download-cta-section .btn-ghost-white { width: 100%; justify-content: center;}
  .brand-flag { display: none; }
  .footer-bottom .d-flex { flex-direction: column !important; text-align: left; }
}

/* roulang page: article */
:root {
  --color-bg: #F7FAFD;
  --color-white: #FFFFFF;
  --color-brand: #1E6FD9;
  --color-brand-dark: #1556B0;
  --color-brand-light: #EEF5FE;
  --color-brand-border: #D5E5F7;
  --color-coral: #FB6B47;
  --color-coral-dark: #E85736;
  --color-heading: #0E2A43;
  --color-text: #33506B;
  --color-muted: #7A8FA3;
  --color-success: #1F9D6B;
  --color-warning: #EA8A00;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  --radius-large: 22px;
  --radius-card: 16px;
  --radius-small: 10px;
  --shadow-card: 0 8px 22px rgba(20, 62, 105, 0.06);
  --shadow-card-hover: 0 16px 34px rgba(20, 62, 105, 0.12);
  --transition: all .25s ease;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.75;
  font-size: 16px;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.6em;
}
p { margin-bottom: 1rem; }
a { color: var(--color-brand); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-brand-dark); }
img { max-width: 100%; display: block; }
ul, ol { margin-bottom: 1rem; padding-left: 1.25rem; }
::-moz-selection { background: #D6E7FB; color: var(--color-heading); }
::selection { background: #D6E7FB; color: var(--color-heading); }
.container-xxl {
  max-width: 1280px;
}
.btn {
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  padding: .68rem 1.4rem;
  border: 0;
  transition: var(--transition);
}
.btn:focus, .btn-ghost:focus, .form-control:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(30, 111, 217, 0.2);
}
.btn-brand {
  background: var(--color-brand);
  color: #fff;
}
.btn-brand:hover {
  background: var(--color-brand-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(30, 111, 217, 0.22);
}
.btn-accent {
  background: var(--color-coral);
  color: #fff;
}
.btn-accent:hover {
  background: var(--color-coral-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(251, 107, 71, 0.24);
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--color-brand);
  color: var(--color-brand);
}
.btn-outline:hover {
  background: var(--color-brand-light);
  border-color: var(--color-brand);
  color: var(--color-brand-dark);
  transform: translateY(-2px);
}
.btn-ghost {
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
}
.btn-ghost:hover {
  background: #DCEAFB;
  color: var(--color-brand-dark);
}
.btn-nav {
  padding: .55rem 1.2rem;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-lg { padding: .85rem 1.8rem; font-size: 16px; }
.btn-block { width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; }

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  border: 1px solid var(--color-brand-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  padding: .35rem .8rem;
}
.badge-hot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFF4EC;
  color: #C85A21;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  padding: .3rem .8rem;
}
.badge-live {
  background: var(--color-coral);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 13px;
  padding: .3rem .8rem;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.65); }
  70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(213, 229, 247, 0.7);
  box-shadow: 0 4px 18px rgba(20, 62, 105, 0.04);
}
.site-header .navbar {
  min-height: 76px;
  padding: .45rem 0;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1.5rem;
  line-height: 1;
}
.brand-cn {
  color: var(--color-brand);
  font-weight: 800;
}
.brand-app {
  color: var(--color-heading);
  font-weight: 400;
  font-size: 1.1rem;
  transform: translateY(2px);
  display: inline-block;
}
.brand-flag {
  background: var(--color-brand-light);
  border: 1px solid var(--color-brand-border);
  color: var(--color-brand-dark);
  font-size: 11px;
  font-weight: 700;
  padding: .2rem .5rem;
  border-radius: 6px;
  margin-left: 3px;
}
.navbar-toggler {
  border: 1px solid var(--color-brand-border);
  border-radius: 12px;
  width: 46px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
}
.navbar-toggler:focus {
  box-shadow: 0 0 0 4px rgba(30, 111, 217, 0.16);
}
.navbar-nav {
  gap: 4px;
  margin-left: 2rem;
}
.navbar-nav .nav-link {
  color: var(--color-text);
  font-weight: 500;
  font-size: 15px;
  padding: .65rem 1rem;
  border-radius: 10px;
}
.navbar-nav .nav-link:hover {
  color: var(--color-brand);
  background: var(--color-brand-light);
}
.navbar-nav .nav-link.active {
  color: var(--color-brand-dark);
  font-weight: 600;
  background: var(--color-brand-light);
}
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FEF4F1;
  color: #D4512F;
  border-radius: 999px;
  font-size: 13px;
  padding: .4rem .9rem;
  font-weight: 500;
  white-space: nowrap;
}
.live-pill .pulse-dot {
  width: 7px;
  height: 7px;
  background: var(--color-coral);
  box-shadow: 0 0 0 0 rgba(251, 107, 71, .5);
}
#mainNav { gap: 12px; }

/* ===== Article hero ===== */
.article-hero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(238,245,254,.88) 100%),
    url('/assets/images/backpic/back-2.webp') center center / cover no-repeat;
  padding: 48px 0 46px;
  border-bottom: 1px solid rgba(213, 229, 247, .7);
}
.article-hero .breadcrumb-nav {
  margin-bottom: 26px;
}
.breadcrumb {
  margin: 0;
  background: transparent;
  flex-wrap: wrap;
}
.breadcrumb-item {
  font-size: 14px;
}
.breadcrumb-item a {
  color: var(--color-brand);
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "\F285";
  font-family: 'bootstrap-icons';
  color: #A8B9CB;
}
.breadcrumb-item.active {
  color: var(--color-muted);
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-display-title {
  max-width: 900px;
  font-size: clamp(1.7rem, 3.2vw, 2.75rem);
  font-weight: 800;
  margin: 8px 0 18px;
  letter-spacing: -0.01em;
}
.article-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
}
.article-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-muted);
  font-size: 14px;
}
.article-meta-chip i {
  color: var(--color-brand);
}
.article-host-tag {
  background: var(--color-brand);
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  padding: .3rem .65rem;
  letter-spacing: .03em;
}

/* ===== Article body ===== */
.article-section {
  padding: 48px 0 56px;
}
.article-card {
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 4vw, 40px);
}
.article-card-content {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--color-text);
  overflow-wrap: break-word;
}
.article-card-content h2,
.article-card-content h3,
.article-card-content h4 {
  margin-top: 2rem;
  margin-bottom: .8rem;
}
.article-card-content h2 {
  font-size: 1.45rem;
  padding-left: 14px;
  border-left: 4px solid var(--color-brand);
  border-radius: 2px;
}
.article-card-content h3 {
  font-size: 1.22rem;
  color: var(--color-brand-dark);
}
.article-card-content p {
  margin-bottom: 1.15rem;
}
.article-card-content ul,
.article-card-content ol {
  margin: 1rem 0 1.25rem;
}
.article-card-content li {
  margin-bottom: .45rem;
}
.article-card-content blockquote {
  background: var(--color-brand-light);
  border-left: 4px solid var(--color-brand);
  border-radius: 0 12px 12px 0;
  color: var(--color-heading);
  padding: 1rem 1.25rem;
  margin: 1.4rem 0;
}
.article-card-content img {
  border-radius: 16px;
  margin: 1.2rem auto;
  max-height: 520px;
  object-fit: cover;
  width: auto;
}
.article-card-content figcaption {
  font-size: 13px;
  color: var(--color-muted);
  text-align: center;
  margin-top: -10px;
}
.article-card-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-card-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
}
.article-card-content th,
.article-card-content td {
  border: 1px solid var(--color-brand-border);
  padding: .7rem .9rem;
  text-align: left;
}
.article-card-content th {
  background: var(--color-brand-light);
  color: var(--color-heading);
}
.article-end-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid rgba(213, 229, 247, .8);
  margin-top: 2rem;
  padding-top: 1.5rem;
}
.article-end-hint {
  color: var(--color-muted);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.article-end-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ===== Empty state ===== */
.empty-article-card {
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
  padding: 56px 32px;
  text-align: center;
}
.empty-article-card .empty-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--color-brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
  font-size: 1.7rem;
}
.empty-article-card h1 {
  font-size: 1.7rem;
}
.empty-article-card p {
  color: var(--color-muted);
  margin-bottom: 1.4rem;
}

/* ===== Sidebar ===== */
.article-sidebar {
  padding-left: 6px;
}
.sidebar-panel {
  background: var(--color-white);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-card);
  padding: 26px;
  margin-bottom: 22px;
}
.sidebar-download {
  background: var(--color-white);
  border-top: 4px solid var(--color-coral);
}
.sidebar-app-icon {
  width: 52px;
  height: 52px;
  background: var(--color-brand-light);
  border-radius: 15px;
  color: var(--color-brand);
  font-size: 1.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.sidebar-panel h3 {
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: .45rem;
}
.sidebar-panel p {
  font-size: 14px;
  color: var(--color-muted);
  margin-bottom: 1.1rem;
}
.sidebar-country {
  display: block;
  font-size: 12px;
  color: var(--color-success);
  margin-top: .9rem;
  text-align: center;
}
.sidebar-qr-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--color-brand-border);
  background: var(--color-brand-light);
  border-radius: 12px;
  padding: 12px;
  margin-top: 1rem;
  color: var(--color-brand-dark);
  font-size: 13px;
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.02rem;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(213, 229, 247, .6);
}
.panel-title i {
  color: var(--color-brand);
}
.side-channel-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-channel-list li { margin-bottom: 12px; }
.side-channel-list li:last-child { margin-bottom: 0; }
.side-channel-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  padding: 8px 10px;
  color: var(--color-text);
  transition: var(--transition);
  background: transparent;
}
.side-channel-link:hover {
  background: var(--color-brand-light);
  color: var(--color-heading);
  transform: translateX(3px);
}
.side-channel-icon {
  width: 38px;
  height: 38px;
  background: var(--color-brand-light);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
  font-size: 1.05rem;
  flex-shrink: 0;
}
.side-channel-text span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.side-channel-text small {
  font-size: 12px;
  color: var(--color-muted);
}

/* ===== Guide cards ===== */
.channel-guide-section {
  background: var(--color-white);
  padding: clamp(58px, 7vw, 76px) 0;
  border-top: 1px solid var(--color-brand-border);
  border-bottom: 1px solid var(--color-brand-border);
}
.section-kicker {
  color: var(--color-coral);
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-title {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  margin-bottom: 12px;
}
.section-desc {
  color: var(--color-muted);
  max-width: 720px;
}
.guide-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg);
  border-radius: 20px;
  overflow: hidden;
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(20, 62, 105, 0.03);
}
.guide-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}
.guide-card-img {
  height: 186px;
  overflow: hidden;
  position: relative;
}
.guide-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.guide-card:hover .guide-card-img img {
  transform: scale(1.06);
}
.guide-card-img .guide-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  background: rgba(14, 42, 67, .72);
  backdrop-filter: blur(3px);
  color: #fff;
  padding: .3rem .9rem;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.guide-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.guide-card-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.guide-card-body p {
  font-size: 14px;
  color: var(--color-muted);
  margin-bottom: 18px;
  flex: 1;
}
.guide-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-brand);
}
.guide-card-link i {
  transition: transform .25s ease;
}
.guide-card-link:hover i {
  transform: translateX(4px);
}

/* ===== Article CTA ===== */
.article-cta {
  background: var(--color-white);
  padding: 0 0 62px;
}
.article-cta-inner {
  border-radius: 26px;
  background:
    linear-gradient(100deg, rgba(30, 111, 217, .08) 0%, rgba(255, 255, 255, .92) 100%),
    url('/assets/images/backpic/back-3.webp') center center / cover no-repeat;
  padding: clamp(28px, 5vw, 54px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  box-shadow: var(--shadow-card);
}
.article-cta-copy {
  max-width: 700px;
}
.article-cta-copy h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
  font-weight: 800;
  margin-bottom: 8px;
}
.article-cta-copy p {
  color: var(--color-muted);
  margin-bottom: 0;
  font-size: 15px;
}
.article-cta-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, .75);
  border-radius: 14px;
  border: 1px solid var(--color-brand-border);
  padding: 8px 14px;
  font-size: 13px;
  color: var(--color-text);
}
.article-cta-info .bi-shield-check { color: var(--color-success); }

/* ===== Footer ===== */
.site-footer {
  background: #EAF2FB;
  padding: 56px 0 20px;
  color: var(--color-text);
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1.55rem;
  line-height: 1;
  margin-bottom: 12px;
}
.footer-brand-block p {
  font-size: 14px;
  color: var(--color-text);
  max-width: 480px;
  margin-bottom: 10px;
}
.footer-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 16px;
  padding-left: 10px;
  border-left: 3px solid var(--color-brand);
}
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li {
  margin-bottom: 10px;
}
.footer-links a {
  color: var(--color-text);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: var(--transition);
}
.footer-links a i {
  font-size: 12px;
  color: var(--color-brand);
}
.footer-links a:hover {
  color: var(--color-brand-dark);
  transform: translateX(3px);
}
.footer-bottom {
  border-top: 1px solid rgba(30, 111, 217, .16);
  margin-top: 38px;
  padding-top: 18px;
  font-size: 13px;
  color: var(--color-muted);
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .navbar-nav {
    margin-left: .5rem;
  }
  .navbar-nav .nav-link {
    padding-left: .8rem;
    padding-right: .8rem;
  }
}
@media (max-width: 991.98px) {
  #mainNav {
    background: var(--color-white);
    border-radius: 18px;
    padding: 18px;
    margin-top: 10px;
    box-shadow: var(--shadow-card-hover);
    border: 1px solid var(--color-brand-border);
  }
  .navbar-nav {
    margin: 0 0 14px;
  }
  .navbar-nav .nav-link {
    padding: .85rem 1rem;
    border-radius: 12px;
    font-size: 16px;
  }
  .article-sidebar {
    margin-top: 14px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .article-section {
    padding: 34px 0 44px;
  }
  .article-display-title {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
  }
  .article-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .article-cta-inner .btn {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  .article-hero {
    padding: 34px 0 30px;
  }
  .article-card {
    padding: 22px;
    border-radius: 16px;
  }
  .article-end-links {
    align-items: flex-start;
    flex-direction: column;
  }
  .article-end-buttons {
    width: 100%;
  }
  .article-end-buttons .btn {
    flex: 1;
    text-align: center;
  }
  .article-cta-inner {
    padding: 24px 20px;
  }
  .guide-card-img {
    height: 220px;
  }
}
@media (max-width: 575.98px) {
  .site-header .navbar {
    min-height: 68px;
  }
  .brand-logo {
    font-size: 1.3rem;
  }
  .article-hero-meta {
    gap: 10px;
  }
  .breadcrumb-item.active {
    max-width: 250px;
  }
  .channel-guide-section {
    padding: 44px 0;
  }
  .footer-bottom {
    font-size: 12px;
    line-height: 1.7;
  }
}

/* roulang page: category2 */
:root{
  --bg-page:#F7FAFD;
  --bg-card:#FFFFFF;
  --brand-blue:#1E6FD9;
  --brand-hover:#1556B0;
  --brand-soft:#EEF5FE;
  --brand-border:#D5E5F7;
  --title-color:#0E2A43;
  --body-color:#33506B;
  --muted:#7A8FA3;
  --accent:#FB6B47;
  --success:#1F9D6B;
  --warning:#EA8A00;
  --radius-lg:20px;
  --radius-md:14px;
  --shadow-card:0 8px 22px rgba(20,62,105,.06);
  --shadow-hover:0 16px 34px rgba(20,62,105,.12);
  --section-space:clamp(64px,8vw,108px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg-page);
  color:var(--body-color);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--title-color);font-weight:700}
a{color:var(--brand-blue);text-decoration:none}
a:hover{color:var(--brand-hover)}
img{max-width:100%;vertical-align:middle}
.container-xxl{max-width:1280px;padding-left:24px;padding-right:24px}
::selection{background:#dbeafe;color:#0e2a43}
/* header */
.site-header{
  position:sticky;top:0;z-index:1045;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid rgba(213,229,247,.7);
}
.site-header.scrolled{box-shadow:0 6px 20px rgba(20,62,105,.06)}
.navbar{padding-top:0;padding-bottom:0;min-height:72px}
.brand-logo,.footer-logo{
  display:flex;align-items:center;gap:2px;font-weight:800;letter-spacing:.5px;
}
.brand-cn{font-size:1.65rem;color:var(--title-color);line-height:1}
.brand-app{
  font-size:1rem;font-weight:700;background:var(--brand-blue);color:#fff;padding:2px 8px 3px;border-radius:8px;margin-left:6px;letter-spacing:.2px;
}
.brand-flag{
  font-size:11px;font-weight:600;color:var(--accent);background:rgba(251,107,71,.1);border:1px solid rgba(251,107,71,.3);padding:2px 7px;border-radius:20px;margin-left:6px;
}
.navbar-nav .nav-link{
  font-weight:600;font-size:15px;color:var(--body-color);padding:24px 16px !important;border-bottom:3px solid transparent;
}
.navbar-nav .nav-link:hover{color:var(--brand-blue)}
.navbar-nav .nav-link.active{color:var(--brand-blue);border-bottom-color:var(--brand-blue)}
.live-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--success);background:rgba(31,157,107,.08);padding:6px 12px;border-radius:30px;line-height:1.5;
}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--success);display:inline-block;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,157,107,.6)}70%{box-shadow:0 0 0 7px rgba(31,157,107,0)}100%{box-shadow:0 0 0 0 rgba(31,157,107,0)}}
.btn{
  border-radius:40px;font-weight:600;padding:10px 22px;transition:all .25s ease;font-size:15px;
}
.btn:focus,.btn:focus-visible{box-shadow:0 0 0 4px rgba(30,111,217,.25);outline:none}
.btn-accent{
  background:var(--accent);color:#fff;border:none;
}
.btn-accent:hover,.btn-accent:active{background:#e55335;color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(251,107,71,.25)}
.btn-brand{
  background:var(--brand-blue);color:#fff;border:none;
}
.btn-brand:hover{background:var(--brand-hover);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,111,217,.24)}
.btn-outline-brand{
  background:transparent;border:1px solid var(--brand-blue);color:var(--brand-blue);
}
.btn-outline-brand:hover{background:var(--brand-soft);color:var(--brand-hover);border-color:var(--brand-hover)}
.btn-nav{padding:8px 20px}
/* hero */
.channel-hero{
  position:relative;border-radius:28px;overflow:hidden;background:#EAF2FB;padding:clamp(34px,5vw,72px) 0;margin-top:32px;
}
.channel-hero::before{
  content:"";position:absolute;inset:0;background-image:url('/assets/images/backpic/back-2.webp');background-size:cover;background-position:center;opacity:.22;z-index:0;
}
.channel-hero::after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,250,253,.97) 0%,rgba(247,250,253,.94) 42%,rgba(247,250,253,.62) 70%,rgba(247,250,253,.42) 100%);z-index:0;
}
.channel-hero .container-xxl{position:relative;z-index:1}
.channel-hero .hero-inner{max-width:620px}
.tagline{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--brand-blue);background:#fff;border:1px solid var(--brand-border);border-radius:30px;padding:6px 14px;margin-bottom:22px;letter-spacing:.3px;
}
.alert-tag{display:inline-flex;align-items:center;gap:7px;color:#fff;background:var(--accent);font-size:12px;font-weight:700;padding:4px 12px;border-radius:30px}
.channel-hero h1{
  font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.2;font-weight:800;letter-spacing:.5px;margin-bottom:18px;
}
.highlight-accent{color:var(--accent);position:relative}
.highlight-blue{color:var(--brand-blue)}
.channel-hero .lead{font-size:17px;color:var(--body-color);max-width:540px;margin-bottom:30px}
.hero-stats{
  display:flex;flex-wrap:wrap;gap:20px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(213,229,247,.9);
}
.stat-block .num{font-size:1.4rem;font-weight:800;color:var(--title-color);line-height:1.2}
.stat-block .lbl{font-size:13px;color:var(--muted)}
.hero-meta-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.hero-tag{
  display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.9);border:1px solid var(--brand-border);color:var(--body-color);font-size:13px;padding:5px 12px;border-radius:20px;
}
.hero-cards{
  background:rgba(255,255,255,.8);border-radius:26px;padding:26px;box-shadow:var(--shadow-hover);border:1px solid rgba(255,255,255,.9);
  position:relative;z-index:2;max-width:340px;
}
.hero-player-card{background:var(--title-color);border-radius:18px;overflow:hidden;margin-top:14px}
.player-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:rgba(255,255,255,.04);color:#dfe9f2;font-size:12px}
.match-row{border-radius:0;border-bottom:1px solid rgba(213,229,247,.2);color:#c8d8e8}
.match-row:last-child{border-bottom:none}
.match-row .vs{width:8px;color:var(--accent)}
/* channel content */
.section-padding{padding-top:var(--section-space);padding-bottom:var(--section-space)}
.channel-subhead{font-size:13px;letter-spacing:2px;color:var(--brand-blue);font-weight:700;margin-bottom:8px;display:block}
.channel-h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:14px;font-weight:700}
.channel-desc{color:var(--muted);max-width:730px;margin-bottom:0;font-size:15px}
.hot-badge{
  position:absolute;top:14px;right:14px;z-index:3;background:rgba(251,107,71,.95);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.3px;
  box-shadow:0 4px 12px rgba(251,107,71,.35);
}
.section-title-block{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
/* featured split */
.featured-wrap{display:grid;grid-template-columns:1.4fr .8fr;gap:26px;align-items:stretch}
.featured-main-card{
  background:var(--title-color);border-radius:24px;overflow:hidden;position:relative;min-height:420px;
  display:block;box-shadow:var(--shadow-card);transition:transform .3s ease,box-shadow .3s ease;color:#fff;
}
.featured-main-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.featured-main-card .card-media{height:100%;min-height:420px;position:relative}
.featured-main-card .card-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.featured-main-card .card-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,42,67,0) 20%,rgba(14,42,67,.82) 100%);z-index:1;
}
.featured-main-card .card-info{position:absolute;left:0;right:0;bottom:0;padding:36px 28px 24px;z-index:2}
.featured-main-card .card-info .cat-tag{font-size:12px;background:rgba(255,255,255,.16);color:#fff;padding:4px 12px;border-radius:30px;font-weight:600}
.featured-main-card h2{font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:800;color:#fff;margin:14px 0 8px;line-height:1.4}
.featured-main-card .sub-line{font-size:14px;color:#cfe0ef}
.featured-list-wrap{
  display:flex;flex-direction:column;gap:16px;
}
.featured-mini-card{
  display:flex;gap:14px;background:#fff;border-radius:18px;align-items:center;padding:10px;
  box-shadow:0 4px 14px rgba(20,62,105,.05);transition:all .25s;border:1px solid rgba(255,255,255,.7);position:relative;
}
.featured-mini-card:hover{transform:translateX(-4px);box-shadow:var(--shadow-hover)}
.mini-thumb{width:104px;height:76px;border-radius:12px;overflow:hidden;background:var(--brand-soft);flex-shrink:0;position:relative}
.mini-thumb img{width:100%;height:100%;object-fit:cover}
.play-mini{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;line-height:18px;padding:0 0 0 3px;box-sizing:content-box;text-align:center;
}
.header-vs-grid{position:relative;padding-right:12px}
.header-vs-grid img{position:relative;width:66px;height:66px;object-fit:cover;border-radius:10px}
.header-vs-grid i{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;background:var(--title-color);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;border-radius:50%;z-index:2;border:2px solid #fff;font-style:normal;
}
.card-heading{font-size:15px;font-weight:700;color:var(--title-color);margin:4px 0 2px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-sub{font-size:12px;color:var(--muted)}
.match-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;align-items:center;font-size:11px;color:#8da2b8}
/* default card */
.beat-card, .topic-card{
  background:#fff;border-radius:var(--radius-lg);overflow:hidden;height:100%;transition:transform .3s ease,box-shadow .3s ease;box-shadow:var(--shadow-card);display:block;
}
.beat-card:hover,.topic-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.beat-card-media{aspect-ratio:3/4;overflow:hidden;position:relative;background:#EAF2FB}
.beat-card-media img,.topic-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.beat-card:hover .beat-card-media img,.topic-card:hover .topic-card-media img{transform:scale(1.05)}
.cover-shade{
  position:absolute;inset:0;background:linear-gradient(185deg,rgba(14,42,67,0) 46%,rgba(14,42,67,.5) 100%);
}
.play-float{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-36%) scale(.6);width:38px;height:38px;background:#fff;border-radius:50%;opacity:0;transition:all .25s ease;z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px;padding:0 0 0 3px;line-height:38px;text-align:center;
}
.beat-card:hover .play-float{opacity:1;transform:translate(-50%,-50%) scale(1)}
.beat-card .card-body{padding:14px 16px 16px}
.beat-card .card-title{font-size:15px;font-weight:700;color:var(--title-color);line-height:1.45;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-sub{font-size:12px;color:var(--muted);display:block;margin-top:4px}
.stat-num{font-size:1.1rem;font-weight:800;color:var(--accent);letter-spacing:1px}
/* club strip */
.club-strip{
  background:#fff;border-radius:22px;box-shadow:var(--shadow-card);padding:clamp(28px,4vw,56px);
}
.club-avatar{width:60px;height:60px;border-radius:16px;background:var(--brand-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:20px;color:var(--brand-blue);font-weight:800}
.club-name{font-size:13px;color:var(--body-color);text-align:center;font-weight:600}
.rank-badge{
  position:absolute;top:12px;left:12px;background:#fff;color:var(--brand-blue);font-size:12px;font-weight:700;border-radius:10px;padding:2px 8px;box-shadow:0 2px 8px rgba(14,42,67,.08);z-index:2;
}
/* timeline sport page */
.news-feed{border-left:2px solid var(--brand-border);padding-left:32px;position:relative}
.timeline-item{position:relative;padding-bottom:32px}
.timeline-dot{
  position:absolute;left:-37px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--brand-blue);box-shadow:0 0 0 4px rgba(30,111,217,.15);
}
.timeline-card{
  background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:20px 24px;display:flex;justify-content:space-between;gap:18px;align-items:center;border:1px solid rgba(255,255,255,.5);
}
.timeline-time{font-size:12px;color:var(--muted);white-space:nowrap}
.timeline-title{font-weight:700;color:var(--title-color);font-size:16px;line-height:1.5;display:inline-block;margin:4px 0}
/* cta banner */
.cta-banner{
  background:#EAF2FB;border-radius:24px;padding:34px 36px;display:flex;justify-content:space-between;gap:28px;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden;
  border:1px solid var(--brand-border);
}
.cta-banner::before{content:"";position:absolute;top:-38px;right:-22px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.5);z-index:0}
.cta-banner p{margin-bottom:0;color:var(--body-color)}
/* faq section */
.accordion-card{
  border:1px solid var(--brand-border) !important;border-radius:16px !important;background:#fff;box-shadow:0 4px 14px rgba(20,62,105,.04);overflow:hidden;margin-bottom:14px;
}
.accordion-card:hover{border-color:#a7c8e9}
.accordion-button{
  background:#fff;box-shadow:none !important;font-weight:700;color:var(--title-color);font-size:16px;padding:20px 24px;
}
.accordion-button:focus{box-shadow:0 0 0 4px rgba(30,111,217,.2) !important}
.accordion-button:not(.collapsed){border-radius:16px;background:var(--brand-soft);color:var(--brand-blue)}
.accordion-button i{color:var(--accent);font-size:12px;margin-right:8px}
.accordion-body{padding:18px 26px 24px;color:var(--body-color);line-height:1.9}
/* topic card in page 2 section */
.ccard-primary{
  background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-card);transition:transform .28s ease,box-shadow .28s ease;margin:10px 0;height:calc(100% - 20px);
}
.ccard-primary:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.ccard-media{aspect-ratio:3/2;background:#f3f8fd;overflow:hidden;position:relative}
.ccard-media img{width:100%;height:100%;object-fit:cover}
.zebra-card{
  background:#fff;border-radius:18px;padding:14px;box-shadow:var(--shadow-card);display:flex;gap:14px;align-items:center;position:relative;
}
.featured-main-cover{height:100%;min-height:420px;border-radius:24px;background:#143152;position:relative;overflow:hidden;padding:0}
.section-eyebrow{display:inline-block;background:var(--brand-soft);color:var(--brand-blue);font-size:13px;font-weight:600;padding:5px 1px;border-radius:30px;margin-bottom:8px}
/* three features */
.feat-mini{
  background:#fff;border-radius:14px;padding:14px 15px;box-shadow:0 4px 14px rgba(20,62,105,.04);text-align:center;border:1px solid var(--brand-border);
}
/* footer */
.site-footer{background:#EAF2FB;border-top:1px solid #d5e5f7;padding-top:56px;margin-top:var(--section-space)}
.footer-brand-block p{font-size:14px;line-height:1.85;color:var(--body-color);max-width:390px;margin-top:14px}
.footer-title{font-size:15px;font-weight:700;margin-bottom:12px;color:var(--title-color)}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:8px}
.footer-links a{color:var(--body-color);font-size:14px;display:inline-flex;align-items:center;gap:2px}
.footer-links a:hover{color:var(--brand-blue);padding-left:4px;transition:all .2s}
.footer-bottom{border-top:1px solid rgba(255,255,255,.8);padding:20px 0 22px;font-size:13px;color:#6c8399;margin-top:34px}
/* arrow */
.icon-arrow{font-size:13px;margin-left:6px}
/* responsives */
@media(max-width:991.98px){
  .navbar-nav .nav-link{padding:14px 12px !important;border-bottom:none;border-left:3px solid transparent}
  .navbar-nav .nav-link.active{border-bottom:none;border-left-color:var(--brand-blue);background:var(--brand-soft);border-radius:10px}
  .navbar-collapse{background:#fff;border-radius:0 0 18px 18px;padding:10px 12px 18px;box-shadow:var(--shadow-card)}
  .nav-item{margin-bottom:2px}
  .live-pill{margin-right:0}
  .featured-wrap{grid-template-columns:1fr}
  .featured-main-card,.featured-main-card .card-media{min-height:340px}
  .timeline-card{flex-direction:column;align-items:flex-start}
  .hero-cards{max-width:100%}
  .footer-bottom{padding-top:20px}
  .navbar-toggler{background:#fff;border:1px solid var(--brand-border);border-radius:12px;width:46px;height:44px;color:var(--title-color);padding:10px 14px;text-align:center;justify-content:center;align-items:center}
}
@media(max-width:767.98px){
  .navbar{padding-top:8px;padding-bottom:8px}
  .navbar-toggler{width:40px;height:38px;padding:6px 10px}
  .channel-hero h1{font-size:2rem}
  .channel-hero .hero-inner{max-width:100%}
  .channel-hero::after{background:linear-gradient(90deg,rgba(247,250,253,.97) 0%,rgba(247,250,253,.92) 100%)}
  .section-title-block{margin-top:10px}
  .hero-stats{gap:16px}
  .stat-block .num{font-size:1.15rem}
  .header-vs-grid img{width:52px;height:52px}
  .featured-main-card h2{font-size:1.25rem}
  .card-heading{font-size:.9rem}
  .lead{font-size:.95rem !important}
}
@media(max-width:575.98px){
  .container-xxl{padding-left:18px;padding-right:18px}
  .navbar-brand .brand-cn{font-size:1.3rem}
  .navbar-brand .brand-app{font-size:.8rem}
  .navbar-brand .brand-flag{display:none}
  .timeline-item{padding-left:24px}
  .timeline-dot{left:-13px}
  .footer-logo{flex-wrap:wrap}
  .card-title{font-size:.9rem}
  .site-header .brand-flag{display:none}
}
@media(max-width:380px){
  .right-cta-wrap{flex-direction:column;align-items:flex-start;width:100%}
}

/* roulang page: category3 */
:root {
  --site-bg: #F7FAFD;
  --card-bg: #FFFFFF;
  --brand-blue: #1E6FD9;
  --brand-blue-hover: #1556B0;
  --brand-blue-light: #EEF5FE;
  --brand-blue-border: #D5E5F7;
  --heading-color: #0E2A43;
  --body-text: #33506B;
  --muted-text: #7A8FA3;
  --accent-orange: #FB6B47;
  --accent-orange-hover: #E2552F;
  --success-green: #1F9D6B;
  --warning: #EA8A00;
  --border-light: #E3EDF7;
  --radius-card: 20px;
  --radius-list: 14px;
  --shadow-card: 0 8px 22px rgba(20, 62, 105, 0.06);
  --shadow-hover: 0 16px 34px rgba(20, 62, 105, 0.12);
  --footer-bg: #EAF2FB;
  --container-max: 1280px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background-color: var(--site-bg);
  color: var(--body-text);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-weight: 700;
  line-height: 1.3;
}

a {
  color: var(--brand-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--brand-blue-hover);
}

img {
  max-width: 100%;
  height: auto;
}

.container-xxl {
  max-width: var(--container-max);
}

.section {
  padding: clamp(64px, 8vw, 108px) 0;
}

.section-head {
  margin-bottom: 36px;
}

.section-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  position: relative;
  padding-left: 16px;
  line-height: 1.35;
}

.section-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  border-radius: 4px;
  background: var(--accent-orange);
}

.section-head p {
  color: var(--muted-text);
  margin-top: 8px;
  max-width: 680px;
}
.section-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  margin-bottom: 12px;
}
.section-subtitle {
  color: var(--muted-text);
  margin-bottom: 0;
}
.text-accent { color: var(--accent-orange) !important; }
.text-muted-2 { color: var(--muted-text); }
.bg-white { background: #fff; }
.rounded-card { border-radius: var(--radius-card); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(213, 229, 247, 0.7);
  transition: box-shadow 0.3s ease;
}
.site-header.scrolled {
  box-shadow: 0 6px 20px rgba(20, 62, 105, 0.07);
}
.site-header .navbar {
  padding: 14px 0;
}
.site-header .navbar-brand {
  display: flex;
  align-items: center;
  color: var(--heading-color);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
}
.site-header .navbar-brand:hover {
  color: var(--brand-blue);
}
.brand-cn { color: var(--heading-color); }
.brand-app { color: var(--brand-blue); }
.brand-flag {
  display: inline-block;
  background: var(--brand-blue-light);
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 40px;
  margin-left: 8px;
  line-height: 1.5;
}
.site-header .navbar-nav {
  align-items: center;
  gap: 4px;
  margin-left: 24px;
}
.site-header .nav-link {
  color: var(--body-text);
  font-weight: 500;
  font-size: 15px;
  padding: 8px 16px !important;
  border-radius: 40px;
  transition: all 0.2s ease;
}
.site-header .nav-link:hover {
  color: var(--brand-blue);
  background: var(--brand-blue-light);
}
.site-header .nav-link.active {
  color: var(--brand-blue);
  background: var(--brand-blue-light);
  font-weight: 600;
}
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-blue-light);
  border-radius: 40px;
  padding: 6px 14px;
  color: var(--brand-blue);
  font-size: 13px;
  font-weight: 500;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--success-green);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.pulse-dot::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--success-green);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation: pulse 1.6s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  75% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
.btn {
  font-weight: 600;
  border-radius: 40px;
  padding: 10px 24px;
  transition: all 0.25s ease;
  border: none;
  font-size: 15px;
  line-height: 1.6;
}
.btn:focus, .btn:focus-visible {
  box-shadow: 0 0 0 4px rgba(30, 111, 217, 0.25);
  outline: none;
}
.btn-brand {
  background-color: var(--brand-blue);
  color: #fff;
}
.btn-brand:hover, .btn-brand:active {
  background-color: var(--brand-blue-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.btn-accent {
  background-color: var(--accent-orange);
  color: #fff;
}
.btn-accent:hover, .btn-accent:active {
  background-color: var(--accent-orange-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(251, 107, 71, 0.3);
}
.btn-outline-brand {
  background: transparent;
  border: 1px solid var(--brand-blue);
  color: var(--brand-blue);
}
.btn-outline-brand:hover, .btn-outline-brand:active {
  background: var(--brand-blue-light);
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.btn-nav {
  padding: 8px 20px;
  font-size: 14px;
}
.navbar-toggler {
  border: none;
  padding: 4px 8px;
  color: var(--heading-color);
  background: var(--brand-blue-light);
  border-radius: 10px;
}
.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(30, 111, 217, 0.25);
  border: none;
}
.card {
  border: none;
  border-radius: var(--radius-card);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.badge-tag {
  display: inline-block;
  background: var(--brand-blue-light);
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 40px;
  line-height: 1.5;
}
.badge-live {
  background: var(--accent-orange);
  color: #fff;
}
.badge-warm {
  background: #FFF4ED;
  color: var(--accent-orange);
}
.badge-green {
  background: #E8F7F1;
  color: var(--success-green);
}
.channel-hero {
  position: relative;
  background: linear-gradient(135deg, #EEF5FE 0%, #F7FAFD 100%);
  padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 5vw, 64px);
  overflow: hidden;
  border-bottom: 1px solid var(--brand-blue-border);
}
.channel-hero .hero-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: url("/assets/images/backpic/back-2.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.14;
  pointer-events: none;
}
.channel-hero .hero-inner {
  position: relative;
  z-index: 2;
}
.page-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.72);
  border: 1px solid var(--brand-blue-border);
  border-radius: 40px;
  padding: 6px 16px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-blue);
}
.channel-hero h1 {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  color: var(--heading-color);
  margin-bottom: 16px;
  line-height: 1.25;
}
.channel-hero p {
  color: var(--body-text);
  font-size: 17px;
  max-width: 680px;
  margin-bottom: 20px;
}
.hero-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.hero-keywords .badge-tag {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--brand-blue-border);
  color: var(--brand-blue);
  font-size: 13px;
  padding: 6px 14px;
}
.sticky-bar {
  position: sticky;
  top: 78px;
  z-index: 1020;
  background: rgba(247, 250, 253, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(213, 229, 247, 0.6);
  padding: 10px 0;
}
.channel-menu {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.channel-menu .menu-link {
  display: inline-block;
  color: var(--body-text);
  background: #fff;
  border: 1px solid var(--brand-blue-border);
  border-radius: 40px;
  padding: 6px 18px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.channel-menu .menu-link:hover {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
  background: var(--brand-blue-light);
}
.channel-menu .menu-link.current {
  color: #fff;
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  font-weight: 600;
}
.table-of-contents {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 140px;
}
.toc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc-list li {
  margin-bottom: 4px;
}
.toc-list a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--body-text);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}
.toc-list a:hover {
  background: var(--brand-blue-light);
  color: var(--brand-blue);
}
.toc-list a.active {
  background: var(--brand-blue-light);
  color: var(--brand-blue);
  border-left-color: var(--brand-blue);
  font-weight: 600;
}
.course-card-main {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.course-card-main:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.course-cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--brand-blue-light);
}
.course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.course-card-main:hover .course-cover img {
  transform: scale(1.04);
}
.course-cover .duration-label {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(14,42,67,0.78);
  color: #fff;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
}
.course-cover .level-label {
  position: absolute;
  left: 12px;
  top: 12px;
  background: #fff;
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(20,62,105,0.12);
}
.course-body {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.course-body h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 8px;
  line-height: 1.4;
}
.course-body p {
  color: var(--muted-text);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 16px;
  flex: 1;
}
.course-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.stat-block {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px 30px;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}
.stat-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.stat-number {
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--brand-blue);
  line-height: 1.1;
}
.stat-label {
  color: var(--muted-text);
  font-size: 14px;
  margin-top: 6px;
  font-weight: 500;
}
.plan-card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 32px;
  height: 100%;
  border-top: 4px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}
.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}
.plan-card.hot {
  border-top-color: var(--accent-orange);
}
.plan-card.basic-plan {
  border-top-color: var(--brand-blue);
}
.step-circle {
  width: 40px;
  height: 40px;
  background: var(--brand-blue-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--brand-blue);
  font-size: 16px;
  flex-shrink: 0;
}
.timeline-item {
  display: flex;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px dashed var(--brand-blue-border);
  align-items: flex-start;
}
.timeline-item:last-child {
  border-bottom: none;
}
.timeline-body {
  flex: 1;
}
.timeline-body h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 4px;
}
.timeline-body p {
  color: var(--muted-text);
  font-size: 14px;
  margin-bottom: 0;
}
.course-list-item {
  display: flex;
  gap: 16px;
  background: #fff;
  border-radius: var(--radius-list);
  padding: 16px;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
  align-items: center;
}
.course-list-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.course-list-thumb {
  width: 68px;
  height: 68px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--brand-blue-light);
}
.course-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-list-info {
  flex: 1;
  min-width: 0;
}
.course-list-info .name {
  font-size: 15px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 4px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-list-info .desc {
  color: var(--muted-text);
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.faq-wrap .accordion-item {
  background: #fff;
  border: none !important;
  border-radius: var(--radius-card) !important;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  transition: box-shadow 0.3s ease;
}
.faq-wrap .accordion-item:hover {
  box-shadow: var(--shadow-hover);
}
.faq-wrap .accordion-button {
  font-size: 16px;
  font-weight: 600;
  color: var(--heading-color);
  background: #fff;
  padding: 18px 24px;
  box-shadow: none;
  border-radius: var(--radius-card) !important;
}
.faq-wrap .accordion-button:not(.collapsed) {
  background: #fff;
  color: var(--brand-blue);
  box-shadow: none;
}
.faq-wrap .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(30,111,217,0.18);
}
.faq-wrap .accordion-body {
  padding: 4px 24px 24px;
  color: var(--body-text);
  font-size: 15px;
}
.faq-wrap .accordion-button::after {
  background-size: 16px;
  transform: none;
  transition: transform 0.3s ease;
}
.faq-wrap .accordion-button:not(.collapsed)::after {
  transform: rotate(45deg);
}
.download-cta {
  background: var(--brand-blue-light);
  border-radius: 32px;
  padding: clamp(32px, 5vw, 56px);
  position: relative;
  overflow: hidden;
}
.download-cta::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(30,111,217,0.07);
}
.download-cta .cta-title {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: var(--heading-color);
  margin-bottom: 14px;
}
.download-cta p {
  color: var(--body-text);
  max-width: 560px;
}
.download-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--success-green);
  background: #E8F7F1;
  padding: 5px 16px;
  border-radius: 40px;
  font-weight: 600;
}
.qr-box {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px;
  width: 180px;
  margin: 0 auto;
  text-align: center;
}
.qr-box .qr-placeholder {
  width: 140px;
  height: 140px;
  background: var(--brand-blue-light);
  border-radius: 12px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--brand-blue);
  font-weight: 500;
  border: 2px dashed var(--brand-blue-border);
}
.site-footer {
  background: var(--footer-bg);
  padding-top: 68px;
  padding-bottom: 28px;
  margin-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid rgba(213,229,247,0.7);
}
.footer-brand-block p{
  color: var(--body-text);
  font-size: 14px;
  margin-top: 14px;
  max-width: 400px;
}
.footer-logo {
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  font-weight: 800;
}
.footer-logo .brand-flag {
  background: rgba(30,111,217,0.12);
}
.footer-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 18px;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: 10px;
}
.footer-links a {
  color: var(--body-text);
  font-size: 14px;
  display: inline-block;
  transition: all 0.2s ease;
}
.footer-links a:hover {
  color: var(--brand-blue);
  transform: translateX(3px);
}
.footer-links i {
  font-size: 12px;
  margin-right: 4px;
  color: var(--brand-blue);
}
.footer-bottom {
  border-top: 1px solid rgba(30,111,217,0.12);
  margin-top: 48px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-bottom span {
  font-size: 13px;
  color: var(--muted-text);
}
.sidebar-card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sidebar-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.sidebar-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.week-card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 24px;
  height: 100%;
  box-shadow: var(--shadow-card);
  border-left: 4px solid;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.week-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.week-card.day-1 { border-left-color: var(--brand-blue); }
.week-card.day-2 { border-left-color: var(--accent-orange); }
.week-card.day-3 { border-left-color: var(--success-green); }
.week-card.day-4 { border-left-color: #7B68EE; }
.week-card.day-5 { border-left-color: #EA8A00; }
.week-card .week-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-blue);
  margin-bottom: 6px;
}
.week-card h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 10px;
}
.week-card ul {
  padding-left: 18px;
  margin-bottom: 0;
  color: var(--body-text);
  font-size: 14px;
}
.week-card ul li {
  margin-bottom: 4px;
}
@media (max-width: 1200px) {
  .navbar-collapse .nav-link {
    padding: 8px 10px !important;
    font-size: 14px;
  }
}
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: #fff;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--brand-blue-border);
    margin-top: 14px;
  }
  .navbar-collapse .navbar-nav {
    margin-left: 0;
    margin-bottom: 16px;
    align-items: stretch;
  }
  .nav-link {
    padding: 12px 14px !important;
    border-radius: 12px;
  }
  .navbar-nav .nav-item {
    margin-bottom: 4px;
  }
  .sticky-bar {
    position: relative;
    top: 0;
    background: var(--site-bg);
  }
  .table-of-contents{
    display: none;
  }
}
@media (max-width: 767.98px) {
  .navbar-collapse {
    padding: 16px;
  }
  .channel-hero {
    padding-top: 44px;
  }
  .channel-hero h1 {
    font-size: 1.7rem;
  }
  .hero-keywords {
    gap: 6px;
  }
  .cta-title {
    font-size: 1.5rem;
  }
  .download-cta {
    border-radius: 24px;
    padding: 32px 20px;
    text-align: center;
  }
  .download-cta p{
    font-size: 14px;
  }
  .course-cover {
    aspect-ratio: 16 / 9;
  }
  .section.inner-padding{
    padding-top: 48px;
    padding-bottom: 48px;
  }
  body{
    font-size: 15px;
  }
  .stat-block{
    padding: 20px 16px;
  }
}
@media (max-width: 575.98px) {
  .container-xxl {
    padding-left: 20px;
    padding-right: 20px;
  }
  .faq-wrap .accordion-button {
    font-size: 15px;
    padding: 16px 16px;
  }
  .faq-wrap .accordion-body {
    padding: 4px 16px 18px;
    font-size: 14px;
  }
  .course-meta .badge-tag{
    width: auto;
  }
}

/* roulang page: category4 */
:root {
            --bg-page: #F7FAFD;
            --bg-card: #FFFFFF;
            --brand-blue: #1E6FD9;
            --brand-hover: #1556B0;
            --brand-light: #EEF5FE;
            --brand-border: #D5E5F7;
            --title-color: #0E2A43;
            --text-color: #33506B;
            --muted-text: #7A8FA3;
            --accent-orange: #FB6B47;
            --success-green: #1F9D6B;
            --warning-yellow: #EA8A00;
            --radius-large: 20px;
            --radius-medium: 14px;
            --shadow-card: 0 8px 22px rgba(20, 62, 105, 0.06);
            --shadow-hover: 0 16px 34px rgba(20, 62, 105, 0.12);
            --section-gap: clamp(64px, 8vw, 108px);
            --font-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
        }

        /* ===== base reset ===== */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-cn);
            background-color: var(--bg-page);
            color: var(--text-color);
            font-size: 16px;
            line-height: 1.75;
            overflow-x: hidden;
        }

        img {
            max-width: 100%;
            height: auto;
            object-fit: cover;
        }

        a {
            text-decoration: none;
            color: inherit;
            transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        a:hover {
            color: var(--brand-blue);
        }

        button,
        input,
        textarea {
            font-family: inherit;
            transition: all 0.2s ease;
        }

        p {
            margin-bottom: 0.5rem;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        /* ===== container ===== */
        .container-xxl {
            max-width: 1280px;
            padding-left: 20px;
            padding-right: 20px;
            margin: 0 auto;
        }

        /* section spacing */
        .site-section {
            padding-top: var(--section-gap);
            padding-bottom: var(--section-gap);
        }

        .section-title {
            font-size: clamp(1.5rem, 2.4vw, 2rem);
            font-weight: 700;
            color: var(--title-color);
            line-height: 1.4;
            margin-bottom: 0.35rem;
        }

        .section-subtext {
            color: var(--muted-text);
            font-size: 15px;
            max-width: 640px;
        }

        .section-title-wrap {
            position: relative;
            padding-left: 18px;
            margin-bottom: clamp(28px, 4vw, 48px);
        }

        .section-title-wrap::before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px;
            bottom: 6px;
            width: 4px;
            border-radius: 8px;
            background: var(--accent-orange);
        }

        /* ===== 按钮 ===== */
        .btn {
            border-radius: 100px;
            font-weight: 600;
            padding: 10px 22px;
            font-size: 16px;
            border: 1px solid transparent;
            transition: all 0.25s ease;
        }

        .btn-primary-custom {
            background-color: var(--brand-blue);
            color: #fff;
            border-color: var(--brand-blue);
        }

        .btn-primary-custom:hover {
            background-color: var(--brand-hover);
            border-color: var(--brand-hover);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(30, 111, 217, 0.26);
        }

        .btn-accent {
            background-color: var(--accent-orange);
            border-color: var(--accent-orange);
            color: #fff;
        }

        .btn-accent:hover {
            background-color: #e05533;
            border-color: #e05533;
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(251, 107, 71, 0.26);
        }

        .btn-outline-custom {
            border: 1px solid var(--brand-blue);
            color: var(--brand-blue);
            background: transparent;
        }

        .btn-outline-custom:hover {
            background: var(--brand-light);
            border-color: var(--brand-hover);
            color: var(--brand-hover);
        }

        .btn:focus {
            box-shadow: 0 0 0 0.25rem rgba(30, 111, 217, 0.35);
        }

        .btn-accent:focus {
            box-shadow: 0 0 0 0.25rem rgba(251, 107, 71, 0.3);
        }

        /* ===== 导航栏 ===== */
        .site-header {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(213, 229, 247, 0.5);
            position: sticky;
            top: 0;
            z-index: 1050;
            box-shadow: 0 4px 16px rgba(20, 62, 105, 0.04);
            transition: box-shadow 0.3s ease;
        }

        .site-header.is-scrolled {
            box-shadow: 0 8px 24px rgba(20, 62, 105, 0.08);
        }

        .site-header .navbar {
            padding-top: 12px;
            padding-bottom: 12px;
        }

        .brand-logo {
            display: inline-flex;
            align-items: baseline;
            gap: 2px;
            font-weight: 800;
            font-size: 24px;
        }

        .brand-cn {
            color: var(--brand-blue);
            font-size: 26px;
            font-weight: 800;
        }

        .brand-app {
            color: var(--title-color);
            font-size: 20px;
            font-weight: 600;
        }

        .brand-flag {
            background: var(--brand-light);
            color: var(--brand-blue);
            font-size: 12px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 30px;
            margin-left: 6px;
            border: 1px solid var(--brand-border);
            transform: translateY(-3px);
        }

        .site-header .navbar-nav {
            margin-left: 28px;
            gap: 2px;
        }

        .site-header .nav-link {
            font-size: 16px;
            font-weight: 500;
            color: var(--title-color);
            padding: 10px 12px;
            border-radius: 10px;
            line-height: 1.4;
            position: relative;
        }

        .site-header .nav-link:hover {
            color: var(--brand-blue);
            background: var(--brand-light);
        }

        .site-header .nav-link.active {
            color: var(--brand-blue);
            font-weight: 600;
            background: var(--brand-light);
        }

        .site-header .nav-link.active::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 4px;
            transform: translateX(-50%);
            width: 22px;
            height: 3px;
            background: var(--accent-orange);
            border-radius: 6px;
        }

        .navbar-toggler {
            border: none;
            outline: none;
            font-size: 1.4rem;
            color: var(--title-color);
        }

        .navbar-toggler:focus {
            box-shadow: none;
            color: var(--brand-blue);
        }

        .live-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: var(--brand-light);
            color: var(--brand-blue);
            border: 1px solid var(--brand-border);
            font-size: 13px;
            font-weight: 500;
            border-radius: 100px;
            padding: 4px 12px;
            white-space: nowrap;
        }

        .pulse-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--success-green);
            position: relative;
            flex: 0 0 auto;
        }

        .pulse-dot::after {
            content: "";
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            background: rgba(31, 157, 107, 0.35);
            animation: pulse-ring 1.6s infinite;
        }

        @keyframes pulse-ring {
            0% { transform: scale(0.6); opacity: 0.8; }
            80% { transform: scale(1.2); opacity: 0; }
            100% { transform: scale(1.4); opacity: 0; }
        }

        .btn-nav {
            padding: 7px 22px;
            font-size: 15px;
            white-space: nowrap;
        }

        /* ===== Hero banner ===== */
        .page-hero {
            padding: clamp(40px, 6vw, 80px) 0;
            background: linear-gradient(115deg, #EFF5FC 0%, #FFFFFF 60%, var(--brand-light) 100%);
            border-bottom: 1px solid rgba(213, 229, 247, 0.6);
            position: relative;
            overflow: hidden;
        }

        .page-hero::before {
            content: "";
            position: absolute;
            right: -120px;
            top: -80px;
            width: 440px;
            height: 440px;
            border-radius: 50%;
            background: rgba(30, 111, 217, 0.06);
        }

        .page-hero::after {
            content: "";
            position: absolute;
            right: 80px;
            bottom: -130px;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: rgba(251, 107, 71, 0.05);
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .page-hero .breadcrumb {
            font-size: 14px;
            margin-bottom: 22px;
            color: var(--muted-text);
        }

        .page-hero .breadcrumb .divider {
            margin: 0 8px;
            color: var(--muted-text);
        }

        .page-hero h1 {
            font-size: clamp(2rem, 4.2vw, 3rem);
            font-weight: 800;
            color: var(--title-color);
            line-height: 1.3;
            margin-bottom: 16px;
        }

        .page-hero h1 .brand-blue-text {
            color: var(--brand-blue);
        }

        .page-hero p.lead-text {
            font-size: 16px;
            line-height: 1.8;
            color: var(--text-color);
            max-width: 600px;
            margin-bottom: 26px;
        }

        .tag-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 24px;
        }

        .hero-tag {
            background: white;
            border: 1px solid var(--brand-border);
            border-radius: 100px;
            padding: 5px 14px;
            font-size: 13px;
            color: var(--brand-blue);
            font-weight: 500;
            letter-spacing: 0.2px;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
        }

        .hero-card-wrapper {
            position: relative;
            z-index: 2;
            display: flex;
            justify-content: flex-end;
        }

        .activity-status-card {
            background: white;
            border-radius: 24px;
            box-shadow: var(--shadow-card);
            padding: 26px 24px;
            width: 100%;
            max-width: 380px;
            border: 1px solid rgba(213, 229, 247, 0.4);
            position: relative;
        }

        .activity-status-card::before {
            content: "";
            position: absolute;
            top: -8px;
            right: 26px;
            width: 64px;
            height: 64px;
            border-radius: 16px;
            background: var(--brand-light);
            z-index: -1;
        }

        .status-label {
            font-size: 15px;
            font-weight: 600;
            color: var(--title-color);
            margin-bottom: 10px;
        }

        .status-count-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid rgba(213, 229, 247, 0.5);
        }

        .status-count-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .status-text {
            font-size: 14px;
            color: var(--text-color);
        }

        .status-num {
            font-weight: 700;
            color: var(--accent-orange);
            font-size: 20px;
        }

        .activity-card-footer {
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px dashed var(--brand-border);
            font-size: 13px;
            color: var(--muted-text);
        }

        /* ===== 版块通用卡片 ===== */
        .custom-card {
            background: var(--bg-card);
            border-radius: var(--radius-medium);
            box-shadow: var(--shadow-card);
            border: none;
            transition: all 0.25s ease;
            overflow: hidden;
            height: 100%;
        }

        .custom-card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-4px);
        }

        .featured-event-card {
            background: white;
            border-radius: var(--radius-large);
            overflow: hidden;
            box-shadow: var(--shadow-card);
            height: 100%;
            position: relative;
            border: none;
            transition: all 0.3s ease;
        }

        .featured-event-card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-4px);
        }

        .image-zoom-wrapper {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-large) var(--radius-large) 0 0;
        }

        .image-zoom-wrapper img {
            width: 100%;
            transition: transform 0.5s ease;
            height: 250px;
            object-fit: cover;
            display: block;
        }

        .featured-event-card:hover .image-zoom-wrapper img {
            transform: scale(1.04);
        }

        .featured-event-card .card-body {
            padding: 24px;
        }

        .featured-event-card .card-title {
            font-size: 19px;
            font-weight: 700;
            color: var(--title-color);
            margin-bottom: 8px;
            line-height: 1.4;
        }

        .featured-event-card .card-text {
            color: var(--text-color);
            font-size: 14px;
            line-height: 1.75;
        }

        .event-meta-line {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 14px;
        }

        .meta-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--brand-light);
            color: var(--brand-hover);
            font-size: 13px;
            padding: 4px 12px;
            border-radius: 100px;
            font-weight: 500;
        }

        .hot-badge {
            background: rgba(251, 107, 71, 0.12);
            color: var(--accent-orange);
            font-weight: 600;
        }

        .live-now-badge {
            background: var(--accent-orange);
            color: white;
            border-radius: 100px;
            padding: 5px 14px;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 3;
        }

        .live-now-badge .live-dot {
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
            animation: live-blink 1.1s infinite;
        }

        @keyframes live-blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

        .event-date-badge {
            background: rgba(14, 42, 67, 0.6);
            color: white;
            border-radius: 12px;
            padding: 4px 10px;
            font-size: 12px;
            backdrop-filter: blur(4px);
        }

        /* 活动列表 */
        .timeline-quick-list {
            background: white;
            border-radius: var(--radius-medium);
            box-shadow: var(--shadow-card);
            padding: 8px 0;
        }

        .timeline-quick-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px 24px;
            transition: background-color 0.2s ease;
            border-bottom: 1px solid rgba(213, 229, 247, 0.3);
        }

        .timeline-quick-item:last-child {
            border-bottom: none;
        }

        .timeline-quick-item:hover {
            background: var(--brand-light);
        }

        .timeline-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--brand-blue);
            flex: 0 0 auto;
        }

        .timeline-dot.orange {
            background: var(--accent-orange);
        }

        .timeline-dot.green {
            background: var(--success-green);
        }

        .timeline-content {
            flex: 1;
        }

        .timeline-title {
            font-size: 15px;
            font-weight: 600;
            color: var(--title-color);
        }

        .timeline-sub {
            font-size: 13px;
            color: var(--muted-text);
        }

        .timeline-status {
            font-size: 13px;
            font-weight: 500;
            color: var(--muted-text);
            white-space: nowrap;
        }

        .timeline-status.orange-text {
            color: var(--accent-orange);
        }

        .timeline-status.green-text {
            color: var(--success-green);
        }

        /* 活动类型标签 */
        .activity-kind-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .kind-pill {
            background: white;
            border: 1px solid var(--brand-border);
            border-radius: 100px;
            padding: 8px 18px;
            font-size: 14px;
            font-weight: 500;
            color: var(--title-color);
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .kind-pill:hover,
        .kind-pill.active {
            background: var(--brand-blue);
            color: white;
            border-color: var(--brand-blue);
        }

        /* ===== 活动玩法区域 ===== */
        .gameplay-card {
            background: white;
            border-radius: var(--radius-medium);
            box-shadow: var(--shadow-card);
            padding: 26px 24px;
            text-align: left;
            transition: all 0.25s ease;
            border: none;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .gameplay-card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-4px);
        }

        .gameplay-icon {
            width: 52px;
            height: 52px;
            background: var(--brand-light);
            border-radius: 14px;
            font-size: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--brand-blue);
            margin-bottom: 16px;
        }

        .gameplay-card h3 {
            font-size: 17px;
            font-weight: 700;
            color: var(--title-color);
            margin-bottom: 8px;
        }

        .gameplay-card p {
            color: var(--text-color);
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 0;
        }

        /* ===== 活动流程时间线 ===== */
        .flow-steps-wrapper {
            background: var(--brand-light);
            border-radius: var(--radius-large);
            padding: clamp(28px, 4vw, 48px);
        }

        .flow-step-item {
            display: flex;
            gap: 18px;
            align-items: flex-start;
            position: relative;
            padding-bottom: 28px;
        }

        .flow-step-item:last-child {
            padding-bottom: 0;
        }

        .flow-step-num {
            width: 42px;
            height: 42px;
            background: var(--brand-blue);
            color: white;
            font-size: 17px;
            font-weight: 700;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            position: relative;
            z-index: 1;
        }

        .flow-step-num.orange {
            background: var(--accent-orange);
        }

        .flow-step-num.green {
            background: var(--success-green);
        }

        .flow-step-line {
            position: absolute;
            top: 42px;
            bottom: -2px;
            left: 20px;
            width: 2px;
            background: rgba(30, 111, 217, 0.14);
        }

        .flow-step-item:last-child .flow-step-line {
            display: none;
        }

        .flow-step-text {
            padding-top: 6px;
        }

        .flow-step-text h4 {
            font-size: 18px;
            font-weight: 700;
            color: var(--title-color);
            margin-bottom: 4px;
        }

        .flow-step-text p {
            font-size: 14px;
            color: var(--text-color);
            margin-bottom: 0;
        }

        /* ===== 奖励与数据模块 ===== */
        .stats-block {
            background: white;
            border-radius: var(--radius-large);
            box-shadow: var(--shadow-card);
            padding: clamp(24px, 2.6vw, 40px);
            border: none;
        }

        .stat-number {
            font-size: clamp(26px, 3vw, 38px);
            font-weight: 800;
            color: var(--brand-blue);
            line-height: 1.3;
        }

        .stat-number.light-coral {
            color: var(--accent-orange);
        }

        .stat-label {
            font-size: 14px;
            color: var(--muted-text);
            margin-top: 4px;
        }

        /* ===== FAQ ===== */
        .faq-wrapper {
            max-width: 860px;
            margin: 0 auto;
        }

        .accordion-item {
            background: white;
            border: none;
            border-radius: var(--radius-medium);
            box-shadow: var(--shadow-card);
            margin-bottom: 14px;
            overflow: hidden;
        }

        .accordion-header {
            border-radius: var(--radius-medium);
        }

        .accordion-button {
            padding: 18px 24px;
            font-size: 16px;
            font-weight: 600;
            color: var(--title-color);
            background: white;
            box-shadow: none;
            border-radius: var(--radius-medium);
        }

        .accordion-button::after {
            background-size: 16px 16px;
            transition: transform 0.2s ease;
        }

        .accordion-button:hover {
            background: var(--brand-light);
        }

        .accordion-button:not(.collapsed) {
            background: var(--brand-light);
            color: var(--brand-blue);
            box-shadow: none;
        }

        .accordion-body {
            padding: 0 24px 20px;
            color: var(--text-color);
            font-size: 15px;
            border-top: 1px solid rgba(213, 229, 247, 0.4);
            background: white;
        }

        /* ===== CTA 区域 ===== */
        .cta-banner {
            background: white;
            border-radius: var(--radius-large);
            box-shadow: var(--shadow-card);
            padding: clamp(30px, 5vw, 64px);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta-banner::before {
            content: "";
            position: absolute;
            left: -80px;
            bottom: -80px;
            width: 200px;
            height: 200px;
            background: rgba(30, 111, 217, 0.05);
            border-radius: 50%;
        }

        .cta-banner::after {
            content: "";
            position: absolute;
            right: -40px;
            top: -60px;
            width: 160px;
            height: 160px;
            background: rgba(251, 107, 71, 0.05);
            border-radius: 50%;
        }

        .cta-title {
            font-size: clamp(1.6rem, 3vw, 2.4rem);
            font-weight: 800;
            color: var(--title-color);
            margin-bottom: 12px;
            position: relative;
            z-index: 1;
        }

        .cta-text {
            color: var(--text-color);
            font-size: 16px;
            position: relative;
            z-index: 1;
            margin-bottom: 24px;
            max-width: 560px;
            margin-left: auto;
            margin-right: auto;
        }

        /* ===== 页脚 ===== */
        .site-footer {
            background: #EAF2FB;
            padding-top: clamp(44px, 6vw, 72px);
            padding-bottom: 22px;
            border-top: 1px solid rgba(213, 229, 247, 0.6);
            margin-top: auto;
        }

        .footer-brand-block {
            display: block;
        }

        .footer-logo {
            display: inline-flex;
            align-items: baseline;
            gap: 2px;
            font-weight: 800;
            font-size: 22px;
            margin-bottom: 12px;
        }

        .footer-brand-block p {
            color: var(--text-color);
            font-size: 15px;
            max-width: 460px;
            margin-top: 10px;
            line-height: 1.7;
        }

        .footer-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--title-color);
            margin-bottom: 16px;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-title::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 32px;
            height: 2px;
            background: var(--brand-blue);
            border-radius: 3px;
        }

        .footer-links li {
            margin-bottom: 6px;
        }

        .footer-links a {
            display: inline-flex;
            align-items: center;
            color: var(--text-color);
            font-size: 14px;
            transition: all 0.2s ease;
            padding: 4px 0;
        }

        .footer-links a i {
            font-size: 12px;
            margin-right: 5px;
            color: var(--brand-blue);
            opacity: 0.6;
        }

        .footer-links a:hover {
            color: var(--brand-blue);
            transform: translateX(4px);
        }

        .footer-bottom {
            margin-top: 40px;
            padding-top: 22px;
            border-top: 1px solid rgba(30, 111, 217, 0.1);
            font-size: 13px;
            color: var(--muted-text);
        }

        /* ===== 响应式 ===== */
        @media (max-width: 1024px) {
            .brand-cn {
                font-size: 23px;
            }
            .brand-app {
                font-size: 17px;
            }
            .site-header .navbar-nav {
                margin-left: 8px;
            }
            .live-pill {
                margin-right: 0;
            }
        }

        @media (max-width: 991.98px) {
            .site-header .navbar-nav {
                margin-left: 0;
                margin-top: 12px;
            }
            .site-header .nav-link {
                padding: 10px 8px;
            }
            .site-header .nav-link.active::after {
                display: none;
            }
            .site-header .nav-link.active {
                border-left: 3px solid var(--accent-orange);
                border-radius: 0 8px 8px 0;
                background: transparent;
            }
            .navbar-collapse .d-flex {
                margin-top: 14px;
                padding-top: 14px;
                border-top: 1px solid var(--brand-border);
                width: 100%;
            }
            .hero-card-wrapper {
                margin-top: 32px;
                justify-content: flex-start;
            }
            .activity-status-card {
                max-width: none;
            }
        }

        @media (max-width: 768px) {
            body {
                font-size: 15px;
            }
            .page-hero h1 {
                font-size: 1.9rem;
            }
            .hero-actions .btn {
                width: calc(50% - 6px);
                text-align: center;
            }
            .hero-actions {
                flex-direction: row;
                flex-wrap: wrap;
            }
            .event-meta-line {
                gap: 8px;
            }
            .stats-block .stat-number {
                font-size: 28px;
            }
            .cta-banner .d-flex {
                flex-direction: column;
                align-items: center;
                gap: 16px;
            }
            .flow-steps-wrapper {
                padding: 22px;
            }
            .featured-event-card .card-body {
                padding: 18px;
            }
        }

        @media (max-width: 576px) {
            .container-xxl {
                padding-left: 14px;
                padding-right: 14px;
            }
            .page-hero {
                padding: 32px 0 44px;
            }
            .page-hero h1 {
                font-size: 1.75rem;
                line-height: 1.4;
            }
            .hero-actions .btn {
                width: 100%;
                text-align: center;
            }
            .section-title-wrap {
                padding-left: 14px;
            }
            .section-title {
                font-size: 1.45rem;
            }
            .footer-title {
                margin-top: 12px;
            }
            .brand-flag {
                display: none;
            }
            .live-pill {
                font-size: 12px;
                padding: 3px 10px;
            }
            .timeline-quick-item {
                padding: 12px 16px;
                gap: 10px;
            }
            .timeline-title {
                font-size: 14px;
            }
            .timeline-sub {
                font-size: 12px;
            }
            .gameplay-card {
                padding: 20px 18px;
            }
            .accordion-button {
                padding: 16px 14px;
                font-size: 15px;
                white-space: normal;
                line-height: 1.4;
            }
            .flow-step-num {
                width: 34px;
                height: 34px;
                font-size: 15px;
            }
            .flow-step-line {
                top: 34px;
                left: 16.5px;
            }
            .flow-step-text h4 {
                font-size: 16px;
            }
            .stats-block {
                padding: 20px 16px;
            }
            .stat-number {
                font-size: 24px;
            }
        }