/* CSS cho single_new_landing.php — theo màu sắc & tỉ lệ của layout-bai-viet-tenten.html */
.landing-new-template {
  --blue: #005bac;
  --blue-700: #004a8c;
  --blue-900: #003c72;
  --blue-300: #70c2e2;
  --blue-100: #d6ecf7;
  --blue-50: #eff7fc;
  --g50: #f7f9fb;
  --g100: #eef2f6;
  --g200: #dfe5ec;
  --g300: #c6cfd8;
  --g400: #9aa5b1;
  --g500: #6b7785;
  --g600: #4c5663;
  --g700: #323a45;
  --g900: #11161d;
  --sh-sm: 0 2px 6px rgba(17, 22, 29, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.landing-new-template img {
  max-width: 100%;
  display: block;
}

/* ============ HERO ============ */
.landing-new-template .top-landing-new {
  padding: 14px 0 26px;
  border-bottom: 1px solid var(--g100);
}

.landing-new-template .hero-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 46px;
  align-items: center;
}
@media (max-width: 880px) {
  .landing-new-template .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.landing-new-template .hero-text h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--g900);
  margin: 0;
  max-width: 18ch;
}
@media (max-width: 760px) {
  .landing-new-template .hero-text h1 {
    font-size: 30px;
  }
}

.landing-new-template .hero-text .lede {
  font-size: 17px;
  color: var(--g600);
  line-height: 1.65;
  margin-top: 14px;
  max-width: 62ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ============ BYLINE ============ */
.landing-new-template .byline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.landing-new-template .avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  flex: 0 0 auto;
}
.landing-new-template .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.landing-new-template .by-main {
  font-size: 14px;
  line-height: 1.45;
}
.landing-new-template .by-main b {
  color: var(--g900);
  font-weight: 700;
}
.landing-new-template .by-main .role {
  color: var(--g500);
}

.landing-new-template .by-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--g500);
  width: 100%;
  margin-top: 4px;
}
.landing-new-template .by-meta .m {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 15px;
  min-width: 15px;
}
.landing-new-template .by-meta .m::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background-color: var(--g400);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.landing-new-template .by-meta .m[data-icon="cal"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 9h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 9h18'/%3E%3C/svg%3E");
}
.landing-new-template .by-meta .m[data-icon="clock"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.landing-new-template .share {
  display: flex;
  align-items: center;
  gap: 8px;
}
.landing-new-template .share a {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--g200);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: 0.16s;
}
.landing-new-template .share a::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--g600);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.16s;
}
.landing-new-template .share a:hover {
  border-color: var(--blue-300);
  transform: translateY(-1px);
}
.landing-new-template .share a:hover::before {
  background-color: var(--blue);
}
.landing-new-template .share a[data-icon="fb"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14 9h3l.5-3H14V4.5c0-.8.3-1.5 1.6-1.5H17V.3C16.6.2 15.5 0 14.3 0 11.7 0 10 1.6 10 4.3V6H7v3h3v9h4V9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14 9h3l.5-3H14V4.5c0-.8.3-1.5 1.6-1.5H17V.3C16.6.2 15.5 0 14.3 0 11.7 0 10 1.6 10 4.3V6H7v3h3v9h4V9z'/%3E%3C/svg%3E");
}
.landing-new-template .share a[data-icon="x"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.5 3h2.6l-5.7 6.5L21 21h-5.2l-4.1-5.4L6.9 21H4.3l6.1-7L3 3h5.4l3.7 4.9L17.5 3zm-.9 16h1.4L7.5 4.4H6L16.6 19z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.5 3h2.6l-5.7 6.5L21 21h-5.2l-4.1-5.4L6.9 21H4.3l6.1-7L3 3h5.4l3.7 4.9L17.5 3zm-.9 16h1.4L7.5 4.4H6L16.6 19z'/%3E%3C/svg%3E");
}
.landing-new-template .share a[data-icon="link"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1'/%3E%3C/svg%3E");
}

/* ============ HERO THUMB ============ */
.landing-new-template .hero-thumb {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  aspect-ratio: 1200 / 628;
  background: var(--blue-50);
  margin: 0;
}
.landing-new-template .hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content-post #toc_container{
  display: none;
}

