/* roulang page: index */
:root {
  --mk-primary: #1176E8;
  --mk-primary-dark: #0A5FCA;
  --mk-primary-deep: #074B9E;
  --mk-primary-weak: #EFF6FE;
  --mk-primary-line: #D9E6F5;
  --mk-accent: #0EA98C;
  --mk-accent-dark: #078D75;
  --mk-accent-weak: #E3F7F1;
  --mk-dark: #0B2447;
  --mk-body: #334E69;
  --mk-muted: #6B859E;
  --mk-bg-page: #F6FAFF;
  --mk-surface: #FFFFFF;
  --mk-radius: 16px;
  --mk-shadow: 0 6px 18px rgba(14, 47, 91, 0.06);
  --mk-shadow-hover: 0 14px 32px rgba(14, 47, 91, 0.12);
  --mk-font: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--mk-font);
  font-size: 16px;
  line-height: 1.8;
  color: var(--mk-body);
  background: var(--mk-bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--mk-dark);
  font-weight: 700;
}

a {
  color: var(--mk-primary);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover {
  color: var(--mk-primary-dark);
}

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

.container {
  max-width: 1256px;
  padding-left: 20px;
  padding-right: 20px;
}

.page-section {
  padding: 92px 0;
}

section + section {
  margin: 0;
}

.btn {
  border-radius: 11px;
  font-weight: 600;
  padding: 12px 24px;
  transition: all .2s ease;
}

.btn-lg {
  min-height: 52px;
  padding-left: 28px;
  padding-right: 28px;
}

.btn-sm {
  min-height: 40px;
}

.btn-primary {
  --bs-btn-bg: var(--mk-primary);
  --bs-btn-border-color: var(--mk-primary);
  --bs-btn-hover-bg: var(--mk-primary-dark);
  --bs-btn-hover-border-color: var(--mk-primary-dark);
  --bs-btn-active-bg: var(--mk-primary-deep);
  --bs-btn-active-border-color: var(--mk-primary-deep);
  --bs-btn-disabled-bg: #9DC4F2;
  --bs-btn-disabled-border-color: #9DC4F2;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  box-shadow: 0 10px 22px rgba(17, 118, 232, .24);
  transform: translateY(-1px);
}

.btn-outline-primary {
  --bs-btn-color: var(--mk-primary);
  --bs-btn-border-color: var(--mk-primary);
  --bs-btn-hover-bg: var(--mk-primary);
  --bs-btn-hover-border-color: var(--mk-primary);
  --bs-btn-active-bg: var(--mk-primary-dark);
  --bs-btn-active-border-color: var(--mk-primary-dark);
  color: var(--mk-primary);
}

.btn-outline-primary:hover {
  color: #fff;
  background: var(--mk-primary);
  box-shadow: 0 10px 22px rgba(17, 118, 232, .2);
  transform: translateY(-1px);
}

.btn-secondary {
  --bs-btn-bg: var(--mk-primary-weak);
  --bs-btn-border-color: var(--mk-primary-weak);
  --bs-btn-color: var(--mk-primary);
  --bs-btn-hover-bg: #DBEAFB;
  --bs-btn-hover-border-color: #DBEAFB;
  --bs-btn-hover-color: var(--mk-primary-dark);
}

.link-arrow {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-weight: 600;
  color: var(--mk-primary);
}

.link-arrow:hover {
  color: var(--mk-primary-dark);
}

.link-arrow span {
  transition: transform .2s ease;
}

.link-arrow:hover span {
  transform: translateX(4px);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--mk-accent);
}

.kicker::before {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 4px;
  background: var(--mk-accent);
}

.section-head h2,
.section-head h3 {
  margin: 10px 0 0;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.25;
}

.section-head-desc {
  margin: 12px 0 0;
  max-width: 720px;
  color: var(--mk-muted);
}

.section-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--mk-muted);
  white-space: nowrap;
}

.section-more:hover {
  color: var(--mk-primary);
}

/* ---- Header ---------------- */
.mk-header {
  background: #fff;
  position: relative;
  z-index: 1050;
}

.top-bar {
  border-bottom: 1px solid var(--mk-primary-line);
}

.top-bar-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mk-dark);
}

.brand-logo:hover {
  color: var(--mk-dark);
}

.brand-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 13px;
  background: linear-gradient(145deg, #1070DD, #4D9AFA);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(17, 118, 232, .25);
}

.brand-name {
  color: var(--mk-dark);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.1;
}

.brand-caption {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--mk-muted);
  letter-spacing: .8px;
}

.top-actions {
  display: flex;
  gap: 10px;
}

.top-actions .btn {
  min-width: max-content;
}

.phone-link,
.subtle-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--mk-body);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 10px;
}

.phone-link:hover,
.subtle-link:hover {
  background: var(--mk-primary-weak);
  color: var(--mk-primary);
}

.btn-login {
  min-height: 42px;
}

.channel-bar {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--mk-primary-line);
  backdrop-filter: blur(10px);
}

.channel-inner {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.desktop-nav {
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
}

.nav-channel {
  display: inline-block;
  padding: 8px 17px;
  border-radius: 999px;
  color: var(--mk-body);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: all .2s ease;
}

.nav-channel:hover {
  color: var(--mk-primary);
  background: var(--mk-primary-weak);
}

.nav-channel.active {
  color: #fff;
  background: var(--mk-primary);
  box-shadow: 0 7px 16px rgba(17, 118, 232, .25);
}

.channel-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mk-muted);
  white-space: nowrap;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mk-accent);
  box-shadow: 0 0 0 4px rgba(14, 169, 140, .12);
}

.navbar-toggler {
  border: 0;
  background: var(--mk-primary-weak);
  border-radius: 10px;
  padding: 6px 12px;
  color: var(--mk-primary);
}

.navbar-toggler:hover {
  background: #DBEAFB;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(17,118,232,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.toggle-text {
  font-size: 13px;
  font-weight: 600;
}

.offcanvas {
  --bs-offcanvas-width: 330px;
}

.offcanvas-header {
  border-bottom: 1px solid var(--mk-primary-line);
}

.offcanvas-body {
  padding: 18px 20px 30px;
}

.mobile-nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 10px;
  border-bottom: 1px solid var(--mk-primary-line);
  color: var(--mk-body);
  font-weight: 600;
  border-radius: 8px;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--mk-primary);
  background: var(--mk-primary-weak);
}

.offcanvas-note {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--mk-primary-weak);
  color: var(--mk-body);
  font-size: 14px;
}

/* ---- Hero ---------------- */
.hero-section {
  position: relative;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .86) 42%, rgba(17, 118, 232, .28) 100%),
    url('/assets/images/backpic/back-1.png') center / cover no-repeat;
  border-bottom: 1px solid var(--mk-primary-line);
}

.hero-row {
  padding: 72px 0 48px;
  min-height: 560px;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--mk-primary-line);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mk-primary);
  margin-bottom: 20px;
  box-shadow: var(--mk-shadow);
}

.hero-title {
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.2;
  letter-spacing: .5px;
  margin: 0 0 20px;
  color: var(--mk-dark);
  max-width: 760px;
}

.hero-title em {
  color: var(--mk-primary);
  font-style: normal;
}

.hero-lead {
  font-size: 17px;
  color: var(--mk-body);
  max-width: 660px;
  margin: 0 0 28px;
}

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

.hero-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 32px;
  color: var(--mk-muted);
  font-size: 14px;
}

.hero-info-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero-info-tags span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mk-accent);
}

.hero-card {
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(217, 230, 245, .85);
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 18px 42px rgba(14, 47, 91, .12);
  backdrop-filter: blur(8px);
}

.hero-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.hero-card-head strong {
  color: var(--mk-dark);
  font-size: 18px;
}

.official-badge {
  background: var(--mk-accent-weak);
  color: var(--mk-accent-dark);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
}

.hero-entry-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.hero-entry-list li + li {
  border-top: 1px dashed var(--mk-primary-line);
}

.hero-entry-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 2px;
  color: var(--mk-body);
  font-weight: 500;
}

.hero-entry-list a::after {
  content: "→";
  color: var(--mk-primary);
  font-weight: 700;
  transition: transform .2s ease;
}

.hero-entry-list a:hover {
  color: var(--mk-primary);
}

.hero-entry-list a:hover::after {
  transform: translateX(4px);
}

.hero-info-strip {
  background: rgba(255, 255, 255, .72);
  border-top: 1px solid rgba(217, 230, 245, .7);
}

.hero-info-strip-inner {
  min-height: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 34px;
  font-size: 14px;
  color: var(--mk-body);
}

.hero-info-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-info-strip span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mk-primary);
  box-shadow: 0 0 0 3px var(--mk-primary-weak);
}

/* ---- Latest CMS section ------- */
.latest-wrap {
  background: #fff;
  border: 1px solid var(--mk-primary-line);
  border-radius: 22px;
  padding: 8px;
  box-shadow: var(--mk-shadow);
}

.latest-main-card {
  border-radius: 17px;
  overflow: hidden;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.latest-main-card .main-cover {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9.5;
  background: var(--mk-primary-weak);
}

.latest-main-card .main-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.latest-main-card:hover .main-cover img {
  transform: scale(1.03);
}

.latest-main-card .main-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, rgba(11, 36, 71, .44));
}

.main-cat-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .4);
  color: var(--mk-primary);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.latest-main-card .main-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.article-date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--mk-muted);
}

.main-title {
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
}

.main-title a {
  color: var(--mk-dark);
}

.main-title a:hover {
  color: var(--mk-primary);
}

.main-excerpt {
  color: var(--mk-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.latest-list {
  padding: 6px 8px 6px 14px;
}

.latest-list-item {
  display: flex;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--mk-primary-line);
}

.latest-list-item:last-child {
  border-bottom: 0;
}

.latest-list-date {
  flex: 0 0 104px;
  background: var(--mk-primary-weak);
  border-radius: 10px;
  text-align: center;
  padding: 8px 6px;
  height: max-content;
  min-width: 104px;
}

.latest-list-date .d {
  display: block;
  color: var(--mk-primary);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}

.latest-list-date .m {
  font-size: 12px;
  color: var(--mk-muted);
}

.latest-list-content {
  flex: 1;
}

.latest-list-content h3 {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 5px;
}

.latest-list-content h3 a {
  color: var(--mk-dark);
}

.latest-list-content h3 a:hover {
  color: var(--mk-primary);
}

.latest-list-excerpt {
  font-size: 14px;
  color: var(--mk-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.latest-list-meta {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--mk-muted);
}

.latest-list-cat {
  background: var(--mk-accent-weak);
  color: var(--mk-accent-dark);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 600;
}

.latest-list-item a.read-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mk-primary);
  font-weight: 600;
  font-size: 14px;
}

.latest-list-item a.read-link:hover {
  color: var(--mk-primary-dark);
}

.side-empty {
  border: 1px dashed var(--mk-primary-line);
  border-radius: var(--mk-radius);
  background: var(--mk-primary-weak);
  color: var(--mk-muted);
  text-align: center;
  padding: 34px 18px;
}

.latest-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 230px;
  border: 1px dashed var(--mk-primary-line);
  border-radius: 20px;
  color: var(--mk-muted);
  background: var(--mk-surface);
  padding: 32px;
}

.latest-empty h3 {
  font-size: 18px;
  color: var(--mk-dark);
  margin: 0;
}

/* ---- Schedule / agenda ------- */
.schedule-row {
  align-items: stretch;
}

.timeline {
  position: relative;
  padding-left: 40px;
  margin-left: 8px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--mk-primary) 10%, var(--mk-accent) 80%);
}

.timeline-item {
  position: relative;
  margin-bottom: 28px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--mk-primary);
  box-shadow: 0 0 0 5px var(--mk-primary-weak);
  border: 2px solid #fff;
}

.timeline-card {
  background: var(--mk-surface);
  border: 1px solid var(--mk-primary-line);
  border-radius: var(--mk-radius);
  padding: 20px 22px;
  box-shadow: var(--mk-shadow);
  transition: all .2s ease;
}

.timeline-card:hover {
  box-shadow: var(--mk-shadow-hover);
  transform: translateY(-3px);
}

.timeline-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mk-primary);
  margin-bottom: 8px;
}

.timeline-tag em {
  font-style: normal;
  font-weight: 500;
  color: var(--mk-muted);
  font-size: 13px;
}

.timeline-card h3 {
  font-size: 18px;
  margin: 0 0 8px;
}

.timeline-card p {
  font-size: 15px;
  color: var(--mk-muted);
  margin: 0;
}

.schedule-aside {
  background: linear-gradient(155deg, #0B2447, #164B85);
  color: #EAF2FE;
  border-radius: 22px;
  padding: 32px 28px;
  height: 100%;
  box-shadow: var(--mk-shadow-hover);
}

.schedule-aside h3 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 10px;
}

.schedule-aside p {
  color: #C4D5EA;
}

.schedule-note-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

.schedule-note-list li {
  position: relative;
  padding: 8px 0 8px 24px;
  color: #E5EEFA;
  font-size: 15px;
}

.schedule-note-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--mk-accent);
  font-weight: 700;
}

/* ---- Highlights / stats --- */
.section-highlights {
  background: #fff;
  border-top: 1px solid var(--mk-primary-line);
  border-bottom: 1px solid var(--mk-primary-line);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 8px 0;
}

.stat-card {
  background: var(--mk-bg-page);
  border: 1px solid var(--mk-primary-line);
  border-radius: 20px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all .2s ease;
}

.stat-card:hover {
  border-color: var(--mk-primary);
  transform: translateY(-4px);
  box-shadow: var(--mk-shadow);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--mk-primary-weak);
  color: var(--mk-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 800;
}

.stat-card:nth-child(2) .stat-icon {
  background: var(--mk-accent-weak);
  color: var(--mk-accent-dark);
}

