/* desktop-khoi.css — Khối 1-3: Hero · Ba nỗi lo · Cách làm
   Tất cả màu dùng var() từ tokens.css. Cấm mã màu thô. */

/* Khối 1 — Hero */
.hero {
  min-height: 92vh; background-size: cover; background-position: center;
  background-repeat: no-repeat; position: relative; display: flex; align-items: center;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--nen) 0%, var(--nen) 42%, transparent 66%);
  pointer-events: none;
}
.hero__anh-nen {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
}
.hero__img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero__content {
  position: relative; z-index: 1; width: 42%;
  max-width: calc(var(--rong-toi-da) * 0.42);
  margin-left: max(var(--le), calc((100vw - var(--rong-toi-da)) / 2 + var(--le)));
  padding: 80px 0;
}
.hero__tieu-de {
  font-family: var(--phong-tieu-de); font-size: var(--co-hero);
  line-height: var(--dong-hero); color: var(--chu); margin-bottom: 24px;
}
.hero__phu-de {
  font-size: var(--co-van); line-height: var(--dong-van);
  color: var(--chu-phu); margin-bottom: 40px; max-width: 480px;
}
.hero__nut { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.hero__dong-duoi { font-size: var(--co-chu-thich); color: var(--chu-phu); }
.hero__mien { color: var(--vang); }

/* Khối 2 — Ba nỗi lo: mỗi thẻ một hình ở trên, dưới là tiêu đề và một ý */
.the-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.the {
  background: var(--nen-phu); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); padding: 24px; display: flex;
  flex-direction: column; transition: border-color var(--nhanh);
}
.the:hover { border-color: var(--vang); }
.the__anh {
  width: 100%; height: auto; border-radius: 8px;
  border: 1px solid var(--vien); margin-bottom: 12px;
}
.the .hinh-qt__chu-thich { margin-bottom: 16px; }
.the__tieu-de {
  font-family: var(--phong-tieu-de); font-size: var(--co-the);
  font-weight: 600; color: var(--chu); margin-bottom: 12px;
}
.the__y {
  font-size: var(--co-van); color: var(--chu-phu);
  line-height: var(--dong-van); margin-top: auto;
}

/* Khối 3 — Cách làm: Ba nhánh */
.ba-nhanh__luoi {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 16px;
}
.ba-nhanh__the {
  background: var(--nen-phu); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); padding: 18px 20px; text-align: center;
}
.ba-nhanh__nhan {
  font-size: var(--co-van); font-weight: 600; color: var(--chu);
}

/* Khối 3 — Cách làm: nhịp khối gọn gàng dưới 1.600px */
#cach-lam { padding: 96px 0; }
#cach-lam .hinh-qt--rong {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
#cach-lam .hinh-qt__chu-thich {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}