/* CHAV SUAB — giao diện kiểu SUGO (tím điện → hồng), chữ Mông to · Việt nhỏ */
:root{--s1:#561BF1;--s2:#EB83DA;--s3:#8B5CF6;--nen:#F6F2FF;--the:#fff;--chu:#1E1433;--chu2:#6B6080;--vien:#E8E0FA;
--toi:#160A2E;--toi2:#24124A;--vang:#FFC83D;--xanh:#2BD9A0;--do:#FF4D6D;--grad:linear-gradient(135deg,#561BF1,#EB83DA)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--nen);color:var(--chu);font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",sans-serif}
body{max-width:520px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:78px;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
small,.vi{font-size:.78em;color:var(--chu2);font-weight:400}
.dau{position:sticky;top:0;z-index:30;background:rgba(246,242,255,.92);backdrop-filter:blur(10px);padding:12px 16px 8px;display:flex;align-items:center;gap:10px}
.dau h1{font-size:22px;margin:0;flex:1;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nut{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--grad);color:#fff;font-weight:700}
.nut.phu{background:#EFE7FF;color:var(--s1)}
.nut.nho{min-height:30px;padding:0 12px;font-size:13px}
.nut[disabled]{opacity:.45}
.the{background:var(--the);border-radius:18px;padding:14px;margin:10px 16px;box-shadow:0 2px 10px rgba(86,27,241,.06)}
.hang{display:flex;align-items:center;gap:10px}
.cot{display:flex;flex-direction:column;gap:6px}
.gian{flex:1;min-width:0}
.cat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#EFE7FF;color:var(--s1)}
.chip.vang{background:linear-gradient(90deg,#FFE08A,#FFB547);color:#5A3300}
.chip.do{background:#FFE3E8;color:var(--do)}
.chip.xanh{background:#DDFBF0;color:#0B8A63}
.chips{display:flex;gap:6px;overflow-x:auto;padding:6px 16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips .chip{font-size:13px;padding:6px 14px;background:#fff;color:var(--chu2);flex:none}
.chips .chip.on{background:var(--grad);color:#fff}
.anh{position:relative;display:inline-block;flex:none;border-radius:50%}
.anh img,.anh .chu-tat{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--grad);color:#fff;font-weight:800}
.anh .khung{position:absolute;inset:-14%;width:128%;height:128%;pointer-events:none;border-radius:50%}
.anh .cham{position:absolute;right:2%;bottom:2%;width:24%;height:24%;border-radius:50%;background:var(--xanh);border:2px solid #fff}
.trong{padding:40px 20px;text-align:center;color:var(--chu2)}
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;height:68px;background:#fff;border-top:1px solid var(--vien);display:flex;z-index:50;padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:grid;place-items:center;align-content:center;gap:2px;font-size:11px;font-weight:700;color:#9C93B0;position:relative}
.tabbar a .ic{font-size:22px;line-height:1}
.tabbar a.on{color:var(--s1)}
.tabbar a .so{position:absolute;top:8px;left:55%;background:var(--do);color:#fff;border-radius:999px;font-size:10px;padding:0 5px;min-width:16px;text-align:center}
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:rgba(22,10,46,.92);color:#fff;padding:10px 16px;border-radius:12px;z-index:999;max-width:90%;font-size:14px;animation:tr .25s}
@keyframes tr{from{opacity:0;transform:translate(-50%,-8px)}}
.man-che{position:fixed;inset:0;background:rgba(10,4,24,.55);z-index:200;display:flex;align-items:flex-end;justify-content:center}
.tam{background:#fff;width:100%;max-width:520px;border-radius:22px 22px 0 0;max-height:86vh;overflow:auto;padding:16px 16px calc(16px + env(safe-area-inset-bottom));animation:len .22s}
.tam.toi{background:var(--toi2);color:#fff}
@keyframes len{from{transform:translateY(40px);opacity:.4}}
.tam h3{margin:0 0 10px;font-size:18px}
.o-nhap{width:100%;border:1.5px solid var(--vien);border-radius:12px;padding:10px 12px;background:#fff;outline:0}
.o-nhap:focus{border-color:var(--s3)}
.luoi-qua{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.luoi-qua button{display:grid;place-items:center;gap:2px;padding:8px 2px;border-radius:12px;border:1.5px solid transparent;font-size:11px}
.luoi-qua button img{width:44px;height:44px;object-fit:contain}
.luoi-qua button.on{border-color:var(--s2);background:rgba(235,131,218,.12)}
.luoi-qua .gia{color:var(--vang);font-weight:700}
.dong-nguoi{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--vien)}
.vip{display:inline-block;font-size:10px;font-weight:900;padding:1px 6px;border-radius:6px;color:#fff;background:linear-gradient(90deg,#F7B500,#FF6A00);vertical-align:middle}
.svip{background:linear-gradient(90deg,#9B5CFF,#FF4DB8)}
.qt{background:linear-gradient(90deg,#1E1E1E,#C9A44C)}
.fam{background:linear-gradient(90deg,#11998E,#38EF7D)}
/* ===== CHUẨN HOÁ 01/10 — khối dùng chung (S.dau · S.muc · S.trong · S.tabCon) ===== */
.dau .ve{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--s1);font-size:20px;font-weight:800;flex:none;box-shadow:0 1px 4px rgba(86,27,241,.12)}
.dau h1 small{-webkit-text-fill-color:var(--chu2);color:var(--chu2);font-size:13px;font-weight:600;margin-left:4px}
.dau .phai{display:flex;gap:6px;align-items:center;flex:none}
.muc{display:flex;align-items:baseline;gap:6px;margin:18px 16px 6px;font-size:16px;font-weight:800}
.muc .gian{flex:1}
.muc a,.muc button{font-size:13px;color:var(--s1);font-weight:700}
.tabcon{display:flex;gap:6px;overflow-x:auto;padding:4px 16px 10px;scrollbar-width:none}
.tabcon::-webkit-scrollbar{display:none}
.tabcon button{flex:none;white-space:nowrap;padding:7px 14px;border-radius:999px;background:#fff;color:var(--chu2);font-weight:800;font-size:14px;border:1px solid var(--vien)}
.tabcon button small{font-weight:600;margin-left:3px}
.tabcon button.on{background:var(--grad);color:#fff;border-color:transparent}
.tabcon button.on small{color:rgba(255,255,255,.85)}
.nut,.chip{white-space:nowrap}
.trong .ic{font-size:48px;line-height:1;margin-bottom:8px}
.trong b{display:block;color:var(--chu);font-size:16px}
.trong .nut{margin-top:14px}
.dang-tai{padding:30px;text-align:center;color:var(--chu2)}
.dang-tai::before{content:"";display:inline-block;width:22px;height:22px;border:3px solid #E3D8FF;border-top-color:var(--s1);border-radius:50%;animation:xoay .8s linear infinite;vertical-align:middle;margin-right:8px}
@keyframes xoay{to{transform:rotate(360deg)}}
/* 01/10 sửa: ảnh KHUNG không được mang nền tím của ảnh đại diện (che mất mặt/chữ cái) */
.anh img.khung{background:none;border-radius:0;object-fit:contain}
.vip{white-space:nowrap}