@import url('/fonts/be-vietnam-pro.css');

/* ============================================================
   SMO Media — Design tokens
   Màu chủ đạo lấy cảm hứng từ giao diện tham chiếu (navy + cam),
   font Be Vietnam Pro tự lưu trữ (thay cho font độc quyền của bản gốc).
   ============================================================ */
:root {
    /* Màu chủ đạo lấy đúng từ logo thương hiệu. Khác bảng navy cũ ở chỗ màu
       thương hiệu là sắc SÁNG nhất trong ba bậc, hai bậc còn lại đậm dần, để
       chữ trắng và chữ nhạt đặt lên vẫn đủ tương phản. */
    --brand: #3B5998;
    --navy-900: #3B5998;
    --navy-800: #2f4a80;
    --navy-700: #263c68;
    --navy-100: #dce3f3;
    --navy-50: #f1f4fa;

    /* Chữ phụ đặt trên nền màu thương hiệu. Nền này sáng hơn navy cũ nên các
       sắc xám-tím trước đây dùng đã tụt xuống dưới ngưỡng đọc được. */
    --on-brand-muted: #dce1f0;
    --orange: #d14600;
    --orange-600: #b83d00;
    --orange-100: #ffe4d6;
    --orange-50: #fff2ea;

    --accent-blue: #3e64de;
    --accent-blue-dark: #3151b8;

    --ink: #14141f;
    --ink-soft: #37374a;
    --muted: #5c5c72;
    --line: #e4e4ee;
    --surface: #ffffff;
    --surface-alt: #f5f6fb;

    --radius-sm: 4px;
    --radius: 10px;
    --radius-lg: 15px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .08);
    --shadow: 0 10px 30px rgba(0, 0, 0, .1);
    --shadow-lg: 0 10px 30px rgba(45, 45, 45, .2);

    --header-h: 76px;
    --container: 1180px;
    --gutter: clamp(16px, 4vw, 32px);
    --section-y: clamp(52px, 6.5vw, 96px);

    --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

