/* Designed by LoKiem */
@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=vietnamese"); :root{ --primary-color: #2185D0; --primary-hover-color: #1F7EC4; } html{ font-size: 16px; font-family: "Roboto", sans-serif; scroll-behavior: smooth; background-color: #FFFFFF; } *, :after, :before{box-sizing:border-box} body{ margin: auto; padding: 0; color: #1F1F1F; overflow-x: hidden; } img{ width: auto; height: auto; margin: 0; max-width: 100%; padding: 0; vertical-align: middle; } .image-caption{ display: block; font-size: small; color: gray; padding: 2px 5px 15px 5px } .user-avatar{ border-radius: 50%; } .user-avatar>img{ border-radius: 50%; object-fit: cover; width: 50px; height: 50px; box-shadow: 0 0 1px #666; } a:link, a:visited, a:active{ color: #404040; text-decoration: none } a:hover{ color: #2185D0; } .link,a{cursor: pointer} .primary-color{ color: #2185D0 !important; } .primary-actived{ color: #2185D0 !important; border-bottom: 1px solid #2185D0 !important; } .primary-bg{ color: #FFFFFF !important; background-color: #2185D0 !important } .primary-hover:hover{ background-color: #1F7EC4 !important; color: #FFFFFF !important; } .primary-border{ border-bottom: 1px solid #2185D0; } #header-info{ height: 40px; position: fixed; top: 0; width: 100%; z-index: 199708 } #header{ transition: .5s all; margin-top: 40px; background: #FFFFFF; box-shadow: 0 0px 5px 0 rgba(0,0,0,.1); color: #313133; height: 69px; line-height: 69px; position: fixed; width: 100%; z-index: 199708; top: 0; } .header-fixed{ margin-top: 40px; height: 69px; } #header .logo{ max-height: 59px } .header-right{ max-width: 90%; }  .navbar ul{ list-style-type: none; padding: 0; margin: 0; } .navbar .primary-bg{ background: #FFFFFF !important; } .navbar>ul>li{ position: relative; margin: 0 10px; cursor: pointer; word-wrap: break-word; white-space: nowrap; } .navbar>ul>li:first-child{ margin: 0 10px 0 0; } .navbar>ul>li:last-child{ margin-right: 0; } .navbar li>a, .navbar li>span{ display: inline-block; color: #313133; position: relative; font-size: 18px } .navbar li>a:hover, .navbar li>span:hover, .navbar li:hover span, .navbar-icon-actived, .navbar-item-actived{ color: #02B0EF !important; } .navbar li>div{ display: none; position: absolute; z-index: 97; top: 69px; left: 50%; transform: translate(-50%,0); line-height: normal; box-shadow: 0px 0px 7px 0px rgba(8, 88, 157, 0.2);; } .navbar li>div>ul{ display: flex; } .navbar li>div a{ min-width: 180px; padding: 15px; } .navbar-arrow-icon:after{ content: "\f107"; font-family: FontAwesome; font-style: normal; line-height: normal; transition: transform 0.2s; display: inline-block; } .navbar li:hover .navbar-arrow-icon:after{ transform: rotate(180deg); }  .blog-navbar-wrap{ border-bottom: 1px solid #dedede; border-top: 1px solid #ebebeb; } .blog-navbar ul{ list-style-type: none; padding: 0; margin: 0; } .blog-navbar>ul>li{ position: relative; margin: 0 10px; cursor: pointer; word-wrap: break-word; white-space: nowrap; padding: 20px 0 } .blog-navbar>ul>li:first-child{ margin: 0 10px 0 0; } .blog-navbar>ul>li:last-child{ margin-right: 0; } .blog-navbar li>a, .blog-navbar li>span{ display: inline-block; color: #313131; position: relative; font-size: 16px } .blog-navbar li>a:hover, .blog-navbar li>span:hover, .blog-navbar li:hover span, .blog-navbar-icon-actived, .blog-navbar-item-actived{ color: #02B0EF !important; } .blog-navbar li>div{ display: none; position: absolute; z-index: 97; top: 100%; left: 50%; transform: translate(-50%,0); line-height: normal; box-shadow: 0px 0px 7px 0px rgba(8, 88, 157, 0.2);; } .blog-navbar li>div>ul{ display: flex; background: white } .blog-navbar li>div a{ min-width: 220px; padding: 15px 20px; border-bottom: 1px solid #EDEDED } .blog-navbar-arrow-icon:after{ content: "\f107"; font-family: FontAwesome; font-style: normal; line-height: normal; transition: transform 0.2s; display: inline-block; } .blog-navbar li:hover .navbar-arrow-icon:after{ transform: rotate(180deg); } #footer{ background-color: #1C1C1C; color: #8A92A2; overflow: hidden; border-top: 2px solid #F26202; padding: 15px; line-height: 1.5 } #main,.main{ display: block; margin: auto; }  .bd{border:1px solid transparent;} .bd-top{border-top:1px solid transparent;} .bd-bottom{border-bottom:1px solid transparent;} .bd-left{border-left:1px solid transparent;} .bd-right{border-right:1px solid transparent;} .line-run{position: relative} .line-run:after{ display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 0; height: 1px; overflow: hidden; border-bottom: 1px solid #2185D0; content: ""; transition: all .3s; margin: auto } .line-run:hover:after{width: 100%} .ul-none-style{ list-style-type: none; padding: 0; margin: 0 }  .section-body{ padding: 15px 15px } .section>.heading, .section-heading{ padding: 15px 15px; color: #2185D0; border-bottom: 1px solid #2185D0; font-size: 20px; background-color: #FFFFFF; } .heading-small{ padding: 5px 15px !important } .heading, .heading-basic, .heading-block, .heading-line, .heading-sharp, .heading-simple{ font-weight: normal; position: relative; }  .heading-basic{ text-align: center; font-size: 27px; padding: 10px; font-weight: bold; color: #1F1F1F } .heading-basic>h1, .heading-basic>h2, .heading-basic>h3{ position: relative; font-size: inherit; font-weight: bold; text-transform: uppercase; } h2.heading-basic{ } .heading-basic>div{ font-size: 16px; font-weight: normal; padding: 10px 0 20px 0; } .heading-basic>div>i{ width: 15px; background: #bbc3cc; height: 5px; margin: 0 1px; display: inline-block; border-radius: 10px } .heading-basic>div>i:nth-child(2){ width: 30px; }  .heading-simple{ font-size: 22px; padding: 15px; border-bottom: 1px solid #EAEAEA; color: #313131; background-color: white }  .heading-block{ font-size: 20px; padding: 8px; color: #FFFFFF; background-color: #2185D0; }  .heading-line{ position: relative; color: #FFFFFF; } .heading-line>span:before{ content: ""; height: 2px; width: 100%; background: #2185D0; bottom: 50%; z-index: -1; position: absolute; left:0 } .heading-line>span{ display: inline-block; border-radius: 20px; background: #2185D0; margin: 0; padding: 8px; font-size: 20px; }  .heading-sharp{ border-bottom: 3px solid #2185D0; position: relative; } .heading-sharp>span{ display: inline-block; padding: 0 18px; line-height: 50px; position: relative; color: #FFFFFF; background: #2185D0; font-size: 20px; } .heading-sharp>span:before { border-right: 20px solid transparent; border-bottom: 50px solid #2185D0; content: ""; display: inline-block; height: 0; position: absolute; right: -20px; top: 0; width: 0; } .heading-general{ padding: 30px; background-color: #FFFFFF ; position: relative; text-align: center; font-size: 25px; color: white } .heading-general:before{ content: ""; position: absolute; background-position: top; background-image: url(/files/uploads/2019/07/bg.png); width: 100%; top: -70px; bottom: 0; left: 0; right: 0; z-index: 10000000; opacity: .1; pointer-events: none; }  select{cursor: pointer;} .form input, .form button, .form select, .form textarea, .form-mrg{ margin-bottom: 10px } .form-hover>.form-item:hover{ background-color: #DBEEF0 !important } .input, select, textarea, input[type="text"]{ padding: 10px 12px; border-radius: 3px; font-size: 14px; transition: all .2s ease-in-out; border: 1px solid #DDDDDD; outline: none; vertical-align: middle; } textarea{border-radius: 3px !important;} .input-color{ position: relative; } .input-color span, .input-color i{ position: absolute; color: white; top: 50%; animation: colours 10s infinite; font-style: normal } .input-color span{ pointer-events: none; left: 50%; transform: translate(-50%,-50%); } @keyframes colours { 0% { color: black; } 100% { color: white; } } .input-color input[type="color"]{ min-width: 50px; min-height: 50px; border: 1px solid #DDDDDD; outline: none; vertical-align: middle; cursor: pointer; background: none } .input:focus, select:focus, textarea:focus, input[type="text"]:focus{ border: 1px solid #2F91CF; box-shadow: 0 0 5px #2F91CF; } .input-icon{ position: relative; font-size: 14px; } .input-icon>.fa{ position: absolute; top: 50%; right: 10px; pointer-events: none; transform: translate(0,-50%); color: gray; } .input-icon>.input{ width: 100%; padding-left: 25px; } .input-group .input{ border-radius: 3px 0 0 3px !important; border: 1px solid #DDDDDD; border-right: none } .input-group .btn{ border-radius: 0 3px 3px 0 !important; border: 1px solid #DDDDDD; border-left: none } .input-group .input:focus{ box-shadow: none } .input-error, .input-success{ position: relative; } .input-error:after, .input-success:after{ position: absolute; right: 5px; top: 50%; transform: translate(0,-50%); } .input-error input{ width: 100%; box-shadow: 0 0 5px red; } .input-error:after{ color:red; content: "\f00d"; font-family: FontAwesome; } .input-success input{ width: 100%; box-shadow: 0 0 5px green; } .input-success:after{ color:green; content: "\f00c"; font-family: FontAwesome; } .input-search>input{ width: 110px; box-sizing: border-box; background-color: #FFFFFF; border: 1px solid #D5D5D5; border-radius: 10em; padding-right: 25px; transition: all .5s; color: #919191 } .input-search>input:focus { width: 140px; border: 1px solid #1C53C9; box-shadow: 0 0 5px #1C53C9; } .input-search>input::placeholder{ color: #919191 } .input-search{ position: relative; display: inline-block; } .input-search>button{ position: absolute; color: #919191; top: 50%; right: 5px; transform: translate(0,-50%);; line-height: normal; outline: none; background: none; border: none; cursor: pointer; } .input-search-full{ padding: 10px 5px; margin: auto; display: block; } .input-search-full>input{ width: 100% !important; } .input-search-large>input{ width: 200px; } .input-search-large>input:focus { width: 230px; }  .input-label{ position: relative; margin-bottom: 10px } .input-label>input, .input-label>select, .button-label{ padding-top: 10px !important; padding-bottom: 10px !important; } .heading-large{ padding-top: 12px !important; padding-bottom: 12px !important; } .button-label{ margin-bottom: 10px; } .no-mrg{ margin-bottom: 0 } .input-label>span{ position: absolute; top: 50%; transform: translate(0, -50%); left: 10px; background-color: white; padding: 2px 10px; color: gray; transition: .2s all; pointer-events: none; font-size: 13.5px; border-radius: 10px; white-space: nowrap; } .input-label-disabled>span{ background-color: #eee; } .input-label-textarea>span{ top: 20px; } .input-label>.input-label-has-content{ font-size: 11px; top: -2px; font-weight: bold; color: var(--btn-primary-color); } .input-label>.input-label-focus{ color: var(--btn-primary-color); } .form-date, .form-date-wrap input{ background-color: white !important; cursor: pointer !important; } .fa-icon{ min-width: 20px }  .btn, .btn-primary, .btn-danger, .btn-info, .btn-disabled, .btn-gradient{ padding: 10px 12px; border-radius: 3px; font-size: 14px; border: 1px solid transparent; outline: none; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; line-height: normal; display: inline-block; } .btn-sm{ padding: 5px 10px; font-size: 12px; } .btn-primary{ background-color: #2185D0; border-color: #2185D0; color: #FFFFFF !important; } .btn-primary:hover{ background-color: #1F7EC4 !important; border-color: #1F7EC4 !important; } .btn-danger{ background-color: #DB2828; border-color: #DB2828; color: #FFFFFF !important; } .btn-danger:hover{ background-color: #CF2626 !important; border-color: #CF2626 !important; } .btn-info{ background-color: #21BA45; border-color: #21BA45; color: #FFFFFF !important; } .btn-info:hover{ background-color: #20B342 !important; border-color: #20B342 !important; } .btn-gradient{ background-color: #F26202; background: linear-gradient(135deg,#F26202 30%,#F26202 100%); border-color: #F26202; color: #FFFFFF !important; } .btn-gradient:hover{ opacity: .8 } .btn-circle{ border-radius: 25px !important; padding-left: 30px !important; padding-right: 30px !important } .btn-disabled{ background-color:#CFCFCF !important; color: #858585 !important; cursor: not-allowed; } .input-disabled, input:disabled{ background-color: #CFCFCF; color: #858585; user-select: none; } input:read-only:focus{ box-shadow: none; } .input-disabled{ cursor: pointer !important; } input,button,select,textarea{ font-family: "Roboto", sans-serif; }  .check{ display: inline-block; position: relative; padding: 2px 2px 2px 32px; cursor: pointer; user-select: none; font-size: 16px; height: 30px; line-height: 22px; } .check input, .switch input{display:none} .check s{ position: absolute; left: 0; top: 50%; height: 25px; width: 25px; background-color: #F8F6F6; border:1px solid #EDEDED; transform: translate(0,-50%); } .check s:after{ content: ""; position: absolute; display: none; left: 40%; top: 10%; width: 6px; height:15px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg) } .check input:checked ~ s{ background-color: #2185D0; border: 1px solid #2185D0 !important; } .check input:checked ~ s:after{display:block} .radio s{border-radius: 50%} .switch{ display: inline-block; position: relative; padding: 2px 2px 2px 65px; cursor: pointer; user-select: none; height: 35px; font-size: 16px; line-height: 35px; } .switch>s{ position: absolute; cursor: pointer; top: 50%; left:0; transform: translate(0,-50%); width: 60px; height: 30px; background-color: #DFDDDD; transition: 0.5s; border-radius: 34px; transition: .4s; } .switch>s:after{ position: absolute; content: ""; height: 23px; width: 23px; left: 15px; top:50%; right:1px; background-color: #FFFFFF; border-radius: 50%; transform: translate(-50%,-50%); transition: .4s; } .switch input:checked ~ s{ background-color: #2185D0; } .switch input:checked ~ s:after{ left: calc(100% - 15px); }  .label-default, .label-primary, .label-success, .label-info, .label-warning, .label-danger{ padding: 2px 7px 2px 7px; font-size: 14px; border-radius: 14px; border: 1px solid transparent; display: inline-block; text-align: center; } .label-default{ color: white; background-color: #777; border-color: #777; }  .alert-primary, .alert-success, .alert-info, .alert-warning, .alert-danger{ padding: 9px; font-size: 14px; border: 1px solid transparent; word-wrap: break-word }  .panel{ font-size: 14px; border: 1px solid transparent; } .panel-list>.panel, .panel-last{ border-top: none; } .panel-list>.panel:first-child{ border-top: 1px solid transparent; } .panel.panel-no-border{ border-left: none !important; border-right: none !important; } .panel-default{ background-color: #F1F1F1; border-color: #E2E2E2 !important; color: #313131; }  .label-primary, .alert-primary, .panel-primary{ color: #FFFFFF; background-color: #2185D0; border-color: #2185D0 !important; } .label-success, .alert-success, .panel-success{ color: #FFFFFF; background-color: #21BA45; border-color: #21BA45 !important; } .label-info, .alert-info, .panel-info{ color: #FFFFFF; background-color: #00B5AD; border-color: #00B5AD !important; } .label-warning, .alert-warning, .panel-warning{ color: #FFFFFF; background-color: #FBBD08; border-color: #FBBD08 !important; } .label-danger, .alert-danger, .panel-danger{ color: #FFFFFF; background-color: #DB2828; border-color: #DB2828 !important; }  .panel>.heading{ padding: 9px; border: 1px solid transparent; position: relative; user-select: none; } .panel>.heading.link:after{ content: "\f054"; font-family: FontAwesome; position: absolute; right: 10px; top: 50%; transform: translate(0,-50%); } .panel>.heading.panel-actived:after{ content: "\f078"; } .panel-body{ background-color: #fff; padding: 9px; color: #1F1F1F !important; }  .badge{ padding: 2px 7px 2px 7px; font-size: 14px; border-radius: 30px; border: 1px solid transparent; display: inline; text-align: center; background-color: #2185D0; color: #FFFFFF; min-width: 25px; }  ul.list{ list-style-type: none; padding: 0 } .list>a{ position: relative; display: block; transition: .4s; color: #000000 !important; border: 1px solid #F2F2F2; padding: 9px; margin-bottom: -1px; background-color: #FFFFFF; font-size: 16px; } .list>a:hover{ background-color: #DEDEDE !important; } .list>span, .list>li{ display: block; border: 1px solid #F2F2F2; padding: 9px; margin-bottom: -1px; background-color: #FFFFFF; font-size: 16px; position: relative } .list>span:last-child, .list>li:last-child, .list>a:last-child{ margin-bottom: 1px; } .list>.list-actived{ background-color: #DEDEDE; } .list:hover .list-actived{ background-color: #FFFFFF; } .list .badge{ position: absolute; top: 50%; right: 5px; transform: translate(0, -50%); } .menu, .menu-bg{ border-color: #E7E7E7; padding: 8px; background-color: #FFFFFF; font-size: 15px; word-wrap: break-word; } .menu-bg{ background-color: #F5F5F5 !important; }  .see-more{ display: inline-block; border: 1px solid #2185D0; padding: 5px 15px 5px 15px; font-size: 16px; border-radius: 20px; color: #2185D0 !important; text-align: center; transition: .3s; } .see-more:hover{ background-color: #1F7EC4; color: #FFFFFF !important; }  .table, .table-border, .table-border-top{ border-collapse: collapse; padding: 0; margin: 0 auto; } .table th{ padding: 8px; text-align: inherit; background-color: #D2E1E8; color: #000000 } .table td{ padding: 8px; } .table tr:nth-child(even) td{ background-color: #FFFFFF; } .table tr:nth-child(odd) td{ background-color: #FAFAFA; } .table-border th, .table-border td{ border: 1px solid #F3F3F3; } .table-border-top tr{ border-top: 1px solid #F3F3F3; } .table tr:hover td{ background-color: #F5F5F5; } .table th{ text-align: inherit; } .table tr.table-actived td{ background-color: #F5F5F5; } .table-responsive{ display: block; width: 100%; overflow-x: auto; }  .modal{ top:0; position:fixed; z-index:199709; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.5); left:0; bottom:0; animation: fadein 0.5s; } .modal .modal-heading{ padding: 12px !important; font-size: 22px; color: #FFFFFF; background-color: #2185D0; } .modal-body{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 95%; max-height: 100%; } .modal-content{ margin: 20px 0; background: white } .modal-close, .right-icon{ position: absolute; right: 10px; top: 50%; transform: translate(0,-50%); } .modal-close:after{ content: "\f00d"; font-family: FontAwesome; } .modal-close:hover{ opacity: .7 } @keyframes fadein{ from{ opacity:.1 } to{ opacity:1 } } .modal-form{ border-radius: 15px; background: #EAEEF1 !important } .modal-form>.heading{ padding: 30px 30px 2px 30px; text-align: center; font-size: 20px; font-weight: 600; } .modal-form>.heading>i{ top: 25px; right: 15px } .modal-form>.modal-content{ background: transparent !important; } .modal-form>form input, .modal-form>form button{ margin-top: 10px; margin-bottom: 10px; border-radius: 20px !important } .modal-form>form .modal-input{ position: relative; } .modal-form>form .modal-input>i{ position: absolute; top: 50%; right: 5px; transform: translate(0, -50%); background: #eff2f9; color: #9ba7ca; display: inline-block; width: 30px; height: 30px; border-radius: 50%; line-height: 30px; text-align: center; } .modal-form label{ font-size: 14px } .form-logo{ position: absolute; top: -50%; left: 50%; transform: translate(-50%, 0); background: #EAEEF1; border-radius: 50%; width: 50px; height: 50px; line-height: 50px; box-shadow: 0 0 0 2.25px #eff2f9; vertical-align: middle; } .form-logo>img{ width: 60%; height: 60%; }  .paginate{ list-style-type: none; margin: 0; padding: 10px 0; } .paginate>a, .paginate>span{ display: inline-block; text-align: center; border: 1px solid #2185D0; color: #2185D0; padding: 7px; font-size: 14px; margin: 2px; min-width: 35px; background-color: #fff; border-radius: 30px; } .paginate>span, .paginate>a:hover{ background-color: #2185D0; color: #FFFFFF; border: 1px solid #2185D0; }  #loading>div{ top:0; left:0; padding-top:50px; position:fixed; z-index:9999999999; width:100%; height:100%; overflow:auto; background-color: rgba(0,0,0,0.2); } #loading img{ position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; } #loading>div>div{ position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loading-ouside{ width:150px; height:150px; border-radius:50%; position:relative; margin:0 auto; margin-top:200px; overflow:hidden; animation:spin 2s linear infinite; } @-webkit-keyframes spin{ 0%{ -transform:rotate(0deg); } 100%{-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); -transform:rotate(360deg); } } .loading-inside{ width:100%; height:50%; position:absolute; margin-top:50%; background:linear-gradient(90deg,#F26202,#EAEAEA); } .loading-inside:before{ content: ""; width:100%; height:100%; position:absolute; margin-top:-50%; background:linear-gradient(90deg,#F26202,#EAEAEA); } .loading-inside:after{ content: ""; width:80%; height:160%; position:absolute; margin-top:-40%; margin-left: 10%; background: white; border-radius:50%; }  .breadcrumb{ list-style-type: none; padding: 0; margin: 0; display: flex; flex-wrap: nowrap; } .breadcrumb a{ display: inline-block; padding: 15px 0 } .breadcrumb>li{ position: relative; } .breadcrumb>li:after{ content: "\f105"; font-family: FontAwesome; padding: 8px; } .breadcrumb>li:last-child:after{ display: none }  .fixed-button{ position: fixed; bottom: 110px; right: 20px; z-index: 97; } .fixed-button>a{ padding: 5px; display: inline-block; position: relative; border-radius:50%; color: #FFFFFF; width: 55px; height: 55px; background-color: #E68E12; background-image: linear-gradient(45deg, #E68E12 0%, #F52614 100%); opacity: 1; transition: opacity 0.3s ease-out; } .fixed-button>a:hover{ text-shadow: none; opacity: .7 } .fixed-button>a i, .fixed-button>a img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 30px; padding: 6px; } .fixed-button>a img{ border-radius: 50%; width: 55px; height: 55px; object-fit: cover; } .fixed-button>span{ display: inline-block; position: absolute; top: 0; right: -8px; background-color: #E68E12; background-image: linear-gradient(45deg, #F52614 0%, #E68E12 100%); color: #FFFFFF; border-radius: 50%; min-width: 20px; min-height: 20px; padding: 2px; text-align: center; font-size: 12px; z-index: 1421997 } .fixed-button>nav{ display: none; position: absolute; bottom: 20px; right: 60px; min-width: 180px; } .fixed-button>nav a{ display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 1px; border-radius: 20px; background-color: #E68E12; background-image: linear-gradient(45deg, #F52614 0%, #E68E12 100%); color: #FFFFFF; padding: 8px 13px; } .fixed-button>nav a:hover{ background-image: linear-gradient(45deg, #F52614 30%, #E68E12 100%); } .fixed-button>nav a sup{color: #FFFFFF;}  .contact-button{ position: fixed; bottom: 30px; right: 20px; z-index: 1402972; } .contact-button a{ position: relative; padding: 5px; display: inline-block; border-radius:50%; color: #FFFFFF; width: 55px; height: 55px; background-color: #2185D0; opacity: 1; transition: .5s all; } .contact-button>a:hover, .contact-button>nav>a:hover{ text-shadow: none; } .contact-button a i, .contact-button a img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 30px; padding: 6px; } .contact-button a img{ border-radius: 50%; width: 50px; height: 50px; object-fit: cover; } .contact-button>span{ display: inline-block; position: absolute; top: 0; right: -8px; background-color: #2185D0; color: #FFFFFF; border-radius: 50%; min-width: 20px; min-height: 20px; padding: 2px; text-align: center; font-size: 12px; z-index: 1421997 } .contact-button>nav{ display: none; position: absolute; bottom: 60px; right: 0; } .contact-button>nav a{ display: block !important; margin-bottom: 10px; position: relative } .contact-button>nav a>span{ opacity: 0; pointer-events: none; position: absolute; background-color: #2185D0; display: inline-block; right: calc(100% + 5px); top: 50%; text-align: center; padding: 10px; border-radius: 20px; min-width: 170px; transform: translate(0, -50%); transition: .5s all } .contact-button>nav a:hover span{ opacity: 1 } .pulsing-button{ display: block; width: 22px; height: 22px; border-radius: 50%; background: #2185D0; cursor: pointer; box-shadow: 0 0 0 #2185D0; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 #2185D0; } 70% { box-shadow: 0 0 0 20px rgba(204,169,44, 0); } 100% { box-shadow: 0 0 0 0 rgba(204,169,44, 0); } } .contact-button-wrap{ background: rgba(33,33,33,.5); width: 100vw; position: fixed; height: 100%; top: 0; bottom: 0; z-index: 1402971; }  .tooltip{ position: relative; display: inline-block; } div.tooltip, section.tooltip{ display: block !important; } .tooltip-body{ font-size: 14px; visibility: hidden; background-color: #00ACED; color: #FFFFFF; text-align: center; border-radius: 5px; padding: 7px 8px 7px 8px; position: absolute; z-index: 140297; display: inline-block; width: auto; white-space: nowrap; } .tooltip-left .tooltip-body{ top: 50%; right: calc(100% + 5px); transform: translate(0,-50%); } .tooltip-right .tooltip-body{ top: 50%; left: calc(100% + 5px); transform: translate(0,-50%); } .tooltip-bottom .tooltip-body{ top: calc(100% + 5px); left: 50%; transform: translate(-50%); } .tooltip-top .tooltip-body{ bottom: calc(100% + 5px); left: 50%; transform: translate(-50%); } .tooltip .tooltip-body::after{ content: ""; position: absolute; border-style: solid; border-width: 5px; } .tooltip-top .tooltip-body::after, .input-tooltip>span::after{ top: 100%; left: 50%; margin-left: -5px; border-color: #00ACED transparent transparent transparent; } .tooltip-bottom .tooltip-body::after{ bottom: 100%; left: 50%; margin-left: -5px; border-color: transparent transparent #00ACED transparent; } .tooltip-right .tooltip-body::after{ top: 50%; right: 100%; margin-top: -5px; border-color: transparent #00ACED transparent transparent; } .tooltip-left .tooltip-body::after{ top: 50%; left: 100%; margin-top: -5px; border-color: transparent transparent transparent #00ACED; } .tooltip-hidden-arrow:after{ display: none !important } .tooltip:hover .tooltip-body{visibility: visible;} .tooltip .tooltip-body:hover{visibility: hidden !important;}  .quote{ border-left: 5px solid #2185D0; padding: 8px; background-color: #EAEAEA; margin: 2px 0 2px 0; } .quote>span{ display: block; font-weight: bold } .quote>i{ display: block } .quote>i:before { content: "“"; padding-right:5px; } .quote>i:after { padding-left:5px; content: "”"; }  #popupAds .modal-body{ width: 90%; max-width: 900px; max-height: calc(100% - 50px); text-align: center } #popupAds .heading-block>i{ font-size: 25px; color: #FFFFFF; } #popupAds img, #popupAds video{ object-fit: cover; max-width: 100%; max-height: 100% } #popupAds .modal-body>.link{ color: #FFFFFF; font-size: 28px; position: absolute; top: -25px; right: -20px } #popupAds .modal-body>.link:hover{ color: #1F7EC4; }  .posts-flex>div{ overflow: hidden; position: relative; } .posts-flex .flex{ position: absolute; top: 50%; transform: translate(0,-50%); width: 100%; } .posts-flex-text>span, .posts-flex .flex>a{ display: block; } .posts-flex .flex>a{ } .posts-flex .flex>a>img{ width: 100%; height: 100%; object-fit: cover; } .posts-flex-desc, .posts-flex-time{ text-align: justify; } .posts-flex-time{ margin-bottom: 3px } .posts-flex-text{ padding: 0 8px } .account-outer{ animation: none } .account-outer .modal-body{ max-width:420px; } .account-outer .modal-content{ border-radius: 3px; }  .progress-bar { height: 20px; background: #e9ecef; border:none; transition: all 0.3s ease; display:block; } .progress-bar::-webkit-progress-bar { background: #e9ecef; border:none } .progress-bar::-webkit-progress-value {  background: #2185D0; border:none } .progress-bar::-moz-progress-bar {  background: #2185D0; border:none } .progress-bar::-ms-fill {  background: #2185D0; border:none }  .fx-btn-blick { position: relative; overflow: hidden; } .fx-btn-blick:before { content: ""; background-color: #fff; height: 100%; width: 3em; display: block; position: absolute; top: 0; -webkit-transform: skewX(-45deg) translateX(0); transform: skewX(-45deg) translateX(0); -webkit-transition: none; transition: none; opacity: 0; -webkit-animation: left-slide 2s infinite; animation: left-slide 2s infinite; } @keyframes left-slide { 0% { left: -50%; opacity: 0.1; } 50%, 100% { left: 150%; opacity: 0.75; } } .overlay-menu{ position: fixed; height: 100%; width: 100%; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.23); display: none; }  .block{ display: block } .popup-notify{ position: fixed; display: inline-block; bottom: 30px; right: 35px; background-image: linear-gradient(135deg, #2185D0 0%, #1F7EC4 100%); min-width: 320px; border-radius: 5px; } .popup-notify>*:hover{ color: white !important; opacity: .7 } .popup-notify>a{ display: block; padding: 10px 20px; transition: .5s all; color: white; } .popup-notify>i{ position: absolute; top: -30px; right: -20px; color: #2185D0; padding: 5px; cursor: pointer; font-size: 25px } .popup-notify>i:hover{ color: #2185D0 !important; }  .hidden{display:none} .text-inline{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wall{border-bottom: 1px solid #2185D0;} .hidden-printing{ visibility: hidden; } @media print { .hidden-printing{ visibility: visible !important; } } .red{color:red} .blue{color:blue} .skyblue{color:skyblue} .green{color:green} .gray{color:gray} .cyan{color:cyan} .hover-red:hover{background-color:red} .hover-blue:hover{background-color:blue} .hover-skyblue:hover{background-color:skyblue} .hover-green:hover{background-color:green} .hover-gray:hover{background-color:gray} .hover-cyan:hover{background-color:cyan} .left{text-align: left} .center{text-align: center} .right{text-align: right} .float-right{float: right} .block{display: block;} .pd-0{padding: 0px !important} .pd-2{padding: 2px} .pd-5{padding: 5px} .pd-10{padding: 10px} .pd-15{padding: 15px} .pd-20{padding: 20px} .pd-30{padding: 30px} .pd-50{padding: 50px} .bg{background-color:#fff} .rm-radius{border-radius: 0 !important} .radius{border-radius: 50% !important} .input-circle{border-radius: 25px !important} .flex{ display: flex; flex-wrap: wrap; justify-content: center;} .flex-nowrap{ display: flex; flex-wrap: nowrap; } .flex-nowrap>*{ flex-grow: 1 } .flex-middle{ align-items: center; } .flex-center{ justify-content: center; } .flex-margin{padding: 0 20px 0 0} .flex-margin:last-child{padding: 0 !important} .width-5{width:5%} .width-10{width:10%} .width-15{width:15%} .width-20{width:20%} .width-25{width:25%} .width-30{width:30%} .width-33{width:33%} .width-33x{width:33.33333%} .width-34{width:34%} .width-35{width:35%} .width-40{width:40%} .width-45{width:45%} .width-50{width:50%} .width-55{width:55%} .width-60{width:60%} .width-65{width:65%} .width-70{width:70%} .width-75{width:75%} .width-80{width:80%} .width-85{width:85%} .width-90{width:90%} .width-95{width:95%} .width-100{width:100%} .clearfix{clear:both} .highcharts-credits{ display: none !important } h1,h2,h3,h4,h5,h6{ margin: 0; font-weight: initial; } .spin-effect{ animation: spin 1s; } @keyframes spin{ 100% {transform:rotate(360deg);} } @keyframes rotate{ 100% {transform:rotateY(360deg);} }  @media(max-width: 767px){  .hidden-small{display: none !important;} .flex-medium{ display: block !important; } .flex-medium>*{ width: auto !important } .width-50-small{width: 50% !important; max-width: 100% !important} .width-49-small{width: 49% !important; max-width: 100% !important} .width-100-small{width:100% !important; max-width: 100% !important} .heading-basic{ font-size: 22px !important; } } @media(min-width: 768px) and (max-width: 1023px){  .hidden-medium{display: none !important;} .width-50-medium{width:50% !important; max-width: 100% !important} .width-100-medium{width:100% !important; max-width: 100% !important} } @media(max-width: 1023px){  .hidden-small-medium{display: none !important;} .flex-large{ display: block !important; } .flex-large>*{ width: auto !important } .flex-margin{ padding:0 !important; } .medium-margin-bottom{ margin-bottom: 10px !important } #header>.header-body{ padding: 0 0 0 15px; } #header{ height: 66px; line-height: 66px !important; } .header-fixed{ height: 66px; } #header .logo{ max-height: 44px } .width-50-small-medium{width:50% !important} .width-100-small-medium{width:100% !important} 
	.navbar{ position: fixed !important; z-index: 97; top: 0; right: 0; bottom: 0; width: 0; padding-bottom: 20px !important; max-width: 320px; transition: all .3s ease-in-out; background: white !important; } .navbar>ul{ overflow-y: auto; height: 100%; display: block !important; } .navbar>ul>li{ float: none; margin: 0 !important; line-height: normal; font-weight: bold; } .navbar li>a, .navbar li>span{ display: block; width: 100% !important; padding: 15px; position: relative; font-size: 16px; color: #404040 !important; ; } .navbar li>a:hover, .navbar li>span:hover, .navbar li:hover span{ color: #1F7EC4 !important; } .navbar .line-run:after{ display: none; } .navbar li>div{ position: relative; top: 2px; background: white !important;; box-shadow: none; font-weight: normal; } .navbar li>div>ul{ display: block; margin-left: 15px; border-left: 1px solid #dfdfdf; } .navbar li>div>ul>li{ width: 100% !important } .navbar li>div a{ padding: 10px; } .navbar-arrow-icon:after{ content: "\f105"; position: absolute; right: 8px; line-height: normal; transform: rotate(0deg) !important; } .navbar-item-opened .navbar-arrow-icon:after{ content: "\f107" !important; } .nav-icon-mobile>i{ padding: 10px; cursor: pointer; font-size: 25px; display: inline-block; vertical-align: middle; text-decoration: none !important }  .blog-navbar-wrap{ padding: 20px 10px } .blog-navbar-wrap .flex{ display: block !important; position: relative } .blog-navbar-wrap .flex>div:last-child{ position: absolute; right: 0; top: 50%; transform: translate(0, -50%); } .blog-navbar{ position: absolute; top: 100%; width: 100%; transition: all .3s ease-in-out; display: none; background: white; z-index: 1; box-shadow: 0 2px 8px 0 rgba(0,0,0,.2); } .blog-navbar>ul{ overflow-y: auto; height: 100%; display: block !important; } .blog-navbar>ul>li{ float: none; margin: 0 !important; line-height: normal; padding: 0 } .blog-navbar li>a, .blog-navbar li>span{ display: block; width: 100% !important; padding: 15px; position: relative; font-size: 16px; color: #404040 !important; ; } .blog-navbar li>a:hover, .blog-navbar li>span:hover, .blog-navbar li:hover span{ color: #1F7EC4 !important; } .blog-navbar .line-run:after{ display: none; } .blog-navbar li>div{ position: relative; top: 2px; background: white !important;; box-shadow: none; } .blog-navbar li>div>ul{ display: block; margin-left: 15px; border-left: 1px solid #dfdfdf; } .blog-navbar li>div>ul>li{ width: 100% !important } .blog-navbar li>div a{ padding: 10px; } .blog-nav-icon-mobile{ padding: 10px 0 } #header .input-search{ display: none } #header .input-search>input:focus{ width: 180px } .breadcrumb-outer{ padding-left: 5px } } @media(min-width: 1024px){  .hidden-large{display: none !important;} .width-50-large{width:50% !important} .width-100-large{width:100% !important} .navbar li>div>ul{ background: rgba(255,255,255,1); color: #313133 } .navbar li>div>ul a{ color: #313133 !important; font-size: 16px } .navbar li>div>ul a:hover{ color: #02B0EF !important; } .navbar li>div>ul a:hover{ } .navbar li>div>ul a{ position: relative; display: block } .navbar li>div>ul a:after{ display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 0; height: 1px; overflow: hidden; border-bottom: 1px solid #02B0EF; content: ""; transition: all .3s; margin: auto } .navbar li>div>ul a:hover:after{width: 100%} .margin-left-sm-30{ margin-left: 30px !important } } .row{ display: flex; } .col-md-1, .col-md-2 pd-5, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10 pd-5, .col-md-11, .col-md-12 { } .col-md-1 { width: 8.33333% } .col-md-2 pd-5 { width: 16.66667% } .col-md-3 { width: 25% } .col-md-4 { width: 33.33333% } .col-md-5 { width: 41.66667% } .col-md-6 { width: 50% } .col-md-7 { width: 58.33333% } .col-md-8 { width: 66.66667% } .col-md-9 { width: 75% } .col-md-10 pd-5 { width: 83.33333% } .col-md-11 { width: 91.66667% } .col-md-12 { width: 100% } .img-title { padding: 20px; font-size: 20px } .zoomin:hover { transition: transform .2s; transform: scale(1.1); } .text-center{ text-align: center; } @media only screen and (max-width: 767px) { .solution-section .pd-10{ width: 100% } .col-xs-1 { width: 8.33333% } .col-xs-2 { width: 16.66667% } .col-xs-3 { width: 25% } .col-xs-4 { width: 33.33333% } .col-xs-5 { width: 41.66667% } .col-xs-6 { width: 50% } .col-xs-7 { width: 58.33333% } .col-xs-8 { width: 66.66667% } .col-xs-9 { width: 75% } .col-xs-10 { width: 83.33333% } .col-xs-11 { width: 91.66667% } .col-xs-12 { width: 100% } .hidden-xs{ display: none; } } .slogan-bg { color: #fff; background: url(/assets/images/home/bg-slogan.jpg) center top; background-size: 100%; padding: 80px 0 60px; text-align: center; } @media (max-width: 767px) { .slogan-bg { padding: 40px 0 20px; background-size: cover; } .header-slider-item-1:after{ display: none !important; } } .count { line-height: 40px; color: #fff; margin: 35px 0 20px; font-size: 60px; font-weight: 300; } .header-fixed{ display: block !important } 
#header>.header-body, #footer>.footer-body{
    max-width: 1140px !important;
}
#mainbody{background: #fff;}
.questions-toggle h2:before{
    content: "";
    background: url(../images/icon-question.webp) no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    width: 35px;
    height: 35px;
    margin-right: 10px;
}
.questions-toggle h2{
    font-weight: 600;
    text-transform: capitalize !important;
}
#widgetItem-outline_footer-i2698192884>.widget-item-body{
    background: linear-gradient(to bottom, #fff 0%, #eff8ff 45%, #eff8ff 100%);
}
.questions-toggle  .questions-toggle-item{
    position: relative;
    padding: 0 10px;
}
.questions-toggle .questions-toggle-item-title{
    line-height: 26px;
    font-size: 16px;
    color: #42464e;
    display: block;
    font-weight: 500;
    padding: 10px 15px 10px 33px;
}
.questions-toggle .questions-toggle-item-title:hover{
    color: #0088ff;
    opacity: 1;
}
.questions-toggle .questions-toggle-item-title .number-circle{
    background: #0088ff;
    border-radius: 50%;
    font-size: 14px;
    color: #fff;
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    position: absolute;
    top: 10px;
    left: 0;
}
/*question*/
.contact-questions{padding: 30px 0;}
.contact-questions .questions-toggle-item {
    margin-bottom: 5px;
}
.contact-questions .questions-toggle-item-title{
    color: #0D71F5;
    background: rgb(230, 240, 255);
    padding: 15px 15px 15px 30px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .5s;
}
.contact-questions .questions-toggle-item-title i{
    font-weight: bold;
}
.contact-questions .questions-toggle-item-title:hover{
    background: rgb(250, 255, 255);
}
.contact-questions .questions-toggle-item-title.primary-color{
    background: rgb(13, 97, 242);
    color: #fff !important;
}
.contact-questions .questions-content{
    background: rgb(230, 240, 255);
    padding: 30px;
    box-shadow: 0px 7px 15px 0px rgb(3 92 108 / 10%);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-bottom: 40px;
}
.contact-questions .questions-content img{
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 7px 15px 0px rgb(28 28 28 / 50%);
    margin-left: 40px;
    width: calc(100% - 40px);
    margin-bottom: 15px;
}
.contact-questions .questions-content h3{
    margin-bottom: 10px;
    font-size: 16px;
}
.contact-questions .questions-content h3 .number-circle{
    padding: 2px 5px;
    display: inline-block;
    width: 27px;
    text-align: center;
    margin-right: 15px;
    border-radius: 15px;
    background: #3f8bff;
    color: #fff;
    font-weight: bold;
    font-size: 19px;
}
.contact-questions .questions-content h3 a{
    color: #1971fd;;
}
.contact-questions .width-70{margin: auto;}
@media (max-width: 48em){
    .contact-questions .width-70{
        width: 85%;
    }
    .contact-questions .questions-content{padding: 15px;}
}
/*Footer*/
.footer-body{
    margin-top: 30px;
    position: relative;
    z-index: 2;
}
#footer{
    background: #016bcb !important;
    color: #fff !important;
    position: relative;
}
#footer:after{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 300px;
    height: 300px;
    background: url(/assets/images/artboard-72x-8-20220705020350.png) no-repeat;
    background-size: contain;
    background-position: bottom right;
    z-index: 1;
    opacity: 0.9;
}
.footer {
    background: #202942;
    padding: 60px 0 0;
    position: relative;
    color: #adb5bd;
    padding-top: 165px;
}
#footer a{color: #fff !important;}
.footer-heading>div{color: #fff;font-size: 20px; position: relative;}
.footer-heading>div:before {
    content: "";
    position: absolute;
    bottom: 7px;
    left: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, #03bec7, #0d80c3, #0c6dc5);
}
.footer-heading-line:after{background: #F26202 !important;}
.footer-line {
    background: #F26202 !important;
}
.t-footer {
    margin-bottom: 30px;
}
.m-footer {
    margin-top: 30px;
}
.t-footer .list-footer-icon li:first-child {
    padding-left: 0;
}

.t-footer .list-footer-icon img {
    width: 30px;
    height: 30px;
}

.t-footer .list-footer-icon {
    display: inline;
    opacity: 1;
}

.list-footer-icon h3 {
    font-size: 15px;
    color: #fff;
}

.list-footer-icon ul {
    margin: 0;
    padding: 0;
}
.footer .logo-footer {
    color: #f8f9fc;
    font-weight: 700;
    font-size: 24px;
    padding: 3px 0;
    /* letter-spacing: 1px; */
}
.footer .logo-ft img{
    width: 60%;
    object-fit: contain;
}

.footer .footer-head {
    font-size: 20px;
    /* letter-spacing: 1px; */
    font-weight: 500;
}

.footer .foot-subscribe .form-control {
    background-color: #25304e;
    border: 1px solid #25304e;
    color: #f8f9fc;
}

.footer .foot-subscribe .form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.footer .foot-subscribe input::-webkit-input-placeholder {
    color: #adb5bd;
}

.footer .foot-subscribe input:-ms-input-placeholder {
    color: #adb5bd;
}

.footer .foot-subscribe input::-ms-input-placeholder {
    color: #adb5bd;
}

.footer .foot-subscribe input::placeholder {
    color: #adb5bd;
}

.footer .text-foot {
    color: #adb5bd;
}

.footer .footer-list {
    margin-bottom: 0;
}

.footer .footer-list li {
    margin-bottom: 10px;
}

.footer .footer-list li a {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.footer .footer-list li a:hover {
    color: #e6e8ea;
}

.footer .footer-list li:last-child {
    margin-bottom: 0;
}

.footer-wrapper .reserved, .footer-wrapper .reserved a {
    color: #adb5bd;
    margin-top: 5px;
}

.footer.footer-bar {
    padding: 25px 0;
}

.footer.footer-bar .payment-cards img {
    height: 25px;
}

.list-footer-icon li {
    list-style: none;
    display: inline-block;
    padding-left: 9px;
}

.footer-area span, .footer-area p {
    color: #9F9F9F;
    font-weight: 500;
}

.footer-wrapper .title-footer {
    margin-bottom: 15px;
    color: #fff;
    font-weight: bold;
    text-transform: capitalize;
}
.rule-list-items li{float: left;margin-right: 30px;}
.footer.footer-bar {
    padding: 25px 0;
}
hr {
    margin-top: 0;
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid #333744;
}
.footer > hr{margin-top: 50px;}
#footer>.footer-body p{
    color: #fff;
    line-height: 1.8;
    margin-top: 0;
}
#footer>.footer-body ul{
    list-style-type: none;
    margin-top: 0;
    padding-left: 0;
}
#footer>.footer-body ul li{
    line-height: 2;
}
#footer>.footer-body a:hover{
    color: #6ECFF6 !important;
}
#footer>.footer-body .flex-center .footer-heading{
    flex-basis: 100%;
    max-width: 100%;
    text-align: center;
}
#footer>.footer-body .flex-center .footer-heading > div:before {
    width: 150px;
    left: calc(50% - 75px);
    background: linear-gradient(90deg, #0c6dc5, #03bec7, #0c6dc5);
}
#footer>.footer-body .flex-center ul{
    display: flex;
    justify-content: space-between;
}
#footer>.footer-body .flex-center ul li img{
    height: 40px;
}
@media (max-width: 48em){
    .footer-wrapper .title-footer {
        margin-top: 45px;
    }
    #footer>.footer-body .flex-center ul{flex-wrap: wrap;}
    #footer:after{display: none;}
    #footer>.footer-body .flex .width-25{width: 50% !important;float: left;}
    #footer>.footer-body .flex .width-25:after{content: "";clear: both;}
    #footer>.footer-body .flex-center{clear: both;}
    .footer-heading>div{font-size: 17px;}
    #footer>.footer-body .flex-large>.width-20{width: 60% !important;}
}

