/* ══════════════════════════════════════════════════════════════
   WorldVisa — lớp chuyển động
   Đè lên main.css: thanh điều hướng kính mờ nằm đè lên ảnh hero,
   hero đổi ảnh theo quốc gia, vòng tròn ảnh chạy theo cung, thanh
   đánh giá hồ sơ ghim dưới hero, các khối hiện dần khi cuộn.
   Trang chạy tràn hết bề ngang; nội dung căn theo biến --wrap.
   Giữ nguyên bảng màu nâu đất – vàng đất của main.css.
   ══════════════════════════════════════════════════════════════ */

:root{
  --display:'Playfair Display',Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ───────── Bọc trang ─────────
   Trước đây bọc trong khung bo tròn đặt trên nền hồng đất (theo mẫu gốc).
   Khách muốn chạy tràn hết bề ngang nên bỏ khung — chỉ giữ lại vai trò
   mốc định vị cho thanh điều hướng nằm đè lên hero. */
.wv-frame{position:relative;background:var(--white)}
.wv-frame > main{display:block}

/* ───────── Thanh điều hướng kính mờ ───────── */
.site-head{position:relative;z-index:40;background:transparent;box-shadow:none;border:0}
.has-hero .site-head{position:absolute;left:0;right:0;top:0}

.site-head .topbar{
  background:rgba(42,30,22,.38);border-bottom:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)
}
.site-head .topbar-info,
.site-head .topbar-info a,
.site-head .topbar-cta{color:rgba(255,255,255,.88)}
.site-head .topbar-info a:hover,
.site-head .topbar-cta:hover{color:var(--ochre)}

.site-head .navbar{
  background:rgba(42,30,22,.64);border-bottom:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:none
}
.site-head .menu > li > a{color:rgba(255,255,255,.92);white-space:nowrap}
.site-head .menu > li > a:hover,
.site-head .menu > li.current-menu-item > a{color:var(--ochre)}
.site-head .nav-call{color:#fff}
.site-head .nav-call small{color:rgba(255,255,255,.7)}
.site-head .nav-call b{color:#fff}
.site-head .nav-call .ic{background:var(--ochre)}
.site-head .burger span{background:#fff}
.site-head .wv-logo-img{filter:none}

/* trang không có hero: thanh điều hướng nền nâu đặc, chữ vẫn sáng */
body:not(.has-hero) .site-head .topbar{background:var(--brown-900)}
body:not(.has-hero) .site-head .navbar{background:var(--brown);backdrop-filter:none}

/* menu con đổ xuống — nền sáng để đọc được */
.site-head .menu ul{background:#fff;border:1px solid var(--line)}
.site-head .menu ul a{color:var(--ink)}
.site-head .menu ul a:hover{color:var(--ochre-ink);background:var(--soft)}

/* ───────── HERO ───────── */
.mo-hero{
  position:relative;height:clamp(560px,78vh,760px);overflow:hidden;
  background:var(--brown-900);margin:0
}
.mo-bg{position:absolute;inset:0}
.mo-bg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.12);
  transition:opacity 1.1s var(--ease), transform 7s linear
}
.mo-bg img.on{opacity:1;transform:scale(1)}

.mo-hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(42,30,22,.92) 0%,rgba(42,30,22,.76) 26%,rgba(42,30,22,.46) 50%,rgba(42,30,22,0) 76%),
    linear-gradient(180deg,rgba(42,30,22,.68) 0%,rgba(42,30,22,0) 34%,rgba(250,246,238,.10) 74%,rgba(250,246,238,.88) 100%)
}

.mo-copy{
  position:absolute;z-index:3;top:52%;
  left:max(16px, calc((100% - var(--wrap)) / 2));
  transform:translateY(-50%);width:min(760px, calc(100% - 32px))
}
.mo-kicker{
  display:flex;align-items:center;gap:12px;color:#fff;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;margin:0 0 14px;opacity:.92
}
.mo-kicker::before{content:"";width:32px;height:1px;background:var(--ochre)}
.mo-title{
  font-family:var(--display);font-weight:500;color:#fff;margin:0;
  font-size:clamp(2rem,5.4vw,4.4rem);line-height:1.06;letter-spacing:.005em;
  text-shadow:0 2px 30px rgba(42,30,22,.4)
}
.mo-title .nb{white-space:nowrap}
.mo-title .w{display:inline-block;opacity:0;transform:translateY(38px);filter:blur(10px)}
.mo-title .w.in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity .72s var(--ease), transform .72s var(--ease), filter .72s var(--ease)
}
.mo-sub{
  color:rgba(255,255,255,.96);max-width:440px;margin:16px 0 0;font-size:.98rem;
  line-height:1.65;text-shadow:0 1px 14px rgba(42,30,22,.55);text-wrap:pretty;
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease) .25s, transform .6s var(--ease) .25s
}
.mo-sub.in{opacity:1;transform:none}
.mo-act{
  display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0;
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease) .4s, transform .6s var(--ease) .4s
}
.mo-act.in{opacity:1;transform:none}

