/* ZEN'S NEW — giao diện dùng chung
   Gam màu: xanh dương đậm (hành Thủy) làm nền tối, trắng làm nền sáng, xanh lá (hành Mộc) làm điểm nhấn.
   Bố cục và kiểu hiệu ứng học theo phong cách portfolio tối giản; mã, chữ, hình đều làm mới. */

:root{
  --blue:#072A52;        /* nền tối chủ đạo, thay màu đen */
  --blue-2:#0B3B70;      /* mặt nổi trên nền tối */
  --blue-3:#1559A6;      /* chữ phụ, đường kẻ trên nền tối */
  --sky:#DCEBFA;         /* chữ mờ trên nền tối */
  --white:#FFFFFF;
  --paper:#F2F7FC;       /* nền sáng phụ */
  --ink:#072A52;         /* chữ trên nền sáng */
  --muted:#52677F;
  --line:rgba(7,42,82,.16);
  --line-d:rgba(220,235,250,.18);
  --green:#17A35F;       /* điểm nhấn Mộc */
  --green-2:#0E7A45;
  --green-soft:#E1F5EA;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --mono:"Roboto Mono",ui-monospace,monospace;
  --body:"Be Vietnam Pro",system-ui,sans-serif;
  --gut:clamp(16px,2.4vw,32px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.65 var(--body);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--green);color:#fff}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dark{background:var(--blue);color:var(--white)}
.dark .muted{color:var(--sky);opacity:.72}

/* ---------- MÀN CHỜ: vòng chữ 3D ---------- */
#loader{position:fixed;inset:0;z-index:100;background:var(--white);display:grid;place-items:center;transition:transform .9s cubic-bezier(.76,0,.24,1)}
#loader.done{transform:translateY(-100%)}
.ring-stage{perspective:900px;width:min(70vw,520px);height:220px;display:grid;place-items:center}
.ring{position:relative;width:1px;height:1px;transform-style:preserve-3d;animation:spin 7s linear infinite;transform:rotateX(-14deg)}
.ring span{position:absolute;left:-.3em;top:-.6em;font:800 clamp(34px,5vw,58px)/1 var(--display);color:var(--blue);backface-visibility:visible}
.ring.small{animation-duration:11s;animation-direction:reverse;top:58px}
.ring.small span{font:500 11px/1 var(--mono);color:var(--green-2);top:0}
@keyframes spin{to{transform:rotateX(-14deg) rotateY(-360deg)}}
.loader-pct{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font:500 13px var(--mono);color:var(--blue)}
.loader-bar{position:absolute;left:0;bottom:0;height:3px;background:var(--green);width:0}

/* ---------- THANH ĐIỀU HƯỚNG ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px var(--gut);mix-blend-mode:normal;transition:background .3s,color .3s}
.nav.on-dark{color:var(--white)}
.nav.scrolled{background:rgba(255,255,255,.86);backdrop-filter:blur(10px)}
.nav.on-dark.scrolled{background:rgba(7,42,82,.86)}
.logo{font:800 22px/.86 var(--display);text-transform:uppercase;text-decoration:none;letter-spacing:-.01em}
.logo small{display:block;font:500 9px/1.4 var(--mono);letter-spacing:.12em;color:var(--green)}
.nav ul{display:flex;gap:clamp(14px,2.6vw,40px);list-style:none;margin:0;padding:0}
.nav ul a,.bracket{font:500 13px var(--mono);text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav ul a::before,.bracket::before{content:"[ "}
.nav ul a::after,.bracket::after{content:" ]"}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--green)}
.nav-cta{justify-self:end;font:500 13px var(--mono);text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.nav-cta:hover{color:var(--green)}
.menu-btn{display:none;justify-self:end;background:none;border:0;font:500 13px var(--mono);text-transform:uppercase;cursor:pointer;padding:8px 0}

.overlay{position:fixed;inset:0;z-index:60;background:var(--blue);color:var(--white);padding:18px var(--gut);display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.76,0,.24,1)}
.overlay.open{clip-path:inset(0 0 0 0)}
.overlay-top{display:flex;justify-content:space-between;align-items:center}
.overlay nav{margin:auto 0;display:flex;flex-direction:column;gap:4px}
.overlay nav a{font:800 clamp(52px,15vw,96px)/.9 var(--display);text-transform:uppercase;text-decoration:none}
.overlay nav a:hover{color:var(--green)}
.overlay-foot{display:flex;flex-wrap:wrap;gap:12px 24px;font:500 12px var(--mono);text-transform:uppercase}
.overlay-foot a{text-decoration:none}

/* ---------- HERO ---------- */
.hero{min-height:100svh;padding:88px var(--gut) 28px;position:relative;display:flex;flex-direction:column}
.hero-title{font:800 clamp(64px,15.4vw,260px)/.8 var(--display);text-transform:uppercase;letter-spacing:-.035em;margin:0;white-space:nowrap;display:flex;justify-content:space-between;overflow:hidden;padding-top:.06em}
.hero-title .ch{display:inline-block;will-change:transform}
.hero-index{font:500 11px var(--mono);margin-bottom:4px}
.hero-mid{display:grid;grid-template-columns:1fr minmax(260px,34vw) 1fr;gap:var(--gut);margin-top:clamp(-40px,-3vw,-14px);position:relative;flex:1}
.hero-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper);align-self:start;z-index:1}
.hero-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply}
.hero-photo::after{content:"";position:absolute;inset:0;background:var(--blue-3);mix-blend-mode:screen;opacity:.35}
.hero-photo .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,163,95,0) 55%,rgba(23,163,95,.28));z-index:1}
.hero-left{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding-bottom:12px}
.hero-left .slash{font:800 clamp(20px,2.1vw,32px)/1 var(--display);text-transform:uppercase}
.hero-right{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:right}
.based{font:500 11px var(--mono);letter-spacing:.9em;text-transform:uppercase;margin-top:clamp(40px,5vw,72px)}
.hero-desc{max-width:340px;margin:22px auto 0;text-align:center;font:400 12px/1.7 var(--mono);text-transform:uppercase}
.hero-desc b{color:var(--green-2);font-weight:500}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:20px}
.label{font:500 12px var(--mono);text-transform:uppercase}
.big-link{font:800 clamp(22px,2.4vw,34px)/1 var(--display);text-transform:uppercase;text-decoration:none}
.big-link:hover{color:var(--green)}
.mail-link{font:500 13px var(--mono);text-decoration:underline;text-underline-offset:4px}
.mail-link:hover{color:var(--green)}

