/* Quản lý thư viện trường — mọi lớp tiền tố tv- (tệp này nạp ở mọi trang). */
.tv-an { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden].nut, .tv-quay [hidden] { display: none !important; }
.tv-dau { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; font-size: .875rem; }
.tv-dau__ve { color: var(--phu); text-decoration: none; font-weight: 600; font-size: .875rem; margin: 0; }
.tv-dau__ve:hover { color: var(--c-dam); }
.tv-dau__ve::after { content: "›"; margin-left: 10px; color: var(--phu); }
.tv-dau__ten { font-weight: 700; color: var(--c-dam); }
.tv-nav { margin-bottom: 16px; }
.tv-h1 { font-size: 1.35rem; margin: 0 0 12px; }
.tieu-de-trang .tv-h1 { margin: 0; }
.tv-h2 { margin-top: 18px; }
.tv-chu-do { color: var(--do); }
.tv-ma { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .03em; }
.tv-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.tv-fs h2:first-child { margin-top: 0; }

/* Danh sách thư viện */
.tv-luoi-tv { display: grid; gap: 12px; margin-bottom: 14px; }
@media (min-width: 720px) { .tv-luoi-tv { grid-template-columns: 1fr 1fr; } }
.tv-o-tv { margin: 0; }
.tv-o-tv h2 { margin: 0 0 2px; }
.tv-o-tv h2 a { color: var(--chu); text-decoration: none; }
.tv-o-tv h2 a:hover { color: var(--c-dam); }
.tv-o-tv__so { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .9375rem; }

