/*
Theme Name: Haviweb Child Theme
Description: Cong ty thiet ke website Havi
Author: Havi
Template: flatsome
Version: 3.20.1
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/*header*/
.mfp-ready .mfp-content {
    width: 430px;
}
.off-canvas .nav-vertical .sub-menu li li>a {
    padding-right: 10px;
}
.header-main .sub-menu li a:hover {
    color: #f17228;
}
.sub-menu .menu-item-has-children>a {
    font-size: 15px;
}
.bgl-location-btn {
    padding: 6px 18px 6px 18px !important;
    border-radius: 99px;
    background: linear-gradient(90deg, #ea5c0b 0%, #f6a623 100%) !important;
    position: relative;
    overflow: hidden;
    border: none;
}
.bgl-location-btn span,
.bgl-location-btn svg {
    position: relative;
    z-index: 2;
}

.bgl-location-btn span {
    color: white;
    margin-left: 5px;
}
.bgl-location-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: shine-location-btn 2s infinite;
    z-index: 1; 
}
@keyframes shine-location-btn {
    0% {
        left: -100%;
    }
    20% {
        left: 200%;
    }
    100% {
        left: 200%;
    }
}
/* --- NÚT HEADER --- */
.header-button-1 .header-button a {
    background: linear-gradient(90deg, #ea5c0b 0%, #f6a623 100%) !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
}
.header-button-1 .header-button a i,
.header-button-1 .header-button a span {
    position: relative;
    z-index: 2;
}
.header-button-1 .header-button a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: shine-header-btn 3s infinite;
    z-index: 1; 
}
@keyframes shine-header-btn {
    0% {
        left: -100%;
    }
    20% {
        left: 200%;
    }
    100% {
        left: 200%;
    }
}
/* Styling cho nhãn Menu */
.fpt-menu-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff !important;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    text-transform: uppercase;
    vertical-align: middle;
    line-height: 1.2;
    position: relative;
    top: -1px;
}
.fpt-menu-badge.badge-hot {
    background-color: #ff3b30;
}
.fpt-menu-badge.badge-new {
    background-color: #ff9500;
}
/* home */
.img-radius img {
	border-radius: 8px;
}
.icb-btn p {
    margin-bottom: 0;
}
.icb-btn {
	background-color: white;
    border: 1px solid #f17228;
    padding: 15px;
    border-radius: 9px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .22);
}
.icb-btn:hover {
	box-shadow: 0 1px 3px -2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
	transition: transform .3s, box-shadow .3s, background-color .3s, color .3s, opacity .3s;
}
.imb-dv img {
	border-radius: 8px;
}
.icb-btn {
  transition: all 0.3s ease;
  animation: pulse-basic 1.5s infinite ease-in-out; 
}

