/* ============================================================================
   CDVHT — CSS component của MÀN THÔNG BÁO
   Dùng cho: /notify (clients/notify/index.blade.php)
             /notify/{id} (clients/notify/detail.blade.php)

   LUẬT CỦA FILE NÀY (05-techlead-fe-noti.md T2):
   · CẤM mã hex. Mọi màu đi qua var(--…) khai ở tokens.css; token không-màu
     (--sp-*, --fs-*, --radius-sm, --shadow-1, --dur, --ease) khai ở trang-chu.css.
     KHÔNG thêm token mới.
   · Nạp SAU style.css · widgets.css · responsive.css · tokens.css · trang-chu.css
     qua @stack('styles') ở clients/layouts/head.blade.php dòng 22
     ⇒ thắng cascade mà KHÔNG cần cờ ưu tiên cứng cho layout của màn.
   · MỌI selector đều có phạm vi riêng của màn: tiền tố .tb-… hoặc nằm dưới
     [data-section^="thong-bao"]. Không một selector trần nào (a, p, table, img…)
     ⇒ file này không thể rò ra 33 view client khác.
   · NGÂN SÁCH cờ ưu tiên cứng = ĐÚNG 4, tất cả nằm dưới .tb-prose, chỉ để thắng
     style= nội tuyến của CMS (xem khối 5). Khai thứ 5 là đổi phương án C1
     ⇒ phải xin session chính, không tự thêm.
   · KHÔNG khai lại 4 thuộc tính polish của develop trên nhóm .c-card* của
     trang chủ
     (touch-action, text-wrap, overflow-wrap, min-width:0) — tránh conflict merge.
   · KHÔNG khai lại 3 thứ style.css đã đè sẵn bằng cờ ưu tiên cứng từ trước run này:
     .entry-wraper-content * {font-family; background-color: unset} (dòng 1481)
     và .entry-wraper img {max-width; height} (dòng 2262). Vì vậy view chi tiết
     PHẢI giữ 2 class entry-wraper + entry-wraper-content.
   ========================================================================== */

/* ===========================================================================
   1. LƯỚI DANH SÁCH — cùng nhịp với .nt-grid của trang chủ: 1 → 2 → 3 cột
   =========================================================================== */
.tb-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

@media (min-width: 576px) { .tb-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .tb-grid { grid-template-columns: repeat(3, 1fr); } }

/* Trạng thái rỗng nằm TRONG lưới (vì view dùng @forelse/@empty) nên phải trải
   hết số cột, không được co thành 1/3 chiều ngang ở màn rộng. */
.tb-grid > .c-empty {
    grid-column: 1 / -1;
}

/* Thẻ CHỮ, không ảnh (383/388 thông báo dùng cùng một ảnh mặc định).
   Dáng thẻ do .c-card/.c-card__body/.c-card__title/.c-card__excerpt/.c-card__meta
   của trang-chu.css lo; ở đây chỉ thêm phần riêng của màn. */
.tb-card {
    display: flex;
    flex-direction: column;
}

/* Thân thẻ chiếm hết chiều cao còn lại để meta (ngày) luôn tụt xuống đáy thẻ
   -> các thẻ cùng hàng có đường ngày thẳng nhau. */
.tb-card > .c-card__body {
    flex: 1 1 auto;
}

/* ===========================================================================
   2. VÙNG CHẠM >= 44x44 VÀ CÁCH NHAU >= 8px (DESIGN_SYSTEM.md 11.4 mục 3)
   =========================================================================== */

