:root {
--navy: #123a52;
--navy-dark: #0d2c3f;
--teal-light: #7fd7e8;
--teal-mid: #3fb8d6;
--cream: #fdf9ee;
--purple: #7c5cff;
--yellow: #ffc93c;
--yellow-dark: #f2a900;
--green: #33c07a;
--red: #ef5350;
--gray-text: #6b7a85;
--ok-gray: #9aa3ad;
--radius-lg: 20px;
--radius-md: 14px;
/* OctoKids brand palette */
--ok-indigo: #1b1250;
--ok-indigo-dark: #120b38;
--ok-ocean-1: #33c6e8;
--ok-ocean-2: #1878b8;
--ok-purple: #8b5cf6;
--ok-purple-dark: #6d3fd1;
--ok-pink: #ff6fa0;
--ok-green: #22c55e;
--ok-orange: #f97316;
--ok-blue: #3b82f6;
--ok-gold: #ffcc33;
--ok-gold-dark: #f2a900;
--ok-royal-blue-1: #0d63b0;
--ok-royal-blue-2: #003d78;
--ok-bg-end: #0193ea; /* màu đáy của ảnh nền biển, dùng để nối liền mạch sang section kế tiếp */
/* Hệ font theo bảng định nghĩa: Coiny cho heading lớn, Fredoka cho heading phụ/
card/nút/số điểm, Nunito cho nội dung thân bài. */
--font-display: "Coiny", "Fredoka", sans-serif;
--font-heading: "Nunito", "Segoe UI", sans-serif;
--font-body: "Nunito", "Segoe UI", Tahoma, Arial, sans-serif;
font-size: 14px;
}
* { box-sizing: border-box; }
/* Heading lớn (tiêu đề hero) */
.ok-wordmark { font-family: var(--font-display); }
/* Heading phụ, tiêu đề card, nút, số điểm/level — Fredoka */
h1, h2, h3, h4,
.ok-brand-word, .ok-nav-link, .ok-btn-outline, .ok-btn-gold,
.ok-ribbon, .ok-hero-cta,
.ok-age-btn b, .ok-age-card-head h3, .ok-welcome-v2-head h4, .ok-level-row, .ok-level-badge,
.ok-subject-card-v2 h3, .ok-subject-btn-v2, .ok-parent-copy h3, .ok-parent-cta,
.section-title h2, .ok-subjects-title,
.ok-achieve-grid b, .ok-xp-label, .ok-stat b {
font-family: var(--font-heading);
}
.ok-achieve-grid b, .ok-level-badge { font-weight: 600; }
/* overflow-x:hidden đặt ở (không phải ) — cùng tác dụng chặn cuộn ngang do
.ok-home-deco/các khối trang trí tràn mép, nhưng KHÔNG kẹp (clip) mất các phần tử
position:fixed là con của (chrome nổi .ok-immersive-el) như khi đặt overflow ngay
trên — lỗi hiếm gặp nhưng đã xác nhận thật ở Chrome (kể cả khi chỉ có
position:relative, không transform/filter gì) khi thêm .ok-immersive-el. */
html { overflow-x: hidden; }
body {
margin: 0;
min-height: 100vh;
font-family: var(--font-body);
background: linear-gradient(180deg, #e2eef7 0%, #ffffff 100%);
color: var(--navy);
position: relative;
}
.bubble {
position: fixed;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
pointer-events: none;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 18px 20px 60px;
position: relative;
z-index: 1;
}
/* Trang chủ OctoKids dùng bố cục rộng hơn hẳn (gần full-width) so với các trang
dạng thẻ/form còn lại — tách riêng class để không ảnh hưởng trang làm bài. */
.container-wide {
max-width: 1600px;
margin: 0 auto;
padding: 6px 32px 60px;
position: relative;
z-index: 1;
}
/* Trang trí góc footer trang chủ — đặt ngoài .container-wide nên định vị theo
(position:relative + overflow-x:hidden khai báo sẵn ở trên), tức bám đúng mép trái/phải
ngoài cùng của cả trang bất kể .container-wide có max-width hẹp hơn màn hình, và z-index
cao để có thể đè lên dải "Dành cho phụ huynh"/"Footer tin cậy" phía dưới nếu chồng lấn. */
.ok-home-deco { position: absolute; bottom: 0; width: 170px; opacity: 0.9; pointer-events: none; z-index: 50; }
.ok-home-deco.left { left: 0; }
.ok-home-deco.right { right: 0; transform: scaleX(-1); }
@media (max-width: 700px) {
.ok-home-deco { width: 100px; opacity: 0.6; }
}
/* ---------- Header ---------- */
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 22px;
border-radius: var(--radius-lg);
background: linear-gradient(90deg, #55c6e0, #3fb8d6);
color: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
margin-bottom: 14px;
}
.app-header .brand { display: flex; align-items: center; gap: 12px; }
.app-header .brand .logo {
width: 46px; height: 46px;
background: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 24px;
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.app-header .brand h1 { font-size: 19px; margin: 0; }
.app-header .brand p { font-size: 12px; margin: 2px 0 0; opacity: 0.9; }
.app-header .icons { display: flex; gap: 10px; }
.app-header .icons button {
width: 38px; height: 38px; border-radius: 12px; border: none;
background: rgba(255,255,255,0.25); color: #fff; font-size: 16px; cursor: pointer;
}
/* ---------- Status bar (timer / progress / submit) ---------- */
.status-bar {
display: flex; align-items: center; justify-content: space-between;
background: var(--navy);
color: #fff;
border-radius: var(--radius-md);
padding: 12px 18px;
margin-bottom: 16px;
}
.status-bar .timer {
background: var(--navy-dark);
padding: 8px 16px;
border-radius: 10px;
font-weight: 600;
font-size: 18px;
min-width: 76px;
text-align: center;
}
.status-bar .timer.warning { color: #ffb3b3; }
.status-bar .progress-label { font-size: 13px; }
.status-bar .progress-label b { font-size: 15px; }
.status-bar .right { display: flex; align-items: center; gap: 10px; }
.status-bar .menu-btn {
width: 38px; height: 38px; border-radius: 10px; border: none;
background: rgba(255,255,255,0.15); color: #fff; font-size: 16px; cursor: pointer;
}
.status-bar .submit-btn {
background: var(--yellow);
color: var(--navy-dark);
border: none;
font-weight: 600;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
font-size: 14px;
}
.status-bar .submit-btn:hover { background: var(--yellow-dark); }
/* ---------- Question card ---------- */
.card {
background: var(--cream);
border-radius: var(--radius-lg);
padding: 26px 28px 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.topic-tag {
color: var(--purple);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.question-vi { font-size: 18px; font-weight: 600; margin: 0 0 6px; line-height: 1.4; }
.question-en { font-size: 13px; color: var(--gray-text); margin: 0 0 16px; }
.visual-box {
border-radius: var(--radius-md);
padding: 24px 20px;
margin-bottom: 22px;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
/* balance scales — đòn cân thẳng, đặt vật trực tiếp lên thanh (không dùng giỏ/pan
vì giỏ cố định bề rộng nhỏ sẽ tràn khi có nhiều vật, xem bug cũ đã gặp). */
.scale {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.scale-beam-wrap {
position: relative;
width: 280px;
height: 100px;
}
.scale-pivot {
position: absolute;
left: 50%; bottom: 0;
width: 0; height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 26px solid var(--navy);
transform: translateX(-50%);
}
.scale-beam {
position: absolute;
left: 50%; bottom: 26px;
width: 240px; height: 8px;
background: var(--navy);
border-radius: 4px;
transform-origin: center;
transform: translateX(-50%) rotate(0deg);
transition: transform 0.2s ease;
}
.scale-beam.tilt-left { transform: translateX(-50%) rotate(-9deg); }
.scale-beam.tilt-right { transform: translateX(-50%) rotate(9deg); }
.scale-items {
position: absolute;
bottom: 34px;
width: 110px;
display: flex; flex-wrap: wrap;
gap: 4px;
justify-content: center;
font-size: 26px;
transition: bottom 0.2s ease;
}
.scale-items.left { left: 6px; }
.scale-items.right { right: 6px; }
.scale-items.up { bottom: 44px; }
.scale-items.down { bottom: 22px; }
.scale-item-label {
text-align: center; font-size: 12px; color: var(--gray-text); margin-top: 4px;
}
.scale-caption { font-weight: 600; color: var(--purple); font-size: 13px; margin-bottom: 2px; }
.scale-chain { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.scale-num {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
background: #fff3d6; border: 2px solid var(--navy);
font-size: 17px; font-weight: 600; color: var(--navy);
}
.scale-num.blank { background: #fff; border-style: dashed; border-color: var(--purple); color: var(--purple); }
.scale-icon { width: 26px; height: 26px; object-fit: contain; }
/* equation — phương trình minh họa (điền số/dấu, thay thế icon ẩn số) */
.equation-row {
display: flex; align-items: center; justify-content: center;
gap: 14px; flex-wrap: wrap;
font-size: 32px; font-weight: 600; color: var(--navy);
}
.eq-token.eq-icon { font-size: 40px; }
.eq-icon-img { width: 1em; height: 1em; object-fit: contain; vertical-align: middle; }
.eq-token.eq-blank {
display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 12px;
border: 3px dashed var(--purple); color: var(--purple);
font-size: 28px; background: #fff;
}
/* Ô tròn khuyết dấu phép tính (+/-), khác ô vuông khuyết số — khớp đúng bố cục sách gốc
"☐ ○ ☐ = ☐" (2 số + 1 dấu đều ẩn, không chỉ mỗi kết quả). */
.eq-token.eq-blank.circle { border-radius: 50%; }
/* Sơ đồ tách-gộp NHÚNG ngay trong 1 dòng phương trình (thay vì số trơn) — khớp mẫu sách
"9 + [4 tách bond] = ?". Bọc trong khung cố định (đã scale sẵn 220x150 * 0.45) để không
đẩy lệch layout dòng phương trình như cách dùng margin âm ở .nb-item. */
.eq-token.eq-bond-wrap { display: inline-block; width: 100px; height: 70px; position: relative; vertical-align: middle; }
/* Selector cụ thể hơn ".number-bond" (đứng sau trong file, tự set position:relative) để
thắng cascade — nếu không, position:absolute ở đây bị .number-bond ghi đè mất. */
.eq-bond-wrap .eq-bond-diagram { position: absolute; top: 0; left: 0; transform: scale(0.45); transform-origin: top left; }
.equation-stack { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.equation-stack .equation-row { font-size: 26px; }
.equation-stack .eq-token.eq-icon { font-size: 32px; }
.nb-equation-rows { margin-top: 18px; }
/* Thước đo bằng đơn vị lặp lại — vật đo + hàng đơn vị bên dưới CÙNG chiều rộng (tính từ
JS theo số đơn vị), để tỉ lệ hình ảnh khớp thật với đáp án đếm được. */
.unit-ruler { display: flex; flex-direction: column; align-items: center; margin: 0 auto; max-width: 100%; }
/* Ảnh vật đo phải rộng ĐÚNG BẰNG width tính từ JS (count * unitWidth) để chiều dài hình vẽ
khớp thật với số đơn vị — dùng width:100% + height:auto (không phải height cố định +
object-fit:contain), vì contain trong khung cao cố định co width lại theo tỉ lệ khung hình
gốc (icon dọc/cao sẽ hiện NHỎ HƠN nhiều so với width thật, làm sai lệch trực quan). */
.ur-object { max-width: 100%; max-height: 110px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.ur-object img { width: 100%; height: auto; display: block; }
/* Đoạn thẳng/thước kẻ trơn (không icon) — đơn giản nhất để tỉ lệ luôn ĐÚNG tuyệt đối, không
phụ thuộc hình dạng/tỉ lệ khung hình gốc của bất kỳ icon nào. */
.ur-bar { max-width: 100%; height: 30px; background: var(--ok-blue); border-radius: 6px; }
.ur-baseline { height: 3px; background: var(--navy); margin: 4px 0; max-width: 100%; }
.ur-units { display: flex; justify-content: space-between; max-width: 100%; }
.ur-unit { display: inline-flex; align-items: center; justify-content: center; }
.ur-unit img { width: 100%; height: 100%; object-fit: contain; }
/* "Đếm bằng cách dán sticker" — bấm vào từng con vật trong khung cảnh để dán 1 dấu tích,
số đếm cập nhật ngay. Chỉ là màn luyện tập trực quan phía trên (không phải chỗ trả lời
thật — trả lời vẫn qua nút trắc nghiệm A/B/C/D bên dưới như bình thường). */
.sticker-scene-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.sticker-scene {
position: relative; width: 100%; max-width: 480px; aspect-ratio: 4 / 3;
background: linear-gradient(180deg, #eaf6e9 0%, #d9f0d4 100%);
border: 3px solid var(--navy); border-radius: 16px; overflow: hidden;
}
.sticker-zone {
position: absolute; transform: translate(-50%, -50%);
background: none; border: none; padding: 0; cursor: pointer;
}
.sticker-zone img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); transition: transform .12s; }
.sticker-zone:hover img { transform: scale(1.12); }
.sticker-zone.stuck { position: absolute; }
.sticker-zone.stuck::after {
content: "✓"; position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
border-radius: 50%; background: var(--ok-green); color: #fff; font-size: 13px; font-weight: 700;
display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.btb-bond { margin: 16px auto 0; transform: scale(0.75); transform-origin: top center; }
/* Bảng đếm khớp layout sách (tranh + bảng trống nhiều hàng) — mỗi hàng tự điền dần sticker
tròn khi bé bấm đúng con vật thuộc category đó, bất kể câu đang hỏi category nào. */
.sticker-table { width: 100%; max-width: 480px; border: 3px solid var(--navy); border-radius: 12px; overflow: hidden; background: #fff; }
.sticker-table-row { display: flex; border-bottom: 2px solid var(--navy); min-height: 44px; }
.sticker-table-row:last-child { border-bottom: none; }
.sticker-table-label { width: 110px; flex-shrink: 0; display: flex; align-items: center; padding: 6px 10px; font-weight: 700; color: var(--navy); background: #f1ecff; border-right: 2px solid var(--navy); }
.sticker-table-cell { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px 10px; }
.sticker-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--ok-blue); display: inline-block; }
/* Đặt tính dọc (cộng/trừ) — 2 số thẳng cột bên phải, gạch ngang, kết quả trống bên dưới. */
.vert-arith { display: flex; flex-direction: column; align-items: flex-end; width: fit-content; margin: 0 auto; font-size: 30px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.va-row { padding: 2px 4px; }
.va-op-row { display: flex; align-items: center; gap: 10px; }
.va-op { font-size: 26px; }
.va-line { width: 100%; height: 3px; background: var(--navy); margin: 2px 0 6px; }
.va-blank { color: var(--purple); }
/* Gộp 3 số làm tròn 10 trước — 2 sơ đồ bond chồng dọc nối mũi tên. */
.chain3-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.chain3-bonds { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.chain3-arrow { font-size: 26px; color: var(--navy); font-weight: 700; }
/* Tiền — chữ nhật (tiền giấy) / tròn (tiền xu), số tiền viết ngay bên trong khung. */
.money-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.money-item {
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 15px; color: var(--navy);
border: 2px solid var(--navy); background: #fff;
}
.money-bill { width: 72px; height: 44px; border-radius: 6px; }
.money-coin { width: 56px; height: 56px; border-radius: 50%; }
.cb-bond { transform: scale(0.8); }
/* Đồ vật có nhãn giá — thẻ tên + giá tiền, thay cho hình vẽ đồ vật (không có icon). */
.priced-item-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.priced-item {
display: flex; flex-direction: column; align-items: center; gap: 4px;
min-width: 84px; padding: 12px 10px;
border: 2px solid var(--navy); border-radius: 10px; background: #fff;
}
.pi-name { font-size: 13px; font-weight: 600; color: var(--navy); text-align: center; }
.pi-price { font-size: 14px; font-weight: 700; color: #d9534f; }
.pi-emoji { font-size: 30px; line-height: 1; }
/* Thước kẻ có vạch số — đo vật/dải theo [start,end] thật, khác unitRuler (đơn vị lặp lại). */
.rm-scroll { overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
.ruler-measure { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; width: max-content; }
.rm-row { display: flex; align-items: center; gap: 8px; }
.rm-label { font-size: 12px; font-weight: 600; color: var(--navy); min-width: 50px; text-align: right; }
.rm-track { position: relative; height: 20px; }
.rm-bar {
position: absolute; top: 0; height: 20px;
background: var(--ok-blue-light, #cfe8ff); border: 2px solid var(--navy); border-radius: 4px; box-sizing: border-box;
}
.rm-ruler-track { position: relative; height: 24px; }
.rm-ruler-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--navy); }
.rm-tick { position: absolute; top: 6px; font-size: 10px; color: var(--navy); transform: translateX(-50%); }
.rm-tick::before { content: ""; position: absolute; top: -6px; left: 50%; width: 1px; height: 6px; background: var(--navy); }
/* Sơ đồ đoạn thẳng (bar model) — độ dài đoạn tỉ lệ thật với giá trị. */
.bar-model { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; max-width: 100%; }
.bm-stack { display: flex; flex-direction: column; gap: 6px; }
.bm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bm-label { font-size: 12px; font-weight: 600; color: var(--navy); min-width: 48px; text-align: right; }
.bm-bar {
height: 40px; display: flex; align-items: center; justify-content: center;
background: var(--ok-blue-light, #cfe8ff); border: 2px solid var(--navy); border-radius: 6px;
font-weight: 700; color: var(--navy); box-sizing: border-box;
}
.bm-sum { flex-direction: row; align-items: center; gap: 4px; }
.bm-bracket { display: flex; align-items: center; }
.bm-bracket-label {
border: 2px dashed var(--navy); border-radius: 50%;
width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
font-weight: 700; color: var(--navy); font-size: 16px;
}
.bm-total-label { font-size: 13px; font-weight: 600; color: var(--navy); }
.bm-takeaway-bar { display: flex; }
.bm-segment {
height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center;
background: var(--ok-blue-light, #cfe8ff); border: 2px solid var(--navy); box-sizing: border-box;
font-weight: 700; color: var(--navy); gap: 2px;
}
.bm-segment:first-child { border-radius: 6px 0 0 6px; }
.bm-segment:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.bm-seg-label { font-size: 11px; font-weight: 600; }
.bm-segment-blank { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #f3ecff 6px, #f3ecff 12px); color: #7c5cff; }
.bm-segment-diff { background: #ffe9a8; border-left: none; border-radius: 0 6px 6px 0; }
/* "equalParts" — dải ô bằng nhau (nhân/chia), khớp trang "Fun With Models" thật sự in sơ đồ. */
.bm-eq-row { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.bm-eq-box {
width: 44px; height: 40px; display: flex; align-items: center; justify-content: center;
background: var(--ok-blue-light, #cfe8ff); border: 2px solid var(--navy); box-sizing: border-box;
font-weight: 700; color: var(--navy); margin-left: -2px;
}
.bm-eq-row .bm-eq-box:first-child { margin-left: 0; border-radius: 6px 0 0 6px; }
.bm-eq-row .bm-eq-box:last-of-type { border-radius: 0 6px 6px 0; }
.bm-eq-ellipsis { display: flex; align-items: center; justify-content: center; width: 30px; font-weight: 700; color: var(--navy); }
.bm-eq-total-label {
border: 2px solid var(--navy); border-radius: 8px; padding: 4px 10px;
font-weight: 700; color: var(--navy); font-size: 15px; background: #fff;
}
.bm-eq-count-label { font-size: 13px; font-weight: 600; color: #7c5cff; }
.bm-eq-box-blank { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #f3ecff 6px, #f3ecff 12px); color: #7c5cff; }
/* number compare — so sánh 2 số trừu tượng bằng thẻ số lớn */
.number-compare { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.nc-badge {
min-width: 90px; height: 90px; border-radius: 20px; padding: 0 14px; box-sizing: border-box;
background: #fff3d6; border: 3px solid var(--navy);
display: flex; align-items: center; justify-content: center;
font-size: 32px; font-weight: 600; color: var(--navy); white-space: nowrap;
}
.nc-blank {
display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
border: 3px dashed var(--purple); color: var(--purple);
font-size: 24px; font-weight: 600; background: #fff;
}
/* size compare — dài/ngắn (thanh chồng trên-dưới), cao/thấp (cột cạnh nhau),
to/nhỏ (icon phóng to/thu nhỏ cạnh nhau) */
.size-compare { min-height: 120px; display: flex; align-items: center; justify-content: center; }
.sc-item { display: flex; align-items: center; }
/* dài/ngắn: chồng trên-dưới, cùng mép trái, có vạch kẻ kiểu thước */
.size-compare.sc-length { flex-direction: column; align-items: flex-start; gap: 16px; padding-left: 10px; }
.sc-bar {
height: 26px; border-radius: 6px;
background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 2px, transparent 2px 18px);
}
.sc-bar.a { background-color: var(--teal-mid); }
.sc-bar.b { background-color: var(--ok-purple); }
/* cao/thấp: cạnh nhau, cùng đáy */
.size-compare.sc-height { align-items: flex-end; gap: 40px; }
.sc-col { width: 34px; border-radius: 8px 8px 0 0; }
.sc-col.a { background: var(--teal-mid); }
.sc-col.b { background: var(--ok-purple); }
/* to/nhỏ: icon phóng to/thu nhỏ cạnh nhau */
.size-compare.sc-icon-mode { gap: 36px; }
.sc-icon { line-height: 1; }
/* so sánh 3+ đối tượng cùng lúc (visual.items) — cột/thanh có nhãn riêng dưới mỗi vật */
.size-compare.sc-multi { align-items: flex-end; gap: 24px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.sc-item-multi { flex-direction: column; gap: 6px; }
.size-compare.sc-multi.sc-length { flex-direction: row; align-items: flex-end; padding-left: 0; }
.size-compare.sc-multi.sc-length .sc-item-multi { flex-direction: column-reverse; }
.sc-multi-emoji { font-size: 22px; line-height: 1; }
.sc-multi-label { font-size: 13px; font-weight: 600; color: var(--navy); }
.sc-multi-0 { background: var(--teal-mid); }
.sc-multi-1 { background: var(--ok-purple); }
.sc-multi-2 { background: var(--ok-orange); }
.sc-multi-3 { background: var(--ok-green); }
.size-compare.sc-multi .sc-bar { height: 26px; border-radius: 6px; }
/* chiều cao (VD "bục" 3 bạn đứng): cột sát nhau như 1 bậc thang liền khối, không có
khoảng hở giữa các cột — khớp hình ảnh bục thi đấu thật, có viền trắng phân tách. */
.size-compare.sc-multi.sc-height { gap: 0; }
.size-compare.sc-multi.sc-height .sc-col {
width: 56px; border-radius: 0; border-left: 2px solid #fff; box-sizing: border-box;
}
.size-compare.sc-multi.sc-height .sc-item-multi:first-child .sc-col { border-left: none; border-radius: 8px 0 0 0; }
.size-compare.sc-multi.sc-height .sc-item-multi:last-child .sc-col { border-radius: 0 8px 0 0; }
/* clock face — giờ chẵn (kim phút luôn chỉ số 12), đủ 12 số quanh mặt đồng hồ,
vị trí left/top tính sẵn bằng lượng giác trong renderClockFace (exam-take.js). */
.clock-face {
position: relative;
width: 140px; height: 140px;
border-radius: 50%;
border: 4px solid var(--navy);
background: #fff;
margin: 0 auto;
}
.clock-num {
position: absolute;
font-weight: 600; font-size: 13px; color: var(--navy);
transform: translate(-50%, -50%);
}
.clock-center {
position: absolute; left: 50%; top: 50%;
width: 10px; height: 10px; border-radius: 50%;
background: var(--navy); transform: translate(-50%, -50%); z-index: 2;
}
.clock-hand {
position: absolute; left: 50%; bottom: 50%;
transform-origin: bottom center;
border-radius: 3px;
}
.clock-hand.hour { width: 6px; height: 36px; background: var(--navy); transform: translateX(-50%) rotate(0deg); }
.clock-hand.minute { width: 4px; height: 54px; background: var(--purple); transform: translateX(-50%) rotate(0deg); }
.clock-face-group { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: flex-start; }
.clock-face-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Mặt cân đồng hồ (dialScale) — cùng kỹ thuật lượng giác với clock-face, khác công thức góc. */
.dial-scale {
position: relative; width: 130px; height: 130px;
border-radius: 50%; border: 4px solid var(--navy); background: #fff; margin: 0 auto;
}
.dial-scale.ds-semi { height: 80px; border-radius: 130px 130px 0 0; overflow: hidden; border-bottom: none; }
.ds-num { position: absolute; font-weight: 600; font-size: 12px; color: var(--navy); transform: translate(-50%, -50%); }
.ds-center { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--navy); transform: translate(-50%, -50%); z-index: 2; }
.dial-scale.ds-semi .ds-center { top: 65px; }
.ds-needle { position: absolute; left: 50%; bottom: 50%; width: 4px; height: 44px; background: #d9534f; border-radius: 3px; transform-origin: bottom center; }
/* Lệch tâm với .ds-center trước đây do dùng "bottom" trên khung ds-semi cao 80px (bottom:65px
= 15px tính từ đỉnh, không khớp top:65px của tâm) — bottom phải là 80-65=15px mới đúng tâm. */
.dial-scale.ds-semi .ds-needle { bottom: 15px; height: 50px; }
.ds-label { font-size: 13px; font-weight: 600; color: var(--navy); }
/* Đĩa cân — thanh ngang phía trên mặt số, nơi "đặt" vật (icon thật hoặc chữ) lên cân. */
.ds-platform {
display: flex; align-items: center; justify-content: center;
width: 90px; height: 8px; border: 2px solid var(--navy); border-top: none;
border-radius: 0 0 6px 6px; background: var(--ok-blue-light, #cfe8ff);
position: relative; margin-bottom: 4px;
}
.ds-platform-icon { position: absolute; bottom: 6px; width: 44px; height: 44px; object-fit: contain; }
.ds-platform .ds-label { position: absolute; bottom: 10px; white-space: nowrap; }
.dial-scale-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dial-scale-group { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: flex-start; }
.cf-label { font-size: 16px; font-weight: 600; color: var(--navy); }
/* week strip — dải 7 ngày trong tuần */
.week-strip { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ws-chip {
min-width: 44px; padding: 10px 6px;
border-radius: 10px; border: 2px solid #e7e0cc;
background: #fff; text-align: center;
font-weight: 600; font-size: 13px; color: var(--navy);
}
.ws-chip.active { background: var(--yellow); border-color: var(--navy); color: var(--navy-dark); }
/* item display — 1 icon lớn đứng riêng (câu phân loại) */
.item-display { line-height: 1; text-align: center; }
/* phân loại 1 vật — bấm thẳng vào ô đúng màu (không kéo, xem renderDropZoneChoices) */
.drag-classify { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.drag-item { line-height: 1; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; user-drag: none; }
.drag-hint { font-size: 13px; color: var(--gray-text); font-weight: 600; }
/* grid-column: 1/-1 — #choices (.ok-take-choices) là 1 grid 2 cột cho layout nút bấm
thường, .drop-zones/.dc-zones là 1 div DUY NHẤT lồng bên trong nên mặc định chỉ
chiếm 1 trong 2 cột đó (dư khoảng trắng bên phải) nếu không ép span hết chiều rộng. */
.drop-zones { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.drop-zone {
position: relative; min-height: 110px; border-radius: 16px; border: 3px dashed rgba(0, 0, 0, 0.18);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
cursor: pointer; background: #faf7ee;
transition: transform 0.06s ease, border-color 0.15s ease, background 0.15s ease;
}
.drop-zone.dz-circle { border-radius: 50%; }
.drop-zone.filled { border-style: solid; }
.drop-zone-label { font-size: 12px; font-weight: 600; color: var(--navy); text-align: center; padding: 0 10px; }
.drop-zone .dropped-item { font-size: 44px; line-height: 1; }
.dz-color-yellow { background: #fff3d6; border-color: var(--yellow); color: var(--yellow-dark); }
.dz-color-blue { background: #e0edff; border-color: var(--ok-blue); color: var(--ok-blue); }
.dz-color-red { background: #fde0df; border-color: var(--red); color: var(--red); }
.dz-color-green { background: #e0f7ea; border-color: var(--ok-green); color: var(--ok-green); }
.dz-color-pink { background: #ffe3ee; border-color: var(--ok-pink); color: var(--ok-pink); }
.dz-color-purple { background: #ece3ff; border-color: var(--ok-purple); color: var(--ok-purple); }
.dz-color-orange { background: #ffe9d9; border-color: var(--ok-orange); color: var(--ok-orange); }
/* phân loại NHIỀU vật vào 4 ô dạng giỏ — bấm 1 vật để "nhặt" rồi bấm vào giỏ để đặt
(không kéo), vật ở lại trong giỏ sau khi đặt. */
.dc-pool-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dc-pool {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 16px; min-height: 90px; padding: 10px;
}
.dc-pool-empty { font-size: 14px; font-weight: 600; color: var(--gray-text); }
.dc-item {
font-size: 44px; line-height: 1; cursor: pointer;
user-select: none; -webkit-user-select: none; -webkit-user-drag: none; user-drag: none;
}
.dc-item.picked {
outline: 3px solid var(--navy); border-radius: 10px; background: rgba(18, 58, 82, 0.08);
transform: scale(1.12); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
/* 4 giỏ dàn hết chiều rộng còn lại (auto-fit) thay vì chỉ chiếm 2 cột hẹp */
.dc-zones { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin: 26px 0 16px; }
.dc-zone {
position: relative; min-height: 130px; padding: 22px 10px 12px; cursor: pointer;
border: 3px solid rgba(0, 0, 0, 0.18);
/* hình thang như đáy giỏ thật — hẹp dần xuống dưới */
clip-path: polygon(4% 0%, 96% 0%, 88% 100%, 12% 100%);
border-radius: 0 0 6px 6px;
transition: transform 0.06s ease, border-color 0.15s ease;
}
.dc-zone:hover { transform: scale(1.02); }
.dc-zone::before {
/* quai giỏ */
content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
width: 46%; height: 22px; border: 4px solid currentColor; border-bottom: none;
border-radius: 50px 50px 0 0; opacity: 0.55;
}
.dc-zone-visual { display: flex; justify-content: center; margin-bottom: 6px; }
.dc-zone-label { font-size: 12px; font-weight: 600; color: var(--navy); text-align: center; margin-bottom: 8px; }
.dc-zone-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 40px; }
/* xem lại (tĩnh, không kéo được) */
.dc-item.review { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: default; position: relative; }
.dc-item.review.unanswered { opacity: 0.65; }
.dc-review-badge {
position: absolute; top: -6px; right: -10px; font-size: 15px; font-weight: 600;
width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
}
.dc-item.review.correct .dc-review-badge { background: var(--ok-green); }
.dc-item.review.wrong .dc-review-badge { background: var(--red); }
.dc-review-hint { font-size: 10px; font-weight: 600; color: var(--gray-text); white-space: nowrap; }
/* chọn/bỏ chọn NHIỀU vật trong 1 lưới (mô phỏng tô màu) — chạm vào vật để bật/tắt, không
có ô A/B/C/D nào để thả vào như dc-zone. Vật "đã chọn" tô nền vàng nhạt + viền cam, giữ
đúng cảm giác "đã tô màu" thay vì chỉ viền như .dc-item.picked (đó là trạng thái TẠM
"đang nhặt", còn đây là trạng thái ĐÃ CHỌN lâu dài cho tới khi bấm lại). */
.so-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.so-grid {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 14px; min-height: 90px; padding: 10px;
}
.so-item {
font-size: 44px; line-height: 1; cursor: pointer; position: relative;
padding: 8px; border-radius: 12px; border: 3px solid transparent;
user-select: none; -webkit-user-select: none;
transition: transform 0.06s ease, background 0.15s ease, border-color 0.15s ease;
}
.so-item:hover { transform: scale(1.05); }
.so-item.selected {
background: #fff3cf; border-color: var(--ok-orange);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
/* xem lại (tĩnh, không chạm được) */
.so-item.review { cursor: default; }
.so-item.review:hover { transform: none; }
.so-item.review.correct { background: #e0f7ea; border-color: var(--ok-green); }
.so-item.review.wrong { background: #fde0df; border-color: var(--red); }
.so-item.review.missed { background: #fff8ec; border-color: var(--ok-orange); border-style: dashed; }
.so-review-badge {
position: absolute; top: -6px; right: -6px; font-size: 15px; font-weight: 700;
width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
}
.so-item.review.correct .so-review-badge { background: var(--ok-green); }
.so-item.review.wrong .so-review-badge { background: var(--red); }
.so-item.review.missed .so-review-badge { background: var(--ok-orange); }
.so-review-summary { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--navy); text-align: center; }
/* nối 2 cột bằng đường thẳng thật (VD "nối số với đúng nhóm số lượng") — 2 cột đứng yên,
1 lớp SVG phủ giữa để vẽ đường nối; SVG pointer-events:none để chạm xuyên qua tới các
vật bên dưới (SVG nằm chồng lên toàn bộ .ml-wrap, không riêng phần giữa 2 cột). */
.ml-wrap-outer { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ml-wrap { position: relative; width: 100%; max-width: 420px; display: flex; justify-content: space-between; gap: 24px; }
.ml-svg { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
.ml-col { display: flex; flex-direction: column; gap: 22px; z-index: 1; }
.ml-left { align-items: flex-end; }
.ml-right { align-items: flex-start; }
.ml-item {
cursor: pointer; border: 3px solid rgba(0, 0, 0, 0.15); border-radius: 50%;
width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
background: #fff; transition: transform 0.06s ease, border-color 0.15s ease; user-select: none;
}
.ml-right-item { border-radius: 18px; width: auto; min-width: 64px; padding: 6px 10px; }
.ml-item:hover { transform: scale(1.05); }
.ml-left-item.picked { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(18, 58, 82, 0.15); }
.ml-left-item.connected { border-color: var(--ok-purple); }
.ml-line { stroke: var(--ok-purple); stroke-width: 3; stroke-linecap: round; }
.ml-dot { fill: var(--ok-purple); }
.ml-line-correct { stroke: var(--ok-green); }
.ml-dot-correct { fill: var(--ok-green); }
.ml-line-wrong { stroke: var(--red); }
.ml-dot-wrong { fill: var(--red); }
/* venn diagram — 2 vòng tròn giao nhau */
.venn { position: relative; width: 320px; height: 200px; margin: 0 auto; }
.venn-circle { position: absolute; top: 20px; width: 200px; height: 160px; border-radius: 50%; opacity: 0.5; }
.venn-circle.left { left: 0; background: var(--ok-pink); }
.venn-circle.right { left: 120px; background: var(--ok-blue); }
.venn-label { position: absolute; top: 0; width: 140px; font-weight: 600; font-size: 13px; color: var(--navy); text-align: center; }
.venn-label.left { left: 0; }
.venn-label.right { right: 0; }
.venn-zone { position: absolute; top: 85px; display: flex; gap: 6px; font-size: 26px; }
.venn-icon-img { width: 26px; height: 26px; object-fit: contain; }
.venn-zone.left { left: 24px; }
.venn-zone.right { right: 24px; }
.venn-zone.both { left: 50%; transform: translateX(-50%); }
.pictogram { display: flex; flex-direction: column; gap: 10px; width: fit-content; margin: 0 auto; max-width: 100%; }
.pictogram-unit { font-size: 13px; font-weight: 600; color: var(--navy); opacity: 0.7; margin-bottom: 2px; }
.pictogram-row { display: flex; align-items: center; gap: 10px; }
.pictogram-label { min-width: 64px; font-weight: 600; font-size: 14px; color: var(--navy); }
.pictogram-icons { font-size: 26px; letter-spacing: 2px; line-height: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.pictogram-icon-img { width: 26px; height: 26px; object-fit: contain; }
.data-table { border-collapse: collapse; margin: 0 auto; font-size: 14px; }
.data-table th, .data-table td { border: 2px solid #e7e0cc; padding: 8px 14px; text-align: center; }
.data-table th { background: #fafaf5; font-weight: 600; color: var(--navy); }
.data-table td.dt-blank { border-color: var(--ok-purple); color: var(--ok-purple); font-weight: 600; background: #f6f0ff; }
/* barChart — biểu đồ cột vẽ bằng SVG (viewBox tự co giãn theo chiều rộng khung chứa, không
bao giờ cần cuộn ngang/dọc), số liệu in thẳng trên đỉnh mỗi cột — xem hiện luôn, không cần
di chuột. */
.bar-chart-wrap { display: flex; justify-content: center; max-width: 100%; }
.bar-chart-svg { width: 100%; height: auto; display: block; }
/* barGraphBuild — khung minh họa tĩnh + lưới ô bấm để tự "vẽ" cột (chỉ luyện tập, không chấm
điểm qua tương tác này — xem ghi chú tại renderBarGraphBuild). */
.bar-graph-build-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 100%; }
.bgb-reference { border: 2px solid var(--navy); border-radius: 10px; padding: 12px; }
.bgb-ref-title { text-align: center; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.bgb-ref-row { display: flex; justify-content: space-around; gap: 6px; flex-wrap: wrap; }
.bgb-ref-person { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; }
.bgb-ref-name { font-size: 11px; font-weight: 600; color: var(--navy); }
.bgb-ref-face { font-size: 30px; line-height: 1; }
.bgb-ref-score { font-size: 15px; font-weight: 700; color: var(--ok-purple); }
.bgb-grid { display: flex; flex-direction: column; gap: 3px; padding-right: 4px; box-sizing: border-box; }
.bgb-row { display: flex; align-items: center; gap: 6px; }
.bgb-row-label { width: 56px; flex: 0 0 56px; font-size: 12px; font-weight: 600; color: var(--navy); text-align: right; }
.bgb-row-cells { display: flex; flex: 1; gap: 1px; min-width: 0; }
.bgb-cell { flex: 1; min-width: 0; aspect-ratio: 1; border: 1px solid #d8d2bd; background: #fff; cursor: pointer; padding: 0; border-radius: 1px; }
.bgb-cell:hover { background: #efe9ff; }
.bgb-cell.filled { background: var(--ok-purple); border-color: var(--ok-purple); }
.bgb-axis { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; }
.bgb-axis-spacer { width: 56px; flex: 0 0 56px; }
.bgb-axis-ticks { display: flex; flex: 1; justify-content: space-between; }
.bgb-axis-tick { font-size: 10px; font-weight: 600; color: var(--navy); }
.bgb-unit-label { display: flex; font-size: 12px; font-weight: 600; color: var(--navy); margin-top: 2px; }
/* spatial scene — trong/ngoài, trên/dưới, gần/xa */
.spatial-inout { position: relative; width: 200px; height: 140px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.spatial-inout .container-emoji { font-size: 100px; }
.spatial-inout .item-emoji { position: absolute; font-size: 42px; }
.spatial-inout .item-emoji.in { top: 62%; left: 50%; transform: translate(-50%, -50%); }
.spatial-inout .item-emoji.out { top: 50%; left: 92%; transform: translate(-50%, -50%); }
.spatial-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.spatial-stack-item { font-size: 36px; position: relative; }
.spatial-stack-item.highlight::after {
content: "◀"; position: absolute; left: calc(100% + 8px); top: 50%;
transform: translateY(-50%); color: var(--purple); font-size: 22px; font-weight: 600;
}
.spatial-neardist { display: flex; align-items: center; }
.spatial-ref-emoji { font-size: 50px; }
.spatial-item-emoji { font-size: 40px; }
/* pattern sequence — quy luật (lặp lại / thuộc tính / tăng-giảm / khoảng cách) */
.pattern-sequence { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.ps-item { display: flex; align-items: center; justify-content: center; min-width: 42px; min-height: 58px; }
.ps-item.has-label { flex-direction: column; gap: 6px; }
.ps-item-label { font-size: 13px; font-weight: 600; color: var(--navy); background: #f1ecff; padding: 3px 12px; border-radius: 10px; }
.ps-item-highlight { background: var(--yellow); border-radius: 14px; padding: 6px; }
.ps-item-highlight-red { background: var(--red); }
.ps-item-highlight-yellow { background: var(--yellow); }
.ps-item-highlight-green { background: var(--ok-green); }
.ps-item-highlight-blue { background: var(--ok-blue); }
.ps-emoji { line-height: 1; }
.ps-icon-group { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; }
.ps-text-sep { font-weight: 600; color: var(--navy); line-height: 1; padding: 0 2px; }
.ps-blank-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
border: 3px dashed var(--purple); color: var(--purple);
font-size: 24px; font-weight: 600; background: #fff;
}
/* hình học trừu tượng cho quy luật hình dạng/màu sắc/kích thước */
.ps-shape { flex: none; }
.ps-shape-circle, .ps-shape-oval { border-radius: 50%; }
.ps-shape-square, .ps-shape-rectangle { border-radius: 6px; }
.ps-shape-triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.ps-shape-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.ps-shape-pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
.ps-shape-hexagon { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.ps-shape-star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ps-color-yellow { background: var(--yellow); }
.ps-color-blue { background: var(--ok-blue); }
.ps-color-red { background: var(--red); }
.ps-color-green { background: var(--ok-green); }
.ps-color-pink { background: var(--ok-pink); }
.ps-color-purple { background: var(--ok-purple); }
.ps-color-orange { background: var(--ok-orange); }
.ps-color-navy, .ps-color-black { background: var(--navy); }
.ps-color-gray { background: var(--ok-gray); }
.ps-shape-nested { position: relative; }
.ps-chip {
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 800;
text-align: center;
line-height: 1.1;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}
/* spatial pair — 2 vật đặt tương đối (trái/phải, trên/dưới, trước/sau) */
.spatial-pair { position: relative; width: 220px; height: 140px; margin: 0 auto 28px; font-size: 56px; }
.sp-item { position: absolute; line-height: 1; text-align: center; }
.sp-item-label { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.sp-leftRight .sp-a { left: 10px; top: 50%; transform: translateY(-50%); }
.sp-leftRight .sp-b { right: 10px; top: 50%; transform: translateY(-50%); }
.sp-topBottom .sp-a { left: 50%; top: 0; transform: translateX(-50%); }
.sp-topBottom .sp-b { left: 50%; bottom: 0; transform: translateX(-50%); }
/* trước/sau: dùng CHỒNG LẤN thật (vật trước che 1 phần vật sau) làm tín hiệu chiều
sâu — cách cũ (trên/dưới + mờ đi) nhìn giống hệt trên/dưới, không rõ "trước/sau". */
.sp-frontBack .sp-a { left: 40%; bottom: 15px; transform: translateX(-50%); z-index: 2; }
.sp-frontBack .sp-b { left: 62%; bottom: 22px; transform: translateX(-50%); z-index: 1; }
.sp-middle .sp-a { left: 10px; top: 50%; transform: translateY(-50%); }
.sp-middle .sp-b { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.sp-middle .sp-c { right: 10px; top: 50%; transform: translateY(-50%); }
/* overlap shapes — hình chồng lấn trong suốt (đếm hình đan xen) */
.overlap-shapes { position: relative; margin: 0 auto; }
.ov-shape { position: absolute; opacity: 0.62; }
/* spatial grid — cảnh nhiều vật đặt tự do (câu suy luận không gian nâng cao) */
.spatial-grid { position: relative; margin: 0 auto; }
.sg-item { position: absolute; font-size: 40px; transform: translate(-50%, -50%); text-align: center; }
.sg-item.sg-small { font-size: 16px; }
.sg-item.sg-ref { filter: drop-shadow(0 0 0 var(--ok-purple)) drop-shadow(0 0 6px var(--ok-purple)); }
.sg-item-label { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.sg-item.sg-text { font-size: 14px; font-weight: 600; color: var(--gray-text); background: #fff; padding: 2px 8px; border-radius: 8px; border: 1px solid #e5e5e5; }
.spatial-grid-row { display: flex; align-items: flex-end; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 10px 0; }
.sg-row-item { display: flex; flex-direction: column; align-items: center; font-size: 40px; }
.sg-row-item.sg-small { font-size: 16px; }
.sg-row-item.sg-ref { filter: drop-shadow(0 0 0 var(--ok-purple)) drop-shadow(0 0 6px var(--ok-purple)); }
.sg-row-item.sg-text { font-size: 14px; font-weight: 600; color: var(--gray-text); background: #fff; padding: 2px 8px; border-radius: 8px; border: 1px solid #e5e5e5; align-self: center; }
/* base-ten blocks — khối chục-đơn vị (Khối 1, cấu tạo số) */
.base-ten-blocks { display: flex; align-items: flex-end; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 10px 0; }
.btb-group { display: flex; align-items: flex-end; gap: 6px; }
.btb-ten { display: flex; flex-direction: column; }
.btb-cell { width: 22px; height: 22px; background: var(--ok-blue-light, #cfe8ff); border: 1.5px solid var(--navy); box-sizing: border-box; }
.btb-ten .btb-cell + .btb-cell { border-top: none; }
.btb-ones-group { gap: 5px; align-items: center; }
.btb-cell.btb-one { background: #ffe9a8; }
/* "trăm" (hundred flat) — lưới 10x10 ô nhỏ, to hơn hẳn 1 cột chục để lộ rõ tỉ lệ 100 = 10
chục (Khối 2 trở lên, phạm vi 1000). */
.btb-hundreds-group { gap: 8px; flex-wrap: wrap; justify-content: center; }
.btb-hundred { display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px; width: 160px; }
.btb-hcell { width: 100%; aspect-ratio: 1; background: #e3d4f7; border: 1px solid var(--navy); box-sizing: border-box; }
/* nhiều số đặt cạnh nhau (so sánh) — mỗi ô nhỏ hơn 1 chút để 4 số vẫn vừa 1 hàng */
.btb-multi { display: flex; align-items: flex-end; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 10px 0; }
.btb-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.btb-item .base-ten-blocks { padding: 0; gap: 10px; }
.btb-item .btb-cell { width: 16px; height: 16px; }
.btb-item .btb-hundred { width: 160px; }
.btb-item-label { font-size: 13px; font-weight: 600; color: var(--navy); background: #f1ecff; padding: 3px 12px; border-radius: 10px; }
/* "phương trình khối" — khối 1 [+/-] khối 2 [= ?], dùng cho câu cộng/trừ có nhớ minh
họa bằng khối chục-đơn vị (xem renderBaseTenBlocks, visual.operator). */
.btb-equation { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 10px 0; }
.btb-op { font-size: 32px; font-weight: 600; color: var(--navy); }
.btb-result {
width: 60px; height: 60px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
font-size: 26px; font-weight: 600; color: var(--purple); background: #fff; border: 3px dashed var(--purple);
}
.btb-removed { opacity: 0.4; position: relative; }
.btb-removed::after {
content: "";
position: absolute;
left: -6px; right: -6px; top: 50%;
height: 3px;
background: var(--red);
transform: rotate(-18deg);
}
/* hundred chart — bảng số 1-100, tô màu để lộ quy luật (chẵn/lẻ, cột tròn chục...) */
.hundred-chart { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 380px; margin: 0 auto; }
.hc-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; border: 1px solid #e2e2e2; border-radius: 4px; background: #fafafa; color: var(--navy); }
.hc-cell.hc-highlight { background: var(--ok-purple); color: #fff; font-weight: 600; }
.hc-cell.hc-circled { border: 3px solid var(--red); font-weight: 600; background: #fff; }
/* number line — trục số ngang, đánh dấu 1 điểm nổi bật. width bắt buộc phải khai rõ: các
.nl-tick con đều position:absolute (không đóng góp kích thước cho cha), nên nếu không có
width tường minh thì .number-line co về đúng 0px, mọi tick left:X% đều dồn về cùng 1 điểm. */
.number-line { position: relative; width: 100%; max-width: 420px; height: 60px; margin: 30px auto 0; }
.nl-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--navy); border-radius: 2px; }
.nl-tick { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.nl-tick-mark { width: 2px; height: 12px; background: var(--navy); }
.nl-tick-label { margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--navy); }
.nl-tick.nl-point .nl-tick-mark { width: 4px; height: 16px; background: var(--ok-purple); }
.nl-tick.nl-point .nl-tick-label {
color: #fff; background: var(--ok-purple); font-weight: 600; padding: 2px 8px; border-radius: 8px;
}
/* vòng cung bước nhảy cộng/trừ trên trục số — dựng bằng border-radius, không cần SVG.
.has-jump chừa thêm khoảng trống phía trên bar cho vòng cung + nhãn. */
.number-line.has-jump { margin-top: 56px; }
/* Ô trống + mũi tên chỉ xuống vạch (dạng "điền số vào ô trên trục số") — khớp đúng bố cục
sách gốc: khung chữ nhật rỗng phía trên, mũi tên nối xuống đúng vạch cần điền. .has-blanks
chừa thêm khoảng trống phía trên bar cho khung + mũi tên (không cần nếu đã có .has-jump). */
.number-line.has-blanks { margin-top: 56px; }
.nl-tick.nl-blank { top: -40px; }
.nl-blank-box { width: 46px; height: 24px; border: 2px solid var(--navy); border-radius: 6px; background: #fff; }
.nl-blank-arrow { font-size: 13px; line-height: 1; color: var(--red, #ef5350); margin: 1px 0; }
.nl-jump { position: absolute; top: -26px; height: 26px; border-top: 3px solid var(--ok-orange); border-radius: 50% 50% 0 0; }
.nl-jump-label {
position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
font-size: 13px; font-weight: 600; color: var(--ok-orange); white-space: nowrap;
}
.cube-row { display: flex; gap: 3px; }
.cube-block { width: 34px; height: 34px; border-radius: 5px; border: 2px solid rgba(0, 0, 0, 0.25); }
/* lưới độ cao khối lập phương — floor-plan nhìn từ trên xuống, mỗi ô 1 cột nhỏ + số tầng */
.cube-grid { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.cg-row { display: flex; gap: 4px; }
.cg-cell {
display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start;
width: 48px; height: 90px; border: 2px solid #d8d0b8; border-radius: 8px; background: #fdfaf1; padding: 4px;
box-sizing: border-box;
}
.cg-stack { width: 100%; background: var(--teal-mid); border-radius: 4px; min-height: 4px; }
.cg-count { font-size: 16px; font-weight: 600; color: var(--navy); margin-top: 4px; }
/* composite shape — ghép 2-3 hình phẳng thành 1 bức tranh (nhà, cá...) */
.composite-shape { position: relative; margin: 0 auto; }
.cs-part { position: absolute; }
/* cột khối xếp chồng — quy luật tăng dần trực quan */
.ps-stack { display: flex; flex-direction: column-reverse; gap: 3px; }
.ps-block { border-radius: 4px; }
/* lưới ô tô màu — quy luật giảm dần trực quan, VÀ ma trận Raven's (pattern theo đúng vị
trí, xem PATTERN item kind "grid"). Vẽ như 1 lưới kẻ ô thật (viền mảnh liền nhau, ô sát
nhau) thay vì các ô bo tròn có khoảng cách — nhìn giống bài trắc nghiệm IQ thật hơn và dễ
đọc quy luật vị trí hơn hẳn so với kiểu "chip" rời rạc trước đây. */
.ps-grid { display: grid; gap: 0; border: 1.5px solid #cfc7ac; border-radius: 4px; overflow: hidden; }
.ps-cell { background: #fff; border: 1px solid #e2dcc8; box-sizing: border-box; }
.ps-cell-dotwrap { display: flex; align-items: center; justify-content: center; }
.ps-cell-dot { width: 55%; height: 55%; border-radius: 50%; }
.ps-cell.filled { background: var(--ok-blue); }
.ps-cell.filled.ps-color-yellow { background: var(--yellow); }
.ps-cell.filled.ps-color-red { background: var(--red); }
.ps-cell.filled.ps-color-green { background: var(--ok-green); }
.ps-cell.filled.ps-color-pink { background: var(--ok-pink); }
.ps-cell.filled.ps-color-purple { background: var(--ok-purple); }
.ps-cell.filled.ps-color-orange { background: var(--ok-orange); }
/* khối chục-đơn vị thu nhỏ (choice icon "tens") — minh họa số nguyên trong đáp án
dạng số thuần (VD số nào tròn chục trong 17/24/45/30) */
.ps-tens-mini { display: flex; align-items: flex-end; justify-content: center; }
.ps-tens-group { display: flex; align-items: flex-end; }
.ps-tens-col { display: flex; flex-direction: column; }
.ps-tens-cell { background: var(--ok-blue-light, #cfe8ff); border: 1px solid var(--navy); box-sizing: border-box; }
.ps-tens-col .ps-tens-cell + .ps-tens-cell { border-top: none; }
.ps-tens-ones { display: flex; flex-wrap: wrap; align-content: flex-end; max-width: 42px; }
.ps-tens-one { background: #ffe9a8; }
/* lưới ma trận 3x3 kiểu Raven's — ô có nội dung (lưới/hình) không cần khung riêng, bản thân
nội dung (đã kẻ lưới/vẽ hình rõ ràng) đủ để phân biệt 9 ô mà không cần viền thừa. Chỉ ô "?"
giữ khung nét đứt vì nó KHÔNG có nội dung riêng để tự phân biệt — cần viền để báo "đây là ô
trống cần điền". */
.matrix-grid { display: grid; gap: 14px; justify-items: center; align-items: center; margin: 0 auto; width: fit-content; }
.mx-cell {
width: 112px; height: 112px; display: flex; align-items: center; justify-content: center;
}
.mx-blank {
border: 2.5px dashed var(--ok-purple); border-radius: 10px; color: var(--ok-purple);
font-size: 34px; font-weight: 600; background: #fff; box-sizing: border-box;
}
/* Khớp ngưỡng "window.innerWidth < 480" ở renderMatrixGrid (exam-take.js) — co khung NGOÀI
cùng lúc JS chọn size NỘI DUNG nhỏ hơn, để 3 cột luôn vừa màn hình điện thoại (112px x3 +
khoảng cách sẽ tràn ngang trên màn hẹp nếu chỉ co 1 bên). */
@media (max-width: 480px) {
.matrix-grid { gap: 8px; }
.mx-cell, .mx-blank { width: 84px; height: 84px; }
.mx-blank { font-size: 26px; }
}
/* Sudoku mini — lưới liền khối (gap:0, viền mỏng mỗi ô) khác hẳn matrix-grid (gap rời từng ô)
vì Sudoku cần nhìn rõ ranh giới KHỐI (đường viền đậm) lồng trong ranh giới Ô (đường viền
mỏng) — 2 cấp viền khác độ đậm mới đúng dáng Sudoku thật, không thể dùng "gap" để phân biệt
được cả 2 cấp cùng lúc. */
/* Kích thước ô lấy từ biến CSS (đặt inline theo "size" lưới ở exam-take.js) thay vì cố định
56px — lưới 10x10 (100 ô) cần ô nhỏ hơn HẲN lưới 4x4/5x5 mới vừa màn hình điện thoại, co
theo % màn hình sẽ không đủ (10 ô x 44px vẫn tràn ngang điện thoại hẹp <400px) — phải co
theo CHÍNH "size" của lưới, không chỉ theo bề rộng màn hình như matrix-grid. */
/* "max-width:100%" KHÔNG đủ — mọi tổ tiên giữa .sudoku-wrap và .ok-take-page đều tự co theo
NỘI DUNG con (không có width cố định riêng), nên "100%" cứ lan truyền theo kích thước ô đã
phóng to thay vì bị chặn lại ở khung nhìn thật — hậu quả là .ok-take-page (overflow-x:
hidden, KHÔNG có thanh cuộn) cắt cụt phần lưới vượt quá, ẩn mất chứ không cho cuộn thấy.
Dùng "100vw - lề" buộc chặn NGAY TẠI ĐÂY theo khung nhìn thật, không phụ thuộc tổ tiên. */
.sudoku-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100vw - 120px); overflow-x: auto; }
.sudoku-grid {
display: grid; border: 3px solid var(--navy); border-radius: 8px; overflow: hidden;
width: fit-content; margin: 0 auto; background: var(--navy);
}
.sudoku-cell {
width: var(--sudoku-cell, 112px); height: var(--sudoku-cell, 112px);
display: flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid #d8dee8; box-sizing: border-box;
font-size: var(--sudoku-font, 48px); font-weight: 700; color: var(--navy);
}
.sudoku-border-right { border-right: 3px solid var(--navy); }
.sudoku-border-bottom { border-bottom: 3px solid var(--navy); }
.sudoku-given { background: #f4f6fb; }
.sudoku-input {
width: 100%; height: 100%; border: none; outline: none; text-align: center;
font-size: var(--sudoku-font, 48px); font-weight: 700; color: var(--ok-purple); background: transparent;
font-family: inherit;
}
.sudoku-input:focus { background: #fff3cf; }
.sudoku-blank-wrap.sudoku-correct { background: #e3f9ec; color: var(--ok-green); }
.sudoku-blank-wrap.sudoku-wrong { background: #fdeaea; color: var(--red); }
.sudoku-blank-wrap.sudoku-missed { background: #fff8e6; color: var(--ok-orange); }
.sudoku-correct-hint { display: block; font-size: 12px; font-weight: 600; color: var(--ok-green); }
@media (max-width: 480px) {
.sudoku-cell { width: var(--sudoku-cell-sm, 88px); height: var(--sudoku-cell-sm, 88px); font-size: var(--sudoku-font-sm, 38px); }
.sudoku-input { font-size: var(--sudoku-font-sm, 38px); }
}
/* circle badge — 1 vòng tròn số mục tiêu đứng riêng, dùng cho câu "chọn đáp án đúng bằng
số này" (bố cục sách: vòng tròn + các ô chữ nhật phép tính = 4 lựa chọn trắc nghiệm). */
.circle-badge {
width: 84px; height: 84px; border-radius: 50%; margin: 0 auto;
display: flex; align-items: center; justify-content: center;
font-size: 34px; font-weight: 700; color: var(--navy);
background: #fff3d6; border: 3px solid var(--navy);
}
/* number bond — sơ đồ tách-gộp số */
.number-bond {
position: relative;
width: 220px;
height: 150px;
margin: 0 auto;
}
.nb-circle {
position: absolute;
width: 60px; height: 60px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 600;
color: var(--navy);
background: #fff3d6;
border: 3px solid var(--navy);
z-index: 2;
}
.nb-circle.blank {
background: #fff;
border-style: dashed;
border-color: var(--purple);
color: var(--purple);
}
.nb-whole { top: 0; left: 50%; transform: translateX(-50%); }
.nb-line {
position: absolute;
top: 30px; left: 110px;
width: 3px; height: 100px;
background: #2b2b2b;
transform-origin: top center;
z-index: 1;
}
.nb-line.left { transform: rotate(-35deg); }
.nb-line.right { transform: rotate(35deg); }
.nb-parts {
position: absolute;
top: 90px; left: 0; right: 0;
display: flex; justify-content: space-between; padding: 0 10px;
}
.nb-part.nb-circle { background: #e6f7ff; border-color: var(--teal-mid); position: static; }
/* nhiều sơ đồ tách-gộp đặt cạnh nhau (VD "Hình 1-4", tìm sơ đồ đúng) — thu nhỏ bằng
transform:scale, bù lại khoảng trống layout còn lại bằng margin-bottom âm vì transform
không co kích thước box trong luồng. */
.nb-multi { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 10px 0; }
.nb-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nb-item .number-bond { transform: scale(0.6); transform-origin: top center; margin-bottom: -60px; }
.nb-item-label { font-size: 13px; font-weight: 600; color: var(--navy); }
/* fact family — tam giác "bộ 3 số liên quan" (Mỹ): đỉnh trên = tổng, 2 đỉnh dưới = 2 số
hạng. Cùng dữ liệu whole/parts với number bond nhưng vẽ dạng tam giác thay vì vòng tròn
nối đường chéo — hình tượng quen thuộc hơn ở chương trình Âu-Mỹ cho phần "tìm ẩn số". */
.fact-family { position: relative; width: 220px; height: 170px; margin: 0 auto; }
.ff-triangle {
position: absolute; left: 20px; right: 20px; top: 20px; bottom: 10px;
background: #fff3d6;
border: 3px solid var(--navy);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.ff-circle {
position: absolute; width: 60px; height: 60px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 600; color: var(--navy);
background: #fff; border: 3px solid var(--navy); z-index: 2;
}
.ff-circle.blank { background: #fff; border-style: dashed; border-color: var(--purple); color: var(--purple); }
.ff-top { top: -10px; left: 50%; transform: translateX(-50%); }
.ff-left { bottom: -10px; left: 0; }
.ff-right { bottom: -10px; right: 0; }
/* tam giác nhân/chia — đổi màu + thêm huy hiệu "× ÷" để phân biệt với tam giác cộng/trừ
(cùng hình dạng nhưng khác bộ phép tính, xem renderFactFamily visual.opFamily). */
.ff-mul .ff-triangle { background: #d4f5e0; }
.ff-badge {
position: absolute; left: 50%; top: 92px; transform: translateX(-50%);
font-size: 15px; font-weight: 600; color: var(--teal-mid, #1f9d7c);
background: #fff; padding: 1px 8px; border-radius: 8px; border: 2px solid var(--teal-mid, #1f9d7c);
z-index: 3;
}
/* mảng hàng-cột (array) — dạy bản chất phép nhân, bé tự đếm hàng × cột. Nhãn số lượng mỗi
cột (nếu có, xem renderArray visual.showColumnTotals) nằm chung grid này nên luôn thẳng
hàng đúng cột phía trên. */
.array-grid { display: grid; gap: 8px; width: fit-content; padding: 10px 0; margin: 0 auto; }
.array-cell { font-size: 30px; line-height: 1; text-align: center; }
.array-icon-img { width: 30px; height: 30px; object-fit: contain; vertical-align: middle; }
.array-col-label { font-size: 14px; font-weight: 600; color: var(--purple); text-align: center; }
/* dàn tự do (không lưới cố định) — dùng cho câu chia, xem renderArray visual.wrap */
.array-wrap { display: flex; flex-wrap: wrap; gap: 8px; max-width: 340px; justify-content: center; margin: 0 auto; padding: 10px 0; }
/* sơ đồ đoạn thẳng (segment bar) — đường thẳng có vạch chia đơn vị, kiểu vẽ tay SGK VN */
/* align-items: flex-start (không phải center) — nhãn có bề rộng cố định (.sb-label) nên mọi
thanh luôn bắt đầu cùng 1 điểm x nếu neo trái cả nhóm; canh giữa từng dòng sẽ làm điểm bắt
đầu lệch nhau theo độ dài riêng của từng thanh, mất tác dụng so sánh trực quan. */
.segment-bar-group { display: flex; flex-direction: column; gap: 20px; padding: 16px 0; align-items: flex-start; width: fit-content; margin: 0 auto; }
.sb-row { display: flex; align-items: center; gap: 12px; }
.sb-label { font-size: 14px; font-weight: 600; color: var(--navy); width: 150px; flex-shrink: 0; white-space: nowrap; text-align: right; }
.sb-track { position: relative; height: 3px; background: var(--navy); border-radius: 2px; }
.sb-tick { position: absolute; top: -7px; width: 2px; height: 16px; background: var(--navy); }
/* nhãn số trên mỗi thanh — số thật (dữ kiện đã biết) hoặc "?" (ẩn số cần tìm) */
.sb-value { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.sb-value.sb-unknown { color: var(--purple); font-size: 16px; }
/* đoạn "hơn/kém" nối thêm vào cuối thanh gốc — gạch dưới màu cam + nhãn riêng, tách biệt
hẳn khỏi thanh gốc để bé thấy rõ "đây là phần chênh lệch" (xem renderSegmentBar bar.extend) */
.sb-extend { position: absolute; top: 100%; margin-top: 8px; height: 3px; background: var(--orange, #e8813a); border-radius: 2px; }
.sb-extend-value { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--orange, #e8813a); white-space: nowrap; }
.sb-extend-value.sb-unknown { color: var(--purple); font-size: 14px; }
/* ngoặc "]" bên phải ôm hết chiều cao các thanh — ghi tổng của tất cả thanh cộng lại (bài
toán tổng-hiệu), xem renderSegmentBar visual.totalBrace */
.segment-bar-group.sb-has-brace { position: relative; padding-right: 90px; }
.sb-total-brace {
position: absolute; top: 4px; bottom: 4px; width: 14px;
border-top: 3px solid var(--navy); border-right: 3px solid var(--navy); border-bottom: 3px solid var(--navy);
border-top-right-radius: 8px; border-bottom-right-radius: 8px;
}
.sb-total-brace-value { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.sb-total-brace-value.sb-unknown { color: var(--purple); font-size: 17px; }
/* hình chia phần bằng nhau — chữ nhật chia N ô dọc, ô đầu tô màu (xem renderShapeFraction) */
.shape-fraction {
display: flex; width: 280px; height: 80px; margin: 20px auto; border: 3px solid var(--navy);
border-radius: 10px; overflow: hidden;
}
.sf-cell { flex: 1; border-right: 2px solid var(--navy); background: #fff; }
.sf-cell:last-child { border-right: none; }
.sf-cell.filled { background: var(--purple); }
.shape-fraction-group { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: flex-start; }
.sf-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sf-item .shape-fraction { width: 180px; height: 60px; margin: 0; }
.sf-item .shape-fraction-svg { width: 100px; height: 100px; margin: 0 auto; display: block; }
.sf-item-label { font-size: 20px; font-weight: 600; color: var(--navy); }
/* Lưới 2D + hình ghép tùy ý (grid/custom mode của shapeFraction) */
.shape-fraction.sf-grid { display: grid; height: auto; aspect-ratio: unset; }
.shape-fraction.sf-grid .sf-grid-cell { aspect-ratio: 1; border: 2px solid var(--navy); border-radius: 0; }
.shape-fraction.sf-custom { display: grid; width: 220px; height: 150px; border: none; gap: 2px; background: transparent; }
.sf-custom-cell { border: 2px solid var(--navy); background: #fff; border-radius: 4px; }
.sf-custom-cell.filled { background: var(--purple); }
/* Hình quạt tròn/tam giác/lục giác (circle/triangle/hexagon mode) — SVG, tô theo wedge. */
.shape-fraction-svg { width: 120px; height: 120px; display: block; margin: 20px auto; }
.sf-wedge { fill: #fff; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; }
.sf-wedge.filled { fill: var(--purple); }
/* "máy tính số" — chuỗi ô số nối mũi tên qua các phép tính, dùng cho toán tính ngược */
.operation-chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 20px auto; }
.oc-box {
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px; border-radius: 14px; border: 3px solid var(--navy);
font-size: 26px; font-weight: 600; color: var(--navy); background: #fff;
}
.oc-box.oc-unknown { border-style: dashed; border-color: var(--purple); color: var(--purple); }
.oc-op {
display: inline-flex; align-items: center; justify-content: center;
padding: 10px 16px; border-radius: 10px; background: #fff3d6; border: 2px solid var(--navy);
font-size: 20px; font-weight: 600; color: var(--navy);
}
.oc-arrow { font-size: 24px; font-weight: 600; color: var(--navy); }
/* chuỗi phép tính bằng hình tượng (VD: 🍎+🍎+🍎=18) — mỗi phép tính 1 hàng riêng để dễ đọc,
ẩn số cuối cùng hiện bằng khối "?" bo tròn thay vì nằm lẫn trong câu chữ. */
.icon-eq-rows { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; margin: 10px auto; width: fit-content; max-width: 100%; }
.icon-eq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.icon-eq-icon { width: 36px; height: 36px; object-fit: contain; }
.icon-eq-op { font-size: 22px; font-weight: 600; color: var(--navy); }
.icon-eq-val {
display: inline-flex; align-items: center; justify-content: center;
min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px;
background: #fff3d6; border: 2px solid var(--navy); font-size: 20px; font-weight: 600; color: var(--navy);
}
.icon-eq-unknown {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
border: 3px dashed var(--purple); color: var(--purple); font-size: 20px; font-weight: 600; background: #fff;
}
/* cái cân — mặt hiển thị số đọc "value unit", dùng cho bài đo khối lượng */
.scale-reading-group { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: flex-end; }
.scale-reading-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sr-label { font-size: 16px; font-weight: 600; color: var(--navy); }
.sr-dial {
display: flex; flex-direction: column; align-items: center; gap: 4px;
width: 130px; padding: 16px 10px; border-radius: 14px; border: 3px solid var(--navy); background: #fff;
}
.sr-icon { width: 44px; height: 44px; object-fit: contain; }
.sr-value { font-size: 20px; font-weight: 600; color: var(--navy); background: #fff3d6; border-radius: 8px; padding: 4px 10px; }
/* bình đo dung tích — cột nước tô màu tới mức "value", có số đọc cạnh mực nước */
.container-reading-group { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; align-items: flex-end; }
.container-reading-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cr-label { font-size: 16px; font-weight: 600; color: var(--navy); }
.cr-jug {
position: relative; width: 70px; height: 140px; border: 3px solid var(--navy); border-top: none;
border-radius: 0 0 10px 10px; background: #f4f8ff; overflow: hidden;
}
.cr-fill { position: absolute; bottom: 0; left: 0; right: 0; background: var(--teal-mid); display: flex; align-items: flex-start; justify-content: center; }
.cr-value {
position: absolute; top: -30px; left: 50%; transform: translateX(-50%); white-space: nowrap;
font-size: 16px; font-weight: 600; color: var(--navy); background: #fff3d6; border-radius: 8px; padding: 3px 8px;
border: 2px solid var(--navy);
}
/* containerReading mode="compare" — chỉ vẽ mực nước, không số/vạch chia (so sánh more/less) */
.cr-jug-compare { margin-top: 4px; }
/* containerReading mode="scale" — vạch chia có số, không in số value đè lên cột nước */
.container-reading-group-scale { gap: 44px; }
.cr-jug-scale { position: relative; margin-left: 26px; }
.cr-tick { position: absolute; left: -26px; right: 0; height: 0; border-top: 2px solid var(--navy); opacity: 0.55; }
.cr-tick-label { position: absolute; left: -24px; top: -9px; font-size: 12px; font-weight: 600; color: var(--navy); background: #fff; padding: 0 2px; }
.cr-unit { font-size: 14px; font-weight: 600; color: var(--navy); }
/* lineArtFigure / solidShape (K2 Unit16) — canh giữa, giới hạn chiều rộng để không tràn mobile */
.line-art-figure, .solid-shape { display: block; margin: 0 auto; max-width: 100%; height: auto; }
/* containerReading mode="units" — 1 bình lớn + hàng ly nhỏ biểu thị dung tích quy đổi */
.container-units-group { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: flex-start; }
.container-units-item { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 160px; }
.cr-jug-units { width: 56px; height: 70px; }
.cr-units-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.cr-unit-glass { display: inline-block; width: 14px; height: 18px; border: 2px solid var(--navy); border-top: none; border-radius: 0 0 4px 4px; background: var(--teal-mid); }
/* "phương trình sơ đồ" — sơ đồ 1 [+/-] sơ đồ 2 [= sơ đồ trống] (xem renderNumberBond,
visual.operator/showResult) — kết quả tự vẽ bằng renderOne(null,[null,null]) nên không
cần class riêng, chỉ cần dấu phép tính. */
.nb-op { font-size: 32px; font-weight: 600; color: var(--navy); }
/* hàng icon "whole" phía trên sơ đồ tách-gộp — cầu nối pictorial (số lượng thật) với
abstract (sơ đồ số), dùng cho tầng dễ nhất mỗi chuyên đề tách-gộp. */
.nb-icon-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 240px; margin: 0 auto 12px; font-size: 26px; }
.nb-icon-img { width: 26px; height: 26px; object-fit: contain; }
/* Nhãn trước mỗi hàng icon khi "iconRows" tách whole thành 2 nhóm khác loại/màu (VD "Xanh:",
"Trắng:") — chỉ hiện khi có nhiều hàng, giúp bé biết đang đếm nhóm nào. */
.nb-icon-row-label { font-size: 13px; font-weight: 700; color: var(--gray-text); margin-right: 4px; }
/* object math — phép tính tượng hình (VD: 3 quả cam + 2 quả cam = ?) */
.object-math {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
font-size: 36px;
flex-wrap: wrap;
}
.om-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
max-width: 300px;
}
.om-op { font-size: 32px; font-weight: 600; color: var(--navy); }
.om-removed { opacity: 0.35; position: relative; }
.om-removed::after {
content: "";
position: absolute;
left: -4px; right: -4px; top: 50%;
height: 3px;
background: var(--red);
transform: rotate(-20deg);
}
/* compare groups — so sánh số lượng 2 nhóm đối tượng */
.compare-groups {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
font-size: 34px;
flex-wrap: wrap;
}
.cg-group {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
max-width: 220px;
padding: 10px;
border-radius: 14px;
background: #f7f3e6;
}
.cg-divider { width: 2px; align-self: stretch; min-height: 60px; background: #e7e0cc; }
.cg-blank {
width: 56px; height: 56px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border: 3px dashed var(--ok-purple); border-radius: 10px;
font-size: 28px; font-weight: 600; color: var(--ok-purple);
background: #fff;
}
/* emoji grid */
.emoji-grid-icon { width: 40px; height: 40px; object-fit: contain; vertical-align: middle; }
.emoji-grid {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
font-size: 40px;
}
/* ---------- Choices ---------- */
.choices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 20px;
}
.choice-btn {
background: #fff;
border: 2px solid #e7e0cc;
border-radius: var(--radius-md);
padding: 18px 12px;
font-size: 20px;
font-weight: 600;
color: var(--navy);
cursor: pointer;
box-shadow: 0 3px 0 #e7e0cc;
transition: transform 0.06s ease;
}
.choice-btn:hover { border-color: var(--teal-mid); }
.choice-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #e7e0cc; }
.choice-btn.selected {
background: #e6f7ff;
border-color: var(--teal-mid);
box-shadow: 0 3px 0 var(--teal-mid);
}
.choice-btn.correct {
background: #e8f9ef;
border-color: var(--green);
box-shadow: 0 3px 0 var(--green);
color: #1c7a44;
}
.choice-btn.incorrect {
background: #fdecea;
border-color: var(--red);
box-shadow: 0 3px 0 var(--red);
color: #b4302c;
}
/* ---------- Nav footer ---------- */
.nav-row { display: flex; gap: 14px; }
.btn-prev {
background: #fff;
border: 2px solid #e7e0cc;
color: var(--navy);
font-weight: 600;
border-radius: 12px;
padding: 14px 22px;
cursor: pointer;
}
.btn-next {
flex: 1;
background: var(--navy);
color: #fff;
border: none;
font-weight: 600;
font-size: 15px;
border-radius: 12px;
padding: 14px 22px;
cursor: pointer;
}
.btn-next:hover { background: var(--navy-dark); }
.btn-prev:disabled, .btn-next:disabled { opacity: 0.4; cursor: not-allowed; }
/* ---------- Question palette drawer ---------- */
.drawer-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.4);
display: none; align-items: flex-start; justify-content: flex-end;
z-index: 50;
}
.drawer-overlay.open { display: flex; }
.drawer {
background: #fff; width: 300px; max-width: 90vw; height: 100%;
padding: 20px; overflow-y: auto;
box-shadow: -6px 0 20px rgba(0,0,0,0.2);
}
.drawer h3 { margin: 0 0 14px; font-size: 15px; color: var(--navy); }
.drawer-close {
float: right; border: none; background: none; font-size: 20px; cursor: pointer; color: var(--gray-text);
}
.palette-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.palette-item {
border: 2px solid #e7e0cc; background: #fff; border-radius: 8px;
padding: 10px 0; font-weight: 600; cursor: pointer; color: var(--navy);
}
.palette-item.answered { background: #e6f7ff; border-color: var(--teal-mid); }
.palette-item.current { border-color: var(--purple); box-shadow: 0 0 0 2px var(--purple) inset; }
/* ---------- Modal (custom confirm, no native alert/confirm) ---------- */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.45);
display: none; align-items: center; justify-content: center; z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal-box {
background: #fff; border-radius: var(--radius-md); padding: 26px 28px;
max-width: 340px; text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,0.25);
animation: ok-modal-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ok-modal-pop {
from { transform: scale(0.85); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.modal-box p { font-size: 15px; color: var(--navy); margin: 0 0 20px; line-height: 1.5; }
.modal-actions { display: flex; gap: 12px; justify-content: center; }
.modal-actions button {
border: none; border-radius: 10px; padding: 10px 18px; font-weight: 600; cursor: pointer; font-size: 14px;
}
.modal-actions .btn-cancel { background: #eee; color: var(--navy); }
.modal-actions .btn-confirm { background: var(--yellow); color: var(--navy-dark); }
/* Popup thông báo flash (TempData Success/Info/Error) — tái dùng khung modal-overlay/modal-box
ở trên thay vì thanh banner nằm phẳng trên trang, dễ bị bỏ lỡ. */
.ok-flash-modal { max-width: 380px; padding: 30px 28px 24px; }
.ok-flash-modal-icon {
width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.ok-flash-modal.success .ok-flash-modal-icon { background: #e8f9ef; }
.ok-flash-modal.info .ok-flash-modal-icon { background: #e6f7ff; }
.ok-flash-modal.error .ok-flash-modal-icon { background: #fdecea; }
.ok-flash-modal-icon img { width: 46px; height: 46px; object-fit: contain; }
.ok-flash-modal p { font-size: 15px; font-weight: 600; }
/* ---------- Home page ---------- */
.home-title { color: var(--navy); text-align: center; margin: 10px 0 26px; }
.home-title h1 { font-size: 26px; margin: 0 0 6px; }
.home-title p { margin: 0; opacity: 0.75; font-size: 14px; }
.exam-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 18px;
}
.exam-card {
background: var(--cream);
border-radius: var(--radius-lg);
padding: 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
display: flex; flex-direction: column; gap: 10px;
}
.exam-card .icon { font-size: 34px; }
.exam-card h3 { margin: 0; font-size: 17px; color: var(--navy); }
.exam-card .meta { font-size: 12px; color: var(--gray-text); }
.exam-card .stats { font-size: 12px; color: var(--gray-text); display: flex; gap: 14px; }
.exam-card .start-btn {
margin-top: 8px;
background: var(--navy);
color: #fff;
border: none;
border-radius: 10px;
padding: 10px;
font-weight: 600;
cursor: pointer;
}
.exam-card .start-btn:hover { background: var(--navy-dark); }
.exam-card .best-score { font-size: 12px; color: var(--green); font-weight: 600; }
.empty-state {
color: var(--navy); text-align: center; padding: 40px 20px; opacity: 0.75;
}
/* ---------- Result page ---------- */
.result-summary {
text-align: center; padding: 10px 0 24px;
}
.result-summary .score-circle {
width: 120px; height: 120px; border-radius: 50%;
background: #fff; margin: 0 auto 14px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.result-summary .score-circle b { font-size: 30px; color: var(--navy); }
.result-summary .score-circle span { font-size: 12px; color: var(--gray-text); }
.result-summary h2 { color: var(--navy); margin: 0 0 4px; }
.result-summary p { color: var(--navy); opacity: 0.8; margin: 0; }
.review-item {
background: #fff; border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 12px;
border-left: 6px solid var(--green);
}
.review-item.wrong { border-left-color: var(--red); }
.review-item .q-title { font-weight: 600; margin-bottom: 6px; }
.review-item .answers { font-size: 13px; color: var(--gray-text); }
.review-item .answers b.you-correct { color: var(--green); }
.review-item .answers b.you-wrong { color: var(--red); }
.result-actions { display: flex; gap: 14px; margin-top: 20px; }
.result-actions button, .result-actions a {
flex: 1; display: block; border: none; border-radius: 12px; padding: 14px; font-weight: 600; cursor: pointer; font-size: 14px;
text-decoration: none; text-align: center;
}
.result-actions .retake {
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff;
box-shadow: 0 4px 0 var(--ok-purple-dark);
}
.result-actions .home {
background: linear-gradient(160deg, var(--navy), var(--navy-dark)); color: #fff;
box-shadow: 0 4px 0 var(--navy-dark);
}
@media (max-width: 520px) {
.choices { grid-template-columns: 1fr; }
.app-header .brand h1 { font-size: 16px; }
.scale-beam-wrap { width: 220px; height: 84px; }
.scale-beam { width: 190px; bottom: 22px; }
.scale-items { width: 88px; font-size: 20px; bottom: 28px; }
.scale-items.up { bottom: 36px; }
.scale-items.down { bottom: 18px; }
}
/* ---------- Site topnav (real app shell) ---------- */
a { color: inherit; text-decoration: none; }
.topnav {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 22px;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(2px);
}
.topnav .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 17px; }
.topnav .nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topnav .nav-links a {
color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px;
border-radius: 10px; background: rgba(255,255,255,0.12);
}
.topnav .nav-links a:hover, .topnav .nav-links a.active { background: rgba(255,255,255,0.3); }
.topnav .right { display: flex; align-items: center; gap: 10px; }
.topnav .child-badge {
background: #fff; color: var(--navy); font-weight: 600; font-size: 12px;
padding: 8px 12px; border-radius: 10px; display: flex; align-items: center; gap: 6px;
}
.topnav .btn-ghost {
color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px;
border-radius: 10px; border: 2px solid rgba(255,255,255,0.5); background: transparent;
cursor: pointer;
}
.topnav .btn-ghost:hover { background: rgba(255,255,255,0.15); }
.topnav .btn-cta {
background: var(--yellow); color: var(--navy-dark); font-size: 13px; font-weight: 600;
padding: 9px 16px; border-radius: 10px;
}
.topnav .btn-cta:hover { background: var(--yellow-dark); }
.flash {
max-width: 960px; margin: 0 auto 14px; padding: 12px 18px;
border-radius: var(--radius-md); font-size: 13px; font-weight: 600;
}
.flash.success { background: #e8f9ef; color: #1c7a44; }
.flash.info { background: #e6f7ff; color: #0d5f7a; }
.flash.error { background: #fdecea; color: #b4302c; }
/* ---------- Auth forms ---------- */
.auth-card {
max-width: 380px; margin: 40px auto; background: var(--cream);
border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.auth-card h2 { margin: 0 0 18px; color: var(--navy); }
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.form-field input, .form-field select {
width: 100%; padding: 10px 12px; border-radius: 10px; border: 2px solid #e7e0cc; font-size: 14px;
box-sizing: border-box;
}
.form-field .field-error { color: var(--red); font-size: 12px; margin-top: 4px; }
.btn-primary {
width: 100%; background: var(--navy); color: #fff; border: none; border-radius: 10px;
padding: 12px; font-weight: 600; cursor: pointer; font-size: 14px;
}
.btn-primary:hover { background: var(--navy-dark); }
.auth-switch { text-align: center; font-size: 13px; margin-top: 14px; color: var(--gray-text); }
.auth-switch a { color: var(--purple); font-weight: 600; }
/* ---------- Filter chips (grade filter on browse page) ---------- */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filter-chip {
background: rgba(255,255,255,0.85); color: var(--navy); font-weight: 600; font-size: 13px;
padding: 8px 16px; border-radius: 20px; border: none; cursor: pointer;
}
.filter-chip.active { background: var(--yellow); }
/* ---------- Generic content cards (children, history, insights) ---------- */
.page-card {
background: var(--cream); border-radius: var(--radius-lg); padding: 24px 26px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15); margin-bottom: 18px;
}
.page-card h2 { color: var(--navy); margin: 0 0 16px; font-size: 18px; }
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { text-align: left; padding: 10px 8px; font-size: 13px; border-bottom: 1px solid #eee; }
.simple-table th { color: var(--gray-text); font-size: 12px; text-transform: uppercase; }
.topic-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.topic-bar-row .topic-name { width: 160px; font-size: 13px; font-weight: 600; color: var(--navy); flex-shrink: 0; }
.topic-bar-track { flex: 1; height: 10px; background: #eee; border-radius: 6px; overflow: hidden; }
.topic-bar-fill { height: 100%; background: var(--teal-mid); }
.topic-bar-fill.weak { background: var(--red); }
.topic-bar-pct { width: 84px; text-align: right; font-size: 12px; color: var(--gray-text); flex-shrink: 0; }
.child-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
/* Trang "Các bé" (gộp chung quản lý + đổi bé đang chọn) — mỗi thẻ hiển thị đủ avatar,
tuổi/giới tính/khối, ví 4 loại vật phẩm, và 2 nút hành động. */
.child-card {
position: relative; background: #fff; border: 2px solid #e7e0cc; border-radius: var(--radius-md);
padding: 18px 16px; text-align: center;
}
.child-card.active { border-color: var(--teal-mid); background: #e6f7ff; }
.child-card-badge {
position: absolute; top: 10px; right: 10px; background: var(--teal-mid); color: #fff;
font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 20px;
}
.child-card-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #f5f0e0; }
.child-card h4 { margin: 10px 0 2px; color: var(--navy); }
.child-card-meta { margin: 0 0 10px; font-size: 12px; color: var(--gray-text); }
.child-card-stats {
display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.child-card-stats span {
display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12px; color: var(--navy);
}
.child-card-stats img { width: 16px; height: 16px; object-fit: contain; }
.child-card-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* ---------- Sảnh danh vọng (bảng xếp hạng Điểm) ---------- */
.leaderboard-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.leaderboard-row {
display: flex; align-items: center; gap: 14px; background: #fff; border: 2px solid #e7e0cc;
border-radius: var(--radius-md); padding: 10px 16px;
}
.leaderboard-row.current { border-color: var(--teal-mid); background: #e6f7ff; }
.leaderboard-rank { width: 34px; text-align: center; font-size: 18px; font-weight: 600; color: var(--navy); flex-shrink: 0; }
.leaderboard-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #f5f0e0; flex-shrink: 0; }
.leaderboard-info { flex: 1; display: flex; flex-direction: column; }
.leaderboard-info b { color: var(--navy); font-size: 14px; }
.leaderboard-info small { color: var(--gray-text); font-size: 12px; }
.leaderboard-stars { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--navy); font-size: 14px; }
.leaderboard-stars img { width: 18px; height: 18px; object-fit: contain; }
.leaderboard-level { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); font-size: 13px; white-space: nowrap; }
.leaderboard-level-badge {
background: var(--ok-purple); color: #fff; font-weight: 600; font-size: 12px;
padding: 3px 9px; border-radius: 20px;
}
.leaderboard-score { font-weight: 600; color: var(--navy); font-size: 14px; white-space: nowrap; }
.leaderboard-score small { font-weight: 600; color: var(--gray-text); font-size: 12px; }
.leaderboard-time { font-weight: 600; color: var(--gray-text); font-size: 13px; white-space: nowrap; margin-left: 6px; }
/* ---------- Admin: Kho báu — sửa giá vật phẩm ---------- */
.shop-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.shop-admin-item {
position: relative; background: #fff; border: 2px solid #e3e7f0; border-radius: var(--radius-md);
padding: 10px; text-align: center; transition: border-color 0.25s, box-shadow 0.25s;
}
.shop-admin-thumb { width: 72px; height: 72px; object-fit: contain; background: #f4f6fb; border-radius: 10px; }
.shop-admin-name { font-size: 12px; font-weight: 600; color: var(--navy); margin: 6px 0 8px; }
.shop-admin-prices { display: flex; flex-direction: column; gap: 4px; }
.shop-admin-prices label { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.shop-admin-prices label img { width: 15px; height: 15px; object-fit: contain; flex-shrink: 0; }
.shop-admin-prices input {
width: 100%; padding: 3px 6px; border: 1px solid #ddd; border-radius: 6px; font-size: 12px;
}
/* Phản hồi tự lưu giá khi rời ô điền (JS blur → fetch, xem Admin/Shop.cshtml) — viền/badge xanh
thoáng qua khi lưu thành công, đỏ khi lỗi, không dùng alert()/confirm() native. */
.shop-admin-item.saved-flash { border-color: var(--ok-green); box-shadow: 0 0 0 2px rgba(34,197,94,0.2); }
.shop-admin-item.saved-error { border-color: var(--red); box-shadow: 0 0 0 2px rgba(239,83,80,0.2); }
.shop-admin-saved-badge {
position: absolute; top: -8px; right: -8px; background: var(--ok-green); color: #fff; font-size: 10px; font-weight: 600;
padding: 2px 7px; border-radius: 10px; opacity: 0; transform: translateY(-4px) scale(0.9);
transition: opacity 0.2s, transform 0.2s; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.shop-admin-item.saved-flash .shop-admin-saved-badge { opacity: 1; transform: translateY(0) scale(1); }
/* ---------- Ngân hàng câu hỏi (Admin/QuestionBank) ---------- */
.qbank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.qbank-card { background: #fff; border: 2px solid #e3e7f0; border-radius: var(--radius-md); padding: 14px; }
.qbank-check-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; cursor: pointer; }
.qbank-check { width: 18px; height: 18px; flex-shrink: 0; }
.qbank-badge {
font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: #f0f2fb; color: var(--navy);
}
.qbank-badge.topic { background: #e6f0ff; color: #1a5fb4; }
.qbank-badge.skill { background: #eef7e9; color: #2f7a3a; }
.qbank-badge.diff { background: #fff3e0; color: #b06a00; }
.qbank-badge.purpose { background: #eef1f8; color: var(--navy); }
.qbank-badge.purpose.island { background: #e8f9fb; color: #0d7a8c; }
.qbank-text { font-size: 13.5px; color: var(--navy); margin: 10px 0; line-height: 1.4; }
.qbank-delete-form { text-align: right; }
.qbank-delete-btn {
border: none; background: none; color: var(--red); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 0;
}
.qbank-compose-bar {
position: sticky; bottom: 0; left: 0; right: 0; margin-top: 20px; padding: 14px 22px; background: #fff;
border-radius: 16px; box-shadow: 0 -4px 18px rgba(20,40,90,0.12); display: flex; align-items: center;
justify-content: space-between; font-weight: 600; color: var(--navy); z-index: 10;
}
.qbank-compose-modal {
position: fixed; inset: 0; background: rgba(20,30,60,0.45); display: flex; align-items: center; justify-content: center; z-index: 50;
}
.qbank-compose-form {
background: #fff; border-radius: 18px; padding: 24px; width: 90%; max-width: 420px; display: flex; flex-direction: column; gap: 12px;
}
.qbank-compose-form h3 { margin: 0 0 4px; color: var(--navy); }
.qbank-compose-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--navy); }
.qbank-compose-form input {
border: 1px solid #e3e7f0; border-radius: 10px; padding: 9px 12px; font-size: 13.5px; font-weight: 400;
}
.qbank-compose-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.qbank-compose-actions button[type="button"] {
border: none; background: #f0f2fb; color: var(--navy); font-weight: 600; padding: 10px 16px; border-radius: 10px; cursor: pointer;
}
/* ---------- Kho báu (duyệt/mua) + Bộ sưu tập ---------- */
.shop-wallet-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.shop-wallet-row span { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--navy); font-size: 14px; }
.shop-wallet-row img { width: 20px; height: 20px; object-fit: contain; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.shop-item {
position: relative; background: #fff; border: 2px solid #e7e0cc; border-radius: var(--radius-md);
padding: 14px 10px; text-align: center;
}
.shop-item.owned { border-color: var(--teal-mid); background: #e6f7ff; }
.shop-item-thumb { width: 76px; height: 76px; object-fit: contain; background: #f5f0e0; border-radius: 10px; }
.shop-item-name { font-size: 13px; font-weight: 600; color: var(--navy); margin: 8px 0 6px; }
.shop-item-price { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.shop-item-price span { display: inline-flex; align-items: center; gap: 3px; }
.shop-item-price img { width: 16px; height: 16px; object-fit: contain; }
.shop-item-owned-badge {
display: inline-block; background: var(--teal-mid); color: #fff; font-weight: 600; font-size: 12px;
padding: 5px 12px; border-radius: 20px;
}
.shop-buy-btn { display: inline-block; width: auto; padding: 7px 20px; font-size: 13px; }
.shop-buy-btn:disabled { background: #ccc; box-shadow: none; cursor: not-allowed; }
/* ---------- Hồ sơ bé (Child/Profile) ---------- */
.profile-header { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.profile-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: #f5f0e0; border: 3px solid var(--ok-gold); flex-shrink: 0; }
.profile-header-info { flex: 1; min-width: 220px; }
.profile-level-row { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.profile-level-badge { display: inline-block; background: var(--ok-purple); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 8px; margin-right: 4px; }
.profile-progress-track { max-width: 320px; height: 8px; border-radius: 6px; overflow: hidden; background: #eee; }
.profile-progress-fill { height: 100%; background: var(--ok-gold); border-radius: 6px; }
.profile-xp-label { font-size: 12px; color: var(--gray-text); margin: 3px 0 0; }
.profile-stat-row { display: flex; gap: 14px; flex-wrap: wrap; }
.profile-stat {
flex: 1; min-width: 160px; background: #fdf8ea; border: 2px solid #e7e0cc; border-radius: var(--radius-md);
padding: 14px; text-align: center;
}
.profile-stat-label { display: block; font-size: 12px; color: var(--gray-text); font-weight: 600; margin-bottom: 4px; }
.profile-stat-value { display: block; font-size: 22px; font-weight: 600; color: var(--navy); }
.profile-stat-sub { display: block; font-size: 12px; color: var(--gray-text); margin-top: 2px; }
.profile-collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.profile-collection-item {
background: #fff; border: 2px solid #e7e0cc; border-radius: var(--radius-md); padding: 12px; text-align: center;
}
.profile-collection-name { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.profile-collection-count { font-size: 20px; font-weight: 600; color: var(--ok-purple); }
.profile-collection-count span { font-size: 14px; font-weight: 600; color: var(--gray-text); }
/* ---------- Landing page (khách chưa đăng nhập) ---------- */
.hero { text-align: center; padding: 40px 20px 20px; color: #fff; }
.hero h1 { font-size: 32px; margin: 0 0 12px; }
.hero p { font-size: 15px; opacity: 0.92; max-width: 560px; margin: 0 auto 26px; line-height: 1.6; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-ctas a { padding: 14px 26px; border-radius: 12px; font-weight: 600; font-size: 15px; }
.hero-ctas .primary { background: var(--yellow); color: var(--navy-dark); }
.hero-ctas .primary:hover { background: var(--yellow-dark); }
.hero-ctas .secondary { background: rgba(255,255,255,0.18); color: #fff; border: 2px solid rgba(255,255,255,0.6); }
.hero-ctas .secondary:hover { background: rgba(255,255,255,0.3); }
.features-row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px;
max-width: 900px; margin: 34px auto;
}
.feature-item {
background: rgba(255,255,255,0.14); border-radius: var(--radius-md); padding: 18px 16px;
text-align: center; color: #fff;
}
.feature-item .emoji { font-size: 28px; margin-bottom: 8px; }
.feature-item h4 { margin: 0 0 4px; font-size: 14px; }
.feature-item p { margin: 0; font-size: 12px; opacity: 0.85; line-height: 1.5; }
.section-title { text-align: center; color: #fff; margin: 36px 0 18px; }
.section-title h2 { font-size: 20px; margin: 0 0 6px; }
.section-title p { margin: 0; font-size: 13px; opacity: 0.85; }
/* =========================================================
OctoKids brand navbar + landing page
========================================================= */
.ok-navbar {
display: flex; align-items: center; justify-content: space-between;
gap: 18px; padding: 4px 26px;
background: linear-gradient(180deg, var(--ok-indigo) 0%, var(--ok-indigo-dark) 100%);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
flex-wrap: wrap;
}
.ok-brand { display: flex; align-items: center; flex-shrink: 0; }
.ok-brand-logo { height: 58px; width: auto; object-fit: contain; }
.ok-nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ok-nav-link {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 600;
padding: 10px 16px; border-radius: 16px; white-space: nowrap;
}
.ok-nav-link img { width: 26px; height: 26px; object-fit: contain; }
.ok-nav-link .ok-nav-emoji { font-size: 22px; line-height: 1; }
.ok-nav-link:hover { background: rgba(255,255,255,0.14); color: #fff; }
.ok-nav-link.active {
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark));
color: #fff;
box-shadow: 0 4px 12px rgba(139,92,246,0.5);
}
.ok-btn-outline {
color: #fff; border: 2px solid rgba(255,255,255,0.55); font-weight: 600; font-size: 13px;
padding: 9px 18px; border-radius: 12px;
}
.ok-btn-outline:hover { background: rgba(255,255,255,0.12); }
.ok-btn-gold {
background: var(--ok-gold); color: #4a2f00; font-weight: 600; font-size: 13px;
padding: 10px 20px; border-radius: 12px; box-shadow: 0 3px 0 var(--ok-gold-dark);
}
.ok-btn-gold:hover { background: #ffd65c; }
.ok-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; }
.ok-icon-btn img { width: 26px; height: 26px; object-fit: contain; }
.ok-donate-btn {
display: inline-flex; align-items: center; gap: 5px; background: rgba(255,111,160,0.18);
border: 1.5px solid rgba(255,111,160,0.5); color: #fff; font-weight: 600; font-size: 12.5px;
padding: 7px 13px; border-radius: 20px; white-space: nowrap; transition: background 0.15s, transform 0.15s;
}
.ok-donate-btn:hover { background: rgba(255,111,160,0.32); transform: translateY(-1px); }
@media (max-width: 700px) { .ok-donate-btn span { display: none; } .ok-donate-btn { padding: 7px 9px; } }
/* .right/.btn-ghost trước đây chỉ có style dưới ".topnav" (layout cũ) — bổ
sung style riêng cho ".ok-navbar" vì navbar thật của site đang dùng class này. */
.ok-navbar .right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ok-navbar form { display: inline-flex; }
.ok-navbar .btn-ghost {
color: #fff; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 10px;
border: 2px solid rgba(255,255,255,0.5); background: transparent; cursor: pointer; white-space: nowrap;
}
.ok-navbar .btn-ghost:hover { background: rgba(255,255,255,0.15); }
/* Khối Sao/Vỏ sò/Ngọc trai/Đá quý trên navbar đọc từ ví thật của bé đang chọn (WalletService).
Chuỗi ngày vẫn hiện 0 — chưa có logic tính streak thật. Gom chung 1 khung bo tròn viền
sáng thay vì mỗi mục 1 khung trắng riêng. */
.ok-nav-stats {
display: flex; align-items: center; gap: 16px;
background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.4);
border-radius: 24px; padding: 8px 18px;
}
.ok-nav-stat {
display: inline-flex; align-items: center; gap: 6px; color: #fff;
font-weight: 600; font-size: 13px; white-space: nowrap;
}
.ok-nav-stat img { width: 18px; height: 18px; object-fit: contain; }
@media (max-width: 900px) { .ok-nav-stats { display: none; } }
/* Avatar bé đang chọn: to, nổi lên khỏi thanh navbar bằng viền + shadow + margin âm,
bấm vào mở dropdown tài khoản (sửa thông tin / đổi bé / đăng xuất). */
.ok-account-menu { position: relative; }
.ok-avatar-btn {
display: flex; align-items: center; gap: 4px; background: transparent; border: none;
cursor: pointer; padding: 0;
}
.ok-avatar-img {
width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #fff;
border: 3px solid var(--ok-gold); box-shadow: 0 4px 10px rgba(0,0,0,0.35);
margin-top: -10px; margin-bottom: -10px;
}
.ok-avatar-chevron { color: #fff; font-size: 13px; }
.ok-account-dropdown {
display: none; position: absolute; right: 0; top: calc(100% + 12px); z-index: 50;
min-width: 200px; background: #fff; border-radius: 14px; padding: 8px;
box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}
.ok-account-menu.open .ok-account-dropdown { display: block; }
.ok-account-dropdown-header {
padding: 8px 10px; margin-bottom: 4px; border-bottom: 1px solid #eee;
color: var(--navy); font-weight: 600; font-size: 13px;
}
.ok-account-dropdown a, .ok-account-dropdown form, .ok-account-dropdown button {
display: block; width: 100%;
}
.ok-account-dropdown a, .ok-account-dropdown button {
text-align: left; padding: 9px 10px; border-radius: 9px; color: var(--navy);
font-weight: 600; font-size: 13px; background: transparent; border: none; cursor: pointer;
}
.ok-account-dropdown a:hover, .ok-account-dropdown button:hover { background: #f3f0ff; }
/* ---------- Chrome nổi kiểu Lingokids (tablet/điện thoại), thay .ok-navbar ở các trang duyệt
nội dung có đặt ViewData["ImmersiveNav"] (xem _Layout.cshtml) — 4 khối fixed tách rời, tự ẩn
khi có tương tác với nội dung/tự hiện lại sau khi rảnh (script cuối _Layout.cshtml). Mặc định
ẩn hẳn (display:none) — chỉ bật trong @media dưới, và chỉ khi có class "ok-immersive"
(trang đã đặt cờ VÀ đang có bé được chọn — xem điều kiện gán immersiveNav ở _Layout.cshtml).
Điều kiện bật dùng "pointer: coarse" (thiết bị chạm) thay vì max-width — 1 ngưỡng px cố định
không phân biệt được "tablet nằm ngang" (VD iPad Air landscape rộng 1180px, thừa mọi ngưỡng
mobile hợp lý) với "laptop/desktop màn hẹp": cả 2 đều rộng nhưng chỉ cái đầu là thiết bị
chạm thật — pointer:coarse đúng bản chất "tablet/điện thoại" bất kể xoay ngang/dọc. */
/* Bọc ngoài position:fixed với width/height khai báo TƯỜNG MINH bằng 100vw/100vh (không dùng
inset:0, vì inset:0 ngầm định right:0/bottom:0 — chính "right/bottom ngầm định" của
position:fixed mới là thứ bị lỗi, xem bên dưới) — rồi 4 khối con chuyển sang position:absolute
thay vì mỗi khối tự fixed riêng. Đổi vì bug thật đã xác nhận: 1 số trang có nội dung cuộn dọc/
ngang dài (VD Exam/Index) khiến trình duyệt tính sai "khung tham chiếu" cho các thuộc tính
CẠNH XA của position:fixed (right/bottom/left:50%) — lấy theo kích thước layout đã bị nội
dung cuộn kéo giãn thay vì kích thước viewport thật, nên phần tử "dính đáy/dính phải" bị đẩy
ra ngoài màn hình nhìn thấy được (đã tái hiện: top/left thì luôn đúng vì không cần biết tổng
chiều rộng/cao, còn right/bottom/center thì sai). 100vw/100vh xác nhận LUÔN đúng dù trang có
bị lỗi này hay không — dùng làm kích thước khung bọc để right/bottom/center của các khối con
(giờ resolve theo khung bọc đã đúng kích thước, không theo viewport gốc bị lỗi) tính đúng trở lại. */
.ok-immersive-chrome {
display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
pointer-events: none; z-index: 60;
}
@media (pointer: coarse) {
body.ok-hide-navbar-touch .ok-navbar { display: none; }
/* body.ok-show-chrome = immersiveNav HOẶC chỉ riêng nút back nổi (showBackButton) — rộng hơn
body.ok-immersive vì có vài trang (VD Exam/Result) không đủ điều kiện immersiveNav đầy đủ
nhưng vẫn cần hiện khối .ok-immersive-chrome để render 1 mình nút back. */
body.ok-show-chrome .ok-immersive-chrome { display: block; }
/* Nhiều trang tự trừ chiều cao .ok-navbar (min-height:calc(100vh - 84px), .ok-take-page trừ
24px) để nền/màu trang trí vừa khít khoảng trống CÒN LẠI dưới navbar — hợp lý khi navbar còn
hiện, nhưng navbar vừa bị ẩn ở trên thì phần trừ đó chừa ra 1 dải nền trắng "lửng" ở đáy
trang (đúng lỗi thật đã gặp ở Exam/Result). Ép lại full 100vh cho mọi trang đang ẩn navbar. */
body.ok-hide-navbar-touch .ok-result-page,
body.ok-hide-navbar-touch .ok-take-page,
body.ok-hide-navbar-touch .ok-shop-page,
body.ok-hide-navbar-touch .ok-collection-page,
body.ok-hide-navbar-touch .ok-lb-page,
body.ok-hide-navbar-touch .ok-class-page,
body.ok-hide-navbar-touch .ok-profile-page,
body.ok-hide-navbar-touch .ok-history-page,
body.ok-hide-navbar-touch .ok-editchild-page,
body.ok-hide-navbar-touch .ok-choosechild-page,
body.ok-hide-navbar-touch .ok-changepw-page {
min-height: 100vh;
}
}
.ok-immersive-el {
position: absolute; pointer-events: auto; transition: opacity 0.25s ease, transform 0.25s ease;
}
.ok-immersive-hidden { opacity: 0; pointer-events: none; }
.ok-immersive-topleft { top: 14px; left: 14px; }
.ok-immersive-topleft.ok-immersive-hidden { transform: translateY(-16px); }
.ok-immersive-avatar-btn {
width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--ok-gold); padding: 0;
background: var(--ok-indigo-dark); box-shadow: 0 6px 16px rgba(0,0,0,0.4); cursor: pointer; overflow: hidden;
}
.ok-immersive-avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Dropdown tài khoản dùng chung .ok-account-dropdown (định vị theo .ok-account-menu cha, sẵn
position:relative) — chỉ đổi hướng mở sang trái vì nút nguồn giờ ở góc trái thay vì phải. */
.ok-immersive-topleft .ok-account-dropdown { left: 0; right: auto; }
/* Trên thiết bị chạm, menu tài khoản đổi hẳn sang dạng ngăn kéo trái (offcanvas) toàn chiều
cao — dễ bấm hơn hẳn 1 dropdown nhỏ, kiểu điều hướng quen thuộc trên app di động. Vẫn dùng lại
NGUYÊN class .ok-account-dropdown/.ok-account-menu.open có sẵn (JS toggle không đổi) — chỉ
override cách hiển thị: luôn render (display:flex) và ẩn/hiện bằng transform trượt ngang thay
vì display:none/block, để có animation trượt mượt. */
@media (pointer: coarse) {
.ok-immersive-topleft .ok-account-dropdown {
display: flex; flex-direction: column; gap: 2px;
position: fixed; top: 0; left: 0; width: min(78vw, 300px); height: 100vh;
border-radius: 0; padding: 28px 18px; box-shadow: none;
transform: translateX(-100%); transition: transform 0.25s ease, box-shadow 0.25s ease; overflow-y: auto; z-index: 70;
}
/* box-shadow CHỈ đặt lúc mở. Rule trên vừa ép box-shadow:none ở trạng thái đóng — KHÔNG chỉ để
ghi đè box-shadow riêng "6px 0 30px" đã từng đặt ở đây, mà còn phải đè cả box-shadow MẶC ĐỊNH
"0 12px 30px" của .ok-account-dropdown gốc (style.css dòng ~1561, áp dụng cho mọi dropdown tài
khoản kể cả bản desktop). Lúc đóng, mép phải của ngăn kéo (translateX(-100%)) nằm đúng x=0 —
đúng mép trái màn hình — nên box-shadow blur 30px của rule gốc vẫn đủ rộng để "ló" lại 1 dải mờ
dọc mép trái dù ngăn kéo đã trượt hết ra ngoài (đúng lỗi thật đã gặp). */
.ok-account-menu.open .ok-immersive-topleft .ok-account-dropdown,
.ok-immersive-topleft .ok-account-menu.open .ok-account-dropdown {
transform: translateX(0); box-shadow: 6px 0 30px rgba(0,0,0,0.35);
}
.ok-immersive-topleft .ok-account-dropdown a,
.ok-immersive-topleft .ok-account-dropdown button { font-size: 14.5px; padding: 12px 12px; }
.ok-immersive-topleft .ok-account-dropdown-header { font-size: 14px; padding: 10px 12px 14px; }
body:has(.ok-immersive-topleft .ok-account-menu.open) .ok-immersive-drawer-backdrop {
display: block; background: rgba(20,10,50,0.5); pointer-events: auto;
}
}
.ok-immersive-topright { top: 14px; right: 14px; }
.ok-immersive-topright.ok-immersive-hidden { transform: translateY(-16px); }
/* Nút "‹" nổi quay lại trang trước, dành cho trang thiếu breadcrumb riêng (xem showBackButton
trong _Layout.cshtml) — góc trên-trái theo đúng ảnh tham khảo Lingokids (yêu cầu thật đã đổi từ
vị trí giữa cạnh trái ban đầu sang góc trên-trái). Cùng cơ chế ẩn/hiện idle với các khối
.ok-immersive-el khác (script cuối trang), không phải logic riêng. */
.ok-immersive-backbtn {
top: 14px; left: 14px;
width: 46px; height: 46px; border-radius: 50%; border: none; padding: 0;
background: rgba(20,10,50,0.75); color: #fff;
display: flex; align-items: center; justify-content: center; cursor: pointer;
box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
/* Dùng SVG thay vì ký tự "‹" — glyph "‹" của font chữ trang không nằm giữa khung em-box của nó
(lệch lên trên dù đã flex align-items:center), đúng lỗi thật đã gặp lúc test trên thiết bị. SVG
tự vẽ theo viewBox 24×24 nên luôn canh giữa chính xác bất kể font. */
.ok-immersive-backbtn svg { width: 22px; height: 22px; display: block; }
.ok-immersive-backbtn.ok-immersive-hidden { transform: translateY(-16px); }
/* Ở các trang có đủ ImmersiveNav (avatar bé cũng neo góc trên-trái), nút back render TRƯỚC avatar
trong DOM nên chiếm đúng ô góc trên-trái — đẩy avatar sang phải nhường chỗ, tránh 2 khối chồng
lên nhau. Dùng :has() để CHỈ đẩy khi thật sự có nút back đứng cạnh (VD Home/Hub tắt back button
qua HideBackButton thì avatar vẫn đứng nguyên vị trí góc trái mặc định). */
.ok-immersive-chrome:has(.ok-immersive-backbtn) .ok-immersive-topleft { left: 72px; }
/* Phóng to 1.5× (kích thước gốc: item 46px, icon 24px, pill radius 28px, padding 8px) + thêm
text dưới icon cho rõ (yêu cầu thật) — item chuyển sang cột (icon trên, chữ dưới) thay vì chỉ
canh giữa 1 icon vuông như trước. */
.ok-immersive-pill {
bottom: 16px; left: 50%; transform: translateX(-50%);
display: flex; align-items: center; gap: 6px; background: rgba(20,10,50,0.9);
border-radius: 42px; padding: 12px; box-shadow: 0 10px 26px rgba(0,0,0,0.4);
max-width: calc(100vw - 96px); overflow-x: auto;
}
.ok-immersive-pill.ok-immersive-hidden { transform: translateX(-50%) translateY(20px); }
.ok-immersive-pill-item {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
width: 84px; padding: 6px 4px; border-radius: 20px; flex-shrink: 0; color: rgba(255,255,255,0.75);
}
.ok-immersive-pill-item img { width: 36px; height: 36px; object-fit: contain; }
/* Rộng hơn (69→84px) + chữ cho phép xuống dòng thay vì cắt "..." — nhãn dài nhất ("Toán tiếng
Anh") vẫn không tràn/mất chữ, xem phản hồi thật đã gặp lúc chữ bị cắt ngắn khó đọc. */
.ok-immersive-pill-item span {
font-size: 10.5px; font-weight: 600; color: inherit; line-height: 1.15; text-align: center;
white-space: normal; word-break: break-word; max-width: 100%;
}
.ok-immersive-pill-item.active {
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark));
color: #fff; box-shadow: 0 4px 12px rgba(139,92,246,0.5);
}
/* Phóng to 1.5× (gốc 66px) + đẩy lên cao hơn (gốc bottom:16px). Dùng mốc CỐ ĐỊNH (không phải
vh) — pill điều hướng giờ CŨNG cao hơn hẳn (thêm chữ dưới icon, ~90px thay vì ~62px trước),
nếu chỉ cộng thêm 5% chiều cao màn hình như yêu cầu ban đầu thì 2 khối lấn vào nhau (đã tái
hiện: overlap thật lúc test). 120px = đúng ngay phía trên pill (16px+~90px cao+đệm), không
phụ thuộc chiều cao màn hình như vh nên luôn tách bạch 2 khối bất kể máy nào. */
.ok-immersive-bottomright {
bottom: 120px; right: 14px; width: 99px; height: 99px; border-radius: 50%;
background: linear-gradient(160deg, #ffe27a, var(--ok-gold)); border: 3px solid #fff;
box-shadow: 0 8px 20px rgba(190,140,0,0.5); display: flex; align-items: center; justify-content: center;
}
.ok-immersive-bottomright.ok-immersive-hidden { transform: translateY(20px); }
.ok-immersive-bottomright img { width: 54px; height: 54px; object-fit: contain; }
/* Nền mờ phía sau ngăn kéo tài khoản (chỉ hiện khi ngăn kéo mở — xem selector :has() dưới đây,
trong @media pointer:coarse). Luôn render sẵn (display:block mặc định ẩn qua background trong
suốt + pointer-events:none) để có transition mượt khi bật/tắt thay vì display:none/block giật. */
.ok-immersive-drawer-backdrop {
display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(20,10,50,0); pointer-events: none; transition: background 0.25s ease; z-index: 65;
}
/* ---------- Intro: hero + chọn nhóm tuổi/chào mừng — full width, cùng tông màu liền mạch ---------- */
.ok-intro-wrap { position: relative; margin-bottom: 0; }
.ok-intro-inner { max-width: 1600px; margin: 0 auto; padding: 0 32px; position: relative; }
.ok-hero-bg {
position: relative;
width: 100%;
aspect-ratio: 2000 / 807; /* đúng tỉ lệ ảnh nền — đảo/biển hiệu đã có sẵn trong ảnh */
background-image: url('/images/octokids/ocean-bg.jpg');
background-size: cover;
background-position: center;
background-color: #3aa0c9;
overflow: hidden;
}
.ok-hero-bg .ok-intro-inner, .ok-hero-bg .ok-hero-scene { height: 100%; }
.ok-hero-scene {
position: relative;
width: 100%;
}
.ok-hero-textbox { position: absolute; left: 4%; top: 28%; width: 42%; z-index: 3; }
.ok-ribbon {
display: inline-block; background: linear-gradient(180deg, #f5c96b, var(--ok-gold-dark));
color: #4a2f00; font-weight: 600; font-size: clamp(12px, 1.5vw, 13px); padding: clamp(4px,0.8vw,8px) clamp(8px,1.6vw,20px);
border-radius: 20px; box-shadow: 0 3px 8px rgba(0,0,0,0.2); margin-bottom: clamp(4px,1vw,10px);
}
.ok-wordmark { font-size: clamp(18px, 4.2vw, 42px); font-weight: 900; line-height: 1.05; margin: 4px 0 clamp(4px,1vw,10px); }
.ok-word-gold {
color: var(--ok-gold);
text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff, 3px 4px 6px rgba(0,0,0,0.35);
}
.ok-word-white {
color: #fff;
text-shadow: -2px -2px 0 #1a6fd6, 2px -2px 0 #1a6fd6, -2px 2px 0 #1a6fd6, 2px 2px 0 #1a6fd6, 3px 4px 6px rgba(0,0,0,0.35);
}
.ok-hero-sub {
color: #fff; font-weight: 600; font-size: clamp(12px, 1.4vw, 18px); margin: 0 0 clamp(4px,1vw,12px);
text-shadow: 0 1px 3px rgba(0,0,0,0.45); max-width: 95%; line-height: 1.3;
}
.ok-hero-cta {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
background: var(--ok-gold); color: #4a2f00; font-weight: 600; font-size: clamp(12px, 1.5vw, 14px);
padding: clamp(6px,1.3vw,13px) clamp(10px,2.2vw,22px); border-radius: 12px; box-shadow: 0 4px 0 var(--ok-gold-dark);
transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.ok-hero-cta:hover { background: #ffd65c; transform: translateY(-2px); box-shadow: 0 6px 0 var(--ok-gold-dark); }
.ok-hero-ship {
position: absolute; left: 32%; bottom: 35%; width: 24%; z-index: 2;
filter: drop-shadow(0 10px 14px rgba(0,0,0,0.35));
}
/* ---------- Dải nền dưới hero + "Chọn nhóm tuổi"/thẻ chào mừng nổi đè lên ảnh ---------- */
.ok-age-strip {
width: 100%;
background: transparent;
padding: 0 0 10px;
position: relative;
}
.ok-dashboard-grid {
display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: stretch;
position: relative; z-index: 2;
margin-top: -70px; /* kéo thẻ nổi đè lên phần dưới ảnh nền, tạo cảm giác nổi */
}
.ok-dashboard-left { display: flex; flex-direction: column; gap: 18px; }
/* Chọn nhóm tuổi: 1 hàng 3 cột — text | nút Mầm non | nút Tiểu học, thu gọn theo nội dung */
.ok-age-card {
background: var(--cream); border-radius: var(--radius-lg); padding: 18px 22px;
box-shadow: 0 14px 30px rgba(0,0,0,0.25);
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.ok-age-card-head { display: flex; align-items: center; gap: 12px; }
.ok-age-card-head img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.ok-age-card-head h3 { margin: 0; font-size: 18px; color: var(--navy); white-space: nowrap; }
.ok-age-card-head p { margin: 2px 0 0; font-size: 14px; color: var(--gray-text); white-space: nowrap; }
.ok-age-card-head { flex-shrink: 0; }
.ok-age-btn {
display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 12px 16px;
text-decoration: none; color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,0.15); flex: 1 1 180px;
transition: transform 0.15s, box-shadow 0.15s;
}
.ok-age-btn:hover { transform: translateY(-3px); box-shadow: 0 7px 0 rgba(0,0,0,0.15); }
.ok-age-btn img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.ok-age-btn b { display: block; font-size: 16px; }
.ok-age-btn small { display: block; font-size: 14px; opacity: 0.9; font-weight: 500; white-space: nowrap; }
.ok-age-arrow { margin-left: auto; font-size: 20px; font-weight: 600; transition: transform 0.15s; }
.ok-age-btn:hover .ok-age-arrow { transform: translateX(4px); }
.ok-age-btn.purple { background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); }
.ok-age-btn.blue { background: linear-gradient(160deg, #4fa3ff, var(--ok-blue)); }
.ok-welcome-card-v2 {
background: #fff; border-radius: var(--radius-lg); box-shadow: 0 14px 30px rgba(0,0,0,0.25);
overflow: hidden; display: flex; flex-direction: column;
}
.ok-welcome-purple-panel {
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark));
padding: 18px 20px; color: #fff;
}
.ok-welcome-v2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ok-welcome-v2-head p { margin: 0; font-size: 12px; color: rgba(255,255,255,0.8); }
.ok-welcome-v2-head h4 { margin: 2px 0 0; font-size: 15px; color: #fff; }
.ok-avatar-lg { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 3px 8px rgba(0,0,0,0.25); flex-shrink: 0; border: 2px solid rgba(255,255,255,0.6); }
.ok-level-row { font-size: 12px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.ok-level-badge { display: inline-block; background: rgba(255,255,255,0.25); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 8px; margin-right: 4px; }
.ok-progress-track { height: 8px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,0.25); }
.ok-progress-fill { height: 100%; background: var(--ok-gold); border-radius: 6px; }
.ok-xp-label { font-size: 12px; color: rgba(255,255,255,0.85); margin: 3px 0 0; text-align: right; }
.ok-achieve-section { padding: 16px 20px 18px; }
.ok-achieve-title { font-size: 12px; font-weight: 600; color: var(--ok-purple); letter-spacing: 0.4px; margin: 0 0 12px; }
.ok-achieve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
.ok-achieve-grid > div { display: flex; align-items: center; gap: 8px; }
.ok-achieve-grid img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.ok-achieve-grid span { display: flex; flex-direction: column; }
.ok-achieve-grid b { display: block; font-size: 18px; color: var(--navy); line-height: 1.1; }
.ok-achieve-grid small { font-size: 14px; color: var(--gray-text); }
.ok-demo-tag { font-size: 12px; color: rgba(255,255,255,0.75); text-align: right; margin: 8px 2px 0; }
/* ---------- Chọn môn học (3 thẻ) ---------- */
.ok-subjects-card {
background: var(--cream); border-radius: var(--radius-lg); padding: 18px 22px 4px;
box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}
.ok-subjects-title {
display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--navy);
margin: 0 0 16px;
}
.ok-star-mono { color: var(--navy); font-size: 18px; line-height: 1; }
.ok-subject-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 18px; }
.ok-subject-card-v2 {
border-radius: var(--radius-lg); padding: 20px; text-decoration: none; color: var(--navy);
display: flex; flex-direction: column; gap: 4px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transition: transform 0.15s, box-shadow 0.15s;
}
.ok-subject-card-v2:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,0.16); }
.ok-subject-card-v2.purple { background: #f1ecff; }
.ok-subject-card-v2.blue { background: #eaf3ff; }
.ok-subject-card-v2.green { background: #eafbf1; }
.ok-subject-head { display: flex; align-items: center; gap: 12px; }
.ok-subject-icon-v2 {
width: 62px; height: 62px; object-fit: contain; flex-shrink: 0;
}
.ok-subject-card-v2 h3 { margin: 0; font-size: 18px; letter-spacing: 0.3px; }
.ok-subject-card-v2 p { margin: 2px 0 0; font-size: 14px; color: var(--gray-text); }
.ok-subject-btn-v2 {
display: inline-block; align-self: flex-start; background: var(--ok-purple); color: #fff; font-weight: 600;
font-size: 12px; padding: 8px 16px; border-radius: 10px; margin: 12px 0 14px; transition: filter 0.15s;
}
.ok-subject-card-v2:hover .ok-subject-btn-v2 { filter: brightness(1.1); }
.ok-subject-card-v2.blue .ok-subject-btn-v2 { background: var(--ok-blue); }
.ok-subject-card-v2.green .ok-subject-btn-v2 { background: var(--ok-green); }
.ok-subject-tags { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 4px; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 12px; }
.ok-subject-tags > div { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ok-subject-tags img { width: 24px; height: 24px; object-fit: contain; }
/* ---------- Home/Hub.cshtml — "trung tâm" ứng dụng cho người đã đăng nhập + có bé đang chọn
(khác Landing.cshtml — trang giới thiệu cho khách, xem HomeController.Index) ---------- */
/* Home/Hub.cshtml render CẢ 2 bố cục cùng lúc — CSS chọn 1 theo thiết bị thay vì server đoán
(server không biết pointer:coarse). Mặc định (máy tính): hiện bản đầy đủ _LandingBody, ẩn bản
gọn. Trên thiết bị chạm: đảo ngược — bản đầy đủ được thiết kế cho màn rộng, hiện trên
tablet/điện thoại bị nhận xét "xấu" (quá nhiều mục quảng bá không cần với người đã dùng app). */
.ok-hub-touch-only { display: none; }
@media (pointer: coarse) {
.ok-hub-desktop-only { display: none; }
.ok-hub-touch-only { display: block; }
}
.ok-hub-page { max-width: 900px; margin: 0 auto; padding: 20px 20px 60px; display: flex; flex-direction: column; gap: 18px; }
/* Chừa chỗ cho avatar/nút Ủng hộ nổi góc trên (chỉ có trên thiết bị chạm — xem .ok-immersive-el);
desktop vẫn dùng .ok-navbar thường (không nổi) nên không cần đệm thêm. */
@media (pointer: coarse) {
.ok-hub-page { padding-top: 82px; }
}
/* Bản gọn của .ok-achieve-grid cho Hub — bỏ Kho báu/Huy hiệu (chưa có hệ thống nào đứng sau,
xem Hub.cshtml) nên chỉ còn 4 mục, dồn về đúng 1 hàng thay vì lưới 3 cột/2 hàng như bản đầy đủ. */
.ok-hub-achieve-grid { grid-template-columns: repeat(4, 1fr); gap: 10px 6px; }
.ok-hub-achieve-grid img { width: 26px; height: 26px; }
.ok-hub-achieve-grid b { font-size: 15px; }
.ok-hub-achieve-grid small { font-size: 12px; }
.ok-hub-continue-card {
display: flex; align-items: center; gap: 14px; background: linear-gradient(160deg, var(--ok-blue), var(--ok-royal-blue-2));
color: #fff; border-radius: var(--radius-lg); padding: 16px 20px; text-decoration: none;
box-shadow: 0 10px 24px rgba(59,130,246,0.35); transition: transform 0.15s, box-shadow 0.15s;
}
.ok-hub-continue-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(59,130,246,0.45); }
.ok-hub-continue-icon {
width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.2); flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.ok-hub-continue-icon img { width: 30px; height: 30px; object-fit: contain; }
.ok-hub-continue-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ok-hub-continue-text span { font-size: 12px; opacity: 0.85; font-weight: 600; }
.ok-hub-continue-text b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-hub-continue-arrow { font-size: 20px; font-weight: 600; flex-shrink: 0; }
.ok-subject-tags span { font-size: 12px; color: var(--navy); font-weight: 600; line-height: 1.2; }
/* ---------- Dành cho phụ huynh ---------- */
.ok-parent-banner {
background: linear-gradient(135deg, var(--ok-royal-blue-1), var(--ok-royal-blue-2));
border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 14px;
display: flex; align-items: center; gap: 24px; flex-wrap: wrap; position: relative; overflow: visible;
}
.ok-parent-img { width: 110px; height: auto; flex-shrink: 0; }
.ok-parent-copy { flex: 0 0 220px; }
.ok-parent-copy h3 { color: #fff; margin: 0 0 6px; font-size: 17px; }
.ok-parent-copy p { color: rgba(255,255,255,0.8); font-size: 14px; margin: 0 0 12px; line-height: 1.5; }
.ok-parent-cta { display: inline-block; background: var(--ok-purple); color: #fff; font-weight: 600; font-size: 12.5px; padding: 10px 16px; border-radius: 10px; }
.ok-parent-cta:hover { background: var(--ok-purple-dark); }
.ok-parent-features { flex: 1 1 400px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 14px; }
.ok-parent-features > div { display: flex; align-items: center; gap: 8px; }
.ok-parent-features img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.ok-parent-features b { display: block; color: #fff; font-size: 16px; }
.ok-parent-features small { display: block; color: rgba(255,255,255,0.65); font-size: 13px; }
.ok-parent-ship {
position: absolute; right: 6px; bottom: -22px; width: 130px; display: none;
filter: drop-shadow(0 8px 10px rgba(0,0,0,0.35));
}
@media (min-width: 900px) { .ok-parent-ship { display: block; } }
/* ---------- Footer tin cậy ---------- */
.ok-trust-footer {
background: linear-gradient(135deg, var(--ok-indigo), var(--ok-indigo-dark));
border-radius: var(--radius-lg); padding: 22px 28px; margin-bottom: 30px;
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 18px;
position: relative; overflow: visible;
}
.ok-trust-footer > div { display: flex; align-items: center; gap: 10px; }
.ok-trust-footer img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.ok-trust-footer b { display: block; color: #fff; font-size: 12.5px; }
.ok-trust-footer small { display: block; color: rgba(255,255,255,0.65); font-size: 12px; }
img.ok-trust-chest { position: absolute; right: 10px; top: -34px; width: 76px; height: auto; display: none; }
@media (min-width: 900px) { img.ok-trust-chest { display: block; } }
.ok-section-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--navy); margin: 30px 0 16px; }
/* Ảnh bìa khối hero đầu trang Đảo Toán — đổi theo TỪNG cuộc thi đang xem (xem
ExamCatalogService.HeroBackgroundByCompetitionCode + style inline ở Exam/Index.cshtml).
Ảnh dưới đây chỉ là fallback nếu vì lý do gì đó không có style inline. */
.ok-olympic-hero {
width: 100%; max-width: 100%; aspect-ratio: 1752 / 390; min-height: 260px;
background-image: url('/images/octokids/math-olympic-bg.jpg');
background-size: cover; background-position: center;
background-color: #6a5fd8; overflow: hidden;
position: relative;
}
.ok-olympic-hero-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px,1.4vw,14px); width: 46%; padding-left: clamp(16px,3vw,40px); }
.ok-olympic-badge {
display: inline-block; align-self: flex-start; background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark));
color: #fff; font-weight: 600; font-size: clamp(12px, 1.6vw, 15px); padding: clamp(4px,0.8vw,7px) clamp(14px,2vw,22px);
border-radius: 14px; box-shadow: 0 4px 0 var(--ok-purple-dark);
}
.ok-olympic-title {
font-size: clamp(28px, 5.5vw, 56px); font-weight: 900; line-height: 1; color: #fff; margin: 0;
text-shadow: -2px -2px 0 #1a6fd6, 2px -2px 0 #1a6fd6, -2px 2px 0 #1a6fd6, 2px 2px 0 #1a6fd6, 3px 4px 6px rgba(0,0,0,0.35);
}
.ok-olympic-ribbon {
display: inline-block; align-self: flex-start; background: linear-gradient(180deg, #f5c96b, var(--ok-gold-dark));
color: #4a2f00; font-weight: 600; font-size: clamp(11px, 1.4vw, 13px); padding: clamp(4px,0.7vw,7px) clamp(10px,1.6vw,18px);
border-radius: 20px; box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
/* Bản gọn thay ảnh bìa lớn — chỉ 1 dòng text "Danh mục - Cuộc thi", trên thiết bị chạm để
nhường màn hình cho nội dung bên dưới ngay từ đầu, không cần cuộn qua cả banner minh họa. */
.ok-olympic-hero-compact { display: none; }
/* Chỉ đổi ảnh bìa -> text gọn khi CẢ 2: thiết bị chạm VÀ trang đang ở chế độ nổi thật sự
(body.ok-immersive — trang đã đặt cờ + có bé đang chọn, xem _Layout.cshtml). Thiếu điều kiện
body.ok-immersive sẽ lỗi thật đã gặp: khách (chưa có bé, .ok-navbar cũ vẫn hiện) trên thiết bị
chạm bị hiện CẢ .ok-navbar cũ VÀ dòng text gọn cùng lúc, còn ảnh bìa lớn thật sự lại mất luôn. */
@media (pointer: coarse) {
body.ok-immersive .ok-olympic-hero { display: none; }
body.ok-immersive .ok-olympic-hero-compact {
display: block; font-family: var(--font-heading); font-weight: 600; font-size: 17px;
color: var(--navy); text-align: center; padding: 22px 74px 8px;
/* 74px trái/phải né đúng vùng avatar góc trái + nút Ủng hộ góc phải (~66px mỗi bên) —
căn giữa để không lấn 2 khối nổi đó, xem phản hồi thật đã gặp lúc text đè lên avatar. */
}
body.ok-immersive .ok-olympic-hero-compact span:first-child { color: var(--ok-purple-dark); }
}
/* Thanh 3 bộ lọc: Danh mục / Cuộc thi / Khối lớp — nằm ngay dưới ảnh bìa. */
.ok-filter-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.ok-filter-toolbar h2 { margin: 0; font-size: 20px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.ok-filter-toolbar h2 img { width: 22px; height: 22px; object-fit: contain; }
.ok-filter-toolbar p { margin: 2px 0 0; font-size: 14px; color: var(--gray-text); }
.ok-filter-toolbar-selects { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ok-filter-toolbar-selects select {
border: 2px solid #e7e0cc; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 600;
color: var(--navy); background: #fff;
}
/* Nút chuyển đổi Luyện tập <-> Thử thách — vàng gradient khi ở Luyện tập (mời bấm vào
thử thách), tím gradient khi đang ở Thử thách (mời quay lại luyện tập). */
.ok-mode-toggle-btn img { width: 18px; height: 18px; object-fit: contain; }
.ok-mode-toggle-btn {
display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none;
font-weight: 600; font-size: 13px; padding: 10px 18px; border-radius: 12px; color: #4a2f00;
background: linear-gradient(160deg, var(--ok-gold), var(--ok-gold-dark));
box-shadow: 0 4px 0 #c98600;
}
.ok-mode-toggle-btn:hover { filter: brightness(1.05); }
.ok-mode-toggle-btn.challenge {
color: #fff; background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); box-shadow: 0 4px 0 var(--ok-purple-dark);
}
/* ---------- Chế độ "Luyện tập" — hàng 2 cột: Luyện tập nhanh | Thử thách hằng ngày ---------- */
.ok-panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; margin: 24px 0; }
.ok-panel-row.single { grid-template-columns: 1fr; }
/* Tablet ngang (VD iPad Air 1180px) vẫn đủ rộng cho 2 cột theo max-width:640px cũ, nhưng 2 thẻ
cạnh nhau bị bóp hẹp khó bấm trên thiết bị chạm — ép full width bất kể độ rộng thật. */
@media (pointer: coarse) {
.ok-panel-row { grid-template-columns: 1fr; }
}
.ok-panel-card {
display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg);
padding: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); text-decoration: none; color: var(--navy);
}
.ok-panel-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ok-panel-icon {
flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center;
justify-content: center; font-size: 20px;
}
.ok-panel-icon.quick { background: #f1ecff; }
.ok-panel-icon.daily { background: rgba(255,255,255,0.35); }
.ok-panel-icon.foundational { background: #efeaff; }
.ok-panel-icon.enrichment { background: #e6f9ee; }
.ok-panel-icon.quick img, .ok-panel-icon.daily img,
.ok-panel-icon.foundational img, .ok-panel-icon.enrichment img { width: 24px; height: 24px; object-fit: contain; border-radius: 6px; }
.ok-panel-header h3 { margin: 0; font-size: 18px; color: var(--navy); }
.ok-panel-header p { margin: 2px 0 0; font-size: 14px; color: var(--gray-text); }
/* Luyện tập nhanh — 4 cột, mỗi cột 1 hàng ngang: icon trái, text giữa, nút mũi tên tròn
phải; mỗi cột 1 màu pastel khác nhau (không đều màu như nhau). */
.ok-quick-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ok-quick-mini-item {
display: flex; flex-direction: row; align-items: center; text-align: left; gap: 8px;
border-radius: var(--radius-md); padding: 10px 8px; text-decoration: none; color: var(--navy);
border: 2px solid transparent; transition: border-color 0.15s ease;
}
.ok-quick-mini-item.purple { background: #f1ecff; }
.ok-quick-mini-item.blue { background: #eaf3ff; }
.ok-quick-mini-item.green { background: #eafbf1; }
.ok-quick-mini-item.orange { background: #fff4e8; }
.ok-quick-mini-item:hover { border-color: currentColor; }
.ok-quick-mini-icon {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,0.75);
display: flex; align-items: center; justify-content: center;
}
.ok-quick-mini-icon img { width: 34px; height: 34px; object-fit: contain; }
.ok-quick-mini-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ok-quick-mini-text b { font-size: 14px; white-space: nowrap; }
.ok-quick-mini-text span { font-size: 12px; color: var(--gray-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-quick-mini-arrow {
flex-shrink: 0; margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; display: flex; align-items: center;
justify-content: center; font-size: 13px; font-weight: 600; color: var(--navy); box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
@media (max-width: 640px) {
.ok-quick-mini-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Thẻ "Thử thách hằng ngày" — chỉ hiện ở danh mục Olympic vì Exam/DailyChallenge hiện chỉ
chọn đề trong danh mục đó. 3 mục tiêu con + 1 ảnh minh hoạ phần thưởng, xếp 4 cột. 3 mục
tiêu luôn ở trạng thái 0/mục tiêu — chưa có hệ theo dõi tiến độ theo ngày ở backend nên
không bịa số đã đạt được (giao diện trước, dữ liệu sau). */
.ok-daily-promo-card { background: linear-gradient(135deg, var(--ok-gold), var(--ok-gold-dark)); }
.ok-daily-promo-card .ok-panel-header h3,
.ok-daily-promo-card .ok-panel-header p { color: #4a2f00; }
.ok-daily-promo-card .ok-panel-header p { opacity: 0.85; }
.ok-daily-goals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: stretch; margin-bottom: 16px; }
.ok-daily-goal {
background: rgba(255,255,255,0.55); border-radius: var(--radius-md); padding: 10px; box-shadow: 0 3px 8px rgba(0,0,0,0.06);
}
.ok-daily-goal-head { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 600; color: #4a2f00; margin-bottom: 4px; }
.ok-daily-goal-head b { font-size: 11px; }
.ok-daily-goal-track { height: 7px; border-radius: 6px; background: rgba(255,255,255,0.7); overflow: hidden; }
.ok-daily-goal-fill { height: 100%; border-radius: 6px; background: #4a2f00; }
.ok-daily-goal-reward { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 600; color: #4a2f00; opacity: 0.85; }
.ok-daily-goal-reward img { width: 14px; height: 14px; object-fit: contain; }
.ok-daily-goal-giftbox { display: flex; align-items: center; justify-content: center; }
.ok-daily-goal-giftbox img { width: 100%; max-width: 124px; height: auto; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); }
.ok-daily-promo-cta {
margin-top: auto; display: block; text-align: center; color: #fff; font-weight: 600;
font-size: 13.5px; padding: 12px 18px; border-radius: 12px;
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); box-shadow: 0 4px 0 var(--ok-purple-dark);
}
@media (max-width: 640px) {
.ok-panel-row { grid-template-columns: 1fr; }
.ok-daily-goals { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Chế độ "Luyện tập" — lưới thẻ chủ đề, mỗi thẻ 1 màu viền/nền khác nhau ---------- */
.ok-lesson-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 10px; }
/* Trên máy tính, cố định đúng 6 cột (không auto-fit giãn theo số lượng thẻ) — ít hơn 6 chủ đề
vẫn giữ nguyên kích thước thẻ như khi đủ 6, chỉ để trống ô còn lại, thay vì thẻ bị kéo giãn to
ra để lấp đầy hàng. */
@media (min-width: 900px) {
.ok-lesson-grid { grid-template-columns: repeat(6, 1fr); }
}
/* Trên thiết bị chạm, thay lưới (dễ vỡ dòng, khó bấm chính xác khi cuộn dọc cả trang) bằng 1
hàng cuộn ngang vuốt được — cùng kiểu đã dùng cho .ok-curriculum-path (lộ trình Nền tảng). */
@media (pointer: coarse) {
.ok-lesson-grid {
display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth;
padding-bottom: 6px; scrollbar-width: thin;
/* width:100%+min-width:0 bắt buộc — thiếu 2 dòng này, khối flex nowrap tự giãn theo tổng độ
rộng các thẻ con (5 thẻ × 220px vượt xa màn hình) thay vì giữ đúng độ rộng container rồi
cuộn nội bộ, kéo theo layout viewport của cả trang bị nong rộng ra hàng nghìn px trên
mobile (m 1 lỗi thật đã gặp — mọi phần tử position:fixed khác trên trang, kể cả
.ok-immersive-*, tính toán lệch hẳn theo layout viewport bị nong này). */
width: 100%; min-width: 0;
}
.ok-lesson-card { flex: 0 0 220px; }
/* Ẩn thanh cuộn nhưng vẫn cuộn/vuốt được bình thường — chỉ ẩn phần hiển thị thanh cuộn. */
.ok-lesson-grid { scrollbar-width: none; -ms-overflow-style: none; }
.ok-lesson-grid::-webkit-scrollbar { display: none; }
}
.ok-lesson-card {
display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--navy);
border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); border: 2px solid transparent;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ok-lesson-card:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(0,0,0,0.14); }
.ok-lesson-card.green { border-color: var(--ok-green); background: #eafbf1; }
.ok-lesson-card.orange { border-color: var(--ok-orange); background: #fff4e8; }
.ok-lesson-card.blue { border-color: var(--ok-blue); background: #eaf3ff; }
.ok-lesson-card.purple { border-color: var(--ok-purple); background: #f1ecff; }
.ok-lesson-card.pink { border-color: var(--ok-pink); background: #ffeef4; }
.ok-lesson-card img { width: 52px; height: 52px; object-fit: contain; }
.ok-lesson-card h3 { margin: 0; font-size: 16px; }
.ok-lesson-card p { margin: 0; font-size: 14px; color: var(--gray-text); line-height: 1.4; }
.ok-lesson-progress { margin-top: 4px; }
.ok-lesson-progress-track { height: 6px; border-radius: 6px; background: rgba(0,0,0,0.08); overflow: hidden; margin-bottom: 4px; }
.ok-lesson-progress-fill { height: 100%; border-radius: 6px; background: currentColor; }
.ok-lesson-progress span { font-size: 12px; color: var(--gray-text); font-weight: 600; }
.ok-lesson-card.teal { border-color: var(--teal-mid); background: #e8f9fb; }
/* ---------- "Toán tư duy" — Nền tảng (lộ trình) + Ngẫu nhiên (lưới) ---------- */
.ok-curriculum-section { margin-bottom: 22px; }
/* Dải tóm tắt khi đã xong hết Nền tảng — ẩn lộ trình, bấm để mở lại (JS toggle class .collapsed). */
.ok-curriculum-summary-bar {
display: none; width: 100%; align-items: center; justify-content: space-between; background: #eafbf1;
border: 2px solid var(--ok-green); border-radius: var(--radius-md); padding: 12px 18px; font-weight: 600;
color: var(--navy); cursor: pointer; font-size: 14px;
}
.ok-curriculum-foundational.collapsed .ok-curriculum-summary-bar { display: flex; }
.ok-curriculum-foundational.collapsed .ok-curriculum-path-outer { display: none; }
.ok-curriculum-summary-toggle { color: var(--ok-green); font-weight: 600; }
.ok-curriculum-path-outer { display: flex; align-items: center; gap: 8px; }
.ok-curriculum-path {
display: flex; gap: 0; overflow-x: auto; scroll-behavior: smooth; padding: 6px 2px 12px; scrollbar-width: thin;
}
.ok-curriculum-step {
position: relative; flex: 0 0 200px; display: flex; flex-direction: column; align-items: center; gap: 6px;
text-align: center; background: #fff; border: 2px solid #e3e7f0; border-radius: var(--radius-lg);
padding: 16px 12px; margin-left: 28px;
}
.ok-curriculum-step:first-child { margin-left: 0; }
.ok-curriculum-step-connector {
position: absolute; left: -28px; top: 50%; width: 28px; height: 3px; background: #d8dee8; transform: translateY(-50%);
}
.ok-curriculum-step.done { border-color: var(--ok-green); background: #f3fdf6; }
.ok-curriculum-step.done .ok-curriculum-step-connector { background: var(--ok-green); }
.ok-curriculum-step.current { border-color: var(--ok-purple); box-shadow: 0 0 0 4px rgba(139,92,246,0.15); }
.ok-curriculum-step-badge {
width: 30px; height: 30px; border-radius: 50%; background: #e3e7f0; color: var(--navy); font-weight: 600;
display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.ok-curriculum-step.done .ok-curriculum-step-badge { background: var(--ok-green); color: #fff; }
.ok-curriculum-step.current .ok-curriculum-step-badge { background: var(--ok-purple); color: #fff; }
.ok-curriculum-step img { width: 80px; height: 80px; object-fit: contain; }
.ok-curriculum-step h4 { margin: 0; font-size: 14px; color: var(--navy); }
.ok-curriculum-progress { font-size: 12px; color: var(--gray-text); font-weight: 600; }
.ok-curriculum-step-actions, .ok-curriculum-card-actions { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.ok-curriculum-btn {
flex: 1; text-align: center; text-decoration: none; font-size: 12.5px; font-weight: 600; padding: 6px 4px;
border-radius: 10px; color: #fff;
}
.ok-curriculum-btn.explore { background: var(--ok-purple); }
.ok-curriculum-btn.review { background: var(--ok-blue); }
.ok-curriculum-btn:hover { opacity: 0.88; }
.ok-curriculum-card { align-items: center; text-align: center; }
.ok-curriculum-card img { width: 82px; height: 82px; object-fit: contain; }
.ok-curriculum-card h3 { font-size: 15px; }
@media (max-width: 640px) {
.ok-curriculum-step { flex: 0 0 160px; padding: 12px 8px; }
.ok-curriculum-step img { width: 44px; height: 44px; }
}
/* ---------- Chế độ "Thử thách" — lưới đảo theo đề thi thật ---------- */
/* Đã bỏ cột "Top học sinh" — chỉ còn 1 cột full-width. */
.ok-islands-leaderboard-row { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
/* min-width:0 — mặc định grid item có min-width:auto, khiến nó tự nới rộng theo đúng độ rộng
nội dung .ok-level-grid (20 đảo x 240px) thay vì bị ép co lại, làm .ok-level-grid không còn
"overflow-x:auto" cuộn nội bộ được nữa mà tràn hẳn ra ngoài card. */
.ok-islands-leaderboard-row > div:first-child { min-width: 0; }
.ok-level-scroll-outer { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ok-level-scroll-btn {
flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #e7e0cc; background: #fff;
color: var(--navy); font-size: 18px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ok-level-scroll-btn:hover { border-color: var(--ok-purple); color: var(--ok-purple); }
/* Lưới đảo xếp 2 hàng, tràn ngang — cuộn bằng 2 nút mũi tên thay vì xuống dòng. */
.ok-level-grid {
display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 240px;
gap: 14px; overflow-x: auto; scroll-behavior: smooth; padding: 4px 2px 10px; scrollbar-width: thin;
min-width: 0; -webkit-overflow-scrolling: touch; cursor: grab;
}
/* Đang kéo chuột để cuộn (xem script kéo-thả trong Exam/Index.cshtml) — đổi con trỏ + tắt
scroll-behavior mượt (mượt làm scrollLeft cập nhật trễ theo tay, cảm giác lag khi kéo) và
tắt bôi đen chữ/ảnh lúc rê chuột nhanh. */
.ok-level-grid.dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.ok-level-grid.dragging .ok-level-card { pointer-events: none; }
/* Ẩn thanh cuộn trên thiết bị chạm — vuốt/kéo để cuộn vẫn hoạt động bình thường, chỉ ẩn phần
hiển thị thanh cuộn (đỡ rối mắt, đằng nào trên chạm cũng không cần thanh cuộn để bấm). */
@media (pointer: coarse) {
.ok-level-grid, .ok-realexam-grid { scrollbar-width: none; -ms-overflow-style: none; }
.ok-level-grid::-webkit-scrollbar, .ok-realexam-grid::-webkit-scrollbar { display: none; }
/* Rút còn 1 hàng — 2 hàng trên thiết bị chạm khiến bé phải kéo dài để tìm đảo tiếp theo (đảo
làm tự do, không tuần tự). Bù lại bằng script tự cuộn tới đảo "Chưa làm" đầu tiên lúc tải
trang (xem _ExamIslandGrid.cshtml) nên không cần kéo xa để tìm — vẫn kéo lại được bình
thường để xem/làm lại đảo cũ. */
.ok-level-grid { grid-template-rows: repeat(1, auto); }
}
/* Ảnh đảo là ![]()
trong — trình duyệt mặc định cho kéo ảnh thành "ghost drag" (kéo ra
khỏi trang), phá luôn kéo-để-cuộn tự viết. Tắt hẳn hành vi kéo gốc của trình duyệt trên
ảnh này (giống cách đã tắt "kéo emoji" ở câu dragClassify trước đó). */
.ok-level-card img { -webkit-user-drag: none; user-drag: none; }
.ok-level-card {
display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--navy);
background: var(--cream); border: 2px solid transparent; border-radius: var(--radius-lg); padding: 14px 10px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08); text-align: center;
}
.ok-level-card img { width: 156px; height: 156px; object-fit: contain; border-radius: 12px; }
.ok-level-card b { font-size: 14px; }
/* "Cấp N" + độ khó cùng 1 hàng thay vì xếp chồng — gọn hơn, dành chỗ cho hàng avatar khối
bên dưới. */
.ok-level-card-title { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.ok-level-card .level-tag { font-size: 11px; font-weight: 600; }
.ok-level-card.level-1 .level-tag, .ok-level-card.level-2 .level-tag { color: var(--ok-green); }
.ok-level-card.level-3 .level-tag { color: var(--ok-blue); }
.ok-level-card.level-4 .level-tag { color: var(--ok-orange); }
.ok-level-card.level-5 .level-tag { color: var(--red); }
.ok-level-card:hover { border-color: var(--ok-purple); box-shadow: 0 8px 20px rgba(139,92,246,0.35); }
/* Đảo bé đang dang dở, cuộn/nhấp nháy tới khi đăng nhập lại (xem Exam/Index.cshtml script +
AccountController.ResolveResumeRedirectAsync). */
.ok-level-card.focus-highlight {
border-color: var(--ok-purple); animation: ok-focus-pulse 0.7s ease-in-out 2;
}
@keyframes ok-focus-pulse {
0%, 100% { box-shadow: 0 8px 20px rgba(139,92,246,0.35); }
50% { box-shadow: 0 0 0 8px rgba(139,92,246,0.25), 0 8px 20px rgba(139,92,246,0.35); }
}
/* Thông tin đề thi (thời gian/số câu/điểm cao nhất) gộp thẳng vào thẻ đảo, 1 hàng cho gọn
— bấm thẻ là vào làm bài luôn, không còn panel xem trước riêng. */
.ok-level-card-stats { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; }
.ok-level-card-stats span { font-size: 14px; color: var(--gray-text); white-space: nowrap; }
/* Avatar khối (VD: Mầm non, Khối 1) — cho biết đảo/đề này dành cho khối nào, quan trọng nhất
khi đang lọc "Tất cả khối" và nhiều khối trộn lẫn trong cùng 1 danh sách. */
.ok-grade-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--navy); }
.ok-grade-tag img { width: 18px; height: 18px; object-fit: cover; border-radius: 50%; }
/* Phần thưởng CÓ THỂ đạt khi vượt đảo (mốc thiết kế cố định, không phải điểm bé đã đạt). */
.ok-level-card-rewards { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; }
.ok-level-card-rewards span { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 500; color: var(--ok-gold-dark); }
.ok-level-card-rewards img { width: 14px; height: 14px; object-fit: contain; }
.ok-boss-card {
background: linear-gradient(160deg, var(--ok-purple), var(--ok-indigo-dark)); border-radius: var(--radius-lg);
padding: 20px; text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.ok-boss-card img { width: 70px; height: 70px; object-fit: cover; border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.ok-boss-card h3 { margin: 4px 0 0; font-size: 14px; }
.ok-boss-card p { margin: 0 0 8px; font-size: 11.5px; color: rgba(255,255,255,0.85); }
.ok-boss-btn { background: var(--ok-gold); color: #4a2f00; font-weight: 600; font-size: 12.5px; padding: 9px 16px; border-radius: 10px; }
/* Bản thu nhỏ — cùng cỡ với ok-leaderboard-card (cột 25% bên cạnh khối đề thi thật). */
/* Bố cục ngang — text/nút bên trái, ảnh Boss bên phải (khác kiểu xếp dọc/căn giữa mặc định
ở trên), vẫn giữ đúng khổ hẹp bằng ok-leaderboard-card. */
.ok-boss-card-compact { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; padding: 16px 14px; gap: 8px; }
.ok-boss-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ok-boss-card-compact img { width: 122px; height: auto; object-fit: contain; border-radius: 0; box-shadow: none; flex-shrink: 0; }
.ok-boss-card-compact h3 { font-size: 20.5px; margin: 0; }
.ok-boss-card-compact p { font-size: 14.5px; margin: 0; }
.ok-boss-card-compact .ok-boss-btn { padding: 7px 14px; font-size: 12px; margin-top: 2px; }
.ok-boss-progress { display: flex; align-items: center; gap: 8px; width: 100%; }
.ok-boss-progress-track { flex: 1; height: 7px; border-radius: 6px; background: rgba(255,255,255,0.25); overflow: hidden; }
.ok-boss-progress-fill { height: 100%; border-radius: 6px; background: var(--ok-gold); }
.ok-boss-progress span { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.95); white-space: nowrap; }
/* Cột 1 (đề thi thật, 75%) + cột 2 (BOSS, 25%) — cùng tỉ lệ với hàng đảo phía trên để 2 thẻ
bên phải (Top học sinh / BOSS) đều nhau. */
.ok-reward-leaderboard-row { display: grid; grid-template-columns: 3fr 1fr; gap: 16px; margin-bottom: 20px; align-items: stretch; }
.ok-reward-card, .ok-leaderboard-card, .ok-realexam-card { background: #fff; border-radius: var(--radius-lg); padding: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); min-width: 0; }
.ok-reward-card h3, .ok-leaderboard-card h3, .ok-realexam-card h3 { margin: 0; font-size: 15px; color: var(--navy); }
.ok-reward-chests { display: flex; gap: 20px; margin-bottom: 10px; }
.ok-reward-chests > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ok-reward-chests img { width: 54px; height: 54px; object-fit: contain; }
.ok-reward-chests span { font-size: 12px; font-weight: 600; color: var(--ok-gold-dark); }
.ok-reward-card p { margin: 0; font-size: 12px; color: var(--gray-text); }
/* ---------- Khối "Đề thi thật" (Vượt đảo) ---------- */
.ok-realexam-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ok-realexam-filters { display: flex; gap: 8px; }
.ok-realexam-filters select {
border: 2px solid #e7e0cc; border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 600;
color: var(--navy); background: #fff;
}
.ok-realexam-grid { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; padding: 2px 2px 8px; scrollbar-width: thin; }
.ok-realexam-item {
flex: 0 0 190px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--navy);
background: var(--cream); border: 2px solid var(--ok-gold); border-radius: var(--radius-lg); padding: 14px 10px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08); text-align: center;
}
.ok-realexam-item:hover { border-color: var(--ok-orange); box-shadow: 0 8px 20px rgba(255,184,0,0.35); }
.ok-realexam-item.focus-highlight { border-color: var(--ok-orange); animation: ok-focus-pulse 0.7s ease-in-out 2; }
.ok-realexam-item img { width: 48px; height: 48px; object-fit: contain; }
/* Ghi đè cỡ ảnh chung ở trên — icon avatar khối trong ok-grade-tag phải nhỏ (18px) như ở
thẻ đảo, không to bằng icon chủ đề đầu thẻ. */
.ok-realexam-item .ok-grade-tag img { width: 18px; height: 18px; object-fit: cover; border-radius: 50%; }
.ok-realexam-item b { font-size: 13px; margin-top: 2px; }
.ok-realexam-item-score { font-size: 13px; color: var(--gray-text); }
.ok-realexam-item-rewards { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; }
.ok-realexam-item-rewards span { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 500; color: var(--ok-gold-dark); }
.ok-realexam-item-rewards img { width: 14px; height: 14px; object-fit: contain; }
@media (max-width: 1180px) {
.ok-reward-leaderboard-row { grid-template-columns: 1fr; }
}
/* Máy tính bảng — thẻ đảo 240px vẫn hơi to so với chiều rộng màn hình, thu nhỏ lại để 1 màn
hình thấy trọn hơn 2-3 thẻ thay vì chỉ 1 thẻ rưỡi. Vẫn giữ cuộn ngang + 2 hàng, chỉ đổi
kích thước. */
@media (max-width: 900px) {
.ok-level-grid { grid-auto-columns: 170px; gap: 10px; }
.ok-level-card { padding: 10px 8px; }
/* ">img" (con trực tiếp) chứ không phải "img" thường — tránh vồ luôn icon avatar khối
18px nằm lồng bên trong .ok-grade-tag ở cùng thẻ, chỉ thu nhỏ đúng ảnh đảo. */
.ok-level-card > img { width: 110px; height: 110px; }
}
/* Điện thoại — thu nhỏ thêm 1 nấc nữa, ẩn bớt nút mũi tên cuộn (vuốt tay tự nhiên hơn bấm nút
nhỏ trên màn cảm ứng) nhưng vẫn để lại nếu người dùng quen bấm. */
@media (max-width: 480px) {
.ok-level-grid { grid-auto-columns: 130px; gap: 8px; }
.ok-level-card > img { width: 88px; height: 88px; }
.ok-level-card b { font-size: 12.5px; }
.ok-level-card-stats, .ok-level-card-rewards { font-size: 11px; }
}
.ok-daily-challenge-banner {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
background: linear-gradient(135deg, var(--ok-purple), var(--ok-purple-dark));
border-radius: var(--radius-lg); padding: 22px 26px; margin: 30px 0;
}
.ok-daily-mascot { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: #fff; padding: 4px; flex-shrink: 0; }
.ok-daily-copy { flex: 1 1 260px; }
.ok-daily-copy h3 { color: #fff; margin: 0 0 4px; font-size: 16px; }
.ok-daily-copy p { color: rgba(255,255,255,0.85); margin: 0; font-size: 12px; }
/* =========================================================
Shell "Đảo Toán" — sidebar trái cố định + nội dung theo từng chế độ
========================================================= */
.ok-subject-shell { display: flex; align-items: flex-start; gap: 0; width: 100%; }
.ok-subject-sidebar {
flex: 0 0 220px; background: linear-gradient(180deg, var(--ok-indigo) 0%, var(--ok-indigo-dark) 100%);
min-height: calc(100vh - 84px); padding: 20px 14px 60px; display: flex; flex-direction: column; gap: 16px;
position: sticky; top: 0; align-self: stretch; position: relative; overflow: visible;
}
/* Trên thiết bị chạm (tablet/điện thoại) ẩn hẳn sidebar này — cùng class dùng chung cho cả
_CategorySidebar.cshtml (chuyển cuộc thi trong 1 danh mục) lẫn sidebar riêng của Class/Index
("Lớp học riêng"/"Gửi yêu cầu mới") — nhường trọn màn hình cho nội dung, khớp tinh thần chrome
nổi .ok-immersive-*. Mục "Gửi yêu cầu mới" của Class vẫn còn đường vào khác: dropdown tài
khoản nổi góc trên (xem _Layout.cshtml). Chuyển đề trong 1 danh mục (HKIMO/FMO...) tạm thời
không có đường thay thế trên chạm — chấp nhận được vì các mục đó đa số "Sắp có" (disabled).
*/
@media (pointer: coarse) {
.ok-subject-sidebar { display: none; }
}
.ok-subject-sidebar-tile {
display: flex; align-items: center; gap: 10px; background: var(--ok-gold); color: #4a2f00; font-weight: 600;
font-size: 14px; border-radius: 14px; padding: 12px 14px; box-shadow: 0 4px 0 var(--ok-gold-dark);
}
.ok-subject-sidebar-tile img { width: 26px; height: 26px; object-fit: contain; }
.ok-subject-nav { display: flex; flex-direction: column; gap: 6px; }
.ok-subject-nav-item {
display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.8); font-weight: 600; font-size: 13px;
padding: 11px 14px; border-radius: 12px;
}
.ok-subject-nav-icon { font-size: 17px; line-height: 1; display: inline-flex; align-items: center; }
.ok-subject-nav-icon img { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; }
.ok-subject-nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ok-subject-nav-item.active {
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff;
box-shadow: 0 4px 12px rgba(139,92,246,0.5);
}
.ok-subject-nav-item.disabled { opacity: 0.45; cursor: default; }
.ok-subject-nav-item.disabled:hover { background: none; color: rgba(255,255,255,0.8); }
.ok-subject-nav-item small { font-size: 10px; font-weight: 600; margin-left: auto; white-space: nowrap; }
/* "nổi trên bar" — mascot to hơn khung sidebar, tràn cả xuống dưới lẫn sang phải vào
vùng nội dung bên cạnh để tạo cảm giác nổi bật, không bị gò bó trong sidebar. */
.ok-subject-sidebar-mascot {
width: 150%; max-width: 240px; margin: auto -70px -50px -20px; display: block;
filter: drop-shadow(0 10px 14px rgba(0,0,0,0.35)); position: relative; z-index: 2;
}
/* max-width:100vw ép cứng theo viewport thật — trên 1 số trang (VD Exam/Index dạng Olympic),
khi .ok-subject-sidebar bị ẩn (@media pointer:coarse) chỉ còn đúng 1 phần tử flex trong
.ok-subject-shell, flex:1 1 0 + min-width:0 lẽ ra phải ép đúng bằng bề rộng container còn
lại nhưng có lúc vẫn giãn theo nội dung con (xác nhận qua devtools: rộng gấp ~3.2 lần đúng
bề rộng .ok-subject-shell dù mọi thuộc tính flex tính đúng) — max-width:100vw chặn cứng bất
kể nguyên nhân sâu xa, không phụ thuộc kết quả tính flex-basis. */
.ok-subject-main { flex: 1 1 0; min-width: 0; max-width: 100vw; padding: 0 0 60px; }
.ok-subject-pad { padding: 0 28px; }
.ok-subject-progress-card {
position: absolute; left: clamp(16px,3vw,36px); bottom: clamp(14px,3vw,26px);
background: rgba(8,20,52,0.78); border-radius: 14px; padding: 12px 18px; color: #fff; width: min(300px, 90%);
}
.ok-subject-progress-card p { margin: 0 0 6px; font-size: 11.5px; color: rgba(255,255,255,0.85); display: flex; justify-content: space-between; gap: 8px; }
.ok-subject-progress-card .track { height: 8px; border-radius: 6px; background: rgba(255,255,255,0.25); overflow: hidden; }
.ok-subject-progress-card .fill { height: 100%; background: var(--ok-gold); border-radius: 6px; }
.ok-subject-progress-card .pct { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 600; font-size: 13px; }
.ok-lesson-start-btn {
margin-top: 4px; display: block; text-align: center; text-decoration: none;
background: var(--ok-purple); color: #fff; font-weight: 600; font-size: 13px;
padding: 10px; border-radius: 10px;
}
.ok-quest-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ok-quest-card { background: #fff; border-radius: var(--radius-md); padding: 16px; box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.ok-quest-card b { display: block; font-size: 12.5px; color: var(--navy); margin-bottom: 8px; }
.ok-quest-progress { display: flex; align-items: center; gap: 8px; }
.ok-quest-progress .track { flex: 1; height: 8px; border-radius: 6px; background: #eee; overflow: hidden; }
.ok-quest-progress .fill { height: 100%; background: var(--ok-purple); }
.ok-quest-progress span { font-size: 10.5px; color: var(--gray-text); white-space: nowrap; }
.ok-quest-reward { font-size: 11px; color: var(--gray-text); margin-top: 8px; }
@media (max-width: 980px) {
.ok-subject-shell { flex-direction: column; }
.ok-subject-sidebar { position: static; min-height: auto; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
.ok-subject-sidebar-mascot { display: none; }
.ok-subject-nav { flex-direction: row; flex-wrap: wrap; }
.ok-subject-main { padding: 0 0 50px; }
.ok-subject-pad { padding: 0 18px; }
}
@media (max-width: 860px) {
.ok-dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
/* aspect-ratio 2000/807 làm hero quá thấp trên màn hẹp, không đủ chỗ cho chữ —
đặt sàn chiều cao tối thiểu để chữ không bị cắt, ảnh vẫn cover bình thường. */
.ok-hero-bg { min-height: 480px; }
.ok-intro-inner { padding: 0 18px; }
.ok-hero-textbox { width: 62%; top: 6%; }
.ok-hero-ship { width: 42%; left: 30%; bottom: 4%; }
.ok-dashboard-grid { grid-template-columns: 1fr; margin-top: -36px; }
.ok-age-card { flex-direction: column; align-items: stretch; }
.ok-age-btn { width: 100%; }
.ok-subject-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.ok-nav-links { display: none; }
}
/* =========================================================
Trang làm bài (Exam/Take) — giao diện chung, chỉ đổi nền theo ngữ cảnh
========================================================= */
.ok-take-page {
position: relative; min-height: calc(100vh - 24px); padding: 18px 24px 40px; overflow: hidden;
}
.ok-bg-1 { background: linear-gradient(180deg, #ffffff 0%, #eaf6fb 45%, #d5eef7 100%); }
.ok-bg-2 { background: linear-gradient(180deg, #ffffff 0%, #f3ecff 45%, #e3d9ff 100%); }
.ok-bg-3 { background: linear-gradient(180deg, #ffffff 0%, #eafbf1 45%, #d3f5e2 100%); }
.ok-bg-4 { background: linear-gradient(180deg, #ffffff 0%, #fff4e0 45%, #ffe6c2 100%); }
.ok-bg-5 { background: linear-gradient(180deg, #ffffff 0%, #fff8e1 45%, #ffedb3 100%); }
.ok-take-deco {
position: absolute; bottom: -10px; width: 150px; opacity: 0.85; pointer-events: none; z-index: 0;
}
.ok-take-deco.left { left: -10px; }
.ok-take-deco.right { right: -10px; transform: scaleX(-1); }
.ok-take-topbar {
position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
margin-bottom: 18px;
}
.ok-take-breadcrumb {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border-radius: 12px;
padding: 10px 16px; box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.ok-take-breadcrumb a {
display: inline-flex; align-items: center; gap: 6px; color: var(--navy); font-weight: 600;
font-size: 15px; text-decoration: none;
}
.ok-take-breadcrumb a:hover { color: var(--ok-purple); }
.ok-take-breadcrumb .sep { color: var(--gray-text); font-size: 15px; }
.ok-take-breadcrumb b { color: var(--navy); font-size: 15px; }
.ok-take-actions-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ok-take-status-box {
display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 8px 18px;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.ok-take-divider { width: 1px; height: 26px; background: #e7e0cc; flex-shrink: 0; }
.ok-take-timer { display: inline-flex; align-items: center; gap: 10px; }
.ok-take-timer span { font-size: 22px; }
.ok-take-timer small { display: block; font-size: 12px; color: var(--gray-text); }
.ok-take-timer b { display: block; font-size: 20px; color: var(--navy); }
.ok-take-timer b.warning { color: var(--red); }
.ok-take-pause-btn {
background: none; color: var(--navy); font-weight: 600; font-size: 14px; border: none;
padding: 8px 4px; border-radius: 10px; cursor: pointer;
}
.ok-take-pause-btn.active { color: var(--ok-gold-dark); }
.ok-take-flag-btn {
background: none; color: var(--red); font-weight: 600; font-size: 14px; border: none;
padding: 8px 4px; border-radius: 10px; cursor: pointer;
}
.ok-take-submit-btn {
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff; font-weight: 600;
font-size: 15px; border: none; padding: 12px 24px; border-radius: 12px; cursor: pointer;
box-shadow: 0 4px 0 var(--ok-purple-dark);
}
.ok-take-body { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 20px; }
.ok-take-main { flex: 1 1 70%; min-width: 0; }
.ok-take-sidebar { flex: 0 0 21%; display: flex; flex-direction: column; gap: 16px; }
.ok-take-card { position: relative; background: #fff; border-radius: var(--radius-lg); padding: 26px 28px 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.ok-take-pause-overlay {
position: absolute; inset: 0; z-index: 5; border-radius: var(--radius-lg); background: rgba(255,255,255,0.94);
display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
.ok-take-pause-overlay:not([hidden]) { display: flex; }
.ok-take-pause-overlay span { font-size: 22px; font-weight: 600; color: var(--navy); }
.ok-take-pause-overlay p { margin: 0; font-size: 14px; color: var(--gray-text); }
.ok-take-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ok-take-qnum {
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff; font-weight: 600;
font-size: 15px; padding: 6px 16px; border-radius: 20px;
}
.ok-take-topic { background: #fff4d6; color: var(--ok-gold-dark); font-weight: 600; font-size: 13.5px; padding: 5px 12px; border-radius: 20px; }
.ok-take-question-vi { font-size: 22px; font-weight: 600; color: var(--navy); margin: 0 0 6px; line-height: 1.4; }
.ok-take-question-en { font-size: 17px; color: var(--gray-text); margin: 0 0 18px; }
/* Dấu "?" đứng riêng đại diện chỗ trống cần điền (khác dấu "?" kết thúc câu bình
thường) -- bọc khung nổi bật để bé nhận ra ngay, không lẫn vào chữ thường. */
.q-blank { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3em; height: 1.3em; padding: 0 4px; margin: 0 2px; background: var(--red, #ef444e); color: #fff; font-weight: 800; border-radius: 6px; vertical-align: -0.15em; }
/* Chặn chiều cao theo vh (không phải px cố định) để ảnh minh họa co giãn theo màn hình
nhưng luôn chừa đủ chỗ cho đáp án A/B/C/D bên dưới mà không cần cuộn. */
.ok-take-visual-img { display: block; max-width: 100%; max-height: 34vh; width: auto; margin: 0 auto; border-radius: 10px; object-fit: contain; }
/* visual.tall (JSON) — ảnh dày đặc chi tiết (VD Neuro Trainer, cả đề bài lẫn 4 đáp án A-D đều
nằm chung 1 ảnh) cần cao hơn hẳn 34vh mặc định mới đọc rõ được trên điện thoại, theo yêu cầu
thật đã gặp. Không đổi thẳng .ok-take-visual-img vì lớp này dùng chung cho MỌI câu visual
"image" trong site (kể cả các câu TIMO hình học/lý thuyết số cũ đã tune vừa 34vh từ trước). */
.ok-take-visual-img-tall { max-height: 64vh; }
.ok-take-visual-img-wrap { position: relative; display: inline-block; max-width: 100%; }
.ok-take-visual-zoom-btn {
position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%;
border: none; background: rgba(20,10,50,0.65); color: #fff; font-size: 16px;
display: flex; align-items: center; justify-content: center; cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
/* Modal xem phóng to ảnh minh họa (Exam/Take.cshtml, nút kính lúp) — tái dùng khung
.modal-overlay chung của site, chỉ khác nội dung là 1 ảnh lớn thay vì hộp text. */
.ok-image-zoom-box { position: relative; max-width: 95vw; max-height: 90vh; }
.ok-image-zoom-box img { display: block; max-width: 95vw; max-height: 90vh; width: auto; height: auto; border-radius: 10px; object-fit: contain; }
.ok-image-zoom-close {
position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; border-radius: 50%;
border: 3px solid #fff; background: var(--ok-purple-dark); color: #fff; font-size: 15px; font-weight: 700;
display: flex; align-items: center; justify-content: center; cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
.ok-take-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.ok-choice-btn {
display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #dbdbdb; border-radius: var(--radius-md);
padding: 14px 16px; cursor: pointer; text-align: left; font-size: 17px; font-weight: 600; color: var(--navy);
transition: transform 0.06s ease;
}
.ok-choice-btn:active { transform: translateY(1px); }
.ok-choice-badge {
flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 600; font-size: 15px;
}
.ok-choice-icon {
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
gap: 6px; min-width: 32px;
}
/* Đáp án dạng lưới/xQuad (Hoàn thành hình) — bỏ chữ mô tả, phóng to hẳn hình lên vì hình tự
nó đã đủ rõ, đọc chữ mô tả dài dòng không giúp gì thêm mà chỉ chiếm chỗ. */
.ok-choice-btn.visual-primary { justify-content: center; padding: 18px 12px; }
.ok-choice-icon-big { min-width: auto; }
.ps-break { display: inline-block; width: 10px; }
.ok-choice-btn.blue .ok-choice-badge { background: var(--ok-blue); }
.ok-choice-btn.purple .ok-choice-badge { background: var(--ok-purple); }
.ok-choice-btn.green .ok-choice-badge { background: var(--ok-green); }
.ok-choice-btn.orange .ok-choice-badge { background: var(--ok-orange); }
.ok-choice-btn.blue.selected { border-color: var(--ok-blue); background: #eaf3ff; }
.ok-choice-btn.purple.selected { border-color: var(--ok-purple); background: #f1ecff; }
.ok-choice-btn.green.selected { border-color: var(--ok-green); background: #eafbf1; }
.ok-choice-btn.orange.selected { border-color: var(--ok-orange); background: #fff2e8; }
/* Xem lại bài làm — tô đúng/sai thay cho màu xoay vòng lúc làm bài */
.ok-choice-btn.review { cursor: default; }
.ok-choice-btn.review .ok-choice-badge { background: #cbd5e1; }
.ok-choice-btn.review.correct { border-color: var(--ok-green); background: #eafbf1; }
.ok-choice-btn.review.correct .ok-choice-badge { background: var(--ok-green); }
.ok-choice-btn.review.wrong { border-color: var(--red); background: #fdecec; }
.ok-choice-btn.review.wrong .ok-choice-badge { background: var(--red); }
.ok-choice-review-tag { margin-left: auto; font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.ok-choice-review-tag.correct { color: var(--ok-green); }
.ok-choice-review-tag.wrong { color: var(--red); }
/* "Xem đáp án" (chỉ chế độ Luyện tập) — lộ đáp án đúng ngay khi đang làm, không đợi nộp bài */
.ok-choice-btn.revealed-correct { border-color: var(--ok-green); background: #eafbf1; }
.ok-choice-btn.revealed-correct .ok-choice-badge { background: var(--ok-green); }
.ok-take-footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.ok-take-hint-btn {
margin-left: auto; background: #fff8e1; color: var(--ok-gold-dark); border: 1px solid #ffe6a3; font-weight: 600; font-size: 13.5px;
padding: 8px 16px; border-radius: 12px; cursor: pointer;
}
.ok-take-answer-btn { background: #eafbf1; color: var(--ok-green); border-color: #b8ecd0; }
/* Có cả nút "Xem đáp án" lẫn "Trợ giúp" (2 phần tử cùng margin-left:auto sẽ chia đôi
khoảng trống, đẩy 2 nút ra xa nhau) — chỉ nút đầu tiên tự đẩy sang phải, nút liền sau
giữ sát cạnh bằng margin-left:0, dựa vào "gap" của .ok-take-card-head để cách nhau. */
.ok-take-answer-btn + #hint-btn { margin-left: 0; }
.ok-take-prev-btn {
background: #fff; color: var(--navy); border: 1px solid #959595; font-weight: 600; font-size: 15px;
padding: 12px 20px; border-radius: 12px; cursor: pointer;
}
.ok-take-prev-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ok-take-next-btn {
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff; font-weight: 600; font-size: 15px;
border: none; padding: 12px 22px; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 0 var(--ok-purple-dark);
}
.ok-take-side-card { background: #fff; border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.ok-take-side-card h4 { margin: 0 0 12px; font-size: 14px; letter-spacing: 0.4px; color: var(--navy); }
.ok-take-progress-head { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.ok-take-progress-track { height: 8px; border-radius: 6px; background: #eee; overflow: hidden; }
.ok-take-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ok-purple), var(--ok-purple-dark)); border-radius: 6px; transition: width 0.2s ease; }
.ok-take-palette-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.ok-take-palette-legend span { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--gray-text); }
.ok-take-palette-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ok-take-palette-legend .dot.done { background: var(--ok-green); }
.ok-take-palette-legend .dot.current { background: var(--ok-gold); }
.ok-take-palette-legend .dot.none { background: #fff; border: 2px solid #e7e0cc; }
.ok-take-palette-legend .dot.flag { background: var(--red); }
.ok-take-palette-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ok-palette-item {
position: relative; border: 1px solid #d1d1d1; background: #fff; border-radius: 8px; aspect-ratio: 4 / 3;
display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 14.5px; cursor: pointer; color: var(--navy);
}
.ok-palette-item.answered { background: var(--ok-green); border-color: var(--ok-green); color: #fff; }
.ok-palette-item.current { background: var(--ok-gold); border-color: var(--ok-gold-dark); color: #4a2f00; }
.ok-palette-item.flagged::after {
content: "🚩"; position: absolute; top: -8px; right: -6px; font-size: 13px;
}
.ok-palette-item.correct { background: var(--ok-green); border-color: var(--ok-green); color: #fff; }
.ok-palette-item.incorrect { background: var(--red); border-color: var(--red); color: #fff; }
.ok-palette-item.current-review { box-shadow: 0 0 0 3px var(--ok-gold-dark); }
.ok-take-palette-jump { display: flex; gap: 8px; margin-bottom: 12px; }
.ok-take-palette-jump input {
flex: 1; min-width: 0; border: 1px solid #d1d1d1; border-radius: 8px; padding: 8px 10px;
font-size: 13.5px; color: var(--navy);
}
.ok-take-palette-jump button {
border: none; border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: 13.5px;
color: #fff; background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); cursor: pointer;
}
/* Đề dài (>35 câu, xem PALETTE_PAGE_SIZE) phân trang bảng câu hỏi thay vì 1 lưới hàng trăm ô
cuộn rất dài — gọn hơn nhiều trên máy tính bảng/điện thoại. */
.ok-palette-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.ok-palette-pager-btn {
width: 32px; height: 32px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 600;
color: #fff; background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark));
}
.ok-palette-pager-btn:disabled { background: #e2ddd0; color: #b3ab98; cursor: default; }
.ok-palette-pager-label { font-size: 13.5px; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 4px; }
.ok-palette-pager-label input {
width: 42px; text-align: center; border: 1px solid #d1d1d1; border-radius: 6px; padding: 4px;
font-size: 13.5px; font-weight: 600; color: var(--navy);
}
.ok-take-info-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-bottom: 8px; }
.ok-take-info-row span { color: var(--gray-text); }
.ok-take-info-row b { color: var(--navy); }
.ok-take-mascot-card {
position: relative; background: #0d90df9c; border-radius: var(--radius-lg); overflow: visible;
padding: 18px 38px 38px 142px; display: flex; align-items: center; min-height: 76px;
}
.ok-take-mascot-card img {
position: absolute; left: -16px; bottom: -14px; width: 108px; height: 108px; object-fit: contain;
filter: drop-shadow(0 6px 8px rgba(0,0,0,0.18));
}
.ok-take-mascot-card p { margin: 0; font-size: 16.5px; font-weight: 600; color: #FFF; line-height: 1.4; }
@media (max-width: 980px) {
.ok-take-body { flex-direction: column; }
.ok-take-sidebar { flex: none; width: 100%; }
.ok-take-deco { width: 100px; opacity: 0.5; }
}
@media (max-width: 560px) {
.ok-take-choices { grid-template-columns: 1fr; }
.ok-take-topbar { flex-direction: column; align-items: stretch; }
.ok-take-actions-group { width: 100%; justify-content: flex-start; }
}
/* =========================================================
Trang kết quả (Exam/Result) — thẻ "bật ra" ăn mừng + xem lại bài + nhận thưởng
========================================================= */
.ok-result-page {
position: relative; min-height: calc(100vh - 84px); padding: 30px 24px 40px; overflow: hidden;
}
@keyframes okResultPopIn {
0% { opacity: 0; transform: scale(0.85) translateY(14px); }
70% { opacity: 1; transform: scale(1.03) translateY(-2px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.ok-result-card {
position: relative; z-index: 1; max-width: 560px; margin: 0 auto; background: #fff; border-radius: var(--radius-lg);
padding: 32px 30px; text-align: center; box-shadow: 0 16px 40px rgba(0,0,0,0.14);
animation: okResultPopIn 0.5s cubic-bezier(.34,1.56,.64,1) both;
}
.ok-result-badge { font-size: 46px; margin-bottom: 6px; }
.ok-result-title { margin: 0 0 4px; font-size: 22px; color: var(--navy); }
.ok-result-exam-name { margin: 0 0 18px; font-size: 15px; color: var(--gray-text); }
.ok-result-score-ring {
width: 130px; height: 130px; border-radius: 50%; margin: 0 auto 10px; background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark));
display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(139,92,246,0.4);
}
.ok-result-score-ring b { font-size: 32px; color: #fff; }
.ok-result-score-ring b small { font-size: 18px; opacity: 0.8; }
.ok-result-score-ring span { font-size: 14px; color: rgba(255,255,255,0.85); }
.ok-result-meta { margin: 0 0 20px; font-size: 15px; color: var(--gray-text); }
.ok-result-actions-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.ok-result-claim-btn {
background: linear-gradient(160deg, var(--ok-gold), var(--ok-gold-dark)); color: #4a2f00; font-weight: 600; font-size: 15.5px;
border: none; padding: 12px 22px; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 0 #c98600;
}
.ok-result-claim-btn:disabled { opacity: 0.75; cursor: default; }
.ok-result-review-btn {
display: inline-flex; align-items: center; background: #fff; color: var(--navy); border: 2px solid #e7e0cc; font-weight: 600; font-size: 15.5px;
padding: 12px 20px; border-radius: 12px; cursor: pointer; text-decoration: none;
}
.ok-result-review-btn:hover { border-color: var(--ok-purple); color: var(--ok-purple); }
.ok-result-rewards-panel { margin-top: 18px; padding-top: 18px; border-top: 1px dashed #e7e0cc; animation: okResultPopIn 0.4s cubic-bezier(.34,1.56,.64,1) both; }
.ok-result-rewards-panel > p { margin: 0 0 12px; font-size: 14.5px; color: var(--gray-text); font-weight: 600; }
.ok-result-rewards-grid { display: flex; justify-content: center; gap: 26px; margin-bottom: 10px; }
.ok-result-rewards-grid > div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ok-result-rewards-grid img { width: 40px; height: 40px; object-fit: contain; }
.ok-result-rewards-grid b { font-size: 18px; color: var(--ok-gold-dark); }
.ok-result-rewards-grid span { font-size: 12.5px; color: var(--gray-text); }
.ok-result-rewards-note { margin: 0; font-size: 12.5px; color: var(--gray-text); opacity: 0.8; }
@media (max-width: 600px) {
.ok-result-card { padding: 26px 20px; }
.ok-result-rewards-grid { gap: 16px; }
}
/* ---------- Kho báu (Shop) ---------- */
/* Nền trang là gradient đại dương (đậm dần từ trên xuống) + vài vòng tròn mờ giả bong bóng —
khối tiêu đề (ok-shop-hero) nằm NGOÀI widget trắng, không có nền riêng, nổi thẳng trên nền
đại dương này; sidebar + gian hàng (ok-shop-widget) mới là khối card trắng gộp chung. */
.ok-shop-page {
padding: 24px; min-height: calc(100vh - 84px);
background:
radial-gradient(circle at 14% 22%, rgba(255,255,255,0.12) 0, rgba(255,255,255,0) 7%),
radial-gradient(circle at 82% 14%, rgba(255,255,255,0.09) 0, rgba(255,255,255,0) 6%),
radial-gradient(circle at 68% 58%, rgba(255,255,255,0.07) 0, rgba(255,255,255,0) 9%),
radial-gradient(circle at 28% 82%, rgba(255,255,255,0.06) 0, rgba(255,255,255,0) 8%),
radial-gradient(ellipse at top, #2f8fd6 0%, #1c5f9e 45%, #0e2f57 100%);
}
/* Icon bên trái, tiêu đề/mô tả bên phải (nằm ngang). Ảnh bạch tuộc+rương nhô ra khỏi mép dưới
khối hero (bottom âm), "chèn nổi" đè lên mép trên của widget bên dưới — z-index cao hơn
widget để không bị che mất phần nhô ra. */
.ok-shop-hero {
position: relative; z-index: 2; display: flex; align-items: center; gap: 18px;
max-width: 1400px; margin: 0 auto; padding: 6px 26px 22px; color: #fff; overflow: visible;
}
.ok-shop-hero-icon { width: 104px; height: 104px; object-fit: contain; flex-shrink: 0; }
.ok-shop-hero-text { flex: 1; min-width: 0; }
.ok-shop-hero-text h1 { margin: 0 0 4px; font-family: 'Coiny', cursive; font-size: 26px; }
.ok-shop-hero-text p { margin: 0 0 12px; font-size: 13.5px; color: rgba(255,255,255,0.9); }
.ok-shop-wallet-mini { display: flex; gap: 10px; flex-wrap: wrap; }
.ok-shop-wallet-mini span {
display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.18);
border-radius: 20px; padding: 5px 12px; font-weight: 600; font-size: 13px;
}
.ok-shop-wallet-mini img { width: 16px; height: 16px; object-fit: contain; }
.ok-shop-wallet-link {
display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.18);
border-radius: 20px; padding: 5px 12px; font-weight: 600; font-size: 13px;
color: #fff; text-decoration: none; transition: background 0.15s;
}
.ok-shop-wallet-link:hover { background: rgba(255,255,255,0.3); }
.ok-shop-wallet-link img { width: 16px; height: 16px; object-fit: contain; }
.ok-shop-hero-illustration {
width: 290px; max-width: 40%; object-fit: contain; flex-shrink: 0;
position: absolute; right: 14px; bottom: -40px; z-index: 5;
filter: drop-shadow(0 10px 14px rgba(0,0,0,0.3));
}
.ok-shop-widget {
position: relative; z-index: 1; display: flex; align-items: stretch; background: #fff;
border-radius: 24px; box-shadow: 0 10px 30px rgba(10,25,55,0.25); overflow: hidden;
max-width: 1400px; margin: 0 auto;
}
.ok-shop-sidebar {
flex: 0 0 200px; padding: 24px 14px; display: flex; flex-direction: column; gap: 6px;
border-right: 1px solid #eceef5;
}
.ok-shop-cat-item {
display: flex; align-items: center; gap: 10px; color: var(--navy); font-weight: 600; font-size: 14px;
padding: 12px 14px; border-radius: 12px;
}
.ok-shop-cat-item span { font-size: 16px; line-height: 1; }
.ok-shop-cat-item:hover { background: #f4f0ff; }
.ok-shop-cat-item.active {
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff;
box-shadow: 0 4px 12px rgba(139,92,246,0.35);
}
.ok-shop-main { flex: 1 1 0; min-width: 0; padding: 24px 28px 32px; position: relative; }
.ok-shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ok-shop-tabs { display: flex; gap: 6px; background: #fff; border-radius: 14px; padding: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.ok-shop-tab { padding: 9px 18px; border-radius: 10px; font-weight: 600; font-size: 13px; color: var(--gray-text); }
.ok-shop-tab.active { background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff; }
.ok-shop-tab:hover:not(.active) { background: #f4f0ff; }
.ok-shop-empty { background: #fff; border-radius: 16px; padding: 40px; text-align: center; color: var(--gray-text); font-size: 14px; }
.ok-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.ok-shop-card {
position: relative; background: #fff; border: 2px solid #eceef5; border-radius: 16px; padding: 16px 12px 14px;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
}
.ok-shop-card.orange { border-color: #ffd9a8; }
.ok-shop-card.blue { border-color: #b8d9ff; }
.ok-shop-card.green { border-color: #b7ecc8; }
.ok-shop-card.purple { border-color: #ddd0ff; }
.ok-shop-card.pink { border-color: #ffd0e4; }
.ok-shop-card.owned { opacity: 0.75; }
.ok-shop-card-badge {
position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 600; color: #fff;
padding: 3px 9px; border-radius: 20px; z-index: 1;
}
.ok-shop-card-badge.new { background: var(--ok-green); }
.ok-shop-card-badge.hot { background: #ff6b4a; }
.ok-shop-card-thumb { width: 84px; height: 84px; object-fit: contain; margin: 6px 0 2px; }
.ok-shop-card-name { font-weight: 600; font-size: 13.5px; color: var(--navy); min-height: 34px; display: flex; align-items: center; }
.ok-shop-card-price-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 2px; }
.ok-shop-card-price-row span { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--ok-gold-dark); }
.ok-shop-card-price-row img { width: 14px; height: 14px; object-fit: contain; }
.ok-shop-card-btn {
width: 100%; border: none; border-radius: 10px; padding: 9px; font-weight: 600; font-size: 13px; cursor: pointer;
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff;
}
.ok-shop-card-btn.owned { background: #eafbf1; color: #1c7a44; cursor: default; }
.ok-shop-card-btn.disabled { background: #eee; color: #999; cursor: not-allowed; }
/* ---------- Bộ sưu tập (MyCollection) — tái dùng ok-shop-widget/sidebar/main/cat-item ở trên
cho khung sidebar+gian hàng, chỉ thêm phần riêng của trang này (header, thẻ thống kê, toolbar
sắp xếp/kiểu xem, thẻ vật phẩm có huy hiệu đã sở hữu + ngày mua). ---------- */
.ok-collection-page {
padding: 24px; min-height: calc(100vh - 84px);
background: linear-gradient(180deg, #eaf6fb 0%, #ffffff 55%);
}
.ok-collection-header {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
max-width: 1400px; margin: 0 auto 20px; flex-wrap: wrap;
}
.ok-collection-header-text { display: flex; align-items: center; gap: 14px; }
.ok-collection-header-icon {
width: 102px; height: 102px; border-radius: 16px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.ok-collection-header-icon img { width: 100px; height: 100px; object-fit: contain; }
.ok-collection-header-text h1 { margin: 0 0 2px; font-family: 'Coiny', cursive; font-size: 22px; color: var(--navy); }
.ok-collection-header-text p { margin: 0; font-size: 13.5px; color: var(--gray-text); }
.ok-collection-stat-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ok-collection-stat-card {
display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px;
padding: 12px 18px; box-shadow: 0 4px 14px rgba(20,40,90,0.08);
}
.ok-collection-stat-card img { width: 34px; height: 34px; object-fit: contain; }
.ok-collection-stat-card div { display: flex; flex-direction: column; }
.ok-collection-stat-card span { font-size: 11.5px; color: var(--gray-text); font-weight: 600; }
.ok-collection-stat-card b { font-size: 18px; color: var(--ok-purple-dark); }
.ok-collection-shop-link { cursor: pointer; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.ok-collection-shop-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20,40,90,0.14); }
.ok-collection-shop-link b { color: var(--ok-orange, #ff8a3d); }
.ok-collection-cat-count { margin-left: auto; font-size: 11px; opacity: 0.75; }
.ok-collection-sidebar-chest { width: 110px; margin: 20px auto 10px; display: block; opacity: 0.9; }
.ok-collection-sidebar-stat {
margin-top: auto; background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff;
border-radius: 14px; padding: 12px 14px; text-align: center;
}
.ok-collection-sidebar-stat span { display: block; font-size: 11px; opacity: 0.85; }
.ok-collection-sidebar-stat b { display: block; font-size: 22px; margin: 2px 0; }
.ok-collection-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 10px; }
.ok-collection-sort {
border: 1px solid #e3e7f0; border-radius: 10px; padding: 8px 14px; font-weight: 600; font-size: 13px;
color: var(--navy); background: #fff;
}
.ok-collection-view-toggle { display: flex; gap: 4px; background: #f4f6fb; border-radius: 10px; padding: 4px; }
.ok-collection-view-toggle button {
border: none; background: transparent; width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
font-size: 15px; color: var(--gray-text);
}
.ok-collection-view-toggle button.active { background: #fff; color: var(--ok-purple-dark); box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
.ok-collection-section { margin-bottom: 26px; }
.ok-collection-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.ok-collection-section-head h3 { margin: 0; font-size: 15px; color: var(--navy); }
.ok-collection-section-head a { font-size: 12.5px; font-weight: 600; color: var(--ok-purple-dark); }
.ok-collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.ok-collection-item {
position: relative; background: #fff; border: 2px solid #eceef5; border-radius: 16px; padding: 16px 12px 12px;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
}
.ok-collection-item-badge {
position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%;
background: var(--ok-green); color: #fff; font-size: 11px; font-weight: 600;
display: flex; align-items: center; justify-content: center;
}
.ok-collection-item img { width: 76px; height: 76px; object-fit: contain; margin-bottom: 4px; }
.ok-collection-item-name { font-weight: 600; font-size: 13px; color: var(--navy); }
.ok-collection-item-date { font-size: 11px; color: var(--gray-text); }
/* Kiểu xem "Danh sách" — mỗi vật phẩm thành 1 hàng ngang thay vì ô lưới. */
#ok-collection-sections.list-view .ok-collection-grid { grid-template-columns: 1fr; gap: 8px; }
#ok-collection-sections.list-view .ok-collection-item {
flex-direction: row; align-items: center; text-align: left; padding: 10px 16px; gap: 14px;
}
#ok-collection-sections.list-view .ok-collection-item img { width: 44px; height: 44px; margin-bottom: 0; }
#ok-collection-sections.list-view .ok-collection-item-name { flex: 1; }
#ok-collection-sections.list-view .ok-collection-item-badge { position: static; margin-left: auto; }
@media (max-width: 900px) {
.ok-shop-page { padding: 12px; }
.ok-shop-widget { flex-direction: column; }
.ok-shop-sidebar { flex-direction: row; flex-wrap: wrap; width: 100%; border-right: none; border-bottom: 1px solid #eceef5; }
.ok-shop-hero { flex-wrap: wrap; }
.ok-shop-hero-illustration { display: none; }
.ok-shop-toolbar { margin-top: 18px; }
.ok-collection-page { padding: 12px; }
.ok-collection-sidebar-chest { display: none; }
}
/* ---------- Hồ sơ bé (Child/Profile) ---------- */
.ok-profile-page { padding: 24px; background: linear-gradient(180deg, #eaf6fb 0%, #ffffff 55%); min-height: calc(100vh - 84px); }
.ok-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 1300px; margin: 0 auto; align-items: stretch; }
.ok-profile-card { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 4px 14px rgba(20,40,90,0.06); display: flex; flex-direction: column; }
.ok-profile-card h3 { margin: 0 0 16px; font-size: 15px; color: var(--navy); display: flex; align-items: center; justify-content: left; gap: 8px; }
.ok-profile-card h3 a { font-size: 12.5px; font-weight: 600; color: var(--ok-purple-dark); }
.ok-profile-card h3 > span { display: flex; align-items: center; gap: 6px; }
.ok-profile-h3-icon { width: 28px; height: 28px; object-fit: contain; vertical-align: -3px; }
.ok-profile-empty { color: var(--gray-text); font-size: 13.5px; }
.ok-profile-info-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ok-profile-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ok-gold); flex-shrink: 0; }
.ok-profile-name { font-family: 'Coiny', cursive; font-size: 19px; color: var(--navy); }
.ok-profile-name span { color: var(--ok-purple); font-size: 15px; }
.ok-profile-meta { font-size: 13px; color: var(--gray-text); margin-top: 3px; }
.ok-profile-level-row { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ok-purple-dark); margin-bottom: 6px; }
.ok-profile-progress-track { height: 8px; border-radius: 6px; background: #f0eefc; overflow: hidden; }
.ok-profile-progress-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ok-purple), var(--ok-purple-dark)); }
.ok-profile-xp-label { margin: 6px 0 14px; font-size: 12px; color: var(--gray-text); }
.ok-profile-edit-btn {
display: inline-block; border: 1px solid #e3e7f0; border-radius: 10px; padding: 8px 16px;
font-size: 12.5px; font-weight: 600; color: var(--navy);
}
.ok-profile-edit-btn:hover { border-color: var(--ok-purple); color: var(--ok-purple); }
.ok-profile-stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.ok-profile-stat-tile {
background: #f8f9fd; border-radius: 14px; padding: 14px 10px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ok-profile-stat-icon { width: 66px; height: 66px; object-fit: contain; margin-bottom: 2px; }
.ok-profile-stat-label { font-size: 11px; color: var(--gray-text); font-weight: 600; }
.ok-profile-stat-tile b { font-size: 17px; color: var(--navy); }
.ok-profile-stat-sub { font-size: 10.5px; color: var(--gray-text); }
.ok-profile-achievement-list { display: flex; flex-direction: column; gap: 6px; }
.ok-profile-achievement-row {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
background: #f8f9fd; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--navy);
}
.ok-profile-achievement-row b { font-weight: 600; }
.ok-profile-achievement-row span { color: var(--gray-text); }
.ok-profile-thienphu-row { display: flex; align-items: flex-end; gap: 14px; }
.ok-profile-thienphu-text { flex: 1; font-size: 13.5px; line-height: 1.6; color: var(--navy); }
.ok-profile-thienphu-img { width: 110px; flex-shrink: 0; object-fit: contain; }
/* Nội dung Thiên phú giờ là HTML thật (soạn bằng Quill ở trang admin) — reset margin mặc định
của trình duyệt cho các thẻ p/ul/ol để không bị giãn dòng quá đà trong khối card nhỏ. */
.ok-profile-thienphu-html p { margin: 0 0 8px; }
.ok-profile-thienphu-html p:last-child { margin-bottom: 0; }
.ok-profile-thienphu-html ul, .ok-profile-thienphu-html ol { margin: 0 0 8px; padding-left: 20px; }
.ok-profile-radar-wrap { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; margin: 0 auto; }
.ok-profile-radar-svg { width: 100%; height: 100%; display: block; }
.ok-radar-grid { fill: none; stroke: #e7e4f7; stroke-width: 1.5; }
.ok-radar-axis { stroke: #e7e4f7; stroke-width: 1.5; }
.ok-radar-data { fill: rgba(139,92,246,0.28); stroke: var(--ok-purple-dark); stroke-width: 2; }
.ok-radar-dot { fill: var(--ok-purple-dark); }
.ok-radar-label {
position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap;
display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.ok-radar-label span { font-size: 11px; font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 3px; }
.ok-radar-label-icon { width: 24px; height: 24px; object-fit: contain; }
.ok-radar-label b { font-size: 13px; color: var(--ok-purple-dark); }
.ok-profile-collection-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; }
.ok-profile-collection-tile {
background: #f8f9fd; border-radius: 14px; padding: 14px 10px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ok-profile-collection-tile:hover { background: #f0eefc; }
.ok-profile-collection-tile span { font-size: 22px; }
.ok-profile-collection-tile div { font-size: 12px; font-weight: 600; color: var(--navy); }
.ok-profile-collection-tile b { font-size: 15px; color: var(--ok-purple-dark); }
.ok-profile-collection-tile b small { font-size: 11px; color: var(--gray-text); font-weight: 600; }
.ok-profile-activity-list { display: flex; flex-direction: column; gap: 10px; }
.ok-profile-activity-row { display: flex; align-items: center; gap: 12px; }
.ok-profile-activity-icon {
width: 34px; height: 34px; border-radius: 50%; background: #f0eefc; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.ok-profile-activity-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ok-profile-activity-text b { font-size: 13px; color: var(--navy); }
.ok-profile-activity-text span { font-size: 11.5px; color: var(--gray-text); }
.ok-profile-activity-time { font-size: 11px; color: var(--gray-text); white-space: nowrap; }
@media (max-width: 900px) {
.ok-profile-page { padding: 12px; }
.ok-profile-grid { grid-template-columns: 1fr; }
.ok-profile-stat-tiles { grid-template-columns: 1fr; }
}
/* ---------- Lịch sử làm bài (History) ---------- */
/* Dùng chung cho cả 3 trang admin (Shop/ThienPhu/EditThienPhu) — cùng màu sắc + độ rộng,
thay vì .container/.page-card (nền kem) cũ trước đây. KHÔNG đặt trang trí góc bên trong khối
này — nó co theo chiều cao nội dung (VD: Lịch sử chỉ có 1 dòng thì rất ngắn), khiến ảnh góc
bám sai vị trí thay vì mép dưới thật của trang. Trang trí góc dùng .ok-footer-deco định vị
theo (xem bên dưới), luôn nằm đúng góc trái/phải mép dưới toàn trang. */
.ok-history-page { padding: 24px; max-width: 1400px; margin: 0 auto; }
/* Trang trí góc footer dùng chung nhiều trang (Lịch sử, Admin) — định vị theo
(đã có sẵn position:relative + overflow-x:hidden ở đầu file) nên luôn bám đúng mép dưới
trái/phải của TOÀN TRANG, bất kể nội dung phía trên ngắn hay dài. */
.ok-footer-deco { position: absolute; bottom: 0; width: 150px; opacity: 0.85; pointer-events: none; z-index: 5; }
.ok-footer-deco.left { left: 0; }
.ok-footer-deco.right { right: 0; transform: scaleX(-1); }
@media (max-width: 700px) { .ok-footer-deco { width: 100px; opacity: 0.6; } }
.ok-history-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ok-history-header-text { display: flex; align-items: center; gap: 14px; }
.ok-history-header-icon { width: 40px; height: 40px; object-fit: contain; }
.ok-history-header-text h1 { margin: 0 0 2px; font-family: 'Coiny', cursive; font-size: 22px; color: var(--navy); }
.ok-history-header-text p { margin: 0; font-size: 13px; color: var(--gray-text); }
.ok-history-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ok-history-filters select, .ok-history-filters input[type="date"], .ok-history-filters input[type="text"] {
border: 1px solid #e3e7f0; border-radius: 10px; padding: 9px 12px; font-size: 13px; color: var(--navy); background: #fff;
}
.ok-history-filters span { color: var(--gray-text); }
.ok-history-export-btn {
border: none; border-radius: 10px; padding: 10px 16px; font-weight: 600; font-size: 13px; cursor: pointer;
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff;
}
/* Admin/ImportTools — form dán/tải JSON rồi tự fetch() tới đúng 1 trong 3 kênh nạp có sẵn
(ImportQuestionBank/ImportCurriculumTopics/ImportExam), thay cho việc mở devtools console. */
.ok-importtools-card { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 4px 14px rgba(20,40,90,0.06); max-width: 900px; }
.ok-importtools-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 16px; }
.ok-importtools-select, .ok-importtools-label input[type="file"] {
border: 1px solid #e3e7f0; border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--navy); background: #fff; font-weight: 400;
}
.ok-importtools-textarea {
border: 1px solid #e3e7f0; border-radius: 10px; padding: 12px; font-size: 13px; font-family: 'Courier New', monospace;
color: var(--navy); background: #fbfcff; min-height: 260px; resize: vertical; font-weight: 400; line-height: 1.5;
}
.ok-importtools-submit-btn {
border: none; border-radius: 12px; padding: 13px 24px; font-weight: 600; font-size: 14px; cursor: pointer;
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff;
}
.ok-importtools-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
#import-result { font-family: 'Courier New', monospace; font-size: 13px; word-break: break-word; white-space: pre-wrap; }
.ok-history-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; }
.ok-history-stat-card {
background: #fff; border-radius: 16px; padding: 16px 14px; box-shadow: 0 4px 14px rgba(20,40,90,0.06);
display: flex; align-items: center; gap: 12px;
}
.ok-history-stat-card img { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.ok-history-stat-card div { display: flex; flex-direction: column; min-width: 0; }
.ok-history-stat-card span { font-size: 11px; color: var(--gray-text); font-weight: 600; }
.ok-history-stat-card b { font-size: 18px; color: var(--navy); }
.ok-history-stat-card b small { font-size: 11px; font-weight: 600; color: var(--gray-text); }
.ok-history-stat-card > div > small { font-size: 10.5px; color: var(--gray-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-history-table-wrap { background: #fff; border-radius: 18px; padding: 8px; box-shadow: 0 4px 14px rgba(20,40,90,0.06); overflow-x: auto; }
.ok-history-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.ok-history-table th {
text-align: left; font-size: 11px; font-weight: 600; color: var(--gray-text); text-transform: uppercase;
padding: 12px 14px; border-bottom: 1px solid #f0f1f6;
}
.ok-history-table td { padding: 12px 14px; border-bottom: 1px solid #f5f6fa; font-size: 13px; color: var(--navy); vertical-align: middle; }
.ok-history-table tr:last-child td { border-bottom: none; }
.ok-history-exam-cell { display: flex; align-items: center; gap: 10px; }
.ok-history-exam-icon {
width: 34px; height: 34px; border-radius: 8px; background: #f4f6fb; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.ok-history-exam-cell div { display: flex; flex-direction: column; }
.ok-history-exam-cell span { font-size: 11.5px; color: var(--gray-text); }
.ok-history-subject-badge {
display: inline-block; background: #eef2ff; color: #4b5fd6; font-size: 11.5px; font-weight: 600;
padding: 4px 10px; border-radius: 20px;
}
.ok-history-diff-badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }
.ok-history-diff-badge.easy { background: #e8f9ef; color: #1c7a44; }
.ok-history-diff-badge.medium { background: #fff4e0; color: #b3720a; }
.ok-history-diff-badge.hard { background: #fdecea; color: #b4302c; }
.ok-history-score b { font-size: 14px; color: var(--ok-gold-dark); }
.ok-history-stars { font-size: 11px; color: #e2e4ec; letter-spacing: 1px; }
.ok-history-stars .filled { color: var(--ok-gold); }
.ok-history-review-btn {
display: inline-block; border: 1px solid #e3e7f0; border-radius: 10px; padding: 7px 14px;
font-size: 12.5px; font-weight: 600; color: var(--ok-purple-dark);
}
.ok-history-review-btn:hover { border-color: var(--ok-purple); background: #f4f0ff; }
.ok-history-pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; flex-wrap: wrap; gap: 12px; }
.ok-history-page-links { display: flex; align-items: center; gap: 6px; }
.ok-history-page-links a {
display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px;
border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--navy); padding: 0 6px;
}
.ok-history-page-links a.active { background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff; }
.ok-history-page-links a:not(.active):not(.disabled):hover { background: #f4f0ff; }
.ok-history-page-links a.disabled { opacity: 0.35; pointer-events: none; }
.ok-history-page-ellipsis { color: var(--gray-text); padding: 0 4px; }
.ok-history-pagination select {
border: 1px solid #e3e7f0; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; color: var(--navy); background: #fff;
}
@media (max-width: 1100px) {
.ok-history-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.ok-history-page { padding: 12px; }
.ok-history-stats { grid-template-columns: 1fr; }
}
/* ---------- Sửa thông tin bé (Child/Edit) ---------- */
.ok-editchild-page {
position: relative; min-height: calc(100vh - 84px); padding: 32px 24px 60px; overflow: hidden;
background: linear-gradient(180deg, #cdeaf7 0%, #eaf6fb 55%, #f7fbfd 100%);
}
.ok-editchild-card {
position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; background: #fff;
border-radius: 28px; padding: 36px 40px 40px; box-shadow: 0 12px 34px rgba(20,60,100,0.12);
}
.ok-editchild-header { text-align: center; margin-bottom: 28px; }
.ok-editchild-header span { font-size: 26px; }
.ok-editchild-header h1 { display: inline-block; margin: 0 0 6px 8px; font-family: 'Coiny', cursive; font-size: 26px; color: var(--navy); }
.ok-editchild-header p { margin: 0; font-size: 13.5px; color: var(--gray-text); }
.ok-editchild-body { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.ok-editchild-sidebar { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ok-editchild-avatar-preview {
width: 180px; height: 180px; border-radius: 50%; object-fit: cover; background: #eaf6fb;
border: 4px solid var(--ok-purple); box-shadow: 0 8px 20px rgba(139,92,246,0.25);
}
.ok-editchild-tip {
background: #eef2ff; border-radius: 16px; padding: 14px 16px; width: 100%; box-sizing: border-box;
}
.ok-editchild-tip span { display: block; font-weight: 600; font-size: 13px; color: var(--ok-purple-dark); margin-bottom: 4px; }
.ok-editchild-tip p { margin: 0; font-size: 12.5px; color: var(--gray-text); line-height: 1.5; }
.ok-editchild-tip.note { background: #fff8e6; }
.ok-editchild-tip.note span { color: #b3720a; }
.ok-editchild-fields { display: flex; flex-direction: column; gap: 18px; }
.ok-editchild-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ok-editchild-field { display: flex; flex-direction: column; gap: 6px; }
.ok-editchild-field label { font-size: 13px; font-weight: 600; color: var(--navy); }
.ok-editchild-field input, .ok-editchild-field select {
border: 1px solid #e3e7f0; border-radius: 12px; padding: 11px 14px; font-size: 13.5px; color: var(--navy);
background: #fff; width: 100%; box-sizing: border-box;
}
.ok-editchild-field input:focus, .ok-editchild-field select:focus { outline: none; border-color: var(--ok-purple); }
.ok-editchild-avatar-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.ok-editchild-avatar-item { cursor: pointer; }
.ok-editchild-avatar-item input { display: none; }
.ok-editchild-avatar-item img {
width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #f4f6fb;
border: 3px solid transparent;
}
.ok-editchild-avatar-item.selected img { border-color: var(--ok-purple); box-shadow: 0 0 0 3px rgba(139,92,246,0.2); }
.ok-editchild-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.ok-editchild-cancel-btn {
display: inline-flex; align-items: center; border: 1px solid #e3e7f0; border-radius: 12px; padding: 11px 22px;
font-weight: 600; font-size: 13.5px; color: var(--ok-purple-dark);
}
.ok-editchild-cancel-btn:hover { border-color: var(--ok-purple); background: #f4f0ff; }
.ok-editchild-save-btn {
border: none; border-radius: 12px; padding: 11px 26px; font-weight: 600; font-size: 13.5px; cursor: pointer;
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff;
}
@media (max-width: 800px) {
.ok-editchild-card { padding: 26px 20px 28px; }
.ok-editchild-body { grid-template-columns: 1fr; }
.ok-editchild-grid2 { grid-template-columns: 1fr; }
.ok-editchild-sidebar { flex-direction: row; align-items: center; }
.ok-editchild-avatar-preview { width: 100px; height: 100px; flex-shrink: 0; }
}
/* ---------- Chọn bé (Child/Index) ---------- */
.ok-choosechild-page {
position: relative; min-height: calc(100vh - 84px); padding: 40px 24px 60px; overflow: hidden;
background: linear-gradient(180deg, #cdeaf7 0%, #eaf6fb 55%, #f7fbfd 100%);
}
.ok-choosechild-header { position: relative; z-index: 1; text-align: center; margin-bottom: 30px; }
.ok-choosechild-header img { width: 34px; height: 34px; object-fit: contain; vertical-align: -6px; margin-right: 8px; }
.ok-choosechild-header h1 { display: inline; margin: 0; font-family: 'Coiny', cursive; font-size: 26px; color: var(--navy); }
.ok-choosechild-header p { margin: 8px 0 0; font-size: 13.5px; color: var(--gray-text); }
.ok-choosechild-grid {
position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 22px; max-width: 1000px; margin: 0 auto 30px;
}
.ok-choosechild-card {
position: relative; background: #fff; border-radius: 22px; padding: 22px 20px; text-align: center; cursor: pointer;
border: 3px solid transparent; box-shadow: 0 6px 18px rgba(20,60,100,0.08); transition: transform 0.15s;
}
.ok-choosechild-card:hover { transform: translateY(-2px); }
.ok-choosechild-card.selected { border-color: var(--ok-purple); background: #faf8ff; }
.ok-choosechild-check {
position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%;
background: #e3e7f0; color: transparent; display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.ok-choosechild-card.selected .ok-choosechild-check { background: var(--ok-purple); color: #fff; }
.ok-choosechild-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: #eaf6fb; margin-bottom: 12px; }
.ok-choosechild-card h4 { margin: 0 0 4px; font-size: 18px; color: var(--navy); }
.ok-choosechild-card > p { margin: 0 0 14px; font-size: 12.5px; color: var(--gray-text); }
.ok-choosechild-stats { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ok-choosechild-stats span { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.ok-choosechild-stats img { width: 15px; height: 15px; object-fit: contain; margin: 0; }
.ok-choosechild-edit-btn {
display: inline-block; width: 100%; box-sizing: border-box; border: 1px solid #e3e7f0; border-radius: 12px;
padding: 10px; font-weight: 600; font-size: 13px; color: var(--ok-purple-dark);
}
.ok-choosechild-edit-btn:hover { border-color: var(--ok-purple); background: #f4f0ff; }
.ok-choosechild-add-card {
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
border: 2px dashed #cfd6e6; border-radius: 22px; padding: 22px 20px; gap: 4px; color: var(--navy);
}
.ok-choosechild-add-card:hover { border-color: var(--ok-purple); background: #faf8ff; }
.ok-choosechild-add-icon {
width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark));
color: #fff; font-size: 28px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.ok-choosechild-add-card h4 { margin: 0 0 4px; font-size: 16px; }
.ok-choosechild-add-card p { margin: 0 0 16px; font-size: 12.5px; color: var(--gray-text); }
.ok-choosechild-add-btn {
border-radius: 12px; padding: 9px 18px; font-weight: 600; font-size: 13px; color: var(--ok-purple-dark);
border: 1px solid var(--ok-purple);
}
.ok-choosechild-footer-actions { position: relative; z-index: 1; max-width: 500px; margin: 0 auto; }
.ok-choosechild-continue-btn {
display: block; width: 100%; border: none; border-radius: 14px; padding: 15px; cursor: pointer;
font-weight: 600; font-size: 15px; color: #fff; background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark));
box-shadow: 0 6px 16px rgba(139,92,246,0.35);
}
@media (max-width: 600px) {
.ok-choosechild-page { padding: 24px 14px 40px; }
.ok-choosechild-grid { grid-template-columns: 1fr; }
}
/* ---------- Đổi mật khẩu (Account/ChangePassword) ---------- */
.ok-changepw-page {
position: relative; min-height: calc(100vh - 84px); padding: 40px 24px 60px; overflow: hidden;
background: linear-gradient(180deg, #cdeaf7 0%, #eaf6fb 55%, #f7fbfd 100%);
}
.ok-changepw-card {
position: relative; z-index: 1; max-width: 520px; margin: 0 auto; background: #fff;
border-radius: 26px; padding: 34px 36px 30px; box-shadow: 0 12px 34px rgba(20,60,100,0.12);
}
.ok-changepw-header { text-align: center; margin-bottom: 26px; }
.ok-changepw-icon {
display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; margin: 0 auto 14px;
border-radius: 50%; background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); font-size: 28px;
box-shadow: 0 6px 16px rgba(139,92,246,0.35);
}
.ok-changepw-header h1 { margin: 0 0 6px; font-family: 'Coiny', cursive; font-size: 22px; color: var(--navy); }
.ok-changepw-header p { margin: 0; font-size: 13px; color: var(--gray-text); }
.ok-changepw-form { display: flex; flex-direction: column; gap: 16px; }
.ok-changepw-field { display: flex; flex-direction: column; gap: 6px; }
.ok-changepw-field label { font-size: 13px; font-weight: 600; color: var(--navy); }
.ok-changepw-input-wrap { position: relative; }
.ok-changepw-input-wrap input {
width: 100%; box-sizing: border-box; border: 1px solid #e3e7f0; border-radius: 12px;
padding: 11px 42px 11px 14px; font-size: 13.5px; color: var(--navy);
}
.ok-changepw-input-wrap input:focus { outline: none; border-color: var(--ok-purple); }
.ok-changepw-eye {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none;
cursor: pointer; font-size: 15px; padding: 6px; opacity: 0.6;
}
.ok-changepw-eye:hover { opacity: 1; }
.ok-changepw-strength { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.ok-changepw-strength span { font-size: 11.5px; color: var(--gray-text); white-space: nowrap; }
.ok-changepw-strength-track { flex: 1; height: 6px; border-radius: 4px; background: #eceef5; overflow: hidden; }
.ok-changepw-strength-fill { height: 100%; width: 0; border-radius: 4px; transition: width 0.2s; background: #e33; }
.ok-changepw-strength-fill.weak { background: #e33; }
.ok-changepw-strength-fill.medium { background: #f2a900; }
.ok-changepw-strength-fill.good { background: #6cc24a; }
.ok-changepw-strength-fill.strong { background: var(--ok-green); }
.ok-changepw-strength b { font-size: 11.5px; font-weight: 600; color: var(--navy); min-width: 60px; text-align: right; }
.ok-changepw-tips { background: #f8f9fd; border-radius: 14px; padding: 14px 16px; }
.ok-changepw-tips b { display: block; font-size: 13px; color: var(--navy); margin-bottom: 8px; }
.ok-changepw-tips ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ok-changepw-tips li { font-size: 12.5px; color: var(--gray-text); }
.ok-changepw-submit-btn {
border: none; border-radius: 14px; padding: 14px; cursor: pointer; font-weight: 600; font-size: 14.5px; color: #fff;
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); box-shadow: 0 6px 16px rgba(139,92,246,0.35);
}
.ok-changepw-cancel-link { text-align: center; font-size: 13px; font-weight: 600; color: var(--ok-purple-dark); }
.ok-changepw-cancel-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
.ok-changepw-page { padding: 24px 14px 40px; }
.ok-changepw-card { padding: 26px 20px 24px; }
}
/* ---------- Sảnh danh vọng (Leaderboard) ---------- */
/* Nền trang là 1 khối gradient đại dương liền mạch từ trên xuống (cùng cách làm với
ok-shop-page) — hero KHÔNG có nền riêng, nổi thẳng trên nền đại dương này nên không còn
đường ranh giới cứng giữa hero và phần thanh lọc/danh sách bên dưới. */
.ok-lb-page {
position: relative; padding: 0 0 40px; overflow: hidden; min-height: calc(100vh - 84px);
background:
radial-gradient(circle at 15% 20%, rgba(255,255,255,0.10) 0, rgba(255,255,255,0) 7%),
radial-gradient(circle at 82% 12%, rgba(255,255,255,0.08) 0, rgba(255,255,255,0) 6%),
radial-gradient(circle at 70% 55%, rgba(255,255,255,0.06) 0, rgba(255,255,255,0) 9%),
radial-gradient(circle at 25% 80%, rgba(255,255,255,0.05) 0, rgba(255,255,255,0) 8%),
radial-gradient(ellipse at top, #2f8fd6 0%, #1c5f9e 45%, #0e2f57 100%);
}
.ok-lb-hero {
position: relative; display: flex; align-items: center; justify-content: center; gap: 20px;
padding: 34px 24px 50px; overflow: visible; color: #fff; text-align: center;
}
.ok-lb-hero-mascot { width: 130px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.3)); }
.ok-lb-hero-chest { width: 130px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.3)); }
.ok-lb-hero-text h1 { margin: 0 0 6px; font-family: 'Coiny', cursive; font-size: 30px; }
.ok-lb-hero-text p { margin: 0; font-size: 14px; color: rgba(255,255,255,0.9); }
/* Khối panel trắng-mờ bọc chung thanh lọc + toàn bộ widget bên dưới — thanh lọc và các card
dùng chung 1 mức padding trái/phải của panel nên tự động thẳng lề với nhau. */
.ok-lb-panel {
position: relative; z-index: 1; max-width: 1300px; margin: -30px auto 0;
background: rgba(255,255,255,0.94); border-radius: 32px; padding: 20px 24px 28px;
box-shadow: 0 20px 50px rgba(10,25,55,0.22);
}
.ok-lb-tabs {
position: relative; z-index: 1; display: flex; flex-wrap: nowrap; gap: 8px; justify-content: flex-start;
padding: 0 0 18px; margin: 0 0 20px; border-bottom: 1px solid #eef0f6;
overflow-x: auto; scrollbar-width: thin;
}
.ok-lb-tab {
display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e3e7f0; border-radius: 12px;
padding: 9px 16px; font-weight: 600; font-size: 13px; color: var(--navy); background: #fff; cursor: pointer;
white-space: nowrap; flex-shrink: 0;
}
.ok-lb-tab img { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; }
.ok-lb-tab.active {
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff; border-color: transparent;
}
.ok-lb-body { display: flex; flex-direction: column; gap: 26px; }
.ok-lb-section { background: #fff; border-radius: 22px; padding: 24px 26px; box-shadow: 0 4px 14px rgba(20,40,90,0.06); }
.ok-lb-section-head { margin-bottom: 18px; }
.ok-lb-section-head h2 { margin: 0 0 2px; font-size: 17px; color: var(--navy); }
.ok-lb-section-head p { margin: 0; font-size: 12.5px; color: var(--gray-text); }
.ok-lb-star-body { display: flex; align-items: flex-start; gap: 26px; }
.ok-lb-star-body .ok-lb-podium { flex: 0 0 auto; margin-bottom: 0; padding-right: 26px; border-right: 1px solid #eef0f6; }
.ok-lb-star-body .ok-lb-rank-grid { flex: 1; min-width: 0; grid-template-columns: 1fr; }
.ok-lb-podium { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.ok-lb-podium-item {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
background: #f8f9fd; border-radius: 18px; padding: 18px 20px 16px; width: 170px;
}
.ok-lb-podium-item.rank-1 { background: linear-gradient(180deg, #fff8e0, #fff1c2); order: 2; padding-top: 26px; }
.ok-lb-podium-item.rank-2 { order: 1; }
.ok-lb-podium-item.rank-3 { order: 3; }
.ok-lb-podium-item.current { box-shadow: 0 0 0 3px var(--ok-purple); }
.ok-lb-podium-crown { position: absolute; top: -20px; font-size: 24px; }
.ok-lb-podium-badge {
width: 26px; height: 26px; border-radius: 50%; background: #d5dae6; color: #fff; font-weight: 600; font-size: 12px;
display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.ok-lb-podium-item.rank-1 .ok-lb-podium-badge { background: var(--ok-gold); color: #4a2f00; }
.ok-lb-podium-item.rank-3 .ok-lb-podium-badge { background: #d99a5b; }
.ok-lb-podium-item img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: #eaf6fb; }
.ok-lb-podium-item.rank-1 img { width: 92px; height: 92px; border: 3px solid var(--ok-gold); }
.ok-lb-podium-item b { font-size: 15px; color: var(--navy); margin-top: 4px; }
.ok-lb-podium-item small { font-size: 11.5px; color: var(--gray-text); }
.ok-lb-podium-stars { margin-top: 4px; font-weight: 600; font-size: 14px; color: var(--ok-gold-dark); }
.ok-lb-rank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.ok-lb-rank-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.ok-lb-rank-row.current { background: #f4f0ff; border-radius: 12px; }
.ok-lb-rank-num { width: 22px; text-align: center; font-weight: 600; font-size: 12.5px; color: var(--gray-text); }
.ok-lb-rank-row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #eaf6fb; }
.ok-lb-rank-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ok-lb-rank-info b { font-size: 13px; color: var(--navy); }
.ok-lb-rank-info small { font-size: 11px; color: var(--gray-text); }
.ok-lb-rank-value { font-weight: 600; font-size: 12.5px; color: var(--ok-gold-dark); white-space: nowrap; }
.ok-lb-level-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.ok-lb-level-card {
flex: 1 1 150px; background: #f8f9fd; border-radius: 16px; padding: 16px 12px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ok-lb-level-card.first { background: linear-gradient(180deg, #fff8e0, #fff1c2); }
.ok-lb-level-card.current { box-shadow: 0 0 0 3px var(--ok-purple); }
.ok-lb-level-medal { font-size: 18px; }
.ok-lb-level-card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #eaf6fb; margin-bottom: 2px; }
.ok-lb-level-card b { font-size: 13.5px; color: var(--navy); }
.ok-lb-level-card small { font-size: 11px; color: var(--gray-text); }
.ok-lb-level-badge {
margin-top: 4px; background: var(--ok-purple); color: #fff; font-weight: 600; font-size: 11px;
border-radius: 20px; padding: 3px 10px;
}
.ok-lb-level-xp { font-size: 11px; color: var(--ok-gold-dark); font-weight: 600; }
.ok-lb-comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ok-lb-comp-section { padding: 16px 18px; }
.ok-lb-comp-head h3 { margin: 0 0 12px; font-size: 14px; color: var(--navy); display: flex; align-items: center; gap: 6px; }
.ok-lb-comp-head h3 img { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; }
.ok-lb-comp-list { display: flex; flex-direction: column; gap: 6px; }
.ok-lb-comp-row { display: flex; align-items: center; gap: 8px; }
.ok-lb-comp-row.current { background: #f4f0ff; border-radius: 10px; }
.ok-lb-comp-rank {
width: 20px; height: 20px; border-radius: 50%; background: #eceef5; color: var(--gray-text); font-size: 11px; font-weight: 600;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ok-lb-comp-rank.rank-1 { background: var(--ok-gold); color: #4a2f00; }
.ok-lb-comp-rank.rank-2 { background: #d5dae6; color: #333; }
.ok-lb-comp-rank.rank-3 { background: #d99a5b; color: #fff; }
.ok-lb-comp-row img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #eaf6fb; }
.ok-lb-comp-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok-lb-comp-score { font-size: 12px; font-weight: 600; color: var(--ok-gold-dark); white-space: nowrap; }
@media (max-width: 1000px) {
.ok-lb-comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 700px) {
.ok-lb-hero { flex-direction: column; padding: 24px 16px 40px; }
.ok-lb-hero-mascot, .ok-lb-hero-chest { width: 90px; }
.ok-lb-panel { margin: -20px 14px 0; padding: 16px 16px 20px; }
.ok-lb-rank-grid { grid-template-columns: 1fr; }
.ok-lb-comp-grid { grid-template-columns: 1fr; }
.ok-lb-star-body { flex-direction: column; }
.ok-lb-star-body .ok-lb-podium { padding-right: 0; border-right: none; border-bottom: 1px solid #eef0f6; padding-bottom: 18px; width: 100%; }
}
/* ---------- Đăng nhập / Đăng ký ---------- */
/* Trang riêng, không dùng _Layout (không có navbar) — nền là login-bg.png (cảnh biển có sẵn
minh họa bên trái, để trống bên phải cho khối card). Class ok-auth-* độc lập với
.auth-card/.form-field/.btn-primary cũ (những class đó vẫn dùng cho các trang phụ khác:
ResendConfirmation, RegisterConfirmationSent, AccessDenied...). */
.ok-auth-page {
position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between;
padding: 40px 60px 24px; background: #0e2f57 url('/images/octokids/login-bg.png') center/cover no-repeat;
}
.ok-auth-home-link { position: absolute; top: 24px; left: 24px; z-index: 2; display: inline-block; }
.ok-auth-home-link img { width: 150px; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35)); transition: transform 0.15s; }
.ok-auth-home-link:hover img { transform: scale(1.04); }
.ok-auth-main {
flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 40px;
flex-wrap: wrap; max-width: 1500px; margin: 0 auto; width: 100%;
}
.ok-auth-right { flex: 0 1 460px; width: 100%; }
.ok-auth-card { background: #fff; border-radius: 28px; padding: 36px 34px 30px; box-shadow: 0 24px 60px rgba(0,0,0,0.35); text-align: center; }
.ok-auth-avatar {
width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 14px; overflow: hidden;
background: radial-gradient(circle at 35% 30%, #eaf6fb, #cfe9f7); border: 4px solid #fff;
box-shadow: 0 6px 16px rgba(20,40,90,0.15); display: flex; align-items: center; justify-content: center;
}
.ok-auth-avatar img { width: 74%; object-fit: contain; }
.ok-auth-card h1 { margin: 0 0 6px; font-size: 21px; color: var(--navy); font-family: 'Fredoka', sans-serif; font-weight: 600; }
.ok-auth-sub { margin: 0 0 22px; font-size: 13px; color: var(--gray-text); line-height: 1.5; }
.ok-auth-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.ok-auth-input-wrap {
position: relative; display: flex; align-items: center; background: #f8f9fd;
border: 1px solid #e3e7f0; border-radius: 14px; padding: 0 14px;
}
.ok-auth-input-wrap:focus-within { border-color: var(--ok-purple); }
.ok-auth-input-icon { font-size: 15px; margin-right: 8px; opacity: 0.8; }
.ok-auth-input-wrap input { flex: 1; min-width: 0; border: none; background: transparent; padding: 13px 4px; font-size: 14px; outline: none; font-family: inherit; }
.ok-auth-eye { background: none; border: none; cursor: pointer; font-size: 15px; opacity: 0.6; padding: 4px; }
.ok-auth-eye:hover { opacity: 1; }
.ok-auth-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; gap: 10px; }
.ok-auth-remember { display: flex; align-items: center; gap: 6px; color: var(--navy); font-weight: 600; cursor: pointer; }
.ok-auth-soon { color: #b7bdcc; white-space: nowrap; }
.ok-auth-soon i { font-style: normal; }
.ok-auth-submit-btn {
border: none; border-radius: 14px; padding: 14px; font-weight: 600; font-size: 14.5px; color: #fff; cursor: pointer;
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); box-shadow: 0 8px 20px rgba(139,92,246,0.35); margin-top: 4px;
}
.ok-auth-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0 16px; color: #b7bdcc; font-size: 12.5px; }
.ok-auth-divider::before, .ok-auth-divider::after { content: ''; flex: 1; height: 1px; background: #eceef5; }
.ok-auth-social-row { display: flex; gap: 10px; }
.ok-auth-social-btn {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #e3e7f0;
border-radius: 14px; padding: 11px; background: #fff; font-weight: 600; font-size: 13px; color: var(--navy);
cursor: not-allowed; opacity: 0.55;
}
.ok-auth-social-btn img { width: 18px; height: 18px; object-fit: contain; }
.ok-auth-social-form { flex: 1; display: flex; }
.ok-auth-social-btn.ok-enabled { cursor: pointer; opacity: 1; transition: border-color 0.15s, box-shadow 0.15s; }
.ok-auth-social-btn.ok-enabled:hover { border-color: var(--ok-purple); box-shadow: 0 4px 12px rgba(139,92,246,0.18); }
.ok-auth-google-g {
display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
border-radius: 50%; background: #eceef5; font-weight: 600; font-size: 12px; color: #4285F4;
}
.ok-auth-soon-note { margin: 8px 0 0; font-size: 11px; color: #b7bdcc; text-align: center; }
.ok-auth-forgot-link { color: var(--purple); font-weight: 600; white-space: nowrap; }
.ok-auth-dev-link {
margin-top: 14px; padding: 12px; border-radius: 12px; background: #f3f6fb; font-size: 11.5px;
color: var(--gray-text); word-break: break-all; text-align: left;
}
.ok-auth-dev-link a { color: var(--purple); }
.ok-auth-submit-link { display: block; text-align: center; text-decoration: none; }
.ok-auth-switch { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--gray-text); }
.ok-auth-switch a { color: var(--purple); font-weight: 600; }
.ok-auth-switch.small { margin-top: 6px; font-size: 12px; }
.ok-auth-footer { display: flex; gap: 40px; justify-content: center; max-width: 1200px; margin: 0 auto; width: 100%; padding-top: 10px; }
.ok-auth-footer > div { display: flex; align-items: flex-start; gap: 10px; color: #fff; }
.ok-auth-footer > div span { font-size: 22px; }
.ok-auth-footer > div b { display: block; font-size: 13.5px; }
.ok-auth-footer > div small { font-size: 11.5px; color: rgba(255,255,255,0.75); }
@media (max-width: 900px) {
.ok-auth-page { background: radial-gradient(ellipse at top, #2f8fd6 0%, #1c5f9e 45%, #0e2f57 100%); padding: 24px 16px; }
.ok-auth-home-link { position: static; margin-bottom: 12px; }
.ok-auth-home-link img { width: 120px; }
.ok-auth-main { justify-content: center; }
.ok-auth-right { max-width: 460px; }
.ok-auth-card { padding: 28px 22px 24px; }
.ok-auth-footer { flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.ok-auth-footer > div { flex-direction: column; align-items: center; }
}
/* ---------- Ủng hộ OctoKids (Donate) ---------- */
/* Vẫn dùng _Layout (có navbar). Bố cục mới: hero là 1 ảnh full-width đơn giản (chữ đã có sẵn
trong ảnh donate-hr.png, không cần overlay text bằng CSS nữa) + toàn bộ nội dung xuống 1 cột
dọc bên dưới theo đúng thứ tự: 3 gói ủng hộ → nhập số khác → quà tri ân → benefits → góp tài
liệu — không còn kiểu "card nổi đè lên ảnh hero" của bản cũ vì nội dung đã dài hơn nhiều. */
/* Nền sáng, cùng công thức với các trang "sau hero" khác trong site (Shop/MyCollection) — thay
cho gradient tối cũ vì kéo dài xuống hết trang khiến toàn bộ nội dung bên dưới hero bị tối. */
.ok-donate-page {
background: linear-gradient(180deg, #eaf6fb 0%, #ffffff 55%);
padding-bottom: 40px;
}
.ok-donate-hero-banner { display: block; width: 100%; height: auto; }
/* Ẩn hero banner trên thiết bị chạm — cùng lý do đã ẩn ở Exam/Index (.ok-olympic-hero), navbar
cũng đã ẩn nên banner lớn không còn cần thiết để lấy thêm khoảng trống cho nội dung ủng hộ. */
@media (pointer: coarse) {
body.ok-hide-navbar-touch .ok-donate-hero-banner { display: none; }
}
.ok-donate-container { max-width: 1400px; margin: 0 auto; padding: 42px 24px 0; display: flex; flex-direction: column; gap: 26px; }
.ok-donate-section-title { margin: 0;margin-bottom: 20px; font-family: var(--font-heading); font-weight: 600; font-size: 21px; color: var(--navy); text-align: center; }
/* 3 gói ủng hộ — thẻ đầy đủ (icon, giá, mô tả, danh sách lợi ích, nút riêng) thay vì chip gọn
của bản trước, để mỗi gói tự đứng vững như 1 lựa chọn mua rõ ràng. */
.ok-donate-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.ok-donate-pricing-card {
position: relative; background: #fff; border-radius: 22px; padding: 26px 22px; text-align: center;
border: 2.5px solid transparent; box-shadow: 0 10px 26px rgba(20,40,90,0.12);
}
.ok-donate-pricing-card.seed { border-color: #bfe8cf; }
.ok-donate-pricing-card.companion { border-color: var(--ok-purple); }
.ok-donate-pricing-card.sponsor { border-color: #ffdb99; }
/* Kiểu "nổi bật" (badge + nhô lên + đổ bóng đậm) tách riêng khỏi màu sắc từng gói (seed/companion/
sponsor) — để gán cho ĐÚNG 1 gói bất kỳ đóng vai "phổ biến nhất" mà không phải đổi cả bảng màu
của gói đó (hiệu ứng chim mồi/mỏ neo giá: gói rẻ nhất mới là gói muốn đẩy nhiều người chọn). */
.ok-donate-pricing-card.featured { transform: translateY(-10px); box-shadow: 0 16px 34px rgba(139,92,246,0.28); }
.ok-donate-pricing-badge {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap;
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff;
font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.3px;
padding: 6px 16px; border-radius: 20px; box-shadow: 0 4px 10px rgba(139,92,246,0.4);
}
.ok-donate-pricing-icon {
width: 68px; height: 68px; border-radius: 50%; margin: 8px auto 14px; display: flex; align-items: center; justify-content: center;
}
.ok-donate-pricing-card.seed .ok-donate-pricing-icon { background: #e8f9ee; }
.ok-donate-pricing-card.companion .ok-donate-pricing-icon { background: #f3f0ff; }
.ok-donate-pricing-card.sponsor .ok-donate-pricing-icon { background: #fff6e0; }
.ok-donate-pricing-icon img { width: 40px; height: 40px; object-fit: contain; }
.ok-donate-pricing-card h3 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 600; font-size: 18px; letter-spacing: 0.3px; color: var(--navy); }
.ok-donate-pricing-amount { font-family: var(--font-heading); font-weight: 600; font-size: 26px; margin-bottom: 10px; }
.ok-donate-pricing-card.seed .ok-donate-pricing-amount { color: var(--ok-green); }
.ok-donate-pricing-card.companion .ok-donate-pricing-amount { color: var(--ok-purple-dark); }
.ok-donate-pricing-card.sponsor .ok-donate-pricing-amount { color: #d68a00; }
.ok-donate-pricing-desc { margin: 0 0 22px; font-size: 16px; color: var(--gray-text); line-height: 1.55; min-height: 60px; }
.ok-donate-pricing-btn {
width: 100%; border: none; border-radius: 14px; padding: 13px; font-family: var(--font-heading);
font-weight: 600; font-size: 14px; color: #fff; cursor: pointer; transition: transform 0.15s;
}
.ok-donate-pricing-btn:hover { transform: translateY(-1px); }
.ok-donate-pricing-card.seed .ok-donate-pricing-btn { background: linear-gradient(160deg, var(--ok-green), #189a4c); }
.ok-donate-pricing-card.companion .ok-donate-pricing-btn { background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); }
.ok-donate-pricing-card.sponsor .ok-donate-pricing-btn { background: linear-gradient(160deg, #ffb833, #d68a00); }
@media (max-width: 800px) {
.ok-donate-pricing-grid { grid-template-columns: 1fr; }
.ok-donate-pricing-card.featured { transform: none; }
}
/* Nhập số tiền khác + quà tri ân — 2 khối trắng độc lập, không còn lồng trong 1 "card ủng hộ"
to như bản cũ vì giờ nằm ngay dưới lưới 3 gói, không cần khung bao chung nữa. Viền nhạt + bo
tròn kiểu "pill" cho ô nhập/nút, nhẹ nhàng hơn so với bo góc vuông vức của các khối khác. */
.ok-donate-custom-section { background: #fff; border: 1.5px solid #e3e7f0; border-radius: 22px; padding: 24px 26px; box-shadow: 0 6px 18px rgba(20,40,90,0.08); }
.ok-donate-custom-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.ok-donate-custom-icon { font-size: 24px; flex-shrink: 0; }
.ok-donate-custom-head h3 { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--navy); }
.ok-donate-custom-head p { margin: 0; font-size: 13px; color: var(--gray-text); }
.ok-donate-amount-row { display: flex; gap: 10px; }
.ok-donate-amount-input-wrap {
flex: 1; min-width: 0; display: flex; align-items: center; background: #fff;
border: 1.5px solid #dde3ee; border-radius: 30px; padding: 2px 20px; transition: border-color 0.15s;
}
.ok-donate-amount-input-wrap:focus-within { border-color: var(--ok-purple); }
.ok-donate-amount-input-wrap.error { border-color: var(--red); }
.ok-donate-amount-input-wrap input {
width: 100%; border: none; background: transparent; outline: none; padding: 14px 4px;
font-size: 15px; font-family: var(--font-body); color: var(--navy);
}
.ok-donate-amount-suffix { color: var(--gray-text); font-weight: 600; font-size: 13px; }
.ok-donate-submit-btn {
flex-shrink: 0; border: none; border-radius: 30px; padding: 0 28px; font-family: var(--font-heading);
font-weight: 600; font-size: 14.5px; color: #fff; cursor: pointer; white-space: nowrap;
background: linear-gradient(160deg, var(--ok-blue), var(--ok-royal-blue-2)); box-shadow: 0 6px 16px rgba(59,130,246,0.35);
}
.ok-donate-submit-btn:hover { transform: translateY(-1px); }
.ok-donate-code-hint { display: block; margin-top: 12px; font-size: 13px; color: var(--gray-text); line-height: 1.5; }
.ok-donate-code-hint b { color: var(--ok-purple-dark); }
.ok-donate-code-hint a { color: var(--ok-purple); font-weight: 600; }
.ok-donate-code-hint a:hover { color: var(--ok-purple-dark); }
.ok-donate-amount-error { display: block; min-height: 16px; margin-top: 6px; font-size: 12.5px; color: var(--red); font-weight: 600; }
@media (max-width: 480px) { .ok-donate-amount-row { flex-direction: column; } .ok-donate-submit-btn { padding: 13px; } }
.ok-donate-gift-block {
display: flex; gap: 16px; align-items: center; background: #fff7e6; border: 1.5px solid #ffe4a3;
border-radius: 22px; padding: 22px 26px; box-shadow: 0 10px 26px rgba(20,40,90,0.1);
}
.ok-donate-gift-icon { font-size: 34px; flex-shrink: 0; }
.ok-donate-gift-block h3 { margin: 0 0 6px; font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--navy); }
.ok-donate-gift-block p { margin: 0; font-size: 13.5px; color: var(--gray-text); line-height: 1.55; }
@media (max-width: 600px) { .ok-donate-gift-block { flex-direction: column; text-align: center; } }
/* Popup QR mở khi bấm "Ủng hộ Octo" — tái dùng khung .modal-overlay/.modal-box chung của site
(không dùng confirm/alert gốc trình duyệt), chỉ mở rộng riêng cho đủ chỗ QR + thông tin CK. */
.ok-donate-qr-modal { position: relative; width: 480px; max-width: calc(100vw - 32px); padding: 34px 32px 28px; }
.ok-donate-qr-modal-close {
position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
border: none; background: #f3f5fa; color: var(--gray-text); font-size: 16px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.ok-donate-qr-modal-close:hover { background: #e7ecf5; color: var(--navy); }
.ok-donate-qr-modal-head {
display: inline-block; background: var(--ok-royal-blue-2); color: #fff; font-weight: 600; font-size: 16px;
letter-spacing: 0.3px; padding: 9px 18px; border-radius: 16px; margin-bottom: 18px;
}
.ok-donate-qr-modal-img { width: 400px; height: 400px; max-width: 100%; object-fit: contain; background: #fff; border-radius: 14px; border: 1px solid #dde3ee; padding: 10px; margin: 0 auto 18px; display: block; }
.ok-donate-qr-modal-info { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-bottom: 16px; }
.ok-donate-qr-modal-info > div { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.ok-donate-qr-modal-info span { font-size: 19px; flex-shrink: 0; }
.ok-donate-qr-modal-info b { font-size: 15.5px; color: var(--gray-text); font-weight: 600; white-space: nowrap; }
.ok-donate-qr-modal-info small { font-size: 15.5px; color: var(--navy); font-weight: 600; }
.ok-donate-qr-modal-thanks { margin: 0; font-size: 14px; color: var(--gray-text); line-height: 1.5; text-align: center; }
@media (max-width: 480px) { .ok-donate-qr-modal-img { width: 100%; height: auto; aspect-ratio: 1 / 1; } }
/* ---------- Popup mời ủng hộ theo mốc thành tích/cấp bậc (_DonateNudgeModal.cshtml) ---------- */
.ok-donate-nudge-modal { position: relative; width: 440px; max-width: calc(100vw - 32px); padding: 32px 26px 26px; }
.ok-donate-nudge-close {
position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
border: none; background: #f3f5fa; color: var(--gray-text); font-size: 15px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.ok-donate-nudge-close:hover { background: #e7ecf5; color: var(--navy); }
.ok-donate-nudge-badge {
width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 14px;
background: linear-gradient(160deg, var(--ok-gold), var(--ok-gold-dark));
display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(242,169,0,0.35);
}
.ok-donate-nudge-badge img { width: 68px; height: 68px; object-fit: contain; }
.ok-donate-nudge-title { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 600; font-size: 19px; color: var(--navy); line-height: 1.35; }
.ok-donate-nudge-subtitle { margin: 0 0 18px; font-size: 13.5px; color: var(--gray-text); line-height: 1.55; }
.ok-donate-nudge-packages { display: flex; gap: 8px; margin-bottom: 14px; }
.ok-donate-nudge-pkg {
position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
background: #fff; border: 2px solid #e7ecf5; border-radius: 14px; padding: 12px 6px 10px;
cursor: pointer; transition: border-color 0.15s, transform 0.15s;
}
.ok-donate-nudge-pkg:hover { transform: translateY(-1px); }
.ok-donate-nudge-pkg.featured { border-color: var(--ok-purple); }
.ok-donate-nudge-pkg.active { border-color: var(--ok-pink); background: #fff0f6; }
.ok-donate-nudge-pkg-star {
position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
background: var(--ok-purple); color: #fff; font-size: 9px; font-weight: 600; letter-spacing: 0.3px;
padding: 3px 8px; border-radius: 10px;
}
.ok-donate-nudge-pkg img { width: 26px; height: 26px; object-fit: contain; margin-top: 4px; }
.ok-donate-nudge-pkg-name { font-family: var(--font-heading); font-weight: 600; font-size: 12px; color: var(--navy); }
.ok-donate-nudge-pkg-amount { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; color: var(--ok-purple-dark); }
.ok-donate-nudge-teaser {
display: flex; align-items: flex-start; gap: 10px; text-align: left; margin: 0 0 16px;
background: #fff7e6; border: 1.5px solid #ffe4a3; border-radius: 12px; padding: 12px 14px;
}
.ok-donate-nudge-teaser img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; margin-top: 2px; }
.ok-donate-nudge-teaser-text { display: flex; flex-direction: column; gap: 3px; }
.ok-donate-nudge-teaser-label { font-size: 11.5px; color: var(--gray-text); font-weight: 600; }
.ok-donate-nudge-teaser-text b { font-size: 13px; color: var(--navy); line-height: 1.4; font-weight: 600; }
.ok-donate-nudge-cta {
display: block; width: 100%; border: none; border-radius: 16px; padding: 14px; text-align: center;
font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: #fff; cursor: pointer;
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); box-shadow: 0 8px 20px rgba(139,92,246,0.35);
margin-bottom: 10px; text-decoration: none;
}
.ok-donate-nudge-cta:hover { color: #fff; }
.ok-donate-nudge-later { display: block; width: 100%; border: none; background: transparent; color: var(--gray-text); font-weight: 600; font-size: 12.5px; padding: 6px; cursor: pointer; }
.ok-donate-nudge-later:hover { color: var(--navy); }
@media (max-width: 420px) { .ok-donate-nudge-packages { flex-direction: column; } }
/* ---------- Admin/Donations.cshtml ---------- */
.ok-donateadmin-section { margin-bottom: 26px; }
.ok-donateadmin-section h3 { font-size: 16px; color: var(--navy); margin: 0 0 12px; }
.ok-donateadmin-user-card {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
background: #fff; border-radius: 14px; padding: 14px 18px; margin-bottom: 10px; box-shadow: 0 4px 14px rgba(20,40,90,0.08);
}
.ok-donateadmin-user-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ok-donateadmin-user-info b { font-size: 14.5px; color: var(--navy); }
.ok-donateadmin-user-info span { font-size: 13px; color: var(--gray-text); }
.ok-donateadmin-code { font-family: var(--font-heading); font-weight: 600; color: var(--ok-purple-dark); background: #f3f0ff; padding: 2px 10px; border-radius: 8px; }
.ok-donateadmin-total b { color: var(--ok-purple-dark); }
.ok-donateadmin-confirm-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ok-donateadmin-confirm-form input {
border: 1.5px solid #dde3ee; border-radius: 10px; padding: 8px 10px; font-size: 13px; font-family: var(--font-body);
}
.ok-donateadmin-confirm-form input[name="amount"] { width: 130px; }
.ok-donateadmin-confirm-form input[name="note"] { width: 160px; }
.ok-donateadmin-confirm-btn {
border: none; border-radius: 10px; padding: 9px 14px; font-weight: 600; font-size: 13px; color: #fff; cursor: pointer;
background: var(--ok-green);
}
.ok-donateadmin-confirm-btn:hover { background: #1ba750; }
/* ---------- Thông báo "có Thiên phú mới" (_ThienPhuNotifyModal.cshtml) ---------- */
.ok-thienphu-notify-modal { max-width: 400px; padding: 32px 28px 26px; text-align: center; }
.ok-thienphu-notify-badge {
width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px;
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark));
display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(139,92,246,0.35);
}
.ok-thienphu-notify-badge img { width: 60px; height: 60px; object-fit: contain; }
.ok-thienphu-notify-title { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 600; font-size: 19px; color: var(--navy); line-height: 1.35; }
.ok-thienphu-notify-subtitle { margin: 0 0 22px; font-size: 13.5px; color: var(--gray-text); line-height: 1.55; }
.ok-thienphu-notify-cta {
display: block; width: 100%; border: none; border-radius: 16px; padding: 14px; text-align: center;
font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: #fff; cursor: pointer; text-decoration: none;
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); box-shadow: 0 8px 20px rgba(139,92,246,0.35);
margin-bottom: 10px;
}
.ok-thienphu-notify-cta:hover { color: #fff; }
.ok-thienphu-notify-later { display: block; width: 100%; border: none; background: transparent; color: var(--gray-text); font-weight: 600; font-size: 12.5px; padding: 6px; cursor: pointer; }
.ok-thienphu-notify-later:hover { color: var(--navy); }
.ok-donate-benefits { margin-bottom: 18px; }
.ok-donate-benefits > p { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--navy); }
.ok-donate-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ok-donate-benefits-grid > div { background: #f8f9fd; border-radius: 12px; padding: 10px 8px; text-align: center; }
.ok-donate-benefits-grid img { width: 62px; height: 62px; object-fit: contain; display: block; margin: 0 auto 4px; }
.ok-donate-benefits-grid b { display: block; font-size: 16px; color: var(--navy); line-height: 1.3; }
.ok-donate-benefits-grid small { display: block; font-size: 16px; color: var(--gray-text); line-height: 1.3; }
.ok-donate-thanks { text-align: center; padding: 4px 0 8px; }
.ok-donate-thanks b { display: block; font-size: 18px; color: var(--navy); margin-bottom: 6px; }
.ok-donate-thanks p { margin: 0; font-size: 14.5px; color: var(--gray-text); line-height: 1.5; }
.ok-donate-docs {
background: rgba(255,255,255,0.88); border-radius: 20px; padding: 18px 20px;
display: flex; align-items: flex-start; gap: 14px; box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}
.ok-donate-docs-icon { font-size: 28px; flex-shrink: 0; }
.ok-donate-docs-text h3 { margin: 0 0 6px; font-size: 18px; color: var(--navy); }
.ok-donate-docs-text p { margin: 0 0 10px; font-size: 16px; color: var(--gray-text); line-height: 1.45; }
.ok-donate-docs-email {
display: inline-block; background: var(--ok-purple); color: #fff; font-weight: 600; font-size: 16px;
padding: 9px 14px; border-radius: 10px; line-height: 1.4;
}
.ok-donate-docs-email:hover { background: var(--ok-purple-dark); }
@media (max-width: 480px) {
.ok-donate-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- "Lớp học riêng" (Views/Class/*.cshtml) ---------- */
.ok-class-page { background: linear-gradient(180deg, #eaf6fb 0%, #ffffff 55%); min-height: calc(100vh - 84px); padding: 28px 24px 60px; }
.ok-class-header { margin: 0 0 20px; display: flex; align-items: center; gap: 16px; }
.ok-class-header-icon { font-size: 40px; flex-shrink: 0; }
.ok-class-header h1 { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 600; font-size: 22px; color: var(--navy); }
.ok-class-header p { margin: 0; font-size: 13.5px; color: var(--gray-text); }
/* Chỉ 1 chuyên đề (hoặc số lẻ không lấp đầy hàng) không nên bị auto-fit kéo giãn hết chiều
rộng container — .ok-lesson-grid dùng chung cho Toán tư duy IQ (thường 6 thẻ, lấp đầy hàng
nên auto-fit không lộ vấn đề) vẫn giữ nguyên, chỉ override phạm vi trang này. */
.ok-class-page .ok-lesson-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 240px)); }
.ok-class-request-status {
position: relative; margin: 0 0 20px; background: #eef6fd; border-radius: 18px; padding: 18px 22px;
border-left: 5px solid var(--ok-blue);
}
.ok-class-request-status.quoted { background: #fff7e6; border-left-color: #d68a00; }
.ok-class-request-status.paid, .ok-class-request-status.delivered { background: #e8f9ee; border-left-color: var(--ok-green); }
.ok-class-request-status.inprogress { background: #f3f0ff; border-left-color: var(--ok-purple); }
.ok-class-request-status.cancelled { background: #f3f5fa; border-left-color: var(--ok-gray); }
.ok-class-request-status b { display: block; margin-right: 70px; font-size: 16px; color: var(--navy); margin-bottom: 4px; }
.ok-class-request-status p { margin: 0 0 12px; font-size: 13.5px; color: var(--gray-text); }
.ok-class-request-code { display: block; font-size: 12px; color: var(--gray-text); }
.ok-class-request-code b { display: inline; margin-right: 0; font-family: var(--font-heading); font-weight: 600; color: var(--ok-purple-dark); }
.ok-class-request-dismiss { position: absolute; top: 14px; right: 16px; }
.ok-class-request-dismiss button {
border: none; background: rgba(20,40,90,0.08); color: var(--gray-text); font-size: 11.5px; font-weight: 600;
border-radius: 10px; padding: 6px 10px; cursor: pointer;
}
.ok-class-request-dismiss button:hover { background: rgba(20,40,90,0.15); color: var(--navy); }
.ok-class-pay-btn {
border: none; border-radius: 14px; padding: 11px 22px; font-family: var(--font-heading);
font-weight: 600; font-size: 14px; color: #fff; cursor: pointer; margin-bottom: 12px;
background: linear-gradient(160deg, var(--ok-blue), var(--ok-royal-blue-2)); box-shadow: 0 6px 16px rgba(59,130,246,0.35);
}
.ok-class-empty {
max-width: 500px; margin: 40px auto; text-align: center; background: #fff; border-radius: 22px;
padding: 36px 30px; box-shadow: 0 10px 26px rgba(20,40,90,0.1);
}
.ok-class-empty img { width: 90px; height: 90px; object-fit: contain; margin: 0 auto 16px; }
.ok-class-empty h3 { margin: 0 0 8px; font-family: var(--font-heading); font-weight: 600; font-size: 17px; color: var(--navy); }
.ok-class-empty p { margin: 0 0 20px; font-size: 13.5px; color: var(--gray-text); line-height: 1.5; }
.ok-class-request-link {
display: inline-block; background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); color: #fff;
font-family: var(--font-heading); font-weight: 600; font-size: 14px; padding: 12px 26px; border-radius: 14px;
text-decoration: none; box-shadow: 0 6px 16px rgba(139,92,246,0.35);
}
.ok-class-request-link:hover { color: #fff; }
.ok-class-request-notice {
max-width: 900px; margin: 0 auto 20px; display: flex; gap: 12px; align-items: flex-start;
background: #fff7e6; border: 1.5px solid #ffe4a3; border-radius: 16px; padding: 16px 20px;
}
.ok-class-request-notice span { font-size: 22px; flex-shrink: 0; }
.ok-class-request-notice p { margin: 0; font-size: 13.5px; color: var(--navy); line-height: 1.5; }
.ok-class-request-notice b { color: #a15c00; }
.ok-class-request-form { max-width: 900px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 24px 26px; box-shadow: 0 10px 26px rgba(20,40,90,0.1); }
.ok-class-request-form label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 14px; color: var(--navy); margin-bottom: 8px; }
.ok-class-request-form textarea {
width: 100%; border: 1.5px solid #dde3ee; border-radius: 14px; padding: 14px; font-size: 14px;
font-family: var(--font-body); color: var(--navy); resize: vertical; margin-bottom: 18px; box-sizing: border-box;
}
.ok-class-request-form textarea:focus { outline: none; border-color: var(--ok-purple); }
.ok-class-submit-btn {
border: none; border-radius: 14px; padding: 13px 28px; font-family: var(--font-heading);
font-weight: 600; font-size: 14.5px; color: #fff; cursor: pointer; margin-right: 12px;
background: linear-gradient(160deg, var(--ok-purple), var(--ok-purple-dark)); box-shadow: 0 6px 16px rgba(139,92,246,0.35);
}
.ok-class-cancel-link { color: var(--gray-text); font-weight: 600; font-size: 13.5px; }
.ok-class-cancel-link:hover { color: var(--navy); }
.ok-class-form-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ok-class-contact-link {
display: inline-flex; align-items: center; gap: 6px; color: var(--ok-blue); font-family: var(--font-heading);
font-weight: 600; font-size: 13.5px; text-decoration: none; padding: 9px 16px; border-radius: 12px; background: #eef6fd;
}
.ok-class-contact-link:hover { background: #dceefc; color: var(--ok-royal-blue-2); }