/* style.css — App kho tổng BVTV Thanh Xuân.
   Thiết kế cho iPhone cầm một tay: vùng chạm >=48px, nút chính 56px,
   mọi thứ quan trọng nằm nửa dưới màn hình. Tự đổi màu theo sáng/tối. */

:root {
  --nen:        #f2f2f7;
  --the:        #ffffff;
  --the-2:      #f7f7fa;
  --chu:        #11151c;
  --chu-mo:     #6b7280;
  --vien:       #e2e4ea;
  --xanh:       #0a7d3c;
  --xanh-nen:   #e6f4ea;
  --cam:        #b45309;
  --cam-nen:    #fef3c7;
  --do:         #c0362c;
  --do-nen:     #fdeaea;
  --lam:        #1d4ed8;
  --lam-nen:    #e6edfd;
  --bong:       0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.05);
  --bo:         14px;
  --an-toan-duoi: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --nen: #0e1116; --the: #171b22; --the-2: #1e232c;
    --chu: #e8eaef; --chu-mo: #9aa3b2; --vien: #2a303b;
    --xanh: #4ade80; --xanh-nen: #10291b;
    --cam: #fbbf24; --cam-nen: #2e2410;
    --do:  #f87171; --do-nen:  #2e1717;
    --lam: #7aa2ff; --lam-nen: #16203a;
    --bong: 0 1px 2px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--nen); color: var(--chu);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
body { padding-bottom: calc(76px + var(--an-toan-duoi)); }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* ------------------------------------------------------------- thanh trên */
.dinh-dinh {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--nen) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--vien);
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}

.hang-tren { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.hieu { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.hieu small { display: block; font-weight: 500; font-size: 11.5px; color: var(--chu-mo); }

.den {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--chu-mo);
  padding: 5px 10px; border-radius: 999px; background: var(--the);
  border: 1px solid var(--vien); white-space: nowrap;
}
.den::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--chu-mo);
}
.den.noi::before   { background: var(--xanh); box-shadow: 0 0 0 3px var(--xanh-nen); }
.den.thu::before   { background: var(--cam);  box-shadow: 0 0 0 3px var(--cam-nen); }
.den.mat::before   { background: var(--do);   box-shadow: 0 0 0 3px var(--do-nen); }

/* ô tìm */
.o-tim { position: relative; }
.o-tim input {
  width: 100%; height: 50px; padding: 0 44px 0 42px;
  border-radius: var(--bo); border: 1.5px solid var(--vien);
  background: var(--the); font-size: 17px; outline: none;
}
.o-tim input:focus { border-color: var(--lam); }
.o-tim .kinh, .o-tim .xoa {
  position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--chu-mo); font-size: 18px; line-height: 1;
}
.o-tim .kinh { left: 14px; pointer-events: none; }
.o-tim .xoa {
  right: 6px; width: 36px; height: 36px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
}
.o-tim.co-chu .xoa { display: flex; }

/* chip lọc */
.hang-chip {
  display: flex; gap: 7px; overflow-x: auto; margin-top: 9px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hang-chip::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 7px 13px; border-radius: 999px;
  background: var(--the); border: 1px solid var(--vien);
  font-size: 13.5px; font-weight: 600; color: var(--chu-mo); white-space: nowrap;
}
.chip.chon { background: var(--chu); color: var(--nen); border-color: var(--chu); }
.chip.co-loc { border-color: var(--lam); color: var(--lam); }

/* ------------------------------------------------------------------ nội dung */
main { padding: 12px; max-width: 760px; margin: 0 auto; }

