/* ============================================================
   components.css — nút, ô nhập, chip, bảng, thông báo,
   sáu trạng thái màn hình. Dùng chung cho web và mobile.
   ============================================================ */

/* ------------------------------------------------------------
   Khối nội dung
   ------------------------------------------------------------ */
.khoi {
  background: var(--n-mat);
  border: var(--vien) solid var(--v-nhat);
  border-radius: var(--bo-3);
}
.khoi + .khoi { margin-top: var(--kc-6); }

.khoi__dau {
  display: flex;
  align-items: center;
  gap: var(--kc-5);
  padding: var(--kc-5) var(--kc-6);
  border-bottom: var(--vien) solid var(--v-nhat);
}
.khoi__dau h2,
.khoi__dau h3 { margin-right: auto; }

.khoi__than { padding: var(--kc-6); }
.khoi__than--khit { padding: 0; }

.khoi__chan {
  padding: var(--kc-5) var(--kc-6);
  border-top: var(--vien) solid var(--v-nhat);
  display: flex;
  align-items: center;
  gap: var(--kc-4);
}

/* ------------------------------------------------------------
   Nút
   ------------------------------------------------------------ */
.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kc-3);
  height: var(--cao-o-nhap);
  padding: 0 var(--kc-5);
  border-radius: var(--bo-2);
  border: var(--vien) solid var(--v-dam);
  background: var(--n-mat);
  color: var(--ch-chinh);
  font: inherit;
  font-size: var(--cc-3);
  font-weight: var(--dam-vua);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--nhanh) linear, border-color var(--nhanh) linear;
}
.nut:hover { background: var(--n-mat-2); }
.nut:active { background: var(--n-mat-3); }

.nut--chinh {
  background: var(--nut-chinh-nen);
  border-color: var(--nut-chinh-nen);
  color: var(--nut-chinh-chu);
}
.nut--chinh:hover { background: var(--nut-chinh-nen-ho); border-color: var(--nut-chinh-nen-ho); }

.nut--nguy-hiem {
  background: var(--n-mat);
  border-color: var(--tt-loi-vien);
  color: var(--tt-loi-chu);
}
.nut--nguy-hiem:hover { background: var(--tt-loi-nen); }

.nut--nhe {
  border-color: transparent;
  background: transparent;
  color: var(--ch-phu);
}
.nut--nhe:hover { background: var(--n-mat-2); color: var(--ch-chinh); }

.nut--chi-icon { width: var(--cao-o-nhap); padding: 0; }

.nut[disabled],
.nut[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.nut.dang-chay { pointer-events: none; color: var(--ch-phu); }
.nut.dang-chay .vong-quay { margin-right: 0; }

.nhom-nut { display: flex; gap: var(--kc-4); flex-wrap: wrap; align-items: center; }

/* Vòng quay báo đang chạy */
.vong-quay {
  width: 14px; height: 14px;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: quay 0.7s linear infinite;
  opacity: 0.85;
}
.vong-quay--lon { width: 22px; height: 22px; border-width: 2.5px; }
@keyframes quay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .vong-quay { animation-duration: 2.4s; }
}

/* ------------------------------------------------------------
   Ô nhập và form
   ------------------------------------------------------------ */
.truong { display: block; margin-bottom: var(--kc-6); }
.truong:last-child { margin-bottom: 0; }

.truong__nhan {
  display: block;
  font-size: var(--cc-3);
  font-weight: var(--dam-vua);
  color: var(--ch-phu);
  margin-bottom: var(--kc-3);
}
.truong__nhan .bat-buoc {
  color: var(--tt-loi-chu);
  margin-left: 2px;
}
.truong__goi-y {
  display: block;
  font-size: var(--cc-2);
  color: var(--ch-mo);
  margin-top: var(--kc-3);
}
.truong__loi {
  display: flex;
  align-items: flex-start;
  gap: var(--kc-3);
  font-size: var(--cc-2);
  color: var(--tt-loi-chu);
  margin-top: var(--kc-3);
}
.truong__loi .ico { margin-top: 1px; }

