/* =============================================================================
   IT One — dựng theo itonevietnam.com

   Hai màu thương hiệu đến từ `profile.colors` (layout đặt --it-primary và
   --it-secondary trong một khối <style> ở <head>), nên web con đổi màu ở Cài đặt
   là đổi được. Hai màu NHẤN dưới đây khai cứng: profile.colors chỉ mang primary
   và secondary, nên không có ô nào cho chúng.

   Không Bootstrap, không FontAwesome, không jQuery, không Swiper — bản gốc nạp cả
   bốn từ CDN, mà CSP của trang công khai chặn im lặng.
   ========================================================================== */

:root {
    --it-primary: #00879e;
    --it-secondary: #13b0e7;

    --it-hot: #ffd503;          /* dải hotline ở đầu trang */
    --it-hot-ink: #1c1c1c;
    --it-cta: #f35f0b;          /* nút đăng ký / gửi biểu mẫu */

    --it-ink: #2b2b2d;
    --it-muted: #6b6b70;
    --it-line: #e1e1e1;
    --it-bg-soft: #f1f2f2;
    --it-bg-soft2: #ebebeb;

    --it-wrap: 1180px;
    --it-radius: 6px;
    --it-shadow: 0 1px 3px rgba(0, 0, 0, .09), 0 6px 18px rgba(0, 0, 0, .05);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--it-ink);
    background: #fff;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--it-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--it-wrap); margin: 0 auto; padding: 0 16px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--it-primary); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 0; }

/* -- Chữ chung -------------------------------------------------------------- */

.h1 { font-size: 27px; line-height: 1.3; margin: 0 0 14px; color: var(--it-ink); }
.h2 { font-size: 22px; line-height: 1.35; margin: 0 0 18px; color: var(--it-primary); }
.h2--center { text-align: center; }
.h2--center::after {
    content: ""; display: block; width: 58px; height: 3px;
    background: var(--it-hot); margin: 10px auto 0;
}
.lead { color: var(--it-muted); margin: 0 0 18px; }
.empty { color: var(--it-muted); padding: 24px 0; }

section { padding: 40px 0; }

/* -- Nút -------------------------------------------------------------------- */