/* lớp sương tạo chiều sâu — nằm trước chữ */
.mo-mist{
  position:absolute;z-index:4;left:-10%;right:-10%;bottom:-8%;height:26%;
  pointer-events:none;filter:blur(20px);opacity:.75;
  background:
    radial-gradient(60% 80% at 20% 70%, rgba(250,246,238,.95), transparent 70%),
    radial-gradient(55% 75% at 55% 78%, rgba(250,246,238,.85), transparent 70%),
    radial-gradient(60% 80% at 88% 68%, rgba(250,246,238,.9), transparent 70%)
}

/* ───────── Vòng tròn ảnh chạy theo cung ───────── */
.mo-arc{
  position:absolute;z-index:5;top:50%;
  right:max(26px, calc((100% - var(--wrap)) / 2));
  width:120px;height:120px;transform:translateY(-50%)
}
.mo-arc-item{
  position:absolute;inset:0;margin:auto;width:78px;height:78px;border-radius:50%;
  overflow:hidden;border:2px solid rgba(255,255,255,.75);cursor:pointer;padding:0;
  background:none;box-shadow:0 12px 30px rgba(42,30,22,.4);
  transition:transform .66s var(--ease), opacity .5s var(--ease), border-color .4s
}
.mo-arc-item img{width:100%;height:100%;object-fit:cover;display:block}
.mo-arc-item.active{border-color:var(--ochre)}
.mo-arc-label{
  position:absolute;right:112%;top:50%;transform:translateY(-50%);
  white-space:nowrap;color:#fff;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:0;transition:opacity .4s
}
.mo-arc-item.active .mo-arc-label{opacity:.95}
.mo-arc-path{position:absolute;inset:-120px -40px -120px -140px;z-index:-1;pointer-events:none}
.mo-arc-path svg{width:100%;height:100%;overflow:visible}
.mo-arc-path path{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1;stroke-dasharray:3 6}

