.custom-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    border-left: 5px solid var(--primary-color);
    padding-left: 15px;
}


/* ================================================= */
/* 4. COMIC CARD STYLE */
/* ================================================= */

.comic-card {
    border: 1px solid var(--border-color);
    background-color: var(--surface-color);
    box-shadow: 0 4px 8px var(--shadow-color);
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
    /* ✨ QUAN TRỌNG: Thiết lập điểm tham chiếu cho badge tuyệt đối */
    position: relative;
}

.comic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px var(--shadow-color);
}

.comic-img {
    width: 100%;
    aspect-ratio: 2 / 3;
    height: auto;
    object-fit: cover;
}

/* Đảm bảo chữ trong card hiển thị rõ ràng */
.comic-card .card-title {
    font-size: 15px;
}

/* --- ✨ BỔ SUNG: STYLE CHO BADGE ĐÈ LÊN ẢNH (Image Overlays) --- */

.comic-badge-overlay {
    position: absolute;
    bottom: 0;
    /* Đặt ở dưới cùng */
    left: 0;
    /* Đặt ở bên trái */
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    /* Dùng màu đen mờ làm nền mặc định */
    background-color: rgba(0, 0, 0, 0.7);
    border-top-right-radius: 4px;
    /* Bo góc phải phía trên */
    z-index: 10;
    /* Đảm bảo nó luôn nằm trên ảnh */
    text-transform: uppercase;
    line-height: 1;
}

/* Biến thể màu cho trạng thái cụ thể */
.comic-badge-overlay.is-full {
    background-color: var(--secondary-color);
    /* Màu xanh dương đậm (Full) */
}

.comic-badge-overlay.is-hot {
    background-color: #dc3545;
    /* Màu đỏ (Hot) */
}

.comic-badge-overlay.is-new {
    background-color: #ffc107;
    /* Màu vàng cam (New) */
}

.comic-card-body {
    position: absolute;
    top: 80%;
    background: rgba(0, 0, 0, 0.6);
    /* Nền đen mờ */
    width: 100%;
    color: #fff;
    /* Chữ trắng */
}

/* ================================================= */
/* 5. TABLE & UTILITY STYLE */
/* ================================================= */

