/*
 * Thiên Nam — Global Content Card Typography System
 * v1.11.20 PREPROD
 *
 * ONE source of truth for text hierarchy inside content cards site-wide.
 *
 * DESKTOP (>1024)
 *   Number:  12.5px
 *   Title:   18px
 *   Copy:    15px
 *
 * TABLET (600–1024)
 *   Number:  12px
 *   Title:   17px
 *   Copy:    14.5px
 *
 * MOBILE (<600)
 *   Number:  12px
 *   Title:   17px
 *   Copy:    14px
 *
 * Colors
 *   Number:  #d8871b
 *   Title:   #083f2f
 *   Copy:    #5f6f66
 *
 * This file is enqueued last. Selectors deliberately do NOT depend on page
 * body classes, so the system works even if a page slug/body class changes.
 */

:root{
  --tn-card-number-size:12.5px;
  --tn-card-title-size:18px;
  --tn-card-copy-size:15px;

  --tn-card-number-color:#d8871b;
  --tn-card-title-color:#083f2f;
  --tn-card-copy-color:#5f6f66;

  --tn-card-title-line:1.30;
  --tn-card-copy-line:1.60;
}

/* =========================================================
   A. CARD NUMBER / STEP LABEL
   ========================================================= */
.process-step > b,
.feature > .feature-icon,
.region-journey-item > span,

.tn-trust-step-number,

.tn-kiosk-menu-card > b,
.tn-kiosk-principles-grid > div > b,
.tn-kiosk-experience-grid > article > b,
.tn-origin-flow > a > b,
.tn-branch-nav-grid > a > b,

.tn-corner-foundation-grid > article > b,
.tn-corner-process-flow > article > b,
.tn-corner-topic-grid > a > b,

.tn-partner-model-grid > article > b,
.tn-partner-process-grid > div > b{
  font-family:var(--tn-font-ui)!important;
  font-size:var(--tn-card-number-size)!important;
  line-height:1.2!important;
  font-weight:700!important;
  color:var(--tn-card-number-color)!important;
  letter-spacing:.08em!important;
  word-spacing:normal!important;
  text-transform:none!important;
}

/* Product trust keeps its circular badge structure, only typography is unified. */
.tn-trust-step-number{
  letter-spacing:.02em!important;
}

/* Special label cards in Góc Trà use words instead of 01/02. */
.tn-corner-balance-grid > div > b,
.tn-corner-application-grid > article > span:first-child{
  font-family:var(--tn-font-ui)!important;
  font-size:var(--tn-card-number-size)!important;
  line-height:1.2!important;
  font-weight:700!important;
  color:var(--tn-card-number-color)!important;
  letter-spacing:.08em!important;
  word-spacing:normal!important;
}

/* =========================================================
   B. CARD TITLE
   ========================================================= */
.process-step h3,
.feature h3,
.region-journey-item h3,
.region-card h3,

.tn-trust-step-copy strong,

.tn-kiosk-menu-card > strong,
.tn-kiosk-signature-body h3,
.tn-kiosk-principles-grid > div > strong,
.tn-kiosk-experience-grid > article > strong,
.tn-origin-flow > a > strong,
.tn-branch-nav-grid > a > strong,

.tn-corner-foundation-grid > article > strong,
.tn-corner-process-flow > article > strong,
.tn-corner-topic-grid > a > strong,
.tn-corner-application-grid > article > h3,
.tn-corner-balance-grid > div > strong,

.tn-partner-model-grid h3,
.tn-partner-process-grid h3,
.tn-partner-proof-points strong,
.tn-partner-product-body h3,

.tn-news-hub-body h3,
.tn-news-hub-body h3 a,
.news-card-full h3,
.news-card-full h3 a,
.contact-info-item b{
  font-family:var(--tn-font-ui)!important;
  font-size:var(--tn-card-title-size)!important;
  line-height:var(--tn-card-title-line)!important;
  font-weight:700!important;
  color:var(--tn-card-title-color)!important;
  letter-spacing:0!important;
  word-spacing:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
  text-rendering:auto!important;
}

/* =========================================================
   C. CARD COPY
   ========================================================= */
.process-step p,
.feature p,
.region-journey-item p,
.region-card p,

.tn-trust-step-copy small,

.tn-kiosk-menu-card > span,
.tn-kiosk-menu-card li,
.tn-kiosk-signature-body p,
.tn-kiosk-principles-grid > div > span,
.tn-kiosk-experience-grid > article > span,
.tn-origin-flow > a > span,
.tn-branch-nav-grid > a > span,

.tn-corner-foundation-grid > article > p,
.tn-corner-process-flow > article > span,
.tn-corner-topic-grid > a > span,
.tn-corner-application-grid > article > p,
.tn-corner-balance-grid > div > span,

