/* Font Inter load async từ header.php — không dùng @import */
/* ========================================================
   BLOG PAGE — FORZA PREMIUM REDESIGN
   ======================================================== */
.blog-page { background: #f0f2f8; font-family:'Inter',sans-serif; }

/* ── Scroll Reveal ── */
.bl-reveal { opacity:0; transform:translateY(32px); transition:opacity .65s ease, transform .65s ease; }
.bl-reveal.visible { opacity:1; transform:translateY(0); }
.bl-reveal-left { opacity:0; transform:translateX(-40px); transition:opacity .7s ease, transform .7s ease; }
.bl-reveal-left.visible { opacity:1; transform:translateX(0); }
.bl-reveal-right { opacity:0; transform:translateX(40px); transition:opacity .7s ease, transform .7s ease; }
.bl-reveal-right.visible { opacity:1; transform:translateX(0); }

/* ── Hero ── */
.blog-top-hero {
  position:relative; padding:100px 0 70px; text-align:center; overflow:hidden;
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
}
.blog-top-hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59,130,246,.15) 0%, transparent 70%);
  pointer-events:none;
}
.blog-top-hero::after {
  content:''; position:absolute; width:600px; height:600px; border-radius:50%;
  background: radial-gradient(circle, rgba(59,130,246,.08) 0%, transparent 70%);
  top:-200px; right:-100px; pointer-events:none; animation: heroFloat 8s ease-in-out infinite;
}
@keyframes heroFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-30px) scale(1.05)} }

