/* Begin CSS TẾT 2026 */
/* ==================== CONTAINER MÂY ==================== */
.clouds-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

/* ==================== MÂY ==================== */
.cloud {
    position: absolute;
    opacity: 0;
    filter: blur(1px);
    animation: cloudFloat linear infinite;
}

@keyframes cloudFloat {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    5% {
        opacity: var(--cloud-opacity, 0.6);
    }
    95% {
        opacity: var(--cloud-opacity, 0.6);
    }
    100% {
        transform: translateX(calc(100vw + 100%));
        opacity: 0;
    }
}

/* ==================== CONTAINER CHIM ÉN ==================== */
.birds-container {
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    height: 50%;
    overflow: hidden;
    z-index: 50;
    pointer-events: none;
}

/* ==================== ĐÀN CHIM ÉN ==================== */
.bird-flock {
    position: absolute;
    opacity: 0;
    animation: birdFly linear forwards;
}

@keyframes birdFly {
    0% {
        transform: translateX(-150px) translateY(0);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 150px)) translateY(var(--bird-drift, -30px));
        opacity: 0;
    }
}

/* Chim én đơn lẻ trong đàn */
.bird {
    position: absolute;
    animation: birdWing 0.3s ease-in-out infinite alternate;
}

@keyframes birdWing {
    0% {
        transform: scaleY(1) rotate(var(--bird-rotate, 0deg));
    }
    100% {
        transform: scaleY(0.7) rotate(var(--bird-rotate, 0deg));
    }
}

/* ==================== HEADER ==================== */
.header-tet {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    z-index: 99999999999999;
    pointer-events: none;
    overflow: visible;
}

/* ==================== BRANCH CONTAINER ==================== */
.branch-wrapper {
    position: absolute;
    top: -10px;
    width: 450px;
    height: 320px;
}

.branch-wrapper.left {
    left: -10px;
}

.branch-wrapper.right {
    right: -10px;
    transform: scaleX(-1);
}

/* ==================== NHÁNH CÂY ==================== */
.branch-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    clip-path: inset(0 100% 0 0);
    animation: branchReveal 1.2s ease-out forwards;
}

@keyframes branchReveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0% 0 0);
    }
}

/* ==================== LAYER HOA ==================== */
.flowers-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ==================== HOA, NỤ, LÁ ==================== */
.flora {
    position: absolute;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rotate, 0deg)) scale(0);
    pointer-events: none;
}

.flora.bloom {
    animation: floraBloom 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes floraBloom {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--rotate, 0deg)) scale(0);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--rotate, 0deg)) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(var(--rotate, 0deg)) scale(1);
    }
}

/* Lắc lư nhẹ */
.flora.bloom.sway {
    animation: floraBloom 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    sway 4s ease-in-out infinite 1s;
}

@keyframes sway {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(var(--rotate, 0deg)) scale(1);
    }
    33% {
        transform: translate(-50%, -50%) rotate(calc(var(--rotate, 0deg) + 2deg)) scale(1);
    }
    66% {
        transform: translate(-50%, -50%) rotate(calc(var(--rotate, 0deg) - 2deg)) scale(1);
    }
}

/* Wrapper cho hiệu ứng đong đưa */
.flora-wrapper {
    position: absolute;
    transform-origin: center bottom;
}

/* Hiệu ứng đong đưa cho HOA */
.flora-wrapper.flower-active {
    animation: flowerDance var(--dance-duration, 4s) ease-in-out infinite;
}

@keyframes flowerDance {
    0%, 100% {
        transform: rotate(0deg) translateY(0px);
    }
    25% {
        transform: rotate(var(--dance-angle, 2deg)) translateY(-1px);
    }
    50% {
        transform: rotate(0deg) translateY(1px);
    }
    75% {
        transform: rotate(calc(var(--dance-angle, 2deg) * -1)) translateY(-1px);
    }
}

/* Hiệu ứng đong đưa cho NỤ */
.flora-wrapper.bud-active {
    animation: budSway var(--dance-duration, 3.5s) ease-in-out infinite;
}

@keyframes budSway {
    0%, 100% {
        transform: rotate(0deg);
    }
    30% {
        transform: rotate(var(--dance-angle, 3deg));
    }
    70% {
        transform: rotate(calc(var(--dance-angle, 3deg) * -0.7));
    }
}

/* Hiệu ứng đong đưa cho LÁ */
.flora-wrapper.leaf-active {
    animation: leafRustle var(--dance-duration, 3s) ease-in-out infinite;
}

