/* ============================================================
   AUTOSALES PRO — CỔNG ĐĂNG NHẬP (Đợt A2)
   Toàn màn hình, chặn trước khi vào app. Dựng bằng JS (tai-khoan.js),
   đứng ngoài #app / #app-desktop nên dùng chung cho cả 2 chế độ.
   Bố cục giống các màn khác của app: nội dung cuộn (.cv-than) + nút
   chính neo cố định trong .dock có sẵn (thanh-phan.css) — không phải
   khối riêng trôi nổi.
   ============================================================ */
.cv{
  position:fixed; inset:0; z-index:500;
  background:var(--nen);
  display:flex; flex-direction:column;
}
.cv-than{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:min(9vh,64px) 24px 32px;
}
.cv-than > *{ flex-shrink:0; }
.cv-than .ch-mo{ margin-bottom:4px; }

.cv-form{ width:100%; max-width:340px; text-align:left; margin-top:34px; }

.cv-o-wrap{ position:relative; }
.cv-o-wrap svg{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  stroke:var(--muc-3); pointer-events:none;
}
.cv-o-wrap .o{ padding-left:44px; }
.cv-o-wrap.cv-o-mk .o{ padding-right:40px; }
.cv-o-wrap.o-chon select{ padding-left:44px; }
.cv-hien-mk{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; display:grid; place-items:center;
  background:none; border:0; color:var(--muc-3); cursor:pointer;
}
.cv-hien-mk:active{ color:var(--muc-2); }
.cv-hien-mk svg{ stroke:currentColor; }

.cv-loi{ font-size:12.5px; color:var(--loi); margin:0 2px 14px; min-height:1px; }

/* "Bạn biết AutoSales Pro từ đâu?" (A1, 28/09/2026): cùng khuôn ô chọn Đại lý (.cv-o-wrap.o-chon, viền liền, biểu tượng
   trái, mũi tên). Bấm Tạo tài khoản khi chưa chọn: viền đỏ như ô nhập lỗi (.o--loi) kèm câu báo ở #cv-loi, chọn xong
   viền trở lại. Đổi màu viền mượt bằng token, máy bật giảm chuyển động thì nen-tang.css tự tắt. */
.cv-o-wrap.o-chon select{ transition:border-color var(--nhanh); }
.cv-o-wrap.o-chon select[aria-invalid="true"]{ border-color:var(--loi); }
/* Gói 2P (30/09/2026): form cổng kiểm mọi ô một lượt, ô nhập còn thiếu mang .o--loi + aria-invalid (tai-khoan.js
   danhDauThieu). Con trỏ về ô thiếu đầu tiên nên giữ viền đỏ cả lúc đang gõ (không để viền xanh của .o:focus đè). */
.cv-o-wrap .o.o--loi, .cv-o-wrap .o.o--loi:focus{ border-color:var(--loi); }
.cv-o-wrap .o.o--loi:focus{ box-shadow:0 0 0 3px var(--loi-nhat); }

/* Nội dung cổng trượt/mờ vào khi đổi màn (Đăng nhập · Tạo tài khoản · Đặt mật khẩu mới) —
   roiVao + token có sẵn (nen-tang.css), máy bật giảm chuyển động thì nen-tang.css tự tắt. */
.cv-vao{ animation:roiVao var(--vua) var(--duong-cong) backwards; }

/* ---------- Đăng ký xác thực Gmail (G2, 03/10/2026) ----------
   Ô Gmail ở form Tạo tài khoản dùng chung khuôn .cv-o-wrap (viền liền như các ô khác) + dòng gợi ý .o-goi-y. Màn Nhập
   mã: thẻ Gmail đã nhận mã + nút "Đổi Gmail", ô đổi Gmail mở tại chỗ (trượt vào bằng .cv-vao), 1 ô 6 số chữ to giãn cách,
   "Gửi lại mã" đếm ngược, dòng nhắc Spam. Màu / bo góc / thời lượng đều là token sẵn có; giảm chuyển động thì
   nen-tang.css tự tắt animation + transition. */
