/*
 Theme Name:   Tình Yêu Chúa - Flatsome Child
 Theme URI:    https://tinhyeuchua.com/
 Description:  Theme Công Giáo hiện đại cho tinhyeuchua.com
 Author:       HoangTu Technology
 Author URI:   https://hoangtutech.com
 Template:     flatsome
 Version:      1.0.0
 Text Domain:  tinhyeuchua
*/

/* ==========================================================================
   Tình Yêu Chúa - Design Tokens
   ========================================================================== */
:root {
   /* Primary Colors - Blue Gradient */
   --tyc-primary: #0084ff;
   --tyc-primary-dark: #0066cc;
   --tyc-primary-light: #33a1ff;
   --tyc-gradient: linear-gradient(135deg, rgb(0, 132, 255) 0%, rgb(0, 102, 204) 100%);
   --tyc-gradient-hover: linear-gradient(135deg, rgb(0, 102, 204) 0%, rgb(0, 82, 164) 100%);

   /* Accent Colors */
   --tyc-accent: #ff6b35;
   --tyc-accent-light: #ff8a5c;
   --tyc-gold: #f4b942;

   /* Text Colors */
   --tyc-text: #2d3748;
   --tyc-text-light: #718096;
   --tyc-text-muted: #a0aec0;
   --tyc-heading: #1a202c;

   /* Background Colors */
   --tyc-bg: #ffffff;
   --tyc-bg-soft: #f7fafc;
   --tyc-bg-alt: #edf2f7;
   --tyc-bg-dark: #1a202c;

   /* Border */
   --tyc-border: #e2e8f0;
   --tyc-border-light: #edf2f7;

   /* Spacing */
   --tyc-space-xs: 0.25rem;
   --tyc-space-sm: 0.5rem;
   --tyc-space-md: 1rem;
   --tyc-space-lg: 1.5rem;
   --tyc-space-xl: 2rem;
   --tyc-space-2xl: 3rem;
   --tyc-space-3xl: 4rem;

   /* Border Radius */
   --tyc-radius-sm: 6px;
   --tyc-radius-md: 12px;
   --tyc-radius-lg: 16px;
   --tyc-radius-xl: 24px;
   --tyc-radius-full: 9999px;

   /* Shadows */
   --tyc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
   --tyc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --tyc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
   --tyc-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);
   --tyc-shadow-primary: 0 4px 20px rgba(0, 132, 255, 0.3);

   /* Transitions */
   --tyc-transition: 0.3s ease;
   --tyc-transition-fast: 0.15s ease;
}

/* ==========================================================================
   Global Styles
   ========================================================================== */

body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   color: var(--tyc-text);
   background-color: var(--tyc-bg);
   line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
   font-weight: 700;
   color: var(--tyc-heading);
   line-height: 1.3;
}

a {
   color: var(--tyc-primary);
   transition: color var(--tyc-transition);
}

a:hover {
   color: var(--tyc-primary-dark);
}

/* Selection */
::selection {
   background-color: var(--tyc-primary);
   color: #fff;
}

/* ==========================================================================
   Header - Modern Clean Style
   ========================================================================== */

/* Top Bar */
.header-top {
   background: var(--tyc-gradient) !important;
   color: #fff;
   font-size: 13px;
   padding: 8px 0;
}

.header-top a {
   color: rgba(255, 255, 255, 0.9) !important;
}

.header-top a:hover {
   color: #fff !important;
}

/* Main Header */
.header-main {
   background-color: var(--tyc-bg) !important;
   box-shadow: var(--tyc-shadow-sm);
   padding: 15px 0;
}

/* Logo */
.logo img {
   max-height: 55px;
   width: auto;
}

/* Navigation */
.header-nav .nav>li>a {
   font-weight: 600;
   font-size: 14px;
   color: var(--tyc-heading) !important;
   padding: 12px 18px;
   border-radius: var(--tyc-radius-md);
   transition: all var(--tyc-transition);
}

.header-nav .nav>li>a:hover,
.header-nav .nav>li.active>a,
.header-nav .nav>li.current-menu-item>a {
   color: var(--tyc-primary) !important;
   background-color: var(--tyc-bg-soft);
}

