/*
Theme Name: Newslay Child
Theme URI: https://themeansar.com/free-themes/newslay/
Author: Themeansar
Author URI: https://themeansar.com
Description: Newslay is a fast, clean, modern-looking Best Responsive News Magazine WordPress theme. The theme is fully widgetized, so users can manage the content by using easy to use widgets. Newslay is suitable for dynamic news, newspapers, magazine, publishers, blogs, editors, online and gaming magazines, newsportals,personal blogs, newspaper, publishing or review siteand any creative website. Newslay is SEO friendly, WPML,Gutenberg, translation and RTL ready. Live preview : https://demo.themeansar.com/newsup and documentation at https://docs.themeansar.com/docs/newsup/
Version: 1.7
Requires PHP: 7.4
Tested up to: 6.8
Requires at least: 6.7
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: newsup
Text Domain: newslay
Tags: blog, portfolio, news, grid-Layout, one-column, two-columns, three-columns, flexible-header, left-sidebar, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, post-formats, rtl-language-support, theme-options, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks

Newslay WordPress Theme is child theme of Newsup, Copyright 2020 Themeansar
Newslay is distributed under the terms of the GNU General Public License v3

Newslay is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/
span.time {
    margin-left: 5px;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 35px;
}
.mg-headwidget.center .heacent {
    margin-top: unset !important;
}
.mg-headwidget.center .logo-center, .mg-headwidget.center .navbar-header, .mg-headwidget.center .site-branding-text  {
    float: none;
    text-align: center;
}

.mg-headwidget.center .navbar-brand {
    float: none;
    display: inline-block;
    margin: 8px auto 0 auto;
    font-weight: bold;
}
.mg-headwidget.center .heacent {
    margin-top: 40px;
    color: #fff;
}
.navbar-wp .dropdown-menu.searchinner .btn {
    border: medium none;
    border-radius: 0 4px 4px 0;
    height: 40px;
    line-height: 25px;
    padding: 5px 15px;
}
.mg-search-box .dropdown-toggle::after {
    display: none;
}
.m-header {
    display: none;
}
.desk-header {
    display: flex;
}
.mobilehomebtn {
    width: 30px;
    text-align: center;
    line-height: 30px;
    height: 30px;
}
.mg-blog-post.md{
    width: 49.8%;
    float: left;
    height: 236px;
}
.mg-blog-post.md .bottom h4 {
    font-size: 26px;
}
.mb1px {
    margin-bottom: 1px;
}
.trending-area .title {
    border-bottom: 2px solid #eee;
    width: 100%;
    display: flex;
    align-items: center;
    height: 41px;
}
.trending-area .title h4 {
    font-size: 18px;
    line-height: 1;
    margin: 0;
    padding: 0 10px;
    position: relative;
}
.trending-area .title h4::before {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -12px;
    height: 2px;
    content: "";
}
.trending-area .small-list-post img {
    border-radius: 50%;
}
.trending-area .img-small-post {
    position: relative;
}
.trending-area.mg-posts-sec-inner .small-list-post {
    counter-reset: tr_post;
}
.trending-area .img-small-post:before {
    counter-increment: tr_post;
    content:  counter(tr_post);
    position: absolute;
    margin: 0 auto;
    transform: translateY(0);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 22px;
    font-weight: 600;
}
.trending-area.mg-posts-sec-inner .small-list-post li {
    margin-bottom: 6px;
}

/* ============================================ Responsive Part ======================================= */

