— #platform là , #top là . */
[id]{scroll-margin-top:88px}
/* ---------- Hover ----------
Chỉ bật trên thiết bị có con trỏ thật; máy cảm ứng không dính trạng thái hover. */
@media (hover:hover) and (pointer:fine){
/* Card sản phẩm: các chi tiết phản ứng cùng nhau, không rời rạc */
.card__id svg,
.shot,
.shot img{
transition:transform var(--dur-slow) var(--ease-spring),
box-shadow var(--dur-slow) var(--ease-spring);
}
.card:hover .card__id svg{transform:translateY(-2px) scale(1.05)}
.card:hover .shot{box-shadow:0 14px 30px -22px rgba(10,37,80,.55)}
.card:hover .shot img{transform:scale(1.04)}
/* Rê vào card → CTA ấm lên; rê thẳng vào CTA thì vẫn tô đặc như cũ */
.card--brain:hover .card__cta:not(:hover){background:rgba(10,61,145,.06)}
.card--kaimei:hover .card__cta:not(:hover){background:rgba(194,65,12,.06)}
.card--cad:hover .card__cta:not(:hover){background:rgba(21,128,61,.06)}
/* Nút: nhấc nhẹ khi trỏ, nhấn xuống khi bấm */
.btn-contact,.btn-submit{
transition:background var(--dur-fast) var(--ease-spring),
transform var(--dur-fast) var(--ease-spring),
box-shadow var(--dur-fast) var(--ease-spring);
}
.btn-contact:hover,.btn-submit:hover{
transform:translateY(-1px);
box-shadow:0 12px 24px -16px rgba(10,37,80,.8);
}
/* STEP: vạch nhấn mọc ra từ trái */
.steps li{position:relative;overflow:hidden}
.steps li::before{
content:"";position:absolute;left:0;top:0;height:3px;width:100%;
background:var(--blue);transform:scaleX(0);transform-origin:left;
transition:transform var(--dur-slow) var(--ease-spring);
}
.steps li:hover::before{transform:scaleX(1)}
/* Ô bảo mật: sáng lên rất nhẹ */
.secgrid > div{transition:background-color var(--dur) var(--ease-spring)}
.secgrid > div:hover{background:#0d2d60}
/* FAQ: dấu Q nhích sang, dòng ấm lên */
.faq li{
padding-inline:12px;margin-inline:-12px;border-radius:10px;
transition:background-color var(--dur) var(--ease-spring);
}
.faq li:hover{background:#f4f7fb}
.faq .q{transition:transform var(--dur) var(--ease-spring)}
.faq li:hover .q{transform:translateX(3px)}
/* Ô nhập: viền đậm lên trước khi focus */
.field__input:hover{border-color:var(--blue-dim)}
/* Link chân trang: gạch chân mọc ra */
.site-footer nav a{position:relative}
.site-footer nav a::after{
content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:left;
transition:transform var(--dur) var(--ease-spring);
}
.site-footer nav a:hover::after{transform:scaleX(1)}
}
/* Bấm xuống: phản hồi tức thì cho mọi thiết bị */
.btn-contact:active,.btn-submit:active,.card__cta:active{transform:translateY(1px)}
.card:active{transform:translateY(-2px)}
/* Máy cảm ứng: bỏ hiệu ứng nhấc, tránh kẹt trạng thái sau khi chạm */
@media (hover:none){
.card:hover,.steps li:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none !important;transition:none !important}
.js .reveal{opacity:1;translate:none;scale:none}
.hero__aura{display:none}
}
/* ---------- Responsive ---------- */
@media (max-width:1180px){
:root{--gutter:40px}
.site-nav{gap:20px;font-size:13px}
/* Nhường chỗ cho thanh điều hướng tiếng Nhật */
.brand__tag{display:none}
.split{grid-template-columns:260px minmax(0,1fr);gap:40px}
.contact{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px}
.pillars{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
.site-nav{
position:absolute;top:72px;left:0;right:0;
flex-direction:column;gap:0;
background:#fff;border-bottom:1px solid var(--line);
padding:8px var(--gutter) 16px;
display:none;
}
.nav-open .site-nav{display:flex}
.site-nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.site-nav a::after{display:none}
.nav-toggle{display:flex}
/* Bộ chọn ngôn ngữ được JS chuyển vào trong menu ở khổ này */
.site-nav .lang{margin-top:16px;align-self:flex-start}
.site-nav .lang__btn{min-height:44px;padding:0 16px}
.site-nav .lang__menu{left:0;right:auto}
.site-nav .lang__menu button{min-height:44px}
.products{grid-template-columns:1fr;max-width:620px;margin-inline:auto}
.split{grid-template-columns:1fr;gap:32px}
.values > div:last-child{border-bottom:0}
/* Một cột: cột trái nằm TRÊN form, dính lại thì nó đè lên form khi cuộn. */
.contact{grid-template-columns:1fr;gap:48px}
.contact__intro{position:static}
.section{padding:72px var(--gutter)}
}
@media (max-width:640px){
:root{--gutter:20px}
.site-header__inner{gap:12px}
.brand__tag{display:none}
.btn-contact{padding:10px 16px;font-size:13px}
.hero{padding-top:44px}
.hero__rule i{width:40px}
.card{padding:44px 20px 24px}
.card__addon{top:14px;right:16px}
.platform{padding:80px var(--gutter) 44px}
.platform__badge{padding:16px 28px}
.pillars{grid-template-columns:1fr;gap:16px}
.pillars li{justify-content:flex-start}
.steps{grid-template-columns:1fr}
.secgrid{grid-template-columns:1fr}
.form__row{grid-template-columns:1fr}
/* Bảng 会社概要 xếp dọc: nhãn trên, giá trị dưới, mỗi thứ dùng trọn bề ngang.
Ở màn 320px, cột nhãn 6.5rem ăn 104px trong 265px, chỉ chừa 103px cho giá trị.
display:block xoá vai trò bảng khỏi cây khả truy cập ở một số trình duyệt.
Chấp nhận đúng ở khổ này và chỉ ở khổ này: một bảng hai dòng đọc được quan
trọng hơn việc công bố "cột 1, dòng 2". */
.company{padding:20px}
.company__table,.company__table tbody,.company__table tr,
.company__table th,.company__table td{display:block;width:auto}
.company__table tr{padding-block:12px;border-top:1px solid var(--line)}
.company__table th,.company__table td{padding-block:0;border-top:0}
.company__table th{margin-bottom:4px;padding-inline-end:0}
/* Duoi 640px cot tu khoa 9rem chi con chua 159px cho chu. Xep doc, va duong
ray chuyen tu vien phai sang vien trai de tin hieu "mot dong chay" con lai. */
.values > div{grid-template-columns:1fr;row-gap:10px}
.values h3{
grid-row:auto;align-self:start;
padding-inline:14px 0;border-right:0;border-left:2px solid currentColor;
}
.site-footer{flex-direction:column;align-items:flex-start;gap:16px}
}