.o-nhap,
.o-chon,
.o-nhieu-dong {
  width: 100%;
  height: var(--cao-o-nhap);
  padding: 0 var(--kc-4);
  border: var(--vien) solid var(--v-dam);
  border-radius: var(--bo-2);
  background: var(--n-mat);
  color: var(--ch-chinh);
  font: inherit;
  font-size: var(--cc-4);
}
.o-nhieu-dong {
  height: auto;
  min-height: 72px;
  padding: var(--kc-4);
  line-height: var(--dc-thuong);
  resize: vertical;
}
.o-nhap::placeholder,
.o-nhieu-dong::placeholder { color: var(--ch-mo); }

.o-nhap:hover,
.o-chon:hover,
.o-nhieu-dong:hover { border-color: var(--ch-mo); }

.o-nhap[readonly],
.o-nhap[disabled],
.o-chon[disabled] {
  background: var(--n-mat-2);
  color: var(--ch-phu);
  cursor: not-allowed;
}

.o-chon {
  appearance: none;
  padding-right: var(--kc-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.truong--loi .o-nhap,
.truong--loi .o-chon,
.truong--loi .o-nhieu-dong {
  border-color: var(--tt-loi-vien);
  background: var(--tt-loi-nen);
}

/* Ô số có đơn vị */
.o-so { position: relative; display: block; }
.o-so .o-nhap {
  text-align: right;
  padding-right: 42px;
  font-variant-numeric: tabular-nums;
}
.o-so__don-vi {
  position: absolute;
  right: var(--kc-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--cc-2);
  color: var(--ch-mo);
  pointer-events: none;
}

/* Ô ngày — luôn hiện dd/MM/yyyy, không phụ thuộc ngôn ngữ của trình duyệt */
.o-ngay { position: relative; display: block; }
.o-ngay .o-nhap { padding-right: 34px; font-variant-numeric: tabular-nums; }
.o-ngay .ico {
  position: absolute;
  right: var(--kc-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ch-mo);
  pointer-events: none;
}

/* Ô chọn nhiều / một */
.o-tick {
  display: flex;
  align-items: flex-start;
  gap: var(--kc-4);
  font-size: var(--cc-4);
  cursor: pointer;
  padding: var(--kc-2) 0;
}
.o-tick input { margin: 3px 0 0; width: 15px; height: 15px; accent-color: var(--v-tieu-diem); flex: none; }

/* Nhóm trường */
.nhom-truong {
  border: var(--vien) solid var(--v-nhat);
  border-radius: var(--bo-3);
  padding: var(--kc-6);
  margin: 0 0 var(--kc-6);
  background: var(--n-mat);
}
.nhom-truong > legend {
  padding: 0 var(--kc-3);
  margin-left: calc(var(--kc-3) * -1);
  font-size: var(--cc-3);
  font-weight: var(--dam-manh);
  color: var(--ch-chinh);
}
.nhom-truong__mo-ta {
  font-size: var(--cc-2);
  color: var(--ch-mo);
  margin: var(--kc-2) 0 var(--kc-6);
}

.hang-truong {
  display: grid;
  gap: var(--kc-5) var(--kc-6);
  grid-template-columns: repeat(var(--cot, 2), minmax(0, 1fr));
}
.hang-truong .truong { margin-bottom: 0; }

/* ------------------------------------------------------------
   Chip trạng thái
   ------------------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-3);
  height: 21px;
  padding: 0 var(--kc-4) 0 var(--kc-3);
  border-radius: var(--bo-1);
  border: var(--vien) solid var(--tt-cho-vien);
  background: var(--tt-cho-nen);
  color: var(--tt-cho-chu);
  font-size: var(--cc-2);
  font-weight: var(--dam-vua);
  line-height: 1;
  white-space: nowrap;
  vertical-align: 1px;
}
.chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.chip--ok    { border-color: var(--tt-ok-vien);    background: var(--tt-ok-nen);    color: var(--tt-ok-chu); }
.chip--canh  { border-color: var(--tt-canh-vien);  background: var(--tt-canh-nen);  color: var(--tt-canh-chu); }
.chip--loi   { border-color: var(--tt-loi-vien);   background: var(--tt-loi-nen);   color: var(--tt-loi-chu); }
.chip--tin   { border-color: var(--tt-tin-vien);   background: var(--tt-tin-nen);   color: var(--tt-tin-chu); }
.chip--ngoai { border-color: var(--tt-ngoai-vien); background: var(--tt-ngoai-nen); color: var(--tt-ngoai-chu); }

.chip--dang-chay::before {
  animation: nhap-nhay 1.4s ease-in-out infinite;
}
@keyframes nhap-nhay { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .chip--dang-chay::before { animation: none; }
}

.day-chip { display: flex; flex-wrap: wrap; gap: var(--kc-4); align-items: center; }

/* ------------------------------------------------------------
   Bảng dữ liệu
   ------------------------------------------------------------ */
.vung-bang { width: 100%; overflow-x: auto; }

.bang {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cc-4);
}
.bang th,
.bang td {
  text-align: left;
  padding: var(--kc-4) var(--kc-5);
  border-bottom: var(--vien) solid var(--v-nhat);
  vertical-align: top;
}
.bang thead th {
  background: var(--n-mat-2);
  font-size: var(--cc-2);
  font-weight: var(--dam-manh);
  color: var(--ch-phu);
  white-space: nowrap;
  padding: 0;
  border-bottom-color: var(--v-dam);
}
.bang thead th .nhan-cot {
  display: flex;
  align-items: center;
  gap: var(--kc-3);
  width: 100%;
  padding: var(--kc-4) var(--kc-5);
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}
.bang thead th .nhan-cot:hover { color: var(--ch-chinh); background: var(--n-mat-3); }
.bang thead th.so .nhan-cot { justify-content: flex-end; }
.bang thead th.khong-xep { padding: var(--kc-4) var(--kc-5); }
.bang thead th .ico-xep { opacity: 0.35; }
.bang thead th[aria-sort] .ico-xep { opacity: 1; }
.bang thead th[aria-sort] { color: var(--ch-chinh); }

.bang tbody tr:hover { background: var(--n-mat-2); }
.bang td.so { text-align: right; white-space: nowrap; }
.bang td.giua { text-align: center; }
.bang .phu-trong-o {
  display: block;
  font-size: var(--cc-2);
  color: var(--ch-mo);
  margin-top: 1px;
}
.bang tbody tr.hang--chu-y td:first-child {
  box-shadow: inset 3px 0 0 var(--tt-canh-vien);
}
.bang tbody tr.hang--chu-y { background: color-mix(in srgb, var(--tt-canh-nen) 55%, transparent); }
.bang tbody tr:last-child td { border-bottom: 0; }
.bang .o-hep { width: 1%; white-space: nowrap; }

/* Thanh công cụ trên bảng */
.thanh-cong-cu {
  display: flex;
  align-items: center;
  gap: var(--kc-4);
  flex-wrap: wrap;
  padding: var(--kc-5) var(--kc-6);
  border-bottom: var(--vien) solid var(--v-nhat);
}
.thanh-cong-cu .day-phai { margin-left: auto; display: flex; gap: var(--kc-4); }

.o-tim { position: relative; flex: 0 1 260px; }
.o-tim .ico {
  position: absolute; left: var(--kc-4); top: 50%;
  transform: translateY(-50%);
  color: var(--ch-mo);
  pointer-events: none;
}
.o-tim .o-nhap { padding-left: 30px; }

.o-chon--nho { width: auto; min-width: 132px; font-size: var(--cc-3); }

/* Phân trang */
.phan-trang {
  display: flex;
  align-items: center;
  gap: var(--kc-4);
  padding: var(--kc-5) var(--kc-6);
  border-top: var(--vien) solid var(--v-nhat);
  font-size: var(--cc-3);
  color: var(--ch-phu);
}
.phan-trang .day-phai { margin-left: auto; display: flex; align-items: center; gap: var(--kc-3); }
.phan-trang .so-trang { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Thông báo
   ------------------------------------------------------------ */
.thong-bao {
  display: flex;
  gap: var(--kc-5);
  padding: var(--kc-5) var(--kc-6);
  border: var(--vien) solid var(--tt-tin-vien);
  border-left-width: 3px;
  border-radius: var(--bo-2);
  background: var(--tt-tin-nen);
  color: var(--ch-chinh);
}
.thong-bao + .thong-bao { margin-top: var(--kc-5); }
.thong-bao > .ico { margin-top: 2px; color: var(--tt-tin-chu); }
.thong-bao__than { flex: 1; min-width: 0; }
.thong-bao__dau {
  font-size: var(--cc-4);
  font-weight: var(--dam-manh);
  margin-bottom: var(--kc-2);
}
.thong-bao__noi-dung { font-size: var(--cc-3); color: var(--ch-phu); }
.thong-bao__noi-dung p { margin-bottom: var(--kc-3); }
.thong-bao__hanh-dong { margin-top: var(--kc-5); display: flex; gap: var(--kc-4); flex-wrap: wrap; }

.thong-bao--ok    { border-color: var(--tt-ok-vien);    background: var(--tt-ok-nen); }
.thong-bao--ok > .ico { color: var(--tt-ok-chu); }
.thong-bao--canh  { border-color: var(--tt-canh-vien);  background: var(--tt-canh-nen); }
.thong-bao--canh > .ico { color: var(--tt-canh-chu); }
.thong-bao--loi   { border-color: var(--tt-loi-vien);   background: var(--tt-loi-nen); }
.thong-bao--loi > .ico { color: var(--tt-loi-chu); }
.thong-bao--ngoai { border-color: var(--tt-ngoai-vien); background: var(--tt-ngoai-nen); }
.thong-bao--ngoai > .ico { color: var(--tt-ngoai-chu); }

/* ------------------------------------------------------------
   Sáu trạng thái màn hình
   ------------------------------------------------------------ */
.trang-thai-man-hinh {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--kc-4);
  padding: var(--kc-11) var(--kc-6);
  color: var(--ch-phu);
}
.trang-thai-man-hinh__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--n-mat-2);
  border: var(--vien) solid var(--v-nhat);
  color: var(--ch-mo);
  margin-bottom: var(--kc-2);
}
.trang-thai-man-hinh__dau {
  font-size: var(--cc-5);
  font-weight: var(--dam-manh);
  color: var(--ch-chinh);
}
.trang-thai-man-hinh__noi-dung {
  font-size: var(--cc-3);
  max-width: 46ch;
}
.trang-thai-man-hinh .nhom-nut { margin-top: var(--kc-4); justify-content: center; }

