/* ===== Nen tang: mot mau nhan duy nhat ===== */
:root{
  --nen:      #08090b;
  --nen-noi:  #0e1013;   /* be mat noi len */
  --ke:       rgba(255,255,255,.07);
  --ke-dam:   rgba(255,255,255,.13);
  --chu:      #e7e9ec;
  --chu-mo:   #8b9198;
  --chu-rat-mo:#5d636a;
  --nhan:     #5ee9d5;   /* MAU NHAN DUY NHAT - them mau thu hai la hong */
  --do-rong:  66ch;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--nen);
  color:var(--chu);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:16.5px;
  line-height:1.7;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}

.khung{ max-width:1120px; margin:0 auto; padding:0 34px; }

h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.035em; line-height:1.05; }
p{ margin:0 0 1.3em; max-width:var(--do-rong); color:var(--chu-mo); }
p:last-child{ margin-bottom:0; }

/* Chu don cach cho nhan va ma */
.ma{
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px;
  letter-spacing:.02em;
}

a{ color:var(--chu); text-decoration:none; }

/* ===== Mo dau ===== */
.mo-dau{
  position:relative;
  padding:132px 0 118px;
  overflow:hidden;
}
/* Quang sang rat nhat - cung mot mau nhan, khong them mau nao khac */
.mo-dau::before{
  content:"";
  position:absolute;
  top:-360px; left:50%;
  width:1000px; height:640px;
  transform:translateX(-58%);
  background:radial-gradient(closest-side, rgba(94,233,213,.10), transparent 72%);
  pointer-events:none;
}
.mo-dau > *{ position:relative; }

.chip{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--ke-dam);
  border-radius:999px;
  padding:7px 15px 7px 12px;
  color:var(--chu-mo);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.cham{
  width:6px; height:6px; border-radius:50%;
  background:var(--nhan);
  box-shadow:0 0 0 4px rgba(94,233,213,.14);
}

/* Dau trang hai cot: chu ben trai, anh ben phai */
.dau-trang{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:66px;
  align-items:center;
}

.chan-dung{
  margin:0;
  aspect-ratio:4/5;
  border:1px solid var(--ke);
  border-radius:15px;
  overflow:hidden;
  background:var(--nen-noi);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,
             0 22px 46px -26px rgba(0,0,0,.9),
             0 70px 100px -70px rgba(0,0,0,.85);
}
.chan-dung img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}

.ten{
  font-size:clamp(52px, 8.4vw, 108px);
  margin:34px 0 0;
  letter-spacing:-.055em;
}

.vai-tro{
  margin:20px 0 0;
  color:var(--chu-mo);
  text-transform:uppercase;
  letter-spacing:.19em;
  max-width:none;
}
.vai-tro b{ color:var(--chu); font-weight:500; }

.cau-mo{
  font-size:clamp(19px, 2.1vw, 24px);
  line-height:1.6;
  color:var(--chu-mo);
  margin:44px 0 0;
  max-width:52ch;
  letter-spacing:-.012em;
}

/* ===== Cua so dong lenh ===== */
.terminal{
  margin:66px 0 0;
  background:var(--nen-noi);
  border:1px solid var(--ke);
  border-radius:11px;
  overflow:hidden;
  /* bong chong nhieu lop mem, khong dung mot lop phang */
  box-shadow:0 1px 0 rgba(255,255,255,.045) inset,
             0 18px 40px -22px rgba(0,0,0,.9),
             0 60px 90px -60px rgba(0,0,0,.8);
}
.thanh-tren{
  display:flex; align-items:center; gap:8px;
  padding:12px 15px;
  border-bottom:1px solid var(--ke);
}
.nut{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); }
.thanh-tren .ten-cua-so{
  margin-left:9px; color:var(--chu-rat-mo);
}
.than-terminal{ padding:22px 20px 26px; overflow-x:auto; }
.dong-lenh{ margin-bottom:19px; }
.dong-lenh:last-child{ margin-bottom:0; }
.dong-lenh .nhac{ color:var(--nhan); user-select:none; }
.dong-lenh .lenh{ color:var(--chu); }
.dong-lenh pre{
  margin:8px 0 0;
  color:var(--chu-mo);
  font-family:inherit;
  font-size:inherit;
  line-height:1.85;
  white-space:pre-wrap;
}

/* ===== Muc ===== */
.muc{ padding:112px 0; border-top:1px solid var(--ke); }

.dau-muc{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,8fr);
  gap:52px;
  margin-bottom:62px;
  align-items:start;
}
.so-muc{ color:var(--nhan); padding-top:9px; }
.tua{ font-size:clamp(30px, 4vw, 44px); }
.tua + p{ margin-top:16px; }

