/* ============================================================================
   CDVHT — CSS riêng của màn CHI TIẾT BÀI VIẾT  (/news/{id})
   Hướng "Bento tươi sáng" (TD-2). Nạp qua @push('styles') của news.blade.php,
   nên nó vào @stack('styles') ở head.blade.php:22 — tức SAU style.css,
   widgets.css, responsive.css, tokens.css, trang-chu.css.

   LUẬT CỦA FILE NÀY (05-techlead-fe-baiviet.md T2):
     1. CẤM mã hex. Mọi màu đi qua var(--…) khai ở tokens.css.
     2. CẤM khai token mới: spacing/type/shadow/motion/--content-max đã có sẵn
        ở trang-chu.css:17-53 và được nạp cho mọi trang client.
     3. MỌI selector bắt đầu bằng class riêng của màn, tiền tố .art- .
        Không selector trần (table{}, img{}, p{}), không :root.
        Tiền tố .art- không giao một ký tự nào với vùng tên của nhánh noti.
     4. CẤM tái dùng class link cũ của trang chủ (QA run trước đo 85x26px —
        đã bị đánh đỏ ở tiêu chí 44x44).
     5. ĐÚNG 4 khai báo cờ-ưu-tiên-tuyệt-đối của CSS, tất cả dưới .art-prose.
        Danh sách + lý do
        nằm trong 06-fe-baiviet.md. Không thêm cái thứ 5.
     6. Không khai lại 4 thuộc tính của 46 dòng polish đang ở develop
        (touch-action / text-wrap / overflow-wrap / min-width cho .c-card*).

   Ba lớp bảo vệ nội dung CMS KHÔNG nằm ở đây mà ở style.css:1481,
   style.css:2262, responsive.css:14, bám vào hai class .entry-wraper và
   .entry-wraper-content. Vì vậy khối nội dung trong Blade phải GIỮ hai class đó;
   .art-prose là lớp CỘNG THÊM, không phải lớp thay thế.
   ========================================================================== */

/* ===========================================================================
   1. KHUNG TRANG
   =========================================================================== */
.art-wrap {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-6) var(--sp-4) var(--sp-8);
}

.art-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    /* min-width:0 trên con của grid: chặn phần tử rộng cố định đẩy cả cột */
    align-items: start;
}

.art-layout > * {
    min-width: 0;
}

@media (min-width: 992px) {
    .art-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: var(--sp-7);
    }
}

.art-main {
    min-width: 0;
}

/* ===========================================================================
   2. ĐẦU BÀI — chip · h1 · meta · chia sẻ
   =========================================================================== */
.art-head {
    margin: 0 0 var(--sp-5);
}

.art-title {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-31);
    line-height: 1.25;
    font-weight: 700;
    color: var(--ink);
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .art-title {
        font-size: var(--fs-39);
    }
}

.art-lead {
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-16);
    line-height: 1.6;
    color: var(--ink-2);
}

.art-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-13);
    color: var(--ink-2);
}

.art-meta__sep {
    margin: 0 var(--sp-2);
    color: var(--border);
}

/* Link cộng đoàn trong meta: vẫn phải chạm được bằng ngón tay (>= 44x44). */
.art-meta__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-2);
    font-weight: 600;
    color: var(--primary-ink);
}

.art-meta__link:hover,
.art-meta__link:focus {
    color: var(--primary-700);
    text-decoration: underline;
}

.art-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin: var(--sp-5) 0 0;
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.art-share__label {
    margin: 0;
    font-size: var(--fs-13);
    color: var(--ink-2);
}

/* Modifier nút chia sẻ: .c-btn đã có min-height 44px, đây chỉ là cỡ chữ. */
.art-share__btn {
    font-size: var(--fs-15);
}

/* ===========================================================================
   3. ẢNH ĐẠI DIỆN
   =========================================================================== */
.art-hero {
    margin: 0 0 var(--sp-6);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
}

.art-hero__img {
    display: block;
    width: 100%;
    height: auto;
}

.art-hero__caption {
    margin: var(--sp-2) 0 0;
    padding: 0 var(--sp-3) var(--sp-3);
    font-size: var(--fs-13);
    color: var(--ink-2);
}

/* ===========================================================================
   4. THÂN BÀI — .art-prose, lớp CỘNG THÊM vào .entry-wraper-content
   ---------------------------------------------------------------------------
   Nội dung đến từ CMS: 1.248/1.256 bản ghi có style= nội tuyến. Bốn khai báo
   cờ-ưu-tiên dưới đây là toàn bộ hạn mức của run này (03-chot.md #4).
   =========================================================================== */