.tieu-muc {
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--chu-mo);
  margin: 16px 4px 8px; display: flex; align-items: center; gap: 8px;
}
.tieu-muc span { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* thẻ sản phẩm */
.ds { display: flex; flex-direction: column; gap: 7px; }
.the-sp {
  display: flex; align-items: center; gap: 12px;
  min-height: 68px; padding: 11px 13px;
  background: var(--the); border: 1px solid var(--vien);
  border-radius: var(--bo); box-shadow: var(--bong);
  text-align: left; width: 100%;
  transition: transform .08s ease;
}
.the-sp:active { transform: scale(.985); }
.the-sp .noi-dung { min-width: 0; flex: 1; }
.the-sp .ten {
  font-size: 15px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.the-sp .phu {
  font-size: 12px; color: var(--chu-mo); margin-top: 3px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.the-sp .phu code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; background: var(--the-2); padding: 1px 5px; border-radius: 5px;
}
.the-sp .ton { text-align: right; flex: 0 0 auto; min-width: 62px; }
.the-sp .ton b { display: block; font-size: 23px; font-weight: 700; line-height: 1.1; }
.the-sp .ton i { font-style: normal; font-size: 11px; color: var(--chu-mo); }
.ton.co  b { color: var(--xanh); }
.ton.het b { color: var(--chu-mo); }
.ton.am  b { color: var(--do); }

.canh-bao-nham {
  margin-top: 6px; font-size: 11.5px; color: var(--cam);
  background: var(--cam-nen); padding: 4px 8px; border-radius: 7px;
  display: inline-block;
}

/* trạng thái rỗng */
.rong { text-align: center; padding: 44px 20px; color: var(--chu-mo); }
.rong .to { font-size: 40px; margin-bottom: 10px; }
.rong b { display: block; color: var(--chu); font-size: 16px; margin-bottom: 5px; }

/* bảng số liệu nhanh */
.o-so { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.o-so div {
  background: var(--the); border: 1px solid var(--vien); border-radius: 11px;
  padding: 9px 6px; text-align: center;
}
.o-so b { display: block; font-size: 19px; font-weight: 700; }
.o-so small { font-size: 10.5px; color: var(--chu-mo); }

/* ------------------------------------------------------------- bảng trượt */
.man { position: fixed; inset: 0; z-index: 60; display: none; }
.man.mo { display: block; }
.man .nen-mo {
  position: absolute; inset: 0; background: rgba(0,0,0,.45);
  animation: hien .18s ease;
}
.man .tam {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--the); border-radius: 20px 20px 0 0;
  max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 16px calc(20px + var(--an-toan-duoi));
  animation: truot .22s cubic-bezier(.32,.72,0,1);
}
@keyframes hien  { from { opacity: 0 } }
@keyframes truot { from { transform: translateY(100%) } }
.tay-nam {
  width: 38px; height: 4px; border-radius: 99px; background: var(--vien);
  margin: 6px auto 12px;
}

.dau-sp .ten-to { font-size: 18px; font-weight: 700; line-height: 1.3; }
.dau-sp .phu2 { margin-top: 5px; font-size: 13px; color: var(--chu-mo); }

.bang-ct { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.bang-ct th, .bang-ct td {
  padding: 8px 6px; text-align: left; border-bottom: 1px solid var(--vien);
}
.bang-ct th { color: var(--chu-mo); font-weight: 600; font-size: 12px; }
.bang-ct td.phai, .bang-ct th.phai { text-align: right; }
.bang-ct tr:last-child td { border-bottom: none; }

.nhan {
  display: inline-block; padding: 2px 7px; border-radius: 6px;
  font-size: 11.5px; font-weight: 700;
}
.nhan.x { background: var(--do-nen);   color: var(--do); }
.nhan.n { background: var(--xanh-nen); color: var(--xanh); }
.nhan.k { background: var(--lam-nen);  color: var(--lam); }

/* ------------------------------------------------------------ thanh dưới */
.thanh-duoi {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: color-mix(in srgb, var(--the) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--vien);
  padding-bottom: var(--an-toan-duoi);
}
.thanh-duoi button {
  padding: 9px 4px 8px; font-size: 10.5px; font-weight: 600;
  color: var(--chu-mo); display: flex; flex-direction: column;
  align-items: center; gap: 3px; min-height: 54px;
}
.thanh-duoi button b { font-size: 20px; font-weight: 400; line-height: 1; }
.thanh-duoi button.chon { color: var(--lam); }

/* ------------------------------------------------------------------ khác */
.dai {
  padding: 11px 13px; border-radius: 11px; font-size: 13.5px;
  margin-bottom: 10px; line-height: 1.4;
}
.dai.do  { background: var(--do-nen);  color: var(--do);  }
.dai.cam { background: var(--cam-nen); color: var(--cam); }
.dai.lam { background: var(--lam-nen); color: var(--lam); }

.nap { text-align: center; padding: 60px 20px; color: var(--chu-mo); }
.quay {
  width: 26px; height: 26px; margin: 0 auto 12px;
  border: 2.5px solid var(--vien); border-top-color: var(--lam);
  border-radius: 50%; animation: xoay .7s linear infinite;
}
@keyframes xoay { to { transform: rotate(360deg) } }

.an { display: none !important; }

/* --------------------------------------------------------- màn đăng nhập */
.dang-nhap {
  position: fixed; inset: 0; z-index: 90;
  background: var(--nen);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 20px calc(20px + var(--an-toan-duoi));
  overflow-y: auto;
}
.dn-hop { width: 100%; max-width: 340px; text-align: center; }
.dn-hieu { font-size: 46px; line-height: 1; margin-bottom: 6px; }
.dn-hop h1 { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.dn-phu { color: var(--chu-mo); font-size: 13.5px; margin: 4px 0 22px; }

.dn-ten {
  width: 100%; height: 50px; padding: 0 15px; margin-bottom: 20px;
  border-radius: var(--bo); border: 1.5px solid var(--vien);
  background: var(--the); font-size: 17px; text-align: center; outline: none;
}
.dn-ten:focus { border-color: var(--lam); }
.dn-ten.an-di { display: none; }

/* 6 chấm hiện tiến độ nhập PIN */
.dn-cham { display: flex; gap: 13px; justify-content: center; margin-bottom: 16px; }
.dn-cham i {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--vien); background: transparent;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.dn-cham i.day { background: var(--xanh); border-color: var(--xanh); transform: scale(1.12); }
.dn-cham.rung { animation: rung .38s ease; }
@keyframes rung {
  0%,100% { transform: translateX(0) }
  22% { transform: translateX(-9px) } 44% { transform: translateX(9px) }
  66% { transform: translateX(-5px) } 88% { transform: translateX(5px) }
}
.dn-cham.rung i.day { background: var(--do); border-color: var(--do); }

.dn-bao {
  min-height: 38px; font-size: 13.5px; color: var(--do);
  padding: 0 6px 6px; line-height: 1.35;
}
.dn-bao.dang-cho { color: var(--chu-mo); }

.dn-phim {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px;
}
.dn-phim button {
  height: 66px; border-radius: 16px;
  background: var(--the); border: 1px solid var(--vien);
  font-size: 26px; font-weight: 500; box-shadow: var(--bong);
  transition: transform .07s ease, background .07s ease;
}
.dn-phim button:active { transform: scale(.94); background: var(--the-2); }
.dn-phim button.mo {
  background: transparent; border: none; box-shadow: none;
  font-size: 15px; font-weight: 600; color: var(--chu-mo);
}
.dn-phim button:disabled { opacity: .4; }

/* ô nhập trong bảng trượt */
.nhan-o {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--chu-mo);
  margin: 14px 2px 6px;
}
.o-nhap {
  width: 100%; height: 50px; padding: 0 15px;
  border-radius: var(--bo); border: 1.5px solid var(--vien);
  background: var(--the-2); font-size: 19px; outline: none;
  letter-spacing: .18em;
}
.o-nhap:focus { border-color: var(--lam); }
.nut-to {
  width: 100%; height: 56px; margin-top: 14px; border-radius: var(--bo);
  background: var(--xanh); color: #fff; font-size: 17px; font-weight: 700;
}
.nut-to:active { transform: scale(.985); }
.nut-to.phu { background: var(--the-2); color: var(--chu); border: 1px solid var(--vien); }

/* ==================================================== bảng hành động */
.hd-dau { padding: 2px 2px 10px; border-bottom: 1px solid var(--vien); }
.hd-ten { font-size: 18px; font-weight: 700; line-height: 1.28; }
.hd-phu { margin-top: 5px; font-size: 13px; color: var(--chu-mo); }
.hd-phu code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--the-2); padding: 1px 6px; border-radius: 5px; font-size: 12px;
}
.hd-ton { font-size: 16px; }
.hd-ton.co  { color: var(--xanh); }
.hd-ton.het { color: var(--chu-mo); }
.hd-ton.am  { color: var(--do); }

/* bộ tăng giảm số lượng */
.hd-so {
  display: grid; grid-template-columns: 66px 1fr 66px; gap: 10px;
  align-items: center; margin: 16px 0 14px;
}
.hd-so button {
  height: 62px; border-radius: 15px; font-size: 30px; font-weight: 300;
  background: var(--the-2); border: 1px solid var(--vien);
}
.hd-so button:active { transform: scale(.94); background: var(--vien); }
.hd-o-so {
  height: 62px; width: 100%; text-align: center;
  font-size: 34px; font-weight: 700; letter-spacing: .02em;
  border-radius: 15px; border: 1.5px solid var(--vien);
  background: var(--the-2); outline: none; -moz-appearance: textfield;
}
.hd-o-so:focus { border-color: var(--lam); }
.hd-o-so::-webkit-outer-spin-button,
.hd-o-so::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 4 nút hành động */
.hd-nut { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hd-nut button {
  min-height: 62px; border-radius: 15px; color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
}
.hd-nut button b { font-size: 19px; font-weight: 400; line-height: 1; }
.hd-nut button:active { transform: scale(.95); }
.hd-x { background: #c0362c; }
.hd-n { background: #0a7d3c; }
.hd-k { background: #1d4ed8; }
.hd-h { background: #6b7280; }
@media (prefers-color-scheme: dark) {
  .hd-x { background: #a32f26; } .hd-n { background: #0a6a34; }
  .hd-k { background: #1b45b8; } .hd-h { background: #565e6d; }
}

.hd-nhac {
  margin: 10px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--chu-mo);
}
.nhan-o .tuy { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* cổng hỏi */
.cong-tieu { font-weight: 700; line-height: 1.4; margin-bottom: 10px; }
.cong-nhom { display: flex; flex-direction: column; gap: 7px; }
.cong-nut {
  width: 100%; min-height: 48px; padding: 10px 13px; border-radius: 11px;
  background: var(--the); border: 1px solid var(--vien);
  font-size: 14px; font-weight: 600; color: var(--chu); text-align: left;
}
.cong-nut.chinh { background: var(--chu); color: var(--nen); border-color: var(--chu); }
.cong-nut:active { transform: scale(.98); }

/* thông báo trượt lên từ đáy */
.khoe {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(74px + var(--an-toan-duoi)); z-index: 70;
  background: #11151c; color: #fff; border-radius: 14px;
  padding: 13px 15px; font-size: 14px; line-height: 1.35;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.3);
  transform: translateY(140%); opacity: 0;
  transition: transform .24s cubic-bezier(.32,.72,0,1), opacity .18s;
  pointer-events: none;
}
.khoe.hien { transform: translateY(0); opacity: 1; pointer-events: auto; }
.khoe span { flex: 1; min-width: 0; }
.khoe button {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 9px;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 13.5px; font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .khoe { background: #2a303b; border: 1px solid #3a414f; }
}

.nut-xong {
  flex: 0 0 auto; align-self: center; padding: 9px 13px; border-radius: 9px;
  background: var(--the-2); border: 1px solid var(--vien);
  font-size: 12.5px; font-weight: 600; color: var(--chu-mo); white-space: nowrap;
}
.nut-xong:active { transform: scale(.96); }