/* Tách từ login.js (02/09/2026, audit Phase 2.1). */
#bee-login { position: fixed; inset: 0; z-index: var(--z-viewer); display: grid;
  place-items: center; background: var(--bg); font-family: var(--font-ui); }
#bee-login .card { width: min(420px, 92vw); padding: var(--sp-32) var(--sp-32) var(--sp-24); }
/* Chế độ TÀI KHOẢN là POPUP, không phải một trang: app vẫn thấy mờ phía
   sau nên người dùng biết mình chỉ đang mở một hộp, bấm ra ngoài là đóng.
   Còn đăng nhập/đăng ký thì vẫn che kín — lúc đó chưa có gì để quay lại. */
#bee-login.popup { background: var(--overlay); backdrop-filter: blur(3px); }
#bee-login.popup .card { border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: var(--shadow-md); }
#bee-login.popup .card { position: relative; }
#bee-login .ghost { width: 100%; min-height: 42px; margin-top: var(--sp-8);
  border: 1px solid var(--control-line); border-radius: var(--radius-md);
  color: var(--text); background: none; font: inherit; font-weight: var(--weight-semibold); cursor: pointer; }
#bee-login .ghost:hover { background: var(--surface); }
/* Logo DÀI, căn giữa. Hai file cho hai nền: bản gốc kết thúc ở màu TRẮNG
   nên trên nền sáng là mất hút (cạm bẫy #45) — phải đổi theo theme. */
#bee-login .brand { display: grid; place-items: center; margin-bottom: var(--sp-24); }
#bee-login .brand img { height: 34px; width: auto; max-width: 100%; }
#bee-login .brand .logo-light { display: none; }
body.theme-light #bee-login .brand .logo-dark { display: none; }
body.theme-light #bee-login .brand .logo-light { display: block; }
#bee-login h2 { margin: 0 0 var(--sp-4); font-size: var(--text-3xl); font-weight: var(--weight-bold);
  letter-spacing: -0.02em; color: var(--text); text-align: center; }
#bee-login .sub { margin-bottom: var(--sp-24); color: var(--text-faint); font-size: var(--text-md);
  text-align: center; }
#bee-login label { display: block; margin-bottom: var(--sp-12); }
#bee-login label span { display: block; margin-bottom: var(--sp-6); color: var(--text-faint);
  font-size: var(--text-sm); font-weight: var(--weight-bold); }
#bee-login input { width: 100%; min-height: 44px; padding: var(--sp-10) var(--sp-12);
  border: 1px solid var(--control-line); border-radius: var(--radius-md);
  color: var(--text); background: var(--field-bg); font: inherit; }
#bee-login input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#bee-login .primary { width: 100%; min-height: 46px; margin-top: var(--sp-6);
  border: 0; border-radius: var(--radius-md); color: var(--accent-contrast);
  background: var(--accent); font: inherit; font-weight: var(--weight-bold); cursor: pointer; }
#bee-login .primary:disabled { opacity: 0.55; cursor: default; }
/* Nút Google: nền trắng, viền mảnh, logo bên trái — chuẩn của Google. */
#bee-login .gg-nut { display: flex; align-items: center; justify-content: center; gap: var(--sp-12);
  width: 100%; min-height: 48px; margin-top: var(--sp-8);
  border: 1px solid var(--control-line); border-radius: var(--radius-md);
  background: #fff; color: #1f1f1f; font: inherit; font-weight: var(--weight-semibold); font-size: var(--text-base);
  cursor: pointer; }
#bee-login .gg-nut:hover { background: #f6f8fb; }
#bee-login .gg-nut:disabled, #bee-login .gg-nut.dang-cho { opacity: 0.65; cursor: default; }
#bee-login .gg-logo { display: inline-flex; }
#bee-login .gg-huy { display: block; width: 100%; margin-top: var(--sp-10); padding: var(--sp-8);
  border: 0; background: none; color: var(--text-faint); font: inherit;
  font-size: var(--text-md); cursor: pointer; }