@keyframes leafRustle {
    0%, 100% {
        transform: rotate(0deg) skewX(0deg);
    }
    20% {
        transform: rotate(calc(var(--dance-angle, 2deg) * 0.5)) skewX(0.3deg);
    }
    40% {
        transform: rotate(calc(var(--dance-angle, 2deg) * -0.3)) skewX(-0.2deg);
    }
    60% {
        transform: rotate(calc(var(--dance-angle, 2deg) * 0.4)) skewX(0.2deg);
    }
    80% {
        transform: rotate(calc(var(--dance-angle, 2deg) * -0.4)) skewX(-0.3deg);
    }
}

/* Hiệu ứng brightness nhẹ cho hoa */
.flora-wrapper.flower-active .flora {
    animation: floraBloom 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    flowerGlow 3s ease-in-out infinite 1.5s;
}

@keyframes flowerGlow {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
    50% {
        filter: brightness(1.05) drop-shadow(0 2px 6px rgba(255, 150, 180, 0.25));
    }
}

/* ==================== CÁNH HOA RƠI ==================== */
.falling-petal {
    position: fixed;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    animation: petalFall linear forwards;
}

@keyframes petalFall {
    0% {
        opacity: 0.9;
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) translateX(var(--drift)) rotate(var(--spin));
    }
}

/* ==================== CONTENT ==================== */
.demo-content {
    padding-top: 320px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.demo-content h1 {
    color: #c41e3a;
    font-size: 2.6rem;
    text-shadow: 2px 2px 8px rgba(196, 30, 58, 0.15);
    margin-bottom: 12px;
}

.demo-content p {
    color: #666;
    font-size: 1rem;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
    .branch-wrapper {
        width: 380px;
        height: 280px;
    }

    .header-tet {
        height: 260px;
    }
}

@media (max-width: 992px) {
    .branch-wrapper {
        width: 300px;
        height: 220px;
    }

    .header-tet {
        height: 210px;
    }

    .demo-content {
        padding-top: 240px;
    }
}

@media (max-width: 768px) {
    .branch-wrapper {
        width: 220px;
        height: 170px;
    }

    .header-tet {
        height: 160px;
    }

    .demo-content {
        padding-top: 180px;
    }

    .demo-content h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .branch-wrapper {
        width: 160px;
        height: 130px;
    }

    .header-tet {
        height: 120px;
    }

    .demo-content {
        padding-top: 140px;
    }

    .demo-content h1 {
        font-size: 1.4rem;
    }
}


.header-style-one .upper-row {
    background: transparent !important;
}

.header-style-one {
    background: linear-gradient(
        180deg,
        #87CEEB 0%, /* Xanh da trời nhạt */ #B0E0E6 15%, /* Powder blue */ #E0F4FF 35%, /* Xanh rất nhạt */ #F0F8FF 50%, /* Alice blue */ #FFF5F5 70%, /* Hồng nhạt */ #FFFFFF 100% /* Trắng */
    );

    padding-top: 15px;
}

:root {
    --branch-scale: 0.56;
}

.branch-wrapper {
    position: absolute;
    top: -10px;
    width: 450px;
    height: 320px;
}

.branch-wrapper.left {
    left: -10px;
    transform-origin: top left;
    transform: scale(var(--branch-scale));
}

.branch-wrapper.right {
    right: -10px;
    transform-origin: top right;
    transform: scale(var(--branch-scale));
}

/* Flip bên trong container */
.branch-wrapper.right .branch-flip-container {
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
}

.header-tet {
    position: fixed;
    top: 93px;
    left: 0;
    right: 0;
    height: calc(320px * var(--branch-scale) + 10px);
    z-index: 999999999999;
    pointer-events: none;
    overflow: visible;
}

.services-section-two, .about-section-one, .service-section,.features-section {
    background: url('../images/tet/bgtet3.png') !important;
    background-position: center bottom !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}



@media (max-width: 1400px) {
    :root {
        --branch-scale: 0.52;
    }

    .header-tet {
        top: 18px;
    }

    .header-style-one {
        padding-top: 42px;
    }

}

@media (max-width: 1200px) {
    :root {
        --branch-scale: 0.48;
    }
}

@media (max-width: 992px) {
    :root {
        --branch-scale: 0.38;
    }
}

@media (max-width: 768px) {
    :root {
        --branch-scale: 0.28;
    }

    .header-tet {
        top: 18px;
    }

    .header-style-one {
        padding-top: 53px;
    }
}

@media (max-width: 480px) {
    :root {
        --branch-scale: 0.30;
    }

    .header-tet {
        top: 18px;
    }

    .header-style-one {
        padding-top: 53px;
    }

    .services-section-two, .about-section-one, .service-section, .features-section {
        background: url('../images/tet/bgtet_mobile.png') !important;
        background-position: center bottom !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }

    .about-section-one {
        padding-bottom: 44px;
    }
}


/* ==================== HOA MAI MENU ==================== */
.mai-flowers-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

.mai-flower-nav {
    position: absolute;
    opacity: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transform: translate(-50%, -50%) scale(0);
    animation: maiBloom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    maiPulse 3s ease-in-out infinite 1s;
}

/* Hiệu ứng xuất hiện */
@keyframes maiBloom {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

/* Hiệu ứng phóng to thu nhỏ + xoay nhẹ */
@keyframes maiPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
    }
    50% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    75% {
        transform: translate(-50%, -50%) scale(1.08) rotate(-5deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .mai-flowers-nav {
        display: none;
    }
}


.mai-flowers-nav {
    position: absolute;
    top: 0;
    left: -17px; /* Bù padding trái */
    right: -17px; /* Bù padding phải */
    bottom: 0;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}


/* ==================== CÁNH HOA ĐÀO RƠI ==================== */
.falling-petals-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.falling-petal {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    animation: petalFall linear forwards;
}

@keyframes petalFall {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    }
    10% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translateX(var(--drift-x)) translateY(var(--fall-distance)) rotate(var(--spin)) scale(var(--end-scale, 0.7));
    }
}

