/* ==========================================================================
   Giao diện màn ĐĂNG NHẬP và ĐĂNG KÝ DÙNG THỬ của weblive
   Tách ra khỏi trang để hai màn dùng chung một bộ, sửa một chỗ là cả hai theo.
   Trước đây nằm inline trong /admin/index.astro.
   ========================================================================== */
:root {
      --nen: #08080F;
      --nen-the: rgba(22, 22, 34, .82);
      --vien: rgba(255, 255, 255, .10);
      --vien-sang: rgba(255, 255, 255, .18);
      --chu: #FFFFFF;
      --chu-mo: rgba(255, 255, 255, .60);
      --chu-rat-mo: rgba(255, 255, 255, .34);
      --cam: #FF7A3D;
      --hong: #F5334F;
      --tim: #C026D3;
      --live: #FF1F4B;
      --chu-font: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      background: var(--nen);
      color: var(--chu);
      font-family: var(--chu-font);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ── Nền: hai quầng sáng trôi rất chậm, lấy đúng ba màu của logo ──────────
       Chuyển động chỉ dùng transform nên trình duyệt xử lý trên GPU, không đụng tới layout. */
    .quang { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
    .quang::before, .quang::after {
      content: ''; position: absolute; border-radius: 50%; filter: blur(90px);
    }
    .quang::before {
      width: 620px; height: 620px; top: -240px; left: -140px;
      background: radial-gradient(circle, rgba(255,122,61,.34), transparent 65%);
      animation: troi-1 26s ease-in-out infinite;
    }
    .quang::after {
      width: 680px; height: 680px; bottom: -280px; right: -180px;
      background: radial-gradient(circle, rgba(192,38,211,.30), transparent 65%);
      animation: troi-2 32s ease-in-out infinite;
    }
    @keyframes troi-1 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(70px, 60px) scale(1.12); }
    }
    @keyframes troi-2 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(-80px, -50px) scale(1.08); }
    }

    /* Lưới mảnh phía sau: gợi cảm giác bảng điều khiển, không phải trang giới thiệu. */
    .luoi {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 62px 62px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 78%);
    }

    .khung {
      position: relative; z-index: 1;
      min-height: 100svh;
      display: grid; place-items: center;
      padding: calc(28px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
    }
    .noi-dung {
      width: 100%; max-width: 1060px;
      display: grid; grid-template-columns: 1fr; gap: 34px;
      align-items: center;
    }

    /* ── Cột trái: nhận diện + form ──────────────────────────────────────── */
    .ben-trai { display: flex; flex-direction: column; gap: 22px; max-width: 400px; width: 100%; justify-self: center; }
    .logo img { height: 40px; width: auto; display: block; }

    .tieu-de {
      font-size: clamp(26px, 6vw, 34px); line-height: 1.18; font-weight: 800;
      letter-spacing: -.025em; margin: 0; text-wrap: balance;
    }
    .tieu-de .sang {
      background: linear-gradient(100deg, var(--cam), var(--hong) 46%, var(--tim));
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .phu { margin: 0; color: var(--chu-mo); font-size: 14.5px; line-height: 1.65; }

    .the {
      background: var(--nen-the);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--vien);
      border-radius: 20px; padding: 22px;
      display: flex; flex-direction: column; gap: 15px;
      box-shadow: 0 30px 70px rgba(0,0,0,.55);
    }
    .the-dau { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
    .the h1 { font-size: 17px; font-weight: 700; margin: 0; }
    .the-dau span { font-size: 12px; color: var(--chu-rat-mo); }

    label { display: block; font-size: 12px; font-weight: 600; color: var(--chu-mo); margin-bottom: 7px; }
    input {
      width: 100%; height: 48px; padding: 0 14px;
      background: rgba(255,255,255,.05);
      border: 1.5px solid var(--vien);
      border-radius: 13px; color: var(--chu);
      font-family: inherit; font-size: 15px; font-weight: 500;
      outline: none; transition: border-color .15s, background .15s;
    }
    input::placeholder { color: rgba(255,255,255,.28); }
    input:focus { border-color: rgba(255,122,61,.75); background: rgba(255,255,255,.08); }

    .o-mat-khau { position: relative; }
    .hien-mk {
      position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
      background: none; border: 0; color: var(--chu-mo);
      font-family: inherit; font-size: 12.5px; font-weight: 700;
      padding: 9px 11px; cursor: pointer; border-radius: 9px;
    }
    .hien-mk:hover { color: var(--chu); }

    button.chinh {
      height: 50px; border: 0; border-radius: 13px; cursor: pointer; margin-top: 2px;
      background: linear-gradient(100deg, var(--cam), var(--hong) 55%, #D62BC0);
      background-size: 180% 100%; background-position: 0% 50%;
      color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 700;
      transition: background-position .35s ease, opacity .15s;
    }
    button.chinh:hover { background-position: 100% 50%; }
    button.chinh:disabled { opacity: .6; cursor: default; }

    /* Nút phụ: cùng cỡ nút chính nhưng chỉ có viền — người chưa có tài khoản vẫn thấy ngay
       lối đi của mình, mà không tranh chỗ với việc chính là đăng nhập. */
    a.phu-nut {
      height: 50px; border-radius: 13px;
      border: 1.5px solid var(--vien-sang);
      background: rgba(255,255,255,.04);
      color: var(--chu); text-decoration: none;
      font-family: inherit; font-size: 14.5px; font-weight: 600;
      display: flex; align-items: center; justify-content: center; gap: 7px;
      transition: border-color .15s, background .15s;
    }
    a.phu-nut:hover { border-color: rgba(255,122,61,.7); background: rgba(255,122,61,.10); }
    a.phu-nut .mui-ten { transition: transform .18s; }
    a.phu-nut:hover .mui-ten { transform: translateX(3px); }

    .hoac {
      display: flex; align-items: center; gap: 12px;
      color: var(--chu-rat-mo); font-size: 11.5px; font-weight: 600;
      text-transform: uppercase; letter-spacing: .08em;
    }
    .hoac::before, .hoac::after {
      content: ''; height: 1px; flex: 1; background: var(--vien);
    }

    /* Link về trang giới thiệu, đặt ở góc trên — chỗ người ta quen tìm lối thoát. */
    .thanh-tren-trang {
      position: absolute; top: calc(18px + env(safe-area-inset-top)); right: 20px; z-index: 3;
    }
    .thanh-tren-trang a {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--chu-mo); text-decoration: none;
      font-size: 12.5px; font-weight: 600;
      padding: 8px 13px; border-radius: 999px;
      border: 1px solid var(--vien); background: rgba(255,255,255,.03);
      transition: color .15s, border-color .15s;
    }
    .thanh-tren-trang a:hover { color: var(--chu); border-color: var(--vien-sang); }

    .link-chan { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
    .link-chan a { color: var(--chu-mo); text-decoration: none; font-size: 12.5px; font-weight: 600; }
    .link-chan a:hover { color: var(--chu); }

    /* CTA dưới khung live minh hoạ (chỉ máy tính). */
    .cta-live {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      margin-top: 14px; padding: 13px 16px;
      border: 1px solid var(--vien); border-radius: 14px;
      background: rgba(255,255,255,.03);
    }
    .cta-live p { margin: 0; font-size: 12.5px; color: var(--chu-mo); line-height: 1.55; }
    .cta-live a {
      flex-shrink: 0; text-decoration: none; white-space: nowrap;
      color: var(--chu); font-size: 13px; font-weight: 700;
      padding: 9px 15px; border-radius: 10px;
      background: linear-gradient(100deg, rgba(255,122,61,.22), rgba(245,51,79,.22));
      border: 1px solid rgba(255,122,61,.55);
      transition: background .15s;
    }
    .cta-live a:hover { background: linear-gradient(100deg, rgba(255,122,61,.36), rgba(245,51,79,.36)); }

    .loi {
      display: none;
      background: rgba(245,51,79,.12); border: 1px solid rgba(245,51,79,.38);
      color: #FF97A6; border-radius: 12px; padding: 10px 13px;
      font-size: 13px; font-weight: 500; line-height: 1.5;
    }
    .loi.hien { display: block; }

    .chan { text-align: center; font-size: 12px; color: var(--chu-rat-mo); line-height: 1.8; margin: 0; }
    .chan a { color: var(--chu-mo); text-decoration: none; font-weight: 600; }
    .chan a:hover { color: var(--chu); }

    :focus-visible { outline: 2px solid var(--cam); outline-offset: 2px; }

    /* ── Cột phải: một phiên live đang chạy ──────────────────────────────────
       Không phải ảnh chụp màn hình, mà dựng lại đúng mấy khối của trình phát thật: nhãn LIVE,
       số người xem, bình luận trôi lên, dải sản phẩm đang ghim. Người sắp đăng nhập nhìn thấy
       ngay công cụ của mình. Ẩn hoàn toàn trên điện thoại. */
    .ben-phai { display: none; }

    @media (min-width: 940px) {
      .noi-dung { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 76px; }
      .ben-trai { justify-self: start; }
      .ben-phai { display: block; }
    }

    .khung-live {
      position: relative;
      aspect-ratio: 16 / 10;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid var(--vien-sang);
      background:
        linear-gradient(160deg, #1C1430 0%, #241833 42%, #14131F 100%);
      box-shadow: 0 40px 90px rgba(0,0,0,.6);
    }
    /* Vệt sáng chạy chéo: gợi mặt kính, giữ khung khỏi phẳng. */
    .khung-live::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.07) 50%, transparent 60%);
    }

    .thanh-tren {
      position: absolute; top: 14px; left: 14px; right: 14px; z-index: 3;
      display: flex; align-items: center; gap: 8px;
    }
    .nhan-live {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--live); color: #fff;
      font-size: 11px; font-weight: 700; letter-spacing: .04em;
      padding: 5px 10px; border-radius: 8px;
    }
    .cham-live {
      width: 6px; height: 6px; border-radius: 50%; background: #fff;
      animation: dap 1.4s ease-in-out infinite;
    }
    @keyframes dap { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .45; transform: scale(.82) } }
    .so-xem {
      background: rgba(0,0,0,.42); backdrop-filter: blur(6px);
      color: rgba(255,255,255,.88); font-size: 11.5px; font-weight: 600;
      padding: 5px 10px; border-radius: 8px; font-variant-numeric: tabular-nums;
    }

    /* Người bán: dựng bằng khối màu, không dùng ảnh — nhẹ và không phụ thuộc tệp ngoài. */
    .san-khau { position: absolute; inset: 0; }
    .vong-song {
      position: absolute; left: 50%; top: 46%; width: 190px; height: 190px;
      margin: -95px 0 0 -95px; border-radius: 50%;
      border: 1px solid rgba(255,122,61,.35);
      animation: lan 3.6s ease-out infinite;
    }
    .vong-song:nth-child(2) { animation-delay: 1.2s; }
    .vong-song:nth-child(3) { animation-delay: 2.4s; }
    @keyframes lan {
      0% { transform: scale(.55); opacity: .85 }
      100% { transform: scale(1.5); opacity: 0 }
    }
    .dau-w {
      position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
      width: 92px; height: auto;   /* height:auto là bắt buộc — thẻ img có height="404" */
      opacity: .92;
    }

    /* Bình luận trôi lên — thứ đặc trưng nhất của bán hàng qua live. */
    .cot-chat {
      position: absolute; left: 14px; bottom: 96px; width: 64%;
      display: flex; flex-direction: column; gap: 7px; z-index: 3;
    }
    .chat {
      display: flex; align-items: center; gap: 8px;
      background: rgba(8,8,15,.72); backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 999px; padding: 6px 12px 6px 6px;
      font-size: 12.5px; color: rgba(255,255,255,.9);
      width: fit-content; max-width: 100%;
      animation: len .5s ease-out both;
    }
    .chat b { font-weight: 700; color: #fff; }
    .chat.hoi { border-color: rgba(251,191,36,.45); }
    .anh-dai-dien {
      width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
      display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff;
    }
    @keyframes len {
      from { opacity: 0; transform: translateY(12px) }
      to { opacity: 1; transform: translateY(0) }
    }

    /* Dải sản phẩm đang ghim — đúng khối "Đang giới thiệu" của trình phát thật. */
    .dai-ghim {
      position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4;
      display: flex; align-items: center; gap: 11px;
      background: rgba(8,8,15,.78); backdrop-filter: blur(10px);
      border: 1.5px solid rgba(255,122,61,.85);
      border-radius: 16px; padding: 9px 11px;
    }
    .anh-sp {
      width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
      background: linear-gradient(140deg, #4B3A5C, #2A2136);
      display: grid; place-items: center; font-size: 17px;
    }
    .ten-sp { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cam); }
    .ten-sp + div { font-size: 13.5px; font-weight: 700; }
    .gia-sp { font-size: 13px; font-weight: 700; color: var(--cam); font-variant-numeric: tabular-nums; }
    .nut-mua {
      margin-left: auto; flex-shrink: 0;
      background: #fff; color: #0B0B12; border-radius: 10px;
      padding: 8px 14px; font-size: 12.5px; font-weight: 700;
    }

    .chu-thich {
      margin: 14px 2px 0; font-size: 12px; color: var(--chu-rat-mo); text-align: center;
    }

    @media (prefers-reduced-motion: reduce) {
      .quang::before, .quang::after, .cham-live, .vong-song, .chat { animation: none !important; }
      .vong-song { opacity: .3 }
    }

/* Liên kết "Quên mật khẩu?" dưới nút đăng nhập — nhỏ, không tranh chỗ với nút chính. */
.quen-mk {
  display: block; text-align: center; margin-top: 12px;
  font-size: 13px; color: rgba(255, 255, 255, .55); text-decoration: none;
}
.quen-mk:hover { color: #fff; text-decoration: underline; }