@font-face {
        font-family: "Microsoft YaHei";
        src: url("font/e63653407669814f5b0eb9bbdc175f77.woff2")format("woff2");
}
@font-face {
        font-family: 'Source Serif Pro';
        src: url('fonts/SourceSerifPro-Black.woff2') format('woff2');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Source Serif Pro';
        src: url('fonts/SourceSerifPro-ExtraLight.woff2') format('woff2');
        font-weight: 200;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Source Serif Pro';
        src: url('fonts/SourceSerifPro-Bold.woff2') format('woff2');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Source Serif Pro';
        src: url('fonts/SourceSerifPro-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Source Serif Pro';
        src: url('fonts/SourceSerifPro-SemiBold.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Source Serif Pro';
        src: url('fonts/SourceSerifPro-Light.woff2') format('woff2');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Inter';
        src: url('fonts/Inter-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-BlackItalic.woff2') format('woff2');
        font-weight: 900;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Black.woff2') format('woff2');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Bold.woff2') format('woff2');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Light.woff2') format('woff2');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-BoldItalic.woff2') format('woff2');
        font-weight: bold;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Italic.woff2') format('woff2');
        font-weight: normal;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Thin.woff2') format('woff2');
        font-weight: 100;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-ThinItalic.woff2') format('woff2');
        font-weight: 100;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-LightItalic.woff2') format('woff2');
        font-weight: 300;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto';
        src: url('fonts/Roboto-MediumItalic.woff2') format('woff2');
        font-weight: 500;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Merriweather';
        src: url('fonts/Merriweather-Black.woff2') format('woff2');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Merriweather';
        src: url('fonts/Merriweather-BlackItalic.woff2') format('woff2');
        font-weight: 900;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Merriweather';
        src: url('fonts/Merriweather-LightItalic.woff2') format('woff2');
        font-weight: 300;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Merriweather';
        src: url('fonts/Merriweather-Italic.woff2') format('woff2');
        font-weight: normal;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Merriweather';
        src: url('fonts/Merriweather-Light.woff2') format('woff2');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Merriweather';
        src: url('fonts/Merriweather-Bold.woff2') format('woff2');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Merriweather';
        src: url('fonts/Merriweather-BoldItalic.woff2') format('woff2');
        font-weight: bold;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Merriweather';
        src: url('fonts/Merriweather-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Noto Serif';
        src: url('fonts/NotoSerif-Italic.woff2') format('woff2');
        font-weight: normal;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Noto Serif';
        src: url('fonts/NotoSerif-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Open sans';
        src: url('fonts/OpenSans.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Open sans';
        src: url('fonts/OpenSans-Italic.woff2') format('woff2');
        font-weight: normal;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-Black.woff2') format('woff2');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-Bold.woff2') format('woff2');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-BlackItalic.woff2') format('woff2');
        font-weight: 900;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-ExtraBold.woff2') format('woff2');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-BoldItalic.woff2') format('woff2');
        font-weight: bold;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-ExtraBoldItalic.woff2') format('woff2');
        font-weight: bold;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-ExtraLight.woff2') format('woff2');
        font-weight: 200;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-Light.woff2') format('woff2');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-ExtraLightItalic.woff2') format('woff2');
        font-weight: 200;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-Italic.woff2') format('woff2');
        font-weight: normal;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-LightItalic.woff2') format('woff2');
        font-weight: 300;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-MediumItalic.woff2') format('woff2');
        font-weight: 500;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-SemiBoldItalic.woff2') format('woff2');
        font-weight: 600;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-SemiBold.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-Thin.woff2') format('woff2');
        font-weight: 100;
        font-style: normal;
        font-display: swap;
}
@font-face {
        font-family: 'Be Vietnam Pro';
        src: url('fonts/BeVietnamPro-ThinItalic.woff2') format('woff2');
        font-weight: 100;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto Condensed';
        src: url('fonts/RobotoCondensed-Italic.woff2') format('woff2');
        font-weight: normal;
        font-style: italic;
        font-display: swap;
}
@font-face {
        font-family: 'Roboto Condensed';
        src: url('fonts/RobotoCondensed-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
}
/*html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}*/
:root {
        --ck-color-image-caption-background: #f7f7f7;
        --ck-color-image-caption-text: #333;
        --ck-color-image-caption-highligted-background: #fd0;
}
*::-webkit-scrollbar {
        width: 4px !important;
}
.UIBackTopTopControl {
        background: rgba(0, 0, 0, 0) url("images/top.png") no-repeat scroll center center;
        background-size: contain;
        bottom: 100px;
        height: 40px;
        position: fixed;
        right: 16px;
        width: 40px;
        z-index: 4;
}
a:hover {
        text-decoration: none;
}
input:focus {
        outline: none;
}
iframe {
        border: none;
}
.row {
        margin: 0;
}
.row>.col-sm {
        padding: 0;
}
.layout.layout-3-col {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 20px;
        margin: 20px 0;
}
.layout.layout-3-col>.layout {
        flex: 1;
        padding: 10px;
        box-sizing: border-box;
}
.layout.layout-2-col.layout21 {
        display: grid;
        grid-template-areas: "left left right";
        grid-gap: 20px;
}
.layout.layout-2-col.layout21>div:first-child {
        grid-area: left;
}
.layout.layout-2-col.layout21>div:nth-child(2) {
        grid-area: right;
}
.layout.layout-2-col {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
        grid-gap: 20px;
}
.layout.layout-2-col>.layout {
        flex: 1;
        padding: 10px;
        box-sizing: border-box;
}
.yhy-append-wrap {
        bottom: 0;
        position: fixed;
        z-index: 2;
        max-width: 150px;
}
.layout.layout-4-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 15px 0;
}
@media only screen and (min-width: 0px) {
        .MainStructure .FooterBar {
                overflow: hidden;
        }
        img {
                max-width: 100%;
        }
        .DropdownMenu .navbar-button {
                position: absolute;
                top: 0;
                right: 0;
                width: 40px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                background: #2196F3;
        }
        .DropdownMenu .navbar-button span {
                background: white;
                width: 50%;
                height: 4px;
                margin: 2px;
                border-radius: 1px;
                transition: 300ms;
        }
        .DropdownMenu .navbar-button {
                display: none;
        }
}
/* WEB */
/* MOBILE */
@media only screen and (max-width: 768px) {
        .layout.layout-2-col, .layout.layout-3-col { 
                grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); 
        }
        .layout.layout-2-col.layout21 {
                display: flex;
                flex-wrap: wrap;
        }
        .layout.layout-2-col.layout21>* {
                flex: 1;
        }
        .table-3-col td.app-panel {
                display: block;
                width: 100% !important;
                max-width: 100vw;
        }
        tr.tr-layout {
                flex-direction: column;
                display: flex;
                justify-content: center;
                align-items: center;
                max-width: 100vw;
        }
        tr.tr-layout>td {
                width: 100% !important;
                MARGIN: 0 !IMPORTANT;
                PADDING: 0 !IMPORTANT;
        }
        tr>td[class*='layout'] {
                width: 100% !important;
                padding: 0 !important;
        }
        table.khung-4-cot>tbody>tr>td[class*="col"] {
                padding: 0;
        }
        .MainStructure .ContentBar {
                padding: 0;
        }
        .MainStructure .LeftBar {
                padding: 0 !important;
                /* padding-top: 30px !important; */
                /* padding-bottom: 40px !important; */
        }
        .MainStructure .fixed {
                position: fixed;
                right: 0;
                top: 0;
                z-index: 9999;
                bottom: 0;
                padding: 0px 0px !important;
                overflow-y: scroll;
                background: white;
                /* margin-top: 30px !important; */
                /* padding-bottom: 40px !important; */
                height: 100vh !important;
                width: 100vw !important;
                box-shadow: 0 0 10px #444444;
                padding-top: 5px !important;
        }
        .fixed-left {
                left: 0;
        }
        .fixed-right {
                right: 0;
        }
}
@media only screen and (max-width: 768px) {
        .MainStructure .FooterBanner {
                display: flex;
                flex-direction: column;
                height: auto !important;
                width: auto !important;
                text-align: center !important;
                justify-content: center;
                align-items: center;
                min-width: 30px !important;
                margin: 3px 0 !important;
                padding: 0 !important;
                max-width: 100% !important;
                border-right: 0 !important;
                border-left: 0 !important;
                position: static;
                line-height: 1.5;
        }
        .TopBar,
        .TopBanner {
                /* overflow-y: auto !important; */
                position: static !important;
                width: 100% !important;
                height: auto !important;
                border: none !important;
        }
        #form1 {
                margin: 0;
        }
}
[class*=fi-]:before {
        font-family: "Font Awesome 5 Pro";
        font-style: normal;
        font-weight: 300;
        speak: never;
        display: inline-block;
        text-decoration: inherit;
        width: 1em;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1.5em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}
