/* =========================================================================
 * Star S Landing — SmartEyesPro · Cyber Dark
 * Màu theo DOC-THIET-KE-MAU-SAC.md. Mobile trước, không thư viện ngoài.
 * ========================================================================= */

@font-face { font-family: "BVP"; font-weight: 400; font-display: swap; src: url(../fonts/bvp-400-vi.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "BVP"; font-weight: 400; font-display: swap; src: url(../fonts/bvp-400-la.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "BVP"; font-weight: 600; font-display: swap; src: url(../fonts/bvp-600-vi.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "BVP"; font-weight: 600; font-display: swap; src: url(../fonts/bvp-600-la.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "BVP"; font-weight: 800; font-display: swap; src: url(../fonts/bvp-800-vi.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "BVP"; font-weight: 800; font-display: swap; src: url(../fonts/bvp-800-la.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JBM"; font-weight: 500; font-display: swap; src: url(../fonts/jbm-500-la.woff2) format("woff2"); }

:root {
	--xanh: #38A149;          /* Cyber Green — logo, CTA */
	--xanh-sang: #00E575;     /* Neon Mint — glow, trạng thái */
	--xanh-toi: #1f6b2b;
	--nen: #0A0E12;           /* Obsidian */
	--mat: #141A21;           /* Titanium */
	--mat-2: #1b232c;
	--vien: rgba(56, 161, 73, .22);
	--vien-xam: #1F2937;
	--chu: #FFFFFF;
	--chu-2: #94A3B8;
	--chu-3: #7C8BA1;         /* Muted — sáng hơn #64748B một chút để đạt tương phản 4.5:1 trên nền tối */
	--xanh-duong: #38bdf8;
	--hong-ngoai: #c084fc;
	--font: "BVP", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-ma: "JBM", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--bo: 16px;
	--bo-nho: 10px;
	--cao-dau: 68px;
	--khung: 1200px;
	--le: 16px;
	--bong-xanh: 0 0 25px rgba(56, 161, 73, .15);
	--de: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Nền tảng ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cao-dau) + 12px); overflow-x: clip; }
body { margin: 0; background: var(--nen); color: var(--chu-2); font: 400 16px/1.65 var(--font); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--xanh-sang); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--chu); line-height: 1.2; margin: 0; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--xanh-sang); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--xanh); color: #04110a; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ma { font-family: var(--font-ma); font-weight: 500; letter-spacing: .01em; }
.mo { color: var(--chu-3); }
.bo-qua { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--xanh); color: #04110a; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.bo-qua:focus { top: 12px; }

.khung { width: 100%; max-width: var(--khung); margin: 0 auto; padding: 0 var(--le); }
.khung--hep { max-width: 780px; }
@media (min-width: 768px) { :root { --le: 28px; } }

/* ---------- Nút ---------- */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap; text-decoration: none !important; transition: transform .2s var(--de), box-shadow .2s, background .2s, border-color .2s; }
.nut--chinh { background: var(--xanh); color: #04110a; box-shadow: 0 0 0 1px rgba(0, 229, 117, .35), 0 6px 24px rgba(56, 161, 73, .35); }
.nut--chinh:hover { background: #45b957; box-shadow: 0 0 0 1px var(--xanh-sang), 0 8px 34px rgba(0, 229, 117, .45); transform: translateY(-1px); }
.nut--vien { border-color: rgba(148, 163, 184, .35); color: var(--chu); background: rgba(20, 26, 33, .5); }
.nut--vien:hover { border-color: var(--xanh-sang); color: var(--xanh-sang); }
.nut--nho { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.nut--lon { min-height: 56px; width: 100%; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 12px; }
.lien-ket, .lien-ket-mui-ten { background: none; border: 0; padding: 0; min-height: 44px; color: var(--xanh-sang); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.lien-ket-mui-ten:hover .icon { transform: translateX(3px); }
.lien-ket-mui-ten .icon { transition: transform .2s; }

/* ---------- Header ---------- */
.dau-trang { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--cao-dau); background: rgba(10, 14, 18, .72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.dau-trang.da-cuon { border-bottom-color: var(--vien); background: rgba(10, 14, 18, .88); }
/* Thanh quản trị WordPress (chỉ khi đăng nhập): đẩy header + ngăn kéo xuống dưới thanh. Trên điện thoại WP để thanh cuộn theo trang → ghim lại cho khớp. */
.admin-bar { --cao-qt: 32px; }
.admin-bar .dau-trang { top: var(--cao-qt); }
.admin-bar .ngan-keo { top: calc(var(--cao-dau) + var(--cao-qt)); height: calc(100dvh - var(--cao-dau) - var(--cao-qt)); }
html:has(body.admin-bar) { scroll-padding-top: calc(var(--cao-dau) + 44px); }
@media (max-width: 782px) { .admin-bar { --cao-qt: 46px; } html:has(body.admin-bar) { scroll-padding-top: calc(var(--cao-dau) + 58px); } }
@media (max-width: 600px) { .admin-bar #wpadminbar { position: fixed; } }
.dau-trang__trong { height: 100%; display: flex; align-items: center; gap: 20px; }
.logo { flex: none; display: flex; align-items: center; min-height: 44px; }
.logo__anh { width: 160px; height: auto; }
.menu-chinh { display: none; margin-left: auto; }
.menu-chinh__ds { display: flex; gap: 2px; }
.menu-chinh__ds a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--chu-2); font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: color .2s, background .2s; }
.menu-chinh__ds a:hover, .menu-chinh__ds a.dang-xem { color: var(--chu); background: rgba(56, 161, 73, .12); }
.menu-chinh__ds a.dang-xem { color: var(--xanh-sang); }
.dau-trang__hanh-dong { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hotline-nhanh { display: none; align-items: center; gap: 6px; color: var(--chu); font-weight: 600; font-size: 14px; white-space: nowrap; }
.dau-trang__hanh-dong .nut { display: none; }
.nut-menu { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--vien-xam); background: var(--mat); display: grid; place-items: center; }
.nut-menu__vach, .nut-menu__vach::before, .nut-menu__vach::after { display: block; width: 18px; height: 2px; background: var(--chu); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nut-menu__vach { position: relative; }
.nut-menu__vach::before, .nut-menu__vach::after { content: ""; position: absolute; left: 0; }
.nut-menu__vach::before { top: -6px; }
.nut-menu__vach::after { top: 6px; }
.nut-menu[aria-expanded="true"] .nut-menu__vach { background: transparent; }
.nut-menu[aria-expanded="true"] .nut-menu__vach::before { transform: translateY(6px) rotate(45deg); }
.nut-menu[aria-expanded="true"] .nut-menu__vach::after { transform: translateY(-6px) rotate(-45deg); }

.ngan-keo { position: fixed; z-index: 49; top: var(--cao-dau); left: 0; right: 0; height: calc(100dvh - var(--cao-dau)); overflow-y: auto; background: rgba(10, 14, 18, .97); padding: 16px var(--le) 32px; display: flex; flex-direction: column; gap: 24px; animation: tha-xuong .25s var(--de); }
.ngan-keo__ds a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--vien-xam); color: var(--chu); font-size: 18px; font-weight: 600; text-decoration: none; }
.ngan-keo__cuoi { display: grid; gap: 12px; }
@keyframes tha-xuong { from { opacity: 0; transform: translateY(-8px); } }

@media (min-width: 560px) { .dau-trang__hanh-dong .nut { display: inline-flex; } }
@media (min-width: 1180px) {
	.menu-chinh { display: block; }
	.dau-trang__hanh-dong { margin-left: 8px; }
	.nut-menu { display: none; }
	.ngan-keo { display: none !important; }
}
@media (min-width: 1360px) { .hotline-nhanh { display: inline-flex; } }

/* ---------- Khối chung ---------- */
.khoi { padding: 56px 0; position: relative; }
@media (min-width: 640px) { .khoi { padding: 80px 0; } }
@media (min-width: 900px) { .khoi { padding: 112px 0; } }
.dau-khoi { max-width: 760px; margin-bottom: 28px; }
@media (min-width: 640px) { .dau-khoi { margin-bottom: 40px; } }
.dau-khoi--giua { margin-inline: auto; text-align: center; }
.nhan-khoi { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--xanh-sang); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tieu-de-khoi { font-size: clamp(28px, 4.2vw, 44px); }
.dau-khoi__mo-ta { margin-top: 16px; font-size: 17px; }

.luoi-4 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .luoi-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .luoi-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.the-kinh { position: relative; padding: 28px 24px; border-radius: var(--bo); background: linear-gradient(160deg, rgba(27, 35, 44, .85), rgba(20, 26, 33, .6)); border: 1px solid var(--vien); box-shadow: var(--bong-xanh); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .3s var(--de), border-color .3s, box-shadow .3s; }
.the-kinh:hover { transform: translateY(-4px); border-color: rgba(0, 229, 117, .5); box-shadow: 0 0 36px rgba(0, 229, 117, .18); }
.the-kinh h3 { font-size: 19px; margin: 16px 0 8px; }
.the-kinh p { margin: 0; font-size: 15px; }
.the-kinh__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--xanh-sang); background: rgba(0, 229, 117, .08); border: 1px solid rgba(0, 229, 117, .25); }

/* Hiện dần khi cuộn tới (chỉ khi có JS) */
.co-js .hien-dan { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--de) var(--tre, 0ms), transform .6s var(--de) var(--tre, 0ms); }
.co-js .hien-dan.da-hien { opacity: 1; transform: none; }

/* ---------- 1. Hero ---------- */
.hero { position: relative; padding: calc(var(--cao-dau) + 40px) 0 48px; overflow: hidden; background: radial-gradient(900px 600px at 78% 35%, rgba(56, 161, 73, .16), transparent 60%), radial-gradient(600px 400px at 0% 100%, rgba(56, 189, 248, .06), transparent 60%); }
.hero__luoi { position: absolute; inset: 0; background-image: linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); pointer-events: none; }
.hero__trong { position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hero { padding-top: calc(var(--cao-dau) + 72px); } .hero__trong { grid-template-columns: 1.05fr 1fr; } }
.hero__tieu-de { font-size: clamp(40px, 7vw, 76px); line-height: 1.02; letter-spacing: -.025em; }
.hero__dong2 { display: block; margin-top: 10px; font-size: clamp(22px, 3.2vw, 34px); font-weight: 600; color: var(--chu-2); letter-spacing: -.01em; }
.hero__dong2 em { font-style: normal; color: var(--xanh-sang); text-shadow: 0 0 24px rgba(0, 229, 117, .5); }
.hero__phu { margin: 22px 0 24px; font-size: 18px; max-width: 560px; }
.cham-song { width: 8px; height: 8px; border-radius: 50%; background: var(--xanh-sang); box-shadow: 0 0 0 0 rgba(0, 229, 117, .6); animation: song 2s infinite; }
@keyframes song { 70% { box-shadow: 0 0 0 10px rgba(0, 229, 117, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 229, 117, 0); } }