#bee-login .gg-huy:hover { color: var(--text); }
#bee-login .skip { display: block; width: 100%; margin-top: var(--sp-20); padding-top: var(--sp-16);
  border: 0; border-top: 1px solid var(--line); background: none;
  color: var(--text-faint); font: inherit; font-size: var(--text-md); cursor: pointer; }
#bee-login .skip:hover { color: var(--text); }
#bee-login .msg { margin-top: var(--sp-14); padding: var(--sp-10) var(--sp-12); border-radius: var(--radius-md);
  border: 1px solid var(--line); color: var(--danger-text);
  font-size: var(--text-md); line-height: var(--leading-normal); white-space: pre-wrap; }
#bee-login .msg.good { color: var(--good-text); }
/* Nút thoát hiểm khi bị chặn vì đủ số máy. Nổi bật hơn .ghost vì lúc đó
   nó là việc DUY NHẤT người dùng làm được — họ đang ở nhà, hai máy kia ở
   công ty, không với tới để gỡ. */
#bee-login .go-may { width: 100%; min-height: 44px; margin-top: var(--sp-10);
  border: 1px solid var(--danger-text); border-radius: var(--radius-md);
  color: var(--danger-text); background: none;
  font: inherit; font-size: var(--text-md); font-weight: var(--weight-semibold); cursor: pointer; }
#bee-login .go-may:hover:not(:disabled) { color: var(--accent-contrast); background: var(--danger-text); }
#bee-login .go-may:disabled { opacity: 0.6; cursor: default; }
#bee-login .tk { margin: 0 0 var(--sp-20); }
#bee-login .tk > div { display: flex; justify-content: space-between; gap: var(--sp-12);
  padding: var(--sp-8) 0; border-bottom: 1px solid var(--line); }
#bee-login .tk dt { display: flex; align-items: center; gap: var(--sp-8);
  color: var(--text-faint); font-size: var(--text-sm); font-weight: var(--weight-bold); }
#bee-login .tk dd { margin: 0; color: var(--text); font-size: var(--text-md); font-weight: var(--weight-semibold); }
#bee-login .tk dd.nho { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-faint); }
/* Popup NEO: nền chỉ để bắt cú bấm ra ngoài, không làm tối cả màn hình —
   người dùng vẫn đang nhìn trang phía sau, đừng che nó đi. */
#bee-login.neo { background: none; backdrop-filter: none; place-items: start; }
/* ⚠ `max-height` + cuộn dọc. Thẻ nay chở CẢ thông tin tài khoản LẪN cài đặt
   (gộp 16/09/2026) nên cao gần gấp đôi; trên màn 768px nó chạy quá đáy màn
   hình và phần Đăng xuất nằm ngoài vùng nhìn. `hidden auto` chứ không phải
   `auto`: chiều ngang vẫn phải cắt để bo góc thẻ còn ăn. */
#bee-login.neo .card {
  width: 320px; padding: 0 0 var(--sp-14);
  overflow: hidden auto; max-height: calc(100vh - var(--sp-20));
}
/* Vạch ngăn giữa phần TÀI KHOẢN và phần CÀI ĐẶT trong thẻ gộp. Kẻ một nét mờ
   là đủ nói "hết phần trên" — nhẹ hơn hẳn một hàng tiêu đề nữa. */
#bee-login .tk-vach {
  height: 1px; margin: var(--sp-14) 0 var(--sp-6);
  background: var(--line);
}
#bee-login .tk-dau { padding: var(--sp-16) var(--sp-18) var(--sp-12); }
#bee-login .tk-ten { display: flex; align-items: center; gap: var(--sp-8);
  font-size: var(--text-base); font-weight: var(--weight-bold); }
