@font-face { font-family: "SVN-Gilroy"; src: url("../fonts/SVN-GilroyLight.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "SVN-Gilroy"; src: url("../fonts/SVN-GilroyRegular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "SVN-Gilroy"; src: url("../fonts/SVN-GilroyMedium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "SVN-Gilroy"; src: url("../fonts/SVN-GilroySemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "SVN-Gilroy"; src: url("../fonts/SVN-GilroyBold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "SVN-Gilroy"; src: url("../fonts/SVN-GilroyXBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "SVN-Gilroy"; src: url("../fonts/SVN-GilroyBlack.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --nhbf-red: #c00000;
  --nhbf-red-text: #980d11;
  --nhbf-red-strong: #bd000b;
  --nhbf-maroon: #77000c;
  --nhbf-cream: #fff9e8;
  --nhbf-cream-line: #eee3c9;
  --nhbf-text: #474747;
  --nhbf-grad-btn: linear-gradient(180deg, #c00000 0%, #b00101 23%, #940304 72%, #8a0406 100%);
  --nhbf-grad-deep: linear-gradient(180deg, #c00000 0%, #960203 43%, #7a0305 79%, #700406 100%);
}

.nhbf-body {
  margin: 0;
  background: #7d0207 url("../images/bg-page-pc.jpg") center top / max(1920px, 100%) auto no-repeat;
  font-family: "SVN-Gilroy", Arial, sans-serif;
  color: var(--nhbf-text);
  -webkit-font-smoothing: antialiased;
}
.nhbf { position: relative; overflow: hidden; }
.nhbf *, .nhbf *::before, .nhbf *::after { box-sizing: border-box; }
/* Reset bằng :where() (specificity thấp) để không đè margin của component,
 * nhưng vẫn trung hoà style chung của Flatsome cho heading/list. */
:where(.nhbf) :is(h1, h2, h3, h4, p, ul, li) { margin: 0; padding: 0; color: inherit; letter-spacing: normal; font-family: inherit; }
:where(.nhbf) ul { list-style: none; }
:where(.nhbf) img { max-width: 100%; display: block; }
:where(.nhbf) a { text-decoration: none; }
html { scroll-behavior: smooth; }

.nhbf .nhbf-mb, .nhbf .nhbf-mb-br { display: none; }

/* ---------- Thành phần dùng chung ---------- */
.nhbf-heading {
  color: #fff; font-weight: 800; font-size: 39px; line-height: 1.05;
  text-align: center; text-transform: uppercase;
}
.nhbf-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 51px; padding: 0 30px; border: 2px solid #ff0d0d; border-radius: 999px;
  background: var(--nhbf-grad-btn); color: #fff; cursor: pointer;
  font: 800 20.9px/1 "SVN-Gilroy", Arial, sans-serif; text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(77, 0, 6, .35); transition: transform .15s, filter .15s;
}
.nhbf-btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.nhbf-btn:disabled { opacity: .65; cursor: wait; transform: none; }
.nhbf-btn--sm { min-height: 44px; padding: 0 26px; font-size: 16px; }

.nhbf-sparkle { position: absolute; pointer-events: none; z-index: 0; }
.nhbf-watermark {
  position: absolute; z-index: 0; pointer-events: none; white-space: nowrap;
  font-weight: 800; color: rgba(255, 255, 255, .1); line-height: 1;
}

/* ---------- Hero ---------- */
.nhbf-hero { position: relative; padding: 117px 16px 0; }
.nhbf-hero__sparkle { display: none; }
.nhbf-hero__logo { width: 200px; height: auto; margin: 0 auto -6px; position: relative; z-index: 2; }
.nhbf-hero__stage {
  position: relative; width: min(1319px, 100%); margin: 0 auto;
  aspect-ratio: 1319 / 632; container-type: inline-size;
}
.nhbf-hero__stage > * { --u: calc(100cqw / 1319); position: absolute; }

.nhbf-hero__card {
  left: 0; top: calc(var(--u) * 68); width: 100%; height: calc(var(--u) * 551);
  border-radius: calc(var(--u) * 30);
  background: linear-gradient(180deg, rgba(101,3,4,0) -21%, rgba(115,3,4,.39) 23%, rgba(127,3,5,.72) 64%, rgba(135,3,5,.92) 97%, #8a0406 116%);
}
/* Figma đặt lớp glow ở blend SCREEN; thiếu blend sẽ lộ viền tối của ảnh. */
.nhbf-hero__glow { left: calc(var(--u) * 710); top: calc(var(--u) * 17); width: calc(var(--u) * 566); mix-blend-mode: screen; }
.nhbf-hero__art  { left: calc(var(--u) * 605); top: calc(var(--u) * 84); width: calc(var(--u) * 713.5); }
.nhbf-hero__gift { left: calc(var(--u) * 655); top: calc(var(--u) * 411); width: calc(var(--u) * 351.5); }

.nhbf-hero__calendar {
  left: calc(var(--u) * 17); top: 0; width: calc(var(--u) * 251.5); z-index: 2;
  container-type: inline-size;
}
.nhbf-hero__calendar-text { position: absolute; inset: 0; color: #fff; font-weight: 800; }
.nhbf-hero__calendar-text > * {
  position: absolute; line-height: 1; white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-22deg);
}
/* Tâm text theo Figma, tính trên khung lịch 251.5 x 209.5. */
.nhbf-hero__calendar-text small { left: 41%; top: 39%; font-size: 9cqw; }
.nhbf-hero__calendar-text b { left: 59%; top: 54.9%; font-size: 11.6cqw; }

/* Không đặt z-index: stacking context sẽ cô lập blend overlay của ô mô tả. */
.nhbf-hero__content { inset: 0; }
.nhbf-hero__content > * { position: absolute; }
.nhbf-hero__pill {
  left: calc(var(--u) * 256); top: calc(var(--u) * 135);
  width: calc(var(--u) * 197); height: calc(var(--u) * 54);
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 999px; color: var(--nhbf-red-strong);
  font-weight: 800; font-size: calc(var(--u) * 36.8);
}
.nhbf-hero__title {
  left: calc(var(--u) * 48); top: calc(var(--u) * 194); width: calc(var(--u) * 606);
  color: #fff; font-weight: 900; text-align: center; white-space: nowrap; letter-spacing: -0.01em;
  text-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 10) rgba(60, 0, 0, .35);
}
.nhbf-hero__title span { display: block; font-size: calc(var(--u) * 48.6); line-height: calc(var(--u) * 60); }
.nhbf-hero__title .nhbf-hero__title-big { font-size: calc(var(--u) * 58.4); line-height: calc(var(--u) * 64); }
.nhbf-hero__rounds {
  left: calc(var(--u) * 48); top: calc(var(--u) * 334); width: calc(var(--u) * 606);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column;
  gap: calc(var(--u) * 9);
}
.nhbf-hero__rounds li {
  border: 1px solid #fff; border-radius: 999px; color: #fff; text-align: center; white-space: nowrap;
  font-weight: 800; font-size: calc(var(--u) * 12.6); line-height: calc(var(--u) * 22); letter-spacing: -0.01em;
}
/* Đợt ngoài thời gian hiện tại */
.nhbf-hero__rounds li.is-inactive { opacity: .4; }
.nhbf-hero__desc {
  left: calc(var(--u) * 90); top: calc(var(--u) * 410); width: calc(var(--u) * 530); height: calc(var(--u) * 162);
  border-radius: calc(var(--u) * 34); padding: calc(var(--u) * 14) calc(var(--u) * 40) 0;
}
.nhbf-hero__desc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255, 255, 255, .55); mix-blend-mode: overlay;
}
.nhbf-hero__desc p {
  position: relative;
  color: #fff; text-align: center; font-weight: 600; font-style: italic;
  font-size: calc(var(--u) * 24.1); line-height: calc(var(--u) * 29);
}
.nhbf-hero__cta {
  left: calc(var(--u) * 200); top: calc(var(--u) * 537);
  width: calc(var(--u) * 315); height: calc(var(--u) * 56);
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 999px; color: var(--nhbf-red-strong);
  font-weight: 800; font-size: calc(var(--u) * 27);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(70, 0, 0, .35); transition: transform .15s;
}
.nhbf-hero__cta:hover { transform: translateY(-2px); color: var(--nhbf-red-strong); }

/* ---------- Mobile (theo khung MB 420px) ---------- */
@media (max-width: 767px) {
  .nhbf-body {
    background: linear-gradient(180deg, #6f0306 0%, #c40409 3%, #6c0307 10%, #750208 25%, #ad030a 40%, #85020b 55%, #87020b 65%, #73040a 78%, #93050b 88%, #540308 95%) #7d0207;
  }
  .nhbf .nhbf-pc { display: none; }
  .nhbf .nhbf-mb { display: block; }
  .nhbf .nhbf-mb-br { display: inline; }
  .nhbf-heading { font-size: 23px; }
  .nhbf-btn { min-height: 44px; font-size: 17px; }
  .nhbf-btn--sm { min-height: 34px; padding: 0 18px; font-size: 11px; }

  .nhbf-hero { padding: 78px 17px 0; }
  .nhbf-hero__sparkle { display: block; width: 120px; right: 5px; top: 23px; }
  .nhbf-hero__logo { width: 110px; margin-bottom: 24px; }
  .nhbf-hero__stage { aspect-ratio: 386 / 815; width: 100%; max-width: 420px; }
  .nhbf-hero__stage > * { --u: calc(100cqw / 386); }

  .nhbf-hero__card { top: 0; height: calc(var(--u) * 801); border-radius: calc(var(--u) * 22); }
  .nhbf-hero__glow { left: calc(var(--u) * -4); top: calc(var(--u) * 389); width: calc(var(--u) * 387); }
  .nhbf-hero__art  { left: calc(var(--u) * -20); top: calc(var(--u) * 482); width: calc(var(--u) * 404.5); }
  .nhbf-hero__calendar { left: calc(var(--u) * 18); top: calc(var(--u) * 18); width: calc(var(--u) * 117); }

  .nhbf-hero__pill { left: calc(var(--u) * 138); top: calc(var(--u) * 89); width: calc(var(--u) * 108); height: calc(var(--u) * 29); font-size: calc(var(--u) * 20.2); }
  .nhbf-hero__title { left: 0; top: calc(var(--u) * 124); width: 100%; }
  .nhbf-hero__title span { font-size: calc(var(--u) * 26.8); line-height: calc(var(--u) * 33); }
  .nhbf-hero__title .nhbf-hero__title-big { font-size: calc(var(--u) * 32.1); line-height: calc(var(--u) * 38); }
  .nhbf-hero__rounds {
    left: calc(var(--u) * 63); top: calc(var(--u) * 207); width: calc(var(--u) * 258);
    grid-template-columns: 1fr; grid-auto-flow: row; gap: calc(var(--u) * 7);
  }
  .nhbf-hero__rounds li { font-size: calc(var(--u) * 11.4); line-height: calc(var(--u) * 22); }
  .nhbf-hero__desc { left: calc(var(--u) * 23); top: calc(var(--u) * 334); width: calc(var(--u) * 338); height: calc(var(--u) * 103); border-radius: calc(var(--u) * 20); padding: calc(var(--u) * 10) calc(var(--u) * 26) 0; }
  .nhbf-hero__desc p { font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 18); }
  .nhbf-hero__cta { left: calc(var(--u) * 94); top: calc(var(--u) * 415); width: calc(var(--u) * 200); height: calc(var(--u) * 35); font-size: calc(var(--u) * 17); }
}