/* Knowledge hub refresh for the old long-form template. Scoped to body.kr; page text unchanged. */
.kr { background: #fbfaf6; counter-reset: kr; }
.kr [id] { scroll-margin-top: 92px; }

/* Hero */
.kr article > section:first-child { background: linear-gradient(180deg, #edf2e8 0%, #fbfaf6 100%); padding: 3.6rem 6% 2.6rem; }
.kr h1.section-title { font-size: clamp(2.3rem, 4.4vw, 3.4rem); font-weight: 500; letter-spacing: 0.2px; line-height: 1.12; margin-bottom: 0.9rem; }
.kr .section-label { font-size: 0.74rem; letter-spacing: 0.22em; color: #5f7f4d; font-weight: 700; margin-bottom: 0.8rem; }
.kr article > section:first-child .divider { width: 44px; height: 2px; margin: 1.4rem auto; background: #9CAF88; }
.kr .kr-num .divider { display: none; }
/* Captions left without their image */
.kr figure:not(:has(img, picture, video, iframe, svg)) { display: none; }

/* Article sections */
.kr .kr-num { background: none; padding: 3.2rem 6% 0.6rem; }
.kr .kr-num .content-box { max-width: 740px; }
.kr .kr-num + .kr-num .content-box { border-top: 1px solid #e3e9dd; padding-top: 3rem; }
.kr .kr-num + .kr-num { padding-top: 0.4rem; }
.kr .kr-num { counter-increment: kr; }
.kr .kr-num h2.section-title { text-align: left; font-size: clamp(1.85rem, 3.1vw, 2.5rem) !important; font-weight: 500; letter-spacing: 0.2px; line-height: 1.16; margin-bottom: 1.2rem; color: #0a462c; }
.kr .kr-num h2.section-title::before {
  content: counter(kr, decimal-leading-zero);
  display: table; margin-bottom: 0.8rem; padding: 0.32rem 0.62rem; border-radius: 999px;
  background: #e4ecdc; color: #2f4a2a; font: 700 0.72rem/1 'Quicksand', sans-serif; letter-spacing: 0.12em;
}
.kr .kr-num:has(.section-label) h2.section-title::before { display: none; }
.kr .kr-num .section-label { text-align: left; }
.kr .subtitle { font-family: 'Quicksand', sans-serif; font-size: 1.14rem !important; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: #0a462c; margin-bottom: 0.6rem; }
.kr .kr-num .subtitle[style] { margin-top: 2.1rem !important; }

/* Body text */
.kr .text-content { font-size: 1.06rem; line-height: 1.8; margin-bottom: 1.05rem; color: #24372b; }
.kr .text-content strong { color: #0a462c; }
.kr .text-content a, .kr .safety-list a, .kr .kr-num li a:not([class]) {
  color: #0a462c; font-weight: 600; text-decoration: underline; text-decoration-color: #9CAF88;
  text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; border-bottom: 0;
}
.kr .text-content a:hover, .kr .safety-list a:hover, .kr .kr-num li a:not([class]):hover { text-decoration-color: #0a462c; }

/* Quick answer */
.kr .quick-answer { background: #eef3ea; border-left: 3px solid #5f7f4d; border-radius: 0 12px 12px 0; padding: 1rem 1.25rem; margin: 0 0 1.6rem; box-shadow: none; }
.kr .quick-answer-text { font-size: 1.02rem; line-height: 1.75; color: #1f3a2c; }

/* Pull quote */
.kr .quote-box { background: none; border-left: 3px solid #9CAF88; border-radius: 0; padding: 0.2rem 0 0.2rem 1.4rem; margin: 2rem 0; font-size: 1.42rem; line-height: 1.55; color: #2f4a2a; box-shadow: none; }

/* Inline sub-cards (old inline styles) */
.kr .kr-num .content-box > div[style*="rgba(156, 175, 136, 0.08)"] { background: #fff !important; border: 1px solid #e3e9dd; border-radius: 14px !important; padding: 1.4rem 1.5rem !important; margin: 1.6rem 0 !important; }
.kr .kr-num .content-box > div[style*="rgba(156, 175, 136, 0.08)"] :is(h3, h4) { font-family: 'Quicksand', sans-serif !important; font-size: 1.06rem !important; font-weight: 700; color: #0a462c !important; margin: 0 0 0.9rem !important; }

/* Tables */
.kr .edu-table-wrap { background: #fff; border: 1px solid #e3e9dd; border-radius: 14px; box-shadow: none; }
.kr .edu-table th { background: #eef3ea; }

/* Table of contents: box on mobile, sticky sidebar on wide screens */
.kr nav.kr-toc { position: static; width: auto; top: auto; z-index: auto; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; max-width: 740px; margin: 0 auto; padding: 1.4rem 6% 0.6rem; }
.kr .kr-toc__box { background: #fff; border: 1px solid #e3e9dd; border-radius: 14px; padding: 1.1rem 1.2rem 0.9rem; }
.kr .kr-toc h2 { font: 700 0.72rem/1 'Quicksand', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #5f7f4d; margin: 0 0 0.7rem; }
.kr .kr-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: krt; }
.kr .kr-toc li { counter-increment: krt; }
.kr .kr-toc a { display: flex; gap: 0.6rem; padding: 0.38rem 0; color: #2f4a2a; text-decoration: none; font-weight: 600; font-size: 0.92rem; line-height: 1.4; }
.kr .kr-toc a::before { content: counter(krt, decimal-leading-zero); color: #9CAF88; font-weight: 700; font-size: 0.76rem; padding-top: 0.14rem; min-width: 1.3rem; }
.kr .kr-toc a:hover { color: #0a462c; text-decoration: underline; text-decoration-color: #9CAF88; text-underline-offset: 0.2em; }

/* Hero: breathing room + core facts as 2x2 tiles */
.kr article > section:first-child .content-box.text-center > p.text-content { margin-bottom: 0 !important; }
.kr article > section:first-child .content-box:not(.text-center) { max-width: 860px; margin-top: 2.8rem; }
.kr div[style*="box-shadow: 0 4px 30px"] { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 2rem !important; border-radius: 0 !important; }
.kr div[style*="box-shadow: 0 4px 30px"] > h3 { font: 700 0.74rem/1 'Quicksand', sans-serif !important; letter-spacing: 0.22em; text-transform: uppercase; color: #5f7f4d !important; text-align: center; margin: 0 0 1.1rem !important; }
.kr div[style*="box-shadow: 0 4px 30px"] > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; counter-reset: krf; }
.kr div[style*="box-shadow: 0 4px 30px"] > ul > li { counter-increment: krf; margin: 0 !important; padding: 1.15rem 1.25rem 1.2rem !important; border: 1px solid #e3e9dd !important; border-radius: 14px; background: #fff; font-size: 0.95rem; line-height: 1.65; color: #3a4f40; }
.kr div[style*="box-shadow: 0 4px 30px"] > ul > li::before { content: counter(krf, decimal-leading-zero); display: block; font: 500 1.6rem/1 'Cormorant Garamond', serif; color: #9CAF88; margin-bottom: 0.45rem; }
.kr div[style*="box-shadow: 0 4px 30px"] > ul > li strong { display: block; color: #0a462c; margin-bottom: 0.2rem; }
.kr div[style*="rgba(156, 175, 136, 0.08); padding: 1.5rem 1.75rem"] { background: #eef3ea !important; border-radius: 14px !important; }

/* Further reading: quiet list at the end, not inside the intro */
.kr .kr-more { padding: 3rem 6% 0.5rem; }
.kr .kr-more .content-box { max-width: 740px; border-top: 1px solid #e3e9dd; padding-top: 2.6rem; }
.kr .kr-more__title { font: 700 0.74rem/1 'Quicksand', sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #5f7f4d; margin: 0 0 1rem; }
.kr .kr-more__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.kr .kr-more__list a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid #e3e9dd; color: #0a462c; font-weight: 600; font-size: 0.98rem; line-height: 1.4; text-decoration: none; }
.kr .kr-more__list a::after { content: '→'; color: #9CAF88; transition: transform .2s; }
.kr .kr-more__list a:hover::after { transform: translateX(3px); color: #0a462c; }

/* Next step */
.kr .kr-cta { padding: 3.5rem 6% 5rem; }
.kr .kr-cta .content-box { max-width: 740px; }
.kr .kr-cta .section-label { text-align: left; }
.kr .kr-cta__title { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(1.85rem, 3vw, 2.4rem); line-height: 1.18; color: #0a462c; margin: 0 0 0.8rem; }
.kr .kr-cta__lead { font-size: 1.04rem; line-height: 1.75; color: #24372b; margin: 0 0 1.6rem; max-width: 620px; }
.kr .kr-cta__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
.kr .kr-cta__card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.3rem 1.25rem 1.2rem; border: 1px solid #dfe7d8; border-radius: 16px; background: #fff; color: #24372b; text-decoration: none; transition: border-color .2s, transform .2s; }
.kr .kr-cta__card:hover { border-color: #0a462c; transform: translateY(-2px); }
.kr .kr-cta__kicker { font: 700 0.7rem/1 'Quicksand', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #5f7f4d; }
.kr .kr-cta__name { font: 500 1.4rem/1.2 'Cormorant Garamond', serif; color: #0a462c; }
.kr .kr-cta__text { font-size: 0.92rem; line-height: 1.6; flex: 1; }
.kr .kr-cta__go { font-weight: 700; font-size: 0.9rem; color: #0a462c; margin-top: 0.3rem; }
.kr .kr-cta__card--dark { background: #0a462c; border-color: #0a462c; color: #e6efe0; }
.kr .kr-cta__card--dark .kr-cta__kicker { color: #b9cdaa; }
.kr .kr-cta__card--dark .kr-cta__name, .kr .kr-cta__card--dark .kr-cta__go { color: #fff; }
.kr .kr-cta__card--dark:hover { border-color: #0a462c; background: #123d2a; }
.kr .kr-cta__foot { margin-top: 1.4rem; font-size: 0.92rem; line-height: 1.7; color: #3a4f40; }
.kr .kr-cta__foot a { color: #0a462c; font-weight: 600; text-decoration: underline; text-decoration-color: #9CAF88; text-underline-offset: 0.2em; }

/* Old centered sections and card grids inside the reading column */
.kr .kr-num .content-box.text-center, .kr .kr-num[style*="text-align: center"] { text-align: left; }
.kr .kr-num .content-box.text-center > p.text-content { max-width: none !important; margin: 0 0 1.4rem !important; }
.kr .kr-num .content-wide { max-width: 740px; padding: 0; margin: 0 auto; }
.kr .kr-num .grid-3, .kr .kr-num .grid-2 { gap: 0.9rem; margin-top: 1rem !important; }
.kr .kr-num .yoga-card { padding: 1.3rem 1.2rem; border-radius: 14px; box-shadow: none; border: 1px solid #e3e9dd; background: #fff; }
.kr .kr-num .yoga-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.kr .kr-num .yoga-number { font-size: 1.6rem; margin-bottom: 0.4rem; }
.kr .kr-num .yoga-card p { font-size: 0.93rem; line-height: 1.65; }
/* Tall decorative hero (kien-thuc-yoga) */
.kr .hero { min-height: auto; padding: 4.2rem 6% 3rem; }
.kr .hero h1 { letter-spacing: 0.5px !important; font-weight: 400; font-size: clamp(2.3rem, 4.4vw, 3.4rem) !important; line-height: 1.12; }
.kr .hero .hero-label { letter-spacing: 0.22em; }

@media (min-width: 1180px) {
  .kr article { display: grid; grid-template-columns: minmax(24px, 1fr) 240px 72px minmax(0, 740px) minmax(24px, 1fr); align-items: start; }
  .kr article > * { grid-column: 4; min-width: 0; }
  .kr article > section:first-child { grid-column: 1 / -1; }
  .kr article > nav.kr-toc { grid-column: 2; grid-row: 2 / span 40; position: sticky; top: 96px; align-self: start; max-width: none; margin: 3.2rem 0 0; padding: 0; max-height: calc(100vh - 120px); overflow-y: auto; }
  .kr .kr-toc__box { background: none; border: 0; border-left: 1px solid #e3e9dd; border-radius: 0; padding: 0.2rem 0 0.2rem 1.1rem; }
  .kr .kr-toc a { font-size: 0.88rem; padding: 0.3rem 0; font-weight: 500; color: #24372b; }
  .kr .kr-num, .kr .kr-more, .kr .kr-cta { padding-left: 0; padding-right: 0; }
}
@media (max-width: 900px) {
  .kr .kr-cta__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .kr article > section:first-child { padding: 2.4rem 5.5% 1.8rem; }
  .kr .kr-num { padding: 2.4rem 5.5% 0.4rem; }
  .kr .kr-num + .kr-num { padding-top: 0.2rem; }
  .kr .kr-num + .kr-num .content-box { padding-top: 2.2rem; }
  .kr nav.kr-toc { padding: 1.2rem 5.5% 0.4rem; }
  .kr .text-content { font-size: 1.02rem; line-height: 1.75; }
  .kr .subtitle { font-size: 1.08rem !important; line-height: 1.4 !important; }
  .kr .quote-box { font-size: 1.25rem; padding-left: 1.1rem; }
  .kr div[style*="box-shadow: 0 4px 30px"] > ul, .kr .kr-more__list { grid-template-columns: 1fr; }
  .kr .kr-more, .kr .kr-cta { padding-left: 5.5%; padding-right: 5.5%; }
  .kr article > section:first-child .content-box:not(.text-center) { margin-top: 2rem; }
  .kr .hero { padding: 3rem 5.5% 2rem; }
}
.kr .hero .hero-subtitle { letter-spacing: 0 !important; font-size: 1.05rem; line-height: 1.75; max-width: 640px; margin-left: auto; margin-right: auto; }