@media only screen and (max-width: 768px) {
        tr.tr-col3 {
                display: flex;
                width: 100% !important;
                flex-direction: column;
        }
        tr.tr-col3>td {
                width: 100vw !important;
                /* padding: 5px; */
        }
        .UIBackTopTopControl {
                width: 30px;
                height: 30px;
                z-index: 4;
        }
}
.marquee {
        overflow: hidden;
        position: relative;
        color: #333;
        height: 40px;
        margin: 0;
}
.marquee strong {
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
        line-height: 40px;
        text-align: center;
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        -moz-animation: scroll-left 1s linear infinite;
        -webkit-animation: scroll-left 1s linear infinite;
        animation: scroll-left 25s linear infinite;
}
@-moz-keyframes scroll-left {
        0% {
                -moz-transform: translateX(100%);
        }
        100% {
                -moz-transform: translateX(-100%);
        }
}
@-webkit-keyframes scroll-left {
        0% {
                -webkit-transform: translateX(100%);
        }
        100% {
                -webkit-transform: translateX(-100%);
        }
}
@keyframes scroll-left {
        0% {
                -moz-transform: translateX(30%);
                -webkit-transform: translateX(30%);
                transform: translateX(30%);
        }
        100% {
                -moz-transform: translateX(-150%);
                -webkit-transform: translateX(-150%);
                transform: translateX(-150%);
        }
}