:root{--shadow-1:0 2px 10px rgba(0, 0, 0, 0.1);--shadow-2:0 4px 6px -1px rgba(0, 0, 0, 0.05);--transition-normal:0.3s ease;--transition-smooth:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", sans-serif;}
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;transition:var(--transition-smooth);padding:0;height:125px;}
.navbar.scrolled{background:var(--bs-light);box-shadow:var(--shadow-1);}
.navbar-brand{position:relative;z-index:1;font-weight:700;color:var(--bs-white);font-size:1.5rem;margin:0;height:100%;display:flex;align-items:center;transition:var(--transition-smooth);}
.navbar-brand::before{content:'';z-index:0;position:absolute;top:-2rem;left:-1000%;right:-40px;width:1000%;bottom:-1.5rem;background-color:var(--bs-light);transition:var(--transition-smooth);}
.navbar-brand::after{content:'';z-index:0;position:absolute;top:-2rem;left:-3rem;right:-7.5rem;bottom:-1.5rem;background-image:url("/upload/site/logo-back.webp");background-size:auto 100%;}
.navbar-brand img{max-height:68px;vertical-align:unset;z-index:2;}
.nav-link{color:var(--bs-white) !important;font-weight:500;margin:0 12px;transition:var(--transition-normal);font-size:1.2rem;}
.navbar.scrolled .nav-link{color:var(--bs-dark) !important;}
.nav-link:hover, .navbar.scrolled .nav-link:hover, .mobile-dropdown-menu .nav-link:hover, .nav-link.active, .navbar.scrolled .nav-link.active, .mobile-dropdown-menu .nav-link.active{color:var(--bs-orange) !important;}
.mobile-dropdown-overlay{position:fixed;top:36px;right:26px;z-index:1050;width:50px;height:50px;background:#fbaa5c;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1);transition:background var(--transition-normal);}
.mobile-dropdown-overlay::before{content:"≡";color:var(--bs-white);font-size:1.5rem;font-weight:bold;}
.mobile-dropdown-overlay:hover{background:#fbaa5c;}
.mobile-dropdown-menu{position:fixed;top:100px;right:20px;width:250px;background:var(--bs-white);border-radius:8px;box-shadow:0 5px 15px rgba(0, 0, 0, 0.2);z-index:1049;padding:15px 0;max-height:calc(100vh - 120px);overflow-y:auto;display:none;opacity:0;transform:translateY(-20px);transition:var(--transition-smooth);}
.mobile-dropdown-menu ul.navbar-nav{flex-direction:column !important;}
.mobile-dropdown-menu .nav-link{color:var(--bs-dark) !important;padding:10px 20px !important;margin:0;font-size:1rem;}
.mobile-dropdown-menu .dropdown-menu{display:block;border:unset;margin-left:30px;padding-top:0;padding-bottom:0;}
.mobile-dropdown-menu .dropdown-menu li{padding-top:0;padding-bottom:0;}
.mobile-dropdown-menu .dropdown.show .dropdown-menu{display:block;}
@media (min-width:1px){
    .navbar-expand-lg .navbar-collapse{display:none !important;}
    .navbar-toggler{display:none !important;}
    .mobile-dropdown-menu .navbar-collapse{display:block !important;}
}
@media (min-width:1200px){
    .navbar-expand-lg .navbar-collapse{display:flex !important;}
    .mobile-dropdown-overlay{display:none;}
}

.hero-swiper{width:100%;height:calc(100vh - 76px);}
.hero-swiper .swiper-slide{background-size:cover;background-position:center;position:relative;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0, 0, 0, .2), rgba(0, 0, 0, .6));display:flex;align-items:center;justify-content:center;text-align:center;color:var(--bs-white);}
.hero-title{font-size:3.5rem;font-weight:800;text-shadow:0 4px 20px rgba(0, 0, 0, .5);margin-bottom:20px;}
.hero-btn{background:var(--bs-orange);border:none;padding:12px 40px;font-size:1.1rem;font-weight:600;border-radius:50px;transition:.3s;}
.hero-btn:hover{background:#d97706;transform:translateY(-2px);}
.hero-swiper .curve{position:absolute;left:0;right:0;bottom:-2rem;width:100%;height:auto;display:block;z-index:5;}
#hero{position:relative;overflow:hidden;}
#hero .bg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-repeat:no-repeat;background-size:cover;}
#hero .bg::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;opacity:0.2;background:linear-gradient(90deg, rgb(55 209 255) 0%, rgb(84 158 249) 100%);}
#hero .caption{position:relative;z-index:10;padding:8rem 0;text-align:center;}
#hero .curve{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;display:block;z-index:1;}
#hero .inner{min-height:242px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;}
#hero h1{font-size:3rem;color:var(--bs-white);}
@media (max-width:767.99px){#hero .caption{padding:8rem 0 3rem 0;}}
@media (min-width:768px) and (max-width:1224px){#hero .caption{padding:8rem 0 5rem 0;}}
@media (min-width:1921px) and (max-width:2800px){#hero .caption{padding:6rem 0 10rem 0;}}

.breadcrumb-wrapper{background:var(--bs-white);border-bottom:1px solid var(--bs-border-color);padding:1rem 0;margin-bottom:2rem;}
.breadcrumb-custom{margin-bottom:0;font-size:0.95rem;}
.breadcrumb-custom .breadcrumb-item a{color:#64748b;text-decoration:none;transition:color var(--transition-normal);display:flex;align-items:center;}
.breadcrumb-custom .breadcrumb-item a:hover{color:#10b981;}
.breadcrumb-custom .breadcrumb-item.active{color:#10b981;font-weight:600;}
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before{content:"/";color:#cbd5e1;padding:0 0.5rem;}

#footer{background:url(/upload/site/footer-back.svg) no-repeat center top;background-size:cover;padding:14rem 0 2rem 0;margin:2rem 0 0 0;position:relative;z-index:5;}
#footer a, a:active{text-decoration:none;color:var(--bs-orange);transition:color var(--transition-normal), background-color var(--transition-normal);}
#footer a{color:var(--bs-white);}
#footer a:hover{color:var(--bs-orange);}
#footer #footer-logo img{max-width:70px;}
#footer .qrcode{display:block;width:100%;height:auto;}
#footer ul{list-style:none;margin:0;padding:0;}
#footer ul li{display:block;margin:0 0 1rem 0;}
#footer .emails{text-align:right !important;}
#footer .emails a{margin:0 0 1rem 0;}
#footer .by{font-size:0.8rem;color:var(--bs-white);}
#footer .by .links{display:inline-block;margin:0 0 0 1rem;}
#footer .social{margin:2rem 0 0 0;}
#footer .social a{display:inline-block;margin:0 1rem 0 0;background-color:#c7dedf;border-radius:5px;height:1.5rem;width:1.5rem;text-align:center;line-height:1.5em;}
#footer .social a i{font-size:.8rem;color:#000;margin:0 auto;}
#footer .social a:hover{background-color:#ff8e22;}
#footer .social a:hover i{color:var(--bs-white);}
#footer .w-35{width:35%;}
#footer .w-40{width:40%;}
#footer .w-48{width:48%;}
#footer .w-60{width:60%;}
@media (max-width:768px){
    #footer{padding:4rem 0 2rem 0;}
    #footer .w-35,#footer .w-40,#footer .w-48,#footer .w-60{width:100%;}
    #footer .social a{margin:0 .5rem 0 0;}
    #footer-logo img{margin:0 auto;}
    #footer .social, #footer .quick-menu, #footer .emails, #footer .by, #footer .qrcode-container{text-align:center !important;}
    #footer .footer-links{margin-top:2rem;margin-bottom:2rem;}
    #footer .by .links{display:block;margin-top:.5rem;}
    #footer .qrcode{max-width:67%;margin:0 auto;}
}

.sidebar-card {background: #fff;border-radius: 12px;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);border: none;overflow: hidden;position: sticky;top: 20px;}
.sidebar-header {background: linear-gradient(135deg, #10b981, #059669);color: white;padding: 1.25rem;font-weight: 600;}
.sidebar-menu .list-group-item {border: none;border-bottom: 1px solid #f1f5f9;padding: 1rem 1.25rem;transition: all 0.2s;}
.sidebar-menu .list-group-item a {color: #64748b;text-decoration: none;display: flex;justify-content: space-between;align-items: center;}
.sidebar-menu .list-group-item a:hover {color: #10b981;padding-left: 5px;}
.sidebar-menu .list-group-item.active {background-color: #ecfdf5;border-left: 4px solid #10b981;}
.sidebar-menu .list-group-item.active a {color: #059669;font-weight: 600;}
.main-content-area {min-height: 500px;}
.program-card {background: #fff;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);transition: transform 0.3s ease, box-shadow 0.3s ease;height: 100%;display: flex;flex-direction: column;border: 1px solid #f1f5f9;}
.program-card:hover {transform: translateY(-5px);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);}
.card-image-wrapper {position: relative;height: 200px;overflow: hidden;}
.card-image-wrapper img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}
.program-card:hover .card-image-wrapper img {transform: scale(1.05);}
.card-badge {position: absolute;top: 10px;left: 10px;background: rgba(16, 185, 129, 0.9);color: white;padding: 4px 10px;border-radius: 20px;font-size: 0.75rem;font-weight: 600;backdrop-filter: blur(4px);}
.card-overlay {position: absolute;inset: 0;background: rgba(0, 0, 0, 0.3);display: flex;align-items: center;justify-content: center;opacity: 0;transition: opacity 0.3s ease;}
.program-card:hover .card-overlay {opacity: 1;}
.btn-more {background: #fff;color: #10b981;padding: 8px 20px;border-radius: 20px;text-decoration: none;font-weight: 600;font-size: 0.9rem;transform: translateY(20px);transition: transform 0.3s ease;}
.program-card:hover .btn-more {transform: translateY(0);}
.card-content {padding: 1.5rem;flex: 1;display: flex;flex-direction: column;}
.card-content h3 {font-size: 1.1rem;font-weight: 700;margin-bottom: 0.75rem;color: #1e293b;line-height: 1.4;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.card-content p {font-size: 0.9rem;color: #64748b;margin-bottom: 1rem;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;flex: 1;}
.card-footer {display: flex;justify-content: space-between;align-items: center;padding-top: 1rem;border-top: 1px solid #f1f5f9;margin-top: auto;}
.read-more-btn {color: #10b981;text-decoration: none;font-size: 0.85rem;font-weight: 600;display: flex;align-items: center;gap: 4px;}
.read-more-btn:hover {color: #059669;}
.card-date {font-size: 0.8rem;color: #94a3b8;}
.featured-card {margin-bottom: 2rem;}
.featured-card .card-image-wrapper {height: 300px;}
.featured-card .card-content h3 {font-size: 1.5rem;}
.grid-card .card-image-wrapper {height: 180px;}
.loading-state, .empty-state {text-align: center;padding: 4rem 0;color: #64748b;}
.spinner-border {color: #10b981;}
.pagination-container {margin-top: 2rem;display: flex;justify-content: center;}
.page-link {color: #10b981;border: none;margin: 0 4px;border-radius: 8px;}
.page-item.active .page-link {background-color: #10b981;border-color: #10b981;}
.page-link:hover {background-color: #ecfdf5;color: #059669;}



.charity-list-item {
    border-left: 4px solid #10b981;
    background-color: #fff;
    transition: all 0.3s ease;
}

.charity-list-item:hover {
    background-color: #e8f5e9;
    box-shadow: 0 2px 8px rgba(46, 139, 87, 0.1);
}

.category-tag {
    color: #10b981;
    font-weight: 600;
    font-size: 0.85rem;
    background:#e8f5e9;
    padding: 2px 8px;
    border-radius: 4px;
}

.article-title {
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.article-title:hover {
    color: #10b981;
}

.publish-time {
    color: #888;
    font-size: 0.85rem;
}

.list-group-item+.list-group-item {
    border-top-width: 1px!important;
}