/*
Theme Name: Mộng Trần Các
Theme URI: https://mongtrancac.com
Author: Bạn
Author URI: https://mongtrancac.com
Description: Theme WordPress chuyên dụng cho website truyện chữ Mộng Trần Các.
Version: 1.0
Text Domain: mong-tran-cac
*/

/* Chúng ta sử dụng Tailwind CSS nên file này tạm thời chỉ dùng để khai báo thông tin Theme cho WordPress nhận diện.
Bạn có thể viết thêm CSS tùy chỉnh ở đây sau.
*/
/* Ẩn thanh cuộn cho class hide-scrollbar */
.hide-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.hide-scrollbar {
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;  /* Firefox */
}

/* Đảm bảo vùng Slider không bị nhảy khi ẩn thanh cuộn */
#topReadSlider {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* BẬT VUỐT TRƯỢT MƯỢT MÀ VÀ ẨN THANH CUỘN */
.hide-scrollbar {
    overflow-x: auto !important; /* BẮT BUỘC: Cho phép cuộn ngang */
    display: flex !important;
    white-space: nowrap;
    
    /* Hỗ trợ vuốt cực mượt, không bị khựng trên các thiết bị iOS (iPhone/iPad) */
    -webkit-overflow-scrolling: touch !important; 
    
    /* Ẩn thanh cuộn trên Firefox và IE/Edge cũ */
    -ms-overflow-style: none !important;  /* IE và Edge */
    scrollbar-width: none !important;  /* Firefox */
}

/* Ẩn thanh cuộn trên Chrome, Safari, Opera và Edge Chromium */
.hide-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

html, body {
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > main,
body > .site-main,
body > #content {
  flex: 1 0 auto;
}

body > footer,
body > .site-footer,
body > #colophon {
  flex-shrink: 0;
}
/* TOP ĐỌC NHIỀU: kẹp chuẩn 2 dòng, không bị “lòi vạch” dòng 3 */
.mtc-top-title{
  line-height: 1.25;                 /* khớp leading-tight */
  max-height: calc(1.25em * 2);      /* đúng 2 dòng */
  overflow: hidden;                  /* cắt sạch phần dư */
}

/* PC: ẩn scrollbar của TOP ĐỌC NHIỀU nhưng vẫn cuộn được */
@media (min-width: 768px){
  #topReadSlider{
    -ms-overflow-style: none;  /* IE/Edge cũ */
    scrollbar-width: none;     /* Firefox */
  }
  #topReadSlider::-webkit-scrollbar{
    display: none;             /* Chrome/Safari/Edge */
    width: 0;
    height: 0;
  }
}
@media (min-width: 768px){
  /* Ẩn scrollbar TOP slider */
  #topReadSlider{
    overflow-x: auto !important;
    overflow-y: hidden !important;

    -ms-overflow-style: none !important; /* IE/Edge cũ */
    scrollbar-width: none !important;    /* Firefox */
  }
  #topReadSlider::-webkit-scrollbar{
    width: 0 !important;
    height: 0 !important;
    display: none !important;            /* Chrome/Edge/Safari */
  }
}
@media (min-width: 768px){
  .mtc-slider-mask{
    overflow: hidden; /* che hẳn vùng scrollbar nếu browser vẫn render */
  }
}
/* ===== Shopee Support UI ===== */
#mtc-shopee-support{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  display: grid;
  gap: 10px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Sticky button */
#mtc-shopee-support .mtc-sp-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fb7185, #fda4af);
  color: #0b1220;
  font-weight: 900;
  text-decoration: none !important;
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.25);
}
#mtc-shopee-support .mtc-sp-btn-text{ font-size: 13px; }

/* Tooltip */
#mtc-shopee-support .mtc-sp-tip{
  width: min(320px, calc(100vw - 28px));
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(2,6,23,.92);
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  position: relative;
}
#mtc-shopee-support .mtc-sp-tip.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: .22s ease;
}
#mtc-shopee-support .mtc-sp-tip-close{
  position: absolute;
  top: 6px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

/* Modal */
#mtc-shopee-support .mtc-sp-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 10000;
}
#mtc-shopee-support .mtc-sp-modal-backdrop.show{
  display: flex;
}
#mtc-shopee-support .mtc-sp-modal{
  width: min(420px, 100%);
  background: #0b1220;
  color: #e5e7eb;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
#mtc-shopee-support .mtc-sp-modal h3{
  margin: 0 0 6px;
  font-size: 18px;
}
#mtc-shopee-support .mtc-sp-modal p{
  margin: 0 0 12px;
  color: #cbd5e1;
  font-size: 13.5px;
  line-height: 1.5;
}
#mtc-shopee-support .mtc-sp-modal-actions{
  display: flex;
  gap: 10px;
}
#mtc-shopee-support .mtc-sp-modal-open{
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 900;
  background: linear-gradient(135deg, #fb7185, #fda4af);
  color: #0b1220;
}
#mtc-shopee-support .mtc-sp-modal-skip{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
  font-weight: 800;
}
#mtc-shopee-support .mtc-sp-modal-check{
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  font-size: 12.5px;
  color: #cbd5e1;
}
        #noi-dung-truyen {
            transition: filter 0.3s ease;
        }
        .chuong-mo { 
            filter: blur(6px); 
            pointer-events: none; 
            user-select: none; 
        }
        
        /* Giao diện phủ đen toàn màn hình của bảng thông báo */
        #bang-ung-ho {
            display: none; 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            z-index: 9999;
            align-items: center; 
            justify-content: center;
        }
        
        /* Khung trắng chứa nội dung kêu gọi ủng hộ */
        .hop-thong-bao {
            background: #ffffff; 
            padding: 30px; 
            border-radius: 12px;
            text-align: center; 
            max-width: 450px; 
            width: 90%;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
        }
        
        .hop-thong-bao h2 { margin-top: 0; color: #e11d48; }
        .hop-thong-bao p { margin-bottom: 20px; color: #4b5563; }
        
        /* Hình ảnh ủng hộ */
        .hop-thong-bao img {
            max-width: 100%; 
            height: auto; 
            border-radius: 8px; 
            border: 2px dashed #cbd5e1;
            transition: transform 0.2s;
        }
        .hop-thong-bao img:hover {
            transform: scale(1.02);
            border-color: #3b82f6;
        }
/* ====== PHÂN TRANG THỂ LOẠI (đẹp) ====== */
.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Nút số trang + nút « » */
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #4b5563;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    transition: all .2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* Hover */
.pagination .page-numbers:hover {
    color: #fff;
    background: rgb(125, 211, 252);          /* tím */
    border-color: rgb(125, 211, 252);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgb(125, 211, 252);
}

/* Trang đang đứng */
.pagination .page-numbers.current {
    color: #fff;
    background: linear-gradient(135deg, rgb(125, 211, 252));
    border-color: transparent;
    cursor: default;
}

/* Dấu "…" */
.pagination .page-numbers.dots {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #9ca3af;
    min-width: auto;
    padding: 0 4px;
}
.pagination .page-numbers.dots:hover {
    transform: none;
    background: transparent;
    color: #9ca3af;
}

/* Nút prev/next « » to & rõ hơn */
.pagination .prev,
.pagination .next {
    font-size: 18px;
    font-weight: 700;
}

/* Ẩn chữ "Trang" mà WordPress chèn cho screen reader */
.pagination .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Responsive cho điện thoại */
@media (max-width: 480px) {
    .pagination .page-numbers {
        min-width: 38px;
        height: 38px;
        font-size: 14px;
        border-radius: 8px;
    }
}