.stat-card:nth-child(3) .stat-icon {
  background: #FFF5DF;
  color: #C58A00;
}

.stat-card:nth-child(4) .stat-icon {
  background: #E8F2FF;
  color: #2266B8;
}

.stat-num {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--mk-dark);
  letter-spacing: -1px;
}

.stat-label {
  font-weight: 700;
  color: var(--mk-dark);
  margin-bottom: 2px;
}

.stat-desc {
  font-size: 14px;
  color: var(--mk-muted);
  margin: 0;
}

/* ---- Ticket table section ---- */
.section-tickets {
  background: var(--mk-bg-page);
}

.table-shell {
  border: 1px solid var(--mk-primary-line);
  border-radius: 20px;
  overflow: hidden;
  overflow-x: auto;
  background: #fff;
  box-shadow: var(--mk-shadow);
}

.ticket-table {
  width: 100%;
  min-width: 840px;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
}

.ticket-table th,
.ticket-table td {
  padding: 18px 18px;
  vertical-align: middle;
  border-bottom: 1px solid var(--mk-primary-line);
  text-align: left;
  font-size: 15px;
}

.ticket-table thead th {
  background: var(--mk-primary-weak);
  color: var(--mk-dark);
  font-size: 16px;
  font-weight: 700;
}

.ticket-table thead .vip-head {
  background: var(--mk-dark);
  color: #fff;
}

.ticket-table tbody tr:last-child td {
  border-bottom: 0;
}

.ticket-table tr:last-child td:first-child {
  border-bottom-left-radius: 20px;
}

.ticket-table tr:last-child td:last-child {
  border-bottom-right-radius: 20px;
}

.ticket-table .feature-label {
  color: var(--mk-dark);
  font-weight: 600;
  background: #FAFCFE;
}

.check {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--mk-accent-weak);
  color: var(--mk-accent-dark);
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}

.minus {
  color: #C0CFDF;
  font-size: 18px;
}

.ticket-tier-name {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--mk-dark);
}

.ticket-tier-sub {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--mk-muted);
  margin-top: 2px;
}

.ticket-note {
  margin-top: 18px;
  color: var(--mk-muted);
  font-size: 14px;
  border-left: 3px solid var(--mk-accent);
  background: var(--mk-accent-weak);
  border-radius: 0 12px 12px 0;
  padding: 12px 18px;
}

/* ---- Register CTA ------- */
.register-wrap {
  position: relative;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, .95), rgba(239, 246, 254, .92)),
    url('/assets/images/backpic/back-2.png') center / cover no-repeat;
  border-top: 1px solid var(--mk-primary-line);
  border-bottom: 1px solid var(--mk-primary-line);
}

.steps-list {
  list-style: none;
  margin: 26px 0 20px;
  padding: 0;
}

.steps-list li {
  display: flex;
  gap: 18px;
  margin-bottom: 20px;
}

.step-num {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--mk-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 8px 16px rgba(17, 118, 232, .22);
}

.steps-list li:nth-child(2) .step-num {
  background: var(--mk-accent);
  box-shadow: 0 8px 16px rgba(14, 169, 140, .2);
}

.steps-list li:nth-child(3) .step-num {
  background: #0B2447;
  box-shadow: 0 8px 16px rgba(11, 36, 71, .18);
}

.steps-list strong {
  display: block;
  color: var(--mk-dark);
  font-size: 17px;
}

.steps-list p {
  margin: 4px 0 0;
  color: var(--mk-muted);
  font-size: 15px;
  line-height: 1.6;
}

.form-card {
  background: #fff;
  border: 1px solid var(--mk-primary-line);
  border-radius: 22px;
  padding: 30px;
  box-shadow: var(--mk-shadow-hover);
}

.form-card h3 {
  font-size: 22px;
  margin-bottom: 6px;
}

.form-card .sub {
  color: var(--mk-muted);
  font-size: 14px;
  margin-bottom: 20px;
}

.form-label {
  font-weight: 600;
  color: var(--mk-dark);
  margin-bottom: 6px;
}

.form-control,
.form-select {
  min-height: 48px;
  border-radius: 11px;
  border: 1px solid #C4D8EE;
  background: #F8FBFE;
  color: var(--mk-dark);
  padding: 10px 14px;
  font-size: 15px;
}

.form-control:focus,
.form-select:focus {
  background: #fff;
  border-color: var(--mk-primary);
  box-shadow: 0 0 0 .25rem rgba(17, 118, 232, .16);
}

textarea.form-control {
  min-height: 88px;
  resize: vertical;
}

.code-box {
  display: inline-flex;
  width: 100%;
  height: 48px;
  align-items: center;
  justify-content: center;
  background: var(--mk-primary-weak);
  border: 1px dashed var(--mk-primary-line);
  border-radius: 11px;
  color: var(--mk-primary);
  font-family: Inter, Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 5px;
  user-select: none;
}

.form-feedback {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  display: none;
}

.form-feedback.success {
  display: block;
  background: var(--mk-accent-weak);
  color: var(--mk-accent-dark);
}

.security-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  color: var(--mk-muted);
  font-size: 14px;
}

.security-tip::before {
  content: "🔒";
  font-size: 15px;
}

/* ---- FAQ ---- */
.section-faq {
  background: #fff;
  border-bottom: 1px solid var(--mk-primary-line);
}

.accordion {
  --bs-accordion-border-width: 0;
}

.accordion-item {
  border: 1px solid var(--mk-primary-line);
  margin-bottom: 12px;
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--mk-surface);
  box-shadow: var(--mk-shadow);
}

.accordion-button {
  font-size: 16px;
  font-weight: 600;
  color: var(--mk-dark);
  padding: 18px 20px;
  background: #fff;
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background: var(--mk-primary-weak);
  color: var(--mk-primary);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231176E8'%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");
  transition: transform .2s ease;
}

.accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}

.accordion-body {
  color: var(--mk-body);
  padding: 16px 22px 22px;
  line-height: 1.8;
  border-top: 1px dashed var(--mk-primary-line);
}

.faq-bottom {
  text-align: center;
  margin-top: 28px;
  color: var(--mk-muted);
  font-size: 15px;
}

.faq-bottom a {
  font-weight: 600;
}

/* ---- Footer --------- */
.site-footer {
  background: #081E36;
  color: #B8CBE0;
  padding: 62px 0 0;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  margin-bottom: 14px;
}

.footer-brand:hover {
  color: #fff;
}

.footer-brand .brand-mark {
  background: linear-gradient(145deg, #FFF, #DCECFF);
  color: var(--mk-primary);
}

.footer-brand .brand-name {
  color: #fff;
  font-size: 19px;
}

.footer-desc {
  font-size: 15px;
  line-height: 1.9;
  color: #A9C2DC;
  max-width: 480px;
  margin: 12px 0 0;
}

.footer-title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li + li {
  margin-top: 10px;
}

.footer-links a {
  color: #A9C2DC;
  font-size: 15px;
}

.footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 15px;
  color: #A9C2DC;
  line-height: 2;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: 48px;
  padding: 18px 0 22px;
  font-size: 13px;
  color: #7E9BB8;
  text-align: center;
}

