/* index.css - CSS rieng cua index.html (dung chung: css/common.css) */
/* ============================================================
   Tokens — đồng bộ với index.html (Modern Science Museum)
   ============================================================ */
:root{--space-top:#0a1030;--space-mid:#111a44;--space-low:#1b2a63;--glass:rgba(20,30,66,0.55);--glass-strong:rgba(16,24,56,0.72);--glass-brd:rgba(150,180,255,0.18);--glass-brd-strong:rgba(160,190,255,0.35);--sun:#ffcf6b;--sun-warm:#ff9d3d;--accent:#5fd3ff;--accent-2:#8f7bff;--good:#63e6a8;--radius-xl:26px;--radius-lg:18px;--radius-md:13px;--shadow-soft:0 18px 50px -18px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.3);--blur:22px;--font-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;--font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;}
html,body{height:100%;}
body{background:radial-gradient(ellipse at 50% -10%, var(--space-low) 0%, var(--space-mid) 40%, var(--space-top) 75%, #06091c 100%);min-height:100vh;overflow-x:hidden;text-rendering:optimizeLegibility;position:relative;}
:focus-visible{outline:2px solid var(--accent);}

/* ---- Nền sao ---- */
#stars,#stars2{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-repeat:repeat;
}
#stars{
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 60% 70%, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, #fff, transparent),
    radial-gradient(1px 1px at 40% 80%, #bcd0ff, transparent),
    radial-gradient(1px 1px at 90% 50%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 60%, #e8f0ff, transparent);
  background-size:600px 600px;
  opacity:.7;
  animation:drift 120s linear infinite;
}
#stars2{
  background-image:
    radial-gradient(1px 1px at 15% 45%, #fff, transparent),
    radial-gradient(1px 1px at 75% 15%, #d8e6ff, transparent),
    radial-gradient(1px 1px at 55% 90%, #fff, transparent),
    radial-gradient(1px 1px at 35% 25%, #cfe0ff, transparent);
  background-size:400px 400px;
  opacity:.4;
  animation:drift 200s linear infinite reverse;
}
@keyframes drift{from{background-position:0 0}to{background-position:600px 600px}}

/* ---- Mặt trời phát sáng góc trên ---- */
.sun-glow{
  position:fixed;top:-160px;left:50%;transform:translateX(-50%);
  width:520px;height:520px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(255,207,107,.35), rgba(255,157,61,.12) 45%, transparent 70%);
  filter:blur(6px);
}

/* ============================================================
   Nội dung
   ============================================================ */
.wrap{
  position:relative;z-index:2;
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:40px 22px 60px;
}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  color:var(--ink-soft);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:var(--shadow-soft);
  animation:fadeUp .7s var(--ease) both;
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good);}

h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(42px, 8vw, 84px);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:26px 0 0;
  animation:fadeUp .7s var(--ease) .08s both;
}
h1 .grad{
  background:linear-gradient(120deg, var(--sun) 0%, var(--accent) 55%, var(--accent-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{
  max-width:620px;
  color:var(--ink-soft);
  font-size:clamp(16px, 2.4vw, 20px);
  line-height:1.6;
  margin:22px auto 0;
  animation:fadeUp .7s var(--ease) .16s both;
}

/* ---- Nút CTA ---- */
.actions{
  display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center;
  margin-top:38px;
  animation:fadeUp .7s var(--ease) .24s both;
}
.cta-img{
  height:76px;width:auto;max-width:120px;object-fit:contain;
  border-radius:var(--radius-md);
  filter:drop-shadow(0 10px 24px rgba(95,211,255,.35));
  transition:transform .25s var(--ease);
}
.cta-img:hover{transform:translateY(-3px) scale(1.03);}
.btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:16px 30px;border-radius:var(--radius-lg);
  font-family:var(--font-display);font-weight:600;font-size:17px;
  text-decoration:none;border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-primary{
  color:#0a1030;
  background:linear-gradient(120deg, var(--sun) 0%, var(--sun-warm) 100%);
  box-shadow:0 14px 34px -10px rgba(255,157,61,.6), 0 0 0 1px rgba(255,255,255,.12) inset;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 44px -10px rgba(255,157,61,.75), 0 0 0 1px rgba(255,255,255,.2) inset;}
.btn-primary .arrow{transition:transform .25s var(--ease);}
.btn-primary:hover .arrow{transform:translateX(4px);}
.btn-ghost{
  color:var(--ink);
  background:var(--glass);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--glass-brd-strong);}

/* ---- Thẻ tính năng ---- */
.features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px;max-width:900px;width:100%;margin:64px auto 0;
  animation:fadeUp .7s var(--ease) .32s both;
}
.card{
  background:var(--glass);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);backdrop-filter:blur(var(--blur)) saturate(160%);
  border-radius:var(--radius-lg);padding:26px 22px;text-align:left;
  box-shadow:var(--shadow-soft);
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--glass-brd-strong);}
/* ⚠️ ICON CĂN GIỮA THẺ (26/08/2026, chủ dự án yêu cầu). Chữ trong thẻ vẫn căn TRÁI —
   `.card{text-align:left}` ngay trên — nên phải đặt riêng ở đây; đổi `text-align` của
   cả `.card` là kéo theo cả tiêu đề lẫn đoạn mô tả.
   ⚠️ `text-align` chứ không phải `margin:0 auto`: nội dung là một EMOJI (nút văn bản),
      không phải khối có bề rộng — `margin:auto` trên một `div` block chiếm hết bề ngang
      thì không dịch được gì. */
.card .ico{font-size:28px;margin-bottom:12px;text-align:center;}
.card h3{font-family:var(--font-display);font-weight:600;font-size:18px;margin:0 0 6px;}
.card p{color:var(--ink-soft);font-size:14px;line-height:1.55;margin:0;}

footer{
  position:relative;z-index:2;
  text-align:center;color:var(--ink-faint);font-size:13px;
  padding:30px 20px 40px;
}
footer a{color:var(--ink-soft);text-decoration:none;}
footer a:hover{color:var(--accent);}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ============================================================
   Nhân vật bay lơ lửng (b1, m4, q1)
   - Nằm ở z-index:1 => luôn ở SAU nội dung (.wrap z-index:2),
     nên đường bay & điểm dừng không đè lên chữ / nút.
   ============================================================ */
.floaty{
  position:fixed;z-index:1;pointer-events:none;
  width:clamp(82px, 9vw, 124px);        /* đồng bộ kích thước mọi nhân vật */
  will-change:transform;
}
/* ⚠️ `<picture>` là phần tử INLINE nên nó tự thêm một khoảng trắng dưới ảnh (đường
   cơ sở chữ) và không nhận `width:100%` của ảnh bên trong một cách gọn gàng. Bọc
   `<picture>` quanh 9 ảnh trang trí (25/08/2026, để phục vụ AVIF/WebP đã hạ cỡ —
   xem `scratchpad/make_landing_assets.py`) nên phải khai nó thành block. */
.floaty picture,.ic picture{display:block;}
.floaty img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.45));}

