/* kieu.css — Tai Chinh Mini V1. Chep theo BAN-VE-MAU-TAI-CHINH-MINI.html (anh Chung duyet 25/09/2026). Moi mau la bien CSS; hai bo Toi/Sang dat bang data-bo tren , bo cuc giong het nhau. So do (px) lay dung tu ban ve: xem bang thanh phan chung o cuoi tep. */ /* ================================================================ HAI BO MAU */ html[data-bo="toi"] { --nen: #071C31; --the: #0E2E4D; --nen-chim: #0A2540; --vien-manh: #1B4770; --chu: #FFFFFF; --chu-phu: #9EC8E8; --chu-mo: #8FA6BD; --nhan: #E88031; --chu-thu: #8FD46A; --chu-chi: #F4978E; --nen-nut-thu: #2F6E33; --nen-nut-chi: #B03A2E; --thanh-duoi: #051528; --vien-nut: 1.5px solid rgba(255, 255, 255, 0.99); --quang-nut: 0 0 10px rgba(255, 255, 255, 0.14); --do-nen: #4A1A16; --do-chu: #FFB4AB; --vang-nen: #3A2D0A; --vang-chu: #F5CD5B; --xanh-nen: #0F3556; --xanh-chu: #9EC8E8; --tot-nen: #1B4A22; --tot-chu: #BFE8A8; /* HOAT DONG, CON HAN */ --xam-nen: #1B2E44; --xam-chu: #B8C6D6; /* DA DUNG, HET HAN */ --khoa-nen: #0F3556; --khoa-chu: #CFE6F7; /* dong khoa man quan tri */ --nguy-nen: #2A1216; /* khung XOA TAI KHOAN */ --thanh-chi: #E57368; --thanh-thu: #8FD46A; /* thanh ngang bao cao */ --phu-mo: rgba(3, 12, 24, 0.66); color-scheme: dark; } html[data-bo="sang"] { --nen: #F7F9FC; --the: #FFFFFF; --nen-chim: #EEF2F8; --vien-manh: #DCE4EF; --chu: #101A28; --chu-phu: #104168; --chu-mo: #5B6475; --nhan: #A8541A; --chu-thu: #3D7A1E; --chu-chi: #B3261E; --nen-nut-thu: #2F6E33; --nen-nut-chi: #C0392B; --thanh-duoi: #FFFFFF; --vien-nut: 1.5px solid rgba(16, 65, 104, 0.99); --quang-nut: 0 1px 4px rgba(16, 26, 40, 0.10); --do-nen: #FDECEA; --do-chu: #8C1D14; --vang-nen: #FFF4D1; --vang-chu: #6E5200; --xanh-nen: #E3EEF9; --xanh-chu: #104168; --tot-nen: #EDF7E8; --tot-chu: #2C5E16; --xam-nen: #E6EAF0; --xam-chu: #4A5363; --khoa-nen: #E3EEF9; --khoa-chu: #104168; --nguy-nen: #FDECEA; --thanh-chi: #C0392B; --thanh-thu: #3D7A1E; --phu-mo: rgba(16, 26, 40, 0.45); color-scheme: light; } /* Giong nhau o ca hai bo */ :root { --cam: #E88031; --chu-tren-cam: #101A28; --cao-thanh-duoi: 74px; } /* ================================================================ NEN TANG */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--nen); color: var(--chu); font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.4; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } svg { display: block; flex-shrink: 0; } .an { display: none !important; } .so { font-variant-numeric: tabular-nums; } /* Khung man: toi da 460px canh giua, dem 18/16, cac khoi cach nhau 14 */ .khung { max-width: 460px; margin: 0 auto; min-height: 100vh; padding: 18px 16px calc(var(--cao-thanh-duoi) + 24px); } .khung.khong-thanh { padding-bottom: 28px; } .khung, .cot { display: flex; flex-direction: column; gap: 14px; } .cot-16 { display: flex; flex-direction: column; gap: 16px; } .cot-10 { display: flex; flex-direction: column; gap: 10px; } .cot-8 { display: flex; flex-direction: column; gap: 8px; } .luoi-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .luoi-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .hang { display: flex; align-items: center; gap: 12px; } .hang-deu { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gian { flex-grow: 1; min-width: 0; } /* ================================================================ DAU MAN */ .dau-man { display: flex; align-items: center; gap: 12px; min-height: 44px; } .dau-man.co-lui { min-height: 48px; } .tieu-de-man { flex-grow: 1; min-width: 0; margin: 0; font-family: 'Montserrat', 'Be Vietnam Pro', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: 1px; text-transform: uppercase; color: var(--chu); } .tieu-de-man.thu { color: var(--chu-thu); } .tieu-de-man.chi { color: var(--chu-chi); } .buoc { font-size: 12px; color: var(--chu-mo); white-space: nowrap; } .ten-app { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 1px; color: var(--nhan); margin: 0; } .loi-chao { font-size: 13px; color: var(--chu-mo); } .o-thang { padding: 8px 12px; border-radius: 12px; background: var(--the); border: 1px solid var(--vien-manh); font-size: 13px; font-weight: 600; color: var(--chu-phu); white-space: nowrap; } /* Dau man dang ky / dang nhap: ten app 26 giua, dong phu 14 */ .dau-cong { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .dau-cong .ten-app { font-size: 26px; letter-spacing: 2px; } .dau-cong .phu { font-size: 14px; color: var(--chu-mo); } .chi-bao-buoc { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--chu-phu); } .chi-bao-buoc .so-buoc { width: 24px; height: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--vien-manh); color: var(--chu-mo); } .chi-bao-buoc .so-buoc.xong { background: var(--cam); border-color: var(--cam); color: var(--chu-tren-cam); font-weight: 800; } .chi-bao-buoc .ten-buoc { color: var(--chu-mo); } .chi-bao-buoc .ten-buoc.xong { color: var(--chu-phu); font-weight: 700; } .chi-bao-buoc .noi { width: 24px; height: 1px; background: var(--vien-manh); } /* ================================================================ THE, NHAN MUC */ .the { background: var(--the); border: 1px solid var(--vien-manh); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .the.dem-18 { padding: 18px; } .the.chat { gap: 4px; } .the.danh-sach { padding: 8px 18px; gap: 0; } .nhan-muc { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--chu-phu); } .nhan-muc.mo { color: var(--chu-mo); } .the.chat > .nhan-muc { padding-bottom: 6px; } .phu { color: var(--chu-phu); } .mo { color: var(--chu-mo); } .nho { font-size: 12px; } .vua { font-size: 13px; } .dam { font-weight: 700; } .thu-tien { color: var(--chu-thu); } .chi-tien { color: var(--chu-chi); } .trung-tinh { color: var(--chu-phu); } .so-lon { font-size: 38px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; font-variant-numeric: tabular-nums; word-break: break-word; } .o-nho { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .o-nho .nhan { font-size: 11px; color: var(--chu-mo); } .o-nho .gia-tri { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; word-break: break-word; } .dem-canh { min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--nen-nut-chi); color: #FFFFFF; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } /* O so lieu 2x2 */ .o-luoi { background: var(--nen-chim); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .o-luoi .nhan { font-size: 12px; color: var(--chu-mo); } .o-luoi .gia-tri { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; word-break: break-word; } .o-luoi.gon { gap: 4px; } .o-luoi.gon .gia-tri { font-size: 16px; } /* O thong ke quan tri */ .o-dem { background: var(--the); border: 1px solid var(--vien-manh); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .o-dem .nhan { font-size: 12px; color: var(--chu-mo); } .o-dem .gia-tri { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; } /* Dong thong tin trong the (thuc te thang, 7 ngay, xac nhan) */ .dong-tt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--vien-manh); } .dong-tt:last-child { border-bottom: 0; } .dong-tt > :first-child { font-size: 14px; color: var(--chu-mo); } .dong-tt > :last-child { font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; word-break: break-word; } .dong-tt.tong > :first-child { color: var(--chu); font-weight: 600; } .dong-tt.tong > :last-child { font-size: 16px; font-weight: 800; } .dong-tt.rong-12 { padding: 12px 0; } .dong-tt.rong-12 > :last-child { font-weight: 600; } .dong-tt.rong-12.dam-7 > :last-child { font-weight: 700; } /* ================================================================ NUT */ .nut-chinh { width: 100%; height: 60px; border-radius: 18px; background: var(--cam); color: var(--chu-tren-cam); font-size: 17px; font-weight: 800; letter-spacing: 1px; border: var(--vien-nut); box-shadow: var(--quang-nut); } .nut-chinh.thap { height: 52px; border-radius: 16px; font-size: 15px; letter-spacing: 0; } .nut-chinh:disabled, .nut:disabled, .nut-dac:disabled, .nut-huy:disabled { opacity: 0.55; cursor: default; } /* Nut vien: nen trong, cao 44, bo 14 */ .nut { min-height: 44px; padding: 0 14px; border-radius: 14px; background: transparent; color: var(--chu); font-size: 14px; font-weight: 600; border: var(--vien-nut); box-shadow: var(--quang-nut); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; } .nut.rong { width: 100%; } .nut.cao-46 { min-height: 46px; } .nut.cao-48 { min-height: 48px; } .nut.nho { min-height: 40px; border-radius: 12px; font-size: 13px; box-shadow: none; } .nut.phang { box-shadow: none; } /* Nut dac: nen the, cao 52, bo 16, bieu tuong cam */ .nut-dac { width: 100%; min-height: 52px; padding: 0 14px; border-radius: 16px; background: var(--the); color: var(--chu); font-size: 15px; font-weight: 700; border: var(--vien-nut); box-shadow: var(--quang-nut); display: flex; align-items: center; justify-content: center; gap: 8px; } .nut-dac.cao-50 { min-height: 50px; border-radius: 14px; } .nut-dac.cao-44 { min-height: 44px; border-radius: 12px; font-size: 13px; box-shadow: none; } .nut-dac .bt { color: var(--nhan); } /* Nut huy / xoa: vien mau nen nut chi, chu mau chi */ .nut-huy { min-height: 50px; padding: 0 14px; border-radius: 14px; background: transparent; color: var(--chu-chi); font-size: 15px; font-weight: 700; border: 1.5px solid var(--nen-nut-chi); box-shadow: none; display: inline-flex; align-items: center; justify-content: center; } .nut-huy.rong { width: 100%; } .nut-huy.cao-48 { min-height: 48px; } .nut-huy.cao-44 { min-height: 44px; border-radius: 12px; font-size: 13px; } .nut-lui { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: transparent; color: var(--nhan); border: var(--vien-nut); box-shadow: var(--quang-nut); display: flex; align-items: center; justify-content: center; padding: 0; } .nut-to { height: 104px; border-radius: 20px; color: #FFFFFF; font-size: 19px; font-weight: 800; letter-spacing: 1px; border: var(--vien-nut); box-shadow: var(--quang-nut); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; } .nut-to.thu { background: var(--nen-nut-thu); } .nut-to.chi { background: var(--nen-nut-chi); } /* ================================================================ CHIP */ .cac-chip { display: flex; flex-wrap: wrap; gap: 8px; } .cac-chip.khong-xuong { flex-wrap: nowrap; } .chip { flex: 1 1 auto; height: 42px; padding: 0 12px; border-radius: 21px; background: var(--the); color: var(--chu); border: var(--vien-nut); font-size: 14px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; } .chip.dam { font-weight: 600; } .chip.chon { background: var(--cam); color: var(--chu-tren-cam); font-weight: 800; } .chip.them { background: transparent; color: var(--nhan); font-weight: 700; } .chip.thu:not(.chon) { color: var(--chu-thu); font-weight: 700; } .chip.chi:not(.chon) { color: var(--chu-chi); font-weight: 700; } .chip.tinh { cursor: default; } .chip:disabled { opacity: 0.45; cursor: default; } /* Chip nho (bao cao Chi/Thu) */ .chip.nho { flex: 0 0 auto; height: 36px; padding: 0 16px; border-radius: 18px; font-size: 13px; font-weight: 600; } .chip.nho.chon { font-weight: 800; } /* Hai lua chon ngang (Toi / Sang) */ .chon-hai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .chon-hai .chip { height: 44px; border-radius: 22px; } /* ================================================================ O NHAP */ .truong { display: flex; flex-direction: column; gap: 6px; } .truong > .nhan-o { font-size: 13px; font-weight: 600; color: var(--chu-phu); } .truong-muc { display: flex; flex-direction: column; gap: 8px; } .goi-y { font-size: 12px; color: var(--chu-mo); } .o-nhap { width: 100%; height: 50px; padding: 0 14px; border-radius: 12px; background: var(--nen-chim); border: 1px solid var(--vien-manh); color: var(--chu); font-size: 15px; } .o-nhap.ma-moi { letter-spacing: 1px; } /* O nhap dung rieng tren man (khong nam trong the): nen the, cao 54, bo 14 */ .o-nhap.tren-man { height: 54px; padding: 0 16px; border-radius: 14px; background: var(--the); } .o-nhap.tim { height: 48px; font-size: 14px; } textarea.o-nhap { height: 88px; padding: 12px 14px; resize: vertical; } select.o-nhap { appearance: none; -webkit-appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: right 12px center; } .o-nhap::placeholder, .o-tien::placeholder { color: var(--chu-mo); opacity: 0.7; } .o-nhap:focus, .o-tien:focus, select:focus { outline: 2px solid var(--nhan); outline-offset: 1px; } .o-tien { width: 100%; height: 72px; padding: 0 18px; border-radius: 16px; background: var(--nen-chim); border: 2px solid var(--nhan); color: var(--chu); font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; } .o-tien:focus { outline: none; } .doc-so { padding: 10px 14px; border-radius: 12px; background: var(--nen-chim); font-size: 14px; color: var(--chu-phu); } .doc-so b { color: var(--chu); } .doc-so.sai { color: var(--chu-chi); } /* O chon kieu nut (tai khoan, ngay): chu + mui ten cam; trong suot phu len tren */ .o-chon { position: relative; min-height: 54px; padding: 0 16px; border-radius: 14px; background: var(--the); border: 1px solid var(--vien-manh); color: var(--chu); display: flex; align-items: center; gap: 12px; font-size: 15px; } .o-chon.cao-64 { min-height: 64px; } .o-chon.cao-50 { min-height: 50px; padding: 0 14px; gap: 8px; font-size: 14px; } .o-chon .chu-chon { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .o-chon .chu-chon .chinh { font-size: 15px; font-weight: 600; } .o-chon.cao-50 .chu-chon .chinh { font-size: 14px; font-weight: 400; } .o-chon .chu-chon .phu-dong { font-size: 12px; color: var(--chu-mo); } .o-chon .bt { color: var(--nhan); } .o-chon > select, .o-chon > input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; font-size: 16px; } .o-chon:focus-within { outline: 2px solid var(--nhan); outline-offset: 1px; } /* ================================================================ DONG DANH SACH */ /* Dong giao dich: bieu tuong tron 40 + ten + dong phu + so tien */ .dong-gd { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: var(--the); border: 1px solid var(--vien-manh); border-radius: 14px; color: var(--chu); text-align: left; } .bieu-tuong { width: 40px; height: 40px; flex-shrink: 0; border-radius: 20px; background: var(--nen-chim); display: flex; align-items: center; justify-content: center; } .bieu-tuong.thu { color: var(--chu-thu); } .bieu-tuong.chi { color: var(--chu-chi); } .bieu-tuong.chuyen { color: var(--chu-phu); } .chu-dong { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .chu-dong .chinh { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .chu-dong .phu-dong { font-size: 12px; color: var(--chu-mo); overflow-wrap: anywhere; } .so-dong { font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; } .nhom-ngay { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--chu-mo); text-transform: uppercase; } /* Dong can chu y (trong the): nen chim */ .dong-canh { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; background: var(--nen-chim); border: 1px solid var(--vien-manh); border-radius: 14px; color: var(--chu); text-align: left; } .dong-canh .so-dong { font-size: 14px; } /* Dong trong the danh sach (cai dat): min 58, gach duoi, mui ten cam */ .dong-muc { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 0; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--vien-manh); color: var(--chu); text-align: left; } .dong-muc:last-child { border-bottom: 0; } .dong-muc .chu-dong .chinh { font-size: 15px; } .dong-muc .bt { color: var(--nhan); } /* Dong nen chim trong the (ma moi, nguoi dung quan tri) */ .dong-chim { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--nen-chim); color: var(--chu); text-align: left; width: 100%; border: 0; } .dong-chim .ma { font-size: 15px; font-weight: 700; letter-spacing: 1px; } .the-nguoi { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; background: var(--nen-chim); border: 1px solid var(--vien-manh); color: var(--chu); text-align: left; width: 100%; } .the-nguoi.mo-ra { gap: 10px; border: 1.5px solid var(--nhan); } .the-nguoi .ten { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; } /* Nhan canh bao / trang thai */ .nhan-canh { flex-shrink: 0; padding: 4px 8px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; white-space: nowrap; } .nhan-canh.do { background: var(--do-nen); color: var(--do-chu); } .nhan-canh.vang { background: var(--vang-nen); color: var(--vang-chu); } .nhan-canh.xanh { background: var(--xanh-nen); color: var(--xanh-chu); } .nhan-canh.tot { background: var(--tot-nen); color: var(--tot-chu); letter-spacing: 0; } .nhan-canh.xam { background: var(--xam-nen); color: var(--xam-chu); letter-spacing: 0; } .nhan-loai { padding: 4px 10px; border-radius: 8px; color: #FFFFFF; font-size: 12px; font-weight: 800; letter-spacing: 1px; } .nhan-loai.thu { background: var(--nen-nut-thu); } .nhan-loai.chi { background: var(--nen-nut-chi); } .nhan-loai.chuyen { background: var(--xanh-nen); color: var(--xanh-chu); } .nhan-admin { padding: 3px 8px; border-radius: 8px; background: var(--cam); color: var(--chu-tren-cam); font-size: 11px; font-weight: 800; letter-spacing: 1px; } .dong-khoa { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--khoa-nen); color: var(--khoa-chu); font-size: 13px; line-height: 1.45; } .dau-tron { width: 48px; height: 48px; flex-shrink: 0; border-radius: 24px; background: var(--cam); color: var(--chu-tren-cam); font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; } /* Khung nguy hiem: XOA TAI KHOAN */ .the.nguy { background: var(--nguy-nen); border-color: var(--nen-nut-chi); gap: 10px; } .the.nguy .nhan-muc, .the.nguy .loi-nguy { color: var(--do-chu); } .the.nguy .loi-nguy { font-size: 13px; line-height: 1.5; } /* Khung vang: chi lon hon so du (canh bao, khong chan) */ .the.canh-vang { background: var(--vang-nen); border-color: var(--vang-chu); color: var(--vang-chu); gap: 4px; } /* Thanh ngang bao cao */ .muc-bao-cao { display: flex; flex-direction: column; gap: 6px; } .muc-bao-cao .hang-deu { font-size: 14px; } .thanh-ngang { height: 10px; border-radius: 5px; background: var(--nen-chim); } .thanh-ngang > span { display: block; height: 10px; border-radius: 5px; background: var(--thanh-chi); } .thanh-ngang.thu > span { background: var(--thanh-thu); } /* Chuyen thang (bao cao) */ .chuyen-thang { display: flex; align-items: center; gap: 12px; } .chuyen-thang .giua { flex-grow: 1; text-align: center; font-size: 18px; font-weight: 700; } /* ================================================================ TRANG THAI */ .trang-thai { font-size: 14px; color: var(--chu-mo); } .trang-thai.dang-tai { display: flex; align-items: center; gap: 10px; } .trang-thai.loi { color: var(--chu-chi); } .vong-quay { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--vien-manh); border-top-color: var(--nhan); animation: quay 0.9s linear infinite; } @keyframes quay { to { transform: rotate(360deg); } } .bang-mat-mang { position: fixed; top: 0; left: 0; right: 0; z-index: 60; text-align: center; padding: 8px 12px; background: var(--vang-nen); color: var(--vang-chu); font-weight: 700; font-size: 13px; } .bao-loi { background: var(--do-nen); color: var(--do-chu); border-radius: 12px; padding: 10px 14px; font-size: 14px; } .bao-vang { background: var(--vang-nen); color: var(--vang-chu); border-radius: 12px; padding: 10px 14px; font-size: 14px; } /* ================================================================ THANH DUOI */ .thanh-duoi { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 460px; z-index: 40; display: flex; align-items: flex-end; background: var(--thanh-duoi); border-top: 1px solid var(--vien-manh); padding: 6px 4px calc(14px + env(safe-area-inset-bottom)); } .muc-duoi { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: 0; padding: 8px 0 0; min-height: 44px; color: var(--chu-mo); font-size: 11px; font-weight: 600; } .muc-duoi.dang-mo { color: var(--nhan); font-weight: 700; } .muc-duoi.ghi { padding: 0; color: var(--chu); font-weight: 700; } .nut-ghi-giua { width: 56px; height: 56px; margin-top: -24px; border-radius: 28px; background: var(--cam); color: var(--chu-tren-cam); border: var(--vien-nut); box-shadow: var(--quang-nut); display: flex; align-items: center; justify-content: center; } /* ================================================================ BANG TRUOT / THONG BAO */ .phu-nen { position: fixed; inset: 0; background: var(--phu-mo); z-index: 50; display: flex; align-items: flex-end; justify-content: center; } .bang { width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; background: var(--nen); border: 1px solid var(--vien-manh); border-radius: 20px 20px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; } .bang .tieu-de-bang { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; margin: 0; } .bang p { margin: 0; } .thong-bao { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--cao-thanh-duoi) + 18px); max-width: 420px; width: calc(100% - 32px); background: var(--the); color: var(--chu); border: 1px solid var(--vien-manh); border-radius: 14px; padding: 12px 14px; z-index: 70; font-weight: 600; font-size: 14px; text-align: center; } .mat-khau-tam { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 24px; font-weight: 800; letter-spacing: 2px; text-align: center; padding: 14px; border-radius: 14px; background: var(--nen-chim); border: 2px solid var(--nhan); user-select: all; overflow-wrap: anywhere; } /* ================================================================ BANG THANH PHAN CHUNG (tu ban ve) khung man ........ dem 18/16, khoi cach 14 (man Ghi/Xac nhan 16) · dang ky dem 36/20/24 dau man .......... Montserrat 800 21px, gian 1px, VIET HOA, cao >= 44 (co nut lui: 48) the .............. nen the, vien manh 1px, bo 20, dem 16/18, cach 12 nhan muc ......... 12px 700 gian 1.5px chu phu VIET HOA (nhom ngay: chu mo) nut chinh ........ cao 60 bo 18 nen cam chu #101A28 17px 800 + VIEN NUT nut vien ......... cao 44 bo 14 nen trong 14px 600 + VIEN NUT nut dac .......... cao 52 bo 16 nen the 15px 700 + VIEN NUT, bieu tuong cam nut huy/xoa ...... vien 1.5px nen nut chi, chu mau chi (khong VIEN NUT) nut lui .......... 46x46 bo 12, mui ten mau nhan chip ............. cao 42 bo 21 14px 500; chon: nen cam chu toi 800; chip nho 36/18 13px o nhap ........... cao 50 bo 12 nen chim 15px; tren man: cao 54 bo 14 nen the o so tien ........ cao 72 bo 16 vien 2px nhan 32px 800 dong giao dich ... dem 10/12 bo 14, bieu tuong tron 40 nen chim, ten 14/600, phu 12 mo, tien 15/700 dong canh bao .... dem 12 nen chim bo 14, nhan 11px 800 dem 4/8 bo 8 o so lieu 2x2 .... nen chim bo 14 dem 12, nhan 12 mo, so 17/700 dong khoa ........ dem 10/14 bo 14 13px (nen/chu rieng) thanh duoi ....... dem 6/4/14, muc 11px, bieu tuong 22, nut Ghi tron 56 nho len 24 */ /* ================================================================ BO SUNG (dung trong cac man) */ .cong { display: flex; flex-direction: column; gap: 16px; padding: 18px 4px 6px; } .chu-nhan { color: var(--nhan); font-weight: 700; } .tieu-de-man.giua { text-align: center; } .tieu-de-man.tu-co { flex-grow: 0; } .the.cot-10-the { gap: 10px; } .the.the-14 { gap: 14px; } .cot-12 { display: flex; flex-direction: column; gap: 12px; } .luoi-2.cach-12 { gap: 12px; } .luoi-2.cach-8, .luoi-3.cach-8 { gap: 8px; } .hang.nho-gap { gap: 8px; } .hang-10 { display: flex; align-items: center; gap: 10px; width: 100%; } .dam-6 { font-weight: 600; } .ten-ho-so { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; } .nut.cao-52 { min-height: 52px; border-radius: 16px; font-size: 15px; font-weight: 700; } .hang-nut-nho { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 4px; } .hai-nho { display: flex; gap: 6px; }