#bee-login .tk-ten-chu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bee-login .tk-mail { display: flex; align-items: center; gap: var(--sp-8);
  margin-top: var(--sp-2); color: var(--text-faint); font-size: var(--text-sm); }
#bee-login .tk-mail span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Icon dẫn dòng: nhạt hơn chữ nó dẫn. Nó là dấu hiệu nhận dạng nhanh, không
   phải nội dung — đậm ngang chữ là hai thứ tranh nhau. */
#bee-login .tk-ic { flex: none; color: var(--text-faint); }
#bee-login .tk-ic svg { width: 15px; height: 15px; }

/* ── Huy hiệu gói cạnh tên ────────────────────────────────────────────────
   Trả phí: vương miện + tên gói, chữ tô bằng dải vàng CHẠY NGANG nên nhìn
   như có ánh kim lướt qua. Dải rộng 300% rồi dời vị trí nền — không đổi
   được màu chữ bằng animation thường vì chữ đang lấy màu từ nền cắt theo
   hình chữ (background-clip: text).
   Miễn phí: chữ xám trơn, không viền không nền — nó không phải thứ để khoe. */
#bee-login .tk-huy { flex: none; display: inline-flex; align-items: center; gap: var(--sp-4);
  font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.01em; }
#bee-login .tk-huy .btn-icon { color: var(--vang); }
#bee-login .tk-huy .btn-icon svg { width: 14px; height: 14px; }
#bee-login .tk-huy span:last-child {
  background: linear-gradient(100deg, var(--vang) 20%, var(--vang-sang) 45%, var(--vang) 70%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tk-lap-lanh 3.2s linear infinite;
}
#bee-login .tk-huy.free { color: var(--text-faint); }
@keyframes tk-lap-lanh {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}
/* Máy đặt "giảm chuyển động" thì đứng yên, giữ nguyên màu vàng đặc. */
@media (prefers-reduced-motion: reduce) {
  #bee-login .tk-huy span:last-child { animation: none; background: none; color: var(--vang); }
}
#bee-login .tk-the { display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line); }
#bee-login .tk-the button { padding: var(--sp-10); border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--text-faint); font: inherit; font-size: var(--text-md);
  font-weight: var(--weight-semibold); cursor: pointer; }
#bee-login .tk-the button.active { color: var(--text); border-bottom-color: var(--text); }
#bee-login .tk-than { padding: var(--sp-14) var(--sp-18) var(--sp-4); }
#bee-login .tk-than .primary { display: flex; align-items: center; justify-content: center; gap: var(--sp-8); }
/* ⚠ color: inherit là BẮT BUỘC, không phải cho đẹp.
   .btn-icon trong app.css tự đặt color: var(--text-soft) với độ ưu tiên
   (0,1,0) — thắng mọi thừa kế. Nút này nền --accent (trắng ở nền tối), nên
   icon lấy màu chữ SÁNG rồi nằm trên nền TRẮNG: có vẽ ra nhưng không nhìn
   thấy gì. Đúng cái bẫy đã dính ở .app-bar-nut và mấy nút khác. */
#bee-login .tk-than .primary .btn-icon { color: inherit; }
#bee-login .tk-nhac { margin-top: var(--sp-10); color: var(--warn); font-size: var(--text-sm); line-height: var(--leading-normal); }
#bee-login .tk-caidat { display: grid; gap: var(--sp-4); }
#bee-login .tk-hang { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-10); padding: var(--sp-8) 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
#bee-login .tk-hang code { color: var(--text-faint); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
#bee-login .tk-theme { display: flex; gap: var(--sp-4); }
#bee-login .tk-theme button { padding: var(--sp-6) var(--sp-12); border: 1px solid var(--control-line);
  border-radius: var(--radius-sm); color: var(--text-faint); background: none;
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; }
/* ⚠ Nút đang chọn báo bằng NỀN, không bằng viền.
   Hai lần trước thử bằng viền đều hỏng: --text cho ra nét đen kịt (nền sáng) /
   trắng tinh (nền tối) gắt nhất màn hình, hạ xuống --text-faint 55% vẫn còn
   nặng. Gốc vấn đề là một đường 1px muốn nổi thì buộc phải rất tương phản.
   Nay viền giữ NGUYÊN như nút chưa chọn, khác biệt nằm ở nền + màu chữ:
     chưa chọn : nền trong suốt, chữ --text-faint
     đang chọn : nền --chip-trung-tinh, chữ --text
   --chip-trung-tinh là xám KHÔNG lật theo theme, nên một giá trị đúng cho cả
   nền sáng lẫn nền tối. */
