/* =========================================================
   VNC360 - MENU ĐIỆN ẢNH, HIỆU ỨNG & CÁC TRANG CON
   ========================================================= */
.header { transition: transform .5s var(--ease), box-shadow .3s, border-color .3s, background .3s; }
.header.is-hidden { transform: translateY(-110%); }
.header.is-scrolled { background: rgba(255,255,255,.82); }
.nav__list { position: relative; display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--ink); border-radius: 999px; transition: color .35s var(--ease); }
.nav__link.is-active { color: var(--blue); }
.nav__num { display: none; font-style: normal; }
.nav__link .chev { font-size: 14px; transition: transform .4s var(--ease); }
/* Chữ cuộn lên khi rê chuột */
.roll { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; vertical-align: top; }
.roll > span { display: block; transition: transform .55s cubic-bezier(.76,0,.24,1); }
.roll > span + span { position: absolute; left: 0; top: 0; transform: translateY(105%); color: var(--blue); }
.nav__link:hover .roll > span:first-child { transform: translateY(-105%); }
.nav__link:hover .roll > span + span { transform: translateY(0); }
/* Viên nền trượt theo chuột */
.nav__pill { position: absolute; left: 0; top: 50%; height: 40px; margin-top: -20px; width: 0; border-radius: 999px; background: linear-gradient(120deg, rgba(30,111,232,.1), rgba(25,184,214,.12)); box-shadow: inset 0 0 0 1px rgba(30,111,232,.14); opacity: 0; pointer-events: none; transition: transform .55s cubic-bezier(.65,0,.35,1), width .55s cubic-bezier(.65,0,.35,1), opacity .35s; list-style: none; }
.nav__pill.is-on { opacity: 1; }
.nav__pill::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--blue); }
.nav__item--has-sub { position: relative; }
.nav__sub-toggle, .nav__mobile-cskh { display: none; }
/* Menu xổ xuống: mở như màn chiếu, các mục hiện lần lượt */
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; z-index: 5;
  display: grid; gap: 30px; background: #fff; isolation: isolate;
  padding: 26px 28px; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(15,27,56,.35), 0 0 0 1px rgba(15,27,56,.06);
  transform: translateX(calc(-50% + var(--shift, 0px))) translateY(-10px) scale(.97); transform-origin: 50% 0;
  clip-path: inset(0 0 100% 0 round 18px); opacity: 0; visibility: hidden;
  transition: clip-path .6s cubic-bezier(.76,0,.24,1), transform .6s cubic-bezier(.22,1,.36,1), opacity .3s, visibility 0s .6s;
}
.mega::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.mega h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 10px; }
.mega a { display: flex; align-items: center; gap: 6px; padding: 7px 0; font-size: 14.5px; color: var(--ink); opacity: 0; transform: translateY(10px); transition: color .2s, opacity .4s, transform .5s var(--ease); }
.mega a:hover { color: var(--blue); }
.mega a sup { font-size: 10.5px; color: var(--muted); }
.mega a svg { font-size: 15px; }
.mega__col a::before { content: ""; width: 0; height: 2px; background: var(--blue); border-radius: 2px; transition: width .3s var(--ease); }
.mega__col a:hover::before { width: 12px; }
.mega__all { font-weight: 600; color: var(--blue) !important; margin-top: 6px; }
.mega--products { grid-template-columns: 210px 220px 220px; }
.mega__card { display: grid !important; gap: 6px; padding: 0 !important; align-content: start; }
.mega__card::before { display: none; }
.mega__img { display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; background: var(--bg-alt); box-shadow: 0 0 0 1px var(--line); }
.mega__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.mega__card:hover .mega__img img { transform: scale(1.08); }
.mega__card strong { font-family: var(--font-head); font-size: 14px; line-height: 1.3; }
.mega__card small { color: var(--muted); font-size: 12px; }
@media (hover: hover) and (min-width: 1025px) {
  .nav__item--has-sub:hover .mega, .nav__item--has-sub:focus-within .mega {
    clip-path: inset(0 0 0 0 round 18px); opacity: 1; visibility: visible; transform: translateX(calc(-50% + var(--shift, 0px))) translateY(0) scale(1);
    transition: clip-path .7s cubic-bezier(.76,0,.24,1), transform .7s cubic-bezier(.22,1,.36,1), opacity .3s, visibility 0s;
  }
  .nav__item--has-sub:hover .mega a, .nav__item--has-sub:focus-within .mega a { opacity: 1; transform: none; transition-delay: calc(var(--j, 0) * 45ms + 180ms); }
  .nav__item--has-sub:hover .chev { transform: rotate(180deg); }
}
.header__actions { display: flex; align-items: center; gap: 10px; }
.burger { display: none; width: 46px; height: 46px; border: 0; background: var(--bg-alt); border-radius: 50%; position: relative; transition: background .4s, transform .4s var(--ease); }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .5s cubic-bezier(.76,0,.24,1), opacity .3s, top .5s cubic-bezier(.76,0,.24,1), background .4s, right .4s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; right: 19px; } .burger span:nth-child(3) { top: 28px; }
.burger.is-open { background: rgba(255,255,255,.12); }
.burger.is-open span { background: #fff; }
.burger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; transform: translateX(10px); }
.burger.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
.nav-backdrop { display: none; }
@media (max-width: 1200px) and (min-width: 1025px) { .nav__link { padding: 10px 10px; font-size: 14.5px; } }