.footer-bottom span {
  margin: 0 8px;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
  .page-section {
    padding: 70px 0;
  }
  .hero-row {
    padding: 52px 0 40px;
    min-height: auto;
  }
  .hero-card {
    margin-top: 24px;
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-title {
    font-size: 42px;
  }
  .top-actions .phone-link,
  .top-actions .subtle-link {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .page-section {
    padding: 56px 0;
  }
  .hero-info-strip-inner {
    padding: 12px 0;
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-title {
    font-size: 34px;
  }
  .hero-lead {
    font-size: 16px;
  }
  .section-head h2 {
    font-size: 28px;
  }
  .timeline {
    padding-left: 32px;
  }
  .timeline-item::before {
    left: -31px;
  }
  .latest-main-card .main-body {
    padding: 18px;
  }
  .latest-list {
    padding: 10px 6px;
  }
  .stat-card {
    padding: 20px 18px;
  }
  .form-card {
    padding: 20px 18px;
  }
  .register-wrap {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .footer-title {
    margin-top: 12px;
  }
  .schedule-aside {
    margin-top: 24px;
  }
  .footer-bottom {
    flex-direction: column;
    line-height: 1.8;
  }
}

@media (max-width: 575.98px) {
  .brand-caption {
    display: none;
  }
  .brand-name {
    font-size: 17px;
  }
  .top-bar-inner {
    min-height: 58px;
  }
  .stat-grid {
    grid-template-columns: 1fr;
  }
  .ticket-note {
    font-size: 13px;
  }
  .hero-actions .btn {
    width: 100%;
    margin-right: 0;
  }
  .hero-row {
    padding-top: 36px;
  }
  .latest-list-item {
    flex-direction: column;
    gap: 10px;
  }
  .latest-list-date {
    min-width: 82px;
  }
  .section-more {
    font-size: 14px;
  }
  .footer-bottom {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* roulang page: article */
:root{
--mk-primary:#0C66D9;
--mk-primary-strong:#084EAF;
--mk-primary-soft:#E8F2FD;
--mk-primary-line:#C8DCEE;
--mk-bg:#F3F8FC;
--mk-surface:#FFFFFF;
--mk-dark:#0A2540;
--mk-body:#3C516B;
--mk-muted:#718A9F;
--mk-accent:#0EA98C;
--mk-aux:#EA9A2A;
--mk-border:#DCE8F2;
--radius-card:16px;
--radius-panel:12px;
--radius-btn:10px;
--shadow-1:0 8px 24px rgba(8,37,74,.08);
--shadow-2:0 16px 40px rgba(8,37,74,.14);
--container-w:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;
font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Helvetica Neue",Arial,sans-serif;
background:var(--mk-bg);
color:var(--mk-body);
font-size:16px;
line-height:1.75;
-webkit-font-smoothing:antialiased;
}
a{color:var(--mk-primary);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--mk-primary-strong)}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit}
.container{max-width:var(--container-w);padding-left:24px;padding-right:24px}
.mk-main{min-height:60vh;overflow:hidden}

/* buttons and focus */
.btn{border-radius:var(--radius-btn);font-weight:600;line-height:1.2;padding:.65rem 1.4rem;transition:all .2s ease}
.btn-primary{
background:var(--mk-primary);
border:1px solid var(--mk-primary);
color:#fff;
}
.btn-primary:hover,.btn-primary:focus{
background:var(--mk-primary-strong);
border-color:var(--mk-primary-strong);
color:#fff;
box-shadow:0 8px 18px rgba(12,102,217,.25);
transform:translateY(-1px);
}
.btn-outline{
background:transparent;
border:1px solid var(--mk-primary);
color:var(--mk-primary);
}
.btn-outline:hover,.btn-outline:focus{
background:var(--mk-primary-soft);
color:var(--mk-primary-strong);
border-color:var(--mk-primary-strong);
}
.btn-light-outline{
background:transparent;
border:1px solid rgba(255,255,255,.65);
color:#fff;
}
.btn-light-outline:hover{
background:#fff;
border-color:#fff;
color:var(--mk-dark);
}
.btn-login{padding:.5rem 1.1rem;font-size:.9rem;border-radius:999px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid rgba(12,102,217,.25);outline-offset:2px}

/* header half */
.mk-header{position:sticky;top:0;z-index:1030;background:var(--mk-surface);box-shadow:0 1px 12px rgba(12,44,88,.06)}
.top-bar{background:var(--mk-surface)}
.top-bar-inner{
height:64px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
.brand-logo{
display:inline-flex;
align-items:center;
gap:9px;
font-weight:800;
letter-spacing:.02em;
color:var(--mk-dark);
}
.brand-mark{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:38px;
height:38px;
padding:0 5px;
border-radius:10px;
background:linear-gradient(135deg,var(--mk-primary) 0%,#1E73E5 60%,#0EA4E0 100%);
color:#fff;
font-size:.92rem;
font-family:Inter,Arial,Helvetica,sans-serif;
box-shadow:0 5px 12px rgba(12,102,217,.22);
}
.brand-name{font-size:1.12rem;line-height:1.2;white-space:nowrap}
.brand-logo:hover{color:var(--mk-dark)}
.top-actions{display:flex;align-items:center;gap:14px}
.subtle-link{color:var(--mk-body);font-size:.92rem;font-weight:600;padding:.35rem .2rem;border-bottom:2px solid transparent}
.subtle-link:hover{color:var(--mk-primary);border-bottom-color:var(--mk-primary)}

.channel-bar{
border-top:1px solid var(--mk-border);
background:rgba(255,255,255,.96);
}
.channel-inner{
height:54px;
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
}
.desktop-nav{display:flex;align-items:center;gap:6px}
.nav-channel{
display:inline-block;
padding:.45rem 1.05rem;
margin-right:2px;
border-radius:999px;
color:var(--mk-body);
font-weight:600;
font-size:.95rem;
line-height:1.2;
transition:all .2s ease;
}
.nav-channel:hover{
background:var(--mk-primary-soft);
color:var(--mk-dark);
}
.nav-channel.active{
background:var(--mk-primary);
color:#fff;
box-shadow:0 6px 14px rgba(12,102,217,.18);
}
.channel-note{display:inline-flex;align-items:center;gap:6px;color:var(--mk-muted);font-size:.84rem}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--mk-accent);box-shadow:0 0 0 4px rgba(14,169,140,.15)}

.navbar-toggler{border:0;padding:.2rem .3rem;display:inline-flex;align-items:center;gap:5px}
.navbar-toggler:focus{box-shadow:none}
.navbar-toggler .navbar-toggler-icon{width:20px;height:18px;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(10,37,64,.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e")}
.toggle-text{font-size:.84rem;font-weight:600;color:var(--mk-dark)}

/* offcanvas */
.offcanvas{background:var(--mk-bg)}
.offcanvas-header{padding:1rem 1.3rem;border-bottom:1px solid var(--mk-border)}
.mobile-nav-link{
display:block;
padding:.9rem .5rem;
font-size:1.02rem;
font-weight:600;
color:var(--mk-body);
border-bottom:1px solid var(--mk-border);
}
.mobile-nav-link:hover{color:var(--mk-primary);padding-left:.8rem}
.mobile-nav-link.active{color:var(--mk-primary)}
.offcanvas-note{color:var(--mk-muted);font-size:.88rem;margin-top:1.5rem;line-height:1.8}

/* article hero banner */
.article-hero{
position:relative;
background:
linear-gradient(105deg,rgba(4,24,48,.92) 0%,rgba(10,55,108,.82) 46%,rgba(12,102,217,.45) 100%),
url('/assets/images/backpic/back-2.png') center/cover no-repeat,
#0A2540;
color:#fff;
padding:96px 0 88px;
}
.article-hero::after{
content:"";
position:absolute;
left:0;right:0;bottom:0;
height:56px;
background:linear-gradient(to top,var(--mk-bg),transparent);
}
.article-hero .container{position:relative;z-index:2}
.breadcrumb-line{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px;
color:rgba(255,255,255,.7);
font-size:.86rem;
margin-bottom:26px;
}
.breadcrumb-line a{color:rgba(255,255,255,.86)}
.breadcrumb-line a:hover{color:#fff}
.breadcrumb-line .divider{opacity:.55}
.breadcrumb-line .current{
color:#fff;
font-weight:500;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:420px;
display:inline-block;
}
.hero-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:42px;
}
.article-title-box{flex:1 1 auto;min-width:0}
.hero-kicker{
display:inline-flex;
align-items:center;
gap:7px;
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.28);
color:#fff;
font-size:.8rem;
font-weight:600;
padding:.3rem .85rem;
border-radius:999px;
margin-bottom:18px;
letter-spacing:.03em;
}
.hero-kicker .dot{
width:6px;height:6px;border-radius:50%;
background:#69D9F2;
}
.article-title{color:#fff;font-size:2.35rem;line-height:1.28;font-weight:800;margin:0 0 25px;max-width:860px}
.article-meta-info{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:13px 20px;
color:rgba(255,255,255,.85);
font-size:.86rem;
}
.article-meta-info .item{display:inline-flex;align-items:center;gap:6px}
.article-meta-info .mark{
display:inline-flex;
align-items:center;
gap:5px;
background:rgba(255,255,255,.15);
padding:.2rem .7rem;
border-radius:999px;
font-weight:600;
}
.hero-quicklink{
flex:0 0 270px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.2);
border-radius:18px;
padding:22px;
backdrop-filter:blur(6px);
}
.hero-quicklink-title{color:#fff;font-size:1rem;font-weight:700;margin-bottom:7px}
.hero-quicklink p{color:rgba(255,255,255,.78);font-size:.8rem;line-height:1.7;margin-bottom:16px}
.hero-quicklink a.btn{padding:.5rem .8rem;font-size:.85rem;border-radius:9px;width:100%}
.hero-quicklink .link-line a{color:#BFE0FF;font-size:.83rem;border-bottom:1px solid rgba(191,224,255,.4)}
.hero-quicklink .link-line a:hover{color:#fff;border-color:#fff}

/* article body */
.article-content-wrap{
position:relative;
z-index:3;
margin-top:-42px;
padding-bottom:70px;
}
.article-main-col{max-width:868px;margin:0 auto}
.article-panel{
background:var(--mk-surface);
border:1px solid var(--mk-border);
border-radius:20px;
box-shadow:var(--shadow-1);
padding:48px 56px;
margin-bottom:36px;
}
.article-badge{
display:inline-flex;
align-items:center;
gap:6px;
background:var(--mk-primary-soft);
color:var(--mk-primary);
border-radius:999px;
font-weight:600;
font-size:.8rem;
padding:.25rem .8rem;
margin-bottom:22px;
}
.article-content-heading h1{
font-size:1.5rem;
font-weight:800;
line-height:1.5;
margin:0 0 10px;
color:var(--mk-dark);
}
.article-meta-two{
display:flex;
flex-wrap:wrap;
gap:9px 18px;
align-items:center;
color:var(--mk-muted);
font-size:.84rem;
}
.article-meta-two .sep{color:var(--mk-border)}
.article-format-tag{
background:#F0F4F9;
border-radius:7px;
padding:0 .5rem;
color:var(--mk-body);
font-size:.76rem;
font-weight:600;
}
.cover-photo{
position:relative;
border-radius:16px;
overflow:hidden;
margin:0 0 34px;
box-shadow:0 18px 34px rgba(8,37,70,.08);
}
.cover-photo img{width:100%;object-fit:cover;aspect-ratio:16/7.6}
.cover-tag{
position:absolute;
left:16px;bottom:14px;
background:rgba(255,255,255,.88);
backdrop-filter:blur(4px);
color:var(--mk-dark);
font-size:.78rem;
font-weight:600;
padding:.28rem .8rem;
border-radius:999px;
}
.article-content p{line-height:2;color:#2E4258;margin-bottom:1.35rem}
.article-content h2{
font-size:1.52rem;
color:var(--mk-dark);
font-weight:800;
margin:2.4rem 0 1rem;
line-height:1.45;
}
.article-content h3{
font-size:1.16rem;
color:var(--mk-dark);
font-weight:700;
margin:1.9rem 0 .8rem;
}
.article-content ul,.article-content ol{margin:1.2rem 0 1.5rem;padding-left:1.45rem}
.article-content li{margin:.45rem 0}
.article-content a:not(.article-cover-link){color:var(--mk-primary);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#A9CBF0}
.article-content blockquote{
background:var(--mk-primary-soft);
border-left:4px solid var(--mk-primary);
border-radius:10px;
padding:1.2rem 1.6rem;
color:#233850;
margin:1.8rem 0;
font-style:normal;
line-height:1.9;
}
.article-content img{
border-radius:14px;
margin:1.4rem 0;
height:auto;
}
.article-content figure{background:#fff}
.article-content figure figcaption{color:var(--mk-muted);font-size:.8rem;text-align:center;padding:.8rem 0 0;margin-top:-.9rem}
.article-content table{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:12px;
overflow:hidden;
margin:1.5rem 0;
font-size:.9rem;
}
.article-content table th{
background:var(--mk-primary-soft);
color:var(--mk-dark);
font-weight:700;
padding:.8rem 1rem;
text-align:left;
}
.article-content table td{border-top:1px solid var(--mk-border);padding:.8rem 1rem;color:#2E4258;background:#fff}
.article-content pre{
background:#0B2447;
color:#E8F1FD;
padding:1.2rem 1.4rem;
border-radius:12px;
overflow-x:auto;
font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
font-size:.87rem;
margin:1.4rem 0;
}
.article-content code{background:#E2EDF8;color:#0B4EA5;padding:.2rem .45rem;border-radius:6px;font-size:.88em}
.article-content hr{border:0;border-top:2px dashed var(--mk-border);margin:2.2rem 0;opacity:1}

/* tag zone */
.tag-zone{
border-top:1px solid var(--mk-border);
margin-top:2rem;
padding-top:1.6rem;
}
.tag-zone-label{font-size:.85rem;font-weight:700;color:var(--mk-dark);margin-bottom:.9rem}
.topic-tags{display:flex;flex-wrap:wrap;gap:8px}
.tag-chip{
display:inline-flex;
align-items:center;
background:#F3F7FB;
border:1px solid var(--mk-border);
color:var(--mk-body);
font-size:.8rem;
font-weight:500;
padding:.28rem .8rem;
border-radius:999px;
transition:all .2s ease;
}
.tag-chip:hover{
background:var(--mk-primary-soft);
color:var(--mk-primary);
border-color:var(--mk-primary);
}
.article-bottom-nav{
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:space-between;
align-items:center;
margin-top:28px;
padding-top:22px;
border-top:1px solid var(--mk-border);
}
.return-btns{display:flex;flex-wrap:wrap;gap:10px}
.return-btns .btn{padding:.5rem .9rem;font-size:.85rem}

/* related */
.related-wrap{padding:20px 0 55px}
.section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
margin:0 0 30px;
}
.section-title{color:var(--mk-dark);font-size:1.75rem;font-weight:800;margin:0;line-height:1.4}
.section-title-line{width:58px;height:4px;background:var(--mk-primary);border-radius:99px;margin-top:12px}
.section-more{
font-size:.87rem;
font-weight:600;
color:var(--mk-muted);
white-space:nowrap;
}
.section-more em{font-style:normal;margin-left:5px;transition:transform .2s ease}
.section-more:hover{color:var(--mk-primary)}
.section-more:hover em{display:inline-block;transform:translateX(4px)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.article-card{
background:#fff;
border:1px solid var(--mk-border);
border-radius:var(--radius-card);
overflow:hidden;
height:100%;
display:flex;
flex-direction:column;
box-shadow:0 4px 12px rgba(10,40,80,.04);
transition:all .25s ease;
}
.article-card:hover{
transform:translateY(-6px);
box-shadow:var(--shadow-2);
border-color:#BBD3E9;
}
.card-cover{
position:relative;
display:block;
overflow:hidden;
aspect-ratio:16/9.5;
}
.card-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.article-card:hover .card-cover img{transform:scale(1.06)}
.cover-badge{
position:absolute;
left:12px;top:12px;
background:rgba(10,37,64,.72);
color:#fff;
font-size:.72rem;
font-weight:600;
padding:.22rem .7rem;
border-radius:999px;
backdrop-filter:blur(4px);
}
.card-body{
padding:1.15rem 1.25rem 1.3rem;
display:flex;
flex-direction:column;
flex:1;
}
.card-title{
font-size:1.05rem;
font-weight:700;
line-height:1.6;
color:var(--mk-dark);
margin:0 0 .6rem;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:3.4rem;
}
.card-title a{color:var(--mk-dark)}
.card-title a:hover{color:var(--mk-primary)}
.card-excerpt{
color:var(--mk-muted);
font-size:.82rem;
line-height:1.7;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.card-meta{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:1rem;
color:var(--mk-muted);
font-size:.77rem;
}
.card-tag{color:var(--mk-primary);font-weight:600}
.card-next a{color:var(--mk-muted)}
.card-next a:hover{color:var(--mk-primary)}

/* CTA band */
.cta-band{
position:relative;
border-radius:20px;
overflow:hidden;
color:#fff;
background:
linear-gradient(105deg,rgba(4,22,46,.93) 0%,rgba(12,55,110,.88) 60%,rgba(18,130,203,.72) 100%),
url('/assets/images/backpic/back-1.png') center/cover;
padding:40px 42px;
margin:0 auto 68px;
box-shadow:0 30px 60px rgba(6,31,70,.2);
}
.cta-band::after{content:"";position:absolute;inset:auto -10% -55% 40%;width:360px;height:210px;background:radial-gradient(closest-side,rgba(62,190,249,.3),transparent);border-radius:50%;pointer-events:none}
.cta-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;position:relative;z-index:2;gap:24px}
.cta-title{font-size:1.35rem;font-weight:800;margin:0 0 8px;color:#fff;line-height:1.4}
.cta-text{max-width:580px;color:rgba(255,255,255,.8);font-size:.92rem;line-height:1.9}
.cta-action{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.cta-action .btn-primary{background:#FFD27A;border-color:#FFD27A;color:#17303F}
.cta-action .btn-primary:hover{background:#FFCF6F;border-color:#FFCF6F;color:#0A2540}

/* article missing */
.empty-wrap{
display:flex;
min-height:62vh;
align-items:center;
justify-content:center;
text-align:center;
padding:80px 20px;
}
.empty-box{
background:#fff;
border:1px solid var(--mk-border);
border-radius:22px;
box-shadow:var(--shadow-1);
max-width:560px;
width:100%;
padding:54px 38px;
}
.empty-icon{
width:72px;
height:72px;
margin:0 auto 22px;
border-radius:50%;
background:var(--mk-primary-soft);
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
color:var(--mk-primary);
font-weight:600;
}
.empty-box h1{font-size:1.45rem;font-weight:800;color:var(--mk-dark);margin:0 0 12px}
.empty-box p{color:var(--mk-muted);margin-bottom:26px}

/* footer */
.site-footer{
background:#081E36;
color:#A9BFD6;
font-size:.9rem;
line-height:1.8;
}
.site-footer .container{padding-top:64px;padding-bottom:30px}
.footer-brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:800;font-size:1.12rem;margin-bottom:18px}
.footer-brand:hover{color:#fff}
.footer-desc{max-width:440px;color:#A9BFD6;font-size:.88rem}
.footer-title{
color:#fff;
font-weight:600;
font-size:.96rem;
margin:4px 0 16px;
}
.footer-links,.footer-contact{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:10px}
.footer-links a{color:#A9BFD6;font-size:.88rem}
.footer-links a:hover{color:#ffffff;padding-left:3px}
.footer-contact li{margin-bottom:10px;font-size:.86rem}
.footer-contact li:last-child{margin-bottom:0}
.footer-bottom{
border-top:1px solid #18334E;
margin-top:48px;
padding-top:25px;
display:flex;
flex-wrap:wrap;
gap:8px 26px;
justify-content:space-between;
color:#7E9BB3;
font-size:.79rem;
}
.site-footer a{transition:color .2s ease,padding .2s ease}

@media (max-width:1024px){
.container{padding-left:20px;padding-right:20px}
.top-bar-inner,.channel-inner{padding-left:20px;padding-right:20px}
.article-hero{padding:76px 0 68px}
.hero-heading{gap:36px}
.hero-quicklink{display:none}
.article-panel{padding:42px 44px}
.related-grid{grid-template-columns:repeat(3,1fr);gap:18px}
.cta-band{padding:34px 30px}
}
@media (max-width:768px){
.top-bar-inner{height:60px}
.brand-name{font-size:1.02rem}
.brand-mark{width:35px;height:35px;font-size:.82rem}
.channel-inner{height:52px}
.article-hero{padding:58px 0 50px}
.breadcrumb-line{font-size:.8rem}
.article-title{font-size:1.7rem;line-height:1.4}
.article-content-wrap{margin-top:-28px;padding-bottom:45px}
.article-panel{padding:30px 24px;border-radius:16px}
.cover-photo{margin-bottom:26px}
.cover-photo img{aspect-ratio:16/8.6}
.article-content p{font-size:.96rem}
.article-content h2{font-size:1.25rem}
.article-content blockquote{padding:1.05rem 1.1rem}
.related-grid{grid-template-columns:repeat(2,1fr);gap:16px}
.cta-inner{flex-direction:column;align-items:flex-start}
.cta-band{border-radius:16px}
.site-footer .container{padding-top:52px}
.footer-bottom{flex-direction:column}
}
@media (max-width:560px){
.container{padding-left:16px;padding-right:16px}
.top-bar-inner,.channel-inner{padding-left:16px;padding-right:16px}
.brand-name{font-size:.94rem}
.article-title{font-size:1.42rem}
.article-panel{padding:26px 18px}
.hero-kicker{font-size:.74rem}
.article-meta-info{gap:8px 14px}
.article-meta-info .item{font-size:.76rem}
.related-grid{grid-template-columns:1fr 1fr;gap:14px}
.relation-cards-panel .card-title{font-size:.94rem}
.card-excerpt{display:none}
.article-bottom-nav{flex-direction:column;align-items:flex-start}
.cta-band{padding:28px 20px}
.cta-action .btn{width:100%;margin-left:0}
.breadcrumb-line .current{max-width:180px}
.section-title{font-size:1.4rem}
}
@media (max-width:430px){
.brand-name{font-size:.86rem}
.top-actions .subtle-link{display:none}
.related-grid{grid-template-columns:1fr;gap:16px}
.card-cover{aspect-ratio:16/8.5}
}
@media print{
.mk-header,.site-footer,.related-wrap,.cta-band{display:none!important}
.article-panel{border:0;box-shadow:none;padding:0}
}

/* roulang page: category1 */
:root {
            --mk-primary: #0C66D9;
            --mk-primary-deep: #0A55B4;
            --mk-primary-weak: #EFF6FE;
            --mk-primary-line: #D9E6F5;
            --mk-dark: #0B2447;
            --mk-body: #334E69;
            --mk-muted: #6B859E;
            --mk-bg-page: #F6FAFF;
            --mk-surface: #FFFFFF;
            --mk-accent: #0EA98C;
            --mk-aux-orange: #F27B35;
            --radius-xl: 22px;
            --radius-lg: 16px;
            --radius-md: 12px;
            --radius-sm: 10px;
            --shadow-card: 0 6px 18px rgba(14, 47, 91, 0.06);
            --shadow-hover: 0 16px 34px rgba(14, 47, 91, 0.12);
            --transition: 0.2s ease;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
            background: var(--mk-bg-page);
            color: var(--mk-body);
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        img {
            max-width: 100%;
            display: block;
        }

        a {
            color: var(--mk-primary);
            text-decoration: none;
            transition: color var(--transition);
        }

        a:hover {
            color: var(--mk-primary-deep);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: var(--mk-dark);
            line-height: 1.25;
            font-weight: 700;
            margin-bottom: 0.75rem;
        }

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

        .container {
            max-width: 1320px;
        }

        .mk-header {
            position: relative;
            z-index: 1030;
            background: var(--mk-surface);
        }

        .top-bar {
            background: #FFFFFF;
            border-bottom: 1px solid #EAF2FA;
            position: relative;
        }

        .top-bar-inner {
            min-height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding-top: 6px;
            padding-bottom: 6px;
        }

        .brand-logo {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }

        .brand-logo .brand-mark,
        .footer-brand .brand-mark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            background: var(--mk-primary);
            color: #FFFFFF;
            border-radius: 10px;
            font-weight: 900;
            font-size: 17px;
            letter-spacing: 0.02em;
            font-family: "Arial", "Helvetica Neue", sans-serif;
            box-shadow: 0 6px 14px rgba(12, 102, 217, 0.22);
        }

        .brand-logo .brand-name {
            font-size: 19px;
            font-weight: 800;
            color: var(--mk-dark);
            letter-spacing: 0.02em;
            white-space: nowrap;
        }

        .brand-logo:hover .brand-mark {
            background: var(--mk-primary-deep);
        }

        .top-actions {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .subtle-link {
            color: var(--mk-muted);
            font-size: 14px;
            font-weight: 600;
            padding: 8px 2px;
            border-bottom: 2px solid transparent;
        }

        .subtle-link:hover {
            color: var(--mk-primary);
            border-bottom-color: var(--mk-primary);
        }

        .btn {
            border-radius: var(--radius-sm);
            font-size: 15px;
            font-weight: 600;
            padding: 10px 24px;
            border: 1px solid transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all var(--transition);
            min-height: 44px;
            line-height: 1.2;
        }

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

        .btn-primary:hover {
            background: var(--mk-primary-deep);
            border-color: var(--mk-primary-deep);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(12, 102, 217, 0.28);
        }

        .btn-outline-primary {
            background: #fff;
            border-color: #B8D1EC;
            color: var(--mk-primary);
        }

        .btn-outline-primary:hover {
            background: var(--mk-primary-weak);
            border-color: var(--mk-primary);
            color: var(--mk-primary-deep);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(12, 102, 217, 0.12);
        }

        .btn-light {
            background: #FFFFFF;
            border-color: #FFFFFF;
            color: var(--mk-dark);
        }

        .btn-light:hover {
            background: #F1F7FE;
            color: var(--mk-primary);
            transform: translateY(-2px);
        }

        .btn-login {
            min-height: 38px;
            padding: 0 18px;
            font-size: 14px;
            border-radius: 10px;
        }

        .channel-bar {
            background: rgba(255, 255, 255, 0.97);
            border-bottom: 1px solid #E6EFF8;
            backdrop-filter: blur(8px);
            position: relative;
            z-index: 1025;
        }

        .channel-inner {
            min-height: 54px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }

        .desktop-nav {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: nowrap;
        }

        .nav-channel {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
            padding: 0 18px;
            border-radius: 999px;
            font-size: 15px;
            font-weight: 600;
            color: var(--mk-body);
            transition: all var(--transition);
            white-space: nowrap;
            border: 1px solid transparent;
        }

        .nav-channel:hover {
            background: var(--mk-primary-weak);
            color: var(--mk-primary);
        }

        .nav-channel.active {
            background: var(--mk-primary);
            color: #FFFFFF;
            box-shadow: 0 8px 16px rgba(12, 102, 217, 0.22);
        }

        .nav-channel.active:hover {
            background: var(--mk-primary);
            color: #FFFFFF;
        }

        .channel-note {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--mk-muted);
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
        }

        .live-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--mk-accent);
            box-shadow: 0 0 0 4px rgba(14, 169, 140, 0.14);
            animation: pulse-dot 1.8s infinite;
        }

        @keyframes pulse-dot {
            0%,
            100% {
                box-shadow: 0 0 0 3px rgba(14, 169, 140, 0.14);
            }
            50% {
                box-shadow: 0 0 0 7px rgba(14, 169, 140, 0.06);
            }
        }

        .navbar-toggler {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 1px solid var(--mk-primary-line);
            border-radius: var(--radius-sm);
            background: #fff;
            color: var(--mk-dark);
            min-height: 40px;
        }

        .navbar-toggler:hover {
            background: var(--mk-primary-weak);
            border-color: var(--mk-primary);
        }

        .navbar-toggler-icon {
            width: 20px;
            height: 18px;
            position: relative;
            background-image: none;
        }

        .navbar-toggler-icon::before {
            content: "";
            position: absolute;
            left: 2px;
            top: 2px;
            width: 16px;
            height: 2px;
            background: var(--mk-dark);
            box-shadow: 0 6px 0 var(--mk-dark), 0 12px 0 var(--mk-dark);
            border-radius: 2px;
        }

        .toggle-text {
            font-size: 14px;
            font-weight: 600;
            color: var(--mk-dark);
        }

        .offcanvas {
            max-width: 330px;
            border-right: 1px solid var(--mk-primary-line);
            background: #FFFFFF;
        }

        .offcanvas-header {
            border-bottom: 1px solid #EDF3F9;
            padding: 20px 20px 16px;
        }

        .offcanvas-body {
            padding: 20px;
        }

        .mobile-nav-link {
            display: block;
            padding: 13px 16px;
            border-radius: var(--radius-sm);
            color: var(--mk-body);
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 8px;
            background: #FAFCFF;
            border: 1px solid transparent;
        }

        .mobile-nav-link:hover {
            background: var(--mk-primary-weak);
            color: var(--mk-primary);
        }

        .mobile-nav-link.active {
            background: var(--mk-primary);
            color: #FFFFFF;
        }

        .offcanvas-note {
            margin-top: 20px;
            padding: 16px;
            background: var(--mk-primary-weak);
            border-radius: var(--radius-md);
            color: var(--mk-muted);
            font-size: 14px;
            line-height: 1.7;
        }

        .category-hero {
            position: relative;
            padding: 58px 0 70px;
            background-color: #DCEBF9;
            background-image: linear-gradient(100deg, rgba(249, 252, 255, 0.98) 20%, rgba(238, 246, 255, 0.92) 55%, rgba(218, 235, 250, 0.72)), url('/assets/images/backpic/back-1.png');
            background-size: cover;
            background-position: center;
            border-bottom: 1px solid var(--mk-primary-line);
        }

        .category-hero::after {
            content: "";
            position: absolute;
            right: -90px;
            bottom: -80px;
            width: 330px;
            height: 330px;
            border-radius: 50%;
            border: 36px solid rgba(255, 255, 255, 0.45);
            pointer-events: none;
        }

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

        .breadcrumb-nav {
            margin-bottom: 28px;
        }

        .breadcrumb-nav .breadcrumb {
            margin-bottom: 0;
        }

        .breadcrumb-nav .breadcrumb-item {
            font-size: 14px;
            color: var(--mk-muted);
        }

        .breadcrumb-nav .breadcrumb-item a {
            color: var(--mk-muted);
            font-weight: 500;
        }

        .breadcrumb-nav .breadcrumb-item a:hover {
            color: var(--mk-primary);
        }

        .breadcrumb-nav .breadcrumb-item.active {
            color: var(--mk-dark);
            font-weight: 600;
        }

        .breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
            content: "›";
            color: #9AB5D0;
            font-weight: 400;
        }

        .hero-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid var(--mk-primary-line);
            border-radius: 999px;
            padding: 6px 14px;
            color: var(--mk-primary);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.04em;
            margin-bottom: 18px;
        }

        .category-h1 {
            font-size: clamp(32px, 4.4vw, 56px);
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--mk-dark);
            margin-bottom: 18px;
            line-height: 1.12;
        }

        .category-h1 span {
            color: var(--mk-primary);
        }

        .hero-lead {
            font-size: 17px;
            color: var(--mk-body);
            max-width: 610px;
            margin-bottom: 26px;
            line-height: 1.9;
        }

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

        .hero-panel {
            position: relative;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(217, 230, 245, 0.9);
            border-radius: var(--radius-xl);
            padding: 18px;
            box-shadow: var(--shadow-card);
            backdrop-filter: blur(10px);
        }

        .hero-panel-img {
            border-radius: var(--radius-lg);
            overflow: hidden;
            margin-bottom: 14px;
        }

        .hero-panel-img img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

        .panel-topline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
        }

        .panel-title {
            font-size: 15px;
            font-weight: 800;
            color: var(--mk-dark);
        }

        .panel-badge {
            display: inline-flex;
            align-items: center;
            background: var(--mk-accent);
            color: #fff;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            padding: 4px 10px;
        }

        .panel-list {
            margin-top: 4px;
        }

        .panel-list li {
            display: flex;
            gap: 8px;
            padding: 7px 0;
            font-size: 14px;
            color: var(--mk-body);
            border-bottom: 1px dashed #E4EEF8;
        }

        .panel-list li:last-child {
            border-bottom: 0;
        }

        .panel-icon {
            color: var(--mk-primary);
            font-weight: 700;
            flex-shrink: 0;
        }

        .panel-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 12px;
            font-size: 14px;
            font-weight: 700;
            color: var(--mk-primary);
        }

        .status-band {
            background: #FFFFFF;
            border-bottom: 1px solid var(--mk-primary-line);
            padding: 20px 0;
        }

        .status-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 22px;
        }

        .status-item {
            display: flex;
            align-items: flex-start;
            gap: 13px;
            padding: 12px 8px;
            border-left: 3px solid var(--mk-primary);
            background: linear-gradient(135deg, #FFFFFF, #F8FBFF);
            border-radius: 0 var(--radius-md) var(--radius-md) 0;
        }

        .status-item .num {
            font-size: 26px;
            font-weight: 900;
            color: var(--mk-primary);
            line-height: 1;
            margin-top: 2px;
            font-family: Arial, Helvetica, sans-serif;
        }

        .status-item strong {
            display: block;
            color: var(--mk-dark);
            font-size: 15px;
            margin-bottom: 2px;
        }

        .status-item p {
            margin: 0;
            font-size: 13px;
            color: var(--mk-muted);
        }

        .page-section {
            padding: 84px 0;
            position: relative;
        }

        .section-heading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 24px;
            margin-bottom: 38px;
        }

        .section-kicker {
            display: inline-block;
            color: var(--mk-primary);
            font-size: 14px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .section-heading h2 {
            font-size: clamp(25px, 3vw, 34px);
            margin-bottom: 0;
            letter-spacing: -0.01em;
        }

        .section-heading p {
            color: var(--mk-muted);
            margin: 10px 0 0;
            max-width: 640px;
        }

        .text-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-weight: 700;
            font-size: 15px;
            color: var(--mk-primary);
            white-space: nowrap;
        }

        .text-link:hover {
            color: var(--mk-primary-deep);
        }

        .text-link i {
            transition: transform var(--transition);
        }

        .text-link:hover i {
            transform: translateX(4px);
        }

        .feature-block {
            background: #FFFFFF;
            border-bottom: 1px solid var(--mk-primary-line);
            border-top: 1px solid var(--mk-primary-line);
        }

        .feature-grid {
            display: grid;
            grid-template-columns: 1.08fr 1fr;
            gap: 0;
            background: #FFFFFF;
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-card);
            border: 1px solid #E8F0F9;
        }

        .feature-media {
            position: relative;
            min-height: 360px;
            background: #D9E9F7;
            overflow: hidden;
        }

        .feature-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
        }

        .feature-media .img-label {
            position: absolute;
            left: 20px;
            bottom: 18px;
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(8px);
            color: var(--mk-dark);
            padding: 7px 14px;
            font-size: 13px;
            font-weight: 700;
            border-radius: 999px;
            box-shadow: 0 6px 16px rgba(14, 47, 91, 0.1);
        }

        .feature-info {
            padding: 42px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .feature-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 18px;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            min-height: 26px;
            padding: 0 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
        }

        .tag-fill {
            background: var(--mk-primary);
            color: #FFFFFF;
        }

        .tag-line {
            border: 1px solid var(--mk-primary-line);
            color: var(--mk-primary);
            background: var(--mk-primary-weak);
        }

        .feature-info h3 {
            font-size: 23px;
            line-height: 1.4;
            margin-bottom: 16px;
        }

        .feature-info p {
            color: var(--mk-body);
            line-height: 1.85;
            margin-bottom: 16px;
        }

        .check-list {
            margin-bottom: 22px;
        }

        .check-list li {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            padding: 5px 0;
            color: var(--mk-body);
            font-size: 15px;
        }

        .check-list i {
            color: var(--mk-accent);
            font-size: 16px;
            margin-top: 4px;
        }

        .feature-info .btn {
            align-self: flex-start;
            margin-top: 6px;
        }

        .content-zone {
            background: var(--mk-bg-page);
        }

        .channel-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 22px;
        }

        .channel-card {
            background: #FFFFFF;
            border: 1px solid #E8F0F9;
            border-radius: var(--radius-lg);
            padding: 28px 24px 24px;
            box-shadow: var(--shadow-card);
            transition: all var(--transition);
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .channel-card::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--mk-primary), var(--mk-accent));
            opacity: 0;
            transition: opacity var(--transition);
        }

        .channel-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-hover);
            border-color: var(--mk-primary-line);
        }

        .channel-card:hover::before {
            opacity: 1;
        }

        .channel-symbol {
            width: 46px;
            height: 46px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--mk-primary-weak);
            color: var(--mk-primary);
            border-radius: 14px;
            font-size: 18px;
            font-weight: 800;
            margin-bottom: 18px;
        }

        .channel-card h3 {
            font-size: 19px;
            margin-bottom: 10px;
        }

        .channel-card p {
            font-size: 14.5px;
            color: var(--mk-muted);
            line-height: 1.75;
            margin-bottom: 18px;
        }

        .card-foot {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            font-weight: 700;
            color: var(--mk-primary);
        }

        .channel-card:hover .card-foot i {
            transform: translateX(4px);
        }

        .card-foot i {
            transition: transform var(--transition);
        }

        .steps-section {
            background: #FFFFFF;
            border-top: 1px solid var(--mk-primary-line);
            border-bottom: 1px solid var(--mk-primary-line);
        }

        .step-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            counter-reset: step;
            position: relative;
        }

        .step-item {
            position: relative;
            background: #FFFFFF;
            border: 1px solid #E8F0F9;
            border-radius: var(--radius-lg);
            padding: 32px 28px 28px;
            transition: all var(--transition);
            box-shadow: 0 4px 12px rgba(14, 47, 91, 0.04);
        }

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

        .step-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            background: var(--mk-primary);
            color: #fff;
            font-weight: 800;
            font-size: 15px;
            border-radius: 999px;
            margin-bottom: 18px;
            box-shadow: 0 8px 18px rgba(12, 102, 217, 0.24);
        }

        .step-item h3 {
            font-size: 18px;
            margin-bottom: 8px;
        }

        .step-item p {
            color: var(--mk-muted);
            font-size: 14.5px;
            line-height: 1.8;
            margin: 0;
        }

        .step-arrow {
            display: none;
        }

        .step-tip {
            margin-top: 34px;
            background: var(--mk-primary-weak);
            border: 1px solid var(--mk-primary-line);
            border-radius: var(--radius-lg);
            padding: 20px 24px;
            color: var(--mk-body);
            font-size: 15px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .step-tip i {
            color: var(--mk-primary);
            font-size: 20px;
            margin-top: 2px;
        }

        .step-tip strong {
            color: var(--mk-dark);
        }

        .trust-zone {
            background: var(--mk-bg-page);
        }

        .trust-panel {
            background: #FFFFFF;
            border-radius: var(--radius-xl);
            border: 1px solid var(--mk-primary-line);
            padding: 34px;
            box-shadow: var(--shadow-card);
        }

        .trust-panel .lead-note {
            font-size: 20px;
            font-weight: 700;
            color: var(--mk-dark);
            line-height: 1.7;
            margin-bottom: 24px;
            border-left: 4px solid var(--mk-primary);
            padding-left: 20px;
        }

        .trust-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .trust-list li {
            background: #F8FBFE;
            border-radius: var(--radius-md);
            padding: 18px;
            border: 1px solid #EAF2FA;
        }

        .trust-list li strong {
            display: block;
            color: var(--mk-dark);
            font-size: 15px;
            margin-bottom: 6px;
        }

        .trust-list li span {
            color: var(--mk-muted);
            font-size: 13.5px;
            line-height: 1.7;
        }

        .faq-section {
            background: #FFFFFF;
            border-top: 1px solid var(--mk-primary-line);
            border-bottom: 1px solid var(--mk-primary-line);
        }

        .faq-layout {
            display: grid;
            grid-template-columns: 0.86fr 1.6fr;
            gap: 48px;
            align-items: start;
        }

        .faq-intro h2 {
            font-size: clamp(26px, 2.8vw, 34px);
            margin-bottom: 16px;
        }

        .faq-intro p {
            color: var(--mk-muted);
            margin-bottom: 24px;
        }

        .faq-contact {
            background: var(--mk-primary-weak);
            padding: 20px;
            border-radius: var(--radius-lg);
        }

        .faq-contact strong {
            font-size: 15px;
            color: var(--mk-dark);
            margin-bottom: 8px;
            display: block;
        }

        .faq-contact p {
            font-size: 14px;
            color: var(--mk-muted);
            margin: 0;
            line-height: 1.8;
        }

        .faq-list .accordion-item {
            border: 0;
            border-bottom: 1px solid var(--mk-primary-line);
            background: transparent;
        }

        .faq-list .accordion-button {
            border: 0;
            background: #FFFFFF;
            box-shadow: none;
            padding: 22px 20px 22px 4px;
            font-size: 16.5px;
            font-weight: 700;
            color: var(--mk-dark);
            transition: color var(--transition);
        }

        .faq-list .accordion-button:not(.collapsed) {
            background: #FFFFFF;
            color: var(--mk-primary);
            box-shadow: none;
        }

        .faq-list .accordion-button:focus {
            box-shadow: none;
            border-color: transparent;
        }

        .faq-list .accordion-button::after {
            background-image: none;
            content: "+";
            width: auto;
            height: auto;
            font-size: 26px;
            font-weight: 400;
            line-height: 1;
            color: var(--mk-muted);
            transform: none;
            margin-left: auto;
            font-family: Arial, sans-serif;
            transition: all var(--transition);
        }

        .faq-list .accordion-button:not(.collapsed)::after {
            content: "−";
            color: var(--mk-primary);
            font-weight: 700;
        }

        .faq-list .accordion-body {
            padding: 0 32px 24px 4px;
            color: var(--mk-body);
            line-height: 1.85;
            font-size: 15px;
        }

        .cta-section {
            padding: 72px 0;
            background: var(--mk-bg-page);
        }

        .cta-band {
            background: linear-gradient(120deg, #0B2F5E 0%, #0C66D9 100%);
            border-radius: var(--radius-xl);
            padding: 42px 48px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 36px;
            color: #FFFFFF;
            position: relative;
            overflow: hidden;
        }

        .cta-band::after {
            content: "";
            position: absolute;
            right: -70px;
            top: -70px;
            width: 230px;
            height: 230px;
            border: 44px solid rgba(255, 255, 255, 0.08);
            border-radius: 50%;
        }

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

        .cta-band .eyebrow {
            display: inline-flex;
            background: rgba(255, 255, 255, 0.16);
            border-radius: 999px;
            padding: 4px 12px;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 12px;
            color: #DCEBFF;
        }

        .cta-band h2 {
            color: #FFFFFF;
            font-size: clamp(22px, 2.8vw, 32px);
            margin-bottom: 10px;
        }

        .cta-band p {
            color: #D8E6F7;
            margin: 0;
            max-width: 560px;
            line-height: 1.8;
        }

        .cta-band .btn {
            flex-shrink: 0;
            position: relative;
            z-index: 3;
        }

        .site-footer {
            background: #081E36;
            color: #B9CBE0;
            padding: 60px 0 0;
            position: relative;
        }

        .site-footer::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(90deg, var(--mk-primary), #2D9BD6, var(--mk-accent));
        }

        .footer-brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 14px;
            color: #FFFFFF;
        }

        .footer-brand .brand-mark {
            background: #246FE0;
        }

        .footer-brand .brand-name {
            color: #FFFFFF;
            font-size: 20px;
            font-weight: 800;
            letter-spacing: 0.02em;
        }

        .footer-desc {
            max-width: 420px;
            color: #9FB6CD;
            font-size: 14px;
            line-height: 1.85;
            margin-bottom: 16px;
        }

        .footer-title {
            color: #FFFFFF;
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 16px;
            letter-spacing: 0.03em;
        }

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

        .footer-links a {
            color: #B9CBE0;
            font-size: 14px;
            transition: all var(--transition);
        }

        .footer-links a:hover {
            color: #82B7FF;
            padding-left: 4px;
        }

        .footer-contact li {
            color: #B9CBE0;
            font-size: 14px;
            line-height: 1.8;
            margin-bottom: 10px;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin-top: 44px;
            padding: 18px 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 8px 28px;
            color: #7894AE;
            font-size: 13px;
            text-align: center;
        }

        a:focus-visible,
        button:focus-visible,
        .accordion-button:focus-visible {
            outline: 3px solid rgba(12, 102, 217, 0.28);
            outline-offset: 3px;
        }

        @media (min-width: 1200px) {
            .step-item + .step-item {
                margin-top: 0;
            }
        }

        @media (max-width: 991.98px) {
            .section-heading {
                flex-direction: column;
                align-items: flex-start;
            }
            .section-heading .text-link {
                margin-top: -16px;
            }
            .feature-grid {
                grid-template-columns: 1fr;
            }
            .feature-media {
                height: 320px;
                min-height: 0;
            }
            .feature-media img {
                position: relative;
                height: 320px;
            }
            .channel-cards {
                grid-template-columns: repeat(2, 1fr);
            }
            .step-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }
            .trust-list {
                grid-template-columns: 1fr;
            }
            .faq-layout {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            .status-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 767.98px) {
            .top-bar-inner {
                min-height: 60px;
            }
            .brand-logo .brand-mark {
                width: 38px;
                height: 38px;
            }
            .brand-logo .brand-name {
                font-size: 16px;
            }
            .page-section {
                padding: 56px 0;
            }
            .category-hero {
                padding: 38px 0 48px;
            }
            .category-hero::after {
                display: none;
            }
            .hero-panel {
                margin-top: 12px;
            }
            .cta-band {
                flex-direction: column;
                align-items: flex-start;
                padding: 28px 24px;
            }
            .feature-info {
                padding: 28px 24px;
            }
            .channel-cards {
                grid-template-columns: 1fr;
            }
            .faq-list .accordion-button {
                padding-right: 16px;
                font-size: 15px;
            }
            .faq-list .accordion-body {
                padding-right: 16px;
            }
            .status-item {
                padding: 8px;
            }
            .status-item .num {
                min-width: 34px;
            }
            .cta-band h2 {
                font-size: 22px;
            }
        }

        @media (max-width: 480px) {
            .top-actions {
                gap: 8px;
            }
            .brand-logo .brand-mark {
                width: 36px;
                height: 36px;
                font-size: 15px;
            }
            .brand-logo .brand-name {
                font-size: 15px;
                letter-spacing: 0;
            }
            .btn-login {
                padding: 0 13px;
                font-size: 13px;
            }
            .category-h1 {
                font-size: 32px;
            }
            .hero-lead {
                font-size: 15.5px;
            }
            .hero-actions .btn {
                width: 100%;
            }
            .trust-panel {
                padding: 20px;
            }
            .step-grid {
                grid-template-columns: 1fr;
            }
            .channel-card {
                padding: 22px;
            }
            .panel-actions .btn {
                width: 100%;
            }
        }

/* roulang page: category2 */
:root {
  --mk-primary: #0e6bd8;
  --mk-primary-dark: #0a51a8;
  --mk-primary-weak: #eff6fe;
  --mk-primary-line: #d9e6f5;
  --mk-accent: #0ea98c;
  --mk-aux-orange: #e8862e;
  --mk-dark: #0b2447;
  --mk-body: #334e69;
  --mk-muted: #6b859e;
  --mk-bg-page: #f6faff;
  --mk-surface: #ffffff;
  --mk-ink-deep: #081e36;
  --mk-radius: 14px;
  --mk-radius-btn: 10px;
  --mk-shadow-sm: 0 6px 18px rgba(14, 47, 91, .06);
  --mk-shadow-md: 0 14px 32px rgba(14, 47, 91, .12);
  --mk-space-section: 96px;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Helvetica Neue", Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--mk-bg-page);
  color: var(--mk-body);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

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

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

a {
  color: var(--mk-primary);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

button, input, textarea, select {
  font: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(14, 107, 216, .28);
  outline-offset: 2px;
}

::selection {
  background: rgba(14, 107, 216, .18);
  color: var(--mk-dark);
}

.container {
  max-width: 1320px;
  padding-left: 24px;
  padding-right: 24px;
}

.btn {
  border-radius: var(--mk-radius-btn);
  font-size: 15px;
  font-weight: 600;
  padding: 12px 26px;
  letter-spacing: .02em;
  transition: all .2s ease;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mk-primary);
  --bs-btn-border-color: var(--mk-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mk-primary-dark);
  --bs-btn-hover-border-color: var(--mk-primary-dark);
  --bs-btn-focus-shadow-rgb: 14, 107, 216;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--mk-primary-dark);
  --bs-btn-active-border-color: var(--mk-primary-dark);
  box-shadow: 0 6px 16px rgba(14, 107, 216, .22);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(14, 107, 216, .28);
}

.btn-outline-mk {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .55);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, .12);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, .2);
  --bs-btn-active-border-color: #fff;
  border-radius: var(--mk-radius-btn);
  background: rgba(255, 255, 255, .04);
  padding-left: 24px;
  padding-right: 24px;
}

