*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Ẩn nút tăng/giảm (spinner) mặc định của MỌI ô input[type=number] trong toàn web — trước đây chỉ ẩn riêng ở vài ô (.clock-inp), giờ áp dụng chung 1 chỗ khỏi lặp lại. */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } :root { --bg:#ffffff;--bg2:#f5f5f5;--bg3:#ebebeb; --text:#111111;--text2:#555555;--text3:#888888; --border:rgba(0,0,0,0.12);--border2:rgba(0,0,0,0.22); --radius:8px;--radius-lg:12px; /* ===== Token Liquid Glass (dùng ở 2 khối cuối file: global + @media mobile) ===== Chất "kính" iOS 26: fill RẤT trong (15-25%) — độ đọc được đến từ blur + saturate cao (màu phía sau rực xuyên qua), còn "chất kính" đến từ LENSING ở mép (rim specular + hairline + quầng trong), KHÔNG phải từ fill đục. */ --glass-bg:rgba(255,255,255,0.18);--glass-bg-strong:rgba(255,255,255,0.38); --glass-filter:blur(14px) saturate(200%); /* Biến thể CLEAR (giọt nước — tab bar/nút nổi): gần như không fill, blur cực thấp để thấy rõ nội dung sau kính; chất kính chỉ còn ở mép + khúc xạ */ --glass-clear-bg:rgba(255,255,255,0.10); --glass-clear-filter:blur(4px) saturate(190%); --glass-clear-sheen:linear-gradient(rgba(255,255,255,0.14),rgba(255,255,255,0) 45%); --glass-edge:rgba(255,255,255,0.65); /* viền hairline quanh mép kính */ --glass-hi:rgba(255,255,255,0.95); /* specular cạnh trên (bắt sáng) */ --glass-hi-2:rgba(255,255,255,0.4); /* specular cạnh dưới (yếu hơn) */ --glass-glow:rgba(255,255,255,0.18); /* quầng sáng trong = độ dày kính */ --glass-shadow:0 12px 32px rgba(0,0,0,0.16),0 2px 8px rgba(0,0,0,0.07); /* Lớp sheen chéo mô phỏng khúc xạ/thấu kính trên mặt kính (nhẹ thôi — fill đã trong) */ --glass-sheen:linear-gradient(160deg,rgba(255,255,255,0.22),rgba(255,255,255,0.04) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,0.10)); /* Popup/sheet: kính SÁNG kiểu iOS 26. backdrop-filter của popup nhìn XUYÊN QUA lớp dim của .modal-ov phía sau → dim phải NHẸ, kính tự đẩy sáng (brightness) + fill trắng dày hơn kính thường; dim đậm + fill mỏng như trước = kính đục XÁM bẩn */ --modal-bg:rgba(255,255,255,0.62); --modal-filter:blur(20px) saturate(200%) brightness(1.1); --ov-dim:rgba(15,17,24,0.16); /* Chất liệu lớp NỘI DUNG (thẻ/nút/ô nhập): mờ đục hơn kính nổi, KHÔNG blur (đỡ GPU) */ --card-bg:rgba(255,255,255,0.5);--card-border:rgba(255,255,255,0.65); --card-hi:rgba(255,255,255,0.55);--inp-bg:rgba(255,255,255,0.45); /* Nền ambient nhiều màu cố định phía sau — kính phải có gì đó để khúc xạ. Kính càng trong thì màu nền càng cần rõ hơn một chút. */ --ambient:radial-gradient(110% 55% at -10% -8%,rgba(55,138,221,0.22),transparent 55%), radial-gradient(90% 45% at 108% -4%,rgba(29,158,117,0.20),transparent 55%), radial-gradient(70% 40% at 85% 55%,rgba(124,92,208,0.10),transparent 60%); /* Dải mờ dần sát mép dưới màn hình (scroll edge effect dưới tab bar) */ --fade-edge:linear-gradient(to top,rgba(255,255,255,0.85),rgba(255,255,255,0)); } @media(prefers-color-scheme:dark){ :root{--bg:#1a1a1a;--bg2:#262626;--bg3:#303030;--text:#f0f0f0;--text2:#aaaaaa;--text3:#666666;--border:rgba(255,255,255,0.10);--border2:rgba(255,255,255,0.20); --glass-bg:rgba(18,18,22,0.28);--glass-bg-strong:rgba(24,24,28,0.48); --glass-filter:blur(14px) saturate(170%) brightness(1.15); --glass-clear-bg:rgba(24,24,28,0.22); --glass-clear-filter:blur(4px) saturate(160%) brightness(1.12); --glass-clear-sheen:linear-gradient(rgba(255,255,255,0.07),rgba(255,255,255,0) 45%); --glass-edge:rgba(255,255,255,0.18); --glass-hi:rgba(255,255,255,0.32);--glass-hi-2:rgba(255,255,255,0.09); --glass-glow:rgba(255,255,255,0.06); --glass-shadow:0 12px 32px rgba(0,0,0,0.55),0 2px 8px rgba(0,0,0,0.35); --glass-sheen:linear-gradient(160deg,rgba(255,255,255,0.10),rgba(255,255,255,0.02) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,0.05)); --modal-bg:rgba(34,34,40,0.6); --modal-filter:blur(20px) saturate(170%) brightness(1.3); --ov-dim:rgba(0,0,0,0.45); --card-bg:rgba(255,255,255,0.07);--card-border:rgba(255,255,255,0.11); --card-hi:rgba(255,255,255,0.09);--inp-bg:rgba(255,255,255,0.09); --ambient:radial-gradient(110% 55% at -10% -8%,rgba(55,138,221,0.24),transparent 55%), radial-gradient(90% 45% at 108% -4%,rgba(29,158,117,0.18),transparent 55%), radial-gradient(70% 40% at 85% 55%,rgba(124,92,208,0.14),transparent 60%); --fade-edge:linear-gradient(to top,rgba(26,26,26,0.85),rgba(26,26,26,0));} } body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;} .container{max-width:860px;margin:0 auto;padding:20px 16px 40px;} .page-sub{font-size:12px;color:var(--text2);margin-bottom:20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px;} .flabel{font-size:12px;color:var(--text2);display:block;margin-bottom:4px;} input[type=number],input[type=datetime-local]{background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--radius);padding:8px 10px;width:100%;font-size:13px;color:var(--text);} input:focus{outline:none;border-color:#378ADD;} .mc{background:var(--bg2);border-radius:var(--radius);padding:10px 12px;} .ml{font-size:11px;color:var(--text2);margin-bottom:3px;} .mv{font-size:19px;font-weight:500;} .mu{font-size:11px;color:var(--text2);margin-left:2px;} .sec{font-size:12px;font-weight:500;color:var(--text2);margin:14px 0 8px;letter-spacing:.03em;} .pl{display:inline-block;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:500;} .pl-ok{background:#EAF3DE;color:#3B6D11;} .pl-w{background:#FAEEDA;color:#854F0B;} .pl-d{background:#FCEBEB;color:#A32D2D;} .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;} .ab{background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--radius);padding:6px 12px;font-size:12px;cursor:pointer;color:var(--text);display:inline-flex;align-items:center;gap:5px;} .ab:hover{background:var(--bg2);} .ab-primary{background:#1D9E75;color:#fff;border-color:#1D9E75;} .ab-primary:hover{background:#0F6E56;} /* Nút Lưu inline (#saveBtnTop, topbar "Lịch xe bồn" — thay FAB lưu nổi cũ): chấm vàng = có thay đổi chưa lưu (markDirty), nháy xanh dương khi vừa lưu xong */ #saveBtnTop .dot,.save-sync .dot{width:8px;height:8px;border-radius:50%;background:#ffeb3b;display:none;flex-shrink:0;} #saveBtnTop.dirty .dot,.save-sync.dirty .dot{display:block;} #saveBtnTop.saved,.save-sync.saved{background:#378ADD;border-color:#378ADD;} .tl{position:relative;border:0.5px solid var(--border);border-radius:var(--radius);background:var(--bg);padding:10px 10px 26px;margin-bottom:8px;user-select:none;} .tl.drag-over-before { border-top: 2px dashed #378ADD; } .tl.drag-over-after { border-bottom: 2px dashed #378ADD; } /* Ghi chú từng xe: nằm DƯỚI thanh timeline. margin-top vượt qua nhãn giờ (.ttl ở bottom:-14px) để không đè; khi có ghi chú rút padding-bottom (nhãn giờ đã nằm gọn phía trên ghi chú) tránh khoảng trống thừa. */ .tl.has-note{padding-bottom:12px;} /* Ghi chú (xe + kế hoạch) căn theo dòng ĐẦU (flex-start) vì ô nhập là textarea tự giãn cao — ghi chú dài xuống dòng, hiện HẾT, icon/tên bám dòng đầu */ .truck-note{width:100%;display:flex;align-items:flex-start;gap:6px;margin-top:20px;} .truck-note-ic{font-size:13px;color:#EF9F27;flex-shrink:0;margin-top:5px;} .truck-note-inp{flex:1;min-width:0;} /* Ô nhập ghi chú là textarea: tự giãn cao (JS), không kéo tay, chữ tự xuống dòng */ textarea.truck-note-inp{box-sizing:border-box;resize:none;overflow:hidden;line-height:1.4;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;} .truck-note-ro{align-items:flex-start;font-size:11px;color:var(--text2);word-break:break-word;overflow-wrap:anywhere;} .truck-note-ro .truck-note-ic,.plan-note-ro .truck-note-ic{margin-top:1px;} .truck-note-ro .truck-note-txt{flex:1;min-width:0;} /* Tên người ghi chú, đẩy sát mép phải để biết ai note; bám dòng đầu của textarea */ .truck-note-by{margin-left:auto;padding-left:8px;flex-shrink:0;font-size:10px;font-weight:600;color:var(--text3);white-space:nowrap;margin-top:5px;} .truck-note-ro .truck-note-by,.plan-note-ro .truck-note-by{margin-top:0;} /* Ghi chú trong thẻ Kế hoạch LPG — dùng lại style note xe, khoảng cách nhẹ hơn (không có nhãn giờ chen vào như trên timeline) */ .plan-note{width:100%;display:flex;align-items:flex-start;gap:6px;margin-top:7px;} .plan-note-ro{margin-top:5px;align-items:flex-start;font-size:11px;color:var(--text2);word-break:break-word;overflow-wrap:anywhere;} .plan-note-ro .truck-note-txt{flex:1;min-width:0;} .truck-note-empty{color:var(--text3);font-style:italic;} /* 2 nút chọn chế độ trong popup thông báo (Lịch / Ghi chú) — active = xanh nhạt */ .ntf-mode{justify-content:center;gap:5px;font-size:12.5px;} .ntf-mode.active{background:rgba(55,138,221,0.14);border-color:rgba(55,138,221,0.5);color:#378ADD;} /* Tổng khối lượng theo kho, nằm ngay dưới lịch xe bồn: MỖI KHO 1 DÒNG (tổng chung + từng kho có đăng ký), chữ trơn không nền */ .reg-total{font-size:12px;color:var(--text2);margin:8px 2px 4px;} .reg-total div{margin-bottom:2px;} .reg-total div:last-child{margin-bottom:0;} .tr{position:relative;height:32px;margin-top:16px;} .tb{position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;height:5px;border-radius:3px;background:var(--bg3);border:0.5px solid var(--border);} .tf{position:absolute;top:50%;transform:translateY(-50%);height:5px;border-radius:3px;background:#85B7EB;pointer-events:none;} .tn{position:absolute;top:50%;transform:translateY(-50%);height:8px;border-radius:2px;background:#1D9E75;pointer-events:none;opacity:.85;} .tw{position:absolute;top:50%;transform:translateY(-50%);height:8px;border-radius:2px;background:#EF9F27;pointer-events:none;opacity:.8;} /* Vùng "nên nạp" giữa mốc 15T và 10T + 2 vạch mốc dọc */ .tzone{position:absolute;top:50%;transform:translateY(-50%);height:20px;border-radius:4px; background:repeating-linear-gradient(45deg,rgba(239,159,39,0.10),rgba(239,159,39,0.10) 6px,rgba(239,159,39,0.18) 6px,rgba(239,159,39,0.18) 12px); border:0.5px solid rgba(239,159,39,0.35);pointer-events:none;z-index:1;} .tmk{position:absolute;top:50%;transform:translateY(-50%);width:0;height:22px;pointer-events:none;z-index:3;} .tmk.t15{border-left:1.5px dashed #1D9E75;} .tmk.t10{border-left:1.5px dashed #E24B4A;} .th{position:absolute;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;background:var(--bg);border:2px solid #E24B4A;cursor:grab;display:flex;align-items:center;justify-content:center;z-index:5;font-size:10px;color:#A32D2D;} .th.dg{cursor:grabbing;border-color:#A32D2D;} .tlt{position:absolute;bottom:100%;margin-bottom:4px;transform:translateX(-50%);font-size:9px;color:var(--text2);white-space:nowrap;pointer-events:none;} .ttk{position:absolute;bottom:0;width:1px;background:var(--border);height:6px;pointer-events:none;} .ttl{position:absolute;bottom:-14px;transform:translateX(-50%);font-size:9px;color:var(--text3);white-space:nowrap;pointer-events:none;} .rb{background:none;border:none;cursor:pointer;color:var(--text2);font-size:16px;padding:0 4px;line-height:1;} .rb:hover{color:var(--text);} .sg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;} .sc{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);padding:9px 11px;} /* Picker */ .tp{position:relative;display:inline-block;flex-shrink:1;min-width:0;max-width:100%;} .tpi{font-size:12px;font-weight:500;background:var(--bg2);border:0.5px solid #378ADD;border-radius:var(--radius);padding:3px 24px 3px 8px;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;max-width:100%;} .tpi span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tpa{position:absolute;right:7px;top:8px;pointer-events:none;font-size:11px;color:var(--text2);} .tdd{position:fixed;z-index:9999;background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,0.12);min-width:220px;max-height:300px;overflow-y:auto;} .tdt{display:flex;gap:3px;padding:6px;position:sticky;top:0;background:inherit;border-bottom:0.5px solid var(--border);z-index:1;} .tdtb{flex:1;font-size:12px;font-weight:500;background:transparent;border:none;border-radius:calc(var(--radius) - 3px);padding:6px 4px;cursor:pointer;color:var(--text2);white-space:nowrap;} .tdtb:hover{background:var(--bg2);} .tdtb.active{background:#1D9E75;color:#fff;font-weight:600;} .tdp{padding:7px 0 3px;} .tdl{max-height:190px;overflow-y:auto;} .tdh{font-size:11px;color:var(--text2);padding:8px 12px 4px;font-weight:500;border-bottom:0.5px solid var(--border);} .tdo{padding:7px 12px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;} .tdo:hover{background:var(--bg2);} .tdo.sel{color:#378ADD;font-weight:500;} .tdar{display:flex;gap:6px;padding:7px 10px;border-top:0.5px solid var(--border);} .tdai{flex:1;font-family:inherit;font-size:12px;background:var(--bg2);border:0.5px solid var(--border2);border-radius:var(--radius);padding:4px 8px;color:var(--text);outline:none;} .tdai:focus{border-color:#378ADD;} .tdab{font-size:12px;background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--radius);padding:4px 10px;cursor:pointer;color:var(--text);white-space:nowrap;} .tdab:hover{background:var(--bg2);} /* z-index:15 — NẰM TRÊN thẻ xe mặc định (.chart-truck-card z-index:10) để không bị che mất khi 1 thẻ xe trùng vị trí (VD xe vừa đến đúng lúc "bây giờ"), nhưng vẫn NẰM DƯỚI thẻ đang hover/đang chạm (z-index:20) — thẻ đang thao tác trực tiếp vẫn ưu tiên hiện đầy đủ. */ #ch_nowdot{position:absolute;width:12px;height:12px;background:#378ADD;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:15;box-shadow:0 0 0 2px var(--bg);} #ch_nowdot::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:rgba(55,138,221,0.55);z-index:-1;animation:nowPulse 1.7s ease-out infinite;} @keyframes nowPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.4);opacity:0}} @media (prefers-reduced-motion:reduce){#ch_nowdot::before{animation:none;}} /* Thẻ xe bồn floating trên biểu đồ — kính CÙNG NGÔN NGỮ với dropdown/modal/menu (--glass-sheen/--glass-shadow/--glass-edge/--glass-hi/--glass-hi-2/--glass-glow, khối "Liquid Glass dùng chung" cuối file) thay vì kính phẳng riêng lẻ như trước; blur nhẹ hơn khối lớn (10px so với --glass-filter 14px) vì thẻ nhỏ, chữ bên trong cần rõ. CHẠM 1 CÁI là copy ngay (xem trucks-timeline.js) — vẫn khóa chọn chữ/callout gốc của trình duyệt vì thẻ còn phồng to lúc chạm (hiệu ứng thị giác). */ .chart-truck-card{position:absolute;transform:translate(-50%,-100%); background:var(--glass-sheen),var(--glass-bg-strong,rgba(255,255,255,0.85)); backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%); padding:4px 9px 4px 4px;border-radius:12px;display:flex;align-items:center;gap:6px; box-shadow:var(--glass-shadow), inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 1px var(--glass-hi),inset 0 -1px 1px var(--glass-hi-2), inset 0 0 10px var(--glass-glow); pointer-events:auto;transition:box-shadow .18s ease-out;z-index:10;cursor:pointer;white-space:nowrap; user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;} /* `transform` KHÔNG nằm trong `transition` ở trên — độ phồng lúc giữ chạy SPRING VẬT LÝ trên rAF (trucks-timeline.js `_chartCardSpringStep`, cùng công thức `_lensStep` K=380/C=25 dùng cho thấu kính tab) chứ không phải CSS transition, để thả tay giữa chừng animation lượn mượt tự nhiên thay vì bị giật đổi hướng (nhược điểm của cubic-bezier cố định — đã thử, không tự nhiên bằng spring thật). Trộn CSS transition + JS set transform mỗi khung hình sẽ bị lag chồng lên spring nên phải tách hẳn. */ .chart-truck-card:hover{transform:translate(-50%,-100%) scale(1.05);z-index:20;} /* Đang giữ — chỉ còn viền xanh sáng dần (box-shadow, transition CSS bình thường); độ phồng do spring JS ở trên đảm nhiệm hoàn toàn. */ .chart-truck-card.pressing{ box-shadow:0 0 0 4px rgba(29,158,117,0.42),var(--glass-shadow),inset 0 0 0 0.5px var(--glass-edge);z-index:20;} /* Icon chip vuông bo góc — cùng ngôn ngữ .car-avatar (trucks-fleet.js) thu nhỏ */ .ctc-icon{width:20px;height:20px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#1D9E75;background:rgba(29,158,117,0.14);} .ctc-icon i{font-size:12px;} .ctc-info{display:flex;flex-direction:column;line-height:1.25;min-width:0;} .ctc-name{font-size:10.5px;font-weight:700;color:var(--text);} .ctc-time{font-size:9px;color:var(--text2);} /* Đuôi trỏ xuống đúng điểm trên đường tồn — tô cùng tông viền kính cho liền mạch */ .chart-truck-card::after{content:'';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);border-width:4px 4px 0;border-style:solid;border-color:var(--glass-edge) transparent transparent transparent;} /* Thẻ đặt DƯỚI đường tồn (dashboard.js chọn khi bồn còn cao, dồn xuống khoảng trống để đỡ đè #reg_total/mép trên): vẽ XUÔI XUỐNG từ điểm neo (translate y=0 thay vì -100%) + đuôi trỏ NGƯỢC LÊN (mép trên hộp) tới đúng điểm trên đường. */ .chart-truck-card.ctc-below{transform:translate(-50%,0);} .chart-truck-card.ctc-below:hover{transform:translate(-50%,0) scale(1.05);} .chart-truck-card.ctc-below::after{top:-4px;bottom:auto;border-width:0 4px 4px 4px;border-color:transparent transparent var(--glass-edge) transparent;} /* Xe đã nạp xong — desaturate + dịu icon để phân biệt rõ với xe sắp tới, KHÔNG chỉ mờ opacity đơn thuần như trước. Tính theo doneH thực tế (napResults, dashboard.js) chứ không phải giờ đến — xe đang đợi/đang nạp dù đã QUA giờ đến vẫn KHÔNG bị mờ đi. */ .ctc-done{opacity:0.6;filter:saturate(0.6);} .ctc-done .ctc-icon{color:#888;background:rgba(136,136,136,0.14);} .ctc-done i{color:#888;} /* Đang đợi (bồn chưa đủ chỗ/đang bảo trì) / đang nạp — CÙNG màu + icon với tab "Theo dõi bồn" (tank.js updateMonitorTabIcon) cho nhất quán toàn app. Chấm ping góc icon (tabPing, dùng chung với tab) báo có hoạt động ngay trên biểu đồ mà không cần bấm vào xem chi tiết; icon "đang nạp" quay bằng .charging-spin (dùng chung mọi nơi trong app: chip trên lịch, badge clock bar). */ .ctc-charging .ctc-icon,.ctc-waiting .ctc-icon{position:relative;} .ctc-charging .ctc-icon{color:#1D9E75;background:rgba(29,158,117,0.16);} .ctc-waiting .ctc-icon{color:#EF9F27;background:rgba(239,159,39,0.16);} .ctc-charging .ctc-icon::after,.ctc-waiting .ctc-icon::after{content:'';position:absolute;top:-2px;right:-2px;width:6px;height:6px;border-radius:50%;background:currentColor;animation:tabPing 1.3s cubic-bezier(0,0,.2,1) infinite;} .ctc-charging .ctc-time{color:#1D9E75;font-weight:600;} .ctc-waiting .ctc-time{color:#EF9F27;font-weight:600;} /* Clock banner */ .clock-bar{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);padding:10px 14px;margin-bottom:14px;display:flex;align-items:stretch;gap:12px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .clock-bar::-webkit-scrollbar{display:none;} /* Các mục trong clock-bar (Tồn, Tiêu hao...): flex-grow để cân đối chiều rộng */ /* Không cho các mục tự giãn ra đầy hàng (flex-grow:0) để căn trái. */ .clock-item{flex:0 1 auto;} .clock-time{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums;} .clock-label{font-size:11px;color:var(--text2);margin-bottom:2px;} .ton-live{font-size:20px;font-weight:500;color:#378ADD;font-variant-numeric:tabular-nums;} .clock-sep{width:1px;height:32px;background:var(--border);flex-shrink:0;align-self:center;} /* Bộ chọn khoảng lịch 3/7/14 ngày */ .horizon-seg{display:inline-flex;border:0.5px solid var(--border2);border-radius:var(--radius);overflow:hidden;margin-top:2px;} .hz-btn{background:var(--bg);border:none;border-right:0.5px solid var(--border);padding:5px 9px;font-size:12px;color:var(--text2);cursor:pointer;white-space:nowrap;} .hz-btn:last-child{border-right:none;} .hz-btn:hover{background:var(--bg2);} .hz-btn.active{background:#1D9E75;color:#fff;font-weight:600;} /* Ô nhập sửa trực tiếp trên clock bar — trông như số liệu đang chạy, bấm để sửa */ .clock-inp{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums;background:transparent;border:1px solid transparent;border-radius:var(--radius);padding:1px 4px;width:74px;color:#378ADD;outline:none;cursor:text;transition:border-color .15s,background .15s;} .clock-inp:hover{border-color:var(--border);background:var(--bg);} .clock-inp:focus{border-color:#378ADD;background:var(--bg);cursor:text;} .clock-inp.rate{color:#E24B4A;width:54px;} .clock-edit-hint{font-size:10px;color:var(--text3);margin-left:1px;vertical-align:middle;opacity:.7;} .ton-live{font-size:20px;font-weight:500;color:#378ADD;font-variant-numeric:tabular-nums;} /* Update panel */ .update-panel{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:14px;} .update-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;} .update-field{flex:1;min-width:120px;} /* Mgmt */ .mgmt{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:12px;} /* align-content/items:start — lưới bị đặt min-height (khóa khung cố định khi chuyển tab LPG/LNG, xem setDepotTab/setCustomerTab) thì chip dồn LÊN TRÊN, khoảng dư nằm dưới; mặc định stretch sẽ kéo GIÃN CAO từng chip lấp đầy khung — rất xấu. */ .mgmt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;margin-top:8px;align-content:start;align-items:start;} .mgmt-chip{display:flex;align-items:center;gap:6px;background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);padding:5px 8px;font-size:12px;} .mgmt-chip-name{flex:1;font-weight:500;cursor:pointer;border-bottom:1px dashed var(--border2);} .mgmt-chip-name:hover{color:#378ADD;} /* Chứng thư */ .cert-group{margin-bottom:12px;} .cert-group-head{display:flex;align-items:center;gap:7px;margin-bottom:6px;} .cert-group-name{font-size:12px;font-weight:700;color:#378ADD;display:inline-flex;align-items:center;gap:4px;} .cert-group-line{flex:1;height:0;border-top:0.5px solid var(--border);} .cert-card{position:relative;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);padding:9px 11px;margin-bottom:6px;} .cert-card.active{border-color:rgba(29,158,117,0.5);background:rgba(29,158,117,0.04);} .cert-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px;} .cert-period{font-size:12px;font-weight:600;} .cert-now-badge{display:inline-flex;align-items:center;gap:3px;background:rgba(29,158,117,0.12);color:#1D9E75;border-radius:20px;padding:1px 8px;font-size:10px;font-weight:600;} .cert-params{display:flex;flex-wrap:wrap;gap:5px;align-items:center;} /* (badge/thẻ "hết hạn" đã bỏ — chứng thư không còn khái niệm hết hạn khi không gắn chuyến) */ .cert-pill{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;border-radius:20px;padding:2px 8px;border:0.5px solid;} .cert-pill.pr{color:#854F0B;background:rgba(239,159,39,0.1);border-color:rgba(239,159,39,0.3);} .cert-pill.c3{color:#378ADD;background:rgba(55,138,221,0.08);border-color:rgba(55,138,221,0.3);} .cert-pill.c4{color:#7C5CD0;background:rgba(124,92,208,0.08);border-color:rgba(124,92,208,0.3);} .cert-pill.link{color:#1D9E75;background:rgba(29,158,117,0.08);border-color:rgba(29,158,117,0.3);text-decoration:none;} .cert-pill.link:hover{background:rgba(29,158,117,0.16);} .cert-actions{position:absolute;top:7px;right:8px;display:flex;gap:6px;} .cert-act{background:none;border:none;cursor:pointer;color:var(--text3);font-size:13px;line-height:1;padding:0 1px;} .cert-act:hover{color:#378ADD;} .cert-act.del:hover{color:#E24B4A;} .cert-empty{font-size:12px;color:var(--text2);padding:6px 2px;} /* Form thêm xe */ .addcar{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);padding:11px 12px;margin-bottom:14px;} .addcar-title{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:9px;} .addcar-grid{display:grid;grid-template-columns:1.3fr 1.3fr 1fr 0.7fr 0.7fr;gap:8px;} .addcar-field{min-width:0;} /* Form Thêm/sửa tài khoản (Quản lý nhân sự) — 3 cột đều nhau, riêng vì số/tỉ lệ cột khác .addcar-grid (Thêm xe). Có breakpoint mobile riêng bên dưới (@media max-width:600px), tránh lặp lại lỗi trước đây: dùng thẳng grid-template-columns nội tuyến trong HTML nên bị bỏ sót không co lại trên mobile như các form khác. */ .staff-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;} .mgmt-inp{width:100%;font-family:inherit;background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--radius);padding:7px 9px;font-size:12px;color:var(--text);outline:none;} .mgmt-inp:focus{border-color:#378ADD;} /* Danh sách xe nhóm theo nhà xe */ .car-group{margin-bottom:12px;} .car-group-head{display:flex;align-items:center;gap:7px;margin-bottom:7px;} .car-group-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.02em;border-radius:6px;padding:2px 9px;} .car-group-count{font-size:11px;color:var(--text3);} .car-group-line{flex:1;height:0;border-top:0.5px solid var(--border);} .car-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;} .car-card{position:relative;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);padding:10px 11px;transition:border-color .15s,box-shadow .15s;} .car-card:hover{border-color:var(--border2);box-shadow:0 1px 6px rgba(0,0,0,0.05);} .car-card-top{display:flex;align-items:flex-start;gap:8px;} .car-avatar{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;color:#E24B4A;background:rgba(226,75,74,0.08);} .car-driver{font-size:13px;font-weight:600;line-height:1.25;word-break:break-word;} .car-plate{font-size:11.5px;color:var(--text2);margin-top:1px;font-variant-numeric:tabular-nums;word-break:break-word;} .car-card-del{position:absolute;top:6px;right:7px;background:none;border:none;cursor:pointer;color:var(--text3);font-size:16px;line-height:1;padding:0 2px;} .car-card-del:hover{color:#E24B4A;} .car-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;align-items:center;} .car-pill{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;border-radius:20px;padding:2px 8px;border:0.5px solid;} .car-pill.amt{color:#1D9E75;background:rgba(29,158,117,0.08);border-color:rgba(29,158,117,0.3);} .car-pill.phone{color:#378ADD;background:rgba(55,138,221,0.07);border-color:rgba(55,138,221,0.25);font-weight:500;text-decoration:none;} .car-pill.phone:hover{background:rgba(55,138,221,0.14);} .car-edit{font-size:10.5px;color:var(--text3);cursor:pointer;margin-left:auto;display:inline-flex;align-items:center;gap:3px;} .car-edit:hover{color:#378ADD;} .car-empty{font-size:12px;color:var(--text2);padding:6px 2px;} /* màu badge ĐVVC */ .cg-TAP{color:#0F6E56;background:rgba(29,158,117,0.12);} .cg-NTB{color:#7C5CD0;background:rgba(124,92,208,0.12);} .cg-AD{color:#854F0B;background:rgba(239,159,39,0.14);} .cg-Venus{color:#A32D2D;background:rgba(226,75,74,0.12);} .cg-STL{color:#2563B0;background:rgba(55,138,221,0.14);} .cg-none{color:var(--text2);background:var(--bg3);} /* Chứng thư */ .cert-depot-group{margin-bottom:14px;} .cert-depot-head{display:flex;align-items:center;gap:7px;margin-bottom:7px;} .cert-depot-name{font-size:12px;font-weight:700;color:#378ADD;display:inline-flex;align-items:center;gap:5px;} .cert-depot-line{flex:1;height:0;border-top:0.5px solid var(--border);} .cert-card{position:relative;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);padding:10px 11px;margin-bottom:7px;} .cert-card.active{border-color:rgba(29,158,117,0.5);background:rgba(29,158,117,0.04);} .cert-card-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px;} .cert-date{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px;} .cert-now-badge{display:inline-flex;align-items:center;gap:3px;background:rgba(29,158,117,0.12);color:#1D9E75;border-radius:20px;padding:1px 8px;font-size:10px;font-weight:700;} .cert-specs{display:flex;flex-wrap:wrap;gap:5px;} .cert-spec{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;border-radius:20px;padding:2px 8px;border:0.5px solid;} .cert-spec.p{color:#854F0B;background:rgba(239,159,39,0.1);border-color:rgba(239,159,39,0.3);} .cert-spec.c3{color:#7C5CD0;background:rgba(124,92,208,0.1);border-color:rgba(124,92,208,0.3);} .cert-spec.c4{color:#0F6E56;background:rgba(29,158,117,0.1);border-color:rgba(29,158,117,0.3);} .cert-link{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:#378ADD;text-decoration:none;border:0.5px solid rgba(55,138,221,0.3);background:rgba(55,138,221,0.07);border-radius:20px;padding:2px 8px;} .cert-link:hover{background:rgba(55,138,221,0.14);} .cert-actions{position:absolute;top:7px;right:8px;display:flex;gap:4px;} .cert-act{background:none;border:none;cursor:pointer;color:var(--text3);font-size:14px;line-height:1;padding:0 2px;} .cert-act:hover{color:#378ADD;} .cert-act.del:hover{color:#E24B4A;} .cert-empty{font-size:12px;color:var(--text2);padding:6px 2px;} .tabbtn{background:none;border:none;border-bottom:2px solid transparent;border-radius:10px 10px 0 0;color:var(--text2);cursor:pointer;font-size:14px;font-weight:500;padding:8px 14px;margin-bottom:-1px;display:inline-flex;align-items:center;gap:5px;transition:color .15s,border-color .15s;font-family:inherit;flex-shrink:0;white-space:nowrap;position:relative;z-index:1;} .tabbtn-active{color:#378ADD;border-bottom-color:#378ADD;font-weight:600;} /* Thấu kính lỏng #tabLens: CHỈ dùng ở mobile (định nghĩa trong khối @media(max-width:600px) bên dưới) — desktop giữ gạch chân cũ, lens ẩn hẳn */ #tabLens{display:none;} /* Tab Quy đổi nhiên liệu: mặc định ẩn, JS sẽ hiện khi cần (vd: restricted desktop) */ /* Tab Báo giá/Đăng ký hàng: quy tắc này KHÔNG !important nên trên DESKTOP bị applyRestrictedUI (inline display:inline-flex cho tài khoản không hạn chế) đè → tab HIỆN; MOBILE thì @media có !important nên vẫn ẩn. Convert thì không được JS đè nên ẩn cả 2 cỡ. */ #tabbtn_convert,#tabbtn_quotation,#tabbtn_greg,#tabbtn_analysis{display:none;} /* Nút quản lý nhanh cạnh tab bar: CHỈ mobile (hiện trong khối @media cuối file) */ #tabBar::-webkit-scrollbar{display:none;} .sm-card{background:var(--bg);border:0.5px solid var(--border);border-radius:14px;padding:16px;margin-bottom:16px;} .sm-row{display:grid;grid-template-columns:1fr 90px 80px 32px;gap:8px;align-items:center;margin-bottom:8px;} .sm-inp{border:0.5px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13px;background:var(--bg2);color:var(--text);font-family:inherit;width:100%;box-sizing:border-box;} .field-label{font-size:12px;font-weight:600;color:var(--text);margin-bottom:4px;} .sm-del{background:none;border:none;color:#A32D2D;cursor:pointer;font-size:18px;padding:0;} .sm-add{background:rgba(55,138,221,0.1);border:0.5px dashed rgba(55,138,221,0.5);border-radius:8px;color:#378ADD;cursor:pointer;font-size:13px;font-weight:500;padding:8px;width:100%;font-family:inherit;} .toast{position:fixed;bottom:76px;right:20px;z-index:1001;background:#222;color:#fff;border-radius:8px;padding:8px 16px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .25s;max-width:320px;white-space:normal;text-align:center;} .toast.show{opacity:1;} .copy-flash{background:rgba(29,158,117,0.15)!important;border-radius:4px;transition:background .3s;} @keyframes chargingPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.18)}} .charging-spin{animation:chargingPulse 1.1s ease-in-out infinite;display:inline-block;} /* Tab "Theo dõi bồn" động theo trạng thái xe: chấm ping lan tỏa ở góc icon + nền nút thở nhẹ theo màu (chỉ thở khi KHÔNG phải tab đang chọn, tránh đè lên nền/rim light của .tabbtn-active trên mobile). Icon Tabler dùng ::before cho glyph nên chấm ping phải nằm ở ::after. */ #tabbtn_monitor_icon{position:relative;display:inline-block;} .tab-live-charging #tabbtn_monitor_icon::after,.tab-live-waiting #tabbtn_monitor_icon::after{content:'';position:absolute;top:-2px;right:-4px;width:7px;height:7px;border-radius:50%;background:currentColor;animation:tabPing 1.3s cubic-bezier(0,0,.2,1) infinite;} @keyframes tabPing{0%{transform:scale(.5);opacity:.9}75%,100%{transform:scale(2.4);opacity:0}} .tab-live-charging:not(.tabbtn-active){animation:tabBreatheGreen 1.8s ease-in-out infinite;} .tab-live-waiting:not(.tabbtn-active){animation:tabBreatheAmber 1.8s ease-in-out infinite;} @keyframes tabBreatheGreen{0%,100%{background:rgba(29,158,117,0)}50%{background:rgba(29,158,117,.13)}} @keyframes tabBreatheAmber{0%,100%{background:rgba(239,159,39,0)}50%{background:rgba(239,159,39,.16)}} @media (prefers-reduced-motion:reduce){ .tab-live-charging:not(.tabbtn-active),.tab-live-waiting:not(.tabbtn-active){animation:none;} .tab-live-charging #tabbtn_monitor_icon::after,.tab-live-waiting #tabbtn_monitor_icon::after{animation:none;opacity:.9;transform:scale(1);} } /* Nút tích "đã nạp xong" */ /* Nút hành động tròn trên lịch (tích giao/xóa lịch/nhập cân) — đồng bộ kiểu */ .sched-act{background:none;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:background .15s,transform .1s;} .sched-act:active{transform:scale(0.9);} .sched-act.green{border:0.5px solid rgba(29,158,117,0.5);color:#1D9E75;} .sched-act.green:hover{background:rgba(29,158,117,0.12);} .sched-act.red{border:0.5px solid rgba(226,75,74,0.5);color:#E24B4A;} .sched-act.red:hover{background:rgba(226,75,74,0.12);} .notify-chip{display:inline-flex;align-items:center;gap:3px;background:rgba(55,138,221,0.1);border:0.5px solid rgba(55,138,221,0.3);border-radius:20px;color:#378ADD;cursor:pointer;padding:1px 7px;font-size:10px;font-weight:600;vertical-align:middle;margin-right:4px;font-family:inherit;line-height:inherit;transition:background .15s,transform .1s;white-space:nowrap;} .notify-chip:hover{background:rgba(55,138,221,0.2);} .notify-chip:active{transform:scale(0.94);} /* Nút Thông báo cùng hàng tên xe (cả PC lẫn mobile) — cân bằng chiều cao với khung chọn xe (.tpi) */ .notify-desktop{display:inline-flex;font-size:12px;padding:3px 10px;} /* Dòng info xe: desktop — chip liền dòng, chữ chi tiết ("Đến...→ xong...") xuống dòng riêng bên dưới (giống mobile) thay vì liền ngay sau chip. */ .inf-chips{display:inline;} .inf-detail{display:block;} .depot-tag{display:inline-flex;align-items:center;gap:4px;background:rgba(55,138,221,0.1);border:0.5px solid rgba(55,138,221,0.3);border-radius:20px;padding:1px 8px;font-size:10px;color:#378ADD;margin-left:4px;white-space:nowrap;} /* Popup dùng chung (quản lý/thông báo) — cùng ngôn ngữ với dropdown chọn xe (.tdd): thẻ kính, nhãn đầu NHỎ gọn kiểu .tdh (11-12px muted + hairline), overlay dim nhẹ cho thoáng thay vì đen đặc. Luôn canh giữa màn hình. */ .modal-ov{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.28);display:none;align-items:center;justify-content:center;} .modal-ov.show{display:flex;} .modal{background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--radius-lg);width:100%;max-width:560px;max-height:82vh;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,0.3);margin:0 0 0 0;} @media(min-width:601px){.modal{margin:0 16px;}} .modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 6px;border-bottom:0.5px solid var(--border);} .modal-title{font-size:12px;font-weight:600;color:var(--text2);display:flex;align-items:center;gap:6px;} .modal-title i{font-size:13px;} .modal-close{background:none;border:none;font-size:18px;line-height:1;cursor:pointer;color:var(--text2);padding:0 4px;} .modal-close:hover{color:var(--text);} .modal-body{overflow-y:auto;padding:10px 14px 14px;} .hist-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;flex-wrap:wrap;} .hist-day{font-size:11px;font-weight:600;color:var(--text2);margin:12px 0 6px;letter-spacing:.03em;text-transform:uppercase;} .hist-day:first-child{margin-top:0;} .hist-item{display:flex;align-items:flex-start;gap:10px;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);padding:9px 11px;margin-bottom:6px;} .hist-icon{width:30px;height:30px;border-radius:50%;background:rgba(29,158,117,0.12);display:flex;align-items:center;justify-content:center;color:#1D9E75;flex-shrink:0;margin-top:1px;} .hist-main{flex:1;min-width:0;} .hist-name{font-size:13px;font-weight:600;word-break:break-word;} .hist-meta{font-size:11px;color:var(--text2);margin-top:2px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;} .hist-tag{display:inline-flex;align-items:center;gap:3px;border-radius:20px;padding:1px 7px;font-size:10px;font-weight:600;} .hist-tag.amt{background:rgba(29,158,117,0.1);border:0.5px solid rgba(29,158,117,0.3);color:#1D9E75;} .hist-tag.car{background:rgba(124,92,208,0.1);border:0.5px solid rgba(124,92,208,0.3);color:#7C5CD0;} .hist-tag.dep{background:rgba(55,138,221,0.1);border:0.5px solid rgba(55,138,221,0.3);color:#378ADD;} .hist-tag.plan{background:rgba(217,164,65,0.12);border:0.5px solid rgba(217,164,65,0.35);color:#D9A441;} .hist-day-plan{color:#D9A441;} .hist-del{background:none;border:none;cursor:pointer;color:var(--text3);font-size:16px;padding:0 2px;line-height:1;flex-shrink:0;} .hist-del:hover{color:#E24B4A;} /* Bấm vào thẻ (ngoài vùng nút sửa/xóa) để thu nhỏ/mở rộng — ẩn bớt dòng chi tiết số liệu khi thu nhỏ, chỉ còn tên + tag ngắn gọn cho dễ lướt danh sách dài. */ .hist-item-clickable{cursor:pointer;} .hist-chevron{font-size:14px;color:var(--text3);flex-shrink:0;margin-top:3px;} .hist-empty{text-align:center;color:var(--text2);font-size:13px;padding:36px 12px;} /* ===== Liquid Glass dùng chung (desktop + mobile) ===== Phần chất liệu áp cho cả web để đồng bộ với mobile: nền ambient, thẻ nội dung mờ (KHÔNG blur — đỡ GPU), nút con nhộng, ô nhập mờ, và kính blur thật cho lớp nổi (dropdown, modal, FAB, toast, thẻ login). Tab bar viên thuốc + header dính + co giãn khi cuộn vẫn CHỈ mobile (khối @media cuối file). Khối này nằm SAU các định nghĩa gốc để thắng tie-break thứ tự. */ body::before{content:'';position:fixed;inset:0;z-index:-1;background:var(--ambient),var(--bg);} /* Thẻ nội dung: lớp mờ đục (frosted card), viền trắng mờ + specular mảnh cạnh trên */ .clock-bar,.update-panel,.mgmt,.addcar,.tl,.sc,.sm-card,.cert-card,.car-card,.hist-item,.mc,.mgmt-chip{ background:var(--card-bg);border-color:var(--card-border); box-shadow:inset 0 1px 0 var(--card-hi),0 1px 5px rgba(0,0,0,0.05);} .clock-bar,.update-panel,.mgmt,.addcar,.tl,.sm-card{border-radius:14px;} .sc,.cert-card,.car-card,.hist-item,.mc,.mgmt-chip{border-radius:12px;} .car-card:hover{border-color:var(--card-border);box-shadow:inset 0 1px 0 var(--card-hi),0 3px 12px rgba(0,0,0,0.08);} /* Ô nhập: nền mờ, bo góc đồng tâm với thẻ chứa. Khai báo lại viền focus xanh vì rule nền ở đây cùng specificity với input:focus phía trên → thứ tự thắng */ input[type=number],input[type=datetime-local],.mgmt-inp,.sm-inp,.tdai{ background:var(--inp-bg);border-color:var(--card-border);border-radius:10px;} input:focus,.mgmt-inp:focus,.sm-inp:focus,.tdai:focus{border-color:#378ADD;} #carrier_new,#depot_new{background:var(--inp-bg)!important;border-radius:10px!important;} /* Nút hành động: viên con nhộng mờ + specular, co nhẹ khi bấm (gel-like) */ .ab{border-radius:999px;background:var(--card-bg);border-color:var(--card-border); box-shadow:inset 0 1px 0 var(--card-hi),0 1px 4px rgba(0,0,0,0.06); transition:transform .2s cubic-bezier(.3,1.4,.4,1),background .15s;} .ab:active{transform:scale(0.95);} .ab-primary{background:linear-gradient(rgba(255,255,255,0.28),rgba(255,255,255,0) 55%),#1D9E75; /* Nút Thêm/Lưu chính */ border-color:transparent; box-shadow:inset 0 1px 1px rgba(255,255,255,0.5),inset 0 -1px 1px rgba(0,0,0,0.1),0 3px 10px rgba(29,158,117,0.3);} .ab-primary:hover{background:linear-gradient(rgba(255,255,255,0.28),rgba(255,255,255,0) 55%),#0F6E56;} /* Nút Lưu inline (#saveBtnTop): chất kính XANH TRONG của FAB lưu cũ (fill ~58% + specular + blur thật) thay vì nút đặc .ab-primary — nút đặc đứng cạnh tiêu đề section trên thẻ mờ bị lạc tông so với giao diện kính */ #saveBtnTop,.save-sync{border:none;color:#fff;font-weight:600;padding:7px 15px; background:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0) 55%),rgba(29,158,117,0.58); backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%); box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.35),inset 0 1px 1px rgba(255,255,255,0.6), inset 0 -1px 1px rgba(255,255,255,0.15),0 4px 14px rgba(29,158,117,0.3),0 1px 4px rgba(0,0,0,0.08);} #saveBtnTop:hover,.save-sync:hover{background:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0) 55%),rgba(15,110,86,0.8);} #saveBtnTop.saved,.save-sync.saved{background:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0) 55%),rgba(55,138,221,0.62); box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.35),inset 0 1px 1px rgba(255,255,255,0.6), 0 4px 14px rgba(55,138,221,0.3),0 1px 4px rgba(0,0,0,0.08);} .tpi{border-radius:999px;background:var(--card-bg);} #pushBtn{background:var(--card-bg)!important;border-color:var(--card-border)!important;} .sched-act{background:var(--card-bg);} .horizon-seg{border-radius:999px;background:var(--card-bg);border-color:var(--card-border);} .hz-btn{background:transparent;} /* Lớp nổi: kính blur thật + lensing (hairline + specular kép + quầng trong) */ .tdd{background:var(--glass-sheen),var(--glass-bg-strong); backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter); border:none;border-radius:16px; box-shadow:var(--glass-shadow),inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 1px var(--glass-hi),inset 0 -1px 1px var(--glass-hi-2), inset 0 0 14px var(--glass-glow);} /* Popup (#mgmtModal, xác nhận gửi thông báo...): sheet kính SÁNG iOS 26. Dim nền qua --ov-dim (NHẸ — xem chú thích token), kính --modal-bg/--modal-filter (blur dày 20px + brightness đẩy sáng) thay kính thường — kính thường đứng sau lớp dim sẽ ra xám đục. */ .modal-ov{background:var(--ov-dim);} .modal{background:var(--glass-sheen),var(--modal-bg); backdrop-filter:var(--modal-filter);-webkit-backdrop-filter:var(--modal-filter); border:none;border-radius:24px; box-shadow:0 24px 60px rgba(0,0,0,0.26),0 4px 16px rgba(0,0,0,0.10), inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 1px var(--glass-hi),inset 0 -1px 1px var(--glass-hi-2), inset 0 0 16px var(--glass-glow);} /* Đầu popup kiểu iOS: bỏ vạch chia cứng, tiêu đề to đậm màu chữ chính, nút đóng thành viên tròn kính nhỏ (như nút × của sheet iOS) */ .modal-head{border-bottom:none;padding:14px 16px 6px;} .modal-title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-0.2px;} .modal-title i{font-size:16px;color:#378ADD;} .modal-close{width:28px;height:28px;border-radius:50%;padding:0;flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1; background:var(--card-bg);color:var(--text2); box-shadow:inset 0 0 0 0.5px var(--card-border),inset 0 1px 0 var(--card-hi);} .modal-close:hover{color:var(--text);} .modal-body{padding:8px 16px 16px;} /* Mở popup: overlay fade + sheet trồi lên nảy nhẹ kiểu spring iOS */ .modal-ov.show{animation:lgOvIn .22s ease;} .modal-ov.show .modal{animation:lgSheetIn .38s cubic-bezier(.34,1.28,.44,1);} @keyframes lgOvIn{from{background:rgba(0,0,0,0);}} @keyframes lgSheetIn{from{opacity:0;transform:translateY(28px) scale(0.97);}} .toast{border-radius:999px;background:rgba(30,30,34,0.62); backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter); box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.18),inset 0 1px 1px rgba(255,255,255,0.25),0 8px 24px rgba(0,0,0,0.3);} /* Màn đăng nhập: nền ambient + thẻ kính (inline style → cần !important) */ #login_ov{background:var(--ambient),var(--bg)!important;} #login_user,#login_pass{background:var(--inp-bg)!important; border-color:var(--card-border)!important;border-radius:10px!important;} #login_user:focus,#login_pass:focus{border-color:#378ADD!important;} .login-card{background:var(--glass-sheen),var(--glass-bg-strong)!important; backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter); border:none!important;border-radius:24px!important; box-shadow:var(--glass-shadow),inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 1px var(--glass-hi),inset 0 -1px 1px var(--glass-hi-2);} /* Khúc xạ THẬT qua SVG #lgLens (index.html) — chỉ khi app.js gắn .lg-refract (Chromium). Phải viết url() thẳng trong rule (không qua var()) vì fragment-URL trong custom property có thể resolve sai theo URL của file CSS. Ghi đè cả biến dark ở dưới vì --glass-filter light/dark khác nhau. */ html.lg-refract .tdd,html.lg-refract .login-card,html.lg-refract #quickMenu{ backdrop-filter:blur(14px) saturate(200%) url(#lgLens); -webkit-backdrop-filter:blur(14px) saturate(200%) url(#lgLens);} /* Popup dùng filter SÁNG riêng (--modal-filter) — viết lại kèm url() vì url(#...) không đi qua var() được */ html.lg-refract .modal{ backdrop-filter:blur(20px) saturate(200%) brightness(1.1) url(#lgLens); -webkit-backdrop-filter:blur(20px) saturate(200%) brightness(1.1) url(#lgLens);} /* Nút công cụ (kính CLEAR, cả desktop lẫn mobile): khúc xạ MÉP #lgLensBtn — url() đứng TRƯỚC blur để bẻ cong ảnh nét rồi mới phủ sương mỏng. updateLensMaps() (app.js) sinh map cho cả 2 cỡ nút (mobile 54 / desktop 48) nên rule đặt GLOBAL, không chỉ mobile như trước (desktop từng có map mà không có rule dùng nó). */ html.lg-refract #quickBtn{ backdrop-filter:url(#lgLensBtn) blur(2px) saturate(190%); -webkit-backdrop-filter:url(#lgLensBtn) blur(2px) saturate(190%);} @media(prefers-color-scheme:dark){ html.lg-refract .tdd,html.lg-refract .login-card,html.lg-refract #quickMenu{ backdrop-filter:blur(14px) saturate(170%) brightness(1.15) url(#lgLens); -webkit-backdrop-filter:blur(14px) saturate(170%) brightness(1.15) url(#lgLens);} html.lg-refract .modal{ backdrop-filter:blur(20px) saturate(170%) brightness(1.3) url(#lgLens); -webkit-backdrop-filter:blur(20px) saturate(170%) brightness(1.3) url(#lgLens);} html.lg-refract #quickBtn{ backdrop-filter:url(#lgLensBtn) blur(2px) saturate(160%) brightness(1.12); -webkit-backdrop-filter:url(#lgLensBtn) blur(2px) saturate(160%) brightness(1.12);} } /* ── Menu công cụ dùng chung (mobile + desktop): item/label của #quickMenu. Vị trí/kích thước nút-menu đặt riêng: desktop ngay dưới đây, mobile trong khối @media cuối file. ── */ .qm-item{display:flex;align-items:center;gap:9px;background:none;border:none; font-family:inherit;font-size:13px;font-weight:500;color:var(--text); padding:11px 12px;border-radius:14px;cursor:pointer;text-align:left;} .qm-item:active{background:var(--glass-bg-strong);} .qm-item i{font-size:15px;color:#378ADD;} .qm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 12px;} .qm-label{font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:9px;} .qm-label i{font-size:15px;color:#378ADD;} /* Panel quản lý khi nằm trong popup #mgmtModal: bỏ vỏ thẻ (popup đã là thẻ kính) */ .modal-body .mgmt{background:none;border:none;box-shadow:none;padding:0;margin:0;border-radius:0;} /* Chế độ CHỈ XEM (body.readonly — tài khoản không có quyền lưu, auth.js gắn): ẩn mọi nút thay đổi dữ liệu sinh động — sửa/xóa thẻ LPG-LNG, nút Thêm chuyến, mục quản lý/bảo trì trong menu công cụ. Kéo thả/tích giao/sửa tồn đã bị chặn trong JS qua isRestrictedView(). */ body.readonly .hist-del,body.readonly .hist-add-btn{display:none!important;} /* Tài khoản thường (chỉ-xem): VẪN mở xem được 4 popup Quản lý (chứng thư/xe/ĐVVC/kho) — .qm-manage KHÔNG còn bị ẩn ở đây (restricted vẫn bị ẩn qua .qm-editor+body.restricted). Trong popup thì ẩn HẾT nút thêm/sửa/xóa để chỉ xem, không đổi được dữ liệu. */ body.readonly #cert_open_form, body.readonly #cert_form_wrap, body.readonly #mgmt_panel .addcar, body.readonly .mgmt-addrow, body.readonly .cert-actions, body.readonly .car-card-del, body.readonly .car-edit, body.readonly .mgmt-chip .rb{display:none!important;} /* Tên ĐVVC/kho vốn bấm được để sửa (mgmt-chip-name) → khóa bấm khi chỉ-xem */ body.readonly .mgmt-chip-name{pointer-events:none;cursor:default;} /* Bảo trì (#qm_maint) cũng mang class .qm-manage: tài khoản thường KHÔNG bật được bảo trì (nút clock bar #maint_wrap đã ẩn qua applyRestrictedUI) → ẩn luôn ở menu */ body.readonly #qm_maint{display:none!important;} /* Kế toán (body.ketoan, js/auth.js applyRestrictedUI): "restricted" hẹp hơn NHIỀU so với operations — KHÔNG có dải tab gì cả (kể cả desktop, nơi operations vẫn thấy Theo dõi bồn + Quy đổi bình thường), landing thẳng vào Sự kiện. Đặt NGOÀI @media để có hiệu lực ở MỌI cỡ màn hình — !important vì #tabBar có style inline (display:flex) trong index.html, chỉ !important mới thắng được inline style. */ body.ketoan #tabBar{display:none!important;} /* Nút + menu công cụ trên DESKTOP (>600px): các panel quản lý (chứng thư/xe/ ĐVVC/kho) giờ mở qua popup từ menu công cụ nên desktop cũng cần nút — viên kính tròn góc phải-dưới. Desktop giữ: Đang xem (ai online) + Quy đổi nhiên liệu + 4 mục quản lý; ẩn Báo giá/Khoảng lịch/Bảo trì (đã có trên tab bar/clock bar). Tài khoản hạn chế trên desktop: ẩn nút công cụ, hiện tab "Quy đổi nhiên liệu". */ @media(min-width:601px){ /* Tài khoản hạn chế trên desktop: ẩn nút công cụ, hiện tab Quy đổi */ body.restricted #quickBtn{display:none;} body.restricted #tabbtn_convert{display:inline-flex;} /* Kế toán: "restricted" NHƯNG KHÔNG được hưởng lối "hiện tab Quy đổi thay nút công cụ" ở trên — họ không có dải tab gì cả (đè bằng body.ketoan#tabBar bên dưới, ngoài @media), nên vẫn cần #quickBtn để vào Sự kiện. !important vì cùng độ đặc tả với 2 quy tắc .restricted ở trên, phải thắng dù đứng sau hay trước. */ body.ketoan #quickBtn{display:flex!important;} body.ketoan #tabbtn_convert{display:none!important;} #quickBtn{display:flex;position:fixed;right:20px;bottom:24px;z-index:1500; width:48px;height:48px;border-radius:50%;border:none;cursor:pointer; align-items:center;justify-content:center;color:var(--text2); background:var(--glass-clear-sheen),var(--glass-clear-bg); backdrop-filter:var(--glass-clear-filter);-webkit-backdrop-filter:var(--glass-clear-filter); box-shadow:var(--glass-shadow), inset 0 0 0 0.5px var(--glass-edge), inset 0 1.5px 1px -0.5px var(--glass-hi), inset 0 -1.5px 1px -0.5px var(--glass-hi-2), inset 0 0 16px var(--glass-glow); will-change:transform; transition:transform .2s cubic-bezier(.3,1.4,.4,1);} #quickBtn::before{content:'';position:absolute;inset:0;border-radius:inherit; pointer-events:none;opacity:.85;mix-blend-mode:screen; background:var(--spec,none) center/100% 100% no-repeat;} @media(prefers-color-scheme:dark){#quickBtn::before{opacity:.55;}} #quickBtn:active{transform:scale(0.9);} #quickMenu{position:fixed;right:20px;bottom:80px;z-index:1600; flex-direction:column;min-width:236px;padding:6px;border-radius:20px; background:var(--glass-sheen),var(--glass-bg-strong); backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter); box-shadow:var(--glass-shadow), inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 1px var(--glass-hi),inset 0 -1px 1px var(--glass-hi-2), inset 0 0 14px var(--glass-glow);} /* Desktop ẩn trong menu công cụ: Khoảng lịch/Bảo trì (đã có trên clock bar) + Đăng ký hàng/Chi tiết LPG/Chi tiết LNG (#qm_greg/#qm_details_lpg/#qm_details_lng) vì các tab này ĐÃ hiện trên dải tab desktop → khỏi lặp (Báo giá/Phân tích 2026-09 đã lên "chính", hiện trên dải tab cả mobile nên không còn mục menu công cụ riêng nữa). */ #quickMenu .qm-row,#qm_maint,#qm_greg,#qm_details_lpg,#qm_details_lng{display:none!important;} } /* Fallback cho trình duyệt/WebView không hỗ trợ backdrop-filter */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .tdd,.modal,.login-card,#quickBtn,#quickMenu{background:var(--bg2)!important;} #quickBtn::before{background:none!important;} #saveBtnTop,.save-sync{background:#1D9E75!important;} #saveBtnTop.saved,.save-sync.saved{background:#378ADD!important;} .toast{background:#222!important;} } /* Trợ năng: "Giảm độ trong suốt" → nền đặc, bỏ blur + ambient */ @media (prefers-reduced-transparency:reduce){ body::before{background:var(--bg);} .tdd,.modal,.login-card,#quickBtn,#quickMenu{background:var(--bg2)!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important;} #quickBtn::before{background:none!important;} #saveBtnTop,.save-sync{background:#1D9E75!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;} #saveBtnTop.saved,.save-sync.saved{background:#378ADD!important;} .toast{background:#222!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;} .clock-bar,.update-panel,.mgmt,.addcar,.tl,.sc,.sm-card,.cert-card,.car-card,.hist-item,.mc,.mgmt-chip{background:var(--bg2);} } /* Trợ năng: "Giảm chuyển động" → bỏ hiệu ứng co giãn */ @media (prefers-reduced-motion:reduce){ .ab{transition:none;} .ab:active{transform:none;} .modal-ov.show,.modal-ov.show .modal{animation:none;} } @media(max-width:600px){.r3{grid-template-columns:1fr 1fr;}.sg{grid-template-columns:1fr;}.update-row{flex-direction:column;}.update-field{width:100%;} .mob-hide{display:none!important;} .mob-hide-inline{display:none!important;} /* Mobile: nút Thông báo nhỏ gọn lại cho vừa hàng tên xe */ .notify-desktop{font-size:11px!important;padding:3px 9px!important;} #horizon_wrap, #maint_wrap, #maint_sep{display:none!important;} .addcar-grid{grid-template-columns:1fr 1fr;} .staff-form-grid{grid-template-columns:1fr 1fr;} .addcar-field-sm{grid-column:span 1;} .car-list{grid-template-columns:1fr;} .inf-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:3px;} .inf-detail{display:block;} /* Mobile: tài khoản/đăng xuất cùng hàng với tiêu đề (bên phải), nút thông báo xuống hàng riêng bên dưới (bên trái) */ #topHeader{row-gap:0!important;} #user_chip{order:1;margin-left:auto!important;} #topHeaderBreak{order:2;display:block!important;} #pushBtn{order:3;margin-left:0!important;margin-top:6px!important;} /* ===== Liquid Glass (CHỈ mobile) — phần bố cục/hành vi ===== Chất liệu (ambient, thẻ mờ, nút, kính lớp nổi) đã nằm ở khối global ngay trên; ở đây chỉ còn phần riêng mobile: header dính mép trên, tab bar viên thuốc + thấu kính trượt, nút/menu quản lý nhanh (#quickBtn/#quickMenu), scroll edge effect mép dưới, vị trí FAB/toast và bo góc lớn hơn cho ngón tay. */ /* Dải mờ dần sát mép dưới cho nội dung chìm dần dưới tab bar (scroll edge effect). Restricted không có tab bar → bỏ dải mờ (chỉ còn nút công cụ tròn góc phải) */ body::after{content:'';position:fixed;left:0;right:0;bottom:0;z-index:900;pointer-events:none; height:calc(96px + env(safe-area-inset-bottom));background:var(--fade-edge);} body.restricted::after{content:none;} /* Header trên: thanh kính dính mép trên, nội dung cuộn chui xuống dưới kính (như nav bar iOS) */ #topHeader{position:sticky;top:0;z-index:3000; background:var(--glass-bg); backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter); margin:-20px -16px 8px!important;padding:10px 16px 8px; border-bottom:0.5px solid var(--glass-edge)!important; box-shadow:0 8px 24px rgba(0,0,0,0.06),inset 0 -1px 0 var(--glass-hi-2);} /* Thanh tab: viên thuốc kính nổi dưới cùng, bo góc đồng tâm với nút bên trong (26-6=20). Công thức lensing: hairline + specular trên (sáng)/dưới (mờ) + quầng trong (độ dày kính). right chừa 62px (54 nút + 8 khe) cho nút quản lý nhanh #quickBtn bên phải. */ #tabBar{position:fixed!important;left:12px;right:74px; bottom:calc(12px + env(safe-area-inset-bottom));margin:0!important; border-bottom:none!important;z-index:3500; background:var(--glass-clear-sheen),var(--glass-clear-bg); backdrop-filter:var(--glass-clear-filter);-webkit-backdrop-filter:var(--glass-clear-filter); border-radius:26px; box-shadow:var(--glass-shadow), inset 0 0 0 0.5px var(--glass-edge), inset 0 1.5px 1px -0.5px var(--glass-hi), inset 0 -1.5px 1px -0.5px var(--glass-hi-2), inset 0 0 16px var(--glass-glow); padding:6px;justify-content:space-around; will-change:transform; /* skill liquid-glass: tự lên compositor layer riêng, đỡ repaint filter khi nội dung sau kính đổi */ touch-action:pan-y;} /* chừa cử chỉ ngang cho kéo thấu kính, dọc vẫn cuộn trang */ /* Mobile cố định 4 tab (Theo dõi bồn/Báo giá/Phân tích/Tổng hợp — 2026-09 đổi chỗ Chi tiết LPG/LNG lấy Báo giá/Phân tích lên "chính") — Quy đổi nhiên liệu, Đăng ký hàng, Chi tiết LPG và Chi tiết LNG nằm trong menu công cụ */ #tabbtn_convert,#tabbtn_greg,#tabbtn_details_lpg,#tabbtn_details_lng{display:none!important;} /* Tài khoản hạn chế: BỎ hẳn dải tab (mặc định Theo dõi bồn); vẫn có nút công cụ nhưng menu chỉ còn mục Quy đổi/Theo dõi bồn — các mục quản lý/khoảng lịch/bảo trì (.qm-editor) ẩn hết */ body.restricted #tabBar{display:none!important;} body.restricted .qm-editor{display:none!important;} #tabBar::before{content:'';position:absolute;inset:0;border-radius:inherit; pointer-events:none;z-index:2;opacity:.85;mix-blend-mode:screen; background:var(--spec,none) center/100% 100% no-repeat;} /* Nút quản lý nhanh: viên kính tròn tách rời bên phải tab bar (cùng công thức lensing) */ #quickBtn{display:flex;position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:3500;width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;align-items:center;justify-content:center;color:var(--text2);background:var(--glass-clear-sheen),var(--glass-clear-bg);backdrop-filter:var(--glass-clear-filter);-webkit-backdrop-filter:var(--glass-clear-filter);box-shadow:var(--glass-shadow), inset 0 0 0 0.5px var(--glass-edge), inset 0 1.5px 1px -0.5px var(--glass-hi), inset 0 -1.5px 1px -0.5px var(--glass-hi-2), inset 0 0 16px var(--glass-glow);will-change:transform;transition:transform .2s cubic-bezier(.3,1.4,.4,1);} /* Rim specular cho nút tròn (cùng cơ chế --spec như #tabBar::before); không z-index nên vẫn nằm DƯỚI icon (nội dung nút) */ #quickBtn::before{content:'';position:absolute;inset:0;border-radius:inherit; pointer-events:none;opacity:.85;mix-blend-mode:screen; background:var(--spec,none) center/100% 100% no-repeat;} #quickBtn:active{transform:scale(0.9);} /* Menu quản lý nhanh bung lên trên nút (app.js đặt display:flex/none) */ #quickMenu{position:fixed;right:12px;z-index:3600; bottom:calc(74px + env(safe-area-inset-bottom)); flex-direction:column;min-width:236px;padding:6px;border-radius:20px; background:var(--glass-sheen),var(--glass-bg-strong); backdrop-filter:var(--glass-filter);-webkit-backdrop-filter:var(--glass-filter); box-shadow:var(--glass-shadow), inset 0 0 0 0.5px var(--glass-edge), inset 0 1px 1px var(--glass-hi),inset 0 -1px 1px var(--glass-hi-2), inset 0 0 14px var(--glass-glow);} /* (.qm-item/.qm-row/.qm-label đã chuyển lên khối global — dùng chung desktop) */ /* Khúc xạ thật trên Chromium — phần CHỈ mobile: header (kính MỜ, desktop giữ header thường) + tab bar (kính CLEAR): url() đứng TRƯỚC blur để bẻ cong ảnh nét rồi mới phủ sương mỏng (đúng thứ tự quang học). (#quickMenu/#quickBtn đã chuyển lên khối global — desktop cũng khúc xạ.) */ html.lg-refract #topHeader{ backdrop-filter:blur(14px) saturate(200%) url(#lgLens); -webkit-backdrop-filter:blur(14px) saturate(200%) url(#lgLens);} html.lg-refract #tabBar{ backdrop-filter:url(#lgLensBar) blur(2px) saturate(190%); -webkit-backdrop-filter:url(#lgLensBar) blur(2px) saturate(190%);} @media(prefers-color-scheme:dark){ html.lg-refract #topHeader{ backdrop-filter:blur(14px) saturate(170%) brightness(1.15) url(#lgLens); -webkit-backdrop-filter:blur(14px) saturate(170%) brightness(1.15) url(#lgLens);} html.lg-refract #tabBar{ backdrop-filter:url(#lgLensBar) blur(2px) saturate(160%) brightness(1.12); -webkit-backdrop-filter:url(#lgLensBar) blur(2px) saturate(160%) brightness(1.12);} html.lg-refract #tabLens{ backdrop-filter:url(#lgLensDrop) blur(1px) saturate(170%) brightness(1.1); -webkit-backdrop-filter:url(#lgLensDrop) blur(1px) saturate(170%) brightness(1.1);} } /* 4 nút chia ĐỀU bề ngang (flex:1 + min-width:0 thắng flex-shrink:0 của bản desktop) — nhãn dài ngắn khác nhau không làm lệch cột, chữ/icon canh giữa */ .tabbtn{border-bottom:none;flex-direction:column;gap:2px; flex:1 1 0;min-width:0;justify-content:center;overflow:hidden; padding:6px 4px;font-size:10px;border-radius:20px;margin-bottom:0; transition:transform .2s cubic-bezier(.2,.8,.4,1),background .2s,box-shadow .2s;} .tabbtn:active{transform:scale(0.92);background:var(--glass-bg-strong);} /* Tab đang chọn: nền/thấu kính chuyển sang #tabLens để trượt được giữa các tab như giọt nước — nút chỉ giữ màu chữ, lens mang rim light + bóng đổ */ .tabbtn-active{background:none;border-bottom-color:transparent!important;box-shadow:none;} /* Thấu kính lỏng trượt giữa các tab (CHỈ mobile). Vị trí/kích thước do moveTabLens() (app.js) đặt bằng px theo nút đang chọn; CHUYỂN ĐỘNG do SPRING vật lý chạy rAF trong app.js lái left/transform từng frame — CSS chỉ giữ transition opacity (KHÔNG transition left/width/transform, sẽ đá nhau với spring). */ /* Kính TRUNG TÍNH kiểu Apple (không nhuộm màu) — tab đang chọn nhận diện bằng màu chữ #378ADD đậm (rule .tabbtn-active gốc), lens chỉ là giọt kính */ #tabLens{display:block;position:absolute;left:0;top:0;width:0;height:0;opacity:0; z-index:0;pointer-events:none;border-radius:20px;transform-origin:50% 50%; will-change:transform; /* spring app.js lái left/transform từng frame */ background:linear-gradient(rgba(255,255,255,0.26),rgba(255,255,255,0.04) 60%),rgba(255,255,255,0.09); box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.4), inset 0 1px 1px var(--glass-hi),inset 0 -1px 1px rgba(255,255,255,0.12), 0 3px 10px rgba(0,0,0,0.14); transition:opacity .2s;} /* Gương/kính cho CHÍNH thấu kính: rim specular sinh theo profile mép (--spec, cùng cơ chế với #tabBar::before — fallback gradient nhẹ khi chưa kịp sinh) + khúc xạ thật qua #lgLensDrop (chỉ Chromium). Lens nằm TRONG tab bar cũng đang backdrop-filter nên nó khúc xạ lại nền đã blur nhẹ của bar — trình duyệt không lấy được nền lồng nhau thì tự rơi về lớp sheen, không vỡ gì. */ /* Opacity vừa phải để ánh viền không đè gắt lên chữ tab khi giọt đi qua (chữ nằm TRÊN lens — z-index 1) */ #tabLens::after{content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none;opacity:.6;mix-blend-mode:screen; background:var(--spec,linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0) 45%)) center/100% 100% no-repeat;} html.lg-refract #tabLens{ backdrop-filter:url(#lgLensDrop) blur(1px) saturate(200%); -webkit-backdrop-filter:url(#lgLensDrop) blur(1px) saturate(200%);} /* Đang kéo bằng ngón tay (app.js đặt left/transform từng frame): tắt transition để bám ngón; bóng đậm hơn + phản quang rõ hơn như giọt nước được nhấc lên khỏi mặt kính */ #tabLens.lens-drag{transition:opacity .2s; box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.55), inset 0 1px 1px var(--glass-hi),inset 0 -1px 1px rgba(255,255,255,0.14), 0 6px 18px rgba(0,0,0,0.24);} #tabLens.lens-drag::after{opacity:.75;} /* (lensJelly/.lens-settle/.lens-stretch đã bỏ — rung khi đáp giờ là overshoot tự nhiên của spring trong app.js, không cần keyframes) */ /* Dark: kính trắng hạ liều (nền tối cần ít fill trắng hơn), specular dịu lại */ @media(prefers-color-scheme:dark){ #tabLens{background:linear-gradient(rgba(255,255,255,0.13),rgba(255,255,255,0.02) 60%),rgba(255,255,255,0.055); box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.22), inset 0 1px 1px var(--glass-hi),inset 0 -1px 1px rgba(255,255,255,0.06), 0 3px 10px rgba(0,0,0,0.4);} #tabLens.lens-drag{ box-shadow:inset 0 0 0 0.5px rgba(255,255,255,0.3), inset 0 1px 1px var(--glass-hi),inset 0 -1px 1px rgba(255,255,255,0.08), 0 6px 18px rgba(0,0,0,0.5);} #tabBar::before,#quickBtn::before{opacity:.55;} #tabLens::after{opacity:.4;} } .container{padding-bottom:calc(96px + env(safe-area-inset-bottom));} /* Bo góc lớn hơn cho ngón tay (chất liệu đã có ở khối global) */ .clock-bar,.update-panel,.mgmt,.addcar,.tl,.sm-card{border-radius:18px;} .sc,.cert-card,.car-card,.hist-item,.mc,.mgmt-chip{border-radius:14px;} input[type=number],input[type=datetime-local],.mgmt-inp,.sm-inp,.tdai{border-radius:12px;} #carrier_new,#depot_new{border-radius:12px!important;} .tdd{border-radius:18px;} /* Toast: ngồi ngay trên tab bar viên thuốc (trước ở 140px — thừa hẳn 1 tầng do tính năng chat cũ từng chiếm chỗ phía trên tab bar, giờ đã bỏ nên kéo toast xuống sát tab bar cho gọn, khỏi lửng lơ giữa màn hình). */ .toast{bottom:calc(84px + env(safe-area-inset-bottom));right:16px;} /* Modal: canh giữa, thụt vào so với cạnh màn hình, bo góc lớn */ .modal-ov{z-index:5000;padding:16px 8px;} .modal{border-radius:26px;} /* Fallback/trợ năng cho phần CHỈ mobile (phần dùng chung đã có ở khối global) */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #topHeader,#tabBar,#quickBtn,#quickMenu{background:var(--bg2)!important;} #tabLens::after,#tabBar::before,#quickBtn::before{background:none!important;} } @media (prefers-reduced-transparency:reduce){ #topHeader,#tabBar,#quickBtn,#quickMenu{background:var(--bg2)!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important;} #tabLens{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;} #tabLens::after,#tabBar::before,#quickBtn::before{background:none!important;} } @media (prefers-reduced-motion:reduce){ .tabbtn,#quickBtn{transition:none;} .tabbtn:active,#quickBtn:active{transform:none;} #tabLens{transition:opacity .2s;} /* spring đã tự bỏ qua khi reduced-motion (moveTabLens nhảy thẳng) */ } } /* ============ TAB SỰ KIỆN (js/events.js) ============ Dùng chung .sm-card/.sec. */ .ev-list{display:flex;flex-direction:column;gap:10px;} .ev-card{display:flex;align-items:center;gap:12px;cursor:pointer;margin-bottom:0;} .ev-card:hover{border-color:var(--border2);} .ev-icon{font-size:28px;line-height:1;flex-shrink:0;} .ev-info{flex:1;min-width:0;} .ev-name{font-size:14px;font-weight:600;color:var(--text);} .ev-badge{font-size:10px;font-weight:500;color:var(--text2);background:var(--bg2);border:0.5px solid var(--border);border-radius:999px;padding:1px 7px;margin-left:4px;vertical-align:1px;} .ev-desc{font-size:12px;color:var(--text2);margin-top:2px;} .ev-chev{color:var(--text3);font-size:16px;flex-shrink:0;} /* ============ TAB SUMMER TRIP 2026 (js/summer-trip.js, prefix .st-) ============ Dùng chung token --card-*/--glass-* + .sm-card/.ab/.sec nên tự khớp Liquid Glass và dark mode; chỉ thêm điểm nhấn mùa hè (gradient tiêu đề, sóng, đếm ngược). */ #tab_trip{max-width:760px;margin:0 auto;} .st-back{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text2);cursor:pointer;margin-bottom:10px;} .st-back:hover{color:#378ADD;} /* width/height BẮT BUỘC: canvas là replaced element, inset:0 không ép được kích thước hiển thị — thiếu nó canvas hiện theo attribute (gấp dpr lần viewport), hạt vẽ ở nửa dưới lọt hẳn ra ngoài màn hình. */ #st_fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60; will-change:contents;} /* min-height thật do sizeTripHero (js/summer-trip.js) đo và ghi inline — kéo hero dài VỪA TỚI mép trên thanh công cụ (tab bar mobile)/đáy màn (desktop); 60vh chỉ là fallback trước khi đo. .st-waves absolute bám đáy nên hero cao thêm là biển tự tụt theo. */ .st-hero{position:relative;overflow:hidden;text-align:center;padding:26px 18px 96px; min-height:60vh;contain:layout style paint;} /* Mặt trời/mặt trăng: CHÍNH LÀ 2 nút ☀️/🎆 cũ trong .st-play-btns (js/summer-trip.js _skyPointerMove kéo bằng transform:translate, ghi --sun-x/-y/--moon-x/-y % lên .st-hero) — .st-sky-light đọc lại qua radial-gradient để vầng sáng/tối bám theo vị trí đang kéo, mix-blend-mode hoà vào nền kính phía sau. z-index: sky-light(1) dưới mọi nội dung thường (auto, KHÔNG set z-index — auto vẫn thấp hơn 1) < 2 nút (3/4, luôn rõ nét, không bị hoà màu bởi chính vầng sáng của nó). */ /* Ánh sáng vầng kiểu TÁN XẠ THẬT (không phải đốm tròn cụt "trói quanh" vầng): mỗi vầng 2 lớp — lõi chói nhỏ giảm nhanh (nguồn sáng điểm) + quầng tán xạ RỘNG đuôi rất dài lan gần hết khung (falloff ~nghịch đảo bình phương, nhiều stop alpha giảm dần về 0 thay vì cắt cụt ở 1 mốc %). Mặt trời ám vàng ấm cả vùng trời quanh nó, mặt trăng quầng bạc lạnh nhỏ hơn + dịu hơn. */ /* Mặt trời KHÔNG còn tỏa vầng sáng xung quanh (.st-sky-light) — quá chói khi cộng với halo/tia riêng của khối mặt trời; chỉ còn mặt trăng có vầng ambient. Bù lại người dùng vẫn thấy "có nắng" qua chính khối mặt trời + tia sáng riêng. */ .st-sky-light{position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:soft-light; transition:background .25s; background: radial-gradient(circle at var(--moon-x,64%) var(--moon-y,78%),rgba(226,240,255,0.55),rgba(186,210,235,0.28) 10%,rgba(148,163,184,0.14) 24%,transparent 48%), radial-gradient(circle at var(--moon-x,64%) var(--moon-y,78%),rgba(51,65,85,0.2),rgba(30,41,59,0.1) 45%,transparent 85%);} @media (prefers-color-scheme:dark){ .st-sky-light{mix-blend-mode:screen; background: radial-gradient(circle at var(--moon-x,64%) var(--moon-y,78%),rgba(226,240,255,0.4),rgba(147,197,253,0.18) 10%,rgba(100,116,139,0.08) 26%,transparent 50%), radial-gradient(circle at var(--moon-x,64%) var(--moon-y,78%),rgba(30,41,59,0.5),rgba(15,23,42,0.25) 45%,transparent 85%);} } /* Nhật/nguyệt thực TIẾN TRÌNH theo --ecl (0→1 độ che phủ, _skyCheckEclipse ghi lên .st-hero): vầng sáng thường mờ dần, màn trời .st-ecl-veil tối/ám đỏ dần quanh điểm che (--moon-x/-y), sao .st-ecl-stars hiện dần; .st-ecl-total = toàn phần. */ .st-hero.st-eclipse-solar .st-sky-light{opacity:calc(1 - var(--ecl,0)*0.85);} .st-hero.st-eclipse-lunar .st-sky-light{opacity:calc(1 - var(--ecl,0)*0.5);} .st-ecl-veil,.st-ecl-stars{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;} .st-hero.st-eclipse-solar .st-ecl-veil{opacity:calc(var(--ecl,0)*0.88); background:radial-gradient(circle at var(--moon-x,50%) var(--moon-y,50%),rgba(2,6,23,0.8),rgba(2,6,23,0.5) 42%,rgba(2,6,23,0.22) 78%);} .st-hero.st-eclipse-lunar .st-ecl-veil{opacity:calc(var(--ecl,0)*0.78); background:radial-gradient(circle at var(--moon-x,50%) var(--moon-y,50%),rgba(154,52,18,0.5),rgba(88,28,12,0.3) 45%,rgba(15,10,30,0.34) 82%);} /* Chớp sáng "nhẫn kim cương" đúng khoảnh khắc vào toàn phần */ .st-ecl-veil::after{content:'';position:absolute;inset:0;background:#fff;opacity:0;} .st-hero.st-ecl-total .st-ecl-veil::after{animation:st-ecl-flash .6s ease-out;} @keyframes st-ecl-flash{0%{opacity:.85}100%{opacity:0}} /* Trời sao: 2 lớp tĩnh (BỎ animation — radial-gradient repaint là thủ phạm lag). Sao chòm hoàng đạo SVG (st-cst-s) vẫn lấp lánh độc lập, rất nhẹ. */ .st-ecl-stars i{position:absolute;inset:0;background-repeat:repeat;} .st-st1{background-size:240px 200px;opacity:.75; background-image: radial-gradient(1.8px 1.8px at 22px 28px,#fff 50%,transparent 55%), radial-gradient(1.3px 1.3px at 78px 112px,rgba(130,180,255,0.95) 50%,transparent 55%), radial-gradient(2px 2px at 148px 64px,rgba(255,230,140,0.9) 50%,transparent 55%), radial-gradient(1.1px 1.1px at 188px 160px,rgba(160,200,255,0.85) 50%,transparent 55%), radial-gradient(1.6px 1.6px at 210px 40px,#fff 50%,transparent 55%), radial-gradient(1.2px 1.2px at 48px 170px,rgba(255,220,120,0.85) 50%,transparent 55%), radial-gradient(1.4px 1.4px at 120px 140px,rgba(140,190,255,0.9) 50%,transparent 55%);} .st-st2{background-size:280px 240px;opacity:.5; background-image: radial-gradient(1.5px 1.5px at 30px 140px,rgba(255,235,150,0.9) 50%,transparent 55%), radial-gradient(2px 2px at 130px 20px,#fff 50%,transparent 55%), radial-gradient(1.2px 1.2px at 200px 100px,rgba(120,170,255,0.9) 50%,transparent 55%), radial-gradient(1.7px 1.7px at 250px 180px,rgba(255,225,130,0.85) 50%,transparent 55%), radial-gradient(1.3px 1.3px at 70px 60px,rgba(150,195,255,0.9) 50%,transparent 55%), radial-gradient(1.1px 1.1px at 170px 200px,#fff 50%,transparent 55%);} .st-st3,.st-st4{display:none;} .st-hero.st-eclipse-solar .st-ecl-stars{opacity:calc(var(--ecl,0)*var(--ecl,0));} .st-hero.st-eclipse-lunar .st-ecl-stars{opacity:calc(var(--ecl,0)*0.75);} /* Đủ 12 CUNG HOÀNG ĐẠO (js/summer-trip.js TRIP_ZODIAC/renderZodiac) rải quanh viền .st-hero (vị trí/kích thước riêng từng chòm qua style inline, KHÔNG còn 1 vị trí cố định như bản cũ chỉ có Cự Giải) — KHÔNG có chú thích tên cung (đã bỏ hẳn /.st-cst-t). Chỉ hiện trên TRỜI ĐÊM toàn phần, độ rõ theo --stars-hi (trên cao xa biển mới rõ); nét nối VẼ DẦN sau 1.5s (không vẽ ngay khi vào toàn phần — để mắt kịp thích nghi với bầu trời tối trước), sao thở lệch pha. */ .st-constel{position:absolute;z-index:1;pointer-events:none;opacity:0; transition:opacity .6s;overflow:visible;} .st-hero.st-ecl-total .st-constel{opacity:var(--stars-hi,0); pointer-events:auto; cursor:pointer;} .st-hero.st-ecl-total .st-constel:hover{filter:drop-shadow(0 0 6px rgba(255,255,255,0.7));} .st-zodiac-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9); width:260px;background:rgba(20,25,40,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.15);border-radius:16px;padding:20px;color:#fff; z-index:100;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.5); opacity:0;transition:opacity 0.3s, transform 0.3s;pointer-events:none;} .st-zodiac-popup.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;} .st-zodiac-close{position:absolute;top:8px;right:8px;background:none;border:none; color:rgba(255,255,255,0.6);font-size:20px;cursor:pointer;padding:4px 8px;} .st-zodiac-icon{font-size:36px;margin-bottom:8px;filter:drop-shadow(0 0 8px rgba(255,255,255,0.5));} .st-zodiac-name{font-size:18px;font-weight:700;margin-bottom:4px;} .st-zodiac-meta{font-size:13px;color:rgba(255,255,255,0.7);margin-bottom:12px; display:flex;justify-content:center;gap:12px;} .st-zodiac-desc{font-size:14px;line-height:1.5;color:rgba(255,255,255,0.9);} .st-cst-l{fill:none;stroke:rgba(191,219,254,0.42);stroke-width:0.7; stroke-dasharray:100;stroke-dashoffset:100;} .st-hero.st-ecl-total .st-cst-l{animation-name:st-cst-draw;animation-timing-function:ease-out;animation-fill-mode:forwards;} @keyframes st-cst-draw{to{stroke-dashoffset:0}} .st-cst-s{fill:#fff;opacity:0; filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px rgba(255,255,255,0.8));} .st-hero.st-ecl-total .st-cst-s{animation-name:st-cst-star;animation-timing-function:ease-out;animation-fill-mode:forwards;} @keyframes st-cst-star{to{opacity:1}} .st-badge{position:relative;display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--text2);background:var(--inp-bg); border:0.5px solid var(--card-border);border-radius:999px;padding:5px 12px;} .st-title{position:relative;margin:12px auto 6px;font-size:clamp(24px,5.4vw,38px);font-weight:800; line-height:1.15;letter-spacing:-0.5px;max-width:480px; background:linear-gradient(92deg,#155E75 10%,#378ADD 55%,#F59E0B 95%); -webkit-background-clip:text;background-clip:text;color:transparent;} @media (prefers-color-scheme:dark){ .st-title{background:linear-gradient(92deg,#7DD3FC 10%,#60A5FA 55%,#FDE68A 95%); -webkit-background-clip:text;background-clip:text;} } .st-sub{position:relative;font-size:13.5px;color:var(--text2);} .st-sub b{color:#E24B4A;} .st-countdown{position:relative;display:flex;justify-content:center;gap:8px;margin:18px 0 14px;flex-wrap:wrap;} .st-cd-cell{min-width:64px;padding:10px 8px;border-radius:14px;background:var(--inp-bg); border:0.5px solid var(--card-border);box-shadow:inset 0 1px 0 var(--card-hi);} .st-cd-num{font-size:24px;font-weight:800;color:#378ADD;font-variant-numeric:tabular-nums;line-height:1;} .st-cd-lab{font-size:10px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;margin-top:5px;} .st-cd-live{font-size:15px;font-weight:700;color:#E24B4A;padding:10px 6px;} /* Cụm chơi tương tác: nhãn "Bấm hoặc kéo thử xem" + 2 ĐƯỜNG CHỈ DẪN cong đứt nét chạy (marching-ants) trỏ xuống 2 vầng mặt trời/mặt trăng cỡ lớn (chính là .st-play-btn) */ .st-play{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;} .st-play-lab{font-size:13px;font-weight:800;color:var(--text2);letter-spacing:.02em; animation:st-nudge 1.4s ease-in-out infinite;} @keyframes st-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}} .st-play-arrows{width:220px;height:44px;margin:2px 0 4px;} .st-arrow{fill:none;stroke:#378ADD;stroke-width:2;stroke-linecap:round; stroke-dasharray:5 5;animation:st-dash 1.1s linear infinite;} @keyframes st-dash{to{stroke-dashoffset:-20}} .st-play-btns{display:flex;gap:56px;justify-content:center;padding:6px 0 2px;} /* 2 vầng mặt trời/mặt trăng: TO, tỏa sáng/tối, kéo được (transform:translate đặt bởi js/summer-trip.js _skyPointerMove — position:relative+z-index để LUÔN rõ nét, không bị chính vầng sáng .st-sky-light của nó hoà màu lên). Bấm (không kéo, dưới ngưỡng SKY_TAP_PX) vẫn nhả icon mùa hè/trăng sao như 2 nút cũ. */ .st-play-btn{position:relative;z-index:3;width:84px;height:84px;border-radius:50%; border:none;padding:0;cursor:grab;touch-action:none;user-select:none;font-family:inherit; transform:translate(var(--sky-tx,0px),var(--sky-ty,0px)); transition:box-shadow .2s,transform .15s cubic-bezier(.3,1.4,.4,1),filter .2s;} /* Lõi bớt trắng lóa (#FDF3C7 → #FAE8B0, ấm/ngả vàng hơn thay vì gần trắng) + halo giảm thêm 1 bậc nữa (alpha/độ loang box-shadow) — KHÔNG còn dựa vào .st-sky-light để "tỏa sáng xung quanh" nữa (đã bỏ hẳn, xem phía trên), CHỈ còn khối mặt trời + tia riêng (::before) tự thể hiện "có nắng", nên phải tự dịu ở mức thấp hơn nữa. */ .st-sun-btn{background:radial-gradient(circle at 38% 38%,#FAE8B0,#FDE68A 42%,#F59E0B 78%,#D97706); box-shadow:0 0 18px 6px rgba(253,224,138,0.35),0 0 38px 14px rgba(253,224,138,0.15), 0 0 60px 22px rgba(251,191,36,0.06), inset -6px -6px 14px rgba(180,83,9,0.28),inset 4px 4px 10px rgba(255,255,255,0.42);} /* Tia sáng tỏa quanh mặt trời — conic-gradient + mask khoét rỗng đĩa tròn. Tia rõ hơn (alpha 0.22) + vươn xa hơn (-38px) nhưng vẫn dịu. */ .st-sun-btn::before{content:'';position:absolute;inset:-38px;border-radius:50%;pointer-events:none; background:repeating-conic-gradient(rgba(253,224,138,0) 0deg 7deg,rgba(253,224,138,0.22) 9deg,rgba(253,224,138,0) 12deg 30deg); -webkit-mask:radial-gradient(circle,transparent 42%,#000 52%,transparent 86%); mask:radial-gradient(circle,transparent 42%,#000 52%,transparent 86%); animation:st-corona-spin 70s linear infinite;} .st-moon-btn{background:radial-gradient(circle at 62% 38%,#F8FAFC,#E2E8F0 42%,#94A3B8 82%,#64748B); box-shadow:0 0 26px 10px rgba(226,232,240,0.5),0 0 58px 24px rgba(148,163,184,0.24), inset 10px -6px 0 3px rgba(100,116,139,0.32),inset -4px -4px 10px rgba(71,85,105,0.3), inset 3px 3px 8px rgba(255,255,255,0.7);} .st-play-btn.st-dragging{cursor:grabbing;transform:translate(var(--sky-tx,0px),var(--sky-ty,0px)) scale(1.08);} .st-sun-btn.st-dragging{box-shadow:0 0 24px 10px rgba(253,224,138,0.4),0 0 48px 18px rgba(253,224,138,0.18), 0 0 70px 28px rgba(251,191,36,0.08), inset -6px -6px 14px rgba(180,83,9,0.28),inset 4px 4px 10px rgba(255,255,255,0.42);} .st-moon-btn.st-dragging{box-shadow:0 0 38px 16px rgba(226,232,240,0.65),0 0 78px 34px rgba(148,163,184,0.32), inset 10px -6px 0 3px rgba(100,116,139,0.32),inset -4px -4px 10px rgba(71,85,105,0.3), inset 3px 3px 8px rgba(255,255,255,0.7);} /* Dark mode: dải màu sáng hơn để tự phát sáng trên nền tối */ @media(prefers-color-scheme:dark){ .st-sun-btn{background:radial-gradient(circle at 38% 38%,#FFF3D0,#FDE68A 40%,#FBBF24 72%,#F59E0B); box-shadow:0 0 20px 8px rgba(253,224,138,0.38),0 0 44px 18px rgba(253,224,138,0.16), 0 0 68px 26px rgba(251,191,36,0.07), inset -6px -6px 14px rgba(180,83,9,0.22),inset 4px 4px 10px rgba(255,255,255,0.5);} .st-sun-btn::before{background:repeating-conic-gradient(rgba(253,224,138,0) 0deg 7deg,rgba(253,224,138,0.26) 9deg,rgba(253,224,138,0) 12deg 30deg);} .st-sun-btn.st-dragging{box-shadow:0 0 28px 12px rgba(253,224,138,0.42),0 0 54px 24px rgba(253,224,138,0.18), 0 0 78px 32px rgba(251,191,36,0.08), inset -6px -6px 14px rgba(180,83,9,0.22),inset 4px 4px 10px rgba(255,255,255,0.5);} } /* Nhật thực: mặt trời tắt dần theo độ che (filter dim cả box-shadow nên vầng sáng cũng lịm theo); mặt trăng thành đĩa đen dần (::after phủ tối) + corona TIA quay chậm (::before repeating-conic, chỉ rõ khi che sâu — bậc 2) */ .st-hero.st-eclipse-solar .st-sun-btn{ filter:brightness(calc(1 - var(--ecl,0)*0.55)) saturate(calc(1 - var(--ecl,0)*0.3));} .st-moon-btn::after{content:'';position:absolute;inset:0;border-radius:50%; pointer-events:none;opacity:0;transition:opacity .1s linear;} .st-hero.st-eclipse-solar .st-moon-btn::after{opacity:var(--ecl,0); background:radial-gradient(circle at 58% 40%,#181F31,#05070F 72%);} .st-moon-btn::before{content:'';position:absolute;inset:-24px;border-radius:50%; pointer-events:none;opacity:0; background:repeating-conic-gradient(rgba(253,224,138,0) 0deg 10deg,rgba(253,224,138,0.55) 15deg,rgba(253,224,138,0) 20deg 30deg); -webkit-mask:radial-gradient(circle,transparent 38%,#000 46%,transparent 74%); mask:radial-gradient(circle,transparent 38%,#000 46%,transparent 74%);} .st-hero.st-eclipse-solar .st-moon-btn::before{opacity:calc(var(--ecl,0)*var(--ecl,0)); animation:st-corona-spin 16s linear infinite;} @keyframes st-corona-spin{to{transform:rotate(360deg)}} /* Toàn phần: quầng corona sáng ôm sát đĩa đen */ .st-hero.st-ecl-total.st-eclipse-solar .st-moon-btn{ box-shadow:0 0 0 7px rgba(253,224,138,0.85),0 0 44px 20px rgba(253,224,138,0.55), inset 10px -6px 0 3px rgba(100,116,139,0.32),inset -4px -4px 10px rgba(30,20,5,0.4);} /* Nguyệt thực: trăng ám đỏ máu DẦN (::after phủ đỏ mờ dần vào) + quầng đỏ lớn theo độ che */ .st-hero.st-eclipse-lunar .st-moon-btn::after{opacity:var(--ecl,0); background:radial-gradient(circle at 62% 38%,#FED7AA,#FB923C 45%,#7C2D12 85%);} .st-hero.st-eclipse-lunar .st-moon-btn{ box-shadow:0 0 calc(var(--ecl,0)*40px) calc(var(--ecl,0)*18px) rgba(234,88,12,0.55), inset 10px -6px 0 3px rgba(100,116,139,0.32),inset -4px -4px 10px rgba(71,85,105,0.3), inset 3px 3px 8px rgba(255,255,255,0.7);} /* Biển tối sầm (nhật thực)/ám đỏ (nguyệt thực) theo độ che — đè lên tint sunlit/moonlit */ .st-hero.st-eclipse-solar .st-waves{ filter:brightness(calc(1 - var(--ecl,0)*0.45)) saturate(calc(1 - var(--ecl,0)*0.3));} .st-hero.st-eclipse-lunar .st-waves{ filter:sepia(calc(var(--ecl,0)*0.45)) hue-rotate(calc(var(--ecl,0)*-30deg)) brightness(calc(1 - var(--ecl,0)*0.28));} @media (prefers-reduced-motion:reduce){ .st-moon-btn::before{animation:none;} .st-hero.st-ecl-total .st-ecl-veil::after{animation:none;} .st-st1,.st-st2{opacity:.8;} /* 12 chòm hoàng đạo: nét nối hiện sẵn (không vẽ dần) */ .st-hero.st-ecl-total .st-cst-l{animation:none;stroke-dashoffset:0;} } /* Tab bar võng xuống khi bị đống icon đè (js/summer-trip.js _fxApplySag đặt transform) */ #tabBar{transition:transform .45s cubic-bezier(.3,1.3,.4,1);} /* Sóng nhiều lớp chân thẻ hero + thuyền/đảo bồng bềnh. Kéo mặt trời/mặt trăng qua dải sóng: tint ấm/lạnh + vệt lấp lánh bám theo (._skySeaGlow đặt class + --glint-x/-o). THỦY TRIỀU (--tide-f 0→1 + --tide-rise px trên .st-hero, cùng hàm): biển dâng theo --tide-rise (bậc 2, tới +150px — triều cường ngập gần nửa hero cho "dữ dội"; height gốc 72px = SKY_WAVES_H bên js/summer-trip.js — đổi thì đổi CẢ HAI), bướu nước .st-tide-hump nhô ở --tide-x ngay dưới vầng đang kéo, thuyền NỔI theo mức nước còn đảo đứng yên cho nước ngập chân; triều cường (.st-tide-surge trên .st-hero) sóng chạy dồn dập + bướu nước phình to. */ .st-waves{position:absolute;left:0;right:0;bottom:0;height:calc(72px + var(--tide-rise,0px)); pointer-events:none;transition:filter .3s,height .5s cubic-bezier(.3,1.2,.4,1);} .st-waves::before,.st-waves::after{content:'';position:absolute;left:0;bottom:0;width:200%;height:100%; background-repeat:repeat-x;background-size:50% 100%;will-change:transform;} .st-waves::before{opacity:.45;animation:st-wave 13s linear infinite; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cpath d='M0,90 C200,140 350,40 600,80 C850,120 1000,30 1200,80 L1200,150 L0,150 Z' fill='%237DD3FC'/%3E%3C/svg%3E");} .st-waves::after{opacity:.75;animation:st-wave 8s linear infinite reverse; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cpath d='M0,105 C250,60 420,135 650,95 C880,55 1050,125 1200,95 L1200,150 L0,150 Z' fill='%2338BDF8'/%3E%3C/svg%3E");} @keyframes st-wave{from{transform:translateX(0)}to{transform:translateX(-50%)}} .st-waves.st-sea-sunlit{filter:sepia(.32) saturate(1.55) brightness(1.14) hue-rotate(-6deg);} .st-waves.st-sea-moonlit{filter:grayscale(.32) brightness(.72) saturate(1.05) hue-rotate(10deg) contrast(1.05);} .st-sea-glint{position:absolute;top:4px;bottom:0;width:130px;left:var(--glint-x,50%);margin-left:-65px; opacity:var(--glint-o,0);background:radial-gradient(ellipse at center,rgba(255,255,255,0.9),transparent 70%); mix-blend-mode:overlay;filter:blur(3px);} /* Bướu nước thủy triều: nhô lên khỏi mép nước ngay dưới vầng đang kéo. Opacity dùng --hump-o (KHÔNG dùng --tide-f): JS tắt dần khi vầng đã CHÌM dưới mặt nước — không tắt thì bướu bám mép nước thành vệt bóng lơ lửng ngay trên vầng trăng chìm (bug cũ) */ .st-tide-hump{position:absolute;left:var(--tide-x,50%);bottom:calc(100% - 8px);width:170px;height:32px; margin-left:-85px;pointer-events:none;opacity:var(--hump-o,0);filter:blur(1px); transition:opacity .3s,left .25s,width .4s,height .4s,margin-left .4s; background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(56,189,248,0.8),rgba(125,211,252,0.35) 55%,transparent 78%);} /* Triều cường = BÃO: sóng chạy dồn dập như biển động + bướu nước phình to */ .st-hero.st-tide-surge .st-waves::before{animation-duration:2.4s;} .st-hero.st-tide-surge .st-waves::after{animation-duration:1.5s;} .st-hero.st-tide-surge .st-tide-hump{width:240px;height:48px;margin-left:-120px;} /* 3 thuyền TỰ chạy qua lại (vỏ ngoài .st-boat animate `left` + nổi theo mực nước, KHÔNG transform — để ruột .st-boat-i còn bồng bềnh/lật riêng bằng transform) */ .st-boat,.st-island{position:absolute;bottom:26px;font-size:26px;z-index:1;} .st-island{right:12%;font-size:23px;animation:st-rock 8s ease-in-out 1s infinite;} .st-boat{bottom:calc(26px + var(--tide-rise,0px));transition:bottom .5s cubic-bezier(.3,1.2,.4,1); will-change:left;} .st-boat-i{display:inline-block;font-style:normal;animation:st-rock 5s ease-in-out infinite; transition:transform .8s cubic-bezier(.5,1.5,.4,1);} .st-boat1{animation:st-sail-r 30s linear infinite;} .st-boat2{font-size:20px;animation:st-sail-l 22s linear -9s infinite;} .st-boat2 .st-boat-i{animation-duration:4s;} .st-boat3{font-size:22px;animation:st-sail-r 46s linear -28s infinite;} @keyframes st-sail-r{from{left:-8%}to{left:104%}} @keyframes st-sail-l{from{left:104%}to{left:-8%}} /* Bão triều cường: thuyền LẬT úp (dừng trôi, chìm nhẹ); hết bão tự nổi dậy chạy tiếp */ .st-hero.st-tide-surge .st-boat{animation-play-state:paused;} .st-hero.st-tide-surge .st-boat-i{animation:none;transform:translateY(7px) rotate(168deg);} @keyframes st-rock{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-5px)}} /* Bão khi triều cường: mây đen + mưa xiên + lốc 🌪️ đảo qua lại trên mặt biển (z-index 2: trên veil/sao (1), dưới 2 vầng kéo được (3/4)) */ .st-storm{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .6s;} .st-hero.st-tide-surge .st-storm{opacity:1;} .st-storm::before{content:'';position:absolute;inset:0; background-image:linear-gradient(rgba(51,65,85,0.42),rgba(51,65,85,0.12) 45%,transparent 70%), linear-gradient(105deg,transparent 46%,rgba(191,219,254,0.55) 49%,transparent 52%); background-size:100% 100%,23px 90px; animation:st-rain .45s linear infinite;} /* dịch đúng 1 ô tile (23px ngang · 90px dọc) mỗi vòng để mưa lặp không khớp nối */ @keyframes st-rain{from{background-position:0 0,0 0}to{background-position:0 0,-23px 90px}} .st-torn{position:absolute;left:12%;bottom:calc(52px + var(--tide-rise,0px));font-size:36px; animation:st-torn-move 6.5s ease-in-out infinite alternate;transition:bottom .5s;} .st-torn i{display:inline-block;font-style:normal;animation:st-torn-wob .55s ease-in-out infinite;} @keyframes st-torn-move{from{left:6%}to{left:76%}} @keyframes st-torn-wob{0%,100%{transform:rotate(-12deg) scaleY(1)}50%{transform:rotate(12deg) scaleY(1.18)}} /* Thẻ thông tin nhanh: cùng chất frosted card như .sc */ .st-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:4px;} .st-info{display:flex;gap:11px;align-items:flex-start;background:var(--card-bg); border:0.5px solid var(--card-border);border-radius:14px;padding:13px 14px; box-shadow:inset 0 1px 0 var(--card-hi),0 1px 5px rgba(0,0,0,0.05); transition:transform .2s cubic-bezier(.3,1.4,.4,1);} .st-info:hover{transform:translateY(-3px);} .st-info-ic{font-size:21px;line-height:1;margin-top:2px;} .st-info-k{font-size:10.5px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;} .st-info-v{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.35;} /* Tab Ngày 1/Ngày 2: viên thuốc segmented như .horizon-seg */ .st-daytabs{display:inline-flex;gap:4px;background:var(--inp-bg);border:0.5px solid var(--card-border); border-radius:999px;padding:4px;margin-bottom:12px;max-width:100%;} .st-daytab{border:none;background:transparent;cursor:pointer;padding:7px 15px;border-radius:999px; font-size:12.5px;font-weight:600;color:var(--text2);font-family:inherit;white-space:nowrap;transition:all .2s;} .st-daytab.active{background:#378ADD;color:#fff;box-shadow:0 2px 8px rgba(55,138,221,0.35);} .st-day-date{font-size:12px;font-weight:700;color:#F59E0B;margin-bottom:10px;} /* Timeline dọc */ .st-tl{position:relative;padding-left:22px;margin-bottom:4px;} .st-tl::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2.5px;border-radius:3px; background:linear-gradient(180deg,#378ADD,#F59E0B);} .st-tl-item{position:relative;display:flex;gap:11px;align-items:flex-start;background:var(--card-bg); border:0.5px solid var(--card-border);border-radius:12px;padding:11px 13px;margin-bottom:9px; box-shadow:inset 0 1px 0 var(--card-hi),0 1px 5px rgba(0,0,0,0.05); animation:st-fadeup .45s ease backwards;} @keyframes st-fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} .st-tl-item::before{content:'';position:absolute;left:-20.5px;top:16px;width:10px;height:10px;border-radius:50%; background:var(--bg);border:3px solid #378ADD;box-shadow:0 0 0 3px rgba(55,138,221,0.18);} .st-tl-time{flex-shrink:0;font-size:11.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums; background:#378ADD;padding:3px 9px;border-radius:999px;margin-top:1px;white-space:nowrap;} .st-tl-time.free{background:#F59E0B;} .st-tl-em{font-size:17px;flex-shrink:0;margin-top:1px;} .st-tl-t{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.35;} .st-tl-d{font-size:12.5px;color:var(--text2);margin-top:2px;line-height:1.5;} /* Chấm màu Dress Code (item.colors, tripDayHtml) — viền LUÔN có (kể cả swatch trắng mới nổi bật trên nền thẻ, dark mode thì viền nhạt hơn qua --card-border) + bóng nhẹ tạo khối cho tròn không bẹt; title (tooltip) giữ tên màu cho ai cần đọc chữ. */ .st-dresscode{display:flex;gap:7px;margin-top:7px;} .st-dc-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;cursor:default; border:1.5px solid var(--card-border);box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),0 1px 2px rgba(0,0,0,0.12);} /* Lời chúc cuối: thẻ gradient biển đậm — giữ chữ trắng cả 2 chế độ */ .st-outro{position:relative;overflow:hidden;text-align:center;margin:16px 0 8px;padding:28px 18px; border-radius:18px;color:#fff;background:linear-gradient(135deg,#155E75,#0E7490 55%,#378ADD); box-shadow:inset 0 1px 0 rgba(255,255,255,0.35),0 10px 28px rgba(14,116,144,0.35);} .st-outro::before{content:'';position:absolute;inset:0; background:radial-gradient(circle at 82% 12%,rgba(253,230,138,0.32),transparent 42%), radial-gradient(circle at 12% 88%,rgba(255,255,255,0.12),transparent 46%);} .st-outro p{position:relative;font-size:13.5px;line-height:1.7;max-width:520px;margin:0 auto 12px;} .st-seeyou{position:relative;font-size:clamp(19px,4.2vw,26px);font-weight:800;letter-spacing:.02em;} .st-outro-btn{position:relative;margin-top:16px;background:#fff!important;color:#155E75;border-color:transparent;font-weight:700;} /* Chữ số đếm ngược nảy nhẹ khi đổi giá trị */ .st-cd-num.st-pop{animation:st-pop .35s cubic-bezier(.3,1.6,.4,1);} @keyframes st-pop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}} /* Thanh hành trình: xe 🚌 chạy từ ngày thông báo tới giờ khởi hành */ .st-journey{position:relative;max-width:420px;margin:0 auto 16px;} .st-road{position:relative;height:8px;border-radius:999px;background:var(--inp-bg); border:0.5px solid var(--card-border);} .st-road-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;width:0; background:linear-gradient(90deg,#378ADD,#F59E0B);transition:width 1s ease;} .st-road-bus{position:absolute;top:50%;left:0;transform:translate(-50%,-58%) scaleX(-1); font-size:19px;transition:left 1s ease;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.25));} .st-road-end{position:absolute;right:-6px;top:50%;transform:translateY(-58%);font-size:15px;} .st-journey-lab{font-size:11px;color:var(--text2);font-weight:600;margin-top:8px;text-align:center;} /* Emoji mùa hè lơ lửng trong hero */ .st-float{position:absolute;font-size:17px;opacity:.5;pointer-events:none; animation:st-drift 9s ease-in-out infinite;} @keyframes st-drift{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(8deg)}} /* Phản hồi khi chạm thẻ (gel-like như .ab) */ .st-info:active,.st-tl-item:active{transform:scale(.975);} /* Mốc lịch trình theo giờ THẬT: đang diễn ra (viền xanh lá + nhãn nhấp nháy nhẹ), sắp tới (viền cam thở dần), đã qua (mờ bớt) — js/summer-trip.js updateTripTimelineStatus */ .st-tl-item{transition:border-color .3s,box-shadow .3s,opacity .3s;} .st-tl-now-badge{display:none;position:absolute;top:-9px;right:10px;font-size:10px;font-weight:700; color:#fff;background:#16A34A;border-radius:999px;padding:2px 8px;letter-spacing:.02em; box-shadow:0 2px 6px rgba(22,163,74,0.4);} .st-tl-item.st-tl-now{border-color:#16A34A;box-shadow:inset 0 1px 0 var(--card-hi),0 0 0 3px rgba(22,163,74,0.18);} .st-tl-item.st-tl-now::before{border-color:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,0.25);animation:st-tl-pulse 1.6s ease-in-out infinite;} .st-tl-item.st-tl-now .st-tl-now-badge{display:inline-block;} @keyframes st-tl-pulse{0%,100%{box-shadow:0 0 0 3px rgba(22,163,74,0.25)}50%{box-shadow:0 0 0 7px rgba(22,163,74,0.08)}} .st-tl-item.st-tl-soon{border-color:#F59E0B;animation:st-tl-soon-glow 2s ease-in-out infinite;} @keyframes st-tl-soon-glow{0%,100%{box-shadow:inset 0 1px 0 var(--card-hi),0 1px 5px rgba(0,0,0,0.05)}50%{box-shadow:inset 0 1px 0 var(--card-hi),0 0 0 4px rgba(245,158,11,0.22)}} .st-tl-item.st-tl-past{opacity:.55;} /* Bình luận kiểu Facebook feed */ .st-wall-empty{font-size:12.5px;color:var(--text2);padding:2px 0 4px;} /* Post card */ .st-post{background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;margin-bottom:10px;overflow:hidden;} /* Bo góc lớn hơn trên mobile giống MỌI card khác (.sm-card) — đặt RIÊNG ở đây (không gộp vào khối @media(max-width:600px) chung phía trên) vì .st-post nằm SAU khối đó trong file; base rule không-media ở trên (14px) nằm SAU nên sẽ đè khối chung nếu gộp chung selector (đúng cái bẫy .ib-post cũ từng dính). */ @media(max-width:600px){ .st-post{border-radius:18px;} } .st-post-head{display:flex;align-items:center;gap:10px;padding:12px 12px 0;} .st-cmt-av{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center; justify-content:center;font-size:14px;font-weight:700;color:#fff;} .st-post-author{font-size:13px;font-weight:600;color:var(--text);} .st-post-time{font-size:11px;color:var(--text2);margin-top:1px;} .st-post-body{font-size:14px;color:var(--text);white-space:pre-wrap;word-break:break-word;line-height:1.5;padding:6px 12px 0;} .st-post-img{display:block;width:100%;max-height:400px;object-fit:cover;margin-top:8px;cursor:zoom-in;} .st-post-react-summary{font-size:12px;color:var(--text2);padding:8px 12px 0;display:flex;align-items:center;gap:4px;} .st-post-divider{height:1px;background:var(--border);margin:8px 12px 0;} .st-post-actions{display:flex;padding:2px 4px;} .st-post-act{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0; border:none;background:none;font-size:13px;font-weight:600;color:var(--text2);cursor:pointer; border-radius:6px;transition:background .15s;} .st-post-act:hover{background:var(--bg2);} .st-post-act:active{transform:scale(.96);} .st-post-act.active{color:#378ADD;} .st-post-act i{color:inherit;} .st-post-replies{padding:4px 12px 12px;background:var(--bg2);} .st-cmt-del{cursor:pointer;color:#A32D2D;font-weight:700;padding:0 4px;} .st-cmt-text{font-size:13px;color:var(--text);white-space:pre-wrap;word-break:break-word;line-height:1.5;margin-top:1px;} .st-cmt-img{display:block;max-width:100%;max-height:180px;border-radius:8px;margin-top:6px;cursor:zoom-in;border:1px solid var(--border);object-fit:contain;background:var(--bg);} /* Facebook-style reply bubble */ .st-fb-reply{display:flex;gap:8px;align-items:flex-start;padding:6px 0;} .st-fb-reply-body{flex:1;min-width:0;} .st-fb-reply-bubble{background:var(--inp-bg);border-radius:16px;padding:6px 12px;display:inline-block;max-width:100%;} .st-fb-reply-actions{display:flex;gap:10px;padding:2px 8px;align-items:center;} .st-fb-reply-act{font-size:11px;font-weight:600;color:var(--text2);cursor:pointer;} .st-fb-reply-act.active{color:#378ADD;} .st-fb-reply-time{font-size:10px;color:var(--text3);} .st-fb-reply-input{display:flex;gap:6px;margin-top:6px;} .st-reply-av{width:26px;height:26px;font-size:11px;} /* Toggle ẩn danh */ .st-anon-track{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--border2);border-radius:9px;transition:background .2s;cursor:pointer;} .st-anon-track::after{content:'';position:absolute;width:14px;height:14px;left:2px;top:2px;background:#fff;border-radius:50%;transition:transform .2s;} input:checked+.st-anon-track{background:#378ADD;} input:checked+.st-anon-track::after{transform:translateX(16px);} /* Reaction picker + list (dùng chung cho post + reply) */ .st-react-picker{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap; animation:st-fadeup .2s ease backwards;} .st-react-btn{border:0.5px solid var(--card-border);background:var(--inp-bg);border-radius:999px; font-size:16px;padding:4px 9px;cursor:pointer;font-family:inherit;line-height:1; transition:transform .18s cubic-bezier(.3,1.4,.4,1),background .15s,border-color .15s;} .st-react-btn:active{transform:scale(.85);} .st-react-btn.active{background:rgba(55,138,221,0.18);border-color:#378ADD;transform:scale(1.15);} .st-react-list{font-size:11.5px;color:var(--text2);margin-top:4px;line-height:1.6;padding-left:8px;} @media (prefers-reduced-motion:reduce){ .st-waves::before,.st-waves::after,.st-boat,.st-island,.st-float,.st-play-lab{animation:none;} .st-tl-item,.st-cd-num.st-pop,.st-boat-i{animation:none;} .st-storm::before,.st-torn,.st-torn i{animation:none;} .st-tl-item.st-tl-now::before,.st-tl-item.st-tl-soon{animation:none;} .st-info,.st-react-btn{transition:none;} .st-road-fill,.st-road-bus{transition:none;} .st-arrow{animation:none;} } /* ---- PERF: hero cuộn khuất → pause TẤT CẢ animation con (IntersectionObserver gắn class .st-hero-offscreen từ js/summer-trip.js _setupHeroObserver) ---- */ .st-hero-offscreen .st-waves::before,.st-hero-offscreen .st-waves::after, .st-hero-offscreen .st-boat,.st-hero-offscreen .st-boat-i, .st-hero-offscreen .st-island,.st-hero-offscreen .st-float, .st-hero-offscreen .st-play-lab,.st-hero-offscreen .st-arrow, .st-hero-offscreen .st-sun-btn::before,.st-hero-offscreen .st-moon-btn::before, .st-hero-offscreen .st-ecl-stars i,.st-hero-offscreen .st-cst-s, .st-hero-offscreen .st-cst-l,.st-hero-offscreen .st-storm::before, .st-hero-offscreen .st-torn,.st-hero-offscreen .st-torn i{ animation-play-state:paused!important; } /* ============ PLAY TOGETHER — sân trước tòa nhà SGAS (js/plaza.js) ============ Cảnh 3D do Three.js vẽ vào (js/plaza-3d.js) — CSS ở đây CHỈ lo phần phủ lên trên: nút điều khiển, nhãn tên nhân vật, khung "màn hình" hiện bảng thật của khu vực, màn tạo nhân vật. Màn hình DỌC như mọi tab khác (cố ý không xoay ngang). z-index 960: TRÊN dải mờ mép dưới (body::after, 900) nhưng DƯỚI toast (1001) và popup quản lý (2000) — nhờ vậy gian hàng "Quản lý xe/kho/khách/ĐVVC" mở popup đè lên sân được. */ .pz-wrap{position:fixed;inset:0;z-index:960;overflow:hidden;touch-action:none; user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent; background:linear-gradient(180deg,#4aa3e8,#cfe6f7);} .pz-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;} .pz-tags{position:absolute;inset:0;pointer-events:none;} /* ---- Nhãn tên trên đầu nhân vật (js/plaza-3d.js chiếu toạ độ 3D ra màn hình) ---- */ .pz-tag{position:absolute;transform:translate(-50%,-100%);white-space:nowrap; display:flex;flex-direction:column;align-items:center;gap:2px; font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.55); will-change:transform,left,top;} .pz-tag-name{display:inline-flex;align-items:center;gap:5px;padding:2px 10px 2px 3px; border-radius:13px;background:rgba(18,26,42,.62);border:1.5px solid rgba(255,255,255,.35);} .pz-tag-av{width:19px;height:19px;border-radius:50%;object-fit:cover; border:1.5px solid rgba(255,255,255,.75);background:#4a5568;} .pz-tag-me .pz-tag-name{background:rgba(47,111,208,.92);} .pz-tag-talk .pz-tag-name{background:#22a06b;border-color:#8ff0c6; animation:pztalk 1s ease-in-out infinite;} @keyframes pztalk{0%,100%{box-shadow:0 0 0 0 rgba(34,160,107,.6)}50%{box-shadow:0 0 0 7px rgba(34,160,107,0)}} .pz-tag-act{font-size:22px;opacity:0;transform:scale(.5);transition:.2s; text-shadow:0 2px 6px rgba(0,0,0,.4);} .pz-tag-act-on{opacity:1;transform:scale(1);} /* ---- Đang tải / lỗi ---- */ .pz-load{position:absolute;inset:0;z-index:9;display:flex;align-items:center; justify-content:center;background:linear-gradient(180deg,#2b3f63,#16233a);color:#fff;} .pz-load-in{display:flex;flex-direction:column;align-items:center;gap:12px; font-size:13.5px;font-weight:600;text-align:center;padding:20px;max-width:300px;} .pz-load-dot{width:34px;height:34px;border-radius:50%;border:4px solid rgba(255,255,255,.25); border-top-color:#6fb2ff;animation:pzspin .9s linear infinite;} @keyframes pzspin{to{transform:rotate(360deg)}} .pz-load-err{color:#ffd166;} /* ---- HUD Glass Design System (Đồng bộ 3 nút: Sự kiện, Nhạc, Online) ---- */ .pz-hud-top{position:absolute;left:0;right:0;top:0;z-index:18;display:flex; align-items:center;justify-content:space-between;gap:8px;pointer-events:none; transform:translateZ(0);will-change:transform; padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 10px calc(10px + env(safe-area-inset-left));} .pz-hud-right{display:flex;align-items:center;gap:7px;pointer-events:auto;} .pz-hud-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer; padding:7px 15px;border-radius:22px;font-size:12.5px;font-weight:700;color:#fff; background:rgba(12,18,34,.90);border:1.5px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 0.5px rgba(255,255,255,.6), 0 8px 24px rgba(0,0,0,.45); pointer-events:auto;transition:transform .12s, background .15s;} .pz-hud-btn:active{transform:scale(0.94);background:rgba(20,30,55,.95);} .pz-hud-count{display:inline-flex;align-items:center;gap:6px;cursor:default; padding:7px 15px;border-radius:22px;font-size:12.5px;font-weight:700;color:#fff; background:rgba(12,18,34,.90);border:1.5px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 0.5px rgba(255,255,255,.6), 0 8px 24px rgba(0,0,0,.45);} /* ---- Dynamic Island Music HUD ---- */ .pz-music-hud{position:relative;z-index:22;width:auto; max-width:min(280px, calc(100vw - 210px)); display:none;flex-direction:column;pointer-events:auto;} .pz-mh-on{display:flex;animation:pzmh .3s cubic-bezier(0.34, 1.56, 0.64, 1);} @keyframes pzmh{from{opacity:0;transform:translateY(-10px) scale(.92)}} .pz-mh-island{display:flex;flex-direction:column;border-radius:22px;overflow:hidden; background:rgba(12,18,34,.92);border:1.5px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 0.5px rgba(255,255,255,.6), 0 12px 28px rgba(0,0,0,.55); color:#fff;transition:all .25s ease;} .pz-mh-pill{display:flex;align-items:center;justify-content:space-between;gap:6px; padding:5px 10px;cursor:pointer;user-select:none;} .pz-mh-icon{font-size:13px;animation:pzpulse 2s infinite;} @keyframes pzpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}} .pz-mh-now-txt{flex:1;font-size:11.5px;font-weight:700;color:#fff;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px;max-width:160px;} .pz-mh-quick-ctrls{display:flex;align-items:center;gap:3px;} .pz-mh-qbtn{display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px;border-radius:50%;font-size:10px;color:#fff; background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 0.5px rgba(255,255,255,.7); cursor:pointer;touch-action:manipulation;transition:transform .1s,background .15s;} .pz-mh-qbtn:active{transform:scale(0.88);background:rgba(255,255,255,.35);} .pz-mh-body{display:none;padding:10px 12px;max-height:260px;overflow-y:auto; border-top:1px solid rgba(255,255,255,.12);-webkit-overflow-scrolling:touch;} .pz-mh-expanded .pz-mh-body{display:block;} /* Joystick & Action Controls (Liquid Glass) */ .pz-joy{position:absolute;z-index:6;width:142px;height:142px;border-radius:50%; left:calc(14px + env(safe-area-inset-left));bottom:calc(22px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.24);border:1.5px solid rgba(255,255,255,.55); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);touch-action:none; box-shadow:inset 0 1px 0.5px rgba(255,255,255,.8), 0 8px 24px rgba(0,0,0,.22);} .pz-joy-ring{position:absolute;inset:0;pointer-events:none;} .pz-joy-ring i{position:absolute;left:50%;top:50%;width:0;height:0;font-size:0; transform:translate(-50%,-50%);filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));} .pz-joy-ring i::before{content:'';position:absolute;left:-9px;top:-8px; border-left:9px solid transparent;border-right:9px solid transparent; border-bottom:14px solid rgba(255,255,255,.95);} .pz-joy-ring i:nth-child(1){top:-13px;} .pz-joy-ring i:nth-child(2){top:auto;bottom:-13px;transform:translate(-50%,50%) rotate(180deg);} .pz-joy-ring i:nth-child(3){left:-13px;transform:translate(-50%,-50%) rotate(-90deg);} .pz-joy-ring i:nth-child(4){left:auto;right:-13px;transform:translate(50%,-50%) rotate(90deg);} .pz-joy-knob{position:absolute;left:50%;top:50%;width:66px;height:66px; margin:-33px 0 0 -33px;border-radius:50%; background:radial-gradient(circle at 50% 34%,#ffffff,#e6eef7); box-shadow:0 4px 12px rgba(0,0,0,.28);transition:transform .07s linear;} .pz-btns{position:absolute;z-index:6;display:flex;align-items:flex-end;gap:14px; right:calc(16px + env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));} .pz-rbtn{position:relative;border-radius:50%;border:1.5px solid rgba(255,255,255,.6); color:#fff;cursor:pointer;touch-action:none;display:flex;align-items:center; justify-content:center;background:rgba(255,255,255,.26); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px 0.5px rgba(255,255,255,.8), 0 8px 22px rgba(0,0,0,.24);} .pz-rbtn:active{transform:scale(.92);} .pz-jump-btn{width:96px;height:96px;font-size:0;} .pz-jump-btn::before{content:'';position:absolute;top:24px;left:50%;margin-left:-21px; border-left:21px solid transparent;border-right:21px solid transparent; border-bottom:25px solid rgba(255,255,255,.95);filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));} .pz-jump-btn::after{content:'';position:absolute;top:48px;left:50%;margin-left:-10px; width:20px;height:22px;border-radius:0 0 4px 4px;background:rgba(255,255,255,.95);} .pz-mic-btn{width:64px;height:64px;font-size:26px;margin-bottom:14px;} .pz-mic-on{background:rgba(34,197,131,.85);border-color:#bff5dd;} .pz-mic-wait{opacity:.6;} .pz-mic-talk{box-shadow:0 0 0 7px rgba(34,197,131,.3),0 4px 14px rgba(0,0,0,.2);} .pz-prompt{position:absolute;z-index:7;left:50%;transform:translateX(-50%); bottom:calc(132px + env(safe-area-inset-bottom));display:none;align-items:center; padding:9px 18px;border-radius:24px;color:#123a63;font-size:13.5px;font-weight:800; white-space:nowrap;pointer-events:none;background:rgba(255,209,102,.92); border:1.5px solid rgba(255,255,255,.8); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); box-shadow:inset 0 1px 0.5px rgba(255,255,255,.9), 0 8px 24px rgba(0,0,0,.28);} .pz-prompt-on{display:flex;animation:pzpr .25s ease-out;} @keyframes pzpr{from{opacity:0;transform:translateX(-50%) translateY(8px)}} .pz-ml-empty{font-size:12.5px;color:rgba(255,255,255,.6);text-align:center;padding:12px 0;} .pz-ml-now{background:rgba(77,215,232,.12);border:1px solid rgba(77,215,232,.35); border-radius:14px;padding:10px 12px;margin-bottom:10px;} .pz-ml-now-label{font-size:10.5px;font-weight:700;color:#4dd7e8;text-transform:uppercase;letter-spacing:.5px;} .pz-ml-now-name{font-size:13px;font-weight:800;color:#fff;margin:4px 0 6px 0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pz-ml-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden;} .pz-ml-bar-fill{height:100%;background:#4dd7e8;border-radius:3px;transition:width .3s linear;} .pz-ml-time{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.7);text-align:right;margin-top:4px;} .pz-ml-tracks{display:flex;flex-direction:column;gap:5px;} .pz-ml-track{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08); cursor:pointer;transition:background .15s,transform .1s;} .pz-ml-track:active{transform:scale(.98);background:rgba(255,255,255,.12);} .pz-ml-active{background:rgba(77,215,232,.18);border-color:rgba(77,215,232,.4);color:#4dd7e8;} .pz-ml-bad{opacity:.4;pointer-events:none;} .pz-ml-icon{font-size:14px;} .pz-ml-name{flex:1;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pz-ml-dur{font-size:11px;color:rgba(255,255,255,.5);font-weight:500;} /* ---- "Màn hình" hiện bảng thật của khu vực đang đứng (_pzOpenScreen — js/plaza.js). Nội dung là NODE THẬT của tab/panel được mượn tạm nên giữ nguyên kiểu dáng bên trong; ở đây chỉ dựng khung + cho cuộn. ---- */ .pz-screen{position:absolute;z-index:7;left:8px;right:8px;touch-action:auto; top:calc(56px + env(safe-area-inset-top));height:min(52vh,470px);display:none; flex-direction:column;border-radius:20px;overflow:hidden; background:var(--bg,#fff);border:3px solid #fff; box-shadow:0 18px 40px rgba(0,0,0,.45);} .pz-screen-on{display:flex;animation:pzscr .22s ease-out;} @keyframes pzscr{from{opacity:0;transform:translateY(-10px) scale(.98)}} .pz-screen-bar{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:9px 15px;font-size:13.5px;font-weight:800;color:#fff; background:linear-gradient(180deg,#3d84e8,#1d4f8f);} .pz-screen-hint{font-size:10.5px;font-weight:500;opacity:.85;} .pz-screen-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y; padding:10px 12px;background:var(--bg,#fff);} /* bản đồ sao vẽ trong khung màn hình trên (dùng lại chòm sao của Summer Trip) */ .pz-sky-in{position:relative;height:100%;min-height:300px;border-radius:14px; background:radial-gradient(ellipse at 50% 35%,#16224a 0%,#0a0f24 60%,#05070f 100%);} .pz-sky-in .st-constel{opacity:1;pointer-events:auto;cursor:pointer;} .pz-sky-in .st-cst-l{animation-name:st-cst-draw;animation-timing-function:ease-out; animation-fill-mode:forwards;} .pz-sky-in .st-cst-s{animation-name:st-cst-star;animation-timing-function:ease-out; animation-fill-mode:forwards;} .pz-zod-info{position:absolute;left:50%;bottom:10px;transform:translateX(-50%) translateY(8px); width:min(92%,380px);opacity:0;pointer-events:none;transition:.2s;z-index:4; padding:12px 14px;border-radius:16px;color:#fff;text-align:center; background:rgba(16,24,48,.95);border:1px solid rgba(255,255,255,.18);} .pz-zod-on{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);} .pz-zod-name{font-size:16px;font-weight:800;} .pz-zod-meta{font-size:11.5px;color:rgba(255,255,255,.7);margin-top:3px;} .pz-zod-desc{font-size:12px;line-height:1.55;margin-top:7px;color:rgba(255,255,255,.9);} .pz-zod-us{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px;} .pz-zod-u{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;} /* ---- MÀN TẠO NHÂN VẬT (dựng theo giao diện Customize của Play Together) ---- Nửa trên: sân khấu 3D nền sáng, nhân vật đứng trên bục, kéo để xoay. Nửa dưới: tờ phiếu TRẮNG bo góc trên — dải danh mục icon, LƯỚI ẢNH từng món, hàng màu, nút hành động. Tông sáng + bo tròn to + bóng mềm đúng kiểu game xã hội, khác hẳn tông xanh đen của app (cố ý, đây là "màn game"). */ .pz-cc{display:flex;flex-direction:column; background:linear-gradient(180deg,#bfe3ff 0%,#dff0fb 42%,#f4f7fb 42.1%,#f4f7fb 100%);} .pz-cc-stage{position:relative;flex:0 0 auto;height:min(42vh,340px); padding-top:env(safe-area-inset-top); background:radial-gradient(ellipse at 50% 96%,rgba(120,190,255,.55),rgba(191,227,255,0) 68%);} .pz-cc-stage canvas{display:block;width:100%;height:100%;} .pz-cc-stage.pz-pv-loading::after{content:'Đang tải nhân vật…';position:absolute;inset:0; display:flex;align-items:center;justify-content:center;color:#5b7d9e;font-size:12.5px;} .pz-cc-ico{position:absolute;top:calc(12px + env(safe-area-inset-top));width:40px;height:40px; border-radius:50%;border:none;cursor:pointer;background:#fff;color:#1d3a5c;font-size:19px; display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(23,58,99,.22);} .pz-cc-ico:active{transform:scale(.92);} .pz-cc-back{left:14px;} .pz-cc-dice{right:14px;} .pz-cc-sex{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex; padding:3px;border-radius:22px;background:rgba(255,255,255,.85); box-shadow:0 3px 10px rgba(23,58,99,.18);} .pz-seg{padding:7px 22px;border-radius:19px;border:none;cursor:pointer;font-size:13px; font-weight:800;color:#5b7d9e;background:transparent;} .pz-seg.pz-on{background:#2f6fd0;color:#fff;box-shadow:0 2px 6px rgba(47,111,208,.4);} /* tờ phiếu dưới */ .pz-cc-sheet{flex:1 1 auto;min-height:0;display:flex;flex-direction:column; border-radius:26px 26px 0 0;background:#fff;box-shadow:0 -6px 22px rgba(23,58,99,.16); padding:10px 0 calc(10px + env(safe-area-inset-bottom));} .pz-cc-cats{display:flex;gap:6px;overflow-x:auto;padding:0 12px 8px; -webkit-overflow-scrolling:touch;scrollbar-width:none;} .pz-cc-cats::-webkit-scrollbar{display:none;} .pz-cat{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px; min-width:60px;padding:7px 8px;border-radius:15px;cursor:pointer;border:2px solid transparent; background:#eef3f8;color:#46617f;font-size:10.5px;font-weight:700;} .pz-cat b{font-size:19px;font-weight:400;line-height:1.1;} .pz-cat.pz-on{background:#e3f0ff;border-color:#2f6fd0;color:#1d3a5c;} .pz-cc-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:2px 12px 8px; -webkit-overflow-scrolling:touch;} /* LƯỚI ẢNH từng món — ảnh render thật của chính nhân vật đang mặc */ .pz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;} .pz-item{position:relative;padding:0 0 5px;border-radius:16px;cursor:pointer; border:2.5px solid #e6ecf3;background:#f7fafd;overflow:hidden;} .pz-item:active{transform:scale(.96);} .pz-item-img{display:block;width:100%;aspect-ratio:1/1;background-size:cover; background-position:center;background-repeat:no-repeat; background-color:#eaf1f8;} .pz-item-lb{display:block;font-size:10.5px;font-weight:700;color:#46617f; padding:4px 4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pz-item.pz-on{border-color:#2f6fd0;background:#e8f2ff; box-shadow:0 0 0 3px rgba(47,111,208,.18);} .pz-item.pz-on::after{content:'✓';position:absolute;right:5px;top:5px;width:19px;height:19px; border-radius:50%;background:#2f6fd0;color:#fff;font-size:12px;font-weight:800; display:flex;align-items:center;justify-content:center;} /* hàng màu */ .pz-colors{display:flex;flex-wrap:wrap;gap:9px;padding:12px 2px 4px;} .pz-dot{width:38px;height:38px;border-radius:50%;cursor:pointer; border:3px solid #e6ecf3;box-shadow:inset 0 -3px 6px rgba(0,0,0,.18);} .pz-dot.pz-on{border-color:#2f6fd0;transform:scale(1.1); box-shadow:0 0 0 3px rgba(47,111,208,.25),inset 0 -3px 6px rgba(0,0,0,.18);} .pz-cc-go{flex:0 0 auto;margin:6px 12px 0;padding:13px;border-radius:18px;border:none; cursor:pointer;font-size:15px;font-weight:800;color:#fff; background:linear-gradient(180deg,#4a92e8,#2f6fd0); box-shadow:0 5px 14px rgba(47,111,208,.42);} .pz-cc-go:active{transform:scale(.98);} .pz-cc-go:disabled{opacity:.4;pointer-events:none;} /* ── GIAO DIỆN CHỌN NHÂN VẬT PRESET (thay thế customize) ── */ .pz-pick{display:flex;flex-direction:column; background:linear-gradient(180deg,#bfe3ff 0%,#dff0fb 30%,#f4f7fb 100%);} .pz-pick-header{position:relative;display:flex;align-items:center;gap:10px; padding:calc(12px + env(safe-area-inset-top)) 14px 8px;z-index:5;} .pz-pick-title{font-size:18px;font-weight:900;color:#1d3a5c; letter-spacing:-.3px;margin-left:48px;} .pz-pick-stage{position:relative;flex:0 0 auto;height:min(32vh,260px); background:radial-gradient(ellipse at 50% 96%,rgba(120,190,255,.55),transparent 68%);} .pz-pick-stage canvas{display:block;width:100%;height:100%;} .pz-pick-stage.pz-pv-loading::after{content:'Chọn nhân vật bên dưới';position:absolute;inset:0; display:flex;align-items:center;justify-content:center;color:#5b7d9e;font-size:13px;} .pz-pick-grid{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; display:grid;grid-template-columns:repeat(2,1fr);gap:10px; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -6px 22px rgba(23,58,99,.16);} .pz-pcard{display:flex;flex-direction:column;align-items:center; padding:8px 6px 10px;border-radius:18px;cursor:pointer; border:2.5px solid #e6ecf3;background:#f7fafd;transition:all .18s;} .pz-pcard:active{transform:scale(.96);} .pz-pcard.pz-on{border-color:#2f6fd0;background:#e8f2ff; box-shadow:0 0 0 3px rgba(47,111,208,.2),0 4px 16px rgba(47,111,208,.22);} .pz-pcard.pz-on::before{content:'✓';position:absolute;right:8px;top:8px;width:22px;height:22px; border-radius:50%;background:#2f6fd0;color:#fff;font-size:13px;font-weight:800; display:flex;align-items:center;justify-content:center;} .pz-pcard{position:relative;} /* for ::before positioning */ .pz-pcard-img{display:block;width:100%;aspect-ratio:3/4;border-radius:12px; background-size:cover;background-position:center top; background-repeat:no-repeat;background-color:#eaf1f8;} .pz-pcard-name{display:block;font-size:14px;font-weight:800;color:#1d3a5c; margin-top:6px;letter-spacing:-.2px;} .pz-pcard-desc{display:block;font-size:11px;font-weight:600;color:#6b8baa;margin-top:1px;} /* ── Playlist nhạc trong sân khấu ── */ .pz-music-list{padding:8px 0;} .pz-ml-empty{text-align:center;padding:32px 16px;color:rgba(255,255,255,.55);font-size:14px;} .pz-ml-now{background:rgba(59,130,246,.15);border:1px solid rgba(59,130,246,.3); border-radius:12px;padding:10px 14px;margin:0 0 10px;} .pz-ml-now-label{font-size:11px;text-transform:uppercase;letter-spacing:1px; color:rgba(100,200,255,.7);margin-bottom:2px;} .pz-ml-now-name{font-size:15px;font-weight:600;color:#fff;margin-bottom:6px;} .pz-ml-bar{height:4px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;} .pz-ml-bar-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa); border-radius:2px;transition:width .4s ease;} .pz-ml-time{font-size:11px;color:rgba(255,255,255,.45);margin-top:4px;text-align:right;} .pz-ml-tracks{display:flex;flex-direction:column;gap:4px;} .pz-ml-track{display:flex;align-items:center;gap:8px;padding:9px 12px; border-radius:10px;cursor:pointer;transition:background .15s; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);} .pz-ml-track:hover{background:rgba(255,255,255,.10);} .pz-ml-track:active{background:rgba(255,255,255,.15);transform:scale(0.98);} .pz-ml-active{background:rgba(59,130,246,.12)!important;border-color:rgba(59,130,246,.3)!important;} .pz-ml-bad{opacity:.4;pointer-events:none;} .pz-ml-icon{font-size:16px;flex-shrink:0;width:22px;text-align:center;} .pz-ml-name{flex:1;font-size:13px;font-weight:500;color:#fff;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;} .pz-ml-dur{font-size:11px;color:rgba(255,255,255,.4);flex-shrink:0;} .pz-ml-play{font-size:14px;flex-shrink:0;width:24px;text-align:center; color:rgba(255,255,255,.6);transition:color .15s;} .pz-ml-track:hover .pz-ml-play{color:#fff;} @media (prefers-reduced-motion:reduce){ .pz-load-dot,.pz-tag-talk .pz-tag-name{animation:none;} }