:root {
--bg: #050505;
--bg-soft: #0d0d0d;
--card: #101010;
--line: #262626;
--line-soft: #1b1b1b;
--text: #ffffff;
--muted: #c7c7c7;
--muted-2: #ff9a3d;
--accent: #ff7a00;
--accent-dark: #e56700;
--max-width: 1080px;
--radius: 14px;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box; 
}

html {
scroll-behavior: smooth;
}

body {
font-family: "Inter", sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.72;
}

img {
display: block;
max-width: 100%;
}

a {
text-decoration: none;
color: inherit;
}

.container {
width: min(100% - 32px, var(--max-width));
margin: 0 auto;
}

.site-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(5, 5, 5, 0.92);
border-bottom: 1px solid transparent;
backdrop-filter: blur(8px);
transition: 0.25s ease;
}

.site-header.scrolled {
border-bottom-color: var(--line);
}

.nav {
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}

.brand {
font-weight: 700;
letter-spacing: -0.02em;
}

.menu {
display: flex;
gap: 22px;
}

.menu a {
color: #d6d6d6;
}

.menu a.active,
.menu a:hover {
color: var(--accent);
}
.social-links a,
.project-links a,
.cv-contact a {
color: var(--accent);
}
.social-links a:hover,
.project-links a:hover,
.cv-contact a:hover {
color: #ffffff;
}

.section-title,
.section-mini-title,
.page-title,
.story-item h3,
.project-card h3,
.project-list-item h3,
.paper-item h3,
.publication-item h3,
.blog-item h3,
.cv-name,
.cv-block h3 {
color: #ffffff;
}

.story-item p,
.project-card p,
.project-list-item p,
.paper-item p,
.publication-item p,
.blog-item p,
.cv-main p,
.cv-block p,
.about-content p {
color: var(--muted);
}

.project-type,
.paper-org,
.story-meta,
.project-subtitle,
.paper-subtitle,
.blog-date,
.last-edited,
.stack-code {
color: var(--muted-2);
}

.filter-chip.active {
background: var(--accent);
border-color: var(--accent);
color: #ffffff;
}

.menu-toggle {
display: none;
width: 42px;
height: 42px;
border: 1px solid var(--line);
background: transparent;
border-radius: 12px;
cursor: pointer;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
}

.menu-toggle span {
width: 18px;
height: 2px;
border-radius: 999px;
background: var(--text);
}

.section {
padding: 72px 0;
}

.hero {
padding-top: 80px;
}

.hero-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 40px;
align-items: start;
}

.eyebrow {
color: var(--muted-2);
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.18em;
margin-bottom: 16px;
}

.hero h1 {
font-size: clamp(2rem, 5vw, 3.8rem);
line-height: 1.08;
letter-spacing: -0.04em;
font-weight: 800;
max-width: 780px;
margin-bottom: 20px;
}

.lead {
max-width: 760px;
color: var(--muted);
font-size: 1.04rem;
margin-bottom: 24px;
}

.socials {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.socials a {
color: var(--muted);
border-bottom: 1px solid transparent;
transition: 0.25s ease;
}

.socials a:hover {
color: var(--text);
border-color: var(--text);
}

.hero-side {
display: grid;
gap: 16px;
}

.portrait-card,
.secondary-card,
.story-item,
.project-card,
.project-list-item,
.paper-item,
.publication-item,
.blog-item,
.cv-main,
.cv-details {
background: rgba(16, 16, 16, 0.92);
border: 1px solid var(--line);
border-radius: var(--radius);
}

.portrait-card {
overflow: hidden;
}

.portrait-card img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}

.mini-note {
padding: 18px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: #101010;
color: var(--muted);
}

.section-head {
margin-bottom: 24px;
}

.section-head h2 {
font-size: clamp(1.3rem, 2vw, 1.9rem);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 700;
}

.content-grid.two-col {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 20px;
}

.text-card {
padding: 24px;
}

.text-card h3 {
margin-bottom: 12px;
font-size: 1.05rem;
}

.text-card p + p {
margin-top: 14px;
}

.clean-list {
list-style: none;
display: grid;
gap: 10px;
color: var(--muted);
margin-top: 10px;
}

.clean-list li {
position: relative;
padding-left: 16px;
}

.clean-list li::before {
content: "–";
position: absolute;
left: 0;
color: var(--muted-2);
}

.timeline {
display: grid;
gap: 16px;
}

.timeline-item {
padding: 22px;
}

.timeline-item time,
.blog-item time {
display: block;
color: var(--muted-2);
font-size: 0.92rem;
margin-bottom: 8px;
}

