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

.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: #4caf50; } .ft-cmes svg { background: #0082ff; } .ft-czal svg { background: #0068ff; } .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: 10px; 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; border-radius: 100%; 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); } } /* Shadow với hiệu ứng breathing */ .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-cmes i { box-shadow: 0 2px 10px rgba(0, 130, 255, 0.3); transition: all 0.3s ease; animation: breathingBlue 3.5s ease-in-out infinite; } .ft-chatbox-skin1 .ft-cmes i:hover { box-shadow: 0 8px 25px rgba(0, 130, 255, 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; } /* Breathing animations cho từng màu */ @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 breathingBlue { 0%, 100% { box-shadow: 0 2px 10px rgba(0, 130, 255, 0.3); } 50% { box-shadow: 0 4px 15px rgba(0, 130, 255, 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; } /* Animation xuất hiện mượt mà cho cả nhóm */ .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(3) { animation-delay: 0.3s; } /* Animation delay khác nhau cho floating effect */ .ft-chatbox-skin1 a:nth-child(1) i { animation-delay: 0s; } .ft-chatbox-skin1 a:nth-child(2) i { animation-delay: 0.5s; } .ft-chatbox-skin1 a:nth-child(3) i { animation-delay: 1s; } @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; /* cho rộng theo nội dung */
        display: flex;
        gap: 15px; /* khoảng cách giữa các icon */
    }

    .ft-chatbox-skin1 a {
        margin: 0 !important; /* bỏ margin-bottom cũ */
    }

    .ft-chatbox-skin1 svg {
        width: 50px; /* icon lớn hơn chút trên mobile */
    }
}