/* Ô số liệu */
.tv-so { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
@media (min-width: 640px) { .tv-so { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .tv-so { grid-template-columns: repeat(6, 1fr); } }
.tv-so__o { display: flex; flex-direction: column; background: var(--the); border: 1px solid var(--vien); border-radius: var(--r); padding: 12px 14px;
  text-decoration: none; color: var(--chu); }
a.tv-so__o:hover { border-color: var(--c-vien); }
.tv-so__o b { font-size: 1.6rem; line-height: 1.2; color: var(--c-dam); font-variant-numeric: tabular-nums; }
.tv-so__o span { font-size: .8125rem; color: var(--phu); }
.tv-so__o--do b { color: var(--do); }
.tv-viec { margin-bottom: 14px; }
.tv-buoc { margin: 0; padding-left: 1.3em; }
.tv-buoc li { margin-bottom: 6px; }

/* Tìm kiếm */
.tv-tim { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tv-tim input, .tv-tim select { flex: 1 1 220px; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #cfd6d1; border-radius: var(--r-nho); font: inherit; background: #fff; }
.tv-tim select { flex: 0 1 160px; }

/* Bảng */
.tv-bang-cuon { overflow-x: auto; }
.tv-bang { width: 100%; border-collapse: collapse; background: var(--the); font-size: .9375rem; }
.tv-bang th, .tv-bang td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--vien); vertical-align: top; }
.tv-bang th { font-size: .8125rem; color: var(--phu); font-weight: 700; background: #f8f9f7; }
.tv-bang td a { color: var(--chu); font-weight: 600; text-decoration: none; }
.tv-bang td a:hover { color: var(--c-dam); text-decoration: underline; }
.tv-cot-chon { width: 36px; }
.tv-cot-chon input, .tv-qh__ten input, .tv-chon-het input { width: 20px; height: 20px; accent-color: var(--c); }
.tv-bang--gon { font-size: .875rem; }
.tv-bang--gon th, .tv-bang--gon td { padding: 6px 8px; }
.tv-duoi-bang { margin: 12px 0; }
.tv-hang-form { display: inline-flex; gap: 6px; align-items: center; margin: 0 6px 4px 0; }
.tv-hang-form select { min-height: 36px; padding: 4px 8px; border: 1px solid #cfd6d1; border-radius: var(--r-nho); font: inherit; font-size: .875rem; background: #fff; }
.tv-cot { display: inline-block; height: 10px; width: calc(var(--w) * 1.2); max-width: 120px; min-width: 2px; margin-right: 8px; background: var(--c); border-radius: 3px; vertical-align: middle; }
.tv-trang { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 10px 0; }
.tv-chon-het, .tv-qh__ten { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
@media (max-width: 640px) {
  .tv-bang-cuon .tv-bang thead { display: none; }
  .tv-bang-cuon .tv-bang, .tv-bang-cuon .tv-bang tbody, .tv-bang-cuon .tv-bang tr, .tv-bang-cuon .tv-bang td { display: block; width: auto; }
  .tv-bang-cuon .tv-bang tr { position: relative; border-bottom: 1px solid var(--vien); padding: 8px 0 8px 40px; }
  .tv-bang-cuon .tv-bang td { border: 0; padding: 2px 8px; }
  .tv-bang-cuon .tv-bang td[data-nhan]::before { content: attr(data-nhan) ": "; color: var(--phu); font-size: .8125rem; }
  .tv-bang-cuon .tv-bang td[data-nhan="Nhan đề"]::before, .tv-bang-cuon .tv-bang td[data-nhan="Họ tên"]::before, .tv-bang-cuon .tv-bang td[data-nhan="Sách"]::before { content: none; }
  .tv-bang-cuon .tv-bang td.tv-cot-chon { position: absolute; left: 4px; top: 10px; padding: 0; }
  .tv-bang-cuon .tv-bang tr:not(:has(.tv-cot-chon)) { padding-left: 0; }
}

/* Đầu sách */
.tv-sach { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.tv-sach__bia { width: 110px; height: auto; border-radius: 6px; border: 1px solid var(--vien); flex: none; }
.tv-sach__than { flex: 1; min-width: 0; }
.tv-tt { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 16px; margin: 0 0 12px; }
.tv-tt dt { font-size: .8125rem; color: var(--phu); }
.tv-tt dd { margin: 0; font-weight: 600; }
.tv-them-ban { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--vien); }
.tv-isbn { display: flex; gap: 8px; align-items: flex-start; grid-column: 1 / -1; }
.tv-isbn .field { flex: 1; }
.tv-isbn > .nut { margin-top: 29px; flex: none; }

/* Quầy mượn trả */
.tv-quay { display: grid; gap: 16px; }
@media (min-width: 900px) { .tv-quay { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.tv-che-do { display: grid; grid-template-columns: 1fr 1fr; background: var(--the); border: 1px solid var(--vien); border-radius: 999px; padding: 4px; margin-bottom: 12px; }
.tv-che-do label { position: relative; display: grid; place-items: center; min-height: 44px; border-radius: 999px; font-weight: 700; cursor: pointer; color: var(--phu); }
.tv-che-do input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tv-che-do label:has(input:checked) { background: var(--c); color: #fff; }
.tv-che-do label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--c) 55%, #fff); outline-offset: 2px; }
.tv-nhap-ma { margin-bottom: 12px; }
.tv-nhap-ma label { display: block; font-weight: 600; margin-bottom: 6px; }
.tv-nhap-ma__hang { display: flex; gap: 8px; }
.tv-nhap-ma__hang input { flex: 1; min-width: 0; min-height: 52px; padding: 10px 14px; font: inherit; font-size: 1.25rem; font-family: ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .05em; border: 2px solid var(--c-vien); border-radius: var(--r-nho); background: #fff; }
.tv-nhap-ma__hang input:focus { border-color: var(--c); outline: 3px solid var(--c-nhat); }
.tv-kq { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r); border: 2px solid var(--vien); background: var(--the); margin-bottom: 12px; min-height: 78px; }
.tv-kq b { font-size: 1.15rem; }
.tv-kq span { color: var(--phu); font-size: .9375rem; }
.tv-kq--ok { border-color: #8fd0a2; background: var(--xanh-la-nhat); }
.tv-kq--ok b { color: #184d27; }
.tv-kq--sai { border-color: #eca69d; background: var(--do-nhat); }
.tv-kq--sai b { color: #7a1a12; }
.tv-kq--bd { border-color: var(--c-vien); background: var(--c-nhat); }
.tv-kq--bd b { color: var(--c-dam); }
.tv-cam { position: relative; display: none; background: #111; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; max-height: 50vh; margin-bottom: 10px; }
.tv-quay--cam .tv-cam { display: block; }
.tv-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-cam__goi-y { position: absolute; inset: 0; display: grid; place-items: center; color: #ccc; margin: 0; }
.tv-am { display: inline-flex; gap: 6px; align-items: center; font-size: .9375rem; }
.tv-bd .the__h { align-items: flex-start; }
.tv-bd h2 a { color: var(--c-dam); text-decoration: none; font-weight: 800; }
.tv-nhap-ma__hang input::placeholder { font-family: var(--font); font-size: 1rem; letter-spacing: 0; }
.tv-nhat-ky .ds__muc { padding: 8px 0; align-items: center; }

/* Tra cứu công khai */
.tv-opac__nguon { color: var(--phu); font-weight: 600; font-size: .875rem; margin: 0 0 4px; }
.tv-opac h1 { color: var(--c-dam); }
.tv-opac .ds.the { padding-top: 4px; padding-bottom: 4px; }
.tv-opac .ds__muc { align-items: center; }

/* In: nhãn, thẻ, phiếu nhắc */
.tv-in-chon { margin-bottom: 16px; }
.tv-to { width: 210mm; height: 297mm; margin: 0 auto 16px; background: #fff; box-shadow: var(--bong); display: grid; overflow: hidden; color: #000; }
.tv-to--3x8 { grid-template-columns: repeat(3, 70mm); grid-template-rows: repeat(8, 37mm); padding: 0.5mm 0; }
.tv-to--4x10 { grid-template-columns: repeat(4, 52.5mm); grid-template-rows: repeat(10, 29.7mm); }
.tv-to--2x7 { grid-template-columns: repeat(2, 105mm); grid-template-rows: repeat(7, 42.4mm); padding: 0.8mm 0; }
.tv-to--the { grid-template-columns: repeat(2, 85.6mm); grid-template-rows: repeat(5, 54mm); gap: 4mm 8mm; padding: 10mm 15.4mm; align-content: start; }
.tv-nhan { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; padding: 2mm 3mm; overflow: hidden; text-align: center;
  outline: 1px dashed #d5d9d6; outline-offset: -1px; }
.tv-nhan--trong { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #f3f4f2 6px, #f3f4f2 12px); }
.tv-nhan__tv { font-size: 6.5pt; line-height: 1.1; color: #333; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tv-nhan__ma { display: flex; align-items: center; justify-content: center; gap: 2mm; flex: 1 1 auto; min-height: 0; width: 100%; }
.tv-nhan__ma svg { height: 100%; max-height: 17mm; max-width: 100%; width: auto; }
.tv-to--4x10 .tv-nhan__ma svg { max-height: 13mm; }
.tv-nhan__chu { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 9pt; font-weight: 700; }
.tv-nhan__ten { font-size: 7pt; line-height: 1.15; max-height: 2.3em; overflow: hidden; }
.tv-to--4x10 .tv-nhan__ten { font-size: 6pt; max-height: 1.15em; }
.tv-the { display: grid; grid-template-rows: auto 1fr auto; border: 0.3mm solid #7b8a9c; border-radius: 3mm; overflow: hidden; background: #fff; }
.tv-the__dau { display: flex; justify-content: space-between; gap: 2mm; align-items: center; padding: 2mm 3mm; background: #093166; color: #fff; font-size: 7pt; }
.tv-the__dau span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-the__dau b { color: #f0be58; white-space: nowrap; }
.tv-the__than { padding: 2mm 3mm 0; }
.tv-the__ten { margin: 0; font-size: 12pt; font-weight: 800; line-height: 1.2; }
.tv-the__lop { margin: 0; font-size: 8.5pt; color: #333; }
.tv-the__ma { height: 17mm; padding: 0 3mm 2mm; }
.tv-the__ma svg { max-height: 13mm; }
.tv-phieu-ds { display: grid; gap: 0; }
.tv-phieu { background: #fff; color: #000; border-bottom: 1px dashed #999; padding: 8mm 10mm; break-inside: avoid; max-width: 190mm; margin: 0 auto; width: 100%; }
.tv-phieu__tv { margin: 0; font-size: 10pt; text-transform: uppercase; font-weight: 700; }
.tv-phieu__h { text-align: center; font-size: 13pt; margin: 2mm 0 3mm; }
.tv-phieu__bang { width: 100%; border-collapse: collapse; font-size: 10pt; margin-bottom: 3mm; }
.tv-phieu__bang th, .tv-phieu__bang td { border: 1px solid #666; padding: 1.5mm 2mm; text-align: left; }
.tv-phieu__ky { display: flex; justify-content: space-between; font-size: 10pt; margin: 0; }
.tv-phieu__ky span { padding-right: 10mm; font-weight: 700; }
@media screen and (max-width: 900px) {
  .tv-to { transform-origin: top left; zoom: .45; }
}
@media print {
  @page { size: A4; margin: 0; }
  body:has(.tv-in-trang) { background: #fff; }
  body:has(.tv-in-trang) .dau, body:has(.tv-in-trang) .chan, body:has(.tv-in-trang) .demo-bar, body:has(.tv-in-trang) .bao, .tv-khong-in { display: none !important; }
  body:has(.tv-in-trang) .chinh { max-width: none; padding: 0; margin: 0; }
  .tv-to { box-shadow: none; margin: 0; break-after: page; zoom: 1; }
  .tv-nhan { outline: 0; }
  .tv-nhan--trong { background: none; }
  .tv-phieu-ds { padding: 0; }
  .tv-the, .tv-the__dau { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