/* Dropdown */
.header-nav .nav-dropdown {
   background-color: var(--tyc-bg);
   border: 1px solid var(--tyc-border-light);
   box-shadow: var(--tyc-shadow-lg);
   border-radius: var(--tyc-radius-lg);
   padding: 12px;
   min-width: 220px;
}

.header-nav .nav-dropdown li a {
   padding: 10px 16px;
   font-size: 14px;
   color: var(--tyc-text) !important;
   border-radius: var(--tyc-radius-sm);
}

.header-nav .nav-dropdown li a:hover {
   background-color: var(--tyc-bg-soft);
   color: var(--tyc-primary) !important;
}

/* Search & Icons */
.nav-icon {
   width: 42px;
   height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--tyc-bg-soft);
   border-radius: var(--tyc-radius-full);
   transition: all var(--tyc-transition);
}

.nav-icon:hover {
   background: var(--tyc-gradient);
   color: #fff !important;
}

.nav-icon:hover i {
   color: #fff !important;
}

/* ==========================================================================
   Hero Section - Gradient Style
   ========================================================================== */

.tyc-hero {
   position: relative;
   min-height: 550px;
   overflow: hidden;
   border-radius: 0 0 var(--tyc-radius-xl) var(--tyc-radius-xl);
}

.tyc-hero-slider .slide {
   position: relative;
   width: 100%;
   min-height: 550px;
}

.tyc-hero-slider .banner-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.tyc-hero-slider .banner-bg::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(0, 132, 255, 0.85) 0%, rgba(0, 102, 204, 0.9) 100%);
}

.tyc-hero-slider .banner-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.tyc-hero-slider .banner-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
   max-width: 800px;
   padding: 40px;
   z-index: 10;
}

.tyc-hero-slider .banner-category {
   display: inline-block;
   padding: 8px 20px;
   background-color: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(10px);
   color: #fff;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   border-radius: var(--tyc-radius-full);
   margin-bottom: 20px;
}

.tyc-hero-slider .banner-title {
   font-size: 3rem;
   font-weight: 800;
   line-height: 1.2;
   margin-bottom: 20px;
   color: #fff;
}

.tyc-hero-slider .banner-title a {
   color: #fff;
}

.tyc-hero-slider .banner-title a:hover {
   opacity: 0.9;
}

.tyc-hero-slider .banner-excerpt {
   font-size: 1.1rem;
   color: rgba(255, 255, 255, 0.9);
   line-height: 1.7;
   margin-bottom: 25px;
}

.tyc-hero-slider .banner-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 32px;
   background-color: #fff;
   color: var(--tyc-primary);
   font-weight: 600;
   border-radius: var(--tyc-radius-full);
   transition: all var(--tyc-transition);
}

.tyc-hero-slider .banner-btn:hover {
   transform: translateY(-3px);
   box-shadow: var(--tyc-shadow-lg);
   color: var(--tyc-primary-dark);
}

/* Flickity Navigation */
.tyc-hero-slider .flickity-page-dots {
   bottom: 30px;
}

.tyc-hero-slider .flickity-page-dots .dot {
   width: 12px;
   height: 12px;
   background-color: rgba(255, 255, 255, 0.4);
   border: none;
   margin: 0 6px;
}

.tyc-hero-slider .flickity-page-dots .dot.is-selected {
   background-color: #fff;
   transform: scale(1.2);
}

.tyc-hero-slider .flickity-prev-next-button {
   width: 50px;
   height: 50px;
   background-color: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(10px);
   color: #fff;
   border-radius: var(--tyc-radius-full);
   transition: all var(--tyc-transition);
}

.tyc-hero-slider .flickity-prev-next-button:hover {
   background-color: #fff;
   color: var(--tyc-primary);
}

/* ==========================================================================
   News Cards - Modern Style
   ========================================================================== */

.tyc-card {
   background-color: var(--tyc-bg);
   border-radius: var(--tyc-radius-lg);
   overflow: hidden;
   box-shadow: var(--tyc-shadow-sm);
   transition: all var(--tyc-transition);
   border: 1px solid var(--tyc-border-light);
}

.tyc-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--tyc-shadow-xl);
   border-color: transparent;
}

