/* ===== Web Lên Đơn — Trần Huy Camera =====
   Thiết kế: modern minimal, TRẮNG chủ đạo, phong cách Apple/macOS. Mobile-first (iPad).
   CSP-safe (không inline JS). Giữ nguyên tên class + biến để HTML/JS không đổi. ===== */
:root{
  /* nền sáng kiểu Apple */
  --bg:#f5f5f7; --bg2:#f0f0f3; --card:#ffffff; --card2:#f7f7fa; --line:#e6e6eb; --line2:#d9d9df;
  --ink:#1d1d1f; --ink2:#54545a; --ink3:#8a8a90;
  /* xanh Apple + gradient */
  --brand:#0071e3; --brand2:#0060d0; --brand-ink:#fff;
  --grad:linear-gradient(135deg,#3aa0ff 0%,#0071e3 55%,#0a5fd0 100%);
  --grad-soft:linear-gradient(135deg,#eef6ff,#f5f0ff);
  --ok:#1a7f37; --ok-bg:#e8f8ee; --ok-line:#b7e8c6;
  --warn:#9a6700; --warn-bg:#fff6e5; --warn-line:#f3dca0;
  --danger:#c9302c; --danger-ink:#b42318; --danger-bg:#fdeeee; --danger-line:#f5c6c3;
  --radius:20px; --radius-sm:13px; --tap:48px;
  --shadow:0 1px 2px rgba(20,20,43,.05), 0 12px 34px -14px rgba(20,20,43,.18);
  --shadow-sm:0 1px 2px rgba(20,20,43,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; min-height:100vh;
  letter-spacing:-0.011em;
}
a{color:var(--brand); text-decoration:none}
button{font-family:inherit}
.hidden{display:none !important}

/* ---- Topbar (nav Apple: kính mờ) ---- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  padding:14px 20px; background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line);
}
.brand{font-weight:700; font-size:1.05rem; letter-spacing:-0.02em; display:flex; align-items:center; gap:9px}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--grad);box-shadow:0 2px 8px rgba(0,113,227,.5)}
.spacer{flex:1}
.wrap{max-width:820px; margin:0 auto; padding:22px 18px 110px}

/* ---- Branch chips ---- */
.branchbar{display:flex; gap:9px; overflow-x:auto; padding:12px 18px;
  background:rgba(255,255,255,.6); border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch}
/* Login branch picker: wrap to rows thay vì thanh cuộn ngang (đẹp hơn trên card hẹp) */
#branchPick{flex-wrap:wrap; overflow-x:visible}
.chip{
  flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:9px 16px; border-radius:999px;
  background:#fff; border:1px solid var(--line2); color:var(--ink2); cursor:pointer;
  font-weight:600; font-size:.9rem; white-space:nowrap; min-height:44px; transition:all .18s ease;
  box-shadow:var(--shadow-sm);
}
.chip:hover{border-color:#c4c4cc}
.chip .tick{color:var(--ok); font-weight:800}
.chip.active{background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 6px 16px -6px rgba(0,113,227,.6)}
.chip.active .tick{color:#fff}
.chip.off{opacity:.5}

/* ---- Cards ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; margin-bottom:18px; box-shadow:var(--shadow)}
.card h2{margin:0 0 16px; font-size:1.12rem; font-weight:700; letter-spacing:-0.02em; color:var(--ink); display:flex; align-items:center; gap:9px}
.muted{color:var(--ink3); font-size:.85rem}
.section-title{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); font-weight:700; margin:0 0 10px}

/* ---- Forms ---- */
label.fld{display:block; margin-bottom:14px}
label.fld > span{display:block; font-size:.82rem; color:var(--ink2); margin-bottom:7px; font-weight:600}
input,select,textarea{
  width:100%; background:#fff; color:var(--ink); border:1px solid var(--line2);
  border-radius:var(--radius-sm); padding:13px 15px; font-size:1rem; min-height:var(--tap);
  outline:none; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none;
}
select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a8a90' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:40px}
input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 4px rgba(0,113,227,.14)}
input::placeholder,textarea::placeholder{color:#b0b0b6}
textarea{min-height:80px; resize:vertical; line-height:1.5}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
@media(max-width:560px){.grid3{grid-template-columns:1fr 1fr}}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:1px solid var(--line2); background:#fff; color:var(--ink); font-weight:600;
  padding:13px 20px; border-radius:var(--radius-sm); min-height:var(--tap); font-size:1rem; width:100%;
  transition:transform .06s ease, box-shadow .18s ease, background .18s ease; letter-spacing:-0.01em; box-shadow:var(--shadow-sm)}
.btn:hover{box-shadow:0 4px 14px -6px rgba(20,20,43,.2)}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.45; cursor:not-allowed; box-shadow:none}
.btn.primary{background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 8px 20px -8px rgba(0,113,227,.6)}
.btn.primary:hover{box-shadow:0 10px 26px -8px rgba(0,113,227,.7)}
.btn.ghost{background:transparent; box-shadow:none; border-color:var(--line2)}
.btn.ghost:hover{background:#fff}
.btn.danger{background:linear-gradient(135deg,#ff5b52,#e8362d); border-color:transparent; color:#fff; box-shadow:0 8px 20px -8px rgba(232,54,45,.55)}
.btn.ok{background:linear-gradient(135deg,#34d15b,#1a9d3f); border-color:transparent; color:#fff}
.btn.small{width:auto; padding:10px 16px; min-height:44px; font-size:.9rem}

/* ---- Toggle (kiểu iOS) ---- */
.switch{display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none; min-height:44px; font-size:.95rem}
.switch input{display:none}
.switch .track{width:50px; height:30px; border-radius:999px; background:#e3e3e8; position:relative; transition:.22s; flex:0 0 auto}
.switch .track::after{content:""; position:absolute; top:2px; left:2px; width:26px; height:26px; border-radius:50%;
  background:#fff; transition:.22s; box-shadow:0 2px 5px rgba(0,0,0,.2)}
.switch input:checked + .track{background:#34c759}
.switch input:checked + .track::after{transform:translateX(20px)}

/* ---- Equipment list ---- */
.eq{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:#fff; margin-bottom:11px; transition:border-color .15s, box-shadow .15s}
.eq:hover{border-color:#d0d0d6; box-shadow:var(--shadow-sm)}
.eq.tap{cursor:pointer} .eq.tap:active{background:var(--bg2)}
.eq .info{flex:1; min-width:0}
.eq .nm{font-weight:650; font-size:1.02rem; letter-spacing:-0.01em}
.eq .sub{font-size:.82rem; color:var(--ink3)}
.eq .price{font-weight:750; color:var(--ink)}
.eq .avail{font-size:.78rem; color:var(--ok); font-weight:600}
.eq .avail.zero{color:var(--danger-ink)}
.badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:.7rem; font-weight:700; vertical-align:middle}
.badge.disc{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-line)}

/* ---- Recap ---- */
.recap{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line)}
.recap:last-child{border-bottom:0}
.recap .k{color:var(--ink2)}
.recap .v{font-weight:650; text-align:right}
.recap.total{margin-top:2px; padding-top:12px; border-top:1.5px solid var(--line2); border-bottom:0}
.recap.total .v{color:var(--brand); font-size:1.2rem; font-weight:800}

/* ---- Scam banner ---- */
.scam{border:1px solid var(--danger-line); background:var(--danger-bg); border-left:4px solid var(--danger);
  border-radius:var(--radius-sm); padding:14px; margin:14px 0}
.scam h3{margin:0 0 8px; color:var(--danger-ink); font-size:.98rem; font-weight:700}
.scam .rep{border-top:1px solid var(--danger-line); padding:9px 0; font-size:.86rem; color:var(--ink)}
.scam .rep b{color:var(--danger-ink)}
.scam.note{border-color:var(--warn-line); border-left-color:var(--warn); background:var(--warn-bg)}
.scam.note h3{color:var(--warn)}
.scam.safe{border-color:var(--ok-line); border-left-color:var(--ok); background:var(--ok-bg)}
.scam.safe h3{color:var(--ok)}

/* ---- Modal ---- */
.modal{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(20,20,30,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
@media(min-width:640px){.modal{align-items:center; padding:24px}}
.modal .box{width:100%; max-width:560px; max-height:92vh; overflow:auto; background:var(--card);
  border-radius:22px 22px 0 0; box-shadow:0 24px 70px -20px rgba(0,0,0,.4); animation:sheet .28s cubic-bezier(.32,.72,0,1)}
@media(min-width:640px){.modal .box{border-radius:22px}}
@keyframes sheet{from{transform:translateY(28px); opacity:.6}to{transform:none; opacity:1}}
.modal .hd{position:sticky; top:0; background:rgba(255,255,255,.85); backdrop-filter:blur(12px);
  padding:18px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; letter-spacing:-0.02em}
.modal .bd{padding:20px}
.modal .bd input,.modal .bd select,.modal .bd textarea{scroll-margin-bottom:100px}  /* bàn phím iOS không che ô đang gõ */
.modal .ft{position:sticky; bottom:0; background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  padding:16px 20px; border-top:1px solid var(--line); display:flex; gap:12px}
.modal .ft .btn{flex:1}

/* ---- Ledger card ---- */
.ledger{background:var(--grad-soft); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm)}
.ledger .lrow{display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:.94rem; border-bottom:1px solid rgba(0,0,0,.05)}
.ledger .lrow:last-child{border-bottom:0}
.ledger .lrow .k{color:var(--ink3)}
.st-badge{padding:4px 11px; border-radius:999px; font-size:.74rem; font-weight:700}
.st-accepted{background:#e3f0ff; color:#0060d0} .st-delivering{background:#e3f0ff; color:#0060d0}
.st-pending{background:var(--warn-bg); color:var(--warn)}
.st-overdue{background:#ffe9e0; color:#c2410c}
.st-cancelled,.st-refunded{background:#f0f0f3; color:var(--ink3)}
.st-completed{background:var(--ok-bg); color:var(--ok)}

/* ---- Toast (không dùng alert) ---- */
#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:80; display:flex;
  flex-direction:column; gap:9px; width:calc(100% - 36px); max-width:440px}
.toast{background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border:1px solid var(--line);
  border-left:4px solid var(--ink3); color:var(--ink); padding:13px 16px; border-radius:14px;
  box-shadow:0 12px 34px -12px rgba(0,0,0,.3); font-weight:600; font-size:.92rem;
  animation:tin .3s cubic-bezier(.32,.72,0,1)}
@keyframes tin{from{transform:translateY(14px); opacity:0}to{transform:none; opacity:1}}
.toast.ok{border-left-color:var(--ok)} .toast.err{border-left-color:var(--danger)} .toast.warn{border-left-color:var(--warn)}
.toast{display:flex; align-items:flex-start; gap:10px}
.toast>span:first-child{flex:1}
.toast-x{flex:0 0 auto; border:0; background:transparent; color:var(--ink3); font-size:1rem; cursor:pointer; padding:0 2px; min-height:auto; line-height:1}

/* ---- Nhắc CCCD + tiêu đề giá khi sửa ---- */
.cccd-note{margin-top:10px; padding:9px 12px; background:#fff8e6; border:1px solid #ffe4a3; border-radius:11px; font-size:.86rem; color:#8a6d1a}
.sale-switch{margin-top:6px}
.sale-dep{background:#fff8e6; border:1px solid #ffe4a3; border-radius:13px; padding:12px 14px; margin:4px 0 10px}
.sale-dep .row{gap:8px; flex-wrap:wrap}
.pricehd{display:flex; align-items:center; gap:8px; margin:8px 0 10px; flex-wrap:wrap}
.pricehd .section-title{margin:0}
.pricehd .edit-disc{color:var(--ok); font-size:.8rem; font-weight:700}
.pricehd .btn.small{margin-left:auto; min-height:38px; padding:7px 12px}
.fld input[readonly]{background:var(--bg2); color:var(--ink2)}

/* ---- Lịch sử lên đơn ---- */
.hrow{padding:12px 0; border-bottom:1px solid var(--line)}
.hrow:first-child{padding-top:2px} .hrow:last-child{border-bottom:0; padding-bottom:2px}
.hrow .htop{display:flex; align-items:center; gap:6px; font-size:.9rem; flex-wrap:wrap}
.hrow .htop .st-badge{margin-left:auto}
.hrow .htime{color:var(--ink3); font-variant-numeric:tabular-nums}
.hrow .hbranch{background:var(--bg2); border:1px solid var(--line2); border-radius:999px; padding:1px 9px; font-size:.74rem; font-weight:600; color:var(--ink2)}
.hrow .hmid{font-size:.92rem; margin-top:3px}
.hrow .hbot{display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-top:5px; flex-wrap:wrap; font-size:.86rem}
.fld input:not([readonly]).warn-edit{background:#fff9db; border-color:#fbbf24}

/* ---- Tabs (segmented control kiểu Apple) ---- */
.tabs{display:flex; gap:4px; margin-bottom:20px; background:#e9e9ee; border-radius:14px; padding:4px}
.tab{flex:1; text-align:center; padding:11px; border-radius:11px; background:transparent;
  color:var(--ink2); font-weight:600; cursor:pointer; min-height:44px; transition:all .18s; letter-spacing:-0.01em}
.tab.active{background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.12)}

/* ---- Login ---- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:22px;
  background:radial-gradient(1200px 600px at 50% -10%, #eaf3ff 0%, var(--bg) 55%)}
.login-card{width:100%; max-width:420px}
.login-card .logo{text-align:center; margin-bottom:22px}
.login-card .logo .t{font-size:1.5rem; font-weight:800; letter-spacing:-0.03em}
.login-card .logo .s{color:var(--ink3); font-size:.88rem; margin-top:6px}
.login-card .card{padding:24px}
.err-msg{color:var(--danger-ink); font-size:.88rem; margin-top:8px; min-height:1.2em; font-weight:600}
.chosen{outline:2px solid var(--brand); outline-offset:1px}
.spin{display:inline-block; width:16px; height:16px; border:2px solid rgba(0,0,0,.18);
  border-top-color:currentColor; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px}
.btn.primary .spin{border-color:rgba(255,255,255,.5); border-top-color:#fff}
@keyframes sp{to{transform:rotate(360deg)}}