/* Hiệu ứng lắc lư khi rơi */
.falling-petal.sway {
    animation: petalFall linear forwards, petalSway ease-in-out infinite;
}

@keyframes petalSway {
    0%, 100% {
        margin-left: 0;
    }
    25% {
        margin-left: var(--sway-amount, 10px);
    }
    75% {
        margin-left: calc(var(--sway-amount, 10px) * -1);
    }
}


.sticky-header, .header-style-one .lower-row .nav-box {
    background: #bc050a !important;
    border-bottom: 3px dotted #fbff00;
}

.sticky-header .main-menu .navigation > li > a, .fa-search {
    color: white !important;
}

.sticky-header .main-menu .navigation > li > a:hover, .fa-search:hover {
    color: #fffb00 !important;
}

.fixed-header .sticky-header .search-btn {
    top: 22px;
    left: 82%;
}


.sec-title-two h2 {
    color: #dc0811;
}


.system-section:before {
    background: rgb(178 4 8 / 83%);
}

.system-section {
    margin: 0px !important
}

.features-section .pattern-images {
    bottom: 0px !important;
}

.features-section {
    padding: 79px 0;
}

.system-info-item h4 {
    background: transparent;
}

.featured-block .hover-box .image-layer:before {
    background: #d73441;
}

.featured-block .hover-inner .text {
    font-size: 13px;
}

.system-text h3 {
    color: #fbff00;
}

.fw-iconbox--top .fw-iconbox__image::before {
    background-color: #dc0811;
}

.scroll-top-footer.scroll-to-target {
    background: #dc0811;
}


/* ==================== HOA MAI & BÁNH CHƯNG STICKY MENU ==================== */


.sticky-decor-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

/* Hoa mai góc trái */
.sticky-mai-flower {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    opacity: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: stickyMaiBloom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.3s,
    stickyMaiPulse 3s ease-in-out infinite 1.2s;
}

@keyframes stickyMaiBloom {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0) rotate(-30deg);
    }
    60% {
        opacity: 1;
        transform: translateY(-50%) scale(1.15) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
}

@keyframes stickyMaiPulse {
    0%, 100% {
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
    50% {
        transform: translateY(-50%) scale(1.08) rotate(5deg);
    }
}

/* Bánh chưng góc phải */
.sticky-banh-chung {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    opacity: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: stickyBanhBloom 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.5s,
    stickyBanhPulse 4s ease-in-out infinite 1.4s;
}

@keyframes stickyBanhBloom {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0) rotate(20deg);
    }
    60% {
        opacity: 1;
        transform: translateY(-50%) scale(1.1) rotate(-3deg);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
}

@keyframes stickyBanhPulse {
    0%, 100% {
        transform: translateY(-50%) scale(1) rotate(0deg);
    }
    50% {
        transform: translateY(-50%) scale(1.06) rotate(-3deg);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .sticky-mai-flower,
    .sticky-banh-chung {
        display: none;
    }
}

/* End CSS TẾT 2026 */