/* ==========================================================================
   Phần mở đầu kiểu BẰNG KHEN (phương án 1A đã duyệt):
   nền giấy vàng nhạt, khung viền dày chuyển cam–vàng, chữ cam ánh kim.
   ========================================================================== */
.hero {
  padding: clamp(14px, 2.4vw, 28px);
  /* Phông sân khấu: đốm sáng lấp lánh + 2 luồng đèn chiếu (lấp hai bên khi màn hình rộng) */
  background:
    radial-gradient(circle at 8% 30%, rgba(255, 214, 140, .55) 0 3px, transparent 4px) 0 0 / 90px 90px,
    radial-gradient(circle at 60% 70%, rgba(255, 190, 110, .45) 0 2px, transparent 3px) 0 0 / 130px 130px,
    conic-gradient(from 160deg at 50% -10%, transparent 0deg, rgba(255, 255, 255, .55) 8deg, transparent 18deg,
      transparent 162deg, rgba(255, 255, 255, .55) 172deg, transparent 182deg),
    radial-gradient(ellipse 60% 70% at 50% 40%, #fff6e8 0%, transparent 75%),
    linear-gradient(#ffe7c7, #ffd9a8);
  text-align: center;
}

/* Tấm bằng khen */
.hero__frame {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(16px, 2.4vw, 24px);
  padding: clamp(56px, 8vw, 96px) clamp(18px, 5vw, 64px) clamp(52px, 7vw, 88px);
  max-width: 1180px;   /* màn hình rộng: không dãn quá, đặt giữa phông */
  margin: 0 auto;
  box-shadow: 0 24px 60px -24px rgba(170, 70, 0, .45);
  background: radial-gradient(ellipse 80% 70% at 50% 40%, #fffdf7, #fff6e6);
  border: 12px solid transparent;
  border-image: linear-gradient(135deg, #ffc35c, var(--brand) 25%, #ffb84d 50%, var(--brand) 75%, #ffc35c) 1;
}
/* hai đường chỉ mảnh bên trong khung */
.hero__frame::before,
.hero__frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.hero__frame::before { inset: 8px; border: 1.5px solid rgba(247, 99, 0, .45); }
.hero__frame::after { inset: 14px; border: 1px solid rgba(245, 165, 36, .4); }

.hero__kicker {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--gold-deep);
  text-wrap: balance;
}

.hero__crest {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(4px, 2vw, 20px);
  max-width: 1000px;
}

.hero__laurel { width: clamp(44px, 8vw, 100px); height: auto; }
.hero__laurel--right { transform: scaleX(-1); }

.hero__title {
  font-size: clamp(2.6rem, 7.6vw, 5.6rem);
  line-height: 1.12;
  font-weight: 700;
  padding: .06em 0 .1em;
  background: linear-gradient(100deg, #d65000 0%, var(--brand) 28%, #ff9f1c 48%, var(--brand) 66%, var(--brand-deep) 100%);
  background-size: 220% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* ánh kim lướt qua một lần khi tải trang */
  animation: foil-sweep 2.4s .3s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes foil-sweep {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.hero__message {
  max-width: 34em;
  font-size: var(--t-lg);
  line-height: 1.7;
  color: #4a2c18;
}

.hero .btn { margin-top: 8px; }

/* ---------- Sân khấu phẳng 2D (duyệt 14/11) ---------- */
.hero { padding-bottom: 0; }
.stage {
  position: relative;
  margin: 0 calc(-1 * clamp(14px, 2.4vw, 28px));
}
.stage__floor {
  height: clamp(28px, 3.4vw, 44px);
  background: #f3b866;
  border-top: 3px solid #ffd27a;
}
.stage__apron { height: clamp(12px, 1.4vw, 18px); background: var(--brand-deep); }
.stage__flowers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(6px, 1vw, 12px);
  height: clamp(40px, 4.6vw, 62px);
  background: url(/assets/flowers-low.svg) center bottom / auto 100% repeat-x;
  filter: drop-shadow(0 3px 5px rgba(120, 40, 0, .2));
  pointer-events: none;
}
.podium {
  position: absolute;
  z-index: 6;
  right: clamp(8px, 4vw, 70px);
  bottom: clamp(10px, 1.4vw, 18px);
  width: clamp(110px, 14vw, 200px);
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(120, 40, 0, .25));
}
.podium__body { display: block; width: 100%; height: auto; }
.podium__logo {
  position: absolute;
  left: 50%;
  top: 63.4%;
  width: 44%;
  height: auto;
  transform: translate(-50%, -50%);
}

/* ---------- Điện thoại: bằng khen giữ khung NGANG 16:9 (phương án M1) ---------- */
@media (max-width: 600px) {
  .hero__frame {
    aspect-ratio: 16 / 9;
    align-content: center;
    gap: 6px;
    padding: 14px 12px;
    border-width: 6px;
  }
  .hero__frame::before { inset: 5px; }
  .hero__frame::after { inset: 9px; }
  .hero__kicker { font-size: 11px; line-height: 1.3; }
  .hero__crest { gap: 6px; }
  .hero__laurel { width: 16px; }
  .hero__title {
    font-size: clamp(18px, 6vw, 25px);
    line-height: 1.2;
    white-space: nowrap;
    padding: .04em .06em .08em;
  }
  .hero__message { font-size: 10.5px; line-height: 1.45; padding: 0 6px; }
  .hero .btn { min-height: 30px; margin-top: 2px; padding: 0 14px; font-size: 12px; }
  .podium { width: 84px; right: 2px; }
}