/* b1 to hơn để trông bằng cho1 (tỉ lệ nhân vật trong ảnh khác nhau) */
.f-b1{width:clamp(112px, 12vw, 168px);}
/* raica1: nhân vật trong ảnh nhỏ & khó nhìn → phóng khung to hẳn (> các nhân vật khác) */
.f-raica1{width:clamp(158px, 17vw, 240px);}
/* Làm raica1 sáng hơn (giữ đổ bóng) */
.f-raica1 img{filter:brightness(1.32) saturate(1.06) drop-shadow(0 12px 26px rgba(0,0,0,.45));}

/* Điểm dừng — phân bố đều quanh rìa màn hình, tránh cột nội dung ở giữa và
   tránh góc dưới-trái (nơi 3qok đáp + nút Contact Us). */
.f-raica1{top:12%;left:9%;}     /* góc trên-trái */
.f-b1    {top:46%;left:5%;}     /* rìa trái, giữa */
.f-luna1 {top:17%;left:89%;}    /* góc trên-phải */
.f-cho1  {top:35%;left:78%;}    /* trên-phải, dưới luna1 */
.f-m1    {top:62%;left:92%;}    /* rìa phải, dưới */

/* Thời gian xuất hiện lệch nhau (stagger) để không trùng lúc. */
/* --- raica1: xuất hiện từ góc TRÊN-TRÁI --- */
.f-raica1{animation:flyInTL 1.9s var(--ease) 0s both;}
.f-raica1 img{animation:bob 4.4s ease-in-out 1.9s infinite;}

