* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font: normal 10px/1em 'Roboto', sans-serif;
 }

 ::-webkit-scrollbar {
     width: 6px;
 }

 ::-webkit-scrollbar-track {
     box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);

 }

 ::-webkit-scrollbar-thumb {
     background-color: lightgray;
     border-radius: 5px
 }

 .modal-backdrop {
     background: #999999;
 }

 .modal-backdrop.show {
     opacity: 0.5;
 }
.highcharts-exporting-group{
    display: none !important;
}

 @media (min-width: 320px) {

     /*    Trang chủ*/
     .home,
     .home .search,
     .home .card-default,
     .home .weather,
     .home .home--map .tag-detail {
         background: #ffffff;
     }

     .home .logo .card-logo{
         max-height: 21px;
         width: auto;

         padding-right: 6px;
     }

     .home .search,
     .home .card-default,
     .home .weather,
     .home .card-submit .btn-submit,
     .home .home--map .mini-map .tag-map {
         box-shadow: 0.6px 0.8px 5px 1px rgba(35, 31, 32, 0.1);
     }

     .home .search {
         margin-top: 12px;
         padding: 4px 12px;

         border-radius: 2px;
     }
     .home .search .form-control, .home .search a span{
         font-size: 1.2em;
     }
     .home .search a.col-11{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
     }
     .home .search a.col-11 span {
         color: #343a40;
         margin-left: -10px;
     }
     /* .home .search a.col-1 span i{
        color: #343a40;
     } */
     .home .search span.point{
        line-height: 1.7;
     }
     .home .search i:before {
         font-size: 1.5em;

         position: relative;
         top: 1px;
         color: #343a40;
     }

     .home .card-default {
         border-radius: 5px;
         margin-top: 13px;
     }

     .home .card-default .card-yellow .temp,
     .home .card-default .card-yellow p.name, 
     .home .card-default .card-yellow p.text,
     .home .card-default .card-yellow h5.notice {
         color: #796500
     }

     .home .card-default .temp {
         font-size: 6.5em;
         font-weight: bold;
     }

     .home .card-default .right {
         padding: 6px
     }

     .home .card-default p.text {
         font-size: 1.6em;
         font-weight: 500;

         margin-bottom: 9px;

     }

     .home .card-default p.name {
         line-height: 1.3;
         margin-bottom: 0;
     }

     .home .card-default h5.notice {
         font-size: 1.4em;
         margin-top: 5px;
     }

     .home .weather {
         padding: 12px 0;
         height: 77px;

         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
     }

     .home .weather p {
         margin-bottom: 0;
         line-height: 1.4;
     }

     .home .weather .col-8 {
         padding: 5px;
     }

     .home .weather img {
         max-height: 40px;

         position: relative;
         left: 10px
     }

     .home .weather .tem-wea {
         font-size: 2.75em;
         font-weight: bold;

         position: relative;
         top: 20px;
         right: 5px
     }

     .home .weather .tem-wea:after {
         content: 'o';
         font-size: 0.5em;

         position: relative;
         top: -12px;
         left: 2px;
     }

     .home .card-yellow,
     .home .card-red,
     .home .card-brown,
     .home .card-orange,
     .home .card-purple,
     .home .card-green {
         height: 170px;
         padding: 10px 5px;

         border-top-left-radius: 5px;
         border-top-right-radius: 5px;

     }

     .home .card-yellow {
         background: url(../img/bgr-yellow.png) no-repeat bottom;
         background-size: cover;
     }

     .home .card-red {
         background: url(../img/bgr-red.png) no-repeat bottom;
         background-size: cover;
     }

     .home .card-green {
         background: url(../img/bgr-green.png) no-repeat bottom;
         background-size: cover;
     }

     .home .card-purple {
         background: url(../img/bgr-purple.png) no-repeat bottom;
         background-size: cover;
     }

     .home .card-brown {
         background: url(../img/bgr-brown.png) no-repeat bottom;
         background-size: cover;
     }

     .home .card-orange {
         background: url(../img/bgr-orange.png) no-repeat bottom;
         background-size: cover;
     }

     .home .card-warning,
     .home .home--map .tag-red {
         background: #b61f1f;
     }

     .home .card-warning,
     .home .card-green,
     .home .card-red,
     .home .card-purple,
     .home .card-brown,
     .home .card-orange,
     .home .card-submit .btn-submit,
     .home .home--map .tag-red,
     .home .home--map .tag-green,
     .home .home--map .tag-purple,
     .home .home--map .tag-brown,
     .home .home--map .tag-orange,
     .home .home--map .place,
     .home .home--map .detail {
         color: #ffffff;
     }

     .home .card-warning {
         padding: 10px 18px;
         display: flex;
     }

     .home .card-warning p {
         margin-left: -15px;
         margin-right: -15px;
         margin-bottom: 0;
     }

     .home .card-warning .warning-left p.title {
         font-size: 1.4em;
         font-weight: bold;
         margin-bottom: 18px
     }

     .home .card-warning .warning-left p {
         line-height: 1.4;
         text-align: justify;
     }

     .home .card-warning .warning-right img {
         max-height: 50px;
         margin-top: 60px;
     }

     .home .card-warning .warning-right p {
         line-height: 1.2;
     }

     .home .card-attention img {
         max-height: 23px;
     }

     .home .card-attention table td {
         border: none;
         vertical-align: middle;
         font-size: 1.1em;
     }

     .home .card-attention table {
         margin-bottom: 0;
     }

     .home .card-attention .nav-tabs {
         text-align: center;
         border-bottom: transparent;
     }

     .home .card-attention .nav-link {
         font-size: 1.2em;
         font-weight: bold;

         color: #cdcdcd;
         padding: 12px 0 3px;
     }

     .home .card-attention #home-tab.active,
         {
         color: #88c930;

     }

     .home .card-attention #profile-tab.active {
         color: #b61f1f;

     }

     .home .card-attention #myTab a.active#home-tab,
     .home .card-attention #myTab li {
         border-color: #ffffff #ffffff #88c930 #ffffff;
	 color: #88c930;
     }

     .home .card-attention #myTab a.active {
         border-color: transparent;
         border-color: #ffffff #ffffff #b61f1f #ffffff;

         font-weight: 700;
         width: 60%;

         display: block;
         margin: 0 auto;
     }

     .home .card-attention #myTab li {
         text-align: center;
     }

     .home .card-carousel {
         height: 225px;
         padding: 14px 13px;
     }

     .home .card-carousel .carousel-item h5 {
         margin: 0;
         padding: 0 0 10px;
         font-weight: 700;
         font-size: 14px;
         line-height: 1.14;
     }
     .home .card-carousel .carousel-item h6{
         font-weight: bold;
         line-height: 1.2;
         color: #343a40;
         padding-top: 8px;
     }
     .home .card-carousel .carousel-item span{
        font-size: 20px;
        font-weight: bold;
        color: #aaadad;
        line-height: 1.18;
        margin-left: -15px;
     }
     .home .carousel-indicators li {
         box-sizing: content-box;
         -ms-flex: 0 1 auto;
         flex: 0 1 auto;

         width: 30px;
         height: 3px;

         margin-right: 0;
         margin-left: 0;

         text-indent: -999px;
         cursor: pointer;

         background-color: #d7d7d7;
         background-clip: padding-box;

         border-top: 10px solid transparent;
         border-bottom: 10px solid transparent;

         opacity: .3;
         transition: opacity .6s ease;
         position: relative;
         top: 45px;
         bottom: 19px;
     }

     .home .carousel-indicators .active {
         opacity: 1;
         background-color: #88c930;
         height: 2px;
     }

     .home .card-submit {
         margin-top: 39px;
         margin-bottom: 31px;
     }

     .home .card-submit .btn-submit {
         background: #88c930;
         padding: 8px 16px;
         border-radius: 5px;
     }

     .home .home--map .mini-map {
         margin-top: 6px;
         height: calc(100vh - 6.7em);
     }

     .home .home--map .mini-map .tag-map {
         padding: 5px;
         display: inline-block;
         min-width: 80px;
         border-radius: 5px;
         text-transform: uppercase;
         line-height: 1;
         position: relative;
         top: 10px;
     }

     .home .home--map .mini-map .tag-map .fa-angle-right:before {
         font-size: 18px;

     }

     .home .home--map .tag-yellow {
         background: #fbe152;
         color: #796500;
     }

     .home .home--map .tag-purple {
         background: #6a3399;
     }

     .home .home--map .tag-brown {
         background: #4a2511;
     }

     .home .home--map .tag-orange {
         background: #f99132;
     }

     .home .home--map .tag-detail {
         /* max-width: 153px; */
         position: relative;
         top: 30px;
         border-radius: 5px;
         box-shadow: 1.7px 2.5px 1.6px 0.4px rgba(35, 31, 32, 0.1);
     }

     .home .home--map .tag-detail .tag-left {
         border-top-left-radius: 5px;
         border-bottom-left-radius: 5px;
     }

     .home--map .tag-detail .tag-right {
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
     }

     .home .home--map .tag-detail .tag-left,
     .home .home--map .tag-detail .tag-right {
         padding: 5px 9px;
     }

     .home .home--map .tag-detail .tag-right.green,
     .home .home--map .tag-green,
     .home .claim button {
         background: #88c930;
     }

     .home .home--map .tag-detail .title {
         font-size: 2.6em;
         font-weight: bold;
         margin-bottom: 3px;
     }

     .home .home--map .tag-detail .name {
         color: #9b9b9b;
         font-weight: bold;
         font-size: 0.9em;
     }

     .home .home--map .tag-detail .title.green,
     .home .home--map .card-note .note .fa-square.green:before,
     .home .claim h5 {
         color: #8dc63f
     }

     .home .home--map .tag-detail .title.purple,
     .home .home--map .card-note .note .fa-square.purple:before {
         color: #6a3399
     }

     .home .home--map .tag-detail .title.orange,
     .home .home--map .card-note .note .fa-square.orange:before {
         color: #f99132
     }

     .home .home--map .tag-detail .title.brown,
     .home .home--map .card-note .note .fa-square.brown:before {
         color: #4a2511
     }

     .home .home--map .tag-detail .title.red,
     .home .home--map .card-note .note .fa-square.red:before {
         color: #b61f1f
     }

     .home .home--map .tag-detail .title.yellow,
     .home .home--map .card-note .note .fa-square.yellow:before {
         color: #fbe152
     }

     .home .home--map .place {
         line-height: 1.4;
         text-transform: uppercase;
         font-weight: bold;
     }

     .home .home--map .detail {
         margin-top: 5px;
         font-size: 0.8em;
         font-weight: bold;
     }

     .home .home--map .card-note {
         position: fixed;
         bottom: 10px;
         box-shadow: none;
         z-index: 999;

         padding: 10px 6px 5px 10px;
         height: 80px;

         margin-left: 15px;
         margin-right: 15px;
     }

     .home .home--map .card-note span {
         font-weight: bold;
         color: #51565a;
     }

     .home .home--map .card-note ul {
         list-style-type: none;
     }

     .home .home--map .card-note .note {
         column-count: 2;
         margin-top: 8px;
     }

     .home .home--map .card-note .note .fa-square {
         padding-right: 6px;
     }

     .home .home--map .card-note .note li {
         letter-spacing: -0.6px;
         line-height: 1.6;
     }

     .home .claim .modal-dialog {
         margin: 80px 15px;

     }

     .home .claim .modal-content {
         border: 1px solid transparent;
         border-radius: 5px;
         box-shadow: 0px 1px 8.3px 1.7px rgba(35, 31, 32, 0.1);
         height: 405px;
         background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.5) 50%), url(../img/background-mobile.png) white no-repeat bottom center;
         background-size: 110% auto;
     }

     .home .claim .modal-content textarea {
         margin-top: 5px;
         margin-bottom: 31px;

         border: 1px solid #595959;

     }

     .home .claim h5 {
         padding-top: 15px;
         padding-bottom: 35px;
         text-transform: uppercase;
         font-size: 1.2em;

     }

     .home .claim button {
         padding: 9px 45px;

         border: none;
         border-radius: 3px;

         font-size: 1.2em;
         font-weight: bold;
     }
     .highcharts-axis-title{
         display: none;
     }
     #exampleModal{
         background: rgb(153,153,153,0.41);
         overflow: hidden;
         height: 100vh
     }
 }

 @media (min-width: 768px) {
     .home {
         background: linear-gradient(to bottom, rgba(29, 33, 36, 0.3) 100%, rgba(29, 33, 36, 0.3) 100%), url(../img/bgr.png) no-repeat center;
         background-size: 100% auto;
         background-position: bottom;

         height: 100vh;
         margin: 0 -15px;
     }

     .home--bgr-default {
         background: #ffffff;
         background-size: auto 50%;
/* 
         padding: 15px; */

         max-height: calc(100vh - 340px);
         width: 320px;
         position: absolute;
         left: 50%;
         top: 50%;

         transform: translate(-50%, -50%);
         overflow-x: hidden;
     }

     .modal-backdrop {
         display: none;
     }

     .home .claim .modal-dialog {
         margin: 88px 15px;

     }
 }

 @media (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1366px) and (max-width: 1428px){
    .home--bgr-default {
        max-height: calc(100vh - 125px);
    }
 }