/* ==========================================================================
   NAM TRẦN — Portfolio cá nhân: brand & UI designer
   Bố cục: SIDEBAR CỐ ĐỊNH bên trái (tên, menu, mạng xã hội, trạng thái nhận
   việc) + cột phải cuộn. Không header ngang. Body: tiêu đề chữ khổng lồ,
   dự án là DANH SÁCH HÀNG (số · tên · loại · năm) hover hiện ảnh trôi theo
   chuột, dịch vụ đánh số, marquee khách hàng, chi tiết dự án ảnh xếp dọc
   có cột thông tin dính, liên hệ là email cỡ lớn.
   Font: Space Grotesk + Inter. Màu: trắng/đen + vàng acid #E4FF3B.
   ========================================================================== */
:root{
  --ink:#0E0E0E; --paper:#FAFAF7; --acid:#E4FF3B; --gray:#8A8A85; --line:#E0E0DA; --ph:#D6D6D0;
  --ff-h:'Space Grotesk','Inter',sans-serif; --ff:'Inter',Arial,sans-serif; --side:280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff);color:var(--ink);background:var(--paper);line-height:1.6;font-size:15px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3,h4{font-family:var(--ff-h);font-weight:600;line-height:1;letter-spacing:-.02em}
.ph{background:var(--img,var(--ph)) center/cover no-repeat}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Layout: sidebar + main ---------- */
.layout{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);padding:34px 30px;display:flex;flex-direction:column;background:var(--paper)}
.side__name{font-family:var(--ff-h);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.side__name small{display:block;font-family:var(--ff);font-size:12px;color:var(--gray);font-weight:400;letter-spacing:0;margin-top:6px}
.side__nav{margin-top:60px;display:grid;gap:4px}
.side__nav a{display:flex;gap:8px;align-items:center;font-family:var(--ff-h);font-size:17px;padding:8px 0;border-bottom:1px solid transparent}
.side__nav a span{font-size:11px;color:var(--gray);font-family:var(--ff);margin-left:auto}
.side__nav a:hover,.side__nav a.is-active{border-bottom-color:var(--ink)}
.side__nav a.is-active::before{content:"→ "}
.side__status{margin-top:auto;padding:16px;border:1px solid var(--line);font-size:12.5px;line-height:1.5}
.side__status b{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:4px}
.side__status b::before{content:"";width:8px;height:8px;border-radius:50%;background:#33C46A;box-shadow:0 0 0 3px rgba(51,196,106,.2)}
.side__soc{display:flex;gap:14px;margin-top:20px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.side__soc a:hover{color:var(--ink)}
.main{min-width:0}
.topbar{display:none}

/* ---------- Blocks ---------- */
.block{padding:80px 60px;border-bottom:1px solid var(--line)}
.block--tight{padding:50px 60px}
.block--ink{background:var(--ink);color:#fff}
.block__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:40px}
.block__head h2{font-size:clamp(28px,3vw,40px)}
.block__head span{font-size:12px;color:var(--gray);letter-spacing:.06em;text-transform:uppercase}

/* ---------- Hero chữ khổng lồ ---------- */
.hero{min-height:calc(100vh - 0px);display:flex;flex-direction:column;justify-content:space-between;padding:60px 60px 50px;border-bottom:1px solid var(--line)}
.hero__top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--gray);letter-spacing:.04em}
.hero h1{font-size:clamp(56px,8.5vw,148px);letter-spacing:-.04em;line-height:.92;margin:40px 0}
.hero h1 .o{-webkit-text-stroke:1.5px var(--ink);color:transparent}
.hero h1 .hl{background:var(--acid);padding:0 .08em;display:inline-block;line-height:1}
.hero__bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.hero__bottom p{font-size:18px;max-width:520px;color:#3A3A36}
.hero__bottom .ph{aspect-ratio:16/9;max-width:420px;justify-self:end;width:100%}
.hero__cta{display:flex;gap:20px;margin-top:20px;font-family:var(--ff-h);font-size:15px}
.hero__cta a{border-bottom:1.5px solid var(--ink);padding-bottom:2px}
.hero__cta a:hover{background:var(--acid)}

/* ---------- Danh sách dự án dạng hàng ---------- */
.works{border-top:1px solid var(--ink)}
.work{display:grid;grid-template-columns:60px 1fr 200px 80px 40px;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid var(--line);position:relative;transition:.2s}
.work:hover{background:#fff;padding-left:14px;padding-right:14px}
.work .no{font-size:12px;color:var(--gray)}
.work h3{font-size:clamp(22px,2.6vw,36px);font-weight:500}
.work .cat{font-size:13px;color:var(--gray)}
.work .yr{font-size:13px;color:var(--gray);text-align:right}
.work .arr{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:.2s}
.work:hover .arr{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(-45deg)}
.work .peek{position:absolute;right:20%;top:50%;transform:translateY(-50%) rotate(-3deg) scale(.9);width:260px;aspect-ratio:4/3;opacity:0;pointer-events:none;transition:.3s;z-index:2;box-shadow:0 20px 40px rgba(0,0,0,.15)}
.work:hover .peek{opacity:1;transform:translateY(-50%) rotate(-3deg) scale(1)}

/* ---------- Lưới dự án (trang công việc) ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 30px}
.gitem .ph{aspect-ratio:4/3;margin-bottom:14px;transition:.3s}
.gitem:hover .ph{transform:translateY(-4px)}
.gitem h3{font-size:22px;font-weight:500}
.gitem .meta{font-size:13px;color:var(--gray);margin-top:4px;display:flex;gap:14px}
.gitem:nth-child(4n+2),.gitem:nth-child(4n+3){margin-top:60px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.filters button{background:none;border:1px solid var(--line);padding:8px 16px;border-radius:999px;font:inherit;font-size:13px;cursor:pointer}
.filters button.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.gitem.is-hidden{display:none}

/* ---------- Dịch vụ đánh số ---------- */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.svc .no{font-family:var(--ff-h);font-size:13px;color:var(--gray);display:block;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.svc h3{font-size:24px;font-weight:500;margin-bottom:10px}
.svc p{font-size:14px;color:#3A3A36}
.svc ul{margin-top:14px;font-size:13px;color:var(--gray);display:grid;gap:4px}

/* ---------- Về tôi ---------- */
.about{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:start}
.about .ph{aspect-ratio:4/5;position:sticky;top:40px}
.about h2{font-size:clamp(30px,3.4vw,48px);margin-bottom:22px}
.about p{font-size:16.5px;color:#3A3A36;margin-bottom:14px;max-width:560px}
.about dl{display:grid;grid-template-columns:140px 1fr;gap:12px 20px;margin-top:30px;font-size:14px;border-top:1px solid var(--line);padding-top:24px}
.about dt{color:var(--gray)}
.tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.tools span{border:1px solid var(--line);padding:5px 12px;border-radius:999px;font-size:12.5px}

/* ---------- Marquee khách ---------- */
.marquee{overflow:hidden;padding:26px 0;border-bottom:1px solid var(--line)}
.marquee__in{display:flex;gap:60px;white-space:nowrap;width:max-content;animation:mq 28s linear infinite;font-family:var(--ff-h);font-size:26px;color:var(--gray)}
.marquee__in span::after{content:"·";margin-left:60px;color:var(--acid)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Số liệu ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.fact b{display:block;font-family:var(--ff-h);font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.03em}
.fact span{font-size:13px;color:var(--gray)}
.block--ink .fact b{color:var(--acid)}

/* ---------- Chi tiết dự án ---------- */
.case{display:grid;grid-template-columns:300px 1fr;gap:60px;align-items:start}
.case__info{position:sticky;top:40px}
.case__info h1{font-size:clamp(34px,4vw,56px);margin-bottom:20px}
.case__info p{font-size:15px;color:#3A3A36;margin-bottom:20px}
.case__info dl{display:grid;gap:12px;font-size:13.5px;border-top:1px solid var(--line);padding-top:20px}
.case__info dt{color:var(--gray);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.case__imgs{display:grid;gap:20px}
.case__imgs .ph{aspect-ratio:4/3}
.case__imgs .ph.tall{aspect-ratio:3/4}
.case__imgs .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.case__txt{padding:10px 0 30px;max-width:640px}
.case__txt h2{font-size:26px;margin-bottom:12px}
.case__txt p{color:#3A3A36;margin-bottom:12px}
.case__nav{display:flex;justify-content:space-between;margin-top:60px;padding-top:30px;border-top:1px solid var(--line);font-family:var(--ff-h);font-size:18px}

/* ---------- Liên hệ email lớn ---------- */
.contact-big{padding:100px 60px}
.contact-big h2{font-size:clamp(28px,3vw,40px);color:var(--gray);font-weight:400;margin-bottom:20px}
.contact-big a.mail{font-family:var(--ff-h);font-size:clamp(32px,6vw,96px);letter-spacing:-.04em;line-height:1;display:inline-block;border-bottom:3px solid var(--acid);word-break:break-all}
.contact-big a.mail:hover{background:var(--acid)}
.contact-big .rows{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:60px;font-size:14px}
.contact-big .rows b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);margin-bottom:6px;font-weight:500}
.form{max-width:640px;margin-top:60px;display:grid;gap:18px}
.field{display:grid;gap:6px}
.field label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.field input,.field select,.field textarea{border:0;border-bottom:1px solid var(--ink);background:transparent;padding:12px 0;font:inherit;font-size:18px;font-family:var(--ff-h);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom:2px solid var(--ink)}
.field textarea{min-height:100px;resize:vertical}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;background:var(--ink);color:#fff;font-family:var(--ff-h);font-size:15px;border:0;cursor:pointer;justify-self:start}
.btn:hover{background:var(--acid);color:var(--ink)}

/* ---------- Footer nhỏ ---------- */
.foot{padding:26px 60px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--gray)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){:root{--side:230px}.block,.hero,.contact-big,.foot{padding-left:40px;padding-right:40px}.svcs,.facts{grid-template-columns:repeat(2,1fr)}.work{grid-template-columns:40px 1fr 140px 60px 40px}}
@media (max-width:900px){.layout{grid-template-columns:1fr}.side{display:none}.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--paper);z-index:50}.topbar b{font-family:var(--ff-h);font-size:18px}.topbar nav{display:flex;gap:16px;font-size:13px}.block,.hero,.contact-big,.foot{padding-left:24px;padding-right:24px}.hero{min-height:auto}.hero__bottom{grid-template-columns:1fr}.hero__bottom .ph{justify-self:start;max-width:none}.about,.case,.grid{grid-template-columns:1fr}.about .ph,.case__info{position:static}.gitem:nth-child(4n+2),.gitem:nth-child(4n+3){margin-top:0}.work .peek{display:none}}
@media (max-width:640px){.block{padding-top:56px;padding-bottom:56px}.work{grid-template-columns:30px 1fr 40px}.work .cat,.work .yr{display:none}.svcs,.facts,.contact-big .rows{grid-template-columns:1fr}.case__imgs .two{grid-template-columns:1fr}.topbar nav{gap:10px;font-size:12px}}

/* ---------- Bổ sung: h1 hero vừa 3 dòng ở 1440px ---------- */
.hero h1{font-size:clamp(56px,7vw,148px)}