/* --- b1: bay vào từ TRÁI --- */
.f-b1{animation:flyInLeft 1.8s var(--ease) .3s both;}
.f-b1 img{animation:bob 4.2s ease-in-out 2.1s infinite;}

/* --- luna1 + cho1: CÙNG bay từ góc TRÊN-PHẢI xuống --- */
.f-luna1{animation:flyInTR 2s var(--ease) .9s both;}
.f-luna1 img{animation:bob 4.6s ease-in-out 2.9s infinite;}
.f-cho1{animation:flyInTR 2.1s var(--ease) .9s both;}
.f-cho1 img{animation:bob 5s ease-in-out 3s infinite;}

/* --- m1: bay vào từ PHẢI --- */
.f-m1{animation:flyInRight 2.1s var(--ease) 1.3s both;}
.f-m1 img{animation:bob 4.8s ease-in-out 3.4s infinite;}

@keyframes flyInLeft{
  0%  {transform:translateX(-130vw);opacity:0;}
  55% {opacity:1;}
  100%{transform:translateX(0);opacity:1;}
}
@keyframes flyInRight{
  0%  {transform:translateX(130vw);opacity:0;}
  55% {opacity:1;}
  100%{transform:translateX(0);opacity:1;}
}
@keyframes flyInTL{
  0%  {transform:translate(-70vw,-82vh);opacity:0;}
  55% {opacity:1;}
  100%{transform:translate(0,0);opacity:1;}
}
@keyframes flyInTR{
  0%  {transform:translate(70vw,-82vh);opacity:0;}
  55% {opacity:1;}
  100%{transform:translate(0,0);opacity:1;}
}
@keyframes bob{
  0%,100%{transform:translateY(0)     rotate(-2deg);}
  50%    {transform:translateY(-14px) rotate(2deg);}
}

/* ============================================================
   Màn kịch: qg1 (từ trên-trái) + qb1 (đi bộ từ dưới-phải) + q1 (bay chéo, tự xoay)
   → sau 5s chụm quanh qg1 (không chèn nhau) rồi hợp thành 3qok với hào quang,
     thu nhỏ dần và trôi xuống góc dưới-trái; hiện nút Contact Us bên phải.
   Điều phối bằng JS; nằm z-index:1 (sau nội dung), không đè chữ.
   ============================================================ */
.iscene{position:fixed;inset:0;z-index:1;pointer-events:none;}
.ic{position:fixed;left:16%;top:62%;transform:translate(-50%,-50%);}
.ic .mv{opacity:0;transition:transform 1.6s cubic-bezier(.42,0,.2,1), opacity .8s ease;}
.ic .bob{display:block;position:relative;animation:bob 4s ease-in-out infinite;}
.ic .spin{display:block;animation:spin 7s linear infinite;}   /* q1 tự quay tròn quanh mình */
.ic img{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.45));}
/* Đồng bộ kích thước q1 = qg1 = qb1 */
.ic-qg1{width:clamp(82px, 9vw, 124px);}
.ic-qb1{width:clamp(82px, 9vw, 124px);}
.ic-q1 {width:clamp(82px, 9vw, 124px);}
.ic-3qok{width:clamp(120px, 14vw, 192px);}
.ic-3qok .mv3{opacity:0;transition:transform 1.7s cubic-bezier(.5,0,.2,1), opacity .5s ease;}  /* thu nhỏ + trôi xuống */
.ic-3qok.show .mv3{opacity:1;}
@keyframes spin{to{transform:rotate(360deg);}}
/* q1 bị "văng ra": quỹ đạo lung tung rồi dừng ở góc phải-trên (lệch so với neo .ic) */
@keyframes flingTR{
  0%  {transform:translate(18vw, 92vh);opacity:0;}
  12% {opacity:1;}
  30% {transform:translate(-16vw,-16vh);}
  48% {transform:translate(50vw, 16vh);}
  66% {transform:translate(4vw, -44vh);}
  84% {transform:translate(58vw,-28vh);}
  100%{transform:translate(64vw,-52vh);opacity:1;}
}

