.hidden-xs {
    display: none!important;
}
.visible-xs {
    display: block!important;
}

html.is-locked,
body.is-locked {
  height: 100%;
  overflow: hidden;
  touch-action: none; /* กัน scroll บนมือถือ */
}

.navbar {margin-bottom: unset!important;}

.masthead {margin-top: 76px;}

#mainNav.navbar-shrink {
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
  transition: all 0.3s ease-in-out;
}

.navbar-nav {text-align: center;}


.highlight-info-block {
    width: 100%; margin-bottom: 4rem;
}

.button-wrapper {display: flex; width: fit-content; margin: auto;}
.button-wrapper.bg-transparent {margin-top: 2.5rem;}

.swiper-slide {align-items: flex-end;}

.bg-highlight-info {
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  align-items: end;
  height: 150%;
}


    .highlight-section {
      flex-direction: row;
      align-items: flex-start;
      gap: 10px;
    }

    .highlight-label h3 {
      position: sticky;
      left: 0;
      background: #e0dedc;
      z-index: 10;
      width: 68px;
      font-size: 1.25rem;
    }

    .highlight-articles {
      gap: 15px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }

    .highlight-articles::-webkit-scrollbar {
      display: none;
    }

    .article-card {
      flex-direction: row; /* เปลี่ยนจาก column เป็น row */
      width: 100%;
      min-width: 240px;
      max-width: 85%;
    }

    .article-card img {
      width: 45%;     /* รูปอยู่ซ้าย */
      height: auto;
      object-fit: cover;
    }

    .article-content {
      width: 55%;     /* เนื้อหาอยู่ขวา */
      padding: 0 0 0 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .article-content .category a {font-size: 12px;}


header.masthead .masthead-heading {font-size: 3.5rem; line-height: 1; margin-bottom: 1rem;}

#mainNav .navbar-brand img {height: 3rem; transition: height 0.5s ease-in-out;}

#content_highlight .title-th {font-size: 16px;}

/* highlight1 ----------------------- */

#highlight1 .highlight-large {gap: 5px;}

#highlight1 .highlight-small .highlight-content .category,
#highlight2 .highlight-small .highlight-content .category {font-size: 14px;}

#highlight1 .highlight-small .title,
#highlight2 .highlight-small .title {font-size: 1.85rem; line-height: 1; height: 57px; overflow: hidden;}

#highlight1 .highlight-small .highlight-content {margin-top: 0;}
#highlight1 .highlight-small{display: grid; grid-template-columns: 50% auto; gap: 10px; align-items: center;}
#highlight1 .highlight-column.block1 {flex-direction: column; margin-bottom: 1rem;}
#highlight1 .highlight-column {flex-wrap: wrap;}
#highlight1 .highlight-column.block2 {margin-top: 0; margin-bottom: 0;}
#highlight1 .highlight-column.block2 .highlight-small {flex: 0 0 100%; max-width: 100%;}

#highlight1 .highlight-content .category,
#highlight2 .highlight-content .category {font-size: 16px;}

#highlight1 .title,
#highlight2 .title {font-size: 3rem; line-height: 1;}

#highlight1 .excerpt,
#highlight2 .excerpt {font-size: 1.85rem!important; line-height: 1.15;}

#highlight2 {padding: 1rem 0 2.5rem;}
#highlight2 .highlight-content {padding: 0 10px 0 10px; display: flex; flex-direction: column; justify-content: center;}

#editors_pick {padding: 1rem 0 3rem;}
#editors_pick hr:last-child {
  display: none !important;
}

.editorspick-block {
  width: unset;
  margin-left: -15px;
  margin-right: -15px;
}

header.masthead .masthead-category {font-size: 1.15rem; margin-bottom: 10px;}
header.masthead .masthead-description {font-size: 1.65rem;}


/* highlight 2 ----------------------- */

  #highlight2 .highlight-column, #highlight2 .highlight-column-left {
    grid-template-columns: 1fr;
  }


  #highlight2 .highlight-small .highlight-content {margin-top: 0;}

  #highlight2 .highlight-small{
    display: grid;
    grid-template-columns: 50% auto;
    gap: 0;
    align-items: center;
  }

  #highlight2 .highlight-column.block1 {
    flex-direction: column;
    margin-bottom: 1rem;
  }

  #highlight2 .highlight-column {
    flex-wrap: wrap;
  }

  #highlight2 .highlight-column.block2 {margin-top: 0; margin-bottom: 0;}
  #highlight2 .highlight-large img {
    width: 100%;
    height: auto;
    object-fit: unset;
  }
  #highlight2 .highlight-large {grid-template-columns: 1fr;}


/* editor's pick ---------------------- */

