@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
    --news-ink: #0f172a;
    --news-muted: #64748b;
    --news-line: #dbe5f1;
    --news-surface: #ffffff;
    --news-soft: #f8fbff;
    --news-primary: #2563eb;
    --news-primary-soft: #eff6ff;
    --news-warning: #b45309;
    --news-warning-soft: #fffbeb;
    --news-danger: #be123c;
    --news-radius: 10px;
}

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

html,
body {
    min-height: 100% !important;
    margin: 0 !important;
    background: #f8fbff !important;
    color: var(--news-ink) !important;
    font-family: "Inter", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
textarea,
select,
table,
th,
td,
.article-page,
.article-page * {
    font-family: "Inter", Arial, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

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

.article-page,
.article-page--roadmap,
.article-page--alphatest,
.article-page--openbeta {
    width: min(100%, 1080px) !important;
    margin: 0 auto !important;
    padding: 18px !important;
}

.article-header {
    display: flex !important;
    align-items: center !important;
    min-height: 28px !important;
    margin: 0 0 10px !important;
}

.article-header h1 {
    display: none !important;
}

.article-header time {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--news-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.article-header time::before {
    content: "Cập nhật" !important;
    color: var(--news-primary) !important;
    font-weight: 850 !important;
}

.news-contain-sp,
.roadmap-article,
.alpha-article,
.openbeta-article,
.event-board {
    display: grid !important;
    gap: 14px !important;
    color: var(--news-ink) !important;
}

.news-contain-sp p,
.news-contain-sp li {
    color: var(--news-muted) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

.news-contain-sp h2,
.news-contain-sp h3,
.news-contain-sp h4 {
    margin: 0 !important;
    color: var(--news-ink) !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
}

.roadmap-hero,
.alpha-hero,
.ob-hero,
.event-hero {
    display: grid !important;
    grid-template-columns: 144px minmax(0, 1fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--news-line) !important;
    border-radius: var(--news-radius) !important;
    background: var(--news-surface) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}

.roadmap-hero::before,
.roadmap-hero::after,
.alpha-hero::before,
.alpha-hero::after,
.ob-hero::before,
.ob-hero::after,
.event-hero::before,
.event-hero::after {
    display: none !important;
}

.roadmap-badge,
.alpha-badge,
.ob-badge,
.event-badge {
    grid-column: 1 !important;
    grid-row: 1 / span 4 !important;
    min-height: 100% !important;
    display: grid !important;
    place-items: center !important;
    padding: 20px 12px !important;
    color: #ffffff !important;
    background: var(--news-primary) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    text-align: center !important;
}

.roadmap-hero h2,
.alpha-hero h2,
.ob-hero h2,
.event-hero h2 {
    grid-column: 2 !important;
    order: 2 !important;
    margin: 0 !important;
    padding: 4px 24px 8px !important;
    color: var(--news-ink) !important;
    font-size: clamp(24px, 4vw, 34px) !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
}

.roadmap-hero p,
.alpha-hero p,
.ob-hero p,
.event-hero p {
    grid-column: 2 !important;
    order: 3 !important;
    margin: 0 !important;
    padding: 0 24px 20px !important;
    color: var(--news-muted) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}

.roadmap-hero__meta,
.alpha-hero__meta,
.ob-hero__meta,
.event-pill-row,
.alpha-pill-row,
.ob-pill-row {
    grid-column: 2 !important;
    order: 1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 20px 24px 12px !important;
}

.roadmap-hero__meta span,
.alpha-hero__meta span,
.ob-hero__meta span,
.event-pill,
.alpha-pill,
.ob-pill,
.roadmap-pill,
.time-chips li,
.alpha-track__eyebrow,
.ob-track__eyebrow,
.event-card__eyebrow {
    min-height: 27px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 5px 8px !important;
    border: 1px solid rgba(37, 99, 235, 0.16) !important;
    border-radius: 6px !important;
    color: #1d4ed8 !important;
    background: var(--news-primary-soft) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
}

.roadmap-hero__meta b,
.alpha-hero__meta b,
.ob-hero__meta b {
    color: inherit !important;
}

.roadmap-stats,
.alpha-stats,
.ob-summary,
.event-summary {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.roadmap-stat,
.alpha-stat,
.ob-summary-card,
.event-summary-card {
    min-height: 92px !important;
    display: grid !important;
    align-content: center !important;
    gap: 5px !important;
    padding: 13px !important;
    border: 1px solid var(--news-line) !important;
    border-radius: var(--news-radius) !important;
    background: var(--news-surface) !important;
}

.roadmap-stat strong,
.alpha-stat strong,
.ob-summary-card strong,
.event-summary-card strong {
    color: var(--news-primary) !important;
    font-size: 19px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
}

.roadmap-stat span,
.alpha-stat span,
.ob-summary-card span,
.event-summary-card span,
.alpha-stat small,
.event-summary-card small {
    color: var(--news-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.roadmap-section,
.alpha-section,
.ob-section,
.event-section,
.roadmap-note,
.alpha-rules,
.ob-rules,
.event-note {
    overflow: hidden !important;
    border: 1px solid var(--news-line) !important;
    border-radius: var(--news-radius) !important;
    background: var(--news-surface) !important;
}

.roadmap-section__heading,
.alpha-section-heading,
.ob-section-heading,
.event-section-heading {
    padding: 15px 18px !important;
    border-bottom: 1px solid var(--news-line) !important;
    background: var(--news-soft) !important;
}

.roadmap-section__heading h3,
.alpha-section-heading h3,
.ob-section-heading h3,
.event-section-heading h3 {
    color: var(--news-ink) !important;
    font-size: 18px !important;
    font-weight: 950 !important;
}

.roadmap-section__heading p,
.alpha-section-heading p,
.ob-section-heading p,
.event-section-heading p {
    margin: 5px 0 0 !important;
    color: var(--news-muted) !important;
    font-size: 12px !important;
}

.roadmap-grid,
.alpha-track-grid,
.ob-track-grid,
.event-grid,
.boss-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
}

.roadmap-card,
.alpha-track,
.ob-track,
.event-card,
.boss-card,
.alpha-rule,
.ob-rule-card {
    min-width: 0 !important;
    display: grid !important;
    align-content: start !important;
    gap: 9px !important;
    padding: 15px !important;
    border: 1px solid var(--news-line) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

.roadmap-card--alert {
    border-left: 4px solid #f59e0b !important;
}

.roadmap-card h4,
.event-card h4,
.boss-card h4,
.alpha-rule h3,
.ob-rule-card h3,
.alpha-track__head h4,
.ob-track__head h4 {
    color: var(--news-ink) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
}

.roadmap-card p,
.event-card p,
.boss-card p,
.alpha-rule p,
.ob-rule-card p,
.alpha-track__lead,
.ob-track__lead,
.alpha-note,
.ob-track-note,
.event-note p,
.roadmap-note p {
    margin: 0 !important;
    color: var(--news-muted) !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
}

.roadmap-card ul,
.event-card ul,
.boss-card ul,
.ob-rule-card ul {
    display: grid !important;
    gap: 5px !important;
    margin: 0 !important;
    padding-left: 18px !important;
}

.roadmap-card strong,
.event-card strong,
.boss-card strong,
.alpha-track strong,
.ob-track strong,
.alpha-rule strong,
.ob-rule-card strong {
    color: var(--news-primary) !important;
    font-weight: 900 !important;
}

.alpha-track__head,
.ob-track__head {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 9px !important;
}

.alpha-track__id,
.ob-track__id {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 7px !important;
    color: #ffffff !important;
    background: var(--news-primary) !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

.alpha-rewards,
.ob-rewards,
.info-stack {
    display: grid !important;
    gap: 7px !important;
}

.alpha-reward,
.ob-reward,
.info-row {
    overflow: hidden !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    border: 1px solid var(--news-line) !important;
    border-radius: 7px !important;
    background: #ffffff !important;
}

.alpha-reward b,
.ob-reward b,
.info-row b {
    display: flex !important;
    align-items: center !important;
    padding: 9px 10px !important;
    color: #1d4ed8 !important;
    background: var(--news-primary-soft) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.alpha-reward div,
.ob-reward div,
.info-row span {
    padding: 9px 10px !important;
    color: var(--news-muted) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.alpha-reward strong,
.ob-reward strong,
.info-row strong {
    color: var(--news-primary) !important;
}

.roadmap-note,
.alpha-note,
.ob-track-note,
.event-note {
    padding: 15px !important;
    border-left: 4px solid #f59e0b !important;
    background: var(--news-warning-soft) !important;
}

.roadmap-note strong,
.event-note strong {
    display: block !important;
    margin-bottom: 5px !important;
    color: var(--news-warning) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}

.alpha-rules,
.ob-rules {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
}

.time-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

table {
    width: 100% !important;
    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid var(--news-line) !important;
    border-radius: var(--news-radius) !important;
    background: #ffffff !important;
}

th,
td {
    padding: 10px 11px !important;
    border-right: 1px solid var(--news-line) !important;
    border-bottom: 1px solid var(--news-line) !important;
    color: var(--news-ink) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

th:last-child,
td:last-child {
    border-right: 0 !important;
}

tr:last-child td {
    border-bottom: 0 !important;
}

th {
    color: #ffffff !important;
    background: var(--news-primary) !important;
    font-weight: 900 !important;
}

tbody tr:nth-child(odd) td {
    background: #f8fbff !important;
}

@media (max-width: 760px) {
    .article-page,
    .article-page--roadmap,
    .article-page--alphatest,
    .article-page--openbeta {
        padding: 12px !important;
    }

    .roadmap-hero,
    .alpha-hero,
    .ob-hero,
    .event-hero {
        grid-template-columns: 1fr !important;
    }

    .roadmap-badge,
    .alpha-badge,
    .ob-badge,
    .event-badge {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: 0 !important;
        justify-items: start !important;
        padding: 10px 14px !important;
        text-align: left !important;
    }

    .roadmap-hero h2,
    .alpha-hero h2,
    .ob-hero h2,
    .event-hero h2,
    .roadmap-hero p,
    .alpha-hero p,
    .ob-hero p,
    .event-hero p,
    .roadmap-hero__meta,
    .alpha-hero__meta,
    .ob-hero__meta,
    .event-pill-row,
    .alpha-pill-row,
    .ob-pill-row {
        grid-column: 1 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .roadmap-hero__meta,
    .alpha-hero__meta,
    .ob-hero__meta,
    .event-pill-row,
    .alpha-pill-row,
    .ob-pill-row {
        padding-top: 14px !important;
    }

    .roadmap-stats,
    .alpha-stats,
    .ob-summary,
    .event-summary,
    .roadmap-grid,
    .alpha-track-grid,
    .ob-track-grid,
    .event-grid,
    .boss-grid,
    .alpha-rules,
    .ob-rules {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 420px) {
    .roadmap-hero h2,
    .alpha-hero h2,
    .ob-hero h2,
    .event-hero h2 {
        font-size: 24px !important;
    }

    .alpha-reward,
    .ob-reward,
    .info-row {
        grid-template-columns: 1fr !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}