/* Dấu hỏi chấm nhấp nháy trên đầu qg1 */
.qmark{position:absolute;left:50%;top:-1.35em;transform:translateX(-50%);
  font:800 clamp(20px,2.4vw,30px)/1 var(--font-display);color:var(--sun);
  text-shadow:0 0 14px rgba(255,207,107,.95);animation:qblink 1s steps(1,end) infinite;}
@keyframes qblink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

/* Hai má hồng lúc ẩn lúc hiện của qb1 (vị trí gần đúng — có thể tinh chỉnh) */
.cheek{position:absolute;top:50%;width:20%;height:13%;border-radius:50%;
  background:radial-gradient(circle, rgba(255,120,150,.9), rgba(255,120,150,0) 70%);
  animation:cheekPulse 1.5s ease-in-out infinite;}
.cheek-l{left:16%;}
.cheek-r{right:16%;}
@keyframes cheekPulse{0%,100%{opacity:0;}50%{opacity:.95;}}

/* Vòng vàng phát sáng khi tạo thành 3qok */
.ic-3qok img{position:relative;z-index:1;}
.ic-3qok.show img{animation:pop .6s var(--ease) both;}
.ring{position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,207,107,0) 52%, rgba(255,207,107,.5) 64%, rgba(255,180,80,.18) 78%, transparent 86%);
  box-shadow:0 0 70px 16px rgba(255,190,90,.5);opacity:0;}
.ic-3qok.show .ring{opacity:1;animation:ringPulse 2.4s ease-in-out infinite;}
.burst{position:absolute;left:50%;top:50%;width:70%;height:70%;
  transform:translate(-50%,-50%) scale(.3);border:3px solid rgba(255,207,107,.9);border-radius:50%;opacity:0;}
.ic-3qok.show .burst{animation:burst 1s ease-out both;}
@keyframes pop{0%{transform:scale(.2);opacity:0;}60%{transform:scale(1.15);opacity:1;}100%{transform:scale(1);opacity:1;}}
@keyframes ringPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.75;}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1;}}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.3);opacity:.9;}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0;}}

/* Nút Contact Us — xuất hiện bên phải 3qok sau khi nó đáp xuống góc dưới-trái */
.contact-cta{
  position:fixed;z-index:15;left:0;top:0;transform:translateY(-50%);
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:var(--radius-lg);
  font-family:var(--font-display);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;
  color:#0a1030;background:linear-gradient(120deg, var(--sun) 0%, var(--sun-warm) 100%);
  box-shadow:0 14px 34px -10px rgba(255,157,61,.6), 0 0 0 1px rgba(255,255,255,.12) inset;
  opacity:0;pointer-events:none;transition:opacity .5s ease, box-shadow .25s var(--ease), transform .25s var(--ease);
}
.contact-cta.show{opacity:1;pointer-events:auto;}
.contact-cta:hover{transform:translateY(-50%) translateY(-2px);box-shadow:0 20px 44px -10px rgba(255,157,61,.75), 0 0 0 1px rgba(255,255,255,.2) inset;}
.contact-cta svg{width:17px;height:17px;}

/* Màn hình hẹp: ẩn để không lấn vào nội dung */
@media (max-width:880px){
  .floaty{display:none;}
  .iscene{display:none;}
  .contact-cta{display:none;}
}

