/* Front page styles (Bootstrap 5.3 based) */

/* Navbar behavior */
.navbar-scrolled {
  background-color: rgb(var(--vnpost-blue-rgb) / 0.95);
  transition: background-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.navbar-scrolled .nav-link, .navbar-scrolled .navbar-brand {
  color: #fff !important;
}

/* Hero / carousel */
.hero-carousel .carousel-item {
  height: 75vh;
  min-height: 420px;
  background-size: cover;
  background-position: center center;
}

.hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
  height: 100%;
  color: #fff;
}

.hero-content {
  max-width: 900px;
}

.bank-rates table th, .bank-rates table td {
  vertical-align: middle;
}

/* Products */
.product-card .price { font-weight: 600; }
.product-card .sale { color: #dc3545; font-weight: 700; }

/* News */
.news-item img { height:180px; object-fit:cover; width:100%; }

/* CTA */
.cta {
  /* Full-bleed block */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 0 !important;

  /* VNPOST gradient: nửa xanh, nửa cam, không bị xám ở giữa */
  background: linear-gradient(90deg,
    var(--vnpost-blue) 0%,
    var(--vnpost-blue) 50%,
    var(--vnpost-orange) 50%,
    var(--vnpost-orange) 100%
  );
  color: #fff;
}

.cta .btn {
  background-color: #fff;
  color: var(--vnpost-blue);
  border-color: #fff;
}

.cta .btn:hover {
  background-color: var(--vnpost-yellow);
  border-color: var(--vnpost-yellow);
  color: #222;
}

/* Contact (full screen + different tone) */
.contact-section {
  background: var(--vnpost-contact-bg);
  border-top: 4px solid var(--vnpost-contact-accent);
}

.contact--fullscreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* Contact / footer */
.footer { background:#0f1724; color:#e6eef8; }
.footer a { color: #cfe4ff; }

@media (max-width: 767px) {
  .hero-overlay .hero-content { padding: 2rem 1rem; }
  .hero-carousel .carousel-item { height: 50vh; }

  .contact--fullscreen {
    min-height: auto;
    align-items: stretch;
  }
}