/* Liên kết tiêu đề thẻ: cả khối chữ là vùng bấm, cao tối thiểu 44px. */
.tb-card__link {
    /* -webkit-box VẪN là display mức khối (min-height có hiệu lực) và là cách duy
       nhất cắt tiêu đề ở dòng thứ 3. Tiêu đề thật dài tới 158 ký tự (đo trên 388
       bản ghi, trung bình 68) nên không cắt là thẻ cao gấp ba thẻ bên cạnh.
       Cắt NGAY TRÊN thẻ <a> chứ không trên <h3>: lớp .clamp-3 của trang chủ đặt
       trên <h3> sẽ hết tác dụng khi con trực tiếp của nó là một khối. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: 44px;
    padding: var(--sp-2) 0;
    color: inherit;
    overflow-wrap: break-word;
}

.tb-card__link:hover,
.tb-card__link:focus {
    color: var(--primary-ink);
}

/* Phân trang: style.css dòng 1242 đặt .pagination-area .page-link = 40x40.
   min-width/min-height thắng width/height nên 40 -> 44 mà không cần cờ ưu tiên.
   Phải nằm trong khối data-section="thong-bao-danh-sach" của view. */
[data-section="thong-bao-danh-sach"] .pagination {
    gap: var(--sp-2);
    /* 388 thông báo / 20 = 20 trang. .pagination của Bootstrap là flex KHÔNG wrap
       ⇒ ở 375px dãy 20 nút đẩy scrollWidth lên 642 (đo được bằng CDP). Đây chính
       là nguồn tràn ngang của /notify, không phải nội dung CMS. */
    flex-wrap: wrap;
}

[data-section="thong-bao-danh-sach"] .page-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

/* .c-btn của trang-chu.css dòng 348 đã có min-height:44px; bổ sung chiều ngang
   để nút chỉ chứa icon/chữ ngắn (chia sẻ, về danh sách) cũng đạt sàn. */
[data-section^="thong-bao"] .c-btn {
    min-width: 44px;
}

/* Modifier liên kết riêng của màn. CẤM tái dùng class liên kết-section của
   trang chủ (đo được 85x26 ở run trước, dưới sàn 44x44):
   QA run trước đã đánh đỏ (03-chot.md #7). */
.tb-link {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--sp-2) 0;
    font-size: var(--fs-15);
    font-weight: 600;
    color: var(--primary-ink);
    transition: color var(--dur) var(--ease);
}

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

/* ===========================================================================
   3. BỐ CỤC TRANG CHI TIẾT — tự dựng bằng CSS Grid, KHÔNG dùng .row/.col của
   Bootstrap 4: .row có lề âm -15px nên ở 375px nó làm scrollWidth > clientWidth
   (đúng kiểu tràn ngang mà tiêu chí C1 cấm).
   =========================================================================== */
.tb-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
}

@media (min-width: 992px) {
    .tb-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

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

/* ===========================================================================
   4. ĐẦU TRANG / ĐẦU BÀI
   =========================================================================== */
.tb-title {
    margin: 0;
    font-size: var(--fs-31);
    line-height: 1.25;
    font-weight: 700;
    color: var(--ink);
    overflow-wrap: break-word;
}

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

/* Tiêu đề khối cấp 2 — nhỏ hơn H1 một bậc để thứ bậc đọc được bằng mắt. */
.tb-subtitle {
    margin: 0;
    font-size: var(--fs-25);
    line-height: 1.3;
    font-weight: 700;
    color: var(--ink);
}

.tb-lead {
    margin: var(--sp-3) 0 0;
    max-width: 72ch;
    font-size: var(--fs-16);
    line-height: 1.6;
    color: var(--ink-2);
}

.tb-count {
    margin: var(--sp-2) 0 var(--sp-4);
    font-size: var(--fs-13);
    color: var(--ink-2);
}

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

.tb-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 0;
}

/* Khối phân trang — giữ class .pagination-area của theme để không mất nhánh
   :focus-visible mà trang-chu.css đã trả lại riêng cho .page-link. */
.tb-pagination {
    margin: var(--sp-6) 0 0;
}

/* ===========================================================================
   5. ẢNH LỚN ĐẦU BÀI — chỉ hiện khi thông báo có ảnh riêng thật
   (width/height in thẳng trên thẻ img để chống layout shift)
   =========================================================================== */
