/* contact  */

#contact {
    min-height: 760px;
}
 
.box-contact {
    position: relative;
    /* width: 50%; */
    width: 1100px;
    /* min-height: 700px; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px 40px;
}

    .detail-box-contact{
        width: clamp(100px, 74.3vw, 520px);
        /* height: 700px; */
        display: flex;
        flex-direction: column;
        /* padding: 20px; */
        box-sizing: border-box;
    }

    .box-contact form.detail-box-contact{
        background-color: var(--main-color);
        padding: 40px;
        position: relative;
        overflow: hidden;
        transition: background-color 0.5s,;

        opacity: 0;
    }
    form.detail-box-contact.load {
        animation: zoomIn 1s ease-out forwards;  
        animation-delay: 0s;
    }
    
        .box-contact.light form.detail-box-contact {
            background-color: var(--main-color);
        }
        .box-contact.dark form.detail-box-contact {
            background-color: var(--main-color-dark);
        }
        
        .decorate-contact {
            position: absolute;
            top: -20px;
            right: -25%;
            font-size: clamp(100px, 76vw, 470px);
            color: #2020200c;
            /* z-index: -1; */
            transition: color 0.5s;
        }
            .box-contact.light .decorate-contact {
                color: #2020200c;
            }
            .box-contact.dark .decorate-contact {
                color: #ffffff1a;
            }


            div.detail-box-contact .decorate-contact {
                font-size: clamp(100px, 42.1vw, 295px);
                /* top: 0px; */
                top: auto;
                right: auto;
                bottom: 2%;
                right: 0%;
            }

        form.detail-box-contact label {
            text-transform: capitalize;
            font-size: clamp(10px, 2.8vw, var(--main-font-size));
            display: flex;
        }
        
            form.detail-box-contact label p {
                margin: 0px;
                position: relative;
                border-left: 2px rgb(99, 99, 99) solid;
                padding-left: 5px;
                color: #303030;

                transition: color 0.5s, border-color 0.5s;
            } 
            
                .box-contact.light form.detail-box-contact label p {
                    border-color: color-mix(in srgb, var(--line-contact) 80%, rgba(255, 255, 255, 0.13) 20%);
                    /* border-color: var(--line-contact); */
                    color: #303030;
                }
                .box-contact.dark form.detail-box-contact label p {
                    border-color: color-mix(in srgb, var(--line-contact-dark) 80%, rgba(0, 0, 0, 0.13) 20%);
                    /* border-color: var(--line-contact-dark); */
                    color: #e9e9e9;
                }


        form.detail-box-contact input, form.detail-box-contact textarea{
            all: unset;
            z-index: 1;
            margin-top: 15px;
            margin-bottom: 40px;
            font-family: "Poppins", serif;
            font-size: clamp(10px, 2.5vw, var(--main-font-size));
            border-bottom: 2px rgb(99, 99, 99) solid;
            transition: color 0.5s, border-color 0.5s;
        }

            .box-contact.light form.detail-box-contact input,.box-contact.light form.detail-box-contact textarea {
                border-color: var(--line-contact);
            }
            .box-contact.dark form.detail-box-contact input,.box-contact.dark form.detail-box-contact textarea {
                border-color: var(--line-contact-dark);
                color: rgb(20, 20, 20);
            }

        form.detail-box-contact textarea::-webkit-scrollbar {
            width: 8px;  /* Độ rộng thanh cuộn */
        }
        
        form.detail-box-contact textarea::-webkit-scrollbar-thumb {
            background: #6b6b6bb2; /* Màu thanh trượt */
            border-radius: 10px;
        }
            .box-contact.light form.detail-box-contact textarea::-webkit-scrollbar-thumb {
                background: #6b6b6bb2;
            }
            .box-contact.dark form.detail-box-contact textarea::-webkit-scrollbar-thumb {
                background: #e7e7e7a8;
            }

        form.detail-box-contact textarea::-webkit-scrollbar-thumb:hover {
            background: #e7e7e7d8; /* Đổi màu khi hover */
        }
            .box-contact.light form.detail-box-contact textarea::-webkit-scrollbar-thumb:hover {
                background: #e7e7e7d8;
            }
            .box-contact.dark form.detail-box-contact textarea::-webkit-scrollbar-thumb:hover {
                background: #6b6b6bb2;
            }


        .button-contact {
            display: flex;
        }
            #button-contact {
                border: 0px;
                position: relative;
                font-weight: 600;
                margin-top: 23px;
                margin-bottom: 0px;
                color: #3d3d3d;
                z-index: 2;
                cursor: pointer;

                transition: color 0.5s;
            }
                .box-contact.light #button-contact{
                    color: #292929;
                }
                .box-contact.dark #button-contact{
                    color: rgb(226, 226, 226);
                }

            .button-contact .ani-hover::after {
                top: 33px;
                height: 18px;
                left: 4px;
                background-color: rgb(223, 223, 223);
                z-index: 1;
            }
                .box-contact.light .button-contact .ani-hover::after{
                    background-color: rgb(223, 223, 223);
                }
                .box-contact.dark .button-contact .ani-hover::after{
                    background-color: rgb(70, 70, 70);
                }
            
            .button-contact .ani-hover:hover::after {
                width: 123px;
            }

    
    .detail-box-contact:last-child {
        width: clamp(100px, 85vw, 520px);
        display: flex;
        flex-direction: column;
        height: auto;
        justify-content: center;
        position: relative;
        overflow: hidden;
        gap: 15px;

        opacity: 0;
    }
    .detail-box-contact.load:last-child {
        animation: slideRight 1s ease-out forwards;  
        animation-delay: 0s;
    }

        /* start */

        .head-logo-contact {
            height: 250px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .head-logo-contact p{
                margin: 0px;
                font-size: 90px;
                font-weight: 700;
                padding: 0px 50px;
                position: relative;
                border-bottom: 3px rgb(206, 206, 206) solid;
                color: rgb(80, 80, 80);
                text-shadow:
                    0.5px 0.5px var(--shadow-contact), 
                    1px 1px var(--shadow-contact), 
                    1.5px 1.5px var(--shadow-contact), 
                    2px 2px var(--shadow-contact), 
                    2.5px 2.5px var(--shadow-contact) ,
                    3px 3px var(--shadow-contact), 
                    3.5px 3.5px var(--shadow-contact), 
                    4px 4px var(--shadow-contact), 
                    4.5px 4.5px var(--shadow-contact), 
                    5px 5px var(--shadow-contact),
                    5.5px 5.5px var(--shadow-contact),
                    6px 6px var(--shadow-contact),
                    6.5px 6.5px var(--shadow-contact);
                
                
                -webkit-transform: translateX(-8px) translateY(-8px);
                transform: translateX(-8px) translateY(-8px);
            }

                .head-logo-contact p::before, .head-logo-contact p::after{
                    content: "";
                    position: absolute;
                    background-color: rgb(206, 206, 206);
                    width: 3px;
                    height: 35%;
                    left: 0px;
                    bottom: 0px;
                }

                .head-logo-contact p::after {
                    left: auto;
                    right: 0px !important;
                }

        .body-logo-contact {
            flex-grow: 1;
        }

        /* end */

        .box1-contact {
            text-align: center;
            padding: 20px 0px;
            text-transform: uppercase;
            font-size: clamp(10px, 2.7vw, var(--main-font-size));
            font-weight: 500;
            position: relative;
            margin-bottom: 20px;
        }

            .box1-contact::before {
                content: "";
                height: 3px;
                /* width: 80%; */
                left: 12%;
                right: 12%;
                bottom: 5px;
                position: absolute;
                background-color: var(--main-color);
            }
                .box-contact.light .box1-contact::before {
                    background-color: var(--main-color);
                }
                .box-contact.dark .box1-contact::before {
                    background-color: var(--main-color-dark);
                }

        .logo-contact {
            width: 100%;
            height: clamp(100px, 38.5vw, 230px);
            position: relative;
            text-align: center;
        }

            .logo-contact img{
                /* width: 100%; */
                height: 100%;
                object-fit: cover;
                object-position: center;
            }

        .box2-contact {
            display: flex;
            flex-direction: column;
            padding: 0px clamp(0px, 10vw, 65px);
            padding-bottom: clamp(0px, 6.8vw, 75px);

            opacity: 0;
        }
        .box2-contact.load {
            animation: slideRight 1.5s ease-out forwards;  
            animation-delay: 0s;
        }

            .content-contact {
                position: relative;
            }

                .content-contact * {
                    margin: 0px;
                    padding: 0px;
                }

                .head-content-contact {
                    text-transform: uppercase;
                    color: #2c2c2c3b;
                    font-size: clamp(10px, 3.5vw, 17px);
                    margin-top: 15px;
                    position: absolute;
                    top:0px;
                }
                    .box-contact.light .head-content-contact {
                        color: #2c2c2c3b;
                    }
                    .box-contact.dark .head-content-contact {
                        color: #ebebeb50;
                    }


                .body-content-contact {
                    margin-top: 36px;
                    font-size: clamp(10px, 4.7vw, 28px);
                    color: #444444;
                }
                    .box-contact.light .body-content-contact {
                        color: #444444;
                    }
                    .box-contact.dark .body-content-contact {
                        color: #d1d1d1;
                    }

                    .body-content-contact p span:first-child {
                        /* @ */
                        /* font-size: 20px; */
                        color: #c59c15;
                    }
                        .box-contact.light .body-content-contact p span:first-child {
                            color: #c59c15;
                        }
                        .box-contact.dark .body-content-contact p span:first-child {
                            color: #39c40f;
                        }

                    .body-content-contact p span:last-child {
                        /* gmail.com */
                        color: #d3ae35;
                        font-size: clamp(10px, 3.1vw,20px);
                    }
                        .box-contact.light .body-content-contact p span:last-child {
                            color: #d3ae35;
                        }
                        .box-contact.dark .body-content-contact p span:last-child {
                            color: #53d42c;
                        }

                    div.body-content-contact {
                        height: 42px;
                        display: flex;
                        gap: 12px;
                        align-items: center;
                    }

                        div.body-content-contact a{
                            color: rgb(61, 61, 61);
                            display: flex;
                            align-items: center;
                            text-decoration: none;
                        }
                            .box-contact.light div.body-content-contact a {
                                color: rgb(61, 61, 61);
                            }
                            .box-contact.dark div.body-content-contact a {
                                color: #d1d1d1;
                            }

                        div.body-content-contact i{
                            font-size: clamp(10px, 6vw, 32px);
                            width: clamp(10px, 6vw, 32px);
                            text-align: center;
                        }

                        div.body-content-contact i:hover{
                            font-size: clamp(10px, 7.3vw, 36px);
                            color: var(--main-color);
                        }
                            .box-contact.light div.body-content-contact i:hover {
                                color: var(--main-color);
                            }
                            .box-contact.dark div.body-content-contact i:hover {
                                color: var(--main-color-dark);
                            }