/* ============ AlphaMock — phòng thi mô phỏng (port từ bản gốc) ============ Skin theo chứng chỉ qua data-skin trên : - cfa : Prometric xanh lá (như phòng thi CFA thật — bản gốc) - frm : navy/xanh dương kiểu GARP FRM CBT (Pearson VUE) - cma : teal kiểu IMA CMA CBT (Prometric) */ body[data-skin="cfa"] { --bar: #1c1c1c; --acc: #8dc63f; --acc-d: #6fa32b; --acc-dd: #5c8a20; --chip-un: #c5e39b; --chip-un-fg: #4c661f; } body[data-skin="frm"] { --bar: #12293e; --acc: #2d74b5; --acc-d: #245e93; --acc-dd: #1a4770; --chip-un: #bcd7ee; --chip-un-fg: #274b6b; } body[data-skin="cma"] { --bar: #0f2e2a; --acc: #0f7b6c; --acc-d: #0c6357; --acc-dd: #094c43; --chip-un: #b7e2da; --chip-un-fg: #1d5249; } :root { --navy: #21374f; --orange: #f0a422; --stem-bg: #eef3f8; --cream: #fdf6d8; --gray-line: #d7dde3; --flag-red: #e05c33; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: Arial, "Segoe UI", Helvetica, sans-serif; font-size: 15px; color: #222; background: #e9ecef; } .hidden { display: none !important; } button { font-family: inherit; cursor: pointer; } a.btn-plain, a.btn-green { text-decoration: none; display: inline-block; } /* ------------------------------- prose --------------------------------- */ .prose p { margin: 0 0 0.8em; line-height: 1.55; } .prose ul { margin: 0 0 0.8em 1.4em; } .prose li { margin-bottom: 0.35em; line-height: 1.5; } .prose table { border-collapse: collapse; margin: 0.6em 0 1em; background: #fff; font-size: 14px; } .prose th, .prose td { border: 1px solid #9db0c0; padding: 5px 10px; text-align: left; } .prose th { background: #dbe6ef; font-weight: bold; } .prose sup { font-size: 0.72em; } .prose sub { font-size: 0.72em; } .prose mark { background: #ffe95e; padding: 0 1px; } .prose figure.exhibit, figure.exhibit { margin: 10px 0; text-align: center; } figure.exhibit img { max-width: 100%; height: auto; border: 1px solid #cdd6df; border-radius: 4px; background: #fff; cursor: zoom-in; } figure.exhibit img.zoomed { max-width: none; cursor: zoom-out; box-shadow: 0 6px 24px rgba(0,0,0,0.25); } figure.qcrop { text-align: left; margin: 2px 0; } figure.qcrop img { border: none; border-radius: 0; } #stem figure.qcrop { margin: -4px 0; } #stem figure.qcrop img { max-width: 100%; } /* ============================== EXAM BARS =============================== */ #view-exam { display: flex; flex-direction: column; height: 100vh; background: #fff; } #topbar { background: var(--bar); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; flex-shrink: 0; min-height: 58px; } .tb-left { display: flex; align-items: center; gap: 12px; } .tb-icon-btn { background: none; border: none; display: flex; } .tb-pagesec { font-size: 14px; line-height: 1.45; } #skin-brand { font-size: 12px; font-weight: bold; letter-spacing: 0.6px; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px; padding: 3px 9px; color: rgba(255,255,255,0.9); white-space: nowrap; } .tb-center { display: flex; align-items: center; gap: 10px; } .tb-time-label { font-size: 13.5px; } #tb-timer { font-size: 17px; font-weight: bold; letter-spacing: 0.5px; } #tb-timer.low { color: #ff7a6b; } .tb-right { display: flex; align-items: center; gap: 10px; } .tb-progress { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-right: 6px; } .tb-prog-bar { width: 150px; height: 12px; border-radius: 999px; background: rgba(255,255,255,0.25); border: 1px solid rgba(255,255,255,0.45); overflow: hidden; } #tb-prog-fill { height: 100%; width: 0%; background: #fff; border-radius: 999px; transition: width 0.2s; } .tb-prog-label { font-size: 11.5px; color: rgba(255,255,255,0.9); } #finish-btn { background: var(--cream); border: 1px solid #c9bd8b; color: #222; font-weight: bold; font-size: 14.5px; padding: 9px 22px; border-radius: 4px; } #finish-btn:hover { background: #f7ecc0; } .hl-btn { background: #333; color: #eee; border: 1px solid #555; border-radius: 4px; padding: 7px 12px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; } .hl-btn.on { background: #f7d13d; color: #222; border-color: #d9b520; } #testbar { background: var(--acc); color: #fff; font-weight: bold; font-size: 14.5px; padding: 5px 16px; flex-shrink: 0; } #test-title { font-weight: bold; } /* ============================ RAIL + STAGE ============================== */ #exam-layout { display: flex; flex: 1; min-height: 0; } #qrail { width: 74px; background: #fff; border-right: 1px solid var(--gray-line); overflow-y: auto; padding: 10px 0 20px; flex-shrink: 0; } .rail-chip { position: relative; display: block; width: 46px; margin: 0 auto 7px; background: var(--acc); color: #fff; border: none; border-radius: 5px; font-size: 13px; font-weight: bold; padding: 5px 0; text-align: center; } .rail-chip.unanswered { background: var(--chip-un); color: var(--chip-un-fg); } .rail-chip.current { background: var(--acc-dd); color: #fff; } .rail-chip.current::after { content: ""; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 9px solid var(--acc-dd); } .rail-chip.flagged::before { content: "⚑"; position: absolute; top: -6px; right: -6px; color: var(--flag-red); font-size: 13px; text-shadow: 0 0 2px #fff; } #stage { flex: 1; min-width: 0; display: flex; flex-direction: column; } #set-caption { padding: 8px 22px; background: #f5f7f9; color: #445; border-bottom: 1px solid var(--gray-line); font-size: 13.5px; font-style: italic; flex-shrink: 0; } #panes { display: flex; flex: 1; min-height: 0; } #vignette-pane { width: 50%; border-right: 2px solid #b9c4ce; overflow-y: auto; padding: 20px 24px; flex-shrink: 0; background: #fff; } #question-pane { flex: 1; overflow-y: auto; padding: 20px 26px 60px; display: flex; flex-direction: column; } #stem { background: var(--stem-bg); padding: 14px 18px; border-radius: 3px; margin-bottom: 24px; font-size: 15.5px; } #options { display: flex; flex-direction: column; gap: 16px; } .opt-row { display: flex; align-items: stretch; gap: 14px; } .opt-letter { width: 22px; padding-top: 12px; font-size: 15.5px; font-weight: normal; flex-shrink: 0; text-align: center; } .opt-box { flex: 1; border: 2px solid var(--navy); border-radius: 3px; padding: 12px 16px; font-size: 15px; line-height: 1.5; cursor: pointer; background: #fff; position: relative; transition: border-color 0.1s; } .opt-box:hover { background: #f8fafc; } .opt-row.selected .opt-box { border-color: var(--orange); border-width: 3px; padding: 11px 15px; } .opt-row.struck .opt-box { text-decoration: line-through; color: #98a2ac; border-style: dashed; border-color: #a9b4be; background: #fafbfc; } .opt-strike { position: absolute; top: 6px; right: 6px; border: 1px solid #ccd; background: #fff; color: #889; font-size: 11px; border-radius: 4px; padding: 2px 6px; opacity: 0; transition: opacity 0.12s; } .opt-row:hover .opt-strike { opacity: 1; } .opt-strike:hover { background: #eef1f4; } #qid-label { margin-top: auto; padding-top: 30px; color: #98a2ac; font-size: 13px; } /* ============================ BOTTOM BAR ================================ */ #bottombar { background: var(--bar); display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; flex-shrink: 0; } .bb-icon-btn { background: none; border: none; display: flex; padding: 6px; } .bb-icon-btn:hover { background: rgba(255,255,255,0.12); border-radius: 5px; } .bb-right { display: flex; gap: 10px; align-items: center; } .bb-flag { background: var(--acc); border: none; border-radius: 5px; width: 42px; height: 38px; display: flex; align-items: center; justify-content: center; } .bb-flag.on { background: var(--orange); } .bb-flag.on #flag-shape { fill: #fff; } .bb-nav { background: var(--acc); color: #fff; border: none; border-radius: 5px; font-size: 15px; font-weight: bold; padding: 9px 24px; } .bb-nav:hover { background: var(--acc-d); } .bb-nav:disabled { background: #555; color: #999; cursor: default; } /* ============================== MODALS ================================== */ #modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 100; display: flex; align-items: center; justify-content: center; } #modal-card { background: #fff; border-radius: 10px; padding: 26px 28px; max-width: 720px; width: 92%; max-height: 86vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,0.35); } #modal-card h3 { margin-bottom: 14px; font-size: 18px; color: #1a2b3c; } .modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } .modal-actions button { padding: 10px 22px; border-radius: 6px; font-size: 14.5px; font-weight: bold; border: 1px solid #bbb; background: #fff; } .modal-actions .danger { background: #c0392b; color: #fff; border-color: #c0392b; } .modal-actions .go-green { background: var(--acc); color: #fff; border-color: var(--acc); } .time-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 15px; flex-wrap: wrap; } .time-row input { width: 100px; padding: 9px 12px; font-size: 17px; font-weight: bold; border: 2px solid var(--acc-d); border-radius: 6px; text-align: center; } .btn-plain { background: none; border: 1px solid #aab; border-radius: 6px; padding: 5px 12px; font-size: 13px; color: #345; } .btn-plain:hover { background: #f0f2f5; } .btn-green { background: var(--acc); border: none; color: #fff; font-weight: bold; padding: 8px 20px; border-radius: 6px; } .btn-green:hover { background: var(--acc-d); } .resume-info { background: #f5f8fa; border: 1px solid var(--gray-line); border-radius: 8px; padding: 12px 16px; margin-top: 10px; font-size: 14px; line-height: 1.7; } .nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; margin-top: 10px; } .nav-grid button { padding: 8px 0; border-radius: 5px; border: 1px solid #c8d2da; background: #fff; font-weight: bold; font-size: 13px; position: relative; } .nav-grid button.answered { background: var(--acc); color: #fff; border-color: var(--acc-d); } .nav-grid button.current { outline: 3px solid var(--orange); } .nav-grid button.flagged::before { content: "⚑"; position: absolute; top: -7px; right: -4px; color: var(--flag-red); font-size: 12px; } .nav-legend { display: flex; gap: 16px; font-size: 12.5px; color: #556; margin-top: 14px; flex-wrap: wrap; } .nav-filters { display: flex; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .nav-filters button { font-size: 12.5px; padding: 4px 12px; border-radius: 999px; border: 1px solid #bcc; background: #fff; } .nav-filters button.active { background: var(--navy); color: #fff; border-color: var(--navy); } /* ============================== RESULTS ================================= */ .home-topbar { background: var(--bar); color: #fff; padding: 14px 26px; display: flex; align-items: center; justify-content: space-between; border-bottom: 4px solid var(--acc); } .home-title { font-size: 21px; font-weight: bold; letter-spacing: 0.5px; } .home-topbar .btn-plain { color: #eee; border-color: #667; } .home-topbar .btn-plain:hover { background: #333; } .results-main { max-width: 980px; margin: 24px auto 80px; padding: 0 18px; } #score-card { background: #fff; border-radius: 12px; border: 1px solid var(--gray-line); padding: 26px; display: flex; gap: 34px; align-items: center; margin-bottom: 18px; } .score-ring { width: 130px; height: 130px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: bold; color: #1a2b3c; } .score-stats { line-height: 1.9; font-size: 15px; } .score-stats b { font-size: 17px; } #topic-table table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; border: 1px solid var(--gray-line); border-radius: 10px; overflow: hidden; } #topic-table th, #topic-table td { padding: 8px 14px; border-bottom: 1px solid #e7ebef; text-align: left; } #topic-table th { background: #f2f5f8; } .tt-bar { height: 9px; border-radius: 5px; background: #e6ebf0; overflow: hidden; min-width: 130px; } .tt-bar > div { height: 100%; background: var(--acc); } .review-h { margin: 30px 0 14px; font-size: 18px; color: #223; } .rev-set { background: #fff; border: 1px solid var(--gray-line); border-radius: 10px; margin-bottom: 14px; overflow: hidden; } .rev-set > summary { padding: 12px 18px; cursor: pointer; font-weight: bold; color: #1a2b3c; background: #f5f8fa; list-style: none; display: flex; justify-content: space-between; } .rev-set > summary::-webkit-details-marker { display: none; } .rev-set-score { color: #567; font-weight: normal; } .rev-vignette { padding: 14px 20px; background: #fbfcfd; border-bottom: 1px solid #e9edf1; font-size: 14px; color: #333; } .rev-q { padding: 16px 20px; border-top: 1px solid #edf0f3; } .rev-q-head { font-weight: bold; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; } .rev-ok { color: #2e7d32; } .rev-bad { color: #c0392b; } .rev-skip { color: #8b6f1c; } .rev-opt { border: 1.5px solid #d5dde3; border-radius: 5px; padding: 8px 12px; margin-bottom: 7px; font-size: 14.5px; display: flex; gap: 10px; } .rev-opt .l { font-weight: bold; width: 18px; flex-shrink: 0; } .rev-opt.correct { border-color: #2e7d32; background: #eef8ee; } .rev-opt.wrong { border-color: #c0392b; background: #fdf1f0; } .rev-expl { margin-top: 10px; background: #f7f9fb; border-left: 4px solid var(--acc); padding: 10px 14px; font-size: 14px; border-radius: 0 6px 6px 0; } .rev-expl-title { font-weight: bold; color: #38571c; margin-bottom: 5px; } /* =============================== ERROR ================================== */ .player-error-card { background: #fff; border: 1px solid var(--gray-line); border-radius: 12px; padding: 40px; text-align: center; margin-top: 60px; } .player-error-card h2 { color: #c0392b; margin-bottom: 12px; } .player-error-card p { color: #556; margin-bottom: 22px; line-height: 1.6; } @media (max-width: 900px) { #panes { flex-direction: column; } #vignette-pane { width: 100%; max-height: 42vh; border-right: none; border-bottom: 2px solid #b9c4ce; } #score-card { flex-direction: column; text-align: center; } } /* ============================ ZOOM A-/A+ ================================ */ /* --zoom: -2..+2 (JS set trên ). ~1px mỗi mức quanh cỡ gốc. */ :root { --zoom: 0; } #stem { font-size: calc(15.5px + var(--zoom) * 1px); } #vignette-body { font-size: calc(15px + var(--zoom) * 1px); } .opt-box { font-size: calc(15px + var(--zoom) * 1px); } .opt-letter { font-size: calc(15.5px + var(--zoom) * 1px); } #rv-stem, #rv-vignette, .rv-opt-body { font-size: calc(15px + var(--zoom) * 1px); } #rv-expl-body { font-size: calc(14.5px + var(--zoom) * 1px); } .zoom-group { display: inline-flex; gap: 4px; align-items: center; margin-left: 10px; } .zoom-btn { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35); color: #fff; font-weight: bold; font-size: 13px; line-height: 1; padding: 7px 11px; border-radius: 5px; min-width: 34px; } .zoom-btn:hover:not(:disabled) { background: rgba(255,255,255,0.28); } .zoom-btn:disabled { opacity: 0.35; cursor: default; } /* ============================== REVIEW ================================== */ #view-review { display: flex; flex-direction: column; height: 100%; background: #eef1f4; } #rv-topbar { background: var(--bar); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; height: 46px; flex-shrink: 0; font-size: 14px; } #rv-qnum { font-weight: bold; } #rv-tb-center, #rv-topic { background: rgba(255,255,255,0.12); padding: 5px 14px; border-radius: 20px; font-size: 12.5px; letter-spacing: 0.3px; } #rv-topic:empty { display: none; } .rv-tb-right { color: rgba(255,255,255,0.8); font-size: 12.5px; max-width: 32%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #rv-layout { display: flex; flex: 1; min-height: 0; } #rv-rail { width: 58px; background: #f4f6f8; border-right: 1px solid #d7dde3; overflow-y: auto; padding: 10px 0; display: flex; flex-direction: column; align-items: center; gap: 7px; flex-shrink: 0; } .rv-chip { width: 38px; height: 30px; border: 1px solid #cdd5dd; background: #fff; border-radius: 5px; font-size: 13px; font-weight: bold; color: #445; position: relative; } .rv-chip.rv-ok { background: #e3f4d6; border-color: #9dcb73; color: #4a6b28; } .rv-chip.rv-bad { background: #fbe0da; border-color: #e0a294; color: #9a3b28; } .rv-chip.rv-none { background: #fff; border-color: #cdd5dd; color: #8a97a3; } .rv-chip.rv-skip { background: #eef0f2; border-color: #cdd5dd; color: #9aa5af; } .rv-chip.current { outline: 3px solid var(--orange); outline-offset: -1px; z-index: 1; } .rv-chip.flagged::after { content: "⚑"; position: absolute; top: -4px; right: -3px; font-size: 10px; color: var(--flag-red); } #rv-question { flex: 1; min-width: 0; overflow-y: auto; padding: 22px 26px 40px; background: #fff; } #rv-vignette { background: #f7f9fb; border: 1px solid #dde4ea; border-left: 3px solid var(--navy); padding: 14px 16px; border-radius: 4px; margin-bottom: 18px; } #rv-stem { margin-bottom: 20px; } #rv-options { display: flex; flex-direction: column; gap: 12px; } .rv-opt { display: flex; align-items: flex-start; gap: 12px; border: 2px solid #dfe4e9; border-radius: 6px; padding: 12px 14px; background: #fff; position: relative; } .rv-opt.correct { border-color: #7cb342; background: #f2f9ea; } .rv-opt.wrong { border-color: #e05c33; background: #fdf1ee; } .rv-opt-l { width: 22px; font-weight: bold; text-align: center; flex-shrink: 0; } .rv-opt.correct .rv-opt-l { color: #5a8a2b; } .rv-opt.wrong .rv-opt-l { color: #c0432a; } .rv-opt-body { flex: 1; line-height: 1.5; } .rv-opt-tag { flex-shrink: 0; font-size: 11px; font-weight: bold; padding: 3px 9px; border-radius: 20px; align-self: center; } .rv-opt-tag.ok { background: #cfe8b4; color: #46661f; } .rv-opt-tag.bad { background: #f6cfc4; color: #93331f; } #rv-explain { width: 40%; max-width: 520px; flex-shrink: 0; background: #fbfcfd; border-left: 1px solid #d7dde3; overflow-y: auto; padding: 22px 24px 40px; } #rv-expl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; border-left: 4px solid var(--navy); padding-left: 12px; } .rv-expl-title { font-size: 17px; font-weight: bold; color: #1f3550; } #rv-badges { display: flex; gap: 8px; flex-wrap: wrap; } .rv-badge { font-size: 12px; font-weight: bold; padding: 5px 12px; border-radius: 20px; } .rv-badge.correct { background: #dff0cd; color: #4c7222; } .rv-badge.status.ok { background: #dff0cd; color: #4c7222; } .rv-badge.status.bad { background: #f7d7cf; color: #9a3b28; } .rv-badge.status.none { background: #fdeecb; color: #97701c; } .rv-badge.status.skip { background: #e7ebee; color: #6b7883; } #rv-expl-body { color: #2a3947; } #rv-bottombar { background: var(--bar); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; height: 54px; flex-shrink: 0; } .rv-bb-left, .rv-bb-right { display: flex; align-items: center; gap: 10px; } .rv-bb-btn { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 13px; font-weight: bold; padding: 8px 14px; border-radius: 6px; text-decoration: none; display: inline-block; } .rv-bb-btn:hover { background: rgba(255,255,255,0.26); } .rv-bb-nav { background: var(--acc); color: #fff; font-weight: bold; font-size: 14px; padding: 9px 22px; border-radius: 5px; border: none; } .rv-bb-nav:disabled { opacity: 0.4; cursor: default; } /* panel thống kê thời gian từng câu */ #rv-times-panel { position: fixed; left: 16px; bottom: 66px; width: 340px; max-height: 60vh; background: #fff; border: 1px solid #ccd4db; border-radius: 10px; box-shadow: 0 10px 30px rgba(20,30,45,0.25); overflow: hidden; display: flex; flex-direction: column; z-index: 40; } .rv-time-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #e6eaee; font-size: 12px; color: #667; } .rv-time-head b { font-size: 14px; color: #223; } .rv-time-head span { flex: 1; } #rv-time-close { border: none; background: #eef1f4; border-radius: 5px; padding: 3px 8px; } .rv-time-list { overflow-y: auto; padding: 6px; } .rv-time-row { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none; padding: 6px 8px; border-radius: 6px; text-align: left; } .rv-time-row:hover { background: #f2f5f8; } .rv-time-num { width: 58px; font-size: 12.5px; color: #445; flex-shrink: 0; } .rv-time-bar { flex: 1; height: 8px; background: #edf0f3; border-radius: 5px; overflow: hidden; } .rv-time-bar span { display: block; height: 100%; background: var(--navy); border-radius: 5px; } .rv-time-val { width: 44px; text-align: right; font-size: 12px; font-weight: bold; color: #334; } .rv-time-row.hot .rv-time-bar span { background: var(--flag-red); } .rv-time-row.hot .rv-time-val { color: var(--flag-red); } .rev-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: #fff; border: 1px solid #dde3e9; border-radius: 10px; padding: 16px 20px; font-size: 14px; color: #445; } @media (max-width: 820px) { #rv-layout { flex-direction: column; } #rv-explain { width: 100%; max-width: none; border-left: none; border-top: 1px solid #d7dde3; } #rv-rail { width: 100%; height: 46px; flex-direction: row; border-right: none; border-bottom: 1px solid #d7dde3; padding: 6px 8px; } } /* ========================= TOUR (hướng dẫn đề free) ==================== */ #tour-layer { position: fixed; inset: 0; z-index: 200; } #tour-spot { position: fixed; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(8, 12, 16, 0.62); outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 2px; transition: all 0.28s ease; } #tour-spot.center { outline: none; border-radius: 0; } #tour-tip { position: fixed; width: 330px; max-width: calc(100vw - 24px); background: #fff; color: #222; border-radius: 10px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4); padding: 16px 18px; transition: top 0.28s ease, left 0.28s ease; } #tour-tip::before { content: ""; position: absolute; left: var(--arrow-x, 50%); border: 9px solid transparent; margin-left: -9px; } #tour-tip[data-arrow="up"]::before { top: -18px; border-bottom-color: #fff; } #tour-tip[data-arrow="down"]::before { bottom: -18px; border-top-color: #fff; } #tour-tip[data-arrow="none"]::before { display: none; } #tour-tip h4 { font-size: 15.5px; margin: 0 0 6px; } #tour-tip p { font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; color: #445; } .tour-foot { display: flex; align-items: center; justify-content: space-between; } .tour-step-n { font-size: 12px; font-weight: bold; color: #8a97a3; } .tour-btns { display: flex; gap: 10px; align-items: center; } .tour-skip { background: none; border: none; color: #778; font-size: 13px; text-decoration: underline; padding: 6px 2px; cursor: pointer; } .tour-skip:hover { color: #445; } .tour-next { background: var(--acc-d, #6fa32b); color: #fff; border: none; border-radius: 5px; padding: 8px 16px; font-weight: bold; font-size: 13.5px; cursor: pointer; } .tour-next:hover { background: var(--acc-dd, #5c8a20); } /* ======================= FRM — GARP CBT chrome ========================== Mô phỏng giao diện thi FRM chính thức của GARP (Pearson VUE CBT): header navy có logo GARP + CONTRAST + KEYBOARD SHORTCUTS, đếm ANSWERED, TOTAL TIME LEFT, END TEST; câu hỏi radio trơn "1 of N" + FLAG; panel dọc INDEX / REFERENCES bên phải; thanh dưới xám nhạt với ANSWER / CLEAR và PREV / NEXT. Mọi selector đều nằm dưới body[data-skin="frm"] nên skin CFA (Prometric) và CMA (teal) giữ nguyên không đổi. */ .frm-only { display: none !important; } body[data-skin="frm"] { --frm-navy: #16283c; --frm-ink: #21374f; --frm-crimson: #9e1b32; } /* ---- ẩn chrome Prometric không có trong GARP CBT ---- */ body[data-skin="frm"] #view-exam .tb-pagesec, body[data-skin="frm"] #view-exam #skin-brand, body[data-skin="frm"] #view-exam .tb-progress, body[data-skin="frm"] #view-exam #hl-btn, body[data-skin="frm"] #view-exam #tour-btn, body[data-skin="frm"] #view-exam #testbar, body[data-skin="frm"] #view-exam #qrail, body[data-skin="frm"] #view-exam #navigator-btn, body[data-skin="frm"] #view-exam .zoom-group, body[data-skin="frm"] #view-exam .bb-flag, body[data-skin="frm"] #view-exam .opt-letter { display: none !important; } body[data-skin="frm"] #testbar { display: none !important; } /* ---- topbar ---- */ body[data-skin="frm"] #topbar { background: var(--frm-navy); min-height: 52px; gap: 14px; } body[data-skin="frm"] .tb-left { flex: 1; gap: 16px; } body[data-skin="frm"] #frm-brand { display: flex !important; align-items: center; gap: 7px; font-weight: bold; font-size: 17px; letter-spacing: 1px; color: #fff; } body[data-skin="frm"] .frm-tb-btn { display: flex !important; align-items: center; gap: 7px; background: none; border: none; color: #fff; font-size: 11.5px; font-weight: bold; letter-spacing: 0.8px; padding: 8px 6px; } body[data-skin="frm"] .frm-tb-btn:hover { background: rgba(255,255,255,0.1); border-radius: 4px; } body[data-skin="frm"] .frm-caret { font-size: 9px; } body[data-skin="frm"] #frm-answered { display: flex !important; align-items: center; margin-left: auto; font-size: 11.5px; font-weight: normal; letter-spacing: 0.8px; color: #d6dde5; } body[data-skin="frm"] #frm-answered b { color: #fff; margin-left: 4px; } body[data-skin="frm"] .tb-center { gap: 8px; } body[data-skin="frm"] .tb-time-label { font-size: 11.5px; letter-spacing: 0.8px; color: #d6dde5; text-transform: uppercase; } body[data-skin="frm"] #tb-timer { font-size: 15.5px; } body[data-skin="frm"] #finish-btn { background: none; border: none; color: #fff; font-size: 11.5px; font-weight: bold; letter-spacing: 0.8px; padding: 8px 6px; display: flex; align-items: center; gap: 7px; } body[data-skin="frm"] #finish-btn:hover { background: rgba(255,255,255,0.1); border-radius: 4px; } body[data-skin="frm"] #finish-btn .frm-endsq { width: 12px; height: 12px; border: 2px solid #fff; display: inline-block; } /* dropdown CONTRAST (JS đặt vị trí theo nút) */ #frm-contrast-menu { position: fixed; z-index: 120; background: #fff; border: 1px solid #c8d2da; border-radius: 6px; box-shadow: 0 10px 30px rgba(10,20,30,0.25); min-width: 210px; padding: 5px; display: flex; flex-direction: column; } #frm-contrast-menu button { background: none; border: none; text-align: left; font-size: 13px; padding: 9px 12px; border-radius: 4px; color: #223; } #frm-contrast-menu button:hover { background: #eef2f6; } /* ---- vùng câu hỏi: "1 of N" + FLAG, đáp án kiểu radio trơn ---- */ body[data-skin="frm"] #frm-qhead { display: flex !important; align-items: center; justify-content: space-between; margin-bottom: 18px; color: #55606a; font-size: 13.5px; } body[data-skin="frm"] #frm-flag { display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--frm-ink); font-size: 11.5px; font-weight: bold; letter-spacing: 0.8px; padding: 6px 8px; border-radius: 4px; } body[data-skin="frm"] #frm-flag:hover { background: #eef2f6; } body[data-skin="frm"] #frm-flag.on { color: var(--frm-crimson); } body[data-skin="frm"] #frm-flag.on svg path { fill: var(--frm-crimson); } body[data-skin="frm"] #stem { background: none; padding: 0 0 4px; margin-bottom: 18px; } body[data-skin="frm"] #options { gap: 6px; } body[data-skin="frm"] .opt-box { border: none; background: none; padding: 7px 8px 7px 34px; position: relative; border-radius: 4px; } body[data-skin="frm"] .opt-box:hover { background: #f2f6f9; } body[data-skin="frm"] .opt-box::before { content: ""; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border: 2px solid #4a5560; border-radius: 50%; background: #fff; } body[data-skin="frm"] .opt-row.selected .opt-box { border: none; padding: 7px 8px 7px 34px; background: #eef3f8; } body[data-skin="frm"] .opt-row.selected .opt-box::before { border-color: var(--frm-ink); } body[data-skin="frm"] .opt-row.selected .opt-box::after { content: ""; position: absolute; left: 12.5px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--frm-ink); } body[data-skin="frm"] .opt-row.struck .opt-box { border: none; background: #fafbfc; } /* ---- panel dọc INDEX / REFERENCES bên phải ---- */ body[data-skin="frm"] #frm-side { display: flex !important; flex-direction: column; align-items: center; width: 64px; flex-shrink: 0; gap: 6px; padding-top: 12px; background: #fff; border-left: 1px solid var(--gray-line); } body[data-skin="frm"] .frm-side-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 56px; background: none; border: none; padding: 9px 2px; font-size: 8.5px; font-weight: bold; letter-spacing: 0.5px; color: var(--frm-ink); border-radius: 6px; } body[data-skin="frm"] .frm-side-btn:hover, body[data-skin="frm"] .frm-side-btn.on { background: #e8eef4; } #frm-panel { position: fixed; top: 52px; bottom: 56px; right: 64px; width: 320px; z-index: 60; background: #f7f9fb; border-left: 1px solid #c8d2da; box-shadow: -8px 0 24px rgba(10,20,30,0.14); display: flex; flex-direction: column; } #frm-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #d7dde3; font-size: 12px; letter-spacing: 0.8px; color: #21374f; } #frm-panel-close { background: none; border: 1px solid #c8d2da; border-radius: 4px; font-size: 13px; padding: 2px 9px; color: #445; } #frm-panel-close:hover { background: #e8eef4; } #frm-panel-body { overflow-y: auto; padding: 10px; } .frm-ix-item { display: block; width: 100%; text-align: left; padding: 9px 11px; border: 1px solid #d7dde3; background: #fff; border-radius: 5px; margin-bottom: 7px; } .frm-ix-item:hover { background: #eef3f8; } .frm-ix-item.current { outline: 2px solid var(--orange); } .frm-ix-item b { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #21374f; margin-bottom: 3px; } .frm-ix-done { font-size: 8.5px; letter-spacing: 0.5px; background: #21374f; color: #fff; border-radius: 3px; padding: 2px 6px; font-weight: bold; } .frm-ix-flag { color: var(--flag-red); font-size: 12px; } .frm-ix-prev { display: block; font-size: 11.5px; color: #66707a; line-height: 1.4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .frm-refs { padding: 6px 4px; font-size: 13.5px; } .frm-refs-empty { padding: 20px 8px; font-size: 12.5px; color: #66707a; line-height: 1.6; } /* ---- bottom bar xám nhạt: ANSWER / CLEAR trái, PREV / NEXT phải ---- */ body[data-skin="frm"] #bottombar { background: #f1f3f6; border-top: 1px solid #cfd6dc; min-height: 56px; } body[data-skin="frm"] #frm-answer-btn { display: inline-flex !important; align-items: center; background: #3f4a54; color: #fff; border: none; border-radius: 3px; font-size: 12px; font-weight: bold; letter-spacing: 0.8px; padding: 11px 26px; } body[data-skin="frm"] #frm-answer-btn:hover { background: #2f3944; } body[data-skin="frm"] #frm-clear-btn { display: inline-flex !important; align-items: center; gap: 5px; background: none; border: none; color: #3f4a54; font-size: 12px; font-weight: bold; letter-spacing: 0.8px; padding: 11px 12px; border-radius: 4px; } body[data-skin="frm"] #frm-clear-btn:hover { background: #e3e8ec; } body[data-skin="frm"] .bb-left { display: flex; align-items: center; gap: 10px; } body[data-skin="frm"] .bb-nav { background: none; color: var(--frm-ink); font-size: 12.5px; font-weight: bold; letter-spacing: 0.8px; padding: 11px 14px; } body[data-skin="frm"] .bb-nav:hover { background: #e3e8ec; } body[data-skin="frm"] .bb-nav:disabled { background: none; color: #a7b0b8; } /* ---- chế độ CONTRAST "white on black" ---- */ body[data-skin="frm"].frm-dark #stage, body[data-skin="frm"].frm-dark #question-pane, body[data-skin="frm"].frm-dark #vignette-pane { background: #000; color: #fff; } body[data-skin="frm"].frm-dark #frm-qhead { color: #cfd6dc; } body[data-skin="frm"].frm-dark .opt-box:hover, body[data-skin="frm"].frm-dark .opt-row.selected .opt-box { background: #1c242c; } body[data-skin="frm"].frm-dark .opt-box::before { background: #000; border-color: #cfd6dc; } body[data-skin="frm"].frm-dark .opt-row.selected .opt-box::before { border-color: #fff; } body[data-skin="frm"].frm-dark .opt-row.selected .opt-box::after { background: #fff; } body[data-skin="frm"].frm-dark #qid-label { color: #8a97a3; } /* bảng phím tắt trong modal */ .frm-keys { border-collapse: collapse; width: 100%; font-size: 14px; } .frm-keys td { padding: 7px 10px; border-bottom: 1px solid #e6eaee; } .frm-keys td:first-child { width: 130px; color: #21374f; } @media (max-width: 700px) { body[data-skin="frm"] #frm-shortcuts, body[data-skin="frm"] #frm-answered { display: none !important; } #frm-panel { right: 56px; width: min(300px, calc(100vw - 64px)); } body[data-skin="frm"] #frm-side { width: 56px; } }