@font-face{font-family:QuicksandLesson;src:url('./assets/art/quicksand.ttf') format('truetype');font-weight:300 700;font-display:block}
.vi-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4%;color:#003697;isolation:isolate}
.vi-glyph{font-family:QuicksandLesson,'Century Gothic',sans-serif;font-weight:700;line-height:1;font-style:normal;font-variant-ligatures:none;display:inline-block;color:#064bc0}
.vi-letter-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vh;border:clamp(3px,.55vh,6px) solid #fff9cb;border-radius:clamp(18px,4vh,40px);background:#ffffffed;box-shadow:0 5px 0 #0398cc38;padding:1.8vh 3.5vw;min-width:16vw;transform-origin:center;position:relative;color:#004bba}
button.vi-letter-card{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button.vi-letter-card:disabled{cursor:default;opacity:1}
button.vi-letter-card:focus-visible{outline:5px solid #ffdb12;outline-offset:5px}
.vi-letter-card>.vi-glyph{font-size:clamp(92px,29vh,270px)}
.vi-card-label{font-family:Baloo,sans-serif;font-size:clamp(17px,3.6vh,34px);font-weight:650;line-height:1.1;text-align:center}
.vi-active{filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 5px #ffe438)}
.vi-letter-card.vi-active{background:#fff0a6;border-color:#ffbf00;box-shadow:0 0 0 5px #fff}
.vi-heard:after{content:'✓';position:absolute;right:5%;top:3%;font-size:clamp(21px,4.8vh,44px);color:#07845c}
.vi-forms-row{display:flex;gap:5vw;align-items:center;justify-content:center;max-width:88vw}
.vi-letter-forms,.vi-review{padding:10vh 5vw 15vh}
.vi-illustration{position:absolute;left:9%;right:9%;top:15%;bottom:19%;display:flex;align-items:center;justify-content:center}
.vi-art{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 2px #008cc329);border-radius:clamp(12px,3vh,28px)}
.vi-context .vi-illustration{left:18%;right:18%;top:12%;bottom:27%}
.vi-sentence{position:absolute;left:8%;right:8%;bottom:16%;display:flex;align-items:center;justify-content:center;gap:.22em;font-size:clamp(27px,7vh,64px);font-family:QuicksandLesson,sans-serif;line-height:1.2;font-weight:650;white-space:nowrap}
.vi-word{display:inline-block;border-radius:.2em;padding:0 .08em;transition:background-color .12s,color .12s;transform-origin:center}
.vi-word-active{background:#fff6a1;color:#003b91;box-shadow:0 3px 0 #f5bb0d}
.vi-target-letter{display:inline-block;color:#d41472}
.vi-pronunciation{padding:14vh 5vw 18vh;gap:8vw}
.vi-mouth-card{height:53vh;width:35vw;max-width:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1vh}
.vi-mouth-card svg{width:100%;height:90%;overflow:visible}
.vi-mouth-open{transform-box:fill-box;transform-origin:center center}
.vi-mouth-note{font-size:clamp(17px,3.8vh,34px);line-height:1.15;font-weight:650;text-align:center;white-space:nowrap}
.vi-pronunciation .vi-letter-card{min-width:20vw}
.vi-pronunciation .vi-glyph{font-size:30vh}
.vi-match{padding-top:13vh;padding-bottom:20vh;flex-direction:column;gap:2vh}
.vi-sample{padding:0 3.5vw 1vh;min-width:15vw;border-color:#5ad3fc;background:#e4fbff}
.vi-sample>.vi-glyph{font-size:clamp(60px,20vh,190px)}
.vi-sample .vi-card-label{font-size:clamp(16px,3vh,28px)}
.vi-demo-row{display:flex;gap:3vw;align-items:center;justify-content:center}
.vi-demo-row .vi-letter-card{min-width:12vw;padding:.2vh 3vw;border-width:3px}
.vi-demo-row .vi-glyph{font-size:clamp(58px,17vh,155px)}
.vi-match:has(.vi-demo-row){padding-top:11vh;padding-bottom:14vh}
.vi-match:has(.vi-demo-row) .vi-sample>.vi-glyph{font-size:16vh}
.vi-independent{padding:12vh 5vw 27vh}
.vi-listen-cue{width:clamp(80px,18vw,230px);height:clamp(80px,24vh,230px);border-radius:50%;background:#fff8c7;display:flex;align-items:center;justify-content:center;border:5px solid #fff;box-shadow:0 5px 0 #009ac530}
.vi-listen-cue svg{width:66%;height:66%;overflow:visible}
.vi-speech-bubble{position:absolute;right:7%;top:15%;width:16%;aspect-ratio:1.12;background:#fffceb;border:clamp(3px,.7vh,7px) solid #1579db;border-radius:35%;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 #0576a82b;transform-origin:center}
.vi-speech-bubble:after{content:'';position:absolute;width:19%;height:23%;bottom:-13%;left:26%;background:#fffceb;border-left:clamp(3px,.7vh,7px) solid #1579db;border-bottom:clamp(3px,.7vh,7px) solid #1579db;transform:skewY(-30deg);z-index:-1}
.vi-speech-bubble .vi-glyph{font-size:clamp(65px,21vh,210px);color:#d2187b}
.vi-print-reference{position:absolute;left:4%;top:34%;min-width:0;width:16%;padding:1vh 1vw;z-index:2}
.vi-print-reference>.vi-glyph{font-size:clamp(65px,21vh,200px)}
.vi-print-reference .vi-card-label{font-size:clamp(15px,3vh,28px)}
#lesson[data-unit^="v-"] #caption,#lesson:has(.vi-letter-task) #answers .answer{font-family:QuicksandLesson,sans-serif;font-weight:700}
@media(max-height:450px) and (orientation:landscape){
  .vi-letter-card{border-width:3px;border-radius:20px;box-shadow:0 3px 0 #0398cc38}
  .vi-card-label{font-size:3.6vh}
  .vi-context .vi-illustration{top:13%;bottom:28%}
  .vi-sentence{bottom:16%;font-size:7vh}
  .vi-mouth-note{font-size:3.8vh}
  .vi-pronunciation{gap:6vw;padding-bottom:20vh}
  .vi-sample{padding-bottom:.5vh}
  .vi-demo-row .vi-glyph{font-size:16vh}
  .vi-demo-row .vi-letter-card{border-width:2px}
  .vi-speech-bubble{right:6%;top:17%;width:14%}
  .vi-speech-bubble .vi-glyph{font-size:20vh}
}
@media(prefers-reduced-motion:reduce){.vi-word{transition:none}}

/* ===== Nâng cấp 17/10/2026 ===== */
/* Khung đúng tỉ lệ tranh (1672 × 941): bóng chữ "a" đặt theo vị trí trong tranh, cạnh bạn nhỏ đang reo. */
.vi-illustration{container-type:size}
.vi-art-frame{position:relative;width:min(100cqw,calc(100cqh * 1672 / 941));height:min(100cqh,calc(100cqw * 941 / 1672))}
.vi-art-frame .vi-art{width:100%;height:100%}
.vi-art-frame .vi-speech-bubble{right:auto;top:3%;width:20%}
.vi-art-frame .vi-speech-bubble.at-kite{left:33%}
.vi-art-frame .vi-speech-bubble.at-waterslide{left:21%}
.vi-speech-bubble.at-waterslide:after{left:auto;right:22%;border-left:0;border-right:clamp(3px,.7vh,7px) solid #1579db;transform:skewY(30deg)}
/* Tìm chữ a trong câu: mỗi tiếng là một nút; chạm thì chữ a (à, á) của tiếng đó sáng hồng. */
.vi-sentence.is-touch{gap:.3em}
.vi-word-touch{font:inherit;color:inherit;border:clamp(3px,.5vh,5px) solid #fff;border-radius:.3em;background:#ffffffd9;padding:.05em .25em;box-shadow:0 4px 0 #0398cc40;cursor:pointer}
.vi-word-touch:disabled{cursor:default}
.vi-word-touch.vi-heard{background:#fff6c4;border-color:#ffd43b}
.vi-word-touch .vi-target-letter{color:#d41472}
/* Cái loa ở phần "Nghe âm, tìm chữ" bấm được để nghe lại âm. */
button.vi-listen-cue{padding:0;cursor:pointer}
button.vi-listen-cue:focus-visible{outline:5px solid #ffdb12;outline-offset:5px}

/* Leave separate space for the print reference, practice cue and confirmation. */
#lesson[data-unit="v-writing"]:has(.turn-done) .writing-board{left:25%;right:26%;height:52%}
#lesson:has(.turn-done) .vi-illustration{left:23%;right:5%;top:17%;bottom:27%}
#lesson:has(.turn-done) .vi-pronunciation{padding-left:22vw;gap:4vw}
#lesson:has(.turn-done) .vi-mouth-card{width:30vw}