/* ============================================================ T-SHIELD — "Activated by Light" Design system: tokens, type, components ============================================================ */ /* Fonts loaded via in index.html for faster, non-blocking fetch */ :root { /* ============================================================ PALETTE — True Heart Enterprise brand blue #0c9ce4 (primary) · red #e42424 (accent) · yellow #fccc0c Token names kept for compatibility; values retuned to brand. ============================================================ */ /* base */ --bg: oklch(0.985 0.006 235); --surface: #ffffff; --surface-2: oklch(0.974 0.011 235); --tint-blue: oklch(0.955 0.032 233); --tint-teal: oklch(0.960 0.028 224); --band: oklch(0.940 0.050 233); /* nền xanh nhạt rõ — xen kẽ giữa các section */ /* ink — derived from logo wordmark (#0b0b10: near-black, faint cool) */ --ink: oklch(0.20 0.016 268); /* headings / primary — deep near-black */ --ink-soft: oklch(0.40 0.013 262); /* body copy — dark neutral gray */ --ink-faint: oklch(0.565 0.011 260); /* captions / muted */ --line: oklch(0.91 0.012 240); --line-soft: oklch(0.945 0.009 240); /* dark (navy-blue) */ --navy: oklch(0.30 0.090 250); --navy-2: oklch(0.235 0.085 252); --navy-3: oklch(0.175 0.070 254); --on-dark: oklch(0.97 0.010 235); --on-dark-soft: oklch(0.80 0.030 235); --on-dark-faint: oklch(0.64 0.035 240); /* accents */ --blue: oklch(0.56 0.145 245); /* primary blue (white-text safe) */ --blue-bright: oklch(0.73 0.135 234); /* vivid sky blue — glows / on-dark */ --teal: oklch(0.68 0.120 230); /* cyan-blue secondary */ --gold: oklch(0.84 0.160 95); /* brand yellow */ --blue-ink: oklch(0.50 0.140 248); --teal-ink: oklch(0.52 0.120 234); --gold-ink: oklch(0.60 0.140 86); /* caution accent — amber ấm, thân thiện (nhắc nhở nhẹ nhàng, không "báo động") */ --danger: oklch(0.74 0.135 70); --danger-ink: oklch(0.54 0.120 62); --danger-tint: oklch(0.966 0.034 78); /* type */ --sans: 'Be Vietnam Pro', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; /* layout */ --maxw: 1200px; --pad: clamp(20px, 5vw, 64px); --radius: 18px; --radius-sm: 12px; --shadow-sm: 0 1px 2px oklch(0.4 0.05 250 / 0.05), 0 2px 8px oklch(0.4 0.05 250 / 0.05); --shadow: 0 4px 12px oklch(0.4 0.05 250 / 0.06), 0 16px 40px oklch(0.4 0.05 250 / 0.08); --shadow-lg: 0 8px 24px oklch(0.3 0.05 250 / 0.10), 0 30px 70px oklch(0.3 0.05 250 / 0.14); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6; } ::selection { background: oklch(0.72 0.125 234 / 0.25); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ---------- layout helpers ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: clamp(72px, 11vw, 140px); } .eyebrow { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-ink); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--blue); display: inline-block; } .eyebrow.on-dark { color: var(--blue-bright); } .eyebrow.on-dark::before { background: var(--blue-bright); } .eyebrow.danger { color: var(--danger-ink); } .eyebrow.danger::before { background: var(--danger); } .eyebrow.center { justify-content: center; } .eyebrow.center::after { content: ""; width: 22px; height: 1.5px; background: var(--blue); display: inline-block; } .section-head { max-width: 760px; } .section-head.center { margin-inline: auto; text-align: center; } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; } .h2 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 700; margin-top: 20px; text-wrap: balance; } .lead { font-size: clamp(17px, 1.7vw, 20px); color: var(--ink-soft); margin-top: 22px; text-wrap: pretty; max-width: 64ch; } .lead.center { margin-inline: auto; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 15.5px; padding: 15px 26px; border-radius: 100px; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; } .btn .arrow { transition: transform .2s ease; } .btn:hover .arrow { transform: translateX(3px); } .btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 20px oklch(0.56 0.145 245 / 0.35); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px oklch(0.56 0.145 245 / 0.45); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink-faint); transform: translateY(-2px); } .btn-ghost.on-dark { color: var(--on-dark); border-color: oklch(0.97 0.006 235 / 0.22); } .btn-ghost.on-dark:hover { border-color: oklch(0.97 0.006 235 / 0.5); background: oklch(0.97 0.006 235 / 0.06); } /* ---------- pills / chips ---------- */ .pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); } /* ---------- image slot styling ---------- */ .slot-img { display: block; width: 100%; object-fit: cover; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); } /* ---------- footer cleanup ---------- */ .no-mt { margin-top: 0; } /* ============================================================ T-SHIELD — section & component layouts ============================================================ */ /* ---------- NAV ---------- */ .nav { position: sticky; top: 0; z-index: 50; background: oklch(0.985 0.005 230 / 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft); transition: background .3s ease, border-color .3s ease; } .nav-inner { max-width: var(--maxw); margin-inline: auto; padding: 14px var(--pad); display: flex; align-items: center; gap: 16px; } .nav-brand { display: flex; align-items: center; gap: 13px; } .nav-brand img { height: 34px; width: auto; } .nav-brand .wm { display: flex; flex-direction: column; line-height: 1.05; padding-left: 13px; border-left: 1px solid var(--line); } .nav-brand .wm span { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--gold-ink); text-transform: uppercase; } @media (max-width: 560px) { .nav-brand .wm { display: none; } } .nav-links { display: flex; align-items: center; gap: clamp(11px, 1.1vw, 16px); margin-left: auto; } .nav-links a { font-size: clamp(13px, 0.95vw, 14px); font-weight: 500; color: var(--ink-soft); white-space: nowrap; transition: color .18s ease; } .nav-links a:hover { color: var(--ink); } .nav-cta { display: flex; align-items: center; gap: 10px; } .nav .btn { padding: 10px 16px; font-size: 13.5px; } .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 40px; padding: 0; margin-left: 2px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; transition: background .18s ease, border-color .18s ease; } .nav-burger:hover { background: var(--surface-2); } .nav-burger span { display: block; width: 18px; height: 2px; margin-inline: auto; border-radius: 2px; background: var(--ink); transition: transform .25s ease, opacity .2s ease; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---- language switcher (VI / JA) ---- */ .lang-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface); } .lang-switch .lang { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 100px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-faint); transition: background .18s ease, color .18s ease; } .lang-switch .lang .flag { width: 20px; height: 13px; border-radius: 2px; display: block; flex-shrink: 0; box-shadow: 0 0 0 1px oklch(0.26 0.04 250 / 0.12); } .lang-switch .lang.is-active { background: var(--blue); color: #fff; } .lang-switch .lang:not(.is-active):hover { color: var(--ink); background: var(--surface-2); } @media (max-width: 560px) { .lang-switch .lang span { display: none; } .lang-switch .lang { padding: 5px 8px; } } @media (max-width: 1000px) { .nav-burger { display: inline-flex; } .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px var(--pad) 16px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: calc(100dvh - 66px); overflow-y: auto; } .nav-links.open { display: flex; } .nav-links a { font-size: 16px; padding: 14px 2px; border-bottom: 1px solid var(--line-soft); white-space: normal; } .nav-links a:last-child { border-bottom: 0; } } @media (max-width: 560px) { .nav-cta .phone { display: none; } } /* ---------- HERO ---------- */ .hero { position: relative; background: radial-gradient(100% 78% at 82% -10%, oklch(0.66 0.140 238 / 0.20), transparent 58%), /* blue — chủ đạo */ radial-gradient(48% 46% at 98% 0%, oklch(0.84 0.160 95 / 0.18), transparent 60%), /* gold — góc phải trên */ radial-gradient(40% 42% at 60% -6%, oklch(0.58 0.200 27 / 0.08), transparent 62%), /* red — ambient rất nhẹ */ radial-gradient(82% 70% at 6% 112%, oklch(0.70 0.120 235 / 0.16), transparent 62%), /* blue — góc trái dưới */ linear-gradient(180deg, #ffffff 0%, var(--tint-blue) 100%); color: var(--ink); overflow: hidden; } .hero::before { /* faint grid */ content: ""; position: absolute; inset: 0; background-image: linear-gradient(oklch(0.26 0.045 252 / 0.045) 1px, transparent 1px), linear-gradient(90deg, oklch(0.26 0.045 252 / 0.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(120% 100% at 50% 30%, #000 30%, transparent 80%); pointer-events: none; } .hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; padding: clamp(18px, 2.6vw, 36px) var(--pad) clamp(26px, 3.4vw, 48px); min-height: calc(100svh - 80px); /* hero lấp đầy 1 màn hình (trừ nav) */ display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 4vw, 56px); align-items: center; } @media (max-width: 940px) { .hero-inner { grid-template-columns: 1fr; } } .hero-tag { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-ink); display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; } .hero-tag .sep { color: var(--gold-ink); } .hero-tag .jp-flag { display: inline-flex; vertical-align: -2px; margin-right: 2px; } .hero-tag .jp-flag svg { width: 19px; height: auto; border-radius: 2.5px; box-shadow: 0 0 0 1px oklch(0.26 0.04 250 / 0.18), 0 1px 3px oklch(0.15 0.03 250 / 0.18); } .hero h1 { font-size: clamp(30px, 4vw, 50px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.0; margin-top: 10px; } /* "lá chắn" — một cụm, phối màu nhẹ từ màu logo (xanh dương → vàng) */ .hero h1 .hl-shield { background: linear-gradient(100deg, #0c9ce4 0%, var(--gold-ink) 116%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* "tự nhiên" — màu xanh dương logo solid */ .hero h1 .hl-live { color: #0c9ce4; } /* giữ mỗi cụm nhấn liền một dòng, không ngắt giữa chừng */ .hero h1 .hl-shield, .hero h1 .hl-live { white-space: nowrap; } .hero .sub { font-size: clamp(18px, 2.1vw, 23px); font-weight: 500; color: var(--ink); margin-top: 10px; max-width: 32ch; text-wrap: balance; } .hero .quote { margin-top: 8px; font-size: 14.5px; font-style: italic; color: var(--ink-soft); max-width: 44ch; padding-left: 16px; border-left: 2px solid var(--blue); } .hero-cta { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; } .hero-contact { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; } .hero-hotline { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; color: var(--ink); } .hero-hotline i { color: var(--blue); } .hero-hotline b { color: var(--blue-ink); letter-spacing: .01em; } .hero-hotline:hover b { text-decoration: underline; text-underline-offset: 3px; } .hero-zalo { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; color: var(--ink); } .hero-zalo .zalo-ic { width: 24px; height: 24px; border-radius: 7px; display: block; flex-shrink: 0; box-shadow: 0 2px 6px oklch(0.5 0.18 255 / 0.35); } .hero-zalo b { color: var(--blue-ink); letter-spacing: .01em; } .hero-zalo:hover b { text-decoration: underline; text-underline-offset: 3px; } .hero-fb { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 16px; color: #fff; background: #1877f2; transition: transform .2s ease, filter .2s ease; } .hero-fb:hover { transform: translateY(-2px); filter: brightness(1.08); } /* hotline + facebook đặt trên thẻ T-SHIELD (cột phải) */ .hero-card-wrap { position: relative; width: 100%; } .hero-visual .hero-contact { margin: 0 0 16px; justify-content: center; } /* Thanh CTA "Liên hệ khảo sát miễn phí" — cột phải hero */ .hero-survey-bar { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 16px; padding: 13px 16px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, var(--blue) 0%, var(--blue-bright) 50%, var(--teal) 100%); background-size: 200% 100%; box-shadow: 0 10px 26px oklch(0.56 0.145 245 / 0.40), inset 0 1px 0 oklch(1 0 0 / 0.22); transition: filter .2s ease, box-shadow .2s ease, transform .2s ease; } .hero-survey-bar > * { position: relative; z-index: 1; } .hero-survey-bar .hsb-ic { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: oklch(1 0 0 / 0.18); font-size: 15px; } .hero-survey-bar .hsb-text { font-weight: 700; font-size: 15.5px; letter-spacing: .01em; line-height: 1.2; } .hero-survey-bar .hsb-text b { font-weight: 800; } .hero-survey-bar .hsb-arrow { margin-left: auto; flex-shrink: 0; font-size: 15px; opacity: .95; } .hero-survey-bar:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 14px 34px oklch(0.56 0.145 245 / 0.55), inset 0 1px 0 oklch(1 0 0 / 0.22); } /* dải sáng quét ngang */ .hero-survey-bar::after { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, oklch(1 0 0 / 0.42), transparent); transform: skewX(-18deg); } @media (prefers-reduced-motion: no-preference) { .hero-survey-bar { animation: surveyGlow 2.6s ease-in-out infinite, surveyGrad 6s ease-in-out infinite; } .hero-survey-bar::after { animation: surveyShine 3.4s ease-in-out infinite; } .hero-survey-bar .hsb-ic { animation: surveyPop 2.6s ease-in-out infinite; } .hero-survey-bar .hsb-arrow { animation: surveyNudge 1.5s ease-in-out infinite; } @keyframes surveyGlow { 0%,100%{ box-shadow: 0 10px 26px oklch(0.56 0.145 245 / 0.35), inset 0 1px 0 oklch(1 0 0 / 0.22) } 50%{ box-shadow: 0 12px 34px oklch(0.56 0.145 245 / 0.60), inset 0 1px 0 oklch(1 0 0 / 0.22) } } @keyframes surveyGrad { 0%,100%{ background-position: 0% 50% } 50%{ background-position: 100% 50% } } @keyframes surveyShine { 0%{ left: -60% } 55%,100%{ left: 130% } } @keyframes surveyPop { 0%,100%{ transform: scale(1) } 50%{ transform: scale(1.12) } } @keyframes surveyNudge { 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(4px) } } } .hero-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); } .hero-stat .n { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); } .hero-stat .n .u { font-size: 0.6em; color: var(--gold-ink); font-weight: 600; } .hero-stat .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 4px; } /* hero visual */ .hero-visual { position: relative; } .hero-visual .slot-img { width: 100%; aspect-ratio: 4 / 5; --is-bg: oklch(0.30 0.05 255); } .hero-visual .badge { position: absolute; left: -14px; bottom: 26px; background: var(--surface); color: var(--ink); border-radius: 14px; padding: 14px 18px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 13px; max-width: 250px; } .hero-visual .badge .ring { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--blue) 0 78%, oklch(0.9 0.01 240) 78% 100%); display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 600; } .hero-visual .badge .ring::before { content:""; position:absolute; width:26px; height:26px; border-radius:50%; background: var(--surface); } .hero-visual .badge .ring span { position: relative; } .hero-visual .badge b { font-size: 13.5px; font-weight: 700; } .hero-visual .badge p { margin: 2px 0 0; font-size: 11.5px; color: var(--ink-faint); line-height: 1.4; } /* thẻ chứng nhận nổi (góc trên-phải) */ .hero-cert { position: absolute; top: 6px; right: -16px; z-index: 5; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 7px 13px 7px 7px; box-shadow: var(--shadow-lg); max-width: 208px; transition: transform .2s ease, box-shadow .25s ease; } .hero-cert:hover { transform: translateY(-2px); } .hero-cert img { width: 36px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); flex-shrink: 0; } .hero-cert b { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.15; } .hero-cert i { font-style: normal; font-size: 10px; color: var(--ink-faint); font-family: var(--mono); letter-spacing: .02em; } @media (max-width: 940px) { .hero-visual { max-width: 460px; } .hero-cert { right: 0; top: -8px; } } /* ---------- PROBLEM ---------- */ .prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 60px; } @media (max-width: 860px) { .prob-grid { grid-template-columns: 1fr; } } .prob-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease; } .prob-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: oklch(0.85 0.02 245); } .prob-card .ic { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 22px; background: var(--tint-blue); color: var(--blue-ink); font-family: var(--mono); font-weight: 600; font-size: 18px; } .prob-card h3 { font-size: 20px; font-weight: 700; } .prob-card p { margin: 12px 0 0; font-size: 15px; color: var(--ink-soft); } .prob-card .tag { margin-top: 18px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.04em; } /* ---------- MECHANISM ---------- */ .mech { background: var(--band); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .mech-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: end; } @media (max-width: 820px) { .mech-top { grid-template-columns: 1fr; } } .mech-formula { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 15px; color: var(--ink-soft); } .mech-formula .chem { padding: 9px 15px; border-radius: 10px; background: var(--tint-teal); color: var(--teal-ink); font-weight: 600; } .mech-formula .arr { color: var(--blue); font-weight: 700; } .diagram { margin-top: 64px; background: linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 100%); border-radius: 24px; padding: clamp(28px, 4vw, 52px); color: var(--on-dark); position: relative; overflow: hidden; } .diagram::before { content:""; position:absolute; inset:0; background: radial-gradient(70% 120% at 8% -10%, oklch(0.72 0.125 234 / 0.30), transparent 55%); pointer-events: none; } .diagram-flow { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 860px) { .diagram-flow { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 480px) { .diagram-flow { grid-template-columns: 1fr; } } .dstep { position: relative; } .dstep .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--on-dark-faint); margin-bottom: 16px; } .dstep .orb { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px; font-family: var(--mono); font-weight: 600; font-size: 15px; border: 1px solid oklch(0.97 0.006 235 / 0.18); background: oklch(0.97 0.006 235 / 0.05); } .dstep.s1 .orb { background: radial-gradient(circle at 35% 30%, var(--gold), oklch(0.62 0.12 70)); color: #2a1d00; border: none; box-shadow: 0 0 36px oklch(0.84 0.160 95 / 0.5); } .dstep.s2 .orb { color: var(--blue-bright); border-color: oklch(0.72 0.125 234 / 0.5); box-shadow: 0 0 28px oklch(0.72 0.125 234 / 0.25); } .dstep.s3 .orb { color: var(--on-dark); } .dstep.s4 .orb { background: radial-gradient(circle at 35% 30%, var(--teal), oklch(0.55 0.105 238)); color: #00231a; border: none; box-shadow: 0 0 30px oklch(0.70 0.120 233 / 0.45); } .dstep h4 { margin: 0; font-size: 17px; font-weight: 700; } .dstep p { margin: 8px 0 0; font-size: 13.5px; color: var(--on-dark-soft); line-height: 1.5; } .dstep:not(:last-child)::after { content: "→"; position: absolute; top: 56px; right: -14px; color: var(--on-dark-faint); font-size: 20px; } @media (max-width: 860px) { .dstep::after { display: none; } } .mech-film { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 32px; padding-top: 28px; border-top: 1px solid oklch(0.97 0.006 235 / 0.12); position: relative; z-index: 2; } .mech-film .ml { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--blue-bright); text-transform: uppercase; } .mech-film p { margin: 0; font-size: 15px; color: var(--on-dark-soft); max-width: 70ch; } /* video giới thiệu chung */ .mech-video { margin-top: clamp(44px, 6vw, 76px); } .mech-video-title { font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin-top: 16px; text-wrap: balance; } .video-frame { position: relative; margin: clamp(22px, 3.5vw, 36px) auto 0; max-width: 900px; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: oklch(0.20 0.02 260); } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- APPLICATIONS ---------- */ .apps { background: var(--surface); } /* section banding — xen kẽ nền trắng ↔ xanh nhạt cho rõ nhịp giữa các section */ #loi-ich, #quy-trinh { background: var(--band); } .apps-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 60px; } .app { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .25s ease; } .app:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .app .slot-img { width: 100%; aspect-ratio: 16 / 10; border-radius: 0; } .app-body { padding: 24px 24px 26px; flex: 1; display: flex; flex-direction: column; } .app .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-ink); } .app h3 { font-size: 19px; font-weight: 700; margin-top: 10px; } .app .where { font-size: 13.5px; color: var(--ink-faint); margin: 10px 0 0; } .app .eff { font-size: 14px; color: var(--ink-soft); margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); } .app.span-3 { grid-column: span 3; } .app.span-3 { flex-direction: row; } .app.span-3 .slot-img { width: 46%; aspect-ratio: auto; align-self: stretch; } .app.span-2 { grid-column: span 2; } @media (max-width: 980px) { .apps-grid { grid-template-columns: 1fr 1fr; } .app.span-3, .app.span-2 { grid-column: span 1; } .app.span-3 { flex-direction: column; } .app.span-3 .slot-img { width: 100%; aspect-ratio: 16/10; } } @media (max-width: 600px) { .apps-grid { grid-template-columns: 1fr; } } /* ---------- SPACES (beyond hotels) ---------- */ .spaces { background: var(--tint-teal); } .spaces-head { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 64px); align-items: end; } @media (max-width: 860px) { .spaces-head { grid-template-columns: 1fr; gap: 36px; } } .spaces-pillars { display: flex; flex-direction: column; gap: 16px; } .pillar { display: flex; gap: 15px; align-items: flex-start; } .pillar .pic { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--surface); color: var(--teal-ink); font-family: var(--mono); font-weight: 600; font-size: 15px; box-shadow: var(--shadow-sm); } .pillar b { font-size: 15.5px; font-weight: 700; } .pillar p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; } .spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; } @media (max-width: 900px) { .spaces-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .spaces-grid { grid-template-columns: 1fr; } } .space { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .25s ease; } .space:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .space .slot-img { width: 100%; aspect-ratio: 16 / 11; border-radius: 0; } .space-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; } .space .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-ink); } .space h3 { font-size: 19px; font-weight: 700; margin-top: 8px; } .space p { font-size: 14px; color: var(--ink-soft); margin: 12px 0 0; } .space .htag { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em; color: var(--teal-ink); display: flex; align-items: center; gap: 8px; } .space .htag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; } /* featured hotel card (horizontal, full width) */ .space.feat { display: grid; grid-template-columns: 1.05fr 0.95fr; margin-top: 56px; } .space.feat .slot-img { width: 100%; height: 100%; aspect-ratio: auto; min-height: 320px; } .space.feat .space-body { padding: 40px 42px; justify-content: center; } .space.feat h3 { font-size: 27px; margin-top: 8px; } .space.feat > .space-body > p { font-size: 15px; max-width: 52ch; } .feat-groups { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; } .feat-group-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--blue-ink); } .feat-group-label i { color: var(--blue); } .feat-group .feat-tags { margin-top: 9px; } .feat-group .feat-list { margin-top: 10px; } .feat-divider { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; } .feat-promise { display: flex; align-items: center; gap: 14px; margin-top: 18px; background: var(--tint-blue); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; } .feat-promise-ic { display: grid; place-items: center; flex-shrink: 0; font-size: 24px; color: var(--blue); padding-right: 14px; border-right: 1.5px solid oklch(0.56 0.145 245 / 0.30); } .feat-promise p { margin: 0; font-size: 13.5px; color: var(--ink); line-height: 1.5; } .feat-promise p b { color: var(--blue-ink); } .feat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .feat-item { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .feat-item:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .feat-item i { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; font-size: 14px; color: var(--blue); background: var(--tint-blue); } @media (max-width: 520px) { .feat-list { grid-template-columns: 1fr; } } .feat-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; } .feat-tags span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; padding: 7px 13px; border-radius: 100px; background: var(--green-tint, var(--tint-teal)); color: var(--teal-ink); border: 1px solid var(--line-soft); } @media (max-width: 760px) { .space.feat { grid-template-columns: 1fr; } .space.feat .slot-img { min-height: 220px; aspect-ratio: 16/10; } .space.feat .space-body { padding: 28px 24px; } } .spaces-grid { margin-top: 20px; } /* ---------- BENEFITS ---------- */ .ben-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 60px; } @media (max-width: 760px) { .ben-grid { grid-template-columns: 1fr; } } .ben { display: flex; gap: 22px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .2s ease, box-shadow .25s ease; } .ben:hover { border-color: oklch(0.85 0.02 245); box-shadow: var(--shadow-sm); } .ben .no { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--blue-ink); flex-shrink: 0; padding-top: 4px; } .ben h3 { font-size: 20px; font-weight: 700; } .ben p { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-soft); } /* ---------- WHY ---------- */ .why { background: var(--surface); border-top: 1px solid var(--line-soft); } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 60px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } @media (max-width: 880px) { .why-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .why-grid { grid-template-columns: 1fr; } } .why-cell { padding: 34px 30px; border-right: 1px solid var(--line); background: var(--surface); transition: background .2s ease; } .why-grid .why-cell:last-child { border-right: none; } @media (max-width: 880px) { .why-cell:nth-child(2n) { border-right: none; } .why-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); } } .why-cell:hover { background: var(--tint-teal); } .why-cell .big { font-size: clamp(34px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); } .why-cell .big .u { font-size: 0.5em; color: var(--teal-ink); font-weight: 600; } .why-cell h3 { font-size: 17px; font-weight: 700; margin-top: 14px; } .why-cell p { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-soft); } /* ---------- PROCESS ---------- */ .proc-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 60px; counter-reset: step; } @media (max-width: 900px) { .proc-steps { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 520px) { .proc-steps { grid-template-columns: 1fr; } } .proc { position: relative; padding: 28px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .proc .step-n { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 24px; font-size: 34px; background: var(--navy); color: var(--blue-bright); box-shadow: 0 8px 20px oklch(0.30 0.090 250 / 0.30); } .proc .step-no { position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: var(--ink-faint); } .proc h3 { font-size: 17px; font-weight: 700; } .proc p { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); } .proc:not(:last-child)::after { content: ""; position: absolute; top: 66px; right: -10px; width: 14px; height: 1.5px; background: var(--line); } @media (max-width: 900px) { .proc::after { display: none; } } /* ---------- CTA ---------- */ .cta { position: relative; overflow: hidden; background: radial-gradient(100% 120% at 80% 0%, oklch(0.42 0.080 245 / 0.55), transparent 55%), radial-gradient(90% 100% at 0% 100%, oklch(0.62 0.110 240 / 0.30), transparent 55%), linear-gradient(180deg, var(--navy-2), var(--navy-3)); color: var(--on-dark); } .cta::before { content:""; position:absolute; inset:0; background-image: linear-gradient(oklch(0.97 0.006 235 / 0.04) 1px, transparent 1px), linear-gradient(90deg, oklch(0.97 0.006 235 / 0.04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(100% 100% at 50% 0%, #000, transparent 75%); } .cta-inner { position: relative; z-index: 2; text-align: center; max-width: 740px; margin-inline: auto; } .cta h2 { font-size: clamp(34px, 5.5vw, 60px); font-weight: 800; letter-spacing: -0.03em; margin-top: 22px; text-wrap: balance; } .cta .glow { background: linear-gradient(180deg, #fff, var(--blue-bright)); -webkit-background-clip: text; background-clip: text; color: transparent; } .cta p { font-size: clamp(17px, 1.9vw, 20px); color: var(--on-dark-soft); margin-top: 22px; text-wrap: pretty; } .cta-actions { display: flex; gap: 14px; justify-content: center; margin-top: 38px; flex-wrap: wrap; } .cta-phone { display: inline-flex; align-items: center; gap: 11px; margin-top: 24px; font-size: clamp(20px, 2.6vw, 27px); font-weight: 800; color: var(--on-dark); letter-spacing: .01em; transition: transform .2s ease; } .cta-phone i { font-size: 0.74em; color: var(--blue-bright); } .cta-phone b { color: var(--gold); } .cta-phone:hover { transform: translateY(-2px); } .cta-phone:hover b { text-decoration: underline; text-underline-offset: 3px; } .cta-note { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--on-dark-faint); margin-top: 22px; } /* ---------- FOOTER (company-focused) ---------- */ .footer { position: relative; background: var(--navy-3); color: var(--on-dark-soft); padding-block: 66px 38px; } .footer::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; background: linear-gradient(90deg, var(--blue), var(--gold)); } .footer-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(40px, 6vw, 72px); align-items: start; } @media (max-width: 820px) { .footer-top { grid-template-columns: 1fr; gap: 44px; } } .footer-brand { max-width: 460px; } .footer-brand .logo-chip { display: inline-block; background: #fff; padding: 22px 28px; border-radius: 16px; margin-bottom: 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.22); } .footer-brand .logo-chip img { height: 104px; width: auto; display: block; } .footer-brand .co-jp { font-family: 'Noto Serif JP', serif; font-size: 13px; letter-spacing: 0.12em; color: var(--gold); margin: 0 0 10px; } .footer-brand p { font-size: 14.5px; color: var(--on-dark-faint); line-height: 1.7; } .footer-social { display: flex; gap: 12px; margin-top: 22px; } .footer-social a { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 17px; color: var(--on-dark); background: oklch(0.97 0.006 235 / 0.08); border: 1px solid oklch(0.97 0.006 235 / 0.16); transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease; } .footer-social a:hover { background: var(--blue); color: #fff; border-color: transparent; transform: translateY(-2px); } .footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; } @media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr; gap: 28px; } } .footer-col h5 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; } .fc-item { margin-bottom: 15px; } .fc-item span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-faint); margin-bottom: 3px; } .fc-item a, .fc-item p { display: block; font-size: 15px; color: var(--on-dark); font-weight: 500; margin: 0; line-height: 1.5; transition: color .18s ease; } .fc-item a:hover { color: var(--gold); } .footer-bot { margin-top: 48px; padding-top: 24px; border-top: 1px solid oklch(0.97 0.006 235 / 0.1); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--on-dark-faint); } .footer-bot .tag { font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; } /* ---------- reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ===== Japanese accents & brand moments ===== */ .kanji { font-family: 'Noto Serif JP', serif; font-weight: 600; } .eyebrow .kanji { color: var(--gold-ink); margin-right: 7px; letter-spacing: .04em; } .eyebrow.on-dark .kanji { color: var(--gold); } .nav-brand .wm.co { padding-left: 13px; border-left: 1px solid var(--line); } .nav-brand .wm.co b { font-size: 12.5px; font-weight: 800; letter-spacing: .01em; color: var(--ink); line-height: 1.12; } .nav-brand .wm.co span { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--ink-faint); text-transform: uppercase; } @media (max-width: 1080px) { .nav-brand .wm.co { display: none; } } /* gold seal / hanko */ .seal { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: 'Noto Serif JP', serif; font-weight: 700; line-height: 1.08; font-size: 23px; color: var(--gold-ink); background: oklch(0.975 0.030 95); border: 2px solid var(--gold); position: relative; flex-shrink: 0; } .seal::before { content:''; position:absolute; inset:6px; border-radius:50%; border:1px solid var(--gold); opacity:.55; } .seal.on-dark { color: var(--gold); background: oklch(0.25 0.085 252 / 0.5); border-color: oklch(0.84 0.160 95 / 0.75); } /* hero brand card (product logo in content) */ .brand-card { position: relative; background: #fff; border-radius: 22px; padding: 38px 36px 30px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; } .brand-card::after { content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background: linear-gradient(180deg, var(--blue), var(--gold)); } .brand-card .jp-vert { position:absolute; top:24px; right:24px; writing-mode: vertical-rl; font-family:'Noto Serif JP', serif; font-weight:600; font-size:14px; letter-spacing:.22em; color: var(--gold-ink); opacity:.85; } .brand-card .brand-logo { width: min(74%, 300px); height:auto; display:block; margin: 4px 0 0; } .brand-card .brand-sub { font-family:'Noto Serif JP', serif; font-size:13px; letter-spacing:.1em; color: var(--ink-faint); margin-top:16px; } .brand-card .card-divider { height:1px; background: var(--line); margin: 24px 0 20px; } .brand-card .card-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; } .brand-card .card-specs { display:flex; gap:26px; } .brand-card .cspec b { display:block; font-size:21px; font-weight:800; color: var(--ink); letter-spacing:-.01em; } .brand-card .cspec b i { font-style:normal; font-family:'Noto Serif JP',serif; font-size:.7em; color: var(--gold-ink); } .brand-card .cspec span { font-family: var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); } .brand-card .seal { width:74px; height:74px; font-size:17px; } /* full-bleed background image slots */ .bgslot { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-radius:0; z-index:0; } .bg-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; } /* Japan origin band */ .jpband { position:relative; overflow:hidden; color: var(--ink); padding-block: clamp(78px, 10vw, 132px); } .jpband-overlay { background: linear-gradient(105deg, oklch(0.985 0.012 235 / 0.95) 0%, oklch(0.965 0.028 230 / 0.90) 52%, oklch(0.955 0.034 233 / 0.84) 100%); } .jpband-inner { position:relative; z-index:2; display:grid; grid-template-columns:auto 1fr auto; gap: clamp(22px,4vw,56px); align-items:center; } .jpband-vert { writing-mode: vertical-rl; font-family:'Noto Serif JP',serif; font-weight:600; font-size: clamp(24px,3.2vw,38px); letter-spacing:.28em; color: var(--gold-ink); opacity:.9; align-self:stretch; } .jpband-copy { max-width: 720px; } .jpband-points { display:flex; gap: clamp(20px,3vw,40px); flex-wrap:wrap; margin-top:30px; } .jpband-point { display:flex; flex-direction:column; gap:2px; } .jpband-point .kanji { font-size:30px; color: var(--gold-ink); line-height:1; } .jpband-point b { font-size:16px; font-weight:700; margin-top:6px; } .jpband-point i { font-style:normal; font-size:12.5px; color: var(--ink-faint); } .jpband-seal { width:120px; height:120px; font-size:30px; } @media (max-width: 920px){ .jpband-inner{ grid-template-columns:1fr; } .jpband-vert, .jpband-seal{ display:none; } } /* CTA overlay keeps green tone over a dropped photo */ .cta::before { z-index:1; } .cta-overlay { background: radial-gradient(100% 120% at 80% 0%, oklch(0.42 0.080 245 / 0.55), transparent 55%), radial-gradient(90% 100% at 0% 100%, oklch(0.62 0.110 240 / 0.30), transparent 55%), linear-gradient(180deg, oklch(0.235 0.085 252 / 0.92), oklch(0.175 0.070 254 / 0.95)); } /* ============================================================ HEALTH WARNING — "nỗi đau / nguy hại" ============================================================ */ .warn { background: linear-gradient(180deg, var(--surface), var(--danger-tint)); } /* full-bleed warning banner photo */ .warn-banner { position: relative; margin-top: 48px; width: 100%; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 7; min-height: 280px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); } .warn-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .warn-banner-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, oklch(0.24 0.02 65 / 0.80) 0%, oklch(0.26 0.02 65 / 0.48) 42%, transparent 72%), linear-gradient(0deg, oklch(0.22 0.02 65 / 0.48), transparent 55%); } .warn-banner-text { position: absolute; left: 0; bottom: 0; padding: clamp(24px, 4vw, 46px); max-width: 600px; color: #fff; } .warn-banner-text .k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 14px; border-radius: 100px; margin-bottom: 16px; background: var(--danger-ink); color: #fff; font-weight: 600; box-shadow: 0 6px 18px oklch(0.54 0.12 62 / 0.40); } .warn-banner-text p { margin: 0; font-size: clamp(17px, 2.2vw, 23px); font-weight: 600; line-height: 1.45; text-wrap: balance; text-shadow: 0 1px 12px oklch(0.15 0.03 28 / 0.5); } /* hazard cards */ .warn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; } @media (max-width: 900px) { .warn-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .warn-grid { grid-template-columns: 1fr; } } .warn-card { position: relative; padding: 28px 24px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--danger); border-radius: var(--radius); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .25s ease; } .warn-card:hover { box-shadow: var(--shadow); } .warn-ic { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 18px; display: grid; place-items: center; font-size: 26px; color: var(--danger-ink); background: var(--danger-tint); border: 1px solid oklch(0.58 0.13 64 / 0.22); } .warn-card h3 { font-size: 17px; font-weight: 700; line-height: 1.3; } .warn-card p { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); flex: 1; } .warn-card .tag.danger { margin-top: 16px; color: var(--danger-ink); font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; } .who-badge { position: absolute; top: -11px; right: 16px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .03em; padding: 5px 11px; border-radius: 100px; background: var(--danger-tint); color: var(--danger-ink); border: 1px solid oklch(0.74 0.135 70 / 0.5); box-shadow: var(--shadow-sm); } /* closing bridge to the solution */ .warn-foot { text-align: center; margin: 40px auto 0; max-width: 620px; font-size: 16px; color: var(--ink-soft); text-wrap: pretty; } .warn-foot a { color: var(--blue-ink); font-weight: 600; white-space: nowrap; } .warn-foot .arrow { transition: transform .2s ease; display: inline-block; } .warn-foot a:hover .arrow { transform: translateX(4px); } /* 2 nhóm: nhà mới / nhà đã qua sử dụng */ .warn-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; } @media (max-width: 760px) { .warn-groups { grid-template-columns: 1fr; } } .warn-group { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--danger); border-radius: var(--radius); padding: 26px 28px 24px; } .warn-group-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); } .warn-group-ic { width: 50px; height: 50px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; font-size: 22px; color: var(--danger-ink); background: var(--danger-tint); border: 1px solid oklch(0.58 0.13 64 / 0.22); } .warn-group-head h3 { font-size: 18px; font-weight: 700; } .warn-group-head p { font-size: 12.5px; color: var(--ink-faint); margin: 3px 0 0; } .smell-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .smell-list li { display: flex; align-items: center; gap: 13px; } .smell-ic { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-size: 16px; color: var(--danger-ink); background: var(--danger-tint); border: 1px solid oklch(0.58 0.13 64 / 0.18); } .smell-list li div b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.2; } .smell-list li div span { display: block; font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; } /* ============================================================ PROJECTS — dự án đã thực hiện ============================================================ */ .projects { background: var(--surface); } .proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; } @media (max-width: 900px) { .proj-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .proj-grid { grid-template-columns: 1fr; } } .proj-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } .proj-card:hover { box-shadow: var(--shadow); } .proj-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .proj-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,.84,.28,1); } .proj-card:hover .proj-media img { transform: scale(1.05); } .proj-result { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 1px; padding: 9px 14px; border-radius: 12px; background: oklch(0.30 0.090 250 / 0.90); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: var(--shadow); } .proj-result b { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: .01em; } .proj-result i { font-style: normal; font-size: 11px; color: var(--blue-bright); letter-spacing: .02em; } .proj-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; } .proj-body .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); } .proj-body h3 { font-size: 18px; font-weight: 700; margin-top: 8px; } .proj-body p { font-size: 13.5px; color: var(--ink-soft); margin: 10px 0 0; } /* ============================================================ CERTIFICATE — chứng nhận & ủy quyền ============================================================ */ /* ---- ABOUT — giới thiệu công ty ---- */ .about { background: var(--band); } .about-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; } @media (max-width: 820px) { .about-wrap { grid-template-columns: 1fr; gap: 28px; } } .about-media { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; } .about-media img { width: 100%; height: auto; max-width: 230px; } @media (max-width: 820px) { .about-media { max-width: 400px; margin-inline: auto; } } .about-parent { font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; text-align: center; margin: 0; } .about-parent i { color: var(--blue); } .about-copy p { margin-top: 14px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; } .about-copy .lead { color: var(--ink); } .about-values { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .about-values span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--blue-ink); background: #fff; border: 1px solid var(--line); padding: 9px 16px; border-radius: 100px; } .about-values span i { color: var(--blue); } .certs { background: var(--band); padding-block: clamp(54px, 7vw, 88px); } .cert-wrap { display: grid; grid-template-columns: minmax(210px, 290px) 1fr; gap: clamp(32px, 5vw, 60px); align-items: center; } @media (max-width: 760px) { .cert-wrap { grid-template-columns: 1fr; gap: 32px; justify-items: center; } } .cert-doc { position: relative; display: block; justify-self: center; max-width: 290px; width: 100%; background: #fff; padding: 10px; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); transition: transform .25s ease, box-shadow .25s ease; } .cert-doc:hover { transform: translateY(-4px); } .cert-doc img { width: 100%; height: auto; display: block; border-radius: 6px; } .cert-zoom { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 100px; background: oklch(0.30 0.090 250 / 0.92); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s ease; } .cert-doc:hover .cert-zoom { opacity: 1; } .cert-copy { max-width: 620px; } .cert-points { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 13px; } .cert-points li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; color: var(--ink-soft); } .cert-points li i { color: var(--blue); margin-top: 3px; flex-shrink: 0; } /* ============================================================ MOTION — refined & intentional (Japanese precision) Hide-then-show states are gated behind body.anim-on, which JS adds ONLY when prefers-reduced-motion: no-preference. So no-JS and reduced-motion users always see the final composed layout. ============================================================ */ .reveal { transition: opacity 0.9s cubic-bezier(.16,.84,.28,1), transform 0.9s cubic-bezier(.16,.84,.28,1); } /* eyebrow rule-line draws in; kanji eases in */ body.anim-on .reveal .eyebrow::before, body.anim-on .reveal .eyebrow.center::after { transform: scaleX(0); transform-origin: left center; transition: transform .8s cubic-bezier(.16,.84,.28,1) .15s; } body.anim-on .reveal.in .eyebrow::before, body.anim-on .reveal.in .eyebrow.center::after { transform: scaleX(1); } body.anim-on .reveal .eyebrow .kanji { opacity: 0; transform: translateX(-5px); transition: opacity .7s ease .12s, transform .7s cubic-bezier(.16,.84,.28,1) .12s; } body.anim-on .reveal.in .eyebrow .kanji { opacity: 1; transform: none; } /* large figures rise + sharpen as their card reveals */ body.anim-on .reveal .big { opacity: 0; transform: translateY(12px); transition: opacity .9s ease .12s, transform .9s cubic-bezier(.16,.84,.28,1) .12s; } body.anim-on .reveal.in .big { opacity: 1; transform: none; } /* gold seal settles in with a precise rotate */ body.anim-on .reveal .seal { transform: scale(.72) rotate(-10deg); opacity: 0; transition: transform .85s cubic-bezier(.22,1.1,.32,1) .2s, opacity .6s ease .2s; } body.anim-on .reveal.in .seal { transform: none; opacity: 1; } /* ---- HERO entrance (on load) ---- */ body.anim-on .hero-copy > * { opacity: 0; transform: translateY(16px); transition: opacity 1s cubic-bezier(.16,.84,.28,1), transform 1s cubic-bezier(.16,.84,.28,1); } body.anim-on.loaded .hero-copy > * { opacity: 1; transform: none; } body.anim-on.loaded .hero-copy > *:nth-child(1){ transition-delay:.08s } body.anim-on.loaded .hero-copy > *:nth-child(2){ transition-delay:.18s } body.anim-on.loaded .hero-copy > *:nth-child(3){ transition-delay:.28s } body.anim-on.loaded .hero-copy > *:nth-child(4){ transition-delay:.38s } body.anim-on.loaded .hero-copy > *:nth-child(5){ transition-delay:.48s } body.anim-on.loaded .hero-copy > *:nth-child(6){ transition-delay:.58s } /* brand card: one-time light sweep */ .brand-card::before { content:''; position:absolute; top:0; left:-65%; width:55%; height:100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-16deg); opacity:0; pointer-events:none; z-index:3; } /* card image gently zooms on hover (container clips via overflow:hidden) */ .app .slot-img, .space .slot-img { transition: transform .6s cubic-bezier(.16,.84,.28,1); transform-origin: center center; } .app:hover .slot-img, .space:hover .slot-img { transform: scale(1.05); } /* ---- PHOTOCATALYSIS diagram: sequential activation ---- */ body.anim-on .diagram .dstep { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,.84,.28,1), transform .7s cubic-bezier(.16,.84,.28,1); } body.anim-on .diagram.lit .dstep { opacity: 1; transform: none; } body.anim-on .diagram.lit .dstep:nth-child(2){ transition-delay:.22s } body.anim-on .diagram.lit .dstep:nth-child(3){ transition-delay:.44s } body.anim-on .diagram.lit .dstep:nth-child(4){ transition-delay:.66s } body.anim-on .diagram .orb { transform: scale(.72); opacity:.5; transition: transform .65s cubic-bezier(.22,1.15,.32,1), opacity .5s ease, box-shadow .6s ease; } body.anim-on .diagram.lit .orb { transform: scale(1); opacity:1; } body.anim-on .diagram.lit .dstep:nth-child(1) .orb{ transition-delay:.12s } body.anim-on .diagram.lit .dstep:nth-child(2) .orb{ transition-delay:.34s } body.anim-on .diagram.lit .dstep:nth-child(3) .orb{ transition-delay:.56s } body.anim-on .diagram.lit .dstep:nth-child(4) .orb{ transition-delay:.78s } body.anim-on .diagram .dstep::after { opacity: 0; transition: opacity .5s ease; } body.anim-on .diagram.lit .dstep:nth-child(1)::after{ opacity:1; transition-delay:.40s } body.anim-on .diagram.lit .dstep:nth-child(2)::after{ opacity:1; transition-delay:.62s } body.anim-on .diagram.lit .dstep:nth-child(3)::after{ opacity:1; transition-delay:.84s } /* ---- PROCESS: step pops + connector draws ---- */ body.anim-on .proc .step-n { transform: scale(.6); opacity:0; transition: transform .55s cubic-bezier(.22,1.15,.32,1) .08s, opacity .4s ease .08s; } body.anim-on .proc.in .step-n { transform: none; opacity:1; } body.anim-on .proc::after { transform: scaleX(0); transform-origin:left center; transition: transform .5s ease .25s; } body.anim-on .proc.in::after { transform: scaleX(1); } @media (prefers-reduced-motion: no-preference) { /* hero ambient glow breathes */ .hero::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(58% 48% at 78% 12%, oklch(.66 .14 238 / .12), transparent 62%); } body.anim-on .hero::after { animation: heroBreath 8.5s ease-in-out infinite; } @keyframes heroBreath { 0%,100%{ opacity:.55; transform: scale(1) } 50%{ opacity:1; transform: scale(1.07) } } /* light sweep fires once after load */ body.anim-on.loaded .brand-card::before { animation: cardSweep 1.5s ease 1.05s 1 both; } @keyframes cardSweep { 0%{ left:-65%; opacity:0 } 12%{ opacity:.85 } 100%{ left:125%; opacity:0 } } /* sun & water orbs keep a gentle pulse after activation */ body.anim-on .diagram.lit .dstep.s1 .orb { animation: sunPulse 4.5s ease-in-out 1.2s infinite; } body.anim-on .diagram.lit .dstep.s4 .orb { animation: waterPulse 5s ease-in-out 1.7s infinite; } @keyframes sunPulse { 0%,100%{ box-shadow: 0 0 36px oklch(.84 .16 95 / .5) } 50%{ box-shadow: 0 0 60px oklch(.84 .16 95 / .82) } } @keyframes waterPulse { 0%,100%{ box-shadow: 0 0 30px oklch(.68 .120 230 / .45) } 50%{ box-shadow: 0 0 52px oklch(.68 .120 230 / .72) } } } /* ===== EXPERIENCE — felt cleanliness (interactive purify) ===== */ .feel{ background: radial-gradient(120% 80% at 50% -12%, var(--tint-teal), transparent 60%), linear-gradient(180deg, #ffffff, var(--tint-blue)); } /* before / after — 2 ảnh đầy đủ cạnh nhau (giữ nguyên, không cắt) */ .ba-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 2.5vw, 30px); align-items: center; margin-top: 48px; } @media (max-width: 760px) { .ba-compare { grid-template-columns: 1fr; gap: 18px; } } .ba-item { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); } .ba-item img { width: 100%; height: auto; display: block; } .ba-tag { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 6px 13px; border-radius: 100px; color: #fff; box-shadow: var(--shadow-sm); } .ba-tag.before { background: var(--danger-ink); } .ba-tag.after { background: var(--blue); } .ba-arrow { display: flex; flex-direction: column; align-items: center; gap: 12px; } .ba-badge { position: relative; width: clamp(96px, 12vw, 128px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 50%; color: #fff; background: linear-gradient(150deg, var(--blue-bright), var(--blue) 52%, var(--teal)); box-shadow: 0 12px 30px oklch(0.56 0.145 245 / 0.42), inset 0 1px 0 oklch(1 0 0 / 0.28); } /* vòng sáng lan toả quanh badge */ .ba-badge::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--blue-bright); opacity: .5; } .ba-badge-ico { font-size: clamp(15px, 1.6vw, 18px); opacity: .92; margin-bottom: 1px; } .ba-badge-num { font-family: var(--mono); font-weight: 800; font-size: clamp(26px, 3.4vw, 34px); line-height: 1; letter-spacing: -.02em; } .ba-badge-num b { font-size: .55em; font-weight: 700; margin-left: 1px; vertical-align: .12em; } .ba-badge-label { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-ink); } @media (prefers-reduced-motion: no-preference) { .ba-badge { animation: baFloat 4s ease-in-out infinite; } .ba-badge::before { animation: baPulse 2.6s ease-out infinite; } .ba-badge-ico { animation: baBob 1.8s ease-in-out infinite; } @keyframes baFloat { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } } @keyframes baPulse { 0%{ transform: scale(1); opacity:.55 } 70%{ transform: scale(1.28); opacity:0 } 100%{ opacity:0 } } @keyframes baBob { 0%,100%{ transform: translateY(-2px) } 50%{ transform: translateY(2px) } } } .ba-note { text-align: center; margin-top: 16px; font-size: 11.5px; color: var(--ink-faint); } .scene{ position:relative; margin-top:48px; border-radius:22px; overflow:hidden; aspect-ratio:1080/686; min-height:230px; box-shadow:var(--shadow-lg); border:1px solid var(--line); user-select:none; touch-action:pan-y; cursor:ew-resize; } .scene .slot-img{ position:absolute; inset:0; width:100%; height:100%; border-radius:0; --is-bg:#eaf4ee; } .scene .after-img{ z-index:1; } .scene .before-img{ position:absolute; inset:0; z-index:2; clip-path: inset(0 calc(100% - var(--x,50%)) 0 0); box-shadow: 1px 0 0 oklch(.84 .16 95 / .55); } .scene .sheen{ z-index:3; clip-path: inset(0 0 0 var(--x,50%)); } .scene .ovl{ position:absolute; inset:0; pointer-events:none; } .scene .fresh{ z-index:1; clip-path: inset(0 0 0 var(--x,50%)); background: radial-gradient(72% 90% at 80% 18%, oklch(.86 .105 230 / .20), transparent 60%); } .scene .haze{ z-index:2; clip-path: inset(0 calc(100% - var(--x,50%)) 0 0); -webkit-backdrop-filter: grayscale(.6) sepia(.28) brightness(.8) blur(2.5px); backdrop-filter: grayscale(.6) sepia(.28) brightness(.8) blur(2.5px); background: linear-gradient(180deg, oklch(.55 .03 80 / .30), oklch(.42 .03 80 / .42)); } .scene .dust{ position:absolute; inset:0; } .scene .dust i{ position:absolute; border-radius:50%; background: oklch(.62 .03 80 / .6); filter: blur(.4px); } .scene .sparkle{ position:absolute; inset:0; } .scene .sparkle i{ position:absolute; background: radial-gradient(circle, #fff 0 30%, oklch(.86 .12 234 / .8) 35%, transparent 70%); clip-path: polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%); } .scene .lab{ position:absolute; top:16px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:7px 13px; border-radius:100px; z-index:4; white-space:nowrap; } .scene .lab.before{ left:16px; background: oklch(.28 .02 80 / .6); color:#f2ecdf; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } .scene .lab.after{ right:16px; background:#fff; color: var(--blue-ink); box-shadow: var(--shadow-sm); } .scene .handle{ position:absolute; top:0; bottom:0; left: var(--x,50%); width:2px; transform:translateX(-1px); background: linear-gradient(180deg, var(--gold), #fff 50%, var(--gold)); z-index:5; } .scene .grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; border-radius:50%; background:#fff; box-shadow:var(--shadow-lg); display:grid; place-items:center; color: var(--blue-ink); font-size:17px; border:1px solid var(--line); } .scene .grip::before{ content:'\2194'; } .feel .hint{ text-align:center; margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color: var(--ink-faint); } /* Chỉ số tiêu chuẩn — stat cards */ .std-metrics { margin-top: clamp(36px, 5vw, 56px); } .std-head { margin-bottom: clamp(20px, 3vw, 28px); text-align: center; } .std-title { display: inline-flex; align-items: baseline; gap: 10px; margin: 0; font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; color: var(--ink); } .std-title .kanji { font-family: var(--mono); font-size: .7em; font-weight: 500; color: var(--blue-ink); letter-spacing: .02em; } .std-title::after, .std-title::before { content: ""; display: inline-block; width: clamp(24px, 5vw, 46px); height: 2px; background: linear-gradient(90deg, transparent, var(--line-soft) 40%, var(--blue) 100%); align-self: center; } .std-title::after { transform: scaleX(-1); } .std-sub { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); } .std-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.5vw, 26px); max-width: 780px; margin-inline: auto; } @media (max-width: 640px) { .std-grid { grid-template-columns: 1fr; } } .std-card { position: relative; text-align: center; padding: clamp(24px, 3vw, 34px) clamp(18px, 3vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .std-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--teal)); } .std-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklab, var(--blue) 30%, var(--line)); } .std-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%; background: var(--tint-blue); color: var(--blue-ink); font-size: 22px; } .std-name { font-weight: 700; color: var(--ink); font-size: 16px; letter-spacing: .01em; } .std-name span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--ink-faint); text-transform: uppercase; } .std-value { margin: 14px 0 10px; font-family: var(--mono); font-weight: 700; font-size: clamp(34px, 6vw, 46px); line-height: 1; color: var(--blue-ink); } .std-value .lt { font-size: .55em; vertical-align: 0.18em; color: var(--ink-faint); margin-right: 2px; } .std-value .unit { font-size: .42em; font-weight: 600; color: var(--ink-soft); margin-left: 4px; letter-spacing: .02em; } .std-note { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); } .std-note::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: var(--blue); } /* hero clean-air motes */ /* canvas 3D nền hero (chỉ trang VI) — mờ dần bên trái để chữ vẫn đọc rõ */ .hero-3d { position: absolute; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.45) 18%, #000 36%, #000 66%, rgba(0,0,0,.5) 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 4%, rgba(0,0,0,.45) 18%, #000 36%, #000 66%, rgba(0,0,0,.5) 86%, transparent 100%); } @media (max-width: 940px) { .hero-3d { opacity: .5; } } .hero .motes{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; } .hero .motes i{ position:absolute; bottom:-12px; border-radius:50%; background: radial-gradient(circle, oklch(.60 .14 238 / .45), oklch(.60 .14 238 / 0)); } .hero .motes i:nth-child(3n){ background: radial-gradient(circle, oklch(.72 .15 92 / .50), oklch(.72 .15 92 / 0)); } /* gold sparkles */ .hero .motes i:nth-child(7n){ background: radial-gradient(circle, oklch(.62 .15 238 / .45), oklch(.62 .15 238 / 0)); } @media (prefers-reduced-motion: no-preference){ @keyframes dustFloat{ 0%{transform:translateY(0)} 50%{transform:translateY(-15px)} 100%{transform:translateY(0)} } body.anim-on .scene .dust i{ animation: dustFloat var(--d,7s) ease-in-out var(--dl,0s) infinite; } @keyframes twinkle{ 0%,100%{opacity:.12; transform:scale(.6)} 50%{opacity:1; transform:scale(1)} } body.anim-on .scene .sparkle i{ animation: twinkle var(--d,3s) ease-in-out var(--dl,0s) infinite; } @keyframes moteRise{ 0%{transform:translateY(0) translateX(0); opacity:0} 12%{opacity:.85} 88%{opacity:.6} 100%{transform:translateY(-112%) translateX(var(--mx,12px)); opacity:0} } body.anim-on .hero .motes i{ animation: moteRise var(--d,15s) linear var(--dl,0s) infinite; } } /* ============ FAQ (Câu hỏi thường gặp) ============ */ .faq { background: var(--surface); border-top: 1px solid var(--line-soft); } .faq-list { max-width: 880px; margin: clamp(36px, 5vw, 56px) auto 0; display: grid; gap: 12px; } .faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease; } .faq-item:hover { border-color: var(--line); box-shadow: var(--shadow); } .faq-item[open] { border-color: color-mix(in oklch, var(--blue) 40%, var(--line)); box-shadow: var(--shadow); } .faq-q { display: flex; align-items: flex-start; gap: 14px; padding: clamp(16px, 2.2vw, 20px) clamp(18px, 2.4vw, 24px); cursor: pointer; list-style: none; font-weight: 600; font-size: clamp(15px, 1.6vw, 16.5px); line-height: 1.45; color: var(--ink); } .faq-q::-webkit-details-marker { display: none; } .faq-q:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius-sm); } .faq-no { flex: none; font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: var(--blue-ink); padding-top: 2px; min-width: 2ch; } .faq-q .faq-txt { flex: 1; } .faq-ico { flex: none; width: 24px; height: 24px; margin-top: -1px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--blue-ink); transition: transform .22s ease, background .18s ease, color .18s ease; } .faq-ico::before { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; } .faq-item[open] .faq-ico { transform: rotate(45deg); background: var(--blue); color: #fff; } .faq-a { padding: 0 clamp(18px, 2.4vw, 24px) clamp(18px, 2.2vw, 22px); padding-left: calc(clamp(18px, 2.4vw, 24px) + 2ch + 14px); color: var(--ink-soft); font-size: 15px; line-height: 1.7; } .faq-a b { color: var(--ink); font-weight: 600; } @media (prefers-reduced-motion: no-preference) { .faq-item[open] .faq-a { animation: faqReveal .28s ease both; } @keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } } @media (max-width: 560px) { .faq-a { padding-left: clamp(18px, 2.4vw, 24px); } }