@media screen and (max-width: 767px) and (min-width: 240px) {
    .mg-headwidget .navbar-wp .navbar-nav > li> a {
        position: relative;
        border-bottom: 1px solid rgba(225,225,225,0.4);
    }
    .mg-fea-area .trending-area {
        margin-bottom: 14px;
    }
    .mg-posts-sec {
        margin: 0px 0 20px 0;
    }
    .mg-nav-widget-area .text-center-xs {
        display: flex;
        justify-content: center;
    }
}
@media (max-width: 991px) {
    .navbar-wp .navbar-nav > li> a i {
        display: none;
    }   
}
@media (min-width: 1200px) {
    .mg-blog-post.md .bottom h4 {
        max-height: 65px;
        overflow: hidden;
    }
}
@media (max-width: 991.98px) {
    #menu-primary li.active.home {
        display: none;
    }
    .m-header {
        width: 100%;
        padding: 8px 15px;
        display: none;
        justify-content: space-between;
    }
    .desk-header {
        display: none;
    }
}
@media (min-width: 768px) and (max-width: 991px){
    .wp-block-search .wp-block-search__label, .mg-widget .wp-block-group h2 {
        font-size: 14px;
    }
}
@media screen and (max-width: 830px) and (min-width: 700px) {
    .mg-headwidget .text-center-xs{
        text-align: center;
    }
    .mg-headwidget .heacent {
       max-width: 75%;
    }
    span.time {
        max-width: 35%;
       
    }
}
.site-logo img {
    max-height: 40px ; 
    width: auto ;
}

   

.mg-posts-sec-post .col-md-6:first-child {
    flex: 0 0 155px;
    max-width: 155px;
    width: 155px;

    height: 128px; 
     padding: 0;
    
}


.mg-posts-sec-post .mg-post-thumb.back-img.md {
    height: 128px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.mg-posts-sec-post .mg-sec-top-post.py-3.col {
    padding:0;
}

.mg-post-thumb .post-form, 
.mg-blog-thumb .post-form,
.post-form {
    display: none;
}





header .container, 
header .container-fluid,
.mg-nav-widget-area .container,
.mg-menu-full .container {
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 1200px) {
   footer .container,
footer .container-fluid,
.footer-wrapper .container {
 padding: 0; 
}
}
footer .container,
footer .container-fluid,
.footer-wrapper .container {
    max-width: 1076px;
    margin: 0 auto;
}





.mg-menu-full .container-fluid {
    max-width: 1096px;
   margin: 0 auto;
  padding:0;
    float: none;
}


.mg-menu-full {
    background-color: #5171e1;
    width: 100%;
}



@media (min-width: 992px) {
    .col-lg-9 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667% ;
        max-width: 66.666667% ;
    }


    .col-lg-3 {
        -ms-flex: 0 0 33.333333% ;
        flex: 0 0 33.333333% ;
        max-width: 33.333333% ;
    }
}


footer .mg-footer-bottom-area .custom-logo {
    width: auto;
}

.mg-headwidget .navbar-wp .navbar-nav > li> a {
     color: #000 !important;
    border: 1px solid #bcbec0;
    margin: 3.5px 5px;
    border-radius: .375rem;
    padding: 0 15px;
    font-weight: normal;
}

.navbar-wp .navbar-nav>li>a {
        font-weight: 500;
}
.mg-headwidget .navbar-wp {
    background: #fff !important;
}


.mg-headwidget .navbar-wp .navbar-nav > li > a:focus, .mg-headwidget .navbar-wp .navbar-nav > .active > a, .mg-headwidget .navbar-wp .navbar-nav > .active > a:hover, .mg-headwidget .navbar-wp .navbar-nav > .active > a:focus {
    color: #fff !important;
  
}


.mg-headwidget .navbar-wp .navbar-nav>li>a {
    
        text-transform: none;
        font-size: 15px
}
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

.wrapper {
    background-color: #dae0e6 !important;
}

.mg-nav-widget-area-back .inner {
    padding: 6px 0;
}

@media screen and (min-width: 240px) and (max-width: 767px) {
    #content.home {
        padding: 10px 0;
    }
}

 /*  CUON LAPTOP */
.mg-menu-full .container-fluid {
    max-width: 1100px; 
    margin: 0 auto ;
    padding-left: 5px ; 
    padding-right: 5px ; 
    position: relative;
    float: none ;
    display: block ;
}


