/* ============================================================
   AUTOSALES PRO — KHUNG
   Bố cục app · xếp lớp màn hình · chuyển cảnh trượt · toast.
   Cần nen-tang.css nạp trước.
   ============================================================ */

/* Nhịp chuyển màn kiểu iOS/Zalo (gói B 24/09/2026). khung.js giữ bản sao các
   số này (NHIP trong khung.js) — đổi ở đây nhớ đổi ở đó. */
#app{
  --chuyen-vao: .34s;                         /* mở màn con (push) */
  --chuyen-ra:  .28s;                         /* quay lại (pop) */
  --chuyen-cong: cubic-bezier(.32,.72,0,1);   /* lò xo iOS: rời nhanh, tới nơi êm */
  --lech-sau: -28%;                           /* màn phía sau lùi sang trái (parallax) */
  position:fixed; inset:0;
  background:var(--nen);
  overflow:hidden;
}

/* Mỗi màn là một lớp phủ kín #app, xếp chồng, chỉ 1 màn "hiện".
   KHÔNG để transition/will-change thường trực: chỉ bật trong lúc đang chuyển
   (.chuan-bi/.dang-chuyen/.dang-keo/.dang-tha do khung.js gắn rồi gỡ) — tránh
   mọi màn luôn là 1 lớp GPU riêng, và tránh đổi class lúc khác bị trượt nhầm. */
.man{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--nen);
  transform:translateX(100%);
}
.man.hien{ transform:translateX(0); }
.man.sau{ transform:translateX(var(--lech-sau)); }
.man[hidden]{ display:none; }        /* màn không nằm trong ngăn xếp thì ẩn hẳn */

/* Đang chuyển: nâng lớp GPU + transition CHỈ transform/opacity (không filter,
   không box-shadow động) để chạy trọn trên compositor. */
.man.chuan-bi,
.man.dang-chuyen,
.man.dang-keo,
.man.dang-tha{ will-change:transform; }
.man.dang-chuyen{ transition:transform var(--chuyen-vao) var(--chuyen-cong); }
.man.dang-chuyen.chieu-ra{ transition-duration:var(--chuyen-ra); }

/* Màn phía sau hơi tối đi — lớp phủ riêng chỉ đổi opacity (KHÔNG dùng
   filter:brightness trên cả màn: filter bắt vẽ lại toàn màn mỗi khung hình).
   Lúc vuốt-mép-quay-lại, khung.js điều khiển độ tối theo ngón tay qua --phu. */
.man::after{
  content:""; position:absolute; inset:0; z-index:10000;
  background:#000; opacity:0; pointer-events:none;
}
.man.sau::after{ opacity:var(--phu, .1); }
.man.chuan-bi::after,
.man.dang-keo::after{ will-change:opacity; }
.man.dang-chuyen::after{ will-change:opacity; transition:opacity var(--chuyen-vao) var(--chuyen-cong); }
.man.dang-chuyen.chieu-ra::after{ transition-duration:var(--chuyen-ra); }
/* Buông tay sau khi vuốt: thời lượng tính theo tốc độ ngón tay (--td-tha) */
.man.dang-tha,
.man.dang-tha::after{ transition:transform var(--td-tha, .28s) var(--chuyen-cong), opacity var(--td-tha, .28s) var(--chuyen-cong); }
.man.dang-tha::after{ will-change:opacity; }

/* Dùng khi quayLai() được gọi từ popstate (vuốt-mép hệ thống / back cứng
   Android) — xem giải thích đầy đủ trong khung.js. HĐH/WebView đã tự
   chạy hiệu ứng chuyển cảnh riêng lúc kéo tay rồi, nên tắt hẳn transition
   ở đây để tránh chồng thêm 1 lần trượt CSS nữa gây giật lúc thả tay. */
.man.khong-hieu-ung,
.man.khong-hieu-ung::before,
.man.khong-hieu-ung::after{ transition:none !important; }

/* Thân màn cuộn được, thanh trên + thanh dưới đứng yên */
.man > .thanh-tren{ flex:none; }
.man > .than{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.man > .than::-webkit-scrollbar{ width:0; }
.man > .dock,
.man > .thanh-tab{ flex:none; }

/* Lề chuẩn cho nội dung trong thân màn */
.than-lot{ padding:0 var(--le-man); }
.than-day{ height:24px; }

/* Bóng mờ chạy dọc mép trái màn đang trượt vào — cho cảm giác "đè lên".
   Nằm ngoài mép trái (translateX(-100%)), đi cùng lớp của màn nên không tốn
   vẽ lại khi trượt; dùng chung cho mở màn, quay lại và vuốt-mép. */
.man::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:16px;
  transform:translateX(-100%);
  background:linear-gradient(to left, rgba(10,14,22,.13), rgba(10,14,22,.04) 55%, transparent);
  pointer-events:none; opacity:0;
}
.man.hien::before{ opacity:1; }
.man:first-child::before{ display:none; }   /* màn gốc không cần bóng */