.tyc-card .card-image {
   position: relative;
   overflow: hidden;
   aspect-ratio: 16/10;
}

.tyc-card .card-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--tyc-transition);
}

.tyc-card:hover .card-image img {
   transform: scale(1.08);
}

.tyc-card .card-category {
   position: absolute;
   top: 16px;
   left: 16px;
   padding: 6px 14px;
   background: var(--tyc-gradient);
   color: #fff;
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   border-radius: var(--tyc-radius-full);
   box-shadow: var(--tyc-shadow-primary);
}

.tyc-card .card-content {
   padding: var(--tyc-space-xl);
}

.tyc-card .card-title {
   font-size: 1.15rem;
   font-weight: 700;
   line-height: 1.4;
   margin-bottom: var(--tyc-space-sm);
   color: var(--tyc-heading);
}

.tyc-card .card-title a {
   color: var(--tyc-heading);
}

.tyc-card .card-title a:hover {
   color: var(--tyc-primary);
}

.tyc-card .card-excerpt {
   font-size: 14px;
   color: var(--tyc-text-light);
   line-height: 1.6;
   margin-bottom: var(--tyc-space-md);
}

.tyc-card .card-meta {
   display: flex;
   align-items: center;
   gap: var(--tyc-space-md);
   font-size: 13px;
   color: var(--tyc-text-muted);
}

.tyc-card .card-meta i {
   margin-right: 4px;
   color: var(--tyc-primary);
}

/* Card Overlay Style */
.tyc-card-overlay {
   position: relative;
   border-radius: var(--tyc-radius-lg);
   overflow: hidden;
   aspect-ratio: 16/10;
}

.tyc-card-overlay .card-image {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.tyc-card-overlay .card-image::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
}

.tyc-card-overlay .card-content {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: var(--tyc-space-xl);
}

.tyc-card-overlay .card-title {
   color: #fff;
   font-size: 1.35rem;
}

.tyc-card-overlay .card-title a {
   color: #fff;
}

.tyc-card-overlay .card-meta {
   color: rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Section Styles
   ========================================================================== */

.tyc-section {
   padding: var(--tyc-space-3xl) 0;
}

.tyc-section-soft {
   background-color: var(--tyc-bg-soft);
}

.tyc-section-gradient {
   background: var(--tyc-gradient);
   color: #fff;
}

.tyc-section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--tyc-space-2xl);
   flex-wrap: wrap;
   gap: var(--tyc-space-md);
}

.tyc-section-title {
   font-size: 2rem;
   font-weight: 800;
   color: var(--tyc-heading);
   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 12px;
}

.tyc-section-title::before {
   content: '';
   width: 5px;
   height: 30px;
   background: var(--tyc-gradient);
   border-radius: var(--tyc-radius-full);
}

.tyc-section-gradient .tyc-section-title {
   color: #fff;
}

.tyc-section-gradient .tyc-section-title::before {
   background: #fff;
}

/* View All Link */
.tyc-view-all {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 20px;
   background-color: var(--tyc-bg-soft);
   color: var(--tyc-primary);
   font-size: 14px;
   font-weight: 600;
   border-radius: var(--tyc-radius-full);
   transition: all var(--tyc-transition);
}

.tyc-view-all:hover {
   background: var(--tyc-gradient);
   color: #fff;
   transform: translateX(5px);
}

/* ==========================================================================
   Prayer Section - Glass Effect
   ========================================================================== */

.tyc-prayer-card {
   background: var(--tyc-gradient);
   padding: var(--tyc-space-3xl);
   border-radius: var(--tyc-radius-xl);
   text-align: center;
   position: relative;
   overflow: hidden;
}

.tyc-prayer-card::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -50%;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
}

.tyc-prayer-card .prayer-icon {
   font-size: 4rem;
   margin-bottom: var(--tyc-space-lg);
   filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.tyc-prayer-card .prayer-title {
   font-size: 1.75rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: var(--tyc-space-md);
}

.tyc-prayer-card .prayer-text {
   font-size: 1.1rem;
   font-style: italic;
   line-height: 1.8;
   color: rgba(255, 255, 255, 0.95);
   margin-bottom: var(--tyc-space-xl);
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
}

.tyc-prayer-card .prayer-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 32px;
   background-color: #fff;
   color: var(--tyc-primary);
   font-weight: 600;
   border-radius: var(--tyc-radius-full);
   transition: all var(--tyc-transition);
}