/*page tuyendung*/
.widget-item-body section:not(.slider-outer){
    padding: 30px 0;
}
.wellcome{
    padding-top: 0;
}
.wellcome .flex{
    align-items: center;
}
.wellcome .content h2{
    font-size: 48px;
    font-weight: 600;
    line-height: 1.4;
}
.wellcome .content h2 span span{
    color: #016BCB;
}
.wellcome .content p{
    max-width: 50%;
    line-height: 1.5;
    text-align: justify;
    font-size: 18px;
    color: #282828;
    margin-bottom: 50px;
}
.wellcome .content a.btn{
    padding: 15px 20px;
    font-size: 20px;
}
.wellcome .flex>div{
    position: relative;
}
.wellcome .img1{
    height: 500px;
    object-fit: cover;
}
.wellcome .width-50:nth-child(2):before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border: 40px solid transparent;
    border-left-color: #fff;
    border-bottom-color: #fff;
}
.wellcome .img2{
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-50%,10%);
    width: 125px;
}
.aboutus{
    padding-top: 100px;
    position: relative;
}
.aboutus:before{
    content: "";
    width: 70%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translatex(-25%);
    height: 100%;
    background: url(/assets/images/khung.png) no-repeat;
    z-index: -1;
}
.aboutus h2{
    color: #016BCB;
    font-size: 34px;
    font-weight: bold;
}
.aboutus .width-50{
    padding: 0 15px;
}
.aboutus p{
    font-size: 18px;
    letter-spacing: .5px;
    line-height: 1.5;
    text-align: justify;
}
.aboutus .col2 .box1{
    background-color: #3796e0;
    margin-bottom: 10px;
}
.aboutus .col2 .box2{
    background: #0f6dc2;
}
.aboutus .col2 h3{
    font-size: 28px;
    font-weight: bold;
}
.aboutus .col2 > div{
    position: relative;
    padding: 15px 40px;
    color: #fff;
}
.aboutus .col2 > div:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 100%;
    background: #25E2C5;
}
.aboutus .col2 > div:after{
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translatey(-50%);
    width: 13px;
    height: 13px;
    border-radius: 20px;
    background: #fff;
}

