/*
 * HC Arena — theme hoason (trang chủ)
 * Chuẩn thiết kế: "Tham chiếu bố cục.png" (777x2024 = bản thu nhỏ thiết kế 1920px).
 * --u = 1px thiết kế 1920 (co theo màn hình, tối đa 1920).
 * Khung PNG giữ nguyên tỷ lệ gốc; ô nội dung đặt theo % toạ độ đo trên PNG.
 * Kích thước hiển thị khung (u): chiều rộng vùng có nội dung khớp chiều rộng khung trong ảnh tham chiếu (x2.471).
 * Màu lấy mẫu từ ảnh tham chiếu: nền footer #072916, dải menu #073522, nút vàng #f9edbf,
 * chữ menu sáng nhất #eff5c0, mô tả đặc sắc #cedac9. Chữ nhỏ (nhãn/ngày) ước lượng do ảnh tham chiếu nhoè.
 */

:root {
    --u: calc(min(100vw, 1920px) / 1920);
    --t: 1;
    --hs-footer: #072916;
    --hs-jade: #073522;
    --hs-gold: #f9edbf;
    --hs-cream: #f3edc0;
    --hs-feature-desc: #cedac9;
}

@media (max-width: 899px) {
    :root {
        --u: calc(100vw / 900);
        --t: 1.25;
    }
}

html {
    scroll-behavior: smooth;
}

.hs-body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: #1d3324;
    background-color: #dfe8d6;
    background-image: url('../images/bg-page.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    overflow-x: hidden;
}

.hs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------- HEADER (Header.png 2172x724, bbox x24..2150 y194..441) ---------------- */
.hs-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: calc(100vw * 248 / 2127);
    pointer-events: none;
}

.hs-header__inner {
    position: absolute;
    left: calc(100vw * -24 / 2127);
    top: calc(100vw * -194 / 2127);
    width: calc(100vw * 2172 / 2127);
    aspect-ratio: 2172 / 724;
}

