@charset "UTF-8";

/* ============================================================
   INLINE REGISTER SECTION  (#inline-register-section .irs)
   Desktop > 991px : hidden
   Tablet  ≤ 991px : 3-column layout with promo cards overlaid
   Mobile  ≤ 768px : stacked, deco above form, promos below
   ============================================================ */

/* ── Scroll target offset (tránh bị che bởi sticky header) ─── */
#inline-register-section { scroll-margin-top: 16px; }

/* ── Hidden on desktop ──────────────────────────────────────── */
#inline-register-section { display: none; }

/* ── Shared image swap helpers ──────────────────────────────── */
.irs__img--tablet { display: block; }
.irs__img--mobile { display: none;  }


/* ══════════════════════════════════════════════════════════════
   TABLET  (≤ 991px)
   Figma body: 795 × 445 px
   left model (292) | center (361) | right model (263)
   promo-left at (x:0, y:150), promo-right at (x:611, y:150)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

  #inline-register-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 40px 15px 0;
    box-sizing: border-box;
  }

  /* Heading */
  .irs__heading {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
  }
  .irs__heading img {
    width: 100%;
    max-width: 295px;
    height: auto;
  }

  /* Body: 795 × 445, position reference */
  .irs__body {
    position: relative;
    width: 100%;
    max-width: 795px;
    height: 445px;
  }

  /* ── Left model ─────────────────────────────────────────── */
  .irs__model--left {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 292px;
    z-index: 1;
  }
  .irs__model--left .irs__img--tablet {
    display: block;
    width: 100%;
    max-width: 292px;
    max-height: 354px;
    object-fit: contain;
    object-position: bottom;
  }
  .irs__model--left .irs__img--mobile { display: none; }

  /* ── Right model ─────────────────────────────────────────── */
  .irs__model--right {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 263px;
    z-index: 1;
  }
  .irs__model--right img {
    display: block;
    width: 100%;
    max-width: 263px;
    max-height: 351px;
    object-fit: contain;
    object-position: bottom;
  }

  /* ── Center (361 × 445) ──────────────────────────────────── */
  .irs__center {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 361px;
    height: 445px;
    z-index: 2;
  }

  /* Deco (trophies + girl, 361 × 296, top of center) */
  .irs__deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 361px;
    z-index: 1;
    pointer-events: none;
  }
  .irs__deco .irs__img--tablet {
    display: block;
    width: 100%;
    max-width: 361px;
    max-height: 296px;
    object-fit: contain;
  }
  .irs__deco .irs__img--mobile { display: none; }

  /* Form box (starts at y:76) */
  .irs__form-box {
    position: absolute;
    top: 76px;
    left: 0;
    width: 361px;
    z-index: 2;
    border-radius: 24px;
    border: 2px solid transparent;
    background:
      url("/wp-content/uploads/2026/05/img-form.png") center/cover no-repeat padding-box,
      linear-gradient(180deg, #ff7a32 0%, #fecc41 100%) border-box;
  }
  .irs__form-inner {
    padding: 36px 16px 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Form fields — cùng hook với plugin (.form-submit, .btn-register, input-name/pass/phone) */
  #inline-register-section .form-submit .form-input-wrapper {
    margin-bottom: 8px !important;
  }
  #inline-register-section .form-submit .form-input-wrapper label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  #inline-register-section .form-submit .form-input-wrapper .form-input {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: none !important;
    border-radius: 8px;
    height: 48px;
    padding-left: 52px !important;
    padding-right: 0 !important;
    background-color: #fff !important;
  }
  #inline-register-section .form-submit .form-input-wrapper .form-input.form-input-user::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: url("/wp-content/uploads/2026/03/ic-user.png") no-repeat center/contain;
    pointer-events: none;
    z-index: 1;
  }
  #inline-register-section .form-submit .form-input-wrapper .form-input.form-input-pass::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: url("/wp-content/uploads/2026/03/ic-lock.png") no-repeat center/contain;
    pointer-events: none;
    z-index: 1;
  }
  #inline-register-section .form-submit .form-input-wrapper .form-input.form-input-phone::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: url("/wp-content/uploads/2026/03/ic-phone.png") no-repeat center/contain;
    pointer-events: none;
    z-index: 1;
  }
  #inline-register-section .form-submit .form-input-wrapper .form-input input {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 2;
    border: none !important;
    outline: none !important;
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: none !important;
    color: #111 !important;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    padding: 0 12px 0 0 !important;
    margin: 0 !important;
    height: 100%;
    width: 100%;
  }
  #inline-register-section .form-submit .form-input-wrapper .form-input input::placeholder {
    color: rgba(0, 0, 0, 0.45);
    text-transform: uppercase;
    font-weight: 700;
  }
  #inline-register-section .validate-user,
  #inline-register-section .validate-password,
  #inline-register-section .validate-phone,
  #inline-register-section .validate-confirm-password,
  #inline-register-section .error-message {
    display: none;
    margin: 4px 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.3;
    color: #c62828;
  }

  /* Submit — .btn-register để plugin bắt click (handleEvents.js) */
  #inline-register-section .form-submit .irs__submit {
    display: flex;
    justify-content: center;
    margin-top: 8px;
    animation: pulse 2s ease-in-out infinite;
  }
  #inline-register-section .form-submit .btn-register {
    cursor: pointer;
    width: 100%;
    max-width: 328px;
    display: flex;
    justify-content: center;
  }
  #inline-register-section .form-submit .irs__submit-inner {
    position: relative;
    overflow: hidden;
    border-radius: 100px;
    width: 100%;
    max-width: 328px;
  }
  #inline-register-section .form-submit .irs__submit-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.65) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: shineBgMove 2s ease-in-out infinite;
    mask-image: url("/wp-content/uploads/2026/05/CTA.png");
    -webkit-mask-image: url("/wp-content/uploads/2026/05/CTA.png");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
  }
  #inline-register-section .form-submit .irs__submit-inner img {
    display: block;
    width: 100%;
    max-width: 328px;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    position: relative;
    z-index: 2;
  }

  /* ── Promo cards ─────────────────────────────────────────────
     Tablet Figma positions (inside 795px body):
       left  → x:0,   y:150, 184×295
       right → x:611, y:150, 184×295
     z-index 3 → sit in front of models (z:1) + center (z:2)
     ────────────────────────────────────────────────────────── */
  .irs__promo {
    position: absolute;
    top: 150px;
    width: 184px;
    z-index: 3;
  }
  .irs__promo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
  }
  .irs__promo .irs__img--tablet { display: block; }
  .irs__promo .irs__img--mobile { display: none; }

  .irs__promo--left  { left: 0; }
  .irs__promo--right { right: 0; }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE  (≤ 768px)
   Figma mobile (393px):
     - deco + left girl above form (overlap 133px)
     - form full-width (361px)
     - promo cards side-by-side ROW below form (y:1226)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #inline-register-section { padding: 32px 15px 0; }

  /* Swap images */
  .irs__img--tablet { display: none !important; }
  .irs__img--mobile { display: block !important; }

  .irs__heading img { max-width: 270px; }

  /* Body: row-wrap — center chiếm 100%, promos chiếm 50%/50% */
  .irs__body {
    max-width: 393px;
    height: auto;
    min-height: 502px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 12px;
    padding-bottom: 20px;
  }

  /* Left model: absolute top-left, 184×233 */
  .irs__model--left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    width: 184px;
    z-index: 2;
  }
  .irs__model--left .irs__img--mobile {
    width: 100%;
    max-width: 184px;
    max-height: 233px;
    object-fit: contain;
    object-position: top left;
  }

  /* Right model: hidden on mobile (in deco image) */
  .irs__model--right { display: none; }

  /* Center: full width */
  .irs__center {
    position: relative;
    width: 100%;
    max-width: 361px;
    min-height: 502px;
    height: auto;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto;
    z-index: auto;
  }

  /* Deco image: top of center, 361×353 */
  .irs__deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
  }
  .irs__deco .irs__img--mobile {
    width: 100%;
    max-width: 361px;
    max-height: 353px;
    object-fit: contain;
  }

  /* Form box pushed down 133px */
  .irs__form-box {
    position: absolute;
    top: 133px;
    left: 0;
    width: 100%;
    max-width: 361px;
    z-index: 2;
  }

  #inline-register-section .form-submit .irs__submit-inner     { max-width: 295px; }
  #inline-register-section .form-submit .irs__submit-inner img { max-width: 295px; }

  /* Center: chiếm toàn bộ hàng 1 */
  .irs__center {
    flex: 0 0 100%;
    order: 1;
  }

  /* Promo cards: ngang hàng 2, mỗi card 50% - gap */
  .irs__promo {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    flex: 0 0 calc(50% - 6px);
    max-width: 173px;
    z-index: auto;
    order: 2;
  }

  .irs__promo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
  }

  .irs__model--left { order: 0; }
}


/* ══════════════════════════════════════════════════════════════
   SMALL MOBILE  (≤ 490px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 490px) {

  .irs__heading img { max-width: 240px; }

  .irs__body { max-width: 360px; }

  .irs__center {
    max-width: 320px;
  }

  .irs__model--left { width: 155px; }
  .irs__model--left .irs__img--mobile {
    max-width: 155px;
    max-height: 196px;
  }

  .irs__form-box {
    max-width: 320px;
    top: 115px;
  }

  .irs__promo { flex: 0 0 calc(50% - 6px); max-width: 155px; }
}