/* ───────── Thanh đánh giá hồ sơ ghim dưới hero ───────── */
.mo-bar-wrap{
  position:relative;z-index:30;margin:-44px auto 0;
  width:min(100% - 32px, var(--wrap))
}
.mo-bar{
  display:flex;align-items:center;background:#fff;border-radius:999px;
  box-shadow:0 22px 48px rgba(67,48,31,.20);padding:8px 8px 8px 12px;
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease) .2s, transform .7s var(--ease) .2s
}
.mo-bar.in{opacity:1;transform:none}
.mo-seg{
  flex:1;display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-radius:999px;min-width:0;text-decoration:none;color:inherit;
  transition:background .3s
}
.mo-seg:hover{background:#FBF4EC}
.mo-seg + .mo-seg{border-left:1px solid var(--line)}
.mo-seg > span{min-width:0;overflow:hidden}
.mo-seg .ic{flex:none;width:20px;height:20px;background:var(--ochre-ink)}
.mo-seg b{
  display:block;font-size:.95rem;color:var(--brown);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.mo-seg small{
  display:block;font-size:.78rem;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.mo-go{
  width:52px;height:52px;flex:none;border-radius:50%;background:var(--brown-900);
  display:flex;align-items:center;justify-content:center;color:#fff;
  text-decoration:none;transition:transform .3s var(--ease), background .3s
}
.mo-go:hover{transform:scale(1.07);background:var(--ochre);color:var(--brown-900)}
.mo-go .ar{border-color:currentColor}

/* ───────── Hiện dần khi cuộn ───────── */
[data-reveal]{
  opacity:0;transform:translateY(34px);
  transition:opacity .7s var(--ease), transform .7s var(--ease)
}
[data-reveal].in{opacity:1;transform:none}

/* ───────── Thẻ quốc gia: ảnh lớn, chữ nhỏ nằm góc dưới ─────────
   Theo mẫu gốc — ảnh chiếm gần hết thẻ, chỉ còn lá cờ ở góc trên và
   tên nước + chương trình ở đáy. Địa chỉ và điện thoại chuyển sang
   trang riêng của từng nước. */
.ctr-grid{grid-template-columns:repeat(5,1fr);gap:18px}
.ctr-card.has-photo{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  aspect-ratio:3/4;padding:0;border:0;background:var(--brown-900);
  border-radius:18px;transition:transform .35s var(--ease), box-shadow .35s
}
.ctr-card.has-photo:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(67,48,31,.28)}
.ctr-card.has-photo .ctr-photo{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)
}
.ctr-card.has-photo:hover .ctr-photo{transform:scale(1.06)}
.ctr-card.has-photo::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(42,30,22,.18) 0%, rgba(42,30,22,0) 30%,
    rgba(42,30,22,.34) 58%, rgba(42,30,22,.90) 100%)
}
.ctr-card.has-photo .ctr-flag{
  position:absolute;left:12px;top:12px;margin:0;font-size:1.05rem;line-height:1;
  width:36px;height:36px;display:grid;place-items:center;border-radius:11px;
  background:rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(42,30,22,.28)
}
.ctr-card.has-photo b{
  position:absolute;left:14px;right:14px;bottom:42px;margin:0;
  font-family:var(--display);font-weight:500;font-size:1.22rem;color:#fff;
  text-shadow:0 1px 12px rgba(42,30,22,.6)
}
.ctr-card.has-photo .ctr-prog{
  position:absolute;left:14px;right:14px;bottom:15px;margin:0;min-height:0;
  font-size:.76rem;font-weight:500;line-height:1.35;color:rgba(255,255,255,.92);
  text-shadow:0 1px 10px rgba(42,30,22,.7);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.ctr-card.has-photo .ctr-line,
.ctr-card.has-photo .ctr-office,
.ctr-card.has-photo .ctr-phone{display:none}

/* ───────── Chỉnh nhỏ cho hợp khung ───────── */
/* main.css kéo .quick lên -64px để chồng lên hero. Khi có thanh ghim ở giữa
   thì phải bỏ, nếu không bốn thẻ sẽ chui xuống dưới thanh. */
.mo-bar-wrap + .quick{margin-top:0;padding-top:52px}
.totop{right:clamp(14px,3vw,40px)}

h1,h2,h3,h4,h5{text-wrap:balance}
p{text-wrap:pretty}

/* tiêu đề khối dùng chữ có chân cho đồng bộ với hero */
.sec-head h2,.phero h1,.mo-title{font-family:var(--display);font-weight:500;letter-spacing:.005em}
.sec-head h2{line-height:1.2}

@media (max-width:1100px){
  .mo-arc{display:none}
  .ctr-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .mo-hero{height:clamp(500px,80vh,620px)}
  .mo-title{font-size:clamp(1.85rem,7.4vw,2.6rem)}
  .mo-sub{font-size:.9rem;max-width:none}
  .mo-copy{top:48%}
  .ctr-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .ctr-card.has-photo b{font-size:1.05rem}
  /* Thẻ hẹp: nhãn chương trình rút về một dòng — hai dòng luôn rớt một chữ */
  .ctr-card.has-photo .ctr-prog{
    display:block;-webkit-line-clamp:none;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .mo-bar-wrap + .quick{padding-top:40px}
  .mo-bar{flex-wrap:wrap;border-radius:22px;padding:10px}
  .mo-seg{flex:1 1 44%;border-left:0!important;padding:10px 12px;gap:9px}
  .mo-seg:nth-child(3),.mo-seg:nth-child(4){display:none}
  .mo-go{
    flex:1 1 100%;width:auto;height:48px;border-radius:999px;margin:8px 0 0;
    gap:10px;font-size:.92rem;font-weight:600
  }
  .mo-go::before{content:"Nhận đánh giá hồ sơ"}
}
@media (prefers-reduced-motion:reduce){
  .mo-bg img,.mo-title .w,.mo-sub,.mo-act,.mo-bar,[data-reveal]{
    opacity:1!important;transform:none!important;filter:none!important;
    transition-duration:.01ms!important
  }
  .mo-bg img:not(.on){opacity:0!important}
}

/* ───────── Ba biểu tượng riêng cho thanh đánh giá hồ sơ ───────── */
.ic-passport2{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm6 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Zm0 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM8 17h8v1.6H8Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm6 3a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Zm0 2a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM8 17h8v1.6H8Z'/%3E%3C/svg%3E")}
.ic-world{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.9 6h-2.9a15.7 15.7 0 0 0-1.4-3.8A8 8 0 0 1 18.9 8ZM12 4.1c.7 1 1.3 2.3 1.7 3.9h-3.4c.4-1.6 1-2.9 1.7-3.9ZM4.3 14a8 8 0 0 1 0-4h3.3a17 17 0 0 0 0 4Zm.8 2h2.9c.3 1.4.8 2.7 1.4 3.8A8 8 0 0 1 5.1 16Zm2.9-8H5.1a8 8 0 0 1 4.3-3.8C8.8 5.3 8.3 6.6 8 8Zm4 11.9c-.7-1-1.3-2.3-1.7-3.9h3.4c-.4 1.6-1 2.9-1.7 3.9Zm2.1-5.9H9.7a15 15 0 0 1 0-4h4.6a15 15 0 0 1 0 4Zm.5 5.8c.6-1.1 1.1-2.4 1.4-3.8h2.9a8 8 0 0 1-4.3 3.8ZM16.4 14a17 17 0 0 0 0-4h3.3a8 8 0 0 1 0 4Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.9 6h-2.9a15.7 15.7 0 0 0-1.4-3.8A8 8 0 0 1 18.9 8ZM12 4.1c.7 1 1.3 2.3 1.7 3.9h-3.4c.4-1.6 1-2.9 1.7-3.9ZM4.3 14a8 8 0 0 1 0-4h3.3a17 17 0 0 0 0 4Zm.8 2h2.9c.3 1.4.8 2.7 1.4 3.8A8 8 0 0 1 5.1 16Zm2.9-8H5.1a8 8 0 0 1 4.3-3.8C8.8 5.3 8.3 6.6 8 8Zm4 11.9c-.7-1-1.3-2.3-1.7-3.9h3.4c-.4 1.6-1 2.9-1.7 3.9Zm2.1-5.9H9.7a15 15 0 0 1 0-4h4.6a15 15 0 0 1 0 4Zm.5 5.8c.6-1.1 1.1-2.4 1.4-3.8h2.9a8 8 0 0 1-4.3 3.8ZM16.4 14a17 17 0 0 0 0-4h3.3a8 8 0 0 1 0 4Z'/%3E%3C/svg%3E")}
.ic-grad{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 9l11 6 9-4.9V17h2V9Zm0 13.5L5 12.7v3.5c0 1.9 3.1 3.8 7 3.8s7-1.9 7-3.8v-3.5Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 9l11 6 9-4.9V17h2V9Zm0 13.5L5 12.7v3.5c0 1.9 3.1 3.8 7 3.8s7-1.9 7-3.8v-3.5Z'/%3E%3C/svg%3E")}

/* Sao đánh giá: màu cũ #FFB400 trên nền trắng chỉ đạt 1,78:1 — không đủ
   ngưỡng 3:1 cho hình mang nghĩa (WCAG 1.4.11). Đổi sang vàng đất đậm hơn. */
.rev-stars{color:#9A6206}


/* ═════════ Ảnh thật cho ba khối: giới thiệu · số liệu · banner ═════════ */

/* Khối giới thiệu — ảnh thay cho ô nâu đặc */
.about-photo.has-img{padding:0;display:block;overflow:hidden;background:var(--brown-900)}
.about-photo.has-img::before{display:none}
.about-photo.has-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Dải số liệu — ảnh bản đồ chìm phía sau, phủ tối để chữ trắng luôn đọc được */
.counters.has-img{position:relative;overflow:hidden;isolation:isolate;background:var(--brown-900)}
.counters.has-img::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("../img/anh/so-lieu.jpg") center/cover no-repeat
}
.counters.has-img::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:1;
  background:linear-gradient(90deg,rgba(42,30,22,.86) 0%,rgba(42,30,22,.72) 45%,rgba(42,30,22,.78) 100%)
}

/* Banner chấm điểm — ảnh hộ chiếu thay hình vẽ CSS */
.promo-art.has-img{min-height:0;display:block;padding:18px 0}
.promo-art.has-img img{
  width:100%;max-width:340px;margin:0 auto;display:block;
  border-radius:18px;box-shadow:0 26px 54px rgba(67,48,31,.32)
}
@media (max-width:1024px){
  .promo-art.has-img img{max-width:280px}
}


/* ═════════ Khối đào tạo: nền ảnh + bố cục hai cột ═════════
   Trước đây lưới chia sẵn 5 cột nhưng chỉ có 4 khoá nên hổng một ô bên phải.
   Nay tiêu đề nằm cột trái, các khoá xếp lưới 2×2 bên phải — cân dù có 4 hay 6 khoá. */
.courses.has-bg{position:relative;overflow:hidden;isolation:isolate}
.courses.has-bg::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("../img/anh/dao-tao.jpg") center/cover no-repeat
}
.courses.has-bg::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(105deg,rgba(24,17,11,.90) 0%,rgba(24,17,11,.78) 42%,rgba(24,17,11,.68) 100%),
    linear-gradient(180deg,rgba(24,17,11,.42) 0%,rgba(24,17,11,0) 30%,rgba(24,17,11,.52) 100%)
}

.courses-in{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:clamp(32px,4vw,64px);align-items:start}
.courses .sec-head{max-width:none;margin:0;text-align:left;position:sticky;top:28px}
.courses .sec-head h2{margin-bottom:14px}
.crs-cta{margin:26px 0 0}

.courses .crs-grid{grid-template-columns:repeat(2,1fr);gap:20px}
.courses .crs-card{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)
}
.courses .crs-card:hover{background:#fff;backdrop-filter:none}

@media (max-width:1100px){
  .courses-in{grid-template-columns:1fr;gap:34px}
  .courses .sec-head{position:static;text-align:center;max-width:720px;margin:0 auto}
  .courses .crs-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .courses .crs-grid{grid-template-columns:1fr}
}

/* Dòng thông tin khoá học: vàng #D6A44C trên nền thẻ kính mờ chỉ đạt 4,45:1
   (ngưỡng chữ nhỏ là 4,5:1). Làm sáng thêm một bậc. */
.courses .crs-meta{color:#E8C07A}
.courses .crs-card:hover .crs-meta{color:var(--ochre-ink)}

/* ═════════ Dọn dữ liệu giả — các mảnh giao diện đi kèm ═════════ */

/* Chú thích dưới mỗi con số: "trên bao nhiêu hồ sơ, giai đoạn nào" */
.counter-note{
  display:block;font-style:normal;font-size:.72rem;line-height:1.45;
  color:rgba(255,255,255,.62);margin-top:6px;text-wrap:pretty
}

/* Dòng pháp nhân ở chân trang */
.foot-legal{
  margin:0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.1);
  font-size:.82rem;line-height:1.7;color:#A8988240;color:rgba(201,185,159,.9)
}

/* Biểu tượng TikTok cho dãy mạng xã hội */
.ic-tt{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 2h-3v13.2a2.8 2.8 0 1 1-2.2-2.73V9.4a5.9 5.9 0 1 0 5.2 5.85V8.9a6.6 6.6 0 0 0 3.8 1.2V7.05a3.9 3.9 0 0 1-3.8-3.9V2Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 2h-3v13.2a2.8 2.8 0 1 1-2.2-2.73V9.4a5.9 5.9 0 1 0 5.2 5.85V8.9a6.6 6.6 0 0 0 3.8 1.2V7.05a3.9 3.9 0 0 1-3.8-3.9V2Z'/%3E%3C/svg%3E")}

/* Thanh trên cùng: giữ đúng một dòng, nút đặt lịch không gãy chữ */
.site-head .topbar-in{flex-wrap:nowrap}
.site-head .topbar-info{flex-wrap:nowrap;min-width:0;overflow:hidden}
.site-head .topbar-info li{white-space:nowrap;min-width:0}
.site-head .topbar-info li.hide-md{overflow:hidden;text-overflow:ellipsis}
.site-head .topbar-cta{flex:none;white-space:nowrap}

/* ═════════ Cụm liên hệ nổi: Zalo ở trên, gọi ở dưới ═════════
   Trước đây Zalo chỉ có ở chân trang và thanh nổi dưới màn hình điện thoại,
   nên trên máy tính khách không thấy đâu mà bấm. */
.lien-he-noi{
  position:fixed;right:18px;bottom:76px;z-index:66;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px
}
.lhn{
  display:flex;align-items:center;height:54px;padding:0;
  border-radius:999px;color:#fff;text-decoration:none;
  transition:gap .3s var(--ease), padding .3s var(--ease), background .25s
}
.lhn-hinh{
  flex:none;width:54px;height:54px;display:grid;place-items:center;
  font-weight:800;font-size:1.02rem;letter-spacing:-.02em
}
.lhn-hinh .ic{width:22px;height:22px;background:currentColor}
.lhn-nhan{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:.9rem;font-weight:600;transition:max-width .3s var(--ease)
}
.lhn:hover{color:#fff;padding-right:20px}
.lhn:hover .lhn-nhan{max-width:200px}
.lhn:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}

.lhn-zalo{background:#0068FF;box-shadow:0 10px 26px rgba(0,104,255,.38)}
.lhn-zalo:hover{background:#0055D4}
.lhn-goi{background:var(--ochre-ink);box-shadow:0 10px 26px rgba(138,90,17,.4)}
.lhn-goi:hover{background:var(--brown)}

/* Nhịp đập nhẹ ở nút Zalo để mắt bắt được */
.lhn-zalo::after{
  content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  border:2px solid rgba(0,104,255,.5);animation:zalo-dap 2.6s ease-out infinite
}
.lhn-zalo{position:relative}
@keyframes zalo-dap{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.35);opacity:0}
  100%{opacity:0}
}
@media (max-width:860px){
  /* điện thoại đã có Zalo và Gọi ở thanh nổi dưới cùng — không bày hai lần */
  .lien-he-noi{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lhn-zalo::after{animation:none}
}

/* ═════════ Nút chuyển ngôn ngữ ═════════ */
.wv-ngonngu{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto;margin-right:14px}
.wv-ngonngu a{
  display:grid;place-items:center;min-width:34px;height:26px;padding:0 8px;
  border-radius:6px;font-size:.76rem;font-weight:700;letter-spacing:.04em;
  color:rgba(255,255,255,.68);text-decoration:none;transition:.2s
}
.wv-ngonngu a:hover{color:#fff;background:rgba(255,255,255,.12)}
.wv-ngonngu a.dang-chon{color:var(--brown-900);background:var(--ochre)}
@media (max-width:640px){
  .wv-ngonngu{margin-right:8px}
  .wv-ngonngu a{min-width:30px;padding:0 6px;font-size:.72rem}
}

/* ═══════════════ Trang chủ theo Phần 2 của tài liệu ═══════════════ */

/* --- Hero: nút gọi phụ và dòng tin cậy --- */
.mo-goi{
  display:inline-flex;align-items:center;gap:9px;padding:14px 4px;
  color:rgba(255,255,255,.94);font-weight:600;font-size:.95rem;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.34);transition:.25s
}
.mo-goi:hover{color:var(--ochre);border-bottom-color:var(--ochre)}
.mo-goi .ic{width:17px;height:17px;background:currentColor}

/* --- Ghi chú dưới thanh chấm điểm --- */
.mo-bar-chu{
  margin:14px 0 0;text-align:center;font-size:.82rem;color:var(--ink-2);
  opacity:0;transition:opacity .6s var(--ease) .5s
}
.mo-bar.in ~ .mo-bar-chu{opacity:1}

/* --- Khối Vấn đề --- */
.vd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vd-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:32px 28px 30px;position:relative
}
.vd-so{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(138,90,17,.10);color:var(--ochre-ink);
  font-family:var(--head);font-weight:700;margin-bottom:16px
}
.vd-card b{display:block;font-family:var(--head);font-size:1.12rem;color:var(--brown);margin-bottom:8px;text-wrap:balance}
.vd-card p{margin:0;color:var(--ink-2);font-size:.95rem}

/* --- Khối Giải pháp --- */
.gp-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  list-style:none;padding:0;margin:0 0 34px;counter-reset:none
}
.gp-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:32px 28px 30px;display:flex;flex-direction:column
}
.gp-so{
  display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
  background:var(--brown);color:#fff;font-family:var(--head);font-weight:700;
  font-size:1.05rem;margin-bottom:18px
}
.gp-card b{display:block;font-family:var(--head);font-size:1.15rem;color:var(--brown);text-wrap:balance}
.gp-nhan{
  display:inline-block;align-self:flex-start;margin:8px 0 12px;padding:4px 12px;
  border-radius:999px;background:rgba(138,90,17,.10);color:var(--ochre-ink);
  font-size:.76rem;font-weight:600
}
.gp-card p{margin:0;color:var(--ink-2);font-size:.95rem;flex:1}

/* --- Khối Bằng chứng --- */
.bang-chung .counters{margin-top:0}
.phu-trach{
  margin:34px auto 0;max-width:760px;padding:28px 30px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--soft)
}
.phu-trach h3{font-size:1.1rem;margin-bottom:14px}
.phu-trach ul{list-style:none;padding:0;margin:0}
.phu-trach li{
  padding:10px 0 10px 26px;position:relative;color:var(--ink);border-bottom:1px dashed var(--line)
}
.phu-trach li:last-child{border:0}
.phu-trach li::before{content:"✓";position:absolute;left:0;color:var(--ochre-ink);font-weight:700}
.phu-trach-chu{margin:14px 0 0;font-size:.85rem;color:var(--ink-2)}
.bang-chung .rev-grid{margin-top:34px}