/* ---------- KHU VẬT LÝ ---------- */
.physics{position:relative;height:100svh;min-height:560px;overflow:hidden;user-select:none;touch-action:pan-y}
.physics-bg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;text-align:center;padding:0 var(--gut)}
.physics-bg h2{font:800 clamp(56px,11vw,190px)/.82 var(--display);text-transform:uppercase;margin:0;color:var(--blue-2);letter-spacing:-.03em}
.physics-bg h2 em{font-style:normal;color:var(--green)}
.physics-bg p{font:500 12px var(--mono);text-transform:uppercase;color:var(--sky);opacity:.7;margin-top:18px}
.chip{position:absolute;left:0;top:0;padding:12px 22px;border-radius:999px;font:800 clamp(18px,2.2vw,30px)/1 var(--display);text-transform:uppercase;white-space:nowrap;cursor:grab;will-change:transform;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.chip:active{cursor:grabbing}
.chip.c1{background:var(--white);color:var(--blue)}
.chip.c2{background:var(--green);color:var(--white)}
.chip.c3{background:var(--blue-3);color:var(--white)}
.chip.c4{background:transparent;color:var(--white);border:1.5px solid var(--sky)}
.physics-hint{position:absolute;left:var(--gut);bottom:20px;font:500 11px var(--mono);text-transform:uppercase;color:var(--sky);opacity:.7}
.physics-tag{position:absolute;right:var(--gut);bottom:20px;font:500 11px var(--mono);color:var(--sky);opacity:.7}

/* ---------- TIÊU ĐỀ KHỐI ---------- */
.sec{padding:clamp(72px,10vw,140px) var(--gut)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:clamp(28px,4vw,56px)}
.dark .sec-head{border-color:var(--line-d)}
.sec-title{font:800 clamp(56px,10vw,170px)/.8 var(--display);text-transform:uppercase;margin:0;letter-spacing:-.03em}
.sec-code{font:500 12px var(--mono);text-transform:uppercase;text-align:right}
.sec-code b{color:var(--green);font-weight:500}

/* ---------- TUYẾN NỘI DUNG: băng chuyền 3D ---------- */
.works{position:relative;overflow:hidden}
.carousel{position:relative;height:clamp(420px,62vh,620px);perspective:1400px;cursor:grab;touch-action:pan-y}
.carousel:active{cursor:grabbing}
.card3d{position:absolute;left:50%;top:50%;width:min(78vw,440px);aspect-ratio:4/5;margin:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .8s,filter .8s;text-decoration:none;color:var(--white)}
.card3d .face{position:absolute;inset:0;overflow:hidden;border-radius:4px;background:var(--blue-2);display:flex;flex-direction:column;justify-content:space-between;padding:22px}
.card3d .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.card3d .face::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,42,82,.15),rgba(7,42,82,.88))}
.card3d .face>*{position:relative;z-index:2}
.card3d .num{font:800 clamp(90px,11vw,150px)/.8 var(--display);color:var(--green)}
.card3d h3{font:800 clamp(34px,4vw,52px)/.9 var(--display);text-transform:uppercase;margin:0 0 10px}
.card3d p{font:400 12px/1.6 var(--mono);text-transform:uppercase;margin:0;color:var(--sky)}
.card3d .top{display:flex;justify-content:space-between;font:500 11px var(--mono);text-transform:uppercase}
.poster{position:absolute;inset:0;z-index:0;overflow:hidden}
.poster.p-num{background:repeating-linear-gradient(90deg,var(--blue-2) 0 38px,#0d4583 38px 40px)}
.poster.p-num i{position:absolute;bottom:0;width:13%;background:var(--green);opacity:.75}
.poster.p-old{background:radial-gradient(circle at 70% 30%,#2a6fb8 0 18%,transparent 19%),radial-gradient(circle at 30% 64%,#17a35f 0 11%,transparent 12%),radial-gradient(circle at 78% 72%,#dcebfa 0 6%,transparent 7%),var(--blue-2)}
.poster.p-tip{background:conic-gradient(from 210deg at 60% 40%,#0b3b70,#17a35f,#1559a6,#0b3b70)}
.carousel-ui{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px}
.carousel-ui .count{font:500 13px var(--mono)}
.carousel-ui .arrows{display:flex;gap:10px}
.arrow{width:52px;height:52px;border-radius:50%;border:1.5px solid currentColor;background:none;cursor:pointer;font:500 18px var(--mono)}
.arrow:hover{background:var(--green);border-color:var(--green);color:#fff}
.view-case{font:500 13px var(--mono);text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.view-case:hover{color:var(--green)}

/* ---------- VỀ TÔI ---------- */
.about-photo{width:min(300px,64vw);margin:0 auto;aspect-ratio:4/5;overflow:hidden;position:relative}
.about-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.about-photo::after{content:"";position:absolute;inset:0;background:var(--blue-3);mix-blend-mode:color;opacity:.55}
.hello{text-align:center;font:500 14px/1.5 var(--mono);text-transform:uppercase;margin:18px 0 clamp(48px,7vw,96px)}
.about-row{display:grid;grid-template-columns:220px 1fr;gap:var(--gut);padding:28px 0;border-top:1px solid var(--line-d)}
.about-row .label{color:var(--green)}
.reveal-text{font:400 clamp(20px,2.6vw,38px)/1.25 var(--mono);text-transform:uppercase;margin:0}
.reveal-text .w{opacity:.16;transition:opacity .2s}
.reveal-text .w.on{opacity:1}
.quote{font:800 clamp(40px,6.6vw,112px)/.9 var(--display);text-transform:uppercase;margin:clamp(40px,6vw,80px) 0;letter-spacing:-.02em}
.quote .gap{display:inline-block;width:clamp(30px,6vw,110px);height:.08em;background:var(--green);vertical-align:middle;margin:0 .15em}
.about-more{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:16px 26px;border:1.5px solid var(--sky);border-radius:999px;font:500 13px var(--mono);text-transform:uppercase;text-decoration:none}
.about-more:hover{background:var(--green);border-color:var(--green)}

/* ---------- CHỦ ĐỀ: cột co giãn ---------- */
.cols{display:flex;min-height:520px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.col{flex:1;border-right:1px solid var(--line);padding:22px 18px;display:flex;flex-direction:column;gap:14px;transition:flex .7s cubic-bezier(.22,1,.36,1),background .4s;overflow:hidden;cursor:pointer;position:relative}
.col:last-child{border-right:0}
.col:hover,.col.active{flex:2.4;background:var(--paper)}
.col .code{font:500 11px var(--mono)}
.col h3{font:800 clamp(22px,2vw,30px)/.95 var(--display);text-transform:uppercase;margin:0}
.col .more{opacity:0;transform:translateY(16px);transition:opacity .5s .15s,transform .5s .15s;margin-top:auto}
.col:hover .more,.col.active .more{opacity:1;transform:none}
.col ul{list-style:none;padding:0;margin:0 0 16px;font:500 12px/1.9 var(--mono);text-transform:uppercase}
.col ul li::before{content:"/ ";color:var(--green)}
.col ul li.head{font-weight:700}
.col ul li.head::before{content:"// "}
.col p{font:400 12px/1.7 var(--mono);text-transform:uppercase;margin:0;color:var(--muted);max-width:420px}
.col .state{display:inline-block;margin-top:14px;font:500 11px var(--mono);text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--green-soft);color:var(--green-2)}
.col .state.wait{background:var(--paper);color:var(--muted);border:1px solid var(--line)}

/* ---------- GHI NHẬN ---------- */
.awards-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.awards-intro{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-bottom:40px;font:500 12px/1.6 var(--mono);text-transform:uppercase}
.awards-intro b{font-weight:700}
.alist{list-style:none;margin:0;padding:0}
.alist li{border-bottom:1.5px solid var(--ink)}
.alist a,.alist div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 4px;text-decoration:none;font:800 clamp(20px,2vw,28px)/1 var(--display);text-transform:uppercase;transition:padding .3s,background .3s,color .3s}
.alist a:hover,.alist div:hover{padding-left:16px;background:var(--blue);color:var(--white)}
.alist sup{font:500 11px var(--mono);margin-left:6px;color:var(--green-2)}
.alist .yr{font:500 12px var(--mono);white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start}
.tile{aspect-ratio:3/4;padding:12px;display:flex;flex-direction:column;justify-content:space-between;font:500 10px/1.35 var(--mono);text-transform:uppercase;color:var(--white);transition:transform .4s}
.tile:hover{transform:translateY(-6px) rotate(-1.5deg)}
.tile b{font:800 clamp(16px,1.6vw,22px)/1 var(--display)}
.tile.t1{background:var(--blue)}.tile.t2{background:var(--green)}.tile.t3{background:var(--blue-3)}
.tile.t4{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.note{font:500 11px/1.6 var(--mono);text-transform:uppercase;color:var(--muted);margin-top:24px}

/* ---------- LIÊN HỆ ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(14px,2vw,26px) 0}
.marquee .track{display:inline-flex;gap:48px;animation:marq 26s linear infinite}
.marquee span{font:800 clamp(56px,9vw,150px)/.9 var(--display);text-transform:uppercase}
.marquee span:nth-child(even){color:var(--green);-webkit-text-stroke:0}
@keyframes marq{to{transform:translateX(-50%)}}
.contact{padding:clamp(56px,8vw,110px) var(--gut)}
.contact-head{text-align:center;margin-bottom:40px}
.contact-head .label{display:block;margin-bottom:12px}
.contact-head h2{font:800 clamp(44px,7vw,120px)/.86 var(--display);text-transform:uppercase;margin:0}
.contact-head h2 .spaced{display:block;font:500 13px var(--mono);letter-spacing:1.2em;margin:16px 0}
.form{max-width:860px;margin:0 auto}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 26px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{padding:12px 20px;border:1.5px solid var(--ink);border-radius:999px;font:500 12px var(--mono);text-transform:uppercase;cursor:pointer;transition:all .25s}
.chips input:checked+label{background:var(--blue);color:#fff;border-color:var(--blue)}
.chips input:focus-visible+label{outline:2px solid var(--green);outline-offset:2px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gut)}
.field{border-bottom:1.5px solid var(--ink);display:flex;flex-direction:column;padding:14px 0 8px}
.field.full{grid-column:1/-1}
.field label{font:500 11px var(--mono);text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{border:0;background:none;font:400 18px/1.5 var(--body);color:var(--ink);padding:6px 0;outline:0;resize:vertical}
.field:focus-within{border-color:var(--green)}
.send{margin:34px auto 0;display:flex;align-items:center;justify-content:center;gap:10px;width:min(100%,340px);height:64px;border-radius:999px;border:0;background:var(--blue);color:#fff;font:500 14px var(--mono);text-transform:uppercase;cursor:pointer;transition:background .3s}
.send:hover{background:var(--green)}
.form-note{text-align:center;font:500 11px/1.6 var(--mono);text-transform:uppercase;color:var(--muted);margin-top:14px}
.contact-big{display:flex;flex-direction:column;align-items:flex-end;margin-top:clamp(56px,8vw,110px);gap:6px}
.contact-big a{font:800 clamp(26px,4.4vw,64px)/1 var(--display);text-decoration:none;word-break:break-all;text-align:right}
.contact-big a:hover{color:var(--green)}
.socials{display:flex;gap:28px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
.socials a{font:500 13px var(--mono);text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}
.socials a::after{content:" ↗"}

/* ---------- CHÂN TRANG ---------- */
.foot{padding:28px var(--gut) 22px;border-top:1px solid var(--line-d)}
.foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gut);align-items:start}
.foot-links{display:flex;flex-direction:column;font:500 14px/1.6 var(--mono);text-transform:uppercase}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--green)}
.foot-mid{text-align:center;font:500 12px var(--mono);text-transform:uppercase}
.foot-right{text-align:right;font:500 11px/1.6 var(--mono);text-transform:uppercase;opacity:.75}
.foot-name{font:800 clamp(64px,17vw,300px)/.8 var(--display);text-transform:uppercase;letter-spacing:-.04em;margin:40px 0 18px;white-space:nowrap;overflow:hidden}
.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 11px var(--mono);text-transform:uppercase;opacity:.8}
.foot-bar .clock{color:var(--green)}

/* ---------- TRANG CON ---------- */
.page-hero{padding:120px var(--gut) clamp(40px,6vw,80px)}
.page-hero .crumb{font:500 12px var(--mono);text-transform:uppercase;margin-bottom:14px}
.page-hero .crumb a{text-decoration:none}
.page-hero h1{font:800 clamp(64px,13vw,220px)/.8 var(--display);text-transform:uppercase;margin:0;letter-spacing:-.035em}
.page-hero .lede{max-width:760px;font:400 clamp(17px,1.5vw,20px)/1.7 var(--body);margin:28px 0 0}
.prose{font:400 17px/1.8 var(--body);max-width:760px}
.prose h2{font:800 clamp(34px,4vw,54px)/.95 var(--display);text-transform:uppercase;margin:56px 0 14px}
.prose h3{font:700 20px/1.35 var(--body);margin:30px 0 8px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:6px 0}
.prose a{color:var(--green-2)}
.box{border:1.5px solid var(--ink);padding:20px 24px;margin:26px 0;background:var(--white)}
.box.green{border-color:var(--green);background:var(--green-soft)}
.box .label{display:block;margin-bottom:6px;color:var(--green-2)}
.box p{margin:0}
.tbl{width:100%;border-collapse:collapse;font:400 15px/1.55 var(--body);margin:20px 0}
.tbl th{font:500 11px var(--mono);text-transform:uppercase;text-align:left;color:var(--muted);border-bottom:1.5px solid var(--ink);padding:10px 8px}
.tbl td{border-bottom:1px solid var(--line);padding:12px 8px;vertical-align:top}
.tbl-wrap{overflow-x:auto}

/* Trang hồ sơ */
.stats{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.stat{padding:26px 18px;border-right:1px solid var(--line-d)}
.stat:last-child{border-right:0}
.stat b{display:block;font:800 clamp(54px,6.4vw,110px)/.85 var(--display);color:var(--green)}
.stat span{font:500 11px/1.5 var(--mono);text-transform:uppercase;display:block;margin-top:10px}
.timeline{list-style:none;margin:0;padding:0}
.tl{display:grid;grid-template-columns:200px 1fr auto;gap:var(--gut);padding:26px 0;border-top:1px solid var(--line);align-items:start}
.tl:last-child{border-bottom:1px solid var(--line)}
.tl .when{font:500 13px var(--mono);color:var(--green-2)}
.tl h3{font:800 clamp(26px,2.8vw,40px)/.95 var(--display);text-transform:uppercase;margin:0 0 8px}
.tl p{margin:0;color:var(--muted);max-width:680px}
.tl .steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tl .steps span{font:500 11px var(--mono);text-transform:uppercase;padding:5px 10px;border:1px solid var(--line);border-radius:999px}
.tl .steps span.top{background:var(--blue);color:#fff;border-color:var(--blue)}
.tl .dur{font:800 28px/1 var(--display);white-space:nowrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.card{border:1px solid var(--line);padding:24px;background:var(--white);position:relative}
.dark .card{background:var(--blue-2);border-color:var(--line-d)}
.card .code{font:500 11px var(--mono);color:var(--green-2)}
.dark .card .code{color:var(--green)}
.card h3{font:800 clamp(24px,2.2vw,32px)/.95 var(--display);text-transform:uppercase;margin:8px 0 10px}
.card p{margin:0;font-size:15px}
.dark .card p{color:var(--sky)}
.bar{height:6px;background:var(--line);margin-top:14px;position:relative}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--green);width:0;transition:width 1.4s cubic-bezier(.22,1,.36,1)}
.bar-row{display:grid;grid-template-columns:1fr auto;gap:8px;font:500 12px var(--mono);text-transform:uppercase;margin-top:18px}
.gallery{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px}
.gallery figure{margin:0;position:relative;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform .8s}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px;font:500 11px var(--mono);text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(7,42,82,.85))}
.values{display:flex;flex-wrap:wrap;gap:14px}
.values span{font:800 clamp(40px,6vw,96px)/.9 var(--display);text-transform:uppercase;padding:6px 26px 2px;border:2px solid var(--white);border-radius:999px}
.values span:nth-child(2){background:var(--green);border-color:var(--green)}

/* Trang bài viết */
.cat-tree{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--ink)}
.cat{padding:22px 18px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cat:nth-child(4n){border-right:0}
.cat .code{font:500 11px var(--mono);color:var(--green-2)}
.cat h3{font:800 30px/.95 var(--display);text-transform:uppercase;margin:8px 0 14px}
.cat ul{list-style:none;padding:0;margin:0;font:500 12px/2 var(--mono);text-transform:uppercase}
.cat li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line)}
.cat li em{font-style:normal;color:var(--muted)}
.empty{padding:clamp(40px,6vw,80px) var(--gut);text-align:center;border:1.5px dashed var(--line);margin-top:40px}
.empty b{display:block;font:800 clamp(34px,4vw,56px)/.95 var(--display);text-transform:uppercase;margin-bottom:10px}
.post-list{list-style:none;margin:0;padding:0}
.post{display:grid;grid-template-columns:120px 1fr 160px;gap:var(--gut);padding:24px 0;border-top:1px solid var(--line);text-decoration:none;align-items:center;transition:padding .3s,background .3s}
.post:hover{background:var(--paper);padding-left:14px}
.post .meta{font:500 11px var(--mono);text-transform:uppercase;color:var(--muted)}
.post h3{font:800 clamp(24px,2.6vw,38px)/.95 var(--display);text-transform:uppercase;margin:0}
.post .badge{justify-self:end;font:500 11px var(--mono);text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--green-soft);color:var(--green-2)}
.post .badge.draft{background:var(--paper);color:var(--muted);border:1px solid var(--line)}