.aboutus .flex:last-child{
    margin-top: 50px;
}
.title h2{
    text-align: center;
    color: #016BCB;
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 50px;
}
.nature .nav-tabs-links{position: relative;}
.nature .nav-tabs{
    display: flex;
    list-style-type: none;
    justify-content: space-between;
    position: relative;
    padding: 0;
}
.nature .nav-tabs-links:before{
    content: "";
    position: absolute;
    height: 8px;
    width: 100%;
    top: calc(50% - 4px);
    background: #EFF1FE;
}
.nature .nav-tabs a{
    padding: 19px 10px;
    background: #EFF1FE;
    font-size: 28px;
    font-weight: bold;
    width: 72px;
    display: inline-block;
    text-align: center;
}
.nature .nav-tabs a.active,.nature .nav-tabs a:hover{
    background: #016BCB;
    color: #fff;
}
.nature .tab-pane:not(.active){
    display: none;
}
.nature .tab-content{
    margin-top: 30px;
}
.nature .tab-content .flex{
    align-items: center;
}
.nature .tab-content .width-50:first-child{
    position: relative;
    padding-right: 40px;
}
.nature .tab-content .width-50:first-child:before{
    content: "";
    position: absolute;
    top: 0;
    right: 40px;
    border: 30px solid #fff;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.nature .tab-content .width-50:first-child:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-50%,20%);
    width: 125px;
    height: 200px;
    background: url(/assets/images/bi.png) no-repeat;
    background-size: contain;
}
.nature .tab-content .width-50:first-child img{
    max-height: 500px;
    object-fit: cover;
    width: 100%;
}
.nature .tab-content .c-content{
    padding-left: 50px;
}
.nature .tab-content .c-content h3{
    font-size: 34px;
    font-weight: bold;
    color: #016BCB;
    margin-bottom: 30px;
}
.nature .tab-content .c-content ul li{
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.7;
}
.nature .tab-content .c-content ul li::marker{
    color: #004884;
}
.widget-item-body .gallery{
    padding-top: 50px;
}
.gallery .list-img{
    display: flex;
    flex-wrap: wrap;
    border-top: 10px solid #6ECFF6;
    border-bottom: 10px solid #6ECFF6;
    position: relative;
}
.gallery .list-img .item-img{
    flex-basis: 25%;
    max-width: 25%;
}
.gallery .list-img .item-img img{
    height: 350px;
    object-fit: cover;
    width: 100%;
}
.gallery .list-img .item-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 999;
    padding: 20px 35px;
    background: #fff;
}
.gallery .list-img .item-text h3{
    color: #6ECFF6;
    font-weight: bold;
    font-size: 30px;
    text-transform: capitalize;
    text-align: center;
}
.gallery .list-img .item-text:before,.gallery .list-img .item-text:after,
.gallery .list-img .item-text h3:before,.gallery .list-img .item-text h3:after{
    content: "";
    position: absolute;
    border: 15px solid #6ECFF6;
}
.gallery .list-img .item-text:before{
    left: 0;
    top: 0;
    border-right-color: transparent;
    border-bottom-color: transparent;
}
.gallery .list-img .item-text:after{
    right: 0;
    top: 0;
    border-left-color: transparent;
    border-bottom-color: transparent;
}
.gallery .list-img .item-text h3:before{
    left: 0;
    bottom: 0;
    border-right-color: transparent;
    border-top-color: transparent;
}
.gallery .list-img .item-text h3:after{
    right: 0;
    bottom: 0;
    border-left-color: transparent;
    border-top-color: transparent;
}
.fea_work{
    padding-top: 50px;
}
.fea_work .flex{
    margin: auto;
}
.fea_work .flex .width-50{
    padding: 0 25px;
}
.fea_work .box{
    text-align: center;
    width: 95%;
    margin: auto;
    background: #016BCB;
    padding: 30px 30px 15px;
}
.fea_work .box .box-image{
    position: relative;
}
.fea_work .box .box-image:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border: 20px solid #016BCB;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.fea_work .box .box-image:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border: 20px solid #016BCB;
    border-top-color: transparent;
    border-right-color: transparent;
}
.fea_work .box img{
    height: 450px;
    object-fit: cover;
    width: 100%;
}
.fea_work .box .box-text{
    padding: 15px 0;
}
.fea_work .box .box-text h5{
    font-size: 14px;
    margin-bottom: 10px;
    color: #fff;
}
.fea_work .box .box-text h3{
    font-weight: bold;
    color: #fff;
    font-size: 24px;
}

