/*
Theme Name: Vũ Trần Chí Portfolio
Theme URI: https://vutranchi.com
Author: Vũ Trần Chí
Author URI: https://vutranchi.com
Description: A personal portfolio and blog theme for Vũ Trần Chí.
Version: 1.0
Text Domain: vutranchi-theme
*/

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.hidden {
    display: none;
}

.visible {
    display: block;
}

.main-tab-button {
    transition: all 0.3s ease;
    position: relative;
}

.main-tab-button.active {
    color: white;
    background-color: #F97316;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   STYLE ĐỒNG BỘ CHO CÁC NÚT TAB/FILTER (ĐÃ SỬA LỖI)
   ========================================================================== */

/* --- Định dạng chung cho cả 2 loại nút --- */
.sub-tab-button,
.filter-btn {
    /* Layout & Box Model */
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;

    /* Typography */
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;

    /* Colors & Effects */
    background-color: #E5E7EB;
    color: #374151;
    transition: all 0.2s ease-in-out;
}

/* Hover state cho các nút không active */
.sub-tab-button:not(.active):hover,
.filter-btn:not(.active):hover {
    background-color: #D1D5DB;
    color: #1F2937;
}

/* --- Định dạng cho trạng thái ACTIVE (ĐÃ SỬA LỖI) --- */
.sub-tab-button.active,
.filter-btn.active {
    background-color: #1D4ED8;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    font-weight: 600;
}

/* Responsive font size, đồng bộ với Submenu Walker */
@media (min-width: 768px) {
    .sub-tab-button,
    .filter-btn {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.archive-description-content {
    max-height: 150px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease-in-out;
}

.archive-description-content.expanded {
    max-height: 1000px; /* Một giá trị đủ lớn để chứa toàn bộ nội dung */
}

.archive-description-content.has-fade:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, transparent, white);
    pointer-events: none;
}
/* --- CSS ĐỊNH DẠNG RANK MATH BREADCRUMBS --- */

nav.rank-math-breadcrumb {
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    font-size: 0.9rem; /* Chỉnh kích thước chữ nhỏ hơn một chút */
    color: #6B7280;   /* Màu chữ xám nhạt */
}

.rank-math-breadcrumb a {
    color: #374151; /* text-dark */
    text-decoration: none;
    transition: color 0.3s ease;
}

.rank-math-breadcrumb a:hover {
    color: #064E3B; /* primary-dark */
    text-decoration: underline;
}

.rank-math-breadcrumb .separator {
    margin: 0 0.5em; /* Khoảng cách hai bên dấu phân cách */
}
/* --- Tùy chỉnh CSS cho định dạng mô tả Category --- */

/* Định dạng chung cho các đoạn văn */
.archive-description-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Định dạng cho danh sách không có thứ tự (dấu chấm) */
.archive-description-content ul {
    list-style-type: disc; /* Kiểu dấu chấm tròn */
    padding-left: 1.5rem;  /* Thụt lề trái cho danh sách */
    margin-bottom: 1rem;
}

/* Định dạng cho từng mục trong danh sách */
.archive-description-content li {
    margin-bottom: 0.5rem; /* Khoảng cách giữa các mục */
}

/* Cải thiện hiển thị cho danh sách lồng nhau và tùy chỉnh dấu đầu dòng */
.archive-description-content ul,
.archive-description-content ol {
    margin: 0 0 1rem 0; /* Loại bỏ margin mặc định ở trên, giữ margin dưới */
    padding-left: 1.5rem; /* Thụt lề cho desktop */
}

.archive-description-content ul ul,
.archive-description-content ul ol,
.archive-description-content ol ul,
.archive-description-content ol ol {
    margin-top: 0.25rem; /* Khoảng cách nhỏ cho nested lists */
    margin-bottom: 0.5rem;
    padding-left: 1rem; /* Thụt thêm cho mức lồng nhau */
}

/* Dùng custom bullet để đảm bảo tương thích và dễ tùy chỉnh */
.archive-description-content li {
    position: relative;
    padding-left: 0.9rem; /* Khoảng cách giữa bullet và nội dung */
}

.archive-description-content li::marker {
    color: #374151; /* Màu dấu chấm tương đồng với đoạn text */
}

/* Nếu trình duyệt không hỗ trợ ::marker, fallback sẽ được xử lý bởi các pseudo-element cụ thể bên dưới */

/* Thêm symbol (decorative) trước mỗi li cho .archive-description-content và .prose */
/* Sử dụng pseudo-element để dễ tuỳ chỉnh màu/kích thước và fallback an toàn */
.archive-description-content ul,
.archive-description-content ol,
.prose ul,
.prose ol {
    list-style: none; /* Tắt marker mặc định */
}

.archive-description-content li,
.prose li {
    position: relative; /* Để ::before căn đúng */
    padding-left: 1.6rem; /* Chừa không gian cho symbol */
}

/* Top-level lists: triangle bullet (pointing right) */
.archive-description-content > ul > li::before,
.archive-description-content > ol > li::before,
.prose > ul > li::before,
.prose > ol > li::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 0.5em;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #F97316; /* right-pointing triangle */
}

