/* HAWA-SCAN — giao dien chung cho app dien thoai va trang doc cong. Chu to, nut to, de bam ngoai hien truong. */
:root {
  --xanh-dam: #0b3d91; --xanh: #1557c0; --nen: #f2f4f8; --the: #ffffff; --vien: #d5dbe6;
  --chu: #17202e; --chu-phu: #5a6577; --tot: #1a7f37; --tot-nen: #e3f4e7;
  --vang: #9a5b00; --vang-nen: #fff3d6; --do: #c62828; --do-nen: #fde7e7; --xam-nen: #e6e9ef;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--nen); color: var(--chu);
  font: 17px/1.45 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
h1 { font-size: 21px; margin: 0 0 8px; }
p { margin: 6px 0; }
.an { display: none; }
.dang-mo { padding: 40px 16px; text-align: center; color: var(--chu-phu); }

.dau {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  background: var(--xanh-dam); color: #fff; padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top));
}
.dau-ten { font-weight: 700; font-size: 19px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dau-nguoi { font-size: 14px; opacity: .9; max-width: 45%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dau-lui { background: transparent; border: 0; color: #fff; font-size: 30px; line-height: 1; padding: 0 10px 4px 0; min-width: 40px; min-height: 40px; }

.than { max-width: 720px; margin: 0 auto; padding: 12px 12px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.the { background: var(--the); border: 1px solid var(--vien); border-radius: 12px; padding: 14px; }
.the-do { border-color: var(--do); background: var(--do-nen); margin: 16px; }
.muc { font-weight: 600; color: var(--chu-phu); margin-top: 2px; }
.chu-nho { font-size: 14px; color: var(--chu-phu); margin: 0; }

.trang-thai { border-radius: 10px; padding: 10px 12px; font-weight: 600; font-size: 16px; }
.tt-xanh { background: var(--tot-nen); color: var(--tot); }
.tt-vang { background: var(--vang-nen); color: var(--vang); }
.tt-do { background: var(--do-nen); color: var(--do); }
.tt-xam { background: var(--xam-nen); color: var(--chu-phu); }

.nut {
  appearance: none; border: 1px solid var(--vien); background: #fff; color: var(--chu); border-radius: 10px;
  padding: 12px 16px; font: inherit; font-weight: 600; min-height: 48px; cursor: pointer;
}
.nut:active { background: var(--xam-nen); }
.nut:disabled { opacity: .5; cursor: default; }
.nut-chinh { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.nut-chinh:active { background: var(--xanh-dam); }
.nut-do { background: var(--do); border-color: var(--do); color: #fff; }
.nut-to { min-height: 56px; font-size: 19px; width: 100%; }
.nut-nho { min-height: 38px; padding: 6px 14px; font-size: 15px; margin-top: 8px; }
.nut-mo { background: transparent; border-style: dashed; color: var(--chu-phu); }
.hang-nut { display: flex; gap: 10px; }
.hang-nut .nut { flex: 1; }

.luoi-gieng { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.nut-gieng {
  appearance: none; border: 1px solid var(--vien); background: #fff; border-radius: 12px; min-height: 68px; padding: 8px 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; color: var(--chu); cursor: pointer;
}
.nut-gieng:active { background: var(--xam-nen); }
.gieng-ten { font-weight: 700; font-size: 19px; }
.gieng-phu { font-size: 13px; color: var(--chu-phu); min-height: 18px; }
.gieng-xong { background: var(--tot-nen); border-color: #9fd3ab; }
.gieng-xong .gieng-phu { color: var(--tot); }
.gieng-cho { background: var(--vang-nen); border-color: #e5c477; }
.gieng-cho .gieng-phu { color: var(--vang); }

.hang-o { padding: 8px 0; border-bottom: 1px solid var(--xam-nen); }
.hang-o:last-of-type { border-bottom: 0; }
.nhan-o { display: block; font-weight: 600; margin-bottom: 4px; }
.don-vi { font-weight: 400; color: var(--chu-phu); }
.o-va-anh { display: flex; align-items: center; gap: 8px; }
.o-so, .o-chu, .o-ma, .o-thuong {
  font: inherit; color: var(--chu); background: #fff; border: 1.5px solid var(--vien); border-radius: 10px; padding: 10px 12px; width: 100%;
}
.o-so { font-size: 22px; font-weight: 600; flex: 1; min-width: 0; min-height: 50px; }
.o-so:focus, .o-chu:focus, .o-ma:focus, .o-thuong:focus { outline: 0; border-color: var(--xanh); box-shadow: 0 0 0 3px rgba(21, 87, 192, .18); }
.o-sai { border-color: var(--do); }
.o-ma { font-size: 30px; letter-spacing: 8px; text-align: center; margin: 8px 0; }
.nut-anh { min-height: 50px; padding: 8px 12px; font-size: 15px; white-space: nowrap; }
.khung-anh { position: relative; display: inline-flex; }
.anh-nho { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; border: 1px solid var(--vien); display: block; }
.nut-bo-anh { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--do); color: #fff; font-size: 16px; line-height: 1; padding: 0; }
.lan-truoc { font-size: 14px; color: var(--chu-phu); margin-top: 3px; }
.loi-o { color: var(--do); font-size: 15px; min-height: 0; margin-top: 3px; }
.ds-ten { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.nut-ten { text-align: left; font-size: 18px; }

.the-ban-ghi { padding: 12px; }
.bg-dau { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.bg-so { margin-top: 4px; }
.bg-ghi-chu { margin-top: 2px; color: var(--chu-phu); }
.chip { border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600; margin-left: auto; white-space: nowrap; }
.chip-xanh { background: var(--tot-nen); color: var(--tot); }
.chip-vang { background: var(--vang-nen); color: var(--vang); }
.chip-do { background: var(--do-nen); color: var(--do); }
.chip-xam { background: var(--xam-nen); color: var(--chu-phu); }

/* Hop xac nhan dung chung */
.hop-nen { position: fixed; inset: 0; z-index: 50; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 14px; }
.hop { background: #fff; border-radius: 14px; width: 100%; max-width: 480px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
.hop-tieu-de { font-weight: 700; font-size: 19px; padding: 14px 16px 8px; }
.hop-than { padding: 0 16px 8px; overflow-y: auto; }
.hop-dong { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--xam-nen); }
.hop-nhan { color: var(--chu-phu); }
.hop-gia-tri { font-weight: 700; text-align: right; }
.hop-dong-canh-bao .hop-gia-tri { color: var(--vang); }
.hop-canh-bao { flex-basis: 100%; background: var(--vang-nen); color: var(--vang); border-radius: 8px; padding: 4px 8px; font-size: 15px; }
.hop-ghi-chu { color: var(--chu-phu); font-size: 15px; padding: 8px 0 2px; }
.hop-nut { display: flex; gap: 10px; padding: 10px 16px 16px; }
.hop-nut .nut { flex: 1; }

.thong-bao {
  position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60; max-width: 696px; margin: 0 auto;
  border-radius: 12px; padding: 12px 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.thong-bao-xanh { background: var(--tot); color: #fff; }
.thong-bao-do { background: var(--do); color: #fff; }
.thong-bao-vang { background: #7a4a00; color: #fff; }

/* ---------------- Trang doc cong (man hinh may tinh) ---------------- */
.dc .than { max-width: 1280px; }
.dc-tab { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-tab .nut { min-height: 40px; padding: 8px 14px; }
.dc-tab .dang-chon { background: var(--xanh-dam); border-color: var(--xanh-dam); color: #fff; }
.dc-loc { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dc-loc .o-thuong { width: auto; min-height: 42px; padding: 6px 10px; }
.dc-dem { display: flex; gap: 8px; flex-wrap: wrap; }
.dc-dem .o-dem { background: #fff; border: 1px solid var(--vien); border-radius: 10px; padding: 8px 14px; min-width: 120px; }
.o-dem b { display: block; font-size: 22px; }
.o-dem span { font-size: 14px; color: var(--chu-phu); }
.bang-khung { overflow-x: auto; background: #fff; border: 1px solid var(--vien); border-radius: 12px; }
table.bang { border-collapse: collapse; width: 100%; font-size: 15px; }
.bang th, .bang td { padding: 7px 9px; border-bottom: 1px solid var(--xam-nen); text-align: left; white-space: nowrap; }
.bang th { background: #f7f9fc; position: sticky; top: 0; font-weight: 700; }
.bang td.so { text-align: right; font-variant-numeric: tabular-nums; }
.bang td.dai { white-space: normal; min-width: 160px; }
.bang tr.da-huy td { color: #98a1b0; text-decoration: line-through; }
.bang tr.da-huy td.khong-gach { text-decoration: none; }
.so-canh-bao { color: var(--vang); font-weight: 700; }
.dc-hang { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.dc-hang .o-thuong { width: auto; flex: 1; min-width: 180px; }
.ma-lon { font-size: 30px; font-weight: 700; letter-spacing: 6px; }
.anh-lon { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }
a.lien-ket { color: var(--xanh); cursor: pointer; text-decoration: underline; }

@media (max-width: 360px) { .luoi-gieng { grid-template-columns: repeat(3, 1fr); } }