/* W.E.St. Vietnam Blog CSS */


/* ── Reset & Base ── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; font-size: 17px; line-height: 1.7; color: #333; background: #f5f6f8; }
a { color: #060097; text-decoration: none; }
a:hover { color: #1a3a6b; text-decoration: underline; }
h1,h2,h3,h4,h5,h6 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; color: #1a3a6b; line-height: 1.3; }
img { max-width: 100%; height: auto; }

/* ── Header (matching w-e-st.com.vn) ── */
.blog-topbar { background: #0f2347; padding: 7px 0; font-size: 12px; }
.blog-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.blog-topbar a { color: rgba(255,255,255,.65); text-decoration: none; }
.blog-topbar a:hover { color: #fff; text-decoration: none; }
.blog-topbar-left { display: flex; gap: 16px; align-items: center; }
.blog-topbar-right { display: flex; align-items: center; gap: 8px; }
.blog-topbar-dot { width: 6px; height: 6px; background: #cc0000; border-radius: 50%; }
.blog-topbar-auth { font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 1px; text-transform: uppercase; }

.blog-header { background: #060097; padding: 0; border-bottom: 3px solid #cc0000; }
.blog-header-inner { max-width: 1200px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.blog-logo { text-decoration: none; display: flex; align-items: center; gap: 6px; }
.blog-logo-text { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 26px; color: #fff; letter-spacing: -1px; }
.blog-logo-text .dot { color: #cc0000; }
.blog-logo-sub { font-size: 11px; color: rgba(255,255,255,.5); margin-left: 12px; font-style: italic; }
.blog-nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.blog-nav a { color: rgba(242,245,247,.76); font-size: 14px; font-weight: 600; text-decoration: none; padding: 8px 14px; border-radius: 4px; text-transform: uppercase; letter-spacing: .3px; }
.blog-nav a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
.blog-nav-cta { background: #ffcd57 !important; color: #1e293b !important; font-weight: 700 !important; border-radius: 50px !important; padding: 10px 24px !important; }
.blog-nav-cta:hover { background: #ffd97a !important; }

/* ── Breadcrumb ── */
.blog-breadcrumb { max-width: 820px; margin: 30px auto 0; padding: 0 24px; font-size: 13px; color: #67768e; }
.blog-breadcrumb a { color: #060097; }
.blog-breadcrumb span { margin: 0 6px; color: #ccc; }

/* ── Article ── */
.blog-article { max-width: 820px; margin: 16px auto 40px; padding: 40px 48px; background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
@media(max-width:600px) { .blog-article { padding: 24px 18px; margin: 12px 10px 30px; } }

.blog-meta { font-size: 13px; color: #67768e; margin-bottom: 20px; display: flex; gap: 16px; flex-wrap: wrap; }
.blog-meta-author { font-weight: 600; color: #1a3a6b; }

.blog-article h1 { font-size: 1.9rem; margin-bottom: .8em; line-height: 1.35; }
.blog-article h2 { font-size: 1.4rem; margin-top: 2em; margin-bottom: .6em; padding-bottom: 6px; border-bottom: 2px solid #f0f0f0; }
.blog-article h3 { font-size: 1.15rem; margin-top: 1.5em; margin-bottom: .4em; }
.blog-article p { margin-bottom: 1em; }
.blog-article ul, .blog-article ol { padding-left: 20px; margin-bottom: 1em; }
.blog-article li { margin-bottom: .4em; }
.blog-article table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 14px; }
.blog-article th { background: #1a3a6b; color: #fff; padding: 10px 12px; text-align: left; font-weight: 600; }
.blog-article td { padding: 9px 12px; border-bottom: 1px solid #eee; }
.blog-article tr:nth-child(even) { background: #f9fafb; }
.blog-article code { background: #f0f2f5; padding: 2px 6px; border-radius: 3px; font-size: .9em; }

/* ── Related Posts ── */
.blog-related { margin-top: 2.5em; padding-top: 1.5em; border-top: 2px solid #f0f0f0; }
.blog-related h2 { font-size: 1.15rem; border: none; padding: 0; margin-bottom: .8em; }
.blog-related ul { list-style: none; padding: 0; }
.blog-related li { padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
.blog-related li a { font-weight: 600; }
.related-date { font-size: 12px; color: #999; }

/* ── Footer (matching w-e-st.com.vn) ── */
.blog-footer { background: #0f2347; color: rgba(255,255,255,.6); padding: 50px 0 0; }
.blog-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.blog-footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.blog-footer-brand { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 800; font-size: 22px; color: #fff; }
.blog-footer-brand .dot { color: #cc0000; }
.blog-footer-auth { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 1px; }
.blog-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
@media(max-width:900px) { .blog-footer-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:500px) { .blog-footer-grid { grid-template-columns: 1fr; } }
.blog-footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; font-family: Arial, sans-serif; }
.blog-footer p { font-size: 13px; line-height: 1.6; }
.blog-footer ul { list-style: none; padding: 0; }
.blog-footer li { margin-bottom: 8px; }
.blog-footer li a { color: rgba(255,255,255,.6); font-size: 13px; text-decoration: none; }
.blog-footer li a:hover { color: #fff; text-decoration: none; }
.blog-footer-bar { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; }
.blog-footer-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.blog-footer-copy { font-size: 11px; color: rgba(255,255,255,.3); }
.blog-footer-links { display: flex; gap: 20px; }
.blog-footer-links a { color: rgba(255,255,255,.35); font-size: 11px; text-decoration: none; }
.blog-footer-links a:hover { color: rgba(255,255,255,.7); text-decoration: none; }

@media(max-width:600px) {
  .blog-topbar-inner, .blog-header-inner { padding: 0 14px; }
  .blog-nav { display: none; }
  .blog-article h1 { font-size: 1.5rem; }
  .blog-article h2 { font-size: 1.2rem; }
  .blog-article table { font-size: 12px; }
}


/* Blog listing cards */
.blog-card{display:block;background:#fff;border:1px solid #e8edf3;border-radius:8px;padding:24px;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.blog-card:hover{border-color:#060097;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.blog-card-date{font-size:12px;color:#67768e;margin-bottom:8px}
.blog-card h2{font-size:1.1rem;color:#1a3a6b;margin-bottom:8px;line-height:1.4;border:none;padding:0}
.blog-card p{font-size:13px;color:#666;line-height:1.6;margin-bottom:8px}
.blog-card-read{font-size:12px;color:#060097;font-weight:600}

/* Blog featured image */
.bp-featured-img{margin:-10px 0 24px;border-radius:8px;overflow:hidden;background:#f8fafc}
.bp-featured-img img{width:100%;max-height:340px;object-fit:contain;margin:0 auto}

/* Blog inline image */
.bp-inline-img{margin:24px 0;text-align:center}
.bp-inline-img img{max-height:260px;object-fit:contain;margin:0 auto;border-radius:6px;border:1px solid #e8edf3}
.bp-inline-img figcaption{font-size:12px;color:#888;margin-top:8px;font-style:italic}

/* Blog card with image */
.blog-card{display:flex;flex-direction:row;align-items:stretch}
.blog-card-img{flex:0 0 200px;background:#f8fafc;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid #e8edf3}
.blog-card-img img{max-height:120px;max-width:100%;object-fit:contain}
.blog-card-body{flex:1;padding:20px}
@media(max-width:600px){
  .blog-card{flex-direction:column}
  .blog-card-img{flex:none;border-right:none;border-bottom:1px solid #e8edf3;min-height:140px}
}

/* Blog images */
.blog-featured-img{margin:0 0 24px;border-radius:8px;overflow:hidden;background:#f8fafc;text-align:center}
.blog-featured-img img{max-height:300px;margin:0 auto;object-fit:contain;width:auto}
.blog-inline-img{margin:20px 0;text-align:center}
.blog-inline-img img{max-height:240px;margin:0 auto;object-fit:contain;border-radius:6px;border:1px solid #e8edf3}
.blog-inline-img figcaption{font-size:12px;color:#888;margin-top:8px;font-style:italic}

/* Blog listing with thumbnails */
.blog-card{display:flex;gap:16px;background:#fff;border:1px solid #e8edf3;border-radius:8px;overflow:hidden;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.blog-card:hover{border-color:#060097;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.blog-card-img{flex-shrink:0;width:180px;min-height:120px;background:#f8fafc;display:flex;align-items:center;justify-content:center;padding:12px}
.blog-card-img img{max-height:100px;max-width:100%;object-fit:contain}
.blog-card-body{padding:16px 16px 16px 0;flex:1}
.blog-card-date{font-size:12px;color:#67768e;margin-bottom:6px}
.blog-card h2{font-size:1rem;color:#1a3a6b;margin-bottom:6px;line-height:1.4;border:none;padding:0}
.blog-card p{font-size:13px;color:#666;line-height:1.5;margin-bottom:6px}
.blog-card-read{font-size:12px;color:#060097;font-weight:600}
@media(max-width:600px){.blog-card{flex-direction:column}.blog-card-img{width:100%;min-height:140px}.blog-card-body{padding:16px}}