/* Symbol cho danh sách lồng nhau: đổi kiểu và màu để phân biệt cấp */
.archive-description-content ul ul > li::before,
.prose ul ul > li::before,
.archive-description-content ol ol > li::before,
.prose ol ol > li::before {
    /* Nested level 2: square */
    content: '';
    position: absolute;
    left: 0.9rem;
    top: 0.55em;
    width: 8px;
    height: 8px;
    background-color: #1D4ED8;
    border-radius: 2px;
}

/* Cấp sâu hơn nữa (3+) */
.archive-description-content ul ul ul > li::before,
.prose ul ul ul > li::before {
    /* Level 3+: smaller square */
    content: '';
    position: absolute;
    left: 1.4rem;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background-color: #064E3B;
    border-radius: 2px;
}

/* Điều chỉnh cho mobile: giảm kích thước và khoảng cách */
@media (max-width: 767px) {
    .archive-description-content li,
    .prose li {
        padding-left: 1.7rem; /* đủ chừa chỗ cho tam giác */
    }
    /* Mobile: top-level triangle slightly nhỏ hơn */
    .archive-description-content > ul > li::before,
    .archive-description-content > ol > li::before,
    .prose > ul > li::before,
    .prose > ol > li::before {
        left: 0.4rem;
        border-top-width: 5px;
        border-bottom-width: 5px;
        border-left-width: 8px;
    }
    /* Mobile: nested squares position */
    .archive-description-content ul ul > li::before,
    .prose ul ul > li::before {
        left: 0.2rem;
        width: 7px;
        height: 7px;
    }
}


/* Định dạng cho chữ in đậm */
.archive-description-content strong {
    font-weight: 700; /* Độ đậm của chữ */
    color: #064E3B;   /* Sử dụng màu 'primary-dark' của bạn cho nổi bật */
}

/* Định dạng cho chữ in nghiêng */
.archive-description-content em {
    font-style: italic;
}


/* --- CSS HOÀN CHỈNH CHO NỘI DUNG BÀI VIẾT --- */
/*
 * Luận giải thiết kế:
 * Dựa trên Thần số học (Số chủ đạo 3: Sáng tạo, Giao tiếp)
 * và Phong thủy (Luồng khí, Cân bằng Ngũ hành).
 * ---
 * - Mộc (Tiêu đề): #064E3B
 * - Hỏa (Liên kết, Nhấn mạnh): #F97316
 * - Thủy (Trí tuệ, Trích dẫn): #1D4ED8
 * - Thổ (Nền tảng, Code): #374151, #E5E7EB
*/

/* Lớp .prose sẽ bao bọc toàn bộ nội dung bài viết trong single.php */
.prose {
    color: #374151; /* MÀU THỔ - Tạo sự ổn định, dễ đọc */
    font-size: 1.125rem; /* 18px */
    line-height: 1.8; /* Tạo luồng khí (Chi Flow) tốt hơn */
}

/* Tiêu đề - Yếu tố MỘC, thể hiện sự tăng trưởng kiến thức */
.prose h2,
.prose h3,
.prose h4 {
    color: #064E3B; /* primary-dark */
    font-weight: 700;
    margin-top: 1.8em; /* Tăng không gian phía trên, tạo sự thoáng đãng */
    margin-bottom: 1em;
}

.prose h2 { font-size: 1.8rem; }
.prose h3 { font-size: 1.5rem; }
.prose h4 { font-size: 1.25rem; }

/* Liên kết - Yếu tố HỎA, năng lượng sáng tạo của số 3 */
.prose a {
    color: #F97316; /* accent */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}
.prose a:hover {
    border-bottom-color: #F97316;
}

/* Danh sách - Tạo cấu trúc cân bằng, rõ ràng */
.prose ul,
.prose ol {
    padding-left: 1.5em;
    margin-bottom: 1.5em;
}


/* Cải thiện nested lists trong .prose */
.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
    padding-left: 1.2em;
    margin-top: 0.5em;
    margin-bottom: 0.75em;
}