.cv-o-wrap + .tk-mk-loi + .o-goi-y, .cv-o-wrap + .o-goi-y{ margin-top:6px; }
.tk-mk-loi:not([hidden]) + .o-goi-y{ display:none; }   /* đang báo lỗi dưới ô Gmail thì ẩn dòng gợi ý cho gọn */
.cv-gmail-the{
  display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:12px 12px 12px 14px;
  border:1px solid var(--ke-2); border-radius:var(--bo-o); background:var(--mat);
}
.cv-gmail-the > svg{ flex:none; stroke:var(--nhan); }
.cv-gmail-chu{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cv-gmail-chu span{ font-size:12px; color:var(--muc-3); }
.cv-gmail-chu b{ font-size:14.5px; font-weight:700; color:var(--muc); overflow-wrap:break-word; overflow-wrap:anywhere; }
/* G4 (03/10/2026): địa chỉ Gmail không gãy giữa "gmail.com" (máy hẹp từng hiện "thu.nghiem+a@gmail." / "com"). htmlGmail
   tách phần tên + "@miền": được ngắt ngay trước "@", phần "@miền" không bao giờ xuống dòng, phần tên quá dài mới ngắt bất kỳ. */
.gm-dc .gm-ten{ overflow-wrap:break-word; overflow-wrap:anywhere; }
.gm-dc .gm-mien{ white-space:nowrap; }
/* phần tách bên trong địa chỉ giữ cỡ / màu / độ đậm của chỗ chứa (không ăn kiểu chữ phụ .cv-gmail-chu span) */
.gm-dc, .gm-dc span, .cv-gmail-chu .gm-dc, .cv-gmail-chu .gm-dc span, .tk-gm-o-ma .o-nhan .gm-dc, .tk-gm-o-ma .o-nhan .gm-dc span{ font-size:inherit; font-weight:inherit; color:inherit; }
@media (max-width:360px){ .cv-gmail-chu b{ font-size:13.5px; } }
.cv-gmail-chu .cv-gmail-han{ margin-top:2px; }
.cv-gmail-doi{
  flex:none; min-height:36px; padding:0 12px; border-radius:10px; border:1px solid var(--ke-2); background:var(--nen);
  font-family:inherit; font-size:13px; font-weight:700; color:var(--nhan); cursor:pointer; touch-action:manipulation;
  transition:transform var(--nhanh) var(--duong-cong);
}
.cv-gmail-doi:active{ transform:scale(.96); }
.cv-gmail-doi[hidden]{ display:none; }
.cv-doi-gmail{ margin:0 0 16px; padding:14px 14px 2px; border:1px solid var(--ke-2); border-radius:var(--bo-o); background:var(--mat); }
.cv-doi-gmail[hidden]{ display:none; }
.cv-doi-gmail-nut{ display:flex; gap:8px; margin:2px 0 12px; }
.cv-doi-gmail-nut .nut{ height:42px; font-size:14px; }
.cv-doi-gmail-nut .nut--phu{ flex:0 0 86px; }
.cv-doi-gmail-nut .nut--chinh{ flex:1 1 auto; }
.cv-doi-gmail-nut .nut[disabled]{ opacity:.6; }
.o.cv-o-ma{
  text-align:center; font-size:24px; font-weight:800; letter-spacing:.42em; padding-left:.42em;
  font-variant-numeric:tabular-nums;
}
.o.cv-o-ma::placeholder{ font-size:15px; font-weight:500; letter-spacing:normal; }
.cv-gui-lai{ display:flex; justify-content:center; margin:-4px 0 6px; }
.cv-gui-lai button{
  min-height:40px; padding:0 12px; border:0; background:none; font-family:inherit; font-size:14px; font-weight:700;
  color:var(--nhan); cursor:pointer; touch-action:manipulation; transition:color var(--nhanh), opacity var(--nhanh);
}
.cv-gui-lai button[disabled]{ color:var(--muc-3); font-weight:600; cursor:default; font-variant-numeric:tabular-nums; }
/* Khung nhắc Thư rác (03/10/2026, htmlNhacThuRac): tên miền gửi thư còn mới, Gmail hay đưa mã vào Thư rác. Nền cảnh báo
   nhạt --canh-nhat + viền liền cùng tông (cùng bộ màu với .toast--canh), biểu tượng thư màu --canh, chữ chính --muc cho dễ
   đọc ở 375px. Gọn (13px, đệm 10-12px) để không đẩy nút chính khỏi màn máy nhỏ. Không thêm hiệu ứng riêng: khung vào cùng
   màn (.cv-vao / vaoMuot, token sẵn có, giảm chuyển động thì nen-tang.css tự tắt). */
.cv-spam{
  display:flex; align-items:flex-start; gap:10px; margin:2px 0 12px; padding:10px 12px;
  border:1px solid #F1D9A6; border-radius:12px; background:var(--canh-nhat); text-align:left;
}
.cv-spam > svg{ flex:none; width:18px; height:18px; margin-top:1px; stroke:var(--canh); }
.cv-spam-chu{ flex:1 1 auto; min-width:0; }
.cv-spam-chu p{ margin:0; font-size:13px; line-height:1.45; color:var(--muc); }
.cv-spam-chu b{ font-weight:700; color:var(--muc); }
.cv-spam-chu .cv-spam-phu{ margin-top:4px; font-size:12.5px; color:var(--muc-2); }
/* "Tải lại app" khi máy chủ báo app cũ (CAP_NHAT_APP), nằm ngay dưới câu báo */
.cv-loi .cv-cap-nhat{ display:flex; width:100%; height:42px; margin-top:10px; font-size:14px; }

/* ---------- Quên mật khẩu qua Gmail (G3, 03/10/2026) ----------
   Bước 1: ô SĐT (khuôn .cv-o-wrap viền liền) + dòng Zalo cho khách chưa liên kết Gmail. Bước 2: thẻ câu chung (không hiện
   Gmail) + link Zalo luôn hiện, ô mã 6 số dùng lại .cv-o-ma, ô mật khẩu mới dùng lại htmlOMatKhau, "Gửi lại mã" .cv-gui-lai,
   nhắc Spam .cv-spam. Đổi xong: dòng xanh .cv-tot trên form Đăng nhập. Chuyển màn bằng .cv-vao (token, giảm chuyển động thì
   nen-tang.css tự tắt). */
.cv-quen-the{
  display:flex; align-items:flex-start; gap:12px; margin:0 0 16px; padding:12px 14px;
  border:1px solid var(--ke-2); border-radius:var(--bo-o); background:var(--mat);
}
.cv-quen-the > svg{ flex:none; margin-top:2px; stroke:var(--nhan); }
.cv-quen-chu{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.cv-quen-chu span{ font-size:12.5px; color:var(--muc-3); }
.cv-quen-chu span b{ color:var(--muc); font-weight:700; font-variant-numeric:tabular-nums; }
.cv-quen-chu p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--muc-2); }
.cv-zalo{
  display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border-radius:10px;
  border:1px solid var(--ke-2); background:var(--nen); color:var(--nhan); font-size:13px; font-weight:700;
  text-decoration:none; touch-action:manipulation; transition:transform var(--nhanh) var(--duong-cong);
}
.cv-zalo:active{ transform:scale(.96); }
.cv-zalo b{ margin-left:4px; white-space:nowrap; }
.cv-quen-zalo{ margin:0 2px; font-size:13px; line-height:1.6; color:var(--muc-2); }
.cv-quen-zalo .cv-zalo{ min-height:0; padding:0; border:0; background:none; display:inline; }
.cv-tot{
  margin:0 0 16px; padding:11px 14px; border-radius:var(--bo-o); background:var(--tot-nhat); color:var(--tot);
  font-size:13px; font-weight:600; line-height:1.45;
}

