/* ==========================================================================
   Dòng chào trên tiêu đề hero trang chủ: "Chào mừng các bạn đến với" (yêu cầu Giám đốc, 2026-11-02)
   → KỶ NGUYÊN AI / TRONG ĐÀO TẠO LÁI XE / Hệ sinh thái chuyển đổi số…
   Kiểu "Eyebrow" của Hiệp Phát Design System (user chọn Mẫu 1 trong 5 mẫu):
   - Chữ in hoa, Be Vietnam Pro 700, giãn chữ .08em, màu primary #1e40af; 2 vạch đỏ #dc2626 hai bên.
   - Không khung/nền → tiêu đề gradient vẫn là điểm nhấn duy nhất.
   - Nằm NGOÀI <h1> (CSS hero tô màu theo span:nth-child trong h1) → tiêu đề/SEO giữ nguyên.
   - Hiện ra trước tiêu đề (class hpo-slide-item, chạy lại mỗi lần slide 1 phát); 2 vạch đỏ kéo dài ra từ chữ.
   - Bù chỗ: bớt khoảng trên của hero để tiêu đề gần như giữ vị trí cũ (điện thoại: bỏ khoảng trống 192px dư).
   Nạp SAU homepage-hero-title-gradient.css.
   ========================================================================== */

.hpo-digital-left { padding-top: clamp(34px, 4.4vh, 56px); }

.hpo-hero-welcome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75em;
  max-width: 100%;
  margin: 0 auto clamp(22px, 3vh, 32px); /* chừa chỗ dấu hỏi chữ "Ỷ" của tiêu đề */
  color: #1e40af;
  font-family: var(--ff-display, inherit);
  font-size: clamp(17px, 1.65vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
/* 2 vạch đỏ kiểu .eyebrow của DS (DS đặt 1 vạch bên trái; dòng căn giữa nên đặt đối xứng 2 bên) */
.hpo-hero-welcome::before,
.hpo-hero-welcome::after {
  content: "";
  flex: none;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: #dc2626;
}
.hpo-hero-welcome::before { transform-origin: right center; }
.hpo-hero-welcome::after { transform-origin: left center; }
.hpo-slide-stage.is-playing .hpo-hero-welcome {
  animation: hpoTextAppearUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}
.hpo-slide-stage.is-playing .hpo-hero-welcome::before,
.hpo-slide-stage.is-playing .hpo-hero-welcome::after {
  animation: hpo-welcome-bar 0.6s cubic-bezier(0.22, 1, 0.36, 1) .45s both;
}
@keyframes hpo-welcome-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 1100px) {
  .hpo-digital-left { padding-top: clamp(40px, 5vh, 60px); }
}
@media (max-width: 700px) {
  /* trước: 192px trống phía trên tiêu đề (chỗ robot đứng cũ) → dòng chào nằm vào đây */
  .hpo-digital-left { padding-top: 44px; }
  .hpo-hero-welcome { gap: .38em; margin-bottom: 14px; font-size: clamp(13px, 3.8vw, 15px); letter-spacing: .018em; }
  .hpo-hero-welcome::before,
  .hpo-hero-welcome::after { width: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hpo-hero-welcome, .hpo-hero-welcome::before, .hpo-hero-welcome::after { animation: none !important; }
  .hpo-hero-welcome { opacity: 1; transform: none; filter: none; }
}