/* css/in-dep.css — Bộ máy IN ĐẸP dùng chung (js/in-dep.js): hộp thiết kế bản in + giấy + bố cục + @media print.
   [2026-09-30] Trang in LUÔN sáng (giấy thật) — mọi màu trong .igd-trang là màu MỰC IN cố định, không theo
   giao diện tối/sáng của web (cùng lý do MS-11: web mặc định tối, để theo biến là chữ gần trắng trên giấy trắng).
   Màu của HỘP THIẾT KẾ (màn hình) thì theo giao diện qua biến --igd-*. */

.igd-modal {
  --igd-nen: #141a1d; --igd-mat: #1d2529; --igd-mat2: #252f34; --igd-vien: #33424a; --igd-chu: #eef2f4;
  --igd-phu: #9fb0b8; --igd-nhan: #ff8a4c; --igd-nhan-chu: #1b1206; --igd-nhan-nhat: rgba(255, 138, 76, .14);
  --igd-xem: #0e1316; --igd-bong: 0 12px 40px rgba(0, 0, 0, .45);
}
html[data-theme="light"] .igd-modal, body.light-mode .igd-modal {
  --igd-nen: #f6f3ee; --igd-mat: #ffffff; --igd-mat2: #f2eee7; --igd-vien: #e2dbd0; --igd-chu: #2a2420;
  --igd-phu: #7a6f66; --igd-nhan: #e8692e; --igd-nhan-chu: #ffffff; --igd-nhan-nhat: rgba(232, 105, 46, .1);
  --igd-xem: #e9e4dc; --igd-bong: 0 12px 40px rgba(60, 40, 20, .18);
}

/* ── Hộp thiết kế ── [2026-10-01] bản 2: hàng MẪU NHANH + 5 THẺ, mỗi thẻ một việc — không còn một cột dài */
.igd-modal { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 12, .62); backdrop-filter: blur(3px); padding: 16px; }
.igd-modal[hidden] { display: none; }
html.igd-mo, html.igd-mo body { overflow: hidden; }
.igd-hop { width: min(1240px, 100%); height: min(880px, 100%); display: flex; flex-direction: column; background: var(--igd-nen);
  color: var(--igd-chu); border: 1px solid var(--igd-vien); border-radius: 18px; box-shadow: var(--igd-bong); overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif; }
.igd-hop button { font-family: inherit; }
.igd-dau-hop { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--igd-vien); }
.igd-td { font-weight: 800; font-size: 1.05rem; }
.igd-sotrang { color: var(--igd-phu); font-size: .85rem; margin-right: auto; }
.igd-dong { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--igd-vien); background: var(--igd-mat); color: var(--igd-chu); cursor: pointer; font-size: 1rem; flex: 0 0 auto; }
.igd-dong:hover { border-color: var(--igd-nhan); }
.igd-than { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 1fr); }
.igd-xem { overflow-y: auto; overflow-x: hidden; background: var(--igd-xem); padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.igd-khung { position: relative; flex: 0 0 auto; box-shadow: 0 6px 22px rgba(0, 0, 0, .28); border-radius: 3px; overflow: hidden; }
.igd-khung > .igd-trang { transform: scale(var(--igd-tyle, .5)); transform-origin: 0 0; }
.igd-trong { color: var(--igd-phu); padding: 40px 16px; text-align: center; }
.igd-ben { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-left: 1px solid var(--igd-vien); }
/* min-width:0 — hàng Mẫu nhanh cuộn ngang có bề rộng nội dung = tổng mọi thẻ; không chặn thì nó KÉO cả cột (và cả hộp)
   rộng quá màn điện thoại 390px (đo 01/10: ô 米 bị cắt, trang xem trước lệch phải) */
.igd-xem { min-width: 0; }
/* [2026-10-01] Mũi tên ▲▼ thay thanh cuộn dọc (Founder: thanh cuộn thô kèm ô ▲▼ vuông của Windows) — js/scroll-arrows.js.
   Chỉ ẩn thanh KHI mũi tên đã nối xong (.igd-co-mui-ten): nạp module hỏng thì vẫn còn thanh cuộn, không bao giờ kẹt. */
.igd-cuon-khung { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.igd-cuon-khung > .igd-xem, .igd-cuon-khung > .igd-the-than { flex: 1 1 auto; min-height: 0; }
.igd-ben > .igd-cuon-khung { flex: 1 1 auto; }
.igd-co-mui-ten .igd-xem, .igd-co-mui-ten .igd-the-than { scrollbar-width: none; }
.igd-co-mui-ten .igd-xem::-webkit-scrollbar, .igd-co-mui-ten .igd-the-than::-webkit-scrollbar { width: 0; display: none; }
.igd-cuon { position: absolute; right: 10px; z-index: 5; width: 32px; height: 32px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--igd-vien);
  background: color-mix(in srgb, var(--igd-mat) 90%, transparent); color: var(--igd-chu); font-size: .7rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22); backdrop-filter: blur(6px); opacity: .9; transition: opacity .18s, transform .18s, border-color .18s, color .18s; }
