/**
 * Giao diện Màn hình rộng phong cách Zing MP3 - Tông màu Hoa Sen Quý Phái & Trang Trọng
 * Dành cho Tống Trân (Trang chủ & Toàn bộ trang tính năng con)
 * - Header & Banner: Hiển thị Logo và Banner trang trọng như trang https://phatgiaophutho.com/
 *   + Logo nằm bên trái gần góc trái màn hình
 *   + Vùng banner & menu header hiển thị rộng vừa đủ màn hình, tràn viền đẹp mắt
 * - Menu Sticky Topbar: Khi kéo chuột xuống dưới, Header & Logo ẩn đi, Menu ghim cố định ở đỉnh màn hình
 * - Sắc màu Hoa Sen chủ đạo: Nền cánh sen thắm hoàng gia, chữ trắng tinh khiết tương phản cao, hiệu ứng hover phát sáng ánh vàng nhụy sen
 * - Chi tiết tin tức:
 *   + Khoảng trống đầu dòng và cuối dòng văn bản căn sát lề 1mm, căn đều 2 bên (justify)
 *   + Trên PC & Laptop:
 *     * Chế độ main (1 cột): Khung đọc tin tức chi tiết căn giữa màn hình (870px)
 *     * Chế độ main-right, main-left, left-main-right: Giữ nguyên lưới cột chuẩn, các block bên trái/phải nằm đúng vị trí bên cạnh, KHÔNG bị vỡ giao diện đẩy xuống dưới
 *   + Trên Điện thoại & Di động: Viền khung tin tức tự động mở rộng tràn viền sát mép 1mm, đồng bộ cùng chiều rộng với các khung bên dưới
 */

:root {
    /* Hệ màu Hoa Sen (Lotus Theme Palette) */
    --tt-lotus-deep: #4c0519;        /* Đỏ sen thẫm quý phái */
    --tt-lotus-dark: #701132;        /* Cánh sen thẫm */
    --tt-lotus-primary: #881337;     /* Sắc sen hoàng gia */
    --tt-lotus-medium: #9f1239;      /* Hồng ngọc sen */
    --tt-lotus-bright: #be123c;      /* Cánh sen tươi thắm */
    --tt-lotus-glow: #e11d48;        /* Ánh sen rực rỡ */
    --tt-lotus-blossom: #f43f5e;     /* Sáng hồng cánh sen */
    --tt-lotus-soft: #ffe4e6;        /* Hồng phấn dịu nhẹ */
    
    /* Màu nhụy sen hoàng kim (Lotus Gold Accent) */
    --tt-gold-light: #fef08a;        /* Vàng nhụy sen sáng */
    --tt-gold: #fbbf24;              /* Vàng kim óng ánh */
    --tt-gold-border: #d4af37;       /* Chỉ viền vàng hoàng kim */
    --tt-gold-dark: #d97706;         /* Vàng hổ phách */
    
    /* Màu nền và chữ */
    --tt-bg-light: #f8fafc;
    --tt-bg-card: #ffffff;
    --tt-text-main: #1e293b;
    --tt-text-muted: #64748b;
    --tt-border: rgba(0, 0, 0, 0.08);
    
    /* Hiệu ứng bóng và bo góc */
    --tt-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --tt-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --tt-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
    --tt-shadow-lotus: 0 0 20px rgba(244, 63, 94, 0.8), 0 0 35px rgba(251, 191, 36, 0.5);
    --tt-radius: 14px;
    --tt-radius-sm: 8px;
    --tt-radius-full: 9999px;
    --tt-page-max-width: 1560px;
    --tt-page-gutter: 15px;
    --tt-container-max: 1560px;
}

@media (min-width: 1600px) {
    :root {
        --tt-page-max-width: 1650px;
        --tt-container-max: 1650px;
    }
}

@media (min-width: 1920px) {
    :root {
        --tt-page-max-width: 1780px;
        --tt-container-max: 1780px;
    }
}

@media (max-width: 767px) {
    :root {
        --tt-page-gutter: 1mm;
    }
}

/* ==========================================================================
   1. CẤU TRÚC MÀN HÌNH RỘNG FULL-WIDTH TRÀN VIỀN (PHONG CÁCH CHUAKHAINGUYEN.COM)
   ========================================================================== */
html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    background-color: var(--tt-bg-light) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    color: var(--tt-text-main) !important;
}

