.title-green__banner {
color: #ffffff;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
/* EVERZEN TYPE2 HERO CONTENT */
/*
* Không chỉnh Title 2 / .text-decor.
* "Xanh" tiếp tục dùng nguyên quy tắc global.
*/
.section-banner__pages.type2-hero
.container
.ct-text
.title > .text {
flex: 0 0 auto;
}
/*
* Cả Nội dung + CTA:
* - rộng được JS gán = 70% Title 1
* - căn trái cùng Title 1
*/
.section-banner__pages.type2-hero
.type2-hero-body {
display: block;
max-width: 100%;
margin-left: 0;
box-sizing: border-box;
text-align: left;
}
/*
* Nội dung chiếm toàn bộ khối 70%.
*/
.section-banner__pages.type2-hero
.type2-hero-subtitle {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
text-align: center;
text-align-last: center;
white-space: normal;
overflow-wrap: break-word;
font-family: "Raleway", sans-serif;
font-weight: 500;
font-size: 1.125rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.90);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}
/*
* CTA nằm sau Nội dung
* và căn phải theo mép phải Nội dung.
*/
.section-banner__pages.type2-hero
.type2-hero-cta {
display: block;
width: 100%;
margin: 0.875rem 0 0;
padding: 0;
text-align: right;
}
.section-banner__pages.type2-hero
.type2-hero-cta .btn {
margin: 0;
font-family: "Univers Condensed", sans-serif;
font-weight: 700;
font-style: italic;
font-size: 1rem;
line-height: 1.2;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
color: #FFFFFF;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
}
/* EVERZEN TYPE2 HERO TYPO MOBILE */
@media (max-width: 767px) {
.section-banner__pages.type2-hero
.type2-hero-subtitle {
font-size: 0.875rem;
line-height: 1.5;
text-align: justify;
text-align-last: left;
}
.section-banner__pages.type2-hero
.type2-hero-cta .btn {
font-size: 0.9375rem;
}
}
/* ==========================================================
EVERZEN TYPE2 HERO RESPONSIVE 20261008
- Không chỉnh .text-decor / Title 2.
- Tablet: tăng line-height Title 1 + nâng toàn cụm.
- Mobile: ưu tiên hiển thị Xanh + Nội dung + CTA.
========================================================== */
/* ----------------------------------------------------------
TABLET
---------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 991px) {
/* TYPE2 HERO TABLET CONTENT SIZE */
.section-banner__pages.type2-hero
.type2-hero-subtitle {
font-size: 1rem;
text-align: justify;
text-align-last: left;
}
.section-banner__pages.type2-hero
.container
.ct-text {
width: 100%;
max-width: 100%;
min-width: 0;
/*
* Global hiện là -14px.
* Type2 nâng thêm để phần dưới thoáng mép Banner.
*/
transform: translateY(-32px);
}
.section-banner__pages.type2-hero
.container
.ct-text
.title {
width: 100%;
max-width: 100%;
min-width: 0;
}
.section-banner__pages.type2-hero
.container
.ct-text
.title > .text {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
white-space: normal;
/*
* Tăng line spacing Title 1.
*/
line-height: 1.20;
}
.section-banner__pages.type2-hero
.type2-hero-body {
max-width: 100%;
}
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 575px) {
/*
* main.css legacy ẩn page hero trên mobile.
*/
.section-banner__pages.type2-hero {
display: block;
}
.section-banner__pages.type2-hero
.container {
width: 100%;
max-width: 100%;
}
.section-banner__pages.type2-hero
.container
.ct-text {
width: 100%;
max-width: 100%;
/*
* Nâng mạnh toàn bộ cụm.
*
* Chấp nhận Title 1 chạy khỏi vùng nhìn thấy;
* ưu tiên Xanh + Nội dung + CTA.
*
* Không thay đổi rule riêng của Xanh.
*/
transform: translateY(-92px);
}
.section-banner__pages.type2-hero
.container
.ct-text
.title {
width: 100%;
max-width: 100%;
min-width: 0;
}
.section-banner__pages.type2-hero
.container
.ct-text
.title > .text {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
white-space: normal;
}
.section-banner__pages.type2-hero
.type2-hero-body {
max-width: 100%;
}
}
/* ==========================================================
EVERZEN TYPE2 PAGE BASE FONT 20261008
Mặc định toàn bộ nội dung Zen Learning = Raleway.
Các section cần font riêng sẽ override sau.
Ngoại lệ hiện tại:
- Banner Title 1
- Banner Title 2 / "Xanh"
========================================================== */
.type2-page--zen-learning {
font-family: "Raleway", sans-serif;
}
/*
* Một số CSS legacy đang ép Sitka / Ache / Verdana
* và thậm chí có !important.
*
* Vì vậy reset font-family trong phạm vi riêng của
* Zen Learning. Không tác động Header / Footer.
*
* Loại các phần tử thường dùng cho icon font.
*/
.type2-page--zen-learning
:where(
*:not(i):not(svg):not(path):not([class*="icon"]):not([class^="fa"]):not([class*=" fa-"])
) {
font-family: "Raleway", sans-serif !important;
}
/* Form / placeholder */
.type2-page--zen-learning input,
.type2-page--zen-learning textarea,
.type2-page--zen-learning select,
.type2-page--zen-learning button,
.type2-page--zen-learning input::placeholder,
.type2-page--zen-learning textarea::placeholder {
font-family: "Raleway", sans-serif !important;
}
/* ----------------------------------------------------------
BANNER EXCEPTIONS — đã chốt trước đó
---------------------------------------------------------- */
.type2-page--zen-learning
.section-banner__pages.type2-hero
.container
.ct-text
.title > .text {
font-family: "Univers Condensed", sans-serif !important;
}
.type2-page--zen-learning
.section-banner__pages.type2-hero
.container
.ct-text
.title > .text-decor {
font-family: "Dancing Script SVN", cursive !important;
}
/* ==========================================================
EVERZEN TYPE2 BASE TYPO SIZE WEIGHT 20261008
Áp dụng cho toàn bộ nội dung Zen Learning
SAU Banner.
Banner bị loại trừ hoàn toàn.
========================================================== */
/* Desktop */
.type2-page--zen-learning
:where(
> :not(.section-banner__pages),
> :not(.section-banner__pages) *
) {
font-size: 17px !important;
font-weight: 500 !important;
}
/* Tablet */
@media (max-width: 991px) {
.type2-page--zen-learning
:where(
> :not(.section-banner__pages),
> :not(.section-banner__pages) *
) {
font-size: 16px !important;
font-weight: 500 !important;
}
}
/* Mobile */
@media (max-width: 575px) {
.type2-page--zen-learning
:where(
> :not(.section-banner__pages),
> :not(.section-banner__pages) *
) {
font-size: 15px !important;
font-weight: 500 !important;
}
}
/* ==========================================================
EVERZEN TYPE2 DECOR DESKTOP ONLY 20261008
Quy ước chung:
- Decor chỉ xuất hiện Desktop
- Tablet + Mobile không render về mặt hiển thị
========================================================== */
@media (max-width: 991px) {
.type2-page--zen-learning .type2-decor {
display: none;
}
}
/* ==========================================================
EVERZEN TYPE2 INTRO TYPOGRAPHY 20261008
JUNIORS
- Kicker: Raleway 600 / Orange
- Main title: Raleway 600 / Dark neutral
- Accent title: Dancing Script SVN 400 / Orange
========================================================== */
/* -------------------------
DESKTOP
------------------------- */
/* Nhãn nhỏ / kicker */
.type2-page--zen-learning
.intro-summer.type2-intro
.title-all {
font-family: "Raleway", sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.35;
color: #E88400 !important;
}
/* Tiêu đề giới thiệu */
.type2-page--zen-learning
.intro-summer.type2-intro
.title-intro__all .title {
font-family: "Raleway", sans-serif !important;
font-size: 30px !important;
font-weight: 600 !important;
line-height: 1.25;
color: #263333 !important;
/* Cho Title chính lấy đủ chiều rộng tự nhiên trên Desktop */
flex: 0 0 auto;
max-width: none;
white-space: nowrap;
}
/* Tiêu đề nhấn */
.type2-page--zen-learning
.intro-summer.type2-intro
.title-intro__all .f-decor,
.type2-page--zen-learning
.intro-summer.type2-intro
.title-intro__all .text-decor {
font-family: "Dancing Script SVN", cursive !important;
font-size: 46px !important;
font-weight: 400 !important;
line-height: 1;
color: #E88400 !important;
}
/* -------------------------
TABLET
------------------------- */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.intro-summer.type2-intro
.title-all {
font-size: 14px !important;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.title-intro__all .title {
font-size: 26px !important;
flex: 1 1 auto;
max-width: 100%;
white-space: normal;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.title-intro__all .f-decor,
.type2-page--zen-learning
.intro-summer.type2-intro
.title-intro__all .text-decor {
font-size: 40px !important;
}
}
/* -------------------------
MOBILE
------------------------- */
@media (max-width: 575px) {
.type2-page--zen-learning
.intro-summer.type2-intro
.title-all {
font-size: 13px !important;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.title-intro__all .title {
font-size: 21px !important;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.title-intro__all {
justify-content: flex-start;
flex-wrap: wrap;
/* Hạ toàn bộ nội dung từ tiêu đề chính trở xuống */
margin-top: 48px;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.title-intro__all .f-decor,
.type2-page--zen-learning
.intro-summer.type2-intro
.title-intro__all .text-decor {
font-size: 34px !important;
/* Mobile: đưa tiêu đề nhấn sang trái, thành hàng riêng */
flex: 0 0 100%;
width: 100%;
margin-left: 0 !important;
margin-right: 0;
margin-top: 8px;
text-align: left;
transform: none;
}
}
/* ==========================================================
EVERZEN TYPE2 INTRO DESKTOP LAYOUT 20261008
Chỉ Desktop.
Row Intro luôn lấy chiều cao của bên thấp nhất:
- Ảnh có vùng chuẩn 420px
- Nội dung vẫn auto height
- Bên nào cao hơn sẽ quyết định chiều cao row
- Highlights luôn nằm sau row
========================================================== */
@media (min-width: 992px) {
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-main-image {
height: 420px;
transform: translateY(50px);
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-main-image img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center top;
}
}
/* ==========================================================
EVERZEN TYPE2 INTRO HIGHLIGHTS 20261008
Zen Learning MASTER
- Data động từ intro_highlights
- Layout không phụ thuộc số item
- Desktop: chia đều toàn chiều rộng container
- Tablet: 3 item / hàng, hàng cuối căn giữa
- Mobile: 2 item / hàng, item lẻ căn giữa
========================================================== */
/* ----------------------------------------------------------
DESKTOP
---------------------------------------------------------- */
/*
* Highlights dùng container riêng.
* Override legacy .intro-summer .container { margin-left: 0; }
* để tâm của toàn cụm trùng tâm viewport.
*/
.type2-page--zen-learning
.intro-summer.type2-intro
> .type2-intro-highlights-wrap {
margin-left: auto !important;
margin-right: auto !important;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlights {
display: grid;
grid-template-columns:
repeat(
var(--type2-intro-highlight-cols, 5),
minmax(0, 1fr)
);
column-gap: 32px;
row-gap: 36px;
width: 100%;
margin-top: 48px;
align-items: start;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight {
width: 90%;
min-width: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Icon / image box */
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__icon {
display: flex;
width: 110px;
height: 110px;
margin: 0 auto 18px;
align-items: center;
justify-content: center;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__icon img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Title */
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__title {
margin: 0 0 8px;
font-family: "Opensan", "Open Sans", sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
font-style: normal !important;
line-height: 1.35;
color: #263333 !important;
}
/* Content */
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__content,
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__content * {
font-family: "Raleway", sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
font-style: normal !important;
line-height: 1.5;
color: #4A5555 !important;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__content p {
margin: 0;
text-align: center !important;
}
/* ----------------------------------------------------------
TABLET
---------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlights {
/*
* 6 tracks:
* mỗi item chiếm 2 tracks = 3 item / hàng.
* Cho phép căn giữa hàng cuối 1 hoặc 2 item.
*/
grid-template-columns: repeat(6, minmax(0, 1fr));
column-gap: 18px;
row-gap: 30px;
margin-top: 36px;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight {
grid-column: span 2;
}
/*
* Hàng cuối có 2 item:
* đưa item đầu vào track 2 -> hai item nằm giữa.
*/
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight:nth-last-child(2):nth-child(3n + 1) {
grid-column: 2 / span 2;
}
/*
* Hàng cuối chỉ có 1 item.
*/
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight:last-child:nth-child(3n + 1) {
grid-column: 3 / span 2;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__icon {
width: 96px;
height: 96px;
margin-bottom: 16px;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__title {
font-size: 17px !important;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__content,
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__content * {
font-size: 15px !important;
}
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 575px) {
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlights {
/*
* 4 tracks:
* mỗi item span 2 = 2 item / hàng.
*/
grid-template-columns: repeat(4, minmax(0, 1fr));
column-gap: 12px;
row-gap: 26px;
margin-top: 32px;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight {
grid-column: span 2;
}
/*
* Nếu số item lẻ:
* item cuối nằm giữa hàng.
*/
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight:last-child:nth-child(odd) {
grid-column: 2 / span 2;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__icon {
width: 80px;
height: 80px;
margin-bottom: 12px;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__title {
margin-bottom: 6px;
font-size: 16px !important;
}
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__content,
.type2-page--zen-learning
.intro-summer.type2-intro
.type2-intro-highlight__content * {
font-size: 15px !important;
line-height: 1.45;
}
}
/* ==========================================================
EVERZEN TYPE2 INTRO DECOR 20261008
Asset trang trí dạng ngang / line art.
========================================================== */
.intro-summer {
position: relative;
overflow: hidden;
}
.intro-summer > .container {
position: relative;
z-index: 2;
}
.intro-summer .type2-intro-decor {
position: absolute;
top: 0;
right: 0;
width: 720px;
height: 210px;
max-width: 54vw;
z-index: 1;
pointer-events: none;
display: flex;
justify-content: flex-end;
align-items: flex-start;
overflow: hidden;
}
.intro-summer .type2-intro-decor__img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: top right;
}
/* Tablet */
@media (max-width: 991px) {
.intro-summer .type2-intro-decor {
width: 540px;
height: 165px;
max-width: 66vw;
}
}
/* Mobile */
@media (max-width: 575px) {
.intro-summer .type2-intro-decor {
width: 420px;
height: 135px;
max-width: 100vw;
}
}
.intro-summer .container {
margin-right: auto;
margin-left: 0;
padding-left: 0;
}
.intro-summer .image {
max-width: 30.875rem;
margin-left: 1.875rem;
}
.intro-summer .module-content {
padding-left: 3.125rem;
}
.intro-summer .module-content .title-intro__all {
padding-top: 0;
}
.intro-summer .module-content .title-intro__all .f-decor {
font-size: 4.375rem;
margin-left: 0;
margin-top: 0.9375rem;
}
.intro-summer .s-content {
padding-right: 7.8125rem;
}
.info-course__summer {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 3.125rem;
}
.info-course__summer .item {
max-width: 13.125rem;
}
.info-course__summer .item .s-content {
padding-right: 0;
}
.info-course__summer .item .s-content strong{
font-family: "Ache_Bold", sans-serif;
display: inline !important;
}
.info-course__summer .item .icon {
height: 7.3125rem;
}
.info-course__summer .item .icon img {
-o-object-fit: scale-down;
object-fit: scale-down;
}
/* ==========================================================
EVERZEN TYPE2 WHY TYPOGRAPHY 20261008
Zen Learning
Main title = Raleway / Dark
Accent = Dancing Script SVN / Orange
========================================================== */
/* WHY Decor - temporary safe placement */
.type2-page--zen-learning
.section-why__summer.type2-why {
position: relative;
}
.type2-page--zen-learning
.section-why__summer.type2-why
> .container {
position: relative;
z-index: 2;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-decor {
position: absolute;
top: 40px;
right: 30px;
width: clamp(120px, 12vw, 220px);
max-width: 18vw;
z-index: 5;
pointer-events: none;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-decor__img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
transform-origin: center right;
transform: scaleX(3) scaleY(2);
}
/*
* Theo quy ước Type2:
* decor chỉ hiện desktop.
*/
@media (max-width: 991px) {
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-decor {
display: none !important;
}
}
/* Section spacing */
.type2-page--zen-learning
.section-why__summer.type2-why {
padding-top: 70px;
padding-bottom: 48px;
}
/* ==========================================================
WHY SECTION DIVIDER
Minh họa nhẹ nhàng phù hợp Zen Learning:
máy bay giấy + đường bay + sparkle
========================================================== */
.type2-page--zen-learning
.section-why__summer.type2-why {
position: relative;
overflow: visible;
}
.type2-page--zen-learning
.section-why__summer.type2-why::before {
content: "";
position: absolute;
left: 50%;
top: -34px;
transform: translateX(-50%);
width: 340px;
height: 54px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url("data:image/svg+xml;utf8,\
");
opacity: 0.82;
pointer-events: none;
z-index: 3;
}
/* ----------------------------------------------------------
WHY BOTTOM JOURNEY SPROUT
Đường hành trình + mầm non
---------------------------------------------------------- */
.type2-page--zen-learning
.section-why__summer.type2-why::after {
content: "";
position: absolute;
left: 50%;
bottom: -17px;
width: 180px;
height: 44px;
transform: translateX(-50%);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,\
");
pointer-events: none;
z-index: 4;
}
/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.section-why__summer.type2-why::after {
width: 150px;
height: 38px;
bottom: -15px;
opacity: 0.92;
}
}
/* Mobile */
@media (max-width: 575px) {
.type2-page--zen-learning
.section-why__summer.type2-why::after {
width: 120px;
height: 30px;
bottom: -12px;
opacity: 0.88;
}
}
/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.section-why__summer.type2-why::before {
width: 280px;
height: 46px;
top: -28px;
opacity: 0.78;
}
}
/* Mobile */
@media (max-width: 575px) {
.type2-page--zen-learning
.section-why__summer.type2-why::before {
width: 210px;
height: 38px;
top: -20px;
opacity: 0.72;
}
}
/* Heading layout */
.type2-page--zen-learning
.section-why__summer.type2-why
.title-all {
display: flex;
align-items: baseline;
flex-wrap: wrap;
margin-left: 0;
padding-left: 0;
text-align: left;
margin-bottom: 28px !important;}
/* Main title */
.type2-page--zen-learning
.section-why__summer.type2-why
.title-all
.type2-why-title {
font-family: "Raleway", sans-serif !important;
font-size: 30px !important;
font-weight: 600 !important;
font-style: normal !important;
line-height: 1.25;
letter-spacing: 0 !important;
color: #263333 !important;
}
/* Accent title
Có thêm .title-all trong selector để thắng
page-wide Raleway reset đang dùng !important.
*/
.type2-page--zen-learning
.section-why__summer.type2-why
.title-all
.type2-why-title-decor {
display: inline-block;
margin-left: 12px;
font-family: "Dancing Script SVN", cursive !important;
font-size: 46px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1;
text-transform: none !important;
letter-spacing: 0 !important;
color: #E88400 !important;
transform: translateY(16px);
}
/* Description */
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description,
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description * {
font-family: "Raleway", sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
font-style: italic !important;
line-height: 1.65;
color: #4A5555 !important;
text-align: left !important;
text-align-last: left !important;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description {
max-width: 540px;
margin-top: 0;
margin-bottom: 42px;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description p:last-child {
margin-bottom: 0;
}
/* ==========================================================
WHY ITEMS
========================================================== */
/* List */
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-items {
margin: 0;
padding: 0;
list-style: none;
}
/* Item */
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item {
position: relative;
padding: 20px 0 20px 52px !important;
text-align: left !important;
}
/* Youthful orange sparkle */
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item::before {
content: "✦" !important;
position: absolute;
top: 17px;
left: 7px;
width: auto;
height: auto;
background: none !important;
font-family: Georgia, serif !important;
font-size: 30px;
font-weight: 400;
line-height: 1;
color: #E88400;
transform: rotate(-8deg);
}
/* Reason title */
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item__title {
margin: 0 0 6px;
font-family: "Opensan", "Open Sans", sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
font-style: normal !important;
line-height: 1.4;
color: #263333 !important;
text-align: left !important;
}
/* Reason content */
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item__content,
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item__content * {
text-align: left !important;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item__content p {
margin-top: 0;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item__content p:last-child {
margin-bottom: 0;
}
/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item {
padding: 14px 0 14px 46px !important;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item::before {
top: 12px;
left: 6px;
font-size: 26px;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item__title {
font-size: 17px !important;
}
}
/* Mobile */
@media (max-width: 575px) {
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item {
padding: 12px 0 12px 42px !important;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item::before {
top: 11px;
left: 5px;
font-size: 24px;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-item__title {
font-size: 16px !important;
}
}
/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.section-why__summer.type2-why
.title-all
.type2-why-title {
font-size: 26px !important;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.title-all
.type2-why-title-decor {
margin-left: 10px;
font-size: 40px !important;
transform: translateY(13px);
}
.type2-page--zen-learning
.section-why__summer.type2-why
.title-all {
margin-bottom: 24px !important;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description,
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description * {
font-size: 16px !important;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description {
margin-bottom: 36px;
}
.type2-page--zen-learning
.section-why__summer.type2-why {
padding-top: 50px;
}
}
/* Mobile */
@media (max-width: 575px) {
.type2-page--zen-learning
.section-why__summer.type2-why
.title-all
.type2-why-title {
font-size: 21px !important;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.title-all
.type2-why-title-decor {
flex: 0 0 auto;
width: auto;
margin-left: 8px;
margin-top: 0;
font-size: 34px !important;
text-align: left;
transform: translateY(11px);
}
.type2-page--zen-learning
.section-why__summer.type2-why
.title-all {
margin-bottom: 20px !important;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description,
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description * {
font-size: 15px !important;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description {
margin-bottom: 32px;
}
.type2-page--zen-learning
.section-why__summer.type2-why {
padding-top: 36px;
}
}
.section-why__summer {
padding-top: 9.375rem;
padding-bottom: 5rem;
}
.section-why__summer .title-all {
margin-bottom: 4.0625rem;
}
.section-why__summer .s-content {
max-width: 46.25rem;
}
.section-why__summer .s-content ul {
font-size: 1.0625rem;
color: #000;
line-height: 1.7;
list-style-type: none;
}
.section-why__summer .s-content ul li {
padding: 1.5625rem 0 1.5625rem 4.0625rem;
text-align: justify;
position: relative;
}
.section-why__summer .s-content ul li::before {
content: "";
width: 1.875rem;
height: 1.875rem;
background-image: url(../images/star-green.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 1.5625rem;
left: 0;
}
.section-why__summer .image {
max-width: 33.4375rem;
}
.section-why__summer .image img {
width: 100%;
}
.advantages-summer .title-all {
margin-bottom: 7.5rem;
position: relative;
}
.advantages-summer .title-all::before, .advantages-summer .title-all::after {
content: "";
width: 23.4375rem;
height: 11.4375rem;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 0;
}
/* ==========================================================
EVERZEN TYPE2 AUDIENCE HEADING + DESCRIPTION 20261008
Zen Learning = Dancing / Orange
Main title = Raleway / Dark
Description = same typography as WHY
KHONG DOI DU LIEU ADMIN
========================================================== */
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-headrow {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
column-gap: 14px;
width: 100%;
margin: 0 auto;
padding: 0;
}
/* Zen Learning */
html body
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-headrow
> .type2-audience-title.type2-audience-title {
flex: 0 0 auto;
font-family: "Dancing Script SVN", "Dancing Script", cursive !important;
font-size: 46px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1;
letter-spacing: 0 !important;
color: #E88400 !important;
}
/*
* Group này lấy chiều rộng theo Title 2.
* Description width:0 + min-width:100%
* giúp description KHÔNG làm group rộng thêm.
*/
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-main-group {
display: inline-grid;
grid-template-columns: max-content;
min-width: 0;
}
/* PHÙ HỢP VỚI NHỮNG GIA ĐÌNH NÀO? */
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-title-decor {
grid-column: 1;
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif !important;
font-size: 30px !important;
font-weight: 600 !important;
font-style: normal !important;
line-height: 1.25;
letter-spacing: 0 !important;
color: #263333 !important;
text-transform: none !important;
white-space: nowrap;
}
/* Description - format giống WHY */
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description,
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description * {
font-family: "Raleway", sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
font-style: italic !important;
line-height: 1.65;
color: #4A5555 !important;
text-align: left !important;
text-align-last: left !important;
}
/*
* Chính xác:
* - mép trái = mép trái Title 2
* - chiều rộng = chiều rộng Title 2
*/
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description {
grid-column: 1;
width: 0;
min-width: 100%;
margin-top: 28px;
margin-bottom: 42px;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description p:last-child {
margin-bottom: 0;
}
/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-title {
font-size: 40px !important;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-title-decor {
font-size: 26px !important;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description,
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description * {
font-size: 16px !important;
}
}
/* Mobile */
@media (max-width: 575px) {
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-headrow {
display: block;
text-align: left;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-title {
display: block;
width: 100%;
margin-bottom: 14px;
text-align: left !important;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-main-group {
display: block;
width: 100%;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-title-decor {
display: block;
width: 100%;
line-height: 1.45;
text-align: left !important;
white-space: normal;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-title {
font-size: 34px !important;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-title-decor {
font-size: 21px !important;
white-space: normal;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description,
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description * {
font-size: 15px !important;
}
}
/* ==========================================================
EVERZEN TYPE2 AUDIENCE ITEMS 20261008
Zen Learning
CHI FRONTEND CSS - KHONG DOI DATA ADMIN
========================================================== */
/* ----------------------------------------------------------
ITEM CONTENT
---------------------------------------------------------- */
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item
.advantages-content
.item {
padding: 0;
}
/* ----------------------------------------------------------
IMAGE
---------------------------------------------------------- */
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__image {
position: relative;
padding-top: 57%;
margin-bottom: 32px !important;
overflow: visible;
}
/*
* Khung nhẹ phía sau ảnh:
* một lớp cam rất nhạt, lệch nhẹ để tạo cảm giác trẻ,
* không biến thành card nặng.
*/
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__image::before {
content: "";
position: absolute;
top: 7px;
left: 7px;
right: -7px;
bottom: -7px;
border: 1px solid rgba(232, 132, 0, 0.18);
border-radius: 16px;
background: rgba(232, 132, 0, 0.08);
transform: rotate(0.7deg);
z-index: 0;
pointer-events: none;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__image img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 16px;
z-index: 1;
}
/* ----------------------------------------------------------
TITLE
---------------------------------------------------------- */
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__title {
position: relative;
margin: 0 0 12px;
padding-left: 20px;
font-family: "Opensan", "Open Sans", sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
font-style: normal !important;
line-height: 1.4;
letter-spacing: 0 !important;
color: #263333 !important;
text-transform: none !important;
}
/* Bỏ icon cờ legacy */
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__title::before {
content: "";
position: absolute;
left: 1px;
top: 0.58em;
width: 8px;
height: 8px;
border-radius: 50%;
background: #E88400;
transform: translateY(-50%);
}
/* ----------------------------------------------------------
DESCRIPTION
Desktop giữ đúng cỡ 17px hiện tại
---------------------------------------------------------- */
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__description,
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__description * {
font-family: "Raleway", sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
font-style: normal !important;
line-height: 1.65;
color: #4A5555 !important;
text-align: left !important;
text-align-last: left !important;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__description p:last-child {
margin-bottom: 0;
}
/* ----------------------------------------------------------
TABLET: 2 cột, item cuối lẻ căn giữa
---------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-items
> [class*="col-"] {
flex: 0 0 50%;
max-width: 50%;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-items
> [class*="col-"]:last-child:nth-child(odd) {
margin-left: auto;
margin-right: auto;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__image {
margin-bottom: 28px !important;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__title {
font-size: 17px !important;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__description,
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__description * {
font-size: 16px !important;
}
}
/* ----------------------------------------------------------
MOBILE: 1 cột
---------------------------------------------------------- */
@media (max-width: 575px) {
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-items
> [class*="col-"] {
flex: 0 0 100%;
max-width: 100%;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__image {
margin-bottom: 24px !important;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__image::before {
top: 5px;
left: 5px;
right: -5px;
bottom: -5px;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__title {
font-size: 17px !important;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__description,
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-item__description * {
font-size: 15px !important;
}
}
.advantages-summer .title-all::before {
background-image: url(../images/before-advantages.png);
left: 0;
}
.advantages-summer .title-all::after {
background-image: url(../images/after-advantages.png);
right: 0;
}
.item-advantages__summer .image {
position: relative;
padding-top: 57%;
}
.item-advantages__summer .image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: scale-down;
object-fit: scale-down;
}
.item-advantages__summer .advantages-content .item {
padding: 0 1.25rem;
}
.item-advantages__summer .advantages-content .item:not(:last-child) {
margin-bottom: 1.4375rem;
}
.item-advantages__summer .advantages-content .item .title {
position: relative;
padding-left: 2.1875rem;
margin-bottom: 0.625rem;
}
.item-advantages__summer .advantages-content .item .title::before {
content: "";
width: 1.4375rem;
height: 2.125rem;
background-image: url(../images/flag-green.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 0;
}
.item-advantages__summer .advantages-content .item .s-content {
line-height: 1.7;
}
.summer-group .title-all {
margin-bottom: 5.5rem;
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.summer-group .title-all::after {
content: "";
height: 12.625rem;
width: 15.125rem;
background-image: url(../images/kike-orange.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
bottom: 0;
-webkit-transform: translateY(50%);
transform: translateY(50%);
left: calc(100% + 35px);
}
.summer-group .item-group__content:not(:last-child) {
margin-bottom: 1.25rem;
}
.summer-group .item-group__content:not(:first-child) {
margin-bottom: 4.375rem;
}
.summer-group .item-group__content:not(:first-child) .title .text {
max-width: 67%;
}
.summer-group .item-group__content .title {
-webkit-box-flex: 0;
-ms-flex: 0 0 38%;
flex: 0 0 38%;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.summer-group .item-group__content .title .text-decor {
font-size: 3.2rem;
letter-spacing: 0.03em;
color: #f8b717;
margin-left: 1.875rem;
}
.summer-group .item-group__content .title .icon {
margin-left: -3.75rem;
margin-top: auto;
}
.summer-group .item-group__content .ct-content {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
line-height: 1.7;
max-width: 31.5rem;
}
.summer-group .item-group__content .ct-content .s-content {
padding-left: 1.875rem;
}
.summer-group .item-group__content .ct-content ul {
color: #000;
font-size: 1.0625rem;
}
.summer-group .item-group__content .ct-content ul li {
position: relative;
padding-left: 1.875rem;
}
.summer-group .item-group__content .ct-content ul li::before {
content: "";
width: 0.875rem;
height: 1.625rem;
background-image: url(../images/light-green.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: -4px;
left: 0;
}
.summer-group .button {
padding-right: 7.5rem;
}
.summer-group .read-more-intro {
bottom: 0;
right: 0;
z-index: 1;
}
#summer-group__tab {
margin-bottom: 3.75rem;
gap:15px;
}
#summer-group__tab .nav-item {
-webkit-box-flex: 1;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-bottom: 0.625rem;
}
#summer-group__tab .nav-item .nav-link {
background: none;
border: none;
outline: none;
color: #c4c4c4;
position: relative;
padding: 0 0 0.625rem 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#summer-group__tab .nav-item .nav-link:hover {
color: #2f8089;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#summer-group__tab .nav-item .nav-link::after {
content: "";
width: 100%;
height: 0.5rem;
background-image: url(../images/border-bottom.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
bottom: 0;
left: 0;
}
#summer-group__tab .nav-item .nav-link.active {
color: #2f8089;
}
#summer-group__tab .nav-item .nav-link.active::after {
background-image: url(../images/border-bottom-active-sm.png);
}
.result-summer .container {
position: relative;
}
.result-summer .title-all {
margin-bottom: 4.375rem;
}
.result-summer .image-before,
.result-summer .image-after {
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.item-result__summer {
max-width: 15rem;
margin-left: auto;
margin-right: auto;
}
.item-result__summer .img {
width: 11.75rem;
height: 11.75rem;
margin-left: auto;
margin-right: auto;
}
.item-result__summer .img img {
width: 100%;
height: 100%;
-o-object-fit: scale-down;
object-fit: scale-down;
}
.endow-summer .title-all {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
position: relative;
padding-left: 7.5rem;
}
.endow-summer .title-all::after {
content: "";
width: 2.6875rem;
height: 4.4375rem;
background-image: url(../images/flag-orange.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: calc(100% + 20px);
}
.endow-summer .image {
max-width: 33.4375rem;
}
.endow-summer .image img {
width: 100%;
}
.endow-summer .endow-content {
padding-left: 3.75rem;
}
.endow-summer .endow-content .head .price-sale {
-webkit-text-decoration-line: line-through;
text-decoration-line: line-through;
margin-bottom: 1.0625rem;
line-height: 1.1;
}
.endow-summer .endow-content .head .price {
font-size: 2.625rem;
line-height: 0.7;
}
.endow-summer .endow-content .head .discount {
width: 10.375rem;
height: 5.1875rem;
background-image: url(../images/bg-discount.png);
background-repeat: no-repeat;
background-size: cover;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.endow-summer .endow-content .head .discount .value {
font-size: 3.25rem;
margin-right: 2.8125rem;
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
position: relative;
line-height: 0.5;
}
.endow-summer .endow-content .head .discount .value::after {
content: "%";
font-family: "Ache_Bold", sans-serif;
font-size: 0.875rem;
color: #2f8089;
}
.endow-summer .endow-content .list-endow {
padding-right: 3.75rem;
}
.endow-summer .endow-content .list-endow li {
font-size: 1.0625rem;
color: #000;
line-height: 1.7;
position: relative;
padding-left: 4.0625rem;
}
.endow-summer .endow-content .list-endow li::before {
content: "";
width: 2.75rem;
height: 3.1875rem;
background-image: url(../images/box-summer.png);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
}
.endow-summer .endow-content .list-endow li:not(:last-child) {
margin-bottom: 1.875rem;
}
.endow-summer .form-regis__summer {
background: #fff8ed;
border: 3px solid #f0b84b;
border-radius: 15px;
padding: 1.5625rem 0.625rem 0.9375rem;
position: relative;
max-width: 27.5rem;
margin-left: auto;
margin-right: auto;
margin-top: 4.375rem;
}
.endow-summer .form-regis__summer .title {
margin-bottom: 0.9375rem;
}
.endow-summer .form-regis__summer .form-group__admin {
min-height: 3rem;
padding: 0.625rem 0.625rem 0.625rem 2.1875rem;
border-top: 1px solid #f0b84b;
position: relative;
}
.endow-summer .form-regis__summer .form-group__admin i {
position: absolute;
top: 50%;
right: 0.9375rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #f0b84b;
}
.endow-summer .form-regis__summer .form-group__admin .form-control,
.endow-summer .form-regis__summer .form-group__admin .select {
padding: 0;
border: none;
background: none;
border-radius: 0;
height: 100%;
color: rgba(0, 0, 0, 0.5);
font-size: 0.9375rem;
width: 100%;
font-family: "Sitka Text", sans-serif; font-weight: bold;
}
.endow-summer .form-regis__summer .form-group__admin .form-control::-webkit-input-placeholder, .endow-summer .form-regis__summer .form-group__admin .select::-webkit-input-placeholder {
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.5);
font-size: 0.9375rem;
text-transform: uppercase;
font-family: "Sitka Text", sans-serif; font-weight: bold;
}
.endow-summer .form-regis__summer .form-group__admin .form-control::-moz-placeholder, .endow-summer .form-regis__summer .form-group__admin .select::-moz-placeholder {
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.5);
font-size: 0.9375rem;
text-transform: uppercase;
font-family: "Sitka Text", sans-serif; font-weight: bold;
}
.endow-summer .form-regis__summer .form-group__admin .form-control:-ms-input-placeholder, .endow-summer .form-regis__summer .form-group__admin .select:-ms-input-placeholder {
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.5);
font-size: 0.9375rem;
text-transform: uppercase;
font-family: "Sitka Text", sans-serif; font-weight: bold;
}
.endow-summer .form-regis__summer .form-group__admin .form-control::-ms-input-placeholder, .endow-summer .form-regis__summer .form-group__admin .select::-ms-input-placeholder {
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.5);
font-size: 0.9375rem;
text-transform: uppercase;
font-family: "Sitka Text", sans-serif; font-weight: bold;
}
.endow-summer .form-regis__summer .form-group__admin .form-control::placeholder,
.endow-summer .form-regis__summer .form-group__admin .select::placeholder {
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.5);
font-size: 0.9375rem;
text-transform: uppercase;
font-family: "Sitka Text", sans-serif; font-weight: bold;
}
.endow-summer .form-regis__summer .form-group__admin textarea {
min-height: 3.75rem;
}
.endow-summer .form-regis__summer .form-group__admin .select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-transform: uppercase;
}
.place-meeting {
background: rgba(240, 184, 75, 0.3);
padding: 5rem 0 5rem 15.3125rem;
}
.place-meeting .image-before {
top: unset;
bottom: 0;
}
.place-meeting .title-all strong {
margin-bottom: 1.875rem;
}
.place-meeting .module-header .address {
position: relative;
padding-left: 3.75rem;
}
.place-meeting .module-header .address::before {
content: "";
width: 3.1875rem;
height: 1.875rem;
background-image: url(../images/before-text-address.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: -5px;
left: 0;
}
.place-meeting .module-header .address .text-decor {
font-size: 4.375rem;
color: #52C95E;
line-height: 1;
}
.slide-palce-meeting .image {
position: relative;
padding-top: 60%;
}
.slide-palce-meeting .image img {
position: absolute;
top: 0;
left: 0%;
width: 100%;
height: 100%;
}
.pagination-slide__menu {
text-align: center;
margin-top: 2.8125rem;
}
.pagination-group__summer .swiper-pagination-bullet,
.pagination-slide__menu .swiper-pagination-bullet {
background: rgba(15, 85, 65, 0.5);
}
.no-over-lay::before {
display: none;
}
.intro-camp-detail .image-after {
bottom: 0;
top: unset;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
.intro-camp-detail .image {
max-width: 39.0625rem;
margin-left: auto;
position: relative;
z-index: 1;
}
.intro-camp-detail .title-intro__all {
margin-bottom: 2.8125rem;
}
.intro-camp-detail .title-intro__all .text-decor {
font-size: 2.5rem;
margin-left: 0;
margin-top: 0.9375rem;
}
.intro-camp-detail .s-content {
max-width: 36.0625rem;
margin-right: auto;
}
.section-highlight__detail .module-header {
margin-bottom: 5rem;
padding-left: 8.4375rem;
}
.section-highlight__detail .module-header .text-decor {
font-size: 3.5rem;
line-height: 0.5;
}
.section-highlight__detail .module-header .title {
margin-top: 4.5rem;
margin-left: -3.125rem;
}
.item-highlight__summer {
max-width: 18.75rem;
margin-left: auto;
margin-right: auto;
}
.item-highlight__summer .icon {
width: 8rem;
height: 8rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 4.625rem;
}
.item-highlight__summer .icon img {
width: 100%;
height: 100%;
-o-object-fit: scale-down;
object-fit: scale-down;
}
.section-schedule__sm .title {
margin-bottom: 4.75rem;
}
.section-schedule__sm .title .text-decor {
font-size: 5.625rem;
margin-right: 1.875rem;
line-height: 0.5;
}
.section-schedule__sm .module-slide {
max-width: 27.0625rem;
margin-right: auto;
}
.section-schedule__sm .module-slide .list-note li {
color: #2f8089;
padding-left: 2rem;
position: relative;
}
.section-schedule__sm .module-slide .list-note li .circle {
width: 0.75rem;
height: 0.75rem;
border-radius: 100%;
display: block;
position: absolute;
top: 4px;
left: 0;
}
.section-schedule__sm .module-slide .btn-border__green {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: 15.625rem;
margin: 1.25rem 0;
border-radius: 2px solid #2f8089 !important;
color: #2f8089;
font-size: 1.125rem;
position: relative;
}
.section-schedule__sm .module-slide .btn-border__green::before {
content: "";
width: 2.375rem;
height: 1.0625rem;
background-image: url(../images/plane.png);
position: absolute;
top: 50%;
left: 15px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-repeat: no-repeat;
background-size: contain;
}
.section-schedule__sm .module-slide .btn-border__green:hover {
color: #fff;
}
.section-schedule__sm .module-slide .btn-border__green:hover::before {
-webkit-filter: brightness(10);
filter: brightness(10);
}
.section-schedule__sm .table-sche {
max-width: 55.9375rem;
margin-left: auto;
}
.section-schedule__sm .table-sche .item:not(:last-child) {
border-bottom: 2px solid #2f8089;
}
.section-schedule__sm .table-sche .item .title-table {
-webkit-box-flex: 0;
-ms-flex: 0 0 11.25rem;
flex: 0 0 11.25rem;
}
.section-schedule__sm .table-sche .item .content-table {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
border-left: 2px solid #2f8089;
}
.section-schedule__sm .table-sche .item .content-table ul li:not(.nav-item) {
padding: 0.625rem 1.875rem;
}
.section-schedule__sm .table-sche .item .content-table ul li:not(.nav-item):not(:last-child) {
border-bottom: 2px solid #2f8089;
}
#sche-tab {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: flex-start;
padding-left: 1.875rem;
}
#sche-tab .nav-item:not(:last-child){
margin-right: 20px;
}
#sche-tab .nav-item .nav-link {
padding: 0;
background: unset;
border: unset;
color: #000;
opacity: 0.3;
text-transform: uppercase;
font-size: 1.4375rem;
font-family: "Sitka Text", sans-serif; font-weight: bold;
}
#sche-tab .nav-item .nav-link.active {
color: #2f8089;
opacity: 1;
}
.slide-schedule .image {
max-height: 36.0625rem;
border-radius: 0;
}
.pagination-slide__sche,
.pagination-slide__menu {
text-align: center;
margin: 3.4375rem 0 1.875rem;
}
.pagination-slide__sche .swiper-pagination-bullet,
.pagination-slide__menu .swiper-pagination-bullet {
width: 0.625rem;
height: 0.625rem;
margin: 0 7px;
background: rgba(15, 85, 66, 0.5);
}
.pagination-slide__sche .swiper-pagination-bullet-active,
.pagination-slide__menu .swiper-pagination-bullet-active {
background: #094A25;
}
.item-main__activity {
max-width: 20.3125rem;
margin-left: auto;
margin-right: auto;
}
.item-main__activity .title{
margin-bottom:0.938rem;
}
.item-main__activity .image {
position: relative;
padding-top: 132.8%;
}
.item-main__activity .image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.advantages-summer.coach .title-all {
margin-bottom: 5.625rem;
}
.advantages-summer.coach .image-after {
top: 50%;
right: 5.625rem;
}
.item-coach {
max-width: 20.0625rem;
margin-left: auto;
margin-right: auto;
}
.item-coach .name {
position: relative;
padding-left: 0.9375rem;
}
.item-coach .name::before {
content: "";
width: 2.75rem;
height: 3.3125rem;
background-image: url(../images/flag-coach.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.item-coach .subject {
padding-left: 0.9375rem;
}
.item-coach .img {
position: relative;
padding-top: 97%;
}
.item-coach .img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: scale-down;
object-fit: scale-down;
}
.item-coach .info-detail {
position: relative;
padding-left: 25px;
}
.item-coach .info-detail::before {
content: "";
width: 1.625rem;
height: 1.3125rem;
background-image: url(../images/pen-green.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 0;
}
.item-coach .info-detail li {
font-size: 1.0625rem;
padding: 4px 0;
position: relative;
padding-left:1.25rem;
}
.item-coach .info-detail li::before {
content: "";
width: 0.75rem;
height: 0.375rem;
background-image: url(../images/Vector79.png);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 15px;
left: 0;
}
.program-summer .col{
flex: 0 0 20%;
}
.program-summer .col:nth-child(2n) .item-program__sm {
margin-top: 80px;
}
.program-summer .image-before {
top: 5.625rem;
}
.program-summer .title-all {
margin-bottom: 7.0625rem;
position: relative;
}
.program-summer .title-all::after {
content: "";
width: 23.4375rem;
height: 11.4375rem;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 0;
right: 0;
background-image: url(../images/before-advantages.png);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.item-program__sm{
background: #2F8089;
border-radius:10px 10px 0 0;
overflow: hidden;
}
.item-program__sm .s-content{
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 5;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.item-program__sm .img {
position: relative;
padding-top: 100%;
}
.item-program__sm .img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.item-program__sm .ct-text {
width: 100%;
color: #fff8ed;
padding: 10px 25px;
z-index: 1;
}
.item-program__sm .ct-text .title:hover{
color:#f0b84b;
}
.item-program__sm .ct-text .text-decor {
font-size: 3.125rem;
line-height: 0.9;
}
.menu-summer {
background: rgba(234, 200, 110, 0.1);
padding-bottom: 9.375rem !important;
}
.menu-summer .title-all {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
position: relative;
padding: 0 1.5625rem;
}
.menu-summer .title-all::before {
content: "";
height: 8px;
width: 31%;
background-image: url(../images/wave-green.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 10px;
right: 100%;
}
.menu-summer .title-all::after {
content: "";
height: 8px;
width: 31%;
background-image: url(../images/wave-green.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 10px;
left: 100%;
}
.menu-summer .title-all .wave-1::before {
content: "";
height: 8px;
width: 60%;
background-image: url(../images/wave-orange.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 25px;
right: 100%;
}
.menu-summer .title-all .wave-1::after {
content: "";
height: 8px;
width: 60%;
background-image: url(../images/wave-orange.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 25px;
left: 100%;
}
.menu-summer .list-note__menu {
margin-bottom: 2.0625rem;
}
.menu-summer .list-note__menu li {
font-family: "Verdana", sans-serif;
font-style: italic;
font-size: 1.0625rem;
color: #000;
position: relative;
padding-left: 1.875rem;
}
.menu-summer .list-note__menu li::before {
content: "";
width: 1.125rem;
height: 1.125rem;
background-image: url(../images/star-green.png);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 4px;
left: 0;
}
.menu-summer .list-note__menu li:not(:last-child) {
margin-bottom: 0.3125rem;
}
.menu-summer .btn-border__green {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-right: auto;
border: 2px solid #2f8089;
color: #2f8089;
}
.menu-summer .btn-border__green:hover {
background: #2f8089;
}
.menu-summer .btn-border__green:hover img {
-webkit-filter: brightness(10);
filter: brightness(10);
}
.menu-summer .slide-menu .image {
max-height: unset !important;
}
.menu-summer .image-before {
top: 2.1875rem;
z-index: 2;
}
.menu-summer .image-after {
top: unset;
bottom: 0;
}
.menu-summer .image-before__bottom {
bottom: 0;
left: 0;
position: absolute;
}
.intro-camp-detail .title-intro__all {
padding-top: 0;
}
.section-highlight__detail .col {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
}
.section-schedule__sm .image-before {
left: -16%;
top: 6%;
}
.slide-menu .image img {
-o-object-fit: scale-down;
object-fit: scale-down;
}
.slide-benefit-joy .swiper-wrapper{
justify-content: center !important;
}
@media (min-width: 1400px) {
.intro-summer .container {
max-width: 1350px !important;
}
.advantages-summer .container {
max-width: 1470px !important;
}
.endow-summer .container {
max-width: 1600px !important;
}
.section-highlight__detail .container {
max-width: 1680px !important;
}
.menu-summer .container {
max-width: 1700px !important;
}
}
@media (min-width: 1200px) {
.result-summer .container {
max-width: 1600px !important;
}
.program-summer .container{
max-width: 1740px !important;
}
}
@media (max-width: 1600px) {
.intro-summer .image-after img {
max-width: 70%;
}
.place-meeting .image-before {
text-align: left;
}
.place-meeting .image-before img {
max-width: 80%;
}
.endow-summer .endow-content .head .price-sale {
font-size: 1.5625rem;
}
.endow-summer .endow-content .head .price {
font-size: 1.875rem;
}
.item-highlight__summer .icon {
margin-bottom: 1.875rem;
width: 5rem;
height: 5rem;
}
.section-schedule__sm .image-before img {
max-width: 70%;
}
}
@media (max-width: 1199px) {
.intro-summer .image-after img {
max-width: 35%;
}
.intro-summer .module-content {
padding-left: 0;
}
.intro-summer .container {
margin-left: auto;
padding-left: 0.9375rem;
}
.section-why__summer .title-all {
margin-bottom: 1.875rem;
}
.section-why__summer {
padding-top: 5rem;
padding-bottom: 2.5rem;
}
#summer-group__tab .nav-item .nav-link .eng {
font-size: 1.25rem;
}
.summer-group .item-group__content .title .text-decor {
font-size: 4.375rem;
}
.summer-group .item-group__content .title .icon {
margin-left: -0.9375rem;
}
.endow-summer .title-all,
.endow-summer .endow-content {
padding-left: 0;
}
.place-meeting {
padding-left: 1.875rem;
}
.intro-camp-detail .title-all {
margin-bottom: 0.9375rem;
}
.intro-camp-detail .title-intro__all {
margin-bottom: 1.25rem;
}
.section-highlight__detail .col {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
}
.item-main__activity .image {
margin-bottom: 0.9375rem;
}
.item-main__activity .title {
margin-bottom: 0.9375rem;
}
.item-coach .info-detail li {
font-size: 0.875rem;
}
.menu-summer .title-all::before,
.menu-summer .title-all::after {
top: 4px;
}
.menu-summer .title-all .wave-1::before,
.menu-summer .title-all .wave-1::after {
top: 17px;
}
#sche-tab {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
#sche-tab .nav-item {
margin-right: 0.9375rem;
}
.program-summer .col{
flex: 0 0 25%;
}
}
@media (max-width: 991px) {
.slide-benefit-joy .swiper-wrapper{
justify-content: flex-start !important;
}
.item-program__sm{
height:100%;
}
.intro-summer .image {
margin-left: auto;
margin-right: auto;
}
.head-joy__summer .title-all {
margin-bottom: 1.25rem;
}
.intro-summer .s-content {
padding-right: 0;
}
.section-why__summer {
padding: 1.875rem 0;
}
.section-why__summer .s-content ul li {
padding: 0.625rem 0.625rem 0.625rem 2.5rem;
}
.section-why__summer .s-content ul li::before {
top: 0.625rem;
}
.section-why__summer .image {
margin-left: auto;
margin-right: auto;
}
.advantages-summer .title-all::before,
.advantages-summer .title-all::after {
display: none;
}
.advantages-summer .title-all {
margin-bottom: 1.875rem;
}
#summer-group__tab .nav-item .nav-link .eng {
font-size: 1.125rem;
}
.summer-group .item-group__content:not(:first-child) {
margin-bottom: 1.875rem;
}
.place-meeting .title-all strong {
margin-bottom: 1.25rem;
}
.slide-palce-meeting {
margin-top: 1.25rem;
}
.info-course__summer {
margin-top: 1.875rem;
}
.section-highlight__detail .col {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.33%;
flex: 0 0 33.33%;
}
.section-schedule__sm .module-slide {
margin-left: auto;
max-width: 100%;
}
.slide-schedule .image {
max-height: unset;
}
#sche-tab .nav-item .nav-link {
font-size: 1rem;
}
.section-schedule__sm .table-sche .item .title-table .text {
font-size: 1rem;
}
.summer-group .title-all .fz-36 {
font-size: 1.3125rem;
}
.main-activity__summer .col:nth-child(2n) .item-main__activity {
margin-top: 0;
}
.advantages-summer.coach .title-all,
.program-summer .title-all {
margin-bottom: 1.875rem;
}
.program-summer .title-all::after {
display: none;
}
.menu-summer {
padding-bottom: 1.875rem !important;
}
.endow-summer .form-regis__summer {
margin-top: 0;
}
.endow-summer .form-regis__summer {
max-width: 100%;
}
.program-summer .col:nth-child(2n) .item-program__sm{
margin-top: 0;
}
.program-summer .col{
flex: 0 0 33.33%;
}
.item-program__sm .ct-text .text-decor{
font-size: 35px;
}
.intro-summer .image{
margin-bottom:1.25rem;
}
}
@media (max-width: 767px) {
.section-why__summer .s-content ul li {
font-size: 0.875rem;
}
.section-why__summer .s-content ul li::before {
width: 1.25rem;
height: 1.25rem;
}
.summer-group .item-group__content .title .text {
font-size: 1rem;
}
.summer-group .item-group__content .title .text-decor {
font-size: 2.2rem;
margin-left: 0.9375rem;
}
.summer-group .item-group__content .ct-content ul li {
font-size: 0.875rem;
}
.intro-camp-detail .image-after {
display: none;
}
.section-highlight__detail {
padding-top: 1.25rem;
}
.section-highlight__detail .module-header .text-decor {
font-size: 4.0625rem;
}
.section-highlight__detail .module-header .title {
margin-top: 2.1875rem;
}
.section-highlight__detail .module-header,
.section-schedule__sm .title,
.summer-group .title-all {
margin-bottom: 1.875rem;
}
.section-highlight__detail .col {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
}
.section-schedule__sm .title .text-decor {
font-size: 2.5rem;
margin-right: 0.9375rem;
}
.pagination-slide__sche {
margin: 1.25rem 0;
}
.section-schedule__sm .table-sche .item .title-table {
-webkit-box-flex: 0;
-ms-flex: 0 0 7.5rem;
flex: 0 0 7.5rem;
}
#sche-tab {
padding-left: 0.9375rem;
}
.section-schedule__sm .table-sche .item .content-table ul li:not(.nav-item) {
padding: 0.625rem 0.9375rem;
}
#sche-tab .nav-item .nav-link,
.section-schedule__sm .table-sche .item .title-table .text {
font-size: 0.875rem;
}
.item-program__sm .ct-text {
padding: 0.9375rem;
}
.item-program__sm .ct-text .text-decor {
font-size: 2.5rem !important;
}
.section-highlight__detail .module-header {
padding-left: 0;
}
.place-meeting .module-header .address .text-decor {
font-size: 2.5rem;
}
.item-coach .name::before {
top: 6px;
}
.program-summer .col{
flex: 0 0 50%;
}
.summer-group .title-all::after{
height:150px;
width:150px;
}
}
@media (max-width: 575px) {
/* EVERZEN TYPE2 INTRO MOBILE IMAGE 20261008 */
.type2-page--zen-learning
.intro-summer.type2-intro
.image {
width: 70%;
max-width: 70%;
/*
* Giữ nguyên kích thước ảnh đã chốt,
* nhưng thu chiều cao vùng ảnh trên mobile.
*/
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 28px;
}
.intro-summer .module-content .title-intro__all .f-decor {
font-size: 2rem;
}
.info-course__summer .item {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: unset;
}
.summer-group .item-group__content .title {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
margin-bottom: 0.9375rem;
}
.summer-group .item-group__content .title .icon {
display: none;
}
.summer-group .button {
padding-right: 2.8125rem;
}
.item-result__summer {
max-width: unset;
}
.result-summer .title-all {
margin-bottom: 1.875rem;
}
.endow-summer .endow-content .head .discount .value {
font-size: 2.1875rem;
margin-right: 1.5625rem;
}
.endow-summer .endow-content .head .discount {
width: 8.125rem;
height: 4.0625rem;
}
.endow-summer .endow-content .head .price-sale {
font-size: 1.125rem;
margin-bottom: 0.625rem;
}
.endow-summer .endow-content .head .price {
font-size: 1.5625rem;
}
.endow-summer .endow-content .list-endow {
padding-right: 0;
}
.place-meeting {
padding-left: 0.9375rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.place-meeting .module-header .address .text-decor {
font-size: 2.2rem;
margin-left: 10px;
}
.endow-summer .form-regis__summer .form-group__admin .form-control::-webkit-input-placeholder {
font-size: 0.875rem;
}
.endow-summer .form-regis__summer .form-group__admin .form-control::-moz-placeholder {
font-size: 0.875rem;
}
.endow-summer .form-regis__summer .form-group__admin .form-control:-ms-input-placeholder {
font-size: 0.875rem;
}
.endow-summer .form-regis__summer .form-group__admin .form-control::-ms-input-placeholder {
font-size: 0.875rem;
}
.endow-summer .form-regis__summer .form-group__admin .form-control::placeholder {
font-size: 0.875rem;
}
.section-highlight__detail .module-header .text-decor {
font-size: 2.5rem;
}
.section-highlight__detail .module-header .title {
font-size: 1.125rem;
}
.section-highlight__detail .col {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
}
.section-schedule__sm .table-sche .item .title-table {
-webkit-box-flex: 0;
-ms-flex: 0 0 6.25rem;
flex: 0 0 6.25rem;
}
#sche-tab {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
#sche-tab li {
margin: 5px;
}
.pagination-slide__sche,
.pagination-slide__menu {
margin: 1.25rem 0;
}
.summer-group .title-all::after {
-webkit-transform: translateY(50%) scale(0.6);
transform: translateY(50%) scale(0.6);
left: 100%;
}
#summer-group__tab .nav-item .nav-link {
margin-left: auto;
margin-right: auto;
}
.summer-group .button {
padding-right: 0;
}
.summer-group .button .read-more-intro::before {
left: unset;
right: 0;
width: 5rem;
height: 1.25rem;
top: 100%;
}
.program-summer .col{
flex: 0 0 100%;
}
.endow-summer .title-all::after{
height:43px;
top:-9px;
}
.place-meeting .title-all strong,.place-meeting .title-all span{
display:inline !important;
}
.place-meeting .module-header .address{
display:flex;
}
.intro-summer .image,.section-why__summer .image{
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.item-advantages__summer .image{
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.info-course__summer .item .icon{
height:3.75rem;
}
}
/* ==========================================================
EVERZEN TYPE2 INTRO DECOR SIZE OVERRIDE 20261008
- Desktop: rộng +15%, cao x2
- Tablet + Mobile: ẩn hoàn toàn
========================================================== */
@media (min-width: 992px) {
.type2-page--zen-learning .type2-intro-decor {
overflow: visible;
}
.type2-page--zen-learning .type2-intro-decor img {
display: block;
transform-origin: top right;
transform: scaleX(1.15) scaleY(2);
}
}
@media (max-width: 991px) {
.type2-page--zen-learning .type2-intro-decor,
.type2-page--zen-learning .type2-intro-decor img {
display: none !important;
}
}
/* ==========================================================
EVERZEN TYPE2 PROGRAMS DECOR 20261008
Zen Learning
- Góc trên phải section
- Rộng 1/4 viewport
- Không chiếm layout
- Có thể overlap nội dung
========================================================== */
.type2-page--zen-learning
.summer-group.type2-programs {
position: relative;
overflow: visible;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-decor {
position: absolute;
top: 0;
right: 0;
width: 25vw;
height: auto;
z-index: 5;
pointer-events: none;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-decor__img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
/* Không để decor làm thay đổi stacking/layout của content */
.type2-page--zen-learning
.summer-group.type2-programs
> .container {
position: relative;
z-index: 2;
}
/* ==========================================================
EVERZEN TYPE2 PROGRAMS HEADING 20261008
Type 2 standard:
programs_title = Raleway / Dark
programs_title_decor = Dancing / Orange
========================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading {
display: flex;
align-items: baseline;
flex-wrap: wrap;
column-gap: 14px;
row-gap: 6px;
width: auto;
margin: 0 0 28px;
padding: 0;
text-align: left;
color: #263333 !important;
}
/* Bỏ toàn bộ decor legacy gắn vào title */
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading::before,
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading::after {
content: none !important;
display: none !important;
background: none !important;
}
/* Tiêu đề chính */
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading
.type2-programs-title {
display: inline-block;
font-family: "Raleway", sans-serif !important;
font-size: 30px !important;
font-weight: 600 !important;
font-style: normal !important;
line-height: 1.25;
letter-spacing: 0 !important;
color: #263333 !important;
text-transform: none !important;
}
/* Tiêu đề nhấn */
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading
.type2-programs-title-decor {
display: inline-block;
font-family: "Dancing Script SVN", "Dancing Script", cursive !important;
font-size: 46px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1;
letter-spacing: 0 !important;
color: #E88400 !important;
text-transform: none !important;
transform: translateY(10px);
}
/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading
.type2-programs-title {
font-size: 26px !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading
.type2-programs-title-decor {
font-size: 40px !important;
transform: translateY(8px);
}
}
/* Mobile */
@media (max-width: 575px) {
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading {
display: block;
margin-bottom: 24px;
text-align: left;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading
.type2-programs-title {
display: block;
width: 100%;
font-size: 21px !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading
.type2-programs-title-decor {
display: block;
width: 100%;
margin-top: 10px;
font-size: 34px !important;
transform: none;
}
}
/* ==========================================================
EVERZEN TYPE2 PROGRAMS DESCRIPTION 20261008
========================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description {
width: 100%;
max-width: 600px;
margin: 0 0 34px;
padding: 0;
font-family: "Raleway", sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
font-style: normal !important;
line-height: 1.65;
color: #4A5555 !important;
text-align: left !important;
text-align-last: left !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description,
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description * {
font-family: "Raleway", sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
font-style: normal !important;
line-height: 1.65;
color: #4A5555 !important;
text-align: left !important;
text-align-last: left !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description p {
margin: 0;
}
/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description {
max-width: 88%;
margin-bottom: 30px;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description,
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description * {
font-size: 16px !important;
}
}
/* Mobile */
@media (max-width: 575px) {
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description {
max-width: 100%;
margin-bottom: 26px;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description,
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description * {
font-size: 15px !important;
}
}
/* ==========================================================
EVERZEN TYPE2 PROGRAMS DESCRIPTION ICON 20261008
Compass / exploration
========================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description {
position: relative;
padding-left: 30px;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 19px;
height: 19px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,\
");
opacity: 0.88;
}
/* Mobile */
@media (max-width: 575px) {
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description {
padding-left: 26px;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-description::before {
top: 3px;
width: 17px;
height: 17px;
}
}
/* ==========================================================
EVERZEN TYPE2 PROGRAMS HEADING UNDERLINE 20261008
Nét vẽ tay nhẹ dưới heading
========================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading {
position: relative;
padding-bottom: 18px;
}
/* Giữ ::before legacy bị tắt */
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading::before {
content: none !important;
display: none !important;
}
/* Nét gạch nhẹ */
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading::after {
content: "" !important;
display: block !important;
position: absolute;
left: 0;
bottom: 0;
width: 160px;
height: 9px;
background: none !important;
background-image: url("data:image/svg+xml;utf8,\
") !important;
background-repeat: no-repeat !important;
background-position: left center !important;
background-size: 100% 100% !important;
opacity: 0.58;
transform: none !important;
pointer-events: none;
}
/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading::after {
width: 140px;
}
}
/* Mobile */
@media (max-width: 575px) {
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading {
padding-bottom: 15px;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-heading::after {
width: 110px;
height: 7px;
}
}
/* ==========================================================
ZEN JUNIORS — PROGRAMS MODERN 2026
========================================================== */
.type2-programs-modern {
position: relative;
padding-top: 5rem;
padding-bottom: 6rem;
overflow: hidden;
background: #fff;
}
.type2-programs-modern__heading {
text-align: center;
max-width: 850px;
margin: 0 auto 2.75rem;
}
.type2-programs-modern__title {
margin: 0;
color: #245C57;
font-family: "Raleway", sans-serif;
font-size: 2.2rem;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
}
.type2-programs-modern__title-decor {
margin-top: .35rem;
color: #E88400;
font-family: "Dancing Script SVN", cursive;
font-size: 3.2rem;
line-height: 1;
}
.type2-programs-modern__description {
margin: 1.15rem auto 0;
max-width: 760px;
color: #245C57;
font-size: 1rem;
line-height: 1.75;
}
.type2-programs-modern__tabs-wrap {
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 2.75rem;
scrollbar-width: none;
}
.type2-programs-modern__tabs-wrap::-webkit-scrollbar {
display: none;
}
.type2-programs-modern__tabs {
display: flex;
justify-content: center;
align-items: stretch;
gap: 2.25rem;
min-width: max-content;
}
.type2-programs-modern__tab {
position: relative;
display: inline-flex;
align-items: center;
gap: .55rem;
padding: 0 0 .85rem;
border: 0;
background: transparent;
color: #245C57;
cursor: pointer;
font-family: "Raleway", sans-serif;
text-align: left;
transition:
color .25s ease,
opacity .25s ease;
}
.type2-programs-modern__tab-number {
color: #E88400;
font-size: .75rem;
font-weight: 700;
line-height: 1;
}
.type2-programs-modern__tab-title {
font-size: .96rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.type2-programs-modern__tab::after {
content: "";
position: absolute;
left: 0;
right: auto;
bottom: 0;
width: 0;
height: 2px;
background: #E88400;
transition: width .25s ease;
}
.type2-programs-modern__tab:hover {
color: #E88400;
}
.type2-programs-modern__tab.is-active {
color: #E88400;
}
.type2-programs-modern__tab.is-active::after {
width: 100%;
}
.type2-programs-modern__content {
position: relative;
}
.type2-program-showcase {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
gap: 4.5rem;
align-items: center;
max-width: 1180px;
margin: 0 auto;
}
.type2-program-showcase__content {
padding: .5rem 0;
}
.type2-program-showcase__tagline {
margin-bottom: .6rem;
color: #E88400;
font-size: .82rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.type2-program-showcase__title {
margin: 0;
color: #245C57;
font-family: "Raleway", sans-serif;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.15;
}
.type2-program-showcase__line {
width: 52px;
height: 2px;
margin: 1.15rem 0 1.35rem;
background: #E88400;
}
.type2-program-showcase__description {
max-width: 650px;
color: #245C57;
font-size: 1rem;
line-height: 1.75;
}
.type2-program-showcase__description p:last-child {
margin-bottom: 0;
}
.type2-program-showcase__highlights {
margin-top: 1.7rem;
}
.type2-program-showcase__highlights-label {
margin-bottom: .75rem;
color: #245C57;
font-size: .88rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.type2-program-showcase__highlights ul {
margin: 0;
padding: 0;
list-style: none;
}
.type2-program-showcase__highlights li {
position: relative;
padding-left: 1.35rem;
margin-bottom: .65rem;
color: #245C57;
font-size: .96rem;
line-height: 1.55;
}
.type2-program-showcase__highlights li::before {
content: "";
position: absolute;
top: .65em;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: #E88400;
transform: translateY(-50%);
}
.type2-program-showcase__meta {
display: flex;
flex-wrap: wrap;
gap: 1.15rem 2rem;
margin-top: 1.7rem;
}
.type2-program-showcase__meta-item {
display: inline-flex;
align-items: center;
gap: .45rem;
color: #245C57;
font-size: .92rem;
line-height: 1.4;
}
.type2-program-showcase__meta-icon {
color: #E88400;
font-size: 1.15rem;
line-height: 1;
}
.type2-program-showcase__cta {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 2rem;
color: #E88400;
font-size: .92rem;
font-weight: 700;
text-decoration: none;
transition: gap .25s ease;
}
.type2-program-showcase__cta:hover {
gap: .8rem;
color: #E88400;
text-decoration: none;
}
.type2-program-showcase__media {
position: relative;
overflow: visible;
}
.type2-program-showcase__media::after {
content: "";
position: absolute;
right: -10px;
bottom: -10px;
width: 55%;
height: 55%;
border-right: 2px solid rgba(232, 132, 0, .55);
border-bottom: 2px solid rgba(232, 132, 0, .55);
pointer-events: none;
}
.type2-program-showcase__image {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 12px;
}
.type2-program-showcase__counter {
max-width: 1180px;
margin: 1.4rem auto 0;
color: #245C57;
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
}
.type2-program-showcase__counter span {
margin: 0 .2rem;
color: #E88400;
}
@media (max-width: 991px) {
.type2-programs-modern {
padding-top: 3.75rem;
padding-bottom: 4.5rem;
}
.type2-programs-modern__tabs {
justify-content: flex-start;
gap: 1.5rem;
padding: 0 .25rem;
}
.type2-program-showcase {
grid-template-columns: 1fr;
gap: 2rem;
}
.type2-program-showcase__media {
order: -1;
}
.type2-program-showcase__title {
font-size: 2rem;
}
.type2-program-showcase__counter {
margin-top: 1rem;
}
}
@media (max-width: 575px) {
.type2-programs-modern {
padding-top: 3rem;
padding-bottom: 3.5rem;
}
.type2-programs-modern__title {
font-size: 1.7rem;
}
.type2-programs-modern__title-decor {
font-size: 2.55rem;
}
.type2-programs-modern__description {
font-size: .92rem;
}
.type2-programs-modern__tabs-wrap {
margin-bottom: 2rem;
}
.type2-programs-modern__tab-number {
font-size: .68rem;
}
.type2-programs-modern__tab-title {
font-size: .86rem;
}
.type2-program-showcase {
gap: 1.5rem;
}
.type2-program-showcase__title {
font-size: 1.65rem;
}
.type2-program-showcase__description,
.type2-program-showcase__highlights li {
font-size: .9rem;
}
.type2-program-showcase__meta {
gap: .75rem 1.25rem;
}
.type2-program-showcase__meta-item {
font-size: .84rem;
}
.type2-program-showcase__image {
aspect-ratio: 4 / 3;
border-radius: 9px;
}
.type2-program-showcase__media::after {
right: -6px;
bottom: -6px;
}
}
/* ==========================================================
ZEN JUNIORS — PROGRAMS
VISUAL V6 — CAMP BACKGROUND
========================================================== */
@media (min-width: 992px) {
/* ======================================================
MAIN LAYOUT
====================================================== */
.zen-learning-program-showcase {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 1180px;
margin: -20px auto 0;
gap: 5rem;
}
/* ======================================================
INFORMATION PANEL
====================================================== */
.zen-learning-program-showcase__content {
position: relative;
flex: 1 1 auto;
min-width: 0;
padding: 2rem 2.35rem 1.75rem;
overflow: hidden;
border-radius: 30px 10px 30px 10px;
background:
radial-gradient(
circle at 8% 14%,
rgba(255,255,255,.72) 0 34px,
transparent 35px
),
radial-gradient(
circle at 93% 88%,
rgba(127,168,161,.13) 0 80px,
transparent 81px
),
linear-gradient(
135deg,
#EEF4ED 0%,
#F4F4E9 100%
);
box-shadow:
0 8px 24px rgba(31,78,70,.05);
}
/*
* Một mảng xanh mềm ở góc dưới.
*/
.zen-learning-program-showcase__content::before {
content: "";
position: absolute;
right: -60px;
bottom: -80px;
width: 210px;
height: 170px;
border-radius: 58% 42% 48% 52%;
background: rgba(127,168,161,.12);
transform: rotate(-10deg);
pointer-events: none;
}
/*
* Nét cam + chấm nhỏ tạo cảm giác summer camp.
*/
.zen-learning-program-showcase__content::after {
content: "✦ · ✦";
position: absolute;
right: 28px;
top: 18px;
color: rgba(232,132,0,.32);
font-size: 17px;
letter-spacing: 8px;
transform: rotate(5deg);
pointer-events: none;
}
/* ======================================================
TAGLINE
====================================================== */
.zen-learning-program-showcase__tagline {
position: relative;
z-index: 2;
margin: 0 0 .5rem;
font-family: "Raleway", sans-serif !important;
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
letter-spacing: .11em !important;
color: #E88400 !important;
text-transform: uppercase !important;
}
.zen-learning-program-showcase__tagline::before {
content: "";
display: inline-block;
width: 24px;
height: 2px;
margin-right: .7rem;
vertical-align: middle;
background: #7FA8A1;
transform: translateY(-2px);
}
/* ======================================================
MAIN CONTENT
====================================================== */
.zen-learning-program-showcase__main {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
}
.zen-learning-program-showcase__title {
order: 1;
margin: 0;
font-family: "Raleway", sans-serif !important;
font-size: 2.25rem !important;
font-weight: 600 !important;
line-height: 1.12 !important;
letter-spacing: -.02em !important;
color: #245C57 !important;
}
.zen-learning-program-showcase__line {
order: 2;
width: 52px;
height: 2px;
margin: .7rem 0 .85rem;
background: #E88400;
}
/* ======================================================
META
====================================================== */
.zen-learning-program-showcase__meta {
order: 3;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.2rem;
margin: 0 0 1.2rem;
}
.zen-learning-program-showcase__meta-item {
display: inline-flex;
align-items: center;
gap: .45rem;
color: #245C57;
font-size: .9rem;
font-weight: 600;
line-height: 1.35;
}
.zen-learning-program-showcase__icon {
color: #E88400;
font-size: .95rem;
line-height: 1;
}
.zen-learning-program-showcase__meta-item + .zen-learning-program-showcase__meta-item::before {
content: "";
width: 4px;
height: 4px;
margin-right: .55rem;
border-radius: 50%;
background: #7FA8A1;
}
/* ======================================================
DESCRIPTION
====================================================== */
.zen-learning-program-showcase__description {
order: 4;
max-width: 700px;
margin: 0;
font-family: "Raleway", sans-serif !important;
font-size: 1rem !important;
font-weight: 500 !important;
line-height: 1.62;
color: #245C57 !important;
}
.zen-learning-program-showcase__description-item {
display: flex;
align-items: flex-start;
gap: .65rem;
margin-bottom: .42rem;
}
.zen-learning-program-showcase__description-item:last-child {
margin-bottom: 0;
}
.zen-learning-program-showcase__description-icon {
position: relative;
flex: 0 0 12px;
width: 12px;
height: 12px;
margin-top: .4em;
border: 1px solid #E88400;
border-radius: 50%;
}
.zen-learning-program-showcase__description-icon::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 2px;
height: 2px;
border-radius: 50%;
background: #E88400;
}
/* ======================================================
HIGHLIGHTS
====================================================== */
.zen-learning-program-showcase__highlights {
order: 5;
margin-top: 1.35rem;
margin-left: 26px;
max-width: 650px;
}
.zen-learning-program-showcase__label {
display: inline-flex;
align-items: center;
gap: .6rem;
margin: 0 0 .65rem;
font-family: "Raleway", sans-serif !important;
font-size: .94rem !important;
font-weight: 800 !important;
line-height: 1.3;
letter-spacing: .07em;
color: #245C57 !important;
text-transform: uppercase;
}
.zen-learning-program-showcase__label::after {
content: "";
width: 30px;
height: 2px;
background: #E88400;
transform: rotate(-3deg);
}
.zen-learning-program-showcase__highlights ul {
display: flex;
flex-direction: column;
gap: .5rem;
margin: 0;
padding: 0;
list-style: none;
}
.zen-learning-program-showcase__highlights li {
position: relative;
padding-left: 1.2rem;
color: #245C57;
font-size: .94rem;
line-height: 1.48;
}
.zen-learning-program-showcase__highlights li::before {
content: "";
position: absolute;
top: .62em;
left: 0;
width: 8px;
height: 8px;
border-radius: 50% 50% 50% 0;
background: #E88400;
transform: rotate(-45deg);
}
/* ======================================================
CTA
====================================================== */
.zen-learning-program-showcase__cta {
position: relative;
z-index: 2;
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
gap: .5rem;
margin-top: 1.35rem;
color: #E88400;
font-size: .94rem;
font-weight: 600;
text-align: right;
text-decoration: none;
transition:
gap .2s ease,
color .2s ease;
}
.zen-learning-program-showcase__cta:hover {
gap: .8rem;
color: #245C57;
text-decoration: none;
}
/* ======================================================
IMAGE
====================================================== */
.zen-learning-program-showcase__media {
position: relative;
flex: 0 0 360px;
width: 360px;
height: 450px;
margin: 0;
isolation: isolate;
}
.zen-learning-program-showcase__media::before {
content: "";
position: absolute;
z-index: 0;
top: 12px;
left: -15px;
width: 100%;
height: 100%;
background: #E5EEE9;
border-radius: 34px 8px 34px 8px;
transform: rotate(-2deg);
}
.zen-learning-program-showcase__image {
position: relative;
z-index: 2;
display: block;
width: 360px !important;
height: 450px !important;
max-width: none !important;
max-height: none !important;
object-fit: cover;
border-radius: 26px 6px 26px 6px;
}
.zen-learning-program-showcase__media::after {
content: "";
position: absolute;
z-index: 3;
top: -16px;
right: -18px;
width: 88px;
height: 88px;
border-top: 2px solid #E88400;
border-right: 2px solid #E88400;
border-radius: 0 34px 0 0;
transform: rotate(4deg);
pointer-events: none;
}
}
/* ==========================================================
TABLET
========================================================== */
@media (min-width: 576px) and (max-width: 991px) {
.zen-learning-program-showcase {
display: flex;
flex-direction: column;
gap: 2rem;
margin-top: -15px;
}
.zen-learning-program-showcase__content {
padding: 1.5rem 1.4rem 1.35rem;
border-radius: 24px 8px 24px 8px;
}
.zen-learning-program-showcase__media {
order: -1;
width: 70%;
max-width: 520px;
height: auto;
margin: 0 auto;
aspect-ratio: 4 / 5;
}
.zen-learning-program-showcase__image {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.zen-learning-program-showcase__highlights {
margin-left: 16px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 575px) {
.zen-learning-program-showcase {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: -10px;
}
.zen-learning-program-showcase__content {
padding: 1.25rem 1rem 1.15rem;
border-radius: 22px 7px 22px 7px;
}
.zen-learning-program-showcase__tagline {
font-size: .9rem !important;
font-weight: 800 !important;
}
.zen-learning-program-showcase__title {
font-size: 1.8rem !important;
}
.zen-learning-program-showcase__meta {
gap: .8rem;
margin-bottom: 1rem;
}
.zen-learning-program-showcase__meta-item {
font-size: .8rem;
}
.zen-learning-program-showcase__description {
font-size: .9rem !important;
}
.zen-learning-program-showcase__highlights {
margin-top: 1.1rem;
margin-left: 14px;
}
.zen-learning-program-showcase__highlights li {
font-size: .88rem;
}
.zen-learning-program-showcase__media {
order: -1;
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 4 / 5;
}
.zen-learning-program-showcase__image {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.zen-learning-program-showcase__cta {
justify-content: flex-end;
}
}
/* ==========================================================
LEGACY PROGRAM MARKUP
========================================================== */
.type2-programs-content > .tab-pane > .row {
display: none !important;
}
/* ==========================================================
ZEN JUNIORS — PROGRAM FINAL TUNING
========================================================== */
@media (min-width: 992px) {
/* YÊU LÀ CHẾT Ở TRONG LÒNG */
.zen-learning-program-showcase__tagline {
font-size: 22px !important;
font-weight: 800 !important;
letter-spacing: .10em !important;
}
/* Cụm ngày + địa điểm căn giữa */
.zen-learning-program-showcase__meta {
justify-content: center;
width: 100%;
}
/* ĐIỂM NỔI BẬT */
.zen-learning-program-showcase__label {
font-weight: 800 !important;
-webkit-text-stroke: .2px currentColor;
}
}
/* ==========================================================
ZEN JUNIORS — PAGE COLOR RHYTHM 20261009
Global section background map
========================================================== */
:root {
--zen-learning-bg-white: #FFFFFF;
--zen-learning-bg-sage: #F1F6F3;
--zen-learning-bg-sage-soft: #F3F7F4;
--zen-learning-bg-warm: #FFF9F1;
--zen-learning-bg-cta: #FFF4E7;
--zen-learning-dark: #245C57;
--zen-learning-dark-neutral: #263333;
--zen-learning-accent: #E88400;
}
/* ----------------------------------------------------------
2. INTRO
Sau Hero: khoảng thở sáng, sạch.
---------------------------------------------------------- */
.type2-intro,
.intro-summer {
background-color: var(--zen-learning-bg-white);
}
/* ----------------------------------------------------------
3. WHY
Sage nhạt: bình tĩnh, tin cậy.
---------------------------------------------------------- */
.type2-why {
background-color: var(--zen-learning-bg-sage);
}
/* ----------------------------------------------------------
4. AUDIENCE
Kem ấm: gần gũi phụ huynh / trẻ.
---------------------------------------------------------- */
.type2-audience {
background-color: var(--zen-learning-bg-warm);
}
/* ----------------------------------------------------------
5. PROGRAMS
Nền trắng vì preview bên trong đã có màu riêng.
---------------------------------------------------------- */
.type2-programs {
background-color: var(--zen-learning-bg-white);
}
/* ----------------------------------------------------------
6. BENEFITS
Sage mềm: đổi nhịp sau Programs.
---------------------------------------------------------- */
.type2-benefits {
background-color: var(--zen-learning-bg-sage-soft);
}
/* ----------------------------------------------------------
7. GALLERY
Nền tối: điểm đổi nhịp thị giác lớn của trang.
Rule sẽ hoạt động khi Gallery được chuyển sang Type2.
---------------------------------------------------------- */
.type2-gallery {
background-color: var(--zen-learning-dark-neutral);
color: #FFFFFF;
}
.type2-gallery .type2-gallery-title,
.type2-gallery .type2-gallery-description {
color: #FFFFFF;
}
/* ----------------------------------------------------------
8. CTA / OFFER
Kem ấm hơn Audience để tăng cảm giác chuyển đổi.
---------------------------------------------------------- */
.type2-cta {
background-color: var(--zen-learning-bg-cta);
}
/* ----------------------------------------------------------
9. TEAM
Trở lại trắng để tập trung chân dung con người.
---------------------------------------------------------- */
.type2-team {
background-color: var(--zen-learning-bg-white);
}
/* ----------------------------------------------------------
10. STUDENTS
Sage nhẹ: cộng đồng / trải nghiệm thật.
---------------------------------------------------------- */
.type2-students {
background-color: var(--zen-learning-bg-sage-soft);
}
/* ==========================================================
EVERZEN TYPE2 — FEEDBACK CSS START
ZEN JUNIORS
========================================================== */
/* ==========================================================
SECTION
========================================================== */
.type2-page--zen-learning
.type2-feedback {
position: relative;
overflow: hidden;
padding:
64px 0
62px;
background:
#EAF1ED;
color:
#263333;
}
/* ==========================================================
HEADING
========================================================== */
.type2-page--zen-learning
.type2-feedback
.type2-feedback__head {
position: relative;
z-index: 3;
top: -10px;
width:
min(
780px,
100%
);
margin:
0 auto
28px;
text-align: center;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__heading {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
column-gap: 14px;
row-gap: 4px;
width: 100%;
margin:
0 0
12px;
padding: 0;
text-align: center;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__title {
display: inline-block;
margin: 0;
font-family:
"Raleway",
Arial,
sans-serif !important;
font-size: 30px;
font-weight: 600;
line-height: 1.25;
color:
#263333;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__title-decor {
display: inline-block;
transform:
translateY(8px);
font-family:
"Dancing Script SVN",
"Dancing Script",
cursive !important;
font-size: 46px;
font-weight: 400;
line-height: 1;
white-space: nowrap;
color:
#E88400;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__description {
width:
min(
680px,
100%
);
margin: 0 auto;
font-family:
"Open Sans",
Arial,
sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.65;
color:
#4A5555;
text-align: center;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__description
p {
margin: 0;
}
/* ==========================================================
SLIDER
========================================================== */
.type2-page--zen-learning
.type2-feedback
.type2-feedback__slider {
position: relative;
z-index: 2;
width: 100%;
overflow: hidden;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__slider
.swiper-slide {
height: auto;
}
/* ==========================================================
DESKTOP
========================================================== */
.type2-page--zen-learning
.type2-feedback
.type2-feedback__slide {
display: grid;
grid-template-columns:
minmax(0, 1.42fr)
minmax(370px, .96fr);
align-items: center;
gap: 44px;
width: 100%;
min-height: 315px;
}
/* ==========================================================
LEFT
========================================================== */
.type2-page--zen-learning
.type2-feedback
.type2-feedback__copy {
position: relative;
z-index: 2;
display: flex;
align-items: center;
min-width: 0;
min-height: 270px;
padding:
8px 0
20px;
}
/*
* DESKTOP:
*
* “ AVATAR TÊN
* NỘI DUNG
*
*/
.type2-page--zen-learning
.type2-feedback
.type2-feedback__voice {
display: grid;
grid-template-columns:
72px
118px
minmax(0, 1fr);
grid-template-areas:
"mark avatar name"
"mark avatar content";
align-items: start;
column-gap: 24px;
row-gap: 10px;
width: 100%;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__quote-mark {
grid-area: mark;
margin:
-12px 0
0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 82px;
font-weight: 700;
line-height: 1;
color:
#245C57;
text-align: center;
}
/*
* display:contents để avatar + name
* tham gia trực tiếp grid ngoài.
*/
.type2-page--zen-learning
.type2-feedback
.type2-feedback__person {
display: contents;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__avatar {
grid-area: avatar;
width: 118px;
height: 118px;
overflow: hidden;
border-radius: 50%;
background:
#DCE7E2;
box-shadow:
0 5px 16px
rgba(
31,
78,
70,
.09
);
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__avatar-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position:
center center;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__name {
grid-area: name;
display: block;
width: max-content;
max-width: none;
margin:
3px 0
0;
padding: 0;
font-family:
"Raleway",
Arial,
sans-serif !important;
font-size: 16px;
font-weight: 700;
line-height: 1.35;
color:
#263333;
text-align: left;
white-space: nowrap;
}
/* ==========================================================
CONTENT
========================================================== */
.type2-page--zen-learning
.type2-feedback
.type2-feedback__content {
grid-area: content;
min-width: 0;
margin: 0;
padding: 0;
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 1.68;
color:
#314744;
text-align: left;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__content
p {
margin:
0 0
10px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__content
p:last-child {
margin-bottom: 0;
}
/* ==========================================================
RIGHT IMAGE — HORIZONTAL
========================================================== */
.type2-page--zen-learning
.type2-feedback
.type2-feedback__visual {
position: relative;
width: 100%;
height: auto;
aspect-ratio:
16 / 10;
overflow: hidden;
border-radius:
22px;
background:
#D7E3DD;
box-shadow:
0 8px 26px
rgba(
31,
78,
70,
.09
);
isolation: isolate;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__visual-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position:
center center;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__visual::after {
content: "";
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
width: 16%;
pointer-events: none;
background:
linear-gradient(
to right,
rgba(
234,
241,
237,
0
),
rgba(
234,
241,
237,
.12
)
);
}
/* ==========================================================
CAMP DECOR
========================================================== */
.type2-page--zen-learning
.type2-feedback
.type2-feedback__camp {
display: none;
}
@media (min-width: 1200px) {
.type2-page--zen-learning
.type2-feedback
.type2-feedback__camp {
position: absolute;
z-index: 1;
left:
max(
6px,
calc(
50% - 690px
)
);
bottom: 10px;
display: block;
width: 215px;
pointer-events: none;
opacity: .21;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__camp
img {
display: block;
width: 100%;
height: auto;
}
}
/* ==========================================================
DOTS
========================================================== */
.type2-page--zen-learning
.type2-feedback
.type2-feedback__pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 38%;
min-height: 14px;
margin:
14px 0
0 auto;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__pagination
.swiper-pagination-bullet {
display: block;
width: 7px;
height: 7px;
margin: 0 !important;
border-radius: 50%;
background:
#94AAA2;
opacity: .55;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__pagination
.swiper-pagination-bullet-active {
background:
#245C57;
opacity: 1;
transform:
scale(1.25);
}
/* ==========================================================
ARROWS — DESKTOP + TABLET
========================================================== */
.type2-page--zen-learning
.type2-feedback
.type2-feedback__prev,
.type2-page--zen-learning
.type2-feedback
.type2-feedback__next {
position: absolute;
z-index: 10;
top: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
transform:
translateY(-50%);
border: 0;
border-radius: 50%;
background:
rgba(
255,
255,
255,
.84
);
box-shadow:
0 5px 18px
rgba(
31,
78,
70,
.14
);
cursor: pointer;
opacity: .9;
transition:
transform .2s ease,
opacity .2s ease,
background-color .2s ease;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__prev {
left: 4px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__next {
right: 4px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__prev
img,
.type2-page--zen-learning
.type2-feedback
.type2-feedback__next
img {
display: block;
width: 15px;
height: auto;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__prev
img {
transform:
rotate(180deg);
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__prev:hover,
.type2-page--zen-learning
.type2-feedback
.type2-feedback__next:hover {
opacity: 1;
background:
#FFFFFF;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__prev.swiper-button-disabled,
.type2-page--zen-learning
.type2-feedback
.type2-feedback__next.swiper-button-disabled {
opacity: .3;
}
/* ==========================================================
TABLET
========================================================== */
@media (
min-width: 576px
) and (
max-width: 991px
) {
.type2-page--zen-learning
.type2-feedback {
padding:
58px 0
58px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__head {
margin-bottom: 30px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__title {
font-size: 26px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__title-decor {
font-size: 40px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__slide {
display: block;
min-height: 0;
}
/*
* Tablet vẫn theo mẫu đã chốt:
* bỏ ảnh lớn.
*/
.type2-page--zen-learning
.type2-feedback
.type2-feedback__visual {
display: none;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__copy {
min-height: 0;
padding:
8px
48px
8px
0;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__voice {
grid-template-columns:
62px
100px
minmax(0, 1fr);
grid-template-areas:
"mark avatar name"
"mark avatar content";
column-gap: 20px;
row-gap: 8px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__quote-mark {
margin-top: -8px;
font-size: 70px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__avatar {
width: 100px;
height: 100px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__name {
margin-top: 2px;
font-size: 15px;
white-space: nowrap;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__content {
font-size: 15.5px;
line-height: 1.65;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__pagination {
width: 100%;
margin:
22px 0
0;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__prev {
left: 0;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__next {
right: 0;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-feedback {
padding:
50px 0
54px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__head {
top: -6px;
margin-bottom: 25px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__heading {
display: block;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__title {
display: block;
font-size: 21px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__title-decor {
display: block;
margin-top: 5px;
transform: none;
font-size: 34px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__slide {
display: block;
min-height: 0;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__visual {
display: none;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__copy {
min-height: 0;
padding: 0;
}
/*
* Mobile giữ đúng tinh thần mẫu:
*
* “ AVATAR + NAME
*
* CONTENT
*/
.type2-page--zen-learning
.type2-feedback
.type2-feedback__voice {
grid-template-columns:
42px
minmax(0, 1fr);
grid-template-areas:
"mark person"
". content";
column-gap: 12px;
row-gap: 12px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__person {
grid-area: person;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__quote-mark {
margin-top: -4px;
font-size: 49px;
text-align: left;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__avatar {
width: 70px;
height: 70px;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__name {
width: auto;
max-width: none;
margin-top: 13px;
font-size: 12px;
line-height: 1.3;
white-space: nowrap;
text-align: left;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__content {
position: relative;
top: -8px;
font-size: 15px;
line-height: 1.65;
}
.type2-page--zen-learning
.type2-feedback
.type2-feedback__pagination {
width: 100%;
margin:
25px 0
0;
}
/*
* Mobile vẫn ưu tiên swipe:
* không để arrow chiếm diện tích.
*/
.type2-page--zen-learning
.type2-feedback
.type2-feedback__prev,
.type2-page--zen-learning
.type2-feedback
.type2-feedback__next {
display: none;
}
}
/* ==========================================================
EVERZEN TYPE2 — FEEDBACK CSS END
========================================================== */
/* ----------------------------------------------------------
12. CONNECT
Khi Connect có wrapper Type2 riêng sẽ dùng trắng.
Không target widget legacy để tránh ảnh hưởng site khác.
---------------------------------------------------------- */
.type2-connect {
background-color: var(--zen-learning-bg-white);
}
/* ==========================================================
ZEN JUNIORS — PROGRAMS MOBILE CLEAN 20261009
One source of truth
========================================================== */
@media (max-width: 575px) {
/* ------------------------------------------------------
ORIGINAL TAB RAIL
------------------------------------------------------ */
.type2-programs-tabs {
position: relative !important;
top: auto !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-end;
gap: 4px !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 0 14px 7px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
background: transparent !important;
list-style: none;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.type2-programs-tabs::-webkit-scrollbar {
display: none;
}
.type2-programs-tabs .nav-item {
flex: 0 0 auto !important;
width: auto !important;
min-width: max-content !important;
margin: 0 !important;
scroll-snap-align: center;
}
.type2-programs-tabs .nav-link {
position: relative;
display: block !important;
width: auto !important;
min-width: max-content !important;
margin: 0 !important;
padding: 6px 11px 10px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #245C57 !important;
font-family: "Raleway", sans-serif !important;
font-size: 12.5px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
white-space: nowrap;
opacity: .72;
}
.type2-programs-tabs .nav-link.active {
color: #00827A !important;
opacity: 1;
}
.type2-programs-tabs .nav-link::after {
content: "";
position: absolute;
left: 11px;
right: 11px;
bottom: 0;
height: 2px;
border-radius: 999px;
background: transparent;
}
.type2-programs-tabs .nav-link.active::after {
background: #E88400;
}
.type2-programs-tabs .fz-25,
.type2-programs-tabs .fz-19 {
font-size: inherit !important;
line-height: inherit !important;
}
/* ------------------------------------------------------
CONTENT
------------------------------------------------------ */
.type2-programs-content {
width: 100% !important;
margin: 0 !important;
padding: 0 12px !important;
overflow: hidden !important;
}
.type2-programs-content .tab-pane {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.type2-programs-content
.tab-pane.mobile-program-slide-enter {
animation: zenProgramSlideIn .28s ease both;
}
@keyframes zenProgramSlideIn {
from {
opacity: 0;
transform: translateX(22px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ------------------------------------------------------
SHOWCASE
------------------------------------------------------ */
.zen-learning-program-showcase {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* IMAGE */
.zen-learning-program-showcase__media {
order: 1 !important;
position: relative !important;
flex: none !important;
width: calc(100% - 28px) !important;
max-width: 330px !important;
height: auto !important;
aspect-ratio: 4 / 5 !important;
margin: 0 auto 18px !important;
isolation: isolate;
}
.zen-learning-program-showcase__image {
display: block !important;
position: relative !important;
z-index: 2;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
border-radius: 22px 7px 22px 7px !important;
}
.zen-learning-program-showcase__media::before {
top: 8px !important;
left: -9px !important;
width: 100% !important;
height: 100% !important;
border-radius: 26px 7px 26px 7px !important;
}
.zen-learning-program-showcase__media::after {
top: -8px !important;
right: -8px !important;
width: 62px !important;
height: 62px !important;
border-radius: 0 23px 0 0 !important;
}
/* INFORMATION PANEL */
.zen-learning-program-showcase__content {
order: 2 !important;
position: relative !important;
width: 100% !important;
padding: 20px 18px 18px !important;
overflow: hidden !important;
border-radius: 24px 8px 24px 8px !important;
background:
radial-gradient(
circle at 92% 8%,
rgba(232,132,0,.14) 0 34px,
transparent 35px
),
radial-gradient(
circle at 8% 92%,
rgba(127,168,161,.12) 0 55px,
transparent 56px
),
linear-gradient(
145deg,
#EEF4ED 0%,
#F5F3E8 100%
) !important;
box-shadow:
0 8px 24px rgba(31,78,70,.055);
}
/* TAGLINE */
.zen-learning-program-showcase__tagline {
margin: 0 0 5px !important;
font-family: "Raleway", sans-serif !important;
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
letter-spacing: .075em !important;
color: #E88400 !important;
text-transform: uppercase !important;
}
.zen-learning-program-showcase__tagline::before {
width: 18px !important;
height: 2px !important;
margin-right: 7px !important;
}
/* MAIN ORDER */
.zen-learning-program-showcase__main {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
.zen-learning-program-showcase__title {
order: 1 !important;
margin: 0 !important;
font-family: "Raleway", sans-serif !important;
font-size: 25px !important;
font-weight: 600 !important;
line-height: 1.18 !important;
color: #245C57 !important;
}
.zen-learning-program-showcase__meta {
order: 2 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: wrap !important;
gap: 8px 16px !important;
width: 100% !important;
margin: 8px 0 12px !important;
}
.zen-learning-program-showcase__line {
order: 3 !important;
width: 44px !important;
height: 2px !important;
margin: 0 0 10px !important;
}
.zen-learning-program-showcase__description {
order: 4 !important;
width: 100% !important;
margin: 0 !important;
font-family: "Raleway", sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
color: #245C57 !important;
}
.zen-learning-program-showcase__highlights {
order: 5 !important;
width: calc(100% - 8px) !important;
margin: 16px 0 0 8px !important;
padding-left: 12px !important;
border-left:
1px solid rgba(232,132,0,.38);
}
/* META */
.zen-learning-program-showcase__meta-item {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
color: #245C57 !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
}
.zen-learning-program-showcase__icon {
color: #E88400 !important;
font-size: 14px !important;
}
/* DESCRIPTION ICON */
.zen-learning-program-showcase__description-item {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
margin: 0 0 8px !important;
}
.zen-learning-program-showcase__description-icon {
position: relative !important;
flex: 0 0 14px !important;
width: 14px !important;
height: 16px !important;
margin-top: .22em !important;
border: 0 !important;
}
.zen-learning-program-showcase__description-icon::before {
content: "✧";
position: absolute;
top: 0;
left: 0;
color: #E88400;
font-family: Georgia, serif;
font-size: 14px;
line-height: 1;
}
.zen-learning-program-showcase__description-icon::after {
display: none !important;
}
/* HIGHLIGHTS */
.zen-learning-program-showcase__label {
display: flex !important;
align-items: center !important;
gap: 7px !important;
margin: 0 0 9px !important;
font-family: "Raleway", sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
letter-spacing: .055em !important;
color: #245C57 !important;
text-transform: uppercase !important;
}
.zen-learning-program-showcase__highlights ul {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
.zen-learning-program-showcase__highlights li {
position: relative;
padding-left: 18px !important;
color: #245C57 !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
.zen-learning-program-showcase__highlights li::before {
content: "✦";
position: absolute;
top: .12em !important;
left: 0 !important;
width: auto !important;
height: auto !important;
background: none !important;
color: #E88400;
font-family: Georgia, serif;
font-size: 11px;
transform: none !important;
}
/* CTA */
.zen-learning-program-showcase__cta {
display: flex !important;
justify-content: flex-end !important;
width: 100% !important;
margin-top: 17px !important;
color: #E88400 !important;
font-size: 14px !important;
font-weight: 600 !important;
text-align: right !important;
}
}
/* ==========================================================
MOBILE FLOATING PROGRAM NAV
Appended to BODY by JS, independent of theme ancestors
========================================================== */
.zen-program-floating-tabs {
display: none;
}
@media (max-width: 575px) {
.zen-program-floating-tabs {
position: fixed;
z-index: 99999;
top: 38vh;
left: 0;
right: 0;
transform: translateY(-50%);
display: block;
width: 100%;
padding: 7px 0 8px;
background: rgba(255,255,255,.97);
box-shadow:
0 5px 16px rgba(31,78,70,.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
visibility: hidden;
transition:
opacity .18s ease,
visibility .18s ease;
}
.zen-program-floating-tabs.is-visible {
opacity: 1;
visibility: visible;
}
.zen-program-floating-tabs__rail {
display: flex;
flex-wrap: nowrap;
gap: 4px;
width: 100%;
padding: 0 14px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.zen-program-floating-tabs__rail::-webkit-scrollbar {
display: none;
}
.zen-program-floating-tabs__button {
position: relative;
flex: 0 0 auto;
padding: 6px 11px 9px;
border: 0;
background: transparent;
color: #245C57;
font-family: "Raleway", sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
opacity: .72;
}
.zen-program-floating-tabs__button::after {
content: "";
position: absolute;
left: 11px;
right: 11px;
bottom: 0;
height: 2px;
border-radius: 999px;
background: transparent;
}
.zen-program-floating-tabs__button.is-active {
color: #E88400;
opacity: 1;
font-weight: 700;
}
.zen-program-floating-tabs__button.is-active::after {
background: #E88400;
}
}
@media (max-width: 380px) {
.type2-programs-content {
padding-left: 9px !important;
padding-right: 9px !important;
}
.zen-learning-program-showcase__content {
padding: 18px 15px 16px !important;
}
.zen-learning-program-showcase__title {
font-size: 22px !important;
}
.zen-learning-program-showcase__description {
font-size: 14px !important;
}
.zen-learning-program-showcase__highlights li {
font-size: 13.5px !important;
}
}
/* ==========================================================
ZEN JUNIORS — BENEFITS / JOURNEY VISUAL V3 20261009
Desktop 3+2 / Tablet 2+2+1 / Mobile timeline
========================================================== */
.type2-benefits {
position: relative;
overflow: hidden;
padding: 88px 0 96px;
}
.type2-benefits .container {
position: relative;
z-index: 2;
max-width: 1240px;
}
/* ==========================================================
BENEFITS / LIGHT DECOR 20261009
sparkle + leaf / sun glow + sparkle + dots
========================================================== */
/*
* Họa tiết nền phía phải trên:
* nắng nhẹ + sparkle + chấm nhỏ.
*/
.type2-benefits::after {
content: "";
position: absolute;
z-index: 0;
top: 105px;
right: clamp(28px, 5vw, 90px);
width: 250px;
height: 150px;
pointer-events: none;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 150' fill='none'%3E%3Ccircle cx='155' cy='66' r='43' fill='%23F5C976' fill-opacity='.16'/%3E%3Ccircle cx='155' cy='66' r='29' fill='%23F5C976' fill-opacity='.09'/%3E%3Cpath d='M71 42 L71 55 M64.5 48.5 L77.5 48.5' stroke='%23E88400' stroke-width='1.7' stroke-linecap='round' stroke-opacity='.42'/%3E%3Cpath d='M205 91 L205 102 M199.5 96.5 L210.5 96.5' stroke='%237FA8A1' stroke-width='1.5' stroke-linecap='round' stroke-opacity='.42'/%3E%3Cpath d='M109 20 L109 29 M104.5 24.5 L113.5 24.5' stroke='%23E88400' stroke-width='1.35' stroke-linecap='round' stroke-opacity='.3'/%3E%3Ccircle cx='55' cy='91' r='3' fill='%23E88400' fill-opacity='.28'/%3E%3Ccircle cx='92' cy='108' r='2.2' fill='%237FA8A1' fill-opacity='.32'/%3E%3Ccircle cx='221' cy='48' r='2.4' fill='%23E88400' fill-opacity='.25'/%3E%3Cpath d='M30 116 C70 96 105 123 144 109 C177 97 202 103 232 91' stroke='%23E8B067' stroke-width='1.4' stroke-linecap='round' stroke-opacity='.20'/%3E%3C/svg%3E")
center / contain no-repeat;
opacity: .95;
}
/*
* Icon nhỏ trước phần mô tả section:
* sparkle + leaf line-art.
*/
.type2-benefits .type2-benefits-description {
position: relative;
padding-left: 28px;
}
.type2-benefits .type2-benefits-description::before {
content: "";
position: absolute;
top: .22em;
left: 0;
width: 18px;
height: 18px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 2.8 L5 7.2 M2.8 5 L7.2 5' stroke='%23E88400' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10.3 15.8 C11.2 11.1 13.9 8.5 17.2 7.4 C17 11.3 14.8 14.4 10.3 15.8 Z' stroke='%237FA8A1' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M10.2 15.8 C11.9 13.2 13.5 11.3 15.5 9.6' stroke='%237FA8A1' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E")
center / contain no-repeat;
opacity: .95;
pointer-events: none;
}
/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
.type2-benefits::after {
top: 92px;
right: 18px;
width: 190px;
height: 120px;
opacity: .72;
}
.type2-benefits .type2-benefits-description {
padding-left: 26px;
}
}
/* Mobile */
@media (max-width: 575px) {
.type2-benefits::after {
display: none;
}
.type2-benefits .type2-benefits-description {
padding-left: 24px;
}
.type2-benefits .type2-benefits-description::before {
top: .18em;
width: 16px;
height: 16px;
}
}
/* ==========================================================
SECTION HEADING
Same Type2 rule as WHY / AUDIENCE
========================================================== */
.type2-page--zen-learning
.type2-benefits
.title-all.type2-benefits-heading {
display: flex;
align-items: baseline;
flex-wrap: wrap;
column-gap: 14px;
row-gap: 6px;
width: auto;
max-width: 100%;
margin: 0 0 28px !important;
padding: 0 !important;
text-align: left !important;
}
.type2-page--zen-learning
.type2-benefits
.title-all.type2-benefits-heading
.type2-benefits-title {
display: inline-block;
width: auto;
margin: 0 !important;
padding: 0 !important;
font-family: "Raleway", sans-serif !important;
font-size: 30px !important;
font-weight: 600 !important;
font-style: normal !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
color: #263333 !important;
text-align: left !important;
text-transform: none !important;
}
.type2-page--zen-learning
.type2-benefits
.title-all.type2-benefits-heading
.type2-benefits-title-decor {
display: inline-block;
width: auto;
margin: 0 !important;
padding: 0 !important;
font-family: "Dancing Script SVN", "Dancing Script", cursive !important;
font-size: 46px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1 !important;
letter-spacing: 0 !important;
color: #E88400 !important;
text-align: left !important;
text-transform: none !important;
/*
* Decor luôn thấp hơn main title một chút.
*/
transform: translateY(10px);
}
.type2-benefits .type2-benefits-description {
width: 100%;
max-width: 680px;
margin: 0 0 52px;
font-family: "Raleway", sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
line-height: 1.65 !important;
color: #4A5555 !important;
text-align: left;
}
.type2-benefits .type2-benefits-description p:last-child {
margin-bottom: 0;
}
/* ==========================================================
DESKTOP
3 ITEMS + 2 ITEMS CENTERED
========================================================== */
.type2-benefits-items {
position: relative;
display: grid;
grid-template-columns:
repeat(6, minmax(0, 1fr));
column-gap: 34px;
row-gap: 62px;
width: 100%;
margin: 0;
padding: 8px 0 0;
}
/* ----------------------------------------------------------
ITEM WIDTH
3 on first row
---------------------------------------------------------- */
.type2-benefit {
position: relative;
z-index: 1;
grid-column: span 2;
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
margin: 0 !important;
text-align: center;
}
/* second row centered */
.type2-benefit:nth-child(4) {
grid-column: 2 / span 2;
}
.type2-benefit:nth-child(5) {
grid-column: 4 / span 2;
}
/* ==========================================================
CREATIVE JOURNEY LINES
each segment is hand-drawn / curved
========================================================== */
.type2-benefit::before {
content: "";
position: absolute;
z-index: 0;
top: 27px;
left: 50%;
width: calc(100% + 34px);
height: 28px;
pointer-events: none;
opacity: .95;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* 1 -> 2 */
.type2-benefit:nth-child(1)::before {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C70 7 120 31 195 20 C270 9 320 30 400 17' fill='none' stroke='%23E9A74E' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='200' cy='20' r='2.8' fill='%237FA8A1'/%3E%3C/svg%3E");
}
/* 2 -> 3 */
.type2-benefit:nth-child(2)::before {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18 C75 31 125 7 205 20 C280 31 325 9 400 21' fill='none' stroke='%23E9A74E' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='205' cy='20' r='3' fill='%23E88400'/%3E%3C/svg%3E");
}
/* 4 -> 5 */
.type2-benefit:nth-child(4)::before {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M0 21 C75 8 135 33 205 19 C275 7 330 29 400 17' fill='none' stroke='%23E9A74E' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='205' cy='19' r='2.8' fill='%237FA8A1'/%3E%3C/svg%3E");
}
/* no line after last item of each row */
.type2-benefit:nth-child(3)::before,
.type2-benefit:nth-child(5)::before {
display: none;
}
/* ==========================================================
SMALL VISUAL MARKER
========================================================== */
.type2-benefit__image {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
height: 76px;
margin: 0 auto 24px;
}
.type2-benefit__image::before {
content: "";
position: absolute;
inset: 2px;
border: 1px solid rgba(36,92,87,.10);
border-radius: 50%;
background: rgba(255,255,255,.86);
box-shadow:
0 7px 20px rgba(36,92,87,.055);
}
.type2-benefit__image::after {
content: "";
position: absolute;
left: 50%;
bottom: -12px;
width: 7px;
height: 7px;
transform: translateX(-50%);
border-radius: 50%;
background: #E88400;
box-shadow:
0 0 0 4px #F3F7F4;
}
.type2-benefit__image-el {
position: relative;
z-index: 2;
display: block;
width: 44px;
height: 44px;
object-fit: contain;
}
/* ==========================================================
ITEM TITLE
CANONICAL RULE: OPEN SANS
========================================================== */
.type2-benefits .type2-benefit__title {
display: block;
width: 100%;
min-height: 52px;
margin: 0 0 11px !important;
padding: 0 10px;
font-family: "Open Sans", Arial, sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: #263333 !important;
text-align: center !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* ==========================================================
ITEM DESCRIPTION
Full equal width, readable paragraph
========================================================== */
.type2-benefits .type2-benefit__description {
width: 100%;
max-width: 355px;
margin: 0 auto;
padding: 0 8px;
font-family: "Raleway", sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
line-height: 1.62 !important;
color: #4A5555 !important;
text-align: justify !important;
text-align-last: left !important;
hyphens: none;
}
.type2-benefits .type2-benefit__description p {
margin: 0;
text-align: inherit;
text-align-last: inherit;
}
/* ==========================================================
TABLET WIDE 768–1199
3 + 2 centered
========================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
.type2-benefits {
padding: 72px 0 78px;
}
.type2-benefits .container {
width: 100%;
max-width: 1080px;
padding-left: 28px;
padding-right: 28px;
}
/* Heading */
.type2-page--zen-learning
.type2-benefits
.title-all.type2-benefits-heading
.type2-benefits-title {
font-size: 28px !important;
}
.type2-page--zen-learning
.type2-benefits
.title-all.type2-benefits-heading
.type2-benefits-title-decor {
font-size: 42px !important;
transform: translateY(8px);
}
.type2-benefits .type2-benefits-description {
max-width: 720px;
margin-bottom: 44px;
font-size: 16px !important;
}
/* 3 + 2 */
.type2-benefits-items {
display: grid;
grid-template-columns:
repeat(6, minmax(0, 1fr));
column-gap: 26px;
row-gap: 52px;
width: 100%;
padding-top: 8px;
}
.type2-benefit {
grid-column: auto !important;
width: 100%;
}
/* Row 1 */
.type2-benefit:nth-child(1) {
grid-column: 1 / span 2 !important;
}
.type2-benefit:nth-child(2) {
grid-column: 3 / span 2 !important;
}
.type2-benefit:nth-child(3) {
grid-column: 5 / span 2 !important;
}
/* Row 2 centered */
.type2-benefit:nth-child(4) {
grid-column: 2 / span 2 !important;
}
.type2-benefit:nth-child(5) {
grid-column: 4 / span 2 !important;
}
/* Journey lines:
1 -> 2 -> 3
4 -> 5
*/
.type2-benefit:nth-child(1)::before,
.type2-benefit:nth-child(2)::before,
.type2-benefit:nth-child(4)::before {
display: block;
}
.type2-benefit:nth-child(3)::before,
.type2-benefit:nth-child(5)::before {
display: none;
}
/* Visual */
.type2-benefit__image {
width: 70px;
height: 70px;
margin-bottom: 20px;
}
.type2-benefit__image-el {
width: 40px;
height: 40px;
}
/* Typography */
.type2-benefits .type2-benefit__title {
min-height: 46px;
font-size: 17px !important;
}
.type2-benefits .type2-benefit__description {
width: 100%;
max-width: 310px;
margin-left: auto;
margin-right: auto;
font-size: 16px !important;
line-height: 1.58 !important;
text-align: justify !important;
text-align-last: left !important;
}
}
/* ==========================================================
TABLET NARROW 576–767
2 + 2 + 1 centered
========================================================== */
@media (min-width: 576px) and (max-width: 767px) {
.type2-benefits {
padding: 66px 0 72px;
}
.type2-benefits .container {
width: 100%;
padding-left: 24px;
padding-right: 24px;
}
/* Heading */
.type2-page--zen-learning
.type2-benefits
.title-all.type2-benefits-heading
.type2-benefits-title {
font-size: 26px !important;
}
.type2-page--zen-learning
.type2-benefits
.title-all.type2-benefits-heading
.type2-benefits-title-decor {
font-size: 40px !important;
transform: translateY(7px);
}
.type2-benefits .type2-benefits-description {
margin-bottom: 40px;
font-size: 16px !important;
}
/* 2 + 2 + 1 */
.type2-benefits-items {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
column-gap: 22px;
row-gap: 46px;
}
.type2-benefit {
grid-column: auto !important;
}
.type2-benefit:nth-child(1) {
grid-column: 1 / span 2 !important;
}
.type2-benefit:nth-child(2) {
grid-column: 3 / span 2 !important;
}
.type2-benefit:nth-child(3) {
grid-column: 1 / span 2 !important;
}
.type2-benefit:nth-child(4) {
grid-column: 3 / span 2 !important;
}
.type2-benefit:nth-child(5) {
grid-column: 2 / span 2 !important;
}
/* Journey lines */
.type2-benefit:nth-child(1)::before,
.type2-benefit:nth-child(3)::before {
display: block;
}
.type2-benefit:nth-child(2)::before,
.type2-benefit:nth-child(4)::before,
.type2-benefit:nth-child(5)::before {
display: none;
}
.type2-benefit__image {
width: 68px;
height: 68px;
margin-bottom: 19px;
}
.type2-benefit__image-el {
width: 39px;
height: 39px;
}
.type2-benefits .type2-benefit__title {
min-height: 44px;
font-size: 17px !important;
}
.type2-benefits .type2-benefit__description {
max-width: 285px;
font-size: 15.5px !important;
text-align: justify !important;
text-align-last: left !important;
}
}
/* ==========================================================
MOBILE
VERTICAL JOURNEY
========================================================== */
@media (max-width: 575px) {
.type2-benefits {
padding: 58px 0 64px;
}
.type2-page--zen-learning
.type2-benefits
.type2-benefits-heading {
display: block;
width: 100%;
margin-bottom: 24px;
text-align: left;
}
.type2-page--zen-learning
.type2-benefits
.title-all.type2-benefits-heading
.type2-benefits-title {
display: block;
width: 100%;
margin: 0 !important;
font-family: "Raleway", sans-serif !important;
font-size: 21px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
color: #263333 !important;
}
.type2-page--zen-learning
.type2-benefits
.title-all.type2-benefits-heading
.type2-benefits-title-decor {
display: block;
width: 100%;
margin: 8px 0 0 !important;
font-family: "Dancing Script SVN", "Dancing Script", cursive !important;
font-size: 34px !important;
font-weight: 400 !important;
line-height: 1.05 !important;
color: #E88400 !important;
/*
* Mobile: decor xuống dòng riêng.
* Khoảng 8px tạo cảm giác thấp hơn main title.
*/
transform: none !important;
}
.type2-benefits .type2-benefits-description {
margin-bottom: 34px;
font-size: 15px !important;
line-height: 1.6 !important;
}
.type2-benefits-items {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
}
/* vertical path */
.type2-benefits-items::before {
content: "";
position: absolute;
top: 27px;
bottom: 27px;
left: 31px;
width: 2px;
border-radius: 999px;
background:
linear-gradient(
180deg,
rgba(232,132,0,.55),
rgba(127,168,161,.42),
rgba(232,132,0,.32)
);
}
.type2-benefit,
.type2-benefit:nth-child(4),
.type2-benefit:nth-child(5) {
display: grid;
grid-template-columns:
62px minmax(0, 1fr);
grid-template-areas:
"image title"
"image text";
column-gap: 15px;
row-gap: 3px;
width: 100%;
padding: 0 0 30px;
text-align: left;
}
.type2-benefit:last-child {
padding-bottom: 0;
}
/* remove desktop connectors */
.type2-benefit::before,
.type2-benefit:nth-child(1)::before,
.type2-benefit:nth-child(3)::before {
display: none;
}
.type2-benefit__image {
grid-area: image;
width: 60px;
height: 60px;
margin: 0;
align-self: start;
}
.type2-benefit__image::before {
background: rgba(255,255,255,.90);
}
.type2-benefit__image::after {
left: 27px;
top: 26px;
bottom: auto;
width: 7px;
height: 7px;
transform: none;
}
.type2-benefit__image-el {
width: 36px;
height: 36px;
}
.type2-benefits .type2-benefit__title {
grid-area: title;
width: 100%;
min-height: 0;
margin: 1px 0 5px !important;
padding: 0;
font-size: 16px !important;
line-height: 1.4 !important;
text-align: left !important;
}
.type2-benefits .type2-benefit__description {
grid-area: text;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
font-size: 15px !important;
line-height: 1.58 !important;
text-align: left !important;
text-align-last: auto !important;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width: 380px) {
.type2-benefits {
padding-top: 52px;
padding-bottom: 58px;
}
.type2-benefits-items::before {
left: 28px;
}
.type2-benefit,
.type2-benefit:nth-child(4),
.type2-benefit:nth-child(5) {
grid-template-columns:
56px minmax(0, 1fr);
column-gap: 12px;
}
.type2-benefit__image {
width: 54px;
height: 54px;
}
.type2-benefit__image::after {
left: 24px;
top: 23px;
}
.type2-benefit__image-el {
width: 32px;
height: 32px;
}
.type2-benefits .type2-benefit__title {
font-size: 15px !important;
}
.type2-benefits .type2-benefit__description {
font-size: 14px !important;
}
}
/* ==========================================================
TABLET
3 + 2 centered
========================================================== */
@media (max-width: 991px) {
.type2-benefits {
padding: 72px 0 78px;
}
.type2-benefits-title {
font-size: 26px;
}
.type2-benefits-title-decor {
font-size: 40px;
}
.type2-benefits-description {
margin-bottom: 42px;
font-size: 16px;
}
.type2-benefits-items {
grid-template-columns:
repeat(6, minmax(0, 1fr));
gap: 42px 24px;
padding-top: 8px;
}
.type2-benefits-items::before {
display: none;
}
.type2-benefit {
grid-column: span 2;
}
.type2-benefit:nth-child(4) {
grid-column: 2 / span 2;
}
.type2-benefit:nth-child(5) {
grid-column: 4 / span 2;
}
.type2-benefit__image {
width: 78px;
height: 78px;
margin-bottom: 18px;
}
.type2-benefit__image::after {
display: none;
}
.type2-benefit__image-el {
width: 48px;
height: 48px;
}
.type2-benefit__title {
min-height: 46px;
font-size: 17px;
}
.type2-benefit__description {
font-size: 16px;
line-height: 1.55;
}
}
/* ==========================================================
MOBILE — VERTICAL JOURNEY
========================================================== */
@media (max-width: 575px) {
.type2-benefits {
padding: 58px 0 64px;
}
.type2-benefits-heading {
margin-bottom: 12px;
}
.type2-benefits-title {
font-size: 21px;
line-height: 1.3;
}
.type2-benefits-title-decor {
margin-top: 3px;
font-size: 34px;
}
.type2-benefits-description {
margin-bottom: 34px;
font-size: 15px;
line-height: 1.6;
}
.type2-benefits-items {
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
}
/* vertical journey */
.type2-benefits-items::before {
display: block;
top: 30px;
bottom: 30px;
left: 34px;
right: auto;
width: 2px;
height: auto;
background:
linear-gradient(
180deg,
rgba(232,132,0,.50),
rgba(127,168,161,.42),
rgba(232,132,0,.30)
);
border-radius: 999px;
}
.type2-benefit {
display: grid;
grid-template-columns:
68px minmax(0, 1fr);
grid-template-areas:
"image title"
"image text";
column-gap: 16px;
row-gap: 3px;
padding: 0 0 30px;
text-align: left;
}
.type2-benefit:last-child {
padding-bottom: 0;
}
.type2-benefit__image {
grid-area: image;
width: 66px;
height: 66px;
margin: 0;
align-self: start;
}
.type2-benefit__image::before {
inset: 3px;
background: rgba(255,255,255,.88);
}
.type2-benefit__image::after {
display: block;
left: 30px;
top: 29px;
bottom: auto;
width: 8px;
height: 8px;
transform: none;
box-shadow:
0 0 0 4px #F3F7F4;
}
.type2-benefit__image-el {
width: 40px;
height: 40px;
}
.type2-benefit__title {
grid-area: title;
width: 100%;
min-height: 0;
margin: 2px 0 5px;
padding: 0;
font-family: "Open Sans", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
text-align: left;
}
.type2-benefit__description {
grid-area: text;
width: 100%;
margin: 0;
padding: 0;
font-size: 15px;
line-height: 1.55;
text-align: left;
}
}
/* ==========================================================
SMALL MOBILE
========================================================== */
@media (max-width: 380px) {
.type2-benefits {
padding-top: 52px;
padding-bottom: 58px;
}
.type2-benefits-items::before {
left: 30px;
}
.type2-benefit {
grid-template-columns:
60px minmax(0, 1fr);
column-gap: 13px;
}
.type2-benefit__image {
width: 58px;
height: 58px;
}
.type2-benefit__image::after {
left: 26px;
top: 25px;
}
.type2-benefit__image-el {
width: 35px;
height: 35px;
}
.type2-benefit__title {
font-size: 15px;
}
.type2-benefit__description {
font-size: 14px;
}
}
/* ==========================================================
ZEN JUNIORS — GALLERY / EDITORIAL MOSAIC 20261009
========================================================== */
.type2-page--zen-learning
.type2-gallery {
position: relative;
padding: 40px 0 96px;
overflow: hidden;
background:
radial-gradient(
circle at 92% 9%,
rgba(232, 132, 0, .13),
transparent 25%
),
radial-gradient(
circle at 5% 92%,
rgba(127, 168, 161, .13),
transparent 23%
),
#263333;
color: #FFFFFF;
}
.type2-page--zen-learning
.type2-gallery
.container {
position: relative;
z-index: 2;
max-width: 1240px;
}
/* ----------------------------------------------------------
HEADING
---------------------------------------------------------- */
.type2-page--zen-learning
.type2-gallery
.title-all.type2-gallery-heading {
display: flex;
align-items: baseline;
flex-wrap: wrap;
column-gap: 14px;
row-gap: 6px;
width: 100%;
margin: 0 0 24px !important;
padding: 0 !important;
text-align: left !important;
}
.type2-page--zen-learning
.type2-gallery
.title-all.type2-gallery-heading
.type2-gallery-title {
display: inline-block;
margin: 0 !important;
padding: 0 !important;
font-family:
"Raleway",
sans-serif !important;
font-size: 30px !important;
font-weight: 600 !important;
font-style: normal !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
color: #FFFFFF !important;
text-transform: none !important;
}
.type2-page--zen-learning
.type2-gallery
.title-all.type2-gallery-heading
.type2-gallery-title-decor {
display: inline-block;
margin: 0 !important;
padding: 0 !important;
font-family:
"Dancing Script SVN",
"Dancing Script",
cursive !important;
font-size: 46px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1 !important;
letter-spacing: 0 !important;
color: #E88400 !important;
text-transform: none !important;
/*
* Decor thấp hơn main title.
*/
transform: translateY(10px);
}
/* ----------------------------------------------------------
DESCRIPTION
---------------------------------------------------------- */
.type2-page--zen-learning
.type2-gallery
.type2-gallery-description {
width: 100%;
max-width: 760px;
margin: 0 0 38px;
font-family:
"Raleway",
sans-serif !important;
font-size: 17px !important;
font-weight: 500 !important;
line-height: 1.65 !important;
color:
rgba(
255,
255,
255,
.78
) !important;
}
.type2-page--zen-learning
.type2-gallery
.type2-gallery-description
p:last-child {
margin-bottom: 0;
}
/* ----------------------------------------------------------
MAIN GRID
---------------------------------------------------------- */
.type2-page--zen-learning
.type2-gallery
.type2-gallery-grid {
display: grid;
grid-template-columns:
repeat(
12,
minmax(0, 1fr)
);
grid-auto-rows: 226px;
gap: 14px;
width: 100%;
}
.type2-page--zen-learning
.type2-gallery
.type2-gallery-item {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 18px;
background: #1F2A2A;
}
.type2-page--zen-learning
.type2-gallery
.type2-gallery-image__el {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform .55s ease,
filter .55s ease;
}
@media (hover: hover) {
.type2-page--zen-learning
.type2-gallery
.type2-gallery-item:hover
.type2-gallery-image__el {
transform: scale(1.025);
}
}
/* ----------------------------------------------------------
DESKTOP MOSAIC — 1 TO 7 IMAGES
---------------------------------------------------------- */
/* 1 image */
.type2-gallery[data-visible-count="1"]
.type2-gallery-item--1 {
grid-column: 1 / 13;
grid-row: 1 / span 2;
}
/* 2 images */
.type2-gallery[data-visible-count="2"]
.type2-gallery-item--1 {
grid-column: 1 / 8;
grid-row: 1 / span 2;
}
.type2-gallery[data-visible-count="2"]
.type2-gallery-item--2 {
grid-column: 8 / 13;
grid-row: 1 / span 2;
}
/* 3 images */
.type2-gallery[data-visible-count="3"]
.type2-gallery-item--1 {
grid-column: 1 / 8;
grid-row: 1 / span 2;
}
.type2-gallery[data-visible-count="3"]
.type2-gallery-item--2 {
grid-column: 8 / 13;
grid-row: 1;
}
.type2-gallery[data-visible-count="3"]
.type2-gallery-item--3 {
grid-column: 8 / 13;
grid-row: 2;
}
/* 4 images */
.type2-gallery[data-visible-count="4"]
.type2-gallery-item--1 {
grid-column: 1 / 7;
grid-row: 1 / span 2;
}
.type2-gallery[data-visible-count="4"]
.type2-gallery-item--2 {
grid-column: 7 / 10;
grid-row: 1;
}
.type2-gallery[data-visible-count="4"]
.type2-gallery-item--3 {
grid-column: 10 / 13;
grid-row: 1;
}
.type2-gallery[data-visible-count="4"]
.type2-gallery-item--4 {
grid-column: 7 / 13;
grid-row: 2;
}
/* 5 / 6 / 7 images */
.type2-gallery[data-visible-count="5"]
.type2-gallery-item--1,
.type2-gallery[data-visible-count="6"]
.type2-gallery-item--1,
.type2-gallery[data-visible-count="7"]
.type2-gallery-item--1 {
grid-column: 1 / 7;
grid-row: 1 / span 2;
}
.type2-gallery[data-visible-count="5"]
.type2-gallery-item--2,
.type2-gallery[data-visible-count="6"]
.type2-gallery-item--2,
.type2-gallery[data-visible-count="7"]
.type2-gallery-item--2 {
grid-column: 7 / 10;
grid-row: 1;
}
.type2-gallery[data-visible-count="5"]
.type2-gallery-item--3,
.type2-gallery[data-visible-count="6"]
.type2-gallery-item--3,
.type2-gallery[data-visible-count="7"]
.type2-gallery-item--3 {
grid-column: 10 / 13;
grid-row: 1;
}
.type2-gallery[data-visible-count="5"]
.type2-gallery-item--4,
.type2-gallery[data-visible-count="6"]
.type2-gallery-item--4,
.type2-gallery[data-visible-count="7"]
.type2-gallery-item--4 {
grid-column: 7 / 10;
grid-row: 2;
}
.type2-gallery[data-visible-count="5"]
.type2-gallery-item--5,
.type2-gallery[data-visible-count="6"]
.type2-gallery-item--5,
.type2-gallery[data-visible-count="7"]
.type2-gallery-item--5 {
grid-column: 10 / 13;
grid-row: 2;
}
/* 6th image full width */
.type2-gallery[data-visible-count="6"]
.type2-gallery-item--6 {
grid-column: 1 / 13;
grid-row: 3;
}
/* 6 + 7 split */
.type2-gallery[data-visible-count="7"]
.type2-gallery-item--6 {
grid-column: 1 / 7;
grid-row: 3;
}
.type2-gallery[data-visible-count="7"]
.type2-gallery-item--7 {
grid-column: 7 / 13;
grid-row: 3;
}
/* ----------------------------------------------------------
EXTRA IMAGES
---------------------------------------------------------- */
.type2-page--zen-learning
.type2-gallery
.type2-gallery-item--extra {
display: none;
}
.type2-page--zen-learning
.type2-gallery.is-expanded
.type2-gallery-item--extra {
display: block;
grid-column: span 4;
grid-row: auto;
min-height: 260px;
}
/* ----------------------------------------------------------
+N OVERLAY
---------------------------------------------------------- */
.type2-page--zen-learning
.type2-gallery
.type2-gallery-more {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background:
rgba(
24,
36,
36,
.58
);
backdrop-filter: blur(2px);
color: #FFFFFF;
cursor: pointer;
transition:
background .25s ease;
}
.type2-page--zen-learning
.type2-gallery
.type2-gallery-more:hover {
background:
rgba(
24,
36,
36,
.70
);
}
.type2-page--zen-learning
.type2-gallery
.type2-gallery-more__count {
display: block;
font-family:
"Open Sans",
Arial,
sans-serif;
font-size: 32px;
font-weight: 700;
line-height: 1;
}
.type2-page--zen-learning
.type2-gallery
.type2-gallery-more__label {
display: block;
margin-top: 7px;
font-family:
"Raleway",
sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color:
rgba(
255,
255,
255,
.82
);
}
.type2-page--zen-learning
.type2-gallery.is-expanded
.type2-gallery-more {
display: none;
}
/* ----------------------------------------------------------
COLLAPSE
---------------------------------------------------------- */
.type2-page--zen-learning
.type2-gallery
.type2-gallery-collapse-wrap {
margin-top: 28px;
text-align: center;
}
.type2-page--zen-learning
.type2-gallery
.type2-gallery-collapse {
appearance: none;
padding: 9px 18px;
border:
1px solid
rgba(
255,
255,
255,
.26
);
border-radius: 999px;
background: transparent;
font-family:
"Raleway",
sans-serif;
font-size: 14px;
font-weight: 600;
color:
rgba(
255,
255,
255,
.84
);
cursor: pointer;
}
/* ==========================================================
TABLET
========================================================== */
@media (
min-width: 576px
) and (
max-width: 991px
) {
.type2-page--zen-learning
.type2-gallery {
padding: 36px 0 78px;
}
.type2-page--zen-learning
.type2-gallery
.title-all.type2-gallery-heading
.type2-gallery-title {
font-size: 26px !important;
}
.type2-page--zen-learning
.type2-gallery
.title-all.type2-gallery-heading
.type2-gallery-title-decor {
font-size: 40px !important;
transform: translateY(8px);
}
.type2-page--zen-learning
.type2-gallery
.type2-gallery-description {
max-width: 680px;
margin-bottom: 32px;
font-size: 16px !important;
}
.type2-page--zen-learning
.type2-gallery
.type2-gallery-grid {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
grid-auto-rows: 220px;
gap: 12px;
}
/*
* Reset desktop placement.
*/
.type2-page--zen-learning
.type2-gallery
.type2-gallery-item {
grid-column: auto !important;
grid-row: auto !important;
}
/*
* Ảnh đầu lớn toàn hàng.
*/
.type2-page--zen-learning
.type2-gallery
.type2-gallery-item--1 {
grid-column: 1 / -1 !important;
min-height: 300px;
}
.type2-page--zen-learning
.type2-gallery.is-expanded
.type2-gallery-item--extra {
grid-column: auto !important;
min-height: 220px;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-gallery {
padding: 30px 0 64px;
}
.type2-page--zen-learning
.type2-gallery
.title-all.type2-gallery-heading {
display: block;
margin-bottom: 20px !important;
}
.type2-page--zen-learning
.type2-gallery
.title-all.type2-gallery-heading
.type2-gallery-title {
display: block;
width: 100%;
font-size: 21px !important;
line-height: 1.3 !important;
}
.type2-page--zen-learning
.type2-gallery
.title-all.type2-gallery-heading
.type2-gallery-title-decor {
display: block;
width: 100%;
margin-top: 8px !important;
font-size: 34px !important;
line-height: 1.05 !important;
transform: none !important;
}
.type2-page--zen-learning
.type2-gallery
.type2-gallery-description {
max-width: none;
margin-bottom: 28px;
font-size: 15px !important;
line-height: 1.6 !important;
}
/*
* Mobile = rail ngang.
* Hiển thị TOÀN BỘ ảnh,
* kể cả những ảnh extra.
*/
.type2-page--zen-learning
.type2-gallery
.type2-gallery-grid {
display: flex;
width: calc(100% + 20px);
margin-right: -20px;
padding-right: 20px;
padding-bottom: 8px;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.type2-page--zen-learning
.type2-gallery
.type2-gallery-grid::-webkit-scrollbar {
display: none;
}
.type2-page--zen-learning
.type2-gallery
.type2-gallery-item,
.type2-page--zen-learning
.type2-gallery
.type2-gallery-item--extra {
display: block;
flex:
0 0
min(
82vw,
340px
);
width:
min(
82vw,
340px
);
min-height: 0;
aspect-ratio: 4 / 3;
border-radius: 15px;
scroll-snap-align: start;
}
/*
* Mobile đã xem được toàn bộ ảnh,
* không cần overlay +N / Thu gọn.
*/
.type2-page--zen-learning
.type2-gallery
.type2-gallery-more,
.type2-page--zen-learning
.type2-gallery
.type2-gallery-collapse-wrap {
display: none !important;
}
}
/* ==========================================================
ZEN JUNIORS — TYPE2 CTA WARM INVITATION 20261009
========================================================== */
.type2-page--zen-learning
.endow-summer.type2-cta {
position: relative;
padding: 64px 0 68px !important;
overflow: hidden;
background:
radial-gradient(
circle at 92% 12%,
rgba(232, 132, 0, .11),
transparent 24%
),
radial-gradient(
circle at 5% 88%,
rgba(127, 168, 161, .15),
transparent 25%
),
#FFF4E7 !important;
color: #263333;
}
/* ----------------------------------------------------------
LEGACY DECOR — OFF
---------------------------------------------------------- */
.type2-page--zen-learning
.endow-summer.type2-cta
> .image-after {
display: none !important;
}
/* ----------------------------------------------------------
LIGHT PLAYFUL DECOR
---------------------------------------------------------- */
.type2-page--zen-learning
.endow-summer.type2-cta::before {
content: "";
position: absolute;
z-index: 0;
top: 42px;
right: 5%;
width: 150px;
height: 150px;
border-radius: 50%;
border:
1px solid
rgba(232, 132, 0, .13);
box-shadow:
30px 22px 0 -28px rgba(232, 132, 0, .38),
-23px 64px 0 -26px rgba(127, 168, 161, .42),
62px 76px 0 -27px rgba(232, 132, 0, .28);
pointer-events: none;
}
.type2-page--zen-learning
.endow-summer.type2-cta::after {
content: "✦";
position: absolute;
z-index: 0;
right: 12%;
bottom: 46px;
font-size: 28px;
line-height: 1;
color: rgba(232, 132, 0, .20);
transform: rotate(14deg);
pointer-events: none;
}
/* ==========================================================
DESKTOP LAYOUT
========================================================== */
.type2-page--zen-learning
.endow-summer.type2-cta
> .container {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
minmax(0, 1.05fr)
minmax(0, .95fr)
minmax(300px, .70fr);
grid-template-rows:
auto
1fr;
column-gap: 42px;
row-gap: 28px;
max-width: 1240px;
}
/*
* Cho các Bootstrap column trở thành grid item
* của container chính.
*/
.type2-page--zen-learning
.endow-summer.type2-cta
> .container
> .row {
display: contents !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
> .container
> .row
> [class*="col-"] {
display: block !important;
width: 100% !important;
max-width: none !important;
flex: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ----------------------------------------------------------
MAIN HEADING
---------------------------------------------------------- */
.type2-page--zen-learning
.endow-summer.type2-cta
.title-all.type2-cta-title {
grid-column: 2 / 4;
grid-row: 1;
position: relative;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
font-family:
"Raleway",
sans-serif !important;
font-size: 30px !important;
font-weight: 600 !important;
font-style: normal !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
color: #263333 !important;
text-align: left !important;
text-transform: none !important;
}
/*
* Bỏ lá cờ legacy.
*/
.type2-page--zen-learning
.endow-summer.type2-cta
.title-all.type2-cta-title::after {
content: none !important;
display: none !important;
}
/*
* Một nét nhỏ giúp heading có nhịp,
* thay cho decor legacy nặng.
*/
.type2-page--zen-learning
.endow-summer.type2-cta
.title-all.type2-cta-title::before {
content: "";
display: inline-block;
width: 34px;
height: 3px;
margin-right: 12px;
margin-bottom: .23em;
border-radius: 999px;
background: #E88400;
}
/* ==========================================================
IMAGE
========================================================== */
.type2-page--zen-learning
.endow-summer.type2-cta
> .container
> .row
> :nth-child(1) {
grid-column: 1;
grid-row: 1 / 3;
align-self: stretch;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-image {
position: relative;
width: 100% !important;
max-width: none !important;
height: 100%;
min-height: 520px;
overflow: visible;
border-radius: 0;
background: transparent;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-image::after {
content: "";
position: absolute;
inset:
6% -4%
4% -4%;
z-index: -1;
border-radius: 50%;
background:
rgba(
232,
132,
0,
.06
);
filter: blur(34px);
pointer-events: none;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-image
img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
opacity: .78;
filter:
saturate(.82)
contrast(.96);
-webkit-mask-image:
radial-gradient(
ellipse 80% 86%
at 50% 50%,
#000 58%,
rgba(0,0,0,.86) 70%,
rgba(0,0,0,.34) 86%,
transparent 100%
);
mask-image:
radial-gradient(
ellipse 80% 86%
at 50% 50%,
#000 58%,
rgba(0,0,0,.86) 70%,
rgba(0,0,0,.34) 86%,
transparent 100%
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/* ==========================================================
OFFER CONTENT
========================================================== */
.type2-page--zen-learning
.endow-summer.type2-cta
> .container
> .row
> :nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content {
width: 100%;
padding: 0 !important;
}
/* ----------------------------------------------------------
PRICE AREA
---------------------------------------------------------- */
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.head {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 18px;
margin: 0 0 30px !important;
text-align: left !important;
}
/*
* Discount badge mới.
*/
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.head
.discount {
display: flex !important;
align-items: center;
justify-content: center;
width: 86px !important;
height: 86px !important;
flex: 0 0 86px !important;
border-radius: 50%;
background: #245C57 !important;
background-image: none !important;
box-shadow:
0 12px 28px
rgba(36, 92, 87, .12);
}
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.head
.discount
.value {
position: static !important;
margin: 0 !important;
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 25px !important;
font-weight: 700 !important;
line-height: 1 !important;
color: #FFFFFF !important;
transform: none !important;
}
/*
* Legacy tự thêm dấu % bằng ::after.
*/
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.head
.discount
.value::after {
content: "%" !important;
position: static !important;
margin-left: 1px;
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 12px !important;
color: rgba(255,255,255,.88) !important;
}
/* Giá */
.type2-page--zen-learning
.endow-summer.type2-cta
.form-price {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.head
.price-sale {
margin: 0 0 5px !important;
font-family:
"Raleway",
sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
color: #7A8583 !important;
text-decoration-thickness: 1px !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.head
.price {
margin: 0 !important;
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 35px !important;
font-weight: 700 !important;
line-height: 1.08 !important;
color: #E88400 !important;
}
/* ==========================================================
DECOR TITLE / "BẠN NHẬN ĐƯỢC"
========================================================== */
.type2-page--zen-learning
.endow-summer.type2-cta
.content
.type2-cta-title-decor {
margin: 0 0 20px !important;
padding: 0 !important;
font-family:
"Dancing Script SVN",
"Dancing Script",
cursive !important;
font-size: 42px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1.05 !important;
letter-spacing: 0 !important;
color: #E88400 !important;
text-align: left !important;
text-transform: none !important;
}
/* ==========================================================
DESCRIPTION
========================================================== */
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-description {
margin: -6px 0 24px;
font-family:
"Raleway",
sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.65 !important;
color: #4A5555 !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-description
p:last-child {
margin-bottom: 0;
}
/* ==========================================================
GIFT / BENEFIT LIST
========================================================== */
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.list-endow {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.list-endow
li {
position: relative;
min-height: 0 !important;
margin: 0 !important;
padding: 0 0 0 30px !important;
font-family:
"Raleway",
sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
color: #263333 !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.list-endow
li:not(:last-child) {
margin-bottom: 16px !important;
}
/*
* Bỏ icon hộp quà legacy.
*/
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.list-endow
li::before {
content: "✓" !important;
position: absolute !important;
top: 2px !important;
left: 0 !important;
display: flex;
align-items: center;
justify-content: center;
width: 20px !important;
height: 20px !important;
border-radius: 50%;
background: rgba(36, 92, 87, .10) !important;
background-image: none !important;
font-family:
Arial,
sans-serif !important;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #245C57;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-item__title {
display: block;
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.45;
color: #263333;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-item__description {
margin-top: 4px;
font-size: 14px;
line-height: 1.55;
color: #697473;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-item__description
p {
margin: 0;
}
/* ==========================================================
FORM
========================================================== */
.type2-page--zen-learning
.endow-summer.type2-cta
> .container
> .row
> :nth-child(3) {
grid-column: 3;
grid-row: 2;
align-self: start;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer.type2-cta-form {
width: 100%;
max-width: none !important;
margin: 0 !important;
padding:
24px 22px
20px !important;
border:
1px solid
rgba(
255,
255,
255,
.72
) !important;
border-radius: 22px !important;
background:
rgba(
255,
255,
255,
.52
) !important;
-webkit-backdrop-filter:
blur(16px);
backdrop-filter:
blur(16px);
box-shadow:
0 18px 45px
rgba(
38,
51,
51,
.045
);
}
/* Form title */
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer.type2-cta-form
.title {
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-weight: 700 !important;
letter-spacing: .01em;
color: #245C57 !important;
}
/*
* Giảm cảm giác form legacy.
*/
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer
.form-group__admin {
min-height: 44px !important;
padding:
9px 30px
9px 0 !important;
border-top:
1px solid
rgba(38, 51, 51, .10) !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer
.form-group__admin
.form-control,
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer
.form-group__admin
.select {
font-family:
"Raleway",
sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #263333 !important;
text-transform: none !important;
}
/*
* Submit CF7.
*/
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer
input[type="submit"],
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer
.wpcf7-submit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 46px;
margin-top: 12px;
padding: 10px 18px;
border: 0 !important;
border-radius: 999px !important;
background: #E88400 !important;
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
color: #FFFFFF !important;
text-transform: none !important;
box-shadow: none !important;
cursor: pointer;
}
/* ==========================================================
ADMIN CTA BUTTON
========================================================== */
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-admin-button-wrap {
margin-top: 30px;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-admin-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding:
11px 26px;
border:
1px solid
#E88400;
border-radius:
999px;
background:
#E88400;
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size:
14px;
font-weight:
700;
line-height:
1.3;
color:
#FFFFFF !important;
text-decoration:
none !important;
transition:
transform .22s ease,
box-shadow .22s ease,
background .22s ease;
}
@media (hover: hover) {
.type2-page--zen-learning
.endow-summer.type2-cta
a.type2-cta-admin-button:hover {
transform:
translateY(-2px);
background:
#D77900;
border-color:
#D77900;
box-shadow:
0 10px 24px
rgba(
232,
132,
0,
.18
);
}
}
/* ==========================================================
TABLET — 576 → 1199
========================================================== */
@media (
min-width: 576px
) and (
max-width: 1199px
) {
.type2-page--zen-learning
.endow-summer.type2-cta {
padding:
52px 0
56px !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
> .container {
grid-template-columns:
minmax(0, .92fr)
minmax(0, 1.08fr);
grid-template-rows:
auto
auto
auto;
column-gap: 30px;
row-gap: 28px;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.title-all.type2-cta-title {
grid-column: 1 / -1;
grid-row: 1;
font-size: 26px !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
> .container
> .row
> :nth-child(1) {
grid-column: 1;
grid-row: 2;
}
.type2-page--zen-learning
.endow-summer.type2-cta
> .container
> .row
> :nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.type2-page--zen-learning
.endow-summer.type2-cta
> .container
> .row
> :nth-child(3) {
grid-column: 1 / -1;
grid-row: 3;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-image {
min-height: 430px;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-title-decor {
font-size: 40px !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer.type2-cta-form {
max-width: 620px !important;
margin:
10px auto
0 !important;
}
}
/* ==========================================================
MOBILE
========================================================== */
@media (max-width: 575px) {
.type2-page--zen-learning
.endow-summer.type2-cta {
padding:
42px 0
46px !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
> .container {
display: block;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.title-all.type2-cta-title {
display: block;
width: 100% !important;
margin:
0 0
26px !important;
font-size: 21px !important;
line-height: 1.3 !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.title-all.type2-cta-title::before {
width: 25px;
margin-right: 8px;
}
.type2-page--zen-learning
.endow-summer.type2-cta
> .container
> .row {
display: flex !important;
flex-direction: column;
gap: 28px;
margin: 0 !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
> .container
> .row
> [class*="col-"] {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/*
* Mobile vẫn giữ ảnh,
* nhưng thấp hơn để không kéo trang dài.
*/
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-image {
min-height: 0;
height: auto;
aspect-ratio: 4 / 3;
border-radius: 0;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.head {
gap: 15px;
margin-bottom:
25px !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.head
.discount {
width: 72px !important;
height: 72px !important;
flex-basis: 72px !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.head
.discount
.value {
font-size: 22px !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.head
.price {
font-size: 30px !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-title-decor {
margin-bottom:
18px !important;
font-size: 34px !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-description {
font-size: 15px !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.list-endow
li {
font-size: 15px !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer.type2-cta-form {
padding:
21px 17px
18px !important;
border-radius: 18px !important;
}
/*
* Mobile bỏ vòng tròn decor lớn.
*/
.type2-page--zen-learning
.endow-summer.type2-cta::before {
width: 95px;
height: 95px;
top: 22px;
right: -40px;
}
}
/* ==========================================================
ZEN JUNIORS — CTA REFINEMENT 2 20261009
========================================================== */
/* 1. IMAGE — BLEND INTO BACKGROUND */
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-image {
position: relative;
overflow: visible !important;
border-radius: 0 !important;
background: transparent !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-image img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
opacity: .80;
filter:
saturate(.88)
contrast(.96)
brightness(1.02);
border-radius: 0 !important;
-webkit-mask-image:
radial-gradient(
ellipse 86% 90% at 50% 50%,
#000 54%,
rgba(0,0,0,.95) 66%,
rgba(0,0,0,.72) 77%,
rgba(0,0,0,.38) 87%,
rgba(0,0,0,.10) 95%,
transparent 100%
);
mask-image:
radial-gradient(
ellipse 86% 90% at 50% 50%,
#000 54%,
rgba(0,0,0,.95) 66%,
rgba(0,0,0,.72) 77%,
rgba(0,0,0,.38) 87%,
rgba(0,0,0,.10) 95%,
transparent 100%
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-image::after {
content: "";
position: absolute;
inset: -2% -3%;
z-index: 1;
pointer-events: none;
background:
linear-gradient(
to right,
#FFF4E7 0%,
rgba(255,244,231,.82) 3%,
rgba(255,244,231,.30) 8%,
transparent 16%,
transparent 84%,
rgba(255,244,231,.30) 92%,
rgba(255,244,231,.82) 97%,
#FFF4E7 100%
),
linear-gradient(
to bottom,
#FFF4E7 0%,
rgba(255,244,231,.72) 3%,
rgba(255,244,231,.20) 9%,
transparent 17%,
transparent 83%,
rgba(255,244,231,.20) 91%,
rgba(255,244,231,.72) 97%,
#FFF4E7 100%
);
}
/* 2. FORM — MORE TRANSPARENT */
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer.type2-cta-form {
background:
rgba(255,255,255,.22) !important;
border:
1px solid
rgba(255,255,255,.48) !important;
box-shadow:
0 14px 34px
rgba(38,51,51,.025) !important;
-webkit-backdrop-filter:
blur(18px);
backdrop-filter:
blur(18px);
}
/* 3. ADMIN CTA — TEXT + ARROW ONLY */
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-admin-button-wrap {
margin-top: 26px;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-admin-button {
display: inline-flex !important;
align-items: center;
gap: 8px;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: #E88400 !important;
text-decoration: none !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-admin-button::after {
content: "→";
display: inline-block;
font-size: 17px;
line-height: 1;
transition:
transform .2s ease;
}
@media (hover: hover) {
.type2-page--zen-learning
.endow-summer.type2-cta
a.type2-cta-admin-button:hover {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: #D77900 !important;
transform: none !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
a.type2-cta-admin-button:hover::after {
transform:
translateX(4px);
}
}
/* 4. GIFT TITLES — FORCE OPEN SANS */
.type2-page--zen-learning
.endow-summer.type2-cta
.endow-content
.list-endow
li
.type2-cta-item__title {
display: inline !important;
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
font-style: normal !important;
line-height: 1.45 !important;
letter-spacing: 0 !important;
color: #263333 !important;
}
/* FORM TITLE */
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer.type2-cta-form
.title {
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-weight: 700 !important;
color: #245C57 !important;
}
/* TABLET */
@media (min-width: 576px) and (max-width: 1199px) {
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-image img {
-webkit-mask-image:
radial-gradient(
ellipse 88% 90% at 50% 50%,
#000 55%,
rgba(0,0,0,.92) 68%,
rgba(0,0,0,.58) 82%,
rgba(0,0,0,.16) 94%,
transparent 100%
);
mask-image:
radial-gradient(
ellipse 88% 90% at 50% 50%,
#000 55%,
rgba(0,0,0,.92) 68%,
rgba(0,0,0,.58) 82%,
rgba(0,0,0,.16) 94%,
transparent 100%
);
}
}
/* MOBILE */
@media (max-width: 575px) {
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer.type2-cta-form {
background:
rgba(255,255,255,.25) !important;
}
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-admin-button {
font-size: 14px !important;
}
}
/* ==========================================================
ZEN JUNIORS — CTA EDGE FADE FIX 20261009
========================================================== */
.type2-page--zen-learning .endow-summer.type2-cta {
--cta-bg: #FBF2E6;
}
/* 1) ẢNH: giữ ảnh rõ ở giữa, tan dần ở mép */
.type2-page--zen-learning .endow-summer.type2-cta .type2-cta-image {
position: relative;
isolation: isolate;
overflow: hidden !important;
border-radius: 0 !important;
background: transparent !important;
}
.type2-page--zen-learning .endow-summer.type2-cta .type2-cta-image img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 0 !important;
opacity: .96;
filter: saturate(.94) brightness(1.02) contrast(.98);
}
/* lớp làm mềm 4 cạnh */
.type2-page--zen-learning .endow-summer.type2-cta .type2-cta-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
linear-gradient(to right,
var(--cta-bg) 0%,
rgba(251,242,230,.92) 3%,
rgba(251,242,230,.58) 8%,
rgba(251,242,230,.20) 14%,
rgba(251,242,230,0) 20%,
rgba(251,242,230,0) 80%,
rgba(251,242,230,.20) 86%,
rgba(251,242,230,.58) 92%,
rgba(251,242,230,.92) 97%,
var(--cta-bg) 100%
),
linear-gradient(to bottom,
var(--cta-bg) 0%,
rgba(251,242,230,.92) 3%,
rgba(251,242,230,.58) 8%,
rgba(251,242,230,.20) 14%,
rgba(251,242,230,0) 20%,
rgba(251,242,230,0) 80%,
rgba(251,242,230,.20) 86%,
rgba(251,242,230,.58) 92%,
rgba(251,242,230,.92) 97%,
var(--cta-bg) 100%
);
}
/* lớp làm mềm góc, tránh cảm giác khối chữ nhật */
.type2-page--zen-learning .endow-summer.type2-cta .type2-cta-image::before {
content: "";
position: absolute;
inset: -2%;
z-index: 1;
pointer-events: none;
background:
radial-gradient(circle at 0% 0%, var(--cta-bg) 0%, rgba(251,242,230,0) 24%),
radial-gradient(circle at 100% 0%, var(--cta-bg) 0%, rgba(251,242,230,0) 24%),
radial-gradient(circle at 0% 100%, var(--cta-bg) 0%, rgba(251,242,230,0) 24%),
radial-gradient(circle at 100% 100%, var(--cta-bg) 0%, rgba(251,242,230,0) 24%);
}
/* 2) FORM: giữ trong suốt nhẹ hơn */
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form {
background: rgba(255,255,255,.18) !important;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
/* 3) CHỌN KHÓA HỌC: hiển thị viết hoa */
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form select,
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form select option {
text-transform: uppercase;
}
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form .wpcf7-form-control-wrap select {
text-transform: uppercase;
}
/* nếu form plugin render custom current text */
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form .current,
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form .selected,
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form .select2-selection__rendered {
text-transform: uppercase;
}
/* ==========================================================
ZEN JUNIORS — CTA STRONG EDGE FADE + UPPERCASE FIX 20261009
========================================================== */
.type2-page--zen-learning .endow-summer.type2-cta {
--cta-bg: #FBF2E6;
}
/* 1) ẢNH TAN MẠNH 4 CẠNH VÀO NỀN */
.type2-page--zen-learning .endow-summer.type2-cta .type2-cta-image {
position: relative;
isolation: isolate;
overflow: hidden !important;
background: transparent !important;
border-radius: 0 !important;
}
.type2-page--zen-learning .endow-summer.type2-cta .type2-cta-image img {
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 0 !important;
opacity: .97;
filter: saturate(.96) brightness(1.02);
}
/* fade mạnh ở 4 cạnh */
.type2-page--zen-learning .endow-summer.type2-cta .type2-cta-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background:
linear-gradient(
to right,
var(--cta-bg) 0%,
rgba(251,242,230,.98) 4%,
rgba(251,242,230,.88) 8%,
rgba(251,242,230,.68) 13%,
rgba(251,242,230,.38) 18%,
rgba(251,242,230,.12) 24%,
rgba(251,242,230,0) 31%,
rgba(251,242,230,0) 69%,
rgba(251,242,230,.12) 76%,
rgba(251,242,230,.38) 82%,
rgba(251,242,230,.68) 87%,
rgba(251,242,230,.88) 92%,
rgba(251,242,230,.98) 96%,
var(--cta-bg) 100%
),
linear-gradient(
to bottom,
var(--cta-bg) 0%,
rgba(251,242,230,.98) 4%,
rgba(251,242,230,.88) 8%,
rgba(251,242,230,.68) 13%,
rgba(251,242,230,.38) 18%,
rgba(251,242,230,.12) 24%,
rgba(251,242,230,0) 31%,
rgba(251,242,230,0) 69%,
rgba(251,242,230,.12) 76%,
rgba(251,242,230,.38) 82%,
rgba(251,242,230,.68) 87%,
rgba(251,242,230,.88) 92%,
rgba(251,242,230,.98) 96%,
var(--cta-bg) 100%
);
}
/* mềm thêm ở 4 góc */
.type2-page--zen-learning .endow-summer.type2-cta .type2-cta-image::before {
content: "";
position: absolute;
inset: -2%;
z-index: 2;
pointer-events: none;
background:
radial-gradient(circle at 0% 0%, var(--cta-bg) 0%, rgba(251,242,230,.88) 10%, rgba(251,242,230,.45) 20%, rgba(251,242,230,0) 34%),
radial-gradient(circle at 100% 0%, var(--cta-bg) 0%, rgba(251,242,230,.88) 10%, rgba(251,242,230,.45) 20%, rgba(251,242,230,0) 34%),
radial-gradient(circle at 0% 100%, var(--cta-bg) 0%, rgba(251,242,230,.88) 10%, rgba(251,242,230,.45) 20%, rgba(251,242,230,0) 34%),
radial-gradient(circle at 100% 100%, var(--cta-bg) 0%, rgba(251,242,230,.88) 10%, rgba(251,242,230,.45) 20%, rgba(251,242,230,0) 34%);
}
/* 2) FORM vẫn trong suốt nhẹ */
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form {
background: rgba(255,255,255,.14) !important;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
/* 3) ép viết hoa bằng CSS */
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form select,
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form option,
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form .current,
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form .selected,
.type2-page--zen-learning .endow-summer.type2-cta .form-regis__summer.type2-cta-form .select2-selection__rendered {
text-transform: uppercase !important;
}
/* ==========================================================
ZEN JUNIORS — CTA SELECT FINAL STYLE 20261009
========================================================== */
/*
* CHỌN KHÓA HỌC
* Cho select hiển thị cùng format với các field label khác.
*/
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer.type2-cta-form
.form-group__admin
select,
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer.type2-cta-form
.form-group__admin
.select {
width: 100% !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background-color: transparent !important;
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
letter-spacing: .04em !important;
color: #747474 !important;
text-transform: uppercase !important;
-webkit-appearance: none;
appearance: none;
}
/*
* Nội dung option khi mở dropdown:
* vẫn uppercase nhưng nhẹ hơn một chút.
*/
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer.type2-cta-form
.form-group__admin
select option {
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
color: #263333 !important;
text-transform: uppercase !important;
}
/*
* Nếu select đang có class .select của form legacy,
* selector này thắng toàn bộ rule cũ.
*/
.type2-page--zen-learning
.endow-summer.type2-cta
.form-regis__summer.type2-cta-form
.form-group__admin
select.select {
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
color: #747474 !important;
text-transform: uppercase !important;
}
/* ==========================================================
ZEN JUNIORS — CTA WCF7 SELECT DEFINITIVE FIX 20261009
Element thật: select.select.wcf7
========================================================== */
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-form
select.select.wcf7 {
width: 100% !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: transparent !important;
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
letter-spacing: .04em !important;
color: #747474 !important;
text-transform: uppercase !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
/* option khi mở dropdown */
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-form
select.select.wcf7
option {
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: #263333 !important;
text-transform: uppercase !important;
}
/* Tablet — khóa lại để responsive cũ không đè */
@media (min-width: 576px) and (max-width: 1199px) {
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-form
select.select.wcf7 {
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
color: #747474 !important;
text-transform: uppercase !important;
}
}
/* Mobile — khóa lại lần cuối */
@media (max-width: 575px) {
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-form
select.select.wcf7 {
font-family:
"Open Sans",
Arial,
sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
color: #747474 !important;
text-transform: uppercase !important;
}
}
/* ==========================================================
ZEN JUNIORS — CTA MOBILE DECOR SIZE 20261009
========================================================== */
@media (max-width: 575px) {
.type2-page--zen-learning
.endow-summer.type2-cta
.type2-cta-title-decor {
font-size: 30px !important;
line-height: 1.08 !important;
}
}
/* ==========================================================
ZEN JUNIORS — CTA MOBILE DECOR FORCE 20261009
========================================================== */
@media screen and (max-width: 575px) {
html body
.type2-page--zen-learning
section.endow-summer.type2-cta
.endow-content
.content
p.title.type2-cta-title-decor {
font-size: 30px !important;
line-height: 1.12 !important;
}
}
/* ==========================================================
ZEN JUNIORS — PROGRAM TABLET DETAILED V2 20261009
576–991px
Desktop visual language + tablet proportions
========================================================== */
@media (min-width: 576px) and (max-width: 991px) {
/* ======================================================
SECTION / TAB RAIL
====================================================== */
.type2-page--zen-learning
.summer-group.type2-programs {
overflow: hidden;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-tabs {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-end !important;
gap: 18px !important;
width: 100% !important;
margin: 0 0 34px !important;
padding: 0 4px 8px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
background: transparent !important;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-tabs::-webkit-scrollbar {
display: none;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-tabs
.nav-item {
flex: 0 0 auto !important;
width: auto !important;
min-width: max-content !important;
margin: 0 !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-tabs
.nav-link {
position: relative !important;
display: block !important;
width: auto !important;
min-width: max-content !important;
margin: 0 !important;
padding: 6px 5px 10px !important;
border: 0 !important;
background: transparent !important;
color: #3C6F52 !important;
font-family: "Raleway", sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
white-space: nowrap !important;
opacity: .82;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-tabs
.nav-link.active {
color: #245C57 !important;
opacity: 1;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-tabs
.nav-link::after {
left: 5px !important;
right: 5px !important;
bottom: 0 !important;
width: auto !important;
height: 3px !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-tabs
.fz-25,
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-tabs
.fz-19 {
font-size: inherit !important;
line-height: inherit !important;
}
/* ======================================================
CONTENT WRAPPER
====================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-content {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.type2-programs-content
.tab-pane {
width: 100% !important;
}
/* ======================================================
SHOWCASE — DESKTOP STRUCTURE, TABLET SCALE
====================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase {
position: relative;
display: grid !important;
grid-template-columns:
minmax(0, 1.35fr)
minmax(245px, .75fr) !important;
align-items: center !important;
column-gap: 38px !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* ======================================================
INFORMATION PANEL
====================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__content {
position: relative !important;
order: initial !important;
width: 100% !important;
min-width: 0 !important;
padding: 27px 28px 24px !important;
overflow: hidden !important;
border-radius: 26px 9px 26px 9px !important;
background:
radial-gradient(
circle at 8% 14%,
rgba(255,255,255,.72) 0 31px,
transparent 32px
),
radial-gradient(
circle at 93% 88%,
rgba(127,168,161,.13) 0 72px,
transparent 73px
),
linear-gradient(
135deg,
#EEF4ED 0%,
#F4F4E9 100%
) !important;
box-shadow:
0 8px 24px rgba(31,78,70,.045) !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__content::before {
content: "";
position: absolute;
right: -55px;
bottom: -72px;
width: 185px;
height: 150px;
border-radius: 58% 42% 48% 52%;
background: rgba(127,168,161,.11);
transform: rotate(-10deg);
pointer-events: none;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__content::after {
content: "✦ · ✦";
position: absolute;
right: 24px;
top: 16px;
color: rgba(232,132,0,.30);
font-size: 14px !important;
letter-spacing: 7px;
pointer-events: none;
}
/* ======================================================
TAGLINE
====================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__tagline {
position: relative;
z-index: 2;
margin: 0 0 7px !important;
font-family: "Raleway", sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: .095em !important;
color: #E88400 !important;
text-transform: uppercase !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__tagline::before {
content: "";
display: inline-block;
width: 20px !important;
height: 2px !important;
margin-right: 8px !important;
vertical-align: middle;
background: #7FA8A1 !important;
transform: translateY(-2px);
}
/* ======================================================
MAIN — EXPLICIT ORDER
====================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__main {
position: relative;
z-index: 2;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__title {
order: 1 !important;
margin: 0 !important;
font-family: "Raleway", sans-serif !important;
font-size: 27px !important;
font-weight: 600 !important;
line-height: 1.16 !important;
letter-spacing: -.015em !important;
color: #245C57 !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__line {
order: 2 !important;
width: 46px !important;
height: 2px !important;
margin: 9px 0 10px !important;
background: #E88400 !important;
}
/* ======================================================
META — NGAY DƯỚI TITLE
====================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__meta {
order: 3 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 8px 17px !important;
width: 100% !important;
margin: 0 0 16px !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__meta-item {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-family: "Raleway", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
color: #245C57 !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__icon {
color: #E88400 !important;
font-size: 14px !important;
line-height: 1 !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__meta-item
+ .zen-learning-program-showcase__meta-item::before {
content: "";
width: 4px;
height: 4px;
margin-right: 5px;
border-radius: 50%;
background: #7FA8A1;
}
/* ======================================================
DESCRIPTION
====================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__description {
order: 4 !important;
width: 100% !important;
margin: 0 !important;
font-family: "Raleway", sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.58 !important;
color: #245C57 !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__description-item {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
margin: 0 0 7px !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__description-item:last-child {
margin-bottom: 0 !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__description-icon {
position: relative !important;
flex: 0 0 14px !important;
width: 14px !important;
height: 16px !important;
margin-top: .24em !important;
border: 0 !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__description-icon::before {
content: "✧";
position: absolute;
top: 0;
left: 0;
color: #E88400;
font-family: Georgia, serif !important;
font-size: 14px !important;
line-height: 1 !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__description-icon::after {
display: none !important;
}
/* ======================================================
HIGHLIGHTS
====================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__highlights {
order: 5 !important;
width: calc(100% - 16px) !important;
max-width: none !important;
margin: 16px 0 0 16px !important;
padding-left: 14px !important;
border-left:
1px solid rgba(232,132,0,.36);
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 0 9px !important;
font-family: "Raleway", sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: .055em !important;
color: #245C57 !important;
text-transform: uppercase !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__label::after {
content: "";
width: 28px !important;
height: 2px !important;
background: #E88400 !important;
transform: rotate(-3deg);
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__highlights ul {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__highlights li {
position: relative;
padding-left: 18px !important;
font-family: "Raleway", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.5 !important;
color: #245C57 !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__highlights li::before {
content: "✦";
position: absolute;
top: .1em !important;
left: 0 !important;
width: auto !important;
height: auto !important;
background: none !important;
color: #E88400 !important;
font-family: Georgia, serif !important;
font-size: 11px !important;
transform: none !important;
}
/* ======================================================
CTA
====================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__cta {
position: relative;
z-index: 2;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
width: 100% !important;
gap: 7px !important;
margin-top: 18px !important;
font-family: "Raleway", sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #E88400 !important;
text-align: right !important;
text-decoration: none !important;
}
/* ======================================================
IMAGE — DESKTOP CHARACTER, TABLET SIZE
====================================================== */
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__media {
position: relative !important;
order: initial !important;
width: 100% !important;
max-width: 310px !important;
height: auto !important;
margin: 0 auto !important;
aspect-ratio: 4 / 5 !important;
isolation: isolate;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__media::before {
content: "";
position: absolute;
z-index: 0;
top: 10px !important;
left: -11px !important;
width: 100% !important;
height: 100% !important;
background: #E5EEE9 !important;
border-radius: 29px 8px 29px 8px !important;
transform: rotate(-2deg);
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__image {
position: relative !important;
z-index: 2;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
border-radius: 23px 6px 23px 6px !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__media::after {
content: "";
position: absolute;
z-index: 3;
top: -12px !important;
right: -13px !important;
width: 70px !important;
height: 70px !important;
border-top: 2px solid #E88400 !important;
border-right: 2px solid #E88400 !important;
border-radius: 0 27px 0 0 !important;
transform: rotate(4deg);
pointer-events: none;
}
}
/* ==========================================================
NARROW TABLET — 576–767
Vẫn 2 cột nhưng nén vừa đủ, KHÔNG chuyển thành mobile.
========================================================== */
@media (min-width: 576px) and (max-width: 767px) {
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase {
grid-template-columns:
minmax(0, 1.28fr)
minmax(210px, .72fr) !important;
column-gap: 24px !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__content {
padding: 22px 19px 20px !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__tagline {
font-size: 14px !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__title {
font-size: 23px !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__description {
font-size: 14px !important;
}
.type2-page--zen-learning
.summer-group.type2-programs
.zen-learning-program-showcase__media {
max-width: 255px !important;
}
}
/* ==========================================================
ZEN JUNIORS — TYPE2 TEAM EDITORIAL 4-COL 20261009
========================================================== */
.type2-page--zen-learning
.type2-team {
position: relative;
padding:
82px 0
78px;
overflow: hidden;
background:
#FFFFFF;
}
/* ==========================================================
HEADING
========================================================== */
.type2-page--zen-learning
.type2-team
.type2-team-heading {
display: block;
width:
min(
760px,
100%
);
margin:
0 auto
14px;
text-align: center;
}
.type2-page--zen-learning
.type2-team
.type2-team-title {
margin: 0;
font-family:
"Raleway",
Arial,
sans-serif;
font-size: 30px;
font-weight: 600;
line-height: 1.25;
color: #263333;
}
.type2-page--zen-learning
.type2-team
.type2-team-title-decor {
display: block;
margin-top: 7px;
font-family:
"Dancing Script",
"SVN-Dancing Script",
cursive;
font-size: 46px;
font-weight: 400;
line-height: 1.05;
color: #E88400;
}
.type2-page--zen-learning
.type2-team
.type2-team-description {
width:
min(
720px,
100%
);
margin:
0 auto
38px;
text-align: center;
font-family:
"Raleway",
Arial,
sans-serif;
font-size: 17px;
font-weight: 500;
line-height: 1.68;
color: #4A5555;
}
.type2-page--zen-learning
.type2-team
.type2-team-description
p {
margin: 0;
}
/* ==========================================================
GRID — DESKTOP 4 CỘT
========================================================== */
.type2-page--zen-learning
.type2-team
.type2-team-list {
display: grid;
grid-template-columns:
repeat(
4,
minmax(0, 1fr)
);
gap:
38px 28px;
align-items: start;
}
/* ==========================================================
CARD
========================================================== */
.type2-page--zen-learning
.type2-team
.type2-team-card {
min-width: 0;
margin: 0;
}
/* ==========================================================
PORTRAIT
========================================================== */
.type2-page--zen-learning
.type2-team
.type2-team-card__media {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
margin:
0 0
22px;
overflow: visible;
isolation: isolate;
}
/* Sage organic shape */
.type2-page--zen-learning
.type2-team
.type2-team-card__media::before {
content: "";
position: absolute;
z-index: 0;
width: 72%;
aspect-ratio: 1;
right: -7%;
bottom: -4%;
border-radius:
46% 54% 61% 39% /
55% 42% 58% 45%;
background:
rgba(
127,
168,
161,
.19
);
transform:
rotate(-9deg);
pointer-events: none;
}
/* Orange line accent */
.type2-page--zen-learning
.type2-team
.type2-team-card__media::after {
content: "";
position: absolute;
z-index: 0;
width: 34%;
aspect-ratio: 1;
left: -6%;
top: 7%;
border-radius:
50%;
border:
1px solid
rgba(
232,
132,
0,
.25
);
pointer-events: none;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__image,
.type2-page--zen-learning
.type2-team
.type2-team-card__image-placeholder {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
border-radius: 18px;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__image {
object-fit: cover;
object-position:
center top;
transition:
transform .32s ease;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__image-placeholder {
background:
linear-gradient(
145deg,
#F1F6F3,
#E5EFEB
);
}
/* ==========================================================
BODY
========================================================== */
.type2-page--zen-learning
.type2-team
.type2-team-card__body {
padding:
0 3px;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__name {
margin:
0 0
6px;
font-family:
"Open Sans",
Arial,
sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.32;
color: #263333;
}
/* ==========================================================
ROLE + SUBJECT — ALWAYS ONE LINE
========================================================== */
.type2-page--zen-learning
.type2-team
.type2-team-card__meta {
display: block;
width: 100%;
margin:
0 0
14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family:
"Raleway",
Arial,
sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1.45;
color: #245C57;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__role,
.type2-page--zen-learning
.type2-team
.type2-team-card__subject,
.type2-page--zen-learning
.type2-team
.type2-team-card__separator {
display: inline;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__separator {
margin:
0 5px;
color:
rgba(
36,
92,
87,
.50
);
}
/* ==========================================================
COACH SHARE — SOFT QUOTE
========================================================== */
.type2-page--zen-learning
.type2-team
.type2-team-card__share {
position: relative;
min-height: 94px;
padding:
20px 16px
15px;
border-radius: 12px;
background:
linear-gradient(
145deg,
rgba(
241,
246,
243,
.92
),
rgba(
255,
249,
241,
.78
)
);
}
.type2-page--zen-learning
.type2-team
.type2-team-card__share
p {
display: -webkit-box;
overflow: hidden;
margin: 0;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-family:
"Raleway",
Arial,
sans-serif;
font-size: 15px;
font-weight: 500;
font-style: italic;
line-height: 1.56;
color: #4A5555;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__quote {
position: absolute;
top: 4px;
left: 12px;
font-family:
Georgia,
serif;
font-size: 34px;
line-height: 1;
color:
rgba(
232,
132,
0,
.62
);
}
/* ==========================================================
HOVER
========================================================== */
@media (hover: hover) {
.type2-page--zen-learning
.type2-team
.type2-team-card:hover
.type2-team-card__image {
transform:
scale(1.022);
}
}
/* ==========================================================
TABLET NGANG — 3 CỘT
========================================================== */
@media (
min-width: 992px
) and (
max-width: 1199px
) {
.type2-page--zen-learning
.type2-team {
padding:
70px 0
72px;
}
.type2-page--zen-learning
.type2-team
.type2-team-title {
font-size: 26px;
}
.type2-page--zen-learning
.type2-team
.type2-team-title-decor {
font-size: 40px;
}
.type2-page--zen-learning
.type2-team
.type2-team-description {
margin-bottom: 34px;
font-size: 16px;
}
.type2-page--zen-learning
.type2-team
.type2-team-list {
grid-template-columns:
repeat(
3,
minmax(0, 1fr)
);
gap:
34px 24px;
}
}
/* ==========================================================
TABLET DỌC — 2 CỘT
========================================================== */
@media (
min-width: 576px
) and (
max-width: 991px
) {
.type2-page--zen-learning
.type2-team {
padding:
64px 0
68px;
}
.type2-page--zen-learning
.type2-team
.type2-team-title {
font-size: 26px;
}
.type2-page--zen-learning
.type2-team
.type2-team-title-decor {
font-size: 40px;
}
.type2-page--zen-learning
.type2-team
.type2-team-description {
margin-bottom: 32px;
font-size: 16px;
}
.type2-page--zen-learning
.type2-team
.type2-team-list {
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap:
36px 26px;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__name {
font-size: 19px;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__meta {
font-size: 15px;
}
}
/* ==========================================================
MOBILE — HORIZONTAL RAIL
========================================================== */
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-team {
padding:
54px 0
58px;
}
.type2-page--zen-learning
.type2-team
.type2-team-heading {
margin-bottom: 11px;
}
.type2-page--zen-learning
.type2-team
.type2-team-title {
font-size: 21px;
line-height: 1.3;
}
.type2-page--zen-learning
.type2-team
.type2-team-title-decor {
margin-top: 8px;
font-size: 34px;
}
.type2-page--zen-learning
.type2-team
.type2-team-description {
margin-bottom: 26px;
font-size: 15px;
line-height: 1.65;
}
.type2-page--zen-learning
.type2-team
.type2-team-list {
display: flex;
width:
calc(
100% + 30px
);
margin-right: -15px;
gap: 18px;
overflow-x: auto;
overflow-y: hidden;
padding:
0 15px
10px 0;
scroll-snap-type:
x mandatory;
-webkit-overflow-scrolling:
touch;
scrollbar-width:
none;
}
.type2-page--zen-learning
.type2-team
.type2-team-list::-webkit-scrollbar {
display: none;
}
.type2-page--zen-learning
.type2-team
.type2-team-card {
flex:
0 0
min(
82vw,
320px
);
width:
min(
82vw,
320px
);
scroll-snap-align:
start;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__media {
margin-bottom: 19px;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__name {
font-size: 18px;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__meta {
margin-bottom: 12px;
font-size: 14px;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__share {
min-height: 88px;
padding:
19px 15px
14px;
}
.type2-page--zen-learning
.type2-team
.type2-team-card__share
p {
font-size: 14px;
}
}
/* ==========================================================
END ZEN JUNIORS — TYPE2 TEAM EDITORIAL 4-COL 20261009
========================================================== */
/* ==========================================================
ZEN JUNIORS — TEAM HEADING RULE 20261009
Chỉ sửa heading, không đụng card
========================================================== */
.type2-page--zen-learning
.type2-team
.type2-team-heading {
display: flex;
align-items: baseline;
justify-content: center;
gap: 12px;
width: 100%;
margin:
0 auto
16px;
text-align: center;
}
.type2-page--zen-learning
.type2-team
.type2-team-title {
margin: 0 !important;
font-family:
"Raleway",
Arial,
sans-serif !important;
font-size: 30px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: #263333 !important;
}
.type2-page--zen-learning
.type2-team
.type2-team-title-decor {
display: inline-block !important;
margin: 0 !important;
transform:
translateY(10px);
font-family:
"Dancing Script",
"SVN-Dancing Script",
cursive !important;
font-size: 46px !important;
font-weight: 400 !important;
line-height: 1 !important;
white-space: nowrap;
color: #E88400 !important;
}
/* TABLET */
@media (
min-width: 576px
) and (
max-width: 1199px
) {
.type2-page--zen-learning
.type2-team
.type2-team-title {
font-size: 26px !important;
}
.type2-page--zen-learning
.type2-team
.type2-team-title-decor {
transform:
translateY(8px);
font-size: 40px !important;
}
}
/* MOBILE */
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-team
.type2-team-heading {
display: block;
}
.type2-page--zen-learning
.type2-team
.type2-team-title {
font-size: 21px !important;
}
.type2-page--zen-learning
.type2-team
.type2-team-title-decor {
display: block !important;
margin-top: 8px !important;
transform: none;
font-size: 34px !important;
}
}
/* ==========================================================
ZEN JUNIORS — TEAM HEADING / DESCRIPTION ALIGN 20261009
========================================================== */
.type2-page--zen-learning
.type2-team
.type2-team-heading {
width:
min(
760px,
100%
);
justify-content:
flex-start;
text-align:
left;
}
.type2-page--zen-learning
.type2-team
.type2-team-description {
width:
min(
760px,
100%
);
margin-left:
auto;
margin-right:
auto;
text-align:
left;
}
/* MOBILE giữ căn giữa như các section Type2 khác */
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-team
.type2-team-heading,
.type2-page--zen-learning
.type2-team
.type2-team-description {
text-align:
center;
}
}
/* ==========================================================
ZEN JUNIORS — TEAM HEADING COPY TYPE2 RULE 20261009
Copy chuẩn từ Gallery
========================================================== */
.type2-page--zen-learning
.type2-team
.type2-team-heading {
display: flex !important;
align-items: baseline !important;
flex-wrap: wrap !important;
column-gap: 14px !important;
row-gap: 6px !important;
width: 100% !important;
margin:
0 0
14px !important;
padding: 0 !important;
text-align: left !important;
}
.type2-page--zen-learning
.type2-team
.type2-team-title {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
font-family:
"Raleway",
sans-serif !important;
font-size: 30px !important;
font-weight: 600 !important;
font-style: normal !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
color: #263333 !important;
text-transform: none !important;
}
.type2-page--zen-learning
.type2-team
.type2-team-title-decor {
display: inline-block !important;
margin: 0 !important;
padding: 0 !important;
font-family:
"Dancing Script SVN",
"Dancing Script",
cursive !important;
font-size: 46px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1 !important;
letter-spacing: 0 !important;
color: #E88400 !important;
text-transform: none !important;
transform:
translateY(10px);
}
/* DESCRIPTION — cùng mép trái với heading */
.type2-page--zen-learning
.type2-team
.type2-team-description {
width: 100% !important;
max-width: 760px !important;
margin:
0 0
38px !important;
text-align: left !important;
}
/* TABLET */
@media (
min-width: 576px
) and (
max-width: 991px
) {
.type2-page--zen-learning
.type2-team
.type2-team-title {
font-size: 26px !important;
}
.type2-page--zen-learning
.type2-team
.type2-team-title-decor {
font-size: 40px !important;
transform:
translateY(8px);
}
}
/* MOBILE */
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-team
.type2-team-heading {
display: block !important;
text-align: center !important;
}
.type2-page--zen-learning
.type2-team
.type2-team-title {
font-size: 21px !important;
}
.type2-page--zen-learning
.type2-team
.type2-team-title-decor {
display: block !important;
margin-top: 8px !important;
font-size: 34px !important;
transform: none;
}
.type2-page--zen-learning
.type2-team
.type2-team-description {
text-align: center !important;
}
}
/* ==========================================================
ZEN JUNIORS — TEAM DECOR FONT FORCE 20261009
Cả "Zen Learning" dùng cùng font decor
========================================================== */
html body
.type2-page--zen-learning
.type2-team
.type2-team-title-decor {
display: inline-block !important;
font-family:
"Dancing Script SVN",
"Dancing Script",
cursive !important;
font-size: 46px !important;
font-weight: 400 !important;
font-style: normal !important;
line-height: 1 !important;
letter-spacing: 0 !important;
color: #E88400 !important;
text-transform: none !important;
transform: translateY(10px) !important;
}
/* ==========================================================
ZEN JUNIORS — TEAM FONT EXCEPTIONS 20261009
Thắng page-wide Raleway reset
========================================================== */
/* DECOR TITLE — Dancing Script SVN */
.type2-page--zen-learning
.type2-team
.type2-team-heading
.type2-team-title-decor {
font-family:
"Dancing Script SVN",
cursive !important;
}
/* COACH NAME — Open Sans */
.type2-page--zen-learning
.type2-team
.type2-team-card
.type2-team-card__body
.type2-team-card__name {
font-family:
"Opensan",
"Open Sans",
Arial,
sans-serif !important;
}
/* ==========================================================
ZEN JUNIORS — TEAM FONT EXCEPTIONS 20261009
Thắng page-wide Raleway reset
========================================================== */
/* DECOR TITLE — Dancing Script SVN */
.type2-page--zen-learning
.type2-team
.type2-team-heading
.type2-team-title-decor {
font-family:
"Dancing Script SVN",
cursive !important;
}
/* COACH NAME — Open Sans */
.type2-page--zen-learning
.type2-team
.type2-team-card
.type2-team-card__body
.type2-team-card__name {
font-family:
"Opensan",
"Open Sans",
Arial,
sans-serif !important;
}
/* ==========================================================
ZEN JUNIORS — TEAM MOBILE TITLE SPACING
Title 1 + Title 2 gần nhau, mô tả cách xa hơn
========================================================== */
@media (max-width: 575px) {
.type2-page--zen-learning .type2-team-head {
text-align: left !important;
align-items: flex-start !important;
}
.type2-page--zen-learning .type2-team-head__title,
.type2-page--zen-learning .type2-team-section__title,
.type2-page--zen-learning .type2-team-heading {
margin-bottom: 0 !important;
}
.type2-page--zen-learning .type2-team-title-main,
.type2-page--zen-learning .type2-team-head__title-main {
margin: 0 0 2px !important;
line-height: 1.08 !important;
}
.type2-page--zen-learning .type2-team-title-decor,
.type2-page--zen-learning .type2-team-head__title-decor {
display: block !important;
margin: 0 !important;
line-height: 1.02 !important;
}
.type2-page--zen-learning .type2-team-head__desc,
.type2-page--zen-learning .type2-team-section__desc,
.type2-page--zen-learning .type2-team-description {
margin-top: 14px !important;
}
}
/* ZEN JUNIORS — TEAM MOBILE HEADING SPACING FIX */
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-team
.type2-team-heading {
margin-bottom: 0 !important;
}
.type2-page--zen-learning
.type2-team
.type2-team-title {
margin: 0 !important;
line-height: 1.12 !important;
}
.type2-page--zen-learning
.type2-team
.type2-team-title-decor {
margin: -2px 0 0 !important;
line-height: 1 !important;
}
.type2-page--zen-learning
.type2-team
.type2-team-description {
margin-top: 20px !important;
}
}
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-team
.type2-team-description {
margin-top: 28px !important;
}
}
/* ZEN JUNIORS — TEAM DESCRIPTION ICON */
.type2-page--zen-learning
.type2-team
.type2-team-description::before {
content: "✦";
display: inline-block;
margin-right: 8px;
font-family: Arial, sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1;
color: #E88400;
transform: translateY(-1px);
}
/* Mobile — nhỏ hơn một chút */
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-team
.type2-team-description::before {
margin-right: 6px;
font-size: 11px !important;
}
}
/* ZEN JUNIORS — TEAM DESCRIPTION 3 SPARKLES */
.type2-page--zen-learning
.type2-team
.type2-team-description::before {
content: "✦ ✦ ✦";
letter-spacing: 1px;
}
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-team
.type2-team-description::before {
content: "✦ ✦ ✦";
letter-spacing: 0;
}
}
/* ==========================================================
EVERZEN STUDENTS OVERLAY CSS START
ZEN JUNIORS — PHOTO + QUOTE BELOW
========================================================== */
/* ==========================================================
1. SECTION
========================================================== */
.type2-page--zen-learning
.type2-students {
position: relative;
overflow: hidden;
padding:
72px 0
78px;
background:
var(
--zen-learning-bg-sage-soft,
#EFF4F1
);
}
/* ==========================================================
2. HEADER
========================================================== */
.type2-page--zen-learning
.type2-students
.type2-students__head {
width:
min(
760px,
100%
);
margin:
0 auto
40px;
text-align: center;
}
.type2-page--zen-learning
.type2-students
.type2-students__heading {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
column-gap: 14px;
row-gap: 5px;
width: 100%;
margin:
0 0
14px;
padding: 0;
}
.type2-page--zen-learning
.type2-students
.type2-students__title {
font-family:
"Raleway",
Arial,
sans-serif !important;
font-size: 30px;
font-weight: 600;
line-height: 1.25;
color: #263333;
}
.type2-page--zen-learning
.type2-students
.type2-students__title-decor {
display: inline-block;
transform:
translateY(9px);
font-family:
"Dancing Script SVN",
"Dancing Script",
cursive !important;
font-size: 46px;
font-weight: 400;
line-height: 1;
color: #E88400;
white-space: nowrap;
}
.type2-page--zen-learning
.type2-students
.type2-students__description {
width:
min(
680px,
100%
);
margin: 0 auto;
font-family:
"Opensan",
"Open Sans",
Arial,
sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.68;
color: #4A5555;
text-align: center;
}
.type2-page--zen-learning
.type2-students
.type2-students__description
p {
margin: 0;
}
/* ==========================================================
3. LIST
==========================================================
*
* Desktop 3 card.
*
* Flex để:
* - 2 card -> tự căn giữa
* - 4 card -> hàng dưới tự căn giữa
* ========================================================== */
.type2-page--zen-learning
.type2-students
.type2-students__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap:
32px
28px;
width: 100%;
margin: 0;
padding: 0;
}
/* ==========================================================
4. CARD
========================================================== */
.type2-page--zen-learning
.type2-students
.type2-student-card {
flex:
0 1
calc(
(100% - 56px) / 3
);
width:
calc(
(100% - 56px) / 3
);
max-width: 370px;
min-width: 0;
margin: 0;
padding: 0;
}
/* ==========================================================
5. PHOTO
========================================================== */
.type2-page--zen-learning
.type2-students
.type2-student-card__photo {
position: relative;
width: 100%;
aspect-ratio:
16 / 9;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 18px;
background: #DCE7E2;
box-shadow:
0 3px 12px
rgba(
25,
43,
41,
.055
);
isolation: isolate;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__image {
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
object-fit: cover;
object-position: center center;
border: 0;
transform:
scale(1.001);
transition:
transform
.42s
cubic-bezier(
.2,
.7,
.2,
1
);
}
/* ==========================================================
6. NAME LABEL
==========================================================
*
* Nằm trên ảnh.
* Nhỏ, chắc, rõ.
* ========================================================== */
.type2-page--zen-learning
.type2-students
.type2-student-card__name {
position: absolute;
z-index: 2;
left: 18px;
bottom: 15px;
display: inline-flex;
align-items: center;
width: auto;
max-width:
calc(
100% - 36px
);
min-height: 34px;
margin: 0;
padding:
7px
13px;
border-radius:
5px
12px
12px
5px;
background:
rgba(
36,
92,
87,
.94
);
box-shadow:
0 4px 12px
rgba(
20,
35,
33,
.14
);
color: #FFFFFF;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__name-accent {
flex:
0 0
3px;
width: 3px;
height: 18px;
margin-right: 9px;
border-radius: 2px;
background: #E88400;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__name-text {
overflow: hidden;
font-family:
"Opensan",
"Open Sans",
Arial,
sans-serif !important;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
letter-spacing:
.025em;
color: #FFFFFF;
white-space: nowrap;
text-overflow: ellipsis;
text-transform: uppercase;
}
/* ==========================================================
7. QUOTE PANEL
==========================================================
*
* Đây là phần nằm HOÀN TOÀN dưới ảnh.
*
* Không opacity chữ.
* Không overlay ảnh.
*
* Visual:
* - nền kem sáng
* - bo mềm
* - dấu quote cam
* - line cam
* - quote italic
* ========================================================== */
.type2-page--zen-learning
.type2-students
.type2-student-card__quote {
position: relative;
display: grid;
grid-template-columns:
38px
2px
minmax(0, 1fr);
column-gap: 15px;
align-items: start;
width: 100%;
min-height: 150px;
margin:
12px 0
0;
padding:
24px
24px
23px;
border:
1px solid
rgba(
62,
91,
84,
.055
);
border-radius:
22px;
background:
#FBF7EF;
box-shadow:
0 8px 22px
rgba(
31,
78,
70,
.075
);
color: #263333;
}
/* ==========================================================
8. QUOTE MARK
========================================================== */
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-mark {
display: block;
margin:
-3px 0
0;
padding: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 44px;
font-weight: 700;
font-style: normal;
line-height: .82;
color: #E88400;
text-align: center;
}
/* ==========================================================
9. ORANGE VERTICAL LINE
========================================================== */
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-line {
display: block;
width: 2px;
height: 100%;
min-height: 92px;
border-radius: 2px;
background:
rgba(
232,
132,
0,
.94
);
}
/* ==========================================================
10. QUOTE TYPOGRAPHY
==========================================================
*
* Font:
* Open Sans
*
* Style:
* italic — intentional
*
* Không dùng opacity.
* Không line-clamp desktop.
*
* ========================================================== */
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-text {
min-width: 0;
margin:
-1px 0
0;
padding: 0;
font-family:
"Opensan",
"Open Sans",
Arial,
sans-serif !important;
font-size: 16px;
font-weight: 400;
font-style: italic;
line-height: 1.58;
letter-spacing: 0;
color: #314744;
opacity: 1;
text-align: left;
}
/* ==========================================================
11. HOVER
========================================================== */
@media (
hover: hover
) and (
pointer: fine
) {
.type2-page--zen-learning
.type2-students
.type2-student-card:hover
.type2-student-card__image {
transform:
scale(1.025);
}
}
/* ==========================================================
12. TABLET
========================================================== */
@media (
min-width: 576px
) and (
max-width: 991px
) {
.type2-page--zen-learning
.type2-students {
padding:
64px 0
70px;
}
.type2-page--zen-learning
.type2-students
.type2-students__head {
margin-bottom:
34px;
}
.type2-page--zen-learning
.type2-students
.type2-students__title {
font-size: 26px;
}
.type2-page--zen-learning
.type2-students
.type2-students__title-decor {
transform:
translateY(7px);
font-size: 40px;
}
/*
* 2 card / row
*/
.type2-page--zen-learning
.type2-students
.type2-student-card {
flex:
0 1
calc(
(100% - 24px) / 2
);
width:
calc(
(100% - 24px) / 2
);
max-width: 370px;
}
.type2-page--zen-learning
.type2-students
.type2-students__list {
gap: 28px 24px;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__quote {
grid-template-columns:
34px
2px
minmax(0, 1fr);
column-gap: 13px;
min-height: 142px;
padding:
21px
20px;
border-radius: 19px;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-mark {
font-size: 40px;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-text {
font-size: 15px;
line-height: 1.56;
}
}
/* ==========================================================
13. MOBILE
========================================================== */
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-students {
padding:
56px 0
62px;
}
.type2-page--zen-learning
.type2-students
.type2-students__head {
margin-bottom:
30px;
}
.type2-page--zen-learning
.type2-students
.type2-students__heading {
display: block;
margin-bottom: 13px;
}
.type2-page--zen-learning
.type2-students
.type2-students__title {
display: block;
font-size: 21px;
}
.type2-page--zen-learning
.type2-students
.type2-students__title-decor {
display: block;
margin-top: 6px;
transform: none;
font-size: 34px;
}
.type2-page--zen-learning
.type2-students
.type2-students__description {
font-size: 15px;
line-height: 1.62;
}
.type2-page--zen-learning
.type2-students
.type2-students__list {
display: block;
}
.type2-page--zen-learning
.type2-students
.type2-student-card {
width: 100%;
max-width: none;
margin:
0 0
26px;
}
.type2-page--zen-learning
.type2-students
.type2-student-card:last-child {
margin-bottom: 0;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__photo {
aspect-ratio:
16 / 9;
border-radius: 14px;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__name {
left: 14px;
bottom: 13px;
min-height: 31px;
padding:
6px
11px;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__name-accent {
height: 16px;
margin-right: 8px;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__name-text {
font-size: 12px;
}
/*
* Quote mobile vẫn giữ đúng visual desktop.
*/
.type2-page--zen-learning
.type2-students
.type2-student-card__quote {
grid-template-columns:
31px
2px
minmax(0, 1fr);
column-gap: 11px;
min-height: 0;
margin-top: 10px;
padding:
18px
17px
19px;
border-radius: 17px;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-mark {
font-size: 36px;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-line {
min-height: 78px;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-text {
font-size: 14.5px;
line-height: 1.55;
}
}
/* ==========================================================
14. VERY SMALL MOBILE
========================================================== */
@media (max-width: 359px) {
.type2-page--zen-learning
.type2-students
.type2-student-card__quote {
grid-template-columns:
27px
2px
minmax(0, 1fr);
column-gap: 9px;
padding:
16px
14px;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-mark {
font-size: 32px;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-text {
font-size: 14px;
}
}
/* ==========================================================
15. REDUCED MOTION
========================================================== */
@media (
prefers-reduced-motion:
reduce
) {
.type2-page--zen-learning
.type2-students
.type2-student-card__image {
transition: none;
}
}
/* ==========================================================
EVERZEN STUDENTS OVERLAY CSS END
========================================================== */
/* ==========================================================
STUDENTS — QUOTE NO VERTICAL LINE
Quote mark + text, dành tối đa chiều rộng cho nội dung
========================================================== */
.type2-page--zen-learning
.type2-students
.type2-student-card__quote {
grid-template-columns:
30px
minmax(0, 1fr) !important;
column-gap: 10px !important;
min-height: 132px !important;
padding:
22px
22px
21px !important;
}
/* Bỏ hoàn toàn gạch cam dọc */
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-line {
display: none !important;
}
/* Dấu quote gọn hơn */
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-mark {
margin-top: -1px !important;
font-size: 36px !important;
line-height: .85 !important;
}
/* Chữ chiếm toàn bộ phần còn lại */
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-text {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
font-size: 16px !important;
font-weight: 400 !important;
font-style: italic !important;
line-height: 1.52 !important;
color: #314744 !important;
}
/* TABLET */
@media (
min-width: 576px
) and (
max-width: 991px
) {
.type2-page--zen-learning
.type2-students
.type2-student-card__quote {
grid-template-columns:
28px
minmax(0, 1fr) !important;
column-gap: 9px !important;
min-height: 124px !important;
padding:
20px
19px !important;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-mark {
font-size: 34px !important;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-text {
font-size: 15px !important;
line-height: 1.52 !important;
}
}
/* MOBILE */
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-students
.type2-student-card__quote {
grid-template-columns:
26px
minmax(0, 1fr) !important;
column-gap: 8px !important;
min-height: 0 !important;
padding:
17px
16px
18px !important;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-mark {
font-size: 32px !important;
}
.type2-page--zen-learning
.type2-students
.type2-student-card__quote-text {
font-size: 14.5px !important;
line-height: 1.5 !important;
}
}
/* ==========================================================
STUDENTS — QUOTE COMPACT HEIGHT
========================================================== */
.type2-page--zen-learning
.type2-students
.type2-student-card__quote {
min-height: 104px !important;
padding:
13px
22px !important;
}
/* TABLET */
@media (
min-width: 576px
) and (
max-width: 991px
) {
.type2-page--zen-learning
.type2-students
.type2-student-card__quote {
min-height: 98px !important;
padding:
12px
19px !important;
}
}
/* MOBILE */
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-students
.type2-student-card__quote {
min-height: 0 !important;
padding:
11px
16px !important;
}
}
/* ==========================================================
EVERZEN ZEN JUNIORS — CONNECT DECOR START
========================================================== */
/*
* Chỉ Zen Learning.
*
* before-conect.png:
* - bỏ phần line trái
* - giữ phần lều
*
* after-conect.png:
* - giữ toàn bộ
*
* Tất cả decor còn lại chuyển sang cam Everzen.
*/
.type2-page--zen-learning
.section-connect
.image-before {
/*
* Line trái + lều nằm chung ảnh.
* Giữ phần bên phải của asset, nơi có lều.
*/
clip-path: inset(0 0 0 63%);
-webkit-clip-path: inset(0 0 0 63%);
}
.type2-page--zen-learning
.section-connect
.image-before img,
.type2-page--zen-learning
.section-connect
.image-after img {
/*
* Ép toàn bộ line-art thành cam #E88400.
*/
filter:
brightness(0)
saturate(100%)
invert(52%)
sepia(97%)
saturate(1900%)
hue-rotate(8deg)
brightness(101%)
contrast(101%);
}
/*
* Không thay opacity / kích thước / vị trí legacy.
* Chỉ thay hình học và màu decor.
*/
/* ==========================================================
EVERZEN ZEN JUNIORS — CONNECT DECOR END
========================================================== */
/* ==========================================================
ZEN JUNIORS — WHY DESCRIPTION ICON
Compass = định hướng / hành trình trải nghiệm
========================================================== */
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description {
position: relative;
padding-left: 31px;
}
/* Compass line icon */
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description::before {
content: "";
position: absolute;
top: 4px;
left: 0;
width: 19px;
height: 19px;
background-color: #E88400;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M15.5 8.5l-2.1 4.9-4.9 2.1 2.1-4.9 4.9-2.1z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='1' fill='black'/%3E%3C/svg%3E")
center / contain
no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M15.5 8.5l-2.1 4.9-4.9 2.1 2.1-4.9 4.9-2.1z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='1' fill='black'/%3E%3C/svg%3E")
center / contain
no-repeat;
opacity: .88;
}
/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description {
padding-left: 29px;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description::before {
top: 3px;
width: 18px;
height: 18px;
}
}
/* Mobile */
@media (max-width: 575px) {
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description {
padding-left: 26px;
}
.type2-page--zen-learning
.section-why__summer.type2-why
.type2-why-description::before {
top: 3px;
width: 16px;
height: 16px;
}
}
/* ==========================================================
ZEN JUNIORS — AUDIENCE DESCRIPTION ICON START
Family / people = đối tượng phù hợp
========================================================== */
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description {
position: relative;
padding-left: 31px;
}
/*
* Icon nhóm người / gia đình.
* Nhẹ, nét mảnh, cam Everzen.
*/
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description::before {
content: "";
position: absolute;
top: 4px;
left: 0;
width: 20px;
height: 20px;
background-color: #E88400;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='2.7' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='5.5' cy='9' r='2' fill='none' stroke='black' stroke-width='1.4'/%3E%3Ccircle cx='18.5' cy='9' r='2' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M7.5 19c.4-4 2.1-6 4.5-6s4.1 2 4.5 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M1.8 18c.2-3.1 1.5-4.7 3.7-4.7 1.2 0 2.1.4 2.8 1.2' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M22.2 18c-.2-3.1-1.5-4.7-3.7-4.7-1.2 0-2.1.4-2.8 1.2' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")
center / contain
no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='2.7' fill='none' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='5.5' cy='9' r='2' fill='none' stroke='black' stroke-width='1.4'/%3E%3Ccircle cx='18.5' cy='9' r='2' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M7.5 19c.4-4 2.1-6 4.5-6s4.1 2 4.5 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M1.8 18c.2-3.1 1.5-4.7 3.7-4.7 1.2 0 2.1.4 2.8 1.2' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M22.2 18c-.2-3.1-1.5-4.7-3.7-4.7-1.2 0-2.1.4-2.8 1.2' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")
center / contain
no-repeat;
opacity: .88;
}
/* Tablet */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description {
padding-left: 29px;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description::before {
top: 3px;
width: 18px;
height: 18px;
}
}
/* Mobile */
@media (max-width: 575px) {
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description {
padding-left: 26px;
}
.type2-page--zen-learning
.advantages-summer.type2-audience
.type2-audience-description::before {
top: 3px;
width: 16px;
height: 16px;
}
}
/* ==========================================================
ZEN JUNIORS — AUDIENCE DESCRIPTION ICON END
========================================================== */
/* ==========================================================
ZEN JUNIORS — STUDENTS ICON DECOR START
========================================================== */
/* ----------------------------------------------------------
SECTION BACKGROUND DECOR
---------------------------------------------------------- */
.type2-page--zen-learning
.type2-students {
position: relative;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='190' viewBox='0 0 420 190'%3E%3Cg fill='none' stroke='%23E88400' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M118 44 C190 10 271 25 323 70 C348 91 363 115 411 119' stroke-width='2.2' opacity='.16'/%3E%3Cpath d='M202 84 C248 63 292 66 335 91' stroke-width='1.5' opacity='.10'/%3E%3Ccircle cx='351' cy='40' r='7' stroke-width='1.5' opacity='.16'/%3E%3Ccircle cx='351' cy='40' r='2' fill='%23E88400' stroke='none' opacity='.22'/%3E%3Cpath d='M384 22 L388 31 L397 35 L388 39 L384 48 L380 39 L371 35 L380 31 Z' fill='%23E88400' stroke='none' opacity='.18'/%3E%3Cpath d='M320 20 L322.5 25.5 L328 28 L322.5 30.5 L320 36 L317.5 30.5 L312 28 L317.5 25.5 Z' fill='%23E88400' stroke='none' opacity='.14'/%3E%3Cpath d='M405 73 L407 77 L411 79 L407 81 L405 85 L403 81 L399 79 L403 77 Z' fill='%23E88400' stroke='none' opacity='.13'/%3E%3C/g%3E%3C/svg%3E");
background-repeat:
no-repeat;
background-position:
right 22px top 14px;
background-size:
390px auto;
}
/* Đảm bảo nội dung nằm trên decor */
.type2-page--zen-learning
.type2-students
> .container {
position: relative;
z-index: 2;
}
/* ----------------------------------------------------------
DESCRIPTION ICON
Huy chương / ngôi sao = ghi nhận học viên nổi bật
---------------------------------------------------------- */
/*
* Bắt cả các convention class Students hiện tại,
* nhưng vẫn chỉ nằm trong section .type2-students.
*/
.type2-page--zen-learning
.type2-students
.type2-students-description,
.type2-page--zen-learning
.type2-students
.type2-students__description,
.type2-page--zen-learning
.type2-students
[class*="students-description"],
.type2-page--zen-learning
.type2-students
[class*="students__description"] {
position: relative;
display: inline-block;
padding-left: 28px;
}
/* Medal / star icon */
.type2-page--zen-learning
.type2-students
.type2-students-description::before,
.type2-page--zen-learning
.type2-students
.type2-students__description::before,
.type2-page--zen-learning
.type2-students
[class*="students-description"]::before,
.type2-page--zen-learning
.type2-students
[class*="students__description"]::before {
content: "";
position: absolute;
top: 2px;
left: 0;
width: 18px;
height: 18px;
background-color: #E88400;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M9 13l-1.5 7L12 17.5 16.5 20 15 13' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12 6.2l.9 1.8 2 .3-1.45 1.4.35 2-1.8-.95-1.8.95.35-2L9.1 8.3l2-.3z' fill='black'/%3E%3C/svg%3E")
center / contain
no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='9' r='5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M9 13l-1.5 7L12 17.5 16.5 20 15 13' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M12 6.2l.9 1.8 2 .3-1.45 1.4.35 2-1.8-.95-1.8.95.35-2L9.1 8.3l2-.3z' fill='black'/%3E%3C/svg%3E")
center / contain
no-repeat;
opacity: .86;
}
/* ----------------------------------------------------------
TABLET
---------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 991px) {
.type2-page--zen-learning
.type2-students {
background-position:
right -35px top 12px;
background-size:
300px auto;
}
}
/* ----------------------------------------------------------
MOBILE
---------------------------------------------------------- */
@media (max-width: 575px) {
.type2-page--zen-learning
.type2-students {
background-position:
right -62px top 8px;
background-size:
220px auto;
}
.type2-page--zen-learning
.type2-students
.type2-students-description,
.type2-page--zen-learning
.type2-students
.type2-students__description,
.type2-page--zen-learning
.type2-students
[class*="students-description"],
.type2-page--zen-learning
.type2-students
[class*="students__description"] {
padding-left: 24px;
}
.type2-page--zen-learning
.type2-students
.type2-students-description::before,
.type2-page--zen-learning
.type2-students
.type2-students__description::before,
.type2-page--zen-learning
.type2-students
[class*="students-description"]::before,
.type2-page--zen-learning
.type2-students
[class*="students__description"]::before {
width: 15px;
height: 15px;
top: 2px;
}
}
/* ==========================================================
ZEN JUNIORS — STUDENTS ICON DECOR END
========================================================== */
/* Learning Layer 1 structure wiring — visual refinement follows separately. */
.type2-page--zen-learning .learning-course-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
}
.type2-page--zen-learning .learning-course-card { min-width: 0; }
.type2-page--zen-learning .learning-course-card__image { display: block; }
.type2-page--zen-learning .learning-course-card__image img {
display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
}
.type2-page--zen-learning .learning-course-card h3 { margin: 18px 0 12px; }
.type2-page--zen-learning .learning-course-card .btn { margin-top: 16px; }
.type2-page--zen-learning .learning-section-description { margin: 20px 0 28px; }
.type2-page--zen-learning .learning-corporate-items article { margin-bottom: 24px; }
.type2-page--zen-learning .learning-corporate-image { display: block; width: 100%; height: auto; }
.type2-page--zen-learning .learning-faq-item { padding: 18px 0; border-bottom: 1px solid #ddd; }
.type2-page--zen-learning .learning-faq-item summary { cursor: pointer; font-weight: 600; }
.type2-page--zen-learning .learning-faq-item .s-content { margin-top: 14px; }
.type2-page--zen-learning .learning-form-help { margin: 20px 0; }
.type2-page--zen-learning .learning-hero-logo { margin-bottom: 24px; }
.type2-page--zen-learning .type2-hero .learning-hero-logo__image {
position: static; display: block; width: auto; height: auto;
max-width: 200px; max-height: 40px; object-fit: contain; transform: none;
}
.type2-page--zen-learning .type2-hero-cta--secondary { margin-top: 12px; }
@media (max-width: 991px) {
.type2-page--zen-learning .learning-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.type2-page--zen-learning .learning-corporate-image { margin-top: 24px; }
}
@media (max-width: 575px) {
.type2-page--zen-learning .learning-course-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Zen Learning Banner — Averta hierarchy and responsive natural flow. */
@font-face {
font-family: "Learning Averta";
src: url("../fonts/Averta-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Learning Averta";
src: url("../fonts/Averta-Bold.otf") format("opentype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
#zen-learning-hero.learning-hero {
display: block !important;
position: relative;
isolation: isolate;
max-height: none !important;
overflow: hidden;
background: #25345F;
}
#zen-learning-hero.learning-hero::before {
content: "";
display: block !important;
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(90deg, rgba(22, 32, 57, .91) 0%, rgba(37, 52, 95, .75) 40%, rgba(37, 52, 95, .28) 75%, rgba(37, 52, 95, .1) 100%);
}
#zen-learning-hero > .learning-hero__background {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
#zen-learning-hero > .container {
position: relative !important;
inset: auto !important;
transform: none !important;
width: 100%;
max-width: 1280px;
height: auto !important;
min-height: clamp(560px, 36vw, 680px);
padding: 64px 32px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: flex-start;
z-index: 2;
}
#zen-learning-hero .container .ct-text {
position: static !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100%;
max-width: 740px;
min-width: 0;
}
#zen-learning-hero .learning-hero-logo {
width: fit-content;
margin: 0 0 36px;
padding: 0;
}
#zen-learning-hero .learning-hero-logo .learning-hero-logo__image {
position: static;
display: block;
width: auto;
height: auto;
max-width: 200px;
max-height: 30px;
object-fit: contain;
transform: none;
}
#zen-learning-hero .learning-hero-logo__text {
font-family: "Learning Averta", sans-serif !important;
font-size: 18px;
font-weight: 700;
letter-spacing: .09em;
color: #fff;
}
#zen-learning-hero .container .ct-text .title {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 16px;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
}
#zen-learning-hero .container .ct-text .title > .text,
#zen-learning-hero .container .ct-text .title > .text-decor {
display: block;
position: static !important;
flex: 0 1 auto !important;
width: auto !important;
max-width: 100%;
margin: 0 !important;
padding: 0;
transform: none !important;
font-family: "Learning Averta", sans-serif !important;
font-style: normal !important;
letter-spacing: -.015em;
text-transform: none !important;
text-shadow: none !important;
white-space: normal !important;
overflow-wrap: break-word;
color: #fff !important;
}
#zen-learning-hero .container .ct-text .title > .text {
font-size: 52px !important;
line-height: 1.14;
font-weight: 700 !important;
}
#zen-learning-hero .container .ct-text .title > .text-decor {
font-size: 40px !important;
line-height: 1.2;
font-weight: 400 !important;
color: rgba(255,255,255,.94) !important;
}
#zen-learning-hero .type2-hero-body {
display: block;
width: 100% !important;
max-width: 650px;
margin: 28px 0 0 !important;
text-align: left;
}
#zen-learning-hero .type2-hero-subtitle,
#zen-learning-hero .type2-hero-subtitle p {
font-family: "NotoSan", sans-serif !important;
font-size: 17px !important;
font-weight: 400 !important;
font-style: normal;
line-height: 1.65;
color: rgba(255,255,255,.92);
text-align: left !important;
text-align-last: auto !important;
text-shadow: none;
margin: 0;
}
#zen-learning-hero .learning-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
#zen-learning-hero .type2-hero-cta {
width: auto;
margin: 0;
padding: 0;
text-align: left;
}
#zen-learning-hero .type2-hero-cta .learning-hero-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 14px 24px;
border: 1px solid transparent;
border-radius: 8px;
font-family: "Learning Averta", sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
font-style: normal !important;
line-height: 1.35;
letter-spacing: 0 !important;
text-transform: none !important;
text-shadow: none !important;
text-decoration: none;
color: #fff !important;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
#zen-learning-hero .learning-hero-action--primary {
background: linear-gradient(115deg, #45579A, #394C8A);
border-color: rgba(255,255,255,.16) !important;
box-shadow: none;
}
#zen-learning-hero .learning-hero-action--secondary {
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.58) !important;
box-shadow: none;
}
#zen-learning-hero .learning-hero-action--primary:hover {
background: linear-gradient(115deg, #5063AA, #405596);
transform: translateY(-1px);
}
#zen-learning-hero .learning-hero-action--secondary:hover {
background: rgba(255,255,255,.12);
border-color: #fff !important;
}
#zen-learning-hero .learning-hero-action:focus-visible {
outline: 2px solid #fff;
outline-offset: 4px;
}
@media (min-width: 576px) and (max-width: 991px) {
#zen-learning-hero > .container { min-height: 540px; padding: 48px 32px; }
#zen-learning-hero .container .ct-text { max-width: 650px; }
#zen-learning-hero .learning-hero-logo { margin-bottom: 30px; }
#zen-learning-hero .container .ct-text .title > .text { font-size: 40px !important; }
#zen-learning-hero .container .ct-text .title > .text-decor { font-size: 32px !important; }
#zen-learning-hero .type2-hero-subtitle,
#zen-learning-hero .type2-hero-subtitle p { font-size: 16px !important; }
}
@media (max-width: 575px) {
#zen-learning-hero.learning-hero::before {
background: linear-gradient(90deg, rgba(22,32,57,.86), rgba(37,52,95,.62));
}
#zen-learning-hero > .container { min-height: 0; padding: 40px 22px 48px; }
#zen-learning-hero .learning-hero-logo { margin-bottom: 28px; }
#zen-learning-hero .learning-hero-logo__text { font-size: 15px; }
#zen-learning-hero .learning-hero-logo .learning-hero-logo__image { max-width: 170px; max-height: 26px; }
#zen-learning-hero .container .ct-text .title { gap: 12px; }
#zen-learning-hero .container .ct-text .title > .text { font-size: 32px !important; line-height: 1.18; }
#zen-learning-hero .container .ct-text .title > .text-decor { font-size: 26px !important; }
#zen-learning-hero .type2-hero-body { margin-top: 24px !important; }
#zen-learning-hero .type2-hero-subtitle,
#zen-learning-hero .type2-hero-subtitle p { font-size: 16px !important; }
#zen-learning-hero .learning-hero-actions { flex-direction: column; align-items: stretch; margin-top: 24px; }
#zen-learning-hero .type2-hero-cta .learning-hero-action { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
#zen-learning-hero .learning-hero-action { transition: none; }
#zen-learning-hero .learning-hero-action:hover { transform: none; }
}
/* Learning logo badge: prevent legacy banner image min-height on the logo. */
#zen-learning-hero .learning-hero-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
max-width: 100%;
min-height: 0;
height: auto;
margin: 0 0 32px;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, .32);
border-radius: 8px;
background: rgba(37, 52, 95, .38);
box-sizing: border-box;
vertical-align: top;
}
#zen-learning-hero .learning-hero-logo .learning-hero-logo__image {
min-width: 0 !important;
min-height: 0 !important;
width: auto !important;
height: auto !important;
max-width: 160px;
max-height: 24px;
object-fit: contain;
margin: 0;
}
@media (min-width: 576px) and (max-width: 991px) {
#zen-learning-hero > .container {
align-items: flex-start;
min-height: 520px;
padding-top: 48px;
padding-bottom: 48px;
}
#zen-learning-hero .learning-hero-logo { margin-bottom: 28px; padding: 9px 13px; }
#zen-learning-hero .learning-hero-logo .learning-hero-logo__image { max-width: 145px; max-height: 22px; }
}
@media (max-width: 575px) {
#zen-learning-hero > .container {
align-items: flex-start;
padding: 36px 22px 40px;
}
#zen-learning-hero .learning-hero-logo { margin-bottom: 24px; padding: 8px 12px; }
#zen-learning-hero .learning-hero-logo .learning-hero-logo__image { max-width: 135px; max-height: 20px; }
}
/* Banner review: smaller mobile typography, lower desktop content group. */
@media (min-width: 992px) {
#zen-learning-hero > .container {
padding-top: 96px;
padding-bottom: 32px;
}
}
@media (max-width: 575px) {
#zen-learning-hero .learning-hero-logo .learning-hero-logo__image {
max-width: 120px;
max-height: 18px;
}
#zen-learning-hero .container .ct-text .title > .text {
font-size: 26px !important;
line-height: 1.2;
}
#zen-learning-hero .container .ct-text .title > .text-decor {
font-size: 22px !important;
line-height: 1.25;
}
#zen-learning-hero .type2-hero-subtitle,
#zen-learning-hero .type2-hero-subtitle p {
font-size: 14px !important;
line-height: 1.65;
}
#zen-learning-hero .type2-hero-cta .learning-hero-action {
font-size: 14px !important;
}
}
/* Zen Learning Intro: editorial copy, panoramic image and concise facts. */
#zen-learning-intro.learning-intro {
padding: 80px 0;
background: #fff;
}
#zen-learning-intro > .container {
width: 100%;
max-width: 1280px;
padding-right: 32px;
padding-left: 32px;
margin: 0 auto;
}
#zen-learning-intro .learning-intro__head { margin-bottom: 28px; }
#zen-learning-intro .learning-intro__kicker {
margin: 0 0 16px;
font-family: "Learning Averta", sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.4;
letter-spacing: .1em;
color: #66739A;
}
#zen-learning-intro .learning-intro__heading {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 14px;
margin: 0;
font-family: "Learning Averta", sans-serif !important;
line-height: 1.25;
color: #394C8A;
}
#zen-learning-intro .learning-intro__heading strong,
#zen-learning-intro .learning-intro__heading span {
font-family: "Learning Averta", sans-serif !important;
font-style: normal !important;
font-size: 34px !important;
line-height: 1.25;
text-transform: none !important;
color: #394C8A;
}
#zen-learning-intro .learning-intro__heading strong { font-weight: 700 !important; }
#zen-learning-intro .learning-intro__heading span { font-weight: 400 !important; }
#zen-learning-intro .learning-intro__copy {
columns: 2;
column-gap: 48px;
margin-bottom: 36px;
}
#zen-learning-intro .learning-intro__copy,
#zen-learning-intro .learning-intro__copy * {
font-family: "NotoSan", sans-serif !important;
font-size: 17px !important;
line-height: 1.7 !important;
color: #222831;
text-align: left !important;
text-align-last: auto !important;
}
#zen-learning-intro .learning-intro__copy p {
margin: 0 0 16px;
break-inside: avoid;
}
#zen-learning-intro .learning-intro__copy p:last-child { margin-bottom: 0; }
#zen-learning-intro .learning-intro__visual {
margin: 0 0 28px;
padding: 0;
overflow: hidden;
border-radius: 14px;
background: #EEF0F5;
}
#zen-learning-intro .learning-intro__image {
display: block;
position: static;
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: 2.5 / 1;
object-fit: cover;
object-position: center;
border: 0;
box-shadow: none;
}
#zen-learning-intro .learning-intro__facts {
display: grid;
grid-template-columns: repeat(var(--learning-fact-columns, 4), minmax(0, 1fr));
margin: 0;
padding: 24px 0;
border-top: 1px solid #DCE1EB;
border-bottom: 1px solid #DCE1EB;
background: none;
}
#zen-learning-intro .learning-intro__fact { padding: 0 24px; min-width: 0; }
#zen-learning-intro .learning-intro__fact:first-child { padding-left: 0; }
#zen-learning-intro .learning-intro__fact + .learning-intro__fact { border-left: 1px solid #DCE1EB; }
#zen-learning-intro .learning-intro__fact dt {
margin-bottom: 8px;
font-family: "Learning Averta", sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
line-height: 1.4;
color: #394C8A;
}
#zen-learning-intro .learning-intro__fact dd,
#zen-learning-intro .learning-intro__fact dd * {
margin: 0;
font-family: "NotoSan", sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.6;
color: #222831;
}
@media (max-width: 991px) {
#zen-learning-intro.learning-intro { padding: 56px 0; }
#zen-learning-intro .learning-intro__heading strong,
#zen-learning-intro .learning-intro__heading span { font-size: 28px !important; }
#zen-learning-intro .learning-intro__copy { columns: 1; margin-bottom: 28px; }
#zen-learning-intro .learning-intro__copy,
#zen-learning-intro .learning-intro__copy * { font-size: 16px !important; }
#zen-learning-intro .learning-intro__image { aspect-ratio: 2 / 1; }
#zen-learning-intro .learning-intro__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
#zen-learning-intro .learning-intro__fact { padding: 0 20px; }
#zen-learning-intro .learning-intro__fact:nth-child(odd) { padding-left: 0; border-left: 0; }
#zen-learning-intro .learning-intro__fact:nth-child(even) { border-left: 1px solid #DCE1EB; }
}
@media (max-width: 575px) {
#zen-learning-intro.learning-intro { padding: 40px 0; }
#zen-learning-intro > .container { padding-right: 22px; padding-left: 22px; }
#zen-learning-intro .learning-intro__head { margin-bottom: 20px; }
#zen-learning-intro .learning-intro__kicker { font-size: 11px !important; margin-bottom: 12px; }
#zen-learning-intro .learning-intro__heading { gap: 6px 10px; }
#zen-learning-intro .learning-intro__heading strong,
#zen-learning-intro .learning-intro__heading span { font-size: 22px !important; }
#zen-learning-intro .learning-intro__copy,
#zen-learning-intro .learning-intro__copy * { font-size: 14px !important; line-height: 1.65 !important; }
#zen-learning-intro .learning-intro__visual { margin-bottom: 22px; border-radius: 10px; }
#zen-learning-intro .learning-intro__image { aspect-ratio: 16 / 9; }
#zen-learning-intro .learning-intro__facts { padding: 20px 0; gap: 20px 0; }
#zen-learning-intro .learning-intro__fact { padding: 0 14px; }
#zen-learning-intro .learning-intro__fact dt { font-size: 14px !important; }
#zen-learning-intro .learning-intro__fact dd,
#zen-learning-intro .learning-intro__fact dd * { font-size: 13px !important; }
}
/* Learning Intro review: shallow panorama and icon-led facts. */
#zen-learning-intro .learning-intro__image { aspect-ratio: 4 / 1; }
#zen-learning-intro .learning-intro__facts {
padding: 28px 0;
border: 0;
border-radius: 10px;
background: #EEF0F5;
}
#zen-learning-intro .learning-intro__fact,
#zen-learning-intro .learning-intro__fact:first-child { padding: 0 24px; }
#zen-learning-intro .learning-intro__fact + .learning-intro__fact { border-left: 1px solid #D4DAE6; }
#zen-learning-intro .learning-intro__fact dt {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
#zen-learning-intro .learning-intro__fact dt span {
font-family: "Learning Averta", sans-serif !important;
font-size: inherit !important;
font-weight: 700 !important;
color: #394C8A;
line-height: 1.4;
}
#zen-learning-intro .learning-intro__fact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 26px;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
#zen-learning-intro .learning-intro__fact-icon-image {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: contain;
border: 0;
box-shadow: none;
}
@media (max-width: 991px) {
#zen-learning-intro .learning-intro__image { aspect-ratio: 3 / 1; }
#zen-learning-intro .learning-intro__facts { padding: 24px 0; gap: 28px 0; }
#zen-learning-intro .learning-intro__fact,
#zen-learning-intro .learning-intro__fact:first-child { padding: 0 20px; }
#zen-learning-intro .learning-intro__fact:nth-child(odd) { padding-left: 20px; border-left: 0; }
}
@media (max-width: 575px) {
#zen-learning-intro .learning-intro__image { aspect-ratio: 2.4 / 1; }
#zen-learning-intro .learning-intro__facts { padding: 20px 0; gap: 24px 0; }
#zen-learning-intro .learning-intro__fact,
#zen-learning-intro .learning-intro__fact:first-child { padding: 0 14px; }
#zen-learning-intro .learning-intro__fact:nth-child(odd) { padding-left: 14px; }
#zen-learning-intro .learning-intro__fact dt { gap: 8px; margin-bottom: 10px; }
#zen-learning-intro .learning-intro__fact-icon { flex-basis: 22px; width: 22px; height: 22px; }
}
/* Learning fact icons: use attachment alpha as a single-colour silhouette. */
#zen-learning-intro .learning-intro__fact-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
background: #394C8A;
-webkit-mask-image: var(--learning-icon-url);
mask-image: var(--learning-icon-url);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
mask-mode: alpha;
}
@media (max-width: 575px) {
#zen-learning-intro .learning-intro__fact-icon {
flex-basis: 28px;
width: 28px;
height: 28px;
}
}
/* Learning course catalogue: paged 2x2 grid with horizontal course previews. */
#zen-learning-programs.learning-courses { background: #F7F8FB; position: relative; }
#zen-learning-programs > .container { max-width: 1280px; padding: 0 32px; margin: 0 auto; }
#zen-learning-programs .title-all,
#zen-learning-programs .title-all span,
#zen-learning-programs .title-all strong { font-family: "Learning Averta", sans-serif !important; font-size: 34px !important; line-height: 1.25; color: #394C8A !important; font-style: normal !important; }
#zen-learning-programs .title-all span { font-weight: 700 !important; }
#zen-learning-programs .title-all strong { font-weight: 400 !important; }
#zen-learning-programs .learning-section-description,
#zen-learning-programs .learning-section-description * { font-family: "NotoSan", sans-serif !important; font-size: 17px !important; line-height: 1.65; color: #222831; }
#zen-learning-programs .learning-course-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
#zen-learning-programs .learning-course-track::-webkit-scrollbar { display: none; }
#zen-learning-programs .learning-course-page { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; scroll-snap-align: start; }
#zen-learning-programs .learning-course-card { display: grid; grid-template-columns: 35% minmax(0,1fr); align-items: start; min-width: 0; border: 1px solid #DCE1EB; border-radius: 12px; overflow: hidden; background: #fff; padding: 16px; gap: 20px; }
#zen-learning-programs .learning-course-card--no-image { grid-template-columns: minmax(0,1fr); }
#zen-learning-programs .learning-course-card__image { display: block; border-radius: 8px; overflow: hidden; }
#zen-learning-programs .learning-course-card__image img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
#zen-learning-programs .learning-course-card__body { display: flex; flex-direction: column; height: 100%; min-width: 0; }
#zen-learning-programs .learning-course-card__tagline { margin: 0 0 8px; font-family: "Learning Averta",sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.4; color: #66739A; }
#zen-learning-programs .learning-course-card h3 { margin: 0 0 12px; }
#zen-learning-programs .learning-course-card h3,
#zen-learning-programs .learning-course-card h3 a { font-family: "Learning Averta",sans-serif !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.3; color: #394C8A; }
#zen-learning-programs .learning-course-card__description,
#zen-learning-programs .learning-course-card__description *,
#zen-learning-programs .learning-course-card__highlights li { font-family: "NotoSan",sans-serif !important; font-size: 14px !important; line-height: 1.6; color: #222831; }
#zen-learning-programs .learning-course-card__description p { margin: 0 0 12px; }
#zen-learning-programs .learning-course-card__highlights { padding: 0; margin: 0 0 16px; list-style: none; }
#zen-learning-programs .learning-course-card__highlights li { position: relative; padding-left: 14px; margin-bottom: 6px; }
#zen-learning-programs .learning-course-card__highlights li::before { content: ""; position: absolute; left: 0; top: .65em; width: 4px; height: 4px; border-radius: 50%; background: #394C8A; }
#zen-learning-programs .learning-course-card__link { margin-top: auto; padding-top: 8px; font-family: "Learning Averta",sans-serif !important; font-size: 14px !important; font-weight: 700 !important; color: #394C8A; text-decoration: none; }
#zen-learning-programs .learning-course-card__link:hover { text-decoration: underline; }
#zen-learning-programs .learning-course-controls { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 24px; }
#zen-learning-programs .learning-course-controls[hidden] { display: none; }
#zen-learning-programs .learning-course-controls button { width: 42px; height: 42px; border: 1px solid #DCE1EB; border-radius: 8px; background: #fff; color: #394C8A; cursor: pointer; }
#zen-learning-programs .learning-course-controls button:disabled { opacity: .4; cursor: default; }
#zen-learning-programs .learning-course-status { font-family: "NotoSan",sans-serif !important; font-size: 13px !important; color: #66739A; }
#zen-learning-programs a:focus-visible,
#zen-learning-programs button:focus-visible,
#zen-learning-programs .learning-course-track:focus-visible { outline: 2px solid #394C8A; outline-offset: -2px; }
@media (max-width:991px) {
#zen-learning-programs .learning-course-page { grid-template-columns: minmax(0,1fr); }
#zen-learning-programs .title-all,
#zen-learning-programs .title-all span,
#zen-learning-programs .title-all strong { font-size: 28px !important; }
#zen-learning-programs .learning-section-description,
#zen-learning-programs .learning-section-description * { font-size: 16px !important; }
}
@media (max-width:575px) {
#zen-learning-programs > .container { padding: 0 22px; }
#zen-learning-programs .learning-course-card { grid-template-columns: minmax(0,1fr); padding: 16px; gap: 16px; }
#zen-learning-programs .learning-course-card__image img { aspect-ratio: 16/9; }
#zen-learning-programs .title-all,
#zen-learning-programs .title-all span,
#zen-learning-programs .title-all strong { font-size: 22px !important; }
#zen-learning-programs .learning-section-description,
#zen-learning-programs .learning-section-description * { font-size: 14px !important; }
#zen-learning-programs .learning-course-card h3,
#zen-learning-programs .learning-course-card h3 a { font-size: 20px !important; }
}
/* Course review: warmer surface and content-led heights. */
#zen-learning-programs.learning-courses { background: #FAF8F3; }
#zen-learning-programs .learning-course-track { align-items: flex-start; }
#zen-learning-programs .learning-course-page { align-items: start; align-content: start; }
#zen-learning-programs .learning-course-card { align-content: start; background: #fff; border-color: #E4E3DE; }
#zen-learning-programs .learning-course-card__body { height: auto; }
#zen-learning-programs .learning-course-card__highlights { margin-bottom: 12px; }
#zen-learning-programs .learning-course-card__link { margin-top: 0; padding-top: 4px; }
#zen-learning-programs .learning-course-card__highlights li { padding-left: 19px; }
#zen-learning-programs .learning-course-card__highlights li::before {
top: .42em;
left: 1px;
width: 5px;
height: 9px;
background: none;
border: solid #394C8A;
border-width: 0 1.5px 1.5px 0;
border-radius: 0;
transform: rotate(45deg);
}
/* Course cards: equal measured heights, full copy, consistent bottom links. */
#zen-learning-programs .learning-course-card {
box-sizing: border-box;
align-content: stretch;
align-items: stretch;
}
#zen-learning-programs .learning-course-card__image { align-self: start; }
#zen-learning-programs .learning-course-card__body { height: 100%; }
#zen-learning-programs .learning-course-card__link { margin-top: auto; padding-top: 12px; }
@media (max-width: 575px) {
#zen-learning-programs .learning-course-card { grid-template-rows: auto minmax(0, 1fr); }
#zen-learning-programs .learning-course-card--no-image { grid-template-rows: minmax(0, 1fr); }
}
/* Everzen horizon accent — section headings only, no card titles. */
.type2-page--zen-learning .learning-section-heading {
position: relative;
padding-top: 24px !important;
}
.type2-page--zen-learning .learning-section-heading::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
width: 56px;
height: 12px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
transform: none;
pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 12'%3E%3Cpath d='M1 10 Q28 -6 55 10' fill='none' stroke='%2366739A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") left top / contain no-repeat;
}
@media (max-width: 575px) {
.type2-page--zen-learning .learning-section-heading { padding-top: 22px !important; }
.type2-page--zen-learning .learning-section-heading::before { width: 40px; height: 10px; }
}
/* Learning audience: flexible counts, centred incomplete rows, no slider. */
#zen-learning-audience.learning-audience { background: #fff; }
#zen-learning-audience > .container { max-width: 1280px; padding: 0 32px; margin: 0 auto; }
#zen-learning-audience .title-all,
#zen-learning-audience .title-all span,
#zen-learning-audience .title-all strong { font-family: "Learning Averta", sans-serif !important; font-size: 34px !important; line-height: 1.25; color: #394C8A; font-style: normal !important; }
#zen-learning-audience .title-all span { font-weight: 700 !important; }
#zen-learning-audience .title-all strong { font-weight: 400 !important; }
#zen-learning-audience .learning-section-description,
#zen-learning-audience .learning-section-description * { font-family: "NotoSan", sans-serif !important; font-size: 17px !important; line-height: 1.65; color: #222831; }
#zen-learning-audience .learning-audience-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 28px; }
#zen-learning-audience .learning-audience-item { grid-column: span 4; min-width: 0; overflow: hidden; background: #FAF8F3; border-radius: 12px; }
#zen-learning-audience .learning-audience-grid--two .learning-audience-item { grid-column: span 6; }
#zen-learning-audience .learning-audience-grid--single .learning-audience-item { grid-column: 4 / span 6; }
#zen-learning-audience .learning-audience-grid--three[data-remainder="1"] .learning-audience-item:last-child { grid-column: 5 / span 4; }
#zen-learning-audience .learning-audience-grid--three[data-remainder="2"] .learning-audience-item:nth-last-child(2) { grid-column: 3 / span 4; }
#zen-learning-audience .learning-audience-grid--three[data-remainder="2"] .learning-audience-item:last-child { grid-column: 7 / span 4; }
#zen-learning-audience .learning-audience-item__media img { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; }
#zen-learning-audience .learning-audience-item__body { padding: 22px; }
#zen-learning-audience .learning-audience-item__title { font-family: "Learning Averta", sans-serif !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.35; color: #394C8A; margin: 0 0 14px; }
#zen-learning-audience .learning-audience-item__description,
#zen-learning-audience .learning-audience-item__description * { font-family: "NotoSan", sans-serif !important; font-size: 15px !important; line-height: 1.65; color: #222831; text-align: left !important; }
#zen-learning-audience .learning-audience-item__description p:last-child { margin-bottom: 0; }
@media (min-width:576px) and (max-width:991px) {
#zen-learning-audience .learning-audience-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
#zen-learning-audience .learning-audience-grid .learning-audience-item { grid-column: span 2 !important; }
#zen-learning-audience .learning-audience-grid .learning-audience-item:last-child:nth-child(odd) { grid-column: 2 / span 2 !important; }
}
@media (max-width:991px) {
#zen-learning-audience .title-all,
#zen-learning-audience .title-all span,
#zen-learning-audience .title-all strong { font-size: 28px !important; }
#zen-learning-audience .learning-section-description,
#zen-learning-audience .learning-section-description * { font-size: 16px !important; }
}
@media (max-width:575px) {
#zen-learning-audience > .container { padding: 0 22px; }
#zen-learning-audience .learning-audience-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
#zen-learning-audience .learning-audience-grid .learning-audience-item,
#zen-learning-audience .learning-audience-grid .learning-audience-item:nth-last-child(2),
#zen-learning-audience .learning-audience-grid .learning-audience-item:last-child { grid-column: 1 / -1 !important; }
#zen-learning-audience .title-all,
#zen-learning-audience .title-all span,
#zen-learning-audience .title-all strong { font-size: 22px !important; }
#zen-learning-audience .learning-section-description,
#zen-learning-audience .learning-section-description * { font-size: 14px !important; }
#zen-learning-audience .learning-audience-item__media img { aspect-ratio: 16/9; }
#zen-learning-audience .learning-audience-item__body { padding: 18px; }
#zen-learning-audience .learning-audience-item__title { font-size: 19px !important; }
#zen-learning-audience .learning-audience-item__description,
#zen-learning-audience .learning-audience-item__description * { font-size: 14px !important; }
}
/* Compass accent on section introductions after Intro only. */
.type2-page--zen-learning .learning-description--compass {
position: relative;
padding-left: 30px !important;
}
.type2-page--zen-learning .learning-description--compass::before {
content: "";
display: block;
position: absolute;
left: 0;
top: .3em;
width: 18px;
height: 18px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
transform: none;
pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366739A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M16 8l-2.5 5.5L8 16l2.5-5.5L16 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 575px) {
.type2-page--zen-learning .learning-description--compass { padding-left: 26px !important; }
.type2-page--zen-learning .learning-description--compass::before { width: 16px; height: 16px; }
}
/* Audience illustrations support the title instead of filling the card. */
#zen-learning-audience .learning-audience-item__head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
#zen-learning-audience .learning-audience-item__head .learning-audience-item__title {
min-width: 0;
margin: 0;
}
#zen-learning-audience .learning-audience-item__media {
flex: 0 0 56px;
width: 56px;
height: 56px;
margin: 0;
padding: 0;
background: none;
}
#zen-learning-audience .learning-audience-item__media img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: auto;
object-fit: contain;
border-radius: 0;
filter: none;
}
/* The paper-plane at the audience boundary belongs to the next section. */
#zen-learning-why::before {
content: none !important;
display: none !important;
}
@media (max-width: 575px) {
#zen-learning-audience .learning-audience-item__head { gap: 12px; margin-bottom: 16px; }
#zen-learning-audience .learning-audience-item__media { flex-basis: 44px; width: 44px; height: 44px; }
}
/* Why Learning: one small central photo, reasons around the experience. */
#zen-learning-why.learning-why { background: #EEF0F5; padding: 80px 0; }
#zen-learning-why::before,
#zen-learning-why::after { content: none !important; display: none !important; }
#zen-learning-why > .container { max-width: 1280px; padding: 0 32px; margin: 0 auto; }
#zen-learning-why .title-all,
#zen-learning-why .title-all span,
#zen-learning-why .title-all strong { font-family: "Learning Averta",sans-serif !important; font-size: 34px !important; line-height: 1.25; color: #394C8A; font-style: normal !important; }
#zen-learning-why .title-all span { font-weight: 700 !important; }
#zen-learning-why .title-all strong { font-weight: 400 !important; }
#zen-learning-why .learning-section-description,
#zen-learning-why .learning-section-description * { font-family: "NotoSan",sans-serif !important; font-size: 17px !important; line-height: 1.65; color: #222831; }
#zen-learning-why .learning-why-layout { display: grid; grid-template-columns: minmax(0,1fr) clamp(240px,22vw,280px) minmax(0,1fr); gap: 36px; align-items: center; margin-top: 36px; }
#zen-learning-why .learning-why-visual { grid-column: 2; grid-row: 1; margin: 0; border-radius: 28px; overflow: hidden; }
#zen-learning-why .learning-why-visual img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
#zen-learning-why .learning-why-reasons { min-width: 0; margin: 0; padding: 0; list-style: none; }
#zen-learning-why .learning-why-reasons--left { grid-column: 1; grid-row: 1; }
#zen-learning-why .learning-why-reasons--right { grid-column: 3; grid-row: 1; }
#zen-learning-why .learning-why-reason { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; padding: 22px 0; border-top: 1px solid #D4DAE6; }
#zen-learning-why .learning-why-reason:first-child { border-top: 0; padding-top: 0; }
#zen-learning-why .learning-why-reason:last-child { padding-bottom: 0; }
#zen-learning-why .learning-why-reason__number { font-family: "Learning Averta",sans-serif !important; font-size: 13px !important; font-weight: 700 !important; color: #66739A; line-height: 1.6; }
#zen-learning-why .learning-why-reason h3 { margin: 0 0 10px; font-family: "Learning Averta",sans-serif !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.35; color: #394C8A; }
#zen-learning-why .learning-why-reason .s-content,
#zen-learning-why .learning-why-reason .s-content * { font-family: "NotoSan",sans-serif !important; font-size: 15px !important; line-height: 1.65; color: #222831; text-align: left !important; }
#zen-learning-why .learning-why-reason .s-content p:last-child { margin-bottom: 0; }
#zen-learning-why .learning-why-layout--no-image { grid-template-columns: repeat(2,minmax(0,1fr)); }
#zen-learning-why .learning-why-layout--no-image .learning-why-reasons--right { grid-column: 2; }
@media (min-width:576px) and (max-width:991px) {
#zen-learning-why .learning-why-layout { grid-template-columns: 220px minmax(0,1fr); gap: 24px 28px; align-items: start; }
#zen-learning-why .learning-why-visual { grid-column: 1; grid-row: 1 / span 2; }
#zen-learning-why .learning-why-reasons--left { grid-column: 2; grid-row: 1; }
#zen-learning-why .learning-why-reasons--right { grid-column: 2; grid-row: 2; }
#zen-learning-why .learning-why-reasons--right .learning-why-reason:first-child { border-top: 1px solid #D4DAE6; padding-top: 22px; }
#zen-learning-why .learning-why-layout--no-image { grid-template-columns: minmax(0,1fr); }
#zen-learning-why .learning-why-layout--no-image .learning-why-reasons { grid-column: 1; }
}
@media (max-width:991px) {
#zen-learning-why.learning-why { padding: 56px 0; }
#zen-learning-why .title-all,
#zen-learning-why .title-all span,
#zen-learning-why .title-all strong { font-size: 28px !important; }
#zen-learning-why .learning-section-description,
#zen-learning-why .learning-section-description * { font-size: 16px !important; }
}
@media (max-width:575px) {
#zen-learning-why.learning-why { padding: 40px 0; }
#zen-learning-why > .container { padding: 0 22px; }
#zen-learning-why .title-all,
#zen-learning-why .title-all span,
#zen-learning-why .title-all strong { font-size: 22px !important; }
#zen-learning-why .learning-section-description,
#zen-learning-why .learning-section-description * { font-size: 14px !important; }
#zen-learning-why .learning-why-layout { display: flex; flex-direction: column; align-items: stretch; gap: 24px; margin-top: 28px; }
#zen-learning-why .learning-why-visual { border-radius: 12px; }
#zen-learning-why .learning-why-visual img { aspect-ratio: 2.8/1; }
#zen-learning-why .learning-why-reason { padding: 18px 0; grid-template-columns: 24px minmax(0,1fr); gap: 10px; }
#zen-learning-why .learning-why-reasons--right .learning-why-reason:first-child { border-top: 1px solid #D4DAE6; padding-top: 18px; }
#zen-learning-why .learning-why-reason h3 { font-size: 18px !important; }
#zen-learning-why .learning-why-reason .s-content,
#zen-learning-why .learning-why-reason .s-content * { font-size: 14px !important; }
}
/* Centre the shared image across both reason lists on tablet only. */
@media (min-width: 576px) and (max-width: 991px) {
#zen-learning-why .learning-why-visual { align-self: center; }
}
/* Organisation training: calm Navy block, shared content and consultation CTA. */
#zen-learning-corporate.learning-corporate { background: #25345F; padding: 80px 0; color: #fff; }
#zen-learning-corporate > .container { max-width: 1280px; padding: 0 32px; margin: 0 auto; }
#zen-learning-corporate .learning-corporate-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); align-items: center; gap: 64px; }
#zen-learning-corporate .learning-corporate-layout--no-image { grid-template-columns: minmax(0,1fr); }
#zen-learning-corporate .learning-corporate-layout--no-image .learning-corporate-copy { max-width: 900px; }
#zen-learning-corporate .title-all,
#zen-learning-corporate .title-all span,
#zen-learning-corporate .title-all strong { font-family: "Learning Averta",sans-serif !important; font-size: 34px !important; line-height: 1.25; font-style: normal !important; color: #fff !important; }
#zen-learning-corporate .title-all span { font-weight: 700 !important; }
#zen-learning-corporate .title-all strong { font-weight: 400 !important; }
#zen-learning-corporate .learning-section-heading::before,
#zen-learning-corporate .learning-description--compass::before { filter: brightness(0) invert(1); opacity: .7; }
#zen-learning-corporate .learning-section-description,
#zen-learning-corporate .learning-section-description * { font-family: "NotoSan",sans-serif !important; font-size: 17px !important; line-height: 1.65; color: rgba(255,255,255,.9) !important; text-align: left !important; }
#zen-learning-corporate .learning-corporate-items { margin: 28px 0; }
#zen-learning-corporate .learning-corporate-item { padding: 18px 0; margin: 0; border-top: 1px solid rgba(255,255,255,.2); }
#zen-learning-corporate .learning-corporate-item:last-child { border-bottom: 1px solid rgba(255,255,255,.2); }
#zen-learning-corporate .learning-corporate-item h3 { margin: 0 0 8px; font-family: "Learning Averta",sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.35; color: #fff !important; }
#zen-learning-corporate .learning-corporate-item .s-content,
#zen-learning-corporate .learning-corporate-item .s-content * { font-family: "NotoSan",sans-serif !important; font-size: 15px !important; line-height: 1.65; color: rgba(255,255,255,.85) !important; }
#zen-learning-corporate .learning-corporate-item p:last-child { margin-bottom: 0; }
#zen-learning-corporate .learning-corporate-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 24px; min-height: 48px; border: 1px solid #fff; border-radius: 8px; background: #fff; color: #394C8A !important; font-family: "Learning Averta",sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4; text-decoration: none; }
#zen-learning-corporate .learning-corporate-cta span { font-family: "Learning Averta",sans-serif !important; color: inherit !important; }
#zen-learning-corporate .learning-corporate-cta:hover { background: #EEF0F5; }
#zen-learning-corporate .learning-corporate-cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#zen-learning-corporate .learning-corporate-visual { margin: 0; border-radius: 16px; overflow: hidden; }
#zen-learning-corporate .learning-corporate-image { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; margin: 0; }
@media (max-width:991px) {
#zen-learning-corporate.learning-corporate { padding: 56px 0; }
#zen-learning-corporate .learning-corporate-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
#zen-learning-corporate .learning-corporate-image { aspect-ratio: 3/1; }
#zen-learning-corporate .title-all,
#zen-learning-corporate .title-all span,
#zen-learning-corporate .title-all strong { font-size: 28px !important; }
#zen-learning-corporate .learning-section-description,
#zen-learning-corporate .learning-section-description * { font-size: 16px !important; }
}
@media (max-width:575px) {
#zen-learning-corporate.learning-corporate { padding: 40px 0; }
#zen-learning-corporate > .container { padding: 0 22px; }
#zen-learning-corporate .learning-corporate-layout { gap: 28px; }
#zen-learning-corporate .learning-corporate-image { aspect-ratio: 2.5/1; }
#zen-learning-corporate .title-all,
#zen-learning-corporate .title-all span,
#zen-learning-corporate .title-all strong { font-size: 22px !important; }
#zen-learning-corporate .learning-section-description,
#zen-learning-corporate .learning-section-description * { font-size: 14px !important; }
#zen-learning-corporate .learning-corporate-item h3 { font-size: 17px !important; }
#zen-learning-corporate .learning-corporate-item .s-content,
#zen-learning-corporate .learning-corporate-item .s-content * { font-size: 14px !important; }
#zen-learning-corporate .learning-corporate-cta { width: 100%; font-size: 14px !important; }
}
/* Clearly mark the two organisation-training options. */
#zen-learning-corporate .learning-corporate-item { padding-left: 20px; }
#zen-learning-corporate .learning-corporate-item h3 { position: relative; }
#zen-learning-corporate .learning-corporate-item h3::before {
content: "";
position: absolute;
left: -18px;
top: .48em;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, .9);
}
/* Learning instructors: clear profiles, natural square portraits, quiet quotes. */
#zen-learning-team.learning-team { background: #fff; padding: 80px 0; }
#zen-learning-team > .container { max-width: 1280px; padding: 0 32px; margin: 0 auto; }
#zen-learning-team .title-all,
#zen-learning-team .title-all span,
#zen-learning-team .title-all strong { font-family: "Learning Averta",sans-serif !important; font-size: 34px !important; line-height: 1.25; font-style: normal !important; color: #394C8A; }
#zen-learning-team .title-all span { font-weight: 700 !important; }
#zen-learning-team .title-all strong { font-weight: 400 !important; }
#zen-learning-team .learning-section-description,
#zen-learning-team .learning-section-description * { font-family: "NotoSan",sans-serif !important; font-size: 17px !important; line-height: 1.65; color: #222831; }
#zen-learning-team .learning-team-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
#zen-learning-team .learning-team-track::-webkit-scrollbar { display: none; }
#zen-learning-team .learning-team-page { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
#zen-learning-team .learning-team-card { min-width: 0; }
#zen-learning-team .learning-team-card__portrait { aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #EEF0F5; margin-bottom: 20px; }
#zen-learning-team .learning-team-card__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
#zen-learning-team .learning-team-card__name { font-family: "Learning Averta",sans-serif !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.3; color: #394C8A; margin: 0 0 10px; }
#zen-learning-team .learning-team-card__meta p { margin: 0 0 6px; font-family: "NotoSan",sans-serif !important; font-size: 14px !important; line-height: 1.55; color: #66739A; }
#zen-learning-team .learning-team-card__quote { margin: 18px 0 0; padding: 0; border: 0; background: none; }
#zen-learning-team .learning-team-card__quote,
#zen-learning-team .learning-team-card__quote * { font-family: "NotoSan",sans-serif !important; font-size: 14px !important; line-height: 1.65; font-style: italic; color: #222831; }
#zen-learning-team .learning-team-card__quote p:last-child { margin-bottom: 0; }
#zen-learning-team .learning-team-controls { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 24px; }
#zen-learning-team .learning-team-controls[hidden] { display: none; }
#zen-learning-team .learning-team-controls button { width: 42px; height: 42px; border: 1px solid #DCE1EB; border-radius: 8px; background: #fff; color: #394C8A; cursor: pointer; }
#zen-learning-team .learning-team-controls button:disabled { opacity: .4; cursor: default; }
#zen-learning-team .learning-team-status { font-family: "NotoSan",sans-serif !important; font-size: 13px !important; color: #66739A; }
#zen-learning-team .learning-team-track:focus-visible,
#zen-learning-team .learning-team-controls button:focus-visible { outline: 2px solid #394C8A; outline-offset: -2px; }
@media (max-width:991px) {
#zen-learning-team.learning-team { padding: 56px 0; }
#zen-learning-team .learning-team-page { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
#zen-learning-team .title-all,
#zen-learning-team .title-all span,
#zen-learning-team .title-all strong { font-size: 28px !important; }
#zen-learning-team .learning-section-description,
#zen-learning-team .learning-section-description * { font-size: 16px !important; }
}
@media (max-width:575px) {
#zen-learning-team.learning-team { padding: 40px 0; }
#zen-learning-team > .container { padding: 0 22px; }
#zen-learning-team .learning-team-page { grid-template-columns: minmax(0,1fr); }
#zen-learning-team .title-all,
#zen-learning-team .title-all span,
#zen-learning-team .title-all strong { font-size: 22px !important; }
#zen-learning-team .learning-section-description,
#zen-learning-team .learning-section-description * { font-size: 14px !important; }
#zen-learning-team .learning-team-card__name { font-size: 20px !important; }
}
/* Inline role and subject; separator only exists when both are populated. */
#zen-learning-team .learning-team-card__meta {
display: block;
font-family: "NotoSan", sans-serif !important;
font-size: 14px !important;
line-height: 1.65;
color: #66739A;
}
#zen-learning-team .learning-team-card__meta span {
font-family: "NotoSan", sans-serif !important;
font-size: 14px !important;
line-height: inherit;
color: #66739A;
}
#zen-learning-team .learning-team-card__separator {
display: inline-block;
width: 4px;
height: 4px;
margin: 0 8px;
border-radius: 50%;
background: #66739A;
vertical-align: middle;
}
/* Learning moments: editorial mosaic, no frames or shadows. */
#zen-learning-gallery.learning-gallery { background: #FAF8F3; padding: 80px 0; }
#zen-learning-gallery > .container { max-width: 1280px; padding: 0 32px; margin: 0 auto; }
#zen-learning-gallery .title-all,
#zen-learning-gallery .title-all span,
#zen-learning-gallery .title-all strong { font-family: "Learning Averta",sans-serif !important; font-size: 34px !important; line-height: 1.25; font-style: normal !important; color: #394C8A; }
#zen-learning-gallery .title-all span { font-weight: 700 !important; }
#zen-learning-gallery .title-all strong { font-weight: 400 !important; }
#zen-learning-gallery .learning-section-description,
#zen-learning-gallery .learning-section-description * { font-family: "NotoSan",sans-serif !important; font-size: 17px !important; line-height: 1.65; color: #222831; }
#zen-learning-gallery .learning-gallery-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-auto-rows: clamp(150px,15vw,190px); gap: 18px; }
#zen-learning-gallery .learning-gallery-item { grid-column: span 4; display: block; min-width: 0; overflow: hidden; border-radius: 12px; background: #EEF0F5; }
#zen-learning-gallery .learning-gallery-item--main { grid-column: span 8; grid-row: span 2; }
#zen-learning-gallery .learning-gallery-item[hidden] { display: none !important; }
#zen-learning-gallery .learning-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
#zen-learning-gallery .learning-gallery-item:hover img { transform: scale(1.025); }
#zen-learning-gallery .learning-gallery-item:focus-visible { outline: 2px solid #394C8A; outline-offset: 3px; }
#zen-learning-gallery .learning-gallery-actions { text-align: center; margin-top: 28px; }
#zen-learning-gallery .learning-gallery-toggle { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; min-height: 44px; border: 1px solid #D4DAE6; border-radius: 8px; background: transparent; font-family: "Learning Averta",sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4; color: #394C8A; cursor: pointer; }
#zen-learning-gallery .learning-gallery-toggle:hover { background: #fff; }
#zen-learning-gallery .learning-gallery-toggle:focus-visible { outline: 2px solid #394C8A; outline-offset: 3px; }
@media (max-width:991px) {
#zen-learning-gallery.learning-gallery { padding: 56px 0; }
#zen-learning-gallery .learning-gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: auto; gap: 16px; }
#zen-learning-gallery .learning-gallery-item { grid-column: span 1; aspect-ratio: 4/3; }
#zen-learning-gallery .learning-gallery-item--main { grid-column: span 2; grid-row: span 1; aspect-ratio: 2.5/1; }
#zen-learning-gallery .title-all,
#zen-learning-gallery .title-all span,
#zen-learning-gallery .title-all strong { font-size: 28px !important; }
#zen-learning-gallery .learning-section-description,
#zen-learning-gallery .learning-section-description * { font-size: 16px !important; }
}
@media (max-width:575px) {
#zen-learning-gallery.learning-gallery { padding: 40px 0; }
#zen-learning-gallery > .container { padding: 0 22px; }
#zen-learning-gallery .learning-gallery-grid { gap: 12px; }
#zen-learning-gallery .learning-gallery-item { border-radius: 8px; }
#zen-learning-gallery .learning-gallery-item--main { aspect-ratio: 2/1; }
#zen-learning-gallery .title-all,
#zen-learning-gallery .title-all span,
#zen-learning-gallery .title-all strong { font-size: 22px !important; }
#zen-learning-gallery .learning-section-description,
#zen-learning-gallery .learning-section-description * { font-size: 14px !important; }
#zen-learning-gallery .learning-gallery-toggle { font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
#zen-learning-gallery .learning-gallery-item img { transition: none; }
#zen-learning-gallery .learning-gallery-item:hover img { transform: none; }
}
/* Learning student stories: one voice at a time, real profile data. */
#zen-learning-students.learning-stories { padding: 80px 0; background: #fff; }
#zen-learning-students > .container { max-width: 1280px; padding: 0 32px; margin: 0 auto; }
#zen-learning-students .title-all,
#zen-learning-students .title-all span,
#zen-learning-students .title-all strong { font-family: "Learning Averta",sans-serif !important; font-size: 34px !important; line-height: 1.25; color: #394C8A; font-style: normal !important; }
#zen-learning-students .title-all span { font-weight: 700 !important; }
#zen-learning-students .title-all strong { font-weight: 400 !important; }
#zen-learning-students .learning-section-description,
#zen-learning-students .learning-section-description * { font-family: "NotoSan",sans-serif !important; font-size: 17px !important; line-height: 1.65; color: #222831; }
#zen-learning-students .learning-stories-track { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
#zen-learning-students .learning-stories-track::-webkit-scrollbar { display: none; }
#zen-learning-students .learning-story { display: grid; grid-template-columns: minmax(0,.35fr) minmax(0,.65fr); gap: 48px; align-items: center; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
#zen-learning-students .learning-story--no-photo { grid-template-columns: minmax(0,1fr); }
#zen-learning-students .learning-story__portrait { margin: 0; border-radius: 18px; overflow: hidden; }
#zen-learning-students .learning-story__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
#zen-learning-students .learning-story__copy { min-width: 0; }
#zen-learning-students .learning-story__quote { position: relative; margin: 0 0 22px; padding: 36px 0 0; border: 0; background: none; }
#zen-learning-students .learning-story__quote::before { content: "“"; position: absolute; top: -10px; left: 0; font-family: "Learning Averta",sans-serif !important; font-size: 64px; line-height: 1; color: #A9B2CB; }
#zen-learning-students .learning-story__quote,
#zen-learning-students .learning-story__quote * { font-family: "Learning Averta",sans-serif !important; font-size: 24px !important; font-weight: 400 !important; line-height: 1.5; color: #394C8A; }
#zen-learning-students .learning-story__quote p:last-child { margin-bottom: 0; }
#zen-learning-students .learning-story__person { margin-bottom: 22px; }
#zen-learning-students .learning-story__name { margin: 0 0 8px; font-family: "Learning Averta",sans-serif !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.3; color: #394C8A; }
#zen-learning-students .learning-story__role,
#zen-learning-students .learning-story__program { margin: 0 0 5px; font-family: "NotoSan",sans-serif !important; font-size: 14px !important; line-height: 1.6; color: #66739A; }
#zen-learning-students .learning-story__content,
#zen-learning-students .learning-story__content * { font-family: "NotoSan",sans-serif !important; font-size: 15px !important; line-height: 1.7; color: #222831; }
#zen-learning-students .learning-story__results { margin: 18px 0 0; padding: 0; list-style: none; }
#zen-learning-students .learning-story__results li { padding: 10px 0 10px 18px; position: relative; border-top: 1px solid #DCE1EB; }
#zen-learning-students .learning-story__results li::before { content: ""; position: absolute; left: 0; top: 18px; width: 5px; height: 5px; background: #66739A; border-radius: 50%; }
#zen-learning-students .learning-story__results strong,
#zen-learning-students .learning-story__results span { display: block; font-family: "NotoSan",sans-serif !important; font-size: 14px !important; line-height: 1.6; color: #222831; }
#zen-learning-students .learning-stories-controls { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 28px; }
#zen-learning-students .learning-stories-controls[hidden] { display: none; }
#zen-learning-students .learning-stories-controls button { width: 42px; height: 42px; border: 1px solid #DCE1EB; border-radius: 8px; background: #fff; color: #394C8A; cursor: pointer; }
#zen-learning-students .learning-stories-controls button:disabled { opacity: .4; cursor: default; }
#zen-learning-students .learning-stories-status { font-family: "NotoSan",sans-serif !important; font-size: 13px !important; color: #66739A; }
#zen-learning-students .learning-stories-track:focus-visible,
#zen-learning-students .learning-stories-controls button:focus-visible { outline: 2px solid #394C8A; outline-offset: -2px; }
@media (max-width:991px) {
#zen-learning-students.learning-stories { padding: 56px 0; }
#zen-learning-students .learning-story { grid-template-columns: minmax(0,1fr); gap: 28px; }
#zen-learning-students .learning-story__portrait img { aspect-ratio: 2.5/1; }
#zen-learning-students .title-all,
#zen-learning-students .title-all span,
#zen-learning-students .title-all strong { font-size: 28px !important; }
#zen-learning-students .learning-section-description,
#zen-learning-students .learning-section-description * { font-size: 16px !important; }
#zen-learning-students .learning-story__quote,
#zen-learning-students .learning-story__quote * { font-size: 22px !important; }
}
@media (max-width:575px) {
#zen-learning-students.learning-stories { padding: 40px 0; }
#zen-learning-students > .container { padding: 0 22px; }
#zen-learning-students .learning-story { gap: 24px; }
#zen-learning-students .learning-story__portrait { border-radius: 12px; }
#zen-learning-students .learning-story__portrait img { aspect-ratio: 16/9; }
#zen-learning-students .title-all,
#zen-learning-students .title-all span,
#zen-learning-students .title-all strong { font-size: 22px !important; }
#zen-learning-students .learning-section-description,
#zen-learning-students .learning-section-description * { font-size: 14px !important; }
#zen-learning-students .learning-story__quote,
#zen-learning-students .learning-story__quote * { font-size: 20px !important; }
#zen-learning-students .learning-story__name { font-size: 20px !important; }
#zen-learning-students .learning-story__content,
#zen-learning-students .learning-story__content * { font-size: 14px !important; }
}
/* Student story navigation stays visible directly above the portrait. */
#zen-learning-students .learning-stories-controls {
width: calc((100% - 48px) * .35);
margin: 0 0 16px;
justify-content: flex-end;
}
#zen-learning-students .learning-stories-controls[hidden] { display: none !important; }
@media (max-width: 991px) {
#zen-learning-students .learning-stories-controls { width: 100%; margin-bottom: 14px; }
}
/* Clear, touch-friendly student story navigation. */
#zen-learning-students .learning-stories-controls { gap: 18px; align-items: center; }
#zen-learning-students .learning-stories-controls button {
width: 44px; height: 44px; min-width: 44px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: #394C8A; border: 1px solid #394C8A;
color: #FFFFFF; font-size: 20px !important; line-height: 1;
opacity: 1; cursor: pointer;
}
#zen-learning-students .learning-stories-controls button:disabled {
background: #EEF0F5; border-color: #DEE2ED; color: #A5AEC6;
opacity: 1; cursor: default;
}
#zen-learning-students .learning-stories-controls button:focus-visible {
outline: 2px solid #66739A; outline-offset: 3px;
}
#zen-learning-students .learning-stories-status { color: #66739A; min-width: 38px; text-align: center; }
@media (max-width: 575px) {
#zen-learning-students .learning-stories-controls button { width: 40px; height: 40px; min-width: 40px; }
}
/* Learning FAQ: a calm, full-width accordion. */
#zen-learning-faq { background: #EEF0F5; padding: 80px 0; }
#zen-learning-faq > .container { max-width: 1280px; padding: 0 32px; }
#zen-learning-faq .title-all,
#zen-learning-faq .title-all span,
#zen-learning-faq .title-all strong { font-family: "Learning Averta",sans-serif !important; font-size: 34px !important; line-height: 1.3; color: #394C8A; }
#zen-learning-faq .title-all span { font-weight: 700 !important; }
#zen-learning-faq .title-all strong { font-weight: 400 !important; }
#zen-learning-faq .learning-section-description,
#zen-learning-faq .learning-section-description * { font-family: "NotoSan",sans-serif !important; font-size: 17px !important; line-height: 1.7; color: #222831; }
#zen-learning-faq .learning-faq-list { margin-top: 32px; border-top: 1px solid #D3D9E6; }
#zen-learning-faq .learning-faq-item { margin: 0; padding: 0; border: 0; border-bottom: 1px solid #D3D9E6; border-radius: 0; background: transparent; }
#zen-learning-faq .learning-faq-item summary { position: relative; display: block; list-style: none; padding: 22px 48px 22px 0; cursor: pointer; font-family: "Learning Averta",sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.45; color: #394C8A; }
#zen-learning-faq .learning-faq-item summary::-webkit-details-marker { display: none; }
#zen-learning-faq .learning-faq-item summary::marker { content: ""; }
#zen-learning-faq .learning-faq-item summary::after { content: "+"; position: absolute; right: 0; top: 19px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 400; line-height: 1; color: #66739A; }
#zen-learning-faq .learning-faq-item[open] summary::after { content: "−"; }
#zen-learning-faq .learning-faq-item summary:focus-visible { outline: 2px solid #66739A; outline-offset: 3px; }
#zen-learning-faq .learning-faq-answer { padding: 0 48px 24px 0; }
#zen-learning-faq .learning-faq-answer,
#zen-learning-faq .learning-faq-answer * { font-family: "NotoSan",sans-serif !important; font-size: 16px !important; line-height: 1.7; color: #222831; }
#zen-learning-faq .learning-faq-answer p:last-child { margin-bottom: 0; }
@media (max-width:991px) {
#zen-learning-faq { padding: 56px 0; }
#zen-learning-faq .title-all,
#zen-learning-faq .title-all span,
#zen-learning-faq .title-all strong { font-size: 28px !important; }
#zen-learning-faq .learning-section-description,
#zen-learning-faq .learning-section-description * { font-size: 16px !important; }
}
@media (max-width:575px) {
#zen-learning-faq { padding: 40px 0; }
#zen-learning-faq > .container { padding: 0 22px; }
#zen-learning-faq .title-all,
#zen-learning-faq .title-all span,
#zen-learning-faq .title-all strong { font-size: 22px !important; }
#zen-learning-faq .learning-section-description,
#zen-learning-faq .learning-section-description * { font-size: 14px !important; }
#zen-learning-faq .learning-faq-list { margin-top: 24px; }
#zen-learning-faq .learning-faq-item summary { padding: 18px 40px 18px 0; font-size: 18px !important; }
#zen-learning-faq .learning-faq-item summary::after { top: 15px; }
#zen-learning-faq .learning-faq-answer { padding: 0 0 20px; }
#zen-learning-faq .learning-faq-answer,
#zen-learning-faq .learning-faq-answer * { font-size: 14px !important; }
}
/* The Learning consultation form keeps all fields visible. */
#form-register .learning-consultation-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
#form-register .learning-consultation-fields label,
#form-register .learning-consultation-fields legend { display: block; font-family: "NotoSan",sans-serif !important; font-size: 14px !important; line-height: 1.5; color: #222831; }
#form-register .learning-form-wide { grid-column: 1/-1; }
#form-register .learning-consultation-fields fieldset { padding: 0; margin: 0; border: 0; }
#form-register .learning-consultation-fields legend { margin-bottom: 12px; }
#form-register .learning-consultation-fields .wpcf7-radio { display: flex; gap: 24px; flex-wrap: wrap; }
#form-register .learning-consultation-fields .wpcf7-list-item { margin: 0; }
#form-register .learning-consultation-fields .wpcf7-radio label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
#form-register .learning-consultation-fields input[type=radio] { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: #394C8A; }
#form-register .learning-consultation-fields input:not([type=radio]):not([type=submit]),
#form-register .learning-consultation-fields select,
#form-register .learning-consultation-fields textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 12px 14px; border: 1px solid #D3D9E6; border-radius: 8px; background: white; color: #222831; font-family: "NotoSan",sans-serif !important; font-size: 15px !important; line-height: 1.5; }
#form-register .learning-consultation-fields textarea { resize: vertical; }
#form-register .learning-consultation-fields small { display: block; margin-top: 5px; color: #66739A; font-size: 12px !important; }
#form-register .learning-consultation-fields input[type=submit] { width: auto; border: 0; border-radius: 8px; padding: 14px 24px; background: #394C8A; color: white; font-family: "Learning Averta",sans-serif !important; font-size: 16px !important; font-weight: 700; cursor: pointer; }
@media(max-width:575px) {
#form-register .learning-consultation-fields { grid-template-columns: minmax(0,1fr); gap: 16px; }
#form-register .learning-consultation-fields input[type=submit] { width: 100%; font-size: 14px !important; }
}
/* Final Learning section: admin copy beside the consultation form. */
#form-register.type2-consultation { background: #25345F; padding: 80px 0; }
#form-register.type2-consultation::before,
#form-register.type2-consultation::after { display: none !important; }
#form-register > .learning-consultation-layout { display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,.58fr); gap: 56px; align-items: start; max-width: 1280px; padding: 0 32px; }
#form-register .learning-consultation-copy { min-width: 0; padding-top: 18px; }
#form-register .learning-section-heading,
#form-register .learning-section-heading span,
#form-register .learning-section-heading strong { font-family: "Learning Averta",sans-serif !important; font-size: 34px !important; line-height: 1.35; text-align: left; color: #FFFFFF !important; }
#form-register .learning-section-heading span { font-weight: 700 !important; }
#form-register .learning-section-heading strong { font-weight: 400 !important; }
#form-register .learning-section-heading::before { filter: brightness(0) invert(1); opacity: .7; }
#form-register .learning-section-description,
#form-register .learning-section-description *,
#form-register .learning-form-help,
#form-register .learning-form-help * { font-family: "NotoSan",sans-serif !important; font-size: 16px !important; line-height: 1.75; color: #E6EAF3 !important; text-align: left; }
#form-register .learning-section-description.learning-description--compass::before { filter: brightness(0) invert(1); opacity: .7; }
#form-register .learning-form-help { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18); }
#form-register .type2-cta-form { min-width: 0; margin: 0; padding: 32px; background: #FFFFFF; border-radius: 16px; color: #222831; }
#form-register .type2-cta-form .wpcf7 { width: 100%; }
#form-register .type2-cta-form form { margin: 0; }
#form-register .type2-cta-form .wpcf7-response-output { color: #222831; font-family: "NotoSan",sans-serif !important; font-size: 14px !important; line-height: 1.6; margin: 20px 0 0; }
#form-register .type2-cta-form .wpcf7-not-valid-tip { color: #B42318; font-size: 13px !important; margin-top: 5px; }
#form-register .learning-consultation-fields input:focus-visible,
#form-register .learning-consultation-fields select:focus-visible,
#form-register .learning-consultation-fields textarea:focus-visible { outline: 2px solid #66739A; outline-offset: 2px; }
@media(max-width:991px) {
#form-register.type2-consultation { padding: 56px 0; }
#form-register > .learning-consultation-layout { grid-template-columns: minmax(0,1fr); gap: 32px; }
#form-register .learning-consultation-copy { padding-top: 0; }
#form-register .learning-section-heading,
#form-register .learning-section-heading span,
#form-register .learning-section-heading strong { font-size: 28px !important; }
}
@media(max-width:575px) {
#form-register.type2-consultation { padding: 40px 0; }
#form-register > .learning-consultation-layout { padding: 0 22px; gap: 24px; }
#form-register .learning-section-heading,
#form-register .learning-section-heading span,
#form-register .learning-section-heading strong { font-size: 22px !important; }
#form-register .learning-section-description,
#form-register .learning-section-description *,
#form-register .learning-form-help,
#form-register .learning-form-help * { font-size: 14px !important; }
#form-register .type2-cta-form { padding: 22px 18px; border-radius: 12px; }
}
/* Learning connection: simple typography without decorative assets. */
.type2-page--zen-learning .section-connect .image-before,
.type2-page--zen-learning .section-connect .image-after,
.type2-page--zen-learning .section-connect::before,
.type2-page--zen-learning .section-connect::after { display: none !important; }
.type2-page--zen-learning .section-connect h2.title-all {
font-family: "Learning Averta", sans-serif !important;
font-size: 24px !important; font-weight: 700 !important;
line-height: 1.4; color: #394C8A !important;
text-shadow: none !important; -webkit-text-stroke: 0 !important;
letter-spacing: normal; background: none; -webkit-text-fill-color: #394C8A;
}
.type2-page--zen-learning .section-connect h2.title-all::before,
.type2-page--zen-learning .section-connect h2.title-all::after { display: none !important; }
@media (max-width:991px) {
.type2-page--zen-learning .section-connect h2.title-all { font-size: 22px !important; }
}
@media (max-width:575px) {
.type2-page--zen-learning .section-connect h2.title-all { font-size: 20px !important; }
}
/* Mobile connection: balanced vertical logos and generous breathing room. */
@media (max-width:575px) {
.type2-page--zen-learning .section-connect { padding: 48px 0 !important; height: auto; min-height: 0; }
.type2-page--zen-learning .section-connect > .container { padding-left: 22px; padding-right: 22px; }
.type2-page--zen-learning .section-connect h2.title-all { font-size: 18px !important; line-height: 1.45; text-align: center; margin: 0 0 32px !important; }
.type2-page--zen-learning .section-connect .row { display: flex; flex-direction: column; align-items: center; gap: 28px; margin: 0; }
.type2-page--zen-learning .section-connect .row > .col { width: 100%; max-width: 100%; flex: 0 0 auto; padding: 0; margin: 0; }
.type2-page--zen-learning .section-connect .item-conect { margin: 0; text-align: center; }
.type2-page--zen-learning .section-connect .item-conect > a { display: inline-block; width: min(210px,100%); }
.type2-page--zen-learning .section-connect .item-conect img { display: block; width: 100% !important; max-width: 210px !important; height: auto !important; min-height: 0 !important; object-fit: contain; margin: 0 auto; }
.type2-page--zen-learning .section-connect .item-conect .title { font-size: 26px !important; margin: 0; }
}
/* Tablet connection: prominent logos in a balanced centered row. */
@media (min-width:576px) and (max-width:991px) {
.type2-page--zen-learning .section-connect { padding: 56px 0 !important; height: auto; min-height: 0; }
.type2-page--zen-learning .section-connect > .container { padding-left: 28px; padding-right: 28px; }
.type2-page--zen-learning .section-connect h2.title-all { font-size: 20px !important; line-height: 1.45; text-align: center; margin: 0 0 36px !important; }
.type2-page--zen-learning .section-connect .row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 56px; margin: 0; }
.type2-page--zen-learning .section-connect .row > .col { width: 220px; max-width: 220px; flex: 0 0 220px; padding: 0; margin: 0; }
.type2-page--zen-learning .section-connect .item-conect { margin: 0; text-align: center; }
.type2-page--zen-learning .section-connect .item-conect > a { display: block; width: 100%; }
.type2-page--zen-learning .section-connect .item-conect img { display: block; width: 220px !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; object-fit: contain; margin: 0 auto; }
.type2-page--zen-learning .section-connect .item-conect .title { font-size: 28px !important; margin: 0; }
}
/* Desktop connection heading proportion. */
@media (min-width:992px) {
.type2-page--zen-learning .section-connect h2.title-all {
font-size: 30px !important;
margin-bottom: 64px !important;
}
}
/* Keep faces visible in the portrait crops used by Zen Learning. */
#zen-learning-team .learning-team-card__portrait img,
#zen-learning-students .learning-story__portrait img {
object-position: center top;
}
/* A wide banner crop removes most of a vertical student portrait. */
@media (max-width: 991px) {
#zen-learning-students .learning-story__portrait img {
aspect-ratio: 4 / 3;
}
}