.btn {
    display: inline-block; padding: 11px 26px; border: 0; border-radius: var(--it-radius);
    font-size: 15px; font-weight: 600; cursor: pointer; text-align: center;
    font-family: inherit; line-height: 1.4;
}
.btn:hover { text-decoration: none; filter: brightness(1.07); }
.btn--primary { background: var(--it-primary); color: #fff; }
.btn--accent { background: var(--it-cta); color: #fff; }
.btn--block { display: block; width: 100%; }

/* -- Đầu trang -------------------------------------------------------------- */

.head { padding: 14px 0; border-bottom: 1px solid var(--it-line); }
.head__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.head__brand { display: block; }
.head__brand:hover { text-decoration: none; }
.head__logo { max-height: 62px; width: auto; }
.head__name { font-size: 22px; font-weight: 700; color: var(--it-primary); }
.head__side { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.head__tagline { margin: 0; color: var(--it-muted); font-size: 14px; max-width: 420px; }
.head__phones { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }

.head__hot {
    display: inline-block; background: var(--it-hot); color: var(--it-hot-ink);
    font-weight: 700; padding: 7px 16px; border-radius: var(--it-radius); font-size: 16px;
}
.head__hot:hover { text-decoration: none; }
.head__hot--alt { background: var(--it-secondary); color: #fff; }

/* -- Điều hướng ------------------------------------------------------------- */

.nav { background: var(--it-primary); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.nav__item { position: relative; }

/* Đệm ngang 11px, không 15px. Chín mục ở 15px chiếm 918px, cộng ô tìm kiếm 224px và
   khoảng cách 14px là 1156 — trong khi `.wrap` chỉ cho 1148. Thiếu ĐÚNG 8px, và hệ
   quả là ô tìm kiếm rớt xuống hàng riêng. Bớt 4px mỗi bên trả lại 72px. */
.nav__link {
    display: block; color: #fff; padding: 13px 11px; font-size: 14.5px;
    font-weight: 600; text-transform: uppercase; letter-spacing: .2px;
}
.nav__link:hover { background: rgba(0, 0, 0, .14); text-decoration: none; }

.nav__item--has > .nav__link::after {
    content: "▾"; margin-left: 6px; font-size: 11px; opacity: .85;
}

/* Thả xuống bằng CSS thuần — theme không được chèn <script> inline. */
.nav__sub {
    list-style: none; margin: 0; padding: 6px 0; position: absolute;
    top: 100%; left: 0; min-width: 254px; background: #fff;
    box-shadow: var(--it-shadow); border-top: 3px solid var(--it-hot);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .14s ease, transform .14s ease; z-index: 40;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: none; }

.nav__sub a { display: block; padding: 9px 16px; color: var(--it-ink); font-size: 14px; }
.nav__sub a:hover { background: var(--it-bg-soft); color: var(--it-primary); text-decoration: none; }

/* Nút mở menu. `hidden` phải thắng `display: flex`, nên nó cần quy tắc riêng —
   thiếu dòng đó thì không có JS vẫn thấy nút và bấm không ra gì. */
.nav__burger {
    display: none; align-items: center; gap: 8px;
    background: rgba(0, 0, 0, .16); color: #fff; border: 0;
    font: inherit; font-weight: 600; text-transform: uppercase;
    padding: 11px 16px; cursor: pointer; font-size: 14px;
}
.nav__burger[hidden] { display: none !important; }
.nav__burger:hover { background: rgba(0, 0, 0, .26); }

.nav__search { display: flex; align-items: center; }
/* `flex` + `min-width: 0`, KHÔNG `width: 100%`. Một flex item khai width:100% tính
   theo container rồi vẫn cộng thêm bề rộng cái nút bên cạnh — tổng vượt container và
   nút bị đẩy ra ngoài màn hình. */
.nav__search input {
    border: 0; padding: 8px 12px; border-radius: var(--it-radius) 0 0 var(--it-radius);
    font-size: 14px; font-family: inherit; flex: 1 1 170px; min-width: 0;
}
.nav__search button {
    border: 0; background: var(--it-hot); color: var(--it-hot-ink);
    padding: 9px 13px; border-radius: 0 var(--it-radius) var(--it-radius) 0;
    cursor: pointer; font-size: 15px; display: flex; align-items: center;
}

/* -- Slider ----------------------------------------------------------------- */

/* `.hero` là một <section>, nên nó ăn luôn `section { padding: 40px 0 }` và nền
   ảnh thành hai dải trắng trên dưới. Khai padding: 0 tường minh. */
.hero { padding: 0; position: relative; background: #000; }

.hero__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.hero__track::-webkit-scrollbar { display: none; }

/* Tỉ lệ CỐ ĐỊNH trên chính ô trượt, không để ảnh tự quyết định chiều cao. Ảnh của
   web con không cùng tỉ lệ nhau — chỉ cần một tấm cao hơn là khung trượt cao bằng
   tấm đó, và mọi tấm còn lại để lại một dải NỀN ĐEN bên dưới. Đã gặp thật ở lượt
   dựng đầu với bộ ảnh của itonevietnam.com. */
.hero__slide {
    flex: 0 0 100%; scroll-snap-align: start; position: relative;
    aspect-ratio: 1400 / 520; overflow: hidden;
}
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

.hero__cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 22px 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .62));
    color: #fff; text-align: center;
}
.hero__title { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.hero__sub { margin: 0 0 10px; font-size: 15px; opacity: .93; }

/* Nút trước/sau. Khai `hidden` sẵn trong HTML, theme.js bỏ cờ đó đi — `[hidden]`
   phải thắng `display: flex` nên nó cần một quy tắc riêng, nếu không nút vẫn hiện
   khi JS bị chặn và bấm vào không có gì xảy ra. */
.hero__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .42); color: #fff; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 5; transition: background .15s ease;
}
.hero__nav[hidden] { display: none; }
.hero__nav:hover { background: var(--it-primary); }
.hero__nav:focus-visible { outline: 3px solid var(--it-hot); outline-offset: 2px; }
.hero__nav--prev { left: 14px; }
.hero__nav--next { right: 14px; }

.hero__dots {
    position: absolute; left: 0; right: 0; bottom: 12px;
    display: flex; justify-content: center; gap: 8px;
}
.hero__dots a {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255, 255, 255, .55); border: 1px solid rgba(0, 0, 0, .18);
}
.hero__dots a:hover { background: #fff; }

/* -- Dải bốn ô trên nền xanh ------------------------------------------------ */

.strip { background: var(--it-primary); color: #fff; }
.strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.strip__item { text-align: center; }
.strip__value { margin: 0 0 4px; font-size: 19px; font-weight: 700; text-transform: uppercase; }
.strip__label { margin: 0; font-size: 14px; opacity: .93; }
.strip__sub { margin: 4px 0 0; font-size: 13px; opacity: .8; }

/* -- Khối giới thiệu / vì sao ----------------------------------------------- */

.intro__grid, .why__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center;
}
.why { background: var(--it-bg-soft2); }
.intro__body, .why__body { color: var(--it-muted); margin: 0 0 18px; white-space: pre-line; }
.intro__media img, .why__media img { border-radius: var(--it-radius); width: 100%; }

/* Khối giới thiệu: bản gốc đặt ảnh nổi bên PHẢI trên một nền hoạ tiết nhạt. Nền ở
   đây là một dải chuyển màu dựng từ chính hai màu thương hiệu — hoạ tiết của bản
   gốc là một tệp ảnh của theme CŨ, mà kéo nó về là mang theo tài nguyên của một
   giao diện khác vào gói này. */
.intro {
    background:
        radial-gradient(circle at 88% 18%, rgba(19, 176, 231, .16), transparent 46%),
        radial-gradient(circle at 6% 88%, rgba(0, 135, 158, .12), transparent 42%),
        #fff;
}
.intro__media { position: relative; }
.intro__media img {
    width: 88%; margin-left: auto; display: block;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .13);
}
/* Khối màu sau ảnh, lệch sang phải — giữ cảm giác "ảnh nổi" của bản gốc mà không
   cần thêm một tệp ảnh nào. */
.intro__media::before {
    content: ""; position: absolute; z-index: -1;
    right: -10px; top: -14px; width: 62%; height: 74%;
    border-radius: var(--it-radius); background: var(--it-secondary); opacity: .17;
}

/* -- Dịch vụ nổi bật -------------------------------------------------------- */

.svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc__card { background: #fff; border: 1px solid var(--it-line); border-radius: var(--it-radius); overflow: hidden; }
.svc__card a { display: block; color: inherit; }
.svc__card a:hover { text-decoration: none; }
.svc__card:hover { box-shadow: var(--it-shadow); }
.svc__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--it-bg-soft); }
.svc__media img { width: 100%; height: 100%; object-fit: cover; }
.svc__title {
    display: block; padding: 13px 15px; font-weight: 600; font-size: 15.5px;
    color: var(--it-primary); text-align: center;
}

