.tran-portfolio{
            --primary: #0a2540;      
            --secondary: #2563eb;    
            --accent: #0284c7;       
            --bg-light: #f0f6fc;     
            --bg-white: #ffffff;     
            --text-main: #334155;    
            --text-muted: #64748b;
            --btn-orange: #ff6b35;   
            --btn-orange-hover: #e55a2b;
            --border-subtle: rgba(10, 37, 64, 0.08);
            --shadow-sm: 0 4px 10px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.05);
            --shadow-md: 0 15px 30px -5px rgba(10, 37, 64, 0.08), 0 8px 10px -5px rgba(10, 37, 64, 0.04);
            --shadow-lg: 0 20px 40px -5px rgba(10, 37, 64, 0.12), 0 10px 15px -5px rgba(10, 37, 64, 0.06);
            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
.tran-portfolio{ scroll-behavior: smooth; scroll-padding-top: 80px; }
.tran-portfolio *{ margin: 0; padding: 0; box-sizing: border-box; }
.tran-portfolio,.tran-portfolio,.tran-portfolio button,.tran-portfolio input,.tran-portfolio textarea,.tran-portfolio select,.tran-portfolio h1,.tran-portfolio h2,.tran-portfolio h3,.tran-portfolio h4,.tran-portfolio h5,.tran-portfolio h6,.tran-portfolio p,.tran-portfolio a,.tran-portfolio li,.tran-portfolio span,.tran-portfolio div,.tran-portfolio strong,.tran-portfolio em{
            font-family: 'Montserrat', Arial, sans-serif;
        }
.tran-portfolio .fa,.tran-portfolio .fas,.tran-portfolio .far,.tran-portfolio .fal,.tran-portfolio .fat,.tran-portfolio .fa-solid,.tran-portfolio .fa-regular,.tran-portfolio .fa-light,.tran-portfolio .fa-thin{
            font-family: 'Font Awesome 6 Free' !important;
        }
