.article {
    font-family: Prompt,Roboto,Tahoma,'Open Sans',sans-serif!important;
  }
/*  body:lang(en) {
    font-family: Prompt,Roboto,Tahoma,'Open Sans',sans-serif!important;
  }*/
  .article h2,.article h2 b, .article h2 label, .article h2 span{
    font-size: 18px!important;
  }
  .blog-area{
    font-size:var(--msFontMedium);
    padding:0;
    margin:0;
  }
  /*.blog-area.columns .blog-update label{
    position: relative;
    background-color: #000;
    font-size: 20px;
    font-weight: normal;
    text-decoration: underline;
    color: var(--msColor);
    padding: 15px 50px;
    }*/
    .blog-area .b-scroll{
      height: 264px;
      overflow-x: hidden;
    }
    .blog-area .b-scroll::-webkit-scrollbar-track
    {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #1e1e1e;
    }

    .blog-area .b-scroll::-webkit-scrollbar
    {
      width: 5px;
    }

    .blog-area .b-scroll::-webkit-scrollbar-thumb
    {
      background-color: #3c3c3c;
    }
    .swiper-container{
      z-index: 0!important;
    }
    .blog-area.columns-end{
      display: none;
    }
    .blog-area.columns .blog-update{
      position: absolute;
      right: 0;
    }
    .blog-area.columns .blog-update label {
      position: relative;
      background-color: #000;
      font-size: 20px;
      font-weight: normal;
      text-decoration: underline;
      color: var(--msColor);
      padding: 15px 16px 15px 0px;
    }
    .blog-area.columns .blog-update label:hover{
      cursor: pointer;
      color: #fff;
    }
    .blog-area.columns .blog-update label:after, 
    .blog-area.columns .blog-update label:before {
      content: "";
      position: absolute;
      right: 100%;
      width: 40px;
      height: 50%;
    }
    .blog-area.columns .blog-update label:before {
      top: 0px;
      background: linear-gradient(to top left, #000 50%, transparent 51%);
    }
    .blog-area.columns .blog-update label:after {
      bottom: 0px;
      background: linear-gradient(to bottom left, #000 50%, transparent 51%);
    }
  /*.blog-area.columns, .blog-area.columns .box-sticky-top {
    width: 542px;
    }*/
    .blog-area.columns{
      position: fixed;
      z-index: 1;
      right: 0;
      top: 120px;
    }

    .blog-area.columns .sidebar {
      width: 450px;
      display: none;
      position: absolute;
      top: 27px;
      right: 119px;
    }
    .blog-area.news .blog-update{
      display: none;
    }
    .blog-area .d-flex{
      display: flex;
    }
    .blog-area .head{
      padding:10px 0;
    }
    .blog-area .head h1{
      color: #000;
      font-size: 40px;
      line-height: 40pt;
      font-weight: 500;
      margin: 36px 0 10px 0;
    }

    .blog-area .head .category,
    .blog-area .head .author,
    .blog-area .head .created{
      position: relative;
      color:#999;
      font-weight:normal;
    }
    .blog-area .head .category,
    .blog-area .head .author{
      color:var(--msColor);
    }
    .blog-area .head .category {
      padding-left:0px;
    }
    .blog-area .head .created{
      font-size:18px;
      color:#ccc;
    }
    .blog-area .head .category:before,
    .blog-area .head .author:before,
    .blog-area .head .created:before{
      font-family: FontAwesome;
      font-style: normal;
      font-weight: normal;
      text-decoration: inherit;
      color: #bfbfbf;
      font-size: 16px;
      position: absolute;
      top:0;
      left: 0;
    }
    .blog-area .head .category:before {
      content:none;
    }
    .blog-area .head .author:before {
      content: "\f007";
    }
  /*.blog-area .head .created:before {
      content: "\f017";
      }*/

      .blog-area .article {
        background: #fff;
        padding: 30px 68px 25px 68px;
        margin: 0 28px 35px 0;
      }
      .blog-area .article h2,
      .blog-area .article h2 span,
      .blog-area .article h2 b,
      .blog-area .article h2 span b{
        color:var(--msColor);
        font-size:24px!important;
        line-height:20pt;
        margin:25px 0 10px 0;
      }
      .blog-area .article h3,
      .blog-area .article h3 span,
      .blog-area .article h3 b,
      .blog-area .article h3 span b{
        font-size:18px;
        color: #333;
      }
      .blog-area .article p,.blog-area .article .detail{
        line-height:18pt !important;
        margin-bottom:30px;
      }
      .blog-area .detail a{
        color:var(--msActiveColor);
      }
      .blog-area .sidebar{
        /*background-color: #000;*/
        padding: 0px 15px 0px;
      }
      .blog-area .sidebar .nav,
      .blog-area .sidebar .tab-content{
        background-color: #000;
      }
      .blog-area .sidebar .tab-content{
        margin-bottom: 20px;
      }
      .blog-area .sidebar .nav-tabs {
        border-bottom: unset;
      }
      .blog-area .sidebar .tab-content a,
      .blog-area .sidebar li{
        color:#fff;
        font-size: 18px;
      }
      .blog-area .nav>li>a:focus, 
      .blog-area .nav>li>a:hover {
        text-decoration: none;
        background-color: unset;
        border: unset;
        border-bottom: 1px solid var(--msColor);
        color: #fff;
      }
      .blog-area .sidebar li{
        width: 100%;
      }
      .blog-area .sidebar ul li:nth-child(1) a{
        margin-right: 10px;
      }
      .blog-area .sidebar .nav-tabs>li a:hover{
        border-bottom: 2px solid var(--msColor)!important;
      }
      .blog-area .sidebar .nav-tabs>li>a{
        padding: 35px 15px 10px;
        border:unset;
        border-bottom: 2px solid var(--nomalColor)!important;
      }
      .blog-area .sidebar .tab-pane{
        padding: 0px 15px;
      }
      .blog-area .sidebar .nav-tabs>li.active>a, 
      .blog-area .sidebar .nav-tabs>li.active>a:focus, 
      .blog-area .sidebar .nav-tabs>li.active>a:hover {
        color: #fff;
        cursor: default;
        background-color: #000;
        border: unset;
        border-bottom: 0 solid #000!important;
        text-align: center;
      }
      .blog-area .sidebar figure {
          padding: 20px 0 10px 15px;
          border-bottom: 2px solid;
      }
      .blog-area .sidebar figure img{
        padding:0px;
      }
      .blog-area .sidebar figure .pipe li{
        width: 100%;
        font-size:var(--msFontSmall);
        color:var(--msColor);
      }

      .blog-area .sidebar figure .pipe a{
        color:var(--msColor);
      }
      .blog-area .sidebar figcaption > a{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .blog-area .sidebar h4{
        font-size:18px;
        margin-bottom:15px;
        font-weight:bold;
      }
      .blog-area .sidebar p{
        margin-bottom:15px;
      }
      .blog-area .article .desc{
        padding:15px 0 0 0;
        margin:0 0 20px 0;
      }

      .blog-area .bread-crumb{
        padding: 0px;
        display: block !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .blog-area .bread-crumb li{
        padding:10px 0;
      }

      .videoWrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        padding-top: 0px;
        height: 0;
      }
      .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .blog-area .box-banners{
        margin-bottom: -125px;
      }
      .blog-area .bread-crumb a {
        color: #000;
        margin-right: 20px;
        position: relative;
        font-size: 18px;
      }
      .blog-area .box-footer-btn{
        text-align: center; 
        margin: 20px 0px;
      }
      .blog-area .btn-all{
        background-color: var(--msColor);
        padding: 5px 47px;
        border:1px solid var(--msColor);
      }
      .blog-area .btn-all:hover{
        background-color: unset;
      }
      #latest_product .a-crop{
        height: 80px;
        overflow: hidden;
      }
      #latest_product .spec {
        padding: 0;
        list-style: none;
        font-size: var(--msFontNormal);
        font-weight: 400;
        color: #666;
      }
      #latest_product ul.spec li {
        width: auto;
        display: inline-block;
        padding: 0 8px;
        border-left: solid 1px #e6e6e6;
        font-size: 12px;
        float: left;
      }
      #latest_product ul.spec li:first-child {
        border-left: none;
        padding-left: 0;
      }
      #latest_product .cate{
        color: var(--msColor);
        font-size: var(--msFontSmall);
      }
      #latest_product img{
        width: 100%;
      }
      @media (max-width: 1800px) {
        .blog-area .sidebar{
          height: 80vh;
          overflow-y: scroll;
        }
      }
      @media (max-width: 1200px) {
        .blog-area .sidebar{
          height: 100%;
          overflow-y: unset;
        }
      }
      @media (max-width: 1024px) {
        .blog-area .sidebar figcaption{
          padding:10px 0 !important;
        }
        .blog-area .sidebar {
          height: auto;
          overflow-y: unset;
        }
        #latest_product .a-crop{
          height: 293px;
        }
      }
      @media only screen and (min-width: 1200px) and (max-width: 1499px){
        /*notebook small and company*/

      }
      @media only screen and (min-width: 768px) and (max-width: 1199px) {
        /*ipad*/
        .blog-area .b-scroll{
          height: auto;
          overflow-x: unset;
        }
        .blog-area .d-flex {
          display: block;
        }
        .blog-area.news .sidebar {
          margin-bottom: 60px;
        }
        .blog-area.columns-end{
          margin-top: 30px;
          display: block;
        }

        .blog-area.columns,.blog-area.columns-end .blog-update{
          display: none;
        }
        .blog-area .article {
          padding: 15px 15px;
          margin: 0;
        }
        .blog-area .sidebar .nav-tabs>li>a {
          padding: 15px 15px 15px;
        }
        .blog-area .head h1 {
          font-size: 30px;
          line-height: 30pt;
          margin: 15px 0 10px 0;
        }
      }
      @media only screen and (min-width: 1024px) and (max-width: 1024px) {
        /*ipadแนวนอน*/

      }
      @media (max-width: 800px) {
        #latest_product .a-crop{
          height: 220px;
        }
      }
      @media only screen and (max-width: 767px) {
        #latest_product .a-crop{
          height: 76px;
        }
        .blog-area .b-scroll{
          height: auto;
          overflow-x: unset;
        }
        .blog-area.columns-end{
          display: block;
          margin-top: 15px;
        }

        .blog-area.columns,.blog-area.columns-end .blog-update{
          display: none;
        }
        .blog-area .d-flex {
          display: block;
        }
        .blog-area .box-banners {
          margin-bottom: 15px;
        }
        .blog-area .glider-dots {
          margin-top: 15px!important;
        }
        .blog-area .article {
          padding: 15px 15px 25px;
          margin: 0;
        }
        .blog-area .head h1 {
          font-size: 30px;
          line-height: 31pt;
          margin: 20px 0 10px 0;
        }
        .blog-area .sidebar figcaption {
          padding: 10px 15px 10px 0px !important;
        }
        .blog-area .sidebar figure {
            padding: 34px 0 10px 15px;
            border-bottom: 2px solid;
        }
        .blog-area .sidebar {
          margin-bottom: 30px;
        }
        .blog-area #sticky-wrapper{
          margin-bottom: 15px;
        }
        .blog-area .box-sticky-top{
          width: 100%!important;
          position: unset!important;
          height: auto!important;
          top: unset!important;

        }
        .blog-area .sidebar .nav-tabs>li>a {
          padding: 15px 0px 0px;
        }
      }
      @media (max-width: 480px) {
        .blog-area .sidebar figcaption a{
          line-height:18pt;
        }
        .blog-area .sidebar .tab-content a, .blog-area .sidebar li {
          font-size: 14px;
        }
        
      }
      @media only screen and (max-width: 414px) {
        #latest_product .a-crop{
          height: 108px;
        }
      }
      @media only screen and (max-width: 375px) {
        #latest_product .a-crop{
          height: 95px;
        }
      }
      @media only screen and (max-width: 360px) {
        #latest_product .a-crop{
          height: 90px;
        }
      }
      @media (max-width: 320px) {
        .blog-area .top-header .mobile-lang{
          display:none !important;
        }
      }
      @media only screen and (max-width: 280px) {
        /*Garaxy Fold*/
        .blog-area .blog .head h1 {
          font-size: 24px;
          line-height: 24pt;
        } 
        #latest_product .a-crop{
          height: 63px;
        }

      }