/* Cổng sun-mia.com — theo artboard "Cổng sun-mia.com" (SUNMED IVD — Web mockup, 24/10) + Design System SUNMED.
 * Bản 2 (25/10): mỗi thẻ là một "cảnh" cùng khung 2:1 (lab sáng / nhà hiện đại — cùng ô kính lớn, cùng ánh sáng ngày)
 * + điểm chỉ gắn đúng vào máy / thiết bị thật, chữ VI / EN nằm trên HTML (không in vào ảnh). */
:root { --nen: #0A1A2E; --navy: #0F2744; --xanh: #0E281B; --chu: #FFFFFF; --mo: rgba(255,255,255,.78); --xam: #6F8499; --vien: #1B2F4A;
  --nhan: #FF8A65; --do: #D42A0A; --vang: #F5A524; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--nen); color: var(--chu); font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
[data-l="en"] { display: none; }
html[lang="en"] [data-l="vi"] { display: none; }
html[lang="en"] [data-l="en"] { display: inline; }
a { color: inherit; }
.bo-qua { position: absolute; left: -9999px; top: 8px; background: #fff; color: var(--navy); padding: 8px 12px; border-radius: 8px; z-index: 5; }
.bo-qua:focus { left: 16px; }
.dau, main, .chan { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.dau { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; padding-bottom: 8px; }
.chu-hieu { font-family: Archivo, sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.nn { display: flex; align-items: center; gap: 2px; color: #3B5273; font-size: 13px; }
.nn button { background: none; border: 0; color: #9DB0C4; font: 600 13px Inter, sans-serif; padding: 6px 8px; cursor: pointer; border-radius: 6px; }
.nn button[aria-pressed="true"] { color: #fff; }
.nn button:focus-visible, .the:focus-visible, .nho input:focus-visible { outline: 2px solid var(--nhan); outline-offset: 3px; }
.hoi { padding: 28px 0 24px; max-width: 760px; }
.eb { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 600; color: var(--nhan); }
.eb::before { content: ""; width: 28px; height: 2px; background: var(--do); }
h1 { font-family: Archivo, sans-serif; font-weight: 800; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.06; letter-spacing: -.025em; margin: 14px 0 10px; }
.phu { margin: 0; color: #9DB0C4; font-size: 16px; line-height: 1.55; }

/* ── Thẻ ─────────────────────────────────────────────────────────────── */
.luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.the { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; text-decoration: none; background: var(--navy); isolation: isolate; }
.the.home { background: var(--xanh); }
.canh { position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden; container-type: inline-size; }
.canh > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.canh::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(180deg, rgba(15,39,68,0), var(--navy)); }
.the.home .canh::after { background: linear-gradient(180deg, rgba(14,40,27,0), var(--xanh)); }
.the:hover .canh > img { transform: scale(1.025); }

/* Điểm chỉ: chấm gắn vào máy + nhãn ngắn (nhóm xét nghiệm / dòng sản phẩm) */
.cac-diem { position: absolute; inset: 0; z-index: 1; }
.diem { position: absolute; display: flex; align-items: center; gap: 8px; transform: translate(-7px, -50%); }
.diem i { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--do), 0 2px 8px rgba(10,26,46,.35); }
.the.home .diem i { box-shadow: 0 0 0 3px var(--vang), 0 2px 8px rgba(10,26,46,.35); }
.diem i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--do); opacity: 0; animation: song 1.6s ease-out 2 both; }
.the.home .diem i::after { border-color: var(--vang); }
.diem b { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; padding: 4px 9px; border-radius: 7px; background: rgba(255,255,255,.92);
  color: var(--navy); font: 600 clamp(10px, 1.8cqw, 12.5px)/1.2 Inter, sans-serif; box-shadow: 0 4px 14px rgba(10,26,46,.18); }
.diem small { font-weight: 500; font-size: .86em; color: #5A7085; }
.diem.trai { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.diem:nth-child(2) i::after { animation-delay: .15s; } .diem:nth-child(3) i::after { animation-delay: .3s; }
.diem:nth-child(4) i::after { animation-delay: .45s; } .diem:nth-child(5) i::after { animation-delay: .6s; } .diem:nth-child(6) i::after { animation-delay: .75s; }
@keyframes song { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
/* vị trí theo ảnh 1400 × 700 (deploy/sun-mia-cong/nguon) */
.d-cp { left: 9.3%; top: 62.9%; } .d-sk { left: 33.6%; top: 65%; } .d-bg { left: 57.1%; top: 53.6%; }
.d-io { left: 70.7%; top: 59.7%; } .d-ab { left: 80%; top: 34.3%; } .d-eu { left: 49.3%; top: 42.3%; }
.d-nl { left: 84%; top: 23%; } .d-tm { left: 12.8%; top: 40%; } .d-yt { left: 59%; top: 70%; }
@container (max-width: 520px) {
  .diem b { display: none; }
  .diem i { width: 10px; height: 10px; box-shadow: 0 0 0 2px var(--do), 0 1px 4px rgba(10,26,46,.35); }
  .the.home .diem i { box-shadow: 0 0 0 2px var(--vang), 0 1px 4px rgba(10,26,46,.35); }
}

.noi { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; padding: 4px 40px 40px; margin-top: -28px; flex: 1; }
.logo { display: block; height: 36px; width: auto; align-self: flex-start; }
.logo-nen { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: #fff; color: #1A1A1A; border-radius: 999px; padding: 5px 14px 5px 6px; font: 700 15px Archivo, sans-serif; letter-spacing: .02em; }
.logo-nen .logo { height: 28px; }
.nhan { font-size: 14px; font-weight: 500; color: #9DB0C4; }
.the.home .nhan { color: #9BE6B4; }
.tieu { font-family: Archivo, sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.mo { color: var(--mo); font-size: 16px; line-height: 1.5; max-width: 46ch; }
.di { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; font-weight: 600; font-size: 16px; }
.di svg { transition: transform .2s ease; }
.the:hover .di svg { transform: translateX(4px); }
.nho { display: flex; gap: 10px; align-items: flex-start; margin: 22px 0 0; color: #9DB0C4; font-size: 13px; line-height: 1.5; cursor: pointer; max-width: 760px; }
.nho input { margin-top: 3px; accent-color: var(--do); width: 16px; height: 16px; flex: none; }
.chan { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between; padding-top: 28px; padding-bottom: 32px; margin-top: 40px;
  border-top: 1px solid var(--vien); font-size: 12px; color: #9DB0C4; }
.xam { color: var(--xam); }
@media (max-width: 860px) {
  .dau, main, .chan { padding-left: 16px; padding-right: 16px; }
  .luoi { grid-template-columns: 1fr; gap: 14px; }
  .the { border-radius: 16px; }
  .noi { padding: 4px 22px 24px; margin-top: -18px; }
  .hoi { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .canh > img, .di svg { transition: none; } .the:hover .canh > img { transform: none; } .diem i::after { animation: none; }
}