/* Make bullets slightly darker for contrast and ensure spacing on mobile */
.prose li::marker {
    color: #1F2937; /* dark text */
}

@media (max-width: 767px) {
    .archive-description-content ul,
    .archive-description-content ol,
    .prose ul,
    .prose ol {
        padding-left: 1rem; /* Giảm thụt lề trên mobile để tận dụng không gian */
    }

    .archive-description-content li::before {
        top: 0.6em; /* Điều chỉnh vị trí bullet trên mobile */
    }
}

/* Trích dẫn (Blockquote) - Tôn vinh khả năng truyền cảm hứng của số 3 */
.prose blockquote {
    margin: 2.5em 0;
    padding: 0;
    border: none;
    text-align: center; /* Đưa trích dẫn vào giữa, tạo sự tập trung */
}

.prose blockquote p {
    font-size: 1.5rem; /* Phóng to chữ trích dẫn */
    font-style: italic;
    font-weight: 600;
    color: #064E3B; /* Màu xanh Mộc cho sự uyên thâm */
    line-height: 1.6;
    margin: 0;
}

.prose blockquote p::before,
.prose blockquote p::after {
    content: '"'; /* Thêm dấu nháy kép trang trí */
    font-size: 3rem;
    color: #F97316; /* Màu Hỏa cho sự nổi bật, lan tỏa */
    opacity: 0.8;
    line-height: 0;
    position: relative;
}

.prose blockquote p::before {
    top: 0.2em;
    margin-right: 0.1em;
}

.prose blockquote p::after {
    bottom: -0.2em;
    margin-left: 0.1em;
}