/* ============ LAYOUT: 2 CỘT (sidebar + nội dung) ============ */
.landing-new-template .content-landing-new {
  padding: 34px 0 60px;
}
.landing-new-template .content-landing-new > .container {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 980px) {
  .landing-new-template .content-landing-new > .container {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ============ SIDEBAR: mục lục (TOC+) ============ */
.landing-new-template .sider-bar {
  grid-column: 1;
  order: 1;
  align-self: start;
  position: sticky;
  top: 65px;
}
.landing-new-template .content-post {
  grid-column: 2;
  order: 2;
}
@media (max-width: 980px) {
  .landing-new-template .sider-bar {
    display: none;
  }
  .landing-new-template .content-post {
    grid-column: 1;
    width: 100%;
  }
}
.landing-new-template .sider-bar h2 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--g500);
  margin: 0 0 14px;
}
.landing-new-template .toc-sider-bar {
  max-height: 410px;
  overflow-y: auto;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.landing-new-template .toc-sider-bar::-webkit-scrollbar {
  width: 8px;
}
.landing-new-template .toc-sider-bar::-webkit-scrollbar-thumb {
  background: var(--g100);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.landing-new-template .toc-sider-bar::-webkit-scrollbar-track {
  background: transparent;
}
@media (max-width: 980px) {
  .landing-new-template .toc-sider-bar {
    max-height: 320px;
  }
}
.landing-new-template .toc_widget_list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--g100);
}
.landing-new-template .toc_widget_list ul {
  list-style: none;
  margin: 0;
  padding-left: 14px;
  border-left: none;
}
.landing-new-template .toc_widget_list li {
  margin: 0;
}
.landing-new-template .toc_widget_list a {
  display: block;
  padding: 7px 0 7px 18px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  color: var(--g600);
  line-height: 1.4;
  text-decoration: none;
  transition: 0.16s;
}
.landing-new-template .toc_widget_list ul a {
  padding-left: 8px;
  font-size: 13px;
}
.landing-new-template .toc_widget_list a:hover {
  color: var(--blue);
  border-left-color: var(--blue-300);
}
.landing-new-template .toc_widget_list a.active {
  color: var(--blue);
  border-left-color: var(--blue);
  font-weight: 600;
}
.landing-new-template .toc_widget_list .toc_number {
  font-weight: 700;
  font-size: 11px;
  color: var(--g400);
  margin-right: 8px;
}
.landing-new-template .toc_widget_list .toc_depth_2 {
  color: var(--g300);
}

/* ============ SIDE CTA (quảng cáo trong sidebar) ============ */
.landing-new-template .side-cta {
  margin-top: 30px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 18px;
  padding: 16px;
}
.landing-new-template .side-cta .sc-img {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sh-sm);
  line-height: 0;
}
.landing-new-template .side-cta .sc-img img {
  width: 100%;
  display: block;
}
.landing-new-template .side-cta h4 {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--g900);
  line-height: 1.45;
  margin: 16px 4px 0;
  text-align: center;
  letter-spacing: -0.01em;
}
.landing-new-template .side-cta .sc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  background: var(--blue);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  padding: 13px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 91, 172, 0.22);
  transition: 0.18s;
}
.landing-new-template .side-cta .sc-btn:hover {
  background: var(--blue-700);
  transform: translateY(-1px);
}
.landing-new-template .side-cta .sc-btn svg {
  width: 17px;
  height: 17px;
}
.landing-new-template .side-cta .sc-note {
  display: block;
  text-align: center;
  font-size: 11.5px;
  color: var(--g500);
  margin-top: 10px;
}

/* ============ CONTENT-POST: cột nội dung bài viết ============ */
.landing-new-template .content-post {
  min-width: 0;
}
.landing-new-template .content-post img {
  border-radius: 12px;
}

/* ============ TÓM TẮT NHANH (key takeaways) ============ */
.landing-new-template .takeaways {
  background: #fcf7e8;
  border: 1px solid #ebd9a0;
  border-radius: 18px;
  padding: 6px 30px 26px;
  margin-bottom: 32px;
}
@media (max-width: 560px) {
  .landing-new-template .takeaways {
    padding: 4px 20px 20px;
  }
}
.landing-new-template .takeaways .tk-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 18px;
  font-size: 20px;
  font-weight: 800;
  color: var(--blue-900);
  letter-spacing: -0.01em;
}
@media (max-width: 560px) {
  .landing-new-template .takeaways .tk-head {
    font-size: 18px;
  }
}
.landing-new-template .takeaways .tk-ic {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--blue-900);
}
.landing-new-template .takeaways .tk-ic svg {
  width: 24px;
  height: 24px;
}
.landing-new-template .takeaways .tk-item {
  padding: 18px 0;
  border-top: 1px solid #efe3bd;
}
.landing-new-template .takeaways .tk-item h4 {
  font-size: 17px;
  font-weight: 800;
  color: var(--blue-900);
  line-height: 1.4;
  margin-bottom: 7px;
}
.landing-new-template .takeaways .tk-item p {
  font-size: 15px;
  color: #3a4d74;
  line-height: 1.6;
}

