@font-face {
            font-family: 'FzGameBrV2';
            src: url('/fonts/FzGameBrV2.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        /*
         * ẨN THANH CUỘN TRANG — giống landing page (landing-page.css) và trang
         * tổng hợp tin tức (tong-hop-tin-tuc.css), hai chỗ đó đều đã có đúng
         * luật này. Trang vẫn cuộn được bằng lăn chuột / phím / vuốt, chỉ là
         * không vẽ thanh ra mép phải nữa.
         *
         * Bộ chọn để TRỐNG (universal, độ ưu tiên 0) nên hai thanh cuộn nội bộ
         * của trang này KHÔNG bị ảnh hưởng — cả hai đều khai bằng bộ chọn có
         * class nên thắng luật này bất kể thứ tự file:
         *   .article-body::-webkit-scrollbar        (ngay dưới, 8px)
         *   .r-posts > .posts::-webkit-scrollbar    (site-master.css, 8px)
         *
         * Chỉ ăn trên nhân WebKit/Blink (Chrome, Edge, Safari, Cốc Cốc) — y
         * như landing page. Firefox phải dùng scrollbar-width: none, cả ba
         * trang đều chưa có nên tạm thời Firefox vẫn thấy thanh cuộn.
         */
        ::-webkit-scrollbar {
            width: 0;
        }

        /*
         * BỀ RỘNG KHUNG BÀI VIẾT đã chuyển sang site-master.css (khối
         * "BỀ RỘNG KHUNG BÀI VIẾT", ngay trên .r-posts). Để ở đây thì chỉ mình
         * trang chi tiết tin được nới, các trang khác của layouts.site vẫn kẹt
         * ở .container 1140px nên khung giấy nhỏ hơn hẳn. Muốn chỉnh bề rộng
         * khung thì sửa bên đó, một chỗ cho mọi trang.
         */

        /*
         * CUỘN RIÊNG NỘI DUNG BÀI VIẾT khi dài hơn khung giấy — xem trần
         * max-height ở .r-posts / .posts trong site-master.css. .articles là
         * box thật đầu tiên nhận lại chiều cao giới hạn đó (mọi div bọc giữa
         * .posts và .articles đều display:contents), nên vừa phải TỰ co
         * (flex:1 1 auto; min-height:0) vừa phải LÀM flex container cho ba
         * khối con của chính nó — .chi-tiet-header và .news-detail-others giữ
         * nguyên cỡ tự nhiên (flex: 0 0 auto), chỉ .article-body giãn ra hết
         * khoảng còn lại rồi cuộn (flex: 1 1 auto; overflow-y: auto).
         */
        .articles {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
        }

        .chi-tiet-header {
            flex: 0 0 auto;
            background: #f8f4f0;
            border-radius: 8px;
            padding: 12px 16px;
            margin-bottom: 16px;
        }

        /*
         * min-height CHỈ để .article-body không co dẹt về 0 trong trường hợp
         * ngân sách còn lại eo hẹp (màn hẹp, tiêu đề dài, "Tin khác" nhiều
         * mục). Cố tình để số NHỎ (không phải kiểu 40vh) — tiêu đề và "Tin
         * khác" dài ngắn tuỳ bài, không có cách nào từ CSS thuần tính trước
         * chính xác phần dư ra sau hai khối đó là bao nhiêu, nên số càng lớn
         * càng dễ vượt ngân sách. Vượt thì có .r-posts overflow-y:auto (ngay
         * trên khối này, trong site-master.css) đỡ lại — nhưng khi đó tiêu đề/
         * breadcrumb cũng cuộn mất theo, không còn đứng yên như thiết kế gốc
         * nữa — nên vẫn nên giữ số nhỏ để hiếm khi phải chạm tới lưới an toàn
         * đó. Test thật ở màn 375px cho dư ngân sách ~99px sau tiêu đề + "Tin
         * khác" của MỘT bài cụ thể — 80px dưới đây còn cách biên toàn hơn.
         */
        .article-body {
            flex: 1 1 auto;
            min-height: 80px;
            overflow-y: auto;
            /* Bắt buộc ghi rõ: chỉ khai overflow-y thì CSS tự suy trục ngang
               thành auto, ảnh/bảng quá khổ trong bài sẽ đẻ ra thanh cuộn
               ngang. Trang này chỉ cuộn dọc. */
            overflow-x: hidden;
            /* Firefox: chỉ có hai thuộc tính này, không có ::-webkit-*.
               Đặt màu rãnh = transparent để 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 thân bài: bỏ rãnh trượt, chỉ chừa con lăn.
         *
         * Mặc định trình duyệt vẽ rãnh (track) màu 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. Để
         * track trong suốt thì chỉ còn con lăn nổi trên giấy.
         *
         * Bề rộng 8px vẫn bị chiếm chỗ dù rãnh đã trong suốt (thanh cuộn luôn
         * ăn một khoảng layout); chỉ là chỗ đó giờ để lộ nền giấy chứ không
         * còn vệt trắng.
         */
        .article-body::-webkit-scrollbar {
            width: 8px;
        }

        .article-body::-webkit-scrollbar-track {
            background: transparent;
        }

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

        .article-body::-webkit-scrollbar-thumb:hover {
            background: rgba(122, 26, 18, 0.8);
        }

        /*
         * MOBILE — CUỘN CẢ CỤM, KHÔNG CUỘN RIÊNG THÂN BÀI
         *
         * Khung giấy mobile chỉ cao chừng 600px, mà tiêu đề + breadcrumb +
         * "Tin khác" đã ăn gần hết; .article-body bị bóp tới tận min-height
         * 80px, đọc bài qua một khe 80px thì vô dụng (đo thật ở 375px).
         *
         * Nên ở đây bỏ cuộn riêng của .article-body: cho ba khối chảy tự nhiên
         * theo chiều cao thật, rồi để .posts (site-master.css, đã có
         * overflow-y: auto) làm MỘT vùng cuộn duy nhất cho cả cụm. Đổi lại
         * tiêu đề/breadcrumb cuộn theo chứ không đứng yên như bản PC — trên
         * màn hẹp thì đó là đánh đổi đáng, vì bản PC còn dư ~1770px cho thân
         * bài nên vẫn giữ được kiểu tiêu đề đứng yên.
         */
        @media (max-width: 1024px) {
            .articles {
                flex: 0 0 auto;
            }

            .article-body {
                flex: 0 0 auto;
                min-height: 0;
                overflow-y: visible;
            }
        }

        .chi-tiet-breadcrumb {
            margin-bottom: 10px;
        }
        .chi-tiet-breadcrumb ol {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 4px;
            overflow: hidden;
            min-width: 0;
        }
        .chi-tiet-breadcrumb li {
            font-size: 13px;
            color: #666;
            flex-shrink: 0;
            white-space: nowrap;
        }
        .chi-tiet-breadcrumb li a {
            color: #a61d24;
            text-decoration: none;
            font-weight: 500;
            white-space: nowrap;
            transition: color 0.2s;
        }
        .chi-tiet-breadcrumb li a:hover {
            color: #7b0a0a;
            text-decoration: underline;
        }
        .chi-tiet-breadcrumb li.separator {
            color: #bbb;
            font-size: 11px;
            flex-shrink: 0;
        }
        .chi-tiet-breadcrumb li.current {
            color: #888;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 1;
            min-width: 0;
        }

        .chi-tiet-title {
            font-size: 1.15rem;
            font-weight: 600;
            color: #5d2b21;
            text-align: center;
            line-height: 1.5;
            margin: 0;
            padding-top: 8px;
            border-top: 1px solid #e0d5cf;
        }

        .note-editable ol,
        .note-editable ul {
            padding-inline-start: 0 !important;
        }
        .note-editable * {
            text-align: left !important;
        }

        /* ===== NEWS DETAIL OTHERS ===== */
        .news-detail-others {
            flex: 0 0 auto;
            padding-top: 12px;
            margin-top: 12px;
        }

        .news-detail-others .others-title {
            font-size: 1.4rem;
            color: #d4152f;
            font-family: 'FzGameBrV2', sans-serif;
            filter: drop-shadow(2px 2px 4px #f0eea5);
            text-transform: capitalize;
            letter-spacing: 2px;
        }

        .news-detail-others .others-list {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 300px;
            overflow-y: auto;
            padding-right: 8px;
        }

        .news-detail-others .others-list li {
            padding: 8px 0 8px 14px;
            display: flex;
            flex-direction: column;
            gap: 3px;
            position: relative;
            background: url(/images/line-news.png) bottom no-repeat;
            background-size: 100% 1px;
        }

        .news-detail-others .others-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            top: 10px;
            font-size: 14px;
            color: #333;
        }

        .news-detail-others .others-list li a {
            font-size: 0.95rem;
            color: #333;
            font-weight: 500;
            line-height: 1.3;
        }

        .news-detail-others .others-list li span {
            font-size: 0.8rem;
            color: #777;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .chi-tiet-header {
                padding: 10px 12px;
            }
            .chi-tiet-breadcrumb li {
                font-size: 11px;
            }
            .chi-tiet-title {
                font-size: 1rem;
            }
            .news-detail-others .others-list {
                max-height: none;
                overflow-y: visible;
                padding-right: 0;
            }
        }

        /*
         * ============================================================
         *  TRÁNH HOA VĂN BỐN GÓC KHUNG GIẤY  (chỉ PC)
         * ============================================================
         *
         * Bốn góc bg-main-sub2.png có hoa văn vàng chữ 回 thò sâu vào trong
         * lòng giấy hơn hẳn đường viền thẳng ở giữa cạnh. Đo trên ảnh gốc
         * (1402x2240, thân giấy x76..1337, mặt giấy y303..2239):
         *
         *   viền thẳng giữa cạnh   : lấn vào 23px
         *   hoa văn góc TRÊN       : lấn tới 259px, hết hẳn ở 92px dưới mép trên
         *   hoa văn góc DƯỚI       : lấn tới 259px, hết hẳn ở 124px trên mép dưới
         *
         * Lề ngang của .r-posts là 2.5% ≈ 31.6px (đơn vị ảnh) nên chữ ăn vào
         * vùng hoa văn ở dải y303–395 (trên) và y2115–2239 (dưới). Đo thật ở
         * màn 1920: .chi-tiet-header lẹm 59px vào hoa văn góc trên, mép dưới
         * .news-detail-others lẹm 64px vào hoa văn góc dưới.
         *
         * Đẩy hai khối vào trong đúng chừng đó. Dùng % (ăn theo bề rộng
         * .articles) chứ không phải px, để khung to nhỏ theo màn thì lề cũng
         * co giãn theo. Lấy mức của màn 1920 (4.23% / 4.60%) làm chuẩn rồi làm
         * tròn lên — màn hẹp hơn cần ít hơn chút nên chỉ hở thêm vài px.
         *
         * Cộng thêm ~0.6% nữa làm biên an toàn: bám sát mức tối thiểu thì màn
         * 1920 chỉ hở 1px, chữ hoa văn nhích một chút là lẹm lại.
         *
         * KHÔNG sửa padding của .r-posts bên site-master.css vì mấy trang khác
         * cùng layout (đăng ký, đăng nhập, tải game, nạp coin) sẽ bị đẩy theo.
         *
         * .articles là flex container nên hai lề này KHÔNG bị collapse, và
         * .article-body (flex: 1 1 auto) tự co lại đúng bằng phần đã lấy.
         */
        @media (min-width: 1025px) {
            .chi-tiet-header {
                margin-top: 3.5%;
            }

            .news-detail-others {
                margin-bottom: 1.0%;
            }
        }