/* Khối mã code - Yếu tố THỔ, sự vững chắc, logic */
.prose pre {
    background-color: #E5E7EB; /* card-bg */
    border: 1px solid #D1D5DB;
    border-radius: 8px; /* Bo góc mềm mại, giảm sát khí */
    padding: 1.5em;
    white-space: pre-wrap;
    font-size: 0.9rem;
    color: #1F2937; /* bg-dark */
}
.prose code {
    font-family: 'Courier New', Courier, monospace;
}
.prose p > code, .prose li > code { /* Mã code inline */
    background-color: #E5E7EB;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Hình ảnh - Cân bằng và hài hòa */
.prose figure {
    margin: 2.5em 0;
}
.prose figcaption {
    text-align: center;
    font-style: italic;
    font-size: 0.9rem;
    color: #6B7280;
    margin-top: 0.75em;
}

/* Đường kẻ ngang - Phân chia không gian rõ ràng */
.prose hr {
    border: 0;
    height: 1px;
    background-color: #E5E7EB;
    margin: 3em 0;
}

/* --- CSS ĐỊNH DẠNG BẢNG (TABLE) - PHIÊN BẢN CẢI TIẾN --- */

.prose table {
    width: 100%;
    border-collapse: collapse; /* Gộp các đường viền lại */
    margin: 2.5em 0;
    font-size: 1rem;
    border: 1px solid #D1D5DB; /* Thêm đường viền bao ngoài */
}

/* Định dạng cho tiêu đề của bảng */
.prose th {
    background-color: #F3F4F6; /* Màu nền xám đậm hơn một chút */
    border: 1px solid #D1D5DB; /* Đường viền cho các ô */
    padding: 12px 15px;
    text-align: left;
    font-weight: 700; /* In đậm hơn */
    color: #1F2937;
    text-transform: uppercase; /* Viết hoa tiêu đề */
    letter-spacing: 0.05em;
}

/* Định dạng cho các ô trong bảng */
.prose td {
    padding: 12px 15px;
    border: 1px solid #D1D5DB; /* Đường viền cho các ô */
    vertical-align: top; /* Căn nội dung lên trên */
}

/* Tạo hiệu ứng màu xen kẽ cho các dòng */
.prose tbody tr:nth-of-type(even) {
    background-color: #F9FAFB;
}

/* Giúp bảng có thể cuộn ngang trên mobile */
@media (max-width: 767px) {
    .prose table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* --- TÙY CHỈNH CHO GIAO DIỆN MOBILE --- */

@media (max-width: 767px) {
    /* 1. Giữ menu cố định (sticky) trên cùng khi cuộn */
    nav.grid {
        position: -webkit-sticky; /* Dành cho Safari */
        position: sticky;
        top: 0;
        z-index: 1000; /* Đảm bảo menu luôn nằm trên cùng */
    }

    /* 2. Giảm khoảng trống (padding) 2 bên của vùng nội dung chính */
    .p-6.md\:p-8 {
        padding-left: 1rem;  /* Tương đương px-4 của Tailwind */
        padding-right: 1rem; /* Tương đương px-4 của Tailwind */
    }
}

/* --- MẶC ĐỊNH CANH GIỮA CHO HÌNH ẢNH --- */

/* Canh giữa các khối hình ảnh được WordPress tạo ra */
.aligncenter,
.wp-block-image .aligncenter {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}

/* Đảm bảo thẻ figure cũng được canh giữa */
.prose figure.aligncenter,
.prose .wp-block-image {
    max-width: 100%; /* Sửa lại để đảm bảo figure không tràn */
    margin-left: auto;
    margin-right: auto;
}

/* === PHẦN ĐÃ ĐƯỢC CẬP NHẬT ĐỂ XỬ LÝ WP-CAPTION === */
.prose img {
    max-width: 100%; 
    height: auto;    
    display: block;  
    margin-left: auto; /* Canh giữa ảnh bên trong figure/div */
    margin-right: auto;
    border-radius: 0.5rem; 
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* QUAN TRỌNG: Quy tắc mới để "ép" các div có chú thích phải responsive */
.prose .wp-caption {
    max-width: 100% !important; /* Dùng !important để ghi đè style nội tuyến của WordPress */
    height: auto;
}

/* Đảm bảo ảnh bên trong caption cũng co giãn theo */
.prose .wp-caption img {
    width: 100%;
}

/* Định dạng cho phần chú thích (caption text) */
.prose .wp-caption-text {
    font-size: 0.9em;
    font-style: italic;
    color: #6B7280;
    margin-top: 0.5em;
    text-align: center;
}


/* --- CSS CHO HIỆU ỨNG LẬT ẢNH SIDEBAR --- */

/* Vùng chứa để tạo không gian 3D */
.flipper-container {
    perspective: 1000px;
}

/* Thẻ lật chính, giữ trạng thái 3D */
.flipper {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Hiệu ứng chuyển động nảy */
}

/* 1. Luôn lật khi có class .is-flipped (dành cho sự kiện click/tap) */
.flipper.is-flipped {
    transform: rotateY(180deg);
}

/* 2. Chỉ lật khi hover TRÊN CÁC THIẾT BỊ CÓ CHUỘT (PC) */
@media (hover: hover) {
    .flipper-container:hover .flipper {
        transform: rotateY(180deg);
    }
}

/* Định dạng chung cho 2 mặt ảnh */
.flipper-front,
.flipper-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Ẩn mặt sau khi nó không được đối diện */
    border-radius: 8px; /* Bo góc cho mềm mại */
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* Mặt sau ban đầu sẽ được lật sẵn */
.flipper-back {
    transform: rotateY(180deg);
}

.prose a.cta-button {
    color: white !important; /* Đảm bảo chữ luôn màu trắng */
    border-bottom: none; /* Bỏ gạch chân mặc định của link */
}
.prose a.cta-button:hover {
    border-bottom: none;
}
/* --- TÙY CHỈNH HIỆU ỨNG SO LE CHO NĂNG LỰC CỐT LÕI --- */
@media (min-width: 768px) { /* Chỉ áp dụng cho màn hình từ tablet trở lên */
    .nang-luc-so-le {
        margin-top: -190px; /* Kéo 2 khối bên cạnh lên trên. Bạn có thể thay đổi số 80 thành giá trị khác để có độ cao ưng ý. */
    }
}

/* ==========================================================================
   HỆ THỐNG MENU MỚI (VIẾT LẠI TỪ ĐẦU)
   ========================================================================== */

/* --- Cấu trúc chung --- */
.primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.primary-menu a {
    text-decoration: none;
    display: block;
    transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   DESKTOP MENU (Màn hình > 767px)
   ========================================================================== */
@media (min-width: 768px) {
    /* Menu chính dàn hàng ngang */
    .primary-menu {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 100%;
    }
    .primary-menu > li {
        flex: 1;
        text-align: center;
        position: relative; /* Cần cho việc định vị menu con */
        display: flex; /* Giúp căn giữa link theo chiều dọc */
        align-items: center;
        justify-content: center;
    }
    .primary-menu > li > a {
        color: white;
        padding: 1rem;
        width: 100%;
    }
    /* Gây chú ý khi hover */
    .primary-menu > li:not(.current-menu-item):not(.current-menu-parent):hover > a {
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* Menu con (submenu) */
    .primary-menu .sub-menu {
        background-color: #ffffff;
        border-radius: 0.375rem;
        box-shadow: 0 4px 12px rgba(0,0,0,.15);
        list-style: none;
        padding: 0.5rem 0;
        margin: 0;
        min-width: 220px;
        position: absolute;
        top: 100%; /* Hiển thị ngay bên dưới mục cha */
        left: 0;
        z-index: 1000;
        
        /* Mặc định ẩn đi */
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.2s, transform 0.2s;
    }
    /* Khi hover vào mục cha, hiện menu con */
    .primary-menu > li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .primary-menu .sub-menu li {
        text-align: left;
    }
    .primary-menu .sub-menu a {
        color: #374151; /* text-dark */
        padding: 0.6rem 1.5rem;
        white-space: nowrap;
    }
    .primary-menu .sub-menu a:hover {
        background-color: #D1FAE5; /* primary-light */
        color: #064E3B; /* primary-dark */
    }

    /* Thêm mũi tên nhỏ cho mục có menu con */
    .primary-menu .menu-item-has-children > a::after {
        content: '▾';
        font-size: 0.8em;
        margin-left: 0.5rem;
    }
}

/* ==========================================================================
   MOBILE MENU (Màn hình <= 767px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Container của menu trên mobile */
    #primary-menu-container {
        display: none; /* Mặc định ẩn, JS sẽ điều khiển */
        position: absolute;
        top: 100%; /* Ngay dưới navbar */
        left: 0;
        right: 0;
        background-color: #1F2937; /* bg-dark, màu đậm hơn */
        z-index: 2000;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .primary-menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .primary-menu a {
        padding: 1rem 1.5rem;
        color: white;
    }
    .primary-menu .menu-item-has-children > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Menu con trên mobile */
    .primary-menu .sub-menu {
        display: none; /* Ẩn sẵn để JS xổ ra */
        background-color: rgba(0,0,0,0.2);
    }
    .primary-menu .sub-menu a {
        padding-left: 2.5rem; /* Thụt lề cho menu con */
    }

    /* Mũi tên để xổ menu con */
    .submenu-arrow {
        width: 0.6rem;
        height: 0.6rem;
        border-right: 2px solid white;
        border-bottom: 2px solid white;
        transform: rotate(45deg);
        transition: transform 0.3s;
    }
    /* Xoay mũi tên khi menu con mở */
    .submenu-open .submenu-arrow {
        transform: rotate(225deg);
        margin-top: -5px; /* Căn chỉnh lại vị trí khi xoay */
    }
}

/* --- Style cho các mục menu đang được chọn (Active) --- */
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-parent > a {
    background-color: #F97316; /* accent */
}
.primary-menu .sub-menu .current-menu-item > a {
    background-color: #1D4ED8; /* secondary-dark */
    color: white !important;
}

/* ==========================================================================
   STYLING CHO HỆ THỐNG PHÂN TRANG
   ========================================================================== */

/* Container bao ngoài để căn giữa */
.pagination-container .navigation.pagination {
    text-align: center;
}

.pagination .nav-links {
    display: inline-flex;
    gap: 0.5rem; /* Khoảng cách giữa các nút */
    align-items: center;
    border-radius: 0.5rem; /* Bo góc cho cả cụm */
    padding: 0.5rem;
    border: 1px solid #E5E7EB; /* card-bg */
    background-color: #F9FAFB;
}

/* Style chung cho các nút bấm (số trang) */
.page-numbers {
    display: inline-block;
    padding: 0.5rem 1rem;
    min-width: 40px;
    text-align: center;
    border-radius: 0.375rem; /* rounded-md */
    text-decoration: none;
    font-weight: 500;
    color: #374151; /* text-dark */
    background-color: white;
    transition: all 0.2s ease-in-out;
    border: 1px solid #D1D5DB;
}

/* Hiệu ứng khi rê chuột vào nút */
.page-numbers:not(.current):hover {
    background-color: #D1FAE5; /* primary-light */
    color: #064E3B; /* primary-dark */
    border-color: #A7F3D0;
}

/* --- ĐÁNH DẤU TRANG ĐANG ĐƯỢC CHỌN --- */
.page-numbers.current {
    background-color: #1D4ED8; /* secondary-dark (Thủy) */
    color: white;
    border-color: #1D4ED8;
    cursor: default;
}

/* Dấu ba chấm "..." */
.page-numbers.dots {
    background-color: transparent;
    border: none;
    padding: 0.5rem 0.25rem;
}
/* Sửa lỗi CSS cho mục lục Easy Table of Contents */
#ez-toc-container ul li::before {
    content: none !important;
    border: none !important;
    background: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Tùy chọn: Căn chỉnh lại khoảng cách nếu cần */
#ez-toc-container ul li {
    padding-left: 0 !important;
}