.trang-thai-man-hinh--loi .trang-thai-man-hinh__icon {
  background: var(--tt-loi-nen); border-color: var(--tt-loi-vien); color: var(--tt-loi-chu);
}
.trang-thai-man-hinh--ngoai .trang-thai-man-hinh__icon {
  background: var(--tt-ngoai-nen); border-color: var(--tt-ngoai-vien); color: var(--tt-ngoai-chu);
}
.trang-thai-man-hinh--cho .trang-thai-man-hinh__icon,
.trang-thai-man-hinh--thieu .trang-thai-man-hinh__icon {
  background: var(--tt-canh-nen); border-color: var(--tt-canh-vien); color: var(--tt-canh-chu);
}

/* Khung xương lúc đang tải */
.xuong {
  background: var(--n-mat-2);
  border-radius: var(--bo-1);
  height: 11px;
}
.xuong--dai { width: 100%; }
.xuong--vua { width: 62%; }
.xuong--ngan { width: 34%; }
.hang-xuong { display: flex; gap: var(--kc-6); padding: var(--kc-5) var(--kc-6); border-bottom: var(--vien) solid var(--v-nhat); }
.hang-xuong > * { flex: 1; }

/* ------------------------------------------------------------
   Dải nhắc dữ liệu giả
   ------------------------------------------------------------ */
