/* thanhtri */

body[data-theme="thanhtri"] section {
  padding: min(16vh, 160px) 6vw;
  position: relative;
}

.ribbon{background:var(--espresso);color:var(--paper);overflow:hidden;padding:20px 0;white-space:nowrap}
.ribbon .track{display:inline-flex;gap:60px;animation:scrollX 32s linear infinite;font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2.2rem);font-style:italic}
.ribbon .track span{opacity:.9}
.ribbon .track .dot{color:var(--gold);font-style:normal}
@keyframes scrollX{to{transform:translateX(-50%)}}

.sec-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: 500;
  margin-bottom: 26px;
}

/* .sec-tag::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--bronze);
} */

h2.title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.8vw, 4rem);
  line-height: 1.03;
  letter-spacing: -.01em
}

h2.title em {
  font-style: italic;
  color: var(--bronze)
}

.sec-lead {
  margin-top: 26px;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--espresso-soft);
  max-width: 60ch
}

/* mission split */
.mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: min(16vh, 160px) 6vw;
}

.mission .visual {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

.mission blockquote {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.35;
  font-style: italic;
  margin: 24px 0
}

.mission p {
  color: var(--espresso-soft);
  margin-top: 18px;
  line-height: 24px;
}

/* values */
.values {
  background: var(--espresso);
  color: var(--paper)
}

.values .sec-tag {
  color: var(--gold)
}

.values .sec-tag::before {
  background: var(--gold)
}

.values h2.title em {
  color: var(--gold)
}

.val-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid rgba(247, 241, 230, .14)
}

.val {
  padding: 52px 46px;
  border-right: 1px solid rgba(247, 241, 230, .14);
  border-bottom: 1px solid rgba(247, 241, 230, .14);
  transition: background .5s
}

.val:nth-child(2n) {
  border-right: none
}

.val:nth-child(n+3) {
  border-bottom: none
}

.val:hover {
  background: rgba(194, 161, 91, .07)
}

.val .no {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--gold);
  font-style: italic
}

.val h4 {
  font-size: 1.5rem;
  font-family: var(--serif);
  font-weight: 500;
  margin-top: 18px
}

.val p {
  margin-top: 14px;
  font-size: 14.5px;
  color: rgba(247, 241, 230, .65);
  max-width: 44ch
}

/* centers of excellence */
.coe-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap
}

.coe-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line)
}

.coe {
  padding: 38px 30px 60px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: color .5s;
  min-height: 230px;
  display: flex;
  flex-direction: column
}

.coe .idx {
  font-size: 12px;
  color: var(--bronze);
  letter-spacing: .1em
}

.coe h4 {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.12;
  margin-top: auto
}

.coe p {
  font-size: 13px;
  color: var(--espresso-soft);
  margin-top: 12px
}

.coe::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--espresso);
  transform: translateY(101%);
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
  z-index: -1
}

.coe:hover {
  color: var(--paper)
}

.coe:hover .idx {
  color: var(--gold)
}

.coe:hover p {
  color: rgba(247, 241, 230, .7)
}

.coe:hover::before {
  transform: none
}


/* partners */
.partners{background:var(--beige)}
.part-cols{margin-top:58px;display:grid;grid-template-columns:repeat(3,1fr);gap:54px}
.part-col h5{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);font-weight:600;padding-bottom:18px;border-bottom:1px solid var(--line)}
.part-item{padding:18px 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:1.35rem;transition:padding-left .4s,color .4s}
.part-item:hover{padding-left:14px;color:var(--bronze)}

/* timeline */
.timeline{background:var(--espresso);color:var(--paper)}
.timeline .sec-tag{color:var(--gold)}.timeline .sec-tag::before{background:var(--gold)}
.timeline h2.title em{color:var(--gold)}
.tl{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tl-item{padding:0 26px;border-left:1px solid rgba(247,241,230,.16);position:relative}
.tl-item::before{content:"";position:absolute;left:-5px;top:0;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.tl-item .yr{font-family:var(--serif);font-size:2rem;color:var(--gold);font-style:italic}
.tl-item h4{font-size:1.05rem;font-weight:600;margin-top:14px}
.tl-item p{font-size:13.5px;color:rgba(247,241,230,.62);margin-top:8px}


/* contact */
.contact{text-align:center;background:var(--beige-deep)}
.contact h2.title{max-width:22ch;margin:0 auto}
.contact-info{margin-top:56px;display:flex;justify-content:center;gap:70px;flex-wrap:wrap}
.ci .k{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze);margin-bottom:10px}
.ci .v{font-family:var(--serif);font-size:1.5rem}
.btn{display:inline-flex;align-items:center;gap:12px;padding:17px 36px;border-radius:60px;background:var(--espresso);color:var(--paper);font-size:14px;font-weight:500;margin-top:48px;transition:background .4s,transform .4s}
.btn:hover{background:var(--bronze)}
.btn .arrow{transition:transform .4s}.btn:hover .arrow{transform:translateX(6px)}


/* marquee ribbon */
.ribbon{background:var(--espresso);color:var(--paper);overflow:hidden;padding:20px 0;white-space:nowrap}
.ribbon .track{display:inline-flex;gap:60px;animation:scrollX 32s linear infinite;font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2.2rem);font-style:italic}
.ribbon .track span{opacity:.9}
.ribbon .track .dot{color:var(--gold);font-style:normal}
@keyframes scrollX{to{transform:translateX(-50%)}}