/* Sinh tự động bởi anh-codex/giao-dien/cat-khung/xuat-web.py từ khung.json. Không sửa tay: đổi hình thì chạy lại. */
/* Khung tấm chín mảnh: 4 góc giữ nguyên, 4 cạnh dải hạt kéo giãn. Đệm = đầu mút góc chạm + 16, mép trong dải hạt + 24. */
.khung {
  border: 0.01px solid transparent;
  border-image-source: url(khoi/gd/khung-tam.webp);
  border-image-slice: 126 202 131 203;
  border-image-width: 41.0px 65.67px 42.48px 66.0px;
  border-image-outset: 3.59px 4.08px 3.59px 4.08px;
  border-image-repeat: stretch;
  --dem-tren: 53.4px; --dem-ngang: 31.8px; --dem-duoi: 54.9px;
  padding: var(--dem-tren) var(--dem-ngang) var(--dem-duoi);
}
/* bien-ten: giữ đúng tỉ lệ hình, chữ chỉ nằm trong lòng trống đo được (.long) */
.bien { position: absolute; aspect-ratio: 2.5; background: url(khoi/gd/bien-ten.webp) center / 100% 100% no-repeat; }
.bien > .long { position: absolute; top: 31.79%; right: 12.07%; bottom: 24.82%; left: 11.86%; display: grid; place-items: center; align-content: center; text-align: center; overflow: hidden; }
/* the-ten: giữ đúng tỉ lệ hình, chữ chỉ nằm trong lòng trống đo được (.long) */
.the-ten { position: absolute; aspect-ratio: 3.3374; background: url(khoi/gd/the-ten.webp) center / 100% 100% no-repeat; }
.the-ten > .long { position: absolute; top: 29.83%; right: 17.8%; bottom: 20.29%; left: 17.22%; display: grid; place-items: center; align-content: center; text-align: center; overflow: hidden; }
/* cuon-lua-2: giữ đúng tỉ lệ hình, chữ chỉ nằm trong lòng trống đo được (.long) */
.lua { position: absolute; aspect-ratio: 2.5571; background: url(khoi/gd/cuon-lua.webp) center / 100% 100% no-repeat; }
.lua > .long { position: absolute; top: 37.9%; right: 7.23%; bottom: 29.22%; left: 6.79%; display: grid; place-items: center; align-content: center; text-align: center; overflow: hidden; }
/* Nút dát vàng ba mảnh: hai đầu mây cuộn giữ nguyên, đoạn giữa vàng trơn kéo giãn; chiều cao đặt bằng --cao */
.nut-vang { --cao: 54px; height: var(--cao); box-sizing: border-box; border-style: solid; border-color: transparent;
  border-width: 0 calc(var(--cao) * 1.1644) 0 calc(var(--cao) * 1.24);
  border-image: url(khoi/gd/nut-vang.webp) 0 125 0 133 fill / 0 calc(var(--cao) * 1.1644) 0 calc(var(--cao) * 1.24) stretch;
  display: flex; align-items: center; justify-content: center; padding: calc(var(--cao) * 0.1422) 4px calc(var(--cao) * 0.2444); white-space: nowrap; overflow: hidden; }