/* ==========================================================================
   HoloLearn — components.css
   Thành phần dùng lại ở nhiều section. Không chứa vị trí/section cụ thể.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes hl-wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes hl-bob { 50% { transform: translateY(-14px) rotate(var(--hl-tilt, 0deg)); } }
@keyframes hl-pulse { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes hl-float { 50% { transform: translateY(-12px); } }
@keyframes hl-scan { 0%, 100% { top: 16%; opacity: .25; } 50% { top: 80%; opacity: 1; } }

/* ---------- Chữ ---------- */
.hl-display { font-weight: 900; line-height: 1.05; }
.hl-accent { color: var(--hl-blue); }
.hl-accent-alt { color: var(--hl-coral); }

.hl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--hl-coral);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* ngoại lệ duy nhất: eyebrow nằm trên nền coral (section Lợi ích) — chữ coral sẽ không đọc được */
.hl-eyebrow--light { color: var(--hl-white); }

.hl-section-head {
  max-width: 640px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}
.hl-section-head__title {
  margin-top: .5rem;
  font-size: clamp(29px, 4.4vw, 52px);
  color: var(--hl-ink);
}
.hl-section-head__lead {
  margin-top: .8rem;
  font-size: 17px;
  color: var(--hl-text);
}
.hl-section-head--light .hl-section-head__title { color: var(--hl-white); }
.hl-section-head--tight { margin-bottom: 2rem; }

.hl-subhead { text-align: center; margin: 0 auto clamp(26px, 3.6vw, 40px); }
.hl-subhead__title {
  margin-top: .4rem;
  font-size: clamp(23px, 2.8vw, 32px);
  color: var(--hl-ink);
}

/* ---------- Nút ---------- */
.hl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: var(--hl-tap);
  padding: 1em 1.7em;
  border-radius: var(--hl-radius-pill);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.hl-btn:hover { transform: translateY(-3px); }
.hl-btn:focus-visible { outline-offset: 4px; }
.hl-btn--lg { padding: 1.1em 2em; font-size: 17px; }
.hl-btn--sm { padding: .62em 1.15em; font-size: 15px; }

.hl-btn--purple { background: var(--hl-purple); color: var(--hl-white); box-shadow: 0 12px 26px rgba(90, 43, 146, .34); }
.hl-btn--purple:hover { background: var(--hl-purple-light); }
.hl-btn--coral { background: var(--hl-coral); color: var(--hl-white); box-shadow: 0 12px 26px rgba(255, 93, 108, .36); }
.hl-btn--coral:hover { background: var(--hl-coral-deep); }
.hl-btn--yellow { background: var(--hl-yellow); color: var(--hl-ink); box-shadow: 0 12px 26px rgba(255, 207, 58, .40); }
.hl-btn--yellow:hover { background: var(--hl-yellow-deep); }
.hl-btn--white { background: var(--hl-white); color: var(--hl-purple); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }
.hl-btn--white:hover { background: var(--hl-cream); }

.hl-btn-group { display: flex; flex-wrap: wrap; gap: .9rem; }
.hl-btn-group--center { justify-content: center; }

@media (max-width: 480px) {
  .hl-btn-group > .hl-btn { flex: 1 1 100%; }
  .hl-btn--lg { padding: 1em 1.4em; font-size: 16px; }
}

/* ---------- Doodle trang trí (SVG sprite) ---------- */
.hl-doodle {
  position: absolute;
  z-index: 3;
  width: var(--hl-doodle-size, 40px);
  height: auto;
  pointer-events: none;
}
.hl-doodle--wiggle { animation: hl-wiggle 4.5s ease-in-out infinite; }

/* ---------- Lớp chấm bi ---------- */
.hl-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .18) 3px, transparent 3px);
  background-size: 40px 40px;
  opacity: .5;
}
.hl-pattern--soft {
  background-image: radial-gradient(rgba(255, 255, 255, .12) 3px, transparent 3px);
  background-size: 36px 36px;
  opacity: 1;
}

