/* Bot Rổ Con Lắc — giao diện tối, một cột 780px ở giữa; PC rộng xếp 2 cột thẻ; iPad co vừa; điện thoại xếp dọc. */
:root {
  --nen: #0b101c; --the: #111a2b; --the2: #0d1626; --vien: #1f2b42; --vien2: #2b3a57;
  --chu: #e8edf6; --mo: #94a2bc; --nhat: #6b7a94;
  --vang: #f0c453; --loi: #3ddc84; --lo: #ff5c6c; --xd: #4cc3ff; --tim: #b57cff; --dong: #d4884a;
  --tab: #f0c453;
  /* thang chữ: 5 cỡ, mỗi cỡ một việc — nhãn / thân / số bảng / tiêu đề / số lớn */
  --cs-nhan: 11px; --cs-phu: 12px; --cs-than: 13px; --cs-so: 14px; --cs-tieude: 18px; --cs-ten: 22px; --cs-lon: 32px;
  /* màu ngữ nghĩa: lãi xanh lá · lỗ đỏ · đang mở vàng · an toàn đồng · đạt mục tiêu tím · mức nạp xanh dương */
}
/* màu nền theo khung thời gian: dài = xanh biển, trung = xanh lục, ngắn = tím than (gốc) */
body[data-khung="dai"]   { --nen: #0a1836; --the: #122650; --the2: #0e1f42; --vien: #24407a; --vien2: #315394; --tab: #4cc3ff; }
body[data-khung="trung"] { --nen: #07201c; --the: #0e3129; --the2: #0b2822; --vien: #1b4a40; --vien2: #266556; --tab: #3ddc84; }
body[data-khung="ngan"]  { --tab: #f0c453; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--nen); color: var(--chu); padding: 24px 16px 60px; transition: background .25s;
       font-family: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 13px; line-height: 1.4;
       padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--tab); outline-offset: 2px; }
.so { font-variant-numeric: tabular-nums; }
.nhan { font-size: var(--cs-nhan); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--nhat); white-space: nowrap; }
.loi { color: var(--loi); } .lo { color: var(--lo); } .vang { color: var(--vang); } .mo { color: var(--mo); }
.c-do { color: var(--lo); } .c-xd { color: var(--xd); } .c-tim { color: var(--tim); } .c-dong { color: var(--dong); }
.cot { width: 100%; max-width: 780px; margin: 0 auto; display: grid; gap: 16px; }
.cot > * { min-width: 0; }
.danh-sach { display: grid; gap: 16px; }
.danh-sach > *, .the, .tq { min-width: 0; }   /* thẻ không được nở theo bảng rộng bên trong — bảng tự cuộn ngang */
.cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body[data-khung] .tq, body[data-khung] .the:not(.dat), body[data-khung] .khung-tab { border-color: color-mix(in srgb, var(--tab) 40%, var(--vien)); }

/* ── THANH TRẠNG THÁI EA ── */
.trang-thai { padding: 8px 14px; border-radius: 10px; font-size: 12px; border: 1px solid; }
.trang-thai b { letter-spacing: .06em; margin-right: 6px; }
.trang-thai.minh-hoa { background: rgba(240,196,83,.10); border-color: rgba(240,196,83,.5); color: var(--vang); }
.trang-thai.ok { background: rgba(61,220,132,.08); border-color: rgba(61,220,132,.4); color: var(--loi); }
.trang-thai.mat { background: rgba(255,92,108,.12); border-color: rgba(255,92,108,.6); color: var(--lo); }
.loi-app { padding: 18px; border-radius: 12px; background: rgba(255,92,108,.12); border: 1px solid var(--lo); color: var(--lo); font-weight: 700; }
.loi-app small { display: block; color: var(--mo); font-weight: 500; margin-top: 4px; }