#navbar-wp .navbar-nav {
    display: flex ;
    flex-wrap: nowrap ;
    overflow-x: auto ;
    margin-left: 0 ; 
    transform: none ;
     scrollbar-width: none;
   
}

/* Ẩn thanh cuộn */
#navbar-wp .navbar-nav::-webkit-scrollbar { 
    display: none; 
}

/* 3. Nút bấm mũi tên */
.menu-btn-scroll {
    position: absolute ;
    top: 50% ;
    transform: translateY(-50%);
   padding: 0px 15px;
    height: 100%;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 7px;
        border: 1px solid #ddd;
    color: #007bff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999 ;
  
    cursor: pointer ; 
    transition: 0.3s;
}


.menu-btn-scroll:hover {
    background-color: #007bff;
    color: #fff ;
}

/* Nút trái bám theo lề khung */
.btn-l { 
    left: -10px; 
}


.btn-r { 
    right: -5px ; 
}


#navbar-wp .navbar-nav li { 
    flex: 0 0 auto; 
}
#navbar-wp .navbar-nav li.current-menu-item a, 
#navbar-wp .navbar-nav li.current-category-item a {
    background-color: #007bff;
    color: #fff ;
    border-radius: 4px;
}

 /* END CUON LAPTOP */

@media (max-width: 991.98px) {
    /* 1. XÓA BỎ DỨT ĐIỂM NÚT TOGGLER ĐANG CHẶN ĐƯỜNG */
    .navbar-toggler, 
    button.navbar-toggler {
        display: none ;
        width: 0 ;
        margin: 0 ;
        padding: 0 ;
    }
    /* 2. Ép nút Home không bị đẩy xuống */
    .mobilehomebtn {
        display: flex;
        align-items: center;
        margin: 0 10px 0 0 ; 
        flex: 0 0 auto ;
    }

    /* 3. Ép khung bao quanh menu chính dàn hàng ngang */
    #navbar-wp.collapse.navbar-collapse {
        display: block ; 
        flex: 1 1 auto ; 
        margin: 0 ;
        padding: 0 ;
        overflow: hidden;
    }

    /* 4. Ép danh sách menu con nằm ngang */
    #navbar-wp .navbar-nav {
        display: flex ;
        flex-direction: row ;
        flex-wrap: nowrap ;
        margin: 0 ;
    }

    #navbar-wp .navbar-nav li {
        width: auto ;
        flex: 0 0 auto ;
    }

    /* 5. Vị trí nút mũi tên - Ép nó nằm cố định bên phải */
    .btn-r {
        position: absolute ;
        right: 5px ;
        top: 50% ;
        transform: translateY(-50%) ;
    }
    /* Nút trái bám theo lề khung */
.btn-l { 
    left: 0 ; 
}


.btn-r { 
    right: 0 ; 
}


}

.navbar-nav .home, .navbar-nav .homebtn {
    display: none !important;
}

 /* GIAO DIEN */
 .container-fluid.home {
    max-width: 970px ;
    margin: 0 auto;
   padding:0;
}


.container-fluid {
    max-width: 970px;
  margin: 0 auto;
  padding:0;
}
 .container-fluid.home, 
#content .container {
    max-width: 970px;
    margin: 0 auto;
}
 #content {
    padding-top: 10px;
    padding-bottom: 10px;
}
 
  #content.home {
        padding: 10px 0;
    }

@media (min-width: 768px) {
    .col-md-8 {
          padding-right: 10px;
    padding-left: 10px;
    }
        .col-md-4 {
            flex: 0 0 32.133333%;
        max-width: 32.133333%;
        padding-right: 0;
    padding-left: 0;
        }
        .mg-featured-slider.p-3 .col-md-4 {
    padding-left: 15px ;
    padding-right: 0;
}
}
 .p-3 {
    padding: 10px !important;
}
 .mg-posts-sec-post {
 
        flex-direction: row-reverse;
        padding: 10px;
        border-radius: 0;
            box-shadow: none;
            border: none;
            margin-bottom: 0;
            border-bottom: 1px solid #e0dfdf;
  
    }
    
