/* ============================================================================
* style-4.css — Lõi phần 4 — MẢNH LỚN NHẤT
* ----------------------------------------------------------------------------
* 🔴 LÁT CẮT CỦA style.css. 11 lát PHẢI nạp ĐÚNG THỨ TỰ trong index.html.
* Đổi thứ tự = đổi kết quả đè = lệch giao diện, KHÔNG có lỗi nào báo.
* Nối cả 11 lát (bỏ banner này) = style.css gốc TỪNG BYTE.
* Kiểm: node scripts/cut-css.js --verify
*
* MỤC LỤC — 5954 dòng · 758 rule · 165.9 KB
* dòng 104–204 Cửa hàng & phần thưởng (13 rule)
* dòng 328–412 Nền & còn lại (8 rule)
* dòng 857–933 Bài thi (6 rule)
* dòng 1147–1273 Cài đặt & khu admin (16 rule)
* dòng 1347–1475 Rèn luyện (lật thẻ, đua toán) (19 rule)
* dòng 1678–1829 Nhiệm vụ (18 rule)
* dòng 2006–2223 Nhiệm vụ (27 rule)
* dòng 2434–2550 Khu vườn (16 rule)
* dòng 2614–2674 Nền & còn lại (8 rule)
* dòng 2726–2963 Nhiệm vụ (34 rule)
* dòng 3406–3473 Khu vườn (10 rule)
* dòng 3559–3626 Cài đặt & khu admin (9 rule)
* dòng 3636–3731 Cài đặt & khu admin (12 rule)
* dòng 3781–3845 Cài đặt & khu admin (11 rule)
* dòng 3889–4101 Vòng quay may mắn (31 rule)
* dòng 4177–4237 Cửa hàng & phần thưởng (10 rule)
* dòng 4358–4597 Học sinh & huy hiệu (31 rule)
* dòng 4600–4689 Bài thi (13 rule)
* dòng 4693–4792 Học sinh & huy hiệu (13 rule)
* dòng 4900–4997 Lịch sử (15 rule)
* dòng 5393–5539 Lịch sử (20 rule)
* dòng 5587–5709 Điều hướng & khung (15 rule)
* dòng 5764–5911 Cài đặt & khu admin (20 rule)
*
* Bảng tra đầy đủ mọi miền: docs/BANDO-CSS.md
* Vì sao cắt kiểu này: docs/kien-truc/K6-1-so-do-tach-css.md
* ========================================================================== */
/* ===== Hộp thoại xác nhận dùng chung ===== */
.confirm-dialog-modal {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(var(--shadow-rgb), 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
box-sizing: border-box;
}
.confirm-dialog-modal.hidden-section {
display: none !important;
}
.confirm-dialog-box {
width: min(420px, 100%);
background: var(--surface-white);
border-radius: 14px;
padding: var(--space-9) var(--space-9) var(--space-8);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
text-align: center;
}
.confirm-dialog-title {
font-size: 22px;
font-weight: bold;
color: var(--text-strong);
margin-bottom: 10px;
}
.confirm-dialog-message {
font-size: 16px;
color: var(--text-body);
margin-bottom: var(--space-9);
line-height: 1.4;
}
.confirm-dialog-actions {
display: flex;
justify-content: center;
gap: 12px;
}
.confirm-dialog-btn {
min-width: 96px;
height: 42px;
border: none;
border-radius: var(--radius-md);
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.confirm-dialog-ok {
background: var(--accent-secondary);
color: var(--text-inverse);
}
.confirm-dialog-cancel {
background: var(--surface-muted);
color: var(--text-body);
}
.reward-shop-section {
/* Lấp đúng vùng nội dung (.content-section đã cao cố định), KHÔNG tự cuộn;
chỉ phần danh sách bên trong (.reward-shop-tab-panel) mới cuộn. Dùng 100%
thay vì 100vh để không bị cuộn đôi với vùng nội dung bên ngoài. */
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
.reward-exchange-history-box {
/* Bỏ viền/box bao quanh để đồng bộ với "Cửa hàng đổi thưởng" (.reward-shop-body) */
max-width: 1100px;
/* Khoảng cách trên do .reward-shop-tab-panel đảm nhiệm (xem ghi chú ở đó) */
margin: 0 auto;
box-sizing: border-box;
}
.reward-exchange-history-title {
text-align: center;
font-size: 22px;
font-weight: bold;
color: var(--text-strong);
margin-bottom: 12px;
}
/* Đồng bộ kiểu bảng "Lịch sử đổi thưởng" giống bảng "Cửa hàng" (.reward-shop-table) */
.reward-exchange-history-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
background: var(--surface-white);
border: 1px solid var(--border-card);
/* Viền trên do thead th đảm nhiệm (giữ nguyên khi header sticky). Bỏ
border-radius để khi cuộn không bị hở góc lộ dữ liệu phía dưới. */
border-top: 0;
/* Không dùng overflow:hidden để header dính (sticky) hoạt động khi cuộn */
box-shadow: var(--shadow-sm);
}
.reward-exchange-history-table th {
background: linear-gradient(180deg, var(--surface-subtle) 0%, #e1edfa 100%);
color: var(--text-strong);
font-weight: 800;
/* Viền trên gắn vào chính header nên không mất khi cuộn (sticky) */
border-top: 1px solid var(--blue-100);
border-bottom: 2px solid var(--border-card);
/* Header cố định khi cuộn lịch sử */
position: sticky;
top: 0;
z-index: 2;
box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.12);
}
.reward-exchange-history-table th,
.reward-exchange-history-table td {
padding: 10px 12px;
text-align: center;
vertical-align: middle;
border-bottom: 1px solid var(--border-faint);
}
/* Giữ viền dưới 2px của header (ghi đè rule gộp th,td phía trên) */
.reward-exchange-history-table thead th {
border-bottom: 2px solid var(--border-card);
}
/* Zebra giống bảng cửa hàng */
.reward-exchange-history-table tbody tr:nth-child(even) td {
background: var(--surface-tint-blue);
}
.reward-exchange-history-table tbody tr:last-child td {
border-bottom: none;
}
/* Mọi ô căn giữa hoàn toàn (kể cả cột tên phần thưởng), chỉ giữ in đậm */
.reward-exchange-history-table td:nth-child(2) {
text-align: center;
font-weight: bold;
}
.reward-exchange-note-input {
width: 100%;
padding: 7px 8px;
border: 1px solid var(--border-field);
border-radius: var(--radius-xs);
box-sizing: border-box;
text-align: center;
}
@media (max-width: 800px) {
.reward-exchange-history-box {
overflow-x: auto;
}
.reward-exchange-history-table {
min-width: 760px;
}
}
/* ===== LUCKY INVENTORY BOX ===== */
.lucky-spin-status-box {
width: 100%;
max-width: 520px;
box-sizing: border-box;
background: var(--surface-warning);
border: 2px solid var(--yellow-500);
/* Viền cam nổi bật, phân biệt với Kho phần thưởng */
border-radius: var(--radius-lg);
padding: 12px 18px;
margin-bottom: 14px;
text-align: center;
}
.lucky-spin-status-row {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 18px;
font-weight: bold;
color: var(--text-warning);
}
.lucky-spin-status-count {
font-size: 24px;
color: var(--accent-danger);
}
.lucky-spin-status-note {
margin-top: 6px;
font-size: 14px;
color: var(--text-muted);
line-height: 1.4;
}
.lucky-inventory-box {
width: 100%;
max-width: 520px;
box-sizing: border-box;
/* [M4.2 lô 5] về đặc tả THẺ: nền kem + bóng thang chung. GIỮ viền xanh lá dày
2px vì đó là dấu hiệu nhận biết cố ý của khối Kho phần thưởng. */
background: var(--surface-card);
border: 2px solid var(--green-400);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-7) var(--space-8);
font-size: 16px;
text-align: center;
}
.lucky-inventory-box h3 {
margin: 0 0 10px;
color: var(--green-800);
font-size: 22px;
}
.inventory-stats {
display: flex;
flex-wrap: wrap; /* [Kho thưởng] cho dòng chú thích xuống hàng riêng */
justify-content: center; /* 2 badge (phim/vé) đứng cùng 1 hàng, gom giữa */
gap: 10px;
margin-bottom: 15px;
font-weight: bold;
}
.stat-item {
background: #e2efda;
padding: 8px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--green-300);
color: var(--green-800);
text-align: center; /* căn giữa nội dung (rõ nhất khi badge kéo full-width ở mobile) */
}
.inventory-actions {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
.inventory-select {
padding: 8px;
border-radius: var(--radius-sm);
/* [M4.2 lô 2a] #999 → token viền ô nhập của đặc tả §5.2 */
border: 1px solid var(--border-field);
/* [M4.2 lô 2a] 14px → 16px. RÀNG BUỘC CỨNG: ô nhập dưới 16px thì iOS TỰ PHÓNG TO
cả màn khi trẻ chạm vào — trẻ mất phương hướng, phải tự thu lại. */
font-size: var(--text-md);
flex: 1;
}
.inventory-btn {
background: var(--progress-fill);
padding: 9px 15px;
margin: 0;
white-space: nowrap;
}
.inventory-btn:hover {
background: #548235;
}
@media (max-width: 600px) {
.inventory-stats {
flex-direction: column;
gap: 8px;
}
.inventory-actions {
flex-direction: column;
}
.inventory-select,
.inventory-btn {
width: 100%;
}
}
/* ===== EFFECT CHÚC MỪNG ĐIỂM TUYỆT ĐỐI ===== */
.celebration-box {
border: 3px solid var(--yellow-300);
animation: celebrationPopupPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background: linear-gradient(135deg, var(--surface-card) 0%, var(--surface-white) 100%) !important;
}
.celebration-trophy {
font-size: 75px;
margin-bottom: 5px;
animation: celebrationTrophyBounce 1.2s ease infinite;
}
.celebration-title {
font-size: 32px !important;
font-weight: bold;
margin: 5px 0 15px !important;
/* [M5.1b] Khai trọn gói ở tokens.css (--rainbow-title). Bản mặc định giữ y nguyên
bộ màu cũ; các theme chủ đề sau (Cổ tích M5.4, Trò chơi M5.5) đổi được mà không
phải sửa file này. Cầu vồng thì theme "Kẹo Dâu" KHÔNG đổi — cầu vồng là cầu vồng. */
background: var(--rainbow-title);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: correctStreakRainbow 2s linear infinite;
}
.celebration-message {
font-size: 16px;
font-weight: 500;
color: var(--text-strong);
line-height: 1.6;
margin-bottom: 20px;
}
@keyframes celebrationPopupPop {
0% {
transform: scale(0.6);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes celebrationTrophyBounce {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-12px) scale(1.05);
}
}
/* ===== CSS CHO 3 COMBOBOX KHO PHẦN THƯỞNG ===== */
.inventory-action-group {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--green-300);
text-align: left;
}
.inventory-action-group:first-of-type {
border-top: none;
padding-top: 0;
margin-top: 0;
}
.inventory-action-title {
font-size: 14px;
font-weight: bold;
color: var(--green-800);
margin-bottom: 6px;
}
.inventory-action-row {
display: flex;
gap: 8px;
align-items: center;
}
/* 🔥 ĐỒNG BỘ ĐỘ DÀI BẰNG NHAU CHO 3 NÚT BẤM */
.inventory-action-row .inventory-btn {
width: 100px;
/* Ép cả 3 nút cố định độ rộng 100px bằng chằn chặn */
text-align: center;
/* Căn chữ ra chính giữa nút */
padding-left: 0;
/* Khử padding ngang để chữ không bị kích */
padding-right: 0;
flex-shrink: 0;
/* Ngăn không cho nút bị bóp méo chữ */
}
/* Đổi màu riêng biệt cho từng nút để phụ huynh không bấm nhầm */
.btn-use {
background: #e69138;
}
.btn-use:hover {
background: #ce7e2b;
}
.btn-tickets {
background: #e06666;
}
.btn-tickets:hover {
background: #cc0000;
}
@media (max-width: 600px) {
.inventory-action-row {
flex-direction: column;
}
/* Khi xem trên điện thoại nhỏ, tự động giãn đều 100% theo chiều dọc */
.inventory-action-row .inventory-select,
.inventory-action-row .inventory-btn {
width: 100%;
}
}
/* ===== CSS CHO NÚT DÙNG VÉ SHOPEE ===== */
.ticket-stat-item {
display: flex;
align-items: center;
justify-content: center; /* căn giữa số vé (rõ khi badge full-width ở mobile) */
gap: 6px;
}
/* [BỎ "Dùng vé"] Chú thích nhỏ: vé nay tiêu ở màn Shopee & Shopping (thay nút "Dùng vé" cũ).
flex-basis:100% → LUÔN nằm HÀNG RIÊNG bên dưới 2 badge (PC + mobile); căn giữa. */
.inventory-ticket-hint {
flex-basis: 100%;
text-align: center;
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.35;
}
/* ===== ĐỔI MÀU RIÊNG BIỆT CHO 2 NÚT THAO TÁC TRÊN TOP BAR ===== */
/* Nút tạo đề giữ tông xanh dương nhạt ổn định */
.btn-start-exam {
background: var(--accent-secondary);
}
.btn-start-exam:hover {
background: var(--blue-800);
}
/* Nút Hoàn thành chuyển hẳn sang màu XANH LÁ CÂY nổi bật kích thích hành động nộp bài */
/* ⚠️ [M4.1] TRƯỚC ĐÂY nút này mượn --progress-fill (= --green-400) làm nền. Sai vai:
--green-400 là màu VỆT THANH TIẾN ĐỘ, hướng A cố ý làm nó SÁNG HẲN LÊN (#6FD08A)
cho thanh tiến độ đẹp → nút Nộp bài hoá xanh bạc hà nhạt, chữ trắng chỉ còn 1,9:1
(gần như mất chữ). Nay dùng đúng --accent-primary như đặc tả M2.3 mục 5.1 → 4,93:1.
Ghi chú: cặp trắng-trên-nền-này VỐN ĐÃ trượt chuẩn từ trước M4.1 (chỉ 2,71:1) —
đây là sửa luôn một lỗi cũ, không phải chỉ vá phần M4.1 gây ra. */
.btn-finish-exam {
background: var(--accent-primary);
}
.btn-finish-exam:hover {
background: var(--accent-primary-hover);
}
/* ===== FIX KHOẢNG TRỐNG NÚT BẤM TRÊN MOBILE ===== */
@media (max-width: 900px) {
/* Đổi từ ẩn tàng hình (vẫn chiếm chỗ) sang biến mất hoàn toàn để thu gọn khoảng trống */
.hidden-keep-space {
display: none !important;
}
/* Bỏ luôn margin thừa của cột bên phải chứa nút ẩn */
.exam-header-right {
margin-bottom: 0 !important;
}
}
/* =========================================================
🚀 BẢN CẬP NHẬT GIAO DIỆN "EDTECH KIDS" HOÀNH TRÁNG 🚀
========================================================= */
/* 1. BỒNG BỀNH & BO GÓC SÂU (KIDS UI) */
.app {
border-radius: 24px !important;
box-shadow: 0 16px 40px rgba(var(--shadow-rgb), 0.12) !important;
}
.side-menu {
border-radius: var(--radius-xl) !important;
box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.05) !important;
border: 2px solid var(--blue-50);
}
.menu-link {
border-radius: 16px !important;
font-size: 15px !important;
padding: 10px 16px !important;
margin-bottom: 8px !important;
}
/* 2. HEADER ĐIỀU HƯỚNG HIỆN ĐẠI (FLEXBOX) */
.modern-header {
display: flex;
justify-content: space-between;
align-items: center;
/* Bỏ khung: header thành thanh công cụ gọn (trạng thái trái, nút phải), đẩy sát lên trên */
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin-bottom: 12px;
}
.exam-header-left {
text-align: left !important;
width: auto !important;
}
.exam-header-right {
display: flex;
gap: 12px;
align-items: center;
width: auto !important;
justify-content: flex-end;
}
.hello-text {
font-size: 32px !important;
}
.today-score-message {
text-align: left !important;
margin-top: 8px !important;
font-size: 16px !important;
}
/* 3. NÚT BẤM 3D GAME (GAMIFICATION) */
.exam-btn {
/* [M4.4] 18px cứng → thang chung. Nút làm bài trước đây bo 18px trên PC
nhưng 14px trên điện thoại — cùng một nút hai hình dáng. */
border-radius: var(--radius-md) !important;
height: 52px !important;
font-size: 16px !important;
border: none !important;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-start-exam {
background: var(--accent-secondary) !important;
box-shadow: 0 6px 0 var(--blue-800), 0 8px 16px rgba(var(--accent-secondary-rgb), 0.3) !important;
}
.btn-finish-exam {
/* [M4.1] xem ghi chú ở khai báo trên: đổi --progress-fill → --accent-primary.
Mép 3D lấy --green-800 (đậm hơn mặt nút) cho khớp kiểu của .btn-start-exam,
vốn dùng --accent-secondary + --blue-800. */
background: var(--accent-primary) !important;
box-shadow: 0 6px 0 var(--green-800), 0 8px 16px rgba(27, 129, 64, 0.3) !important;
}
/* [M4.2 lô 1e] bọc chống HOVER DÍNH trên màn cảm ứng */
@media (hover: hover) {
.btn-start-exam:hover {
background: #3a8cd7 !important;
transform: translateY(2px);
box-shadow: 0 4px 0 var(--blue-800) !important;
}
}
/* [M4.2 lô 1e] bọc chống HOVER DÍNH trên màn cảm ứng */
@media (hover: hover) {
.btn-finish-exam:hover {
background: var(--accent-primary-hover) !important;
transform: translateY(2px);
box-shadow: 0 4px 0 var(--green-900) !important;
}
}
/* Hiệu ứng lún nút xuống khi click/chạm */
.btn-start-exam:active,
.btn-finish-exam:active {
transform: translateY(6px) !important;
box-shadow: 0 0px 0 transparent !important;
}
/* 5. GIAO DIỆN MOBILE - STICKY BOTTOM BUTTONS CHUYÊN NGHIỆP */
@media (max-width: 900px) {
.modern-header {
flex-direction: column;
padding: 16px;
border-radius: 16px;
}
.exam-header-left {
text-align: center !important;
margin-bottom: 8px !important;
}
.today-score-message {
text-align: center !important;
}
/* Đưa cụm 2 nút thao tác ghim dính chặt xuống đáy màn hình như App thật */
.exam-header-right {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px) !important;
padding: 16px 12px 24px 12px !important;
/* Lót thêm ở dưới phòng cấn viền iPhone */
box-shadow: 0 -4px 24px rgba(var(--shadow-rgb), 0.15) !important;
z-index: 999 !important;
box-sizing: border-box !important;
border-radius: 24px 24px 0 0 !important;
justify-content: center !important;
}
}
/* =========================================================
🚀 BẢN VÁ: THU GỌN BẢNG 15 CÂU & LÀM ĐẸP NÚT ADMIN 🚀
========================================================= */
/* 1. LÀM ĐẸP 2 NÚT ADMIN (ĐÁP ÁN & FINISH) CHUẨN 3D */
#answerAdminButton {
background: var(--yellow-500) !important;
/* Màu Vàng Cam nổi bật */
box-shadow: 0 6px 0 #bf9000, 0 8px 16px rgba(240, 180, 0, 0.3) !important;
}
/* [M4.2 lô 1e] bọc chống HOVER DÍNH trên màn cảm ứng */
@media (hover: hover) {
#answerAdminButton:hover {
background: #ffcc33 !important;
transform: translateY(2px);
box-shadow: 0 4px 0 #bf9000 !important;
}
}
#answerAdminButton:active {
transform: translateY(6px) !important;
box-shadow: 0 0px 0 transparent !important;
}
#finishAdminButton {
background: #9e9e9e !important;
/* Màu Xám trung tính để phân biệt với nút học sinh */
box-shadow: 0 6px 0 var(--btn-neutral-shadow), 0 8px 16px rgba(158, 158, 158, 0.3) !important;
}
/* [M4.2 lô 1e] bọc chống HOVER DÍNH trên màn cảm ứng */
@media (hover: hover) {
#finishAdminButton:hover {
background: #b0b0b0 !important;
transform: translateY(2px);
box-shadow: 0 4px 0 var(--btn-neutral-shadow) !important;
}
}
#finishAdminButton:active {
transform: translateY(6px) !important;
box-shadow: 0 0px 0 transparent !important;
}
/* 2. ÉP MỎNG KÍCH THƯỚC ĐỂ VỪA 15 CÂU TRÊN 1 MÀN HÌNH PC */
.modern-header {
padding: 10px 20px !important;
/* Giảm độ cao thẻ Header */
margin-bottom: 12px !important;
/* Kéo bảng lại gần Header hơn */
}
.hello-text {
font-size: 24px !important;
/* Thu nhỏ chữ Xin chào một xíu */
}
/* 3. THU GỌN THÀNH PHẦN BÊN TRONG BẢNG */
.choice-btn {
padding: 3px 6px !important;
/* Ép mỏng nút A B C D */
font-size: 13px !important;
line-height: 1.2 !important;
}
.answer-input {
/* [M4.2 lô 3] Trước đây khoá cứng `height: 26px !important` — ô trẻ gõ đáp án chỉ
cao 30px, dưới xa chuẩn chạm 44px của đặc tả §4.3 ("KHÔNG NGOẠI LỆ").
Đổi sang min-height để ô đủ lớn cho ngón tay trẻ, và bỏ trần `height` cứng.
Vẫn giữ `!important` vì có 4 rule khác khai lại .answer-input ở các media query. */
min-height: var(--touch-min) !important;
height: auto !important;
padding: 6px 8px !important;
}
/* =========================================================
🚀 BẢN VÁ HOÀN HẢO 100%: FIX TRÀN MÀN HÌNH & GỌN BẢNG 🚀
========================================================= */
/* --- 1. LỆNH MA THUẬT GRID: Ngăn bảng đẩy giao diện ra khỏi màn hình --- */
.content-area {
min-width: 0 !important;
}
.modern-header {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* --- 2. MỞ KHÓA BỐ CỤC HEADER --- */
@media (min-width: 901px) {
.modern-header {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
align-items: center !important;
}
.exam-header-left {
width: auto !important;
flex: 1 1 300px !important;
}
.exam-header-right {
width: auto !important;
flex: 0 0 auto !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
justify-content: flex-end !important;
}
.exam-header-right .exam-btn,
#answerAdminButton,
#finishAdminButton {
width: auto !important;
min-width: 110px !important;
padding: 0 16px !important;
flex-shrink: 0 !important;
margin: 0 !important;
}
}
/* --- 3. ÉP BẢNG THON GỌN THEO CHIỀU DỌC VÀ NGANG --- */
.modern-header {
/* Không khung nên bỏ luôn padding để text/nút canh thẳng mép với các thẻ bên dưới */
padding: 0 !important;
margin-bottom: 12px !important;
}
/* Gỡ bỏ các chiều rộng cố định cồng kềnh cũ gây tràn màn hình */
@media (min-width: 901px) {
.col-choice {
width: auto !important;
min-width: 70px !important;
}
.col-correct {
width: auto !important;
min-width: 80px !important;
}
.col-result {
width: 60px !important;
}
.col-answer {
width: 85px !important;
}
.col-no {
width: 45px !important;
}
.col-question {
width: 33% !important;
}
}
.choice-btn {
padding: 2px 4px !important;
font-size: 13px !important;
line-height: 1.2 !important;
}
.answer-input {
height: 24px !important;
font-size: 14px !important;
padding: 2px 4px !important;
}
h1 {
margin: 0 0 6px !important;
font-size: 32px !important;
}
.top-bar {
padding: 6px 12px !important;
}
/* =========================================================
🚀 TỐI ƯU TRẢI NGHIỆM: CHỐNG XÔ LỆCH & PHÂN NHÓM NÚT 🚀
========================================================= */
@media (min-width: 901px) {
/* --- 1. CHỐNG GIẬT BẢNG (VERTICAL SHIFT) --- */
/* Bắt buộc giữ lại không gian kể cả khi chưa có lời khen chuỗi đúng */
.correct-streak-message:empty {
display: block !important;
/* Thẻ này đã được cài sẵn min-height: 42px ở trên, nên nó sẽ tàng hình nhưng vẫn chống cột tuyệt đối */
}
/* --- 2. PHÂN NHÓM NÚT BẤM (HỌC SINH vs ADMIN) --- */
/* Tách nhóm Admin xích sang phải một khoảng 24px để tạo vùng an toàn */
#answerAdminButton {
margin-left: 24px !important;
position: relative;
}
/* Vẽ một vạch kẻ dọc mờ ảo để ngăn cách 2 khu vực */
#answerAdminButton::before {
content: "";
position: absolute;
left: -17px;
/* Đặt vạch nằm giữa khoảng trống */
top: 15%;
/* Căn lùi xuống một chút so với mép nút */
height: 70%;
/* Vạch kẻ cao bằng 70% nút */
width: 2px;
/* Độ dày của vạch */
background-color: #c9dfec;
/* Màu xanh nước biển siêu nhạt */
border-radius: 2px;
}
}
/* ===== CĂN GIỮA NÚT "CON CẢM ƠN" TRONG POPUP CHÚC MỪNG ===== */
.celebration-box .exam-btn {
margin: 10px auto 0 !important;
/* Dùng margin auto 2 bên để căn giữa tuyệt đối phần tử Flexbox */
}
/* =========================================================
🚀 TỐI ƯU UX MOBILE: PHÂN TÁCH NÚT BẤM THÔNG MINH 🚀
========================================================= */
@media (max-width: 900px) {
/* 1. TRẢ CỤM NÚT VỀ VỊ TRÍ TỰ NHIÊN ĐẦU TRANG */
.exam-header-right {
position: static !important;
width: 100% !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
justify-content: center !important;
margin-top: 12px !important;
display: flex !important;
flex-wrap: wrap !important;
}
/* 2. NÚT "TẠO ĐỀ MỚI" Ở ĐẦU TRANG */
/* Nằm ngoan ngoãn dưới dòng chữ Xin chào, dễ thấy ngay khi mở app */
.btn-start-exam {
position: static !important;
width: 100% !important;
max-width: 300px !important;
margin: 0 auto !important;
}
/* 3. NÚT "NỘP BÀI" BIẾN THÀNH NÚT NỔI (FAB) Ở GÓC DƯỚI */
/* Luôn ghim ở góc phải dưới, vuốt 15 câu xong là ngón cái chạm được luôn */
.btn-finish-exam {
position: fixed !important;
bottom: 24px !important;
right: 16px !important;
width: auto !important;
height: 56px !important;
padding: 0 24px !important;
border-radius: 28px !important;
/* Bo tròn dạng viên thuốc */
/* [M4.2 lô 2c] quầng sáng khớp nền nút mới (--accent-primary #1B8140).
Trước đây là rgba(112,173,71,…) = --green-400 CŨ, tức xanh vàng của bảng
màu trước M4.1 → đứng dưới nút xanh đậm mới thì lệch tông. */
box-shadow: 0 8px 24px rgba(27, 129, 64, 0.4) !important;
z-index: 9999 !important;
border: 2px solid white !important;
/* Viền trắng xịn sò tách biệt với chữ bài toán */
margin: 0 !important;
}
/* 4. XỬ LÝ 2 NÚT ADMIN CŨNG NỔI LÊN GỌN GÀNG (NẾU ĐĂNG NHẬP) */
#finishAdminButton {
position: fixed !important;
bottom: 24px !important;
right: 150px !important;
/* Nép sang trái nhường chỗ cho Nộp bài */
z-index: 9999 !important;
border-radius: 28px !important;
border: 2px solid white !important;
margin: 0 !important;
}
#answerAdminButton {
position: fixed !important;
bottom: 90px !important;
/* Nổi lên trên 1 tầng */
right: 16px !important;
z-index: 9999 !important;
border-radius: 28px !important;
border: 2px solid white !important;
margin: 0 !important;
}
/* 5. ĐỘN KHOẢNG TRỐNG ĐÁY BẢNG (CHỐNG CHE KHUẤT) */
/* Khi cuộn kịch sàn, câu 15 sẽ được đẩy lên cao, không bị nút Nộp bài che mất đáp án */
.exam-table {
margin-bottom: 90px !important;
}
}
/* ===== BẢN VÁ UX MOBILE: PHÁ BẪY KÍNH MỜ GIẢI CỨU NÚT NỘP BÀI ===== */
@media (max-width: 900px) {
.exam-header-right {
/* Phá vỡ cái lồng vô hình, cho phép nút con bên trong được bay ra ngoài màn hình */
backdrop-filter: none !important;
transform: none !important;
}
}
/* ===== BẢN VÁ: ĐỒNG BỘ KÍCH THƯỚC VÀ CĂN GIỮA NÚT TRÊN MOBILE ===== */
@media (max-width: 900px) {
/* 1. Nút Tạo đề mới */
.btn-start-exam {
width: 220px !important;
/* Cố định chiều ngang */
border-radius: 28px !important;
/* Bo góc hình viên thuốc cho giống nút Nộp bài */
margin: 0 auto !important;
/* Căn giữa màn hình */
}
/* 2. Nút Nộp bài — ĐÃ GỠ 10/08/2026 (M7.4), rule này CHẾT SẠCH từng dòng:
width:220px → trùng y hệt dòng 9023 (khối position:static, đứng sau)
padding:0 → thua 9093 `padding: 0 16px !important`
right:auto → trùng 9017
left:50% → thua 9016 `left: auto !important`
transform:… → thua 9020 `transform: none !important`
justify-content:center → trùng .exam-btn (dòng 5327)
Tức xoá đi KHÔNG đổi một pixel nào — đã đo trước/sau ở 4 khổ màn.
⚠️ CHỈ gỡ rule này, KHÔNG gỡ cả @media chứa nó: .btn-start-exam ngay trên
(mục 1) vẫn đang SỐNG. */
/* 3. Nắn luôn 2 nút Admin (nếu có bật) để không bị lệch đội hình */
#finishAdminButton {
width: 220px !important;
right: auto !important;
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 90px !important;
/* Nổi lên trên nút Nộp bài 1 tầng */
padding: 0 !important;
}
#answerAdminButton {
width: 220px !important;
right: auto !important;
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 156px !important;
/* Nổi lên trên tiếp 1 tầng */
padding: 0 !important;
}
}
/* ===== ẨN CỤM NÚT LÀM BÀI TRÊN CÁC MÀN HÌNH KHÁC =====
Trước đây class này ẩn cả cụm 4 nút. Bây giờ chỉ ẩn 3 nút (Tạo đề mới / Nộp bài / Đáp án)
và GIỮ nguyên nút Finish (admin) để admin vẫn có thể "Finish" từ màn hình khác.
Vị trí, màu sắc & logic của nút Finish không đổi vì nó vẫn nằm ở cùng vị trí cũ trong
`.exam-header-right` (text-align:right) và chỉ chịu thêm class `hidden-keep-space` khi
chưa unlock admin. */
.exam-header-right.hide-exam-buttons>.exam-btn:not(#finishAdminButton) {
display: none !important;
}
/* =========================================================
🚀 BẢN VÁ: CÂN BẰNG 4 NÚT & LÀM ĐẸP VÙNG CÀI ĐẶT 🚀
========================================================= */
/* --- 1. ĐỒNG BỘ CHIỀU DÀI 4 NÚT TRÊN PC --- */
@media (min-width: 901px) {
.exam-header-right .exam-btn,
#answerAdminButton,
#finishAdminButton {
width: 145px !important;
/* Cố định độ rộng để 4 nút bằng nhau chằn chặn */
min-width: 145px !important;
padding: 0 !important;
/* Bỏ padding để text tự căn giữa */
}
}
/* --- 2. LÀM ĐẸP VÀ PHÂN BỔ LẠI VÙNG CÀI ĐẶT ADMIN --- */
.admin-buttons-row:not(.hidden-admin-row) {
display: flex !important;
gap: 16px;
align-items: stretch;
justify-content: space-between;
margin-top: 12px;
margin-bottom: 8px;
}
.admin-bonus-spin-row:not(.hidden-admin-row) {
display: flex !important;
width: 100%;
}
/* Các hộp chứa nhóm tính năng */
/* [M4.2 lô 5] Về đúng đặc tả THẺ (§5.3): nền kem --surface-card thay vì trắng,
đệm theo thang --space-8, bóng dùng thang chung --shadow-md (2 lớp kiểu "kẹo dẻo"
thay vì bóng tự chế 1 lớp). */
.settings-group-box {
background: var(--surface-card);
border: var(--border-width) solid var(--border-card);
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: var(--shadow-md);
flex: 1;
box-sizing: border-box;
}
/* Box "Lịch trình Khu Vườn Sinh Thái" đứng trên box loại hoa → tách khoảng cho rõ */
.garden-schedule-box {
margin-bottom: 14px;
}
/* Tiêu đề của từng nhóm */
.settings-group-title {
font-size: 15px;
font-weight: bold;
color: var(--text-strong);
margin-bottom: 14px;
text-align: center;
border-bottom: 1px dashed var(--border-card);
padding-bottom: 8px;
}
/* Hàng chứa các nút bấm */
.settings-btn-row {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
/* Định dạng chuẩn cho mọi nút trong cài đặt */
.settings-btn {
flex: 1;
min-width: 110px;
margin: 0 !important;
padding: var(--btn-pad-y) var(--btn-pad-x) !important;
font-size: var(--btn-font) !important;
border-radius: var(--btn-radius) !important;
white-space: nowrap;
}
/* Phân loại màu sắc để không bấm nhầm */
/* [ĐỢT 5 · M4.2 lô 1] ĐÃ GỠ TOÀN BỘ `!important` khỏi 2 khối này.
Vì sao phải gỡ: đặc tả M2.3 §5.1 ghi rõ hệ nút mới sẽ bị 2 khối này ĐÈ IM LẶNG.
Bàn thử nạp đúng CSS thật, dựng đủ 8 hình dạng DOM mà 2 class này xuất hiện, so
computed style trước/sau khi gỡ:
· .btn-outline — 5/5 hình dạng KHÔNG ĐỔI MỘT THỨ GÌ. Đống !important đó vô nghĩa
hoàn toàn, không rule nào tranh chấp.
· .btn-bonus — đổi ĐÚNG 1 chỗ, và là đổi TỐT LÊN: nút "Đổi thưởng"
(.rs-redeem-btn.btn-bonus) nhả ra cho rule của redesign-components.css:850 —
rule đó muốn nút xanh lá chữ trắng (4,93:1) nhưng suốt thời gian qua bị
`!important` này đè thành VÀNG chữ trắng, chỉ 1,87:1. Tức là một rule của
chính đợt redesign trước đã CHẾT ÂM THẦM. */
.btn-outline {
background: var(--surface-tint-blue);
color: var(--text-strong);
border: 1px solid var(--accent-secondary);
}
.btn-outline:hover {
background: var(--surface-hover);
}
/* Nút "thưởng" nền vàng. Chữ trắng trên vàng chỉ 1,87:1 — mất chữ. Đổi sang chữ xanh
đậm: 7,64:1. Cùng lúc gom mã cứng #f0b400 về --yellow-500. */
.btn-bonus {
background: var(--yellow-500);
color: var(--blue-900);
}
.btn-bonus:hover {
background: var(--orange-brand);
}
/* Trên điện thoại thì tự động xếp dọc các hộp */
@media (max-width: 800px) {
.admin-buttons-row:not(.hidden-admin-row) {
flex-direction: column;
gap: 10px;
}
}
/* =========================================================
🎛️ KHỐI ADMIN TABS (Nested Parent → Child)
========================================================= */
.admin-auth-row {
/* Khối nhập mật khẩu mặc định luôn hiển thị. Sau khi unlock sẽ thêm class
.hidden-admin-row để biến mất; #adminTabsContainer chiếm chỗ tại đây. */
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.admin-tabs-container {
width: 100%;
box-sizing: border-box;
margin-top: 4px;
}
.admin-tabs-container.hidden-admin-row {
display: none !important;
}
/* ----- Parent tabs (tầng trên) ----- */
.admin-parent-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
border-bottom: 2px solid var(--border-card);
padding-bottom: 4px;
margin-bottom: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.admin-parent-tab-btn {
flex: 0 0 auto;
padding: 10px 18px;
border: none;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: var(--surface-subtle);
color: var(--text-strong);
font-weight: 700;
font-size: 15px;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.admin-parent-tab-btn:hover {
background: var(--blue-100);
}
.admin-parent-tab-btn.active {
background: var(--blue-800);
color: var(--text-inverse);
border-bottom-color: var(--yellow-500);
}
.admin-parent-panel {
display: none;
}
.admin-parent-panel.active {
display: block;
}
/* ----- Child tabs (tầng trong) — kiểu khác để phân biệt ----- */
.admin-child-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
margin-bottom: 12px;
padding: 6px 8px;
border-radius: var(--radius-md);
background: var(--surface-tint-blue);
border: 1px dashed var(--border-card);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
/* Giữ cố định hàng tab con khi cuộn nội dung panel bên dưới */
position: sticky;
top: 0;
z-index: 6;
}
.admin-child-tab-btn {
flex: 0 0 auto;
padding: 7px 14px;
border: 1.5px solid var(--border-input);
border-radius: var(--radius-pill);
background: var(--surface-white);
color: var(--text-strong);
font-weight: 600;
font-size: 13.5px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
white-space: nowrap;
}
.admin-child-tab-btn:hover {
background: var(--surface-hover);
border-color: var(--accent-secondary);
}
.admin-child-tab-btn.active {
background: var(--accent-secondary);
color: var(--text-inverse);
border-color: var(--accent-secondary);
box-shadow: 0 4px 10px rgba(var(--accent-secondary-rgb), 0.25);
}
.admin-child-panel {
display: none;
}
.admin-child-panel.active {
display: block;
}
/* [SHOPEE FIX phân quyền] Nút sub-tab "🛍️ Shopee & Shopping" ẩn theo vai bằng
settingsSetHidden() → gắn .hidden-section (display:none). NHƯNG rule style nút shop
(#adminParentPanel-shop ... .admin-child-tab-btn { display:inline-flex }) ở cả PC (≥901)
lẫn mobile (≤900) có id-specificity CAO HƠN .hidden-section (0,1,0) nên đè mất → phụ huynh
VẪN THẤY tab Shopee. Rule này (kèm .hidden-section + !important) LUÔN thắng, ẩn hẳn nút khi
bị gắn .hidden-section. Admin KHÔNG bị gắn .hidden-section nên KHÔNG ảnh hưởng; nút "🎁 Quà
từ bố mẹ" không bao giờ bị ẩn nên an toàn. Đặt ở BASE (ngoài @media) để phủ cả 2 khổ màn.
THU HẸP phạm vi trong #adminParentPanel-shop → KHÔNG chạm tab general (math/system/billing/promo). */
#adminParentPanel-shop .admin-child-tab-btn.hidden-section {
display: none !important;
}
/* Toggle rows nằm trong "Cài đặt chung": dùng đường kẻ phân tách nhẹ */
.admin-toggle-row {
padding: 8px 4px;
border-bottom: 1px dashed var(--border-subtle);
}
.admin-toggle-row:last-child {
border-bottom: none;
}
/* Placeholder text cho "Khu vườn sinh thái" và "Nhiệm vụ" */
.admin-placeholder-box {
text-align: center;
}
.admin-placeholder-text {
margin: 16px 0 0;
padding: 28px 18px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--yellow-soft), var(--yellow-soft));
border: 1px dashed var(--yellow-300);
color: var(--text-warning);
font-weight: 600;
font-size: 15px;
}
/* Mobile — Samsung S22 Ultra (~412px portrait, ~915px landscape) */
@media (max-width: 800px) {
.admin-parent-tabs,
.admin-child-tabs {
flex-wrap: nowrap;
}
.admin-parent-tab-btn {
padding: 9px 14px;
font-size: 14px;
}
.admin-child-tab-btn {
padding: 6px 12px;
font-size: 13px;
}
}
@media (max-width: 500px) {
.admin-parent-tab-btn {
padding: 8px 12px;
font-size: 13px;
}
.admin-child-tab-btn {
padding: 6px 10px;
font-size: 12.5px;
}
}
/* =========================================================
📅 QUẢN LÝ LỊCH TRÌNH RÈN LUYỆN
========================================================= */
.training-schedule-wrap {
display: block !important;
width: 100%;
}
.training-schedule-wrap.hidden-admin-row {
display: none !important;
}
.training-schedule-box {
width: 100%;
flex: 1 1 auto;
}
.training-schedule-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.training-row {
display: grid;
grid-template-columns: minmax(220px, 1.4fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(140px, 0.8fr);
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: var(--radius-md);
background: var(--surface-tint-blue);
border: 1px solid var(--border-subtle);
}
.training-row-parent {
background: var(--surface-subtle);
border-color: var(--border-card);
}
.training-row-child {
padding-left: 28px;
/* indent so child labels look nested under parent */
}
.training-cell {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.training-cell-label {
font-weight: 700;
color: var(--text-strong);
cursor: pointer;
user-select: none;
}
.training-row-parent .training-cell-label {
color: var(--blue-900);
}
.training-checkbox {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--accent-secondary);
flex-shrink: 0;
}
.training-tab-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.training-cell-mini {
font-size: 12px;
color: var(--text-muted);
flex-shrink: 0;
}
.training-date-input {
flex: 1 1 auto;
/* [M4.2 lô 2a] nới 110 → 128px: chữ lên 16px thì chuỗi "dd/mm/yyyy" + biểu tượng
lịch cần thêm chỗ, không nới là bị cắt mất phần ngày. */
min-width: 128px;
padding: 5px 8px;
border: 1px solid var(--border-field);
border-radius: var(--radius-xs);
/* [M4.2 lô 2a] 13px → 16px — xem ghi chú ràng buộc cứng ở .inventory-select */
font-size: var(--text-md);
color: var(--text-strong);
background: var(--surface-white);
}
.training-date-input:disabled,
.training-row-child[data-locked-by-parent] .training-date-input {
background: var(--surface-muted);
color: #8a9099;
cursor: not-allowed;
}
.training-countdown-label {
font-size: 13px;
color: var(--text-strong);
font-weight: 600;
white-space: nowrap;
}
/* Caption đếm ngược hiển thị bên cạnh tên tab con */
.training-tab-caption {
margin-left: 6px;
font-size: 12px;
font-weight: 700;
padding: 2px 8px;
border-radius: var(--radius-pill);
white-space: nowrap;
vertical-align: middle;
}
.training-tab-caption.upcoming {
background: var(--surface-warning);
color: var(--text-warning);
border: 1px solid var(--yellow-300);
}
.training-tab-caption.closing {
background: var(--red-tint);
color: var(--accent-danger);
border: 1px solid var(--border-danger);
}
/* Tab con đang ở trạng thái "khóa" (chưa tới ngày mở) */
.renluyen-child-tab-btn.tab-locked {
opacity: 0.78;
cursor: not-allowed;
filter: grayscale(0.2);
}
/* Notice khi user mở tab cha Rèn Luyện nhưng tất cả tab con đang khóa */
.training-locked-notice {
margin: 18px auto;
max-width: 520px;
padding: 20px 24px;
border-radius: 14px;
background: linear-gradient(135deg, var(--yellow-soft), var(--yellow-soft));
border: 1px dashed var(--yellow-300);
color: var(--text-warning);
text-align: center;
font-size: 15px;
box-shadow: 0 4px 14px rgba(180, 120, 6, 0.08);
}
.training-locked-notice h3 {
color: var(--text-warning);
}
/* Mobile: stack mỗi cell theo chiều dọc cho dễ đọc */
@media (max-width: 800px) {
.training-row {
grid-template-columns: 1fr;
gap: 8px;
padding: 10px;
}
.training-row-child {
padding-left: 14px;
}
.training-cell-date,
.training-cell-countdown,
.training-cell-label {
width: 100%;
}
.training-date-input {
flex: 1 1 auto;
}
}
/* =========================================================
🚀 BẢN VÁ TỐI THƯỢNG: MENU STICKY ÔM KHÍT NỘI DUNG 🚀
========================================================= */
@media (min-width: 901px) {
/* === KHÓA CHIỀU CAO THEO MÀN HÌNH ===
Cả trang KHÔNG cuộn (không có scroll ngoài). Toàn bộ .app cao đúng bằng
màn hình; khu 2 cột chiếm phần còn lại. Menu trái kéo dài hết cột và luôn
cố định; chỉ vùng nội dung bên phải mới cuộn bên trong. */
html,
body {
height: 100%;
/* Ghi đè overflow-y: scroll mặc định trên CẢ html lẫn body. Quan trọng:
html đang để overflow-y: scroll khiến thanh cuộn dọc LUÔN hiện dù trang
không dài hơn màn hình -> phải tắt ở html mới hết thanh cuộn ngoài. */
overflow: hidden !important;
}
.app {
height: calc(100vh - 16px);
/* 16px = padding 8px trên + 8px dưới của body */
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: hidden;
}
h1,
.top-bar {
flex-shrink: 0;
}
/* Khu 2 cột chiếm hết phần còn lại; 2 cột cao bằng nhau (stretch) */
.app-layout {
flex: 1 1 auto;
min-height: 0;
align-items: stretch !important;
}
/* Menu trái: cao bằng đúng cột layout (kéo dài tới đáy = vạch đỏ) và luôn
cố định vì trang không cuộn. Vẫn có thanh cuộn riêng nếu màn hình quá thấp. */
.side-menu {
position: static !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
/* sidebar KHÔNG tự cuộn; chỉ vùng giữa cuộn */
display: flex !important;
flex-direction: column !important;
padding-bottom: 24px !important;
}
/* Bố cục 3 phần: hồ sơ (trên) & bánh răng (dưới) cố định; nav (giữa) cuộn */
.side-menu .student-profile-card,
.side-menu .side-menu-footer {
flex-shrink: 0;
}
.side-menu .side-menu-nav {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
/* ẩn thanh cuộn (vẫn cuộn được bằng lăn/chạm) */
-ms-overflow-style: none;
}
.side-menu .side-menu-nav::-webkit-scrollbar {
width: 0;
height: 0;
}
/* Vùng nội dung bên phải: cao bằng menu, không tự cuộn ở cấp này. Header công
cụ (.control-area) giữ cố định; chỉ section đang mở mới cuộn bên trong. */
.content-area {
min-height: 0;
overflow: hidden !important;
display: flex;
flex-direction: column;
}
.control-area {
flex-shrink: 0;
}
.content-section {
flex: 1 1 auto;
min-height: 0;
/* Cuộn dọc khi nội dung dài; cuộn ngang khi bảng rộng (vd bảng bài thi) */
overflow-y: auto;
overflow-x: auto;
}
/* Thu gọn Khung Avatar 30% */
.student-photo-frame-box {
width: 180px !important;
height: 180px !important;
margin: 0 auto !important;
}
/* Kích thước .student-photo dùng chung tỉ lệ 70% từ rule gốc (line 1194). */
/* Gắn Avatar ngay dưới nút Menu cuối cùng, khoảng cách 20px tuyệt đẹp */
.student-photo-box {
margin-top: 20px !important;
/* 🔥 Bỏ lệnh đẩy xuống đáy, thay bằng lề 20px */
padding-top: 0 !important;
width: 100%;
}
}
/* =========================================================
🚀 BẢN VÁ: CĂN PHẢI TUYỆT ĐỐI CHO 2 NÚT THƯỜNG (PC) 🚀
========================================================= */
@media (min-width: 901px) {
/* Đổi từ "tàng hình giữ chỗ" sang "biến mất hoàn toàn" để giải phóng không gian */
.hidden-keep-space {
display: none !important;
}
}
/* ===== BẢN VÁ: TỐI ƯU KHOẢNG TRỐNG NÚT TẠO ĐỀ (MOBILE) ===== */
@media (max-width: 900px) {
/* Ép mỏng lề dưới của cụm chữ chúc mừng */
.exam-header-left {
margin-bottom: 2px !important;
}
/* Ép mỏng lề trên của cụm nút bấm */
.exam-header-right {
margin-top: 6px !important;
}
/* Rút gọn thêm phần đuôi của dòng báo điểm nếu có */
.today-score-message {
min-height: auto !important;
margin-bottom: 0 !important;
}
}
/* =========================================================
🚀 GIAO DIỆN NHIỆM VỤ THI ĐUA (DAILY/WEEKLY QUESTS) 🚀
========================================================= */
/* .quests-panel: khung do .main-panel đảm nhiệm (đồng bộ với màn gốc) */
.quests-main-title {
text-align: center;
color: var(--red-500);
font-size: 30px;
font-weight: bold;
margin: 0 0 24px 0;
}
.quests-category {
margin-bottom: 32px;
}
.quests-category-title {
color: var(--text-strong);
font-size: 24px;
border-bottom: 3px dashed var(--border-card);
padding-bottom: 10px;
margin-bottom: 20px;
}
/* =======================================================================
DẢI BANNER "thời gian hoạt động / đếm ngược ≤24h" — MỎNG 1 dòng, không vỡ
======================================================================= */
.quests-active-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0 0 16px 0;
padding: 7px 14px;
border-radius: var(--radius-pill);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
border: 1px solid transparent;
/* MỘT DÒNG: không cho cao lên / không đẩy vỡ layout 3 cụm bên dưới */
white-space: nowrap;
overflow: hidden;
}
.quests-active-banner .qab-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* Đang mở bình thường: tông xanh nhạt */
.quests-active-banner.is-open {
background: var(--surface-hover);
border-color: var(--blue-200);
color: var(--accent-secondary);
}
/* Cận hạn ≤24h (đếm ngược): tông cam nhạt */
.quests-active-banner.is-closing {
background: var(--surface-warning);
border-color: var(--orange-300);
color: var(--text-warning);
}
.quests-active-banner.is-closing strong {
font-variant-numeric: tabular-nums;
font-size: 15px;
}
@media (max-width: 600px) {
.quests-active-banner {
font-size: 12.5px;
padding: 6px 12px;
margin-bottom: 12px;
/* Cho phép xuống tối đa 2 dòng gọn nếu thật chật, vẫn không tràn ngang */
white-space: normal;
}
/* Thu gọn: ẩn câu khích lệ, GIỮ ngày/đếm ngược */
.quests-active-banner .qab-cheer {
display: none;
}
.quests-active-banner .qab-text {
white-space: normal;
}
}
/* =======================================================================
[CHỈ MOBILE ≤900px] Màn Nhiệm vụ: khối đầu gồm tiêu đề + banner.
PC (≥901px) GIỮ NGUYÊN: .quests-sticky-head = display:contents (không sinh
hộp) → tiêu đề/banner chảy y như cũ.
======================================================================= */
.quests-sticky-head {
display: contents;
/* PC: trong suốt với layout — không đổi gì so với trước. */
}
@media (max-width: 900px) {
/* Khối đầu (tiêu đề + banner + 3 tab) hiện trên mobile. ĐÃ TẮT GHIM
(PIN_ENABLED=false) → cuộn CÙNG cả trang; chỉ giữ nền + bóng tách khỏi danh sách. */
#questsStickyHead.quests-sticky-head {
display: block;
position: relative;
z-index: 1;
background: var(--surface-card);
/* khớp nền .main-panel */
padding: 4px 0 8px;
box-shadow: 0 5px 10px rgba(var(--shadow-rgb), 0.06);
}
#questsStickyHead .quests-main-title {
margin: 0 0 8px 0;
}
#questsStickyHead .quests-active-banner {
margin-bottom: 8px;
}
/* Vùng danh sách CUỘN RIÊNG: chỉ phần này cuộn, khối đầu đứng yên trên cùng.
max-height do JS đặt = phần màn còn lại (đo runtime). overscroll-behavior:
contain để không "kéo lây" cả trang. Class .quests-mnav-panel do JS bật/tắt;
PC không có class này nên panel vẫn tự cuộn như cũ. */
.quests-panel.quests-mnav-panel .quests-scroll-area {
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Khi đang ở màn Nhiệm vụ (mobile): bỏ min-height:100vh của .app — vì 100vh
(CSS) có thể lớn hơn chiều cao màn thật (thanh địa chỉ) khiến trang vẫn dư
để cuộn, làm khối đầu trôi lên. Bỏ đi → trang vừa khít, chỉ vùng danh sách
cuộn. Class do JS bật/tắt, chỉ ảnh hưởng khi đang xem Nhiệm vụ. */
body.quests-mnav-active .app {
min-height: 0;
}
}
/* =======================================================================
THẺ TEASER "Trò chơi mới sắp mở!" (hộp quà + đếm ngược) — thay badge cũ
======================================================================= */
/* Chấm nhấp nháy nhẹ cạnh mục "Nhiệm vụ" ở sidebar khi chưa mở */
.quests-locked-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: var(--radius-circle);
background: var(--orange-600);
box-shadow: 0 0 0 0 rgba(255, 112, 67, 0.6);
vertical-align: middle;
margin-left: 2px;
animation: quests-dot-blink 1.6s ease-in-out infinite;
}
/* [NHẮC NHỞ KHU VUI CHƠI] Chấm nhỏ nhấp nháy gắn vào menu "Khu vui chơi" + tab "Rèn Luyện"
khi có chương trình Rèn Luyện đang mở/sắp mở (dùng chung animation với chấm Nhiệm vụ). */
.attn-dot {
display: inline-block;
width: 9px;
height: 9px;
border-radius: var(--radius-circle);
background: var(--orange-600);
box-shadow: 0 0 0 0 rgba(255, 112, 67, 0.6);
vertical-align: middle;
margin-left: 4px;
animation: quests-dot-blink 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.attn-dot {
animation: none;
}
}
@keyframes quests-dot-blink {
0%,
100% {
opacity: 1;
box-shadow: 0 0 0 0 rgba(255, 112, 67, 0.55);
}
50% {
opacity: 0.55;
box-shadow: 0 0 0 6px rgba(255, 112, 67, 0);
}
}
.quests-teaser {
display: flex;
justify-content: center;
padding: 8px 4px;
}
.quests-teaser-card {
width: 100%;
max-width: 460px;
text-align: center;
background: linear-gradient(160deg, var(--yellow-soft) 0%, var(--border-warning) 100%);
border: 2px solid var(--orange-300);
border-radius: var(--radius-xl);
padding: 28px 22px 26px;
box-shadow: 0 12px 34px rgba(255, 152, 0, 0.18);
}
.quests-teaser-gift {
font-size: 64px;
line-height: 1;
margin-bottom: 10px;
animation: quests-gift-bounce 2.2s ease-in-out infinite;
transform-origin: center bottom;
}
.quests-teaser-title {
font-size: 24px;
font-weight: 800;
color: var(--text-warning);
margin-bottom: 6px;
}
.quests-teaser-sub {
font-size: 15px;
color: var(--ink-600);
margin-bottom: 18px;
}
.quests-teaser-countdown {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 18px;
}
.qcd-box {
min-width: 58px;
background: var(--surface-white);
border: 1.5px solid var(--orange-300);
border-radius: var(--radius-lg);
padding: 8px 6px;
box-shadow: 0 4px 10px rgba(255, 152, 0, 0.12);
}
.qcd-num {
font-size: 26px;
font-weight: 800;
color: #ef6c00;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.qcd-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-muted);
margin-top: 2px;
}
.quests-teaser-reward {
display: inline-block;
background: var(--surface-warning);
border: 1.5px dashed #ffb74d;
border-radius: var(--radius-pill);
padding: 8px 16px;
font-size: 14px;
font-weight: 700;
color: var(--text-warning);
}
@keyframes quests-gift-bounce {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-6px) rotate(-3deg);
}
50% {
transform: translateY(0) rotate(0deg);
}
65% {
transform: translateY(-3px) rotate(3deg);
}
}
/* Tôn trọng người dùng giảm chuyển động: tắt hiệu ứng cho nhẹ nhàng */
@media (prefers-reduced-motion: reduce) {
.quests-teaser-gift,
.quests-locked-dot {
animation: none;
}
}
/* Responsive: gọn trên điện thoại, đếm ngược không tràn */
@media (max-width: 600px) {
.quests-teaser-card {
padding: 22px 14px 20px;
border-radius: 16px;
}
.quests-teaser-gift {
font-size: 52px;
}
.quests-teaser-title {
font-size: 20px;
}
.quests-teaser-countdown {
gap: 7px;
}
.qcd-box {
min-width: 50px;
padding: 7px 5px;
}
.qcd-num {
font-size: 22px;
}
}
.quests-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
}
.quest-card {
background: var(--surface-tint-blue);
border: 2px solid var(--border-input);
border-radius: 16px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* [M4.2 lô 1e] bọc chống HOVER DÍNH trên màn cảm ứng */
@media (hover: hover) {
.quest-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(var(--shadow-rgb), 0.15);
}
}
.quest-card.quest-completed {
background: var(--green-soft);
border-color: var(--green-400);
}
.quest-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.quest-title {
font-size: 18px;
font-weight: bold;
color: var(--text-strong);
}
.quest-badge {
font-size: 24px;
}
.quest-desc {
font-size: 14px;
color: var(--text-body-soft);
margin-bottom: 12px;
min-height: 40px;
}
/* [GỠ CỘNG ĐIỂM] Nhiệm vụ không còn quà → buildRewardLine trả "" → ẩn dòng, không để hụt 16px. */
.quest-reward:empty { display: none; }
.quest-reward {
font-weight: bold;
/* [ĐỢT 5 · M5.7] Cũ var(--red-500) #E14B3C trên nền thẻ kem chỉ đạt 3,92:1 — dưới
chuẩn 4,5 cho chữ 15px. Đây là dòng ghi PHẦN THƯỞNG của nhiệm vụ, trẻ đọc để
biết mình được gì nên phải rõ. --red-600 cho 4,98:1 mà chỉ lệch màu ΔE 7 so với
bản cũ — nhìn gần như không khác. 8 chỗ cùng dùng lớp này. */
color: var(--red-600);
margin-bottom: 16px;
font-size: 15px;
display: flex;
align-items: center;
gap: 6px;
}
.quest-progress-wrap {
background: var(--surface-muted);
border-radius: var(--radius-pill);
height: 18px;
position: relative;
overflow: hidden;
margin-bottom: 16px;
border: 1px solid var(--border-subtle);
}
.quest-progress-bar {
background: linear-gradient(90deg, var(--progress-fill), var(--green-300));
height: 100%;
border-radius: var(--radius-pill);
transition: width var(--dur-slow) var(--ease-out);
}
.quest-progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
color: #1a202c;
white-space: nowrap;
}
.quest-btn {
width: 100%;
padding: 12px;
border-radius: var(--radius-lg);
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.quest-btn:disabled {
background: var(--surface-disabled);
color: var(--text-faint);
cursor: not-allowed;
box-shadow: none;
}
.quest-btn.btn-claim {
background: var(--yellow-500);
/* [M4.2 lô 4] chữ TRẮNG trên nền vàng chỉ 1,87:1 — gần như mất chữ.
Đổi sang chữ xanh đậm: 7,64:1. Cùng cách đã dùng cho .btn-bonus ở lô 1. */
color: var(--blue-900);
box-shadow: 0 4px 0 var(--orange-text);
animation: questPulse 1.5s infinite;
}
/* [M4.2 lô 1e] bọc chống HOVER DÍNH trên màn cảm ứng */
@media (hover: hover) {
.quest-btn.btn-claim:hover {
background: var(--orange-brand);
transform: translateY(2px);
box-shadow: 0 2px 0 #bf9000;
}
}
.quest-btn.btn-claimed {
background: #e2e8f0;
color: #475569;
box-shadow: none;
cursor: default;
}
/* Hiệu ứng nhấp nháy phát sáng kích thích trẻ bấm nhận quà */
@keyframes questPulse {
0% {
box-shadow: 0 0 0 0 rgba(240, 180, 0, 0.7), 0 4px 0 #bf9000;
}
70% {
box-shadow: 0 0 0 10px rgba(240, 180, 0, 0), 0 4px 0 #bf9000;
}
100% {
box-shadow: 0 0 0 0 rgba(240, 180, 0, 0), 0 4px 0 #bf9000;
}
}
/* Căn chỉnh lại trên Mobile */
@media (max-width: 600px) {
.quests-panel {
padding: 16px;
}
.quests-main-title {
font-size: 24px;
}
.quests-category-title {
font-size: 20px;
}
.quests-grid {
grid-template-columns: 1fr;
}
}
/* 🔥 ÉP ẨN TRIỆT ĐỂ NÚT NHIỆM VỤ TRÊN MOBILE KHI CHƯA BẬT SỰ KIỆN */
@media (max-width: 900px) {
.side-menu #menu-quests.hidden-section,
.side-menu button#menu-quests.hidden-section {
display: none !important;
}
}
/* =========================================================
🤝 NHIỆM VỤ KẾT NỐI + NHIỆM VỤ CUỐI (màn trẻ)
========================================================= */
/* Badge "Chờ duyệt (n)" cạnh tiêu đề cụm kết nối */
.quests-pending-badge {
display: inline-block;
margin-left: 10px;
padding: 3px 12px;
font-size: 14px;
font-weight: bold;
color: var(--text-inverse);
background: #e67e22;
border-radius: var(--radius-pill);
vertical-align: middle;
animation: questPulse 1.5s infinite;
}
/* Thẻ nhiệm vụ kết nối (không có thanh tiến trình) */
.quest-card.quest-connect {
background: var(--surface-card);
border-color: var(--border-warning);
}
.quest-card.quest-connect.quest-pending {
background: var(--yellow-soft);
border-color: var(--yellow-400);
}
.quest-card.quest-connect.quest-claimed {
background: var(--green-soft);
border-color: var(--green-400);
}
/* Hàng 2 nút duyệt của bố mẹ */
.connect-approve-row {
display: flex;
gap: 10px;
}
.connect-approve-row .quest-btn {
width: auto;
flex: 1;
}
.quest-btn.connect-reject {
background: var(--red-tint);
color: var(--accent-danger);
box-shadow: 0 4px 0 var(--red-line);
}
/* [M4.2 lô 1e] bọc chống HOVER DÍNH trên màn cảm ứng */
@media (hover: hover) {
.quest-btn.connect-reject:hover {
background: var(--red-tint);
transform: translateY(2px);
box-shadow: 0 2px 0 var(--red-line);
}
}
/* Nhiệm vụ cuối tự sinh (chuỗi điểm danh) — viền nổi bật */
.quest-card.quest-card-final {
background: linear-gradient(160deg, var(--yellow-soft) 0%, #fef3c7 100%);
border-color: var(--yellow-500);
}
/* =========================================================
🛠️ TRÌNH CẤU HÌNH NHIỆM VỤ (màn Cài đặt → tab Nhiệm vụ)
========================================================= */
.quests-config-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 14px;
}
.quests-config-empty {
color: var(--text-muted);
font-style: italic;
text-align: center;
padding: 14px;
}
.quests-config-hint {
font-size: 13px;
color: var(--text-muted);
margin: 0 0 12px;
}
/* "Số lượt chơi còn lại" cạnh nút Bắt đầu của 2 game Rèn luyện */
.mg-plays-left,
.math-racing-plays-left {
font-size: 13.5px;
font-weight: 700;
color: var(--text-strong);
margin-left: 10px;
white-space: nowrap;
}
.math-racing-start-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
/* Form lịch trình thi đua (tab Cài đặt chung của Nhiệm vụ) */
.quests-sched-enable {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: var(--text-strong);
margin: 2px 0 10px;
cursor: pointer;
}
.quests-sched-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin-bottom: 10px;
}
.quests-sched-countdown {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--text-strong);
margin-bottom: 4px;
cursor: pointer;
}
/* Tiêu đề phụ phân nhóm trong 1 box cấu hình (vd 2 game Rèn luyện) */
.quests-config-subtitle {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--text-strong);
margin: 6px 0 8px;
padding-bottom: 6px;
border-bottom: 1px dashed var(--border-card);
}
/* Nhãn nhóm hoa trong thẻ cấu hình khu vườn */
.garden-group-badge {
display: inline-block;
margin-left: 6px;
padding: 2px 10px;
font-size: 12px;
font-weight: 700;
border-radius: var(--radius-pill);
vertical-align: middle;
}
.garden-group-badge.common {
background: var(--yellow-soft);
color: var(--text-warning);
border: 1px solid var(--yellow-300);
}
.garden-group-badge.legendary {
background: #fce4ec;
color: #8e24aa;
border: 1px solid #ce93d8;
}
/* ===== Lưới thẻ hoa Khu vườn (Cài đặt): cố gắng 3 thẻ/hàng, vỡ thì 2, mobile 1 ===== */
.garden-plants-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-bottom: 14px;
}
@media (max-width: 1100px) {
.garden-plants-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.garden-plants-grid {
grid-template-columns: 1fr;
}
}
/* ===== Thẻ phần thưởng Rèn luyện: hàng ngang, tối đa 3 thẻ/hàng (giống tab Khu vườn) ===== */
.training-rewards-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 14px;
}
@media (max-width: 1100px) {
.training-rewards-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.training-rewards-grid {
grid-template-columns: 1fr;
}
}
/* Co ngắn các hạng mục bên trong thẻ để 3 ô Điểm/Nước/Phân nằm gọn trên 1 thẻ hẹp */
.training-rewards-grid .quest-config-card {
padding: 10px;
gap: 6px;
}
.training-rewards-grid .quest-config-index {
font-size: 13px;
line-height: 1.25;
}
.training-rewards-grid .quest-config-rewards {
/* [GỠ CỘNG ĐIỂM] Còn 2 ô (💧 nước · 🌱 phân bón) sau khi gỡ ô "Điểm" → 2 cột cho cân. */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
padding: 8px;
}
.training-rewards-grid .quest-config-field {
font-size: 11.5px;
gap: 2px;
}
.training-rewards-grid .quest-config-field>span {
white-space: nowrap;
}
.training-rewards-grid .quest-config-field input {
padding: 6px 6px;
font-size: 13px;
text-align: center;
}
/* Thẻ hoa: TRÁI = tên (text tĩnh) + ảnh hoa; PHẢI = các ô nhập. */
.garden-plant-card {
background: var(--surface-tint-blue);
border: 1px solid var(--blue-200);
border-radius: 14px;
padding: 14px;
display: flex;
gap: 14px;
align-items: flex-start;
box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.06);
}
.garden-plant-card-main {
flex: 0 0 40%;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
/* tên + ảnh CĂN TRÁI */
gap: 8px;
text-align: left;
}
.garden-plant-card-name {
width: 100%;
line-height: 1.3;
}
/* Tên hoa nằm TRONG KHUNG màu theo nhóm: vàng = hoa thường, tím = hoa huyền thoại.
(Đã bỏ chữ "Thường"/"Huyền thoại"; chính cái khung này thể hiện nhóm hoa.) */
.garden-plant-name-chip {
display: inline-block;
max-width: 100%;
box-sizing: border-box;
padding: 6px 12px;
border-radius: var(--radius-md);
font-weight: 800;
font-size: 14px;
line-height: 1.3;
word-break: break-word;
}
.garden-plant-name-chip.common {
background: var(--yellow-soft);
color: var(--text-warning);
border: 2px solid var(--yellow-300);
}
.garden-plant-name-chip.legendary {
background: #fce4ec;
color: #8e24aa;
border: 2px solid #ce93d8;
}
.garden-plant-card-imgwrap {
width: 100%;
display: flex;
justify-content: flex-start;
}
.garden-plant-card-img {
width: 96px;
height: 96px;
object-fit: contain;
display: block;
}
.garden-plant-card-img-emoji {
font-size: 60px;
line-height: 1;
align-items: center;
justify-content: center;
}
.garden-plant-card-fields {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
/* [GĐ2] Khối thưởng thu hoạch trong thẻ cấu hình hoa: 1 nhóm, 3 ô (giọt/quay/vé). */
.garden-plant-card-rewards {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 2px;
}
.garden-reward-group {
background: var(--surface-subtle);
border: 1px dashed var(--blue-200);
border-radius: var(--radius-md);
padding: 8px 10px;
}
.garden-reward-title {
font-size: 12.5px;
font-weight: 800;
color: var(--text-strong);
margin-bottom: 6px;
}
.garden-reward-row {
display: flex;
gap: 8px;
}
.garden-reward-field {
flex: 1 1 0;
min-width: 0;
}
.garden-reward-field>span {
font-size: 12px;
white-space: nowrap;
}
/* ============================================================
[GĐ3] TRÌNH CÀI ĐẶT THẺ "GHÉP HOA" (admin) — ô nhập ≥16px (mobile)
============================================================ */
.bouquet-editor-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.bouquet-count {
font-size: 14px;
color: var(--text-strong);
}
.bouquet-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
}
.bouquet-card {
background: var(--surface-tint-blue);
border: 1px solid var(--blue-200);
border-radius: 14px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.bouquet-card.active {
border-color: var(--accent-primary);
box-shadow: 0 0 0 2px rgba(67, 160, 71, 0.18);
background: var(--green-soft);
}
.bouquet-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.bouquet-active-label {
display: flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: var(--text-success);
font-size: 14px;
cursor: pointer;
}
.bouquet-active-label input {
width: 20px;
height: 20px;
}
.bouquet-sub-title {
font-size: 13px;
font-weight: 800;
color: var(--text-strong);
margin-bottom: 4px;
}
.bouquet-flowers {
background: var(--surface-white);
border: 1px dashed var(--blue-200);
border-radius: var(--radius-md);
padding: 10px;
}
.bouquet-flower-row {
display: flex;
gap: 8px;
align-items: center;
margin-bottom: 8px;
}
.bouquet-flower-select {
flex: 1 1 auto;
min-width: 0;
font-size: 16px;
padding: 9px 8px;
border: 1px solid var(--border-field);
border-radius: var(--radius-sm);
background: var(--surface-white);
}
.bouquet-flower-qty {
flex: 0 0 70px;
width: 70px;
font-size: 16px;
padding: 9px 8px;
border: 1px solid var(--border-field);
border-radius: var(--radius-sm);
text-align: center;
}
.bouquet-row-del {
flex: 0 0 auto;
width: 38px;
height: 38px;
border: 1px solid var(--border-danger);
background: var(--red-soft);
color: var(--red-550);
border-radius: var(--radius-sm);
font-size: 16px;
cursor: pointer;
}
.bouquet-row-del:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.bouquet-add-row {
margin-top: 2px;
}
.bouquet-add-row:disabled,
.bouquet-del-card:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.bouquet-reward-row {
display: flex;
gap: 8px;
}
.bouquet-reward-field {
flex: 1 1 0;
min-width: 0;
}
.bouquet-reward-field>span {
font-size: 12px;
white-space: nowrap;
}
.bouquet-card .quest-config-field input,
.bouquet-card .bouquet-message {
font-size: 16px;
}
.bouquet-message {
width: 100%;
box-sizing: border-box;
padding: 9px 10px;
border: 1px solid var(--border-field);
border-radius: var(--radius-sm);
font-family: inherit;
line-height: 1.5;
resize: vertical;
}
/* Màn rất hẹp: xếp dọc tên/ảnh trên, ô nhập dưới cho dễ thao tác. */
@media (max-width: 460px) {
.garden-plant-card {
flex-direction: column;
}
.garden-plant-card-main {
flex: 1 1 auto;
width: 100%;
}
}
/* Mỗi nhiệm vụ là 1 thẻ xếp dọc các trường (không dùng bảng ngang → hợp mobile) */
.quest-config-card {
background: var(--surface-tint-blue);
border: 1px solid var(--blue-200);
border-radius: 14px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.06);
}
.quest-config-card-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.quest-config-index {
font-weight: bold;
color: var(--text-strong);
}
.quest-config-del {
background: var(--red-tint);
color: var(--accent-danger);
border: none;
border-radius: var(--radius-sm);
padding: 5px 12px;
font-size: 13px;
cursor: pointer;
}
.quest-config-del:hover {
background: var(--red-tint);
}
/* Trường nhập: nhãn trên, control dưới */
.quest-config-field {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 13.5px;
color: var(--text-body-soft);
}
.quest-config-field>span b {
color: var(--accent-danger);
}
.quest-config-field input,
.quest-config-field select {
padding: 8px 10px;
border: 1px solid var(--border-field);
border-radius: 9px;
font-size: 14px;
background: var(--surface-white);
box-sizing: border-box;
width: 100%;
}
/* Điều kiện (số đề + điểm) và phần thưởng xếp lưới co giãn */
.quest-config-cond,
.quest-config-rewards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
}
.quest-config-rewards {
background: var(--surface-hover);
border-radius: var(--radius-md);
padding: 10px;
}
.quest-config-check {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--text-strong);
cursor: pointer;
}
/* Khối xem trước đúng dòng chữ trẻ sẽ thấy */
.quest-config-preview {
border-top: 1px dashed var(--border-subtle);
padding-top: 8px;
}
.quest-config-preview-label {
font-size: 12px;
color: var(--text-muted);
margin-bottom: 4px;
}
.quest-config-preview-desc {
font-weight: 600;
color: #0f172a;
}
.quest-config-preview-reward:empty { display: none; } /* [GỠ CỘNG ĐIỂM] nhiệm vụ không quà → không hiện dòng rỗng */
.quest-config-preview-reward {
color: var(--text-warning);
font-weight: 600;
margin-top: 2px;
}
.quest-config-preview-applies {
color: var(--link);
font-weight: 600;
margin-top: 2px;
}
/* Hàng "Nội dung nhiệm vụ" + "Áp dụng cho" nằm cùng 1 dòng (label & ô nhập ngang nhau) */
.quest-config-connect-row {
display: flex;
gap: 16px;
align-items: flex-start;
}
/* Ô nội dung dài gấp ~3.4 lần ô "Áp dụng cho" */
.quest-config-connect-row .quest-config-field-content {
flex: 3.4 1 0;
min-width: 0;
}
.quest-config-connect-row .quest-config-field-applies {
flex: 1 1 0;
min-width: 150px;
}
/* Ép 2 ô nhập (textbox + nút combobox) CÙNG chiều cao để thẳng hàng trên & dưới */
.quest-config-connect-row .quest-config-field-content input,
.quest-config-connect-row .quest-applies-toggle {
height: 40px;
min-height: 40px;
box-sizing: border-box;
margin: 0;
line-height: 22px;
}
/* Combobox tùy biến cho "Áp dụng cho" */
.quest-applies-dd {
position: relative;
width: 100%;
}
.quest-applies-toggle {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border: 1px solid var(--border-input);
border-radius: 9px;
background: var(--surface-white);
font-size: 14px;
color: var(--text-body);
cursor: pointer;
text-align: left;
}
.quest-applies-dd.open .quest-applies-toggle {
border-color: var(--accent-secondary);
box-shadow: 0 0 0 2px rgba(var(--accent-secondary-rgb), 0.15);
}
.quest-applies-summary {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.quest-applies-caret {
flex: none;
color: var(--text-muted);
font-size: 12px;
}
.quest-applies-panel {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 60;
background: var(--surface-white);
border: 1px solid var(--border-input);
border-radius: 9px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
padding: 6px;
max-height: 220px;
overflow-y: auto;
}
.quest-applies-opt {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: var(--radius-xs);
font-size: 14px;
color: var(--text-body);
cursor: pointer;
}
.quest-applies-opt:hover {
background: var(--surface-subtle);
}
/* Ghi đè width:100% mặc định của input trong .quest-config-field để checkbox không bị giãn */
.quest-applies-opt input[type="checkbox"] {
width: auto;
margin: 0;
cursor: pointer;
}
.quests-config-add {
width: 100%;
background: var(--accent-secondary) !important;
color: var(--text-inverse) !important;
}
.quests-config-add:disabled {
background: var(--surface-disabled) !important;
cursor: not-allowed;
}
.quests-config-actions {
display: flex;
gap: 10px;
margin-top: 14px;
}
.quests-config-actions .settings-btn {
flex: 1;
}
/* Header "tiêu đề + 2 nút Hủy/Lưu cùng hàng": tiêu đề căn GIỮA box, nút căn phải gọn.
Grid 1fr auto 1fr → cột trái trống cân với cột nút → tiêu đề đứng GIỮA (giữ nguyên vị trí cũ).
Dùng cho: Khu vườn (🌱) và 3 khu tab Rèn Luyện (📅/🏆/🎮). */
.garden-config-header,
.config-inline-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--border-card);
/* gạch chân full-width như tiêu đề cũ */
}
.garden-config-header .settings-group-title,
.config-inline-header .settings-group-title {
grid-column: 2;
margin: 0;
padding: 0;
border: none;
text-align: center;
}
.garden-config-header .garden-config-actions,
.config-inline-header .config-inline-actions {
grid-column: 3;
justify-self: end;
margin: 0;
}
@media (max-width: 600px) {
.garden-config-header,
.config-inline-header {
display: flex;
flex-direction: column;
gap: 8px;
}
.garden-config-header .garden-config-actions,
.config-inline-header .config-inline-actions {
justify-self: auto;
width: 100%;
}
}
/* Nút Lưu/Hủy GỌN + BẰNG NHAU (Cài đặt chung nhiệm vụ & Lịch trình Rèn Luyện) */
.quests-config-actions.sched-actions-compact {
justify-content: flex-end;
}
.quests-config-actions.sched-actions-compact .settings-btn {
flex: 0 0 auto;
min-width: 130px;
/* 2 nút cùng độ rộng → bằng nhau */
}
@media (max-width: 600px) {
.quests-config-actions.sched-actions-compact .settings-btn {
flex: 1 1 0;
min-width: 0;
/* điện thoại: chia đôi đều, không tràn */
}
}
/* =========================================================
UPDATED QUIZ LAYOUT: PROFILE CARD + TWO SECTION EXAM
Native CSS only - no framework
========================================================= */
/* THẺ HỒ SƠ NHÂN VẬT KIỂU GAME: avatar -> tên -> huy hiệu cấp độ, căn giữa */
.student-profile-card {
width: 100%;
box-sizing: border-box;
padding: 18px 14px 16px;
margin-bottom: 16px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(160deg, var(--surface-white) 0%, var(--surface-hover) 100%);
border: 1px solid var(--blue-200);
border-radius: var(--radius-xl);
box-shadow: 0 10px 26px rgba(var(--shadow-rgb), 0.12), inset 0 1px 0 var(--surface-white);
}
.student-profile-card .student-photo-box {
margin-top: 0 !important;
padding-top: 0 !important;
width: 100%;
display: flex;
justify-content: center;
}
.student-profile-name {
margin-top: 12px;
color: var(--blue-900);
font-size: 21px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.2px;
}
.student-profile-level {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 8px;
padding: 5px 16px;
box-shadow: 0 3px 10px rgba(var(--shadow-rgb), 0.12);
}
.side-menu-divider {
height: 1px;
margin: 10px 6px;
background: linear-gradient(90deg, transparent, var(--blue-200), transparent);
}
/* Nhãn nhóm nhỏ trong sidebar (gần như không tăng chiều cao) */
.side-menu-caption {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--text-muted);
padding: 3px 10px 2px;
line-height: 1.3;
}
/* Nhãn nhóm thứ 2 (thay đường kẻ divider): có gạch mảnh phía trên để phân tách */
.side-menu-caption-mid {
margin-top: 6px;
padding-top: 8px;
border-top: 1px solid var(--border-subtle);
}
/* Khối điều hướng nằm giữa thẻ hồ sơ và nút cài đặt dưới đáy */
.side-menu-nav {
display: flex;
flex-direction: column;
}
/* Đẩy nút cài đặt xuống đáy sidebar (side-menu là flex-column) */
.side-menu-footer {
margin-top: auto;
padding-top: 12px;
display: flex;
justify-content: flex-start;
}
/* Nút cài đặt dạng bánh răng tối giản, gọn ở góc dưới */
.side-menu-footer .menu-settings-gear {
width: 44px;
height: 44px;
min-width: 44px;
margin: 0;
padding: 0;
border: 1px solid var(--border-card);
border-radius: var(--radius-circle);
background: var(--surface-subtle);
color: var(--text-strong);
font-size: 20px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, transform 0.25s ease, box-shadow 0.2s ease;
}
/* [M4.2 lô 1e] bọc chống HOVER DÍNH trên màn cảm ứng */
@media (hover: hover) {
.side-menu-footer .menu-settings-gear:hover {
background: var(--blue-100);
transform: rotate(45deg);
box-shadow: 0 3px 10px rgba(var(--shadow-rgb), 0.18);
}
}
.side-menu-footer .menu-settings-gear.active-section {
background: var(--blue-100);
border-color: var(--blue-300);
}
.quiz-layout {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
/* Hai vùng câu hỏi xếp dọc, cách nhau 1 khoảng nhỏ để dồn nội dung lên, hạn chế scroll */
.math-quiz-layout {
display: flex;
flex-direction: column;
gap: 8px;
}
.quiz-section {
box-sizing: border-box;
width: 100%;
padding: 8px 10px;
border: 2px solid var(--border-card);
border-radius: 16px;
background: var(--surface-white);
box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.05);
}
.quiz-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
padding: 0 2px 5px;
border-bottom: 2px dashed var(--border-card);
color: var(--text-strong);
}
.quiz-section-header h2 {
margin: 0;
font-size: 17px;
line-height: 1.2;
}
.quiz-section-header span {
padding: 5px 12px;
border-radius: var(--radius-pill);
background: var(--surface-subtle);
color: var(--text-strong);
font-weight: 800;
white-space: nowrap;
}
.fast-question-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
align-items: stretch;
}
.fast-question-card {
min-width: 0;
}
.fast-question-card-empty {
min-height: 74px;
border: 2px dashed var(--border-subtle);
border-radius: var(--radius-xl);
background: linear-gradient(135deg, rgba(248, 251, 255, 0.65), rgba(255, 253, 244, 0.65));
}
.fast-exam-table {
/* Không kéo cao 100% theo cột bên cạnh: mỗi hàng giữ chiều cao tự nhiên bằng nhau,
cột 3 câu chỉ kết thúc sớm và để trống bên dưới thay vì giãn ra cho bằng cột 4 câu */
margin-bottom: 0 !important;
table-layout: fixed !important;
}
.fast-exam-table .col-question {
width: auto !important;
}
/* Trả lời / Kết quả / Đáp án bằng nhau và rộng ~1.2 lần so với cột Trả lời cũ (86px) */
.fast-exam-table .col-answer {
width: 103px !important;
}
.fast-exam-table .col-result {
width: 103px !important;
}
.fast-exam-table .col-correct {
width: 103px !important;
}
.fast-exam-table .col-choice {
display: none !important;
}
.fast-exam-table th.col-choice,
.fast-exam-table td.col-choice {
display: none !important;
}
.fast-exam-table th,
.fast-exam-table td {
padding-left: 5px !important;
padding-right: 5px !important;
}
.word-exam-table {
margin-bottom: 0 !important;
table-layout: fixed !important;
}
.word-exam-table .col-no {
width: 56px !important;
}
.word-exam-table .col-question {
width: 38% !important;
}
.word-exam-table .col-answer {
width: 92px !important;
}
.word-exam-table .col-result {
width: 64px !important;
}
.word-exam-table .col-correct {
width: 102px !important;
}
.word-exam-table .col-choice {
width: 92px !important;
}
.word-exam-table .choice-btn.selected {
background: var(--accent-secondary) !important;
color: var(--text-inverse) !important;
border-color: var(--accent-secondary) !important;
}
@media (min-width: 901px) {
.student-profile-card .student-photo-frame-box {
width: 170px !important;
height: 170px !important;
}
/* Kích thước .student-photo dùng chung tỉ lệ 70% từ rule gốc (line 1194). */
}
@media (max-width: 1200px) and (min-width: 901px) {
.fast-question-grid {
grid-template-columns: 1fr;
}
.fast-question-card-empty {
display: none;
}
}
@media (max-width: 900px) {
.student-profile-card,
.side-menu-divider {
display: none;
}
.quiz-section {
padding: 10px;
border-radius: 18px;
}
.quiz-section-header {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.fast-question-grid {
grid-template-columns: 1fr;
}
.fast-question-card-empty {
display: none;
}
}
/* =========================================================
🚀 TINH CHỈNH CHIỀU CAO/RỘNG THEO YÊU CẦU (PC) 🚀
========================================================= */
@media (min-width: 901px) {
/* 1) Menu ngắn lại ~1cm: thu chiều cao khu 2 cột xuống một khoảng ở đáy.
Vì menu trái và vùng nội dung đều "stretch" theo khu 2 cột nên cả hai
cùng ngắn lại và cùng kết thúc ở một mức (vạch đỏ). */
.app-layout {
margin-bottom: 36px;
}
/* 2) Màn Câu hỏi: header/bảng vùng "Tính nhanh" / "Thử thách toán có lời văn"
rộng đúng bằng header bảng Cửa hàng (1100px). .quiz-section có padding ngang
20px + viền 4px nên cần max-width 1124px để phần bảng bên trong đạt 1100px. */
.math-quiz-layout {
max-width: 1124px;
margin-left: auto;
margin-right: auto;
}
/* 3) Lịch sử theo ngày: cho vùng danh sách kéo dài tới đáy (hiển thị thêm
dòng dữ liệu), data cuối ngang đáy menu. KHÔNG đổi độ rộng các dòng. */
/* Màn này tự cuộn bên trong .history-scroll-area nên KHÔNG để cấp ngoài
(.content-section) cuộn nữa -> tránh thanh cuộn thừa ở mép phải. */
#section-history {
overflow: hidden;
}
.history-panel {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
margin-bottom: 0;
/* Viền 1px nằm TRONG chiều cao 100% (nếu không sẽ dư ~2px khiến
.content-section hiện thêm 1 thanh cuộn ngoài không mong muốn) */
box-sizing: border-box;
}
.history-summary,
.history-title,
.history-table-header {
flex-shrink: 0;
}
.history-scroll-area {
flex: 1 1 auto;
min-height: 0;
max-height: none;
}
/* 4) Quay thưởng: vùng "Lịch sử quay thưởng" tự cuộn bên trong, nên chặn
cấp ngoài (.content-section) cuộn -> mất thanh cuộn thừa ở mép phải.
Đồng thời thu bớt chiều cao vùng lịch sử để vừa khít, không bị cắt. */
/* CHỈ áp khi màn Khu Vui Chơi đang mở; nếu thêm display:flex cho cả khi ẩn,
selector ID sẽ thắng .hidden-section (display:none) làm màn này luôn hiện. */
#section-playground:not(.hidden-section) {
overflow: hidden;
/* Cột dọc để vùng con (.garden-wrapper) lấp đúng phần còn lại */
display: flex;
flex-direction: column;
}
/* 5) Khu Vườn: LƯỚI 9 ô đất tự co giãn lấp đúng phần còn lại nên đáy lưới
luôn ngang đáy menu (không cần căn số). Tabs cha/con và thanh tài nguyên
(Nước/Phân/Tiến độ) nằm ngoài lưới nên tự giữ cố định; chỉ lưới cuộn.
Chuỗi flex chỉ tác động tab "Khu Vườn" (dùng ID), không ảnh hưởng các tab khác. */
.garden-wrapper {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.garden-tabs-parent {
flex-shrink: 0;
}
#garden-panel-garden.garden-panel.active {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
#garden-child-plots.garden-child-panel.active {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
#garden-panel-garden .garden-tabs-child,
#garden-child-plots .garden-resources {
flex-shrink: 0;
}
.garden-plots-grid {
/* 9 ô / 3 hàng tự co giãn lấp đúng phần còn lại, KHÔNG cuộn dọc. */
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
grid-template-rows: repeat(3, minmax(0, 1fr));
}
/* Hai tab con còn lại (Tiệm Hạt Giống / Bộ Sưu Tập) cũng cuộn bên trong,
tránh bị overflow:hidden của khu chơi cắt mất khi danh sách dài. */
#garden-child-shop.garden-child-panel.active,
#garden-child-collection.garden-child-panel.active,
#garden-child-bouquet.garden-child-panel.active {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
/* Tab "Bó hoa yêu thương": cho thông báo TRỐNG căn giữa cả vùng tab (cao). */
#garden-child-bouquet.garden-child-panel.active {
display: flex;
flex-direction: column;
}
#garden-child-bouquet.garden-child-panel.active .bouquet-cards-child.is-empty {
flex: 1 1 auto;
}
/* 6) Rèn Luyện -> Đường đua: khung đua lấp đúng phần còn lại để đáy (viền
dưới) ngang đáy menu, không bị overflow:hidden của khu chơi cắt mất.
Nếu nội dung cao hơn thì cuộn bên trong khung; tabs con giữ cố định. */
#garden-panel-renluyen.garden-panel.active {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
#renluyen-tabs-child {
flex-shrink: 0;
}
#racing-panel {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.math-racing-wrap {
flex: 1 1 auto;
min-height: 0;
/* KHÔNG cuộn trong vùng đua: nội dung đã co gọn để vừa khít,
đáy khung (viền dưới) luôn ngang đáy menu nhờ flex lấp đầy. */
overflow: hidden;
box-sizing: border-box;
}
/* 7) Nhiệm vụ: lấy "Cửa hàng đổi thưởng" làm chuẩn — panel chính lấp đầy vùng
nội dung để đáy (viền dưới) luôn ngang đáy menu; chỉ phần danh sách nhiệm vụ
bên trong mới cuộn, không sinh thanh cuộn thừa ở cấp ngoài. */
#section-quests:not(.hidden-section) {
overflow: hidden;
display: flex;
flex-direction: column;
}
#section-quests .quests-panel {
flex: 1 1 auto;
min-height: 0;
margin-bottom: 0;
box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
}
/* 8) Khu Vui Chơi → tab "Vòng Quay & Quà": vùng nền vàng (.lucky-section) lấp
đầy tới đáy menu giống bảng Cửa hàng, thay cho min-height cứng 585px. */
#garden-panel-spin.garden-panel.active {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
#garden-panel-spin #spin-child-spin.garden-child-panel.active {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
#garden-panel-spin .lucky-section {
flex: 1 1 auto;
min-height: 0;
/* bỏ ràng buộc 585px cứng để tự lấp đầy chiều cao */
overflow-y: auto;
overflow-x: hidden;
}
/* 9) Bài kiểm tra: khung .main-panel cũng lấp đầy tới đáy menu như
màn gốc; nội dung dài thì cuộn bên trong khung (không sinh cuộn thừa cấp ngoài). */
#section-questions:not(.hidden-section) {
overflow: hidden;
display: flex;
flex-direction: column;
}
#section-questions>.main-panel {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
}
/* =========================================================
🎛️ LAYOUT 2 CỘT CHO TAB "CÀI ĐẶT CHUNG"
- Cột trái 40% : 3 checkbox cấu hình hệ thống
- Cột phải 60% : form đổi mật khẩu admin
- Trên mobile : xếp dọc, divider chuyển thành đường ngang
========================================================= */
.general-settings-box {
padding: 14px 16px 12px;
}
.general-settings-grid {
display: flex;
align-items: stretch;
gap: 18px;
margin-top: 4px;
}
.general-settings-col {
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.general-settings-col-left {
flex: 0 0 40%;
max-width: 40%;
padding-right: 18px;
gap: 8px;
}
.general-settings-col-right {
flex: 1 1 60%;
max-width: 60%;
padding-left: 18px;
border-left: 1px solid #e2e8f0;
}
.general-settings-subtitle {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--text-strong);
margin-bottom: 4px;
padding-bottom: 6px;
border-bottom: 1px dashed var(--border-card);
}
.general-settings-col-left .admin-toggle-row {
margin: 0;
padding: 4px 0;
text-align: left;
justify-content: flex-start;
}
.general-settings-col-left .admin-toggle-row label {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
cursor: pointer;
font-size: 13.5px;
line-height: 1.25;
text-align: left;
width: 100%;
}
.general-settings-col-left .admin-toggle-row input[type="checkbox"] {
width: 16px;
height: 16px;
flex-shrink: 0;
cursor: pointer;
margin: 0;
}
.quests-toggle-label {
color: var(--text-strong);
font-weight: bold;
}
/* =========================================================
🔒 FORM CẬP NHẬT MẬT KHẨU ADMIN (cột phải)
========================================================= */
.admin-password-update-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.admin-password-title {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.1px;
text-transform: uppercase;
color: var(--text-strong);
margin-bottom: 2px;
padding-bottom: 6px;
border-bottom: 1px dashed var(--border-card);
}
.admin-password-form {
display: flex;
flex-direction: column;
gap: 8px;
}
.admin-password-row {
display: flex;
gap: 10px;
}
.admin-password-row>.admin-password-field {
flex: 1 1 50%;
min-width: 0;
}
.admin-password-field {
position: relative;
display: flex;
align-items: center;
}
.admin-password-field-full {
width: 100%;
}
.admin-password-input {
flex: 1;
width: 100%;
height: 32px;
padding: 0 34px 0 10px;
border: 1px solid var(--border-field);
border-radius: var(--radius-sm);
font-size: 13px;
line-height: 1.2;
background: var(--surface-tint-blue);
color: var(--text-strong);
box-sizing: border-box;
outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-password-input:focus {
border-color: var(--accent-secondary);
background: var(--surface-white);
}
.admin-password-eye {
position: absolute;
right: 3px;
/* Neo dọc bằng top/bottom 0 + margin auto → icon ĐỨNG YÊN khi focus
(không dùng transform translateY để tránh nhảy subpixel lúc repaint). */
top: 0;
bottom: 0;
margin: auto 0;
width: 26px;
height: 26px;
padding: 0;
border: none;
background: transparent;
font-size: 14px;
line-height: 1;
cursor: pointer;
opacity: 0.7;
border-radius: var(--radius-xs);
display: flex;
align-items: center;
justify-content: center;
}
.admin-password-eye:hover {
opacity: 1;
background: rgba(var(--accent-secondary-rgb), 0.08);
}
.admin-password-eye.is-visible {
opacity: 1;
background: rgba(var(--accent-secondary-rgb), 0.12);
}
/* ====== [ICON MẮT MẬT KHẨU — CƠ CHẾ DÙNG CHUNG] ======================
Bọc 1 ô trong .pw-eye-wrap rồi thêm nút .pw-eye-btn
(👁️) gọi toggleAdminPasswordVisibility(id, this). Dùng cho các form chưa
có sẵn wrapper admin (đặt mật khẩu cài đặt lần đầu, đăng nhập, đăng ký,
liên kết Google…). Icon neo top/bottom 0 + margin auto → đứng yên khi focus. */
.pw-eye-wrap {
position: relative;
display: block;
width: 100%;
}
.pw-eye-wrap > input {
/* chừa chỗ bên phải để chữ/placeholder không chui xuống dưới icon */
padding-right: 44px;
}
.pw-eye-btn {
position: absolute;
right: 8px;
top: 0;
bottom: 0;
margin: auto 0;
width: 32px;
height: 32px;
padding: 0;
border: none;
background: transparent;
font-size: 17px;
line-height: 1;
cursor: pointer;
opacity: 0.6;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-strong);
}
.pw-eye-btn:hover {
opacity: 1;
background: rgba(var(--accent-secondary-rgb), 0.08);
}
.pw-eye-btn.is-visible {
opacity: 1;
background: rgba(var(--accent-secondary-rgb), 0.12);
}
.admin-password-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 2px;
}
.admin-password-actions .settings-btn {
flex: 0 0 auto;
min-width: 0;
padding: 6px 14px !important;
font-size: 12.5px !important;
border-radius: var(--radius-sm) !important;
height: 30px;
line-height: 1;
}
.admin-password-submit {
background: var(--accent-secondary) !important;
color: var(--text-inverse) !important;
border: 1px solid var(--accent-secondary) !important;
}
.admin-password-submit:hover {
background: var(--blue-700) !important;
}
@media (max-width: 900px) {
.general-settings-grid {
flex-direction: column;
gap: 12px;
}
.general-settings-col-left,
.general-settings-col-right {
flex: 1 1 auto;
max-width: 100%;
padding-left: 0;
padding-right: 0;
border-left: none;
}
.general-settings-col-right {
border-top: 1px solid #e2e8f0;
padding-top: 12px;
}
}
@media (max-width: 520px) {
.admin-password-row {
flex-direction: column;
gap: 8px;
}
.admin-password-row>.admin-password-field {
flex: 1 1 auto;
}
.admin-password-actions {
justify-content: stretch;
}
.admin-password-actions .settings-btn {
flex: 1 1 auto;
}
}
/* =========================================================
🛒 KHỐI "QUẢN LÝ PHẦN THƯỞNG" trong Settings (tab cha mới)
Header gồm tiêu đề bên trái + nút "Lưu phần thưởng" bên phải, đè lên
layout absolute cũ của .reward-shop-save-btn vốn dành cho khung Cửa hàng.
========================================================= */
.reward-admin-settings-box {
width: 100%;
box-sizing: border-box;
}
.reward-admin-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--border-card);
flex-wrap: wrap;
}
.reward-admin-title {
margin: 0;
padding: 0;
border: none;
text-align: left;
flex: 1 1 auto;
font-size: 15px;
color: var(--text-strong);
}
.reward-admin-save-btn {
position: static !important;
right: auto !important;
top: auto !important;
transform: none !important;
margin: 0 !important;
flex: 0 0 auto;
}
/* ===== Thiết định tỉ lệ Vòng quay (Cài đặt → Khu vui chơi → Vòng Quay & quà) ===== */
.lucky-rate-box {
margin-top: 14px;
}
/* [LAYOUT] Tab "Vòng Quay & quà": 2 vùng ngang.
TRÁI ~1/3 (tặng lượt) bề rộng CỐ ĐỊNH (clamp) → tên con dài không vỡ layout;
PHẢI ~2/3 (bảng tỉ lệ) chiếm phần còn lại. */
.lucky-admin-layout {
display: flex;
gap: 16px;
align-items: flex-start;
}
.lucky-admin-left {
flex: 0 0 clamp(200px, 32%, 320px);
min-width: 0;
}
.lucky-admin-left .lucky-rate-box,
.lucky-admin-left #adminBonusSpinRow {
margin-top: 0;
}
.lucky-admin-right {
flex: 1 1 0;
min-width: 0;
}
.lucky-admin-right .lucky-rate-box {
margin-top: 0;
}
/* Nút "Tặng" xếp DỌC, DÀI BẰNG NHAU; tên con quá dài bị cắt gọn (ellipsis). */
.lucky-admin-left #adminBonusSpinButtons {
flex-direction: column;
align-items: stretch;
}
.lucky-admin-left #adminBonusSpinButtons .btn-bonus {
flex: 0 0 auto;
width: 100%;
min-width: 0;
max-width: 100%;
margin: 0;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Mobile: 2 vùng xếp DỌC, cột trái full bề rộng. */
@media (max-width: 800px) {
.lucky-admin-layout {
flex-direction: column;
}
.lucky-admin-left {
flex: 1 1 auto;
width: 100%;
max-width: none;
}
}
/* Hai nút Khôi phục + Lưu lại nằm cạnh nhau ở header */
.lucky-rate-header-actions {
display: flex;
gap: 8px;
flex: 0 0 auto;
flex-wrap: wrap;
}
.lucky-rate-restore-btn {
margin: 0;
}
.lucky-rate-hint {
margin: 12px 0 0;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
}
.lucky-rate-table {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Danh sách giải dạng 2 cột */
.lucky-rate-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
}
.lucky-rate-row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) 72px 72px;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: var(--radius-sm);
background: var(--surface-tint-blue);
}
/* Ô nhập "Mức" + nhãn nhỏ bên dưới (bên trong vẫn là trọng số). */
.lucky-rate-muc {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.lucky-rate-muc .lucky-rate-input {
width: 100%;
}
.lucky-rate-muc-label {
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
line-height: 1;
}
/* Dòng TỔNG: trải hết bề rộng, canh đều hai bên */
.lucky-rate-row.lucky-rate-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
background: transparent;
font-weight: 700;
color: var(--text-strong);
border-top: 1px dashed var(--border-card);
border-radius: 0;
margin-top: 2px;
padding-top: 10px;
}
.lucky-rate-icon {
font-size: 20px;
text-align: center;
}
.lucky-rate-name {
font-size: 13.5px;
color: var(--text-body-soft);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lucky-rate-input {
width: 100%;
box-sizing: border-box;
padding: 7px 6px;
border: 1px solid var(--border-field);
border-radius: var(--radius-sm);
/* [M4.2 lô 2a] 14px → 16px — xem ghi chú ràng buộc cứng ở .inventory-select */
font-size: var(--text-md);
text-align: center;
color: var(--text-strong);
}
.lucky-rate-input:focus {
outline: none;
border-color: var(--accent-secondary);
box-shadow: 0 0 0 2px rgba(var(--accent-secondary-rgb), 0.18);
}
.lucky-rate-total-wrap {
text-align: center;
font-size: 14px;
font-weight: 600;
color: var(--accent-secondary);
}
/* % TRÚNG THỰC TẾ: to, đậm, nổi bật (xanh lá) — đây là con số quan trọng nhất. */
.lucky-rate-percent {
text-align: center;
font-size: 18px;
font-weight: 800;
color: var(--text-success);
white-space: nowrap;
}
.lucky-rate-foot .lucky-rate-name {
flex: 1 1 auto;
white-space: normal;
}
.lucky-rate-warn {
margin: 10px 0 0;
font-size: 13px;
color: var(--accent-danger);
font-weight: 600;
}
@media (max-width: 600px) {
/* Màn hẹp: về 1 cột cho dễ thao tác */
.lucky-rate-grid {
grid-template-columns: 1fr;
}
.lucky-rate-row {
grid-template-columns: 26px minmax(0, 1fr) 72px 66px;
}
.lucky-rate-name {
white-space: normal;
font-size: 13px;
}
}
/* Trong Settings, panel quản lý không cần auto-center 1100px — để nó fill
theo bề rộng của settings-group-box (đã có padding 16px). */
.reward-admin-settings-box .reward-shop-admin-panel {
max-width: 100%;
margin: 0;
overflow-y: auto;
overflow-x: hidden;
padding-right: 6px;
scrollbar-gutter: stable;
}
/* Thanh cuộn nhỏ gọn, đồng tone xanh với hệ thiết kế */
.reward-admin-settings-box .reward-shop-admin-panel::-webkit-scrollbar {
width: 8px;
}
.reward-admin-settings-box .reward-shop-admin-panel::-webkit-scrollbar-track {
background: var(--surface-subtle);
border-radius: var(--radius-sm);
}
.reward-admin-settings-box .reward-shop-admin-panel::-webkit-scrollbar-thumb {
background: var(--blue-200);
border-radius: var(--radius-sm);
}
.reward-admin-settings-box .reward-shop-admin-panel::-webkit-scrollbar-thumb:hover {
background: var(--accent-secondary);
}
/* =========================================================
📐 Desktop (>=901px): #section-settings LẤP ĐẦY cột phải (flex:1 1 auto từ .content-section)
→ đáy panel Cài đặt THẲNG HÀNG đáy cột menu trái (2 cột đã align-items:stretch theo viewport).
KHÔNG khoá max-height cứng (720 cũ = chiều cao side-menu CŨ, nay đã lỗi thời do menu kéo giãn
theo viewport). Vẫn dùng flex chain + min-height:0 để vùng danh sách thẻ "Quản lý phần thưởng"
(và các tab cha khác) cuộn NỘI BỘ, không kéo scroll trang tổng.
========================================================= */
@media (min-width: 901px) {
#section-settings:not(.hidden-section) {
max-height: none;
display: flex;
flex-direction: column;
overflow: hidden;
}
#section-settings .settings-panel {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
#section-settings .admin-tabs-container {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
#section-settings .admin-parent-tabs {
flex: 0 0 auto;
}
/* Mặc định: tab cha cuộn nội bộ nếu có nội dung tràn */
#section-settings .admin-parent-panel.active {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* Riêng tab "Cửa hàng đổi thưởng": flex chain để vùng cards cuộn, header ghim */
#adminParentPanel-shop.admin-parent-panel.active {
display: flex;
flex-direction: column;
overflow: hidden;
}
#adminParentPanel-shop .admin-child-tabs {
flex: 0 0 auto;
}
#adminChildPanel-shop-manage.admin-child-panel.active {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* [SHOPEE GĐ2] Panel thiết định Shopee: chiếm phần còn lại + TỰ CUỘN (cha overflow:hidden). */
#adminChildPanel-shop-shopee.admin-child-panel.active {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
#adminChildPanel-shop-manage .reward-admin-settings-box {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
#adminChildPanel-shop-manage .reward-admin-header {
flex: 0 0 auto;
}
#adminChildPanel-shop-manage .reward-shop-admin-panel {
flex: 1 1 auto;
min-height: 0;
max-height: none;
}
}
/* Mobile: chiều cao linh hoạt theo viewport, vẫn cuộn nội bộ vùng cards */
@media (max-width: 900px) {
.reward-admin-settings-box .reward-shop-admin-panel {
max-height: calc(100vh - 320px);
min-height: 220px;
}
}
@media (max-width: 600px) {
.reward-admin-header {
flex-direction: column;
align-items: stretch;
}
.reward-admin-save-btn {
width: 100%;
}
}
/* =========================================================
📱 MOBILE ONLY — Đưa "Nộp bài / Đáp án / Finish" xuống NGAY DƯỚI vùng đề
PC (≥ 901px) hoàn toàn không bị ảnh hưởng (chỉ áp dụng <= 900px).
Kỹ thuật: display:contents phá các wrapper trung gian để 4 nút thành
con trực tiếp của .content-area (flex column), rồi dùng `order` để
đặt "Tạo đề mới" ở trên đề và 3 nút còn lại ở dưới đề.
========================================================= */
@media (max-width: 900px) {
.content-area {
display: flex !important;
flex-direction: column !important;
}
/* Phá vỡ các wrapper trung gian; selector con trực tiếp (`>`)
trong .hide-exam-buttons vẫn hoạt động vì display:contents không
thay đổi quan hệ DOM, chỉ thay đổi layout. */
.control-area,
.control-area .main-control-row,
.control-area .main-control-row .exam-header-right {
display: contents !important;
}
/* Gỡ position:fixed + các offset cũ của 3 nút "đè lên đề" */
.btn-finish-exam,
#answerAdminButton {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
top: auto !important;
transform: none !important;
z-index: auto !important;
margin: 6px auto !important;
width: 220px !important;
max-width: calc(100% - 32px) !important;
}
/* Thứ tự hiển thị dọc trên mobile:
streak/today → Tạo đề mới → vùng câu hỏi → Đáp án → Finish → Nộp bài */
.exam-header-left {
order: 1 !important;
}
.btn-start-exam {
order: 2 !important;
}
#section-questions {
order: 3 !important;
}
#section-history,
#section-shop,
#section-quests,
#section-settings,
#section-playground {
order: 3 !important;
}
#answerAdminButton {
order: 4 !important;
}
.btn-finish-exam {
order: 6 !important;
}
}
/* =========================================================
📱 MOBILE FIX (≤ 900px) — 3 tinh chỉnh nhỏ, không ảnh hưởng PC:
1. Đẩy nút "Tạo đề mới" xuống cách danh sách câu hỏi một khoảng trống.
2. Ẩn icon ⚙️ ở footer side-menu khi menu đang gấp; chỉ hiện khi mở.
3. 3 nút Đáp án / Finish / Nộp bài cao bằng "Tạo đề mới" (52px).
========================================================= */
@media (max-width: 900px) {
/* 1. Khoảng trống giữa "Tạo đề mới" và khung câu hỏi */
.btn-start-exam {
margin-bottom: 16px !important;
}
/* 2. Khi menu gấp lại (chưa có .mobile-menu-open), ẩn luôn ⚙️ ở chân;
khi bấm Menu để xổ list xuống thì gear hiện lại đúng vị trí cũ. */
.side-menu:not(.mobile-menu-open) .side-menu-footer {
display: none !important;
}
.side-menu.mobile-menu-open .side-menu-footer {
display: flex !important;
}
/* 3. Ép 3 nút action có chiều cao 52px bằng .btn-start-exam.
Một số rule mobile trước đó set padding:0 + height ngầm khiến nút
trông thấp hơn; rule này khoá lại đồng nhất chiều cao. */
.btn-finish-exam,
#answerAdminButton {
height: 52px !important;
min-height: 52px !important;
padding: 0 16px !important;
line-height: 1 !important;
}
/* 4. Đồng bộ style "Tạo đề mới" với 3 nút action (pill + viền trắng +
bóng phẳng có màu). PC vẫn giữ kiểu 3D drop-shadow gốc. */
.btn-start-exam {
height: 52px !important;
min-height: 52px !important;
padding: 0 16px !important;
line-height: 1 !important;
border: 2px solid var(--surface-white) !important;
box-shadow: 0 8px 24px rgba(var(--accent-secondary-rgb), 0.4) !important;
}
}
/* =========================================================
👧 THÔNG TIN HỌC SINH — tab con trong "Thông tin chung"
Hai cột: ảnh đại diện (40%) + form (60%). Không scrollbar.
========================================================= */
.student-info-box {
overflow: hidden;
}
.student-info-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px dashed var(--border-subtle);
margin-bottom: 14px;
}
.student-info-segmented {
flex: 1 1 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
min-width: 0;
}
.student-info-segment-btn {
width: 100%;
padding: 8px 12px;
border: 1.5px solid var(--border-input);
border-radius: var(--radius-sm);
background: var(--surface-white);
color: var(--text-strong);
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.student-info-segment-btn:hover {
background: var(--surface-hover);
border-color: var(--accent-secondary);
}
.student-info-segment-btn.active {
background: var(--accent-secondary);
color: var(--text-inverse);
border-color: var(--accent-secondary);
box-shadow: 0 4px 10px rgba(var(--accent-secondary-rgb), 0.25);
}
/* [THÊM HS INLINE] Chip TẠM "➕ Học sinh mới" khi đang nhập học sinh mới ngay trong tab.
Tông xanh lá + viền nét đứt để phân biệt với các tab học sinh thật (đang lưu). */
.student-info-segment-btn.student-info-segment-draft {
border-style: dashed;
border-color: var(--green-500);
color: var(--text-success);
background: var(--green-soft);
}
.student-info-segment-btn.student-info-segment-draft.active {
background: var(--green-500);
color: var(--text-inverse);
border-color: var(--green-500);
box-shadow: 0 4px 10px rgba(88, 165, 92, 0.28);
}
/* [MOBILE] Tab "Thông tin học sinh": PC hiện Tên hiển thị ĐẦY ĐỦ; điện thoại (≤640px) chỉ
hiện tối đa 2 chữ CUỐI (vd "Trần Minh Nguyệt" → "Minh Nguyệt") cho gọn 1 tab. 2 span do JS
xuất, chọn hiện theo bề rộng. KHÔNG đổi giá trị thật (ô input Tên vẫn lưu/hiện tên đầy đủ). */
.student-info-segment-btn .seg-name-short {
display: none;
}
@media (max-width: 640px) {
.student-info-segment-btn .seg-name-full {
display: none;
}
.student-info-segment-btn .seg-name-short {
display: inline;
}
}
.student-info-active-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--text-strong);
font-size: 14px;
cursor: pointer;
}
.student-info-active-label input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.student-info-body {
display: flex;
flex-direction: row;
gap: 18px;
/* [SỬA NÚT CHỌN ẢNH VỠ] flex-start (KHÔNG stretch): cột trái chỉ cao bằng nội dung
(ảnh + nút), không bị kéo cao theo cột phải (đã cao hơn do thêm khối Ôn thi học kỳ)
→ nút "Chọn ảnh" (.settings-btn có flex:1) không còn bị giãn cao bất thường. */
align-items: flex-start;
}
.student-info-left {
flex: 0 0 40%;
max-width: 40%;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.student-info-photo-frame-box {
position: relative;
width: 180px;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.student-info-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
pointer-events: none;
z-index: 2;
}
.student-info-photo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Dùng đúng tỉ lệ 70% như .student-photo (sidebar) → preview và avatar
sidebar hiển thị y hệt nhau sau khi cắt 1:1. */
width: 70%;
height: 70%;
object-fit: cover;
object-position: center;
border-radius: var(--radius-md);
z-index: 1;
}
.student-info-pick-photo-btn {
min-width: 130px;
/* Ghi đè flex:1 của .settings-btn để nút KHÔNG tự giãn (cao) trong cột dọc student-info-left. */
flex: 0 0 auto;
}
.student-info-photo-input {
display: none;
}
.student-info-right {
flex: 1 1 60%;
max-width: 60%;
display: flex;
flex-direction: column;
gap: 10px;
}
.student-info-field {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Hàng "Tên hiển thị" + "Biệt danh" nằm cạnh nhau: tên 2/3, biệt danh 1/3. */
.student-info-name-row {
display: flex;
gap: 10px;
align-items: flex-start;
}
.student-info-name-row .student-info-field-name {
flex: 2 1 0;
min-width: 0;
}
.student-info-name-row .student-info-field-nickname {
flex: 1 1 0;
min-width: 0;
}
/* Hàng "Lớp" + "Học kỳ" chia đôi đều nhau. */
.student-info-name-row .student-info-field-grade,
.student-info-name-row .student-info-field-semester {
flex: 1 1 0;
min-width: 0;
}
/* [ĐỢT 5 · M5.1c] Hàng "Ngày sinh" + "Giới tính" cũng chia đôi đều nhau.
min-width:0 là BẮT BUỘC: ô có bề rộng tối thiểu tự thân khá
lớn, thiếu dòng này thì trên điện thoại nó nong hàng ra gây TRÀN NGANG. */
.student-info-name-row .student-info-field-birthday,
.student-info-name-row .student-info-field-gender {
flex: 1 1 0;
min-width: 0;
}
.student-info-field label {
font-size: 13px;
font-weight: 600;
color: var(--text-strong);
}
.student-info-input {
padding: 8px 12px;
border: 1.5px solid var(--border-field);
border-radius: var(--radius-sm);
background: var(--surface-white);
color: var(--text-body);
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
.student-info-input:focus {
outline: none;
border-color: var(--accent-secondary);
box-shadow: 0 0 0 2px rgba(var(--accent-secondary-rgb), 0.18);
}
.student-info-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 6px;
}
/* [ÔN THI] Khối cấu hình mở ôn thi theo lịch, ngay dưới Lớp & Học kỳ. */
.exam-review-config {
gap: 8px;
padding: 12px;
border: 1.5px dashed var(--border-input);
border-radius: var(--radius-md);
background: var(--surface-tint-blue);
}
.exam-review-config-title {
font-size: 14px !important;
font-weight: 700;
color: var(--text-strong);
}
.exam-review-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.exam-review-toggle {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--text-body) !important;
cursor: pointer;
flex: 1 1 auto;
min-width: 0;
}
.exam-review-toggle input[type="checkbox"] {
width: 20px;
height: 20px;
flex: 0 0 auto;
accent-color: var(--accent-secondary);
cursor: pointer;
}
.exam-review-date {
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
.exam-review-num {
width: 52px;
padding: 8px 6px;
border: 1.5px solid var(--border-field);
border-radius: var(--radius-sm);
background: var(--surface-white);
color: var(--text-body);
font-size: 16px;
text-align: center;
box-sizing: border-box;
}
.exam-review-num:focus {
outline: none;
border-color: var(--accent-secondary);
box-shadow: 0 0 0 2px rgba(var(--accent-secondary-rgb), 0.18);
}
.exam-review-sep {
font-weight: 700;
color: var(--text-muted);
}
.exam-review-hint {
margin: 2px 0 0;
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
@media (max-width: 480px) {
.exam-review-row {
align-items: flex-start;
}
.exam-review-toggle {
flex: 1 1 100%;
}
.exam-review-date {
flex: 1 1 100%;
justify-content: flex-start;
}
}
@media (max-width: 800px) {
.student-info-body {
flex-direction: column;
}
.student-info-left,
.student-info-right {
flex: 1 1 100%;
max-width: 100%;
}
.student-info-photo-frame-box {
width: 150px;
height: 150px;
}
}
/* =========================================================
✂️ MODAL CẮT ẢNH AVATAR HỌC SINH
========================================================= */
.student-info-cropper-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(var(--shadow-rgb), 0.65);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
}
.student-info-cropper-modal.is-open {
display: flex;
}
.student-info-cropper-card {
background: var(--surface-white);
border-radius: 14px;
width: min(520px, 96vw);
max-height: 92vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.student-info-cropper-header {
padding: 12px 18px;
background: var(--accent-secondary);
color: var(--text-inverse);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.2px;
}
.student-info-cropper-stage {
flex: 1 1 auto;
background: var(--surface-subtle);
padding: 10px;
min-height: 320px;
max-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.student-info-cropper-stage img {
display: block;
max-width: 100%;
max-height: 60vh;
}
.student-info-cropper-tools {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px 18px 16px;
border-top: 1px solid var(--border-subtle);
}
.student-info-cropper-zoom-label {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
color: var(--text-strong);
font-size: 14px;
}
.student-info-cropper-zoom-label input[type="range"] {
flex: 1 1 auto;
accent-color: var(--accent-secondary);
}
.student-info-cropper-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* Đúng khối, học kỳ 1: nền xanh lá nhạt */
.mpg-cell--default {
background: var(--green-soft);
border-color: #b4dba3;
}
/* Đúng khối, đã lên học kỳ 2: nền xanh dương dịu */
.mpg-cell--sem2 {
background: #dbe9fb;
border-color: #93b6ec;
}
@media (max-width: 560px) {
}
/* ===== Màn hình "Lịch sử theo ngày" — tab cha/con + danh sách nhóm theo ngày ===== */
/* Đồng bộ với tab cha "Khu vui chơi" (.garden-tabs-parent / .garden-tab-btn) */
.history-tabs-parent {
display: flex;
gap: 8px;
flex-wrap: wrap;
flex-shrink: 0;
/* KHÔNG đặt overflow-x: auto ở đây — nó khiến overflow-y tự thành "auto" và sinh
thanh cuộn dọc thừa khi hàng tab bị co trong cột flex. Tab tự xuống dòng nếu hẹp. */
margin-bottom: 12px;
margin-top: 0;
padding-bottom: 4px;
border-bottom: 2px solid var(--border-card);
}
.history-parent-tab-btn {
flex: 0 0 auto;
padding: 10px 18px;
border: none;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: var(--surface-subtle);
color: var(--text-strong);
font-weight: 700;
font-size: 15px;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.history-parent-tab-btn:hover {
background: var(--blue-100);
}
.history-parent-tab-btn.active {
background: var(--blue-800);
color: var(--text-inverse);
border-bottom-color: var(--yellow-500);
}
/* =======================================================================
[CHỈ MOBILE ≤900px] STICKY HÀNG TAB CHA — màn Lịch sử + Khu vui chơi.
Chỉ cố định TAB CHA khi cuộn (để luôn truy cập được); TAB CON KHÔNG sticky
(cuộn theo nội dung). top = chiều cao thanh Menu (đang sticky top:0), JS đo
runtime qua --app-mobile-sticky-top (không hardcode).
PC (≥901px): KHÔNG áp (class do JS chỉ bật trên mobile + rule trong @media);
2 màn giữ nguyên (panel flex tự cuộn như cũ).
======================================================================= */
@media (max-width: 900px) {
/* Gỡ overflow của tổ tiên (vốn là scroll-container → phá native sticky) để
tab cha dính theo CUỘN TRANG. Class do JS bật/tắt đúng màn đang xem; màn
khác đang ẩn → không ảnh hưởng; body vẫn overflow-x:hidden chống tràn. */
body.hist-parent-sticky .content-area,
body.garden-parent-sticky .content-area {
overflow: visible !important;
}
body.hist-parent-sticky #section-history .history-panel {
overflow: visible !important;
}
/* Lịch sử: cố định hàng tab CHA. Nền = nền .main-panel (#fffaf0) → trùng nền
sẵn có nên không đổi hình thức, chỉ để nội dung cuộn dưới không lộ qua. */
#historyParentTabs {
position: sticky;
top: var(--app-mobile-sticky-top, 0px);
z-index: 30;
background: var(--surface-card);
box-shadow: 0 4px 10px rgba(var(--shadow-rgb), 0.06);
}
/* Khu vui chơi: cố định hàng tab CHA. */
#section-playground .garden-tabs-parent {
position: sticky;
top: var(--app-mobile-sticky-top, 0px);
z-index: 30;
box-shadow: 0 4px 10px rgba(var(--shadow-rgb), 0.06);
}
}
/* Khu vui chơi 641–900px: garden tab cha vốn TRONG SUỐT → thêm nền mờ đục
(= nền panel) để nội dung cuộn không lộ qua khi dính. (≤640px đã có nền
#f8fbff opaque sẵn nên bỏ qua, giữ nguyên hình thức.) */
@media (min-width: 641px) and (max-width: 900px) {
#section-playground .garden-tabs-parent {
background: var(--surface-card);
}
}
/* Đồng bộ với tab con "Khu vui chơi" (.garden-tabs-child / .garden-child-tab-btn) */
.history-tabs-child {
display: flex;
gap: 6px;
flex-wrap: wrap;
flex-shrink: 0;
margin-top: 6px;
margin-bottom: 12px;
padding: 6px 8px;
border-radius: var(--radius-md);
background: var(--surface-tint-blue);
border: 1px dashed var(--border-card);
}
.history-child-tab-btn {
flex: 0 0 auto;
padding: 7px 14px;
border: 1.5px solid var(--border-input);
border-radius: var(--radius-pill);
background: var(--surface-white);
color: var(--text-strong);
font-weight: 600;
font-size: 13.5px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
white-space: nowrap;
}
.history-child-tab-btn:hover {
background: var(--surface-hover);
border-color: var(--accent-secondary);
}
.history-child-tab-btn.active {
background: var(--accent-secondary);
color: var(--text-inverse);
border-color: var(--accent-secondary);
box-shadow: 0 4px 10px rgba(var(--accent-secondary-rgb), 0.25);
}
.history-list-area {
width: 100%;
}
/* Bảng lịch sử thống nhất — kế thừa .history-table (header xanh gradient + zebra),
chỉ định lại bề rộng 4 cột và canh trái cho cột nội dung/ghi chú để đồng bộ với
kiểu bảng "Lịch sử đổi thưởng" cũ. */
.activity-history-table {
table-layout: fixed;
}
/* Bảng phẳng (đổi thưởng/vòng quay/khu vườn/rèn luyện/nhiệm vụ) đã BỎ cột Ghi chú →
để tự co theo nội dung cho gọn (hoctap vẫn dùng layout cố định bên dưới). */
.activity-history-table:not(.hoctap-history-table) {
table-layout: auto;
}
.activity-history-table:not(.hoctap-history-table) td:first-child,
.activity-history-table:not(.hoctap-history-table) th:first-child {
white-space: nowrap;
}
.activity-history-table thead th {
position: sticky;
top: 0;
z-index: 1;
}
/* Bề rộng 4 cột bảng Lịch sử học tập: Ngày | Nội dung | Thời gian làm bài | Điểm. */
.hoctap-history-table th:nth-child(1),
.hoctap-history-table td:nth-child(1) {
width: 16%;
}
.hoctap-history-table th:nth-child(2),
.hoctap-history-table td:nth-child(2) {
width: 42%;
}
.hoctap-history-table th:nth-child(3),
.hoctap-history-table td:nth-child(3) {
width: 24%;
}
.hoctap-history-table th:nth-child(4),
.hoctap-history-table td:nth-child(4) {
width: 18%;
}
/* Khi ẩn cột "Thời gian làm bài" → bảng còn 3 cột: Ngày | Nội dung | Điểm. */
.hoctap-history-table.hide-exam-time th:nth-child(2),
.hoctap-history-table.hide-exam-time td:nth-child(2) {
width: 62%;
}
.hoctap-history-table.hide-exam-time th:nth-child(3),
.hoctap-history-table.hide-exam-time td:nth-child(3) {
width: 20%;
}
/* Ô "Thời gian làm bài" — chip thu gọn + chuỗi chi tiết xuống dòng gọn. */
.ah-col-time {
text-align: left;
}
.ah-time-chip {
display: inline-block;
padding: 2px 9px;
border-radius: var(--radius-pill);
background: var(--surface-subtle);
color: var(--text-strong);
font-weight: 700;
font-size: 13px;
cursor: pointer;
white-space: nowrap;
border: 1px solid var(--border-card);
}
.ah-time-chip:hover {
background: var(--blue-100);
}
.ah-time-detail {
margin-top: 5px;
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.5;
word-break: break-word;
white-space: normal;
}
/* Lịch sử học tập: dòng cha (ngày, bung/thu) + dòng con (từng bài) */
.hoctap-history-table .ah-parent-row {
cursor: pointer;
}
.hoctap-history-table .ah-parent-row:hover {
background: var(--surface-subtle);
}
.ah-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-right: 8px;
border-radius: 5px;
background: var(--surface-hover);
color: var(--text-strong);
font-weight: 700;
line-height: 1;
vertical-align: middle;
}
.hoctap-history-table .ah-child-row {
background: var(--surface-white);
}
.hoctap-history-table .ah-child-cell {
padding-left: 26px;
color: #475569;
}
.hoctap-history-table .ah-legacy-note {
color: var(--text-muted);
font-style: italic;
padding-left: 26px;
}
/* Khi có cột "Số lần" (tab Vòng quay): bố cục 5 cột. */
.activity-history-table.has-count th:nth-child(1),
.activity-history-table.has-count td:nth-child(1) {
width: 14%;
}
.activity-history-table.has-count th:nth-child(2),
.activity-history-table.has-count td:nth-child(2) {
width: 40%;
}
.activity-history-table.has-count th:nth-child(3),
.activity-history-table.has-count td:nth-child(3) {
width: 10%;
}
.activity-history-table.has-count th:nth-child(4),
.activity-history-table.has-count td:nth-child(4) {
width: 12%;
}
.activity-history-table.has-count th:nth-child(5),
.activity-history-table.has-count td:nth-child(5) {
width: 24%;
}
/* Cột Nội dung + Ghi chú canh trái cho dễ đọc; cho phép xuống dòng. */
.activity-history-table td.ah-col-title,
.activity-history-table td.ah-col-note {
text-align: left;
word-break: break-word;
white-space: normal;
}
.activity-history-table td.ah-col-note {
color: var(--text-muted);
padding: 4px 8px;
}
/* Ô ghi chú có thể nhập, lưu khi focus out */
.ah-note-input {
width: 100%;
box-sizing: border-box;
padding: 5px 8px;
border: 1px solid var(--border-field);
border-radius: var(--radius-xs);
background: var(--surface-white);
color: var(--text-body);
font-size: 13px;
font-family: inherit;
}
.ah-note-input:focus {
outline: none;
border-color: var(--accent-secondary);
box-shadow: 0 0 0 2px rgba(var(--accent-secondary-rgb), 0.15);
}
.history-empty {
text-align: center;
color: var(--text-muted);
padding: 30px 10px;
}
/* =========================================================
🔘 ĐỒNG BỘ KHUNG NÚT (đặt cuối để thắng các rule cũ — CHỈ hình dạng/kích cỡ,
KHÔNG đổi màu). Token định nghĩa ở :root đầu file.
========================================================= */
/* Nhóm VỪA (md ~40px): nút hành động phổ biến */
.quest-btn,
.reward-shop-save-btn,
.reward-shop-delete-btn,
.reward-shop-add-btn,
.reward-detail-btn,
.rs-redeem-btn,
.reward-admin-save-btn,
.lucky-rate-restore-btn,
.quests-config-add,
.btn-bonus {
border-radius: var(--btn-radius);
padding: var(--btn-pad-y) var(--btn-pad-x);
min-height: var(--btn-min-h);
}
/* Nhóm NHỎ (sm ~32px): nút inline nhỏ / kho phần thưởng / phụ */
.inventory-btn,
.btn-use,
.btn-tickets,
.quest-config-del,
.admin-password-submit,
.admin-password-cancel {
border-radius: var(--btn-radius);
padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
min-height: var(--btn-min-h-sm);
font-size: var(--btn-font-sm);
}
/* Menu sidebar (trừ nút bánh răng tròn): bo + đậm đồng bộ, giữ canh trái */
.menu-link:not(.menu-settings-gear) {
border-radius: var(--btn-radius);
font-weight: var(--btn-font-weight);
}
/* Segmented "Thông tin học sinh" → mẫu tab con viên thuốc */
.student-info-segment-btn {
border-radius: var(--radius-pill);
}
/* Ngoại lệ tròn/icon: không ép chiều cao tối thiểu 40px (giữ kích cỡ riêng) */
.menu-settings-gear,
.admin-password-eye {
min-height: 0;
}
/* ===== CHẶN AUTO-ZOOM KHI FOCUS Ô NHẬP TRÊN ĐIỆN THOẠI =====
iOS Safari tự phóng to màn hình khi focus vào input có font-size < 16px
(và bỏ qua user-scalable=no). Chỉ nhắm thiết bị cảm ứng qua (pointer: coarse)
nên PC dùng chuột (pointer: fine) KHÔNG bị ảnh hưởng — giữ nguyên giao diện PC. */
@media (pointer: coarse) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select {
font-size: 16px;
}
}
/* =========================================================
[ĐIỆN THOẠI] CHUẨN HOÁ TAB — CHỈ áp ≤640px. MÁY TÍNH GIỮ NGUYÊN như cũ.
• Tab chính (Cài đặt + Lịch sử) -> 1 HÀNG, CUỘN NGANG (nhãn dài KHÔNG xuống 2 hàng).
• Tab con chuyển nhanh (Khu vui chơi của trẻ + Lịch sử cấp con) -> CHIP viên thuốc.
• Tab con trong Cài đặt -> ACCORDION (do JS dựng khi mobile: .tab-accordion*).
Áp lên CHÍNH các class gốc nên KHÔNG đổi HTML; ngoài 640px mọi thứ về như cũ.
========================================================= */
@media (max-width: 640px) {
/* ---- (1) TAB CHÍNH (Cài đặt + Lịch sử): CHỈ 1 HÀNG + CUỘN NGANG ----
4–5 tab nhãn dài → KHÔNG xuống 2 hàng, KHÔNG cắt icon/chữ: mỗi tab gọn 1 dòng
(white-space:nowrap bên dưới), tràn thì VUỐT NGANG (giống các hàng tab cuộn ngang
khác trên mobile). Ẩn thanh cuộn cho gọn. */
.admin-parent-tabs,
.history-tabs-parent {
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 10px;
}
.admin-parent-tabs::-webkit-scrollbar,
.history-tabs-parent::-webkit-scrollbar {
display: none;
}
.admin-parent-tab-btn,
.history-parent-tab-btn {
flex: none;
width: auto;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
padding: 10px 10px;
min-height: 44px;
border: 1.5px solid var(--border-card);
border-radius: var(--radius-lg);
/* chip bo đều (bỏ kiểu tab góc trên) */
border-bottom: 1.5px solid var(--blue-100);
background: var(--surface-subtle);
color: var(--text-strong);
font-size: 14px;
font-weight: 700;
white-space: nowrap;
/* mỗi tab gọn 1 dòng; tràn thì CUỘN NGANG (KHÔNG xuống dòng) */
line-height: 1.15;
}
.admin-parent-tab-btn.active,
.history-parent-tab-btn.active {
background: var(--blue-800);
color: var(--text-inverse);
border-color: var(--blue-800);
}
/* ---- (2) CHIP CON (viên thuốc) cho Khu vui chơi (trẻ) + Lịch sử cấp con ----
Scoped bằng id khu vực để THẮNG rule trong garden.css (nạp sau style.css). */
#section-playground .garden-tabs-parent,
#section-history .history-tabs-child {
display: flex;
flex-wrap: nowrap;
gap: 6px;
overflow: visible;
border: 1px dashed var(--border-card);
background: var(--surface-tint-blue);
border-radius: var(--radius-md);
padding: 6px;
}
#section-playground .garden-tab-btn,
#section-history .history-child-tab-btn {
flex: 1 1 0;
min-width: 0;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 4px;
padding: 8px 6px;
min-height: 38px;
border: 1.5px solid var(--blue-200);
border-radius: var(--radius-pill);
border-bottom: 1.5px solid var(--blue-200);
background: var(--surface-white);
color: var(--text-strong);
font-size: 13px;
font-weight: 600;
white-space: normal;
line-height: 1.1;
}
#section-playground .garden-tab-btn.active,
#section-history .history-child-tab-btn.active {
background: var(--surface-subtle);
color: var(--text-strong);
font-weight: 800;
border-color: var(--accent-secondary);
}
/* ---- (C) [SHOPEE GĐ2] Cửa hàng có 2 sub-tab → HIỆN nav tab con trên điện thoại
(2 nút chia đôi bề rộng, ≥44px, không tràn) ---- */
#adminParentPanel-shop .admin-child-tabs {
display: flex !important;
}
#adminParentPanel-shop .admin-child-tab-btn {
flex: 1 1 0;
min-width: 0;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ---- (3) ACCORDION cho tab con Cài đặt (JS dựng khi mobile) ---- */
.tab-accordion {
display: flex;
flex-direction: column;
gap: 10px;
}
.tab-accordion-item {
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
background: var(--surface-white);
overflow: hidden;
box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.05);
}
.tab-accordion-header {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 13px 14px;
border: none;
background: var(--surface-subtle);
color: var(--text-strong);
font-weight: 800;
font-size: 15px;
text-align: left;
cursor: pointer;
min-height: 48px;
}
.tab-accordion-header:hover {
background: var(--blue-100);
}
.tab-accordion-item.open>.tab-accordion-header {
background: var(--blue-800);
color: var(--text-inverse);
}
.tab-accordion-header .tab-accordion-ico {
font-size: 18px;
line-height: 1;
flex: 0 0 auto;
}
.tab-accordion-header .tab-accordion-title {
flex: 1 1 auto;
min-width: 0;
}
.tab-accordion-header .tab-accordion-chevron {
flex: 0 0 auto;
font-size: 13px;
transition: transform .2s ease;
}
.tab-accordion-item.open>.tab-accordion-header .tab-accordion-chevron {
transform: rotate(180deg);
}
.tab-accordion-body {
display: none;
padding: 12px;
}
.tab-accordion-item.open>.tab-accordion-body {
display: block;
}
}
/* =========================================================
[LỊCH SỬ] THẺ DỌC TRÊN ĐIỆN THOẠI (đồng bộ kiểu thẻ cửa hàng đổi thưởng).
Máy tính (>640px) giữ BẢNG; điện thoại (≤640px) ẩn bảng phẳng, hiện thẻ.
(Bảng "Lịch sử học tập" .hoctap-history-table xử lý ở lô sau — chưa ẩn ở đây.)
========================================================= */
.history-cards {
display: none;
}
@media (max-width: 640px) {
/* Ẩn TẤT CẢ bảng lịch sử (kể cả học tập), hiện danh sách thẻ */
.activity-history-table {
display: none;
}
.history-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Thẻ Lịch sử HỌC TẬP: bấm để bung/thu danh sách bài con */
.hist-card-hoctap {
cursor: pointer;
}
.hist-card-content .hist-hoctap-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-right: 6px;
border-radius: 5px;
background: var(--surface-hover);
color: var(--text-strong);
font-weight: 700;
font-size: 12px;
line-height: 1;
vertical-align: middle;
}
.hist-hoctap-children {
margin-top: 4px;
border-top: 1px dashed var(--border-subtle);
padding-top: 7px;
display: flex;
flex-direction: column;
gap: 6px;
}
.hist-subitem {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 13px;
color: var(--text-muted);
}
.hist-subitem .hist-subitem-main {
display: flex;
gap: 8px;
min-width: 0;
}
.hist-subitem .hist-subitem-time {
color: var(--text-muted);
white-space: nowrap;
}
.hist-subitem .hist-subitem-title {
color: var(--text-strong);
font-weight: 600;
word-break: break-word;
}
.hist-subitem .hist-pill {
font-size: 11.5px;
padding: 2px 8px;
}
/* Nhóm phải của mỗi bài: chip thời gian + nhãn điểm. */
.hist-subitem .hist-subitem-right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.hist-subitem-right .ah-time-chip {
font-size: 11.5px;
padding: 2px 8px;
}
/* Chuỗi chi tiết trong thẻ: tách dòng riêng, lùi vào cho gọn. */
.hist-hoctap-children > .ah-time-detail {
margin: -2px 0 2px 0;
padding-left: 2px;
}
.hist-legacy-note {
font-size: 12.5px;
color: var(--text-muted);
font-style: italic;
}
.hist-card {
width: 100%;
box-sizing: border-box;
background: var(--surface-white);
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.06);
padding: 11px 13px;
display: flex;
flex-direction: column;
gap: 7px;
}
/* HÀNG TRÊN: ngày (trái) + nhãn điểm (phải) */
.hist-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.hist-card-date {
color: var(--text-faint);
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
}
/* HÀNG GIỮA: nội dung đầy đủ, không cắt chữ */
.hist-card-content {
color: var(--text-strong);
font-size: 14.5px;
font-weight: 700;
line-height: 1.35;
word-break: break-word;
}
/* HÀNG DƯỚI: số lần / phần thưởng */
.hist-card-foot {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.hist-card-reward {
color: var(--text-muted);
font-size: 13px;
font-weight: 700;
line-height: 1.35;
word-break: break-word;
}
/* Nhãn viên thuốc */
.hist-pill {
display: inline-block;
padding: 4px 10px;
border-radius: var(--radius-pill);
font-weight: 800;
font-size: 12.5px;
white-space: nowrap;
flex: 0 0 auto;
}
.hist-pill-plus {
background: var(--surface-success);
color: var(--text-success);
}
/* cộng/được thưởng = xanh */
.hist-pill-minus {
background: var(--red-tint);
color: var(--red-500);
}
/* trừ/đổi đi = đỏ */
.hist-pill-neutral {
background: var(--surface-subtle);
color: var(--text-muted);
}
/* số lần = xám */
}
/* =========================================================
🔝 HEADER: tiêu đề (trái) + cụm icon Cài đặt/Đăng xuất (phải)
Dời ⚙️ và 🚪 lên góc trên phải, ngang hàng tiêu đề.
========================================================= */
/* Lưới 3 cột: [spacer 1fr] [tiêu đề auto] [cụm icon 1fr].
Hai cột 1fr hai bên bằng nhau → tiêu đề LUÔN căn giữa KHUNG, không bị
cụm icon bên phải đẩy lệch. Cụm icon nằm cột phải, sát mép phải. */
.app-header {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
flex-shrink: 0;
/* Khi .app là flex-column (desktop) thì header không bị co lại. */
}
.app-header h1 {
grid-column: 2;
text-align: center !important;
margin: 6px 0 10px !important;
min-width: 0;
/* Cho phép tiêu đề co lại để không đẩy icon ra ngoài. */
}
/* [TITLE ICON] Icon nhỏ trước tiêu đề "Ươm Mầm Toán". Inline trong h1, cỡ theo em
nên tự co theo font tiêu đề ở mọi breakpoint; vertical-align canh giữa theo dòng. */
.header-title-icon {
height: 1.05em;
width: auto;
vertical-align: -0.18em;
margin-right: 0.32em;
flex-shrink: 0;
}
.app-header-actions {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* Icon SVG (nút Đăng xuất) hiển thị gọn, canh giữa trong nút. */
.header-icon-btn svg {
display: block;
}
/* Nút icon trần ở header: vuông bo góc, vùng chạm ≥ 40px. */
.header-icon-btn {
width: 42px;
height: 42px;
min-width: 42px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
line-height: 1;
border: 1px solid var(--border-card);
border-radius: var(--radius-lg);
background: var(--surface-subtle);
color: var(--text-strong);
cursor: pointer;
transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.header-icon-btn:hover {
background: var(--blue-100);
box-shadow: 0 3px 10px rgba(var(--shadow-rgb), 0.18);
}
.header-icon-btn:active {
transform: scale(0.94);
}
/* Đăng xuất: cảnh báo (đỏ) + tách rời nút Cài đặt để trẻ khó bấm nhầm. */
.header-icon-logout {
margin-left: 14px;
border-color: var(--border-danger);
background: var(--surface-danger);
color: var(--red-500);
}
.header-icon-logout:hover {
background: var(--red-tint);
border-color: var(--border-danger);
box-shadow: 0 3px 10px rgba(217, 54, 45, 0.18);
}
/* --- Mobile: HAI icon LUÔN hiện ở góc phải (không giấu sau ☰ Menu) --- */
@media (max-width: 900px) {
.app-header h1 {
margin: 6px 0 8px !important;
}
.header-icon-btn {
width: 38px;
height: 38px;
min-width: 38px;
font-size: 18px;
border-radius: var(--radius-md);
}
.header-icon-logout {
margin-left: 10px;
}
}
/* Màn rất hẹp (~360px): thu tiêu đề để không đè lên cụm icon. */
@media (max-width: 400px) {
.app-header h1 {
font-size: 19px !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* ==================================================================== */
/* [MẬT KHẨU CÀI ĐẶT LẦN ĐẦU] Gợi ý ở nút ⚙️ + màn ĐẶT mật khẩu. */
/* - Chấm đỏ trên nút bánh răng khi phụ huynh CHƯA đặt mật khẩu cài đặt.*/
/* - Bong bóng nhắc (tự ẩn) treo dưới cụm icon, không vỡ header. */
/* ==================================================================== */
.app-header-actions {
position: relative;
/* mốc neo cho bong bóng gợi ý (#settingsPwHint) */
}
/* Chấm đỏ thông báo trên nút ⚙️ (chỉ khi có class .has-settings-pw-hint). */
.header-icon-btn.has-settings-pw-hint {
position: relative;
}
.header-icon-btn.has-settings-pw-hint::after {
content: "";
position: absolute;
top: 1px;
right: 1px;
width: 11px;
height: 11px;
background: var(--accent-danger);
border: 2px solid var(--surface-white);
border-radius: var(--radius-circle);
box-shadow: 0 0 0 1px rgba(217, 54, 45, 0.35);
animation: settingsPwDotPulse 1.6s ease-in-out infinite;
}
/* [ĐỢT 4] Badge "phiếu chờ duyệt" cho ADMIN trên nút ⚙️ — class RIÊNG, dùng ::before (pw-hint dùng
::after) nên KHÔNG xung đột dù cùng nút. Chỉ admin mới có class này. */
.header-icon-btn.has-payment-badge { position: relative; }
.header-icon-btn.has-payment-badge::before {
content: attr(data-payment-count);
position: absolute;
top: -5px; right: -5px;
min-width: 17px; height: 17px; padding: 0 4px;
background: var(--accent-danger); color: var(--text-inverse);
border: 2px solid var(--surface-white); border-radius: var(--radius-pill);
font-size: 10px; font-weight: 800; line-height: 13px; text-align: center;
box-sizing: border-box; z-index: 3;
}
/* [CHỐT] Chấm đỏ "tin thanh toán mới" cho PHỤ HUYNH trên ⚙️ — class riêng (parent KHÔNG có
has-payment-badge; hai class loại trừ nhau theo vai nên cùng dùng ::before không xung đột). */
.header-icon-btn.has-payment-news { position: relative; }
.header-icon-btn.has-payment-news::before {
content: "";
position: absolute; top: 1px; left: 1px; /* góc TRÁI-trên: tránh đè chấm mật khẩu cài đặt (phải-trên) */
width: 10px; height: 10px;
background: var(--accent-danger); border: 2px solid var(--surface-white); border-radius: var(--radius-circle);
z-index: 3;
}
@keyframes settingsPwDotPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.25); }
}
/* [ICON KHÓA] Huy hiệu khóa nhỏ LỒNG trong nút ⚙️ (#menu-settings) — báo quyền quản trị đang MỞ
(khóa mở, ĐỎ) hay đã ĐÓNG (khóa đóng, xanh "an toàn"). Nền TRONG SUỐT (chỉ nét vẽ), GÓC TRÊN
PHẢI, nằm TRONG icon (không tràn). JS updateSettingsLockIcon() đổ SVG + class .is-unlocked.
CHỈ hiển thị trạng thái — KHÔNG phải nút bấm (pointer-events:none). */
#menu-settings { position: relative; }
.settings-lock-badge {
position: absolute;
top: 1px;
right: 1px;
width: 12px;
height: 12px;
display: block;
color: var(--accent-primary-hover); /* ĐÓNG = xanh "an toàn/bình thường" */
pointer-events: none;
z-index: 4;
filter: drop-shadow(0 0 1.4px var(--surface-white)); /* viền sáng cho rõ trên ⚙️ (nền vẫn trong suốt) */
}
.settings-lock-badge svg { width: 100%; height: 100%; display: block; }
.settings-lock-badge.is-unlocked { color: var(--accent-danger); } /* MỞ = ĐỎ cảnh báo "đang mở, chú ý" */
/* Chưa đặt mật khẩu (đang có chấm nhắc pw-hint cùng góc phải-trên) → ẩn khóa để KHÔNG chồng chấm đỏ. */
.header-icon-btn.has-settings-pw-hint .settings-lock-badge { display: none !important; }
/* Bong bóng nhắc: treo dưới cụm icon góc phải, không đẩy layout header. */
.settings-pw-hint {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 1200;
max-width: 260px;
display: flex;
align-items: flex-start;
gap: 8px;
padding: 9px 10px 9px 12px;
background: var(--blue-800);
color: var(--text-inverse);
border-radius: var(--radius-lg);
box-shadow: 0 8px 22px rgba(var(--shadow-rgb), 0.32);
font-size: 13px;
line-height: 1.4;
text-align: left;
animation: settingsPwHintIn 0.25s ease;
}
/* .settings-pw-hint khai báo SAU .hidden-section nên cần override cụ thể để ẩn đúng. */
.settings-pw-hint.hidden-section {
display: none;
}
/* Mũi nhọn chỉ lên phía nút ⚙️ (⚙️ đứng TRƯỚC nút Đăng xuất; bong bóng neo right:0
= mép phải nút Đăng xuất, nên đẩy mũi nhọn sang trái để trỏ vào tâm ⚙️ ~87px). */
.settings-pw-hint::before {
content: "";
position: absolute;
top: -7px;
right: 80px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid var(--blue-800);
}
@keyframes settingsPwHintIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.settings-pw-hint-text {
flex: 1 1 auto;
}
.settings-pw-hint-close {
flex: 0 0 auto;
margin: -2px -2px 0 0;
padding: 0;
width: 22px;
height: 22px;
line-height: 1;
font-size: 18px;
border: none;
border-radius: var(--radius-circle);
background: rgba(255, 255, 255, 0.18);
color: var(--text-inverse);
cursor: pointer;
}
.settings-pw-hint-close:hover {
background: rgba(255, 255, 255, 0.32);
}
@media (max-width: 480px) {
.settings-pw-hint {
max-width: 78vw;
}
.settings-pw-hint::before {
right: 70px;
}
}
/* Màn ĐẶT mật khẩu cài đặt lần đầu (thay cổng NHẬP với phụ huynh chưa đặt). */
.settings-pw-setup {
max-width: 460px;
margin: 6px auto 14px;
padding: 16px 16px 18px;
background: var(--surface-subtle);
border: 1px solid var(--border-card);
border-radius: 14px;
text-align: center;
box-sizing: border-box;
}
.settings-pw-setup-title {
font-size: 17px;
font-weight: 800;
color: var(--text-strong);
margin-bottom: 6px;
}
.settings-pw-setup-desc {
font-size: 13.5px;
color: var(--text-body-soft);
line-height: 1.5;
margin-bottom: 12px;
}
.settings-pw-setup-fields {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.settings-pw-setup-fields .settings-pw-input {
width: 100%;
box-sizing: border-box;
text-align: center;
letter-spacing: 2px;
}
.settings-pw-setup-save {
margin: 2px 0 0;
padding: 11px 14px;
font-size: 15px;
font-weight: 700;
color: var(--text-inverse);
background: var(--accent-secondary);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
}
.settings-pw-setup-save:hover {
background: var(--accent-secondary-hover);
}
/* ==================================================================== */
/* [DASHBOARD] MÀN TỔNG QUAN CÁC CON — khớp tông app (xanh #1f4e79, */
/* nút #2f75b5, nền pastel, thẻ trắng/kem, viền nhạt #d9eaf7). */
/* ==================================================================== */
.menu-link-dashboard {
background: linear-gradient(135deg, var(--accent-secondary), var(--blue-800));
color: var(--text-inverse);
font-weight: 800;
margin-bottom: 8px;
}
.menu-link-dashboard:hover {
filter: brightness(1.06);
}
.menu-link-dashboard.active-section {
box-shadow: 0 0 0 2px var(--blue-800) inset;
}
/* [ÔN THI] Container + mục "Ôn thi học kỳ" trong menu. Màu cam/vàng để nổi bật mục
theo mùa (giới hạn thời gian), tách biệt với các mục thường. */
.exam-review-menu {
display: flex;
flex-direction: column;
gap: 6px;
}
.exam-review-menu:not(:empty) {
margin: 4px 0;
}
.menu-link-exam-review {
background: linear-gradient(135deg, #f6a623, var(--text-warning));
color: var(--text-inverse);
font-weight: 800;
border: none;
}
.menu-link-exam-review:hover {
filter: brightness(1.06);
}
.menu-link-exam-review.active-section {
box-shadow: 0 0 0 2px #ad3e02 inset;
}