/* 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;
        }

        .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);
            }
        }

        .page .background {
            position: relative;
            z-index: 1;
            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;
        }

        .page1 .logo-game,
        .page1-news .logo-game {
            width: 17.1875vw;
            display: block;
            margin: 0 0 0 19.7916666667vw;
        }

        .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;
        }

        .page1 .layer .text-p1,
        .page1-news .layer .text-p1 {
            width: 53.9583333333vw;
            margin: 22.9166666667vw 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;
        }

        .page2 .block2 {
            width: 76.0416666667vw;
            position: relative;   /* mốc neo cho .news-block đặt theo % */
            margin: 4.1666666667vw auto 0;
            background: url("/images/image_ttgh/bg_page2.png") center/100% 100% no-repeat;
            /* Chieu cao cua background: tang/giam so vw nay (noi dung ben trong van canh giua) */
            min-height: 28vw;
        }

        /*
         * 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 độ.
             *
             * Ảnh nền kéo 100% 100% nên bị nén dọc và giãn ngang, hệ số
             * (28/76.0417) / (759/1422) = 0.69. Góc nhìn thấy còn 0.27 độ.
             * Hệ số này chỉ gồm các số vw nên không đổi theo bề rộng màn hình,
             * do đó để góc cố định là đúng ở mọi kích thước.
             *
             * 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.27deg);
        }

        /* 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.
         */
        .page2 .block2 .news-block .news-block-header {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            top: -0.8vw;
        }

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

        .page2 .block2 .news-block .news-block-header .news-menu li .menu-item {
            background: none;
            border: none;
            font-family: inherit;
            font-size: 1.1458333333vw;
            color: #3f2c14;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0.78125vw;
            font-weight: 600;
            min-width: 5.15625vw;
            text-shadow: 0 0.05vw 0.1vw rgba(255, 250, 235, 0.7);
        }

        /* Tab đang mở nằm trên con dấu đỏ sẫm (#440000) nên chữ phải sáng, lấy
           tông vàng kem giống chữ trên header của site. */
        .page2 .block2 .news-block .news-block-header .news-menu li .menu-item.active {
            color: #f3e491;
            background: url("/images/landingpage/bg-tab.webp") center center no-repeat;
            background-size: 100% 100%;
        }

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

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

        .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.27deg)
         * 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;
        }

        .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(7.4deg);
            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;
        }

        /* Không kẻ gạch riêng nữa — trang giấy trong bg_page2.png đã có dòng kẻ
           in sẵn, thêm gạch của mình vào là chồng hai lớp kẻ lệch nhau.
           Đệ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;
        }

        .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);
        }

        /*
         * Trước đây là chữ nâu trơn nằm lọt thỏm trên giấy, không ai nhận ra là
         * nút bấm được. Đổi thành thẻ nền đỏ son — cùng tông với con dấu ở tab
         * đang mở và nút "+", nên không mang màu lạ vào bảng màu của quyển sách.
         */
        /*
         * align-self: center chỉ canh giữa theo khối tin, mà khối tin lại không
         * trùng tâm trang giấy ở độ cao này: trang là hình thang nên tâm dịch
         * dần sang phải khi xuống thấp, cộng thêm rotateY kéo phần nhìn thấy
         * lệch sang trái. Đo được lệch 13px ở 1920 nên đẩy lại đúng bấy nhiêu.
         */
        .page2 .block2 .news-block .news-block-content .news-pane .btn-more {
            align-self: center;
            position: relative;
            left: 0.6770833333vw;
            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;
            font-size: 0.9895833333vw;
            font-weight: 700;
            color: #f3e491;
            text-decoration: none;
            background: #8c1219;
            border: 1px solid #5e0b10;
            border-radius: 0.2083333333vw;
            padding: 0.2604166667vw 1.0416666667vw;
            box-shadow: 0 0.1041666667vw 0.2604166667vw rgba(60, 30, 10, 0.35);
            transition: all 0.25s ease;
        }

        .page2 .block2 .news-block .news-block-content .news-pane .btn-more:hover {
            background: #a61d24;
            color: #fff8e1;
            text-decoration: none;
        }

        .page2 .block3 {
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 0.5208333333vw;
            margin-top: 4.9895833333vw;
        }

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

        .page2 .block3 .btn .imgFull {
            height: 135%;
        }
        .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.png") 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 mới btn-prev.png là huy hiệu tròn 195x196, ảnh cũ
         * btn-prev.webp là mũi tên dọc 95x129. 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.
         *
         * Chiều cao lấy theo đúng tỉ lệ ảnh mới (196/195) để background-size
         * contain phủ kín hộp, không hở trên dưới. 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.9732905983vw;
            background: url("/images/image_ttgh/btn-prev.png") center center no-repeat;
            background-size: contain;
            cursor: pointer;
            border: none;
            transition: all 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;
            transition: all 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.png") 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.png") 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.png") 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. */
            margin: -1.615vw auto 0;
            position: relative;
            z-index: 2;
            background: url('/images/image_ttgh/bg-bxh.webp') no-repeat center / 100% 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;
        }

        /*
         * 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;
        }

        .page5 .bxh .bxh-content .bxh-pane .bxh-row {
            display: flex;
            align-items: center;
            font-size: 1.15vw;
            font-weight: 500;
            color: #331e0f;
            padding: 0.36vw 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;
        }

        .page5 .bxh .bxh-content .bxh-pane .col.col-1 img {
            width: 1.7vw;
            height: auto;
            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);
            }
        }

        .p5-bottom-nav {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: #000000;
            padding: 0.8510416667vw 0;
            z-index: 10;
            /* border-bottom: 3px solid #224a69;*/
        }

        .p5-bottom-nav .p5-nav-inner {
            max-width: 67.7083333333vw;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2.34375vw;
        }

        .p5-bottom-nav .p5-nav-item {
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            color: #fff;
            text-transform: capitalize;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .p5-bottom-nav .p5-nav-item:hover {
            color: #f7ca6c;
            transform: translateY(-2px);
        }

        .p5-bottom-nav .p5-nav-item.active {
            color: #f7ca6c;
        }


        .nav-page {
            position: fixed;
            left: 1.0416666667vw;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1001;
        }

        .nav-page ul {
            list-style: none;
            padding: 1.8229166667vw 0 0 0;
            margin: 0;
            position: relative;
        }

        .nav-page ul:before {
            content: "";
            display: block;
            width: 2px;
            height: 19.0625vw;
            position: absolute;
            left: 0.5208333333vw;
            top: 0;
            z-index: 1;
            background: url("/images/landingpage/line-page.webp") center center no-repeat;
            background-size: cover;
        }

        .nav-page ul .nav-item {
            margin-bottom: 1.5625vw;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            z-index: 2;
        }

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

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

        .nav-page ul .nav-item .dot {
            width: 1.1458333333vw;
            height: 1.1458333333vw;
            border-radius: 1.1458333333vw;
            background: url("/images/image_ttgh/icon-page.png") center/contain no-repeat;
            display: block;
            flex-shrink: 0;
        }

        .nav-page ul .nav-item .text {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: inherit;
            font-size: 1.3541666667vw;
            font-weight: 500;
            color: #fff;
            line-height: 1.1;
            text-align: center;
            text-transform: capitalize;
            text-shadow: 2px 1px 2px #000;
            white-space: nowrap;
            pointer-events: auto;
            min-width: 7.2vw;
            min-height: 2.5vw;
            padding: 0.35vw 0.8vw;
            background: url("/images/image_ttgh/bg_den.png") center/100% 100% no-repeat;
        }

        .nav-page ul .nav-item.active .dot {
            background-image: url("/images/image_ttgh/icon-page-active.png");
        }

        .nav-page ul .nav-item.active .text {
            background-image: url("/images/image_ttgh/bg_do.png");
        }

        .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;
            }

            .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;
                border-radius: 1.953125vw;
                overflow: hidden;
            }

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

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

            .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%;
            }

            .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%;
            }

            .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%;
                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;
            }

            .page2 .block2 {
                width: 100%;
                margin: 0.9765625vw auto 0;
                background: none;
                min-height: 0;
            }

            /*
             * Mobile sẽ dùng ảnh nền khác nên phần này tạm giữ nguyên cách bày
             * cũ: khối tin nằm trong dòng chảy bình thường, không đặt tuyệt
             * đối, không nghiêng, danh sách cao theo max-height chứ không giãn
             * theo flex như bản PC. Bản PC trước đây dùng flex để canh giữa,
             * giờ bỏ rồi nên tự canh bằng margin.
             */
            .page2 .block2 .news-block {
                position: static;
                width: 54.19921875vw;
                height: auto;
                padding: 0;
                margin: 1.953125vw auto 0;
            }

            .page2 .block2 .news-block .news-block-content,
            .page2 .block2 .news-block .news-block-content .news-pane .news-list {
                flex: none;
            }

            /* Mobile chưa có nền trang giấy nên không có viền nào để bám theo,
               ẩn thanh cuộn tự dựng; vuốt tay vẫn cuộn được bình thường. */
            .page2 .block2 .news-block .news-block-content .news-pane .news-list-wrap {
                position: static;
                height: auto;
                display: block;
                flex: none;
            }

            .page2 .block2 .news-block .news-block-content .news-pane .btn-more {
                margin-top: 0;
            }

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

            .page2 .block2 .news-block .news-block-content .news-pane.active {
                height: auto;
            }

            .page2 .block2 .news-block .news-block-header .news-menu {
                gap: 2.9296875vw;
            }

            .page2 .block2 .news-block .news-block-header .news-menu li .menu-item {
                font-size: 2.63671875vw;
                padding: 1.46484375vw;
                min-width: 9.66796875vw;
            }

            .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;
            }

            .page2 .block2 .news-block .news-block-content .news-pane .news-list {
                max-height: 25.390625vw;
            }

            /* Mobile chưa có nền giấy kẻ dòng nên vẫn cần gạch phân cách riêng.
               Bản PC đã bỏ vì trang giấy có sẵn dòng kẻ in. */
            .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item {
                padding: 1.26953125vw 0;
                background: url("/images/landingpage/line-news.webp") center bottom no-repeat;
                background-size: 54.19921875vw 1px;
            }

            .page2 .block2 .news-block .news-block-content .news-pane .news-list .news-item:last-child {
                background: none;
            }

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

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

            .page2 .block2 .news-block .news-block-content .news-pane .btn-more {
                font-size: 2.34375vw;
                bottom: -1.953125vw;
                left: initial;
                right: 0;
            }

            .page2 .block3 {
                gap: 0.9765625vw;
                margin-top: 15.13671875vw;
            }

            .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);
            }

            .page3 .page3-left .char-desc {
                width: 69.53125vw;
                height: 34.1796875vw;
                /* Cùng tỉ lệ % viền/tua đã đo trên ảnh nguồn như bản PC, quy đổi
                   sang khung mobile 69.53125x34.1796875vw (background-size
                   100% 100% nên trục ngang/dọc quy đổi độc lập, không cần khớp
                   tỉ lệ ảnh). Font hạ thêm một nấc so với tỉ lệ PC (2.31vw) vì
                   bài dài nhất ở mobile (398 ký tự, cỡ chữ to hơn PC) vẫn tràn
                   khỏi padding-bottom ở 2.31vw — thử trực tiếp trên trình duyệt. */
                font-size: 2.2vw;
                padding: 5.4953125vw 8.3007813vw 5.1269531vw 8.3007813vw;
                margin: 33.203125vw auto 0;
                background-size: 100% 100%;
            }

            .page3 .page3-btns {
                width: 95.1171875vw;
                margin: 0.9765625vw auto 0;
                gap: 0.9765625vw;
            }

            /* Cũng giữ nguyên bề rộng như cũ, chiều cao theo tỉ lệ ảnh mới. */
            .page3 .page3-btns .btn-prev,
            .page3 .page3-btns .btn-next {
                width: 6.640625vw;
                height: 6.6746794872vw;
            }

            .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: 81.0546875vw;
                padding: 0.48828125vw;
                border-radius: 4.8828125vw;
            }

            .page3 .page3-btns .page3-btn {
                width: 12.20703125vw;
            }

            .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. Trả lại nguyên bộ số cũ. */
            .page4 #slider-p4 {
                width: 67.08984375vw;
                margin: 0 auto;
                left: 0;
            }

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

            .page4 #slider-p4 .owl-wrapper-outer .owl-item {
                height: 95.21484375vw;
                background: url("/images/landingpage/bg-slide-mb.webp") center center no-repeat;
                background-size: 100% 100%;
                padding: 3.90625vw 2.44140625vw;
            }

            /* Ô mobile cao gấp rưỡi ảnh nên phải contain, cover là xén mất gần
               hết ả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;
            }

            .page4 #slider-p4 .owl-controls {
                top: 0;
                width: 144%;
                left: -22%;
                height: 110%;
                padding-bottom: 10%;
            }

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

            .page4 #slider-p4 .owl-controls .owl-buttons .owl-prev,
            .page4 #slider-p4 .owl-controls .owl-buttons .owl-next {
                width: 13.18359375vw;
                height: 17.87109375vw;
                background: url("/images/landingpage/btn-prev.webp") center center no-repeat;
                background-size: cover;
            }

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

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

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

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

            .page4 #slider-p4 .owl-controls .owl-pagination {
                gap: 7.421875vw;
                background-size: 91.015625vw;
            }

            .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;
                margin: 11.71875vw auto 0;
                padding: 18.28vw 9.3vw 21.81vw;
            }

            .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;
            }

            .page5 .bxh .bxh-content .bxh-pane .bxh-row {
                font-size: 2.9296875vw;
                padding: 1.171875vw 0;
            }

            .page5 .bxh .bxh-content .bxh-pane .col.col-1 img {
                width: 6.0546875vw;
            }
        }

        .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;
            }
        }