.timeline-item h3,
.project-card h3,
.stack-item h3,
.blog-item h3 {
font-size: 1.15rem;
margin-bottom: 8px;
letter-spacing: -0.02em;
}

.timeline-item p,
.project-card p,
.stack-item p,
.blog-item p,
.cv-box p {
color: var(--muted);
}

.tag,
.project-meta {
display: inline-block;
color: var(--muted-2);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: 10px;
}

.projects-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}

.project-card {
padding: 22px;
}

.project-links {
display: flex;
gap: 18px;
margin-top: 16px;
}

.project-links a {
color: var(--text);
border-bottom: 1px solid var(--line);
}

.stack-list,
.blog-list {
display: grid;
gap: 16px;
}

.stack-item {
display: grid;
grid-template-columns: 72px 1fr;
gap: 18px;
padding: 22px;
align-items: start;
}

.stack-code {
color: var(--muted-2);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.08em;
}

.blog-item {
padding: 22px;
}

.cv-box {
padding: 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}

.cv-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 18px;
border-radius: 999px;
background: var(--accent);
color:#ffffff;
font-weight: 700;
}
.btn:hover {
background: var(--accent-dark);
}

.btn-outline {
background: transparent;
color: #ffffff;
border: 1px solid var(--line);
}

.to-top {
position: fixed;
right: 18px;
bottom: 18px;
width: 42px;
height: 42px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(16, 16, 16, 0.95);
color: var(--accent);
cursor: pointer;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: 0.25s ease;
}

.to-top.show {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}

.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
opacity: 1;
transform: translateY(0);
}

.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }

@media (max-width: 900px) {
.hero-grid,
.content-grid.two-col,
.projects-grid,
.cv-box,
.stack-item {
grid-template-columns: 1fr;
}

.cv-box {
align-items: flex-start;
}
}

@media (max-width: 760px) {
.menu-toggle {
display: inline-flex;
}

.menu {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 16px;
left: 16px;
padding: 16px;
background: #111111;
border: 1px solid var(--line);
border-radius: 16px;
flex-direction: column;
gap: 12px;
}

.menu.open {
display: flex;
}

.section {
padding: 56px 0;
}

.hero {
padding-top: 56px;
}

.text-card,
.timeline-item,
.project-card,
.stack-item,
.blog-item,
.cv-box {
padding: 18px;
}
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid #2a2a2a;
color: #d1d5db;
font-family: "Inter", sans-serif;
font-size: 0.95rem;
font-weight: 500;
backdrop-filter: blur(10px);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.status-dot {
width: 10px;
height: 10px;
background-color: #22c55e;
border-radius: 50%;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}
/* Section cards - orange border style */
.section:not(.hero) > .container {
position: relative;
padding: 42px;
border-radius: 28px;

background: rgba(16, 16, 16, 0.92);
backdrop-filter: blur(14px);

border: 1px solid rgba(16, 16, 16, 0.92);

box-shadow:
0 20px 60px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Glow cam nhẹ phía sau */
.section:not(.hero) > .container::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 28px;

background: linear-gradient(
135deg,
rgba(255, 122, 0, 0.25),
transparent 40%
);

filter: blur(40px);
opacity: 0.4;
z-index: -1;
}
.section:not(.hero) > .container {
border: 1px solid transparent;

background:
linear-gradient(#0c0c0c, #0c0c0c) padding-box,
linear-gradient(
135deg,
rgba(255,122,0,0.6),
rgba(255,255,255,0.08)
) border-box;
}
.section:not(.hero) > .container {
transition: all 0.3s ease;
}

.section:not(.hero) > .container:hover {
border-color: rgba(255, 122, 0, 0.5);
transform: translateY(-2px);
}
/* About layout */
.about-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 32px;
align-items: center;
}

/* Text */
.about-text p {
margin-bottom: 16px;
color: var(--muted);
line-height: 1.7;
}

/* Image */
.about-image {
position: relative;
border-radius: 20px;
overflow: hidden;

border: 1px solid rgba(255, 122, 0, 0.3);

background: rgba(16,16,16,0.8);
}

/* Image size */
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 5;
display: block;
}

/* Glow nhẹ giống style bạn đang dùng */
.about-image::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 20px;

background: linear-gradient(
135deg,
rgba(255,122,0,0.25),
transparent 50%
);

filter: blur(30px);
opacity: 0.4;
z-index: -1;
}

/* Hover nhẹ */
.about-image img {
transition: transform 0.4s ease;
}

.about-image:hover img {
transform: scale(1.05);
}
@media (max-width: 900px) {
.about-grid {
grid-template-columns: 1fr;
}

.about-image {
order: -1; 
}
}
.about-grid {
grid-template-columns: 1.4fr 0.6fr;
}
.about-image {
border-radius: 28px;
}