.body-bg,
.body-wraper {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
}

.wraper {
    width: 100% !important;
    max-width: var(--tt-page-max-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: var(--tt-page-gutter) !important;
    padding-left: var(--tt-page-gutter) !important;
    box-sizing: border-box !important;
}

.wraper > .container,
.clt-header .container,
.ctv-header .container,
.second-nav-ctn .container,
.body-wraper .container,
#body.container {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}

.container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix chống vỡ layout / text clipping trong bài viết do grid lồng ghép (như chuakhainguyen.com) */
.bodytext .row,
#news-bodyhtml .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    display: block !important;
}

.bodytext .col,
#news-bodyhtml .col,
.bodytext [class*="col-"],
#news-bodyhtml [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
}

/* ==========================================================================
   2. HEADER & BANNER TRÀN VIỀN FULL MÀN HÌNH (1500x547 px)
   ========================================================================== */
.clt-header,
.ctv-header,
header {
    background: transparent !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 100 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.clt-header .wraper,
header .wraper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.clt-header > .wraper > .container,
header > .wraper > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Thanh điều hướng Topbar Header-Nav tràn viền full màn hình */
nav.header-nav {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 36px !important;
    background: rgba(20, 2, 8, 0.90) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    z-index: 10 !important;
}

nav.header-nav .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

.clt-head-lang-login {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Khung Header chứa Logo (bên trái) và Banner tràn viền full màn hình (kích thước chuẩn 1500x547 px) */
#header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 547px !important;
    height: 547px !important;
    margin: 0 !important;
    padding: 32px 48px !important;
    border-radius: 0 !important;
    background-color: var(--tt-lotus-deep) !important;
    background-image: url('/uploads/banners/banner.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    box-shadow: 0 12px 36px rgba(76, 5, 25, 0.35) !important;
    overflow: hidden !important;
    border: none !important;
    border-bottom: 2px solid rgba(212, 175, 55, 0.6) !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Lớp phủ chuyển màu nghệ thuật tôn vinh cảnh quan văn hóa quê hương */
#header::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(90deg, 
        rgba(25, 2, 8, 0.80) 0%, 
        rgba(76, 5, 25, 0.50) 35%, 
        rgba(159, 18, 57, 0.15) 70%, 
        rgba(0, 0, 0, 0.05) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Logo nằm bên trái gần góc trái màn hình */
#header .logo {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    margin-right: 32px !important;
    flex-shrink: 0 !important;
}

#header .logo img {
    max-height: 165px !important;
    max-width: 165px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 50% !important;
    border: 4.5px solid #ffd700 !important;
    box-shadow: 0 0 28px rgba(251, 191, 36, 0.8), 0 8px 26px rgba(0, 0, 0, 0.65) !important;
    background: #ffffff !important;
    padding: 4px !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#header .logo a:hover img {
    transform: scale(1.06) rotate(3deg) !important;
    box-shadow: 0 0 38px rgba(254, 240, 138, 0.98), 0 12px 32px rgba(0, 0, 0, 0.75) !important;
}

/* Khối chữ Banner Tiêu Đề bên cạnh Logo */
#header .banner {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    color: #ffffff !important;
    flex-grow: 1 !important;
}

#header .banner .sname {
    font-size: 34px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #ffd700 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 0 20px rgba(251, 191, 36, 0.75) !important;
    margin-bottom: 10px !important;
    line-height: 1.25 !important;
}

#header .banner .sdes {
    font-size: 16.5px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 0, 0, 0.85) !important;
    line-height: 1.6 !important;
    max-width: 950px !important;
    opacity: 0.98 !important;
}

/* Responsive cho Header trên màn hình laptop / desktop vừa */
@media (max-width: 1200px) {
    #header {
        min-height: 420px !important;
        height: auto !important;
        padding: 24px 32px !important;
    }
}

/* Responsive cho Header trên màn hình tablet */
@media (max-width: 991px) {
    nav.header-nav {
        padding: 4px 16px !important;
    }
    #header {
        min-height: 300px !important;
        height: auto !important;
        padding: 16px 20px !important;
    }
    #header .logo img {
        max-height: 120px !important;
        max-width: 120px !important;
    }
    #header .banner .sname {
        font-size: 26px !important;
    }
}