.huy-hieu { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.huy-hieu li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--chu); background: rgba(20, 26, 33, .8); border: 1px solid var(--vien); }
.huy-hieu .icon { color: var(--xanh-sang); }

/* Radar */
.radar { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.radar__vong { position: absolute; border-radius: 50%; border: 1px solid rgba(0, 229, 117, .22); }
.radar__vong--1 { inset: 0; box-shadow: inset 0 0 60px rgba(0, 229, 117, .06); }
.radar__vong--2 { inset: 16%; }
.radar__vong--3 { inset: 32%; border-style: dashed; border-color: rgba(0, 229, 117, .15); }
.radar__truc { position: absolute; inset: 0; background: linear-gradient(rgba(0, 229, 117, .14), rgba(0, 229, 117, .14)) center / 1px 100% no-repeat, linear-gradient(90deg, rgba(0, 229, 117, .14), rgba(0, 229, 117, .14)) center / 100% 1px no-repeat; border-radius: 50%; }
.radar__quet { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(0, 229, 117, .38), rgba(0, 229, 117, .08) 40deg, transparent 70deg); animation: quay 4.5s linear infinite; -webkit-mask-image: radial-gradient(circle, #000 69%, transparent 70%); mask-image: radial-gradient(circle, #000 69%, transparent 70%); }
@keyframes quay { to { transform: rotate(360deg); } }
.radar__diem { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--xanh-sang); box-shadow: 0 0 14px var(--xanh-sang); opacity: 0; animation: nhay 4.5s linear infinite; }
.radar__diem--1 { top: 18%; left: 64%; animation-delay: .5s; }
.radar__diem--2 { top: 70%; left: 78%; animation-delay: 1.6s; background: var(--xanh-duong); box-shadow: 0 0 14px var(--xanh-duong); }
.radar__diem--3 { top: 76%; left: 22%; animation-delay: 2.9s; }
@keyframes nhay { 0%, 100% { opacity: 0; } 4% { opacity: 1; } 40% { opacity: 0; } }
.radar__nhan { position: absolute; padding: 4px 8px; border-radius: 6px; font: 500 11px/1.2 var(--font-ma); color: var(--chu); background: rgba(10, 14, 18, .85); border: 1px solid rgba(0, 229, 117, .5); white-space: nowrap; }
.radar__nhan b { color: var(--xanh-sang); font-weight: 500; }
.radar__nhan--1 { top: 10%; left: 66%; }
.radar__nhan--2 { top: 80%; left: 54%; border-color: rgba(56, 189, 248, .6); }
.radar__nhan--2 b { color: var(--xanh-duong); }
.radar__camera { position: relative; width: 74%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(56, 161, 73, .18)); animation: troi 6s ease-in-out infinite; }
@keyframes troi { 50% { transform: translateY(-10px); } }

