/*
 * Danh sách / chi tiết bài viết (Kho tri thức, Lễ tốt nghiệp).
 * Phần giao diện trích từ css/app.css của site GLP cũ (tile, feature-blog, single-blog-post-wrap,
 * breadcrumbs, post...) kèm vài lớp tiện ích Bootstrap mà trang cũ dùng nhưng site mới không nạp.
 */

/* Lớp tiện ích tối thiểu (Bootstrap 5 của site cũ) */
.main.posts .container, .main.events .container { max-width: 1200px; }
.img-fluid { max-width: 100%; height: auto; }
.align-items-center { align-items: center !important; }
.m-auto { margin: auto !important; }
.text-center { text-align: center !important; }
.list-unstyled { padding-left: 0; list-style: none; }
.clearfix::after { display: block; clear: both; content: ""; }
.overflow-hidden { overflow: hidden !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-10 { margin-bottom: 50px !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.me-2 { margin-right: .5rem !important; }
.ms-2 { margin-left: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-0 { padding-left: 0 !important; }
.btn {
    display: inline-block;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: .375rem;
    transition: color .15s, background-color .15s, border-color .15s;
}
.btn.disabled { pointer-events: none; opacity: .65; }
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .375rem;
}
.breadcrumbs-area { position: relative; }
.breadcrumb-content { position: relative; }
.mb-text-p { margin-bottom: 0; }
@media (min-width: 1200px) {
    .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
    .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
}

/* Trích từ site cũ */
.btn-outline-pace-light-blue {
    border: 2px solid #20c3f3 !important;
    color: #20c3f3 !important
}
.btn-outline-pace-light-blue:active, .btn-outline-pace-light-blue:hover {
    background-color: #20c3f3 !important;
    border: 2px solid #20c3f3 !important;
    color: #fff !important
}
.btn-outline-pace-light-blue.disabled {
    border-color: #cacaca !important;
    color: #cacaca !important
}
.tile.single .description {
    bottom: 0;
    min-height: 70px;
    position: absolute;
    width: 100%
}
#collection-items ul {
    padding-left: 0 !important
}
.tile {
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
    float: left;
    height: 290px;
    line-height: 1.5em;
    margin: 10px 20px 20px 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 266px
}
.tile.highlight {
    
    
    
}
#collection-items .tile {
    border: 4px solid #fff;
    transition: all .5s ease-out
}
#collection-items .tile:hover {
    border-color: #3e6d89
}
.tile .img {
    aspect-ratio: 1.9/1;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    filter: alpha(opacity=0);
    margin: 0;
    padding: 0;
    transition: opacity .4s;
    width: 100%
}
.tile .img.visible {
    filter: alpha(opacity=100);
    opacity: 1
}
.tile .img .duration {
    background: rgba(0, 0, 0, .6);
    border-radius: 4px;
    bottom: 10px;
    color: #fff;
    font-size: 13px;
    line-height: 6px;
    padding: 5px;
    position: absolute;
    right: 10px
}
.tile .img img {
    float: none;
    height: auto;
    margin: 0;
    max-width: none;
    min-width: 258px;
    padding: 0
}
.tile .img img.shorter {
    
    width: 100%;
    max-width: 100%;
}
.tile.single .icon {
    background-color: #000;
    background-color: rgba(0, 0, 0, .5);
    display: block;
    height: 48px;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 48px
}
.tile.single>a {
    background: transparent url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==) no-repeat 0 0;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}