@media (max-width: 48em){
	.flex>.width-50 {
	    width: 100%;
	    padding: 10px 15px;
	}
	.aboutus:before {
	    width: 100%;
	    opacity: 0.5;
	}
	.wellcome .img2 {
	    transform: translate(-10%,5%);
	}
	.title h2 {
	    font-size: 30px;
	    margin-bottom: 30px;
	}
	.nature .nav-tabs{padding: 0 15px;}
	.nature .nav-tabs a {
	    padding: 14px 10px;
	    font-size: 26px;
	    width: 60px;
	}
	.nature .tab-content .width-50:first-child img {  max-height: 400px;}
	.nature .tab-content .width-50{padding: 0 15px 20px !important;}
	.nature .tab-content .width-50:first-child:after {transform: translate(-10%,0%);}
	.nature .tab-content .c-content h3{margin: 15px 0;}
	.nature .tab-content .c-content ul li{margin-bottom: 10px;}
	.gallery{padding-top: 0;}
	.gallery .list-img .item-img {
	    flex-basis: 50%;
	    max-width: 50%;
	}
	.fea_work .box{width: 100%;}
	.fea_work .box img {height: 250px;}
	.fea_work .flex .width-33{width: 100%;padding: 0 15px 15px;}
	.gallery .list-img .item-img img{height: 300px;}
	.gallery .list-img .item-text h3{font-size: 20px;}
	.gallery .list-img .item-text {
	    padding: 15px 30px;
	    width: 85%;
	}
	.gallery .list-img .item-text:before, .gallery .list-img .item-text:after, .gallery .list-img .item-text h3:before, .gallery .list-img .item-text h3:after{
		border-width: 12px;
	}
	.nature .tab-content .width-50:first-child:before{right: 0;}
}