.btn-soft {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mk-primary);
  --bs-btn-border-color: var(--mk-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mk-primary-dark);
  --bs-btn-hover-border-color: var(--mk-primary-dark);
  border-radius: var(--mk-radius-btn);
  box-shadow: 0 10px 22px rgba(3, 17, 43, .28);
}

.btn-ghost-light {
  --bs-btn-color: rgba(255, 255, 255, .88);
  --bs-btn-border-color: rgba(255, 255, 255, .6);
  --bs-btn-hover-color: #0b2447;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  border-radius: var(--mk-radius-btn);
}

.btn-ghost-light:hover {
  transform: translateY(-2px);
}

.btn-line-primary {
  --bs-btn-color: var(--mk-primary);
  --bs-btn-border-color: #c5dcf5;
  --bs-btn-bg: #fff;
  --bs-btn-hover-color: var(--mk-primary-dark);
  --bs-btn-hover-border-color: var(--mk-primary);
  --bs-btn-hover-bg: var(--mk-primary-weak);
  border-radius: var(--mk-radius-btn);
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mk-dark);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(145deg, #0e6bd8, #0f8cec);
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .04em;
  box-shadow: 0 6px 14px rgba(14, 107, 216, .24);
  flex: 0 0 auto;
}

.brand-name {
  font-size: 21px;
  font-weight: 800;
  color: var(--mk-dark);
  letter-spacing: .01em;
}