/* ⚠️⚠️ CHIP `.badge` PHẢI NẰM DƯỚI NÚT NGÔN NGỮ TRÊN MÁY HẸP — thêm 26/08/2026.
   `.lang-pick` là `position:fixed; top:20px; right:20px` (xem dưới), tức nó KHÔNG
   chiếm chỗ trong luồng; còn `.badge` thì căn giữa trong `.wrap` và giãn theo độ dài
   chữ. Hai thứ đó gặp nhau ở góc trên bên phải, và chip chui xuống dưới cái nút.

   ⚠️ ĐÂY LÀ LỖI CŨ, KHÔNG PHẢI LỖI MỚI — nhưng lần đổi câu chữ 26/08/2026 làm nó
      RỘNG RA. Số đo (Chromium thật, `.lang-pick` bản 62px):
        chữ cũ "Bản đồ 3D tương tác"     (rộng 237px) → đè nhau ở ≤ 360px
        chữ mới "Khoa học · Công nghệ…"  (rộng 324px) → đè nhau ở ≤ 480px
      Tức nó vỡ đúng trên nhóm máy mà đợt sửa câu chữ đó nhắm tới (lưu lượng quảng
      cáo Facebook phần lớn là điện thoại). Sửa câu chữ mà không sửa chỗ này là đổi
      một lời hứa rõ hơn lấy một cái chip bị cắt ngang.

   ⚠️ VÌ SAO ĐẨY XUỐNG (`margin-top`) CHỨ KHÔNG THU HẸP CHIP hay CHỪA LỀ PHẢI:
      `.badge` căn giữa nên chừa `padding-right` ở `.wrap` sẽ kéo LỆCH TÂM cả h1,
      lead và nút — sửa một chip mà làm lệch cả trang. Còn ép `max-width` cho chip
      thì ở 320px nó chỉ còn ~150px, tức chữ xuống hai dòng trong một viên thuốc.
      Đẩy xuống dưới đáy nút thì hết đè ở MỌI bề rộng, và không đụng gì khác.

   ⚠️ 34px = 20px (`top` của nút) + 34px (cao nút) − 20px (đỉnh cũ của chip), làm
      tròn lên cho khoảng thở. Mốc 620px chọn rộng hơn 480px đo được để còn chỗ cho
      chữ dài hơn ở các ngôn ngữ sắp thêm (`lang-soon` ở js/user-menu.js).
   ⚠️ Đo lại sau khi sửa: 0 chỗ đè trên 64 tổ hợp (vi/en × 8 bề rộng 320→760 × 4 bề
      cao 600→1000), không cắt đỉnh, không tràn ngang. `.wrap` là
      `justify-content:center` nên ở khung cao thì chip vốn đã nằm thấp hơn — thêm
      lề chỉ có tác dụng ở đúng lúc nội dung tràn và bị ghim lên đỉnh. */
@media (max-width:620px){
  .badge{margin-top:34px;}
}

/* ---- Nút chuyển ngôn ngữ ---- */
/* ⚠️ DINH VI NAY NAY THUOC `.lang-pick` (vo cua menu tha), KHONG con thuoc
   `.lang-switch`. Tu 20/08/2026 `.lang-switch` la DANH SACH BEN TRONG tam tha
   (css/user-menu.css lo), nen de nguyen dinh vi o day thi ca cai danh sach do
   bi ghim `position:fixed` vao goc man hinh.
   ⚠️ `backdrop-filter` o day la CO Y va vo hai: `.um-pop` la `position:absolute`
      nen no neo theo `.um` (co `position:relative`). Neu ngay nao doi tam tha
      sang `position:fixed` thi PHAI bo blur nay truoc — mot to tien co
      `backdrop-filter` tro thanh KHOI CHUA cua moi con `fixed`, va tam tha se
      neo vao chinh cai chip nay chu khong vao khung nhin (bai hoc da tra gia
      voi `.statusbar` o dashboard). */
.lang-pick{position:fixed;top:20px;right:20px;z-index:20;
  animation:fadeUp .7s var(--ease) both;}
.lang-pick > .um-btn{background:var(--glass);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));
  box-shadow:var(--shadow-soft);}