.chi-so { position: relative; margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--vien-xam); border: 1px solid var(--vien-xam); border-radius: var(--bo); overflow: hidden; padding: 0; }
.chi-so > div { background: var(--nen); padding: 18px 16px; }
.chi-so dt { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--chu-3); }
.chi-so dd { margin: 4px 0 0; font-size: 28px; font-weight: 800; color: var(--chu); line-height: 1.1; }
.chi-so small { font-size: 15px; font-weight: 600; color: var(--xanh-sang); margin-left: 4px; }
@media (min-width: 768px) { .chi-so { grid-template-columns: repeat(4, 1fr); } .chi-so > div { padding: 22px 24px; } }
@media (max-width: 767px) { .chi-so { margin-inline: var(--le); width: auto; } }

/* ---------- 2. Ban đêm ---------- */
.ban-dem { margin-top: 64px; display: grid; gap: 28px; align-items: center; padding: 24px; border-radius: 24px; background: var(--mat); border: 1px solid var(--vien-xam); }
@media (min-width: 960px) { .ban-dem { grid-template-columns: .8fr 1.2fr; padding: 40px; gap: 40px; } }
.ban-dem__tieu-de { font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px; }
.cong-tac { display: grid; gap: 8px; margin: 20px 0 16px; }
.cong-tac__nut { text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--vien-xam); background: var(--nen); display: grid; gap: 2px; transition: border-color .2s, background .2s; }
.cong-tac__nut b { color: var(--chu); font-weight: 600; }
.cong-tac__nut span { font-size: 14px; color: var(--chu-3); }
.cong-tac__nut:hover { border-color: rgba(0, 229, 117, .4); }
.cong-tac__nut[aria-pressed="true"] { border-color: var(--xanh-sang); background: rgba(0, 229, 117, .08); box-shadow: inset 3px 0 0 var(--xanh-sang); }
.cong-tac__nut[aria-pressed="true"] b { color: var(--xanh-sang); }
.ban-dem__mo-ta { font-size: 15px; min-height: 3.3em; margin: 0; }