.custom-table {
    background-color: var(--surface-color);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.custom-table thead {
    background-color: var(--background-color);
}

.custom-table th,
.custom-table td {
    border-color: var(--border-color);
}

.custom-table tr:hover {
    background-color: var(--background-color);
}

/* Ảnh thu nhỏ trong bảng (Ảnh trong danh sách cập nhật) */
.comic-list-thumb img {
    width: 50px;
    height: 70px;
    object-fit: cover;
    border: 1px solid var(--border-color);
}

/* Điều chỉnh badge NEW/HOT/FULL (trong bảng hoặc tiêu đề) */
.badge {
    font-size: 0.75em;
    padding: 0.3em 0.6em;
    border-radius: 4px;
    font-weight: 600;
    margin-left: 5px;
}

.text-bg-primary {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* --- BỔ SUNG: BADGE HOT (MÀU ĐỎ/CAM) --- */
.text-bg-hot {
    /* Màu đỏ nóng (Bootstrap Danger) */
    background-color: #dc3545 !important;
    color: #fff !important;
}

/* ================================================= */
/* 6. STYLE PHẦN LỌC TRUYỆN (FILTER UI) */
/* ================================================= */

/* Nút Lọc Chính: Tinh chỉnh lại để trông giống một nút chọn (Select) hơn */
.filter-main-button {
    background-color: #f3f4f6 !important;
    /* xám nhạt */
    border: 1px solid #d1d5db !important;
    /* viền xám sáng */
    color: #374151 !important;
    /* chữ xám đậm hơn một chút */
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 8px;
    text-align: left;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.filter-main-button:hover {
    background-color: #e5e7eb !important;
    /* hơi tối khi hover */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.filter-main-button:active {
    background-color: #d1d5db !important;
    /* khi bấm */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Đảm bảo chữ trắng trong Dark Mode */
html[data-bs-theme="dark"] .filter-main-button {
    color: var(--surface-color) !important;
}

/* Tinh chỉnh mũi tên Dropdown (Caret) của nút chính */
.filter-main-button::after {
    margin-left: auto;
    /* Đẩy mũi tên sang phải cùng */
}

/* ================================================= */
/* 8. STYLE CHO SIDEBAR THỂ LOẠI */
/* ================================================= */

.sidebar-container {
    background-color: var(--surface-color);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 0 15px var(--shadow-color);
    /* Dùng sticky-top để sidebar luôn dính vào đầu trang khi cuộn */
    top: 20px;
}

.sidebar-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 5px;
}

.sidebar-genre-item {
    /* Định kiểu cũ, đã được thay đổi trong khối CSS chung của bạn */
    display: block;
    padding: 8px 10px;
    background-color: var(--surface-color);
    /* Sử dụng biến */
    border: 1px solid var(--border-color);
    /* Sử dụng biến */
    border-radius: 0.25rem;
    text-decoration: none;
    color: var(--text-color);
    /* Sử dụng biến */
    font-size: 0.9rem;
    transition: background-color 0.2s, border-color 0.2s;
    text-align: center;

    /* Ghi đè lại style mặc định của bạn để trông như các ô button */
    padding: 5px 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
    background-color: transparent;
    border: none;
    text-align: left;
}

.sidebar-genre-item:hover {
    color: var(--primary-color) !important;
    text-decoration: underline;
}

/* ================================================= */
/* 9. STYLE CHO FOOTER MỚI */
/* ================================================= */

.footer-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 400;
    background-color: var(--bs-body-secondary) !important;
    color: var(--text-color) !important;
    text-decoration: none;
    transition: background-color 0.2s;
}

.footer-tag:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.custom-footer hr {
    border-top-color: var(--border-color);
}

/* ================================================= */
/* DROPDOWN MENU CHUNG (bao gồm dropdown thường + mega) */
/* ================================================= */

/* ==== Tổng thể dropdown ==== */
.dropdown-menu {
    background-color: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    padding: 8px 0;
    min-width: 220px;
    overflow: hidden;
    color: var(--text-color, #374151);
}

/* ==== Item cơ bản ==== */
.dropdown-item {
    color: var(--text-color, #374151);
    padding: 10px 15px;
    font-size: 0.95rem;
    font-weight: 500;
    background-color: transparent;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ==== Hover / Focus ==== */
/* Chỉ đổi nền sáng, không đổi màu chữ */
.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--primary-color) !important;
    background-color: transparent !important;
}

/* ==== Active ==== */
.dropdown-item.active,
.dropdown-item:active {
    background-color: transparent !important;
    /* bỏ nền */
    color: var(--primary-color) !important;
    /* màu nâu đồng */
    font-weight: 600;
    box-shadow: none;
    /* bỏ viền nổi */
}

/* ==== Divider ==== */
.dropdown-divider {
    margin: 4px 0;
    border-top-color: var(--border-color, #e5e7eb);
}

/* ==== Header ==== */
.dropdown-header {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    padding: 10px 15px 4px;
    text-transform: uppercase;
}

/* ================================================= */
/* MEGA DROPDOWN MENU (kế thừa style chung) */
/* ================================================= */

/* Màn hình lớn */
@media (min-width: 992px) {
    .dropdown-mega .dropdown-menu {
        width: 800px;
        left: 0 !important;
        transform: translateX(0) !important;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 0.75rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }

    .dropdown-mega .dropdown-menu::-webkit-scrollbar {
        width: 6px;
    }

    .dropdown-mega .dropdown-menu::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }

    .dropdown-mega .dropdown-menu::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, 0.4);
    }
}

/* Màn hình nhỏ (mobile) */
@media (max-width: 991.98px) {
    .dropdown-mega .dropdown-menu {
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        margin: 0 auto;
        border-radius: 0.75rem;
    }

    .dropdown-mega .row {
        row-gap: 0.5rem;
    }

    .dropdown-mega .row>.col {
        flex: 0 0 50%;
        /* chỉ 2 cột trên mobile */
    }
}

/* ================================================= */
/* 11. STYLE CHO DROPDOWN HOVER (Chỉ trên Desktop) */
/* ================================================= */

@media (min-width: 992px) {

    /* Mặc định ẩn mũi tên dropdown (caret) */
    .custom-navbar .dropdown-toggle::after {
        display: none;
    }

    /* Hiển thị mũi tên khi dropdown đang mở (do JS/Bootstrap) hoặc đang hover (do JS thêm class) */
    .custom-navbar .dropdown-item.active .dropdown-toggle::after,
    .custom-navbar .nav-item.dropdown.show .dropdown-toggle::after,
    .custom-navbar .nav-item.dropdown.show-on-hover .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        /* Khôi phục nội dung mũi tên */
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
        transition: transform 0.2s;
    }

    /* Xoay mũi tên lên khi menu mở */
    .custom-navbar .nav-item.dropdown.show .dropdown-toggle::after,
    .custom-navbar .nav-item.dropdown.show-on-hover .dropdown-toggle::after {
        transform: rotate(-180deg);
    }
}

/* ================================================= */
/* 12. STYLE CHO SWITCH */
/* ================================================= */

.custom-darkmode-switch {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ẩn style mặc định Bootstrap */
.custom-darkmode-switch .form-check-input {
    --width: 60px;
    --height: 32px;
    --ball-size: 26px;

    appearance: none;
    position: relative;
    width: var(--width);
    height: var(--height);
    border-radius: 50px;
    background: #d1d5db;
    border: none;
    cursor: pointer;
    outline: none;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
    transition: background 0.4s ease;
}

/* Nút tròn */
.custom-darkmode-switch .form-check-input::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: var(--ball-size);
    height: var(--ball-size);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff, #e6e6e6);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s ease;
    --x: 0;
    transform: translateX(var(--x)) scale(1);
}

/* Khi bật dark mode */
.custom-darkmode-switch .form-check-input:checked {
    background: linear-gradient(90deg, #1f2937, #111827);
}

/* Khi bật: nút tròn di chuyển */
.custom-darkmode-switch .form-check-input:checked::before {
    --x: calc(var(--width) - var(--ball-size) - 6px);
    background: radial-gradient(circle at 30% 30%, #facc15, #f59e0b);
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.7);
}

/* Hover nhẹ */
.custom-darkmode-switch .form-check-input:hover::before {
    transform: translateX(var(--x)) scale(1.05);
}

/* Hiệu ứng khi click giữ */
.custom-darkmode-switch .form-check-input:active::before {
    width: 28px;
}

/* Icon 🌙☀️ */
.custom-darkmode-switch .form-check-input::after {
    content: "🌙";
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 16px;
    opacity: 1;
    transition: all 0.35s ease;
}

.custom-darkmode-switch .form-check-input:checked::after {
    content: "☀️";
    left: 8px;
    right: auto;
    opacity: 1;
}

/* ================================================= */
/* 13. STYLE CHO TAG */
/* ================================================= */

/* Thiết lập CSS chung cho tất cả các nhãn ribbon */
.ribbon {
    position: absolute;
    width: 150px;
    /* Chiều dài của nhãn */
    padding: 4px 0;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 2. Nhãn Ribbon HOT (Góc trên bên trái) - Màu Đỏ */
.ribbon.hot {
    background-color: #ef4444;
    /* Màu đỏ */
    transform: rotate(-45deg);
    top: 25px;
    left: -50px;
    border-radius: 0 0 5px 5px;
}

/* 3. Tam giác gập cho HOT */
.ribbon.hot::after {
    content: "";
    position: absolute;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #dc2626;
    /* Màu đỏ tối hơn */
    bottom: -7px;
    left: calc(50% - 7px);
}

/* 4. Nhãn Ribbon NEW (Góc trên bên phải) - Màu Xanh lam */
.ribbon.new {
    background-color: #b18862;
    /* Màu xanh lam */
    transform: rotate(45deg);
    /* Xoay ngược lại 45 độ dương */
    top: 25px;
    right: -50px;
    /* Đẩy ra ngoài bên phải */
    border-radius: 5px 5px 0 0;
}

/* 5. Tam giác gập cho NEW */
.ribbon.new::after {
    content: "";
    position: absolute;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #af7a47;
    /* Màu xanh lam tối hơn */
    top: -7px;
    left: calc(50% - 7px);
}

/* 6. Nhãn Ribbon FULL (Góc dưới bên trái) - Màu Xanh lục */
.ribbon.full {
    background-color: #10b981;
    /* Màu Xanh lục */
    transform: rotate(-45deg);
    top: 25px;
    left: -50px;
    border-radius: 0 0 5px 5px;
}

/* 7. Tam giác gập cho FULL (Cũng được tạo ở phía trên nhãn vì nhãn xoay dương) */
.ribbon.full::after {
    content: "";
    position: absolute;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #059669;
    /* Màu xanh lục tối hơn */
    bottom: -7px;
    left: calc(50% - 7px);
}

/* ================================================= */
/* OVERRIDES: Make cards, buttons and related UI square */
/* ================================================= */
/* Force no rounded corners for cards */
.comic-card,
.custom-table,
.sidebar-container,
.comic-card .card-title,
.comic-card .card-body {
    border-radius: 0 !important;
}

/* Buttons (Bootstrap .btn and custom filter buttons) */
.section-container .btn,
.section-container .filter-main-button,
.section-container .search-form .btn,
.offcanvas .btn {
    border-radius: 0 !important;
}

/* Inputs, selects, and nav elements */
.section-container .form-control,
.section-container .search-form .form-control,
.custom-navbar,
.section-container .dropdown-menu,
.dropdown-item,
.offcanvas,
.offcanvas-header {
    border-radius: 0 !important;
}

/* Badges and ribbons square corners */
.section-container .badge,
.ribbon,
.footer-tag {
    border-radius: 0 !important;
}

/* Ensure any remaining card-like components are square */
.card,
.card * {
    border-radius: 0 !important;
}

/* ================================================= */
/* NAVBAR TOGGLER / RESPONSIVE MENU: remove focus ring */
/* Note: removing focus rings reduces keyboard visibility; keep scoped to toggler */
/* .navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.offcanvas .btn-close:focus {
    outline: none !important;
    box-shadow: none !important;
} */

/* Also remove the default focus-visible for toggler when using keyboard (if desired) */
/* .navbar-toggler:focus-visible {
    outline: none !important;
    box-shadow: none !important;
} */

.section-container .dropdown:hover{
    position: relative;
}

.section-container .dropdown:hover>.dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    position: absolute;
    inset: 0px 0px auto auto;
    margin: 0px;
    transform: translate(0px, 44px);
}