/* -- Chuyên mục ------------------------------------------------------------- */

.cats { background: var(--it-bg-soft); }
.cats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cats__card {
    display: block; background: #fff; border-radius: var(--it-radius);
    overflow: hidden; text-align: center; border: 1px solid var(--it-line);
}
.cats__card:hover { text-decoration: none; box-shadow: var(--it-shadow); }
.cats__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--it-bg-soft2); }
.cats__media img { width: 100%; height: 100%; object-fit: cover; }
.cats__media--blank {
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; font-weight: 700; color: var(--it-primary);
}
.cats__name { display: block; padding: 11px 12px 2px; font-weight: 600; color: var(--it-ink); }
.cats__count { display: block; padding: 0 12px 12px; font-size: 13px; color: var(--it-muted); }

/* -- Nhận xét --------------------------------------------------------------- */

.rev__track {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px;
}
.rev__card {
    margin: 0; background: #fff; border: 1px solid var(--it-line);
    border-radius: var(--it-radius); padding: 22px; display: flex; flex-direction: column; gap: 14px;
}
.rev__text {
    margin: 0; font-style: italic; color: var(--it-ink); flex: 1;
    border-left: 3px solid var(--it-hot); padding-left: 14px;
}
.rev__who { display: flex; align-items: center; gap: 12px; }
.rev__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.rev__avatar--blank {
    display: flex; align-items: center; justify-content: center;
    background: var(--it-primary); color: #fff; font-weight: 700; font-size: 20px;
}
.rev__name { display: block; color: var(--it-primary); }
.rev__role { display: block; font-size: 13px; color: var(--it-muted); }

