/* ============================================================================================
v27 - giao dien bo trang «Bảng tính» (`bangtinh.xemphim24h.com`). Nap o CA HAI ten mien
(index.html dung chung) nen MOI bo chon o day deu bat dau bang `.bt-` hoac `.app-switch`:
khong duoc lam xe dich mot pixel nao cua bo trang `spy.` dang chay that.
BA viec tep nay phai bao dam, deu la loi da do duoc bang so o ban truoc:
- Dai 4 so to nam o DAU trang va KHONG bao gio phai cuon moi thay (v23b B1: man hinh 1366px cat mat
cot «Lời/Lỗ» -> giam doc chua tung nhin thay con so minh dat hang).
- Bang tu cuon TRONG KHUNG cua no (`max-height`), khong lam ca trang dai ra; hang tieu de dinh lai
(v23b B3: `.tbl-wrap` cao bang noi dung nen `position: sticky` cua thead vo hieu).
- Mau chu «lãi» che do SANG phai dung bien rieng `--bt-lai`: `--ok` (#1f845a) tren nen o tinh ra chi
dat 4,15:1, duoi chuan 4,5:1 (v23b B20 da do).
============================================================================================ */
:root {
/* xanh «lãi» dam hon --ok de du tuong phan tren nen o tinh ra o che do SANG (v23b B20) */
--bt-lai: #156242;
--bt-cho: #7f5f01; /* ⚠ cho gia NCC - vang dam, doc duoc tren nen trang */
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --bt-lai: var(--ok); --bt-cho: var(--warn); }
}
:root[data-theme="dark"] { --bt-lai: var(--ok); --bt-cho: var(--warn); }
.bt-page { max-width: 1280px; margin: 0 auto; }
.bt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ---------- thanh ngay ---------- */
.bt-bar { margin-bottom: 10px; }
/* 13px o man hinh rong cho vua thanh ngay; o <= 860px khoi @media ben duoi nang len 16px, neu khong iPhone
tu phong to CA TRANG khi bam vao o ngay (do duoc: o nhap DUY NHAT con duoi 16px tren ca trang - muc [14]). */
.bt-bar .daynav input[type="date"] { margin: 0; width: auto; font-size: 13px; padding: 5px 8px; }
.bt-day-label { font-size: 16px; color: var(--ink-strong); min-width: 7.5em; text-align: center; }
/* ---------- dai 4 so: thu duy nhat giam doc mo trang ra la thay ---------- */
/* `sticky` duoi thanh tren (48px): bang dai bao nhieu thi cuon xuong van con thay bon so.
z-index 20 = duoi thanh tren (30) va duoi thanh «co ban moi» (29) de hai thanh do khong bi che. */
.bt-strip {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
position: sticky; top: 48px; z-index: 20; padding: 8px 0 10px; margin: -8px 0 6px; background: var(--bg);
}
.bt-num {
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 10px 14px; min-width: 0;
}
/* `:first-child` chu khong `> span`: o so cung la mot , dinh ca kieu chu nhan vao no la
so bi gian chu va viet HOA (chu so khong hoa duoc nhung khoang cach thi van sai). */
.bt-num > span:first-child { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.bt-num .bt-calc {
display: block; font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--ink-strong);
font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.bt-num.big { background: linear-gradient(var(--subtle), var(--subtle)), var(--panel); }
.bt-num.big .bt-calc { font-size: 30px; }
.bt-num .bt-calc.lai { color: var(--bt-lai); }
.bt-num .bt-calc.lo { color: var(--danger); }
/* Dong chu canh bao NGAY DUOI dai 4 so. Phai o day chu khong trong mot o cua mot dong giua bang:
«⚠ chờ giá NCC» o muc DONG thi bang 40 dong la no nam ngoai man hinh, trong khi chinh no lam «Lãi gộp»
va «◆ LỜI / LỖ ◆» bo dong do ra khoi tong (do duoc: lech 1.136,00$/ngay va DOI DAU). `:empty` -> an han,
de khong chiem cho khi khong co gi phai noi. */
.bt-canh-dai {
margin: -2px 0 10px; padding: 7px 10px; border-left: 4px solid var(--warn);
background: var(--warn-soft); color: var(--ink-strong); border-radius: var(--radius-sm);
font-size: 12px; font-weight: 600; line-height: 1.45;
}
.bt-canh-dai:empty { display: none; }
/* ---------- khoi A / B / C ---------- */
.bt-sec { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; margin-bottom: 14px; }
.bt-sec > .box-head h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
/* Khung cuon RIENG cho bang: trang khong dai ra -> dai 4 so o tren van nam trong man hinh (v23b B1 + B3).
Bo padding ngang cua .tbl-wrap vi o day bang nam trong the da co padding (v23b B7: dai 16px ben trai
de chu cot khac chay xuyen qua cot ghim). */
.bt-wrap { overflow: auto; max-height: calc(100vh - 330px); min-height: 92px; margin: 0; padding: 0; }
.bt-tbl { width: 100%; font-size: 13px; }
.bt-tbl th { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.bt-tbl td { vertical-align: middle; }
.bt-tbl tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--panel-2); font-weight: 700; }
.bt-tbl .bt-mt, .bt-tbl .bt-act { text-align: center; width: 44px; }
.bt-tbl td.bt-act { padding: 2px; }
.bt-tbl .bt-pic { width: 52px; }
.bt-tbl .bt-pic .mini-img { width: 44px; height: 32px; object-fit: cover; border-radius: 5px; background: var(--panel-2); }
/* O ten: nut «⋯» phai bam duoc o MOI dong, ke ca ten rat dai (v23b B8: ten dai day nut ra ngoai o).
CHU Y: khung flex phai la mot the BEN TRONG o, KHONG duoc dat `display: flex` thang vao | -
lam vay la | thoi lam o cua bang, hai o canh nhau bi gom vao MOT o an danh va ca than bang
lech mot cot so voi hang tieu de (da do duoc tren anh chup). */
.bt-ten { max-width: 320px; }
.bt-flex { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bt-ten-chu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-ten .muted, .bt-ten .badge, .bt-goi-o .btn, .bt-goi-o b, .bt-goi-o .muted { flex: none; }
.bt-ten .bt-more { flex: none; color: var(--ink-soft); }
.bt-sku-tbl tr.bt-goi .bt-ten { padding-left: 18px; }
.bt-sku-tbl tr.bt-goi .bt-ten-chu::before { content: "↳ "; color: var(--ink-faint); }
/* ---------- o nhap trong bang ---------- */
.bt-in-wrap { display: flex; align-items: center; gap: 4px; }
.bt-tbl .bt-in, .bt-ds .bt-in {
margin: 0; padding: 5px 7px; font-size: 14px; min-width: 0; width: 100%;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.bt-in.num { text-align: right; font-variant-numeric: tabular-nums; }
/* o so khong can rong ca cot: thua cho thi nhuong cho cot «Sản phẩm» (ten dai doc duoc nhieu hon),
nhung phai du rong cho «3.300,00» o co chu 16px cua dien thoai, neu khong so bi cat mat chu so dau. */
.bt-tbl td.num .bt-in-wrap { justify-content: flex-end; }
.bt-tbl td.num .bt-in { max-width: 132px; min-width: 78px; }
.bt-in[readonly] { background: var(--subtle); color: var(--ink-soft); border-style: dashed; }
.bt-in.vua-luu { border-color: var(--ok); }
.bt-in.loi { border-color: var(--danger); background: var(--danger-soft); }
/* Canh bao la MOT DONG CHU duoi o, khong phai mot dau ⚠ chi co tooltip (muc [9]): dien thoai khong co chuot
nen tooltip khong bao gio hien ra, va dau ⚠ cu con bi CAT ra ngoai khung bang (do duoc x=369..380 trong khi
khung chi den x=365). Chu xuong dong binh thuong, co nho de khong lam cot tien phinh ra. */
.bt-warn {
display: block; font-style: normal; color: var(--warn); font-size: 11px; font-weight: 600;
line-height: 1.35; margin-top: 3px; white-space: normal; text-align: left; max-width: 190px;
}
.bt-tbl td.num .bt-warn { margin-left: auto; }
/* o chon san pham cua dong ads: khong de no an ca cot (mac dinh `select { width: 100% }`) */
.bt-sel select { margin: 0; padding: 5px 7px; max-width: 260px; font-size: 14px; }
.bt-warn-line { margin-top: 8px; color: var(--warn); font-size: 12px; font-weight: 600; }
/* ---------- o TINH RA: khong go vao duoc, nguon trong thi de RONG (khong «0,00») ---------- */
.bt-tbl td.calc { background: var(--subtle); }
.bt-tbl td.calc .bt-calc { font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.bt-calc.lai { color: var(--bt-lai); }
.bt-calc.lo { color: var(--danger); }
.bt-calc.cho { color: var(--bt-cho); font-weight: 700; white-space: nowrap; }
/* PHAI nang do uu tien len cho bang: `.bt-tbl td.calc .bt-calc` la 3 lop, de nguyen thi `.bt-calc.lo` (2 lop)
THUA va o dang LO khong bao gio do that - dung loi v23b D5 (bai e2e cu chi kiem "co class" nen xanh oan
suot mot ban). Trong bang chi to mau khi LO / cho gia NCC: to ca so lai thi ca bang xanh, khong con noi bat.
So TONG va dai 4 so o tren van xanh (chung khong nam trong `td.calc`). */
.bt-tbl td.calc .bt-calc.lo { color: var(--danger); }
.bt-tbl td.calc .bt-calc.cho { color: var(--bt-cho); }
/* O tinh ra dang de TRONG thi khong duoc chiem cho (o «⚠ N dòng chờ giá NCC» o dong Tong chi hien khi co). */
.bt-tbl tfoot .bt-calc.cho { color: var(--bt-cho); font-size: 11px; white-space: normal; }
/* Dong «+ Tiền ship khách trả»: la dong tong nhung la so PHU, khong dam bang dong Tong chinh. */
.bt-tbl tfoot tr.bt-phu td { font-weight: 600; color: var(--ink-soft); }
.bt-tbl tfoot tr.bt-phu .bt-calc { color: var(--ink-strong); }
/* ---------- C. doi soat ---------- */
.bt-ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; }
.bt-ds-o { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.bt-ds-o .bt-in-wrap { margin-top: 5px; }
.bt-ds-line { margin-top: 12px; padding: 10px 0 0 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); line-height: 1.9; border-left: 4px solid transparent; }
/* Bac doi soat to mau CA DONG chu khong chi cai huy hieu: VANG/DO phai thay duoc tu xa, nhung van la
canh bao - §6c viet hoa «TUYỆT ĐỐI không chặn dải KPI», nen khong he an mot con so nao. */
.bt-ds-line.xanh { border-left-color: var(--ok); }
.bt-ds-line.vang { border-left-color: var(--warn); background: var(--warn-soft); }
.bt-ds-line.do { border-left-color: var(--danger); background: var(--danger-soft); }
.bt-ds-line b { color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.bt-bac { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.bt-bac.xanh { background: var(--ok-soft); color: var(--bt-lai); }
.bt-bac.vang { background: var(--warn-soft); color: var(--warn); }
.bt-bac.do { background: var(--danger-soft); color: var(--danger); }
/* ---------- 7 ngay gan nhat ---------- */
.bt-tuan { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.bt-tuan-o {
flex: none; min-width: 84px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--panel); color: var(--ink-soft); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; text-align: left;
}
.bt-tuan-o b { display: block; font-size: 13px; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.bt-tuan-o.on { border-color: var(--accent); background: var(--accent-soft); }
.bt-tuan-o.lai b { color: var(--bt-lai); }
.bt-tuan-o.lo b { color: var(--danger); }
/* ---------- cho dinh gia ---------- */
.bt-cho { display: grid; gap: 6px; }
.bt-cho-o { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--subtle); }
.bt-cho-o .mini-img { width: 44px; height: 32px; object-fit: cover; border-radius: 5px; background: var(--panel-2); flex: none; }
.bt-cho-ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.bt-cho-o .btn { flex: none; }
/* ---------- hop chon san pham / xem truoc goi ---------- */
.bt-pick { display: grid; gap: 4px; max-height: 46vh; overflow-y: auto; margin-top: 8px; }
.bt-pick-o {
display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-sm);
background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.bt-pick-o:hover { background: var(--subtle-2); }
.bt-pick-ten { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-pick-gia { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.bt-xem-truoc { margin-top: 14px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--subtle); font-size: 13px; }
.bt-xem-truoc > div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; color: var(--ink-soft); }
.bt-xem-truoc b { color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.bt-xem-truoc b.cho { color: var(--bt-cho); }
/* ---------- trang «Cài đặt bảng tính» (#/bt-cai-dat) ---------- */
/* Sau con so tien cua §5. Moi o co mot cau «lấy số ở đâu» ngay duoi - day la cho giam doc hay doan nhat. */
.bt-cd-o { display: block; margin: 0 0 14px; font-size: 13px; font-weight: 600; }
.bt-cd-o .bt-in-wrap { margin-top: 5px; gap: 8px; }
.bt-cd-o .bt-in {
margin: 0; padding: 6px 8px; font-size: 14px; max-width: 160px; text-align: right;
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
font-variant-numeric: tabular-nums;
}
.bt-cd-o .field-hint { display: block; margin-top: 4px; font-weight: 400; }
.bt-cd-o .bt-warn { max-width: 420px; }
/* ---------- nut chuyen qua ten mien ben kia (co o CA HAI bo trang) ---------- */
.app-switch { text-decoration: none; flex: none; }
.app-switch:hover { border-color: var(--accent); color: var(--ink-strong); }
/* ---------- dien thoai ---------- */
@media (max-width: 860px) {
/* iOS tu phong to ca trang khi o nhap duoi 16px -> moi o nhap cua bang tinh phai >= 16px.
O chon ngay nam trong danh sach nay tu v27 vong sua loi (muc [14]): no la o DUY NHAT con 13px. */
.bt-tbl .bt-in, .bt-ds .bt-in, .bt-sel select, .bt-xem-truoc, .bt-pick-o,
.bt-bar .daynav input[type="date"], .bt-cd-o .bt-in { font-size: 16px; }
/* Vung cham 40px (chuan khuyen nghi 44px) - muc [12]. Do duoc o 390px: hai nut doi ngay `‹ ›` chi
24x27px ma do la cach doi ngay CHINH tren dien thoai; cac nut «Hôm nay» / «Chép từ hôm qua» /
«Chốt sổ ngày này» 27px cao. Chi nang trong pham vi `.bt-*`, khong cham nut nao cua web spy. */
.bt-bar .daynav .btn, .bt-sec .box-head .btn, .bt-tbl .btn, .bt-cho-o .btn { min-height: 40px; }
.bt-bar .daynav .btn.small[data-act="prev"], .bt-bar .daynav .btn.small[data-act="next"] { min-width: 40px; }
/* O tich «Mua thêm»: 13x13px va nam ngay canh nut «×» xoa dong - cham nham la dong do roi khoi so don,
ship + phi cong co dinh tinh lai ca ngay. Nay o tich 20px, vung cham 40px, va tach xa nut xoa. */
.bt-tbl .bt-mt { width: 60px; }
.bt-tbl .bt-mt-lab { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
.bt-tbl .bt-mt input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
.bt-tbl td.bt-act { padding-left: 10px; }
.bt-tbl .bt-act .icon-btn { min-width: 40px; min-height: 40px; }
}
@media (max-width: 640px) {
/* GHIM cot «Sản phẩm» khi phai cuon ngang (muc [10]): bang rong 805px trong khung 340px nen luc bam vao o
«Giá/gói» trinh duyet cuon theo va ten san pham cua chinh dong do ra khoi man hinh (do duoc x = -35..23)
- go tien vao mot dong ma khong thay dang go cho san pham nao la cho de nham nhat.
Nen phai DUC (v23b B7: o ghim trong suot thi chu cot khac chay xuyen qua), va o cua thead/tfoot phai co
z-index cao hon vi chung ghim theo CA HAI chieu. */
.bt-tbl .bt-ten { position: sticky; left: 0; z-index: 3; background: var(--panel); }
.bt-tbl thead th.bt-ten { z-index: 4; }
.bt-tbl tfoot td.bt-ten { z-index: 4; background: var(--panel-2); }
/* Cot «Ảnh» an di de nhuong 52px cho ten (v23b D3 da chot huong nay: giu nhieu cot ghim o man hinh hep
thi vung ghim an mat 2/3 man hinh). */
.bt-tbl .bt-pic { display: none; }
/* <= 640px thanh tren XUONG DONG (nav chiem ca hang) nen khong con biet `top` bao nhieu -> bo sticky,
de dai so nam o dau trang nhu thuong. Trang dien thoai ngan, cuon mot cai la len lai dau trang. */
.bt-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; position: static; padding: 0; margin: 0 0 10px; }
.bt-num { padding: 8px 10px; }
.bt-num .bt-calc { font-size: 22px; }
.bt-num.big .bt-calc { font-size: 24px; }
.bt-sec { padding: 10px 8px; }
/* khong de bang keo ca trang rong ra: khung tu cuon ngang trong long the */
.bt-wrap { max-height: 58vh; }
.bt-tbl { min-width: 620px; }
.bt-sku-tbl { min-width: 700px; }
.bt-tbl td.num .bt-in { min-width: 96px; }
.bt-ten { max-width: 190px; min-width: 124px; }
.bt-day-label { font-size: 14px; min-width: 0; }
.bt-ds { grid-template-columns: 1fr; }
}
|