/* ---- Menu toàn màn hình (tablet & điện thoại): mở bằng vòng tròn lan từ nút menu ---- */
@media (max-width: 1024px) {
  :root { --header-h: 66px; }
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .header.is-scrolled { background: #fff; }
  .header.menu-open { background: transparent; box-shadow: none; border-color: transparent; }
  .header.menu-open .brand { position: relative; z-index: 130; }
  .header.menu-open .brand__text strong { color: #fff; }
  .header.menu-open .brand__text small { color: #9fb0d3; }
  .burger { display: block; }
  .header__actions { position: relative; z-index: 130; }
  .nav {
    position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
    padding: calc(var(--header-h) + 34px) 28px 28px; overflow-y: auto; overscroll-behavior: contain;
    background: radial-gradient(80% 60% at 100% 0%, rgba(30,111,232,.45), transparent 60%), radial-gradient(70% 50% at 0% 100%, rgba(25,184,214,.28), transparent 60%), #071330;
    clip-path: circle(0 at var(--cx, 95%) var(--cy, 32px)); visibility: hidden;
    transition: clip-path .85s cubic-bezier(.76,0,.24,1), visibility 0s .85s;
  }
  .nav::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; }
  .nav.is-open { clip-path: circle(150% at var(--cx, 95%) var(--cy, 32px)); visibility: visible; transition: clip-path .9s cubic-bezier(.76,0,.24,1), visibility 0s; }
  .nav-backdrop { display: none !important; }
  .nav__pill { display: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; position: relative; }
  .nav__list > li { opacity: 0; transform: translateY(46px) skewY(4deg); filter: blur(6px); transition: opacity .5s, transform .8s cubic-bezier(.22,1,.36,1), filter .6s; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav.is-open .nav__list > li { opacity: 1; transform: none; filter: none; transition-delay: calc(var(--i, 0) * 70ms + 260ms); }
  .nav__link { width: 100%; padding: 16px 4px; font-size: clamp(24px, 6vw, 34px); font-weight: 700; letter-spacing: -.02em; color: #fff; border-radius: 0; gap: 14px; }
  .nav__link.is-active { color: #7fd3ea; }
  .nav__num { display: inline-block; font-size: 12px; font-weight: 600; color: #6f84b3; letter-spacing: .1em; min-width: 22px; }
  .roll > span + span { color: #7fd3ea; }
  .nav__link .chev { display: none; }
  .nav__item--has-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .nav__sub-toggle { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.18); background: transparent; border-radius: 50%; color: #fff; font-size: 18px; }
  .nav__sub-toggle svg { transition: transform .4s var(--ease); }
  .nav__item--has-sub.is-open .nav__sub-toggle svg { transform: rotate(180deg); }
  .mega, .mega--products { grid-column: 1 / -1; position: static; transform: none; clip-path: none; opacity: 1; visibility: visible; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    grid-template-columns: 1fr !important; gap: 14px; padding: 0 0 0 36px; max-height: 0; overflow: hidden; border-radius: 0; transition: max-height .5s var(--ease), padding .5s; }
  .nav__item--has-sub.is-open .mega { max-height: 1200px; padding: 4px 0 18px 36px; }
  .mega h4 { color: #6f84b3; }
  .mega a { color: #d6e0f3; opacity: 1; transform: none; font-size: 16px; }
  .mega a:hover { color: #fff; }
  .mega__card { display: none !important; }
  .nav__mobile-cskh { display: grid; gap: 10px; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s var(--ease); position: relative; }
  .nav.is-open .nav__mobile-cskh { opacity: 1; transform: none; transition-delay: .75s; }
}
@media (hover: hover) { .burger:hover { transform: rotate(90deg); } }

/* ---- Màn che khi chuyển trang ---- */
.curtain { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.curtain__panel { position: absolute; inset: 0; transform: scaleY(0); transform-origin: bottom; }
.curtain__panel--1 { background: var(--blue); }
.curtain__panel--2 { background: #071330; }
.curtain__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 26px; opacity: 0; transition: opacity .3s; }
.curtain__logo img { width: 54px; height: 54px; border-radius: 50%; }
.curtain.is-leaving { pointer-events: all; }
.curtain.is-leaving .curtain__panel--1 { transform: scaleY(1); transition: transform .5s cubic-bezier(.76,0,.24,1); }
.curtain.is-leaving .curtain__panel--2 { transform: scaleY(1); transition: transform .55s cubic-bezier(.76,0,.24,1) .08s; }
.curtain.is-leaving .curtain__logo { opacity: 1; transition-delay: .35s; }
.curtain.is-covering .curtain__panel { transform: scaleY(1); transition: none; }
.curtain.is-covering .curtain__logo { opacity: 1; transition: none; }
.curtain.is-revealing .curtain__panel { transform-origin: top; transform: scaleY(0); }
.curtain.is-revealing .curtain__panel--2 { transition: transform .75s cubic-bezier(.76,0,.24,1); }
.curtain.is-revealing .curtain__panel--1 { transition: transform .75s cubic-bezier(.76,0,.24,1) .1s; }
.curtain.is-revealing .curtain__logo { opacity: 0; transition: opacity .2s; }

/* =========================================================
   THẺ SẢN PHẨM: RÊ CHUỘT -> WEBSITE TỰ CUỘN TỚI CUỐI TRANG
   ========================================================= */
.work__bar { align-items: center; }
.work__bar em { margin-left: 8px; font-style: normal; font-size: 11px; color: #8a96ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; padding: 1px 10px; border-radius: 5px; flex: 1; max-width: 70%; }
.work__screen.is-tall img, .pd__laptop-screen.is-tall img { height: auto; object-fit: initial; will-change: transform; transition: transform 1.1s cubic-bezier(.65,0,.35,1); }
.work:hover .work__screen.is-tall img, .work.is-auto .work__screen.is-tall img,
.pd__laptop-screen.is-tall:hover img, .pd__laptop.is-auto .pd__laptop-screen.is-tall img {
  transform: translateY(var(--scroll)); transition: transform var(--dur, 6s) cubic-bezier(.45,0,.55,1) .15s;
}
.work__hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: none; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(7,19,48,.78); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(6px); transition: opacity .35s, transform .35s var(--ease); pointer-events: none; }
.work__hint svg { font-size: 14px; animation: mouseWheel 1.6s ease-in-out infinite; }
@keyframes mouseWheel { 50% { transform: translateY(2px); } }
.work__screen.is-tall .work__hint { display: inline-flex; }
.work:hover .work__hint, .work.is-auto .work__hint { opacity: 0; transform: translate(-50%, 8px); }
@media (hover: none) { .work__hint { display: none !important; } }
.work__progress { position: absolute; right: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: rgba(7,19,48,.12); opacity: 0; transition: opacity .3s; }
.work__progress::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; border-radius: inherit; background: var(--blue); transform: scaleY(0); transform-origin: top; transition: transform 1.1s cubic-bezier(.65,0,.35,1); }
.work:hover .is-tall .work__progress, .work.is-auto .is-tall .work__progress { opacity: 1; }
.work:hover .is-tall .work__progress::after, .work.is-auto .is-tall .work__progress::after { transform: scaleY(1); transition: transform var(--dur, 6s) cubic-bezier(.45,0,.55,1) .15s; }
.work__thumb { overflow: hidden; }
.work__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-100%); pointer-events: none; }
.work:hover .work__thumb::after { transform: translateX(100%); transition: transform 1s var(--ease); }

/* =========================================================
   CÁC TRANG CON
   ========================================================= */
.phero { position: relative; overflow: hidden; isolation: isolate; background: #071330; color: #c7d3ec; padding: 72px 0 84px; }
.phero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: .28; transform: scale(1.08); animation: kenburns 18s ease-out forwards; }
@keyframes kenburns { to { transform: scale(1); } }
.phero__grid { position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, transparent); mask-image: linear-gradient(90deg, transparent, #000 40%, transparent); animation: gridMove 30s linear infinite; }
.phero__glow { position: absolute; z-index: -1; width: 620px; height: 620px; right: -160px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(30,111,232,.55), transparent 65%); animation: glowDrift 12s ease-in-out infinite alternate; }
@keyframes glowDrift { to { transform: translate(-120px, 80px) scale(1.15); } }
.phero__inner { position: relative; max-width: 900px; }
.phero h1 { color: #fff; font-size: clamp(32px, 5vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; margin: 14px 0 16px; }
.phero p { font-size: 18px; color: #a9b7d6; max-width: 680px; margin: 0; }
.crumbs--light { color: #8494b8; margin-bottom: 0; }
.crumbs--light a:hover { color: #fff; }
.stats--page { padding: 64px 0 0; }

.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.about__media { position: relative; max-width: 440px; margin: 0 auto; }
.about__media img { position: relative; z-index: 1; border-radius: 50%; box-shadow: var(--shadow-lg); }
.about__ring { position: absolute; inset: -22px; border-radius: 50%; border: 2px dashed rgba(30,111,232,.35); animation: spin 40s linear infinite; }
.about__text h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.03em; }
.about__intro { font-size: 19px; color: var(--ink); font-weight: 500; line-height: 1.55; }
.mv { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 72px; }
.mv__card { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 18px; padding: 30px 30px 26px; }
.mv__card span { font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.mv__card p { font-family: var(--font-head); font-size: 20px; font-weight: 600; color: var(--ink); margin: 10px 0 0; line-height: 1.45; letter-spacing: -.01em; }
.mv__card--dark { background: #071330; border-color: transparent; }
.mv__card--dark span { color: #7fd3ea; }
.mv__card--dark p { color: #fff; }
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.value { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: #fff; transition: transform .4s var(--ease), box-shadow .4s; }
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.value i { font-style: normal; font-family: var(--font-head); font-weight: 800; color: var(--blue); font-size: 14px; }
.value h3 { font-size: 18px; margin: 10px 0 6px; }
.value p { font-size: 14.5px; color: var(--muted); margin: 0; }

.plist-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.psearch { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; transition: border-color .2s, box-shadow .2s; }
.psearch:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(30,111,232,.12); }
.psearch svg { color: var(--muted); font-size: 18px; }
.psearch input { flex: 1; border: 0; outline: 0; padding: 13px 0; font: inherit; font-size: 15px; background: transparent; color: var(--ink); }
#pSort { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 14.5px; background: #fff; color: var(--ink); }
.plist-count { color: var(--muted); font-size: 14px; }
body[data-page="products"] #san-pham { padding-top: 56px; }
body[data-page="products"] .filters { justify-content: flex-start; }
#portfolioAll { margin-top: 40px; }
.empty-note { padding: 40px 0; }

.post__tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.post__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--blue); }
.post__more svg { transition: transform .3s var(--ease); }
.post:hover .post__more svg { transform: translateX(4px); }

.article { padding: 40px 0 72px; background: linear-gradient(180deg, var(--bg-alt), #fff 360px); }
.article__inner { max-width: 820px; }
.article h1 { font-size: clamp(30px, 4.2vw, 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin: 6px 0 16px; }
.article__lead { font-size: 19px; color: var(--muted); line-height: 1.6; }
.article__cover { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: 18px; margin: 28px 0 36px; box-shadow: var(--shadow); }
.article__cover--color { display: grid; place-items: center; }
.article__cover--color span { font-family: var(--font-head); font-size: 64px; font-weight: 800; color: rgba(255,255,255,.9); }
.article__body p { font-size: 17.5px; line-height: 1.8; color: var(--text); margin-bottom: 1.3em; }
.article__body p:first-child::first-letter { float: left; font-family: var(--font-head); font-size: 3.4em; line-height: .9; font-weight: 800; color: var(--blue); margin: 6px 10px 0 0; }
.article__share { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 12px; color: var(--muted); font-size: 14px; }
.article__share a, .article__share button { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 8px 14px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s; }
.article__share a:hover, .article__share button:hover { border-color: var(--blue); color: var(--blue); }

.cinfo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.cinfo__card { display: grid; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
a.cinfo__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.cinfo__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: #eef4ff; color: var(--blue); font-size: 22px; margin-bottom: 10px; transition: background .3s, color .3s; }
a.cinfo__card:hover .cinfo__ic { background: var(--blue); color: #fff; }
.cinfo__card small { color: var(--muted); font-size: 13.5px; }
.cinfo__card strong { font-family: var(--font-head); font-size: 17px; color: var(--ink); word-break: break-word; }
.cmap { margin-top: 24px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/6; }
.cmap iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 1024px) {
  .about { grid-template-columns: 1fr; gap: 48px; }
  .about__media { max-width: 320px; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .cmap { aspect-ratio: 16/9; }
}
@media (max-width: 640px) {
  .phero { padding: 48px 0 56px; }
  .phero p { font-size: 16px; }
  .mv { grid-template-columns: 1fr; margin-top: 48px; }
  .mv__card p { font-size: 18px; }
  .values { grid-template-columns: 1fr; }
  .plist-tools { gap: 10px; }
  .psearch { min-width: 100%; }
  #pSort { flex: 1; }
  .article { padding-top: 24px; }
  .article__body p { font-size: 16.5px; }
  .cmap { aspect-ratio: 4/3; }
  .nav { padding-left: 22px; padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav__list > li, .mega a, .nav__mobile-cskh { opacity: 1 !important; transform: none !important; filter: none !important; }
}

body.no-scroll .mobile-bar { display: none; }

/* ---- Bảng giá nhiều gói ---- */
.pricing { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; max-width: none; }
.pricing > .plan { flex: 1 1 0; min-width: 0; padding: 32px 22px 26px; }
.plan__prefix { font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7fd3ea; margin-bottom: 2px; }
.plan--hot .plan__prefix { color: var(--blue); }
.pricing .plan__price { font-size: clamp(22px, 1.75vw, 28px); white-space: nowrap; letter-spacing: -.035em; }
.pricing .plan li { font-size: 14.5px; }
.pricing .plan__note { min-height: 4.8em; line-height: 1.6; }
@media (max-width: 1200px) {
  .pricing > .plan { flex: 0 1 calc((100% - 36px) / 3); }
  .pricing .plan__price { font-size: 30px; }
}
@media (max-width: 860px) {
  .pricing > .plan { flex: 0 1 calc((100% - 18px) / 2); }
}
@media (max-width: 640px) {
  .pricing { gap: 28px; }
  .pricing > .plan { flex: 1 1 100%; max-width: 460px; padding: 30px 22px; }
  .pricing .plan__note { min-height: 0; }
  .pricing .plan__price { font-size: 32px; }
}