/* Người dùng bật "Giảm chuyển động": đổi màn tức thời (khung.js cũng tự bỏ
   hiệu ứng, đây là chốt chặn thứ 2). */
@media (prefers-reduced-motion: reduce){
  .man.dang-chuyen, .man.dang-chuyen::after,
  .man.dang-tha, .man.dang-tha::after{ transition:none !important; }
}

/* ---------- Toast (kiểu B nền màu nhạt, Vũ duyệt 27/09/2026; điện thoại + máy tính) ----------
   KHUNG.bao() gắn .toast (+ .toast--tot / .toast--loi), xe-tudo.js gắn .toast.toast--hoan-tac.
   Thường (không loại) + Hoàn tác: xanh dương nhạt · tot: xanh lá nhạt · loi: đỏ nhạt.
   Biểu tượng 20px bên trái = ::before tô currentColor qua mask SVG (kèm -webkit- cho iOS 15):
   vòng tròn chữ i (thường), dấu tích (tot), chấm than (loi); hộp Hoàn tác không có biểu tượng. */
#toast-vung{
  position:fixed; left:0; right:0; bottom:calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:8px;
  z-index:120; pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:9px; text-align:left;
  background:#EEF3FB; color:#1E3A8A; border:1px solid #CFDDF3;
  font-size:13.5px; font-weight:600; line-height:1.4;
  padding:11px 14px; border-radius:14px;
  box-shadow:0 8px 24px -14px rgba(15,23,42,.28);
  max-width:calc(100vw - 40px);
  /* --toast-lech: -10px khi vùng toast nằm đầu màn hình (tấm đáy đang mở, giao-dien-moi.css) → trượt xuống thay vì lên */
  opacity:0; transform:translateY(var(--toast-lech, 10px));
  transition:opacity var(--nhanh), transform var(--nhanh);
}
.toast::before{
  content:""; flex:none; width:20px; height:20px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 11.2v5.2'/%3E%3Ccircle cx='12' cy='7.8' r='1.15' fill='black' stroke='none'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 11.2v5.2'/%3E%3Ccircle cx='12' cy='7.8' r='1.15' fill='black' stroke='none'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
.toast.hien{ opacity:1; transform:translateY(0); }
.toast--tot{ background:#E7F6EE; color:#05693A; border-color:#BDE7CF; }
.toast--tot::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8 12.3l2.8 2.8L16.2 9.6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8 12.3l2.8 2.8L16.2 9.6'/%3E%3C/svg%3E");
}
.toast--loi{ background:#FDECEC; color:#B91C1C; border-color:#F6C9C9; }
.toast--canh{ background:#FDF4E3; color:#8A5A00; border-color:#F1D9A6; }   /* cảnh báo (vd "Còn 0 lượt tạo ảnh"): vàng nhạt, cùng biểu tượng chấm than */
.toast--loi::before, .toast--canh::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.4v5.4'/%3E%3Ccircle cx='12' cy='16.3' r='1.15' fill='black' stroke='none'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.4v5.4'/%3E%3Ccircle cx='12' cy='16.3' r='1.15' fill='black' stroke='none'/%3E%3C/svg%3E");
}
.toast--hoan-tac{ gap:14px; pointer-events:auto; }
.toast--hoan-tac::before{ content:none; }
.toast--hoan-tac button{
  flex:none; background:none; border:0; padding:0; color:#2563EB; font-family:inherit;
  font-size:13px; font-weight:800; text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}

/* ---------- Lớp bắt-chạm-ra-ngoài-để-đóng (hộp thoại giữa màn) ----------
   ☠️ ĐÃ THỬ 2 CÁCH ĐỀU HỎNG TRÊN ĐIỆN THOẠI THẬT: phủ đen mờ (Vũ chê
   "tối thui") RỒI kính mờ backdrop-filter (an toàn trên trình duyệt máy
   tính giả lập nhưng trên WebKit thật — Safari/Zalo in-app — kết hợp
   với .tam dùng transform:scale khiến blur "tràn" ra làm mờ LUÔN CẢ
   .tam phía trên, không chỉ nền sau — lỗi WebKit đã biết khi
   backdrop-filter + transform cùng ngữ cảnh xếp lớp). Theo đúng yêu
   cầu Vũ: bỏ hẳn hiệu ứng tối/mờ, để sáng bình thường — .tam tự nổi
   lên nhờ box-shadow + viền (xem thanh-phan.css), không cần lớp phủ. */
.phu-nen{
  position:fixed; inset:0; background:transparent;
  opacity:0; pointer-events:none; transition:opacity var(--nhanh); z-index:90;
}
.phu-nen.mo{ opacity:1; pointer-events:auto; }