.pb-3, .py-3 {
    padding-bottom: 0 !important;
}
.pt-3, .py-3 {
    padding-top: 0 !important;
}
 .col-md-12 {
        top: 20px;
    }   
    
 .mg-blog-post-box {
    margin-bottom: 10px;
   }  
.mb-4, .my-4 {
    margin-bottom: 10px !important;
}   
a.newsup-categories.category-color-1 {
    background: none !important;
}
.mg-blog-category a {
    color: #bdbdbd !important;
}
.mg-blog-category a:hover {
    box-shadow: none;
}
.mg-blog-category a {
    text-transform: none;
}
.mg-blog-meta a {
    text-transform: none;
        font-weight: normal;
            color: #999 !important;
                letter-spacing: -0.2px;
}

@media screen and (min-width: 240px) and (max-width: 767px) {
    .col-md-4 {
        margin-bottom: 0;
    }
}

.wp-block-search .wp-block-search__label, .mg-widget .wp-block-group h2 {
    border-width: 0;
    margin: 0 0 15px 0;
        background: none !important;
    color: #000 !important;
        border-bottom: 2px solid #000;
    border-color: #000 !important;
    width: 100%;
    padding: 0;
    font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0;
}
.wp-block-search .wp-block-search__label::after, .mg-widget .wp-block-group h2::after {
    background-color: unset !important;
       
}
.wpp-widget-block-placeholder, .wpp-shortcode-placeholder {
 display: none ;
}
.mg-sidebar .mg-widget {
      padding: 10px;
          margin-bottom: 10px;
}
.mg-sidebar .mg-widget ul li {
    padding: 0;
        font-size: .875rem;
    line-height: 1.25rem;
}
.mg-sidebar .mg-widget ul li a {
    color: #333;
    font-weight: 700;
}
.mg-sidebar .mg-widget ul li a:hover, .mg-sidebar .mg-widget ul li a:focus {
    color: #333 !important;
     text-decoration: none ;
     outline: none;
}
.mg-sidebar .mg-widget ul li a:hover {
    padding-left: 0;
    transition: none;
}
/* Làm thẳng hàng danh sách bài viết phổ biến */
.wpp-list li {
    list-style-type: none !important;
    position: relative;
    padding-left: 12px !important;
    margin-bottom: 12px;
    line-height: 1.4; 
}

.wpp-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    background-color: #bcbec0;
    border-radius: 50%;
}
.mg-blog-post-box .small :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
    margin-top: 15px;
        margin-bottom: 5px;
}

/*  sticky */
html, body {
    *overflow-x: visible !important;
}



/* 2. Ép sidebar dính chặt */
sidebar-sticky {
    position: -webkit-sticky;
    position: sticky ;
    top: 0; 
    height: fit-content !important;
}
/*  end sticky */
.mg-posts-modul-6 .mg-sec-top-post .title a {
    color: #222 !important;
        outline: none;
    text-decoration: none;
}
.mg-posts-modul-6 .mg-sec-top-post .title {
      line-height: 1.5rem;
    font-size: 1.25rem;
      letter-spacing: 0;
      
}

.mg-blog-post-box .mg-header h1 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 2.25rem;
}

h3, .h3 {
    font-size: 20px;
        font-weight: 600;
}

h2, .h2 {
    font-size: 22px;
       font-weight: 600;
}
:not(.single) .mg-blog-post-box .small>p {
    margin-bottom: 10px;
}
.mg-blog-post-box .small.single {
 
    line-height: 1.5rem;
     letter-spacing: 0;
     padding: 10px;
}
.mg-blog-post-box .mg-header {
    padding: 10px;
}
.padding-20 {
    padding: 10px;
}

