:root {
--ftc: 0px;
--wcategory:378px;
--wvideo:336px;
--bs-btn-font-family:'Prompt';
}
@import url('../fonts/font.css');
body{
font-family: 'Prompt' !important;
font-style: normal;
background-color: #FFF;
background-image: url(../images/bg.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 100% auto;
}
.top-logo{
width: 109px;
}
.navbar-m{
background: #FFF;
}
.navbar-toggler{
border:0;
}
.navbar-m .nav-link{
font-family: 'Prompt';
font-style: normal;
font-weight: 400;
font-size: calc(20px + var(--ftc));
line-height: 30px;
text-align: center;
color: #232323;
padding-left: 25px !important;
padding-right: 25px !important; ;
padding-top: 3px;
padding-bottom: 2px;
}
.navbar-m .nav-link.active{
color: #232323;
font-weight: bold;
}
.btn-selectFont{
background: #FFFFFF;
border: 1px solid #D9D9D9;
border-radius: 50%;
padding: 0;
width: 34px;
height: 34px;
font-style: normal;
font-weight: 400;
text-align: center;
color: #4F4F4F;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 0px;
margin-right: 10px
}
.btn-selectFont.size-sm{
font-size: 14px;
line-height: 18px;
}
.btn-selectFont.size-nm{
font-size: 16px;
line-height: 21px;
}
.btn-selectFont.size-lg{
font-size: 18px;
line-height: 23px;
}
.btn-check:checked + .btn-selectFont{
border-radius: 24px;
border: 2px solid #FF8500;
background: #FFF;
}
.footer{
background: #FBFBFB;
border-bottom: 4px solid #FF8500;
}
.footer-logo{
width: 135px;
}
.i-call{
background-image: url('data:image/svg+xml,');
padding-left: 26px;
background-repeat: no-repeat;
background-position: center center;
background-size: 18px;
}
.i-print{
background-image: url('data:image/svg+xml,');
padding-left: 26px;
background-repeat: no-repeat;
background-position: center center;
background-size: 22px;
}
.btn-st-1{
background-color: #FF8500;
border-radius: 30px;
padding: 5px 30px !important;
color: #FFFFFF !important;
font-weight: 400 !important;
}
.title-st-1{
border-radius: 10px;
background: #31525B;
color: #FFF;
text-align: center;
font-size: calc(18px + var(--ftc));
font-style: normal;
font-weight: 700;
line-height: normal;
padding: 10px;
}
.title-st-2{
border-radius: 10px;
background: #FFA101;
color: #FFF;
text-align: center;
font-size: calc(18px + var(--ftc));
font-style: normal;
font-weight: 700;
line-height: normal;
padding: 10px;
}
.progress-st-1 {
height: 24px;
width: 100px;
border-radius: 16px;
background-color: #888888;
width: 100%;
}
.progress-st-1 .progress-bar{
background-color: #303030;
}
.progress-st-2 {
display: flex;
height: 35px;
overflow: hidden;
font-size: .75rem;
background-color: #FFEEDD;
border-radius: 20px;
}
.progress-st-2 .progress-bar {
height: 22px;
margin-top: 7px;
border-radius: 10px;
margin-left: 0;
position: relative;
overflow: unset;
background: #FFBD3C;
box-shadow: 0px 1.64539px 6.58156px rgba(0, 0, 0, 0.1352);
}
.progress-st-2 .progress-bar:after {
content: "";
width: 12px;
height: 29px;
position: absolute;
right: 0;
background: #FFBD3C;
box-shadow: 0px 1.64539px 6.58156px rgb(0 0 0 / 14%);
border-radius: 6.58156px;
margin-top: -2px;
}
.progress-st-3 {
display: flex;
height: 35px;
overflow: hidden;
font-size: .75rem;
background-color: #D8F6F8;
border-radius: 20px;
}
.progress-st-3 .progress-bar {
height: 22px;
margin-top: 7px;
border-radius: 10px;
margin-left: 0;
position: relative;
overflow: unset;
background: #31525B;
box-shadow: 0px 1.64539px 6.58156px rgba(0, 0, 0, 0.1352);
}
.progress-st-3 .progress-bar:after {
content: "";
width: 12px;
height: 29px;
position: absolute;
right: 0;
background: #31525B;
box-shadow: 0px 1.64539px 6.58156px rgb(0 0 0 / 14%);
border-radius: 6.58156px;
margin-top: -2px;
}
.chart-legend-st-1.legend-p ul li:last-child{
display: none !important;
}
.table-tbody-scroll tbody {
display: block;
height: 450px;
overflow: auto;
width: calc(100% - 8px);
}
/* width */
.table-tbody-scroll tbody::-webkit-scrollbar {
width: 6px;
}
/* Track */
.table-tbody-scroll tbody::-webkit-scrollbar-track {
background: #F0F0F0;
}
/* Handle */
.table-tbody-scroll tbody::-webkit-scrollbar-thumb {
background: #1488CA;
border-radius: 10px;
}
/* Handle on hover */
.table-tbody-scroll tbody::-webkit-scrollbar-thumb:hover {
background: #555;
}
.table-tbody-scroll thead,.table-tbody-scroll tbody tr,.table-tbody-scroll tfoot {
display: table;
width: 100%;
table-layout: fixed;/* even columns width , fix width of table too*/
}
.table-tbody-scroll thead ,
.table-tbody-scroll tfoot
{
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
.progress-st-t1 {
height: 24px;
max-width: 100px;
border-radius: 8px;
background-color: #D9D9D9;
width: 100%;
font-style: normal;
font-weight: 700;
font-size: calc(16px + var(--ftc));
line-height: 23px;
text-align: right;
color: #303030;
width: 174px;
position: relative;
margin: 0 auto;
}
.progress-st-t1 .vl{
position: absolute;
right: 5px;
top:0px;
}
.progress-st-t1 .progress-bar{
background-color: #4AD991;
}
.progress-st-t2 {
height: 24px;
max-width: 100px;
width: 100%;
border-radius: 8px;
background-color: #D9D9D9;
width: 100%;
font-style: normal;
font-weight: 700;
font-size: calc(16px + var(--ftc));
line-height: 23px;
text-align: right;
color: #303030;
width: 174px;
position: relative;
margin: 0 auto;
}
.progress-st-t2 .vl{
position: absolute;
right: 5px;
top:0px;
}
.progress-st-t2 .progress-bar{
background-color: #FFAA54;
}
.progress-st-t3 {
height: 24px;
max-width: 100px;
width: 100%;
border-radius: 8px;
background-color: #D9D9D9;
width: 100%;
font-style: normal;
font-weight: 700;
font-size: calc(16px + var(--ftc));
line-height: 23px;
text-align: right;
color: #303030;
width: 102px;
position: relative;
margin: 0 auto;
}
.progress-st-t3 .vl{
position: absolute;
right: 5px;
top:0px;
}
.progress-st-t3 .progress-bar{
background-color: #80C3FF;
}
.progress-st-t4 {
height: 24px;
width: 100px;
border-radius: 8px;
background-color: #D9D9D9;
width: 100%;
font-style: normal;
font-weight: 700;
font-size: calc(16px + var(--ftc));
line-height: 23px;
text-align: right;
color: #303030;
width: 102px;
position: relative;
margin-right: 18px;
margin-left: auto;
}
.progress-st-t4 .vl{
position: absolute;
right: 5px;
top:0px;
}
.progress-st-t4 .progress-bar{
background-color: #FF8C8C;
}
.select2-sm .select2-container .select2-selection--single .select2-selection__rendered {
padding-right: 40px;
}
.form-search{
background: #FFFFFF;
border: 1px solid #C4C4C4;
border-radius: 8px;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 21.5L16.514 17.006L21 21.5ZM19 11C19 13.2543 18.1045 15.4163 16.5104 17.0104C14.9163 18.6045 12.7543 19.5 10.5 19.5C8.24566 19.5 6.08365 18.6045 4.48959 17.0104C2.89553 15.4163 2 13.2543 2 11C2 8.74566 2.89553 6.58365 4.48959 4.98959C6.08365 3.39553 8.24566 2.5 10.5 2.5C12.7543 2.5 14.9163 3.39553 16.5104 4.98959C18.1045 6.58365 19 8.74566 19 11V11Z' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding: 4px 15px;
background-size: 16px auto;
}
.side-progress li {
position: relative !important;
}
.side-progress li p {
position: absolute !important;
left: 15px !important;
line-height: 18px !important;
padding-top: 3px !important;
}
.chart-legend-st-1 ul{
flex-wrap: wrap;
}
.chart-legend-st-1 ul li{
margin-bottom: 20px;
font-weight: 600;
font-size: calc(14px + var(--ftc));
}
.chart-legend-st-1 ul li span{
border-radius: 5px;
}
.table-n1 th{
background: #03407D;
text-align: center;
color: #FFF;
font-size: calc(14px + var(--ftc));
}
.table-n1 td{
font-size: calc(14px + var(--ftc));
height: 40px;
}
.ic-n1{
width: 24px;
height: 24px;
background-size: 24px auto;
background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.9017 7.52734V9.02734H20.966L12.0892 17.9042L8.71418 14.5292L3.87134 19.372L4.93203 20.4327L8.71418 16.6505L12.0892 20.0255L22.0267 10.088V13.1523H23.5267V7.52734H17.9017Z' fill='%239D573C'/%3E%3Cpath d='M2.52661 4.90234H1.02661V23.2773H23.5266V21.7773H2.52661V4.90234Z' fill='%239D573C'/%3E%3C/svg%3E");
}
@media screen and (max-width: 991px) {
.side-progress li p {
position: absolute !important;
font-size: calc(12px + var(--ftc)) !important;
left: 15px !important;
line-height: 16px !important;
padding-top: 1px !important;
}
}
.main-sidebar-header .mobile-logo{
display: none;
}
.btn-check:checked:disabled + .btn-check-st-1 {
background: #FC8004 !important;
border: 1px solid #FC8004 !important;
color: #FFF !important;
}
.form-st-2{
background: #FFFFFF;
border: 1px solid #E5E5E5;
border-radius: 8px;
font-size: calc(16px + var(--ftc));
line-height: 28px;
letter-spacing: 0.5px;
color: #C2C2C2;
}
.card-st-6{
border:0;
border-radius: 10px;
background: #FFF;
box-shadow: 0px 20px 60px 0px rgba(128, 144, 155, 0.20);
}
.card-st-6 .card-body{
padding: 15px;
}
.table.table-st-1>:not(caption)>*>*{
background: rgba(179, 222, 229, 0.25);
}
.table-st-1.table-striped>tbody>tr:nth-of-type(odd)>*{
}
.table-st-1.table-striped>tbody>tr:nth-of-type(odd)>*{
background-color: #FFF;
box-shadow: unset;
}
.img-1{
width: 279.999px;
height: 219.053px;
border-radius: 15px;
object-fit: cover;
}
.img-2{
width: 252.508px;
height: 120px;
border-radius: 15px;
object-fit: cover;
}
.block-news-end{
width: 255px;
}
.tag{
color: #FC8004;
font-family: Prompt;
font-size: calc(12px + var(--ftc));
font-style: normal;
font-weight: 400;
line-height: 100%;
border-radius: 3px;
background: #fc800445;
padding: 4px 6px;
display: inline-block;
}
.calendar{
width: 54px;
height: 56px;
border-radius: 8px;
background: #FFF;
box-shadow: 0px 0px 10px 0px #CCC;
text-align: center;
overflow: hidden;
position: absolute;
left: 10px;
bottom: 10px;
}
.calendar .d{
background: #FFF;
height: 50%;
color: #FC8004;
padding-top: 3px;
}
.calendar .m{
background: #FC8004;
height: 50%;
color: #FFF;
padding-top: 2px;
}
.card-w1{
width: 233px;
}
.form-st-1{
border-radius: 15px;
background: rgba(255, 240, 233, 0.70);
padding: 20px 11px 15px 20px;
color: #1F1F39;
font-family: Prompt;
font-style: normal;
font-weight: 400;
line-height: 30px;
border:0;
}
.btn-st-2{
color: #FFF;
text-align: center;
font-family: Prompt;
font-style: normal;
font-weight: 700;
line-height: 40px;
border-radius: 20px;
background: #FF8500;
padding: 14px 62px;
}
.card-st-2{
border:0;
border-radius: 8px;
background: #FFF;
box-shadow: 1px 4px 20px 0px rgba(0, 0, 0, 0.10);
overflow: hidden;
}
.card-st-2 img{
width: 100%;
aspect-ratio:1.4;
object-fit: cover;
}
.card-st-2 .card-body{
height: 80px;
overflow: hidden;
}
.paginationjs{
justify-content: center;
}
.paginationjs .paginationjs-pages li{
border:0 !important;
margin-left: 5px;
margin-right: 5px;
}
.paginationjs .paginationjs-pages li>a{
border-radius: 50% !important;
border:0;
font-size: 18px;
line-height: 26px;
color: #333;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.paginationjs .paginationjs-pages li.active,
.paginationjs .paginationjs-pages li.active>a{
border-radius: 50% !important;
color: #FFF;
background: #FF8500;
}
.di{
width: 1px;
background-color: #4B538F;
height: 15px;
}
.btn-share-link{
background-image: url('data:image/svg+xml,');
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center center;
}
.btn-share-facebook{
background-image: url('data:image/svg+xml,');
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center center;
}
.btn-share-ins{
background-image: url('data:image/svg+xml,');
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center center;
}
.btn-share-twitter{
background-image: url('data:image/svg+xml,');
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center center;
}
.card-st-3{
border-radius: 25px;
border: 1px solid #EEE;
background: #FFF;
}
.news-tag{
display: block;
border-radius: 18px;
border: 1px solid #E4E4E4;
color: #2B2B4C;
font-family: Prompt;
font-size: 16px;
font-style: normal;
font-weight: 400;
padding: 10px;
padding-bottom: 8px;
margin-bottom: 10px;
margin-right: 10px;
}
.news-tag:hover{
display: block;
font-weight: 400;
font-size: 16px;
color: #FC8004;
border: 1px solid rgba(255, 133, 0, 0.36);
background: rgba(255, 133, 0, 0.08);
}
.news-tag.active{
display: block;
font-weight: 400;
font-size: 16px;
color: #FC8004;
border: 1px solid rgba(255, 133, 0, 0.36);
background: rgba(255, 133, 0, 0.08);
}
.img-3{
width: 135px;
height: 107px;
object-fit: cover;
border-radius: 8px;
}
.btn-st-3{
color: #FC8004;
font-family: Prompt;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px;
border-radius: 15px;
border: 1px solid #FC8004;
background: rgba(252, 128, 4, 0.15);
padding: 6px 25px;
}
.card-st-4{
border-radius: 25px;
border: 1px solid #EEE;
background: #FF8500;
}
.spc .splide__pagination{
bottom: -34px;
justify-content: start;
margin-left: 0;
padding-left: 0;
}
.mh1{
max-height: 84px;
overflow: hidden;
}
.container-c{
width: 90%;
max-width: 100%;
}
.unset-bgimage{
background-image: unset;
}
.btn-clear-map{
color: var(--FOCUS, #FD9009);
font-family: Prompt;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
border-radius: 5px;
border: 1px solid var(--FOCUS, #FD9009);
padding: 1px 6px;
}
.dataTables_scrollBody::-webkit-scrollbar {
width: 8px;
}
/* Track */
.dataTables_scrollBody::-webkit-scrollbar-track {
background: #C4C4C4;
border-radius: 50px;
}
/* Handle */
.dataTables_scrollBody::-webkit-scrollbar-thumb {
border-radius: 50px;
background: #000;
height: 8px;
}
/* Handle on hover */
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
background: #555;
}
.fix-col{
width: 460px;
}
.footer2{
background-color: #FF8500;
background-image: url(../images/bg-footer.png);
background-repeat: no-repeat;
background-position: bottom center;
background-size: 100% auto;
}
@media screen and (max-width: 1200px) {
.navbar-m .nav-link{
font-family: 'Prompt';
font-style: normal;
font-weight: 400;
font-size: calc(16px + var(--ftc));
line-height: 30px;
text-align: center;
color: #232323;
padding-left: 10px !important;
padding-right: 10px !important; ;
padding-top: 3px;
padding-bottom: 2px;
}
.top-logo{
width: 89px;
}
.btn-st-1 {
padding: 1px 30px !important;
}
.title-st-1 {
border-radius: 8px;
color: #FFF;
text-align: center;
font-size: calc(16px + var(--ftc));
font-style: normal;
font-weight: 500;
line-height: normal;
padding: 7px;
}
.title-st-2 {
border-radius: 8px;
color: #FFF;
text-align: center;
font-size: calc(16px + var(--ftc));
font-style: normal;
font-weight: 500;
line-height: normal;
padding: 7px;
}
.block-news-end{
width: 100%;
}
}
@media screen and (max-width: 767px) {
.btn-st-1 {
width: 150px;
text-align: center !important;
padding: 2px 30px !important;
margin-top: 5px;
margin-bottom: 5px;
}
.navbar-m .nav-item{
width: 100%;
}
.navbar-m .nav-link{
text-align: left;
}
.card-w1{
width: 100%;
}
.progress-st-1 {
height: 22px;
}
.progress-st-2 {
height: 25px;
}
.progress-st-2 .progress-bar {
height: 14px;
margin-top: 6px;
}
.progress-st-2 .progress-bar:after {
height: 20px;
}
.progress-st-3 {
height: 25px;
}
.progress-st-3 .progress-bar {
height: 14px;
margin-top: 6px;
}
.progress-st-3 .progress-bar:after {
height: 20px;
}
.form-st-1{
border-radius: 10px;
padding: 12px 11px 10px 20px;
line-height: 30px;
}
.btn-st-2{
line-height: 30px;
border-radius: 15px;
padding: 12px 42px;
}
.container-c{
width: 98%;
max-width: 100%;
}
}
@media screen and (max-width: 567px) {
.img-2{
width: 100%;
height: auto;
aspect-ratio: 2;
}
.img-1{
width: 100%;
height: auto;
aspect-ratio: 1.4;
}
.fix-col{
width: 100%;
}
#vmap{
zoom:90%;
}
}
@media screen and (max-width: 413px) {
#vmap{
zoom:70%;
}
}