@font-face {
    font-family: avo;
    src: url(font/SVN-Avo.ttf);
}

@font-face {
    font-family: avoB;
    src: url(font/SVN-Avo-bold.ttf);
}

@font-face {
    font-family: ice;
    src: url(font/UniSansHeavy.otf);
}

@font-face {
    font-family: muli;
    src: url(font/Muli-Light.ttf);
}

@font-face {
    font-family: muliB;
    src: url(font/Muli-Bold.ttf);
}

@font-face {
    font-family: Aleo;
    src: url("font/SVN-Aleo Regular.otf");
}

@font-face {
    font-family: helv;
    src: url(font/UTM-HelvetIns.ttf);
}

@font-face {
    font-family: may;
    src: url(font/UTM_Sharnay.ttf);
}

@font-face {
    font-family: honghaB;
    src: url(font/UVNHongHaHep_B.ttf);
    font-weight: normal;
}

@font-face {
    font-family: hongha;
    src: url(font/UVNHongHaHep_R.ttf);
    font-weight: normal;
}

@font-face {
    font-family: picture;
    src: url("font/SVN-Motion Picture.ttf");
    font-weight: normal;
}

@font-face {
    font-family: amper;
    src: url("font/SVN-Amperzand.ttf");
    font-weight: normal;
}

@font-face {
    font-family: capital;
    src: url("font/CapitalisTypOasis.ttf");
    font-weight: normal;
}

