@charset "UTF-8";
/******* RESPONSIVE ********/
/****Màn hình máy tính thông thường****/
/****Màn hình desktop loại bé****/
/**** Màn hình ipad hiển thị theo chiều ngang (Landscape) ****/
/****Màn hình ipad loại bé hiển thị theo chiều ngang (Landscape)****/
/****Màn hình ipad hiển thị theo chiều dọc (Portrait)****/
/****Màn hình ipad loại bé hiển thị theo chiều dọc (Portrait)****/
/****Màn hình điện thoại hiển thị theo chiều ngang (Landscape)****/
/****Màn hình điện thoại Iphone Plus****/
/****Màn hình điện thoại Iphone****/
/****Màn hình điện thoại loại bé****/
@import url("../../fonts/Roboto/font-roboto.css");
@font-face {
  font-family: 'Manrope';
  src: url("../../fonts/Manrope/Manrope-VariableFont_wght.ttf") format("truetype"); }

ul, li {
  list-style: none; }

body {
  color: #0a2540;
  font-family: Manrope, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; }

p {
  margin: 0 auto; }

a:hover {
  text-decoration: none; }

#pagebody {
  font-family: Roboto;
  position: fixed;
  top: 78px;
  width: 100%;
  height: 100%;
  padding: 0; }
  #pagebody #popup.large {
    width: 600px; }
    #pagebody #popup.large #popup-content {
      max-height: 600px; }
  #pagebody #toolbar {
    display: flex;
    padding: 5px;
    height: unset;
    background: rgba(255, 255, 255, 0.8);
    align-items: baseline; }
    #pagebody #toolbar .topToolMap {
      display: none; }
  #pagebody #toolbar:hover .topToolMap {
    display: block; }
  #pagebody #toolRight {
    top: 70px; }
  #pagebody .tabHeading {
    border-bottom: 5px solid #0094ff;
    float: left; }
    #pagebody .tabHeading #sRouteName {
      font-weight: 600;
      font-size: 1.1em; }
  #pagebody #tabTuyenDL .viewTuyenDL {
    color: #0094ff;
    text-decoration: underline;
    cursor: pointer; }
  #pagebody #tabTuyenDL .tblResult {
    height: calc(100vh - 160px);
    position: relative;
    width: 100%; }
  #pagebody #tabLoTrinh #dDiemden {
    height: calc(100vh - 180px);
    position: relative;
    padding-left: 15px; }
    #pagebody #tabLoTrinh #dDiemden .items {
      border-left: 4px solid orange;
      padding-left: 20px;
      padding-top: 20px;
      position: relative; }
      #pagebody #tabLoTrinh #dDiemden .items .step {
        position: absolute;
        top: 35px;
        left: -18px;
        background: #3e4185;
        padding: 2px 8px;
        border-radius: 50%;
        z-index: 19;
        color: #fff;
        border: 4px solid orange;
        font-size: 0.9em;
        cursor: pointer; }
      #pagebody #tabLoTrinh #dDiemden .items .htitle {
        display: flex;
        padding-top: 10px;
        align-items: center; }
        #pagebody #tabLoTrinh #dDiemden .items .htitle img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          border: 2px solid #ccc;
          padding: 1px; }
        #pagebody #tabLoTrinh #dDiemden .items .htitle .title {
          font-weight: 600;
          font-size: 16px;
          color: #0094ff;
          display: inline-table;
          padding-left: 8px;
          cursor: pointer; }
      #pagebody #tabLoTrinh #dDiemden .items .dContent .address {
        justify-content: start;
        border-radius: 30px;
        display: flex;
        margin-top: 10px;
        gap: 5px;
        font-size: 12px;
        padding-bottom: 10px;
        font-weight: 500; }
        #pagebody #tabLoTrinh #dDiemden .items .dContent .address .location-icon {
          aspect-ratio: 1;
          object-fit: auto;
          object-position: center;
          width: 20px;
          margin: auto 0; }
        #pagebody #tabLoTrinh #dDiemden .items .dContent .address .location-text {
          justify-content: center;
          border-radius: 30px;
          align-self: start;
          display: flex;
          gap: 5px;
          font-size: 15px; }
      #pagebody #tabLoTrinh #dDiemden .items .dContent .intro {
        font-size: 15px;
        margin-bottom: 10px; }
      #pagebody #tabLoTrinh #dDiemden .items .listImage {
        display: flex;
        height: 180px; }
        #pagebody #tabLoTrinh #dDiemden .items .listImage .result-image {
          aspect-ratio: 1.61;
          object-fit: auto;
          object-position: center;
          width: 100%;
          border-radius: calc(30px - 20px);
          height: 100%; }
      #pagebody #tabLoTrinh #dDiemden .items .item-f {
        padding-top: 15px;
        display: flex;
        justify-content: space-between; }
        #pagebody #tabLoTrinh #dDiemden .items .item-f i {
          color: orange; }
        #pagebody #tabLoTrinh #dDiemden .items .item-f span {
          color: #4f4f4f; }
  #pagebody #btnTuyenDL button {
    background: #3e4185; }

#contextLayer {
  border-radius: 5px;
  background: rgba(94, 93, 93, 0.4);
  padding: 3px;
  position: absolute;
  z-index: 12 !important; }
  #contextLayer ul {
    margin: 0;
    padding: 5px;
    list-style: none;
    background: #fff;
    width: 190px; }
    #contextLayer ul li {
      display: flex;
      align-items: center;
      border-radius: 3px;
      height: 34px;
      line-height: 34px;
      cursor: pointer;
      padding: 5px; }
      #contextLayer ul li:hover {
        background-color: rgba(204, 204, 204, 0.2); }
    #contextLayer ul .sText {
      position: absolute;
      left: 30px; }
  #contextLayer #liOpacity {
    display: none; }