/* Câu giải thích khi máy bị đăng xuất từ xa ("Máy này đã được đăng xuất khỏi tài khoản.") */
.cv-bao{
  width:100%; max-width:340px; margin:18px 0 -14px; padding:11px 14px;
  border-radius:var(--bo-o); background:var(--canh-nhat); color:var(--canh);
  font-size:13px; font-weight:600; line-height:1.45; text-align:left;
  animation:roiVao var(--vua) var(--duong-cong) backwards;
}

/* "Quên mật khẩu?" ngay dưới ô mật khẩu (A7) */
.cv-quen{ display:flex; justify-content:flex-end; margin:-6px 2px 12px; }
.cv-quen button{
  background:none; border:0; padding:4px 0; font-family:inherit; font-size:13px; font-weight:600;
  color:var(--nhan); cursor:pointer;
}

/* Báo lỗi ngay dưới ô mật khẩu (màn Đặt mật khẩu mới + tấm Đổi mật khẩu) */
.tk-mk-loi{ font-size:12.5px; font-weight:600; color:var(--loi); margin:6px 2px 0; line-height:1.4; }

/* Tấm "Đổi mật khẩu" (KHUNG.moTam). "Quên mật khẩu?" từ G3 là màn trong cổng (khối Quên mật khẩu qua Gmail ở trên) */
.tk-doi-mk-form{ padding-top:2px; }
.tk-doi-mk-ghi{ margin:2px 2px 12px; }
.tk-doi-mk-loi{ margin-bottom:12px; }

/* Chọn thiết bị để đăng xuất khi tài khoản Close Beta đã đủ máy (Đăng nhập
   máy thứ 3 trở lên) — xem DEVICE_LIMIT_BETA trong tai-khoan.js. */
.cv-thietbi-ds{ display:flex; flex-direction:column; gap:10px; margin:0 2px 16px; }
.cv-thietbi-dong{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border:1px solid var(--ke-2); border-radius:var(--bo-o);
  background:var(--mat);
}
.cv-thietbi-ten{ font-weight:700; font-size:13.5px; }
.cv-thietbi-nay{
  display:inline-block; margin-left:4px; padding:1px 7px; border-radius:var(--bo-pill);
  background:var(--nhan-nhat); color:var(--nhan); font-size:11px; font-weight:700; vertical-align:1px;
}
.cv-thietbi-phu{ font-size:12px; color:var(--muc-3); margin-top:2px; }
.cv-thietbi-thoat{
  flex-shrink:0; height:34px; padding:0 14px; border-radius:10px; border:1px solid var(--loi);
  background:var(--loi-nhat); color:var(--loi); font-family:inherit; font-weight:700; font-size:12.5px; cursor:pointer;
}
.cv-thietbi-thoat:active{ transform:scale(.97); }
.cv-thietbi-thoat[disabled]{ opacity:.5; cursor:default; }

