/* luyenthianhvao10.vn — site.css v2 (2026-07-20 · BẢN SẮC RIÊNG "cool-academic") Định danh riêng biệt với bantrudian.vn: bantrudian = kem ấm/ấm cúng (bán trú, chăm sóc); luyenthi = xanh-học-thuật/mát/tập trung (luyện thi, kỷ luật, đo tiến bộ). Nền xanh-xám nhạt · navy sâu · xanh dương học thuật cho liên kết/nhấn · VÀNG BRAND chỉ dùng cho NÚT CTA chính + dấu brand nhỏ (giữ dây liên kết Bee's Home) · shadow ám navy (KHÔNG ám vàng) · bo góc gọn hơn (cảm giác tài liệu/đề thi). Chữ vàng trên nền sáng BẮT BUỘC #8a6a00 (AA). Mobile-first. */ :root{ /* ── VISUAL TOKENS (v2 cool-academic) — sửa màu/shadow/bo góc CHỈ ở đây ── */ /* màu nền phân lớp — họ XANH-XÁM MÁT (khác hẳn kem ấm bantrudian) */ --color-bg-page:#F4F7FC; /* 1. nền trang — xanh-xám rất nhạt */ --color-bg-section:#E7EEF9; /* 2. nền section — xanh nhạt */ --color-surface:#ffffff; /* 3. card/bảng/form (trắng nổi) */ --color-footer:#0E1E3A; /* 5. footer navy rất sâu */ /* màu thương hiệu / học thuật */ --color-primary:#15294C; /* navy học thuật (sâu hơn — heading/chữ chính) */ --color-primary-2:#2B4A8B; /* xanh dương học thuật — link, sub-heading, viền nhấn */ --color-primary-tint:#EAF0FA; /* nền nhạt của primary-2 (chip/box thông tin) */ --color-accent:#FFC020; /* vàng BRAND — CHỈ nút CTA chính + dấu brand nhỏ */ --color-accent-ink:#8a6a00; /* vàng đậm — chữ vàng trên nền sáng (AA) */ --color-text:#182338; --color-muted:#54617A; --color-border:#D3DCEC; --color-focus:#2B4A8B; /* viền focus bàn phím (xanh) */ /* màu phân loại kỹ năng/dạng bài (họ MÁT, chỉ dùng chip nhỏ — nét riêng luyenthi) */ --lt-skill-phonics:#2F6E8F; /* ngữ âm — teal-blue */ --lt-skill-cloze:#3A6EA5; /* đọc & điền từ / cloze — steel-blue */ --lt-skill-grammar:#4A50A8; /* từ vựng/word-form — indigo */ --lt-skill-reading:#2C7F5D; /* đọc hiểu — green-teal */ --lt-skill-writing:#7A4A93; /* viết lại câu — plum (mát) */ /* shadow — ÁM NAVY (khác bantrudian ám vàng) */ --shadow-sm:0 2px 8px rgba(21,41,76,.10); --shadow-md:0 8px 20px rgba(21,41,76,.10); --shadow-hover:0 14px 30px rgba(21,41,76,.18); /* bo góc GỌN hơn bantrudian (8/14/20 → 6/10/14) + chuyển động */ --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --transition-fast:.2s; --transition-normal:.5s; --hover-lift:-3px; /* alias namespace --lt-* + tương thích code cũ */ --lt-navy:var(--color-primary); --lt-blue:var(--color-primary-2); --lt-gold:var(--color-accent); --lt-bg:var(--color-bg-page); --lt-section:var(--color-bg-section); --lt-surface:var(--color-surface); --gold:var(--color-accent); --gold-d:var(--color-accent-ink); --navy:var(--color-primary); --ink:var(--color-text); --warm:var(--color-bg-page); --cream:var(--color-bg-section); --cream-2:#F8FAFE; --line:var(--color-border); --muted:var(--color-muted); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--ink);background:var(--warm);line-height:1.72;font-size:16px} .wrap{max-width:960px;margin:0 auto;padding:0 20px} .wrap-narrow{max-width:760px;margin:0 auto;padding:0 20px} img{max-width:100%;height:auto} h1,h2,h3{font-family:'Fraunces',serif;color:var(--navy);line-height:1.3} h1{font-size:clamp(1.7rem,4.5vw,2.5rem);margin:.2em 0 .5em} h2{font-size:clamp(1.3rem,3.2vw,1.7rem);margin:1.6em 0 .6em} h3{font-size:1.08rem;margin:1.2em 0 .4em} p{margin:.6em 0} a{color:var(--color-primary-2)} /* Liên kết trong bài (học thuật): xanh + gạch chân mảnh, hover đậm lại (nét riêng luyenthi) */ .wrap-narrow p a,.wrap-narrow li a,article p a,article li a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .18s} .wrap-narrow p a:hover,.wrap-narrow li a:hover,article p a:hover,article li a:hover{color:var(--color-primary)} /* Tiêu đề section trong bài: thanh nhấn xanh học thuật bên trái (cấu trúc/đề mục) */ .wrap-narrow>h2{position:relative;padding-left:15px} .wrap-narrow>h2::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;border-radius:2px;background:var(--color-primary-2)} /* Focus bàn phím rõ ràng (WCAG 2.4.7) — dùng token --color-focus */ :focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:4px} .btn:focus-visible,.main-nav a:focus-visible,.btn-zalo-top:focus-visible,.bh-bottom-bar a:focus-visible{outline-offset:3px} section{padding:52px 0} @media(min-width:761px){section{padding:72px 0}} .section-cream{background:var(--cream)} .center{text-align:center} .lead{font-size:1.06rem;color:var(--muted)} /* ── Header ── */ .top-header .wrap{max-width:1200px} .top-header{position:sticky;top:0;z-index:50;background:rgba(244,247,252,.9);-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)} .top-header .bar{display:flex;align-items:center;gap:16px;min-height:64px} .brand{font-family:'Fraunces',serif;font-weight:700;color:var(--navy);text-decoration:none;font-size:1.22rem;line-height:1.15;letter-spacing:.01em;white-space:nowrap} .brand small{display:block;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-weight:500;font-size:.68rem;color:var(--muted);letter-spacing:.02em;margin-top:3px;white-space:normal} @media(max-width:640px){.brand{font-size:1.02rem}.brand small{font-size:.62rem}} .main-nav{margin-left:auto;display:none;gap:2px} .main-nav a{color:var(--navy);text-decoration:none;font-size:.9rem;font-weight:600;padding:9px 13px;border-radius:999px;white-space:nowrap;transition:background .18s,color .18s} .main-nav a:hover{background:var(--cream)} .main-nav a[aria-current="page"]{background:var(--navy);color:#fff} .crumbs{font-size:.82rem;color:var(--muted);padding-top:12px;padding-bottom:2px} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--color-primary-2);text-decoration:underline} .btn-zalo-top{margin-left:auto;background:var(--gold);color:var(--navy);font-weight:700;text-decoration:none;padding:9px 16px;border-radius:999px;font-size:.9rem;white-space:nowrap;box-shadow:0 4px 14px rgba(255,192,32,.35);transition:transform .18s,box-shadow .18s} .btn-zalo-top:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(255,192,32,.45)} @media(min-width:1040px){ .main-nav{display:flex} .btn-zalo-top{margin-left:8px} .menu-toggle{display:none} } /* mobile menu =
thuần, không JS */ .menu-toggle{margin-left:auto} .menu-toggle summary{list-style:none;cursor:pointer;padding:10px;font-size:1.3rem;color:var(--navy);line-height:1;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center} .menu-toggle summary::-webkit-details-marker{display:none} .menu-toggle[open] .m-panel{display:block} .m-panel{position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(21,41,76,.08);padding:8px 0 14px} .m-panel a{display:block;padding:13px 24px;color:var(--navy);text-decoration:none;font-weight:600;min-height:44px} .m-panel a:active{background:var(--cream)} @media(min-width:1040px){.menu-toggle{display:none}} /* ── Callout / summary box (presentation-in-CSS · v2 cool-academic) ── Mặc định = hộp THÔNG TIN (viền xanh học thuật). Thêm .action cho hộp KÊU GỌI HÀNH ĐỘNG (viền vàng brand + nút vàng bên trong) — vàng chỉ là tín hiệu hành động, không phải nền ấm. */ .summary-box{background:var(--color-primary-tint);border-left:4px solid var(--color-primary-2);padding:18px 20px;border-radius:var(--radius-sm);margin:26px 0} .summary-box.action{border-left-color:var(--color-accent)} .summary-box>*:first-child{margin-top:0}.summary-box>*:last-child{margin-bottom:0} /* ── Hero ── */ .hero{background:linear-gradient(180deg,var(--color-primary-tint) 0%,var(--warm) 100%);padding:56px 0 48px} .hero .eyebrow{color:var(--color-primary-2);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase} .hero p.sub{font-size:1.08rem;color:var(--muted);max-width:560px} .hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} /* ── Buttons (tap ≥44px, chữ ≥15px) ── */ .btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.98rem;padding:13px 24px;border-radius:999px;min-height:44px;text-align:center} .btn-gold{background:var(--gold);color:var(--navy)} .btn-line{border:1.8px solid var(--navy);color:var(--navy)} .btn:active{transform:translateY(1px)} @media(hover:hover){.btn-gold:hover{filter:brightness(1.05)}.btn-line:hover{background:var(--navy);color:#fff}} /* ── Cards ── */ .grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}} @media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm)} .section-cream .card{background:#fff} .card .ic{font-size:1.6rem;line-height:1} .card h3{margin:.5em 0 .3em} .card p{margin:0;color:var(--muted);font-size:.95rem} @media(hover:none){.card:active{transform:translateY(-2px) scale(.995);transition:.12s}} /* ── Mã màu theo dạng bài thi (nét riêng luyenthi — bantrudian không có) ── Mỗi thẻ dạng bài mang 1 thanh màu trái riêng theo kỹ năng, giúp phụ huynh/HS nhận diện nhanh. */ .card[data-skill]{border-left:4px solid var(--line)} .card[data-skill="pronunciation"]{border-left-color:var(--lt-skill-phonics)} .card[data-skill="cloze"]{border-left-color:var(--lt-skill-cloze)} .card[data-skill="reading"]{border-left-color:var(--lt-skill-reading)} .card[data-skill="word-form"]{border-left-color:var(--lt-skill-grammar)} .card[data-skill="rewrite"]{border-left-color:var(--lt-skill-writing)} .card[data-skill=""]{border-left-color:var(--color-primary)} /* nhóm chung (không mã màu skill) = navy, không để xám "chưa phân loại" */ /* ── Timeline / lộ trình ── */ .timeline{list-style:none;margin:24px 0 0;padding:0;position:relative} .timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--line)} .timeline li{position:relative;padding:0 0 26px 44px} .timeline li::before{content:"";position:absolute;left:4px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--color-primary-2);border:3px solid #fff;box-shadow:0 0 0 1.5px var(--line)} .timeline .t{font-weight:700;color:var(--color-primary);font-size:.9rem} .timeline h3{margin:.15em 0 .2em;font-family:'Be Vietnam Pro',sans-serif;font-size:1.02rem} .timeline p{margin:0;color:var(--muted);font-size:.94rem} /* ── Pricing ── */ .price-card{background:#fff;border:2px solid var(--gold);border-radius:var(--radius-lg);padding:30px 24px;max-width:460px;margin:24px auto 0;text-align:center;box-shadow:var(--shadow-md)} .price-card .amount{font-family:'Fraunces',serif;font-size:2.1rem;color:var(--navy);font-weight:700} .price-card .amount small{font-size:1rem;color:var(--muted);font-weight:400} .price-note{font-size:.9rem;color:var(--muted);margin-top:8px} .price-points{list-style:none;padding:0;margin:16px 0;text-align:left} .price-points li{padding:7px 0 7px 26px;position:relative;font-size:.95rem} .price-points li::before{content:"✓";position:absolute;left:2px;color:var(--lt-skill-reading);font-weight:700} /* ── FAQ accordion (details thuần) ── */ .faq{margin-top:20px} .faq details{border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;margin-bottom:10px;overflow:hidden} .faq summary{cursor:pointer;padding:15px 44px 15px 18px;font-weight:600;color:var(--navy);list-style:none;position:relative;min-height:44px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--color-primary-2)} .faq details[open] summary::after{content:"–"} .faq .a{padding:0 18px 16px;color:var(--muted);font-size:.95rem} /* ── Blog cards ── */ .post-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;transition:border-color .2s,box-shadow .2s} .post-card h3{margin:0 0 6px;font-family:'Be Vietnam Pro',sans-serif;font-size:1rem;color:var(--navy)} .post-card p{margin:0;color:var(--muted);font-size:.88rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .post-card .tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--color-primary-2);background:var(--color-primary-tint);border-radius:999px;padding:3px 10px;margin-bottom:8px} /* ── CTA banner ── */ .cta-banner{background:var(--cream);border:1.5px solid var(--gold);border-radius:var(--radius-lg);padding:34px 24px;text-align:center} .cta-banner h2{margin-top:0} .cta-banner .hero-ctas{justify-content:center} /* ── Breadcrumb ── */ .crumbs{font-size:.84rem;color:var(--muted);padding:14px 0 0} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--color-primary-2)} /* ── Bảng "phù hợp / chưa cần" ── */ .fit-grid{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:700px){.fit-grid{grid-template-columns:1fr 1fr}} .fit-col{border-radius:var(--radius-lg);padding:22px;border:1px solid var(--line)} .fit-col.yes{background:var(--cream-2)} .fit-col ul{margin:10px 0 0;padding-left:2px;list-style:none} .fit-col li{padding:6px 0 6px 28px;position:relative;font-size:.95rem} .fit-col.yes li::before{content:"✓";position:absolute;left:2px;color:var(--lt-skill-reading);font-weight:700} .fit-col.no li::before{content:"○";position:absolute;left:2px;color:var(--muted)} /* ── Danh sách tiêu đề bài sắp lên ── */ .upcoming{list-style:none;margin:20px 0 0;padding:0;counter-reset:up} .upcoming li{counter-increment:up;position:relative;padding:13px 16px 13px 52px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:10px;font-weight:600;color:var(--navy)} .upcoming li::before{content:counter(up,decimal-leading-zero);position:absolute;left:16px;top:50%;transform:translateY(-50%);font-family:'Fraunces',serif;font-weight:700;color:var(--color-primary-2);font-size:.95rem} .upcoming li small{display:block;font-weight:400;color:var(--muted);font-size:.85rem;margin-top:2px} /* ── Footer ── */ footer.site{background:var(--color-footer);border-top:1px solid var(--line);padding:26px 0 90px;font-size:.92rem;color:#c7cdd9} footer.site strong{color:#fff} footer.site a{color:inherit} @media(min-width:761px){footer.site{padding-bottom:32px}} /* ── Sticky bottom bar Gọi/Zalo (mobile) ── */ .bh-bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(21,41,76,.1)} .bh-bottom-bar a{flex:1;text-align:center;padding:13px 8px;font-weight:700;text-decoration:none;font-size:.95rem;min-height:48px} .bh-bottom-bar .call{color:var(--navy)} .bh-bottom-bar .zalo{background:var(--gold);color:var(--navy)} @media(min-width:761px){.bh-bottom-bar{display:none}} /* ═══════════════════════════════════════════════════════════════════════════ V6.0C — HIỆU ỨNG + COMPONENT (chuyển từ effects.js · single source · cool-academic) RUNTIME_INJECTED_PRESENTATION_CSS = 0 (effects.js nay chỉ còn hành vi) ═══════════════════════════════════════════════════════════════════════════ */ /* ── Reveal khi cuộn (JS thêm .fx-reveal; tắt JS = hiện đầy đủ) ── */ .fx-reveal{opacity:0;transform:translateY(16px);transition:opacity var(--transition-normal) cubic-bezier(.22,1,.36,1),transform var(--transition-normal) cubic-bezier(.22,1,.36,1)} .fx-reveal.fx-on{opacity:1;transform:none} /* ── Icon badge: hình tròn MÁT (nền xanh nhạt, KHÔNG vàng) ── */ .card .ic,.post-card .ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:12px;border-radius:50%;background:var(--color-primary-tint);box-shadow:var(--shadow-sm);font-size:1.5rem;line-height:1} /* ── Transition chung (không transform mặc định → không layout shift) ── */ .card,.post-card,.hub-card,.price-card,.grid>div,.grid>a,.faq details{transition:transform var(--transition-fast) cubic-bezier(.22,1,.36,1),box-shadow var(--transition-fast),border-color var(--transition-fast)} .btn,.btn-gold,.btn-line,.btn-zalo-top{transition:transform var(--transition-fast),box-shadow var(--transition-fast),filter var(--transition-fast)} /* ── Hero: glow xanh navy RẤT NHẠT, TĨNH (bỏ lưới — tránh cảm giác dashboard) ── */ .hero,.cta-banner{position:relative;overflow:hidden} .hero>*,.cta-banner>*{position:relative;z-index:2} .hero::after{content:"";position:absolute;top:-140px;right:-60px;width:460px;height:460px;max-width:66vw;background:radial-gradient(circle at center,rgba(43,74,139,.10),rgba(43,74,139,.03) 45%,transparent 70%);z-index:1;pointer-events:none} /* ── Header đổ bóng khi cuộn ── */ header.top-header{transition:box-shadow var(--transition-fast),background-color var(--transition-fast)} .fx-scrolled{box-shadow:0 6px 22px rgba(21,41,76,.14)} /* ══ HOVER — CHỈ thiết bị chuột (tránh sticky-hover mobile); mọi accent = XANH ══ */ @media(hover:hover) and (pointer:fine){ .post-card:hover,.hub-card:hover,.grid>a:hover,a.card:hover{transform:translateY(var(--hover-lift));box-shadow:var(--shadow-hover);border-color:var(--color-primary-2)} .post-card:hover h3,.hub-card:hover strong{color:var(--color-primary-2);text-decoration:underline;text-underline-offset:2px} /* Thẻ dạng bài (.card): PREMIUM color-hover MÁT (skill toi-uu-trang ⭐MASTER, bản cool): nâng 4px + wash xanh nhạt #EAF0FA + shadow navy sâu + heading navy + icon glow xanh — GIỮ viền-trái màu skill. */ .card:not(a):hover{transform:translateY(-4px);background:var(--color-primary-tint);box-shadow:0 14px 32px rgba(21,41,76,.16)} .card:not(a):hover h3{color:var(--color-primary)} .card:not(a):hover .ic{box-shadow:0 6px 16px color-mix(in srgb,var(--color-primary-2) 40%,transparent)} .faq details:hover{border-color:var(--color-primary-2);box-shadow:var(--shadow-md)} .faq details:hover summary{color:var(--color-primary-2)} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,192,32,.35)} .btn-line:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn-zalo-top:hover{transform:translateY(-1px)} } .faq details[open]{border-color:var(--color-primary-2);box-shadow:var(--shadow-sm)} @media(hover:none){.post-card:active,.hub-card:active,.grid>a:active{border-color:var(--color-primary-2)}.faq details:active{border-color:var(--color-primary-2)}} /* ═══════════════════ COMPONENT / MIGRATION (inline → class) ═══════════════════ */ /* ── Bảng dữ liệu (§3) — thay inline table/th/td ── */ .table-scroll{overflow-x:auto;margin:14px 0} .data-table{width:100%;border-collapse:collapse;margin:8px 0 4px;font-size:15px} .data-table th,.data-table td{border:1px solid var(--color-border);padding:8px 10px;text-align:left;vertical-align:top} .data-table thead tr,.data-table tr.head,.data-table th{background:var(--color-primary-tint)} .data-table th{font-weight:700;color:var(--color-primary)} /* biến thể chỉ gạch dòng (bảng so sánh nhẹ) */ .data-table.rows th,.data-table.rows td{border:0;border-bottom:1px solid var(--color-border)} .data-table.rows thead tr,.data-table.rows tr.head{background:transparent} .data-table.rows th{border-bottom-width:2px} .data-table.wide{min-width:520px} /* ── Official-source notice (I) — thay .exam-source-note inline ── */ .exam-source-note{font-size:.85rem;color:var(--color-muted);margin:18px auto;max-width:760px;padding:11px 15px 11px 40px;position:relative;background:var(--color-primary-tint);border-left:3px solid var(--lt-skill-phonics);border-radius:var(--radius-sm)} .exam-source-note::before{content:"📋";position:absolute;left:14px;top:11px;font-size:.95rem} /* ── Advanced-content notice (H) — thay .note inline (viết-đoạn) ── */ .notice--advanced{margin:16px 0;padding:12px 16px 12px 42px;position:relative;font-size:.92rem;background:var(--color-primary-tint);border-left:4px solid var(--lt-skill-writing);border-radius:var(--radius-sm)} .notice--advanced::before{content:"⬆";position:absolute;left:15px;top:12px;font-weight:700;color:var(--lt-skill-writing)} /* ── Ghi chú nhỏ (caption) + editorial + credit cố vấn ── */ .note{font-size:.9em;color:var(--color-muted);margin-top:8px} .editorial-note{margin-top:24px;font-size:.9rem;color:var(--color-muted)} .credit{margin:24px 0 0;font-size:.86rem;color:var(--color-muted);font-style:italic} /* ── Hub bài viết (C) — thay