/*
 * BUILD 8 — UI-VIS-1 BIG-3 / Public-Discovery presentation layer.
 * Scope: homepage/public visual anchor only. Tokens remain owned by design-system-core.css.
 */
.tt-home-v8 {
  --tt-home-navy:#071c4d;
  --tt-home-blue:#0f65df;
  --tt-home-cyan:#5ee7ff;
  --tt-home-red:#ef2d43;
  --tt-home-ink:#0b1d46;
  background:#f7fbff;
  color:var(--tt-home-ink);
}

.tt-home-v8 .public-header {
  background:rgba(255,255,255,.95);
  border-bottom:1px solid rgba(148,163,184,.2);
  box-shadow:0 10px 34px rgba(15,54,114,.08);
  backdrop-filter:saturate(140%) blur(14px);
}
.tt-home-v8 .public-header .navbar { min-height:72px; }
.tt-home-v8 .public-header .nav-link {
  color:#17305f;
  border-radius:var(--tt-radius-pill);
  padding:.55rem .72rem;
  font-weight:700;
}
.tt-home-v8 .public-header .nav-link:hover,
.tt-home-v8 .public-header .nav-link:focus-visible { color:#0b5bd3; background:#eef6ff; }

.tt-home-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,29,82,.95) 0%,rgba(10,79,177,.82) 38%,rgba(13,114,222,.30) 70%,rgba(4,29,82,.08) 100%),
    url('../ui/homepage/hero-background-desktop-v1.png') center/cover no-repeat;
}
.tt-home-hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:120px;
  background:linear-gradient(180deg,rgba(247,251,255,0),#f7fbff);
  pointer-events:none;
  z-index:-1;
}
.tt-home-hero__inner {
  min-height:610px;
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(420px,.97fr);
  align-items:center;
  gap:clamp(1.5rem,4vw,4.5rem);
  padding-block:clamp(3.5rem,7vw,6.4rem);
}
.tt-home-hero__copy { position:relative; z-index:4; color:#fff; max-width:700px; }
.tt-home-kicker {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.52rem .85rem;
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--tt-radius-pill);
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px rgba(255,255,255,.18);
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.tt-home-hero h1 {
  margin:1rem 0 .95rem;
  color:#fff;
  font-size:clamp(2.65rem,5.2vw,5.35rem);
  line-height:.98;
  letter-spacing:-.052em;
  font-weight:900;
  text-wrap:balance;
}
.tt-home-hero h1 span { color:#9ef3ff; }
.tt-home-hero__lead {
  margin:0;
  max-width:650px;
  color:rgba(255,255,255,.92);
  font-size:clamp(1rem,1.4vw,1.2rem);
  line-height:1.65;
}
.tt-home-benefits {
  list-style:none;
  margin:1.35rem 0 1.65rem;
  padding:0;
  display:grid;
  gap:.55rem;
}
.tt-home-benefits li { display:flex; align-items:flex-start; gap:.62rem; font-weight:650; color:#f8fbff; }
.tt-home-benefits i { color:#67f29a; margin-top:.12rem; }
.tt-home-hero__actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.tt-home-hero__actions .btn {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border-radius:14px;
  padding:.78rem 1.15rem;
  font-weight:800;
  border:1px solid transparent;
  box-shadow:0 12px 26px rgba(5,31,84,.22);
}
.tt-home-cta-primary { background:linear-gradient(135deg,#ff3852,#e21d3c); color:#fff; }
.tt-home-cta-primary:hover { color:#fff; transform:translateY(-2px); }
.tt-home-cta-secondary { background:rgba(255,255,255,.96); color:#0f3474; border-color:rgba(255,255,255,.5)!important; }

.tt-home-hero__visual {
  position:relative;
  min-height:500px;
  align-self:stretch;
  z-index:2;
}
.tt-home-hero__student {
  position:absolute;
  z-index:3;
  right:1%;
  bottom:-7%;
  width:min(58%,430px);
  height:auto;
  max-height:108%;
  object-fit:contain;
  filter:drop-shadow(0 26px 30px rgba(8,43,110,.26));
}
.tt-home-hero__hologram {
  position:absolute;
  z-index:2;
  width:min(62%,470px);
  right:28%;
  bottom:-18%;
  opacity:.96;
  filter:drop-shadow(0 20px 35px rgba(58,120,255,.32));
}
.tt-home-orbit-chip {
  position:absolute;
  z-index:5;
  width:min(235px,45%);
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.78rem .9rem;
  color:#102754;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.84);
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 16px 34px rgba(7,42,103,.16);
  backdrop-filter:blur(10px);
  transition:transform var(--tt-motion-normal) var(--tt-motion-ease),box-shadow var(--tt-motion-normal) var(--tt-motion-ease);
}
.tt-home-orbit-chip:hover { transform:translateY(-3px); box-shadow:0 20px 40px rgba(7,42,103,.24); color:#0d5ad7; }
.tt-home-orbit-chip i {
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 40px;
  color:#fff;
  background:linear-gradient(145deg,#3378ff,#134dc5);
}
.tt-home-orbit-chip span { min-width:0; display:grid; line-height:1.2; }
.tt-home-orbit-chip b { font-size:.9rem; }
.tt-home-orbit-chip small { color:#64748b; font-size:.72rem; }
.tt-home-orbit-chip.chip-dna { top:10%; left:-2%; }
.tt-home-orbit-chip.chip-online { top:35%; left:-11%; }
.tt-home-orbit-chip.chip-resource { top:8%; right:-4%; }
.tt-home-orbit-chip.chip-lcd { top:39%; right:-8%; }
.tt-home-orbit-chip.chip-online i { background:linear-gradient(145deg,#ef4c67,#dc1f43); }
.tt-home-orbit-chip.chip-resource i { background:linear-gradient(145deg,#25c78d,#07956a); }
.tt-home-orbit-chip.chip-lcd i { background:linear-gradient(145deg,#12bfb5,#078a9f); }

.tt-home-section { padding:clamp(3.3rem,6vw,6rem) 0; }
.tt-home-section-heading { max-width:780px; margin:0 auto 2.2rem; }
.tt-home-section-heading>span { color:#2767db; font-size:.78rem; font-weight:900; letter-spacing:.11em; }
.tt-home-section-heading h2 { margin:.45rem 0 .55rem; color:#102754; font-size:clamp(1.85rem,3.1vw,3.15rem); font-weight:900; letter-spacing:-.035em; }
.tt-home-section-heading p { margin:0; color:#61708b; font-size:1rem; line-height:1.7; }
.tt-home-section-heading--split { max-width:none; display:flex; justify-content:space-between; align-items:end; gap:1.5rem; }
.tt-home-section-heading--split>div { max-width:720px; }
.tt-home-text-link { color:#145fd2; text-decoration:none; font-weight:800; white-space:nowrap; }

.tt-pillar-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.tt-pillar-card {
  position:relative;
  min-width:0;
  min-height:430px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:1.1rem;
  border:1px solid #dce9fb;
  border-radius:22px;
  background:linear-gradient(180deg,#f9fcff 0%,#fff 65%);
  box-shadow:0 16px 40px rgba(44,83,145,.08);
  color:#17305f;
  text-decoration:none;
  transition:transform var(--tt-motion-smooth) var(--tt-motion-ease),box-shadow var(--tt-motion-smooth) var(--tt-motion-ease);
}
.tt-pillar-card:hover { transform:translateY(-5px); box-shadow:0 22px 44px rgba(44,83,145,.14); color:#17305f; }
.tt-pillar-card>img { width:100%; height:190px; object-fit:contain; object-position:center; margin-bottom:.45rem; }
.tt-pillar-card>div { padding:.75rem .5rem .35rem; }
.tt-pillar-card h3 { margin:.45rem 0 .35rem; font-size:1.15rem; font-weight:900; color:#112a58; }
.tt-pillar-card p { min-height:4.5em; margin:0 0 .75rem; color:#66748d; line-height:1.55; font-size:.9rem; }
.tt-pillar-card strong { color:#145fd2; font-size:.88rem; }
.tt-pillar-no { position:absolute; top:1rem; right:1rem; color:#d3def2; font-size:1.25rem; font-weight:900; }
.tt-pillar-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#fff; background:#2164de; box-shadow:0 8px 20px rgba(33,100,222,.22); }
.pillar-online { border-color:#f5d8dd; background:linear-gradient(180deg,#fff8fa,#fff 65%); }
.pillar-online .tt-pillar-icon { background:#ef476f; }
.pillar-resource { border-color:#e5dafd; background:linear-gradient(180deg,#fbf9ff,#fff 65%); }
.pillar-resource .tt-pillar-icon { background:#7c4cf1; }
.pillar-lcd { border-color:#cfecdf; background:linear-gradient(180deg,#f4fffa,#fff 65%); }
.pillar-lcd .tt-pillar-icon { background:#11a879; }

.tt-home-latest { background:linear-gradient(180deg,#f3f8ff 0%,#fbfdff 100%); }
.tt-article-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.tt-article-card {
  min-width:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:42% 58%;
  min-height:190px;
  border:1px solid #dce6f3;
  border-radius:18px;
  background:#fff;
  color:#17305f;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(36,70,121,.06);
  transition:transform var(--tt-motion-normal) var(--tt-motion-ease),box-shadow var(--tt-motion-normal) var(--tt-motion-ease);
}
.tt-article-card:hover { color:#17305f; transform:translateY(-3px); box-shadow:0 18px 34px rgba(36,70,121,.12); }
.tt-article-card__media { min-width:0; min-height:100%; background:#dbeafe; overflow:hidden; }
.tt-article-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.tt-article-card__body { min-width:0; padding:1rem; display:flex; flex-direction:column; }
.tt-article-tag { align-self:flex-start; padding:.25rem .55rem; border-radius:var(--tt-radius-pill); background:#eff6ff; color:#2366d1; font-size:.68rem; font-weight:800; }
.tt-article-card h3 { margin:.55rem 0 .35rem; font-size:1rem; line-height:1.35; font-weight:850; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.tt-article-card p { margin:0 0 .55rem; color:#6b778f; font-size:.82rem; line-height:1.45; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.tt-article-card strong { margin-top:auto; color:#145fd2; font-size:.78rem; }

.tt-mathdna-banner {
  min-height:300px;
  overflow:hidden;
  display:flex;
  align-items:center;
  border-radius:28px;
  padding:clamp(2rem,5vw,4.2rem);
  color:#fff;
  background:
    linear-gradient(90deg,rgba(5,21,73,.92),rgba(22,37,157,.70) 58%,rgba(24,41,150,.15)),
    url('../ui/homepage/mathdna-banner-background-v1.png') center/cover no-repeat;
  box-shadow:0 24px 60px rgba(29,54,143,.18);
}
.tt-mathdna-banner__copy { max-width:660px; }
.tt-mathdna-banner__copy>span { font-weight:900; color:#8ef2ff; letter-spacing:.08em; text-transform:uppercase; }
.tt-mathdna-banner h2 { margin:.45rem 0 .8rem; font-size:clamp(1.8rem,3.1vw,3rem); font-weight:900; letter-spacing:-.03em; }
.tt-mathdna-banner ul { margin:0 0 1.2rem; padding-left:1.2rem; line-height:1.8; }
.tt-mathdna-banner .btn { border-radius:14px; min-height:46px; font-weight:850; }

.tt-home-v8 .public-footer { position:relative; overflow:hidden; background:linear-gradient(135deg,#071a3e,#0b295c 58%,#112f67); }
.tt-home-v8 .public-footer-brand-wrap { display:flex; align-items:center; gap:1rem; }
.tt-home-v8 .public-footer-illustration { width:132px; height:auto; object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 14px 24px rgba(41,123,255,.18)); }

@media (max-width:1199.98px) {
  .tt-home-hero__inner { grid-template-columns:minmax(0,1fr) minmax(360px,.9fr); }
  .tt-home-orbit-chip { width:210px; }
  .tt-pillar-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tt-pillar-card { min-height:390px; }
  .tt-article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:991.98px) {
  .tt-home-hero { background-position:42% center; }
  .tt-home-hero__inner { grid-template-columns:1fr; min-height:auto; padding-top:3.3rem; }
  .tt-home-hero__copy { max-width:760px; }
  .tt-home-hero__visual { min-height:430px; width:min(760px,100%); margin-inline:auto; }
  .tt-home-hero__student { right:8%; width:min(50%,350px); }
  .tt-home-hero__hologram { right:34%; width:min(52%,390px); }
  .tt-home-orbit-chip.chip-dna { left:4%; }
  .tt-home-orbit-chip.chip-online { left:0; top:42%; }
  .tt-home-orbit-chip.chip-resource { right:2%; }
  .tt-home-orbit-chip.chip-lcd { right:0; top:43%; }
}

@media (max-width:767.98px) {
  .tt-home-v8 .public-header .navbar { min-height:62px; }
  .tt-home-hero { background-position:38% center; }
  .tt-home-hero__inner { padding-block:2.5rem 3.2rem; gap:1rem; }
  .tt-home-hero h1 { font-size:clamp(2.25rem,11vw,3.6rem); }
  .tt-home-hero__lead { font-size:.98rem; }
  .tt-home-hero__actions { display:grid; grid-template-columns:1fr; max-width:420px; }
  .tt-home-hero__visual { min-height:380px; }
  .tt-home-hero__student { width:min(58%,320px); right:3%; bottom:-6%; }
  .tt-home-hero__hologram { width:min(58%,330px); left:8%; right:auto; bottom:-14%; }
  .tt-home-orbit-chip { width:190px; padding:.62rem .68rem; }
  .tt-home-orbit-chip i { width:34px; height:34px; flex-basis:34px; }
  .tt-home-orbit-chip b { font-size:.78rem; }
  .tt-home-orbit-chip small { font-size:.64rem; }
  .tt-home-orbit-chip.chip-dna { top:5%; left:0; }
  .tt-home-orbit-chip.chip-online { top:34%; left:0; }
  .tt-home-orbit-chip.chip-resource { top:8%; right:0; }
  .tt-home-orbit-chip.chip-lcd { top:37%; right:0; }
  .tt-home-section { padding:3.4rem 0; }
  .tt-home-section-heading--split { align-items:flex-start; flex-direction:column; }
  .tt-pillar-grid { grid-template-columns:1fr 1fr; gap:.75rem; }
  .tt-pillar-card { min-height:0; padding:.85rem; }
  .tt-pillar-card>img { height:140px; }
  .tt-pillar-card p { min-height:0; font-size:.84rem; }
  .tt-article-grid { grid-template-columns:1fr; }
  .tt-article-card { grid-template-columns:34% 66%; min-height:165px; }
  .tt-home-v8 .public-footer-brand-wrap { align-items:flex-start; }
  .tt-home-v8 .public-footer-illustration { width:104px; }
}

@media (max-width:520px) {
  .tt-home-kicker { font-size:.69rem; }
  .tt-home-hero__visual { min-height:330px; max-width:100%; overflow:hidden; }
  .tt-home-hero__student { width:58%; right:0; }
  .tt-home-hero__hologram { width:58%; left:0; }
  .tt-home-orbit-chip { width:164px; }
  .tt-home-orbit-chip small { display:none; }
  .tt-home-orbit-chip.chip-online { top:37%; }
  .tt-home-orbit-chip.chip-lcd { top:40%; }
  .tt-pillar-grid { grid-template-columns:1fr; }
  .tt-pillar-card { display:grid; grid-template-columns:112px 1fr; align-items:center; }
  .tt-pillar-card>img { width:112px; height:112px; margin:0; }
  .tt-pillar-card>div { padding:.25rem .35rem; }
  .tt-pillar-icon { width:36px; height:36px; }
  .tt-pillar-card h3 { font-size:1rem; }
  .tt-pillar-card p { font-size:.8rem; }
  .tt-pillar-no { font-size:1rem; }
  .tt-article-card { grid-template-columns:115px 1fr; }
  .tt-article-card h3 { -webkit-line-clamp:2; }
  .tt-article-card p { display:none; }
  .tt-mathdna-banner { min-height:360px; padding:1.4rem; background-position:60% center; }
  .tt-home-v8 .public-footer-brand-wrap { display:block; }
  .tt-home-v8 .public-footer-illustration { margin-top:1rem; width:96px; }
}

@media (prefers-reduced-motion:reduce) {
  .tt-home-v8 .tt-home-orbit-chip,
  .tt-home-v8 .tt-pillar-card,
  .tt-home-v8 .tt-article-card,
  .tt-home-v8 .tt-home-hero__actions .btn { transition:none!important; transform:none!important; }
}

/* Nhãn tiếng Việt dài phải co giãn theo card, không tạo overflow ngang. */
.tt-home-v8 .tt-home-orbit-chip b,
.tt-home-v8 .tt-pillar-card h3,
.tt-home-v8 .tt-article-card h3 {
  min-width:0;
  overflow-wrap:break-word;
  word-break:normal;
}