.hs-header__bar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.hs-header__logo {
    position: absolute;
    left: 5.755%;
    top: 29.696%;
    width: 11.970%;
    height: 35.912%;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hs-header__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hs-header__nav {
    position: absolute;
    left: 21.179%;
    top: 43.923%;
    width: 57.090%;
    height: 11.878%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    pointer-events: auto;
}

.hs-header__nav a,
.hs-header__nav-off {
    color: var(--hs-cream);
    font-size: calc(100vw * 19 / 2127);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.hs-header__nav a:hover {
    color: #ffffff;
}

.hs-header__nav-off {
    cursor: default;
}

.hs-header__cta {
    position: absolute;
    left: 79.512%;
    top: 43.923%;
    width: 14.733%;
    height: 11.878%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b3a22;
    font-size: max(10px, calc(100vw * 22 / 2127));
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    pointer-events: auto;
}

/* ---------------- HERO (nằm sẵn trong bg-page.png) ---------------- */
.hs-hero {
    position: relative;
    height: calc(100vw * 1040 / 1920);
}

/* ---------------- SECTION + KHUNG ---------------- */
.hs-sec {
    position: relative;
    display: flow-root;
}

.hs-sec + .hs-sec {
    margin-top: calc(var(--u) * 20);
}

.hs-scroll {
    display: flow-root;
}

.hs-frame {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.hs-frame__img {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Kích thước khung (u) + cắt phần trong suốt trên/dưới bbox */
.hs-frame--tintuc {
    width: calc(var(--u) * 1763.5);
    aspect-ratio: 1672 / 941;
    margin-top: calc(var(--u) * -48.5);
    margin-bottom: calc(var(--u) * -87.5);
}

.hs-frame--dacsac {
    width: calc(var(--u) * 1659);
    aspect-ratio: 1448 / 1086;
    margin-top: calc(var(--u) * -213.1);
    margin-bottom: calc(var(--u) * -199.4);
}

.hs-frame--gameplay {
    width: calc(var(--u) * 1832);
    aspect-ratio: 1672 / 941;
    margin-top: calc(var(--u) * -100.8);
    margin-bottom: calc(var(--u) * -101.9);
}

.hs-frame--nhanvat {
    width: calc(var(--u) * 1628.5);
    aspect-ratio: 1672 / 941;
    margin-top: calc(var(--u) * -31.2);
    margin-bottom: calc(var(--u) * -61.4);
}

.hs-frame--thegioi {
    width: calc(var(--u) * 1862.6);
    aspect-ratio: 1672 / 941;
    margin-top: calc(var(--u) * -157.1);
    margin-bottom: calc(var(--u) * -212.8);
}

.hs-slot {
    position: absolute;
}

/* Ảnh nằm DƯỚI khung (lỗ trong suốt) */
.hs-slot--media {
    z-index: 1;
    overflow: hidden;
    background: #0f3423;
}

.hs-slot--media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ô môn phái: lỗ hình vòm nhọn, bỏ nền dự phòng để không lộ góc chữ nhật ngoài vòm */
.hs-slot--school {
    background: transparent;
}

.hs-slot--school img {
    object-fit: contain;
}

/* Chữ / nút nằm TRÊN khung */
.hs-slot--text,
.hs-slot--caption {
    z-index: 3;
}

.hs-slot--caption {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 0 calc(var(--u) * 16) calc(var(--u) * 22);
    box-sizing: border-box;
    pointer-events: none;
}

.hs-slot--center {
    justify-content: center;
    padding-left: 0;
}

.hs-caption {
    color: #fffbe6;
    font-size: calc(var(--u) * 15 * var(--t));
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.25;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.6);
}

.hs-slot--main .hs-caption {
    font-size: calc(var(--u) * 19 * var(--t));
}

.hs-arrow {
    position: absolute;
    z-index: 3;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.hs-arrow:focus-visible {
    outline: 2px solid var(--hs-gold);
    outline-offset: 2px;
}

/* ---------------- TIN TỨC & SỰ KIỆN ---------------- */
.hs-news {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * 14);
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
}

.hs-news__tag {
    align-self: flex-start;
    padding: calc(var(--u) * 3) calc(var(--u) * 10);
    border-radius: calc(var(--u) * 3);
    color: #ffffff;
    font-size: calc(var(--u) * 12 * var(--t));
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hs-news__tag--red {
    background: #b3372b;
}

.hs-news__tag--green {
    background: #2c6a47;
}

.hs-news__title {
    display: -webkit-box;
    margin-top: calc(var(--u) * 12);
    overflow: hidden;
    color: #24392a;
    font-size: calc(var(--u) * 22 * var(--t));
    font-weight: 600;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hs-news__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    color: #6b7a6c;
    font-size: calc(var(--u) * 14 * var(--t));
}

.hs-news__go {
    color: #24392a;
    font-size: calc(var(--u) * 22 * var(--t));
    line-height: 1;
}

.hs-news:hover .hs-news__title {
    color: #0b3a22;
}

/* ---------------- ĐẶC SẮC NỔI BẬT ---------------- */
.hs-feature__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: calc(var(--u) * 18) calc(var(--u) * 26);
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

.hs-feature__icon {
    width: calc(var(--u) * 120);
    height: calc(var(--u) * 120);
    object-fit: contain;
}

.hs-feature__title {
    margin-top: calc(var(--u) * 18);
    color: #f5e7b0;
    font-size: calc(var(--u) * 21 * var(--t));
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hs-feature__desc {
    display: -webkit-box;
    margin-top: calc(var(--u) * 14);
    overflow: hidden;
    color: var(--hs-feature-desc);
    font-size: calc(var(--u) * 15 * var(--t));
    line-height: 1.5;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* ---------------- TẢI GAME ---------------- */
.hs-download {
    position: relative;
    display: flow-root;
    margin-top: calc(var(--u) * 40);
    padding: calc(var(--u) * 60) calc(var(--u) * 20) calc(var(--u) * 120);
    text-align: center;
}

.hs-download__title {
    margin: 0;
    color: #0d2616;
    font-family: 'Pattaya', 'Inter', sans-serif;
    font-size: calc(var(--u) * 110 * var(--t));
    font-weight: 400;
    line-height: 1.1;
    text-shadow: 0 0 calc(var(--u) * 14) rgba(248, 244, 222, 0.95), 0 0 calc(var(--u) * 4) rgba(248, 244, 222, 0.95);
}

.hs-download__sub {
    margin: calc(var(--u) * 14) 0 0;
    color: #203a26;
    font-size: calc(var(--u) * 22 * var(--t));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 calc(var(--u) * 8) rgba(248, 244, 222, 1), 0 0 calc(var(--u) * 3) rgba(248, 244, 222, 1);
}

.hs-download__sub i {
    font-style: normal;
    margin: 0 0.4em;
}

.hs-download__btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 30);
    margin-top: calc(var(--u) * 40);
}

.hs-store {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 14);
    min-width: calc(var(--u) * 230);
    height: calc(var(--u) * 76);
    padding: 0 calc(var(--u) * 22);
    box-sizing: border-box;
    border: calc(var(--u) * 2) solid rgba(236, 226, 190, 0.8);
    border-radius: calc(var(--u) * 10);
    background: #06140b;
    color: #ffffff;
    text-align: left;
    text-decoration: none;
}

.hs-store__icon {
    width: calc(var(--u) * 38);
    height: calc(var(--u) * 38);
    flex: none;
}

.hs-store__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.hs-store__text small {
    font-size: calc(var(--u) * 13 * var(--t));
}

.hs-store__text b {
    font-size: calc(var(--u) * 27 * var(--t));
    font-weight: 600;
}

/* ---------------- FOOTER ---------------- */
.hs-footer {
    background: var(--hs-footer);
    color: rgba(243, 237, 192, 0.8);
}

.hs-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--u) * 20);
    max-width: calc(var(--u) * 1640);
    min-height: calc(var(--u) * 90);
    margin: 0 auto;
    padding: calc(var(--u) * 16) calc(var(--u) * 20);
    box-sizing: border-box;
}

