Child Theme được tạo từ GeneratePress

bibica.net

/*
Theme Name: bibica.net
Theme URI: https://bibica.net
Description: Child Theme được tạo từ GeneratePress
Author: bibica
Author URI: https://bibica.net
Template: generatepress
Version: 1.1
*/


/* Ẩn sidebar bên phải trên các thiết bị di động */
@media(max-width: 1024px) {
    #right-sidebar {
        display: none;
}
#primary {
        width: 100%;
        float: none;
        left: 0;
}
	.content-area {
   padding-left: 20px!important;
}
}

@media(max-width: 768px) {
    #right-sidebar {
        display: none;
}
#primary {
        width: 100%;
        float: none;
        left: 0;
}
	.content-area {
   padding-left: 0px!important;
}
}



.posted-on {
    display: inline-flex; /* Giữ các biểu tượng và ngày tháng trên cùng một dòng */
    align-items: center;  /* Căn giữa nội dung theo chiều dọc */
    font-size: 1em;     /* Kích thước văn bản */
    color: #333;          /* Màu sắc văn bản */
}

.posted-on i.fa {
    font-size: 16px;      /* Kích thước biểu tượng */
    line-height: 1;       /* Đảm bảo biểu tượng không gây ra thay đổi chiều cao */
    margin-right: 2px;    /* Khoảng cách giữa biểu tượng và ngày tháng */
}

.posted-on .modified-date {
    margin-left: 15px;    /* Tăng khoảng cách giữa ngày đăng và ngày cập nhật */
}

.posted-on i.fa + i.fa {
    margin-left: 10px;    /* Tạo khoảng cách giữa hai biểu tượng liên tiếp */
}








/* Sửa nút back to top*/
.generate-back-to-top,
.generate-back-to-top:visited {
border-radius: 20px; /* làm tròn */
line-height: 40px; /* chiều cao */
width: 40px; /* độ to */
	
}

/* Thêm read more nằm bên phải */
.read-more,
.read-more:visited {
display: block;
float: right;
margin-top: 1em;
padding: 1px 1px;
border-bottom: 2px solid rgba(44, 212, 217, 0.6);
color: #5333ed!important;
position: relative !important;
cursor: auto !important;
cursor: pointer !important;
}


/* Bo tròn và đổ bóng khung bài viết */
.inside-article {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

}

/* Thêm gạch ngang màu đỏ nhạt ở các link trong bài viết */
.entry-content a {
border-bottom: 2px solid rgba(236, 69, 72, 0.7);
}
/* Hiệu ứng khi đưa chuột vào liên kết */
.entry-content a:hover {
    border-bottom: 2px solid rgba(236, 69, 72, 0.9); /* Gạch ngang đậm khi di chuột */
}



/* Loại bỏ gạch ngang màu đỏ cho bài viết Archives (post-2270) */
.post-2270 .entry-content a {
    border-bottom: none;
}
/* Thêm hiệu ứng khi đưa chuột vào liên kết cho bài viết Archives (post-2270) */
.post-2270 .entry-content a:hover {
border-bottom: 2px solid rgba(236, 69, 72, 0.7);
}


/* Bo tròn Widget*/
.widget {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

}

/*Làm trong suốt nền phần chia trang */
.paging-navigation
{
background-color: transparent !important;
}

/*Cho phần link chia trang lên cao gần bài viết */
.nav-links {
margin-top: -1em;
}
/*Cho phần site-footer lên cao gần bài viết 
.site-footer {
margin-top: -2em;
}*/


/* Làm trong suốt nền phần box (review, toolbox ….) */
.page-header{
background-color: transparent !important;

}

.commend-post{
color: #1e72bd!important;

}
.view-post {
color: #e56a39!important;

}

.category-sticky{
border:0px solid #FFFF;
}

