/* ==========================================================================
   pagination.css — giao diện phân trang dùng chung (skin bvyhct)
   Tạo 2026-10-12 — xem docs/module-news/36_UI_PHAN_TRANG.md
   Phủ MỌI bộ phân trang có class "pagerstyle" của dự án:
     (1) MLNews/MLGallery  PagingControl.ascx : <table class="pagerstyle"> (trang tin, thư viện)
     (2) GridView (VanBan, PopUpModal, FAQs2016) : <tr class="pagerstyle"> ... <table><tr><td><a|span>
     (3) FAQs2016 quản trị : class "faq_paging"
   Đi kèm js/pagination.js (bỏ dấu [ ], đổi |<< < > >>| thành « ‹ › »; CSS vẫn chạy khi JS tắt).
   Nạp trong Home.ascx / Detail - 2col.ascx / Admin.ascx kèm ?v= (tăng v mỗi lần sửa).
   Ghi đè skin.css (.pagerstyle td a) và datagrid.css (.pagerstyle a:link) bằng !important có chủ ý.
   ========================================================================== */

/* ---- Bố cục: mọi bảng/hàng bên trong bộ phân trang thành 1 hàng flex, căn giữa ---- */
.pagerstyle table,
table.pagerstyle,
.faq_paging table {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-justify-content: center;
    justify-content: center;
    width: auto !important;
    max-width: 100%;
    margin: 22px auto 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-collapse: separate;
}
.pagerstyle tbody,
.pagerstyle tr,
.faq_paging tbody,
.faq_paging tr {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 5px;
    border: 0 !important;
    background: transparent !important;
}
/* table.pagerstyle lồng nhau: bảng ngoài chỉ gom, không thêm lề lần nữa */
table.pagerstyle table { margin: 0 !important; }

/* Ô <td> chỉ là khung: chữ trắng cỡ 0 để khoảng trắng (&nbsp;) giữa các ô không chiếm chỗ */
.pagerstyle td,
.faq_paging td {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-align: center;
}