#bee-login .tk-theme button.active {
  color: var(--text);
  border-color: var(--control-line-noi);
  background: var(--chip-trung-tinh);
}
/* Hai nút Sáng/Tối nay chỉ có ICON, không còn chữ.
   ⚠ color: inherit BẮT BUỘC — .btn-icon tự đặt color: var(--text-soft) với độ
   ưu tiên (0,1,0), màu thừa kế không thắng nổi, nên nút đang chọn sẽ không
   sáng lên. Cùng bẫy đã gặp ở .rl-dau-icon, chip thanh dọc và nút hàng dự án. */
#bee-login .tk-theme button .btn-icon { color: inherit; background: none; box-shadow: none; }
#bee-login .tk-theme button svg { width: 16px; height: 16px; }
/* ---- MOT cong tac Giao dien ----
   Mot nut thay cho cap Sang/Toi. No luon o trang thai "dang bat" nen mau chu
   phai la --text, khong phai --text-faint cua nut chua chon. */
/* KHONG VIEN (chu du an yeu cau 20/09/2026). Hai o dieu khien nay nay di
   cung mot loi voi nut "Cai dat AI" ngay duoi (`.tk-nut-tran`): tran, khong
   vien, khong nen — bang cai dat chi con mot ngon ngu thay vi hai. Chu de
   `--text` chu khong `--text-soft`: day la GIA TRI DANG DUNG, phai doc ra
   ngay, khac voi nhan hanh dong cua nut "Cai dat AI".
   Nen chi hien luc re chuot, du de biet bam duoc. */
/* ⚠ PHAI viet `.tk-theme button.tk-theme-1`, khong duoc chi `.tk-theme-1`.
   Luat `#bee-login .tk-theme button` o tren co do dac hieu (1,1,1) con
   `#bee-login .tk-theme-1` chi (1,1,0), nen `border: 0` thua va nut van co
   vien 1px. Do 20/09/2026 moi bat duoc: `borderTopWidth` van la 1px. */
#bee-login .tk-theme button.tk-theme-1 {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  border: 0; background: none; color: var(--text);
}
#bee-login .tk-theme button.tk-theme-1:hover { background: var(--surface); }

/* ---- O CHON CO CHU ----
   Hang 5 nut cu phai nhet vao ~300px con lai cua card 420px nen moi nut chi
   con ~30px. O chon tra lai cho de viet du "100%" va mot dong phu.
   Danh sach dat `position: absolute` trong khung nay; card khong co
   `overflow` nao nen no khong bi cat. */
#bee-login .tk-chon { position: relative; }
#bee-login .tk-chon-nut {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  min-width: 96px; justify-content: space-between;
  padding: var(--sp-6) var(--sp-10);
  /* Khong vien — xem ly do o `.tk-theme-1`. Dau mui xuong la thu bao day la
     o chon xo xuong, khong can them mot khung 1px nua. */
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
#bee-login .tk-chon-nut:hover { background: var(--surface); }
#bee-login .tk-chon-mui { color: var(--text-faint); background: none; box-shadow: none; }
#bee-login .tk-chon-mui svg { width: 13px; height: 13px; display: block; }
#bee-login .tk-chon-nut[aria-expanded="true"] .tk-chon-mui { transform: rotate(180deg); }

