/*
 * CSS riêng của hệ thống, đặt sau Tabler.
 * Ưu tiên màn Full HD (1920×1080); màn nhỏ hơn chỉ cần không vỡ.
 * Không viết cứng px cho chiều rộng nội dung: dùng %, clamp(), min/max-width.
 */

/* Chữ: Roboto (như NBT), đặt trên máy chủ mình ở assets/vendor/roboto — không gọi Google Fonts. */
:root {
    --tblr-font-sans-serif: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --xntv-khung-toi-da: 1720px;
}

body {
    font-feature-settings: normal;
    margin: 0 !important;
}

/* Thanh cuộn dọc LUÔN hiện để bề rộng trang cố định: trang ngắn / dài, mở modal đều không làm bố cục nhảy ngang
   (bài học layout NBT). */
html {
    overflow-y: scroll;
    margin: 0 !important;
}

body.modal-open {
    padding-right: 0 !important;
}

/* Thanh trên: nền trắng, kẻ dưới — tách rõ với nền xám của nội dung. */
.page > header.navbar {
    background: #fff;
    border-bottom: 1px solid var(--tblr-border-color);
}

/* Khung nội dung: Full HD dùng hết chiều ngang còn lại sau menu; màn 2K trở lên thì canh giữa, không kéo dãn quá. */
.khung-trang {
    max-width: var(--xntv-khung-toi-da);
}

/* ── Thương hiệu ở đầu menu ─────────────────────────────────────────────── */
.thuong-hieu {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: inherit;
    line-height: 1.15;
}

.thuong-hieu-dau {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .5rem;
    border-radius: 6px;
    background: var(--tblr-primary);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .04em;
}

.thuong-hieu-chu {
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
}

