/* Trang giới thiệu dịch vụ — trang duy nhất bán phần mềm, không bán phòng.

   Người đọc: chủ nhà nghỉ nhỏ, thường trên điện thoại, thường đang mệt vì vừa trực đêm.
   Nên: chữ to, khoảng thở rộng, mỗi màn hình một ý. Không hiệu ứng, không lấp lánh —
   thứ họ cần là hiểu nhanh xem cái này có đỡ được cho họ không.

   Dùng chung bảng màu với trang khách (xanh rêu) để hai trang trông cùng một nhà. */

:root {
  --xanh-dam: #0f2419;
  --xanh: #1a3a2e;
  --xanh-nhat: #2d5a45;
  --vang: #c9a227;
  --nen: #fdfcf8;
  --nen-mo: #f5f2e9;
  --trang: #ffffff;
  --chu: #1c1917;
  --chu-mo: #6b6560;
  --vien: #e5e0d5;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  line-height: 1.65;
}

.trong-khung {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2rem);
}
.khung-hep { max-width: 40rem; }

h1, h2, h3 { line-height: 1.25; }

/* ---------------------------------------------------------------- mở đầu */

.mo-dau {
  background: var(--xanh-dam);
  color: #f5f2e9;
  padding: clamp(3rem, 12vw, 6rem) 0 clamp(2.5rem, 9vw, 4.5rem);
}

.nhan-tren {
  margin: 0 0 1rem;
  font-family: system-ui, sans-serif;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vang);
}

.mo-dau h1 {
  margin: 0 0 1.1rem;
  /* `clamp` để tiêu đề vừa màn hình 320px mà vẫn lớn trên máy tính — không cần media
     query nào cho riêng nó. */
  font-size: clamp(2rem, 7vw, 3.6rem);
  font-weight: 400;
}

.dan {
  margin: 0 0 2rem;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: #d8d2c4;
  max-width: 38ch;      /* dòng dài quá 40 ký tự là mắt phải nhảy hàng — mệt khi đọc dài */
}

.hang-nut-lon {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.5rem;
}

.nut-lon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  background: var(--vang);
  color: var(--xanh-dam);
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
.nut-vien {
  background: transparent;
  color: #f5f2e9;
  border: 1.5px solid rgba(245, 242, 233, .45);
}

@media (hover: hover) {
  .nut-lon:hover { filter: brightness(1.08); }
  .nut-vien:hover { border-color: #f5f2e9; }
}

.ghi-chu-nho {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: .87rem;
  color: #a8a294;
}

/* ---------------------------------------------------------------- khối chung */

.khoi { padding: clamp(2.5rem, 9vw, 5rem) 0; }
.nen-nhat { background: var(--nen-mo); }

.khoi h2 {
  margin: 0 0 .5rem;
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
  font-weight: 400;
}

.phu-de-khoi {
  margin: 0 0 2rem;
  color: var(--chu-mo);
  max-width: 46ch;
}

/* ---------------------------------------------------------------- vấn đề */

.luoi-ba {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 1.5rem;
}

.the-van-de {
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: 14px;
  padding: 1.5rem;
}
.the-van-de h3 { margin: .3rem 0 .5rem; font-size: 1.1rem; }
.the-van-de p { margin: 0; color: var(--chu-mo); font-size: .97rem; }

.so-thu-tu {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--vang);
  line-height: 1;
}

.ket-van-de {
  margin: 0;
  font-size: 1.1rem;
  max-width: 52ch;
}

/* ---------------------------------------------------------------- cách chạy */

.cac-buoc-lon {
  list-style: none;
  counter-reset: buoc;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}

.cac-buoc-lon li {
  counter-increment: buoc;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1rem;
  align-items: start;
}

/* Số bước dựng bằng `::before` thay vì viết trong HTML: đổi thứ tự các bước thì không
   phải sửa lại số, và trình đọc màn hình vẫn hiểu đây là danh sách có thứ tự. */
.cac-buoc-lon li::before {
  content: counter(buoc);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--xanh);
  color: #f5f2e9;
  font-family: system-ui, sans-serif;
  font-weight: 700;
}