/* top menu */

/* 2. CHỈ hiện nền đen khi đang xem đúng trang đó */
#navbar-wp .navbar-nav li.current-menu-item a, 
#navbar-wp .navbar-nav li.current-category-item a,
#navbar-wp .navbar-nav li.active a {
    background-color: #2C2E39 !important;
    color: #fff ;
    outline: none;
    box-shadow: none;
    border-radius: .375rem;
}

/* 3. Đảm bảo màu chữ chuẩn khi nhấp vào hoặc rê chuột */
#navbar-wp .navbar-nav li a:focus, 
#navbar-wp .navbar-nav li a:active {
    color: #000 !important;
    background-color: transparent; 
    outline: none ;
}

/* Đảm bảo khi nhấp vào lần nữa ở mục đang chọn, chữ vẫn phải màu TRẮNG */
#navbar-wp .navbar-nav li.current-menu-item a:focus, 
#navbar-wp .navbar-nav li.current-category-item a:focus,
#navbar-wp .navbar-nav li.active a:focus,
#navbar-wp .navbar-nav li.current-menu-item a:active,
#navbar-wp .navbar-nav li.current-category-item a:active {
    color: #fff !important; 
    background-color: #2C2E39 !important;
}

/* Các mục bình thường (không phải mục đang chọn) khi nhấp vào thì chữ vẫn màu đen */
#navbar-wp .navbar-nav li:not(.current-menu-item):not(.current-category-item):not(.active) a:focus {
    color: #000;
    background-color: transparent;
}
/* end top menu */

/*  img DM */
/* Khung chung cho icon danh mục */
.cat-icon {
    display: inline-block;
    width: 32px;  
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 10px; 
        border-radius: 5px;
}

/* Chèn hình riêng cho từng danh mục (Thay số ID và link ảnh của bạn) */
/* Ví dụ danh mục "Đọc báo giùm bạn" có ID là 1 */
.cat-icon-55 {
    background-image: url('https://tranghay.com/trang01/content/uploads/photos/2026/02/tranghay_ce0275b17ebec762c2eda2715590c7c6.webp');
    
}

/* Ví dụ danh mục khác có ID là 2 */
.cat-icon-25 {
    background-image: url('https://tranghay.com/trang01/content/uploads/photos/2026/02/tranghay_c3c5275a3e8c1ec9e33a33075258cb51.webp');
}



/* end img DM */

.view-count {
 font-size: 11px;
    outline: none;
    position: relative;
    top: 2px;
      color: #999 ;
}
.mg-blog-meta .auth {
    margin-right: 0;
}
.mg-blog-date {
    margin-right: 0;
}
.mg-blog-meta .comments-link {
    margin-right: 0;
}

/* Ẩn phần tiêu đề trang và Breadcrumb xấu xí */
.mg-breadcrumb-section {
    display: none !important;
}
/* Xóa bỏ đoạn trích dẫn bài viết ở trang kết quả tìm kiếm */
.search-results .mg-posts-sec-post p, 
.search-results .mg-content,
.search-results article .mg-blog-post-box .mg-content {
    display: none ;
}
/* 1. Xóa cái ô vuông lỗi */
.post-views-icon.dashicons::before {
    content: "📊" !important; /* Dùng emoji biểu đồ, máy nào cũng hiện được */
    font-family: sans-serif !important;
    font-size: 14px;
    margin-right: 5px;
}
.navigation.post-navigation {
    display: none ;
}



/* Đảm bảo tiêu đề không có margin dưới quá lớn */
.mg-blog-post-box .title, 
.mg-blog-post-box h4, 
.mg-posts-sec-post .title {
    margin-bottom: 5px !important; /* Ép tiêu đề chỉ cách bên dưới 5px */
}

/* Căn chỉnh lại khối meta để luôn sát với tiêu đề */
.mg-blog-meta {
    margin-top: 5px !important;
    display: flex;
    align-items: center;
}