﻿/*********************************************
    1.UPLOAD HÌNH ĐẠI DIỆN
*********************************************/

.img-circle {
    border-radius: 50%;
}

.profile-user-img {
    margin: 0 auto;
    width: 100px;
    padding: 3px;
    border: 3px solid #d2d6de;
}

.avatar-upload {
    position: relative;
    max-width: 205px;
    margin: auto;
    margin-bottom: 20px;
}

.avatar-upload .avatar-edit {
    position: absolute;
    right: 25px;
    z-index: 1;
    top: 110px;
}

.avatar-upload .avatar-edit input {
    display: none;
}

.avatar-upload .avatar-edit input + label {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 0;
    border-radius: 100%;
    background: #FFFFFF;
    border: 1px solid #d2d6de;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    font-weight: normal;
    transition: all .2s ease-in-out;
}

.avatar-upload .avatar-edit input + label:hover {
    background: #f1f1f1;
    border-color: #d6d6d6;
}

.avatar-upload .avatar-edit input + label:after {
    content: "\f030";
    font-family: 'FontAwesome';
    color: #337AB7;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    line-height: 34px;
    margin: auto;
}

.input-group-addon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/*************/
.home_hphoto {
    background-color: #f9eae9;
}

.ads-header {
    background-color: #fff
}

#owl_homephoto .owl-nav .owl-prev,
#owl_homephoto .owl-nav .owl-next {
    opacity: 0;
}

.mobilenav-content-boxitem-navlink img {
    border: none;
    border-radius: 0;
    object-fit: contain;
    object-position: center center;
    width: 100%;
}

.proitem .prolit_btnquantam {
    background: var(--color-red);
    border-color: var(--color-red);
}

.boxprobrand__apple.pro__group806 .owl-stage-outer::before,
.pro__group806.boxprobrand__apple .probox__img::before,
.pronavigation-wrapper--am-thanh {
    display: none
}

/********owl_homeproflashsale**********************/
#owl_homeproflashsale .flashsale-proitem-group {
    height: 100%;
}

#owl_homeproflashsale .flashsale-proitem-group .prosaleoff__item {
    height: 49.5%;
}

#owl_homeproflashsale.product__container--promotion .prosaleoff__item:not(.proitem--promotion) .probox__pricebox {
}

@media screen and (max-width: 766px) {
    #owl_homeproflashsale.product__container--promotion .prosaleoff__item:not(.proitem--promotion) .probox__pricebox {
    }
}

@media screen and (min-width: 767px) and (max-width: 992px) {
    #owl_homeproflashsale.product__container--promotion .prosaleoff__item:not(.proitem--promotion) .probox__pricebox {
    }
}

/******end owl_homeproflashsale************************/
#owl_home_img {
    margin-bottom: 1.5rem
}

/******SAMSUNG************************/
#samsungowl_prosaleoff .probox__des:not(.is-countdown) {
    margin-top: 30px
}

/*** FIX ***/
#michat_iframe,
.fb_dialog {
    z-index: 9999 !important;
}

.content-show .prodetail__box__content_collapse {
    max-height: none !important;
}

/** pagespeed **/
.header__nav__container {
    max-height: 48px;
}

.proslide_container {
    min-height: 250px;
}

.bootbox-close-button {
    --bs-btn-close-color: #000;
    --bs-btn-close-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e);
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    float: right;
    font-size: 1.6rem;
    padding: 0.25em 0.25em;
    color: var(--bs-btn-close-color);
    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: var(--bs-btn-close-opacity);
}

#voiceButtonContainer {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

#voiceButton {
    background-color: transparent;
    border: none;
    padding: 0;
    outline: none;
}

#voiceButtonIcon {
    font-size: 40px;
    color: #4DB848; /* Màu xanh */
    transition: color 0.3s; /* Hiệu ứng màu khi chuyển trạng thái */
}

#voiceButton.paused #voiceButtonIcon {
    color: #808080; /* Màu xám khi tắt mic */
}

#wavesContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    display: none;
}

.wave {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #4DB848;
    opacity: 0;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}