/* ==========================================================================
   03. HERO BANNER COMPONENT — CRIMSON PRESTIGE & WARM IVORY
   Editorial 45% / 55% split, Deep Warm Stone & TVSI Crimson hierarchy
   ========================================================================== */

.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  max-height: 920px;
  overflow: hidden;
  background-color: var(--color-paper);
  display: flex;
  align-items: center;
  margin-top: 0; /* Header is inside banner */
  border-bottom: 1px solid var(--color-rule);
}

/* Layer 1: Full-Width Natural Banner Image Layer */
.hero-photo-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-people-pic {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-people-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  user-select: none;
  animation: heroBgCinematicZoom 2.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform;
}

@keyframes heroBgCinematicZoom {
  0% {
    transform: scale(1.08) translate3d(0, 0, 0);
    filter: brightness(0.96);
  }
  100% {
    transform: scale(1) translate3d(0, 0, 0);
    filter: brightness(1);
  }
}

/* Layer 2: Transparent (No blur, no left-side gradient fade) */
.hero-gradient-overlay {
  display: none;
}

/* Layer 3: Left Content Block (~45% Width) */
.hero-content-block {
  position: absolute;
  left: clamp(4vw, 5.5vw, 7vw);
  top: 45%; /* Shifted upwards as requested */
  transform: translateY(-50%);
  max-width: 680px;
  width: calc(100% - 10vw);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Luminous atmospheric back-glow to prevent text from drowning in the banner */
.hero-content-block::before {
  content: '';
  position: absolute;
  inset: -45px -55px -45px -55px;
  background: radial-gradient(
    ellipse 90% 85% at 30% 45%,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.50) 45%,
    rgba(255, 255, 255, 0.18) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: blur(32px);
  z-index: -1;
  pointer-events: none;
  border-radius: 48px;
}

/* Entrance Animations Keyframes */
@keyframes heroElementSlideUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroLinePerspective {
  0% {
    opacity: 0;
    transform: translate3d(0, 36px, 0) rotateX(-14deg);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
    filter: blur(0);
  }
}

@keyframes heroBadgePop {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.92);
  }
  60% {
    transform: translate3d(0, -2px, 0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes heroCtaSpring {
  0% {
    opacity: 0;
    transform: translate3d(0, 25px, 0) scale(0.9);
  }
  60% {
    transform: translate3d(0, -3px, 0) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes ctaGlowPulse {
  0%, 100% {
    box-shadow: 0 8px 26px rgba(200, 30, 37, 0.42), 0 2px 6px rgba(0, 0, 0, 0.12);
  }
  50% {
    box-shadow: 0 12px 34px rgba(200, 30, 37, 0.62), 0 0 20px rgba(222, 32, 39, 0.35);
  }
}

@keyframes heroPillSlide {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroSignatureInkReveal {
  0% {
    opacity: 0;
    transform: translate3d(15px, -10px, 0) rotate(-2deg) scale(0.94);
    filter: blur(4px);
  }
  100% {
    opacity: 0.95;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: blur(0);
  }
}

/* 1. Kicker / Eyebrow: Pure text without box or red dot */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  padding: 0;
  box-shadow: none;
  animation: heroElementSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.hero-eyebrow-dash {
  display: none;
}

.hero-eyebrow-text {
  font-family: 'Nunito', var(--font-cosmica);
  font-size: 17px;
  font-weight: 800;
  /*color: #C81E25;*/
  color: #12100E;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 0;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.95);
}

/* 2. Headline: Bold display, 20 NĂM KẾT NỐI red, LAN TỎA GIÁ TRỊ black */
.hero-headline {
  font-family: 'Nunito', var(--font-cosmica);
  font-size: clamp(50px, 4.8vw, 64px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
}

.headline-line {
  display: block;
  white-space: nowrap;
}

.headline-line:first-child {
  color: #D91A21; /* TVSI Crimson Red */
  text-shadow: 0 2px 20px rgba(255, 255, 255, 0.95), 0 0 40px rgba(255, 255, 255, 0.9);
  animation: heroLinePerspective 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

.headline-line:last-child {
  color: #12100E; /* LAN TỎA GIÁ TRỊ: Carbon Black as requested */
  text-shadow: 0 2px 20px rgba(255, 255, 255, 0.95), 0 0 40px rgba(255, 255, 255, 0.9);
  animation: heroLinePerspective 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}

/* 3. Description: Cùng 1 dòng (single line, no orphan text) */
.hero-description {
  font-family: 'Nunito', var(--font-cosmica);
  font-size: 20px;
  font-weight: 700;
  color: #1A1715;
  line-height: 1.5;
  max-width: 680px;
  white-space: nowrap; /* Cùng 1 dòng */
  margin-bottom: 16px;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.95), 0 0 24px rgba(255, 255, 255, 0.9);
  animation: heroElementSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.44s both;
}

/* 4. CTA Button: TVSI Crimson Red Action Button */
.hero-cta-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  animation: heroCtaSpring 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.64s both;
}

.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(135deg, #DE2027 0%, #A6161C 100%);
  color: #FFFFFF !important;
  font-family: 'Nunito', var(--font-cosmica);
  font-size: 19px;
  font-weight: 800;
  border-radius: 999px;
  min-width: 220px;
  width: auto;
  height: 56px;
  padding: 0 40px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 26px rgba(200, 30, 37, 0.42), 0 2px 6px rgba(0, 0, 0, 0.12);
  letter-spacing: 0.02em;
  transition: all 0.3s var(--ease-spring);
  outline: none;
  animation: ctaGlowPulse 3s ease-in-out 1.8s infinite;
}

.hero-cta-btn:hover {
  background: linear-gradient(135deg, #F02830 0%, #BA1820 100%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px rgba(200, 30, 37, 0.52), 0 4px 10px rgba(0, 0, 0, 0.16);
}

.hero-cta-btn:active {
  transform: translateY(0);
}

.hero-cta-btn .cta-arrow {
  font-size: 1.15em;
  transition: transform 0.25s var(--ease-spring);
  display: inline-block;
}

.hero-cta-btn:hover .cta-arrow {
  transform: translateX(4px);
}

/* 5. Value Badges (3 items below CTA) */
.hero-value-pills {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  margin-top: 32px;
  flex-wrap: wrap;
}

.hero-value-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', var(--font-cosmica);
  font-size: 16px;
  font-weight: 700;
  color: #1A1715;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 8px 20px 8px 10px;
  border-radius: 999px;
  border: 1.5px solid #FFFFFF;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all var(--transition-fast);
}

.hero-value-pill:nth-child(1) {
  animation: heroPillSlide 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.74s both;
}

.hero-value-pill:nth-child(2) {
  animation: heroPillSlide 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.84s both;
}

.hero-value-pill:nth-child(3) {
  animation: heroPillSlide 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.94s both;
}

.hero-value-pill:hover {
  transform: translateY(-2px);
  background: #FFFFFF;
  color: var(--color-accent);
  box-shadow: 0 10px 26px rgba(200, 30, 37, 0.2);
  border-color: rgba(200, 30, 37, 0.3);
}

.value-pill-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  background: #FFF0F1;
  flex-shrink: 0;
}

/* Layer 4: Campaign Signature (Top Right in Mockup) */
.hero-signature-wrap {
  position: absolute;
  top: clamp(82px, 9.5vh, 105px);
  right: clamp(48px, 6vw, 110px);
  width: clamp(170px, 13vw, 230px);
  max-width: 240px;
  z-index: 5;
  pointer-events: none;
  animation: heroSignatureInkReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
}

@media (max-width: 1400px) {
  .hero-signature-wrap {
    top: 84px;
    right: 60px;
    width: 190px;
  }
}

@media (max-width: 1200px) {
  .hero-signature-wrap {
    top: 80px;
    right: 45px;
    width: 165px;
  }
}

@media (max-width: 991px) {
  .hero-signature-wrap {
    top: 76px;
    right: 32px;
    width: 140px;
  }
}

.hero-signature-img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.95;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 2px 8px rgba(28, 25, 23, 0.08));
}

/* Layer 4b: Campaign Period Badge (Above CTA) */
.hero-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(200, 30, 37, 0.2);
  box-shadow: 0 4px 14px rgba(28, 25, 23, 0.08);
  font-family: 'Nunito', var(--font-cosmica);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 22px;
  width: fit-content;
  user-select: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: heroBadgePop 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.54s both;
}

.hero-date-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(200, 30, 37, 0.16);
}