/* ---------- Viền giấy xé ---------- */
.hl-tear {
  position: absolute;
  left: 0; right: 0;
  z-index: 4;
  line-height: 0;
  color: var(--hl-cream);
  pointer-events: none;
}
.hl-tear--bottom { bottom: -1px; }
.hl-tear svg { width: 100%; height: 44px; }
@media (max-width: 560px) {
  .hl-tear svg { height: 24px; }
}

/* ---------- Icon trên vệt cọ ---------- */
.hl-brush {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 104px;
  height: 96px;
  color: var(--hl-blue);
}
.hl-brush__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.hl-brush__icon { position: relative; z-index: 2; font-size: 34px; color: var(--hl-white); }

.hl-brush--blue { color: var(--hl-blue); }
.hl-brush--coral { color: var(--hl-coral); }
.hl-brush--green { color: var(--hl-green); }
.hl-brush--orange { color: var(--hl-orange); }
.hl-brush--white { color: var(--hl-white); }
.hl-brush--white .hl-brush__icon { color: var(--hl-purple); }

.hl-brush--sm { width: 96px; height: 88px; }
.hl-brush--sm .hl-brush__icon { font-size: 32px; }

/* ---------- Ô icon bo góc ---------- */
.hl-tile {
  --hl-tile-size: 56px;
  --hl-tile-icon: 22px;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--hl-tile-size);
  height: var(--hl-tile-size);
  border-radius: calc(var(--hl-tile-size) * .32);
  background: var(--hl-blue);
  color: var(--hl-white);
  font-size: var(--hl-tile-icon);
}
.hl-tile--md { --hl-tile-size: 62px; --hl-tile-icon: 24px; }
.hl-tile--lg { --hl-tile-size: 72px; --hl-tile-icon: 28px; }
.hl-tile--tilt { transform: rotate(-6deg); }
.hl-tile--blue { background: var(--hl-blue); }
.hl-tile--purple { background: var(--hl-purple); }
.hl-tile--orange { background: var(--hl-orange); }
.hl-tile--green { background: var(--hl-green); }

/* ---------- Thẻ nền trắng ---------- */
.hl-card {
  background: var(--hl-white);
  border-radius: var(--hl-radius-lg);
  padding: 2rem;
  box-shadow: var(--hl-shadow-md);
}
.hl-card--center { text-align: center; }
.hl-card__title { font-size: 20px; color: var(--hl-ink); }
.hl-card__text { margin-top: .5rem; font-size: 16px; color: var(--hl-text); }

@media (max-width: 480px) {
  .hl-card { padding: 1.6rem 1.3rem; }
}

/* ---------- Danh sách có icon ---------- */
.hl-list { display: grid; gap: .7rem; }
.hl-list__item { display: flex; align-items: flex-start; gap: .7rem; color: var(--hl-text); }
.hl-list__icon { flex: none; margin-top: .3rem; font-size: 13px; color: var(--hl-green); }
.hl-list--blue .hl-list__icon { color: var(--hl-blue); font-size: 16px; margin-top: .25rem; }

/* biến thể icon trong vòng tròn xanh — canh theo dòng đầu để mục nhiều dòng không lệch */
.hl-list--circle .hl-list__item { font-weight: 700; color: var(--hl-ink); }
.hl-list--circle .hl-list__icon {
  display: grid; place-items: center;
  width: 30px; height: 30px; margin: -2px 0 0;
  border-radius: 50%;
  background: var(--hl-green); color: var(--hl-white);
  font-size: 13px;
}

/* ---------- Huy hiệu tròn ---------- */
.hl-badge {
  display: grid;
  place-items: center;
  width: 128px; height: 128px;
  border-radius: 50%;
  border: 6px solid var(--hl-white);
  background: var(--hl-yellow);
  color: var(--hl-ink);
  text-align: center;
  box-shadow: 0 16px 30px rgba(0, 0, 0, .16);
  transform: rotate(-8deg);
}
.hl-badge__num { display: block; font-size: 32px; font-weight: 900; line-height: 1; }
.hl-badge__label { display: block; font-size: 13px; font-weight: 800; letter-spacing: .02em; }

/* ---------- Thẻ lật hai mặt ----------
   Lật bằng bấm/chạm (class .is-flipped do main.js bật), không lật theo hover
   để chuột và cảm ứng cho cùng một kết quả. */