/* ===== Kinh nghiem ===== */
.viec{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,8fr);
  gap:52px;
  padding:38px 0;
  border-top:1px solid var(--ke);
}
.viec:first-of-type{ border-top:none; }
.viec .thoi{ color:var(--chu-rat-mo); padding-top:7px; }
.chuc-danh{ font-size:23px; letter-spacing:-.025em; }
.noi-lam{ color:var(--chu-rat-mo); margin:5px 0 14px; }

.the-cn{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.the-cn span{
  border:1px solid var(--ke);
  border-radius:5px;
  padding:4px 9px;
  color:var(--chu-mo);
}

/* ===== Du an ===== */
.du-an{
  border:1px solid var(--ke);
  border-radius:13px;
  background:var(--nen-noi);
  padding:38px 36px;
  margin-bottom:22px;
  overflow:hidden;              /* de anh khong tran ra goc bo tron */
  transition:border-color .3s ease;
}
.du-an:last-child{ margin-bottom:0; }
.du-an:hover{ border-color:var(--ke-dam); }

.anh-du-an{
  margin:-38px -36px 30px;
  aspect-ratio:16/10;
  overflow:hidden;
  border-bottom:1px solid var(--ke);
  background:var(--nen);
}
.anh-du-an img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}

.dinh-du-an{
  display:flex; justify-content:space-between; gap:20px;
  align-items:baseline; flex-wrap:wrap;
  color:var(--chu-rat-mo);
  margin-bottom:18px;
}
.ten-du-an{ font-size:clamp(24px, 3vw, 32px); }
.tom-tat{ color:var(--chu-mo); margin:9px 0 18px; }

.so-lieu{
  display:flex; flex-wrap:wrap; gap:44px;
  margin-top:28px; padding-top:26px;
  border-top:1px solid var(--ke);
}
.so-lieu .so{
  font-size:27px; font-weight:600; letter-spacing:-.035em;
  display:block; line-height:1.2;
}
.so-lieu .nhan-so{ color:var(--chu-rat-mo); display:block; margin-top:3px; }

/* ===== Ky nang ===== */
.luoi-ky-nang{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(228px,1fr));
  gap:44px;
}
.nhom-ky-nang h3{
  font-size:13px; color:var(--chu-rat-mo);
  text-transform:uppercase; letter-spacing:.15em; font-weight:500;
  padding-bottom:14px; border-bottom:1px solid var(--ke);
}
.nhom-ky-nang ul{ list-style:none; margin:0; padding:14px 0 0; }
.nhom-ky-nang li{ padding:7px 0; color:var(--chu-mo); }

/* ===== Tuyen bo ===== */
.tuyen-bo{ padding:112px 0; border-top:1px solid var(--ke); }
.tuyen-bo blockquote{
  margin:0;
  font-size:clamp(26px, 3.7vw, 42px);
  line-height:1.32;
  letter-spacing:-.032em;
  max-width:21ch;
  color:var(--chu);
}
.tuyen-bo .vach-nhan{
  width:34px; height:2px; background:var(--nhan); margin-bottom:32px;
}

/* ===== Lien he ===== */
.to{
  display:block;
  font-size:clamp(21px, 2.7vw, 30px);
  letter-spacing:-.03em;
  padding:19px 0;
  border-bottom:1px solid var(--ke);
  color:var(--chu);
  transition:color .25s ease, padding-left .25s ease;
}
.to:hover{ color:var(--nhan); padding-left:10px; }
.to .mui{ color:var(--chu-rat-mo); float:right; }
.to:hover .mui{ color:var(--nhan); }

.chan{ border-top:1px solid var(--ke); padding:32px 0 56px; }
.chan p{ color:var(--chu-rat-mo); margin:0; }

/* ===== Hien dan khi cuon - chi cho khoi lon, khong phai moi thu ===== */
.hien{ opacity:0; transform:translateY(16px); }
.hien.ra{
  opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s ease;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hien{ opacity:1; transform:none; }
  .hien.ra{ transition:none; }
  .du-an,.to{ transition:none; }
}

/* ===== Man hinh hep ===== */
@media (max-width:820px){
  .khung{ padding:0 20px; }
  .mo-dau{ padding:74px 0 76px; }
  .dau-muc,.viec{ grid-template-columns:1fr; gap:14px; }
  .viec .thoi,.so-muc{ padding-top:0; }
  .muc,.tuyen-bo{ padding:74px 0; }
  .dau-trang{ grid-template-columns:1fr; gap:38px; }
  .chan-dung{ max-width:320px; aspect-ratio:1/1; }
  .du-an{ padding:28px 22px; }
  .anh-du-an{ margin:-28px -22px 24px; aspect-ratio:16/11; }
  .so-lieu{ gap:28px; }
  .terminal{ margin-top:46px; }
  .than-terminal{ padding:18px 16px 20px; }
  .tuyen-bo blockquote{ max-width:none; }
}