/* =========================================================================
InnoSME Vietnam - Giao diện "Công nghệ"
Kiểu chữ : Inter, phông chính theo bộ nhận diện, tự lưu trên máy chủ
Bảng màu : Navy - Xanh dương - Cam, lấy nguyên từ bộ nhận diện InnoSME
Bản quyền thuộc về InnoSME. Phần mềm thương mại.
========================================================================= */
/* Phông chữ KHÔNG nạp bằng @import nữa.
Lý do: @import nằm bên trong tệp CSS nên PHP không chen được dấu chống nhớ
đệm vào — trình duyệt giữ font.css cũ hàng tháng, đổi phông xong người dùng
vẫn thấy phông cũ (đã xảy ra thật khi chuyển sang Kodchasan). Giờ font.css
được nạp bằng thẻ không
có luật nào và hiện nguyên khối ngay dưới đầu trang. */
.cn-dieu-huong { display: none; }
.cn-nut-mb {
display: none; width: 44px; height: 44px; border: 1px solid var(--ino-vien);
border-radius: 14px; background: var(--ino-nen); cursor: pointer;
flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.cn-nut-mb span { display: block; width: 18px; height: 2px; background: var(--ino-chu); border-radius: 2px; transition: .24s; }
.cn-nut-mb[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cn-nut-mb[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cn-nut-mb[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ------------------------------------------------------------------ Hero */
.cn-hero { position: relative; padding: 88px 0 100px; overflow: hidden; }
.cn-hero-nen { position: absolute; inset: 0; z-index: -1; }
.cn-hero-nen::before {
content: ""; position: absolute; inset: -20% -10% auto -10%; height: 130%;
background:
radial-gradient(680px 420px at 8% 4%, color-mix(in srgb, var(--ino-chinh) 22%, transparent), transparent 60%),
radial-gradient(600px 400px at 88% 0%, color-mix(in srgb, var(--ino-phu) 20%, transparent), transparent 58%),
radial-gradient(520px 380px at 62% 78%, color-mix(in srgb, var(--ino-nhan) 12%, transparent), transparent 60%);
filter: blur(4px);
}
.cn-hero-nen::after {
content: ""; position: absolute; inset: 0; opacity: .42;
background-image:
linear-gradient(to right, var(--ino-vien) 1px, transparent 1px),
linear-gradient(to bottom, var(--ino-vien) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 30%, transparent 76%);
-webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 30%, transparent 76%);
}
.cn-hero-trong { display: grid; grid-template-columns: 1.04fr .96fr; gap: 60px; align-items: center; }
.cn-hero-tieu-de {
font-size: clamp(36px, 5.2vw, 60px); font-weight: 800; margin: 0 0 20px;
letter-spacing: -.038em; line-height: 1.16;
}
.cn-hero-mo-ta {
font-size: 18.5px; color: var(--ino-chu-mo); margin: 0 0 32px; max-width: 550px; line-height: 1.7;
}
.cn-hero-nut { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.cn-hero-diem { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.cn-hero-diem li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--ino-chu-mo); font-weight: 500; }
.cn-hero-diem span {
width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
display: grid; place-items: center; font-size: 11px; font-weight: 700;
background: color-mix(in srgb, var(--ino-phu) 22%, transparent);
color: color-mix(in srgb, var(--ino-phu) 72%, #000);
}
/* Cửa sổ mã nguồn minh hoạ */
.cn-hero-hinh { position: relative; }
.cn-cua-so {
background: #100D22; border-radius: 20px; overflow: hidden;
box-shadow: var(--ino-bong-cao); border: 1px solid #241E44;
transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
.cn-cua-so:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.cn-cua-so-thanh {
display: flex; align-items: center; gap: 7px; padding: 13px 17px;
background: #171235; border-bottom: 1px solid #241E44;
}
.cn-cua-so-thanh .cham { width: 11px; height: 11px; border-radius: 50%; display: block; }
.cn-cua-so-thanh .do { background: #FF5F57; }
.cn-cua-so-thanh .vang { background: var(--ino-nhan); }
.cn-cua-so-thanh .luc { background: var(--ino-phu); }
.cn-cua-so-ten { margin-left: 10px; font-size: 12.5px; color: #6F6890; font-family: var(--ino-font-ma); }
.cn-ma {
margin: 0; padding: 22px; overflow-x: auto;
font-family: var(--ino-font-ma); font-size: 13px; line-height: 1.9; color: #C8C2E8;
}
.cn-ma .c { color: #6F6890; font-style: italic; }
.cn-ma .k { color: #B69EFF; }
.cn-ma .s { color: var(--ino-phu); }
.cn-ma .n { color: var(--ino-nhan); }
.cn-ma .f { color: #63D6FF; }
.cn-the-noi {
position: absolute; display: flex; align-items: center; gap: 12px;
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: 16px; padding: 13px 18px; box-shadow: var(--ino-bong-cao);
animation: cn-troi 5s ease-in-out infinite;
}
.cn-the-noi .bt { font-size: 20px; }
.cn-the-noi strong { display: block; font-size: 13.5px; font-family: var(--ino-font-tieu-de); font-weight: 600; }
.cn-the-noi small { display: block; font-size: 12px; color: var(--ino-chu-mo); }
.cn-the-noi-1 { top: -24px; right: -18px; }
.cn-the-noi-2 { bottom: -26px; left: -26px; animation-delay: -2.5s; }
@keyframes cn-troi {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) {
.cn-the-noi { animation: none; }
.cn-cua-so { transform: none; }
html { scroll-behavior: auto; }
.master-phone { animation: none !important; }
}
/* --------------------------------------------------------------- Số liệu */
.cn-so-lieu { padding: 0 0 12px; }
.cn-so-lieu-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cn-so-lieu-luoi > div {
background: var(--ino-nen-phu); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc); padding: 28px 22px; text-align: center;
transition: transform .2s, border-color .2s;
}
.cn-so-lieu-luoi > div:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ino-chinh) 32%, var(--ino-vien)); }
.cn-so-lieu-luoi strong {
display: block; font-family: var(--ino-font-tieu-de);
font-size: 36px; font-weight: 800; letter-spacing: -.045em; line-height: 1.1;
background: linear-gradient(115deg, var(--ino-chinh), var(--ino-phu));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.cn-so-lieu-luoi span { font-size: 14px; color: var(--ino-chu-mo); }
/* ------------------------------------------------------------------- Khu */
.cn-khu { padding: 15px 0; }
.cn-khu-nen { background: var(--ino-nen-phu); }
/* Tiêu đề khối: nhãn + h2 bên trái, mô tả bên phải bắt đầu bằng dấu "|".
Dùng CSS Grid thay vì bọc thêm div, vì markup của 8 khối trên trang chủ
(và 2 khối ở trang danh mục/chi tiết giải pháp) đều là ba phần tử con trực
tiếp trong : p.cn-nhan, h2, rồi tới p.cn-khu-mo-ta (nếu có). Khối
nào không có mô tả thì cột phải để trống, tiêu đề vẫn đứng bên trái đúng ý. */
.cn-khu-dau {
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
column-gap: 48px; align-items: end; max-width: none; margin: 0 0 56px; text-align: left;
}
.cn-khu-dau .cn-nhan { grid-column: 1; grid-row: 1; justify-self: start; }
.cn-khu-dau h2 { grid-column: 1; grid-row: 2; margin: 0; font-size: clamp(26px, 2vw, 31px); font-weight: 800; letter-spacing: -.035em; }
.cn-khu-dau .cn-khu-mo-ta { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.cn-khu-mo-ta {
display: flex; align-items: stretch; gap: 14px; color: var(--ino-chu-mo);
font-size: 14.5px; font-weight: 400; margin: 0; line-height: 1.7;
}
/* Vẽ thanh kẻ bằng CSS thay vì ký tự "|" — ký tự phụ thuộc phông chữ nên
mảnh và cao thấp không đều, còn vẽ thế này cho ra một thanh đặc, kéo dài
đúng hết chiều cao đoạn mô tả dù mô tả có mấy dòng. */
.cn-khu-mo-ta::before {
content: ""; flex: none; width: 3px; border-radius: 2px;
background: var(--ino-chinh);
}
.cn-khu-dau-ngang {
max-width: none; text-align: left; display: flex; align-items: flex-end;
justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cn-khu-chan { text-align: center; margin: 44px 0 0; color: var(--ino-chu-mo); }
/* ------------------------------------------------------------------ Lưới */
.cn-luoi-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.cn-luoi-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cn-luoi-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cn-luoi-nganh { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* -------------------------------------------------- Bento: khối dịch vụ */
.cn-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cn-bento > .cn-the-dv:first-child { grid-column: span 2; grid-row: span 2; }
.cn-the-dv {
position: relative; overflow: hidden;
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc); padding: 30px 28px;
display: flex; flex-direction: column;
transition: transform .22s cubic-bezier(.2, .8, .3, 1), box-shadow .22s, border-color .22s;
}
.cn-the-dv::after {
content: ""; position: absolute; inset: auto -30% -60% auto; width: 260px; height: 260px;
border-radius: 50%; opacity: 0; transition: opacity .3s; pointer-events: none;
background: radial-gradient(circle, color-mix(in srgb, var(--ino-chinh) 16%, transparent), transparent 70%);
}
.cn-the-dv:hover {
transform: translateY(-6px); box-shadow: var(--ino-bong-cao);
border-color: color-mix(in srgb, var(--ino-chinh) 34%, var(--ino-vien));
}
.cn-the-dv:hover::after { opacity: 1; }
.cn-the-dv-icon {
position: relative; z-index: 1;
display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px;
border-radius: 17px; font-size: 25px;
background: linear-gradient(140deg,
color-mix(in srgb, var(--ino-chinh) 15%, transparent),
color-mix(in srgb, var(--ino-phu) 15%, transparent));
border: 1px solid color-mix(in srgb, var(--ino-chinh) 12%, transparent);
}
.cn-the-dv h3 { position: relative; z-index: 1; font-size: 19.5px; }
.cn-the-dv p { position: relative; z-index: 1; color: var(--ino-chu-mo); font-size: 15px; margin: 0 0 18px; }
.cn-the-dv ul {
position: relative; z-index: 1; list-style: none; margin: 18px 0 0; padding: 17px 0 0;
border-top: 1px solid var(--ino-vien);
}
.cn-the-dv li { position: relative; padding-left: 24px; font-size: 14.5px; margin-bottom: 9px; color: var(--ino-chu-mo); }
.cn-the-dv li:last-child { margin-bottom: 0; }
.cn-the-dv li::before {
content: ""; position: absolute; left: 0; top: 8px;
width: 13px; height: 7px; border-left: 2px solid var(--ino-phu); border-bottom: 2px solid var(--ino-phu);
transform: rotate(-45deg);
}
/* Thẻ lớn trong bento được nhấn mạnh hơn */
.cn-bento > .cn-the-dv:first-child {
background: linear-gradient(150deg,
color-mix(in srgb, var(--ino-chinh) 7%, var(--ino-nen)),
var(--ino-nen) 58%);
padding: 38px 34px;
}
.cn-bento > .cn-the-dv:first-child { justify-content: center; }
.cn-bento > .cn-the-dv:first-child::after { opacity: .55; inset: auto -18% -50% auto; }
.cn-bento > .cn-the-dv:first-child .cn-the-dv-icon { width: 68px; height: 68px; font-size: 31px; border-radius: 20px; }
/* --------------------------------------------------- Lưới ảnh mẫu website
Phá lề của thẻ lớn (padding: 38px 34px) để lưới tràn sát viền dưới/hai bên,
nằm ở cuối thẻ (sau mô tả và gạch đầu dòng). Chỉ để xem, không bấm được. */
.cn-slide-mau {
position: relative; margin: 24px -34px -38px; overflow: hidden;
border-radius: 0 0 var(--ino-goc) var(--ino-goc);
background: var(--ino-nen-phu); border-top: 1px solid var(--ino-vien);
}
.cn-slide-mau-luoi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.cn-slide-mau-o {
position: relative; display: block; aspect-ratio: 4 / 3; margin: 0; padding: 0;
border: 0; overflow: hidden; background: var(--ino-nen-phu);
}
.cn-slide-mau-o img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.cn-slide-mau-o:hover img { transform: scale(1.08); }
.cn-slide-mau-nhan {
position: absolute; inset: auto 0 0 0; margin: 0; padding: 5px 7px 4px; text-align: left;
background: linear-gradient(0deg, rgba(13, 27, 61, .78), transparent);
color: #fff; font-size: 10px; font-weight: 600; line-height: 1.25;
opacity: 0; transition: opacity .2s ease;
}
.cn-slide-mau-o:hover .cn-slide-mau-nhan { opacity: 1; }
.cn-bento > .cn-the-dv:first-child h3 { font-size: 27px; }
.cn-bento > .cn-the-dv:first-child p { font-size: 17px; max-width: 60ch; margin-bottom: 24px; }
/* Danh sách gạch đầu dòng xếp 2 cột cho lấp đầy thẻ lớn */
.cn-bento > .cn-the-dv:first-child ul {
margin: 0; padding-top: 22px;
display: grid; grid-template-columns: 1fr 1fr; gap: 10px 34px;
}
.cn-bento > .cn-the-dv:first-child li { margin-bottom: 0; font-size: 15px; }
/* ------------------------------------------------------- Thẻ ứng dụng web */
.cn-the-ud {
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc); padding: 0 26px 28px; overflow: hidden;
display: flex; flex-direction: column;
transition: transform .22s, box-shadow .22s, border-color .22s;
}
/* Ảnh mô phỏng màn hình ứng dụng (SVG dựng trong phan/minh-hoa.php).
Ảnh tràn hết bề ngang thẻ nên phải kéo lề âm bù lại phần padding hai bên. */
.cn-the-ud-anh {
margin: 0 -26px 24px; padding: 26px 26px 0; overflow: hidden;
background: linear-gradient(150deg, color-mix(in srgb, var(--ino-chinh) 9%, #fff), var(--ino-nen-phu));
border-bottom: 1px solid var(--ino-vien);
}
.cn-the-ud-anh .cn-mh-ud {
display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0;
box-shadow: 0 -1px 4px rgba(13, 27, 61, .05), 0 14px 30px rgba(13, 27, 61, .14);
transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}
.cn-the-ud:hover .cn-mh-ud { transform: translateY(-6px); }
.cn-the-ud:hover {
transform: translateY(-5px); box-shadow: var(--ino-bong-cao);
border-color: color-mix(in srgb, var(--ino-phu) 42%, var(--ino-vien));
}
.cn-the-ud-dau { display: flex; align-items: center; gap: 15px; margin-bottom: 16px; }
.cn-the-ud-dau h3 { font-size: 18.5px; margin: 0; }
.cn-the-ud-icon {
display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0;
border-radius: 16px; font-size: 23px;
background: linear-gradient(140deg,
color-mix(in srgb, var(--ino-phu) 17%, transparent),
color-mix(in srgb, var(--ino-chinh) 13%, transparent));
}
.cn-the-ud-en, .cn-the-en {
display: block; font-family: var(--ino-font-tieu-de);
font-size: 11px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(--ino-chu-nhat); margin-top: 3px;
}
.cn-the-ud p { font-size: 14.5px; color: var(--ino-chu-mo); margin: 0 0 18px; }
.cn-the-ky-thuat { display: flex; flex-wrap: wrap; gap: 7px; }
.cn-the-ky-thuat span {
font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: var(--ino-goc-pill);
background: var(--ino-nen-phu); border: 1px solid var(--ino-vien); color: var(--ino-chu-mo);
}
/* --------------------------------------------------------------- Thẻ ngành */
.cn-the-nganh {
position: relative; overflow: hidden;
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc); padding: 24px;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cn-the-nganh::before {
content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
background: linear-gradient(180deg, var(--ino-chinh), var(--ino-phu));
transform: scaleY(0); transform-origin: top; transition: transform .3s;
}
.cn-the-nganh:hover { transform: translateY(-4px); box-shadow: var(--ino-bong); }
.cn-the-nganh:hover::before { transform: scaleY(1); }
.cn-the-nganh-dau { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.cn-the-nganh-dau > span { font-size: 27px; flex-shrink: 0; }
.cn-the-nganh-dau h3 { font-size: 17.5px; margin: 0; }
.cn-the-nganh p { font-size: 14.5px; margin: 0 0 10px; color: var(--ino-chu-mo); }
.cn-the-nganh p:last-child { margin-bottom: 0; }
.cn-bai-toan strong { color: #A9660A; font-weight: 600; }
.cn-giai-phap strong { color: var(--ino-chinh); font-weight: 600; }
:root[data-theme="dark"] .cn-bai-toan strong { color: var(--ino-nhan); }
/* ---------------------------------------------------------- Khối nền tảng */
.cn-nen-tang-trong { display: grid; grid-template-columns: 1fr 1fr; gap: 62px; align-items: center; }
.cn-ds-tich { list-style: none; margin: 28px 0 32px; padding: 0; }
.cn-ds-tich li {
position: relative; padding-left: 36px; margin-bottom: 17px;
font-size: 15.5px; color: var(--ino-chu-mo);
}
.cn-ds-tich li strong { color: var(--ino-chu); font-family: var(--ino-font-tieu-de); font-weight: 600; }
.cn-ds-tich li::before {
content: "✓"; position: absolute; left: 0; top: 2px;
width: 23px; height: 23px; border-radius: 8px;
background: linear-gradient(140deg, var(--ino-chinh), var(--ino-phu));
color: #fff; font-size: 12px; font-weight: 700;
display: grid; place-items: center;
}
/* Ảnh chụp trang quản trị */
.cn-nen-tang-hinh {
border-radius: 16px; overflow: hidden; border: 1px solid var(--ino-vien);
box-shadow: var(--ino-bong-cao);
}
.cn-nen-tang-hinh img { display: block; width: 100%; height: auto; }
/* -------------------------------------------------------------- Quy trình */
.cn-quy-trinh {
list-style: none; margin: 0; padding: 0; position: relative;
display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
}
.cn-quy-trinh::before {
content: ""; position: absolute; top: 50px; left: 9%; right: 9%; height: 2px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--ino-chinh) 42%, transparent),
color-mix(in srgb, var(--ino-phu) 42%, transparent));
}
.cn-quy-trinh li {
position: relative; background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc); padding: 28px 22px 22px; z-index: 1;
display: flex; flex-direction: column;
transition: transform .2s, box-shadow .2s;
}
.cn-quy-trinh li:hover { transform: translateY(-4px); box-shadow: var(--ino-bong); }
/* Biểu tượng vẽ nét ở góc phải mỗi bước quy trình. Đặt mờ để làm nền,
đậm dần khi rê chuột — bổ trợ cho con số chứ không tranh chỗ với nó. */
.cn-qt-hinh {
position: absolute; top: 22px; right: 20px; color: var(--ino-chinh);
opacity: .2; transition: opacity .25s, transform .25s;
}
.cn-qt-hinh .cn-mh-qt { display: block; width: 34px; height: 34px; }
.cn-quy-trinh li:hover .cn-qt-hinh { opacity: .55; transform: scale(1.08); }
.cn-qt-so {
display: inline-grid; place-items: center; width: 44px; height: 44px;
font-family: var(--ino-font-tieu-de); font-size: 14px; font-weight: 800;
border-radius: 14px; margin-bottom: 15px;
background: linear-gradient(140deg, var(--ino-chinh), var(--ino-phu)); color: #fff;
box-shadow: 0 6px 16px color-mix(in srgb, var(--ino-chinh) 30%, transparent);
}
.cn-quy-trinh h3 { font-size: 17px; margin-bottom: 10px; }
/* p tự giãn (flex:1) hút khoảng trống thừa — khối thời gian bên dưới luôn
thẳng hàng ở đáy thẻ, nhưng khoảng cách 15px phía trên nó luôn được giữ
nguyên (trước đây lệch nhau theo độ dài chữ mô tả). */
.cn-quy-trinh p { font-size: 14.5px; color: var(--ino-chu-mo); margin: 0 0 15px; flex: 1; }
.cn-qt-tg {
display: inline-block; align-self: flex-start;
font-size: 12.5px; font-weight: 600;
color: var(--ino-chinh); background: color-mix(in srgb, var(--ino-chinh) 9%, transparent);
padding: 4px 13px; border-radius: var(--ino-goc-pill);
}
/* --------------------------------------------------------- Năng lực, cam kết */
.cn-the-nl, .cn-the-ck {
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc); padding: 26px 24px;
display: flex; flex-direction: column;
transition: transform .2s, box-shadow .2s;
}
.cn-the-nl:hover, .cn-the-ck:hover { transform: translateY(-4px); box-shadow: var(--ino-bong); }
.cn-the-nl h3, .cn-the-ck h3 { font-size: 17.5px; }
.cn-the-nl p, .cn-the-ck p { font-size: 14.5px; color: var(--ino-chu-mo); margin: 0; }
/* p tự giãn (flex:1) hút khoảng trống thừa — dải thẻ công nghệ luôn thẳng
hàng ở đáy thẻ, nhưng khoảng cách 16px phía trên nó luôn được giữ nguyên. */
.cn-the-nl p { flex: 1; }
.cn-the-nl .cn-the-ky-thuat { margin-top: 16px; }
.cn-the-ck-icon {
display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px;
border-radius: 16px; font-size: 23px;
background: linear-gradient(140deg,
color-mix(in srgb, var(--ino-chinh) 14%, transparent),
color-mix(in srgb, var(--ino-phu) 14%, transparent));
}
/* --------------------------------------------------------------- Bảng giá */
.cn-goi {
position: relative;
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc); padding: 34px 30px;
display: flex; flex-direction: column;
transition: transform .2s, box-shadow .2s;
}
.cn-goi:hover { transform: translateY(-4px); box-shadow: var(--ino-bong); }
.cn-goi.noi-bat {
background:
linear-gradient(var(--ino-nen), var(--ino-nen)) padding-box,
linear-gradient(150deg, var(--ino-chinh), var(--ino-phu)) border-box;
border: 2px solid transparent;
box-shadow: var(--ino-bong-cao);
}
.cn-goi-nhan {
position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
background: linear-gradient(115deg, var(--ino-chinh), var(--ino-phu)); color: #fff;
font-family: var(--ino-font-tieu-de);
font-size: 12px; font-weight: 700; padding: 6px 17px;
border-radius: var(--ino-goc-pill); white-space: nowrap;
box-shadow: 0 6px 16px color-mix(in srgb, var(--ino-chinh) 32%, transparent);
}
.cn-goi h3 { font-size: 21px; margin-bottom: 6px; }
.cn-goi-phu { font-size: 14px; color: var(--ino-chu-mo); margin: 0 0 22px; min-height: 44px; }
.cn-goi-gia { padding-bottom: 22px; border-bottom: 1px solid var(--ino-vien); margin-bottom: 22px; }
.cn-goi-gia strong {
display: block; font-family: var(--ino-font-tieu-de);
font-size: 29px; font-weight: 800; letter-spacing: -.04em;
}
.cn-goi-gia small { font-size: 13.5px; color: var(--ino-chu-mo); }
.cn-goi ul { list-style: none; margin: 0 0 26px; padding: 0; flex: 1; }
.cn-goi li { position: relative; padding-left: 26px; margin-bottom: 12px; font-size: 14.5px; color: var(--ino-chu-mo); }
.cn-goi li::before {
content: ""; position: absolute; left: 0; top: 8px;
width: 13px; height: 7px; border-left: 2px solid var(--ino-phu); border-bottom: 2px solid var(--ino-phu);
transform: rotate(-45deg);
}
/* ------------------------------------------------------------- Cảm nhận */
.cn-the-cn {
margin: 0; background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc); padding: 30px 28px;
}
.cn-the-cn blockquote { margin: 0 0 22px; font-size: 15.5px; position: relative; padding-top: 34px; }
.cn-the-cn blockquote::before {
content: "\201C"; position: absolute; top: -6px; left: -4px;
font-size: 68px; line-height: 1; font-family: Georgia, serif;
background: linear-gradient(140deg, var(--ino-chinh), var(--ino-phu));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.cn-the-cn figcaption { display: flex; align-items: center; gap: 13px; }
.cn-cn-anh { flex-shrink: 0; }
.cn-cn-anh .cn-mh-cd {
display: block; width: 46px; height: 46px; border-radius: 50%;
border: 1px solid var(--ino-vien);
}
/* Tên và chức vụ nằm CÙNG MỘT HÀNG, ngăn bằng dấu chấm giữa. Xếp chồng hai
dòng làm phần chân thẻ cao lên và các thẻ trong băng chuyền so le nhau.
Màn hẹp thì cho xuống dòng tự nhiên, không ép một hàng tới mức tràn. */
.cn-the-cn figcaption .cn-cn-ten {
/* Để chữ chảy liền như một câu, KHÔNG dùng flex.
Flex biến tên và chức vụ thành hai ô riêng, thẻ hẹp là mỗi ô một dòng —
đúng cái phải tránh. Chảy inline thì hai phần luôn nối nhau trên cùng
một hàng, chỉ xuống dòng khi thật sự hết chỗ và xuống giữa câu chứ
không tách khối. */
display: block; min-width: 0; line-height: 1.5;
}
.cn-the-cn figcaption strong { display: inline; font-size: 14.5px; font-family: var(--ino-font-tieu-de); }
.cn-the-cn figcaption .cn-cn-ten > span { display: inline; font-size: 13px; color: var(--ino-chu-mo); }
/* Dấu ngăn tự vẽ: không nằm trong HTML nên khi xuống dòng không thừa ra một
dấu chấm lửng lơ đầu dòng dưới. */
.cn-the-cn figcaption .cn-cn-ten > span::before { content: "·"; margin-right: 7px; color: var(--ino-chu-nhat); }
/* ------------------------------------- Liên kết "Xem chi tiết" trong thẻ
Thẻ trên trang chủ trước đây không bấm được, người xem đọc xong không biết
đi tiếp bằng đường nào. Liên kết này vừa hiện chữ rõ ràng, vừa phủ vô hình
lên toàn bộ thẻ nhờ ::after — nên bấm chỗ nào trong thẻ cũng đi được.
Chữ thật vẫn nằm trong thẻ , không dùng onclick, nên Google đọc được
liên kết này và trình đọc màn hình cũng đọc đúng. */
.cn-the-dv, .cn-the-ud, .cn-the-nganh { position: relative; }
.cn-xem-them {
display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
align-self: flex-start;
font-size: 14.5px; font-weight: 600; color: var(--ino-chinh);
}
/* Đoạn mô tả (p) bên trên tự giãn (flex:1) để hút hết khoảng trống thừa khi
thẻ bên cạnh có chữ dài hơn — nhờ vậy liên kết luôn thẳng hàng ở đáy thẻ,
nhưng khoảng cách 18px phía trên liên kết luôn được giữ nguyên, không bị
ép sát dù thẻ đó là thẻ có nội dung dài nhất hàng. */
.cn-the-ud p,
.cn-bento > .cn-the-dv:not(:first-child) p { flex: 1; }
.cn-xem-them span { transition: transform .25s; }
/* z-index phải cao hơn nội dung bên trong thẻ.
.cn-the-dv đặt h3, p và ul ở z-index 1 để nổi trên vệt sáng trang trí;
nếu lớp phủ này để mặc định thì nó nằm dưới, bấm vào chữ sẽ không ăn —
đúng hiện tượng "chỉ bấm được đúng dòng Xem chi tiết". */
.cn-xem-them::after {
content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
}
/* Lớp phủ nằm đè lên cả chữ "Xem chi tiết", nhưng nó là ::after của chính
thẻ đó nên bấm vào vẫn kích hoạt đúng liên kết. Không cần nâng thêm. */
.cn-the-dv:hover .cn-xem-them span,
.cn-the-ud:hover .cn-xem-them span,
.cn-the-nganh:hover .cn-xem-them span { transform: translateX(4px); }
.cn-xem-them:hover { text-decoration: none; color: var(--ino-nhan); }
/* Con trỏ hình bàn tay trên cả thẻ để người xem biết bấm được */
.cn-the-dv, .cn-the-ud, .cn-the-nganh { cursor: pointer; }
/* ------------------------------------------------------------- Thẻ bài viết */
.cn-the-bai {
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc); overflow: hidden;
display: flex; flex-direction: column; transition: transform .22s, box-shadow .22s;
}
.cn-the-bai:hover { transform: translateY(-5px); box-shadow: var(--ino-bong-cao); }
.cn-the-bai-anh { display: block; aspect-ratio: 16/9; background: var(--ino-nen-phu); overflow: hidden; }
.cn-the-bai-anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cn-the-bai:hover .cn-the-bai-anh img { transform: scale(1.06); }
.cn-the-bai-trong { width: 100%; height: 100%; display: grid; place-items: center; font-size: 32px; opacity: .25; }
.cn-the-bai-than { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.cn-the-bai-cm {
align-self: flex-start; margin-bottom: 12px; padding: 4px 13px; border-radius: var(--ino-goc-pill);
font-size: 12px; font-weight: 600;
background: color-mix(in srgb, var(--ino-chinh) 10%, transparent); color: var(--ino-chinh);
}
.cn-the-bai-cm:hover { text-decoration: none; }
.cn-the-bai h3 { font-size: 18px; margin-bottom: 11px; letter-spacing: -.026em; }
.cn-the-bai h3 a { color: var(--ino-chu); }
.cn-the-bai h3 a:hover { color: var(--ino-chinh); text-decoration: none; }
.cn-the-bai p { font-size: 14.5px; color: var(--ino-chu-mo); margin: 0 0 18px; flex: 1; }
.cn-the-bai-chan {
display: flex; gap: 16px; font-size: 13px; color: var(--ino-chu-nhat);
padding-top: 15px; border-top: 1px solid var(--ino-vien);
}
/* ------------------------------------------------------------------- FAQ */
.cn-faq { display: flex; flex-direction: column; gap: 13px; }
.cn-faq details {
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc-nho); overflow: hidden; transition: border-color .2s;
}
.cn-faq details[open] { border-color: color-mix(in srgb, var(--ino-chinh) 30%, var(--ino-vien)); }
.cn-faq summary {
padding: 20px 58px 20px 24px; font-size: 16.5px;
font-family: var(--ino-font-tieu-de); font-weight: 600;
cursor: pointer; list-style: none; position: relative;
}
.cn-faq summary::-webkit-details-marker { display: none; }
.cn-faq summary::after {
content: ""; position: absolute; right: 24px; top: 50%;
width: 11px; height: 11px; margin-top: -8px;
border-right: 2px solid var(--ino-chinh); border-bottom: 2px solid var(--ino-chinh);
transform: rotate(45deg); transition: transform .25s;
}
.cn-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.cn-faq summary:hover { color: var(--ino-chinh); }
.cn-faq-dap { padding: 0 24px 22px; color: var(--ino-chu-mo); font-size: 15.5px; }
/* ------------------------------------------------------------------- CTA */
.cn-cta {
padding: 28px 0; position: relative; overflow: hidden; color: #fff;
background: linear-gradient(125deg, #0D1B3D 0%, #0A3A7A 52%, #0A66C2 100%);
}
.cn-cta::before {
content: ""; position: absolute; inset: 0;
/* Vệt xanh sáng ở góc trên và vệt cam ở góc dưới, đúng cặp màu nhấn
của bộ nhận diện */
background:
radial-gradient(600px 300px at 12% 0%, rgba(46, 167, 255, .42), transparent 60%),
radial-gradient(520px 300px at 88% 100%, rgba(255, 122, 0, .26), transparent 62%);
}
.cn-cta::after {
content: ""; position: absolute; inset: 0;
background-image:
linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
background-size: 52px 52px;
}
.cn-cta-trong {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.cn-cta h2 { font-size: clamp(22px, 1.8vw, 27px); margin-bottom: 8px; letter-spacing: -.03em; }
.cn-cta p { color: rgba(255, 255, 255, .78); max-width: 560px; margin: 0; font-size: 15px; line-height: 1.5; }
.cn-cta-nut { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
/* -------------------------------------------------------------- Chân trang */
/* Chân trang nền sáng: tách khỏi thân trang bằng nền xám nhạt và một đường kẻ,
không dùng khối màu đậm nữa vì cả trang đã theo tông sáng. */
.cn-chan {
background: var(--ino-nen-phu); color: var(--ino-chu-mo);
padding: 40px 0 20px; border-top: 1px solid var(--ino-vien);
}
.cn-chan a { color: var(--ino-chu-mo); }
.cn-chan a:hover { color: var(--ino-chinh); }
.cn-chan-luoi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; }
/* Chỉ còn cột giới thiệu (đã bỏ 3 cột menu liên kết) — 1 cột duy nhất, không kéo giãn hết chiều ngang */
.cn-chan-luoi-don { grid-template-columns: minmax(0, 1fr); }
/* Hàng đầu cột giới thiệu: logo (1/4) + thông điệp (3/4) nằm ngang, giống bố cục header */
.cn-chan-dau { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }
.cn-chan-dau .cn-logo { flex: 1 0 0; }
.cn-chan-thong-diep {
flex: 3 0 0; margin: 0; min-width: 0;
font-size: 14px; line-height: 1.55; color: var(--ino-chu-mo);
}
.cn-chan-cot h2 {
font-family: var(--ino-font-tieu-de);
font-size: 14px; font-weight: 700; color: var(--ino-chu); margin-bottom: 20px;
letter-spacing: .06em; text-transform: uppercase;
}
.cn-chan-lh { list-style: none; margin: 0 0 20px; padding: 0; font-size: 14.5px; }
.cn-chan-lh li { margin-bottom: 10px; display: flex; gap: 10px; }
.cn-chan-menu { list-style: none; margin: 0; padding: 0; }
.cn-chan-menu li { margin-bottom: 11px; }
.cn-chan-menu a, .cn-chan-menu .ino-menu-link { font-size: 14.5px; }
.cn-mxh { display: flex; gap: 9px; flex-wrap: wrap; }
.cn-mxh a {
padding: 6px 16px; border-radius: var(--ino-goc-pill); border: 1px solid var(--ino-vien);
font-size: 13px; color: var(--ino-chu-mo); background: var(--ino-nen);
}
.cn-mxh a:hover { border-color: var(--ino-chinh); color: var(--ino-chinh); text-decoration: none; background: color-mix(in srgb, var(--ino-chinh) 8%, #fff); }
.cn-chan-cuoi {
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--ino-vien);
font-size: 13.5px; color: var(--ino-chu-nhat);
}
.cn-chan-cuoi strong { color: var(--ino-chu-mo); }
/* ------------------------------------------------------- Nút nổi, lên đầu */
.cn-goi-nhanh {
position: fixed; left: 22px; bottom: 22px; z-index: 90;
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px; border-radius: var(--ino-goc-pill);
background: linear-gradient(115deg, var(--ino-chinh), var(--ino-phu));
color: #fff; font-family: var(--ino-font-tieu-de); font-weight: 600; font-size: 14.5px;
box-shadow: 0 12px 30px color-mix(in srgb, var(--ino-chinh) 42%, transparent);
}
.cn-goi-nhanh:hover { text-decoration: none; transform: translateY(-2px); }
.cn-len-dau {
position: fixed; right: 22px; bottom: 22px; z-index: 90;
width: 48px; height: 48px; border-radius: 16px;
border: 1px solid var(--ino-vien); background: var(--ino-nen); color: var(--ino-chu);
font-size: 19px; cursor: pointer; box-shadow: var(--ino-bong);
opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s, background .18s;
}
.cn-len-dau.hien { opacity: 1; pointer-events: auto; }
.cn-len-dau:hover { background: var(--ino-chinh); color: #fff; border-color: var(--ino-chinh); }
/* Lối tắt vào trang quản trị — góc dưới bên trái, đối xứng với nút lên đầu
trang ở góc phải. Chỉ hiện với người đã đăng nhập nên khách không thấy. */
.cn-vao-quan-tri {
position: fixed; left: 22px; bottom: 22px; z-index: 90;
display: inline-flex; align-items: center; gap: 8px;
height: 48px; padding: 0 16px; border-radius: 16px;
border: 1px solid var(--ino-vien); background: var(--ino-nen); color: var(--ino-chu);
font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: var(--ino-bong);
transition: background .18s, color .18s, border-color .18s;
}
.cn-vao-quan-tri:hover {
background: var(--ino-chinh); color: #fff; border-color: var(--ino-chinh); text-decoration: none;
}
@media (max-width: 680px) {
/* Màn hình nhỏ chỉ giữ biểu tượng cho gọn */
.cn-vao-quan-tri { padding: 0; width: 48px; justify-content: center; }
.cn-vao-quan-tri-chu { display: none; }
}
/* ------------------------------------------------------------ Trang trong */
.cn-dau-trang-con {
padding: 30px 0 30px; background: var(--ino-nen-phu); border-bottom: 1px solid var(--ino-vien);
}
.cn-dau-trang-con h1 { font-size: clamp(26px, 2vw, 31px); font-weight: 800; letter-spacing: -.04em; }
.cn-dau-trang-con p { color: var(--ino-chu-mo); max-width: 720px; margin: 0; }
.cn-vun { font-size: 13.5px; color: var(--ino-chu-mo); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.cn-vun a { color: var(--ino-chu-mo); }
.cn-vun .hien-tai { color: var(--ino-chu); font-weight: 500; }
.cn-hai-cot { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 48px; padding: 56px 0 84px; align-items: start; }
.cn-cot-ben { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; }
.cn-o-ben { background: var(--ino-nen-phu); border: 1px solid var(--ino-vien); border-radius: var(--ino-goc); padding: 24px; }
.cn-o-ben h2 { font-size: 16px; margin-bottom: 16px; }
.cn-ds-ben { list-style: none; margin: 0; padding: 0; }
.cn-ds-ben li { padding: 11px 0; border-bottom: 1px solid var(--ino-vien); font-size: 14.5px; }
.cn-ds-ben li:last-child { border-bottom: 0; padding-bottom: 0; }
.cn-ds-ben a { color: var(--ino-chu); }
.cn-ds-ben a:hover { color: var(--ino-chinh); }
.cn-ds-ben time { display: block; font-size: 12.5px; color: var(--ino-chu-nhat); margin-top: 3px; }
/* Ô "14 Core Engines" ở cột bên — chỉ hiện khi đang đọc 1 bài giới thiệu engine */
.cn-o-ben-engine-phu { margin: -8px 0 12px; font-size: 13px; color: var(--ino-chu-mo); }
.cn-o-ben-engine-cuon {
max-height: 360px; overflow-y: auto; margin: 0 -6px; padding: 0 6px;
}
.cn-o-ben-engine-nhom {
margin: 14px 0 2px; font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .07em; color: var(--ino-chu-nhat);
}
.cn-o-ben-engine-nhom:first-child { margin-top: 0; }
.cn-ds-ben-engine li { padding: 7px 0; font-size: 13.5px; }
.cn-ds-ben-engine a { display: block; }
.cn-engine-dang-xem {
display: block; font-weight: 700; color: var(--ino-chinh);
}
.cn-o-ben-engine-tat-ca {
display: block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ino-vien);
font-size: 13.5px; font-weight: 700; color: var(--ino-chinh);
}
.cn-o-ben-engine-cuon::-webkit-scrollbar { width: 6px; }
.cn-o-ben-engine-cuon::-webkit-scrollbar-thumb { background: var(--ino-vien); border-radius: 3px; }
.cn-o-tim-ben { display: flex; gap: 8px; }
.cn-o-tim-ben input {
flex: 1; min-width: 0; padding: 11px 15px; border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc-nho); background: var(--ino-nen); color: var(--ino-chu);
font-family: inherit; font-size: 14.5px;
}
.cn-o-tim-ben button {
padding: 11px 18px; border: 0; border-radius: var(--ino-goc-nho); cursor: pointer;
background: var(--ino-chinh); color: #fff; font-family: var(--ino-font-tieu-de); font-weight: 600;
}
.cn-bai { min-width: 0; }
.cn-bai-tieu-de { font-size: clamp(29px, 4.2vw, 44px); font-weight: 800; margin: 16px 0 18px; letter-spacing: -.04em; }
.cn-bai-tt { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--ino-chu-mo); margin-bottom: 30px; }
.cn-bai-anh { margin: 0 0 32px; }
.cn-bai-anh img { width: 100%; border-radius: var(--ino-goc); }
.cn-bai-tom-tat {
font-size: 17.5px; color: var(--ino-chu-mo); padding: 20px 26px; margin: 0 0 32px;
background: var(--ino-nen-phu); border-radius: var(--ino-goc-nho);
border-left: 3px solid var(--ino-chinh);
}
.cn-noi-dung { font-size: 17.5px; line-height: 1.85; }
.cn-noi-dung > *:first-child { margin-top: 0; }
.cn-noi-dung h2 { font-size: 27px; margin: 42px 0 16px; }
.cn-noi-dung h3 { font-size: 21px; margin: 32px 0 12px; }
.cn-noi-dung p { margin: 0 0 22px; }
.cn-noi-dung img { border-radius: var(--ino-goc-nho); margin: 14px 0; }
.cn-noi-dung ul, .cn-noi-dung ol { margin: 0 0 22px; padding-left: 26px; }
.cn-noi-dung li { margin-bottom: 9px; }
.cn-noi-dung blockquote {
margin: 28px 0; padding: 18px 26px; border-left: 3px solid var(--ino-chinh);
background: var(--ino-nen-phu); color: var(--ino-chu-mo); border-radius: 0 var(--ino-goc-nho) var(--ino-goc-nho) 0;
}
.cn-noi-dung pre {
background: #100D22; color: #C8C2E8; padding: 20px; border-radius: var(--ino-goc-nho);
overflow-x: auto; font-size: 14px; font-family: var(--ino-font-ma);
}
.cn-noi-dung code { background: var(--ino-nen-phu); padding: 2px 7px; border-radius: 6px; font-size: 15px; font-family: var(--ino-font-ma); }
.cn-noi-dung pre code { background: none; padding: 0; }
.cn-noi-dung table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15.5px; }
.cn-noi-dung th, .cn-noi-dung td { border: 1px solid var(--ino-vien); padding: 13px 16px; text-align: left; }
.cn-noi-dung th { background: var(--ino-nen-phu); font-family: var(--ino-font-tieu-de); font-weight: 600; }
.cn-the-bai-the { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 34px; font-size: 14px; color: var(--ino-chu-mo); }
.cn-the-bai-the a { padding: 5px 14px; border-radius: var(--ino-goc-pill); border: 1px solid var(--ino-vien); color: var(--ino-chu-mo); font-size: 13.5px; }
.cn-the-bai-the a:hover { border-color: var(--ino-chinh); color: var(--ino-chinh); text-decoration: none; }
.cn-phan-trang { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }
.cn-phan-trang a, .cn-phan-trang span {
min-width: 44px; height: 44px; padding: 0 15px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho);
font-size: 14.5px; font-weight: 500; color: var(--ino-chu);
}
.cn-phan-trang a:hover { border-color: var(--ino-chinh); color: var(--ino-chinh); text-decoration: none; }
.cn-phan-trang .dang-xem {
background: linear-gradient(115deg, var(--ino-chinh), var(--ino-phu));
border-color: transparent; color: #fff; font-weight: 600;
}
.cn-phan-trang .cach { border: 0; }
.cn-rong-trang { text-align: center; padding: 76px 20px; color: var(--ino-chu-mo); }
.cn-rong-trang .bt { font-size: 48px; margin-bottom: 16px; opacity: .35; }
.cn-rong-trang h2 { font-size: 21px; color: var(--ino-chu); }
.cn-404 { text-align: center; padding: 100px 20px; }
.cn-404-so {
font-family: var(--ino-font-tieu-de);
font-size: clamp(80px, 17vw, 160px); font-weight: 800; line-height: 1; letter-spacing: -.05em;
background: linear-gradient(115deg, var(--ino-chinh), var(--ino-phu));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.cn-404 p { color: var(--ino-chu-mo); margin: 0 0 30px; }
/* --------------------------------------------- Kêu gọi hành động trong bài */
.cn-bai-cta {
margin: 48px 0 0; padding: 32px 34px; border-radius: var(--ino-goc);
background: linear-gradient(140deg,
color-mix(in srgb, var(--ino-chinh) 9%, transparent),
color-mix(in srgb, var(--ino-phu) 9%, transparent));
border: 1px solid color-mix(in srgb, var(--ino-chinh) 18%, transparent);
display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.cn-bai-cta h2 { font-size: 21px; margin-bottom: 8px; }
.cn-bai-cta p { margin: 0; color: var(--ino-chu-mo); font-size: 15px; }
/* -------------------------------------------------------------- Biểu mẫu */
.cn-form { display: flex; flex-direction: column; gap: 14px; }
.cn-form-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cn-form input, .cn-form textarea, .cn-form select {
padding: 14px 18px; border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho);
font-size: 15.5px; font-family: inherit; background: var(--ino-nen); color: var(--ino-chu);
width: 100%; transition: border-color .16s, box-shadow .16s;
}
.cn-form input::placeholder, .cn-form textarea::placeholder { color: var(--ino-chu-nhat); }
.cn-form input:focus, .cn-form textarea:focus, .cn-form select:focus {
outline: none; border-color: var(--ino-chinh);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--ino-chinh) 12%, transparent);
}
.cn-form button { align-self: flex-start; }
.cn-tb { padding: 15px 20px; border-radius: var(--ino-goc-nho); margin-bottom: 22px; font-size: 15px; }
.cn-tb.thanh-cong { background: color-mix(in srgb, var(--ino-phu) 14%, transparent); color: #0A6B52; border: 1px solid color-mix(in srgb, var(--ino-phu) 34%, transparent); }
.cn-tb.loi { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
:root[data-theme="dark"] .cn-tb.thanh-cong { color: var(--ino-phu); }
:root[data-theme="dark"] .cn-tb.loi { background: #2A1015; color: #FCA5A5; border-color: #4A1D22; }
/* ================================================ Trang danh mục / chi tiết */
.cn-doc-tiep {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--ino-font-tieu-de); font-weight: 600; font-size: 14.5px;
color: var(--ino-chinh);
}
.cn-doc-tiep:hover { text-decoration: none; gap: 10px; transition: gap .18s; }
.cn-the-nganh h2, .cn-the-ud h2 { font-size: 17.5px; margin: 0; }
.cn-the-nganh h2 a, .cn-the-ud h2 a { color: var(--ino-chu); }
.cn-the-nganh h2 a:hover, .cn-the-ud h2 a:hover { color: var(--ino-chinh); text-decoration: none; }
/* Đầu trang chi tiết */
.cn-ct-dau { display: flex; align-items: flex-start; gap: 22px; }
.cn-ct-dau h1 { margin: 0 0 12px; }
.cn-ct-dau > div > p { margin: 0; font-size: 17px; }
.cn-ct-icon {
display: grid; place-items: center; width: 76px; height: 76px; flex-shrink: 0;
border-radius: 22px; font-size: 36px; margin-top: 6px;
background: linear-gradient(140deg,
color-mix(in srgb, var(--ino-chinh) 16%, transparent),
color-mix(in srgb, var(--ino-phu) 16%, transparent));
border: 1px solid color-mix(in srgb, var(--ino-chinh) 14%, transparent);
}
.cn-ct-luoi {
display: grid; grid-template-columns: minmax(0, 1fr) 330px;
gap: 48px; padding: 56px 0 80px; align-items: start;
}
.cn-ct-khoi { margin-bottom: 42px; }
.cn-ct-khoi h2 { font-size: 25px; margin-bottom: 16px; }
.cn-ct-khoi > p { font-size: 17px; color: var(--ino-chu-mo); margin: 0; }
/* Danh sách khó khăn: dấu chấm than màu hổ phách */
.cn-ds-van-de { list-style: none; margin: 0; padding: 0; }
.cn-ds-van-de li {
position: relative; padding: 14px 18px 14px 52px; margin-bottom: 10px;
background: var(--ino-nen-phu); border-radius: var(--ino-goc-nho);
font-size: 15.5px; color: var(--ino-chu-mo);
}
.cn-ds-van-de li::before {
content: "!"; position: absolute; left: 17px; top: 15px;
width: 22px; height: 22px; border-radius: 7px;
background: color-mix(in srgb, var(--ino-nhan) 24%, transparent);
color: #A9660A; font-weight: 800; font-size: 13px;
display: grid; place-items: center;
}
:root[data-theme="dark"] .cn-ds-van-de li::before { color: var(--ino-nhan); }
/* Kết quả nhận được */
.cn-ds-ket-qua { display: grid; gap: 12px; }
.cn-ds-ket-qua > div {
display: flex; align-items: flex-start; gap: 13px;
padding: 16px 20px; border-radius: var(--ino-goc-nho);
background: color-mix(in srgb, var(--ino-phu) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--ino-phu) 22%, transparent);
font-size: 15.5px;
}
.cn-ds-ket-qua span {
width: 23px; height: 23px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
display: grid; place-items: center; font-size: 12px; font-weight: 700;
background: linear-gradient(140deg, var(--ino-chinh), var(--ino-phu)); color: #fff;
}
/* Ô nổi bật ở cột bên */
.cn-o-ben-noi-bat {
background: linear-gradient(140deg, var(--ino-chinh), var(--ino-phu));
border: 0; color: #fff;
}
.cn-o-ben-noi-bat p { font-size: 14.5px; margin: 0 0 18px; color: rgba(255, 255, 255, .9); }
.cn-o-ben-noi-bat .cn-o-ben-goi { font-size: 14px; }
.cn-o-ben-noi-bat .cn-o-ben-goi a { color: #fff; font-weight: 700; }
/* ==================================================== Danh sách mẫu demo */
.cn-demo-luoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.cn-demo-the {
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc); overflow: hidden;
display: flex; flex-direction: column;
transition: transform .22s, box-shadow .22s, border-color .22s;
}
.cn-demo-the:hover {
transform: translateY(-5px); box-shadow: var(--ino-bong-cao);
border-color: color-mix(in srgb, var(--ino-chinh) 32%, var(--ino-vien));
}
/* Ảnh xem trước dựng bằng CSS, không cần chụp màn hình */
.cn-demo-xem { display: block; position: relative; }
.cn-demo-anh {
display: block; padding: 26px 26px 0; aspect-ratio: 16/10; overflow: hidden;
}
.cn-demo-khung {
display: block; height: 100%; border-radius: 12px 12px 0 0;
padding: 14px 16px; box-shadow: 0 -6px 26px rgba(0, 0, 0, .18);
}
.cn-demo-thanh { display: flex; gap: 6px; align-items: center; margin-bottom: 16px; }
.cn-demo-thanh i { height: 6px; border-radius: 3px; background: rgba(128, 128, 128, .28); flex: 1; }
.cn-demo-thanh i:first-child { width: 26px; flex: none; height: 10px; border-radius: 4px; }
.cn-demo-tieu-de { display: block; height: 15px; width: 62%; border-radius: 5px; margin-bottom: 9px; }
.cn-demo-dong { display: block; height: 7px; width: 88%; border-radius: 4px; background: rgba(128, 128, 128, .24); margin-bottom: 6px; }
.cn-demo-dong.ngan { width: 64%; margin-bottom: 14px; }
.cn-demo-nut { display: block; height: 20px; width: 96px; border-radius: 999px; margin-bottom: 16px; }
.cn-demo-o { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cn-demo-o b { display: block; height: 42px; border-radius: 8px; background: rgba(128, 128, 128, .16); }
.cn-demo-phu-de {
position: absolute; inset: auto 0 0 0; padding: 26px 0 12px; text-align: center;
font-size: 12.5px; font-weight: 600; color: #fff;
background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent);
opacity: 0; transition: opacity .22s;
}
.cn-demo-the:hover .cn-demo-phu-de { opacity: 1; }
.cn-demo-than { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.cn-demo-dau { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cn-demo-dau h2 { font-size: 20px; margin: 0; }
.cn-demo-dau h2 a { color: var(--ino-chu); }
.cn-demo-dau h2 a:hover { color: var(--ino-chinh); text-decoration: none; }
.cn-demo-so {
flex-shrink: 0; padding: 7px 14px; border-radius: var(--ino-goc-pill);
font-family: var(--ino-font-tieu-de); font-size: 12.5px; font-weight: 700;
background: linear-gradient(115deg, var(--ino-chinh), var(--ino-phu)); color: #fff;
}
.cn-demo-than > p { font-size: 15px; color: var(--ino-chu-mo); margin: 0 0 16px; }
.cn-demo-diem { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.cn-demo-diem li {
font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: var(--ino-goc-pill);
background: color-mix(in srgb, var(--ino-phu) 12%, transparent);
color: color-mix(in srgb, var(--ino-phu) 70%, #000);
}
:root[data-theme="dark"] .cn-demo-diem li { color: var(--ino-phu); }
.cn-demo-hop { font-size: 14px; color: var(--ino-chu-mo); margin: 0 0 20px; }
.cn-demo-hop strong { color: var(--ino-chu); }
.cn-demo-nut-hang { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.cn-demo-luu-y {
margin-top: 34px; padding: 22px 26px; border-radius: var(--ino-goc);
background: var(--ino-nen-phu); border: 1px solid var(--ino-vien);
font-size: 15px; color: var(--ino-chu-mo); line-height: 1.75;
}
.cn-demo-luu-y strong { color: var(--ino-chu); }
/* ---------------------------------------------------------- Màn hình vừa */
@media (max-width: 1150px) {
.cn-ct-luoi { grid-template-columns: 1fr; gap: 38px; }
.cn-luoi-2, .cn-luoi-3, .cn-luoi-nganh { grid-template-columns: repeat(2, 1fr); }
.cn-luoi-4 { grid-template-columns: repeat(2, 1fr); }
.cn-bento { grid-template-columns: repeat(2, 1fr); }
.cn-bento > .cn-the-dv:first-child { grid-column: span 2; grid-row: span 1; }
.cn-quy-trinh { grid-template-columns: repeat(3, 1fr); }
.cn-quy-trinh::before { display: none; }
.cn-hai-cot { grid-template-columns: 1fr; gap: 38px; }
.cn-cot-ben { position: static; }
}
@media (max-width: 980px) {
.cn-hero-trong { grid-template-columns: 1fr; gap: 48px; }
.cn-hero-hinh { order: -1; }
.cn-the-noi { display: none; }
.cn-cua-so { transform: none; }
.cn-nen-tang-trong { grid-template-columns: 1fr; gap: 40px; }
.cn-so-lieu-luoi { grid-template-columns: repeat(2, 1fr); }
.cn-chan-luoi { grid-template-columns: 1fr 1fr; gap: 36px; }
.cn-nut-mb { display: flex; }
.cn-an-mb { display: none !important; }
/* Trên điện thoại, mọi lối điều hướng dồn vào menu ba gạch — không nhồi nút
vào hàng đầu trang. Nhồi thêm một nút là hàng bị đẩy tràn ra ngoài màn
hình (đã xảy ra: trang cuộn ngang được 522px trên máy 375px), mà nới cho
xuống dòng thì đầu trang dính cao tới ba dòng, ăn một phần năm màn hình. */
.cn-dau-phai { display: none; }
.cn-logo img { height: 34px; width: auto; }
/* Nút ba gạch nằm sát mép phải — hàng nút bên phải đã ẩn nên nếu không đẩy,
nút sẽ dính ngay cạnh logo bên trái. */
.cn-nut-mb { margin-left: auto; }
/* Bảng menu bám ngay dưới đầu trang. Dùng absolute theo chính header (header
là sticky nên đã là gốc định vị) thay vì fixed kèm toạ độ cứng — như vậy
thêm hay bỏ thanh trên cùng, đổi chiều cao header, menu vẫn luôn nằm đúng
dưới header mà không phải sửa lại con số nào. */
.cn-dieu-huong {
position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
background: var(--ino-nen); border-bottom: 1px solid var(--ino-vien);
padding: 14px 20px 20px; display: none; box-shadow: var(--ino-bong-cao);
max-height: calc(100vh - var(--ino-cao-dinh)); overflow-y: auto;
}
.cn-dieu-huong.mo { display: block; }
.cn-dh-ds { display: flex; flex-direction: column; gap: 6px; }
.cn-dh-ds a {
display: flex; align-items: center; gap: 10px;
padding: 13px 15px; border-radius: var(--ino-goc-nho, 12px);
text-decoration: none; font-size: 16px; font-weight: 600;
color: var(--ino-chu); background: var(--ino-nen-phu, #F2F4F7);
}
.cn-dh-ds a.chinh { background: var(--ino-chinh); color: #fff; justify-content: center; }
.cn-dh-ds a.chinh:hover { filter: brightness(.95); }
.cn-dh-tach { margin: 10px 0 4px; border: 0; border-top: 1px solid var(--ino-vien); }
/* Nhãn nhóm cha trong menu điện thoại — giữ đúng thứ bậc của menu desktop
thay vì đổ tất cả thành một danh sách phẳng. */
.cn-dh-nhom {
display: block; margin: 12px 0 2px; padding: 0 4px;
font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: var(--ino-chu-nhat, #8A94A6);
}
.cn-dh-nhom:first-child { margin-top: 0; }
.cn-dh-lh {
display: block; margin-top: 12px; text-align: center;
font-size: 14.5px; color: var(--ino-chu-mo); text-decoration: none;
}
.cn-dh-lh strong { color: var(--ino-chinh); }
.cn-menu { flex-direction: column; gap: 3px; }
.cn-menu .ino-menu-link { padding: 13px 16px; font-size: 16.5px; border-radius: var(--ino-goc-nho); }
.cn-menu-con,
.cn-menu .menu-rong > .cn-menu-con {
display: block; position: static; min-width: 0;
border: 0; box-shadow: none; background: none;
padding: 2px 0 10px 14px; margin: 0;
border-left: 2px solid var(--ino-vien);
}
.cn-menu .ino-menu-muc:nth-last-child(-n+2) > .cn-menu-con { right: auto; }
.cn-menu-con .ino-menu-link { padding: 10px 14px; font-size: 15px; }
}
@media (max-width: 680px) {
.cn-khu { padding: 15px 0; }
.cn-luoi-2, .cn-luoi-3, .cn-luoi-4, .cn-luoi-nganh, .cn-quy-trinh, .cn-bento,
.cn-demo-luoi { grid-template-columns: 1fr; }
.cn-bento > .cn-the-dv:first-child { grid-column: span 1; padding: 30px 26px; }
.cn-bento > .cn-the-dv:first-child h3 { font-size: 21px; }
.cn-bento > .cn-the-dv:first-child .cn-the-dv-icon { width: 56px; height: 56px; font-size: 25px; }
.cn-bento > .cn-the-dv:first-child ul { grid-template-columns: 1fr; gap: 9px; }
.cn-slide-mau { margin: 20px -26px -30px; }
.cn-slide-mau-luoi { grid-template-columns: repeat(4, 1fr); }
.cn-so-lieu-luoi { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cn-so-lieu-luoi > div { padding: 22px 16px; }
.cn-so-lieu-luoi strong { font-size: 30px; }
.cn-chan-luoi { grid-template-columns: 1fr; gap: 32px; }
.cn-hero { padding: 52px 0 68px; }
.cn-hero-nut .cn-nut { flex: 1; }
.cn-ct-dau { flex-direction: column; gap: 16px; }
.cn-ct-icon { width: 62px; height: 62px; font-size: 29px; margin-top: 0; }
.cn-ct-khoi h2 { font-size: 22px; }
.cn-cta-trong, .cn-bai-cta { flex-direction: column; align-items: flex-start; }
.cn-form-hang { grid-template-columns: 1fr; }
.cn-goi-nhanh-chu { display: none; }
.cn-goi-nhanh { padding: 15px; }
.cn-thanh-tren-trong { justify-content: center; }
.cn-thanh-tren-phai { margin-left: 0; gap: 16px; }
.cn-noi-dung { font-size: 16.5px; }
}
/* =========================================================================
Lời mời xem website mẫu + danh mục module trên trang giải pháp theo ngành
========================================================================= */
.cn-moi-demo {
display: flex; align-items: center; justify-content: space-between; gap: 26px;
margin: 0 0 42px; padding: 26px 28px; border-radius: var(--ino-goc);
background: linear-gradient(120deg,
color-mix(in srgb, var(--ino-chinh) 9%, var(--ino-nen)),
color-mix(in srgb, var(--ino-phu) 8%, var(--ino-nen)));
border: 1px solid color-mix(in srgb, var(--ino-chinh) 22%, transparent);
}
.cn-moi-demo h2 { font-size: 21px; margin-bottom: 8px; }
.cn-moi-demo p { margin: 0; color: var(--ino-chu-mo); font-size: 15px; max-width: 56ch; }
.cn-moi-demo .cn-nut { flex-shrink: 0; }
.cn-module-mo-ta { color: var(--ino-chu-mo); margin-bottom: 22px; }
.cn-module-ds { display: flex; flex-direction: column; gap: 11px; }
.cn-module-nhom {
border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho);
background: var(--ino-nen); overflow: hidden; transition: border-color .18s;
}
.cn-module-nhom[open] { border-color: color-mix(in srgb, var(--ino-chinh) 40%, transparent); }
.cn-module-nhom summary {
display: flex; align-items: center; gap: 14px; padding: 16px 18px;
cursor: pointer; list-style: none;
}
.cn-module-nhom summary::-webkit-details-marker { display: none; }
.cn-module-nhom summary:hover { background: var(--ino-nen-phu); }
.cn-module-icon {
width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
display: grid; place-items: center; font-size: 20px;
background: var(--ino-nen-phu);
}
.cn-module-ten { flex: 1; min-width: 0; }
.cn-module-ten strong {
display: block; font-family: var(--ino-font-tieu-de);
font-size: 16.5px; font-weight: 700; letter-spacing: -.015em;
}
.cn-module-ten small { display: block; font-size: 13.5px; color: var(--ino-chu-mo); line-height: 1.5; }
.cn-module-dem {
flex-shrink: 0; min-width: 30px; height: 26px; padding: 0 9px; border-radius: 999px;
display: grid; place-items: center; font-size: 13px; font-weight: 700;
background: color-mix(in srgb, var(--ino-chinh) 12%, transparent); color: var(--ino-chinh);
}
/* Dấu cộng đổi thành trừ khi nhóm đang mở, để biết bấm được vào đâu */
.cn-module-nhom summary::after {
content: "+"; flex-shrink: 0; width: 24px; text-align: center;
font-size: 19px; line-height: 1; color: var(--ino-chu-nhat);
}
.cn-module-nhom[open] summary::after { content: "−"; color: var(--ino-chinh); }
.cn-module-muc {
list-style: none; margin: 0; padding: 4px 18px 18px;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 26px;
}
.cn-module-muc li {
padding: 11px 0 11px 20px; position: relative;
border-top: 1px solid var(--ino-vien);
}
.cn-module-muc li::before {
content: "✓"; position: absolute; left: 0; top: 11px;
color: var(--ino-phu); font-weight: 800; font-size: 13px;
}
.cn-module-muc strong { display: block; font-size: 15px; font-weight: 600; }
.cn-module-muc span { display: block; font-size: 13.5px; color: var(--ino-chu-mo); line-height: 1.6; }
@media (max-width: 900px) {
.cn-moi-demo { flex-direction: column; align-items: flex-start; }
.cn-module-muc { grid-template-columns: 1fr; }
/* Tiêu đề bên trái/mô tả bên phải chỉ đủ chỗ trên màn hình rộng.
Dưới 900px chuyển về xếp dọc: nhãn, tiêu đề, rồi tới mô tả. */
.cn-khu-dau {
display: block; margin-bottom: 40px;
}
.cn-khu-dau .cn-khu-mo-ta { margin-top: 16px; }
}
/* Danh sách website mẫu theo ngành, hiện trên trang chi tiết ứng dụng web */
.cn-demo-nganh-ds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cn-demo-nganh {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px; border-radius: var(--ino-goc-nho);
border: 1px solid var(--ino-vien); background: var(--ino-nen);
color: var(--ino-chu); text-decoration: none; transition: .18s;
}
.cn-demo-nganh:hover {
text-decoration: none; border-color: var(--ino-chinh);
background: var(--ino-nen-phu); transform: translateY(-2px);
}
.cn-demo-nganh-icon {
width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
display: grid; place-items: center; font-size: 21px; background: var(--ino-nen-phu);
}
.cn-demo-nganh strong {
display: block; font-family: var(--ino-font-tieu-de);
font-size: 16px; font-weight: 700; letter-spacing: -.015em;
}
.cn-demo-nganh small { display: block; font-size: 13.5px; color: var(--ino-chu-mo); line-height: 1.55; }
.cn-demo-nganh-mo { margin-left: auto; flex-shrink: 0; color: var(--ino-chinh); font-size: 17px; }
@media (max-width: 900px) {
.cn-demo-nganh-ds { grid-template-columns: 1fr; }
}
/* =========================================================================
BANNER TRANG CHU - he thong master-*
Bien mau khai ngay tren .master-hero vi ca banner nam gon trong khoi nay,
khong anh huong toi phan con lai cua trang dang dung he cn-*.
========================================================================= */
.master-hero{--m-blue:#075fff;--m-navy:#071633;--m-ink:#16233e;--m-muted:#667289;--m-line:#e2e7ef;--m-soft:#f6f9fd;--m-tint:#eff5ff;color:var(--m-ink)}.master-hero{position:relative;padding:42px 0 15px;overflow:hidden;background:#fff}.master-hero:after{content:"";position:absolute;z-index:0;right:-8%;bottom:3%;width:60%;height:48%;background-image:radial-gradient(#c9daf8 1px,transparent 1px);background-size:10px 10px;opacity:.48;mask-image:linear-gradient(90deg,transparent,#000 42%,transparent)}.master-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:4.6fr 7.4fr;gap:3.5%;align-items:center}.master-hero-copy{padding:16px 0 4px}.master-eyebrow,.master-kicker{margin:0;color:var(--m-blue);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.master-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:5px 8px;border-radius:4px;background:#edf4ff}.master-eyebrow span{width:6px;height:6px;border:1.5px solid currentColor;border-radius:50%}.master-hero h1{margin:22px 0 18px;color:var(--m-navy);font-size:clamp(26px,2vw,31px);font-weight:820;line-height:1.16;letter-spacing:-.035em}.master-hero h1 strong{color:var(--m-blue);font-weight:820}.master-lead{max-width:570px;margin:0;color:var(--m-muted);font-size:15px;line-height:1.7}.master-actions{display:flex;gap:10px;margin-top:24px}.master-btn{display:inline-flex;min-height:46px;align-items:center;justify-content:center;gap:10px;padding:0 18px;border:1px solid #cbd4e0;border-radius:6px;color:var(--m-navy);font-size:12px;font-weight:750;text-decoration:none;transition:transform .22s,border-color .22s,background .22s}.master-btn.primary{border-color:var(--m-blue);background:var(--m-blue);color:#fff;box-shadow:0 9px 22px rgba(7,95,255,.18)}.master-btn i{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--m-blue);border-radius:50%;color:var(--m-blue);font-size:8px;font-style:normal}.master-btn:hover{transform:translateY(-1px);border-color:var(--m-blue);text-decoration:none}.master-btn:hover span{transform:translateX(4px)}.master-btn span{transition:transform .22s}.master-cap-strip{display:flex;align-items:center;gap:0;margin-top:42px}.master-cap-strip span{display:flex;align-items:center;gap:8px;padding:0 15px;border-right:1px solid var(--m-line);color:#263550;font-size:10px;font-weight:650;white-space:nowrap}.master-cap-strip span:first-child{padding-left:0}.master-cap-strip span:last-child{border:0}.master-cap-strip svg{width:18px;height:18px;color:var(--m-blue)}
.master-product{position:relative;min-height:500px;padding-bottom:72px}.master-concept-label{position:absolute;z-index:5;top:-10px;right:10px;margin:0;padding:4px 7px;border:1px solid #dbe3ef;border-radius:3px;background:#fff;color:#667085;font-size:8px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.master-workspace{position:relative;z-index:2;display:grid;grid-template-columns:120px 1fr;min-height:410px;overflow:hidden;border:1px solid #d9e1ec;border-radius:13px;background:#fff;box-shadow:0 25px 65px rgba(24,51,91,.12)}.mw-sidebar{padding:22px 12px;border-right:1px solid var(--m-line);background:#fbfcfe}.mw-sidebar>b{display:block;margin:0 8px 24px;color:var(--m-blue);font-size:13px}.mw-sidebar button{display:flex;width:100%;min-height:36px;align-items:center;gap:8px;margin:3px 0;padding:7px 9px;border:0;border-radius:5px;background:transparent;color:#57647a;font-size:9px;text-align:left}.mw-sidebar button[aria-selected=true]{background:#e9f0ff;color:var(--m-blue);font-weight:750}.mw-main{padding:20px 18px;background:#fff}.mw-main>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.mw-main>header strong,.mw-main>header small{display:block}.mw-main>header strong{color:var(--m-navy);font-size:14px}.mw-main>header small{margin-top:3px;color:var(--m-muted);font-size:8px}.mw-tools{display:flex;align-items:center;gap:14px;color:#506078}.mw-tools>b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#dbe8ff,#87b7ff);color:var(--m-blue);font-size:9px}.mw-states{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.mw-states article{padding:13px;border:1px solid var(--m-line);border-radius:7px;box-shadow:0 5px 18px rgba(27,50,88,.04)}.mw-states small,.mw-states strong,.mw-states span{display:block}.mw-states small{color:var(--m-muted);font-size:8px}.mw-states strong{margin-top:10px;color:var(--m-navy);font-size:15px}.mw-states span{margin-top:5px;color:#0b9b63;font-size:8px}.mw-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:10px;margin-top:10px}.mw-grid>article{min-height:210px;padding:14px;border:1px solid var(--m-line);border-radius:7px}.mw-activity>div{display:flex;align-items:center;justify-content:space-between}.mw-activity b,.mw-work>b{font-size:9px}.mw-activity small{color:var(--m-blue);font-size:8px}.mw-activity svg{width:100%;height:150px}.mw-activity .line{fill:none;stroke:var(--m-blue);stroke-width:2}.mw-activity .area{fill:url(#area)}.mw-work ul{list-style:none;margin:11px 0 0;padding:0}.mw-work li{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:10px 0;border-top:1px solid #edf0f4;color:#263550;font-size:8px}.mw-work em{padding:4px 6px;border-radius:4px;background:#ebf2ff;color:var(--m-blue);font-size:7px;font-style:normal;white-space:nowrap}.mw-work li:nth-child(2) em,.mw-work li:nth-child(4) em{background:#eaf8f2;color:#07855a}.mw-work li:nth-child(3) em{background:#fff3e8;color:#d16a0c}
.master-phone{position:absolute;z-index:4;left:-10%;bottom:32px;width:126px;height:270px;padding:30px 11px 12px;border:5px solid #10151d;border-radius:25px;background:#fff;box-shadow:0 16px 28px rgba(10,24,48,.23);transform:rotate(-5deg);font-size:7px}.phone-notch{position:absolute;top:4px;left:50%;width:48px;height:12px;border-radius:0 0 8px 8px;background:#10151d;transform:translateX(-50%)}.phone-brand{display:flex;justify-content:space-between;margin-bottom:18px;color:var(--m-blue);font-size:8px;font-weight:800}.master-phone>small,.master-phone>strong{display:block}.master-phone>small{color:var(--m-muted)}.master-phone>strong{margin-top:5px;color:var(--m-navy);font-size:10px}.master-phone svg{width:100%;height:53px;margin:8px 0}.master-phone svg path{fill:none;stroke:var(--m-blue);stroke-width:2}.master-phone ul{list-style:none;margin:0;padding:0}.master-phone li{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--m-line)}.master-phone i{color:var(--m-blue);font-style:normal}.master-rail{position:absolute;z-index:3;left:7%;right:-1%;bottom:0;display:grid;grid-template-columns:repeat(6,1fr);list-style:none;margin:0;padding:13px 16px;border:1px solid #dbe3ee;border-radius:9px;background:rgba(255,255,255,.97);box-shadow:0 14px 36px rgba(20,44,80,.1)}.master-rail li{position:relative;display:grid;place-items:center;gap:7px;color:#263550;font-size:8px;font-weight:650;text-align:center}.master-rail li:not(:last-child):after{content:"→";position:absolute;right:-7px;top:13px;color:var(--m-blue);font-size:13px}.master-rail svg{width:25px;height:25px;padding:5px;border:1px solid #cbdaf0;border-radius:50%;color:var(--m-blue);box-sizing:content-box}.master-rail .decision svg{color:#ff7a00}
.master-confidence{border-top:1px solid var(--m-line);border-bottom:1px solid var(--m-line);background:#fff}.master-confidence .cn-bao{display:flex;align-items:center;justify-content:center;gap:25px;min-height:58px;color:#5b6880;font-size:10px;font-weight:650}.master-confidence i{width:4px;height:4px;border-radius:50%;background:#ff7a00}
.master-ui-emoji{display:inline-grid;place-items:center;flex:0 0 auto;width:52px;height:52px;overflow:visible;border:1px solid #c9dcf3;border-radius:15px;background:linear-gradient(145deg,#f1f7ff,#dceafa);color:initial;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:24px;font-style:normal;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 7px 16px rgba(10,102,194,.08);transition:transform .2s,border-color .2s,background .2s}
.master-ui-emoji.is-small{width:34px;height:34px;border-radius:10px;font-size:17px;box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(10,102,194,.07)}
.master-ui-emoji.is-app{width:27px;height:27px;border-radius:8px;font-size:14px;box-shadow:none;border-color:#9bccef;background:#fff}
.master-ui-emoji.is-flow{width:42px;height:42px;border-radius:13px;font-size:20px;border-color:#ffd0a3;background:linear-gradient(145deg,#fffaf4,#ffead4)}
.master-rail li:hover .master-ui-emoji{transform:translateY(-2px);border-color:#8ccdf5;background:linear-gradient(145deg,#f7fbff,#d7eafb)}
@media(max-width:1000px){.master-hero-grid{grid-template-columns:1fr;gap:36px}.master-product{min-height:auto;padding-bottom:0}.master-phone,.master-rail{display:none}.master-workspace{grid-template-columns:1fr}.mw-sidebar{display:none}}
/* Banner dung khung rong hon phan con lai 28px, dung nhu ban mau */
.master-hero .cn-bao{max-width:1248px}
/* Tablet: xep doc, bo dien thoai va dai luong cho do chen chuc */
@media(max-width:1024px){.master-hero{padding:28px 0 24px}.master-hero h1{font-size:clamp(26px,3vw,31px)}.master-workspace{min-height:auto}.mw-grid{grid-template-columns:1fr}.mw-grid>article{min-height:auto}}
/* Dien thoai: an thanh ben, thu nho dai nang luc cho xuong dong duoc */
@media(max-width:640px){.master-hero h1{font-size:27px}.master-lead{font-size:14px}.master-actions{flex-wrap:wrap}.master-btn{flex:1 1 100%}.master-cap-strip{flex-wrap:wrap;gap:10px 0;margin-top:26px}.master-cap-strip span{padding:0 12px 0 0;border-right:0}.mw-states{grid-template-columns:1fr}.master-concept-label{display:none}}
/* An toan bo sung: chan moi kha nang tran ngang tren toan trang, phong khi
co phan tu nao do (hien tai hoac sau nay) day rong hon khung nhin tren
dien thoai. Khong anh huong bo cuc man hinh lon vi trang von da vua khit. */
/* ĐÃ BỎ: html, body { overflow-x: hidden; max-width: 100%; }
Đặt overflow-x trên html/body làm trình duyệt tự suy ra overflow-y:auto
cho body theo đúng quy tắc CSS, biến body thành một hộp cuộn riêng — và
điều đó làm hỏng position:sticky của header, vì sticky cần dính theo
khung nhìn chứ không phải theo một tổ tiên đã đổi overflow. Đã kiểm tra
thật: sau khi bỏ dòng này, cuộn 900px thì header vẫn đứng đúng top:0.
Trước đó rà soát kỹ toàn trang không thấy nguyên nhân tràn ngang thật sự
nào (xem các khối media query max-width:1000px ẩn điện thoại/dải luồng
phía trên), nên bỏ hẳn lớp chặn này thay vì tìm cách vá thêm. */
/* ------------------------------------------- Điện thoại tự trôi ngang
Chép từ bản tham khảo InnoSME-GPT/innosme-cms-v1.4.0 theo yêu cầu, để
khớp hoàn toàn cảm giác "sống động" của banner đó. Chỉ chạy trên màn hình
rộng từ 1081px — dưới mốc này khối điện thoại đã ẩn hẳn (xem quy tắc
max-width:1000px phía trên), nên animation không có gì để chạy trên
điện thoại thật, chỉ máy tính mới thấy trôi. Giữ nguyên góc nghiêng -5deg
và không phóng to/nhỏ, khác bản gốc dùng -4deg kèm scale .86 — để không
đổi hình dáng lúc đứng yên đã có sẵn trong bản này. */
@keyframes masterPhoneTravel {
0% { transform: translate3d(0, 0, 0) rotate(-5deg); }
100% { transform: translate3d(430%, 0, 0) rotate(-5deg); }
}
@media (min-width: 1081px) {
.master-phone {
animation: masterPhoneTravel 26s cubic-bezier(.45, 0, .55, 1) infinite alternate;
will-change: transform;
}
}
/* Dải luồng vận hành: tách khỏi vị trí định vị tuyệt đối chồng lên bảng
dashboard, chuyển thành khối bình thường nằm NGAY DƯỚI bảng dashboard.
Trước đây nó "bay" đè lên góc dưới của workspace (position:absolute),
nên điện thoại trôi ngang qua là che mất chữ — đây mới là nguyên nhân
thật, không phải do sai thứ tự lớp. Đặt xuống dòng chảy bình thường thì
hai khối không còn giẫm lên nhau nữa. Rộng bằng bảng dashboard vì cùng là
khối con trực tiếp của .master-product, không đặt margin hai bên.
Điện thoại vẫn đứng lớp trên (z-index 4 > 1) — chỗ nào rìa dưới của nó
còn chạm nhẹ vào dải luồng thì điện thoại che lên trên, đúng như hiệu ứng
gốc, chứ không phải dải luồng che điện thoại. */
/* ---------------------------------------------- Đồng bộ icon-badge toàn trang
Trước khi có quy tắc này, mỗi khối tự định nghĩa kích thước/bo góc/hướng
gradient icon riêng: Dịch vụ 56px góc 17px, Ứng dụng web 52px góc 16px,
Cam kết 52px góc 16px nhưng đậm nhạt gradient khác, Năng lực cốt lõi và
Ngành nghề (mới thêm) lại 44–48px góc 13px — nhìn kỹ sẽ thấy lệch. Gom về
một chuẩn duy nhất, ghi đè sau cùng nên thắng mọi khai báo phía trên. */
.cn-the-dv-icon, .cn-the-ud-icon, .cn-the-ck-icon, .cn-the-nganh-dau > span, .cn-goi-icon,
.cn-cot-loi-icon {
width: 44px; height: 44px; min-width: 44px; border-radius: 13px; font-size: 20px;
background: linear-gradient(140deg,
color-mix(in srgb, var(--ino-chinh) 13%, transparent),
color-mix(in srgb, var(--ino-phu) 13%, transparent));
border: 1px solid color-mix(in srgb, var(--ino-chinh) 12%, transparent);
}
/* Thẻ dịch vụ đầu tiên trong bento cố ý to hơn để làm điểm nhấn — giữ
riêng, không đồng bộ theo chuẩn chung ở trên */
.cn-bento > .cn-the-dv:first-child .cn-the-dv-icon { width: 68px; height: 68px; min-width: 68px; font-size: 31px; border-radius: 20px; }
/* ------------------------------------------------- Icon bên trái tiêu đề
Đồng bộ theo đúng bố cục của thẻ "Ứng dụng web" (.cn-the-ud-dau vốn đã
làm icon-trái/tiêu-đề-phải từ trước): icon và h3 nằm ngang hàng, không
phải icon nằm trên tiêu đề như kiểu bento cũ. Dùng cho Dịch vụ, Bốn năng
lực cốt lõi và Cam kết. */
/* Hai việc cùng lúc: (1) icon canh giữa theo chiều cao tiêu đề của CHÍNH
thẻ đó, dù 1 hay 2 dòng — dùng align-items:center; (2) icon giữa CÁC thẻ
khác nhau phải nằm cùng một hàng ngang — muốn vậy hàng tiêu đề của mọi
thẻ phải cao bằng nhau, nên đặt min-height đủ chứa 2 dòng chữ (trường hợp
cao nhất là h3 19.5px, line-height 1.26 → 2 dòng ≈ 49px). Thẻ 1 dòng vẫn
cao min-height đó nên icon của nó nằm đúng cùng độ cao với thẻ 2 dòng. */
.cn-icon-dau { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; min-height: 50px; }
.cn-icon-dau .cn-the-dv-icon, .cn-icon-dau .cn-cot-loi-icon, .cn-icon-dau .cn-the-ck-icon { margin: 0; flex-shrink: 0; }
.cn-icon-dau h3 { margin: 0; }
.cn-bento > .cn-the-dv:first-child .cn-icon-dau { margin-bottom: 18px; }
/* ------------------------------------------------------- Giải pháp theo ngành
Trang chủ dùng chung mẫu thẻ .cn-nganh-ct với trang /giai-phap-nganh —
style ở khối "/giai-phap-nganh — danh sách 16 ngành" phía dưới file này. */
/* --------------------------------------------------- Bốn năng lực cốt lõi
Thẻ gọn dưới banner, phẳng hơn khối "Dịch vụ" đầy đủ phía dưới (không đổ
bóng khi rê chuột, không viền gradient) vì đây chỉ là tóm tắt điều hướng
nhanh, không phải nội dung chính của trang. */
.cn-cot-loi-luoi { align-items: stretch; }
.cn-cot-loi {
padding: 24px; border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho);
background: var(--ino-nen); display: flex; flex-direction: column;
transition: border-color .2s, transform .2s;
}
.cn-cot-loi:hover { border-color: color-mix(in srgb, var(--ino-chinh) 30%, var(--ino-vien)); transform: translateY(-3px); }
.cn-cot-loi-icon {
/* Kích thước, bo góc, nền và viền lấy từ quy tắc đồng bộ icon-badge dùng
chung toàn trang (phía trên) — ở đây chỉ khai báo phần riêng của khối này. */
display: grid; place-items: center; margin-bottom: 16px;
}
.cn-cot-loi h3 { font-size: 16.5px; margin-bottom: 8px; }
.cn-cot-loi p { color: var(--ino-chu-mo); font-size: 14px; margin: 0 0 14px; line-height: 1.6; flex: 1; }
.cn-cot-loi a {
display: inline-flex; align-items: center; gap: 6px; color: var(--ino-chinh);
font-size: 14px; font-weight: 600; align-self: flex-start;
}
.cn-cot-loi a span { transition: transform .2s; }
.cn-cot-loi a:hover span { transform: translateX(3px); }
@media (max-width: 900px) { .cn-cot-loi-luoi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cn-cot-loi-luoi { grid-template-columns: 1fr; } }
/* Nhãn "ĐỔI MỚI CÔNG NGHỆ..." trong banner: bản chép ban đầu thiếu đúng hai
dòng ghi đè màu trong bản gốc, nên chấm tròn ra màu xanh rỗng thay vì cam
đặc. Bổ sung lại cho khớp. */
.master-eyebrow { color: #0A66C2; background: #EDF7FF; }
.master-eyebrow span { border-color: #FF7A00; background: #FF7A00; }
.master-product { padding-bottom: 0; min-height: 0; }
.master-rail {
position: relative; z-index: 1; margin-top: 18px;
left: auto; right: auto; bottom: auto; width: 100%;
/* Bỏ khung thẻ (viền/nền/bo góc/đổ bóng) — mỗi icon trong dải đã tự có
khung riêng (.master-ui-emoji.is-flow) nên bọc thêm một thẻ ngoài chỉ
dư thừa. Thẻ đó còn nằm sát mép dưới banner (overflow:hidden), khiến
bóng đổ 0 14px 36px bị cắt cụt giữa chừng thay vì mờ dần tự nhiên —
nhìn như một khối trắng rời rạc, lạc lõng với khối bên dưới. Bỏ hẳn
border/shadow/nền thì dải icon hoà thẳng vào nền banner, không còn
viền cắt cụt để lộ ra nữa. */
padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
/* Khoảng trắng cuối banner trước đây chỉ 15px — sát dải icon tới mức banner
(overflow:hidden) cắt cụt bóng đổ ngay tại đó. Nới rộng ra để có nhịp
nghỉ rõ ràng, có chủ đích trước khi sang khối "Tư vấn trực tiếp", thay vì
hai khối dính sát khiến mắt đọc thành một ranh giới lởm chởm. */
.master-hero { padding-bottom: 40px; }
/* ------------------------------------------------------ Trang Giới thiệu */
.cn-gt-dan {
max-width: 62ch; margin: 0 auto; padding-left: 22px;
border-left: 3px solid var(--ino-chinh);
font-size: 19px; line-height: 1.75; color: var(--ino-chu);
}
.cn-gt-lien-ket-giua { max-width: 66ch; margin: 34px auto 0; text-align: center; color: var(--ino-chu-mo); }
.cn-gt-huong-di .cn-qt-tg { margin-bottom: 14px; }
/* Sơ đồ tầng kiến trúc nền tảng — khác hẳn khối "Công nghệ lõi" ở trang chủ
(ảnh chụp màn hình + gạch đầu dòng) để trang Giới thiệu không lặp lại y
hệt bố cục trang chủ. */
.cn-kt-so-do { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.cn-kt-tang {
width: 100%; padding: 20px 26px; border-radius: var(--ino-goc);
background: var(--ino-nen); border: 1px solid var(--ino-vien);
display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.cn-kt-nhan {
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--ino-chinh);
}
.cn-kt-tang strong { font-family: var(--ino-font-tieu-de); font-size: 16px; }
.cn-kt-tang > span:last-child { font-size: 13.5px; color: var(--ino-chu-mo); }
.cn-kt-mui-ten { font-size: 20px; color: var(--ino-chinh); line-height: 1; margin: 3px 0; opacity: .55; }
.cn-kt-loi { background: linear-gradient(140deg, var(--ino-chinh), var(--ino-phu)); border-color: transparent; }
.cn-kt-loi .cn-kt-nhan, .cn-kt-loi strong { color: #fff; }
.cn-kt-loi > span:last-child { color: rgba(255, 255, 255, .82); }
/* Thanh tóm tắt quy trình 5 bước — dạng số nối tiếp gọn, khác khối quy
trình đầy đủ ở trang chủ (đã có trang riêng /quy-trinh-lam-viec). */
.cn-gt-qt-tom-tat { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 4px; margin-top: 32px; }
.cn-gt-qt-buoc { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.cn-gt-qt-buoc b {
display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
border-radius: 50%; background: linear-gradient(140deg, var(--ino-chinh), var(--ino-phu));
color: #fff; font-family: var(--ino-font-tieu-de); font-size: 12.5px; font-weight: 800;
}
.cn-gt-qt-buoc em { font-style: normal; font-size: 14.5px; font-weight: 600; }
.cn-gt-qt-noi { color: var(--ino-vien); font-size: 16px; }
/* Tag ngành nghề gọn — thay cho lưới thẻ icon lớn đã dùng ở trang chủ. */
.cn-gt-tag-may { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cn-gt-tag {
display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px;
border-radius: var(--ino-goc-pill); border: 1px solid var(--ino-vien); background: var(--ino-nen);
font-size: 14px; font-weight: 600; color: var(--ino-chu); transition: border-color .2s, background .2s;
}
.cn-gt-tag:hover { border-color: var(--ino-chinh); background: color-mix(in srgb, var(--ino-chinh) 6%, var(--ino-nen)); }
@media (max-width: 680px) {
.cn-gt-dan { font-size: 17px; padding-left: 16px; }
.cn-gt-qt-tom-tat { flex-direction: column; align-items: flex-start; }
.cn-gt-qt-noi { display: none; }
}
/* -------------------------------------------------------- Đổi câu hỏi */
.cn-gt-doi-cau {
display: flex; align-items: center; gap: 22px; margin: 8px 0 0;
}
.cn-gt-doi-cau.doc { flex-direction: column; align-items: stretch; gap: 6px; }
.cn-gt-doi-cau.doc .cn-gt-doi-cau-mui-ten { text-align: center; transform: rotate(90deg); font-size: 16px; }
.cn-gt-doi-cau-sai, .cn-gt-doi-cau-dung {
flex: 1; display: flex; align-items: flex-start; gap: 12px;
padding: 20px 22px; border-radius: var(--ino-goc); border: 1px solid var(--ino-vien);
}
.cn-gt-doi-cau-sai { background: color-mix(in srgb, #E5484D 6%, var(--ino-nen)); }
.cn-gt-doi-cau-dung { background: color-mix(in srgb, var(--ino-chinh) 6%, var(--ino-nen)); border-color: color-mix(in srgb, var(--ino-chinh) 30%, var(--ino-vien)); }
.cn-gt-doi-cau-nhan {
flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
font-size: 13px; font-weight: 800; color: #fff;
}
.cn-gt-doi-cau-sai .cn-gt-doi-cau-nhan { background: #E5484D; }
.cn-gt-doi-cau-dung .cn-gt-doi-cau-nhan { background: var(--ino-chinh); }
.cn-gt-doi-cau-sai p, .cn-gt-doi-cau-dung p { margin: 0; font-style: italic; font-size: 15px; line-height: 1.55; }
.cn-gt-doi-cau-mui-ten { flex-shrink: 0; font-size: 22px; color: var(--ino-chu-mo); }
@media (max-width: 680px) {
.cn-gt-doi-cau { flex-direction: column; align-items: stretch; }
.cn-gt-doi-cau-mui-ten { text-align: center; transform: rotate(90deg); }
}
.cn-gt-tag-may.nho { gap: 7px; justify-content: flex-start; }
.cn-gt-tag.tinh { padding: 5px 12px; font-size: 12.5px; font-weight: 600; cursor: default; }
.cn-gt-tag.tinh:hover { border-color: var(--ino-vien); background: var(--ino-nen); }
/* -------------------------------------------------------- Vòng phát triển */
.cn-gt-vl-luoi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; counter-reset: none; }
.cn-gt-vl-o {
position: relative; padding: 20px 16px 18px; background: var(--ino-nen); border: 1px solid var(--ino-vien);
display: flex; flex-direction: column; gap: 6px;
}
.cn-gt-vl-luoi .cn-gt-vl-o:nth-child(5n+1) { border-top-left-radius: var(--ino-goc); }
.cn-gt-vl-luoi .cn-gt-vl-o:nth-child(5n) { border-top-right-radius: var(--ino-goc); }
.cn-gt-vl-so { font-family: var(--ino-font-tieu-de); font-size: 12px; font-weight: 800; color: var(--ino-chinh); }
.cn-gt-vl-o strong { font-size: 14.5px; }
.cn-gt-vl-o span:last-child { font-size: 12.5px; color: var(--ino-chu-mo); line-height: 1.5; }
.cn-gt-vl-lap {
display: flex; align-items: center; gap: 14px; margin-top: 3px; padding: 16px 22px;
background: color-mix(in srgb, var(--ino-nhan) 8%, var(--ino-nen)); border: 1px solid color-mix(in srgb, var(--ino-nhan) 28%, var(--ino-vien));
border-bottom-left-radius: var(--ino-goc); border-bottom-right-radius: var(--ino-goc);
font-size: 13.5px; color: var(--ino-chu-mo);
}
.cn-gt-vl-lap-icon { flex-shrink: 0; font-size: 24px; color: var(--ino-nhan); }
@media (max-width: 900px) {
.cn-gt-vl-luoi { grid-template-columns: repeat(2, 1fr); }
.cn-gt-vl-luoi .cn-gt-vl-o:nth-child(5n+1), .cn-gt-vl-luoi .cn-gt-vl-o:nth-child(5n) { border-radius: 0; }
.cn-gt-vl-luoi .cn-gt-vl-o:nth-child(1) { border-top-left-radius: var(--ino-goc); }
.cn-gt-vl-luoi .cn-gt-vl-o:nth-child(2) { border-top-right-radius: var(--ino-goc); }
.cn-gt-vl-luoi .cn-gt-vl-o:nth-last-child(2) { border-bottom-left-radius: var(--ino-goc); }
.cn-gt-vl-luoi .cn-gt-vl-o:nth-last-child(1) { border-bottom-right-radius: var(--ino-goc); }
}
@media (max-width: 560px) {
.cn-gt-vl-luoi { grid-template-columns: 1fr; }
.cn-gt-vl-luoi .cn-gt-vl-o { border-radius: 0 !important; }
.cn-gt-vl-luoi .cn-gt-vl-o:first-child { border-top-left-radius: var(--ino-goc); border-top-right-radius: var(--ino-goc); }
}
/* ---------------------------------------------------- Bố cục trang Giới thiệu
Trang này có nhiều khối nội dung ngắn liền nhau — siết khoảng cách lại
để đọc mạch lạc, không rời rạc như các trang chỉ có 3-4 khu lớn. */
.cn-trang-gt .cn-khu { padding: 30px 0; }
.cn-trang-gt .cn-khu-dau { margin-bottom: 28px; }
.cn-trang-gt .cn-khu-dau.nho { margin-bottom: 20px; }
.cn-trang-gt .cn-khu-dau.nho h2 { font-size: clamp(19px, 2vw, 24px); }
.cn-trang-gt .cn-gt-dan { margin-bottom: 6px; }
/* Đoạn dẫn đặt trong khối card riêng, full-width như các khối khác trên
trang (không dùng .cn-bao-hep nữa) — vẫn giữ dáng blockquote gạch trái. */
.cn-gt-dan-khoi .cn-gt-dan { margin: 0; max-width: none; }
/* Thử gộp "InnoSME là ai" + "Chúng tôi làm gì" chung 1 dòng 2 cột — canh
theo mép trên vì hai bên chiều cao không bằng nhau. */
.cn-gt-2-cot { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: stretch; }
.cn-gt-2-cot > .cn-gt-khoi + .cn-gt-khoi { margin-top: 0; }
/* Cột hẹp bên trái (1/3) không đủ chỗ cho tiêu đề cỡ lớn — thu nhỏ chữ
lại để không bị ngắt dòng từng chữ một. */
/* Header này không có phần mô tả bên cột 2 (.cn-khu-mo-ta) như các khu
khác — trả lại toàn bộ chiều rộng cho cột 1 thay vì bỏ phí nửa kia. */
.cn-gt-2-cot > .cn-gt-khoi:first-child .cn-khu-dau.nho { grid-template-columns: 1fr; }
@media (max-width: 900px) {
.cn-gt-2-cot { grid-template-columns: 1fr; }
}
/* Khối con bên trong 1 section dùng chung nền — mỗi khối 1 card riêng,
liền sát nhau, để nội dung ngắn không trôi nổi rời rạc trên nền trống. */
.cn-gt-khoi {
padding: 26px 28px; border-radius: var(--ino-goc); background: var(--ino-nen); border: 1px solid var(--ino-vien);
}
.cn-gt-khoi + .cn-gt-khoi { margin-top: 16px; }
.cn-gt-chu-nho { margin: 14px 0 0; font-size: 14px; color: var(--ino-chu-mo); line-height: 1.7; }
/* Từng thử xếp 2 khối này song song thành cột, nhưng độ dài tiêu đề hai
bên lệch nhau quá nhiều khiến nội dung xô lệch — quay lại xếp chồng dọc
cho chắc chắn, đơn giản, không vỡ bố cục ở bất kỳ độ rộng nào. */
.cn-gt-khoi-cot .cn-gt-khoi { margin-top: 16px; }
.cn-gt-khoi-cot .cn-gt-khoi:first-child { margin-top: 0; }
@media (max-width: 680px) {
.cn-trang-gt .cn-khu { padding: 24px 0; }
.cn-gt-khoi { padding: 20px 20px; }
}
/* Sơ đồ tư duy chi tiết (SVG toạ độ tường minh) — canvas rộng cố định,
cuộn ngang trong khung riêng để không phá bố cục trang trên màn hình hẹp. */
.cn-sdtd-boc {
overflow-x: auto; overflow-y: hidden; border-radius: var(--ino-goc);
border: 1px solid var(--ino-vien); background: var(--ino-nen-phu);
-webkit-overflow-scrolling: touch;
}
.cn-sdtd { display: block; width: 100%; min-width: 900px; height: auto; }
/* Bảng quy trình 6 bước — bản tóm tắt dạng bảng đi trước sơ đồ tư duy,
đọc nhanh hơn vì quét theo cột thay vì dò đường nối. */
.cn-gt-bang-boc {
overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--ino-goc);
border: 1px solid var(--ino-vien); margin-bottom: 28px;
}
.cn-gt-bang { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 13px; }
.cn-gt-bang th, .cn-gt-bang td {
padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--ino-vien);
border-right: 1px solid var(--ino-vien);
}
.cn-gt-bang th:last-child, .cn-gt-bang td:last-child { border-right: none; }
.cn-gt-bang thead tr:first-child th {
background: linear-gradient(140deg, var(--ino-chinh), var(--ino-phu)); color: #fff;
font-family: var(--ino-font-tieu-de); font-size: 13.5px; font-weight: 700; vertical-align: top;
}
.cn-gt-bang-so { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .78); margin-bottom: 2px; }
.cn-gt-bang-hoi th {
background: var(--ino-nen-phu); color: var(--ino-chu-mo); font-style: italic; font-weight: 500; font-size: 12.5px;
}
.cn-gt-bang tbody td { background: var(--ino-nen); color: var(--ino-chu); }
.cn-gt-bang tbody tr:nth-child(even) td { background: var(--ino-nen-phu); }
.cn-gt-bang-rong { background: repeating-linear-gradient(135deg, transparent, transparent 6px, var(--ino-nen-phu) 6px, var(--ino-nen-phu) 7px); }
.cn-gt-bang tfoot td {
background: color-mix(in srgb, var(--ino-chinh) 8%, var(--ino-nen)); color: var(--ino-chinh);
font-family: var(--ino-font-tieu-de); font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
}
/* Nhãn ngăn giữa bảng và sơ đồ, cùng khu vực nhưng khác định dạng trình bày. */
.cn-gt-tach-nhan {
display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
font-family: var(--ino-font-tieu-de); font-size: 12.5px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase; color: var(--ino-chinh);
}
.cn-gt-tach-nhan::before, .cn-gt-tach-nhan::after { content: ''; flex: 1; height: 1px; background: var(--ino-vien); }
/* ------------------------------------------------------------------------- */
/* Trang Lộ trình phát triển (/lo-trinh) */
/* ------------------------------------------------------------------------- */
.cn-lt-dau { padding-top: 26px; }
.cn-lt-tong {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.cn-lt-tong article {
display: grid; gap: 4px; padding: 18px 20px;
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc-nho); box-shadow: var(--ino-bong);
}
.cn-lt-tong strong {
font-family: var(--ino-font-tieu-de); font-size: 26px; font-weight: 800;
color: var(--ino-chinh); letter-spacing: -.02em;
}
.cn-lt-tong span { font-size: 13px; color: var(--ino-chu-mo); }
.cn-lt-danh-sach { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cn-lt-giai-doan {
display: grid; grid-template-columns: 64px 1fr; gap: 18px;
position: relative; padding-bottom: 34px;
}
.cn-lt-giai-doan:last-child { padding-bottom: 0; }
.cn-lt-moc { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cn-lt-so {
display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto;
border-radius: 16px; font-family: var(--ino-font-tieu-de);
font-size: 17px; font-weight: 800; letter-spacing: -.02em;
background: var(--ino-nen); border: 1.5px solid var(--ino-vien); color: var(--ino-chu-nhat);
}
.cn-lt-day { flex: 1; width: 2px; border-radius: 2px; background: var(--ino-vien); }
.cn-lt-giai-doan:last-child .cn-lt-day { display: none; }
.cn-lt-giai-doan.lt-xong .cn-lt-so { background: var(--ino-chinh); border-color: var(--ino-chinh); color: #fff; }
.cn-lt-giai-doan.lt-xong .cn-lt-day { background: var(--ino-chinh); }
/* Chữ trắng trên cam #FF7A00 chỉ được 2,61:1. Cam là màu SÁNG — chữ đặt lên
nó phải tối, y như nhãn cảnh báo ngoài đời. Chữ tối cho 6,64:1. */
.cn-lt-giai-doan.lt-thu-nghiem .cn-lt-so { background: var(--ino-nhan); border-color: var(--ino-nhan); color: #2B1500; }
.cn-lt-giai-doan.lt-thu-nghiem .cn-lt-day {
background: repeating-linear-gradient(to bottom, var(--ino-nhan) 0 6px, transparent 6px 12px);
}
.cn-lt-noi-dung {
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc); box-shadow: var(--ino-bong);
padding: 22px 24px;
}
.cn-lt-tieu-de { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cn-lt-tieu-de h3 {
margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.025em;
}
.cn-lt-thoi-gian { margin-left: auto; font-size: 12.5px; color: var(--ino-chu-nhat); white-space: nowrap; }
.cn-lt-nhan {
display: inline-flex; align-items: center; padding: 3px 11px;
border-radius: var(--ino-goc-pill); font-size: 11.5px; font-weight: 700;
letter-spacing: .03em; text-transform: uppercase;
border: 1px solid var(--ino-vien); color: var(--ino-chu-nhat); background: var(--ino-nen-phu);
}
.cn-lt-nhan.lt-xong { background: rgba(10, 102, 194, .1); border-color: rgba(10, 102, 194, .3); color: var(--ino-chinh); }
.cn-lt-nhan.lt-thu-nghiem { background: rgba(255, 122, 0, .1); border-color: rgba(255, 122, 0, .35); color: var(--ino-nhan-chu); }
.cn-lt-mo-ta { margin: 10px 0 14px; color: var(--ino-chu-mo); font-size: 14.5px; line-height: 1.6; }
.cn-lt-hang-muc { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cn-lt-hang-muc li {
display: flex; align-items: baseline; gap: 10px;
padding: 9px 12px; border-radius: 10px; background: var(--ino-nen-phu);
font-size: 14px; line-height: 1.5;
}
.cn-lt-dau-tich { flex: 0 0 auto; font-weight: 800; color: var(--ino-chu-nhat); }
.cn-lt-hang-muc li.lt-xong .cn-lt-dau-tich { color: var(--ino-chinh); }
.cn-lt-hang-muc li.lt-thu-nghiem .cn-lt-dau-tich { color: var(--ino-nhan-chu); }
.cn-lt-ten-hm { flex: 1; }
.cn-lt-hang-muc li.lt-ke-hoach .cn-lt-ten-hm { color: var(--ino-chu-mo); }
.cn-lt-tt-hm { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--ino-chu-nhat); white-space: nowrap; }
.cn-lt-hang-muc li.lt-xong .cn-lt-tt-hm { color: var(--ino-chinh); }
.cn-lt-hang-muc li.lt-thu-nghiem .cn-lt-tt-hm { color: var(--ino-nhan-chu); }
.cn-lt-ghi-chu {
margin: 26px 0 0; padding: 14px 18px; border-radius: var(--ino-goc-nho);
border: 1px dashed var(--ino-vien); color: var(--ino-chu-mo); font-size: 14px;
}
@media (max-width: 860px) {
.cn-lt-tong { grid-template-columns: repeat(2, 1fr); }
.cn-lt-giai-doan { grid-template-columns: 46px 1fr; gap: 12px; }
.cn-lt-so { width: 40px; height: 40px; border-radius: 12px; font-size: 14px; }
.cn-lt-thoi-gian { margin-left: 0; width: 100%; }
.cn-lt-hang-muc li { flex-wrap: wrap; }
.cn-lt-tt-hm { margin-left: 26px; }
}
/* ------------------------------------------------------------------------- */
/* Khối 5 trụ cột nền tảng (trang chủ) */
/* ------------------------------------------------------------------------- */
.cn-tru-cot-luoi {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.cn-tru-cot {
position: relative; /* mỏ neo cho lớp phủ ::after của .cn-xem-them — cả thẻ bấm được */
display: flex; flex-direction: column; gap: 6px;
padding: 20px 18px; cursor: pointer;
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc-nho); box-shadow: var(--ino-bong);
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cn-tru-cot:hover { transform: translateY(-3px); box-shadow: var(--ino-bong-cao); border-color: var(--ino-phu); }
.cn-tru-cot-dau { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cn-tru-cot-so {
font-family: var(--ino-font-tieu-de); font-size: 13px; font-weight: 800;
letter-spacing: .06em; color: var(--ino-chu-nhat);
}
.cn-tru-cot h3 { margin: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; }
.cn-tru-cot-phu {
margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .02em;
color: var(--ino-chinh); text-transform: uppercase;
}
.cn-tru-cot-mo-ta { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ino-chu-mo); flex: 1; }
.cn-tru-cot-chan {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ino-vien);
}
.cn-tru-cot-chan .cn-xem-them { margin-top: 0; }
.cn-tru-cot:hover .cn-xem-them span { transform: translateX(4px); }
.cn-tru-cot:hover .cn-xem-them { color: var(--ino-nhan); }
.cn-tru-cot-ghi-chu { margin: 18px 0 0; text-align: center; font-size: 13.5px; color: var(--ino-chu-mo); }
@media (max-width: 1080px) { .cn-tru-cot-luoi { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .cn-tru-cot-luoi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cn-tru-cot-luoi { grid-template-columns: 1fr; } }
/* Danh sách mục nhỏ trong thẻ trụ cột */
.cn-tru-cot-muc { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.cn-tru-cot-muc li {
position: relative; padding-left: 16px;
font-size: 12.5px; line-height: 1.45; color: var(--ino-chu-mo);
}
.cn-tru-cot-muc li::before {
content: ""; position: absolute; left: 2px; top: .52em;
width: 5px; height: 5px; border-radius: 50%; background: var(--ino-phu);
}
/* Trang chi tiết trụ cột (/nen-tang/{slug}) */
.cn-dau-trang-con h1 .cn-lt-nhan { vertical-align: middle; margin-left: 10px; }
.cn-tru-cot-ten { margin: 0; font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; }
.cn-tc-2-cot { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.cn-tc-lien-quan { display: grid; gap: 8px; justify-items: start; margin-top: 22px; }
.cn-tc-lien-quan h3 { margin: 0 0 2px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ino-chu-nhat); }
.cn-tc-dieu-huong {
display: flex; justify-content: space-between; gap: 14px;
margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--ino-vien);
}
.cn-tc-dieu-huong a {
display: grid; gap: 2px; max-width: 46%;
padding: 12px 16px; border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho);
text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
.cn-tc-dieu-huong a:hover { border-color: var(--ino-phu); box-shadow: var(--ino-bong); }
.cn-tc-dieu-huong a.phai { text-align: right; margin-left: auto; }
.cn-tc-dieu-huong small { font-size: 12px; color: var(--ino-chu-nhat); }
.cn-tc-dieu-huong strong { font-size: 14.5px; color: var(--ino-chu); letter-spacing: -.01em; }
/* Core engines thuộc trụ cột (liên kết trụ cột ↔ sổ 14 engine) */
.cn-tc-engine-khu { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--ino-vien); }
.cn-tc-engine-luoi {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px; margin-top: 18px;
}
.cn-tc-engine {
display: grid; gap: 6px; align-content: start;
padding: 16px 18px; border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho);
background: var(--ino-nen); text-decoration: none; color: inherit;
}
a.cn-tc-engine.co-lien-ket { transition: border-color .2s, box-shadow .2s, transform .2s; }
a.cn-tc-engine.co-lien-ket:hover {
border-color: var(--ino-phu); box-shadow: var(--ino-bong); transform: translateY(-2px);
text-decoration: none;
}
.cn-tc-engine-dau { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cn-tc-engine-so {
font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
color: var(--ino-chu-nhat);
}
.cn-tc-engine h3 { margin: 0; font-size: 15.5px; letter-spacing: -.01em; color: var(--ino-chu); }
.cn-tc-engine p { margin: 0; font-size: 13.5px; color: var(--ino-chu-mo); }
.cn-tc-engine-chay {
padding-top: 6px; border-top: 1px dashed var(--ino-vien);
font-size: 12.5px !important; color: var(--ino-chu-nhat) !important;
}
.cn-tc-engine-doc {
margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--ino-chinh);
}
.cn-tc-engine-doc span { display: inline-block; transition: transform .2s; }
a.cn-tc-engine.co-lien-ket:hover .cn-tc-engine-doc span { transform: translateX(3px); }
@media (max-width: 860px) {
.cn-tc-2-cot { grid-template-columns: 1fr; gap: 26px; }
}
/* ===================== /giai-phap-nganh — danh sách 16 ngành ===================== */
.cn-nganh-ct-luoi {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.cn-nganh-ct {
position: relative; /* mỏ neo cho lớp phủ ::after của .cn-xem-them — cả thẻ bấm được */
display: flex; flex-direction: column; gap: 6px;
padding: 20px 18px; text-decoration: none; color: inherit;
background: var(--ino-nen); border: 1px solid var(--ino-vien);
border-radius: var(--ino-goc-nho); box-shadow: var(--ino-bong);
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cn-nganh-ct:hover { transform: translateY(-3px); box-shadow: var(--ino-bong-cao); border-color: var(--ino-phu); text-decoration: none; }
.cn-nganh-ct-dau { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cn-nganh-ct-so {
font-family: var(--ino-font-tieu-de); font-size: 12.5px; font-weight: 800;
letter-spacing: .06em; color: var(--ino-chu-nhat);
}
.cn-nganh-ct-icon { font-size: 22px; line-height: 1; }
.cn-nganh-ct-ten { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--ino-chu); }
.cn-nganh-ct-mo-ta { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ino-chu-mo); flex: 1; }
.cn-nganh-ct:hover .cn-xem-them span { transform: translateX(4px); }
.cn-nganh-ct:hover .cn-xem-them { color: var(--ino-nhan); }
/* ===================== /giai-phap-nganh/{ma} — chi tiết 1 ngành ===================== */
/* Bố cục main trái (Gói giải pháp theo 5 trụ cột, nội dung chính) + sidebar
phải (Quy trình/Danh mục/Từ vựng/Ngách, gộp chung 1 cột hẹp). HTML viết
aside trước main nên phải đảo bằng order, không đảo grid-template-columns. */
.cn-nganh-bo-cuc {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 36px; align-items: start;
}
.cn-nganh-main { order: 1; }
.cn-nganh-sidebar {
order: 2;
display: grid; gap: 18px;
padding: 10px; border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho);
background: var(--ino-nen-phu);
position: sticky; top: 90px;
}
.cn-nganh-sb-khoi { padding-top: 24px; border-top: 1px solid var(--ino-vien); }
.cn-nganh-sb-khoi:first-child { padding-top: 0; border-top: 0; }
.cn-nganh-sb-khoi .cn-nhan { margin-bottom: 8px; } /* gọn hơn 16px mặc định vì sidebar hẹp */
.cn-nganh-sb-tieu-de { margin: 0 0 14px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; }
.cn-nganh-sidebar .cn-nganh-ngach-ds { grid-template-columns: 1fr; } /* sidebar hẹp nên xếp dọc 1 cột */
@media (max-width: 900px) {
.cn-nganh-bo-cuc { grid-template-columns: 1fr; }
.cn-nganh-sidebar { position: static; }
}
/* Bản đồ module vận hành — accordion từng nhóm, mở ra thấy chức năng chi tiết */
.cn-nganh-md-tom-tat { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.cn-nganh-md-dem {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: var(--ino-goc-pill);
border: 1px solid var(--ino-vien); background: var(--ino-nen);
font-size: 12.5px; color: var(--ino-chu-mo);
}
.cn-nganh-md-dem strong { color: var(--ino-chu); font-size: 13.5px; }
.cn-nganh-md-dem.lt-xong { border-color: color-mix(in srgb, var(--ino-chinh) 30%, var(--ino-vien)); }
.cn-nganh-md-dem.lt-xong strong { color: var(--ino-chinh); }
.cn-nganh-md-dem.lt-thu-nghiem { border-color: color-mix(in srgb, var(--ino-nhan) 32%, var(--ino-vien)); }
.cn-nganh-md-dem.lt-thu-nghiem strong { color: var(--ino-nhan-chu); }
.cn-nganh-md-ds { display: grid; gap: 10px; }
.cn-nganh-md {
border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho);
background: var(--ino-nen); overflow: hidden;
}
.cn-nganh-md[open] { border-color: color-mix(in srgb, var(--ino-chinh) 28%, var(--ino-vien)); box-shadow: var(--ino-bong); }
.cn-nganh-md-dau {
display: flex; align-items: center; gap: 14px; padding: 14px 18px;
cursor: pointer; list-style: none;
}
.cn-nganh-md-dau::-webkit-details-marker { display: none; }
.cn-nganh-md-dau:hover { background: var(--ino-nen-phu); }
.cn-nganh-md-icon { font-size: 20px; line-height: 1; flex: none; }
.cn-nganh-md-chu { display: grid; gap: 3px; margin-right: auto; min-width: 0; }
.cn-nganh-md-chu strong { font-size: 15px; color: var(--ino-chu); letter-spacing: -.01em; }
.cn-nganh-md-chu span { font-size: 13px; color: var(--ino-chu-mo); line-height: 1.5; }
.cn-nganh-md-so {
flex: none; padding: 3px 10px; border-radius: var(--ino-goc-pill);
background: var(--ino-nen-phu); border: 1px solid var(--ino-vien);
font-size: 12.5px; font-weight: 700; color: var(--ino-chu-mo); font-variant-numeric: tabular-nums;
}
.cn-nganh-md-mo { flex: none; font-size: 18px; color: var(--ino-chu-nhat); transition: transform .2s; }
.cn-nganh-md[open] .cn-nganh-md-mo { transform: rotate(45deg); }
.cn-nganh-md-cn {
list-style: none; margin: 0; padding: 0 18px 16px;
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}
.cn-nganh-md-cn li { padding-top: 12px; border-top: 1px solid var(--ino-vien); }
.cn-nganh-md-cn p { margin: 4px 0 0; font-size: 12.5px; color: var(--ino-chu-mo); line-height: 1.5; }
.cn-nganh-goi-luoi {
display: grid; grid-template-columns: 1fr; gap: 18px; /* mỗi trụ cột 1 hàng full-width, dễ nhìn hơn 3 cột chen chúc */
}
.cn-nganh-goi-khoi {
padding: 18px 20px; border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho); background: var(--ino-nen);
}
.cn-nganh-goi-tc {
display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: var(--ino-chinh); text-decoration: none;
}
.cn-nganh-goi-tc:hover { text-decoration: underline; }
.cn-nganh-goi-tc span:last-child { transition: transform .2s; }
.cn-nganh-goi-tc:hover span:last-child { transform: translateX(3px); }
.cn-nganh-goi-ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cn-nganh-goi-ds li { padding-top: 12px; border-top: 1px solid var(--ino-vien); }
.cn-nganh-goi-ds li:first-child { padding-top: 0; border-top: 0; }
.cn-nganh-goi-hang { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cn-nganh-goi-hang strong { font-size: 14.5px; color: var(--ino-chu); }
.cn-nganh-goi-ds p { margin: 4px 0 0; font-size: 13px; color: var(--ino-chu-mo); line-height: 1.5; }
.cn-nganh-ngach-ds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cn-nganh-ngach {
padding: 14px 16px; border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho);
background: color-mix(in srgb, var(--ino-chinh) 4%, var(--ino-nen));
}
.cn-nganh-ngach strong { display: block; font-size: 14px; color: var(--ino-chu); margin-bottom: 3px; }
.cn-nganh-ngach p { margin: 0; font-size: 12.5px; color: var(--ino-chu-mo); line-height: 1.5; }
/* Hai lối vào của mỗi ngách: website mẫu (tầng ngoài) và hệ thống vận hành
(tầng trong). Tách hai liên kết thay vì bọc cả thẻ, để khách chọn đúng thứ
muốn xem thay vì bấm nhầm. */
/* Lối vào website mẫu, đứng cùng hàng với ba ô đếm của bản đồ module */
.cn-nganh-md-loi-vao {
display: inline-flex; align-items: center;
padding: 6px 14px; border-radius: var(--ino-goc-pill);
font-size: 12.5px; font-weight: 600; color: var(--ino-chinh); text-decoration: none;
background: color-mix(in srgb, var(--ino-chinh) 8%, var(--ino-nen));
border: 1px solid color-mix(in srgb, var(--ino-chinh) 30%, var(--ino-vien));
}
.cn-nganh-md-loi-vao:hover {
background: color-mix(in srgb, var(--ino-chinh) 15%, var(--ino-nen));
text-decoration: none;
}
.cn-nganh-ngach-lk { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.cn-nganh-ngach-lk a { font-size: 12.5px; font-weight: 600; color: var(--ino-chu-mo); text-decoration: none; }
.cn-nganh-ngach-lk a.chinh { color: var(--ino-chinh); }
.cn-nganh-ngach-lk a:hover { text-decoration: underline; }
@media (max-width: 720px) { .cn-nganh-ct-luoi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cn-nganh-ct-luoi { grid-template-columns: 1fr; } }
/* --------------------------------------------- Pop-up "Nhận tư vấn miễn phí"
Mọi nút/liên kết trỏ tới /lien-he trên toàn site (trừ các trang demo — đã có
pop-up riêng .dm-lh) giờ mở thẳng khung này tại chỗ thay vì rời trang, xem
layout.php (khung + JS) và modules/lien-he/khoi_dong.php (nhánh JSON dùng
chung với chính trang /lien-he, không tách route riêng). */
.cn-pop-lh {
width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--ino-goc);
background: var(--ino-nen); color: var(--ino-chu);
box-shadow: 0 30px 80px rgba(9, 20, 33, .35);
font-family: inherit; font-size: 14.5px; line-height: 1.55;
}
.cn-pop-lh::backdrop { background: rgba(9, 20, 33, .55); }
.cn-pop-lh-hop { display: block; margin: 0; }
.cn-pop-lh-dau { display: flex; gap: 12px; align-items: flex-start; padding: 22px 24px 14px; }
.cn-pop-lh-dau h2 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.02em; font-family: var(--ino-font-tieu-de); }
.cn-pop-lh-dau p { margin: 0; font-size: 13.5px; color: var(--ino-chu-mo); }
.cn-pop-lh-dong {
margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
border: 1px solid var(--ino-vien); background: var(--ino-nen); color: var(--ino-chu-mo);
font-size: 20px; line-height: 1; cursor: pointer;
}
.cn-pop-lh-dong:hover { background: var(--ino-nen-phu); color: var(--ino-chu); }
.cn-pop-lh-than { padding: 4px 24px 6px; display: grid; gap: 12px; }
.cn-pop-lh-hang { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cn-pop-lh-truong { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cn-pop-lh-truong label { font-size: 12.5px; font-weight: 600; color: var(--ino-chu-mo); }
.cn-pop-lh-truong label span { color: #DC2626; }
.cn-pop-lh-truong input, .cn-pop-lh-truong textarea {
width: 100%; padding: 9px 12px; border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho);
background: var(--ino-nen); color: var(--ino-chu); font-family: inherit; font-size: 14px; resize: vertical;
}
.cn-pop-lh-truong input:focus, .cn-pop-lh-truong textarea:focus {
outline: 2px solid var(--ino-chinh); outline-offset: 1px; border-color: var(--ino-chinh);
}
.cn-pop-lh-bay { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cn-pop-lh-bao { margin: 0; font-size: 13.5px; font-weight: 600; min-height: 1px; }
.cn-pop-lh-bao.ok { color: #15803D; }
.cn-pop-lh-bao.loi { color: #B91C1C; }
.cn-pop-lh-chan { display: flex; gap: 9px; justify-content: flex-end; padding: 14px 24px 22px; margin-top: 6px; }
.cn-pop-lh-chan .cn-nut { padding: 10px 20px; font-size: 14px; }
@media (max-width: 480px) { .cn-pop-lh-hang { grid-template-columns: 1fr; } }
/* Thẻ ngành chưa có trang đích: giữ nguyên hình dáng nhưng bỏ mọi tín hiệu
bấm được. Để nó trông hệt thẻ có link mà bấm không ra gì thì khách tưởng
website hỏng — thà nói thẳng là mục này chưa có trang riêng. */
.cn-gt-tag.khong-lien-ket { cursor: default; opacity: .72; }
.cn-gt-tag.khong-lien-ket:hover { border-color: var(--ino-vien); background: transparent; }
/* ===========================================================================
Banner trang chủ ở chế độ tối
---------------------------------------------------------------------------
Khối .master-* tự khai bảng màu riêng (--m-navy, --m-ink, --m-line…) và ghim
nền trắng, nên khi máy khách đặt chế độ tối thì cả trang chuyển tối còn banner
vẫn là một mảng trắng nằm giữa đầu trang tối và khối bên dưới tối. Đúng thứ
khách mở trình duyệt ẩn danh nhìn thấy mà tưởng website hỏng.
CỐ Ý KHÔNG đổi các biến --m-* : chúng dùng chung cho phần MÔ PHỎNG MÀN HÌNH
PHẦN MỀM (.master-workspace, .mw-*, .master-phone, .master-rail). Ảnh chụp
giao diện thì phải sáng — đổi biến là viền và chữ trong ảnh mô phỏng tối theo,
hỏng luôn thứ đang muốn khoe. Chỉ đổi lớp vỏ bao quanh nó.
=========================================================================== */
:root[data-theme="dark"] .master-hero { background: var(--ino-nen); color: var(--ino-chu); }
:root[data-theme="dark"] /* Hoa văn chấm nền: màu sáng trên nền tối thành đốm nhiễu, :root[data-theme="dark"] phải dịu hẳn lại */
.master-hero:after { background-image: radial-gradient(#1C2C4E 1px, transparent 1px); }
:root[data-theme="dark"] .master-hero h1 { color: var(--ino-chu); }
:root[data-theme="dark"] .master-hero h1 strong { color: #6FA8FF; }
:root[data-theme="dark"] .master-lead { color: var(--ino-chu-mo); }
:root[data-theme="dark"] .master-eyebrow { background: rgba(111, 168, 255, .12); color: #6FA8FF; }
:root[data-theme="dark"] .master-kicker { color: #6FA8FF; }
:root[data-theme="dark"] .master-btn { border-color: var(--ino-vien); color: var(--ino-chu); }
:root[data-theme="dark"] .master-btn i { border-color: #6FA8FF; color: #6FA8FF; }
:root[data-theme="dark"] .master-btn:hover { border-color: #6FA8FF; }
:root[data-theme="dark"] .master-cap-strip span { border-right-color: var(--ino-vien); color: var(--ino-chu-mo); }
:root[data-theme="dark"] .master-concept-label { border-color: var(--ino-vien); background: var(--ino-nen-phu); color: var(--ino-chu-mo); }
:root[data-theme="dark"] .master-confidence { border-top-color: var(--ino-vien); border-bottom-color: var(--ino-vien);
background: var(--ino-nen-dam); }
:root[data-theme="dark"] .master-confidence .cn-bao { color: var(--ino-chu-mo); }
/* ===========================================================================
Nút chuyển chế độ Sáng / Tối
---------------------------------------------------------------------------
Chỉ biểu tượng, đứng cuối hàng đầu trang. Cho nó nền vàng thương hiệu để nổi
hẳn khỏi hàng nút xanh bên cạnh — nút này nhỏ và không có chữ, nếu để viền
mờ như các nút phụ thì gần như không ai nhìn thấy.
=========================================================================== */
.cn-nut-chu-de {
display: inline-grid; place-items: center; flex: 0 0 auto;
width: 38px; height: 38px; padding: 0;
border: 0; border-radius: 50%;
background: linear-gradient(145deg, var(--ino-vang), var(--ino-nhan));
color: #2B1500;
font-family: inherit; font-size: 17px; line-height: 1;
cursor: pointer;
box-shadow: 0 3px 10px rgba(255, 122, 0, .32);
transition: transform .18s, box-shadow .18s, filter .18s;
}
.cn-nut-chu-de:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 6px 16px rgba(255, 122, 0, .45); }
.cn-nut-chu-de:active { transform: translateY(0) scale(.97); }
.cn-nut-chu-de:focus-visible { outline: 2px solid var(--ino-chinh); outline-offset: 3px; }
.cn-nut-chu-de .cn-chu-de-icon { display: block; font-size: 17px; line-height: 1; }
/* Ở chế độ tối đổi sang tông xanh mát: mặt trời vàng trên nền tối chói mắt,
mà nút này nằm ngay tầm nhìn ở đầu trang. */
:root[data-theme="dark"] .cn-nut-chu-de {
background: linear-gradient(145deg, #FFD166, #FFA62B);
box-shadow: 0 3px 12px rgba(255, 166, 43, .3);
}
/* Bản trong menu điện thoại: ở đó là danh sách dòng chữ nên vẫn cần nhãn */
.cn-dh-chu-de {
display: flex; width: 100%; align-items: center; gap: 10px;
padding: 12px 4px; border: 0; background: transparent;
color: var(--ino-chu); font-family: inherit; font-size: 16px; font-weight: 600;
text-align: left; cursor: pointer;
}
.cn-dh-chu-de .cn-chu-de-icon {
display: grid; place-items: center; flex: 0 0 auto;
width: 30px; height: 30px; border-radius: 50%;
background: linear-gradient(145deg, var(--ino-vang), var(--ino-nhan));
color: #2B1500; font-size: 15px; line-height: 1;
}
/* ===========================================================================
Chế độ tối: giữ nguyên màu chữ bên trong phần mô phỏng màn hình phần mềm
---------------------------------------------------------------------------
.master-workspace / .master-phone / .master-rail cố ý giữ nền sáng vì chúng
là ảnh minh hoạ giao diện. Nhưng chữ bên trong lại thừa hưởng --ino-chu của
trang, mà ở chế độ tối biến đó là màu sáng — thành chữ trắng trên nền trắng.
Ghim lại về bảng màu riêng --m-* của chính khối banner.
=========================================================================== */
:root[data-theme="dark"] .master-workspace,
:root[data-theme="dark"] .master-phone,
:root[data-theme="dark"] .master-rail { color: var(--m-ink); }
:root[data-theme="dark"] .master-workspace b,
:root[data-theme="dark"] .master-workspace strong,
:root[data-theme="dark"] .master-workspace li,
:root[data-theme="dark"] .master-phone li,
:root[data-theme="dark"] .master-rail li { color: var(--m-navy); }
:root[data-theme="dark"] .mw-work li { color: #263550; }
:root[data-theme="dark"] .mw-tools { color: #506078; }
/* Thanh luồng dưới ảnh mô phỏng cũng thuộc ảnh minh hoạ nên giữ nền sáng. Nền
của nó khai bằng rgba trắng 97%, ở chế độ tối lớp 3% còn lại lộ nền đen ra
nên phải ghim đục hẳn. */
:root[data-theme="dark"] .master-rail { background: #FFFFFF; border-color: #dbe3ee; }
:root[data-theme="dark"] .master-concept-label { border-color: var(--ino-vien); }
/* ===========================================================================
Chế độ tối: chữ trên nền màu đặc
---------------------------------------------------------------------------
Ở chế độ tối --ino-chinh và --ino-nhan được nâng sáng để chữ màu đọc được
trên nền tối. Nhưng cùng hai biến đó cũng làm NỀN cho nút chính và các huy
hiệu — nền sáng lên thì chữ trắng trên đó tụt còn ~2,4:1. Nên đảo lại: nền
sáng thì chữ phải tối.
=========================================================================== */
:root[data-theme="dark"] .cn-nut.chinh,
:root[data-theme="dark"] .cn-nut.chinh:hover,
:root[data-theme="dark"] button.chinh,
:root[data-theme="dark"] .cn-o-tim-ben button,
:root[data-theme="dark"] .cn-lt-giai-doan.lt-xong .cn-lt-so,
:root[data-theme="dark"] .cn-lt-giai-doan.lt-thu-nghiem .cn-lt-so { color: #06152E; }
/* .master-btn.primary KHÔNG nằm trong nhóm trên: nền của nó là #075fff ghi
cứng trong khối banner, không phải biến --ino-chinh, nên ở chế độ tối nền
vẫn xanh đậm — chữ phải trắng chứ không phải chữ tối. Chỉ cần chặn nó thừa
hưởng --ino-chu (màu sáng ngả xám) để về đúng trắng thuần. */
:root[data-theme="dark"] .master-btn.primary { color: #fff; }
:root[data-theme="dark"] .cn-nut.chinh svg { color: inherit; }
/* Hàng liên kết pháp lý ở chân trang */
.cn-chan-phap-ly {
display: flex; flex-wrap: wrap; gap: 6px 22px;
padding: 16px 0 0; margin-top: 8px;
border-top: 1px solid var(--ino-vien);
font-size: 14px;
}
.cn-chan-phap-ly a { color: var(--ino-chu-mo); }
.cn-chan-phap-ly a:hover { color: var(--ino-chinh); }
/* ===========================================================================
Câu hỏi thường gặp
=========================================================================== */
.cn-faq-ds { display: flex; flex-direction: column; gap: 10px; }
.cn-faq-muc {
border: 1px solid var(--ino-vien); border-radius: var(--ino-goc-nho);
background: var(--ino-nen); overflow: hidden;
}
.cn-faq-muc summary {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 16px 20px; cursor: pointer;
font-family: var(--ino-font-tieu-de); font-size: 16px; font-weight: 700;
list-style: none;
}
/* Bỏ mũi tên mặc định của trình duyệt để dùng dấu cộng tự vẽ bên dưới */
.cn-faq-muc summary::-webkit-details-marker { display: none; }
.cn-faq-muc summary::marker { content: ""; }
.cn-faq-muc summary:hover { color: var(--ino-chinh); }
.cn-faq-muc[open] summary { border-bottom: 1px solid var(--ino-vien); }
/* Dấu cộng xoay thành dấu trừ khi mở — hai gạch chồng nhau, không dùng ảnh */
.cn-faq-dau { position: relative; flex: none; width: 16px; height: 16px; }
.cn-faq-dau::before, .cn-faq-dau::after {
content: ""; position: absolute; inset: 50% 0 auto 0;
height: 2px; border-radius: 2px; background: var(--ino-chinh);
transform: translateY(-50%); transition: transform .2s;
}
.cn-faq-dau::after { transform: translateY(-50%) rotate(90deg); }
.cn-faq-muc[open] .cn-faq-dau::after { transform: translateY(-50%) rotate(0deg); }
.cn-faq-dap { padding: 16px 20px 20px; color: var(--ino-chu-mo); line-height: 1.75; }
.cn-faq-them { margin: 22px 0 0; text-align: center; color: var(--ino-chu-mo); font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
.cn-faq-dau::before, .cn-faq-dau::after { transition: none; }
}
/* ===========================================================================
Băng chuyền (dùng cho khối cảm nhận khách hàng)
---------------------------------------------------------------------------
Nền móng là một hàng cuộn ngang có scroll-snap. Không có JavaScript thì khối
vẫn dùng được: vuốt trên điện thoại, kéo thanh cuộn hoặc Tab qua từng thẻ
trên máy tính. JavaScript chỉ bổ sung nút trước/sau, chấm chỉ vị trí và tự
chạy — mất JS là mất tiện nghi, không mất nội dung.
=========================================================================== */
.cn-slide { position: relative; }
.cn-slide-khung {
display: grid; grid-auto-flow: column;
grid-auto-columns: calc((100% - 2 * 22px) / 3);
gap: 22px;
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
/* Chừa chỗ cho bóng đổ của thẻ, không thì viền dưới bị thanh cuộn cắt cụt */
padding: 4px 4px 18px;
scrollbar-width: none;
}
.cn-slide-khung::-webkit-scrollbar { display: none; }
.cn-slide-muc { scroll-snap-align: start; margin: 0; }
@media (max-width: 1024px) { .cn-slide-khung { grid-auto-columns: calc((100% - 22px) / 2); } }
@media (max-width: 700px) { .cn-slide-khung { grid-auto-columns: 88%; } }
@media (prefers-reduced-motion: reduce) {
.cn-slide-khung { scroll-behavior: auto; }
}