/* Trương Quang Duy — Personal Portfolio. All Vietnamese text uses UTF-8. */
:root{color-scheme:dark;--bg:#090d14;--surface:#111925;--surface2:#162333;--panel:#182436;--text:#edf6ff;--muted:#acbdcf;--low:#8b9aae;--line:rgba(196,229,255,.14);--accent:#81dfff;--accent-ink:#001923;--edge:clamp(20px,5.2vw,88px);--radius:14px;--shadow:0 18px 65px rgba(0,0,0,.18);font-family:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:root[data-theme="light"]{color-scheme:light;--bg:#f5f9fc;--surface:#e9f1f8;--surface2:#e0eefa;--panel:#eef5fb;--text:#122238;--muted:#54677a;--low:#637c96;--line:rgba(22,31,23,.17);--accent:#146d96;--accent-ink:#fff;--shadow:0 18px 60px rgba(34,40,28,.09)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--bg);color:var(--text);font-size:15px;line-height:1.75;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:var(--accent);color:var(--accent-ink)}.container{width:min(100% - var(--edge)*2,1470px);margin-inline:auto}.skip-link{position:absolute;top:-100px;left:15px;z-index:1000;padding:12px 18px;background:var(--accent);color:var(--accent-ink)}.skip-link:focus{top:12px}.reading-progress{position:fixed;top:0;left:0;width:0;height:3px;z-index:1001;background:var(--accent);transition:width .08s linear}.site-shell{overflow:hidden}.section{padding-block:clamp(86px,11vw,172px)}
/* Header */
.header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid var(--line)}.header-inner{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;align-items:center;gap:17px;min-width:270px}.brand-mark{display:inline-grid;place-items:center;width:48px;height:48px;font-weight:800;letter-spacing:-.13em;padding-right:5px;font-size:23px;color:var(--accent-ink);background:var(--accent);border-radius:12px}.brand-mark-dot{color:var(--accent-ink)}.brand-label{display:flex;flex-direction:column;gap:2px;font-size:11px;font-weight:800;letter-spacing:.11em;line-height:1.5}.brand-label small{font-size:9px;font-weight:500;color:var(--low);letter-spacing:.17em}.nav{display:flex;align-items:center;gap:clamp(18px,2.8vw,45px)}.nav a{font-size:12px;font-weight:600;color:var(--muted);transition:color .2s}.nav a:hover{color:var(--text)}.header-actions{display:flex;align-items:center;gap:12px}.theme-toggle,.menu-toggle{border:1px solid var(--line);color:var(--text);background:transparent;border-radius:50%;width:44px;height:44px;display:inline-grid;place-items:center;cursor:pointer;transition:background .2s}.theme-toggle:hover,.menu-toggle:hover{background:var(--surface2)}.theme-toggle svg{width:20px;height:20px}.icon-sun{display:none}:root[data-theme="light"] .icon-moon{display:none}:root[data-theme="light"] .icon-sun{display:block}.menu-toggle{display:none}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(350px,.86fr);column-gap:clamp(24px,5vw,95px);align-items:center;min-height:min(850px,calc(100svh - 89px));padding-block:clamp(60px,7vw,110px) 72px;position:relative}.hero-copy{position:relative;z-index:2}.eyebrow,.section-index{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--accent)}.eyebrow{display:flex;align-items:center;gap:10px}.signal-dot,.pill-dot{display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}.eyebrow-sep{color:var(--low);margin:0 5px}.hero-intro{font-size:clamp(18px,2vw,26px);color:var(--muted);font-weight:500;margin:45px 0 8px}.hero h1{font-size:clamp(64px,7.4vw,124px);letter-spacing:-.09em;line-height:1.055;font-weight:800;margin:0 0 25px;white-space:nowrap}.hero h1>span{color:var(--accent)}.period{color:var(--text)}.hero-desc{max-width:535px;font-size:clamp(15px,1.35vw,18px);line-height:1.95;color:var(--muted)}.hero-desc strong{color:var(--text);font-weight:600}.hero-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin-top:34px}.btn{min-height:54px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:32px;border-radius:7px;font-size:12px;font-weight:700;transition:transform .2s ease,background .2s ease,border-color .2s}.btn:hover{transform:translateY(-3px)}.btn span{font-size:20px;font-weight:400;line-height:1}.btn-primary{color:var(--accent-ink);background:var(--accent)}.btn-outline{border:1px solid var(--line);color:var(--text);background:transparent}.btn-outline:hover{background:var(--surface)}.hero-caption{display:flex;align-items:center;gap:13px;color:var(--low);font-size:9px;letter-spacing:.14em;font-weight:700;margin-top:54px}.hero-caption-line{width:44px;height:1px;background:var(--low)}.hero-art{position:relative;isolation:isolate;min-height:580px;height:min(680px,60vw);border-radius:12px;background:radial-gradient(ellipse at 68% 42%,rgba(157,206,92,.14) 0%,transparent 45%),linear-gradient(130deg,#30372b 0%,#181c18 52%,#101610 100%);border:1px solid rgba(255,255,255,.14);overflow:hidden;box-shadow:var(--shadow)}.hero-art:after{content:"";position:absolute;inset:16px;border:1px solid rgba(230,255,194,.14);border-radius:3px;pointer-events:none}.hero-art-glow{position:absolute;width:380px;height:380px;top:27%;left:12%;background:radial-gradient(circle,#d5fb8340 0%,transparent 63%);filter:blur(36px);opacity:.65}.hero-art-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(239,250,225,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(239,250,225,.055) 1px,transparent 1px);background-size:47px 47px;mask-image:linear-gradient(to bottom,transparent,#000 40%,transparent);opacity:.5}.art-corner{position:absolute;color:#bdc9b2;font-size:9px;letter-spacing:.2em;z-index:2}.art-corner-one{top:36px;left:36px}.art-corner-two{top:36px;right:36px}.art-circles{position:absolute;inset:0;display:grid;place-items:center}.orbit{position:absolute;width:72%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(211,246,164,.24);transform:rotateX(10deg) rotate(-30deg);animation:orbital 24s linear infinite}.orbit-two{width:92%;border-style:dashed;opacity:.33;animation-direction:reverse;animation-duration:33s}.orbit-three{width:54%;border:1px solid rgba(211,246,164,.23);animation-duration:43s}.orbit-one:before{content:"";position:absolute;left:6%;top:15%;width:9px;height:9px;border-radius:50%;background:#d5fb83;box-shadow:0 0 28px #d5fb83}.art-monogram{position:absolute;top:46%;left:49%;transform:translate(-50%,-50%);font-size:clamp(135px,19vw,315px);letter-spacing:-.17em;line-height:1;font-weight:800;color:#e8f7d6;white-space:nowrap;text-shadow:0 20px 55px rgba(0,0,0,.2)}.art-monogram span{color:#c2de99}.art-monogram i{font-style:normal;color:#d5fb83;font-size:.45em}.art-pill{position:absolute;top:69%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:#e9f3d9;color:#202a18;border:1px solid #ffffff80;border-radius:100px;padding:11px 18px;font-size:9px;letter-spacing:.13em;font-weight:800;white-space:nowrap}.art-pill .pill-dot{background:#648535;box-shadow:none}.art-bottom{position:absolute;bottom:36px;left:36px;right:36px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#a9b8a0;font-size:9px;letter-spacing:.15em}.scroll-cue{grid-column:1/-1;display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.17em;color:var(--low);margin-top:22px;font-weight:700;width:max-content}.scroll-cue-line{width:60px;height:1px;background:var(--low)}
@keyframes orbital{to{transform:rotateX(10deg) rotate(330deg)}}
/* ticker */
.marquee-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:21px 0;background:var(--surface)}.marquee-track{display:flex;width:max-content;align-items:center;gap:44px;animation:marquee 30s linear infinite}.marquee-track span{white-space:nowrap;color:var(--text);font-size:11px;letter-spacing:.22em;font-weight:700}.marquee-track b{font-size:17px;color:var(--accent);font-weight:400}@keyframes marquee{to{transform:translateX(-50%)}}
/* headings */
.section-heading{margin-bottom:55px}.section-heading h2{font-size:clamp(48px,6vw,88px);letter-spacing:-.075em;line-height:1.13;font-weight:800;margin:24px 0 0}.section-heading h2 em,.quote-inner h2 em,.contact h2 em{font-style:normal;color:var(--accent)}.split-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}.split-heading p{color:var(--muted);max-width:360px;margin:0 0 6px;line-height:2}.section-index{display:block}
/* about */
.about-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,6vw,110px);align-items:center}.about-visual{background:linear-gradient(140deg,#d6efb1,#b4d08e 44%,#8dba73);min-height:500px;border-radius:12px;color:#182614;padding:34px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.about-visual:after{content:"";position:absolute;width:350px;height:350px;border:1px solid rgba(12,43,16,.24);border-radius:50%;top:19%;right:-24%;box-shadow:0 0 0 36px rgba(30,70,31,.06),0 0 0 70px rgba(30,70,31,.04)}.about-visual-top,.about-visual-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:9px;font-weight:800;letter-spacing:.15em;position:relative;z-index:1}.about-visual-top span:last-child{font-size:30px;line-height:1}.about-symbol{position:relative;z-index:1;text-align:center;font-size:clamp(120px,14vw,250px);font-weight:800;letter-spacing:-.15em;line-height:1}.about-symbol span{color:#ebffcf}.about-content .text-lead{color:var(--text);font-size:clamp(20px,2.3vw,31px);font-weight:500;line-height:1.65;letter-spacing:-.025em;margin-top:0}.accent-underline{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;text-decoration-thickness:2px}.about-content>p:not(.text-lead){font-size:14px;line-height:2.15;color:var(--muted);margin-block:22px}.about-micro-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px 20px;margin-top:40px;padding-top:29px;border-top:1px solid var(--line)}.about-micro-grid div{display:flex;flex-direction:column;gap:7px}.about-micro-grid span{font-size:9px;font-weight:700;color:var(--low);letter-spacing:.12em}.about-micro-grid strong{font-size:13px;font-weight:700}
/* skill */
.expertise{background:var(--surface)}.skills-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.skill-card{min-height:380px;padding:clamp(26px,2.5vw,41px);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:11px;background:var(--bg);transition:transform .25s,border-color .25s}.skill-card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}.skill-num{font-size:10px;font-weight:700;color:var(--low);letter-spacing:.14em}.skill-symbol{color:var(--accent);font-size:55px;font-weight:500;letter-spacing:-.12em;line-height:1.1;margin:45px 0 25px}.skill-card h3{font-size:19px;font-weight:700;margin:0 0 15px;letter-spacing:-.02em}.skill-card p{color:var(--muted);font-size:12px;line-height:2;margin:0 0 30px}.skill-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}.skill-tags span{border:1px solid var(--line);border-radius:99px;padding:6px 10px;color:var(--muted);font-size:9px;font-weight:700}
/* projects */
.projects-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.project-card{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--surface);transition:transform .25s}.project-card:hover{transform:translateY(-6px)}.project-art{height:clamp(280px,35vw,470px);position:relative;overflow:hidden;padding:28px}.project-art-overline,.project-art-bottom{position:relative;z-index:1;font-size:9px;letter-spacing:.14em;font-weight:700}.project-art-bottom{position:absolute;bottom:25px;left:28px}.project-art-one{color:#f4ddd8;background:radial-gradient(ellipse at 83% 24%,#be706880,transparent 45%),linear-gradient(125deg,#392329,#12161b)}.project-art-one:after{content:"";position:absolute;width:95%;height:150%;top:-45%;right:-40%;border-radius:50%;border:1px solid #e2a4a46e;box-shadow:0 0 0 30px #efacb208,0 0 0 65px #efacb210,0 0 0 120px #efacb206;transform:rotate(-30deg)}.project-art-one-type{position:absolute;left:9%;top:29%;font-weight:800;font-size:clamp(65px,8vw,132px);letter-spacing:-.09em;line-height:.99;z-index:2}.project-art-one-type span{color:#d39c9e}.project-art-two{color:#d3f5ff;background:radial-gradient(ellipse at 45% 70%,#32707a 0%,transparent 58%),linear-gradient(120deg,#09232c,#0b131b)}.project-art-two:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ffffff05 1px,transparent 1px),linear-gradient(#ffffff05 1px,transparent 1px);background-size:32px 32px}.project-ui{position:absolute;left:18%;top:23%;width:68%;height:60%;border-radius:9px;border:1px solid #9ddbd56c;background:rgba(23,55,66,.6);backdrop-filter:blur(7px);display:flex;overflow:hidden;box-shadow:20px 20px 55px #0008;transform:perspective(750px) rotateY(-12deg) rotateX(5deg)}.ui-sidebar{width:21%;height:100%;border-right:1px solid #b9f5e627;background:#15303977;padding:24px 12px;display:flex;flex-direction:column;gap:16px}.ui-sidebar i{display:block;height:7px;width:75%;background:#b5f3e867;border-radius:9px}.ui-sidebar i:first-child{width:30px;height:30px;border-radius:8px;background:#9bf2b7}.ui-main{padding:24px 26px;flex:1;display:flex;flex-direction:column;gap:12px}.ui-main>span{display:block;width:68%;height:12px;border-radius:5px;background:#c0ebec}.ui-main>div{display:flex;gap:10px;margin-block:7px}.ui-main>div i{height:52px;flex:1;background:#57e2c52b;border-radius:6px;border:1px solid #8aeed540}.ui-main b{display:block;height:8px;width:100%;background:#afd4d840;border-radius:5px}.ui-main b:nth-last-child(1){width:65%}.project-content{padding:28px 28px 31px;display:flex;align-items:center;justify-content:space-between;gap:15px}.project-type{font-size:9px;color:var(--accent);font-weight:700;letter-spacing:.1em}.project-content h3{font-size:clamp(16px,1.8vw,22px);line-height:1.5;letter-spacing:-.03em;margin:9px 0}.project-content p{font-size:12px;color:var(--muted);line-height:1.9;margin:0;max-width:360px}.circle-link{display:grid;place-items:center;border:1px solid var(--line);width:46px;height:46px;border-radius:50%;flex:none;font-size:24px;transition:background .2s,color .2s}.circle-link:hover{background:var(--accent);color:var(--accent-ink)}
/* quote */
.quote-section{background:var(--accent);color:var(--accent-ink);padding-block:clamp(90px,11vw,155px)}.quote-inner .section-index{color:var(--accent-ink)}.quote-mark{font-size:clamp(110px,18vw,240px);height:clamp(90px,13vw,180px);line-height:1.1;opacity:.18;font-weight:800}.quote-inner h2{font-size:clamp(38px,5.4vw,83px);line-height:1.38;letter-spacing:-.065em;max-width:1150px;font-weight:800;margin:0}.quote-inner h2 em{color:var(--accent-ink);opacity:.55}.quote-footer{display:flex;gap:20px;justify-content:space-between;align-items:center;border-top:1px solid currentColor;margin-top:65px;padding-top:18px;font-size:10px;letter-spacing:.1em;font-weight:700}
/* contact */
.contact{padding-bottom:130px}.contact-top{display:flex;justify-content:space-between;gap:20px;align-items:center}.contact-availability{font-size:9px;letter-spacing:.11em;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:9px}.contact-availability i{width:7px;height:7px;background:var(--accent);border-radius:50%;display:inline-block;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}.contact h2{font-size:clamp(52px,8.2vw,130px);letter-spacing:-.08em;line-height:1.18;margin:45px 0 25px;font-weight:800}.contact-sub{font-size:15px;color:var(--muted);line-height:2;max-width:610px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:60px}.contact-card{display:flex;flex-direction:column;position:relative;gap:12px;padding:30px 34px;min-height:154px;border:1px solid var(--line);border-radius:10px;background:var(--surface);transition:transform .2s,border-color .2s}.contact-card:hover{transform:translateY(-4px);border-color:var(--accent)}.contact-label{font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--low)}.contact-card strong{font-size:clamp(17px,2.4vw,32px);line-height:1.4;letter-spacing:-.035em;overflow-wrap:anywhere}.contact-arrow{position:absolute;right:25px;top:21px;font-size:24px;color:var(--accent)}.contact-copy-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:21px;color:var(--muted);font-size:11px}.copy-button{border:0;background:transparent;color:var(--accent);font-weight:700;font-size:11px;cursor:pointer;padding:12px 0}.copy-button:hover{text-decoration:underline}.copy-button span{font-size:15px;margin-right:6px}
/* footer */
.footer{border-top:1px solid var(--line);padding-block:27px}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-brand{font-size:35px;letter-spacing:-.13em;font-weight:800;line-height:1}.footer-brand span{color:var(--accent)}.footer-inner>span,.footer-inner>a:last-child{font-size:9px;letter-spacing:.11em;font-weight:700;color:var(--muted)}.footer-inner>a:last-child:hover{color:var(--text)}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:1000;color:var(--accent-ink);background:var(--accent);padding:12px 22px;border-radius:100px;box-shadow:var(--shadow);font-size:12px;font-weight:700;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}
/* reveal optional; no JS keeps content visible */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.19,1,.22,1),transform .7s cubic-bezier(.19,1,.22,1)}.js [data-reveal].is-visible{opacity:1;transform:translateY(0)}
/* theme refinements */
:root[data-theme="light"] .marquee-wrap{background:#edf0e6}:root[data-theme="light"] .hero-art,:root[data-theme="light"] .project-art-one,:root[data-theme="light"] .project-art-two{color:#fff}:root[data-theme="light"] .hero-art .art-corner,:root[data-theme="light"] .art-bottom{color:#c5d5c2}
@media(max-width:1190px){.brand{min-width:unset}.brand-label{font-size:10px}.nav{gap:20px}.hero{grid-template-columns:1fr .95fr}.hero h1{font-size:clamp(52px,6.8vw,90px)}.hero-art{height:570px;min-height:500px}.art-monogram{font-size:19vw}.hero-desc{font-size:15px}.project-art-one-type{font-size:7vw}}
@media(max-width:820px){.header-inner{height:75px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px}.menu-toggle span{width:18px;height:2px;border-radius:2px;background:var(--text);transition:transform .2s}.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}.nav{position:absolute;top:75px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line);background:var(--bg);padding:10px var(--edge) 22px;box-shadow:var(--shadow)}.nav.open{display:flex}.nav a{padding:15px 0;border-bottom:1px solid var(--line);font-size:14px}.hero{grid-template-columns:1fr;min-height:unset;padding-top:80px;row-gap:50px}.hero h1{font-size:clamp(64px,11vw,100px)}.hero-art{height:550px;min-height:0}.art-monogram{font-size:clamp(170px,40vw,280px)}.hero-caption{margin-top:35px}.scroll-cue{margin-top:0}.about-layout{grid-template-columns:1fr;gap:45px}.about-visual{min-height:470px}.about-symbol{font-size:clamp(180px,35vw,250px)}.split-heading{align-items:start;flex-direction:column}.skills-grid{grid-template-columns:1fr 1fr}.skills-grid .skill-card:last-child{grid-column:1/-1;min-height:270px}.skill-card{min-height:350px}.project-content{padding:22px 20px}.project-art{padding:20px}.project-art-bottom{left:20px}.project-art-one-type{font-size:9vw}.contact-grid{grid-template-columns:1fr}.contact-card{min-height:130px}}
@media(max-width:590px){:root{--edge:22px}.brand{gap:10px}.brand-mark{width:41px;height:41px;border-radius:10px;font-size:20px}.brand-label{font-size:9px}.brand-label small{font-size:7px}.header-actions{gap:8px}.theme-toggle,.menu-toggle{width:39px;height:39px}.hero{padding-top:66px;gap:35px}.eyebrow{font-size:9px;letter-spacing:.12em}.hero-intro{margin-top:33px;font-size:16px}.hero h1{font-size:clamp(54px,12vw,75px);line-height:1.13}.hero-desc{font-size:14px}.hero-buttons{flex-direction:column;align-items:stretch}.btn{width:100%;justify-content:space-between;min-height:53px}.hero-art{height:440px}.art-monogram{font-size:43vw}.art-corner{font-size:7px}.art-corner-one{left:20px;top:20px}.art-corner-two{right:20px;top:20px}.art-bottom{left:20px;right:20px;bottom:20px;font-size:8px}.art-pill{top:72%;font-size:8px;padding:10px 13px}.hero-art:after{inset:10px}.scroll-cue{font-size:9px}.marquee-wrap{padding:16px 0}.marquee-track{gap:25px}.marquee-track span{font-size:9px}.section{padding-block:95px}.section-heading h2{font-size:clamp(46px,10vw,62px)}.section-heading{margin-bottom:39px}.about-visual{min-height:350px;padding:20px}.about-symbol{font-size:38vw}.about-visual-top,.about-visual-bottom{font-size:7px}.about-content .text-lead{font-size:21px}.about-content>p:not(.text-lead){font-size:13px}.about-micro-grid{grid-template-columns:1fr 1fr}.about-micro-grid strong{font-size:11px}.about-micro-grid span{font-size:8px}.skills-grid,.projects-grid{grid-template-columns:1fr}.skills-grid .skill-card:last-child{grid-column:auto}.skill-card{min-height:300px;padding:25px}.skill-symbol{margin:28px 0 23px}.project-art{height:340px}.project-art-one-type{font-size:70px}.project-ui{width:78%;left:11%;height:58%;top:24%}.ui-main{padding:19px 14px}.ui-sidebar{padding:16px 9px}.project-art-overline,.project-art-bottom{font-size:8px}.project-content h3{font-size:17px}.quote-section{padding-block:95px}.quote-mark{height:85px}.quote-inner h2{font-size:clamp(36px,8vw,58px)}.quote-footer{margin-top:43px;flex-direction:column;align-items:start;gap:10px;font-size:9px}.contact-top{align-items:start;flex-direction:column}.contact h2{font-size:clamp(45px,10vw,68px);margin:28px 0}.contact-sub{font-size:13px}.contact-grid{margin-top:38px}.contact-card{padding:25px}.contact-copy-row{flex-direction:column;align-items:start}.footer-inner{flex-wrap:wrap;row-gap:12px}.footer-brand{width:100%}.footer-inner>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.js [data-reveal]{opacity:1;transform:none}}