.hero-date-badge .hero-date-icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

.hero-date-badge strong {
  font-weight: 800;
  color: #A6161C;
}

/* ===== Responsive: Tablet ===== */
@media (max-width: 1024px) {
  .hero-section {
    min-height: 580px;
  }

  .hero-photo-wrap {
    width: 100%;
    inset: 0;
  }

  .hero-content-block {
    left: 4vw;
    max-width: 420px;
  }

  .hero-headline {
    font-size: 44px;
  }

  .hero-description {
    font-size: 14.5px;
    margin-bottom: 24px;
  }
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 768px) {
  .hero-section {
    height: auto;
    min-height: auto;
    max-height: none;
    flex-direction: column;
    align-items: stretch;
    padding-top: 76px;
    margin-top: 0;
  }

  .hero-photo-wrap {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1672 / 941;
    right: auto;
    bottom: auto;
    order: 2;
  }

  .hero-people-pic {
    width: 100%;
    height: 100%;
    display: block;
  }

  .hero-people-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }

  .hero-gradient-overlay {
    display: none;
  }

  .hero-content-block {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    max-width: 100%;
    width: 100%;
    padding: 36px 20px 24px;
    order: 1;
    animation: none;
  }

  .hero-headline {
    font-size: 32px;
  }

  .headline-line {
    white-space: normal;
  }

  .hero-description {
    max-width: 100%;
    white-space: normal;
    font-size: 15px;
  }

  .hero-cta-btn {
    width: 100%;
    max-width: 280px;
  }

  .hero-signature-wrap {
    display: none;
  }
}