.tech-stack {
display: grid;
gap: 0;
border-top: 1px solid var(--line);
}

.tech-row {
display: grid;
grid-template-columns: 230px 1fr;
gap: 28px;
padding: 24px 0;
border-bottom: 1px solid var(--line);
align-items: start;
}

.tech-title {
color: var(--accent);
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.tech-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.tech-tags span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 7px 13px;
border-radius: 999px;
background: rgba(255, 122, 0, 0.08);
border: 1px solid rgba(255, 122, 0, 0.22);
color: var(--muted);
font-size: 0.94rem;
line-height: 1;
}

.tech-tags span:hover {
color: #ffffff;
border-color: rgba(255, 122, 0, 0.45);
background: rgba(255, 122, 0, 0.14);
}

@media (max-width: 760px) {
.tech-row {
grid-template-columns: 1fr;
gap: 12px;
}
}
.experience-list {
border-top: 1px solid var(--line);
}

.experience-item {
display: grid;
grid-template-columns: 220px 1fr;
gap: 40px;
padding: 32px 0;
border-bottom: 1px solid var(--line);
}

.experience-time {
color: var(--accent);
font-size: 0.95rem;
font-weight: 600;
}

.experience-type {
color: var(--muted-2);
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.78rem;
font-weight: 700;
margin-bottom: 8px;
}

.experience-content h3 {
color: #ffffff;
font-size: 1.2rem;
margin-bottom: 4px;
}

.experience-role {
color: var(--muted);
font-weight: 600;
margin-bottom: 10px;
}

.experience-content p:last-child {
color: var(--muted);
max-width: 820px;
line-height: 1.7;
}

@media (max-width: 760px) {
.experience-item {
grid-template-columns: 1fr;
gap: 10px;
padding: 26px 0;
}
}
/* Case Study Pages */
.case-hero {
padding: 110px 0 70px;
  background: #rgba(5, 5, 5, 0.92);
  background: rgba(5, 5, 5, 0.92);
}

.case-title {
max-width: 1000px;
font-size: clamp(2rem, 5vw, 3.8rem);
line-height: 1.05;
letter-spacing: -0.05em;
margin-bottom: 24px;
color: #ffffff;
}

.case-lead {
max-width: 900px;
color: var(--muted);
font-size: 1.08rem;
margin-bottom: 28px;
}

.case-section {
padding: 70px 0;
  background: #rgba(5, 5, 5, 0.92);
  background: rgba(5, 5, 5, 0.92);
}

.case-section .container {
max-width: 1100px;
}

.case-section h2 {
font-size: clamp(1.35rem, 2vw, 1.9rem);
margin-bottom: 22px;
color: #ffffff;
line-height: 1.15;
letter-spacing: -0.03em;
font-weight: 700;
}

.case-section p {
color: #d8d8df;
font-size: 1.05rem;
max-width: 1100px;
line-height: 1.8;
}

.case-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}

.case-card {
padding: 24px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.12);
}

.case-card h3 {
margin-bottom: 10px;
color: #ffffff;
}

.case-list {
display: grid;
gap: 14px;
color: #d8d8df;
padding-left: 20px;
}

.case-list li::marker {
color: var(--accent);
}

@media (max-width: 900px) {
.case-grid {
grid-template-columns: 1fr;
}
}

.case-hero-image img {
width: 100%;
height: 500px;
object-fit: cover;
opacity: 0.92;
}

.info-grid,
.pain-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}

