/*

Theme Name: Madara - Child

Description:  Madara Child-Theme

Author:       Madara

Author URI:   http://demo.mangabooth.com/

Template: madara

Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready

Version: 1.0.1.1

*/
@import url("../madara/style.css");

.container {
    max-width: 1140px;
}

.text-underline {
	text-decoration: underline !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.color-007bff {
	color: #007bff !important;
}

.m-0 {
    margin: 0 !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.pb-25 {
    padding-bottom: 25px !important;
}

body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap li .chapter-release-date,
.shortcode-manga-chapters .listing-chapters_wrap > ul.main.version-chap li .chapter-release-date,
body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul > li.has-child > i.icon,
body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap .sub-chap > li:before,
body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap li.has-child a.has-child,
body.reading-manga .entry-header .c-selectpicker.selectpicker_volume,
.widget.c-popular .popular-item-wrap .popular-content .chapter-item .chapter + .vol,
.popular-slider .slider__container .slider__item .slider__content .slider__content_item .post-on,
body.page .c-page-content .c-page .c-page__content .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .post-on,
.widget.c-popular .popular-item-wrap .popular-content .chapter-item .vol + .post-on {
	display: none !important
}


body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul li ul {
	padding-left: 0
}

body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap li .wp-manga-chapter a {
	font-weight: 600
}

body.manga-page .page-content-listing.single-page .listing-chapters_wrap > ul.main.version-chap li .wp-manga-chapter a:not(:hover) {
	font-weight: 600;
	color: #333;
}

.popular-slider .slider__container .slider__item .slider__content .slider__content_item .post-title h4,
body.page .c-page-content .c-page .c-page__content .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .post-title.font-title {
	margin-bottom: 15px
}

.pb-tab-menu {
	display: inline-flex !important;
	flex-wrap: wrap;
	gap: 15px 25px;
}

.pb-tab-menu a {
	font-family: Chakra Petch, serif;
	font-size: 18px;
	font-weight: 600;
    line-height: 1.2;
    color: #333333;
}

.pb-tab-menu a.active {
	color: #c19a6b;
}

.pb-tab-content:not(:first-child) {
	display: none;
	margin-bottom: 38px;
}

.c-sidebar.c-bottom-sidebar {
	display: none !important;
}

.popular-slider {
    min-height: 70px;
}

.popular-slider.style-1 .slider__container .slick-list {
	padding: 50px 0 20px 0;
}

.popular-slider .slider__container .slider__item .slider__thumb {
	width: 100%;
	float: none;
	position: relative;
}

.popular-slider .slider__container .slider__item .slider__thumb img {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.popular-slider .slider__container .slider__item .slider__content {
	width: 100%;
	padding: 10px 0 0 0;
}

.popular-slider .chapter-item {
	display: none;
}

.popular-slider .slider__container .slider__item {
	padding-left: 3px;
	padding-right: 3px;
}

.popular-slider .slider__container .slider__item .slider__content .slider__content_item .post-title h4,
.popular-slider .slider__container .slider__item .slider__content .slider__content_item .post-title h4 a,
.page-listing-item .post-title h3,
.slider__content_item h4 {
	text-overflow: initial;
    display: block;
    -webkit-line-clamp: initial !important;
    -webkit-box-orient: initial;
    overflow: initial;
    max-height: initial;
    margin: 0;
    font-size: 14px;
}

.popular-slider .slider__container .slider__item:hover .item__wrap {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.popular-slider .slider__container .slick-list {
    margin: 0 -3px;
}

body.page .c-page-content .c-page .c-page__content .page-content-listing .page-listing-item {
    border: none;
    padding: 0;
    margin: 0;
}

.page-listing-item .row {
    margin: 0 -3px;
}

.page-listing-item .row > div {
    padding-left: 3px;
    padding-right: 3px;
}

.page-listing-item .item-thumb img {
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
}

body.page .c-page-content .c-page .c-page__content .page-content-listing .page-listing-item .page-item-detail .item-summary .rating,
body.page .c-page-content .c-page .c-page__content .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter {
    display: none;
}

body.page .c-page-content .c-page .c-page__content .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .post-title.font-title {
    margin-bottom: 0;
}

.popular-slider.style-1 .widget-heading {
    position: absolute;
    margin: 0;
    color: #333;
    background: none;
    padding: 0;
    top: 8px;
}

.popular-slider.style-1 .widget-heading:after {
    display: none;
}

.popular-slider.style-1 .widget-heading * {
    color: #333;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0 0 11px 0;
}

body.page .c-page-content .c-page .c-page__content .page-content-listing .page-listing-item .page-item-detail {
    margin-bottom: 20px;
}

.widget:not(.default):not(.background) > .c-widget-wrap {
    border: none;
    padding: 0;
}

.pb-bottom-sidebar .widget-manga-popular-slider {
    margin-bottom: 0;
}

.slider__container.slick-initialized {
    -webkit-animation: none;
    animation: none;
}

.header-genre-menu {
    border-bottom: 1px solid #ebebeb;
}

.header-genre-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 36px;
}

.header-genre-menu li a {
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    display: block;
    font-family: Chakra Petch;
    font-size: 14px;
    padding: 19px 0;
}

.popular-slider .see-more {
    position: absolute;
    top: 5px;
    right: 80px;
    color: #a5a5a5;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    z-index: 1;
}

body.manga-page .profile-manga .tab-summary .summary_image img {
    width: 100%;
    height: 278px;
    object-fit: cover
}

.pb-manga-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pb-manga-tags a {
    display: inline-block;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    text-transform: uppercase;
    padding: 6px 8px;
    font-size: 14px;
}
/* ==========================================================================
 Responsive
 ========================================================================== */
@media (max-width: 992px) and (min-width: 769px) {
    body.manga-page .profile-manga .tab-summary .summary_image img {
        height: auto;
    }
}

@media (max-width: 768px) {
    .header-genre-menu li a {
        padding: 12px 0;
    }
}

@media (max-width: 767px) {
    .sm-mt-11 {
        margin-top: 11px !important;
    }
    
    .sm-mb-11 {
        margin-bottom: 11px !important;
    }
    
    .popular-slider .slider__container {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0 -15px 15px 0;
        padding-bottom: 5px;
        overflow: -moz-scrollbars-none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .popular-slider .slider__container .slider__item {
        padding: 0;
        flex: 0 0 130px;
        max-width: 130px;
        margin-right: 8px;
    }
    
    .popular-slider .slider__container .slider__item:last-child {
        margin-right: 15px;
    }
    
    .popular-slider.style-1 .widget-heading {
        position: static;
    }
    
    .page-listing-item .row {
        margin: 0 -4px;
    }
    
    .page-listing-item .row > div {
        padding-left: 4px;
        padding-right: 4px;
    }
    
    .popular-slider .see-more {
        top: 0;
        right: 0;
    }
}

@media (max-width: 480px) {
    .header-genre-menu ul {
        gap: 20px    
    }
    
	.header-genre-menu li a {
	    padding: 6px 0;
	    font-size: 13px;
	}
}



/* Thay đổi font chữ và font weight cho tiêu đề tab Summary */
.pb-tab-menu a.active,
.pb-tab-menu a[href="#tab-summary"] {
    font-family: 'Barlow', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #000000 !important; /* Màu chữ cho header tab */
}

/* Nếu bạn muốn thay đổi tất cả các tab, không chỉ tab active */
.pb-tab-menu a {
    font-family: 'Barlow', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}



/* Chế độ sáng: văn bản màu đen */
.reading-content .text-left,
.entry-content_wrap .reading-content .text-left {
    color: #000000 !important;
    font-weight: 500 !important;
}

/* Chế độ tối: văn bản màu trắng */
body.text-ui-light .reading-content .text-left,
body.text-ui-light .entry-content_wrap .reading-content .text-left {
    color: #ffffff !important;
}


/* Tăng khoảng cách giữa các từ trong phần đọc truyện */
.reading-content .text-left,
.entry-content_wrap .reading-content .text-left,
.read-container .reading-content .text-left {
    word-spacing: 0.05em !important; /* Điều chỉnh giá trị này để tăng/giảm khoảng cách */
}

/* Áp dụng cho cả chế độ tối */
body.text-ui-light .reading-content .text-left,
body.text-ui-light .entry-content_wrap .reading-content .text-left,
body.text-ui-light .read-container .reading-content .text-left {
    word-spacing: 0.05em !important;
}



/* Màu nền cho toàn bộ trang */
body:not(.text-ui-light).reading-manga {
    background-color: #F0EBE3 !important;
}

/* Loại bỏ các đường viền hoặc box shadow có thể gây ngắt quãng */
body:not(.text-ui-light) .reading-manga .c-page-content,
body:not(.text-ui-light) .reading-manga .main-col-inner {
    box-shadow: none !important;
    border: none !important;
}



/* Thay đổi màu nền cho slider chỉ trong trang đọc truyện */
body.reading-manga:not(.text-ui-light) .slider__content,
body.reading-manga:not(.text-ui-light) .slider__container,
body.reading-manga:not(.text-ui-light) .slider__content_item {
    background-color: #F0EBE3 !important;
}

/* Đảm bảo các phần tử con trong slider cũng có cùng màu nền */
body.reading-manga:not(.text-ui-light) .slider__content .post-title,
body.reading-manga:not(.text-ui-light) .slider__content .post-on,
body.reading-manga:not(.text-ui-light) .slider__content .chapter-item {
    background-color: #F0EBE3 !important;
}

/* Loại bỏ border và shadow nếu có */
body.reading-manga:not(.text-ui-light) .slider__content,
body.reading-manga:not(.text-ui-light) .slider__content_item {
    border: none !important;
    box-shadow: none !important;
}



/* Làm trong suốt nền đen của slider trong chế độ night mode */
body.text-ui-light .slider__content,
body.text-ui-light .slider__content_item,
body.text-ui-light .related-post,
body.text-ui-light .manga-discussion,
body.text-ui-light .c-blog__heading {
    background-color: transparent !important;
}

/* Giữ lại màu văn bản */
body.text-ui-light .slider__content .post-title h4 a,
body.text-ui-light .manga-title-badges,
body.text-ui-light .c-blog__heading {
    color: inherit !important;
}

/* Để đảm bảo rằng các container cha cũng trong suốt */
body.text-ui-light .related-reading-wrap,
body.text-ui-light .popular-slider .slider__container,
body.text-ui-light .manga-slider {
    background-color: transparent !important;
}

/* Xóa bỏ các đường viền và box-shadow có thể tồn tại */
body.text-ui-light .slider__content,
body.text-ui-light .slider__content_item {
    border: none !important;
    box-shadow: none !important;
}

/* Đối với các phần tử con cụ thể */
body.text-ui-light .popular-slider .slider__container .slider__item .item__wrap,
body.text-ui-light .c-blog__heading.style-2 {
    background-color: transparent !important;
}



/* Thêm CSS vào file style.css của theme hoặc sử dụng mục Custom CSS trong WordPress Customizer */

/* Tạo class mới cho phần chú thích */
.cookie-note {
    font-size: 85%; /* Kích thước chữ nhỏ hơn */
    color: #777; /* Màu chữ nhạt hơn */
    display: block; /* Đảm bảo xuống dòng */
    margin-top: 5px; /* Khoảng cách với dòng chữ phía trên */
    line-height: 1.3; /* Chiều cao dòng phù hợp */
    font-style: italic; /* Kiểu chữ nghiêng cho chú thích */
}



# CSS khắc phục lỗi slider - Phiên bản chính xác

Thêm CSS này vào **cuối file style.css** của child theme:

```css
/* ===== SỬA LỖI KHOẢNG TRẮNG TRONG LIGHT THEME ===== */

/* Loại bỏ background trắng khó chịu trong light theme */
body:not(.text-ui-light) .popular-slider .slider__container .slider__item .item__wrap {
    background-color: transparent !important;
    background: transparent !important;
}

/* Đảm bảo không có background cho các container khác */
body:not(.text-ui-light) .popular-slider .slider__container,
body:not(.text-ui-light) .popular-slider .widget-manga-popular-slider,
body:not(.text-ui-light) .pb-bottom-sidebar .widget-manga-popular-slider {
    background: transparent !important;
}

/* ===== CHUẨN HÓA KÍCH THƯỚC ẢNH THUMBNAIL ===== */

/* Thiết lập chiều cao cố định cho container ảnh - override CSS hiện tại */
.popular-slider .slider__container .slider__item .slider__thumb {
    width: 100% !important;
    height: 220px !important; /* Chiều cao cố định */
    float: none !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Đảm bảo ảnh bên trong điền đầy container */
.popular-slider .slider__container .slider__item .slider__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Cắt ảnh để giữ tỷ lệ */
    object-position: center top !important; /* Ưu tiên hiển thị phần trên */
    display: block !important;
    border-radius: 4px !important;
}

/* Đảm bảo container ảnh wrapper cũng đúng kích thước */
.popular-slider .slider__container .slider__item .slider__thumb .slider__thumb_item,
.popular-slider .slider__container .slider__item .slider__thumb .c-image-hover {
    height: 100% !important;
    position: relative !important;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 768px) {
    .popular-slider .slider__container .slider__item .slider__thumb {
        height: 200px !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .popular-slider .slider__container .slider__item .slider__thumb {
        height: 180px !important;
    }
}

/* ===== ĐẢM BẢO DARK THEME VẪN HOẠT ĐỘNG TỐT ===== */

/* Giữ dark theme trong suốt như cũ */
body.text-ui-light .popular-slider .slider__container .slider__item .item__wrap {
    background-color: transparent !important;
}

/* ===== LOẠI BỎ HIỆU ỨNG HOVER KHÔNG MONG MUỐN ===== */

/* Loại bỏ box-shadow hover đã được disable */
.popular-slider .slider__container .slider__item:hover .item__wrap {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/* ===== CẢI THIỆN HIỂN THỊ TỔNG THỂ ===== */

/* Đảm bảo slider-overlay (nếu có) cũng đúng kích thước */
.popular-slider .slider__container .slider__item .slider__thumb .slider-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border-radius: 4px !important;
}

/* Smooth transition cho ảnh */
.popular-slider .slider__container .slider__item .slider__thumb img {
    transition: transform 0.3s ease !important;
}

/* Hiệu ứng zoom nhẹ khi hover */
.popular-slider .slider__container .slider__item:hover .slider__thumb img {
    transform: scale(1.02) !important;
}
```

## Giải thích cụ thể:

### Vấn đề 1: Khoảng trắng trong light theme
- **Nguyên nhân**: CSS gốc có `.item__wrap { background-color: #FFFFFF; }`
- **Giải pháp**: Override thành `transparent` cho light theme bằng selector `body:not(.text-ui-light)`

### Vấn đề 2: Kích thước ảnh không đều
- **Nguyên nhân**: Ảnh manga có tỷ lệ khác nhau (dài, ngắn, vuông)
- **Giải pháp**: 
  - Thiết lập `height: 220px` cố định
  - Sử dụng `object-fit: cover` để cắt ảnh giữ tỷ lệ
  - `object-position: center top` ưu tiên hiển thị phần trên

### Tại sao dùng `!important`:
- CSS gốc của theme có độ ưu tiên cao
- Child theme cần ghi đè mạnh mẽ
- Đảm bảo CSS hoạt động chắc chắn

### Kích thước chiều cao:
- **Desktop**: 220px (vừa đủ hiển thị chi tiết)
- **Tablet**: 200px (tiết kiệm không gian)
- **Mobile**: 180px (phù hợp màn hình nhỏ)

## Cách áp dụng:
1. Mở file `style.css` trong thư mục child theme
2. Cuộn xuống cuối file
3. Dán toàn bộ CSS trên
4. Lưu file và refresh trang web
5. Kiểm tra cả light theme và dark theme