/* ---- Mỗi mục: nút bo góc, viền xám nhạt ----------------------------------- */
.pagerstyle td a,
.pagerstyle td a:link,
.pagerstyle td a:visited,
.pagerstyle td span,
.faq_paging td a,
.faq_paging td a:link,
.faq_paging td a:visited,
.faq_paging td span {
    position: relative;
    float: none !important;
    display: -webkit-inline-flex !important;
    display: inline-flex !important;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 34px;
    height: 34px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 1px solid #dbe3ea !important;
    border-radius: 9px;
    background: #fff !important;
    color: #2b3a4a !important;
    font-family: var(--bv-font, 'Roboto Condensed', Tahoma, Arial, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, -webkit-transform .22s ease;
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.pagerstyle td a b,
.faq_paging td a b { font-weight: 700; }

/* ---- Hover / focus: nền xanh #139cd0, chữ trắng, nhích lên nhẹ + bóng xanh ---- */
.pagerstyle td a[href]:hover,
.pagerstyle td a[href]:focus,
.faq_paging td a[href]:hover,
.faq_paging td a[href]:focus {
    background: #139cd0 !important;
    border-color: #139cd0 !important;
    color: #fff !important;
    outline: none;
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(19, 156, 208, .14);
}
.pagerstyle td a[href]:active,
.faq_paging td a[href]:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    box-shadow: none;
}
.pagerstyle td a:focus-visible,
.faq_paging td a:focus-visible {
    outline: 2px solid #139cd0;
    outline-offset: 2px;
}

/* ---- Trang hiện tại: nền xanh đặc ------------------------------------------ */
.pagerstyle td span,
.faq_paging td span,
.pagerstyle td a.pg-current,
.faq_paging td a.pg-current {
    background: #139cd0 !important;
    border-color: #139cd0 !important;
    color: #fff !important;
    font-weight: 700 !important;
    cursor: default;
    box-shadow: 0 1px 2px rgba(19, 156, 208, .14);
}
.pagerstyle td a.pg-current[href]:hover,
.pagerstyle td a.pg-current[href]:focus,
.faq_paging td a.pg-current[href]:hover,
.faq_paging td a.pg-current[href]:focus {
    -webkit-transform: none;
    transform: none;
    box-shadow: 0 1px 2px rgba(19, 156, 208, .14);
}
/* Dự phòng khi JS tắt: link chứa <b> (MLNews bọc trang hiện tại bằng <b>[n]</b>) */
.pagerstyle td a:has(> b) {
    background: #139cd0 !important;
    border-color: #139cd0 !important;
    color: #fff !important;
    box-shadow: 0 1px 2px rgba(19, 156, 208, .14);
}

/* ---- Nút điều hướng (đầu / trước / sau / cuối) và nút bị khóa ---------------- */
.pagerstyle td a.pg-nav,
.faq_paging td a.pg-nav {
    min-width: 34px;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    border-color: #cfe3ee !important;
    color: #139cd0 !important;
}
.pagerstyle td a.pg-nav[href]:hover,
.faq_paging td a.pg-nav[href]:hover { color: #fff !important; }
/* không có href (ASP.NET render link bị khóa) hoặc aspNetDisabled */
.pagerstyle td a:not([href]),
.pagerstyle td a.aspNetDisabled,
.faq_paging td a:not([href]) {
    opacity: .4;
    cursor: not-allowed;
    box-shadow: none;
}

/* ---- Điện thoại ---------------------------------------------------------- */
@media (max-width: 575px) {
    .pagerstyle tbody,
    .pagerstyle tr,
    .faq_paging tbody,
    .faq_paging tr { gap: 5px; }
    .pagerstyle td a,
    .pagerstyle td a:link,
    .pagerstyle td a:visited,
    .pagerstyle td span,
    .faq_paging td a,
    .faq_paging td span {
        min-width: 32px;
        height: 32px;
        padding: 0 9px !important;
        font-size: 13px !important;
    }
}

/* Người dùng bật "giảm chuyển động" */
@media (prefers-reduced-motion: reduce) {
    .pagerstyle td a,
    .faq_paging td a { -webkit-transition: none; transition: none; }
    .pagerstyle td a[href]:hover,
    .faq_paging td a[href]:hover { -webkit-transform: none; transform: none; }
}

/* ---- Chế độ gọn: cột hẹp (trang chủ 3 cột col-md-4, cột bên col-md-3/2) ----------
   Nút nhỏ hơn, ẩn « » (đầu/cuối), js/pagination.js rút gọn dãy số: 1 … 4 5 6 … 9.
   Thêm ellipsis "…" là phần tử <i class="pg-gap"> do JS tạo. */
[class*="col-md-4"] table.pagerstyle,
[class*="col-md-3"] table.pagerstyle,
[class*="col-md-2"] table.pagerstyle { margin: 16px auto 6px !important; }
[class*="col-md-4"] .pagerstyle tbody,
[class*="col-md-4"] .pagerstyle tr,
[class*="col-md-3"] .pagerstyle tbody,
[class*="col-md-3"] .pagerstyle tr,
[class*="col-md-2"] .pagerstyle tbody,
[class*="col-md-2"] .pagerstyle tr { gap: 4px; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; }
[class*="col-md-4"] .pagerstyle td a,
[class*="col-md-4"] .pagerstyle td a:link,
[class*="col-md-4"] .pagerstyle td a:visited,
[class*="col-md-4"] .pagerstyle td span,
[class*="col-md-3"] .pagerstyle td a,
[class*="col-md-3"] .pagerstyle td a:link,
[class*="col-md-3"] .pagerstyle td a:visited,
[class*="col-md-3"] .pagerstyle td span,
[class*="col-md-2"] .pagerstyle td a,
[class*="col-md-2"] .pagerstyle td a:link,
[class*="col-md-2"] .pagerstyle td a:visited,
[class*="col-md-2"] .pagerstyle td span {
    min-width: 30px;
    height: 30px;
    padding: 0 8px !important;
    border-radius: 8px;
    font-size: 13px !important;
}
[class*="col-md-4"] .pagerstyle td a.pg-nav,
[class*="col-md-3"] .pagerstyle td a.pg-nav,
[class*="col-md-2"] .pagerstyle td a.pg-nav { padding: 0 !important; font-size: 18px !important; }
[class*="col-md-4"] .pagerstyle td a[id$="lnkFirst"],
[class*="col-md-4"] .pagerstyle td a[id$="lnkLast"],
[class*="col-md-3"] .pagerstyle td a[id$="lnkFirst"],
[class*="col-md-3"] .pagerstyle td a[id$="lnkLast"],
[class*="col-md-2"] .pagerstyle td a[id$="lnkFirst"],
[class*="col-md-2"] .pagerstyle td a[id$="lnkLast"] { display: none !important; }

/* Dấu "…" của dãy số rút gọn */
.pagerstyle td i.pg-gap {
    display: inline-block;
    min-width: 14px;
    text-align: center;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1px;
    color: #8a97a5;
}

/* ---- Trang chủ: 3 cột tin (#dnn_hoatdongPane / #dnn_thongtinPane / #dnn_TbaoPane) ----------
   Portals/0/portal.css (không có Git) đã có khối "Phân trang: dạng pill" bằng selector ID
   (#dnn_xxxPane div[align="center"] a/b, !important) làm nút co 26px, bọc <b> trang hiện tại thành
   viên xanh riêng và ép nowrap + overflow-x:auto. Ghi đè lại ở đây bằng selector ID cụ thể hơn để
   khớp giao diện phân trang chung (docs/module-news/36 §6). */
#dnn_hoatdongPane table.pagerstyle td a,
#dnn_thongtinPane table.pagerstyle td a,
#dnn_TbaoPane table.pagerstyle td a,
#dnn_hoatdongPane table.pagerstyle td a:link,
#dnn_thongtinPane table.pagerstyle td a:link,
#dnn_TbaoPane table.pagerstyle td a:link,
#dnn_hoatdongPane table.pagerstyle td a:visited,
#dnn_thongtinPane table.pagerstyle td a:visited,
#dnn_TbaoPane table.pagerstyle td a:visited,
#dnn_hoatdongPane table.pagerstyle td span,
#dnn_thongtinPane table.pagerstyle td span,
#dnn_TbaoPane table.pagerstyle td span {
    display: inline-flex !important;
    min-width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #2b3a4a !important;
    background: #fff !important;
}
#dnn_hoatdongPane table.pagerstyle td a b,
#dnn_thongtinPane table.pagerstyle td a b,
#dnn_TbaoPane table.pagerstyle td a b {
    display: inline !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: inherit !important;
}
#dnn_hoatdongPane table.pagerstyle td a.pg-nav,
#dnn_thongtinPane table.pagerstyle td a.pg-nav,
#dnn_TbaoPane table.pagerstyle td a.pg-nav { padding: 0 !important; font-size: 18px !important; color: #139cd0 !important; }
#dnn_hoatdongPane table.pagerstyle td a.pg-current,
#dnn_thongtinPane table.pagerstyle td a.pg-current,
#dnn_TbaoPane table.pagerstyle td a.pg-current,
#dnn_hoatdongPane table.pagerstyle td span,
#dnn_thongtinPane table.pagerstyle td span,
#dnn_TbaoPane table.pagerstyle td span { background: #139cd0 !important; border-color: #139cd0 !important; color: #fff !important; }
#dnn_hoatdongPane table.pagerstyle td a[href]:hover,
#dnn_thongtinPane table.pagerstyle td a[href]:hover,
#dnn_TbaoPane table.pagerstyle td a[href]:hover,
#dnn_hoatdongPane table.pagerstyle td a[href]:focus,
#dnn_thongtinPane table.pagerstyle td a[href]:focus,
#dnn_TbaoPane table.pagerstyle td a[href]:focus { background: #139cd0 !important; border-color: #139cd0 !important; color: #fff !important; }
#dnn_hoatdongPane table.pagerstyle td a.pg-current[href]:hover,
#dnn_thongtinPane table.pagerstyle td a.pg-current[href]:hover,
#dnn_TbaoPane table.pagerstyle td a.pg-current[href]:hover { transform: none; }
#dnn_hoatdongPane table.pagerstyle td a[id$="lnkFirst"],
#dnn_thongtinPane table.pagerstyle td a[id$="lnkFirst"],
#dnn_TbaoPane table.pagerstyle td a[id$="lnkFirst"],
#dnn_hoatdongPane table.pagerstyle td a[id$="lnkLast"],
#dnn_thongtinPane table.pagerstyle td a[id$="lnkLast"],
#dnn_TbaoPane table.pagerstyle td a[id$="lnkLast"] { display: none !important; }
#dnn_hoatdongPane div[align="center"] div,
#dnn_thongtinPane div[align="center"] div,
#dnn_TbaoPane div[align="center"] div { overflow: visible !important; padding: 4px 0 6px; }

/* ---- Trang chủ: ẩn tiêu đề + phân trang thừa của module "news_listPageTitle" ----------------
   Tab trang chủ có 2 module news_listPageTitle (ID 809 ở #dnn_TitleHDNBPane, 808 ở #dnn_DVnoibatPane).
   Bình thường chúng RỖNG; nhưng khi bấm sang trang của một cột tin (URL có .../categoryid/xxx/pg/N) chúng
   in thêm tiêu đề "Thông báo - Tuyên truyền" + một hàng phân trang rộng thứ hai ngay dưới khối "Một số
   kỹ thuật nổi bật"/tiêu đề, trùng với phân trang trong chính cột tin → lỗi hiển thị. Chỉ ẩn phần nội dung
   của module (nút sửa/cấu hình của DNN nằm ở container ngoài nên admin vẫn thấy). Hai ID pane chỉ có ở
   Home.ascx, nên các trang danh sách thật (module này là nội dung chính) không bị ảnh hưởng. */
#dnn_TitleHDNBPane .ModnewslistPageTitleC,
#dnn_DVnoibatPane .ModnewslistPageTitleC { display: none !important; }