.cv-doi-che{ text-align:center; margin-top:20px; font-size:13.5px; color:var(--muc-2); }
.cv-doi-che button{
  background:none; border:0; padding:0; margin-left:2px;
  font-family:inherit; font-size:inherit; font-weight:700; color:var(--nhan); cursor:pointer;
}

/* Dòng đồng ý dưới nút "Tạo tài khoản" (A25, Gói A đợt 2): dock của cổng xếp dọc (nút + dòng chữ), 2 cụm chữ là nút
   mở tấm Điều khoản / Chính sách dữ liệu. Màn Đăng nhập ẩn dòng này (hidden). */
.cv .dock{ flex-direction:column; align-items:stretch; gap:8px; }
.cv .dock .nut{ flex:0 0 auto; }
.cv-dong-y{
  margin:0 4px; font-size:12px; line-height:1.5; color:var(--muc-2); text-align:center;
  animation:roiVao var(--vua) var(--duong-cong) backwards;
}
.cv-dong-y button{
  background:none; border:0; padding:0; font-family:inherit; font-size:inherit; font-weight:700; color:var(--nhan);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}

/* Màn hình rộng (desktop) — nút chính không kéo dài hết chiều ngang màn
   hình như trên điện thoại, thu lại khớp bề rộng form + căn giữa. */
@media (min-width:1024px){
  .cv .dock{ align-items:center; }
  .cv .dock .nut{ width:100%; max-width:340px; }
  .cv-dong-y{ max-width:340px; }
}

/* Tấm Điều khoản sử dụng + Chính sách dữ liệu (TAI_KHOAN.moDieuKhoan): 2 nút chuyển văn bản + nội dung cuộn trong tấm.
   Máy tính trong app: hộp rộng hơn cho dễ đọc (:has + lớp dự phòng khung.js gắn cho máy chưa có :has()). */
.tk-dk-tab{ display:flex; gap:4px; padding:4px; margin:0 0 16px; border-radius:12px; background:var(--nen); border:1px solid var(--ke); }
.tk-dk-tab button{
  flex:1 1 0; min-width:0; min-height:40px; padding:6px 8px; border:0; border-radius:9px; background:none;
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--muc-2); cursor:pointer;
  transition:background var(--nhanh), color var(--nhanh), box-shadow var(--nhanh);
}
.tk-dk-tab button[aria-selected="true"]{ background:var(--mat); color:var(--muc); box-shadow:0 1px 3px rgba(16,19,25,.12); }
.tk-dk-van{ text-align:left; }
.tk-dk-van .tk-dk-tieu{ font-size:17px; font-weight:800; margin:0 2px 2px; color:var(--muc); }
.tk-dk-cap{ font-size:12.5px; color:var(--muc-3); margin:0 2px 10px; }
.tk-dk-van h4{ font-size:14.5px; font-weight:700; margin:16px 2px 6px; color:var(--muc); }
.tk-dk-van p{ font-size:14px; line-height:1.6; color:var(--muc); margin:0 2px 8px; }
.tk-dk-van ul{ margin:0 2px 8px; padding-left:20px; }
.tk-dk-van li{ font-size:14px; line-height:1.6; color:var(--muc); margin:0 0 6px; }
.tk-dk-van b{ font-weight:700; }
.tk-dk-tai{ font-size:13.5px; color:var(--muc-2); text-align:center; padding:28px 0; }
.tk-dk-xong{ margin-top:14px; }
.tam:has(.tk-dk){ max-width:560px; }
.tam.tk-dk--tam{ max-width:560px; }   /* máy chưa có :has(), lớp do khung.js gắn */