#bee-login .tk-chon-ds {
  /* z-index chi la thu tu NOI BO: o chon nam trong #bee-login,
     ma khoi do da o --z-viewer nen no khong dua voi lop ben ngoai. */
  position: absolute; top: calc(100% + var(--sp-4)); right: 0; z-index: var(--z-pop);
  min-width: 230px;
  display: grid; gap: var(--sp-2);
  padding: var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--panel); box-shadow: var(--shadow-lg);
}
/* Khong du cho ben duoi thi xo NGUOC LEN — lop do JS dat sau khi DO, xem
   `login.js#moDs`. */
#bee-login .tk-chon-ds.len { top: auto; bottom: calc(100% + var(--sp-4)); }
#bee-login .tk-chon-ds[hidden] { display: none; }
#bee-login .tk-chon-ds button {
  display: flex; align-items: center; gap: var(--sp-8);
  width: 100%; padding: var(--sp-6) var(--sp-8);
  border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text-soft);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold);
  text-align: left; cursor: pointer;
}
#bee-login .tk-chon-ds button:hover { background: var(--surface); color: var(--text); }
#bee-login .tk-chon-ds button.dang-chon { color: var(--text); background: var(--surface-mo); }
#bee-login .tk-chon-so { flex: none; min-width: 42px; font-variant-numeric: tabular-nums; }
/* Dong phu noi ro muc nao la muc app tu chon cho man hinh nay. Truoc day viec
   do do mot dau cham • rong 4px ganh — co nguoi dung man 2K bam 100% roi tuong
   app hong vi chu be di, that ra ho vua bo muc 125% app da chon san. */
#bee-login .tk-chon-phu {
  flex: 1 1 auto; min-width: 0;
  color: var(--text-faint); font-size: var(--text-2xs); font-weight: var(--weight-medium);
}
/* Dau check CHI hien o dong dang chon. Giu cho cua no o moi dong (visibility
   chu khong phai display) de cac dong khong nhay ngang khi doi lua chon. */
#bee-login .tk-chon-dau {
  flex: none; margin-left: auto;
  visibility: hidden; color: var(--text); background: none; box-shadow: none;
}
#bee-login .tk-chon-dau svg { width: 14px; height: 14px; display: block; }
#bee-login .tk-chon-ds button.dang-chon .tk-chon-dau { visibility: visible; }

/* ── Hàng PHIÊN BẢN: số hiệu · huy hiệu · nút kiểm ───────────────────────── */
#bee-login .tk-ver { display: inline-flex; align-items: center; gap: var(--sp-6); }
/* Số hiệu trông như CHỮ, không như nút: nó là thông tin, gạch chân lúc rê chuột
   là đủ báo bấm được. `user-select: text` vì đây là thứ người ta bôi đen chép
   vào tin nhắn báo lỗi. */
#bee-login .tk-ver-so {
  padding: 0; border: 0; background: none; color: var(--text);
  font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; user-select: text;
}
#bee-login .tk-ver-so:hover, #bee-login .tk-ver-so:focus-visible { text-decoration: underline; }
/* Huy hiệu trạng thái. Mặc định là "Mới nhất" — tin BÌNH THƯỜNG, nên dùng nền
   xanh rất nhạt chứ không phải màu cảnh báo; chỉ khi có bản mới hoặc hỏng thì
   mới đổi màu (`.tot` / `.xau`). */
#bee-login .tk-ver-nhan {
  padding: var(--sp-2) var(--sp-8); border-radius: var(--radius-pill);
  background: var(--brand-mo); color: var(--brand-dam);
  font-size: var(--text-xs); font-weight: var(--weight-bold); white-space: nowrap;
}
#bee-login .tk-ver-nhan.tot { background: var(--ok-bg); color: var(--ok); }
#bee-login .tk-ver-nhan.xau { background: var(--danger-bg); color: var(--delete-text); }
#bee-login .tk-ver-kiem {
  display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--text-faint); cursor: pointer;
}
#bee-login .tk-ver-kiem:hover:not(:disabled) { background: var(--surface); color: var(--text); }
#bee-login .tk-ver-kiem:disabled { cursor: default; opacity: 0.6; }
#bee-login .tk-ver-kiem .btn-icon { background: none; box-shadow: none; color: inherit; }
#bee-login .tk-ver-kiem.dang-quay .tk-quay { animation: beeQuayTk 0.9s linear infinite; }