/* Tăng khoảng cách EnlighterJS Syntax Highlighter */
.enlighter-code {
        color: #f8f8f2;
        background-color: #f8f9fa;
        background-color: #282a36;
        padding: 10px 5px 10px 5px;
	max-width: 100%; 
	 overflow-x: auto;
}

/* Di chuyển số dòng sang trái - EnlighterJS Syntax Highlighter */
.enlighter-t-wpcustom.enlighter-linenumbers div.enlighter>div::before {
transform: translateX(-12px); /* Di chuyển sang trái 2px */
}

/* Tuỳ chỉnh lại phần code mặc định */
.entry-content code {
	    font: 15px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;

    background-color: #F8F9FA; 
    color: #BD4147; 
    padding: 2px 4px; /* Khoảng cách bên trong */
    border-radius: 3px; /* Góc bo tròn */
    font-size: 0.9em; /* Kích thước chữ */
	max-width: 100%; 
	 overflow-x: auto;
}



/* Tạo đường viền quanh các ảnh */
.wp-show-posts-image img {
	display: block;
	border-radius: 3px;
	border: 0.1px solid #b2b2be;
}

.post-image img {
	border-radius: 3px;
	border: 0.1px solid #b2b2be;
}

/* content images size */
.entry-content img {
    max-width: 768 px !important;
    height: auto;
		display: block;
	border-radius: 5px;
	
}


.featured-image img {
	border-radius: 3px;
	border: 0.1px solid #b2b2be;
}

.ns-button {
transform: translateY(0px);
}
.entry-content .ns-buttons-wrapper a {
   border-bottom: none !important; /* Loại bỏ đường viền dưới */
}



/* Điều chỉnh kích thước và khoảng cách của các tiêu đề */
aside h2 {
  font-size: 1.6em; /* Kích thước tiêu đề cấp 2 */
  margin-top: -0.5em; /* Khoảng cách phía trên giảm xuống */
  margin-bottom: 1em; /* Khoảng cách phía dưới giảm xuống */
  line-height: 1.2; /* Điều chỉnh chiều cao dòng */
}

aside h3 {
  font-size: 18px; /* Kích thước tiêu đề cấp 3 */
  margin-top: -1.0em; /* Khoảng cách phía trên giảm xuống */
  margin-bottom: 1.5em; /* Khoảng cách phía dưới giảm xuống */
  line-height: 1.5; /* Điều chỉnh chiều cao dòng */
}



/*Widget bên phải sticky*/
.inside-right-sidebar {
    position: sticky;
    top: 0;
    z-index: 99;
}

