/* ============================================================
   AUTOSALES PRO — "CÓ GÌ MỚI" (co-gi-moi.js · mockup 25/09/2026, phương án A)
   Điện thoại: tấm toàn màn trượt lên, app phía sau lùi nhẹ + bo góc (iOS page
   sheet). Máy tính (body.dt-che-do): hộp giữa màn, nền app mờ, 2 cột.
   Nạp sau giao-dien-moi.css. Lớp gốc: html.cgm-mo (đang mở), html.cgm-dd
   (mở trên điện thoại), html.cgm-hien-ra (đang ở trạng thái mở).
   ============================================================ */

.cgm-nen{
  position:fixed; inset:0; z-index:9500;
  background:rgba(0,0,0,.28); opacity:0;
  transition:opacity .35s ease;
}
.cgm-nen.mo{ opacity:1; }

.cgm-hop{
  position:fixed; z-index:9501; left:0; right:0; bottom:0;
  top:calc(env(safe-area-inset-top) + 10px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--mat); color:var(--muc);
  border-radius:14px 14px 0 0;
  box-shadow:0 -10px 40px -20px rgba(0,0,0,.4);
  transform:translateY(105%);
  transition:transform .55s var(--duong-cong);
  outline:none;
  font-family:inherit;
}
.cgm-hop.mo{ transform:none; }
.cgm-hop.dang-keo{ transition:none; }
.cgm-hop button{ font-family:inherit; color:inherit; cursor:pointer; border:0; background:none; -webkit-tap-highlight-color:transparent; }

/* App phía sau lùi nhẹ + bo góc (chỉ điện thoại). Nền tối lộ ra quanh góc. */
html.cgm-dd, html.cgm-dd body{ background:#0C0E13; }
html.cgm-mo body:not(.dt-che-do) #app{
  transition:transform .5s var(--duong-cong), border-radius .5s var(--duong-cong);
  transform-origin:50% 0; will-change:transform;
}
html.cgm-hien-ra body:not(.dt-che-do) #app{
  transform:translateY(calc(env(safe-area-inset-top) * .25 + 4px)) scale(.93);
  border-radius:14px;
}

