.brand-phishing-popup {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 999999;

    animation: fadeIn 0.3s ease-in-out;

}



.brand-phishing-popup.show {

    display: flex;

}



.brand-phishing-popup-content {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    border-radius: 5px;

    padding: 25px 35px;

    max-width: 600px;

    min-width: 350px;

    width: 90%;

    max-height: 90vh;

    min-height: 200px; 

    overflow: hidden; 

    position: relative;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

    color: white;

    text-align: center;

    animation: slideIn 0.4s ease-out;

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    

    display: flex;

    flex-direction: column;

    justify-content: center;

}





.brand-phishing-popup-content.has-background-image {

    height: 500px;

    min-height: 500px;

    padding: 0 !important;

    overflow: hidden;

    position: relative;

    display: flex !important;

    flex-direction: column !important;

    border-radius: 5px;

    justify-content: flex-start !important;

    align-items: stretch !important;

}





.brand-phishing-banner-section {

    width: 100% !important;

    height: 50% !important;

    flex: 0 0 50% !important;

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

    position: relative;

    z-index: 1;

    border-radius: 5px 5px 0 0;

    overflow: hidden;

}





.brand-phishing-content-section {

    width: 100% !important;

    height: 50% !important;

    flex: 0 0 50% !important;

    background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);

    padding: 20px 30px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: center !important;

    position: relative;

    z-index: 2;

    border-radius: 0 0 5px 5px;

    overflow: hidden; 

}





.brand-phishing-popup-content.has-background-image::before,

.brand-phishing-popup-content.has-background-image::after {

    display: none;

}





.brand-phishing-popup-content.has-background-image > * {

    position: static;

    z-index: auto;

    margin-top: 0;

    

    padding: 0;

    

}





.brand-phishing-popup-content.has-background-image .brand-phishing-icon {

    display: none !important;

}





.brand-phishing-content-section h3,

.brand-phishing-content-section p {

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);

    color: rgba(255, 255, 255, 0.98);

    margin: 3px 0; 

    text-align: center;

}



.brand-phishing-content-section .brand-phishing-step {

    min-height: auto !important;

    padding: 0 !important; 

    gap: 3px !important; 

    max-height: 100% !important; 

    overflow: hidden !important; 

}





.brand-phishing-popup-content.has-background-image .brand-phishing-popup-close {

    position: absolute !important;

    top: 10px !important;

    right: 10px !important;

    z-index: 10000 !important; 

    background: rgba(0, 0, 0, 0.7) !important; 

    border: 2px solid rgba(255, 255, 255, 0.8) !important;

    color: rgba(255, 255, 255, 1) !important;

    backdrop-filter: blur(10px);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;

}





.brand-phishing-popup-content.has-background-image .brand-phishing-popup-close:hover {

    background: rgba(255, 87, 87, 0.9) !important;

    transform: scale(1.1);

    box-shadow: 0 4px 20px rgba(255, 87, 87, 0.6) !important;

    border-color: rgba(255, 255, 255, 1) !important;

}





.brand-phishing-banner-section {

    z-index: 1; 

}





.brand-phishing-content-section {

    z-index: 2; 

}





.brand-phishing-popup-content.has-background-image.banner-landscape {

    max-width: 550px;

    min-width: 300px;

    width: 600px;

}





.brand-phishing-popup-content.has-background-image.banner-portrait {

    max-width: 400px;

    min-width: 350px;

    width: 400px;

}





.brand-phishing-popup-content.has-background-image.banner-square {

    max-width: 500px;

    min-width: 450px;

    width: 500px;

}









.brand-phishing-popup-content.has-background-image[style*="background-image"] {

    background-size: cover !important;

    background-position: center !important;

    background-repeat: no-repeat !important;

}



.brand-phishing-popup-close {

    position: absolute;

    top: 10px;

    right: 10px;

    font-size: 28px;

    color: rgba(255, 255, 255, 0.95);

    cursor: pointer;

    line-height: 1;

    transition: all 0.3s ease;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(8px);

    border: 2px solid rgba(255, 255, 255, 0.3);

    font-weight: bold;

    z-index: 9999 !important; 

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}



