/* ============================================================
ielts.css — self-contained stylesheet for tieng-anh-ielts.html
Follows the tieng-anh-thieu-nhi.html convention: ONE dedicated
page stylesheet, no dependency on a sister page's CSS. The shared
base below (formerly linked as thieunien.css) supplies the design
tokens + section patterns — fonts, :root colour variables,
header/footer chrome, .tn-reveal animation, hero/trust/form
patterns. The IELTS-specific layout + overrides follow in the
second half of the file (search "IELTS-SPECIFIC").
============================================================ */
@font-face {
font-family: 'Brauer NeueVN';
src: url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.woff2') format('woff2'),
url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.woff') format('woff'),
url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Brauer NeueVN';
src: url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.woff2') format('woff2'),
url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.woff') format('woff'),
url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Brauer NeueVN';
src: url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.woff2') format('woff2'),
url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.woff') format('woff'),
url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Brauer NeueVN';
src: url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.woff2') format('woff2'),
url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.woff') format('woff'),
url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Brauer NeueVN';
src: url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.woff2') format('woff2'),
url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.woff') format('woff'),
url('/landings/en/tieng-anh-ielts/fonts/BrauerNeueVN-Bold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito';
src: url('/landings/en/tieng-anh-ielts/fonts/Nunito-Regular.woff2') format('woff2'),
url('/landings/en/tieng-anh-ielts/fonts/Nunito-Regular.woff') format('woff'),
url('/landings/en/tieng-anh-ielts/fonts/Nunito-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito';
src: url('/landings/en/tieng-anh-ielts/fonts/Nunito-SemiBold.woff2') format('woff2'),
url('/landings/en/tieng-anh-ielts/fonts/Nunito-SemiBold.woff') format('woff'),
url('/landings/en/tieng-anh-ielts/fonts/Nunito-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nunito';
src: url('/landings/en/tieng-anh-ielts/fonts/Nunito-Bold.woff2') format('woff2'),
url('/landings/en/tieng-anh-ielts/fonts/Nunito-Bold.woff') format('woff'),
url('/landings/en/tieng-anh-ielts/fonts/Nunito-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--ap-primary: #1a5fa6;
--ap-primary-container: #2576b9;
--ap-on-primary-container: #e8f4ff;
--ap-primary-fixed: #a8d8f0;
--ap-primary-fixed-dim: #79c0e4;
--ap-secondary: #fecc00;
--ap-secondary-soft: #ffe380;
--ap-tertiary: #f5443c;
--ap-tertiary-soft: #ffb3d5;
--ap-surface: #f8fafb;
--ap-surface-container-low: #f2f4f5;
--ap-surface-container: #eceeef;
--ap-on-surface: #191c1d;
--ap-on-surface-variant: #414751;
--ap-outline-variant: #cccccc;
--ap-outline: #b0b0b0;
--ap-success: #16a34a;
--display: 'Brauer NeueVN', sans-serif;
--body: 'Nunito', sans-serif;
--shadow-sm: 0 6px 18px rgba(37, 118, 185, 0.07);
--shadow-md: 0 14px 36px rgba(37, 118, 185, 0.09);
--shadow-lg: 0 28px 60px rgba(37, 118, 185, 0.11);
}
/* ── RESET Apollo global CSS overrides ── */
/* overflow-x: clip thay vì hidden để không phá vỡ position: sticky */
html {
overflow-x: hidden;
overflow-x: clip;
scroll-behavior: smooth;
}
body,
body.new-landing-page,
body.cat-page,
body.new-landing-page.cat-page {
background: #fff !important;
background-image: none !important;
background-color: #fff !important;
overflow-x: hidden;
overflow-x: clip;
}
#main-content,
main#main-content {
background: #fff !important;
background-image: none !important;
background-color: #fff !important;
}
.new-landing-page section,
.cat-page section {
background-image: none;
}
body {
font-family: var(--body);
color: var(--ap-on-surface);
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
display: block;
}
.dropdown-menu-apollo2025,
.dropdown-menu-apollo2025-mobile {
display: inline-block;
vertical-align: middle;
margin-left: 6px;
}
.form-error {
display: block;
color: #ef4444;
font-size: 13px;
font-family: var(--body);
margin-top: 4px;
}
@media (max-width: 768px) {
.navRevamap-New2025-mobile {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.hamburger-menu-mobile {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
}
.logo-apollo-new2025-container-mobile {
margin: 0 auto;
}
}
/* Shared tokens */
h1,
h2,
h3,
h4,
h5,
h6 {
color: #2667e0;
}
.tn-eyebrow {
display: block;
font-family: var(--body);
font-size: 18px;
font-weight: 700;
color: #000;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 12px;
}
.tn-eyebrow--light {
color: #fff;
}
.tn-section-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(30px, 3.8vw, 44px);
color: #2667e0;
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.tn-section-title--white {
color: #fff;
}
.tn-section-sub {
font-family: var(--body);
font-size: 18px;
line-height: 1.7;
color: var(--ap-on-surface-variant);
max-width: 640px;
}
.tn-section-sub--white {
color: rgba(255, 255, 255, 0.72);
}
.tn-reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.tn-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.tn-reveal-d1 {
transition-delay: 0.15s;
}
.tn-reveal-d2 {
transition-delay: 0.3s;
}
.tn-reveal-d3 {
transition-delay: 0.45s;
}
/* ── Header overlay state: transparent + white menu khi đè video hero ── */
.header-fixed-navRevamap-New2025 {
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.header-fixed-navRevamap-New2025 .menu-and-actions-new2025-container,
.header-fixed-navRevamap-New2025 .hamburger-menu-mobile,
.header-fixed-navRevamap-New2025 .navRevamap-New2025-mobile .logo-apollo-new2025-container-mobile {
transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.is-at-top .header-fixed-navRevamap-New2025 {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border-bottom: 0 !important;
}
/* Đổi logo sang trắng khi đè video hero */
body.is-at-top .logo-apollo-new2025 img,
body.is-at-top .logo-apollo-new2025-mobile img {
content: url('/landings/en/tieng-anh-ielts/Assets/secondary_new-logo-white.svg');
}
/* Menu vẫn hiển thị, đổi sang màu trắng tương phản, loại bỏ khung */
body.is-at-top .header-fixed-navRevamap-New2025.desktop .menu-top-link-new2025,
body.is-at-top .header-fixed-navRevamap-New2025.desktop .header-action_lang-2025 a,
body.is-at-top .header-fixed-navRevamap-New2025.desktop .login-btn-apollo2025 {
color: #fff !important;
}
body.is-at-top .header-fixed-navRevamap-New2025.desktop .btn-login-apollo2025 {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.is-at-top .header-fixed-navRevamap-New2025.desktop .dropdown-menu-apollo2025 {
filter: brightness(0) invert(1);
}
body.is-at-top .header-fixed-navRevamap-New2025.mobile .hamburger-menu-mobile {
filter: brightness(0) invert(1);
}
/* TẠM XOÁ HERO: header là position:fixed (cao 80px desktop / 60px mobile).
Trước đây hero min-height:100vh tạo khoảng trống cho header. Hero đang ẩn nên
bù padding-top để section đầu không bị header che. Xoá block này khi khôi phục hero. */
#main-content {
padding-top: 80px;
}
@media (max-width: 767px) {
#main-content {
padding-top: 60px;
}
}
/* ====================================================
HERO
==================================================== */
.tn-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
}
.tn-hero-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.tn-hero-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: linear-gradient(108deg,
rgba(0, 24, 54, 0.88) 0%,
rgba(0, 57, 110, 0.72) 45%,
rgba(0, 40, 90, 0.42) 100%);
}
.tn-hero-inner {
position: relative;
z-index: 2;
max-width: 1260px;
margin: 0 auto;
padding: 120px 40px 80px;
width: 100%;
display: grid;
grid-template-columns: 1fr 420px;
gap: 72px;
align-items: center;
}
/* Left — content */
.tn-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(254, 204, 0, 0.15);
border: 1px solid rgba(254, 204, 0, 0.35);
border-radius: 999px;
padding: 6px 18px;
font-family: var(--body);
font-size: 18px;
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--ap-secondary);
margin-bottom: 24px;
}
.tn-hero-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(36px, 5vw, 60px);
color: #fff;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 20px;
}
.tn-hero-title em {
font-style: normal;
color: var(--ap-secondary);
}
.tn-hero-sub {
font-family: var(--body);
font-size: 18px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.80);
margin-bottom: 36px;
max-width: 500px;
}
.tn-hero-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--ap-secondary);
color: #111;
font-family: var(--display);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 17px 34px;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 8px 28px rgba(254, 204, 0, 0.38);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tn-hero-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(254, 204, 0, 0.50);
}
/* ── Hero overlapping form bar ── */
.tn-hero-form-bar {
position: absolute;
bottom: 36px;
left: 0;
right: 0;
z-index: 5;
padding: 0 24px;
}
.tn-form-bar-inner {
max-width: 820px;
margin: 0 auto;
background: transparent;
border: 0;
border-radius: 20px;
padding: 26px 28px 22px;
box-shadow: 0 24px 60px rgba(15, 32, 64, 0.28), 0 4px 12px rgba(15, 32, 64, 0.10);
}
.tn-form-bar-heading {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 8px;
max-width: 1260px;
margin: 0 auto 18px;
}
.tn-form-bar-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(28px, 4vw, 48px);
color: #fecc00;
letter-spacing: -0.01em;
text-align: center;
width: 100%;
}
.tn-form-bar-fields {
display: flex;
gap: 12px;
align-items: stretch;
}
.tn-form-bar-group {
flex: 1;
min-width: 0;
}
.tn-form-bar-group input,
.tn-form-bar-group select {
width: 100%;
height: 56px;
padding: 0 18px;
border-radius: 12px;
border: 1.5px solid rgba(255, 255, 255, 0.30);
background: rgba(255, 255, 255, 0.10);
font-family: var(--body);
font-size: 20px;
color: #fff;
outline: none;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.tn-form-bar-group input::placeholder {
color: rgba(255, 255, 255, 0.70);
}
.tn-form-bar-group select {
appearance: none;
-webkit-appearance: none;
color: rgba(255, 255, 255, 0.70);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
.tn-form-bar-group select option {
color: #1a5fa6;
background: #fff;
}
.tn-form-bar-group input:focus,
.tn-form-bar-group select:focus {
border-color: #fecc00;
background: rgba(255, 255, 255, 0.16);
box-shadow: 0 0 0 4px rgba(254, 204, 0, 0.18);
}
.tn-form-bar-btn {
flex: 0 0 auto;
height: 56px;
padding: 0 28px;
border-radius: 12px;
border: 0;
background: linear-gradient(135deg, #fecc00 0%, #ffd633 100%);
color: #1a5fa6;
font-family: var(--display);
font-weight: 800;
font-size: 20px;
letter-spacing: 0.02em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 10px 26px rgba(254, 204, 0, 0.34);
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
white-space: nowrap;
}
.tn-form-bar-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(254, 204, 0, 0.44);
filter: brightness(1.04);
}
.tn-form-bar-note {
margin: 12px 0 0;
font-family: var(--body);
font-size: 18px;
color: rgba(255, 255, 255, 0.85);
text-align: center;
}
@media (max-width: 900px) {
.tn-hero-form-bar {
bottom: 20px;
padding: 0 16px;
}
.tn-form-bar-inner {
padding: 20px 20px 18px;
}
.tn-form-bar-fields {
flex-wrap: wrap;
}
.tn-form-bar-group {
flex: 1 1 calc(50% - 6px);
min-width: calc(50% - 6px);
}
.tn-form-bar-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 560px) {
.tn-form-bar-group {
flex: 1 1 100%;
min-width: 100%;
}
}
/* Right — lead form */
.tn-form {
background: rgba(255, 255, 255, 0.97);
border-radius: 1.5rem;
padding: 36px 32px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}
.tn-form-title {
font-family: var(--display);
font-weight: 700;
font-size: 21px;
color: var(--ap-on-surface);
margin-bottom: 4px;
}
.tn-form-sub {
font-family: var(--body);
font-size: 18px;
color: var(--ap-on-surface-variant);
margin-bottom: 24px;
}
.tn-form-group {
margin-bottom: 14px;
}
.tn-form-group label {
display: block;
font-family: var(--body);
font-size: 18px;
font-weight: 600;
color: var(--ap-on-surface-variant);
margin-bottom: 6px;
}
.tn-form-group input,
.tn-form-group select {
width: 100%;
height: 48px;
border: 1.5px solid var(--ap-outline-variant);
border-radius: 0.75rem;
padding: 0 14px;
font-family: var(--body);
font-size: 18px;
/* prevent iOS zoom */
color: var(--ap-on-surface);
background: #fff;
outline: none;
-webkit-appearance: none;
appearance: none;
transition: border-color 0.2s;
}
.tn-form-group select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23414751' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 12px;
padding-right: 36px;
}
.tn-form-group input:focus,
.tn-form-group select:focus {
border-color: var(--ap-primary-container);
}
.tn-form-submit {
width: 100%;
height: 52px;
margin-top: 8px;
background: var(--ap-primary);
color: #fff;
border: none;
border-radius: 999px;
cursor: pointer;
font-family: var(--display);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.04em;
transition: background 0.2s, transform 0.2s;
}
.tn-form-submit:hover {
background: var(--ap-primary-container);
transform: translateY(-1px);
}
.tn-form-note {
text-align: center;
font-size: 18px;
color: var(--ap-on-surface-variant);
margin-top: 12px;
}
/* ====================================================
SECTION 1: PHILOSOPHY
==================================================== */
.tn-philosophy {
position: relative;
background: #fff;
}
.tn-philosophy-inner {
max-width: 1260px;
margin: 0 auto;
padding: 0 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 48px;
text-align: center;
}
.tn-philosophy .tn-section-title {
color: #2667e0;
}
.tn-philosophy-sub {
font-family: var(--body);
font-size: 18px;
line-height: 1.7;
color: var(--ap-on-surface-variant);
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.tn-philosophy-img {
display: block;
max-width: 100%;
height: auto;
margin: 24px auto;
border-radius: 16px;
}
/* ── Section 1: 3-frame scroll-driven sequence (max-width 1440) ── */
.tn-sequence-spacer {
position: relative;
height: 300vh;
/* 1 viewport per slide */
}
.tn-sequence-sticky {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px 0;
}
.tn-sequence {
width: 100%;
max-width: 1260px;
margin: 0 auto;
}
.tn-sequence-stage {
position: relative;
width: 100%;
height: clamp(420px, 75vh, 720px);
overflow: hidden;
background: #fff;
}
.tn-sequence-slide {
position: absolute;
inset: 0;
opacity: 1;
transform: translate3d(100%, 0, 0);
pointer-events: none;
will-change: transform;
}
/* Slide đầu hiện sẵn để không flash trước khi JS scrub */
.tn-sequence-slide[data-idx="0"] {
transform: translate3d(0, 0, 0);
}
.tn-sequence-slide.is-active {
pointer-events: auto;
}
.tn-sequence-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Slide 1 — custom frame: text trái + ảnh phải, nền trắng */
.tn-sequence-frame {
display: flex;
align-items: stretch;
background: #fff;
overflow: hidden;
}
.tn-frame-text {
flex: 1 1 50%;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(24px, 5vw, 96px);
position: relative;
z-index: 2;
transform: translateY(var(--plx-text, 0px));
transition: transform 0.1s ease-out;
}
.tn-frame-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(24px, 3.6vw, 48px);
color: #2667e0;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 18px;
}
.tn-frame-title-accent {
display: block;
font-style: italic;
font-size: 1.125em;
}
.tn-frame-desc {
font-family: var(--body);
font-size: clamp(18px, 1.5vw, 20px);
color: var(--ap-on-surface-variant);
line-height: 1.7;
margin: 0;
max-width: 520px;
}
/* Slide 2/3 — single quote-style text (sentence case, display font) */
.tn-frame-quote {
font-family: var(--display);
font-weight: 700;
font-size: clamp(20px, 2.4vw, 32px);
color: var(--ap-primary);
line-height: 1.4;
margin: 0;
max-width: 560px;
}
.tn-frame-quote strong {
color: var(--ap-primary-container);
font-weight: 800;
}
.tn-frame-visual {
flex: 1 1 50%;
position: relative;
z-index: 2;
}
.tn-frame-bg {
position: absolute;
width: 92%;
bottom: 0;
right: calc(-4% + 100px);
z-index: 1;
pointer-events: none;
transform: translateX(var(--plx-bg, 0px));
transition: transform 0.1s ease-out;
}
.tn-frame-kids {
position: absolute;
width: 90%;
bottom: 0;
right: calc(6% + 100px);
z-index: 2;
pointer-events: none;
transform: translateX(var(--plx-kids, 0px));
transition: transform 0.1s ease-out;
}
/* Icon trang trí (slide 2) — đặt absolute trên toàn slide */
.tn-frame-decor {
position: absolute;
width: clamp(44px, 5.5vw, 72px);
height: auto;
pointer-events: none;
z-index: 3;
object-fit: contain;
}
/* Slide 1 icons (strong + rocket) — around the kid */
.tn-decor-strong {
top: 45%;
left: 52%;
transform: translate(-200px, 150px);
}
.tn-decor-rocket {
top: 12%;
right: 7%;
}
/* Slide 2 icons (fly + bulb + trophy) — around the kid */
.tn-decor-fly {
top: 15%;
left: 52%;
transform: translate(-150px, 300px);
}
.tn-decor-bulb {
top: 55%;
right: 6%;
}
.tn-decor-trophy {
top: 12%;
right: 7%;
}
/* Slide 3 icons (mountain + trophy) — around the kid */
.tn-decor-mountain {
top: 45%;
left: 52%;
}
.tn-decor-trophy-s3 {
top: 12%;
right: 7%;
}
/* Slide-specific overrides */
.tn-sequence-slide[data-idx="1"] .tn-frame-text {
transform: translateY(-150px);
}
.tn-sequence-slide[data-idx="1"] .tn-frame-bg {
width: 120%;
}
.tn-sequence-slide[data-idx="1"] .tn-frame-kids {
width: 66%;
transform: translateX(calc(-100px + var(--plx-kids, 0px)));
}
.tn-sequence-slide[data-idx="2"] .tn-frame-kids {
width: 74%;
}
.tn-sequence-slide[data-idx="2"] .tn-frame-text {
transform: translateY(calc(100px + var(--plx-text, 0px)));
}
@media (max-width: 768px) {
/* S1 mobile: xếp dọc — text trên, visual (bé + bg) dưới */
.tn-sequence-frame {
flex-direction: column;
}
.tn-frame-text {
flex: 0 0 auto;
width: 100%;
padding: 28px 20px 12px;
}
.tn-frame-visual {
flex: 1 1 auto;
width: 100%;
min-height: 260px;
position: relative;
}
/* Slide-level overrides desktop translateY (text bay ra ngoài khi xếp dọc) */
.tn-sequence-slide[data-idx="1"] .tn-frame-text {
transform: none;
}
.tn-sequence-slide[data-idx="2"] .tn-frame-text {
transform: none;
}
/* Bg + kids canh giữa-dưới (thay vì right-anchored như desktop) */
.tn-frame-bg {
width: 96%;
right: 2%;
bottom: 0;
}
.tn-frame-kids {
width: 68%;
right: 16%;
bottom: 0;
}
/* Slide 2: bg lớn hơn, kids nhỏ + bỏ translateX(-100px) của desktop */
.tn-sequence-slide[data-idx="1"] .tn-frame-bg {
width: 120%;
right: -10%;
}
.tn-sequence-slide[data-idx="1"] .tn-frame-kids {
width: 50%;
right: 25%;
transform: none;
}
/* Slide 3: kids vừa phải */
.tn-sequence-slide[data-idx="2"] .tn-frame-kids {
width: 58%;
right: 21%;
}
/* Decor icons (slide 2) — reposition cho layout dọc */
.tn-frame-decor {
width: clamp(36px, 9vw, 52px);
}
.tn-decor-strong {
top: 38%;
left: 2%;
}
.tn-decor-rocket {
top: calc(6% + 100px);
right: 4%;
}
.tn-decor-fly {
top: calc(6% + 100px);
left: 2%;
}
.tn-decor-bulb {
top: 38%;
right: 2%;
}
.tn-decor-trophy {
top: calc(6% + 100px);
right: 4%;
}
.tn-decor-mountain {
top: 38%;
left: 2%;
}
.tn-decor-trophy-s3 {
top: calc(6% + 100px);
right: 4%;
}
}
@media (max-width: 768px) {
.tn-sequence-stage {
border-radius: 14px;
/* Shrink stage để giảm khoảng trống giữa text và visual.
Desktop 75vh quá cao trên mobile khi text + image cộng lại
chỉ ~520-560px → tạo gap lớn ở giữa. */
height: clamp(420px, 58vh, 560px);
}
/* Không cho visual stretch tối đa — chỉ vừa đủ cho ảnh */
.tn-frame-visual {
min-height: 220px;
}
/* Giảm padding bottom của text block để ảnh sát text hơn */
.tn-frame-text {
padding: 24px 20px 4px;
}
}
/* ============================================================
SECTION 1.5: LỘ TRÌNH MAY ĐO
Sticky scroll, step-by-step reveal:
============================================================ */
.tn-roadmap-bespoke {
position: relative;
color: #fff;
}
.tn-rb-spacer {
position: relative;
height: 220vh;
}
.tn-rb-sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
}
.tn-rb-bg {
position: absolute;
inset: 0;
background: #0b1428 url('/landings/en/tieng-anh-ielts/Assets/secondary_bg_section3.webp') center center / cover no-repeat;
z-index: 0;
}
/* Overlay slide-up on scroll (scrubbed by JS via inline transform) */
.tn-rb-overlay {
position: absolute;
inset: 0;
background: rgba(11, 20, 40, 0.65);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 1;
pointer-events: none;
transform: translateY(100%);
will-change: transform;
}
.tn-rb-inner {
position: relative;
z-index: 2;
height: 100%;
max-width: 1260px;
margin: 0 auto;
padding: 64px 32px;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
row-gap: 24px;
}
.tn-rb-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(28px, 4vw, 46px);
color: #fff;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 80px 0 0 0;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.tn-rb-title.is-visible {
opacity: 1;
transform: none;
}
.tn-rb-title-accent {
color: var(--ap-secondary);
}
.tn-rb-stairs {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 48px;
align-items: end;
align-self: end;
/* push to bottom of grid 1fr row */
padding-bottom: 80px;
/* room above footnote for card 1 down-offset */
}
/* Card = block with fading vertical line going up from number badge */
.tn-rb-card {
padding: 0 0 0 24px;
opacity: 0;
transition: opacity 0.7s ease, transform 0.7s ease;
position: relative;
}
/* Hidden Y per card: each starts 80px below its final staircase position */
.tn-rb-card[data-step="1"] {
transform: translateY(160px);
}
.tn-rb-card[data-step="2"] {
transform: translateY(80px);
}
.tn-rb-card[data-step="3"] {
transform: translateY(-50px);
}
/* Visible: staircase (card 1 lowest, card 3 highest) */
.tn-rb-card.is-visible {
opacity: 1;
}
.tn-rb-card[data-step="1"].is-visible {
transform: translateY(80px);
}
.tn-rb-card[data-step="2"].is-visible {
transform: translateY(0px);
}
.tn-rb-card[data-step="3"].is-visible {
transform: translateY(-130px);
}
.tn-rb-num {
position: relative;
width: 44px;
height: 44px;
background: #3475cf;
color: #fff;
font-family: var(--display);
font-weight: 600;
font-size: 22px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.tn-rb-num::before {
content: '';
position: absolute;
left: -24px;
width: 1px;
height: 480px;
background: linear-gradient(to top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
}
/* Canh đáy line bằng nhau, bằng với chân của Step 1 */
.tn-rb-card[data-step="1"] .tn-rb-num::before {
bottom: -140px;
}
.tn-rb-card[data-step="2"] .tn-rb-num::before {
bottom: -220px;
}
.tn-rb-card[data-step="3"] .tn-rb-num::before {
bottom: -350px;
}
.tn-rb-card-title {
font-family: var(--display);
font-weight: 700;
font-size: 26px;
color: #fff;
margin: 0 0 10px;
line-height: 1.25;
}
.tn-rb-card-desc {
font-family: var(--body);
font-size: 18px;
color: rgba(255, 255, 255, 0.95);
line-height: 1.55;
margin: 0;
max-width: 95%;
}
.tn-rb-footnote {
align-self: flex-end;
text-align: right;
font-family: var(--display);
color: var(--ap-secondary);
font-size: clamp(18px, 2vw, 24px);
font-weight: 800;
line-height: 1.35;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.tn-rb-footnote.is-visible {
opacity: 1;
transform: none;
}
.tn-rb-footnote p {
margin: 4px 0;
}
@media (max-width: 768px) {
/* Mobile: tắt sticky, section grow theo content để bg/overlay phủ luôn footnote */
.tn-rb-spacer {
height: auto;
}
.tn-rb-sticky {
position: static;
height: auto;
min-height: 100vh;
overflow: visible;
}
.tn-rb-inner {
height: auto;
padding: 60px 20px;
}
.tn-rb-stairs {
grid-template-columns: 1fr;
gap: 14px;
align-items: stretch;
padding-bottom: 40px;
}
/* Bỏ scroll-scrub trên mobile: tất cả content luôn hiện, overlay phủ kín */
.tn-rb-title,
.tn-rb-card,
.tn-rb-card[data-step="1"],
.tn-rb-card[data-step="2"],
.tn-rb-card[data-step="3"],
.tn-rb-footnote {
opacity: 1 !important;
transform: none !important;
}
.tn-rb-overlay {
transform: translateY(0) !important;
}
.tn-rb-footnote {
text-align: right;
align-self: flex-end;
margin-top: 16px;
}
}
.tn-points {
list-style: none;
display: flex;
flex-direction: column;
gap: 18px;
}
.tn-points li {
display: flex;
gap: 14px;
align-items: flex-start;
}
.tn-points .pt-icon {
width: 38px;
height: 38px;
border-radius: 0.625rem;
background: rgba(37, 118, 185, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--ap-primary-container);
font-size: 18px;
flex-shrink: 0;
}
.tn-points .pt-text {
font-family: var(--body);
font-size: 18px;
line-height: 1.65;
color: var(--ap-on-surface-variant);
padding-top: 7px;
}
/* Quote card */
.tn-quote-card {
background: var(--ap-primary);
border-radius: 1.5rem;
padding: 48px 40px;
color: #fff;
position: relative;
overflow: hidden;
}
/* .tn-quote-card::before removed because it is no longer a quote */
.tn-quote-card blockquote {
font-family: var(--display);
font-weight: 600;
font-size: clamp(19px, 2vw, 25px);
line-height: 1.5;
color: #fff;
position: relative;
z-index: 1;
margin-bottom: 24px;
}
.tn-quote-card blockquote em {
font-style: normal;
color: var(--ap-secondary);
}
.tn-quote-card cite {
font-size: 18px;
color: rgba(255, 255, 255, 0.60);
font-style: normal;
}
.tn-quote-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.tn-quote-stat-num {
font-family: var(--display);
font-weight: 700;
font-size: 32px;
color: var(--ap-secondary);
letter-spacing: -0.02em;
line-height: 1;
}
.tn-quote-stat-label {
font-size: 18px;
color: rgba(255, 255, 255, 0.65);
margin-top: 4px;
}
/* ====================================================
SECTION 4: TRUST & PROOF (Sticky Sequence)
==================================================== */
.tn-trust {
position: relative;
}
.tn-trust-spacer {
height: 480vh;
position: relative;
}
.tn-trust-sticky {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
/* top padding clears Apollo's fixed header (~80px) so eyebrow not hidden behind it */
padding: 110px 0 30px;
background: var(--ap-surface);
overflow: hidden;
}
.tn-trust-inner {
width: 100%;
max-width: 1260px;
margin: 0 auto;
padding: 0 40px;
}
.tn-trust-head {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: end;
margin-bottom: 24px;
background: var(--ap-surface);
}
.tn-trust-head-left .tn-section-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(28px, 4vw, 42px);
line-height: 1.2;
color: #2576b9;
margin: 0;
text-transform: none;
}
.tn-trust-head-right {
font-family: var(--body);
font-size: 18px;
line-height: 1.6;
color: var(--ap-on-surface-variant);
margin-bottom: 10px;
}
@media (max-width: 900px) {
.tn-trust-head {
grid-template-columns: 1fr;
gap: 24px;
align-items: start;
margin-bottom: 30px;
}
}
.tn-trust-gallery {
position: relative;
z-index: 1;
width: 100%;
max-width: 1260px;
aspect-ratio: 22 / 9;
max-height: calc(100vh - 320px);
display: flex;
align-items: center;
justify-content: center;
margin: 60px auto 0;
}
.tn-trust-card {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 16px;
overflow: hidden;
opacity: 0;
transform: translateY(40px) scale(0.95);
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.tn-trust-card.is-active {
opacity: 1;
transform: translateY(0) scale(1) rotate(0deg);
}
.tn-trust-card.is-passed {
opacity: 1;
transform: translateY(calc(var(--stack-depth, 1) * -30px)) scale(calc(1 - var(--stack-depth, 1) * 0.05)) rotate(var(--stack-rot, 2deg));
}
.tn-trust-card-content {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: clamp(20px, 3vw, 40px) clamp(28px, 5vw, 72px);
box-sizing: border-box;
}
.tn-trust-card-num {
font-family: 'Baskerville', Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(56px, 6.5vw, 100px);
line-height: 1;
color: #1f2937;
letter-spacing: 0.02em;
margin: 0 0 clamp(20px, 3vw, 44px);
}
.tn-trust-card-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(20px, 2.4vw, 34px);
line-height: 1.25;
color: #111827;
margin: 0 0 clamp(10px, 1.4vw, 18px);
text-align: left;
width: 100%;
}
.tn-trust-card-desc {
font-family: var(--body);
font-size: clamp(18px, 1.4vw, 20px);
line-height: 1.55;
color: #1f2937;
margin: 0;
}
/* Mobile: tắt sticky + hiệu ứng lật, hiển thị tất cả card xếp dọc tự nhiên */
@media (max-width: 768px) {
/* Mobile flow:
1. User enters the Trust section and sees the head (eyebrow +
headline + subtitle) above card 1 — both in normal scroll.
2. As they keep scrolling, the head slides up out of view and
card 1 sticks at the viewport top with a full 100vh portrait.
3. Continued scroll cycles through cards 2→6, each sliding in
from the right while the previous one exits to the left.
4. After card 6 the sticky releases and the page continues.
To achieve step 1 the head must scroll naturally — which it
cannot do while it lives inside .tn-trust-sticky. A small JS in
each page moves `.tn-trust-head` to be a sibling BEFORE
`.tn-trust-spacer` on mobile (and back inside on desktop), so the
CSS below assumes head sits outside the sticky region. */
.tn-trust {
background: var(--ap-surface);
}
.tn-trust-head {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
padding: 32px 20px 20px;
margin: 0;
transform: none;
}
.tn-trust-head-left .tn-section-title {
font-size: clamp(26px, 7vw, 34px);
}
.tn-trust-head-right {
font-size: 16px;
margin: 0;
}
.tn-trust-spacer {
height: 480vh;
}
.tn-trust-sticky {
position: sticky;
top: 0;
height: 100vh;
padding: 0;
background: transparent;
overflow: hidden;
}
.tn-trust-sticky::after {
display: none;
}
.tn-trust-inner {
height: 100%;
display: block;
padding: 0;
}
.tn-trust-gallery {
position: relative;
width: 100%;
height: 100%;
max-height: none;
aspect-ratio: auto;
margin: 0;
overflow: hidden;
}
.tn-trust-card,
.tn-trust-card.is-active,
.tn-trust-card.is-passed {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
aspect-ratio: auto;
background-position: bottom center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 0;
opacity: 1 !important;
transform: translateX(100%) !important;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 1 !important;
}
.tn-trust-card.is-active {
transform: translateX(0) !important;
z-index: 2 !important;
}
.tn-trust-card.is-passed,
.tn-trust-card:has(~ .tn-trust-card.is-active) {
transform: translateX(-100%) !important;
z-index: 1 !important;
}
.tn-trust-card-content {
position: relative;
inset: auto;
width: 100%;
height: auto;
padding: 110px 28px 0;
background: transparent;
flex: 0 0 auto;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.tn-trust-card-num {
position: relative;
top: auto;
left: auto;
font-size: clamp(56px, 17vw, 88px);
line-height: 1;
margin: 0 0 28px;
}
.tn-trust-card-title {
width: 100%;
max-width: 100%;
font-size: 22px;
line-height: 1.3;
margin: 0 0 12px;
cursor: auto;
display: block;
}
.tn-trust-card-title::after {
content: none;
}
.tn-trust-card-desc {
font-size: 16px;
line-height: 1.5;
max-height: none;
margin: 0;
opacity: 1;
overflow: visible;
transition: none;
}
}
/* ====================================================
SECTION 4.5: CAMBRIDGE VIDEO
==================================================== */
.tn-cambridge-video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: 85vh;
overflow: hidden;
background: #fff;
padding-top: 50px;
}
.tn-cambridge-bg {
position: absolute;
top: 50px;
left: 0;
width: 100%;
height: calc(100% - 50px);
object-fit: cover;
object-position: center;
pointer-events: none;
}
@media (max-width: 768px) {
.tn-cambridge-video {
aspect-ratio: auto;
height: 60vh;
}
}
/* ====================================================
SECTION 5: TESTIMONIALS
==================================================== */
.tn-testi {
padding: 120px 0;
background: #F5F1E6;
}
.tn-testi-inner {
max-width: 1260px;
margin: 0 auto;
padding: 0 40px;
}
.tn-testi-head {
text-align: center;
margin-bottom: 56px;
}
.tn-video-slider-container {
position: relative;
margin-top: 48px;
}
.tn-video-viewport {
overflow: hidden;
width: 100%;
border-radius: 1.5rem;
}
.tn-video-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.tn-video-item {
display: flex;
flex-direction: column;
}
.tn-video-thumb {
border-radius: 1rem;
overflow: hidden;
aspect-ratio: 9/16;
background: var(--ap-surface-container);
position: relative;
cursor: pointer;
margin-bottom: 16px;
}
@supports not (aspect-ratio: 9/16) {
.tn-video-thumb {
padding-bottom: 177.78%;
height: 0;
}
}
.tn-video-thumb-bg {
width: 100%;
height: 100%;
background: #ccc center/cover no-repeat;
}
.tn-video-thumb-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 55%;
background: linear-gradient(to top, rgba(37, 118, 185, 0.85) 0%, rgba(37, 118, 185, 0.55) 40%, rgba(37, 118, 185, 0) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 16px 20px;
text-align: center;
opacity: 0;
transition: opacity 0.3s ease;
backdrop-filter: blur(2px);
}
.tn-video-thumb:hover .tn-video-thumb-overlay {
opacity: 1;
}
.tn-video-thumb-text {
color: #fff;
font-size: 18px;
font-weight: 500;
line-height: 1.5;
font-family: var(--body);
transform: translateY(12px);
transition: transform 0.3s ease;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.tn-video-thumb:hover .tn-video-thumb-text {
transform: translateY(0);
}
.tn-video-meta-name {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin: 0 0 4px;
font-family: var(--body);
}
.tn-video-meta-role {
font-size: 18px;
color: #64748b;
margin: 0;
font-family: var(--body);
}
/* Navigation buttons */
.tn-video-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: var(--ap-primary);
font-size: 20px;
cursor: pointer;
z-index: 10;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tn-video-nav:hover:not(:disabled) {
background: #fff;
transform: translateY(-50%) scale(1.1);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.tn-video-nav:active:not(:disabled) {
transform: translateY(-50%) scale(0.95);
}
.tn-video-nav:disabled {
opacity: 0;
pointer-events: none;
}
.tn-video-prev {
left: -24px;
}
.tn-video-next {
right: -24px;
}
@media (max-width: 1024px) {
.tn-video-grid {
grid-template-columns: repeat(2, 1fr);
}
.tn-video-nav {
width: 40px;
height: 40px;
font-size: 18px;
}
.tn-video-prev {
left: -12px;
}
.tn-video-next {
right: -12px;
}
}
@media (max-width: 640px) {
.tn-video-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.tn-video-nav {
display: none;
/* Swipe on mobile might be better, or smaller buttons */
}
/* If we want buttons on mobile too: */
.tn-video-nav {
display: flex;
width: 36px;
height: 36px;
top: auto;
bottom: -60px;
transform: none;
}
.tn-video-prev {
left: calc(50% - 44px);
}
.tn-video-next {
right: calc(50% - 44px);
}
.tn-video-slider-container {
margin-bottom: 80px;
}
}
/* ====================================================
SECTION 6: FINAL CTA
==================================================== */
.tn-final {
padding: 120px 0;
background: #2576b9;
background-image: none;
text-align: center;
}
.tn-final-inner {
max-width: 800px;
margin: 0 auto;
padding: 0 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.tn-final-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(37, 118, 185, 0.07);
border-radius: 999px;
padding: 6px 20px;
font-family: var(--body);
font-size: 18px;
font-weight: 600;
color: var(--ap-primary-container);
letter-spacing: 0.10em;
text-transform: uppercase;
margin-bottom: 24px;
}
.tn-final-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(30px, 4vw, 48px);
color: var(--ap-on-surface);
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.tn-final-sub {
font-family: var(--body);
font-size: 18px;
line-height: 1.65;
color: var(--ap-on-surface-variant);
margin-bottom: 40px;
}
.tn-final-cta {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--ap-secondary);
color: #111;
font-family: var(--display);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 18px 42px;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 8px 28px rgba(254, 204, 0, 0.38);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tn-final-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(254, 204, 0, 0.50);
}
/* ====================================================
SECTION 6: FUTURE JOURNEY
==================================================== */
.tn-future {
padding: 100px 0;
background: var(--ap-surface);
text-align: center;
}
.tn-future-inner {
max-width: 1260px;
margin: 0 auto;
padding: 0 40px;
}
.tn-future-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(32px, 5vw, 48px);
line-height: 1.2;
color: #2576b9;
margin-bottom: 60px;
}
/* Variant: title 1 dòng (Tham gia chinh phục…) — desktop nowrap, mobile cho phép xuống dòng */
.tn-future-title--single {
margin-bottom: 0;
color: #2667e0;
font-size: clamp(22px, 3.4vw, 44px);
text-transform: none;
white-space: nowrap;
}
@media (max-width: 900px) {
.tn-future-title--single {
white-space: normal;
font-size: clamp(22px, 5.4vw, 32px);
line-height: 1.3;
}
}
.tn-future-img {
width: 100%;
}
.tn-future-img img {
width: 100%;
height: auto;
display: block;
}
/* ====================================================
SECTION 7: BOTTOM LEAD FORM (split layout)
==================================================== */
.tn-bottom-form {
position: relative;
padding: 100px 0;
background: url('/landings/en/tieng-anh-ielts/Assets/secondary_bg_form.webp') center/cover no-repeat !important;
overflow: hidden;
}
.tn-bf-inner {
position: relative;
max-width: 1260px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
z-index: 2;
}
.tn-bf-text {
color: #fff;
}
.tn-bf-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(254, 204, 0, 0.16);
border: 1px solid rgba(254, 204, 0, 0.40);
color: #fecc00;
font-family: var(--body);
font-weight: 700;
font-size: 18px;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 22px;
}
.tn-bf-eyebrow i {
font-size: 18px;
}
.tn-bf-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(28px, 3vw, 44px);
color: #fff;
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0 0 22px;
}
.tn-bf-lead {
font-family: var(--body);
font-size: 18px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.88);
margin: 0 0 32px;
max-width: 480px;
}
.tn-bf-ctas {
display: flex;
flex-direction: row;
gap: 28px;
margin-top: 12px;
flex-wrap: wrap;
}
.tn-bf-cta {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
transition: opacity 0.2s;
}
.tn-bf-cta:hover {
opacity: 0.8;
}
.tn-bf-cta-icon {
font-size: 18px;
color: #fecc00;
flex-shrink: 0;
line-height: 1;
}
.tn-bf-cta-body {
display: flex;
flex-direction: column;
gap: 1px;
}
.tn-bf-cta-label {
font-family: var(--display);
font-weight: 700;
font-size: 18px;
color: #fff;
line-height: 1.2;
}
.tn-bf-cta-sub {
font-family: var(--body);
font-size: 18px;
color: rgba(255, 255, 255, 0.60);
line-height: 1.3;
}
.tn-bf-checks {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.tn-bf-checks li {
font-family: var(--body);
font-weight: 500;
font-size: 18px;
color: rgba(255, 255, 255, 0.96);
display: flex;
align-items: center;
gap: 14px;
}
.tn-bf-check-ic {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: #fecc00;
color: #1a5fa6;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 900;
}
/* Glass form card */
.tn-bf-form {
background: rgba(255, 255, 255, 0.10);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 22px;
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 28px 64px rgba(8, 24, 56, 0.28);
}
.tn-bf-row {
display: flex;
gap: 14px;
}
.tn-bf-group {
flex: 1;
min-width: 0;
}
.tn-bf-group input,
.tn-bf-group select {
width: 100%;
height: 56px;
padding: 0 20px;
border-radius: 14px;
border: 1.5px solid rgba(255, 255, 255, 0.32);
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-family: var(--body);
font-size: 18px;
outline: none;
box-sizing: border-box;
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.tn-bf-group input::placeholder {
color: rgba(255, 255, 255, 0.70);
}
.tn-bf-group select {
color: rgba(255, 255, 255, 0.70);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 18px center;
padding-right: 44px;
}
.tn-bf-group select option {
color: #1a5fa6;
background: #fff;
}
.tn-bf-group input:focus,
.tn-bf-group select:focus {
border-color: #fecc00;
background: rgba(255, 255, 255, 0.14);
box-shadow: 0 0 0 4px rgba(254, 204, 0, 0.18);
}
.tn-bf-btn {
margin-top: 10px;
height: 60px;
border: 0;
border-radius: 14px;
background: linear-gradient(135deg, #fecc00 0%, #ffd633 50%, #fecc00 100%);
color: #1a5fa6;
font-family: var(--display);
font-weight: 800;
font-size: 18px;
letter-spacing: 0.04em;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
box-shadow: 0 16px 36px rgba(254, 204, 0, 0.34);
transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
text-transform: uppercase;
}
.tn-bf-btn:hover {
transform: translateY(-2px);
box-shadow: 0 20px 44px rgba(254, 204, 0, 0.42);
filter: brightness(1.04);
}
.tn-bf-btn i {
font-size: 18px;
transition: transform 0.25s ease;
}
.tn-bf-btn:hover i {
transform: translateX(4px);
}
.tn-bf-privacy {
margin-top: 12px;
font-family: var(--body);
font-size: 15px;
color: #fff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.tn-bf-privacy a {
color: #fff;
text-decoration: underline;
text-underline-offset: 2px;
}
.tn-bf-privacy a:hover {
opacity: 0.8;
}
@media (max-width: 1024px) {
.tn-bottom-form {
padding: 80px 0;
}
.tn-bf-inner {
grid-template-columns: 1fr;
gap: 48px;
}
}
@media (max-width: 640px) {
/* Mobile: ảnh secondary_bg_form.png (2880×1444, aspect 2:1) chỉ hiển thị
ở top phía trên form. Phía dưới form chỉ là solid color #3966D9
(không lặp ảnh — tránh duplicate visual). */
.tn-bottom-form {
background:
url('/landings/en/tieng-anh-ielts/Assets/secondary_bg_form.webp') top right / 100% auto no-repeat,
#3966D9 !important;
padding: 50vw 0 60px !important;
}
.tn-bf-inner {
padding: 0 20px;
}
.tn-bf-form {
padding: 24px 20px;
}
.tn-bf-row {
flex-direction: column;
}
.tn-bf-btn {
font-size: 14px;
letter-spacing: 0;
gap: 8px;
white-space: nowrap;
}
}
/* ====================================================
RESPONSIVE
==================================================== */
@media (max-width: 1024px) {
.tn-hero-inner {
grid-template-columns: 1fr;
gap: 48px;
}
.tn-philosophy-inner {
grid-template-columns: 1fr;
gap: 48px;
}
.tn-slide-wrap {
grid-template-columns: 1fr;
}
.tn-slide-text {
padding: 24px 24px 32px;
}
.tn-slide-images {
height: 50vh;
}
.tn-orbital-sticky {
flex-direction: column;
}
.tn-slide-img img {
max-height: 55vh;
}
.tn-video-grid {
grid-template-columns: repeat(2, 1fr);
}
.tn-feat-inner {
gap: 48px;
padding: 48px 28px;
}
.tn-feat-num {
width: 52px;
height: 52px;
font-size: 20px;
}
}
@media (max-width: 640px) {
.tn-hero-inner,
.tn-philosophy-inner,
.tn-values-inner,
.tn-roadmap-inner,
.tn-trust-inner,
.tn-testi-inner,
.tn-final-inner {
padding: 0 20px;
}
.tn-hero-inner {
padding-top: 100px;
padding-bottom: 60px;
}
.tn-philosophy,
.tn-values,
.tn-roadmap,
.tn-trust,
.tn-testi,
.tn-final {
padding: 72px 0;
}
.tn-video-grid {
grid-template-columns: repeat(2, 1fr);
}
.tn-compass {
padding: 28px 24px;
}
.tn-quote-card {
padding: 36px 28px;
}
.tn-quote-stats {
grid-template-columns: 1fr;
gap: 12px;
}
/* Scroll slideshow — disable sticky on mobile Safari */
.tn-orbital-spacer {
height: auto;
}
.tn-orbital-sticky {
position: relative;
height: auto;
flex-direction: column;
}
.tn-slide-images {
height: 40vh;
min-height: 260px;
}
.tn-slide-img img {
max-height: 43vh;
}
.tn-slide-text {
position: relative;
right: auto;
top: auto;
transform: none;
width: 100%;
max-width: 100%;
padding: 24px 20px 32px;
}
/* Make all panels visible in stacked layout on mobile */
.tn-orbital-panels {
min-height: 0;
}
.tn-orbital-panel {
position: relative;
opacity: 1;
transform: none;
pointer-events: auto;
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid var(--ap-outline-variant);
}
.tn-orbital-panel:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.tn-orbital-progress {
display: none;
}
/* Show only first image on mobile */
.tn-slide-img {
display: none;
}
.tn-slide-img:first-child {
display: flex;
opacity: 1;
position: relative;
}
/* Feature slider mobile */
.tn-feat-inner {
grid-template-columns: 1fr;
gap: 24px;
padding: 36px 20px;
}
.tn-feature-visual {
aspect-ratio: 16/10;
}
.tn-feat-chapter {
gap: 14px;
}
.tn-feat-num {
width: 48px;
height: 48px;
font-size: 18px;
border-radius: 0.75rem;
}
.tn-feature-title {
font-size: 20px;
}
/* Footer mobile fix */
footer>div>div:first-child {
flex-direction: column;
gap: 28px !important;
}
}
/* ====================================================
DESKTOP TUNING — 960px / 1200px / 1440px
==================================================== */
/* ── Short-viewport compact (e.g. 1024×600 tablet landscape) ── */
@media (max-height: 700px) and (min-width: 901px) {
/* Section 1.5 — Roadmap */
.tn-rb-title {
white-space: normal;
font-size: clamp(24px, 3vw, 32px);
margin-top: 40px;
}
.tn-rb-inner {
padding: 32px 32px;
row-gap: 16px;
}
.tn-rb-stairs {
padding-bottom: 24px;
column-gap: 20px;
}
.tn-rb-card-title {
font-size: 20px;
}
/* Section 4 — Trust */
.tn-trust-sticky {
padding: 80px 0 20px;
}
.tn-trust-head {
margin-bottom: 16px;
gap: 32px;
}
.tn-trust-head-left .tn-section-title {
font-size: clamp(24px, 3vw, 32px);
}
}
/* ≥ 1440px — màn lớn: nới container & padding */
@media (min-width: 1440px) {
.tn-sequence,
.tn-rb-inner,
.tn-trust-inner,
.tn-trust-gallery,
.tn-testi-inner,
.tn-future-inner,
.tn-bf-inner,
.tn-future-disclaimer {
max-width: 1320px;
}
.tn-philosophy-inner {
padding-left: 48px;
padding-right: 48px;
}
.tn-rb-stairs {
column-gap: 56px;
}
.tn-trust-head {
gap: 72px;
}
.tn-video-grid {
gap: 28px;
}
.tn-form-bar-inner {
max-width: 880px;
}
}
/* ≤ 1200px — mid desktop: bóp padding & gap, vẫn 4-col video */
@media (max-width: 1200px) {
.tn-philosophy-inner,
.tn-rb-inner,
.tn-trust-inner,
.tn-testi-inner,
.tn-future-inner,
.tn-bf-inner {
padding-left: 32px;
padding-right: 32px;
}
.tn-trust-head {
gap: 40px;
margin-bottom: 40px;
}
.tn-rb-stairs {
column-gap: 32px;
}
.tn-rb-card-title {
font-size: 24px;
}
.tn-video-grid {
gap: 20px;
}
.tn-form-bar-inner {
padding: 22px 24px 20px;
}
.tn-hero-inner {
padding-left: 32px;
padding-right: 32px;
}
}
/* ≤ 960px — compact desktop: rút padding, scale typography card */
@media (max-width: 960px) {
.tn-philosophy-inner,
.tn-rb-inner,
.tn-trust-inner,
.tn-testi-inner,
.tn-future-inner,
.tn-bf-inner {
padding-left: 24px;
padding-right: 24px;
}
.tn-rb-inner {
padding-top: 48px;
padding-bottom: 48px;
}
.tn-rb-title {
margin-top: 40px;
}
.tn-rb-stairs {
column-gap: 20px;
padding-bottom: 56px;
}
.tn-rb-card {
padding-left: 16px;
}
.tn-rb-card-title {
font-size: 22px;
}
.tn-rb-card-desc {
font-size: 17px;
}
.tn-rb-num::before {
left: -16px;
}
.tn-trust-head {
gap: 32px;
margin-bottom: 32px;
}
.tn-video-grid {
gap: 16px;
}
.tn-form-bar-heading {
padding: 0 16px;
}
.tn-form-bar-inner {
padding: 20px 20px 16px;
}
}
/* ====================================================
SHORT-VIEWPORT TUNING — laptop có bookmark bar
Áp dụng khi desktop (≥1024px) nhưng chiều cao thấp
(≤720px, vd 1028×558). Mục tiêu: thu gọn padding
và mở rộng vùng nội dung/hình của các sticky section
để hiển thị đầy đủ trong viewport.
==================================================== */
@media (min-width: 1024px) and (max-height: 720px) {
/* HERO ── giảm padding vì viewport ngắn */
.tn-hero-inner {
padding: 80px 40px 60px;
}
.tn-form-bar-title {
font-size: clamp(22px, 3.2vw, 36px);
}
.tn-form-bar-heading {
margin: 0 auto 12px;
}
.tn-form-bar-inner {
padding: 18px 24px 16px;
}
.tn-form-bar-group input,
.tn-form-bar-group select,
.tn-form-bar-btn {
height: 48px;
font-size: 17px;
}
.tn-hero-form-bar {
bottom: 20px;
}
/* SECTION 1: SEQUENCE ── cho stage cao hơn theo viewport */
.tn-sequence-sticky {
padding: 12px 0;
}
.tn-sequence-stage {
height: clamp(360px, 88vh, 720px);
}
.tn-frame-text {
padding: clamp(20px, 4vw, 56px);
}
.tn-frame-title {
font-size: clamp(22px, 3vw, 36px);
margin: 0 0 12px;
}
.tn-frame-desc {
font-size: 16px;
}
/* SECTION 1.5: ROADMAP BESPOKE ── nén chrome top/bottom */
.tn-rb-inner {
padding: 40px 32px;
row-gap: 16px;
}
.tn-rb-title {
margin: 24px 0 0 0;
font-size: clamp(24px, 3.4vw, 38px);
}
.tn-rb-stairs {
padding-bottom: 32px;
column-gap: 32px;
}
/* Giảm biên độ dịch chuyển bậc thang để không tràn */
.tn-rb-card[data-step="1"] {
transform: translateY(100px);
}
.tn-rb-card[data-step="2"] {
transform: translateY(50px);
}
.tn-rb-card[data-step="3"] {
transform: translateY(-30px);
}
.tn-rb-card[data-step="1"].is-visible {
transform: translateY(40px);
}
.tn-rb-card[data-step="2"].is-visible {
transform: translateY(0);
}
.tn-rb-card[data-step="3"].is-visible {
transform: translateY(-70px);
}
/* SECTION 4: TRUST ── lấy lại không gian cho gallery */
.tn-trust-sticky {
padding: 70px 0 20px;
}
.tn-trust-head {
margin-bottom: 12px;
gap: 32px;
}
.tn-trust-head-left .tn-section-title {
font-size: clamp(22px, 3vw, 32px);
}
.tn-trust-head-right {
font-size: 16px;
line-height: 1.5;
}
.tn-trust-gallery {
margin: 24px auto 0;
max-height: calc(100vh - 200px);
}
.tn-trust-card-content {
padding: clamp(16px, 2.4vw, 32px) clamp(20px, 3.5vw, 56px);
}
.tn-trust-card-num {
font-size: clamp(44px, 5vw, 72px);
margin: 0 0 clamp(12px, 2vw, 28px);
}
.tn-trust-card-title {
font-size: clamp(18px, 2vw, 26px);
}
.tn-trust-card-desc {
font-size: clamp(15px, 1.2vw, 17px);
}
}
/* ── Footer isolation from Apollo global styles ── */
footer a {
color: #2576b9 !important;
text-decoration: none !important;
}
footer a.tn-footer-social {
color: #fff !important;
}
footer p,
footer div {
color: inherit;
}
/* ── Footer mobile layout (port từ Primary để layout dọc / logo góc dưới-phải) ── */
@media (max-width: 768px) {
.tn-footer {
padding: 0 0 24px !important;
}
.tn-footer-wrap {
position: relative;
padding: 0 20px !important;
}
.tn-footer-row {
flex-direction: column !important;
align-items: stretch !important;
gap: 16px !important;
}
.tn-footer-logo {
position: absolute;
right: 20px;
bottom: 56px;
align-self: auto;
margin: 0;
}
.tn-footer-logo img {
height: 56px !important;
}
.tn-footer-content {
align-items: stretch !important;
width: 100%;
min-width: 0 !important;
order: 2;
}
.tn-footer-links {
flex-direction: column !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
gap: 0 !important;
margin-bottom: 16px !important;
}
.tn-footer-links a {
display: block;
width: 100%;
padding: 18px 0 !important;
border-bottom: 1px solid #e5e7eb;
text-align: left;
}
.tn-footer-bottom {
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 16px !important;
}
.tn-footer-follow {
align-items: flex-start !important;
width: 100%;
}
.tn-footer-follow-row {
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
width: 100%;
gap: 16px !important;
}
.tn-footer-socials {
order: -1;
}
.tn-footer-copyright {
text-align: left;
}
}
/* ============================================================
IELTS-SPECIFIC LAYOUT + OVERRIDES
Cascades after the shared base above (same order as when this
was a separate ielts.css loaded after thieunien.css):
1. Global H2 color override (IELTS blue)
2. Hero title typography tweak
3. SECTION 1 — Champions gallery + Kate quote
4. SECTION 2 — IELTS roadmap (staircase + 2 program tracks)
5. SECTION 3 — Trust (5 stacking cards)
6. SECTION 4 — Baby-sun testimonial Swiper + video popup
7. SECTION 5 — Bottom lead form
============================================================ */
/* Global H1/H2 color — IELTS blue used for every section heading. */
main h1,
main h2 {
color: #2667e0 !important;
}
/* Lead summary paragraph under the H1 (Section 1) — short factual answer
surfaced for search/AI answer engines, styled as sub-copy under the title. */
.ielts-lead-summary {
font-family: var(--body);
font-size: clamp(15px, 1.6vw, 18px);
line-height: 1.7;
color: var(--ap-on-surface-variant, #4a4a4a);
max-width: 760px;
margin: 16px auto 0;
}
.ielts-lead-summary strong {
color: #2667e0;
}
/* Hero H1 typography (the .tn-form-bar-title heading inside the hero form bar). */
.tn-form-bar-title {
font-family: var(--display);
font-weight: 700;
letter-spacing: 0.5px;
text-transform: none;
}
/* ============================================================
SECTION 1 — CHAMPIONS GALLERY
Apple-style pinned horizontal gallery. A tall .ielts-champions-spacer
pins the sticky stage; JS translates the .ielts-champions-track left
as the page scrolls (vertical scroll → left→right drag). Each .champ-card
is a real student cutout standing in front of their faded IELTS band
number; hover reveals a blue achievements panel.
============================================================ */
.ielts-champions {
background: linear-gradient(180deg, #f3f7fc 0%, #ffffff 60%);
}
/* JS sets the spacer height; this is a no-JS / pre-measure fallback. */
.ielts-champions-spacer {
position: relative;
height: 320vh;
}
.ielts-champions-sticky {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.ielts-champions-head {
flex: 0 0 auto;
text-align: center;
/* Top padding clears the fixed Apollo header (~88px) so the first title line
is never tucked underneath it while the section is pinned. */
padding: clamp(104px, 14vh, 150px) 6vw 0;
}
/* Reuse the bottom-form title styling, but drop its huge bottom margin so the
gallery fits within one viewport. */
.ielts-champions-head .ielts-bf-title {
margin: 0 auto;
}
.ielts-champions-head .ielts-bf-title em {
display: inline-block;
font-style: italic;
}
.ielts-champions-viewport {
flex: 1 1 auto;
display: flex;
align-items: center;
overflow: hidden;
}
.ielts-champions-track {
display: flex;
align-items: stretch;
gap: clamp(20px, 2.4vw, 44px);
padding: 0 clamp(24px, 6vw, 96px);
will-change: transform;
}
/* ---- Card ---- */
.champ-card {
/* --shift = staggered vertical offset (so-le); composed with the hover lift below. */
--shift: 0px;
position: relative;
flex: 0 0 auto;
width: clamp(238px, 20vw, 310px);
height: clamp(360px, 56vh, 500px);
border-radius: 26px;
overflow: hidden;
background: transparent;
transform: translateY(var(--shift));
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Zig-zag (matches the mockup): odd cards drop low, even cards ride high. */
.champ-card:nth-child(odd) { --shift: clamp(18px, 3.5vh, 44px); }
.champ-card:nth-child(even) { --shift: calc(-1 * clamp(18px, 3.5vh, 44px)); }
.champ-card:hover {
transform: translateY(calc(var(--shift) - 12px));
}
/* Faded IELTS band number behind the student — kept fully inside the card frame
(contain + 100% width) so the whole score is always visible. */
.champ-band {
position: absolute;
left: 0;
right: 0;
top: 5%;
width: 100%;
height: 56%;
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
z-index: 1;
pointer-events: none;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.champ-card:hover .champ-band {
transform: scale(1.04);
}
/* Student cutout — bottom-aligned, in front of the number */
.champ-kid {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
height: 90%;
width: auto;
max-width: 116%;
object-fit: contain;
object-position: bottom center;
z-index: 2;
filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.16));
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.champ-card:hover .champ-kid {
transform: translateX(-50%) scale(1.03);
}
/* Achievements panel — blue gradient that fades up on hover */
.champ-info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
padding: 30px 22px 92px;
background: linear-gradient(to top,
rgba(15, 76, 138, 0.97) 38%,
rgba(26, 95, 166, 0.82) 70%,
rgba(26, 95, 166, 0) 100%);
opacity: 0;
transform: translateY(24px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.champ-card:hover .champ-info {
opacity: 1;
transform: translateY(0);
}
.champ-achievements {
list-style: none;
margin: 0;
padding: 0;
}
.champ-achievements li {
position: relative;
padding-left: 20px;
margin-bottom: 12px;
font-family: var(--body);
font-weight: 600;
font-size: clamp(13px, 1vw, 15px);
line-height: 1.45;
color: #fff;
}
.champ-achievements li:last-child { margin-bottom: 0; }
.champ-achievements li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ap-primary-fixed-dim);
}
/* Name + score label — always visible at the bottom */
.champ-label {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 18px;
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}
.champ-name {
font-family: var(--body);
font-weight: 700;
font-size: clamp(13px, 1vw, 15px);
line-height: 1.2;
color: var(--ap-on-surface);
}
.champ-score {
font-family: var(--display);
font-weight: 700;
font-size: clamp(16px, 1.5vw, 22px);
line-height: 1;
color: #e2293b;
white-space: nowrap;
}
/* ---- Mobile: native horizontal swipe, no pinning ---- */
@media (max-width: 768px) {
.ielts-champions-spacer {
height: auto !important;
}
.ielts-champions-sticky {
position: static;
height: auto;
}
.ielts-champions-head {
padding: 40px 24px 18px;
}
.ielts-champions-viewport {
display: block;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 22px;
}
.ielts-champions-viewport::-webkit-scrollbar { display: none; }
.ielts-champions-track {
transform: none !important;
gap: 16px;
padding: 8px 20px 4px;
}
.champ-card,
.champ-card:nth-child(odd),
.champ-card:nth-child(even) {
--shift: 0px;
width: 76vw;
max-width: 320px;
height: auto;
aspect-ratio: 3 / 4.4;
scroll-snap-align: center;
}
/* Touch has no hover — keep achievements revealed so they're never lost. */
.champ-info {
opacity: 1;
transform: none;
}
}
/* ============================================================
SECTION 1B — KATE QUOTE
Full-bleed portrait background with a frosted quote card on the
left and a decorative trophy overlapping its corner.
============================================================ */
/* `section.` prefix raises specificity above the global
`.cat-page section { background-image: none }` reset. */
section.ielts-kate {
position: relative;
background-image: url('/landings/en/tieng-anh-ielts/Assets/bg_Kate.webp');
background-size: cover;
background-position: right center;
background-repeat: no-repeat;
}
.ielts-kate-inner {
max-width: 1320px;
margin: 0 auto;
padding: clamp(60px, 9vw, 130px) clamp(24px, 5vw, 80px);
display: flex;
}
.ielts-kate-card {
position: relative;
width: clamp(320px, 44%, 560px);
padding: clamp(32px, 3.4vw, 52px) clamp(28px, 3vw, 48px) clamp(40px, 3.6vw, 56px);
background: rgba(240, 243, 248, 0.82);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 22px;
box-shadow: 0 24px 60px rgba(15, 41, 84, 0.16);
}
.ielts-kate-mark {
display: block;
font-family: var(--display);
font-weight: 700;
font-size: clamp(54px, 6vw, 86px);
line-height: 0.6;
color: #2667e0 !important;
margin-bottom: 8px;
}
.ielts-kate-quote {
margin: 0 0 26px;
font-family: var(--body);
font-style: italic;
font-weight: 500;
font-size: clamp(15px, 1.25vw, 19px);
line-height: 1.7;
color: #3a4250;
}
.ielts-kate-author {
display: flex;
flex-direction: column;
gap: 4px;
}
.ielts-kate-name {
font-family: var(--display);
font-weight: 700;
font-size: clamp(17px, 1.5vw, 22px);
color: #2667e0 !important;
}
.ielts-kate-role {
font-family: var(--body);
font-weight: 400;
font-size: clamp(13px, 1.05vw, 15px);
color: var(--ap-on-surface-variant);
}
.ielts-kate-trophy {
position: absolute;
right: clamp(-28px, -2vw, -18px);
bottom: clamp(24px, 3vw, 44px);
width: clamp(64px, 7vw, 96px);
height: auto;
filter: drop-shadow(0 8px 16px rgba(15, 41, 84, 0.22));
}
@media (max-width: 768px) {
.ielts-kate {
background-position: center top;
}
.ielts-kate-inner {
padding: 0;
flex-direction: column;
}
/* Stack the card below the portrait so the photo stays visible on mobile. */
.ielts-kate-card {
width: 100%;
border-radius: 0;
margin-top: 56vw;
background: rgba(240, 243, 248, 0.94);
box-shadow: 0 -10px 40px rgba(15, 41, 84, 0.14);
}
.ielts-kate-trophy {
right: 18px;
bottom: 16px;
}
}
/* ============================================================
SECTION 4B — VIDEO BANNER
Full-bleed photo background with a centered play button + a
left-aligned headline. Click the play button → video lightbox.
============================================================ */
section.ielts-video-banner {
position: relative;
background-image: url('/landings/en/tieng-anh-ielts/Assets/bg_video_section_hienthuc.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: clamp(320px, 42vw, 600px);
display: flex;
align-items: flex-end;
overflow: hidden;
}
/* Centered play button */
.ielts-vb-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: clamp(64px, 6vw, 96px);
height: clamp(64px, 6vw, 96px);
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--ap-primary-container);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 12px 34px rgba(15, 41, 84, 0.32);
transition: transform 0.3s ease, background 0.3s ease;
}
.ielts-vb-play svg {
width: 42%;
height: 42%;
margin-left: 6%;
}
.ielts-vb-play::after {
content: "";
position: absolute;
inset: -10px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.55);
animation: vb-pulse 2s ease-out infinite;
}
@keyframes vb-pulse {
0% { transform: scale(0.85); opacity: 0.8; }
100% { transform: scale(1.35); opacity: 0; }
}
.ielts-vb-play:hover {
transform: translate(-50%, -50%) scale(1.08);
background: #fff;
}
/* Headline block (bottom-left) */
.ielts-vb-text {
position: relative;
z-index: 2;
padding: clamp(28px, 5vw, 72px) clamp(24px, 6vw, 110px);
max-width: 60%;
}
.ielts-vb-title {
margin: 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(28px, 4vw, 56px);
line-height: 1.05;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #fff !important; /* beats the global `main h2` blue override */
}
.ielts-vb-title span {
display: inline-block;
color: #fff;
}
.ielts-vb-sub {
margin: 14px 0 0;
font-family: var(--body);
font-weight: 600;
font-size: clamp(14px, 1.4vw, 20px);
color: rgba(255, 255, 255, 0.92);
}
/* Video lightbox */
.ielts-vb-popup {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
background: rgba(8, 18, 40, 0.85);
padding: 24px;
}
.ielts-vb-popup.show { display: flex; }
.ielts-vb-popup-content {
position: relative;
width: min(960px, 92vw);
}
.ielts-vb-popup-content video {
width: 100%;
border-radius: 14px;
display: block;
background: #000;
}
.ielts-vb-popup-close {
position: absolute;
top: -44px;
right: 0;
font-size: 34px;
line-height: 1;
color: #fff;
cursor: pointer;
user-select: none;
}
@media (max-width: 768px) {
section.ielts-video-banner {
min-height: 78vw;
background-position: 70% center;
}
.ielts-vb-text {
max-width: 100%;
}
}
/* ============================================================
SECTION 2 — IELTS ROADMAP (rebuilt from mockup)
Pure-CSS staircase infographic on a white background. 8 ascending
band bars (Scout→Diamond) + a Gladiator arrow, grouped into
IELTS Access (3 yellow bars) and IELTS Pathway (5 blue bars),
split by a dashed divider. A cutout student stands in front of
the upper steps. The chart is one fixed-aspect composition: bars
are flex columns anchored to a shared baseline; programs, dashed
axis lines and the student are absolutely positioned over it.
Tunables: bar heights live inline as `--h` on each .rm-bar;
the student position is `.rm-hero { right / height }`.
============================================================ */
.ielts-roadmap {
position: relative;
background: #fff;
padding: clamp(40px, 6vw, 96px) 0;
}
.roadmap-wrap {
max-width: 1240px;
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 60px);
}
.roadmap-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(24px, 3.4vw, 46px);
line-height: 1.15;
letter-spacing: 0.3px;
text-align: center;
color: #2667e0 !important;
margin: 0 auto clamp(28px, 4.5vw, 60px);
max-width: 1000px;
}
/* On mobile this wrapper turns into a horizontal swipe so the
composition keeps its proportions instead of squishing. */
.roadmap-scroll {
position: relative;
}
.roadmap-chart {
position: relative;
height: clamp(464px, 48vw, 644px);
}
/* ---- Staircase bars ----
top:24px leaves headroom so the Gladiator arrow can tower ~24px above
the rest of the staircase without overflowing (or being clipped on the
mobile horizontal scroll). */
.rm-bars {
position: absolute;
top: 24px;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-end; /* bars grow up from a shared baseline */
gap: 0;
}
.rm-bar {
position: relative;
flex: 1 1 0;
height: var(--h);
display: flex;
flex-direction: column;
align-items: flex-start;
padding: clamp(8px, 1vw, 16px) clamp(6px, 0.8vw, 14px) 0;
}
.rm-bar-label {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.rm-bar-name {
font-family: var(--display);
font-weight: 700;
font-size: clamp(13px, 1.5vw, 22px);
white-space: nowrap;
}
.rm-bar-band {
font-family: var(--body);
font-weight: 700;
font-size: clamp(11px, 1vw, 16px);
color: #2b3a4a;
margin-top: 3px;
white-space: nowrap;
}
/* Per-band fills + name colours (lower → higher saturation) */
.rm-bar--scout { background: #fbe7a1; }
.rm-bar--scout .rm-bar-name { color: #e0a23a; }
.rm-bar--knight { background: #fbd968; }
.rm-bar--knight .rm-bar-name { color: #dd8836; }
.rm-bar--champion { background: #f9c84b; }
.rm-bar--champion .rm-bar-name { color: #e3593e; }
.rm-bar--silver { background: #e6f1fb; }
.rm-bar--silver .rm-bar-name { color: #9bbdd9; }
.rm-bar--gold { background: #d7e8f8; }
.rm-bar--gold .rm-bar-name { color: #6fa0cc; }
.rm-bar--platinum { background: #c3dbf3; }
.rm-bar--platinum .rm-bar-name { color: #4385c2; }
.rm-bar--diamond { background: #aecfef; }
.rm-bar--diamond .rm-bar-name { color: #2c6da8; }
/* Gladiator = arrow. The fill pseudo is drawn slightly WIDER than the
column (left/right -10%) so the arrowhead wings flare out beyond the
shaft; the clip-path keeps the shaft ~80% of the column width. The
label then sits top-left on the shaft, just below the arrowhead —
same alignment as the other bars (not centred). */
.rm-bar--gladiator {
background: transparent;
overflow: visible;
padding: 0;
/* +24px taller than the band bars: it fills the bar area AND reaches up
into the 24px headroom, so the arrow towers above Diamond. */
height: calc(100% + 24px);
}
.rm-bar--gladiator::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
/* Box flares ±13% beyond the column; the clip keeps the SHAFT at the
full column width (0–100%) so it is as wide as Diamond and butts
right up against it with no gap, while the arrowhead wings spill out
symmetrically. The 18% arrowhead clears Diamond's top line. */
left: -13%;
right: -13%;
background: #9dc7ec;
clip-path: polygon(50% 0%, 100% 18%, 89.68% 18%, 89.68% 100%, 10.32% 100%, 10.32% 18%, 0% 18%);
z-index: 0;
}
.rm-bar--gladiator .rm-bar-label {
position: absolute;
top: 20%; /* on the shaft, just below the arrowhead */
left: clamp(6px, 0.8vw, 14px); /* same inset as the other bars */
right: 2%;
align-items: flex-start;
text-align: left;
z-index: 2;
}
.rm-bar--gladiator .rm-bar-name { color: #3576b0; }
/* ---- Dashed axis (orange L around Access) + group divider (grey).
Bars are 8 equal columns, so the Access|Pathway boundary is at
3/8 = 37.5%. ---- */
.rm-axis-left {
position: absolute;
left: 0;
top: 16%;
bottom: 0;
border-left: 2px dashed #e6a23c;
z-index: 1;
}
.rm-axis-bottom {
position: absolute;
left: 0;
bottom: 0;
width: 37.5%;
border-bottom: 2px dashed #e6a23c;
z-index: 1;
}
.rm-divider {
position: absolute;
top: 0;
bottom: 0;
left: 38.5%;
border-left: 2px dashed #b9c2cc;
z-index: 1;
}
/* ---- Program callouts ---- */
.rm-program {
position: absolute;
z-index: 3;
}
.rm-program--access { left: 2.5%; top: 30%; width: 26%; }
.rm-program--pathway { left: 40%; top: 4%; width: 31%; }
.rm-program-title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(18px, 2vw, 30px);
line-height: 1.15;
margin: 0 0 8px;
}
.rm-program--access .rm-program-title { color: #e2902f; }
.rm-program--pathway .rm-program-title { color: #2f6fb0; }
.rm-program-desc {
font-family: var(--body);
font-weight: 400;
font-size: clamp(13px, 1.05vw, 17px);
line-height: 1.55;
color: #565e68;
margin: 0;
}
/* ---- Cutout student in front of the upper steps ---- */
.rm-hero {
position: absolute;
right: calc(11% - 100px); /* nudged ~100px to the right */
bottom: 0;
height: 76%;
width: auto;
z-index: 4;
pointer-events: none;
filter: drop-shadow(0 14px 24px rgba(15, 41, 84, 0.16));
}
/* ---- Mobile: swipe the full composition instead of squishing ---- */
@media (max-width: 768px) {
.roadmap-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 14px;
}
.roadmap-scroll::-webkit-scrollbar { height: 4px; }
.roadmap-scroll::-webkit-scrollbar-thumb { background: #cdd6e0; border-radius: 4px; }
.roadmap-chart {
min-width: 760px;
height: 494px;
}
.rm-program-desc { font-size: 13px; }
}
/* ============================================================
TRUST — IELTS variant (Sticky Sequence — 4 cards stacking)
Reuses Secondary's .tn-trust-* pattern but with 4 cards
instead of 6 (spacer 320vh = 80vh per card).
ielts_hinh1-4.png are 2240x908 (22:9) — match gallery ratio.
Head is single-column (no head-right) — title spans full width
so it wraps in 2 lines instead of 3.
============================================================ */
.tn-trust .tn-trust-spacer { height: 400vh; }
.tn-trust .tn-trust-head {
grid-template-columns: 1fr;
}
.tn-trust .tn-trust-head-left {
max-width: 920px;
}
.tn-trust .tn-trust-head-left .tn-section-title {
font-size: 42px;
line-height: 1.25;
}
.tn-trust .tn-trust-head-desc {
margin: 18px 0 0;
font-size: 18px;
line-height: 1.6;
color: var(--ap-on-surface-variant, #4a4a4a);
}
@media (max-width: 768px) {
.tn-trust .tn-trust-spacer { height: 400vh; }
.tn-trust .tn-trust-head { grid-template-columns: 1fr; }
.tn-trust .tn-trust-head-desc { font-size: 16px; }
.tn-trust .tn-trust-card[data-index="0"] { background-image: url('/landings/en/tieng-anh-ielts/Assets/ielts_card1_mobile.webp') !important; }
.tn-trust .tn-trust-card[data-index="1"] { background-image: url('/landings/en/tieng-anh-ielts/Assets/ielts_card2_mobile.webp') !important; }
.tn-trust .tn-trust-card[data-index="2"] { background-image: url('/landings/en/tieng-anh-ielts/Assets/ielts_card3_mobile.webp') !important; }
.tn-trust .tn-trust-card[data-index="3"] { background-image: url('/landings/en/tieng-anh-ielts/Assets/ielts_card4_mobile.webp') !important; }
.tn-trust .tn-trust-card[data-index="4"] { background-image: url('/landings/en/tieng-anh-ielts/Assets/ielts_card5_mobile.webp') !important; }
}
/* ============================================================
SECTION 4 — BABY-SUN / GƯƠNG MẶT IELTS
Swiper carousel of student testimonial cards (.card-item).
Hover reveals an "Câu chuyện của con" overlay with a play button
that opens a video popup (.ielts-popup).
============================================================ */
.baby-sun {
position: relative;
margin: 80px 0 60px;
padding: 0 16px;
}
.baby-sun .container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
max-width: 1240px;
margin: 0 auto;
}
.baby-sun_title {
font-family: var(--display);
font-weight: 700;
font-size: clamp(28px, 3.6vw, 48px);
line-height: 1.2;
letter-spacing: 1px;
color: var(--ap-primary-container);
text-transform: uppercase;
margin: 0 0 40px 0;
text-align: center;
}
.baby-sun .swiper-container {
width: 100%;
height: 100%;
overflow: hidden;
}
.baby-sun .card-list {
padding: 12px 0;
}
.baby-sun .card-list .card-item {
display: flex;
justify-content: center;
align-items: center;
}
.baby-sun .card-list .card-item .card-content {
width: 100%;
max-width: 378px;
display: flex;
flex-direction: column;
border-radius: 12px;
}
.baby-sun .card-content_img {
position: relative;
overflow: hidden;
border-radius: 10px;
aspect-ratio: 378 / 480;
background: #f2f4f5;
}
.baby-sun .card-content_img img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
display: block;
}
.baby-sun .card-content_text h3 {
margin: 20px 0 6px 0;
font-family: var(--display);
font-weight: 700;
font-size: clamp(22px, 2vw, 30px);
line-height: 1.2;
text-transform: uppercase;
color: var(--ap-primary-container);
}
.baby-sun .card-content_text p {
margin: 0;
font-family: var(--body);
font-weight: 600;
font-size: 18px;
line-height: 1.55;
letter-spacing: 0.25px;
color: var(--ap-primary-container);
}
.baby-sun .overlay {
position: absolute;
bottom: 0;
left: -100%;
width: 100%;
height: 80px;
background: rgba(35, 118, 188, 0.85);
transition: left 0.45s ease-in-out;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 18px;
}
.baby-sun .overlay p {
font-family: var(--body);
font-weight: 600;
font-size: 18px;
color: #fff;
margin: 0;
}
.baby-sun .overlay img {
width: 35px;
height: 35px;
cursor: pointer;
flex-shrink: 0;
}
.baby-sun .card-content_img:hover .overlay {
left: 0;
}
.baby-sun .play-btn:hover {
opacity: 0.85;
}
.baby-sun .nav-custom-left,
.baby-sun .nav-custom-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
background: #fff;
color: var(--ap-primary-container);
border-radius: 50%;
box-shadow: var(--shadow-sm);
cursor: pointer;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
}
.baby-sun .nav-custom-left { left: -22px; }
.baby-sun .nav-custom-right { right: -22px; }
.baby-sun .swiper-button-next::after,
.baby-sun .swiper-button-prev::after {
font-size: 18px !important;
font-weight: 700;
color: var(--ap-primary-container);
}
@media (max-width: 900px) {
.baby-sun { margin: 40px 0 30px; }
.baby-sun .nav-custom-left { left: 4px; }
.baby-sun .nav-custom-right { right: 4px; }
.baby-sun .card-list .card-item .card-content { max-width: 280px; }
.baby-sun .overlay { left: 0; }
}
/* Popup (video) — used by baby-sun play buttons */
.ielts-popup {
visibility: hidden;
opacity: 0;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
.ielts-popup.show {
visibility: visible;
opacity: 1;
}
.ielts-popup-content {
background: #fff;
padding: 18px;
border-radius: 12px;
width: 90%;
max-width: 760px;
text-align: center;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
transform: scale(0.92);
transition: transform 0.18s ease;
position: relative;
overflow: hidden;
}
.ielts-popup.show .ielts-popup-content { transform: scale(1); }
.ielts-popup-close {
position: absolute;
top: 6px;
right: 14px;
font-size: 32px;
line-height: 1;
cursor: pointer;
color: var(--ap-on-surface);
}
#ielts-popup-video,
#ielts-popup-iframe {
width: 100%;
height: 420px;
display: block;
border: 0;
margin: 8px 0 0;
}
@media (max-width: 640px) {
#ielts-popup-video, #ielts-popup-iframe { height: 260px; }
}
/* ============================================================
SECTION 5 — FINAL CTA / BOTTOM LEAD FORM
Flat structure — the cutout students image is a direct child
of the section (position: absolute) so it can span across both
the white title area and the blue form band:
← centered title, white area