@font-face {font-family: "Inknut_Antiqua"; src: url("/assets/site/e133bc45bf17a858df35.ttf"), url("https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@400&display=swap"); font-weight: normal; font-style: normal;}
        @media (max-width: 1312px){.first_section{margin-top: 70px;}}
        @keyframes rocketTrail {
            0% { opacity: 0; transform: translateY(80px) scaleY(0.1); filter: brightness(3);}
            5% { opacity: 0.8; transform: translateY(50px) scaleY(0.3); filter: brightness(3.5);}
            15% { opacity: 1; transform: translateY(40px) scaleY(0.8); filter: brightness(2.5);}
            25% { opacity: 1; transform: translateY(0) scaleY(1); filter: brightness(2);}
            35% { opacity: 0.8; transform: translateY(-10px) scaleY(1.1); filter: brightness(1.5);}
            45% { opacity: 0.4; transform: translateY(-15px) scaleY(1.2); filter: brightness(1.2);}
            60% { opacity: 0; transform: translateY(-20px) scaleY(1.3); filter: brightness(1);}
            100% { opacity: 0; transform: translateY(-20px) scaleY(1.3); filter: brightness(1);}
        }

        @keyframes fireworkInnerDelayed {
            0%, 30% { opacity: 0; transform: scale(0.1); filter: brightness(4); }
            35% { opacity: 0.3; transform: scale(1); filter: brightness(4.5);}
            45% { opacity: 1; transform: scale(1); filter: brightness(5);}
            55% { opacity: 0.9; transform: scale(1); filter: brightness(3);}
            70% { opacity: 0.6; transform: scale(1); filter: brightness(2);}
            85% { opacity: 0.2; transform: scale(1); filter: brightness(1.5);}
            100% { opacity: 0; transform: scale(1); filter: brightness(1);}
        }

        @keyframes fireworkMiddleDelayed {
            0%, 30% { opacity: 0; transform: scale(0.2); filter: brightness(3);}
            37% { opacity: 0.2; transform: scale(1); filter: brightness(3.2);}
            48% { opacity: 0.8; transform: scale(1); filter: brightness(3.5);}
            58% { opacity: 1; transform: scale(1); filter: brightness(2.5);}
            72% { opacity: 0.8; transform: scale(1); filter: brightness(2);}
            87% { opacity: 0.4; transform: scale(1); filter: brightness(1.5);}
            100% { opacity: 0; transform: scale(1); filter: brightness(1);}
        }

        @keyframes fireworkOuterDelayed {
            0%, 30% { opacity: 0; transform: scale(0.3); filter: brightness(2.5); }
            40% { opacity: 0.1; transform: scale(1); filter: brightness(2.3);}
            52% { opacity: 0.6; transform: scale(1); filter: brightness(2.2);}
            65% { opacity: 0.9; transform: scale(1); filter: brightness(1.8);}
            78% { opacity: 0.7; transform: scale(1); filter: brightness(1.4);}
            90% { opacity: 0.3; transform: scale(1); filter: brightness(1.1);}
            100% { opacity: 0; transform: scale(1); filter: brightness(0.8);}
        }
        @keyframes fireworkInnerWithGap {
            0% { opacity: 0; transform: scale(0.1); filter: brightness(4) blur(0px); }
            2% { opacity: 1; transform: scale(0.3); filter: brightness(5) blur(1px); }
            8% { opacity: 0.9; transform: scale(1); filter: brightness(3) blur(1px); }
            18% { opacity: 0.6; transform: scale(1.1); filter: brightness(2) blur(2px); }
            30% { opacity: 0.2; transform: scale(1.2); filter: brightness(1.5) blur(3px); }
            40% { opacity: 0; transform: scale(1.3); filter: brightness(1) blur(4px); }
            100% { opacity: 0; transform: scale(1.3); filter: brightness(1) blur(4px); }
        }
        @keyframes fadeInText {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInWave {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInSkyline {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }
        #vn-national-2025-banner {display: none !important;}
        .vn-national-2025-bg {position: relative; width: 100%; height: 684px; background-image: url('/assets/site/7d109d9f4a2cfc8306ca.webp'); background-repeat: no-repeat; background-size: 200% auto; background-position: center center; background-color: #000;}
        .vn-national-skyline {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url('/assets/site/16cc2d514a065d86aa4d.webp');background-repeat: no-repeat;background-size: 100% auto;background-position: bottom center;z-index: 3;pointer-events: none;opacity: 0;animation: fadeInSkyline 0.8s ease-out 0.6s forwards;}
        .vn-national-wave {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url('/assets/site/b4417f09b7d5fc11a46d.webp');background-repeat: no-repeat;background-size: 105% auto;background-position: 100% 100%;z-index: 4;pointer-events: none;opacity: 0;animation: fadeInWave 0.8s ease-out 0.1s forwards;}
        .vn-national-2025-bg::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 16, 32, 0.35); z-index: 5; pointer-events: none; border-radius: inherit;}
        /* .vn-national-2025-bg > * {position: relative;} */
        .vn-national-2025-bg .slideshow__slide-caption {position:absolute; inset:0; display:flex; align-items:stretch; z-index:10;}
        .slideshow__slide-caption-text.vn-national-banner-text {width:100%;}
        .vn-national-decontainer {min-width: 80%; margin-left: auto; padding-right: 60px;}
        @media (min-width: 992px){
            .vn-national-banner-text {position: relative; width:100%;}
            .vn-national-decontainer {position: absolute; right: 0; top: 0; left: auto; margin-left: 0; padding-right: 130px;}
            .vn-national-content-wrapper {width:100%;}
        }
        @media (max-width: 992px){
            .vn-national-banner-text {position: relative; width:100%;}
            .vn-national-decontainer {position: absolute; right: 0; top: 0; left: auto; margin-left: 0; padding-right: 40px;}
            .promotion-btn{padding-right: 40px !important;}
            .vn-national-content-wrapper {width:100%;}
        }
        .vn-national-content-wrapper .banner-title {width: auto !important; position: relative; margin-bottom: 15px; font-weight: 400; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); opacity: 0; animation: fadeInText 0.8s ease-in-out 0.1s forwards; text-align: right;}
        .vn-national-content-wrapper .banner-title .happy-vietnam {font-size: 36px !important; font-family: 'Inknut_Antiqua', serif; color: #FFFFFF; display: block;}
        .vn-national-content-wrapper .banner-title .national-day {font-size: 75px !important; font-family: 'Inknut_Antiqua', serif; color: #F7941D; display: block; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7), 0px 0px 20px rgba(247, 148, 29, 0.3);}
        .promotion-btn{opacity: 0; animation: fadeInText 0.8s ease-in-out 0.4s forwards; position: absolute; right: 0; margin-left: auto; padding-right: 130px;}
        .vn-national-fireworks-container {display: flex; position: absolute; height: 350px; width: 200px; top: -3%; left: 60%; justify-content: center; align-items: center; z-index: 2; }
        
        /* Medium sized fireworks */
        .vn-national-fireworks-medium {height: 250px; width: 150px; top: 6%; left: 25%; }
        .vn-national-fireworks-medium .vn-national-firework-inner { max-width: 60px; width: 60px; animation-delay: 1.8s; animation-duration: 6s; }
        .vn-national-fireworks-medium .vn-national-firework-middle { max-width: 90px; width: 90px; animation-delay: 2.0s; animation-duration: 6s; }
        .vn-national-fireworks-medium .vn-national-firework-outer { max-width: 120px; width: 120px; animation-delay: 2.2s; animation-duration: 6s; }
        .vn-national-fireworks-medium .vn-national-firework-rocket { animation-delay: 1.6s; animation-duration: 6s; }
        /* Small sized fireworks */
        .vn-national-fireworks-small {height: 180px; width: 100px; top: 10%; left: 3%; }
        .vn-national-fireworks-small .vn-national-firework-inner { max-width: 50px; width: 50px; animation-delay: 2.3s; animation-duration: 4s; }
        .vn-national-fireworks-small .vn-national-firework-middle { max-width: 80px; width: 80px; animation-delay: 2.5s; animation-duration: 4s; }
        .vn-national-fireworks-small .vn-national-firework-outer { max-width: 110px; width: 110px; animation-delay: 2.7s; animation-duration: 4s; }
        .vn-national-fireworks-small .vn-national-firework-rocket { animation-delay: 2.1s; animation-duration: 4s; }
        /* Large sized fireworks */
        .vn-national-firework {position: absolute; max-width: 100%; height: auto; filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));}
        .vn-national-firework-rocket {width: 1px;height: 100px;background: linear-gradient(to bottom, rgba(0, 171, 190, 0.9) 0%,rgba(0, 200, 220, 0.8) 20%,rgba(0, 150, 200, 0.6) 50%,rgba(0, 120, 180, 0.4) 80%,transparent 100%); position: absolute; left: 50%; top: 70%; transform-origin: center bottom; z-index: 4; opacity: 0; animation: rocketTrail 5s ease-out infinite; border-radius: 1px; box-shadow: 0 0 4px rgba(0, 171, 190, 0.8), 0 0 8px rgba(0, 171, 190, 0.4);}
        .vn-national-firework-inner {max-width: 90px; width: 90px; z-index: 3; opacity: 0; transform-origin: center center; animation: fireworkInnerDelayed 5s ease-out infinite;}
        .vn-national-firework-middle {max-width: 130px; width: 130px; z-index: 2; opacity: 0; transform-origin: center center;animation: fireworkMiddleDelayed 5s ease-out infinite;}
        .vn-national-firework-outer {max-width: 170px; width: 170px; z-index: 1; opacity: 0; transform-origin: center center; animation: fireworkOuterDelayed 5s ease-out infinite;}
        
        /* Original large fireworks timing adjustments */
        .vn-national-fireworks-container:first-of-type .vn-national-firework-inner { animation-delay: 1.6s; }
        .vn-national-fireworks-container:first-of-type .vn-national-firework-middle { animation-delay: 1.8s; }
        .vn-national-fireworks-container:first-of-type .vn-national-firework-outer { animation-delay: 2.0s; }
        .vn-national-fireworks-container:first-of-type .vn-national-firework-rocket { animation-delay: 1.4s; }
        
        .vn-national-firework-inner.long-gap {animation: fireworkInnerWithGap 8s ease-out infinite;}
        @media screen and (max-width: 1500px) {.vn-national-content-wrapper h2 { font-size: 32px; }}
        @media screen and (max-width: 1024px) {.vn-national-skyline { background-size: 125% auto; background-position: 16% 105%; }.vn-national-wave { background-size: 100% auto; background-position: 120% 100%; }.vn-national-content-wrapper .banner-title .happy-vietnam { font-size: 24px !important; }.vn-national-content-wrapper .banner-title .national-day { font-size: 36px !important; }.vn-national-content-wrapper h2 { font-size: 24px; max-width: 300px; }}
        @media screen and (max-width: 820px) {.vn-national-skyline { background-size: 170% auto; background-position: 14% 110%; }.vn-national-wave { background-size: 100% auto; background-position: 100% 100%; }.vn-national-content-wrapper .banner-title .happy-vietnam { font-size: 22px !important; } .vn-national-content-wrapper .banner-title .national-day { font-size: 34px !important; } .vn-national-content-wrapper h2 { font-size: 24px; max-width: 300px; } .vn-national-decontainer { flex-direction: column; align-items: center; text-align: center; }}
        .slideshow__slide-caption, .slideshow__slide-caption-text{position:relative; height:100%;}
        .decontainer{position:relative; margin:0 auto; max-width:80%}
        @media only screen and (max-width:575px){.decontainer{top:15% !important}}
        @media only screen and (max-width:1499px){.decontainer{top:26%}}
        @media only screen and (min-width:1500px){.decontainer{top:26%}}
        @media only screen and (min-width:1800px){.decontainer{top:26%}} 
        @media only screen and (min-width:2000px){.decontainer{top:26%}}
        @media only screen and (min-width:2500px){.decontainer{top:26%}}

        /* laptop */
        @media only screen and (min-width: 2560px){.festival-container {max-width: 1320px;}.vn-national-2025-bg{height: 1400px;} section.container-fluid .festival-banner {height: 850px;}}
        @media only screen and (min-width: 1920px){.festival-container {max-width: 1320px;}.vn-national-2025-bg{height: 900px;background-size: 300% auto;}}
        @media only screen and (min-width: 1700px) and (max-width: 2560px){.festival-container {max-width: 1320px;}.vn-national-2025-bg{height: 900px;}.vn-national-skyline { background-size: 110% auto; background-position: 50% 87%; }.vn-national-wave { background-size: 100% auto; background-position: 100% 88%; }section.container-fluid .festival-banner{height: 850px;}}
        @media only screen and (max-width: 1400px){.festival-container {max-width: 1320px;}}
        @media only screen and (max-width: 1300px){.vn-national-content-wrapper .banner-title .happy-vietnam{font-size: 36px !important;} .vn-national-content-wrapper .banner-title .national-day{font-size: 52px !important;}}
        @media only screen and (max-width: 1100px){.vn-national-content-wrapper .banner-title .happy-vietnam{font-size: 36px !important;} .vn-national-content-wrapper .banner-title .national-day{font-size: 52px !important;}.vn-national-content-wrapper h2{font-size: 31px;}.vn-national-2025-bg::before {background: rgba(0, 16, 32, 0.4);}}
        /* Mobile */
        @media only screen and (max-width: 540px){.vn-national-decontainer, .promotion-btn {padding-right: 0px !important;}.vn-national-skyline {background-size: 210% auto; background-position: 7% 110%;}.vn-national-wave {background-size: 100% auto; background-position: 100% 100%;} .vn-national-2025-bg{background-size: 600% auto;}.vn-national-fireworks-medium{top: 30%;}.vn-national-fireworks-small{top: 12%;}}
        @media only screen and (max-width: 450px){.vn-national-content-wrapper .banner-title .happy-vietnam { font-size: 20px !important; } .vn-national-content-wrapper .banner-title .national-day { font-size: 30px !important; } .vn-national-content-wrapper h2 { font-size: 20px; max-width: 300px; margin-bottom: 15px; }}
        @media only screen and (max-width: 430px){.vn-national-2025-bg{height: 865px;} .vn-national-content-wrapper .banner-title .happy-vietnam{font-size: 32px !important;} .vn-national-content-wrapper .banner-title .national-day{font-size: 49px !important;} .vn-national-content-wrapper h2{font-size: 33px;} .vn-national-skyline {background-size: 190% auto; background-position: 12% 81%;}.vn-national-wave {background-size: 140% auto; background-position: 100% 85%;}}
        @media only screen and (max-width: 414px){.vn-national-2025-bg{height: 830px;} .vn-national-content-wrapper .banner-title .happy-vietnam{font-size: 30px !important;} .vn-national-content-wrapper .banner-title .national-day{font-size: 47px !important;} .vn-national-content-wrapper h2{font-size: 31px;} .vn-national-skyline {background-position: 12% 81%;}.vn-national-wave {background-position: 100% 90%;}}
        @media only screen and (max-width: 390px){.vn-national-2025-bg{height: 780px;} .vn-national-content-wrapper .banner-title .happy-vietnam{font-size: 28px !important;} .vn-national-content-wrapper .banner-title .national-day{font-size: 43px !important;} .vn-national-content-wrapper h2{font-size: 29px;}}
        @media only screen and (max-width: 375px){.vn-national-2025-bg{height: 650px;} .vn-national-content-wrapper .banner-title .happy-vietnam{font-size: 26px !important;} .vn-national-content-wrapper .banner-title .national-day{font-size: 42px !important;} .vn-national-content-wrapper h2{font-size: 28px;} .vn-national-skyline {background-position: 12% 81%;}.vn-national-wave {background-position: 100% 94%;}}
        @media only screen and (max-width: 360px){.vn-national-content-wrapper .banner-title .happy-vietnam{font-size: 24px !important;} .vn-national-content-wrapper .banner-title .national-day{font-size: 40px !important;} .vn-national-content-wrapper h2{font-size: 27px;}}
        @media only screen and (max-width: 320px){.vn-national-2025-bg{height: 675px;} .vn-national-content-wrapper .banner-title .happy-vietnam{font-size: 22px !important;} .vn-national-content-wrapper .banner-title .national-day{font-size: 35px !important;} .vn-national-content-wrapper h2{font-size: 23px;}}