/* patterns from subtlepatterns.com */@font-face{font-family:"Jura";src:url('Jura-DemiBold.html') format('woff2'),url('Jura-DemiBold.woff') format('woff');font-weight:600}@font-face{font-family:"Jura";src:url('Jura-Medium.woff2') format('woff2'),url('Jura-Medium.html') format('woff');font-weight:500}@font-face{font-family:"Muli";src:url('Muli-Regular.html') format('woff2'),url('Muli-Regular-2.html') format('woff');font-weight:400}.v{display:inline-block;vertical-align:top;overflow:hidden}.ps{position:relative;margin-left:-119px;margin-top:505px}.s{min-width:139px;width:139px;min-height:46px;height:46px}.c{pointer-events:auto}.p{padding-top:0;text-indent:0;padding-bottom:0;padding-right:0;text-align:center}.f{font-family:"Arial Unicode MS", sans-serif;font-size:20px;font-weight:400;font-style:normal;text-decoration:none;text-transform:none;color:#D81B60;background-color:initial;line-height:38px;letter-spacing:normal;text-shadow:none}.ps2{position:relative;margin-left:-84px;margin-top:367px}.s2{min-width:139px;width:139px;min-height:66px;height:66px}.c2{z-index:23;pointer-events:auto}.f2{font-family:Jura;font-size:30px;font-weight:600;font-style:normal;text-decoration:none;text-transform:none;color:#D81B60;background-color:initial;line-height:56px;letter-spacing:normal;text-shadow:none}.f3{font-family:Jura;font-size:39px;font-weight:500;font-style:normal;text-decoration:none;text-transform:none;color:#fff;background-color:initial;line-height:55px;letter-spacing:normal;text-shadow:none}.ps3{position:relative;margin-left:-71px;margin-top:667px}.c3{z-index:31;pointer-events:auto}.ps4{position:relative;margin-left:32px;margin-top:285px}.c4{z-index:25;pointer-events:auto}.ps5{position:relative;margin-left:49px;margin-top:70px}.c5{z-index:29;pointer-events:auto}.ps6{position:relative;margin-left:20px;margin-top:314px}.v2{display:inline-block;vertical-align:top}.ps7{position:relative;margin-left:0;margin-top:200px}.s3{min-width:200px;width:200px;min-height:200px;height:200px}.i{position:absolute;left:0;width:200px;height:200px;top:0;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:0}.i2{left:0;width:200px;height:200px;top:0;display:inline-block;-webkit-transform:translate3d(0,0,0)}.c6{z-index:39;pointer-events:auto}.c7{z-index:22;pointer-events:auto}.ps8{position:relative;margin-left:0;margin-top:45px}.s4{min-width:400px;width:400px;min-height:211px;height:211px}.c8{z-index:24;pointer-events:auto}.f4{font-family:"Arial Unicode MS", sans-serif;font-size:39px;font-weight:400;font-style:normal;text-decoration:none;text-transform:none;color:#D81B60;background-color:initial;line-height:73px;letter-spacing:normal;text-shadow:none}.f5{font-family:Muli;font-size:39px;font-weight:400;font-style:normal;text-decoration:none;text-transform:none;color:#D81B60;background-color:initial;line-height:69px;letter-spacing:normal;text-shadow:none}
@keyframes ultimateWow {
    0% { transform: scale(1) rotate(0deg);}
    25% { transform: scale(1.25) rotate(-3deg);}
    50% { transform: scale(1.15) rotate(3deg);}
    75% { transform: scale(1.25) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg);}
}

/* Hiệu ứng hào quang chạy ngang qua chữ */
.wow-text {
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.wow-active {
    animation: ultimateWow 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    z-index: 99; /* Đảm bảo khi phóng to nó đè lên trên */
}

.qrcode-content {
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    padding: 50px 25px 90px 25px;
    border-radius: 24px;
    text-align: center;
    position: relative;
    width: 280px;
    /* Đổ bóng tầng lớp tạo chiều sâu */
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), 
                0 0 15px rgba(255, 0, 85, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.8);
    
    /* Hiệu ứng xuất hiện */
    animation: wowPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    
    left: auto;
    top: auto;
}