.cgm-tay{ position:absolute; top:7px; left:50%; transform:translateX(-50%); width:38px; height:5px; border-radius:3px; background:#D6D9E0; z-index:3; }
.cgm-x{ display:none; }

.cgm-cuon{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch; padding:34px 24px 20px; scrollbar-width:none;
}
.cgm-cuon::-webkit-scrollbar{ display:none; }

/* Đầu tấm */
.cgm-dau{ text-align:center; margin-bottom:22px; }
.cgm-icon{ width:72px; height:72px; border-radius:17px; display:block; margin:0 auto 14px; object-fit:cover; box-shadow:0 8px 20px -10px rgba(37,99,235,.6), inset 0 0 0 1px rgba(0,0,0,.05); }
.cgm-dau h2{ font-size:27px; font-weight:800; letter-spacing:-.025em; line-height:1.18; }
.cgm-nobr{ white-space:nowrap; }
.cgm-dau p{ font-size:13.5px; color:var(--muc-2); margin-top:8px; font-weight:500; font-variant-numeric:tabular-nums; }

/* Mục */
.cgm-muc{ font-size:12px; font-weight:700; color:var(--muc-3); text-transform:uppercase; letter-spacing:.07em; margin:6px 0; }
.cgm-muc--sau{ margin-top:16px; }

/* Dòng tính năng */
.cgm-tn{ display:flex; gap:14px; align-items:flex-start; padding:11px 0; }
.cgm-o-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; color:#fff; }
.cgm-o-ic svg{ width:22px; height:22px; }
.cgm-tn-chu{ min-width:0; }
.cgm-tn b{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.cgm-tn p{ font-size:13.5px; color:var(--muc-2); line-height:1.45; margin-top:2px; }

/* Lỗi đã sửa */
.cgm-sua{ background:var(--nen); border-radius:16px; padding:6px 14px; margin-top:4px; }
.cgm-sl{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; font-size:13.5px; line-height:1.45; }
.cgm-sl + .cgm-sl{ border-top:1px solid var(--ke-2); }
.cgm-sl svg{ width:17px; height:17px; color:var(--tot); flex:none; margin-top:1px; }

/* Đáy: nút Tiếp tục luôn nổi ở đáy, tránh vạch Home */
.cgm-day{
  flex:none; position:relative; z-index:2; margin-top:-18px;
  padding:12px 20px max(14px, calc(env(safe-area-inset-bottom) + 8px));
  background:linear-gradient(rgba(255,255,255,0), var(--mat) 22%);
}
.cgm-nut{
  width:100%; height:54px; border-radius:15px;
  background:var(--nhan) !important; color:#fff !important;
  font-size:16.5px; font-weight:700;
  box-shadow:0 12px 24px -14px rgba(37,99,235,.9);
  transition:transform .15s; touch-action:manipulation;
}
.cgm-nut:active{ transform:scale(.98); }
.cgm-nut:focus-visible, .cgm-x:focus-visible, .cgm-pb-nut:focus-visible{ outline:2px solid var(--nhan); outline-offset:2px; }
.cgm-day small{ display:block; text-align:center; font-size:12px; color:var(--muc-3); margin-top:10px; }

/* Hiện dần từng dòng */
.cgm-hop .cgm-hien{ opacity:0; transform:translateY(10px); }
.cgm-hop.chay .cgm-hien{ animation:cgmHien .5s var(--duong-cong) forwards; animation-delay:calc(var(--i, 0) * 45ms + 180ms); }
@keyframes cgmHien{ to{ opacity:1; transform:none; } }

/* ---------- Lịch sử cập nhật ---------- */
.cgm-ls-dau{ padding:0 4px 12px; }
.cgm-ls-dau h2{ font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.2; }
.cgm-ls-dau p{ font-size:13px; color:var(--muc-2); margin-top:2px; }
.cgm-ls-trong{ padding:28px 8px; text-align:center; color:var(--muc-3); font-size:14px; }
#app .cgm-ls-than{ padding:4px 16px 0; }

.cgm-pb{ background:var(--mat); border-radius:var(--bo-the); box-shadow:var(--bong); margin-bottom:10px; overflow:hidden; }
.cgm-pb-nut{ display:flex; align-items:center; gap:12px; width:100%; min-height:64px; padding:10px 14px 10px 16px; text-align:left; border:0; background:none; font-family:inherit; color:var(--muc); cursor:pointer; }
.cgm-pb-ic{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none; color:#fff; background:linear-gradient(135deg,#3B82F6,#7C3AED); }
.cgm-pb-ic svg{ width:18px; height:18px; }
.cgm-pb-chu{ flex:1; min-width:0; }
.cgm-pb-chu b{ font-size:15px; font-weight:700; display:block; font-variant-numeric:tabular-nums; }
.cgm-pb-chu small{ display:block; font-size:12.5px; color:var(--muc-2); margin-top:1px; }
.cgm-cham{ width:8px; height:8px; border-radius:50%; background:var(--nhan); display:inline-block; margin-left:6px; vertical-align:2px; }
.cgm-pb-mui{ width:18px; height:18px; color:var(--muc-3); flex:none; transition:transform .25s var(--duong-cong); }
.cgm-pb.mo .cgm-pb-mui{ transform:rotate(180deg); }
.cgm-pb-than{ display:none; padding:0 16px 12px; border-top:1px solid var(--ke); }
.cgm-pb.mo .cgm-pb-than{ display:block; }
.cgm-tn--nho{ padding:9px 0; gap:12px; }
.cgm-tn--nho .cgm-o-ic{ width:32px; height:32px; border-radius:9px; }
.cgm-tn--nho .cgm-o-ic svg{ width:16px; height:16px; }
.cgm-tn--nho b{ font-size:14px; }
.cgm-tn--nho p{ font-size:12.5px; }
.cgm-muc--ls{ margin-top:8px; }
.cgm-pb-than .cgm-sua{ margin-top:6px; }
.cgm-pb-than .cgm-sl{ font-size:13px; }

.cgm-nho-nhom{ background:var(--mat); border-radius:var(--bo-the); box-shadow:var(--bong); margin-bottom:10px; padding:2px 16px; }
.cgm-nho{ display:flex; gap:12px; align-items:center; min-height:50px; font-size:13.5px; }
.cgm-nho + .cgm-nho{ border-top:1px solid var(--ke); }
.cgm-nho i{ width:8px; height:8px; border-radius:50%; background:#C3C8D1; flex:none; }
.cgm-nho span{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cgm-nho time{ font-size:12px; color:var(--muc-3); flex:none; font-variant-numeric:tabular-nums; }

/* Lịch sử mở trong hộp (máy tính) */
.cgm-hop--ls .cgm-cuon{ background:var(--nen); }
.cgm-hop--ls .cgm-day{ background:var(--mat); }

/* Dòng "Có gì mới" trong Thiết lập (điện thoại) */
.cgm-hanh-ic{ background:linear-gradient(135deg,#3B82F6,#7C3AED) !important; color:#fff !important; }
.cgm-hanh-gt{ flex:none; font-size:13.5px; color:var(--muc-3); font-weight:600; font-variant-numeric:tabular-nums; }

/* ============================================================
   MÁY TÍNH — hộp giữa màn
   ============================================================ */
html.cgm-mo body.dt-che-do #app-desktop{ transition:filter .4s, transform .5s var(--duong-cong); }
html.cgm-hien-ra body.dt-che-do #app-desktop{ filter:blur(5px) saturate(.9); transform:scale(.985); }
body.dt-che-do .cgm-nen{ background:rgba(16,19,25,.34); transition:opacity .3s; }
body.dt-che-do .cgm-hop{
  top:50%; left:50%; right:auto; bottom:auto;
  width:680px; max-width:calc(100vw - 48px);
  max-height:min(700px, calc(100vh - 48px));
  border-radius:24px; box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
  transform:translate(-50%, calc(-50% + 24px)) scale(.96); opacity:0;
  transition:transform .5s var(--duong-cong), opacity .3s;
}
body.dt-che-do .cgm-hop.mo{ transform:translate(-50%, -50%); opacity:1; }
body.dt-che-do .cgm-tay{ display:none; }
body.dt-che-do .cgm-x{
  display:grid; place-items:center; position:absolute; right:16px; top:16px; z-index:4;
  width:36px; height:36px; border-radius:50%; background:var(--nen) !important; color:var(--muc-2) !important;
}
body.dt-che-do .cgm-x svg{ width:16px; height:16px; }
body.dt-che-do .cgm-x:hover{ background:var(--ke-2) !important; color:var(--muc) !important; }
body.dt-che-do .cgm-cuon{ padding:34px 40px 18px; }
body.dt-che-do .cgm-dau{ display:flex; gap:18px; align-items:center; text-align:left; padding-right:40px; }
body.dt-che-do .cgm-icon{ margin:0; width:64px; height:64px; border-radius:15px; }
body.dt-che-do .cgm-dau h2{ font-size:25px; }
body.dt-che-do .cgm-dau p{ margin-top:4px; }
body.dt-che-do .cgm-luoi{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; }
body.dt-che-do .cgm-day{
  display:flex; align-items:center; gap:16px; margin-top:0;
  padding:14px 40px 24px; background:var(--mat); border-top:1px solid var(--ke);
}
body.dt-che-do .cgm-day small{ order:-1; flex:1; margin:0; text-align:left; }
body.dt-che-do .cgm-nut{ width:auto; margin-left:auto; padding:0 34px; height:48px; font-size:15px; }
body.dt-che-do .cgm-nut:hover{ background:var(--nhan-dam) !important; }
body.dt-che-do .cgm-hop--ls .cgm-cuon{ padding-top:28px; }
body.dt-che-do .cgm-hop--ls .cgm-ls-dau{ padding-right:48px; }

@media (prefers-reduced-motion: reduce){
  .cgm-nen, .cgm-hop, html.cgm-mo body #app, html.cgm-mo body #app-desktop, .cgm-pb-mui{ transition:none !important; }
  html.cgm-hien-ra body:not(.dt-che-do) #app{ transform:none; border-radius:0; }
  html.cgm-dd, html.cgm-dd body{ background:var(--nen); }
  .cgm-hop .cgm-hien, .cgm-hop.chay .cgm-hien{ animation:none; opacity:1; transform:none; }
}