.hl-flip {
  display: block;
  width: min(240px, 70vw);
  aspect-ratio: 650 / 886;
  perspective: 1100px;
}
.hl-flip__inner {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .75, .3, 1);
}
.hl-flip.is-flipped .hl-flip__inner { transform: rotateY(180deg); }
/* chuột: nghiêng nhẹ gợi ý "bấm được", không tự lật */
@media (hover: hover) {
  .hl-flip:hover .hl-flip__inner { transform: rotateY(-8deg); }
  .hl-flip.is-flipped:hover .hl-flip__inner { transform: rotateY(172deg); }
}
.hl-flip:focus-visible { outline-offset: 7px; border-radius: var(--hl-radius-lg); }

.hl-flip__side {
  position: absolute;
  inset: 0;
  /* không cắt tràn: nhãn MẶT TRƯỚC / MẶT SAU vắt ra ngoài mép dưới; góc ảnh bo ngay trên <img> */
  border: 6px solid var(--hl-white);
  border-radius: var(--hl-radius-md);
  background: var(--hl-white);
  box-shadow: 0 20px 40px rgba(36, 27, 61, .22);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hl-flip__side img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--hl-radius-md) - 6px); }
.hl-flip__side--back { transform: rotateY(180deg); }

.hl-flip__tag {
  position: absolute;
  /* vắt nửa ra ngoài mép dưới thẻ để không che tên con vật in trên thẻ */
  left: 50%; bottom: -14px;
  z-index: 2;
  transform: translateX(-50%);
  padding: .45em 1em;
  border-radius: var(--hl-radius-pill);
  background: var(--hl-yellow);
  color: var(--hl-ink);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .16);
}
.hl-flip__side--back .hl-flip__tag { background: var(--hl-purple); color: var(--hl-white); }

