* {
    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: #166b85;
    --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: #166b85;
    --background-color-00D8D8: #1c8585;
    --background-color-067579: #067579;
    --background-color-23dee448: #23dee448;
    --background-color-50e2e7: #50e2e7;
    --background-color-008083: #166b85;

    /* 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: 650px !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);
    }

    .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;
}