.tyc-prayer-card .prayer-btn:hover {
   transform: translateY(-3px);
   box-shadow: var(--tyc-shadow-xl);
}

/* ==========================================================================
   Radio Section - Modern Player
   ========================================================================== */

.tyc-radio-section {
   background: var(--tyc-bg-dark);
   padding: var(--tyc-space-2xl);
   border-radius: var(--tyc-radius-xl);
}

.tyc-radio-section .section-title {
   color: #fff;
   margin-bottom: var(--tyc-space-xl);
}

.tyc-radio-player {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   padding: var(--tyc-space-xl);
   border-radius: var(--tyc-radius-lg);
}

.tyc-radio-player audio {
   width: 100%;
   filter: hue-rotate(200deg);
}

/* ==========================================================================
   Footer - Modern Dark
   ========================================================================== */

.footer-wrapper {
   background-color: var(--tyc-bg-dark) !important;
}

.footer-1 {
   background-color: var(--tyc-bg-dark) !important;
   padding: var(--tyc-space-3xl) 0;
}

.footer-1 .widget-title {
   color: #fff !important;
   font-size: 1.1rem;
   font-weight: 700;
   margin-bottom: var(--tyc-space-lg);
   position: relative;
   padding-bottom: 12px;
}

.footer-1 .widget-title::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 40px;
   height: 3px;
   background: var(--tyc-gradient);
   border-radius: var(--tyc-radius-full);
}

.footer-1 ul li {
   padding: 10px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-1 ul li:last-child {
   border-bottom: none;
}

.footer-1 ul li a {
   color: rgba(255, 255, 255, 0.7) !important;
   font-size: 14px;
   transition: all var(--tyc-transition);
}

.footer-1 ul li a:hover {
   color: var(--tyc-primary-light) !important;
   padding-left: 5px;
}

/* Footer Social */
.footer-social-icons a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   background-color: rgba(255, 255, 255, 0.1);
   color: #fff !important;
   border-radius: var(--tyc-radius-md);
   margin: 0 5px;
   transition: all var(--tyc-transition);
}

.footer-social-icons a:hover {
   background: var(--tyc-gradient);
   transform: translateY(-4px);
}

/* Footer Bottom */
.absolute-footer,
.footer-2 {
   background-color: #0d1117 !important;
   color: rgba(255, 255, 255, 0.6);
   font-size: 13px;
   padding: var(--tyc-space-lg) 0;
}

