.main {
   padding: 67px 30px -10px 30px;
   background-color: #F2F2F2;
}

.main>.container {
   margin: auto;
   max-width: 1120px;
   width: 100%;
}

.trip-container {
   max-width: 1120px;
   width: 100%;
   display: flex;
   flex-direction: column;
   row-gap: 22px;
}

.trip-path {
   display: grid;
   grid-template-rows: repeat(2, 1fr);
   grid-template-columns: repeat(6, auto);
   max-width: 1120px;
   width: 100%;
   padding: 15px 15px 15px 32px;
   margin: 74px 0 10px 0;
   height: 75px;
   column-gap: 24px;
   row-gap: 0px;
   align-items: center;
   font-size: 14px;
   color: rgb(29, 29, 29);
   border-top: 1px solid #C6C6C6;
   border-bottom: 1px solid #C6C6C6;
   background-color: white;
}

.from {
   grid-row: 1;
   grid-column: 1/2;
   max-width: 139px;

}

.start-place {
   grid-row: 2;
   grid-column: 1/2;
   max-width: 139px;
}

.arrow {
   grid-column: 2/3;
   grid-row: 1/3;
   max-width: 167px;
}

.to-place {
   grid-row: 1;
   grid-column: 3/4;
   max-width: 170px;
}

.end-place {
   grid-row: 2;
   grid-column: 3/4;
   max-width: 170px;
}

.null {
   grid-column: 4/5;
   grid-row: 1/3;
   width: 100%;
}

.departure {
   grid-row: 1;
   grid-column: 5/6;
   max-width: 247px;
}

.date-start {
   grid-row: 2;
   grid-column: 5/6;
   max-width: 247px;
   ;
}

.button {
   grid-column: 6/7;
   grid-row: 1/3;
   max-width: 191px;
   margin-left: auto;
}

.button button[type="submit"] {
   width: 140px;
   height: 39px;
   padding: 0px 16px;
   background: rgb(222, 93, 10);
   font-size: 14px;
   color: white;
   font-weight: 500;
   border: none;
   border-radius: 4px;
}

.trip-detial {
   margin: 20px 0px 0px;
   border: 0.8px solid rgb(210, 210, 215);
   color: rgba(0, 0, 0, 0.87);
   border-radius: 12px;
   background-color: white;
   margin: auto;

}

.head-detial-trip {
   padding: 12px 12px 0 12px;
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   justify-items: stretch;
}

.type-vehicle {
   width: 243px;
   height: 144px;
}

.seat-road {
   grid-column: 2/3;
   display: flex;
   flex-direction: column;
   max-width: 131px;
   padding: 0px 0px 10px;
   justify-items: flex-end;
   align-items: flex-start;
   flex-grow: 3;
}

.logo-trip-vehicle {
   width: 58px;
   height: 48px;
}

.vehicle {
   font-size: 13px;
   font-weight: 600;
   color: rgb(29, 29, 29);
}

.road-direction {
   font-size: 12px;
   font-weight: 500;
   color: rgb(132, 132, 134);
}

.duration {
   display: flex;
   flex-direction: column;
   padding: 12px;
   justify-self: flex-start;
   justify-content: stretch;
   flex-grow: 2;
   max-width: 561px;
}

.head-duration {
   display: flex;
   flex-direction: row;
   height: 31px;
   column-gap: 100px;
}

.head-duration>h4 {
   padding: 0px 0px 10px;
   color: rgb(66, 66, 69);
   font-size: 14px;
   font-weight: 600;
}

.head-duration>h4:nth-last-child(1) {
   margin-left: 20px;
}

.time-tralvel-trip {
   height: 46px;
   display: flex;
   column-gap: 5px;
}

.time-tralvel-trip>img {
   max-width: 97px;
   margin-bottom: 10px;
}

.time {
   font-size: 24px;
   font-weight: 600;
   color: rgb(29, 29, 29);
}

.seat-price {
   max-width: 187px;
   flex-grow: 1;
   font-size: 35px;
   font-weight: 600;
   margin-top: 15px;
}

.trip-foot {
   display: flex;
   flex-direction: row;
   align-items: center;
   align-content: flex-start;
   border-top: 0.8px solid rgb(210, 210, 215);
   padding: 12px;
}

