:root {
  --navy: #0b2a4f; --navy-2: #12406f; --xanh: #1e7fd0; --xanh-nhat: #e6f1fb; --vang: #f5b800;
  --nen: #eef2f7; --the: #ffffff; --chu: #14202e; --mo: #5d6b7c; --vien: #dfe5ec;
  --do: #c62828; --do-nhat: #fdecea; --la: #1f8a4c; --la-nhat: #e5f5ec; --cam: #d35400; --cam-nhat: #fff2e5;
  --bong: 0 1px 2px rgba(11, 42, 79, .06), 0 4px 14px rgba(11, 42, 79, .06);
  --bo: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--nen); color: var(--chu);
       padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
a { color: var(--xanh); }
.dau { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; display: flex; justify-content: space-between;
       align-items: center; padding: 12px 16px; position: sticky; top: 0; z-index: 5; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.dau a { color: #fff; } .dau .ve { font-weight: 800; letter-spacing: .2px; text-decoration: none; }
.dau .ve::before { content: "▣ "; color: var(--vang); }
.dau .ai { font-size: 13px; opacity: .85; }
main { max-width: 640px; margin: 0 auto; padding: 4px 16px 16px; }
h1 { font-size: 24px; margin: 16px 0 2px; letter-spacing: -.3px; }
h2 { font-size: 17px; margin: 24px 0 10px; display: flex; align-items: baseline; gap: 8px; }
small { display: block; color: var(--mo); font-size: 13px; font-weight: normal; }
.phu { color: var(--mo); font-size: 14px; }
.ngay-nay { margin: 0 0 12px; }

.the { background: var(--the); border-radius: var(--bo); padding: 16px; margin: 10px 0; box-shadow: var(--bong); }
label { display: block; margin: 0 0 14px; font-weight: 600; font-size: 14px; color: #33414f; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; font-size: 16px;
       border: 1.5px solid var(--vien); border-radius: 12px; background: #fbfcfe; min-height: 48px; color: var(--chu); }
input[type=checkbox], input[type=radio] { display: inline; width: 22px; height: 22px; min-height: 0; margin: 0 8px 0 0;
       vertical-align: middle; accent-color: var(--xanh); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--xanh); background: #fff; box-shadow: 0 0 0 4px #1e7fd022; }
input:disabled { opacity: .6; }
label.chon { font-weight: 500; }
details summary { cursor: pointer; padding: 8px 0; color: var(--xanh); font-weight: 600; list-style: none; }
details summary::before { content: "＋ "; } details[open] > summary::before { content: "－ "; }
details.khach-moi { margin: -4px 0 10px; }
fieldset.tra { border: 0; background: #f6f8fb; border-radius: 12px; margin: 0 0 14px; padding: 10px 12px; }
fieldset.tra legend { font-weight: 700; font-size: 14px; padding: 0; float: left; width: 100%; margin-bottom: 6px; }
fieldset.tra > label { display: inline-flex; align-items: center; margin: 4px 14px 8px 0; font-weight: 500; }

.chip-chon { display: flex; gap: 8px; margin: 8px 0 14px; }
.chip-chon label { margin: 0; flex: 1; }
.chip-chon input { position: absolute; opacity: 0; }
.chip-chon span { display: block; text-align: center; padding: 10px; border-radius: 12px; border: 1.5px solid var(--vien); background: #fff; font-weight: 600; }
.chip-chon input:checked + span { border-color: var(--xanh); background: var(--xanh-nhat); color: var(--navy); }

.nut { display: inline-block; padding: 10px 16px; border-radius: 12px; border: 1.5px solid var(--vien); background: #fff; color: var(--navy);
       font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; margin: 2px 0; transition: transform .08s; }
.nut:active { transform: scale(.97); }
.nut.chinh { display: block; width: 100%; background: var(--vang); border-color: var(--vang); color: var(--navy); font-size: 18px; padding: 15px;
             box-shadow: 0 4px 14px rgba(245, 184, 0, .35); }
.nut.chinh:disabled { opacity: .6; }
.nut.nho { padding: 7px 12px; font-size: 14px; }
.nut.zalo { background: #0068ff; border-color: #0068ff; color: #fff; }
.nut.do { background: var(--do); border-color: var(--do); color: #fff; }
.nut-to { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin: 16px 0; }
.nut-to .nut { text-align: center; font-size: 15px; padding: 16px 6px 14px; color: #fff; border: 0; border-radius: var(--bo); box-shadow: var(--bong); margin: 0; }
.nut-to .nut span { display: block; font-size: 30px; line-height: 1.2; margin-bottom: 4px; }
.nut-to .xuat { background: linear-gradient(135deg, #1e7fd0, #3b97e3); }
.nut-to .nhap { background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.nut-to .thu { background: linear-gradient(135deg, #1f8a4c, #2ea563); }

/* Con số chính (lợi nhuận) */
.anh-hung { display: block; text-decoration: none; color: #fff; border-radius: 20px; padding: 18px 20px; margin: 10px 0;
            background: linear-gradient(135deg, #1f8a4c, #26a35c); box-shadow: 0 8px 24px rgba(31, 138, 76, .28); }
.anh-hung.lo { background: linear-gradient(135deg, #b42318, #d1432f); box-shadow: 0 8px 24px rgba(180, 35, 24, .28); }
.anh-hung span { font-size: 14px; opacity: .9; } .anh-hung b { display: block; font-size: 34px; letter-spacing: -.5px; line-height: 1.2; margin: 2px 0; }
.anh-hung small { color: #fff; opacity: .85; }
.o-so { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.o-so.mot { grid-template-columns: 1fr; }
.o-so > * { background: var(--the); border-radius: var(--bo); padding: 12px 14px; text-decoration: none; color: var(--mo); box-shadow: var(--bong);
            font-size: 13px; border-left: 4px solid var(--xanh); }
.o-so b { display: block; color: var(--navy); font-size: 19px; margin-top: 2px; word-break: break-word; }
.o-so .canh { border-left-color: var(--cam); } .o-so .canh b { color: var(--cam); }
.bao-thang { display: flex; justify-content: space-between; gap: 8px; align-items: center; background: var(--xanh-nhat); color: var(--navy);
             padding: 12px 14px; border-radius: 14px; text-decoration: none; margin: 8px 0; font-size: 14px; }

.bao { padding: 12px 14px; border-radius: 12px; background: var(--xanh-nhat); margin: 10px 0; }
.bao.ok { background: var(--la-nhat); color: #145c33; } .bao.loi { background: var(--do-nhat); color: var(--do); font-weight: 600; }
.bao.canh { background: var(--cam-nhat); color: #7a3300; } .bao ul { margin: 6px 0; padding-left: 20px; }

/* Thanh ngang: tồn kho, lợi nhuận, chi phí */
.dong-thanh { padding: 8px 0; } .dong-thanh + .dong-thanh { border-top: 1px solid #eef1f5; }
.dong-thanh .nhan { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.dong-thanh .nhan b { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.thanh { display: block; height: 10px; background: #eef1f5; border-radius: 6px; overflow: hidden; }
.thanh i { display: block; height: 100%; background: var(--xanh); border-radius: 0 4px 4px 0; }
.thanh.nhat i { background: #8fb9e3; } .thanh.dam i { background: var(--la); } .thanh.lo i { background: var(--do); }
.dong-thanh.it .nhan span { color: var(--cam); }
.tong-ton { display: inline; font-size: 14px; }

/* Cột lợi nhuận 6 tháng */
.cot-bieu { display: flex; gap: 8px; align-items: flex-end; height: 150px; padding: 4px 0 0; border-bottom: 1px solid var(--vien); margin-bottom: 12px; }
.cot { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; text-decoration: none; }
.cot .vung { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.cot i { display: block; width: 70%; max-width: 40px; min-height: 2px; background: #8fb9e3; border-radius: 4px 4px 0 0; }
.cot.dang i { background: var(--xanh); } .cot.am i { background: var(--do); }
.cot small { margin-top: 4px; } .cot.dang small { color: var(--navy); font-weight: 700; }
.chon-thang { display: flex; justify-content: space-between; align-items: center; background: var(--the); border-radius: 14px; padding: 6px;
              box-shadow: var(--bong); margin: 8px 0; }
.chon-thang a, .chon-thang span { width: 44px; height: 40px; display: grid; place-items: center; font-size: 26px; text-decoration: none; border-radius: 10px; }
.chon-thang a:active { background: var(--xanh-nhat); }

.bang { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; margin: 6px 0; }
.bang th, .bang td { padding: 10px 8px; border-bottom: 1px solid #eef1f5; text-align: left; vertical-align: middle; }
.bang th { background: #f4f7fa; font-size: 13px; color: var(--mo); font-weight: 600; }
.bang .so, .so { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bang tr.it td { background: var(--cam-nhat); } .bang tr.huy td { color: #9aa5b1; text-decoration: line-through; }
.bang tr.cong td { font-weight: 700; } .bang.gon td, .bang.gon th { padding: 7px 8px; font-size: 14px; }
.nhap-hang td:first-child { width: 34%; } .nhap-hang td, .nhap-hang th { padding-left: 4px; padding-right: 4px; }
.nhap-hang input { margin: 0; text-align: right; padding: 10px 6px; }
.danh-muc td:first-child { width: 58%; } .danh-muc td:first-child input { text-align: left; }
.hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.so-nhap .cot-tien { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.so-nhap .cot-tien span { background: #f4f7fa; border-radius: 10px; padding: 6px 8px; font-size: 12px; color: var(--mo); }
.so-nhap .cot-tien b { display: block; font-size: 14px; color: var(--navy); }
.so-nhap .cot-tien .vc { background: var(--cam-nhat); } .so-nhap .cot-tien .vc b { color: var(--cam); }
.so-nhap .cong-thang { background: var(--xanh-nhat); }
.tong { font-size: 18px; text-align: right; margin: 10px 0 14px; }
.tong b { color: var(--navy); font-size: 22px; }

.tim { display: flex; gap: 8px; } .tim input { margin: 0; } .tim .nut { margin: 0; }
.ds-khach { list-style: none; padding: 0; margin: 8px 0; }
.ds-khach li { background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--bong);
               display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; }
.ds-khach li.huy { opacity: .55; }
.ds-khach li > a, .ds-khach li > div:first-child { text-decoration: none; color: var(--chu); flex: 1; min-width: 0; }
.ds-khach .do, .do { color: var(--do); font-weight: 700; }
.ds-khach .hanh-dong { width: 100%; }
.dong-thoi-gian { list-style: none; padding: 0; }
.dong-thoi-gian li { background: #fff; border-left: 4px solid var(--xanh); padding: 10px 14px; margin-bottom: 8px; border-radius: 0 12px 12px 0; box-shadow: var(--bong); }
.dong-thoi-gian li.huy { opacity: .55; border-color: #9aa5b1; }
.loc { font-size: 14px; }
.nv .nv-dau { display: flex; justify-content: space-between; align-items: baseline; }
.nv .nv-so { margin: 6px 0 2px; } .nv .nv-so span { font-size: 13px; color: var(--mo); } .nv .nv-so b { display: block; font-size: 26px; color: var(--navy); }
.nv.co-tien { border-left: 5px solid var(--cam); } .nv.co-tien .nv-so b { color: var(--cam); }

.duoi { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
        border-top: 1px solid var(--vien); display: flex; z-index: 5; padding: 4px 4px env(safe-area-inset-bottom); }
.duoi a { flex: 1; text-align: center; font-size: 11px; color: var(--mo); text-decoration: none; padding: 6px 0 8px; border-radius: 12px; }
.duoi a span { display: block; font-size: 22px; line-height: 1.2; }
.duoi a.dang { color: var(--navy); font-weight: 700; background: var(--xanh-nhat); }
.xem-phieu img { width: 100%; border-radius: 12px; box-shadow: var(--bong); margin-top: 8px; }
.gui-phieu h2 { margin-top: 0; }
.nut-phu { display: flex; gap: 8px; flex-wrap: wrap; margin: -6px 0 12px; } .nut-phu .nut { flex: 1; text-align: center; font-size: 14px; }
.kiem-ke td:first-child { width: 36%; } .kiem-ke .chenh { font-weight: 700; }
/* Biểu đồ lợi nhuận từng ngày: cột xanh lên (lãi), cột đỏ xuống (lỗ), đường 0 ở giữa */
.bieu-ngay { height: 170px; display: flex; flex-direction: column; }
.bieu-ngay .vung-tren, .bieu-ngay .vung-duoi { display: flex; gap: 2px; min-height: 0; }
.bieu-ngay .vung-tren { align-items: flex-end; border-bottom: 1.5px solid #9aa5b1; }
.bieu-ngay .vung-duoi { align-items: flex-start; }
.bieu-ngay .cot-ngay { flex: 1; height: 100%; display: flex; padding: 0; border: 0; background: none; cursor: pointer; min-width: 0; }
.bieu-ngay .vung-tren .cot-ngay { align-items: flex-end; }
.bieu-ngay .vung-duoi .cot-ngay { align-items: flex-start; }
.bieu-ngay i { display: block; width: 100%; }
.bieu-ngay .duong { background: var(--la); border-radius: 3px 3px 0 0; }
.bieu-ngay .am { background: var(--do); border-radius: 0 0 3px 3px; }
.bieu-ngay .cot-ngay.sau { opacity: .25; }
.bieu-ngay .cot-ngay.chon .duong { background: #0f5f32; }
.nhan-ngay { display: flex; gap: 2px; font-size: 11px; color: var(--mo); margin-top: 4px; }
.nhan-ngay span { flex: 1; text-align: center; min-width: 0; }
.chi-tiet-ngay { background: #f4f7fa; border-radius: 10px; padding: 8px 10px; font-size: 14px; margin: 10px 0 4px; }
.o-so .lo b { color: var(--do); }