/* Responsive cho Header trên di động */
@media (max-width: 767px) {
    nav.header-nav {
        padding: 4px 12px !important;
    }
    #header {
        min-height: 160px !important;
        height: auto !important;
        padding: 12px 14px !important;
        gap: 12px !important;
        border-radius: 0 !important;
    }

    #header .logo {
        margin-right: 12px !important;
    }

    #header .logo img {
        max-height: 85px !important;
        max-width: 85px !important;
        border-width: 2.5px !important;
    }

    #header .banner .sname {
        font-size: 18px !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 3px !important;
    }

    #header .banner .sdes {
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
}

/* ==========================================================================
   3. MENU ĐIỀU HƯỚNG TÔNG HOA SEN CHỦ ĐẠO & STICKY TOPBAR (ẨN LOGO KHI CUỘN)
   ========================================================================== */
.second-nav-ctn {
    background: linear-gradient(90deg, 
        #4c0519 0%, 
        #701132 25%, 
        #881337 50%, 
        #9f1239 75%, 
        #be123c 100%) !important;
    border-top: 1px solid rgba(254, 240, 138, 0.3) !important;
    border-bottom: 3px solid var(--tt-gold-border) !important;
    box-shadow: 0 4px 20px rgba(76, 5, 25, 0.3) !important;
    margin-bottom: 24px !important;
    position: relative !important;
    z-index: 9999 !important;
    width: 100% !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* KHI KÉO CHUỘT XUỐNG: MENU LUÔN CỐ ĐỊNH Ở TOPBAR VÀ ẨN LOGO/HEADER */
.second-nav-ctn.is-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    margin-bottom: 0 !important;
    background: linear-gradient(90deg, 
        rgba(60, 4, 20, 0.98) 0%, 
        rgba(95, 14, 42, 0.98) 35%, 
        rgba(125, 18, 52, 0.98) 70%, 
        rgba(159, 18, 57, 0.98) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: 0 8px 32px rgba(60, 4, 20, 0.5) !important;
    border-bottom: 3px solid var(--tt-gold) !important;
    animation: ttStickySlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes ttStickySlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.second-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    padding: 6px 0 !important;
    width: 100% !important;
    position: relative !important;
}

.second-nav-ctn .container,
.second-nav-ctn .wraper,
.pvgas-menu,
.pvgas-menu-ctn {
    overflow: visible !important;
}

/* Danh sách menu chính cấp 1 (Top-level Menu Items) */
.second-nav > .wraper > .container > nav > .pvgas-menu > .pvgas-menu-ctn > ul.slimmenu,
.second-nav > .wraper > .container > nav > ul,
.second-nav > ul,
#menusite > ul,
#menusite > .pvgas-menu > .pvgas-menu-ctn > ul.slimmenu,
ul.slimmenu {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    position: relative !important;
    overflow: visible !important;
}

ul.slimmenu > li,
.second-nav > ul > li,
#menusite > ul > li {
    position: relative !important;
    display: inline-block !important;
    list-style: none !important;
}

/* Nút Menu Cấp 1: Chữ trắng tinh khiết, tương phản cao, nổi bật trên nền sen */
.second-nav > .wraper > .container > nav > .pvgas-menu > .pvgas-menu-ctn > ul.slimmenu > li > a,
.second-nav > ul > li > a,
#menusite > ul > li > a,
ul.slimmenu > li > a {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7) !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 9px 18px !important;
    border-radius: var(--tt-radius-full, 9999px) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

/* HIỆU ỨNG DI CHUỘT VÀO NÚT MENU CẤP 1: PHÁT SÁNG HÀO QUANG HOA SEN & NHỤY VÀNG */
.second-nav > .wraper > .container > nav > .pvgas-menu > .pvgas-menu-ctn > ul.slimmenu > li > a:hover,
.second-nav > ul > li > a:hover,
#menusite > ul > li > a:hover,
ul.slimmenu > li > a:hover {
    color: #fffbeb !important;
    background: linear-gradient(135deg, #be123c 0%, #e11d48 50%, #f43f5e 100%) !important;
    box-shadow: 0 0 18px rgba(244, 63, 94, 0.95), 0 0 32px rgba(251, 191, 36, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(254, 240, 138, 0.9) !important;
    transform: translateY(-2px) scale(1.04) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Nút Menu đang Active / Kích hoạt */
.second-nav ul > li.active > a,
#menusite ul > li.active > a,
.second-nav ul > li.current > a,
#menusite ul > li.current > a,
ul.slimmenu > li.current > a {
    color: #ffffff !important;
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.85), inset 0 0 8px rgba(255, 255, 255, 0.35) !important;
    border: 1px solid #fde68a !important;
    font-weight: 800 !important;
}

/* Vệt sáng lướt qua khi hover menu cấp 1 */
ul.slimmenu > li > a::after {
    content: "" !important;
    position: absolute !important;
    top: -50% !important;
    left: -70% !important;
    width: 40% !important;
    height: 200% !important;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%) !important;
    transform: rotate(30deg) !important;
    pointer-events: none !important;
    transition: none !important;
}

ul.slimmenu > li > a:hover::after {
    left: 140% !important;
    transition: left 0.65s ease !important;
}

/* ==========================================================================
   MENU CON SỔ XUỐNG (DROPDOWN SUBMENU): HIỂN THỊ HOÀN CHỈNH, ĐẦY ĐỦ THÔNG TIN
   ========================================================================== */
ul.slimmenu li.has-submenu {
    position: relative !important;
}

ul.slimmenu li.has-submenu > a {
    padding-right: 28px !important;
}

ul.slimmenu li .sub-collapser {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

ul.slimmenu li .sub-collapser > i {
    color: #ffffff !important;
    font-size: 11px !important;
    transition: transform 0.2s ease !important;
}

ul.slimmenu li.is-open > .sub-collapser > i,
ul.slimmenu li:hover > .sub-collapser > i {
    transform: rotate(180deg) !important;
    color: #fde68a !important;
}

ul.slimmenu li > ul,
.second-nav ul li ul,
#menusite ul li ul,
.second-nav .dropdown-menu,
#menusite .dropdown-menu {
    display: none;
    position: absolute !important;
    top: calc(100% + 2px) !important;
    left: 0 !important;
    min-width: 240px !important;
    max-width: 340px !important;
    width: max-content !important;
    background: linear-gradient(180deg, #4c0519 0%, #2e020d 100%) !important;
    border: 1.5px solid var(--tt-gold-border, rgba(245, 158, 11, 0.6)) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(244, 63, 94, 0.35) !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    z-index: 9999999 !important;
    list-style: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow: visible !important;
}

/* Menu con cấp 3 */
ul.slimmenu li > ul > li ul,
.second-nav ul li ul li ul,
#menusite ul li ul li ul {
    left: 100% !important;
    top: 0 !important;
    margin-top: 0 !important;
    margin-left: 4px !important;
}

/* Khi bấm chuột vào (is-open / open) HOẶC di chuột vào trên Desktop */
ul.slimmenu li.is-open > ul,
ul.slimmenu li.open > ul,
.second-nav ul li.is-open > ul,
.second-nav ul li.open > ul,
#menusite ul li.is-open > ul,
#menusite ul li.open > ul {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

@media (min-width: 769px) {
    ul.slimmenu li:hover > ul,
    .second-nav ul li:hover > ul,
    #menusite ul li:hover > ul,
    #menusite .dropdown:hover > .dropdown-menu {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@keyframes ttSubmenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Các mục li bên trong menu con */
ul.slimmenu li > ul > li,
.second-nav ul li ul li,
#menusite ul li ul li,
.second-nav .dropdown-menu > li,
#menusite .dropdown-menu > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
    list-style: none !important;
    position: relative !important;
}

/* Liên kết chữ trong menu con: Hiển thị đầy đủ, không bị cắt chữ */
ul.slimmenu li > ul > li > a,
.second-nav ul li ul li a,
#menusite ul li ul li a,
.second-nav .dropdown-menu > li > a,
#menusite .dropdown-menu > li > a {
    display: block !important;
    width: calc(100% - 16px) !important;
    color: #ffffff !important;
    background: transparent !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: normal !important;
    line-height: 1.45 !important;
    text-align: left !important;
    text-shadow: none !important;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: visible !important;
    transition: all 0.2s ease !important;
}

/* Hover trên mục menu con */
ul.slimmenu li > ul > li > a:hover,
.second-nav ul li ul li a:hover,
#menusite ul li ul li a:hover,
.second-nav .dropdown-menu > li > a:hover,
#menusite .dropdown-menu > li > a:hover {
    background: linear-gradient(90deg, #be123c 0%, #9f1239 100%) !important;
    color: #fef08a !important;
    border: 1px solid rgba(254, 240, 138, 0.6) !important;
    box-shadow: 0 0 14px rgba(244, 63, 94, 0.7) !important;
    transform: translateX(4px) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   4. BREADCRUMBS & TIÊU ĐỀ KHỐI TÔNG HOA SEN ĐỒNG BỘ
   ========================================================================== */
.third-nav {
    margin-bottom: 20px !important;
}

.third-nav .bg,
.breadcrumbs-wrap {
    background: #ffffff !important;
    border-radius: var(--tt-radius) !important;
    padding: 10px 18px !important;
    box-shadow: var(--tt-shadow-sm) !important;
    border-left: 4px solid var(--tt-lotus-bright) !important;
    border-top: 1px solid var(--tt-border) !important;
    border-right: 1px solid var(--tt-border) !important;
    border-bottom: 1px solid var(--tt-border) !important;
}

.breadcrumbs li a {
    color: var(--tt-lotus-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.breadcrumbs li a:hover {
    color: var(--tt-lotus-glow) !important;
    text-decoration: underline !important;
}

/* Tiêu đề khối (Panel Heading / Block Header) */
.panel-default > .panel-heading,
.heading,
.block-title,
.box-title {
    background: linear-gradient(90deg, #701132 0%, #9f1239 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-top-left-radius: var(--tt-radius) !important;
    border-top-right-radius: var(--tt-radius) !important;
    padding: 12px 18px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: inset 0 -2px 0 var(--tt-gold) !important;
}

.panel-default > .panel-heading a,
.heading a {
    color: #ffffff !important;
}

/* Khung nội dung trang */
.panel,
.panel-default,
.well,
.box-border {
    border-radius: var(--tt-radius) !important;
    border: 1px solid var(--tt-border) !important;
    box-shadow: var(--tt-shadow-sm) !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

/* ==========================================================================
   5. HIỂN THỊ NỘI DUNG CHI TIẾT BÀI VIẾT (NEWS DETAIL) & BỐ CỤC ĐA CỘT
   - Khoảng trống đầu dòng và cuối dòng văn bản căn sát lề 1mm
   - Trên PC & Laptop:
     * Căn giữa màn hình 870px khi hiển thị chế độ main (1 cột)
     * Hiển thị vừa đủ độ rộng khi cài đặt main-right, main-left, left-main-right;
       các block bên trái/phải nằm đúng vị trí bên cạnh, KHÔNG bị đẩy xuống dưới
   - Trên Điện thoại & Di động: Mở rộng tràn viền tự động sát mép màn hình 1mm
   ========================================================================== */

/* CĂN CHỈNH BỐ CỤC TRÊN PC & LAPTOP (MIN-WIDTH: 992PX) */
@media (min-width: 992px) {
    #body .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    /* 1. CHẾ ĐỘ 1 CỘT (MAIN ĐƠN): Căn giữa 870px */
    #body .row > .col-md-24 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: block !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #body .row > .col-md-24 > .news_column,
    #body .row:not(:has(.col-md-6)):not(:has(.col-md-8)):not(:has(.col-md-5)) > .col-md-18 > .news_column {
        width: 100% !important;
        max-width: 870px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    /* 2. CHẾ ĐỘ MAIN-RIGHT (75% - 25%): Main bên trái, Right bên phải */
    #body .row > .col-md-18,
    #body .row > .col-sm-16.col-md-18 {
        width: 75% !important;
        max-width: 75% !important;
        flex: 0 0 75% !important;
        order: 1 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        float: none !important;
    }

    #body .row > .col-md-6,
    #body .row > .col-sm-8.col-md-6 {
        width: 25% !important;
        max-width: 25% !important;
        flex: 0 0 25% !important;
        order: 2 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        float: none !important;
        margin-top: 0 !important;
    }

    /* 3. CHẾ ĐỘ LEFT-MAIN (20.833% - 79.167%): Left bên trái, Main bên phải */
    #body .row > .col-md-5.col-md-pull-19,
    #body .row > .col-sm-6.col-sm-pull-18 {
        width: 20.833333% !important;
        max-width: 20.833333% !important;
        flex: 0 0 20.833333% !important;
        order: 1 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        float: none !important;
    }

    #body .row > .col-md-19.col-md-push-5,
    #body .row > .col-sm-18.col-sm-push-6 {
        width: 79.166667% !important;
        max-width: 79.166667% !important;
        flex: 0 0 79.166667% !important;
        order: 2 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        float: none !important;
    }

    /* 4. CHẾ ĐỘ LEFT-MAIN-RIGHT (20.833% - 54.167% - 25%): Left Trái, Main Giữa, Right Phải */
    #body .row > .col-md-13.col-md-push-5,
    #body .row > .col-sm-12.col-sm-push-6 {
        width: 54.166667% !important;
        max-width: 54.166667% !important;
        flex: 0 0 54.166667% !important;
        order: 2 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        float: none !important;
    }

    #body .row > .col-md-6.col-md-push-5,
    #body .row > .col-sm-6.col-sm-push-6 {
        width: 25% !important;
        max-width: 25% !important;
        flex: 0 0 25% !important;
        order: 3 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        float: none !important;
    }

    /* 5. CHẾ ĐỘ MAIN-LEFT-RIGHT (54.167% - 20.833% - 25%) */
    #body .row > .col-md-13:not(.col-md-push-5) {
        width: 54.166667% !important;
        max-width: 54.166667% !important;
        flex: 0 0 54.166667% !important;
        order: 1 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        float: none !important;
    }

    #body .row > .col-md-5.col-md-pull-6 {
        width: 20.833333% !important;
        max-width: 20.833333% !important;
        flex: 0 0 20.833333% !important;
        order: 2 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        float: none !important;
    }

    /* Các cột phụ 66.66% - 33.33% */
    #body .row > .col-md-16 {
        width: 66.666667% !important;
        max-width: 66.666667% !important;
        flex: 0 0 66.666667% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #body .row > .col-md-8 {
        width: 33.333333% !important;
        max-width: 33.333333% !important;
        flex: 0 0 33.333333% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Trong các layout có sidebar, khung news_column hiển thị vừa vặn 100% cột chứa */
    #body .row > .col-md-18 > .news_column,
    #body .row > .col-md-19 > .news_column,
    #body .row > .col-md-13 > .news_column,
    #body .row > .col-md-16 > .news_column {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* CĂN CHỈNH BỐ CỤC TRÊN TABLET (768PX - 991PX) */