/* ============ FAQ (câu hỏi thường gặp) ============ */
.landing-new-template .faq {
  margin-top: 32px;
}
.landing-new-template .faq .sec-h2 {
  font-size: 27px;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--g900);
}
@media (max-width: 760px) {
  .landing-new-template .faq .sec-h2 {
    font-size: 23px;
  }
}
.landing-new-template .faq details {
  border: 1px solid var(--g200);
  border-radius: 10px;
  margin-bottom: 10px;
  background: #fff;
  transition: border-color 0.16s;
}
.landing-new-template .faq details[open] {
  border-color: var(--blue-300);
}
.landing-new-template .faq summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--g900);
}
.landing-new-template .faq summary::-webkit-details-marker {
  display: none;
}
.landing-new-template .faq summary .pm {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue);
  display: grid;
  place-items: center;
  transition: transform 0.2s;
}
.landing-new-template .faq details[open] summary .pm {
  transform: rotate(45deg);
}
.landing-new-template .faq summary .pm svg {
  width: 14px;
  height: 14px;
}
.landing-new-template .faq .ans {
  padding: 0 20px 18px;
  font-size: 14.5px;
  color: var(--g600);
  line-height: 1.7;
}

/* ============ AUTHOR BIO ============ */
.landing-new-template .author {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: 14px;
  padding: 24px 26px;
  margin: 32px 0 0;
}
@media (max-width: 560px) {
  .landing-new-template .author {
    flex-direction: column;
    gap: 14px;
  }
}
.landing-new-template .author .av {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  flex: 0 0 auto;
}
.landing-new-template .author .av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.landing-new-template .author .ai .nm {
  font-size: 17px;
  font-weight: 800;
  color: var(--g900);
}
.landing-new-template .author .ai .cr {
  font-size: 13px;
  color: var(--blue);
  font-weight: 600;
  margin: 2px 0 8px;
}
.landing-new-template .author .ai .author_bio {
  font-size: 14px;
  color: var(--g600);
  line-height: 1.6;
}
.landing-new-template .author .ai .links {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
}
.landing-new-template .author .ai .links a {
  color: var(--blue);
  text-decoration: none;
}
.landing-new-template .author .ai .links a:hover {
  text-decoration: underline;
}

/* ============ RELATED POSTS (slider) ============ */
.landing-new-template .related {
  margin-top: 32px;
}
.landing-new-template .rel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.landing-new-template .related h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--blue-900);
  letter-spacing: -0.01em;
  margin: 0;
}
.landing-new-template .rel-arrows {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.landing-new-template .rel-arrows button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--g200);
  background: #fff;
  color: var(--g600);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: 0.16s;
}
.landing-new-template .rel-arrows button:hover {
  border-color: var(--blue-300);
  color: var(--blue);
  transform: translateY(-1px);
}
.landing-new-template .rel-arrows button svg {
  width: 18px;
  height: 18px;
}
.landing-new-template .rel-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 6px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.landing-new-template .rel-track::-webkit-scrollbar {
  display: none;
}
.landing-new-template .rel-card {
  flex: 0 0 calc((100% - 44px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
}
@media (max-width: 760px) {
  .landing-new-template .rel-card {
    flex: 0 0 84%;
  }
}
.landing-new-template .rel-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: 0.2s;
}
.landing-new-template .rel-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.landing-new-template .rel-card:hover .rel-cover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(17, 22, 29, 0.09);
}
.landing-new-template .rel-pill {
  align-self: flex-start;
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 999px;
  padding: 5px 14px;
}
.landing-new-template .rel-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--g900);
  margin: 13px 0 9px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.landing-new-template .rel-card p {
  font-size: 14px;
  color: var(--g500);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.landing-new-template .rel-card .rel-meta {
  font-size: 12.5px;
  color: var(--g400);
  margin-top: 11px;
}
.landing-new-template .rel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.landing-new-template .rel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: var(--g300);
  cursor: pointer;
  padding: 0;
  transition: 0.2s;
}
.landing-new-template .rel-dots button.active {
  background: var(--blue);
  width: 24px;
}