/* Vipex · Thư viện học tập sáng tạo — hub styles (Vipex light design system).
   Tokens, nav, footer, buttons, eyebrow come from vipex.css (linked first). */

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---- hero (full-bleed sky gradient band, nav floats over it) ---- */
.hero{position:relative;margin-top:-84px;overflow:hidden;
  background:linear-gradient(168deg, var(--sky-top) 0%, var(--sky-mid) 46%, var(--sky-bot) 100%)}
.hero::before{content:"";position:absolute;right:-6%;top:-18%;width:60%;height:70%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.55), transparent 72%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;
  background:rgba(255,255,255,.5)}
.hero-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:120px 20px 68px;display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.hero-copy{min-width:0}
.hero .eyebrow{margin-bottom:18px;background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.75);
  color:var(--ink-900);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero h1{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(31px,5vw,52px);line-height:1.06;margin:0 0 16px;color:var(--ink-900);max-width:16ch;
  text-shadow:0 1px 0 rgba(255,255,255,.35)}
.hero h1 .grad{color:var(--accent-600);font-style:italic}
.hero p{font-size:clamp(15px,2.1vw,18px);color:var(--ink-700);max-width:54ch;margin:0 0 24px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-size:12.5px;font-weight:500;color:var(--ink-900);background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.6);padding:7px 13px;border-radius:var(--radius-pill);
  box-shadow:0 4px 12px rgba(20,50,90,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.chip b{color:var(--accent-600);font-weight:700}
.hero-art{position:relative;min-width:0;height:420px;display:flex;align-items:center;justify-content:center}
.hero-art model-viewer{width:100%;height:100%;background:transparent;--poster-color:transparent;
  filter:drop-shadow(0 26px 46px rgba(16,40,78,.28))}

/* ---- section ---- */
.section{padding:34px 0 6px}
.section .eyebrow{margin-bottom:14px}
.section h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(22px,3vw,30px);line-height:1.12;margin:0 0 6px;color:var(--ink-900)}
.section h2 .tag{display:none}            /* eyebrow replaces inline tag; keep rule harmless */
.section .sub{color:var(--ink-500);font-size:15px;margin:0 0 22px;max-width:66ch}

/* ---- grid + cards ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{position:relative;background:#fff;border:1px solid var(--ink-200);border-radius:var(--radius-md);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:var(--accent-100);box-shadow:var(--shadow-card-hover)}
.card .media{position:relative;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
.card .media img,.card .media video{width:100%;height:100%;object-fit:cover;display:block}
.card .media video{position:absolute;inset:0;opacity:0;transition:opacity .25s ease}
.card:hover .media video{opacity:1}
.card .badge{position:absolute;left:12px;top:12px;z-index:2;font-size:11px;font-weight:600;
  letter-spacing:.02em;padding:5px 10px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.88);backdrop-filter:blur(6px);color:var(--accent-600);
  border:1px solid rgba(20,50,90,.08);box-shadow:var(--shadow-soft)}
.card .badge.live{color:#fff;background:var(--accent-500);border-color:transparent}
.card .body{padding:17px 18px 19px;display:flex;flex-direction:column;gap:9px;flex:1}
.card .body h3{margin:0;font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;
  font-size:18px;line-height:1.2;color:var(--ink-900)}
.card .body p{margin:0;color:var(--ink-500);font-size:13.5px;line-height:1.5;flex:1}
.card .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.card .t{font-size:11px;color:var(--ink-500);background:var(--surface-1);border:1px solid var(--ink-200);
  padding:4px 9px;border-radius:var(--radius-pill)}
.card .cta{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.card .cta .btn{height:40px;padding:0 16px;font-size:13px}

/* feature cards span wider */
.feature{grid-column:span 2}
@media(max-width:640px){.feature{grid-column:span 1}}

/* ---- responsive ---- */
@media(max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:10px;padding:108px 20px 44px;text-align:center}
  .hero .eyebrow{margin-left:auto;margin-right:auto}
  .hero h1{max-width:none}
  .hero p{max-width:60ch;margin-left:auto;margin-right:auto}
  .chips{justify-content:center}
  .hero-art{order:-1;height:260px;margin-bottom:4px}
}
@media(max-width:560px){
  .hero{margin-top:-80px}
  .hero-inner{padding:100px 20px 40px}
  .hero-art{height:230px}
  .grid{grid-template-columns:1fr;gap:16px}
}