.editorspick-section {display: grid; grid-gap: 10px;}
.editorspick-label h3 {width: unset;}
.editorspick-articles {display: grid; gap: unset;}
.editorspick-article-card {width: unset;}
.editorspick-info {min-height: unset; max-height: unset; overflow-y: unset;}
.editorspick-title {
  font-size: 1.85rem;
  line-height: 1;
  height: unset;
  overflow: unset;
}

.editorspick-category {margin-bottom: 0;}


/* interview --------------------- */

#interview .interview-block .title {
  font-size: 1.85rem;
  line-height: 1;
}
#interview .nav-warp li:first-child {padding-left: 0;}
#interview .nav-block {padding: 0.65rem 0; margin-left: -15px; margin-right: -15px;}

/* popular tags -------------------- */

  /*.page-section#popular_tags {padding: 0;}*/
  
  #tss_article .related-article-block {padding-top: 20px; padding-bottom: 20px;}
  #tss_article .related-article-block hr {margin: 0 0 1rem 0;}
  

  #tss_article .feature-image {
  aspect-ratio: 1 / 1;
  }

  .page-section#tss_article {
      padding-top: 76px;
  }
  
  #popularTagsWrapper {
    width: 235%;
  }

  .popular-container {
    overflow-x: auto;
    max-width: unset;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .popular-container::-webkit-scrollbar {
    display: none;
  }
  
  .popular-tags-section {margin-bottom: 1em; margin-right: -15px;}
  .popular-tags-section h3 {margin-top: 1rem;}

  #popular-tags-placeholder {display: unset;}

  .tag-block {padding: 3px 10px;}

  #tss_article div.entry-meta a {font-size: 13px;}


/* all category ------------------------ */

  .category-grid {
    grid-auto-columns: 85%;
  }

/* footer ------------------------------ */

  .footer-top {
    flex-direction: column;
    gap: 3rem;
  }




  
.footer-nav {width: 100%; padding: 0!important;}

.footer-nav .footer-column-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
}

.footer-nav .footer-column h5 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.footer-nav .footer-column ul {
  margin-bottom: 2rem;
}

.footer-nav .footer-column {
    flex: 0 0 100%;
    max-width: 100%;
}





  .footer-bottom {
    text-align: center;
    margin-bottom: 6rem;
  }

  .footer-button {
    width: 100%;
    max-width: 150px;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
  }

  .footer-standard-logo img {
    margin-bottom: 1rem;
    max-width: 125px;
  }

  .footer-logo {
    max-width: 135px;
  }

  .footer-brand {
    max-width: 100%;
  }

#tss_article .container {padding-top: 0; padding-bottom: 0;}
#tss_article div.entry-title .title {font-size: 3.5rem;}
#tss_article .container .column-block {grid-template-columns: 1fr;}
#tss_article .related-article .related-list {grid-template-columns: repeat(1, 1fr);}
#tss_article .entry-title {width: 100%;}
#tss_article .entry-tag .tags {font-size: 1.85rem;}
#tss_article .entry-content h2 {font-size: 1.85rem!important;}

#tss_article .inline-related {padding-top: 1.85rem; padding-bottom: 1.85rem;}
#tss_article .inline-related .category-desc {display: none;}
#tss_article .inline-related .category-title h3 {
  font-size: 1.85rem;
  margin-bottom: 0;
  line-height: 1;
  font-weight: 600;
}

  #tss_article .inline-related {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  /* item แรก = 40% */
  #tss_article .inline-related > *:first-child {
    flex: 0 0 40%;
    max-width: 40%;
  }

  /* item ที่สอง = auto (กินที่เหลือ) */
  #tss_article .inline-related > *:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0; /* กัน text ดัน layout พัง */
  }

#tss_article .entry-highlight {display: flex; flex-direction: column; margin-bottom: 0; margin-top: 1rem;}
#tss_article .entry-content p {width: 100%;}


#tss_article .entry-content .highlight li,
#tss_article .entry-content .entry-FYI li {
  padding-left: 15px!important;
  text-indent: 0!important;
  font-family: var(--font-main) !important;
  font-size: 2rem !important;
  font-weight: 500 !important;
  margin-bottom: 0;
}

#tss_article .entry-content .highlight li:before,
#tss_article .entry-content .entry-FYI li:before {
    content: '•';
    color: red;
    font-size: 3rem !important;
    position: absolute;
    left: 20px;
    line-height: 0.95em;
}
#tss_article .entry-FYI .desc {line-height: 1.25!important;}

#tss_article .related-article .related-item {
  display: flex;
  align-items: center;
}

