/* Blog - Newsroom-inspired layout, F9 theme colors */
.blog-hero{background:linear-gradient(135deg,#EAF7F0 0%,#F3FAFD 55%,#FFFFFF 100%);padding:80px 0 40px 0;text-align:center}
.blog-hero h1{font-family:'Montserrat',sans-serif;font-size:46px;font-weight:800;color:#0D2665;margin:0 0 16px 0}
.blog-hero p{font-family:'Montserrat',sans-serif;font-size:17px;color:#475569;max-width:560px;margin:0 auto;line-height:1.6}

.blog-tabs{display:flex;justify-content:center;align-items:center;gap:34px;border-bottom:1px solid #E2E8F0;background:#FFFFFF;padding:0 20px;overflow-x:auto}
.blog-tabs button{background:none !important;border:none;border-radius:0 !important;padding:18px 2px !important;font-family:'Montserrat',sans-serif;font-size:15px;font-weight:600;color:#64748B;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:color 0.2s ease,border-color 0.2s ease;box-shadow:none !important;transform:none !important}
.blog-tabs button:hover,
.blog-tabs button:focus,
.blog-tabs button:active{background:none !important;color:#164AC8;box-shadow:none !important;transform:none !important}
.blog-tabs button.active{color:#0D2665;border-bottom-color:#164AC8}

.blog-layout{padding:50px 0 100px 0}

.blog-main{flex:1;min-width:0}
.blog-sidebar{width:280px;flex-shrink:0;position:sticky;top:120px}

.blog-sidebar-box{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:25px;margin-bottom:25px}
.blog-sidebar-title{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;color:#0D2665;text-transform:uppercase;letter-spacing:0.5px;margin:0 0 18px 0}
.blog-cat-list{list-style:none;margin:0;padding:0}
.blog-cat-list li{border-bottom:1px solid #E2E8F0}
.blog-cat-list li:last-child{border-bottom:none}
.blog-cat-list button{width:100%;text-align:left;background:none;border:none;padding:12px 4px;font-family:'Montserrat',sans-serif;font-size:14.5px;font-weight:600;color:#475569;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:color 0.2s ease}
.blog-cat-list button:hover{color:#164AC8;background:none;border-radius:0}
.blog-cat-list button.active{color:#0D2665;background:none;border-radius:0}
.blog-cat-list button .cnt{font-size:12px;font-weight:700;color:#94A3B8;background:#E2E8F0;border-radius:20px;padding:2px 9px}
.blog-cat-list button.active .cnt{background:#164AC8;color:#FFFFFF}
.blog-cat-list a{display:flex;justify-content:space-between;align-items:center;text-decoration:none;padding:12px 4px;font-family:'Montserrat',sans-serif;font-size:14.5px;font-weight:600;color:#475569;transition:color 0.2s ease}
.blog-cat-list a:hover{color:#164AC8}
.blog-cat-list a .cnt{font-size:12px;font-weight:700;color:#94A3B8;background:#E2E8F0;border-radius:20px;padding:2px 9px}

.blog-detail-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:40px;width:100%}
.blog-detail-layout .blog-detail-container{min-width:0;max-width:none;margin:0}
.blog-detail-layout .blog-sidebar{min-width:0;max-width:none;width:auto;position:static}
@media (max-width:991px){
  .blog-detail-layout{grid-template-columns:1fr}
}

/* Featured post */
.blog-featured{display:grid;grid-template-columns:1fr 1fr;gap:35px;background:#FFFFFF;border:1px solid #E2E8F0;border-radius:14px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.05);margin-bottom:45px}
.blog-featured-img{width:100%;height:100%;min-height:280px;object-fit:cover}
.blog-featured-body{padding:35px 35px 35px 0;display:flex;flex-direction:column;justify-content:center}
.blog-tag{display:inline-block;background:#EFF6FF;color:#164AC8;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:5px 12px;border-radius:20px;margin-bottom:14px;width:fit-content}
.blog-featured-title{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:800;color:#0D2665;margin:0 0 14px 0;line-height:1.3}
.blog-featured-title a{color:inherit;text-decoration:none}
.blog-featured-title a:hover{color:#164AC8}
.blog-featured-desc{font-family:'Montserrat',sans-serif;font-size:15px;color:#475569;line-height:1.7;margin:0 0 18px 0}
.blog-meta{display:flex;align-items:center;gap:14px;font-family:'Montserrat',sans-serif;font-size:13px;color:#64748B}
.blog-meta .dot{width:4px;height:4px;border-radius:50%;background:#CBD5E1}

/* Grid */
.blog-section-title{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0D2665;margin:0 0 25px 0}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}

.blog-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:40px;flex-wrap:wrap}
.blog-pagination button{min-width:38px;height:38px;padding:0 10px;border:1px solid #E2E8F0;background:#FFFFFF;border-radius:8px;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;color:#475569;cursor:pointer;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.blog-pagination button:hover:not(:disabled){border-color:#164AC8;color:#164AC8}
.blog-pagination button.active{background:#164AC8;border-color:#164AC8;color:#FFFFFF}
.blog-pagination button:disabled{opacity:0.4;cursor:not-allowed}
.blog-card{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.04);transition:transform 0.3s ease,box-shadow 0.3s ease;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(13,38,101,0.1)}
.blog-card-img-wrap{position:relative;display:block;width:100%;padding-top:62%;overflow:hidden;background:#0B1D4B}
.blog-card-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.blog-card:hover .blog-card-img{transform:scale(1.06)}
.blog-card-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex-grow:1}
.blog-card-meta{font-family:'Montserrat',sans-serif;font-size:12.5px;color:#64748B;display:flex;align-items:center;gap:12px;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.3px;font-weight:700}
.blog-card-meta .date{color:#94A3B8}
.blog-card-meta .blog-tag{display:inline-block;background:none;color:#0E9F6E;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;padding:0;border-radius:0;margin:0;width:auto}
.blog-card-title{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:#0D2665;margin:0 0 10px 0;line-height:1.35}
.blog-card-title a{color:inherit;text-decoration:none}
.blog-card-title a:hover{color:#164AC8}
.blog-card-desc{font-family:'Montserrat',sans-serif;font-size:14px;color:#475569;line-height:1.6;margin:0 0 16px 0;flex-grow:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-link{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;color:#164AC8;text-decoration:none;width:fit-content}
.blog-card-link:hover{text-decoration:underline}

/* Newsletter */
.blog-newsletter{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:30px;text-align:center}
.blog-newsletter h4{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:#0D2665;margin:0 0 8px 0}
.blog-newsletter p{font-family:'Montserrat',sans-serif;font-size:13px;color:#64748B;margin:0 0 16px 0}
.blog-newsletter form{display:flex;flex-direction:column;gap:10px}
.blog-newsletter input[type=email]{padding:11px 14px;border:1px solid #CBD5E1;border-radius:8px;font-family:'Montserrat',sans-serif;font-size:13px}
.blog-newsletter button{background:#164AC8;color:#FFFFFF;border:none;padding:11px 14px;border-radius:8px;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:background 0.2s ease}
.blog-newsletter button:hover{background:#0D2665}

@media (max-width:992px){
  .blog-featured{grid-template-columns:1fr}
  .blog-featured-body{padding:30px}
}
@media (max-width:576px){
  .blog-hero h1{font-size:30px}
  .blog-tabs{justify-content:flex-start;gap:22px}
  .blog-grid{grid-template-columns:1fr}
}

/* Blog detail page */
.blog-detail-section{padding:60px 0 100px 0}
.blog-detail-container{max-width:860px}
.blog-breadcrumb{font-family:'Montserrat',sans-serif;font-size:13px;color:#64748B;margin-bottom:20px}
.blog-breadcrumb a{color:#164AC8;text-decoration:none}
.blog-breadcrumb a:hover{text-decoration:underline}
.blog-detail-title{font-family:'Montserrat',sans-serif;font-size:36px;font-weight:800;color:#0D2665;margin:14px 0 18px 0;line-height:1.3}
.blog-detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-family:'Montserrat',sans-serif;font-size:14px;color:#64748B;margin-bottom:30px;padding-bottom:25px;border-bottom:1px solid #E2E8F0}
.blog-detail-meta .dot{width:4px;height:4px;border-radius:50%;background:#CBD5E1}
.blog-detail-img{width:100%;max-height:460px;object-fit:cover;border-radius:14px;margin-bottom:35px;box-shadow:0 10px 30px rgba(0,0,0,0.08)}
.blog-detail-body{font-family:'Montserrat',sans-serif;font-size:16.5px;color:#334155;line-height:1.85}
.blog-detail-body h2{font-family:'Montserrat',sans-serif;font-size:26px;font-weight:700;color:#0D2665;margin:40px 0 18px 0}
.blog-detail-body h3{font-family:'Montserrat',sans-serif;font-size:20px;font-weight:700;color:#0D2665;margin:30px 0 14px 0}
.blog-detail-body p{margin:0 0 20px 0}
.blog-detail-body ul{margin:0 0 20px 0;padding-left:22px}
.blog-detail-body li{margin-bottom:10px}
.blog-detail-body a{color:#164AC8;font-weight:600;text-decoration:underline}
.blog-detail-body a:hover{color:#0D2665}
.blog-author-box{display:flex;align-items:center;gap:16px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:22px 26px;margin:45px 0}
.blog-author-avatar{width:54px;height:54px;border-radius:50%;background:#0D2665;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:18px;flex-shrink:0}
.blog-author-name{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;color:#0D2665}
.blog-author-role{font-family:'Montserrat',sans-serif;font-size:13px;color:#64748B}
.blog-video-wrap{position:relative;width:100%;padding-top:56.25%;margin:0 0 20px 0;border-radius:14px;overflow:hidden;background:#0B1D4B}
.blog-video-wrap iframe,.blog-video-wrap video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.blog-related{margin-top:60px}
.blog-related .blog-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.blog-related h3{font-family:'Montserrat',sans-serif;font-size:22px;font-weight:700;color:#0D2665;margin:0 0 22px 0}

@media (max-width:768px){
  .blog-detail-title{font-size:26px}
  .blog-detail-img{max-height:260px}
}