/**handles:kenit-style**/
@media
 (max-width: 767px) {
  .related-videos,
  .newest-videos,
  .cats-video {
    background-color: #1c1c1c !important;
    border-color: #333 !important;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
    padding: 15px;
    position: static !important; /* Ngăn di chuyển hoặc sticky /
    margin-right: 0 !important; / Sửa margin-right về 0 trên mobile */
  }
}

/*
 * Tách nội dung chính ra 170px ở hai bên cho màn hình lớn
 */
@media (min-width:100%) {
    .site-main > .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}
/* ==================================================
  CSS LÀM GỌN MENU VÀ PHÂN TRANG
  Dành cho theme YoloTube
================================================== 
*/

/* === 1. LÀM GỌN MENU CHÍNH === */

/* Sử dụng Flexbox để căn chỉnh menu tự động và đều nhau */
.main-nav ul {
    display: flex;
    justify-content: center; /* Căn giữa toàn bộ menu */
    align-items: center;
    width: 100%;
}

/* Bỏ float và cho mỗi mục menu có khoảng cách đều */
.main-nav li {
    float: none; 
    margin: 0 px; /* Tạo khoảng cách giữa các mục menu */
}

/* Bo tròn góc và tạo hiệu ứng chuyển động mượt mà */
.main-nav li a {
    border-radius: 5px; /* Bo tròn các góc */
    padding: 15px 5px; /* Tăng khoảng đệm cho dễ bấm */
    line-height: normal;
    font-weight: 500; /* Làm chữ đậm hơn một chút */
    font-family: 'Roboto', sans-serif;
    transition: all 0.25s ease-in-out; /* Hiệu ứng chuyển động mượt */
}

/* Giữ nguyên màu nền khi rê chuột hoặc khi đang ở trang hiện tại */
.main-nav li.active > a,
.main-nav li:hover > a,
.main-nav li.current-menu-item > a {
    background-color: #e73737;
    transform: translateY(-2px); /* Hiệu ứng nhô lên khi rê chuột */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}


/* === 2. LÀM GỌN PHÂN TRANG (PAGINATION) === */

/* Sử dụng Flexbox để căn giữa và tạo khoảng cách cho các nút */
.pagination-site {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

/* Bỏ margin mặc định của thẻ ul */
.pagination-site ul.page-numbers {
    padding: 0;
    margin: 0;
    display: flex; /* Dùng flex cho các nút bên trong */
    gap: 3px; /* Tạo khoảng cách 8px giữa các nút */
}

.pagination-site li {
    display: inline; /* Bỏ display mặc định */
    margin: 0;
}

/* Đồng bộ style cho các nút bấm và nút trang hiện tại */
.pagination-site a,
.pagination-site .current {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 32px; /* Chiều rộng tối thiểu */
    height: 32px;    /* Chiều cao */
    padding: 5px 10px;
    border-radius: 15px; /* Bo tròn góc */
    font-weight: bold;
    font-size: 13px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Style khi rê chuột vào nút */
.pagination-site a:hover {
    background: #ff5c5c;
    border-color: #ff5c5c;
    color: #fff;
    transform: translateY(-2px);
}

/* Style cho nút trang hiện tại */
.pagination-site .current {
    background: #e73737;
    border: 1px solid #e73737;
    color: #fff;
    cursor: default;
}