/* Kiểu dùng chung cho trang chủ và các trang phụ trong web_gioi_thieu/.
⚠️ Sửa file này xong thì ĐỔI số ?v=... ở thẻ trong MỌI trang .html
(chạy cong_cu/dong_bo_trang_phu.py là trang phụ tự lấy theo trang chủ), không
thì trình duyệt khách còn giữ bản CSS cũ trong bộ nhớ đệm.
================== THIẾT KẾ (15/10/2026) ==================
Làm theo bộ handoff tnchee_claude_handoff/ (CLAUDE_CODE_BRIEF.md +
design-tokens.css + effects.css): SaaS sáng, trắng/bạc hà, nút bo tròn
hẳn, thẻ bo 22px viền mảnh bóng nhẹ, lá lấy từ màn đăng nhập.
Brief viết cho Flutter; người dùng chốt làm bằng HTML (tải nhanh, Google
đọc được, không đụng app). Nền tối giữ kiểu đã chọn 15/10: đen ngả xanh
rêu + lá + quầng sáng. */
:root {
--bg: #FFFFFF;
--bg-soft: #F5FAF6;
--mint: #EDF8F0;
--hero-bg: #F1F9F4;
--ink: #17251E;
--ink-soft: #46564D;
--muted: #718178;
--line: #DDE9E0;
--line-strong: #B8DCC4;
--card: #FFFFFF;
--brand: #168447;
--brand-hover: #0E713B;
--brand-deep: #126B3A;
--brand-soft: #E3F5E9;
--brand-2: #42B86B;
--forest: #0E3A2A;
--forest-ink: #CFE8D8;
--warn-bg: #FDF1E1; --warn-ink: #8A4A0B;
--late-bg: #FCE9E7; --late-ink: #A12A1E;
--header-bg: rgba(255,255,255,.86);
--r-sm: 10px; --r-md: 16px; --r-card: 22px; --r-pill: 999px;
--shadow-sm: 0 1px 2px rgba(17,65,39,.05);
--shadow-card: 0 8px 28px rgba(17,65,39,.07);
--shadow-float: 0 18px 48px rgba(10,55,34,.14);
--content-max: 1240px;
--ease: cubic-bezier(.2,.8,.2,1);
interpolate-size: allow-keywords;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #07120C; --bg-soft: #0B1A12; --mint: #0D1D14; --hero-bg: #07120C;
--ink: #ECF7EF; --ink-soft: #A6C4B0; --muted: #6F8F7A; --line: #1C3526; --line-strong: #2C5038;
--card: #0F2017; --brand: #168447; --brand-hover: #1B9A54; --brand-deep: #7EE2A8; --brand-soft: #123222;
--brand-2: #4CC27A; --forest: #0B2A1A; --forest-ink: #BCD6C4;
--warn-bg: #3A2A14; --warn-ink: #F5C78A; --late-bg: #3B1C19; --late-ink: #F4A79D;
--header-bg: rgba(7,18,12,.84);
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow-card: 0 10px 30px rgba(0,0,0,.45);
--shadow-float: 0 22px 54px rgba(0,0,0,.6);
}
}
:root[data-theme="dark"] {
--bg: #07120C; --bg-soft: #0B1A12; --mint: #0D1D14; --hero-bg: #07120C;
--ink: #ECF7EF; --ink-soft: #A6C4B0; --muted: #6F8F7A; --line: #1C3526; --line-strong: #2C5038;
--card: #0F2017; --brand: #168447; --brand-hover: #1B9A54; --brand-deep: #7EE2A8; --brand-soft: #123222;
--brand-2: #4CC27A; --forest: #0B2A1A; --forest-ink: #BCD6C4;
--warn-bg: #3A2A14; --warn-ink: #F5C78A; --late-bg: #3B1C19; --late-ink: #F4A79D;
--header-bg: rgba(7,18,12,.84);
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow-card: 0 10px 30px rgba(0,0,0,.45);
--shadow-float: 0 22px 54px rgba(0,0,0,.6);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0; background: var(--bg); color: var(--ink);
font-family: "Be Vietnam Pro", Inter, system-ui, sans-serif;
-webkit-font-smoothing: antialiased; line-height: 1.6; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.2; }
/* Cụm cách điệu trong tiêu đề mục (đợt 13): dùng lại .noi-bat của phần mở
đầu, nghiêng nhẹ hơn cho đỡ rối khi lặp nhiều lần trên trang. */
h2 .noi-bat { margin-top: .12em; }
h2 .noi-bat::before { transform: rotate(-1.6deg); }
h3 { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; color: var(--ink-soft); text-wrap: pretty; }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
section { padding: clamp(48px, 6vw, 80px) 0; position: relative; }
.mono { font-variant-numeric: tabular-nums; }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Nhãn nhỏ đầu khối ("Phần mềm quản lý...", "Tính năng nổi bật") */
.nhan-nho {
display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-deep);
font-size: 0.9rem; font-weight: 500;
}
.nhan-nho svg { width: 16px; height: 16px; }
/* ---------- nút ----------
Bo tròn hẳn (pill) theo design-tokens; cao tối thiểu 48px để bấm tay. */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 48px; padding: 0 1.5em; white-space: nowrap;
font-family: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
border-radius: var(--r-pill); text-decoration: none; border: 1px solid transparent; cursor: pointer;
transition: transform .16s var(--ease), background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 24px -12px rgba(22,132,71,.75); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-deep); }
.btn-light { background: #fff; color: #0E3A2A; }
.btn-light:hover { background: #E3F5E9; }
.btn-outline-light { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-sm { min-height: 44px; padding: 0 1.2em; font-size: 0.95rem; }
.btn-lon { min-height: 60px; padding: 0 2em; font-size: 1.12rem; font-weight: 700; }
.btn-lon svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
/* ---------- thanh trên cùng (dùng chung mọi trang) ----------
Logo chữ | 7 mục trỏ sang TRANG RIÊNG | tìm kiếm, sáng/tối, Đăng nhập,
Dùng thử. ≤1340px: 7 mục gom vào ☰. ≤640px: chỉ còn logo + "Dùng thử"
+ ☰; tìm kiếm, sáng/tối, Đăng nhập nằm trong ☰. */
/* Đợt 26: thanh NỔI - khung trắng bo 22px, bóng mềm, cách mép trên 14px (theo mẫu
người dùng gửi). Header ngoài trong suốt; chỉ khung bên trong có nền. */
header.thanh-tren { position: sticky; top: 0; z-index: 30; padding: 14px clamp(12px, 2vw, 24px) 0; pointer-events: none; }
header.thanh-tren > .wrap {
pointer-events: auto; padding: 0 clamp(16px, 2vw, 28px);
background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(14px);
border: 1px solid rgba(22,132,71,.08); border-radius: 22px;
box-shadow: 0 1px 2px rgba(10,40,24,.04), 0 14px 40px -18px rgba(10,60,32,.22);
}
.thanh-tren .wrap { max-width: 1440px; display: flex; align-items: center; height: 76px; gap: 12px; }
.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand img { height: 46px; width: auto; }
.menu-chinh { display: flex; align-items: center; gap: clamp(2px, .5vw, 10px); margin-left: clamp(12px, 2vw, 36px); }
.menu-chinh a, .menu-gon .ds a { text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: 0.98rem; white-space: nowrap; }
.menu-chinh a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 11px; border-radius: 14px; transition: background-color .16s ease, color .16s ease; }
.menu-chinh a svg { width: 18px; height: 18px; color: var(--brand); }
.menu-chinh a:hover { color: var(--ink); background: var(--bg-soft); }
/* mục đang mở: viên thuốc xanh nhạt (thay gạch chân, đợt 26) */
.menu-chinh a[aria-current="page"] { background: var(--brand-soft); }
.menu-chinh a[aria-current="page"], .menu-gon .ds a[aria-current="page"] { color: var(--brand-deep); font-weight: 600; }
.hanh-dong { display: flex; align-items: center; gap: 8px; margin-left: auto; position: relative; }
.nut-tron {
width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
border: 1px solid transparent; background: transparent; color: var(--ink);
display: grid; place-items: center; cursor: pointer; padding: 0;
transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.nut-tron:hover { background: var(--brand-soft); color: var(--brand-deep); }
.hanh-dong > .nut-tim-kiem { background: var(--bg-soft); }
.btn-vien { border: 1.5px solid var(--brand); color: var(--brand-deep); background: transparent; }
.btn-vien:hover { background: var(--brand-soft); }
.btn-dam { background: linear-gradient(135deg, #1FA458, #0E6E3A); }
.btn-dam:hover { background: linear-gradient(135deg, #22B160, #0C6234); }
.hanh-dong .btn-sm { min-height: 48px; padding: 0 1.5em; }
.nut-tron svg { width: 21px; height: 21px; }
.gach-dung { width: 1px; height: 28px; background: var(--line); margin: 0 4px; }
.nut-giao-dien .i-moon { display: block; } .nut-giao-dien .i-sun { display: none; }
:root[data-theme="dark"] .nut-giao-dien .i-moon { display: none; }
:root[data-theme="dark"] .nut-giao-dien .i-sun { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .nut-giao-dien .i-moon { display: none; }
:root:not([data-theme="light"]) .nut-giao-dien .i-sun { display: block; }
}
.menu-gon { display: none; position: static; }
.menu-gon summary {
list-style: none; cursor: pointer; width: 46px; height: 46px; border-radius: 12px;
border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center;
}
.menu-gon summary::-webkit-details-marker { display: none; }
.menu-gon summary svg { width: 21px; height: 21px; }
.menu-gon .ds {
position: absolute; right: 0; top: calc(100% + 12px); min-width: 260px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
box-shadow: var(--shadow-float); padding: 8px; display: flex; flex-direction: column;
}
.menu-gon .ds a, .menu-gon .ds button {
display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 10px;
text-decoration: none; color: var(--ink-soft); font-weight: 500; border: 0; background: none; cursor: pointer; text-align: left; width: 100%;
}
.menu-gon .ds button svg { width: 19px; height: 19px; }
.menu-gon .ds a:hover, .menu-gon .ds button:hover { background: var(--bg-soft); color: var(--ink); }
.menu-gon .chi-man-hep { display: none !important; }
.menu-gon .ke { height: 1px; background: var(--line); margin: 6px 4px; }
/* 1340px: dưới mức này 7 mục chữ + 4 nút không còn vừa một hàng (đo thật,
tràn ngang ở 1280). */
@media (max-width: 1420px) { .menu-chinh { display: none; } .menu-gon { display: block; } }
@media (max-width: 640px) {
.thanh-tren .wrap { height: 68px; }
.brand img { height: 38px; }
.hanh-dong > .nut-tron, .hanh-dong > .gach-dung, .hanh-dong > .btn-ghost, .hanh-dong > .btn-vien { display: none; }
.hanh-dong > .btn-primary { min-height: 42px !important; padding: 0 1em !important; font-size: 0.92rem; }
.hanh-dong > .btn-primary svg { display: none; }
.menu-gon .chi-man-hep { display: flex !important; }
.menu-gon .ke.chi-man-hep { display: block !important; }
}
@media (max-width: 400px) { .brand img { height: 32px; } .hanh-dong > .btn-primary { padding: 0 .85em; font-size: .86rem; } }
@media (max-width: 360px) { .hanh-dong > .btn-primary { display: none; } }
/* ---------- lá nền cả trang (giữ từ 15/10) ---------- */
body::before {
content: ""; position: fixed; z-index: -1; pointer-events: none;
right: -12vw; top: 6vh; width: min(80vw, 1000px); aspect-ratio: 643 / 700;
background: url(/la-nen.webp) no-repeat center / contain;
opacity: .16; filter: saturate(1.3) brightness(1.75);
/* Lật ngang: lá trái trong ảnh gốc bị cắt thẳng ở mép ảnh. */
transform: scaleX(-1);
}
@media (max-width: 760px) { body::before { width: 130vw; right: -55vw; top: 18vh; opacity: .1; } }
:root[data-theme="dark"] body::before { opacity: .16; filter: saturate(1.2) brightness(1.15); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { opacity: .16; filter: saturate(1.2) brightness(1.15); } }
/* ---------- phần mở đầu ---------- */
.hero {
padding: clamp(32px, 5vw, 64px) 0 clamp(70px, 8vw, 110px); overflow: hidden;
background:
radial-gradient(48% 60% at 78% 40%, rgba(66,184,107,.14), transparent 70%),
linear-gradient(180deg, color-mix(in srgb, var(--hero-bg) 85%, transparent), color-mix(in srgb, var(--bg) 70%, transparent));
}
/* Lá cắt từ ảnh màn đăng nhập (assets/anh_dang_nhap.jpg) để hai màn cùng
một nhận diện. Ảnh nền trắng nên dùng multiply cho trắng biến mất;
nền tối không dùng được multiply nên giấu đi. */
.hero-la { position: absolute; pointer-events: none; user-select: none; mix-blend-mode: multiply; }
:root[data-theme="dark"] .hero-la { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-la { display: none; } }
:root[data-theme="dark"] .hero {
background:
radial-gradient(55% 75% at 78% 38%, rgba(46,180,100,.30), transparent 70%),
radial-gradient(45% 55% at 5% 0%, rgba(46,180,100,.14), transparent 70%);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .hero {
background:
radial-gradient(55% 75% at 78% 38%, rgba(46,180,100,.30), transparent 70%),
radial-gradient(45% 55% at 5% 0%, rgba(46,180,100,.14), transparent 70%);
}
}
/* Đợt 13: khung mở đầu nới ra 1440 và cột máy rộng hơn (~135% so với trước)
để chữ trong ảnh app đọc được ở cỡ mặc định. */
.hero .wrap.hero-luoi { max-width: 1440px; }
.hero-luoi { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.45fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (max-width: 1100px) { .hero-luoi { grid-template-columns: minmax(0, 1fr); } }
/* Cỡ chữ tiêu đề tính theo BỀ RỘNG CỘT CHỮ (container query, cqi) chứ không
theo màn hình: cụm "đơn giản, hiệu quả" không được xuống dòng trên máy
tính, nên phải luôn vừa cột - theo vw thì có khoảng màn tràn sang laptop.
Dòng đầu là dự phòng cho trình duyệt cũ chưa hiểu cqi. */
.hero-chu { container-type: inline-size; min-width: 0; }
.hero h1 { margin-top: 18px; font-size: clamp(2.1rem, 3.4vw, 3.3rem); font-size: clamp(2.1rem, 8.4cqi, 3.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }
.khong-ngat { white-space: nowrap; }
/* Máy tính: cụm nổi bật đứng riêng một dòng nên bỏ dấu phẩy sau nó (giống ảnh
thiết kế); điện thoại câu chạy liền nên hiện lại dấu phẩy. */
.phay { display: none; }
@media (max-width: 640px) { .phay { display: inline; } }
/* Cụm "đơn giản, hiệu quả": nền xanh dạng viên thuốc hơi nghiêng + vài nét
sáng ở góc. Trên điện thoại cụm có thể xuống dòng nên dùng
box-decoration-break để mỗi dòng có nền riêng, và bỏ nghiêng. */
.noi-bat { position: relative; display: inline-block; color: #fff; padding: 0.04em 0.5em 0.12em; margin: 0.1em 0.1em 0.1em 0.06em; z-index: 0; white-space: nowrap; }
.noi-bat::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0.5em;
background: linear-gradient(100deg, #1E9A53, #168447 70%);
transform: rotate(-2.2deg); box-shadow: 0 14px 30px -14px rgba(22,132,71,.8);
}
.noi-bat::after {
content: ""; position: absolute; right: -0.55em; top: -0.42em; width: 0.6em; height: 0.6em;
background:
linear-gradient(var(--brand-2), var(--brand-2)) 50% 0 / 0.07em 0.3em no-repeat,
linear-gradient(var(--brand-2), var(--brand-2)) 0 100% / 0.3em 0.07em no-repeat;
transform: rotate(18deg); border-radius: 2px;
}
@media (max-width: 640px) {
.khong-ngat { white-space: normal; }
.ngat-may { display: none; }
.noi-bat { display: inline; white-space: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; background: linear-gradient(100deg, #1E9A53, #168447 70%); border-radius: 0.35em; padding: 0.02em 0.34em 0.06em; margin: 0 0.06em 0 0; line-height: 1.5; }
.noi-bat::before, .noi-bat::after { display: none; }
}
.hero .mo-ta { margin-top: 22px; font-size: clamp(1.15rem, 1.6vw, 1.32rem); max-width: 31em; }
.hero .cta-hang { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.nen-tang { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.nen-tang-ico { display: flex; gap: 10px; color: var(--ink-soft); flex: 0 0 auto; padding-right: 16px; border-right: 1px solid var(--line); }
.nen-tang-ico svg { width: 26px; height: 26px; }
.nen-tang p { font-size: 1rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 480px) { .hero .cta-hang .btn { flex: 1 1 100%; } .nen-tang-ico svg { width: 22px; height: 22px; } }
/* ---------- laptop + điện thoại (15/10, làm lại cho mảnh và giống máy thật) ----------
Màn hình là ẢNH CHỤP APP THẬT (đơn mẫu). Không nghiêng 3D: trình duyệt
nội suy ảnh trong khung nghiêng làm nhoè chữ. Mọi kích thước viền, bo góc
tính theo bề rộng khung (cqi) nên máy to hay nhỏ đều đúng tỉ lệ. */
.thiet-bi { position: relative; padding: 0 8% 9% 0; isolation: isolate; }
.thiet-bi::after {
content: ""; position: absolute; z-index: -1; left: 4%; right: 6%; bottom: 3%; height: 9%;
background: radial-gradient(50% 50% at 50% 50%, rgba(10,40,24,.32), transparent 72%); filter: blur(8px);
}
.laptop { container-type: inline-size; }
.laptop-nap {
position: relative; padding: 2.1cqi 1.6cqi 1.4cqi; border-radius: 3.2cqi 3.2cqi 0.6cqi 0.6cqi;
background: #0D0F0E;
box-shadow: inset 0 0 0 0.18cqi #3A3E3C, inset 0 0 0 0.4cqi #161917, 0 30px 70px -30px rgba(8,40,22,.55);
}
/* camera */
.laptop-nap::before { content: ""; position: absolute; top: 0.85cqi; left: 50%; width: 0.62cqi; height: 0.62cqi; transform: translateX(-50%); border-radius: 50%; background: #262A28; box-shadow: inset 0 0 0 0.12cqi #10201A; }
.laptop-man { position: relative; overflow: hidden; border-radius: 0.5cqi; background: #F4F8F5; }
.laptop-man img { display: block; width: 100%; height: auto; aspect-ratio: 2160 / 1404; object-fit: cover; object-position: left top; }
/* vệt sáng mặt kính */
.laptop-man::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%); pointer-events: none; }
.laptop-de {
position: relative; height: 2.4cqi; margin: 0 -7.5%;
background: linear-gradient(180deg, #F2F4F5 0%, #D9DDDF 38%, #B9BEC1 78%, #9CA2A5 100%);
border-radius: 0.3cqi 0.3cqi 3.6cqi 3.6cqi / 0.3cqi 0.3cqi 2.4cqi 2.4cqi;
box-shadow: inset 0 0.12cqi 0 rgba(255,255,255,.9), inset 0 -0.1cqi 0 rgba(0,0,0,.18);
}
/* rãnh mở nắp */
.laptop-de::before { content: ""; position: absolute; top: 0; left: 50%; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 1.2cqi 1.2cqi; background: linear-gradient(180deg, #B8BDC0, #CED2D4); }
/* Điện thoại = .phone (vỏ ngoài: vị trí + bề rộng + container) > .phone-than
(viền, khung kim loại, nút cạnh) > .phone-man (màn hình). Mọi số cqi bên
trong tính theo bề rộng CHÍNH chiếc máy, nên dùng lại ở bất kỳ cỡ nào
(phần mở đầu, khối Giao diện sản phẩm) mà viền vẫn đúng tỉ lệ. */
.phone { position: absolute; right: 0; bottom: 0; width: 27%; container-type: inline-size; }
.phone-than {
position: relative; padding: 3.4cqi; border-radius: 17cqi; background: #0B0D0C;
box-shadow: inset 0 0 0 1.2cqi #2C302E, inset 0 0 0 1.9cqi #0B0D0C, 0 0 0 0.9cqi #C9CED0, 0 30px 60px -22px rgba(0,0,0,.5);
}
.phone-than::before, .phone-than::after { content: ""; position: absolute; width: 1.6cqi; border-radius: 1cqi; background: #B4B9BC; }
.phone-than::before { left: -2.2cqi; top: 22%; height: 9%; box-shadow: 0 13cqi 0 #B4B9BC; }
.phone-than::after { right: -2.2cqi; top: 28%; height: 14%; }
.phone-man { position: relative; overflow: hidden; border-radius: 13.5cqi; aspect-ratio: 1170 / 2532; background: #15813D; display: flex; flex-direction: column; }
/* thanh trạng thái + "đảo động" - ảnh chụp app không có nên vẽ thêm, cùng
màu thanh tiêu đề app (đo từ ảnh: #15813D -> #3B8187). */
.phone-tt { flex: 0 0 auto; height: 11cqi; display: flex; align-items: center; justify-content: space-between; padding: 1.4cqi 7cqi 0; background: linear-gradient(90deg, #15813D, #1D9740 26%, #399E7F 52%, #3B8187); color: #fff; font: 600 5.6cqi/1 system-ui, sans-serif; }
.phone-tt i { display: flex; gap: 1.6cqi; align-items: center; font-style: normal; }
.phone-tt i b { display: block; width: 4.6cqi; height: 3cqi; border-radius: 0.6cqi; background: currentColor; opacity: .95; }
.phone-tt i b:first-child { width: 5.4cqi; clip-path: polygon(0 100%, 100% 0, 100% 100%); border-radius: 0; }
.phone-tt i b:last-child { width: 7.4cqi; border-radius: 1cqi; box-shadow: inset 0 0 0 0.6cqi #2E8F60; }
.phone-dao { position: absolute; top: 2.6cqi; left: 50%; transform: translateX(-50%); width: 30cqi; height: 8.6cqi; border-radius: 6cqi; background: #050605; z-index: 1; }
.phone-man img { display: block; width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top center; }
/* width:100% BẮT BUỘC: khung có container-type nên không tự co theo nội dung
được - để margin auto mà thiếu width là cả cụm máy co về 0 (đã mắc 15/10). */
@media (max-width: 1100px) { .thiet-bi { width: 100%; max-width: 760px; margin: 8px auto 0; } }
/* Ảnh cắt màn hình app, không khung thiết bị (đợt 14). */
.anh-cat { position: relative; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line);
box-shadow: 0 1px 2px rgba(10,40,24,.06), 0 24px 60px -24px rgba(10,60,32,.35), 0 0 0 6px color-mix(in srgb, var(--brand-soft) 55%, transparent); }
.anh-cat img { display: block; width: 100%; height: auto; }
/* Phần mở đầu (đợt 18): ảnh slogan người dùng gửi, ĐÃ TÁCH NỀN
(cong_cu/tach_nen_slogan.mjs), bản sáng + bản tối. Ảnh ngang 2:1. */
.anh-dau-trang { width: 108%; max-width: 900px; justify-self: center; margin-right: -4%; }
.adt-chu { display: block; width: 100%; height: auto; }
.anh-dau-trang .chi-toi { display: none; }
:root[data-theme="dark"] .anh-dau-trang .chi-sang { display: none; }
:root[data-theme="dark"] .anh-dau-trang .chi-toi { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .anh-dau-trang .chi-sang { display: none; }
:root:not([data-theme="light"]) .anh-dau-trang .chi-toi { display: block; }
}
@media (max-width: 1100px) { .anh-dau-trang { width: 100%; max-width: 640px; margin: 8px auto 0; } }
@media (max-width: 640px) { .thiet-bi { padding: 0 10% 11% 0; } .phone { width: 27%; } }
/* ---------- dải 4 cam kết, đè nhẹ lên mép dưới phần mở đầu ---------- */
.cam-ket { padding: 0; margin-top: clamp(-70px, -5vw, -40px); z-index: 2; }
.cam-ket-ds {
list-style: none; margin: 0 auto; padding: 22px clamp(16px, 2vw, 28px);
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.cam-ket-ds li { display: flex; align-items: center; gap: 16px; padding: 6px clamp(10px, 1.6vw, 26px); }
.cam-ket-ds li + li { border-left: 1px solid var(--line); }
.cam-ket-ds b { display: block; font-size: 1.04rem; font-weight: 600; color: var(--ink); }
/* Chỉ chữ phụ - KHÔNG viết ".cam-ket-ds span": ô icon cũng là , bị ép
display:block là icon dạt lên góc trên (lỗi người dùng báo 15/10). */
.cam-ket-ds div > span { display: block; font-size: 1.02rem; color: var(--muted); }
.o-icon { width: 56px; height: 56px; flex: 0 0 auto; border-radius: var(--r-md); background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.o-icon svg { width: 28px; height: 28px; }
@media (max-width: 1000px) {
.cam-ket-ds { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
.cam-ket-ds li:nth-child(3) { border-left: 0; }
}
@media (max-width: 520px) {
.cam-ket-ds { grid-template-columns: minmax(0, 1fr); padding: 14px; }
.cam-ket-ds li + li { border-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.o-icon { width: 48px; height: 48px; } .o-icon svg { width: 24px; height: 24px; }
}
/* ---------- đầu mỗi khối ---------- */
.sec-head { max-width: 42em; }
.sec-head-rong { max-width: none; }
.sec-head p { margin-top: 14px; font-size: 1.16rem; }
.band-soft { background: color-mix(in srgb, var(--bg-soft) 82%, transparent); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* ---------- "Mọi công đoạn, trong tầm kiểm soát": chữ trái, 3 thẻ phải ---------- */
.noi-bat-luoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 1000px) { .noi-bat-luoi { grid-template-columns: minmax(0, 1fr); } }
.noi-bat-luoi h2 { margin-top: 16px; font-size: clamp(1.8rem, 2.7vw, 2.5rem); }
.noi-bat-luoi .sec-head p { font-size: 1.14rem; }
.ba-the { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .ba-the { grid-template-columns: minmax(0, 1fr); } }
/* Thẻ dùng chung: bo 22px, viền mảnh, bóng nhẹ, nhấc lên 3px khi rê chuột (effects.css). */
.the {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px;
box-shadow: var(--shadow-card); color: inherit; text-decoration: none;
transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.the:hover { transform: translateY(-3px); box-shadow: var(--shadow-float); border-color: var(--line-strong); }
@media (prefers-reduced-motion: reduce) { .the:hover { transform: none; } }
.the h3 { margin-top: 16px; }
.the p { margin-top: 8px; font-size: 1.03rem; }
/* ---------- khối "Chuẩn hoá dữ liệu" ---------- */
.chuan-hoa-luoi { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (max-width: 900px) { .chuan-hoa-luoi { grid-template-columns: minmax(0, 1fr); } }
#chuan-hoa h2 { font-size: clamp(1.8rem, 2.7vw, 2.5rem); }
.luoi-diem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .luoi-diem { grid-template-columns: minmax(0, 1fr); } }
.the-diem {
display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.the-diem .o-icon { width: 48px; height: 48px; border-radius: 14px; }
.the-diem .o-icon svg { width: 24px; height: 24px; }
.the-diem h3 { font-size: 1.02rem; margin-top: 2px; }
.the-diem p { margin-top: 6px; font-size: 1.03rem; }
.diem { list-style: none; margin: 0; padding: 8px 24px; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.diem li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; }
.diem li + li { border-top: 1px solid var(--line); }
.diem svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 5px; color: var(--brand); }
.diem p { font-size: 1.07rem; }
.diem b { color: var(--brand-deep); font-weight: 600; }
/* ---------- "Theo dõi đơn hàng": lưới 7 thẻ ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 34px); }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px; }
.card h3 { margin-top: 2px; }
.card p { margin-top: 6px; }
.card-rong { grid-column: 1 / -1; grid-template-columns: 56px minmax(0, 1fr) 24px; align-items: center; }
.card-rong .mui-phai { width: 20px; height: 20px; color: var(--muted); }
@media (max-width: 520px) {
.card { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 16px; }
.card-rong { grid-template-columns: 48px minmax(0, 1fr) 20px; }
}
/* ---------- khối "Thiết lập" + khung video YouTube ---------- */
.video { position: relative; margin-top: clamp(24px, 3vw, 34px); max-width: 880px; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); background: var(--bg-soft); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ---------- lời mời cuối trang ---------- */
.cuoi-trang { padding-top: 0; }
.cuoi-the {
position: relative; overflow: hidden; border-radius: 28px; padding: clamp(32px, 5vw, 56px);
/* đợt 27: xanh NHẠT cho hợp tông trang (trước là xanh rừng đậm, nổi lệch cả trang) */
background: linear-gradient(120deg, #EAF7EE 0%, #DDF2E4 55%, #CDEBD7 100%); color: var(--ink);
border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
box-shadow: 0 24px 60px -36px rgba(10,60,32,.35);
display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px; align-items: center;
}
.cuoi-the::after {
content: ""; position: absolute; right: -60px; top: -80px; width: 420px; aspect-ratio: 643 / 700;
background: url(/la-nen.webp) no-repeat center / contain; opacity: .35; mix-blend-mode: multiply;
transform: scaleX(-1) rotate(-10deg); pointer-events: none;
}
.cuoi-the > * { position: relative; z-index: 1; }
.cuoi-the h2 { color: var(--ink); }
.cuoi-the p { color: var(--ink-soft); margin-top: 12px; max-width: 36em; font-size: 1.16rem; }
.cuoi-the .cta-hang { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 820px) { .cuoi-the { grid-template-columns: minmax(0, 1fr); } .cuoi-the::after { opacity: .16; } }
@media (max-width: 480px) { .cuoi-the .cta-hang .btn { flex: 1 1 100%; } }
/* ---------- chân trang ---------- */
/* ---------- chân trang (đợt 26, theo mẫu người dùng gửi) ----------
Ảnh nền nen-chan-trang.webp (sóng xanh + lá góc phải). Logo + 2 dòng giới thiệu | 3 cột
có gạch xanh ở tiêu đề | dòng bản quyền + pháp lý. */
footer.chan-trang {
padding: clamp(64px, 7vw, 110px) 0 30px;
background: #F7FCF8 url(/nen-chan-trang.webp) no-repeat right bottom / cover;
}
.foot { display: grid; grid-template-columns: minmax(max-content, 2.6fr) repeat(3, minmax(0, .75fr)); gap: clamp(24px, 4vw, 64px); align-items: start; }
.foot-trai img { height: 104px; width: auto; }
.foot-trai p { margin-top: 6px; font-size: 1.06rem; }
/* một dòng (người dùng yêu cầu): màn hẹp thu cỡ chữ theo bề rộng thay vì xuống dòng */
.foot-trai .foot-tagline { margin-top: 14px; font-size: min(1.12rem, 3.15vw); font-weight: 700; color: var(--ink); white-space: nowrap; }
.foot-cot { display: flex; flex-direction: column; gap: 14px; }
.foot-cot h2 { margin: 0 0 6px; padding-left: 14px; border-left: 4px solid var(--brand); font-size: 1.22rem; font-weight: 800; line-height: 1.2; color: var(--brand-deep); }
.foot-cot a { padding-left: 18px; text-decoration: none; color: var(--ink-soft); font-size: 1.06rem; }
.foot-cot a:hover { color: var(--brand-deep); }
.foot-ket-noi a { display: flex; align-items: center; gap: 14px; padding-left: 4px; color: var(--ink); }
.foot-ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.foot-ico svg { width: 22px; height: 22px; }
.foot-duoi { margin-top: clamp(40px, 5vw, 72px); padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.copy { font-size: .98rem; color: var(--ink-soft); }
.nguoi-ban { flex-basis: 100%; margin: 0; font-size: .88rem; line-height: 1.6; color: var(--ink-soft); }
.foot-legal { display: flex; align-items: center; gap: 0; font-size: .98rem; }
.foot-legal a { color: var(--ink-soft); text-decoration: none; padding: 0 18px; border-left: 1px solid var(--line); }
.foot-legal a:hover { color: var(--brand-deep); }
@media (max-width: 900px) {
.foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot-trai { grid-column: 1 / -1; }
}
@media (max-width: 640px), (pointer: coarse) { .foot-cot a, .foot-legal a { display: inline-flex; align-items: center; min-height: 48px; } .foot-cot { gap: 2px; } .foot-ket-noi a { display: flex; } }
@media (max-width: 640px) { footer.chan-trang { padding-bottom: 120px; background-size: 240% auto; background-position: 92% bottom; } .foot-legal a:first-child { padding-left: 0; border-left: 0; } }
/* ---------- chuyển động: chỉ hiện dần, không trượt ---------- */
.reveal { opacity: 0; transition: opacity .5s ease; }
.reveal.is-visible { opacity: 1; }
.d1 { transition-delay: .06s; } .d2 { transition-delay: .12s; } .d3 { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .reveal, .d1, .d2, .d3 { opacity: 1; transition: none; } }
/* ---------- hộp tìm kiếm (tim-kiem trong trang-chung.js) ---------- */
dialog.tim-kiem {
width: min(640px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 80px)); margin: 10vh auto auto; padding: 0;
border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); color: var(--ink);
box-shadow: var(--shadow-float); overflow: hidden;
}
dialog.tim-kiem::backdrop { background: rgba(8,24,16,.45); backdrop-filter: blur(3px); }
.tim-kiem form { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.tim-kiem form svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.tim-kiem input::-webkit-search-cancel-button { display: none; }
.tim-kiem input { flex: 1; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 1.05rem; }
.tim-kiem .dong-lai { width: 40px; height: 40px; }
.tim-kiem ul { list-style: none; margin: 0; padding: 8px; overflow-y: auto; max-height: calc(min(560px, calc(100vh - 80px)) - 120px); }
.tim-kiem li a { display: block; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: inherit; }
.tim-kiem li a:hover, .tim-kiem li a.dang-chon { background: var(--brand-soft); }
.tim-kiem li b { display: block; font-weight: 600; }
.tim-kiem li span { display: block; margin-top: 2px; font-size: 0.88rem; color: var(--muted); }
.tim-kiem .goi-y { padding: 14px 18px 18px; font-size: 0.88rem; color: var(--muted); }
/* ---------- nút liên hệ nổi (góc phải dưới, mọi trang) ----------
Màu riêng của Zalo / Facebook (dải chuyển nhẹ + viền sáng), vòng sóng
lan ra chậm để gây chú ý mà không chói; rê chuột thì hiện nhãn bên trái.
Người tắt chuyển động trong máy thì không có vòng sóng. */
/* Đợt 19: nút là ẢNH người dùng gửi (nut-zalo.webp / nut-facebook.webp, tách nền
trắng, có sẵn quầng sáng nên khung lớn hơn hình tròn ~1/3). Khung 120px (đợt 20,
nhỏ lại từ 150) và lùi vào trong, không sát góc. Vòng sóng nằm đúng hình tròn (inset 14%). */
.lien-he-noi {
position: fixed; z-index: 40; display: flex; flex-direction: column; gap: 0;
right: max(36px, env(safe-area-inset-right)); bottom: max(36px, env(safe-area-inset-bottom));
}
.nut-noi {
position: relative; width: 120px; height: 120px; display: grid; place-items: center;
text-decoration: none; isolation: isolate; margin: -11px;
transition: transform .2s var(--ease), filter .2s var(--ease);
}
.nut-noi img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nut-noi::before, .nut-noi::after {
content: ""; position: absolute; inset: 14%; border-radius: 50%; z-index: -1;
background: rgba(34,170,90,.35); animation: song-lan 2.6s var(--ease) infinite;
}
.nut-noi::after { animation-delay: 1.3s; }
.nut-noi:hover { transform: translateY(-3px) scale(1.04); filter: brightness(1.05); }
@media (max-width: 640px) {
.lien-he-noi { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
.nut-noi { width: 70px; height: 70px; margin: -6px; }
}
.nut-noi .nhan-noi {
position: absolute; right: calc(86% + 4px); top: 50%; transform: translateY(-50%) translateX(6px);
background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-pill);
padding: 7px 14px; font-size: 0.86rem; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-card);
opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s var(--ease);
}
.nut-noi:hover .nhan-noi, .nut-noi:focus-visible .nhan-noi { opacity: 1; transform: translateY(-50%) translateX(0); }
@keyframes song-lan { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nut-noi::before, .nut-noi::after { animation: none; opacity: 0; } .nut-noi:hover { transform: none; } }
@media (hover: none) { .nut-noi .nhan-noi { display: none; } }
/* ---------- trang phụ (gioi-thieu.html, tinh-nang.html...) ---------- */
.trang-phu { min-height: 52vh; }
.trang-phu h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.trang-phu .noi-dung { margin-top: 18px; max-width: 46em; }
.trang-phu .noi-dung p + p { margin-top: 12px; }
.lien-he-ds { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.lien-he-ds a {
display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 0 18px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; font-weight: 600;
}
.lien-he-ds a:hover { border-color: var(--brand); }
.lien-he-ds span { color: var(--ink-soft); font-weight: 400; }
/* .reveal chỉ khai transition cho opacity - thẻ vừa .the vừa .reveal phải
khai lại đủ, không thì mất hiệu ứng nhấc lên khi rê chuột. */
.the.reveal { transition: opacity .5s ease, transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease); }
/* ---------- khối "Giao diện sản phẩm": 3 hàng so le, ảnh chồng chéo ----------
Ảnh là ảnh chụp app thật (dữ liệu mẫu), KHÔNG xoay nghiêng: xoay làm nhoè chữ.
Hiệu ứng: khi cuộn tới, từng lớp trượt vào theo đường chéo (--dx/--dy) rồi
về đúng chỗ; thẻ nổi trôi nhẹ lên xuống. Máy tắt chuyển động thì đứng yên. */
.sec-giua { margin: 0 auto; text-align: center; }
.sec-giua p { margin-left: auto; margin-right: auto; max-width: 36em; }
.cham-xanh { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.sp-luoi { display: grid; gap: clamp(64px, 8vw, 112px); margin-top: clamp(40px, 5vw, 64px); }
/* Đợt 13: khối Giao diện nới ra 1440, cột ảnh 1.38fr - ảnh to ~140% so với trước. */
#giao-dien > .wrap { max-width: 1440px; }
/* ảnh chưa hiện đang lệch sang phải 40px (hiệu ứng trượt vào) làm trang
cuộn ngang trên điện thoại - cắt phần thừa ở khung khối. */
#giao-dien { overflow-x: clip; }
.sp-hang { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.sp-hang.dao { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.sp-hang.dao .sp-chu { order: 2; }
@media (max-width: 900px) {
.sp-hang, .sp-hang.dao { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.sp-hang.dao .sp-chu { order: 0; }
}
.sp-so { display: inline-block; font-size: 1.15rem; font-weight: 700; color: var(--brand); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sp-chu h3 { margin-top: 10px; font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; line-height: 1.25; letter-spacing: -.03em; }
.sp-chu h3 .noi-bat::before { transform: rotate(-1.6deg); }
.sp-chu p { margin-top: 14px; font-size: 1.13rem; }
.sp-y { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.sp-y li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-soft); font-size: 1.07rem; }
.sp-y svg { width: 20px; height: 20px; flex: 0 0 auto; padding: 3px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); margin-top: 1px; }
.sp-cuoi { margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.lien-ket-xanh { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 700; color: var(--brand-deep); text-decoration: none; }
.lien-ket-xanh svg { width: 20px; height: 20px; transition: transform .2s var(--ease); }
.lien-ket-xanh:hover svg { transform: translateX(4px); }
/* Nút "Trải nghiệm TNChee" cuối mục Giao diện: nút đặc gradient lá + quầng
sáng thở + vệt sáng lướt qua (đợt 12, yêu cầu "nút bấm sống động"). */
.nut-song {
position: relative; isolation: isolate; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: clamp(76px, 7vw, 100px); min-width: min(600px, 100%); padding: 0 clamp(32px, 5vw, 72px);
border-radius: 999px; font-weight: 800; font-size: clamp(1.35rem, 2.4vw, 2rem); color: #fff; text-decoration: none; letter-spacing: .005em;
background: linear-gradient(135deg, #2BC064 0%, #168447 55%, #0E6E3A 100%);
box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 14px 32px -12px rgba(22,132,71,.85), 0 0 0 0 rgba(66,184,107,.45);
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
animation: nut-song-tho 2.6s ease-in-out infinite, nut-song-lac 4s ease-in-out 1.5s infinite;
}
.nut-song::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
transform: translateX(-120%); animation: nut-song-luot 3.2s var(--ease) infinite;
}
.nut-song svg { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); }
.nut-song:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset, 0 20px 40px -14px rgba(22,132,71,.95), 0 0 0 6px rgba(66,184,107,.18); }
.nut-song:hover svg { transform: translateX(4px); }
.nut-song:active { transform: translateY(0) scale(.98); }
@keyframes nut-song-tho {
0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 14px 32px -12px rgba(22,132,71,.85), 0 0 0 0 rgba(66,184,107,.45); }
50% { box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 14px 32px -12px rgba(22,132,71,.85), 0 0 0 12px rgba(66,184,107,0); }
}
/* rung lắc ngắn rồi nghỉ, cứ 4 giây một lần; di chuột vào thì thôi lắc, nổi lên */
@keyframes nut-song-lac {
0%, 14%, 100% { transform: rotate(0) scale(1); }
2% { transform: rotate(-4deg) scale(1.05); } 4% { transform: rotate(4deg) scale(1.05); }
6% { transform: rotate(-3deg) scale(1.05); } 8% { transform: rotate(3deg) scale(1.04); }
10% { transform: rotate(-1.5deg) scale(1.02); } 12% { transform: rotate(1deg) scale(1.01); }
}
.nut-song:hover, .nut-song:focus-visible { animation: none; }
@keyframes nut-song-luot { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
.nut-song, .nut-song::after { animation: none; }
.nut-song::after { display: none; }
.nut-song:hover { transform: none; }
}
.sp-anh { position: relative; container-type: inline-size; isolation: isolate; }
/* Đợt 19: mỗi hàng là MỘT ảnh mockup người dùng gửi (đã xoá nền caro vẽ giả). */
.sp-mockup img { display: block; width: 100%; height: auto; }
/* Ảnh có nền xanh nhạt vẽ sẵn (đợt 24, ảnh tin nhắn): mờ dần 4 mép để hoà vào nền khối, không lộ khung chữ nhật. */
.sp-mockup img.anh-mo-vien {
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
mask-composite: intersect; }
/* 04, 05 (đợt 22): laptop đã tách khỏi ảnh chụp có cảnh nền (cong_cu/tach_nen_laptop.mjs),
bóng dưới đế bỏ khi tách nên vẽ lại bằng drop-shadow. */
.sp-mockup img[src^="/sp-bao-cao"], .sp-mockup img[src^="/sp-cong-viec"] { filter: drop-shadow(0 22px 26px rgba(10,50,28,.22)); }
.sp-anh::before {
content: ""; position: absolute; z-index: -1; inset: 6% 4% 0 8%; border-radius: 40px;
background: radial-gradient(60% 60% at 55% 45%, rgba(66,184,107,.22), transparent 72%);
filter: blur(6px);
}
.trinh-duyet { position: relative; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-float); }
.trinh-duyet-thanh { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.trinh-duyet-thanh i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; flex: 0 0 auto; }
.trinh-duyet-thanh i:nth-child(2) { background: #FEBC2E; } .trinh-duyet-thanh i:nth-child(3) { background: #28C840; }
.trinh-duyet .url { display: flex; align-items: center; gap: 6px; margin-left: 12px; height: 22px; padding: 0 12px; flex: 0 1 46%; border-radius: 7px; background: var(--card); border: 1px solid var(--line); font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; }
.trinh-duyet .url svg { width: 11px; height: 11px; flex: 0 0 auto; }
.trinh-duyet img { display: block; width: 100%; height: auto; }
/* Hàng 1 (bảng) và hàng 3 (thông báo): trình duyệt + điện thoại chồng mép */
/* Đợt 14: hàng 1 chỉ còn ảnh cắt (không khung). Hàng 3: khung trình duyệt
ôm sát popup thông báo (ảnh đã cắt) + điện thoại bên phải. */
.sp-anh-tb { padding: 0 0 6%; }
.sp-anh-tb .trinh-duyet { width: 60%; margin-left: 2%; }
.sp-phone-phai { right: 0; bottom: 0; width: 38%; }
/* Hàng 2 (nhắn tin): hai điện thoại so le theo đường chéo */
.sp-anh-chat { aspect-ratio: 1 / 1.08; }
.sp-phone-a { left: 4%; top: 0; bottom: auto; width: 44%; }
.sp-phone-b { left: 52%; top: 12%; bottom: auto; width: 44%; }
/* Thẻ nổi bằng HTML (chữ luôn nét) */
.the-noi {
position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; max-width: min(320px, 70%);
padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
box-shadow: var(--shadow-float); font-size: .82rem; line-height: 1.35;
animation: troi 5s ease-in-out infinite;
}
.the-noi b { display: block; font-weight: 600; color: var(--ink); }
.the-noi small { display: block; color: var(--muted); font-size: .76rem; }
.the-noi em { margin-left: 4px; font-style: normal; font-size: .72rem; font-weight: 700; color: #fff; background: #D9482B; min-width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; padding: 0 6px; }
.the-noi-ico { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.the-noi-ico svg { width: 17px; height: 17px; }
.the-noi-ico.do { background: #FCE9E7; color: #C2352A; }
.the-noi-ico.avatar { background: linear-gradient(145deg, #22A55A, #13773B); color: #fff; font-weight: 700; font-size: .95rem; }
.noi-bang { left: -3%; top: -6%; }
.noi-chat { left: 0; bottom: 6%; animation-delay: -1.6s; }
.noi-tb { right: 2%; top: -2%; animation-delay: -3s; }
@keyframes troi { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
/* Điện thoại: ảnh đã nhỏ, thẻ nổi che mất màn hình app nên giấu đi. */
@media (max-width: 600px) { .the-noi { display: none; } }
/* Trượt vào theo đường chéo khi cuộn tới */
.sp-anh.reveal > * { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 28px)); transition: opacity .8s ease var(--tre, 0s), transform .9s var(--ease) var(--tre, 0s); }
.sp-anh.reveal.is-visible > * { opacity: 1; transform: none; }
.sp-anh > .trinh-duyet, .sp-anh > .anh-cat { --dx: 40px; --dy: 24px; }
.sp-anh-tb > .trinh-duyet { --dx: -40px; }
.sp-anh > .phone { --dx: -30px; --dy: 50px; --tre: .15s; }
.sp-anh-tb > .phone { --dx: 30px; }
.sp-phone-a { --dx: -30px !important; --dy: -30px !important; }
.sp-phone-b { --dx: 30px !important; --dy: 40px !important; --tre: .15s !important; }
.sp-anh > .the-noi { --dy: 16px; --tre: .35s; }
.sp-anh.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.sp-anh.reveal > * { opacity: 1; transform: none; transition: none; }
.the-noi { animation: none; }
}
/* ---------- trang phụ Giới thiệu / Tính năng / Ưu điểm (đợt 28) ----------
Không dùng .reveal ở trang phụ: script hiện dần chỉ có trong index.html. */
.trang-phu .tp-mo { padding: clamp(40px, 6vw, 80px) 0 clamp(16px, 2vw, 24px); }
.trang-phu .tp-mo h1 { font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; max-width: 18em; }
.tp-mo-ta { margin-top: 20px; font-size: clamp(1.1rem, 1.5vw, 1.28rem); max-width: 44em; }
.tp-khoi { padding: clamp(40px, 5vw, 72px) 0; }
.tp-hai-cot { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .tp-hai-cot { grid-template-columns: minmax(0, 1fr); } }
.tp-van p { font-size: 1.14rem; } .tp-van p + p { margin-top: 14px; color: var(--ink); font-weight: 600; }
.tp-nganh-luoi { margin-top: clamp(24px, 3vw, 34px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .tp-nganh-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tp-nganh-luoi { grid-template-columns: minmax(0, 1fr); } }
.tp-nganh { padding: 22px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.tp-nganh h3 { font-size: 1.15rem; font-weight: 700; }
.tp-nganh ol { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tp-nganh li { padding: 5px 12px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-size: .95rem; font-weight: 500; }
.tp-nganh-ban { border-style: dashed; border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: transparent; box-shadow: none; }
.tp-nganh-ban p { margin-top: 12px; font-size: 1.02rem; }
.tp-buoc-ds { list-style: none; margin: clamp(24px, 3vw, 34px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .tp-buoc-ds { grid-template-columns: minmax(0, 1fr); } }
.tp-buoc { display: flex; gap: 16px; align-items: flex-start; }
.tp-buoc-so { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #1FA458, #0E6E3A); color: #fff; font-weight: 800; font-size: 1.2rem; }
.tp-buoc h3 { font-size: 1.15rem; font-weight: 700; } .tp-buoc p { margin-top: 6px; font-size: 1.05rem; }
.tp-so-sanh-khung { margin-top: clamp(24px, 3vw, 34px); overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-card); }
.tp-so-sanh { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.tp-so-sanh th, .tp-so-sanh td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tp-so-sanh tr:last-child th, .tp-so-sanh tr:last-child td { border-bottom: 0; }
.tp-so-sanh thead th { background: var(--bg-soft); font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
.tp-so-sanh thead th:last-child { color: var(--brand-deep); }
.tp-so-sanh tbody th { font-weight: 700; color: var(--ink); width: 26%; }
.tp-so-sanh td { color: var(--ink-soft); }
.tp-so-sanh td:last-child { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }
@media (max-width: 640px) {
.tp-so-sanh thead { display: none; }
.tp-so-sanh tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.tp-so-sanh th, .tp-so-sanh td { display: block; padding: 2px 0; border: 0; width: auto !important; background: none !important; }
.tp-so-sanh td:first-of-type::before { content: "Cách cũ: "; color: var(--muted); }
.tp-so-sanh td:last-child::before { content: "TNChee: "; color: var(--brand-deep); }
}
.tp-tiep-hang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .tp-tiep-hang { grid-template-columns: minmax(0, 1fr); } }
.tp-tiep { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 22px 26px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--card); text-decoration: none; box-shadow: var(--shadow-card); transition: transform .2s var(--ease), border-color .2s ease; }
.tp-tiep span { grid-column: 1; color: var(--muted); font-size: .95rem; }
.tp-tiep b { grid-column: 1; color: var(--ink); font-size: 1.2rem; }
.tp-tiep svg { grid-column: 2; grid-row: 1 / span 2; width: 26px; height: 26px; color: var(--brand); transition: transform .2s var(--ease); }
.tp-tiep:hover { transform: translateY(-2px); border-color: var(--brand); }
.tp-tiep:hover svg { transform: translateX(4px); }
.trang-phu .cuoi-trang { padding-top: clamp(16px, 3vw, 32px); padding-bottom: clamp(48px, 6vw, 80px); }
/* ---------- trang Chi phí (đợt 29) ---------- */
.cp-khoi { padding-top: clamp(8px, 2vw, 20px); }
.cp-luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; }
@media (max-width: 800px) { .cp-luoi { grid-template-columns: minmax(0, 1fr); } }
.cp-goi { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 3vw, 36px); border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.cp-pro { border: 2px solid var(--brand); background: linear-gradient(160deg, #F4FBF6 0%, #FFFFFF 55%); box-shadow: 0 30px 60px -34px rgba(10,80,40,.45); }
.cp-nhan { position: absolute; top: -14px; right: 24px; padding: 5px 14px; border-radius: 999px; background: linear-gradient(135deg, #1FA458, #0E6E3A); color: #fff; font-size: .85rem; font-weight: 700; }
.cp-goi h2 { font-size: 1.6rem; font-weight: 800; }
.cp-phu { margin-top: 4px; color: var(--muted); }
.cp-gia { margin-top: 20px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.cp-gia b { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.cp-gia span { color: var(--ink-soft); font-size: 1.05rem; }
.cp-gia-hai .cp-gia + .cp-gia { margin-top: 6px; }
.cp-gia-nam b { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.cp-gia em { font-style: normal; font-size: .85rem; font-weight: 700; color: var(--brand-deep); background: var(--brand-soft); padding: 3px 10px; border-radius: 999px; }
.cp-ds { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 12px; }
.cp-ds li { display: flex; gap: 10px; align-items: flex-start; font-size: 1.05rem; color: var(--ink-soft); }
.cp-ds svg, .cp-co svg { width: 20px; height: 20px; flex: 0 0 auto; padding: 3px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.cp-ds svg { margin-top: 2px; }
.cp-nut { margin-top: auto; width: 100%; }
.cp-ghi { margin-top: 10px; font-size: .92rem; color: var(--muted); text-align: center; }
.cp-bang td:last-child { background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }
.cp-co svg { display: inline-block; vertical-align: middle; }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 640px) {
.cp-bang td:first-of-type::before { content: "TNChee: "; color: var(--muted); }
.cp-bang td:last-child::before { content: "Pro: "; color: var(--brand-deep); }
}
/* ---------- Bấm ảnh để xem rõ (27/10, người dùng duyệt mẫu). Chữ trong ảnh mockup nhỏ vì ảnh bị THU nhiều lần (xem CONTEXT.md "Landing"); bố cục giữ nguyên, bấm ảnh mới mở to ---------- */
.sp-mockup img { cursor: zoom-in; }
.goi-y-phong-to {
position: absolute; right: 2%; top: 0; z-index: 2;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 9px; border-radius: 999px;
font-size: 11.5px; font-weight: 600; line-height: 1; color: #fff;
background: rgba(17, 61, 41, .78); backdrop-filter: blur(6px);
box-shadow: 0 4px 14px rgba(17, 61, 41, .22);
pointer-events: none; opacity: .92; transition: opacity .2s;
}
.goi-y-phong-to svg { width: 14px; height: 14px; }
@media (hover: hover) {
.goi-y-phong-to { opacity: 0; }
.sp-mockup:hover .goi-y-phong-to { opacity: .95; }
}
.hop-phong-to {
position: fixed; inset: 0; z-index: 1000;
background: rgba(8, 26, 18, .9);
overflow: auto; overscroll-behavior: contain;
display: grid; place-items: center;
opacity: 0; transition: opacity .2s;
}
.hop-phong-to.mo { opacity: 1; }
.hop-phong-to img {
display: block; margin: 56px 24px 24px;
width: min(var(--rong-goc), calc(100vw - 48px)); height: auto;
max-width: none; box-sizing: border-box; padding: 12px; border-radius: 14px; background: #F4F8F5; cursor: zoom-out;
}
/* Điện thoại: ảnh rộng hơn màn để chữ đủ to, kéo ngang để xem. */
@media (max-width: 760px) {
.hop-phong-to { place-items: start; }
.hop-phong-to img { width: max(calc(100vw - 32px), calc(var(--rong-goc) * .55)); margin: 64px 16px 24px; }
}
.nut-dong-phong-to {
position: fixed; top: 10px; right: 10px; z-index: 1001;
width: 44px; height: 44px; border-radius: 50%; border: 0;
display: grid; place-items: center; cursor: pointer;
background: rgba(255, 255, 255, .14); color: #fff;
}
.nut-dong-phong-to svg { width: 22px; height: 22px; }