/* Tên nhóm trong menu trái */
.nhom-menu {
    padding: 1rem 1rem .35rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

/* Số việc trên menu: nằm trong dòng, sát mép phải (Tabler mặc định treo nó lên góc, bị tràn ra ngoài menu). */
.navbar-vertical .navbar-nav .nav-link .badge {
    position: static;
    transform: none;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: .25rem;
}

/* Số trên chuông ở thanh trên. */
.nav-link .badge-notification {
    position: absolute;
    top: .15rem;
    right: -.15rem;
    transform: none;
}

/* Menu trái chỉ hiện thanh cuộn khi thật sự dài hơn màn hình. */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg {
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* Icon trong hộp thông điệp: dùng icon font nên tự đặt cỡ và khoảng cách. */
.alert .alert-icon {
    font-size: 1.35rem;
    line-height: 1;
    margin-right: .6rem;
}

/* ── Chuông ─────────────────────────────────────────────────────────────── */
.khung-chuong {
    width: min(26rem, 92vw);
}

.khung-chuong .list-group {
    max-height: min(60vh, 32rem);
    overflow-y: auto;
}

.list-group-item.chua-doc {
    background: var(--tblr-primary-lt);
}

/* ── Bảng danh sách ─────────────────────────────────────────────────────── */
/* Cột chính (tên, tiêu đề) luôn đủ rộng để đọc; các cột khác co theo nội dung. */
.table .cot-chinh {
    min-width: 16rem;
    width: 34%;
}

.table .cot-hep {
    width: 1%;
    white-space: nowrap;
}

.table td .hang-phu {
    color: var(--tblr-secondary);
    font-size: .8125rem;
}

/* Dòng không còn dùng / đã xong: nhạt hơn dòng đang cần xử lý. */
.table tr.dong-nhat > td {
    opacity: .6;
}

/* Thụt lề theo cấp trong cây đơn vị */
.thut-cap-1 { padding-left: 1.75rem !important; }
.thut-cap-2 { padding-left: 3.5rem !important; }
.thut-cap-3 { padding-left: 5.25rem !important; }

/* ── Dải thống kê trên danh sách ────────────────────────────────────────── */
.dai-thong-ke {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    align-items: baseline;
    color: var(--tblr-secondary);
}

.dai-thong-ke strong {
    color: var(--tblr-body-color);
    font-size: 1.05rem;
}

/* ── Trang chi tiết: lưới nhãn – giá trị ────────────────────────────────── */
.luoi-thong-tin {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: .6rem 1rem;
    margin: 0;
}

.luoi-thong-tin dt {
    color: var(--tblr-secondary);
    font-weight: 400;
}

.luoi-thong-tin dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ── Lịch sử thay đổi ───────────────────────────────────────────────────── */
.lich-su-danh-sach {
    max-height: 40rem;
    overflow-y: auto;
}

.bang-thay-doi td {
    padding: .15rem .5rem .15rem 0;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.bang-thay-doi .cot-nhan {
    width: 12rem;
    white-space: nowrap;
}

.gia-tri-cu {
    color: var(--tblr-secondary);
    text-decoration: line-through;
    text-decoration-color: rgba(214, 57, 57, .5);
}

.gia-tri-moi {
    font-weight: 500;
}

/* ── Mật khẩu tạm ───────────────────────────────────────────────────────── */
.mat-khau-tam {
    font-size: 1.15rem;
    letter-spacing: .08em;
    padding: .25rem .6rem;
    user-select: all;
}

/* ── Sơ đồ phòng ────────────────────────────────────────────────────────── */
.the-nguoi {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
}

.the-nguoi + .the-nguoi {
    border-top: 1px solid var(--tblr-border-color);
}

/* ── Màn nhỏ (làm sau; ở đây chỉ giữ cho không vỡ) ──────────────────────── */
@media (max-width: 991.98px) {
    .luoi-thong-tin {
        grid-template-columns: 1fr;
        gap: .1rem;
    }

    .luoi-thong-tin dd {
        margin-bottom: .6rem;
    }

    .bang-thay-doi .cot-nhan {
        width: auto;
        white-space: normal;
    }
}

/* ══ Kiểu thẻ và bảng theo NBT (Linh 11/11/2026: "gần như copy layout từ nbt sang") ═══════════════
   Đầu thẻ thấp, nền xanh xám nhạt; đầu bảng cùng tông. Thẻ có tab giữ khoảng đệm gốc. */
@media screen {
    .page-body .card-header {
        --tblr-card-cap-padding-y: .25rem;
        --tblr-card-cap-padding-x: .8rem;
        min-height: 38px;
        background-color: #dae4ef;
        border-bottom-color: #bfccdb;
    }

    .page-body .card-header .card-title {
        color: #1e293b;
    }

    .page-body .card-header :is(.text-secondary, .text-muted) {
        color: #475569 !important;
    }

    .page-body .card-header:has(.card-header-tabs, .card-header-pills) {
        --tblr-card-cap-padding-y: 1rem;
        --tblr-card-cap-padding-x: 1.25rem;
        min-height: 0;
        background-color: transparent;
    }

    .page-body .card-header:not(:has(.card-header-tabs, .card-header-pills)) .card-actions {
        margin-top: 0;
        margin-bottom: 0;
    }

    .page-body .table thead th {
        background-color: #d9e2ec;
        color: #334155;
    }
}

/* Dòng mời tạo ticket trên thanh trên (như NBT). */
.moi-tao-ticket {
    font-size: .8rem;
    white-space: nowrap;
}

.moi-tao-ticket a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ══ Module Ticket (bố cục theo NBT) ═══════════════════════════════════════════════════════════ */

/* Dải đếm theo trạng thái ở đầu danh sách: mỗi thẻ là một nút lọc. */
.ticket-dem {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.ticket-dem-the {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .8rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 6px;
    background: #fff;
    color: var(--tblr-secondary);
    font-size: .8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
}

.ticket-dem-the strong {
    color: var(--tblr-body-color);
}

.ticket-dem-the:hover {
    text-decoration: none;
    border-color: var(--tblr-primary);
}

.ticket-dem-the.dang-chon {
    border-color: var(--tblr-primary);
    box-shadow: inset 0 0 0 1px var(--tblr-primary);
    color: var(--tblr-primary);
}

.ticket-dem-the.can-lam {
    background: var(--tblr-red-lt);
    color: var(--tblr-red);
}

.ticket-dem-the.can-lam strong {
    color: var(--tblr-red);
}

.ticket-dem-cach {
    flex: 1 1 1rem;
}

/* Mã ticket: nhãn viền, chữ đều nét. */
.ticket-ma {
    display: inline-block;
    padding: .1rem .5rem;
    border: 1px solid #c5cdd8;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--tblr-body-color);
    white-space: nowrap;
    text-decoration: none;
    background: #fff;
}

/* Bảng danh sách: cột tiêu đề phải rộng; nhãn "Đang chờ" được xuống dòng. */
.ticket-bang .ticket-cot-tieu-de {
    min-width: 280px;
    width: 40%;
}

.ticket-bang .ticket-cot-cho {
    min-width: 12rem;
    max-width: 20rem;
}

.ticket-bang .ticket-nhan-cho {
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}

.ticket-trich {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Nội dung do người dùng soạn (mô tả, bình luận): một bộ CSS dùng chung ── */
.noi-dung-soan {
    font-size: .9375rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.noi-dung-soan > :last-child {
    margin-bottom: 0;
}

.noi-dung-soan p {
    margin: 0 0 .6em;
}

.noi-dung-soan ul,
.noi-dung-soan ol {
    margin: 0 0 .6em;
    padding-left: 1.6em;
}

.noi-dung-soan img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--tblr-border-color);
}

.noi-dung-soan blockquote {
    margin: 0 0 .6em;
    padding: .25rem .9rem;
    border-left: 3px solid var(--tblr-border-color);
    color: var(--tblr-secondary);
}

.noi-dung-soan pre {
    padding: .6rem .8rem;
    border-radius: 6px;
    white-space: pre-wrap;
}

/* Bảng trong nội dung: vừa khít nội dung, cuộn ngang trong khung chứ không đẩy vỡ trang. */
.noi-dung-soan table {
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 .6em;
}

.noi-dung-soan th,
.noi-dung-soan td {
    border: 1px solid var(--tblr-border-color);
    padding: .3rem .6rem;
    vertical-align: top;
}

.noi-dung-soan th {
    background: #eef2f7;
}

/* ── Bình luận ── */
.binh-luan {
    display: flex;
    gap: .9rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tblr-border-color);
    scroll-margin-top: 4.5rem;
}

.binh-luan:target {
    background: #fff8e1;
}

.binh-luan-than {
    flex: 1 1 auto;
    min-width: 0;
}

.binh-luan-dau {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.binh-luan-so {
    font-weight: 600;
    color: var(--tblr-secondary);
}

.binh-luan-trich {
    display: block;
    margin-bottom: .5rem;
    padding: .3rem .7rem;
    border-left: 3px solid var(--tblr-primary);
    background: var(--tblr-primary-lt);
    border-radius: 0 4px 4px 0;
    color: var(--tblr-secondary);
    font-size: .8125rem;
    text-decoration: none;
}

.binh-luan-tag {
    margin-top: .5rem;
    font-size: .8125rem;
}

.binh-luan-nut {
    margin-top: .35rem;
}

.ticket-khoi-dong {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.25rem;
    background: var(--tblr-green-lt);
    color: #1f6f43;
    border-bottom: 1px solid var(--tblr-border-color);
}

/* ── Tệp đính kèm ── */
.tep-danh-sach {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tep-anh img {
    display: block;
    height: 6rem;
    width: auto;
    max-width: 14rem;
    object-fit: cover;
    border: 1px solid var(--tblr-border-color);
    border-radius: 6px;
}

.tep-the {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: .3rem .65rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 6px;
    background: #fff;
    color: var(--tblr-body-color);
    font-size: .8125rem;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.o-tep-vung {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1.5rem 1rem;
    border: 1px dashed #c5cdd8;
    border-radius: 6px;
    background: #fbfcfd;
    text-align: center;
    cursor: pointer;
}

.o-tep-vung > i {
    font-size: 1.5rem;
    color: var(--tblr-secondary);
}

.o-tep-gon .o-tep-vung {
    padding: .6rem .75rem;
    justify-content: flex-start;
    text-align: left;
    font-size: .8125rem;
}

.o-tep.dang-keo .o-tep-vung {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary-lt);
}

.o-tep-danh-sach {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

.o-tep-danh-sach:empty {
    display: none;
}

.o-tep-muc {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    padding: .25rem 1.7rem .25rem .4rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 6px;
    background: #fff;
    font-size: .8125rem;
}

.o-tep-muc img {
    height: 2.5rem;
    width: 2.5rem;
    object-fit: cover;
    border-radius: 4px;
}

.o-tep-muc .o-tep-ten {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
}

.o-tep-muc .o-tep-go {
    position: absolute;
    top: 50%;
    right: .3rem;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: var(--tblr-secondary);
    cursor: pointer;
    line-height: 1;
}

/* ── Ô chọn người (tag, hỏi ai, chờ ai) ── */
.chon-nguoi {
    position: relative;
}

.chon-nguoi-da-chon {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-bottom: .35rem;
}

.chon-nguoi-da-chon:empty {
    display: none;
}

.chon-nguoi-the {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .25rem .15rem .55rem;
    border-radius: 4px;
    background: var(--tblr-primary-lt);
    color: var(--tblr-primary);
    font-size: .8125rem;
    font-weight: 500;
}

.chon-nguoi-the button {
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    padding: 0 .15rem;
}

.chon-nguoi-danh-sach {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 16rem;
    overflow-y: auto;
    margin-top: .2rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.chon-nguoi-muc {
    display: block;
    width: 100%;
    padding: .4rem .75rem;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.chon-nguoi-muc:hover,
.chon-nguoi-muc.dang-tro {
    background: var(--tblr-primary-lt);
}

.chon-nguoi-muc small {
    display: block;
    color: var(--tblr-secondary);
}

/* ── Trang chi tiết ── */
.luoi-thong-tin.luoi-hep {
    grid-template-columns: minmax(7rem, 9.5rem) 1fr;
}

.ticket-lich-su {
    max-height: 18rem;
    overflow-y: auto;
    font-size: .8125rem;
}

.ticket-lich-su-dong {
    padding: .3rem 0;
}

.ticket-lich-su-dong + .ticket-lich-su-dong {
    border-top: 1px solid var(--tblr-border-color);
}

.ticket-cho-ai {
    margin: .25rem 0 .6rem 1.75rem;
}

/* Ô viết bình luận đi theo khi cuộn (màn rộng). */
@media (min-width: 1200px) {
    .ticket-o-viet {
        position: sticky;
        top: 1rem;
        z-index: 2;
        border-color: var(--tblr-primary);
    }
}

/* Trình soạn thảo: bo góc cho khớp ô nhập của Tabler. */
.tox.tox-hugerte {
    border-radius: 6px;
    border-color: var(--tblr-border-color);
}

/* ══ Bảng tin (bố cục theo NBT) ═══════════════════════════════════════════════════════════════ */

/* Dòng mời soạn bài: trông như một ô nhập, bấm vào thì ô soạn mở ra. */
.bang-tin-moi-soan {
    flex: 1 1 auto;
    padding: .55rem 1rem;
    border: 1px solid var(--tblr-border-color);
    border-radius: 999px;
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-secondary);
    text-align: left;
    cursor: text;
}

.bang-tin-moi-soan:hover {
    background: var(--tblr-bg-surface-tertiary);
}

.bang-tin-ghim .card-header {
    background: var(--tblr-orange-lt);
}

/* Cột phải đi theo khi cuộn (màn rộng). */
@media (min-width: 992px) {
    .bang-tin-loai {
        position: sticky;
        top: 1rem;
    }
}

.bai-tin.bai-quan-trong {
    border-left: 3px solid var(--tblr-orange);
}

.bai-tin.bai-bi-an > .card-body > :not(.alert):not(:first-child) {
    opacity: .55;
}

.bai-tieu-de {
    margin: 0 0 .5rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
}

.bai-tieu-de a:hover {
    color: var(--tblr-primary) !important;
    text-decoration: none;
}

/* Dòng bài: bài dài chỉ hiện phần đầu; bang-tin.js thêm .bi-cat khi nội dung thật sự bị cắt. */
.bai-noi-dung-gon {
    position: relative;
    max-height: 21rem;
    overflow: hidden;
}

.bai-noi-dung-gon.bi-cat::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.5rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

.bai-chan {
    background: #fff;
    padding-top: .5rem;
    padding-bottom: .75rem;
}

.bai-chan .btn.dang-chon {
    background: var(--tblr-primary-lt);
    color: var(--tblr-primary);
    font-weight: 500;
}

.bai-binh-luan {
    margin-top: .6rem;
    padding-top: .75rem;
    border-top: 1px solid var(--tblr-border-color);
}

.bl-tin {
    display: flex;
    gap: .5rem;
    margin-bottom: .6rem;
    scroll-margin-top: 5rem;
}

.bl-tin-than {
    min-width: 0;
}

.bl-tin-hop {
    display: inline-block;
    max-width: 100%;
    padding: .4rem .75rem;
    border-radius: 12px;
    background: var(--tblr-bg-surface-secondary);
}

.bl-tin:target .bl-tin-hop {
    background: var(--tblr-yellow-lt);
}

.bl-tin-chu {
    overflow-wrap: anywhere;
    line-height: 1.55;
}

.bl-tin-tag {
    color: var(--tblr-primary);
    font-weight: 500;
}

.bl-tin-form {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    margin: 0;
}

.bl-tin-o {
    position: relative;
    flex: 1 1 auto;
}

.bl-tin-o textarea {
    resize: none;
    overflow-y: auto;
    border-radius: 12px;
}

/* Phần chỉ người quản lý Bảng tin thấy trong ô soạn. */
.bai-o-quan-ly {
    padding: .75rem 1rem;
    border: 1px dashed var(--tblr-border-color);
    border-radius: 6px;
    background: var(--tblr-bg-surface-secondary);
}

.hop-quan-trong {
    border-top: 4px solid var(--tblr-orange);
}

.hop-quan-trong .modal-header {
    height: auto;
    padding-top: 1rem;
    padding-bottom: .85rem;
}