/* ===== Nen tang ===== */
:root{
  --muc: #191714;          /* chu chinh */
  --muc-nhat: #5c574f;     /* chu phu */
  --giay: #faf7f1;         /* nen */
  --ke: #ddd6c8;           /* duong ke mong */
  --do-rong: 65ch;         /* dong than bai ~65 ky tu */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--giay);
  color:var(--muc);
  font-family:"Lora", Georgia, "Times New Roman", serif;
  font-size:19px;
  line-height:1.75;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}

/* ===== Luoi lech: cot trai hep, cot phai rong ===== */
.khung{
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}

.lech{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr);  /* co tinh khong deu */
  gap:64px;
}

/* Nhan nho ben trai - chu khong chan, gian chu */
.nhan{
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muc-nhat);
  line-height:1.6;
  margin:0;
}

h1,h2,h3{
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
}

p{ margin:0 0 1.35em; max-width:var(--do-rong); }
p:last-child{ margin-bottom:0; }

a{ color:var(--muc); text-decoration:none; border-bottom:1px solid var(--ke); }
a:hover{ border-bottom-color:var(--muc); }

/* ===== Mang bao de (masthead) ===== */
.bao-de{ padding:88px 0 0; }

.bao-de .vach{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  padding-bottom:22px;
  border-bottom:1px solid var(--ke);
  flex-wrap:wrap;
}

.ten{
  font-size:clamp(56px, 11vw, 132px);
  margin:56px 0 0;
  /* Tuong phan tao boi co chu, khong phai mau */
}

.vai-tro{
  font-family:"Playfair Display", Georgia, serif;
  font-style:italic;
  font-size:clamp(22px, 3.2vw, 34px);
  color:var(--muc-nhat);
  margin:14px 0 0;
  max-width:none;
}

/* Cau mo dau - co chu lon, dat lech sang phai */
.mo-dau{
  font-size:clamp(23px, 2.7vw, 31px);
  line-height:1.5;
  margin:76px 0 0;
  max-width:24ch;      /* hep de tao khoang tho ben phai */
}
.mo-dau-boc{ padding:0 0 128px; }

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

.tua{
  font-size:clamp(32px, 4.4vw, 52px);
  margin-bottom:8px;
}

/* ===== Trich dan lon giua bai ===== */
.trich{
  border-top:1px solid var(--ke);
  border-bottom:1px solid var(--ke);
  padding:104px 0;
  margin:0;
}
.trich blockquote{
  margin:0;
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(34px, 5.6vw, 68px);
  line-height:1.16;
  letter-spacing:-.02em;
  max-width:17ch;      /* dong ngan, nhieu khoang trang ben phai */
  text-indent:-.42em;  /* treo dau ngoac kep ra le */
}

/* ===== Kinh nghiem ===== */
.viec{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr);
  gap:64px;
  padding:46px 0;
  border-top:1px solid var(--ke);
}
.viec:first-of-type{ border-top:none; padding-top:14px; }
.chuc-danh{ font-size:27px; margin-bottom:4px; }
.noi-lam{
  font-style:italic;
  color:var(--muc-nhat);
  margin:0 0 .85em;
}

/* ===== Du an: anh tran le trai/phai, khong can giua ===== */
.du-an{ padding:76px 0; border-top:1px solid var(--ke); }
.du-an:first-of-type{ border-top:none; }

.du-an .thoi{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:56px;
  align-items:start;
}
/* So le: du an chan thi doi ben, anh tran sang trai */
.du-an:nth-of-type(even) .thoi{
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
}
.du-an:nth-of-type(even) .noi-dung{ order:2; }
.du-an:nth-of-type(even) .anh{ order:1; }

.ten-du-an{ font-size:clamp(28px, 3.6vw, 42px); margin-bottom:10px; }

/* Anh tran ra ngoai le khung chu */
.anh{
  aspect-ratio:4/5;
  background:#efe9dd;
  border:1px solid var(--ke);
  display:flex;
  align-items:flex-end;
  padding:18px;
}
.anh span{
  font-family:"Inter", -apple-system, "Segoe UI", sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muc-nhat);
}
.du-an:nth-of-type(odd) .anh{ margin-right:calc(-1 * clamp(0px, 6vw, 76px)); }
.du-an:nth-of-type(even) .anh{ margin-left:calc(-1 * clamp(0px, 6vw, 76px)); }

/* ===== Ky nang ===== */
.ds-ky-nang{
  list-style:none;
  margin:0;
  padding:0;
  columns:2;
  column-gap:64px;
}
.ds-ky-nang li{
  padding:13px 0;
  border-bottom:1px solid var(--ke);
  break-inside:avoid;
}

/* ===== Lien he ===== */
.lien-he .to{
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(26px, 3.4vw, 40px);
  line-height:1.5;
  display:block;
  margin-bottom:12px;
  border-bottom:none;
}
.lien-he .to:hover{ border-bottom:1px solid var(--muc); }

.chan{
  border-top:1px solid var(--ke);
  padding:34px 0 60px;
  color:var(--muc-nhat);
}
.chan p{ font-size:14px; margin:0; }

/* ===== Hien dan khi cuon - hieu ung DUY NHAT ===== */
.hien{ opacity:0; transform:translateY(14px); }
.hien.ra{
  opacity:1;
  transform:none;
  transition:opacity .7s ease, transform .7s ease;
}

@media (prefers-reduced-motion: reduce){
  .hien{ opacity:1; transform:none; }
  .hien.ra{ transition:none; }
}

/* ===== Man hinh hep ===== */
@media (max-width:860px){
  body{ font-size:18px; }
  .khung{ padding:0 22px; }
  .lech,.viec,.du-an .thoi,.du-an:nth-of-type(even) .thoi{
    grid-template-columns:1fr;
    gap:18px;
  }
  .du-an:nth-of-type(even) .noi-dung,
  .du-an:nth-of-type(even) .anh{ order:0; }
  .du-an:nth-of-type(odd) .anh,
  .du-an:nth-of-type(even) .anh{ margin:0; }
  .anh{ aspect-ratio:3/2; margin-top:26px; }
  .muc{ padding:68px 0; }
  .trich{ padding:68px 0; }
  .mo-dau{ max-width:none; margin-top:52px; }
  .mo-dau-boc{ padding-bottom:76px; }
  .ds-ky-nang{ columns:1; }
  .bao-de{ padding-top:52px; }
}