*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; } /* Chi?u cao header l? m?t con s? 4 ch? kh?c ph? thu?c v?o (panel mega, backdrop, drawer, offset cu?n trong nav.js) ? gi? ? ??ng m?t bi?n. */ :root { --tri-header-h: var(--wp--custom--layout--header-h-sm); /* ?nh orbit k?o ?m ??ng b?ng padding ??y section ?? nh?n v?t ??ng s?t m?p band. */ --tri-section-pb: 32px; --tri-section-px: 16px; /* Thanh c? ??nh ??y m?n; 0 t? 1024px v? l?c ?? thanh b? ?n. */ --tri-bottombar-h: 62px; /* Chiều cao thanh quản trị của WordPress. 0 khi khách xem, chỉ khác 0 khi chính mình đang đăng nhập — xem khối .admin-bar ngay dưới. */ --tri-adminbar: 0px; } /* Thanh quản trị WordPress đẩy cả trang xuống, mà header lại dính top: 0 — thành ra khi đăng nhập, header nằm ĐÈ lên thanh quản trị, che mất mấy nút vào wp-admin. Chỉ người đăng nhập mới thấy nên rất dễ bỏ sót lúc kiểm tra. WordPress gắn sẵn class .admin-bar vào , cộng chiều cao vào là xong. Con số 32/46px là của chính WordPress, không phải tự chọn. Dưới 601px thanh đó chuyển sang position: absolute (cuộn đi mất), nên để nguyên 0 — cộng thêm là chừa một khoảng trống vô nghĩa. */ @media screen and (min-width: 601px) { body.admin-bar { --tri-adminbar: 46px; } } @media screen and (min-width: 783px) { body.admin-bar { --tri-adminbar: 32px; } } /* Ch?a ??ng chi?u cao thanh ?? n? kh?ng che ph?n cu?i footer. */ body { padding-bottom: var(--tri-bottombar-h); } @media (min-width: 768px) { :root { --tri-header-h: var(--wp--custom--layout--header-h); --tri-section-pb: 48px; --tri-section-px: 24px; } } /* D?i 1024-1439 tr??c ??y nh?n nguy?n h?ng s? suy t? 1440 ? th?m n?c 1280. */ @media (min-width: 1280px) { :root { --tri-section-pb: 64px; --tri-section-px: 32px; } } html, body, .tri-main { max-width: 100%; } /* Hi?u ?ng reveal tr??t ngang ?36px l?m section th? ra ngo?i m?p tr??c khi v?o viewport. C?t ? .tri-main ch? kh?ng ph?i body: `clip` kh?ng t?o scroll container n?n header sticky (n?m ngo?i .tri-main) v?n ho?t ??ng. */ .tri-main { overflow-x: clip; } body { margin: 0; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--beau-sans); font-size: var(--wp--preset--font-size--medium); line-height: var(--wp--custom--line-height--body); } img { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding-left: 1.1rem; } .tri-wrap { width: min(1100px, calc(100% - 32px)); margin-inline: auto; } .tri-header { position: sticky; top: var(--tri-adminbar); z-index: 50; isolation: isolate; height: var(--tri-header-h); overflow: visible; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .tri-header__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; width: min(1440px, calc(100% - 32px)); margin-inline: auto; } .tri-logo, .tri-header__actions { position: relative; z-index: 2; } .tri-logo { display: block; width: 128px; height: 60px; flex-shrink: 0; } .tri-logo img { width: 100%; height: 100%; object-fit: contain; object-position: left; } .tri-nav { display: none; flex: 1; align-items: center; justify-content: center; gap: 28px; font-family: var(--wp--preset--font-family--beau-sans); font-weight: var(--wp--custom--font--weight-ui); font-size: var(--wp--preset--font-size--medium); text-transform: uppercase; } .tri-nav > a, .tri-mega__trigger { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 40px; padding: 8px 16px; border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--white); transform: scale(1); transform-origin: center center; transition: transform var(--wp--custom--motion--duration-mid) ease, background-color var(--wp--custom--motion--duration-mid) ease, color var(--wp--custom--motion--duration-mid) ease; } .tri-nav > a.is-current, .tri-mega.is-current .tri-mega__trigger { color: var(--wp--preset--color--cyan); } .tri-nav > a:hover, .tri-mega__trigger:hover, .tri-mega.is-open .tri-mega__trigger { background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); transform: scale(1.2); z-index: 1; } .tri-mega { position: static; display: inline-flex; align-items: center; } .tri-mega__panel { visibility: hidden; opacity: 0; pointer-events: none; position: fixed; left: 0; right: 0; top: calc(var(--tri-adminbar) + var(--tri-header-h)); z-index: 45; width: 100%; max-width: none; padding: 32px 16px 40px; transform: translateY(8px); background-image: linear-gradient(208.81deg, var(--wp--preset--color--white) 18.9%, var(--wp--preset--color--ice) 81%); border-radius: 0; box-shadow: 0 16px 40px color-mix(in srgb, var(--wp--preset--color--navy) 18%, transparent); backdrop-filter: blur(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .tri-mega__inner { display: grid; grid-template-columns: repeat(var(--tri-mega-cot, 1), minmax(0, 1fr)); gap: 8px 32px; width: min(1100px, calc(100% - 32px)); margin-inline: auto; } .tri-mega__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* Tiêu đề cột trong mega menu: chữ hoa, đậm, không phải một mục bấm được trừ khi có đích (cột "Lịch khai giảng" trong thiết kế là link). */ .tri-mega__title { margin-bottom: 8px; color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--beau-sans); font-weight: var(--wp--custom--font--weight-strong); font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.02em; } /* ── Thả xuống GỌN: thẻ trắng bo góc, neo dưới đúng mục cha ───────── Bản trước mọi panel đều tràn ngang toàn màn. Thiết kế tháng 09/2026 chỉ để "Khóa học" tràn ngang (4 cột); bốn mục còn lại là thẻ hẹp. */ .tri-mega--gon { position: relative; } .tri-mega--gon .tri-mega__panel { position: absolute; left: 50%; right: auto; top: calc(100% + 14px); width: max-content; min-width: 220px; max-width: min(420px, calc(100vw - 32px)); padding: 16px 8px; transform: translate(-50%, 8px); background: var(--wp--preset--color--white); border-radius: var(--wp--custom--radius--card); box-shadow: 0 18px 40px rgba(9, 31, 91, 0.16); } .tri-mega--gon .tri-mega__inner { width: auto; margin-inline: 0; gap: 2px; /* KHÔNG dùng minmax(0, 1fr) như mega tràn ngang: panel gọn rộng theo nội dung (width: max-content), mà 1fr lại co được về 0 — hai thứ đó quay vòng nhau và kết quả là cột co lại, chữ vỡ thành từng dòng một hai từ. auto thì cột rộng đúng bằng mục dài nhất. */ grid-template-columns: auto; } /* Menu ngang chỉ hiện từ 1024px nên không sợ thiếu chỗ. */ .tri-mega--gon .tri-mega__panel a { white-space: nowrap; } /* Khoảng hở giữa mục cha và thẻ, để rê chuột xuống không bị mất panel. */ .tri-mega--gon .tri-mega__panel::before { top: -14px; height: 14px; } .tri-mega__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; } .tri-mega.is-open .tri-mega__panel, .tri-mega:focus-within .tri-mega__panel { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); } /* Primary filled menu item (interaction pattern) */ .tri-mega__panel a { display: inline-flex; align-items: center; justify-content: flex-start; box-sizing: border-box; width: 100%; min-height: var(--wp--custom--control--height); margin: 0; padding: 0 20px; border-radius: var(--wp--custom--radius--control); color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--beau-sans); font-size: var(--wp--preset--font-size--medium); font-weight: var(--wp--custom--font--weight-ui); line-height: var(--wp--custom--line-height--nav); text-transform: none; transition: background-color var(--wp--custom--motion--duration-mid) ease, color var(--wp--custom--motion--duration-mid) ease, box-shadow var(--wp--custom--motion--duration-mid) ease; } .tri-mega__panel a:hover, .tri-mega__panel a:focus-visible { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); box-shadow: 0 2px 0 color-mix(in srgb, var(--wp--preset--color--navy) 4%, transparent); outline: none; } /* Phải nằm SAU .tri-mega.is-open ở trên: hai luật cùng độ ưu tiên, luật nào viết sau thì thắng. Đặt trước là panel gọn mất phần canh giữa (-50%) và lệch hẳn sang phải. */ .tri-mega--gon.is-open .tri-mega__panel, .tri-mega--gon:focus-within .tri-mega__panel { transform: translate(-50%, 0); } /* Tiêu đề cột KHÔNG mang dáng của một mục bấm được: luật .tri-mega__panel a ở trên biến mọi thẻ a trong panel thành nút cao, nền đổi khi rê chuột. Tiêu đề cột chỉ là nhãn nhóm. */ .tri-mega__col > .tri-mega__title { display: block; width: auto; min-height: 0; padding: 0 20px; border-radius: 0; background: none; } a.tri-mega__title:hover, a.tri-mega__title:focus-visible { background: none; color: var(--wp--preset--color--action); box-shadow: none; text-decoration: underline; } .tri-mega-backdrop { position: fixed; inset: calc(var(--tri-adminbar) + var(--tri-header-h)) 0 0; z-index: 40; background: color-mix(in srgb, var(--wp--preset--color--navy) 28%, transparent); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .tri-mega-backdrop.is-on { opacity: 1; pointer-events: auto; } .tri-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .tri-header .tri-header__cta { display: none; } .tri-burger { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; } .tri-burger span { display: block; height: 2px; width: 24px; margin-inline: auto; background: var(--wp--preset--color--white); } /* Drawer tr??t t? tr?i, ph? to?n chi?u cao m?n (ki?u LangGo). Tr??c ??y d?ng thu?c t?nh `hidden` ? display:none n?n transition kh?ng ch?y; gi? tr?ng th?i n?m ? class `is-open`. */ .tri-drawer { position: fixed; inset: var(--tri-adminbar) auto 0 0; z-index: 56; display: flex; flex-direction: column; width: min(300px, 82vw); overflow-y: auto; padding: 0 0 24px; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); transform: translateX(-100%); visibility: hidden; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s; } .tri-drawer.is-open { transform: translateX(0); visibility: visible; } .tri-drawer-backdrop { position: fixed; inset: var(--tri-adminbar) 0 0 0; z-index: 55; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .tri-drawer-backdrop.is-on { opacity: 1; pointer-events: auto; } .tri-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--tri-header-h); padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .tri-drawer__logo { width: 104px; height: auto; } .tri-drawer__close { width: 36px; height: 36px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); cursor: pointer; } /* D?u X gh?p t? hai g?ch, kh?i th?m asset m?i. */ .tri-drawer__close::before, .tri-drawer__close::after { content: ""; position: absolute; width: 16px; height: 2px; background: var(--wp--preset--color--white); } .tri-drawer__close { position: relative; display: grid; place-items: center; } .tri-drawer__close::before { transform: rotate(45deg); } .tri-drawer__close::after { transform: rotate(-45deg); } .tri-drawer__nav { flex: 1; padding: 12px; } .tri-drawer a { display: flex; align-items: center; min-height: 44px; margin: 2px 0; padding: 0 12px; border-radius: var(--wp--custom--radius--control); line-height: 1.3; transition: background-color 0.2s ease, color 0.2s ease; } .tri-drawer a:hover, .tri-drawer a:focus-visible { background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); outline: none; } .tri-drawer__group summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; border-radius: var(--wp--custom--radius--control); color: var(--wp--preset--color--cyan); font-family: var(--wp--preset--font-family--beau-sans); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font--weight-strong); text-transform: uppercase; cursor: pointer; list-style: none; } .tri-drawer__group summary::-webkit-details-marker { display: none; } .tri-drawer__group summary::after { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url(../images/icon-chevron.svg) center / contain no-repeat; mask: url(../images/icon-chevron.svg) center / contain no-repeat; transform: rotate(90deg); transition: transform var(--wp--custom--motion--duration-mid) ease; } .tri-drawer__group[open] summary::after { transform: rotate(-90deg); } .tri-drawer__group a { padding-left: 24px; font-size: var(--wp--preset--font-size--small); } .tri-drawer__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 24px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); } .tri-drawer a.tri-btn { display: inline-flex; justify-content: center; width: 100%; margin: 0; padding: 0 24px; } .tri-drawer a.tri-btn:hover, .tri-drawer a.tri-btn:focus-visible { background: var(--wp--preset--color--orange-hover); color: var(--wp--preset--color--white); } .tri-drawer__phone { color: var(--wp--preset--color--cyan); font-weight: var(--wp--custom--font--weight-ui); } @media (min-width: 768px) { .tri-drawer { width: 340px; } } @media (prefers-reduced-motion: reduce) { .tri-drawer, .tri-drawer-backdrop { transition: none; } } .tri-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: var(--wp--custom--control--height); min-height: var(--wp--custom--control--height); margin: 0; padding: 0 24px; border: 0; border-radius: var(--wp--custom--radius--pill); font-family: var(--wp--preset--font-family--beau-sans); font-size: var(--wp--preset--font-size--medium); font-weight: var(--wp--custom--font--weight-ui); text-align: center; text-transform: uppercase; vertical-align: middle; cursor: pointer; transition: background-color var(--wp--custom--motion--duration-mid) ease, color var(--wp--custom--motion--duration-mid) ease, box-shadow var(--wp--custom--motion--duration-mid) ease, opacity var(--wp--custom--motion--duration-mid) ease; } .tri-btn--orange { background: var(--wp--preset--color--orange); color: var(--wp--preset--color--white); } .tri-btn--orange:hover, .tri-btn--orange:focus-visible { background: var(--wp--preset--color--orange-hover); color: var(--wp--preset--color--white); } .tri-btn--navy { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .tri-btn--navy:hover, .tri-btn--navy:focus-visible { background: var(--wp--preset--color--navy-hover); color: var(--wp--preset--color--white); } .tri-btn--white { background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); box-shadow: 0 4px 12px color-mix(in srgb, var(--wp--preset--color--navy) 8%, transparent); } .tri-btn--white:hover, .tri-btn--white:focus-visible { background: var(--wp--preset--color--muted); color: var(--wp--preset--color--navy); } /* Primary filled hover for CTA-style anchors (Ant Design primary pattern) */ a.tri-btn:hover, a.tri-btn:focus-visible { outline: none; } .tri-section { padding: var(--tri-section-pb) var(--tri-section-px); } .tri-banner { position: relative; width: 100%; max-height: 600px; margin-inline: auto; overflow: hidden; background-image: linear-gradient(208.81deg, var(--wp--preset--color--white) 18.9%, var(--wp--preset--color--ice) 81%); aspect-ratio: 1440 / 600; } .tri-banner__frame { position: relative; display: block; width: 100%; height: 100%; } /* Các slide chồng khít lên nhau; chỉ slide is-active hiện. Dùng opacity chứ không display:none để chuyển được mượt, và giữ nguyên chiều cao khung. */ .tri-banner__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; /* Slide khuất không được ăn cú bấm của slide đang hiện. */ pointer-events: none; } .tri-banner__slide.is-active { opacity: 1; pointer-events: auto; } .tri-banner__slide a, .tri-banner__frame img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: reduce) { .tri-banner__slide { transition: none; } } .tri-banner__dots { position: absolute; left: 0; right: 0; /* Trên hàng nút CTA (bottom: 32px) một khoảng. */ bottom: 88px; z-index: 2; display: flex; justify-content: center; gap: 8px; } .tri-banner__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 1px 3px rgba(9, 31, 91, 0.35); cursor: pointer; transition: background 0.2s ease, width 0.2s ease; } .tri-banner__dot.is-active { width: 26px; border-radius: 5px; background: var(--wp--preset--color--white); } .tri-banner__dot:focus-visible { outline: 2px solid var(--wp--preset--color--cyan); outline-offset: 2px; } /* Banner của 8 trang trong: giống hệt trang chủ, chỉ khác là KHÔNG có hàng nút CTA bên dưới — nên chấm tròn tụt xuống sát đáy thay vì treo ở 88px để chừa chỗ cho hàng nút đó. */ .tri-banner--trang .tri-banner__dots { bottom: 24px; } .tri-banner .tri-cta-row { position: absolute; left: 0; right: 0; bottom: 32px; z-index: 1; padding: 0 16px; } .tri-band--ice { background-image: linear-gradient(208.81deg, var(--wp--preset--color--white) 18.9%, var(--wp--preset--color--ice) 81%); } .tri-band--surface { background: var(--wp--preset--color--surface); } .tri-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 32px 0 8px; } .tri-cta-row--flush { padding-top: 0; } .tri-commit-grid { display: grid; grid-template-columns: 1fr; gap: 28px 48px; max-width: 1100px; margin: 0 auto; padding: 8px 16px 24px; } .tri-commit { display: flex; align-items: center; gap: 20px; } .tri-commit__icon { display: grid; place-items: center; flex: 0 0 128px; width: 128px; height: 128px; background: var(--wp--preset--color--white); border-radius: var(--wp--custom--radius--field); box-shadow: 0 6px 4px rgba(0, 0, 0, 0.05); } .tri-commit__icon img { display: block; width: auto; max-width: 72px; max-height: 72px; height: auto; } .tri-commit p { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: var(--wp--custom--line-height--body); color: var(--wp--preset--color--navy); } .tri-commit p strong { font-weight: var(--wp--custom--font--weight-strong); } .tri-stats--cards { grid-template-columns: 1fr; align-items: stretch; gap: 24px; max-width: 1100px; } .tri-stats--cards .tri-stat-card { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; /* ch?a ch? cho thanh navy l? xu?ng d??i ??y (nh? .tri-cred) */ margin-bottom: 9px; padding: 20px 16px 16px; /* N?n/vi?n/shadow chuy?n sang ::before ?? ::after kh?ng ?? m?t th? */ background: transparent; border: none; box-shadow: none; text-align: center; isolation: isolate; } /* M?t th? (n?n + vi?n + bo g?c) n?m tr?n thanh navy. */ .tri-stats--cards .tri-stat-card::before { content: ""; position: absolute; inset: 0; z-index: 0; border: 1px solid var(--wp--custom--color--ice-soft); border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--white); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } /* Thanh navy n?m sau m?t th?, ch? l? ph?n ??y ra ngo?i. */ .tri-stats--cards .tri-stat-card::after { content: ""; position: absolute; left: 50%; bottom: -9px; z-index: -1; width: 140px; height: 28px; transform: translateX(-50%); border-radius: 0 0 var(--wp--custom--radius--control) var(--wp--custom--radius--control); background: var(--wp--preset--color--navy); } .tri-stats--cards .tri-stat-card > * { position: relative; z-index: 1; } .tri-stats--cards .tri-stat-card.is-featured::before { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); } .tri-stat-card__box { width: 100%; padding: 16px 14px; border: 1px solid var(--wp--preset--color--ice); border-radius: var(--wp--custom--radius--field); background: var(--wp--custom--color--ice-soft); } .tri-stats--cards .tri-stat-card__box strong { display: block; margin-bottom: 8px; color: var(--wp--preset--color--royal); font-family: var(--wp--preset--font-family--beau-sans); font-size: var(--wp--preset--font-size--x-large); font-weight: var(--wp--custom--font--weight-strong); line-height: 1.15; } .tri-stat-card__box p { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: var(--wp--custom--line-height--body); color: var(--wp--preset--color--navy); } .tri-stat-card__check { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--wp--preset--color--navy); } .tri-stat-card__check::before { content: ""; width: 16px; height: 16px; background: var(--wp--preset--color--white); -webkit-mask: url(../images/icon-check.svg) center / contain no-repeat; mask: url(../images/icon-check.svg) center / contain no-repeat; } .tri-stats--cards .tri-stat-card.is-featured .tri-stat-card__check { background: var(--wp--preset--color--white); } .tri-stats--cards .tri-stat-card.is-featured .tri-stat-card__check::before { background: var(--wp--preset--color--navy); } .tri-stat-card__title { margin: 0; padding: 0 4px; font-family: var(--wp--preset--font-family--beau-sans); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font--weight-ui); line-height: 1.35; color: var(--wp--preset--color--navy); } .tri-stats--cards .tri-stat-card.is-featured .tri-stat-card__title { color: var(--wp--preset--color--white); } .tri-stat-card__photo { display: block; width: 100%; height: auto; aspect-ratio: 286 / 188; object-fit: cover; border-radius: var(--wp--custom--radius--field); margin-top: auto; } .tri-ph--stat { height: 80px; margin-top: 16px; border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--placeholder); } /* ?? "V?n ?? h?c vi?n IELTS th??ng g?p ph?i" ?????????????????????????? ?o 1? t? figma/pages/khoa-hoc.png. Kh?i 901?480, h?nh gi?a 452 ??t ch?nh gi?a s?t m?p tr?n. Th? 306?133 (x 267/863 h?ng tr?n, 340/795 h?ng d??i; y 884 v? 1167). Huy hi?u ? ?? 37px, t?m n?m tr?n c?nh d?c ph?a ngo?i v? th?p h?n m?p tr?n th? 8px. ?u?i bong b?ng r?ng 35, cao 25, m?p trong c?ch c?nh h??ng v?o t?m 72px, ??nh c?ch 78px. */ .tri-issues { --tri-issue-w: 306px; --tri-issue-h: 133px; --tri-issue-x: 37px; --tri-issue-tail-w: 35px; --tri-issue-tail-h: 25px; /* m?p trong c?a ?u?i, t?nh t? c?nh th? h??ng v?o v?ng tr?n */ --tri-issue-tail-in: 72px; display: grid; gap: 28px; justify-items: center; width: min(901px, 100%); margin-inline: auto; } .tri-issues__hub { display: block; width: min(452px, 82vw); height: auto; } .tri-issue { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: var(--tri-issue-w); min-height: var(--tri-issue-h); padding: 16px 25px; border-radius: var(--wp--custom--radius--control); background: var(--wp--preset--color--white); box-shadow: 0 4px 26px rgba(9, 31, 91, 0.1); } .tri-issue h3 { margin: 0 0 10px; color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--beau-sans); font-size: 17px; font-weight: var(--wp--custom--font--weight-ui); line-height: 1.3; } .tri-issue p { margin: 0; color: var(--wp--custom--color--ink-strong); font-size: 15px; line-height: 25px; } /* Huy hi?u d?u ? ? d?ng ?nh assets/images/icon-X-prolem.png (41?42, c? s?n b?ng ??). ? kh? h?p b?m g?c tr?n-tr?i c?a th?. */ .tri-issue__x { position: absolute; left: calc(var(--tri-issue-x) / -2 + 10px); top: calc(var(--tri-issue-x) / -2 + 8px); width: var(--tri-issue-x); height: calc(var(--tri-issue-x) * 42 / 41); background: url(../images/icon-X-prolem.png) center / contain no-repeat; } @media (min-width: 768px) and (max-width: 1023px) { .tri-issues { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .tri-issues__hub { grid-column: 1 / -1; } } @media (min-width: 1024px) { .tri-issues { display: block; position: relative; height: 480px; } .tri-issues__hub { position: absolute; left: 50%; top: 0; width: 452px; margin-left: -226px; } .tri-issue { position: absolute; width: var(--tri-issue-w); height: var(--tri-issue-h); min-height: 0; } .tri-issue--tl, .tri-issue--tr { top: 64px; } .tri-issue--bl, .tri-issue--br { top: 347px; } .tri-issue--tl { left: 0; } .tri-issue--tr { right: 0; } .tri-issue--bl { left: 73px; } .tri-issue--br { right: 68px; } /* Huy hi?u v? ??ng g?c ngo?i: th? b?n tr?i th? t?m n?m tr?n c?nh tr?i, th? b?n ph?i th? tr?n c?nh ph?i. */ .tri-issue--tl .tri-issue__x, .tri-issue--bl .tri-issue__x { left: calc(var(--tri-issue-x) / -2); } .tri-issue--tr .tri-issue__x, .tri-issue--br .tri-issue__x { left: auto; right: calc(var(--tri-issue-x) / -2); } /* ?u?i bong b?ng ? ch? d?ng t? 1024px, kh? h?p th? kh?ng c?n qu?y quanh v?ng tr?n n?n kh?ng c? ?u?i. */ .tri-issue::before { content: ""; position: absolute; width: var(--tri-issue-tail-w); height: var(--tri-issue-tail-h); background: var(--wp--preset--color--white); } .tri-issue--tl::before, .tri-issue--tr::before { top: 100%; } .tri-issue--bl::before, .tri-issue--br::before { bottom: 100%; } /* ??nh ?u?i l?ch v? ph?a v?ng tr?n: c?ch c?nh trong 78px, t?c 6/35 ? 17% t?nh t? m?p trong c?a ch?nh c?i ?u?i. */ .tri-issue--tl::before { right: var(--tri-issue-tail-in); clip-path: polygon(0 0, 100% 0, 83% 100%); } .tri-issue--tr::before { left: var(--tri-issue-tail-in); clip-path: polygon(0 0, 100% 0, 17% 100%); } .tri-issue--bl::before { right: var(--tri-issue-tail-in); clip-path: polygon(0 100%, 100% 100%, 83% 0); } .tri-issue--br::before { left: var(--tri-issue-tail-in); clip-path: polygon(0 100%, 100% 100%, 17% 0); } } .tri-problem-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 900px; margin: 24px auto 0; } .tri-problem { position: relative; padding: 20px 20px 20px 24px; background: var(--wp--preset--color--white); border-radius: var(--wp--custom--radius--field); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } .tri-problem__x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e11; color: #fff; font-size: 16px; line-height: 1; } .tri-problem h3 { margin: 0 0 8px; font-family: var(--wp--preset--font-family--beau-sans); font-size: var(--wp--preset--font-size--medium); font-weight: var(--wp--custom--font--weight-strong); } .tri-problem p { margin: 0; padding-right: 20px; } /* ?? "IELTS & 5 l?i ?ch" ?????????????????????????????????????????????? ?o 1? t? figma/pages/khoa-hoc.png: c?t danh s?ch 357 (x 224..580), ?nh 617 (x 600..1216) ? t?ng ??ng khung 993. M?i d?ng cao 64, c?ch nhau 14, ch? 15/700 line-height 24, th?t tr?i 42 ?? n? huy hi?u. Huy hi?u s? 27?23 bo 6, n?n #0053D1, ??t c?ch m?p tr?i th? 9px v? nh? l?n kh?i m?p tr?n 8px. D?ng ??u ??o n?n navy, ch? tr?ng. */ .tri-benefits { display: grid; gap: 20px; align-items: center; width: min(993px, 100%); margin-inline: auto; } .tri-benefit-list { margin: 0; padding: 8px 0 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .tri-benefit-list li { position: relative; display: flex; align-items: center; min-height: 64px; padding: 12px 20px 12px 42px; background: var(--wp--preset--color--white); color: var(--wp--custom--color--ink-strong); border-radius: var(--wp--custom--radius--field); box-shadow: 0 6px 18px rgba(15, 35, 78, 0.08); font-family: var(--wp--preset--font-family--beau-sans); font-size: 15px; font-weight: var(--wp--custom--font--weight-ui); line-height: 24px; } .tri-benefit-list li.is-active { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); box-shadow: none; } .tri-benefit-list__badge { position: absolute; top: -8px; left: 9px; display: inline-grid; place-items: center; width: 27px; height: 23px; border-radius: 6px; background: var(--wp--preset--color--action); color: var(--wp--preset--color--white); font-size: 13px; font-weight: var(--wp--custom--font--weight-strong); line-height: 1; } .tri-benefit-list__text { display: block; } .tri-benefits__media { position: relative; width: min(618px, 100%); margin-inline: auto; aspect-ratio: 618 / 375; border-radius: 16px; overflow: hidden; background: var(--wp--preset--color--muted); } .tri-benefits__photo { display: block; width: 100%; height: 100%; object-fit: cover; } .tri-benefits__sticker { position: absolute; right: 10px; bottom: 10px; width: min(132px, 28%); height: auto; pointer-events: none; } @media (min-width: 768px) { .tri-benefits { grid-template-columns: minmax(0, 1fr) minmax(0, 618px); gap: 40px; align-items: stretch; } .tri-benefits__media { margin-inline: 0; justify-self: end; } } .tri-problem-banner-section { overflow: visible; padding-top: 56px; } .tri-problem-banner { position: relative; display: grid; gap: 24px; align-items: stretch; min-height: 280px; padding: 28px 24px; overflow: visible; background: var(--wp--preset--color--navy); border-radius: 28px; color: var(--wp--preset--color--white); } .tri-problem-banner__list { display: flex; flex-direction: column; justify-content: center; gap: 14px; align-self: center; min-width: 0; z-index: 1; } .tri-problem-banner__item { display: flex; align-items: center; gap: 10px; margin: 0; overflow: hidden; background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .tri-problem-banner__accent { flex-shrink: 0; align-self: stretch; width: 7px; background: var(--wp--preset--color--royal); border-radius: 12px 0 0 12px; } .tri-problem-banner__q { flex-shrink: 0; display: inline-grid; place-items: center; width: 1.1em; margin: 0; padding: 12px 0; color: var(--wp--preset--color--royal); font-family: var(--wp--preset--font-family--beau-sans); font-weight: var(--wp--custom--font--weight-strong); font-size: 1.35rem; line-height: 1; background: none; } .tri-problem-banner__text { flex: 1; min-width: 0; padding: 14px 16px 14px 0; font-size: var(--wp--preset--font-size--small); line-height: var(--wp--custom--line-height--body); } .tri-problem-banner__text strong { font-weight: var(--wp--custom--font--weight-strong); } .tri-problem-banner__media { position: relative; display: block; align-self: stretch; min-height: 240px; overflow: visible; z-index: 2; } .tri-problem-banner__media img { position: absolute; right: 0; bottom: 0; display: block; width: auto; max-width: none; height: calc(100% + 64px); object-fit: contain; object-position: bottom right; pointer-events: none; } .tri-help-grid { display: grid; grid-template-columns: 1fr; gap: 28px 20px; width: min(1100px, calc(100% - 32px)); margin: 0 auto; } .tri-help-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 20px 28px; text-align: center; border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--white); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08); } .tri-help-card::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: var(--wp--preset--color--white); box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08); } .tri-help-card::after { content: ""; position: absolute; left: 50%; bottom: -8px; z-index: -1; width: 100px; height: 20px; transform: translateX(-50%); border-radius: 0 0 var(--wp--custom--radius--control) var(--wp--custom--radius--control); background: var(--wp--preset--color--navy); } .tri-help-card > * { position: relative; z-index: 1; } .tri-help-card__media { width: 240px; max-width: 100%; height: 160px; border-radius: 12px; background: var(--wp--preset--color--muted); } .tri-help-card h3 { margin: 0; color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--beau-sans); font-size: var(--wp--preset--font-size--medium); font-weight: var(--wp--custom--font--weight-strong); line-height: 1.3; } .tri-help-card p { margin: 0; color: var(--wp--custom--color--ink-strong); font-size: var(--wp--preset--font-size--small); line-height: var(--wp--custom--line-height--body); } .tri-help-card__link { margin-top: auto; color: var(--wp--preset--color--royal); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font--weight-ui); text-decoration: none; } .tri-help-card__link::after { content: " >"; } .tri-help-card__link:hover, .tri-help-card__link:focus-visible { text-decoration: underline; outline: none; } .tri-cards-2 { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1100px; margin: 0 auto; } .tri-faq { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1100px; margin: 0 auto; } .tri-faq__item { position: relative; overflow: hidden; border-radius: 20px; background: var(--wp--preset--color--white); box-shadow: 0 4px 18px rgba(9, 31, 91, 0.08); } .tri-faq__item::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 6px; border-radius: 0 4px 4px 0; background: var(--wp--preset--color--navy); z-index: 1; } .tri-faq__item[open]::before { display: none; } .tri-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 16px 22px; cursor: pointer; list-style: none; color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--beau-sans); font-weight: var(--wp--custom--font--weight-ui); font-size: var(--wp--preset--font-size--small); line-height: 1.35; } .tri-faq__item summary::-webkit-details-marker { display: none; } .tri-faq__q { flex: 1; min-width: 0; } .tri-faq__chev { flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--wp--preset--color--navy); } .tri-faq__chev::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--wp--preset--color--white); border-bottom: 2px solid var(--wp--preset--color--white); transform: rotate(-45deg); margin-left: -2px; } .tri-faq__item[open] summary { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); border-radius: 20px 20px 0 0; } .tri-faq__item[open] .tri-faq__chev { background: var(--wp--preset--color--white); } .tri-faq__item[open] .tri-faq__chev::before { border-color: var(--wp--preset--color--navy); transform: rotate(45deg); margin-left: 0; margin-top: -2px; } .tri-faq__a { margin: 0; padding: 16px 22px 18px; background: var(--wp--preset--color--white); color: var(--wp--custom--color--ink-strong); font-size: var(--wp--preset--font-size--small); line-height: var(--wp--custom--line-height--body); } .tri-faq__a a { color: var(--wp--preset--color--navy); text-decoration: underline; } @media (min-width: 768px) { .tri-commit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 36px 64px; padding-left: 0; padding-right: 0; } .tri-stats--cards { grid-template-columns: repeat(3, 1fr); } .tri-problem-grid { grid-template-columns: repeat(2, 1fr); } .tri-problem-banner { grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr); align-items: stretch; min-height: 320px; padding: 36px 12px 0 36px; gap: 12px; } .tri-problem-banner__list { padding-bottom: 0; align-self: center; padding-block: 8px; } .tri-problem-banner__media { min-height: 0; } .tri-problem-banner__media img { right: 0; height: calc(100% + 80px); max-width: 100%; width: auto; } .tri-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; } .tri-cards-2 { grid-template-columns: repeat(2, 1fr); } .tri-faq { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; max-width: 1100px; } } .tri-h { margin: 0 0 16px; color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--beau-sans); font-size: var(--wp--preset--font-size--x-large); font-weight: var(--wp--custom--font--weight-strong); line-height: var(--wp--custom--line-height--display); text-transform: uppercase; } .tri-h--center { text-align: center; } .tri-sub { margin: 0 auto 24px; max-width: 900px; text-align: center; white-space: pre-line; } .tri-lead { max-width: 280px; font-weight: 700; } .tri-accent { color: var(--wp--preset--color--orange); } .tri-grid-2, .tri-about { display: grid; gap: 32px; } .tri-about__copy strong { font-weight: var(--wp--custom--font--weight-strong); } .tri-intro__grid { display: grid; /* Khi x?p d?c, ch?a ch? cho ph?n ??u nh?n v?t tr?i l?n kh?i panel */ gap: 80px; align-items: center; } .tri-intro__copy { display: grid; gap: 16px; } .tri-intro__copy p { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: var(--wp--custom--line-height--body); text-align: justify; } .tri-intro__copy strong { font-weight: var(--wp--custom--font--weight-strong); } .tri-intro__media { position: relative; margin: 0; padding: 0; /* Figma: panel 366?364 */ aspect-ratio: 366 / 364; } .tri-intro__panel { position: absolute; top: 60%; left: 50%; width: 80%; height: 80%; transform: translate(-50%, -50%); border-radius: var(--wp--custom--radius--field); /* ??m h?n n?n trang (surface) ?? kh?i n?n ??c ???c */ background: var(--wp--preset--color--muted); } .tri-intro__media img { position: absolute; bottom: 0; left: 50%; /* Figma: ng??i cao 1.2? panel, ??y kh?t m?p d??i n?n ph?n ??u tr?i l?n tr?n */ height: 100%; width: auto; max-width: none; /* V?ng trong su?t hai b?n c?a PNG l?ch nhau 4.4%, b? ?? nh?n v?t n?m gi?a panel */ transform: translateX(-54.4%); } .tri-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 280px; } .tri-ph { background: var(--wp--preset--color--placeholder); border-radius: var(--wp--custom--radius--field); overflow: hidden; } /* Ô lơ lửng giờ có ảnh thật bên trong; ảnh phủ kín ô và bo theo ô. */ .tri-mosaic .tri-ph img { display: block; width: 100%; height: 100%; object-fit: cover; } .tri-ph--tall { height: 72%; align-self: start; animation: tri-bob 4s ease-in-out infinite; } .tri-ph--short { height: 58%; align-self: end; animation: tri-bob 4s ease-in-out infinite 1.2s; } @keyframes tri-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .tri-ph--tall, .tri-ph--short { animation: none; } } .tri-ph--card { min-height: 180px; } .tri-ph--photo { min-height: 280px; } .tri-ph--teacher { height: 169px; background: var(--wp--preset--color--white); box-shadow: 0 6px 4px rgba(0, 0, 0, 0.05); } .tri-ph--press { display: none; width: 324px; height: 240px; } .tri-ph--press-lg { display: block; width: min(419px, 100%); height: 250px; margin-inline: auto; } .tri-ph--news { width: 200px; height: 220px; flex-shrink: 0; border-radius: 14px; } .tri-ph--cert { width: 40px; height: 40px; border-radius: 50%; } .tri-featured { display: flex; flex-direction: column; max-width: 993px; margin: 0 auto; overflow: visible; border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--navy); } .tri-featured__list { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: max-content; max-width: 100%; padding: 24px 24px 30px; } .tri-featured__item { /* Overlap ? radius: ?? v?a ??, kh?ng che ch? */ --tri-featured-overlap: 15px; position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; width: 305px; /* Track ? 375px ch? r?ng ~295px ? co l?i v? cho ch? xu?ng d?ng (tr??c ??y white-space:nowrap l?m ch? tr?n ra ngo?i n?t). */ max-width: 100%; min-height: 89px; margin-top: calc(-1 * var(--tri-featured-overlap)); padding: 0 12px; border: 0; border-radius: 15px; background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); /* Figma: box-shadow: 0px -6px 0px 0px #BAD6EB */ box-shadow: 0 -6px 0 0 var(--wp--preset--color--ice); font-family: inherit; /* 16px: uppercase active (Kick-off) v?n 1 d?ng trong 305px */ font-size: var(--wp--preset--font-size--medium); font-weight: var(--wp--custom--font--weight-ui); line-height: 1.2; text-align: center; text-transform: capitalize; cursor: pointer; transition: background-color var(--wp--custom--motion--duration-mid) ease, color var(--wp--custom--motion--duration-mid) ease, box-shadow var(--wp--custom--motion--duration-mid) ease, filter var(--wp--custom--motion--duration-mid) ease; } .tri-featured__item:first-child { margin-top: 0; } /* Cap tr?ng ~? cao button; ice; kh?ng t??ng t?c; b? active ?? */ .tri-featured__item--cap { height: 45px; min-height: 45px; pointer-events: none; cursor: default; color: transparent; user-select: none; white-space: normal; } /* Stack c? ??nh: th? d??i lu?n ?? th? tr?n ? kh?ng boost z khi hover/active */ .tri-featured__item:nth-child(1) { z-index: 1; } .tri-featured__item:nth-child(2) { z-index: 2; } .tri-featured__item:nth-child(3) { z-index: 3; } .tri-featured__item:nth-child(4) { z-index: 4; } .tri-featured__item:nth-child(5) { z-index: 5; } .tri-featured__item:nth-child(6) { z-index: 6; } .tri-featured__item:nth-child(7) { z-index: 7; } .tri-featured__item:nth-child(8) { z-index: 8; } .tri-featured__item:nth-child(9) { z-index: 9; } /* * Hover (inactive): t? action, gi? ice + z-index stack. * Active: action, b? ice (seam do th? d??i); hover = s?ng nh?, kh?ng nh?y z. */ .tri-featured__item:hover:not(.tri-featured__item--cap):not(.is-active) { background: var(--wp--preset--color--action); color: var(--wp--preset--color--white); } .tri-featured__item:focus-visible:not(.tri-featured__item--cap) { outline: 2px solid var(--wp--preset--color--cyan); outline-offset: 2px; } .tri-featured__item.is-active { background: var(--wp--preset--color--action); color: var(--wp--preset--color--white); text-transform: uppercase; box-shadow: none; } .tri-featured__item.is-active:hover { filter: brightness(1.08); } .tri-featured__preview { --tri-featured-tip-y: 50%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 16px; min-height: 360px; margin: 16px 24px 24px; padding: 24px 24px 28px; border-radius: var(--wp--custom--radius--card); background: var(--wp--preset--color--surface); overflow: visible; } /* M?i t? khung tr?ng b?n ph?i, h??ng tr?i ch?m v?o button active */ .tri-featured__preview::before { content: ""; position: absolute; left: 0; top: var(--tri-featured-tip-y); z-index: 3; display: none; width: 0; height: 0; border-style: solid; border-width: 14px 18px 14px 0; border-color: transparent var(--wp--preset--color--surface) transparent transparent; transform: translate(-100%, -50%); pointer-events: none; } .tri-featured__media { display: flex; flex: 1; align-items: flex-end; justify-content: center; width: 100%; min-height: 220px; pointer-events: none; } /* Ba dòng Mục tiêu / Thời lượng / Sĩ số của khoá đang chọn. Lưới hai cột "nhãn : giá trị" để các giá trị thẳng hàng nhau khi đổi khoá. */ .tri-featured__facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; width: 100%; max-width: 320px; margin: 0; padding-top: 4px; border-top: 1px solid var(--wp--custom--color--rule); font-size: 14px; line-height: 1.45; } .tri-featured__fact { display: contents; } /* display:contents thắng [hidden]{display:none} của reset, nên khoá nào bỏ trống một dòng thì dòng đó vẫn hiện ra rỗng. Chặn lại tường minh. */ .tri-featured__fact[hidden] { display: none; } .tri-featured__facts dt { margin: 0; color: var(--wp--custom--color--ink-mid); white-space: nowrap; } .tri-featured__facts dd { margin: 0; font-weight: 600; color: var(--wp--preset--color--navy); } .tri-featured__media picture, .tri-featured__media img { display: block; width: auto; max-width: min(100%, 420px); max-height: 320px; height: auto; object-fit: contain; object-position: center bottom; } .tri-featured__preview .tri-btn { position: relative; z-index: 1; flex-shrink: 0; } .tri-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 1200px; margin: 0 auto; } .tri-gallery--4 { max-width: 1100px; } /* Home: infinite dual-row student marquee */ .tri-section--marquee { overflow-x: hidden; } .tri-marquee { display: flex; flex-direction: column; gap: 16px; width: 100%; margin-top: 8px; } .tri-marquee__row { overflow: hidden; width: 100%; cursor: grab; touch-action: pan-y; user-select: none; } .tri-marquee__row.is-dragging { cursor: grabbing; } .tri-marquee__row--rtl { /* Stagger vs top row (?? card + gap) */ padding-left: 120px; } /* ?? Ticker: d?i tr??t ngang v? t?n, d?ng l?i ? nhi?u ch? ?????????????? ?i?u ki?n: nh?m con ph?i ???c nh?n ??i trong PHP (b?n th? hai aria-hidden) th? translateX(-50%) m?i n?i li?n m?ch. T?c ?? ??t qua --tri-ticker-duration. */ .tri-ticker { --tri-ticker-duration: 70s; overflow: hidden; width: 100%; } .tri-ticker__track { display: flex; width: max-content; will-change: transform; animation: tri-marquee-rtl var(--tri-ticker-duration) linear infinite; } .tri-ticker--ltr .tri-ticker__track { animation-name: tri-marquee-ltr; } .tri-ticker:hover .tri-ticker__track, .tri-ticker:focus-within .tri-ticker__track { animation-play-state: paused; } .tri-ticker__group { display: flex; flex-shrink: 0; } .tri-marquee__track { display: flex; width: max-content; will-change: transform; } .tri-marquee__row--ltr .tri-marquee__track { animation: tri-marquee-ltr 70s linear infinite; } .tri-marquee__row--rtl .tri-marquee__track { animation: tri-marquee-rtl 70s linear infinite; } .tri-marquee__row:hover .tri-marquee__track { animation-play-state: paused; } .tri-marquee__group { display: flex; flex-shrink: 0; gap: 16px; padding-right: 16px; } /* D?i ch?y trang ch? d?ng l?i th? h?c vi?n nh?ng ? d?ng g?n: ?nh n?m g?n trong th? (kh?ng nh? l?n), kh?ng thanh navy, kh?ng n?t. */ .tri-marquee .tri-student-card { box-sizing: border-box; --tri-sc-avatar: 112px; --tri-sc-arc: 124px; --tri-sc-ring: 2px; --tri-sc-badge: 40px; --tri-sc-dot: 10px; flex: 0 0 223px; width: 223px; max-width: none; height: 237px; margin: 0; padding: 10px 10px 12px; display: flex; flex-direction: column; align-items: center; overflow: hidden; border-radius: 15px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); } .tri-marquee .tri-student-card::after { content: none; } .tri-marquee .tri-student-card__visual { position: relative; left: auto; top: auto; margin: 8px 0; } .tri-marquee .tri-student-card__dot { margin: calc(-44px - var(--tri-sc-dot) / 2) 0 0 calc(46px - var(--tri-sc-dot) / 2); } .tri-marquee .tri-student-card__badge { margin: calc(41px - var(--tri-sc-badge) / 2) 0 0 calc(43px - var(--tri-sc-badge) / 2); } .tri-marquee .tri-student-card__badge-score { font-size: 16px; } .tri-marquee .tri-student-card__badge-label { font-size: 9px; } .tri-marquee .tri-student-card__body { width: 100%; padding: 0 4px; } .tri-marquee .tri-student-card__name { margin: 0 0 4px; font-size: var(--wp--preset--font-size--small); line-height: 1.25; } .tri-marquee .tri-student-card__note { margin: 0; font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tri-marquee .tri-student-card__more { display: none; } @keyframes tri-marquee-ltr { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes tri-marquee-rtl { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .tri-marquee__row--ltr .tri-marquee__track, .tri-marquee__row--rtl .tri-marquee__track, .tri-ticker__track { animation: none; transform: none; } /* D?ng r?i th? ph?i cu?n tay ???c, n?u kh?ng n?a sau d?i s? kh?ng t?i ???c. */ .tri-ticker { overflow-x: auto; } } .tri-why { display: grid; gap: 16px; max-width: 1100px; margin: 40px auto 0; } .tri-why--orbit { /* Figma: th? r?ng 378, h?ng 1 & 3 th?t v?o 120 so v?i m?p container. */ --tri-why-inset: clamp(0px, (100vw - 1060px) / 3, 120px); position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; padding: 24px 0; } .tri-why__center { display: flex; justify-content: center; order: -1; } .tri-why__photo { display: block; flex: 0 0 auto; width: min(320px, 76vw); height: auto; } .tri-why__item { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--wp--preset--color--white); border-radius: 24px; box-shadow: 0 6px 16px rgba(16, 24, 40, 0.1); } .tri-why__item p { margin: 0; font-weight: var(--wp--custom--font--weight-ui); color: var(--wp--preset--color--navy); } .tri-why--orbit .tri-why__item p { line-height: var(--wp--custom--line-height--body); color: var(--wp--custom--color--ink); } .tri-why__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--wp--preset--color--action); } .tri-navy-strip--tips { background: var(--wp--preset--color--orange); } .tri-navy-strip--tips .tri-navy-strip__label h2, .tri-navy-strip--tips .tri-navy-strip__label p { color: var(--wp--preset--color--white); } .tri-about__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .tri-about__copy .tri-h { margin-bottom: 0; } .tri-about__copy p { margin: 0; } .tri-pills { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: fit-content; max-width: 100%; margin: 0 auto 24px; } .tri-pills__item { display: flex; flex-direction: column; align-items: center; } /* Thanh ti?n ?? ch? v? khi 5 pill n?m ???c tr?n m?t h?ng ? xem @media 1100. */ .tri-pills__dot { display: none; } .tri-pill { height: 35px; padding: 0 20px; border: 0; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); font-family: var(--wp--preset--font-family--beau-sans); font-size: 16px; font-weight: 700; text-transform: uppercase; cursor: pointer; } .tri-pill.is-active { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .tri-stage { display: none; max-width: 1100px; margin: 0 auto; overflow: hidden; border-radius: var(--wp--custom--radius--card); } .tri-stage.is-active { display: grid; } .tri-stage__dark, .tri-stage__ice { padding: 24px; } .tri-stage__dark { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--surface); } .tri-stage__ice { background: color-mix(in srgb, var(--wp--preset--color--ice) 50%, transparent); } .tri-stage__label { margin: 20px 0 8px; font-family: var(--wp--preset--font-family--beau-sans); font-size: 20px; font-weight: 700; text-transform: uppercase; } .tri-stage__dark ul li::marker, .tri-stage__ice ul li::marker { color: var(--wp--preset--color--orange); } .tri-lclt { display: grid; gap: 16px; align-content: start; height: 100%; } .tri-lclt .tri-card { display: flex; flex-direction: column; } .tri-lclt-block__intro { display: flex; flex-direction: column; gap: 12px; } /* Figma: c?t tr?i ~352px, c?t ph?i ~610px, c?ch nhau 30px, t?ng ~992px. */ .tri-lclt-block { display: grid; gap: 24px; width: min(992px, calc(100% - 32px)); margin-inline: auto; } .tri-lclt-block__title { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 22ch; line-height: 1.15; } /* Figma kh?ng g?ch ch?n t?ng d?ng ti?u ??. */ .tri-lclt-block__line { display: inline-block; text-transform: uppercase; } .tri-lclt-block__line--badge { display: inline-flex; align-items: center; gap: 10px; } .tri-lclt-block__word { display: inline-block; } .tri-lclt-block__badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 12px 3px; border-radius: 999px; background: var(--wp--preset--color--orange); color: var(--wp--preset--color--white); /* Figma: LCLT c?ng c? ch? ?quy?n? tr?n c?ng d?ng heading. */ font-size: 1em; font-weight: inherit; line-height: inherit; text-transform: uppercase; vertical-align: middle; } .tri-lclt-block .tri-lead { max-width: 36ch; margin: 0; font-weight: 400; color: var(--wp--preset--color--navy); } .tri-lclt-block__media { margin: 8px 0 0; width: 353px; max-width: 100%; height: 336px; overflow: hidden; border-radius: 30px; background: var(--wp--preset--color--placeholder); } .tri-lclt-block__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .tri-card, .tri-panel { padding: 16px 20px 20px; background: var(--wp--preset--color--white); border-radius: var(--wp--custom--radius--control); box-shadow: 0 4px 26px rgba(0, 0, 0, 0.08); } .tri-card__bar { height: 6px; margin-bottom: 12px; background: var(--wp--preset--color--navy); } .tri-card__row { display: flex; gap: 12px; } .tri-card h3, .tri-panel h3, .tri-teacher h3 { margin: 0 0 8px; font-family: var(--wp--preset--font-family--beau-sans); font-size: 20px; text-transform: uppercase; } .tri-card--navy { /* Figma: l? trong 32px, ??y r?ng h?n ??nh. */ padding: 0 24px 26px; background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); /* border-radius: var(--wp--custom--radius--card); */ box-shadow: none; } /* Figma ?o ???c: d?i ??nh 6px m?u #0053D1 (token `action`), kh?ng ph?i `sky`. */ .tri-card--navy .tri-card__bar { height: 6px; margin: 0 -24px 18px; border-radius: var(--wp--custom--radius--card) var(--wp--custom--radius--card) 0 0; background: var(--wp--preset--color--action); } .tri-card--navy .tri-card__row { align-items: flex-start; gap: 10px; } .tri-lclt__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--wp--preset--color--action); } .tri-lclt__icon img { display: block; width: 24px; height: 24px; filter: brightness(0) invert(1); } .tri-card--navy h3 { color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--medium); line-height: 1.35; } .tri-card--navy h3::before { content: "--- "; letter-spacing: -0.08em; opacity: 0.9; } .tri-card--navy p { margin: 0; color: var(--wp--preset--color--white); font-size: var(--wp--preset--font-size--small); line-height: 1.5; opacity: 0.95; } .tri-panel--navy { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); } .tri-vision-list { /* T?m c?a d?y ch?m, t?nh t? m?p tr?i