.igd-cuon:hover { opacity: 1; transform: scale(1.08); border-color: var(--igd-nhan); color: var(--igd-nhan); }
.igd-cuon:focus-visible { outline: 2px solid var(--igd-nhan); outline-offset: 2px; }
.igd-cuon[hidden] { display: none !important; }
.igd-cuon--len { top: 10px; }
.igd-cuon--xuong { bottom: 10px; }
.igd-cuon-xem .igd-cuon { right: 12px; }
/* Mẫu nhanh: một hàng cuộn ngang, luôn thấy — người mới chọn 1 mẫu là in được */
.igd-mau-nhanh { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 10px; scrollbar-width: thin; flex: 0 0 auto; }
.igd-mau-the { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px; padding: 8px 4px 7px; border-radius: 12px;
  border: 1.5px solid var(--igd-vien); background: var(--igd-mat); color: var(--igd-chu); font-size: .72rem; line-height: 1.2; cursor: pointer; text-align: center; }
.igd-mau-the span { font-size: 1.5rem; line-height: 1.1; }
.igd-mau-the:hover { border-color: var(--igd-nhan); }
.igd-mau-the.on { border-color: var(--igd-nhan); background: var(--igd-nhan-nhat); font-weight: 700; }
.igd-tab-bar { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--igd-vien); overflow-x: auto; scrollbar-width: none; flex: 0 0 auto; }
.igd-tab-bar::-webkit-scrollbar { display: none; }
.igd-tab { flex: 0 0 auto; border: 0; background: transparent; color: var(--igd-phu); padding: 10px 10px 9px; font-size: .84rem; font-weight: 600; cursor: pointer;
  border-bottom: 2.5px solid transparent; white-space: nowrap; }
.igd-tab:hover { color: var(--igd-chu); }
.igd-tab.on { color: var(--igd-nhan); border-bottom-color: var(--igd-nhan); }
.igd-the-than { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px 18px; }
.igd-nhom { margin-top: 14px; }
.igd-nhom h4 { margin: 0 0 8px; font-size: .9rem; font-weight: 700; }
.igd-nhom h4 small { display: block; font-weight: 400; color: var(--igd-phu); font-size: .74rem; margin-top: 2px; }
.igd-nhom h4 b { color: var(--igd-nhan); }
.igd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.igd-chip { border: 1px solid var(--igd-vien); background: var(--igd-mat); color: var(--igd-chu); border-radius: 999px; padding: 7px 12px;
  font-size: .82rem; cursor: pointer; white-space: nowrap; }
.igd-chip.on { border-color: var(--igd-nhan); background: var(--igd-nhan-nhat); color: var(--igd-nhan); font-weight: 700; }
.igd-chip:disabled { opacity: .45; cursor: not-allowed; }
.igd-hang2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.igd-hang3 { display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 8px; }
.igd-the-giay, .igd-the-kho, .igd-the-font, .igd-the-o, .igd-the-tranh { border: 1.5px solid var(--igd-vien); background: var(--igd-mat); color: var(--igd-chu);
  border-radius: 12px; padding: 7px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 3px; font-size: .78rem; }
.igd-the-giay.on, .igd-the-kho.on, .igd-the-font.on, .igd-the-o.on, .igd-the-tranh.on { border-color: var(--igd-nhan); box-shadow: 0 0 0 3px var(--igd-nhan-nhat); }
.igd-the-giay:hover, .igd-the-kho:hover, .igd-the-font:hover, .igd-the-o:hover, .igd-the-tranh:hover { border-color: var(--igd-nhan); }
.igd-the-giay b, .igd-the-kho b, .igd-the-font b { font-size: .8rem; }
.igd-the-giay small, .igd-the-kho small, .igd-the-font small { font-size: .68rem; color: var(--igd-phu); line-height: 1.3; }
.igd-luoi-giay { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.igd-mau-giay { position: relative; display: block; height: 52px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08);
  --igd-dong: 4.6mm; --igd-tren: 1.5mm; --igd-trai: 3mm; }
