/* ============================================================
TRÀNG AN · ZALO MINI APP — CHROME (khung hệ thống Zalo) v2
------------------------------------------------------------
Tái dựng CHÍNH XÁC mọi vùng do Zalo kiểm soát đè lên Mini App:
· Status bar máy (giờ, chuông, sóng, LTE, pin)
· Action Bar / Native Header Zalo (tiêu đề + cụm ···|X)
· Home Indicator
· Chế độ Full-screen (tràn viền) — chỉ còn cụm ···|X nổi
· Popup xin quyền (consent) — 100% của Zalo, không tuỳ biến
Đây là KHUNG DÙNG LẠI — ốp lên bất kỳ app nào trong hệ.
App chỉ vẽ nội dung BÊN TRONG vùng an toàn; KHÔNG tự vẽ
status bar / cụm ···|X.
CÁCH ỐP VÀO 1 APP:
1.
2. nạp shared/zalo-chrome.jsx (sau React/Babel)
3. bọc nội dung trong .za-content (đã set sẵn padding safe-area)
4. render
------------------------------------------------------------
BRAND AXES (đổi để hợp từng app / từng màn):
--zalo-header-bg nền header (màu thương hiệu app)
--zalo-header-fg màu CHỮ tiêu đề/logo trên header
--zalo-statusbar-fg màu glyph status bar (tách riêng: header
sáng → glyph tối; header tối → glyph trắng)
data-scheme 'light' | 'dark' — chỉ đổi cụm ···|X
============================================================ */
.za-frame{
/* ---- safe-area insets (khớp tên biến chính thức của Zaui) ---- */
--zalo-status-h: 54px; /* status bar máy */
--zalo-action-h: 52px; /* action bar Zalo (header) */
--zalo-safe-top: calc(var(--zalo-status-h) + var(--zalo-action-h)); /* = 106px */
--zalo-safe-bottom: 34px; /* home indicator iPhone */
--zaui-safe-area-inset-top: var(--zalo-safe-top);
--zaui-safe-area-inset-bottom: var(--zalo-safe-bottom);
/* ---- brand axes (mặc định = Tràng An / jade tối) ---- */
--zalo-header-bg: var(--jade-700, #155E4C);
--zalo-header-fg: #FFFFFF;
--zalo-statusbar-fg: #FFFFFF;
/* ---- cụm hệ thống ···|X ---- */
--zalo-cluster-w: 90px;
--zalo-cluster-h: 34px;
--zalo-cluster-bg: rgba(20,22,26,.34); /* dark scheme mặc định */
--zalo-cluster-fg: #FFFFFF;
--zalo-cluster-divider: rgba(255,255,255,.42);
}
/* cụm ···|X chế độ light: pill sáng, icon tối — dùng trên header SÁNG */
.za-frame[data-scheme="light"],
.za-chrome[data-scheme="light"]{
--zalo-cluster-bg: rgba(255,255,255,.94);
--zalo-cluster-fg: #16181D;
--zalo-cluster-divider: rgba(0,0,0,.16);
}
/* ---------- phone shell (chỉ dùng trong file demo) ---------- */
.za-phone{
position:relative;width:390px;height:844px;
background:var(--ivory-50,#FBF9F4);
border-radius:54px;
box-shadow:0 0 0 12px #0a0a0c, 0 0 0 14px #2a2a2e, 0 40px 90px rgba(0,0,0,.55);
overflow:hidden;
}
.za-screen{position:absolute;inset:0;overflow:hidden;border-radius:54px;background:var(--ivory-50,#FBF9F4);}
/* Dynamic Island — vùng đen camera trước (thuộc THIẾT BỊ, nằm trên mọi lớp) */
.za-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:122px;height:35px;background:#0a0a0c;border-radius:999px;z-index:200;display:flex;align-items:center;justify-content:flex-end;padding-right:11px;pointer-events:none;}
.za-island::after{content:"";width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%, #2b3b46, #07090c 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
/* ---------- vùng nội dung app (cuộn) ---------- */
.za-content{
position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
padding-top:var(--zalo-safe-top);
padding-bottom:var(--zalo-safe-bottom);
}
.za-content::-webkit-scrollbar{width:0;height:0;}
/* full-screen: nội dung tràn viền, app tự chừa inset bằng biến nếu cần */
.za-frame[data-variant="fullscreen"] .za-content{padding-top:0;}
/* ============================================================
1 · STATUS BAR (của máy — luôn hiện)
============================================================ */
.za-statusbar{
position:absolute;top:0;left:0;right:0;height:var(--zalo-status-h);
display:flex;align-items:center;justify-content:space-between;
padding:8px 24px 0;z-index:112;pointer-events:none;
color:var(--zalo-statusbar-fg);
}
.za-sb-left{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:600;letter-spacing:.1px;font-variant-numeric:tabular-nums;}
.za-sb-right{display:flex;align-items:center;gap:6px;}
.za-sb-lte{font-size:13px;font-weight:700;letter-spacing:.2px;}
.za-battery{position:relative;width:25px;height:12.5px;border:1.4px solid currentColor;border-radius:3.5px;display:flex;align-items:center;justify-content:center;opacity:.95;}
.za-battery::after{content:"";position:absolute;right:-3.4px;top:50%;transform:translateY(-50%);width:1.8px;height:4.5px;border-radius:0 1.5px 1.5px 0;background:currentColor;}
.za-battery b{font-size:8.5px;font-weight:700;line-height:1;font-style:normal;letter-spacing:-.4px;}
/* full-screen: status bar có lớp gradient mờ để glyph đọc được trên ảnh */
.za-frame[data-variant="fullscreen"] .za-statusbar::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(to bottom, rgba(0,0,0,.28), rgba(0,0,0,0));
pointer-events:none;
}
/* ============================================================
2 · ACTION BAR / NATIVE HEADER (của Zalo)
============================================================ */
.za-header-bg{
position:absolute;top:0;left:0;right:0;height:var(--zalo-safe-top);
background:var(--zalo-header-bg);z-index:105;pointer-events:none;
}
.za-actionbar{
position:absolute;top:var(--zalo-status-h);left:0;right:0;height:var(--zalo-action-h);
display:flex;align-items:center;gap:10px;padding:0 12px 0 16px;
z-index:110;color:var(--zalo-header-fg);
}
/* --- L1: gốc (logo + tên app) --- */
.za-app-id{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.za-applogo{width:36px;height:36px;border-radius:9px;flex:0 0 auto;overflow:hidden;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.za-applogo svg,.za-applogo img{width:100%;height:100%;display:block;}
.za-app-meta{min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.14;}
.za-app-name{font-size:16px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.za-app-sub{font-size:11.5px;font-weight:500;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
/* --- L2: đi sâu (back + tiêu đề) --- */
.za-back{width:40px;height:40px;margin-left:-8px;border:none;background:none;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:inherit;}
.za-back:active{background:rgba(127,127,127,.18);}
.za-title{flex:1;min-width:0;font-size:17px;font-weight:600;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px;}
/* --- cụm hệ thống ···|X (BẤT BIẾN — không sửa/ẩn được) --- */
.za-cluster{
flex:0 0 auto;display:flex;align-items:center;
width:var(--zalo-cluster-w);height:var(--zalo-cluster-h);
background:var(--zalo-cluster-bg);color:var(--zalo-cluster-fg);
border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
box-shadow:0 1px 5px rgba(0,0,0,.14);
}
.za-cl-btn{flex:1;height:100%;display:flex;align-items:center;justify-content:center;}
.za-cl-div{width:1px;height:17px;background:var(--zalo-cluster-divider);flex:0 0 auto;}
.za-dots{display:flex;gap:3px;}
.za-dots i{width:3.6px;height:3.6px;border-radius:50%;background:currentColor;display:block;}
/* cụm ···|X NỔI trong chế độ full-screen */
.za-cluster--float{position:absolute;top:calc(var(--zalo-status-h) + 8px);right:12px;z-index:114;}
/* ============================================================
3 · HOME INDICATOR
============================================================ */
.za-home-ind{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;border-radius:3px;background:rgba(20,20,18,.36);z-index:132;}
.za-frame[data-home-dark="true"] .za-home-ind{background:rgba(255,255,255,.62);}
/* ============================================================
4 · SPEC / CHÚ THÍCH VÙNG AN TOÀN (bật khi thiết kế)
============================================================ */
.za-guides{position:absolute;inset:0;z-index:120;pointer-events:none;font-family:var(--font-mono,ui-monospace,monospace);}
.za-band{position:absolute;left:0;right:0;}
.za-band::after{content:attr(data-label);position:absolute;font-size:9px;font-weight:700;letter-spacing:.02em;padding:2px 6px;white-space:nowrap;text-transform:uppercase;line-height:1;}
/* vùng Zalo chiếm — xanh dương */
.za-band-sys{background:rgba(79,163,199,.14);border-bottom:1px dashed rgba(43,110,137,.85);}
.za-band-sys.is-bottom{border-bottom:none;border-top:1px dashed rgba(43,110,137,.85);}
.za-band-sys::after{background:rgba(43,110,137,.96);color:#fff;border-radius:0 0 6px 0;left:0;top:0;}
.za-band-sys.is-bottom::after{border-radius:0 6px 0 0;top:auto;bottom:0;}
/* vùng app tự do — xanh lá */
.za-zone-app{position:absolute;border:1px dashed rgba(31,157,85,.7);display:flex;align-items:center;justify-content:center;}
.za-zone-app::after{content:attr(data-label);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(23,122,65,.92);background:rgba(255,255,255,.55);padding:3px 8px;border-radius:999px;}
/* VÙNG CẤM dưới cụm ···|X — đỏ gạch chéo */
.za-nogo{position:absolute;top:0;right:0;
border-left:1px dashed rgba(201,48,44,.92);border-bottom:1px dashed rgba(201,48,44,.92);
background:repeating-linear-gradient(135deg,rgba(217,83,79,.16) 0 7px,transparent 7px 14px);
display:flex;align-items:flex-end;}
.za-nogo::after{content:attr(data-label);font-size:8.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
background:rgba(201,48,44,.96);color:#fff;padding:2px 6px;border-radius:0 5px 0 0;margin:0 auto 0 0;}
/* ============================================================
5 · POPUP XIN QUYỀN (consent) — 100% do Zalo
============================================================ */
.za-perm-scrim{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:300;animation:zaFade .22s ease;}
@keyframes zaFade{from{opacity:0;}to{opacity:1;}}
.za-perm{
position:absolute;left:0;right:0;bottom:0;z-index:301;
background:#1c1c1e;color:#fff;border-radius:14px 14px 0 0;
padding:10px 22px calc(18px + var(--zalo-safe-bottom));
box-shadow:0 -10px 44px rgba(0,0,0,.5);
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
animation:zaSheetUp .32s cubic-bezier(.22,1,.36,1);
}
@keyframes zaSheetUp{from{transform:translateY(100%);}to{transform:none;}}
.za-perm-grab{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.3);margin:4px auto 18px;}
.za-perm-icon{width:62px;height:62px;border-radius:15px;margin:0 auto 14px;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4);}
.za-perm-icon svg,.za-perm-icon img{width:100%;height:100%;}
.za-perm h3{margin:0;text-align:center;font-size:19px;font-weight:600;letter-spacing:-.2px;line-height:1.25;}
.za-perm-desc{margin:8px 0 16px;text-align:center;font-size:13px;line-height:1.42;color:rgba(235,235,245,.62);}
.za-perm-desc a{color:#3b9bff;text-decoration:none;}
.za-perm-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-top:.5px solid rgba(255,255,255,.12);}
.za-perm-row:first-of-type{border-top:none;}
.za-perm-ava{width:42px;height:42px;border-radius:50%;flex:0 0 auto;overflow:hidden;background:#3a3a3c;display:flex;align-items:center;justify-content:center;}
.za-perm-ava img{width:100%;height:100%;object-fit:cover;}
.za-perm-ic{width:42px;display:flex;justify-content:center;color:rgba(235,235,245,.78);flex:0 0 auto;}
.za-perm-rowtext{flex:1;min-width:0;}
.za-perm-rowtext .t{font-size:16px;font-weight:500;}
.za-perm-rowtext .s{font-size:12.5px;color:rgba(235,235,245,.6);margin-top:1px;}
.za-tgl{width:51px;height:31px;border-radius:999px;background:rgba(120,120,128,.5);position:relative;flex:0 0 auto;transition:background .2s;cursor:pointer;}
.za-tgl.on{background:#34c759;}
.za-tgl::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .2s;}
.za-tgl.on::after{transform:translateX(20px);}
.za-perm-btns{display:flex;gap:12px;margin-top:18px;}
.za-perm-btn{flex:1;height:50px;border:none;appearance:none;-webkit-appearance:none;border-radius:14px;font-family:inherit;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.za-perm-btn.deny{background:rgba(118,118,128,.24);color:#fff;}
.za-perm-btn.allow{background:rgba(118,118,128,.18);color:rgba(235,235,245,.4);transition:.2s;}
.za-perm-btn.allow.ready{background:#0a84ff;color:#fff;}
/* --- popup quyền bản SÁNG (máy để Light appearance) --- */
.za-perm-light{background:#fff;color:#000;}
.za-perm-light .za-perm-grab{background:rgba(60,60,67,.3);}
.za-perm-light h3{color:#000;}
.za-perm-light .za-perm-desc{color:rgba(60,60,67,.6);}
.za-perm-light .za-perm-row{border-top-color:rgba(60,60,67,.18);}
.za-perm-light .za-perm-rowtext .s{color:rgba(60,60,67,.6);}
.za-perm-light .za-perm-ic{color:rgba(60,60,67,.7);}
.za-perm-light .za-tgl{background:rgba(120,120,128,.32);}
.za-perm-light .za-tgl.on{background:#34c759;}
.za-perm-light .za-perm-btn.deny{background:rgba(120,120,128,.16);color:#000;}
.za-perm-light .za-perm-btn.allow{background:rgba(120,120,128,.12);color:rgba(60,60,67,.34);}
.za-perm-light .za-perm-btn.allow.ready{background:#0a84ff;color:#fff;}