/* Thuộc tính hidden chỉ được trình duyệt đặt display: none ở mức yếu nhất, nên bất kỳ
   lớp hay style nội tuyến nào đặt display cũng đè mất nó — thẻ vẫn hiện dù đã bị ẩn.
   Đây chính là trường hợp của những lưới “xem thêm”, vì thẻ bài viết có display: block. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    overflow-x: clip;
    font-family: var(--font);
    font-size: clamp(15px, .35vw + 14px, 16.5px);
    line-height: 1.75;
    color: var(--ink);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-800); text-decoration: none; }
a:hover { color: #5c5c72; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

h1, h2, h3, h4, h5 {
    margin: 0;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--navy-900);
}

h1 { font-size: clamp(30px, 4.4vw, 52px); }
h2 { font-size: clamp(24px, 3vw, 38px); }
h3 { font-size: clamp(18px, 1.7vw, 23px); }
h4 { font-size: clamp(16px, 1.3vw, 18px); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
    border-radius: 3px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--navy-900); color: #fff;
    padding: 12px 20px; border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* ============================================================
   Layout
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { position: relative; padding-block: var(--section-y); }
.section--alt { background: var(--surface-alt); }
.section--dark { background: var(--navy-900); color: var(--on-brand-muted); }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .eyebrow { color: var(--on-brand-muted); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: #5c5c72; margin-bottom: 12px;
}
.section__head { max-width: 720px; margin-bottom: 40px; }
.section__head p { color: var(--muted); font-size: 17px; margin-top: 14px; }
.section__head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.split { display: grid; gap: 48px; grid-template-columns: 1.1fr .9fr; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Về chúng tôi ---------- */
.about-us__grid { display: grid; gap: clamp(28px, 5vw, 56px); grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
.about-us__gallery { display: flex; flex-direction: column; gap: 16px; }
.about-us__gallery img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; box-shadow: var(--shadow-sm); }
.about-us .eyebrow { color: #5c5c72; }
.about-us h2 { margin-top: 2px; font-size: clamp(24px, 3vw, 32px); }
.about-us__lead { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; margin-top: 16px; }
.about-us__lead strong { color: var(--navy-900); }
.about-us__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 40px; margin-top: 30px; }
.about-us__stat-value { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; color: #5c5c72; line-height: 1; }
.about-us__stat-label { margin-top: 6px; color: var(--navy-900); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .02em; }
/* Ba mảng mũi nhọn. Để biểu tượng thành cột riêng cố định 38px nên dòng chữ xuống
   hàng vẫn thụt thẳng theo biểu tượng chứ không chạy ngược về sát lề. */
.about-us__pillars { display: grid; gap: 16px; margin-top: 18px; }
.about-us__pillars li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.about-us__pillar-icon {
    display: grid; place-items: center; width: 38px; height: 38px;
    border-radius: 10px; background: var(--orange-50); color: var(--orange);
}
.about-us__pillar-icon svg { width: 19px; height: 19px; }
.about-us__pillars div { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.about-us__pillars a {
    display: block; margin-bottom: 3px; color: var(--navy-900);
    font-weight: 800; font-size: 15.5px;
    transition: color .18s var(--ease);
}
.about-us__pillars a:hover { color: var(--orange); }

.about-us__cta { margin-top: 30px; }
@media (max-width: 900px) {
    .about-us__grid { grid-template-columns: 1fr; }
    .about-us__gallery { flex-direction: row; }
    /* Phần tử flex mặc định không co nhỏ hơn kích thước gốc của chính nó
       (min-width: auto). Ảnh rộng 640px nên khi xếp thành hàng ngang, hai tấm
       đẩy trang rộng ra và sinh thanh cuộn ngang trên mọi màn hình dưới 900px.
       Lỗi chỉ lộ ra sau khi ảnh tải xong, vì hai ảnh này dùng loading="lazy". */
    .about-us__gallery img { min-width: 0; flex: 1 1 0; }
}

.about-us--tight { padding-bottom: 32px; }
.projects--tight { padding-top: 32px; }

.news__more { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* ---------- Khách hàng nói gì về SMO Media ---------- */
.testimonials { position: relative; overflow: clip; color: #fff; }
.testimonials__bg {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(120deg, rgba(20, 24, 60, .82), rgba(30, 45, 110, .72)), url('/images/testimonials/bg.jpg') center / cover no-repeat;
}
.testimonials__inner { position: relative; z-index: 1; }
.testimonials__head h2 { color: #fff; }
.testimonials__head p { color: #dbe6f5; }
.testimonials__viewport { display: flex; align-items: center; gap: 14px; }
.testimonials__nav {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
    border: 1.5px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
    transition: background .2s var(--ease), opacity .2s var(--ease);
}
.testimonials__nav svg { width: 16px; height: 16px; }
.testimonials__nav--prev svg { transform: scaleX(-1); }
.testimonials__nav:hover { background: rgba(255,255,255,.18); }
.testimonials__nav:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* Rãnh cuộn ngang có điểm dừng: kéo/vuốt là từng thẻ ăn khớp vào mép trái.
   Đệm dọc để bóng đổ của thẻ không bị khung cuộn cắt mất. */
.testimonials__track {
    flex: 1; min-width: 0; display: flex; gap: 24px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none; padding: 8px 2px;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonials__track > .testimonial-card {
    flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start;
}
@media (max-width: 1080px) {
    .testimonials__track > .testimonial-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 700px) {
    /* Một thẻ mỗi lượt nhưng chừa một mẩu thẻ sau nhô ra, để người xem biết là
       còn vuốt được. Hai mũi tên 44px ở màn này sẽ ăn gần một phần ba bề ngang
       nên bỏ đi, thao tác vuốt thay thế. */
    .testimonials__nav { display: none; }
    .testimonials__track > .testimonial-card { flex-basis: 86%; }
}

.testimonial-card {
    /* Xếp dọc để khối tác giả tự đẩy xuống đáy thẻ, xem margin-top bên dưới. */
    position: relative; display: flex; flex-direction: column;
    background: #fff; border-radius: var(--radius-lg); padding: 26px 24px 24px;
    color: var(--ink); box-shadow: var(--shadow-lg);
}
.testimonial-card__stars { display: flex; gap: 3px; color: #ffb400; margin-bottom: 14px; }
.testimonial-card__stars svg { width: 15px; height: 15px; }
/* Hiện trọn lời nhận xét. Trước đây cắt còn 6 dòng nhưng min-height lại đặt
   148px, lớn hơn đúng 6 dòng (137,7px), nên hở ra nửa dòng thứ bảy bị xén ngang
   ngay dưới dấu ba chấm — nhìn như lỗi hiển thị chứ không như cố ý rút gọn. */
.testimonial-card__quote {
    font-size: 13.5px; line-height: 1.7; color: var(--ink-soft);
    margin-bottom: 22px;
}
/* Đẩy khối tác giả xuống đáy để các thẻ cạnh nhau có dòng tên thẳng hàng,
   dù lời nhận xét dài ngắn khác nhau. */
.testimonial-card__author { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.testimonial-card__avatar {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none;
    background: var(--navy-900); color: #fff; font-weight: 800; font-size: 15px;
}
.testimonial-card__name { font-weight: 800; font-size: 14px; color: var(--navy-900); }
.testimonial-card__role { font-size: 12.5px; color: var(--muted); }
/* Dấu ngoặc kép chỉ là hoạ tiết. Ở góc dưới nó nằm đè lên chức danh của người
   nhận xét; chuyển lên góc trên bên phải, đối xứng với hàng sao bên trái. */
.testimonial-card__quote-mark {
    position: absolute; top: 24px; right: 24px; width: 26px; height: 26px; color: #e4e4ee;
}

/* ---------- Trang dịch vụ: Thiết kế Website ---------- */
.wd-hero {
    padding-block: clamp(56px, 9vw, 100px);
    background: linear-gradient(90deg, rgba(0,10,60,.35) 0%, rgba(0,10,60,.1) 55%), url('/images/services/thiet-ke-website/hero-banner.webp') center / cover no-repeat;
}
.wd-hero__text { max-width: 620px; }
.wd-hero__text h1 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); }
.wd-hero .wd-check-list > div { color: #fff; }
.wd-hero .eyebrow { color: #dbe6f5; }
.wd-check-list { margin-top: 20px; display: grid; gap: 12px; }
.wd-check-list > div { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.wd-check-list svg { width: 20px; height: 20px; color: var(--orange); flex: none; }
.wd-check-list__circle {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid var(--orange); flex: none;
}
.wd-check-list__circle svg { width: 13px; height: 13px; }

.photo-accent { position: relative; display: inline-block; }
.photo-accent::before {
    content: ''; position: absolute; top: -30px; right: -40px; width: 100px; height: 100px;
    border-radius: 50%; background: var(--orange); z-index: 0;
}
.photo-accent img { position: relative; z-index: 1; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.acc-boxed { display: grid; gap: 10px; }
.acc-boxed .wd-accordion__item {
    border: none; background: var(--surface-alt); border-radius: var(--radius); padding: 0 18px;
}
.acc-boxed .wd-accordion__item[open] { background: #f2f3f7; }
.acc-boxed .wd-accordion__item summary { padding: 14px 0; }
.acc-boxed .wd-accordion__item p { padding: 0 0 16px; }

.media-card {
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    overflow: hidden; display: flex; flex-direction: column; height: 100%;
}
.media-card__head { background: var(--navy-900); color: #fff; text-align: center; padding: 18px 20px; }
.media-card__head h3 { color: #fff; font-size: 19px; }
.media-card__head span { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 600; opacity: .9; }
.media-card__list { list-style: disc; padding: 24px 20px 8px 40px; display: grid; gap: 10px; flex: 1; }
.media-card__list li { color: var(--ink-soft); font-size: 14.5px; }
.media-card__cta { display: flex; justify-content: center; padding: 8px 20px 26px; }

/* Quy trình Tư vấn - tabs (CSS-only, radio driven) */
.proc-tabs { margin-top: 34px; }
.proc-tabs > input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.proc-tabs__nav {
    display: flex; justify-content: center; gap: clamp(18px, 4vw, 54px);
    flex-wrap: wrap; border-bottom: 1px solid var(--line);
}
.proc-tabs__nav label {
    padding: 12px 2px; margin-bottom: -1px; cursor: pointer;
    font-weight: 800; font-size: 13.5px; letter-spacing: .02em; text-transform: uppercase;
    color: var(--ink-soft); border-bottom: 3px solid transparent;
    transition: color .15s var(--ease), border-color .15s var(--ease);
}
.proc-tabs__nav label:hover { color: var(--orange); }
.proc-tabs__panel { display: none; }
.proc-tabs__panel--on {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 56px); align-items: center; padding-top: 44px;
}
.proc-tabs__panel img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.proc-tabs__list { list-style: disc; padding-left: 22px; display: grid; gap: 12px; }
.proc-tabs__list li { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.proc-tabs__cta { display: flex; justify-content: center; margin-top: 40px; }
@media (max-width: 860px) { .proc-tabs__panel--on { grid-template-columns: 1fr; } }

.proc-tabs > input:nth-of-type(1):checked ~ .proc-tabs__nav label:nth-of-type(1),
.proc-tabs > input:nth-of-type(2):checked ~ .proc-tabs__nav label:nth-of-type(2),
.proc-tabs > input:nth-of-type(3):checked ~ .proc-tabs__nav label:nth-of-type(3),
.proc-tabs > input:nth-of-type(4):checked ~ .proc-tabs__nav label:nth-of-type(4),
.proc-tabs > input:nth-of-type(5):checked ~ .proc-tabs__nav label:nth-of-type(5) {
    color: var(--orange); border-bottom-color: var(--orange);
}
.proc-tabs > input:nth-of-type(1):checked ~ .proc-tabs__panels .proc-tabs__panel:nth-of-type(1),
.proc-tabs > input:nth-of-type(2):checked ~ .proc-tabs__panels .proc-tabs__panel:nth-of-type(2),
.proc-tabs > input:nth-of-type(3):checked ~ .proc-tabs__panels .proc-tabs__panel:nth-of-type(3),
.proc-tabs > input:nth-of-type(4):checked ~ .proc-tabs__panels .proc-tabs__panel:nth-of-type(4),
.proc-tabs > input:nth-of-type(5):checked ~ .proc-tabs__panels .proc-tabs__panel:nth-of-type(5) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 56px); align-items: center; padding-top: 44px;
}
@media (max-width: 860px) {
    .proc-tabs > input:nth-of-type(1):checked ~ .proc-tabs__panels .proc-tabs__panel:nth-of-type(1),
    .proc-tabs > input:nth-of-type(2):checked ~ .proc-tabs__panels .proc-tabs__panel:nth-of-type(2),
    .proc-tabs > input:nth-of-type(3):checked ~ .proc-tabs__panels .proc-tabs__panel:nth-of-type(3),
    .proc-tabs > input:nth-of-type(4):checked ~ .proc-tabs__panels .proc-tabs__panel:nth-of-type(4),
    .proc-tabs > input:nth-of-type(5):checked ~ .proc-tabs__panels .proc-tabs__panel:nth-of-type(5) {
        grid-template-columns: 1fr;
    }
}

.wd-accordion { margin-top: 22px; display: grid; }
.wd-accordion__item { border-bottom: 1px solid var(--line); padding: 4px 0; background: none; }
.wd-accordion__item:first-child { border-top: 1px solid var(--line); }
.wd-accordion__item summary {
    cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 15.5px; list-style: none;
    display: flex; align-items: center; gap: 12px;
}
.wd-accordion__item summary::-webkit-details-marker { display: none; }
.wd-accordion__item summary::before { content: '+'; font-size: 18px; color: var(--accent-blue); flex: none; width: 14px; }
.wd-accordion__item[open] summary::before { content: '−'; }
.wd-accordion__item p { color: var(--muted); padding: 0 0 16px 26px; font-size: 14.5px; line-height: 1.6; }

.wd-solution__cta { margin-top: 26px; }
.wd-solution__art { position: relative; display: grid; place-items: center; }
.wd-solution__art::before {
    content: ''; position: absolute; top: 4%; right: 4%; width: 78%; height: 78%;
    background: #bfe0f7; border-radius: 50%; z-index: 0;
}
.wd-solution__art img {
    position: relative; z-index: 1; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    width: 84%; height: auto; object-fit: cover;
}
.wd-solution__badge {
    position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg);
    padding: 9px 16px 9px 8px; font-weight: 700; font-size: 13px; color: var(--ink);
}
.wd-solution__badge svg {
    width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--accent-blue); color: #fff;
}
.wd-solution__badge--1 { top: 6%; left: 4%; }
.wd-solution__badge--2 { top: 24%; right: 2%; }
@media (max-width: 640px) { .wd-solution__badge { display: none; } }

.wd-feature-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: 26px 22px; }
.wd-feature-box__icon {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,85,0,.14); color: var(--orange); margin-bottom: 16px;
}
.wd-feature-box__icon svg { width: 22px; height: 22px; }
.wd-feature-box p { color: #dcdcef; font-weight: 600; font-size: 14.5px; line-height: 1.55; }

.issue-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px; margin-top: 46px; }
.issue-row { display: flex; align-items: flex-start; gap: 20px; }
.issue-row__icon {
    flex: none; display: grid; place-items: center; width: 56px; height: 56px;
    border-radius: 14px; background: rgba(255,85,0,.08); color: var(--orange);
}
.issue-row__icon svg { width: 30px; height: 30px; }
.issue-row h3 { font-size: 17px; color: var(--navy-900); margin-bottom: 8px; }
.issue-row p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.65; }
@media (max-width: 760px) { .issue-rows { grid-template-columns: 1fr; } }

.wd-timeline { position: relative; max-width: 900px; margin-inline: auto; padding-block: 10px; }
.wd-timeline::before {
    content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 0;
    border-left: 2px dashed var(--line); transform: translateX(-50%);
}
.wd-timeline__item { position: relative; width: 46%; margin-bottom: 34px; }
.wd-timeline__item:nth-child(odd) { margin-right: 54%; }
.wd-timeline__item:nth-child(even) { margin-left: 54%; }
.wd-timeline__card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px;
    box-shadow: var(--shadow-sm); position: relative; transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.wd-timeline__card:hover { background: var(--surface-alt); box-shadow: var(--shadow-lg); }
.wd-timeline__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.wd-timeline__head h4 { font-size: 14.5px; line-height: 1.4; color: var(--navy-900); }
.wd-timeline__badge {
    flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--orange); color: #fff;
}
.wd-timeline__badge svg { width: 14px; height: 14px; }
.wd-timeline__card p { color: var(--muted); font-size: 13px; line-height: 1.6; margin-top: 8px; }
.wd-timeline__dot {
    position: absolute; top: 22px; width: 10px; height: 10px; border-radius: 50%;
    background: var(--navy-900); z-index: 1; font-size: 0;
}
.wd-timeline__item:nth-child(odd) .wd-timeline__dot { right: -25px; }
.wd-timeline__item:nth-child(even) .wd-timeline__dot { left: -25px; }
@media (max-width: 720px) {
    .wd-timeline::before { left: 5px; }
    .wd-timeline__item, .wd-timeline__item:nth-child(odd), .wd-timeline__item:nth-child(even) { width: 100%; margin-left: 26px; margin-right: 0; }
    .wd-timeline__item:nth-child(odd) .wd-timeline__dot, .wd-timeline__item:nth-child(even) .wd-timeline__dot { left: -26px; right: auto; }
}

/* ---------- Trang dịch vụ: Nhận diện Thương hiệu ---------- */
.bi-hero { padding-block: clamp(56px, 8vw, 96px); background: linear-gradient(180deg, #fdeee5 0%, #fff 100%); }
.bi-hero__text h1 { font-size: clamp(26px, 3.4vw, 40px); }

.bi-plain-list { margin-top: 22px; display: grid; gap: 12px; }
.bi-plain-list p { font-size: 15.5px; color: var(--ink); }
.bi-plain-list span { color: var(--accent-blue); font-weight: 700; margin-right: 4px; }
.bi-plain-list__cta { margin-top: 26px; }
.btn--outline.bi-plain-list__cta {
    border-color: var(--accent-blue); color: var(--accent-blue);
    text-transform: uppercase; letter-spacing: .03em; font-size: 13.5px; padding: 12px 26px;
}
.btn--outline.bi-plain-list__cta:hover { background: var(--accent-blue); color: #fff; }

.bi-numbered { display: grid; gap: 18px; max-width: 760px; margin-inline: auto; }
.bi-numbered__item { display: flex; align-items: flex-start; gap: 16px; }
.bi-numbered__num {
    flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--navy-900); color: #fff; font-weight: 800; font-size: 14.5px;
}
.bi-numbered__item p { font-weight: 600; padding-top: 6px; }
.bi-numbered--vertical { margin-top: 24px; max-width: none; margin-inline: 0; gap: 22px; }
.bi-numbered--vertical .bi-numbered__num { background: var(--orange); }
.bi-numbered--vertical h4 { font-size: 16px; margin-bottom: 4px; }
.bi-numbered--vertical p { font-weight: 400; color: var(--muted); font-size: 14.5px; padding-top: 0; }

.bi-accordion { max-width: none; }
.bi-accordion .wd-accordion__item summary::before { color: var(--orange); }
.bi-accordion__num { color: var(--orange); margin-right: 2px; }
.bi-accordion__sublist { list-style: disc; padding: 0 0 16px 46px; display: grid; gap: 8px; }
.bi-accordion__sublist li { color: var(--muted); font-size: 14.5px; line-height: 1.5; }

.qtv-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.qtv-cell { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.qtv-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qtv-card { position: relative; z-index: 1; width: 100%; height: 100%; padding: 24px 22px; color: #fff; display: flex; flex-direction: column; }
.qtv-card--navy { background: var(--navy-900); }
.qtv-card--orange { background: var(--orange); }
.qtv-card--right { clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%); padding-right: 40px; }
.qtv-card--left { clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%); padding-left: 40px; }
.qtv-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.qtv-card__icon { display: grid; place-items: center; width: 30px; height: 30px; }
.qtv-card__icon svg { width: 100%; height: 100%; }
.qtv-card__num { font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1; }
.qtv-card__desc { margin-top: 12px; font-size: 12.5px; line-height: 1.55; flex: 1; opacity: .95; }
.qtv-card__label { font-weight: 800; font-size: 17px; letter-spacing: .02em; position: relative; padding-bottom: 8px; }
.qtv-card__label::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 3px; background: #fff; }
@media (max-width: 900px) {
    .qtv-grid { grid-template-columns: repeat(2, 1fr); }
    .qtv-card--right, .qtv-card--left { clip-path: none; padding: 24px 22px; }
}
@media (max-width: 640px) {
    .qtv-grid { grid-template-columns: 1fr; }
}

.push-top { position: relative; padding-bottom: 0; overflow: visible; }
.push-top__bg {
    position: absolute; top: 0; left: 0; right: 0; height: 340px; z-index: 0;
    background: url('/images/services/seo-tong-the/push-top-bg.svg') center / cover no-repeat;
}
.push-top .container { position: relative; z-index: 1; }
.push-top__head { text-align: center; padding-top: 40px; color: #fff; max-width: 700px; margin-inline: auto; }
.push-top__head h2 { color: #fff; font-size: clamp(22px, 2.6vw, 28px); }
.push-top__tagline { color: #fff; font-weight: 700; font-size: clamp(18px, 2vw, 22px); margin-top: 6px; }
.push-top__desc { color: #dbe6f5; margin-top: 14px; font-size: 15px; }
.push-top__card {
    position: relative; margin-top: 50px; background: #fff; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1fr 1fr;
    overflow: hidden; margin-bottom: -80px;
}
.push-top__info { background: linear-gradient(160deg, #123a94, #0a1a4a); color: #fff; padding: 36px; }
.push-top__info h3 { color: #fff; font-size: 20px; margin-bottom: 12px; }
.push-top__info > p { color: #cdd8f5; font-size: 14px; line-height: 1.6; }
.push-top__methods { display: flex; gap: 22px; margin-top: 24px; flex-wrap: wrap; }
.push-top__methods a { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #cdd8f5; font-size: 12.5px; text-align: center; }
.push-top__methods strong { color: #fff; font-size: 13px; }
.push-top__method-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.push-top__method-icon svg { width: 20px; height: 20px; color: #fff; }
.push-top__method-icon--zalo { background: #0068ff; }
.push-top__method-icon--phone { background: var(--orange); }
.push-top__method-icon--fb { background: #3e64de; }
.push-top__contact { margin-top: 26px; display: grid; gap: 8px; font-size: 13px; }
.push-top__contact div { display: flex; gap: 6px; }
.push-top__contact dt { color: #fff; font-weight: 700; margin: 0; }
.push-top__contact dd { color: #cdd8f5; margin: 0; }
.push-top__card .form-card { padding: 36px; margin-top: 0; }
@media (max-width: 820px) {
    .push-top__card { grid-template-columns: 1fr; }
    .push-top__bg { height: 420px; }
}

.faq-list .wd-accordion__item { border: none; padding: 0; }
.faq-list .wd-accordion__item:first-child { border-top: none; }
.faq-list .wd-accordion__item summary {
    padding: 16px 0; font-weight: 700; font-size: 15px; color: var(--ink);
}
.faq-list .wd-accordion__item summary::before { content: none; }
.faq-list .wd-accordion__item summary::after {
    content: ''; width: 9px; height: 9px; border-right: 2px solid #3e64de; border-bottom: 2px solid #3e64de;
    transform: rotate(45deg); transition: transform .15s var(--ease); margin-left: auto;
}
.faq-list .wd-accordion__item[open] summary::after { transform: rotate(-135deg); }
.faq-list .wd-accordion__item[open] summary { color: var(--orange); }
.faq-list .wd-accordion__item[open] summary::after { border-color: var(--orange); }
.faq-list .wd-accordion__item p { padding: 0 0 18px; color: var(--muted); }

/* Biến thể FAQ chữ hỏi navy, phần trả lời tông cam nhạt */
.faq-list--orange .wd-accordion__item summary {
    color: var(--navy-900); font-size: 15.5px; align-items: flex-start; gap: 18px;
}
.faq-list--orange .wd-accordion__item summary::after { margin-top: 6px; }
.faq-list--orange .wd-accordion__item[open] summary { color: var(--orange); }
.faq-list--orange .wd-accordion__item[open] p { color: #e5a077; }

.seo-process { display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-wrap: wrap; }
.seo-process__item { flex: 1 1 260px; max-width: 320px; text-align: center; }
.seo-process__photo {
    width: 190px; height: 190px; border-radius: 50%; overflow: hidden; margin: 0 auto 22px;
    border: 6px solid #fff; box-shadow: var(--shadow-lg);
}
.seo-process__photo img { width: 100%; height: 100%; object-fit: cover; }
.seo-process__item h3 {
    font-size: 18px; color: var(--accent-blue); margin-bottom: 10px;
    transition: color .15s var(--ease);
}
.seo-process__item:hover h3 { color: var(--orange); }
.seo-process__item p { color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.seo-process__arrow {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm); color: var(--ink-soft); margin-top: 76px;
}
.seo-process__arrow svg { width: 16px; height: 16px; }
@media (max-width: 820px) { .seo-process__arrow { display: none; } }

.seo-why-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px;
    text-align: center; height: 100%;
}
.seo-why-card__icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 16px; color: var(--orange); }
.seo-why-card__icon svg { width: 34px; height: 34px; }
.seo-why-card h3 { font-size: 17px; margin-bottom: 8px; }
.seo-why-card p { color: var(--muted); font-size: 14px; line-height: 1.6; }

.why-card { text-align: left; padding: 0; }
.why-card__icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 0 20px; color: var(--orange); }
.why-card__icon svg { width: 42px; height: 42px; }
.why-card h3 { font-size: 19px; color: var(--navy-900); margin-bottom: 10px; }
.why-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; }
.why-card p strong { color: var(--navy-900); }

.cta-banner {
    position: relative; padding-block: 90px; text-align: center; color: #fff;
    background: linear-gradient(100deg, rgba(60,40,150,.72), rgba(90,70,190,.55)), url('/images/about/hero-banner.jpg') center/cover no-repeat;
}
.cta-banner h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); }
.cta-banner p { max-width: 720px; margin: 16px auto 0; color: rgba(255,255,255,.9); font-size: 15.5px; line-height: 1.7; }
.cta-banner .btn { margin-top: 30px; }

.final-contact h3 { font-size: 19px; color: var(--navy-900); margin-bottom: 6px; }
.final-contact p { color: var(--ink-soft); font-size: 15px; }
.final-contact > div + div { margin-top: 26px; }

/* ---------- Vấn đề SEO (numbered issue list) ---------- */
.seo-issue-list { margin-top: 22px; display: grid; gap: 2px; }
.seo-issue-item { background: var(--surface-alt); border-radius: var(--radius-sm); overflow: hidden; }
.seo-issue-item:nth-child(even) { background: #fff; }
.seo-issue-item__head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.seo-issue-item__num {
    flex: none; display: grid; place-items: center; min-width: 34px; height: 28px; padding: 0 6px;
    background: var(--navy-900); color: #fff; font-weight: 800; font-size: 13px; border-radius: 4px;
}
.seo-issue-item__title { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.seo-issue-item__desc { color: #6a5ad8; font-size: 13.5px; line-height: 1.6; padding: 0 16px 18px 64px; background: #fff; }
.seo-issue-item--active .seo-issue-item__head { background: #29ade3; }
.seo-issue-item--active .seo-issue-item__num { background: #fff; color: #29ade3; }
.seo-issue-item--active .seo-issue-item__title { color: #fff; }

/* ---------- Trang dịch vụ: Đào tạo & Ứng dụng AI ---------- */
.ai-solution { grid-template-columns: 1fr 1fr; gap: 56px; }
.ai-solution + .ai-solution { margin-top: clamp(40px, 6vw, 72px); }
.ai-solution__media { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
.ai-solution__head { display: flex; align-items: flex-start; gap: 12px; }
.ai-solution__head svg { width: 26px; height: 26px; color: var(--orange); flex: none; margin-top: 3px; }
.ai-solution__head h3 { font-size: clamp(19px, 2vw, 23px); color: var(--navy-900); }
.ai-solution p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.8; margin-top: 16px; }
.ai-solution ul { margin-top: 14px; padding-left: 22px; list-style: disc; display: grid; gap: 10px; }
.ai-solution li { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
/* Mặc định ảnh nằm bên phải; hàng đánh dấu --flip đẩy ảnh sang trái. */
.ai-solution--flip .ai-solution__media { order: -1; }
@media (max-width: 900px) {
    .ai-solution { grid-template-columns: 1fr; gap: 28px; }
    /* Trên một cột luôn đọc chữ trước rồi mới tới ảnh, kể cả hàng đảo chiều. */
    .ai-solution--flip .ai-solution__media { order: 0; }
}

/* ---------- Bảng giá dịch vụ ---------- */
.price-grid { align-items: stretch; }
.price-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 32px 26px; display: flex; flex-direction: column; position: relative;
}
.price-card--featured { border: 2px solid var(--orange); box-shadow: var(--shadow-lg); transform: scale(1.03); z-index: 1; }
.price-card__badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--orange); color: #fff; font-weight: 800; font-size: 12px;
    padding: 5px 16px; border-radius: var(--radius-pill); white-space: nowrap;
}
.price-card h3 { font-size: 18px; letter-spacing: .02em; }
.price-card__price { font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; color: var(--navy-900); margin: 14px 0 22px; }
.price-card__list { display: grid; gap: 12px; margin-bottom: 26px; flex: 1; }
.price-card__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.price-card__list svg { width: 18px; height: 18px; color: var(--orange); flex: none; margin-top: 2px; }
@media (max-width: 900px) { .price-card--featured { transform: none; } }

/* ---------- Trang Giới thiệu ---------- */
.section--tight-y { padding-block: 40px; }
.quote-box { max-width: 820px; margin-inline: auto; text-align: center; }
.quote-box__icon { width: 34px; height: 34px; color: var(--orange); margin-bottom: 18px; }
.quote-box h2 { font-size: clamp(20px, 2.4vw, 28px); }
.quote-box p { color: var(--muted); margin-top: 18px; font-size: 16.5px; line-height: 1.7; }

.culture-list { margin-top: 26px; display: flex; flex-direction: column; gap: 20px; }
.culture-list__item { display: flex; gap: 16px; align-items: flex-start; }
.culture-list__num { flex: none; font-size: 20px; font-weight: 800; color: var(--orange); line-height: 1.4; }
.culture-list__item h4 { font-size: 16px; margin-bottom: 4px; }
.culture-list__item p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }

.diff-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.diff-card h3 { font-size: 18px; margin-bottom: 16px; }
.diff-card__list { display: grid; gap: 12px; }
.diff-card__list li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.diff-card__list svg { width: 18px; height: 18px; flex: none; color: var(--orange); margin-top: 2px; }

.section--dark .solution-card__icon { display: grid; place-items: center; font-weight: 800; font-size: 22px; color: var(--orange); }

/* ---------- Dự án tiêu biểu ---------- */
/* Băng chuyền giống khối nhận xét: màn rộng ba thẻ, màn vừa hai, điện thoại một
   thẻ kèm mẩu thẻ sau nhô ra. Đoạn mã tự giấu hai mũi tên khi không còn gì để chuyển. */
.projects__viewport { display: flex; align-items: center; gap: 14px; }
.projects__nav {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none;
    border: 1.5px solid var(--line); background: #fff; color: var(--navy-900); cursor: pointer;
    transition: border-color .18s var(--ease), color .18s var(--ease), opacity .2s var(--ease);
}
.projects__nav svg { width: 16px; height: 16px; }
.projects__nav--prev svg { transform: scaleX(-1); }
.projects__nav:hover { border-color: var(--orange); color: var(--orange); }
.projects__nav:disabled { opacity: .35; cursor: default; pointer-events: none; }

.projects__track {
    flex: 1; min-width: 0; display: flex; gap: 24px;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none; padding: 8px 2px;
}
.projects__track::-webkit-scrollbar { display: none; }
.projects__track > .project-card {
    flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start;
}
@media (max-width: 1080px) {
    .projects__track > .project-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 700px) {
    .projects__nav { display: none; }
    .projects__track > .project-card { flex-basis: 86%; }
}

.project-card { display: block; color: inherit; background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }

.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.blog-filter {
    display: inline-flex; align-items: center; padding: 9px 20px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font-weight: 700; font-size: 13px;
    transition: all .15s var(--ease);
}
.blog-filter:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.blog-filter.is-active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.project-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.project-card__media { aspect-ratio: 4 / 3; background: var(--surface-alt); display: grid; place-items: center; }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; }
.project-card__noimage { color: var(--muted); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.project-card__body { padding: 20px 22px 24px; }
.project-card__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.project-card__tag {
    display: inline-flex; padding: 5px 12px; border-radius: var(--radius-pill);
    background: var(--orange-50); color: #5c5c72; font-weight: 800; font-size: 11px; letter-spacing: .03em;
}
.project-card__year { color: var(--muted); font-size: 13px; font-weight: 600; }
.project-card h3 { font-size: 18px; margin-bottom: 8px; }
.project-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 28px; border: 1.5px solid transparent; border-radius: var(--radius-pill);
    font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap;
    transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.btn--primary:hover { background: var(--accent-blue-dark); border-color: var(--accent-blue-dark); color: #fff; }
.btn--dark { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.btn--dark:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.btn--outline { background: #fff; border-color: var(--accent-blue); color: #5c5c72; }
.btn--outline:hover { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--ghost:hover { border-color: var(--orange); color: #5c5c72; }
.btn--sm { padding: 9px 20px; font-size: 13.5px; }
.btn--block { width: 100%; }

.link-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; color: var(--navy-900);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.link-arrow:hover { color: #5c5c72; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   Header
   ============================================================ */
.header {
    position: sticky; top: 0; z-index: 100;
    background: #fff;
    border-bottom: 1px solid transparent;
    transition: background-color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.header.is-stuck { box-shadow: 0 6px 24px rgba(0, 0, 71, .08); border-bottom-color: var(--line); }

.header__bar {
    display: flex; align-items: center; gap: 24px; min-height: var(--header-h);
    transition: min-height .25s var(--ease);
}
.header.is-stuck .header__bar { min-height: 64px; }

.header__logo { position: relative; display: block; flex: none; line-height: 0; }
.header__logo img { height: 54px; width: auto; transition: opacity .25s var(--ease); }
.header__logo--light { position: absolute; inset: 0; opacity: 0; }

/* ---------- Nav ---------- */
.nav { margin-left: 4px; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__list > li { position: relative; }
.nav__link, .nav__list > li > a {
    position: relative; display: flex; align-items: center; gap: 5px;
    /* Chữ in hoa dính nhau hơn chữ thường nên nới nhẹ khoảng cách chữ cho dễ đọc.
       nowrap là bắt buộc: nhãn hai chữ như “Trang chủ” hay “Tin tức & Kiến thức”
       mà gãy giữa chừng thì thanh menu thành hai tầng chữ vụn. */
    padding: 10px 10px; font-weight: 700; font-size: 16px; letter-spacing: .03em; white-space: nowrap;
    text-transform: uppercase; color: var(--navy-900);
    transition: color .18s var(--ease);
}
/* Gạch chân trượt vào từ trái khi hover; đứng yên ở trang đang mở. */
.nav__link::after, .nav__list > li > a::after {
    content: ''; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px;
    border-radius: 2px; background: var(--accent-blue);
    transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
}
.nav__list > li > a:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__list > li > a:hover { color: var(--accent-blue); }
.nav__link.is-active { color: var(--navy-900); }

.nav__caret { width: 12px; height: 12px; flex: none; opacity: .7; transition: transform .2s var(--ease); }
.nav__item--has-menu:hover .nav__caret, .nav__item--has-menu:focus-within .nav__caret { transform: rotate(180deg); }
/* Cầu nối vô hình để chuột đi từ link xuống submenu không bị đóng menu. */
.nav__item--has-menu::before { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }

.submenu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 290px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(0, 0, 71, .14); padding: 8px; opacity: 0; visibility: hidden;
    transform: translateY(6px); transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav__item--has-menu:hover .submenu, .nav__item--has-menu:focus-within .submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu li a {
    display: block; padding: 9px 12px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 600; color: var(--ink-soft);
}
.submenu li a:hover { background: var(--navy-50); color: var(--navy-900); }

/* ---------- Khu vực hành động bên phải ---------- */
.header__cta { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }

.header__phone {
    display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 6px;
    border-radius: var(--radius-pill); border: 1.5px solid var(--line);
    font-weight: 800; font-size: 14.5px; color: var(--navy-900); letter-spacing: .01em;
    transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.header__phone-icon {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent-blue); color: #fff; flex: none;
}
.header__phone-icon svg { width: 14px; height: 14px; }
.header__phone:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

.header__lang {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px;
    border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; color: var(--muted);
    transition: color .18s var(--ease), background-color .18s var(--ease);
}
.header__lang:hover { color: var(--navy-900); background: var(--navy-50); }

.burger {
    display: none; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
    background: #fff; color: var(--navy-900); cursor: pointer;
    transition: border-color .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease);
}
.burger svg { width: 20px; height: 20px; }

/* Hai ngưỡng này đo từ menu năm mục hiện tại, đừng đổi nhãn mà quên đo lại:
   dưới 1180px, số điện thoại không còn chỗ — giữ lại thì nút “Liên hệ” bị cắt
   mất ở mép phải; dưới 1020px thì chính thanh menu cũng hết chỗ, chuyển sang
   nút ba gạch. Sau khi sửa nhãn menu phải đo lại bằng trình duyệt. */
@media (max-width: 1180px) { .header__phone { display: none; } }
@media (max-width: 1020px) {
    .nav, .header__lang { display: none; }
    .burger { display: inline-flex; }
}

/* ---------- Header trong suốt đè lên hero (trang chủ) ---------- */
.has-overlay-header .header { margin-bottom: calc(var(--header-h) * -1); }
.has-overlay-header .hero { padding-top: calc(var(--hero-pad) + var(--header-h)); }

.header--overlay:not(.is-stuck) { background: transparent; }
.header--overlay:not(.is-stuck) .header__logo--dark { opacity: 0; }
.header--overlay:not(.is-stuck) .header__logo--light { opacity: 1; }
.header--overlay:not(.is-stuck) .nav__list > li > a { color: #fff; }
.header--overlay:not(.is-stuck) .nav__list > li > a::after { background: #fff; }
.header--overlay:not(.is-stuck) .header__phone { border-color: rgba(255, 255, 255, .35); color: #fff; }
.header--overlay:not(.is-stuck) .header__phone:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.header--overlay:not(.is-stuck) .header__phone-icon { background: #fff; color: var(--navy-900); }
.header--overlay:not(.is-stuck) .header__lang { color: #dbe6f5; }
.header--overlay:not(.is-stuck) .header__lang:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.header--overlay:not(.is-stuck) .burger { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }

/* ---------- Drawer mobile ---------- */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__scrim {
    position: absolute; inset: 0; background: rgba(0, 0, 30, .5);
    opacity: 0; transition: opacity .22s var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
    background: var(--navy-900); color: var(--on-brand-muted); padding: 22px;
    display: flex; flex-direction: column; gap: 22px; overflow-y: auto;
    transform: translateX(100%); transition: transform .26s var(--ease);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__close {
    width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, .18);
    background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer;
}
.drawer__close svg { width: 18px; height: 18px; }
.drawer__list { display: grid; gap: 4px; }
.drawer__list > li > a { display: block; padding: 12px 6px; font-weight: 700; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.drawer__sub { display: grid; gap: 2px; padding: 4px 0 8px 14px; }
.drawer__sub a { display: block; padding: 7px 6px; font-size: 14px; color: var(--on-brand-muted); }
.drawer__foot { margin-top: auto; display: grid; gap: 10px; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative; overflow: clip;
    background: linear-gradient(155deg, var(--navy-900), var(--navy-700));
    color: #fff; padding-block: clamp(64px, 10vw, 128px);
}
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px;
    background: rgba(255, 85, 0, .16); border: 1px solid rgba(255, 85, 0, .4);
    border-radius: var(--radius-pill); color: #ffb590; font-weight: 700; font-size: 13px;
    letter-spacing: .04em; text-transform: uppercase; margin-bottom: 22px;
}
.hero h1 { color: #fff; max-width: 780px; }
.hero p.lead { color: var(--on-brand-muted); font-size: clamp(16px, 1.5vw, 19px); max-width: 640px; margin-top: 20px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__shape {
    position: absolute; top: -120px; right: -120px; width: 520px; height: 520px;
    border-radius: 50%; background: radial-gradient(circle, rgba(255, 85, 0, .3), transparent 70%);
    pointer-events: none;
}

/* ---------- Hero light (kiểu trang chủ tham chiếu) ---------- */
.hero--light {
    /* Một biến duy nhất cho khoảng đệm dọc của hero: quy tắc header phủ lên hero
       bên dưới cũng dùng lại, tránh hai nơi ghi cùng con số rồi lệch nhau. */
    --hero-pad: clamp(48px, 6vw, 80px);
    background: linear-gradient(180deg, #bfe0f7, #a4d3f2);
    color: var(--ink); padding-block: var(--hero-pad);

    /* Cao khoảng ba phần tư màn hình đầu, chặn trần 660px để trên màn hình lớn
       không bị kéo dài lê thê: màn 1920×1080 ra đúng khoảng 800px, còn từ 1440
       trở xuống thì tỉ lệ 75% mới là thứ quyết định nên gần như giữ nguyên như cũ.
       Chừa lại đủ chỗ để thấy khối bên dưới, người xem biết trang còn nội dung.
       svh là chiều cao khi thanh địa chỉ của trình duyệt di động đang hiện, nên
       nội dung không bị nó che; dòng vh phía trên là bản dự phòng cho trình
       duyệt cũ chưa hiểu svh. min-height chứ không phải height: màn hình quá
       thấp thì khối tự cao thêm thay vì cắt mất nội dung. */
    min-height: min(75vh, 800px);
    min-height: min(75svh, 800px);
    display: grid;
    align-content: center;
}
.hero--light .hero__bg, .hero--light .hero__wave, .hero--light .hero__art { display: none; }
.hero__video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.hero__video-overlay {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(100deg, rgba(0, 10, 40, .72) 0%, rgba(0, 10, 40, .42) 45%, rgba(0, 10, 40, .12) 100%);
}
.hero__grid { z-index: 1; }
.hero--light:has(.hero__video) { color: #fff; }
.hero--light:has(.hero__video) h1 { color: #fff; }
.hero--light:has(.hero__video) p.lead { color: #dbe6f5; }
.hero--light:has(.hero__video) .hero__stat-label { color: #c3d0e6; }
.hero--light:has(.hero__video) .btn--outline { background: transparent; border-color: #fff; color: #fff; }
.hero--light:has(.hero__video) .btn--outline:hover { background: #fff; color: var(--navy-900); }
.hero__bg {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(0, 0, 71, .14) 1px, transparent 1.4px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse 58% 90% at 30% 40%, #000 35%, transparent 75%);
            mask-image: radial-gradient(ellipse 58% 90% at 30% 40%, #000 35%, transparent 75%);
}
.hero__wave {
    position: absolute; left: -8%; bottom: -12%; width: 46%; max-width: 520px;
    pointer-events: none; opacity: .9;
}
.hero__grid {
    position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: clamp(24px, 5vw, 56px); align-items: center;
}
.hero--light .hero__eyebrow {
    display: block; background: none; border: 0; padding: 0; margin-bottom: 14px;
    color: #dbe6f5; font-weight: 700; font-size: clamp(17px, 1.6vw, 20px); letter-spacing: 0; text-transform: none;
}
/* Banner trang chủ căn giữa: tên công ty là dòng nhỏ in hoa phía trên,
   câu tầm nhìn cỡ lớn hơn nằm dưới, giống bản thiết kế đã duyệt. */
/* Bản hero này ẩn cột minh hoạ bên phải, nên phải rút lưới về một cột;
   nếu không, chữ chỉ căn giữa trong nửa trái của khung. */
.hero--light .hero__grid { grid-template-columns: 1fr; text-align: center; }
.hero--light h1 {
    color: var(--navy-900); margin-inline: auto; max-width: 900px;
    font-size: clamp(17px, 1.7vw, 22px); text-transform: uppercase;
    letter-spacing: .01em; line-height: 1.35;
}
.hero--light p.lead {
    color: var(--muted); margin-inline: auto; max-width: 900px; margin-top: 14px;
    font-size: clamp(19px, 2.1vw, 27px); font-weight: 700; line-height: 1.4;
}
/* Cho phép xuống dòng: ba khối số liệu không đủ chỗ nằm ngang trên màn hẹp. */
.hero__stats { display: flex; flex-wrap: wrap; gap: 20px clamp(28px, 4vw, 56px); margin-top: 28px; }
.hero--light .hero__stats { justify-content: center; }
.hero--light .hero__actions { justify-content: center; }
.hero__stat-value { font-size: clamp(30px, 3.6vw, 42px); font-weight: 800; color: #fff; line-height: 1; }
.hero__stat-label { margin-top: 6px; color: var(--ink-soft); font-weight: 600; font-size: 14px; }
.hero--light .hero__actions { margin-top: 30px; }
.hero--light .btn--outline { text-transform: uppercase; letter-spacing: .03em; font-size: 13.5px; padding: 14px 26px; }
.hero__art { position: relative; max-width: 560px; margin-inline: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 71, .12)); }
.hero__art svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__art { order: -1; max-width: 340px; margin-bottom: 4px; }
    .hero__wave { width: 70%; }
}

/* Màn hình hẹp: ba khối số liệu không đủ chỗ nằm ngang nên flex đẩy một khối
   xuống dòng riêng, nhìn lệch hẳn. Đổi sang lưới ba cột bằng nhau để cả ba
   cùng một hàng, kèm giảm cỡ chữ cho vừa cột. */
@media (max-width: 640px) {
    .hero--light .hero__stats {
        display: grid; grid-template-columns: repeat(3, 1fr);
        gap: 10px; margin-top: 30px; align-items: start;
    }
    .hero__stat-value { font-size: 26px; }
    .hero__stat-label { font-size: 12.5px; line-height: 1.35; margin-top: 8px; }

    /* Trên màn hẹp, tên công ty và câu tầm nhìn gần bằng cỡ nhau (17 và 19px) nên
       dính thành một mảng chữ đậm không phân cấp. Trả tên công ty về đúng vai
       dòng nhãn nhỏ: chữ nhỏ hơn, giãn chữ rộng, màu nhẹ bớt; câu tầm nhìn nhấc
       lên một chút để thành trọng tâm. */
    .hero--light h1 {
        font-size: 15px; letter-spacing: .07em; line-height: 1.5;
    }
    .hero--light:has(.hero__video) h1 { color: rgba(255, 255, 255, .82); }
    /* text-wrap: balance chia đều độ dài các dòng thay vì nhồi đầy từng dòng rồi
       bỏ lại một chữ lẻ ở dòng cuối. Kèm cỡ chữ 19px thì cụm “Trí tuệ nhân tạo (AI)”
       luôn nằm trọn một dòng ở mọi bề ngang màn hình điện thoại. Trình duyệt cũ chưa
       hiểu thuộc tính này thì ngắt dòng như cũ, không vỡ gì. */
    .hero--light p.lead {
        font-size: 19px; margin-top: 16px; line-height: 1.45; text-wrap: balance;
    }
    .hero--light .hero__actions { margin-top: 34px; }

    /* Chừa thêm lề hai bên để câu dài không chạy sát mép màn hình. */
    .hero--light h1, .hero--light p.lead { padding-inline: 6px; }
}

/* ============================================================
   Cards
   ============================================================ */
.card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    overflow: hidden; transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: transparent; }
.card__body { padding: 26px; }
.card--media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card__meta { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.card__tag {
    display: inline-block; padding: 4px 11px; border-radius: var(--radius-pill);
    background: var(--orange-50); color: #5c5c72; font-weight: 800; font-size: 12px;
    text-transform: uppercase; letter-spacing: .04em;
}
.card h3 { margin-bottom: 10px; font-size: 19px; }
.card p { color: var(--muted); font-size: 15px; }

/* ---------- Thẻ dịch vụ (flip-style) ---------- */
.service-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 30px 26px; height: 100%; transition: box-shadow .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.service-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); background: var(--navy-900); }
.service-card:hover h3, .service-card:hover p, .service-card:hover .link-arrow { color: #fff; }
.service-card__icon {
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius);
    background: var(--orange-50); color: var(--orange); margin-bottom: 20px;
}
.service-card__icon svg { width: 28px; height: 28px; }
.service-card h3 { margin-bottom: 10px; }
.service-card p { color: var(--muted); margin-bottom: 18px; }

/* ---------- Thẻ giải pháp / khoá học (icon-top) ---------- */
.solution-card { text-align: left; padding: 26px 4px; }
.solution-card__icon {
    display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
    background: var(--navy-900); color: #fff; margin-bottom: 18px;
}
.solution-card__icon svg { width: 24px; height: 24px; }

/* ---------- Giải pháp cho doanh nghiệp thời đại 4.0 ---------- */
.services-section { padding-bottom: 32px; }
.solutions { background: var(--surface-alt); padding-top: 32px; }
.solution-tile {
    background: #fff; border-radius: var(--radius-lg); overflow: hidden;
    box-shadow: var(--shadow-sm); transition: box-shadow .2s var(--ease), transform .2s var(--ease);
    display: flex; flex-direction: column; height: 100%;
}
.solution-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
/* Khi thẻ cuối đứng một mình ở hàng dưới thì đẩy vào cột giữa, thay vì để nó
   lệch hẳn về trái. Chỉ áp dụng đúng trường hợp đó, các trường hợp khác lưới
   giữ nguyên như cũ. */
.solutions .grid--3 > .solution-tile:last-child:nth-child(3n + 1) { grid-column: 2; }
/* Dưới 900px lưới không còn 3 cột nên quy tắc trên phải tắt, không thì thẻ cuối
   bị đẩy sai chỗ. */
@media (max-width: 900px) {
    .solutions .grid--3 > .solution-tile:last-child:nth-child(3n + 1) { grid-column: auto; }
}

.solution-tile__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-50); }
.solution-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.solution-tile__body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.solution-tile__body h3 { font-size: 14.5px; letter-spacing: .01em; margin-bottom: 8px; }
.solution-tile__body p { color: var(--muted); font-size: 14px; line-height: 1.55; flex: 1; margin-bottom: 18px; }
.solution-tile__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.solution-tile__more {
    display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13.5px; color: #5c5c72;
}
.solution-tile__more svg { width: 14px; height: 14px; }
/* ---------- Thẻ số liệu ---------- */
.stat { text-align: center; }
.stat__value { font-size: clamp(32px, 4vw, 46px); font-weight: 800; color: #5c5c72; line-height: 1; }
.stat__label { margin-top: 10px; color: var(--muted); font-weight: 600; font-size: 14.5px; }
.section--dark .stat__label { color: var(--on-brand-muted); }

/* ============================================================
   Đối tác / logo strip
   ============================================================ */
/* ---------- Đối tác nền tảng (Google, Meta, TikTok...) ---------- */
/* Dải mảnh ngay dưới hero: nhãn bên trái, logo trải đều bên phải. */
.platform-partners { padding: clamp(28px, 4vw, 48px) 0; background: var(--surface); }
.platform-partners__inner {
    display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px);
}
.platform-partners__title {
    flex: 0 0 auto; max-width: 180px; margin: 0;
    font-size: clamp(19px, 1.7vw, 25px); line-height: 1.28;
    font-weight: 800; color: var(--navy-900);
}
/* Dải này nằm ngay trên khối “Khách hàng của chúng tôi” — hai băng logo liền nhau.
   Để nguyên thì đệm dưới của dải cộng đệm trên của khối sau thành 144px, rộng ngang
   một khối nội dung nên nhìn như trang bị hụt mất gì đó. Gom lại thành một khoảng
   ngăn duy nhất, do khối phía dưới lo. */
.platform-partners { padding-bottom: 0; }
.platform-partners + .section { padding-top: clamp(40px, 4.5vw, 68px); }
.platform-partners__viewport { flex: 1; min-width: 0; }
.platform-partners__marquee { display: flex; }
.platform-partners__list {
    flex: 1; list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: nowrap; align-items: center;
    justify-content: space-between; gap: clamp(12px, 1.5vw, 22px);
}
/* Bản lặp chỉ phục vụ vòng chạy trên mobile nên ẩn ở màn hình rộng. */
.platform-partners__list--clone { display: none; }
/* Không xuống dòng ở màn hình rộng: logo tự thu nhỏ theo bề ngang còn lại
   để cả dải luôn gọn trên một hàng đúng như thiết kế. */
.platform-partners__item {
    flex: 0 1 auto; min-width: 0; height: clamp(52px, 6.6vw, 96px);
    display: flex; align-items: center; justify-content: center;
}
.platform-partners__item img {
    max-height: 100%; width: auto; max-width: 100%; object-fit: contain;
}
.platform-partners__link { display: flex; align-items: center; height: 100%; }
/* Logo thương hiệu để nguyên màu; chỉ nhấc nhẹ khi rê chuột để báo là liên kết. */
.platform-partners__link img { transition: transform .25s var(--ease); }
.platform-partners__link:hover img { transform: translateY(-3px); }

/* Màn hình hẹp: nhãn lên trên, logo gộp thành một hàng chạy liên tục thay vì
   xuống nhiều dòng — vừa đủ chỗ cho mọi logo, vừa giữ logo ở cỡ đọc được.
   Băng chạy gồm hai bản danh sách giống nhau; dịch trái đúng bề ngang một bản
   (nửa tổng trừ nửa khoảng hở giữa hai bản) thì khung hình lặp lại liền mạch. */
@media (max-width: 900px) {
    .platform-partners__inner { flex-direction: column; gap: 22px; }
    .platform-partners__title { max-width: none; text-align: center; }
    .platform-partners__viewport { width: 100%; overflow: hidden; }
    .platform-partners__marquee {
        --pp-gap: 30px;
        width: max-content; gap: var(--pp-gap);
        animation: pp-marquee 24s linear infinite;
    }
    .platform-partners__list--clone { display: flex; }
    .platform-partners__list {
        flex: none; width: max-content; justify-content: flex-start; gap: var(--pp-gap);
    }
    .platform-partners__item { flex: 0 0 auto; height: 58px; }
    .platform-partners__viewport:hover .platform-partners__marquee { animation-play-state: paused; }
}

@keyframes pp-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - var(--pp-gap) / 2)); }
}

/* Ai tắt hiệu ứng chuyển động thì dừng băng chạy và cho vuốt tay thay thế. */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .platform-partners__marquee { animation: none; }
    .platform-partners__list--clone { display: none; }
    .platform-partners__viewport {
        overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .platform-partners__viewport::-webkit-scrollbar { display: none; }
}

/* ---------- Khách hàng của chúng tôi ---------- */
.partners__title { text-align: center; margin-bottom: 40px; }
.partners__viewport { display: flex; align-items: center; gap: 14px; }
.partners__nav {
    flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line);
    background: #fff; color: var(--navy-900); display: grid; place-items: center; cursor: pointer;
    transition: border-color .18s, color .18s, opacity .18s;
}
.partners__nav svg { width: 16px; height: 16px; }
.partners__nav--prev svg { transform: scaleX(-1); }
.partners__nav:hover { border-color: var(--orange); color: var(--orange); }
.partners__nav:disabled { opacity: .3; cursor: default; pointer-events: none; }

.partners__track {
    flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
}
.partners__track::-webkit-scrollbar { display: none; }
.partners__page {
    flex: 0 0 100%; scroll-snap-align: start;
    /* Xếp bằng flex thay vì grid để hàng cuối chưa đủ cột được căn giữa,
       thay vì dồn về trái và bỏ trống một mảng bên phải. */
    display: flex; flex-wrap: wrap; justify-content: center;
}
.partners__item {
    flex: 0 0 calc(100% / 6);
    position: relative;
    display: flex; align-items: center; justify-content: center; padding: 28px 12px;
}
.partners__item::after {
    content: ''; position: absolute; top: 18%; bottom: 18%; right: 0;
    width: 1px; background: var(--line);
}
.partners__item::before {
    content: ''; position: absolute; left: 14%; right: 14%; bottom: 0;
    height: 1px; background: var(--line);
}
.partners__item:nth-child(6n)::after { display: none; }
.partners__item img { max-height: 80px; width: auto; }

/* Rê chuột: ô logo nổi lên thành một thẻ trắng bo góc. Hai vạch ngăn quanh ô
   được ẩn đi, vì để lại chúng sẽ cắt ngang qua thẻ đang nổi. z-index nâng lên
   để bóng đổ không bị ô kế bên che mất. */
.partners__item {
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.partners__item::after, .partners__item::before { transition: opacity .2s var(--ease); }
.partners__item:hover {
    position: relative; z-index: 1;
    background: #fff; border-radius: var(--radius);
    transform: translateY(-4px); box-shadow: var(--shadow);
}
.partners__item:hover::after, .partners__item:hover::before { opacity: 0; }

@media (max-width: 820px) {
    .partners__item { flex-basis: calc(100% / 3); }
    .partners__item:nth-child(6n)::after { display: block; }
    .partners__item:nth-child(3n)::after { display: none; }
}
@media (max-width: 480px) {
    .partners__item { flex-basis: 50%; }
    .partners__item:nth-child(3n)::after { display: block; }
    .partners__item:nth-child(2n)::after { display: none; }
}
/* Đặt sau các ngưỡng màn hình để luôn thắng: hàng cuối căn giữa nên logo cuối
   không còn nằm ở mép cột, giữ vạch ngăn sẽ thành một nét lửng lơ. */
.partners__item:last-child::after { display: none; }

/* ============================================================
   Prose (nội dung bài viết)
   ============================================================ */
.prose { font-size: 16.5px; line-height: 1.85; color: var(--ink-soft); }
.prose h2, .prose h3 { margin: 1.6em 0 .6em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 1em 0 1em 1.3em; }
.prose li { margin-bottom: .4em; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.4em 0; }

/* Cấu trúc do trình soạn thảo sinh ra: ảnh có chú thích, bảng, trích dẫn. */
.prose figure { margin: 1.6em 0; }
.prose figure img { margin: 0; }
.prose figure figcaption {
    margin-top: .7em; font-size: 14px; color: var(--muted); text-align: center;
}
.prose figure.image-style-side { float: right; max-width: 50%; margin: .4em 0 1.4em 1.6em; }
.prose figure.table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose th { background: var(--surface-alt); font-weight: 600; color: var(--ink); }
.prose blockquote {
    margin: 1.6em 0; padding: 4px 0 4px 20px;
    border-left: 3px solid var(--navy-900); color: var(--ink-soft); font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    .prose figure.image-style-side { float: none; max-width: 100%; margin: 1.6em 0; }
}

/* ============================================================
   Form
   ============================================================ */
.form-card {
    background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 30px;
}
.form-card--flat { background: none; border: none; padding: 0; margin-top: 40px; }
.form-card h3 { margin-bottom: 8px; }
.form-card > p { color: var(--muted); margin-bottom: 22px; }
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.field { display: grid; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.field .req { color: #5c5c72; }
.field input, .field select, .field textarea {
    width: 100%; padding: 13px 16px; font: inherit; font-size: 14.5px;
    border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface-alt); color: var(--ink);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); }
.field select { color: var(--ink-soft); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255, 85, 0, .14);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.lead-form__submit {
    text-transform: uppercase; letter-spacing: .03em;
    border-radius: var(--radius-sm);
}

.contact-cta h2 { max-width: 100%; font-size: clamp(22px, 2.6vw, 30px); }
.contact-cta__list { margin-top: 30px; display: flex; flex-direction: column; gap: 22px; }
.contact-cta__item dt { font-weight: 800; color: var(--navy-900); font-size: 16px; margin-bottom: 6px; }
.contact-cta__item dd { color: var(--ink-soft); margin: 0; padding-left: 16px; }
.contact-cta__item dd a { color: var(--ink-soft); }
.contact-cta__item dd a:hover { color: var(--accent-blue); }
.contact-cta__btn { margin-top: 30px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: 13px 18px; border-radius: var(--radius); font-weight: 600; font-size: 14.5px; }
.alert--ok { background: #e7f6ee; color: #0d6b3d; border: 1px solid #c7ebd6; }
.alert--err { background: #fdecea; color: #a5281b; border: 1px solid #f5c6c1; }

/* ============================================================
   Trang trong: hero phụ + breadcrumb
   ============================================================ */
.pagehero {
    background: linear-gradient(155deg, var(--navy-900), var(--navy-700));
    color: #fff; padding-block: clamp(48px, 7vw, 84px);
}
.pagehero h1 { color: #fff; margin-top: 12px; }
.pagehero p { color: var(--on-brand-muted); margin-top: 14px; max-width: 640px; }
.pagehero--about {
    background: linear-gradient(155deg, rgba(0,0,71,.88), rgba(20,20,90,.8)),
        url('/images/about/hero-banner.jpg') center / cover no-repeat;
    padding-block: clamp(64px, 9vw, 108px);
}
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--on-brand-muted); }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 8px; color: #6b6c9a; }
.breadcrumb a { color: var(--on-brand-muted); font-weight: 600; }
.breadcrumb a:hover { color: #5c5c72; }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--navy-900); color: var(--on-brand-muted); padding-block: 0 26px; }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 18px; }

.footer__newsletter { background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .08); padding-block: 44px; margin-bottom: 48px; }
.footer__newsletter-inner { text-align: center; }
.footer__newsletter h3 { color: #fff; font-size: clamp(20px, 2.4vw, 26px); }
.footer__newsletter p { color: var(--on-brand-muted); margin-top: 8px; font-size: 14.5px; }
.footer__newsletter-form {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 620px; margin: 26px auto 0;
}
.footer__newsletter-form input {
    flex: 1 1 200px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.16);
    background: #fff; color: var(--ink); font: inherit; font-size: 14px;
}
.footer__newsletter-form .btn {
    flex: 0 0 auto; padding: 12px 26px; border-radius: var(--radius-pill);
}

/* Cột “Dịch vụ” có tám mục, gấp đôi các cột khác, nên được ô rộng nhất để chia
   đôi danh sách bên trong; bốn cột nhờ đó cao xấp xỉ nhau thay vì một cột dài thòng
   còn ba cột kết thúc từ sớm. */
.footer__grid {
    display: grid; gap: 40px clamp(24px, 3vw, 44px);
    grid-template-columns: 1.5fr 1fr 2.2fr .9fr;
}

@media (max-width: 1080px) {
    .footer__grid { grid-template-columns: 1.4fr 1fr 1.6fr 1fr; }
    .footer__list--split { columns: 1; }
}
@media (max-width: 900px) {
    .footer__grid { grid-template-columns: repeat(2, 1fr); }
    /* Khối thương hiệu và khối dịch vụ đều dài hơn hẳn hai khối còn lại nên cho
       chúng trải hết bề ngang, tránh cạnh một khối ngắn tạo mảng trống lớn.
       Đẩy luôn khối dịch vụ xuống cuối: để nguyên thứ tự cũ thì nó chen giữa hai
       khối ngắn, mỗi khối ngắn phải chiếm trọn một hàng và bỏ trống nửa còn lại. */
    .footer__brand { grid-column: 1 / -1; }
    .footer__col--services { grid-column: 1 / -1; order: 1; }
    .footer__list--split { columns: 2; }
}
@media (max-width: 560px) {
    .footer__grid { grid-template-columns: 1fr; }
    .footer__list--split { columns: 1; }
}

.footer__logo { height: 38px; width: auto; margin-bottom: 22px; }

/* Địa chỉ và các đầu mối liên hệ: icon cột trái cố định, chữ xuống dòng thì thụt
   thẳng theo icon chứ không chạy ngược về sát lề. */
.footer__contact { display: grid; gap: 13px; font-size: 14.5px; line-height: 1.6; }
.footer__contact li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.footer__contact svg { width: 16px; height: 16px; margin-top: 3px; color: #fff; opacity: .75; }
.footer__contact a { color: var(--on-brand-muted); }
.footer__contact a:hover { color: #fff; }

.footer__list { display: grid; gap: 11px; font-size: 14.5px; align-content: start; }
.footer__list a { color: var(--on-brand-muted); transition: color .18s var(--ease); }
/* Màu hover cũ (#5c5c72) là xám tím tối, đặt trên nền navy thì chữ gần như biến mất.
   Rê chuột phải sáng lên mới đúng. */
.footer__list a:hover { color: #fff; }

/* Chia đôi bằng column-count chứ không phải lưới cố định số hàng: số dịch vụ do
   quản trị viên thêm bớt nên không biết trước là bao nhiêu. Cách này tự cân hai
   cột với mọi số lượng, và vẫn đọc dọc hết cột trái rồi mới sang cột phải. */
.footer__list--split { display: block; columns: 2; column-gap: 24px; }
.footer__list--split li { break-inside: avoid; margin-bottom: 11px; }

.footer__bottom {
    margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px; color: var(--on-brand-muted);
}

/* ============================================================
   Nút nổi (Zalo/phone/lên đầu trang)
   ============================================================ */
.floats--contact { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 90; display: grid; gap: 10px; }
.float-btn {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    background: var(--navy-900); color: #fff; box-shadow: var(--shadow-lg);
    transition: transform .2s var(--ease), filter .2s;
}
.float-btn svg { width: 21px; height: 21px; }
.floats--contact .float-btn { opacity: 1; }

/* Dưới 900px hero xếp một cột nên chữ trải hết bề ngang, cụm nút liên hệ căn
   giữa theo chiều dọc sẽ nằm đè lên. Chuyển cụm nút thành một hàng ngang sát
   đáy: nằm dưới phần nội dung thay vì cắt ngang qua nó, và không lấn vào bề
   ngang chữ. Chừa sẵn chỗ bên phải cho nút cuộn lên đầu trang. */
@media (max-width: 900px) {
    .floats--contact {
        top: auto; transform: none;
        bottom: 22px; right: calc(22px + 48px + 12px);
        grid-auto-flow: column;
    }
}
.float-btn--phone { background: #22c55e; }
/* Logo Zalo đã gồm sẵn hình tròn xanh, nên bỏ màu nền của nút: để lại sẽ thành
   hai sắc xanh lệch nhau chồng lên nhau, lộ một vành mỏng quanh mép. */
.float-btn--zalo { background: transparent; box-shadow: var(--shadow-lg); }
.float-btn--zalo img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.float-btn--mail { background: var(--orange); }
.float-btn:hover { transform: scale(1.07); filter: brightness(1.07); }

.float-btn--top {
    position: fixed; right: 22px; bottom: 22px; z-index: 90;
    opacity: 0; transform: translateY(10px); pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease), filter .2s;
}
.float-btn--top.is-visible { opacity: 1; transform: none; pointer-events: auto; }

/* ============================================================
   Phân trang
   ============================================================ */
.pager { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }
.pager a, .pager span {
    display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
    border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-weight: 700; font-size: 14px;
    color: var(--ink);
}
.pager a:hover { border-color: var(--orange); color: #5c5c72; }
.pager .is-current { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }

/* ============================================================
   Hiệu ứng xuất hiện khi cuộn
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ============================================================
   Hiệu ứng khi rê chuột lên thẻ nội dung
   Chỉ dùng transform và opacity nên trình duyệt xử lý trên GPU,
   không gây giật khi cuộn trang.
   ============================================================ */

/* Ảnh phóng nhẹ trong khung đứng yên. Các thẻ đều đã có overflow:hidden
   nên phần ảnh tràn ra bị cắt gọn theo bo góc. */
.card--media img,
.project-card img,
.solution-tile__img img {
    transition: transform .45s var(--ease);
}
.card:hover img,
.project-card:hover img,
.solution-tile:hover .solution-tile__img img {
    transform: scale(1.06);
}

/* Tiêu đề đổi sang màu thương hiệu để mắt biết đang trỏ vào thẻ nào. */
.card h3, .project-card h3, .solution-tile__body h3 {
    transition: color .2s var(--ease);
}
.card:hover h3,
.project-card:hover h3,
.solution-tile:hover .solution-tile__body h3 {
    color: var(--accent-blue);
}

/* Mũi tên trượt sang phải: transition cho svg đã khai báo sẵn từ trước
   nhưng chưa quy tắc nào dùng tới, nên mũi tên vốn đứng im. */
.link-arrow:hover svg,
.card:hover .link-arrow svg,
.service-card:hover .link-arrow svg,
.solution-tile:hover .solution-tile__more svg {
    transform: translateX(4px);
}
.solution-tile__more svg { transition: transform .18s var(--ease); }

/* ============================================================
   Trang Dự án (/case-study)
   Bố cục dựng theo trang dự án tham chiếu: đầu trang có ba con số,
   lưới dự án lọc theo tab, băng chuyền 3D dự án tiềm năng, khối phản
   hồi hai cột và dải liên hệ cuối trang.
   ============================================================ */
.pj-hero {
    position: relative;
    padding-block: clamp(64px, 8vw, 120px);
    /* Ảnh banner đặt sát đáy vì phần hoạ tiết chấm nằm ở nửa dưới ảnh;
       màu nền trắng lấp phần còn lại khi khung cao hơn ảnh. */
    background: #fff url('/images/hero/du-an-banner.webp') center bottom / cover no-repeat;
    text-align: center;
    overflow: hidden;
}
.pj-hero::before {
    /* Lớp phủ trắng mỏng để chữ navy trên nền ảnh vẫn đủ tương phản. */
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .42) 55%, rgba(255, 255, 255, .2) 100%);
    pointer-events: none;
}
.pj-hero > .container { position: relative; }
.pj-hero__title { text-transform: uppercase; }
.pj-hero__lead {
    max-width: 760px; margin: 24px auto 0;
    color: var(--muted); font-size: clamp(15px, .4vw + 14px, 17px);
}

.pj-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
    max-width: 860px; margin: 48px auto 0;
}
.pj-stat {
    display: flex; flex-direction: column-reverse; justify-content: center;
    padding: 20px; border-radius: 16px; color: #fff; text-align: center;
    background: linear-gradient(180deg, var(--orange) 0%, #ff8800 100%);
    box-shadow: 0 10px 25px rgba(209, 70, 0, .22);
}
.pj-stat__value { font-size: clamp(26px, 2.4vw, 30px); font-weight: 800; line-height: 1; }
.pj-stat__label {
    font-size: 13px; font-weight: 700; line-height: 2.2;
    text-transform: uppercase; letter-spacing: .01em;
}

/* ---------- Lưới dự án ---------- */
.pj-archive { padding-block: var(--section-y); scroll-margin-top: calc(var(--header-h) + 16px); }
.pj-filter {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; margin-bottom: 32px;
}
.pj-tabs {
    display: flex; align-items: center; gap: 8px;
    padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
    max-width: calc(100% - 274px); overflow-x: auto; scrollbar-width: none;
}
.pj-tabs::-webkit-scrollbar { display: none; }
.pj-tab {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 18px;
    border-radius: var(--radius-pill); background: transparent; color: #475467;
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    white-space: nowrap;
    transition: background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.pj-tab:hover, .pj-tab.is-active {
    background: var(--orange); color: #fff; box-shadow: 0 8px 18px rgba(209, 70, 0, .22);
}
.pj-search { width: 250px; flex: 0 0 250px; }
.pj-search__form { position: relative; display: flex; align-items: center; }
.pj-search__icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: #667085; pointer-events: none;
    fill: none; stroke: currentColor; stroke-width: 2;
}
.pj-search__input {
    width: 100%; height: 42px; padding: 0 18px 0 44px; font: inherit; font-size: 13px;
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: #fff; color: var(--ink-soft); box-shadow: 0 8px 24px rgba(15, 23, 42, .035);
}
.pj-search__input::placeholder { color: #8a94a6; }
.pj-search__input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); }

.pj-results { min-height: 320px; }
.pj-empty { color: var(--muted); }
.pj-empty a { color: var(--orange); font-weight: 700; }
.pj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pj-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    overflow: hidden; box-shadow: 0 10px 28px rgba(15, 23, 42, .04);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.pj-card:hover {
    transform: translateY(-4px); border-color: rgba(209, 70, 0, .22);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .1);
}
.pj-card__thumb {
    display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #f3f4f6;
}
.pj-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.pj-card:hover .pj-card__thumb img { transform: scale(1.04); }
.pj-card__thumb-empty {
    display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
    color: #98a2b3; font-size: 14px; font-weight: 700;
}
.pj-card__body { padding: 20px 22px 22px; }
.pj-card__meta {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.pj-card__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pj-card__tag {
    display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
    border-radius: var(--radius-sm); background: var(--orange-50); color: var(--orange);
    font-size: 11px; line-height: 1.15; font-weight: 800; text-transform: uppercase;
}
.pj-card__tag--soft { background: var(--navy-50); color: var(--navy-800); }
.pj-card__year { color: #8a94a6; font-size: 12px; font-weight: 700; line-height: 28px; white-space: nowrap; }
.pj-card__title {
    margin: 0 0 12px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25;
    font-weight: 900; text-transform: uppercase; letter-spacing: -.02em;
}
.pj-card__title a { color: var(--ink); transition: color .2s var(--ease); }
.pj-card__title a:hover { color: var(--orange); }
.pj-card__excerpt { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.pj-card__result { margin: 12px 0 0; color: var(--orange); font-size: 14px; font-weight: 800; }
/* Nút dẫn ra trang thật của dự án. Đặt ở đáy thẻ và có viền để tách hẳn
   với các dòng chữ, vì đây là liên kết duy nhất rời khỏi website. */
.pj-card__visit {
    margin-top: 16px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: var(--radius-pill);
    border: 1.5px solid var(--line); color: var(--navy-900);
    font-size: 13.5px; font-weight: 800;
    transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.pj-card__visit svg { width: 14px; height: 14px; }
.pj-card__visit:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-50); }

.pj-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 40px; }
.pj-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 13px;
    border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: #fff; color: #475467; font-size: 14px; font-weight: 800;
    transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.pj-page-btn:hover, .pj-page-btn.is-active {
    background: var(--orange); border-color: var(--orange); color: #fff;
    box-shadow: 0 10px 20px rgba(209, 70, 0, .18);
}
.pj-page-dots { color: #98a2b3; font-weight: 700; padding: 0 4px; }

/* ---------- Tiêu đề chung của các khối phía dưới ---------- */
.pj-sec-head { text-align: center; margin-bottom: clamp(36px, 4vw, 60px); }
.pj-sec-head h2 {
    position: relative; display: inline-block; margin: 0;
    text-transform: uppercase; letter-spacing: -.5px;
}
.pj-sec-head h2::after {
    content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
    width: 80px; height: 4px; border-radius: 2px;
    background: linear-gradient(135deg, var(--orange) 0%, #ff9f43 100%);
}
.pj-sec-head p {
    max-width: 700px; margin: 28px auto 0;
    color: var(--muted); font-size: 16px; line-height: 1.6; font-weight: 500;
}

/* ---------- Dự án tiềm năng ---------- */
.pj-potential { position: relative; padding-block: var(--section-y); background: #fafbfc; overflow: hidden; }
.pj-carousel {
    position: relative; width: 100%; height: 600px;
    display: flex; align-items: center; justify-content: center;
}
.pj-carousel__track {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; perspective: 1000px;
}
.pj-slide {
    position: absolute; width: 600px; max-width: 92vw;
    background: #fff; border: 1px solid rgba(229, 231, 235, .6); border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .05); overflow: hidden;
    transition: transform .6s cubic-bezier(.25, 1, .5, 1), opacity .6s cubic-bezier(.25, 1, .5, 1),
                filter .6s cubic-bezier(.25, 1, .5, 1), visibility .6s cubic-bezier(.25, 1, .5, 1);
    will-change: transform, opacity, filter;
}
/* Không có JS thì các thẻ vẫn xếp dọc đọc được thay vì chồng lên nhau. */
html:not(.js) .pj-carousel { height: auto; display: block; }
html:not(.js) .pj-carousel__track { display: grid; gap: 24px; justify-items: center; perspective: none; height: auto; }
html:not(.js) .pj-slide { position: static; }
html:not(.js) .pj-carousel__arrow { display: none; }
.pj-slide__img { width: 100%; height: 340px; overflow: hidden; }
.pj-slide__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pj-slide__info { padding: 30px; text-align: left; }
.pj-slide__info h3 { font-size: 20px; font-weight: 800; color: var(--ink); margin: 0 0 18px; line-height: 1.4; }
.pj-slide__meta { display: flex; flex-direction: column; gap: 12px; }
.pj-slide__row { display: flex; flex-direction: column; gap: 4px; }
.pj-slide__label { font-size: 13px; font-weight: 700; color: var(--muted); }
.pj-slide__value { font-size: 14.5px; font-weight: 700; color: var(--navy-900); }
.pj-carousel__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; padding: 0; border-radius: 50%;
    background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    z-index: 10; box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
    transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pj-carousel__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.pj-carousel__arrow--prev { left: 3%; }
.pj-carousel__arrow--prev svg { transform: rotate(180deg); }
.pj-carousel__arrow--next { right: 3%; }
.pj-carousel__arrow:hover {
    background: linear-gradient(135deg, var(--orange) 0%, #ff9f43 100%);
    border-color: transparent; color: #fff;
    box-shadow: 0 6px 18px rgba(209, 70, 0, .35);
    transform: translateY(-50%) scale(1.08);
}

/* ---------- Phản hồi khách hàng ---------- */
.pj-feedback { padding-block: var(--section-y); background: #fff; border-top: 1px solid var(--line); }
.pj-feedback__card {
    display: flex; background: #fff; border: 1px solid var(--line); border-radius: 32px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .04); overflow: hidden;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pj-feedback__card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(0, 0, 0, .08); }
.pj-feedback__left {
    width: 38%; padding: 50px 40px; background: #fafbfc; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pj-feedback__avatar {
    display: grid; place-items: center;
    width: 160px; height: 160px; border-radius: 50%; margin-bottom: 40px;
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
    color: #fff; font-size: 44px; font-weight: 800; letter-spacing: .02em;
    border: 4px solid #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.pj-feedback__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; }
.pj-metric { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.pj-metric__value { font-size: 1.5rem; font-weight: 800; color: var(--navy-900); }
.pj-metric__label { font-size: .75rem; color: var(--muted); line-height: 1.3; }
.pj-feedback__right {
    width: 62%; padding: 60px 50px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.pj-feedback__quote-icon {
    width: 64px; height: 64px; margin-bottom: 20px;
    color: var(--navy-100); fill: currentColor;
}
.pj-feedback__quote {
    margin: 0 0 40px; font-size: 1.25rem; font-weight: 500; line-height: 1.7; color: var(--ink-soft);
}
.pj-feedback__author { display: flex; flex-direction: column; gap: 4px; margin-top: auto; text-align: right; }
.pj-feedback__name { font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.pj-feedback__role { font-size: .85rem; font-weight: 500; color: var(--muted); }

/* ---------- Dải liên hệ cuối trang ---------- */
.pj-cta { padding-block: var(--section-y); background: var(--surface-alt); }
.pj-cta__title { margin-bottom: 3%; }
.pj-cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.pj-cta__info { padding-right: 10%; }
.pj-cta__item { margin-bottom: 26px; }
.pj-cta__label { display: block; font-size: 20px; font-weight: 800; color: var(--navy-900); margin-bottom: 6px; }
.pj-cta__value { display: block; color: var(--ink-soft); font-size: 16px; }
a.pj-cta__value:hover { color: var(--orange); }
.pj-cta__btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 8%; padding: 13px 30px;
    border: 1.5px solid var(--accent-blue); border-radius: var(--radius-pill);
    background: #fff; color: var(--accent-blue);
    font-size: 15px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
    transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.pj-cta__btn:hover {
    background: var(--accent-blue); border-color: var(--accent-blue); color: #fff;
}
/* Nền khối này đã là surface-alt nên ô nhập phải đổi sang trắng mới nổi lên. */
.pj-cta .field input, .pj-cta .field select, .pj-cta .field textarea {
    background: #fff; border-color: var(--line);
}
.pj-cta .form-card--flat { margin-top: 0; }

@media (max-width: 1024px) {
    .pj-filter { align-items: flex-start; flex-direction: column; gap: 16px; }
    .pj-tabs { max-width: 100%; width: 100%; }
    .pj-search { width: 100%; flex: 0 0 auto; }
    .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .pj-carousel { height: 560px; }
    .pj-slide { width: min(520px, 64vw); }
    .pj-slide__img { height: 300px; }
    .pj-slide__info { padding: 26px; }
    .pj-carousel__arrow--prev { left: 16px; }
    .pj-carousel__arrow--next { right: 16px; }
    .pj-feedback__card { flex-direction: column; }
    .pj-feedback__left { width: 100%; padding: 40px 30px; border-right: none; border-bottom: 1px solid var(--line); }
    .pj-feedback__right { width: 100%; padding: 40px 30px; }
    .pj-feedback__avatar { margin-bottom: 30px; }
    .pj-cta__grid { grid-template-columns: 1fr; }
    .pj-cta__info { padding-right: 0; }
}

@media (max-width: 767px) {
    .pj-stats { grid-template-columns: 1fr; gap: 16px; }
    .pj-filter { margin-bottom: 24px; }
    .pj-tab { min-height: 34px; padding: 0 14px; font-size: 11px; }
    .pj-grid { grid-template-columns: 1fr; }
    .pj-card__body { padding: 18px; }
    .pj-carousel { height: 560px; }
    /* Chừa một dải dưới cùng cho hai mũi tên, nếu không chúng đè lên đáy thẻ. */
    .pj-carousel__track { height: calc(100% - 56px); perspective: 700px; }
    .pj-slide { width: min(360px, 78vw); border-radius: 18px; box-shadow: 0 12px 32px rgba(0, 0, 0, .08); }
    .pj-slide__img { height: 210px; }
    .pj-slide__info { padding: 20px; }
    .pj-slide__info h3 { font-size: 16px; margin-bottom: 14px; }
    /* Trên điện thoại hai mũi tên xuống đáy, vì thẻ đã chiếm gần hết bề ngang.
       Dồn về bên trái để không đụng cụm nút liên hệ cố định ở góc phải màn hình. */
    .pj-carousel__arrow { top: auto; bottom: 0; width: 42px; height: 42px; transform: none; }
    .pj-carousel__arrow:hover { transform: scale(1.06); }
    .pj-carousel__arrow--prev { left: 0; }
    .pj-carousel__arrow--next { right: auto; left: 54px; }
    .pj-feedback__card { border-radius: 24px; }
    .pj-feedback__left { padding: 32px 22px; }
    .pj-feedback__avatar { width: 130px; height: 130px; font-size: 36px; margin-bottom: 28px; }
    .pj-feedback__metrics { grid-template-columns: 1fr; gap: 18px; }
    .pj-feedback__right { padding: 32px 24px; }
    .pj-feedback__quote-icon { width: 48px; height: 48px; }
    .pj-feedback__quote { font-size: 1rem; margin-bottom: 32px; }
    .pj-feedback__author { text-align: left; }
    .pj-cta__btn { font-size: 14px; }
}

@media (max-width: 480px) {
    .pj-carousel { height: 530px; }
    .pj-slide { width: min(330px, 82vw); }
    .pj-slide__img { height: 190px; }
}