#tss_article .related-article .related-item > *:first-child {
    flex: 0 0 40%;
    max-width: 40%;
}
#tss_article .related-article .related-item .meta {background-color: #FFF; height: 100%; padding: 0 10px; display: flex; flex-direction: column; justify-content: center;}
#tss_article .related-article .related-item .meta .title {
  font-size: 1.65rem;
  margin-bottom: 0;
  margin-top: 0;
  line-height: 1;
  font-weight: 600;
  height: 100%;
  max-height: 50px;
  overflow: hidden;
}
#tss_article .related-article .related-item .meta .cat {margin-top: 0; margin-bottom: 0;}
#tss_article .related-article .related-item .meta p {display: none;}

/*#tss_article .related-article .related-item:nth-child(n+4) {display: flex;}*/

#tss_article .related-article h3 {font-size: 1.65rem; margin-top: 10px;}

.entry-highlight .highlight {margin-top: 0!important;}

#tss_article .banner-rectangle {width: 300px; margin-left: auto; margin-right: auto;}
#tss_article .banner-rectangle.p2m {margin-top: 4rem; margin-bottom: 4rem;}
#tss_article #popular_tags.page-section {padding: 15px 0 0 0;}

#tss_article #editors_pick {
  background-color: #dddcdc;
  /* ดันให้ทะลุ container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
#tss_article #editors_pick {padding: 1rem 0;}
#tss_article #editors_pick .container {padding-top: 0; padding-bottom: 0;}
#tss_article #editors_pick .editorspick-label h3 {margin-bottom: 1rem;}

#tss_article hr.bar-top {display: block;}
#tss_article .editorspick-info {border-left: 1px solid #f33611;}

#tss_article .newsbox-header {border-bottom: unset;}

.masthead .swiper-pagination-bullet {background: #FFF!important;}
.masthead .swiper-pagination-bullet-active {background: var(--bs-link-hover-color)!important;}

a[rel="tag"][href*="/tss_cat/"] {font-size: 14px; color: #999;}
a[rel="tag"][href*="/tss_cat/"], a.post-category {font-size: 13px;}

#highlight1 .section-title,
#highlight2 .section-title,
#editors_pick .section-title,
#interview .section-title,
#popular_tags .section-title {font-size: 2rem; margin-top: 10px;}

#highlight1 hr,
#highlight2 hr,
#editors_pick hr,
#interview hr,
#popular_tags hr,
#all_category hr{ 
  margin-top: 10px!important;
  margin-bottom: 10px!important;
}




/*#editors_pick.page-section {margin-right: -15px; margin-left: -15px; padding: 0 15px 15px; background-color: #dcdbdb;}*/

#highlight1 .highlight-content {margin-top: 0;}
#highlight1 .title {max-height: unset; overflow: unset;}

.editorspick-number {font-size: 16px;}
#interview .nav-warp a {font-size: 1.15rem;}
#interview .section-title.current {font-size: 1.45rem;}

.interview-swiper {margin-right: -15px!important;}
.interview-swiper .swiper-slide {width: 70%;}

footer .copyright {font-size: 1.45rem !important; margin-top: unset;}

#scrollToTop {right: 15px; bottom: 15px; width: 35px; height: 35px;}



#searchInput {font-size: 2.5rem;}
#searchSuggest .cat {font-size: 1.25rem;}
#searchSuggest .title {font-size: 1.85rem;}

    #tss_category {padding-top: 76px;}
    /* Column 1 */
    #tss_category .category-column-1 {
      flex-direction: column;
    }
    #tss_category .category-column-1 .category,
    #tss_category .category-column-1 .c-title,
    #tss_category .category-column-1 .c-desc {
      width: 100%;
    }
    #tss_category .category-column-1 .c-title h3 {
      font-size: calc(1.75rem + 0.6vw);
    }

    #tss_category #popular_tags .container {padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0;}

    #tss_category .mobile-posts .editorspick-block {}

article.single-content {
  position: relative;
  height: 30em;
  overflow: hidden;

  transition: height 0.35s ease;
}

article.single-content:after {
  display: block;
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 52%, white 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 52%, white 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(51%, rgba(255, 255, 255, 0)), color-stop(52%, rgba(255, 255, 255, 0)), to(white));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 52%, white 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 52%, white 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
  width: 100%;
  height: 20vh;
}

/* Mobile: expand full content */
article.single-content.is-expanded {
  height: auto;
  overflow: visible;
}
/* ปิด gradient overlay หลัง Read More */
article.single-content.is-expanded:after {
  display: none;
}

.btn-readmore {
  display: block;
  color: red;
  font-family: var(--font-main);
  font-weight: 800;
  font-size: 2.25rem;
  text-align: center;
  width: 140px;
  margin: 15px auto 25px;
  letter-spacing: 2px;
  border: solid 1px red;
}

.entry-breadcrumb {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.page-section#tss_categories {margin-top: 76px;}

#content_highlight.page-section .container {
  padding-right: 0;
}

#tss_article .entry-meta {margin-top: 10px;}