.dai-du-lieu-gia {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kc-3);
  min-height: var(--cao-dai-canh-bao);
  padding: var(--kc-2) var(--kc-5);
  text-align: center;
  line-height: 1.35;
  background: var(--tt-canh-nen);
  border-bottom: var(--vien) solid var(--tt-canh-vien);
  color: var(--tt-canh-chu);
  font-size: var(--cc-2);
  font-weight: var(--dam-vua);
}

/* ------------------------------------------------------------
   Ghi chú "chờ Marou" — dùng ở mọi chỗ còn để trống
   ------------------------------------------------------------ */
.cho-marou {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-3);
  font-size: var(--cc-2);
  color: var(--ch-mo);
}
.cho-marou .ico { color: var(--tt-canh-chu); }

/* "Hỏi Marou": câu hỏi để ngay trên màn hình, bấm mở tấm bên */
.hoi-marou {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-2);
  padding: 2px var(--kc-3) 2px var(--kc-2);
  border: var(--vien) solid var(--tt-canh-vien);
  border-radius: var(--bo-2);
  background: var(--tt-canh-nen);
  color: var(--tt-canh-chu);
  font: inherit;
  font-size: var(--cc-2);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  vertical-align: middle;
  max-width: 100%;
}
.hoi-marou:hover { border-color: var(--tt-canh-chu); }
.hoi-marou .ico { color: var(--tt-canh-chu); flex: none; }
.hoi-marou__hop { border-left: 3px solid var(--tt-canh-vien); background: var(--tt-canh-nen); padding: var(--kc-4) var(--kc-5); border-radius: var(--bo-2); }

