.news-page .banner {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin-bottom: 30px;
}
.news-page .banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    transition: opacity 1s;
}
.news-page .banner img.active { opacity: 1; z-index: 1; }
.news-page .dots {
    position: absolute; bottom: 15px; width: 100%;
    display: flex; justify-content: center; gap: 10px;
}
.news-page .dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: rgba(255,255,255,0.6); cursor: pointer;
    transition: background 0.3s;
}
.news-page .dot.active { background: #fff; }
.news-page .project-title {
    background: linear-gradient(90deg,#f1c40f,#e67e22);
    color: #fff;
    padding: 12px 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.news-page .project img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
}
.news-page .project h4 { margin-top: 8px; text-align: center; font-size: 16px; }
.news-page .lightbox {
    display: none; position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    justify-content: center; align-items: center;
    z-index: 9999;
}
.news-page .lightbox img { max-width: 90%; max-height: 80%; border-radius: 8px; box-shadow: 0 0 15px #000; }
.news-page .lightbox .close {
    position: absolute; top: 20px; right: 30px; font-size: 35px;
    color: #fff; font-weight: bold; text-decoration: none;
}
.news-page .lightbox .close:hover { color: #f1c40f; }
.news-page .contact-buttons { position: fixed; left: 10px; bottom: 16px; display: flex; flex-direction: column; gap: 15px; z-index: 1000; }
.news-page .contact-buttons a { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: #1abc9c; border-radius: 50%; color: white; text-decoration: none; font-size: 24px; transition: transform 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.3); animation: shake 2s infinite; }
@keyframes shake { 0% { transform: translate(0, 0) rotate(0deg); } 10% { transform: translate(-2px, 2px) rotate(-5deg); } 20% { transform: translate(-2px, -2px) rotate(5deg); } 30% { transform: translate(2px, 2px) rotate(0deg); } 40% { transform: translate(2px, -2px) rotate(5deg); } 50% { transform: translate(-2px, 2px) rotate(-5deg); } 60% { transform: translate(2px, 2px) rotate(0deg); } 70% { transform: translate(-2px, -2px) rotate(-5deg); } 80% { transform: translate(2px, 2px) rotate(5deg); } 90% { transform: translate(-2px, 2px) rotate(0deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
.news-page .contact-buttons a:hover { transform: scale(1.2); }
.news-page .contact-buttons a span { position: absolute; left: 70px; background-color: #1abc9c; color: white; padding: 5px 10px; border-radius: 5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; transform: translateX(-10px); }
.news-page .contact-buttons a:hover span { opacity: 1; transform: translateX(0); }
/* Flip tooltip on right side if container has on-right */
.news-page .contact-buttons.on-right a span { left: auto; right: 70px; transform: translateX(10px); }
.news-page .contact-buttons.on-right a:hover span { transform: translateX(0); }
@media (max-width: 767.98px) { .side-menu, .side-hotline { display: none; } }