/* ===========================================================================
NAL Home — EXPERIMENTAL PROTOTYPE
Thu nghiem: human imagery + subtle motion + video storytelling.
KHONG dung o production. Design token lay nguyen tu Home.dc.html hien tai.
=========================================================================== */
:root {
/* --- token mau: do truc tiep tu Home.dc.html, khong tu che them mau moi --- */
--navy: #102A43;
--navy-deep: #0B2036;
--navy-ink: #0E2740;
--blue: #1B6FB3;
--blue-mid: #2C7FC0;
--blue-pale: #8FC9F5;
--amber: #F2B705;
--orange: #E8722C;
--green: #3EA874;
--ink: #2E2E2E;
--muted: #5A6B7C;
--line: #E2E8EE;
--surface: #F7F9FB;
--white: #FFFFFF;
/* --- sac xam: truoc day 5 sac nam rai rac duoi dang hex tho trong css va
412 lan trong html cac trang khac. Dat ten theo VAI TRO de sau nay doi
tong xam chi phai sua mot cho. Gia tri giu NGUYEN -> 0 thay doi thi giac. */
--line-strong: #DCE4EC; /* vien the / panel / dropdown */
--line-soft: #E8EDF2; /* ke manh trong menu */
--surface-2: #F4F7FA; /* nen rat nhat sau anh */
--surface-3: #F0F4F7; /* nen muc menu mobile */
--on-dark-muted: #C6D3E0; /* chu phu tren nen navy (footer) */
--on-dark-soft: #D2DEEA; /* chu dan tren nen navy (CTA) */
--navy-mid: #17486F; /* nac navy giua, dung cho day so lieu */
--lime: #6FA92C; /* cham thu 3 khoi 課題 */
--maxw: 1240px;
--gutter: 32px;
/* --- duong cong chuyen dong: 1 bo duy nhat cho ca trang --- */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-soft: cubic-bezier(0.40, 0.00, 0.20, 1);
--dur-1: 0.55s; /* Level 1 — vao trang, hien chu */
--dur-2: 0.95s; /* Level 2 — ke chuyen: anh, video */
--dur-3: 0.25s; /* Level 3 — tuong tac: hover, nut */
/* --- thang khoang trang: gan theo TUNG CHUYEN TIEP, khong theo section.
Do duoc truoc khi sua: moi section deu 86px tren + 86px duoi => 172px
giua MOI cap, tong 1.720px khoang trang = 18,5% chieu dai trang. --- */
--sp-hair: clamp(16px, 1.8vw, 26px); /* mot mach lien tuc: 4+4 the, cum chung minh */
--sp-tight: clamp(24px, 2.6vw, 38px); /* noi mach: 2 khoi la mot y */
--sp-base: clamp(40px, 4.2vw, 60px); /* mac dinh */
--sp-open: clamp(60px, 6.8vw, 100px);/* truoc/sau mot visual nang */
/* --- chieu cao 2 thanh DINH o dinh trang. Ba cho phu thuoc vao cap so nay:
.lnav{top}, [id]{scroll-margin-top} va .hero{margin-top/padding-top}.
Truoc day .hero chi tru 76px (quen .lnav) => header bi cat ngang boi mot
dai trang 41px o dinh trang. Khai mot cho de ba cho khong the lech nhau. */
--hdr-h: 76px; /* .hdr__in height */
--lnav-h: 41px; /* .lnav__in 40px + border-bottom 1px */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--white);
color: var(--ink);
font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
-webkit-text-size-adjust: 100%;
overflow-x: hidden; /* chan tran ngang do lop chong nhau */
/* --- NGAT DONG TIENG NHAT -----------------------------------------------
Mac dinh trinh duyet ngat tieng Nhat o gan nhu MOI ky tu, nen do duoc
nhung cho rat xau: tach giua mot tu katakana (マーケ|ティング,
シームレ|ス), va te hon la day ky tu nho xuong dau dong (ネイテ|ィブ,
アーキテクチ|ャ) — cai nay vi pham kinsoku, doc ra la loi chu khong phai
ngat dong.
- auto-phrase: ngat theo CUM TU (文節) thay vi tuy tien giua tu. Trinh
duyet chua ho tro se khong nhan gia tri nay va ve mac dinh, khong hong.
- line-break: strict: ap kinsoku chat — ー, ぁぃぅっゃゅょ, 、。 khong
duoc dung dau dong.
Dat o body de phu ca trang; voi chu latin hai thuoc tinh nay khong doi gi. */
word-break: auto-phrase;
line-break: strict;
/* VAN AN TOAN — bat buoc phai co khi dung auto-phrase: o man hep, mot cum tu
dai hon be ngang kha dung thi auto-phrase KHONG chiu cat, chu tran ra ngoai
va ca trang cuon ngang. Do duoc o 360px: scrollWidth 416/360 truoc khi them
dong nay. "anywhere" cho phep cat khi bat kha khang, "break-word" KHONG du
(do lai van 416px). */
overflow-wrap: anywhere;
}
img { display: block; max-width: 100%; }
/* header dinh (76px) + thanh nhan prototype => neo trong trang phai chua cho,
neu khong bam link o nav se nhay den cho tieu de bi header che. */
/* MAC DINH (27/28 trang, KHONG co .lnav): chi tru header + thoang 7px.
.lnav CHI ton tai o index.html (xem home-motion.js localNav()) -> dung
:has() de tu dong CONG THEM chieu cao .lnav duy nhat cho trang do, thay vi
moi trang moi phai tu nho cong/khong cong dung cong thuc (Key Insight #5,
phase-01-global-shell-and-contact.md). */
[id] { scroll-margin-top: calc(var(--hdr-h) + 7px); }
@media (max-width: 767px) { [id] { scroll-margin-top: calc(var(--hdr-h) - 1px); } }
body:has(.lnav) [id] { scroll-margin-top: calc(var(--hdr-h) + var(--lnav-h) + 7px); }
@media (max-width: 767px) { body:has(.lnav) [id] { scroll-margin-top: calc(var(--hdr-h) + var(--lnav-h) - 1px); } }
a { color: var(--navy); }
.wrap {
max-width: var(--maxw);
margin: 0 auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
.sec { padding-top: var(--pt, var(--sp-base)); padding-bottom: var(--pb, var(--sp-base)); }
.sec--tint { background: var(--surface); border-top: 1px solid var(--line); }
.sec--line { border-top: 1px solid var(--line); }
.sec--dark { background: var(--navy); color: var(--white); } /* dark band: Solutions コンセプト, ServicesModernization 背景 */
.eyebrow {
margin: 0 0 14px;
font-size: 14px; /* dong bo Home goc (proto dang 13px) */
font-weight: 700;
letter-spacing: 0.24em;
color: var(--blue);
}
.eyebrow--onDark { color: var(--blue-pale); }
.h2 {
margin: 0;
font-size: clamp(23px, 2.6vw, 34px);
line-height: 1.6;
font-weight: 700;
color: var(--navy);
}
/* Moi tieu de deu can deu dong: balance chia chu deu cho cac dong nen khong
con dong cuoi tro loi 1-2 chu (do duoc: 6 khoi mo coi -> 0). Gom mot rule
thay vi rai vao 6 khai bao h3 khac nhau trong file. */
.h2, h2, h3 { text-wrap: balance; }
/* --- THANG H2 CUA BAN HOME GOC ---------------------------------------------
Ban goc CO Y dung 5 co h2 khac nhau cho 8 section (do bang computed style
@1440px, gia tri clamp chep nguyen tu Home.dc.html). Prototype truoc day san
phang tat ca ve 34px nen 課題 va CTA doc ngang hang voi section phu, con
サービス紹介 lai to qua so voi vai tro cua no. */
.h2--sm { font-size: clamp(19px, 2vw, 26px); line-height: 1.65; } /* サービス紹介 */
.h2--bold { font-weight: 900; } /* アプローチ: giu 34px, chi doi do dam */
.lead {
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
line-height: 2;
color: var(--muted);
text-wrap: pretty;
}
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 30px;
border-radius: 999px;
border: 2px solid var(--white);
background: var(--white);
color: var(--navy);
font-size: 16px;
font-weight: 700;
text-decoration: none;
letter-spacing: 0.04em;
transition: background var(--dur-3) var(--ease-soft),
border-color var(--dur-3) var(--ease-soft),
transform var(--dur-3) var(--ease-out);
}
.btn:hover { background: var(--amber); border-color: var(--amber); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
/* =========================================================================
MOTION — 8 co che. Moi co che deu tat sach o cuoi file khi reduced-motion.
========================================================================= */
/* --- [L1] #8 text reveal theo dong: chu truot len tu sau mat na --------- */
.lines > span {
display: block;
overflow: hidden;
}
.lines > span > i {
display: block;
font-style: normal;
transform: translateY(108%);
transition: transform var(--dur-1) var(--ease-out);
transition-delay: calc(var(--i, 0) * 90ms);
}
.is-in .lines > span > i,
.lines.is-in > span > i { transform: translateY(0); }
/* --- [L1] #2 curtain reveal: tam rem truot khoi anh, thay vi fade -------
KHONG dung clip-path lam trang thai an ban dau: phan tu bi clip co dien
tich giao = 0 nen IntersectionObserver khong bao gio bao "da vao khung
nhin" -> anh ket vinh vien o trang thai an. Rem la mot phan tu con che
len, nen phan tu cha van "nhin thay duoc" voi observer.
--curtain phai bang mau NEN dang dat anh, neu khong se thay khoi mau la. */
[data-reveal] { position: relative; }
[data-reveal]::before {
content: "";
position: absolute;
inset: 0;
z-index: 4;
background: var(--curtain, var(--surface));
transform: scaleX(1);
transform-origin: right;
transition: transform var(--dur-2) var(--ease-out);
pointer-events: none;
}
[data-reveal="left"]::before { transform-origin: left; }
[data-reveal].is-in::before { transform: scaleX(0); }
/* --- [L1] khoi noi dung: truot len nhe, dung chung cho card/doan -------- */
/* VAN AN TOAN (2026-09-26): truoc day [data-rise] an vo dieu kien -> JS tat
hoac home-motion.js loi thi 51 khoi noi dung cua Home bien mat. Nay chi an
khi class .js-motion co mat, va class do do CHINH script dat vao + co co che
tu go sau khi trang load neu motion khong khoi dong duoc. */
.js-motion [data-rise] {
opacity: 0;
transform: translateY(22px);
transition: opacity var(--dur-1) var(--ease-soft),
transform var(--dur-1) var(--ease-out);
transition-delay: calc(var(--i, 0) * 80ms);
}
.js-motion [data-rise].is-in { opacity: 1; transform: none; }
/* --- [L2] #3 duotone -> mau that khi anh vao khung nhin -----------------
Ly do ton tai: bo anh NAL chenh nhau ve chat luong/anh sang. Lop duotone
navy keo tat ca ve mot he mau thuong hieu, roi nha ra mau that khi doc den.
Vua giai quyet "trong nhu stock photo", vua thanh mot cu chi ke chuyen. */
.photo { position: relative; overflow: hidden; background: var(--navy-deep); }
.photo > img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.06) brightness(0.96);
transition: filter 1.2s var(--ease-soft);
}
.photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
mix-blend-mode: color;
opacity: 1;
transition: opacity 1.2s var(--ease-soft);
pointer-events: none;
}
.photo.is-in > img { filter: none; }
.photo.is-in::after { opacity: 0; }
/* Bien the cho anh CO CHU DE LEN: giu MAU THAT cua nguoi, chi ha sang va
phu mot lop gradient navy. Ban truoc dung grayscale + phu navy 0.85 lam
mat nguoi bi khu mau -> trong lanh va so. Khu mau hop voi anh truu tuong,
khong hop voi chan dung. */
.photo--warm > img { filter: brightness(0.62) saturate(0.92); }
.photo--warm.is-in > img { filter: brightness(0.62) saturate(0.92); }
.photo--warm::after {
background: linear-gradient(100deg,
rgba(9,28,49,0.94) 0%, rgba(9,28,49,0.82) 38%,
rgba(9,28,49,0.52) 72%, rgba(9,28,49,0.34) 100%);
mix-blend-mode: normal;
opacity: 1;
}
.photo--warm.is-in::after { opacity: 1; }
/* --- [L2] #4 parallax trong khung ti le co dinh -------------------------
Anh cao hon khung 18%, JS day --py trong khoang +-9%. Khung khong doi.
Kem "image scale": anh vao khung o 1.06 roi ve 1.0 — MOT cu chi duy nhat
di cung rem, khong chong them hieu ung thu hai. */
.parallax { overflow: hidden; }
.parallax > img {
height: 118%;
transform: translate3d(0, var(--py, -9%), 0) scale(var(--ps, 1.06));
transition: transform 1.4s var(--ease-out);
will-change: transform;
}
.parallax.is-in > img { --ps: 1; }
/* --- .photo--slides: slideshow trong khung .photo (banner 私たちの取り組み) ----
Slide = ![]()
con truc tiep, xep chong absolute, chi crossfade opacity (parallax
da dung transform, khong chong Ken Burns thu hai). ::before (rem data-reveal,
z-index 4 san) va ::after (duotone) phai nam TREN cac img absolute -> z-index. */
.photo--slides > img {
position: absolute; inset: 0;
z-index: 1;
opacity: 0;
transition: opacity 1.4s var(--ease-soft), transform 1.4s var(--ease-out), filter 1.2s var(--ease-soft);
}
.photo--slides > img.is-on { opacity: 1; }
.photo--slides::after { z-index: 2; }
/* banner 私たちの取り組み: 21:9 desktop; mobile 16:9 (21:9 @335px chi cao 144px, mat nguoi ~8px) */
.photo--banner { aspect-ratio: 21 / 9; }
/* Vung bam doc VIEN trai/phai de chuyen anh — mui ten mo, ro dan khi re chuot.
Chi hien khi thiet bi co con tro that (hover: hover); tren cam ung da co vuot. */
/* Dai mep dieu huong anh — DUNG CHUNG cho hero va cac khoi .photo.
Gop hai cho lam mot (2026-09-26) de ca trang chi noi MOT thu tieng: truoc do
hero dung nut tron kinh mo, banner dung dai mep -> hai carousel tren cung
mot trang nhin nhu hai he khac nhau. */
.photo__edge, .hero__edge {
position: absolute; top: 0; bottom: 0;
z-index: 3; /* tren img (1) + duotone (2), duoi rem reveal (4) */
width: clamp(48px, 6%, 72px);
display: grid; place-items: center;
padding: 0; border: 0;
color: var(--white);
cursor: pointer;
opacity: 0.55; /* 0.38 qua chim tren anh sang (code-review 2026-09-25) */
transition: opacity var(--dur-3), background var(--dur-3);
}
/* vet toi dam toi 70% be rong nut roi moi nhat -> icon (o giua nut) luon nam tren nen toi */
/* Rieng hero: dai chay tu DUOI header + thanh chi muc xuong day khoi,
khong phu len logo. Hai so nay da khai o :root nen khong the lech. */
.hero__edge { top: calc(var(--hdr-h) + var(--lnav-h)); }
.photo__edge--prev, .hero__edge--prev { left: 0; background: linear-gradient(to right, rgba(9,28,49,0.58) 0%, rgba(9,28,49,0.42) 70%, rgba(9,28,49,0) 100%); }
.photo__edge--next, .hero__edge--next { right: 0; background: linear-gradient(to left, rgba(9,28,49,0.58) 0%, rgba(9,28,49,0.42) 70%, rgba(9,28,49,0) 100%); }
.photo__edge svg { width: 26px; height: 26px; display: block; filter: drop-shadow(0 1px 3px rgba(9,28,49,0.55)); }
/* HERO nang rieng (2026-09-26, do 2A): banner NALKATHON la anh SANG nen lop phu
toi o mep tao duoc tuong phan. Hero thi nen da la navy #0B2036 san -> phu toi
len nen toi = khong tao them gi, mui ten 26px net 1.75 nam sat mep man 1440px
thanh ra khong ai thay. Nang KICH THUOC va DO DAM, khong doi vi tri. */
.hero__edge svg { width: 36px; height: 36px; display: block;
filter: drop-shadow(0 2px 6px rgba(9,28,49,0.85)); stroke-width: 2.25; }
.hero__edge { opacity: 0.85; width: clamp(56px, 6.5%, 84px); }
.hero__edge:hover { opacity: 1; }
.photo__edge:hover, .hero__edge:hover { opacity: 1; }
.photo__edge--prev:hover, .hero__edge--prev:hover { background: linear-gradient(to right, rgba(9,28,49,0.72) 0%, rgba(9,28,49,0.52) 70%, rgba(9,28,49,0) 100%); }
.photo__edge--next:hover, .hero__edge--next:hover { background: linear-gradient(to left, rgba(9,28,49,0.72) 0%, rgba(9,28,49,0.52) 70%, rgba(9,28,49,0) 100%); }
.photo__edge:focus-visible, .hero__edge:focus-visible { opacity: 1; outline: 2px solid var(--white); outline-offset: -4px; }
@media (max-width: 767px) { .photo__edge { width: 44px; opacity: 0.62; } .photo__edge svg, .hero__edge svg { width: 22px; height: 22px; } }
/* MOBILE: BO HAN dai mep o hero (do 2026-09-26: chong len chu tieu de 24px).
Man 360px chi rong 360 ma hai dai an 88 -> vua che chu vua an dat.
Bo di KHONG mat chuc nang nao: hero van tu doi anh 4 giay/lan, van vuot
ngang duoc (data-swipe-scope="hero"), va 6 cham o duoi van bam duoc
(34x44px moi cham — dat chuan vung cham 44px).
Khoi .photo (banner NALKATHON) KHONG co chu de len anh nen van giu dai mep. */
@media (max-width: 767px) { .hero__edge { display: none; } }
@media (max-width: 767px) { .photo--banner { aspect-ratio: 16 / 9; } }
/* =========================================================================
HEADER — dung chung 28 trang qua partials/site-nav.html (stamp-partials.py).
Mac dinh TRANG SOLID (khop SiteNav goc, an toan tren moi trang). Home dung
them modifier .hdr--home (trong suot tren hero, nen mo dan khi cuon).
========================================================================= */
.hdr {
position: sticky;
top: 0;
z-index: 50;
background: var(--white);
border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--hdr-h); position: relative; }
.hdr__logo-link { display: flex; align-items: center; flex: 0 0 auto; min-height: 44px; }
.hdr__logo { height: 43.7px; width: auto; display: block; }
@media (max-width: 360px) {
.hdr__logo { height: 30px; }
}
.hdr__nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 2vw, 28px); }
.hdr__nav > a, .hdr__drop > a {
position: relative;
color: var(--ink);
font-size: 15px;
font-weight: 700;
text-decoration: none;
padding: 6px 0;
min-height: 44px;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
/* [L3] gach chan chay ra tu trai — chi o hover, khong tu dong */
.hdr__nav > a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 2px;
background: var(--amber);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-3) var(--ease-out);
}
.hdr__nav > a:hover { color: var(--blue); }
.hdr__nav > a:hover::after { transform: scaleX(1); }
.hdr__drop-arrow { font-size: 12px; color: var(--muted); }
.hdr__cta {
padding: 11px 22px;
font-size: 15px;
border-radius: 999px;
border: 2px solid var(--navy);
background: var(--navy);
color: var(--white);
text-decoration: none;
font-weight: 700;
white-space: nowrap;
transition: background var(--dur-3), border-color var(--dur-3);
}
.hdr__cta:hover { background: var(--blue); border-color: var(--blue); }
/* --- dropdown ソリューション/サービス: thuan CSS :hover/:focus-within, khong JS --- */
.hdr__drop { position: relative; display: flex; align-items: center; }
.hdr__drop-panel {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
padding-top: 18px; min-width: 360px; z-index: 70;
opacity: 0; visibility: hidden;
transition: opacity var(--dur-3) var(--ease-out);
}
.hdr__drop-panel--wide { min-width: 400px; }
.hdr__drop:hover .hdr__drop-panel, .hdr__drop:focus-within .hdr__drop-panel { opacity: 1; visibility: visible; }
.hdr__drop-panel { background: var(--white); border: 1px solid var(--line-strong); box-shadow: 0 12px 32px rgba(16, 42, 67, 0.12); padding: 10px 0; border-radius: 4px; }
.hdr__drop-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 26px; text-decoration: none; }
.hdr__drop-item:hover { background: var(--surface); }
.hdr__drop-item--rule { border-top: 1px solid var(--line-soft); }
.hdr__drop-item--compact { align-items: center; padding: 11px 26px; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; color: var(--ink); gap: 14px; }
.hdr__drop-dot { width: 6px; height: 6px; flex: 0 0 auto; margin-top: 8px; }
.hdr__drop-dot--sm { background: #9BB0C4; margin-top: 0; }
.hdr__drop-txt { display: flex; flex-direction: column; gap: 5px; }
.hdr__drop-name { font-size: 15px; font-weight: 900; letter-spacing: 0.03em; color: var(--navy); }
.hdr__drop-desc { font-family: 'Noto Sans JP', sans-serif; font-size: 14px; line-height: 1.7; color: var(--muted); }
.hdr__drop-sub { border-top: 1px solid var(--line-soft); margin-top: 8px; padding: 16px 26px 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.18em; color: #7E93A8; }
/* --- menu mobile: native, khong JS --- */
.hdr__mobile { display: none; }
.hdr__toggle { display: none; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; list-style: none; }
.hdr__toggle::-webkit-details-marker { display: none; }
.hdr__toggle-icon { width: 20px; height: 12px; position: relative; display: block; }
.hdr__toggle-icon::before, .hdr__toggle-icon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--navy); top: 0; transition: transform var(--dur-3); }
.hdr__toggle-icon::after { top: auto; bottom: 0; }
.hdr__mobile[open] .hdr__toggle-icon::before { transform: translateY(5px) rotate(45deg); }
.hdr__mobile[open] .hdr__toggle-icon::after { transform: translateY(-5px) rotate(-45deg); }
.hdr__mobile-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-top: 1px solid var(--line); max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.hdr__m-link { display: flex; align-items: center; min-height: 48px; padding: 0 20px; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--surface-3); }
.hdr__m-link:active { background: var(--surface); }
.hdr__m-head { display: block; padding: 18px 20px 8px; font-size: 14px; font-weight: 700; letter-spacing: 0.18em; color: #7E93A8; background: var(--surface); }
.hdr__m-sub { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 56px; padding: 8px 20px 8px 32px; text-decoration: none; border-bottom: 1px solid var(--surface-3); }
.hdr__m-sub-name { font-size: 15px; font-weight: 700; letter-spacing: 0.03em; }
.hdr__m-sub-desc { font-family: 'Noto Sans JP', sans-serif; font-size: 14px; line-height: 1.6; color: var(--muted); }
.hdr__m-cta { display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 20px; background: var(--navy); color: var(--white); font-size: 16px; font-weight: 700; text-decoration: none; border-radius: 999px; }
@media (max-width: 899px) {
.hdr__nav { display: none; }
.hdr__toggle { display: inline-flex; }
.hdr__mobile { display: block; }
}
/* --- .hdr--home: bien the CHI danh cho index.html — trong suot tren anh hero,
nen mo dan khi cuon (is-stuck, dieu khien boi [data-hdr] trong home-motion.js).
Cac trang khac dung nguyen ban .hdr trang o tren, khong can modifier nay. --- */
.hdr--home { background: rgba(11, 32, 54, 0); border-bottom-color: transparent; transition: background var(--dur-3) var(--ease-soft), backdrop-filter var(--dur-3) var(--ease-soft), border-color var(--dur-3); }
.hdr--home.is-stuck { background: rgba(11, 32, 54, 0.92); backdrop-filter: blur(10px); }
.hdr--home .hdr__logo { content: url('assets/logo-dark.webp'); height: 30px; }
/* [Phase 7] 2 file logo LECH TY LE: logo-light 144x72 (2.00) · logo-dark 274x90 (3.04).
`content: url()` doi anh thi `width:auto` tinh theo kich thuoc NOI TAI cua anh moi,
khong theo width/height khai o the ![]()
. Hau qua: cung height 30px nhung Home rong
91px trong khi 27 trang kia 60px -> day nut menu ra ngoai mep, TRAN +27px o kho 320.
Vá o day: kho <=360px ha chieu cao logo Home xuong 20px (rong ~61px, bang cac trang khac).
Goc re that su la 2 file logo khong cung ty le -> ghi no N11, tra o stack that. */
@media (max-width: 360px) {
.hdr--home .hdr__logo { height: 20px; }
}
.hdr--home .hdr__nav > a, .hdr--home .hdr__drop > a { color: rgba(255, 255, 255, 0.86); }
.hdr--home .hdr__nav > a:hover, .hdr--home .hdr__drop > a:hover { color: var(--white); }
.hdr--home .hdr__cta { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: var(--white); }
.hdr--home .hdr__cta:hover { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.hdr--home .hdr__toggle { border-color: rgba(255, 255, 255, 0.5); }
.hdr--home .hdr__toggle-icon::before, .hdr--home .hdr__toggle-icon::after { background: var(--white); }
/* =========================================================================
LOCAL NAV (ローカルナビ) — chi muc TRONG TRANG, dinh ngay duoi header.
Khac tang voi header: header noi "dang o trang nao", thanh nay noi "dang o
doan nao". Nho gon hon han header (40px vs 76px, chu 13px vs 15px) va CHI
hien sau khi roi hero => khong bao gio doc ra thanh "header thu hai".
========================================================================= */
.lnav {
position: sticky;
top: var(--hdr-h); /* dung day header */
z-index: 45; /* duoi header (50) */
background: rgba(255,255,255,0.94);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
opacity: 0; visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--dur-3) var(--ease-soft),
transform var(--dur-3) var(--ease-out),
visibility var(--dur-3);
}
.lnav.is-on { opacity: 1; visibility: visible; transform: none; }
.lnav__in {
position: relative; /* moc toa do cho vach chi bao */
display: flex;
align-items: center;
gap: clamp(14px, 1.6vw, 26px);
height: 40px;
overflow-x: auto; /* man hep: cuon ngang TRONG thanh, khong lam
tran ca trang */
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.lnav__in::-webkit-scrollbar { display: none; }
.lnav a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
height: 100%;
font-size: 13px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
color: var(--muted);
transition: color var(--dur-3);
}
.lnav__no {
font-size: 10px;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
opacity: 0.6;
transition: opacity var(--dur-3), color var(--dur-3);
}
.lnav a:hover { color: var(--navy); }
.lnav a[aria-current="true"] { color: var(--navy); }
.lnav a[aria-current="true"] .lnav__no { opacity: 1; color: var(--blue); }
/* Vach chi bao: MOT phan tu duy nhat, khong tao lai node. Chay kieu FILL DON
— neo o mep trai, be dai keo toi het muc dang xem (xem moveMark() trong
home-motion.js) => nhin be dai vach la biet da di qua bao nhieu muc.
Day la chi bao DUY NHAT tren trang: vach tien do doc mau ho phach o mep duoi
header da duoc go (2 vach cach nhau 41px doc ra thanh mot cum, gay roi).
Chi width doi nen transition dat o width, khong phai transform. */
.lnav__mark {
position: absolute;
left: 0; bottom: 0;
height: 2px;
width: var(--mw, 0px);
background: var(--blue);
transform: translateX(var(--mx, 0px));
opacity: 0;
transition: transform 0.38s var(--ease-out), width 0.38s var(--ease-out),
opacity var(--dur-3);
}
.lnav.is-active .lnav__mark { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.lnav, .lnav a, .lnav__no, .lnav__mark { transition: none !important; }
}
/* =========================================================================
HERO — #1 letterform mask song
========================================================================= */
.hero {
position: relative;
margin-top: -76px; /* keo len duoi header trong suot */
padding-top: 76px;
background:
radial-gradient(120% 90% at 78% 18%, rgba(27, 111, 179, 0.34) 0%, rgba(11, 32, 54, 0) 62%),
var(--navy-deep);
color: var(--white);
overflow: hidden;
}
.hero__in {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
align-items: center;
gap: clamp(32px, 4vw, 64px);
padding-top: clamp(48px, 5vw, 76px);
padding-bottom: clamp(56px, 6vw, 92px);
}
.hero h1 {
margin: 0;
font-size: clamp(27px, 3.1vw, 40px);
line-height: 1.5;
font-weight: 900;
letter-spacing: 0.01em;
}
.hero__sub {
margin: 20px 0 0;
display: inline-block;
border-left: 4px solid #4AA3E0;
padding-left: 16px;
font-size: clamp(16px, 1.6vw, 21px); /* dong bo Home goc */
line-height: 1.55;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--blue-pale);
}
.hero__lead { margin: 24px 0 0; color: #D2DEEA; max-width: 46em; }
/* =========================================================================
HERO — nen la SLIDESHOW anh lam viec (ban goc dung 1 anh tinh
hero-network.png). Lop .hero__veil giu Y NGUYEN gradient navy cua ban
goc, nen chu luon doc duoc bat ke anh nao dang chay.
========================================================================= */
.hero {
position: relative;
/* keo len duoi CA HAI thanh dinh (header + thanh chi muc), khong chi header:
.lnav nam trong luong giua header va nen cung chiem cho that. */
margin-top: calc(-1 * (var(--hdr-h) + var(--lnav-h)));
padding-top: calc(var(--hdr-h) + var(--lnav-h));
background: var(--navy-deep);
color: var(--white);
overflow: hidden;
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.4s var(--ease-soft);
}
.hero__slide.is-on { opacity: 1; }
.hero__slide > img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center right;
/* Ken Burns rat nhe: anh bo ra 4% roi tro ve, 1 vong bang 1 luot slide */
transform: scale(1.04);
transition: transform 7.5s linear;
}
.hero__slide.is-on > img { transform: scale(1.0); }
/* gradient navy — sao chep dung ti le cua Home.dc.html ban goc */
.hero__veil {
position: absolute; inset: 0;
/* Ban goc phu rat day (0.97 -> 0.62) vi anh nen la do hoa truu tuong.
Gio nen la ANH NGUOI THAT va muc dich la de NHIN THAY no, nen ben phai
nha ra nhieu hon. Ben trai van du day cho chu trang dat AA. */
background: linear-gradient(90deg,
rgba(9,28,49,0.96) 0%, rgba(9,28,49,0.92) 42%,
rgba(9,28,49,0.72) 70%, rgba(9,28,49,0.42) 100%);
}
/* quang toi rieng sau chu NAL — de net chu khong bi anh phia sau an di */
.hero__art { position: relative; }
.hero__art::before {
content: "";
position: absolute;
inset: -12% -8%;
background: radial-gradient(58% 58% at 50% 50%, rgba(9,28,49,0.62) 0%, rgba(9,28,49,0) 72%);
pointer-events: none;
}
.hero__art img { position: relative; }
.hero__in {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
align-items: center;
gap: clamp(32px, 4vw, 64px);
padding-top: clamp(48px, 5vw, 76px);
padding-bottom: clamp(56px, 6vw, 92px);
}
.hero h1 {
margin: 0;
font-size: clamp(27px, 3.1vw, 40px);
line-height: 1.5;
font-weight: 900;
letter-spacing: 0.01em;
}
.hero__sub {
margin: 20px 0 0;
display: inline-block;
border-left: 4px solid #4AA3E0;
padding-left: 16px;
font-size: clamp(16px, 1.6vw, 21px); /* dong bo Home goc */
line-height: 1.55;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--blue-pale);
}
.hero__lead { margin: 24px 0 0; color: #D2DEEA; max-width: 46em; }
/* chu NAL ghep anh — anh GOC nal-team-lettering, nhung khong dat nhu mot
![]()
thuong: mo ra bang rem khi vao trang, roi troi cham + mo dan khi
hero cuon qua (bien --nal do JS day). Y tuong tu Motion Sites #34/#80:
wordmark thuong hieu la mot lop thi giac, khong phai mot buc anh. */
.hero__art { display: flex; align-items: center; justify-content: center; position: relative; }
/* MAGNETIC — lop rieng giu transform, xem chu thich o index.html.
TUYET DOI khong dat transform nay len .hero__art: no mang data-rise va
"[data-rise].is-in { transform: none }" (0,2,0) se de bet (0,1,0). */
.hero__magnet {
display: flex; justify-content: center;
width: 100%;
transform: perspective(760px)
translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0)
rotateX(var(--mag-rx, 0deg)) rotateY(var(--mag-ry, 0deg));
transform-style: preserve-3d;
will-change: transform;
}
.hero__art img {
width: 100%; max-width: 620px; height: auto;
clip-path: inset(0 100% 0 0);
transition: clip-path 1.25s var(--ease-out) 0.35s;
transform: translate3d(0, calc(var(--nal, 0) * -42px), 0);
opacity: calc(1 - var(--nal, 0) * 0.55);
will-change: transform, opacity;
}
.hero__in.is-in .hero__art img { clip-path: inset(0 0 0 0); }
/* cum dieu khien slideshow hero: [<] cham [>] — bam duoc, co vien focus.
2026-09-24: them mui ten prev/next (nut tron 40px, vien 1px trang 30%, nen navy
mo + blur, chevron net 1.5px) va nang VUNG BAM cua thanh vang len 34x44px
(thanh 4px ve bang ::before) — truoc do 34x4px qua kho bam. */
.hero__ctrl {
position: absolute;
z-index: 3;
left: 0; right: 0; bottom: 24px;
display: flex; align-items: center; justify-content: center;
/* gap 14px da bo: truoc day dung de tach [<] cham [>]; gio trong nay
chi con hang cham nen gap khong con tac dung. */
}
.hero__dots { display: flex; align-items: center; gap: 10px; }
.hero__dots button {
position: relative;
width: 34px; height: 44px;
padding: 0;
border: 0; border-radius: 4px;
background: transparent;
cursor: pointer;
}
.hero__dots button::before {
content: "";
position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
border-radius: 2px;
background: rgba(255,255,255,0.45); /* >=3:1 tren veil navy (WCAG 1.4.11); truoc .32 ~2.5:1 */
transition: background var(--dur-3);
}
.hero__dots button:hover::before { background: rgba(255,255,255,0.62); }
.hero__dots button[aria-current="true"]::before { background: var(--amber); }
.hero__dots button:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
/* .hero__arrow da BO (2026-09-26) — xem ghi chu o index.html phan hero.
Do la cho duy nhat dung backdrop-filter kieu TRANG TRI (nut noi tren anh).
Hai cho con lai (.hdr--home.is-stuck, .lnav) van giu: thanh dinh dang de len
noi dung dang cuon thi lam mo nen la cach tach lop dung chuc nang, khong
phai trang tri. Dung nham hai thu nay la bo ca cai can giu. */
@media (max-width: 767px) {
.hero__ctrl { gap: 10px; bottom: 12px; }
.hero__dots { gap: 8px; }
.hero__dots button { width: 24px; } /* 6 cham x 24 + 2 nut 36 = ~290px, vua man 375 */
.hero__arrow { width: 36px; height: 36px; }
.hero__arrow::before { content: ""; position: absolute; inset: -4px; } /* hinh 36, vung bam 44 */
.hero__arrow svg { width: 20px; height: 20px; }
}
/* =========================================================================
THE AVATAR — sao chep thiet ke o cua ban goc (anh 168px tren nen var(--surface-2))
[2026-09-27] Home KHONG con dung .avcard (chuyen sang .solcard, xem khoi
"HOME — 4 MUC"); .avcard con lai cho hub Solutions.html + 3 trang con.
========================================================================= */
/* Ti le LAY LAI DUNG ban Home cu (do bang computed style, khong uoc luong):
o anh 168px · than the 28/26/32 · gap 12px · gap luoi 24px · h2 40px/900.
Hieu ung ben duoi la phan THEM VAO, khong duoc lam xe dich mot so nao o tren.
Moi the tu khai mau san pham cua no qua --acc (dat inline trong HTML),
nen 4 hieu ung hover deu chay dung mau thuong hieu cua tung san pham. */
.avcard {
--acc: var(--blue);
display: flex;
flex-direction: column;
/* The la -> gach chan mac dinh cua trinh duyet VE XUYEN xuong moi dong chu
ben trong (con dat text-decoration:none cung khong tat duoc, phai tat o day).
Do 2026-09-25: thieu dong nay thi ca 4 the o Home lan Solutions.html deu bi
gach chan toan bo noi dung. */
text-decoration: none;
border: 1px solid var(--line-strong);
background: var(--white);
box-shadow: 0 12px 32px rgba(16, 42, 67, 0.08);
/* PHAI ke ca opacity + transform o day: rule nay dung do dam dac voi
[data-rise] nhung dung SAU trong file nen ghi de toan bo transition cua
no. Thieu opacity la the hien GIAT ra thay vi mo dan, va mat luon
stagger --i (moi the le nhau 80ms). */
transition: opacity var(--dur-1) var(--ease-soft),
transform var(--dur-1) var(--ease-out),
box-shadow var(--dur-3) var(--ease-soft);
transition-delay: calc(var(--i, 0) * 80ms);
}
/* [L3] tuong tac: nang the + bong sau hon. Doi lai nhip nhanh va bo delay vao
trang, neu khong the se tre 240ms moi nhuc nhich khi tro chuot toi.
[2026-09-26] BOC trong @media (hover:hover) and (pointer:fine): tren dien
thoai, :hover dinh lai sau khi cham -- the cu nang len mai khong ha xuong. */
@media (hover: hover) and (pointer: fine) {
.avcard:hover {
transform: translateY(-4px);
box-shadow: 0 20px 44px rgba(16, 42, 67, 0.16);
transition: transform var(--dur-3) var(--ease-out),
box-shadow var(--dur-3) var(--ease-soft);
transition-delay: 0s;
}
}
.avcard__fig {
position: relative;
aspect-ratio: 4 / 3;
border-bottom: 1px solid var(--line-soft);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
/* [L3] o anh nhuom mau thuong hieu khi hover. Dung lop phu ::before thay vi
doi background that: re hon, va khong lam nhay vien duoi cua o anh.
[2026-10-11] Anh key-visual moi co nen rieng (khong trong suot) va phu kin
o (object-fit: cover) -> lop phu phai nam TREN anh (z-index cao hon) moi
thay duoc, khac voi truoc day khi anh trong suot thi phu o DUOI cung duoc. */
.avcard__fig::before {
content: "";
position: absolute; inset: 0;
z-index: 2;
background: var(--acc);
opacity: 0;
transition: opacity var(--dur-3) var(--ease-soft);
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.avcard:hover .avcard__fig::before { opacity: 0.06; }
}
.avcard__fig img {
position: relative; z-index: 1;
width: 100%; height: 100%; object-fit: cover;
/* [L2] anh lo dan tu DUOI LEN khi the vao khung nhin. An toan voi
IntersectionObserver vi nguoi bi quan sat la ca THE (data-io), khong phai
anh — the van co dien tich > 0 nen observer luon bao duoc. */
clip-path: inset(100% 0 0 0);
transition: clip-path var(--dur-2) var(--ease-out),
transform var(--dur-2) var(--ease-out);
transition-delay: calc(var(--i, 0) * 80ms + 140ms);
}
.avcard.is-in .avcard__fig img { clip-path: inset(0 0 0 0); }
@media (hover: hover) and (pointer: fine) {
.avcard:hover .avcard__fig img { transform: scale(1.05); transition-delay: 0s; }
}
/* flex:1 -> than the CAO BANG THE. Thieu dong nay thi than the chi cao bang
noi dung, moi the mot khac -> mui ten (margin-top:auto) treo o 4 do cao
khac nhau (do 2026-09-26: lech 128px @1440, 224px @1100). Loi nay co tu
truoc, hoi con dong chu "詳しく見る"; bo chu roi thi mui ten tro thanh
thu duy nhat o tang do -> lech nhin thay ngay. */
.avcard__body { padding: 28px 26px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.avcard__body h3 {
position: relative;
align-self: flex-start; /* bo rong bang chu, de gach chan khong keo dai */
margin: 0; padding-bottom: 5px;
font-size: 19px; font-weight: 900; letter-spacing: 0.03em;
color: var(--acc);
}
/* [L3] gach chan mau thuong hieu ve ra tu trai khi hover */
.avcard__body h3::after {
content: "";
position: absolute; left: 0; bottom: 0;
width: 100%; height: 2px;
background: var(--acc);
transform: scaleX(0); transform-origin: left;
transition: transform var(--dur-3) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.avcard:hover .avcard__body h3::after { transform: scaleX(1); }
}
/* Phu de: "AI営業基盤" 1 dong, nhung "AI駆動開発のためのコンテキスト基盤" va
"人とAIが協働するSmart Workspace" xuong 2 dong -> mo ta lech 21px. Khoa 2 dong. */
.avcard__sub { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6;
color: var(--acc); min-height: 3.2em; }
.avcard__body .lead { margin: 0; }
/* [Phase 6] .avcard la THE BAM DUOC -- dung o ca hub Solutions.html lan khoi
#solution cua Home (Phase 2 noi 4 the nay ra 4 trang con). Dong "doc them"
day xuong day nho margin-top:auto (than the da la flex column qua
.avcard__body).
[2026-09-26] Chu "詳しく見る" bo di, chi con MUI TEN -- van phai HIEN SAN
(khong cho hien khi hover): dien thoai khong co re chuot, tin hieu "bam
duoc" ma an di thi tren cam ung khong ai thay. */
.avcard__more {
margin: auto 0 0; padding-top: 18px;
color: var(--acc);
}
@media (hover: hover) and (pointer: fine) {
.avcard:hover .avcard__more { transform: translateX(4px); }
}
/* Link THAT nam trong