/* ═══════════════════════════════════════════════════════════════ CÙNG CON 10 PHÚT — lớp áo rời, gỡ 2 dòng trong index.html là hết. Không sửa một dòng nào của CSS gốc hay skin2.css. VÌ SAO MÀN NÀY TỒN TẠI · Trang "chi tiết hạt giống" hiện có bày cả 4 khối T-Q-P cùng lúc, kèm 4 tab tuổi. Đó là trang để ĐỌC. Cha mẹ mệt lúc 9h tối, con ngồi cạnh, thì không ai đọc hết một bức tường chữ. · Màn này lấy ĐÚNG nội dung đó, chia thành 4 bước, mỗi bước một việc, tự lấy tuổi con đã chọn. Không viết mới một chữ nào. LUẬT ĐÃ DUYỆT, ÁP Ở ĐÂY · KHÔNG đo gì thuộc về đứa trẻ. Không điểm, không xếp hạng, không "con đã làm được mấy việc". Lý do đã ghi trong hồ sơ khoá "Nói Gì Con Cũng Cãi": đo thứ phụ thuộc vào con là đặt sẵn một cái thất bại. Ô đếm bên đó chỉ đếm số lần MÌNH hạ giọng trước. · Cửa vào mang tên CON, thứ chữa là CHA MẸ (đau đo được: con cãi 50% · mê điện thoại 37% · chán học 33% · quát con xong hối hận chỉ 10%). · Màn cuối chỉ CÔNG NHẬN, không đẩy sang bài kế. BẪY ĐÃ TRÁNH · Overlay gắn thẳng vào , KHÔNG nằm trong .app — tránh bẫy ".app > * phá nút nổi". · Mọi màu chữ khai báo tường minh, không thừa kế — tránh bẫy chữ chìm khi khối đổi nền. · Không dùng emoji (anh Phúc chê xấu, trình duyệt vẽ thành ô). ═══════════════════════════════════════════════════════════════ */ .cc-lop { position: fixed; inset: 0; z-index: 3000; display: none; flex-direction: column; background: #241C15; color: #F3EFE6; font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif; overscroll-behavior: contain; } .cc-lop.mo { display: flex; } /* ---------- Đầu màn ---------- */ .cc-dau { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px 10px; } .cc-ten { flex: 1; min-width: 0; } .cc-ten b { display: block; font-size: 1.02rem; font-weight: 600; color: #F3EFE6; letter-spacing: .2px; } .cc-ten span { display: block; margin-top: 2px; font-size: .82rem; font-weight: 500; color: #A79A86; } .cc-dong { flex: none; width: 52px; height: 52px; margin-right: -12px; border: 0; background: none; cursor: pointer; color: #A79A86; font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center; } .cc-dong:hover, .cc-dong:focus-visible { color: #F3EFE6; outline: none; } /* ---------- Bốn vạch bước ---------- */ /* Cố ý là VẠCH, không phải phần trăm: đây là một buổi ngồi với con, không phải bài kiểm tra có điểm. */ .cc-vach { flex: none; display: flex; gap: 6px; padding: 0 18px 18px; } .cc-vach i { flex: 1; height: 3px; border-radius: 2px; background: rgba(243, 239, 230, .16); transition: background .35s ease; } .cc-vach i.qua { background: #C49B5A; } /* ---------- Thân ---------- */ .cc-than { flex: 1; min-height: 0; overflow-y: auto; padding: 0 22px 8px; display: flex; flex-direction: column; justify-content: center; } .cc-buoc { max-width: 34rem; margin: 0 auto; width: 100%; } .cc-nhan { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; } .cc-nhan b { font-size: .74rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #C49B5A; } .cc-nhan span { font-size: .78rem; font-weight: 500; color: #8C8172; } /* Câu chính. Cỡ chữ theo luật "học viên ngoài 40": to, thoáng, nét vừa. */ .cc-cau { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.15rem); line-height: 1.44; font-weight: 500; color: #F6F2E9; margin: 0; } .cc-cau.nho { font-size: clamp(1.24rem, 1rem + 1.2vw, 1.6rem); } /* Dòng chỉ việc: nói cho cha mẹ biết phải LÀM GÌ với câu vừa đọc. */ .cc-lam { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(243, 239, 230, .12); font-size: .95rem; line-height: 1.6; font-weight: 400; color: #B9AE9C; } .cc-lam b { color: #E4DCCC; font-weight: 600; } /* ---------- Chân màn ---------- */ .cc-chan { flex: none; padding: 12px 22px calc(20px + env(safe-area-inset-bottom)); } .cc-nut { display: block; width: 100%; min-height: 56px; border: 0; border-radius: 14px; cursor: pointer; background: #C49B5A; color: #241C15; font-family: inherit; font-size: 1.04rem; font-weight: 600; letter-spacing: .2px; transition: transform .12s ease, background .2s ease; } .cc-nut:hover { background: #D2AB6C; } .cc-nut:active { transform: scale(.985); } .cc-nut:focus-visible { outline: 2px solid #F3EFE6; outline-offset: 3px; } .cc-lui { display: block; width: 100%; min-height: 44px; margin-top: 4px; border: 0; background: none; cursor: pointer; color: #8C8172; font-family: inherit; font-size: .88rem; font-weight: 500; } .cc-lui:hover, .cc-lui:focus-visible { color: #C6BBA8; outline: none; } .cc-lui[hidden] { display: none; } /* ---------- Màn kết ---------- */ /* Chỉ công nhận. Không đẩy sang bài kế, không khoe điểm. */ .cc-xong { text-align: center; max-width: 30rem; margin: 0 auto; } .cc-xong .cc-mam { margin: 0 auto 22px; display: block; } .cc-xong h3 { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); font-weight: 500; color: #F6F2E9; margin: 0 0 14px; } .cc-xong p { font-size: .98rem; line-height: 1.66; color: #B9AE9C; margin: 0; } .cc-dem { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(243, 239, 230, .12); font-size: .86rem; color: #8C8172; } .cc-dem b { color: #C49B5A; font-weight: 600; } /* ---------- Lối vào trên màn Hôm Nay ---------- */ /* Đặt trong .duoi-man, tức phải cuộn xuống mới thấy: màn đầu vẫn đúng "một câu mỗi tối" như anh Phúc đã chọn, không thêm một khối gây rối. */ .cc-vao { display: flex; align-items: center; gap: 14px; width: 100%; margin: 4px 0 18px; padding: 16px 18px; border: 1px solid rgba(82, 93, 65, .28); border-radius: 16px; background: linear-gradient(150deg, #FBF9F4, #F3EFE6); cursor: pointer; text-align: left; font-family: inherit; transition: border-color .2s ease, transform .12s ease; } .cc-vao:hover { border-color: rgba(196, 155, 90, .6); } .cc-vao:active { transform: scale(.99); } .cc-vao:focus-visible { outline: 2px solid #525D41; outline-offset: 2px; } .cc-vao-chu { flex: 1; min-width: 0; } .cc-vao-chu b { display: block; font-size: 1.02rem; font-weight: 600; color: #4C3B2E; margin-bottom: 3px; } .cc-vao-chu span { display: block; font-size: .86rem; line-height: 1.5; color: #6E6152; } .cc-vao-mui { flex: none; color: #C49B5A; font-size: 1.2rem; } @media (prefers-reduced-motion: reduce) { .cc-lop *, .cc-vao { transition: none !important; } }