/* =========================================================
   MU VIỆT 2005
   STYLE VERSION 20260826-3
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html,
body {

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

}


body {

    min-width: 320px;

    overflow: hidden !important;

    background: #000 !important;

    font-family:
        "Montserrat",
        Arial,
        sans-serif;

}


a {

    text-decoration: none;

}


img {

    max-width: 100%;

    border: 0;

}


/* =========================================================
   QUẢNG CÁO BỞI MU VIỆT 2005
   ========================================================= */

.nav-l {

    position: fixed !important;

    top: 12px !important;

    left: 15px !important;

    z-index: 10000 !important;

}


.nav-l .info {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-height: 42px !important;

    padding:
        8px 15px !important;

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

    border:
        1px solid
        rgba(216, 172, 0, 0.65) !important;

    border-radius:
        10px !important;

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

}


.nav-l .t1 {

    margin: 0 !important;

    padding: 0 !important;

    color:
        #00ff00 !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    text-align:
        center !important;

    white-space:
        nowrap !important;

}


/* =========================================================
   MENU PC
   ========================================================= */

.nav-r {

    position: fixed !important;

    top: 10px !important;

    left: 50% !important;

    width:
        calc(100% - 40px) !important;

    max-width:
        850px !important;

    margin: 0 !important;

    padding:
        8px !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    gap:
        8px !important;

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

    border:
        1px solid
        rgba(216, 172, 0, 0.65) !important;

    border-radius:
        14px !important;

    transform:
        translateX(-50%) !important;

    z-index:
        9999 !important;

}


/* =========================================================
   NÚT MENU
   ========================================================= */

.nav-r a {

    position: relative !important;

    width: 100% !important;

    min-width: 0 !important;

    height: 65px !important;

    margin: 0 !important;

    padding: 5px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    background:
        rgba(42, 37, 40, 0.98) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.12) !important;

    border-radius:
        10px !important;

    overflow: hidden !important;

    cursor: pointer !important;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;

    -webkit-tap-highlight-color:
        transparent;

}


.nav-r a:hover {

    background:
        #111 !important;

    border-color:
        #d8ac00 !important;

    box-shadow:
        0 0 15px
        rgba(216, 172, 0, 0.35) !important;

    transform:
        translateY(-2px) !important;

}


.nav-r a:active {

    transform:
        scale(0.94) !important;

}


/* =========================================================
   ICON
   ========================================================= */

.nav-r a::before {

    display: block !important;

    flex-shrink: 0 !important;

    margin-bottom: 4px !important;

    transform:
        scale(0.85) !important;

}


/* =========================================================
   TÊN MENU
   ========================================================= */

.nav-r a::after {

    display: block !important;

    color:
        #ffffff !important;

    font-family:
        Arial,
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        13px !important;

    text-align:
        center !important;

    white-space:
        nowrap !important;

}


.nav-r a:nth-child(1)::after {

    content: "CLIENT 1" !important;

}


.nav-r a:nth-child(2)::after {

    content: "CLIENT 2" !important;

}


.nav-r a:nth-child(3)::after {

    content: "ZALO" !important;

}


.nav-r a:nth-child(4)::after {

    content: "ĐĂNG KÝ" !important;

}


.nav-r a:nth-child(5)::after {

    content: "LỘ TRÌNH" !important;

}


.nav-r a:nth-child(6)::after {

    content: "ĐUA TOP" !important;

}


/* ẨN TOOLTIP CŨ */

.nav-r .tooltip .tip {

    display: none !important;

}


/* =========================================================
   TABLET
   ========================================================= */

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

    .nav-r {

        width:
            calc(100% - 30px) !important;

        max-width:
            800px !important;

        padding:
            7px !important;

        gap:
            6px !important;

    }


    .nav-r a {

        height:
            62px !important;

    }

}


/* =========================================================
   MOBILE
   3 CỘT × 2 HÀNG
   ========================================================= */

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

    .nav-l {

        top:
            8px !important;

        left:
            50% !important;

        transform:
            translateX(-50%) !important;

    }


    .nav-l .info {

        min-height:
            34px !important;

        padding:
            5px 10px !important;

        border-radius:
            8px !important;

    }


    .nav-l .t1 {

        font-size:
            11px !important;

    }


    .nav-r {

        top:
            50px !important;

        width:
            calc(100% - 24px) !important;

        max-width:
            500px !important;

        padding:
            6px !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap:
            6px !important;

        border-radius:
            12px !important;

    }


    .nav-r a {

        height:
            64px !important;

        padding:
            3px !important;

        border-radius:
            8px !important;

    }


    .nav-r a::before {

        margin-bottom:
            2px !important;

        transform:
            scale(0.72) !important;

    }


    .nav-r a::after {

        font-size:
            9px !important;

        line-height:
            11px !important;

    }

}


/* =========================================================
   MOBILE NHỎ
   ========================================================= */

@media screen and (max-width: 480px) {

    .nav-l {

        top:
            5px !important;

    }


    .nav-l .info {

        min-height:
            30px !important;

        padding:
            4px 8px !important;

    }


    .nav-l .t1 {

        font-size:
            10px !important;

    }


    .nav-r {

        top:
            42px !important;

        width:
            calc(100% - 16px) !important;

        padding:
            4px !important;

        gap:
            4px !important;

    }


    .nav-r a {

        height:
            58px !important;

        padding:
            2px !important;

    }


    .nav-r a::before {

        transform:
            scale(0.65) !important;

    }


    .nav-r a::after {

        font-size:
            8px !important;

        line-height:
            10px !important;

    }

}


/* =========================================================
   ZALO + MESSENGER
   ========================================================= */

.echbay-sms-messenger {

    position: fixed !important;

    right: 20px !important;

    bottom: 35px !important;

    width: 55px !important;

    z-index: 99999 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 15px !important;

}


.echbay-sms-messenger div {

    width: 55px !important;

    height: 55px !important;

    margin: 0 !important;

    background-position:
        center !important;

    background-repeat:
        no-repeat !important;

    background-size:
        70% !important;

    border-radius:
        50% !important;

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.70) !important;

}


.echbay-sms-messenger a {

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    color:
        transparent !important;

    font-size:
        0 !important;

}


/* ZALO */

.echbay-sms-messenger
.phonering-alo-zalo {

    background-color:
        #0084ff !important;

    background-image:
        url("../images/gr.png?v=20260826-3") !important;

}


/* MESSENGER */

.echbay-sms-messenger
.phonering-alo-messenger {

    background-color:
        #e60f1e !important;

    background-image:
        url("../images/messenger.png?v=20260826-3") !important;

}


/* =========================================================
   MOBILE ZALO + MESSENGER
   ========================================================= */

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

    .echbay-sms-messenger {

        right:
            10px !important;

        bottom:
            20px !important;

        width:
            48px !important;

        gap:
            10px !important;

    }


    .echbay-sms-messenger div {

        width:
            48px !important;

        height:
            48px !important;

    }

}


/* =========================================================
   MÀN HÌNH RẤT NHỎ
   ========================================================= */

@media screen and (max-width: 360px) {

    .nav-r {

        top:
            40px !important;

        width:
            calc(100% - 10px) !important;

        padding:
            3px !important;

        gap:
            3px !important;

    }


    .nav-r a {

        height:
            52px !important;

    }


    .nav-r a::before {

        transform:
            scale(0.56) !important;

    }


    .nav-r a::after {

        font-size:
            7px !important;

        line-height:
            9px !important;

    }

}