/*Css - gobrand*/
/*banner*/
.solution.banner{padding-top: 0;}
.banner-container .container,.dichvu .container,.simple .container {
    overflow: hidden;
    max-width: 1200px;
    margin:  auto;
}
.banner-container {
    position: relative;
    min-height: 372px;
    margin: auto;
    background-image: url(/files/uploads/2022/08/nen.png);
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.solution.banner .d-flex{display: flex;}
section.solution.banner img {
    padding-top:33px;
}
.banner-content {
    z-index: 100;
    padding-top: 72px;
}
.banner-content h4 {
    font-size: 12px;
    line-height: 36px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #FF2727;
}
.banner-content h2 {
    font-size: 38px;
    line-height: 36px;
    font-weight: normal;
    align-items: center;
    letter-spacing: -0.03em;
    color: #FF2727;
}
.banner-content p {
    font-size: 16px;
    line-height: 22px;
    color: #929292;
    letter-spacing: 0em;
    max-width: 467px;
    z-index: 100;
    margin-bottom: 22px;
}
.modal.fade.show {
    opacity: 1;
}
div#staticBackdrop.modal.fade .modal-dialog{
    top: 15%;
    max-width: unset;
    left: calc((100% - 800px)/2);
    width: 800px;
    pointer-events: unset;
}