/* -- Thẻ bài viết ----------------------------------------------------------- */

.news { background: var(--it-bg-soft); }
.news__grid, .list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 20px;
}
.news__more { text-align: center; margin: 28px 0 0; }

.card { background: #fff; border: 1px solid var(--it-line); border-radius: var(--it-radius); overflow: hidden; }
.card:hover { box-shadow: var(--it-shadow); }
.card__link { display: block; color: inherit; }
.card__link:hover { text-decoration: none; }
.card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--it-bg-soft2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media--blank {
    display: flex; align-items: center; justify-content: center;
    font-size: 44px; font-weight: 700; color: var(--it-primary);
}
.card__body { display: block; padding: 14px 15px 18px; }
.card__title { display: block; font-weight: 600; color: var(--it-ink); line-height: 1.4; }
.card__link:hover .card__title { color: var(--it-primary); }
.card__date { display: block; font-size: 12.5px; color: var(--it-muted); margin: 5px 0 6px; }
.card__excerpt { display: block; font-size: 14px; color: var(--it-muted); }

/* -- Dự án (logo đối tác) --------------------------------------------------- */

.proj__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: center; }
.proj__cell {
    background: #fff; border: 1px solid var(--it-line); border-radius: var(--it-radius);
    padding: 14px; display: flex; align-items: center; justify-content: center; min-height: 92px;
}
.proj__cell img { max-height: 62px; width: auto; object-fit: contain; }

/* -- Biểu mẫu đăng ký ------------------------------------------------------- */

/* Căn GIỮA cả tiêu đề lẫn biểu mẫu, không chia hai cột: khối này là lời mời cuối
   trang, và một biểu mẫu lệch sang phải kéo mắt ra khỏi chính cái nút cần bấm. */
.reg { background: var(--it-primary); color: #fff; }
.reg__inner { max-width: 660px; margin: 0 auto; text-align: center; }
.reg__intro .h2 { color: #fff; }
.reg__intro .h2::after { background: var(--it-hot); }
.reg__lead { margin: 0 auto 12px; opacity: .93; max-width: 520px; }
.reg__hot { margin: 0 0 24px; font-size: 17px; font-weight: 600; }
.reg__hot a { color: var(--it-hot); }

.reg__form {
    background: #fff; border-radius: var(--it-radius); padding: 24px;
    box-shadow: var(--it-shadow); text-align: left;
}
.reg__row { margin: 0 0 12px; }
.reg__row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reg__form input, .reg__form textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--it-line);
    border-radius: var(--it-radius); font: inherit; color: var(--it-ink); background: #fff;
}
.reg__form input:focus, .reg__form textarea:focus {
    outline: 2px solid var(--it-secondary); outline-offset: 1px; border-color: var(--it-secondary);
}
.reg__form textarea { resize: vertical; }

/* -- Trang trong ------------------------------------------------------------ */

.crumb { background: var(--it-bg-soft); border-bottom: 1px solid var(--it-line); font-size: 13.5px; }
.crumb .wrap { padding-top: 10px; padding-bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumb span[aria-hidden] { color: var(--it-muted); }

.page__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 34px; padding-top: 32px; padding-bottom: 44px; }
.page__main { min-width: 0; }