/* Bo tròn và đổ bóng khung phần comment */
.comments-area
{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* Ẩn footer */
.atk-list-footer {
display: none !important;
}

/* Ẩn link website khi comment */
input[name="link"].atk-link {
    display: none;
}

/* Bo tròn avatar */
.atk-comment>.atk-avatar img {
border-radius: 50% !important;
}
/* Tắt hiệu ứng a href khi user điền website, hạn chế spam link rác  */
.atk-avatar a {
	 pointer-events: none !important;
 cursor: default !important;
}





/* Tăng font và điều chỉnh cách xuống dòng ở textarea gõ comment */
.atk-main-editor>.atk-textarea-wrap>.atk-textarea {
font-size: 17px !important;
	word-wrap: break-word !important;
}

/* Tạo viền cho nick name gõ vào */
.atk-main-editor>.atk-header input[type=text] {
	border: 1px solid #ECEFF2 !important;
	-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* Tạo viền cho email gõ vào */
.atk-main-editor>.atk-header input[type=email] {
border: 1px solid #ECEFF2;
		-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

/* Điều chỉnh cách xuống dòng ở nội dung comment hiện ra */
.atk-content p {
word-break: break-word !important;
}

/* Điều chỉnh ảnh comment ở center */
.atk-content img {
	display: block;
  margin-left: auto;
  margin-right: auto;
	margin-top: 15px !important;
}


/* Điều chỉnh button Send comment */
.atk-main-editor>.atk-bottom .atk-send-btn {
background: #575760 !important;
font-size: 17px !important;
height: 30px !important;
width: 5em !important;
margin: auto !important;
padding: 0px !important;
}

/* Điều chỉnh màu sắc, cỡ chữ cho nick comment (Deep 1)  */
.atk-comment>.atk-main>.atk-header .atk-item.atk-nick,.atk-comment>.atk-main>.atk-header .atk-item.atk-nick a {
    font-size: 17px !important;
    color: #28334a !important;
       font-style: normal;
    font-weight: 700;
}

/* Điều chỉnh màu sắc, cỡ chữ cho nick reply comment */
.atk-comment>.atk-main>.atk-header .atk-item.atk-reply-at>.atk-nick {
 color: #28334a !important;
	font-weight: 600;
}

/* Điều chỉnh màu sắc, cỡ chữ khung Comment policy */
p.comment-policy {
    border: 1px solid #ffd499;
    background-color: #fff4e5;
    border-radius: 3px;
    padding: 10px;
    margin: 0px 0px 10px 0px;
    font-size: small;
    font-style: italic;
}

/* Điều chỉnh nút reply @nickname xuống bên trái, tránh đè lên kí tự khi gõ  */
.atk-send-reply {
float: left;
 position: sticky !important;
margin-top: 5px !important;
	margin-left: 10px !important;
}
@media only screen and (max-width: 768px) {
  .atk-send-reply {
position: absolute !important;
}
}

/* Tắt hiệu ứng a href khi user điền website, hạn chế spam link rác  */
.atk-comment>.atk-avatar img {
 pointer-events: none !important;
 cursor: default !important;
}

.atk-item.atk-nick a {
 pointer-events: none !important;
 cursor: default !important;
}


/* Gạch gang màu đỏ dưới chân link trong comment (bỏ qua hình ảnh) */
.atk-content a:not(.atk-lightbox-img)  {
    color: #28334a !important;
    border-bottom: 2px solid rgba(236, 69, 72, 0.7);
}


/* Điều chỉnh các comment từ deep 2 trở đi bằng khoảng cách lệch, tác giả support */
.atk-comment-children > .atk-comment-wrap {
    margin-left: -47px!important;
}
.atk-list-comments-wrap > .atk-comment-wrap > .atk-comment > .atk-main > .atk-comment-children {
    margin-left: 50px!important;
}


@media only screen and (max-width: 768px) {
.atk-comment-children > .atk-comment-wrap {
    margin-left: -47px!important;
}
	
.atk-list-comments-wrap > .atk-comment-wrap > .atk-comment > .atk-main > .atk-comment-children  {
    margin-left: 0px!important;
}
.atk-list-comments-wrap{
    margin-left: -30px!important;
}
}

/* Điều chỉnh phần [code] bên trong comment */
.atk-content pre {
  display: block;
  margin: 0px 0px 20px 0px !important;
}

.atk-badge-wrap {
  display: flex; /* Sử dụng Flexbox để đảm bảo các phần tử con nằm trên cùng một hàng */
  align-items: center; /* Căn giữa theo chiều dọc nếu cần */
  gap: 4px; /* Tạo khoảng cách giữa các biểu tượng, có thể thay đổi tùy ý */
}

.atk-verified-icon {
  display: inline-block; /* Đảm bảo icon được hiển thị inline */
}

.atk-pinned-badge {
  display: inline-block; /* Đảm bảo icon được hiển thị inline */
}


.related-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.related-post-item {
    width: 30%;
    margin-bottom: 20px;
    text-align: center;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

.related-post-thumbnail {
    width: 100%;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
}

.related-post-title {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.related-post-item a {
    text-decoration: none;
    color: inherit;
}

.related-post-item a:hover .related-post-title {
    color: #0073aa;
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    .related-post-item {
        width: 48%;
    }
}

@media (max-width: 480px) {
    .related-post-item {
        width: 100%;
    }
}