/* ====== BLOG HERO ====== */
/* background-size:100% auto (khong dung "cover") — khoa CHIEU RONG anh dung
   bang 100% box, chieu cao tu co giai theo dung ty le goc. "cover" se crop
   BEN TRAI/PHAI cua anh (dung noi co hinh minh hoa "XUONG IN") moi khi ty le
   box khac ty le anh (vd man hinh hep hon, box thap tuong doi so voi rong) —
   doi sang 100% auto de khong bao gio mat canh trai/phai du man hinh nao. */
/* Anh hien nguyen ven, khong bi phu mo. background-color #eaeffa (khop mau
   nen #main_content cua site) chi lam nen du phong o phan KHONG co anh phu
   toi (anh chi chiem 1 phan nho, neo duoi). LUU Y: dung "background-color"
   rieng, KHONG dung shorthand "background:" vi no se reset mat ca
   background-image da khai bao truoc do. */
.nb-hero{background-color:#eaeffa;background-image:url(../images/bg-header-xuong-in-viet-dung.png);background-size:100% auto;background-position:center bottom;background-repeat:no-repeat}
/* Padding doc tang/giam theo % chieu rong man hinh (9vw ~ chuan tu ty le anh
   nen 2103x471 = 22.4% chieu cao/rong) de crop anh nen luon can doi qua moi
   kich thuoc, thay vi 1 con so co dinh chi dung o 1 do rong man hinh. Cham
   115px dung gia tri da tune cho desktop (~1278px tro len), khong tang them. */
/* nb-hero__inner la flex-column: breadcrumb dung yen tren cung (flex:0 0 auto),
   nb-hero__row nhan flex:1 chiem het khoang con lai va tu canh giua noi dung
   ben trong theo chieu doc (align-items:center tren truc chinh la hang ngang
   nen chinh la truc doc/cross-axis). */
/* Padding-top bo het (breadcrumb nam sat mep tren cua .nb-hero), chi giu
   padding-bottom (clamp) de tao khoang trong phia duoi khoi text. */
.nb-hero__inner{max-width:1280px;margin:0 auto;display:flex;flex-direction:column}
.nb-hero__breadcrumb{flex:0 0 auto;padding:16px 0;}
.nb-hero__row{flex:1;display:flex;align-items:center;gap:32px; padding: clamp(6px, 7vw, 170px) 0}
.nb-hero__text{flex:1;max-width:55%;margin:0 auto;text-align: center;}
.nb-hero__text h1{font-size:2rem;font-weight:700;margin:0 0 12px; letter-spacing: -0.029em;}
.nb-hero__text p{font-size:0.875rem;color:#4a4f63;margin:0}

/* ====== BLOG GRID ====== */
.nb-showcase{max-width:1280px;margin:0 auto;}
/* Grid + card — clone y het .author-posts-grid/.author-post-card (trang tac
   gia), giu prefix rieng .nb-* theo dung nguyen tac moi module doc lap. */
.nb-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:16px;margin-bottom:40px}
@media(min-width:576px){.nb-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.nb-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:992px){.nb-grid{grid-template-columns:repeat(4,1fr)}}

/* ====== DANH MUC (chi trang cap 1 ID=30) — icon tron + tieu de + so bai viet,
   icon lay tu du lieu Danh muc cap 2 (icon/image/svg + mau, cung 1 he thong
   voi Icon Grid cua Mega Menu). Responsive: >=992 4 cot/16px, 768-991 3 cot/
   12px, <768 (gom ca <=576) 2 cot/12px. ====== */
.nb-catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:40px}
@media(min-width:768px){.nb-catgrid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media(min-width:992px){.nb-catgrid{grid-template-columns:repeat(4,1fr);gap:16px}}
.nb-catgrid__item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 16px;border-radius:12px;background:#fff;border:1px solid #D8E2E6;text-decoration:none;color:inherit;transition:box-shadow .2s,transform .2s}
.nb-catgrid__item:hover{box-shadow:0 10px 24px rgba(16,24,40,.1);transform:translateY(-2px);text-decoration:none;color:inherit}
.nb-catgrid__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;overflow:hidden;font-size:2.25rem;color:var(--ivd-brand,#1d52d7);margin-bottom: 12px}
.nb-catgrid__icon img{width:100%;height:100%;object-fit:cover}
.nb-catgrid__icon svg{width:36px;height:36px}
.nb-catgrid__title{font-size:0.875rem;font-weight:500;margin:0}
.nb-catgrid__count{font-size:0.875rem;color:#4a4f63;margin:0}
/* .nb-catgrid__info chi ton tai trong markup cua .nb-catgrid--28 (news.php,
   nhanh $_is_l1_28) — .nb-catgrid goc (news_blog.php, ID=30) khong co the
   nay nen khong bi anh huong. Mac dinh (<576px) giong het bo cuc cu: cot doc
   can giua, y het nhu title/count truoc day nam truc tiep trong .nb-catgrid__item. */
.nb-catgrid__info{display:flex;flex-direction:column;align-items:center;gap:2px}

/* ====== .nb-catgrid--28 — CHI danh cho Danh muc cap 1 ID=28 (news.php).
   Tu 576px tro len: 2 cot trong 1 the — trai la thong tin (title+count),
   phai la icon. Duoi 576px giu nguyen bo cuc cu (icon tren, info duoi, can
   giua) vi khong co media query nao ap dung. KHONG dung selector bare
   .nb-catgrid/.nb-catgrid__item o day de tranh anh huong danh muc 30. */
@media(min-width:576px){
.nb-catgrid--28 .nb-catgrid__item{flex-direction:row-reverse;justify-content:space-between;text-align:left}
.nb-catgrid--28 .nb-catgrid__info{align-items:flex-start;text-align:left}
.nb-catgrid--28 .nb-catgrid__icon{margin-bottom:0}
}

/* ====== CARD ====== */
.nb-card{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(rgba(255,255,255,.2) 0%,#fff 100%);border:1px solid #D8E2E6;padding:12px;transition:box-shadow .2s,transform .2s}
.nb-card:hover{box-shadow:0 10px 24px rgba(16,24,40,.1);transform:translateY(-2px)}
.nb-card__link{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.nb-card__link:hover{text-decoration:none;color:inherit}
.nb-card__img{position:relative;width:100%}
.nb-card__img::before{content:'';display:block;padding-top:54.375%}
.nb-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
.nb-card__footer{padding-top:16px}
.nb-card__text{min-width:0}
.nb-card__title{margin:0;font-size:0.875rem;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nb-card__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:8px}
.nb-card__arrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--ivd-brand,#1d52d7);background:#eef3fd;font-size:1rem;transition:background .2s,color .2s}
.nb-card:hover .nb-card__arrow{background:var(--ivd-brand,#1d52d7);color:#fff}
.nb-card__meta{display:flex;align-items:center;margin:0;font-size:0.75rem;color:#657384;white-space:nowrap;overflow:hidden;min-width:0;flex:1 1 auto}
.nb-card__time{flex:0 0 auto}
.nb-card__author{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;color:#657384;font-weight:500;text-decoration:none}
.nb-card__author:hover{color:#1250DC}
.nb-card__author::before{content:'•';display:inline-block;margin:0 6px;color:#cbd5e1}
.nb-empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:#6b7280;font-size:15px}

/* ====== SKELETON SHIMMER ====== */
@keyframes nbShimmer{to{background-position-x:-200%}}
.nb-skeleton{border-radius:12px;overflow:hidden;border:1px solid #D8E2E6;background:#fff;padding:12px}
.nb-skeleton__img{width:100%;aspect-ratio:1/0.5644;border-radius:8px;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:nbShimmer 1.5s linear infinite}
.nb-skeleton__body{padding-top:16px}
.nb-skeleton__line{height:13px;border-radius:3px;margin-bottom:10px;background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:nbShimmer 1.5s linear infinite}

/* ====== LOAD MORE ====== */
.nb-load-more{text-align:center;padding:8px 0 48px}
.nb-load-more--hidden{display:none}
.nb-load-more__btn{padding: 16px 48px; color: #fff; border: none; border-radius: 50px; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: opacity .2s;}
.nb-load-more__end { color: #005EDB; font-size: 0.875rem; margin: 0; display: none; background: #c1d0f6 !important; padding: 16px 48px; border-radius: 50px; font-weight: 500; width: fit-content; margin: 0 auto; }

/* ====== RESPONSIVE ====== */
@media(max-width:1200px){
.nb-showcase{margin-top:24px}
}
@media(max-width:767px){
.nb-hero__row{flex-direction:column;gap:16px}
.nb-hero__text h1{font-size:24px}
.nb-grid {gap: 12px}
}
@media(max-width:991px){
.nb-hero__text{max-width:70%}
}
@media(max-width:576px){
.nb-hero{background-image:url(../images/bg-header-xuong-in-viet-dung-mobile.png)}
.nb-hero__row{align-items:flex-start;padding:16px 0 clamp(6px, 14vw, 170px) 0}
.nb-hero__text{text-align:left;margin:0;max-width:80%}
}

/* ====== BÀI VIẾT XEM NHIỀU NHẤT — bento 1 anh lon + 4 anh nho, clone y het
   .kb-grid/.kb-item (Kien thuc in an, trang chu, home.css) ca style lan cach
   responsive, giu prefix rieng .nb-pop-* vi home.css chi nap o trang chu. ====== */
.nb-section-heading{font-size:1.5rem;font-weight:600;margin:0 0 24px; letter-spacing: -0.029em;}
.nb-pop-grid{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-areas:"big item2 item3" "big item4 item5";gap:16px;margin-bottom:40px}
.nb-pop-item-0{grid-area:big}
.nb-pop-item-1{grid-area:item2}
.nb-pop-item-2{grid-area:item3}
.nb-pop-item-3{grid-area:item4}
.nb-pop-item-4{grid-area:item5}

.nb-pop-item{position:relative;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:linear-gradient(rgba(255,255,255,.2) 0%,#fff 100%);border:1px solid #D8E2E6;padding:12px;text-decoration:none;transition:box-shadow .2s,transform .2s}
.nb-pop-item:hover{box-shadow:0 10px 24px rgba(16,24,40,.1);transform:translateY(-2px);text-decoration:none}
.nb-pop-item__img{position:relative;width:100%;flex:1 1 auto;min-height:0}
.nb-pop-item__img::before{content:'';display:block;padding-top:54.375%}
@media(min-width:992px){.nb-pop-item-0 .nb-pop-item__img::before{content:none}}
.nb-pop-item__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
.nb-pop-item__footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:16px}
.nb-pop-item__text{min-width:0}
.nb-pop-item__title{margin:0;font-size:0.875rem;font-weight:600;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.nb-pop-item-0 .nb-pop-item__title{-webkit-line-clamp:2;line-clamp:2;font-size:1rem}
.nb-pop-item__desc{margin:6px 0 0;font-size:0.875rem;line-height:1.5;color:#4a4f63;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nb-pop-item__arrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--ivd-brand,#1d52d7);background:#eef3fd;font-size:1rem;transition:background .2s,color .2s}
.nb-pop-item:hover .nb-pop-item__arrow{background:var(--ivd-brand,#1d52d7);color:#fff}

.nb-pop-small-wrap,.nb-pop-small-track{display:contents}
.nb-pop-dots{display:none}

@media(max-width:991px){
.nb-pop-grid{grid-template-columns:1fr 1fr;grid-template-areas:"big big" "item2 item3" "item4 item5"}
}
@media(max-width:575px){
.nb-pop-grid{display:block;gap:0}
.nb-pop-item-0{margin-bottom:12px}
.nb-pop-small-wrap{display:block;overflow:hidden;border-radius:12px}
.nb-pop-small-track{display:flex;transition:transform .4s cubic-bezier(.25,.46,.45,.94);will-change:transform}
.nb-pop-small-track .nb-pop-item{flex:0 0 100%;width:100%}
.nb-pop-dots{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.nb-pop-dot{width:6px;height:6px;padding:0;border:none;border-radius:50%;background:#cfe0fa;cursor:pointer;transition:background .2s,transform .2s}
.nb-pop-dot--active{background:var(--ivd-brand,#1d52d7);transform:scale(1.2);width:16px;border-radius:50px}
}
@media(max-width:767px){
.nb-section-heading {font-size: 1.25rem}
.nb-pop-grid {gap: 12px}
}