.boarding,
.drop-off,
.trip-infor,
.status-car {
   max-width: 374px;
   flex-grow: 2;
   font-size: 12px;
   color: rgb(106, 105, 105);
   display: flex;
   flex-direction: row;
   font-weight: 600;
}

.drop-off,
.trip-infor {
   margin-bottom: auto;
}

.boarding:hover,
.drop-off:hover,
.trip-infor:hover {
   color: #424BE8;
   cursor: pointer;
}

.fa-map-marker-alt {
   margin-right: 5px;
   font-size: 16px;
   font-weight: 600;
   color: #D1D0D0;
}

.trip-infor,
.status-car {
   max-width: 187px;
   flex-grow: 1;
}

.boarding {
   padding: 0px 12px 0px 12px;
   color: rgb(106, 105, 105);
   margin-bottom: auto;
}

.place-bording {
   display: grid;
   grid-template-columns: auto auto;
}

.trip-infor>img {
   width: 25px;
   height: 20px;
   padding: 0px 5px 0px 0px;
}

.status-car {
   display: flex;
}

.status-car>button {
   width: 163px;
   height: 39px;
   background: rgb(222, 93, 10);
   font-size: 14px;
   color: white;
   font-weight: 500;
   border: none;
   border-radius: 4px;
   margin-left: auto;
   background: rgb(209, 208, 208);
}

#trip-detail {
   display: none;
   ;
}

.container-rute {
   display: grid;
   grid-template-columns: 79% auto;
   grid-template-rows: repeat(2, 1fr);
   height: 74px;
   font-size: 14px;
   color: rgb(66, 66, 69);
   font-weight: 600;
   padding: 0px 0px 20px;
}

.top-element {
   grid-column: 1/2;
   grid-row: 1 span;
   display: flex;
   flex-direction: row;

}

.top-elment>img {
   width: 25px;
   margin-top: 12px;
}

.location {
   padding-left: 2px;
   display: inline-block;
   padding-bottom: 10px;
}

.image-select {
   display: flex;
   grid-column: 2/3;
   grid-row: 1/3;
   height: 100%;
}

.image-select>img {
   margin-left: auto;
   width: 25px;
}

.date-show {
   padding-left: 32px;
   grid-row: 2/3 span;
}

.trip-foot {
   display: flex;
   flex-direction: row;
   align-items: center;

}

.new-foot {
   display: none;
}

#boarding-new {
   display: none;
}

@media (max-width:960px) {
   .main{
      margin-left: 30px;
   }
   #trip-detail{
      width: 100vw;
   }
   .trip-path  {
      display: none;
   }
   .trip-container {
      max-width: 1120px;
      width: 100%;
      display: flex;
      flex-direction: column;
      max-width: 1120px;
      row-gap: 22px;
      margin: auto;
      padding-bottom: 22px;
   }
   .head-detial-trip {
      display: grid;
      padding: 20px;
      width: 100vw;
      background-color: white;
   }
   .seat-road {
      grid-row: 1/2;
      grid-column: 1/3;
      display: grid;
      grid-template-columns: 2;
      grid-template-rows: 2;
      column-gap: 4.3vw;
   }
   .logo-trip-vehicle {
      grid-column: 1/2;
      grid-row: 1/3;
      width: 58px;
      height: 38px;
   }

   .vehicle {
      grid-column: 2/3;
      width: 100%;
      grid-row: 1/2;
   }

   .road-direction {
      width: 400px;
      grid-column: 2/3;
      grid-row: 2/3;
   }

   .boarding-new {
      display: flex;
      flex-direction: row;
   }

   #path {
      display: none;
   }

   #trip-detail {
      display: block;
   }

   .trip-foot {
      display: none;
   }

   .seat-price {
      align-self: center;
      grid-row: 1/3;
   }

   .new-foot {
      display: flex;
      align-content: center;
      justify-content: space-between;
      padding: 10px 20px 10px 20px;
      width: 100vw;
   }

   .trip-infor {
      align-self: center;
      padding-top: 5px;
   }

   .status-car>button {
      width: 120px;
      height: 30px;
   }

}