.hs-footer__tagline {
    margin: 0;
    font-size: calc(var(--u) * 16 * var(--t));
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hs-footer__tagline i {
    font-style: normal;
    margin: 0 calc(var(--u) * 18);
    opacity: 0.7;
}

.hs-footer__social {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 18);
}

.hs-footer__social a {
    display: inline-flex;
    color: rgba(243, 237, 192, 0.85);
    text-decoration: none;
}

.hs-footer__social svg {
    width: calc(var(--u) * 26);
    height: calc(var(--u) * 26);
    fill: currentColor;
}

.hs-footer__zalo {
    font-size: calc(var(--u) * 16 * var(--t));
    font-weight: 800;
}

/* ---------------- RESPONSIVE: tablet/mobile ---------------- */
@media (max-width: 899px) {
    /*
     * Nền: 100% chiều rộng chỉ cao ~3.1 x vw, không đủ phủ trang mobile (~6.3 x vw).
     * Phóng nền giữ tỷ lệ (2.05 x vw -> cao ~6.4 x vw, cắt hai bên), Hero cao theo cùng tỷ lệ:
     * 1152px nền gốc (= 1040px thiết kế ở 1920) x 2.05 / 2127 = 1.1103 x vw.
     */
    .hs-body {
        background-size: calc(100vw * 2.05) auto;
    }

    .hs-hero {
        height: calc(100vw * 1.1103);
    }

    .hs-header__nav {
        display: none;
    }

    /* Khung giữ nguyên tỷ lệ, cuộn ngang thay vì thu nhỏ cả khung */
    .hs-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .hs-scroll::-webkit-scrollbar {
        display: none;
    }

    .hs-frame {
        margin-left: 0;
        margin-right: 0;
    }

    .hs-footer__inner {
        flex-direction: column;
        text-align: center;
    }
}

/* ================= TRANG TIN TỨC + CHI TIẾT BÀI (news, news_detail) =================
 * Bố cục theo jxttk /tin-tuc (tranh đầu trang -> khung bo góc chứa tab + danh sách thẻ -> footer),
 * màu dùng bảng màu HC Arena: nền khung ngọc #073522 -> #072916, viền/tab vàng #f9edbf, thẻ kem #f3edc0.
 */
.hs-subhero {
    /* Cao bằng .hs-hero trang chủ để hiện trọn tranh + logo trong bg-page.png */
    height: calc(100vw * 1040 / 1920);
}

.hs-panel {
    position: relative;
    width: calc(var(--u) * 1440);
    margin: 0 auto;
    padding: calc(var(--u) * 30);
    box-sizing: border-box;
    border: 1px solid rgba(249, 237, 191, 0.55);
    border-radius: max(12px, calc(var(--u) * 18));
    background: linear-gradient(180deg, rgba(7, 53, 34, 0.95) 0%, rgba(7, 41, 22, 0.95) 100%);
    box-shadow: inset 0 0 calc(var(--u) * 48) rgba(0, 0, 0, 0.35), 0 calc(var(--u) * 12) calc(var(--u) * 36) rgba(0, 0, 0, 0.35);
    color: var(--hs-cream);
}

.hs-panel + .hs-panel {
    margin-top: calc(var(--u) * 24);
}

.hs-panel:last-child {
    margin-bottom: calc(var(--u) * 90);
}

/* Tab chuyên mục */
.hs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--u) * 8) calc(var(--u) * 44);
    padding: 0 calc(var(--u) * 6) calc(var(--u) * 18);
    border-bottom: 2px solid rgba(249, 237, 191, 0.6);
}