/* Hiệu ứng bung ra mạnh mẽ */
@keyframes wowPop {
    0% { transform: scale(0.3) translateY(50px); opacity: 0; filter: blur(10px); }
    70% { transform: scale(1.05); }
    100% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
}

/* Làm đẹp tiêu đề */
.qrcode-content p:first-of-type {
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(90deg, #ff0055, #6200ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.qrcode-content p:last-of-type {
    font-family: 'Jura', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #ff0055;
    text-shadow: 0 0 10px rgba(255, 0, 85, 0.3);
    margin-top: 20px;
}


/* Hiệu ứng cho khung chứa QR */
#codeDiv {
    background: #fff;
    padding: 15px;
    border-radius: 18px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
    display: inline-block;
    border: 1px solid #643131;
}

#codeDiv img {
    display: block;
    transition: transform 0.3s ease;
}

#codeDiv img:hover {
    transform: scale(1.05);
}

/* Nút X sang trọng */
.close-x {
    position: absolute;
    top: 12px;
    right: 15px;
    width: 30px;
    height: 30px;
    background: #f0f0f0;
    color: #666;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-x:hover {
    background: #ff0055;
    color: white;
    transform: rotate(90deg);
}


.btn1 {
    border: 0;
    border-radius: 50px; /* Bo tròn hoàn toàn tạo cảm giác hiện đại */
    /* Màu xanh Cyan Neon đối lập cực mạnh với hồng Footer */
    background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
    color: #000; /* Chữ đen để nổi bật nhất trên nền sáng */
    padding: 12px 30px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    display: inline-block;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Đổ bóng kép: bóng sâu và bóng phát sáng */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 0 15px rgba(0, 242, 254, 0.6);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* Hiệu ứng vệt sáng chạy ngang qua nút mỗi 2 giây */
.btn1::after {
    content: '';
    position: absolute;
    top: -50%; left: -60%;
    width: 20%; height: 200%;
    background: rgba(255, 255, 255, 0.8);
    transform: rotate(30deg);
    transition: none;
    animation: shine 2s infinite;
}

@keyframes shine {
    0% { left: -60%; }
    100% { left: 120%; }
}

.btn1:hover {
    transform: scale(1.15) rotate(-2deg); /* Phóng to và hơi nghiêng nhẹ */
    box-shadow: 0 15px 30px rgba(0, 242, 254, 0.8);
    color: #fff; /* Đổi sang chữ trắng khi hover */
}

.v3 picture {
    display: block;
    overflow: hidden;
    border-radius: 10px; /* Bo góc cho mềm mại */
    position: relative;
}

.v3 {
    position: relative; /* Giữ vị trí gốc */
    transition: z-index 0.5s;
}

.v3 img {
    transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 15px; /* Bo góc mặc định */
    backface-visibility: hidden;
}

/* Trạng thái ảnh "nở" ra */
.blooming {
    transform: scale(1.25); /* Nở to ra 25% */
    border-radius: 30px;    /* Góc bo tròn mềm mại hơn khi nở */
    z-index: 99;            /* Nhảy lên trên cùng để không bị che khuất */
    filter: brightness(1.1) saturate(1.1); /* Ảnh tươi tắn hơn */
    box-shadow: 0 15px 30px rgba(220, 73, 163, 0.4); /* Bóng hồng theo màu footer */
}

@keyframes myfirst {
    from {
        transform: scale(1)
    }

    50% {
        transform: scale(.9)
    }

    to {
        transform: scale(1)
    }
}

.an {
    animation: myfirst 1s infinite  ;
}

.kf {
    animation: myfirst 1s infinite  ;
}