@keyframes zoomIn {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes translateWelcome1 {
    0% {
        transform: translateX(50%);
        opacity: 0;
    }

    75% {
        transform: translateX(50%);
        opacity: 0
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes translateWelcome2 {
    0% {
        transform: translateX(-50%);
        opacity: 0
    }

    75% {
        transform: translateX(-50%);
        opacity: 0
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes TranslateXProject1 {
    0% {
        transform: translateX(1000px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes TranslateXProject2 {
    0% {
        transform: translateX(3000px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes TranslateXProject3 {
    0% {
        transform: translateX(5000px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes itemTranslateShow {
    0% {
        opacity: 0;
        transform: translateX(300px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes itemTranslateShow2 {
    0% {
        opacity: 0;
        transform: translateX(-1000px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes fadeAvatardown {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes itemRemoveShow {
    0% {
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-1000px);
    }
}

@keyframes itemHover {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

@keyframes Rotate360 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes phone-icon {
    0% {
        transform: translate3d(0px, 0, 0);
    }

    2% {
        transform: translate3d(2px, 0, 0);
    }

    4% {
        transform: translate3d(-2px, 0, 0);
    }

    6% {
        transform: translate3d(2px, 0, 0);
    }

    8% {
        transform: translate3d(-2px, 0, 0);
    }

    10% {
        transform: translate3d(2px, 0, 0);
    }

    12% {
        transform: translate3d(-2px, 0, 0);
    }

    14% {
        transform: translate3d(2px, 0, 0);
    }

    16% {
        transform: translate3d(-2px, 0, 0);
    }

    18% {
        transform: translate3d(2px, 0, 0);
    }

    20% {
        transform: translate3d(-2px, 0, 0);
    }

    22% {
        transform: translate3d(2px, 0, 0);
    }

    24% {
        transform: translate3d(-2px, 0, 0);
    }

    26% {
        transform: translate3d(2px, 0, 0);
    }

    28% {
        transform: translate3d(-2px, 0, 0);
    }

    30% {
        transform: translate3d(2px, 0, 0);
    }

    32% {
        transform: translate3d(-2px, 0, 0);
    }

    34% {
        transform: translate3d(2px, 0, 0);
    }

    36% {
        transform: translate3d(-2px, 0, 0);
    }

    38% {
        transform: translate3d(2px, 0, 0);
    }

    40% {
        transform: translate3d(-2px, 0, 0);
    }

    42% {
        transform: translate3d(2px, 0, 0);
    }

    44% {
        transform: translate3d(-2px, 0, 0);
    }

    46% {
        transform: translate3d(0em, 0, 0);
    }
}

@keyframes phone-inner {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0) scale(0);
        transform: translate3d(0, 0, 0) scale(0);
    }

    33.3333% {
        opacity: 0 -webkit-transform: translate3d(0, 0, 0) scale(1);
        transform: translate3d(0, 0, 0) scale(1);
    }

    66.6666% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0) scale(0);
        transform: translate3d(0, 0, 0) scale(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0) scale(0);
        transform: translate3d(0, 0, 0) scale(0);
    }
}

@keyframes phone-outer {
    0% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        opacity: .4;
        transform: translate3d(0, 0, 0) scale(1);
    }

    33.3333% {
        -webkit-transform: translate3d(0, 0, 0) scale(2);
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(2);
    }

    66.6666% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0) scale(1);
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: muli;
    background: #fff;
}

h1, h2, h3, h4, h5, h6, strong, b, th {
    font-family: segoe ui;
    font-weight: 500;
}

#ShowMenu {
    display: none;
}

.container {
    width: 96%;
    margin: auto;
    box-sizing: border-box;
    max-width: 1150px;
}

.clearfm * {
    margin: 0;
    padding: 0;
    border: none;
    text-decoration: none;
    list-style: none;
    color: inherit;
    line-height: 1.4;
}

img, input, iframe, select {
    border: none;
}

table {
    border-collapse: collapse;
}

.banner {
    margin-bottom: -10px;
}

.align-left {
    text-align: left !important;
}

.align-center {
    text-align: center !important;
}

.align-right {
    text-align: right !important;
}

.postImg {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

    .postImg img {
        width: auto;
        height: 100%;
        transition: 0.5s;
        position: absolute;
        left: 0;
        min-width: 100%;
    }

    .postImg:hover img {
        transform: scale(1.2)
    }

.product-img {
    background-color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .product-img img {
        height: 100%;
        width: auto;
        left: 0;
        right: 0;
        margin: auto;
        position: absolute;
        transition: transform .5s;
    }

.product-list li:hover .product-img img {
    transform: scale(1.2) rotate(5deg)
}

.desc {
    font-size: 15px;
    color: #333;
    height: 75px;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
}

.message {
    font-size: 15px;
    color: #4f4f4f
}

.background-white {
    background-color: #fff;
}

.boxes + .boxes {
    margin-top: 50px;
}

.red {
    font-size: 15px;
    color: red
}

.left {
    float: left;
}

.right {
    float: right
}

.clear {
    clear: both;
}

.detail {
    font-size: 16px;
    color: #111;
    font-family: muli;
    text-align: justify;
}

    .detail table {
        width: 100% !important;
        float: none;
    }

    .detail img {
        max-width: 100% !important;
        cursor: zoom-in;
        height: auto !important;
    }

    .detail a {
        color: #00a1dc;
        text-decoration: none
    }

.error {
    color: red;
    font-size: 15px;
}

.img {
    display: block
}

    .img img {
        width: auto;
        height: 100%;
        min-width: 100%;
    }

.imgW img {
    width: 100%;
    height: auto;
    min-height: 100%;
}

.block {
    display: block
}

.btopnone {
    border-top: none !important
}

.overHide {
    overflow: hidden
}

.mtop10 {
    margin-top: 10px !important;
}

.mtop20 {
    margin-top: 20px !important;
}

.mtop30 {
    margin-top: 30px !important;
}

.mtop40 {
    margin-top: 40px !important;
}

.mtop50 {
    margin-top: 50px !important;
}

.pager {
    clear: both;
    margin-top: 20px;
    font-size: 14px;
    line-height: 1.8
}

    .pager span, .pager a {
        background-color: #51bf0f;
        display: inline-block;
        text-align: center;
        width: 25px;
        margin-right: 3px;
        border-radius: 4px;
        color: #fff;
        border: 1px solid #fff;
        padding-bottom: 2px;
    }

        .pager a:hover {
            background-color: #f7ce0f;
            color: #fff
        }

    .pager span {
        background-color: #1e1e1e;
        color: #fff;
    }

.transparent {
    background-color: transparent
}

.boxes .contain { /* overflow:hidden; */
    margin-top: 30px;
}

.inline-block {
    display: inline-block
}

.relative {
    position: relative;
}

.info {
    font-size: 14px;
    color: #5f5f5f;
    margin-top: 11px;
    overflow: hidden;
    font-family: segoe ui;
    padding-left: 5px;
}

    .info span, .info a {
        display: inline-block;
        margin-right: 10px;
    }

        .info a:hover {
            color: #ee0a0a;
        }

    .info a {
        color: #111;
    }

        .info span:last-child, .info a:last-child {
            ;
            margin-right: 0;
        }

    .info .cat:before {
        content: "\f0c9";
        font-family: fontawesome;
        color: #6f6f6f;
        display: inline-block;
        margin-right: 6px;
    }

    .info .date:before {
        content: "\f073";
        font-family: fontawesome;
        color: #6f6f6f;
        display: inline-block;
        margin-right: 6px;
    }

    .info .views:before {
        content: "\f06e";
        font-family: fontawesome;
        color: #6f6f6f;
        display: inline-block;
        margin-right: 6px;
    }

    .info .comments:before {
        content: "\f0e5";
        font-family: fontawesome;
        color: #6f6f6f;
        display: inline-block;
        margin-right: 6px;
    }

    .info .share {
        float: right;
    }

    .info .date:before {
        content: "\f073";
        font-family: fontawesome;
        color: #6f6f6f;
        display: inline-block;
        margin-right: 6px;
    }

.breadcrums a {
    color: #00a1dc
}

    .breadcrums a:hover {
        color: #ee0a0a
    }

.breadcrums {
    float: right;
}

    .breadcrums span {
        color: #f26522;
    }

.share { /* margin-top:10px; */
}

.width49 {
    width: 49%;
    float: left;
}

    .width49 + .width49 {
        float: right;
    }

@media only screen and (max-width :467px) {
    .desc {
        font-size: 13px;
        height: 68px;
    }

    .boxes .contain {
        margin-top: 15px;
    }

    .width49 {
        width: 100%;
        float: none;
    }

    .breadcrums {
        display: none;
    }

    .boxes + .boxes {
        margin-top: 30px;
    }
}