/* Chữ bấm được trong câu, mở cùng hộp thoại câu hỏi */
.hoi-lien-ket {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--tt-canh-chu);
  text-align: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hoi-lien-ket:hover { text-decoration-style: solid; }

/* Hạng gợi ý trên phiếu bean selection */
.hang-goi-y { display: inline-flex; align-items: center; gap: var(--kc-3); padding: var(--kc-2) var(--kc-4); border-radius: var(--bo-2); font-weight: var(--dam-manh); font-size: var(--cc-5); }
.hang-goi-y--AA, .hang-goi-y--A, .hang-goi-y--AA\/A { background: var(--tt-ok-nen); color: var(--tt-ok-chu); border: var(--vien) solid var(--tt-ok-vien); }
.hang-goi-y--B { background: var(--tt-canh-nen); color: var(--tt-canh-chu); border: var(--vien) solid var(--tt-canh-vien); }
.hang-goi-y--BL { background: var(--tt-loi-nen); color: var(--tt-loi-chu); border: var(--vien) solid var(--tt-loi-vien); }
.hang-goi-y--trong { background: var(--n-mat-2); color: var(--ch-mo); border: var(--vien) solid var(--v-nhat); }

/* Ô số tổng trên dashboard */
.o-so-lon { display: grid; gap: var(--kc-2); padding: var(--kc-5) var(--kc-6); border: var(--vien) solid var(--v-nhat); border-radius: var(--bo-3); background: var(--n-mat); }
.o-so-lon__so { font-size: 28px; font-weight: var(--dam-manh); font-variant-numeric: tabular-nums; line-height: 1.1; }
.o-so-lon__nhan { font-size: var(--cc-2); color: var(--ch-phu); }
.o-so-lon__phu { font-size: var(--cc-2); color: var(--ch-mo); }
.thanh-ti-le { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--n-mat-3); }
.thanh-ti-le span { display: block; height: 100%; }

.o-trong {
  color: var(--ch-mo);
  font-style: italic;
}

/* ------------------------------------------------------------
   Cặp nhãn – giá trị
   Dùng ở thẻ, ở khối tóm tắt, ở đầu màn chi tiết. Nhãn nhỏ nằm
   trên, giá trị nằm dưới. Giá trị là số thì thêm class "so".
   ------------------------------------------------------------ */
.cap { min-width: 0; }
.cap__nhan {
  display: block;
  font-size: var(--cc-2);
  color: var(--ch-mo);
  margin-bottom: 1px;
}
.cap__gt {
  display: block;
  font-size: var(--cc-4);
  color: var(--ch-chinh);
}
.cap__gt.so { font-variant-numeric: tabular-nums; }
.cap--noi .cap__gt { font-size: var(--cc-5); font-weight: var(--dam-vua); }

.day-cap {
  display: grid;
  grid-template-columns: repeat(var(--cot, 3), minmax(0, 1fr));
  gap: var(--kc-5) var(--kc-6);
}

/* ------------------------------------------------------------
   Thẻ bấm được
   Một khối nội dung mà cả thẻ là vùng bấm. Dùng cho dòng mẻ
   trong PO, hồ sơ trong danh sách, phiếu trong danh sách.
   ------------------------------------------------------------ */
