/*
	Theme Name:   Jannah Child
	Theme URI:    http://jannah.tielabs.com/
	Description:  Jannh Child Theme
	Author:       TieLabs
	Author URI:   https://tielabs.com
	Template:     jannah
	Version:      1.0.2
	License:      license purchased
	License URI:  http://themeforest.net/licenses/regular_extended
	Tags:         Tags: two-columns, buddypress, left-sidebar, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, microformats, rtl-language-support, sticky-post, threaded-comments, translation-ready
	Text Domain:  jannah-child
*/


/* write custom css after this line */

nav.main-nav.menu-style-default .menu>li.tie-current-menu {
	border-bottom: none;
}

.normal-side .tabs, .the-global-title {
	background-color: #024682 !important;
}

.container-wrapper, #widget_tabs-1-popular {
	padding: 10px !important;
}

body .tabs.tabs a {
	color: white;
}

body .tabs.tabs .active>a {
	color: yellow;
}

.post-excerpt {
	font-size: 15px !important;
	color: black !important;
}

.mag-box-filter-links.is-flex-tabs li:not(:last-child) {
	position: relative;
	padding-right: 5px;
	margin-right: 5px;
}

.mag-box-filter-links.is-flex-tabs li:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 60%;
	width: 1px;
	background-color: #ccc;
}

.block-custom-content-50 .wp-block-image {
	margin: 0;
	line-height: 0;
}

/* Hiệu ứng zoom nhẹ khi hover */
.block-custom-content-50 .wp-block-image img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.block-custom-content-50 .wp-block-image:hover img {
    transform: scale(1.01);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.half-box .posts-items li:first-child {
	max-height: 483px;
}

#text-html-widget-2 > div:nth-child(2) {
	height: 150px;
	overflow-y: scroll;
}

#tie-block_1996 {
	border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px;
}

#metaslider_widget-3 {
	margin-bottom: 10px;
}

div.widget-title.the-global-title, div.mag-box-title.the-global-title {
	margin-bottom: 10px;
}

#metaslider_1849 img, #metaslider_1843 img {
	height: 162px;
}

#tie-block_1996 .centered-title-slider .thumb-overlay .container {
	top: 62%;
    text-align: left;
}

#tie-block_1996 .main-slider .thumb-meta {
	color: #ffffff00;
}

body {
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #e8f5ff 0%, #d4edfd 25%, #b8e2f5 50%, #9ad4ed 75%, #1b98e0 100%) !important;
    background-color: transparent !important;
    background-size: 400% 400% !important;
    animation: sandyShore 8s ease-in-out infinite !important;
    min-height: 100vh;
    position: relative;
}

/* Tạo hiệu ứng hạt nước/sóng nhỏ */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.2) 2px, transparent 0),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.15) 2px, transparent 0),
        radial-gradient(circle at 40% 90%, rgba(255,255,255,0.1) 2px, transparent 0),
        radial-gradient(circle at 60% 10%, rgba(255,255,255,0.25) 2px, transparent 0);
    background-size: 100px 100px, 150px 150px, 200px 200px, 120px 120px;
    animation: waterMovement 15s linear infinite;
}

/* Hiệu ứng sóng biển */
body::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(180deg, transparent 0%, rgba(27, 152, 224, 0.4) 70%, rgba(27, 152, 224, 0.6) 100%) !important;
    animation: waveMotion 6s ease-in-out infinite;
}

/* Animation cho hiệu ứng nước */
@keyframes sandyShore {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Animation cho chuyển động nước */
@keyframes waterMovement {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 100px 100px, 150px 150px, 200px 200px, 120px 120px;
    }
}

/* Animation cho sóng biển */
@keyframes waveMotion {
    0%, 100% {
        transform: translateY(0) scaleY(1);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-10px) scaleY(1.1);
        opacity: 0.6;
    }
}

/* Hiệu ứng bong bóng nước */
.water-bubble {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: bubble 4s infinite;
}

@keyframes bubble {
    0%, 100% { 
        opacity: 0; 
        transform: translateY(0) scale(0); 
    }
    50% { 
        opacity: 0.7; 
        transform: translateY(-20px) scale(1); 
    }
}

.mc-main.mini .event-icon {
	display: none;
}

#posts-list-widget-13 .post-meta {
	display: none;
}

#posts-list-widget-13 .post-widget-thumbnail {
	margin-bottom: 19px;
	margin-top: 5px;
}