/* Đồ dùng học Toán (/cong-cu/do-dung-toan). Tệp nạp ở mọi trang → mọi lớp có tiền tố ddt-. Ưu tiên màn chiếu 1280–1920px. */
.chinh:has(> .ddt) { max-width: 1500px; }
.ddt:fullscreen { background: var(--bg); padding: 16px clamp(12px, 2vw, 28px); overflow: auto; }
.ddt [hidden] { display: none !important; }
.ddt-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.ddt-dau h1 { margin: 0; }
.ddt-dau .phu { margin: 2px 0 0; }
.ddt-giua { justify-content: center; text-align: center; }
.ddt-tab { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.ddt-tab [role="tab"] { flex: none; min-height: 46px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--vien); background: var(--the);
  color: var(--chu); font: inherit; font-weight: 700; cursor: pointer; }
.ddt-tab [role="tab"]:hover { border-color: var(--c-vien); color: var(--c-dam); }
.ddt-tab [role="tab"][aria-selected="true"] { background: var(--c-dam); border-color: var(--c-dam); color: #fff; }
.ddt-p { padding: clamp(14px, 2vw, 26px); }
.ddt-chon { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; min-height: 40px; }
.ddt-chon input { width: 20px; height: 20px; accent-color: var(--c); margin: 0; }
.ddt-nhom-chon { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.ddt-nhom-chon legend { font-weight: 600; font-size: .9375rem; margin-bottom: 6px; padding: 0; width: 100%; }
.ddt-nhom-chon label { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; font-weight: 600; cursor: pointer; }
.ddt-nhom-chon input { width: 20px; height: 20px; accent-color: var(--c); margin: 0; }
.ddt-che-do { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--bg); border: 1px solid var(--vien); border-radius: 999px; }
.ddt-che-do label { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px; font-weight: 700; cursor: pointer; }
.ddt-che-do input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ddt-che-do label:has(input:checked) { background: var(--c-dam); color: #fff; }
.ddt-che-do label:has(input:focus-visible) { outline: 3px solid var(--c-vien); }

/* Tính nhẩm */
.ddt-tn-cai { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: end; max-width: 1100px; }
.ddt-tn-cai .ddt-nhom-chon { grid-column: 1 / -1; }
.ddt-tn-bd .nut { min-width: 160px; min-height: 52px; font-size: 1.1rem; }
.ddt-tn-cai .field__err { grid-column: 1 / -1; margin: 0; }
.ddt-tn-choi { text-align: center; }
.ddt-tn-dem { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.ddt-tn-o { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 16px; border-radius: 999px; background: var(--bg); border: 1px solid var(--vien); font-weight: 600; }
.ddt-tn-o b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.ddt-tn-o--dung b { color: var(--xanh-la); }
.ddt-tn-o--sai b { color: var(--do); }
.ddt-tn-cau { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin: 10px 0 4px; }
.ddt-tn-de { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 800; color: var(--c-dam); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ddt-tn-tl { width: 3.6em; font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 800; text-align: center; padding: 0 8px; border: 3px solid var(--c-vien);
  border-radius: var(--r); color: var(--chu); background: #fff; font-variant-numeric: tabular-nums; font-family: inherit; line-height: 1.2; }
.ddt-tn-tl:focus { border-color: var(--c); outline: 4px solid var(--c-nhat); }
.ddt-tn-ph { min-height: 1.6em; margin: 6px 0 10px; font-size: 1.15rem; font-weight: 700; }
.ddt-tn-ph--dung { color: var(--xanh-la); }
.ddt-tn-ph--sai { color: var(--do); }
.ddt-phim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 360px; margin: 0 auto 12px; }
.ddt-phim button { min-height: 58px; border-radius: var(--r-nho); border: 1px solid var(--vien); background: var(--bg); color: var(--chu); font: inherit;
  font-size: 1.5rem; font-weight: 800; cursor: pointer; }
.ddt-phim button:hover { background: var(--c-nhat); border-color: var(--c-vien); }
.ddt-phim [data-so="xoa"] { font-size: 1rem; }
.ddt-phim__ok { background: var(--c-dam) !important; color: #fff !important; border-color: var(--c-dam) !important; font-size: 1.05rem !important; }
.ddt-tn-kq h2 { margin-top: 0; }
.ddt-tn-kq__so { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 800; color: var(--c-dam); margin: 0 0 6px; }
.ddt-tn-kq__sai { columns: 2 260px; margin: 0 0 16px; font-variant-numeric: tabular-nums; }
.ddt-tn-kq__sai li { break-inside: avoid; padding: 2px 0; }

/* Phân số */
.ddt-ps-nhap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-bottom: 16px; }
.ddt-ps-mot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ddt-ps-nhan { font-size: .8125rem; font-weight: 700; color: var(--phu); }
.ddt-ps-o { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.ddt-ps-o input { width: 4.2em; min-height: 46px; text-align: center; font: inherit; font-size: 1.4rem; font-weight: 800; border: 1px solid #cfd6d1;
  border-radius: var(--r-nho); background: #fff; color: var(--chu); }
.ddt-ps-o input:focus { border-color: var(--c); outline: 3px solid var(--c-nhat); }
.ddt-ps-gach { display: block; width: 4.6em; height: 3px; background: var(--chu); border-radius: 2px; }
.ddt-ps-dau { font-size: 2rem; font-weight: 800; color: var(--c-dam); }
.ddt-ps-ve { margin-bottom: 12px; }
.ddt-ps-hang { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center; }
.ddt-ps-hang--doc { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; max-width: 980px; margin: 0 auto; }
.ddt-ps-hang--doc > * { flex: none; }
.ddt-ps-hinh--tron { width: clamp(150px, 22vw, 300px); height: auto; }
.ddt-ps-hinh--thanh { width: 100%; height: auto; aspect-ratio: 604 / 64; display: block; }
.ddt-ps-bam { cursor: pointer; }
.ddt-ps-bam:hover { opacity: .85; }
.ddt-ps-thanh { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); align-items: center; gap: 12px; }
.ddt-ps-thanh__ve { display: grid; gap: 6px; }
.ddt-ps-giai { max-width: 980px; margin: 0 auto; }
.ddt-ps-dong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 1.15rem; }
.ddt-ps-dong--to { font-size: 2rem; font-weight: 800; justify-content: center; }
.ddt-psc { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; padding: 0 3px; }
.ddt-psc > span:first-child { border-bottom: 2px solid currentColor; padding: 0 4px; }
.ddt-psc--to { font-size: 1.6em; color: var(--c-dam); }

/* Khối đếm */
.ddt-kd-tren { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.ddt-kd-kho { display: flex; gap: 10px; flex-wrap: wrap; }
.ddt-kd-nguon { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 96px; min-height: 110px; padding: 10px 12px;
  border: 2px dashed var(--c-vien); border-radius: var(--r); background: var(--the); font: inherit; font-weight: 700; color: var(--c-dam); cursor: grab; touch-action: none; }
.ddt-kd-nguon:hover { background: var(--c-nhat); }
.ddt-kd-so { text-align: right; }
.ddt-kd-so__chu { margin: 0; font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800; color: var(--c-dam); font-variant-numeric: tabular-nums; line-height: 1; }
.ddt-kd-so .phu { margin: 4px 0 0; max-width: 520px; }
.ddt-kd-bang { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; min-height: 280px; }
.ddt-kd-cot { display: flex; flex-direction: column; border: 2px solid var(--vien); border-radius: var(--r); background: #fbfbf8; min-width: 0; }
.ddt-kd-cot h3 { margin: 0; padding: 8px; text-align: center; font-size: 1.05rem; border-bottom: 1px solid var(--vien); background: var(--bg); border-radius: var(--r) var(--r) 0 0; }
.ddt-kd-cot__o { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 10px; min-height: 200px; }
.ddt-kd-cot__dem { margin: 0; padding: 6px; text-align: center; font-size: 1.6rem; font-weight: 800; color: var(--c-dam); border-top: 1px solid var(--vien); font-variant-numeric: tabular-nums; }
.ddt-khoi { display: block; flex: none; border: 0; padding: 0; cursor: pointer; touch-action: none; }
.ddt-khoi--dv { width: 18px; height: 18px; background: #f0be58; outline: 1.5px solid #8a6116; outline-offset: -1.5px; }
.ddt-khoi--chuc { width: 18px; height: 180px; background: repeating-linear-gradient(to bottom, #1f7a3a 0 16.5px, #0f4d22 16.5px 18px); outline: 1.5px solid #0f4d22; outline-offset: -1.5px; }
.ddt-khoi--tram { width: 90px; height: 90px; background: repeating-linear-gradient(to bottom, transparent 0 8px, #0e3f75 8px 9px), repeating-linear-gradient(to right, #1d4f91 0 8px, #0e3f75 8px 9px);
  outline: 1.5px solid #0e3f75; outline-offset: -1.5px; }
.ddt-kd-nguon .ddt-khoi--chuc { height: 70px; background: repeating-linear-gradient(to bottom, #1f7a3a 0 6px, #0f4d22 6px 7px); }
.ddt-kd-nguon .ddt-khoi--tram { width: 56px; height: 56px; background: repeating-linear-gradient(to bottom, transparent 0 4.6px, #0e3f75 4.6px 5.6px), repeating-linear-gradient(to right, #1d4f91 0 4.6px, #0e3f75 4.6px 5.6px); }
.ddt-kd-trong:focus-visible { outline: 3px solid #f0be58; outline-offset: 2px; }
.ddt-bong { position: fixed; z-index: 90; pointer-events: none; transform: translate(-50%, -50%); opacity: .85; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.ddt-kd-nut { margin: 12px 0; }
.ddt-kd-do { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.ddt-kd-de { font-size: 1.15rem; font-weight: 700; color: var(--c-dam); }

/* Đồng hồ */
.ddt-dh-khung { display: grid; gap: 20px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ddt-dh-khung { grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr); } }
.ddt-dh-mat svg { display: block; width: min(100%, 560px, 68vh); height: auto; margin: 0 auto; touch-action: none; cursor: grab; user-select: none; }
.ddt-dh-mat svg.ddt-dh-khoa { cursor: default; }
.ddt-dh-so { font-size: 17px; font-weight: 800; fill: #1d2a2c; font-family: var(--font); }
.ddt-dh-ben .field { max-width: 320px; margin-bottom: 14px; }
.ddt-dh-gio { font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 800; color: var(--c-dam); margin: 0 0 10px; }
.ddt-dh-hoi { font-size: 1.3rem; font-weight: 700; margin: 0 0 12px; }
.ddt-dh-hoi b { color: var(--c-dam); }
.ddt-dh-chon { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.ddt-dh-lc { min-height: 56px; font-size: 1.1rem; }
.ddt-dh-lc--dung { background: var(--xanh-la) !important; border-color: var(--xanh-la) !important; color: #fff !important; }
.ddt-dh-lc--sai { background: var(--do-nhat) !important; border-color: var(--do) !important; color: var(--do) !important; }
.ddt-dh-ph { min-height: 1.5em; font-size: 1.1rem; font-weight: 700; color: var(--c-dam); }
.ddt-dh-diem { color: var(--phu); font-weight: 600; }

/* Bàn tính */
.ddt-bt-tren { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-bottom: 12px; }
.ddt-bt-cot { width: 120px; }
.ddt-bt-khung { overflow-x: auto; }
.ddt-bt-khung svg { display: block; width: 100%; max-width: 1100px; height: auto; margin: 0 auto; user-select: none; }
.ddt-bt-hat { cursor: pointer; transition: transform .15s ease-out; }
.ddt-bt-hat:hover path { filter: brightness(1.15); }
.ddt-bt-hat:focus { outline: none; }
.ddt-bt-hat:focus-visible path { stroke: #f0be58; stroke-width: 3; }
.ddt-bt-chu-so { font-size: 20px; font-weight: 800; fill: #093166; font-family: var(--font); }
.ddt-bt-so { text-align: center; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; color: var(--c-dam); margin: 8px 0; font-variant-numeric: tabular-nums; min-height: 1.2em; }

/* Xếp hình 7 mảnh */
.ddt-xh-tren { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 8px; }
.ddt-xh-mau { min-width: 220px; }
.ddt-xh-ph { min-height: 1.5em; margin: 0 0 8px; font-weight: 700; color: var(--c-dam); font-size: 1.1rem; }
.ddt-xh-ph--dung { color: var(--xanh-la); }
.ddt-xh-khung { border: 1px solid var(--vien); border-radius: var(--r); overflow: hidden; background: #fbfbf8; }
.ddt-xh-khung svg { display: block; width: 100%; height: auto; max-height: 74vh; touch-action: none; user-select: none; }
.ddt-xh-manh { cursor: grab; }
.ddt-xh-manh:focus { outline: none; }
.ddt-xh-manh:focus-visible { outline: none; stroke: #f0be58; stroke-width: .14; }

@media (max-width: 640px) {
  .ddt-p { padding: 12px; }
  .ddt-phim button { min-height: 52px; }
  .ddt-kd-tren { flex-direction: column; align-items: stretch; }
  .ddt-kd-so { text-align: left; }
  .ddt-kd-nguon { min-width: 0; flex: 1; min-height: 96px; }
  .ddt-kd-bang { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .ddt-kd-cot__o { padding: 6px; gap: 4px; }
  .ddt-khoi--tram { width: 54px; height: 54px; background: repeating-linear-gradient(to bottom, transparent 0 4.4px, #0e3f75 4.4px 5.4px), repeating-linear-gradient(to right, #1d4f91 0 4.4px, #0e3f75 4.4px 5.4px); }
  .ddt-khoi--chuc { width: 12px; height: 120px; background: repeating-linear-gradient(to bottom, #1f7a3a 0 11px, #0f4d22 11px 12px); }
  .ddt-khoi--dv { width: 12px; height: 12px; }
  .ddt-ps-thanh { grid-template-columns: 3.4em minmax(0, 1fr); gap: 8px; }
  .ddt-dh-chon { grid-template-columns: 1fr; }
  .ddt-che-do label { padding: 6px 10px; font-size: .875rem; }
}