/* ========================================================= KUN VO — Director & Colorist Style: neo-grotesque, nền trắng, lưới kẻ hairline. FONT: Roboto (Google Fonts) — grotesk, tải sẵn trong . Muốn đổi font khác: sửa link Google Fonts trong các file .html rồi đổi tên font ở biến --font bên dưới. ========================================================= */ :root{ --bg:#ffffff; --ink:#0a0a0a; --muted:#767676; --subline:#9e9e9e; /* màu chữ 'Love Commercial' */ --brand-size:clamp(28px,5vw,58px); --line:rgba(0,0,0,.24); --line-soft:rgba(0,0,0,.12); --pad:clamp(14px,1.6vw,22px); --font:"Roboto","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; --meta:12.5px; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); /* chậm dần ở cuối, cảm giác "đặt xuống" */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.34; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:#000;color:#fff} :focus-visible{outline:2px solid var(--ink);outline-offset:3px} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:60; background:var(--bg); border-bottom:1px solid var(--line); /* khoảng thở nằm TRÊN đường kẻ, nhờ vậy đường kẻ ngang chạm đúng điểm bắt đầu của các đường kẻ dọc giữa các ô */ padding:var(--pad) var(--pad) calc(var(--pad) + 16px); display:flex;align-items:flex-start;justify-content:space-between;gap:24px; } .brand{display:block} .brand .name,.brand .job{ display:block; line-height:1.02; letter-spacing:-.028em; font-weight:400; } .brand .name{font-size:var(--brand-size);font-weight:700} /* Dòng thứ hai nhỏ hơn dòng tên đúng 2px */ .brand .job{font-size:calc(var(--brand-size) - 2px)} .brand .job{color:var(--subline)} /* Đẩy xuống 5px để đỉnh chữ hoa của menu ngang bằng đỉnh chữ "KUN VO" — canh theo mắt nhìn, không canh theo mép hộp. */ .nav{ display:flex;flex-wrap:wrap;justify-content:flex-end; font-size:clamp(14px,1.5vw,19px); letter-spacing:-.01em;text-align:right; padding-top:5px; } @media (max-width:640px){ .nav{padding-top:0} } .nav a{position:relative;white-space:nowrap} .nav a:not(:last-child)::after{content:",\00a0"} .nav a span{position:relative} .nav a span::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform .32s var(--ease-out); } .nav a:hover span::after,.nav a.is-active span::after{transform:scaleX(1)} /* ---------- Page head (trang trong) ---------- */ /* Dải dưới tên: giờ trống (tiêu đề mục đã ẩn) nên bỏ đường kẻ thứ hai — chỉ giữ đường kẻ của phần đầu trang — và thu khoảng trắng lại cho gọn. */ .page-head{padding:0} .page-head h1{ margin:0;font-size:clamp(26px,4.2vw,50px);line-height:1.02; letter-spacing:-.028em;font-weight:400; } .page-head .count,.page-head .filters{font-size:var(--meta)} /* ---------- Filters ---------- */ .filters{display:flex;flex-wrap:wrap;gap:0 6px;align-items:baseline} .filters button{ font:inherit;font-size:var(--meta);color:var(--muted); background:none;border:0;padding:0;cursor:pointer; border-bottom:1px solid transparent; transition:color .2s var(--ease),border-color .2s var(--ease); } .filters button:not(:last-child)::after{content:",";color:var(--muted)} .filters button:hover{color:var(--ink)} .filters button.is-active{color:var(--ink);border-bottom-color:var(--ink)} /* ---------- Lưới dự án ---------- */ .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--line); } .cell{ display:flex;flex-direction:column; padding:var(--pad); border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg); } .grid > .cell:nth-child(3n){border-right:0} .grid > .cell:last-child{border-bottom:0} .cell-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .cell-top .t{min-width:0;flex:1 1 auto;overflow:hidden} /* Title và client luôn gói gọn 1 dòng, dài quá thì cắt bằng dấu … */ .cell-top .title, .cell-top .client{ display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .cell-top .title{letter-spacing:-.012em} .cell-top .client{color:var(--muted);min-height:1.34em} .cell-top .tc{font-size:var(--meta);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums} /* Khung ảnh giữ ĐÚNG 16:9 — không cho co giãn theo chiều cao ô, nếu không khung hình sẽ bị cắt thêm ngoài ý muốn. */ .cell-media{ position:relative;margin:14px 0 0; aspect-ratio:16/9;overflow:hidden;background:#f2f2f2; } .cell-media img{ width:100%;height:100%;object-fit:cover; transition:opacity .55s var(--ease-out),transform .9s var(--ease-out); } .cell:hover .cell-media img{transform:scale(1.035)} .cell-foot{ display:flex;align-items:flex-end;justify-content:space-between;gap:12px; font-size:var(--meta);color:var(--muted);margin-top:auto; } .cell-foot .role{max-width:70%} .cell-foot .details{color:var(--ink);border-bottom:1px solid transparent;transition:border-color .25s var(--ease)} .cell:hover .cell-foot .details{border-bottom-color:var(--ink)} .grid-empty{padding:var(--pad);font-size:var(--meta);color:var(--muted)} /* ---------- Trang chi tiết ---------- */ .detail-head{ padding:var(--pad);border-bottom:1px solid var(--line); display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap; } .detail-head > div{flex:1 1 auto;min-width:0} .detail-head h1{ /* nhỏ hơn 20% so với cỡ cũ (26/4.2vw/50 -> 21/3.36vw/40) */ margin:0;font-size:clamp(21px,3.36vw,40px);line-height:1.04; letter-spacing:-.028em;font-weight:400; /* dùng hết bề ngang khung, tên dài thường gói gọn trong 2 hàng */ max-width:none; } .detail-head .sub{font-size:var(--meta);color:var(--muted)} .back{font-size:var(--meta);color:var(--muted);display:inline-block;margin-bottom:10px} .back:hover{color:var(--ink)} .player-wrap{ padding:var(--pad);border-bottom:1px solid var(--line); display:flex;justify-content:center;background:var(--bg); } .player{ position:relative;width:100%;max-width:min(100%,880px); aspect-ratio:16/9;background:#000;border:1px solid var(--line); } .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .detail-body{ display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); border-bottom:1px solid var(--line); } .detail-body .desc{padding:var(--pad);border-right:1px solid var(--line);white-space:pre-line} .credits{padding:var(--pad)} .credits .row{ display:flex;justify-content:space-between;gap:16px; padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:var(--meta); } .credits .row:last-of-type{border-bottom:0} .credits dt{color:var(--muted)} .credits dd{margin:0;text-align:right} .btn{ display:inline-block;margin-top:16px;font-size:var(--meta); border-bottom:1px solid var(--ink);padding-bottom:2px; } .btn:hover{opacity:.6} /* --- Nút play của trang (thay cho iframe tải sẵn) --- */ .play-btn{ position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0; border:0;background:#000;cursor:pointer;display:block; } .play-btn img{width:100%;height:100%;object-fit:cover;display:block} .play-ico{ position:absolute;left:50%;top:50%;translate:-50% -50%; width:74px;height:74px;border-radius:50%; background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.8); display:grid;place-items:center;transition:background .25s var(--ease),scale .25s var(--ease); } .play-ico svg{width:22px;height:22px;fill:#fff;margin-left:4px} .play-btn:hover .play-ico{background:rgba(0,0,0,.72);scale:1.06} /* --- Popup xem video --- */ .modal{ position:fixed;inset:0;z-index:200; background:rgba(0,0,0,.9); display:flex;align-items:center;justify-content:center; padding:clamp(16px,4vw,56px); opacity:0;transition:opacity .25s var(--ease); } .modal.in{opacity:1} .modal-inner{ position:relative;width:min(1400px,100%); transform:scale(.985);transition:transform .34s var(--ease-out); } .modal.in .modal-inner{transform:none} .modal-frame{ position:relative;width:100%;aspect-ratio:16/9; max-height:calc(100vh - clamp(64px,12vw,140px)); margin:0 auto;background:#000; } .modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* chắn mép trên của khung video (chỗ hiện tên video và tên kênh YouTube) */ .modal-shield{ position:absolute;top:0;left:0;right:0;height:96px; background:transparent;cursor:default; } /* Chắn logo YouTube ở góc dưới phải (logo này dẫn sang trang gốc). Đặt CAO HƠN thanh điều khiển ~56px để không cản việc tua video. */ .modal-shield-br{ position:absolute;right:0;bottom:56px;width:190px;height:62px; background:transparent;cursor:default; } @media (max-width:640px){ .modal-shield{height:60px} .modal-shield-br{right:0;bottom:44px;width:120px;height:44px} } .modal-close{ position:absolute;top:-40px;right:0; width:32px;height:32px;line-height:1; font:inherit;font-size:26px;color:#fff; background:none;border:0;cursor:pointer;opacity:.75; } .modal-close:hover{opacity:1} @media (max-width:640px){ .modal-close{top:-36px} } /* ---------- Stills ---------- */ .stills{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid var(--line); } .stills figure{ margin:0;background:#f1f1f1;aspect-ratio:16/9; border-right:1px solid var(--line);border-bottom:1px solid var(--line); background-repeat:no-repeat; } .stills figure:nth-child(3n){border-right:0} .stills img{width:100%;height:100%;object-fit:cover;display:block} .section-label{ padding:var(--pad);font-size:var(--meta);color:var(--muted); border-bottom:1px solid var(--line); } /* ---------- About ---------- */ .about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);border-bottom:1px solid var(--line)} .about-grid .col-a{padding:var(--pad);border-right:1px solid var(--line)} .about-grid .col-b{padding:var(--pad)} .avatar{ margin-top:22px;width:100%;max-width:280px;aspect-ratio:1/1; object-fit:cover;border:1px solid var(--line); } .about-grid h2{margin:0;font-size:clamp(26px,4vw,46px);line-height:1.02;letter-spacing:-.028em;font-weight:400} .about-grid p{margin:0 0 14px;max-width:64ch} .about-grid p:last-child{margin-bottom:0} /* ---------- Services ---------- */ .services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)} .services > div{padding:var(--pad);border-right:1px solid var(--line)} .services > div:last-child{border-right:0} .services h3{margin:0 0 6px;font-size:15px;font-weight:400} .services p{margin:0;font-size:var(--meta);color:var(--muted)} /* ---------- Footer ---------- */ .site-footer{padding:var(--pad);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:var(--meta)} .site-footer .socials{display:flex;gap:0 6px;flex-wrap:wrap} .site-footer .socials a:not(:last-child)::after{content:","} .site-footer .socials a:hover{opacity:.6} .site-footer .colophon{color:var(--muted)} .site-footer a{border-bottom:1px solid transparent} .site-footer a:hover{border-bottom-color:currentColor} /* ---------- Reveal ---------- */ /* Chuyển động chính của site: ô dự án trồi lên theo đợt khi cuộn tới, như một tờ contact sheet đang hiện dần. Đây là chỗ duy nhất "diễn" — mọi thứ khác giữ khẽ để không rối. */ .reveal{opacity:0;transform:translateY(16px)} .reveal.in{ opacity:1;transform:none; transition:opacity .62s var(--ease-out),transform .62s var(--ease-out); } /* Ảnh hiện dần khi tải xong, thay vì bật ra đột ngột */ .cell-media img{opacity:0} .cell-media img.is-loaded{opacity:1} /* ---------- Responsive ---------- */ @media (max-width:1000px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} .grid > .cell:nth-child(3n){border-right:1px solid var(--line)} .grid > .cell:nth-child(2n){border-right:0} .services{grid-template-columns:repeat(2,minmax(0,1fr))} .services > div:nth-child(2n){border-right:0} .detail-body{grid-template-columns:minmax(0,1fr)} .detail-body .desc{border-right:0;border-bottom:1px solid var(--line)} .about-grid{grid-template-columns:minmax(0,1fr)} .about-grid .col-a{border-right:0;border-bottom:1px solid var(--line)} } @media (max-width:640px){ .site-header{flex-direction:column;gap:10px} .nav{justify-content:flex-start;text-align:left} .grid{grid-template-columns:minmax(0,1fr)} .grid > .cell{border-right:0!important} .services{grid-template-columns:minmax(0,1fr)} .services > div{border-right:0;border-bottom:1px solid var(--line-soft)} .stills{grid-template-columns:minmax(0,1fr)} .stills figure{border-right:0;border-bottom:1px solid var(--line)} .cell{min-height:0} } @media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms!important;animation-duration:.01ms!important} .reveal{opacity:1;transform:none} .cell-media img{opacity:1} } /* ---------- Màn hình mở đầu ---------- Chỉ chạy ở trang chủ, một lần mỗi phiên truy cập. Tên lớn dần rồi tan ra, như tấm bìa mở đầu một cuộn phim trước khi vào phần nội dung. */ .intro{ position:fixed;inset:0;z-index:300;background:var(--bg); display:grid;place-items:center; transition:opacity .5s var(--ease-out); } .intro-name{ font-size:clamp(34px,7vw,88px);line-height:1;letter-spacing:-.03em; color:var(--ink); transform:scale(.9);opacity:0; transition:transform 1.1s var(--ease-out),opacity .55s var(--ease-out); } .intro.in .intro-name{transform:none;opacity:1} .intro.out{opacity:0;pointer-events:none} body.intro-on{overflow:hidden} @media (prefers-reduced-motion:reduce){ .intro{display:none} } /* Tiêu đề mục được giấu khỏi mắt nhưng vẫn còn cho trình đọc màn hình và cho Google — trang chỉ còn khoảng trắng, đúng ý "ít chữ hơn". */ .sr-only{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* Trang About: cột trái không cần chừa chỗ cho tiêu đề nữa */ .about-grid .col-a{min-height:0} /* ---------- Thanh trượt theo năm (trang Colors) ---------- Đọc như một thước đo: vạch chia đều theo năm, con trỏ tam giác chỉ năm đang chọn. Kéo tới đâu, lưới bên dưới đổi tới đó. */ .year-bar{padding:clamp(22px,3vw,40px) var(--pad) clamp(18px,2.4vw,32px)} .year-scale{ position:relative;width:100%; padding-top:34px; /* chừa chỗ cho con trỏ và nhãn năm */ cursor:ew-resize; } .year-scale .ticks{ position:relative;display:flex;align-items:flex-end; justify-content:space-between;height:26px; } .year-scale .tick{width:1px;height:12px;background:var(--ink);opacity:.55} .year-scale .tick.is-end{height:26px;opacity:1} .year-scale .tick.is-on{height:26px;opacity:1} /* con trỏ tam giác + số năm đang chọn */ .year-scale .head{ position:absolute;top:0;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:4px; transition:left .22s var(--ease-out); pointer-events:none; } .year-scale .head b{font-size:var(--meta);font-weight:400;font-variant-numeric:tabular-nums} .year-scale .head i{ width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent; border-top:6px solid var(--ink); } .year-scale .ends{ display:flex;justify-content:space-between; font-size:var(--meta);color:var(--muted);margin-top:8px; font-variant-numeric:tabular-nums; } /* thanh kéo thật nằm đè lên thước, trong suốt — để chuột, cảm ứng và bàn phím đều dùng được mà không phải viết lại từ đầu */ /* Thanh kéo thật phủ TOÀN BỘ vùng thước — bấm chỗ nào trong dải cũng kéo được, không cần trúng vạch. Nó trong suốt nên chỉ thấy thước bên dưới. */ .year-scale input[type=range]{ position:absolute;inset:0;width:100%;height:100%; margin:0;padding:0;opacity:0;cursor:ew-resize; -webkit-appearance:none;appearance:none;background:transparent; } .year-scale input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:44px;height:44px; /* vùng nắm rộng cho cả chuột lẫn ngón tay */ } .year-scale input[type=range]::-moz-range-thumb{width:44px;height:44px;border:0} .year-scale input[type=range]:focus-visible + .ticks .tick.is-on{ outline:2px solid var(--ink);outline-offset:4px; } @media (max-width:640px){ .year-bar{padding:22px var(--pad) 18px} .year-scale{padding-top:26px} } /* ---------- Trang phần mềm (PlexGIF) ---------- */ .shot{width:100%;height:auto;display:block;border:1px solid var(--line)} .player-wrap .shot{max-width:min(100%,1100px)} .detail-head .back{display:block;margin-bottom:10px} /* Danh sách tính năng: hai cột nhãn — mô tả, kẻ hairline như bảng credits */ .feature-list{border-bottom:1px solid var(--line)} .feat{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr); gap:20px;padding:14px var(--pad); border-bottom:1px solid var(--line-soft); } .feat:last-child{border-bottom:0} .feat dt{margin:0} .feat dd{margin:0;color:var(--muted)} /* Ảnh phụ */ .shots{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); border-bottom:1px solid var(--line); } .shots figure{margin:0;padding:var(--pad);border-right:1px solid var(--line)} .shots figure:last-child{border-right:0} .shots img{width:100%;height:auto;display:block;border:1px solid var(--line)} @media (max-width:900px){ .feat{grid-template-columns:minmax(0,1fr);gap:4px} .shots{grid-template-columns:minmax(0,1fr)} .shots figure{border-right:0;border-bottom:1px solid var(--line)} }