.bl-hero-grid {
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  background-image: linear-gradient(rgba(59,130,246,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(59,130,246,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 30%, transparent 100%);
}

.bl-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:3px; color:#2563eb;
  text-transform:uppercase; margin-bottom:20px;
  padding:6px 18px; border:1px solid rgba(37,99,235,.2); border-radius:50px;
  background:rgba(59,130,246,.1); backdrop-filter:blur(10px);
  animation: fadeInDown .8s ease both;
}
.bl-eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:#2563eb; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }

.blog-top-hero h1 {
  font-size:clamp(2.4rem,5vw,3.8rem); font-weight:900; color:#0f172a;
  margin-bottom:20px; line-height:1.1; letter-spacing:-1.5px;
  animation: fadeInUp .8s .15s ease both;
}
.blog-top-hero h1 em {
  font-style:normal;
  background: linear-gradient(135deg, #2563eb, #0ea5e9, #06b6d4);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
@keyframes fadeInUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

.blog-top-hero > .container > p {
  font-size:17px; color:#475569; max-width:580px; margin:0 auto 44px; line-height:1.75;
  animation: fadeInUp .8s .25s ease both;
}

.bl-jump-links {
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  animation: fadeInUp .8s .35s ease both;
}
.bl-jump {
  display:flex; align-items:center; gap:8px; padding:9px 20px;
  border:1px solid rgba(148,163,184,.3); border-radius:50px;
  background:#fff; backdrop-filter:blur(12px); box-shadow:0 2px 10px rgba(0,0,0,.03);
  font-size:13px; font-weight:500; color:#475569;
  text-decoration:none; transition:all .3s; cursor:pointer;
}
.bl-jump:hover {
  background:#2563eb; border-color:#2563eb; color:#fff;
  box-shadow:0 8px 24px rgba(37,99,235,.25); transform:translateY(-2px);
}
.bl-jump i { font-size:12px; }

/* ── Section shell ── */
.bl-section { padding:70px 0; border-bottom:1px solid rgba(226,232,240,.6); background:#fff; position:relative; }
.bl-section:nth-child(even) { background:#f8faff; }
.bl-section--dark {
  background: linear-gradient(135deg,#0f172a 0%,#1e1b4b 60%,#0f0c29 100%) !important;
  position:relative; overflow:hidden;
}
.bl-section--dark::before {
  content:''; position:absolute; width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, rgba(99,102,241,.2) 0%, transparent 70%);
  top:-150px; right:-100px; pointer-events:none;
}

/* ── Section Header ── */
.bl-section-hd {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:32px; padding-bottom:16px;
  border-bottom:2px solid #e2e8f0;
  position: relative;
}
.bl-section-hd::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100px; height: 2px;
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
}
.bl-section--dark .bl-section-hd { border-color: rgba(255,255,255,0.1); }
.bl-section--dark .bl-section-hd::after { background: linear-gradient(90deg,#818cf8,#c084fc); }
.bl-section-left { display:flex; align-items:center; gap:14px; }
.bl-sec-icon {
  font-size:20px; width:46px; height:46px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #2563eb, #3b82f6); color:#fff; border-radius:12px;
  box-shadow:0 4px 14px rgba(37,99,235,.25);
}
.bl-section--dark .bl-sec-icon { background:linear-gradient(135deg,#818cf8,#c084fc); }
.bl-section-left h2 { font-size:1.3rem; font-weight:800; color:#0f172a; margin:0; letter-spacing:-.3px; }
.bl-section--dark .bl-section-left h2 { color:#fff; }
.bl-post-count {
  font-size:12px; color:#2563eb; background:rgba(37,99,235,.1);
  padding:3px 12px; border-radius:20px; font-weight:600;
  white-space:nowrap;
}
.bl-view-all {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 20px; border-radius:50px;
  background:linear-gradient(135deg, #2563eb, #3b82f6); color:#fff;
  font-size:13px; font-weight:600; text-decoration:none;
  box-shadow:0 4px 14px rgba(37,99,235,.2); transition:all .3s;
  white-space:nowrap;
}
.bl-view-all:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,99,235,.35); gap:12px; }
.bl-section--dark .bl-view-all { background:rgba(255,255,255,.1); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.15); box-shadow:none; }
.bl-section--dark .bl-view-all:hover { background:rgba(255,255,255,.2); }

/* ── Empty state ── */
.bl-empty {
  text-align:center; padding:64px 20px; color:#94a3b8;
  background:linear-gradient(135deg,#f8faff,#f0f4ff);
  border-radius:20px; border:2px dashed #c7d2fe;
}
.bl-empty i { font-size:48px; margin-bottom:20px; display:block; color:#c7d2fe; }
.bl-empty p { font-size:15px; line-height:1.7; margin-bottom:24px; }

/* ── Badge ── */
.bl-badge {
  position:absolute; top:14px; left:14px;
  padding:5px 14px; border-radius:50px;
  background:linear-gradient(135deg, #2563eb, #3b82f6); color:#fff;
  font-size:11px; font-weight:700; text-decoration:none; z-index:2;
  backdrop-filter:blur(4px);
}
.bl-badge-inline {
  display:inline-block; padding:3px 12px;
  background:linear-gradient(135deg, #2563eb, #3b82f6); color:#fff;
  border-radius:50px; font-size:11px; font-weight:700; margin-bottom:6px;
}
.bl-meta { display:flex; gap:14px; font-size:12px; color:#94a3b8; align-items:center; }
.bl-meta i { margin-right:4px; color:#a5b4fc; }
.bl-date { font-size:12px; color:#94a3b8; }

/* ── Card ── */
.bl-card {
  background:#fff; border-radius:18px; overflow:hidden;
  border:1px solid rgba(226,232,240,.8); transition:all .4s cubic-bezier(.25,.8,.25,1);
  position:relative;
}
.bl-card::after {
  content:''; position:absolute; inset:0; border-radius:18px;
  background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(139,92,246,.06));
  opacity:0; transition:opacity .3s;
}
.bl-card:hover { transform:translateY(-8px); box-shadow:0 20px 48px rgba(99,102,241,.15); border-color:rgba(99,102,241,.2); }
.bl-card:hover::after { opacity:1; }
.bl-card-thumb { position:relative; overflow:hidden; height:190px; }
.bl-card-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.bl-card:hover .bl-card-thumb img { transform:scale(1.08); }
.bl-no-thumb {
  height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#f0f4ff,#faf5ff);
}
.bl-no-thumb i { font-size:40px; color:#c7d2fe; }
.bl-card-body { padding:20px 22px 24px; }
.bl-card-title { font-size:15px; font-weight:700; line-height:1.45; margin:10px 0 8px; }
.bl-card-title a { color:#0f172a; text-decoration:none; transition:color .2s; }
.bl-card-title a:hover { color:#2563eb; }
.bl-card-excerpt { font-size:13px; color:#64748b; line-height:1.65; }
.bl-read-more {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:#2563eb; text-decoration:none;
  margin-top:12px; transition:gap .25s;
}
.bl-read-more:hover { gap:10px; }

/* ── Layout 1: hero-side ── */
.bl-hero-side { display:grid; grid-template-columns:1.7fr 1fr; gap:28px; align-items:start; }
.bl-hero-main { background:#fff; border-radius:20px; overflow:hidden; border:1px solid rgba(226,232,240,.8); transition:all .4s; }
.bl-hero-main:hover { box-shadow:0 20px 48px rgba(99,102,241,.15); transform:translateY(-6px); }
.bl-hero-thumb { position:relative; height:300px; overflow:hidden; }
.bl-hero-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.bl-hero-main:hover .bl-hero-thumb img { transform:scale(1.06); }
.bl-hero-thumb::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,23,42,.5) 0%, transparent 50%); }
.bl-hero-body { padding:24px 28px 28px; }
.bl-hero-body h3 { font-size:1.25rem; font-weight:800; line-height:1.38; margin:12px 0 10px; letter-spacing:-.2px; }
.bl-hero-body h3 a { color:#0f172a; text-decoration:none; transition:color .2s; }
.bl-hero-body h3 a:hover { color:#6366f1; }
.bl-hero-body p { font-size:14px; color:#64748b; line-height:1.75; margin-bottom:18px; }

/* ── Layout 2: news-stack ── */
.bl-news-stack { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.bl-news-featured { border-radius:20px; overflow:hidden; position:relative; }
.bl-news-thumb { position:relative; }
.bl-news-thumb img { width:100%; height:360px; object-fit:cover; display:block; }
.bl-thumb-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 50%, transparent 100%); }
.bl-news-over { position:absolute; bottom:0; left:0; right:0; padding:28px; }
.bl-news-over h3 { font-size:1.15rem; font-weight:700; line-height:1.4; margin:10px 0 0; }
.bl-news-over h3 a { text-decoration:none; }
.bl-news-side { display:flex; flex-direction:column; gap:12px; }
.bl-news-row {
  display:flex; gap:16px; align-items:flex-start; text-decoration:none; color:inherit;
  padding:16px; background:#fff; border-radius:14px; border:1px solid rgba(226,232,240,.8);
  transition:all .3s;
}
.bl-news-row:hover { box-shadow:0 8px 24px rgba(99,102,241,.12); transform:translateY(-3px); border-color:rgba(99,102,241,.2); }
.bl-news-row-thumb { width:120px; height:90px; border-radius:12px; overflow:hidden; flex-shrink:0; }
.bl-news-row-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.bl-news-row:hover .bl-news-row-thumb img { transform:scale(1.08); }
.bl-news-row-info h4 { font-size:14px; font-weight:600; color:#0f172a; line-height:1.4; margin:4px 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Layout 3: three-col ── */
.bl-three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

/* ── Layout 4: highlight-full ── */
.bl-section--highlight {
  background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%) !important;
  position:relative; overflow:hidden;
}
.bl-section--highlight::before {
  content:''; position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,0.05) 0%, transparent 70%);
  top:-200px; right:-150px; pointer-events:none;
}
.bl-highlight-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  background: #fff; border-radius:24px; padding:48px;
  box-shadow: 0 20px 48px rgba(37,99,235,0.08);
  border: 1px solid rgba(226,232,240,0.8);
}
.bl-highlight-content h2 { font-size:clamp(1.5rem,2.5vw,2.1rem); font-weight:900; color:#0f172a; line-height:1.3; margin:14px 0; letter-spacing:-.5px; }
.bl-highlight-content h2 a { color:#0f172a; text-decoration:none; transition:color .2s; }
.bl-highlight-content h2 a:hover { color:#2563eb; }
.bl-highlight-content p { color:#475569; line-height:1.75; margin:16px 0 28px; font-size: 15px; }
.bl-highlight-thumb { border-radius:20px; overflow:hidden; position:relative; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.bl-highlight-thumb img { width:100%; display:block; border-radius:20px; transition: transform .5s; }
.bl-highlight-inner:hover .bl-highlight-thumb img { transform:scale(1.03); }
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; border-radius:50px; font-size:14px; font-weight:700; text-decoration:none; transition:all .3s; cursor:pointer; border:none; }
.btn-primary { background:linear-gradient(135deg, #2563eb, #3b82f6); color:#fff; box-shadow:0 6px 20px rgba(37,99,235,.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(37,99,235,.4); }

/* ── Layout 5: two-col ── */
.bl-two-col { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.bl-two-col .bl-card-thumb { height:230px; }

/* ── Layout 6: four-col ── */
.bl-four-col { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* ── Decorative section divider ── */
.bl-section::before {
  display:none;
}
.bl-section--dark::before { background:none; }

/* ── Responsive ── */
@media (max-width:1100px) {
  .bl-four-col { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .blog-top-hero { padding:70px 0 50px; }
  .bl-hero-side, .bl-news-stack, .bl-dark-inner { grid-template-columns:1fr; }
  .bl-three-col, .bl-two-col { grid-template-columns:repeat(2,1fr); }
  .bl-news-thumb img { height:240px; }
  .bl-section { padding:50px 0; }
  
  .bl-section-hd { flex-wrap:wrap; gap:12px; }
  .bl-section-left h2 { font-size:1.1rem; }
  .bl-view-all { padding:6px 14px; font-size:12px; gap:6px; }
  .bl-post-count { padding:2px 10px; font-size:11px; }
}
@media (max-width:500px) {
  .bl-three-col, .bl-two-col, .bl-four-col { grid-template-columns:1fr; }
  .blog-top-hero h1 { font-size:2rem; }
}