/* Công cụ Trộn đề — chỉ lớp .td* (tệp này nạp ở mọi trang). Dùng token của app.css. */
.chinh:has(> .td) { max-width: 1100px; }
.chinh:has(> .td-in) { max-width: none; padding: 0; }
body:has(.td-in) { background: #e9ece8; color: var(--chu); }
body:has(.td-in) .td-in a:not(.nut) { color: var(--c-dam); }
body:has(.td-in) .td-in a.nut--vien { color: var(--c-dam); }
.td-an { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.td-an-chu { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.td-nhan-o { font-weight: 600; font-size: .9375rem; }
.td-hang-nut { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.td-len .bt { transform: rotate(180deg); }
.td-nguy { color: var(--do); }
.td-nguy:hover { background: var(--do-nhat); color: var(--do); }

/* Danh sách câu */
.td-cau-ds { list-style: none; margin: 0; padding: 0; }
.td-cau { padding: 12px 0; border-bottom: 1px solid var(--vien); }
.td-cau:last-child { border-bottom: 0; }
.td-cau__dau { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; color: var(--c-dam); }
.td-cau__nd { overflow-wrap: anywhere; margin-bottom: 6px; }
.td-pa { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
@media (min-width: 720px) { .td-pa { grid-template-columns: 1fr 1fr; } }
.td-pa li { padding: 5px 10px; border: 1px solid var(--vien); border-radius: var(--r-nho); background: #fff; overflow-wrap: anywhere; }
.td-pa .td-dung { border-color: #9fd3ae; background: var(--xanh-la-nhat); }
.td-ds { float: right; font-size: .8125rem; font-weight: 700; color: var(--phu); }
.td-dung .td-ds { color: var(--xanh-la); }
.td-sai .td-ds { color: var(--do); }
.td-dap-an { color: var(--xanh-la); margin: 0; }
.td-anh { display: block; max-width: min(100%, 360px); max-height: 260px; object-fit: contain; border: 1px solid var(--vien); border-radius: var(--r-nho); margin: 4px 0 8px; background: #fff; }

/* Soạn câu */
.td-dong-ds { border: 1px solid var(--vien); border-radius: var(--r-nho); padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; }
.td-dong-ds legend { font-weight: 600; padding: 0 4px; }
.td-dong { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; }
.td-dong .td-giu { grid-column: 2; }
.td-dong--y { grid-template-columns: auto 1fr auto; }
.td-dong--y .td-giu { grid-column: 2 / 4; }
@media (min-width: 720px) { .td-dong { grid-template-columns: auto 1fr auto; } .td-dong .td-giu { grid-column: auto; } .td-dong--y { grid-template-columns: auto 1fr auto auto; } .td-dong--y .td-giu { grid-column: auto; } }
.td-dong input[type="text"], .td-dong select { width: 100%; min-height: 42px; }
.td-chon { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--c-dam); cursor: pointer; }
.td-chon input { width: 20px; height: 20px; }
.td-chu { font-weight: 800; color: var(--c-dam); min-width: 1.6em; }
.td-giu { font-size: .875rem; color: var(--phu); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.td-xem { border-style: dashed; }
.td-xem:empty { display: none; }

/* Nhập nhanh */
.td-nhap { display: grid; gap: 14px; align-items: start; }
@media (min-width: 1000px) { .td-nhap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.td-van-ban { width: 100%; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .875rem; line-height: 1.5; }
.td-word { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.td-word p { flex: 1 1 260px; margin: 0; }
.td-vd { background: var(--bg); border-radius: var(--r-nho); padding: 10px 12px; font-size: .8125rem; overflow-x: auto; white-space: pre; }
.td-cu-phap li { margin-bottom: 4px; }

/* Lượt trộn */
.td-ma-ds { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
@media (min-width: 720px) { .td-ma-ds { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); } }
.td-ma { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--vien); border-radius: var(--r-nho); }
.td-ma__so { font-weight: 800; font-size: 1.125rem; color: var(--c-dam); min-width: 3.2em; }
.td-tai { margin-bottom: 6px; }
.td-cuon { overflow-x: auto; }
.td-bang { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.td-bang th, .td-bang td { border: 1px solid var(--vien); padding: 6px 8px; text-align: left; vertical-align: top; }
.td-bang thead th { background: var(--c-nhat); color: var(--c-dam); }
.td-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .06em; overflow-wrap: anywhere; }

/* Trang in (đề, đáp án, phiếu) */
.td-in { background: #e9ece8; min-height: 100vh; padding: 0 0 32px; }
.td-in__thanh { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px;
  background: var(--the); border-bottom: 1px solid var(--vien); }
.td-in__ma { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.td-in__loc { display: flex; gap: 6px; align-items: center; flex: 1; flex-wrap: wrap; font-size: .875rem; }
.td-in__loc input { min-height: 36px; width: 5em; }
.td-in__goi-y { max-width: 210mm; margin: 10px auto 0; padding: 0 16px; }
.td-to { background: #fff; color: #000; width: 210mm; max-width: 100%; margin: 16px auto; padding: 14mm 14mm 16mm 16mm; box-shadow: 0 2px 10px rgba(0,0,0,.12);
  font-family: "Times New Roman", Times, serif; font-size: 12pt; line-height: 1.4; }
.td-to p { margin: 0 0 3pt; }
.td-to__dau { width: 100%; border-collapse: collapse; margin-bottom: 8pt; }
.td-to__dau td { vertical-align: top; text-align: center; padding: 0 4pt; }
.td-to__trai { width: 42%; }
.td-dam { font-weight: 700; }
.td-nghieng { font-style: italic; }
.td-gach { width: 40%; margin: 3pt auto 0; border-top: 1px solid #000; }
.td-to__ts { display: flex; gap: 8pt 18pt; align-items: center; flex-wrap: wrap; margin-bottom: 10pt; }
.td-to__ts > div:first-child { flex: 1 1 60%; display: flex; }
.td-cham { flex: 1; border-bottom: 1px dotted #000; min-width: 60pt; display: inline-block; height: 1em; margin-left: 4pt; }
.td-cham--ngan { width: 90pt; flex: none; }
.td-to__ma { border: 1px solid #000; padding: 2pt 10pt; font-weight: 700; }
.td-to__phan { margin: 10pt 0 5pt !important; }
.td-to__cau { margin-bottom: 6pt; break-inside: avoid; }
.td-to__pa { display: grid; gap: 1pt 10pt; padding-left: 14pt; }
.td-to__pa--4 { grid-template-columns: repeat(4, 1fr); }
.td-to__pa--2 { grid-template-columns: repeat(2, 1fr); }
.td-to__pa--1 { grid-template-columns: 1fr; }
.td-to__pa > div { min-width: 0; }
.td-in-anh { display: block; max-width: 70%; max-height: 60mm; margin: 3pt auto 5pt; }
.td-to__het { text-align: center; font-weight: 700; margin-top: 12pt !important; }
.td-to__td { font-size: 14pt; text-align: center; margin: 0 0 2pt; }
.td-to__giua { text-align: center; }
.td-to__h { font-size: 12pt; margin: 10pt 0 4pt; }
.td-to__bang { border-collapse: collapse; width: 100%; margin-bottom: 6pt; font-size: 11pt; break-inside: auto; }
.td-to__bang th, .td-to__bang td { border: 1px solid #000; padding: 2pt 4pt; text-align: center; }
.td-to__bang tr { break-inside: avoid; }
.td-to__ds span { display: inline-block; margin: 0 3pt; white-space: nowrap; }
.td-phieu { display: block; width: 198mm; max-width: calc(100% - 16px); height: auto; margin: 16px auto; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
@media (max-width: 640px) { .td-to { padding: 16px 14px; font-size: 11pt; } .td-to__pa--4 { grid-template-columns: repeat(2, 1fr); } }
@media print {
  body:has(.td-in) { background: #fff; }
  body:has(.td-in) .demo-bar, body:has(.td-in) .bao, .td-khong-in { display: none !important; }
  .td-in { background: none; padding: 0; min-height: 0; }
  .td-to { width: auto; margin: 0; padding: 0; box-shadow: none; }
  .td-phieu { width: auto; height: 285mm; max-width: none; margin: 0 auto; box-shadow: none; }
}