/* =========================================================================
   NamVietMedia Web – bố cục đối chiếu nasani.vn (đo tại viewport 1440/768/390)
   ========================================================================= */

:root {
	--nvm-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--nvm-primary: #0569c2;      /* xanh chủ đạo (tiêu đề, nút) */
	--nvm-primary-2: #0569b8;    /* xanh footer, tiêu đề trang con */
	--nvm-topbar: #0461aa;
	--nvm-phonebar: #075aa6;
	--nvm-red: #e20702;          /* nút Kiểm tra */
	--nvm-red-2: #d42125;        /* nút "Xem thêm bảng giá", khối hotline */
	--nvm-crimson: #bd1042;      /* slogan, giá */
	--nvm-navy: #273986;
	--nvm-orange: #fc9e20;
	--nvm-bg: #f0f5fc;
	--nvm-text: #222;
	--nvm-muted: #464646;
	--wrap: 1440px;
	--gutter: 26px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; background: var(--nvm-bg); color: #000;
	font-family: var(--nvm-font); font-size: 14px; line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--nvm-primary); }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--nvm-primary); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed !important; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 8px 16px; background: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 1004px; }

/* ---------- buttons ---------- */
.btn-red {
	display: inline-flex; align-items: center; justify-content: center; height: 45px; padding: 0 32px; border-radius: 9999px;
	background: var(--nvm-red-2); color: #fff; font-size: 14px; box-shadow: 0 8px 16px -4px rgba(212, 33, 37, .5); transition: transform .25s, filter .25s;
}
.btn-red:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.08); }
.btn-pill { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 9999px; padding: 8px 24px; cursor: pointer; font-size: 14px; }
.btn-pill--blue { background: var(--nvm-primary-2); color: #fff; }
.btn-pill--blue:hover { filter: brightness(1.1); }
.btn-outline-red { display: inline-flex; align-items: center; gap: 4px; padding: 8px 15px; border: 1px solid var(--nvm-red); border-radius: 40px; color: #f00; font-size: 14px; line-height: 20px; transition: background .2s, color .2s; }
.btn-outline-red:hover { background: var(--nvm-red); color: #fff; }
/* nút viền gradient cam → đỏ */
.btn-grad { display: inline-block; padding: 1px; border-radius: 50px; background: linear-gradient(90deg, #fca120, #e8202a); font-size: 14px; font-weight: 600; text-align: center; color: #222; }
.btn-grad span { display: block; padding: 12px 20px; border-radius: 50px; background: #fff; transition: background .25s, color .25s; }
.btn-grad:hover span { background: transparent; color: #fff; }
.btn-grad--orange span { color: var(--nvm-orange); }

/* ---------- topbar (36px) ---------- */
.topbar { background: var(--nvm-topbar); color: #fff; font-size: 14px; line-height: 20px; }
.topbar__in { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.topbar__left { display: flex; gap: 16px; white-space: nowrap; overflow: hidden; }
.topbar__left a:hover, .topbar__right a:hover { color: #fff; text-decoration: underline; }
.topbar__right { display: flex; align-items: center; white-space: nowrap; }
.topbar__right .sep { margin-left: 8px; padding-left: 8px; position: relative; }
.topbar__right .sep::before { content: "|"; position: absolute; left: -2px; }
.topbar__pill { margin-left: 8px; padding: 0 5px; border-radius: 15px; background: #0569c2; }
.topbar__pill:hover { text-decoration: none !important; filter: brightness(1.15); }
.topbar i { font-size: 13px; }

/* ---------- header (65px) ---------- */
.site-header { position: sticky; top: 0; z-index: 90; background: #fff; box-shadow: 0 0 15px rgba(0, 0, 0, .1); }
.site-header__in { display: flex; align-items: center; height: 65px; }
.site-logo { display: block; flex: 0 0 auto; }
.site-logo img { height: 45px; width: auto; display: block; }
.main-nav { margin-left: auto; }
.main-nav__list { display: flex; gap: 12px; }
.main-nav__list > li { position: relative; }
.main-nav__list > li > a {
	display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 6px;
	font-size: 15px; line-height: 22.5px; color: #333; transition: background .2s, color .2s;
}
.main-nav__list > .menu-item-has-children > a::after { content: "\ea4e"; font-family: remixicon; font-size: 14px; margin-left: 2px; }
.main-nav__list > li > a:hover { color: var(--nvm-primary); }
.main-nav__list > .current-menu-item > a, .main-nav__list > .current-menu-ancestor > a,
.main-nav__list > .current-menu-parent > a { background: var(--nvm-primary); color: #fff; }
.main-nav .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 280px; padding: 12px 0; margin-top: 4px; background: #fff;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .12); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .25s;
}
.main-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.main-nav .sub-menu a { display: block; padding: 8px 16px; font-size: 14px; color: #333; text-transform: uppercase; }
.main-nav .sub-menu a:hover { color: var(--nvm-primary); background: #f3f8ff; }
.btn-login {
	margin-left: 12px; padding: 10px 15px; border: 1px solid var(--nvm-primary); border-radius: 4px;
	font-size: 15px; line-height: 20px; color: #333; white-space: nowrap; transition: .2s;
}
.btn-login:hover { background: var(--nvm-primary); color: #fff; }
.nav-toggle { display: none; }

/* ---------- mobile nav ---------- */
.mnav { position: fixed; inset: 0; z-index: 200; }
.mnav__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.mnav__panel { position: absolute; top: 0; left: 0; bottom: 0; width: 320px; max-width: 86vw; background: #f0f2f5; display: flex; flex-direction: column; overflow-y: auto; animation: mnavIn .25s ease; }
@keyframes mnavIn { from { transform: translateX(-100%); } }
.mnav__logo { background: #fff; padding: 10px 12px; }
.mnav__logo .site-logo img { height: 42px; }
.mnav__cart { padding: 10px 20px 0; font-size: 15px; color: #111; }
.mnav__pill { align-self: flex-start; margin: 12px 20px 4px; padding: 4px 8px; border-radius: 3px; background: var(--nvm-primary); color: #fff; font-size: 15px; }
.mnav__pill:hover { color: #fff; }
.mnav__list { padding: 10px 0; }
.mnav__list a { display: flex; justify-content: space-between; padding: 12px 20px; font-size: 15px; text-transform: uppercase; color: #111; }
.mnav__list .menu-item-has-children > a::after { content: "\ea6e"; font-family: remixicon; }
.mnav__list .menu-item-has-children.is-open > a::after { content: "\ea4e"; }
.mnav__list .sub-menu { display: none; background: #e6eaf0; }
.mnav__list .is-open > .sub-menu { display: block; }
.mnav__list .sub-menu a { padding-left: 34px; font-size: 14px; }
.mnav__list .current-menu-item > a { color: var(--nvm-primary); }
.mnav__close { margin-top: auto; border: 0; background: var(--nvm-primary); color: #fff; text-align: left; padding: 14px 20px; font-size: 18px; cursor: pointer; }

/* ---------- section headings ---------- */
.sec-head__slogan { font-size: 15px; font-weight: 600; color: var(--nvm-crimson); margin-bottom: 14px; }
.sec-head__title { font-size: 42px; line-height: 1.5; font-weight: 600; color: #0369c2; }
.sec-head__title--xl { font-size: 55px; line-height: 1.5; }
.sec-head__line { display: flex; gap: 12px; margin-top: 2px; }
.sec-head__line i { display: block; height: 3px; width: 100px; background: var(--nvm-primary); }
.sec-head__line i + i { width: 3px; margin-top: 3px; }
.sec-head--center { text-align: center; }
.sec-head__desc { margin-top: 8px; font-size: 15px; color: #fff; }
.sec-head__desc--dark { color: var(--nvm-muted); max-width: 910px; margin-left: auto; margin-right: auto; }
.sec-head--light .sec-head__slogan { color: var(--nvm-orange); }
.sec-head--light .sec-head__title { color: #fff; }

.page-head { text-align: center; margin-bottom: 34px; }
.page-head__title { font-size: 30px; line-height: 36px; font-weight: 500; color: var(--nvm-primary-2); text-transform: uppercase; }
.page-head__line { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.page-head__line i { display: block; height: 3px; width: 30px; background: var(--nvm-primary-2); }
.page-head__line i:nth-child(2) { width: 16px; }
.page-head__line i:nth-child(3) { width: 50px; }
.page-head__desc { margin: 18px auto 0; max-width: 880px; font-size: 14px; line-height: 21px; color: #000; }

/* ---------- hero (680px) ---------- */
.hero { position: relative; min-height: 680px; overflow: hidden; display: flex; align-items: center;
	background: linear-gradient(100deg, #d6e6fb 0%, #e8f0fd 32%, #f1f2fc 52%, #f6e9f6 74%, #f9dcec 100%); }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__wave { position: absolute; left: -10%; width: 70%; height: 340px; border-radius: 50%; border-top: 2px solid rgba(255, 255, 255, .8); }
.hero__wave--1 { bottom: -170px; transform: rotate(-8deg); background: radial-gradient(ellipse at top, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); }
.hero__wave--2 { bottom: -230px; left: 0; transform: rotate(-4deg); border-color: rgba(120, 170, 255, .35); }
.hero__glow { position: absolute; right: 8%; top: -10%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 65%); }
.hero__in { position: relative; display: grid; grid-template-columns: 540px 802px; justify-content: space-between; align-items: center; padding: 0 10px; }
.hero__title { font-size: 42px; line-height: 1.2; font-weight: 700; color: var(--nvm-primary); text-align: center; }
.hero__sub { margin: 12px 0 24px; font-size: 14px; text-align: center; }
.hero__sys-head { display: grid; grid-template-columns: 189px minmax(0, 1fr); gap: 20px; align-items: center; margin-bottom: 20px; }
.hero__hex svg { width: 189px; height: 179px; animation: nvmFloat 4s ease-in-out infinite; }
@keyframes nvmFloat { 50% { transform: translateY(-8px); } }
.hero__sys-text { text-align: center; }
.hero__r1 { font-size: 43px; line-height: 1.5; font-weight: 700; color: #1560e4; text-transform: uppercase; }
.hero__r2 { font-family: "Oswald", var(--nvm-font); font-weight: 300; font-size: 20px; color: #222; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 20px 32px; justify-content: center; margin-top: 22px; }
.btn-explore {
	display: inline-flex; align-items: center; gap: 12px; min-width: 255px; height: 74px; padding: 12px 18px; border-radius: 60px;
	border: 1px solid #7bdcff; background: linear-gradient(180deg, #2d8cff 0%, #0b5be0 100%); color: #fff; font-size: 16px;
	box-shadow: 0 10px 22px -8px rgba(11, 91, 224, .7); transition: transform .25s;
}
.btn-explore:hover { color: #fff; transform: translateY(-2px); }
.btn-explore span { flex: 1; text-align: center; }
.btn-explore__ico { font-size: 22px; }
.btn-status {
	display: inline-flex; align-items: center; gap: 12px; min-width: 308px; height: 72px; padding: 12px 18px; border-radius: 60px;
	background: #fff; color: #111; font-size: 16px; box-shadow: 0 8px 20px rgba(3, 106, 194, .1);
}
.btn-status span { flex: 1; text-align: center; }
.btn-status__dot { width: 12px; height: 12px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); animation: nvmPulse 1.6s infinite; }
@keyframes nvmPulse { 50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }
.btn-status__bars { color: #1d6ff2; font-size: 26px; }
.hero__cards { display: grid; grid-template-columns: repeat(3, 254px); gap: 20px; justify-content: space-between; }
.svc-card {
	position: relative; display: flex; gap: 16px; align-items: center; height: 138px; padding: 20px; border-radius: 10px;
	background: #fff; border: 1px solid rgba(3, 106, 194, .21); color: #000; transition: transform .25s, box-shadow .25s;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -12px rgba(3, 106, 194, .35); color: #000; }
.svc-card__ico {
	flex: 0 0 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 34px;
	color: var(--c); border: 1.5px solid var(--c); background: color-mix(in srgb, var(--c) 10%, #fff);
}
.svc-card__title { display: block; font-size: 18px; line-height: 27px; color: var(--c); }
.svc-card__desc { display: block; margin-top: 6px; font-size: 13px; line-height: 19.5px; color: #9d9d9d; }
.svc-card__go { position: absolute; right: 12px; bottom: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: var(--c); border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }

/* ---------- phone bar (57px, cố định trên desktop) ---------- */
.phone-bar { display: flex; justify-content: center; gap: 16px; background: var(--nvm-phonebar); padding: 8px; }
.phone-bar a { display: flex; align-items: center; gap: 10px; min-width: 128px; color: #fff; font-size: 14px; line-height: 20px; }
.phone-bar a:hover { color: #fff; opacity: .9; }
.phone-bar i { font-size: 26px; opacity: .9; }
.phone-bar b { display: block; font-weight: 700; }
@media (min-width: 1024px) {
	.phone-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; height: 57px; padding: 8px; gap: 40px; }
	body { padding-bottom: 57px; }
}

/* ---------- about ---------- */
.bg-domain { background: radial-gradient(circle at 0 30%, rgba(255, 255, 255, .7) 0, rgba(255, 255, 255, 0) 30%), linear-gradient(180deg, #edf3fd 0%, #f2f6fc 100%); position: relative; overflow: hidden; }
.about { position: relative; padding: 50px 0 60px; }
.about__panel { position: relative; max-width: 1290px; margin: 0 auto; display: grid; grid-template-columns: 627px 627px; justify-content: space-between; align-items: center; }
.about__panel::before { content: ""; position: absolute; left: 150px; right: 75px; top: -50px; bottom: -60px; background: #e6eefe; z-index: 0; }
.about__cards { position: relative; z-index: 1; display: grid; grid-template-columns: 299px 299px; gap: 28px; }
.about__col { display: grid; gap: 28px; align-content: start; }
.about__col--down { margin-top: 120px; }
.about-card {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 335px; padding: 24px; border-radius: 20px;
	text-align: center; background: #fff; box-shadow: 0 10px 30px -10px rgba(3, 106, 194, .18); transition: transform .3s;
}
.about-card:hover { transform: translateY(-6px); }
.about-card h3 { font-size: 23px; font-weight: 600; color: var(--nvm-navy); }
.about-card--blue { background: linear-gradient(180deg, #0a83d8 0%, #0565bf 100%); }
.about-card--blue h3 { color: #fff; }
.about-card__img { width: 92px; height: 92px; }
.about__text { position: relative; z-index: 1; padding-right: 0; }
.about__title { font-size: 45px; line-height: 55px; font-weight: 600; color: #0369c2; margin-bottom: 30px; }
.about__text p { font-size: 15px; line-height: 30px; color: var(--nvm-muted); text-align: justify; }
.about__text p + p { margin-top: 16px; }

/* ---------- domain prices (home) ---------- */
.dprice { padding: 40px 0 100px; }
.dprice__row { display: grid; grid-template-columns: 674px 674px; justify-content: space-between; align-items: center; }
.dprice__row--rev { margin-top: 180px; }
.dprice__desc { margin: 22px 0 26px; font-size: 15px; line-height: 30px; color: var(--nvm-muted); }
.tld-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 21px 20px; }
.tld-tile { display: flex; justify-content: space-between; align-items: center; height: 58px; padding: 0 20px; border-radius: 6px; background: #fff; box-shadow: 0 4px 14px rgba(3, 106, 194, .07); font-size: 15px; font-weight: 600; transition: transform .2s; }
.tld-tile:hover { transform: translateY(-2px); }
.tld-tile__ext { color: var(--nvm-navy); }
.tld-tile__price { color: var(--nvm-crimson); font-weight: 700; }
.dprice__more { text-align: center; margin-top: 32px; }
.dprice__art svg { width: 100%; height: auto; }

/* ---------- hosting ---------- */
.bg-hostweb { position: relative; }
.hosting { position: relative; padding: 0 0 56px; }
.hosting--home { padding-top: 64px; }
.hosting__top {
	position: absolute; left: 0; right: 0; top: 0; height: 840px; z-index: 0;
	background: radial-gradient(ellipse at 20% 40%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 40%), linear-gradient(180deg, #0a6fd0 0%, #0a63c5 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 92% 92%, 70% 79%, 50% 76%, 30% 79%, 8% 92%, 0 100%);
}
.hosting > .wrap { position: relative; z-index: 1; }
.hosting--home .sec-head__title { margin: 0 0 4px; }
.tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 30px 0 46px; }
.tabs__btn { border: 0; border-radius: 8px; padding: 13px 20px; background: #fff; font-size: 14px; font-weight: 600; color: #222; cursor: pointer; }
.tabs__btn.is-active { color: var(--nvm-orange); }
.hosting--page .tabs { display: inline-flex; gap: 0; padding: 8px 16px; background: #fff; border-radius: 9999px; box-shadow: 0 6px 18px rgba(3, 106, 194, .08); }
.hosting--page .tabs-wrap, .hosting--page > .wrap { text-align: center; }
.slider { position: relative; max-width: 1246px; margin: 0 auto; }
.slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 60px) / 3); gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 0 20px; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__nav { position: absolute; top: 50%; z-index: 2; width: 50px; height: 50px; margin-top: -25px; border: 0; border-radius: 50%; background: #fff; color: var(--nvm-primary); font-size: 22px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
.slider__prev { left: -61px; }
.slider__next { right: -61px; }
.host-card { position: relative; scroll-snap-align: start; padding: 10px 16px 16px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 10px 30px -12px rgba(3, 60, 140, .25); }
.host-card__ribbon {
	position: absolute; left: 30px; top: 0; width: 50px; height: 160px; padding-top: 8px; background: #ffc2c6;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.host-card__ribbon span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; line-height: 17px; font-weight: 600; color: #000; max-height: 116px; }
.host-card__ribbon i { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #e8202a; font-size: 20px; }
.host-card__ring {
	width: 140px; height: 140px; margin: 0 auto 10px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: linear-gradient(180deg, #fff 30%, #ffe2c2 100%); box-shadow: inset 0 0 0 6px #f9b25b;
}
.host-card__ring span { font-size: 20px; line-height: 1.2; color: #222; }
.host-card__ring b { font-size: 30px; line-height: 1.3; font-weight: 700; color: #222; }
.host-card__from { font-size: 14px; }
.host-card__price { font-size: 36px; line-height: 48px; font-weight: 600; color: var(--nvm-crimson); }
.host-card__unit { font-size: 14px; color: #222; margin-bottom: 22px; }
.host-card__specs { text-align: left; }
.host-card__specs li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0 13px; border-bottom: 1px solid #e5e7eb; font-size: 14px; line-height: 20px; color: #222; }
.host-card .btn-grad { width: 250px; max-width: 100%; margin-top: 28px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1246px; margin: 0 auto 40px; }

/* ---------- web design plans ---------- */
.webplans { padding: 50px 0 64px; }
.webplans .sec-head { margin-bottom: 36px; }
.webplans .sec-head__slogan { margin-bottom: 0; }
.webplans__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 54px 20px; }
.web-card { padding: 22px 47px 32px; border-radius: 20px; background: #fff; border-top: 3px solid var(--c); text-align: center; box-shadow: 0 20px 40px -18px rgba(3, 106, 194, .25); }
.web-card__title { font-size: 28.8px; line-height: 43.2px; font-weight: 700; color: var(--c); text-transform: uppercase; }
.web-card__price { margin-top: 22px; font-size: 20px; line-height: 30px; font-weight: 500; color: var(--nvm-navy); text-transform: uppercase; }
.web-card__note { font-size: 14px; color: #888; padding-bottom: 20px; border-bottom: 1px dashed #e3e3e3; }
.web-card__list { text-align: left; margin: 16px 0 26px; }
.web-card__list li { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; padding: 8px 0; }
.web-card__list i { font-size: 22px; font-weight: 700; }
.web-card__list .is-on i { color: #3cb043; }
.web-card__list .is-off i { color: #e81c1c; }
.web-card .btn-grad { display: block; }

/* ---------- advantages ---------- */
.adv { padding: 70px 0 70px; }
.adv__row { display: grid; grid-template-columns: 590px 593px; justify-content: space-between; align-items: center; padding: 0 49px; }
.adv__text .sec-head__title { font-size: 45px; line-height: 55px; }
.adv__desc { margin: 22px 0 30px; font-size: 15px; line-height: 30px; color: var(--nvm-muted); }
.adv__grid { display: grid; grid-template-columns: 284px 284px; gap: 25px; justify-content: space-between; }
.adv-card { display: flex; align-items: center; gap: 20px; height: 100px; padding: 20px; border-radius: 6px; background: #fff; box-shadow: 0 6px 20px rgba(3, 106, 194, .06); transition: transform .25s; }
.adv-card:hover { transform: translateY(-3px); }
.adv-card__ico { flex: 0 0 60px; height: 60px; border-radius: 8px; display: grid; place-items: center; font-size: 28px; }
.adv-card h3 { font-size: 15px; font-weight: 600; color: #222; }

/* ---------- process ---------- */
.process { position: relative; overflow: hidden; min-height: 1210px; padding: 50px 0; }
.process__blob { position: absolute; left: -160px; top: 120px; width: 900px; height: 900px; border-radius: 46% 54% 40% 60%; background: #e1ecfd; }
.process__in { position: relative; min-height: 1110px; }
.process__intro { position: absolute; left: 39px; top: 390px; width: 450px; }
.process__r1 { font-size: 25px; color: #404040; }
.process__r2 { font-size: 40px; line-height: 60px; font-weight: 700; color: var(--nvm-primary); }
.process__r3 { margin-top: 8px; font-size: 15px; line-height: 24px; }
.process__laptop { position: absolute; left: -60px; top: 330px; width: 300px; }
.process__steps { position: absolute; inset: 0; }
.pstep { position: absolute; }
.pstep .cube svg { display: block; filter: drop-shadow(0 18px 18px rgba(80, 110, 200, .12)); }
.pstep__body { position: absolute; display: flex; gap: 20px; width: 330px; }
.pstep__ico { font-size: 56px; line-height: 1; flex: 0 0 70px; text-align: center; margin-top: 20px; }
.pstep__no { font-size: 25px; font-weight: 300; background: linear-gradient(90deg, #5b3be8, #a23ee6); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; }
.pstep__name { margin: 4px 0; font-size: 18px; font-weight: 600; text-transform: uppercase; }
.pstep__desc { font-size: 13px; line-height: 18px; max-width: 230px; }
.pstep--1 { left: 401px; top: 99px; }
.pstep--2 { left: 595px; top: 209px; }
.pstep--3 { left: 773px; top: 317px; }
.pstep--4 { left: 595px; top: 424px; }
.pstep--5 { left: 410px; top: 540px; }
.pstep--1 .pstep__body { left: 198px; top: -46px; }
.pstep--2 .pstep__body { left: 269px; top: -40px; }
.pstep--3 .pstep__body { left: 246px; top: -13px; }
.pstep--4 .pstep__body { left: 269px; top: 92px; }
.pstep--5 .pstep__body { left: 189px; top: 136px; }
.process__in { transform-origin: top center; }

/* ---------- support CTA ---------- */
.support { background: #e2eeff; padding: 64px 0; text-align: center; }
.support__title { font-size: 36px; line-height: 40px; font-weight: 700; color: var(--nvm-primary-2); }
.support__sub { margin: 12px 0 20px; font-size: 20px; line-height: 28px; color: rgba(55, 65, 81, .8); }
.support__phones { display: flex; justify-content: center; gap: 80px; flex-wrap: wrap; }
.support__phones a { font-size: 30px; line-height: 36px; font-weight: 600; color: #c5122a; }
.support__box { max-width: 708px; margin: 20px auto 0; padding: 32px 24px; border-radius: 10px; background: var(--nvm-red-2); color: #fff; }
.support__q { font-size: 18px; line-height: 28px; margin-bottom: 12px; }
.support__call { font-size: 30px; line-height: 36px; margin-bottom: 12px; }
.support__call a:hover { color: #fff; text-decoration: underline; }
.support__free { font-size: 18px; line-height: 28px; }

/* ---------- footer ---------- */
.footer-links { background: #f1f4fa; }
.footer-links__grid { display: grid; grid-template-columns: 316px 317px 316px 1fr; }
.footer-col { padding: 40px 0 46px; }
.footer-col + .footer-col { border-left: 1px solid #e5e7eb; padding-left: 25px; }
.footer-col__title { margin-bottom: 12px; font-size: 18px; line-height: 28px; font-weight: 600; color: #4b5563; text-transform: uppercase; }
.footer-col li { padding: 4px 0; font-size: 14px; line-height: 20px; }
.footer-col li a:hover { color: var(--nvm-primary-2); font-weight: 600; }
.footer-cta__title { font-size: 22px; line-height: 33px; font-weight: 600; color: var(--nvm-primary-2); margin-bottom: 8px; }
.footer-cta__desc { font-size: 14px; line-height: 20px; color: #4b5563; margin-bottom: 12px; }
.footer-cta__social { margin-top: 20px; font-size: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.footer-cta__social span { color: #f00; }
.footer-cta__social a { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 6px; background: #111; color: #fff; font-size: 13px; }
.footer-cta__social a:hover { color: #fff; background: var(--nvm-primary-2); }
.footer-company { background: var(--nvm-primary-2); color: #fff; padding: 38px 0 40px; }
.footer-company__grid { display: grid; grid-template-columns: 260px 1fr; gap: 58px; }
.footer-company__logo { display: inline-block; padding: 8px 14px; border-radius: 8px; background: #fff; }
.footer-company__logo img { height: 56px; width: auto; }
.footer-company__brand p { margin-top: 26px; text-align: right; font-size: 14px; line-height: 20px; }
.footer-company__name { font-size: 18px; line-height: 28px; font-weight: 600; text-transform: uppercase; margin-bottom: 4px; }
.footer-company__info h3 { font-size: 14px; line-height: 20px; font-weight: 700; text-transform: uppercase; }
.footer-company__info p { font-size: 14px; line-height: 24px; }

/* ---------- inner pages ---------- */
.banner { position: relative; height: 300px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 60px;
	background: linear-gradient(110deg, #0d5fd6 0%, #1f8ff0 45%, #47b6ff 100%); color: #fff; }
.banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 120%, rgba(255, 255, 255, .25), transparent 40%), radial-gradient(circle at 85% -20%, rgba(255, 255, 255, .25), transparent 40%); }
.banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(0deg, rgba(0, 40, 120, .25), transparent); }
.banner--domain { background: linear-gradient(110deg, #3b3bd6 0%, #5b6cf2 45%, #8aa4ff 100%); }
.banner--email { background: linear-gradient(110deg, #0f7ac9 0%, #10a5c6 50%, #3fd1c4 100%); }
.banner--web { background: linear-gradient(110deg, #5a2ee0 0%, #7e3ff2 45%, #c45cf0 100%); }
.banner--blog { background: linear-gradient(110deg, #e8f1ff 0%, #d8e8ff 100%); color: #0d5fd6; }
.banner--contact { background: linear-gradient(110deg, #f4f4f4 0%, #e9eef5 100%); color: #0d5fd6; }
.banner--about { background: linear-gradient(110deg, #0569b8 0%, #0b86e0 100%); }
.banner--care { background: linear-gradient(110deg, #0a8f6b 0%, #14b48a 50%, #5ad2b0 100%); }
.banner__text { position: relative; z-index: 1; text-align: center; line-height: 1; }
.banner__script { display: block; font-size: 64px; font-style: italic; font-weight: 300; letter-spacing: -1px; transform: rotate(-4deg); margin-bottom: -6px; }
.banner__big { display: block; font-size: 84px; font-weight: 700; letter-spacing: 1px; text-shadow: 0 6px 0 rgba(0, 0, 0, .12); }
.banner__deco { position: relative; z-index: 1; display: flex; gap: 20px; align-items: flex-end; }
.banner__tile { width: 120px; height: 120px; border-radius: 24px; display: grid; place-items: center; font-size: 60px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(2px); animation: nvmFloat 5s ease-in-out infinite; }
.banner__tile--sm { width: 80px; height: 80px; font-size: 38px; border-radius: 18px; animation-delay: -2s; }
.banner--blog .banner__tile, .banner--contact .banner__tile { background: #fff; border-color: #cfe0fb; box-shadow: 0 10px 30px rgba(13, 95, 214, .12); }

.page-sec { padding: 40px 0 70px; }
.page-sec--flush { padding-bottom: 0; }
.page-sec__table { margin-top: 40px; }
.page-sec__content { margin-top: 40px; }
.card-box { background: #fff; border-radius: 12px; padding: 32px; box-shadow: 0 6px 24px rgba(3, 106, 194, .06); }
.entry-content { font-size: 15px; line-height: 1.8; color: #333; }
.entry-content > * + * { margin-top: 1em; }
.entry-content h2 { font-size: 24px; color: var(--nvm-primary-2); font-weight: 600; margin-top: 1.4em; }
.entry-content h3 { font-size: 19px; font-weight: 600; margin-top: 1.2em; }
.entry-content ul { list-style: disc; padding-left: 1.4em; }
.entry-content ol { list-style: decimal; padding-left: 1.4em; }
.entry-content a { color: var(--nvm-primary); text-decoration: underline; }
.center-cta { text-align: center; margin: 40px 0 10px; }

/* domain check page */
.dcheck { padding: 106px 0 130px; }
.dcheck__head { text-align: center; margin-bottom: 26px; }
.dcheck__title { font-size: 30px; line-height: 36px; font-weight: 500; color: var(--nvm-primary); text-transform: uppercase; }
.dcheck__sub { margin-top: 12px; font-size: 14px; }
.dtables .nvm-pt + .nvm-pt { margin-top: 40px; }
.dtables { padding-bottom: 76px; }
.dresults { padding: 26px 0 60px; }

/* benefits */
.benefits { padding: 10px 0 96px; }
.benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.benefit { padding: 30px 32px 34px; border-radius: 8px; background: #fff; text-align: center; transition: transform .25s, box-shadow .25s; }
.benefit:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -14px rgba(3, 106, 194, .3); }
.benefit__ico { display: inline-grid; place-items: center; width: 110px; height: 110px; border-radius: 28px; font-size: 54px; color: #1d77d6; background: linear-gradient(160deg, #eaf4ff, #d6e9ff); }
.benefit h3 { margin: 22px 0 14px; font-size: 20px; font-weight: 400; color: #111; }
.benefit p { font-size: 14px; line-height: 24px; color: #111; }

/* FAQ */
.faq { position: relative; overflow: hidden; padding: 56px 0 76px; background: linear-gradient(180deg, #e1ecfd 0%, #e4eefd 100%); }
.faq__orb { position: absolute; border-radius: 50%; pointer-events: none; }
.faq__orb--1 { left: 192px; top: -100px; width: 268px; height: 268px; background: linear-gradient(180deg, #ff8a8a, #ff5fa8); opacity: .9; }
.faq__orb--2 { left: 172px; top: 310px; width: 74px; height: 74px; background: linear-gradient(90deg, #00c6ff, #8f9bff); }
.faq__orb--3 { right: -60px; top: 256px; width: 120px; height: 120px; background: linear-gradient(90deg, #f472b6, #8b9cff); }
.faq__in { position: relative; max-width: 950px; margin: 0 auto; padding: 0 16px; }
.faq__head { display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: start; margin-bottom: 44px; }
.faq__slogan { display: flex; align-items: center; gap: 12px; }
.faq__slogan i { width: 40px; height: 30px; background: conic-gradient(from 90deg, #c8102e 25%, #fff0 0 50%, #ff6b6b 0 75%, #2b4cc8 0); background-size: 50% 50%; border-radius: 2px; }
.faq__title { font-size: 40px; line-height: 60px; font-weight: 600; color: var(--nvm-primary); }
.faq__desc { margin-top: 42px; font-size: 15px; line-height: 30px; color: #444; }
.faq__list { display: grid; gap: 16px; }
.faq-item { background: #fff; border-radius: 8px; }
.faq-item summary { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 0 22px 0 16px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; color: #111; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > i:first-child { color: var(--nvm-primary); font-size: 22px; }
.faq-item summary span { flex: 1; }
.faq-item__arrow { font-size: 22px; transition: transform .25s; }
.faq-item[open] .faq-item__arrow { transform: rotate(90deg); }
.faq-item__a { padding: 0 22px 22px 48px; font-size: 15px; line-height: 26px; color: #444; }

/* contact */
.contact-box { max-width: 1004px; margin: 0 auto; display: grid; grid-template-columns: 460px 1fr; gap: 20px; padding: 32px; border-radius: 16px; background: #fff; }
.contact-box__info { padding: 16px; border: 1px solid #d9dee5; border-radius: 4px; font-size: 14px; line-height: 21px; color: #555; }
.contact-box__info p { margin-top: 14px; }
.contact-box__info a { color: #3498db; font-size: 16px; }
.contact-box__company { display: block; font-size: 20px; line-height: 30px; font-weight: 700; color: var(--nvm-primary-2); text-transform: uppercase; }
.contact-box__map { margin-top: 18px; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #eef2f7; }
.contact-box__map iframe { width: 100%; height: 100%; border: 0; }
.lead-form { display: grid; gap: 12px; }
.lead-form input, .lead-form select, .lead-form textarea { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; font-size: 14px; line-height: 20px; outline: none; }
.lead-form input::placeholder, .lead-form textarea::placeholder { font-style: italic; color: #666; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--nvm-primary); box-shadow: 0 0 0 3px rgba(5, 105, 194, .12); }
.lead-form input[readonly] { background: #f3f7fd; color: var(--nvm-primary-2); font-weight: 600; }
.lead-form button { justify-self: start; padding: 8px 24px; }
.lead-form__label { font-size: 13px; font-weight: 600; color: #333; margin-bottom: -6px; }
.lead-form__note { font-size: 12px; color: #777; margin-top: -4px; }
.lead-form__hp { position: absolute; left: -9999px; }
.lead-form__msg { padding: 10px 14px; border-radius: 6px; font-size: 14px; }
.lead-form__msg--ok { background: #e9f8ee; color: #136c2e; }
.lead-form__msg--err { background: #fff1f0; color: #b3170f; }

/* blog */
.blog-title { text-align: center; font-size: 34px; line-height: 1.4; font-weight: 400; color: var(--nvm-primary-2); margin-bottom: 40px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post-card { background: #fff; padding: 16px 16px 22px; box-shadow: 0 6px 20px rgba(3, 106, 194, .06); transition: transform .25s; }
.post-card:hover { transform: translateY(-4px); }
.post-card__img { display: block; aspect-ratio: 412 / 276; overflow: hidden; background: #e8f0fb; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post-card:hover .post-card__img img { transform: scale(1.05); }
.post-card__ph { display: grid; place-items: center; height: 100%; font-size: 56px; color: #9cbfe8; }
.post-card__title { margin: 18px 0 8px; font-size: 17px; line-height: 1.5; font-weight: 500; }
.post-card__meta { font-size: 13px; color: #888; }
.post-card__excerpt { margin-top: 8px; font-size: 14px; line-height: 22px; color: #444; }
.post-card__more { display: inline-flex; gap: 4px; margin-top: 12px; color: var(--nvm-red-2); font-size: 14px; }
.pager { margin-top: 40px; text-align: center; }
.pager .page-numbers { display: inline-grid; place-items: center; min-width: 38px; height: 38px; margin: 0 3px; padding: 0 8px; border-radius: 6px; background: #fff; }
.pager .page-numbers.current { background: var(--nvm-primary); color: #fff; }
.single-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.single-post__title { font-size: 30px; line-height: 1.4; font-weight: 600; color: var(--nvm-primary-2); margin-bottom: 10px; }
.single-post__thumb { margin: 20px 0; }
.single-side .card-box + .card-box { margin-top: 20px; }
.single-side__title { font-size: 18px; font-weight: 600; color: var(--nvm-primary-2); margin-bottom: 12px; }
.single-side__list li { padding: 8px 0; border-bottom: 1px dashed #e3e3e3; font-size: 14px; }
.single-side__cta p { margin-bottom: 14px; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1399px) {
	.hero__in { grid-template-columns: minmax(0, 470px) minmax(0, 760px); gap: 30px; }
	.hero__cards { grid-template-columns: repeat(3, 1fr); }
	.about__panel { grid-template-columns: 600px 1fr; gap: 40px; padding: 0 var(--gutter); }
	.about__cards { grid-template-columns: 1fr 1fr; }
	.dprice__row { grid-template-columns: 1fr 1fr; gap: 50px; }
	.adv__row { grid-template-columns: 1fr 1fr; gap: 50px; padding: 0; }
	.adv__grid { grid-template-columns: 1fr 1fr; }
	.slider { max-width: calc(100% - 120px); }
	.process__in { transform: scale(.88); margin-bottom: -130px; }
	.footer-links__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); }
}

@media (max-width: 1199px) {
	.main-nav__list { gap: 4px; }
	.main-nav__list > li > a { font-size: 14px; }
	.topbar__mail { display: none; }
	.hero { padding: 50px 0; }
	.hero__in { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.hero__domain { width: 100%; max-width: 640px; }
	.hero__sys { width: 100%; }
	.webplans__grid { gap: 40px 16px; }
	.web-card { padding: 22px 24px 30px; }
	.web-card__title { font-size: 24px; }
	.process { min-height: 0; }
	.process__in { transform: none; margin: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.process__intro, .process__steps, .pstep, .pstep__body, .process__laptop { position: static; }
	.process__laptop { display: none; }
	.process__intro { width: auto; text-align: center; }
	.process__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
	.pstep { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 12px; padding: 16px; }
	.pstep .cube svg { width: 96px; height: 97px; }
	.pstep__body { width: auto; }
	.pstep__ico { display: none; }
}

@media (max-width: 1023px) {
	:root { --gutter: 16px; }
	.topbar { display: none; }
	.site-header__in { height: 64px; }
	.main-nav, .btn-login { display: none; }
	.nav-toggle {
		display: flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; width: 40px; height: 35px; padding: 0 7px;
		border: 1px solid var(--nvm-primary); border-radius: 4px; background: #fff; cursor: pointer;
	}
	.nav-toggle span { display: block; height: 2px; background: var(--nvm-primary); border-radius: 2px; }
	.phone-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 16px; }
	.phone-bar a { min-width: 0; font-size: 13px; }
	.phone-bar span { overflow: hidden; text-overflow: ellipsis; }
	.about__panel { grid-template-columns: minmax(0, 1fr); }
	.about__panel::before { left: 0; right: 0; }
	.about__cards { max-width: 640px; margin: 0 auto; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dprice__row { grid-template-columns: minmax(0, 1fr); }
	.dprice__row--rev .dprice__art { order: 2; }
	.dprice__art { max-width: 560px; margin: 0 auto; }
	.adv__row { grid-template-columns: minmax(0, 1fr); }
	.adv__art { max-width: 480px; margin: 0 auto; }
	.slider { max-width: 100%; }
	.slider__track { grid-auto-columns: calc((100% - 30px) / 2); }
	.slider__nav { display: none; }
	.webplans__grid, .plan-grid, .benefits__grid, .post-grid { grid-template-columns: 1fr 1fr; }
	.footer-links__grid { grid-template-columns: 1fr 1fr; }
	.footer-col:nth-child(3) { border-left: 0; padding-left: 0; }
	.footer-company__grid { grid-template-columns: 1fr; gap: 20px; }
	.footer-company__brand p { text-align: left; margin-top: 12px; }
	.faq__head { grid-template-columns: 1fr; gap: 10px; }
	.faq__desc { margin-top: 0; }
	.faq__orb--1 { left: -120px; }
	.contact-box { grid-template-columns: 1fr; padding: 20px; }
	.single-layout { grid-template-columns: 1fr; }
	.banner { gap: 24px; height: 220px; }
	.banner__deco { display: none; }
	.banner__big { font-size: 56px; }
	.banner__script { font-size: 44px; }
	.dcheck { padding: 60px 0 80px; }
}

@media (max-width: 767px) {
	.hero { padding: 30px 0 34px; align-items: flex-start; }
	.hero__title { font-size: 28px; }
	.hero__sub { margin: 10px 0 18px; font-size: 15px; }
	.hero__sys-head { grid-template-columns: 1fr; margin-top: 46px; }
	.hero__hex { display: none; }
	.hero__r1 { font-size: 24px; }
	.hero__r2 { font-size: 15px; }
	.hero__btns { flex-direction: column; align-items: center; gap: 14px; }
	.btn-explore { min-width: 243px; height: 48px; }
	.btn-status { min-width: 0; height: 48px; padding: 8px 18px; }
	.hero__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.svc-card { flex-direction: column; height: auto; padding: 20px 10px; text-align: center; gap: 10px; }
	.svc-card__ico { flex-basis: 64px; width: 64px; height: 64px; font-size: 28px; }
	.svc-card__title { font-size: 16px; }
	.svc-card__go { display: none; }
	.phone-bar { grid-template-columns: 1fr 1fr; }
	.about { padding: 30px 0 40px; }
	.about__cards { gap: 14px; }
	.about__col { gap: 14px; }
	.about__col--down { margin-top: 40px; }
	.about-card { height: 190px; padding: 14px; border-radius: 14px; }
	.about-card h3 { font-size: 17px; }
	.about-card__img { width: 60px; height: 60px; }
	.about__title, .adv__text .sec-head__title { font-size: 28px; line-height: 38px; margin-bottom: 16px; }
	.sec-head__title { font-size: 28px; }
	.sec-head__title--xl { font-size: 32px; }
	.sec-head__slogan { margin-bottom: 6px; }
	.dprice { padding: 20px 0 40px; }
	.dprice__row--rev { margin-top: 50px; }
	.tld-tiles { gap: 12px; }
	.tld-tile { height: 50px; padding: 0 12px; font-size: 14px; }
	.hosting--home { padding-top: 40px; }
	.hosting__top { height: 520px; }
	.tabs { gap: 8px; margin: 20px 0 28px; }
	.tabs__btn { padding: 10px 14px; font-size: 13px; }
	.hosting--page .tabs { display: flex; padding: 6px; border-radius: 12px; }
	.slider__track { grid-auto-columns: 86%; gap: 16px; }
	.webplans__grid, .plan-grid, .benefits__grid, .post-grid { grid-template-columns: 1fr; }
	.adv__grid { grid-template-columns: 1fr; gap: 14px; }
	.adv-card { height: 80px; }
	.process__r2 { font-size: 30px; line-height: 40px; }
	.process__steps { grid-template-columns: 1fr; }
	.support { padding: 44px 0; }
	.support__title { font-size: 24px; line-height: 32px; }
	.support__sub { font-size: 16px; }
	.support__phones { gap: 10px 30px; }
	.support__phones a { font-size: 24px; }
	.support__call { font-size: 24px; }
	.support__q, .support__free { font-size: 15px; }
	.footer-links__grid { grid-template-columns: 1fr; }
	.footer-col { padding: 22px 0 10px; }
	.footer-col + .footer-col { border-left: 0; padding-left: 0; border-top: 1px solid #e5e7eb; }
	.banner { height: 160px; }
	.banner__big { font-size: 38px; }
	.banner__script { font-size: 30px; }
	.page-head__title { font-size: 24px; line-height: 32px; }
	.dcheck__title { font-size: 24px; }
	.faq__title { font-size: 28px; line-height: 38px; }
	.faq-item summary { font-size: 15px; min-height: 60px; }
	.card-box { padding: 20px; }
	.blog-title { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* tinh chỉnh sau đối chiếu */
.bg-hostweb .webplans { padding-top: 0; }
/* trang Hosting: lưới 3 cột toàn chiều rộng (như nasani.vn/bang-gia-hosting.html), không dùng slider */
.hosting--page .slider { max-width: none; }
.hosting--page .slider__track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; overflow: visible; }
.hosting--page .slider__nav { display: none; }
@media (max-width: 1023px) { .hosting--page .slider__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .hosting--page .slider__track { grid-template-columns: minmax(0, 1fr); } }

/* ---------- logo chữ NamVietMedia (kiểu Nasani) + vệt sáng chạy qua lại ---------- */
.site-logo--text { display: block; line-height: 0; }
.nvm-logo { display: block; width: auto; height: 52px; overflow: visible; }
.nvm-logo__word { font-family: "Krona One", "Poppins", sans-serif; font-size: 27px; }
.nvm-logo__tag { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: .2px; }
.nvm-logo__red { fill: #e30613; }
.nvm-logo__blue { fill: #1d5fc4; }
.nvm-logo__rule { stroke: #1d5fc4; stroke-width: 1.4; }
.nvm-logo__shine { transform-box: view-box; animation: nvmShine 3.2s ease-in-out infinite alternate; }
@keyframes nvmShine {
	from { transform: translateX(-60px) skewX(-22deg); }
	to   { transform: translateX(290px) skewX(-22deg); }
}
.site-logo--text:hover .nvm-logo__shine { animation-duration: 1.2s; }
/* footer nền xanh: chữ đỏ viền trắng như logo footer Nasani */
.footer-company__logo { padding: 0; background: none; border-radius: 0; }
.footer-logo .nvm-logo { height: 62px; }
.footer-logo .nvm-logo__word { stroke: #fff; stroke-width: 2.4px; paint-order: stroke; stroke-linejoin: round; }
.footer-logo .nvm-logo__word .nvm-logo__blue { fill: #e30613; }
.footer-logo .nvm-logo__tag .nvm-logo__blue { fill: #fff; }
.footer-logo .nvm-logo__rule { stroke: #fff; }
.mnav__logo .nvm-logo { height: 46px; }
@media (max-width: 1199px) { .site-header .nvm-logo { height: 46px; } }
@media (max-width: 1023px) { .site-header .nvm-logo { height: 44px; } }
@media (min-width: 1024px) and (max-width: 1199px) {
	.site-header .nvm-logo { height: 40px; }
	.btn-login { display: none; }
	.main-nav__list { gap: 0; }
	.main-nav__list > li > a { padding: 4px 6px; font-size: 13.5px; white-space: nowrap; }
}

/* =========================================================================
   Trang chủ – bố trí riêng NamVietMedia (v2)
   ========================================================================= */

/* Hero v2: trái thông điệp + tra cứu, phải lưới dịch vụ 2 cột */
.hero--v2 { min-height: 660px; }
.hero2 { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 60px; align-items: center; padding-top: 50px; padding-bottom: 50px; }
.hero2__eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; background: #fff; color: var(--nvm-crimson); font-size: 13px; font-weight: 600; box-shadow: 0 4px 14px rgba(3, 106, 194, .1); }
.hero2__title { margin: 18px 0 14px; font-size: 46px; line-height: 1.22; font-weight: 700; color: #0b2a5c; }
.hero2__title span { color: var(--nvm-primary); }
.hero2__lead { max-width: 560px; font-size: 16px; line-height: 1.7; color: #3d4a5c; }
.hero2__search { margin-top: 28px; max-width: 620px; }
.hero2__ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 14px; color: #33415c; }
.hero2__ticks i { color: #1aa34a; margin-right: 4px; }
.hero2__side { position: relative; }
.hero2__badge { position: absolute; right: -30px; top: -70px; width: 130px; opacity: .95; }
.hero2__badge svg { width: 130px; height: auto; animation: nvmFloat 4s ease-in-out infinite; }
.hero2__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.svc-card--v2 { height: 104px; padding: 18px 20px; }
.svc-card--v2 .svc-card__ico { flex-basis: 62px; height: 62px; font-size: 28px; }
.svc-card--v2 .svc-card__desc i { vertical-align: -2px; transition: transform .2s; }
.svc-card--v2:hover .svc-card__desc i { transform: translateX(4px); }
.svc-card--v2:nth-child(even) { transform: translateY(26px); }
.svc-card--v2:nth-child(even):hover { transform: translateY(22px); }
.hero2__status { margin-top: 48px; width: 100%; height: 60px; }

/* About lật: chữ trái, thẻ phải */
.about--flip .about__panel { grid-template-columns: 627px 627px; }
.about--flip .about__cards { order: 2; }
.about--flip .about__text { order: 1; }
.about--flip .about__panel::before { left: 75px; right: 150px; }

/* Segmented tabs dùng chung */
.seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 99px; background: #fff; box-shadow: 0 6px 18px rgba(3, 106, 194, .1); }
.seg__btn { border: 0; background: transparent; padding: 10px 20px; border-radius: 99px; font-size: 14px; font-weight: 600; color: #33415c; cursor: pointer; transition: background .2s, color .2s; }
.seg__btn.is-active { background: var(--nvm-primary); color: #fff; }

/* Gói thiết kế (trang chủ) */
.webplans--home { padding: 80px 0 70px; }
.webplans__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 40px; }
.webplans__lead { margin-top: 8px; max-width: 640px; font-size: 15px; line-height: 1.7; color: var(--nvm-muted); }
.web-card { position: relative; }
.web-card--hot { box-shadow: 0 26px 50px -18px rgba(3, 106, 194, .45); outline: 2px solid var(--c); }
.web-card__flag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 99px; background: var(--c); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }

/* Timeline quy trình */
.timeline { padding: 70px 0 80px; background: #fff; }
.timeline .sec-head { margin-bottom: 50px; }
.timeline__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; counter-reset: t; }
.timeline__list::before { content: ""; position: absolute; left: 10%; right: 10%; top: 38px; height: 3px; background: repeating-linear-gradient(90deg, #c9dbf5 0 10px, transparent 10px 18px); }
.tstep { position: relative; text-align: center; padding: 0 6px; }
.tstep__ico { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: #fff; border: 3px solid var(--c); color: var(--c); font-size: 34px; box-shadow: 0 10px 24px -10px var(--c); transition: transform .25s; }
.tstep:hover .tstep__ico { transform: translateY(-4px); }
.tstep__no { position: absolute; top: -6px; left: calc(50% + 22px); z-index: 2; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 99px; background: var(--c); color: #fff; font-size: 13px; font-weight: 700; line-height: 30px; }
.tstep__name { margin: 18px 0 8px; font-size: 16px; font-weight: 600; text-transform: uppercase; color: #0b2a5c; }
.tstep__desc { font-size: 14px; line-height: 1.6; color: #555; }

/* Bảng giá tên miền gộp */
.dprice2 { padding: 70px 0 80px; }
.dprice2__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.dprice2__art svg { width: 100%; height: auto; }
.dprice2 .seg { margin-top: 22px; }
.dprice2 .dprice__desc { margin: 20px 0 22px; }

/* Ưu điểm lật: chữ trái, ảnh phải */
.adv--flip .adv__art { order: 2; }
.adv--flip .adv__text { order: 1; }
.adv--flip { background: linear-gradient(180deg, #f0f5fc, #e7effc); }

/* CTA dải xanh */
.cta2 { padding: 70px 0; background: linear-gradient(110deg, #0569c2 0%, #0a7fe0 55%, #1d9bf0 100%); color: #fff; position: relative; overflow: hidden; }
.cta2::before { content: ""; position: absolute; right: -120px; top: -160px; width: 460px; height: 460px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.cta2__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.cta2__title { font-size: 36px; line-height: 1.3; font-weight: 700; }
.cta2__sub { margin: 14px 0 22px; font-size: 17px; line-height: 1.6; opacity: .92; }
.cta2__phones { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.cta2__phones a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 99px; background: #fff; color: #c5122a; font-size: 24px; font-weight: 700; }
.cta2__phones a:hover { color: #c5122a; transform: translateY(-2px); }
.cta2__card { padding: 30px; border-radius: 16px; background: #fff; color: #222; text-align: center; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .4); }
.cta2__ico { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e7f1fd; color: var(--nvm-primary); font-size: 32px; }
.cta2__card p { margin: 14px 0 18px; font-size: 15px; line-height: 1.6; color: #444; }
.cta2__zalo { display: block; margin-top: 14px; color: var(--nvm-primary); font-size: 14px; font-weight: 600; }

@media (max-width: 1399px) {
	.about--flip .about__panel { grid-template-columns: minmax(0, 1fr) 600px; }
	.about--flip .about__panel::before { left: 0; right: 0; }
	.hero2__badge { right: 0; }
}
@media (max-width: 1199px) {
	.hero2 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.hero2__main { text-align: center; }
	.hero2__lead, .hero2__search { margin-left: auto; margin-right: auto; }
	.hero2__ticks { justify-content: center; }
	.hero2__badge { display: none; }
	.timeline__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
	.timeline__list::before { display: none; }
}
@media (max-width: 1023px) {
	.about--flip .about__panel { grid-template-columns: minmax(0, 1fr); }
	.about--flip .about__cards { order: 1; }
	.webplans__head { flex-direction: column; align-items: flex-start; }
	.dprice2__row, .cta2__in { grid-template-columns: minmax(0, 1fr); }
	.dprice2__art { order: 2; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 767px) {
	.hero2 { padding-top: 30px; padding-bottom: 34px; }
	.hero2__title { font-size: 30px; }
	.hero2__lead { font-size: 15px; }
	.hero2__grid { gap: 12px; }
	.svc-card--v2 { height: auto; flex-direction: column; text-align: center; padding: 16px 8px; gap: 8px; }
	.svc-card--v2:nth-child(even), .svc-card--v2:nth-child(even):hover { transform: none; }
	.hero2__status { margin-top: 18px; height: 50px; }
	.seg { display: flex; width: 100%; overflow-x: auto; }
	.seg__btn { flex: 1 0 auto; padding: 9px 14px; font-size: 13px; }
	.webplans--home { padding: 50px 0; }
	.timeline__list { grid-template-columns: minmax(0, 1fr); }
	.tstep { display: grid; grid-template-columns: 70px 1fr; text-align: left; column-gap: 16px; align-items: start; }
	.tstep__ico { grid-row: span 2; width: 64px; height: 64px; font-size: 28px; }
	.tstep__no { left: 44px; }
	.tstep__name { margin: 6px 0 4px; }
	.cta2 { padding: 50px 0; }
	.cta2__title { font-size: 26px; }
	.cta2__phones a { font-size: 20px; }
}
/* tinh chỉnh v2 */
.hero--v2 { min-height: 600px; }

/* =========================================================================
   Chuẩn hóa section trang chủ: cùng mép trái/phải với .wrap, cùng nhịp dọc
   ========================================================================= */
:root { --sec-y: 80px; }
.about, .webplans--home, .timeline, .hosting--home, .dprice2, .adv, .cta2 { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.hosting--home .slider__track { padding-bottom: 0; }
.about__panel { max-width: var(--wrap); padding-left: var(--gutter); padding-right: var(--gutter); }
.about--flip .about__panel::before { display: none; }
.about--flip { background: linear-gradient(90deg, rgba(230, 238, 254, 0) 0%, #e6eefe 55%, #e6eefe 100%); }
.adv__row { padding-left: var(--gutter); padding-right: var(--gutter); }
.sec-head__line { margin-bottom: 4px; }
.webplans__head, .timeline .sec-head { margin-bottom: 44px; }
.dprice2 .sec-head__title, .webplans--home .sec-head__title, .adv__text .sec-head__title, .timeline .sec-head__title { font-size: 42px; line-height: 1.3; }
.about__title { font-size: 42px; line-height: 1.3; margin-bottom: 24px; }
.cta2__title { font-size: 34px; }
@media (max-width: 1399px) {
	.about--flip .about__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 40px; }
}
@media (max-width: 1023px) {
	:root { --sec-y: 56px; }
	.about--flip .about__panel { grid-template-columns: minmax(0, 1fr); }
	.about--flip { background: #e6eefe; }
}
@media (max-width: 767px) {
	:root { --sec-y: 44px; }
	.hero2__title br { display: none; }
	.dprice2 .sec-head__title, .webplans--home .sec-head__title, .adv__text .sec-head__title, .timeline .sec-head__title, .about__title, .sec-head__title--xl { font-size: 26px; line-height: 1.3; }
	.cta2__title { font-size: 24px; }
	.webplans__head, .timeline .sec-head { margin-bottom: 26px; }
	.web-card { padding: 22px 18px 26px; }
	.web-card__list li { font-size: 15px; padding: 6px 0; }
	.host-card { padding: 10px 14px 16px; }
	.cta2__phones a { width: 100%; justify-content: center; }
}

/* =========================================================================
   Nút chuyển đổi Zalo / Gọi điện + thanh tab kiểu app trên mobile
   ========================================================================= */
.qa-float { position: fixed; right: 22px; bottom: 82px; z-index: 95; display: flex; flex-direction: column; gap: 14px; }
.qa-float__btn { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #fff; font-size: 26px; box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .35); transition: transform .2s; }
.qa-float__btn:hover { color: #fff; transform: scale(1.08); }
.qa-float__btn--zalo { background: #0068ff; }
.qa-float__btn--call { background: #e3171f; animation: qaShake 2.4s infinite; }
.qa-float__btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: .45; animation: qaRing 1.8s infinite; z-index: -1; }
.qa-float__label {
	position: absolute; right: 68px; top: 50%; transform: translateY(-50%) translateX(8px); padding: 7px 14px; border-radius: 99px; white-space: nowrap;
	background: #fff; color: #222; font-size: 14px; font-weight: 600; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); opacity: 0; pointer-events: none; transition: .2s;
}
.qa-float__btn:hover .qa-float__label, .qa-float__btn:focus-visible .qa-float__label { opacity: 1; transform: translateY(-50%); }
@keyframes qaRing { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes qaShake { 0%, 60%, 100% { transform: rotate(0); } 65% { transform: rotate(-14deg); } 72% { transform: rotate(12deg); } 79% { transform: rotate(-8deg); } 86% { transform: rotate(5deg); } }

.appbar { display: none; }

@media (max-width: 1023px) {
	.qa-float { display: none; }
	.phone-bar { display: none; }
	body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
	.appbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
		height: calc(64px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
		background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px);
		border-top: 1px solid #e6ecf5; box-shadow: 0 -6px 24px rgba(15, 40, 90, .08); border-radius: 18px 18px 0 0;
	}
	.appbar a { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 64px; padding-bottom: 9px; color: #5b6576; font-size: 11px; font-weight: 500; -webkit-tap-highlight-color: transparent; }
	.appbar a:active { transform: scale(.94); }
	.appbar__item i { font-size: 23px; line-height: 1; }
	.appbar__item svg { width: 24px; height: 24px; }
	.appbar__item.is-active { color: var(--nvm-primary); }
	.appbar__item.is-active i::after { content: ""; display: block; width: 4px; height: 4px; margin: 3px auto 0; border-radius: 50%; background: var(--nvm-primary); }
	.appbar__item--zalo { color: #0068ff !important; }
	.appbar__call { color: #e3171f !important; font-weight: 700 !important; }
	.appbar__call-btn {
		position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-top: -26px; margin-bottom: 2px; border-radius: 50%;
		background: linear-gradient(160deg, #ff4b4b, #d40f17); color: #fff; font-size: 26px; border: 4px solid #fff; box-shadow: 0 8px 20px -6px rgba(212, 15, 23, .7);
	}
	.appbar__call-btn i { animation: qaShake 2.4s infinite; }
	.appbar__call-btn::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #e3171f; animation: qaRing 1.8s infinite; }
	/* cảm giác app: header gọn, có bóng, các khối bo góc */
	.site-header { box-shadow: 0 2px 14px rgba(15, 40, 90, .08); }
	.svc-card, .tld-tile, .adv-card, .web-card, .host-card, .benefit, .post-card, .faq-item, .nvm-dr-card, .card-box { border-radius: 16px; }
	.nvm-ds--hero .nvm-ds-form { border-radius: 14px; }
	.nvm-ds--hero .nvm-ds-submit { border-radius: 0 14px 14px 0; }
}
.hero2__title span { display: block; }
.zalo-t { fill: #0068ff; }
.appbar .zalo-t { fill: #fff; font-size: 12px; }
@media (max-width: 767px) { .hero2__title span { display: inline; } }
@media (max-width: 767px) {
	/* gói thiết kế trên trang chủ: vuốt ngang như app */
	.webplans--home .webplans__grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 18px 2px 10px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding: 0 var(--gutter); }
	.webplans--home .webplans__grid::-webkit-scrollbar { display: none; }
	.webplans--home .web-card { scroll-snap-align: start; }
}