@font-face {
  font-family: "SVN-Comic Sans MS";
  src: url("/fonts/SVN-Comic%20Sans%20MS.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; }

body { background: #ff66c4; overflow-x: hidden; }

.art {
  --body: max(1.667cqw, 9px);

  position: relative;
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 1440 / 3875;
  margin: 0 auto;
  overflow: hidden;
  background-color: #ff66c4;
  container-type: inline-size;
}

.art > * { position: absolute; }

/* ---------- Nền ---------- */
.box-1 { left: 0; top: 142.083cqw; width: 100cqw; height: 127.014cqw; background-color: #a9db5b; }

/* ---------- Chữ ---------- */
.my-art-gallery {
  left: 4.306cqw; top: 8.542cqw;
  font-family: "Amatic SC", sans-serif;
  font-size: 16.667cqw; font-weight: 400; line-height: 0.94;
  color: #fdfdb4; white-space: nowrap;
}

.part {
  font-family: "Amatic SC", sans-serif;
  font-size: 6.667cqw; font-weight: 700; line-height: 0.94;
  color: #fefeb4; white-space: nowrap;
  transform-origin: 0 0; transform: rotate(-5.48deg);
}
.part-1-the-process { left: 4.306cqw; top: 42.014cqw; }
.part-2-my-workshop { left: 5.764cqw; top: 155.764cqw; }

.txt {
  font-family: "SVN-Comic Sans MS", "Comic Sans MS", "Comic Neue", cursive;
  font-size: var(--body); font-weight: 400; line-height: 0.96;
  color: #fdfdb4; text-align: justify; hyphens: none;
  transform-origin: 0 0;
}
.it-starts-with-a       { left: 27.569cqw; top: 48.681cqw; width: 45.278cqw; height: 10.278cqw; transform: rotate(2.15deg); }
.while-learning-to-make { left: 4.306cqw;  top: 61.528cqw; width: 29.236cqw; height: 26.042cqw; transform: rotate(-2.73deg); }
.i-see-something-of     { left: 51.944cqw; top: 91.944cqw; width: 41.25cqw;  height: 9.861cqw;  transform: rotate(1.88deg); }
.apparently-one-to-he   { left: 17.222cqw; top: 162.986cqw; width: 41.25cqw; height: 5cqw;      transform: rotate(1.88deg); }

/* ---------- Hình trang trí (đã nghiêng / lật sẵn: khung bao sau xoay, không transform) ---------- */
[class^="untitled-artwork-"], .tape { object-fit: contain; }

.untitled-artwork-4-1   { left: -17.819cqw; top: 134.931cqw; width: 144.514cqw; height: 166.341cqw; }
.untitled-artwork-15-1  { left: 1.875cqw;   top: 211.111cqw; width: 37.153cqw;  height: 46.111cqw; }
.untitled-artwork-2-1   { left: 76.319cqw;  top: 40.686cqw;  width: 30.941cqw;  height: 47.061cqw; }
.untitled-artwork-2-1-2 { left: -27.849cqw; top: 35.764cqw;  width: 81.054cqw;  height: 92.653cqw; }
.untitled-artwork-7-3   { left: 29.167cqw;  top: 64.236cqw;  width: 76.597cqw;  height: 45.278cqw; }
.untitled-artwork-16-1  { left: 54.459cqw;  top: 162.986cqw; width: 36.961cqw;  height: 26.587cqw; }
.untitled-artwork-2-2-2 { left: 43.611cqw;  top: 246.667cqw; width: 16.667cqw;  height: 11.042cqw; }
.untitled-artwork-8-2-1 { left: 79.306cqw;  top: 202.014cqw; width: 15.347cqw;  height: 10.972cqw; }
.untitled-artwork-6-1   { left: 81.667cqw;  top: 249.444cqw; width: 17.014cqw;  height: 15.486cqw; }
.untitled-artwork-7-15  { left: -9.028cqw;  top: 227.569cqw; width: 43.472cqw;  height: 61.458cqw; }
.untitled-artwork-6-3   { left: 65.903cqw;  top: 6.875cqw;   width: 44.722cqw;  height: 33.819cqw; }

/* ---------- Dải cỏ ---------- */
.box-3 { left: -4.167cqw; top: 117.222cqw; width: 118.542cqw; height: 32.361cqw; }
.box-3 > * { position: absolute; }
.g { width: 30.903cqw; height: 18.194cqw; object-fit: cover; }
.g1  { left: 0;         top: 10.833cqw; }
.g2  { left: 16.042cqw; top: 10.833cqw; }
.g3  { left: 36.042cqw; top: 10.833cqw; }
.g4  { left: 51.528cqw; top: 10.833cqw; }
.g5  { left: 69.583cqw; top: 10.833cqw; }
.g6  { left: 87.639cqw; top: 10.833cqw; }
.g7  { left: 0.556cqw;  top: 14.167cqw; }
.g8  { left: 19.653cqw; top: 14.167cqw; }
.g9  { left: 38.75cqw;  top: 14.167cqw; }
.g10 { left: 57.847cqw; top: 14.167cqw; }
.g11 { left: 76.944cqw; top: 14.167cqw; }
.box-3 .untitled-artwork-2-2 { left: 22.431cqw; top: -0.024cqw; width: 16.324cqw; height: 24.846cqw; }

/* ---------- Ảnh có viền trắng (giữ xoay) ---------- */
.photo {
  object-fit: cover;
  transform-origin: 0 0;
  outline: 0.278cqw solid #fff;
  outline-offset: -0.278cqw;
  box-shadow: 0 0.278cqw 0.278cqw 0 rgba(0, 0, 0, 0.25);
}
.photo.sh-r { box-shadow: 0.278cqw 0.278cqw 0.278cqw 0 rgba(0, 0, 0, 0.25); }

.img-1  { left: 36.319cqw; top: 62.569cqw;  width: 43.681cqw; height: 28.958cqw; transform: rotate(-3deg); }
.img-2  { left: 6.389cqw;  top: 102.292cqw; width: 21.389cqw; height: 21.389cqw; transform: rotate(5.89deg); }
.img-3  { left: 49.792cqw; top: 180.833cqw; width: 21.389cqw; height: 21.389cqw; transform: rotate(9.07deg); }
.img-4  { left: 25.556cqw; top: 102.292cqw; width: 22.153cqw; height: 23.333cqw; transform: rotate(-5.9deg); }
.img-5  { left: 65.903cqw; top: 186.458cqw; width: 21.389cqw; height: 21.389cqw; transform: rotate(-9.66deg); }
.img-6  { left: 51.25cqw;  top: 103.333cqw; width: 21.389cqw; height: 21.389cqw; transform: rotate(8.9deg); }
.img-7  { left: 30.764cqw; top: 211.667cqw; width: 21.389cqw; height: 21.389cqw; transform: rotate(7.01deg); }
.img-8  { left: 70.833cqw; top: 104.167cqw; width: 21.389cqw; height: 21.389cqw; transform: rotate(-5.27deg); }
.img-9  { left: 51.597cqw; top: 217.5cqw;   width: 21.389cqw; height: 21.389cqw; transform: rotate(19.18deg); }
.img-10 { left: 2.708cqw;  top: 178.472cqw; width: 42.153cqw; height: 41.667cqw; transform: rotate(-9.13deg); }

.img-7817-1 {
  left: 15.347cqw; top: 225.556cqw; width: 27.917cqw; height: 24.306cqw; transform: rotate(13.15deg);
  outline-width: 0.417cqw; outline-offset: -0.417cqw;
}
.dsc06092-1 {
  left: 51.25cqw; top: 246.25cqw; width: 32.153cqw; height: 15.833cqw; transform: rotate(-5.56deg);
  outline-width: 0.417cqw; outline-offset: -0.417cqw;
}
.april-2026 {
  left: 65.486cqw; top: 215.208cqw; width: 28.472cqw; height: 18.958cqw; transform: none;
  outline-width: 0.417cqw; outline-offset: -0.417cqw;
  box-shadow: 0.278cqw 0.278cqw 0.278cqw 0 rgba(0, 0, 0, 0.25);
}

/* ---------- Băng dính (đã nghiêng sẵn: khung bao sau xoay, không transform) ---------- */
.t-8-4    { left: 71.886cqw; top: 56.319cqw;  width: 13.048cqw; height: 8.556cqw; }
.t-8-7    { left: -0.336cqw; top: 118.681cqw; width: 13.048cqw; height: 8.556cqw; }
.t-8-8    { left: 61.042cqw; top: 124.615cqw; width: 12.905cqw; height: 6.294cqw; }
.t-8-6-2  { left: 28.494cqw; top: 87.569cqw;  width: 21.27cqw;  height: 8.794cqw; }
.t-8-9    { left: 83.648cqw; top: 99.861cqw;  width: 14.612cqw; height: 6.067cqw; }
.t-8-6-3  { left: 41.134cqw; top: 97.778cqw;  width: 10.142cqw; height: 4.94cqw; }
.t-8-12   { left: -7.5cqw;   top: 166.652cqw; width: 26.524cqw; height: 21.883cqw; }
.t-8-13   { left: 13.194cqw; top: 221.599cqw; width: 10.21cqw;  height: 6.46cqw; }
.t-8-14   { left: 29.444cqw; top: 250.775cqw; width: 14.243cqw; height: 8.011cqw; }
.t-8-15   { left: 57.431cqw; top: 242.509cqw; width: 14.596cqw; height: 5.163cqw; }
.t-8-2    { left: 59.028cqw; top: 210.914cqw; width: 14.243cqw; height: 8.011cqw; }
.t-8-12-2 { left: 87.986cqw; top: 231.043cqw; width: 10.21cqw;  height: 6.46cqw; }

/* =====================================================
   RESPONSIVE — toàn trang co theo chiều rộng, chỉ nâng cỡ chữ
   ===================================================== */
@media (max-width: 1439px) { .art { --body: max(1.7cqw, 9px); } }
@media (max-width: 1199px) { .art { --body: max(1.78cqw, 10px); } }
@media (max-width: 1023px) { .art { --body: max(1.9cqw, 10px); } }
@media (max-width: 767px)  { .art { --body: max(2.05cqw, 10px); } }
@media (max-width: 479px)  { .art { --body: max(2.2cqw, 9px); } }