.canh { position: relative; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid #000; background: #000; }
.canh__hinh { width: 100%; transition: filter .7s ease; }
.canh__anh-sang, .canh__ai { opacity: 0; transition: opacity .5s ease; }
.canh[data-che-do="ir"] .canh__hinh { filter: grayscale(1) brightness(1.75) contrast(1.15); }
.canh[data-che-do="mau"] .canh__hinh { filter: brightness(1.3) saturate(1.1); }
.canh[data-che-do="mau"] .canh__anh-sang { opacity: 1; }
.canh[data-che-do="dual"] .canh__hinh { filter: grayscale(1) brightness(1.75) contrast(1.15); }
.canh[data-che-do="dual"].da-phat-hien .canh__hinh { filter: brightness(1.3) saturate(1.1); }
.canh[data-che-do="dual"].da-phat-hien .canh__anh-sang, .canh[data-che-do="dual"].da-phat-hien .canh__ai { opacity: 1; }
.canh__hud { position: absolute; inset: 10px 12px auto; display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: space-between; font: 500 11px/1.3 var(--font-ma); color: #fff; text-shadow: 0 1px 2px #000; pointer-events: none; }
.canh__rec { display: inline-flex; align-items: center; gap: 5px; }
.canh__rec i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: nhap 1.2s steps(2) infinite; }
@keyframes nhap { 50% { opacity: 0; } }
.canh__che-do { padding: 1px 6px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 4px; }
.canh__gio { width: 100%; text-align: right; opacity: .85; }
.canh__chu-thich { padding: 8px 12px; font-size: 12px; color: var(--chu-3); background: var(--nen); }

/* ---------- 3–5. Dòng camera ---------- */
.khoi--dong:nth-of-type(odd) { background: linear-gradient(180deg, transparent, rgba(20, 26, 33, .6) 20%, rgba(20, 26, 33, .6) 80%, transparent); }
.dong { display: grid; gap: 32px; }
@media (min-width: 1024px) {
	.dong { grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
	.khoi--dao .dong__trai { order: 2; }
}
.san-khau { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; display: grid; place-items: center; padding: 8%; background: radial-gradient(circle at 50% 55%, rgba(56, 161, 73, .22), transparent 62%), #05080a; border: 1px solid var(--vien); overflow: hidden; }
.san-khau::after { content: ""; position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(180deg, transparent, rgba(0, 229, 117, .12), transparent); animation: quet-doc 5s linear infinite; pointer-events: none; }
@keyframes quet-doc { to { top: 100%; } }
.san-khau__anh { width: 100%; max-height: 100%; object-fit: contain; transition: transform .5s var(--de); }
.san-khau:hover .san-khau__anh { transform: scale(1.05); }
.san-khau__zoom { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font: 500 12px var(--font-ma); color: var(--xanh-sang); background: rgba(10, 14, 18, .85); border: 1px solid var(--vien); }

.dac-tinh { margin: 24px 0; display: grid; gap: 10px; }
.dac-tinh li { display: flex; gap: 10px; align-items: flex-start; color: var(--chu); }
.dac-tinh .icon { flex: none; margin-top: 3px; color: var(--xanh-sang); }
@media (min-width: 640px) { .dac-tinh { grid-template-columns: 1fr 1fr; gap: 12px 20px; } }

.phu-kien-kem { padding: 18px; border-radius: var(--bo); border: 1px dashed var(--vien-xam); }
.phu-kien-kem__nhan { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--chu-3); margin-bottom: 10px; }
.phu-kien-kem ul { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.phu-kien-kem li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.phu-kien-kem img { width: 56px; height: 56px; object-fit: contain; }
.phu-kien-kem span b { display: block; color: var(--chu); }
.dong-goi { margin: 14px 0 0; font-size: 13px; color: var(--chu-3); }

.nhom-den + .nhom-den { margin-top: 28px; }
.nhom-den__ten { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 18px; margin-bottom: 12px; }
.nhom-den__ten small { font-size: 14px; font-weight: 400; color: var(--chu-3); }
.cham-den { width: 10px; height: 10px; border-radius: 50%; align-self: center; }
.nhom-den--dual .cham-den { background: linear-gradient(90deg, #f4f4f5 50%, var(--hong-ngoai) 50%); box-shadow: 0 0 10px rgba(192, 132, 252, .6); }
.nhom-den--fullcolor .cham-den { background: #fde68a; box-shadow: 0 0 10px rgba(253, 230, 138, .7); }
.nhom-den--ir .cham-den { background: var(--hong-ngoai); box-shadow: 0 0 10px rgba(192, 132, 252, .6); }
.luoi-model { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .luoi-model { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } }
.the-model { padding: 14px 16px; border-radius: 12px; background: var(--mat); border: 1px solid var(--vien-xam); display: grid; gap: 2px; transition: border-color .2s, transform .2s; }
.the-model:hover { border-color: rgba(0, 229, 117, .5); transform: translateY(-2px); }
.the-model__ma { color: var(--chu); font-size: 15px; }
.the-model__mp { font-size: 22px; font-weight: 800; color: var(--xanh-sang); line-height: 1.2; }
.the-model__mp small { font-size: 13px; font-weight: 600; color: var(--chu-3); margin-left: 2px; }
.the-model__cb { font-size: 13px; color: var(--chu-2); }
.dong__cuoi { margin: 24px 0 0; }

/* ---------- 6. Phụ kiện ---------- */
.phu-kien-dau { display: grid; gap: 28px; align-items: center; margin-bottom: 40px; }
.phu-kien-dau .dau-khoi { margin-bottom: 0; }
.phu-kien-dau__anh { width: 100%; max-width: 480px; aspect-ratio: 1; object-fit: cover; border-radius: 24px; border: 1px solid var(--vien-xam); filter: saturate(.9); }
@media (min-width: 960px) { .phu-kien-dau { grid-template-columns: 1.2fr 1fr; } .phu-kien-dau__anh { justify-self: end; max-width: 400px; } }
.phu-kien-luoi { display: grid; gap: 16px; }
@media (min-width: 900px) { .nhom-pk--switch .nhom-pk__ds { grid-template-columns: repeat(5, 1fr); } .phu-kien-luoi { grid-template-columns: repeat(6, 1fr); } .nhom-pk--switch, .nhom-pk--chan_de { grid-column: span 6; } .nhom-pk--the_nho { grid-column: span 4; } .nhom-pk--hdd { grid-column: span 2; } }
.nhom-pk { padding: 24px; border-radius: 20px; background: var(--mat); border: 1px solid var(--vien-xam); }
.nhom-pk__ten { font-size: 20px; }
.nhom-pk__mo-ta { margin: 6px 0 18px; font-size: 15px; }
.nhom-pk__ds { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
.nhom-pk--switch .nhom-pk__ds { grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr)); }
.nhom-pk--hdd .nhom-pk__ds { grid-template-columns: 1fr; }
.nhom-pk__ds li { display: grid; gap: 2px; padding: 14px; border-radius: 12px; background: #05080a; border: 1px solid transparent; font-size: 13px; transition: border-color .2s; }
.nhom-pk__ds li:hover { border-color: var(--vien); }
.nhom-pk__ds b { color: var(--chu); font-size: 14px; }
.nhom-pk__anh { display: block; height: 110px; margin-bottom: 8px; overflow: hidden; }
.nhom-pk__anh img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--de); }
.nhom-pk__ds li:hover img { transform: scale(1.06); }

/* ---------- 7. Thông số ---------- */
.thanh-tab { display: flex; gap: 6px; overflow-x: auto; padding: 4px; border-radius: 14px; background: var(--mat); border: 1px solid var(--vien-xam); margin-bottom: 16px; scrollbar-width: none; }
.thanh-tab::-webkit-scrollbar { display: none; }
.thanh-tab [role="tab"] { flex: 1 0 auto; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 10px; background: none; color: var(--chu-2); font-weight: 600; white-space: nowrap; }
.thanh-tab [role="tab"][aria-selected="true"] { background: var(--xanh); color: #04110a; }
.bo-loc { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 20px; }
.bo-loc__nhom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bo-loc__nhan { font-size: 13px; color: var(--chu-3); margin-right: 4px; }
.chip { min-height: 44px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--vien-xam); background: transparent; font-size: 14px; font-weight: 600; color: var(--chu-2); }
.chip:hover { border-color: rgba(0, 229, 117, .45); }
.chip[aria-pressed="true"] { border-color: var(--xanh-sang); color: var(--xanh-sang); background: rgba(0, 229, 117, .08); }
.bang-khung + .bang-khung { margin-top: 32px; }
.co-js .bang-khung + .bang-khung { margin-top: 0; }
.bang-khung__ten { font-size: 18px; margin-bottom: 12px; }
.bang-khung__ten small { font-size: 14px; font-weight: 400; color: var(--chu-3); margin-left: 6px; }
.co-js .bang-khung__ten { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bang-cuon { overflow-x: auto; border-radius: var(--bo); border: 1px solid var(--vien-xam); -webkit-overflow-scrolling: touch; }
.bang { width: 100%; border-collapse: collapse; min-width: 880px; font-size: 14px; }
.bang--gon { min-width: 520px; }
.bang th, .bang td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--vien-xam); }
.bang thead th { position: sticky; top: 0; background: var(--xanh-toi); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.bang tbody tr { background: var(--mat); transition: background .15s; }
.bang tbody tr:nth-child(even) { background: #10161c; }
.bang tbody tr:hover { background: #1a2a22; }
.bang tbody tr:last-child > * { border-bottom: 0; }
.bang tbody th { color: var(--chu); white-space: nowrap; }
.bang .so { color: var(--chu); font-weight: 600; white-space: nowrap; }
.bang .so small { color: var(--chu-3); font-weight: 400; }
.bang .ma-nho { font-family: var(--font-ma); font-size: 12.5px; white-space: pre-line; }
.nhan-den { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.nhan-den--dual { color: #e9d5ff; background: rgba(192, 132, 252, .14); }
.nhan-den--fullcolor { color: #fde68a; background: rgba(253, 230, 138, .12); }
.nhan-den--ir { color: #c4b5fd; background: rgba(139, 92, 246, .14); }
.dau { display: inline-flex; align-items: center; }
.dau-co { color: var(--xanh-sang); }
.dau-khong { color: #6b7280; }
.dau-tuy { font-size: 12px; color: var(--chu-3); }
.ghi-chu { display: block; font-size: 12px; color: var(--chu-3); }
.bang-trong { padding: 24px; text-align: center; border-radius: var(--bo); border: 1px dashed var(--vien-xam); margin-top: 12px; }
.bang-goi-y { margin: 10px 0 0; font-size: 13px; color: var(--chu-3); text-align: center; }
@media (min-width: 1100px) { .bang-goi-y { display: none; } }

/* ---------- 8. Đại lý ---------- */
.khoi--dai-ly { background: radial-gradient(800px 400px at 50% 0%, rgba(56, 161, 73, .12), transparent 70%); }
.chinh-sach .the-kinh { padding-top: 32px; }
.chinh-sach__so { position: absolute; top: 18px; right: 20px; font: 500 14px var(--font-ma); color: var(--chu-3); }

/* ---------- 9. Báo giá ---------- */
.khoi--bao-gia { border-top: 1px solid var(--vien-xam); background: linear-gradient(180deg, #0c1217, var(--nen)); }
.bao-gia { display: grid; gap: 40px; }
@media (min-width: 960px) { .bao-gia { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; } .bao-gia__chu { position: sticky; top: calc(var(--cao-dau) + 32px); } }
.bao-gia__lien-he { display: grid; gap: 12px; margin-top: 28px; }
.bao-gia__lien-he a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--mat); border: 1px solid var(--vien-xam); color: var(--chu); font-size: 20px; font-weight: 800; text-decoration: none; transition: border-color .2s; }
.bao-gia__lien-he a:hover { border-color: var(--xanh-sang); }
.bao-gia__lien-he .icon { color: var(--xanh-sang); }
.bao-gia__lien-he small { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--chu-3); }

.form-bao-gia { display: grid; gap: 16px; padding: 24px; border-radius: 24px; background: var(--mat); border: 1px solid var(--vien); box-shadow: var(--bong-xanh); }
@media (min-width: 640px) { .form-bao-gia { grid-template-columns: 1fr 1fr; padding: 36px; } .truong--rong, .form-bao-gia .nut, .form-bao-gia p { grid-column: 1 / -1; } }
.truong { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.truong label, .truong legend { font-size: 14px; font-weight: 600; color: var(--chu); padding: 0; margin-bottom: 6px; }
.truong label > span[aria-hidden], .truong legend > span[aria-hidden] { color: var(--xanh-sang); }
.truong input, .truong textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid #2a3542; background: var(--nen); color: var(--chu); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.truong textarea { resize: vertical; min-height: 96px; }
.truong input:focus, .truong textarea:focus { outline: none; border-color: var(--xanh-sang); box-shadow: 0 0 0 3px rgba(0, 229, 117, .18); }
.truong input[aria-invalid="true"] { border-color: #f87171; }
.lua-chon { display: grid; gap: 8px; }
@media (min-width: 640px) { .lua-chon { grid-template-columns: 1fr 1fr; } }
.lua-chon__muc { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid #2a3542; background: var(--nen); cursor: pointer; font-size: 15px; color: var(--chu-2); transition: border-color .2s; }
.lua-chon__muc input { accent-color: var(--xanh); width: 18px; height: 18px; margin: 0; flex: none; }
.lua-chon__muc:has(input:checked) { border-color: var(--xanh-sang); color: var(--chu); background: rgba(0, 229, 117, .06); }
.o-bay { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-bao-gia__luu-y { font-size: 13px; color: var(--chu-3); margin: -4px 0 0; text-align: center; }
.thong-bao { margin: 0; padding: 14px 16px; border-radius: 10px; font-weight: 600; }
.thong-bao--ok { background: rgba(0, 229, 117, .1); color: var(--xanh-sang); border: 1px solid rgba(0, 229, 117, .35); }
.thong-bao--loi { background: rgba(248, 113, 113, .1); color: #fca5a5; border: 1px solid rgba(248, 113, 113, .35); }
.nut[aria-busy="true"] { opacity: .7; pointer-events: none; }
.form-bao-gia--tam { display: grid; gap: 16px; text-align: center; color: var(--chu); }

/* ---------- Footer ---------- */
.chan-trang { padding: 56px 0 calc(28px + env(safe-area-inset-bottom)); background: #06090c; border-top: 1px solid var(--vien-xam); font-size: 15px; }
.chan-trang__luoi { display: grid; gap: 32px; }
@media (min-width: 900px) { .chan-trang__luoi { grid-template-columns: 1.2fr 1.4fr 1fr; gap: 48px; } }
.chan-trang__logo { width: 190px; margin-bottom: 14px; }
.chan-trang__tieu-de { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--chu-3); margin-bottom: 14px; font-weight: 600; }
.chan-trang__ds { display: grid; gap: 12px; }
.chan-trang__ds li { display: flex; gap: 10px; align-items: flex-start; }
.chan-trang__ds .icon { flex: none; margin-top: 3px; color: var(--xanh); }
.chan-trang__ds a { color: var(--chu); display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }
.chan-trang__ds strong { color: var(--chu); font-weight: 600; }
.chan-trang__cuoi { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--vien-xam); font-size: 13px; color: var(--chu-3); }
.chan-trang__cuoi p { margin: 0; }

/* Nút nổi */
.nut-noi { position: fixed; z-index: 40; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
.nut-noi a { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.nut-noi__zalo { background: #0068ff; color: #fff; font-weight: 800; font-size: 14px; }
.nut-noi__mail { background: var(--mat); color: var(--chu); border: 1px solid var(--vien); }
/* Chừa lề phải cho cột nút nổi → không che dòng bản quyền cuối trang */
.chan-trang__cuoi { padding-right: 76px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.nut-noi__goi { position: relative; background: var(--xanh); color: #04110a; animation: lac 4s ease-in-out infinite; }
.nut-noi__goi::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--xanh-sang); animation: vong 2s ease-out infinite; }
@keyframes lac { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-14deg); } 92% { transform: rotate(14deg); } 94% { transform: rotate(-10deg); } 96% { transform: rotate(8deg); } }
@keyframes vong { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }

/* ---------- Trang phụ ---------- */
.khoi--trang { padding-top: calc(var(--cao-dau) + 56px); min-height: 70vh; }
.bai__tieu-de { font-size: clamp(30px, 5vw, 44px); margin-bottom: 20px; }
.bai__noi-dung { color: var(--chu-2); font-size: 17px; }
.bai__noi-dung h2, .bai__noi-dung h3 { margin: 1.6em 0 .6em; }
.bai__noi-dung img { border-radius: 12px; }

/* ---------- Chuẩn hoá điện thoại (< 640px) — 1.0.2 ---------- */
@media (max-width: 639px) {
	.the-kinh { padding: 22px 18px; }
	.the-kinh h3 { margin-top: 12px; font-size: 18px; }
	.ban-dem { margin-top: 40px; padding: 18px; border-radius: 18px; }
	.cong-tac__nut { padding: 12px 14px; }
	.the-model { padding: 12px; border-radius: 10px; }
	.the-model__ma { font-size: 13px; }
	.the-model__mp { font-size: 19px; }
	.the-model__mp small { font-size: 12px; }
	.the-model__cb { font-size: 12px; line-height: 1.4; }
	.dac-tinh { margin: 18px 0; gap: 8px; font-size: 15px; }
	.nhom-pk { padding: 18px; border-radius: 16px; }
	.chi-so dd { font-size: 24px; }
	.hero { padding-bottom: 32px; }
	.chi-so { margin-top: 32px; }
	.radar { width: min(100%, 340px); }
	/* Bảng thông số → thẻ gọn: không phải vuốt ngang, mỗi model ~150px */
	.bo-loc { gap: 10px; }
	.bo-loc__nhom { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--le)); padding: 0 var(--le); }
	.bo-loc__nhom::-webkit-scrollbar { display: none; }
	.chip { flex: none; }
	.bang-cuon { overflow: visible; border: 0; }
	.bang, .bang--gon { min-width: 0; }
	.bang thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.bang tbody { display: grid; gap: 8px; }
	.bang tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--vien-xam); }
	.bang tbody tr:nth-child(even) { background: var(--mat); }
	.bang th, .bang td { padding: 0; border: 0; white-space: normal; }
	.bang .ma-nho { white-space: normal; }
	.bang tbody th { grid-column: 1 / 3; order: -3; font-size: 16px; align-self: center; }
	.bang td[data-nhan="Dòng đèn"] { grid-column: 3; order: -2; justify-self: end; align-self: center; }
	.bang td[data-nhan="Cảm biến"] { grid-column: span 2; }
	.bang td[data-nhan="Khung hình"], .bang td[data-nhan="Mô tả"], .bang td[data-nhan="Nhóm"] { grid-column: 1 / -1; }
	.bang--gon tbody th { grid-column: 1 / -1; }
	.bang td[data-nhan]::before { content: attr(data-nhan); display: block; font: 600 11px/1.4 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--chu-3); margin-bottom: 2px; }
	.bang td[data-nhan="Dòng đèn"]::before { display: none; }
	.bang-goi-y { display: none; }
	.ghi-chu { display: inline; margin-left: 4px; }
}

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.radar__quet, .san-khau::after { display: none; }
	.co-js .hien-dan { opacity: 1; transform: none; }
}