.cac-buoc-lon h3 { margin: .35rem 0 .35rem; font-size: 1.15rem; }
.cac-buoc-lon p { margin: 0; color: var(--chu-mo); }

/* ---------------------------------------------------------------- bảng giá */

.luoi-goi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  /* `align-items: start` để thẻ nổi bật cao hơn không kéo giãn hai thẻ kia. */
  align-items: start;
}

.the-goi {
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
}

.the-goi.noi-bat {
  border-color: var(--xanh);
  border-width: 2px;
  box-shadow: 0 8px 30px rgb(26 58 46 / .1);
}

.nhan-noi-bat {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--xanh);
  color: #f5f2e9;
  font-family: system-ui, sans-serif;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.the-goi h3 { margin: 0 0 .4rem; font-size: 1.3rem; font-weight: 400; }

.gia-goi {
  margin: 0 0 .2rem;
  font-family: system-ui, sans-serif;
  /* Chữ số rộng bằng nhau để ba mức giá thẳng cột nhau khi xếp ngang. */
  font-variant-numeric: tabular-nums;
}
.gia-goi strong { font-size: 1.9rem; font-weight: 700; }
.gia-goi span { color: var(--chu-mo); font-size: .95rem; }

.so-phong-goi {
  margin: 0 0 .9rem;
  font-family: system-ui, sans-serif;
  font-size: .88rem;
  color: var(--vang);
  font-weight: 600;
}

.mo-ta-goi {
  margin: 0 0 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--vien);
  color: var(--chu-mo);
  font-size: .97rem;
}

.ds-tinh-nang {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
  font-size: .97rem;
}
.ds-tinh-nang li {
  padding-left: 1.5rem;
  position: relative;
}
.ds-tinh-nang li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--xanh-nhat);
  font-weight: 700;
}

.so-sanh {
  background: var(--nen-mo);
  border-left: 3px solid var(--vang);
  border-radius: 0 12px 12px 0;
  padding: 1.5rem;
  max-width: 46rem;
}
.so-sanh h3 { margin: 0 0 .6rem; font-size: 1.15rem; }
.so-sanh p { margin: 0 0 .6rem; }
.so-sanh p:last-child { margin: 0; }

.mo { color: var(--chu-mo); font-size: .9rem; }

/* ---------------------------------------------------------------- thật lòng */

.ds-that-long {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
  max-width: 52rem;
}
.ds-that-long li {
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  color: var(--chu-mo);
}
.ds-that-long strong { color: var(--chu); }

/* ---------------------------------------------------------------- liên hệ */

#lien-he { text-align: center; }
#lien-he h2 { margin-bottom: .8rem; }

.lien-he-lon {
  margin: 1.5rem 0 .8rem;
  font-family: system-ui, sans-serif;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lien-he-lon a {
  color: var(--xanh);
  text-decoration: none;
  /* Vùng chạm rộng hơn dòng chữ — đây là nút quan trọng nhất trang. */
  display: inline-block;
  padding: .4rem 1rem;
}

/* ---------------------------------------------------------------- chân */

.chan {
  background: var(--xanh-dam);
  color: #a8a294;
  padding: 2rem 0;
  font-family: system-ui, sans-serif;
  font-size: .9rem;
}
.chan p { margin: 0 0 .4rem; }
.chan p:last-child { margin: 0; }
.chan a { color: #d8d2c4; }

/* ---------------------------------------------------------------- màn hẹp */

@media (max-width: 34rem) {
  /* Nút xuống hàng và chiếm cả bề ngang — mục tiêu rộng, khó bấm trượt. */
  .hang-nut-lon { flex-direction: column; }
  .nut-lon { width: 100%; }

  /* Bước: số nhỏ lại để chừa chỗ cho chữ. */
  .cac-buoc-lon li { grid-template-columns: 2.1rem 1fr; gap: .8rem; }
  .cac-buoc-lon li::before { width: 2.1rem; height: 2.1rem; font-size: .9rem; }
}