/* ⚠️ HÌNH DẠNG nút lấy từ css/common.css (gộp 19/08/2026). Màn chào từng khai
   `font-size:13px` + `padding:7px 14px` nên chip ở đây 40×30 — to hơn 11 màn khác
   một nửa. Vị trí `fixed` phía trên VẪN giữ: thẻ này nổi ở góc màn chào, không nằm
   trong header như các trang app. Màu nhấn vàng nắng ở dưới cũng giữ. */
.um-pop .lang-switch button{transition:background .2s var(--ease), color .2s var(--ease);}
.um-pop .lang-switch button.active{
  color:#0a1030;
  background:linear-gradient(120deg, var(--sun) 0%, var(--sun-warm) 100%);
  box-shadow:0 6px 16px -6px rgba(255,157,61,.6);
}

/* ============================================================
   Màn hình Đăng nhập / Đăng ký (mở khi bấm "Tính năng nổi bật")
   ============================================================ */
.auth-overlay{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,9,28,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),visibility .3s;
}
.auth-overlay.show{opacity:1;visibility:visible;pointer-events:auto;}
.auth-card{
  position:relative;width:100%;max-width:400px;
  background:var(--glass-strong);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);backdrop-filter:blur(var(--blur)) saturate(160%);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-soft);
  padding:34px 30px 30px;text-align:left;
  transform:translateY(12px) scale(.97);transition:transform .34s var(--ease);
}
.auth-overlay.show .auth-card{transform:none;}
.auth-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--glass-brd);background:rgba(255,255,255,.06);color:var(--ink-soft);
  transition:background .16s,color .16s;
}
.auth-close:hover{background:rgba(255,255,255,.12);color:var(--ink);}
.auth-close svg{width:16px;height:16px;}
/* Logo dùng chung ở `css/common.css`; ô vuông gradient + <strong>AstroQ</strong>
   đã bỏ vì wordmark có sẵn chữ đó. */
.auth-brand{display:flex;align-items:center;margin-bottom:6px;--logo-h:30px;}
.auth-title{font-family:var(--font-display);font-weight:700;font-size:22px;margin:14px 0 4px;color:var(--ink);}
.auth-sub{font-size:13px;color:var(--ink-soft);margin:0 0 20px;line-height:1.5;}
.auth-field{margin-bottom:14px;}
.auth-field label{display:block;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft);margin-bottom:6px;}
.auth-field input{
  width:100%;border:1px solid var(--glass-brd);background:rgba(255,255,255,.06);color:var(--ink);
  border-radius:var(--radius-md);padding:12px 13px;font-size:14px;font-family:var(--font-body);
  transition:border-color .2s,background .2s;
}
.auth-field input::placeholder{color:var(--ink-faint);}
.auth-field input:focus{outline:none;border-color:var(--accent);background:rgba(95,211,255,.08);}
/* ⚠️ VÙNG CHẠM CỦA BA Ô ĐĂNG KÝ ĐO ĐƯỢC **43px** TRÊN ĐIỆN THOẠI (29/08/2026) —
   dưới cả mốc TỐI THIỂU 44px của WCAG 2.5.5, mà đây là ba ô người dùng phải chạm
   trúng thì mới có tài khoản. Sàn của dự án là **48px, không phải 44** (lý do đầy
   đủ ở `css/common.css`: đặt đúng mốc tối thiểu là không còn biên an toàn nào, và
   dự án đã có một ca phép kiểm chập chờn thật vì lý do đó).
   ⚠️ Gắn `pointer: coarse` chứ không gắn theo bề rộng — bóp hẹp cửa sổ Chrome trên
      laptop vẫn là chuột, ở đó 48px làm popup phình vô cớ.
   ⚠️ Dùng `min-height`, KHÔNG `height`: `.pw-wrap input[type]` còn ghi đè
      `padding-right` cho nút hiện/ẩn mật khẩu, khoá cứng chiều cao là cắt chữ. */