.top-bar {
  background: #fff;
  border-bottom: 1px solid rgba(217, 230, 245, .9);
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: 18px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.subtle-link {
  color: var(--mk-body);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 0;
}

.subtle-link:hover {
  color: var(--mk-primary);
}

.btn-login {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 20px;
  font-size: 14px;
  border-radius: 10px;
}

.channel-bar {
  position: sticky;
  top: 0;
  z-index: 1025;
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--mk-primary-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.channel-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px 0;
}

.nav-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 4px 17px;
  border-radius: 999px;
  color: var(--mk-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
}

.nav-channel:hover {
  background: var(--mk-primary-weak);
  color: var(--mk-primary);
}

.nav-channel.active {
  background: var(--mk-primary);
  color: #fff;
  box-shadow: 0 6px 14px rgba(14, 107, 216, .24);
}

.channel-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mk-muted);
  letter-spacing: .02em;
}

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mk-accent);
  box-shadow: 0 0 0 0 rgba(14, 169, 140, .4);
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(14, 169, 140, .4); }
  70% { box-shadow: 0 0 0 8px rgba(14, 169, 140, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 169, 140, 0); }
}

.navbar-toggler {
  border: 1px solid var(--mk-primary-line);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: var(--mk-dark);
  font-size: 13px;
  font-weight: 600;
}