.igd-mau-chu { position: absolute; left: 7px; top: 5px; font-family: 'Noto Serif SC', serif; font-size: 11px; color: #3b2f25; white-space: nowrap; }
.igd-luoi-tranh { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.igd-the-tranh { align-items: center; text-align: center; padding: 5px 5px 6px; font-size: .72rem; line-height: 1.2; width: 100%; }
.igd-mau-tranh { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 210 / 250; border-radius: 6px;
  overflow: hidden; background: #fffdf6 center / cover no-repeat; border: 1px solid rgba(0, 0, 0, .08); font-size: 1.5rem; color: #b9ab9a; }
.igd-mau-tranh svg { display: block; width: 100%; height: auto; }
.igd-mau-tranh > span[style] svg { width: 100%; height: 100%; }
.igd-tai .igd-mau-tranh { border: 1.5px dashed var(--igd-nhan); background: var(--igd-nhan-nhat); color: var(--igd-nhan); }
.igd-the-tranh-boc, .igd-o-nhan-boc { position: relative; display: block; }
.igd-xoa-anh { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--igd-nen);
  background: #c0392b; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; padding: 0; z-index: 1; }
.igd-luoi-kho { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.igd-the-kho { align-items: center; text-align: center; }
.igd-hinh-kho { display: block; background: #fdf8ee; border: 1px solid #d9cdb8; border-radius: 2px; margin: 2px 0 4px; }
/* [01/10] 14 font chia 3 nhóm (Dễ đọc · Mềm mại · Thư pháp) */
.igd-nhom-font { margin: 12px 0 6px; font-size: .78rem; font-weight: 700; color: var(--igd-phu); letter-spacing: .02em; }
.igd-nhom-font:first-of-type { margin-top: 2px; }
.igd-ds-font { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.igd-the-font { flex-direction: row; align-items: center; gap: 8px; }
.igd-mau-font { font-size: 1.3rem; line-height: 1.1; min-width: 4.4em; color: var(--igd-chu); }
.igd-the-font > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.igd-hop input[type="range"] { width: 100%; accent-color: var(--igd-nhan); }
.igd-thuoc { display: flex; justify-content: space-between; font-size: .7rem; color: var(--igd-phu); }
/* Công tắc bật/tắt */
.igd-cac-cong { display: flex; flex-direction: column; gap: 6px; }
.igd-cong { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--igd-chu); font-size: .84rem; cursor: pointer; padding: 4px 0; text-align: left; }
.igd-cong-nut { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--igd-vien); flex: 0 0 auto; transition: background .15s; }
.igd-cong-nut::after { content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.igd-cong.on .igd-cong-nut { background: var(--igd-nhan); }
.igd-cong.on .igd-cong-nut::after { transform: translateX(16px); }
/* Bộ đếm − số + */
.igd-buoc { display: flex; align-items: center; gap: 6px; font-size: .82rem; }
.igd-buoc span { flex: 1 1 auto; }
.igd-buoc button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--igd-vien); background: var(--igd-mat); color: var(--igd-chu); cursor: pointer; font-size: 1rem; }
.igd-buoc b { min-width: 18px; text-align: center; }
/* Màu */
.igd-hang-mau { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: .8rem; }
.igd-hang-mau > span { width: 64px; color: var(--igd-phu); }
.igd-dsmau { display: flex; gap: 6px; align-items: center; }
.igd-o-mau { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--igd-mat); box-shadow: 0 0 0 1px var(--igd-vien); background: var(--c); cursor: pointer; padding: 0; }
.igd-o-mau.on { box-shadow: 0 0 0 2px var(--igd-nhan); }
.igd-mau-tu { position: relative; overflow: hidden; background: conic-gradient(#f44, #fd4, #4d4, #4df, #44f, #f4f, #f44); }
.igd-mau-tu input { position: absolute; inset: -6px; opacity: 0; cursor: pointer; }
/* Ô tập viết (thẻ Nội dung) */
.igd-khung-tv { margin-top: 18px; padding: 4px 12px 12px; border: 1px solid var(--igd-vien); border-radius: 14px; background: var(--igd-mat2); }
.igd-khung-tv h3 { margin: 10px 0 0; font-size: .95rem; }
.igd-luoi-o { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.igd-the-o { align-items: center; text-align: center; font-size: .7rem; padding: 6px 4px; }
.igd-mau-o { width: 34px; height: 34px; border: 1.5px solid var(--o-ke); background: #fff var(--o-nen) center / 100% 100% no-repeat; }
/* Trang trí */
.igd-nut-lon { margin-top: 14px; }
.igd-nut-phu { border: 1px dashed var(--igd-vien); background: transparent; color: var(--igd-chu); border-radius: 10px; padding: 9px; cursor: pointer; font-size: .84rem; }
.igd-nut-phu:hover { border-color: var(--igd-nhan); color: var(--igd-nhan); }
.igd-nut-phu.chinh { border-style: solid; border-color: var(--igd-nhan); background: var(--igd-nhan-nhat); color: var(--igd-nhan); font-weight: 700; }
.igd-nhom-nhan { margin-bottom: 10px; }
.igd-khay { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.igd-o-nhan { width: 100%; aspect-ratio: 1; border: 1px solid var(--igd-vien); background: #fbf7f0; border-radius: 12px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.igd-o-nhan:hover { border-color: var(--igd-nhan); transform: translateY(-1px); }
.igd-o-nhan svg, .igd-o-nhan img { width: 100%; height: 100%; object-fit: contain; }
.igd-o-nhan.igd-tai { flex-direction: column; gap: 2px; border: 1.5px dashed var(--igd-nhan); background: var(--igd-nhan-nhat); color: var(--igd-nhan); font-size: .68rem; font-weight: 700; }
.igd-o-nhan.igd-tai span { font-size: 1.3rem; line-height: 1; }
.igd-ghi, .igd-trong-nho { margin: 12px 0 0; font-size: .74rem; color: var(--igd-phu); line-height: 1.5; }
/* Trang in */
.igd-o-nhap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.igd-o-nhap label, .igd-o-nhap1 { display: flex; flex-direction: column; gap: 4px; font-size: .76rem; color: var(--igd-phu); }
.igd-o-nhap1 { margin-top: 10px; }
.igd-o-nhap input, .igd-o-nhap1 input { border: 1px solid var(--igd-vien); background: var(--igd-mat); color: var(--igd-chu); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .84rem; }
.igd-chan-hop { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--igd-vien); }
.igd-meo { font-size: .74rem; color: var(--igd-phu); }
.igd-nut-in { border: 0; background: var(--igd-nhan); color: var(--igd-nhan-chu); border-radius: 999px; padding: 11px 28px; font-weight: 800; font-size: .95rem; cursor: pointer; flex: 0 0 auto; }
.igd-nut-in:disabled { opacity: .5; cursor: not-allowed; }
.igd-do { position: fixed; left: -99999px; top: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 820px) {
  .igd-modal { padding: 0; }
  .igd-hop { border-radius: 0; height: 100%; }
  .igd-than { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(190px, 36%) minmax(0, 1fr); }
  .igd-ben { border-left: 0; border-top: 1px solid var(--igd-vien); }
  .igd-ds-font { grid-template-columns: 1fr; }
  .igd-meo { display: none; }
  .igd-nut-in { flex: 1 1 auto; }
}

/* ══ TRANG GIẤY (màn hình xem trước = bản in) ══════════════════════════════════════════════ */
.igd-trang { position: relative; box-sizing: border-box; overflow: hidden; background: #fff; color: #231c16;
  font-family: 'Noto Sans', 'Inter', sans-serif; font-size: var(--igd-pt, 11pt); line-height: 1.45;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.igd-trang * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-sizing: border-box; }
.igd-trang-nen { position: absolute; inset: 0; pointer-events: none; }
.igd-noi { position: absolute; left: var(--igd-trai); right: var(--igd-phai); top: var(--igd-tren); bottom: var(--igd-duoi); overflow: hidden; }
.igd-chan-trang { position: absolute; left: var(--igd-trai); right: var(--igd-phai); bottom: calc(var(--igd-duoi) * .32);
  display: flex; justify-content: space-between; font-size: 7pt; color: #8a7d70; letter-spacing: .3px; }
.igd-lop-nhan { position: absolute; inset: 0; pointer-events: none; }
.igd-zh, .igd-trang .zh { font-family: var(--igd-zh), 'Noto Serif SC', serif; }
.igd-py { color: #8b5e34; font-style: italic; }

/* Khối canh dòng kẻ: khoảng cách giữa khối do máy chia trang lo (đẩy xuống đúng mép dòng) */
.igd-co-ke .igd-noi > * { margin-top: 0; margin-bottom: 0; }
/* Khối KHÔNG phải văn (bảng, thẻ, ô tập viết, đầu trang) phủ màu giấy lên dòng kẻ ⇒ dòng kẻ chỉ lộ ở khe giữa
   các khối (thành vạch phân cách), không cắt ngang chữ. Khối văn (.igd-dong-ke) để lộ dòng — chữ nằm trên dòng. */
.igd-co-ke .igd-noi > *:not(.igd-dong-ke) { background-color: var(--igd-giay-nen, #fff); }
.igd-co-ke .igd-noi {
  background-image: linear-gradient(to bottom, transparent calc(var(--igd-dong) - .28mm), var(--igd-ke, #b9cfe6) calc(var(--igd-dong) - .28mm), var(--igd-ke, #b9cfe6) var(--igd-dong));
  background-size: 100% var(--igd-dong); background-repeat: repeat-y;
}

/* ── 7 kiểu giấy (dùng cho cả trang và ô mẫu .igd-mau-giay) ── */
.igd-giay-trang { background: #ffffff; --igd-giay-nen: #ffffff; }
.igd-giay-cham { --igd-giay-nen: #fffcf5; background-color: #fffcf5; background-image: radial-gradient(circle, #cdbfa8 .32mm, transparent .4mm); background-size: 5mm 5mm; background-position: 2.5mm 2.5mm; }
.igd-giay-ke-xanh { background-color: #ffffff; --igd-ke: #aecbeb; --igd-giay-nen: #ffffff; }
.igd-giay-ke-xanh > .igd-trang-nen { background: linear-gradient(to right, transparent calc(var(--igd-trai) - 3mm), #f0a3a3 calc(var(--igd-trai) - 3mm), #f0a3a3 calc(var(--igd-trai) - 2.7mm), transparent calc(var(--igd-trai) - 2.7mm)); }
.igd-giay-kraft { background-color: #e6cfa6; --igd-ke: rgba(122, 84, 40, .28); --igd-giay-nen: #e4cda3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.igd-giay-kraft .igd-chan-trang { color: #7a5a36; }
.igd-giay-co { --igd-giay-nen: #f7efdc; background-color: #f7efdc; background-image: radial-gradient(ellipse at center, transparent 55%, rgba(166, 120, 60, .16) 100%); }
.igd-giay-co > .igd-trang-nen { inset: 5mm; border: .7mm solid #b0322b; outline: .25mm solid #b0322b; outline-offset: -1.6mm; border-radius: 1mm; }
.igd-giay-co > .igd-trang-nen::before, .igd-giay-co > .igd-trang-nen::after { content: ''; position: absolute; width: 7mm; height: 7mm;
  border: .5mm solid #b0322b; border-radius: 50%; background: #f7efdc; }
.igd-giay-co > .igd-trang-nen::before { left: -3.5mm; top: -3.5mm; } .igd-giay-co > .igd-trang-nen::after { right: -3.5mm; bottom: -3.5mm; }
.igd-giay-co .igd-noi { left: calc(var(--igd-trai) + 3mm); right: calc(var(--igd-phai) + 3mm); top: calc(var(--igd-tren) + 3mm); bottom: calc(var(--igd-duoi) + 2mm); }
.igd-giay-hong { background-color: #fff3f5; --igd-ke: #f5c4cf; --igd-giay-nen: #fff3f5;
  background-image: radial-gradient(circle at 10% 8%, rgba(255, 190, 205, .5) 0 9mm, transparent 9.2mm), radial-gradient(circle at 96% 96%, rgba(255, 210, 222, .55) 0 14mm, transparent 14.2mm); }
.igd-giay-luoi { --igd-giay-nen: #fbfffb; background-color: #fbfffb; background-image: linear-gradient(#d4ecd9 .2mm, transparent .2mm), linear-gradient(90deg, #d4ecd9 .2mm, transparent .2mm); background-size: 5mm 5mm; }
/* Ô mẫu nhỏ trong hộp chọn: vẽ dòng kẻ trên CHÍNH ô (không có .igd-noi) */
.igd-mau-giay.igd-giay-ke-xanh, .igd-mau-giay.igd-giay-kraft, .igd-mau-giay.igd-giay-hong {
  background-image: linear-gradient(to bottom, transparent 16px, var(--igd-ke) 16px, var(--igd-ke) 17px, transparent 17px), linear-gradient(to bottom, transparent 32px, var(--igd-ke) 32px, var(--igd-ke) 33px, transparent 33px), linear-gradient(to bottom, transparent 48px, var(--igd-ke) 48px, var(--igd-ke) 49px, transparent 49px); }
.igd-mau-giay.igd-giay-kraft { background-color: #e6cfa6; }
.igd-mau-giay.igd-giay-co { box-shadow: inset 0 0 0 3px #f7efdc, inset 0 0 0 4.5px #b0322b; }

/* ── Đầu trang: logo + thương hiệu ── */
.igd-dau { display: flex; align-items: center; gap: 3.2mm; padding-bottom: 3mm; margin-bottom: 4mm; border-bottom: .5mm solid #c9463d; }
.igd-co-ke .igd-dau { padding-bottom: 1.5mm; }
.igd-logo { width: 12.5mm; height: 12.5mm; flex: 0 0 auto; border-radius: 50%; padding: .7mm; background: conic-gradient(#d7263d, #f2a541, #3fa66a, #3d7cc9, #d7263d); }
.igd-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; border: .5mm solid #fff; display: block; }
.igd-thuonghieu { display: flex; flex-direction: column; line-height: 1.2; flex: 0 0 auto; white-space: nowrap; }
.igd-thuonghieu b { font-size: 1.12em; font-weight: 800; color: #d32f2f; letter-spacing: .5px; }
.igd-thuonghieu span { font-size: .68em; color: #6f6257; }
.igd-dau-meta { margin-left: auto; text-align: right; display: flex; flex-direction: column; line-height: 1.3; flex: 1 1 auto; min-width: 0; }
.igd-dau-meta b { font-size: 1em; font-weight: 700; color: #2a2019; }
.igd-dau-meta span { font-size: .72em; color: #6f6257; }
.igd-tiep::before { content: '(tiếp)'; display: none; }

/* ── [2026-10-01] 2 giấy mới ── */
.igd-giay-tuyen { --igd-giay-nen: #f6efe1; background-color: #f6efe1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='x'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23x)'/%3E%3C/svg%3E"); }
.igd-giay-tuyen > .igd-trang-nen { background: radial-gradient(ellipse at center, transparent 60%, rgba(150, 110, 60, .14) 100%); }
.igd-giay-bac-ha { --igd-giay-nen: #f1fbf6; background-color: #f1fbf6; background-image: radial-gradient(circle, rgba(120, 200, 165, .38) .7mm, transparent .8mm); background-size: 9mm 9mm; background-position: 4.5mm 4.5mm; }
.igd-giay-bac-ha > .igd-trang-nen { background: linear-gradient(#bfe8d6, #bfe8d6) top / 100% 3mm no-repeat, linear-gradient(#bfe8d6, #bfe8d6) bottom / 100% 3mm no-repeat; }

/* ── Tranh nền mờ: lớp giữa giấy và chữ; mảnh neo mép trang (khổ nào cũng không méo) ── */
.igd-tranh { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.igd-tranh-manh { position: absolute; }
.igd-tranh-manh > svg { display: block; width: 100%; height: auto; }
.igd-tranh-manh[style*="height"] > svg { height: 100%; }
/* Có tranh ⇒ khối bảng/thẻ trên giấy kẻ chỉ phủ MỜ màu giấy: tranh vẫn lộ, dòng kẻ không cắt chữ */
.igd-co-tranh.igd-co-ke .igd-noi > *:not(.igd-dong-ke) { background-color: color-mix(in srgb, var(--igd-giay-nen, #fff) 78%, transparent); }
.igd-co-tranh .igd-the { background: rgba(255, 255, 255, .66); }
/* Tranh neo mép TRÊN (đèn lồng, cành mai, hạc…) nằm đúng sau đầu trang ⇒ đầu trang phủ một lớp giấy mờ để chữ tiêu đề luôn rõ */
.igd-co-tranh .igd-dau { background: color-mix(in srgb, var(--igd-giay-nen, #fff) 70%, transparent); border-radius: 2mm; padding: 2mm 3mm 2.5mm; }

/* ── Đầu trang: hàng logo + dòng ghi tên học viên (để trống = đường kẻ viết tay) ── */
.igd-dau { display: block; }
.igd-dau-hang { display: flex; align-items: center; gap: 3.2mm; }
.igd-dong-ten { display: flex; gap: 5mm; margin-top: 2.5mm; font-size: .86em; color: #4a3d31; }
.igd-dong-ten span { display: flex; align-items: flex-end; gap: 1.5mm; flex: 1 1 0; white-space: nowrap; }
.igd-dong-ten span:first-child { flex: 2 1 0; }
.igd-dong-ten i { flex: 1 1 auto; font-style: normal; border-bottom: .25mm dotted #8a7d70; min-height: 1.2em; padding: 0 1mm; color: #1f1812; }
.igd-dau-gon { border-bottom: 0; padding-bottom: 1mm; }

/* ── Nhãn dán ── */
.igd-nhan { position: absolute; pointer-events: auto; cursor: grab; user-select: none; touch-action: none; transform-origin: 50% 50%; }
.igd-nhan svg, .igd-nhan img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .4mm .5mm rgba(0, 0, 0, .18)); }
.igd-nhan img { border-radius: 50%; }
.igd-nhan.chon { outline: 1.5px dashed #e8692e; outline-offset: 2px; }
.igd-cam { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: #e8692e; border: 2px solid #fff; cursor: nwse-resize; }
.igd-cong-cu { position: absolute; left: 50%; top: -34px; transform: translateX(-50%) scale(calc(1 / var(--igd-tyle, 1))); transform-origin: 50% 100%; display: flex; gap: 2px;
  background: #2a2420; border-radius: 999px; padding: 2px; white-space: nowrap; }
.igd-cong-cu button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; font-size: 14px; }
.igd-cong-cu button:hover { background: #e8692e; }
.igd-khung .igd-cam { transform: scale(calc(1 / var(--igd-tyle, 1))); }

/* ══ BỐ CỤC NỘI DUNG ════════════════════════════════════════════════════════════════════ */
/* Bảng từ vựng: hàng lưới (không dùng <table> để máy chia trang tách được từng hàng) */
.igd-bang-dau, .igd-bang-hang { display: grid; grid-template-columns: 6mm 1.15fr .8fr 1.5fr 2fr; gap: 0 2.5mm; align-items: start; }
.igd-bang-dau { font-size: .7em; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #7a6a5c; padding: 1.2mm 0; border-bottom: .35mm solid rgba(90, 60, 30, .35); }
.igd-bang-hang { padding: 1.8mm 0; border-bottom: .2mm dashed rgba(90, 60, 30, .25); }
.igd-co-ke .igd-bang-hang { border-bottom: 0; padding: 0; min-height: var(--igd-dong); }
.igd-bang-so { color: #a08c78; font-size: .8em; padding-top: .3em; }
.igd-bang-zh { font-size: 1.55em; line-height: 1.15; color: #1f1812; }
.igd-bang-zh .igd-py { display: block; font-size: .5em; margin-top: .6mm; }
.igd-bang-vi { font-size: .92em; }
.igd-bang-vi i { color: #8a7461; font-size: .9em; }
.igd-bang-vd { font-size: .86em; color: #3b3027; }
.igd-bang-vd .zh { font-size: 1.08em; }
.igd-bang-vd b { color: #c9463d; }
.igd-hsk { display: inline-block; font-size: .56em; font-weight: 700; padding: .2mm 1.4mm; border-radius: 1mm; color: #fff; vertical-align: middle; margin-right: 1mm; font-family: 'Noto Sans', sans-serif; }
.igd-hsk-12 { background: #3f9a52; } .igd-hsk-34 { background: #e0822a; } .igd-hsk-56 { background: #c9463d; } .igd-hsk-x { background: #8a7d70; }
.igd-tl { display: inline-block; font-size: .66em; line-height: 1.3; margin-bottom: .6mm; padding: .2mm 1.6mm; border-radius: 3mm; background: rgba(61, 124, 201, .12); color: #2f5f9a; }

/* Thẻ từ: mỗi khối là MỘT HÀNG thẻ (--cot thẻ) */
.igd-the-hang { display: grid; grid-template-columns: repeat(var(--cot, 3), 1fr); gap: 3mm; padding-bottom: 3mm; }
.igd-the { border: .35mm solid rgba(120, 80, 40, .35); border-radius: 3mm; padding: 3mm 3mm 2.5mm; background: rgba(255, 255, 255, .72);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1mm; min-height: 100%; }
.igd-giay-trang .igd-the, .igd-giay-luoi .igd-the { background: #fffdf8; }
.igd-the-dau { display: flex; gap: 1mm; justify-content: center; }
.igd-the-zh { font-size: 2.4em; line-height: 1.15; color: #1f1812; margin-top: 1mm; }
.igd-the-py { font-size: .95em; }
.igd-the-vi { font-size: .88em; }
.igd-the-vd { margin-top: auto; padding-top: 1.5mm; border-top: .2mm dashed rgba(120, 80, 40, .3); width: 100%; font-size: .78em; color: #4a3d31; }
.igd-the-vd b { color: #c9463d; }

/* ── Tập viết (js/in-dep-o.js) — [2026-10-01] pinyin ở HÀNG RIÊNG phía trên ô (vở 拼音田字格), không bao giờ đè chữ ── */
.igd-tv { padding-bottom: 3mm; }
.igd-tv-dau { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1mm 2.8mm; margin-bottom: 1.4mm; padding: 1mm 2mm;
  border-left: 1mm solid var(--o-ke, #d46a5c); background: rgba(255, 255, 255, .55); }
.igd-tv-dau-zh { font-size: 1.45em; color: #1f1812; }
.igd-tv-dau .igd-py { font-size: 1em; color: var(--o-py, #8b5e34); }
.igd-tv-vi { font-size: .86em; color: #4a3d31; }
.igd-tv-net { display: flex; align-items: center; gap: 2mm; margin: 0 0 1.4mm; }
.igd-tv-net-chu { flex: 0 0 auto; width: calc(var(--o, 13mm) * .8); height: calc(var(--o, 13mm) * .8); }
.igd-tv-net-so { flex: 0 0 auto; font-size: .7em; color: #8a7d70; writing-mode: horizontal-tb; min-width: 3.4em; }
.igd-tv-cac-buoc { display: flex; flex-wrap: wrap; gap: .8mm; }
.igd-tv-buoc { width: calc(var(--o, 13mm) * .5); height: calc(var(--o, 13mm) * .5); border: .2mm solid rgba(160, 140, 120, .45); background: rgba(255, 255, 255, .6); }
.igd-tv-g { display: block; width: 100%; height: 100%; }
.igd-tv-cap { margin-bottom: 1.4mm; }
/* Hàng pinyin 4 dòng kẻ: 3 khoảng, khoảng giữa rộng nhất (quy chuẩn vở tập viết tiểu học Trung Quốc) */
.igd-tv-py { display: flex; height: calc(var(--o, 13mm) * .52);
  background-image: linear-gradient(var(--o-ke, #d46a5c), var(--o-ke, #d46a5c)), linear-gradient(color-mix(in srgb, var(--o-ke, #d46a5c) 45%, transparent), color-mix(in srgb, var(--o-ke, #d46a5c) 45%, transparent)),
    linear-gradient(color-mix(in srgb, var(--o-ke, #d46a5c) 45%, transparent), color-mix(in srgb, var(--o-ke, #d46a5c) 45%, transparent)), linear-gradient(var(--o-ke, #d46a5c), var(--o-ke, #d46a5c));
  background-size: 100% .25mm, 100% .15mm, 100% .15mm, 100% .25mm; background-repeat: no-repeat; background-position: 0 0, 0 28%, 0 72%, 0 100%; }
.igd-tv-py span { flex: 0 0 auto; width: calc(var(--o, 13mm) - .25mm); display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--o, 13mm) * .27); line-height: 1; color: var(--o-py, #6b4a2c); font-family: 'Noto Sans', sans-serif; white-space: nowrap; }
.igd-tv-hang { display: flex; }
.igd-o2 { position: relative; flex: 0 0 auto; width: var(--o, 13mm); height: var(--o, 13mm); margin-left: -.25mm;
  border: .25mm solid var(--o-ke, #d46a5c); background: rgba(255, 255, 255, .5) var(--o-nen) center / 100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center; }
.igd-o2:first-child { margin-left: 0; }
.igd-o2 > .igd-tv-g { width: 88%; height: 88%; }
.igd-tv-f { font-size: calc(var(--o, 13mm) * .74); line-height: 1; color: var(--o-mau, #1f1812); }
.igd-o2.mo .igd-tv-f { color: #cfc8bf; }

/* Văn bản trên giấy (Luyện Viết "bài viết đẹp") — mỗi dòng chữ nằm đúng một dòng kẻ */
.igd-van-tieu { font-size: 1.25em; font-weight: 700; text-align: center; color: #2a2019; }
.igd-van-nhan { font-size: .8em; font-weight: 700; color: #9a5a32; letter-spacing: .3px; }
.igd-van { font-size: 1.3em; line-height: var(--igd-dong); text-indent: 2em; color: #1f1812; white-space: pre-wrap; margin: 0; }
.igd-van.igd-tiep { text-indent: 0; }
.igd-trang:not(.igd-co-ke) .igd-van { line-height: 1.9; margin-bottom: 2mm; }
.igd-dich { font-size: .85em; color: #5a4c40; font-style: italic; margin: 0; line-height: var(--igd-dong); }
.igd-trang:not(.igd-co-ke) .igd-dich { line-height: 1.6; margin-bottom: 3mm; }
.igd-cach { height: var(--igd-dong); }

/* ══ IN ═══════════════════════════════════════════════════════════════════════════════════ */
#igd-in { display: none; }
@media print {
  html.igd-dang-in, html.igd-dang-in body { background: #fff !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; height: auto !important; }
  html.igd-dang-in body > *:not(#igd-in) { display: none !important; }
  html.igd-dang-in #igd-in { display: block !important; visibility: visible !important; position: static !important; }
  html.igd-dang-in #igd-in * { visibility: visible !important; }
  html.igd-dang-in #igd-in .igd-trang { break-after: page; page-break-after: always; transform: none !important; margin: 0; box-shadow: none; }
  html.igd-dang-in #igd-in .igd-trang:last-child { break-after: auto; page-break-after: auto; }
}