@media (pointer: coarse){
  .auth-field input{min-height:48px;}
  /* Nút gửi đo được 47px — qua mốc 44 nhưng vẫn dưới sàn 48 của dự án, và nó là
     HÀNH ĐỘNG CHÍNH của cả popup. Cùng một lý do, sửa cùng một lượt. */
  .auth-submit{min-height:48px;}
}
.auth-submit{
  width:100%;margin-top:6px;border:none;cursor:pointer;
  padding:14px;border-radius:var(--radius-lg);font-family:var(--font-display);font-weight:600;font-size:15px;color:#0a1030;
  background:linear-gradient(120deg, var(--sun) 0%, var(--sun-warm) 100%);
  box-shadow:0 14px 34px -12px rgba(255,157,61,.6), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition:transform .2s var(--ease),filter .2s;
}
.auth-submit:hover{transform:translateY(-2px);filter:brightness(1.05);}
/* Quên mật khẩu — nút phẳng, nằm phải, ngay trên nút Đăng nhập */
.auth-forgot{display:block;margin:-6px 0 12px auto;padding:2px 0;border:none;background:none;
  cursor:pointer;font-family:var(--font-body);font-size:12.5px;color:var(--ink-faint);
  transition:color .18s;}
.auth-forgot:hover{color:var(--accent);text-decoration:underline;}
.auth-forgot[disabled]{opacity:.5;cursor:progress;}
.auth-alt{margin-top:18px;font-size:13px;color:var(--ink-soft);text-align:center;}
.auth-switch{background:none;border:none;cursor:pointer;color:var(--accent);font-family:var(--font-display);font-weight:600;font-size:13px;padding:0 2px;text-decoration:underline;text-underline-offset:2px;}
.auth-switch:hover{color:var(--sun);}
.auth-pane[hidden]{display:none;}

/* ---- Màn chờ xác minh email ---- */
.auth-verify{text-align:center;}
.verify-ic{width:60px;height:60px;margin:6px auto 0;border-radius:50%;display:grid;place-items:center;
  color:var(--accent);background:rgba(95,211,255,.12);border:1px solid rgba(95,211,255,.4);
  box-shadow:0 0 28px -10px var(--accent);animation:verifyIn .45s var(--jelly) both;}
.verify-ic svg{width:28px;height:28px;}
@keyframes verifyIn{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}
.verify-mail{margin:0 0 18px;font-family:var(--font-mono);font-size:13.5px;word-break:break-all;
  color:var(--ink);padding:9px 14px;border-radius:10px;
  background:rgba(8,14,38,.6);border:1px solid var(--glass-brd);}
.auth-verify .auth-alt{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;}
.auth-verify .auth-alt .sep{opacity:.45;}
.verify-note{margin:14px 0 0;font-size:12px;line-height:1.55;color:var(--ink-faint);}

/* Thông báo đăng nhập thành công */
.auth-toast{
  position:fixed;top:20px;left:50%;z-index:60;transform:translateX(-50%) translateY(-14px);
  padding:11px 18px;border-radius:999px;
  background:var(--glass-strong);border:1px solid var(--glass-brd-strong);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:var(--shadow-soft);
  color:var(--ink);font-size:13.5px;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.auth-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---- Chỉ báo môi trường ----
   Chỉ dựng khi đang xem ở máy hoặc đã ép ?api=… (js/firebase-auth-ui.js).
   Trên astroq.org với cấu hình mặc định thì phần tử này không tồn tại. */
.env-badge{
  position:fixed;left:12px;bottom:12px;z-index:70;
  padding:6px 11px;border-radius:999px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.04em;
  background:rgba(8,14,38,.82);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--ink-faint);pointer-events:auto;cursor:help;user-select:none;
}
/* Vàng = đang gọi lên API thật dù đang ngồi ở máy → cẩn thận, dữ liệu là dữ liệu thật */
.env-badge--prod{color:#ffcf6b;border-color:rgba(255,207,107,.45);}
.env-badge--local{color:#5fd3ff;border-color:rgba(95,211,255,.45);}
.env-badge--custom{color:#c084fc;border-color:rgba(192,132,252,.45);}