* {
    font-family: "Roboto", sans-serif;
    margin: 0;
    padding: 0;
}
:root {
    --max-width: 1920px;
    --container: 1000px;
    --width-100: 100%;
    /* color */
    --color-white: white;
    --color-black: black;
    --color-01969A: #01969A;
    --color-00D8D8: #00D8D8;
    --color-50e2e7: #50e2e7;
    --color-067579: #067579;
    --color-085e60: #085e60;
    --color-999: #999;

   

    /* background */
    --background-color-white: white;
    --background-color-F2F2F2: #f2f2f2;
    --background-color-01969A: #01969A;
    --background-color-00D8D8: #00D8D8;
    --background-color-067579: #067579;
    --background-color-23dee448: #23dee448;
    --background-color-50e2e7: #50e2e7;
    --background-color-008083: #008083;
   
    /* font size */
    --font-size-10: 10px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-26: 26px;
    --font-size-28: 28px;

    /* font weight */
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-900: 900;
    --margin-auto: 0 auto;

    /* position */
    --position-relative: relative;
    --position-absolute: absolute;

    /* flex */
    --display-flex: flex;
    --display-block: block;
    --align-item-center: center;
    --justify-content-center: center;

    /* text */
    --text-decoration-none: none;
    --text-tranform-uppercase: uppercase;
    --text-tranform-capitalize: capitalize;
    --text-center : center;
    --text-justify : justify;

    /* cursor: pointer; */
    --cursor-pointer:pointer;

    --font-style-italic:italic;

    --box-sizing-border-box: border-box;

}
body {
    width: var(--width-100);
    font-size: 1rem;
    max-width: var(--max-width);
}

#header_pc,
#header__mobile,
#appointment_mobile,
#slider,
#footer_pc,
#footer__mobile,
#danhmuc_ds,
#danhmuc_dspc,
#bg_mobile_km,
.experienced__row-left-center > button,
.experienced__row-left-img,
.experienced__row-right,
.experienced__bottom,
.experienced__bottom-mobile

{
    display: none;
}
@media only screen and (min-width: 1000px) {
    #header_pc{
        display: var(--display-block);
    }

    #slider{
        display: var(--display-block);
    }

    .experienced__row-left-center > button{
        display: var(--display-block);
    }

    .experienced__row-right{
        display: var(--display-block);
    }

    .experienced__bottom{
        display: var(--display-block);
    }
    #footer_pc{
        display: var(--display-block);
    }

    #danhmuc_ds{
        display: var(--display-flex);
    }
}