.hs-tabs__item {
    position: relative;
    padding: calc(var(--u) * 6) 0;
    color: rgba(243, 237, 192, 0.6);
    font-size: calc(var(--u) * 28 * var(--t));
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.hs-tabs__item:hover {
    color: var(--hs-cream);
}

.hs-tabs__item.is-active {
    color: var(--hs-gold);
    text-shadow: 0 0 calc(var(--u) * 12) rgba(249, 237, 191, 0.35);
}

.hs-tabs__item.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--u) * -20);
    height: calc(var(--u) * 4);
    border-radius: calc(var(--u) * 2);
    background: var(--hs-gold);
}

/* Danh sách thẻ */
.hs-newslist__list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--u) * 14);
    margin-top: calc(var(--u) * 22);
}

.hs-newslist__empty {
    margin: 0;
    padding: calc(var(--u) * 48) 0;
    color: rgba(243, 237, 192, 0.7);
    font-size: calc(var(--u) * 20 * var(--t));
    text-align: center;
}

.hs-card {
    display: flex;
    gap: calc(var(--u) * 20);
    padding: calc(var(--u) * 12);
    border: 1px solid rgba(249, 237, 191, 0.9);
    border-radius: calc(var(--u) * 8);
    background: linear-gradient(180deg, #f8f3d4 0%, #f3edc0 55%, #e6dca4 100%);
    color: #24392a;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.hs-card:hover {
    transform: translateY(calc(var(--u) * -2));
    box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(0, 0, 0, 0.35);
}

.hs-card__thumb {
    flex: 0 0 auto;
    width: calc(var(--u) * 278);
    height: calc(var(--u) * 156);
    overflow: hidden;
    border: 1px solid rgba(7, 53, 34, 0.25);
    border-radius: calc(var(--u) * 5);
    background: #cfd8bf;
}

.hs-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hs-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: calc(var(--u) * 4) 0;
}

.hs-card__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #24392a;
    font-size: calc(var(--u) * 30 * var(--t));
    font-weight: 700;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hs-card:hover .hs-card__title {
    color: #0b3a22;
}

.hs-card__desc {
    display: -webkit-box;
    margin: calc(var(--u) * 8) 0 0;
    overflow: hidden;
    color: #4a5b4d;
    font-size: calc(var(--u) * 22 * var(--t));
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hs-card__meta {
    display: flex;
    align-items: center;
    gap: calc(var(--u) * 14);
    margin-top: auto;
    padding-top: calc(var(--u) * 10);
    color: #6b7a6c;
    font-size: calc(var(--u) * 18 * var(--t));
}

.hs-card__meta .hs-news__tag {
    font-size: calc(var(--u) * 14 * var(--t));
}

/* Phân trang */
.hs-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 8);
    margin-top: calc(var(--u) * 26);
}

.hs-pager__btn,
.hs-pager__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: max(28px, calc(var(--u) * 36));
    height: max(28px, calc(var(--u) * 36));
    padding: 0 calc(var(--u) * 6);
    box-sizing: border-box;
    border-radius: calc(var(--u) * 5);
    color: var(--hs-cream);
    font-size: max(14px, calc(var(--u) * 18));
    font-weight: 700;
    text-decoration: none;
}

.hs-pager__btn {
    border: 1px solid rgba(249, 237, 191, 0.4);
}

.hs-pager__btn:hover {
    border-color: var(--hs-gold);
    color: var(--hs-gold);
}

.hs-pager__btn.is-active {
    border-color: var(--hs-gold);
    background: var(--hs-gold);
    color: var(--hs-jade);
}

.hs-pager__btn.is-disabled {
    opacity: 0.35;
}

/* Chi tiết bài */
.hs-article-head {
    padding-top: calc(var(--u) * 20);
    padding-bottom: calc(var(--u) * 20);
    text-align: center;
}

.hs-article-head__title {
    margin: 0;
    font-size: calc(var(--u) * 30 * var(--t));
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-article-head__title a {
    color: var(--hs-gold);
    text-decoration: none;
}

.hs-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 6) calc(var(--u) * 12);
    margin-top: calc(var(--u) * 12);
    padding-top: calc(var(--u) * 12);
    border-top: 1px solid rgba(249, 237, 191, 0.3);
    color: rgba(243, 237, 192, 0.6);
    font-size: calc(var(--u) * 18 * var(--t));
}

.hs-crumb a {
    color: var(--hs-cream);
    text-decoration: none;
}

.hs-crumb a:hover {
    color: var(--hs-gold);
}

