/* ==========================================================================
PATHWAY ADVENTURES LIMITED — Option 2
Bảng màu "New Zealand Premium" theo đề xuất của khách.
Toàn bộ token nằm trong :root. Đổi một dòng ở đây là đổi cả site.
========================================================================== */
:root{
/* --- MÀU THƯƠNG HIỆU (đúng mã khách chọn) ------------------------------
Dùng cho mảng màu lớn, icon, đường viền, gradient, đồ hoạ.
KHÔNG dùng làm nền cho chữ trắng nhỏ: trắng trên --brand-blue chỉ đạt
4.1:1 và trên --brand-green chỉ 3.3:1, đều dưới chuẩn WCAG AA 4.5:1. */
--brand-blue:#0284C7;
--brand-green:#16A34A;
/* --- Biến thể đậm: dùng cho NÚT và CHỮ (đạt AA) ----------------------- */
--blue-700:#0369A1; /* 5.93:1 với chữ trắng */
--blue-800:#075985; /* 7.56:1 — hover, heading phụ */
--blue-900:#0C4A6E; /* nền footer, panel tối */
--blue-950:#082F49;
--green-700:#15803D; /* 5.02:1 — NÚT HÀNH ĐỘNG CHÍNH */
--green-800:#166534; /* 7.13:1 — hover */
/* --- Nền sáng --- */
--white:#FFFFFF;
--sky-50:#F0F9FF; /* section xen kẽ tông lam */
--green-50:#F0FDF4; /* section xen kẽ tông lục */
--slate-50:#F8FAFC;
--sky-100:#E0F2FE;
--green-100:#DCFCE7;
/* tông lam pha trắng — dùng cho nền lớn, giữ trang thật thoáng */
--sky-25:#F7FBFE; /* gần như trắng, chỉ phớt lam */
--sky-75:#E8F4FC; /* nền dịu cho thanh tiện ích, footer */
--sky-veil:#DCEEF9; /* viền và đường kẻ tông lam */
--cream:#FBF4E9; /* nền thanh menu bản sáng */
--cream-line:#EFE3D2;
/* --- Chữ --- */
--ink:#1E293B; /* Midnight Blue — 14.6:1 trên trắng */
--ink-soft:#475569; /* 7.1:1 — chữ phụ */
--line:#E4EEF6;
--line-soft:#F0F6FB;
--star:#D97706; /* 3.2:1 trên trắng — đạt mốc đồ hoạ 3:1 */
/* --- Hai màu nhấn phụ, chỉ dùng cho thẻ số liệu và ô tin cậy --------- */
--amber:#C2691C; /* đồ hoạ, viền, icon */
--amber-700:#9A4E12; /* 5.42:1 — chữ */
--amber-50:#FEF6EC;
--teal:#0E7490; /* đồ hoạ */
--teal-700:#0B5F76; /* 6.09:1 — chữ */
--teal-50:#ECFAFD;
/* --- Chữ --- */
--font-head:"Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-body:"Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--fs-hero:clamp(2.1rem, 4.6vw, 3.65rem);
--fs-h2:clamp(1.7rem, 3.1vw, 2.6rem);
--fs-h3:clamp(1.1rem, 1.6vw, 1.32rem);
--fs-lead:clamp(1rem, 1.35vw, 1.14rem);
/* --- Bố cục --- */
--section-y:clamp(3.5rem, 7vw, 6.5rem);
--wrap:1280px;
--wrap-narrow:840px;
--r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
--shadow-xs:0 1px 2px rgba(15,42,66,.04);
--shadow-sm:0 1px 3px rgba(15,42,66,.05), 0 4px 14px rgba(15,42,66,.04);
--shadow-md:0 4px 12px rgba(15,42,66,.05), 0 14px 34px rgba(15,42,66,.06);
--shadow-lg:0 8px 20px rgba(15,42,66,.06), 0 24px 56px rgba(15,42,66,.09);
--head-h:100px;
--ease:cubic-bezier(.22,.7,.28,1);
}
/* ============================ Reset ============================ */
*,*::before,*::after{box-sizing:border-box}
/* Thu nhỏ nhẹ toàn bộ nhịp chữ/khoảng cách theo mong muốn 90% zoom,
nhưng vẫn giữ layout responsive và vùng tương tác nguyên vẹn. */
html{font-size:90%; -webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 16px)}
body{margin:0; font-family:var(--font-body); font-size:1rem; line-height:1.7; color:var(--ink);
background:var(--sky-25); -webkit-font-smoothing:antialiased; overflow-x:hidden}
/* Bắt buộc: attribute width/height trên ![]()
thắng CSS aspect-ratio nếu thiếu dòng này. */
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; line-height:1.22; margin:0 0 .5em; color:var(--ink); letter-spacing:-.015em}
h1{font-size:var(--fs-hero)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3); font-weight:600}
p{margin:0 0 1em}
a{color:var(--blue-700); text-decoration:none}
a:hover{color:var(--blue-800)}
ul{margin:0; padding:0; list-style:none}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--brand-blue); outline-offset:3px; border-radius:6px}
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem, var(--wrap-narrow)); margin-inline:auto}
/* Từ tablet trở lên: thêm khoảng ~1cm lề mỗi bên (2.36rem × 2) so với mức gốc,
để nội dung không dính sát mép màn hình ở các bề rộng chưa chạm mức tối đa
var(--wrap). Giữ nguyên lề gốc trên điện thoại vì màn đã hẹp sẵn. */
@media (min-width:641px){
.wrap{width:min(100% - 7.25rem, var(--wrap))}
.wrap-narrow{width:min(100% - 7.25rem, var(--wrap-narrow))}
}
.section{padding-block:var(--section-y)}
/* Nền trang đã phớt lam nên section trắng giờ là mảng sáng để tạo nhịp,
thay vì ngược lại như trước. */
.section--white{background:var(--white)}
.section--sky{background:var(--sky-75)}
.section--green{background:#EDFAF1}
.section--tight{padding-block:clamp(2.25rem,4.5vw,3.5rem)}
.skip{position:absolute; left:-9999px; top:0; background:var(--blue-800); color:#fff; padding:.75rem 1.25rem; z-index:300}
.skip:focus{left:.5rem; top:.5rem}
/* ============================ Bits ============================ */
.eyebrow{font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--blue-700); margin:0 0 .85rem; display:flex; align-items:center; gap:.6rem}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--brand-green); border-radius:2px; flex:none}
.eyebrow--center{justify-content:center}
.lead{font-size:var(--fs-lead); color:var(--ink-soft); max-width:64ch}
.head-block{max-width:760px; margin-bottom:clamp(2rem,4vw,3rem)}
.head-block--center{margin-inline:auto; text-align:center}
.head-block--center .lead{margin-inline:auto}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
padding:.9rem 1.75rem; border-radius:var(--r-pill); border:2px solid transparent;
font-weight:600; font-size:.95rem; cursor:pointer; text-align:center;
transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease),
transform .28s var(--ease), box-shadow .28s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn--cta{background:var(--green-700); color:#fff; box-shadow:0 4px 14px rgba(21,128,61,.28)}
.btn--cta:hover{background:var(--green-800); color:#fff; box-shadow:0 8px 22px rgba(21,128,61,.34)}
.btn--blue{background:var(--blue-700); color:#fff; box-shadow:0 4px 14px rgba(3,105,161,.24)}
.btn--blue:hover{background:var(--blue-800); color:#fff}
.btn--ghost{border-color:var(--line); color:var(--blue-700); background:var(--white)}
.btn--ghost:hover{border-color:var(--brand-blue); background:var(--sky-25); color:var(--blue-800)}
.btn--light{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.55)}
.btn--light:hover{background:#fff; color:var(--blue-800); border-color:#fff}
.btn--block{width:100%}
.btn--sm{padding:.6rem 1.15rem; font-size:.87rem}
.btn-row{display:flex; flex-wrap:wrap; gap:.8rem}
.btn-row--center{justify-content:center}
/* ============================ Header ============================ */
.site-header{position:sticky; top:0; z-index:120; background:var(--white); box-shadow:var(--shadow-xs)}
.site-header.is-stuck{box-shadow:var(--shadow-sm)}
/* ---- header một hàng ---- */
.head-main{display:flex; align-items:center; gap:.9rem; min-height:var(--head-h); flex-wrap:nowrap;
width:min(100% - 1.75rem, 1500px); margin-inline:auto}
.head-left{flex:none}
.brand{display:flex; align-items:center; gap:.8rem}
.brand img{width:66px; height:auto; flex:none}
.brand-text{display:flex; flex-direction:column; line-height:1.2}
.brand-name{font-size:1.46rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; white-space:nowrap}
.brand-slogan{font-size:.88rem; color:var(--blue-900); font-weight:500; white-space:nowrap}
/* nút đổi ngôn ngữ nằm góc phải trên, tách khỏi cụm logo */
.lang{display:inline-flex; align-items:center; gap:.15rem; background:var(--sky-75);
border:1px solid var(--sky-veil); border-radius:var(--r-pill); padding:3px; flex:none;
align-self:flex-end}
.lang a{padding:.26rem .72rem; border-radius:var(--r-pill); font-weight:700; font-size:.88rem;
line-height:1.55; color:var(--blue-800)}
.lang a.is-on{background:var(--blue-700); color:#fff; box-shadow:0 2px 8px rgba(3,105,161,.28)}
.lang a.is-on:hover{color:#fff}
/* Nút gọi là một nút tròn đặt cạnh VI/EN, không trải dãy số ra thanh menu: dãy
số chiếm hơn 110px nên đẩy sáu mục menu chồng lên nhau ở màn 1440–1600.
Số vẫn đọc được bằng trình đọc màn hình qua aria-label trên thẻ . */
.head-tel{display:inline-grid; place-items:center; width:44px; height:44px; flex:none;
border:1px solid var(--sky-veil); border-radius:50%; background:var(--sky-100);
color:var(--blue-800);
transition:background .25s var(--ease), border-color .25s var(--ease),
box-shadow .25s var(--ease), transform .25s var(--ease)}
.head-tel span{display:none}
.head-tel svg{color:var(--brand-blue); width:22px; height:22px}
.head-tel:hover{background:var(--brand-blue); border-color:var(--brand-blue);
transform:translateY(-1px); box-shadow:0 4px 14px rgba(3,105,161,.28)}
.head-tel:hover svg{color:#fff}
/* điều hướng 5 mảng + dropdown */
.nav{margin-left:auto; display:flex; align-items:center; gap:.1rem; flex-wrap:nowrap; min-width:0}
.nav__item{position:relative; display:flex; align-items:center}
.nav__link{display:inline-flex; align-items:center; gap:.5rem; padding:.68rem .8rem; border-radius:var(--r-sm);
font-size:1.1rem; font-weight:600; color:var(--ink); white-space:nowrap; letter-spacing:-.005em;
transition:background .25s var(--ease), color .25s var(--ease)}
.nav__link svg{width:22px; height:22px}
.nav__link svg{color:var(--brand-blue); flex:none; transition:color .25s var(--ease)}
.nav__link:hover,.nav__item.is-open .nav__link,.nav__link[aria-current="page"]{background:var(--sky-75); color:var(--blue-800)}
.nav__link[aria-current="page"] svg{color:var(--brand-green)}
/* Desktop: nút mũi tên chỉ là ký hiệu trang trí, không nhận chuột — để cả hàng
vẫn mở dropdown khi rê và bấm vào tên mảng vẫn dẫn sang trang. */
.nav__lang{display:none}
.nav__toggle{display:inline-grid; place-items:center; padding:0; margin-left:-.25rem;
background:none; border:0; color:inherit; pointer-events:none}
.nav__caret{transition:rotate .3s var(--ease); opacity:.5}
.nav__item.is-open .nav__caret{rotate:180deg}
.drop{position:absolute; top:100%; left:0; min-width:270px; background:var(--white);
border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg);
padding:.5rem; opacity:0; translate:0 8px; pointer-events:none;
transition:opacity .25s var(--ease), translate .25s var(--ease); z-index:10}
.nav__item.is-open .drop{opacity:1; translate:0 0; pointer-events:auto}
.drop a{display:block; padding:.62rem .8rem; border-radius:var(--r-sm); font-size:.9rem; color:var(--ink); font-weight:500}
.drop a:hover{background:var(--sky-25); color:var(--blue-800)}
.drop a small{display:block; font-size:.78rem; color:var(--ink-soft); font-weight:400; margin-top:.1rem}
/* mục "Về chúng tôi" nhẹ hơn 5 mảng chính để phân cấp rõ */
.nav__item--minor{margin-left:.5rem; position:relative}
.nav__item--minor::before{content:""; position:absolute; left:-.5rem; top:50%; translate:0 -50%;
width:1px; height:26px; background:var(--line)}
.nav__item--minor .nav__link{color:var(--ink); font-weight:600}
.nav__item--minor .nav__link svg:first-child{color:var(--blue-700)}
.nav__item--minor .drop{left:auto; right:0}
.head-cta{flex:none; display:flex; align-items:center; gap:.7rem; margin-left:.7rem}
.head-cta__row{display:flex; align-items:center; gap:.7rem}
.burger{display:none; width:46px; height:46px; border:0; background:var(--sky-75); cursor:pointer;
flex-direction:column; justify-content:center; align-items:center; gap:5px; border-radius:var(--r-sm)}
.burger span{display:block; width:20px; height:2px; background:var(--ink); border-radius:2px;
transition:transform .3s var(--ease), opacity .3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ============================ Hero sáng ============================ */
/* ====================================================== HERO ẢNH NỀN ======= */
.hero{position:relative; isolation:isolate; overflow:hidden;
min-height:clamp(540px, 76vh, 760px); display:flex; align-items:center;
padding-block:clamp(3.5rem,8vw,6rem)}
.hero__bg{position:absolute; inset:0; z-index:-2; display:block; overflow:hidden}
/* Các ảnh xếp chồng, chỉ đổi opacity và transform nên chạy trên GPU,
không kích hoạt layout hay paint lại. */
.hero__slide{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
object-position:50% 55%; opacity:0; transform:scale(1.06);
transition:opacity 1.15s var(--ease), transform 9s linear}
.hero__slide.is-on{opacity:1; transform:scale(1)}
.hero__dots{position:absolute; left:0; right:0; bottom:clamp(1.1rem,2.6vw,2rem); z-index:3;
display:flex; justify-content:center; gap:.5rem}
.hero__dots button{width:9px; height:9px; padding:0; border:0; border-radius:var(--r-pill);
background:rgba(255,255,255,.45); cursor:pointer;
transition:width .4s var(--ease), background .4s var(--ease)}
.hero__dots button:hover{background:rgba(255,255,255,.75)}
.hero__dots button[aria-pressed="true"]{width:26px; background:#fff}
.hero__dots button:focus-visible{outline:2px solid #fff; outline-offset:3px}
@media (prefers-reduced-motion: reduce){
.hero__slide{transition:opacity .25s linear; transform:none}
.hero__slide.is-on{transform:none}
}
/* Lớp phủ: đậm bên trái để chữ trắng luôn đọc được, nhạt dần sang phải
để vẫn thấy rõ hồ Wakatipu và dãy núi. */
.hero::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:linear-gradient(100deg, rgba(6,38,60,.92) 0%, rgba(6,38,60,.86) 30%,
rgba(6,38,60,.62) 55%, rgba(6,38,60,.30) 78%, rgba(6,38,60,.22) 100%)}
.hero::after{content:""; position:absolute; inset:auto 0 0; height:26%; z-index:-1; pointer-events:none;
background:linear-gradient(180deg, transparent, rgba(6,38,60,.55))}
.hero__inner{position:relative}
.hero__text{max-width:640px}
.hero__pill{display:inline-flex; align-items:center; gap:.5rem; padding:.42rem 1rem .42rem .75rem;
background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.34); border-radius:var(--r-pill);
font-size:.82rem; font-weight:600; color:#fff; margin-bottom:1.35rem;
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.hero__pill svg{color:#8FE3AE; flex:none}
.hero h1{margin-bottom:1.1rem; color:#fff; text-shadow:0 2px 26px rgba(3,20,34,.45)}
.hero h1 em{font-style:normal; color:#7ED2F7}
.hero__sub{font-size:clamp(1.04rem,1.5vw,1.2rem); color:rgba(255,255,255,.94); max-width:50ch;
margin-bottom:2rem; text-shadow:0 1px 16px rgba(3,20,34,.4)}
.btn--glass{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.45); color:#fff;
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.btn--glass:hover{background:rgba(255,255,255,.24); border-color:#fff; color:#fff}
.hero__badge{display:inline-flex; align-items:center; gap:.8rem; margin-top:2.25rem;
padding:.85rem 1.25rem .85rem 1rem; border-radius:var(--r-md); max-width:380px;
background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.hero__badge svg{color:#8FE3AE; flex:none}
.hero__badge b{display:block; font-size:.9rem; line-height:1.3; color:#fff}
.hero__badge > span > span{font-size:.78rem; color:rgba(255,255,255,.82); line-height:1.45}
@media (max-width:760px){
.hero{min-height:clamp(460px,72vh,600px)}
.hero::before{background:linear-gradient(160deg, rgba(6,38,60,.86) 0%, rgba(6,38,60,.72) 55%, rgba(6,38,60,.80) 100%)}
.hero__badge{max-width:none}
}
/* dải tin cậy dưới hero */
.trust{display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; margin-top:clamp(2.5rem,5vw,3.5rem)}
/* --- Ba ô tin cậy dưới hero: mỗi ô một tông màu riêng ------------------- */
.tcard{position:relative; overflow:hidden; isolation:isolate; padding:1.6rem 1.5rem 1.7rem;
border-radius:var(--r-lg); border:1px solid var(--tc-line); background:var(--white);
transform-style:preserve-3d;
transition:box-shadow .45s var(--ease), border-color .45s var(--ease);
box-shadow:var(--shadow-sm)}
.tcard::before{content:""; position:absolute; inset:0 0 auto; height:5px; z-index:2;
background:linear-gradient(90deg, var(--tc-a), var(--tc-b))}
.tcard::after{content:""; position:absolute; inset:5px 0 auto; height:120px; z-index:-1;
background:linear-gradient(180deg, var(--tc-wash), transparent)}
.tcard:hover{box-shadow:var(--shadow-md); border-color:var(--tc-a)}
.tcard__glyph{position:absolute; right:-18px; bottom:-22px; z-index:-1; color:var(--tc-a); opacity:.09;
pointer-events:none}
.tcard__icon{display:inline-grid; place-items:center; width:46px; height:46px; border-radius:14px;
background:var(--tc-a); color:#fff; margin-bottom:.9rem; box-shadow:0 6px 16px var(--tc-glow);
transform:translateZ(28px)}
.tcard__kicker{display:block; font-size:.7rem; font-weight:700; letter-spacing:.09em;
text-transform:uppercase; color:var(--tc-t); margin-bottom:.3rem}
.tcard b{display:block; font-size:1.28rem; font-weight:700; color:var(--ink); line-height:1.25;
margin-bottom:.45rem}
.tcard p{font-size:.87rem; color:var(--ink-soft); margin:0; line-height:1.6}
.tcard--blue { --tc-a:var(--brand-blue); --tc-b:#38BDF8; --tc-t:var(--blue-800);
--tc-wash:rgba(2,132,199,.07); --tc-line:var(--sky-veil); --tc-glow:rgba(2,132,199,.28)}
.tcard--green{ --tc-a:var(--green-700); --tc-b:var(--brand-green); --tc-t:var(--green-800);
--tc-wash:rgba(22,163,74,.07); --tc-line:#D8EFE0; --tc-glow:rgba(22,163,74,.26)}
.tcard--amber{ --tc-a:var(--amber); --tc-b:#E8A15C; --tc-t:var(--amber-700);
--tc-wash:rgba(194,105,28,.07); --tc-line:#F2E2D0; --tc-glow:rgba(194,105,28,.25)}
.tcard .five{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.15rem}
.tcard .five span{font-size:.75rem; font-weight:600; color:var(--tc-t); background:var(--tc-wash);
border:1px solid var(--tc-line); padding:.24rem .6rem; border-radius:var(--r-pill)}
/* đầu trang con */
.pagehead{background:linear-gradient(165deg, var(--sky-75), var(--white) 68%); padding-block:clamp(2.5rem,5vw,4rem) clamp(2.25rem,4.5vw,3.25rem); border-bottom:1px solid var(--line-soft)}
.pagehead h1{max-width:22ch; margin-bottom:.75rem}
.pagehead h1 em,
.section h2 em,
.section h3 em{font-style:normal; color:var(--green-700)}
.pagehead p{color:var(--ink-soft); max-width:60ch; font-size:var(--fs-lead); margin-bottom:0}
/* --- Đầu trang có ảnh: chữ bên trái, ảnh bên phải cho cân ---------------- */
.pagehead--img{padding-block:clamp(2rem,4vw,3.2rem) clamp(2.25rem,4.5vw,3.5rem); overflow:hidden}
.pagehead__grid{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(1.75rem,4vw,3.5rem);
align-items:center}
.pagehead--img h1{max-width:19ch; margin-bottom:.85rem}
.pagehead--img p{max-width:54ch}
.pagehead__kicker{font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
color:var(--green-800); margin-bottom:.5rem}
.pagehead__media{margin:0; position:relative; border-radius:var(--r-xl); overflow:hidden;
box-shadow:var(--shadow-lg); background:var(--sky-75)}
.pagehead__media img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
transition:transform 1.1s var(--ease)}
.pagehead__media:hover img{transform:scale(1.04)}
.pagehead__media::after{content:""; position:absolute; inset:auto 0 0; height:38%;
background:linear-gradient(180deg, transparent, rgba(8,47,73,.16)); pointer-events:none}
/* --- Dải ảnh giới thiệu, kiểu trang tour ------------------------------- */
.strip-band{padding-block:clamp(1.75rem,3.5vw,2.75rem) 0}
.striprow{display:grid; grid-template-columns:1.62fr 1fr 1fr;
grid-template-rows:repeat(2, minmax(0,1fr)); gap:.85rem;
height:clamp(300px, 32vw, 440px)}
.striprow figure{margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--sky-75);
box-shadow:var(--shadow-sm); min-height:0}
.striprow img{display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:cover;
transition:transform .9s var(--ease)}
.striprow figure:hover img{transform:scale(1.06)}
.striprow figure:first-child{grid-row:span 2}
.crumbs{display:flex; gap:.45rem; align-items:center; font-size:.83rem; color:var(--ink-soft); margin-bottom:1rem}
.crumbs a{color:var(--blue-700)}
/* ============================ Thẻ 5 mảng ============================ */
.paths{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; perspective:1200px}
.path{position:relative; display:flex; flex-direction:column; background:var(--white);
border:1px solid var(--line); border-radius:var(--r-lg); overflow:visible;
transform:translate3d(0,var(--lift,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
transform-style:preserve-3d; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease)}
.path:hover{--lift:-6px; box-shadow:var(--shadow-lg); border-color:var(--sky-100)}
.path__media{aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--sky-75)}
.path__media img{width:100%; height:100%; object-fit:cover; transition:transform .85s var(--ease)}
.path:hover .path__media img{transform:scale(1.07)}
.path__body{padding:1.25rem 1.25rem 1.4rem; display:flex; flex-direction:column; flex:1}
.path__icon{width:44px; height:44px; border-radius:var(--r-sm); display:grid; place-items:center;
background:var(--sky-25); color:var(--blue-700); margin:-2.6rem 0 .85rem; position:relative; z-index:2;
border:1px solid var(--line); box-shadow:var(--shadow-sm); background-color:var(--white)}
.path h3{margin-bottom:.35rem; font-size:1.14rem}
.path p{color:var(--ink-soft); font-size:.88rem; line-height:1.55; flex:1; margin-bottom:.9rem}
.path__go{font-size:.85rem; font-weight:600; color:var(--blue-700); display:inline-flex; align-items:center; gap:.35rem}
.path__go::after{content:"→"; transition:transform .3s var(--ease)}
.path:hover .path__go::after{transform:translateX(4px)}
/* Cards hỗ trợ học sinh: giữ icon trong card để không bị cắt ở mép section. */
#huong-di .path{overflow:hidden}
#huong-di .path__body{padding:1.25rem 1.25rem 1.4rem}
#huong-di .path__icon{margin:0 0 .85rem}
/* ============================ Thẻ chung ============================ */
.grid{display:grid; gap:1.35rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--people{grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:1.15rem}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--sky-100)}
.card__media{aspect-ratio:16/10; overflow:hidden; background:var(--sky-75)}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:1.3rem 1.3rem 1.45rem; display:flex; flex-direction:column; flex:1}
.card__body h3{margin-bottom:.4rem}
.card__body p{color:var(--ink-soft); font-size:.9rem; flex:1; margin-bottom:.95rem}
.card__bullets{margin-top:.55rem; margin-bottom:0}
.card__bullets li{font-size:.86rem; gap:.55rem}
.card__bullets svg{width:16px; height:16px; margin-top:.2rem}
.card__tag{align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--green-800); background:var(--green-100); padding:.25rem .65rem; border-radius:var(--r-pill); margin-bottom:.75rem}
.card__tag--blue{color:var(--blue-800); background:var(--sky-100)}
.card__go{font-size:.86rem; font-weight:600; color:var(--blue-700); display:inline-flex; align-items:center; gap:.35rem}
.card__go::after{content:"→"; transition:transform .3s var(--ease)}
.card:hover .card__go::after{transform:translateX(4px)}
.feature{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.feature--flip .feature__col-media{order:2}
.feature__one{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg)}
.feature__one img{width:100%; aspect-ratio:4/3; object-fit:cover}
/* logo nổi trên, ảnh thật mờ hơn ở lớp dưới */
.feature__stack{position:relative; padding:0 3rem 3rem 0}
.feature__stack .logo-card{position:relative; z-index:2; background:var(--white); border-radius:var(--r-xl);
box-shadow:var(--shadow-lg); border:1px solid var(--line); padding:clamp(1.75rem,4vw,3rem); display:grid; place-items:center}
.feature__stack .logo-card img{width:min(100%,340px)}
.feature__stack .photo{position:absolute; right:0; bottom:0; width:56%; z-index:1; border-radius:var(--r-lg);
overflow:hidden; box-shadow:var(--shadow-md); opacity:.85}
.feature__stack .photo img{width:100%; aspect-ratio:4/3; object-fit:cover}
.ticks{margin-top:1.4rem; display:grid; gap:.85rem}
.ticks li{display:flex; gap:.75rem; align-items:flex-start; font-size:.93rem; color:var(--ink-soft)}
.ticks li b{color:var(--ink); font-weight:600}
.ticks svg{flex:none; margin-top:.3rem; color:var(--brand-green)}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1.15rem}
/* --- Thẻ số liệu: mỗi con số một tông màu, có vòng cung trang trí ------- */
.stat{position:relative; overflow:hidden; isolation:isolate; text-align:center;
padding:1.9rem 1.15rem 1.6rem; border-radius:var(--r-lg);
border:1px solid var(--st-line); background:var(--white); box-shadow:var(--shadow-xs);
transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.stat::before{content:""; position:absolute; inset:0 0 auto; height:4px; z-index:2;
background:linear-gradient(90deg, var(--st-a), var(--st-b))}
.stat:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.stat__ring{position:absolute; top:-58px; left:50%; translate:-50% 0; width:190px; height:190px;
border-radius:50%; z-index:-1;
background:radial-gradient(circle at 50% 60%, var(--st-wash) 0 30%, transparent 72%)}
.stat__kicker{display:block; font-size:.68rem; font-weight:700; letter-spacing:.11em;
text-transform:uppercase; color:var(--st-t); margin-bottom:.35rem}
.stat b{display:block; font-size:clamp(2.15rem,4vw,3.1rem); line-height:1; font-weight:700;
letter-spacing:-.02em; margin-bottom:.55rem;
background:linear-gradient(160deg, var(--st-a), var(--st-b));
-webkit-background-clip:text; background-clip:text; color:transparent;
-webkit-text-fill-color:transparent}
.stat__rule{display:block; width:34px; height:3px; border-radius:2px; margin:0 auto .7rem;
background:linear-gradient(90deg, var(--st-a), var(--st-b))}
.stat__label{display:block; font-size:.84rem; color:var(--ink-soft); line-height:1.55}
.stat--blue { --st-a:var(--blue-800); --st-b:var(--brand-blue); --st-t:var(--blue-800);
--st-wash:rgba(2,132,199,.10); --st-line:var(--sky-veil)}
.stat--green{ --st-a:var(--green-800); --st-b:var(--brand-green); --st-t:var(--green-800);
--st-wash:rgba(22,163,74,.10); --st-line:#D8EFE0}
.stat--amber{ --st-a:var(--amber-700); --st-b:#D07520; --st-t:var(--amber-700);
--st-wash:rgba(194,105,28,.10); --st-line:#F2E2D0}
.stat--teal { --st-a:var(--teal-700); --st-b:#1487A6; --st-t:var(--teal-700);
--st-wash:rgba(14,116,144,.10); --st-line:#D6EFF5}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
.stat b{color:var(--st-t); -webkit-text-fill-color:currentColor}
}
/* --- Nhãn điểm đánh giá dưới tiêu đề khối review ------------------------ */
.score-pill{display:inline-flex; align-items:center; gap:.45rem; margin:1.1rem auto 0;
padding:.4rem 1rem .4rem .8rem; border-radius:var(--r-pill);
background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-xs)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.35rem; counter-reset:s}
.step{position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem 1.35rem}
.step::before{counter-increment:s; content:"0" counter(s); display:inline-grid; place-items:center;
width:38px; height:38px; border-radius:50%; background:var(--sky-75); color:var(--blue-700);
font-weight:700; font-size:.9rem; margin-bottom:.9rem}
.step h3{font-size:1.05rem; margin-bottom:.35rem}
.step p{font-size:.88rem; color:var(--ink-soft); margin:0}
.person{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column}
.person__media{aspect-ratio:4/5; overflow:hidden; background:var(--sky-75)}
.person__media img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.person:hover .person__media img{transform:scale(1.05)}
.person__body{padding:1.25rem 1.25rem 1.4rem; flex:1; display:flex; flex-direction:column}
.person__body h3{margin-bottom:.1rem; font-size:1.15rem}
.person__role{font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--green-800); font-weight:700; margin-bottom:.8rem}
.person__body p{font-size:.88rem; color:var(--ink-soft); flex:1; margin-bottom:0}
/* ==================== Carousel đánh giá (3 thẻ, chạy từng cái) ==================== */
.revs{position:relative; overflow:hidden}
.revs__viewport{overflow:hidden; padding:.5rem .25rem 1rem}
.revs__track{display:flex; gap:1.25rem; transition:transform .55s var(--ease); will-change:transform}
.rev{flex:0 0 calc((100% - 2.5rem)/3); background:var(--white); border:1px solid var(--line);
border-radius:var(--r-lg); padding:1.5rem 1.4rem 1.3rem; display:flex; flex-direction:column;
position:relative; box-shadow:var(--shadow-xs)}
.rev::before{content:"”"; position:absolute; top:-2px; left:1.35rem; font-size:4.2rem; line-height:1;
color:var(--sky-veil); font-family:Georgia, serif; pointer-events:none}
.rev__stars{display:flex; gap:.12rem; color:var(--star); margin-bottom:.75rem; position:relative}
.rev__text{flex:1; margin:0 0 1.1rem; font-size:.92rem; color:var(--ink-soft); line-height:1.65; position:relative}
.rev__by{border-top:1px solid var(--line-soft); padding-top:.85rem; display:flex; align-items:center; gap:.7rem}
.rev__ava{width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
background:var(--sky-75); color:var(--blue-800); font-weight:700; font-size:.9rem}
.rev__by b{display:block; font-size:.88rem; color:var(--ink); line-height:1.3}
.rev__by span{font-size:.78rem; color:var(--ink-soft)}
.revs__btn{position:absolute; top:50%; translate:0 -50%; z-index:3; width:44px; height:44px; border-radius:50%;
border:1px solid var(--line); background:var(--white); color:var(--blue-700); cursor:pointer;
display:grid; place-items:center; box-shadow:var(--shadow-sm);
transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease)}
.revs__btn:hover{background:var(--blue-700); color:#fff; transform:scale(1.06)}
.revs__btn--prev{left:2px} .revs__btn--next{right:2px}
.revs__dots{display:flex; justify-content:center; gap:.45rem; margin-top:.5rem}
.revs__dots button{width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--sky-veil);
cursor:pointer; transition:width .3s var(--ease), background .3s var(--ease)}
.revs__dots button.is-on{width:24px; border-radius:var(--r-pill); background:var(--brand-blue)}
/* ==================== Trang đánh giá ==================== */
.rev-summary{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.5rem,4vw,3rem);
background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.25rem)}
.rev-summary__score{text-align:center; flex:none}
.rev-summary__score b{display:block; font-size:3.2rem; font-weight:700; color:var(--blue-800); line-height:1}
.rev-summary__score .stars{display:flex; gap:.15rem; color:var(--star); justify-content:center; margin:.4rem 0 .2rem}
.rev-summary__score span{font-size:.82rem; color:var(--ink-soft)}
.rev-summary__bars{flex:1; min-width:240px; display:grid; gap:.4rem}
.bar{display:flex; align-items:center; gap:.7rem; font-size:.83rem; color:var(--ink-soft)}
.bar__track{flex:1; height:8px; border-radius:var(--r-pill); background:var(--sky-75); overflow:hidden}
/* Thanh phân bố sao tô vàng. Vàng nhạt trên nền nhạt chỉ đạt 1.8:1 nên
dùng dải đậm hơn: #C2740A → #B45309 đạt 3.3–4.6:1 so với rãnh. */
/* mặc định là inline nên height/width không ăn — phải cho display:block,
nếu không thanh luôn rỗng dù số liệu đúng. */
.bar__fill{display:block; height:100%; border-radius:var(--r-pill);
background:linear-gradient(90deg, #C2740A, #B45309)}
.bar__track{background:#F1F5F9}
.bar > span:last-child{min-width:1.4rem; text-align:right; font-weight:700; color:var(--ink)}
.rev-list{display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem}
.rev-list .rev{flex:none}
.rev-empty{text-align:center; padding:3rem 1rem; color:var(--ink-soft); border:1px dashed var(--line); border-radius:var(--r-lg)}
/* chọn sao trong form */
.rating{display:flex; gap:.3rem; margin-bottom:.35rem}
.rating button{width:38px; height:38px; padding:0; border:0; background:none; cursor:pointer; color:var(--line);
transition:color .2s var(--ease), transform .2s var(--ease)}
.rating button:hover{transform:scale(1.15)}
.rating button.is-on{color:var(--star)}
/* ==================== Form ==================== */
.form-panel{background:var(--white); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.35rem);
box-shadow:var(--shadow-md); border:1px solid var(--line)}
.field{margin-bottom:1rem; position:relative}
.field label,.field-label{display:block; font-size:.85rem; font-weight:600; margin-bottom:.38rem}
.field > label > span,.field > .field-label > span{color:#DC2626} /* dấu sao bắt buộc — chỉ áp cho nhãn trực tiếp của ô */
.field input,.field select,.field textarea{width:100%; padding:.78rem .9rem; border:1.5px solid var(--line);
border-radius:var(--r-sm); background:var(--white); font-size:.94rem;
transition:border-color .25s var(--ease), box-shadow .25s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brand-blue);
box-shadow:0 0 0 3px rgba(2,132,199,.14)}
.field textarea{min-height:112px; resize:vertical}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.1)}
.field .hint{font-size:.78rem; color:var(--ink-soft); margin-top:.3rem; display:block}
.err{display:none; font-size:.81rem; color:#DC2626; margin-top:.3rem}
.field.has-error .err{display:block}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.row2--single{grid-template-columns:1fr}
/* ô điện thoại có mã vùng */
.tel-group{display:flex; gap:.5rem}
.tel-group select{flex:none; width:118px}
.tel-group input{flex:1}
.hp{position:absolute; left:-9999px; opacity:0; height:0; width:0}
.form-note{font-size:.79rem; color:var(--ink-soft); margin:.85rem 0 0; text-align:center}
.form-done{display:none; text-align:center; padding:1.5rem .5rem}
.form-done.is-on{display:block; animation:fadeUp .5s var(--ease) both}
.form-done .ok{width:64px; height:64px; border-radius:50%; background:var(--green-100); color:var(--green-800);
display:grid; place-items:center; margin:0 auto 1.1rem}
@keyframes fadeUp{from{opacity:0; translate:0 14px} to{opacity:1; translate:0 0}}
.contact-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(1.75rem,4vw,2.75rem); align-items:start}
.contact-side{display:grid; gap:.9rem}
.contact-item{display:flex; gap:.9rem; align-items:flex-start; padding:1.05rem 1.15rem;
background:var(--white); border:1px solid var(--line); border-radius:var(--r-md)}
.contact-item > svg{flex:none; margin-top:.15rem; color:var(--brand-blue)}
.contact-item b{display:block; font-size:.92rem; margin-bottom:.15rem}
.contact-item__legal-name{text-transform:uppercase}
.contact-item span,.contact-item a{font-size:.88rem; color:var(--ink-soft); display:block}
/* hai nút Zalo NZ + VN */
.zalo-pair{display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-top:.6rem}
.zalo-btn{display:flex; align-items:center; gap:.55rem; padding:.6rem .75rem; border-radius:var(--r-sm);
background:#EAF3FF; border:1px solid #CFE3FF; color:#0050C8 !important; font-weight:600; font-size:.85rem;
transition:background .25s var(--ease), transform .25s var(--ease)}
.zalo-btn:hover{background:#DCEAFF; transform:translateY(-2px)}
.zalo-btn svg{flex:none; color:#0050C8}
.zalo-btn small{display:block; font-size:.72rem; color:var(--ink-soft); font-weight:500}
/* ==================== Timeline · bảng · FAQ · CTA ==================== */
.timeline{position:relative; padding-left:2.5rem}
.timeline::before{content:""; position:absolute; left:9px; top:.5rem; bottom:.5rem; width:2px;
background:linear-gradient(var(--brand-blue), var(--sky-veil))}
.tl{position:relative; padding-bottom:1.9rem}
.tl:last-child{padding-bottom:0}
.tl::before{content:""; position:absolute; left:-2.5rem; top:.35rem; width:20px; height:20px; border-radius:50%;
background:var(--white); border:2px solid var(--brand-blue)}
.tl h3{font-size:1.06rem; margin-bottom:.3rem}
.tl p{font-size:.9rem; color:var(--ink-soft); margin:0}
.tbl{width:100%; border-collapse:collapse; font-size:.91rem; background:var(--white);
border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line)}
.tbl th,.tbl td{padding:.9rem 1.05rem; text-align:left; border-bottom:1px solid var(--line)}
.tbl th{background:var(--sky-75); color:var(--blue-800); font-weight:700; font-size:.83rem}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--sky-25)}
.tbl td:first-child{font-weight:600; color:var(--ink)}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:1.1rem 2.5rem 1.1rem 0; cursor:pointer; list-style:none; position:relative; font-weight:600; font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:.3rem; top:50%; translate:0 -50%;
font-size:1.4rem; color:var(--brand-blue); font-weight:400; transition:rotate .3s var(--ease)}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding:0 2.5rem 1.2rem 0; color:var(--ink-soft); font-size:.93rem; margin:0}
/* Dải kêu gọi hành động dùng đúng hai màu logo, làm điểm nghỉ đậm giữa trang. */
.cta-band{position:relative; overflow:hidden; isolation:isolate;
background:linear-gradient(115deg, #082F49 0%, var(--blue-800) 42%, #10603F 100%);
border:0; border-radius:var(--r-xl); padding:clamp(2.25rem,5vw,3.5rem); text-align:center;
box-shadow:0 18px 46px rgba(8,47,73,.24)}
.cta-band::before{content:""; position:absolute; top:-40%; right:-10%; width:60%; height:180%;
z-index:-1; border-radius:50%; background:radial-gradient(circle, rgba(22,163,74,.30), transparent 62%)}
.cta-band h2{margin-bottom:.6rem; color:#fff}
.cta-band p{color:rgba(255,255,255,.88); max-width:58ch; margin:0 auto 1.7rem}
.cta-band .btn--ghost{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.45); color:#fff}
.cta-band .btn--ghost:hover{background:rgba(255,255,255,.22); border-color:#fff; color:#fff}
.cta-band--legacy .prose > a,
.cta-band--legacy .prose > p:last-child a{display:inline-flex; align-items:center; justify-content:center; padding:.9rem 1.75rem; border:2px solid transparent; border-radius:var(--r-pill); font-weight:600; line-height:1.2; color:#fff; background:var(--green-700); box-shadow:0 4px 14px rgba(21,128,61,.28)}
.cta-band--legacy .prose > a:first-of-type,
.cta-band--legacy .prose > p:last-child a:first-of-type{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.45)}
.cta-band--legacy .prose > a:hover,
.cta-band--legacy .prose > p:last-child a:hover{transform:translateY(-2px); background:var(--green-800); color:#fff}
.cta-band--legacy .prose > a:first-of-type:hover,
.cta-band--legacy .prose > p:last-child a:first-of-type:hover{background:rgba(255,255,255,.22); border-color:#fff}
.cta-band--legacy .prose > a + a,
.cta-band--legacy .prose > p:last-child a + a{margin-left:.8rem}
.cta-band--legacy .prose > p:last-child br{display:none}
.eyebrow::before{background:linear-gradient(90deg, var(--brand-blue), var(--brand-green))}
.note-box{margin-top:1.4rem; font-size:.82rem; color:var(--ink-soft); text-align:center;
border:1px dashed var(--line); border-radius:var(--r-md); padding:.85rem 1rem; background:var(--white)}
/* ==================== Footer sáng ==================== */
.site-footer{background:var(--sky-75); border-top:1px solid var(--sky-veil); color:var(--ink-soft);
padding-block:clamp(2.75rem,5.5vw,4rem) 0; font-size:.9rem}
.site-footer h4{color:var(--ink); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1rem}
.site-footer a{color:var(--ink-soft)}
.site-footer a:hover{color:var(--blue-700)}
.site-footer li{margin-bottom:.42rem; font-size:.86rem}
.footer-brand img{width:150px; margin-bottom:.9rem}
.footer-brand p{font-size:.88rem; line-height:1.6; max-width:32ch}
.socials{display:flex; gap:.5rem; margin-top:1rem}
.socials a{width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
background:var(--white); border:1px solid var(--line); color:var(--blue-700);
transition:background .25s var(--ease), transform .25s var(--ease)}
.socials a:hover{background:var(--blue-700); color:#fff; transform:translateY(-2px)}
.map-embed{border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--white)}
.map-embed iframe{display:block; width:100%; height:250px; border:0}
.footer-bot{max-width:1020px; margin-inline:auto; margin-top:clamp(2.25rem,4.5vw,3.25rem); border-top:1px solid var(--sky-veil); padding-block:1.4rem;
display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.82rem}
.mobile-bar{display:none; position:fixed; inset:auto 0 0; z-index:110; background:rgba(255,255,255,.97);
backdrop-filter:blur(12px); border-top:1px solid var(--line);
padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom)); gap:.5rem; box-shadow:0 -4px 20px rgba(15,42,66,.08)}
.mobile-bar a{flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.45rem;
border-radius:var(--r-sm); font-size:.69rem; font-weight:600; color:var(--blue-800)}
.mobile-bar a.is-cta{background:var(--green-700); color:#fff}
.mobile-bar a.is-zalo{background:#0068FF; color:#fff}
/* ==================== Motion ==================== */
.has-js [data-reveal]{opacity:0; translate:0 26px}
.has-js [data-reveal].is-in{opacity:1; translate:0 0;
transition:opacity .7s var(--ease), translate .8s var(--ease); transition-delay:var(--d,0ms)}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.has-js [data-reveal]{opacity:1; translate:none}
*,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
/* ==================== Responsive ==================== */
/* Ba mức thu gọn, xếp từ rộng xuống hẹp để mức sau luôn thắng mức trước:
thu chữ menu → thu cụm logo và nút gọi → cuối cùng mới rút menu về chỉ còn
icon. Khẩu hiệu dưới logo vẫn giữ hiển thị, chỉ thu nhỏ dần theo cụm logo. */
@media (max-width:1470px){
.nav__link{padding:.62rem .66rem; font-size:1.04rem}
.nav__link svg{width:21px; height:21px}
.head-main{gap:.75rem}
}
@media (max-width:1360px){
.nav__link{padding:.58rem .5rem; font-size:.98rem}
.head-tel{width:40px; height:40px}
.head-tel svg{width:20px; height:20px}
.brand img{width:58px}
.brand-name{font-size:1.28rem}
.brand-slogan{font-size:.82rem}
}
@media (max-width:1310px){
/* Mũi tên chỉ là ký hiệu trang trí, bỏ đi đổi được khoảng 60px — đủ để giữ
tên năm mảng dịch vụ tới tận 1180px thay vì rút về icon quá sớm. */
.nav__toggle{display:none}
.head-tel{display:none}
.nav__link{padding:.56rem .5rem; font-size:.95rem}
.brand-name{font-size:1.2rem}
.brand-slogan{font-size:.78rem}
}
@media (max-width:640px){
.brand-slogan{font-size:.72rem}
}
@media (max-width:370px){
/* Màn quá hẹp: bỏ khẩu hiệu để không đẩy tràn cụm nút bên phải. */
.brand-slogan{display:none}
}
@media (max-width:1195px){
.nav__link span{display:none} /* chỉ còn icon khi thật sự hết chỗ */
.nav__link{padding:.58rem .6rem; gap:0}
.nav__item--minor{margin-left:.5rem}
}
@media (max-width:1150px){
.paths{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1080px){
:root{--head-h:68px}
.burger{display:flex}
/* Menu điện thoại: phủ kín từ dưới thanh tiêu đề xuống đáy màn hình.
Nền bị khoá cuộn (.nav-lock) nên thanh tiêu đề và nút X không bao giờ trôi mất. */
.nav{position:fixed; inset:var(--head-h) 0 0; flex-direction:column; align-items:stretch;
background:linear-gradient(180deg,#fff 0%, var(--sky-25) 100%);
padding:1rem 1rem 2rem; gap:.5rem; box-shadow:var(--shadow-md);
border-top:1px solid var(--line); translate:0 -12px; opacity:0; pointer-events:none;
transition:opacity .3s var(--ease), translate .3s var(--ease);
overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.nav.is-open{translate:0 0; opacity:1; pointer-events:auto}
html.nav-lock, html.nav-lock body{overflow:hidden}
/* Mỗi mảng một tông riêng: vạch màu bên trái, đĩa icon màu, nền phớt khi đang mở. */
.nav__item{display:grid; grid-template-columns:1fr auto; align-items:center;
border-bottom:0; border-radius:var(--r-md); background:var(--white);
border:1px solid var(--nv-line, var(--line)); box-shadow:var(--shadow-xs);
overflow:hidden; position:relative}
.nav__item::before{content:""; position:absolute; inset:0 auto 0 0; width:4px;
background:var(--nv-c, var(--brand-blue))}
.nav__link{width:100%; justify-content:flex-start; gap:.7rem;
padding:.95rem .5rem .95rem .95rem; font-size:1rem; font-weight:600; color:var(--ink)}
.nav__link span{display:inline}
.nav__link svg{flex:none; width:34px; height:34px; padding:8px; border-radius:11px;
background:var(--nv-bg, var(--sky-100)); color:var(--nv-c, var(--blue-700))}
.nav__toggle{display:grid; place-items:center; width:54px; align-self:stretch; margin:0;
background:none; border:0; border-left:1px solid var(--line-soft);
color:var(--nv-c, var(--blue-700)); cursor:pointer; pointer-events:auto}
.nav__toggle .nav__caret{opacity:1; width:18px; height:18px}
.nav__toggle .nav__caret{transition:rotate .3s var(--ease)}
.nav__item.is-open{background:var(--nv-wash, var(--sky-25)); border-color:var(--nv-c, var(--brand-blue))}
.nav__item.is-open .nav__toggle .nav__caret{rotate:180deg}
.drop{grid-column:1 / -1; position:static; opacity:1; translate:0; pointer-events:auto;
box-shadow:none; border:0; border-top:1px dashed var(--line);
padding:.5rem 0 .7rem 3.4rem; display:none; min-width:0; background:none}
.nav__item.is-open .drop{display:block}
.drop a{padding:.6rem .4rem; font-size:.94rem}
.nav__item--travel{--nv-c:var(--brand-blue); --nv-bg:#E0F2FE; --nv-line:var(--sky-veil); --nv-wash:#F4FBFF}
.nav__item--study {--nv-c:var(--green-700); --nv-bg:#DCFCE7; --nv-line:#D8EFE0; --nv-wash:#F5FDF8}
.nav__item--work {--nv-c:var(--amber); --nv-bg:#FBEBD9; --nv-line:#F2E2D0; --nv-wash:#FEF9F3}
.nav__item--visa,.nav__item--residency{--nv-c:var(--teal); --nv-bg:#D6F1F8; --nv-line:#D6EFF5; --nv-wash:#F3FCFE}
.nav__item--invest,.nav__item--investment{--nv-c:#4F46E5; --nv-bg:#E4E2FD; --nv-line:#DEDCFA; --nv-wash:#F7F6FE}
.nav__item--minor {--nv-c:var(--ink-soft); --nv-bg:var(--slate-50); --nv-line:var(--line); --nv-wash:var(--slate-50)}
/* Hàng đổi ngôn ngữ nằm cuối menu — nút nổi VI/EN bị ẩn khi menu mở vì
nó đè lên mục đầu tiên. */
.nav__lang{display:flex; align-items:center; justify-content:space-between; gap:1rem;
margin-top:.4rem; padding:.85rem 1rem; border-radius:var(--r-md);
background:var(--white); border:1px solid var(--line)}
.nav__lang > span:first-child{font-size:.82rem; font-weight:600; color:var(--ink-soft)}
.nav__lang .lang{background:var(--sky-75); border:0; box-shadow:none; margin:0}
.head-cta .btn{display:none}
.head-tel{display:none} /* mobile đã có thanh gọi/Zalo cố định ở đáy */
/* .nav lúc này là position:fixed nên không còn là flex item — phải tự đẩy
cụm nút sang phải, nếu không nút mở menu dính ngay cạnh logo. */
.head-cta{flex-direction:row; align-items:center; gap:.55rem; margin-left:auto}
.nav__item--minor{margin-left:0}
.nav__item--minor::before{display:none}
.nav__item--minor .drop{right:auto}
.hero__grid,.feature,.contact-grid{grid-template-columns:1fr}
.feature--flip .feature__col-media{order:0}
.feature__stack{padding:0}
.feature__stack .photo{position:static; width:100%; margin-top:1rem; opacity:1}
.grid--3,.grid--4,.stats,.steps,.rev-list{grid-template-columns:repeat(2,1fr)}
.rev{flex-basis:calc((100% - 1.25rem)/2)}
.revs__btn--prev{left:-8px} .revs__btn--next{right:-8px}
.mobile-bar{display:flex}
body{padding-bottom:70px}
.hero__media .badge{left:12px}
}
@media (max-width:640px){
.paths,.grid--2,.grid--3,.grid--4,.row2,.steps,.rev-list,.zalo-pair{grid-template-columns:1fr}
.stats{grid-template-columns:repeat(2,1fr)}
.trust{grid-template-columns:1fr; gap:1.25rem}
.rev{flex-basis:100%}
.revs__btn{display:none}
.btn{width:100%}
.btn-row{flex-direction:column}
.timeline{padding-left:2rem}
.tl::before{left:-2rem; width:16px; height:16px}
.rev-summary{flex-direction:column; align-items:stretch; text-align:center}
.tel-group select{width:104px}
}
/* Tablet giữ quick actions trong flow để không che card hoặc form khi cuộn. */
@media (min-width:641px) and (max-width:1080px){
.mobile-bar{position:static; inset:auto; width:min(100% - 2.5rem, var(--wrap)); margin:0 auto 1.5rem;
border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-xs)}
body{padding-bottom:0}
}
@media (max-width:640px){
body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
.nav__lang .lang a{min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center}
}
/* ==================== Tab chọn tour ==================== */
.tourtabs{display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.5rem; margin-bottom:1.75rem;
scrollbar-width:thin}
.tourtabs--5{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.6rem; overflow:visible}
.tourtabs--5 > .tourtab{width:100%; min-width:0; align-items:center; justify-content:center; text-align:center}
.tourtabs--5 .tourtab b{white-space:normal; text-wrap:balance}
.tourtab{flex:none; display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
padding:.7rem 1.05rem; border-radius:var(--r-md); background:var(--white);
border:1px solid var(--tt-line, var(--line)); cursor:pointer; text-align:left;
transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease)}
.tourtab:hover{border-color:var(--tt-c, var(--brand-blue)); transform:translateY(-2px)}
.tourtab b{font-size:.94rem; font-weight:600; color:var(--ink); white-space:nowrap}
.tourtab__len{font-size:.78rem; color:var(--ink-soft)}
.tourtab__ico{display:none}
.tourtab.is-on{border-color:var(--tt-c, var(--blue-700)); background:var(--tt-wash, var(--sky-25))}
.tourtab.is-on b{color:var(--tt-t, var(--blue-800))}
.tourtab--blue {--tt-c:var(--brand-blue); --tt-t:var(--blue-800); --tt-bg:#E0F2FE; --tt-line:var(--sky-veil); --tt-wash:#F4FBFF}
.tourtab--green {--tt-c:var(--green-700); --tt-t:var(--green-800); --tt-bg:#DCFCE7; --tt-line:#D8EFE0; --tt-wash:#F5FDF8}
.tourtab--amber {--tt-c:var(--amber); --tt-t:var(--amber-700); --tt-bg:#FBEBD9; --tt-line:#F2E2D0; --tt-wash:#FEF9F3}
.tourtab--teal {--tt-c:var(--teal); --tt-t:var(--teal-700); --tt-bg:#D6F1F8; --tt-line:#D6EFF5; --tt-wash:#F3FCFE}
.tourtab--indigo{--tt-c:#4F46E5; --tt-t:#4338CA; --tt-bg:#E4E2FD; --tt-line:#DEDCFA; --tt-wash:#F7F6FE}
.tourtab--rose {--tt-c:#BE185D; --tt-t:#9D174D; --tt-bg:#FBE3EE; --tt-line:#F6D6E5; --tt-wash:#FEF6FA}
.tourpanel{display:none}
.tourpanel[hidden]{display:none !important}
/* lịch trình dài nên cột phải dính theo khi cuộn, tránh khoảng trống lớn */
.tourpanel .feature{align-items:start}
.tourpanel .feature__col-media{position:sticky; top:calc(var(--head-h) + 16px)}
.tourpanel.is-on{display:block; animation:fadeUp .45s var(--ease) both}
.tourpanel__head{margin-bottom:1.5rem}
.tourpanel__head h3{font-size:clamp(1.3rem,2.2vw,1.75rem); margin-bottom:.5rem}
.tourpanel__head p{color:var(--ink-soft); max-width:66ch; margin:0}
/* lựa chọn trong một ngày (ví dụ: chọn 1 trong 2 sân golf) */
.tl__pick{margin:.6rem 0 0; display:grid; gap:.4rem}
.tl__pick li{display:flex; gap:.55rem; align-items:flex-start; font-size:.88rem; color:var(--ink-soft);
background:var(--sky-25); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:.55rem .75rem}
.tl__pick li b{color:var(--ink); font-weight:600}
.tl__pick li::before{content:""; flex:none; width:7px; height:7px; margin-top:.5rem; border-radius:50%;
background:var(--brand-green)}
.tl__note{font-size:.8rem; color:var(--ink-soft); font-style:italic; margin:.5rem 0 0}
/* ==================== Khối Active Investor Plus ==================== */
.aip{background:linear-gradient(150deg, var(--sky-75) 0%, var(--white) 46%, #ECFDF3 100%);
border:1px solid var(--sky-veil); border-radius:var(--r-xl); padding:clamp(1.75rem,4vw,3rem)}
.aip__top{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,3.5vw,3rem); align-items:center}
.aip__badge{display:inline-flex; align-items:center; gap:.45rem; font-size:.75rem; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:var(--blue-800); background:var(--white);
border:1px solid var(--sky-veil); padding:.3rem .8rem; border-radius:var(--r-pill); margin-bottom:.9rem}
.aip h2{margin-bottom:.6rem}
.aip__lead{color:var(--ink-soft); font-size:var(--fs-lead); margin-bottom:0}
.aip__tiers{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.75rem}
.tier{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem 1.35rem}
.tier__name{font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--green-800); background:var(--green-100); padding:.22rem .65rem; border-radius:var(--r-pill);
display:inline-block; margin-bottom:.75rem}
.tier__amt{font-size:clamp(1.45rem,2.6vw,1.9rem); font-weight:700; color:var(--blue-800); line-height:1.15; margin-bottom:.15rem}
.tier__amt small{display:block; font-size:.8rem; font-weight:500; color:var(--ink-soft); margin-top:.2rem}
.tier__rows{margin-top:1rem; display:grid; gap:.5rem; border-top:1px solid var(--line-soft); padding-top:.9rem}
.tier__rows div{display:flex; justify-content:space-between; gap:1rem; font-size:.87rem; color:var(--ink-soft)}
.tier__rows b{color:var(--ink); font-weight:600; text-align:right}
/* ==================== Case study ==================== */
.cases{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
.case{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
padding:1.5rem 1.45rem; position:relative; display:flex; flex-direction:column}
.case__tag{align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--blue-800); background:var(--sky-100); padding:.25rem .65rem; border-radius:var(--r-pill); margin-bottom:.85rem}
.case h3{font-size:1.08rem; margin-bottom:.5rem}
.case p{font-size:.92rem; color:var(--ink-soft); margin:0 0 1rem; flex:1}
.case__steps{display:flex; flex-wrap:wrap; gap:.4rem; border-top:1px solid var(--line-soft); padding-top:.9rem}
.case__steps span{font-size:.76rem; color:var(--blue-800); background:var(--sky-25);
border:1px solid var(--sky-veil); padding:.22rem .6rem; border-radius:var(--r-pill)}
/* ==================== Thẻ cố vấn di trú ==================== */
.advisor{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem 1.45rem}
.advisor h3{font-size:1.05rem; margin-bottom:1rem}
.advisor dl{margin:0; display:grid; gap:.6rem}
.advisor .row{display:flex; justify-content:space-between; gap:1rem; font-size:.9rem;
border-bottom:1px dashed var(--line); padding-bottom:.6rem}
.advisor .row:last-child{border-bottom:0; padding-bottom:0}
.advisor dt{color:var(--ink-soft)}
.advisor dd{margin:0; font-weight:600; color:var(--ink); text-align:right}
.advisor dd.empty{color:var(--ink-soft); font-weight:500; font-style:italic}
@media (max-width:1080px){
.aip__top,.aip__tiers,.cases{grid-template-columns:1fr}
}
/* ==================== Nhóm chọn nhiều nhu cầu ==================== */
.needs{display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; margin-bottom:.4rem}
/* dùng .needs .need (không chỉ .need) vì quy tắc .field label có độ ưu tiên cao hơn */
.needs .need{display:flex; align-items:flex-start; gap:.6rem; padding:.65rem .85rem;
border:1.5px solid var(--line); border-radius:var(--r-sm); cursor:pointer;
font-size:.88rem; font-weight:400; margin-bottom:0; background:var(--white);
transition:border-color .22s var(--ease), background .22s var(--ease)}
.needs .need:hover{border-color:var(--brand-blue); background:var(--sky-25)}
.needs .need input{width:17px; height:17px; margin:.12rem 0 0; accent-color:var(--blue-700); flex:none}
.needs .need span{color:var(--ink); line-height:1.45; font-weight:400}
.needs .need:has(input:checked){border-color:var(--blue-700); background:var(--sky-25)}
/* ==================== Chuỗi chuyên gia ==================== */
.chain{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:1.25rem 0 0}
.chain span{font-size:.85rem; font-weight:600; color:var(--blue-800); background:var(--white);
border:1px solid var(--sky-veil); padding:.4rem .8rem; border-radius:var(--r-pill)}
.chain i{color:var(--brand-green); font-style:normal; font-weight:700}
.netgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin-top:1.4rem}
.netgrid li{display:flex; align-items:center; gap:.55rem; font-size:.89rem; color:var(--ink-soft);
background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm); padding:.6rem .8rem}
.netgrid li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brand-blue); flex:none}
/* Hệ sinh thái dùng WYSIWYG ACF để giữ dữ liệu cũ, nhưng trình bày như grid card của template. */
.ecosystem__body > ul{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; margin-top:1.4rem}
.ecosystem__body > ul > li{display:flex; align-items:center; gap:.55rem; font-size:.89rem; color:var(--ink-soft);
background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm); padding:.6rem .8rem}
.ecosystem__body > ul > li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brand-blue); flex:none}
/* khối lưu ý pháp lý cuối trang */
.disclaimer{background:var(--slate-50); border:1px solid var(--line); border-left:4px solid var(--brand-blue);
border-radius:var(--r-md); padding:1.35rem 1.5rem}
.disclaimer h3{font-size:1rem; margin-bottom:.55rem}
.disclaimer p{font-size:.9rem; color:var(--ink-soft); margin:0 0 .6rem}
.disclaimer p:last-child{margin-bottom:0}
@media (max-width:820px){
.needs,.netgrid,.ecosystem__body > ul{grid-template-columns:1fr}
}
/* ==================== Tiểu sử đầy đủ (trang Về chúng tôi) ==================== */
.bio{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.75rem,4vw,3.25rem);
align-items:start; padding-block:clamp(2.25rem,4.5vw,3.25rem); border-top:1px solid var(--line)}
.bio:first-of-type{border-top:0; padding-top:0}
.bio:nth-of-type(even) .bio__media{order:2}
.bio__media{position:sticky; top:calc(var(--head-h) + 20px)}
.bio__photo{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-md); background:var(--sky-75)}
.bio__photo img{width:100%; aspect-ratio:4/5; object-fit:cover}
.bio__num{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
background:var(--sky-75); color:var(--blue-700); font-weight:700; font-size:.83rem; margin-bottom:.85rem}
.bio h3{font-size:clamp(1.35rem,2.4vw,1.75rem); margin-bottom:.2rem}
.bio__role{font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--green-800);
font-weight:700; margin-bottom:1.15rem}
.bio__text p{font-size:.96rem; color:var(--ink-soft); margin-bottom:.9rem}
.bio__text p:last-child{margin-bottom:0}
.bio__text p:last-child{color:var(--ink); font-weight:500}
.bio__tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.25rem;
border-top:1px solid var(--line-soft); padding-top:1.1rem}
.bio__tags span{font-size:.78rem; font-weight:600; color:var(--blue-800); background:var(--sky-25);
border:1px solid var(--sky-veil); padding:.28rem .7rem; border-radius:var(--r-pill)}
@media (max-width:900px){
.bio{grid-template-columns:1fr; gap:1.4rem}
.bio:nth-of-type(even) .bio__media{order:0}
.bio__media{position:static}
.bio__photo img{aspect-ratio:16/10}
}
/* ==================== Bản đồ lộ trình 8 bước ==================== */
.journeymap{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; counter-reset:jm}
.journeymap--5{grid-template-columns:repeat(5,1fr)}
.journeymap--3{grid-template-columns:repeat(3,1fr)}
.journeymap--5 .jm:nth-child(4n)::after{display:block}
.journeymap--5 .jm:nth-child(5n)::after{display:none}
.journeymap--3 .jm:nth-child(4n)::after{display:block}
.journeymap--3 .jm:nth-child(3n)::after{display:none}
.journeymap--5 .jm:last-child::after,.journeymap--3 .jm:last-child::after{display:none}
.journeymap--balanced{display:flex; flex-wrap:wrap; justify-content:center; gap:1rem}
.journeymap--balanced > .jm{flex:0 0 calc((100% - 4rem) / 5); min-width:0}
.journeymap--balanced .jm::after{display:none}
.jm{position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
padding:1.35rem 1.2rem 1.25rem; overflow:hidden;
transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)}
.jm:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--jm-c, var(--brand-blue))}
/* dải màu trên đầu mỗi ô, chuyển dần từ lam sang lục theo tiến trình */
.jm::before{content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--jm-c, var(--brand-blue))}
.jm__n{display:inline-grid; place-items:center; width:38px; height:38px; border-radius:12px;
background:var(--jm-bg, var(--sky-75)); color:var(--jm-t, var(--blue-800));
font-weight:700; font-size:.92rem; margin-bottom:.85rem}
.jm h3{font-size:.99rem; margin-bottom:.25rem; line-height:1.35}
.jm p{font-size:.84rem; color:var(--ink-soft); margin:0; line-height:1.5}
/* mũi tên nối giữa các ô trên màn hình rộng */
.jm::after{content:""; position:absolute; top:2.05rem; right:-.62rem; width:.55rem; height:2px;
background:var(--line); z-index:2}
.jm:nth-child(4n)::after,.jm:last-child::after{display:none}
@media (max-width:1080px){
.journeymap{grid-template-columns:repeat(2,1fr)}
.jm:nth-child(4n)::after{display:block}
.jm:nth-child(2n)::after{display:none}
}
@media (max-width:620px){
.journeymap{grid-template-columns:1fr}
.jm::after{display:none}
}
/* ==================== Khung chờ ảnh thật ==================== */
.photoslot{display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; gap:.35rem; padding:1.5rem; border-radius:var(--r-xl);
border:2px dashed var(--sky-veil); background:var(--sky-25); color:var(--ink-soft)}
.photoslot svg{color:var(--brand-blue); opacity:.55; margin-bottom:.35rem}
.photoslot b{font-size:1rem; color:var(--ink); font-weight:600}
.photoslot span{font-size:.86rem; max-width:34ch; line-height:1.5}
.photoslot i{font-size:.76rem; font-style:normal; font-weight:600; letter-spacing:.04em;
text-transform:uppercase; color:var(--blue-700); background:var(--white);
border:1px solid var(--sky-veil); padding:.28rem .75rem; border-radius:var(--r-pill); margin-top:.6rem}
/* ==================== Danh sách trường theo khu vực ==================== */
.schoolset{margin-top:1.4rem}
.schoolset > h4{font-size:.95rem; font-weight:600; color:var(--ink); margin-bottom:.85rem}
.areagrid{display:grid; grid-template-columns:repeat(2,1fr); gap:.85rem}
.area{background:var(--sky-25); border:1px solid var(--line); border-radius:var(--r-md); padding:.9rem 1rem}
.area b{display:block; font-size:.79rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--blue-700); margin-bottom:.5rem}
.area ul{display:grid; gap:.3rem}
.area li{font-size:.87rem; color:var(--ink-soft); display:flex; gap:.5rem}
.area li::before{content:""; flex:none; width:5px; height:5px; margin-top:.5rem; border-radius:50%;
background:var(--brand-green)}
/* ==================== So sánh hai lựa chọn ==================== */
.compare{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.4rem}
.compare__col{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.25rem 1.2rem}
.compare__col:first-child{border-top:3px solid var(--brand-blue)}
.compare__col:last-child{border-top:3px solid var(--brand-green)}
.compare__col h4{font-size:1rem; margin-bottom:.75rem}
.compare__col ul{display:grid; gap:.5rem}
.compare__col li{font-size:.87rem; color:var(--ink-soft); display:flex; gap:.55rem; align-items:flex-start}
.compare__col li svg{flex:none; margin-top:.25rem; color:var(--brand-green)}
/* ==================== Thẻ 8 trường đại học ==================== */
.unis{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.4rem}
.uni{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.25rem 1.25rem 1.15rem;
transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.uni:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--sky-veil)}
.uni__top{display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; margin-bottom:.4rem}
.uni h4{font-size:1rem; margin:0; line-height:1.35}
.uni__city{font-size:.75rem; font-weight:600; color:var(--blue-700); background:var(--sky-25);
border:1px solid var(--sky-veil); padding:.18rem .55rem; border-radius:var(--r-pill); white-space:nowrap; flex:none}
.uni p{font-size:.86rem; color:var(--ink-soft); margin:0 0 .8rem}
.uni__tags{display:flex; flex-wrap:wrap; gap:.3rem}
.uni__tags span{font-size:.74rem; color:var(--green-800); background:var(--green-100);
padding:.18rem .55rem; border-radius:var(--r-pill)}
/* nhóm thẻ nhỏ (ngành nghề) */
.tagset{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem}
.tagset span{font-size:.82rem; font-weight:500; color:var(--blue-800); background:var(--sky-25);
border:1px solid var(--sky-veil); padding:.32rem .75rem; border-radius:var(--r-pill)}
/* khối nhấn trong tab */
.callout{margin-top:1.4rem; background:var(--sky-25); border:1px solid var(--sky-veil);
border-left:4px solid var(--brand-blue); border-radius:var(--r-md); padding:1.15rem 1.3rem}
.callout h4{font-size:.98rem; margin-bottom:.45rem}
.callout p{font-size:.89rem; color:var(--ink-soft); margin:0}
.tab-included{margin-top:1.3rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem}
.tab-included h3{font-size:1.05rem; margin-bottom:.6rem}
.tab-included .ticks{margin-top:0}
@media (max-width:900px){
.areagrid,.compare,.unis{grid-template-columns:1fr}
}
/* lưới trải hết chiều rộng khi nằm dưới khối feature */
/* auto-fit để ít mục vẫn giãn kín chiều rộng, không dồn về nửa trái */
.unis--wide{grid-template-columns:repeat(auto-fit, minmax(258px, 1fr))}
.areagrid--wide{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
/* danh sách gạch đầu dòng dài thì chia hai cột cho đỡ hụt hẫng */
.lvl__wide .ticks{grid-template-columns:repeat(2,1fr); column-gap:2rem}
@media (max-width:820px){
.lvl__wide .ticks{grid-template-columns:1fr}
}
/* ==================== Bố cục một bậc học ====================
Ảnh thả nổi bên phải để chữ chạy vòng bên trái và tiếp tục xuống dưới ảnh,
thay vì hai cột cứng để lại khoảng trống. */
.lvl{overflow:hidden} /* bao trọn phần tử nổi */
.lvl__head{margin-bottom:1.1rem}
.lvl__head h3{font-size:clamp(1.35rem,2.4vw,1.85rem); margin-bottom:.3rem}
.lvl__sub{color:var(--ink-soft); font-size:1.02rem; margin:0}
.lvl__figure{float:right; width:min(41%, 480px); margin:1.6rem 0 1.4rem 2.25rem;
border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-md); background:var(--sky-75)}
.lvl__figure img{display:block; width:100%; aspect-ratio:16/11; object-fit:cover}
.lvl__intro{font-size:.97rem; color:var(--ink-soft); margin-bottom:1.35rem}
.lvl__wide{clear:both; padding-top:.75rem} /* khối lưới xuống dưới, hết chiều rộng */
.lvl__cta{clear:both; margin-top:1.7rem}
/* nhịp tiêu đề phụ trong mỗi bậc học */
.schoolset{margin-top:1.75rem}
.schoolset > h4{display:flex; align-items:center; gap:.6rem; font-size:1.02rem; font-weight:700;
color:var(--ink); margin-bottom:.9rem}
.schoolset > h4::before{content:""; width:4px; height:18px; border-radius:2px;
background:var(--brand-green); flex:none}
/* Khi phần chữ chạy quanh quá ngắn, ảnh chuyển thành dải ngang để không hở khoảng trống */
.lvl__banner{margin:1.4rem 0 1.6rem; border-radius:var(--r-xl); overflow:hidden;
box-shadow:var(--shadow-md); background:var(--sky-75)}
.lvl__banner img{display:block; width:100%; aspect-ratio:32/9; object-fit:cover}
@media (max-width:900px){
.lvl__figure{float:none; width:100%; margin:1.25rem 0 1.5rem}
.lvl__banner img{aspect-ratio:16/9}
}
/* ==================== Tầm nhìn · Sứ mệnh · Giá trị cốt lõi ==================== */
.vm{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start}
.vm__card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem 1.5rem}
.vm__card--vision{border-top:3px solid var(--brand-blue)}
.vm__card--mission{border-top:3px solid var(--brand-green)}
.vm__label{font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color:var(--blue-700); margin-bottom:.6rem}
.vm__card h3{font-size:1.12rem; margin-bottom:.6rem; line-height:1.4}
.vm__card p{font-size:.94rem; color:var(--ink-soft); margin:0}
.vm__card ul{display:grid; gap:.6rem; margin-top:.3rem}
.vm__card li{display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; color:var(--ink-soft)}
.vm__card li svg{flex:none; margin-top:.28rem; color:var(--brand-green)}
.corevals{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.5rem}
.coreval{text-align:center; background:var(--white); border:1px solid var(--line);
border-radius:var(--r-lg); padding:1.5rem 1.1rem;
transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.coreval:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm)}
.coreval__icon{width:46px; height:46px; margin:0 auto .8rem; border-radius:14px; display:grid; place-items:center;
background:var(--cv-bg, var(--sky-75)); color:var(--cv-c, var(--blue-800))}
.coreval b{display:block; font-size:1.02rem; color:var(--ink); margin-bottom:.25rem}
.coreval span{font-size:.85rem; color:var(--ink-soft); line-height:1.5}
/* ==================== Trang pháp lý ==================== */
.legal{max-width:78ch}
.legal h2{font-size:clamp(1.25rem,2.1vw,1.6rem); margin:2.25rem 0 .8rem}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.05rem; margin:1.5rem 0 .5rem}
.legal p{font-size:.96rem; color:var(--ink-soft)}
.legal ul{display:grid; gap:.55rem; margin:.5rem 0 1.1rem}
.legal li{display:flex; gap:.65rem; align-items:flex-start; font-size:.94rem; color:var(--ink-soft)}
.legal li::before{content:""; flex:none; width:6px; height:6px; margin-top:.55rem; border-radius:50%;
background:var(--brand-blue)}
.legal__meta{font-size:.85rem; color:var(--ink-soft); background:var(--sky-25);
border:1px solid var(--sky-veil); border-radius:var(--r-md); padding:.9rem 1.1rem; margin-bottom:2rem}
@media (max-width:900px){
.vm{grid-template-columns:1fr}
.corevals{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.corevals{grid-template-columns:1fr}
}
/* ---- thu gọn trên máy nhỏ: đầu trang có ảnh, dải ảnh, ô tin cậy, số liệu -- */
@media (max-width:980px){
.pagehead__grid{grid-template-columns:1fr; gap:1.6rem}
.pagehead--img h1{max-width:24ch}
.pagehead__media img{aspect-ratio:16/9}
.striprow{grid-template-columns:1.4fr 1fr 1fr; height:clamp(240px,38vw,320px)}
.trust{grid-template-columns:1fr 1fr}
.stats{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
/* điện thoại: dải ảnh cuộn ngang, bắt điểm dừng — gọn hơn lưới chật */
.striprow{display:flex; grid-template-columns:none; grid-template-rows:none;
height:auto; gap:.6rem; overflow-x:auto; scroll-snap-type:x mandatory;
padding-bottom:.4rem; -webkit-overflow-scrolling:touch}
.striprow::-webkit-scrollbar{height:4px}
.striprow::-webkit-scrollbar-thumb{background:var(--sky-veil); border-radius:2px}
.striprow figure{flex:0 0 76%; scroll-snap-align:center}
.striprow figure:first-child{grid-row:auto}
.striprow img{aspect-ratio:4/3; height:auto}
.trust{grid-template-columns:1fr}
.stats{grid-template-columns:1fr 1fr; gap:.75rem}
.stat{padding:1.5rem .85rem 1.3rem}
.tcard{padding:1.35rem 1.25rem 1.45rem}
}
/* ============================================ CÁC KHỐI DỰNG LẠI THÁNG 8 ==== */
/* --- Hai ảnh cạnh nhau trong một tab (Phổ thông và trung học) ------------- */
.lvl__pair{clear:both; display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.5rem 0 1.7rem}
.lvl__pair figure{margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--sky-75);
box-shadow:var(--shadow-sm)}
.lvl__pair img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
transition:transform .8s var(--ease)}
.lvl__pair figure:hover img{transform:scale(1.05)}
/* --- Tab kiểu ảnh một bên, chữ một bên ----------------------------------- */
.lvl__side{clear:both; display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3.5vw,2.75rem);
align-items:center; margin:1.2rem 0 1.8rem}
.lvl__side-sub{font-size:1.02rem; font-weight:600; color:var(--blue-800); margin:0 0 .7rem}
.lvl__side .lvl__intro{margin-bottom:0}
.lvl__side-img{margin:0; border-radius:var(--r-xl); overflow:hidden; background:var(--sky-75);
box-shadow:var(--shadow-lg)}
.lvl__side-img img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
transition:transform 1s var(--ease)}
.lvl__side-img:hover img{transform:scale(1.04)}
/* --- Hai ảnh chồng nhau cho cột học bổng --------------------------------- */
.photostack{display:grid; gap:1rem}
.photostack figure{margin:0; border-radius:var(--r-xl); overflow:hidden; background:var(--sky-75);
box-shadow:var(--shadow-md)}
.photostack img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
transition:transform .9s var(--ease)}
.photostack figure:hover img{transform:scale(1.05)}
/* --- Lộ trình dạng ô đều, chuyển màu lam sang lục ------------------------ */
.rsteps{display:grid; grid-template-columns:repeat(var(--rs-n,5), minmax(0,1fr)); gap:.7rem;
margin:1.25rem 0 0}
.rstep{position:relative; display:flex; align-items:center; gap:.65rem; padding:.7rem .85rem;
border-radius:var(--r-md); background:var(--rs-bg,var(--sky-25)); border:1px solid var(--rs-line,var(--line));
transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.rstep:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--rs-c,var(--blue-700))}
.rstep__n{flex:none; width:26px; height:26px; border-radius:9px; display:grid; place-items:center;
background:var(--rs-c,var(--blue-700)); color:#fff; font-size:.78rem; font-weight:700}
.rstep__t{font-size:.86rem; font-weight:600; color:var(--rs-t,var(--blue-800)); line-height:1.35}
.section--residency-tabs .rstep--1{--rs-c:#0284C7; --rs-bg:#E0F2FE; --rs-t:#075985}
.section--residency-tabs .rstep--2{--rs-c:#0787BE; --rs-bg:#DBF3FC; --rs-t:#0A6A93}
.section--residency-tabs .rstep--3{--rs-c:#0891B2; --rs-bg:#CFFAFE; --rs-t:#155E75}
.section--residency-tabs .rstep--4{--rs-c:#0D9488; --rs-bg:#CCFBF1; --rs-t:#115E59}
.section--residency-tabs .rstep--5{--rs-c:#0F9B6C; --rs-bg:#D7F5E8; --rs-t:#0F5F45}
.section--residency-tabs .rstep--6{--rs-c:#15A34A; --rs-bg:#DCFCE7; --rs-t:#166534}
.section--residency-tabs .rstep--7{--rs-c:#1BA645; --rs-bg:#DDF8E0; --rs-t:#186830}
.section--residency-tabs .rstep--8{--rs-c:#22A93F; --rs-bg:#DEF7DC; --rs-t:#1A6B2E}
.section--residency-tabs .rstep--9{--rs-c:#16A34A; --rs-bg:#DCFCE7; --rs-t:#166534}
/* --- Năm ô "Vì sao khách hàng chọn chúng tôi" ---------------------------- */
.wcard{position:relative; overflow:hidden; isolation:isolate; padding:1.6rem 1.5rem 1.7rem;
border-radius:var(--r-lg); background:var(--white); border:1px solid var(--w-line);
box-shadow:var(--shadow-sm); transform-style:preserve-3d;
transition:box-shadow .45s var(--ease), border-color .45s var(--ease)}
.wcard::before{content:""; position:absolute; inset:0 0 auto; height:4px; z-index:2;
background:linear-gradient(90deg, var(--w-a), var(--w-b))}
.wcard::after{content:""; position:absolute; inset:4px 0 auto; height:110px; z-index:-1;
background:linear-gradient(180deg, var(--w-wash), transparent)}
.wcard:hover{box-shadow:var(--shadow-md); border-color:var(--w-a)}
.wcard__icon{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:14px;
background:var(--w-a); color:#fff; margin-bottom:.9rem; transform:translateZ(26px);
box-shadow:0 6px 16px var(--w-glow)}
.wcard h3{font-size:1.1rem; margin-bottom:.45rem; color:var(--ink)}
.wcard p{font-size:.88rem; color:var(--ink-soft); margin:0; line-height:1.6}
.wcard--blue {--w-a:var(--brand-blue); --w-b:#38BDF8; --w-wash:rgba(2,132,199,.08); --w-line:var(--sky-veil); --w-glow:rgba(2,132,199,.28)}
.wcard--green {--w-a:var(--green-700); --w-b:var(--brand-green); --w-wash:rgba(22,163,74,.08); --w-line:#D8EFE0; --w-glow:rgba(22,163,74,.26)}
.wcard--amber {--w-a:var(--amber); --w-b:#E8A15C; --w-wash:rgba(194,105,28,.08); --w-line:#F2E2D0; --w-glow:rgba(194,105,28,.25)}
.wcard--teal {--w-a:var(--teal); --w-b:#3EB6D2; --w-wash:rgba(14,116,144,.08); --w-line:#D6EFF5; --w-glow:rgba(14,116,144,.25)}
.wcard--indigo{--w-a:#4F46E5; --w-b:#818CF8; --w-wash:rgba(79,70,229,.08); --w-line:#DEDCFA; --w-glow:rgba(79,70,229,.25)}
/* Lưới linh hoạt: hàng cuối thiếu ô thì tự canh vào giữa. */
.wcards{display:flex; flex-wrap:wrap; justify-content:center; gap:1.35rem}
.wcards > .wcard{flex:0 1 calc((100% - 2.7rem) / 3); min-width:250px}
/* --- Khối cố vấn di trú, làm nổi lên ------------------------------------- */
.advisor--hero{position:relative; overflow:hidden; isolation:isolate; padding-top:1.8rem;
border:1px solid var(--sky-veil); box-shadow:var(--shadow-md);
background:linear-gradient(178deg, #F4FAFE, var(--white) 46%)}
.advisor--hero::before{content:""; position:absolute; inset:0 0 auto; height:5px; z-index:2;
background:linear-gradient(90deg, var(--blue-800), var(--brand-blue), var(--brand-green))}
.advisor__badge{position:absolute; top:1.35rem; right:1.35rem; width:46px; height:46px; border-radius:14px;
display:grid; place-items:center; color:#fff;
background:linear-gradient(150deg, var(--blue-700), var(--green-700));
box-shadow:0 8px 20px rgba(3,105,161,.30)}
.advisor__kicker{display:block; font-size:.7rem; font-weight:700; letter-spacing:.11em;
text-transform:uppercase; color:var(--green-800); margin-bottom:.3rem}
.advisor--hero h3{font-size:1.16rem; margin-bottom:1.1rem; padding-right:3.5rem}
.advisor--hero .row{border-bottom-style:dashed}
.advisor--hero dd.empty{color:var(--amber-700); font-style:normal; font-weight:600;
background:var(--amber-50); border:1px solid #F2E2D0; border-radius:var(--r-pill);
padding:.1rem .6rem; font-size:.82rem}
/* --- Năm ô "Bạn đang ở đâu trên hành trình" ------------------------------ */
.wpicks{display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem;
margin:0 auto 2.4rem; max-width:1060px}
.wpicks > .wpick{flex:0 1 calc((100% - 1.8rem) / 3); min-width:262px}
.wpick{position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:center;
gap:.8rem; padding:1.05rem 1.15rem; border-radius:var(--r-md); text-decoration:none;
background:var(--white); border:1px solid var(--p-line); box-shadow:var(--shadow-xs);
transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)}
.wpick::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; z-index:2;
background:var(--p-a); transition:width .4s var(--ease)}
.wpick::after{content:""; position:absolute; inset:0; z-index:-1; opacity:0;
background:var(--p-wash); transition:opacity .4s var(--ease)}
.wpick:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--p-a)}
.wpick:hover::before{width:6px}
.wpick:hover::after{opacity:1}
.wpick__n{flex:none; width:32px; height:32px; border-radius:11px; display:grid; place-items:center;
background:var(--p-a); color:#fff; font-size:.84rem; font-weight:700;
transition:transform .4s var(--ease)}
.wpick:hover .wpick__n{transform:scale(1.08) rotate(-6deg)}
.wpick__t{flex:1; font-size:.92rem; font-weight:600; color:var(--ink); line-height:1.4}
.wpick__go{flex:none; color:var(--p-a); display:grid; place-items:center;
transition:transform .4s var(--ease)}
.wpick:hover .wpick__go{transform:translateX(4px)}
.wpick--blue {--p-a:var(--blue-700); --p-line:var(--sky-veil); --p-wash:rgba(2,132,199,.055)}
.wpick--green {--p-a:var(--green-700); --p-line:#D8EFE0; --p-wash:rgba(22,163,74,.055)}
.wpick--amber {--p-a:var(--amber); --p-line:#F2E2D0; --p-wash:rgba(194,105,28,.055)}
.wpick--teal {--p-a:var(--teal); --p-line:#D6EFF5; --p-wash:rgba(14,116,144,.055)}
.wpick--indigo{--p-a:#4F46E5; --p-line:#DEDCFA; --p-wash:rgba(79,70,229,.055)}
/* --- Giá trị cốt lõi: to hơn, có màu, có hiệu ứng ------------------------ */
.corevals{grid-template-columns:repeat(4,1fr); gap:1.1rem}
.coreval{position:relative; overflow:hidden; isolation:isolate; padding:2rem 1.35rem 1.85rem;
border:1px solid var(--cv-line); box-shadow:var(--shadow-sm);
transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease)}
.coreval::before{content:""; position:absolute; inset:0 0 auto; height:4px; z-index:2;
background:linear-gradient(90deg, var(--cv-a), var(--cv-b))}
.coreval::after{content:""; position:absolute; top:-46px; left:50%; translate:-50% 0;
width:170px; height:170px; border-radius:50%; z-index:-1;
background:radial-gradient(circle at 50% 60%, var(--cv-wash) 0 34%, transparent 72%)}
.coreval:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--cv-a)}
.coreval__icon{width:56px; height:56px; margin:0 auto .95rem; border-radius:18px;
background:linear-gradient(150deg, var(--cv-a), var(--cv-b)); color:#fff;
box-shadow:0 8px 20px var(--cv-glow); transition:transform .45s var(--ease)}
.coreval__icon svg{color:#fff}
.coreval:hover .coreval__icon{transform:translateY(-3px) scale(1.06) rotate(-5deg)}
.coreval b{font-size:1.22rem; font-weight:700; margin-bottom:.4rem; color:var(--cv-t)}
.coreval span{font-size:.92rem; line-height:1.6}
.coreval:nth-of-type(1){--cv-a:var(--blue-700); --cv-b:var(--brand-blue); --cv-t:var(--blue-800);
--cv-wash:rgba(2,132,199,.11); --cv-line:var(--sky-veil); --cv-glow:rgba(3,105,161,.28)}
.coreval:nth-of-type(2){--cv-a:var(--green-700); --cv-b:var(--brand-green); --cv-t:var(--green-800);
--cv-wash:rgba(22,163,74,.11); --cv-line:#D8EFE0; --cv-glow:rgba(21,128,61,.28)}
.coreval:nth-of-type(3){--cv-a:var(--amber-700); --cv-b:var(--amber); --cv-t:var(--amber-700);
--cv-wash:rgba(194,105,28,.11); --cv-line:#F2E2D0; --cv-glow:rgba(154,78,18,.26)}
.coreval:nth-of-type(4){--cv-a:var(--teal-700); --cv-b:var(--teal); --cv-t:var(--teal-700);
--cv-wash:rgba(14,116,144,.11); --cv-line:#D6EFF5; --cv-glow:rgba(11,95,118,.26)}
/* --- thu gọn trên máy nhỏ ------------------------------------------------ */
@media (max-width:1080px){
.journeymap--5{grid-template-columns:repeat(3,1fr)}
.journeymap--balanced{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.journeymap--balanced > .jm{width:auto; flex:none}
.corevals{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
.rsteps{grid-template-columns:repeat(2,minmax(0,1fr))}
.lvl__side{grid-template-columns:1fr}
.lvl__side-img{order:-1}
.journeymap--3{grid-template-columns:repeat(2,1fr)}
.wcards > .wcard{flex:0 1 calc((100% - 1.35rem) / 2)}
.wpicks > .wpick{flex:0 1 calc((100% - .9rem) / 2)}
}
@media (max-width:620px){
.lvl__pair{grid-template-columns:1fr}
.journeymap--5,.journeymap--3{grid-template-columns:1fr}
.journeymap--balanced{grid-template-columns:1fr}
.corevals{grid-template-columns:1fr}
.rsteps{grid-template-columns:1fr}
}
/* --- Điện thoại: mọi dải tab thành lưới ô bấm, bỏ hẳn việc kéo ngang --------
Lưới 6 cột, mỗi ô rộng 2 cột. 6 mục xếp đều 3 + 3. 5 mục thì hai ô hàng sau
lệch nửa ô nên nằm chính giữa mà vẫn giữ nguyên kích thước — dùng
margin-left:50% sẽ bóp hẹp ô lại và chữ bị vỡ dòng. */
@media (max-width:820px){
.tourtabs{display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem;
overflow:visible; padding-bottom:0; margin-bottom:1.5rem; align-items:stretch}
.tourtabs > .tourtab{grid-column:span 2; flex:none; align-items:center; text-align:center;
justify-content:flex-start; gap:.4rem; padding:.95rem .45rem .85rem;
border-radius:var(--r-lg); position:relative; overflow:hidden; height:100%}
.tourtab::before{content:""; position:absolute; inset:0 0 auto; height:3px; z-index:2;
background:var(--tt-c); opacity:0; transition:opacity .3s var(--ease)}
.tourtab.is-on::before{opacity:1}
.tourtab.is-on{box-shadow:var(--shadow-sm)}
.tourtab__ico{display:grid; place-items:center; width:42px; height:42px; border-radius:14px;
background:var(--tt-bg); color:var(--tt-c); flex:none;
transition:transform .3s var(--ease), background .3s var(--ease)}
.tourtab.is-on .tourtab__ico{background:var(--tt-c); transform:scale(1.06)}
.tourtab.is-on .tourtab__ico svg{color:#fff}
.tourtab b{white-space:normal; font-size:.84rem; line-height:1.3; text-wrap:balance}
.tourtab__len{font-size:.74rem; margin-top:auto; padding-top:.15rem}
/* chỉ dải 5 mục mới cần đẩy hai ô cuối vào giữa */
.tourtabs--5 > .tourtab:nth-child(4){grid-column:2 / span 2}
.tourtabs--5 > .tourtab:nth-child(5){grid-column:4 / span 2}
}
@media (max-width:379px){
.tourtabs{grid-template-columns:repeat(4,1fr)}
.tourtabs > .tourtab{grid-column:span 2}
.tourtabs--5 > .tourtab:nth-child(4){grid-column:span 2}
.tourtabs--5 > .tourtab:nth-child(5){grid-column:2 / span 2}
}
/* --- Ba lộ trình du học: mỗi cái một khung có nhãn, để trên điện thoại không
nhìn thành một dãy chip dài liền mạch ------------------------------------ */
.rpath{margin-bottom:1rem; padding:1rem 1.1rem 1.2rem; border-radius:var(--r-lg);
background:var(--white); border:1px solid var(--line); box-shadow:var(--shadow-xs)}
.rpath:last-child{margin-bottom:0}
.rpath__label{display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; color:var(--blue-800)}
.rpath__label em{font-style:normal; font-weight:600; letter-spacing:0; text-transform:none;
color:var(--ink-soft); font-size:.84rem}
.rpath .rsteps{margin-top:.85rem}
@media (max-width:620px){
.rpath{padding:.9rem .85rem 1rem}
.rpath__label em{display:block; margin-top:.15rem}
}
/* --- Khối ghi chú trải hết chiều rộng dưới các tab tour ------------------- */
.callout--wide{margin-top:1.75rem}
/* ============ THU GỌN KHỐI BIỂU MẪU VÀ ĐÁNH GIÁ ============================
Khách phản hồi các khối này chiếm nhiều diện tích và nằm rời rạc. Giảm
khoảng đệm, thu nhỏ chữ phụ và kéo các ô lại gần nhau — vẫn đủ thông tin,
ô nhập vẫn cao tối thiểu 44px cho ngón tay chạm thoải mái. */
.form-panel{padding:clamp(1.15rem,2.2vw,1.7rem)}
.field{margin-bottom:.72rem}
.field label,.field-label{font-size:.82rem; margin-bottom:.28rem}
.field input,.field select,.field textarea{padding:.6rem .8rem; font-size:.92rem}
.field textarea{min-height:88px}
.field .hint{font-size:.74rem; margin-top:.22rem; line-height:1.45}
.row2{gap:.72rem}
.form-panel .head-block,.form-panel > h3{margin-bottom:1rem}
.form-panel > p{font-size:.88rem; line-height:1.55; margin-bottom:1.1rem}
.rating button{width:32px; height:32px}
.needs{gap:.4rem}
.needs .need{padding:.5rem .7rem; font-size:.86rem}
.contact-grid{gap:clamp(1.25rem,2.6vw,1.9rem)}
.info-card{padding:1rem 1.1rem}
.info-card + .info-card{margin-top:.6rem}
.zalo-pair{gap:.45rem; margin-top:.45rem}
.zalo-btn{padding:.5rem .65rem; font-size:.86rem}
.rev-summary{padding:1.15rem 1.35rem; gap:clamp(1.1rem,3vw,2.2rem)}
.rev-summary__score b{font-size:2.6rem}
.rev{padding:1.25rem 1.3rem 1.35rem}
.rev__text{font-size:.88rem; margin-bottom:.9rem}
.rev-list{gap:1rem}
@media (max-width:620px){
.form-panel{padding:1.05rem .95rem 1.25rem}
.field input,.field select,.field textarea{padding:.62rem .75rem}
}
/* ================= PHƯƠNG ÁN THANH MENU NỀN XANH ==========================
Bật/tắt bằng HEADER_STYLE trong _build/common.py ("dark" hoặc "light").
Nền xanh đêm chuyển sắc, chữ trắng, icon xanh nhạt và xanh lá — vẫn giữ
nhịp hiện đại của bản trắng, chỉ đảo tương phản. Menu con giữ nền trắng
vì chữ đen trên trắng vẫn dễ đọc nhất cho danh sách dài. */
.site-header--dark{
background:linear-gradient(100deg, #082F49 0%, #0C4A6E 55%, #0E5A7F 100%);
box-shadow:0 1px 0 rgba(255,255,255,.08), 0 6px 22px rgba(3,20,34,.18)}
.site-header--dark.is-stuck{box-shadow:0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(3,20,34,.28)}
.site-header--dark .brand-name{color:#fff}
.site-header--dark .brand-slogan{color:rgba(255,255,255,.78)}
.site-header--dark .brand img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.site-header--dark .nav__link{color:rgba(255,255,255,.90)}
.site-header--dark .nav__link svg{color:#7ED2F7}
.site-header--dark .nav__link:hover,
.site-header--dark .nav__item.is-open .nav__link,
.site-header--dark .nav__link[aria-current="page"]{
background:rgba(255,255,255,.13); color:#fff}
.site-header--dark .nav__link[aria-current="page"] svg{color:#8FE3AE}
.site-header--dark .nav__toggle{color:rgba(255,255,255,.7)}
.site-header--dark .head-tel{color:rgba(255,255,255,.92)}
.site-header--dark .head-tel svg{color:#7ED2F7}
.site-header--dark .head-tel:hover{color:#fff}
.site-header--dark .burger span{background:#fff}
.site-header--dark .lang--head{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22)}
.site-header--dark .lang a{color:rgba(255,255,255,.8)}
.site-header--dark .lang a.is-on{background:#fff; color:var(--blue-900)}
.site-header--dark .lang a:hover{color:#fff}
.site-header--dark .btn--cta{background:var(--brand-green); color:#04231A}
.site-header--dark .btn--cta:hover{background:#22C55E; color:#04231A}
@media (max-width:1080px){
/* Điện thoại: bảng menu vẫn nền sáng cho dễ đọc, chỉ thanh trên cùng đổi màu. */
.site-header--dark .nav{background:linear-gradient(180deg,#fff 0%, var(--sky-25) 100%)}
.site-header--dark .nav__link{color:var(--ink)}
.site-header--dark .nav__link svg{color:var(--nv-c, var(--blue-700))}
.site-header--dark .nav__link:hover,
.site-header--dark .nav__item.is-open .nav__link,
.site-header--dark .nav__link[aria-current="page"]{background:transparent; color:var(--ink)}
.site-header--dark .nav__toggle{color:var(--nv-c, var(--blue-700))}
.site-header--dark .nav__lang .lang{background:var(--sky-75)}
.site-header--dark .nav__lang .lang a{color:var(--blue-800)}
.site-header--dark .nav__lang .lang a.is-on{background:var(--blue-700); color:#fff}
}
/* ============ CANH GIỮA VÀ THU HẸP CÁC KHỐI BIỂU MẪU =======================
Khối biểu mẫu đứng một mình thì bó lại và đưa vào chính giữa, thay vì trải
hết chiều rộng trang. */
.wrap-narrow{max-width:var(--wrap-narrow); margin-inline:auto}
.form-panel{max-width:760px; margin-inline:auto}
/* Khối "form + thông tin liên hệ" bó lại còn khoảng 70% bề rộng cũ và canh
giữa. Ở bề rộng này hai ô cạnh nhau trong .row2 sẽ chật (ô điện thoại có cả
ô chọn mã vùng), nên cho mỗi ô một dòng riêng. */
/* Rộng hơn khối tiêu đề (760px) để hai ô lấn hẳn ra hai bên, mỗi bên khoảng
120px — đủ thấy là cố ý chứ không phải lệch. */
.contact-grid{max-width:1000px; margin-inline:auto; grid-template-columns:1.18fr .82fr;
gap:clamp(1rem,2.2vw,1.75rem)}
#nhan-danh-gia .contact-grid{max-width:1000px}
.contact-grid .row2{grid-template-columns:1fr; gap:0}
.form-panel{max-width:900px}
.contact-grid .form-panel{padding:1.25rem 1.35rem 1.5rem}
.contact-grid .form-panel > h3,.contact-grid .form-panel > .head-block h2{font-size:1.28rem}
.contact-grid .form-panel > p{font-size:.85rem; margin-bottom:.95rem}
.contact-grid .info-card{padding:.9rem 1rem}
.contact-grid .info-card h3{font-size:.98rem}
.contact-grid .info-card p{font-size:.85rem}
.contact-grid .form-panel{max-width:none}
/* --- Mười nhóm chuyên gia thành ô có icon, thay danh sách chấm tròn ------- */
.netgrid--tiles{grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:.7rem}
.netgrid--tiles li{gap:.65rem; padding:.7rem .85rem; border-radius:var(--r-md);
background:var(--white); border:1px solid var(--nt-line, var(--line));
box-shadow:var(--shadow-xs); color:var(--ink); font-weight:500; font-size:.88rem;
transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease)}
.netgrid--tiles li::before{display:none}
.netgrid--tiles li:hover{transform:translateY(-3px); box-shadow:var(--shadow-sm);
border-color:var(--nt-c, var(--brand-blue))}
.nettile__ico{flex:none; display:grid; place-items:center; width:34px; height:34px;
border-radius:11px; background:var(--nt-bg, var(--sky-100)); color:var(--nt-c, var(--blue-700))}
.nettile--blue {--nt-c:var(--blue-700); --nt-bg:#E0F2FE; --nt-line:var(--sky-veil)}
.nettile--green {--nt-c:var(--green-700); --nt-bg:#DCFCE7; --nt-line:#D8EFE0}
.nettile--amber {--nt-c:var(--amber-700); --nt-bg:#FBEBD9; --nt-line:#F2E2D0}
.nettile--teal {--nt-c:var(--teal-700); --nt-bg:#D6F1F8; --nt-line:#D6EFF5}
.nettile--indigo{--nt-c:#4F46E5; --nt-bg:#E4E2FD; --nt-line:#DEDCFA}
.nettile--rose {--nt-c:#BE185D; --nt-bg:#FBE3EE; --nt-line:#F6D6E5}
/* --- Dải kêu gọi hành động bản hẹp: viền ôm sát khối chữ ------------------ */
.cta-band{max-width:860px; margin-inline:auto}
.cta-band--narrow{max-width:780px}
.cta-band--narrow p{max-width:62ch; margin-bottom:.9rem}
.cta-band--narrow p:last-of-type{margin-bottom:1.7rem}
/* --- Danh sách dài chia đều hai cột, không dồn về một bên ----------------- */
/* Dùng columns chứ không dùng grid: grid xếp theo hàng nên đọc thành zigzag
trái–phải–trái, còn columns giữ đúng thứ tự đọc dọc hết cột trái rồi sang phải. */
.ticks--2col{display:block; columns:2; column-gap:2.5rem}
.ticks--2col li{break-inside:avoid; -webkit-column-break-inside:avoid}
@media (max-width:900px){
.contact-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
.ticks--2col{columns:1}
.netgrid--tiles{grid-template-columns:1fr}
.cta-band--narrow{max-width:none}
}
/* Không để html 90% làm ô nhập trên mobile nhỏ hơn mức đọc/chạm an toàn. */
@media (max-width:640px){
.field input,.field select,.field textarea,
.pathway-cf7 .wpcf7-form-control{font-size:16px}
}
/* --- Nút ngôn ngữ trong thanh menu ---------------------------------------- */
.lang--head{border:1px solid var(--line)}
@media (max-width:1080px){
/* Trên điện thoại đã có hàng "Ngôn ngữ" ở cuối menu, khỏi lặp lại trên thanh. */
.lang--head{display:none}
}
/* --- Tách thanh menu khỏi ảnh hero ---------------------------------------
Thanh menu xanh đậm và mép trên ảnh hero gần bằng độ sáng nên dính vào nhau.
Làm sáng nhẹ dải trên cùng của ảnh và kẻ một đường mảnh dưới thanh menu. */
.hero__bg::after{content:""; position:absolute; inset:0 0 auto; height:180px; z-index:1;
background:linear-gradient(180deg, rgba(255,255,255,.16), transparent)}
.site-header--dark{box-shadow:0 1px 0 rgba(255,255,255,.22), 0 8px 26px rgba(3,20,34,.26)}
/* ==================== CHÂN TRANG BA CỘT ====================================
Bỏ cột bản đồ (trang Liên hệ và khối "Gặp chúng tôi" đã có bản đồ rồi).
Ba cột bằng nhau, cả cụm canh giữa trang. */
/* Ba cột đặt trên đúng đường ray 1020px của dòng bản quyền phía dưới: cột logo
bắt đầu thẳng mép trái, cột liên hệ kết thúc thẳng mép phải. Mỗi cột có bề
rộng cố định nên phần trống còn lại chia đôi — hai khe cách luôn bằng nhau. */
.footer-grid{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
column-gap:clamp(2rem,4vw,3rem); row-gap:2.25rem; max-width:1020px; margin-inline:auto}
.footer-grid > *{min-width:0}
.footer-brand{flex:0 0 300px; max-width:300px}
.footer-grid > *:nth-child(2){flex:0 0 180px}
.footer-grid > *:nth-child(3){flex:0 0 280px}
.site-footer h4{margin-bottom:.9rem}
.footer-brand img{width:132px; margin-bottom:.85rem}
.foot-name{font-weight:700; color:var(--ink); font-size:.92rem; margin:0 0 .5rem; line-height:1.4}
.foot-addr{display:flex; align-items:flex-start; gap:.5rem; font-size:.86rem;
line-height:1.55; color:var(--ink-soft); transition:color .25s var(--ease)}
.foot-addr svg{flex:none; margin-top:.18rem; color:var(--brand-blue);
transition:transform .25s var(--ease)}
.foot-addr:hover{color:var(--blue-700)}
.foot-addr:hover svg{transform:translateY(-2px)}
.foot-links li{margin-bottom:.5rem; font-size:.88rem}
.foot-links--extra{margin-top:.9rem; padding-top:.85rem; border-top:1px solid var(--sky-veil)}
.foot-contact{display:grid; gap:.7rem}
.foot-contact li{display:grid; grid-template-columns:2rem 1fr; align-items:start;
gap:.55rem; margin:0; font-size:.88rem}
.foot-ico{display:grid; place-items:center; width:32px; height:32px; border-radius:10px;
background:var(--sky-100); color:var(--blue-700)}
.foot-val{display:grid; gap:.2rem; padding-top:.32rem; min-width:0}
.foot-val a{overflow-wrap:anywhere}
@media (max-width:900px){
/* Hết chỗ cho ba cột: logo chiếm trọn một hàng, hai cột chữ đứng cạnh nhau. */
.footer-grid{justify-content:flex-start; max-width:none}
.footer-brand{flex:0 0 100%; max-width:none}
.footer-grid > *:nth-child(2),
.footer-grid > *:nth-child(3){flex:1 1 220px}
}
@media (max-width:560px){
.footer-grid > *:nth-child(2),
.footer-grid > *:nth-child(3){flex:0 0 100%}
}
/* ================= THANH MENU BẢN SÁNG, NỀN KEM ===========================
Bật bằng HEADER_STYLE = "light" trong _build/common.py. */
.site-header--light{background:var(--cream); box-shadow:0 1px 0 var(--cream-line), 0 6px 20px rgba(15,42,66,.05)}
.site-header--light.is-stuck{box-shadow:0 1px 0 var(--cream-line), 0 10px 28px rgba(15,42,66,.10)}
.site-header--light .nav__link{color:var(--ink)}
.site-header--light .nav__link svg{color:var(--brand-blue)}
.site-header--light .nav__link:hover,
.site-header--light .nav__item.is-open .nav__link,
.site-header--light .nav__link[aria-current="page"]{background:rgba(255,255,255,.75); color:var(--blue-800)}
.site-header--light .nav__link[aria-current="page"] svg{color:var(--green-700)}
.site-header--light .head-tel{color:var(--ink)}
.site-header--light .lang--head{background:var(--white); border-color:var(--cream-line)}
/* ================= HERO BẢN SÁNG ==========================================
Ảnh giữ nguyên độ sáng, phủ một lớp trắng mờ bên trái để chữ navy đọc rõ.
Đảo hẳn so với bản tối: chữ đậm trên nền sáng thay vì chữ trắng trên nền tối. */
/* Ảnh nền được nâng nhẹ độ sáng và độ tươi để cả khung hero thoáng hơn, nhất là
mảng cây cối và bóng núi ở nửa dưới vốn xỉn hơn phần trời và mặt nước. */
.hero--light .hero__slide{filter:brightness(1.06) saturate(1.06) contrast(.98)}
.hero--light::before{
background:linear-gradient(100deg,
rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 30%, rgba(255,255,255,.80) 48%,
rgba(255,255,255,.42) 68%, rgba(255,255,255,.14) 86%, rgba(255,255,255,.04) 100%)}
.hero--light::after{background:linear-gradient(180deg, transparent, rgba(255,255,255,.46))}
.hero--light .hero__bg::after{background:linear-gradient(180deg, rgba(255,255,255,.38), transparent)}
.hero--light h1{color:var(--ink); text-shadow:none}
.hero--light h1 em{color:var(--green-700)}
/* --ink-soft chỉ đạt 4.16:1 trên ba ảnh sáng nhất — dưới chuẩn 4.5 cho chữ
thường. Đậm thêm một bậc lên #334155 để đạt 5.69:1 mà vẫn nhạt hơn tiêu đề. */
.hero--light .hero__sub{color:#334155; text-shadow:none}
.hero--light .hero__pill{background:var(--green-100); border-color:rgba(22,163,74,.30);
color:var(--green-800); box-shadow:0 6px 18px rgba(15,42,66,.09)}
.hero--light .hero__pill svg{color:var(--green-700)}
.hero--light .hero__badge{background:rgba(255,255,255,.88); border-color:var(--sky-veil);
box-shadow:var(--shadow-sm)}
.hero--light .hero__badge svg{color:var(--green-700)}
.hero--light .hero__badge b{color:var(--ink)}
.hero--light .hero__badge > span > span{color:var(--ink-soft)}
.hero--light .hero__dots button{background:rgba(15,42,66,.28)}
.hero--light .hero__dots button:hover{background:rgba(15,42,66,.5)}
.hero--light .hero__dots button[aria-pressed="true"]{background:var(--blue-800)}
@media (max-width:760px){
.hero--light::before{background:linear-gradient(160deg,
rgba(255,255,255,.93) 0%, rgba(255,255,255,.82) 55%, rgba(255,255,255,.90) 100%)}
}
/* Rich ACF sections wired to the original HTML composition. */
.nav__icon{display:inline-grid; place-items:center; flex:none}
.service-included{margin-top:1.6rem; padding:1.15rem 1.25rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--shadow-xs)}
.service-included h4{font-size:1rem; margin-bottom:.7rem}
.service-included .ticks{margin-top:0}
.service-included .ticks li{font-size:.88rem}
.wcard{padding-top:1.25rem}
.wcard .card__media{margin:-1.25rem -1.5rem 1rem; aspect-ratio:16/9; border-radius:var(--r-lg) var(--r-lg) 0 0}
.wcard .card__media > div,.wcard .card__media img{width:100%; height:100%; object-fit:cover}
.wcard h3{margin-bottom:.45rem}
.contact-grid .contact-side{height:100%}
.pagehead__text{min-width:0}
.hero__badge > svg{width:24px; height:24px}
@media (max-width:640px){
.wcards > .wcard{min-width:0; flex-basis:100%}
.service-included{padding:1rem}
}