@font-face { font-family: "PDFFont"; src: url("../fonts/DejaVuSans.ttf"); }
.chia { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 800px) { .chia { grid-template-columns: 1fr; } }
.ben .the { padding: 12px 14px; margin-bottom: 12px; }
.ben label { display: block; font-weight: 500; font-size: 14px; margin: 8px 0 0; }
.ben label.bat { margin: 0; font-size: 16px; display: flex; gap: 8px; align-items: center; }
.ben input[type=text], .ben textarea { width: 100%; padding: 7px; border: 1px solid var(--vien); border-radius: 6px; font: inherit; }
.ben input[type=range] { width: 60%; vertical-align: middle; }
.ben .tuy { opacity: .45; pointer-events: none; }
.ben .tuy.mo, #chon.tuy { opacity: 1; pointer-events: auto; }
.hang2 { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.hang2 button { margin: 0; }
.lon { width: 100%; padding: 12px; font-size: 16px; }
.vitri { display: grid; grid-template-columns: repeat(3, 40px); gap: 4px; margin: 8px 0; }
.vitri button { margin: 0; padding: 6px 0; background: #fff; color: var(--nhan); border: 1px solid var(--nhan); }
.vitri button.on { background: var(--nhan); color: #fff; }
.giua { min-width: 0; }
#khungTrang { position: relative; display: inline-block; background: #fff; box-shadow: 0 1px 8px rgb(0 0 0/.35); max-width: 100%; touch-action: none; }
#cv { display: block; }
#phu { position: absolute; inset: 0; overflow: hidden; font-family: "PDFFont", sans-serif; }
#phu .tinhtai { position: absolute; white-space: pre; line-height: 1.2; pointer-events: none; }
#phu .muc { position: absolute; cursor: move; touch-action: none; white-space: pre; line-height: 1.2; outline: 1px dashed transparent; padding: 0; }
#phu .muc:hover { outline-color: #7aa7e0; }
#phu .muc.chon { outline: 2px solid var(--nhan); }
#phu .muc img { display: block; width: 100%; height: 100%; pointer-events: none; }
#phu .tay { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; background: var(--nhan); border-radius: 50%; cursor: nwse-resize; display: none; }
#phu .muc.chon .tay { display: block; }
#bangKy { width: 100%; max-width: 560px; height: auto; border: 1px dashed #99a; border-radius: 8px; background: #fff; touch-action: none; display: block; margin: 8px 0; cursor: crosshair; }
#hopKy { width: min(96vw, 620px); border: 0; border-radius: 12px; padding: 14px; }

@font-face { font-family: "KyDancing"; src: url("../fonts/chuky/dancing-script-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "KyDancing"; src: url("../fonts/chuky/dancing-script-vietnamese-400-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "KyPacifico"; src: url("../fonts/chuky/pacifico-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "KyPacifico"; src: url("../fonts/chuky/pacifico-vietnamese-400-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "KyVibes"; src: url("../fonts/chuky/great-vibes-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "KyVibes"; src: url("../fonts/chuky/great-vibes-vietnamese-400-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
#boXoay { position: relative; max-width: 100%; }
#boXoay #khungTrang { position: absolute; transform-origin: center; }
.kyfont { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 10px 0; }
.kyfont button { margin: 0; background: #fff; color: #111; border: 2px solid var(--vien); border-radius: 8px; padding: 6px 10px; font-size: 30px; line-height: 1.5; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kyfont button.on { border-color: var(--nhan); background: #eef4ff; }
#kyTen { width: 100%; padding: 9px; border: 1px solid var(--vien); border-radius: 6px; font: inherit; font-size: 18px; }
#phu .xoayTay { position: absolute; left: 50%; top: -30px; width: 16px; height: 16px; margin-left: -8px; background: #fff; border: 2px solid var(--nhan); border-radius: 50%; cursor: grab; display: none; }
#phu .xoayTay::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 14px; margin-left: -1px; background: var(--nhan); }
#phu .muc.chon .xoayTay { display: block; }
[hidden] { display: none !important; }