/* --- Ưu đãi + kêu gọi cuối: một khối, ảnh nền chìm --- */
.keu-goi{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--brown-900);color:#EFE6D6;
  padding:clamp(56px,7vw,88px) 0
}
/* Ảnh chìm: sảnh sân bay đêm. Cắt lấy phần dưới — sàn tối, bóng người kéo vali. */
.kg-anh{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:72% 88%
}
/* Lớp phủ: mép trái tối hẳn để chữ lớn đọc được, mép phải để ảnh lộ ra. */
.keu-goi::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(31,22,16,.95) 0%,
      rgba(31,22,16,.86) 38%,
      rgba(31,22,16,.40) 72%,
      rgba(31,22,16,.22) 100%),
    linear-gradient(180deg,
      rgba(31,22,16,.58) 0%,
      rgba(31,22,16,.10) 26%,
      rgba(31,22,16,0) 46%,
      rgba(31,22,16,.42) 100%)
}
.kg-in{
  display:grid;grid-template-columns:minmax(300px,468px) 1fr;
  gap:clamp(32px,4.5vw,72px);align-items:center
}
.keu-goi h2{
  color:#fff;margin:0;max-width:none;
  font-size:clamp(1.45rem,2.6vw,2.1rem);text-wrap:pretty
}
.kg-act{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:26px 0 0}
.kg-goi{color:#F2E7D3;font-weight:600;border-bottom:1px solid rgba(242,231,211,.45)}
.kg-goi:hover{color:#fff;border-bottom-color:#fff}
.kg-gio{margin:14px 0 0;font-size:.85rem;color:#C9B99F}

/* Cột phải gom thành MỘT tấm kính — một lớp che duy nhất cho cả nhãn lẫn
   bốn dòng, thay cho bốn thẻ rời. Nhờ vậy ảnh lộ được ở quanh tấm. */
.kg-phai{
  background:rgba(25,17,12,.74);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);
  padding:clamp(22px,2.4vw,32px) clamp(24px,2.6vw,34px);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.kg-nhan{
  margin:0 0 4px;font-family:var(--head);font-weight:700;color:#fff;
  font-size:1.06rem;letter-spacing:-.01em
}
.ud-list{list-style:none;padding:0;margin:0;display:grid;gap:0}
.ud-list li{
  position:relative;padding:16px 0 16px 40px;
  border-top:1px solid rgba(255,255,255,.13);
  color:#EFE6D6;font-size:.97rem;text-wrap:pretty
}
.ud-list li:last-child{padding-bottom:0}
.ud-list li::before{
  content:"✓";position:absolute;left:0;top:16px;
  width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  background:var(--ochre);color:var(--brown-900);font-size:.78rem;font-weight:700
}

/* --- Dịch vụ khác: danh sách gọn --- */
.dvk-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px}
.dvk-list li{border-bottom:1px solid var(--line)}
.dvk-list a{
  display:flex;align-items:center;gap:14px;padding:18px 4px;color:var(--brown);transition:.2s
}
.dvk-list a:hover{color:var(--ochre-ink);padding-left:10px}
.dvk-list b{font-family:var(--head);font-weight:600;font-size:1.02rem}
.dvk-list small{color:var(--ink-2);font-size:.84rem}
.dvk-list .ar{margin-left:auto;border-color:currentColor}
.dvk-khoa{margin:30px 0 0;color:var(--ink-2);font-size:.95rem}
.dvk-khoa a{font-weight:600;color:var(--ochre-ink)}

/* --- Hỏi đáp --- */
.hd-list{display:grid;gap:12px}
.hd-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hd-item summary{
  padding:20px 54px 20px 24px;cursor:pointer;position:relative;list-style:none;
  font-family:var(--head);font-weight:600;color:var(--brown);text-wrap:balance
}
.hd-item summary::-webkit-details-marker{display:none}
.hd-item summary::after{
  content:"";position:absolute;right:24px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--ochre-ink);border-bottom:2px solid var(--ochre-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s
}
.hd-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.hd-item summary:hover{background:var(--soft)}
.hd-item p{margin:0;padding:0 24px 22px;color:var(--ink-2);font-size:.97rem}

@media (max-width:1024px){
  .vd-grid,.gp-grid{grid-template-columns:1fr}
  .kg-in{grid-template-columns:1fr;gap:34px}
  .kg-anh{object-position:55% 80%}
  /* Xếp dọc thì chữ nằm ở nửa trên, không còn nằm trong vùng tối bên trái nữa —
     đổi lớp phủ sang dọc: tối đậm phần chữ, thả ảnh ra ở phần dưới. */
  .keu-goi::after{
    background:linear-gradient(180deg,
      rgba(31,22,16,.94) 0%,
      rgba(31,22,16,.90) 42%,
      rgba(31,22,16,.58) 56%,
      rgba(31,22,16,.34) 100%)
  }
  .dvk-list{grid-template-columns:1fr}
}
@media (max-width:860px){
  .kg-act{flex-direction:column;gap:14px}
}

/* ================================================================
   Thanh điều hướng — vá lỗi tràn ngang ở dải 861–1256px
   Đo thật: bản đầy đủ cần 1257px (logo 222 + menu 779 + nút gọi 172
   + khoảng cách 52 + lề 32). Bản gọn cần 951px. Nút ba gạch trước đây
   chỉ bật từ 860px trở xuống, nên khoảng giữa hai mốc bị vọt ra ngoài màn.
   ================================================================ */
@media (max-width:1256px){
  .site-head .navbar-in{gap:16px}
  .site-head .menu a{padding:22px 8px;font-size:.85rem}
  .site-head .nav-call{display:none}
}
@media (max-width:980px){
  .site-head .burger{display:flex}
  .site-head .navbar{position:relative}
  .site-head .mainnav{
    position:absolute;left:0;right:0;top:100%;margin:0;
    background:#fff;box-shadow:var(--shadow);
    max-height:0;overflow:hidden;transition:max-height .3s
  }
  .site-head .mainnav.open{max-height:80vh;overflow-y:auto}
  .site-head .menu{flex-direction:column;align-items:stretch;padding:8px 0;gap:0}
  .site-head .menu a{padding:13px 20px;font-size:.95rem;border-bottom:1px solid var(--line)}
  .site-head .menu > li > a::after{display:none}
  .site-head .menu .menu-item-has-children > a::before{top:13px;right:20px}
  .site-head .menu .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border-top:0;background:var(--soft);padding:0
  }
  .site-head .menu .sub-menu a{padding-left:38px}
}
/* Bảng xổ của mục áp chót ("Thông tin") vọt 3px ra ngoài màn ở dải 981–1256px,
   làm cả trang cuộn ngang được dù bảng đang ẩn. Neo bảng theo mép phải của mục. */
@media (max-width:1256px){
  .site-head .menu > li:nth-last-child(-n+3) .sub-menu{left:auto;right:0}
}

/* ═════════ Hàng icon liên hệ ở chân trang ═════════
   Bốn icon: điện thoại · Zalo · Facebook · LinkedIn.
   Cái nào chưa có đường dẫn thì dựng bằng <span> chứ không phải <a>:
   vẫn thấy đủ hàng, nhưng không bấm được và không dẫn đi đâu cả. */
.foot-social{display:flex;gap:10px;list-style:none;padding:0;margin:18px 0 0}
.foot-social a,
.foot-social .chua-gan{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;font-size:1rem
}
.foot-social a:hover{background:var(--ochre);color:var(--brown-900)}
.foot-social .chua-gan{
  color:rgba(255,255,255,.55);background:rgba(255,255,255,.05);
  cursor:default;border:1px dashed rgba(255,255,255,.18)
}

/* Dấu Facebook và LinkedIn vẽ bằng mask, ăn theo currentColor như các icon khác */
.ic-facebook,.ic-linkedin{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  background:currentColor;width:1.05em;height:1.05em
}
.ic-facebook{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5H16.7V4.6A22 22 0 0 0 14.28 4.5c-2.4 0-4.03 1.46-4.03 4.14v2.31H7.5V14h2.75v8Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.25-1.5 1.55-1.5H16.7V4.6A22 22 0 0 0 14.28 4.5c-2.4 0-4.03 1.46-4.03 4.14v2.31H7.5V14h2.75v8Z'/%3E%3C/svg%3E")
}
.ic-linkedin{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM3 9.5h4v11H3Zm7 0h3.8v1.5h.06a4.2 4.2 0 0 1 3.77-2.07c4.03 0 4.77 2.65 4.77 6.1v5.47h-4v-4.85c0-1.16-.02-2.65-1.62-2.65-1.62 0-1.87 1.26-1.87 2.57v4.93h-3.9Z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM3 9.5h4v11H3Zm7 0h3.8v1.5h.06a4.2 4.2 0 0 1 3.77-2.07c4.03 0 4.77 2.65 4.77 6.1v5.47h-4v-4.85c0-1.16-.02-2.65-1.62-2.65-1.62 0-1.87 1.26-1.87 2.57v4.93h-3.9Z'/%3E%3C/svg%3E")
}
.foot-social .ic-zl{font-size:1.02rem;line-height:1}

/* ═════════ Ảnh bìa cho dải tiêu đề trang trong ═════════
   Trước đây dải này chỉ là ô nâu đặc, trang dịch vụ và quốc gia nào cũng giống nhau.
   Nay mỗi trang có ảnh riêng, phủ tối nghiêng để chữ trắng vẫn đọc được.
   Trang không có ảnh thì .co-anh không được gắn, nền nâu cũ giữ nguyên. */
.phero.co-anh{isolation:isolate;padding:96px 0 84px}
.phero-anh{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:68% 50%
}
.phero.co-anh::before{display:none}          /* bỏ lưới chấm khi đã có ảnh */
.phero.co-anh::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(31,22,16,.94) 0%,
      rgba(31,22,16,.88) 40%,
      rgba(31,22,16,.58) 76%,
      rgba(31,22,16,.42) 100%),
    linear-gradient(180deg,
      rgba(31,22,16,.52) 0%,
      rgba(31,22,16,.12) 34%,
      rgba(31,22,16,.46) 100%)
}
@media (max-width:1024px){
  .phero.co-anh{padding:78px 0 66px}
  .phero-anh{object-position:58% 50%}
  /* Khổ hẹp chữ tràn gần hết bề ngang, không còn vùng tối bên trái để dựa vào */
  .phero.co-anh::after{
    background:linear-gradient(180deg,
      rgba(31,22,16,.92) 0%,
      rgba(31,22,16,.86) 58%,
      rgba(31,22,16,.62) 100%)
  }
}

