/* ========== STYLE CỦA HEADER MENU (PC - bottom nav) ========== */
        .p5-bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
            background: rgba(0,0,0,0.9);
            border-top: 1px solid #444;
        }

        .p5-nav-inner {
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .p5-nav-item {
            flex: 1;
            text-align: center;
            padding: 14px 10px;
            color: #fff;
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
            transition: all 0.3s ease;
            border-right: 1px solid rgba(255,255,255,0.1);
        }

            .p5-nav-item:last-child {
                border-right: none;
            }

            .p5-nav-item:hover {
                background: #c62828;
                color: #fff;
            }

            .p5-nav-item.active {
                background: #a40000;
                color: #ffd54f;
            }

        /* ========== STYLE CỦA HEADER MOBILE (từ LandingPage) ========== */
        .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;
        }

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

        /* ========== RESPONSIVE CHUNG ========== */
        .showOnPc {
            display: block;
        }

        .showOnMobile {
            display: none;
        }

        @media screen and (max-width: 1024px) {
            .showOnPc {
                display: none !important;
            }

            .showOnMobile {
                display: block !important;
            }

            .p5-bottom-nav {
                display: none !important;
            }

            .r-bg-main {
                padding-top: 11.71875vw;
            }

            /*
             * CĂN MÁI NGÓI VÀO ĐÚNG MỐI NỐI NHÂN VẬT / PHONG CẢNH
             *
             * background_ttgh.png (1914x4042) là MỘT ảnh dọc ghép hai lớp: banner
             * nhân vật rồi tới lớp phong cảnh. Chỗ ghép hai lớp này ("viền ngăn
             * cách nhân vật") là một đường cắt ngang khá lộ nếu để trống — mái
             * ngói (::before của .r-posts) phải nằm ĐÈ lên đúng chỗ ghép đó mới
             * che kín. Công thức bên dưới (40.6063vw) đã tính ra đúng vị trí chỗ
             * ghép đó theo lý thuyết, nhưng che "vừa khít" theo số đo lại không
             * chắc là chỗ NHÌN ƯNG MẮT nhất — tuỳ mắt nhìn mà có thể cần mái ngói
             * ăn sâu thêm vào nhân vật một chút, hoặc lùi ra một chút.
             *
             * CHỈNH TAY: đổi số của --roof-nudge-mb trong khối .r-bg-header ngay
             * dưới đây, KHÔNG đụng vào công thức calc().
             *   - số ÂM (vd -20px)  → mái ngói kéo LÊN, che bớt vào nhân vật
             *   - số DƯƠNG (vd 20px) → mái ngói đẩy XUỐNG, lộ nhân vật nhiều hơn
             *   - đổi xong thì reload trang xem thử, không cần tính toán gì thêm
             */
            .r-bg-header {
                --roof-nudge-mb: 0px;
                height: calc(40.6063vw + 6px + var(--roof-nudge-mb));
            }
        }

        /* Các style cũ khác giữ nguyên */
        .imgFull {
            display: block;
            width: 100%;
            height: auto;
        }

        /* background_ttgh2.png từng nối dài phong cảnh xuống VÔ HẠN khi trang
           cao hơn background_ttgh.png — nay bỏ trên PC. Nội dung dài hơn ảnh
           nền thì cuộn riêng bên trong khung giấy (xem .r-posts / .posts và
           .article-body trong chi-tiet-tin.css) thay vì kéo dài nền vô tận.
           Mobile vẫn giữ lại một lượng CÓ HẠN — xem khối mobile ngay dưới. */
        .r-bg-main {
            background: url("/images/image_ttgh/background_ttgh.png") center top no-repeat;
            background-size: 100% auto;
            /* Mái ngói của khung bài viết (.r-posts::before) thò ra hai bên
               bằng inset ÂM. Ảnh khung mới có mái rộng hơn ảnh cũ, nên trên màn
               hẹp phần thò ra vượt quá mép phải khung nhìn và đẻ ra thanh cuộn
               NGANG (đo thật ở 375px: lố 2.5px). Cắt phần thò ra ở đây.
               Dùng clip chứ không dùng hidden: hidden sẽ ép trục còn lại thành
               auto, biến .r-bg-main thành một vùng cuộn dọc riêng. */
            overflow-x: clip;
        }

        /*
         * MOBILE: nới thêm background_ttgh2.png (repeat-y) làm khung nền cho
         * phần "buffer" 3.5 tấm đã cộng vào max-height của .posts (khối
         * .r-posts > .posts ở dưới) — trên màn hẹp một mình background_ttgh
         * quá thấp, để .article-body quá bí. background_ttgh2 tự lặp lại
         * theo chiều cao thật của .r-bg-main (đã bị chặn trần bởi max-height
         * của .posts rồi, không còn lặp vô hạn như trước nữa), nên không cần
         * đếm tay đúng 3 hay 4 tấm — cứ lặp tới đâu hết chỗ thì dừng tới đó,
         * luôn khớp với đúng khoảng đã cộng thêm bên .posts.
         */
        @media screen and (max-width: 1024px) {
            .r-bg-main {
                background-position: center 30px, center 30px;
                background-image: url("/images/image_ttgh/background_ttgh.png"), url("/images/image_ttgh/background_ttgh2.png");
                background-repeat: no-repeat, repeat-y;
                background-size: 100% auto, 100% auto;
            }
        }
        /* Công thức canh mái ngói vào chỗ ghép nhân vật/phong cảnh — xem chú
           thích đầy đủ ở khối .r-bg-header trong @media (max-width: 1024px)
           bên trên. Bản PC không có padding-top/lệch nền riêng của mobile,
           nên chỉ trừ margin-top 24px cố định của .container (.my-4).

           CHỈNH TAY: đổi số của --roof-nudge-pc bên dưới, KHÔNG đụng calc().
             - số DƯƠNG (vd 20px) → mái ngói đẩy XUỐNG, lộ nhân vật nhiều hơn
             - số ÂM (vd -20px)  → mái ngói kéo LÊN, che bớt vào nhân vật */
        @media (min-width: 1025px) {
            .r-bg-header {
                --roof-nudge-pc: 0px;
                height: calc(52.325vw - 24px + var(--roof-nudge-pc));
            }
        }
        /*
         * ============================================================
         *  KHUNG BÀI VIẾT — MỘT ẢNH DUY NHẤT bg-main-sub2.png (1402x2240)
         * ============================================================
         *
         * Trước đây khung ghép từ 3 lát (bg-main-sub-top/mid/bottom.webp) để
         * cao bao nhiêu cũng được — lát giữa lặp dọc theo độ dài bài. Nay dùng
         * nguyên MỘT ảnh, nên khung có KÍCH THƯỚC CỐ ĐỊNH theo tỉ lệ ảnh; bài
         * dài hơn thì cuộn bên trong chứ khung không giãn ra nữa. Ba lát cũ
         * không còn chỗ nào dùng.
         *
         * SỐ ĐO TRÊN ẢNH (đo bằng cách quét alpha + màu, đổi ảnh phải đo lại):
         *   thân giấy (khung chữ nhật)     x  76..1337  → rộng 1262px
         *   mái ngói thò ra ngoài thân giấy  trái 76px, phải 64px
         *   lề trong suốt ở đỉnh ảnh         30px
         *   lòng giấy (trong viền vàng)    x  90..1325, y 315..2210
         *
         * .r-posts vẫn rộng đúng bằng THÂN GIẤY (như bản 3 lát cũ) để bề ngang
         * chữ không đổi; mái ngói thò ra hai bên nhờ ::before có inset ÂM.
         *
         * MÁI NGÓI ĐẶT ĐÚNG CHỖ MÁI CŨ:
         * Lát mái cũ (1376x324) có 8px trong suốt ở đỉnh và được vẽ từ mép trên
         * .r-posts, nên mái cũ hiện ra ở +8px (đơn vị ảnh) dưới mép trên khung.
         * Ảnh mới có 30px trong suốt. Muốn mái mới rơi đúng chỗ mái cũ thì mép
         * trên .r-posts phải ứng với dòng y=22 của ảnh mới (30 − 8 = 22). Từ đó:
         *   .r-posts cao = ảnh từ y=22 hết y=2239 = 2218px → aspect 1262/2218
         *   ::before     = trọn ảnh, dịch lên 22px, cao 2240px
         * Hai lối tính này cho cùng một hệ số (1 điểm ảnh = W/1262), nên mái
         * mới trùng khít mái cũ — đã đo lại trên trình duyệt: lệch 0.00px.
         *
         * display:flex cho .r-posts và .posts (bên dưới) để TRUYỀN chiều cao cố
         * định này xuống .article-body ở chi-tiet-tin.css — các div bọc trung
         * gian (article-detail, posts-item, detail_article, article__detail,
         * StaticMain, ContentBlock) không có style riêng nên chuyển sang
         * display:contents, coi như trong suốt về layout.
         *
         * overflow KHÔNG đặt trên .r-posts: ::before cố tình nhô ra ngoài hai
         * mép, mà khai overflow dù chỉ một trục là CSS tự suy trục còn lại
         * thành auto, mái ngói bị chính .r-posts cắt/cuộn ngang mất. Nên phần
         * cuộn nằm ở .posts (con trực tiếp, không có gì cần nhô ra).
         */
        .r-posts {
            position: relative;
            display: flex;
            flex-direction: column;
            aspect-ratio: 1262 / 2218;
            /*
             * min-height: 0 là BẮT BUỘC, không có là aspect-ratio vô tác dụng.
             * Theo chuẩn, hộp vừa có aspect-ratio vừa để overflow: visible thì
             * min-height:auto lấy theo CHIỀU CAO NỘI DUNG — bài dài là khung
             * cao vống lên đúng bằng bài (đo thật: 11334px thay vì 2623px).
             * Mà .r-posts thì buộc phải để overflow visible cho mái ngói thò
             * ra ngoài. Ghi rõ min-height: 0 để bỏ cái tối thiểu đó đi, khung
             * mới đúng tỉ lệ ảnh và phần dư mới chịu cuộn bên trong.
             */
            min-height: 0;
            /*
             * Lề vào lòng giấy. Số DỌC phải quy về bề rộng, vì padding tính
             * bằng % thì kể cả trên/dưới cũng ăn theo BỀ RỘNG:
             *   trên  (315−22)/2218 của chiều cao = 23.22% bề rộng → lấy 24%
             *   dưới  (2239−2210)/2218           =  2.30% bề rộng → lấy 4%
             * Ngang lấy 2.5% như bản cũ (viền vàng dọc chỉ dày ~1%, chừa thêm
             * cho chữ hở khỏi viền).
             */
            padding: 24% 2.5% 4%;
        }

        article.article-detail,
        .posts-item,
        .detail_article,
        .article__detail,
        .StaticMain,
        .ContentBlock {
            display: contents;
        }

        /*
         * Cả khung giấy (mái ngói + thân giấy + đáy) vẽ bằng MỘT ảnh
         * bg-main-sub2.png, phủ trọn ::before. Vì ảnh có mái thò ra ngoài thân
         * giấy nên ::before phải rộng hơn .r-posts, dùng inset ÂM.
         *
         * Bốn số dưới đây suy ra từ số đo ảnh ở khối .r-posts phía trên; sửa
         * ảnh thì phải đo lại cả bộ:
         *   trái   −76/1262   = −6.0222%   (bề rộng)
         *   phải   −64/1262   = −5.0713%   (bề rộng)
         *   trên   −22/2218   = −0.9919%   (chiều cao)
         *   cao     2240/2218 = 100.9919%  (chiều cao)
         *
         * background-size: 100% 100% ở đây KHÔNG kéo méo ảnh: hai chiều cùng
         * nhân một hệ số (1262 đơn vị ảnh ↔ bề rộng .r-posts), nên khung
         * ::before ra đúng tỉ lệ gốc 1402x2240.
         */
        .r-posts::before {
            content: "";
            position: absolute;
            top: -0.9919%;
            left: -6.0222%;
            right: -5.0713%;
            height: 100.9919%;
            background: url('/images/image_ttgh/bg-main-sub2.png') center top / 100% 100% no-repeat;
            pointer-events: none;
            z-index: 0;
        }

        /*
         * z-index: 1 để chữ nổi lên trên ::before (ảnh khung).
         *
         * overflow-y: auto ở đây (không phải trên .r-posts, xem lý do ở khối
         * .r-posts phía trên) là chỗ cuộn dự phòng của toàn bộ nội dung khung
         * giấy. Bình thường .article-body (chi-tiet-tin.css) đã tự cuộn riêng
         * nên .posts hiếm khi phải cuộn; nó chỉ ra tay khi tiêu đề + "Tin
         * khác" của một bài cụ thể đã dài tới mức cộng lại vượt hết chỗ còn.
         *
         * overflow-x: hidden là BẮT BUỘC phải ghi rõ: chỉ khai overflow-y thì
         * CSS tự suy trục còn lại thành auto, và trang sẽ mọc thanh cuộn NGANG
         * ngay khi có ảnh/bảng trong bài rộng quá khổ. Trang này chỉ cuộn dọc.
         *
         * display:flex + flex:1 1 auto + min-height:0: .posts là con trực
         * tiếp duy nhất của .r-posts, phải co theo chiều cao cố định của khung
         * thay vì cứ theo chiều cao tự nhiên của nội dung. min-height:0 vì
         * flex item mặc định không co dưới chiều cao nội dung của chính nó.
         */
        .r-posts > .posts {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            /* Firefox: chỉ có hai thuộc tính này, không có ::-webkit-*.
               Rãnh trượt để transparent cho mất dải trắng, giữ lại con lăn. */
            scrollbar-width: thin;
            scrollbar-color: rgba(122, 26, 18, 0.55) transparent;
        }

        /*
         * Thanh cuộn của khung giấy: bỏ rãnh trượt, chỉ chừa con lăn. Mặc định
         * trình duyệt vẽ rãnh xám/trắng chạy suốt chiều cao, nằm trên nền giấy
         * trông như một vệt trắng cắt dọc khung.
         *
         * Đây là vùng cuộn CHÍNH trên mobile (thân bài không cuộn riêng nữa —
         * xem khối mobile trong chi-tiet-tin.css), còn trên PC chỉ là lưới đỡ.
         */
        .r-posts > .posts::-webkit-scrollbar {
            width: 8px;
        }

        .r-posts > .posts::-webkit-scrollbar-track {
            background: transparent;
        }

        .r-posts > .posts::-webkit-scrollbar-thumb {
            background: rgba(122, 26, 18, 0.55);
            border-radius: 4px;
        }

        .r-posts > .posts::-webkit-scrollbar-thumb:hover {
            background: rgba(122, 26, 18, 0.8);
        }

        /*
         * Hai khối trần CHIỀU CAO cũ (một cho PC, một cho mobile) đã bỏ: khung
         * giấy nay có kích thước cố định theo tỉ lệ ảnh bg-main-sub2.png, không
         * còn co theo độ dài bài viết nữa nên chẳng còn gì để chặn.
         *
         * Nhưng lại phải chặn BỀ RỘNG, vì khung và ảnh nền lớn theo hai nhịp
         * khác nhau: chiều cao khung ăn theo bề rộng KHUNG (cố định 1.7575 lần),
         * còn đáy ảnh nền ăn theo bề rộng MÀN HÌNH. Màn càng hẹp thì khung càng
         * chiếm tỉ lệ lớn, tới lúc nào đó đẩy footer tụt xuống dưới mép ảnh nền
         * và hở ra vệt trắng (đo thật ở 1280x720: hở 7px).
         *
         * Giải bất phương trình footer ≤ đáy ảnh nền, với V là bề rộng khung
         * nhìn, s là bề ngang thanh cuộn dọc:
         *   mép trên khung = 0.52325V − 76   (52.325vw − 24px của .r-bg-header,
         *                    cộng margin-top −60px của .container và +8px mt-2)
         *   chiều cao khung = 1.757528 × W
         *   đáy ảnh nền    = 2.111808 × (V − s)
         *   footer         = mép trên + chiều cao + 24px margin-bottom
         *   ⇒ W ≤ 0.903859V − 1.201581s + 29.59
         *
         * Lấy −20px thay cho phần theo s để phủ được cả s=0 (macOS) lẫn s=17.
         * Khi trần này ăn, khung chỉ HẸP LẠI chứ vẫn đúng tỉ lệ ảnh — mái ngói
         * không bị bóp méo, chỉ nhỏ đi đôi chút.
         *
         * Mobile không cần trần: ảnh nền mobile có background_ttgh2 lặp dọc lót
         * phía sau nên không bao giờ hết nền.
         */
        @media (min-width: 1025px) {
            .r-posts {
                max-width: calc(90.3859vw - 20px);
                margin-left: auto;
                margin-right: auto;
            }
        }