.brand-phishing-popup-close:hover {

    color: white;

    transform: scale(1.1);

    background: rgba(255, 87, 87, 0.8);

    box-shadow: 0 4px 12px rgba(255, 87, 87, 0.4);

}



.brand-phishing-step {

    min-height: auto; 

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 0; 

    gap: 3px; 

    transition: all 0.3s ease;

    flex: 1;

    opacity: 0;

    animation: fadeInStep 0.5s ease-in-out forwards;

    overflow: hidden; 

    max-height: 100%; 

}



.brand-phishing-step.active {

    opacity: 1;

    animation-delay: 0.2s;

}



.brand-phishing-icon {

    font-size: 3.5rem;

    margin-bottom: 8px; 

    animation: bounce 2s infinite;

    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));

    display: flex;

    align-items: center;

    justify-content: center;

    width: 80px;

    height: 80px;

    margin: 0 auto 8px; 

}



.brand-phishing-icon img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    border-radius: 50%;

}



.brand-phishing-step h3 {

    font-size: 1.4rem;

    margin-bottom: 5px; 

    font-weight: 600;

    color: rgba(255, 255, 255, 0.98);

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

    letter-spacing: 0.5px;

}



.brand-phishing-step p {

    font-size: 0.95rem;

    margin-bottom: 8px; 

    line-height: 1.4;

    opacity: 0.9;

}



.brand-phishing-subtitle {

    font-size: 0.85rem;

    margin-bottom: 5px; 

    opacity: 0.8;

    font-style: italic;

    margin-top: -2px; 

}



.brand-phishing-btn {

    background: linear-gradient(45deg, #ff6b6b, #ee5a24);

    color: white;

    border: none;

    padding: 12px 25px;

    font-size: 0.85rem;

    border-radius: 5px;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);

    font-weight: 700;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    min-width: 120px;

}



.brand-phishing-popup-content.has-background-image .brand-phishing-btn {

    background: linear-gradient(45deg, #ff6b6b, #ee5a24);

    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4), 0 0 20px rgba(255, 255, 255, 0.2);

    border: 2px solid rgba(255, 255, 255, 0.3);

}



.brand-phishing-btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);

}



.brand-phishing-btn:active {

    transform: translateY(0);

}



.brand-phishing-btn:disabled {

    opacity: 0.6;

    cursor: not-allowed;

    transform: none;

}



.brand-phishing-btn:disabled:hover {

    transform: none;

    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);

}





@keyframes fadeInStep {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}





.brand-phishing-popup-content > * {

    margin: 0 auto;

}





#brand-phishing-phone-form {

    width: 100%;

    max-width: 280px;

    margin: 0 auto;

    flex-shrink: 0;

}



#brand-phishing-phone {

    width: 100%;

    padding: 10px 15px; 

    margin-bottom: 8px; 

    border: 2px solid rgba(255, 255, 255, 0.3);

    border-radius: 5px;

    font-size: 0.95rem;

    background: rgba(255, 255, 255, 0.1);

    color: white;

    text-align: center;

    transition: all 0.3s ease;

    box-sizing: border-box;

    font-family: inherit;

    letter-spacing: 0.5px;

}



#brand-phishing-phone.has-background-image {

    background: rgba(255, 255, 255, 0.15);

    border: 2px solid rgba(255, 255, 255, 0.4);

    backdrop-filter: blur(5px);

}



#brand-phishing-phone::placeholder {

    color: rgba(255, 255, 255, 0.7);

}



#brand-phishing-phone:focus {

    outline: none;

    border-color: rgba(255, 255, 255, 0.8);

    background: rgba(255, 255, 255, 0.25);

    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);

    transform: translateY(-1px);

}



#brand-phishing-loading {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px; 

    flex: 1;

    min-height: 80px; 

}



#brand-phishing-loading p {

    font-size: 0.9rem;

    margin: 0;

}