@media (min-width: 768px) and (max-width: 991px) {
    #body .row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -8px !important;
        margin-right: -8px !important;
    }

    #body .row > .col-sm-24 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #body .row > .col-sm-24 > .news_column {
        width: 100% !important;
        max-width: 870px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #body .row > .col-sm-18:not(.col-sm-push-6),
    #body .row > .col-sm-16 {
        width: 66.666667% !important;
        max-width: 66.666667% !important;
        flex: 0 0 66.666667% !important;
        order: 1 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #body .row > .col-sm-8,
    #body .row > .col-sm-6:not(.col-sm-pull-18):not(.col-sm-push-6) {
        width: 33.333333% !important;
        max-width: 33.333333% !important;
        flex: 0 0 33.333333% !important;
        order: 2 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #body .row > .col-sm-6.col-sm-pull-18 {
        width: 25% !important;
        max-width: 25% !important;
        flex: 0 0 25% !important;
        order: 1 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #body .row > .col-sm-18.col-sm-push-6 {
        width: 75% !important;
        max-width: 75% !important;
        flex: 0 0 75% !important;
        order: 2 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #body .row > .col-sm-12.col-sm-push-6 {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        order: 2 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #body .row > .col-sm-6.col-sm-push-6 {
        width: 25% !important;
        max-width: 25% !important;
        flex: 0 0 25% !important;
        order: 3 !important;
        left: auto !important;
        right: auto !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* KHUNG TRÀN VIỀN TỰ ĐỘNG TRÊN ĐIỆN THOẠI & THIẾT BỊ DI ĐỘNG (DƯỚI 768PX) */
