/* Search */
.searchInfo{width:600px; margin-left:-300px; float:left; position:absolute; left:50%; bottom:-5px; background:#fff; z-index:3; padding: 5px; border-radius:12px 12px 0 0 }
.searchInfo:before { position: absolute; content: "";bottom: 5px; left: -20px; background: 0 0; width: 20px;  height: 20px; border-bottom-right-radius: 15px; box-shadow: .313rem .313rem 0 .313rem #fff; transform: rotate(0deg);}
.searchInfo:after{position: absolute;content: "";  bottom: 5px; right: -20px; background: 0 0; width: 20px; height: 20px; border-bottom-right-radius: 15px;box-shadow: .313rem .313rem 0 .313rem #fff;transform: rotate(90deg);}
.searchInfo .col-drop{width:200px; float:left; position:relative; background:var(--colorBg); border-radius: 7px 0 0 7px;}
.searchInfo .col-drop:before{content:'Khu vực:'; position:absolute; left:15px; line-height:46px; position:absolute; top:0;}
.searchInfo .col-drop:after{content:''; width:1px; height:14px; background:rgba(0,0,0,.5); position:absolute; top:15px; right:0;}
.searchInfo .col-drop .nav-drop{line-height:46px; height:46px; width:100%; text-align:left; float:left; padding-left:90px; display:block; font-weight:500; color:#000}
.searchInfo .col-drop .nav-drop:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f0dd"; position:absolute; top:0; line-height:42px; right:15px; font-size:12px; opacity:.5}
.searchInfo .col-drop ul{margin:-10px 0 0 0; top:100%!important; display:block; border:none; padding: 15px 0; border-radius:12px; box-shadow: 0 0 60px 0 rgb(53 57 69 / 15%); left:initial!important; right:0!important; width:130px; min-width:initial; opacity:0; visibility:hidden; pointer-events:none; transition:.3s; transform:initial!important}
.searchInfo .col-drop ul li{width:100%; float:left; position:relative;}
.searchInfo .col-drop ul li a{color:#000; font-size:15px; padding: 0 20px; line-height:32px; transition:.3s; }
.searchInfo .col-drop ul li a:hover{color:var(--color1); font-weight:500;}
.searchInfo .col-drop.show ul{opacity:1; margin-top:5px; visibility:initial; pointer-events:initial}
.searchInfo .col-text{float:right; position:relative; width:calc(100% - 200px); z-index:3;}
.searchInfo .col-text input[type="text"]{width:100%; border:none; height:44px; padding: 0 50px 0 20px; outline:none; background:none; background:var(--colorBg); border-radius: 0 7px 7px 0 }
.searchInfo .col-text:after{font-family: "Font Awesome 5"; font-weight: 900; content: "\f002"; width:40px; line-height:44px; font-size:16px; color:#000; text-align:center; position:absolute; right:5px; top:0; opacity:.7  }

@media (max-width:767px){
    .searchInfo{width:calc(100% - 30px); left:15px; margin-left:initial}
}

.page-distribution{width:100%; float:left; position:relative; }
.page-distribution .col-list{width:50%; float:left; position:relative; padding-right:30px; padding-top:50px; z-index:5;}
.page-distribution .col-map{width:50%; float:right; position:relative; padding-left:30px; padding-top:50px; z-index:5;}
.page-distribution .col-map iframe{width:100%!important; float:left; height:660px!important; border-radius:16px;}

.page-distribution .row-noResults{text-align:center; font-size:20px; color:var(--color3)}
@media (max-width:767px){
}

@media (max-width:991px){
    .page-distribution .col-list{width:100%; padding-right:0;}
    .page-distribution .col-map{display:none;}
}

.page-distribution .col-list ul{margin:-20px 0 0 0; padding:0; list-style:none; float:left; width:100%;}
.page-distribution .col-list ul li{width:100%; float:left; margin-top:20px; cursor:pointer; padding: 25px;}
.page-distribution .col-list ul li:after { width:100%; height:100%; position:absolute; top:0; left:0; background:var(--colorBg); z-index:-1; content: '';--border-radius: 14px; --size-corner: 24px; --mask: /calc(2*var(--border-radius)) calc(2*var(--border-radius)) radial-gradient(#000 70%,#0000 74%) no-repeat;border-radius: 12px; transition: all .5s ease;mask: right 0 bottom calc(var(--size-corner) + var(--border-radius)) var(--mask), right calc(var(--size-corner) + var(--border-radius)) bottom 0 var(--mask), radial-gradient(var(--size-corner) at 100% 100%, #0000 99%, #000 101%) calc(-1* var(--border-radius)) calc(-1* var(--border-radius)) no-repeat, conic-gradient(from 90deg at calc(100% - var(--size-corner) - 2* var(--border-radius)) calc(100% - var(--size-corner) - 2* var(--border-radius)), #0000 25%, #000 0);}
.page-distribution .col-list ul li:before{font-family: "Font Awesome 5"; font-weight: 900; content: "\f054"; font-size:12px; padding-left:2px; width:32px; height:32px; line-height:32px; background:#fff; color:var(--color1); border-radius:50%; text-align:center; position:absolute; right:0; bottom:0; z-index:2; transition:.3s;}
.page-distribution .col-list ul li h3{width:100%; float:left; position:relative; margin:0; font-family: "Signika", sans-serif; font-size:18px; z-index:3; transition:.3s;}
.page-distribution .col-list ul li h4{margin:0; padding:0; font-size:15px; font-weight:normal; width:100%; float:left; margin-top:5px; opacity:.8; position:relative; z-index:4}
.page-distribution .col-list ul li.active:before{background:var(--color1); color:#fff;}
.page-distribution .col-list ul li.active h3{color:var(--color1); font-weight:700;}

@media (max-width:991px){
    .page-distribution .col-list ul li{}
    .page-distribution .col-list ul li h4{padding-bottom:35px;}
    .page-distribution .col-list ul li h4:before{font-family: "Font Awesome 5"; font-weight:300; content: "\f3c5"; position:absolute; bottom:-3px; left:0; font-size:20px; margin-top:10px; color:var(--color1)}
    .page-distribution .col-list ul li h4:after{content:'Xem bản đồ'; position:absolute; bottom:-2px; left:25px; font-size:14px; }
}

#myModal-mapDistribution{}
#myModal-mapDistribution iframe{width:100%!important; height:400px!important; border-radius:10px;}