.the-bam {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--n-mat);
  border: var(--vien) solid var(--v-nhat);
  border-radius: var(--bo-3);
  padding: var(--kc-5) var(--kc-6);
  cursor: pointer;
  transition: border-color var(--nhanh) linear, background var(--nhanh) linear;
}
.the-bam:hover { background: var(--n-mat-2); border-color: var(--v-dam); }
.the-bam + .the-bam { margin-top: var(--kc-5); }

.the-bam__dau {
  display: flex;
  align-items: center;
  gap: var(--kc-4);
  margin-bottom: var(--kc-5);
}
.the-bam__ten { font-size: var(--cc-5); font-weight: var(--dam-vua); margin-right: auto; }
.the-bam__dau .ico { color: var(--ch-mo); flex: none; }

/* Thẻ còn thiếu dữ liệu: viền trái đậm, không tô cả thẻ để
   màn hình không bị loang màu cảnh báo. */
.the-bam--thieu { border-left: 3px solid var(--tt-canh-vien); }

/* Dòng cảnh báo gọn trong thẻ, nhẹ hơn .thong-bao */
.ghi-canh {
  display: flex;
  align-items: flex-start;
  gap: var(--kc-3);
  margin-top: var(--kc-5);
  padding: var(--kc-4) var(--kc-5);
  border-radius: var(--bo-2);
  background: var(--tt-canh-nen);
  color: var(--tt-canh-chu);
  font-size: var(--cc-2);
  line-height: var(--dc-thuong);
  text-align: left;
}
.ghi-canh .ico { flex: none; margin-top: 1px; }

/* ------------------------------------------------------------
   Hàng chọn được trong một danh sách hẹp
   Dùng cho cột trái của màn "danh sách + chi tiết".
   ------------------------------------------------------------ */
.hang-chon {
  display: flex;
  align-items: center;
  gap: var(--kc-5);
  width: 100%;
  padding: var(--kc-5) var(--kc-6);
  background: var(--n-mat);
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: var(--vien) solid var(--v-nhat);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.hang-chon:hover { background: var(--n-mat-2); }
.hang-chon[aria-current="true"] {
  background: var(--n-mat-2);
  border-left-color: var(--ch-chinh);
}
.hang-chon__chu { flex: 1; min-width: 0; }
.hang-chon__ten { font-size: var(--cc-4); font-weight: var(--dam-vua); }
.hang-chon__phu {
  display: flex;
  align-items: center;
  gap: var(--kc-4);
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: var(--cc-2);
  color: var(--ch-phu);
}
.hang-chon__so {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: var(--cc-3);
  color: var(--ch-phu);
}

/* ------------------------------------------------------------
   Khối mở ra thu vào (<details class="khoi">)
   ------------------------------------------------------------ */
.khoi > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--kc-5);
  padding: var(--kc-5) var(--kc-6);
  cursor: pointer;
  font-size: var(--cc-4);
  font-weight: var(--dam-vua);
}
.khoi > summary::-webkit-details-marker { display: none; }
.khoi > summary:hover { background: var(--n-mat-2); }
.khoi[open] > summary { border-bottom: var(--vien) solid var(--v-nhat); }
.khoi > summary .ico-mo { margin-left: auto; color: var(--ch-mo); }
.khoi[open] > summary .ico-mo { transform: rotate(180deg); }

/* Hàng tổng của bảng nhỏ */
.bang tfoot td {
  font-weight: var(--dam-manh);
  border-top: 2px solid var(--v-dam);
  background: var(--n-mat-2);
}

/* ------------------------------------------------------------
   Tờ in xem trước (màn 1.3)
   Mô phỏng bố cục mẫu in của Marou bằng HTML, nền giấy trắng cả ở
   chủ đề tối vì người xem cần hình dung tờ giấy. Không có logo,
   không màu thương hiệu. Chưa sinh PDF.
   ------------------------------------------------------------ */