.navbar-toggler-icon {
  background-image: none;
  width: 16px;
  height: 12px;
  position: relative;
  border-top: 2px solid var(--mk-dark);
  border-bottom: 2px solid var(--mk-dark);
}

.offcanvas {
  --bs-offcanvas-width: 320px;
}

.offcanvas-header {
  border-bottom: 1px solid var(--mk-primary-line);
}

.offcanvas-body {
  padding: 18px 22px;
}

.mobile-nav-link {
  display: block;
  padding: 12px 10px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mk-body);
  border-bottom: 1px solid rgba(217, 230, 245, .55);
}

.mobile-nav-link:hover {
  background: var(--mk-primary-weak);
  color: var(--mk-primary);
}

.mobile-nav-link.active {
  background: var(--mk-primary);
  color: #fff;
}

.offcanvas-note {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--mk-primary-weak);
  font-size: 13px;
  color: var(--mk-muted);
}

/* ============ topic hero ============ */
.topic-hero {
  position: relative;
  padding: 30px 0 70px;
  background-color: var(--mk-ink-deep);
  background-image:
    linear-gradient(100deg, rgba(3, 14, 38, .93) 0%, rgba(10, 45, 88, .82) 58%, rgba(14, 107, 216, .68) 100%),
    url("/assets/images/backpic/back-3.png");
  background-size: cover;
  background-position: center;
  color: rgba(255, 255, 255, .8);
  overflow: hidden;
}

.topic-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -170px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  border: 38px solid rgba(255, 255, 255, .06);
  pointer-events: none;
}

.hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  z-index: 1;
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 26px;
}

.hero-breadcrumb a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
}

.hero-breadcrumb a:hover {
  color: #fff;
}

.topic-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 52px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.topic-hero-copy .overline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 15px;
  color: #9ed6ff;
  font-size: 13px;
  letter-spacing: .08em;
}

.overline .live-dot {
  background: #7ff2d5;
}

.topic-hero-copy h1 {
  color: #fff;
  font-size: clamp(32px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.22;
  margin-bottom: 20px;
  letter-spacing: .01em;
}

.topic-hero-copy h1 .hero-brand {
  color: #a7d1ff;
}

.hero-lead {
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  line-height: 1.9;
  max-width: 620px;
  margin-bottom: 24px;
}

.hero-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.hero-feature-tags span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: rgba(255, 255, 255, .86);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.topic-hero-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: 28px;
  color: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hero-card-title {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-card-title::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 18px;
  border-radius: 99px;
  background: #54c6ff;
}

.hero-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}

.hero-card-list li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .8);
  padding: 7px 0;
}

.hero-card-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5ccbff;
  flex: 0 0 auto;
  margin-top: 10px;
}

.hero-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9fd4ff;
  font-size: 14px;
  font-weight: 600;
}

.hero-card-link:hover {
  color: #fff;
}

/* ============ sections ============ */
.mk-section {
  padding: var(--mk-space-section) 0;
}

.section-white {
  background: #fff;
}

.section-soft {
  background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
}

.section-bg {
  background: var(--mk-bg-page);
}

.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 42px;
}

.head-main {
  max-width: 650px;
}

.head-main h2 {
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: 800;
  margin: 10px 0 12px;
  letter-spacing: .01em;
}

.head-main p {
  font-size: 15px;
  color: var(--mk-muted);
  margin: 0;
}

.overline-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--mk-primary-weak);
  color: var(--mk-primary);
  border-radius: 999px;
  padding: 4px 13px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
}

.text-primary-strong {
  color: var(--mk-primary) !important;
}

.text-mid {
  color: var(--mk-muted);
}

.mt-16 {
  margin-top: 16px;
}

/* ============ schedule ============ */
.schedule-wrap {
  background: #fff;
  border: 1px solid var(--mk-primary-line);
  border-radius: 22px;
  padding: 44px 46px 16px;
  box-shadow: var(--mk-shadow-sm);
}

.schedule-header {
  padding-bottom: 26px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--mk-primary-line);
}

.schedule-header h3 {
  font-size: 21px;
  font-weight: 800;
  margin: 8px 0 6px;
}

.schedule-header p {
  margin: 0;
  color: var(--mk-muted);
  font-size: 14px;
  max-width: 640px;
}

.timeline-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.timeline-item {
  display: grid;
  grid-template-columns: 122px 26px minmax(0, 1fr);
  column-gap: 18px;
}

.timeline-date {
  text-align: left;
  padding-top: 10px;
  color: var(--mk-muted);
}

.timeline-date .month {
  display: block;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--mk-primary);
  font-weight: 700;
}

.timeline-date .day {
  display: block;
  font-size: 27px;
  font-weight: 800;
  color: var(--mk-dark);
  line-height: 1.1;
}

.timeline-shaft {
  position: relative;
  display: flex;
  justify-content: center;
}

.timeline-shaft::before {
  content: "";
  width: 2px;
  background: linear-gradient(180deg, var(--mk-primary) 0%, rgba(14, 107, 216, .16) 100%);
  position: absolute;
  top: 26px;
  bottom: -8px;
}

.timeline-item:last-child .timeline-shaft::before {
  display: none;
}

.timeline-shaft::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--mk-primary);
  box-shadow: 0 0 0 4px rgba(14, 107, 216, .14);
}

.timeline-card-wrap {
  padding-bottom: 38px;
}

.timeline-card {
  background: #fff;
  border: 1px solid var(--mk-primary-line);
  border-radius: 16px;
  padding: 24px 24px 22px;
  box-shadow: 0 4px 12px rgba(14, 47, 91, .04);
  transition: all .2s ease;
}

.timeline-card:hover {
  border-color: #bad9f6;
  box-shadow: var(--mk-shadow-md);
  transform: translateY(-2px);
}

.tl-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.tl-time {
  color: var(--mk-muted);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.timeline-card h3 {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 7px;
  color: var(--mk-dark);
}

.timeline-card .desc {
  margin: 0 0 14px;
  color: var(--mk-muted);
  font-size: 14px;
  line-height: 1.8;
}

.tl-info-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 13px;
  color: var(--mk-body);
}

.tl-info-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tl-info-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8eb6de;
  flex: 0 0 auto;
}

.tl-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px dashed var(--mk-primary-line);
  padding-top: 13px;
}

.tl-note {
  color: var(--mk-muted);
  font-size: 13px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

.tag-primary {
  background: var(--mk-primary-weak);
  color: var(--mk-primary);
  border: 1px solid #c8def6;
}

.tag-accent {
  background: rgba(14, 169, 140, .12);
  color: #087767;
  border: 1px solid rgba(14, 169, 140, .3);
}

.tag-orange {
  background: rgba(232, 134, 46, .13);
  color: #b45e16;
  border: 1px solid rgba(232, 134, 46, .26);
}

.tag-outline {
  background: #fff;
  color: var(--mk-muted);
  border: 1px solid var(--mk-primary-line);
}

.tl-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--mk-primary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tl-link:hover {
  color: var(--mk-primary-dark);
}

.tl-link .arrow {
  transition: transform .2s ease;
}

.tl-link:hover .arrow {
  transform: translateX(4px);
}

.schedule-note {
  margin-top: 8px;
  display: flex;
  gap: 9px;
  color: var(--mk-muted);
  font-size: 13px;
  background: var(--mk-primary-weak);
  border-radius: 12px;
  padding: 10px 16px;
  align-items: center;
}

/* ============ highlight / photo panel ============ */
.photo-feature {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  min-height: 350px;
  height: 100%;
  background: #0a2d54;
  box-shadow: var(--mk-shadow-md);
}

.photo-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 16, 39, .08) 0%, rgba(4, 16, 39, .28) 42%, rgba(3, 13, 31, .88) 100%);
}

.feature-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 350px;
  padding: 26px;
}

.feature-copy .tag {
  align-self: flex-start;
  margin-bottom: 12px;
}

.feature-copy h3 {
  color: #fff;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 800;
  max-width: 640px;
}

.feature-copy p {
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  max-width: 620px;
  margin: 0 0 14px;
}

.feature-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  margin-bottom: 14px;
}

.feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mini-spot-card {
  background: #fff;
  border: 1px solid var(--mk-primary-line);
  border-radius: 16px;
  padding: 18px 18px 15px;
  box-shadow: var(--mk-shadow-sm);
  height: 100%;
}

.mini-spot-card .mini-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 7px;
}

.mini-spot-card h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.mini-spot-card p {
  margin: 0;
  color: var(--mk-muted);
  font-size: 13px;
}

/* ============ archives ============ */
.archive-grid .col {
  margin-bottom: 24px;
}

.archive-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--mk-primary-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--mk-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}

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

.archive-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e0edfa;
}

.archive-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.archive-card:hover .archive-cover img {
  transform: scale(1.04);
}

.archive-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 36, 71, 0) 58%, rgba(11, 36, 71, .56) 100%);
  opacity: .72;
  transition: opacity .2s ease;
}

.archive-card:hover .archive-cover::after {
  opacity: 1;
}

.cover-badge {
  position: absolute;
  left: 13px;
  top: 12px;
  z-index: 3;
}

.cover-icon {
  position: absolute;
  right: 13px;
  bottom: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--mk-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  opacity: .92;
}

.archive-body {
  padding: 19px 20px 17px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.archive-type {
  font-size: 12px;
  color: var(--mk-muted);
  letter-spacing: .06em;
}

.archive-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--mk-dark);
  line-height: 1.45;
}