.brand-phishing-spinner {

    width: 30px;

    height: 30px;

    border: 3px solid rgba(255, 255, 255, 0.3);

    border-top: 3px solid white;

    border-radius: 50%;

    animation: spin 1s linear infinite;

    margin: 5px 0;

}





.brand-phishing-image-upload {

    margin-top: 10px;

}



.brand-phishing-image-upload .image-preview {

    border: 2px dashed #ddd;

    padding: 20px;

    text-align: center;

    background: #f9f9f9;

    border-radius: 5px;

    min-height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.brand-phishing-image-upload .image-preview img {

    border-radius: 5px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.brand-phishing-image-upload .image-preview:empty::before {

    content: 'Chưa có ảnh nào được chọn';

    color: #999;

    font-style: italic;

}



.brand-phishing-upload-btn {

    background: #0073aa;

    color: white;

    border: none;

    padding: 8px 16px;

    border-radius: 3px;

    cursor: pointer;

    margin-right: 10px;

}



.brand-phishing-upload-btn:hover {

    background: #005a87;

}



.brand-phishing-remove-btn {

    background: #dc3232;

    color: white;

    border: none;

    padding: 8px 16px;

    border-radius: 3px;

    cursor: pointer;

}



.brand-phishing-remove-btn:hover {

    background: #a00;

}





.brand-phishing-icon-upload {

    margin-top: 10px;

}



.brand-phishing-icon-upload .icon-preview {

    border: 2px dashed #ddd;

    padding: 15px;

    text-align: center;

    background: #f9f9f9;

    border-radius: 5px;

    min-height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.brand-phishing-icon-upload .icon-preview img {

    border-radius: 50%;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.brand-phishing-icon-upload-btn {

    background: #0073aa;

    color: white;

    border: none;

    padding: 8px 16px;

    border-radius: 3px;

    cursor: pointer;

    margin-right: 10px;

}



.brand-phishing-icon-upload-btn:hover {

    background: #005a87;

}



.brand-phishing-icon-remove-btn {

    background: #dc3232;

    color: white;

    border: none;

    padding: 8px 16px;

    border-radius: 3px;

    cursor: pointer;

}



.brand-phishing-icon-remove-btn:hover {

    background: #a00;

}





@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



@keyframes slideIn {

    from {

        transform: translateY(-50px);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}



@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-10px);

    }

    60% {

        transform: translateY(-5px);

    }

}



@keyframes spin {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}



@keyframes shake {

    0%, 100% { transform: translateX(0); }

    25% { transform: translateX(-5px); }

    75% { transform: translateX(5px); }

}





@media (max-width: 768px) {

    .brand-phishing-popup-content {

        width: 95%;

        max-width: none;

        max-height: 90vh; 

        min-height: auto;

        overflow: hidden;

        padding: 15px; 

        margin: 5vh auto; 

    }

    

    .brand-phishing-popup-content.has-background-image {

        height: 400px; 

        min-height: 400px;

        max-height: 90vh;

    }

    

    .brand-phishing-content-section {

        padding: 10px 15px !important; 

        height: 50% !important; 

        flex: 0 0 50% !important;

    }

    

    .brand-phishing-banner-section {

        height: 50% !important; 

        flex: 0 0 50% !important;

    }

    

    .brand-phishing-step {

        padding: 0;

        gap: 2px;

        min-height: auto;

        max-height: none;

    }

    

    .brand-phishing-icon {

        width: 50px; 

        height: 50px;

        font-size: 2rem; 

        margin-bottom: 3px;

    }

    

    .brand-phishing-popup h3 {

        font-size: 1.2rem; 

        margin: 3px 0;

        line-height: 1.3;

    }

    

    .brand-phishing-popup p {

        font-size: 0.85rem; 

        margin: 2px 0;

        line-height: 1.3;

    }

    

    #brand-phishing-phone {

        padding: 8px 12px;

        font-size: 0.9rem;

        margin-bottom: 5px;

    }

    

    .brand-phishing-btn {

        padding: 8px 18px; 

        font-size: 0.85rem; 

        margin: 3px auto;

        min-width: 100px; 

    }

    

    

    .brand-phishing-popup-close {

        width: 35px;

        height: 35px;

        font-size: 24px;

        top: 8px;

        right: 8px;

    }

}





@media (min-width: 769px) and (max-width: 1024px) {

    .brand-phishing-popup-content {

        max-width: 500px;

        width: 85%;

        max-height: 80vh;

    }

    

    .brand-phishing-popup-content.has-background-image {

        height: 450px;

        min-height: 450px;

        max-height: 80vh;

    }

    

    .brand-phishing-content-section {

        padding: 18px 25px !important;

    }

}





@media (min-width: 481px) and (max-width: 768px) {

    .brand-phishing-popup-content.has-background-image {

        height: 420px;

        min-height: 420px;

    }

    

    .brand-phishing-icon {

        width: 55px;

        height: 55px;

        font-size: 2.2rem;

    }

    

    .brand-phishing-popup h3 {

        font-size: 1.25rem;

    }

    

    .brand-phishing-popup p {

        font-size: 0.88rem;

    }

}





@media (pointer: coarse) {

    .brand-phishing-btn {

        min-height: 44px; 

        padding: 10px 20px;

    }

    

    #brand-phishing-phone {

        

        padding: 12px 15px;

    }

    

    .brand-phishing-popup-close {

        min-width: 44px;

        min-height: 44px;

    }

}





