/* Font này vốn chỉ khai báo trong chi-tiet-tin.css, mà file đó chỉ nạp ở
           trang chi tiết tin nên trang chủ không có. Khai báo lại ở đây. */
        @font-face {
            font-family: 'FzGameBrV2';
            src: url('/fonts/FzGameBrV2.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        /* ===== Owl Carousel CSS ===== */
        .owl-carousel .owl-wrapper:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0
        }

        .owl-carousel,
        .owl-carousel .owl-wrapper {
            display: none;
            position: relative
        }

        .owl-carousel {
            width: 100%;
            -ms-touch-action: pan-y
        }

        .owl-carousel .owl-wrapper-outer {
            overflow: hidden;
            position: relative;
            width: 100%
        }

        .owl-carousel .owl-wrapper-outer.autoHeight {
            -webkit-transition: height .5s ease-in-out;
            -moz-transition: height .5s ease-in-out;
            -ms-transition: height .5s ease-in-out;
            -o-transition: height .5s ease-in-out;
            transition: height .5s ease-in-out
        }

        .owl-carousel .owl-item {
            float: left
        }

        .owl-controls .owl-buttons div,
        .owl-controls .owl-page {
            cursor: pointer
        }

        .owl-controls {
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent
        }

        .grabbing {
            cursor: url(grabbing.png) 8 8, move
        }

        .owl-carousel .owl-item,
        .owl-carousel .owl-wrapper {
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0)
        }

        /* ===== Index CSS ===== */
        @charset "UTF-8";

        body,
        html {
            color: #333;
            background: #272727;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: "Roboto", "LeagueGothic-Regular", sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        ::-webkit-scrollbar {
            width: 0;
        }

        .imgFull {
            display: block;
            width: 100%;
            height: auto;
        }

        .px {
            position: fixed;
        }

        .pa {
            position: absolute;
        }

        .pr {
            position: relative;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: none;
        }

        @keyframes zoomOut {

            0%,
            100% {
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
            }

            50% {
                -webkit-transform: scale(1.2);
                -moz-transform: scale(1.2);
                -ms-transform: scale(1.2);
                -o-transform: scale(1.2);
                transform: scale(1.2);
            }
        }

        .zoomOut {
            -webkit-animation: zoomOut 0.7s infinite linear;
            -o-animation: zoomOut 0.7s infinite linear;
            animation: zoomOut 0.7s infinite linear;
        }

        @keyframes UpDown {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes flyIn {
            0% {
                transform: scale(0);
                opacity: 0;
                filter: blur(20px);
            }

            100% {
                transform: scale(1);
                opacity: 1;
                filter: blur(0);
            }
        }

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

        .title {
            width: 38.3854166667vw;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        /*
         * Hoa văn đỏ hai bên chữ tiêu đề (icon_2_ben_chu.webp, 125x44).
         *
         * Ba ảnh title chỉ có chữ đen, không có hoa văn (quét pixel: 0 điểm đỏ),
         * nên vẽ thêm bằng ::before/::after, đặt tuyệt đối NGOÀI khung ảnh chữ —
         * ảnh chữ giữ nguyên kích thước cũ, không phải co lại nhường chỗ.
         *
         * Mọi số đo dùng % của .title (không dùng vw): nhờ vậy một bộ số chạy
         * đúng cho cả PC (title 38.39vw) lẫn mobile (71.29vw), vì phần chữ trong
         * ảnh luôn chiếm cùng một tỉ lệ bề ngang ảnh.
         *   width 16.961% = 125/737, đúng cỡ hoa văn so với ảnh chữ trong bản vẽ.
         *
         * Bản gốc quay sang trái (đo mật độ theo cột: phần xoáy dày nằm ở 30-75,
         * đuôi mảnh vươn về phải) nên ::before dùng nguyên, ::after lật scaleX(-1).
         */
        .title::before,
        .title::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 16.961%;
            aspect-ratio: 125 / 44;
            background: url("/images/image_ttgh/icon_2_ben_chu.webp") center/contain no-repeat;
        }

        .title::before {
            right: 100%;
            transform: translateY(-50%);
        }

        .title::after {
            left: 100%;
            transform: translateY(-50%) scaleX(-1);
        }

        /*
         * Ba ảnh chữ chừa lề trong suốt khác nhau nên nếu để chung một khoảng
         * cách thì hoa văn lúc sát chữ lúc rời hẳn ra. Đo mép chữ thật trong
         * từng ảnh (tính theo % bề ngang ảnh 737px):
         *
         *              lề trái   lề phải
         *   page3      4.342%    2.443%
         *   page4      0%        1.357%
         *   page5      6.649%    5.427%
         *
         * Margin = 3.2% (khoảng hở muốn có) trừ đi lề sẵn có, nên cả sáu chỗ đều
         * hở đúng 3.2% bề ngang ảnh. Số âm nghĩa là hoa văn thò vào phần lề
         * trong suốt của ảnh — không đè lên nét chữ nào.
         */
        .page3 .title::before { margin-right: -1.142%; }
        .page3 .title::after  { margin-left: 0.757%; }

        .page4 .title::before { margin-right: 3.2%; }
        .page4 .title::after  { margin-left: 1.843%; }

        .page5 .title::before { margin-right: -3.449%; }
        .page5 .title::after  { margin-left: -2.227%; }

        .imgFull {
            width: 100%;
            height: auto;
        }

        .page {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        .page .leaves-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
            z-index: 5;
            opacity: 0;
            transition: opacity 1s ease;
        }

        .page .leaves-container.active {
            opacity: 1;
        }

        .page .leaves-container .leaf {
            position: absolute;
            top: -10%;
            width: var(--sz);
            height: var(--sz);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0;
            transform-origin: center;
            animation-name: leafFall;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            will-change: transform, opacity;
            filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
        }

        @media (max-width: 1024px) {
            .page .leaves-container .leaf {
                width: calc(var(--sz) + 0.5vw);
                height: calc(var(--sz) + 0.5vw);
            }
        }

        /*
         * display: block cho cả <picture> lẫn ảnh nền bên trong.
         *
         * Ảnh nền giờ bọc trong <picture> để chọn bản PC/mobile. Cả hai thẻ
         * mặc định là inline, mà hộp inline luôn chừa chỗ cho phần đuôi chữ
         * dưới đường baseline -> hở một vạch ~4px dưới đáy ảnh, thấy rõ ở
         * mobile. Trước đây không bị vì cặp class showOnPc/showOnMobile có
         * display:block !important, bỏ hai class đó là mất luôn.
         */
        .page picture {
            display: block;
        }

        .page .background {
            position: relative;
            z-index: 1;
            display: block;
            width: 100%;
            height: auto;
        }

        .page .page-inner {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            padding-top: 1.5625vw;
        }

        a {
            transition: all 0.3s ease;
            display: block;
        }

        a:hover {
            transform: scale(1.05);
            filter: brightness(1.1);
        }

        .showOnMobile {
            display: none !important;
        }

        .showOnPc {
            display: block !important;
        }

        /* Side menu & footer đã chuyển sang /css/side-menu-footer.css (dùng chung). */

        .page1 .page-inner,
        .page1-news .page-inner {
            padding-top: 1.0416666667vw;
        }

        /*
         * Logo game canh CHÍNH GIỮA, rơi vào khoảng trời phía trên mặt trời
         * của bg_poster_new.webp. Đĩa mặt trời trong ảnh nằm ở x = 51.46% bề
         * rộng (đo trên ảnh gốc 1920x1076: tâm đĩa ở x≈988px), tức lệch phải
         * tâm trang chưa tới 1.5% — canh giữa là logo nằm đúng trên nó.
         *
         * Bản cũ đẩy logo sang trái bằng margin-left 19.79vw nên logo nằm đè
         * lên nhân vật nam bên trái chứ không phải khoảng trời giữa ảnh.
         *
         * Chỉ khối PC này đổi. Bản mobile (@media max-width: 1024px) vốn đã
         * margin: 0 auto, không đụng tới.
         *
         * Mép dưới logo ở 12.5vw (1.04vw padding-top của .page-inner + 11.46vw
         * chiều cao logo), còn đỉnh đĩa mặt trời ở 17.08vw — logo nằm trọn
         * phía trên mặt trời, không đè lên.
         */
        /*
         * --logo-w là chỗ DUY NHẤT chỉnh cỡ logo trên PC. Slogan .text-p1 bên
         * dưới trừ ngược biến này ra khỏi margin-top của nó, nên logo to nhỏ
         * bao nhiêu slogan cũng đứng nguyên một chỗ, không bị đẩy xuống.
         *
         * Ảnh BIG_TEXT_LOGO.webp là 1536x1024, tỉ lệ 3/2, nên
         *   chiều cao logo = --logo-w * 2 / 3
         * Đổi ảnh khác tỉ lệ thì phải sửa cả hệ số 2/3 ở .text-p1.
         */
        .page1,
        .page1-news {
            --logo-w: 26.1875vw;
        }

        .page1 .logo-game,
        .page1-news .logo-game {
            width: var(--logo-w);
            display: block;
            margin: 0 auto;
        }

        .page1 .layer .age-rating,
        .page1-news .layer .age-rating {
            position: absolute;
            bottom: 1.5625vw;
            left: 0.78125vw;
            width: 15.8854166667vw;
        }

        .page1 .layer .logo-vplay,
        .page1-news .layer .logo-vplay {
            position: absolute;
            top: 0;
            right: 1.0416666667vw;
            width: 8.1770833333vw;
        }

        .page1 .layer.video-layer,
        .page1-news .layer.video-layer {
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .page1 .layer.video-layer video,
        .page1-news .layer.video-layer video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /*
         * VỊ TRÍ SLOGAN KHÔNG ĐỔI THEO CỠ LOGO
         *
         * .text-p1 nằm trong dòng chảy ngay sau .logo-game, nên phóng to logo
         * là slogan bị đẩy xuống đúng bằng phần logo cao thêm. Ở đây ghim theo
         * MỘT MỐC CỐ ĐỊNH: 34.375vw là khoảng cách từ đỉnh .top-layer xuống
         * mép trên slogan, rồi trừ đi chiều cao logo (--logo-w * 2/3) để ra
         * margin-top thật.
         *
         * Kiểm lại: logo 17.1875vw (cỡ cũ) → 34.375 − 11.4583 = 22.9167vw,
         * đúng bằng con số hardcode trước đây; logo 26.1875vw (cỡ mới) →
         * 34.375 − 17.4583 = 16.9167vw. Slogan đứng y một chỗ ở cả hai cỡ.
         *
         * Khối @media (max-width: 1024px) ghi đè cả width lẫn margin của
         * .text-p1 và .logo-game nên mobile không dính công thức này.
         */
        .page1 .layer .text-p1,
        .page1-news .layer .text-p1 {
            width: 42.9583333333vw;
            margin: calc(34.375vw - var(--logo-w) * 2 / 3) auto 0;
            opacity: 0;
        }

        .page1 .layer .text-p1.animate,
        .page1-news .layer .text-p1.animate {
            animation: flyIn 1.5s ease-in-out forwards;
        }

        .page1 .layer.top-layer,
        .page1-news .layer.top-layer {
            z-index: 2;
            position: relative;
        }

        .page1-news .text-p1 {
            opacity: 1 !important;
            animation: UpDown 1s ease-in-out forwards infinite;
            margin-top: 17.7083333333vw !important;
        }

        .page1-news .logo-game {
            margin-left: 0 !important;
        }

        @keyframes leafFall {
            0% {
                transform: translate3d(0, -10%, 0) rotate(0deg);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                transform: translate3d(var(--tx), 120vh, 0) rotate(var(--rot));
                opacity: 0;
            }
        }

        .page2 .page-inner {
            padding-top: 2.2916666667vw;
            z-index: 2;
        }

        .page2 .block1 {
            width: 63.2291666667vw;
            height: 10.3125vw;
            margin: 0 auto;
            background: url("/images/landingpage/bg-download.webp") center center no-repeat;
            background-size: cover;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.8vw;
        }

        /* Không còn lề trái âm: hàng nút giờ có ba nút nên rộng hơn trước, để
           nguyên là Chơi Ngay thò ra ngoài thanh nền. */
        /*
         * Hai ảnh này có viền trong suốt lệch nhau nên align-items:center canh
         * đúng cái khung ảnh chứ không đúng phần nhìn thấy. Dịch bù lại:
         *   btn-playnow  viền trên 13px, dưới 0px  -> phần vẽ thấp 6px
         *   icon-app-bg  viền trên 3px, dưới 9px   -> phần vẽ cao 3px
         * Quy ra vw theo bề rộng đang đặt cho từng phần tử.
         */
        .page2 .block1 .btn-playnow {
            width: 13.3833333333vw;
            position: relative;
            top: -0.35vw;
        }

        .page2 .block1 .icon-app {
            width: 11.5625vw;
            height: 12.03125vw;
            position: relative;
            top: -0.28vw;
            background: url("/images/landingpage/icon-app-bg.webp") center center no-repeat;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .page2 .block1 .icon-app img {
            width: 10.59375vw;
        }

        /*
         * Ba nút tải game xếp ngang. Khung nhìn thấy trong cả ba ảnh đều cao
         * 124px, nhưng khổ ảnh khác nhau — App Store và Google Play 244x143,
         * APK 231x129 — nên bề rộng phải chia theo khổ ảnh, cùng một hệ số
         * 13.4vw / 244px, thì khung hiện ra mới bằng nhau.
         * Khe cũng trừ đi phần viền trong suốt của từng ảnh (10+9 và 13+10 px)
         * để khoảng cách nhìn thấy đều nhau.
         */
        /* display: contents để hai nút bên trong thành con trực tiếp của
           .block1, nhờ vậy space-between chia đều khe cho cả năm phần tử. */
        .page2 .block1 .button-store {
            display: contents;
        }

        .page2 .block1 .button-store .btn {
            width: 11.5vw;
        }

        .page2 .block1 .btn-apk {
            width: 10.89vw;
        }

        /*
         * KHỔ HỘP PHẢI ĐÚNG TỈ LỆ ẢNH bg_page2-w1422_1.webp (1422x759)
         *
         * background-size: 100% 100% ép ảnh vừa khít hộp nên hộp lệch tỉ lệ
         * bao nhiêu là quyển sách méo bấy nhiêu. 67.34 / 35.94 = 1.8735, đúng
         * 1422/759 — đừng sửa một trong hai số mà quên số kia.
         *
         * Trước đây hộp là 76.0417 x 28vw (tỉ lệ 2.716) nên sách bị giãn ngang
         * 45%. Số 28vw đó là gõ tay từ hồi .block2 còn là hàng slider
         * #slider-p2 (commit 9968d2f), không liên quan gì tới khổ ảnh; sau này
         * .block2 đổi thành khung tin nhưng chưa ai đối chiếu lại.
         *
         * TẠI SAO KHÔNG GIỮ BỀ RỘNG 76vw CHO SÁCH TO NHƯ CŨ
         *
         * .page2 cao cố định 1151px vì chiều cao do thẻ <img class="background">
         * quy định (bg-page2-w1920.webp, 1920x1151, height:auto). Giữ 76.0417vw
         * mà đúng tỉ lệ thì hộp cao 779px, cộng block1 + block3 là tràn 161px
         * ra ngoài nền page2, đè xuống page3. Nên sách phải hẹp lại.
         *
         * Margin trên/dưới cũng bóp theo (4.1667 -> 1.77vw ở đây, 4.9896 ->
         * 2.34vw ở .block3) để vừa: block3 còn dư đúng 25px trước khi hết nền.
         */
        .page2 .block2 {
            width: 67.34vw;
            position: relative;   /* mốc neo cho .news-block đặt theo % */
            margin: 1.77vw auto 0;
            background: url("/images/block-news/bg_page2-w1422_1.webp") center/100% 100% no-repeat;
            /* 67.34 / 1.8735 = 35.94. Đổi width thì phải chia lại số này. */
            min-height: 35.94vw;
        }

        /*
         * Khối tin nằm trên TRANG PHẢI của quyển sách trong bg_page2.png. Ảnh
         * nền được kéo 100% 100% nên toạ độ ảnh quy thẳng ra phần trăm của
         * .block2 — nhờ vậy khối tin bám đúng trang giấy ở mọi bề rộng màn hình.
         *
         * Vùng giấy kẻ dòng đo trên ảnh gốc 1422x759:
         *   trái 770px  -> 54.15%      trên  90px  -> 11.86%
         *   phải 1270px -> 89.31%      dưới  620px -> 81.69%
         */
        .page2 .block2 .news-block {
            position: absolute;
            left: 54.15%;
            top: 11.86%;
            width: 35.16%;
            height: 69.83%;
            padding: 0;
            /* Đặt ở khối cha để tab, tiêu đề, ngày và nút "Xem thêm" cùng theo.
               .menu-item vốn để font-family: inherit nên cũng nhận được. */
            font-family: 'FzGameBrV2', sans-serif;

            /*
             * Nghiêng bám theo đường chỉ in trên giấy.
             *
             * Không phải phối cảnh: đo tự tương quan trên ảnh gốc thì khoảng
             * cách giữa các đường chỉ đúng 40px ở mọi cột (x=780 đến x=1200).
             * Trang lùi xa thì khoảng cách phải co lại — nên trang vẽ phẳng,
             * chỉ là các đường chỉ hơi dốc xuống bên phải.
             *
             * Khớp bình phương tối thiểu bốn đường chỉ trên ảnh gốc (y ~321,
             * 402, 481, 562) cho 0.45 / 0.22 / 0.40 / 0.49 độ, sai số RMS ~1px
             * nên là đường thẳng chứ không cong. Trung bình 0.39 độ.
             *
             * Để đúng 0.39 độ, KHÔNG nhân hệ số bù nào nữa: hộp .block2 nay
             * đã đúng tỉ lệ ảnh (67.34/35.94 = 1.8735 = 1422/759) nên ảnh không
             * còn bị nén dọc. Bản cũ hộp méo, hệ số (28/76.0417)/(759/1422) =
             * 0.69, nên góc phải hạ xuống 0.27 độ; nếu có ai đổi lại khổ hộp
             * thì nhớ tính lại góc theo cách đó.
             *
             * skewY chứ không phải rotate: chữ vẫn đứng thẳng, chỉ có đường
             * chân chữ dốc theo — đúng như viết trên giấy kẻ dốc.
             */
            transform: skewY(0.39deg);
        }

        /* Xếp cột để danh sách tin tự giãn lấp hết chiều cao trang giấy: trước
           đây danh sách bị chốt max-height nên tin cuối bị cắt ngang và nút
           "Xem thêm" đè lên nó. */
        .page2 .block2 .news-block .news-block-inner {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .page2 .block2 .news-block .news-block-content {
            flex: 1;
            min-height: 0;
        }

        /*
         * Trước dùng space-between để đẩy nút "+" sang mép phải. Nút đó đã
         * comment nên chỉ còn hàng tab, space-between hoá ra dồn nó sang trái —
         * đổi sang center cho hàng tab nằm giữa khổ giấy.
         * top âm để nhích hàng tab lên, không dùng margin vì margin sẽ kéo cả
         * danh sách tin lên theo.
         *
         * LEFT ÂM LÀ CỐ Ý, ĐỪNG BỎ
         *
         * justify-content: center chỉ căn giữa hàng tab trong .news-block, mà
         * .news-block lại trải theo VÙNG KẺ DÒNG của bản nền cũ (770..1270 của
         * ảnh 1422), tâm 1020 — trong khi tâm trang giấy phải nằm quanh 1000.
         * Để nguyên thì hàng tab lệch phải thấy rõ: mép phải "Hướng dẫn" thúc
         * vào cụm hoa văn góc phải trong khi bên trái còn hở.
         *
         * -1vw ở khổ 1920 là 19px, cân lại đúng: hai đầu hàng tab đè lên hai
         * cụm hoa văn góc bằng nhau (~12px mỗi bên). Chỉ dịch hàng tab, KHÔNG
         * dịch .news-block, vì danh sách tin bên dưới đã khớp dòng kẻ rồi.
         */
        .page2 .block2 .news-block .news-block-header {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            top: -0.8vw;
            left: -1vw;
        }

        .page2 .block2 .news-block .news-block-header .news-menu {
            display: flex;
            list-style: none;
            gap: 1.5625vw;
            margin: 0;
            padding: 0;
        }

        /*
         * BA TAB ĐỀU LÀ TẤM BIỂN, LẤY THẲNG HAI ẢNH TRONG /images/block-news
         *
         * bg-tab_disable (đỏ, khung vàng) cho tab đang mở, bg-tab-active (đá
         * xám, khung bạc) cho hai tab còn lại. Vệt mực cũ
         * landingpage/bg-tab.webp không còn dùng ở đây nữa.
         *
         * TÊN FILE NGƯỢC VỚI HÌNH THỨC — designer đặt vậy, đã xác nhận với chủ
         * dự án là gán theo mắt nhìn: tấm đỏ rực gán cho .active. Đừng "sửa lại
         * cho khớp tên".
         *
         * BẢN .webp ĐÃ CẮT BỎ LỀ TRONG SUỐT CỦA BẢN .png — ĐỪNG XUẤT LẠI THÔ
         *
         * Hai file .png của designer đều là khung 99x43 nhưng phần vẽ không nằm
         * giữa khung: bg-tab-active chiếm x 0..95 (lề trái 0, lề phải 3),
         * bg-tab_disable chiếm x 1..97 (lề 1/1). Đổ thẳng vào background
         * size 100% 100% thì hai tấm xám vẽ ra hẹp hơn ô 3.6px và lệch trái
         * 1.8px, làm khe giữa tab 2 và tab 3 rộng hơn khe giữa tab 1 và tab 2 —
         * nhìn là thấy hàng tab bị lệch. Bản .webp cắt đúng vào phần vẽ
         * (96x40 và 97x40) nên cả ba tab vẽ ra bằng nhau và đúng giữa ô.
         *
         * KHOÁ CỨNG width/height THEO TỈ LỆ 97/40 = 2.425
         *
         * Đừng quay về min-width + padding: nút tự co giãn theo độ dài nhãn thì
         * khung hoa văn ở bốn góc bị kéo méo, và ba tab ra ba khổ khác nhau.
         * 6.25 / 2.425 = 2.5773 (bản mobile 19.6 / 2.425 = 8.0825). Tấm xám
         * lệch tỉ lệ 1% so với tấm đỏ (96x40 với 97x40), giãn ngang 1% không
         * ai thấy nên hai tấm dùng chung một khổ ô.
         *
         * MÀU CHỮ: RUỘT CẢ HAI TẤM BIỂN ĐỀU TỐI
         *
         * #7E0101 và #6B5A49 — màu nâu #3f2c14 của bản gốc là để đọc trên nền
         * giấy, đặt lên biển là chìm nghỉm, nên cả hai trạng thái đều chữ sáng
         * kèm bóng tối.
         *
         * Vàng #f3e491 trên tấm đỏ chỉ được 8.6:1 và nhìn thực tế còn kém hơn
         * vì FzGameBrV2 là kiểu chữ bút lông nét mảnh; đẩy lên #ffefb5 thành
         * 9.65:1. Chữ tấm xám cũng vậy: #d9c9ae chỉ 4.06:1, đổi sang #efe6d6
         * được 5.33:1. Sắc đỏ nằm trong ảnh nên không dìm tối thêm được bằng
         * CSS — muốn tương phản cao hơn nữa thì phải xuất lại ảnh.
         */
        .page2 .block2 .news-block .news-block-header .news-menu li .menu-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 6.25vw;
            height: 2.5773vw;
            padding: 0;
            border: none;
            background: url("/images/block-news/bg-tab-active.webp") center center no-repeat;
            background-size: 100% 100%;
            font-family: inherit;
            font-size: 1.0416666667vw;
            color: #efe6d6;
            cursor: pointer;
            transition: color 0.3s ease, filter 0.3s ease;
            font-weight: 600;
            white-space: nowrap;
            text-shadow: 0 0.05vw 0.12vw rgba(0, 0, 0, 0.75);
        }

        .page2 .block2 .news-block .news-block-header .news-menu li .menu-item.active {
            background-image: url("/images/block-news/bg-tab_disable.webp");
            color: #ffefb5;
        }

        /* Chỉ sáng tấm biển lên chứ không đổi chữ sang đỏ #8c1219 như bản gốc:
           nền nay là biển tối, chữ đỏ trên đó không đọc được. */
        .page2 .block2 .news-block .news-block-header .news-menu li .menu-item:hover {
            color: #fff6da;
            filter: brightness(1.15);
        }

        .page2 .block2 .news-block .news-block-header .news-menu li .menu-item.active:hover {
            color: #fff6da;
        }

        .page2 .block2 .news-block .news-block-header .btn-plus {
            width: 1.3020833333vw;
            height: 1.3020833333vw;
            border: 2px solid #a61d24;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #a61d24;
            font-size: 1.3020833333vw;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .page2 .block2 .news-block .news-block-header .btn-plus:hover {
            background: #a61d24;
            color: #fff;
        }

        .page2 .block2 .news-block .news-block-content .news-pane {
            display: none;
        }

        /*
         * Dùng animation riêng chỉ đổi độ mờ, KHÔNG dùng fadeIn dùng chung.
         * fadeIn có transform: translateY(), mà phần tử mang transform thì tự
         * thành mốc neo cho con đặt tuyệt đối — kể cả khi đã chạy xong và về
         * translateY(0). Như vậy .news-list-wrap sẽ tính phần trăm theo pane
         * (mốc phụ thuộc chiều cao hàng tab) thay vì theo .news-block.
         */
        @keyframes hienDanTin {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .page2 .block2 .news-block .news-block-content .news-pane.active {
            display: flex;
            flex-direction: column;
            height: 100%;
            animation: hienDanTin 0.5s ease forwards;
        }

        /* Danh sách tin dùng font thường cho dễ đọc; FzGameBrV2 chỉ giữ ở hàng
           tab và nút "Xem thêm" — nét thư pháp hợp làm nhãn ngắn chứ đọc tiêu
           đề dài và ngày giờ thì mệt mắt. Phải ghi lại nguyên bộ font chứ không
           dùng inherit, vì inherit sẽ lấy đúng FzGameBrV2 từ .news-block. */
        .page2 .block2 .news-block .news-block-content .news-pane .news-list {
            list-style: none;
            padding: 0;
            margin: 0;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            font-family: "Roboto", "LeagueGothic-Regular", sans-serif;
        }

        /*
         * Thanh cuộn tự dựng, nghiêng song song với viền trang giấy.
         *
         * Không sửa được ::-webkit-scrollbar cho nghiêng — pseudo-element của
         * thanh cuộn gốc không nhận transform. Nên ẩn hẳn thanh gốc rồi vẽ
         * thanh riêng bằng thẻ thường, thẻ thường thì skew được.
         *
         * Góc: bám vạch viền ngoài của trang bên phải. Truy vết vạch đó rồi khớp
         * bình phương tối thiểu, hai phép đo độc lập cho cùng kết quả:
         *   - trên ảnh gốc, quãng y 200..600 : 5.18 độ, RMS 0.99px
         *     quy sang render (nhân 1.4485 do nén dọc giãn ngang) → 7.49 độ
         *   - đo thẳng trên ảnh render, quãng 320px : 7.39 độ, RMS 0.49px
         * Lấy 7.4 độ.
         */
        .page2 .block2 .news-block .news-block-content .news-pane .news-list::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        .page2 .block2 .news-block .news-block-content .news-pane .news-list {
            scrollbar-width: none;      /* Firefox */
            -ms-overflow-style: none;   /* Edge cũ */
        }

        /*
         * Khung cuộn của danh sách cắt đúng vào hai đường chỉ in trên giấy —
         * mép trên trùng một đường, mép dưới trùng một đường, nên tin bị cắt
         * khi cuộn trông như bị chính dòng kẻ che đi.
         *
         * Các đường chỉ nằm ở y = 161 + 40k trên ảnh gốc (dò ở dải x 970-1070,
         * đúng tâm ngang của khối tin). Khung cũ cắt ở y 180.1 và 548.3, không
         * rơi vào đường nào.
         *
         * Mép trên lấy đường 161 — đường đầu tiên ngay dưới hàng tab. Mép dưới
         * lấy đường 561, cách nhau đúng 10 nhịp kẻ.
         *
         * Quy ra phần trăm của .news-block (trải từ y 90.02 đến 620.03):
         *   161 -> 13.39%      561 -> 88.86%      cao 75.47%
         *
         * Phải đặt tuyệt đối chứ không để flex tự chia, vì flex thì mép khung
         * phụ thuộc chiều cao hàng tab phía trên, lệch một chút là trượt khỏi
         * đường chỉ ngay.
         *
         * Mép cắt tự khắc song song với đường chỉ: .news-block đã skewY(0.39deg)
         * nên cả khung này nghiêng theo, không cần xử lý riêng.
         */
        .page2 .block2 .news-block .news-block-content .news-pane .news-list-wrap {
            position: absolute;
            left: 0;
            right: 0;
            top: 13.39%;
            height: 75.47%;
            display: flex;
        }

        /*
         * GÓC NGHIÊNG PHẢI TÍNH LẠI MỖI KHI ĐỔI KHỔ .block2
         *
         * Thanh cuộn phải song song với đường kẻ dọc in ở mép phải trang giấy.
         * Dò đường kẻ đó trên ảnh nền 1422x759 (dải y 170..470, lấy điểm tối
         * nhất mà HAI BÊN đều là giấy để khỏi bắt nhầm mép sách): x đi từ 1267
         * xuống 1293 trên 300px cao, tức dx/dy = 0.0867 => 4.95 độ.
         *
         * Bản cũ để 7.4 độ và hồi đó ĐÚNG, vì hộp .block2 khi ấy bị nén dọc:
         * tỉ lệ vẽ ngang/dọc là 1.0267/0.7083 = 1.4495 nên góc nhìn thấy bị
         * khuếch đại. Hộp nay đúng tỉ lệ ảnh (ngang 0.9093, dọc 0.9091) nên
         * góc vẽ ra bằng đúng góc trên ảnh: 7.4 độ cũ quy về 5.1 độ, khớp với
         * số đo trực tiếp 4.95 độ.
         *
         * Để nguyên 7.4 độ thì thanh lệch ngang 47px trên 364px cao — thành
         * một vệt chéo cắt qua mặt giấy chứ không còn là thanh cuộn.
         */
        .page2 .block2 .news-block .news-block-content .news-pane .news-scroll {
            position: absolute;
            top: 0;
            bottom: 0;
            right: -0.9vw;
            width: 0.2083333333vw;
            border-radius: 0.1041666667vw;
            background: rgba(90, 55, 25, 0.18);
            transform: skewX(5.1deg);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        /* Chỉ hiện khi danh sách thật sự dài hơn khung */
        .page2 .block2 .news-block .news-block-content .news-pane .news-scroll.hien {
            opacity: 1;
            pointer-events: auto;
        }

        .page2 .block2 .news-block .news-block-content .news-pane .news-scroll .news-scroll-thumb {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            background: #a61d24;
            border-radius: inherit;
            cursor: grab;
        }

        .page2 .block2 .news-block .news-block-content .news-pane .news-scroll .news-scroll-thumb:active {
            cursor: grabbing;
        }

        /* Đệm chọn 0.5vw để bốn tin vừa đúng khung giấy: mỗi tin 63px, tổng
           253px trong khung 258px. Để mức cũ 0.677vw thì tổng 280px, tràn ra
           và hiện thanh cuộn đỏ trên mặt giấy. */
        /*
         * Chừa lề phải cho thanh cuộn. Thanh nghiêng 7.4 độ nên điểm gần chữ
         * nhất là ĐẦU thanh (phía trên) — chỗ đó thụt vào 5px so với mép phải
         * danh sách, tức chữ đang đè lên thanh. Chừa 20px thì khe còn đúng 15px
         * tính tại điểm gần nhất đó.
         */
        .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item {
            padding: 0.5vw 1.0416666667vw 0.5vw 0;
            position: relative;
        }

        /*
         * Gạch phân cách vẽ bằng CSS — giống bản mobile.
         *
         * bg_page2.png cũ có dòng kẻ IN SẴN trên trang giấy nên trước đây
         * không kẻ thêm. Nền mới bg_page2-w1422_1.webp bỏ hết các dòng kẻ đó
         * nên phải tự vẽ.
         *
         * Đặt ở ::after chứ không dùng border-bottom: khối tin đang skewY nên
         * gạch phải nằm trong luồng của .news-item để nghiêng theo trang giấy.
         * right: 1.0416666667vw = đúng padding phải của .news-item nên gạch
         * dừng thẳng mép chữ, không đè lên thanh cuộn nghiêng bên phải.
         *
         * bottom: 0 — hai ô kề nhau cùng đệm dọc 0.5vw nên gạch rơi đúng giữa
         * hai khối chữ.
         *
         * height 2px chứ không phải 1px như bản mobile — nếu 1px thì bị "dòng
         * đậm dòng lợt". Mỗi .news-item cao 44.285px (số lẻ, vì font-size và
         * padding đều tính theo vw) nên mép dưới trôi -0.328px mỗi tin: gạch
         * lúc rơi sát số nguyên (1 pixel gần đặc, trông đậm), lúc rơi vào giữa
         * (2 pixel mờ 50/50, trông lợt). Màn PC thường dpr = 1 nên không có
         * pixel dự phòng để bù, và .news-block có skewY(0.39deg) làm trình
         * duyệt tắt luôn cơ chế snap pixel.
         *
         * Dày 2px thì ở BẤT KỲ vị trí lẻ nào cũng luôn còn ít nhất một hàng
         * pixel phủ kín, nên mọi gạch có cùng độ đậm đỉnh. Đổi lại phải hạ
         * alpha 0.55 -> 0.4 để tổng lượng mực không nặng hơn mức cũ.
         * Bản mobile giữ 1px vì điện thoại có dpr 2-3 và giấy mobile vẽ phẳng
         * (transform: none) nên không dính lỗi này.
         */
        .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item::after {
            content: "";
            position: absolute;
            left: 0;
            right: 1.0416666667vw;
            bottom: 0;
            height: 2px;
            background: rgba(0, 0, 0, 0.4);
        }

        /* Tin cuối không kẻ — gạch thừa treo lơ lửng trước nút "Xem thêm". */
        .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item:last-child::after {
            display: none;
        }


        .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item .news-link {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.9375vw;
            color: #241608;
            text-decoration: none;
            font-weight: 700;
            line-height: 1.3;
            /* Giấy có vân và vết ố nên chữ dễ bị chìm vào nền. Quầng sáng mỏng
               phía sau tách chữ khỏi vân giấy mà không cần lót nền đục. */
            text-shadow: 0 0.05vw 0.1vw rgba(255, 250, 235, 0.7);
        }

        .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item .news-link:hover {
            color: #8c1219;
            transform: none !important;
            filter: none !important;
        }

        .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item .news-date {
            display: block;
            font-size: 0.78125vw;
            color: #3f2c14;
            font-weight: 500;
            text-shadow: 0 0.05vw 0.1vw rgba(255, 250, 235, 0.7);
        }

        /*
         * Đồng bộ các dòng kẻ: ép MỌI thành phần chiều dọc của .news-item về
         * số nguyên pixel bằng round().
         *
         * Trước đó mỗi tin cao 41.375px = đệm 6.4 + dòng tiêu đề 15.6 + dòng
         * ngày 12.975 + đệm 6.4 — toàn số lẻ vì font-size lẫn padding đều tính
         * theo vw. Mép dưới vì thế trôi 0.375px mỗi tin, phần lẻ chạy vòng
         * .375 -> .75 -> .125 -> .5 -> ... nên mỗi gạch rơi vào một vị trí khác
         * nhau trong lưới pixel: gạch thì trúng gần trọn một hàng pixel (trông
         * đậm và mảnh), gạch thì bị chia cho hai hàng (trông lợt và dày).
         *
         * Làm tròn từng phần — đệm 7px, dòng tiêu đề 16px, dòng ngày 13px —
         * thì bước nhảy giữa hai tin luôn là số nguyên: 43px với tiêu đề 1
         * dòng, 59px với tiêu đề 2 dòng (line-clamp 2). Không làm tròn thẳng
         * chiều cao cả ô vì tiêu đề dài sẽ bị cắt mất dòng thứ hai.
         *
         * Đệm dùng round(up) chứ không phải round() gần nhất: bước cũ là
         * 42.672px, làm tròn gần nhất cho đệm 6px -> bước 41px (hụt 1.67px,
         * chữ bị dồn lại), còn round(up) cho đệm 7px -> bước 43px, chỉ lệch
         * 0.33px so với nhịp dọc đã canh sẵn cho khung giấy.
         *
         * Mọi gạch khi đó lệch lưới pixel y HỆT nhau nên vẽ ra giống hệt nhau,
         * kể cả lúc cuộn danh sách (cuộn dịch cả cụm nên độ lệch chung không
         * đổi).
         *
         * round() cần Chrome 112+ / Safari 15.4+ / Firefox 118+. Trình duyệt cũ
         * bỏ qua các dòng này và giữ nguyên giá trị vw khai báo phía trên.
         *
         * Bọc trong min-width 1025px để không đụng bản mobile: mobile khai báo
         * font-size bằng px riêng, giấy vẽ phẳng (transform: none) và điện
         * thoại có dpr 2-3 nên không dính lỗi này.
         */
        @media (min-width: 1025px) {
            .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item {
                padding-block: round(up, 0.5vw, 1px);
            }

            .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item .news-link {
                line-height: round(1.21875vw, 1px);
            }

            .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item .news-date {
                line-height: round(1.015625vw, 1px);
            }
        }

        /*
         * NÚT "XEM THÊM" — CHỮ TRẦN + ICON + GẠCH CHÂN, KHÔNG CÒN TẤM BIỂN
         *
         * Bỏ nền bg_button_tin_tuc.webp và toàn bộ đệm ngang đi kèm nó. Còn lại
         * chữ, icon view-plus và một vạch vàng gạch chân.
         *
         * VẠCH LUÔN HIỆN, KHÔNG PHẢI HIỆU ỨNG HOVER
         *
         * Khác với hàng menu ở footer (vạch scaleX(0), hover mới bung ra): bỏ
         * nền rồi thì không còn gì báo hiệu đây là nút bấm nữa nên vạch phải
         * hiện sẵn. Chỉ mượn lại KIỂU vạch của footer — gradient hai đầu mờ dần
         * cho hợp tông hoa văn, không mượn phần đóng/mở.
         *
         * Vạch làm bằng ::after chứ không phải border-bottom vì border cộng
         * thêm chiều cao, đẩy nút lệch khỏi mốc `top` đã căn theo trang giấy.
         *
         * Độ đậm lấy theo .menu-item (hàng tab). Cỡ chữ thì to hơn tab một bậc
         * (1.25 so với 1.0417vw) vì nút này đứng một mình giữa khoảng trống
         * cuối trang giấy, để bằng tab là chìm.
         *
         * Icon giữ tỉ lệ 1.2 lần cỡ chữ, đổi cỡ chữ thì đổi luôn icon.
         *
         * MÀU CHỮ THÌ KHÔNG THEO HÀNG TAB
         *
         * Hàng tab chữ sáng vì có tấm biển tối đằng sau; nút này nằm thẳng
         * trên giấy vàng nên phải dùng màu đà #3f2c14 — cùng màu với dòng ngày
         * tháng của danh sách tin ngay trên nó. Vàng kem #ffefb5 trên giấy
         * #AB8256 chỉ được 3.01:1, màu đà lên 3.83:1.
         *
         * Bóng chữ cũng phải đổi theo sang tông SÁNG: bóng tối dưới chữ tối chỉ
         * làm nhoè thêm chứ không tách được chữ khỏi nền.
         */
        .page2 .block2 .news-block .news-block-content .news-pane .btn-more {
            align-self: center;
            position: relative;
            top: 0.78125vw;   /* 15px ở 1920 */
            flex: none;
            /* Khung danh sách đã ra khỏi dòng chảy nên nút tự dồn xuống đáy */
            margin-top: auto;
            display: flex;
            align-items: center;
            gap: 0.35vw;
            padding: 0 0 0.2vw;
            font-size: 1.25vw;
            font-weight: 600;
            color: #3f2c14;
            text-decoration: none;
            text-shadow: 0 0.05vw 0.1vw rgba(255, 250, 235, 0.7);
            transition: color 0.3s ease, text-shadow 0.3s ease;
        }

        /* Icon view-plus. Bản .webp đã cắt bỏ lề trong suốt của .png gốc
           (79x64 -> 59x60) nên đặt cạnh chữ là sát đúng, khỏi phải bù lề âm. */
        .page2 .block2 .news-block .news-block-content .news-pane .btn-more .btn-more-icon {
            display: block;
            width: 1.5vw;   /* 1.2 x co chu */
            height: auto;
            flex: none;
        }

        .page2 .block2 .news-block .news-block-content .news-pane .btn-more::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 0.1vw;
            background: linear-gradient(90deg, rgba(247, 202, 108, 0), #f7ca6c 25%, #fff6da 50%, #f7ca6c 75%, rgba(247, 202, 108, 0));
            transition: filter 0.3s ease;
        }

        /* Hover đổi sang đỏ #8c1219 — đúng màu hover của tiêu đề tin ngay
           trên nó, cho cả khối tin thống nhất một cách phản hồi. */
        .page2 .block2 .news-block .news-block-content .news-pane .btn-more:hover,
        .page2 .block2 .news-block .news-block-content .news-pane .btn-more:focus-visible {
            color: #8c1219;
            text-decoration: none;
            outline: none;
        }

        .page2 .block2 .news-block .news-block-content .news-pane .btn-more:hover::after,
        .page2 .block2 .news-block .news-block-content .news-pane .btn-more:focus-visible::after {
            filter: brightness(1.25);
        }

        .page2 .block3 {
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 0.5208333333vw;
            /* Bóp lại từ 4.9896vw để nhường chỗ cho .block2 cao lên — xem giải
               thích ở khối .page2 .block2. */
            margin-top: 2.34vw;
        }

        .page2 .block3 .btn {
        display: block;
            width: 16.1979166667vw;
            height: 5.9895833333vw;
        }

        .page2 .block3 .btn .imgFull {
            height: 135%;
            /* height 135% cố ý cho ảnh tràn khỏi khung nút, nhưng .imgFull còn
               có width:100% nên ảnh bị kéo lệch 10% so với tỉ lệ gốc 424x189
               (Lighthouse: image-aspect-ratio). object-fit giữ đúng tỉ lệ mà
               không phải đổi kích thước khung. */
            object-fit: contain;
        }
        .page3 .page3-left {
            position: relative;
            z-index: 2;
            width: 37.0833333333vw;
            margin: -5.2083333333vw 0 0 11.9791666667vw;
        }

        .page3 .page3-left .sect-name {
            width: 30.78125vw;
            margin: 0 auto;
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        .page3 .page3-left .sect-name.changing {
            opacity: 0;
            transform: translateY(10px);
        }

        .page3 .page3-left .char-name {
            width: 23.59375vw;
            margin: -3.125vw auto 0;
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        .page3 .page3-left .char-name.changing {
            opacity: 0;
            transform: translateY(10px);
        }

        /*
         * Khung mới bg-des.png (712x280, cùng tỉ lệ ảnh cũ nên background-size:
         * cover không cắt xén gì) có viền vàng chạm khắc + dây tua đỏ hai bên
         * chiếm nhiều đất hơn hẳn khung cũ (viền cũ mảnh, gần như không đáng
         * kể). Dò từng pixel trên ảnh nguồn (712x280) để tìm vùng an toàn —
         * không dính viền vàng/dây tua (bỏ qua hoạ tiết núi non/mái chùa mờ
         * trong nền, phần đó vốn là trang trí, chữ đè lên vẫn đọc được như
         * khung cũ): trái/phải chừa 85px (dây tua), trên 45px (viền + hoa văn
         * góc), dưới 42px (viền + nút thắt tua đáy) — quy theo % kích thước
         * ảnh nguồn sang vw của khung.
         */
        .page3 .page3-left .char-desc {
            width: 37.0833333333vw;
            height: 14.5833333333vw;
            background: url("/images/image_ttgh/bg-des.webp") center center no-repeat;
            background-size: cover;
            /* Hạ từ 1.275vw xuống 1.05vw: khung mới hẹp hơn khung cũ (viền +
               tua ăn vào), bài mô tả dài nhất (~440 ký tự) mới vừa 7 dòng mà
               không tràn qua padding-bottom, thử trực tiếp trên trình duyệt. */
            font-size: 1.05vw;
            color: #2e2e35;
            padding: 2.34375vw 4.4238281vw 2.1875vw 4.4238281vw;
            margin-top: -0.5208333333vw;
            line-height: 1.18;
            font-family: "LeagueGothic-Regular", sans-serif;
            transition: opacity 0.4s ease;
        }

        .page3 .page3-left .char-desc.changing {
            opacity: 0;
        }

        .page3 .page3-art {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: absolute;
            z-index: 1;
        }

        .page3 .page3-art img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.5s ease;
        }

        .page3 .page3-art img.changing {
            opacity: 0;
        }

        .page3 .page3-btns {
            position: relative;
            z-index: 2;
            width: 69.2708333333vw;
            margin: 1.5625vw auto 0;
            gap: 0.5208333333vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /*
         * Ảnh nút hiện dùng button_nhan_vat.webp (139x129). Trước đó là
         * btn-prev.webp — huy hiệu tròn 195x196.
         *
         * Giữ nguyên BỀ RỘNG 4.9479vw như cũ vì hàng nút khít đúng khung:
         * 4.9479x2 + 58.3333 (khối nút nhân vật) + 0.5208x2 (gap) = 69.2708vw
         * = bề rộng .page3-btns. Nới rộng ra là flex co khối nút nhân vật lại,
         * méo cả hàng. Nhờ giữ nguyên bề rộng mà ảnh mới hiện to đúng bằng cỡ
         * hiển thị của ảnh cũ.
         *
         * Chiều cao lấy theo đúng tỉ lệ ảnh mới (129/139) để background-size
         * contain phủ kín hộp, không hở trên dưới: 4.9479 x 129/139 = 4.5920vw.
         * Hàng nút cao theo khối nút nhân vật nên hạ chiều cao ở đây không xê
         * dịch gì.
         */
        .page3 .page3-btns .btn-prev,
        .page3 .page3-btns .btn-next {
            width: 4.9479166667vw;
            height: 4.5919514388vw;
            background: url("/images/image_ttgh/button_nhan_vat.webp") center center no-repeat;
            background-size: contain;
            cursor: pointer;
            border: none;
            /* KHÔNG dùng transition: all. Hàng nút là flex nên `all` ôm luôn
               cả flex-shrink/flex-basis: Chrome bắt đầu quá độ từ giá trị mặc
               định, mà khối này lazy nên quá độ không chạy tới nơi, giá trị
               kẹt ở mức khởi điểm -> nút bị bóp lại. Chỉ hai thuộc tính dưới
               đây thật sự có hiệu ứng (hover: scale + brightness). */
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        .page3 .page3-btns .btn-prev:hover,
        .page3 .page3-btns .btn-next:hover {
            transform: scale(1.05);
            filter: brightness(1.1);
        }

        .page3 .page3-btns .btn-next {
            transform: rotate(180deg);
        }

        .page3 .page3-btns .btn-next:hover {
            transform: scale(1.05) rotate(180deg) !important;
            filter: brightness(1.1);
        }

        .page3 .page3-btns .page3-btn-inner {
            display: flex;
            justify-content: space-between;
            width: 58.3333333333vw;
            padding: 0.625vw;
            border-radius: 3.125vw;
            margin: 0 auto;
            background: rgba(0, 0, 0, 0.2392156863);
        }

        .page3 .page3-btns .page3-btn {
            background: none;
            border: none;
            cursor: pointer;
            width: 7.65625vw;
            display: block;
            /* Xem ghi chú ở .btn-prev/.btn-next: `all` làm kẹt flex-shrink,
               nút nhân vật bản mobile bị co còn 22px thay vì 49px. */
            transition: transform 0.3s ease, filter 0.3s ease;
            filter: grayscale(1);
        }

        .page3 .page3-btns .page3-btn:hover {
            transform: scale(1.05);
            filter: brightness(1.1) grayscale(0);
        }

        .page3 .page3-btns .page3-btn.active {
            filter: brightness(1.1) grayscale(0);
        }

        /*
         * Hộp băng chuyền = ĐÚNG khung nhìn nhìn thấy được, tức lỗ trống của
         * khung viền nới rộng 2px mỗi phía (để mép ảnh chui xuống dưới viền
         * đục, khỏi hở một sợi nền giữa ảnh và viền).
         *
         * Trước đây hộp rộng 62.5 x 39.0625vw rồi mới xén lại bằng clip-path,
         * còn ảnh thì nằm thụt vào trong .owl-item nhờ padding. Hệ quả: một ô
         * băng chuyền rộng 62.5vw nhưng ảnh chỉ chiếm phần giữa, nên trượt
         * ngang là lộ ra một khe trống rộng bằng tổng hai padding (6.51vw)
         * giữa hai ảnh.
         *
         * Giờ ô rộng đúng bằng khung nhìn và ảnh phủ kín ô, nên ảnh này ra thì
         * ảnh kia vào liền mép, không còn khe. overflow: hidden sẵn có của owl
         * xén đúng chỗ nên cũng bỏ luôn clip-path.
         *
         * Ba con số dưới đây chỉ để kéo hộp (đã nhỏ lại) về đúng vị trí lỗ
         * trống vẫn nằm: lỗ lệch phải 0.390625vw so với tâm hộp cũ, và cách
         * mép trên hộp cũ 3.3984375vw, mép dưới 4.484375vw. Sửa khung viền thì
         * phải tính lại cả bộ này lẫn inset của #slider-p4::after — cả hai lấy
         * chung một mốc là mép trong của đường viền ĐỤC trên test.png
         * (1464x825: x 144..1348, y 87..707).
         */
        .page4 #slider-p4 {
            width: 55.671875vw;
            margin: 4.4401041667vw auto 5.5260416667vw;
            left: 0.390625vw;
        }

        .page4 #slider-p4 .owl-wrapper-outer {
            height: 31.1796875vw;
        }

        .page4 #slider-p4 .owl-wrapper-outer .owl-item {
            height: 31.1796875vw;
            padding: 0;
        }

        /*
         * Khung viền đè lên ảnh slide.
         *
         * Trước đây khung là ::after của .owl-item, mà .owl-item nằm trong
         * .owl-wrapper-outer có overflow: hidden — nên khung không tài nào nới
         * ra ngoài khung nhìn của băng chuyền được, cứ kéo là bị xén. Kết quả
         * là khung nhỏ hơn ảnh slide: mép trái và đáy ảnh bị viền cắt mất.
         *
         * Chuyển khung lên thành ::after của chính #slider-p4 (overflow:
         * visible, position: relative) thì hết bị xén, tự do nới bốn phía bằng
         * inset ÂM. Khung vốn giống hệt nhau ở mọi slide và chỉ để trang trí
         * nên một cái duy nhất là đủ, khỏi vẽ lặp 7 lần.
         *
         * BỐN SỐ inset = trên / phải / dưới / trái, tính từ mép #slider-p4
         * (55.671875vw x 31.1796875vw). Số càng ÂM thì khung càng thò ra phía
         * đó. Cần dài thêm về bên trái thì hạ số thứ 4; cần cao thêm thì hạ số
         * thứ 1 (thò lên) hoặc số thứ 3 (thò xuống).
         *
         * Bộ số hiện tại canh sao cho lỗ trống giữa khung ôm trọn ảnh slide và
         * đè lên mép ảnh 4px — vừa kín, vừa không cắt mất phần nào của ảnh.
         * Lỗ đo theo mép trong của đường viền ĐỤC trên test.png (1464x825:
         * x 144..1348, y 87..707, tức chừa 9.84% trái, 7.92% phải, 10.55%
         * trên, 14.30% dưới).
         */
        .page4 #slider-p4::after {
            content: "";
            position: absolute;
            inset: -4.1751375vw -5.1773375vw -5.718475vw -6.4647875vw;
            background: url("/images/image_ttgh/test-w1292.webp") center center no-repeat;
            background-size: 100% 100%;
            pointer-events: none;
            z-index: 1;
        }

        /* Nút qua trái/phải phải nằm TRÊN khung, nếu không khung (là con cuối
           của #slider-p4 nên vẽ sau) sẽ đè lên nửa trong của hai nút. */
        .page4 #slider-p4 .owl-controls {
            z-index: 3;
        }

        .page4 #slider-p4 .owl-wrapper-outer .owl-item .item {
            width: 100%;
            height: 100%;
        }

        /* Ô giờ rộng đúng bằng khung nhìn nên phải cover: contain sẽ chừa lại
           hai sợi nền ở hai mép (ảnh 16:9, khung nhìn 16:8.96) và thế là hở
           lại đúng chỗ vừa vá. Cover xén 0.43% chiều cao — không nhìn ra. */
        .page4 #slider-p4 .owl-wrapper-outer .owl-item .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Hộp điều khiển vẫn phải phủ đúng vùng cũ (hộp băng chuyền đã nhỏ lại
           nên % không còn dùng được, quy hết ra vw theo số đo cũ). */
        .page4 #slider-p4 .owl-controls {
            position: absolute;
            top: -3.3984375vw;
            left: -10.0546875vw;
            width: 76.25vw;
            height: 42.96875vw;
            padding-bottom: 6.25vw;
            display: flex;
            align-items: center;
        }

        .page4 #slider-p4 .owl-controls .owl-buttons {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .page4 #slider-p4 .owl-controls .owl-buttons .owl-prev,
        .page4 #slider-p4 .owl-controls .owl-buttons .owl-next {
            width: 10.15625vw;
            height: 13.1770833333vw;
            background: url("/images/landingpage/btn-next.webp") center center no-repeat;
            background-size: cover;
            cursor: pointer;
            border: none;
            transition: all 0.3s ease;
            font-size: 0;
        }

        .page4 #slider-p4 .owl-controls .owl-buttons .owl-prev:hover,
        .page4 #slider-p4 .owl-controls .owl-buttons .owl-next:hover {
            transform: scale(1.05);
            filter: brightness(1.1);
        }

        .page4 #slider-p4 .owl-controls .owl-buttons .owl-prev {
            transform: rotate(180deg);
        }

        .page4 #slider-p4 .owl-controls .owl-buttons .owl-prev:hover {
            transform: scale(1.05) rotate(180deg);
            filter: brightness(1.1);
        }

        .page4 #slider-p4 .owl-controls .owl-pagination {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 3.9583333333vw;
            /* background: url("/images/landingpage/line-page2.webp") center center no-repeat; */
            background-size: 48.5416666667vw;
        }

        .page4 #slider-p4 .owl-controls .owl-pagination .owl-page {
            width: 1.9270833333vw;
            height: 1.9270833333vw;
            background: url("/images/image_ttgh/icon-page.webp") center center no-repeat;
            background-size: cover;
            border-radius: 37px;
            cursor: pointer;
            border: none;
            transition: all 0.3s ease;
            font-size: 0;
            filter: invert(1) brightness(0);
        }

        .page4 #slider-p4 .owl-controls .owl-pagination .owl-page.active {
            background: url("/images/image_ttgh/icon-page-active-w96.webp") center center no-repeat;
            background-size: cover;
            transform: scale(1.2);
            filter: invert(0) brightness(1);
        }

        /* Bảng xếp hạng cao hơn ảnh nền nên chiều cao mục này phải do nội dung
           quyết định — .page có overflow:hidden, để theo ảnh là cắt mất dòng cuối. */
        .page5 .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .page5 .page-inner {
            position: relative;
            height: auto;
            padding-bottom: 3.125vw;
        }

        /*
         * Khung cuộn giấy để đúng tỉ lệ gốc của ảnh: bg-bxh.webp là 1350x900,
         * quy ra 70.3125vw x 46.875vw ở mốc 1920. Trước đây để width 80vw rồi
         * kéo giãn 100% 100% theo chiều cao do số dòng quyết định, nên hình cuộn
         * giấy bị bóp méo (hộp 1536x1232, tỉ lệ 1.247 so với 1.5 của ảnh).
         *
         * Chiều cao cố định nên nội dung phải vừa khung — cỡ chữ và chiều cao
         * dòng bên dưới đã tính lại cho đủ 10 dòng.
         */
        .page5 .bxh {
            /* Đúng khổ gốc của bg-bxh.webp (1540x964) quy ra vw ở mốc 1920.
               Trước đây kéo giãn 100% 100% theo chiều cao do số dòng quyết định
               nên cuộn giấy bị bóp méo. */
            width: 80.2083333333vw;
            height: 50.2083333333vw;
            box-sizing: border-box;
            /* Âm để kéo cuộn giấy sát chữ "Xếp Hạng Giang Hồ": phần đục của ảnh
               bắt đầu ở y=45 nên nếu để margin dương thì khe nhìn thấy còn rộng
               hơn số margin 45px nữa.
               Canh khe hở bằng đúng page4 (tính năng đặc sắc): ở đó mép khung
               viền đặc cách đáy chữ tiêu đề 1.84vw. Khối nhìn thấy của cuộn
               giấy là thanh trục/tấm gỗ ở y=85 của ảnh 964, tức 8.82% chiều
               cao hộp = 4.427vw, nên margin = 1.84 - 4.427 = -2.583vw. */
            margin: -2.583vw auto 0;
            position: relative;
            z-index: 2;
            background: url('/images/image_ttgh/bg-bxh-w1540.webp') no-repeat center / 105% 100%;
            /* Lề chừa theo mặt giấy đo được: x 218..1325, y 159..770 của ảnh. */
            padding: 10.52vw 12.4vw 10.94vw;
        }

        /*
         * Chim hạc đậu ở góc dưới bên trái cuộn giấy, canh theo ảnh mẫu.
         *
         * Đặt tuyệt đối theo PHẦN TRĂM của .bxh (hộp 1540x964 của ảnh nền) nên
         * hạc bám đúng góc cuộn giấy ở mọi bề rộng màn hình, không cần canh lại
         * theo từng mốc vw.
         *
         * Đo trên ảnh mẫu (khổ 807x511): hạc rộng ~176px = 21.8% bề ngang bảng,
         * mép trái thò ra ngoài khung ~26px = 3.2%, đáy cách mép dưới bảng ~46px
         * = 9% chiều cao. Chiều cao để auto theo tỉ lệ gốc 356x294.
         *
         * z-index 3 để nằm trên ảnh nền cuộn giấy; pointer-events: none để hạc
         * không nuốt cú bấm nào của bảng xếp hạng bên dưới.
         */
        .page5 .bxh .bxh-crane {
            position: absolute;
            left: -3.2%;
            bottom: 9%;
            width: 25.8%;
            height: auto;
            z-index: 3;
            pointer-events: none;
        }

        /*
         * Tiêu đề nằm trên tấm gỗ của ảnh nền. Dò màu cột giữa bg-bxh.webp:
         * tấm gỗ trải từ y=85 đến y=152 của ảnh cao 964, tức 8.82% đến
         * 15.77%. Đặt tuyệt đối theo phần trăm đó nên bám đúng tấm gỗ ở mọi
         * bề rộng màn hình.
         *
         * Tách khỏi dòng chảy luôn, nhờ vậy danh sách bên dưới có thêm chỗ.
         */
        .page5 .bxh .bxh-top {
            position: absolute;
            left: 0;
            right: 0;
            top: 8.82%;
            height: 6.95%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2.0833333333vw;
            margin: 0;
        }

        /*
         * Bỏ ảnh nút (btn-bxh-*.webp) và viết thẳng bằng chữ. Ảnh nút trước đây
         * bị ẩn chữ đi bằng font-size: 0 nên nội dung chỉ nằm trong ảnh, đổi
         * chữ là phải sửa ảnh.
         */
        /*
         * Chữ nằm trên tấm gỗ sẫm màu (dò được 86,34,8 đến 234,187,85) nên lấy
         * tông vàng kem, không dùng nâu đỏ như ảnh nút cũ — ảnh đó có nền be
         * riêng, còn ở đây nền là gỗ tối, chữ nâu đỏ sẽ chìm.
         *
         * text-shadow chứ không phải box-shadow: box-shadow đổ bóng cho cả hộp
         * nút, còn thứ cần đổ bóng là nét chữ, giống viền tối quanh chữ của ảnh
         * btn-bxh-sv.webp cũ.
         */
        .page5 .bxh .bxh-top .bxh-btn {
            background: none;
            border: none;
            box-shadow: none;
            cursor: pointer;
            padding: 0;
            font-family: 'FzGameBrV2', sans-serif;
            font-size: 1.9vw;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05vw;
            /* Nhích cho khớp mắt với tấm gỗ: 20px trái, 5px lên (ở mốc 1920) */
            position: relative;
            left: -1.0416666667vw;
            top: -0.2604166667vw;
            color: #ffe2a8;
            text-shadow:
                0 0.1vw 0.15vw rgba(28, 10, 0, 0.9),
                0 0 0.25vw rgba(28, 10, 0, 0.7);
            transition: color 0.3s ease;
        }

        .page5 .bxh .bxh-top .bxh-btn:hover,
        .page5 .bxh .bxh-top .bxh-btn.active {
            color: #fff4d2;
        }

        .page5 .bxh .bxh-content {
            width: 100%;
            margin: 0 auto;
        }

        .page5 .bxh .bxh-content .bxh-pane {
            display: none;
        }

        .page5 .bxh .bxh-content .bxh-pane.active {
            display: block;
            animation: fadeIn 0.5s ease-in-out forwards;
        }

        .page5 .bxh .bxh-content .bxh-pane .bxh-header {
            display: flex;
            align-items: center;
            font-family: 'FzGameBrV2', sans-serif;
            font-size: 1.5vw;
            font-weight: 700;
            color: #4a2911;
            margin-bottom: 0.5vw;
        }

        /*
         * Chiều cao cố định thay cho padding trên/dưới. Ba dòng đầu có huy hiệu
         * (ảnh 62x54) cao hơn hộp chữ của bảy dòng còn lại, nên khi chiều cao
         * dòng chạy theo nội dung thì khoảng cách giữa các vạch so le. Mặt giấy
         * chừa được 28.75vw (50.2083 trừ padding 10.52 + 10.94), header chiếm
         * ~3.63vw kể cả margin, còn 25.12vw cho 10 dòng — 2.5vw mỗi dòng thì
         * dòng thứ 10 dừng đúng trước mép giấy và mọi dòng cách đều nhau.
         */
        .page5 .bxh .bxh-content .bxh-pane .bxh-row {
            display: flex;
            align-items: center;
            font-size: 1.15vw;
            font-weight: 500;
            color: #331e0f;
            height: 2.5vw;
            padding: 0;
            position: relative;
        }

        /*
         * Vạch phân cách vẽ bằng ::after thay vì border-bottom, để thụt vào hai
         * đầu. Border luôn chạy hết bề rộng hộp nên đầu vạch đâm vào hoa văn mây
         * ở hai mép mặt giấy; thụt 7% mỗi bên thì vạch dừng trước hoa văn.
         */
        .page5 .bxh .bxh-content .bxh-pane .bxh-row::after {
            content: "";
            position: absolute;
            left: 7%;
            right: 7%;
            bottom: 0;
            height: 2px;
            background: #dcb795;
        }

        .page5 .bxh .bxh-content .bxh-pane .bxh-row:last-child::after {
            display: none;
        }

        .page5 .bxh .bxh-content .bxh-pane .col {
            text-align: center;
        }

        .page5 .bxh .bxh-content .bxh-pane .col.col-1 {
            width: 15%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /*
         * max-height chặn dưới chiều cao dòng để huy hiệu không đội dòng cao
         * lên; ảnh tỉ lệ 62x54 nên 2.5vw ngang ứng với 2.18vw dọc.
         * (Kích thước trước đây nằm ở style inline trong blade/js nên rule này
         *  không có tác dụng — nay inline đã bỏ.)
         */
        .page5 .bxh .bxh-content .bxh-pane .col.col-1 img {
            width: 2.5vw;
            height: auto;
            max-height: 2.2vw;
            margin: 0 auto;
        }

        .page5 .bxh .bxh-content .bxh-pane .col.col-2 {
            width: 35%;
        }

        .page5 .bxh .bxh-content .bxh-pane .col.col-3 {
            width: 20%;
        }

        .page5 .bxh .bxh-content .bxh-pane .col.col-4 {
            width: 30%;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }



        .nav-page {
            position: fixed;
            /* Sát mép trái màn hình. Ảnh tấm biển chỉ chừa 1px trong suốt bên
               trái nên mép biển gần như chạm mép màn hình. */
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1001;
        }

        .nav-page ul {
            list-style: none;
            /* Đệm trên trước đây chừa chỗ cho vạch line-page, nay đã bỏ vạch. */
            padding: 0;
            margin: 0;
            position: relative;
        }

        .nav-page ul .nav-item {
            /*
             * Âm là cố ý. Khoảng hở nhìn thấy giữa hai tấm biển KHÔNG bằng
             * margin: bản thân ảnh chừa sẵn viền trong suốt (~8px trên, ~10px
             * dưới ở mốc 1280), cộng thêm phần letterbox do background-size:
             * contain. Để margin 1.5625vw (20px) thì hở thật tới 35-38px, trong
             * khi tấm biển chỉ cao ~50px — trông rời rạc.
             *
             * -0.5vw (-6.4px) ăn bớt phần viền trong suốt đó, kéo hở thật về
             * ~9-12px. Hai khung có chồng lên nhau 6.4px nhưng vùng chồng hoàn
             * toàn trong suốt (mỗi bên còn 6.6-10.3px dư) nên không đè lên nét vẽ.
             */
            margin-bottom: -0.5vw;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            z-index: 2;
        }

        .nav-page ul .nav-item a {
            display: flex;
            align-items: center;
        }

        .nav-page ul .nav-item a:hover {
            transform: scale(1);
        }

        /*
         * Chữ nay nằm sẵn trong ảnh (bcgh / gtnv / tnds / bxh) nên span .text chỉ
         * còn là cái khung để đặt ảnh. Vẫn giữ nguyên chữ trong HTML cho trình
         * đọc màn hình và SEO, chỉ cho font-size: 0 để không vẽ ra nữa.
         *
         * Khung theo tỉ lệ 215:102 — đúng khổ ảnh trạng thái đang đứng (bản _do)
         * — cộng background-size: contain nên KHÔNG ảnh nào bị bóp méo: bản _den
         * (212x92, tỉ lệ rộng hơn) tự canh giữa theo chiều dọc. Cách cũ dùng
         * 100% 100% kéo tấm biển 201x77 (tỉ lệ 2.61) vào khung tỉ lệ 1.96 nên
         * ảnh bị bóp ngang, trông cao hơn thực tế.
         *
         * width 11.2vw = đúng khổ gốc của ảnh (215px ở mốc 1920), tức tấm biển
         * hiện đúng cỡ mà thiết kế vẽ ra, không phóng to làm vỡ nét.
         *
         * padding về 0 vì background-origin mặc định là padding-box: còn đệm thì
         * ảnh bị thu nhỏ thụt vào trong khung.
         */
        .nav-page ul .nav-item .text {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0;
            line-height: 0;
            white-space: nowrap;
            pointer-events: auto;
            width: 11.2vw;
            aspect-ratio: 215 / 102;
            min-width: 0;
            min-height: 0;
            padding: 0;
            background: center/contain no-repeat;
        }

        /* Mỗi mục một tấm biển riêng; bản _do là lúc đang đứng ở khu vực đó. */
        .nav-page ul .nav-item2 .text {
            background-image: url("/images/image_ttgh/bcgh_den.webp");
        }

        .nav-page ul .nav-item2.active .text {
            background-image: url("/images/image_ttgh/bcgh_do.webp");
        }

        .nav-page ul .nav-item3 .text {
            background-image: url("/images/image_ttgh/gtnv_den.webp");
        }

        .nav-page ul .nav-item3.active .text {
            background-image: url("/images/image_ttgh/gtnv_do.webp");
        }

        .nav-page ul .nav-item4 .text {
            background-image: url("/images/image_ttgh/tnds_den.webp");
        }

        .nav-page ul .nav-item4.active .text {
            background-image: url("/images/image_ttgh/tnds_do.webp");
        }

        .nav-page ul .nav-item5 .text {
            background-image: url("/images/image_ttgh/bxh_den.webp");
        }

        .nav-page ul .nav-item5.active .text {
            background-image: url("/images/image_ttgh/bxh_do.webp");
        }

        .nav-page ul .nav-item.active .text {
            color: #fff;
            text-shadow: 2px 1px 2px #ff0000;
        }

        .nav-page ul .nav-item:last-child {
            margin-bottom: 0;
        }

        .nav-page ul .nav-item:hover .text {
            color: #ff0000;
            text-shadow: 1px 1px 2px #ff0000;
        }

        @media (max-width: 1024px) {
            .showOnMobile {
                display: block !important;
            }

            .showOnPc {
                display: none !important;
            }

            .title {
                width: 71.2890625vw;
            }

            /*
             * Giữ 16.961% thì tổng bề ngang = 71.29 x 1.4032 = 100.03vw, tràn
             * đúng một chút ra ngoài màn hình. 12% cho tổng 92.96vw là vừa.
             * Các margin phía trên tính theo % nên không phải chỉnh lại.
             */
            .title::before,
            .title::after {
                width: 12%;
            }

            /*
             * Chừa chỗ cho header mobile.
             *
             * .header-mobile là position:fixed cao 11.71875vw, trong khi nội
             * dung bắt đầu ngay từ y=0 nên nó đè lên 11.71875vw trên cùng của
             * ảnh nền page1 (48px ở khung 412px, mất 21% chiều cao ảnh).
             * Đệm đúng bằng chiều cao header để ảnh hiện trọn vẹn — cùng cách
             * mà site-master.css đã làm cho .r-bg-main.
             */
            .wrapper {
                padding-top: 11.71875vw;
            }

            .header-mobile {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 11.71875vw;
                background: #211f1f;
                z-index: 1100;
                display: flex;
                align-items: center;
            }

            .header-mobile .header-mobile-inner {
                width: 100%;
                height: 100%;
                padding: 0 3.90625vw;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .header-mobile .h-m-left {
                display: flex;
                align-items: center;
                gap: 1.46484375vw;
            }

            .header-mobile .h-m-left .h-m-logo {
                width: 9.765625vw;
                height: auto;
                border-radius: 1.953125vw;
                overflow: hidden;
            }

            .header-mobile .h-m-left .h-m-title {
                display: flex;
                flex-direction: column;
                color: #fd5044;
                font-size: 2.9296875vw;
                line-height: 1.1;
            }

            .header-mobile .h-m-left .h-m-title span:last-child {
                color: #fff;
            }

            .header-mobile .h-m-right {
                display: flex;
                align-items: center;
                gap: 5.859375vw;
            }

            .header-mobile .h-m-right .h-m-download {
                width: 27.1484375vw;
            }

            .header-mobile .h-m-right .h-m-download img {
                width: 100%;
                height: auto;
            }

            .header-mobile .h-m-right .h-m-menu {
                background: none;
                border: none;
                padding: 0;
                width: 5.859375vw;
                cursor: pointer;
            }

            .header-mobile .h-m-right .h-m-menu img {
                width: 100%;
                height: auto;
            }

            .menu-mobile {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1200;
                pointer-events: none;
                transition: 0.3s;
            }

            .menu-mobile.active {
                pointer-events: auto;
            }

            .menu-mobile.active .menu-m-overlay {
                opacity: 1;
            }

            .menu-mobile.active .menu-m-content {
                transform: translateX(0);
            }

            .menu-mobile .menu-m-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.451);
                opacity: 0;
                transition: 0.3s;
            }

            .menu-mobile .menu-m-content {
                position: absolute;
                top: 0;
                right: 0;
                width: 31.25vw;
                height: 100%;
                background: #111;
                transform: translateX(100%);
                transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-top: 7.8125vw;
            }

            .menu-mobile .menu-m-content .menu-m-close {
                position: absolute;
                top: 2.9296875vw;
                right: 2.9296875vw;
                background: none;
                border: none;
                color: #fff;
                font-size: 5.859375vw;
                line-height: 1;
                cursor: pointer;
            }

            .menu-mobile .menu-m-content .menu-m-logo {
                width: 13.18359375vw;
                margin-bottom: 3.90625vw;
            }

            .menu-mobile .menu-m-content .menu-m-logo img {
                width: 100%;
                height: auto;
                border-radius: 2.44140625vw;
            }

            .menu-mobile .menu-m-content .menu-m-list {
                width: 100%;
                list-style: none;
                padding: 0 4.39453125vw;
            }

            .menu-mobile .menu-m-content .menu-m-list li {
                width: 100%;
                position: relative;
                border-bottom: 1px solid #464647;
            }

            .menu-mobile .menu-m-content .menu-m-list li a {
                display: flex;
                align-items: center;
                padding: 3.90625vw 0;
                color: #fff;
                text-decoration: none;
                font-size: 2.44140625vw;
                gap: 0.9765625vw;
            }

            .menu-mobile .menu-m-content .menu-m-list li a i {
                width: 3.90625vw;
                height: 3.80859375vw;
                display: flex;
                align-items: center;
                justify-content: center;
                font-style: normal;
                background-size: contain !important;
            }

            .menu-mobile .menu-m-content .menu-m-list li a i.icon-home {
                background: url("/images/landingpage/icon-home.webp") center center no-repeat;
            }

            .menu-mobile .menu-m-content .menu-m-list li a i.icon-fanpage {
                background: url("/images/landingpage/icon-fb.webp") center center no-repeat;
            }

            .menu-mobile .menu-m-content .menu-m-list li a i.icon-community {
                background: url("/images/landingpage/icon-group.webp") center center no-repeat;
            }

            .menu-mobile .menu-m-content .menu-m-list li a i.icon-charge {
                background: url("/images/landingpage/icon-dollar.webp") center center no-repeat;
            }

            .menu-mobile .menu-m-content .menu-m-list li a i.icon-bxh {
                background: url("/images/landingpage/icon-rank.webp") center center no-repeat;
            }

            .menu-mobile .menu-m-content .menu-m-list li a i.icon-cskh {
                background: url("/images/landingpage/icon-phone.webp") center center no-repeat;
            }

            .menu-mobile .menu-m-content .menu-m-list li a:hover {
                color: #fcedac;
            }

            .page .page-inner {
                padding-top: 2.9296875vw;
            }

            .page1 .page-inner {
                padding-top: 12.6953125vw;
            }

            .page1 .logo-game {
                width: 40.8203125vw;
                display: block;
                margin: 0 auto;
            }

            .page1 .layer .age-rating {
                top: 2.44140625vw;
                left: initial;
                right: 1.953125vw;
                width: 15.13671875vw;
            }

            .page1 .layer .logo-vplay {
                top: 9.765625vw;
                right: 2.9296875vw;
                width: 12.6953125vw;
            }

            .page1 .layer .text-p1 {
                width: 96.6796875vw;
                margin: 69.921875vw auto 0;
            }

            .page2 .page-inner {
                padding-top: 4.296875vw;
                z-index: 2;
            }

            .page2 .block1 {
                width: 97.265625vw;
                height: 16.11328125vw;
                padding: 0 1.5vw;
            }

            .page2 .block1 .btn-playnow {
                width: 21.50390625vw;
                top: -0.57vw;
            }

            /*
             * Thanh nền mobile cao gấp đúng 1.5625 lần bản PC (16.11328125 /
             * 10.3125), nên mọi số đo của icon đều lấy từ bản PC nhân hệ số đó.
             * Khung phải giữ đúng tỉ lệ ảnh gốc 222x231 — trước đây để hình
             * vuông nên background-size:cover cắt mất viền trên dưới, làm khung
             * vàng phình ra ngoài thanh nền.
             */
            .page2 .block1 .icon-app {
                width: 18.06640625vw;
                height: 18.798828125vw;
                top: -0.4375vw;
            }

            .page2 .block1 .icon-app img {
                width: 16.552734375vw;
            }

            .page2 .block1 .btn-apk {
                width: 15.53vw;
            }

            .page2 .block1 .button-store .btn {
                width: 16.4vw;
            }

            /*
             * Nền mobile đổi sang bg_page2_2_mb.webp: bỏ tranh thuỷ mặc chiếm
             * nửa trên của bg_page2_mb.webp, cả tờ giấy nay kẻ dòng từ trên
             * xuống dưới. Vì thế khối tin không còn phải dồn xuống nửa dưới
             * nữa mà trải kín trang.
             *
             * BẢN ĐANG NẠP LÀ bg_page2_2_mb_2.webp (1144x1520)
             *
             * Cùng bản vẽ, cùng tỉ lệ 0.7526 và cùng cách đặt khung với bản
             * _1 cũ (286x380), chỉ gấp 4 lần độ phân giải — nên MỌI SỐ ĐO BÊN
             * DƯỚI VẪN TÍNH THEO KHUNG 286x380, khỏi quy đổi. Đổi vì bản 286px
             * bị phóng tới 3.65 lần trên màn 414px dpr 3, nhoè thấy rõ.
             *
             * Ảnh kéo 100% 100% nên toạ độ trên khung 286x380 quy thẳng ra vị
             * trí trong .block2 (1px ảnh = 103.65/380 = 0.27276vw):
             *   viền hoa văn trong: trái 35px, phải 248px, trên 25px, dưới 356px
             *   dòng kẻ: y = 37 + 16.263k, k = 0..19 (dòng cuối y = 345.9)
             *
             * Bề rộng 84vw và chiều cao 103.65vw giữ nguyên như bản cũ: page2
             * chỉ còn dư 3.1vw dưới hàng nút nên không nới dọc thêm được, và
             * mọi số đo ngang bên trong đã tính theo 84vw.
             *
             * Ảnh kéo 100% 100% nên hộp 84 x 103.65 (tỉ lệ 0.810) so với ảnh
             * gốc 286x380 (0.753) làm khung gỗ bè ngang 7.6% — mức đã cân nhắc
             * và chấp nhận từ trước, muốn hết bè thì phải hạ bề rộng về 78vw.
             *
             * padding dọc: 8.7vw ứng với y=32 (ngay dưới viền hoa văn trên),
             * 9.3vw chừa lại phần dưới y=346 (đúng dòng kẻ cuối, còn ~10px ảnh
             * hở tới viền hoa văn dưới). 8.7 + 85.6 + 9.3 = 103.65.
             */
            .page2 .block2 {
                width: 84vw;
                margin: 0.9765625vw auto 0;
                background: url("/images/block-news/bg_page2_2_mb_2.webp") center/100% 100% no-repeat;
                min-height: 103.65vw;
                padding: 8.7vw 0 9.3vw;
            }

            /*
             * Dùng đúng cơ chế của bản PC để các dòng tin bày ra y hệt: khung
             * danh sách đặt tuyệt đối và cắt đúng vào hai dòng kẻ in trên giấy,
             * nút "Xem thêm" tự dồn xuống đáy, thanh cuộn tự dựng chạy dọc mép
             * phải. Vì thế .news-block phải có chiều cao cố định (mốc cho các
             * phần trăm bên dưới) và position: relative (mốc neo cho khung
             * danh sách, bản PC lấy chính nó vì nó absolute).
             *
             * Cao 85.6vw: từ 8.7vw (đáy padding-top của .block2) xuống 94.3vw,
             * tức từ ngay dưới viền hoa văn trên (y=32 của ảnh) đến đúng dòng
             * kẻ cuối cùng (y=345.9). Bản trước chỉ cao 43.5vw vì nửa trên
             * trang giấy còn vướng tranh thuỷ mặc.
             *
             * Bỏ skewY của bản PC: dòng kẻ trên ảnh mobile nằm ngang, không dốc.
             */
            .page2 .block2 .news-block {
                position: relative;
                /* Bản PC đặt tuyệt đối bằng left/top; ở đây khối nằm trong dòng
                   chảy nên hai số đó biến thành độ lệch tương đối, không trả về
                   0 là khối tin bị đẩy sang phải 54.15% bề rộng, ra khỏi giấy. */
                left: 0;
                top: 0;
                /* 63 = 84 x 0.75, đúng tỉ lệ khối tin/khung giấy như cũ. */
                width: 63vw;
                height: 85.6vw;
                padding: 0;
                margin: 0 auto;
                transform: none;
            }

            /*
             * Cắt khung danh sách đúng vào dòng kẻ in, y như bản PC.
             *
             * Dòng kẻ của bg_page2_2_mb.webp nằm ở y = 37 + 16.263k trên ảnh
             * gốc cao 380 (k = 0..19), quy ra vw tính từ đỉnh .block2:
             * 10.09 + 4.4353k.
             *
             * Mép trên lấy dòng k=2 (y=69.5 -> 18.96vw): hàng tab cao 26px kết
             * thúc ở y=56.4, đây là dòng kẻ đầu tiên nằm dưới nó.
             * Mép dưới lấy dòng k=17 (y=313.4 -> 85.49vw), cách nhau đúng 15
             * nhịp kẻ và còn ~12px ảnh cho nút "Xem thêm" (cao 22px) nằm sát
             * đáy .news-block.
             * Quy ra phần trăm của .news-block (8.7 -> 94.3vw):
             *   18.96 -> 11.98%      85.49 -> 89.60%      cao 77.62%
             */
            .page2 .block2 .news-block .news-block-content .news-pane .news-list-wrap {
                top: 11.98%;
                height: 77.62%;
            }

            /*
             * Thanh cuộn tự dựng: giữ nguyên như bản PC, chỉ bỏ skewX (viền
             * giấy mobile dựng thẳng chứ không nghiêng 7.4 độ) và nhân bề dày
             * lên 2.027 lần — tỉ lệ bề rộng khối tin mobile/PC
             * (54.19921875 / 26.74).
             *
             * right: 0.3vw — thanh nằm ĐÚNG TRÊN ĐƯỜNG CHỈ mảnh in trên tờ
             * giấy, dịch TRÁI 1.521vw so với bản -1.221vw cũ (bản cũ đặt thanh
             * ra ngoài mép khối tin, đè lên vân gỗ của khung).
             *
             * Đo trên bg_page2_2_mb_2.webp (1144x1520): lấy độ sáng trung bình
             * từng cột trong khoảng y = 25%..85%, nền giấy ~165, riêng cột
             * 992..995 tụt còn 136 / 96 / 105 / 152 — đó là đường chỉ, tâm ở
             * x = 993.5. Ảnh kéo 100% 100% vào .block2 rộng 84vw nên
             * x = 993.5 -> 993.5 / 1144 x 84 = 72.955vw tính từ mép trái
             * .block2. (Còn một vệt mờ hơn ở x ~ 984.5 = 72.32vw, là đường chỉ
             * phụ chạy song song; nó nằm ngay sát bên trái thanh, không bị che.)
             *
             * .news-block rộng 63vw căn giữa .block2 nên mép phải của nó —
             * cũng là mốc của right, vì .news-list-wrap kéo left:0/right:0 —
             * nằm ở 73.5vw. Muốn tâm thanh (dày 0.491vw) trùng 72.955vw thì
             * mép phải thanh phải ở 72.955 + 0.2455 = 73.2vw, tức
             * right = 73.5 - 73.2 = 0.3vw.
             */
            .page2 .block2 .news-block .news-block-content .news-pane .news-scroll {
                right: 0.3vw;
                width: 0.491vw;
                border-radius: 0.245vw;
                transform: none;
            }

            /* Khe hẹp lại vì ba tab nay đều mang biển: 3 x 19.6 + 2 x 1.2 =
               61.2vw, chừa 0.9vw mỗi bên trong bề ngang 63vw của .news-block. */
            .page2 .block2 .news-block .news-block-header .news-menu {
                gap: 1.2vw;
            }

            /*
             * Chữ 16px cao 26.8px theo metric của FzGameBrV2 (line-height tự
             * nhiên 1.68), trong khi băng trống dành cho hàng tab chỉ rộng từ
             * y=32 (dưới viền hoa văn) đến y=69.5 (dòng kẻ mép trên danh sách)
             * của ảnh nền, tức 37.5px ảnh. Đệm dọc cũ 1.46vw làm hàng tab cao
             * Băng trống dành cho hàng tab chỉ rộng từ y=32 (dưới viền hoa văn)
             * đến y=69.5 (dòng kẻ mép trên danh sách) của ảnh nền 286x380, tức
             * 37.5px ảnh = 10.23vw (1px ảnh = 103.65/380 = 0.27276vw). Biển cao
             * 8.08vw nên vẫn nằm gọn trong băng, không đè lên dòng tin đầu.
             *
             * Cỡ chữ đổi từ 16px cố định sang vw: tấm biển co theo bề rộng màn
             * hình, để chữ px thì màn 360px chữ tràn ra ngoài khung hoa văn.
             */
            .page2 .block2 .news-block .news-block-header .news-menu li .menu-item {
                width: 19.6vw;
                height: 8.0825vw;   /* 19.6 / 2.425 */
                padding: 0;
                font-size: 3.6vw;
            }

            .page2 .block2 .news-block .news-block-header .btn-plus {
                width: 2.44140625vw;
                height: 2.44140625vw;
                font-size: 2.44140625vw;
            }

            .page2 .block2 .news-block .news-block-content {
                margin-top: 1.953125vw;
            }

            /* Bản PC nhích hàng tab lên 0.8vw cho khớp trang giấy nghiêng của
               nó; giấy mobile kẻ ngang nên trả về 0.

               left vẫn âm nhưng số khác PC: mobile .news-block rộng 63vw căn
               giữa .block2, còn khung giấy trong bg_page2_2_mb_1.webp lại lệch
               trái. Đo trục đối xứng của trang giấy trên ảnh chụp thật: tâm
               giấy ở 242.5px trong khi tâm hàng tab ở 250px (khổ 500px), lệch
               phải 7.5px = 1.5vw. */
            .page2 .block2 .news-block .news-block-header {
                top: 0;
                left: -1.5vw;
            }

            /*
             * Bày dòng tin y như bản PC: bỏ gạch phân cách vẽ thêm (giấy đã có
             * dòng kẻ in sẵn) và chừa lề phải cho thanh cuộn. Các số lấy từ bản
             * PC (0.5vw / 1.0416666667vw) nhân 2.027 lần theo tỉ lệ bề rộng
             * khối tin mobile/PC.
             *
             * Lề phải nới 2.455vw -> 4.5vw: đo bằng canvas trên ảnh gốc
             * bg_page2_2_mb.webp (286x380), mép chữ (link right) ở lề cũ chỉ
             * cách vệt tối của viền gỗ bên phải trang giấy ~4-8px (đơn vị ảnh)
             * — tiêu đề dài + chữ đậm dễ chạm/đè lên viền. Nới thêm để mép chữ
             * lùi sâu vào vùng giấy sáng màu, cách vệt tối ít nhất ~11px.
             *
             * Lề trái thêm 5px (px cố định, giống cách font-size trong khối
             * này đang dùng px thay vì vw): mép chữ trước đây ăn thẳng theo
             * mép .news-block (0 lề riêng), gần vệt tối của gáy sách bên trái
             * trang giấy. 5px là khoảng hở người dùng yêu cầu.
             */
            .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item {
                padding: 1.014vw 4.5vw 1.014vw 5px;
                background: none;
                position: relative;
            }

            /*
             * Gạch phân cách vẽ bằng CSS.
             *
             * bg_page2_2_mb.webp cũ có dòng kẻ IN SẮN (y = 37 + 16.263k) nên
             * không cần vẽ thêm. Ảnh mới bg_page2_2_mb_1.webp (cùng khổ
             * 286x380) bỏ hết các dòng kẻ đó — quét canvas cột giữa chỉ còn
             * hoa văn viền trên (y 5..22) và viền dưới (y 359..370) — nên
             * phải tự kẻ.
             *
             * Đặt ở ::after chứ không dùng border-bottom: border chạy hết bề
             * ngang ô (10.5 → 73.5vw của .block2), mà đường hoa văn trong của
             * trang giấy chỉ tới 72.25vw — gạch sẽ thòi ra đè lên viền gỗ.
             * right: 4.5vw = đúng padding phải của .news-item nên gạch dừng
             * thẳng mép chữ, còn cách hoa văn 3.25vw.
             *
             * bottom: 0 — hai ô kề nhau cùng đệm dọc 1.014vw nên gạch rơi
             * đúng giữa hai khối chữ.
             */
            .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item::after {
                content: "";
                position: absolute;
                left: 0;
                right: 4.5vw;
                bottom: 0;
                height: 1px;
                background: rgba(0, 0, 0, 0.55);
            }

            /* Tin cuối không kẻ — gạch thừa treo lơ lửng trước nút "Xem thêm". */
            .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item:last-child::after {
                display: none;
            }

            .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item .news-link {
                font-size: 13px;
            }

            .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item .news-date {
                font-size: 13px;
            }

            /* Vẫn dồn xuống đáy bằng margin-top: auto như bản PC. Chỉ trả top và
               left về 0: hai số đó bản PC dùng để bù trang giấy hình thang bị
               rotateY, giấy mobile vẽ phẳng nên không cần bù. */
            .page2 .block2 .news-block .news-block-content .news-pane .btn-more {
                font-size: 4.3vw;
                top: 0;
                /* Cùng lý do với hàng tab (xem .news-block-header ngay trên):
                   .news-block căn giữa .block2 nhưng khung giấy trong ảnh nền
                   mobile lại lệch trái. Đo trục đối xứng của trang giấy ngay
                   trên và ngay dưới nút trên ảnh chụp thật: 242.5 và 241.5px
                   trong khi tâm nút ở 250px (khổ 500) — lệch phải ~8px. */
                left: -1.6vw;
                /* Hết tấm biển nên không cần đệm ngang nữa; chỉ chừa đệm dưới
                   cho vạch gạch chân không dính chân chữ. */
                padding: 0 0 0.6vw;
                gap: 1.2vw;
                /* Nhích lên 2vw so với bản cũ: chữ 3.6vw cao hơn 13px cũ nên
                   vạch gạch chân rơi trúng đường viền in ở đáy trang giấy.
                   Nhích thêm 2vw nữa khi tăng cỡ chữ lên 4.3vw. */
                margin: 69.5vw 0 0;
            }

            .page2 .block2 .news-block .news-block-content .news-pane .btn-more .btn-more-icon {
                width: 5.16vw;   /* 1.2 x co chu */
            }

            /* 0.1vw ở mốc mobile chỉ còn nửa pixel, vạch sẽ mất hẳn trên màn
               dpr 1. Dày lên 0.4vw. */
            .page2 .block2 .news-block .news-block-content .news-pane .btn-more::after {
                height: 0.4vw;
            }

            /* Khung giấy đã cao 103.65vw nên khoảng chừa cũ 15.14vw sẽ đẩy hàng
               nút xuống quá đáy ảnh nền của page2 (139.94vw). */
            .page2 .block3 {
                gap: 0.9765625vw;
                margin-top: 3.90625vw;
            }

            .page2 .block3 .btn {
                width: 23.53515625vw;
                height: 7.91015625vw;
            }

            .page3 .page3-left {
                width: 100%;
                margin: -0.9765625vw 0 0 1.953125vw;
            }

            .page3 .page3-left .sect-name {
                width: 49.21875vw;
                margin: 0 0 0 0;
            }

            .page3 .page3-left .sect-name.changing {
                transform: translateY(0.9765625vw);
            }

            .page3 .page3-left .char-name {
                width: 46.875vw;
                margin: -4.8828125vw 0 0 0;
            }

            .page3 .page3-left .char-name.changing {
                transform: translateY(0.9765625vw);
            }

            /*
             * Nới khung 69.53x34.18 -> 96x42vw và đổi chữ sang 13px cố định.
             *
             * Nới ngang ở đây KHÔNG làm ảnh bè thêm, ngược lại: ảnh gốc
             * bg-des.png là 712x280 (tỉ lệ 2.543), hộp cũ 69.53/34.18 = 2.034
             * tức đang kéo dọc 25%. Hộp mới 96/42 = 2.286, chỉ còn kéo dọc 11%.
             *
             * Chiều cao 42vw là mức lớn nhất còn an toàn: page3 chỉ dư 9.22vw
             * dưới hàng nút prev/next, lấy 7.82vw và chừa lại 1.4vw.
             *
             * padding quy đổi giữ NGUYÊN TỈ LỆ vùng an toàn đã đo trên ảnh
             * nguồn (tránh viền vàng + dây tua đỏ):
             *   ngang  8.3007813/69.53125 = 11.939%  ->  11.461vw
             *   trên   5.4953125/34.1796875 = 16.078% ->  6.753vw
             *   dưới   5.1269531/34.1796875 = 15.000% ->  6.300vw
             *
             * overflow-y: auto là lưới an toàn cho màn siêu hẹp: chữ 13px là số
             * CỐ ĐỊNH còn khung tính bằng vw, nên màn càng hẹp khung càng nhỏ
             * mà chữ vẫn nguyên cỡ. Đo thật với bài dài nhất (398 ký tự): từ
             * ~430px trở lên vừa khít, hẹp hơn thì phải cuộn chứ không tràn ra
             * ngoài viền khung.
             *
             * margin-left 0.046875vw KHÔNG phải số vu vơ: .page3-left có
             * margin-left 1.953125vw mà vẫn width 100%, nên nó thò sang phải
             * 1.953125vw so với khung nhìn. Để margin: 0 auto thì khung mô tả
             * bị đẩy lệch đúng chừng ấy, mép phải chạm rìa màn (đo thật: lề
             * trái 4vw, lề phải 0vw). Bù lại 2 − 1.953125 = 0.046875vw rồi thả
             * margin-right: auto thì hai lề đều đúng 2vw.
             */
            .page3 .page3-left .char-desc {
                width: 96vw;
                height: 42vw;
                font-size: 13px;
                padding: 6.753vw 11.461vw 6.3vw 11.461vw;
                /* Kéo lên 5.75vw (33.203125 -> 27.45) để nhường chỗ cho hàng
                   nút to lên bên dưới. Xem phần tính đất ở .page3-btns. */
                margin: 27.45vw auto 0 0.046875vw;
                background-size: 100% 100%;
                overflow-y: auto;
            }

            /*
             * HÀNG NÚT NHÂN VẬT TRÊN MOBILE
             *
             * Bản cũ nhồi cả 10 nút vào khối rộng 81.05vw: mỗi nút khai
             * width 12.21vw nhưng flex bóp lại còn ~8vw (đo thật trên màn
             * 375px: nút nhân vật 30px, nút qua/lại chỉ 23px) — bé hơn mức
             * chạm tay tối thiểu, bấm rất khó trúng.
             *
             * Nay khối nút thành băng cuộn ngang: mỗi lần chỉ hiện ĐÚNG 5
             * nhân vật ở cỡ to, 5 nhân vật còn lại lộ ra khi vuốt ngang hoặc
             * khi bấm nút qua/lại (JS kéo nút đang chọn vào giữa khung).
             *
             * ĐẤT DỌC (page3 mobile cao 138.93vw = tỉ lệ ảnh nền 768x1067):
             *   hàng nút = 13.2167 (nút cao) + 2 x 1 (padding) = 15.2167vw
             *   cộng margin-top 1vw và chừa đáy ~1vw  ->  đáy khung mô tả
             *   phải nằm ở 121.72vw, tức kéo char-desc lên 5.75vw.
             *
             * ĐẤT NGANG: 96 - 2 x 11.5 (nút qua/lại) - 2 x 1 (gap) = 71vw cho
             * khối nút; trừ padding còn 69vw = 5 nút x 13vw + 4 khe x 1vw.
             * Đổi bất kỳ số nào trong dãy này thì phải tính lại cả dãy, không
             * thì số nút hiện ra không còn tròn 5.
             */
            .page3 .page3-btns {
                width: 96vw;
                margin: 1vw auto 0;
                gap: 1vw;
            }

            /* Nút qua/lại to gần gấp đôi bản cũ (6.64 -> 11.5vw, tức 43px trên
               màn 375px). Chiều cao theo đúng tỉ lệ ảnh 139x129:
               11.5 x 129/139 = 10.6727vw. */
            .page3 .page3-btns .btn-prev,
            .page3 .page3-btns .btn-next {
                width: 11.5vw;
                height: 10.6726618705vw;
                /* Nút qua/lại thấp hơn khối nút nhân vật nên flex sẽ kéo giãn
                   nếu không khoá lại. */
                flex: 0 0 auto;
            }

            .page3 .page3-btns .btn-prev:hover,
            .page3 .page3-btns .btn-next:hover {
                transform: scale(1);
            }

            .page3 .page3-btns .btn-next:hover {
                transform: scale(1);
            }

            .page3 .page3-btns .page3-btn-inner {
                width: 71vw;
                padding: 1vw;
                border-radius: 8vw;
                gap: 1vw;
                /* space-between của bản PC chia đều 10 nút trong khung; ở đây
                   nút tràn ra ngoài khung nên phải xếp từ trái sang. */
                justify-content: flex-start;
                overflow-x: auto;
                overflow-y: hidden;
                /* Chặn vuốt ngang lan ra ngoài (một số trình duyệt hiểu là cử
                   chỉ lùi trang). */
                overscroll-behavior-x: contain;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }

            .page3 .page3-btns .page3-btn-inner::-webkit-scrollbar {
                display: none;
            }

            .page3 .page3-btns .page3-btn {
                /* flex 0 0: không cho bóp lại, nhờ vậy nút mới giữ đúng 13vw
                   (~49px trên màn 375px) thay vì co theo số nút. */
                flex: 0 0 13vw;
                width: 13vw;
            }

            .page3 .page3-btns .page3-btn:hover {
                transform: scale(1);
            }

            /* Mobile không dùng lối co hộp về đúng lỗ khung của bản PC: khung ở
               đây là background của chính .owl-item nên trôi theo slide, hai ô
               kề nhau đã kín mép sẵn.
             *
             * Bề ngang 85.72265625vw = số giải NGƯỢC từ bề ngang ảnh slide.
             * Ảnh phải rộng 70.2421875vw (đúng tới mép trong hai nút: prev
             * chiếm 1.6953..14.8789vw, next chiếm 85.1211..98.3047vw) mà lỗ
             * giấy của khung chỉ chiếm 81.94% bề ngang tấm ảnh nền (viền vàng
             * ăn 8.98% trái + 9.08% phải), nên khung phải rộng
             * 70.2421875 / 0.8194 = 85.72vw thì lỗ mới ôm vừa khít ảnh.
             * Để khung 70.24 như bản trước thì ảnh đè lên hết viền vàng.
             *
             * Chiều cao 119.53125vw là mức CAO NHẤT còn chỗ: khung bắt đầu ở
             * 1307px, đáy #page4 ở 1780px, trừ hàng chấm trang (13.5px) và hai
             * khe hở ~6px thì còn đúng 448px = 119.53vw. Tỉ lệ khung 85.72 x
             * 119.53 = 0.717 so với ảnh gốc 1024x1536 (0.667) là kéo ngang
             * 7.5%, xấp xỉ mức 5.7% của bản trước nên hoạ tiết không méo thêm
             * đáng kể. Muốn cao hơn nữa thì phải nới ảnh nền #page4.
             *
             * SỬA: khung co từ 85.72 xuống 80vw để chừa hẳn 10vw mỗi bên cho hai
             * nút. Trước đây nút rộng 13.18vw mà rãnh trống hai bên chỉ có
             * 7.14vw nên nút lấn 7.74vw vào trong hộp băng chuyền — lúc chuyển
             * slide ảnh chạy qua HẾT bề ngang hộp nên bị nút che mất một mảng.
             * Nút phải nằm TRỌN ngoài hộp mới hết che, chứ không phải chỉ ngoài
             * lỗ giấy.
             *
             * Chiều cao 111.55vw = 80 / 0.717, giữ nguyên mức kéo ngang 0.717
             * của bản cũ nên hoạ tiết khung không méo thêm.
             * ĐỔI BỀ NGANG THÌ PHẢI TÍNH LẠI: chiều cao, padding .owl-item,
             * left/width/height của .owl-controls và bề ngang hai nút. */
            .page4 #slider-p4 {
                width: 80vw;
                margin: 0 auto;
                left: 0;
            }

            .page4 #slider-p4 .owl-wrapper-outer {
                height: 111.55vw;
                margin: auto;
            }

            /*
             * Padding = đúng mép trong của khung, để ảnh nằm gọn trong lỗ chứ
             * không đè lên viền vàng.
             *
             * Lỗ trống (vùng giấy trắng) đo trên bg-slide-mb.png 1024x1536:
             *   x 92..931   -> chừa 8.98% trái, 9.08% phải
             *   y 116..1391 -> chừa 7.55% trên, 9.44% dưới
             * Ảnh nền kéo 100% 100% nên quy thẳng ra vw của ô
             * (85.72265625 x 119.53125):
             *   trái  8.98% -> 7.70vw      phải 9.08% -> 7.78vw
             *   trên  7.55% -> 9.02vw      dưới 9.44% -> 11.28vw
             * Đổi kích thước khung thì phải nhân lại cả bốn số này, không thì
             * ảnh lại đè lên viền.
             *
             * Trừ hai số ngang ra, ảnh còn đúng 70.24vw như đã căn ở
             * #slider-p4 — tức vẫn to bằng bản đè viền, chỉ khác là giờ khung
             * to ra bao lấy nó chứ ảnh không lấn viền nữa.
             */
            .page4 #slider-p4 .owl-wrapper-outer .owl-item {
                height: 111.55vw;
                background: url("/images/image_ttgh/bg-slide-mb-w640.webp") center center no-repeat;
                background-size: 100% 100%;
                /* Vẫn đúng bốn tỉ lệ trên, quy theo khổ khung mới 80 x 111.55:
                     trái  8.98% -> 7.18vw      phải 9.08% -> 7.27vw
                     trên  7.55% -> 8.42vw      dưới 9.44% -> 10.53vw */
                padding: 8.42vw 7.27vw 10.53vw 7.18vw;
            }

            /* Khung mobile dựng đứng (2:3) mà ảnh slide là 16:9 nằm ngang, nên
               phải contain — ảnh vào trọn khung, chừa giấy trắng trên dưới.
               Cover thì lấp kín giấy nhưng xén mất gần hết bề ngang ảnh. */
            .page4 #slider-p4 .owl-wrapper-outer .owl-item .item img {
                object-fit: contain;
            }

            /* Mobile giữ khung riêng bg-slide-mb.webp, không dùng khung của bản PC */
            .page4 #slider-p4::after {
                display: none;
            }

            /* Hộp điều khiển giờ TRÙNG KHÍT khung slide theo chiều dọc: top 0
               + height 119.53125vw (đúng chiều cao .owl-item) + bỏ
               padding-bottom, bỏ luôn margin-top âm của .owl-buttons. Nhờ vậy
               align-items: center của bản PC tự căn hai nút vào đúng giữa tấm
               khung nền, khỏi phải bù trừ bằng số lẻ như trước.

               Chiều ngang vẫn ghim bằng vw chứ không dùng % — % ăn theo
               #slider-p4, mà khung đã rộng từ 67.09 lên 85.72vw, để % nguyên
               là nút văng ra ngoài màn hình:
                 left  = 0 − 10 (mép trái khung, tức (100−80)/2) = −10vw
                 width = 100vw   (trải hết bề ngang màn hình để space-between
                         đẩy hai nút ra sát hai mép)
               ĐỔI KÍCH THƯỚC KHUNG THÌ PHẢI TÍNH LẠI CẢ left LẪN height. */
            .page4 #slider-p4 .owl-controls {
                top: 0;
                width: 100vw;
                left: -10vw;
                height: 111.55vw;
                padding-bottom: 0;
            }

            .page4 #slider-p4 .owl-controls .owl-buttons {
                margin-top: 0;
            }

            /* Dùng chung btn-next.webp với bản PC (kể cả chiều xoay: prev lật
               180deg, next để nguyên — nằm ở khối PC nên ở đây không ghi đè
               transform nữa). Chiều cao phải đổi theo: btn-next.webp là
               195x253 (tỉ lệ 0.7708) chứ không phải 95x129 (0.7364) như
               btn-prev.webp cũ, giữ 17.87109375vw thì background-size: cover
               xén mất mép trên dưới. 13.18359375 x 253/195 = 17.1048vw. */
            .page4 #slider-p4 .owl-controls .owl-buttons .owl-prev,
            .page4 #slider-p4 .owl-controls .owl-buttons .owl-next {
                /* 10vw = đúng bề rộng rãnh trống ngoài khung ((100−80)/2), nên
                   nút nằm sát mép màn hình mà không lấn vào hộp băng chuyền.
                   Chiều cao giữ tỉ lệ ảnh 195x253: 10 x 253/195 = 12.97vw. */
                width: 10vw;
                height: 12.97vw;
                background: url("/images/landingpage/btn-next.webp") center center no-repeat;
                background-size: cover;
            }

            /* bottom âm = tụt xuống DƯỚI đáy .owl-controls. Đáy hộp điều khiển
               giờ trùng đáy khung slide, mà hàng chấm phải nằm ngoài khung —
               để bottom: 0 của bản PC thì chấm đè lên mép dưới tấm khung.
               5.05 = 1.44 (khe hở) + 3.61 (cỡ chấm). */
            .page4 #slider-p4 .owl-controls .owl-pagination {
                gap: 7.421875vw;
                background-size: 91.015625vw;
                bottom: -5.05vw;
            }

            .page4 #slider-p4 .owl-controls .owl-pagination .owl-page {
                width: 3.61328125vw;
                height: 3.61328125vw;
                border-radius: 3.61328125vw;
            }

            .page5 .page-inner {
                padding-bottom: 9.765625vw;
            }

            /* height: auto để không ăn chiều cao cố định 46.875vw của bản PC —
               mobile vẫn để chiều cao chạy theo số dòng như trước.
             *
             * padding trên/dưới chia lệch: mặt giấy của bg-bxh.webp (1540x964)
             * nằm ở y 151.5..780.5, tức chừa 15.72% trên và 19.04% dưới; nền
             * kéo 100% 100% nên hai tỉ lệ đó giữ nguyên ở mọi chiều cao. Bộ số
             * cũ (24vw / 14vw) làm ngược lại — dư chỗ phía trên, thiếu phía
             * dưới — nên hàng thứ 10 rớt xuống quá trục cuộn giấy.
             *
             * Số mới giải từ chiều cao nội dung thật (259px @390px): chừa đúng
             * 15.72% trên + 19.04% dưới, cộng 6px hở mỗi đầu cho chữ không
             * chạm mép giấy. Đổi cỡ chữ hay số dòng thì phải tính lại. */
            .page5 .bxh {
                width: 92.7734375vw;
                height: auto;
                /* Cùng cách canh như bản PC: khối nhìn thấy (thanh trục ở
                   y=85/964 = 8.82% chiều cao hộp, tức 9.29vw với hộp cao
                   105.36vw) cách đáy tiêu đề 1.8vw như khung slide page4,
                   nên margin = 1.8 - 9.29 = -7.49vw. */
                margin: -7.49vw auto 0;
                padding: 18.28vw 9.3vw 21.81vw;
            }

            /*
             * Bản PC đặt bottom theo % chiều cao .bxh, mà mobile để height:auto
             * nên hộp cao ~105vw thay vì theo tỉ lệ ảnh (58vw) — giữ 9% thì hạc
             * bị đẩy lên quá cao. Quy lại cho khoảng hở bằng đúng bản PC tính
             * theo bề ngang bảng (5.6% bề ngang), tức 4.9% chiều cao mobile.
             */
            .page5 .bxh .bxh-crane {
                bottom: 4.9%;
            }

            .page5 .bxh .bxh-top {
                gap: 3.90625vw;
                margin-bottom: 3.90625vw;
            }

            /*
             * Không còn là nút ảnh nên bỏ kích thước cố định, chỉ đặt cỡ chữ.
             * Tấm gỗ trên mobile chỉ rộng 101px (390/1540 của khung 399px), mà
             * 4.2vw cho chữ rộng tới 143px — tràn 21px mỗi bên. 2.55vw thì chữ
             * còn ~87px, nằm gọn trong tấm gỗ.
             */
            .page5 .bxh .bxh-top .bxh-btn {
                font-size: 2.55vw;
            }

            .page5 .bxh .bxh-content .bxh-pane .bxh-header {
                font-size: 3.61328125vw;
                margin-bottom: 1.46484375vw;
            }

            /* height: auto để bỏ chiều cao cố định 2.5vw của bản PC — mobile
               vẫn để dòng cao theo nội dung như trước. */
            .page5 .bxh .bxh-content .bxh-pane .bxh-row {
                font-size: 2.9296875vw;
                height: auto;
                padding: 1.171875vw 0;
            }

            /* max-height bằng đúng hộp chữ (2.9296875vw x 1.2) nên ba dòng đầu
               không cao hơn bảy dòng còn lại; width bị co lại theo tỉ lệ ảnh.
               Giữ nguyên tổng chiều cao danh sách mà padding của .bxh đã tính. */
            .page5 .bxh .bxh-content .bxh-pane .col.col-1 img {
                /* width: auto chứ không ghim 6.0546875vw — ghim cứng thì
                   max-height cắt chiều cao mà chiều rộng đứng yên, huy chương
                   bị bóp méo 50% (Lighthouse: image-aspect-ratio). Để auto thì
                   chiều rộng co theo đúng tỉ lệ ảnh như chú thích trên mô tả. */
                width: auto;
                max-height: 3.515625vw;
            }
        }

        .page2-news .background {
            height: auto !important;
        }

        .page2-news .page-inner {
            padding-top: 7.8125vw;
            display: flex;
            justify-content: center;
            z-index: 2;
        }

        .page2-news .news-wrap {
            width: 64.5833333333vw;
            margin: 0 auto;
            position: relative;
            padding-bottom: 2.6041666667vw;
        }

        .page2-news .news-title {
            width: 31.7708333333vw;
            height: 5.5729166667vw;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 10;
            margin: 0 auto;
        }

        .page2-news .news-title span {
            font-family: "FZHBRGAME";
            font-size: 3.8020833333vw;
            color: #fff08e;
            filter: drop-shadow(2px 2px 4px #fff08e);
            text-transform: capitalize;
            letter-spacing: 2px;
        }

        .page2-news .news-content-main {
            width: 100%;
            position: relative;
            padding: 2.6041666667vw 0 1.5625vw 3.6458333333vw;
        }

        .page2-news .news-tabs-nav {
            display: flex;
            gap: 2.0833333333vw;
            margin-bottom: 1.5625vw;
        }

        .page2-news .news-tabs-nav .news-tab-item {
            background: none;
            border: none;
            font-size: 1.5625vw;
            color: #723c34;
            text-transform: uppercase;
            cursor: pointer;
            padding: 0.2604166667vw 1.5625vw;
            transition: all 0.3s;
            min-width: 9.375vw;
        }

        .page2-news .news-tabs-nav .news-tab-item.active {
            color: #fff;
            background: url("/images/landingpage/bg-tab2.webp") center center no-repeat;
            background-size: 100% 100%;
        }

        .page2-news .news-tabs-nav .news-tab-item:hover:not(.active) {
            color: #a61d24;
        }

        .page2-news .news-list-scroll {
            max-height: 72.9166666667vw;
            overflow-y: auto;
            padding-right: 0.78125vw;
        }

        .page2-news .news-list-scroll::-webkit-scrollbar {
            width: 0.4166666667vw;
            display: block;
        }

        .page2-news .news-list-scroll::-webkit-scrollbar-track {
            background: #414141;
            border-radius: 0.2083333333vw;
        }

        .page2-news .news-list-scroll::-webkit-scrollbar-thumb {
            background: #979797;
            border-radius: 0.2083333333vw;
        }

        .page2-news .news-list-scroll .news-pane {
            display: none;
        }

        .page2-news .news-list-scroll .news-pane.active {
            display: block;
            animation: fadeInNews 0.4s ease forwards;
        }

        .page2-news .news-list-scroll .news-items-ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .page2-news .news-list-scroll .news-items-ul .news-li {
            padding: 1.0416666667vw 0;
            position: relative;
            padding-left: 1.8229166667vw;
            background: url("/images/landingpage/line-news.webp") center bottom no-repeat;
            background-size: 54.53125vw 0.15625vw;
        }

        .page2-news .news-list-scroll .news-items-ul .news-li:last-child {
            background: none;
        }

        .page2-news .news-list-scroll .news-items-ul .news-li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 1.6666666667vw;
            width: 0.4166666667vw;
            height: 0.4166666667vw;
            background: #620b0c;
            border-radius: 50%;
        }

        .page2-news .news-list-scroll .news-items-ul .news-li a {
            font-size: 1.71875vw;
            color: #000;
            line-height: 1.3;
            margin-bottom: 0.2604166667vw;
        }

        .page2-news .news-list-scroll .news-items-ul .news-li a:hover {
            color: #033e65;
            transform: none !important;
            filter: none !important;
        }

        .page2-news .news-list-scroll .news-items-ul .news-li .news-time {
            font-size: 0.9895833333vw;
            color: #666;
        }

        .page2-news .news-pagination-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5208333333vw;
            margin-top: 2.6041666667vw;
            font-family: inherit;
        }

        .page2-news .news-pagination-wrap .news-page-btn {
            font-size: 1.0416666667vw;
            color: #5d6771;
            text-decoration: none;
            padding: 0.2604166667vw 0.4166666667vw;
            font-weight: 500;
        }

        .page2-news .news-pagination-wrap .news-page-btn.active {
            font-weight: 700;
            color: #1a588b;
        }

        .page2-news .news-pagination-wrap .news-page-btn:hover {
            color: #a61d24;
            transform: none !important;
            filter: none !important;
        }

        .page2-news {
            /* News Detail Page Styles */
        }

        .page2-news .news-detail-main {
            width: 100%;
            padding: 2.6041666667vw 0 1.5625vw 3.6458333333vw;
            font-family: inherit;
        }

        .page2-news .news-detail-main .news-detail-header {
            border-bottom: 2px solid #999;
            padding-bottom: 0.5208333333vw;
            margin-bottom: 1.5625vw;
        }

        .page2-news .news-detail-main .news-detail-header .breadcum {
            display: flex;
            align-items: center;
            gap: 0.78125vw;
            font-size: 1.25vw;
            color: #333;
        }

        .page2-news .news-detail-main .news-detail-header .breadcum img {
            width: 2.7083333333vw;
        }

        .page2-news .news-detail-main .news-detail-header .breadcum a {
            color: #401e11;
            font-weight: 500;
        }

        .page2-news .news-detail-main .news-detail-header .breadcum a:hover {
            color: #a61d24;
            transform: none !important;
            filter: none !important;
        }

        .page2-news .news-detail-main .news-detail-header .breadcum span {
            color: #666;
        }

        .page2-news .news-detail-main .news-detail-header .breadcum span:not(:last-child) {
            display: inline-block;
            width: 1.09375vw;
            height: 1.25vw;
            background: url("/images/landingpage/icon-arrow.webp") center/contain no-repeat;
            font-size: 0;
            color: transparent;
            margin: 0 0.2604166667vw;
        }

        .page2-news .news-detail-main .news-detail-title {
            font-size: 1.71875vw;
            color: #5d2b21;
            font-weight: 400;
            text-transform: uppercase;
            margin-bottom: 1.5625vw;
            line-height: 1.2;
        }

        .page2-news .news-detail-main .news-detail-content {
            font-size: 0.9375vw;
            color: #333;
            line-height: 1.6;
            max-height: 53.6458333333vw;
            overflow-y: auto;
            padding-right: 0.78125vw;
        }

        .page2-news .news-detail-main .news-detail-content::-webkit-scrollbar {
            width: 0.4166666667vw;
            display: block;
        }

        .page2-news .news-detail-main .news-detail-content::-webkit-scrollbar-track {
            background: #414141;
            border-radius: 0.2083333333vw;
        }

        .page2-news .news-detail-main .news-detail-content::-webkit-scrollbar-thumb {
            background: #979797;
            border-radius: 0.2083333333vw;
        }

        .page2-news .news-detail-main .news-detail-content p {
            margin-bottom: 0.78125vw;
        }

        .page2-news .news-detail-main .news-detail-content p.has-bullet {
            position: relative;
            padding-left: 1.3020833333vw;
        }

        .page2-news .news-detail-main .news-detail-content p.has-bullet::before {
            content: "▶";
            position: absolute;
            left: 0;
            top: 0;
            font-size: 0.9375vw;
            color: #333;
        }

        .page2-news .news-detail-main .news-detail-content .gift-list {
            padding-left: 1.0416666667vw;
            margin: 1.0416666667vw 0;
        }

        .page2-news .news-detail-main .news-detail-content .gift-list p {
            margin-bottom: 0.2604166667vw;
        }

        .page2-news .news-detail-main .news-detail-content .news-img {
            margin: 2.0833333333vw 0;
            max-width: 100%;
            overflow: hidden;
        }

        .page2-news .news-detail-main .news-detail-others {
            padding-top: 0.5208333333vw;
            margin-top: 0.5208333333vw;
        }

        .page2-news .news-detail-main .news-detail-others .others-title {
            font-size: 1.3541666667vw;
            color: #723c34;
        }

        .page2-news .news-detail-main .news-detail-others .others-list {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 15.6770833333vw;
            overflow-y: auto;
            padding-right: 0.625vw;
        }

        .page2-news .news-detail-main .news-detail-others .others-list::-webkit-scrollbar {
            width: 0.4166666667vw;
        }

        .page2-news .news-detail-main .news-detail-others .others-list::-webkit-scrollbar-track {
            background: #414141;
            border-radius: 0.2083333333vw;
        }

        .page2-news .news-detail-main .news-detail-others .others-list::-webkit-scrollbar-thumb {
            background: #979797;
            border-radius: 0.2083333333vw;
        }

        .page2-news .news-detail-main .news-detail-others .others-list li {
            padding: 0.5208333333vw 0;
            display: flex;
            flex-direction: column;
            gap: 0.2604166667vw;
            position: relative;
            padding-left: 1.0416666667vw;
            background: url("/images/landingpage/line-news.webp") bottom no-repeat;
            background-size: 54.53125vw 0.15625vw;
        }

        .page2-news .news-detail-main .news-detail-others .others-list li:last-child {
            background: none;
        }

        .page2-news .news-detail-main .news-detail-others .others-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            top: 0.78125vw;
            font-size: 1.25vw;
            color: #333;
        }

        .page2-news .news-detail-main .news-detail-others .others-list li a {
            font-size: 1.1458333333vw;
            color: #333;
            font-weight: 500;
            line-height: 1.3;
        }

        .page2-news .news-detail-main .news-detail-others .others-list li a:hover {
            color: #a61d24;
            transform: none !important;
            filter: none !important;
        }

        .page2-news .news-detail-main .news-detail-others .others-list li span {
            font-size: 0.8333333333vw;
            color: #777;
        }

        .page2-news .news-detail-main .news-detail-others .btn-more-others {
            margin-bottom: 1.0416666667vw;
            display: flex;
            justify-content: flex-end;
            padding-right: 2.6041666667vw;
        }

        .page2-news .news-detail-main .news-detail-others .btn-more-others a {
            font-size: 1.1458333333vw;
            color: #333;
            font-weight: 700;
            display: block;
            width: 7.8125vw;
        }

        .page2-news .news-detail-main .news-detail-others .btn-more-others a:hover {
            color: #a61d24;
            transform: none !important;
            filter: none !important;
        }

        @keyframes fadeInNews {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Mobile & Tablet */
        @media (max-width: 1024px) {

            .page1-news .text-p1,
            .page1-news .age-rating,
            .page1-news .logo-vplay {
                display: none;
            }

            .page1-news .logo-game {
                position: absolute;
                top: 11.71875vw;
                right: 0.9765625vw;
                width: 41.9921875vw;
                filter: drop-shadow(0 0 0.9765625vw #000);
            }

            .page2-news {
                margin-top: -1px;
            }

            .page2-news .page-inner {
                padding-top: 0.9765625vw;
            }

            .page2-news .news-wrap {
                width: 94.23828125vw;
                padding-bottom: 4.8828125vw;
            }

            .page2-news .news-title {
                width: 56.640625vw;
                height: 11.23046875vw;
                padding-top: 1.46484375vw;
            }

            .page2-news .news-title span {
                font-size: 7.12890625vw;
            }

            .page2-news .news-content-main {
                padding: 3.90625vw 1.953125vw;
            }

            .page2-news .news-tabs-nav {
                gap: 3.90625vw;
                margin-bottom: 2.9296875vw;
                justify-content: center;
            }

            .page2-news .news-tabs-nav .news-tab-item {
                font-size: 2.9296875vw;
                padding: 1.46484375vw 2.9296875vw;
                min-width: 17.578125vw;
            }

            .page2-news .news-list-scroll {
                max-height: 242.1875vw;
                overflow-y: auto;
                padding-right: 1.46484375vw;
            }

            .page2-news .news-list-scroll::-webkit-scrollbar {
                width: 0.78125vw;
                display: block;
            }

            .page2-news .news-list-scroll::-webkit-scrollbar-track {
                background: #414141;
                border-radius: 0.390625vw;
            }

            .page2-news .news-list-scroll::-webkit-scrollbar-thumb {
                background: #979797;
                border-radius: 0.390625vw;
            }

            .page2-news .news-list-scroll .news-items-ul .news-li {
                padding: 1.953125vw 0;
                padding-left: 4.39453125vw;
                background-size: 86.9140625vw 0.1953125vw;
            }

            .page2-news .news-list-scroll .news-items-ul .news-li::before {
                top: 3.125vw;
                width: 0.78125vw;
                height: 0.78125vw;
                left: 1.953125vw;
            }

            .page2-news .news-list-scroll .news-items-ul .news-li a {
                font-size: 3.22265625vw;
                margin-bottom: 0.48828125vw;
            }

            .page2-news .news-list-scroll .news-items-ul .news-li .news-time {
                font-size: 1.85546875vw;
            }

            .page2-news .news-pagination-wrap {
                gap: 0.9765625vw;
                margin-top: 4.8828125vw;
            }

            .page2-news .news-pagination-wrap .news-page-btn {
                font-size: 2.34375vw;
                padding: 0.48828125vw 0.78125vw;
            }

            .page2-news .news-detail-main {
                width: 100%;
                padding: 4.8828125vw 1.953125vw 0 2.9296875vw;
            }

            .page2-news .news-detail-main .news-detail-header {
                padding-bottom: 0.9765625vw;
                margin-bottom: 2.9296875vw;
            }

            .page2-news .news-detail-main .news-detail-header .breadcum {
                gap: 1.46484375vw;
                font-size: 2.63671875vw;
            }

            .page2-news .news-detail-main .news-detail-header .breadcum img {
                width: 4.8828125vw;
            }

            .page2-news .news-detail-main .news-detail-header .breadcum span:not(:last-child) {
                width: 2.05078125vw;
                height: 2.34375vw;
                margin: 0 0.48828125vw;
            }

            .page2-news .news-detail-main .news-detail-title {
                font-size: 3.7109375vw;
                margin-bottom: 2.9296875vw;
                line-height: 1.2;
            }

            .page2-news .news-detail-main .news-detail-content {
                font-size: 3.02734375vw;
                max-height: 161.1328125vw;
                padding-right: 1.46484375vw;
            }

            .page2-news .news-detail-main .news-detail-content::-webkit-scrollbar {
                width: 0.78125vw;
            }

            .page2-news .news-detail-main .news-detail-content::-webkit-scrollbar-track {
                border-radius: 0.390625vw;
            }

            .page2-news .news-detail-main .news-detail-content::-webkit-scrollbar-thumb {
                border-radius: 0.390625vw;
            }

            .page2-news .news-detail-main .news-detail-content p {
                margin-bottom: 1.46484375vw;
            }

            .page2-news .news-detail-main .news-detail-content p.has-bullet {
                padding-left: 2.44140625vw;
            }

            .page2-news .news-detail-main .news-detail-content p.has-bullet::before {
                font-size: 2.34375vw;
                top: 0.68359375vw;
            }

            .page2-news .news-detail-main .news-detail-content .gift-list {
                padding-left: 1.953125vw;
                margin: 1.953125vw 0;
            }

            .page2-news .news-detail-main .news-detail-content .gift-list p {
                margin-bottom: 0.48828125vw;
            }

            .page2-news .news-detail-main .news-detail-content .news-img {
                margin: 3.90625vw 0;
            }

            .page2-news .news-detail-main .news-detail-others {
                padding: 0;
                margin: 1.953125vw 0 0 0;
            }

            .page2-news .news-detail-main .news-detail-others .others-title {
                font-size: 3.125vw;
                margin-bottom: 0.9765625vw;
            }

            .page2-news .news-detail-main .news-detail-others .others-list {
                max-height: 42.3828125vw;
                padding-right: 1.171875vw;
            }

            .page2-news .news-detail-main .news-detail-others .others-list::-webkit-scrollbar {
                width: 0.78125vw;
            }

            .page2-news .news-detail-main .news-detail-others .others-list::-webkit-scrollbar-track {
                border-radius: 0.390625vw;
            }

            .page2-news .news-detail-main .news-detail-others .others-list::-webkit-scrollbar-thumb {
                border-radius: 0.390625vw;
            }

            .page2-news .news-detail-main .news-detail-others .others-list li {
                padding: 0.9765625vw 0;
                gap: 0.48828125vw;
                padding-left: 1.953125vw;
                background-size: 102.24609375vw 0.29296875vw;
            }

            .page2-news .news-detail-main .news-detail-others .others-list li::before {
                top: 1.46484375vw;
                font-size: 2.34375vw;
            }

            .page2-news .news-detail-main .news-detail-others .others-list li a {
                font-size: 3.125vw;
            }

            .page2-news .news-detail-main .news-detail-others .others-list li span {
                font-size: 2.44140625vw;
            }

            .page2-news .news-detail-main .news-detail-others .btn-more-others {
                margin-bottom: 1.953125vw;
                padding-right: 4.8828125vw;
            }

            .page2-news .news-detail-main .news-detail-others .btn-more-others a {
                font-size: 3.125vw;
                width: 19.53125vw;
            }
        }