.sc-hilight {
  background: url(../images/bg-hilight-top-desktop.jpg) top center no-repeat, url(../images/bg-hilight-bottom-desktop.jpg) top 410px center no-repeat;
  padding: 24px 0 48px;
}

.sc-hilight .logo-head-trueblog {
  display: flex;
  justify-content: center;
}

@media (max-width: 767px) {
  .sc-hilight {
    background: url(../images/bg-hilight-top-mobile.jpg) top -105px center no-repeat, url(../images/bg-hilight-bottom-mobile.jpg) bottom -104px center no-repeat;
    background-size: 414px auto;
    padding: 24px 0;
  }
}

.shortcut-sub-menu {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 16px;
  overflow: auto;
  padding: 16px 27px 0;
  margin: -24px -27px 24px;
}

@media (min-width: 768px) {
  .shortcut-sub-menu {
    justify-content: center;
  }
}

.shortcut-sub-menu::-webkit-scrollbar {
  display: none;
}

.shortcut-sub-menu .btn-outline {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  height: 40px;
  border: 1px solid silver;
  padding: 0 16px;
  font-size: 14px;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
  background-color: #ffffff;
}

.shortcut-sub-menu .btn-outline:hover {
  color: #ffffff;
  background-color: #e00000;
  border: 1px solid #e00000;
}

.true-blog-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .true-blog-search {
    gap: 8px;
    align-items: center;
  }
}

.true-blog-search .wrap-fill-search {
  position: relative;
  width: 100%;
  max-width: 438px;
}

.true-blog-search .wrap-fill-search .ico-search {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 7px;
  left: 14px;
  width: 20px;
  height: 20px;
  background: url(https://trueblog.dtac.co.th/blog/wp-content/themes/trueblog/assets/images/ico-search-active.png) center center no-repeat;
  background-size: 100% auto;
}

@media (min-width: 768px) {
  .true-blog-search .wrap-fill-search .ico-search {
    top: 11px;
    left: 21px;
    width: 28px;
    height: 28px;
  }
}

.true-blog-search .wrap-fill-search .fill-search {
  width: 100%;
  border: 1px solid rgba(48, 60, 70, 0.38);
  border-radius: 24px;
  padding: 4px 12px 4px 44px;
  position: relative;
}

@media (min-width: 768px) {
  .true-blog-search .wrap-fill-search .fill-search {
    padding: 11px 11px 11px 54px;
  }
}

.true-blog-search .wrap-fill-search .fill-search:focus-visible {
  outline: none;
}

.true-blog-search .wrap-fill-search .fill-search::placeholder {
  color: rgba(48, 60, 70, 0.38);
}

.menu-trueblog-small {
  display: flex;
  justify-content: center;
}

.menu-trueblog-small ul {
  padding: 0 27px;
  margin: 24px -27px;
  display: inline-flex;
  overflow: auto;
}

.menu-trueblog-small ul::-webkit-scrollbar {
  display: none;
}

.menu-trueblog-small ul li {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0 12px;
}

.menu-trueblog-small ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-trueblog-small ul li a:hover {
  color: inherit !important;
}

.menu-trueblog-small ul li a i {
  display: flex;
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.menu-trueblog-small ul li a span {
  white-space: nowrap;
}

.menu-trueblog-small ul li:first-child {
  padding-left: 0;
}

@media (min-width: 768px) {
  .menu-trueblog-small ul li:first-child {
    padding-left: 20px;
  }
}

.menu-trueblog-small ul li:nth-child(n + 2) {
  border-left: 1px solid #ebebeb;
}

.scMenuHome {
  margin: -150px 0 64px;
  position: relative;
  z-index: 1;
}

.scMenuAll {
  /*padding: 44px 0 60px;*/
  border-bottom: 1px solid #ebebeb;
  margin-top: 120px;
}

@media (max-width: 991px) {
  .mainBanner {
    height: auto;
  }
  .scMenuHome {
    margin: -80px 0 40px;
  }
  .scMenuAll {
    /*padding: 40px 0;*/
    margin-top: 65px;
  }
  .scMenuAll .logo-head-trueblog {
    display: none !important;
  }
}

@media (max-width: 375px) {
}

@media (min-width: 1441px) and (max-width: 1680px) {
  .scMenuHome {
    margin: -250px 0 64px;
  }
}

@media only screen and (max-width: 991px) {
}

@media (min-width: 768px) and (max-width: 991px) {
  .true-blog-search {
    align-items: center;
  }
  .scMenuHome {
    margin: 0 0 40px;
  }
  .wrap-nav-card-hor-scroll {
    justify-content: center;
  }
  .wrap-nav-card-hor-scroll .nav-card-hor-scroll {
    height: 120px;
    min-width: 120px;
    width: 120px;
  }
  .wrap-nav-card-hor-scroll .nav-card-hor-scroll .wrap-inner span {
    font-size: 14px;
    line-height: 16px;
  }
}

.true-blog-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .true-blog-search {
    gap: 8px;
    align-items: center;
  }
}

.true-blog-search .wrap-fill-search {
  position: relative;
  width: 100%;
  max-width: 438px;
}

.true-blog-search .wrap-fill-search .ico-search {
  content: " ";
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 14px;
  width: 20px;
  height: 20px;
  background: url(https://trueblog.dtac.co.th/blog/wp-content/themes/trueblog/assets/images/ico-search-active.png) center center no-repeat;
  background-size: 100% auto;
}

@media (min-width: 768px) {
  .true-blog-search .wrap-fill-search .ico-search {
    top: 10px;
    left: 21px;
    width: 28px;
    height: 28px;
  }
}

.true-blog-search .wrap-fill-search .fill-search {
  width: 100%;
  border: 1px solid rgba(48, 60, 70, 0.38);
  border-radius: 24px;
  padding: 4px 12px 4px 44px;
  position: relative;
}

@media (min-width: 768px) {
  .true-blog-search .wrap-fill-search .fill-search {
    padding: 11px 11px 11px 54px;
  }
}

.true-blog-search .wrap-fill-search .fill-search:focus-visible {
  outline: none;
}

.true-blog-search .wrap-fill-search .fill-search::placeholder {
  color: rgba(48, 60, 70, 0.38);
}

/* */
.true-blog-search .wrap-fill-search .sf-input-text {
  width: 100%;
  border: 1px solid rgba(48, 60, 70, 0.38);
  border-radius: 24px;
  padding: 4px 12px 4px 44px;
  position: relative;
  height: 34px;
}

.true-blog-search .wrap-fill-search .sf-field-reset {
  display: none;
}

.true-blog-search .wrap-fill-search .searchandfilter > ul > li {
  flex: 0 0 100%;
  padding: 0;
}

.true-blog-search .wrap-fill-search .searchandfilter label {
  display: block;
}

@media (min-width: 768px) {
  .true-blog-search .wrap-fill-search .sf-input-text {
    padding: 11px 11px 11px 54px;

    height: 48px;
  }
}

.true-blog-search .wrap-fill-search .sf-input-text:focus-visible {
  outline: none;
}

.true-blog-search .wrap-fill-search .sf-input-text::placeholder {
  color: rgba(48, 60, 70, 0.38);
}

@media (min-width: 992px) {
  .page-title {
    display: none !important;
  }
}