/* ═════════ Logo bản dọc — chữ nằm dưới dấu hiệu, đúng bố cục gốc ═════════
   Bản dọc cần chiều cao mới đọc được phụ đề: đo trên ảnh gốc, dòng
   "ĐỊNH CƯ TOÀN CẦU" chỉ chiếm 7,4% chiều cao khối. Cao 96px thì phụ đề
   được 7,1px — nhỏ nhưng còn đọc. Thấp hơn nữa là mất chữ.
   Vì vậy thanh điều hướng phải nới ra tương ứng. */
.site-head .wv-logo-img{height:96px;width:auto}
.site-head .navbar-in{min-height:120px}
.foot-brand .wv-logo-img{height:104px;width:auto}

@media (max-width:980px){
  .site-head .wv-logo-img{height:72px}
  .site-head .navbar-in{min-height:92px}
}
@media (max-width:640px){
  .site-head .wv-logo-img{height:60px}
  .site-head .navbar-in{min-height:78px}
  .foot-brand .wv-logo-img{height:88px}
}
/* Bản gọn ở khổ hẹp cao hơn một chút, vì nó thấp hơn bản đủ (bỏ một dòng chữ) */
@media (max-width:640px){ .site-head .wv-logo-img{height:56px} }

/* ═════════ Hero: chừa chỗ cho thanh điều hướng ═════════
   Thanh điều hướng nằm ĐÈ lên hero (position:absolute), nên khi nó cao lên
   để chứa logo dọc thì chữ hero chui lên dưới gầm nó. Đo được: đè 2px ở 1400,
   73px ở 1280×720, 24px ở 900, 11px ở 375.

   Cách cũ căn giữa khối chữ theo CẢ chiều cao hero (top:52% + translateY).
   Nay căn giữa theo phần CÒN LẠI dưới header: cho hero thành flex và chừa
   padding-top đúng bằng chiều cao header. Như vậy header cao bao nhiêu thì
   chữ tự lùi bấy nhiêu, không phải chỉnh tay mỗi lần đổi logo. */
:root{ --head-h:170px }
@media (max-width:980px){ :root{ --head-h:142px } }
@media (max-width:640px){ :root{ --head-h:124px } }

.mo-hero{ display:flex; align-items:center; padding-top:var(--head-h) }
.mo-copy{
  position:relative; top:auto; transform:none;
  margin-left:max(16px, calc((100% - var(--wrap)) / 2))
}
@media (max-width:1024px){ .mo-copy{ top:auto } }
/* Chiều cao hero phải tính theo header, không để số cứng: header ăn mất bao nhiêu
   thì hero phải cao thêm bấy nhiêu, nếu không khối chữ bị ép sát đáy.
   Đo ở 1280×720 trước khi sửa: chỉ còn 1px hở. */
.mo-hero{ height:clamp( calc(var(--head-h) + 440px), 78vh, 780px ) }
@media (max-width:1024px){
  .mo-hero{ height:clamp( calc(var(--head-h) + 400px), 80vh, 640px ) }
}