/* tai-lieu.css */

/* Hero */
.tl-hero{
  text-align:center;
  padding:80px 0 40px;
  background:linear-gradient(180deg,rgba(37,99,235,.12) 0%,transparent 100%);
  position:relative;
}
.tl-hero::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:600px;height:400px;
  background:radial-gradient(ellipse,rgba(37,99,235,.15),transparent 70%);
  pointer-events:none;
}
.tl-hero h1{
  font-size:clamp(1.8rem,5vw,2.8rem);font-weight:900;margin:20px 0 14px;
  line-height:1.2;
}
.tl-hero-desc{
  color:var(--text2);max-width:560px;margin:0 auto 32px;font-size:1rem;line-height:1.7;
}
.pulse-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Tabs */
.tl-tabs{
  display:inline-flex;gap:4px;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:4px;
}
.tl-tab{
  padding:10px 22px;border-radius:10px;font-size:.9rem;font-weight:600;
  color:var(--text2);transition:var(--transition);cursor:pointer;
  text-decoration:none;
}
.tl-tab:hover{color:var(--text)}
.tl-tab.active{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;box-shadow:0 4px 16px rgba(37,99,235,.3);
}

/* Sections */
.tl-section{padding:48px 0}
.section-head{margin-bottom:28px}
.section-head h2{font-size:1.5rem;font-weight:800;margin-bottom:6px}
.section-head p{color:var(--text2);font-size:.95rem}

/* Grid */
.tl-grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* Cards */
.tl-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:var(--transition);
}
.tl-card:hover{
  border-color:var(--primary);transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(37,99,235,.15);
}
.tl-card-top{
  padding:24px 24px 12px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:12px;
}
.tl-icon{
  width:52px;height:52px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;font-size:24px;flex-shrink:0;
}
.tl-icon.emerald{background:rgba(16,185,129,.12);color:#10b981}
.tl-icon.sky{background:rgba(14,165,233,.12);color:#0ea5e9}
.tl-icon.violet{background:rgba(139,92,246,.12);color:#8b5cf6}
.tl-icon.amber{background:rgba(245,158,11,.12);color:#f59e0b}
.tl-tag{
  font-size:.75rem;padding:5px 12px;border-radius:8px;font-weight:700;
  background:rgba(255,255,255,.06);border:1px solid var(--border);
  color:var(--text);white-space:nowrap;
}
.tl-card h3{
  font-size:1.05rem;font-weight:700;margin:8px 24px 6px;line-height:1.3;
}
.tl-card > p{
  color:var(--text2);font-size:.88rem;margin:0 24px 20px;line-height:1.6;flex:1;
}
.tl-card-bottom{
  margin-top:auto;border-top:1px solid var(--border);
  background:rgba(255,255,255,.02);padding:16px 24px;
  display:flex;justify-content:space-between;align-items:center;
}
.tl-size{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);font-weight:700;
}
.tl-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:10px;font-size:.82rem;font-weight:700;
  cursor:pointer;transition:var(--transition);text-decoration:none;border:none;
}
.tl-btn-dl{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;box-shadow:0 4px 16px rgba(37,99,235,.25);
}
.tl-btn-dl:hover{transform:scale(1.04);box-shadow:0 6px 24px rgba(37,99,235,.35)}
.tl-btn-soon{
  background:rgba(255,255,255,.06);color:var(--text3);
  border:1px solid var(--border);cursor:not-allowed;
}

/* Responsive */
@media(max-width:640px){
  .tl-tabs{flex-direction:column;width:100%;max-width:320px;margin:0 auto}
  .tl-tab{text-align:center}
  .tl-hero{padding:60px 0 30px}
}