@media (max-width: 767px) {
    .container,
    #body.container,
    .body-wraper .container,
    .section-body .container,
    .clt-home-intro .container,
    .clt-home-video .container,
    .clt-home-download .container,
    .clt-home-videomedia .container,
    .second-nav-ctn .container {
        padding-left: 1mm !important;
        padding-right: 1mm !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #body .row,
    .section-body .row,
    .clt-home-intro .row,
    .clt-home-video .row,
    .clt-home-download .row,
    .clt-home-videomedia .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
    }

    .col-xs-24,
    .col-sm-24,
    .col-md-24,
    .col-sm-16,
    .col-md-18,
    .col-sm-8,
    .col-md-6,
    .col-md-16,
    .col-md-19,
    .col-md-13,
    .col-md-5,
    .col-md-8,
    .col-sm-18,
    .col-sm-6,
    .col-sm-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        left: auto !important;
        right: auto !important;
        order: unset !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .news_column.panel,
    .panel-default,
    .panel,
    .well,
    .box-border,
    .block-border,
    .nv-block-content,
    .content-box {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .panel-body,
    .news_column .panel-body,
    .well,
    .box-border {
        padding: 10px 1mm !important;
    }
}

/* KHOẢNG TRỐNG ĐẦU DÒNG VÀ CUỐI DÒNG CĂN SÁT LỀ 1MM */
.news_column {
    width: 100% !important;
    box-sizing: border-box !important;
}

.news_column .panel-body {
    padding: 14px 1mm !important;
    box-sizing: border-box !important;
}

.news_column .title {
    padding-left: 1mm !important;
    padding-right: 1mm !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.38 !important;
    color: #0f172a !important;
}

.news_column .row.margin-bottom-lg {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1mm !important;
    padding-right: 1mm !important;
}

.news_column .hometext {
    font-size: 16.5px !important;
    font-weight: 600 !important;
    line-height: 1.75 !important;
    color: #334155 !important;
    padding: 12px 1mm !important;
    background: #fff1f2 !important;
    border-left: 4px solid var(--tt-lotus-bright, #e11d48) !important;
    border-radius: var(--tt-radius-sm, 6px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    box-sizing: border-box !important;
}

#news-bodyhtml,
.news_column .bodytext {
    padding-left: 1mm !important;
    padding-right: 1mm !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 16.5px !important;
    line-height: 1.85 !important;
    color: #1e293b !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    box-sizing: border-box !important;
}

#news-bodyhtml p,
.news_column .bodytext p,
.news_column p {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-indent: 0 !important;
    color: #1e293b !important;
    line-height: 1.85 !important;
    text-align: justify !important;
    text-justify: inter-word !important;
}

#news-bodyhtml ul,
#news-bodyhtml ol {
    padding-left: 20px !important;
    padding-right: 1mm !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#news-bodyhtml table {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

#news-bodyhtml img,
.news_column .bodytext img,
.news_column img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--tt-radius-sm, 6px) !important;
    display: block !important;
    margin: 16px auto !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.news_column .panel-heading,
.news_column .list-group-item,
.news_column .well,
.news_column .alert {
    padding-left: 1mm !important;
    padding-right: 1mm !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   5.1. THANH CÔNG CỤ TÙY CHỈNH ĐỌC TIN TỨC (READER CUSTOMIZATION TOOLBAR)
   ========================================================================== */
.news-detail-top-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px !important;
}

.news-pub-time-hits {
    font-size: 13.5px;
    color: #64748b;
    font-weight: 500;
}

.news-top-actions-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.news-quick-size-group .btn,
.tt-news-share-btn {
    font-weight: 600;
    color: #334155;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 3px 8px;
    transition: all 0.2s ease;
}

.news-quick-size-group .btn:hover,
.tt-news-share-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: var(--tt-lotus-bright, #e11d48);
}

.news-action-icons-list {
    margin: 0 4px;
}

.news-action-icons-list li {
    padding: 0 3px;
}

.news-action-icons-list li a {
    color: #64748b;
    transition: color 0.2s;
}

.news-action-icons-list li a:hover {
    color: var(--tt-lotus-bright, #e11d48);
}

.news-reader-custom-toolbar {
    background: #fdfbf7 !important;
    border: 1px solid #f0e6d6 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
}

.reader-toolbar-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

.reader-grid-col {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reader-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.reader-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 90px;
}

.label-badge-letter {
    font-size: 16px;
    color: #8b4513;
}

.reader-icon {
    font-size: 14px;
}

#news-font-select {
    max-width: 240px;
    font-size: 13px;
    color: #1e293b;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    cursor: pointer;
}

.reader-palette-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.tt-color-dot,
.tt-bg-dot {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease, outline 0.15s ease;
    vertical-align: middle;
}

.tt-color-dot:hover,
.tt-bg-dot:hover {
    transform: scale(1.25);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.tt-color-dot.active,
.tt-bg-dot.active {
    outline: 2px solid #8b4513;
    outline-offset: 2px;
    transform: scale(1.15);
}

.reader-size-btn-group .btn {
    padding: 3px 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
    background: #ffffff;
    border: 1px solid #cbd5e1;
}

.reader-size-btn-group .btn:hover {
    background: #f1f5f9;
    color: var(--tt-lotus-bright, #e11d48);
}

@media (max-width: 767px) {
    .news-detail-top-action-bar {
        display: block !important;
    }
    .news-top-actions-wrapper {
        justify-content: flex-start !important;
        margin-top: 8px;
    }
    .reader-toolbar-grid {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .reader-grid-col {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    #news-font-select {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   6. FOOTER HOA SEN THANH TỊNH TRÀN VIỀN FULL MÀN HÌNH
   ========================================================================== */
#footer,
.footer {
    background: linear-gradient(180deg, #2d030f 0%, #1a0108 100%) !important;
    color: #cbd5e1 !important;
    border-top: 4px solid var(--tt-gold-border) !important;
    padding: 35px 0 25px 0 !important;
    margin-top: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
}

#footer .container,
.footer .container {
    width: 100% !important;
    max-width: var(--tt-container-max) !important;
}

#footer a,
.footer a {
    color: #fecdd3 !important;
    transition: color 0.2s ease !important;
}

#footer a:hover,
.footer a:hover {
    color: var(--tt-gold) !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   7. BỐ CỤC TRÀN VIỀN FULL MÀN HÌNH RESPONSIVE CHO TRANG CHỦ & TẤT CẢ MODULE CON
   (News, Videos, Docsach, Page, Contact, Users, Download, Photos, Shops, etc.)
   ========================================================================== */

/* Tràn viền các khối section trên trang chủ */
.clt-home-intro,
.clt-home-video,
.clt-home-download,
.clt-home-videomedia {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px 0 !important;
    padding: 0 !important;
}

.clt-home-intro .wraper,
.clt-home-video .wraper,
.clt-home-download .wraper,
.clt-home-videomedia .wraper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Tương thích tràn viền các thành phần module con */
.page-content,
.viewcat-content,
.video-content,
.docsach-content,
.contact-content,
.users-content,
.download-content,
.photos-content,
.shops-content,
.seek-content,
.voting-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Các khung chứa danh sách, panel, well trên tất cả module */
.panel,
.panel-default,
.panel-primary,
.well,
.box-border,
.content-box,
.block-border,
.nv-block-content {
    border-radius: var(--tt-radius-sm, 8px) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

/* Video & Media Players trên toàn bộ các module */
.embed-responsive,
.video-responsive,
.mejs-container,
.video-js,
.tt-player-responsive,
iframe,
embed,
object {
    max-width: 100% !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* Bảng dữ liệu tự động cuộn ngang chống vỡ layout trên mobile / tablet */
.table-responsive,
div.table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    border: none !important;
}

table.table {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
}

/* Form nhập liệu trên tất cả module con */
.form-horizontal .form-group,
.form-vertical .form-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
}

/* Hình ảnh trong tất cả bài viết và module */
.content-body img,
.page-body img,
.post-content img,
.detail-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
}

/* Thanh Breadcrumb điều hướng trên các trang con */
.breadcrumb {
    background: #ffffff !important;
    border: 1px solid var(--tt-border, rgba(0,0,0,0.08)) !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    margin-bottom: 18px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.breadcrumb > li + li:before {
    color: var(--tt-lotus-bright, #e11d48) !important;
    content: "›" !important;
    padding: 0 8px !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

/* Phân trang Pagination trên tất cả module con */
.pagination {
    margin: 20px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
}

.pagination > li > a,
.pagination > li > span {
    border-radius: 6px !important;
    color: var(--tt-lotus-primary, #881337) !important;
    border-color: #cbd5e1 !important;
    padding: 6px 12px !important;
    font-weight: 600 !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--tt-lotus-primary, #881337) !important;
    border-color: var(--tt-lotus-primary, #881337) !important;
    color: #ffffff !important;
}