/* ===== Trang chủ (chưa đăng nhập / đã đăng nhập theo hạng) =====
   Nguồn: Figma "Home-Default", "Home - Bronze", "Home-bạc", "Home-vàng", "Home-kim cương" (frame 393px, đã bỏ status bar 50px) */
.page-home { background: #F2F3F4; }
.hm { position: relative; width: 100%; max-width: 480px; min-height: 100vh; margin: 0 auto; }

/* ---- Header ---- */
.hm-head { position: relative; height: 225px; overflow: hidden; border-radius: 0 0 20px 20px; background: #E3E3E3; }
.hm-head__art { position: absolute; left: 0; right: 0; top: -50px; height: 275px; }
.hm-head__base { position: absolute; inset: 0; background: #E3E3E3; }
.hm-head__grad { position: absolute; left: 0; right: 0; top: -22px; height: 297px; border-radius: 0 0 20px 20px; background: linear-gradient(126.31deg, #BF0616 82.03px, #490806 376.73px); }
.hm-head__wave { position: absolute; left: 0; top: 0; width: 393px; height: 275px; }
.hm-head__band { position: absolute; left: -27px; right: -34px; top: 189px; height: 111px; background: #831717; filter: blur(15px); }
.hm-head__mascot { position: absolute; right: 38px; top: 62px; width: 168px; height: 181px; background: url('../img/welcome/mascot.png') center / contain no-repeat; }
.hm-head__dot { position: absolute; }
.hm-head__dot--1 { left: 205px; top: 71px; width: 9px; height: 9px; }
.hm-head__dot--2 { left: 177px; top: 139px; width: 5px; height: 5px; }
.hm-head__dot--3 { right: 24px; top: 94px; width: 10px; height: 10px; }

.hm-logo { position: absolute; left: 21px; top: 9px; width: 126px; height: 49px; }
.hm-logo__img { position: absolute; left: 3.2px; top: 4.1px; width: 116.5px; height: 29px; }
.hm-logo__text { position: absolute; left: 19px; top: 32px; fill: #fff; font: 700 15px/14px Arial, Helvetica, sans-serif; }
.hm-bell { position: absolute; right: 16px; top: 12px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 9999px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
.hm-bell img { width: 24px; height: 24px; }
.hm-bell__badge { position: absolute; left: 21px; top: -1px; display: flex; align-items: center; justify-content: center; min-width: 22px; height: 16px; padding: 0 4px; border: 1px solid #fff; border-radius: 100px; background: #D92D20; color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; }
.hm-greet { position: absolute; left: 16px; top: 70px; margin: 0; font-size: 24px; font-weight: 700; line-height: 29px; color: #fff; }
.hm-chip { position: absolute; left: 16px; top: 140px; display: flex; align-items: center; gap: 4px; height: 32px; padding: 8px 16px 8px 12px; border-radius: 18.9px; background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 16px; font-weight: 600; line-height: 19.09px; }
.hm-chip img { width: 20px; height: 20px; }

/* ---- Thẻ thành viên ---- */
.hm-card { position: relative; height: 138px; margin: -38px 16px 0; border-radius: 12px; overflow: hidden; background: #EBF3F8; box-shadow: 8px 10px 16px rgba(0, 0, 0, .05); }
.hm-card::after { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 12px; background: linear-gradient(115.61deg, #FFFFFF 1.25px, rgba(255, 255, 255, .2) 385.18px); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.hm-card__art { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; }
.hm-card__shape { position: absolute; left: 165px; top: -122px; width: 311px; height: 312px; opacity: .6; }
.hm-card__rect { position: absolute; }
.hm-card__rect--a { left: 0; top: 156px; width: 207.4px; height: 104px; }
.hm-card__rect--b { left: 104px; top: 52px; width: 207.4px; height: 104px; }
.hm-card__rect--c { left: 156px; top: 104px; width: 208px; height: 103.7px; }
.hm-card__rect--d { left: 53px; top: 0; width: 208px; height: 103.7px; }
.hm-card__blob { position: absolute; left: 0; top: 0; width: 127px; height: 126px; filter: blur(64px); }
.hm-card__blob-a, .hm-card__blob-b { position: absolute; top: 0; width: 63.5px; height: 63px; opacity: .3; }
.hm-card__blob-a { left: 0; }
.hm-card__blob-b { left: 64px; }

.hm-card__top { position: relative; display: flex; gap: 16px; padding: 16px 16px 12px; }
.hm-card__balance { flex: 1 1 auto; min-width: 0; }
.hm-card__label { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; line-height: 20px; color: #0E1136; }
.hm-card__eye { display: flex; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hm-card__eye img { width: 16px; height: 16px; }
.hm-card__amount { font-size: 18px; font-weight: 700; line-height: 21px; color: #0A1118; }
.hm-rank { position: relative; flex: 0 0 48px; width: 48px; height: 48px; filter: drop-shadow(1px 1px 2px rgba(5, 31, 51, .15)); }
.hm-rank__bg { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.hm-rank__icon { position: absolute; left: 13px; top: 12px; width: 22px; height: 22px; background-size: 100% 100%; background-repeat: no-repeat; }
.hm-rank--bronze .hm-rank__bg { background-image: url('../img/home/rank-bronze.png'); }
.hm-rank--bronze .hm-rank__icon { background-image: url('../img/home/rank-bronze-icon.png'); }
.hm-rank--silver .hm-rank__bg { background-image: url('../img/home/rank-silver.png'); }
.hm-rank--silver .hm-rank__icon { background-image: url('../img/home/rank-silver-icon.png'); }
.hm-rank--gold .hm-rank__bg { background-image: url('../img/home/rank-gold.png'); }
.hm-rank--diamond .hm-rank__bg { background-image: url('../img/home/rank-diamond.png'); }

.hm-card__actions { position: absolute; left: 0; right: 0; top: 76px; display: flex; gap: 1px; height: 62px; padding-left: 1px; }
.hm-card__act { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 12px; background: linear-gradient(178.57deg, rgba(255, 255, 255, .5) 4.81px, rgba(255, 255, 255, 0) 64.22px); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); color: #0A1118; font-size: 16px; font-weight: 600; line-height: 19.09px; text-decoration: none; }
.hm-card__act img { width: 28px; height: 28px; }

/* Biến thể theo hạng */
.hm-card--bronze { background: linear-gradient(91.22deg, #E0B899 -13.81px, #FDDDCF 155.32px, #D8906F 379.53px); }
.hm-card--silver { background: linear-gradient(149.95deg, #EDEDED 0px, #CCD0DD 174.29px, #C4C8DC 242.52px); }
.hm-card--gold { background: linear-gradient(159.25deg, #FFCD5E 0px, #FFE0A6 132.42px, #EF9700 232.73px); }
.hm-card--diamond { background: linear-gradient(95.87deg, #D8D2FC 12.78px, #CFC3F3 364.63px); }
.hm-card--bronze .hm-card__actions, .hm-card--silver .hm-card__actions, .hm-card--gold .hm-card__actions, .hm-card--diamond .hm-card__actions { padding-left: 0; }
.hm-card--bronze .hm-card__actions { background: #EFD7C9; }
.hm-card--silver .hm-card__actions { background: #B0B4C2; }
.hm-card--gold .hm-card__actions { background: #EDCD8B; }
.hm-card--diamond .hm-card__actions { background: #CBC7EA; }
.hm-card--bronze .hm-card__act:nth-child(1) { background: linear-gradient(178.57deg, #FCEBE2 4.81px, #F7D8C7 64.22px); }
.hm-card--bronze .hm-card__act:nth-child(2) { background: linear-gradient(178.57deg, #FCEBE1 4.81px, #F7D9C9 64.22px); }
.hm-card--silver .hm-card__act:nth-child(1) { background: linear-gradient(178.57deg, #D9DEEA 4.81px, #ABB1C0 64.22px); }
.hm-card--silver .hm-card__act:nth-child(2) { background: linear-gradient(178.57deg, #D9DDEA 4.81px, #AEB4C2 64.22px); }
.hm-card--gold .hm-card__act:nth-child(1) { background: linear-gradient(178.57deg, #F8E7C5 4.81px, #F2CF88 64.22px); }
.hm-card--gold .hm-card__act:nth-child(2) { background: linear-gradient(178.57deg, #F8E6C3 4.81px, #F2CF8A 64.22px); }
.hm-card--diamond .hm-card__act:nth-child(1) { background: linear-gradient(178.57deg, #E7E5F8 4.81px, #CFCDF2 64.22px); }
.hm-card--diamond .hm-card__act:nth-child(2) { background: linear-gradient(178.57deg, #E7E5F8 4.81px, #D0CEF2 64.22px); }

/* ---- Khối đăng nhập (chưa đăng nhập) ---- */
.hm-login { position: relative; display: flex; flex-direction: column; gap: 12px; margin: -37px 16px 0; padding: 16px; border: 1px solid #FFE3E7; border-radius: 16px; background: #FFF0F1; }
.hm-login__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 19px; color: var(--text-primary); }
.hm-login__row { display: flex; align-items: center; gap: 9px; }
.hm-login__btn { flex: 1 1 auto; width: auto; background: #E50929; }

/* ---- Khám phá ---- */
.hm-banner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; height: 156px; margin: 16px 16px 0; padding: 19px 18px; border-radius: 12px; background: url('../img/welcome/banner.png') no-repeat, #9F0316; background-size: 510.2px 196.3px, auto; background-position: calc(100% + 16px) -19.7px, 0 0; text-decoration: none; overflow: hidden; }
.hm-banner__eyebrow { font-size: 10px; font-weight: 700; line-height: 12px; letter-spacing: 1px; color: #FFE5B4; }
.hm-banner__title { font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: -.5px; color: #fff; }
.hm-banner__cta { display: flex; align-items: center; gap: 6px; height: 32px; padding: 9px 12px; border-radius: 24px; background: #FFF0C8; font-size: 12px; font-weight: 700; line-height: 14.32px; color: #8D0718; }
.hm-banner__cta img { width: 14px; height: 14px; }

/* ---- Tiêu đề khối ---- */
.hm-title { display: flex; align-items: center; justify-content: space-between; height: 24px; margin: 16px 16px 0; }
.hm-title h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 21.48px; color: #0A1118; }
.hm-title a { display: flex; }
.hm-title img { width: 24px; height: 24px; }

/* ---- Chọn nhanh ---- */
.hm-pick { position: relative; height: 162px; margin: 12px 16px 0; border-radius: 12px; background: linear-gradient(180deg, #FFF5F7 0px, #FFDBE3 65.12px, #F3F1F2 162px); }
.hm-pick__bar { display: flex; align-items: center; justify-content: space-between; height: 41px; padding: 12px 32px 12px 36px; }
.hm-pick__flash { display: inline-block; width: 24px; height: 24px; }
.hm-pick__name { flex: 1 1 auto; font-size: 18px; font-weight: 700; font-style: italic; line-height: 21.48px; color: #E50929; }
.hm-pick__timer { display: flex; align-items: center; gap: 2px; height: 20px; }
.hm-pick__timer b { display: flex; align-items: center; justify-content: center; width: 32px; height: 19px; border-radius: 100px; background: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 600; letter-spacing: .24px; line-height: 15px; color: #1D1D1D; }
.hm-pick__timer i { width: 4px; font-size: 14px; font-style: normal; line-height: 20px; color: #797979; text-align: center; }
.hm-pick__ball { position: absolute; left: 6px; top: 4px; width: 47px; height: 50px; background: url('../img/home/ball.png') center / 100% 100% no-repeat; }
.hm-pick__card { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 0; height: 121px; padding: 14px 16px 14px 12px; border-radius: 12px; background: #fff; }
.hm-pick__card::after { content: ""; position: absolute; inset: 0; padding: 0 1px 1px; border-radius: 12px; background: linear-gradient(180deg, #E9E9E9 0px, #FFD7DF 121px); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.hm-pick__img { flex: 0 0 90px; width: 90px; height: 68px; margin-right: 8px; background-repeat: no-repeat; }
.hm-pick__img--power { background-image: url('../img/welcome/power.png'); background-size: 97.3px 68px; background-position: -3.65px 0; }
.hm-pick__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-pick__prod { font-size: 16px; font-weight: 600; line-height: 19.09px; color: #0A1118; }
.hm-pick__prize { font-size: 22px; font-weight: 700; line-height: 28px; color: #E50929; }
.hm-pick__draw { font-size: 14px; font-weight: 400; line-height: 20px; color: #0B294C; }
.hm-pick__close { font-size: 14px; font-weight: 400; line-height: 20px; color: #E50929; }
.hm-pick__btn { flex: 0 0 90px; display: flex; align-items: center; justify-content: center; width: 90px; height: 36px; border-radius: 9999px; background: #E50929; color: #fff; font-size: 14px; font-weight: 600; line-height: 16.7px; text-decoration: none; }

/* ---- Lưới sản phẩm ---- */
.hm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 8px 16px 0; }
.hm-prod { position: relative; display: block; height: 211px; border-radius: 12px; background: #fff; box-shadow: 0 4px 18px rgba(26, 32, 48, .016); text-decoration: none; }
.hm-prod__img { position: absolute; left: calc(50% - 63.5px); top: 10px; width: 127px; height: 97px; background-repeat: no-repeat; }
.hm-prod__img--mega { background-image: url('../img/welcome/mega.png'); background-size: contain; background-position: center; }
.hm-prod__img--bingo18 { background-image: url('../img/welcome/bingo18.png'); background-size: contain; background-position: center; }
.hm-prod__img--lotto { background-image: url('../img/home/lotto.png'); background-size: 121px 86px; background-position: 3px 6px; }
.hm-prod__img--max3d { background-image: url('../img/home/max3d.png'); background-size: 157.3px 156px; background-position: -15.7px -31.9px; clip-path: inset(6px 1px 6px 2px); }
.hm-prod__body { position: absolute; left: 12px; top: 116px; right: 16px; display: flex; flex-direction: column; gap: 2px; }
.hm-prod__name { font-size: 16px; font-weight: 600; line-height: 19.09px; color: #202536; }
.hm-prod__desc { font-size: 14px; font-weight: 400; line-height: 20px; color: #6E6E6E; white-space: nowrap; }
.hm-prod__desc b { font-weight: 600; color: #E50929; }
.hm-prod__btn { position: absolute; left: 12px; right: 16px; top: 165px; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 9999px; background: #FDE5EB; color: #E50929; font-size: 12px; font-weight: 600; line-height: 16px; }

/* ---- Chơi nhanh (Keno) ---- */
.hm-quick { display: flex; align-items: center; justify-content: flex-start; gap: 0; height: 96px; margin: 8px 16px 0; padding: 14px 16px 14px 12px; border-radius: 12px; background: #fff; }
.hm-quick__img { flex: 0 0 90px; width: 90px; height: 69px; margin-right: 8px; background: url('../img/welcome/keno.png') no-repeat; background-size: 90px 70.8px; background-position: 0 -.9px; }
.hm-quick__info { flex: 0 1 145px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-quick__name { font-size: 16px; font-weight: 600; line-height: 19.09px; color: #0A1118; }
.hm-quick__price { font-size: 14px; font-weight: 400; line-height: 20px; color: #E50929; }
.hm-quick__btn { flex: 0 0 80px; margin-left: auto; display: flex; align-items: center; justify-content: center; width: 80px; height: 36px; border-radius: 9999px; background: #E50929; color: #fff; font-size: 14px; font-weight: 600; line-height: 16.7px; text-decoration: none; }

/* ---- Tin tức ---- */
.hm-news { min-height: 361px; margin-top: 16px; padding: 16px 16px 8px; border-radius: 12px 12px 0 0; background: #fff; }
.hm-title--news { margin: 0 0 8px; }
.hm-news__list { display: flex; gap: 8px; }
.hm-news__item { flex: 1 1 0; min-width: 0; display: block; height: 188px; border: 1px solid #EAEAEA; border-radius: 16px; overflow: hidden; background: #fff; text-decoration: none; }
.hm-news__img { display: block; height: 98px; border-radius: 16px; background-repeat: no-repeat; }
.hm-news__img--news-1 { background-image: url('../img/home/news-1.jpg'); background-size: 282px 143px; background-position: -53px -35px; }
.hm-news__img--news-2 { background-image: url('../img/home/news-2.jpg'); background-size: 193px 128.8px; background-position: -9px -15.4px; }
.hm-news__body { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.hm-news__title { font-size: 14px; font-weight: 700; line-height: 20px; color: #0A1118; }
.hm-news__date { font-size: 14px; font-weight: 400; line-height: 20px; color: #797979; }