/* Lớp màu "sang": xanh navy đậm + vàng ánh kim + nền kem, đồng bộ với website. Nạp sau app.css. */
:root {
  /* đồng bộ màu website: xanh dương, trắng, vàng tươi (xem src/style.css của web) */
  --ink-navy: #12345e; --link: #1f6fb8;
  --navy: #2b87d6; --navy-2: #3898e2; --navy-deep: #1f6fb8; --gold: #ffc423; --gold-dark: #9a6b00; --gold-soft: #ffe9a8;
  --bg: #f2fbff; --card: #fff; --line: #d8ebf8; --line-2: #eaf5fd; --sand: #cfe8fb; --text: #16203a; --muted: #5f7189;
  --blue-bg: #eaf5fd; --radius: 14px;
  --metal: linear-gradient(180deg, #ffd54a 0%, #ffc423 55%, #f2b200 100%);
  --shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(18, 52, 94, .04), 0 14px 34px -16px rgba(43, 135, 214, .28);
}
body { font-family: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: radial-gradient(900px 420px at 92% -6%, rgba(56, 152, 226, .14), transparent 62%),
    radial-gradient(760px 420px at -8% 18%, rgba(56, 152, 226, .08), transparent 60%), var(--bg); background-attachment: fixed; }
h1, h2, .stat b, .act b, .sums .grand th, .sums .grand td, .login-co b {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-variant-numeric: lining-nums; color: var(--ink-navy); }
h1 { font-size: 29px; letter-spacing: 0; }
h2 { font-size: 19px; }
a { color: var(--link); }

/* Thanh trên: navy chuyển sắc, viền vàng ánh kim */
.top { height: 62px; background: linear-gradient(180deg, var(--navy-2), var(--navy)); border-bottom: 0; box-shadow: 0 6px 20px rgba(43, 135, 214, .28); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, #e0a800, #fff1b8 18%, #ffc423 38%, #fff6d6 54%, #ffc423 70%, #e0a800); }
.logo span { font-family: "Playfair Display", Georgia, serif; font-size: 17px; letter-spacing: .02em; }
.logo small { font-family: "Be Vietnam Pro", "Segoe UI", sans-serif; color: var(--gold-soft); letter-spacing: .22em; font-size: 10.5px; margin-top: 2px; }
.logo img { box-shadow: 0 0 0 1px rgba(255, 196, 35, .7), 0 4px 12px rgba(0, 0, 0, .25); }
.nav a { color: #d5dcef; font-weight: 500; }
.nav a.on { background: rgba(255, 196, 35, .16); color: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(255, 196, 35, .45); }
.me summary small { color: var(--gold-soft); }
.me-menu { border-color: var(--sand); }
.me-menu a:hover, .me-menu button:hover { background: #eaf5fd; }

/* Nút */
.btn { border-color: #c9def0; border-radius: 9px; transition: transform .12s, box-shadow .12s, background .12s; }
.btn:hover { background: #f2f9ff; border-color: var(--navy-2); }
.btn.primary { background: linear-gradient(180deg, #1f86d8, var(--navy)); border-color: var(--navy); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 16px rgba(26, 127, 212, .26); }
.btn.primary:hover { background: linear-gradient(180deg, #21489b, #0e2756); border-color: var(--navy); }
.btn.gold, .btn.primary.big { background: var(--metal); border-color: #e0a800; color: #3a2a00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 8px 20px rgba(148, 112, 44, .36); }
.btn.gold:hover, .btn.primary.big:hover { background: var(--metal); filter: brightness(1.06); transform: translateY(-1px); border-color: #e0a800; }
.btn.ghost { background: transparent; border-color: rgba(241, 223, 174, .55); color: var(--gold-soft); }
.btn.ghost:hover { background: rgba(255, 196, 35, .16); border-color: var(--gold-soft); }
.btn.danger:hover { background: var(--red-bg); border-color: #efc1c1; }
input, select, textarea { border-color: #c9def0; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(56, 152, 226, .35); border-color: var(--navy); }
input[type=checkbox] { accent-color: var(--navy); }

/* Thẻ, số liệu */
.card, .stat, .act, .sheet-wrap { border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.act { overflow: hidden; padding: 22px 24px; }
.act b { font-size: 22px; }
.act.xuat { background: linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 55%, var(--navy-deep) 100%); border-color: var(--navy); }
.act.xuat b { color: var(--gold-soft); }
.act.xuat::before { content: ""; position: absolute; right: -70px; top: -90px; width: 230px; height: 230px; border-radius: 50%;
  background: conic-gradient(from 200deg, transparent 0 48%, rgba(255, 233, 168, .95) 66%, rgba(255, 196, 35, .25) 84%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.act.xuat::after { content: ""; position: absolute; right: 26px; bottom: 18px; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fffbe6, #ffcc33 46%, #c99200 100%); box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.act.nhap, .act.shot { border-left: 1px solid var(--line); background: linear-gradient(180deg, #fff, #f7fbff); }
.act.nhap::before, .act.shot::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--metal); }
.act kbd { border-color: var(--sand); }
.stat { position: relative; overflow: hidden; padding-top: 17px; }
.stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--metal); }
.stat b { font-size: 27px; }
.stat.alert { background: #fff7e2; border-color: #ecd49a; }
.guide { border-left: 1px solid var(--line); position: relative; overflow: hidden; padding-left: 26px; }
.guide::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--metal); }

/* Bảng */
.tbl th { background: transparent; color: #4f7aa6; border-bottom-color: var(--sand); font-weight: 600; }
.tbl td { border-bottom-color: var(--line-2); }
.tbl.click tbody tr[data-href]:hover { background: #eef7fe; }
.tbl.grid th, .lines th { background: linear-gradient(180deg, #f4faff, #e3f1fc); color: #1f4f80; border-bottom: 1px solid #bfdcf3; }
.tbl.grid td, .tbl.grid th { border-right-color: var(--line-2); }
.tbl.grid tbody tr:nth-child(even) { background: #f9fcff; }
.tbl.grid.click tbody tr[data-href]:hover { background: #e8f4fd; }
.tbl tfoot td { background: #eef7fe; border-top: 2px solid var(--gold); color: var(--ink-navy); }
.tbl td.code { color: #4a5674; }
.tbl.edit td[data-f]:hover { box-shadow: inset 0 0 0 1px var(--gold); background: #fffbea; }
.tbl.edit td.editing { box-shadow: inset 0 0 0 2px var(--gold-dark); }
.tag.xuat { background: #e8ecf7; color: var(--ink-navy); }
.bar-cell i { background: linear-gradient(90deg, var(--navy), var(--navy-2) 55%, var(--gold)); }
.chip { border-color: var(--line); }
.chip:hover { border-color: var(--gold); }
.chip.on { background: linear-gradient(180deg, #1f86d8, var(--navy)); border-color: var(--navy); color: var(--gold-soft); }
.tabs { background: #e3f1fc; }
.tab.on { color: var(--ink-navy); }

/* Phiếu */
.vc.xuat .vc-main { border-top: 4px solid var(--gold); }
.lines-wrap { border-color: var(--sand); border-radius: 10px; }
.lines tr.need { background: #fff5db; }
.sums .grand th, .sums .grand td { border-top: 2px solid var(--gold); font-size: 23px; }
.vc-actions { background: rgba(242, 251, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #cfe8fb; box-shadow: 0 -8px 24px rgba(22, 32, 58, .08); }
.sg-box { border-color: #bfdcf3; border-radius: 11px; box-shadow: 0 18px 44px rgba(22, 32, 58, .24); }
.sg-new { color: var(--gold-dark); }
.dlg { box-shadow: 0 0 0 1px rgba(255, 196, 35, .4), 0 30px 70px rgba(15, 95, 174, .45); }
.dlg::backdrop { background: rgba(15, 95, 174, .55); }
.toast { background: linear-gradient(135deg, var(--navy-deep), var(--navy-2)); box-shadow: 0 0 0 1px rgba(255, 196, 35, .55), 0 14px 34px rgba(15, 95, 174, .38); }
.toast.bad { background: var(--red); box-shadow: 0 14px 34px rgba(120, 20, 20, .35); }

/* Đăng nhập: nền navy có sàn lưới phối cảnh và vòng ánh kim */
.login { position: relative; overflow: hidden; background: radial-gradient(1000px 560px at 50% -12%, #5fb0ee 0%, var(--navy-2) 40%, var(--navy) 75%, var(--navy-deep) 100%); background-attachment: scroll; }
.login::before { content: ""; position: absolute; left: -60%; right: -60%; bottom: -6%; height: 58%; pointer-events: none;
  background-image: linear-gradient(rgba(255, 196, 35, .26) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 196, 35, .26) 1px, transparent 1px);
  background-size: 58px 58px; transform: perspective(680px) rotateX(63deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(transparent, #000 34%, transparent 96%); mask-image: linear-gradient(transparent, #000 34%, transparent 96%); }
.login::after { content: ""; position: absolute; width: 560px; height: 560px; right: -150px; top: -190px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 205deg, transparent 0 50%, rgba(255, 233, 168, .95) 68%, rgba(255, 196, 35, .2) 86%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); }
.login-card { position: relative; z-index: 1; overflow: hidden; border-top: 0; border-radius: 18px; padding: 34px 30px 26px;
  box-shadow: 0 0 0 1px rgba(255, 196, 35, .45), 0 40px 90px rgba(0, 0, 0, .5), 0 0 80px rgba(255, 196, 35, .12); }
.login-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--metal); }
.login-brand { border-bottom-color: var(--sand); }
.login-co b { font-size: 26px; letter-spacing: .06em; }
.login-co b::after { background: var(--metal); width: 56px; }
.login-title h1 { font-size: 20px; }

@media (max-width: 1180px) {
  .nav { top: 62px; background: var(--navy-deep); border-bottom: 2px solid var(--gold); }
}

.tbl.edit td[data-f=grp], .tbl.edit td[data-f=unit], .tbl.grid td.muted { white-space: nowrap; }

/* Logo: chỉ dùng biểu tượng TP (đã làm nét), tên công ty là chữ thật nên luôn sắc và cân giữa */
.logo img { height: 42px; width: auto; padding: 4px 9px; border-radius: 10px; background: #fff; }
.login-card { justify-items: stretch; text-align: center; }
.login-card label { text-align: left; }
.login-brand { gap: 10px; padding-bottom: 18px; }
.login-brand img { height: 92px; width: auto; filter: drop-shadow(0 8px 14px rgba(190, 20, 26, .22)); }
.login-co { margin: 0; }
.login-co small { font-size: 12.5px; letter-spacing: .2em; color: #1f6fb8; font-weight: 600; }
.login-co b { font-size: 30px; letter-spacing: .08em; line-height: 1.2; margin-top: 4px; }
.login-co b::after { width: 64px; margin-top: 10px; }
.login-note { font-size: 13px; color: var(--muted); margin: 2px 0 0; }

/* Giống logo trên website: dòng "Công ty TNHH SX DV TM" xanh dương, tên "Lý Thành Phát" đỏ */
.login-co small { color: var(--navy); font-weight: 700; }
.login-co b { color: #ee1c25; -webkit-text-fill-color: #ee1c25; font-family: "Be Vietnam Pro", "Segoe UI", sans-serif; font-weight: 800; letter-spacing: .02em; }
.login-co b::after { -webkit-text-fill-color: initial; }
.logo span { color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.logo small { -webkit-text-fill-color: var(--gold-soft); }

/* Lời chào ở trang Tổng quan */
.hello { position: relative; margin-bottom: 18px; }
.hello-day { margin: 0 0 2px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: #4f7aa6; font-weight: 600; }
.hello h1 { font-size: 34px; margin-bottom: 6px; }
.hello-wish { display: inline-block; margin: 0 0 12px; padding: 6px 0 6px 14px; border-left: 3px solid var(--gold);
  font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 18px; color: var(--gold-dark); }
.hello .muted { margin: 0; }
@media (max-width: 820px) { .hello h1 { font-size: 27px; } .hello-wish { font-size: 16px; } }

/* Đăng nhập: tên tài khoản ghi sẵn chữ hoa, bấm để chọn */
.who { border: 0; padding: 0; margin: 0; min-width: 0; text-align: left; }
.who legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.who-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.who-item { position: relative; display: block; cursor: pointer; }
.who-item input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.who-item span { display: block; padding: 13px 10px; border: 1.5px solid #c9def0; border-radius: 11px; background: #fff; text-align: center;
  font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--ink-navy); transition: background .12s, border-color .12s, box-shadow .12s; }
.who-item:hover span { border-color: var(--gold); background: #fffbea; }
.who-item input:focus-visible + span { outline: 2px solid rgba(255, 196, 35, .6); outline-offset: 2px; }
.who-item input:checked + span { background: linear-gradient(180deg, #1f86d8, var(--navy)); border-color: var(--navy); color: var(--gold-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 18px rgba(26, 127, 212, .28), 0 0 0 1px rgba(255, 196, 35, .7); }

/* Hai nút lập phiếu trên thanh trên: bình thường viền vàng, đang ở phiếu nào thì nút đó sáng vàng; rê chuột vào cũng sáng */
.top-actions .btn.ghost { transition: background .15s, color .15s, box-shadow .15s, transform .12s; }
.top-actions .btn.ghost:hover { background: rgba(255, 196, 35, .22); color: #fff; }
.top-actions .btn.ghost.on, .top-actions .btn.ghost:active { background: var(--metal); border-color: #e0a800; color: #3a2a00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 6px 18px rgba(255, 196, 35, .45); }
.top-actions .btn.ghost.on:hover { filter: brightness(1.06); }

/* Bảng chọn nhanh trên phiếu xuất */
.quick h2 { margin-bottom: 4px; }
.quick-hint { font-size: 13px; margin: 0 0 10px; }
.quick-repeat { width: 100%; margin-bottom: 10px; white-space: normal; text-align: left; justify-content: flex-start; color: var(--ink-navy); border-color: var(--gold); background: #fffbea; }
.quick-list { display: grid; gap: 6px; max-height: calc(100vh - 290px); overflow-y: auto; margin: 0 -6px; padding: 0 6px 2px; }
.quick-item { position: relative; display: block; width: 100%; text-align: left; padding: 8px 38px 8px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; cursor: pointer; font: inherit; color: var(--text); transition: border-color .12s, background .12s, transform .08s; }
.quick-item b { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.quick-item small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.quick-item i { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-weight: 700; font-size: 14px; color: var(--gold-dark); background: #eaf5fd; }
.quick-item:hover { border-color: var(--gold); background: #fffbea; }
.quick-item:active { transform: scale(.985); }
.quick-item.picked { background: #f3f7f3; border-color: #cfe3d6; }
.quick-item.picked i { background: var(--green); color: #fff; }
@media (max-width: 1180px) { .quick-list { max-height: 260px; } }

/* Nút gợi ý dạng chữ (ví dụ "Điền số kế tiếp") */
.linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gold-dark); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:hover { color: var(--ink-navy); }

/* Phiếu xuất không còn ô PO: chia lại 4 cột */
@media (min-width: 1181px) { .vc.xuat .vc-partner { grid-template-columns: 2fr 3.4fr 1.4fr 1.4fr; } }

/* Lịch sử đăng nhập */
.dot.bad { background: var(--red); }
.dot.off { background: #b6bdc9; }
.stat b.when { font-family: "Be Vietnam Pro", "Segoe UI", sans-serif; font-size: 18px; font-weight: 700; }

/* Nhắc trên phiếu xuất khi kho chưa có số tồn đầu */
.stock-note { margin: -4px 0 12px; padding: 7px 12px; border-radius: 8px; background: #fff7e2; border: 1px solid #ecd49a; color: var(--amber); font-size: 13.5px; font-weight: 600; }
.stock-note a { color: var(--ink-navy); text-decoration: underline; }

/* Báo thiếu hàng ngay trên phiếu xuất */
.short-box { margin: 0 0 10px; padding: 9px 13px; border-radius: 9px; background: var(--red-bg); border: 1px solid #efb4b4; color: var(--red); }
.short-box b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.short-box span { display: block; font-size: 13.5px; font-weight: 600; }
.lines tr.short { background: #fdf0f0; }
.lines tr.short .p-qty { border-color: #e39a9a; background: #fff; color: var(--red); font-weight: 700; }
.quick-item small .out { color: var(--red); font-weight: 700; }
.quick-item small .in { color: var(--green); font-weight: 600; }

/* Báo sắp hết hàng */
.toast.warn { background: #a15c00; box-shadow: 0 14px 34px rgba(120, 70, 0, .35); }
.sg-stock.low { color: var(--amber); }
.quick-item small .low { color: var(--amber); font-weight: 700; }

/* Cột «Đang tồn» ở mục Hàng hóa: gõ thẳng số đang có trong kho */
.tbl.edit td.stock { background: #fffbea; color: var(--ink-navy); }
.tbl.edit td.stock.neg { color: var(--red); }
.tbl.edit th.stock-h { color: var(--ink-navy); }

/* Dòng "Thêm mặt hàng": ô Mã đứng đầu như cột MÃ của bảng */
.addrow input[name=code] { width: 128px; font-family: Consolas, "Courier New", monospace; font-size: 13.5px; text-transform: uppercase; }
.addrow input[name=code]::placeholder { font-family: "Be Vietnam Pro", "Segoe UI", sans-serif; text-transform: none; }

/* Thanh so sánh tiền bán theo ngày (trang Báo cáo): thanh vàng ánh kim trên rãnh kem */
.bar-cell { vertical-align: middle !important; }
.bar { display: block; height: 12px; border-radius: 999px; background: #e3f1fc; box-shadow: inset 0 1px 2px rgba(22, 32, 58, .12); overflow: hidden; }
.bar i, .bar-cell .bar i { display: block; height: 100%; margin: 0; min-width: 10px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 52%, rgba(90, 62, 10, .12)),
              linear-gradient(90deg, #f0b400 0%, #ffd54a 38%, #fff1b8 60%, #ffc423 82%, #e0a800 100%);
  box-shadow: 0 0 0 1px rgba(148, 112, 44, .35) inset; }

/* Nhắc việc cần làm (vàng) và nút chính trong bảng */
.alert.warnbox { background: #fff7e2; border: 1px solid #ecd49a; color: var(--amber); }
.alert.warnbox a { color: var(--ink-navy); text-decoration: underline; margin-left: 4px; }
.inline-form button.strong { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

/* Phiếu sản xuất: hai bảng (vật tư đã dùng / hàng làm ra), không có giá tiền */
.vc.sx .vc-body { grid-template-columns: minmax(0, 1fr); }
.vc.sx .vc-main { border-top: 4px solid var(--gold); }
.vc.sx .c-price, .vc.sx .c-amt, .vc.sx .sums, .vc.sx .f-ship, .vc.sx .f-phone, .vc.sx .f-inv, .vc.sx .f-po { display: none; }
.vc.sx .vc-partner { grid-template-columns: minmax(0, 440px); margin-bottom: 4px; }
.vc.sx .vc-foot { grid-template-columns: minmax(0, 1fr); }
.sec { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; font: 700 18px "Playfair Display", Georgia, serif; color: var(--ink-navy); }
.sec small { font: 500 13px "Be Vietnam Pro", "Segoe UI", sans-serif; color: var(--muted); }
.sec::before { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 17px/1 "Segoe UI", sans-serif; color: #fff; }
.sec.used::before { content: "−"; background: #b3402a; }
.sec.made::before { content: "+"; background: var(--green); }
.tag.sx { background: #fff3c4; color: #8a6400; }
.actions3.four { grid-template-columns: repeat(4, 1fr); }
.actions3.four .act { padding: 20px 20px; }
.actions3.four .act b { font-size: 20px; }
@media (max-width: 1240px) { .actions3.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px) { .actions3.four { grid-template-columns: minmax(0, 1fr); } }
.top-actions .sx-btn { display: none; }
@media (min-width: 1440px) { .top-actions .sx-btn { display: inline-flex; } }

/* Ai lập phiếu, lúc nào */
.who-when { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); }
.who-when b { color: var(--ink-navy); font-variant-numeric: tabular-nums; }

/* Phiếu sản xuất: bảng hàng làm ra có thêm ô «Còn làm dở» */
.vc.sx .made-table .c-price { display: table-cell; width: 130px; }
.vc.sx .made-table td.c-price input { border-color: #ecd49a; background: #fffbea; }
.vc.sx .sec small { line-height: 1.35; }
.tag.wip { background: #fff1cf; color: var(--amber); margin-left: 4px; }

/* tên hàng trong bảng: chữ navy đậm, rê chuột mới chuyển xanh; tránh cả bảng toàn chữ xanh */
.tbl td a { color: var(--ink-navy); }
.tbl td a:hover { color: var(--link); text-decoration: underline; }

/* đổi logo trong Cài đặt */
.logo-row { display: flex; align-items: center; gap: 18px; margin: 6px 0 18px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px; background: #fff; }
.logo-preview { height: 64px; width: auto; }


/* nhắc kỳ gia hạn: một dòng mảnh, lịch sự */
.lic-note { margin: 0 0 14px; padding: 8px 14px; border-left: 3px solid var(--gold); background: #fffbea; color: #5a4500; border-radius: 8px; font-size: 13.5px; }
.lic-note.due { border-left-color: #ffc423; background: #fff7d6; }
.lock-card { text-align: center; max-width: 440px; }
.lock-card h1 { margin-bottom: 6px; }

/* ================= GIAO DIỆN ĐIỆN THOẠI ================= */
.tabbar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 72px; }
  body.dang-lap { padding-bottom: 0; }
  /* thanh thao tác nhanh dưới đáy màn hình */
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff;
    border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0, 0, 0, .08); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  body.dang-lap .tabbar { display: none; }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; color: var(--muted); font-size: 11.5px; font-weight: 600; text-decoration: none; }
  .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a.on { color: var(--navy); background: var(--blue-bg); }
  .tabbar a.hot { color: #fff; background: var(--navy); }
  .main { padding: 12px 12px 20px; }
  h1 { font-size: 24px; }
  .page-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .page-head .muted { font-size: 13.5px; }
  /* ẩn những thứ chỉ dùng trên máy tính */
  a[href*=".xlsx"], [data-import-excel], kbd, .act kbd { display: none !important; }
  /* thẻ lọc trượt ngang, không xuống dòng */
  .tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: none; }
  .tabs-row { flex-direction: column; align-items: stretch; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chips .chip, .chip { flex: none; }
  input, select, textarea, button { font-size: 16px; }   /* tránh điện thoại tự phóng to khi bấm vào ô */
  .filters { gap: 8px; }
  .filters input[type=date] { flex: 1 1 140px; }
  /* trang tổng quan: 4 việc chính thành lưới 2 cột gọn */
  .actions3.four { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .act { padding: 14px 12px; min-height: 0; }
  .act b { font-size: 16px; }
  .act span { font-size: 12.5px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat b { font-size: 20px; }

  /* phiếu xuất / nhập / sản xuất: mỗi dòng hàng thành một thẻ */
  table.lines thead { display: none; }
  table.lines, table.lines tbody { display: block; }
  table.lines tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 8px; position: relative; padding: 10px 34px 10px 10px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: #fff; }
  table.lines td { display: block; border: 0 !important; padding: 0 !important; }
  table.lines td.c-stt { display: none; }
  table.lines td.c-name { grid-column: 1 / -1; }
  table.lines td.c-unit { display: none; }
  table.lines td.c-qty::before { content: "Số lượng"; }
  table.lines td.c-price::before { content: "Đơn giá"; }
  table.lines td.c-amt::before { content: "Thành tiền"; }
  table.lines td.c-qty::before, table.lines td.c-price::before, table.lines td.c-amt::before { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 2px; text-align: left; }
  table.lines td.c-amt { align-self: end; padding-bottom: 8px !important; font-weight: 700; }
  table.lines td.c-note { grid-column: 1 / -1; }
  table.lines td.c-note input::placeholder { color: #b3b9c4; }
  table.lines td.c-x { position: absolute; top: 8px; right: 6px; }
  table.lines input { width: 100%; min-height: 42px; }
  table.lines .p-info { display: block; margin-top: 4px; }
  .vc-partner, .form-grid { grid-template-columns: 1fr !important; }

  /* Kho: chỉ hiện Tên hàng và Tồn cuối (bấm vào dòng xem chi tiết) */
  .pg-ton-kho main table.tbl th:nth-child(1), .pg-ton-kho main table.tbl td:nth-child(1),
  .pg-ton-kho main table.tbl th:nth-child(3), .pg-ton-kho main table.tbl td:nth-child(3),
  .pg-ton-kho main table.tbl th:nth-child(4), .pg-ton-kho main table.tbl td:nth-child(4),
  .pg-ton-kho main table.tbl th:nth-child(5), .pg-ton-kho main table.tbl td:nth-child(5),
  .pg-ton-kho main table.tbl th:nth-child(9), .pg-ton-kho main table.tbl td:nth-child(9) { display: none; }
  /* Sổ phiếu: loại, số phiếu, khách, tiền */
  .pg-so-phieu main table.tbl th:nth-child(3), .pg-so-phieu main table.tbl td:nth-child(3),
  .pg-so-phieu main table.tbl th:nth-child(5), .pg-so-phieu main table.tbl td:nth-child(5),
  .pg-so-phieu main table.tbl th:nth-child(6), .pg-so-phieu main table.tbl td:nth-child(6),
  .pg-so-phieu main table.tbl th:nth-child(8), .pg-so-phieu main table.tbl td:nth-child(8) { display: none; }
  .tbl td, .tbl th { padding: 9px 8px; }
  .sheet-wrap { margin-inline: -12px; border-radius: 0; }
}
@media (max-width: 760px) {
  .pg-so-phieu main table.tbl th:nth-child(9), .pg-so-phieu main table.tbl td:nth-child(9) { display: none; }
  .pg-so-phieu main table.tbl th { white-space: normal; }
  .sheet-wrap { margin-inline: 0; overflow-x: auto; }
}
@media (max-width: 760px) {
  table.lines { min-width: 0 !important; width: 100% !important; }
  table.lines tr { width: auto !important; }
  table.lines td { width: auto !important; min-width: 0 !important; }
  table.lines td.c-qty, table.lines td.c-price, table.lines td.c-amt { min-width: 0; }
  table.lines input { border: 1px solid var(--line) !important; border-radius: 8px; padding: 8px 10px; background: #fff; }
  table.lines td.c-name input { font-weight: 600; }
  table.lines tr.blank { border-style: dashed; }
  .lines-wrap { overflow: visible !important; }
  .vc-main { padding: 12px !important; }
}
@media (max-width: 760px) {
  table.lines tr { grid-template-columns: 0.8fr 1.25fr 1fr; }
  table.lines td.c-amt { text-align: right; }
  table.lines td.c-amt::before { text-align: right; }
}
@media (min-width: 761px) { table.lines td.c-note input::placeholder { color: transparent; } }
@media (max-width: 760px) {
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card .tbl th, .card .tbl td { white-space: nowrap; }
  .pg-bao-cao .card .tbl td:first-child, .pg-bao-cao .card .tbl th:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
  .two-col, .grid2 { grid-template-columns: 1fr !important; }
}

/* ---------- Điện thoại: xếp gọn để thao tác nhanh ---------- */
.filter-toggle, .more-info { display: none; }
@media (max-width: 760px) {
  /* thanh trên mỏng hơn */
  header.top { min-height: 52px; padding: 6px 10px; }
  header.top .logo img { width: 36px; height: auto; }
  .me summary small { display: none; }
  .me summary { font-size: 13px; }
  /* tiêu đề trang gọn, bỏ dòng giải thích */
  .page-head .muted, .vc-head .muted, .hello-wish, .hello + .muted, .hello > .muted { display: none; }
  .page-head h1, .vc-head h1 { font-size: 21px; margin: 0; }
  .crumb { margin: 0 0 2px; font-size: 12.5px; }
  .who-when { font-size: 12px; margin: 2px 0 0; }
  /* tổng quan: lời chào một dòng, 4 việc thành ô nhỏ bấm nhanh */
  .hello { margin-bottom: 8px; }
  .hello-day { font-size: 11px; margin: 0; }
  .hello h1 { font-size: 20px !important; margin: 2px 0 0; }
  .act { padding: 12px 10px !important; }
  .act span { display: none; }
  .act b { font-size: 15px !important; line-height: 1.25; }
  .act::after { display: none; }
  /* bộ lọc: ô tìm + nút Lọc trên một hàng; bấm Lọc mới hiện ngày, nhóm */
  .filter-toggle { display: inline-flex; flex: none; }
  form.filters { display: flex; flex-wrap: wrap; gap: 8px; }
  form.filters input[type=search] { flex: 1 1 0; min-width: 0; }
  form.filters > label, form.filters > select, form.filters > button:not(.filter-toggle) { display: none; }
  form.filters.open > label, form.filters.open > select, form.filters.open > button { display: flex; }
  form.filters.open > label { flex: 1 1 140px; align-items: center; gap: 6px; }
  form.filters.open > label.check { flex-basis: 100%; }
  .chips { margin-bottom: 8px; }
  /* phiếu: số phiếu và ngày một hàng; địa chỉ / hóa đơn gom vào "Thêm thông tin" */
  .vc-head { gap: 8px; }
  .vc-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .vc-partner { gap: 10px !important; }
  .vc-partner .f-ship, .vc-partner .f-inv, .vc-partner .f-po { display: none; }
  .vc-partner.open .f-ship, .vc-partner.open .f-inv, .vc-partner.open .f-po { display: block; }
  .more-info { display: inline-block; justify-self: start; font-size: 14px; font-weight: 600; color: var(--link); padding: 2px 0; }
  .vc-foot textarea { min-height: 0; height: 60px; }
  .vc-foot { gap: 10px; }
  .sums th, .sums td { padding: 5px 0; }
  .sums .grand th, .sums .grand td { font-size: 20px; }
  /* khung gợi ý hàng bán chạy: ngắn lại, trượt trong khung */
  .quick-list { max-height: 210px !important; }
  .card h2 { font-size: 17px; }
}
@media (max-width: 760px) {
  form.filters:not(.open) > label.check { display: none !important; }
  .pg-so-phieu main table.tbl { width: 100%; }
  .pg-so-phieu main table.tbl td:nth-child(4) { white-space: normal; }
}

/* ===== Điện thoại: phiếu gọn hơn (10/10/2026) ===== */
.vc-more { display: contents; }
.vc-more > summary { list-style: none; }
.vc-more > summary::-webkit-details-marker { display: none; }
@media (min-width: 761px) {
  .vc-more > summary { display: none; }
  .vc-more-menu { display: contents; }
}
@media (max-width: 760px) {
  .vc-more { display: block; position: relative; }
  .vc-more > summary { cursor: pointer; }
  .vc-more-menu { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30; min-width: 230px; display: flex; flex-direction: column; gap: 6px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 -12px 34px rgba(22, 32, 58, .2); }
  .vc-more-menu .btn { width: 100%; justify-content: flex-start; }
  .vc-actions { flex-wrap: nowrap; }
  .vc-actions .save-state { display: none; }
  /* Phiếu sản xuất (không có giá): số lượng · đơn vị · ghi chú chung một hàng */
  .vc.sx table.lines:not(.made-table) tr { grid-template-columns: 96px 62px 1fr; align-items: end; }
  .vc.sx table.lines:not(.made-table) td.c-unit { display: block; padding-bottom: 12px !important; font-weight: 600; color: var(--muted); font-size: 14px; }
  .vc.sx table.lines:not(.made-table) td.c-unit::before { content: "Đơn vị"; display: block; font-size: 11.5px; font-weight: 600; margin-bottom: 8px; }
  .vc.sx table.lines:not(.made-table) td.c-note { grid-column: auto; }
  .vc.sx table.lines:not(.made-table) td.c-name { order: 0; } .vc.sx table.lines:not(.made-table) td.c-qty { order: 1; }
  .vc.sx table.lines:not(.made-table) td.c-unit { order: 2; } .vc.sx table.lines:not(.made-table) td.c-note { order: 3; }
  .vc.sx table.lines:not(.made-table) td.c-note::before { content: "Ghi chú"; display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
  .vc.sx table.lines:not(.made-table) td.c-note input::placeholder { color: transparent; }
}