.footer {
     background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
     color: white;
     position: relative;
     overflow: hidden;
 }

 .footer::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.05"><polygon points="0,0 1000,100 1000,100 0,100"/></svg>');
     background-size: cover;
 }

 .footer-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 60px 20px 0;
     position: relative;
     z-index: 1;
 }

 .footer-content {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1.5fr;
     gap: 40px;
     margin-bottom: 40px;
 }

 /* Logo và thông tin liên hệ */
 .footer-section {
     animation: fadeInUp 0.6s ease-out;
 }

 .footer-section:nth-child(2) {
     animation-delay: 0.1s;
 }

 .footer-section:nth-child(3) {
     animation-delay: 0.2s;
 }

 .footer-section:nth-child(4) {
     animation-delay: 0.3s;
 }

 .footer-logo {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 25px;
     padding: 10px 0;
 }

 .footer-logo img {
     width: 60px;
     height: 60px;
     border-radius: 10px;
     box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
     transition: transform 0.3s ease;
 }

 .footer-logo img:hover {
     transform: scale(1.05);
 }

 .footer-logo h3 {
     color: #ffd700;
     margin: 0;
     font-size: 22px;
     font-weight: 700;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }

 .footer-contact {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .contact-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 8px 0;
     transition: transform 0.3s ease;
 }

 .contact-item:hover {
     transform: translateX(5px);
 }

 .contact-item svg {
     flex-shrink: 0;
     background: rgba(255, 215, 0, 0.1);
     padding: 8px;
     border-radius: 8px;
     width: 32px;
     height: 32px;
 }

 .contact-item span {
     font-size: 14px;
     line-height: 1.5;
 }

 /* Section headers */
 .footer-section h4 {
     color: #ffd700;
     margin-bottom: 25px;
     font-size: 18px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     position: relative;
     padding-bottom: 10px;
 }

 .footer-section h4::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 30px;
     height: 3px;
     background: #ffd700;
     border-radius: 2px;
 }

 .footer-section h5 {
     color: #ffd700;
     margin-bottom: 15px;
     font-size: 16px;
     font-weight: 600;
 }

 /* Menu links */
 .footer-section ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-section ul li {
     margin-bottom: 12px;
     transition: transform 0.3s ease;
 }

 .footer-section ul li:hover {
     transform: translateX(5px);
 }

 .footer-section ul li a {
     color: #e6e6e6;
     text-decoration: none;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     font-size: 14px;
     line-height: 1.6;
 }

 .footer-section ul li a::before {
     content: '▶';
     margin-right: 8px;
     font-size: 8px;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .footer-section ul li a:hover {
     color: #ffd700;
     padding-left: 10px;
 }

 .footer-section ul li a:hover::before {
     opacity: 1;
 }

 /* Social Links */
 .social-links {
     display: flex;
     gap: 15px;
     margin-bottom: 30px;
     flex-wrap: wrap;
 }

 .social-link {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 45px;
     height: 45px;
     border-radius: 12px;
     text-decoration: none;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .social-link::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s ease;
 }

 .social-link:hover::before {
     left: 100%;
 }

 .social-link.facebook {
     background: linear-gradient(45deg, #1877f2, #42a5f5);
 }

 .social-link.tiktok {
     background: linear-gradient(45deg, #000000, #333333);
 }

 .social-link.youtube {
     background: linear-gradient(45deg, #ff0000, #ff5722);
 }

 .social-link:hover {
     transform: translateY(-3px) scale(1.05);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
 }

 /* Newsletter Form */
 .newsletter-form {
     display: flex;
     gap: 8px;
     margin-top: 15px;
 }

 .newsletter-form input {
     flex: 1;
     padding: 12px 15px;
     border: none;
     border-radius: 25px;
     font-size: 14px;
     background: rgba(255, 255, 255, 0.9);
     transition: all 0.3s ease;
 }

 .newsletter-form input:focus {
     outline: none;
     background: white;
     box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.3);
 }

 .newsletter-form button {
     padding: 12px 20px;
     background: linear-gradient(45deg, #ffd700, #ffed4a);
     border: none;
     border-radius: 25px;
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: 600;
     color: #1e3c72;
 }

 .newsletter-form button:hover {
     background: linear-gradient(45deg, #ffed4a, #ffd700);
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
 }

 /* Footer Bottom */
 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     padding: 30px 0;
     text-align: center;
     background: rgba(0, 0, 0, 0.1);
 }

 .footer-copyright p {
     margin: 8px 0;
     color: #b8b8b8;
     font-size: 14px;
     line-height: 1.6;
 }

 .footer-copyright a {
     color: #ffd700;
     text-decoration: none;
     font-weight: 600;
     transition: color 0.3s ease;
 }

 .footer-copyright a:hover {
     color: #ffed4a;
 }

 /* Floating Buttons */
 .floating-buttons {
     position: fixed;
     top: 50%;
     right: 20px;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     gap: 15px;
     z-index: 999;
 }

 .floating-btn {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     cursor: pointer;
     position: relative;
     overflow: visible;
     z-index: 1;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }

 .floating-btn svg {
     z-index: 2;
     position: relative;
 }

 .floating-btn:hover {
     transform: scale(1.1);
 }

 .floating-btn::before,
 .floating-btn::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     transform: translate(-50%, -50%);
     background: transparent;
     border: 2px solid rgba(255, 215, 0, 0.6);
     animation: pulse-border 2.5s infinite ease-out;
     z-index: 0;
 }

 .floating-btn::before {
     animation-delay: 0s;
 }

 .floating-btn::after {
     animation-delay: 1.25s;
 }

 .call-btn {
     background: linear-gradient(45deg, #10b981, #34d399);
 }

 .zalo-btn {
     background: linear-gradient(45deg, #2563eb, #3b82f6);
 }

 .scroll-top-btn {
     background: linear-gradient(45deg, #f59e0b, #fbbf24);
 }

 /* Animations */
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes pulse-border {
     0% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 0.8;
         border-color: rgba(255, 215, 0, 0.6);
     }

     50% {
         opacity: 0.4;
     }

     100% {
         transform: translate(-50%, -50%) scale(2.2);
         opacity: 0;
         border-color: rgba(255, 215, 0, 0.1);
     }
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
     .footer-content {
         grid-template-columns: repeat(3, 1fr);
         gap: 30px;
     }

     .floating-buttons {
         right: 15px;
     }
 }

 @media (max-width: 768px) {
     .footer-container {
         padding: 40px 15px 0;
     }

     .footer-content {
         grid-template-columns: repeat(2, 1fr);
         gap: 25px;
     }

     .footer-logo {
         justify-content: center;
         text-align: center;
     }

     .footer-contact {
         align-items: center;
     }

     .contact-item {
         justify-content: center;
         text-align: center;
     }

     .newsletter-form {
         flex-direction: column;
         gap: 10px;
     }

     .newsletter-form button {
         align-self: stretch;
     }

     .floating-buttons {
         right: 10px;
         gap: 10px;
     }

     .floating-btn {
         width: 50px;
         height: 50px;
     }
 }



 @media (max-width: 480px) {
     .footer-content {
         grid-template-columns: 1fr;
         gap: 30px;
         text-align: center;
     }

     .footer-section {
         max-width: 100%;
     }

     .footer-section ul li a {
         justify-content: center;
     }

     .social-links {
         justify-content: center;
     }

     .footer-copyright {
         padding: 0 10px;
     }

     .floating-buttons {
         bottom: 20px;
         top: auto;
         right: 50%;
         transform: translateX(50%);
         flex-direction: row;
         gap: 15px;
     }
 }