.tn-partner-model-grid p,
.tn-partner-process-grid p,
.tn-partner-proof-points span,
.tn-partner-product-body p,

.tn-news-hub-body p,
.news-card-full .content > p,
.contact-info-item p{
  font-family:var(--tn-font-ui)!important;
  font-size:var(--tn-card-copy-size)!important;
  line-height:var(--tn-card-copy-line)!important;
  font-weight:400!important;
  color:var(--tn-card-copy-color)!important;
  letter-spacing:0!important;
  word-spacing:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;
}

/* =========================================================
   D. KIOSK CARD GROUPS — explicit actual DOM selectors
   These were the two groups that previously did not change.
   ========================================================= */
.tn-kiosk-principles-grid > div > b,
.tn-origin-flow > a > b{
  font-size:var(--tn-card-number-size)!important;
}
.tn-kiosk-principles-grid > div > strong,
.tn-origin-flow > a > strong{
  font-size:var(--tn-card-title-size)!important;
}
.tn-kiosk-principles-grid > div > span,
.tn-origin-flow > a > span{
  font-size:var(--tn-card-copy-size)!important;
}

/* =========================================================
   E. INTENTIONAL EXCEPTIONS
   =========================================================
   Category/kicker text, CTA/link text, price/buybar and Signature
   "Nền chính" are separate hierarchy levels and are not forced to
   the main card copy size here.
 */

/* =========================================================
   F. RESPONSIVE
   ========================================================= */
@media (min-width:600px) and (max-width:1024px){
  :root{
    --tn-card-number-size:12px;
    --tn-card-title-size:17px;
    --tn-card-copy-size:14.5px;
  }
}

@media (max-width:599px){
  :root{
    --tn-card-number-size:12px;
    --tn-card-title-size:17px;
    --tn-card-copy-size:14px;
  }
}


/* =========================================================
   v1.11.24 PREPROD — GLOBAL CARD VERTICAL RHYTHM
   Chuẩn khoảng cách trong card:
   Số thứ tự → Tiêu đề: 8px
   Tiêu đề → Nội dung: 8px
   ========================================================= */

/* Số thứ tự không dính sát tiêu đề */
.process-step > b,
.feature > .feature-icon,
.region-journey-item > span,
.tn-trust-step-number,
.tn-kiosk-menu-card > b,
.tn-kiosk-principles-grid > div > b,
.tn-kiosk-experience-grid > article > b,
.tn-origin-flow > a > b,
.tn-branch-nav-grid > a > b,
.tn-corner-foundation-grid > article > b,
.tn-corner-process-flow > article > b,
.tn-corner-topic-grid > a > b,
.tn-partner-model-grid > article > b,
.tn-partner-process-grid > div > b{
  margin-bottom:8px!important;
}

/* Tiêu đề bắt đầu sạch, không mang margin cũ */
.process-step > h3,
.feature > h3,
.region-journey-item > h3,
.tn-kiosk-menu-card > strong,
.tn-kiosk-principles-grid > div > strong,
.tn-kiosk-experience-grid > article > strong,
.tn-origin-flow > a > strong,
.tn-branch-nav-grid > a > strong,
.tn-corner-foundation-grid > article > strong,
.tn-corner-process-flow > article > strong,
.tn-corner-topic-grid > a > strong,
.tn-partner-model-grid h3,
.tn-partner-process-grid h3{
  margin-top:0!important;
}

/* Khoảng cách tiêu đề → nội dung đồng nhất */
.process-step > p,
.feature > p,
.region-journey-item > p,
.tn-kiosk-menu-card > span,
.tn-kiosk-principles-grid > div > span,
.tn-kiosk-experience-grid > article > span,
.tn-origin-flow > a > span,
.tn-branch-nav-grid > a > span,
.tn-corner-foundation-grid > article > p,
.tn-corner-process-flow > article > span,
.tn-corner-topic-grid > a > span,
.tn-partner-model-grid p,
.tn-partner-process-grid p{
  margin-top:8px!important;
}


/* v1.11.26 — Product Trust dùng đúng format process card:
   hàng 1 số / hàng 2 tiêu đề / hàng 3 nội dung, không mũi tên, không connector. */
.tn-trust-step{
  align-items:flex-start!important;
  text-align:left!important;
}
.tn-trust-step-number{
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0 0 12px!important;
  padding:0!important;
  background:transparent!important;
  border-radius:0!important;
  color:var(--tn-card-number-color)!important;
}
.tn-trust-step-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  width:100%!important;
  text-align:left!important;
}
.tn-trust-step-copy > strong{
  margin:0 0 10px!important;
}
.tn-trust-step-copy > small{
  margin:0!important;
}
.tn-trust-step::after,
.tn-trust-step-arrow{
  display:none!important;
  content:none!important;
}