:root { --ees-primary: #007bff; --ees-bg: #f8fafc; --ees-border: #e2e8f0; --ees-correct: #16a34a; --ees-wrong: #dc2626; }
.ees-wrap { max-width: 1200px; margin: 0 auto 30px auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #fff; border: 1px solid var(--ees-border); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }

/* --- FULLSCREEN --- */
.ees-wrap:-webkit-full-screen { max-width: 100%; width: 100%; height: 100vh; margin: 0; border: none; border-radius: 0; background: #fff; display: flex; flex-direction: column; }
.ees-wrap:fullscreen { max-width: 100%; width: 100%; height: 100vh; margin: 0; border: none; border-radius: 0; background: #fff; display: flex; flex-direction: column; overflow: hidden;}
.ees-wrap:fullscreen .ees-quiz-screen { flex: 1; display: flex; flex-direction: column; height: 100%; }
.ees-wrap:fullscreen .ees-body { flex: 1; height: auto; min-height: 0; }

/* --- BUTTONS --- */
.ees-wrap .ees-btn-icon { background: transparent; border: 1px solid rgba(255,255,255,0.4); color: #fff; padding: 6px 10px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; margin-right: 10px; }
.ees-wrap .ees-btn-icon:hover { background: rgba(255,255,255,0.2); }
.ees-wrap .ees-btn-primary { background: var(--ees-primary); color: #fff; border: none; padding: 12px 24px; border-radius: 4px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.2s; display: inline-block;}
.ees-wrap .ees-btn-primary:hover { opacity: 0.9; }
.ees-wrap .ees-btn-secondary { background: #fff; color: var(--ees-primary); border: 2px solid var(--ees-primary); padding: 12px 24px; border-radius: 4px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.2s; display: inline-block;}
.ees-wrap .ees-btn-secondary:hover { background: #f0f8ff; }
.ees-wrap .ees-btn-sm { padding: 6px 12px; font-size: 14px; border-width: 1px;}
.ees-wrap .ees-btn-submit { background: #fff; color: var(--ees-primary); border: none; padding: 8px 16px; border-radius: 4px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.ees-wrap .ees-btn-submit:hover { background: #f1f5f9; color: var(--ees-primary); }

/* --- START SCREEN --- */
.ees-wrap .ees-screen-center { padding: 80px 20px; text-align: center; background: #fafafa;}
.ees-wrap .ees-quiz-title { font-size: 28px; color: #333; margin-bottom: 20px;}
.ees-wrap .ees-intro-text { font-size: 16px; color: #555; max-width: 600px; margin: 0 auto 30px auto; line-height: 1.6;}
.ees-wrap .ees-student-info { margin-bottom: 25px; text-align: center; }
.ees-wrap .ees-student-name-input { width: 100% !important; max-width: 400px !important; padding: 10px 15px !important; border: 2px solid #cbd5e1 !important; border-radius: 6px !important; font-size: 16px !important; text-align: center !important; font-weight: 500 !important; background-color: #fff !important; color: #333 !important; display: inline-block !important; box-shadow: none !important; }
.ees-wrap .ees-student-name-input:focus { border-color: var(--ees-primary) !important; box-shadow: 0 0 0 3px rgba(0,123,255,0.1) !important; }

/* --- RESULT SCREEN CARD --- */
.ees-wrap .ees-result-box { background-color: #fff; border: 1px solid #e2e8f0; border-radius: 12px; margin: 0 auto; max-width: 500px; padding: 30px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); text-align: center; }
.ees-wrap .ees-result-header { font-size: 22px; font-weight: bold; color: #1e293b; margin-bottom: 10px; }
.ees-wrap .ees-result-score-wrap { font-size: 18px; color: #475569; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.ees-wrap .ees-result-score-10 { font-size: 42px; font-weight: 800; color: #0f172a; line-height: 1; }
.ees-wrap .ees-result-details { text-align: left; border-top: 1px solid #e2e8f0; padding-top: 25px; margin-bottom: 25px;}
.ees-wrap .ees-result-quiz-title { font-weight: bold; color: #334155; margin-bottom: 25px; text-align: center; font-size: 16px; line-height: 1.4; }
.ees-wrap .ees-result-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; color: #475569; font-size: 15px; }
.ees-wrap .ees-result-label { display: flex; align-items: center; gap: 8px; }
.ees-wrap .ees-result-val { font-weight: bold; color: #0f172a; }
.ees-wrap .ees-result-actions .ees-btn-secondary { width: 100%; border-radius: 8px; }

/* --- HEADER / BODY / FOOTER --- */
.ees-wrap .ees-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: var(--ees-primary); color: #fff; font-weight: bold; }
.ees-wrap .ees-header-actions { display: flex; align-items: center; }
.ees-wrap .ees-body { display: flex; height: 70vh; min-height: 500px; }
.ees-wrap .ees-passage-pane { flex: 1; padding: 20px; border-right: 1px solid var(--ees-border); overflow-y: auto; background: var(--ees-bg); line-height: 1.6; display: none; }
.ees-wrap .ees-questions-pane { flex: 1; padding: 20px; overflow-y: auto; }
.ees-wrap .ees-instruction { font-style: italic; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--ees-border); color: #475569; }
.ees-wrap .ees-question-block { margin-bottom: 25px; position: relative;}
.ees-wrap .ees-question-text { font-weight: normal; margin-bottom: 15px; line-height: 1.5; font-size: 16px;}

/* --- MEDIA (AUDIO/VIDEO/IMAGE) --- */
.ees-wrap .ees-media-wrap { margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 15px; background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px dashed #cbd5e1; justify-content: center; align-items: center;}
.ees-wrap .ees-media-wrap img { max-width: 100%; max-height: 400px; height: auto; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); display: block;}
.ees-wrap .ees-media-wrap audio { width: 100%; max-width: 400px; height: 40px; outline: none; border-radius: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.ees-wrap .ees-media-wrap video { max-width: 100%; max-height: 400px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); background: #000; display: block;}

/* --- TRẮC NGHIỆM (SINGLE & MULTIPLE CHOICE) --- */
.ees-wrap .ees-option { display: flex; align-items: center; margin-bottom: 10px; cursor: pointer; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--ees-border); background: #fff; transition: all 0.2s ease-in-out; }
.ees-wrap .ees-option:hover { background: #f8fafc; border-color: #cbd5e1; }
.ees-wrap .ees-opt-text { line-height: 1.5; font-size: 15px; }

/* Radio Button Styling (Single Choice) */
.ees-wrap .ees-option input[type="radio"] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none !important; 
    appearance: none !important; 
    display: inline-flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    min-width: 20px !important; 
    max-width: 20px !important; 
    width: 20px !important; 
    min-height: 20px !important; 
    max-height: 20px !important; 
    height: 20px !important; 
    margin: 0 12px 0 0 !important; 
    padding: 0 !important; 
    border: 2px solid #cbd5e1 !important; 
    border-radius: 50% !important; 
    background-color: #fff !important; 
    cursor: pointer !important; 
    outline: none !important; 
    box-sizing: border-box !important; 
    flex-shrink: 0 !important; 
    box-shadow: none !important; 
}
.ees-wrap .ees-option input[type="radio"]::before { content: "" !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background-color: var(--ees-primary) !important; transform: scale(0); transition: transform 0.2s !important; display: block !important; }
.ees-wrap .ees-option input[type="radio"]:checked { border-color: var(--ees-primary) !important; }
.ees-wrap .ees-option input[type="radio"]:checked::before { transform: scale(1); }

/* Checkbox Styling (Multiple Choice) */
.ees-wrap .ees-option input[type="checkbox"] { 
    -webkit-appearance: none !important; 
    -moz-appearance: none !important; 
    appearance: none !important; 
    display: inline-flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
    min-width: 20px !important; 
    max-width: 20px !important; 
    width: 20px !important; 
    min-height: 20px !important; 
    max-height: 20px !important; 
    height: 20px !important; 
    margin: 0 12px 0 0 !important; 
    padding: 0 !important; 
    border: 2px solid #cbd5e1 !important; 
    border-radius: 4px !important; 
    background-color: #fff !important; 
    cursor: pointer !important; 
    outline: none !important; 
    box-sizing: border-box !important; 
    flex-shrink: 0 !important; 
    transition: all 0.2s !important; 
    box-shadow: none !important; 
}
.ees-wrap .ees-option input[type="checkbox"]::before { content: "✓" !important; color: #fff !important; font-size: 14px !important; font-weight: bold !important; line-height: 1 !important; transform: scale(0); transition: transform 0.2s !important; display: block !important; }
.ees-wrap .ees-option input[type="checkbox"]:checked { background-color: var(--ees-primary) !important; border-color: var(--ees-primary) !important; }
.ees-wrap .ees-option input[type="checkbox"]:checked::before { transform: scale(1); }

/* Correct / Wrong Option States */
.ees-wrap .ees-opt-correct { border-color: var(--ees-correct) !important; background: #f0fdf4 !important; color: var(--ees-correct) !important; font-weight: bold; }
.ees-wrap .ees-opt-correct input { border-color: var(--ees-correct) !important; }
.ees-wrap .ees-opt-correct input[type="radio"]::before { background-color: var(--ees-correct) !important; }
.ees-wrap .ees-opt-correct input[type="checkbox"]:checked { background-color: var(--ees-correct) !important; }

.ees-wrap .ees-opt-wrong { border-color: var(--ees-wrong) !important; background: #fef2f2 !important; color: var(--ees-wrong) !important; text-decoration: line-through; }
.ees-wrap .ees-opt-wrong input { border-color: var(--ees-wrong) !important; }
.ees-wrap .ees-opt-wrong input[type="radio"]::before { background-color: var(--ees-wrong) !important; }
.ees-wrap .ees-opt-wrong input[type="checkbox"]:checked { background-color: var(--ees-wrong) !important; }

/* --- ĐIỀN TỪ & DROPDOWN --- */
.ees-wrap .ees-blank-input { border: none !important; border-bottom: 2px solid var(--ees-primary) !important; background: transparent !important; color: #1d2327 !important; font-weight: 600 !important; font-size: inherit !important; font-family: inherit !important; text-align: center !important; margin: 0 5px !important; outline: none !important; transition: border-color 0.2s !important; padding: 2px 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.ees-wrap .ees-blank-input:focus { border-bottom-color: #0056b3 !important; }
.ees-wrap .ees-blank-input:disabled { background: transparent !important; color: #3c434a !important; opacity: 1 !important; -webkit-text-fill-color: currentcolor !important;}

.ees-wrap .ees-dropdown-select { border: none !important; border-bottom: 2px solid var(--ees-primary) !important; background: transparent !important; color: #1d2327 !important; font-weight: 600 !important; font-size: inherit !important; font-family: inherit !important; text-align: center !important; margin: 0 5px !important; outline: none !important; transition: border-color 0.2s !important; padding: 2px 16px 2px 4px !important; box-shadow: none !important; border-radius: 0 !important; cursor: pointer; -webkit-appearance: auto !important; appearance: auto !important;}
.ees-wrap .ees-dropdown-select:focus { border-bottom-color: #0056b3 !important; }
.ees-wrap .ees-dropdown-select:disabled { background: transparent !important; color: #3c434a !important; opacity: 1 !important; cursor: not-allowed; }

.ees-wrap .ees-blank-correct { border-bottom: 2px dashed var(--ees-correct) !important; color: var(--ees-correct) !important; font-weight: bold !important; }
.ees-wrap .ees-blank-wrong { border-bottom: 2px dashed var(--ees-wrong) !important; color: var(--ees-wrong) !important; text-decoration: line-through !important; }

/* --- REORDER UI (DRAG & DROP) --- */
.ees-wrap .ees-reorder-wrap { display: flex; flex-direction: column; gap: 15px; margin: 15px 0; }
.ees-wrap .ees-drop-zone { min-height: 52px; border-bottom: 2px dashed #94a3b8; display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 12px; transition: 0.3s; }
.ees-wrap .ees-word-bank { display: flex; flex-wrap: wrap; gap: 10px; min-height: 40px; padding: 10px; background: #f1f5f9; border-radius: 8px; }
.ees-wrap .ees-word-chip { background: #fff; border: 2px solid #cbd5e1; box-shadow: 0 3px 0 #cbd5e1; padding: 8px 16px; border-radius: 8px; cursor: pointer; user-select: none; font-weight: 600; font-size: 15px; transition: transform 0.1s, box-shadow 0.1s; }
.ees-wrap .ees-word-chip:active { transform: translateY(3px); box-shadow: 0 0 0 #cbd5e1; }
.ees-wrap .ees-chip-drop { background: var(--ees-primary); color: #fff; border-color: #0056b3; box-shadow: 0 3px 0 #0056b3; }
.ees-wrap .ees-reorder-submitted .ees-word-chip { cursor: not-allowed; pointer-events: none; }
.ees-wrap .ees-drop-zone.ees-blank-correct { border-bottom-color: var(--ees-correct) !important; border-bottom-style: solid; }
.ees-wrap .ees-drop-zone.ees-blank-wrong { border-bottom-color: var(--ees-wrong) !important; border-bottom-style: solid; }

/* --- INTERACTIVE MATCHING (NỐI CỘT SVG) --- */
.ees-wrap .ees-im-container { position: relative; display: flex; justify-content: space-between; gap: 60px; padding: 20px 0; user-select: none; }
.ees-wrap .ees-im-svg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.ees-wrap .ees-im-line { stroke: #94a3b8; stroke-width: 4px; stroke-linecap: round; fill: none; transition: stroke 0.3s; }
.ees-wrap .ees-im-line-temp { stroke: var(--ees-primary); stroke-width: 4px; stroke-dasharray: 6; animation: ees-dash 1s linear infinite; }
@keyframes ees-dash { to { stroke-dashoffset: -12; } }

.ees-wrap .ees-im-column { flex: 1; display: flex; flex-direction: column; gap: 15px; z-index: 2; }

/* FIX LỖI PADDING: Force padding để tránh theme override */
.ees-wrap .ees-im-item { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 2px solid var(--ees-border); border-radius: 8px; padding: 12px 20px !important; position: relative; min-height: 60px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

.ees-wrap .ees-im-content { flex: 1; pointer-events: none; }
.ees-wrap .ees-im-content img { max-width: 100%; height: auto; display: block; border-radius: 4px;}

.ees-wrap .ees-im-node { width: 20px; height: 20px; background: #fff; border: 4px solid #cbd5e1; border-radius: 50%; cursor: pointer; position: absolute; z-index: 3; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); top: 50%; transform: translateY(-50%); box-sizing: border-box;}
.ees-wrap .ees-im-node:hover { border-color: var(--ees-primary); transform: translateY(-50%) scale(1.2); }
.ees-wrap .ees-im-node.ees-node-active { border-color: var(--ees-primary); background: var(--ees-primary); transform: translateY(-50%) scale(1.2); box-shadow: 0 0 0 4px rgba(0,123,255,0.2); }
.ees-wrap .ees-im-node.ees-node-connected { border-color: var(--ees-primary); background: var(--ees-primary); }

.ees-wrap .ees-im-col-a .ees-im-content { text-align: right; padding-right: 15px; }
.ees-wrap .ees-im-col-a .ees-im-node { right: -10px; }
.ees-wrap .ees-im-col-b .ees-im-content { text-align: left; padding-left: 15px; }
.ees-wrap .ees-im-col-b .ees-im-node { left: -10px; }

.ees-wrap .ees-im-item.ees-match-correct { border-color: var(--ees-correct); background: #f0fdf4; }
.ees-wrap .ees-im-item.ees-match-correct .ees-im-node { border-color: var(--ees-correct); background: var(--ees-correct); }
.ees-wrap .ees-im-item.ees-match-wrong { border-color: var(--ees-wrong); background: #fef2f2; }
.ees-wrap .ees-im-item.ees-match-wrong .ees-im-node { border-color: var(--ees-wrong); background: var(--ees-wrong); }
.ees-wrap .ees-im-line.ees-line-correct { stroke: var(--ees-correct); }
.ees-wrap .ees-im-line.ees-line-wrong { stroke: var(--ees-wrong); }

/* NÉT ĐỨT MÀU XANH: Thể hiện đáp án đúng của hệ thống khi nộp bài */
.ees-wrap .ees-im-line.ees-line-expected { stroke: var(--ees-correct); stroke-dasharray: 6; stroke-width: 3px; }

/* --- EXPLANATION & FOOTER --- */
.ees-wrap .ees-explanation { background: #f1f5f9; border-left: 4px solid var(--ees-primary); padding: 12px; margin-top: 15px; border-radius: 0 4px 4px 0; font-size: 0.9em; display: none; line-height: 1.6;}
.ees-wrap .ees-footer { padding: 15px 20px; background: var(--ees-bg); border-top: 1px solid var(--ees-border); display: flex; justify-content: space-between; align-items: center; }
.ees-wrap .ees-btn-nav { padding: 8px 16px; background: var(--ees-primary); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;}
.ees-wrap .ees-btn-nav:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 768px) { 
    .ees-wrap .ees-body { flex-direction: column; } 
    .ees-wrap .ees-passage-pane { border-right: none; border-bottom: 1px solid var(--ees-border); height: 40vh; } 
    .ees-wrap .ees-im-container { gap: 25px; }
    /* Force padding trên mobile */
    .ees-wrap .ees-im-item { padding: 8px 10px !important; min-height: 40px;}
    .ees-wrap .ees-im-col-a .ees-im-content { padding-right: 5px; font-size: 14px;}
    .ees-wrap .ees-im-col-b .ees-im-content { padding-left: 5px; font-size: 14px;}
}