#bee-login .tk-quay { display: inline-flex; width: 13px; height: 13px; }
#bee-login .tk-quay svg { width: 13px; height: 13px; }
/* Chỉ quay khi ĐANG kiểm — icon quay mãi thì thành đồ trang trí, người dùng
   hết phân biệt được lúc nào app thật sự đang làm việc. */
/* ⚠ LỚP NÀY TỪNG BỊ XOÁ RỒI PHẢI ĐƯA LẠI (16/09/2026).
   Lần dọn mã chết trước gỡ nó vì nút "Kiểm tra cập nhật" đã đổi sang nút icon —
   lúc đó đúng là không còn ai dùng. Nay hàng "Cài đặt AI" dùng lại đúng kiểu
   nút-trần-trong-thẻ ấy. Bài học: trước khi xoá một lớp dùng chung, xem nó là
   RÁC hay là một KIỂU còn giá trị; kiểu thì để lại rẻ hơn dựng lại. */
#bee-login .tk-nut-tran {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-4) var(--sp-2); border: 0; border-radius: var(--radius-sm);
  color: var(--text-soft); background: none; font: inherit;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer;
}
#bee-login .tk-nut-tran:hover:not(:disabled) { color: var(--text); }
#bee-login .tk-nut-tran:disabled { opacity: 0.7; cursor: default; }
#bee-login .tk-nut-tran .btn-icon { background: none; box-shadow: none; color: inherit; }
#bee-login .tk-nut-tran svg { width: 14px; height: 14px; }
#bee-login .tk-nut-tran.dang-quay .tk-quay { animation: beeQuayTk 0.9s linear infinite; }
@keyframes beeQuayTk { to { transform: rotate(360deg); } }
/* ── Popup neo cạnh nút: màn che + viền trên bề mặt nổi ───────────────────
   Bản trước `#bee-login.neo` khai `background: none; backdrop-filter: none`
   nên nhìn XUYÊN THẲNG xuống app phía sau — đo được backgroundColor là
   rgba(0,0,0,0), chữ trong bảng lẫn với chữ của trang. Hai luật dưới đây phải
   đứng SAU luật đó trong tệp mới đè được.
   ⚠ `:not(.active)` ở nút theme: nút đang chọn có viền `--text` sáng hẳn, mà
   luật này đứng sau và cùng độ ưu tiên — không loại trừ là nó nuốt mất. */
#bee-login.neo { background: var(--overlay-nhe); backdrop-filter: blur(2px); }
#bee-login.neo .card,
#bee-login.neo .ghost,
#bee-login.neo .tk-theme button:not(.active) { border-color: var(--control-line-noi); }

#bee-login .tk-ketqua { margin: var(--sp-2) 0 0; padding: var(--sp-8) var(--sp-10); border-radius: var(--radius-sm);
  background: var(--surface-strong); color: var(--text-soft);
  font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-normal); }
#bee-login .tk-ketqua.tot { color: var(--ok); }
#bee-login .tk-ketqua.xau { color: var(--delete-text); }
#bee-login.neo .primary, #bee-login.neo .ghost { width: calc(100% - 36px); margin: var(--sp-8) var(--sp-18) 0; }
#bee-login .note { margin-top: var(--sp-14); color: var(--text-faint); font-size: var(--text-sm); line-height: var(--leading-normal); }
.bee-account { display: inline-flex; align-items: center; gap: var(--sp-8); }