/* Trang chủ Sale Agent — chỉ index.html nạp tệp này (trang pháp lý KHÔNG nạp, chúng chỉ cần
site.css). Bảng màu, chữ, nút, thanh trên, chân trang và hiệu ứng `.reveal` dùng chung ở
site.css — đừng khai lại ở đây.
MỌI HÌNH MINH HOẠ Ở ĐÂY LÀ HTML/CSS/SVG. Tệp ảnh duy nhất trên trang là LOGO
(`assets/logo.png`). Cố ý: ảnh chụp màn hình thật sẽ lộ dữ liệu shop, mờ trên màn Retina,
nặng, và mỗi lần đổi giao diện là ảnh cũ nói dối. Khung chat / thẻ đơn / hộp thư dựng bằng
thẻ thì sắc nét ở mọi độ phân giải và sửa chữ là xong — không phải mở công cụ thiết kế.
── SỬA 08/09/2026: BỎ LỚP LƯỚI Ô VUÔNG Ở HERO ────────────────────────────────────────
Bản trước phủ `linear-gradient` kẻ ô 46px lên nền hero. Đó là hoạ tiết của các bản mẫu
landing page bán sẵn, và nó chính là thứ làm trang "nhìn giống trang demo": mắt nhận ra
khuôn mẫu trước khi kịp đọc chữ. Thay bằng MỘT vệt sáng mềm duy nhất ở góc trên — đủ để
nền không phẳng lì, không đủ để ai nghĩ tới bản mẫu. Đừng thêm hoạ tiết lặp lại vào đây. */
/* ── Hero ────────────────────────────────────────────────────────────────────────────
Hero KHÔNG có viền dưới và chạy thẳng lên dưới thanh trên trong suốt (site.css). */
.hero-lg {
position: relative;
padding: 76px 0 72px;
overflow: hidden;
background:
radial-gradient(1200px 520px at 82% -12%, hsl(196 97% 57% / 0.14), transparent 60%),
radial-gradient(1000px 480px at 6% -6%, hsl(231 88% 56% / 0.13), transparent 58%),
linear-gradient(180deg, hsl(226 60% 99%), hsl(0 0% 100%) 62%);
}
.hero-lg > .wrap { position: relative; z-index: 1; }
.split { display: grid; gap: 56px; align-items: center; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); }
.split.rev > *:first-child { order: 2; }
/* `max-width: 100%` + `flex-wrap: wrap` là SỬA LỖI TRÀN NGANG, không phải trang trí.
`inline-flex` co theo nội dung và mặc định KHÔNG xuống dòng, nên trên máy 390px cả viên
này đẩy ngang ra ngoài mép màn hình và kéo theo cả trang trượt ngang — đo bằng ảnh chụp
390px: mọi khối bên dưới đều bị cắt cụt bên phải. Nhãn dài thì phải được phép gãy dòng. */
.eyebrow {
display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; row-gap: 5px;
max-width: 100%;
padding: 6px 15px 6px 7px; border-radius: 999px; margin-bottom: 24px;
background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
font-size: 13.5px; font-weight: 600; color: var(--muted-fg);
}
.eyebrow b {
color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2));
border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700;
}
h1.big { font-size: clamp(33px, 4.9vw, 55px); line-height: 1.1; letter-spacing: -0.032em; margin: 0 0 22px; }
h1.big em {
font-style: normal;
background: linear-gradient(105deg, var(--brand-deep), var(--brand) 45%, var(--brand-2));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
p.lead-lg { font-size: clamp(16.5px, 1.5vw, 19px); color: var(--muted-fg); margin: 0 0 32px; max-width: 560px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn-lg { padding: 14px 26px; font-size: 16.5px; border-radius: 12px; }
/* KHÔNG dùng flex ở đây: `gap` biến MỖI nút văn bản thành một ô riêng, nên dấu chấm sau một
thẻ bị đẩy ra xa thành "Support ." — thấy trên ảnh chụp bản tiếng Anh. Chữ chảy tự nhiên,
icon canh bằng vertical-align. */
.reassure { margin: 22px 0 0; font-size: 14.5px; color: var(--muted-fg); }
.reassure svg { color: var(--ok); vertical-align: -3px; margin-right: 7px; }
/* ── Khung điện thoại + hội thoại ─────────────────────────────────────────────────────
Khung này là thứ ĐẦU TIÊN người ta nhìn ở hero, nên nó được bóng sâu nhất trang và
một viền sáng bên trong (`inset`) để mép trên bắt sáng như vật thật. */
.phone {
width: 100%; max-width: 396px; margin: 0 auto;
background: var(--card); border: 1px solid var(--border); border-radius: 24px;
box-shadow:
inset 0 1px 0 hsl(0 0% 100%),
0 2px 6px hsl(222 45% 11% / 0.05),
0 34px 68px -26px hsl(231 60% 25% / 0.35);
overflow: hidden;
}
/* Trôi lên rất chậm sau khi hiện — chỉ 6px, gần như không thấy chuyển động, nhưng khung
thôi "đứng chết" trong khi mắt còn đọc tiêu đề bên trái. */
.js-anim .phone.is-in { animation: float-in 1.1s var(--ease) .15s both; }
@keyframes float-in { from { transform: translateY(6px); } to { transform: none; } }
.phone-top { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.ava {
width: 34px; height: 34px; border-radius: 999px; flex: 0 0 34px; display: grid; place-items: center;
background: linear-gradient(135deg, hsl(330 75% 58%), hsl(268 72% 60%)); color: #fff; font-weight: 700; font-size: 14px;
}
.phone-top .who { min-width: 0; line-height: 1.35; }
.phone-top .who strong { display: block; font-size: 14.5px; }
.phone-top .who span { font-size: 12px; color: var(--muted-fg); }
.tag-live {
margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; font-weight: 700; color: var(--ok);
background: hsl(158 74% 33% / 0.1); padding: 4px 10px; border-radius: 999px;
}
.tag-live i { width: 6px; height: 6px; border-radius: 999px; background: currentColor; display: block; }
/* Chấm "đang trực" thở nhẹ. Một chuyển động sống duy nhất ở hero là đủ; thêm nữa là rối. */
.js-anim .tag-live i { animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot {
0%, 100% { box-shadow: 0 0 0 0 hsl(158 74% 33% / 0.5); }
70% { box-shadow: 0 0 0 5px hsl(158 74% 33% / 0); }
}
.thread { padding: 17px 16px 19px; display: flex; flex-direction: column; gap: 10px; background: var(--subtle); }
.msg { max-width: 84%; padding: 10px 14px; border-radius: 17px; font-size: 14px; line-height: 1.58; }
.msg.in { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 5px; box-shadow: var(--shadow-sm); }
.msg.out {
align-self: flex-end; color: var(--brand-fg); border-bottom-right-radius: 5px;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
box-shadow: 0 6px 16px -8px hsl(231 88% 50% / 0.7);
}
.msg.out b { font-weight: 700; }
.cite {
display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600;
background: hsl(0 0% 100% / 0.24); color: inherit;
}
.cite svg { flex: 0 0 auto; }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 15px; background: var(--card); border: 1px solid var(--border); border-radius: 17px; border-bottom-left-radius: 5px; }
.typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--muted-fg); opacity: 0.5; display: block; }
/* Ba chấm "đang soạn" nảy so le — chi tiết nhỏ này là thứ làm khung chat trông SỐNG chứ
không phải một ảnh tĩnh vẽ bằng CSS. */
.js-anim .typing i { animation: type-bounce 1.25s ease-in-out infinite; }
.js-anim .typing i:nth-child(2) { animation-delay: .16s; }
.js-anim .typing i:nth-child(3) { animation-delay: .32s; }
@keyframes type-bounce {
0%, 60%, 100% { transform: translateY(0); opacity: .45; }
30% { transform: translateY(-4px); opacity: .95; }
}
.stamp { align-self: center; font-size: 11px; color: var(--muted-fg); margin-top: 2px; }
/* ── Thẻ đơn hàng (dùng cả trong hội thoại lẫn ngoài) ─────────────────────────────── */
.order-card {
background: var(--card); border: 1px solid var(--border); border-radius: 15px; overflow: hidden;
font-size: 13.5px; box-shadow: var(--shadow-sm);
}
.order-card.in-thread { align-self: stretch; margin-top: 3px; }
.order-head { display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-bottom: 1px solid var(--border-soft); font-weight: 700; font-size: 13.5px; }
.chip {
margin-left: auto; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
background: hsl(32 96% 46% / 0.14); color: var(--warn);
}
.order-row { display: flex; gap: 10px; padding: 10px 15px; border-bottom: 1px dashed var(--border); }
.order-row span:first-child { flex: 1; min-width: 0; }
.order-row .qty { color: var(--muted-fg); flex: 0 0 auto; }
.order-row .amt { font-variant-numeric: tabular-nums; flex: 0 0 auto; font-weight: 600; }
.order-meta { padding: 10px 15px; color: var(--muted-fg); font-size: 12.5px; border-bottom: 1px dashed var(--border); }
.order-total { display: flex; padding: 12px 15px; font-weight: 800; }
.order-total .amt { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--brand); }
.order-foot { padding: 11px 15px; background: var(--brand-wash); color: var(--fg-soft); font-size: 12.5px; display: flex; gap: 9px; align-items: flex-start; }
.order-foot svg { flex: 0 0 auto; margin-top: 3px; color: var(--brand); }
/* ── Dải giá trị dưới hero ───────────────────────────────────────────────────────────
Không còn là một hàng chữ nhỏ kẹp giữa hai đường kẻ. Bốn Ô THẺ có icon tròn màu
thương hiệu: đây là chỗ đọc nhanh nhất trang, nó xứng đáng có sức nặng thị giác. */
.strip { padding: 0 0 8px; background: linear-gradient(180deg, hsl(0 0% 100%), var(--subtle)); }
.strip .wrap {
display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
padding-top: 4px; padding-bottom: 44px;
}
.strip .cell {
display: flex; gap: 14px; align-items: flex-start;
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
padding: 20px; box-shadow: var(--shadow-sm);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.strip .cell:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.strip .cell > svg {
flex: 0 0 40px; width: 40px; height: 40px; padding: 9px; border-radius: 11px;
color: var(--brand); background: var(--brand-wash);
}
.strip .cell > div { min-width: 0; }
/* `text-wrap: balance` chia đều chữ khi tiêu đề phải gãy hai dòng, để bốn ô không so le
thành hình răng cưa. Trình duyệt cũ bỏ qua thuộc tính này — không sao, chỉ mất phần đẹp. */
.strip .cell strong { display: block; font-size: 15px; line-height: 1.4; margin-bottom: 3px; text-wrap: balance; }
.strip .cell span { font-size: 13.5px; color: var(--muted-fg); line-height: 1.55; display: block; }
/* ── Tiêu đề khối ─────────────────────────────────────────────────────────────────── */
.head { max-width: 680px; margin: 0 0 34px; }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.kicker {
display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--brand); margin: 0 0 14px;
padding: 5px 12px; border-radius: 999px; background: var(--brand-wash);
}
.head h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 14px; }
.head p { color: var(--muted-fg); margin: 0; font-size: 17px; }
/* ── Thẻ tính năng có icon SVG ───────────────────────────────────────────────────── */
.feat { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.feat .card {
display: flex; flex-direction: column; gap: 11px; padding: 26px;
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feat .card:hover { border-color: hsl(231 60% 84%); transform: translateY(-4px); box-shadow: var(--shadow); }
.ico-box {
width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
box-shadow: 0 6px 14px -6px hsl(231 88% 50% / 0.6);
}
.feat .card h3 { margin: 0; font-size: 17px; }
.feat .card p { margin: 0; font-size: 15px; color: var(--muted-fg); }
/* ── Nỗi đau: hai cột trước / sau ────────────────────────────────────────────────── */
.compare { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pane { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; background: var(--card); box-shadow: var(--shadow-sm); }
.pane.bad { background: hsl(356 76% 55% / 0.035); border-color: hsl(356 60% 89%); }
.pane.good { background: hsl(158 74% 33% / 0.045); border-color: hsl(158 45% 82%); }
.pane h3 { margin: 0 0 18px; font-size: 16.5px; display: flex; align-items: center; gap: 10px; }
.pane.bad h3 { color: var(--bad); }
.pane.good h3 { color: var(--ok); }
.pane ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.pane li { display: flex; gap: 11px; font-size: 15px; align-items: flex-start; color: var(--fg-soft); line-height: 1.6; }
.pane li svg { flex: 0 0 auto; margin-top: 5px; opacity: 0.9; }
.pane.bad li svg { color: var(--bad); }
.pane.good li svg { color: var(--ok); }
/* ── Chú giải có đánh số cạnh ảnh minh hoạ ───────────────────────────────────────── */
.notes { display: grid; gap: 18px; margin: 0; padding: 0; counter-reset: n; }
.notes li { list-style: none; display: flex; gap: 16px; align-items: flex-start; }
.notes li::before {
counter-increment: n; content: counter(n);
flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; margin-top: 1px;
background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-fg);
display: grid; place-items: center; font-size: 13.5px; font-weight: 800;
box-shadow: 0 5px 12px -5px hsl(231 88% 50% / 0.65);
}
.notes strong { display: block; font-size: 16px; margin-bottom: 3px; }
.notes p { margin: 0; color: var(--muted-fg); font-size: 15px; }
/* ── Cửa sổ giả lập hộp thư ──────────────────────────────────────────────────────── */
.window {
border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card);
box-shadow: inset 0 1px 0 hsl(0 0% 100%), 0 2px 6px hsl(222 45% 11% / 0.05), 0 30px 60px -26px hsl(231 60% 25% / 0.32);
}
.window-bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid var(--border-soft); background: var(--subtle); }
.window-bar i { width: 9px; height: 9px; border-radius: 999px; background: var(--border); display: block; }
.window-bar span { margin-left: 8px; font-size: 12.5px; color: var(--muted-fg); }
.window-body { display: grid; grid-template-columns: minmax(0, 214px) minmax(0, 1fr); min-height: 272px; }
.conv-list { border-right: 1px solid var(--border-soft); }
.conv { display: flex; gap: 10px; padding: 12px 13px; border-bottom: 1px solid var(--border-soft); align-items: center; }
.conv.active { background: var(--brand-wash); box-shadow: inset 2px 0 0 var(--brand); }
.conv .ava { width: 28px; height: 28px; flex: 0 0 28px; font-size: 12px; }
.conv .who { min-width: 0; line-height: 1.35; }
.conv .who strong { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .who span { font-size: 11.5px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.src-tag { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--subtle); border: 1px solid var(--border); color: var(--muted-fg); flex: 0 0 auto; }
.conv-pane { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--subtle); }
/* ── Kênh ────────────────────────────────────────────────────────────────────────── */
.chan { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.chan .card {
display: flex; gap: 15px; align-items: flex-start; padding: 24px;
transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.chan .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: hsl(231 60% 86%); }
.chan .glyph { width: 44px; height: 44px; border-radius: 13px; flex: 0 0 44px; display: grid; place-items: center; color: #fff; }
.chan .g-fb { background: linear-gradient(135deg, hsl(214 89% 52%), hsl(196 92% 50%)); box-shadow: 0 6px 14px -6px hsl(214 89% 52% / 0.65); }
.chan .g-oa { background: linear-gradient(135deg, hsl(210 90% 46%), hsl(190 88% 44%)); box-shadow: 0 6px 14px -6px hsl(200 90% 46% / 0.65); }
.chan .g-zl { background: linear-gradient(135deg, hsl(258 72% 58%), hsl(288 68% 56%)); box-shadow: 0 6px 14px -6px hsl(270 70% 56% / 0.65); }
.chan h3 { margin: 0 0 6px; font-size: 16.5px; }
.chan p { margin: 0; font-size: 14.5px; color: var(--muted-fg); }
/* ── Bảng giá ────────────────────────────────────────────────────────────────────── */
.plans { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; }
.plan {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: 26px; box-shadow: var(--shadow-sm); position: relative;
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* Gói được khuyên dùng nhô lên hẳn và có viền màu thương hiệu — mắt phải thấy nó TRƯỚC. */
.plan.hot {
border-color: hsl(231 80% 78%);
box-shadow: 0 2px 6px hsl(222 45% 11% / 0.05), 0 24px 52px -22px hsl(231 88% 50% / 0.55);
}
.plan.hot:hover { box-shadow: 0 2px 6px hsl(222 45% 11% / 0.05), 0 30px 60px -22px hsl(231 88% 50% / 0.65); }
.plan .flag {
position: absolute; top: -13px; left: 30px;
background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--brand-fg);
font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 999px;
box-shadow: 0 6px 14px -6px hsl(231 88% 50% / 0.7);
}
.plan h3 { margin: 0 0 4px; font-size: 17.5px; }
.plan .price { font-size: 36px; font-weight: 800; letter-spacing: -0.035em; margin: 14px 0 2px; }
.plan .price small { font-size: 14px; font-weight: 500; color: var(--muted-fg); letter-spacing: 0; }
.plan .note { font-size: 13.5px; color: var(--muted-fg); margin: 0 0 22px; }
.plan ul { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; font-size: 15px; align-items: flex-start; color: var(--fg-soft); }
.plan li svg { flex: 0 0 auto; margin-top: 5px; color: var(--ok); }
.plan .btn { width: 100%; justify-content: center; }
/* ── Câu hỏi thường gặp ──────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq details {
background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow-sm);
transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq details[open] { border-color: hsl(231 60% 86%); box-shadow: var(--shadow); }
.faq summary {
cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 16px;
list-style: none; display: flex; gap: 16px; align-items: center;
transition: color .2s var(--ease);
}
.faq summary:hover { color: var(--brand); }
.faq summary::-webkit-details-marker { display: none; }
/* Dấu + xoay 45° thành ×, thay vì đổi ký tự. Đổi ký tự thì nhảy cóc; xoay thì mượt. */
.faq summary::after {
content: '+'; margin-left: auto; font-size: 23px; font-weight: 400; color: var(--muted-fg);
line-height: 1; flex: 0 0 auto; transition: transform .3s var(--ease), color .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--brand); }
.faq details[open] summary { border-bottom: 1px solid var(--border-soft); }
.faq .ans { padding: 17px 22px 20px; color: var(--muted-fg); font-size: 15.5px; }
.faq .ans p { margin: 0 0 10px; }
.faq .ans p:last-child { margin: 0; }
/* ── Dải kêu gọi cuối ────────────────────────────────────────────────────────────── */
.final {
position: relative; overflow: hidden;
border-radius: 26px; padding: 52px 40px; text-align: center; color: #fff;
background: linear-gradient(135deg, hsl(231 82% 46%), hsl(215 90% 46%) 45%, hsl(196 92% 44%));
box-shadow: 0 30px 70px -30px hsl(231 82% 40% / 0.65);
}
/* Vệt sáng chéo rất nhạt — cùng lý do với hero: nền không được phẳng lì, nhưng cũng không
được có hoạ tiết lặp. */
.final::before {
content: ''; position: absolute; inset: -40% -10% auto -10%; height: 160%;
background: radial-gradient(60% 50% at 20% 0%, hsl(0 0% 100% / 0.18), transparent 70%);
pointer-events: none;
}
.final > * { position: relative; }
.final h2 { font-size: clamp(25px, 3.2vw, 35px); margin: 0 0 14px; letter-spacing: -0.028em; }
.final p { margin: 0 auto 30px; max-width: 560px; opacity: 0.94; font-size: 17px; }
.final .btn-white { background: #fff; color: hsl(231 82% 44%); box-shadow: 0 10px 26px -10px hsl(231 82% 20% / 0.6); }
.final .btn-white:hover { text-decoration: none; transform: translateY(-1.5px); box-shadow: 0 16px 34px -12px hsl(231 82% 20% / 0.7); }
.final .btn-line { background: hsl(0 0% 100% / 0.08); color: #fff; border-color: hsl(0 0% 100% / 0.45); box-shadow: none; }
.final .btn-line:hover { text-decoration: none; transform: translateY(-1.5px); background: hsl(0 0% 100% / 0.16); border-color: hsl(0 0% 100% / 0.7); }
.final small { display: block; margin-top: 20px; font-size: 13.5px; opacity: 0.85; }
/* ── Chân trang nhiều cột ────────────────────────────────────────────────────────── */
/* `footer .wrap` ở site.css là (0,1,1) và ép `display:flex` — một class trần (0,1,0) THUA nó,
nên chân trang nhiều cột sẽ xẹp thành một hàng ngang. Phải viết đủ `footer .wrap.foot-cols`. */
footer .wrap.foot-cols {
display: grid; gap: 34px 38px; align-items: start;
grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(148px, 1fr));
padding-bottom: 34px;
}
.foot-cols h4 { margin: 0 0 13px; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-fg); font-weight: 800; }
.foot-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.foot-cols a { color: var(--muted-fg); font-size: 14.5px; transition: color .2s var(--ease); }
.foot-cols a:hover { color: var(--brand); }
.foot-cols .about p { margin: 14px 0 0; color: var(--muted-fg); font-size: 14.5px; max-width: 340px; }
@media (max-width: 900px) {
.hero-lg { padding: 44px 0 52px; }
.split { grid-template-columns: 1fr; gap: 40px; }
.split.rev > *:first-child { order: 0; }
.window-body { grid-template-columns: 1fr; }
.conv-list { border-right: 0; border-bottom: 1px solid var(--border-soft); display: flex; overflow-x: auto; }
.conv { border-bottom: 0; border-right: 1px solid var(--border-soft); min-width: 190px; }
.conv.active { box-shadow: inset 0 -2px 0 var(--brand); }
.final { padding: 44px 24px; border-radius: 20px; }
.head { margin-bottom: 34px; }
}
/* Thanh trên DÍNH (70px) che mất tiêu đề khối khi nhảy tới neo `#...`. Đo bằng ảnh chụp:
bấm "Chốt đơn" xong thì dòng `.kicker` nằm sau thanh trên. Chừa lề cuộn cho mọi thẻ có id. */
[id] { scroll-margin-top: 88px; }
/* Hai chỗ vỡ trên điện thoại, đo bằng ảnh chụp 390px:
1. Viên "3 kênh" bị bóp thành hai dòng khi phần chữ bên cạnh xuống dòng — nó là nhãn, không
được phép gãy.
2. Thanh điều hướng 6 mục tràn thành hai hàng. Bốn mục neo trong trang là thứ bỏ được: trên
điện thoại người ta cuộn chứ không bấm mục lục, còn Hỗ trợ / English / Đăng nhập thì không. */
.eyebrow b { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
.plan, .pane { padding: 22px; }
.strip .wrap { padding-bottom: 32px; gap: 12px; }
.strip .cell { padding: 16px; gap: 12px; }
.strip .cell > svg { flex-basis: 34px; width: 34px; height: 34px; padding: 7px; border-radius: 9px; }
/* 12,5px là cỡ để cả nhãn nằm gọn MỘT dòng ở 390px (đo: viên "3 kênh" 56px + chữ 250px +
đệm 22px = 328 < 358 chỗ trống). Ở 13,5px nó gãy hai dòng và viên nhãn phình thành một
khối dày ngay trên tiêu đề — thứ đầu tiên khách nhìn thấy lại là một cục xám. */
.eyebrow { font-size: 12.5px; margin-bottom: 18px; padding: 5px 13px 5px 6px; }
.xs-off { display: none; }
.head { margin-bottom: 26px; }
.final { padding: 36px 22px; }
/* Hai nút hero rộng bằng nhau và bằng cột: hai nút DÀI NGẮN KHÁC NHAU xếp chồng trên
điện thoại tạo một mép phải răng cưa, và mép răng cưa là thứ đọc ra "làm vội". Rộng
hết cột cũng cho vùng chạm to hơn — người ta bấm bằng ngón cái. */
.hero-lg .cta-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.hero-lg .cta-row .btn { width: 100%; }
}