.absolute-footer a {
   color: var(--tyc-primary-light) !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button.primary,
button.primary,
.wc-forward,
.checkout-button,
input[type="submit"] {
   background: var(--tyc-gradient) !important;
   border: none !important;
   color: #fff !important;
   font-weight: 600;
   border-radius: var(--tyc-radius-md);
   padding: 14px 28px;
   transition: all var(--tyc-transition);
   box-shadow: var(--tyc-shadow-primary);
}

.button.primary:hover,
button.primary:hover,
.wc-forward:hover,
.checkout-button:hover,
input[type="submit"]:hover {
   background: var(--tyc-gradient-hover) !important;
   transform: translateY(-2px);
   box-shadow: 0 6px 25px rgba(0, 132, 255, 0.4);
}

.button.secondary {
   background-color: var(--tyc-bg-dark) !important;
   color: #fff !important;
   border: none !important;
}

/* Outline Button */
.button.outline,
.btn-outline {
   background: transparent !important;
   border: 2px solid var(--tyc-primary) !important;
   color: var(--tyc-primary) !important;
}

.button.outline:hover,
.btn-outline:hover {
   background: var(--tyc-gradient) !important;
   border-color: transparent !important;
   color: #fff !important;
}

/* ==========================================================================
   Category Badge
   ========================================================================== */

.post-category,
.post-cat,
.category-badge {
   background: var(--tyc-gradient) !important;
   color: #fff !important;
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   padding: 6px 14px;
   border-radius: var(--tyc-radius-full);
}

/* ==========================================================================
   Single Post
   ========================================================================== */

.single-post .entry-title {
   font-size: 2.75rem;
   line-height: 1.25;
   margin-bottom: var(--tyc-space-lg);
}

.single-post .entry-meta {
   color: var(--tyc-text-muted);
   font-size: 14px;
   margin-bottom: var(--tyc-space-xl);
   padding-bottom: var(--tyc-space-lg);
   border-bottom: 1px solid var(--tyc-border);
}

.single-post .entry-content {
   font-size: 17px;
   line-height: 1.85;
}

.single-post .entry-content p {
   margin-bottom: var(--tyc-space-lg);
}

.single-post .entry-content h2,
.single-post .entry-content h3 {
   margin-top: var(--tyc-space-2xl);
   margin-bottom: var(--tyc-space-md);
}

/* Author Box */
.author-box {
   background-color: var(--tyc-bg-soft);
   padding: var(--tyc-space-xl);
   border-radius: var(--tyc-radius-lg);
   margin: var(--tyc-space-2xl) 0;
   border-left: 4px solid var(--tyc-primary);
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar .widget {
   margin-bottom: var(--tyc-space-xl);
   padding: var(--tyc-space-xl);
   background-color: var(--tyc-bg);
   border-radius: var(--tyc-radius-lg);
   box-shadow: var(--tyc-shadow-sm);
   border: 1px solid var(--tyc-border-light);
}

.sidebar .widget-title {
   font-size: 1.1rem;
   font-weight: 700;
   margin-bottom: var(--tyc-space-lg);
   padding-bottom: var(--tyc-space-sm);
   border-bottom: 3px solid var(--tyc-primary);
   display: inline-block;
}

/* ==========================================================================
   Load More Button
   ========================================================================== */

.tyc-load-more-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 16px 40px;
   background: var(--tyc-gradient);
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   border: none;
   border-radius: var(--tyc-radius-full);
   cursor: pointer;
   transition: all var(--tyc-transition);
   box-shadow: var(--tyc-shadow-primary);
}

.tyc-load-more-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 30px rgba(0, 132, 255, 0.4);
}

.tyc-load-more-btn.loading {
   opacity: 0.7;
   pointer-events: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 849px) {
   .tyc-hero-slider .banner-title {
      font-size: 2rem;
   }

   .tyc-hero-slider .banner-content {
      padding: 30px;
   }

   .tyc-section-title {
      font-size: 1.5rem;
   }

   .single-post .entry-title {
      font-size: 2rem;
   }
}

@media (max-width: 549px) {
   .tyc-hero-slider .slide {
      min-height: 400px;
   }

   .tyc-hero-slider .banner-title {
      font-size: 1.5rem;
   }

   .tyc-hero-slider .banner-excerpt {
      display: none;
   }

   .tyc-hero-slider .flickity-prev-next-button {
      display: none;
   }

   .tyc-section-header {
      flex-direction: column;
      align-items: flex-start;
   }

   .tyc-prayer-card {
      padding: var(--tyc-space-xl);
   }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-primary {
   color: var(--tyc-primary) !important;
}

.text-gradient {
   background: var(--tyc-gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.bg-gradient {
   background: var(--tyc-gradient) !important;
}

.bg-soft {
   background-color: var(--tyc-bg-soft) !important;
}

.rounded-xl {
   border-radius: var(--tyc-radius-xl) !important;
}

.shadow-primary {
   box-shadow: var(--tyc-shadow-primary) !important;
}
/* Rosary mystery text styling */
.kinh-nguyen-content em strong,
.entry-content em strong,
.single-kinh-nguyen em strong,
article em strong {
    color: #3b82f6 !important;
}

/* Rosary content styling - important parts */
.entry-content h2 {
    color: #1e40af !important;
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 8px;
}

/* Mystery title label (5 Sự VUI, etc) */
.entry-content h2:contains("Mầu Nhiệm") {
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
}

/* Kinh labels - red color */
.entry-content strong:first-child {
    color: #dc2626;
}

/* Prayer instructions */
.entry-content p:contains("Đọc:") {
    background: #f0fdf4;
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 3px solid #22c55e;
}

/* Force bold for em strong */
.entry-content em strong,
article em strong {
    font-weight: 700 !important;
    color: #3b82f6 !important;
}