.hs-crumb__current {
    max-width: 100%;
    overflow: hidden;
    color: var(--hs-gold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hs-article__paper {
    padding: calc(var(--u) * 44) calc(var(--u) * 90) calc(var(--u) * 56);
    border: 1px solid rgba(249, 237, 191, 0.9);
    border-radius: calc(var(--u) * 10);
    background: linear-gradient(180deg, #f8f3d4 0%, #f3edc0 100%);
    color: #24392a;
}

.hs-article__title {
    margin: 0;
    color: var(--hs-jade);
    font-size: calc(var(--u) * 36 * var(--t));
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
}

.hs-article__date {
    margin: calc(var(--u) * 10) 0 0;
    color: #6b7a6c;
    font-size: calc(var(--u) * 18 * var(--t));
    text-align: center;
}

.hs-article__content {
    margin-top: calc(var(--u) * 30);
    color: #24392a;
    font-size: max(15px, calc(var(--u) * 20));
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.hs-article__content > :first-child {
    margin-top: 0;
}

.hs-article__content h1,
.hs-article__content h2,
.hs-article__content h3,
.hs-article__content h4 {
    margin: 1.2em 0 0.5em;
    color: var(--hs-jade);
    line-height: 1.35;
}

.hs-article__content p {
    margin: 0 0 0.9em;
}

.hs-article__content a {
    color: #2c6a47;
    font-weight: 600;
}

.hs-article__content img,
.hs-article__content video,
.hs-article__content iframe {
    max-width: 100%;
    height: auto;
    border-radius: calc(var(--u) * 6);
}

.hs-article__content table {
    width: 100%;
    border-collapse: collapse;
}

.hs-article__content th,
.hs-article__content td {
    padding: 0.4em 0.6em;
    border: 1px solid rgba(7, 53, 34, 0.3);
}

.hs-article__content th {
    background: rgba(7, 53, 34, 0.1);
}

.hs-article__content blockquote {
    margin: 1em 0;
    padding: 0.4em 1em;
    border-left: 4px solid #2c6a47;
    background: rgba(7, 53, 34, 0.06);
}

.hs-related {
    margin-top: calc(var(--u) * 30);
}

.hs-related__title {
    margin: 0;
    padding-bottom: calc(var(--u) * 14);
    border-bottom: 2px solid rgba(249, 237, 191, 0.5);
    color: var(--hs-gold);
    font-size: calc(var(--u) * 26 * var(--t));
    font-weight: 700;
}

@media (max-width: 899px) {
    .hs-subhero {
        height: calc(100vw * 1.1103);
    }

    .hs-panel {
        width: calc(100% - 24px);
        padding: 14px 12px;
    }

    .hs-panel + .hs-panel {
        margin-top: 14px;
    }

    .hs-panel:last-child {
        margin-bottom: 40px;
    }

    .hs-tabs {
        flex-wrap: nowrap;
        gap: 22px;
        padding-bottom: 12px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .hs-tabs::-webkit-scrollbar {
        display: none;
    }

    .hs-tabs__item {
        font-size: 17px;
    }

    .hs-tabs__item.is-active::after {
        bottom: -13px;
        height: 3px;
    }

    .hs-newslist__list {
        gap: 10px;
        margin-top: 14px;
    }

    .hs-card {
        gap: 10px;
        padding: 8px;
        border-radius: 6px;
    }

    .hs-card__thumb {
        width: 34vw;
        height: calc(34vw * 156 / 278);
        border-radius: 4px;
    }

    .hs-card__body {
        padding: 0;
    }

    .hs-card__title {
        font-size: 15px;
    }

    .hs-card__desc {
        margin-top: 4px;
        font-size: 13px;
        -webkit-line-clamp: 1;
    }

    .hs-card__meta {
        gap: 8px;
        padding-top: 6px;
        font-size: 12px;
    }

    .hs-card__meta .hs-news__tag {
        padding: 2px 6px;
        font-size: 10px;
    }

    .hs-pager {
        margin-top: 16px;
    }

    .hs-article-head__title {
        font-size: 20px;
    }

    .hs-crumb {
        font-size: 13px;
    }

    .hs-crumb__current {
        max-width: 60vw;
    }

    .hs-article__paper {
        padding: 18px 14px 24px;
        border-radius: 6px;
    }

    .hs-article__title {
        font-size: 20px;
    }

    .hs-article__date {
        font-size: 13px;
    }

    .hs-article__content {
        margin-top: 16px;
    }

    .hs-related {
        margin-top: 18px;
    }

    .hs-related__title {
        font-size: 18px;
    }
}