.tran-portfolio .fab,.tran-portfolio .fa-brands{ font-family: 'Font Awesome 6 Brands' !important; }
.tran-portfolio .fas,.tran-portfolio .fa-solid{ font-weight: 900; }
.tran-portfolio .far,.tran-portfolio .fa-regular{ font-weight: 400; }
.tran-portfolio .fab,.tran-portfolio .fa-brands{ font-weight: 400; }
.tran-portfolio{ background-color: var(--bg-light); color: var(--text-main); line-height: 1.8; font-size: 16px; }
.tran-portfolio h1,.tran-portfolio h2,.tran-portfolio h3,.tran-portfolio h4,.tran-portfolio h5{ color: var(--primary); line-height: 1.3; font-weight: 700; letter-spacing: -0.5px; }
.tran-portfolio p{ margin-bottom: 1.5rem; }
.tran-portfolio ul{ margin-bottom: 1.5rem; }
.tran-portfolio a{ text-decoration: none; color: var(--secondary); transition: var(--transition); }
.tran-portfolio a:hover{ color: var(--accent); }
.tran-portfolio .container{ max-width: 1200px; margin: 0 auto; padding: 0 30px; }
.tran-portfolio section{ padding: 100px 0; }
.tran-portfolio .lang-en{ display: none; }
.tran-portfolio.english-mode .lang-vi{ display: none !important; }
.tran-portfolio.english-mode span.lang-en{ display: inline !important; }
.tran-portfolio.english-mode div.lang-en,.tran-portfolio.english-mode p.lang-en,.tran-portfolio.english-mode h2.lang-en,.tran-portfolio.english-mode h3.lang-en,.tran-portfolio.english-mode h4.lang-en{ display: block !important; }
.tran-portfolio.english-mode li.lang-en{ display: list-item !important; }
.tran-portfolio .navbar{ position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 15px rgba(10, 37, 64, 0.08); z-index: 1000; padding: 18px 0; transition: var(--transition); }
.tran-portfolio .nav-container{ display: flex; justify-content: space-between; align-items: center; max-width: 1300px; margin: 0 auto; padding: 0 30px; }
.tran-portfolio .nav-brand{ width: 250px; font-size: 15px; color: var(--secondary); font-weight: 500; letter-spacing: 0.5px; white-space: nowrap; }
.tran-portfolio .nav-links{ list-style: none; display: flex; gap: 35px; margin: 0; }
.tran-portfolio .nav-links a{ color: var(--primary); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; position: relative; padding-bottom: 5px; }
.tran-portfolio .nav-links a::after{ content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--secondary); transition: var(--transition); }
.tran-portfolio .nav-links a:hover{ color: var(--secondary); }
.tran-portfolio .nav-links a:hover::after{ width: 100%; }
.tran-portfolio .nav-actions{ display: flex; align-items: center; justify-content: flex-end; gap: 15px; width: 250px; }
.tran-portfolio .lang-switch{ width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: none; background: none; cursor: pointer; transition: transform 0.3s; padding: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.tran-portfolio .lang-switch:hover{ transform: scale(1.1); }
.tran-portfolio .lang-switch img{ width: 100%; height: 100%; object-fit: cover; }
.tran-portfolio .contact-btn{ background: var(--btn-orange); color: #ffffff !important; padding: 8px 20px; border-radius: 50px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(255, 107, 53, 0.3); transition: all 0.3s; letter-spacing: 0.5px; }
.tran-portfolio .contact-btn i{ font-size: 13px; }
.tran-portfolio .contact-btn:hover{ background: var(--btn-orange-hover); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(255, 107, 53, 0.4); }
.tran-portfolio .bg-white{ background-color: var(--bg-white); }
.tran-portfolio .bg-pattern-dots{ background-color: var(--bg-light); background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px); background-size: 24px 24px; }
.tran-portfolio .section-title{ font-size: 36px; font-weight: 800; color: var(--primary); margin-bottom: 70px; text-align: center; position: relative; text-transform: uppercase; }
.tran-portfolio .section-title::after{ content: ''; display: block; width: 60px; height: 4px; background: var(--secondary); margin: 15px auto 0; border-radius: 2px; }
.tran-portfolio .profile-section{ padding-top: 150px; padding-bottom: 100px; background: linear-gradient(to bottom, #e0f2fe 0%, #ffffff 100%); }
.tran-portfolio .profile-grid{ display: grid; grid-template-columns: 350px 1fr; gap: 80px; align-items: center; }
.tran-portfolio .profile-card-left{ text-align: center; }
.tran-portfolio .profile-image-container{ width: 280px; height: 280px; margin: 0 auto 40px; position: relative; z-index: 1; }
.tran-portfolio .profile-image-container::before{ content: ''; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px; border: 2px solid var(--secondary); border-radius: 50%; opacity: 0.2; z-index: -1; }
.tran-portfolio .profile-image{ width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 8px solid var(--bg-white); box-shadow: var(--shadow-lg); background-color: var(--bg-light); }
.tran-portfolio .contact-list{ list-style: none; display: inline-block; text-align: left; }
.tran-portfolio .contact-list li{ margin-bottom: 15px; display: flex; align-items: center; font-weight: 500; color: var(--text-main); font-size: 15px; }
.tran-portfolio .contact-list li i{ color: var(--secondary); font-size: 18px; margin-right: 15px; width: 20px; text-align: center; }
.tran-portfolio .profile-name{ font-size: 48px; font-weight: 800; margin-bottom: 10px; color: var(--primary); }
.tran-portfolio .profile-role{ font-size: 20px; font-weight: 500; color: var(--secondary); margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px; }
.tran-portfolio .bio-text{ font-size: 17px; color: var(--text-main); margin-bottom: 40px; }
.tran-portfolio .bio-text strong{ color: var(--primary); font-weight: 600; }
.tran-portfolio .bio-highlights{ display: grid; grid-template-columns: 1fr 1fr; gap: 25px; padding-top: 25px; border-top: 1px solid var(--border-subtle); }
.tran-portfolio .highlight-item{ display: flex; align-items: flex-start; }
.tran-portfolio .highlight-icon{ flex-shrink: 0; width: 50px; height: 50px; background: rgba(37, 99, 235, 0.1); color: var(--secondary); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 20px; }
.tran-portfolio .highlight-content h4{ font-size: 16px; margin-bottom: 5px; }
.tran-portfolio .highlight-content p{ font-size: 14px; color: var(--text-muted); margin-bottom: 0; line-height: 1.6; }
.tran-portfolio .edu-section{ background: var(--primary); padding-top: 75px; padding-bottom: 110px; position: relative; }
.tran-portfolio .edu-section .section-title{ color: var(--bg-white); margin-bottom: 55px; }
.tran-portfolio .edu-section .section-title::after{ background: var(--bg-white); opacity: 0.3; }
.tran-portfolio .edu-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tran-portfolio .edu-card{ background: var(--bg-white); padding: 35px 25px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: var(--transition); display: flex; flex-direction: column; position: relative; overflow: hidden; border: none; }
.tran-portfolio .edu-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
.tran-portfolio .edu-card::before{ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 2; }
.tran-portfolio .edu-header-inline{ display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.tran-portfolio .edu-icon-box{ width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.tran-portfolio .card-blue::before{ background: #2563eb; }
.tran-portfolio .card-blue .edu-icon-box{ background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.tran-portfolio .card-amber::before{ background: #d97706; }
.tran-portfolio .card-amber .edu-icon-box{ background: rgba(217, 119, 6, 0.1); color: #d97706; }
.tran-portfolio .card-emerald::before{ background: #059669; }
.tran-portfolio .card-emerald .edu-icon-box{ background: rgba(5, 150, 105, 0.1); color: #059669; }
.tran-portfolio .card-purple::before{ background: #7c3aed; }
.tran-portfolio .card-purple .edu-icon-box{ background: rgba(124, 58, 237, 0.1); color: #7c3aed; }
.tran-portfolio .edu-header-inline h3{ font-size: 18px; color: var(--primary); margin: 0; line-height: 1.4; }
.tran-portfolio .edu-year{ display: inline-block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 12px; background: var(--bg-light); padding: 4px 10px; border-radius: 6px; align-self: flex-start; }
.tran-portfolio .edu-card p{ font-size: 14px; color: var(--text-muted); margin-bottom: 25px; flex-grow: 1; line-height: 1.6; }
.tran-portfolio .edu-highlight{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; align-self: flex-start; background: var(--bg-light); color: var(--secondary); border: 1px solid rgba(37,99,235,0.2); }
.tran-portfolio .skills-container{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.tran-portfolio .skill-card-v2{ background: var(--bg-white); padding: 40px 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(10, 37, 64, 0.05); border-bottom: 4px solid var(--secondary); transition: var(--transition); text-align: left; display: flex; flex-direction: column; }
.tran-portfolio .skill-card-v2:hover{ transform: translateY(-10px); box-shadow: 0 20px 40px rgba(10, 37, 64, 0.12); }
.tran-portfolio .skill-icon-wrapper{ width: 70px; height: 70px; background: rgba(37, 99, 235, 0.06); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--secondary); margin-bottom: 25px; }
.tran-portfolio .skill-card-v2 h3{ font-size: 18px; color: var(--secondary); margin-bottom: 15px; font-weight: 700; }
.tran-portfolio .skill-card-v2 p{ font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 0; flex-grow: 1; }
.tran-portfolio .exp-list{ display: flex; flex-direction: column; max-width: 1000px; margin: 0 auto; }
.tran-portfolio .exp-item{ display: grid; grid-template-columns: 280px 1fr; gap: 50px; padding: 50px 0; border-bottom: 1px solid var(--border-subtle); transition: var(--transition); align-items: start; }
.tran-portfolio .exp-item:first-child{ padding-top: 0; }
.tran-portfolio .exp-item:last-child{ border-bottom: none; padding-bottom: 0; }
.tran-portfolio .exp-meta{ position: relative; }
.tran-portfolio .exp-date{ display: inline-block; font-size: 13px; font-weight: 700; color: var(--secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; background: rgba(37, 99, 235, 0.08); padding: 6px 14px; border-radius: 50px; border: 1px solid rgba(37, 99, 235, 0.15); }
.tran-portfolio .exp-company{ font-size: 22px; font-weight: 800; color: var(--primary); margin-bottom: 5px; line-height: 1.3; }
.tran-portfolio .exp-domain{ font-size: 14px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; font-style: italic; }
.tran-portfolio .exp-company-logo{ max-width: 150px; height: auto; margin-top: 15px; display: block; border-radius: 4px; transition: opacity 0.3s; }
.tran-portfolio .exp-project-gallery{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 18px; margin-bottom: 25px; }
.tran-portfolio .exp-gallery-img{ width: 100%; height: 160px; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: 1px solid rgba(10, 37, 64, 0.05); transition: all 0.3s; display: block; cursor: pointer; background: #e2e8f0; color: transparent; }
.tran-portfolio .exp-gallery-img:hover{ transform: scale(1.05) translateY(-5px); box-shadow: var(--shadow-lg); z-index: 2; }
.tran-portfolio .exp-content h3{ font-size: 24px; color: var(--primary); margin-bottom: 20px; transition: var(--transition); }
.tran-portfolio .exp-item:hover .exp-content h3{ color: var(--secondary); transform: translateX(5px); }
.tran-portfolio .exp-content ul{ list-style: none; padding: 0; margin: 0; }
.tran-portfolio .exp-content ul li{ position: relative; padding-left: 28px; margin-bottom: 16px; color: var(--text-main); line-height: 1.7; }
.tran-portfolio .exp-content ul li::before{ content: '▹'; position: absolute; left: 0; top: -2px; color: var(--secondary); font-size: 20px; font-weight: 700; }
.tran-portfolio .exp-content ul li strong{ color: var(--primary); font-weight: 600; }
.tran-portfolio .projects-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.tran-portfolio .project-card-v4{ background: var(--bg-white); border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(10, 37, 64, 0.05); transition: var(--transition); display: flex; flex-direction: column; border: 1px solid var(--border-subtle); }
.tran-portfolio .project-card-v4:hover{ transform: translateY(-8px); box-shadow: 0 15px 30px rgba(10, 37, 64, 0.1); border-color: rgba(37, 99, 235, 0.2); }
.tran-portfolio .project-img-wrapper{ width: 100%; height: 170px; background-color: #e2e8f0; overflow: hidden; position: relative; }
.tran-portfolio .project-img-wrapper img{ width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; color: transparent; }
.tran-portfolio .project-card-v4:hover .project-img-wrapper img{ transform: scale(1.05); }
.tran-portfolio .yt-overlay-btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 36px; background-color: rgba(255, 255, 255, 0.85); border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; }
.tran-portfolio .yt-overlay-btn::after{ content: ''; border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent #0a2540; margin-left: 4px; transition: all 0.3s ease; }
.tran-portfolio .project-card-v4:hover .yt-overlay-btn{ background-color: #ff0000; transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4); }
.tran-portfolio .project-card-v4:hover .yt-overlay-btn::after{ border-color: transparent transparent transparent #ffffff; }
.tran-portfolio .gallery-overlay-btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 36px; background-color: rgba(255, 255, 255, 0.85); border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; font-size: 18px; color: var(--primary); }
.tran-portfolio .project-card-v4:hover .gallery-overlay-btn{ background-color: var(--secondary); color: #ffffff; transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4); }
.tran-portfolio .project-body-v4{ padding: 20px 20px 25px; flex-grow: 1; display: flex; flex-direction: column; }
.tran-portfolio .project-body-v4 h3{ font-size: 16px; color: var(--primary); margin-bottom: 10px; line-height: 1.4; font-weight: 800; }
.tran-portfolio .project-body-v4 p.desc{ font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
.tran-portfolio .project-link{ font-size: 13px; font-weight: 600; color: var(--secondary); display: inline-flex; align-items: center; gap: 5px; transition: 0.3s; margin-top: auto; }
.tran-portfolio .project-card-v4:hover .project-link{ color: var(--accent); }
.tran-portfolio .project-link i{ transition: transform 0.3s; }
.tran-portfolio .project-card-v4:hover .project-link i{ transform: translateX(4px); }
.tran-portfolio .news-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.tran-portfolio .news-card{ background: var(--bg-white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; }
.tran-portfolio .news-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); }
.tran-portfolio .news-img{ width: 100%; height: 200px; object-fit: cover; background: #e2e8f0; transition: opacity 0.3s;}
.tran-portfolio .news-body{ padding: 25px; flex-grow: 1; display: flex; flex-direction: column;}
.tran-portfolio .news-tag{ font-size: 12px; color: var(--secondary); font-weight: 700; text-transform: uppercase; margin-bottom: 10px; display: block; }
.tran-portfolio .news-body h3{ color: var(--primary); font-size: 18px; margin-bottom: 10px; line-height: 1.4; }
.tran-portfolio .news-body p{ color: var(--text-muted); font-size: 14px; margin-bottom: 15px; line-height: 1.6; flex-grow: 1; }
.tran-portfolio .news-btn{ display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--primary); transition: 0.3s; margin-top: auto; }
.tran-portfolio .news-card:hover .news-btn{ color: var(--secondary); }
.tran-portfolio .news-card:hover .news-btn i{ transform: translateX(5px); }
.tran-portfolio footer{ background: var(--primary); color: var(--bg-white); text-align: center; padding: 80px 0; }
@media (max-width: 1024px){.tran-portfolio .projects-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px){.tran-portfolio .nav-container{ flex-direction: column; gap: 15px; }
.tran-portfolio .nav-brand{ display: none; }
.tran-portfolio .nav-actions{ width: 100%; justify-content: center; }
.tran-portfolio .nav-links{ gap: 15px; flex-wrap: wrap; justify-content: center; }
.tran-portfolio .navbar{ padding: 15px 0; }
.tran-portfolio .profile-grid{ grid-template-columns: 1fr; gap: 50px; text-align: center; }
.tran-portfolio .profile-card-left{ display: flex; flex-direction: column; align-items: center; }
.tran-portfolio .contact-list{ text-align: left; display: inline-block; margin-top: 20px; }
.tran-portfolio .bio-highlights{ grid-template-columns: 1fr; text-align: left; }
.tran-portfolio .skills-container,.tran-portfolio .edu-grid{ grid-template-columns: repeat(2, 1fr); }
.tran-portfolio .exp-item{ grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
.tran-portfolio .news-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){.tran-portfolio .profile-name{ font-size: 36px; }
.tran-portfolio .section-title{ font-size: 28px; }
.tran-portfolio section{ padding: 80px 0; }
.tran-portfolio .skills-container,.tran-portfolio .edu-grid{ grid-template-columns: 1fr; }
.tran-portfolio .exp-project-gallery{ grid-template-columns: repeat(2, 1fr); }
.tran-portfolio .projects-grid{ grid-template-columns: 1fr; }
.tran-portfolio .news-grid{ grid-template-columns: 1fr; }
}
.tran-portfolio:not(.pe-editing) [data-pe-hidden="1"]{ display: none !important; }
.tran-portfolio{font-family:'Montserrat',Arial,sans-serif;background:#f0f6fc;color:#334155;line-height:1.8;font-size:16px;width:100%;isolation:isolate;overflow-wrap:anywhere}
.tran-portfolio .navbar{position:relative;top:auto;z-index:5;padding:22px 0}
.tran-portfolio .nav-container{gap:20px;flex-wrap:wrap}
.tran-portfolio .nav-brand{width:auto;font-weight:700}
.tran-portfolio .nav-links{display:flex;flex-wrap:wrap;gap:20px}
.tran-portfolio .nav-links a{font-size:11px;letter-spacing:.5px}
.tran-portfolio .profile-section{padding-top:80px}
.tran-portfolio .project-img-wrapper{display:block;height:240px}
.tran-portfolio .project-img-wrapper img{display:block;width:100%;height:100%;object-fit:cover}
.tran-portfolio .project-card-v4 h3 a{color:var(--primary)}
.tran-portfolio .trnp-placeholder{display:flex;align-items:center;justify-content:center;min-height:180px;height:100%;background:linear-gradient(135deg,#e0f2fe,#c7d2fe);color:var(--primary);font-size:24px;font-weight:800;letter-spacing:2px}
.tran-portfolio .trnp-eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--secondary);margin-bottom:12px}
.tran-portfolio .trnp-buttons{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.tran-portfolio .trnp-outline{display:inline-block;border:1px solid var(--secondary);border-radius:30px;padding:10px 22px;font-weight:600}
.tran-portfolio .contact-btn{display:inline-flex;width:fit-content}
.tran-portfolio .trnp-mc-intro{display:flex;align-items:center;gap:40px}
.tran-portfolio .trnp-mc-intro>div{flex:1;min-width:0}
.tran-portfolio .trnp-mc-photo{width:40%;height:auto;max-height:550px;object-fit:cover;border-radius:24px}
.tran-portfolio .trnp-video{margin:24px 0;aspect-ratio:16/9}
.tran-portfolio .trnp-video iframe{width:100%;height:100%;border:0}
.tran-portfolio .trnp-contact{text-align:center}
.tran-portfolio .trnp-contact .trnp-buttons{justify-content:center}
.tran-portfolio .trnp-detail{padding-top:32px;padding-bottom:48px}
.tran-portfolio .trnp-cover{width:100%;max-height:620px;object-fit:cover;border-radius:18px;height:auto}
.tran-portfolio .trnp-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:32px 0}
.tran-portfolio dt{font-weight:700;color:var(--primary)}
.tran-portfolio dd{margin:0}
.tran-portfolio .trnp-story img{max-width:100%;height:auto}
.tran-portfolio .trnp-pagination{display:flex;justify-content:center;gap:12px;margin-top:40px;flex-wrap:wrap}
.tran-portfolio .page-numbers{padding:6px 15px;border-radius:10px;background:white}
.tran-portfolio .page-numbers.current{background:var(--primary);color:white}
.tran-portfolio .trnp-empty{text-align:center;color:#64748b}
.tran-portfolio footer{background:var(--primary);color:#cbd5e1;padding:55px 0;text-align:center}
.tran-portfolio a:focus-visible,.tran-portfolio button:focus-visible{outline:3px solid #ff6b35;outline-offset:4px}
body.trnp-canvas{margin:0!important;padding:0!important;background:#f0f6fc}
body.trnp-canvas #main{margin:0;padding:0;max-width:none}
@media(max-width:768px){.tran-portfolio .container{padding:0 22px}.tran-portfolio section{padding:48px 0}.tran-portfolio .profile-grid{grid-template-columns:1fr;gap:32px}.tran-portfolio .profile-name{font-size:30px}.tran-portfolio .trnp-mc-intro{flex-direction:column}.tran-portfolio .trnp-mc-photo{width:100%}.tran-portfolio .trnp-facts{grid-template-columns:1fr}.tran-portfolio .nav-links{gap:12px}.tran-portfolio .section-title{font-size:25px;margin-bottom:32px}.tran-portfolio .nav-container{padding:0 22px}}
@media(prefers-reduced-motion:reduce){.tran-portfolio *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* 1.1 — Editorial portfolio, white canvas and compact navigation. */
.tran-portfolio{--trnp-ink:#182b3a;--trnp-muted:#63717a;--trnp-paper:#fafaf7;background:#fff;color:var(--trnp-ink);font-weight:400;line-height:1.75;text-align:left}
.tran-portfolio .container{width:100%;max-width:1200px;margin:0 auto;padding:0 48px}
.tran-portfolio section{padding:88px 0;scroll-margin-top:24px}
.tran-portfolio .navbar{background:#fff;border-bottom:1px solid #e9edee;box-shadow:none;backdrop-filter:none;padding:22px 0;position:relative}
.tran-portfolio .nav-container{max-width:1360px;padding:0 48px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:nowrap}
.tran-portfolio .nav-brand{display:flex;align-items:center;gap:12px;color:var(--trnp-ink);font-size:13px;letter-spacing:0;white-space:normal;line-height:1.4;flex-shrink:0}
.tran-portfolio .nav-brand small{display:block;font-size:9px;font-weight:500;letter-spacing:2px;color:var(--trnp-muted);margin-top:4px}
.tran-portfolio .trnp-monogram{display:grid;place-items:center;background:#eff2ee;border-radius:50%;height:44px;width:44px;color:var(--trnp-ink);font-size:24px;font-weight:800}
.tran-portfolio .nav-links{display:flex;align-items:center;gap:25px;flex-wrap:nowrap}
.tran-portfolio .nav-links a{font-size:12px;font-weight:500;color:var(--trnp-muted);text-transform:none;letter-spacing:0;padding:8px 0;white-space:nowrap;line-height:1.4}
.tran-portfolio .nav-links a::after{display:none}
.tran-portfolio .nav-links a:hover,.tran-portfolio .nav-links a[aria-current=page]{color:var(--primary);text-decoration:underline;text-underline-offset:6px}
.tran-portfolio .nav-links .trnp-nav-cta{border:1px solid #d4dcde;border-radius:30px;padding:11px 20px;color:var(--trnp-ink)}
.tran-portfolio .trnp-menu-toggle{display:none;background:#fff;border:1px solid #d4dcde;color:var(--trnp-ink);border-radius:12px;padding:10px 14px;font:600 13px 'Montserrat',Arial,sans-serif;cursor:pointer}
.tran-portfolio .profile-section{padding:76px 0 88px;background:var(--trnp-paper)}
.tran-portfolio .profile-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:70px;align-items:center}
.tran-portfolio .trnp-eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:600;color:var(--trnp-muted);margin:0 0 20px;display:flex;align-items:center;gap:12px}
.tran-portfolio .trnp-line{display:inline-block;width:30px;height:1px;background:var(--trnp-muted)}
.tran-portfolio .profile-name{font-size:clamp(38px,4.1vw,60px);line-height:1.12;font-weight:700;letter-spacing:-2.2px;margin:0 0 20px;color:var(--primary);text-transform:none}
.tran-portfolio .profile-role{font-size:14px;text-transform:none;font-weight:500;letter-spacing:.2px;color:var(--trnp-muted);margin:0 0 26px;line-height:1.6}
.tran-portfolio .bio-text{font-size:14px;line-height:1.95;color:#52616b;margin:0 0 28px;max-width:550px}
.tran-portfolio .bio-text p{margin:0 0 12px}
.tran-portfolio .trnp-buttons{gap:22px}
.tran-portfolio .contact-btn{background:var(--primary);box-shadow:none;border:1px solid var(--primary);color:white!important;border-radius:30px;padding:13px 23px;font-size:12px;letter-spacing:0;gap:20px;min-height:46px}
.tran-portfolio .contact-btn:hover{background:#234153;box-shadow:none;transform:none}
.tran-portfolio .trnp-outline{border:1px solid #c9d1d5;color:var(--trnp-ink);font-size:12px;padding:12px 21px;min-height:46px;border-radius:30px;background:transparent}
.tran-portfolio .trnp-text-link{color:var(--trnp-ink);font-size:12px;font-weight:600;padding:10px 0;text-decoration:underline;text-underline-offset:5px}
.tran-portfolio .trnp-hero-meta{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--trnp-muted);font-size:10px;border-top:1px solid #dfe5e3;margin-top:34px;padding-top:18px}
.tran-portfolio .profile-card-left{text-align:left;min-width:0}
.tran-portfolio .profile-image-container{width:100%;height:auto;aspect-ratio:4/5;margin:0;z-index:0;background:#e9eeeb;border-radius:150px 150px 18px 18px;overflow:hidden}
.tran-portfolio .profile-image-container::before{display:none}
.tran-portfolio .profile-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%;border:0;border-radius:0;box-shadow:none;background:#e9eeeb}
.tran-portfolio .trnp-placeholder{background:#e9eeeb;color:#7e9289;min-height:220px;font-size:24px;letter-spacing:2px}
.tran-portfolio .profile-image.trnp-placeholder{font-size:100px;font-weight:500;font-family:Georgia,serif}
.tran-portfolio .trnp-portrait-caption{display:flex;justify-content:space-between;padding:15px 2px;color:var(--trnp-muted);font-size:10px}
.tran-portfolio .bg-pattern-dots{background:#f6f7f5;background-image:none}
.tran-portfolio .bg-white{background:white}
.tran-portfolio .trnp-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 36px}
.tran-portfolio .section-title{text-align:left;text-transform:none;font-size:32px;font-weight:600;letter-spacing:-1px;line-height:1.3;margin:0 0 36px;color:var(--primary)}
.tran-portfolio .section-title::after{display:none}
.tran-portfolio .trnp-section-head .section-title{margin:0}
.tran-portfolio .trnp-section-head .trnp-eyebrow{margin-bottom:12px}
.tran-portfolio .projects-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.tran-portfolio .project-card-v4{border:1px solid #e2e7e4;border-radius:16px;box-shadow:none;background:white;overflow:hidden;display:flex;flex-direction:column;min-width:0;transform:none}
.tran-portfolio .project-card-v4:hover{transform:translateY(-4px);box-shadow:0 14px 30px #182b3a0a}
.tran-portfolio .project-img-wrapper{height:auto;aspect-ratio:4/3;overflow:hidden;flex-shrink:0}
.tran-portfolio .project-body-v4{padding:25px;flex:1}
.tran-portfolio .project-body-v4 h3{font-size:19px;line-height:1.45;letter-spacing:-.3px;margin-bottom:12px}
.tran-portfolio .project-body-v4 .desc{font-size:12px;color:var(--trnp-muted);line-height:1.8}
.tran-portfolio .project-link{color:var(--primary);font-size:11px;font-weight:600}
.tran-portfolio .trnp-empty{text-align:left;padding:25px 28px;border:1px dashed #ced7d0;border-radius:14px;color:var(--trnp-muted);font-size:13px;margin:0}
.tran-portfolio .trnp-mc-intro{gap:54px}
.tran-portfolio .trnp-mc-intro p{font-size:14px;color:var(--trnp-muted);line-height:1.9}
.tran-portfolio .trnp-mc-photo{border-radius:18px;width:42%;max-height:540px;object-fit:cover}
.tran-portfolio .trnp-contact-section{background:#eef1ec;padding:72px 0}
.tran-portfolio .trnp-contact{text-align:center;max-width:880px}
.tran-portfolio .trnp-contact .trnp-eyebrow{justify-content:center}
.tran-portfolio .trnp-contact .section-title{text-align:center;font-size:38px;max-width:650px;margin:0 auto 28px;line-height:1.25}
.tran-portfolio footer{background:#fff;color:var(--trnp-muted);text-align:center;border-top:1px solid #e8ece7;padding:35px 0}
.tran-portfolio footer h3{color:var(--primary)!important;font-size:15px;margin-bottom:5px}
.tran-portfolio footer p{font-size:11px;margin-bottom:12px}
.tran-portfolio footer small{font-size:10px}
body.trnp-canvas{background:#fff}
body.trnp-canvas #main{width:100%;min-height:100vh}
@media(max-width:1100px){.tran-portfolio .nav-container{padding:0 28px;flex-wrap:wrap}.tran-portfolio .nav-links{gap:17px}.tran-portfolio .nav-brand{font-size:12px}.tran-portfolio .profile-grid{gap:36px}}
@media(max-width:900px){.tran-portfolio .trnp-menu-toggle{display:block}.tran-portfolio .nav-links{width:100%;display:none;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid #e8ece7;padding-top:12px}.tran-portfolio .nav-links.is-open{display:flex}.tran-portfolio .nav-links a{padding:14px 8px;font-size:14px}.tran-portfolio .nav-links .trnp-nav-cta{margin-top:8px;text-align:center}.tran-portfolio .projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tran-portfolio .container{padding:0 30px}.tran-portfolio .profile-name{font-size:42px}}
@media(max-width:600px){.tran-portfolio .container{padding:0 24px}.tran-portfolio .navbar{padding:16px 0}.tran-portfolio .nav-container{padding:0 24px;gap:16px}.tran-portfolio .nav-brand{font-size:11px}.tran-portfolio .trnp-monogram{width:36px;height:36px;font-size:21px}.tran-portfolio section{padding:52px 0}.tran-portfolio .profile-section{padding:44px 0}.tran-portfolio .profile-grid{grid-template-columns:1fr;gap:30px}.tran-portfolio .profile-name{font-size:42px;letter-spacing:-1.8px;max-width:350px}.tran-portfolio .profile-role{font-size:13px}.tran-portfolio .bio-text{font-size:13px}.tran-portfolio .profile-image-container{max-width:350px;aspect-ratio:4/4.3;margin:auto;border-radius:120px 120px 16px 16px}.tran-portfolio .trnp-portrait-caption{max-width:350px;margin:auto}.tran-portfolio .trnp-hero-meta{margin-top:25px}.tran-portfolio .trnp-buttons{gap:14px}.tran-portfolio .projects-grid{grid-template-columns:1fr;gap:22px}.tran-portfolio .section-title{font-size:28px}.tran-portfolio .trnp-section-head{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:24px}.tran-portfolio .trnp-mc-intro{flex-direction:column;gap:24px}.tran-portfolio .trnp-mc-photo{width:100%}.tran-portfolio .trnp-contact .section-title{font-size:30px}.tran-portfolio .trnp-eyebrow{font-size:9px}.tran-portfolio .trnp-menu-toggle{font-size:12px;padding:9px 11px}}
.tran-portfolio .nav-container{flex-direction:row}
.tran-portfolio .profile-image.trnp-placeholder{display:flex;align-items:center;justify-content:center}