.art__meta { margin: 0 0 16px; font-size: 13.5px; color: var(--it-muted); display: flex; gap: 6px; flex-wrap: wrap; }
.art__cover { margin: 0 0 18px; }
.art__cover img { border-radius: var(--it-radius); width: 100%; }
.art__tags { margin: 22px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.tag { background: var(--it-bg-soft); padding: 5px 12px; border-radius: 999px; font-size: 13px; color: var(--it-primary); }
.rel { padding: 34px 0 0; }

/* Nội dung do người quản trị soạn — đã qua HtmlContentSanitizer lúc LƯU. */
.prose { font-size: 15.5px; }
.prose img { border-radius: var(--it-radius); margin: 14px 0; }
.prose h2 { font-size: 20px; color: var(--it-primary); margin: 26px 0 10px; }
.prose h3 { font-size: 17.5px; margin: 22px 0 8px; }
.prose p { margin: 0 0 13px; }
.prose ul, .prose ol { margin: 0 0 13px; padding-left: 22px; }
.prose li { margin: 0 0 5px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.prose th, .prose td { border: 1px solid var(--it-line); padding: 8px 11px; text-align: left; }
.prose th { background: var(--it-bg-soft); }
.prose blockquote {
    margin: 0 0 16px; padding: 10px 18px; border-left: 3px solid var(--it-hot);
    background: var(--it-bg-soft); color: var(--it-muted);
}
.prose iframe { max-width: 100%; border: 0; aspect-ratio: 16 / 9; width: 100%; }

/* Khối video. Máy chủ để lại một <div class="nx-video"> mang `data-embed`; theme.js
   gán iframe.src khi BẤM — không nạp sẵn, vì mỗi iframe là một lượt gọi sang YouTube
   ngay khi mở trang cho một video phần lớn người đọc không bấm.

   Liên kết bên trong là đường lùi khi JS bị chặn, nên nó KHÔNG được ẩn hoàn toàn. */
.nx-video {
    position: relative; margin: 18px 0;
    aspect-ratio: 16 / 9; border-radius: var(--it-radius); overflow: hidden;
    background: #14323a center / cover no-repeat;
    display: grid; place-items: center; cursor: pointer;
}
.nx-video::after {
    content: "▶"; display: grid; place-items: center;
    width: 66px; height: 66px; border-radius: 50%;
    background: var(--it-cta); color: #fff; font-size: 24px; padding-left: 4px;
    pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.nx-video.is-live::after { display: none; }
.nx-video:focus-visible { outline: 3px solid var(--it-hot); outline-offset: 2px; }
.nx-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.nx-video a {
    position: absolute; inset: auto 10px 10px auto; z-index: 2;
    color: #fff; font-size: 13px; background: rgba(0, 0, 0, .5);
    padding: 4px 10px; border-radius: 999px;
}

/* Khối video của khe `vi_sao` nằm ngoài `.prose`, nên nó cần lề riêng. */
.why__media .nx-video { margin: 0; }

/* -- Cột phải --------------------------------------------------------------- */

.page__side { min-width: 0; }
.side__head { font-size: 16px; color: var(--it-primary); margin: 0 0 10px; text-transform: uppercase; }
.side__box { background: var(--it-bg-soft); border-radius: var(--it-radius); padding: 18px; margin: 0 0 22px; }
.side__hot { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
.side__mail { margin: 0; font-size: 14px; }
.side__hours { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13.5px; color: var(--it-muted); }
.side__list { list-style: none; margin: 0 0 22px; padding: 0; }
.side__list li { border-bottom: 1px solid var(--it-line); }
.side__list a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; color: var(--it-ink); }
.side__list a:hover { color: var(--it-primary); text-decoration: none; }
.side__n { color: var(--it-muted); font-size: 13px; }

/* -- Liên hệ ---------------------------------------------------------------- */

.bran { padding: 30px 0 0; }
.bran__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.bran__card { background: var(--it-bg-soft); border-radius: var(--it-radius); padding: 16px; }
.bran__name { margin: 0 0 4px; font-weight: 700; color: var(--it-primary); }
.bran__addr { margin: 0 0 6px; color: var(--it-muted); font-size: 14px; }

.cform-wrap { padding: 30px 0 0; }
.cform__row { margin: 0 0 13px; }
.cform__row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.cform label { display: block; font-size: 13.5px; font-weight: 600; margin: 0 0 5px; }
.cform label b { color: var(--it-cta); }
.cform input, .cform textarea {
    width: 100%; padding: 10px 13px; border: 1px solid var(--it-line);
    border-radius: var(--it-radius); font: inherit;
}
.cform input:focus, .cform textarea:focus {
    outline: 2px solid var(--it-secondary); outline-offset: 1px; border-color: var(--it-secondary);
}
.cform textarea { resize: vertical; }

.map { margin: 28px 0 0; }
.map iframe { width: 100%; height: 340px; border-radius: var(--it-radius); }

/* -- Phân trang ------------------------------------------------------------- */

.pager { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 28px 0 0; }
.pager a, .pager__cur, .pager__gap {
    display: inline-block; min-width: 38px; text-align: center;
    padding: 7px 10px; border: 1px solid var(--it-line); border-radius: var(--it-radius);
}
.pager a { color: var(--it-primary); }
.pager a:hover { background: var(--it-bg-soft); text-decoration: none; }
.pager__cur { background: var(--it-primary); border-color: var(--it-primary); color: #fff; font-weight: 600; }
.pager__gap { border-color: transparent; color: var(--it-muted); }

/* -- Trang lỗi -------------------------------------------------------------- */

.err__inner { text-align: center; padding: 60px 0; }
.err__code { margin: 0; font-size: 68px; font-weight: 800; color: var(--it-primary); line-height: 1; }
.err__msg { color: var(--it-muted); margin: 0 0 22px; }
.err__trace { margin: 22px 0 0; font-size: 13px; color: var(--it-muted); }

/* -- Chân trang ------------------------------------------------------------- */

.foot { background: var(--it-primary); color: #fff; padding: 44px 0 26px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr .8fr; gap: 30px; }
.foot__logo { max-height: 56px; width: auto; background: #fff; padding: 7px 10px; border-radius: var(--it-radius); margin: 0 0 12px; }
.foot__company { margin: 0 0 6px; font-weight: 700; }
.foot__line { margin: 0 0 5px; font-size: 14px; opacity: .93; }
.foot__line a { color: var(--it-hot); }
.foot__head { font-size: 15.5px; margin: 0 0 12px; text-transform: uppercase; }
.foot__links { list-style: none; margin: 0; padding: 0; }
.foot__links li { margin: 0 0 7px; }
.foot__links a { color: #fff; font-size: 14px; opacity: .93; }
.foot__social { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; }
.foot__social a {
    color: #fff; font-size: 19px; background: rgba(255, 255, 255, .14);
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.foot__social a:hover { background: var(--it-hot); color: var(--it-hot-ink); }

/* SVG của partial dùng chung khai width/height 1em và fill currentColor, nên ô
   chứa nó định cỡ bằng font-size và định màu bằng color. */
.social-icon { display: block; }

.copy { background: rgba(0, 0, 0, .18); color: #fff; font-size: 13px; padding: 12px 0; margin: 30px 0 -26px; }
.copy p { margin: 0 0 3px; opacity: .9; }

/* -- Nút gọi nổi ------------------------------------------------------------ */

.callfab {
    position: fixed; left: 16px; bottom: 16px; z-index: 60;
    display: flex; align-items: center; gap: 9px;
    background: var(--it-cta); color: #fff; font-weight: 700; font-size: 15px;
    padding: 11px 18px; border-radius: 999px; box-shadow: var(--it-shadow);
}
.callfab:hover { text-decoration: none; filter: brightness(1.07); }

/* -- Màn hình hẹp ----------------------------------------------------------- */

/* Ngưỡng gom menu: 1200px. Không phải 760 (khoảng 760–1200 mới là chỗ chín mục rớt
   thành nhiều hàng), và không phải 1100 — ở 1101–1200 thì `.wrap` chỉ còn 1070–1170px,
   vẫn chưa đủ cho cả chín mục lẫn ô tìm kiếm nằm một hàng. Menu ngang chỉ hiện khi nó
   THẬT SỰ vừa. */
@media (max-width: 1200px) {
    .nav--js .nav__burger { display: flex; }
    .nav--js .nav__list { display: none; width: 100%; flex-direction: column; }
    .nav--js.nav--open .nav__list { display: flex; }

    .nav__inner { flex-wrap: wrap; }
    .nav__link { padding: 11px 4px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
    .nav__item--has > .nav__link::after { content: ""; }

    /* Cảm ứng không có :hover — menu con hiện sẵn thành danh sách thụt vào. */
    .nav__sub {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border-top: 0; background: transparent; min-width: 0; padding: 0;
    }
    .nav__sub a { color: #fff; opacity: .9; padding: 8px 4px 8px 22px; font-size: 13.5px; }
    .nav__sub a:hover { background: rgba(0, 0, 0, .14); color: #fff; }
}

@media (max-width: 1024px) {
    .strip__grid { grid-template-columns: repeat(2, 1fr); }
    .cats__grid { grid-template-columns: repeat(3, 1fr); }
    .proj__grid { grid-template-columns: repeat(3, 1fr); }
    .page__grid { grid-template-columns: 1fr; }
    .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    section { padding: 30px 0; }

    /* Ảnh ngang 1400/520 cắt gần hết nội dung trên màn hình hẹp — nới cho vuông hơn. */
    .hero__slide { aspect-ratio: 16 / 10; }

    /* Logo một dòng, hai nút điện thoại một dòng riêng bên dưới. Để chung một hàng
       thì ở 360px chúng chiếm gần trọn bề ngang và logo bị ép còn một mẩu. */
    .head__inner { justify-content: center; text-align: center; }
    .head__side { justify-content: center; flex: 1 0 100%; }
    .head__phones { justify-content: center; }
    .head__hot { font-size: 15px; padding: 7px 12px; }
    .head__tagline { display: none; }

    .nav__search { margin: 10px 0; width: 100%; }
    .nav__search input { width: 100%; }

    /* Dải bốn ô ẨN trên màn hình hẹp. Nó là bốn dòng chữ ngắn lặp lại đúng những gì
       menu đã nói, và xếp dọc thì nó chiếm trọn một màn hình giữa slider và nội dung
       — tức đẩy phần đáng đọc xuống dưới nếp gấp để đổi lấy không gì cả. */
    .strip { display: none; }

    .intro__grid, .why__grid { grid-template-columns: 1fr; }
    .intro__media img { width: 100%; }
    .intro__media::before { display: none; }
    .hero__nav { width: 36px; height: 36px; font-size: 16px; }
    .hero__nav--prev { left: 6px; }
    .hero__nav--next { right: 6px; }
    .why__media { order: 2; }

    /* MỘT dịch vụ mỗi dòng: thẻ dịch vụ là một biểu tượng tròn cộng một dòng chữ, và
       hai thẻ cạnh nhau ở 360px làm biểu tượng nhỏ tới mức không đọc ra hình gì. */
    .svc__grid { grid-template-columns: 1fr; }
    .cats__grid { grid-template-columns: repeat(2, 1fr); }
    .proj__grid { grid-template-columns: repeat(2, 1fr); }
    .reg__row--two, .cform__row--two { grid-template-columns: 1fr; }
    .foot__grid { grid-template-columns: 1fr; }

    .h1 { font-size: 23px; }
    .h2 { font-size: 19px; }
    .callfab span { display: none; }
    .callfab { padding: 14px; }
}