.hl-flip__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  margin-top: 1.75rem;
  color: var(--hl-muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* ---------- Mô phỏng điện thoại sau khi quét ---------- */
.hl-phone {
  position: relative;
  justify-self: center;
  width: min(232px, 64vw);
  aspect-ratio: 9 / 18;
  padding: 12px;
  border-radius: 38px;
  background: var(--hl-ink);
  box-shadow: 0 26px 50px rgba(36, 27, 61, .30);
}
.hl-phone__notch {
  position: absolute;
  top: 14px; left: 50%;
  z-index: 4;
  width: 78px; height: 16px;
  transform: translateX(-50%);
  border-radius: var(--hl-radius-pill);
  background: #0f0a1c;
}
.hl-phone__badge {
  position: absolute;
  top: -10px; right: -8px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border: 4px solid var(--hl-white);
  border-radius: 50%;
  background: var(--hl-coral);
  color: var(--hl-white);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: 0 10px 22px rgba(255, 93, 108, .42);
  transform: rotate(-10deg);
}
.hl-phone__screen {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(170deg, #eafaff 0%, #cdeefa 62%, #bfe6f7 100%);
}
.hl-phone__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(37, 150, 190, .16) 2px, transparent 2px);
  background-size: 22px 22px;
}
.hl-phone__screen::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 1;
  border: 3px dashed rgba(37, 150, 190, .42);
  border-radius: 20px;
  pointer-events: none;
}
.hl-phone__glow {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 207, 58, .8) 0%, rgba(255, 207, 58, 0) 68%);
  animation: hl-pulse 3.2s ease-in-out infinite;
}
.hl-phone__card {
  position: relative;
  z-index: 2;
  width: 82%;
  max-width: 170px;
  overflow: hidden;
  border: 5px solid var(--hl-white);
  border-radius: 16px;
  background: var(--hl-white);
  box-shadow: 0 16px 28px rgba(36, 27, 61, .28);
  animation: hl-float 4.4s ease-in-out infinite;
}
.hl-phone__star {
  position: absolute;
  z-index: 3;
  width: 26px;
  pointer-events: none;
  animation: hl-wiggle 4s ease-in-out infinite;
}
.hl-phone__star--1 { top: 16%; left: 12%; color: var(--hl-yellow); }
.hl-phone__star--2 { top: 26%; right: 10%; width: 20px; color: var(--hl-coral); animation-delay: .6s; }
.hl-phone__scan {
  position: absolute;
  left: 8%; right: 8%;
  z-index: 3;
  height: 3px;
  border-radius: var(--hl-radius-pill);
  background: linear-gradient(90deg, transparent, var(--hl-cyan), transparent);
  animation: hl-scan 3.6s ease-in-out infinite;
}
.hl-phone__caption {
  position: absolute;
  left: 10px; right: 10px; bottom: 12px;
  z-index: 4;
  padding: .6em .7em;
  border-radius: var(--hl-radius-sm);
  background: rgba(36, 27, 61, .84);
  color: var(--hl-white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

/* ---------- Bảng thông số ---------- */
.hl-spec {
  width: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: var(--hl-white);
  box-shadow: 0 14px 30px rgba(36, 27, 61, .08);
}
.hl-spec th,
.hl-spec td {
  padding: .66rem 1rem;
  border-bottom: 1px solid var(--hl-line);
  font-size: 16px;
  text-align: left;
  vertical-align: top;
}
.hl-spec tr:last-child th,
.hl-spec tr:last-child td { border-bottom: 0; }
.hl-spec th { width: 46%; background: var(--hl-tint-sky); color: var(--hl-blue); font-weight: 800; }
.hl-spec td { color: var(--hl-text); }

/* màn hẹp: nhãn nằm trên, giá trị nằm dưới cho dễ đọc */
@media (max-width: 480px) {
  .hl-spec, .hl-spec tbody, .hl-spec tr, .hl-spec th, .hl-spec td { display: block; width: 100%; }
  .hl-spec th { padding-bottom: .2rem; border-bottom: 0; }
  .hl-spec td { padding-top: 0; }
}

/* ---------- Form ---------- */
.hl-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.hl-form__field { display: grid; align-content: start; gap: 8px; }
.hl-form__field--full { grid-column: 1 / -1; }
.hl-form__label { font-size: 15px; font-weight: 900; color: var(--hl-ink); }
.hl-form__req { color: var(--hl-coral); }

.hl-form__control {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 3px solid var(--hl-field-border);
  border-radius: 18px;
  background: var(--hl-white);
  color: var(--hl-ink);
  font-size: 16px; /* 16px: iOS không tự phóng to khi chạm vào ô nhập */
  font-weight: 500;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.hl-form__control::placeholder { color: #a79fb8; font-weight: 400; }
.hl-form__control:hover { border-color: #e3d0b4; }
.hl-form__control:focus-visible { outline: 3px solid var(--hl-purple); outline-offset: 2px; border-color: var(--hl-blue); }
textarea.hl-form__control { min-height: 110px; resize: vertical; line-height: 1.5; }

.hl-form__field.is-invalid .hl-form__control { border-color: var(--hl-coral); background: #fff5f6; }
.hl-form__error { font-size: 13px; font-weight: 700; color: var(--hl-danger); }
.hl-form__error:empty { display: none; }

.hl-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.hl-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 52px;
  padding: 1em 2em;
  border-radius: var(--hl-radius-pill);
  background: var(--hl-coral);
  color: var(--hl-white);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 12px 26px rgba(255, 93, 108, .36);
  transition: transform .16s ease, background-color .16s ease;
}
.hl-form__submit:hover { background: var(--hl-coral-deep); transform: translateY(-3px); }
.hl-form__submit:focus-visible { outline-offset: 4px; }

.hl-form__status { flex: 1 1 240px; font-size: 15px; font-weight: 800; }
.hl-form__status.is-ok { color: var(--hl-success); }
.hl-form__status.is-error { color: var(--hl-danger); }

.hl-form__note { margin-top: 18px; font-size: 14px; line-height: 1.7; color: var(--hl-muted); }
.hl-form__note a { color: var(--hl-purple); font-weight: 800; padding-block: .3em; }

@media (max-width: 860px) {
  .hl-form__grid { grid-template-columns: 1fr; }
  .hl-form__actions { flex-direction: column; align-items: stretch; }
  .hl-form__status { flex-basis: auto; text-align: center; }
}