@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

    .brand-phishing-popup-content {

        border-width: 0.5px; 

    }

    

    .brand-phishing-icon {

        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); 

    }

}





@media (min-width: 769px) {

    .brand-phishing-popup-content {

        max-height: 85vh; 

        overflow: hidden; 

    }

    

    .brand-phishing-popup-content.has-background-image {

        height: 500px; 

        min-height: 500px;

        max-height: 85vh;

    }

    

    .brand-phishing-step {

        max-height: none; 

    }

}





@media (max-width: 480px){

    .brand-phishing-popup-content {

        max-height: 95vh; 

        margin: 2.5vh auto; 

        padding: 10px; 

    }

    

    .brand-phishing-popup-content.has-background-image {

        height: 350px; 

        min-height: 350px;

        max-width: 100px !important;

    }

    

    .brand-phishing-content-section {

        height: 50% !important; 

        flex: 0 0 50% !important;

        padding: 8px 12px !important; 

    }

    

    .brand-phishing-banner-section {

        height: 50% !important; 

        flex: 0 0 50% !important;

    }

    

    .brand-phishing-step {

        padding: 0;

        gap: 1px;

    }

    

    .brand-phishing-icon {

        width: 40px; 

        height: 40px;

        font-size: 1.8rem; 

        margin-bottom: 2px;

    }

    

    .brand-phishing-popup h3 {

        font-size: 1.1rem; 

        margin: 2px 0;

        line-height: 1.2;

    }

    

    .brand-phishing-popup p {

        font-size: 0.8rem; 

        margin: 1px 0;

        line-height: 1.2;

    }

    

    #brand-phishing-phone {

        padding: 6px 10px; 

        font-size: 0.85rem;

        margin-bottom: 4px;

    }

    

    .brand-phishing-btn {

        padding: 6px 15px; 

        font-size: 0.8rem;

        margin: 2px auto;

        min-width: 80px;

    }

    

    

    .brand-phishing-popup-close {

        width: 30px;

        height: 30px;

        font-size: 20px;

        top: 5px;

        right: 5px;

    }

}





@media (max-width: 768px) and (orientation: landscape) and (max-height: 500px) {

    .brand-phishing-popup-content {

        max-height: 90vh;

        margin: 5vh auto;

    }

    

    .brand-phishing-popup-content.has-background-image {

        height: 320px; 

        min-height: 320px;

    }

    

    .brand-phishing-content-section {

        padding: 8px 15px !important;

    }

    

    .brand-phishing-step {

        gap: 1px;

    }

    

    .brand-phishing-icon {

        width: 35px;

        height: 35px;

        font-size: 1.5rem;

        margin-bottom: 1px;

    }

    

    .brand-phishing-popup h3 {

        font-size: 1rem;

        margin: 1px 0;

    }

    

    .brand-phishing-popup p {

        font-size: 0.75rem;

        margin: 1px 0;

    }

    

    .brand-phishing-btn {

        padding: 5px 12px;

        font-size: 0.75rem;

        margin: 1px auto;

    }

}