.tile.single>a.view {
    background-color: #fcfcfc;
    border-top: 1px solid #eee;
    bottom: 0;
    box-sizing: border-box;
    color: #686868;
    font-size: 16px;
    font-style: italic;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    top: auto;
    width: 100%
}
.tile.single>a.view:before {
    background-color: hsla(0, 0%, 100%, .2);
    background-color: transparent;
    background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .5));
    background-repeat: repeat-x;
    content: "";
    display: block;
    height: 20px;
    
    margin-top: -21px;
    padding-right: 20px;
    width: 100%;
    z-index: 1
}
.tile.single>a.view:after {
    content: "";
    display: block;
    height: 16px;
    position: absolute;
    right: 17px;
    top: 13px;
    width: 16px
}
.tile.single .description {
    background-color: #fff;
    height: 54.90052356%
}
.tile.single .description .h3, .tile.single .description h3 {
    color: #333f48;
    font-size: 17px;
    font-weight: 700;
    margin: 20px
}
.tile.single .description .no-timestamp.h3, .tile.single .description h3.no-timestamp {
    padding-top: 12px
}
.tile.single .description .no-timestamp.avatar.h3, .tile.single .description h3.no-timestamp.avatar {
    padding-top: 0
}
.tile.single .description .h4, .tile.single .description h4 {
    color: #929292;
    font-size: 15px;
    font-weight: 400;
    margin: 20px
}
.tile.single .description .h4 em, .tile.single .description h4 em {
    font-style: normal
}
.tile.single .description .h3+.h4, .tile.single .description .h3+h4, .tile.single .description div.h3like+.h4, .tile.single .description div.h3like+h4, .tile.single .description h3+.h4, .tile.single .description h3+h4 {
    color: #3d4a53;
    float: left;
    margin: 0 20px;
    text-align: justify
}
.tile.single .description div.h3like {
    color: #555;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    margin: 5px 20px
}
.tile.single .description div.h3like a {
    color: #555;
    float: left;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 13px;
    text-shadow: none
}
.tile.single .description div.h3like.no-timestamp {
    padding-top: 12px
}
.tile.single .description div.h3like.no-timestamp.avatar {
    padding-top: 0
}
.tile.single .description div.h3like.avatar {
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    margin-bottom: 10px;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.tile.single .description .friendly-timestamp {
    color: #bbb;
    font-size: 11px;
    font-weight: 400;
    margin-left: 20px;
    margin-top: 10px
}
.tile.single .description img.avatar {
    border-radius: 4px;
    float: left;
    height: 25px;
    margin-left: 20px;
    margin-right: 5px;
    margin-top: 10px;
    width: auto
}
.tile.single .description .avatar.h3, .tile.single .description h3.avatar {
    word-wrap: normal;
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    margin-bottom: 10px;
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.tile.single .description .avatar.h4, .tile.single .description h4.avatar {
    font-size: 16px;
    line-height: 18px
}
.tile.single.no-img .description {
    height: 100%
}
.tile.single.no-img .description .h3, .tile.single.no-img .description h3 {
    font-size: 24px
}
.tile.single.no-img .description .avatar.h3, .tile.single.no-img .description h3.avatar {
    font-size: 18px
}
.tile.single.no-img .description .h4, .tile.single.no-img .description h4 {
    color: #666;
    font-size: 20px;
    line-height: 24px
}
.tile.single.no-img.social .h4, .tile.single.no-img.social h4 {
    font-size: 26px;
    font-weight: 300;
    line-height: 30px
}
.tile.single.uberflip.portrait:not(.list) .description {
    background: hsla(0, 0%, 100%, .95);
    border-top: 1px solid rgba(0, 0, 0, .05);
    box-shadow: 0 -2px 30px hsla(0, 0%, 59%, .1);
    height: 110px
}
.tile.single.uberflip.portrait:not(.list) .description .friendly-timestamp {
    font-size: 11px;
    height: 15px
}
.tile.single.uberflip.portrait:not(.list) .description .friendly-timestamp.blank {
    height: 5px
}
.tile.single.uberflip.portrait:not(.list) .description .h3, .tile.single.uberflip.portrait:not(.list) .description h3 {
    color: #555;
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.tile.single.uberflip.portrait:not(.list) .description .share-single {
    bottom: 60px
}
.tile.single.uberflip.portrait:not(.list) .img {
    height: 88%
}
.tile.single.uberflip.portrait:not(.list) .img img.taller {
    height: auto;
    width: 100%
}
.tile.single.uberflip.portrait:not(.list) a.view:before {
    background: none
}
.tile.single.brightcove .img:before, .tile.single.instagram.media-type-video .img:before, .tile.single.vidyard .img:before, .tile.single.vimeo .img:before, .tile.single.wistiar .img:before, .tile.single.youtube .img:before {
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}
.tile.single.instagram:not(.list) .description, .tile.single.pinterest:not(.list) .description {
    height: 44%
}
.tile.single.instagram:not(.list) .img, .tile.single.pinterest:not(.list) .img {
    height: 56%
}
.tile.single.slideshare>.img.visible:after {
    background-color: rgba(0, 0, 0, .028);
    background-color: transparent;
    background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .07));
    background-repeat: repeat-x;
    content: "";
    display: block;
    height: 50px;
    margin-top: -40px;
    position: relative;
    width: 100%
}
.tile.single .hidden-cta-fields.fields-revealed .cta-field-sprite-container {
    bottom: 13px;
    top: auto
}
.tile.single .hidden-cta-fields.fields-revealed.fields-revealed .cta-field-sprite-container {
    bottom: 6px
}
.tile.single:hover .description .h3, .tile.single:hover .description h3 {
    color: #000
}
.tile.single:hover>a.view {
    background-color: #f8f8f8;
    text-decoration: underline
}
.tile.single:hover>a.view:after {
    background-position: -16px 0
}
.tile.links>.description>.h4, .tile.links>.description>h4 {
    position: absolute;
    width: 85%;
    width: calc(100% - 40px);
    z-index: 5
}
.tile.list {
    background: #fdfdfd;
    float: none;
    height: 110px;
    margin-bottom: 15px;
    overflow: hidden;
    width: 100%
}
.tile.list>div.img {
    background-color: #ddd;
    clear: none;
    float: left;
    height: 100% !important;
    overflow: hidden;
    position: relative;
    width: 25%
}
.tile.list>div.img>img {
    height: auto;
    width: 100%
}
.tile.list>div.img span.duration {
    bottom: 6px;
    font-size: 11px;
    right: 6px
}
.tile.list>div.description>.friendly-timestamp {
    margin-left: 35px;
    margin-top: 5px
}
.tile.list>div.description>img.avatar {
    margin-top: 2px
}
.tile.list>div.description .h3, .tile.list>div.description .h3like, .tile.list>div.description h3 {
    margin-bottom: 2px;
    margin-right: 45px
}
.tile.list>div.description .avatar.h3, .tile.list>div.description .h3like.avatar, .tile.list>div.description h3.avatar {
    margin-bottom: 2px;
    margin-top: 2px
}
.tile.list>div.description .h4, .tile.list>div.description h4 {
    font-size: 16px;
    line-height: 21px;
    margin-right: 45px;
    max-height: 42px;
    overflow: hidden
}
.tile.list>div.description .avatar.h4, .tile.list>div.description h4.avatar {
    line-height: 18px;
    max-height: 36px
}
.tile.list>div.description:after {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAACACAYAAAD03Gy6AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAsdJREFUeNrs3G1u2kAUheEQdRtdhXfUtLtIC7TbqPqxIC+hW6k7SEaKohLA4/E59847kuUoCCy9Ty6Df4TdNE0PS9c4jof5x8NDp2sYhqrnv6uMv3/xq24RatbjSvH3AGw0ASX+sZy+/OehPZPQeALeiM8ktAa4IT4IrQDuiA/C2ntAif+1nD4veG32hNoJqIjPJNQCrBAfhKUAK8YH4d49oMT/Vk7PDa7FnnBtAhrGZxKuAWwQH4RLAPN7/vOG1wXh1QT8Kcffja8NwhlgGIbf5fQBBOEeAILBpyAQDG7EQDC4EwZBDACCAQAIBgAgGACAYAAAggEACAYAIBgAvEB4AkEEMCP8AkEIAIIBwLxAEAOAYAAAggEACAYAIBgAgGAAAIIBAAgGACAYAJwRPoKgAzitnyBoAUAwAADBAAAEAwAQDABAMADoHuHRZBK7RXAB6BbBCaBLBDeA7hAcAc4In8oxZUdwBTitH/MkpEZwBugCwR0gPUIEgNQIUQDSIkQCSIkQDSAdQkSAVAhRAdIgRAZIgRAdIDxCBoDQKwPA6T82v5djt/F1j0xA8PjRAcLHjwyQIn5UgDTxIwKkih8NIF38SAAp40cBSBs/AkDq+O4A6eM7A3QR3xWgm/iOAF3FdwPoLr4TQJfxXQC6je8A0HV8NUD38ZUAxBcCEF8IQHwhAPGFAMQXAhBfCEB8IQDxhQDEFwIQXwhAfCEA8YUAxBcCEF8FMI4j8VUAxBcCEF8IQHwhAPGFAMQXAhBfCEB8IQDxhQDEFwIQXwhAfCEA8YUAxBcCEF8/Ae+JLwQYhuE4ByG+ag8oCIeNEIh/6VPQBgjEv3Yf0BCB+LfeCTdAIP49ACsjEH8JwEoIxK8BqEQg/hoACxGIvybAnQjEbwFwIwLxWwJcQSD+FgAXEIi/cO2mafnX7o/jeI7ebfzyx1j1/H8CDAARKo7z21s+vgAAAABJRU5ErkJggg==");
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: 50%;
    content: "";
    display: block;
    filter: alpha(opacity=30);
    height: 100%;
    opacity: .3;
    position: absolute;
    right: 12px;
    top: 0;
    width: 50px
}
.tile.list.with-img>div.description .long-h3.h4, .tile.list.with-img>div.description h4.long-h3 {
    display: block
}
.tile.list.no-img .description {
    width: 100%
}
.tile.list.no-img .description>.h3, .tile.list.no-img .description>.h3like, .tile.list.no-img .description>h3 {
    font-size: 19px
}
.tile.list.no-img .description>.h4, .tile.list.no-img .description>h4 {
    color: #999;
    font-size: 16px;
    line-height: 18px;
    max-height: 36px;
    overflow: hidden
}
.tile.list.no-img a.item-link.view {
    left: 0
}
.tile.list a.item-link.view {
    background-color: transparent;
    border: 0;
    filter: alpha(opacity=50);
    left: 25%;
    opacity: .5;
    text-indent: -9999px;
    top: -3px;
    transform: scale(.7);
    width: 45px
}
.tile.list a.item-link.view:after, .tile.list a.item-link.view:before {
    display: none
}
.tile.list a.item-link:not(.view) {
    display: block;
    height: 100%;
    position: absolute;
    width: 100%
}
.tile.list.links>.description>.h4, .tile.list.links>.description>h4 {
    width: 87%;
    width: calc(100% - 65px)
}
.tile.list:hover {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .2)
}
.tile.list:hover>.description .h4, .tile.list:hover>.description h4 {
    color: #333
}
#collection-items .tile .description {
    transition: all .4s ease-out
}
#collection-items .tile .share-single {
    display: none
}
.tile.single.with-img .description .long-h3.h4, .tile.single.with-img .description h4.long-h3 {
    display: block
}
#collection-items .tile:hover .description {
    height: 100%;
    transition: all .3s ease-out
}
.title_rel {
    float: left;
    margin-top: 30px
}
.tintlienquan li {
    line-height: 20px;
    margin-bottom: 15px
}
.tintlienquan li, .tintlienquan ul {
    float: left;
    width: 100%
}
.tintlienquan .h2 a, .tintlienquan h2 a {
    color: #000;
    float: left;
    font-size: 15px;
    text-transform: none !important;
    width: 100%
}
.wrap-con {
    margin-bottom: 30px
}
.breakcum .h2, .breakcum h2 {
    color: #1e567b;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 20px 0;
}
.content_wrap {
    float: left;
    width: 100%
}
@media (max-width: 575.98px) {
.relative .slide-info, .relative ul {
        float: left;
        padding: 0;
        width: 100%
    }
}
.btn-outline-pace-light-blue {
    border: 2px solid #20c3f3 !important;
    color: #20c3f3 !important
}
.btn-outline-pace-light-blue:active, .btn-outline-pace-light-blue:hover {
    background-color: #20c3f3 !important;
    border: 2px solid #20c3f3 !important;
    color: #fff !important
}
.btn-outline-pace-light-blue.disabled {
    border-color: #cacaca !important;
    color: #cacaca !important
}
.feature-blog {
    box-shadow: 0 0 20px 0 #00000040;
    padding: 0;
    margin: 0 1px;
}
.post span {
    background: none !important;
}
.post table span a {
    background: none !important;
    color: #1976d2 !important;
}
.post table a span {
    background: none !important;
    color: #f26122;
}
.main.posts .post table a span {
    color: #f26122 !important;
}
.post img {
    max-width: 100% !important;
    height: initial !important;
}
.blog-post-loop .blog-post-details, .blog-post-related-loop .blog-post-details {
    border-left: 1px solid #bcbcbc;
    border-bottom: 1px solid #bcbcbc;
    border-right: 1px solid #bcbcbc;
    padding: 5px 25px;
}
.blog-post-loop .blog-post-details .title, .blog-post-related-loop .blog-post-details .title {
    font-size: 16px;
    line-height: 1.3;
    min-height: 60px;
}
.blog-post-loop .blog-post-details .desc-content, .blog-post-related-loop .blog-post-details .desc-content {
    font-size: 13px;
    height: 60px;
    overflow: hidden;
    word-wrap: break-word;
    line-height: 20px;
}
.blog-post-details a {
    color: #1976d2;
    font-size: 16px;
}
.feature-blog {
    box-shadow: 0 0 20px 0 #00000040;
    padding: 0;
    margin: 0 1px;
}
.feature-blog {
    box-shadow: 0 0 20px 0 #00000040;
}
.feature-blog .title {
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, Sans-Serif !important;
    
    line-height: 28px !important;
}
.feature-blog .desc-content {
    font-size: 14px;
    line-height: 1.5;
    padding-right: 10px;
}
.feature-blog .post-meta {
    text-align: right;
    padding-right: 10px;
    font-size: 12px;
}
.feature-blog .post-meta a {
    margin-left: 5px;
}
.feature-blog .post-meta a>i {
    font-size: 20px;
    border-radius: initial !important;
}
.feature-blog .post-meta a>.subs-ytb {
    height: 20px;
    margin-top: -10px;
}
.blog-thumbnail img {
    height: 195px;
    overflow: hidden;
}
.blog-post-details a {
    color: #1976d2;
}
.blog-post-details a i {
    margin-left: 10px;
}
.feature-blog .pl-0 {
    padding: 0 !important;
}
.single-blog-post-wrap {
    margin-bottom: -5px;
    padding: 0
}
.single-blog-post-wrap .blog-thumbnail .btn-plus {
    color: #fff;
    height: 0;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: .4s;
    width: 0;
    z-index: 2
}
.single-blog-post-wrap .blog-thumbnail .btn-plus img {
    width: 50px
}
.single-blog-post-wrap .blog-thumbnail a {
    display: block;
    position: relative
}
.single-blog-post-wrap .blog-thumbnail a:before {
    background-color: rgba(0, 0, 0, .3);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: scaleX(0);
    transition: .4s;
    visibility: hidden;
    width: 100%;
    z-index: 2
}
.single-blog-post-wrap .blog-thumbnail a:hover:before {
    opacity: 1;
    transform: scaleX(1);
    visibility: visible
}
.single-blog-post-wrap:hover .blog-thumbnail .btn-plus {
    height: 40px;
    transform: translate(-50%, -50%) scale(1);
    width: 40px
}
.single-blog-post-wrap .blog-post-details .title {
    color: #212121;
    font-size: 24px;
    font-weight: 700;
    height: 71px;
    overflow: hidden;
    word-wrap: break-word;
    line-height: 20px;
}
@media (max-width: 991px) {
.single-blog-post-wrap .blog-post-details .title {
        font-size: 22px
    }
}
.single-blog-post-wrap .blog-post-details .post-meta {
    color: #212121
}
.single-blog-post-wrap .blog-post-details .post-meta a {
    margin-right: 10px
}
.single-blog-post-wrap .blog-post-details .post-meta a:last-child {
    margin-right: 0
}
.single-blog-post-wrap .blog-post-details .post-meta i {
    color: #212121
}
@media (max-width: 575px) {
.breadcrumbs-area {
        padding: 20px 0;
    }
.feature-blog .title {
        margin: 0 0 10px 0 !important;
        height: initial !important;
    }
.single-blog-post-wrap .blog-post-details .title {
        height: initial !important;
    }
.breadcrumbs-area {
        padding: 20.8px 0;
    }
.tile {
        width: 100%;
    }
.tile .img img {
        float: none;
        height: auto;
        margin: 0;
        max-width: none;
        min-width: 100%;
        padding: 0;
    }
.tile .img {
        aspect-ratio: 1.9/1;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        filter: alpha(opacity=0);
        margin: 0;
        padding: 0;
        transition: opacity .4s;
        width: 100%;
    }
.tile.single .description {
        bottom: 0;
        min-height: 70px;
        position: relative;
        width: 100%;
    }
.tile {
        background: #fff;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
        float: left;
        height: 100%;
        line-height: 1.5em;
        margin: 10px 20px 20px 0;
        
        padding: 0;
        position: relative;
        width: 100%;
    }
.tile.single>a {
        position: relative;
    }
.tile.single>a.view {
        margin-top: 10px;
    }
}
.fit-image {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%
}
.breadcrumbs-area {
    background-color: transparent;
    padding: 20px 0;
}
.breadcrumb-content {
    text-align: left;
}
.breadcrumbs-area .breadcrumb-content .title {
    color: #212121;
}
.breadcrumbs-area .breadcrumb-content .title:hover {
    color: #003157;
}
@media (max-width: 767.98px) {
.single-blog-post-wrap {
        margin-bottom: 15px !important;
    }
.post table {
        width: 100% !important;
    }
}