/* Tấm yêu cầu xoá tài khoản (TAI_KHOAN.moYeuCauXoa) + tấm "Còn N thay đổi chưa lưu" khi đăng xuất lúc mất mạng */
.tk-xoa-ds{ margin:0 2px 16px; padding-left:20px; text-align:left; }
.tk-xoa-ds li{ font-size:13.5px; line-height:1.55; color:var(--muc-2); margin:0 0 8px; }
.tk-xoa-ds b{ color:var(--loi); }
.tk-xoa-o .o-nhan b{ color:var(--muc); font-weight:700; white-space:nowrap; }
.tk-xoa-o .o{ letter-spacing:.2em; font-size:18px; font-weight:700; text-align:center; }
.tk-xoa-o .o::placeholder{ letter-spacing:normal; font-size:15px; font-weight:500; }
.tk-xoa-loi{ margin:-4px 2px 4px; min-height:0; }
.tk-xoa-da{ padding:14px 16px; border-radius:var(--bo-o); background:var(--canh-nhat); color:var(--canh); text-align:left; }
.tk-xoa-da b{ display:block; font-size:14.5px; }
.tk-xoa-da p{ margin:6px 0 0; font-size:13.5px; line-height:1.55; color:var(--muc-2); }
.tk-ra-ghi{ font-size:14px; line-height:1.55; margin:0 2px; }
.nut.tk-nut-do{ background:var(--loi); color:#fff; }
.nut.tk-nut-do:active{ background:#B91C1C; }

/* Cổng đang hiện (tai-khoan.js gắn body.cv-mo): tấm KHUNG.moTam ("Quên mật khẩu?") và toast phải nổi
   TRÊN cổng (.cv z-index 500; mặc định tấm 91, toast 120 bị cổng che). */
body.cv-mo .phu-nen{ z-index:501; }
body.cv-mo .tam{ z-index:502; }
body.cv-mo #toast-vung{ z-index:503; bottom:calc(96px + env(safe-area-inset-bottom)); }   /* nằm trên nút chính của cổng, không đè */
/* Máy tính mở app lần đầu, chưa đăng nhập: chưa có body.dt-che-do (desktop.js chỉ bật sau khi vào app)
   nên tấm đang theo kiểu tấm đáy điện thoại (giao-dien-moi.css) → trả lại hộp giữa màn như bản máy tính. */
@media (min-width:1024px){
  body.cv-mo:not(.dt-che-do) .tam{
    left:50%; right:auto; top:50%; bottom:auto; width:calc(100% - 52px); max-width:400px; max-height:calc(100% - 88px);
    border:1px solid var(--ke-2); border-radius:20px; padding:20px 0 18px;
    transform:translate(-50%,-50%) scale(.9); opacity:0; visibility:visible;
    transition:transform var(--vua) var(--duong-cong), opacity var(--nhanh);
    box-shadow:0 2px 6px rgba(16,19,25,.06), 0 24px 48px -16px rgba(16,19,25,.32);
  }
  body.cv-mo:not(.dt-che-do) .tam.mo{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  body.cv-mo:not(.dt-che-do) .tam::before{ display:none; }
  body.cv-mo:not(.dt-che-do) .tam .tam-tieu-de{ text-align:center; font-size:17px; }
}

/* huy hiệu cấp tài khoản — dùng ở header Trang chủ (mobile) + thanh trên (desktop) */
.cv-badge{
  display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px;
  border-radius:var(--bo-pill); font-size:11.5px; font-weight:700;
  background:var(--nen); color:var(--muc-2); border:1px solid var(--ke-2);
  cursor:pointer; white-space:nowrap;
}
.cv-badge--pro{ background:var(--tot-nhat); color:var(--tot); border-color:transparent; }
.cv-badge--trial{ background:var(--canh-nhat); color:var(--canh); border-color:transparent; }
.cv-badge--beta{ background:#e9f2ff; color:#155eef; border-color:#b2ccff; }

/* ---------- Nhắc mở bằng Safari / Chrome khi đang ở trong Zalo, Facebook... (Gói G, 27/09/2026) ----------
   tai-khoan.js dựng ở 3 chỗ: cổng đăng nhập (trên form, rộng bằng form), Trang chủ điện thoại (đầu danh sách xe), màn
   Dòng xe máy tính (đầu cột giữa). Vào: roiVao như nội dung cổng. "Để sau": co chiều cao + mờ đi (.nhac-td--ra,
   thuGonMuot). Giảm chuyển động: nen-tang.css tự tắt animation/transition, JS gỡ thẻ ngay.
   Màu (Gói K, Vũ chốt 27/09/2026): ĐỎ NHẠT cùng bộ màu hộp thông báo đỏ nhạt .toast--loi (khung.css: nền #FDECEC, chữ
   #B91C1C, viền #F6C9C9). Thẻ nhắc cài app (.nhac-cai, Gói K) dùng chung khung này.
   Gói L1 (27/09/2026): thẻ GỌN 1 hàng .nhac-gon (khuôn htmlTheGon, cao khoảng 64-80px): biểu tượng, tiêu đề + 1 dòng,
   dấu › hoặc nút 1 chạm nhỏ, nút × ở góc phải. Nút lớn .nhac-gon-mo phủ cả hàng bằng ::after: bấm chỗ nào cũng mở tấm
   hướng dẫn; nút 1 chạm + nút × nổi trên lớp phủ (z-index), bấm không mở tấm. */
.nhac-td{
  display:block; text-align:left; padding:0; border-radius:var(--bo-the);
  background:var(--loi-nhat); color:#B91C1C; border:1px solid #F6C9C9;
  overflow:hidden; animation:roiVao var(--vua) var(--duong-cong) backwards;
  transition:height var(--vua) var(--duong-cong), opacity var(--nhanh), margin var(--vua) var(--duong-cong),
    padding var(--vua) var(--duong-cong), border-width var(--vua) var(--duong-cong);
}
.nhac-td-ic{
  flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:var(--mat); color:#B91C1C; box-shadow:0 0 0 1px #F6C9C9;
  transition:transform var(--nhanh) var(--duong-cong);
}
.nhac-td-ic svg{ stroke:currentColor; }
.nhac-td-tieu{ display:block; font-size:14px; font-weight:700; line-height:1.3; color:#B91C1C; text-wrap:balance; }
/* các bước: chỉ còn trong tấm hướng dẫn (.tk-cai-van đặt cỡ chữ, màu) */
.nhac-td-buoc{ margin:10px 0 0 2px; padding-left:18px; font-size:13px; line-height:1.5; color:#5C1616; }
.nhac-td-buoc li{ margin-bottom:3px; padding-left:2px; }
.nhac-td-buoc li::marker{ color:#B91C1C; font-weight:700; }
.nhac-td-buoc b{ font-weight:700; }
/* không chép được → hiện link, chạm là chọn cả link để giữ và chép */
.nhac-td-link{
  margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--mat); border:1px solid #F6C9C9;
  font-size:13px; line-height:1.4; color:var(--muc); word-break:break-all;
  -webkit-user-select:all; user-select:all; animation:roiVao var(--vua) var(--duong-cong) backwards;
}
.nhac-td > .nhac-td-link{ margin:0 12px 12px; }
.tk-td .nhac-td-link{ margin:12px 2px 0; }
/* thẻ gọn: 1 hàng; chừa 40px bên phải cho nút × ở góc. Chữ ngắn để 1 hàng từ bề ngang 360px (cổng rộng 312px) */
.nhac-gon{ position:relative; display:flex; align-items:center; gap:6px; min-height:64px; padding:11px 40px 11px 11px; }
.nhac-gon-mo{
  flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:10px; margin:0; padding:0; border:0; background:none;
  font-family:inherit; font-size:inherit; color:inherit; text-align:left; cursor:pointer; touch-action:manipulation;
}
/* lớp phủ cả hàng: vùng bấm mở tấm + màu khi nhấn + viền khi dùng bàn phím */
.nhac-gon-mo::after{
  content:""; position:absolute; top:0; right:0; bottom:0; left:0; border-radius:calc(var(--bo-the) - 1px);
  transition:background var(--nhanh), box-shadow var(--nhanh);
}
.nhac-gon-mo:active::after{ background:rgba(185,28,28,.06); }
.nhac-gon-mo:active .nhac-td-ic{ transform:scale(.93); }
.nhac-gon-mo:focus-visible{ outline:none; }
.nhac-gon-mo:focus-visible::after{ box-shadow:inset 0 0 0 2px #B91C1C; }
.nhac-gon-chu{ display:block; flex:1 1 auto; min-width:0; }
.nhac-gon-phu{ display:block; margin-top:2px; font-size:12.5px; line-height:1.35; color:#7F1D1D; text-wrap:balance; }
.nhac-gon-mui{ flex:none; display:flex; margin-right:-6px; color:#B91C1C; opacity:.75; }
/* nút 1 chạm nhỏ (Cài app / Chép link): vùng chạm nới thêm bằng ::before */
.nut.nhac-gon-nut{
  position:relative; z-index:1; flex:none; height:34px; padding:0 10px; border-radius:10px; font-size:13px;
  background:var(--loi); color:#fff;
}
.nut.nhac-gon-nut:active{ background:#B91C1C; }
.nhac-gon-nut::before{ content:""; position:absolute; top:-6px; right:0; bottom:-6px; left:-4px; }
/* nút × (Để sau): ô bấm 40px ở góc trên bên phải, dấu × nhỏ, nhấn thì hiện nền tròn */
.nhac-gon-x{
  position:absolute; z-index:1; top:0; right:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  margin:0; padding:0; border:0; border-radius:50%; background:none; color:#B91C1C; cursor:pointer; touch-action:manipulation;
}
.nhac-gon-x::before{
  content:""; position:absolute; top:5px; left:5px; width:30px; height:30px; border-radius:50%;
  background:rgba(185,28,28,.1); opacity:0; transition:opacity var(--nhanh);
}
.nhac-gon-x:active::before{ opacity:1; }
.nhac-gon-x svg{ position:relative; display:block; opacity:.7; }
.nhac-gon-x:focus-visible{ outline:none; }
.nhac-gon-x:focus-visible::before{ opacity:1; box-shadow:inset 0 0 0 2px #B91C1C; }
/* máy rất hẹp (dưới 360px, vd iPhone SE đời đầu): bỏ biểu tượng cho chữ đủ chỗ, thẻ không vỡ thành nhiều dòng */
@media (max-width:359px){
  .nhac-gon .nhac-td-ic{ display:none; }
}
/* chỗ đặt */
.cv-than > .nhac-td{ width:100%; max-width:340px; margin:20px 0 -12px; }
#man-trang-chu .nhac-td{ margin:4px 16px 10px; }
#app-desktop .nhac-td{ flex:none; }
/* đang thu gọn (đứng sau các luật chỗ đặt để margin về 0 ở cả 3 chỗ) */
.nhac-td.nhac-td--ra, .cv-than > .nhac-td.nhac-td--ra, #man-trang-chu .nhac-td.nhac-td--ra{
  opacity:0; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-width:0;
}

/* ---------- Nhắc cài app ra màn hình chính (Gói K, 27/09/2026) ----------
   Thẻ .nhac-td.nhac-cai (khung, màu, chỗ đặt, thu gọn, khuôn thẻ gọn .nhac-gon dùng chung luật ở trên), tai-khoan.js dựng
   ở cổng đăng nhập, Trang chủ điện thoại, màn Dòng xe khi máy tính bảng dùng bố cục máy tính. Nội dung đổi khi có sự kiện
   cài thì hàng trượt/mờ vào lại (.cv-vao). */
.nhac-td-buoc--mot{ padding-left:0; }
/* biểu tượng nhỏ minh hoạ nút của trình duyệt (Chia sẻ, ba chấm, menu) đứng trong câu hướng dẫn */
.nhac-cai-nut-ic{
  display:inline-flex; align-items:center; justify-content:center; width:21px; height:21px; margin:0 1px;
  vertical-align:-5px; border-radius:6px; background:var(--mat); color:var(--nhan); box-shadow:0 0 0 1px var(--ke-2);
}
.nhac-cai-nut-ic svg{ width:14px; height:14px; }

/* Tấm hướng dẫn cài đầy đủ (TAI_KHOAN.moHuongDanCai): dòng trạng thái, 3 tab máy (kiểu .tk-dk-tab), các bước, hỗ trợ.
   Máy tính: hộp rộng hơn (:has + lớp dự phòng khung.js gắn cho máy chưa có :has()). */
.tk-cai{ text-align:left; }
.tk-cai-loi{ font-size:13.5px; line-height:1.55; color:var(--muc-2); margin:0 2px 14px; }
.tk-cai-da, .tk-cai-canh{
  display:flex; align-items:flex-start; gap:9px; margin:0 0 14px; padding:11px 13px; border-radius:var(--bo-o);
  font-size:13.5px; line-height:1.5;
}
.tk-cai-da{ background:var(--tot-nhat); color:#05693A; }
.tk-cai-da svg{ flex:none; margin-top:1px; stroke:currentColor; }
.tk-cai-canh{ flex-direction:column; align-items:stretch; background:var(--loi-nhat); color:#7F1D1D; border:1px solid #F6C9C9; }
.tk-cai-canh .nut{ height:40px; font-size:13.5px; border-radius:11px; background:var(--mat); color:#B91C1C; border-color:#F6C9C9; }
.tk-cai-canh .nhac-td-link{ margin-top:0; }
.tk-cai-tab{ margin-bottom:14px; }
.tk-cai-van .nhac-td-buoc{ margin:0 0 4px 2px; font-size:14px; line-height:1.55; color:var(--muc); }
.tk-cai-van .nhac-td-buoc li{ margin-bottom:7px; }
.tk-cai-van .nhac-td-buoc li::marker{ color:var(--nhan); }
.tk-cai-h{ font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--muc); margin:14px 2px 8px; }
.tk-cai-h:first-child{ margin-top:2px; }
.tk-cai-p{ font-size:14px; line-height:1.55; color:var(--muc); margin:0 2px 4px; }
.tk-cai-p b{ font-weight:700; }
.tk-cai-ghi{ font-size:13px; line-height:1.5; color:var(--muc-2); margin:8px 2px 0; }
.tk-cai-mot{ margin:0 0 6px; }
.tk-cai-mot p{ font-size:12.5px; line-height:1.45; color:var(--muc-2); margin:8px 2px 4px; text-align:center; }
.tk-cai-ho-tro{ font-size:13px; line-height:1.5; color:var(--muc-2); margin:16px 2px 0; }
.tk-cai-ho-tro a{ color:var(--nhan); font-weight:700; text-decoration:none; }
.tam:has(.tk-cai){ max-width:460px; }
.tam.tk-cai--tam{ max-width:460px; }   /* máy chưa có :has(), lớp do khung.js gắn */

/* Nút "Xem cách cài app" trong dòng hướng dẫn "Nhận thông báo khi tắt app" (bảng Cài đặt thông báo điện thoại,
   man-tuong-tac.js, iPhone/iPad chưa cài): nút chữ xanh ngay dưới câu hướng dẫn, mở tấm hướng dẫn cài */
.tc-cd-cai-app{
  display:inline-flex; align-items:center; min-height:40px; margin-top:2px; padding:0; border:0; background:none;
  font-family:inherit; font-size:13.5px; font-weight:700; color:var(--nhan); cursor:pointer; touch-action:manipulation;
}
.tc-cd-cai-app:active{ opacity:.6; }

/* Mục "Cài app ra màn hình chính" trong Thiết lập điện thoại (man-xe.js dựng): đang dùng app đã cài thì dòng phụ xanh + dấu tích */
#tl-cai-app .tl-cai-app-da{ color:var(--tot); font-weight:600; }
#tl-cai-app .tl-cai-app-da svg{ width:13px; height:13px; vertical-align:-2px; margin-right:4px; stroke:currentColor; }

/* ---------- Gmail trong mục Tài khoản + tấm Liên kết / Đổi Gmail (G4, 03/10/2026) ----------
   tai-khoan.js veGmailTk: điện thoại #tk-gmail-khoi là dòng đầu thẻ Tài khoản (cùng nhịp .gd-hanh: biểu tượng .gd-hanh-ic,
   cao ≥ 58px, kẻ mảnh với dòng dưới), máy tính #dt-tk-gmail là ô viền liền trong thẻ Tài khoản. Chưa liên kết: 1 câu lý do;
   lần đầu là thẻ mời nền nhấn nhạt + "Để sau". Tấm nhập mã dùng lại .cv-gmail-the / .cv-o-ma / .cv-gui-lai / .cv-spam của cổng.
   Màu, bo góc, thời lượng đều là token; vẽ lại trượt/mờ vào bằng .cv-vao; giảm chuyển động thì nen-tang.css tự tắt. */
#tk-gmail-khoi[hidden], #dt-tk-gmail[hidden]{ display:none; }
.tk-gm:not([hidden]) + .gd-hanh{ border-top:1px solid var(--ke); }
.tk-gm-hang{ display:flex; align-items:center; gap:12px; min-height:58px; padding:8px 0; }
.tk-gm-ic svg{ stroke:currentColor; }
.tk-gm-chu{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.tk-gm-nhan{ font-size:15px; font-weight:600; color:var(--muc); }
.tk-gm-dc{ font-size:13px; font-weight:600; color:var(--muc-2); line-height:1.35; }
.tk-gm-tt{ display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:500; color:var(--muc-2); }
.tk-gm-tt--tot{ color:var(--tot); font-weight:700; }
.tk-gm-tt svg{ flex:none; stroke:currentColor; }
.tk-gm-nut{
  flex:none; min-height:38px; padding:0 12px; border-radius:10px; border:1px solid var(--ke-2); background:var(--mat);
  font-family:inherit; font-size:13px; font-weight:700; color:var(--nhan); white-space:nowrap; cursor:pointer; touch-action:manipulation;
  transition:transform var(--nhanh) var(--duong-cong), background var(--nhanh), color var(--nhanh);
}
.tk-gm-nut:active{ transform:scale(.96); }
.tk-gm--nhac .tk-gm-nut{ background:var(--nhan); border-color:var(--nhan); color:var(--mat); }
.tk-gm-vi{ display:flex; align-items:center; gap:8px; margin:-4px 0 12px 48px; }
.tk-gm-vi p{ flex:1 1 auto; margin:0; font-size:12.5px; line-height:1.45; color:var(--muc-2); }
.tk-gm--nhac .tk-gm-vi{ margin:0 0 12px; padding:10px 6px 10px 12px; border-radius:12px; background:var(--nhan-nhat); }
.tk-gm--nhac .tk-gm-vi p{ color:var(--muc); font-weight:600; }
.tk-gm-an{
  flex:none; min-height:36px; padding:0 8px; border:0; background:none; font-family:inherit; font-size:13px; font-weight:700;
  color:var(--muc-2); cursor:pointer; touch-action:manipulation; transition:opacity var(--nhanh);
}
.tk-gm-an:active{ opacity:.6; }
/* máy tính: ô viền liền trong thẻ Tài khoản (dưới dòng gói) */
.tk-gm--pc{ margin-top:12px; }
.tk-gm--pc .tk-gm-hang{ min-height:0; padding:10px 12px; border:1px solid var(--ke-2); border-radius:8px; background:var(--mat); }
.tk-gm--pc .tk-gm-vi{ margin:8px 2px 0; }
.tk-gm--pc.tk-gm--nhac .tk-gm-vi{ margin:8px 0 0; }
.tk-gm--pc .tk-gm-nhan{ font-size:14px; }
/* tấm Liên kết / Đổi Gmail */
.tk-gm-form{ padding-top:2px; }
.tk-gm-ghi{ margin:0 2px 14px; }
.tk-gm-loi{ margin-bottom:12px; }
.tk-gm-o-ma .o-nhan{ display:flex; flex-direction:column; gap:1px; }
.tk-gm-o-ma .o-nhan span{ font-size:12.5px; font-weight:600; color:var(--muc-2); }
.tk-gm-ma-dc{ font-size:14px; font-weight:700; color:var(--muc); line-height:1.35; }
.tk-gm-o-ma .o.o--loi, .tk-gm-o-ma .o.o--loi:focus{ border-color:var(--loi); }
.tk-gm-o-ma .o.o--loi:focus{ box-shadow:0 0 0 3px var(--loi-nhat); }
.tk-gm-form .cv-gui-lai{ margin-top:8px; }
.tk-gm-zalo{ margin:14px 2px 0; font-size:13px; line-height:1.5; color:var(--muc-2); text-align:center; }
.tk-gm-zalo a{ color:var(--nhan); font-weight:700; text-decoration:none; }