.archive-body p {
  color: var(--mk-muted);
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

/* ============ CTA ============ */
.cta-panel {
  position: relative;
  border-radius: 24px;
  padding: 58px 36px;
  background-color: var(--mk-primary-dark);
  background-image: linear-gradient(105deg, #081e36 0%, #0b3670 62%, #0e6bd8 130%);
  color: #fff;
  overflow: hidden;
}

.cta-panel::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 190, 255, .22) 0%, transparent 68%);
  pointer-events: none;
}

.cta-panel h2 {
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  margin-bottom: 14px;
}

.cta-panel p {
  color: rgba(255, 255, 255, .77);
  font-size: 15px;
  max-width: 680px;
  margin-bottom: 28px;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-mini-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.cta-mini-tags span {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: rgba(255, 255, 255, .78);
  padding: 3px 11px;
  font-size: 12px;
}

/* ============ FAQ ============ */
.faq-wrap {
  display: grid;
  grid-template-columns: .9fr 1.6fr;
  gap: 48px;
}

.faq-side .faq-promo {
  margin-top: 18px;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--mk-primary-line);
  box-shadow: var(--mk-shadow-sm);
}

.faq-side h4 {
  font-size: 17px;
  font-weight: 700;
  margin-top: 18px;
}

.faq-side .faq-promo p {
  font-size: 14px;
  color: var(--mk-muted);
}

.faq-note {
  background: var(--mk-primary-weak);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 26px;
  color: var(--mk-body);
  font-size: 14px;
}

.accordion {
  --bs-accordion-border-color: var(--mk-primary-line);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 16px;
  --bs-accordion-inner-border-radius: 15px;
  --bs-accordion-bg: #fff;
}

.accordion-item {
  background: #fff;
  border: 1px solid var(--mk-primary-line);
  box-shadow: 0 4px 10px rgba(14, 47, 91, .03);
  border-radius: 16px !important;
  margin-bottom: 14px;
  overflow: hidden;
}

.accordion-button {
  background: #fff;
  color: var(--mk-dark);
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
  padding: 17px 20px 14px;
  border-radius: 16px;
  gap: 12px;
}

.accordion-button:not(.collapsed) {
  background: #fff;
  color: var(--mk-dark);
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
  outline: 2px solid rgba(14, 107, 216, .16);
}

.accordion-button::after {
  display: none;
}

.acc-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mk-primary-weak);
  color: var(--mk-primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex: 0 0 auto;
  transition: transform .25s ease, background .2s ease, color .2s ease;
  line-height: 1;
}

.accordion-button:not(.collapsed) .acc-icon {
  transform: rotate(45deg);
  background: var(--mk-primary);
  color: #fff;
}

.accordion-body {
  padding: 0 22px 20px;
  color: var(--mk-muted);
  font-size: 14px;
  line-height: 1.85;
}

.accordion-body strong {
  color: var(--mk-dark);
}

/* ============ footer ============ */
.site-footer {
  background: #081e36;
  color: rgba(255, 255, 255, .62);
  margin-top: 24px;
  padding-top: 68px;
}

.site-footer .brand-logo .brand-name {
  color: #fff;
}

