/**
 * 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:
 *     * Khung đọc tin tức chi tiết căn giữa màn hình (870px) khi cài đặt chế độ hiển thị main (1 cột)
 *     * Khi cài đặt hiển thị main-right, main-left, left-main-right: hiển thị vừa đủ chiều rộng cột chính, các block bên trái/phải nằm đúng vị trí, 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-container-max: 1440px;
}

/* ==========================================================================
   1. CẤU TRÚC MÀN HÌNH RỘNG FULL-WIDTH (WIDE CONTAINER)
   ========================================================================== */
body {
    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;
    overflow-x: hidden;
}

.body-bg {
    background: transparent !important;
}

.wraper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

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

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

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

/* ==========================================================================
   2. HEADER & BANNER TRANG TRỌNG PHONG CÁCH PHATGIAOPHUTHO.COM
   ========================================================================== */
.clt-header,
.ctv-header,
header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--tt-border) !important;
    padding: 6px 0 !important;
    position: relative !important;
    z-index: 100 !important;
    width: 100% !important;
}

.clt-header .wraper,
.clt-header .container,
header .wraper,
header .container {
    background: transparent !important;
}

/* Khung Header chứa Logo (bên trái) và Banner */
#header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 155px !important;
    margin: 8px 0 !important;
    padding: 18px 28px !important;
    border-radius: 16px !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 8px 28px rgba(76, 5, 25, 0.25) !important;
    overflow: hidden !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    width: 100% !important;
}

/* Lớp phủ chuyển màu ánh sen huyền diệu tăng độ tương phản và chiều sâu */
#header::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(90deg, 
        rgba(40, 3, 14, 0.92) 0%, 
        rgba(112, 17, 50, 0.82) 40%, 
        rgba(159, 18, 57, 0.65) 75%, 
        rgba(190, 18, 60, 0.4) 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: 24px !important;
    flex-shrink: 0 !important;
}

#header .logo img {
    max-height: 125px !important;
    max-width: 125px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 50% !important;
    border: 3.5px solid #ffd700 !important;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.7), 0 6px 20px rgba(0, 0, 0, 0.5) !important;
    background: #ffffff !important;
    padding: 3px !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 30px rgba(254, 240, 138, 0.9), 0 8px 25px rgba(0, 0, 0, 0.6) !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: 26px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #ffd700 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 15px rgba(251, 191, 36, 0.6) !important;
    margin-bottom: 6px !important;
    line-height: 1.25 !important;
}

#header .banner .sdes {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.8) !important;
    line-height: 1.5 !important;
    max-width: 850px !important;
    opacity: 0.96 !important;
}

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

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

    #header .logo img {
        max-height: 75px !important;
        max-width: 75px !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-x: auto !important;
    white-space: nowrap !important;
    padding: 6px 0 !important;
    scrollbar-width: none !important;
    width: 100% !important;
}

.second-nav::-webkit-scrollbar {
    display: none !important;
}

.second-nav ul, 
#menusite ul,
.navbar-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Nút Menu: Chữ trắng tinh khiết, tương phản cao, nổi bật trên nền sen */
.second-nav ul li a, 
#menusite ul 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) !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;
}

/* HIỆU ỨNG DI CHUỘT VÀO NÚT MENU: PHÁT SÁNG HÀO QUANG HOA SEN & NHỤY VÀNG (GLOW EFFECT) */
.second-nav ul li a:hover,
#menusite ul 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 {
    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 */
.second-nav ul li a::after,
#menusite ul 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;
}

.second-nav ul li a:hover::after,
#menusite ul li a:hover::after {
    left: 140% !important;
    transition: left 0.65s ease !important;
}

/* Dropdown Submenu */
.second-nav ul li ul,
#menusite ul li ul,
.second-nav .dropdown-menu,
#menusite .dropdown-menu {
    background: linear-gradient(180deg, #4c0519 0%, #701132 100%) !important;
    border: 1.5px solid var(--tt-gold-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 35px rgba(76, 5, 25, 0.5) !important;
    padding: 8px 0 !important;
    margin-top: 6px !important;
}

.second-nav ul li ul li a,
#menusite ul li ul li a,
.second-nav .dropdown-menu > li > a,
#menusite .dropdown-menu > li > a {
    color: #ffffff !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    text-transform: none !important;
}

.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: #ffd700 !important;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.7) !important;
    transform: translateX(4px) !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)
   - 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í, 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 */
@media (min-width: 992px) {
    /* 1. Khi ở chế độ Main (1 cột không có cột trái/phải): Căn giữa 870px */
    .col-md-24 > .news_column,
    .col-xs-24:not(.col-md-18):not(.col-md-16):not(.col-md-13):not(.col-md-19) > .news_column,
    #body .row:not(:has(.col-md-6)):not(:has(.col-md-8)):not(:has(.col-md-5)) > .col-sm-16.col-md-18 > .news_column {
        max-width: 870px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }

    /* 2. Khi ở chế độ Main-Right, Main-Left, Left-Main-Right: */
    /* Giữ nguyên lưới cột Bootstrap để các block nằm đúng bên trái / bên phải, KHÔNG bị đẩy xuống dưới */
    #body .row {
        display: block !important;
    }

    #body .row > .col-sm-16.col-md-18,
    #body .row > .col-md-18,
    #body .row > .col-md-16,
    #body .row > .col-md-19,
    #body .row > .col-md-13 {
        float: left !important;
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #body .row > .col-sm-8.col-md-6,
    #body .row > .col-md-6,
    #body .row > .col-md-8,
    #body .row > .col-md-5 {
        float: left !important;
        display: block !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Khung bài viết bên trong cột chính mở rộng vừa đủ chiều rộng cột (tối đa 870px) */
    .news_column {
        width: 100% !important;
        max-width: 870px !important;
        box-sizing: border-box !important;
    }
}

/* KHUNG TRÀN VIỀN TỰ ĐỘNG TRÊN ĐIỆN THOẠI & THIẾT BỊ DI ĐỘNG */
@media (max-width: 991px) {
    .container,
    #body.container,
    .body-wraper .container,
    .section-body .container {
        padding-left: 1mm !important;
        padding-right: 1mm !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #body .row,
    .section-body .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .col-xs-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 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

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

    .panel-body,
    .news_column .panel-body {
        padding: 8px 1mm !important;
    }
}

/* KHOẢNG TRỐNG ĐẦU DÒNG VÀ CUỐI DÒNG CĂN SÁT LỀ 1MM */
.news_column .panel-body,
.news-detail-content,
#news-bodyhtml,
.bodytext,
.hometext {
    padding-left: 1mm !important;
    padding-right: 1mm !important;
    box-sizing: border-box !important;
}

#news-bodyhtml,
.bodytext,
.news_column {
    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;
}

#news-bodyhtml p,
.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 img,
.bodytext img,
.news_column img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--tt-radius-sm) !important;
    display: block !important;
    margin: 16px auto !important;
    box-shadow: var(--tt-shadow-md) !important;
}

.hometext {
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.7 !important;
    color: #334155 !important;
    padding: 14px 1mm !important;
    background: #fff1f2 !important;
    border-left: 4px solid var(--tt-lotus-bright) !important;
    border-radius: var(--tt-radius-sm) !important;
    margin-bottom: 22px !important;
    text-align: justify !important;
}

/* ==========================================================================
   6. FOOTER HOA SEN THANH TỊ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;
}

#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;
}