/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Be Vietnam Pro", sans-serif;
  background: #e9dcfb;
  color: #2a0b3d;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; border: 0; background: none; }

/* ===== Header ===== */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 110px;
  background: url("../images/header-bg.webp") center top / 100% 100% no-repeat;
}
.header__inner {
  max-width: 1200px;
  height: 76px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.header__logo img { height: 96px; width: auto; }
.nav { display: flex; gap: 32px; margin-left: auto; }
.nav__link {
  position: relative;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 6px 0;
  transition: color .2s;
}
.nav__link:hover, .nav__link.is-active { color: #ffd98a; }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 50px;
  height: 4px;
  transform: translateX(-50%);
  background: url("../images/nav-underline.png") center / contain no-repeat;
}
.header__user img { width: 36px; height: 36px; }
.header__login { margin-left: 32px; transition: transform .2s, filter .2s; }
.header__login img { width: 160px; height: auto; }
.header__login:hover { transform: translateY(-2px); filter: brightness(1.15); }
.header__menu { display: none; }
/* Logged-in state: greeting + logout replace the Đăng Ký button */
.header__account { display: flex; align-items: center; gap: 12px; margin-left: 32px; color: #fff; font-size: 14px; }
.header__account[hidden] { display: none; }
.header__account span { display: flex; flex-direction: column; text-align: right; }
.header__account b { color: #ffd98a; }
.header__logout { width: 140px; transition: transform .2s, filter .2s; }
.header__logout:hover { transform: translateY(-2px); filter: brightness(1.15); }

/* ===== Hero ===== */
.hero {
  position: relative;
  height: max(56vw, 680px);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background: url("../images/hero-bg.webp") center top / cover no-repeat;
  animation: heroZoom 18s ease-in-out infinite alternate;
}
/* Ribbon sits on the hero/features boundary as a divider */
.features__ribbon {
  position: absolute;
  left: 0;
  top: -32vw;
  width: 100%;
  pointer-events: none;
}
.hero__content {
  position: absolute;
  left: 50%;
  bottom: calc(14vw + 2% - 130px);
  z-index: 5;
  width: min(980px, 92vw);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__logo img {
  position: relative;
  top: 25px; /* nudge logo down without moving the CTA */
  width: 100%;
  margin-bottom: -6%;
  animation: logoIn 1s ease-out both;
}

/* Floating skill orbs */
.orb {
  position: absolute;
  z-index: 2;
  width: clamp(80px, 8vw, 150px);
  aspect-ratio: 1;
  animation: float 4s ease-in-out infinite;
}
.orb__ring {
  position: absolute;
  z-index: 1;
  top: 46%;
  left: 48%;
  width: 235px;
  height: 235px;
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* hollow out the ring's inner glow so the icon keeps its colors */
  -webkit-mask: radial-gradient(circle, transparent 19%, #000 23%);
  mask: radial-gradient(circle, transparent 19%, #000 23%);
}
.orb__icon { position: relative; width: 100%; }
.orb--1 { left: 25%; top: 11%; }
.orb--2 { left: 15%; top: 21%; animation-delay: -1s; }
.orb--3 { left: 8%; top: 35%; animation-delay: -2s; }
.orb--4 { right: 24%; top: 11%; animation-delay: -1.5s; }
.orb--5 { right: 14%; top: 23%; animation-delay: -.5s; }

/* CTA panel */
.cta {
  position: relative;
  top: -30px; /* nudge panel up without moving the logo */
  width: min(880px, 92vw);
  aspect-ratio: 761 / 166;
  background: url("../images/cta-panel.webp") center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3%;
  padding: 0 7%;
  animation: logoIn 1s .3s ease-out both;
}
.cta__main { display: flex; flex-direction: column; gap: 6px; width: 36%; }
.cta__btn { transition: transform .2s, filter .2s; }
.cta__btn img { width: 100%; height: auto; }
.cta__btn:hover { transform: scale(1.05); filter: brightness(1.15); }
.cta__social {
  width: 20%;
  transition: transform .2s, filter .2s;
}
.cta__social img { width: 100%; height: auto; }
.cta__social:hover { transform: translateY(-3px); filter: brightness(1.2); }

/* ===== Features ===== */
.features {
  position: relative;
  z-index: 4;
  margin-top: -14vw;
  overflow-x: clip; /* side slides must not widen the page on phones (shifted the popups) */
  padding: 10vw 20px 60px;
  background:
    url("../images/features-bg.webp") center top / cover no-repeat,
    linear-gradient(transparent, #ece0fb 14vw);
}
.section-title { margin-bottom: 30px; }
.section-title img { width: min(660px, 90vw); height: auto; margin: 0 auto; }

/* Slider: center slide large, neighbours dimmed on the sides */
.slider {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  height: clamp(240px, 26vw, 460px);
}
.slider__track { position: relative; height: 100%; }
.slider__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  aspect-ratio: 811 / 543; /* matches slide-feature.png, which has its own purple frame */
  max-height: 100%;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  transition: transform .5s, opacity .5s, filter .5s;
  pointer-events: none;
}
.slider__item img { width: 100%; height: 100%; object-fit: cover; }
.slider__item.is-active { opacity: 1; z-index: 3; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.slider__item.is-prev,
.slider__item.is-next { opacity: 1; z-index: 2; filter: brightness(.35) grayscale(.4); }
.slider__item.is-prev { transform: translate(-108%, -50%) scale(.75); }
.slider__item.is-next { transform: translate(8%, -50%) scale(.75); }

.slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 64px;
  aspect-ratio: 85 / 116;
  transform: translateY(-50%);
  background: center / contain no-repeat;
  transition: transform .2s, filter .2s;
}
.slider__arrow:hover { transform: translateY(-50%) scale(1.1); filter: brightness(1.2); }
.slider__arrow--prev { left: 60px; background-image: url("../images/arrow-prev.png"); }
.slider__arrow--next { right: 60px; background-image: url("../images/arrow-next.png"); }

.slider__dots {
  position: absolute;
  left: 50%;
  bottom: -36px;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}
.slider__dots button {
  width: 17px;
  height: 17px;
  background: url("../images/dot.png") center / contain no-repeat;
}
.slider__dots button.is-active { background-image: url("../images/dot-active.png"); }

/* ===== Footer ===== */
.footer {
  padding: 14px 20px;
  background: #333;
  color: #ddd;
  font-size: 13px;
  letter-spacing: .5em;
  text-align: center;
}

/* ===== Login popup ===== */
.login {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(20, 0, 40, .7);
}
.login[hidden] { display: none; }
.login__box {
  position: relative;
  width: min(1106px, 94vw, 148vh); /* 148vh keeps the whole frame on short screens */
  aspect-ratio: 1106 / 682;
  background: url("../images/login-frame.png") center / 100% 100% no-repeat;
}
.login__title {
  position: absolute;
  top: -6%;
  left: 50%;
  width: 35.5%;
  transform: translateX(-50%);
}
.login__body {
  position: absolute;
  inset: 11% 15.5% 7% 10%;
  display: flex;
  gap: 4%;
}
.login__form { flex: 1; display: flex; flex-direction: column; align-items: center; }
.login__label { align-self: flex-start; margin: 4px 0 6px; color: #3b0a78; font-size: 20px; font-weight: 700; }
.login__input {
  width: 100%;
  height: 46px;
  margin-bottom: 14px;
  padding: 0 18px;
  border: 0;
  outline: 2px solid transparent;
  background: #fff;
  font: inherit;
  font-size: 14px;
}
.login__input:focus { outline-color: #8fb5f0; }
.login__submit { width: 45%; margin-top: 18px; transition: transform .2s, filter .2s; }
.login__submit img { width: 100%; } /* img is display:block, so without this it sits left inside the wider button */
.login__submit:hover { transform: scale(1.05); filter: brightness(1.1); }
.login__note { margin-top: 10px; color: #111; font-size: 20px; font-weight: 700; }
.login__register { color: #3b0a78; }
.login__social {
  width: 23%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4%;
  padding-top: 8%;
  background: url("../images/social-column.png") center / 100% 100% no-repeat;
}
.login__social a { width: 100%; transition: transform .2s, filter .2s; }
.login__social a:hover { transform: scale(1.05); filter: brightness(1.15); }

/* Register popup: same frame, more fields in a 2-column grid */
.login--register .login__fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6%; width: 100%; }
.login__field { display: flex; flex-direction: column; }
.login__field--full { grid-column: 1 / -1; }
.login--register .login__label { font-size: 17px; margin-bottom: 4px; }
.login--register .login__input { height: 38px; margin-bottom: 10px; }
.login--register .login__submit { width: 32%; margin-top: 10px; }
/* Desktop: positions measured from the designs, in cqw (1cqw = 1% of the popup width) */
@media (min-width: 769px) {
  .login__box { container-type: inline-size; }
  .login__title { top: -5%; width: 34%; }
  .login__body { inset: 12.5% 6.5% 8% 10.5%; justify-content: space-between; gap: 0; }
  .login__form { flex: none; width: 63cqw; }
  .login__label { margin: 0; font-size: 2.1cqw; line-height: 1.15; }
  .login__input { height: 4.3cqw; margin-bottom: 1.7cqw; padding: 0 1.8cqw; font-size: 1.3cqw; }
  .login__submit { width: 23cqw; margin-top: 2.2cqw; }
  .login__submit, .login__note { position: relative; left: 0; } /* centered under the fields; register overrides the offset */
  .login__note { margin-top: .8cqw; font-size: 2cqw; }
  .login__social { width: 18.5cqw; gap: 0; padding-top: 1cqw; }
  .login__social a { width: 21cqw; flex: none; }

  /* Register: more fields, 2 columns in the middle rows */
  .login--register .login__body { inset: 13% 6.5% 8% 14%; }
  .login--register .login__form { width: 59.6cqw; }
  .login--register .login__social { width: 17.5cqw; }
  .login--register .login__social a { width: 100%; }
  .login--register .login__fields { grid-template-columns: 28.5cqw 1fr; column-gap: 0; }
  .login--register .login__field:not(.login__field--full) .login__input { width: 23.1cqw; }
  .login--register .login__label { margin: 0 0 .9cqw; font-size: 2cqw; line-height: 1.2; }
  .login--register .login__input { height: 3.2cqw; margin-bottom: 2.1cqw; padding: 0 1cqw; font-size: 1.2cqw; }
  .login--register .login__submit { margin-top: 0; }
  .login--register .login__submit, .login--register .login__note { left: 1.8cqw; }
  .login--register .login__note { margin-top: .6cqw; }
  .login--register .login__social { padding-top: 4.5cqw; }
}
.register__done { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 4%; }
.register__done[hidden], .login__form[hidden] { display: none; }
.register__msg { color: #3b0a78; font-size: 26px; font-weight: 700; line-height: 1.5; text-align: center; }
.register__code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, 460px);
  margin-top: 20px;
  padding: 10px 16px 10px 28px;
  background: #fff;
  color: #3b0a78;
  font-size: 22px;
  font-weight: 700;
}
.register__copy img { width: 27px; }
.register__copy:hover { filter: brightness(1.6); }

/* ===== Animations ===== */
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes logoIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .nav { display: none; }
  .header__user { margin-left: auto; }
  .header__login { margin-left: 0; }
  .header__login img { width: 130px; }
  .orb--2, .orb--3, .orb--5 { display: none; }
  .orb--1 { left: 6%; top: 18%; }
  .orb--4 { right: 6%; top: 18%; }
  .slider__arrow--prev { left: 2%; }
  .slider__arrow--next { right: 2%; }
  .slider__item { width: 80%; }
}
/* ===== Mobile (all phones): layout scales with vw from a 393px-wide design ===== */
@media (max-width: 768px) {
  .header {
    height: 38.7vw;
    background-image: url("../images/header-bg-mobile.webp");
  }
  .header__inner { position: relative; height: auto; padding: 3vw 4vw; align-items: flex-start; }
  .header__logo img { width: 40vw; height: auto; }
  .header__user { display: none; }
  .header__login { margin-left: auto; }
  .header__login img { width: 39vw; }

  /* Menu icon sits under the register button, nav drops down below it */
  .header__menu { display: block; position: absolute; top: 14vw; right: 8vw; width: 10vw; } /* right under the button, flush with its right edge */
  .header__menu img { width: 100%; }
  .header.is-menu-open .nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 30vw;
    right: 4vw;
    min-width: 44vw;
    padding: 2vw 0;
    border-radius: 8px;
    background: rgba(42, 0, 53, .95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  }
  .header.is-menu-open .nav__link { padding: 3vw 5vw; font-size: 4vw; }
  .nav__link.is-active::after { display: none; }

  .hero { height: calc(100vw * 852 / 393); }
  .hero__bg { background-image: url("../images/hero-bg-mobile.webp"); background-position: center top; }

  /* Orbs: two zigzag columns around the character, positioned by their centers */
  .orb { width: 18vw; }
  .orb--2, .orb--3, .orb--5 { display: block; }
  .orb__ring { width: 157%; height: auto; }
  .orb--4 { left: 18vw; top: calc(48% - 9vw); right: auto; }
  .orb--1 { left: 7vw; top: calc(58% - 9vw); }
  .orb--5 { left: 16vw; top: calc(70% - 9vw); right: auto; }
  .orb--2 { left: 76vw; top: calc(55% - 9vw); }
  .orb--3 { left: 70vw; top: calc(66% - 9vw); }

  .hero__content { width: 90vw; bottom: 4%; }
  .hero__logo img { top: 2vw; }
  .cta { top: 0; width: 90vw; gap: 2%; padding: 0 3%; }
  .cta__main { width: 44%; }
  .cta__social { width: 22%; }

  .features__ribbon { top: -100vw; }
  .section-title, .slider { position: relative; z-index: 1; } /* keep content above the ribbon */
  .features { padding-top: 14vw; }
  .slider { height: 48vw; }
  .slider__item { width: 66%; }
  .slider__arrow { width: 8vw; }
  .slider__arrow--prev { left: 1vw; }
  .slider__arrow--next { right: 1vw; }

  /* Login popup: tall frame, social buttons in a row under the form */
  .login__box {
    width: min(90vw, 400px);
    aspect-ratio: 302 / 534;
    background-image: url("../images/login-frame-mobile.png");
  }
  .login__title { top: -5%; left: 53%; width: 84%; }
  .login__body { inset: 10% 7% 6%; flex-direction: column; justify-content: flex-start; gap: 0; }
  .login__form { flex: none; }
  .login__label { margin: 2px 0 4px; font-size: min(4.2vw, 18px); }
  .login__input { height: min(9vw, 40px); margin-bottom: 10px; padding: 0 12px; font-size: min(3.4vw, 14px); }
  .login__submit { width: 64%; margin-top: 4px; }
  .login__note { margin-top: 6px; font-size: min(3.6vw, 16px); font-weight: 500; }
  .login__social { width: 100%; flex-direction: row; justify-content: center; gap: 4%; padding-top: 2%; background: none; }
  .login__social a { width: 38%; }

  .header__account { gap: 2vw; margin-left: auto; font-size: 3.2vw; }
  .header__logout { width: 30vw; }
  .login--register .login__fields { grid-template-columns: 1fr; }
  .login--register .login__label { margin: 0 0 1vw; font-size: min(3.6vw, 16px); }
  .login--register .login__input { height: min(7.6vw, 34px); margin-bottom: min(2vw, 8px); }
  .login--register .login__submit { width: 52%; margin-top: 0; }
  .login--register .login__social a { width: 32%; }
  .register__done { flex: none; }
  .register__msg { font-size: min(5vw, 22px); }
  .register__code { margin: 4vw 0; padding: 2.5vw 3vw 2.5vw 6vw; font-size: min(4.2vw, 18px); }
  .register__copy img { width: 6vw; }
}

/* Lỗi từ API / kiểm form hiện tại chỗ, ngay trên nút gửi. Rỗng thì không chiếm chỗ. */
.login__error { margin: 6px 0 0; color: #b3001b; font-size: 15px; font-weight: 700; line-height: 1.3; }
.login__error:empty { display: none; }
@media (min-width: 769px) { .login__error { font-size: 1.5cqw; margin-top: .6cqw; } }
/*
  Mobile: popup đăng ký đã kín chỗ trong khung ảnh cố định — câu lỗi cỡ 15px
  hai dòng đẩy hai nút mạng xã hội tràn khỏi khung. Cỡ chữ theo vw như các ô
  nhập, và bù lại bằng cách thu khoảng cách của nút gửi.
*/
@media (max-width: 768px) {
  .login__error { margin: 0 0 1vw; font-size: min(3.2vw, 14px); }
  .login--register .login__error { margin: 0 0 .5vw; }
}

/* Nút gửi khi đang chờ API: mờ đi, không bấm được lần hai. */
.login__submit:disabled { opacity: .6; cursor: wait; transform: none; filter: none; }

/* Popup thông báo một dòng: dùng nền mờ của .login, hộp đơn giản cùng tông tím. */
.notice__box {
  width: min(420px, 90vw);
  padding: 28px 24px 22px;
  border-radius: 14px;
  background: #fff7e6;
  border: 3px solid #8a3fd1;
  text-align: center;
}
.notice__msg { margin: 0 0 18px; color: #2a0a45; font-size: 18px; font-weight: 700; line-height: 1.45; }
.notice__close {
  padding: 8px 28px;
  border: 0;
  border-radius: 999px;
  background: #8a3fd1;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}