.site-footer .brand-mark {
  background: linear-gradient(145deg, #0e6bd8, #2aa0f6);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  margin-bottom: 16px;
}

.footer-desc {
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
  line-height: 1.9;
  max-width: 460px;
}

.footer-title {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 17px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li + li,
.footer-contact li + li {
  margin-top: 9px;
}

.footer-links a {
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
}

.footer-links a:hover {
  color: #fff;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
  line-height: 1.8;
}

.footer-bottom {
  margin-top: 44px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  color: rgba(255, 255, 255, .45);
  font-size: 13px;
}

/* ============ responsive ============ */
@media (min-width: 992px) and (max-width: 1199px) {
  .channel-note {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .topic-hero {
    padding: 24px 0 42px;
  }

  .topic-hero-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .topic-hero-card {
    max-width: 680px;
  }

  .mk-section {
    --mk-space-section: 74px;
  }

  .schedule-wrap {
    padding: 30px 24px 8px;
  }

  .head-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .faq-wrap {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .header .top-actions .subtle-link {
    display: none;
  }
}

@media (max-width: 767px) {
  .mk-section {
    --mk-space-section: 60px;
  }

  .brand-name {
    font-size: 18px;
    letter-spacing: 0;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    font-size: 15px;
    border-radius: 10px;
  }

  .top-bar-inner {
    min-height: 60px;
  }

  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-feature-tags span {
    font-size: 12px;
  }

  .schedule-wrap {
    padding: 22px 16px 0;
    border-radius: 16px;
  }

  .timeline-item {
    grid-template-columns: 76px 18px minmax(0, 1fr);
    column-gap: 9px;
  }

  .timeline-shaft::before {
    left: 9px;
  }

  .timeline-date .day {
    font-size: 22px;
  }

  .timeline-date .month {
    font-size: 11px;
  }

  .timeline-card {
    padding: 16px;
  }

  .timeline-card h3 {
    font-size: 16px;
  }

  .feature-copy {
    padding: 20px;
    min-height: 320px;
  }

  .feature-copy h3 {
    font-size: 20px;
  }

  .cta-panel {
    padding: 38px 22px;
    border-radius: 18px;
  }

  .cta-panel p {
    font-size: 14px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 520px) {
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .brand-name {
    font-size: 16px;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    font-size: 13px;
    border-radius: 9px;
  }

  .btn-login {
    padding: 6px 12px;
    font-size: 13px;
    min-height: 36px;
  }

  .timeline-item {
    grid-template-columns: 62px 14px minmax(0, 1fr);
    column-gap: 6px;
  }

  .timeline-card {
    padding: 14px;
  }

  .timeline-shaft::before {
    left: 6px;
    top: 16px;
  }

  .timeline-shaft::after {
    top: 10px;
    width: 9px;
    height: 9px;
  }

  .tl-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .tl-bottom {
    align-items: flex-start;
  }

  .schedule-note {
    align-items: flex-start;
    line-height: 1.6;
  }

  .topic-hero-card {
    padding: 20px;
  }

  .photo-feature {
    min-height: 300px;
  }

  .feature-copy {
    min-height: 300px;
  }

  .faq-side h4 {
    margin-top: 10px;
  }

  .head-main h2 {
    font-size: 23px;
  }
}

/* roulang page: category3 */
/* ========== 设计变量与基础重置 ========== */
    :root {
      --mk-primary: #0D6BE2;
      --mk-primary-dark: #094FA8;
      --mk-primary-weak: #EFF6FE;
      --mk-primary-line: #D9E6F5;
      --mk-accent: #0EA98C;
      --mk-dark: #0B2447;
      --mk-body: #334E69;
      --mk-muted: #6B859E;
      --mk-page: #F6FAFF;
      --mk-surface: #FFFFFF;
      --mk-darkbg: #081E36;
      --mk-radius: 16px;
      --mk-radius-sm: 10px;
      --mk-radius-xs: 8px;
      --mk-shadow-sm: 0 6px 18px rgba(14, 47, 91, 0.06);
      --mk-shadow-md: 0 14px 32px rgba(14, 47, 91, 0.12);
      --mk-font: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: var(--mk-font);
      background: var(--mk-page);
      color: var(--mk-body);
      line-height: 1.75;
      overflow-x: hidden;
    }

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

    p {
      margin-top: 0;
    }

    a {
      color: var(--mk-primary);
      text-decoration: none;
      transition: color .2s ease;
    }

    a:hover {
      color: var(--mk-primary-dark);
    }

    img {
      max-width: 100%;
      display: block;
    }

    ul {
      margin: 0;
      padding: 0;
    }

    .container {
      max-width: 1280px;
    }

    :focus-visible {
      outline: 3px solid rgba(13, 107, 226, 0.3);
      outline-offset: 2px;
    }

    /* ========== Bootstrap 默认组件重塑 ========== */
    .btn {
      border-radius: var(--mk-radius-sm);
      font-weight: 600;
      font-size: 15px;
      padding: 12px 24px;
      min-height: 46px;
      transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .btn-primary {
      background: var(--mk-primary);
      border-color: var(--mk-primary);
      box-shadow: 0 6px 16px rgba(13, 107, 226, 0.18);
    }

    .btn-primary:hover,
    .btn-primary:focus {
      background: var(--mk-primary-dark);
      border-color: var(--mk-primary-dark);
      box-shadow: 0 10px 24px rgba(13, 107, 226, 0.26);
      transform: translateY(-1px);
    }

    .btn-primary:focus-visible {
      box-shadow: 0 0 0 4px rgba(13, 107, 226, 0.18);
    }

    .btn-outline-light {
      border: 1px solid rgba(255, 255, 255, 0.9);
      color: #fff;
    }

    .btn-outline-light:hover,
    .btn-outline-light:focus {
      background: rgba(255, 255, 255, 0.16);
      border-color: #fff;
      color: #fff;
      transform: translateY(-1px);
    }

    .form-control,
    .form-select,
    .form-check-input {
      border: 1px solid var(--mk-primary-line);
      border-radius: var(--mk-radius-sm);
      padding: 13px 16px;
      min-height: 50px;
      background: #F8FBFE;
      color: var(--mk-body);
      font-size: 15px;
      box-shadow: none;
    }

    .form-control:focus,
    .form-select:focus,
    .form-check-input:focus {
      border-color: var(--mk-primary);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(13, 107, 226, 0.14);
    }

    .form-control::placeholder {
      color: #99AEC2;
    }

    .form-label {
      color: var(--mk-dark);
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .form-check .form-check-input {
      min-height: 1.2em;
    }

    .form-check-input:checked {
      background-color: var(--mk-primary);
      border-color: var(--mk-primary);
    }

    textarea.form-control {
      min-height: 112px;
      resize: vertical;
    }

    /* ========== 头部导航 ========== */
    .mk-header {
      background: var(--mk-surface);
    }

    .top-bar {
      height: 64px;
      background: var(--mk-surface);
      border-bottom: 1px solid rgba(217, 230, 245, 0.8);
    }

    .top-bar-inner {
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--mk-dark);
      text-decoration: none;
    }

    .brand-logo:hover {
      color: var(--mk-dark);
    }

    .brand-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--mk-primary), #4DA0FF);
      color: #fff;
      font-weight: 800;
      font-size: 16px;
      letter-spacing: .5px;
      box-shadow: 0 6px 14px rgba(13, 107, 226, 0.24);
    }

    .brand-name {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 1px;
      white-space: nowrap;
    }

    .subtle-link {
      display: inline-flex;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      color: var(--mk-body);
      padding: 8px 12px;
      border-radius: 999px;
      transition: background-color .2s ease, color .2s ease;
    }

    .subtle-link:hover {
      color: var(--mk-primary);
      background: var(--mk-primary-weak);
    }

    .btn-login {
      min-height: 40px;
      padding: 8px 18px;
      font-size: 14px;
    }

    .channel-bar {
      height: 54px;
      background: var(--mk-surface);
      border-bottom: 1px solid var(--mk-primary-line);
      position: sticky;
      top: 0;
      z-index: 1030;
      box-shadow: 0 2px 10px rgba(14, 47, 91, 0.03);
    }

    .channel-inner {
      height: 54px;
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nav-channel {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      padding: 0 16px;
      border-radius: 999px;
      color: var(--mk-body);
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
    }

    .nav-channel:hover {
      background: var(--mk-primary-weak);
      color: var(--mk-primary);
    }

    .nav-channel.active {
      background: var(--mk-primary);
      color: #fff;
      box-shadow: 0 6px 14px rgba(13, 107, 226, 0.24);
    }

    .nav-channel.active:hover {
      background: var(--mk-primary-dark);
      color: #fff;
    }

    .channel-note {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--mk-muted);
      white-space: nowrap;
    }

    .live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--mk-accent);
      box-shadow: 0 0 0 4px rgba(14, 169, 140, 0.14);
    }

    .navbar-toggler {
      border: 0;
      padding: 4px 8px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: var(--mk-radius-xs);
      color: var(--mk-dark);
      font-size: 14px;
      font-weight: 600;
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 3px rgba(13, 107, 226, 0.18);
    }

    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(11,36,71,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      width: 22px;
      height: 22px;
      display: inline-block;
    }

    /* 移动端抽屉导航 */
    .offcanvas {
      background: #fff;
    }

    .offcanvas-header {
      border-bottom: 1px solid var(--mk-primary-line);
      padding: 16px 20px;
    }

    .offcanvas-body {
      padding: 20px;
    }

    .mobile-nav-link {
      display: block;
      padding: 13px 4px;
      font-size: 16px;
      font-weight: 600;
      color: var(--mk-body);
      border-bottom: 1px solid #F0F5FB;
    }

    .mobile-nav-link.active {
      color: var(--mk-primary);
    }

    .mobile-nav-link:hover {
      color: var(--mk-primary);
    }

    .offcanvas-note {
      margin-top: 24px;
      font-size: 13px;
      color: var(--mk-muted);
      line-height: 1.8;
      background: var(--mk-primary-weak);
      border-radius: var(--mk-radius-sm);
      padding: 16px;
    }

    /* ========== 页脚 ========== */
    .site-footer {
      background: var(--mk-darkbg);
      color: #AFC6DB;
      padding: 64px 0 0;
      margin-top: 0;
    }

    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      color: #fff;
    }

    .footer-brand:hover {
      color: #fff;
    }

    .footer-brand .brand-mark {
      width: 40px;
      height: 40px;
      font-size: 15px;
    }

    .footer-brand .brand-name {
      color: #fff;
      font-size: 19px;
    }

    .footer-desc {
      color: #9EB6CE;
      font-size: 14px;
      line-height: 1.9;
      max-width: 480px;
      margin-bottom: 0;
    }

    .footer-title {
      color: #fff;
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 18px;
      padding-bottom: 10px;
      position: relative;
    }

    .footer-title::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 28px;
      height: 3px;
      border-radius: 99px;
      background: var(--mk-primary);
    }

    .footer-links,
    .footer-contact {
      list-style: none;
      padding: 0;
    }

    .footer-links li,
    .footer-contact li {
      margin-bottom: 12px;
      font-size: 14px;
    }

    .footer-links a {
      color: #AFC6DB;
      transition: color .2s ease, padding-left .2s ease;
    }

    .footer-links a:hover {
      color: #6FA8FF;
      padding-left: 4px;
    }

    .footer-contact li {
      position: relative;
      padding-left: 20px;
      color: #AFC6DB;
    }

    .footer-contact li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 12px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--mk-accent);
      opacity: .8;
    }

    .footer-bottom {
      margin-top: 50px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding: 22px 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10px 26px;
      justify-content: center;
      font-size: 13px;
      color: #7895AE;
    }

    /* ========== 页面主视觉 ========== */
    .page-hero {
      position: relative;
      padding: 74px 0 78px;
      color: #fff;
      background:
        linear-gradient(105deg, rgba(7, 29, 59, 0.94) 0%, rgba(13, 107, 226, 0.76) 52%, rgba(13, 107, 226, 0.42) 100%),
        url("/assets/images/backpic/back-2.png") center/cover no-repeat;
    }

    .page-hero::after {
      content: "";
      position: absolute;
      right: -80px;
      top: -80px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      border: 42px solid rgba(255, 255, 255, 0.08);
      pointer-events: none;
    }

    .breadcrumb-line {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      margin-bottom: 22px;
      color: rgba(255, 255, 255, 0.75);
    }

    .breadcrumb-line a {
      color: rgba(255, 255, 255, 0.85);
    }

    .breadcrumb-line a:hover {
      color: #fff;
    }

    .breadcrumb-line .sep {
      opacity: .7;
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.24);
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      padding: 7px 16px;
      backdrop-filter: blur(6px);
    }

    .hero-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #4BE0C0;
      box-shadow: 0 0 0 4px rgba(75, 224, 192, 0.18);
    }

    .page-hero h1 {
      color: #fff;
      font-size: clamp(30px, 4vw, 44px);
      font-weight: 800;
      line-height: 1.24;
      margin: 22px 0 16px;
      max-width: 720px;
    }

    .hero-lead {
      color: rgba(255, 255, 255, 0.88);
      font-size: 16px;
      line-height: 1.9;
      max-width: 650px;
      margin-bottom: 28px;
    }

    .hero-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .hero-panel {
      background: rgba(255, 255, 255, 0.96);
      border-radius: 20px;
      padding: 24px;
      box-shadow: 0 18px 42px rgba(3, 22, 58, 0.24);
      color: var(--mk-body);
      position: relative;
      z-index: 2;
    }

    .hero-panel-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--mk-dark);
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }

    .panel-dot {
      width: 10px;
      height: 10px;
      border-radius: 4px;
      background: var(--mk-primary);
      box-shadow: 0 0 0 4px var(--mk-primary-weak);
    }

    .status-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .status-list li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px dashed #E1ECF7;
      font-size: 14px;
    }

    .status-list li:last-child {
      border-bottom: 0;
    }

    .status-name {
      color: var(--mk-muted);
    }

    .status-value {
      color: var(--mk-dark);
      font-weight: 600;
    }

    .status-ok {
      color: var(--mk-accent);
    }

    .status-note {
      margin: 14px 0 0;
      font-size: 13px;
      line-height: 1.7;
      color: var(--mk-muted);
      background: #F3F9FF;
      border-left: 3px solid var(--mk-primary);
      border-radius: 8px;
      padding: 10px 14px;
    }

    /* ========== 通用区块 ========== */
    .section-block {
      padding: 92px 0;
    }

    .section-block-soft {
      background: #F1F7FE;
    }

    .section-block-white {
      background: #fff;
    }

    .section-head {
      max-width: 760px;
      margin: 0 auto 46px;
      text-align: center;
    }

    .section-head h2 {
      font-size: clamp(25px, 3vw, 34px);
      margin: 14px 0 14px;
    }

    .section-head p {
      color: var(--mk-muted);
      font-size: 16px;
    }

    .section-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--mk-primary-weak);
      color: var(--mk-primary);
      font-size: 13px;
      font-weight: 700;
      border-radius: 99px;
      padding: 7px 16px;
    }

    .section-eyebrow::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--mk-accent);
    }

    /* 提示条 */
    .notice-plain {
      background: var(--mk-surface);
      border-bottom: 1px solid var(--mk-primary-line);
    }

    .notice-plain-inner {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding-top: 16px;
      padding-bottom: 16px;
    }

    .notice-icon {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #FFF4E5;
      color: #D97706;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      margin-top: 2px;
    }

    .notice-plain p {
      margin: 0;
      font-size: 14px;
      color: var(--mk-body);
    }

    .notice-plain strong {
      color: var(--mk-dark);
    }

    /* ========== 报名前须知 ========== */
    .entry-info-title {
      font-size: 26px;
      margin-bottom: 16px;
    }

    .entry-info-text {
      color: var(--mk-body);
      line-height: 1.9;
      margin-bottom: 24px;
    }

    .entry-list {
      list-style: none;
      padding: 0;
    }

    .entry-list li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 14px;
      color: var(--mk-body);
      font-size: 15px;
    }

    .entry-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--mk-primary-weak);
      color: var(--mk-primary);
      font-size: 12px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .prep-card {
      background: #fff;
      border: 1px solid var(--mk-primary-line);
      border-radius: 20px;
      padding: 28px;
      box-shadow: var(--mk-shadow-sm);
    }

    .prep-card-title {
      font-size: 18px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .prep-card-title .prep-num {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--mk-primary), #4DA0FF);
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
    }

    .prep-card ul {
      list-style: none;
    }

    .prep-card li {
      position: relative;
      padding-left: 18px;
      margin-bottom: 12px;
      font-size: 14px;
    }

    .prep-card li::before {
      content: "·";
      position: absolute;
      left: 4px;
      color: var(--mk-primary);
      font-size: 22px;
      line-height: 1;
    }

    .prep-tip {
      background: #F3F9FF;
      border-radius: 12px;
      padding: 14px 16px;
      font-size: 13px;
      color: var(--mk-muted);
      line-height: 1.8;
      margin-top: 18px;
      border-left: 3px solid var(--mk-accent);
    }

    /* ========== 步骤流程 ========== */
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      position: relative;
    }

    .step-card {
      background: #fff;
      border: 1px solid var(--mk-primary-line);
      border-radius: 20px;
      padding: 30px 26px;
      position: relative;
      box-shadow: var(--mk-shadow-sm);
      transition: box-shadow .2s ease, transform .2s ease;
    }

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

    .step-card:not(:last-child)::after {
      content: "→";
      position: absolute;
      right: -24px;
      top: 42px;
      width: 28px;
      color: var(--mk-primary);
      font-size: 20px;
      font-weight: 700;
      z-index: 3;
      text-align: center;
      background: transparent;
    }

    .step-num {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--mk-primary), #4DA0FF);
      color: #fff;
      font-size: 18px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 20px rgba(13, 107, 226, 0.22);
      margin-bottom: 20px;
    }

    .step-card h3 {
      font-size: 19px;
      margin-bottom: 12px;
    }

    .step-card p {
      margin-bottom: 0;
      color: var(--mk-body);
      font-size: 14px;
      line-height: 1.9;
    }

    /* ========== 入口服务卡片 ========== */
    .service-card {
      background: #fff;
      border: 1px solid var(--mk-primary-line);
      border-radius: 18px;
      overflow: hidden;
      height: 100%;
      box-shadow: var(--mk-shadow-sm);
      transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    }

    .service-card:hover {
      box-shadow: var(--mk-shadow-md);
      transform: translateY(-5px);
      border-color: rgba(13, 107, 226, 0.3);
    }

    .service-media {
      position: relative;
      overflow: hidden;
    }

    .service-media img {
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      transition: transform .4s ease;
    }

    .service-card:hover .service-media img {
      transform: scale(1.04);
    }

    .service-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 46%, rgba(8, 30, 54, 0.2));
    }

    .service-body {
      padding: 20px 20px 22px;
    }

    .service-body h3 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .service-body p {
      font-size: 14px;
      color: var(--mk-muted);
      line-height: 1.8;
      margin-bottom: 16px;
    }

    .service-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 600;
      color: var(--mk-primary);
      transition: color .2s ease, gap .2s ease;
    }

    .service-link:hover {
      color: var(--mk-primary-dark);
      gap: 9px;
    }

    /* ========== 报名表单区 ========== */
    .register-wrap {
      background: #fff;
      border-radius: 24px;
      box-shadow: var(--mk-shadow-sm);
      border: 1px solid var(--mk-primary-line);
      overflow: hidden;
    }

    .register-info {
      background: linear-gradient(135deg, #F5FAFF, #EEF5FD);
      height: 100%;
      padding: 40px;
    }

    .register-info-title {
      font-size: 18px;
      margin-bottom: 14px;
      position: relative;
      padding-bottom: 12px;
    }

    .register-info-title::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 30px;
      height: 3px;
      border-radius: 99px;
      background: var(--mk-primary);
    }

    .register-info p {
      font-size: 14px;
      color: var(--mk-body);
      line-height: 1.9;
      margin-bottom: 16px;
    }

    .register-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .register-list li {
      position: relative;
      padding-left: 26px;
      margin-bottom: 12px;
      font-size: 14px;
    }

    .register-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--mk-accent);
      font-weight: 800;
    }

    .register-form-col {
      padding: 40px;
    }

    .form-section-note {
      font-size: 13px;
      color: var(--mk-muted);
      line-height: 1.8;
      background: #F7FAFE;
      border: 1px solid #E3EDF7;
      border-radius: 12px;
      padding: 12px 14px;
    }

    .form-feedback {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: #EBFAF5;
      border: 1px solid #C7F0E4;
      color: #0B7C67;
      padding: 14px 16px;
      border-radius: 12px;
      margin-top: 16px;
      font-size: 14px;
    }

    .form-feedback[hidden] {
      display: none;
    }

    .form-feedback .feedback-icon {
      font-weight: 800;
    }

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

    .mk-faq .accordion-item {
      background: #fff;
      border: 1px solid var(--mk-primary-line);
      border-radius: 16px;
      box-shadow: 0 2px 8px rgba(14, 47, 91, 0.04);
      margin-bottom: 14px;
      overflow: hidden;
    }

    .mk-faq .accordion-button {
      box-shadow: none;
      background: #fff;
      color: var(--mk-dark);
      font-size: 16px;
      font-weight: 600;
      padding: 20px 24px;
      line-height: 1.6;
    }

    .mk-faq .accordion-button:not(.collapsed) {
      background: #F4F9FF;
      color: var(--mk-primary);
    }

    .mk-faq .accordion-button:focus {
      box-shadow: 0 0 0 3px rgba(13, 107, 226, 0.14);
    }

    .mk-faq .accordion-button::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230D6BE2'%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");
      background-size: 1.25rem;
      transition: transform .25s ease;
    }

    .mk-faq .accordion-button:not(.collapsed)::after {
      transform: rotate(180deg);
    }

    .mk-faq .accordion-body {
      border-top: 1px dashed var(--mk-primary-line);
      background: #fff;
      padding: 18px 24px 22px;
      color: var(--mk-body);
      font-size: 15px;
      line-height: 1.95;
    }

    .faq-footnote {
      text-align: center;
      margin-top: 24px;
      font-size: 14px;
      color: var(--mk-muted);
    }

    /* ========== 底部 CTA ========== */
    .final-cta {
      background: var(--mk-darkbg);
      padding: 56px 0;
      color: #fff;
    }

    .final-cta h2 {
      color: #fff;
      font-size: 28px;
      margin-bottom: 12px;
    }

    .final-cta p {
      color: #AFC6DB;
      margin-bottom: 26px;
      max-width: 560px;
    }

    .final-cta .btn {
      min-height: 50px;
    }

    .cta-secondary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #9AC4FF;
      font-weight: 600;
      margin-left: 12px;
    }

    .cta-secondary:hover {
      color: #fff;
    }

    /* ========== 响应式 ========== */
    @media (max-width: 991.98px) {
      .section-block {
        padding: 68px 0;
      }

      .steps-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .step-card:nth-child(3) {
        grid-column: span 2;
      }

      .step-card:not(:last-child)::after {
        display: none;
      }

      .register-info,
      .register-form-col {
        padding: 32px;
      }

      .hero-panel {
        margin-top: 30px;
      }
    }

    @media (max-width: 767.98px) {
      .brand-name {
        font-size: 17px;
      }

      .page-hero {
        padding: 54px 0 58px;
      }

      .page-hero h1 {
        font-size: 28px;
      }

      .hero-lead {
        font-size: 15px;
      }

      .section-block {
        padding: 54px 0;
      }

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

      .step-card:nth-child(3) {
        grid-column: span 1;
      }

      .register-info,
      .register-form-col {
        padding: 24px;
      }

      .final-cta h2 {
        font-size: 24px;
      }

      .cta-secondary {
        margin: 14px 0 0;
        display: inline-flex;
      }

      .footer-bottom {
        justify-content: flex-start;
      }
    }

    @media (max-width: 480px) {
      .top-bar-inner {
        gap: 8px;
      }

      .brand-logo .brand-mark {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 14px;
      }

      .brand-name {
        font-size: 16px;
        letter-spacing: .4px;
      }

      .btn-login {
        padding: 7px 13px;
        min-height: 36px;
        font-size: 13px;
      }

      .hero-btns .btn {
        width: 100%;
      }
    }