@media only screen and (max-width: 999px) {
    #header__mobile {
        display: var(--display-block);
    }

    #appointment_mobile{
        display: var(--display-block);
    }
    .experienced__row-left-img{
        display: var(--display-block);
    }

    .experienced__bottom-mobile{
        display: var(--display-block);
    }

    #footer__mobile{
        display: var(--display-block);
    }

    #danhmuc_dspc{
        display: var(--display-block);
    }

    #bg_mobile_km{
        display: var(--display-block);
    }
  }


  @media only screen and (max-width: 999px) {
    .we__bring{
        box-sizing: var(--box-sizing-border-box);
        height: 1380px !important;
    }
    .we__bring-body{
        box-sizing: var(--box-sizing-border-box);
        top: 45px !important;
        width: 98% !important;
    }
    .we__bring-list{
        flex-wrap: wrap !important;
        
    }
    .we__bring-item{
        box-sizing: var(--box-sizing-border-box);
        width: var(--width-100) !important ;
    }

    .we__bring-row{
        flex-wrap: wrap !important;
    }

    .we__bring-row-left{
        width: 100% !important;
    }

    .we__bring-row-right{
        width: 100% !important;
    }

    .we__bring-row-right-text{
        font-size: var(--font-size-16) !important;
    }

    .we__bring-row-right-button{
        font-size: var(--font-size-14) !important;
    }

    .experienced__row {
        margin-top: 45px !important;
        box-sizing: var(--box-sizing-border-box) !important;
        width: auto !important;
    }

    .experienced__row-left{
        margin-top: 80px !important;
        width: var(--width-100) !important;
        padding: 0px 15px !important;
    }

    .experienced__row-left-title{
        font-size: var(--font-size-16) !important;
    }
    .experienced__row-left-title1{
        font-size: var(--font-size-22) !important;
    }
    .experienced__row-left-img{
        width: var(--width-100) !important;
        padding: 0px 40px;
        box-sizing: var(--box-sizing-border-box);
    }

    #experienced{
        height: 1330px !important;
        margin-bottom: 25px !important;
    }
    .experienced__row-left-bottom{
        flex-wrap: wrap !important;
        margin-top: 0px !important;
    }
    
    .experienced__row-left-bottom-item{
        width: var(--width-100) !important;
        margin-top: 10px !important;
    }

    .experienced__bottom-mobile{
        text-align: var(--text-center);
        margin-top: 20px;
    }

    .experienced__bottom-mobile-card{
        text-align: var(--text-center);
        display: none;
    }
    .experienced__bottom-mobile-title{
        color: var(--color-white);
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-700);
        text-align: var(--text-center);
        line-height: 40px;
        border-bottom: 2px solid
    }

    .experienced__bottom-mobile-text{
        font-weight: var(--font-weight-700);
        font-size: var(--font-size-20);
        line-height: 30px;
        text-align: var(--text-center);
        color: var(--color-white);
        text-transform: capitalize;
    }

    .experienced__bottom-mobile-text1{
        font-weight: var(--font-weight-400);
        font-size: var(--font-size-18);
        line-height: 25px;
        text-align: var(--text-center);
        color: var(--color-white);
    }

    .index-experienced{
        display: var(--display-flex);
        align-items: var(--align-item-center);
        justify-content: var(--justify-content-center);
        margin-top: 10px;
    }
    
    .index-experienced .experienced-item{
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: var(--background-color-00D8D8);
        margin: 0 5px;
        border-radius: 50%;
        cursor: var(--cursor-pointer);
    }
    
    .index-experienced .experienced-item.activeexperienced{
        background-color: var(--background-color-01969A);
        width: 14px;
        height: 14px;
    }

    .activeexperienced{
        display: var(--display-block);
    }
    .advise{
        padding: 0px 10px !important;
    }
    .advise__row{
        height: 60px !important;
        background-size: 100% 60px !important;
    }
    .advise__row-left{
        font-size: var(--font-size-10) !important;
        line-height: 16px !important;
        width: 45% !important;
    }
    .advise__row-left-right {
        width: 55% !important;
        gap: 3px !important;
    }

    .advise__row-left-right-input {
        font-size: var(--font-size-12) !important;
        width: 70% !important;
        padding: 5px !important;
    }

    .advise__row-left-right-bottom{
        width: 30% !important;
        font-size: var(--font-size-12) !important;
    }

    .dominance__container{
        padding: 0px 10px !important;
    }

    .dominance__container-row-col {
        width: 100% !important;
    }

    .space__container-body{
        flex-wrap: wrap !important;
    }

    .space__container-body-card {
        width: 50% !important;
        padding: 10px !important;
        box-sizing: var(--box-sizing-border-box) !important;
    }

    .space__container-body-card > img {
        width: var(--width-100) !important;
    }

    .procedure__container{
        padding: 10px !important;
        box-sizing: var(--box-sizing-border-box) !important;
    }
    .procedure__container-title{
        font-size: var(--font-size-16) !important;
    }

    .procedure__container-title1{
        font-size: var(--font-size-22) !important;
    }

    .procedure__container-bottom{
        flex-wrap: wrap !important;
        box-sizing: var(--box-sizing-border-box) !important;
        gap: 10px !important;
    }
    .procedure__container-bottom-card{
        width: 48.5% !important;
        box-sizing: var(--box-sizing-border-box) !important;
    }

    .procedure__container-bottom-card-body>div{
        font-size: var(--font-size-12) !important;
    }
    .procedure__container-bottom-card-body {
        margin-top: 10px !important;
    }

    .feedback__container{
        padding: 10px !important;
        box-sizing: var(--box-sizing-border-box) !important;
    }

    .feedback__container-row-card {
        padding: 10px !important;
        box-sizing: var(--box-sizing-border-box);
        height: 390px !important;
    }
    .feedback__container-row{
        display: var(--display-flex) !important;
        align-items: var(--align-item-center) !important;
        justify-content: var(--justify-content-center) !important;
    }
    .feedback__container-row-card-top{
       
        flex-wrap: wrap !important;
        justify-content: var(--justify-content-center) !important;
    }

    .feedback__container-row-card-top > img{
        width: 100px !important;
        height: 100px !important;
    }
    .feedback__container-row-card-top-right{
        padding-left: 0px !important;
        text-align: var(--text-center) !important;
    }
    .feedback__container-row-card-top-right>hr{
        margin: auto !important;
    }

    .feedback__container-row-card-top-right-title{
        margin-top: 10px !important;
    }

    .feedback__container-row-card-top-right-content>img{
        width: 80px !important;
    }

    .glow-on-hover {
        width: 320px !important;
        height: 130px !important;
        margin: 10px 0px !important;
    }

    .danhmuc__right-title{
        margin-top: 0px !important;
        font-size: var(--font-size-18) !important;
    }
    #bai-viet{
        padding: 0px 10px !important;
        box-sizing: border-box;
    }

    .view {
        text-align: center !important;
        width: 100% !important;
        height: 226px !important;
    }

    .view_button{
        top: 69% !important;
    }

    .danhmuc__left{
        display: none !important;
    }
    .danhmuc__right{
        width: 100% !important;
    }

  }


  .footer_list_icon {
    position: fixed;
    top: 20%;
    right: 10px;
    z-index: 100;
}
.footer_icon_zalo {
    position: relative;
}
.footer_icon_mess {
    position: relative;
}
.footer_list_icon_number {
    position: absolute;
    top: -37px;
    right: -5px;
    background-color: red;
    padding: 2px 4px;
    font-size: 10px;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
}
.footer_list_icon_number1 {
    position: absolute;
    top: 5px;
    right: 20px;
    background-color: red;
    padding: 2px 4px;
    font-size: 10px;
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
}
.ping {
    background-color: #82d2df;
    position: absolute;
    top: -60px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    left: -24px;
    -webkit-animation: ping 2s ease-in-out infinite backwards;
    animation: ping 2s ease-in-out infinite backwards;
}
@-webkit-keyframes ping {
    0% {
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
        opacity: 0.8;
    }
    80% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(2.2);
        transform: scale(2.2);
        opacity: 0;
    }
}
@keyframes ping {
    0% {
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
        opacity: 0.8;
    }
    80% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(2.2);
        transform: scale(2.2);
        opacity: 0;
    }
}

.bai-viet-footer {
    margin: 10px 0px;
    padding: 5px;
    border: 2px dashed #e43b69;
    font-size: 16px;
    font-weight: 500;
    text-align: justify;
}

.img-responsive{
    width: 100% !important;
    height: 226px !important;
}

.img-gif {
    width: 100% !important;
    height: 130px !important;
}

.h3-custom{
    margin: 5px 0px;
    font-size: var(--font-size-18) !important;
    height: auto !important;
}

.h2-custom{
    margin: 5px 0px;
    font-size: var(--font-size-20) !important;
    height: auto !important;
}