/* ---------------------------------------------------------------
   V3 - FUTURE EDITION • cinematic photo / platinum-blue digital identity
   --------------------------------------------------------------- */
:root{--line:rgba(183,221,245,.18);--shadow:0 26px 90px rgba(0,0,0,.30)}
:root[data-theme="light"]{--line:rgba(22,82,126,.14);--shadow:0 18px 58px rgba(22,59,93,.12)}
body{background:var(--bg);background-image:radial-gradient(ellipse 950px 690px at 100% 2%,rgba(20,81,113,.15),transparent 66%);}
.header{background:color-mix(in srgb,var(--bg) 88%,transparent)}
.brand-mark{border-radius:2px 12px 2px 12px;background:linear-gradient(135deg,#c5f4ff,#5cc8ec);box-shadow:0 0 34px rgba(108,204,241,.1);color:#062031}
.brand-mark-dot{color:inherit}
.btn-primary{background:linear-gradient(120deg,#a5edff,#6acbeb);box-shadow:0 14px 48px rgba(55,168,217,.11)}
.btn-primary:hover{box-shadow:0 17px 52px rgba(55,168,217,.25)}
.nav a,.brand-label,.eyebrow,.section-index,.hero-caption,.photo-topnote,.photo-side-text{font-family:'Be Vietnam Pro','Segoe UI',Arial,sans-serif}
.hero{grid-template-columns:minmax(0,1.05fr) minmax(365px,.95fr);gap:clamp(26px,4.5vw,75px);min-height:760px;padding-block:clamp(65px,7.5vw,120px) 90px;isolation:isolate}
.hero-copy{z-index:3}
.hero-ambient{position:absolute;z-index:-1;pointer-events:none;filter:blur(8px);border-radius:50%}
.hero-ambient-1{width:600px;height:600px;right:5%;top:3%;background:radial-gradient(circle,rgba(31,161,215,.14),transparent 66%)}
.hero-ambient-2{width:440px;height:440px;left:-24%;bottom:0;background:radial-gradient(circle,rgba(66,105,191,.10),transparent 62%)}
.hero .hero-intro{margin-top:50px;margin-bottom:10px;font-size:clamp(16px,1.8vw,24px);color:#9eb6c9}
:root[data-theme="light"] .hero .hero-intro{color:#546e84}
.hero h1{font-size:clamp(61px,6.85vw,116px);font-weight:800;line-height:1.12;letter-spacing:-.084em;margin:0 0 21px}
.hero h1 .name-thin{font-weight:500;letter-spacing:-.078em;color:var(--text)}
.hero h1 .name-accent{color:#83dcf6;text-shadow:0 0 52px rgba(51,152,202,.12)}
.hero h1 .period{color:var(--text)}
:root[data-theme="light"] .hero h1 .name-accent{color:#14769e}
.hero-role{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.18em;font-weight:700;color:var(--accent);margin:21px 0 17px}
.role-line{display:inline-block;width:26px;height:1px;background:var(--accent)}
.hero-role-x{color:var(--low);font-weight:400}
.hero-desc{max-width:540px;font-size:clamp(15px,1.32vw,18px);line-height:1.85;margin:18px 0 0}
.hero-buttons{margin-top:35px}
.hero-caption{margin-top:44px}
.divider-pipe{color:#536775}
.hero-photo{z-index:2;position:relative;isolation:isolate;aspect-ratio:.795;max-height:745px;width:100%;margin:0;border:1px solid rgba(202,241,255,.25);border-radius:5px;overflow:hidden;background:#17212d;box-shadow:0 34px 110px rgba(0,0,0,.42),0 0 0 10px rgba(118,203,230,.035);}
.hero-photo-backdrop{position:absolute;inset:0;z-index:0;background:linear-gradient(155deg,#27394d,#0d1219)}
.portrait-main{display:block;width:100%;height:100%;object-fit:cover;object-position:center 34%;position:absolute;inset:0;filter:contrast(1.06) brightness(.98);transform:scale(1.018);transition:transform 800ms cubic-bezier(.2,.7,.1,1)}
.hero-photo:hover .portrait-main{transform:scale(1.045)}
.photo-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(2,7,12,.81),transparent 26%),linear-gradient(110deg,rgba(8,25,44,.24),transparent 46%),linear-gradient(180deg,rgba(4,11,17,.45),transparent 23%);pointer-events:none}
.photo-corner{position:absolute;width:34px;height:34px;z-index:3;pointer-events:none}
.photo-corner-tl{left:17px;top:17px;border-top:1px solid rgba(217,247,255,.85);border-left:1px solid rgba(217,247,255,.85)}
.photo-corner-tr{right:17px;top:17px;border-top:1px solid rgba(217,247,255,.85);border-right:1px solid rgba(217,247,255,.85)}
.photo-corner-bl{left:17px;bottom:17px;border-bottom:1px solid rgba(217,247,255,.85);border-left:1px solid rgba(217,247,255,.85)}
.photo-corner-br{right:17px;bottom:17px;border-bottom:1px solid rgba(217,247,255,.85);border-right:1px solid rgba(217,247,255,.85)}
.photo-topnote{position:absolute;z-index:3;left:38px;right:38px;top:40px;color:#e9faff;display:flex;justify-content:space-between;gap:10px;font-size:9px;font-weight:700;letter-spacing:.12em;text-shadow:0 1px 7px #000}
.photo-glass-badge{position:absolute;z-index:3;left:30px;right:30px;bottom:30px;display:flex;align-items:center;gap:13px;padding:15px 17px;background:rgba(10,19,31,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(203,237,255,.22);color:#fff}
.photo-glass-badge>span:nth-child(2){display:flex;flex-direction:column;gap:1px}
.photo-glass-badge strong{font-size:11px;letter-spacing:.13em;font-weight:700}
.photo-glass-badge small{font-size:9px;letter-spacing:.12em;color:#b2c5d5}
.micro-dot{width:8px;height:8px;flex:none;border-radius:50%;background:#81dfff;box-shadow:0 0 14px #81dfff}
.badge-cross{margin-left:auto;font-size:20px;color:#a8e9fd}
.photo-side-text{position:absolute;right:6px;top:48%;writing-mode:vertical-rl;font-size:8px;letter-spacing:.22em;color:rgba(220,244,255,.9);z-index:3;text-shadow:0 1px 5px #000}
.scroll-cue{margin-top:0}
/* portrait detail / about */
.about-visual{padding:30px;min-height:580px;background:#111b2a;border:1px solid var(--line);isolation:isolate}
.about-visual:after{display:none}
.about-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 43%;filter:contrast(1.03);z-index:0}
.about-photo-cover{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,17,25,.55),rgba(7,17,25,.05) 45%,rgba(4,12,22,.92) 100%);z-index:0}
.about-photo-title{position:relative;z-index:1;align-self:flex-start;margin-top:auto;margin-bottom:36px;font-size:clamp(32px,4vw,60px);letter-spacing:-.075em;line-height:1.18;font-weight:800;color:white}
.about-photo-title em{font-style:normal;color:#9be8ff}
.about-visual-top,.about-visual-bottom{color:#e4f5ff;font-weight:700}
.view-photo{display:inline-flex;gap:12px;align-items:center;cursor:pointer;border:0;border-bottom:1px solid var(--accent);background:none;color:var(--accent);font-size:11px;letter-spacing:.12em;font-weight:700;padding:12px 0;margin-top:22px}
.view-photo:hover{color:var(--text)}
/* sophisticated panels */
.skill-card{background:linear-gradient(150deg,var(--surface),var(--bg));border-color:var(--line);border-radius:5px}
.skill-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.project-card,.project-art,.about-visual{border-radius:5px}
.project-art-one{background:linear-gradient(125deg,#123144,#071725)!important}
.project-art-two{background:linear-gradient(125deg,#d2e8ef,#7aaabc)!important}
.project-art-one-type span,.project-art-one-type{color:#9ee9ff!important}
.project-art-one-type{color:#f1fbff!important}
.project-content .circle-link{background:var(--accent);color:var(--accent-ink)}
.quote-section{background:radial-gradient(ellipse at 75% 20%,rgba(30,156,197,.16),transparent 58%),#0b1521}
:root[data-theme="light"] .quote-section{background:#e7f3fa;color:#122238}
/* micro welcome */
.welcome[hidden],.photo-lightbox[hidden]{display:none!important}
.welcome{position:fixed;z-index:1500;inset:0;display:grid;place-items:center;overflow:hidden;padding:26px;background:#050a11;color:#eef8ff;opacity:1;transition:opacity .55s ease,visibility .55s ease}
.welcome.is-closing{opacity:0;visibility:hidden;pointer-events:none}
.welcome:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(137,219,245,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(137,219,245,.055) 1px,transparent 1px);background-size:70px 70px;mask-image:radial-gradient(ellipse at center,black 5%,transparent 70%)}
.welcome-glow{position:absolute;width:90vw;height:90vw;max-width:650px;max-height:650px;background:radial-gradient(circle,rgba(25,144,203,.22),transparent 70%);filter:blur(35px)}
.welcome-inner{position:relative;text-align:center;max-width:1100px;width:100%;z-index:1}
.welcome-pre{display:inline-flex;gap:13px;align-items:center;color:#a3eaff;font-size:10px;font-weight:700;letter-spacing:.23em}
.welcome-code{display:block;margin:18px 0 29px;font-size:10px;letter-spacing:.22em;color:#7e93a6}
.welcome h2{font-size:clamp(34px,6.35vw,90px);line-height:1.2;letter-spacing:-.07em;margin:0;font-weight:800}
.welcome h2>span{color:#8de3ff}
.welcome-stop{color:white}
.welcome p{color:#a9bacc;font-size:clamp(12px,1.2vw,16px);margin:20px 0 34px}
.welcome-track{height:2px;max-width:235px;margin:auto;background:#253b4d;overflow:hidden}
.welcome-track span{display:block;height:100%;width:0;background:#92e8ff;animation:welcome-fill 2.2s linear forwards}
@keyframes welcome-fill{to{width:100%}}
.welcome-skip{background:none;color:#d6f5ff;border:1px solid #385367;border-radius:100px;padding:12px 20px;font-size:10px;letter-spacing:.14em;margin-top:32px;cursor:pointer}
.welcome-skip:hover{background:rgba(120,216,249,.12)}
.welcome-skip span{margin-left:12px}
.welcome-foot{position:absolute;bottom:28px;left:18px;right:18px;text-align:center;letter-spacing:.2em;font-size:9px;color:#7894a8}
/* large-portrait lightbox */
.photo-lightbox{position:fixed;inset:0;z-index:1600;background:rgba(1,6,11,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 16px 24px;gap:9px}
.photo-lightbox img{height:min(84vh,850px);width:auto;max-width:min(95vw,100%);object-fit:contain;border:1px solid #375167}
.lightbox-close{position:absolute;right:20px;top:15px;background:#152638;color:#fff;border:1px solid #496075;cursor:pointer;width:43px;height:43px;border-radius:50%;font-size:17px}
.photo-lightbox>span{color:#9bc5d9;letter-spacing:.14em;font-size:10px}
/* fixing headings/diacritics on a range of screens */
h1,h2,h3,strong{font-synthesis:none;overflow-wrap:normal}
.section-heading h2,.contact h2,.quote-inner h2{line-height:1.22;padding-bottom:.07em}
@media(max-width:1190px){.hero h1{font-size:clamp(54px,6.6vw,91px)}.hero-photo{max-height:670px}}
@media(max-width:820px){.hero{grid-template-columns:1fr;min-height:0;gap:34px;padding-top:62px}.hero-copy{max-width:740px}.hero h1{font-size:clamp(68px,10.9vw,102px)}.hero-photo{width:min(100%,680px);height:auto;max-height:none;aspect-ratio:.94;justify-self:center}.portrait-main{object-position:center 33%}.hero .hero-intro{margin-top:34px}.hero-caption{margin-top:26px}.about-visual{min-height:520px}.about-photo{object-position:center 36%}}
@media(max-width:590px){.hero{padding-top:49px;padding-bottom:65px;gap:27px}.eyebrow{font-size:8px;letter-spacing:.08em}.hero h1{font-size:clamp(48px,11.3vw,72px);letter-spacing:-.08em;line-height:1.18;margin-bottom:15px}.hero .hero-intro{margin-top:27px;font-size:16px}.hero-role{font-size:8px;gap:8px;letter-spacing:.13em}.hero-desc{font-size:14px;margin-top:12px}.hero-buttons{margin-top:27px}.hero-caption{font-size:8px}.hero-photo{aspect-ratio:.81}.photo-topnote{left:23px;right:23px;top:28px;font-size:7px}.photo-topnote span{display:none}.photo-glass-badge{bottom:19px;left:16px;right:16px;padding:12px}.photo-glass-badge strong{font-size:9px}.photo-glass-badge small{font-size:7px}.photo-side-text{font-size:6px}.photo-corner{width:22px;height:22px}.photo-corner-tl{left:10px;top:10px}.photo-corner-tr{right:10px;top:10px}.photo-corner-bl{left:10px;bottom:10px}.photo-corner-br{right:10px;bottom:10px}.about-visual{min-height:440px}.about-photo-title{font-size:clamp(34px,8vw,45px)}.welcome h2{font-size:clamp(28px,8vw,48px)}.welcome-pre,.welcome-code{font-size:8px}}
@media(prefers-reduced-motion:reduce){.welcome-track span{animation:none;width:100%}.portrait-main,.hero-photo:hover .portrait-main{transform:none}}

/* Wedding experience artwork */
.wedding-art{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:52px 20px;text-align:center;color:var(--text, #edf0e5)}
.wedding-rings{font-family:Georgia,serif;font-size:58px;letter-spacing:-20px;padding-right:20px;line-height:.8;color:#d4c58d}
.wedding-art strong{font-size:clamp(25px,3.6vw,46px);line-height:1.15;letter-spacing:-.04em}.wedding-art em{font-style:normal;color:#c9d7a7}.wedding-art>span:last-child{font-size:9px;letter-spacing:3px;opacity:.7}
/* Tăng độ tương phản phần lời nhắn */
.quote-section {
  color: #eef8ff;
}

.quote-inner h2 {
  color: inherit;
}

.quote-inner h2 em,
.quote-inner .section-index {
  color: #91e4ff;
  opacity: 1;
}

.quote-footer {
  color: #c3d8e6;
}

:root[data-theme="light"] .quote-inner h2 em,
:root[data-theme="light"] .quote-inner .section-index {
  color: #075979;
}

:root[data-theme="light"] .quote-footer {
  color: #344e63;
}