/*
Theme Name: horizon
Description: Giao dien website horizon
Theme URI: https://vutruso.com
Author URI: https://vutruso.com
Template: flatsome
Version: 3.2
*/

.nav-dropdown>li.nav-dropdown-col{display:block}
.nav-dropdown{padding:0}
.nav-dropdown .nav-dropdown-col>a, .nav-dropdown li a{text-transform:none !important;font-size:15px; font-weight:500}
.nav-dropdown-default>li>a{border-bottom:0 !important}
.nav-dropdown-has-arrow li.has-dropdown:before{margin-left: -10px;}
.nav-dropdown .nav-dropdown-col>ul{margin-top:-42px;display:none;position: absolute;left: 100%;z-index: 9;background: white;}
.nav-dropdown>li.nav-dropdown-col{width:100%;border-right:0}
.nav-dropdown .nav-dropdown-col>ul li a{padding:10px; text-transform: none;color:black}
.header-nav li.nav-dropdown-col:hover >ul{display:block !important}

/* GENERAL */
.nav-dropdown {
    padding: 0;
}
.nav-dropdown li a {
    font-weight: 500 !important;
    font-size: 15px;
    text-transform: none !important;
}

/* ITEMS */
.nav-dropdown li a {
    padding: 12px 15px;
    color: #222;
    transition: 0.15s;
	padding-left: 8px!important;
	padding-right: 8px !important;
	border-radius: 4px;
}
.nav-dropdown li a:hover {
    background: #f3f3f3;
    color: #000;
}

/* ARROW FOR SUBMENU */
.nav-dropdown li.menu-item-has-children > a {
    position: relative;
    padding-right: 22px!important;
	border-radius: 4px;
}
.nav-dropdown li.menu-item-has-children > a::after {
    content: "\f105"; /* Chevron Right */
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; /* solid icon */
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: .6;
    transition: .2s;
}
.nav-dropdown li.menu-item-has-children:hover > a::after {
    opacity: 1;
}