@keyframes pulse-basic {
  0% {
    transform: scale(1); 
  }
  50% {
    transform: scale(1.10); 
  }
  100% {
    transform: scale(1);
  }
}
.btn-more {
    margin-top: 0 !important;
    margin-bottom: 0;
}
.imb-dv {
    display: flex;
    flex-direction: column;
    border: 1px solid #f27323;
    border-radius: 8px;
}
.imb-dv .box-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.imb-dv .box-text-inner {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
	text-align: left !important;
	width: 100%;
}
.imb-dv .box-text-inner .text {
	width: 100%;
}
.imb-dv .box-text-inner .btn-more {
    margin-top: auto !important;
	align-self: center;
}
.col-imb-dv.col-inner, .imb-dv {
    height: 100%;
}
/*title bảng giá home*/
.fpt-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.fpt-main-title {
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0 0 5px 0;
    background: linear-gradient(90deg, #1669b2 0%, #68afed 100%);
    color: white;
    padding: 8px 20px 8px 20px;
    border-radius: 8px;
}
.fpt-sub-title {
    font-size: 16px;
    color: #333;
    margin: 0;
    font-weight: 500;
}
.fpt-badge {
    background: linear-gradient(90deg, #FF4500 0%, #FF8C00 100%);
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 14px;
    display: inline-block;
    margin-left: 5px;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.fpt-view-all {
    font-size: 15px;
    color: #0056A3;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.fpt-view-all .arrow {
    transition: transform 0.3s ease;
}
.fpt-view-all:hover {
    color: #FF4500;
}

.fpt-view-all:hover .arrow {
    transform: translateX(5px);
}
@media (max-width: 768px) {
    .fpt-title-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
/* Bản giá home */
/* Fix riêng cho slider */
.slide-bang-gia .flickity-slider > .col { display: flex !important; height: 100% !important; width: 82%;}
.slide-bang-gia ol.flickity-page-dots { display: none; }
.slide-bang-gia button.flickity-button.flickity-prev-next-button.previous { left: -15px;}
.slide-bang-gia button.flickity-button.flickity-prev-next-button.next { right: -15px;}
/* --- FIX CLS: CHỐNG NHẢY ĐIỂM NEO TRƯỚC KHI SLIDER LOAD --- */

/* Ép wrapper ẩn đi phần tràn và không được bẻ dòng */
.slide-bang-gia .slider {
    white-space: nowrap !important;
}

/* CHỈ ÁP DỤNG KHI JS CHƯA CHẠY (.col là con trực tiếp của .slider) */
.slide-bang-gia .slider > .col {
    display: inline-block !important;
    vertical-align: top !important;
    float: none !important;
}

/* Đảm bảo nội dung chữ bên trong card vẫn tự động xuống dòng bình thường */
.slide-bang-gia .slider > .col .col-inner {
    white-space: normal !important;
}
/* Style cho từng thẻ Card bảng giá */
.bgl-card-item { 
    background: #fff; 
    border: 1px solid #f27323; 
    border-radius: 8px; 
    overflow: hidden; 
    transition: 0.3s; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
}
.bgl-card-item:hover { 
    box-shadow: 0 5px 15px rgba(242, 115, 35, 0.2); 
    transform: translateY(-3px);
}
.bgl-card-img img { 
    width: 100%; 
    height: auto; 
    display: block; 
    border-bottom: 1px solid #f9f9f9; 
}
.bgl-card-content { 
    padding: 3px 15px 15px 15px; 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    text-align: left; 
}
.bgl-item-title { 
    font-size: 16px; 
    font-weight: bold; 
    color: #00529c; 
    margin-top: 0; 
    margin-bottom: 0px; 
}
.bgl-item-price { 
    font-size: 28px; 
    font-weight: 800; 
    color: #f27323; 
    margin-bottom: 8px; 
}
.bgl-item-desc { 
    font-size: 13px; 
    line-height: 1.2; 
    margin-bottom: 0px; 
    flex-grow: 1; 
    color: #333;
}
.col-bg-no-desc .bgl-item-desc {
	display: none;
}
.col-bg-no-desc .bgl-item-price {
	margin-bottom: 0;
}
.col-bg-no-desc .bgl-item-actions {
    margin-top: 4px;
}
.bgl-item-desc ul { 
    padding-left: 0px; 
    margin-bottom: 0;
	list-style-type: none;
}
.bgl-item-desc ul li {
  position: relative;
  padding-left: 24px;
  margin-left: 3px;
}
.bgl-item-desc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px; 
  width: 16px; 
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12' fill='none'%3E%3Cg clip-path='url(%23clip0_14388_4188)'%3E%3Cmask id='mask0_14388_4188' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='-4' y='-6' width='24' height='24'%3E%3Crect x='-4' y='-6' width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_14388_4188)'%3E%3Cpath d='M5.54972 9.15L14.0247 0.675C14.2247 0.475 14.4581 0.375 14.7247 0.375C14.9914 0.375 15.2247 0.475 15.4247 0.675C15.6247 0.875 15.7247 1.1125 15.7247 1.3875C15.7247 1.6625 15.6247 1.9 15.4247 2.1L6.24972 11.3C6.04972 11.5 5.81639 11.6 5.54972 11.6C5.28305 11.6 5.04972 11.5 4.84972 11.3L0.549719 7C0.349719 6.8 0.253885 6.5625 0.262219 6.2875C0.270552 6.0125 0.374719 5.775 0.574719 5.575C0.774719 5.375 1.01222 5.275 1.28722 5.275C1.56222 5.275 1.79972 5.375 1.99972 5.575L5.54972 9.15Z' fill='%2317BA58'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_14388_4188'%3E%3Crect width='16' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.bgl-item-actions { 
    margin-top: auto; 
    text-align: center; 
}
.bgl-item-actions .button { 
    border-radius: 5px; 
    /*font-weight: bold; 
    width: 100%; */
    margin-bottom: 8px;
    /*background-color: #f27323; 
    border-color: #f27323;*/
}
/*.bgl-item-actions .button:hover {
    background-color: #d65d18; 
}*/
/* Nút đăng ký */
.btn-dang-ky-goi {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    background: linear-gradient(90deg, #ea5c0b 0%, #f6a623 100%);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.btn-dang-ky-goi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}
.btn-dang-ky-goi::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);    
    animation: shine-effect 2s infinite;
}
@keyframes shine-effect {
    0% {
        left: -100%;
    }
    20% {
        left: 200%;
    }
    100% {
        left: 200%; 
    }
}
.bgl-link-detail { 
    font-size: 13px; 
    color: #000000; 
    display: block; 
    border: 1px solid #0d69b3; 
    padding: 6px; 
    border-radius: 5px;
    transition: all 0.3s ease;
}
.bgl-link-detail:hover { 
    color: white; 
    background-color: #0d69b3; 
}
.flickity-prev-next-button svg {
	background-color: white;
}
.tin-home .is-divider {
    display: none;
}
.tin-home .col.post-item {
    padding-bottom: 11px;
}
.tin-home .box-text {
    padding-right: 0;
	padding-bottom: 10px;
}
.tin-home img {
    border-radius: 8px;
}
.txt-all a{
	color: #1669b2;
}
.icb-kn h3 {
    margin-bottom: 6px;
}
.icb-social {
    align-items: baseline;
	flex-wrap: nowrap;
}
.icb-social .icon-box-text {
    padding-left: 10px !important;
}
.icb-social p {
    margin-bottom: 0;
}
/*footer*/
.bg-gradient {
	background: linear-gradient(90deg, #ea5c0b 0%, #f6a623 100%);
}
.bg-gradient-blue {
	background: linear-gradient(90deg, #1669b2 0%, #68afed 100%);
}
.widget-title  {
	background: linear-gradient(90deg, #1669b2 0%, #68afed 100%);
	position: relative;
	overflow: hidden;
}
.widget-title::before {
    content: '';
    position: absolute;
    top: 0;
    right: -100% !important;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);    
    animation: shine-effect2 2s infinite;
}
@keyframes shine-effect2 {
    0% {
        left: -100%;
    }
    20% {
        left: 200%;
    }
    100% {
        left: 200%; 
    }
}
.animation-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);    
    animation: shine-effect 2s infinite;
}
@keyframes shine-effect {
    0% {
        left: -100%;
    }
    20% {
        left: 200%;
    }
    100% {
        left: 200%; 
    }
}
.absolute-footer {
	background: linear-gradient(90deg, #ea5c0b 0%, #f6a623 100%);
}
.footer-1 p {
    font-size: 15px;
    margin-bottom: 3px;
}
.txt-ft-logo h4 {
    margin-bottom: 0px;
}
.copyright-footer {
    color: white;
}
/*danh mục bảng giá*/
.page-title .is-divider {
    display: none;
}
.bgl-archive-page {
    padding-top: 0;
	padding-bottom: 0;
}
/*chi tiết bảng giá*/
.single-post .entry-divider.is-divider {
    display: none;
}
.single-post .entry-header-text.entry-header-text-top {
    padding-bottom: 0;
}
.single-bang-gia .entry-divider.is-divider {
    display: none;
}
.single-bang-gia .entry-header-text.entry-header-text-top {
    padding-bottom: 0;
}
/*chỉ tiết bài viết*/
#block_widget-3 .is-divider,
#block_widget-4 .is-divider,
#block_widget-5 .is-divider {
    display: none;
}
#block_widget-3 span.widget-title,
#block_widget-4 span.widget-title,
#block_widget-5 span.widget-title {
    display: block;
    background-color: #0d69b3;
    padding: 10px;
    color: white;
    border-radius: 8px;
    margin-bottom: 10px;
}
.post-sidebar.large-3.col
 {
    padding-left: 20px;
    padding-right: 20px;
}
.blog-sidebar .col.post-item {
    padding-bottom: 10px;
}
.blog-sidebar .box-text.text-left {
	padding: 8px;
}
.blog-sidebar .is-divider {display: none;}
.blog-sidebar h5.post-title {
    font-size: 13px;
	font-weight: 600;
}
.blog-single {
    padding-bottom: 0;
}
.blog-single .is-divider {
    display: none;
}
.blog-single .entry-content.single-page {
    padding-bottom: 0;
	padding-top: 0;
}
.blog-single .large-9.col {
    padding-bottom: 0;
}
/*form đăng ký*/
.title-frm h3 {
    text-align: center;
}
div#lightbox-dang-ky {
    border-radius: 8px;
	display: flex;
}
.tengc input,
.hoten input,
.lh-ten input,
.lh-sdt input,
.sdt input,
.form-group span.select2-selection.select2-selection--single,
.so-nha input,
.ghi-chu textarea {
	border-radius: 8px;
}
.hoten {
    width: 48%;
    float: left;
	margin-right: 11px;
}
.sdt {
    width: 48%;
    float: left;
}
.form-group {
    width: 48%;
    float: left;
}
.frm-tinh {
    margin-right: 11px;
}
.so-nha {
    width: 100%;
    float: left;
}
.ghi-chu {
    width: 100%;
    float: left;
}
.info-form {
    width: 100%;
    float: left;
}
.select2-container { 
    margin-bottom: 15px !important;
}
span.select2-selection.select2-selection--single {
    font-size: 15px;
}
ul#select2-province_ui-results li {
    font-size: 15px;
}
ul#select2-ward_ui-results li {
	font-size: 15px;
}
.btn-sm {
    text-align: center;
    width: 100%;
    float: left;
}
.btn-sm input{
	border-radius: 8px;
	margin-right: 0;
}
.btn-sm span.wpcf7-spinner{
	display: none;
}
/*tốc độ bảng giá shortcode*/
span.speed-bang-gia {
    font-size: 12px;
}
/*tốc độ danh mục bảng giá*/
.speed-cat-bang-gia {
	background: #fdfdfd; border: 1px solid #eee; border-radius: 8px; padding: 10px; margin: 0 0 12px 0; display: flex; justify-content: space-between; align-items: center;
}
.tit-speed {
	font-size: 15px; color: #555; margin-bottom: 5px;
}
.info-speed {
	font-size: 15px; font-weight: bold; color: #333; display: flex; align-items: center; gap: 8px;
}
.speed-mbps {
	font-size: 15px;
}
/*tốc độ chi tiết bảng giá*/
.speed-single {
	background: #fff; border: 1px solid #f0f0f0; border-radius: 8px; padding: 20px; display: flex; align-items: center; justify-content: center; gap: 15px; height: 100%; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.speed-tit-single {
	font-size: 14px; font-weight: bold; color: #333;
}
.speed-tit-single span{
	font-size: 11px; font-weight: normal; color:#666;
}
.speed-info-single {
	color: #f97316; font-size: 46px; font-weight: 800; line-height: 1.2;display: flex;
}
.speed-down-single {
	font-size: 14px; font-weight: normal; color: #333;
}
.ul-single {
    line-height: 10px;
	margin-left: 3px;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
/*home*/
.icb-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.icb-btn .icon-box-img {
    width: 30px !important;
}
.icb-btn .icon-box-text {
    padding-left: 0 !important;
    margin-top: 6px;
}
.icb-btn h3 {
    margin-bottom: 0;
}
.icb-btn p {
    font-size: 11px;
}
.row-cta {margin-top: 0 !important;}
.fpt-main-title {
    font-size: 17px;
}
/*trang internet wifi 7*/
.stack-btn {
        flex-wrap: nowrap !important; 
        overflow-x: auto !important; 
        -webkit-overflow-scrolling: touch; 
        justify-content: flex-start !important; 
        padding-bottom: 5px; 
        gap: 8px !important;
    }
    
    /* Ẩn thanh cuộn (scrollbar) để giao diện sạch hơn */
    .stack-btn::-webkit-scrollbar {
        display: none;
    }
    .stack-btn {
        -ms-overflow-style: none;  
        scrollbar-width: none; 
    }

    .stack-btn .button {
        flex: 0 0 auto !important; 
        white-space: nowrap !important; 
        margin: 0 !important;
    }
	h5.post-title {
    font-weight: 600;
	}
	.hoten,
	.lh-ten,
	.lh-sdt,
	.sdt,
	.form-group,
	.so-nha {
	width: 100%;
	}
	ul.nav.header-bottom-nav {
    justify-content: right;
	}
	.bgl-location-btn {
		padding: 0 !important;
		margin-bottom: 3px;
		background: white !important;
		box-shadow: unset;
		border: 0;
	}
	.bgl-location-btn span {
    color: black;
	}
    .header-main {
        border-bottom: 1px solid #f1f1f1;
    }
	.slide-bang-gia button.flickity-button.flickity-prev-next-button.previous { display: none;}
	.slide-bang-gia button.flickity-button.flickity-prev-next-button.next { display: none;}
/*footer*/
.progress-wrap.active-progress {display: none;}
}
/*call now footer*/
.floating-contact-buttons {
  position: fixed;
  right: 12px;
  bottom: 92px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 9999;
}
.contact-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: pulse-basic .6s infinite; 
}
.hotline-btn {
  background-color: #1fb34a;
  color: #ffffff;
}
.hotline-btn svg {
  width: 24px;
  height: 24px;
}
.zalo-btn {
  background-color: #ffffff;
}
.zalo-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes pulse-basic {
  0% { transform: scale(1); }
  50% { transform: scale(1.10); }
  100% { transform: scale(1); }
}
/*menu bottom mobile*/
/* Ẩn thanh điều hướng trên màn hình Desktop */
.mobile-bottom-nav {
    display: none;
}