.art-body {
    margin: 0;
}

.art-prose {
    font-size: var(--fs-16);
    line-height: 1.70;
    color: var(--ink);
    /* Chữa cái TRÀN NGANG 517px/375 của /news/1256: nguồn tràn là một <a>/<span>
       chứa URL dài 502px. Thuộc tính này THỪA HƯỞNG xuống mọi con, và 44 bản ghi
       có overflow-wrap nội tuyến đều đã là break-word ⇒ KHÔNG cần cờ ưu tiên. */
    overflow-wrap: anywhere;
    word-break: normal;
}

.art-prose > :first-child {
    margin-top: 0;
}

/* Chặn mọi khối con tự đẩy rộng hơn cột chứa nó. */
.art-prose * {
    max-width: 100%;
}

/* [1/4] 971 bản ghi có style="width: NNNpx" (>=100px) trên div/img/table.
   Thuộc tính nội tuyến thắng mọi selector thường ⇒ buộc phải dùng cờ ưu tiên. */
.art-prose [style*="width"] {
    max-width: 100% !important;
}

/* [2/4] 87 bản ghi có <table>. style.css:2109 đã khai table{width:100%} nhưng
   KHÔNG có cờ ưu tiên, nên style="width:600px" nội tuyến vẫn thắng nó. */
.art-prose table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
}

.art-prose table th,
.art-prose table td {
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    word-break: normal;
}

/* [3/4] 1.012 bản ghi có text-align: justify nội tuyến ⇒ "sông trắng" ở 375.
   An toàn: đo được 0 chuỗi justify-content trong content, và khai báo này
   KHÔNG đụng 868 chỗ text-align: center (phải giữ). */
.art-prose [style*="justify"] {
    text-align: left !important;
}

/* [4/4] 40 bản ghi đặt cỡ chữ <= 12px, dưới sàn DESIGN_SYSTEM 2.2.
   Chỉ bắt đúng 5 cỡ dưới sàn, không đụng 1.108 bản ghi còn lại. */
.art-prose [style*="font-size: 8px"],
.art-prose [style*="font-size:8px"],
.art-prose [style*="font-size: 9px"],
.art-prose [style*="font-size:9px"],
.art-prose [style*="font-size: 10px"],
.art-prose [style*="font-size:10px"],
.art-prose [style*="font-size: 11px"],
.art-prose [style*="font-size:11px"],
.art-prose [style*="font-size: 12px"],
.art-prose [style*="font-size:12px"] {
    font-size: var(--fs-16) !important;
}

/* Ảnh thân bài: .entry-wraper img ở style.css:2262 đã lo max-width/height.
   Ở đây chỉ bỏ khoảng trắng dưới ảnh và bo góc nhẹ — KHÔNG dùng cờ ưu tiên. */
.art-prose img {
    display: block;
    height: auto;
    margin: var(--sp-4) auto;
    border-radius: var(--radius-sm);
}

.art-prose iframe,
.art-prose video {
    max-width: 100%;
}

/* ===========================================================================
   5. CỘT PHỤ — "Cùng cộng đoàn"
   =========================================================================== */
.art-aside {
    min-width: 0;
}

.art-related {
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

.art-related__title {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--ink);
}

.art-related__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.art-related__item + .art-related__item {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
}

/* Vùng bấm của mỗi mục: KHÔNG dùng class link cũ của trang chủ (85x26px).
   Khối này cao >= 44px kể cả khi tiêu đề chỉ một dòng. */
.art-related__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    transition: background-color var(--dur) var(--ease);
}

.art-related__link:hover,
.art-related__link:focus {
    background: var(--surface-2);
    color: var(--primary-ink);
}

.art-related__text {
    min-width: 0;
}

.art-related__name {
    margin: 0;
    font-size: var(--fs-15);
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.art-related__meta {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--fs-12);
    color: var(--ink-2);
}

/* ===========================================================================
   6. BÌNH LUẬN — chỉ là khung bọc, KHÔNG dựng lại khối bên trong
   =========================================================================== */
.art-comments {
    margin: var(--sp-7) 0 0;
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.art-comments__title {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--ink);
}

/* Khối <pre> của bình luận cũ xuống dòng được, khỏi đẩy tràn ngang. */
.art-comments pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ===========================================================================
   7. Tôn trọng prefers-reduced-motion
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .art-related__link {
        transition: none;
    }
}