/* --- WINDY RIBBON --- */
.windy-ribbon-wrapper {
    position: fixed; bottom: -1px; left: 0; width: 100%; height: 120px;
    z-index: 999; overflow: hidden; pointer-events: none;
}
.windy-ribbon-svg {
    position: absolute; bottom: 0; left: 0; width: 200%; height: 100%;
    animation: wind_flow 15s linear infinite;
}
.ribbon-path-1 { fill: var(--logo-red); opacity: 0.3; }
.ribbon-path-2 { fill: var(--logo-red); opacity: 0.6; }

@keyframes wind_flow { 
    from { transform: translateX(0); } 
    to { transform: translateX(-50%); } 
}

/* --- ZALO FLOATING WIDGET --- */
.zalo-container {
    position: fixed; bottom: 30px; right: 30px;
    z-index: 9999; display: flex; flex-direction: column;
    align-items: flex-end; gap: 15px;
}

.zalo-main {
    width: 60px; height: 60px; background-color: transparent; 
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; cursor: pointer; position: relative; z-index: 1001;
}

.zalo-main::before {
    content: ''; position: absolute; width: 100%; height: 100%;
    background-color: #0084FF; border-radius: 50%; opacity: 0.5;
    animation: zalo-pulse-standard 2s infinite; z-index: -1;
}

@keyframes zalo-pulse-standard {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
}

.zalo-icon-main img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 10px rgba(0, 132, 255, 0.4)); }
.zalo-close-icon { color: white; font-size: 24px; display: none; position: relative; z-index: 1; }

.zalo-list {
    display: flex; flex-direction: column; align-items: flex-end; gap: 15px;
    margin-bottom: 15px; opacity: 0; visibility: hidden;
    transform: translateY(30px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
}

.zalo-container.active .zalo-list {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
}

.zalo-item { display: flex; align-items: center; gap: 12px; text-decoration: none; transition: transform 0.3s ease; }
.zalo-item:hover { transform: translateX(-5px); }

.zalo-label {
    background: #ffffff; color: #333; padding: 8px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0; transform: translateX(10px); transition: all 0.3s ease;
}

.zalo-container.active .zalo-label { opacity: 1; transform: translateX(0); }

.zalo-icon-sub {
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 132, 255, 0.3);
    border: 2px solid #ffffff; transition: all 0.3s ease;
    overflow: hidden;
}

.zalo-icon-sub img { width: 100%; height: 100%; object-fit: cover; }

.zalo-item.pkd1 .zalo-icon-sub { background: #00a859; }
.zalo-item.pkd2 .zalo-icon-sub { background: #f37021; }
.zalo-item.pkd3 .zalo-icon-sub { background: #e31d2b; }

.zalo-container.active .zalo-icon-main { display: none; }
.zalo-container.active .zalo-close-icon { 
    display: flex; width: 60px; height: 60px; background: #ff4757; 
    border-radius: 50%; align-items: center; justify-content: center;
}