.info-card,
.pain-card {
padding: 24px;
border-radius: 20px;

background:
linear-gradient(#111111, #111111) padding-box,
linear-gradient(
135deg,
rgba(255,122,0,0.55),
rgba(255,255,255,0.06)
) border-box;

border: 1px solid transparent;
}

.info-card span {
display: block;
color: var(--accent);
margin-bottom: 10px;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.12em;
}

.pain-icon {
font-size: 2rem;
margin-bottom: 14px;
}

.case-text {
max-width: 900px;
display: grid;
gap: 22px;
}

.table-wrapper {
overflow-x: auto;
}

.case-table {
width: 100%;
border-collapse: collapse;
}

.case-table th,
.case-table td {
padding: 18px;
border: 1px solid rgba(255,255,255,0.08);
text-align: left;
}

.case-table th {
color: #ffffff;
background: rgba(255,122,0,0.08);
}

.case-table td {
color: #d8d8df;
}

@media (max-width: 900px) {
.info-grid,
.pain-grid {
grid-template-columns: 1fr;
}

.case-hero-image img {
height: 300px;
}
}
/* BPMN Collapsible */
.bpmn-dropdown {
margin-top: 36px;
border-radius: 22px;
overflow: hidden;

background:
linear-gradient(#111111, #111111) padding-box,
linear-gradient(
135deg,
rgba(255,122,0,0.5),
rgba(255,255,255,0.06)
) border-box;

border: 1px solid transparent;
}

/* Header */
.bpmn-dropdown summary {
list-style: none;
cursor: pointer;

display: flex;
align-items: center;
justify-content: space-between;

gap: 16px;

padding: 22px 26px;

color: #ffffff;
font-weight: 600;
font-size: 1rem;

transition: 0.3s ease;
}

/* Remove default arrow */
.bpmn-dropdown summary::-webkit-details-marker {
display: none;
}

/* Hover */
.bpmn-dropdown summary:hover {
background: rgba(255,122,0,0.05);
}

/* Small text */
.bpmn-dropdown summary span {
color: var(--muted);
font-size: 0.9rem;
font-weight: 400;
}

/* Open state */
.bpmn-dropdown[open] summary {
border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Content */
.bpmn-content {
padding: 26px;
}

/* Description */
.bpmn-note {
color: var(--muted);
margin-bottom: 22px;
line-height: 1.7;
}

/* Smooth image */
.bpmn-content img {
border-radius: 20px;
}


.figma-main-dropdown {
margin-top: 36px;
border-radius: 22px;
overflow: hidden;

background:
linear-gradient(#111111, #111111) padding-box,
linear-gradient(
135deg,
rgba(255,122,0,0.5),
rgba(255,255,255,0.06)
) border-box;

border: 1px solid transparent;
}

/* Header */
.figma-main-dropdown summary {
list-style: none;
cursor: pointer;

display: flex;
align-items: center;
justify-content: space-between;

gap: 16px;

padding: 22px 26px;

color: #ffffff;
font-weight: 600;
font-size: 1rem;

transition: 0.3s ease;
}

/* Remove default arrow */
.figma-main-dropdown:-webkit-details-marker {
display: none;
}

/* Hover */
.figma-main-dropdown:hover {
background: rgba(255,122,0,0.05);
}

/* Small text */
.figma-main-dropdown summary span {
color: var(--muted);
font-size: 0.9rem;
font-weight: 400;
}

/* Open state */
.figma-main-dropdown[open] summary {
border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* =========================
  Mobile Responsive Fix
========================= */

@media (max-width: 900px) {
.container {
width: min(100% - 28px, var(--max-width));
}

.hero-grid,
.about-grid,
.projects-grid,
.case-grid {
grid-template-columns: 1fr;
}

.hero-side {
order: -1;
}

.section-card {
padding: 28px;
}

.portrait-card {
max-width: 360px;
margin: 0 auto;
}
}

@media (max-width: 760px) {
body {
line-height: 1.6;
}

.nav {
min-height: 64px;
}

.brand {
font-size: 0.95rem;
}

.menu-toggle {
display: inline-flex;
}

.menu {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 14px;
left: 14px;
padding: 16px;
background: #111111;
border: 1px solid var(--line);
border-radius: 16px;
flex-direction: column;
gap: 12px;
z-index: 100;
}

.menu.open {
display: flex;
}

.section {
padding: 42px 0;
}

.hero {
padding-top: 42px;
}

.hero h1 {
font-size: clamp(2rem, 5vw, 3.8rem);
line-height: 1.02;
letter-spacing: -0.05em;
}

.lead {
font-size: 0.98rem;
}

.section-head h2,
.section-title {
font-size: 2rem;
}

.section-card,
.text-card,
.timeline-item,
.project-card,
.stack-item,
.blog-item,
.cv-box {
padding: 22px;
border-radius: 20px;
}

.about-grid {
grid-template-columns: 1fr;
gap: 22px;
}

.about-image {
order: -1;
}

.experience-item,
.tech-row,
.stack-item {
grid-template-columns: 1fr;
gap: 12px;
}

.projects-grid {
grid-template-columns: 1fr;
}

.cv-box {
flex-direction: column;
align-items: flex-start;
}

.project-links,
.socials,
.cv-actions {
flex-wrap: wrap;
}

.status-badge {
width: fit-content;
font-size: 0.85rem;
padding: 8px 14px;
}
}

@media (max-width: 480px) {
.container {
width: min(100% - 22px, var(--max-width));
}

.hero h1 {
font-size: 2.55rem;
}

.section-card {
padding: 18px;
}

.project-card,
.timeline-item,
.stack-item,
.cv-box {
padding: 18px;
}

.tech-tags {
gap: 8px;
}

.tech-tags span,
.tech-tags a {
font-size: 0.84rem;
padding: 7px 11px;
}

.to-top {
right: 14px;
bottom: 14px;
}
}