/* Khuôn bài */
.article{display:grid;grid-template-columns:240px minmax(0,760px);gap:clamp(24px,5vw,80px);padding:0 var(--gut) 80px}
.toc{position:sticky;top:90px;align-self:start;font:500 12px/1.9 var(--mono);text-transform:uppercase}
.toc a{text-decoration:none;display:block}
.toc a:hover{color:var(--green)}
.step{counter-increment:st;position:relative;padding-left:64px;margin:30px 0}
.step::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:-4px;font:800 44px/1 var(--display);color:var(--green)}
.shot{border:1.5px dashed var(--line);padding:40px 20px;text-align:center;font:500 12px var(--mono);text-transform:uppercase;color:var(--muted);margin:14px 0;background:var(--paper)}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font:700 18px/1.4 var(--body);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font:500 22px var(--mono);color:var(--green)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0}
.draft-flag{position:fixed;right:16px;bottom:16px;z-index:40;background:var(--green);color:#fff;font:500 11px var(--mono);text-transform:uppercase;padding:8px 14px;border-radius:999px}

/* ---------- HIỆN DẦN ---------- */
.rise{opacity:0;transform:translateY(40px)}
.no-js .rise,.reduced .rise{opacity:1;transform:none}

/* ---------- ĐIỆN THOẠI, MÁY TÍNH BẢNG ---------- */
@media (max-width:1020px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(3){border-right:0}
  .stat:nth-child(n+4){border-top:1px solid var(--line-d)}
  .cat-tree{grid-template-columns:1fr 1fr}
  .cat:nth-child(2n){border-right:0}
}
@media (max-width:860px){
  .nav{grid-template-columns:1fr auto}
  .nav ul,.nav-cta{display:none}
  .menu-btn{display:block}
  .hero-mid{grid-template-columns:1fr;margin-top:18px}
  .hero-photo{order:-1;width:min(100%,360px);margin:0 auto}
  .hero-right{align-items:flex-start;text-align:left}
  .based{margin-top:8px;letter-spacing:.4em}
  .hero-desc{text-align:left;margin-left:0}
  .hero-bottom{flex-direction:column;align-items:flex-start}
  .cols{flex-direction:column;min-height:0}
  .col{border-right:0;border-bottom:1px solid var(--line);flex:none!important}
  .col .more{display:none;opacity:1;transform:none}
  .col.active .more{display:block}
  .awards-grid,.awards-intro,.fields,.grid2,.grid3,.foot-grid{grid-template-columns:1fr}
  .foot-mid,.foot-right{text-align:left}
  .about-row{grid-template-columns:1fr;gap:10px}
  .tl{grid-template-columns:1fr;gap:8px}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery figure:first-child{grid-column:1/-1}
  .gallery figure:first-child img{aspect-ratio:16/10}
  .article{grid-template-columns:1fr}
  .toc{position:static;border:1px solid var(--line);padding:14px}
  .post{grid-template-columns:1fr;gap:6px}
  .post .badge{justify-self:start}
  .contact-big{align-items:flex-start}
  .contact-big a{text-align:left}
  .socials{justify-content:flex-start}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr 1fr}
  .stat{border-right:1px solid var(--line-d)!important;border-top:1px solid var(--line-d)}
  .stat:nth-child(2n){border-right:0!important}
  .cat-tree{grid-template-columns:1fr}
  .cat{border-right:0}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .card3d{width:72vw}
}
.reduced *,.reduced *::before,.reduced *::after{animation:none!important;transition:none!important}
.motion-toggle{background:none;border:0;padding:0;font:inherit;text-transform:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.motion-toggle:hover{color:var(--green)}
.cat-tree.five{grid-template-columns:repeat(5,1fr)}
.cat-tree.five .cat:nth-child(4n){border-right:1px solid var(--line)}
.cat-tree.five .cat:nth-child(5n){border-right:0}
@media (max-width:1020px){.cat-tree.five{grid-template-columns:1fr 1fr}.cat-tree.five .cat:nth-child(n){border-right:1px solid var(--line)}.cat-tree.five .cat:nth-child(2n){border-right:0}}
@media (max-width:560px){.cat-tree.five{grid-template-columns:1fr}.cat-tree.five .cat:nth-child(n){border-right:0}}

/* Hero: tiêu đề trải kín chiều ngang, ảnh vuông gọn để cả khối nằm trong một màn hình */
.hero-title{font-size:clamp(64px,22.6vw,420px);line-height:.78;position:relative;z-index:2}
.hero-mid{grid-template-columns:1fr minmax(240px,25vw) 1fr;margin-top:14px}
.hero-photo{aspect-ratio:1/1}
@media (max-width:860px){.hero-title{font-size:21.5vw}.hero-mid{grid-template-columns:1fr}}
.physics-bg h2{color:#1a5294}
.gallery figure:first-child img{object-position:center 15%}