@supports (-webkit-touch-callout: none) {

    @media (max-width: 768px) {

        .brand-phishing-popup-content {

            max-height: 85vh; 

            margin: 7.5vh auto;

        }

        

        .brand-phishing-popup-content.has-background-image {

            max-height: 85vh;

        }

    }

}





@media (prefers-color-scheme: dark) {

    .brand-phishing-popup {

        background-color: rgba(0, 0, 0, 0.8);

    }

}





@media (prefers-contrast: high) {

    .brand-phishing-popup-content {

        background: #000;

        border: 2px solid #fff;

    }

    

    .brand-phishing-btn {

        background: #fff;

        color: #000;

        border: 2px solid #fff;

    }

}





@media (prefers-reduced-motion: reduce) {

    .brand-phishing-popup-content {

        animation: none;

    }

    

    .brand-phishing-icon {

        animation: none;

    }

    

    .brand-phishing-spinner {

        animation: none;

        border: 4px solid rgba(255, 255, 255, 0.3);

        border-top: 4px solid white;

    }

}





* {

    transition: all 0.3s ease;

}





#brand-phishing-phone.error {

    border-color: rgba(255, 100, 100, 0.8);

    background: rgba(255, 100, 100, 0.1);

    animation: shake 0.5s ease-in-out;

}





@media (min-width: 769px) {

    .brand-phishing-popup-content.banner-landscape .brand-phishing-popup-close {

        right: 15px !important; 

        z-index: 10000 !important;

    }

    

    .brand-phishing-popup-content.banner-square .brand-phishing-popup-close {

        right: 12px !important; 

        z-index: 10000 !important;

    }

    

    .brand-phishing-popup-content.banner-portrait .brand-phishing-popup-close {

        right: 10px !important; 

        z-index: 10000 !important;

    }

}





.brand-phishing-content-section #brand-phishing-phone-form {

    width: 100%;

    max-width: 280px;

    margin: 5px auto; 

}



.brand-phishing-content-section #brand-phishing-phone {

    width: 100%;

    box-sizing: border-box;

    margin-bottom: 8px; 

}



.brand-phishing-content-section .brand-phishing-btn {

    margin: 5px auto; 

    display: block;

}



.brand-phishing-content-section .brand-phishing-step {

    width: 100%;

    text-align: center;

}



.brand-phishing-popup-content {

    background-image: url('../images/BG2.png');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    padding: unset;

    border-radius: 10px;

    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

    margin: 20px;

    width: 100%;

}



.brand-phishing-step-1-image {

   width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 10px;

    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

}



.logo-step-1 {

  width: 80%;

  margin-left: 15%;

}



.brand-phishing-cta-image {

    margin-top: 5%;

    width: 80%;

    max-width: 350px;

    animation: btnAnimation .5s linear infinite;

    cursor: pointer;

}



.brand-phishing-flare-image {

    width: 120%;

    position: absolute;

    bottom: -5%;

    left: 0;

    z-index: -1;

    opacity: 0.7;

}



#brand-phishing-step-1 {

    position: relative;

    padding: 20px;

    padding-top: 40px;

}



.brand-phishing-donghanh-div {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

}



.brand-phishing-donghanh-image {

    width: 55%;

}



#brand-phishing-donghanh-text {

    font-size: 48px;

    font-weight: bold;

    color: #fff;

    margin-left: 10px;

}



@-webkit-keyframes btnAnimation {

    0% {

        -webkit-filter: brightness(1.2);

        filter: brightness(1.2);

        scale: 1.05

    }



    50% {

        -webkit-filter: brightness(1);

        filter: brightness(1);

        scale: 1

    }



    100% {

        -webkit-filter: brightness(1.2);

        filter: brightness(1.2);

        scale: 1.05

    }

}