/* ===================================================================== GTL Academy — common.css (shared by every page) Load order in : fonts.css → vendor CSS → common.css → page CSS Design system: kế thừa token mockup đã duyệt (đen · đỏ · vàng · cloud) ===================================================================== */ /* ---------- Tokens ---------- BỐN màu chính: đỏ · vàng · đen · navy. Không có hue thứ năm — mọi nền sáng là sắc độ của đen (smoke), không phải kem, xanh nhạt hay vàng nhạt. Vai trò cố định, không dùng lẫn: Đỏ hành động (nút, viền cảnh báo) và một bề mặt đậm --red-700 Vàng đang chọn · thành tích · nhấn mạnh. Là BỀ MẶT có chữ đen, không phải màu chữ Navy bề mặt tối chính Đen typography, và bề mặt tối nhấn dùng tiết chế Mọi giá trị đã tính contrast trước khi chọn; số ghi ngay cạnh biến. */ :root { /* Brand */ --red: #E54036; /* nền nút. Chữ trắng 4.10:1 — ngoại lệ đã duyệt, chỉ cho nhãn nút đậm */ --red-700: #C42E23; /* BỀ MẶT đỏ: chữ trắng 5.58:1 nên đặt được cả đoạn văn. Cũng là hover của nút đỏ */ --yellow: #F7CA39; /* BỀ MẶT vàng: chữ đen 12.64:1, chữ navy 10.19:1. Không bao giờ làm màu chữ trên nền sáng */ --dark: #090B0C; /* bề mặt tối chính (hero, footer, .bg-navy, nút tối) — khách chốt 15/09: nền tối dùng đen */ --dark-700: #1F2224; /* hover trên nền tối */ --navy: #161F3D; /* màu NHẤN như đỏ và vàng, dùng tiết chế cho thẻ nền đặc; không làm nền section nữa */ --black: #090B0C; /* typography 19.72:1 trên trắng, và bề mặt tối nhấn */ /* Trung tính = sắc độ của đen. Thay --warm (kem) và --pale (xanh nhạt) đã gỡ. */ --white: #FFFFFF; --smoke: #F4F4F5; /* nền section xen kẽ. Chữ đen 17.94:1, --gray 6.89:1 */ --smoke-2: #EDEDEF; /* nền pill, ô ảnh chờ tải. --gray 6.48:1, --gray-soft 4.63:1 */ --gray: #545453; /* body. 7.58:1 trắng, 6.89:1 smoke */ --yellow-soft: #FCEBB4; /* vàng nhạt: nền lấp nửa trái thẻ khoá nổi bật. Chữ đen 14.9:1 */ --gray-soft: #6A6A6A; /* caption. 5.41:1 trắng, 4.92:1 smoke */ /* Chữ trên bề mặt màu: giữ đúng ngưỡng 4.5:1 cho đoạn văn */ --on-navy: rgba(255,255,255,.72); /* 8.7:1 trên navy */ --on-red: rgba(255,255,255,.92); /* 4.92:1 trên --red-700 */ --on-yellow: rgba(9,11,12,.78); /* 7.83:1 trên vàng */ /* Đường kẻ: tách 2 vai trò vì WCAG 1.4.11 chỉ bắt buộc 3:1 với ranh giới điều khiển */ --line: #E2E2E4; /* hairline: chia bảng, gạch mảnh bên trong card */ --line-card: #090B0C; /* viền card: đậm (đen) 1.5px — hai kiểu card duy nhất: nền màu đặc hoặc viền đậm */ --line-ink: #090B0C; --line-strong: #878789; /* ranh giới control: 3.59:1 trắng, 3.26:1 smoke */ --line-navy: rgba(255,255,255,.35); /* ranh giới control trên navy: 3.17:1 */ --line-on-red: rgba(255,255,255,.85); /* ranh giới control trên đỏ: 4.42:1 — .35 chỉ được 1.81 nên không dùng lại --line-navy */ --line-on-yellow:rgba(9,11,12,.55); /* ranh giới control trên vàng: 3.88:1 */ /* Type */ /* Hai họ chữ: Bricolage Grotesque cho heading (grotesque hiện đại, có opsz nên cỡ lớn tự siết chân chữ), Google Sans cho body (đọc dài dễ, dấu tiếng Việt gọn) */ --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --display: 'Be Vietnam Pro', system-ui, -apple-system, Arial, sans-serif; --fs-h1: clamp(2.6rem, 5.2vw, 4.5rem); --fs-h2: clamp(2rem, 3.6vw, 3rem); --fs-h3: clamp(1.2rem, 1.8vw, 1.5rem); --fs-display: clamp(3rem, 6vw, 5.5rem); /* Shape: siết lại, bớt bo tròn để bớt cảm giác template */ --r-sm: 8px; /* ảnh bên trong card */ --r: 12px; /* card, khối */ --r-lg: 12px; --r-pill: 999px; /* Shadow: gần như bỏ hẳn, chỉ giữ một mức cho thẻ form nổi trên navy */ --sh-sm: none; --sh: 0 1px 2px rgba(9, 11, 12, .06); /* chỉ bóng rất nhẹ cho lớp nổi (dropdown) */ --dur: .18s; /* hover: đổi viền / nền trong 150–200ms */ /* Layout */ --maxw: 1500px; /* +25% so với 1200px */ --gutter: clamp(18px, 4vw, 40px); --nav-h: 72px; --section: clamp(52px, 6vw, 80px); /* khách 16/09: 100-120px quá thoáng, rút về ~80px */ --ease: cubic-bezier(.16, 1, .3, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--sans); color: var(--gray); background: var(--white); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.no-scroll { overflow: hidden; } /* [hidden] của UA stylesheet là display:none ở specificity (0,1,0) — bất kỳ component nào của tác giả đặt display (.card, .field, .testi-card...) cũng thắng nó, nên phần tử vẫn hiện. Đó là lý do bộ lọc giáo viên và khoá học set hidden=true mà thẻ vẫn nằm nguyên trên lưới. Đặt !important một lần ở đây thay vì vá từng component: [hidden] phải luôn có nghĩa là ẩn. */ [hidden] { display: none !important; } img, svg, video { max-width: 100%; display: block; } img { height: auto; } /* thuộc tính height= chỉ để giữ chỗ chống CLS; CSS aspect-ratio quyết định kích thước thật */ a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul, ol { list-style: none; } h1, h2, h3, h4 { font-family: var(--display); font-optical-sizing: auto; color: var(--black); line-height: 1.12; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; } h1 { font-size: var(--fs-h1); letter-spacing: -.03em; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; } h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; } p { max-width: 65ch; } :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--yellow); color: var(--black); } /* ---------- Icons (sprite 3 khe màu, sinh bởi tools/build-icons.mjs) ---------- Bộ icon khách là hình vẽ bằng fill chứ không phải stroke, nên không có stroke-width để chỉnh: kích thước hiển thị quyết định độ mảnh của nét. fill: currentColor là lưới an toàn: nếu engine nào không hiểu var() trong presentation attribute thì icon rơi về đơn sắc theo màu chữ, không vô hình. */ .ic { width: 1.35em; height: 1.35em; flex: none; fill: currentColor; stroke: none; } .ic--sm { width: 1.1em; height: 1.1em; } .ic--lg { width: 1.9em; height: 1.9em; } /* Mũi tên nét (arrow.svg khách gửi 15/09): sprite không ghi stroke-width nên chỉnh độ dày ở đây, khớp chữ đậm của nút */ use[href$="#i-arrow-right"] { stroke-width: 1.6; } .ic--xl { width: 40px; height: 40px; } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section); } .section--tight { padding-block: clamp(36px, 4.5vw, 60px); } /* Hai section cùng màu nền liền nhau: section dưới giảm 1/2 padding trên (site.js bindSectionRhythm gắn .is-joined) */ .section.is-joined { padding-top: calc(var(--section) / 2); } .section--tight.is-joined { padding-top: clamp(18px, 2.4vw, 30px); } /* Dải CTA (.section--tight) nhận nền của section liền trước để liền mạch, không kẹp một vệt trắng giữa hai khối xám. Khi đã liền nền thì bớt đệm trên vì section trước đã có đệm dưới. */ .bg-smoke + .section--tight { background: var(--smoke); padding-top: 0; } .bg-smoke + .section--tight .band { background: var(--white); } /* Nền section. Nhịp trang chủ: navy → white → warm → pale → navy → ... */ /* Bề mặt section: trắng · smoke · navy · đen · vàng · đỏ. Không còn kem, xanh nhạt, vàng nhạt. */ .bg-smoke { background: var(--smoke); } .bg-black { background: var(--black); color: var(--on-navy); } .bg-black h1, .bg-black h2, .bg-black h3, .bg-black h4 { color: var(--white); } .bg-yellow { background: var(--yellow); color: var(--on-yellow); } .bg-yellow h1, .bg-yellow h2, .bg-yellow h3, .bg-yellow h4 { color: var(--black); } .bg-red { background: var(--red-700); color: var(--on-red); } .bg-red h1, .bg-red h2, .bg-red h3, .bg-red h4 { color: var(--white); } .bg-navy { background: var(--dark); color: var(--on-navy); } .bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: var(--white); } .lead { font-size: 1.125rem; color: var(--gray); } .bg-navy .lead { color: var(--on-navy); } .section-head { max-width: 62ch; } .section-head h2 { margin-top: 10px; } .section-head .lead { margin-top: 14px; } .section-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: none; flex-wrap: wrap; } /* Tiêu đề section chiếm ~2/3 khung để h2 không ngắt thành 3–4 dòng ngắn. Đứng một mình trong .wrap (không có nút/điều hướng bên phải) thì canh giữa; nằm trong cột .split / .why thì giữ canh trái và giữ 62ch như cũ. */ .wrap > .section-head:not(.section-head--row) { max-width: min(100%, 860px); margin-inline: auto; text-align: center; } /* ~60% khung 1440 */ /* p toàn cục bị giới hạn 65ch và nằm lệch trái trong khối canh giữa → đẩy về giữa. h2 dùng "pretty" thay "balance": balance chia đều hai dòng nên mỗi dòng chỉ còn ~1/2 khung, pretty lấp đầy dòng đầu và chỉ tránh để một chữ mồ côi ở dòng cuối. */ .wrap > .section-head:not(.section-head--row) .lead { max-width: none; margin-inline: auto; text-wrap: balance; } .wrap > .section-head:not(.section-head--row) h2 { text-wrap: pretty; } /* Hàng nút cuối section có tiêu đề canh giữa: canh giữa theo, cho đồng bộ */ .section-cta { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; } .section-head--row > :first-child { flex: 1 1 auto; max-width: 66.667%; } .mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 48px; } .mt-xl { margin-top: 64px; } /* Eyebrow: nhãn viên thuốc viền mảnh, cùng kiểu badge banner (.page-hero__badge / .hero__badge). Không còn vạch màu phía trước — viền đổi theo bề mặt, chữ đen trên nền sáng, trắng trên nền tối. */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 14px; border-radius: var(--r-pill); border: 1px solid rgba(9, 11, 12, .28); font-size: .76rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--black); } .eyebrow::before { content: none; } /* Danh sách bề mặt tối dùng chung cho eyebrow và icon, khai báo một chỗ để khỏi phải vá từng component mỗi khi thêm một khối navy mới. */ .bg-navy .eyebrow, .bg-black .eyebrow, .bg-red .eyebrow, .hero .eyebrow, .honors .eyebrow, .register-section .eyebrow, .feature--dark .eyebrow, .page-hero:not(.page-hero--yellow) .eyebrow, .cta-band .eyebrow, .article-cta .eyebrow { color: var(--white); border-color: var(--line-navy); } .bg-red .eyebrow, .page-hero--red .eyebrow, .cta-band .eyebrow, .register-section .eyebrow { border-color: var(--line-on-red); } .bg-yellow .eyebrow, .page-hero--yellow .eyebrow { color: var(--black); border-color: var(--line-on-yellow); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: var(--r-pill); font-weight: 700; font-size: .98rem; line-height: 1.2; white-space: nowrap; transition: transform .2s var(--ease), background .2s, color .2s, box-shadow .2s, border-color .2s; border: 1.5px solid transparent; } .btn:active { transform: translateY(1px) scale(.985); } .btn--primary { background: var(--red); color: var(--white); } .btn--primary:hover { background: var(--red-700); transform: translateY(-2px); } .btn--dark { background: var(--dark); color: var(--white); } .btn--dark:hover { background: var(--dark-700); transform: translateY(-2px); } /* Nút sáng trên nền navy. Không có nút vàng cỡ lớn: vàng chỉ là micro-accent. */ .btn--light { background: var(--white); color: var(--dark); } .btn--light:hover { background: var(--smoke); transform: translateY(-2px); } /* Viền control phải đạt 3:1 (WCAG 1.4.11) nên dùng --line-strong, không dùng --line */ .btn--ghost { border-color: var(--line-strong); color: var(--black); background: var(--white); } .btn--ghost:hover { border-color: var(--black); background: var(--smoke); } .btn--ghost-light { border-color: var(--line-navy); color: var(--white); } .btn--ghost-light:hover { border-color: var(--white); background: rgba(255, 255, 255, .06); } .btn--sm { padding: 10px 18px; font-size: .9rem; } .btn--lg { padding: 17px 32px; font-size: 1.05rem; } .btn--block { width: 100%; } .btn .ic { transition: transform .2s var(--ease); } .btn:hover .ic--arrow { transform: translateX(3px); } /* Chữ đen cho tương phản, màu brand dồn vào mũi tên */ .link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--black); font-weight: 700; font-size: .95rem; border-bottom: 1.5px solid transparent; /* Nằm trong cha flex-column (ô bento, thẻ) thì bị kéo giãn hết chiều ngang → gạch hover dài quá chữ */ width: fit-content; max-width: 100%; } .link-arrow use[href] { --ic-1: var(--red); --ic-2: var(--red); --ic-3: transparent; } .link-arrow:hover { border-bottom-color: var(--red); } .link-arrow .ic { transition: transform .2s var(--ease); } .link-arrow:hover .ic { transform: translateX(3px); } /* ---------- Pills / badges ---------- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; line-height: 1.3; background: var(--smoke-2); color: var(--black); } .pill--gold { background: var(--yellow); color: var(--black); } .pill--red { background: var(--red); color: var(--white); } .pill--dark { background: rgba(255, 255, 255, .14); color: var(--white); } .pill--outline { background: transparent; border: 1px solid var(--line-strong); color: var(--black); } .bg-navy .pill--outline, .bg-black .pill--outline, .page-hero:not(.page-hero--yellow):not(.page-hero--red) .pill--outline { border-color: var(--line-navy); color: var(--white); } /* Trạng thái tuyển sinh: ngoài palette thì không dùng. Vàng đặc, chữ đen 12.64:1 */ .status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: var(--r-pill); background: var(--yellow); color: var(--black); font-size: .8rem; font-weight: 700; width: fit-content; max-width: 100%; /* trong thẻ flex-column / ô grid không bị kéo giãn hết chiều ngang */ } .status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); } .status--soon { background: var(--dark); color: var(--white); } .status--soon::before { background: var(--yellow); } /* ---------- Shell: overlay ---------- */ .overlay { position: fixed; inset: 0; background: rgba(9, 11, 12, .55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 90; backdrop-filter: blur(2px); } .overlay.is-active { opacity: 1; visibility: visible; } /* ---------- Shell: header (desktop) ---------- */ .header { position: sticky; top: 0; z-index: 100; background: var(--dark); color: var(--white); height: var(--nav-h); transition: box-shadow .3s; } /* Compact: không animate height (layout thrash); chỉ đổ bóng + co logo bằng transform */ .header.is-compact { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); } .header .logo__mark { transition: transform .3s var(--ease); } .header.is-compact .logo__mark { transform: scale(.86); } .header .wrap { height: 100%; display: flex; align-items: center; gap: 20px; } .logo { display: inline-flex; align-items: center; gap: 12px; flex: none; } .logo__mark { width: 42px; height: 42px; border-radius: 10px; overflow: hidden; background: var(--dark); } .logo__mark img { width: 100%; height: 100%; object-fit: cover; } /* Logo header 50px ở màn ≥1400px; màn hẹp hơn thu nhỏ để menu + tìm kiếm + CTA vẫn vừa một hàng */ .logo__img { height: 50px; width: auto; } .header.is-compact .logo__img { transform: scale(.9); transform-origin: left center; transition: transform .3s var(--ease); } .header-mobile .logo__img { height: 40px; } /* .header-mobile ở trước để thắng .burger { display: inline-flex } khai báo phía sau */ .header-mobile .header-mobile__search { display: none; color: var(--white); } @media (min-width: 600px) { .header-mobile .header-mobile__search { display: inline-flex; } } /* Điện thoại hẹp: logo 40px + nút "Đăng ký học thử" + ☰ không vừa 390px nữa → thu nhỏ vừa đủ */ @media (max-width: 420px) { .header-mobile .wrap { padding-inline: 14px; } .header-mobile .logo__img { height: 34px; } .header-mobile__actions { gap: 4px; } .header-mobile__actions .btn { padding: 8px 12px; font-size: .84rem; } .header-mobile .burger { width: 40px; } } .footer .logo__img { height: 64px; } .logo__txt { display: flex; flex-direction: column; line-height: 1.05; } .logo__name { font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; color: var(--white); } .logo__name em { font-style: normal; color: var(--red); } .logo__sub { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy); margin-top: 3px; } .nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav > a, .nav__toggle { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: none; padding: 10px 13px; border-radius: var(--r-pill); font-weight: 600; font-size: .95rem; color: rgba(255, 255, 255, .86); transition: color .2s, background .2s; } .nav > a:hover, .nav__toggle:hover, .nav > a.is-active, .nav__toggle.is-active { color: var(--white); background: rgba(255, 255, 255, .08); } .nav > a.is-active, .nav__toggle.is-active { color: var(--yellow); } /* Không dùng đỏ làm màu chữ ở đây: 4.10:1, dưới ngưỡng 4.5 của chữ thường. Theo đúng mẫu eyebrow toàn site — chữ đen, đỏ nằm ở nền/vạch. */ .nav__drop:not(.nav__drop--mega) a.is-active { color: var(--black); font-weight: 700; background: var(--yellow); } .nav__item { position: relative; } /* Icon dấu + (icon add của pack basic): mở dropdown thì xoay 45° thành dấu × */ .nav__toggle .ic { transition: transform .2s var(--ease); } .nav__item.is-open .nav__toggle .ic, .nav__item:hover .nav__toggle .ic, .nav__item:focus-within .nav__toggle .ic { transform: rotate(45deg); } .nav__drop { position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px; background: var(--white); color: var(--black); border-radius: var(--r); box-shadow: var(--sh); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; } .nav__item.is-open .nav__drop, .nav__item:hover .nav__drop { opacity: 1; visibility: visible; transform: none; } /* :not(--mega) vì dropdown thường xếp nhãn + mô tả theo cột, còn mega tự lo layout của nó — không loại trừ thì rule này (0,1,1) đè mọi .mega__* (0,1,0) và bẻ cả panel thành cột. */ .nav__drop:not(.nav__drop--mega) a { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; font-weight: 600; } .nav__drop a small { font-weight: 400; color: var(--gray-soft); font-size: .82rem; } .nav__drop:not(.nav__drop--mega) a:hover { background: var(--smoke); } /* Cầu nối 10px giữa thanh menu và panel: không có nó, chuột đi xuống là panel đóng giữa chừng. */ .nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* ---------- Mega menu Khoá học ---------- Cây danh mục 3 tầng không nhét vừa dropdown 240px, nên panel rộng bằng .wrap. Mẹo: .nav__item--mega để position:static, panel absolute vì thế neo theo .wrap (phần tử có position gần nhất) chứ không theo mục menu. */ .header .wrap { position: relative; } .nav__item--mega { position: static; } .nav__drop--mega { left: auto; right: 0; width: min(1060px, 100%); padding: 24px 26px 16px; border-top: 3px solid var(--red); } .mega { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 28px; min-height: 290px; } /* Cột trái: 4 nhóm. Nhóm đang chọn nền smoke + vạch đỏ trái; panel bên phải đổi theo */ .mega__tabs { display: flex; flex-direction: column; gap: 4px; padding-right: 20px; border-right: 1px solid var(--line); grid-row: 1 / span 4; } .mega__tab { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--black); transition: background .2s; position: relative; } .mega__tab .ic { width: 30px; height: 30px; flex: none; } .mega__tab b { display: block; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; line-height: 1.2; } .mega__tab small { display: block; font-size: .76rem; color: var(--gray-soft); } .mega__tab:hover, .mega__tab.is-active { background: var(--smoke); } .mega__tab.is-active { box-shadow: inset 3px 0 0 var(--red); } .mega__panel { grid-column: 2; grid-row: 1; display: none; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; align-items: start; } .mega__panel.is-active { display: grid; animation: megaIn .25s var(--ease); } @keyframes megaIn { from { opacity: 0; transform: translateX(6px); } } .mega__tag { margin: 4px 0 14px; font-size: .88rem; line-height: 1.45; color: var(--gray-soft); } .mega__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; } .mega__list > li { padding: 10px 0; border-bottom: 1px solid var(--line); } .mega__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; color: var(--black); transition: color .2s; } .mega__link .ic { opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s var(--ease); } .mega__link:hover { color: var(--red-700); } .mega__link:hover .ic { opacity: 1; transform: none; } .mega__kids { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; } .mega__track-label { display: block; font-weight: 700; font-size: .92rem; color: var(--black); } .mega__kids a { font-size: .84rem; color: var(--gray-soft); } .mega__kids a:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; } .mega__card { position: relative; display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: var(--dark); } .mega__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .mega__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(22, 33, 62, .88)); } .mega__card span { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; align-items: center; gap: 6px; color: var(--white); font-weight: 700; font-size: .92rem; } .mega__card:hover img { transform: scale(1.05); } .mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); } .mega__note { font-size: .84rem; color: var(--gray-soft); } .mega__note a { color: var(--black); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } /* Link "Xem tất cả" luôn trỏ đúng trang đang đứng nên .is-active sẽ tô nền — thừa ở chân panel */ .mega__foot .link-arrow.is-active { background: none; font-weight: 700; } /* Bàn phím: Tab tới "Khoá học" là panel mở, không cần chuột. Chỉ áp cho mega vì hai dropdown kia mở bằng