.tb-hero {
    margin: var(--sp-5) 0 0;
}

.tb-hero__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    background: var(--surface-2);
}

/* ===========================================================================
   6. KHỐI NỘI DUNG CMS (.tb-prose) — bề rộng dòng đọc được + 4 cờ ưu tiên cứng
   ---------------------------------------------------------------------------
   Bốn khai báo mang cờ ưu tiên cứng dưới đây là TOÀN BỘ ngân sách của C1.
   Lý do mỗi khai báo, kèm số đo trên chính bảng `notify` (388 bản ghi):
     1. [style*="width"]       -> 334/388 bản ghi có `width: <số>` nội tuyến;
                                  style= nội tuyến thắng mọi selector.
     2. table                  -> 235/388 bản ghi có <table>; style.css dòng 2109
                                  chỉ có `table {width:100%}` nên inline width:600px
                                  thắng nó.
     3. [style*="justify"]     -> 284/388 bản ghi dàn đều; đo được 0 chuỗi
                                  `justify-content` nên selector này không bắt oan,
                                  và KHÔNG đụng 344 chỗ `text-align: center`.
     4. [style*="line-height"] -> 79/388 bản ghi đặt line-height nội tuyến (13 bản
                                  dưới 1,5). Chọn [style*="line-height"] chứ KHÔNG
                                  [style*="height"] để không bắt oan height: của ảnh.
   KHÔNG cấp cờ ưu tiên cho font-size và color: 02-ba.md 4.1 + 03-chot.md đã nhận
   trước cái giá "cỡ chữ và màu chữ thân bài vẫn do CMS quyết".
   =========================================================================== */
.tb-prose {
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
    font-size: var(--fs-16);
    line-height: 1.7;
    color: var(--ink);
    /* Con chữ dài không có khoảng trắng (URL dán từ Word) không được phá khung.
       Không cần cờ ưu tiên: nội dung CMS không khai overflow-wrap nào để tranh. */
    overflow-wrap: break-word;
}

.tb-prose [style*="width"] {
    max-width: 100% !important;
}

.tb-prose table {
    display: block;
    overflow-x: auto;
    width: 100% !important;
}

.tb-prose [style*="justify"] {
    text-align: left !important;
}

.tb-prose [style*="line-height"] {
    line-height: 1.7 !important;
}

/* Hai thứ KHÔNG cần cờ ưu tiên vì nội dung CMS không khai chúng:
   iframe/embed (đo được 0 bản ghi) để sẵn cho tương lai, và pre/code dán từ web. */
.tb-prose iframe,
.tb-prose video,
.tb-prose embed,
.tb-prose object {
    max-width: 100%;
}

.tb-prose pre {
    max-width: 100%;
    overflow-x: auto;
}

/* ===========================================================================
   7. SIDEBAR "THÔNG BÁO MỚI NHẤT" — danh sách CHỮ, không ảnh
   =========================================================================== */
.tb-side {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    padding: var(--sp-4);
}

.tb-side__title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-20);
    line-height: 1.3;
    font-weight: 700;
    color: var(--ink);
}

.tb-side__list {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tb-side__item + .tb-side__item {
    border-top: 1px solid var(--border);
}

.tb-side__link {
    display: block;
    min-height: 44px;
    padding: var(--sp-2) 0;
    font-size: var(--fs-15);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    transition: color var(--dur) var(--ease);
}

.tb-side__link:hover,
.tb-side__link:focus {
    color: var(--primary-ink);
}

.tb-side__date {
    display: block;
    margin: 0;
    font-size: var(--fs-13);
    font-weight: 400;
    color: var(--ink-2);
}

/* ===========================================================================
   8. Tôn trọng prefers-reduced-motion (DESIGN_SYSTEM.md 11.3 — bắt buộc)
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .tb-link,
    .tb-side__link {
        transition: none;
    }
}