:root { --bg: #faf3e6; --card: #fffaf0; --ink: #3a2f22; --olive: #6b7a4f; --olive-dark: #4f5c39; --mustard: #d8a33d; --red: #b5453f; --green: #4f7a4f; --border: #e5d9bf; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); /* Noto Serif dung truoc: font he thong "Georgia" hien sai cac chu tieng Viet co 2 dau chong nhau (vd ắ, ầ, ố, ế, viết, cần...) tren nhieu may Windows/Mac - dau thu 2 bi tach roi thanh dau nhay rieng. Noto Serif (nap qua Google Fonts trong ) ho tro day du dau tieng Viet va nhat quan tren moi may. */ font-family: "Noto Serif", Georgia, serif; line-height: 1.55; } .wrap { max-width: 760px; margin: 0 auto; padding: 24px 18px 80px; } header.top { padding: 18px 0 10px; border-bottom: 2px solid var(--olive); margin-bottom: 22px; } header.top h1 { font-size: 1.35rem; margin: 0; color: var(--olive-dark); } header.top .brand { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mustard); font-weight: bold; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } label { display: block; font-weight: bold; margin-bottom: 6px; } input[type=text], input[type=search], textarea, select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; font-size: 1rem; background: #fff; margin-bottom: 12px; } textarea { min-height: 70px; resize: vertical; } button { background: var(--olive); color: #fff; border: none; padding: 10px 18px; border-radius: 6px; font-size: 1rem; cursor: pointer; font-family: inherit; } button:hover { background: var(--olive-dark); } button.secondary { background: var(--mustard); } button.danger { background: var(--red); } button:disabled { opacity: 0.5; cursor: not-allowed; } .question-block { margin-bottom: 22px; } .question-num { display: inline-block; background: var(--olive); color: #fff; border-radius: 50%; width: 26px; height: 26px; text-align: center; line-height: 26px; font-size: 0.85rem; flex: 0 0 auto; margin-top: 2px; } .question-prompt { display: flex; align-items: flex-start; gap: 8px; font-size: 1.05rem; margin-bottom: 10px; } .prompt-text { flex: 1 1 auto; min-width: 0; } /* Moi khoi (ngan cach boi dong trong trong noi dung de bai) hien thanh 1 doan rieng, de doc, khong bi tran thanh 1 khoi van ban dai - dac biet quan trong voi cau tao sinh nhieu tu vung/mau cau. */ .prompt-block { margin-bottom: 8px; line-height: 1.5; } .prompt-block:last-child { margin-bottom: 0; } .option-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; background: #fff; cursor: pointer; } .option-row:hover { border-color: var(--olive); } .option-row input { margin: 0; } .result-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: bold; color: #fff; } .result-badge.correct { background: var(--green); } .result-badge.incorrect { background: var(--red); } .result-badge.pending { background: #999; } .feedback-text { font-size: 0.92rem; color: #5a4d3a; margin-top: 6px; } .score-summary { text-align: center; padding: 22px; } .score-summary .big { font-size: 2.4rem; font-weight: bold; color: var(--olive-dark); } .hint { font-size: 0.85rem; color: #7a6c50; } table.results-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } table.results-table th, table.results-table td { border-bottom: 1px solid var(--border); padding: 8px 6px; text-align: left; } table.results-table th { color: var(--olive-dark); } .pill { display: inline-block; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 2px 10px; font-size: 0.8rem; margin-left: 6px; } .pill-published { background: var(--green); border-color: var(--green); color: #fff; } .pill-pending { background: #efe6d0; border-color: var(--border); color: #7a6c50; } .photo-slot { border: 1px dashed var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; background: #fff; } .photo-slot-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .photo-slot .thumb-preview { max-width: 110px; max-height: 110px; margin-top: 0; } a { color: var(--olive-dark); } .thumb-preview { max-width: 220px; max-height: 220px; border-radius: 8px; border: 1px solid var(--border); display: block; margin-top: 8px; } .recording-controls { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); display: inline-block; animation: pulse 1s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } .copy-link { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .copy-link input { flex: 1; min-width: 200px; } .muted { color: #8a7c60; font-size: 0.85rem; }