/* Phân trang số (trang Lễ tốt nghiệp) */
.main .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 30px 0 0; padding: 0; list-style: none; }
.main .pagination .page-link { display: block; min-width: 40px; padding: 8px 12px; color: #1976d2; text-align: center; text-decoration: none; border: 1px solid #bcbcbc; }
.main .pagination .page-item.active .page-link { color: #fff; background: #1976d2; border-color: #1976d2; }
.main .pagination .page-item.disabled .page-link { color: #aaa; pointer-events: none; }

/* .content_wrap của site cũ là float: bao nó lại để footer không đè lên danh sách */
.main.posts, .main.events { display: flow-root; background-color: #fff; }

/* Phân trang kiểu Trước / Sau + ô nhập trang */
.articles-pager {
    clear: both;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
}
.articles-pager-nav { display: flex; gap: 16px; justify-content: center; }
.articles-pager-goto { display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.articles-pager-goto .form-control { width: 80px; }
@media (max-width: 575px) {
    .articles-pager { grid-template-columns: 1fr; justify-items: center; }
    .articles-pager-goto { justify-content: center; }
}

/* Lễ tốt nghiệp (main.events): khớp mẫu site cũ — nền xám xanh nhạt, gutter 24px, link xanh, chữ không thụt lề */
.main.events { background-color: #f3f6fa; }
.main.events .row { margin-left: -12px; margin-right: -12px; }
.main.events .row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }
.main.events .feature-blog {
    width: calc(100% - 24px);
    margin: 0 12px 50px;
    background-color: #f3f6fa;
}
.main.events .feature-blog .section-title { padding: 0 40px 0 32px; }
.main.events .feature-blog .title a,
.main.events .feature-blog .title a:visited { color: #1976d2; text-decoration: none; }
.main.events .feature-blog .desc-content { padding-right: 0; text-align: justify; }
.main.events .feature-blog .post-meta a,
.main.events .feature-blog .post-meta a:visited { color: #1976d2; }
.main.events .blog-post-loop > .col-md-6 { margin-bottom: 50px; }
.main.events .single-blog-post-wrap .blog-post-details { background-color: #f3f6fa; }
.main.events .single-blog-post-wrap .blog-post-details.pt-5 { padding-top: 32px; }
.main.events .single-blog-post-wrap .blog-post-details .title { margin: 0 0 15px; }
.main.events .blog-post-details a,
.main.events .blog-post-details a:visited { color: #1976d2; text-decoration: none; }
.main.events .blog-post-details .desc-content { text-align: justify; }
.main.events .breadcrumb-content .title,
.main.events .breadcrumb-content .title:visited { color: #212121; text-decoration: none; }