/* LEVEL 2 SUBMENU */
.nav-dropdown.nav-dropdown-default {
    background: #fff;
    border: 1px solid #eee;
    padding: 6px 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.nav-dropdown>li.nav-dropdown-col {
    position: relative;
}

/* LEVEL 3 SUBMENU */
.nav-dropdown .nav-dropdown-col > ul {
    margin-top: -6px;    
	display: none;
    position: absolute;
    left: 100%;
    background: #fff;
    min-width: 220px;
    padding: 7.5px 0;
    border: 1px solid #eee;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    z-index: 9999;top: 0;
}

/* Show level 3 submenu */
.nav-dropdown li.menu-item-has-children:hover > ul {
    display: block !important;
}

.ft-cpho svg { background: red; } 
.ft-czal .zalo-img-wrapper { 
    background: #0068ff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
}
.ft-czal .zalo-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.ft-chatbox-skin1:hover { text-decoration: none; } 
#chat-mojs { transition: transform 0.3s ease; } 
.ft-chatbox-skin1 { position: fixed; z-index: 10150; right: 10px; bottom: 40px; width: 45px; } 
.ft-chatbox-skin1 a { display: block; position: relative; } 
.ft-chatbox-skin1 a:not(:last-child) { margin-bottom: 15px; } 
.ft-chatbox-skin1 a span { display: none; } 
.ft-chatbox-skin1 svg { width: 45px; margin: auto; 50%!important; opacity: 0.9; } 
.ft-chatbox-skin1 i { display: block; line-height: 0; transform: translate3d(0, 0, 0) scale(1); transition: all 0.3s ease; border-radius: 11px; animation: gentleFloat 4s ease-in-out infinite, wobbleShake 6s ease-in-out infinite; } 
@keyframes gentleFloat { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-3px) scale(1.02); } } 
@keyframes wobbleShake { 0%, 100% { transform: translateY(0px) rotate(0deg); } 10% { transform: translateY(-1px) rotate(-1deg); } 20% { transform: translateY(1px) rotate(1deg); } 30% { transform: translateY(-1px) rotate(-0.5deg); } 40% { transform: translateY(1px) rotate(0.5deg); } 50% { transform: translateY(0px) rotate(0deg); } 60% { transform: translateY(-1px) rotate(1deg); } 70% { transform: translateY(1px) rotate(-1deg); } 80% { transform: translateY(-1px) rotate(0.5deg); } 90% { transform: translateY(1px) rotate(-0.5deg); } } 
.ft-chatbox-skin1 i:hover { transform: translateY(-5px) scale(1.1) rotate(5deg); animation: shakeOnHover 0.6s ease-in-out; } 
@keyframes shakeOnHover { 0%, 100% { transform: translateY(-5px) scale(1.1) rotate(5deg); } 10% { transform: translateY(-7px) scale(1.1) rotate(3deg); } 20% { transform: translateY(-3px) scale(1.1) rotate(7deg); } 30% { transform: translateY(-6px) scale(1.1) rotate(2deg); } 40% { transform: translateY(-4px) scale(1.1) rotate(8deg); } 50% { transform: translateY(-5px) scale(1.1) rotate(5deg); } 60% { transform: translateY(-7px) scale(1.1) rotate(3deg); } 70% { transform: translateY(-3px) scale(1.1) rotate(7deg); } 80% { transform: translateY(-6px) scale(1.1) rotate(4deg); } 90% { transform: translateY(-4px) scale(1.1) rotate(6deg); } } 
.ft-chatbox-skin1 .ft-cpho i { box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3); transition: all 0.3s ease; animation: breathingGreen 3s ease-in-out infinite; } 
.ft-chatbox-skin1 .ft-cpho i:hover { box-shadow: 0 8px 25px rgba(76, 175, 80, 0.6); animation-play-state: paused; } 
.ft-chatbox-skin1 .ft-czal i { box-shadow: 0 2px 10px rgba(0, 104, 255, 0.3); transition: all 0.3s ease; animation: breathingCyan 4s ease-in-out infinite; } 
.ft-chatbox-skin1 .ft-czal i:hover { box-shadow: 0 8px 25px rgba(0, 104, 255, 0.6); animation-play-state: paused; } 
@keyframes breathingGreen { 0%, 100% { box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3); } 50% { box-shadow: 0 4px 15px rgba(76, 175, 80, 0.5); } } 
@keyframes breathingCyan { 0%, 100% { box-shadow: 0 2px 10px rgba(0, 104, 255, 0.3); } 50% { box-shadow: 0 4px 15px rgba(0, 104, 255, 0.5); } } 
.ft-chatbox-skin1 i, .ft-chatbox-skin1 svg, .ft-chatbox-skin1 a:hover span { border-radius: 11px; } 
.ft-chatbox-skin1 { animation: fadeInUp 0.6s ease-out; } 
.ft-chatbox-skin1 a { animation: slideInLeft 0.8s ease-out; animation-fill-mode: both; } 
.ft-chatbox-skin1 a:nth-child(1) { animation-delay: 0.1s; } 
.ft-chatbox-skin1 a:nth-child(2) { animation-delay: 0.2s; } 
.ft-chatbox-skin1 a:nth-child(1) i { animation-delay: 0s; } 
.ft-chatbox-skin1 a:nth-child(2) i { animation-delay: 0.5s; } 
@keyframes tooltipSlide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 0.9; transform: translateX(0); } } 
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } 
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } 
.ft-chatbox-skin1:before { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; background: #ff4444; border-radius: 50%; animation: notificationBlink 2s ease-in-out infinite; } 
@keyframes notificationBlink { 0%, 70%, 100% { opacity: 0; transform: scale(0.8); } 35% { opacity: 1; transform: scale(1.2); } }

@media (max-width: 768px) {
    .ft-chatbox-skin1 {
        left: 50% !important;
        bottom: 10px;
        transform: translateX(-50%);
        width: auto;
        display: flex;
        gap: 15px;
    }

    .ft-chatbox-skin1 a {
        margin: 0 !important;
    }

    .ft-chatbox-skin1 svg {
        width: 50px;
    }
    
    .ft-czal .zalo-img-wrapper {
        width: 50px;
        height: 50px;
    }
    
    .ft-czal .zalo-logo {
        width: 32px;
        height: 32px;
    }
}