/* ── TAB KHUNG THỜI GIAN ── */
.khung-tab { display: flex; gap: 6px; padding: 6px; background: var(--the); border: 1px solid var(--vien); border-radius: 14px; }
.khung-tab button { flex: 1; min-height: 48px; border-radius: 10px; color: var(--mo); font-size: var(--cs-than); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.khung-tab button b { color: var(--tab); opacity: .8; }
.khung-tab button small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--nhat); margin-top: 1px; }
.khung-tab button.tab-dai { --tab: #4cc3ff; } .khung-tab button.tab-trung { --tab: #3ddc84; } .khung-tab button.tab-ngan { --tab: #f0c453; }
.khung-tab button.chon { background: var(--the2); box-shadow: inset 0 0 0 1px var(--tab), 0 0 18px color-mix(in srgb, var(--tab) 35%, transparent); }
.khung-tab button.chon b { opacity: 1; } .khung-tab button.chon small { color: var(--mo); }

/* ── TỔNG QUAN ── */
.tq { background: var(--the); border: 1px solid var(--vien); border-radius: 16px; padding: 16px 22px 14px; }
.tq-dau { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.logo-app { width: 40px; height: 40px; border-radius: 10px; flex: none; box-shadow: 0 0 14px rgba(240,196,83,.35); }
.tq-dau .ten-bot { font-size: var(--cs-tieude); font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.tq-dau .ten-bot b { color: var(--vang); }
.tq-dau small { font-size: 11.5px; color: var(--mo); }
.dong-het { margin-left: auto; min-height: 44px; padding: 4px 16px; border-radius: 10px; background: rgba(255,92,108,.14); border: 1px solid rgba(255,92,108,.6);
            color: var(--lo); font-weight: 800; font-size: 12px; letter-spacing: .06em; display: flex; flex-direction: column; justify-content: center; text-align: center; white-space: nowrap; }
.dong-het small { font-size: 9.5px; font-weight: 500; letter-spacing: 0; color: var(--mo); }
.dong-het.nho { font-size: 11.5px; padding: 4px 14px; }
.dong-het.xn { background: var(--lo); color: #2a0509; box-shadow: 0 0 18px rgba(255,92,108,.6); animation: nhay .5s infinite alternate; }
.dong-het.xn small { color: #4a0d14; }
@keyframes nhay { from { filter: brightness(1); } to { filter: brightness(1.25); } }
table.tk-bang { width: 100%; border-collapse: collapse; }
.tk-bang th { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--nhat); text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.tk-bang td { text-align: right; padding: 9px 8px; font-size: var(--cs-so); font-weight: 700; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.tk-bang th:first-child, .tk-bang td:first-child { text-align: left; padding-left: 0; }
.tk-bang th:last-child, .tk-bang td:last-child { padding-right: 0; }
.tk-bang tr.bam { cursor: pointer; } .tk-bang tr.bam:hover td { background: rgba(255,255,255,.03); }
.tk-bang tr.tong td { border-bottom: 0; font-size: 15px; font-weight: 800; padding-top: 11px; }
.tk-bang tr.tong td:first-child { color: var(--mo); letter-spacing: .06em; }
.tk-ten { display: flex; align-items: center; gap: 8px; }
.tk-ten b { color: var(--chu); } .tk-ten span { color: var(--nhat); font-weight: 600; }
.cham-tk { width: 8px; height: 8px; border-radius: 50%; background: var(--nhat); flex: none; }
.cham-tk.on { background: var(--loi); box-shadow: 0 0 8px var(--loi); }
.cham-tk.lo-tk { background: var(--lo); box-shadow: 0 0 8px var(--lo); }
.o-cl { display: inline-block; min-width: 30px; padding: 2px 6px; border-radius: 5px; font-size: 11px; font-weight: 800; text-align: center; color: #0b101c; }
.gap { display: block; width: 100%; text-align: left; margin-top: 10px; padding: 6px 0; font-size: 12px; color: var(--nhat); }
.gap:hover { color: var(--mo); }
.thang-tk { margin-top: 4px; } .thang-tk[hidden], .nhat-ky[hidden] { display: none; }
table.nk { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.nk th { font-size: 10px; letter-spacing: .06em; color: var(--nhat); text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--vien); white-space: nowrap; }
.nk td { padding: 5px 6px; border-bottom: 1px solid var(--vien); white-space: nowrap; }

/* ── THẺ CON LẮC ── */
.the { position: relative; background: var(--the); border: 1px solid var(--vien); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.45); overflow: hidden; }
.dai { padding: 18px 22px; border-top: 1px solid var(--vien); }
.dai:first-child { border-top: 0; }
.dau { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; flex-wrap: wrap; }
.dau-ten { min-width: 0; }
.cham { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cham.on { background: var(--loi); box-shadow: 0 0 10px var(--loi); } .cham.off { background: var(--nhat); }
.ten { font-size: var(--cs-ten); font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.cap { margin-top: 6px; font-size: 13px; color: var(--mo); display: flex; gap: 12px; flex-wrap: wrap; }
.cap span { white-space: nowrap; } .cap i { font-style: normal; font-weight: 800; margin-right: 2px; }
.cap .l { color: var(--loi); } .cap .x { color: var(--lo); }
.phai { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.chip { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 4px 14px; border-radius: 10px; border: 1px solid; white-space: nowrap; }
.chip small { font-size: 11px; color: var(--mo); } .chip b { font-size: 12.5px; letter-spacing: .06em; }
.c-nghich { background: rgba(255,92,108,.10); border-color: rgba(255,92,108,.45); } .c-nghich b { color: var(--lo); }
.c-thuan { background: rgba(61,220,132,.10); border-color: rgba(61,220,132,.45); } .c-thuan b { color: var(--loi); }
.c-mu { background: rgba(138,152,179,.08); border-color: var(--vien2); } .c-mu b { color: var(--mo); }
.cup { font-size: 18px; margin-left: 8px; vertical-align: -2px; }

/* bảng tài khoản trong thẻ */
.bang-tk { width: 100%; border-collapse: collapse; border-top: 1px solid var(--vien); background: var(--the2); }
.bang-tk th { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--nhat); text-align: right; padding: 10px 10px 6px; white-space: nowrap; }
.bang-tk td { text-align: right; padding: 7px 10px; font-size: var(--cs-so); font-weight: 700; white-space: nowrap; border-top: 1px solid var(--vien); }
.bang-tk th:first-child, .bang-tk td:first-child { text-align: left; padding-left: 22px; }
.bang-tk th.trai, .bang-tk td.trai { text-align: left; padding-left: 18px; }
.bang-tk th:last-child, .bang-tk td:last-child { padding-right: 22px; }
.bang-tk tr.tong td { font-size: 12.5px; color: var(--mo); border-top: 1px dashed var(--vien2); }
.bang-tk tr.tong td:first-child { letter-spacing: .06em; font-size: 11px; }
.bang-tk .pin { margin-top: 0; } .bang-tk .pin small { font-size: 11px; }
.bang-tk .tk-ten, .dk .bien-ten, .hang-bien .bien-ten { display: grid; grid-template-columns: 8px 34px 38px auto; column-gap: 8px; align-items: center; justify-content: start; }
.hang-bien .bien-ten { grid-template-columns: 8px 34px 38px 18px auto; }
.lot-tem { font-style: normal; font-weight: 700; color: var(--vang); padding: 1px 7px; border-radius: 5px; background: rgba(240,196,83,.12); }
.logo-san { display: inline-flex; align-items: center; gap: 5px; }
.logo-san svg { display: block; border-radius: 4px; flex: none; }
.logo-san small { font-size: 11px; font-weight: 600; color: var(--mo); }
.nut-them { display: inline-block; padding: 8px 12px; border-radius: 8px; border: 1px dashed var(--vien2); color: var(--mo); font-size: 11px; font-weight: 700; letter-spacing: .06em; }

/* ba ô số */
.so-ba { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.o-so { background: var(--the2); border: 1px solid var(--vien); border-radius: 12px; padding: 14px 16px 12px; min-height: 112px; min-width: 0; }
.o-so .gt { font-size: var(--cs-lon); font-weight: 800; line-height: 1; margin-top: 8px; white-space: nowrap; letter-spacing: -.01em; }
@media (max-width: 900px) and (min-width: 601px) { .o-so .gt { font-size: 26px; } .o-so { padding: 12px 12px 10px; } }
.o-so .phu { font-size: var(--cs-phu); color: var(--mo); margin-top: 8px; }
.pin { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.pin-than { width: 56px; height: 14px; border: 1.5px solid var(--vien2); border-radius: 4px; padding: 2px; position: relative; flex: none; }
.pin-than::after { content: ''; position: absolute; right: -5px; top: 3px; width: 3px; height: 6px; background: var(--vien2); border-radius: 0 2px 2px 0; }
.pin-than i { display: block; height: 100%; background: var(--vang); border-radius: 2px; }
.pin b { font-size: 13px; color: var(--vang); } .pin small { font-size: 11.5px; color: var(--mo); white-space: nowrap; }

/* điều khiển: mỗi tài khoản một hàng */
.dk-cum { padding-top: 12px; padding-bottom: 8px; }
.dk-tieude { display: flex; gap: 16px; padding: 0 0 8px; }
.dk-tieude .c-ten { width: 150px; } .dk-tieude .c-bat { width: 80px; } .dk-tieude .c-lenh { width: 246px; }
.dk { display: flex; align-items: center; gap: 16px; padding: 8px 0; border-top: 1px dashed var(--vien); }
.dk:nth-child(2) { border-top: 0; }
.dk .bien-ten { width: 150px; flex: none; }
.bien-ten { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.bien-ten b { color: var(--chu); } .bien-ten span { color: var(--nhat); font-weight: 600; }
.cong-tac { width: 46px; height: 26px; border-radius: 13px; position: relative; flex: none; margin-right: 34px; }
.cong-tac.on { background: var(--loi); box-shadow: 0 0 12px rgba(61,220,132,.4); }
.cong-tac.on::after { content: ''; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #06301a; }
.cong-tac.off { background: #1c2740; border: 1px solid var(--vien2); }
.cong-tac.off::after { content: ''; position: absolute; left: 3px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #55627a; }
.nhom { display: flex; border: 1px solid var(--vien2); border-radius: 10px; overflow: hidden; flex: none; }
.nut { width: 86px; min-height: 40px; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
       border-left: 1px solid var(--vien2); color: var(--mo); background: var(--the2); }
.nut:first-child { border-left: 0; }
.nut.bat-thuan { background: rgba(61,220,132,.16); color: var(--loi); }
.nut.bat-nghich { background: rgba(255,92,108,.16); color: var(--lo); }
.nut.n-dong { color: var(--lo); } .nut.tat { color: var(--nhat); }
.nut.xn { background: var(--vang); color: #1a1200; font-size: 11px; animation: nhay .5s infinite alternate; }
.tpsl { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tpsl label { display: flex; align-items: center; gap: 6px; }
.tpsl small { font-size: 11px; font-weight: 600; color: var(--mo); letter-spacing: .06em; }
.o { height: 40px; width: 64px; background: #08101d; border: 1px solid var(--vien2); border-radius: 8px; color: var(--chu); text-align: right; padding: 0 7px; font-size: 13px; font-weight: 700; font-family: inherit; -moz-appearance: textfield; }
.o::-webkit-outer-spin-button, .o::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.o.sai { border-color: var(--lo); box-shadow: 0 0 10px rgba(255,92,108,.6); }

/* thanh biên: mỗi tài khoản một hàng [tên | thanh] */
.bien-cum .bang-dau { margin-bottom: 4px; }
.hang-bien { display: grid; grid-template-columns: 178px 1fr; align-items: center; gap: 14px; padding: 40px 0 50px; border-top: 1px dashed var(--vien); }
.hang-bien:nth-child(2) { border-top: 0; }
.track { position: relative; height: 10px; border-radius: 6px; background: #08101d; border: 1px solid var(--vien); }
.fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #c99a2e, var(--vang)); box-shadow: 0 0 14px rgba(240,196,83,.35); }
.fill.dong { background: linear-gradient(90deg, #8a4f22, var(--dong)); box-shadow: 0 0 16px rgba(212,136,74,.55); }
.moc { position: absolute; top: -7px; width: 2px; height: 22px; border-radius: 1px; transform: translateX(-50%); }
.m-do { background: var(--lo); box-shadow: 0 0 8px var(--lo); } .m-xd { background: var(--xd); box-shadow: 0 0 8px var(--xd); }
.m-dong { background: var(--dong); box-shadow: 0 0 10px var(--dong); }
.lb { position: absolute; font-size: 12.5px; font-weight: 700; white-space: nowrap; transform: translateX(-50%); }
.lb.trai { transform: none; } .lb.phai { transform: translateX(-100%); }
.lb.duoi { top: 18px; font-size: 11px; font-weight: 500; color: var(--mo); }
.lb.duoi b { font-weight: 800; font-size: 12px; margin-right: 3px; }
.hien { position: absolute; top: -34px; transform: translateX(-50%); background: var(--vang); color: #0b101c; font-size: 12.5px; font-weight: 800; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.hien::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--vang); border-bottom: 0; }
.hien::before { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 12px; margin-left: -1px; background: rgba(240,196,83,.55); }
.hien.dong { background: var(--dong); } .hien.dong::after { border-top-color: var(--dong); } .hien.dong::before { background: rgba(212,136,74,.6); }

/* bảng tháng */
.bang-dau { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bang-dau small { font-size: var(--cs-phu); color: var(--mo); }
table.thang { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: separate; border-spacing: 3px 0; margin: 12px -3px 0; }
.thang th { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--nhat); text-align: center; padding: 0 0 8px; }
.thang th:first-child, .thang td:first-child { text-align: left; width: 48px; } .thang th:last-child, .thang td:last-child { width: 74px; }
.thang td { height: 42px; text-align: center; font-size: var(--cs-so); font-weight: 800; border-radius: 6px; background: var(--the2); color: var(--nhat); }
.thang td:first-child { background: transparent; color: var(--mo); font-weight: 600; font-size: 13px; }
.thang td.d { background: rgba(61,220,132,.14); color: var(--loi); } .thang td.a { background: rgba(255,92,108,.14); color: var(--lo); }
.thang td.tong { background: var(--loi); color: #06301a; } .thang td.tong.am { background: var(--lo); color: #3a0a10; }
.thang.nho td { height: 32px; font-size: 13px; }
.thang.nho th:first-child, .thang.nho td:first-child { width: 62px; white-space: nowrap; }
.thang tr.hang-tong td { border-top: 1px dashed var(--vien2); }
.thang tr.hang-tong td:first-child { font-weight: 800; color: var(--chu); letter-spacing: .06em; font-size: 11px; }

/* đạt mục tiêu tháng → tím TPBank */
.the.dat { background: #1a1233; border-color: rgba(181,124,255,.65); box-shadow: 0 0 0 1px rgba(181,124,255,.25), 0 0 40px rgba(181,124,255,.18), 0 20px 50px rgba(0,0,0,.45); }
.the.dat .dai, .the.dat .bang-tk, .the.dat .bang-tk td { border-top-color: rgba(181,124,255,.25); }
.the.dat .bang-tk { background: #150e2a; }
.the.dat .o-so, .the.dat .nut:not(.xn), .the.dat .thang td:not(.d):not(.a):not(.tong) { background: #21173f; }
.the.dat .pin-than i { background: var(--tim); } .the.dat .pin b { color: var(--tim); }

/* thông báo nhỏ dưới màn hình */
.thong-bao { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
             max-width: min(92vw, 560px); padding: 10px 16px; border-radius: 10px; background: #1b2540; border: 1px solid var(--vien2); color: var(--chu);
             font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: opacity .2s, transform .2s; z-index: 50; }
.thong-bao.hien { opacity: 1; transform: translate(-50%, 0); }
.thong-bao.loi { border-color: var(--loi); } .thong-bao.lo { border-color: var(--lo); color: #ffd3d8; } .thong-bao.mo { color: var(--mo); }

/* ── DẢI TỔNG 4 SỐ trong tổng quan ── */
.dai-tong { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 6px; }
.dai-tong > div { background: var(--the2); border: 1px solid var(--vien); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.dai-tong b { display: block; font-size: 20px; font-weight: 800; margin-top: 4px; white-space: nowrap; }
.dai-tong small { display: block; font-size: 11px; margin-top: 2px; }

/* ── LƯỚI 6 THẺ GỌN ── */
.danh-sach { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.the-gon { background: var(--the); border: 1px solid var(--vien); border-radius: 14px; padding: 14px 14px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 10px;
           box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .12s, border-color .12s; }
.the-gon:hover { transform: translateY(-2px); border-color: var(--ro); }
.the-gon:focus-visible { outline: 2px solid var(--ro); }
.the-gon.dat { background: #1a1233; border-color: rgba(181,124,255,.65); box-shadow: 0 0 0 1px rgba(181,124,255,.25), 0 0 30px rgba(181,124,255,.18); }
.tg-dau { display: flex; align-items: center; gap: 8px; }
.tg-ten { font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.tg-ten .cup { font-size: 15px; margin-left: 5px; }
.tg-vung { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; padding: 3px 8px; border-radius: 7px; border: 1px solid; white-space: nowrap; }
.tg-vung b { font-size: 11px; letter-spacing: .06em; } .tg-vung small { font-size: 10px; color: var(--mo); }
.tg-cap { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: var(--mo); }
.tg-cap i { font-style: normal; font-weight: 800; margin-right: 1px; } .tg-cap .l { color: var(--loi); } .tg-cap .x { color: var(--lo); }
.tg-so { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); gap: 8px; }
@media (max-width: 700px) { .tg-so b { font-size: 15px; } .tg-so > div { padding: 7px 8px; } }
.tg-so > div { background: var(--the2); border: 1px solid var(--vien); border-radius: 9px; padding: 8px 10px; min-width: 0; }
.tg-so b { display: block; font-size: 17px; font-weight: 800; margin-top: 3px; white-space: nowrap; }
.tg-so .pin { margin-top: 5px; gap: 6px; } .tg-so .pin-than { width: 40px; height: 11px; } .tg-so .pin b { font-size: 11px; margin: 0; display: inline; } .tg-so .pin small { font-size: 10px; }
.the-gon.dat .tg-so > div, .the-gon.dat .nut { background: #21173f; }
.the-gon.dat .pin-than i { background: var(--tim); } .the-gon.dat .pin b { color: var(--tim); }
.tg-tk { display: flex; flex-direction: column; gap: 6px; }
.tg-hang { display: flex; align-items: center; gap: 8px; }
.tg-hang .bien-ten { display: grid; grid-template-columns: 8px 34px auto 1fr; column-gap: 6px; flex: 1; min-width: 0; font-size: 12.5px; }
.tg-hang .bien-ten span { text-align: right; font-weight: 700; }
.tg-hang .nhom { flex: none; }
.tg-hang .nut { width: 62px; min-height: 36px; font-size: 11px; letter-spacing: .03em; }
.tg-hang .nut.xn { font-size: 9.5px; }
.tg-chan { font-size: 10.5px; color: var(--nhat); text-align: center; padding-top: 4px; border-top: 1px dashed var(--vien); }

/* ── CHI TIẾT: nền mờ + tấm trượt (điện thoại từ dưới lên, máy tính hộp giữa màn) ── */
.tam { position: fixed; inset: 0; z-index: 40; background: rgba(4,8,18,.72); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 12px; }
.tam[hidden] { display: none; }
body.co-tam { overflow: hidden; }
.chi-tiet { max-width: 780px; margin: 0 auto; animation: len .22s ease-out; }
@keyframes len { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ct-dau { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; position: sticky; top: -24px; z-index: 2; background: linear-gradient(rgba(4,8,18,.95), rgba(4,8,18,.6)); margin-top: -24px; padding-top: 24px; }
.ct-dau b { font-size: 15px; letter-spacing: .04em; }
.ct-dong { min-height: 40px; padding: 0 16px; border-radius: 10px; background: var(--the); border: 1px solid var(--vien2); color: var(--chu); font-weight: 700; }
.chi-tiet .the { box-shadow: none; }

/* bảng tháng gọn trên điện thoại: ô sát nhau, không khe */
.thang.gon { min-width: 0; border-spacing: 2px 0; margin: 10px -2px 0; }
.thang.gon th { font-size: 10px; padding-bottom: 5px; }
.thang.gon td { height: 34px; font-size: 12.5px; border-radius: 4px; }
.thang.gon th:first-child, .thang.gon td:first-child { width: 26px; font-size: 11px; } .thang.gon th:last-child, .thang.gon td:last-child { width: 54px; }
.thang.gon.nho td { height: 30px; font-size: 12px; }

/* nút "có bản mới" — chỉ hiện khi app đang bận (chờ xác nhận / đang gõ), lúc rảnh tự tải lại */
.ban-moi { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; padding: 10px 18px; border-radius: 10px;
           background: var(--xd); color: #06202e; font-weight: 800; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.ban-moi[hidden] { display: none; }

/* ── MÁY TÍNH (≥ 1100px): 3 cột thẻ = 6 con lắc trong một màn ── */
@media (min-width: 1100px) { .cot { max-width: 1240px; } }
/* ── iPad / cửa sổ vừa (701–1099px): 2 cột ── */
@media (max-width: 1099px) { .danh-sach { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ── điện thoại (≤ 700px): 1 cột ── */
@media (max-width: 700px) { .danh-sach { grid-template-columns: 1fr; } }

/* ── iPad dọc / cửa sổ hẹp (≤ 820px): hàng LOT·TP·SL xuống dòng riêng ── */
@media (max-width: 820px) {
  .dk { flex-wrap: wrap; row-gap: 10px; }
  .dk .tpsl { margin-left: 0; width: 100%; padding-left: 0; }
  .dk-tieude .c-tham { display: none; }
}

/* ── ĐIỆN THOẠI (≤ 600px): xếp dọc, nút to đủ ngón tay, bảng rộng cuộn ngang ── */
@media (max-width: 600px) {
  body { padding: 12px 10px 70px; font-size: 13px; }
  .cot { gap: 12px; }
  .khung-tab button { font-size: 11.5px; letter-spacing: .03em; }
  .khung-tab button small { display: none; }
  .tq { padding: 14px 14px 12px; }
  .tq-dau .ten-bot { font-size: 16px; }
  .tq-dau .dong-het { width: 100%; margin-left: 0; }
  .dai-tong { grid-template-columns: 1fr 1fr; gap: 8px; } .dai-tong b { font-size: 17px; }
  .tam { padding: 12px 8px 40px; }
  .ct-dau { top: -12px; margin-top: -12px; padding-top: 12px; }
  .tg-hang .nut { width: 58px; min-height: 40px; }
  .an-dt { display: none !important; }
  .tk-bang td { font-size: 13px; padding: 9px 5px; } .tk-bang th { padding: 6px 5px; }
  .dai { padding: 14px 14px; }
  .dau .phai { margin-left: 0; width: 100%; justify-content: space-between; }
  .dau .phai { flex-wrap: wrap; } .dau .chip { flex: 1 1 100%; } .dau .dong-het.nho { flex: 1 1 100%; }
  .lb.duoi.trai.c-dong { white-space: normal; max-width: 100%; line-height: 1.3; }
  .ten { font-size: 20px; }
  .bang-tk th:first-child, .bang-tk td:first-child { padding-left: 14px; } .bang-tk th:last-child, .bang-tk td:last-child { padding-right: 14px; }
  .bang-tk td { padding: 7px 6px; font-size: 12.5px; } .bang-tk th { padding: 10px 6px 6px; }
  .bang-tk .tk-ten { grid-template-columns: 8px 34px 38px auto; }
  .bang-tk .logo-san small { display: none; }
  .bang-tk .pin-than { width: 40px; } .bang-tk .pin small { display: none; }
  .so-ba { grid-template-columns: 1fr; gap: 10px; }
  .o-so { min-height: 0; }
  .o-so .gt { font-size: 30px; }
  .dk-tieude { display: none; }
  .dk { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding: 12px 0; }
  .dk .bien-ten { width: auto; }
  .dk .cong-tac { margin-right: 0; }
  .dk .nhom { grid-column: 1 / -1; width: 100%; }
  .dk .nut { flex: 1; width: auto; min-height: 44px; }
  .dk .tpsl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .dk .tpsl label { display: grid; grid-template-columns: 30px 1fr; }
  .dk .tpsl .o { width: 100%; }
  .hang-bien { grid-template-columns: 1fr; gap: 26px; padding: 14px 0 46px; }
  .hang-bien .bien-ten { grid-template-columns: 8px 34px 38px 18px auto; }
  .hien { font-size: 11.5px; padding: 2px 7px; }
  .lb.duoi { font-size: 10px; } .lb.duoi b { font-size: 11px; }
  .thang td { height: 36px; font-size: 14px; }
}