/* ===== Header v2 (ảnh 2 bên + title gradient) ===== */
.highlight-header-v2{
  display:flex; align-items:center; justify-content:center;
  padding:12px 0; position:relative; gap:12px; margin-bottom:24px; overflow:hidden;
}
.highlight-header-v2 .highlight-border{width:227px; height:auto; max-width:30%; object-fit:contain}
.highlight-header-v2 .highlight-title{
  font-size:32px; font-weight:800; margin:0; white-space:nowrap; font-family:Arial, sans-serif;
  background:linear-gradient(0deg,#257be5,#93c2fb); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (max-width: 575.98px){
  .highlight-header-v2 .highlight-title{font-size:24px}
}

/* ===== Hero (1 lớn + list) ===== */
.nb-hl-hero{--nb-gap:18px; --nb-bg:#0f1c24; --nb-text:#fff; --nb-sub:#b7c5d1; padding:8px; background:var(--nb-bg); border-radius:12px}
.nb-hl-hero *{box-sizing:border-box}
.nb-hl-grid{display:grid; grid-template-columns: 2fr 1fr; gap:var(--nb-gap); align-items:stretch}

/* Featured */
.nb-hl-feature{position:relative; border-radius:10px; overflow:hidden; background:#081018}
.nb-hl-feature .nb-hl-thumb{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(0.9)}
.nb-hl-feature::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.05) 55%)}
.nb-hl-feature .nb-hl-link{position:relative; display:block; height:100%}
.nb-hl-feature .nb-hl-overlay{position:absolute; left:0; right:0; bottom:0; padding:18px 20px; color:var(--nb-text); z-index:2}
.nb-hl-feature .nb-hl-play{display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.15); backdrop-filter:blur(2px); margin-bottom:8px}
.nb-hl-feature .nb-ico{display:block}
.nb-hl-feature .nb-hl-title{margin:6px 0 0; font-weight:800; font-size: clamp(20px, 2.3vw, 32px); line-height:1.15}
.nb-hl-feature .nb-hl-time{display:inline-block; margin-top:8px; font-size:13px; opacity:.9}

.nb-hl-feature.r-16x9{padding-top:56.25%}
.nb-hl-feature.r-4x3{padding-top:75%}
.nb-hl-feature.r-1x1{padding-top:100%}
.nb-hl-feature.r-16x9 .nb-hl-link,
.nb-hl-feature.r-4x3 .nb-hl-link,
.nb-hl-feature.r-1x1 .nb-hl-link{position:absolute; inset:0}

/* Side list */
.nb-hl-list{display:flex; flex-direction:column; gap:var(--nb-gap)}
.nb-hl-item{display:flex}
.nb-hl-item-link{display:grid; grid-template-columns: 140px 1fr; gap:12px; align-items:center; width:100%; background:#0b1620; border-radius:10px; padding:10px; text-decoration:none; color:var(--nb-text); transition:transform .12s ease, box-shadow .12s ease}
.nb-hl-item-link:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.25)}
.nb-hl-item-thumb{position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#09121a}
.nb-hl-item-thumb .nb-hl-img{position:absolute; inset:0; background-size:cover; background-position:center}
.nb-hl-badge{position:absolute; left:8px; bottom:8px; display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; background:rgba(0,0,0,.55); color:#fff; font-size:12px}
.nb-hl-badge .nb-ico{width:18px; height:18px}
.nb-hl-badge em{font-style:normal; opacity:.95}
.nb-hl-item-title{font-size:15px; line-height:1.25; color:var(--nb-text); margin:0}
.nb-hl-item-title:hover{text-decoration:underline}

@media (max-width: 991.98px){
  .nb-hl-grid{grid-template-columns:1fr}
  .nb-hl-item-link{grid-template-columns: 120px 1fr}
  .nb-hl-feature .nb-hl-play{width:48px;height:48px}
}

/* ===== Grid (Reel) ===== */
.nb-hl-reel *{box-sizing:border-box}
.nb-row{display:grid; gap:12px}
.nb-row[data-cols]{grid-template-columns: repeat(2, 1fr)}
@media (min-width:576px){ .nb-row[data-cols]{grid-template-columns: repeat(var(--sm,2),1fr)} }
@media (min-width:768px){ .nb-row[data-cols]{grid-template-columns: repeat(var(--md,3),1fr)} }
@media (min-width:992px){ .nb-row[data-cols]{grid-template-columns: repeat(var(--lg,4),1fr)} }
.nb-row[data-cols]{ --sm:2; --md:3; --lg:4; }
.nb-row[data-cols="1-2-3"]{ --sm:1; --md:2; --lg:3 }
.nb-row[data-cols="2-3-4"]{ --sm:2; --md:3; --lg:4 }
.nb-row[data-cols="2-3-5"]{ --sm:2; --md:3; --lg:5 }

.nb-col{display:flex}
.highlightReel-card-item{border-radius:6px; box-shadow:0 4px 8px rgba(0,0,0,0.08); background:#fff; overflow:hidden; transition:transform 0.3s ease; height:100%}
.highlightReel-card-item:hover{transform:translateY(-4px)}
.highlightReel-card-item img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:all .5s ease}
.highlightReel-card-body{padding:12px}
.highlightReel-card-meta{font-size:13px; color:#8c8c8c; margin-bottom:4px}
.highlightReel-card-title{color:#00224d; font-size:14px; font-weight:600; letter-spacing:.2px; line-height:20px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; min-height:40px}

/* Ép dùng font có sẵn trong theme thay vì Arial */
.nb-hl-hero,
.nb-hl-hero h3,
.nb-hl-hero h4,
.nb-hl-hero .nb-hl-title,
.nb-hl-hero .nb-hl-item-title,
.nb-hl-reel,
.nb-hl-reel .highlightReel-card-title,
.highlight-header-v2 .highlight-title {
  font-family: inherit !important; /* kế thừa font từ theme */
  line-height: 1.3;
}

/* Nếu theme bạn dùng Bootscore (bootstrap 5) → có biến font */
:root {
  --nb-font-main: var(--bs-body-font-family, inherit);
}
.nb-hl-hero, .nb-hl-reel, .highlight-header-v2 {
  font-family: var(--nb-font-main) !important;
}

.highlight-header-v2 .highlight-title {
  font-family: inherit !important; /* lấy đúng font theme */
  font-weight: 800;
  font-size: 28px;
}

.nb-hl-item-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}