/* Chỉ hiển thị trên thiết bị di động */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1); 
        z-index: 99999; 
        padding: 8px 0;
        justify-content: space-around; 
        align-items: center;
    }

    .mobile-bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #333333;
        font-size: 11px;
        font-family: sans-serif;
        flex: 1; 
    }

    .mobile-bottom-nav .nav-item img {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
        object-fit: contain;
    }
    .mobile-bottom-nav .nav-item:hover,
    .mobile-bottom-nav .nav-item:active {
        color: #007bff;
    }
}
/*back to top*/
        .progress-wrap {
          position: fixed;
          right: 12px;
          bottom: 30px;
          height: 46px;
          width: 46px;
          cursor: pointer;
          display: block;
          border-radius: 50px;
          z-index: 10000;
          opacity: 0;
          visibility: hidden;
          transform: translateY(15px);
          -webkit-transition: all 200ms linear;
            transition: all 200ms linear;
        }
        .progress-wrap.active-progress {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }
        .progress-wrap::after {
          position: absolute;
          font-family: "fl-icons" !important;
          content: "";
          text-align: center;
            font-size: 24px;
            color: #fff;
            left: 0;
            right: 0;
            margin: auto;
            background-color: var(--primary-color);
            border-radius: 99px;
            top: 50%;
            transform: translateY(-50%);
            height: 38px;
            width: 38px;
            line-height: 35px;
            cursor: pointer;
            display: block;
            z-index: 1;
          -webkit-transition: all 200ms linear;
            transition: all 200ms linear;
        }
        .progress-wrap:hover::after {
          background-color: #0d69b3;
        }
        .progress-wrap::before {
          position: absolute;
          font-family: "fl-icons" !important;
          content: "";
          text-align: center;
          line-height: 46px;
          font-size: 24px;
          opacity: 0;
          background: var(--primary-color); /* --- Pijl hover kleur --- */
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          left: 0;
          top: 0;
          height: 46px;
          width: 46px;
          cursor: pointer;
          display: block;
          z-index: 2;
          -webkit-transition: all 200ms linear;
            transition: all 200ms linear;
        }
        .progress-wrap:hover::before {
          opacity: 1;
        }
        .progress-wrap svg path { 
          fill: none; 
        }
        .progress-wrap svg.progress-circle path {
          stroke: var(--primary-color); /* --- Lijn progres kleur --- */
          stroke-width: 4;
          box-sizing:border-box;
          -webkit-transition: all 200ms linear;
            transition: all 200ms linear;
        }
/*scrollbar*/
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: white;
}
::-webkit-scrollbar-thumb {
    background: #f17228;
    border-radius: 8px;
	height: 80px;
    transition: background .2s ease-in;
    -webkit-transition: background .2s ease-in;
    -o-transition: background .2s ease-in;
    -moz-transition: background .2s ease-in;
}
::-webkit-scrollbar-thumb:hover {
    background: #283B59;
}