@tinyweb_dev/oe-exam-sdk 0.1.27 → 0.1.29

package/dist/components/exams/take/components/question-renderers/MoversWriteSentencesRenderer.js

@@ -1 +1,11 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{ResolvedImage as r}from"../../../../../components/common/ResolvedImage";import s from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import a from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";export function MoversWriteSentencesRenderer({partNumber:o,partName:n,questionCount:i,instruction:l,imageUrl:m,title:d,groupContent:c,questions:p,answers:u,onAnswerChange:g,isReviewMode:x=!1}){return t("div",{className:"grid h-full grid-cols-1 gap-4 sm:gap-6 "+(x?"":"lg:grid-cols-2"),children:[t("div",{className:"flex flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pr-6 sm:pt-6",children:[e(s,{partNumber:o,questionCount:i,partName:n,isReviewMode:x}),e(a,{instruction:l,isReviewMode:x}),m&&e("div",{className:"flex items-center justify-center",children:e(r,{src:m,alt:"Illustration",className:"max-h-[300px] rounded-lg object-contain shadow-md"})}),c&&e("div",{className:"rounded-lg bg-amber-50 p-4 text-sm leading-relaxed text-gray-700",children:c})]}),t("div",{className:"flex flex-col gap-4 overflow-y-auto p-3 sm:gap-5 sm:pb-6 sm:pl-6 sm:pt-6",children:[d&&e("h2",{className:"text-center text-2xl font-bold uppercase text-coral-500",children:d}),p.map(r=>t("div",{id:`question-${r.id}`,className:"flex items-start gap-3",children:[e("span",{className:"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white",children:r.questionNumber}),e("textarea",{value:u[r.id]||"",onChange:e=>g(r.id,e.target.value),disabled:x,placeholder:"Write your sentence...",rows:2,className:"flex-1 resize-none rounded-lg border-2 border-gray-300 bg-white px-3 py-2 text-base outline-none transition-colors focus:border-blue-500 disabled:opacity-60"})]},r.id))]})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * WRITE_SENTENCES Renderer - Free-form text input per question
+ * Used in Movers P11 section 3
+ */
+import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+export function MoversWriteSentencesRenderer({ partNumber, partName, questionCount, instruction, imageUrl, title, groupContent, questions, answers, onAnswerChange, isReviewMode = false, }) {
+    return (_jsxs("div", { className: `grid h-full grid-cols-1 gap-4 sm:gap-6 ${!isReviewMode ? 'lg:grid-cols-2' : ''}`, children: [_jsxs("div", { className: "flex flex-col gap-4 overflow-y-auto p-3 sm:pb-6 sm:pr-6 sm:pt-6", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: questionCount, partName: partName, isReviewMode: isReviewMode }), _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode }), imageUrl && (_jsx("div", { className: "flex items-center justify-center", children: _jsx(ResolvedImage, { src: imageUrl, alt: "Illustration", className: "max-h-[300px] rounded-lg object-contain shadow-md" }) })), groupContent && (_jsx("div", { className: "rounded-lg bg-amber-50 p-4 text-sm leading-relaxed text-gray-700", children: groupContent }))] }), _jsxs("div", { className: "flex flex-col gap-4 overflow-y-auto p-3 sm:gap-5 sm:pb-6 sm:pl-6 sm:pt-6", children: [title && (_jsx("h2", { className: "text-center text-2xl font-bold uppercase text-coral-500", children: title })), questions.map((question) => (_jsxs("div", { id: `question-${question.id}`, className: "flex items-start gap-3", children: [_jsx("span", { className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-blue-500 text-sm font-bold text-white", children: question.questionNumber }), _jsx("textarea", { value: answers[question.id] || '', onChange: (e) => onAnswerChange(question.id, e.target.value), disabled: isReviewMode, placeholder: "Write your sentence...", rows: 2, className: "flex-1 resize-none rounded-lg border-2 border-gray-300 bg-white px-3 py-2 text-base outline-none transition-colors focus:border-blue-500 disabled:opacity-60" })] }, question.id)))] })] }));
+}

package/dist/components/exams/take/components/question-renderers/MoversWritingRenderer.js

@@ -1 +1,56 @@
-"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import{useMemo as s}from"react";import{ResolvedImage as r}from"../../../../../components/common/ResolvedImage";import l from"../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner";import d from"../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner";import{HtmlOrText as i}from"../../../../../shared/lib/html-content";export function MoversWritingRenderer({partNumber:n,partName:c,instruction:o,prompt:m,requirements:x,minWords:b,maxWords:p,answer:h,onAnswerChange:g,isReviewMode:u=!1,guideImages:f,teacherScore:N,maxScore:v,teacherFeedback:w,writingAssessment:y}){const F=s(()=>h&&h.trim()?h.trim().split(/\s+/).filter(Boolean).length:0,[h]);return t("div",{className:"flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar relative",children:[t("div",{className:"flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-4",children:[e(l,{partNumber:n,questionCount:1,partName:c,isReviewMode:u}),o&&e(d,{instruction:o,isReviewMode:u})]}),e("div",{className:"flex flex-col gap-4 p-3 sm:px-6 sm:pt-0 sticky top-0 z-20 bg-white/95 backdrop-blur pb-2 shadow-sm border-b border-gray-100",children:t("div",{className:"flex flex-col gap-4",children:[e("div",{className:"rounded-2xl border border-slate-200 bg-white p-5 shadow-sm",children:t("div",{className:"flex flex-col gap-4 text-base leading-relaxed text-gray-800",children:[t("div",{className:"space-y-3",children:[e("p",{className:"text-lg font-semibold text-slate-900",children:"Writing task"}),e(i,{value:m,className:"text-base leading-relaxed text-gray-800"})]}),x&&x.length>0&&t("div",{className:"rounded-xl bg-slate-50 p-4",children:[e("p",{className:"text-sm font-bold uppercase tracking-wide text-slate-700",children:"Include"}),e("ul",{className:"mt-3 space-y-2",children:x.map((a,s)=>t("li",{className:"flex items-start gap-2 text-sm text-slate-700",children:[e("span",{className:"mt-1.5 h-2 w-2 rounded-full bg-blue-500"}),e(i,{value:a,as:"span"})]},s))})]}),(b||p)&&t("div",{className:"flex flex-wrap gap-2",children:[b&&t("div",{className:"inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-sm font-medium text-blue-700",children:["Minimum: ",b," words"]}),p&&t("div",{className:"inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-sm font-medium text-slate-600",children:["Suggested max: ",p," words"]})]})]})}),f&&f.length>0&&t("div",{className:"rounded-2xl border border-slate-200 bg-white p-4 shadow-sm",children:[t("div",{className:"mb-3 flex items-center justify-between gap-3",children:[e("p",{className:"text-sm font-semibold uppercase tracking-wide text-slate-600",children:"Story pictures"}),e("p",{className:"text-xs text-slate-400",children:"Read the sequence from left to right"})]}),e("div",{className:"grid gap-4 "+(1===f.length?"grid-cols-1":"grid-cols-1 sm:grid-cols-2"),children:f.map((a,s)=>t("div",{className:"rounded-xl border border-slate-200 bg-slate-50/80 p-2 shadow-sm",children:[e(r,{src:a,alt:`Picture ${s+1}`,className:"w-full rounded-lg bg-white object-contain "+(1===f.length?"max-h-[400px]":"aspect-[4/3]")}),e("div",{className:"pt-2 text-center text-[13px] font-medium text-slate-500",children:f.length>1?`Picture ${s+1}`:"Reference Image"})]},s))})]})]})}),t("div",{className:"flex flex-col gap-3 p-3 sm:px-6 sm:pb-6",children:[t("div",{className:"rounded-2xl border border-slate-200 bg-white shadow-sm",children:[t("div",{className:"flex items-center justify-between gap-3 border-b border-slate-100 px-5 py-3 bg-slate-50/50 rounded-t-2xl",children:[t("div",{children:[e("p",{className:"text-sm font-semibold uppercase tracking-wide text-slate-500",children:"Your answer"}),e("p",{className:"text-xs text-slate-400",children:"Write clearly and organise your ideas in order."})]}),t("div",{className:"rounded-full px-3 py-1 text-sm font-semibold "+(b&&F<b?"border border-amber-200 bg-amber-50 text-amber-700":"border border-emerald-200 bg-emerald-50 text-emerald-700"),children:[F," words"]})]}),t("div",{className:"p-4",children:[e("textarea",{id:"writing-answer",name:"writing-answer",value:h,onChange:e=>{const t=e.target.value;if(p){const e=Number(p);if((t.trim()?t.trim().split(/\s+/).filter(Boolean).length:0)>e&&t.length>=(h?.length||0))return}g(t)},disabled:u,placeholder:"Write your answer here...",className:"min-h-[340px] w-full resize-y rounded-xl border border-slate-200 bg-slate-50/50 p-4 text-base leading-8 text-gray-800 outline-none transition focus:border-blue-400 focus:bg-white focus:ring-2 focus:ring-blue-100 disabled:bg-gray-50 disabled:text-gray-700"}),t("div",{className:"mt-3 flex flex-wrap items-center justify-between gap-3 text-sm",children:[e("p",{className:"text-slate-500",children:b||p?t(a,{children:[b&&t("span",{children:["Minimum required: ",t("span",{className:"font-semibold text-slate-700",children:[b," words"]})]}),b&&p&&e("span",{className:"mx-2 text-slate-300",children:"|"}),p&&t("span",{children:["Maximum allowed: ",t("span",{className:"font-semibold text-slate-700",children:[p," words"]})]})]}):"Write a complete answer."}),t("p",{className:"font-medium "+(p&&F>=p?"text-red-500":"text-slate-500"),children:["Word count: ",F," ",p&&`/ ${p}`]})]})]})]}),u&&t("div",{className:"space-y-3",children:[y&&y.criteria?.length>0&&(()=>{const a="ADULT_EMAIL"===y.taskType,s=a?10:9,r=a?"Đánh giá 4 tiêu chí Writing (Adult Placement)":`Đánh giá 4 tiêu chí IELTS Writing (${"TASK_2"===y.taskType?"Task 2":"Task 1"})`,l=a?"Total:":"Overall Band:",d=a?`${y.overallBand}`:y.overallBand.toFixed(1);return t("div",{className:"rounded-2xl border border-[#00AEEF]/30 bg-gradient-to-b from-[#F4F9FF] to-white p-4 space-y-3 shadow-xs",children:[t("div",{className:"flex flex-wrap items-center justify-between gap-2 border-b border-[#00AEEF]/20 pb-2.5",children:[t("div",{className:"flex items-center gap-2",children:[e("span",{className:"flex h-6 w-6 items-center justify-center rounded-full bg-[#0054A6] text-xs font-bold text-white",children:"AI"}),e("span",{className:"font-bold text-[#0054A6] text-sm sm:text-base",children:r})]}),t("div",{className:"flex items-center gap-1.5 rounded-lg bg-[#EAF6FF] border border-[#00AEEF]/30 px-3 py-1",children:[e("span",{className:"text-xs font-semibold text-[#0054A6]",children:l}),e("span",{className:"text-sm sm:text-base font-extrabold text-[#0054A6]",children:d}),t("span",{className:"text-xs text-slate-400",children:["/ ",s]})]})]}),e("div",{className:"grid gap-3 sm:grid-cols-2",children:y.criteria.map(s=>{const r=s.maxPoints??(a?2:9),l=r>0?Math.max(0,Math.min(100,s.band/r*100)):0,d=l>=85?"bg-emerald-500":l>=65?"bg-[#00AEEF]":l>=45?"bg-amber-500":"bg-rose-500",i=a?`${s.band} / ${r}`:`Band ${s.band.toFixed(1)}`;return t("div",{className:"rounded-xl border border-slate-200 bg-white p-3 space-y-2 shadow-2xs",children:[t("div",{className:"flex items-center justify-between",children:[t("div",{className:"flex items-center gap-2",children:[e("span",{className:"font-bold text-[#0054A6] bg-[#EAF6FF] px-2 py-0.5 rounded border border-[#00AEEF]/20 text-xs",children:s.code}),e("span",{className:"font-semibold text-slate-800 text-xs sm:text-sm",children:s.label})]}),e("span",{className:"font-extrabold text-[#0054A6] bg-slate-100 px-2 py-0.5 rounded text-xs sm:text-sm",children:i})]}),e("div",{className:"h-2 w-full rounded-full bg-slate-100 overflow-hidden",children:e("div",{className:`h-full rounded-full transition-all duration-500 ${d}`,style:{width:`${l}%`}})}),s.evidence&&e("p",{className:"text-xs text-slate-600 leading-relaxed pt-0.5",children:s.evidence})]},s.code)})}),(y.feedback?.vi||y.feedback?.en)&&t("div",{className:"rounded-xl bg-[#F4F9FF] border border-[#00AEEF]/20 p-3 text-xs sm:text-sm text-slate-700 space-y-1.5",children:[e("span",{className:"font-bold text-[#0054A6] block",children:"Nhận xét từ giám khảo AI:"}),y.feedback.vi&&e("p",{className:"leading-relaxed",children:y.feedback.vi}),y.feedback.en&&e("p",{className:"text-slate-500 italic border-t border-[#00AEEF]/10 pt-1.5 mt-1.5",children:y.feedback.en})]})]})})(),null!=N?t("div",{className:"rounded-2xl border border-green-200 bg-green-50 p-4",children:[e("div",{className:"mb-2 flex items-center gap-2",children:t("span",{className:"text-lg font-semibold text-green-700",children:["Điểm: ",N,"/",v]})}),w&&t("div",{className:"text-sm text-gray-700",children:[e("span",{className:"font-medium",children:"Nhận xét:"})," ",w]})]}):y?null:e("div",{className:"rounded-2xl border border-amber-200 bg-amber-50 p-4",children:t("div",{className:"flex items-center gap-2",children:[e("svg",{className:"h-5 w-5 shrink-0 text-amber-500",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"})}),e("span",{className:"text-sm font-medium text-amber-700",children:"Bài viết đang chờ giáo viên chấm điểm"})]})})]})]})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ResolvedImage } from '../../../../../components/common/ResolvedImage';
+import CambridgeYlePartBanner from '../../../../../components/themes/cambridge-yle/CambridgeYlePartBanner';
+import CambridgeYleInstructionBanner from '../../../../../components/themes/cambridge-yle/CambridgeYleInstructionBanner';
+import { HtmlOrText } from '../../../../../shared/lib/html-content';
+export function MoversWritingRenderer({ partNumber, partName, instruction, prompt, requirements, minWords, maxWords, answer, onAnswerChange, isReviewMode = false, guideImages, teacherScore, maxScore, teacherFeedback, writingAssessment, }) {
+    // Count words by splitting on whitespace and filtering empty strings
+    const wordCount = useMemo(() => {
+        if (!answer || !answer.trim())
+            return 0;
+        return answer.trim().split(/\s+/).filter(Boolean).length;
+    }, [answer]);
+    return (_jsxs("div", { className: "flex flex-col h-full gap-4 sm:gap-6 overflow-y-auto custom-scrollbar relative", children: [_jsxs("div", { className: "flex flex-col gap-2 sm:gap-3 p-3 sm:px-6 sm:pt-4", children: [_jsx(CambridgeYlePartBanner, { partNumber: partNumber, questionCount: 1, partName: partName, isReviewMode: isReviewMode }), instruction && _jsx(CambridgeYleInstructionBanner, { instruction: instruction, isReviewMode: isReviewMode })] }), _jsx("div", { className: "flex flex-col gap-4 p-3 sm:px-6 sm:pt-0 sticky top-0 z-20 bg-white/95 backdrop-blur pb-2 shadow-sm border-b border-gray-100", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "rounded-2xl border border-slate-200 bg-white p-5 shadow-sm", children: _jsxs("div", { className: "flex flex-col gap-4 text-base leading-relaxed text-gray-800", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: "text-lg font-semibold text-slate-900", children: "Writing task" }), _jsx(HtmlOrText, { value: prompt, className: "text-base leading-relaxed text-gray-800" })] }), requirements && requirements.length > 0 && (_jsxs("div", { className: "rounded-xl bg-slate-50 p-4", children: [_jsx("p", { className: "text-sm font-bold uppercase tracking-wide text-slate-700", children: "Include" }), _jsx("ul", { className: "mt-3 space-y-2", children: requirements.map((req, index) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-slate-700", children: [_jsx("span", { className: "mt-1.5 h-2 w-2 rounded-full bg-blue-500" }), _jsx(HtmlOrText, { value: req, as: "span" })] }, index))) })] })), (minWords || maxWords) && (_jsxs("div", { className: "flex flex-wrap gap-2", children: [minWords && (_jsxs("div", { className: "inline-flex items-center rounded-full border border-blue-200 bg-blue-50 px-3 py-1 text-sm font-medium text-blue-700", children: ["Minimum: ", minWords, " words"] })), maxWords && (_jsxs("div", { className: "inline-flex items-center rounded-full border border-slate-200 bg-white px-3 py-1 text-sm font-medium text-slate-600", children: ["Suggested max: ", maxWords, " words"] }))] }))] }) }), guideImages && guideImages.length > 0 && (_jsxs("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 shadow-sm", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-slate-600", children: "Story pictures" }), _jsx("p", { className: "text-xs text-slate-400", children: "Read the sequence from left to right" })] }), _jsx("div", { className: `grid gap-4 ${guideImages.length === 1 ? 'grid-cols-1' : 'grid-cols-1 sm:grid-cols-2'}`, children: guideImages.map((src, idx) => (_jsxs("div", { className: "rounded-xl border border-slate-200 bg-slate-50/80 p-2 shadow-sm", children: [_jsx(ResolvedImage, { src: src, alt: `Picture ${idx + 1}`, className: `w-full rounded-lg bg-white object-contain ${guideImages.length === 1 ? 'max-h-[400px]' : 'aspect-[4/3]'}` }), _jsx("div", { className: "pt-2 text-center text-[13px] font-medium text-slate-500", children: guideImages.length > 1 ? `Picture ${idx + 1}` : 'Reference Image' })] }, idx))) })] }))] }) }), _jsxs("div", { className: "flex flex-col gap-3 p-3 sm:px-6 sm:pb-6", children: [_jsxs("div", { className: "rounded-2xl border border-slate-200 bg-white shadow-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-slate-100 px-5 py-3 bg-slate-50/50 rounded-t-2xl", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-semibold uppercase tracking-wide text-slate-500", children: "Your answer" }), _jsx("p", { className: "text-xs text-slate-400", children: "Write clearly and organise your ideas in order." })] }), _jsxs("div", { className: `rounded-full px-3 py-1 text-sm font-semibold ${minWords && wordCount < minWords
+                                            ? 'border border-amber-200 bg-amber-50 text-amber-700'
+                                            : 'border border-emerald-200 bg-emerald-50 text-emerald-700'}`, children: [wordCount, " words"] })] }), _jsxs("div", { className: "p-4", children: [_jsx("textarea", { id: "writing-answer", name: "writing-answer", value: answer, onChange: (e) => {
+                                            const newValue = e.target.value;
+                                            if (maxWords) {
+                                                const maxWordsNum = Number(maxWords);
+                                                const newWordCount = newValue.trim() ? newValue.trim().split(/\s+/).filter(Boolean).length : 0;
+                                                if (newWordCount > maxWordsNum) {
+                                                    // Only allow changes that reduce the length (like backspace/delete)
+                                                    if (newValue.length >= (answer?.length || 0)) {
+                                                        return;
+                                                    }
+                                                }
+                                            }
+                                            onAnswerChange(newValue);
+                                        }, disabled: isReviewMode, placeholder: "Write your answer here...", className: "min-h-[340px] w-full resize-y rounded-xl border border-slate-200 bg-slate-50/50 p-4 text-base leading-8 text-gray-800 outline-none transition focus:border-blue-400 focus:bg-white focus:ring-2 focus:ring-blue-100 disabled:bg-gray-50 disabled:text-gray-700" }), _jsxs("div", { className: "mt-3 flex flex-wrap items-center justify-between gap-3 text-sm", children: [_jsx("p", { className: "text-slate-500", children: minWords || maxWords ? (_jsxs(_Fragment, { children: [minWords && _jsxs("span", { children: ["Minimum required: ", _jsxs("span", { className: "font-semibold text-slate-700", children: [minWords, " words"] })] }), minWords && maxWords && _jsx("span", { className: "mx-2 text-slate-300", children: "|" }), maxWords && _jsxs("span", { children: ["Maximum allowed: ", _jsxs("span", { className: "font-semibold text-slate-700", children: [maxWords, " words"] })] })] })) : ('Write a complete answer.') }), _jsxs("p", { className: `font-medium ${maxWords && wordCount >= maxWords ? 'text-red-500' : 'text-slate-500'}`, children: ["Word count: ", wordCount, " ", maxWords && `/ ${maxWords}`] })] })] })] }), isReviewMode && (_jsxs("div", { className: "space-y-3", children: [writingAssessment && writingAssessment.criteria?.length > 0 && (() => {
+                                const isAdult = writingAssessment.taskType === 'ADULT_EMAIL';
+                                const overallMax = isAdult ? 10 : 9;
+                                const headerLabel = isAdult
+                                    ? 'Đánh giá 4 tiêu chí Writing (Adult Placement)'
+                                    : `Đánh giá 4 tiêu chí IELTS Writing (${writingAssessment.taskType === 'TASK_2' ? 'Task 2' : 'Task 1'})`;
+                                const overallLabel = isAdult ? 'Total:' : 'Overall Band:';
+                                const overallDisplay = isAdult
+                                    ? `${writingAssessment.overallBand}`
+                                    : writingAssessment.overallBand.toFixed(1);
+                                return (_jsxs("div", { className: "rounded-2xl border border-[#00AEEF]/30 bg-gradient-to-b from-[#F4F9FF] to-white p-4 space-y-3 shadow-xs", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-b border-[#00AEEF]/20 pb-2.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-[#0054A6] text-xs font-bold text-white", children: "AI" }), _jsx("span", { className: "font-bold text-[#0054A6] text-sm sm:text-base", children: headerLabel })] }), _jsxs("div", { className: "flex items-center gap-1.5 rounded-lg bg-[#EAF6FF] border border-[#00AEEF]/30 px-3 py-1", children: [_jsx("span", { className: "text-xs font-semibold text-[#0054A6]", children: overallLabel }), _jsx("span", { className: "text-sm sm:text-base font-extrabold text-[#0054A6]", children: overallDisplay }), _jsxs("span", { className: "text-xs text-slate-400", children: ["/ ", overallMax] })] })] }), _jsx("div", { className: "grid gap-3 sm:grid-cols-2", children: writingAssessment.criteria.map((c) => {
+                                                const max = c.maxPoints ?? (isAdult ? 2 : 9);
+                                                const pct = max > 0 ? Math.max(0, Math.min(100, (c.band / max) * 100)) : 0;
+                                                const barColor = pct >= 85
+                                                    ? 'bg-emerald-500'
+                                                    : pct >= 65
+                                                        ? 'bg-[#00AEEF]'
+                                                        : pct >= 45
+                                                            ? 'bg-amber-500'
+                                                            : 'bg-rose-500';
+                                                const scoreDisplay = isAdult
+                                                    ? `${c.band} / ${max}`
+                                                    : `Band ${c.band.toFixed(1)}`;
+                                                return (_jsxs("div", { className: "rounded-xl border border-slate-200 bg-white p-3 space-y-2 shadow-2xs", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-bold text-[#0054A6] bg-[#EAF6FF] px-2 py-0.5 rounded border border-[#00AEEF]/20 text-xs", children: c.code }), _jsx("span", { className: "font-semibold text-slate-800 text-xs sm:text-sm", children: c.label })] }), _jsx("span", { className: "font-extrabold text-[#0054A6] bg-slate-100 px-2 py-0.5 rounded text-xs sm:text-sm", children: scoreDisplay })] }), _jsx("div", { className: "h-2 w-full rounded-full bg-slate-100 overflow-hidden", children: _jsx("div", { className: `h-full rounded-full transition-all duration-500 ${barColor}`, style: { width: `${pct}%` } }) }), c.evidence && (_jsx("p", { className: "text-xs text-slate-600 leading-relaxed pt-0.5", children: c.evidence }))] }, c.code));
+                                            }) }), (writingAssessment.feedback?.vi || writingAssessment.feedback?.en) && (_jsxs("div", { className: "rounded-xl bg-[#F4F9FF] border border-[#00AEEF]/20 p-3 text-xs sm:text-sm text-slate-700 space-y-1.5", children: [_jsx("span", { className: "font-bold text-[#0054A6] block", children: "Nh\u1EADn x\u00E9t t\u1EEB gi\u00E1m kh\u1EA3o AI:" }), writingAssessment.feedback.vi && _jsx("p", { className: "leading-relaxed", children: writingAssessment.feedback.vi }), writingAssessment.feedback.en && _jsx("p", { className: "text-slate-500 italic border-t border-[#00AEEF]/10 pt-1.5 mt-1.5", children: writingAssessment.feedback.en })] }))] }));
+                            })(), teacherScore !== null && teacherScore !== undefined ? (_jsxs("div", { className: "rounded-2xl border border-green-200 bg-green-50 p-4", children: [_jsx("div", { className: "mb-2 flex items-center gap-2", children: _jsxs("span", { className: "text-lg font-semibold text-green-700", children: ["\u0110i\u1EC3m: ", teacherScore, "/", maxScore] }) }), teacherFeedback && (_jsxs("div", { className: "text-sm text-gray-700", children: [_jsx("span", { className: "font-medium", children: "Nh\u1EADn x\u00E9t:" }), " ", teacherFeedback] }))] })) : !writingAssessment ? (_jsx("div", { className: "rounded-2xl border border-amber-200 bg-amber-50 p-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("svg", { className: "h-5 w-5 shrink-0 text-amber-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }), _jsx("span", { className: "text-sm font-medium text-amber-700", children: "B\u00E0i vi\u1EBFt \u0111ang ch\u1EDD gi\u00E1o vi\u00EAn ch\u1EA5m \u0111i\u1EC3m" })] }) })) : null] }))] })] }));
+}

package/dist/components/exams/take/components/question-renderers/index.d.ts

@@ -10,10 +10,12 @@ export { MoversLabelThePictureRenderer } from './MoversLabelThePictureRenderer';
 export { MoversFillWordHintRenderer } from './MoversFillWordHintRenderer';
 export { MoversGridFillRenderer } from './MoversGridFillRenderer';
 export { MoversTrueFalseRenderer } from './MoversTrueFalseRenderer';
+export { MoversCrossOutWordGroupRenderer } from './MoversCrossOutWordGroupRenderer';
 export { MoversAnswerTheQuestionRenderer } from './MoversAnswerTheQuestionRenderer';
 export { MoversWriteSentencesRenderer } from './MoversWriteSentencesRenderer';
 export { MoversWordOrderingRenderer } from './MoversWordOrderingRenderer';
 export { MoversWordFillParagraphRenderer } from './MoversWordFillParagraphRenderer';
 export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswerRenderer';
 export { MoversWordFillStructuredFormRenderer } from './MoversWordFillStructuredFormRenderer';
+export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchGroupRenderer';
 export { ArticlesViewer } from './ArticlesViewer';

package/dist/components/exams/take/components/question-renderers/index.js

@@ -1 +1,25 @@
-export{MoversListenAndWriteRenderer}from"./MoversListenAndWriteRenderer";export{MoversColoringRenderer}from"./MoversColoringRenderer";export{MoversChooseBestAnswerRenderer}from"./MoversChooseBestAnswerRenderer";export{MoversChooseAdjectiveRenderer}from"./MoversChooseAdjectiveRenderer";export{MoversWritingRenderer}from"./MoversWritingRenderer";export{MoversPictureChooseRenderer}from"./MoversPictureChooseRenderer";export{MoversPictureFillBlankChooseRenderer}from"./MoversPictureFillBlankChooseRenderer";export{MoversReadingPassageRenderer}from"./MoversReadingPassageRenderer";export{MoversLabelThePictureRenderer}from"./MoversLabelThePictureRenderer";export{MoversFillWordHintRenderer}from"./MoversFillWordHintRenderer";export{MoversGridFillRenderer}from"./MoversGridFillRenderer";export{MoversTrueFalseRenderer}from"./MoversTrueFalseRenderer";export{MoversAnswerTheQuestionRenderer}from"./MoversAnswerTheQuestionRenderer";export{MoversWriteSentencesRenderer}from"./MoversWriteSentencesRenderer";export{MoversWordOrderingRenderer}from"./MoversWordOrderingRenderer";export{MoversWordFillParagraphRenderer}from"./MoversWordFillParagraphRenderer";export{MoversMatchByWritingAnswerRenderer}from"./MoversMatchByWritingAnswerRenderer";export{MoversWordFillStructuredFormRenderer}from"./MoversWordFillStructuredFormRenderer";export{ArticlesViewer}from"./ArticlesViewer";
+export { MoversListenAndWriteRenderer } from './MoversListenAndWriteRenderer';
+export { MoversColoringRenderer } from './MoversColoringRenderer';
+export { MoversChooseBestAnswerRenderer } from './MoversChooseBestAnswerRenderer';
+export { MoversChooseAdjectiveRenderer } from './MoversChooseAdjectiveRenderer';
+export { MoversWritingRenderer } from './MoversWritingRenderer';
+// New renderers - P1 (Simple)
+export { MoversPictureChooseRenderer } from './MoversPictureChooseRenderer';
+export { MoversPictureFillBlankChooseRenderer } from './MoversPictureFillBlankChooseRenderer';
+export { MoversReadingPassageRenderer } from './MoversReadingPassageRenderer';
+// New renderers - P2 (Medium)
+export { MoversLabelThePictureRenderer } from './MoversLabelThePictureRenderer';
+export { MoversFillWordHintRenderer } from './MoversFillWordHintRenderer';
+// New renderers - P3 (Complex)
+export { MoversGridFillRenderer } from './MoversGridFillRenderer';
+// Starters & Movers renderers
+export { MoversTrueFalseRenderer } from './MoversTrueFalseRenderer';
+export { MoversCrossOutWordGroupRenderer } from './MoversCrossOutWordGroupRenderer';
+export { MoversAnswerTheQuestionRenderer } from './MoversAnswerTheQuestionRenderer';
+export { MoversWriteSentencesRenderer } from './MoversWriteSentencesRenderer';
+export { MoversWordOrderingRenderer } from './MoversWordOrderingRenderer';
+export { MoversWordFillParagraphRenderer } from './MoversWordFillParagraphRenderer';
+export { MoversMatchByWritingAnswerRenderer } from './MoversMatchByWritingAnswerRenderer';
+export { MoversWordFillStructuredFormRenderer } from './MoversWordFillStructuredFormRenderer';
+export { MoversWordOrderAndMatchGroupRenderer } from './MoversWordOrderAndMatchGroupRenderer';
+export { ArticlesViewer } from './ArticlesViewer';

package/dist/components/exams/take/components/speaking/SpeakingAudioPlayer.js

@@ -1 +1,85 @@
-"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useState as n,useEffect as a}from"react";import{Pause as i,Play as s,Volume2 as o}from"lucide-react";import{cn as d}from"../../../../../shared/lib/utils";import{usePresignedFileUrl as l}from"../../../../../shared/lib/hooks/usePresignedFileUrl";function m(e){const t=Math.floor(e/60),r=Math.floor(e%60);return`${String(t).padStart(2,"0")}:${String(r).padStart(2,"0")}`}export function SpeakingAudioPlayer({audioUrl:c,questionNumber:u,className:h,onPlayingChange:b}){const p=r(null),[v,x]=n(!1),[g,f]=n(0),[w,k]=n(0),{previewUrl:N}=l(c||void 0);a(()=>{const e=p.current;if(!e)return;const t=()=>{e.duration&&!isNaN(e.duration)&&isFinite(e.duration)&&k(e.duration)},r=()=>{f(e.currentTime),t()},n=()=>{x(!1),f(0),b?.(!1)};return t(),e.addEventListener("loadedmetadata",t),e.addEventListener("durationchange",t),e.addEventListener("canplay",t),e.addEventListener("timeupdate",r),e.addEventListener("ended",n),()=>{e.removeEventListener("loadedmetadata",t),e.removeEventListener("durationchange",t),e.removeEventListener("canplay",t),e.removeEventListener("timeupdate",r),e.removeEventListener("ended",n)}},[N]),a(()=>{x(!1),f(0),k(0),b?.(!1)},[N,b]);const y=w>0?g/w*100:0;return t("div",{className:d("flex items-center gap-3 rounded-xl px-4 py-3","bg-gradient-to-r from-stone-800 via-stone-700 to-stone-800","border-2 border-stone-600","shadow-[0_4px_12px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.05)]",h),children:[e("audio",{ref:p,...N?{src:N}:{},preload:"metadata"}),t("div",{className:"shrink-0",children:[e("span",{className:"text-xs font-bold uppercase tracking-wider text-amber-400",children:"Câu hỏi số"}),e("span",{className:"ml-1 text-base font-extrabold text-white",children:u})]}),e("div",{className:"h-8 w-px shrink-0 bg-stone-500"}),e("button",{type:"button",onClick:()=>{const e=p.current;e&&(v?(e.pause(),x(!1),b?.(!1)):(e.play(),x(!0),b?.(!0)))},className:"flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-stone-900 shadow-md transition-transform hover:scale-105 active:scale-95","aria-label":v?"Tạm dừng":"Phát",children:v?e(i,{className:"h-4 w-4 text-amber-400"}):e(s,{className:"ml-0.5 h-4 w-4 text-amber-400"})}),t("div",{className:"min-w-[80px] shrink-0 text-center text-sm font-medium tabular-nums text-stone-300",children:[m(g)," / ",m(w)]}),e("div",{className:"relative flex flex-1 items-center",children:e("input",{type:"range",min:"0",max:w||0,value:g,onChange:e=>{const t=p.current;if(!t)return;const r=parseFloat(e.target.value);t.currentTime=r,f(r)},className:"h-1.5 w-full cursor-pointer appearance-none rounded-full bg-stone-600 accent-amber-400 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-amber-400 [&::-webkit-slider-thumb]:shadow-md",style:{background:`linear-gradient(to right, rgb(251 191 36) ${y}%, rgb(87 83 78) ${y}%)`}})}),e(o,{className:"h-4 w-4 shrink-0 text-stone-400","aria-hidden":"true"})]})}
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
+import { Pause, Play, Volume2 } from 'lucide-react';
+import { cn } from '../../../../../shared/lib/utils';
+import { usePresignedFileUrl } from '../../../../../shared/lib/hooks/usePresignedFileUrl';
+function formatTime(time) {
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+}
+export function SpeakingAudioPlayer({ audioUrl, questionNumber, className, onPlayingChange }) {
+    const audioRef = useRef(null);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    // Resolve S3 storage keys to presigned URLs (HTTP URLs pass through unchanged)
+    const { previewUrl: resolvedAudioUrl } = usePresignedFileUrl(audioUrl || undefined);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const updateDuration = () => {
+            if (audio.duration && !isNaN(audio.duration) && isFinite(audio.duration)) {
+                setDuration(audio.duration);
+            }
+        };
+        const handleTimeUpdate = () => {
+            setCurrentTime(audio.currentTime);
+            updateDuration();
+        };
+        const handleEnded = () => {
+            setIsPlaying(false);
+            setCurrentTime(0);
+            onPlayingChange?.(false);
+        };
+        updateDuration();
+        audio.addEventListener('loadedmetadata', updateDuration);
+        audio.addEventListener('durationchange', updateDuration);
+        audio.addEventListener('canplay', updateDuration);
+        audio.addEventListener('timeupdate', handleTimeUpdate);
+        audio.addEventListener('ended', handleEnded);
+        return () => {
+            audio.removeEventListener('loadedmetadata', updateDuration);
+            audio.removeEventListener('durationchange', updateDuration);
+            audio.removeEventListener('canplay', updateDuration);
+            audio.removeEventListener('timeupdate', handleTimeUpdate);
+            audio.removeEventListener('ended', handleEnded);
+        };
+    }, [resolvedAudioUrl]);
+    // Reset state when audio URL changes (new question)
+    useEffect(() => {
+        setIsPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+        onPlayingChange?.(false);
+    }, [resolvedAudioUrl, onPlayingChange]);
+    const handlePlayPause = () => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        if (isPlaying) {
+            audio.pause();
+            setIsPlaying(false);
+            onPlayingChange?.(false);
+        }
+        else {
+            audio.play();
+            setIsPlaying(true);
+            onPlayingChange?.(true);
+        }
+    };
+    const handleProgressChange = (e) => {
+        const audio = audioRef.current;
+        if (!audio)
+            return;
+        const newTime = parseFloat(e.target.value);
+        audio.currentTime = newTime;
+        setCurrentTime(newTime);
+    };
+    const progressPercent = duration > 0 ? (currentTime / duration) * 100 : 0;
+    return (_jsxs("div", { className: cn('flex items-center gap-3 rounded-xl px-4 py-3', 'bg-gradient-to-r from-stone-800 via-stone-700 to-stone-800', 'border-2 border-stone-600', 'shadow-[0_4px_12px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.05)]', className), children: [_jsx("audio", { ref: audioRef, ...(resolvedAudioUrl ? { src: resolvedAudioUrl } : {}), preload: "metadata" }), _jsxs("div", { className: "shrink-0", children: [_jsx("span", { className: "text-xs font-bold uppercase tracking-wider text-amber-400", children: "C\u00E2u h\u1ECFi s\u1ED1" }), _jsx("span", { className: "ml-1 text-base font-extrabold text-white", children: questionNumber })] }), _jsx("div", { className: "h-8 w-px shrink-0 bg-stone-500" }), _jsx("button", { type: "button", onClick: handlePlayPause, className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-stone-900 shadow-md transition-transform hover:scale-105 active:scale-95", "aria-label": isPlaying ? 'Tạm dừng' : 'Phát', children: isPlaying ? (_jsx(Pause, { className: "h-4 w-4 text-amber-400" })) : (_jsx(Play, { className: "ml-0.5 h-4 w-4 text-amber-400" })) }), _jsxs("div", { className: "min-w-[80px] shrink-0 text-center text-sm font-medium tabular-nums text-stone-300", children: [formatTime(currentTime), " / ", formatTime(duration)] }), _jsx("div", { className: "relative flex flex-1 items-center", children: _jsx("input", { type: "range", min: "0", max: duration || 0, value: currentTime, onChange: handleProgressChange, className: "h-1.5 w-full cursor-pointer appearance-none rounded-full bg-stone-600 accent-amber-400 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-amber-400 [&::-webkit-slider-thumb]:shadow-md", style: {
+                        background: `linear-gradient(to right, rgb(251 191 36) ${progressPercent}%, rgb(87 83 78) ${progressPercent}%)`,
+                    } }) }), _jsx(Volume2, { className: "h-4 w-4 shrink-0 text-stone-400", "aria-hidden": "true" })] }));
+}

package/dist/components/exams/take/components/speaking/SpeakingContentFrame.js

@@ -1 +1,10 @@
-import{jsx as e}from"react/jsx-runtime";import{cn as r}from"../../../../../shared/lib/utils";export function SpeakingContentFrame({children:a,className:i,contentClassName:n}){return e("div",{className:r("relative rounded-2xl p-3","bg-gradient-to-br from-amber-700 via-amber-600 to-amber-800","shadow-[0_8px_32px_rgba(0,0,0,0.5),inset_0_2px_0_rgba(255,255,255,0.15),inset_0_-2px_0_rgba(0,0,0,0.3)]","border-4 border-amber-900",i),children:e("div",{className:"relative rounded-xl p-2",style:{background:"linear-gradient(135deg, #92400e 0%, #78350f 50%, #92400e 100%)",boxShadow:"inset 0 2px 4px rgba(0,0,0,0.4), inset 0 -1px 2px rgba(255,255,255,0.1)"},children:e("div",{className:r("relative min-h-[300px] rounded-lg bg-amber-50 p-4 shadow-inner",n),children:a})})})}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../../../../shared/lib/utils';
+export function SpeakingContentFrame({ children, className, contentClassName }) {
+    return (
+    /* Outer wooden frame layer */
+    _jsx("div", { className: cn('relative rounded-2xl p-3', 'bg-gradient-to-br from-amber-700 via-amber-600 to-amber-800', 'shadow-[0_8px_32px_rgba(0,0,0,0.5),inset_0_2px_0_rgba(255,255,255,0.15),inset_0_-2px_0_rgba(0,0,0,0.3)]', 'border-4 border-amber-900', className), children: _jsx("div", { className: "relative rounded-xl p-2", style: {
+                background: 'linear-gradient(135deg, #92400e 0%, #78350f 50%, #92400e 100%)',
+                boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.4), inset 0 -1px 2px rgba(255,255,255,0.1)',
+            }, children: _jsx("div", { className: cn("relative min-h-[300px] rounded-lg bg-amber-50 p-4 shadow-inner", contentClassName), children: children }) }) }));
+}

package/dist/components/exams/take/components/speaking/SpeakingExamLayout.js

@@ -1 +1,15 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{SpeakingHeader as r}from"./SpeakingHeader";import{SpeakingNavButton as n}from"./SpeakingNavButton";import{SpeakingAudioPlayer as t}from"./SpeakingAudioPlayer";import{SpeakingMicButton as o}from"./SpeakingMicButton";import{SpeakingRecordingPreview as a}from"./SpeakingRecordingPreview";import{SpeakingReportErrorButton as d}from"./SpeakingReportErrorButton";import{SpeakingContentFrame as l}from"./SpeakingContentFrame";import{SpeakingInstructionBar as s}from"./SpeakingInstructionBar";export function SpeakingExamLayout({onExit:c,partName:m,onPrev:p,onNext:u,canGoPrev:h,canGoNext:x,audioUrl:f,questionNumber:g,instruction:v,showMicButton:b=!1,micStatus:N="idle",micDurationSeconds:k=0,micRemainingSeconds:w,micIsWarning:S=!1,onStartRecording:R,onStopRecording:y,onRetryUpload:C,previewUrl:j,uploadedKey:z,onReRecord:U,children:B,contentClassName:E}){const P=null!=j&&("recorded"===N||"uploading"===N||"uploaded"===N);return i("div",{className:"relative flex min-h-screen flex-col overflow-hidden",style:{background:"linear-gradient(180deg, #c084fc 0%, #f9a8d4 50%, #fce7f3 100%)"},children:[i("div",{className:"pointer-events-none absolute inset-0 overflow-hidden","aria-hidden":"true",children:[e("div",{className:"absolute left-[5%] top-[8%] h-16 w-32 rounded-full bg-white/50 blur-xl"}),e("div",{className:"absolute left-[20%] top-[4%] h-12 w-24 rounded-full bg-white/40 blur-xl"}),e("div",{className:"absolute right-[10%] top-[6%] h-14 w-28 rounded-full bg-white/50 blur-xl"}),e("div",{className:"absolute right-[25%] top-[12%] h-10 w-20 rounded-full bg-white/40 blur-xl"})]}),e("div",{className:"fixed right-3 top-1/2 z-30 -translate-y-1/2",children:e(d,{})}),e(r,{onExit:c,partName:m}),v&&e("div",{className:"relative z-10 flex justify-center px-4 pb-2",children:e(s,{text:v})}),i("div",{className:"relative z-10 flex flex-1 items-center justify-center px-2 py-2 lg:px-[8%]",children:[e("div",{className:"hidden shrink-0 md:block",children:e(n,{direction:"prev",onClick:p,disabled:!h})}),e("div",{className:"flex-1 px-3 md:px-6",children:e(l,{contentClassName:E,children:B})}),e("div",{className:"hidden shrink-0 md:block",children:e(n,{direction:"next",onClick:u,disabled:!x})})]}),e("div",{className:"relative z-10 px-4 pb-3 lg:px-[10%]",children:e(t,{audioUrl:f,questionNumber:g})}),b&&i("div",{className:"relative z-10 flex flex-col items-center gap-3 px-4 pb-4",children:[e(o,{status:N,durationSeconds:k,remainingSeconds:w,isWarning:S,onStartRecording:R??(()=>{}),onStopRecording:y??(()=>{}),onRetryUpload:C,hasExistingRecording:"uploaded"===N||"recorded"===N}),P&&j&&e("div",{className:"w-full max-w-sm",children:e(a,{previewUrl:j,uploadedKey:z??null,status:N,onReRecord:U??(()=>{})})})]}),i("div",{className:"fixed bottom-0 left-0 right-0 z-20 flex items-center justify-between bg-white/90 px-6 py-3 shadow-[0_-2px_10px_rgba(0,0,0,0.15)] backdrop-blur md:hidden",children:[e(n,{direction:"prev",onClick:p,disabled:!h}),e(n,{direction:"next",onClick:u,disabled:!x})]}),e("div",{className:"h-20 md:hidden","aria-hidden":"true"})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SpeakingHeader } from './SpeakingHeader';
+import { SpeakingNavButton } from './SpeakingNavButton';
+import { SpeakingAudioPlayer } from './SpeakingAudioPlayer';
+import { SpeakingMicButton } from './SpeakingMicButton';
+import { SpeakingRecordingPreview } from './SpeakingRecordingPreview';
+import { SpeakingReportErrorButton } from './SpeakingReportErrorButton';
+import { SpeakingContentFrame } from './SpeakingContentFrame';
+import { SpeakingInstructionBar } from './SpeakingInstructionBar';
+export function SpeakingExamLayout({ onExit, partName, onPrev, onNext, canGoPrev, canGoNext, audioUrl, questionNumber, instruction, showMicButton = false, micStatus = 'idle', micDurationSeconds = 0, micRemainingSeconds, micIsWarning = false, onStartRecording, onStopRecording, onRetryUpload, previewUrl, uploadedKey, onReRecord, children, contentClassName, }) {
+    const hasRecording = previewUrl != null && (micStatus === 'recorded' || micStatus === 'uploading' || micStatus === 'uploaded');
+    return (_jsxs("div", { className: "relative flex min-h-screen flex-col overflow-hidden", style: {
+            background: 'linear-gradient(180deg, #c084fc 0%, #f9a8d4 50%, #fce7f3 100%)',
+        }, children: [_jsxs("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", "aria-hidden": "true", children: [_jsx("div", { className: "absolute left-[5%] top-[8%] h-16 w-32 rounded-full bg-white/50 blur-xl" }), _jsx("div", { className: "absolute left-[20%] top-[4%] h-12 w-24 rounded-full bg-white/40 blur-xl" }), _jsx("div", { className: "absolute right-[10%] top-[6%] h-14 w-28 rounded-full bg-white/50 blur-xl" }), _jsx("div", { className: "absolute right-[25%] top-[12%] h-10 w-20 rounded-full bg-white/40 blur-xl" })] }), _jsx("div", { className: "fixed right-3 top-1/2 z-30 -translate-y-1/2", children: _jsx(SpeakingReportErrorButton, {}) }), _jsx(SpeakingHeader, { onExit: onExit, partName: partName }), instruction && (_jsx("div", { className: "relative z-10 flex justify-center px-4 pb-2", children: _jsx(SpeakingInstructionBar, { text: instruction }) })), _jsxs("div", { className: "relative z-10 flex flex-1 items-center justify-center px-2 py-2 lg:px-[8%]", children: [_jsx("div", { className: "hidden shrink-0 md:block", children: _jsx(SpeakingNavButton, { direction: "prev", onClick: onPrev, disabled: !canGoPrev }) }), _jsx("div", { className: "flex-1 px-3 md:px-6", children: _jsx(SpeakingContentFrame, { contentClassName: contentClassName, children: children }) }), _jsx("div", { className: "hidden shrink-0 md:block", children: _jsx(SpeakingNavButton, { direction: "next", onClick: onNext, disabled: !canGoNext }) })] }), _jsx("div", { className: "relative z-10 px-4 pb-3 lg:px-[10%]", children: _jsx(SpeakingAudioPlayer, { audioUrl: audioUrl, questionNumber: questionNumber }) }), showMicButton && (_jsxs("div", { className: "relative z-10 flex flex-col items-center gap-3 px-4 pb-4", children: [_jsx(SpeakingMicButton, { status: micStatus, durationSeconds: micDurationSeconds, remainingSeconds: micRemainingSeconds, isWarning: micIsWarning, onStartRecording: onStartRecording ?? (() => { }), onStopRecording: onStopRecording ?? (() => { }), onRetryUpload: onRetryUpload, hasExistingRecording: micStatus === 'uploaded' || micStatus === 'recorded' }), hasRecording && previewUrl && (_jsx("div", { className: "w-full max-w-sm", children: _jsx(SpeakingRecordingPreview, { previewUrl: previewUrl, uploadedKey: uploadedKey ?? null, status: micStatus, onReRecord: onReRecord ?? (() => { }) }) }))] })), _jsxs("div", { className: "fixed bottom-0 left-0 right-0 z-20 flex items-center justify-between bg-white/90 px-6 py-3 shadow-[0_-2px_10px_rgba(0,0,0,0.15)] backdrop-blur md:hidden", children: [_jsx(SpeakingNavButton, { direction: "prev", onClick: onPrev, disabled: !canGoPrev }), _jsx(SpeakingNavButton, { direction: "next", onClick: onNext, disabled: !canGoNext })] }), _jsx("div", { className: "h-20 md:hidden", "aria-hidden": "true" })] }));
+}

package/dist/components/exams/take/components/speaking/SpeakingHeader.js

@@ -1 +1,6 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{X as r}from"lucide-react";import{SpeakingPartBadge as t}from"./SpeakingPartBadge";export function SpeakingHeader({onExit:i,partName:o}){return a("header",{className:"relative z-20 flex items-center justify-between px-4 py-3",children:[a("button",{onClick:i,className:"flex items-center gap-2 rounded-full border-2 border-amber-700 bg-gradient-to-b from-amber-400 to-amber-600 px-4 py-2 font-bold text-amber-900 shadow-md transition-all hover:from-amber-500 hover:to-amber-700 active:scale-95","aria-label":"Thoát bài thi",children:[e(r,{className:"h-4 w-4",strokeWidth:3}),e("span",{className:"text-sm font-bold uppercase tracking-wide",children:"Thoát"})]}),e("div",{className:"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2",children:e(t,{partName:o})}),e("div",{className:"w-[100px]","aria-hidden":"true"})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { SpeakingPartBadge } from './SpeakingPartBadge';
+export function SpeakingHeader({ onExit, partName }) {
+    return (_jsxs("header", { className: "relative z-20 flex items-center justify-between px-4 py-3", children: [_jsxs("button", { onClick: onExit, className: "flex items-center gap-2 rounded-full border-2 border-amber-700 bg-gradient-to-b from-amber-400 to-amber-600 px-4 py-2 font-bold text-amber-900 shadow-md transition-all hover:from-amber-500 hover:to-amber-700 active:scale-95", "aria-label": "Tho\u00E1t b\u00E0i thi", children: [_jsx(X, { className: "h-4 w-4", strokeWidth: 3 }), _jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: "Tho\u00E1t" })] }), _jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", children: _jsx(SpeakingPartBadge, { partName: partName }) }), _jsx("div", { className: "w-[100px]", "aria-hidden": "true" })] }));
+}

package/dist/components/exams/take/components/speaking/SpeakingInstructionBar.js

@@ -1 +1,8 @@
-import{jsx as e}from"react/jsx-runtime";export function SpeakingInstructionBar({text:r}){return e("div",{className:"rounded-lg px-5 py-2.5 text-center",style:{background:"linear-gradient(180deg, #44271a 0%, #2d1a0e 100%)",boxShadow:"0 4px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08)",border:"2px solid #1c0e07"},children:e("span",{className:"text-sm font-bold uppercase tracking-widest text-amber-100",children:r})})}
+import { jsx as _jsx } from "react/jsx-runtime";
+export function SpeakingInstructionBar({ text }) {
+    return (_jsx("div", { className: "rounded-lg px-5 py-2.5 text-center", style: {
+            background: 'linear-gradient(180deg, #44271a 0%, #2d1a0e 100%)',
+            boxShadow: '0 4px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08)',
+            border: '2px solid #1c0e07',
+        }, children: _jsx("span", { className: "text-sm font-bold uppercase tracking-widest text-amber-100", children: text }) }));
+}

package/dist/components/exams/take/components/speaking/SpeakingMicButton.js

@@ -1 +1,59 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Mic as t,Square as o,CheckCircle as a,AlertCircle as n,RotateCcw as i}from"lucide-react";import{cn as d}from"../../../../../shared/lib/utils";function l(e){const r=Math.floor(e/60),t=e%60;return`${String(r).padStart(1,"0")}:${String(t).padStart(2,"0")}`}export function SpeakingMicButton({status:s,durationSeconds:g,remainingSeconds:c,isWarning:h=!1,onStartRecording:m,onStopRecording:b,onRetryUpload:u,disabled:p=!1,hasExistingRecording:x=!1}){const f="recording"===s,w="uploading"===s,v="uploaded"===s,N="error"===s,y=x&&!N&&!f;return r("div",{className:"flex flex-col items-center gap-0",children:[f&&e("div",{className:d("mb-2 rounded-full px-4 py-1 text-sm font-bold tabular-nums",h?"bg-red-600 text-white":"bg-red-900/80 text-white"),children:void 0!==c?l(c):""}),r("button",{type:"button",onClick:()=>{p||w||y||(N&&u?u():f?b():m())},disabled:p||w||y,"aria-label":f?"Dừng ghi âm":N?"Thử lại upload":"Bắt đầu ghi âm",className:d("relative flex h-20 w-20 items-center justify-center rounded-full","border-4 shadow-[0_6px_20px_rgba(0,0,0,0.4)]","transition-all duration-200","active:scale-95","disabled:cursor-not-allowed disabled:opacity-50",!f&&!v&&!w&&!N&&"border-orange-700 bg-gradient-to-b from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700",f&&!h&&"animate-pulse border-red-700 bg-gradient-to-b from-red-500 to-red-700",f&&h&&"animate-pulse border-red-900 bg-gradient-to-b from-red-600 to-red-900",w&&"border-orange-700 bg-gradient-to-b from-orange-400 to-orange-600",v&&"border-green-700 bg-gradient-to-b from-green-400 to-green-600 hover:from-green-500 hover:to-green-700",N&&"border-orange-700 bg-gradient-to-b from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700"),children:[f&&e(o,{className:"h-8 w-8 fill-white text-white"}),v&&e(a,{className:"h-8 w-8 text-white"}),N&&e(u?i:n,{className:"h-8 w-8 text-white"}),!f&&!v&&!N&&e(t,{className:"h-8 w-8 text-white"}),w&&e("span",{className:"absolute inset-0 flex items-center justify-center rounded-full bg-black/30",children:r("svg",{className:"h-8 w-8 animate-spin text-white",viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:[e("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),e("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"})]})})]}),e("div",{className:"mt-3 rounded-lg px-4 py-2 text-center",style:{background:"linear-gradient(180deg, #3d2008 0%, #2a1505 100%)",boxShadow:"0 3px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07)",border:"2px solid #1c0a02"},children:e("p",{className:"text-[11px] font-bold uppercase tracking-widest text-amber-200",children:N?u?"Thử lại upload":"Lỗi ghi âm":v?"Đã ghi âm thành công":w?"Đang tải lên...":f?"Nhấn để dừng ghi âm":x?"Câu trả lời đã được ghi nhận":"Thí sinh ấn vào biểu tượng micro để trả lời"})})]})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Mic, Square, CheckCircle, AlertCircle, RotateCcw } from 'lucide-react';
+import { cn } from '../../../../../shared/lib/utils';
+function formatCountdown(seconds) {
+    const minutes = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${String(minutes).padStart(1, '0')}:${String(secs).padStart(2, '0')}`;
+}
+export function SpeakingMicButton({ status, durationSeconds: _durationSeconds, remainingSeconds, isWarning = false, onStartRecording, onStopRecording, onRetryUpload, disabled = false, hasExistingRecording = false, }) {
+    const isRecording = status === 'recording';
+    const isUploading = status === 'uploading';
+    const isUploaded = status === 'uploaded';
+    const isError = status === 'error';
+    const isLockedAfterAnswer = hasExistingRecording && !isError && !isRecording;
+    const handleClick = () => {
+        if (disabled || isUploading || isLockedAfterAnswer)
+            return;
+        if (isError && onRetryUpload) {
+            onRetryUpload();
+            return;
+        }
+        if (isRecording) {
+            onStopRecording();
+        }
+        else {
+            onStartRecording();
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col items-center gap-0", children: [isRecording && (_jsx("div", { className: cn('mb-2 rounded-full px-4 py-1 text-sm font-bold tabular-nums', isWarning ? 'bg-red-600 text-white' : 'bg-red-900/80 text-white'), children: remainingSeconds !== undefined ? formatCountdown(remainingSeconds) : '' })), _jsxs("button", { type: "button", onClick: handleClick, disabled: disabled || isUploading || isLockedAfterAnswer, "aria-label": isRecording ? 'Dừng ghi âm' : isError ? 'Thử lại upload' : 'Bắt đầu ghi âm', className: cn('relative flex h-20 w-20 items-center justify-center rounded-full', 'border-4 shadow-[0_6px_20px_rgba(0,0,0,0.4)]', 'transition-all duration-200', 'active:scale-95', 'disabled:cursor-not-allowed disabled:opacity-50', 
+                // Idle: orange
+                !isRecording && !isUploaded && !isUploading && !isError &&
+                    'border-orange-700 bg-gradient-to-b from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700', 
+                // Recording: red with pulse (turns deeper red on warning)
+                isRecording && !isWarning && 'animate-pulse border-red-700 bg-gradient-to-b from-red-500 to-red-700', isRecording && isWarning && 'animate-pulse border-red-900 bg-gradient-to-b from-red-600 to-red-900', 
+                // Uploading: orange (disabled)
+                isUploading && 'border-orange-700 bg-gradient-to-b from-orange-400 to-orange-600', 
+                // Uploaded: green
+                isUploaded &&
+                    'border-green-700 bg-gradient-to-b from-green-400 to-green-600 hover:from-green-500 hover:to-green-700', 
+                // Error: orange with retry affordance
+                isError &&
+                    'border-orange-700 bg-gradient-to-b from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700'), children: [isRecording && _jsx(Square, { className: "h-8 w-8 fill-white text-white" }), isUploaded && _jsx(CheckCircle, { className: "h-8 w-8 text-white" }), isError && (onRetryUpload ? _jsx(RotateCcw, { className: "h-8 w-8 text-white" }) : _jsx(AlertCircle, { className: "h-8 w-8 text-white" })), !isRecording && !isUploaded && !isError && _jsx(Mic, { className: "h-8 w-8 text-white" }), isUploading && (_jsx("span", { className: "absolute inset-0 flex items-center justify-center rounded-full bg-black/30", children: _jsxs("svg", { className: "h-8 w-8 animate-spin text-white", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] }) }))] }), _jsx("div", { className: "mt-3 rounded-lg px-4 py-2 text-center", style: {
+                    background: 'linear-gradient(180deg, #3d2008 0%, #2a1505 100%)',
+                    boxShadow: '0 3px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07)',
+                    border: '2px solid #1c0a02',
+                }, children: _jsx("p", { className: "text-[11px] font-bold uppercase tracking-widest text-amber-200", children: isError
+                        ? onRetryUpload
+                            ? 'Thử lại upload'
+                            : 'Lỗi ghi âm'
+                        : isUploaded
+                            ? 'Đã ghi âm thành công'
+                            : isUploading
+                                ? 'Đang tải lên...'
+                                : isRecording
+                                    ? 'Nhấn để dừng ghi âm'
+                                    : hasExistingRecording
+                                        ? 'Câu trả lời đã được ghi nhận'
+                                        : 'Thí sinh ấn vào biểu tượng micro để trả lời' }) })] }));
+}

package/dist/components/exams/take/components/speaking/SpeakingNavButton.js

@@ -1 +1,7 @@
-import{jsx as e}from"react/jsx-runtime";import{ChevronLeft as r,ChevronRight as t}from"lucide-react";import{cn as a}from"../../../../../shared/lib/utils";export function SpeakingNavButton({direction:o,onClick:i,disabled:s=!1}){const d="prev"===o?r:t;return e("button",{onClick:i,disabled:s,className:a("flex h-14 w-14 items-center justify-center rounded-full","border-4 border-amber-800","bg-gradient-to-b from-amber-500 to-amber-700","shadow-[0_4px_12px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.2)]","transition-all duration-200","hover:from-amber-600 hover:to-amber-800","active:scale-95 active:shadow-[0_2px_6px_rgba(0,0,0,0.4)]","disabled:cursor-not-allowed disabled:opacity-40","sm:h-16 sm:w-16"),"aria-label":"prev"===o?"Câu trước":"Câu tiếp theo",children:e(d,{className:"h-7 w-7 text-white drop-shadow sm:h-8 sm:w-8",strokeWidth:2.5})})}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../../../../../shared/lib/utils';
+export function SpeakingNavButton({ direction, onClick, disabled = false, }) {
+    const Icon = direction === 'prev' ? ChevronLeft : ChevronRight;
+    return (_jsx("button", { onClick: onClick, disabled: disabled, className: cn('flex h-14 w-14 items-center justify-center rounded-full', 'border-4 border-amber-800', 'bg-gradient-to-b from-amber-500 to-amber-700', 'shadow-[0_4px_12px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.2)]', 'transition-all duration-200', 'hover:from-amber-600 hover:to-amber-800', 'active:scale-95 active:shadow-[0_2px_6px_rgba(0,0,0,0.4)]', 'disabled:cursor-not-allowed disabled:opacity-40', 'sm:h-16 sm:w-16'), "aria-label": direction === 'prev' ? 'Câu trước' : 'Câu tiếp theo', children: _jsx(Icon, { className: "h-7 w-7 text-white drop-shadow sm:h-8 sm:w-8", strokeWidth: 2.5 }) }));
+}

package/dist/components/exams/take/components/speaking/SpeakingPartBadge.js

@@ -1 +1,5 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{cn as r}from"../../../../../shared/lib/utils";export function SpeakingPartBadge({partName:t,className:s}){return e("div",{className:r("relative inline-flex items-center justify-center",s),children:a("div",{className:"relative flex items-center gap-2 rounded-full border-4 border-amber-600 bg-gradient-to-b from-amber-300 via-amber-400 to-amber-600 px-6 py-2 shadow-[0_4px_12px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.3)]",children:[e("span",{className:"text-sm","aria-hidden":"true",children:"🍃"}),e("span",{className:"font-bold tracking-wide text-amber-900 drop-shadow-sm",style:{fontSize:"1.1rem"},children:t}),e("span",{className:"text-sm","aria-hidden":"true",children:"🍃"})]})})}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../../../shared/lib/utils';
+export function SpeakingPartBadge({ partName, className }) {
+    return (_jsx("div", { className: cn('relative inline-flex items-center justify-center', className), children: _jsxs("div", { className: "relative flex items-center gap-2 rounded-full border-4 border-amber-600 bg-gradient-to-b from-amber-300 via-amber-400 to-amber-600 px-6 py-2 shadow-[0_4px_12px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.3)]", children: [_jsx("span", { className: "text-sm", "aria-hidden": "true", children: "\uD83C\uDF43" }), _jsx("span", { className: "font-bold tracking-wide text-amber-900 drop-shadow-sm", style: { fontSize: '1.1rem' }, children: partName }), _jsx("span", { className: "text-sm", "aria-hidden": "true", children: "\uD83C\uDF43" })] }) }));
+}

package/dist/components/exams/take/components/speaking/SpeakingReadDisplayedContent.module.css

@@ -94,6 +94,102 @@
   background: #34d399;
 }
 
+/* Shared compact Cambridge speaking layout used by spontaneous Q&A groups. */
+.instructionCardWrap {
+  margin-bottom: 0.5rem;
+  padding-top: 0.125rem;
+}
+
+.instructionCard {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1.5px solid #fcd34d;
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 0.5rem 0.75rem;
+  box-shadow: 0 2px 10px rgba(180, 130, 20, 0.12);
+}
+
+.instructionIcon {
+  display: flex;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: #fef3c7;
+}
+
+.instructionIconEmoji {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.instructionText {
+  margin: 0;
+  color: #78350f;
+  font-family: 'Quicksand', sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.mainContent {
+  padding: 0.25rem 0.5rem 0.5rem;
+}
+
+.recordingUi {
+  gap: 0.35rem;
+}
+
+.recordingHint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100px;
+  background: #fff;
+  padding: 0.3rem 0.85rem;
+  font-family: 'Quicksand', sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 100%;
+  letter-spacing: -0.01em;
+  white-space: nowrap;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.micIcon {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+}
+
+.recordingControl {
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.recordingControl:hover {
+  transform: scale(1.05);
+}
+
+.recordingControl:active {
+  transform: scale(0.95);
+}
+
+.recordingTimer {
+  position: absolute;
+  bottom: 8px;
+  color: #fff;
+  font-family: 'Quicksand', sans-serif;
+  font-size: 10px;
+  font-weight: 700;
+  pointer-events: none;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .referenceTextCard {
@@ -107,6 +203,30 @@
   }
 }
 
+@media (min-width: 640px) {
+  .instructionCardWrap { margin-bottom: 0.625rem; }
+  .instructionCard { gap: 0.625rem; padding: 0.55rem 0.9rem; }
+  .instructionText { font-size: 14px; }
+  .mainContent { padding: 0.5rem 1rem 1rem; }
+  .recordingHint { padding: 0.35rem 1rem; font-size: 13px; }
+  .micIcon { width: 64px; height: 64px; }
+  .recordingTimer { bottom: 9px; font-size: 11px; }
+}
+
+@media (min-width: 768px) {
+  .instructionText { font-size: 15px; }
+  .micIcon { width: 76px; height: 76px; }
+  .recordingTimer { bottom: 10px; font-size: 12px; }
+}
+
+@media (min-width: 1024px) {
+  .instructionCardWrap { margin-bottom: 0.875rem; }
+  .instructionCard { gap: 0.75rem; padding: 0.7rem 1.25rem; border-width: 2px; }
+  .recordingHint { padding: 0.5rem 1.25rem; font-size: 15.5px; }
+  .micIcon { width: 100px; height: 100px; }
+  .recordingTimer { bottom: 11px; font-size: 13px; }
+}
+
 @media (max-width: 480px) {
   .referenceText {
     font-size: 1rem;