div#staticBackdrop .new-contact-38365 .div-new-contact{
    width: 100%;
}
div#staticBackdrop.modal.fade .modal-dialog button.btn-close {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 9;
}
.modal-backdrop.fade.show {
    display: none;
}
@media (max-width: 800px){
    div#staticBackdrop.modal.fade .modal-dialog {
        top: 10%;
        max-width: unset;
        left: 2%;
        width: 96%;
        pointer-events: unset;
        margin-left: 0;
        margin-right: 0;
    }
}
.btn-banner {
    background-color: #FF2727;
    padding: 10px 30px;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    z-index: 100;
    transition: all 0.3s;
    border-radius: 200px;
}
.btn-banner:hover {
    transform: translateY(-5px);
}
/*introduce*/
.img-btn{
    text-align: center;
}
.introduce-text{
    text-align: center;
}
.introduce-text h2{
    font-size: 26px;
    line-height: 30px;
    color: #FF2727;
}
.introduce-text p{
    font-size: 14px;
    line-height: 18px;
    color: #929292;
}
.introduce-text h2 strong{
    text-transform: uppercase;
}
.introduce-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1106px;
    margin: auto;
}
@media screen and (min-width:768px){
    .introduce-content.pt-4:nth-child(2n+1) .introduce-content-left-1 {
        order: 2;
    }
    .introduce-content.pt-4:nth-child(2n+1) .introduce-content-right-1 {
        text-align: right;
    }
}
.introduce-content-right-1 h2{
    font-size: 30px;
    line-height: 36px;
    color: #000000;
}
.introduce-content-right-1 p{
    font-size: 14px;
    line-height: 20px;
    color: #717070;
}
.introduce-content-left-1{
    width: 91.68%;
    padding-right: 52px;
}
.introduce-content-right-1{
    width: 89%;
    padding-left: 52px;
    align-self: center;
}
.introduce-content-right-1 h2 {
    font-weight: 400;
}
.introduce-content-left-2 h2{
    font-size: 30px;
    line-height: 36px;
    color: #000000;
}
.introduce-content-left-2 p{
    font-size: 14px;
    line-height: 20px;
    color: #717070;
}
.introduce-content-right-2{
    width: 91.68%;
    padding-left: 52px;
}
.introduce-content-left-2{
    width: 91.68%;
    padding-right: 52px;
    align-self: center;
    text-align: right;
}
/*service*/
.dichvu{
    background: #F8F8F8;
}
.title-dv h2{
    font-size: 26px;
    line-height: 30px;
    align-items: center;
    text-align: center;
    color: #FF2727;
}
.title-dv{
    text-align: center;
}
.title-dv strong{
    text-transform: uppercase;
}
.title-dv p{
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #929292;
}
.service{
    justify-content: center;
    display: flex;
    padding-bottom: 48px;
}
.col-service{
    width: 23.75%;
    padding-right: 40px;
    padding-left: 40px;
}
.title-service{
    font-weight: bold;
    font-size: 18px;
    line-height: 20px;
    color: #000000;
}
.content-service p{
    font-size: 14px;
    line-height: 18px;
    color: #929292;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 3;
    line-height: 18px;
}
/*simple*/
.img-simple{
    max-width: 100%;
}
.simple-content{
    grid-template-columns: 1fr 1fr;
    display: grid;
}
.simple-content-right h2{
    font-weight: bold;
    font-size: 26px;
    line-height: 30px;
    align-items: center;
    color: #FF0000;
}
.simple-content-right p{
    font-size: 14px;
    line-height: 18px;
    color: #929292;
}
.steps-steps{
    width: 54.39%;
    padding-right: 12.5px;
}
.col-steps{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.steps-one{
    width: 72px;
    height: 32px;
    background: #009ACD;
    display: flex;
    position: relative;
}
.steps-one::before {
    content: "";
    position: absolute;
    right: -10px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 11px solid #009acd;
    border-top: 15px solid #fff;
    border-bottom: 17px solid #ffff;
}
.steps-one p{
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    align-items: center;
    color: #FFFFFF;
    margin: auto;
}
.text-steps p{
    font-size: 18px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #000000;
    padding-left: 16px;
    margin:  0;
}
/*form*/
.form-tv{
    background-image: url(/files/uploads/2022/08/tuvan.png);
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.g-3{
    width: 35%;
    justify-content: center;
    margin: auto;
    background: #1999ce;
    border-radius: 8px;
}
.content-tv{
    padding-bottom: 37px;
}
.title-tuvan h2{
    font-weight: bold;
    font-size: 22px;
    line-height: 28px;
    text-transform: uppercase;
    color: #FFFFFF;
    padding-top: 28px;
    text-align: center;
}
.tiltle-form h3{
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
}
.content-tu-van{
    height: 150px;
}
button.new-contact-btn {
    padding: 5px 10px;
    box-shadow: 0 -5px 0 0 rgb(0 0 0 / 15%) inset;
    border: 1px solid #af0e17;
    border-radius: 5px;
    outline: none;
    color: white;
    background-color: #e5232b;
    margin-bottom: 20px;
    font-size: 14px;
}
/*question*/
.questions-content p{margin: 0 0 10px;line-height: 1.5;}

@media only screen and (max-width: 912px) and (min-width: 600px){
    .col-service{
        width: unset;
    }
    .title-service{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        -webkit-line-clamp: 2;
        line-height: 18px;
    }
    .g-3{
        width: 50%;
    }
    .banner-content h4{
        line-height: 16px;
    }
    section.solution.banner img{
        width: 100%;
        padding-top:72px;
    }
    .introduce-content-left-2{
        width: 100%;
    }
    .introduce-content-left-1{
        width: 100%;
    }
    .introduce-content-right-1{
        width: 100%;
    }
    .introduce-content-right-2{
        width: 100%;
    }
    .simple-content{
        display: grid;
        grid-template-columns: 1fr;
    }
    .simple-content-left{
        order: 2;
        text-align: center;
    }
    .simple-content-right{
        order: 1;
        text-align: center;
    }
}
@media only screen and (max-width: 600px){
	.widget-item-body section.simple,.widget-item-body section.contact-questions{padding: 30px 15px;}
	.contact-questions .questions-toggle-item-title{padding: 10px 10px 15px 20px;}
    .banner-content{
        padding-left: 20px;
        padding-right: 15px;
    }
    .introduce-content{
        grid-template-columns: 1fr;
        padding: 25px 0;
    }
    .introduce-content-left-1{
        align-self: center;
        justify-self: center;
        padding-right: 0px;
    }
    .introduce-content-right-1 {
        align-self: center;
        justify-self: center;
        padding-top: 20px;
        padding-left: 0px;
    }
    .introduce-content-left-2{
        align-self: center;
        justify-self: center;
        padding-top: 20px;
        padding-right: 0px;
        order:2;
        text-align: left;
    }
    .introduce-content-right-2{
        align-self: center;
        justify-self: center;
        padding-left: 0px;
    }
    .col-service{
        width: unset;
        padding-right: 10px;
        padding-left: 10px;
    }
    .simple-content{
        grid-template-columns: 1fr;
    }
    .simple-content-right{
        padding-top:20px;
    }
    .steps-steps{
        width: unset;
    }
    .steps{
        display: unset !important;
    }
    .g-3{
        width: unset;
    }
    .title-service{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        -webkit-line-clamp: 3;
        line-height: unset;
    }
    .service{
        grid-template-columns: 1fr 1fr;
        grid-row-gap:20px;
        display: grid;
    }
    .solution.banner img{
        right: 0px !important;
    }
    section.solution.banner img {
        top: 33px;
        height: 339px;
        position: unset;
        width: 95%;
    }
    .justify-content-between{
        display: block !important;
    }
}