.to-in {
  background: #ffffff;
  color: #1d1b19;
  border: var(--vien) solid var(--v-dam);
  padding: var(--kc-9) var(--kc-10);
  font-size: var(--cc-3);
  line-height: 1.45;
  max-width: 820px;
  margin: 0 auto;
  box-shadow: var(--do-bong-noi);
}
.to-in * { color: inherit; }
.to-in h2, .to-in h3 { margin: 0; color: inherit; }
.to-in h2 { font-size: var(--cc-5); letter-spacing: 0.02em; text-align: center; }
.to-in h3 { font-size: var(--cc-4); }
.to-in .to-in__ma { font-size: var(--cc-1); color: #6b655d; text-align: right; line-height: 1.35; }
.to-in .to-in__dau { display: grid; grid-template-columns: 1fr auto; gap: var(--kc-6); align-items: start; margin-bottom: var(--kc-6); }
.to-in .to-in__hai { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kc-4) var(--kc-8); margin-bottom: var(--kc-6); }
.to-in .to-in__hai > div { display: flex; gap: var(--kc-3); }
.to-in .to-in__nhan { color: #6b655d; white-space: nowrap; }
.to-in .to-in__gt { font-weight: var(--dam-vua); }
.to-in table { width: 100%; border-collapse: collapse; margin: var(--kc-4) 0 var(--kc-6); }
.to-in th, .to-in td { border: 1px solid #b9b3a8; padding: var(--kc-3) var(--kc-4); vertical-align: top; text-align: left; }
.to-in th { background: #f1efea; font-weight: var(--dam-vua); font-size: var(--cc-2); }
.to-in td.so, .to-in th.so { text-align: right; font-variant-numeric: tabular-nums; }
.to-in tr.to-in__tong td { font-weight: var(--dam-manh); }
.to-in .to-in__trong { color: #9a9388; }
.to-in .to-in__ghi-chu { font-size: var(--cc-2); color: #4e4841; margin: var(--kc-4) 0; }
.to-in .to-in__ky { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kc-8); margin-top: var(--kc-9); text-align: center; }
.to-in .to-in__ky > div { padding-top: var(--kc-4); }
.to-in .to-in__ky .to-in__khung-ky { height: 64px; border-bottom: 1px dashed #b9b3a8; margin: var(--kc-4) var(--kc-8) var(--kc-3); }
.to-in .cho-marou { color: var(--tt-canh-chu); }
.to-in .so-ky-thuat { color: inherit; }

/* Vùng đặt tờ in: nền chìm để tờ giấy nổi lên, cả hai chủ đề */
.vung-to-in {
  background: var(--n-mat-3);
  padding: var(--kc-8);
  border-radius: var(--bo-3);
  overflow-x: auto;
}

/* ------------------------------------------------------------
   Tấm bên (màn 3.1) — trượt từ mép phải cho thông tin phụ
   ------------------------------------------------------------ */
.tam-ben__nen {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(23, 21, 18, 0.28);
}
.tam-ben {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  max-width: 100vw;
  background: var(--n-mat);
  border-left: var(--vien) solid var(--v-dam);
  box-shadow: var(--do-bong-noi);
  display: flex; flex-direction: column;
}
.tam-ben__dau {
  display: flex; align-items: flex-start; gap: var(--kc-5);
  padding: var(--kc-6);
  border-bottom: var(--vien) solid var(--v-nhat);
}
.tam-ben__dau > div:first-child { flex: 1; min-width: 0; }
.tam-ben__ten { font-size: var(--cc-5); font-weight: var(--dam-manh); }
.tam-ben__than { flex: 1; overflow-y: auto; padding: var(--kc-6); }
.tam-ben__than .khoi + .khoi { margin-top: var(--kc-5); }

/* Hộp thoại giữa màn hình (câu hỏi Marou), nằm trên tấm bên */
.hop-thoai__nen {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(23, 21, 18, 0.36);
}
.hop-thoai {
  position: fixed; z-index: 51;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-width: calc(100vw - 32px); max-height: calc(100vh - 48px);
  background: var(--n-mat);
  border: var(--vien) solid var(--v-dam);
  border-radius: var(--bo-3);
  box-shadow: var(--do-bong-noi);
  display: flex; flex-direction: column;
}
.hop-thoai__dau {
  display: flex; align-items: flex-start; gap: var(--kc-5);
  padding: var(--kc-5) var(--kc-6);
  border-bottom: var(--vien) solid var(--v-nhat);
}
.hop-thoai__dau > div:first-child { flex: 1; min-width: 0; }
.hop-thoai__ten { font-size: var(--cc-5); font-weight: var(--dam-manh); }
.hop-thoai__than { overflow-y: auto; padding: var(--kc-6); }