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

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