:root {
  /* Màu của phòng lọc ảnh: nền tối trung tính để mắt không bị màn hình kéo
     lệch khi nhìn ảnh. Một màu nhấn duy nhất, màu vàng ấm của khung được
     chọn — cùng nghĩa với việc phần mềm này làm. */
  --nen:    #0E1013;
  --mat:    #171A1E;
  --mat-2:  #1E2228;
  --vien:   #292E35;
  --chu:    #EAE8E5;
  --mo:     #8E9297;
  --sang:   #E4B363;
  --sang-mo:#3A2F1C;
  --duoc:   #7FB77E;

  --rong: 1060px;
  --bo: 10px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               "Noto Sans", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.khung { width: 100%; max-width: var(--rong); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(34px, 5.4vw, 56px); font-weight: 700; }
h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 650; }
h3 { font-size: 19px; font-weight: 650; }
p { margin: 0; }

a { color: var(--sang); }

.nhan {
  font-size: 12.5px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--mo); font-weight: 600;
}

/* ---------- Thanh trên ---------- */
header {
  border-bottom: 1px solid var(--vien);
  position: sticky; top: 0; z-index: 10;
  background: rgba(14, 16, 19, 0.86);
  backdrop-filter: blur(10px);
}
header .khung {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 62px;
}
.ten { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.ten span { color: var(--sang); }

/* ---------- Mở đầu ---------- */
.mo-dau { padding: 72px 0 64px; }
.mo-dau .doi { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .mo-dau .doi { grid-template-columns: 1fr; gap: 40px; } }

.mo-dau h1 { margin-bottom: 20px; }
.dan { font-size: 19px; color: var(--mo); max-width: 46ch; }
.dan strong { color: var(--chu); font-weight: 600; }

.nut-hang { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.nut {
  display: inline-block; padding: 13px 24px; border-radius: var(--bo);
  font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; font-family: inherit;
  transition: background .14s, border-color .14s, color .14s;
}
.nut-chinh { background: var(--sang); color: #1A1408; }
.nut-chinh:hover { background: #EFC077; }
.nut-phu { background: transparent; color: var(--chu); border-color: var(--vien); }
.nut-phu:hover { border-color: var(--mo); }
.nut:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible {
  outline: 2px solid var(--sang); outline-offset: 2px;
}

/* ---------- Lưới tiếp xúc: hình duy nhất trên trang, và nó vẽ bằng CSS ----------
   Cố ý KHÔNG có ảnh thật nào. Ảnh cưới trong máy là ảnh của khách hàng thật, và
   một trang bán hàng không phải chỗ để chúng xuất hiện. Lưới này mô tả đúng việc
   phần mềm làm: phần lớn khung mờ đi, vài khung được chọn sáng lên. */
.luoi {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px;
  padding: 18px; background: var(--mat); border: 1px solid var(--vien);
  border-radius: 14px;
}
.o { aspect-ratio: 3 / 2; border-radius: 4px; background: var(--mat-2); }
.o.chon { background: var(--sang-mo); box-shadow: inset 0 0 0 1.5px var(--sang); position: relative; }
.o.chon::after {
  content: ""; position: absolute; inset: 0; border-radius: 4px;
  background: linear-gradient(140deg, rgba(228,179,99,.16), transparent 62%);
}
.luoi-chu {
  margin-top: 14px; display: flex; justify-content: space-between;
  font-size: 13.5px; color: var(--mo); font-variant-numeric: tabular-nums;
}
.luoi-chu b { color: var(--sang); font-weight: 650; }

/* ---------- Khối chung ---------- */
section { padding: 68px 0; border-top: 1px solid var(--vien); }
.dau-muc { max-width: 62ch; margin-bottom: 38px; }
.dau-muc .nhan { display: block; margin-bottom: 12px; }
.dau-muc p { color: var(--mo); margin-top: 14px; }

.ba { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .ba { grid-template-columns: 1fr; } }

.the {
  background: var(--mat); border: 1px solid var(--vien);
  border-radius: 14px; padding: 26px;
}
.the h3 { margin-bottom: 10px; }
.the p { color: var(--mo); font-size: 15.5px; }
.so {
  font-variant-numeric: tabular-nums; color: var(--sang);
  font-weight: 700; font-size: 14px; letter-spacing: .06em; margin-bottom: 14px;
}

/* ---------- Điều không làm ---------- */
.khong {
  background: var(--mat); border: 1px solid var(--vien);
  border-left: 3px solid var(--duoc);
  border-radius: 12px; padding: 26px 28px;
}
.khong ul { margin: 16px 0 0; padding-left: 20px; color: var(--mo); }
.khong li { margin-bottom: 9px; }
.khong li b { color: var(--chu); font-weight: 600; }

/* ---------- Bảng giá ---------- */
.goi { position: relative; display: flex; flex-direction: column; }
.goi.nen-chon { border-color: var(--sang); }
.the-nhan {
  position: absolute; top: -11px; left: 26px;
  background: var(--sang); color: #1A1408;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
}
.gia {
  font-size: 40px; font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; margin: 6px 0 2px;
}
.gia small { font-size: 17px; font-weight: 500; color: var(--mo); letter-spacing: 0; }
.moi-thang { font-size: 14px; color: var(--mo); font-variant-numeric: tabular-nums; }
.goi ul { list-style: none; margin: 20px 0 0; padding: 0; font-size: 15.5px; color: var(--mo); }
.goi li { padding-left: 22px; position: relative; margin-bottom: 8px; }
.goi li::before { content: "✓"; position: absolute; left: 0; color: var(--duoc); font-weight: 700; }
.goi .nut { margin-top: 22px; text-align: center; width: 100%; }

/* ---------- Ô mua ---------- */
.mua {
  margin-top: 34px; background: var(--mat); border: 1px solid var(--vien);
  border-radius: 14px; padding: 28px;
}
.mua label { display: block; font-weight: 600; margin-bottom: 8px; }
.mua .goi-y { color: var(--mo); font-size: 14.5px; margin-bottom: 18px; }
.hang-nhap { display: flex; gap: 12px; flex-wrap: wrap; }
input[type=email] {
  flex: 1 1 280px; min-width: 0;
  background: var(--nen); color: var(--chu);
  border: 1px solid var(--vien); border-radius: var(--bo);
  padding: 13px 15px; font-size: 16px; font-family: inherit;
}
input[type=email]::placeholder { color: #666B71; }

#bao {
  margin-top: 16px; font-size: 15px; border-radius: var(--bo);
  padding: 12px 15px; display: none;
}
#bao.hien { display: block; }
#bao.loi { background: #2A1A1A; border: 1px solid #5A3434; color: #F0C0C0; }
#bao.cho { background: var(--mat-2); border: 1px solid var(--vien); color: var(--mo); }

/* ---------- Hỏi đáp ---------- */
details {
  border-bottom: 1px solid var(--vien); padding: 18px 0;
}
details:first-of-type { border-top: 1px solid var(--vien); }
summary {
  cursor: pointer; font-weight: 600; font-size: 17px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--sang); font-size: 22px; font-weight: 400; flex-shrink: 0; }
details[open] summary::after { content: "−"; }
details p { color: var(--mo); margin-top: 12px; max-width: 74ch; font-size: 16px; }

/* ---------- Chân trang ---------- */
footer { border-top: 1px solid var(--vien); padding: 36px 0 56px; color: var(--mo); font-size: 14.5px; }
footer .khung { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Lớp thay cho thuộc tính style= ----------
   Không phải để gọn mắt. CSP của trang là `style-src 'self'`, và chỉ thị đó
   chặn cả `style="..."` lẫn thẻ <style> nội tuyến. Một thuộc tính style bỏ
   quên không báo lỗi ở đâu cả — nó chỉ đơn giản không được áp dụng, và chỉ
   trên bản đã đưa lên mạng, vì mở tệp bằng file:// thì không có CSP nào. */
.nut-nho { padding: 8px 16px; font-size: 15px; }
.mo-dau .dan { margin-top: 20px; }
.he-may { margin-top: 22px; font-size: 14.5px; color: var(--mo); }
.ghi-nho { margin-top: 16px; font-size: 14px; color: var(--mo); }
.tr-8  { margin-top: 8px; }
.tr-20 { margin-top: 20px; }
.tr-26 { margin-top: 26px; }
.tr-34 { margin-top: 34px; }
.dan.rong { max-width: none; }
.tieu-de-2 { font-size: 34px; margin: 12px 0 18px; }

/* ---------- Trang cảm ơn ---------- */
.giua { max-width: 620px; margin: 0 auto; padding: 76px 24px 96px; }
.buoc { counter-reset: b; list-style: none; padding: 0; margin: 26px 0 0; }
.buoc li { counter-increment: b; position: relative; padding-left: 44px; margin-bottom: 22px; }
.buoc li::before {
  content: counter(b); position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sang-mo); color: var(--sang);
  border: 1px solid var(--sang);
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
/* Chi thang tieu de cua moi buoc moi xuong dong rieng. Khong dung .buoc b:
   trong cau mo ta cung co <b>, va no bi day thanh mot dong rieng giua cau. */
.buoc > li > b { display: block; margin-bottom: 3px; }
.buoc span { color: var(--mo); font-size: 15.5px; }

/* ---------- Bốn gói, bốn cột ----------
   `.ba` sinh ra cho ba thẻ "cách chạy". Bảng giá có bốn gói từ ngày thêm gói
   vĩnh viễn, và với lưới ba cột thì gói đắt nhất rơi xuống một mình một hàng,
   rộng bằng cả trang — trông như một dòng phụ chú chứ không như một gói bán. */
.bon { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bon .gia { font-size: 33px; }
@media (max-width: 1020px) { .bon { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .bon { grid-template-columns: 1fr; } }

/* ---------- Ô nhập mã, và nút áp dụng nằm cùng hàng với ô ---------- */
.hang-ma {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px;
}
@media (max-width: 620px) { .hang-ma { grid-template-columns: 1fr; } }
.hang-ma label { font-size: 14.5px; font-weight: 600; margin-bottom: 0; }
.o-ma { display: flex; gap: 8px; margin-top: 8px; }
.o-ma input {
  flex: 1 1 auto; min-width: 0;
  background: var(--nen); color: var(--chu);
  border: 1px solid var(--vien); border-radius: var(--bo);
  padding: 11px 14px; font-size: 15px; font-family: inherit;
  text-transform: uppercase;
}
.o-ma input::placeholder { color: #666B71; text-transform: none; }
.o-ma .nut { flex: 0 0 auto; }

/* ---------- Bảng giá của một đơn ----------
   Số tiền xếp cột phải và dùng `tabular-nums`, để mắt so hàng trên với hàng
   dưới mà không phải đọc từng chữ số. */
.bang-gia {
  margin-top: 18px; padding: 16px 18px;
  background: var(--mat-2); border: 1px solid var(--vien);
  border-radius: var(--bo); font-size: 15px;
}
.bang-dong {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 5px 0; color: var(--mo); font-variant-numeric: tabular-nums;
}
.bang-dong.tru span:last-child { color: var(--duoc); }
.bang-dong.tong {
  margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--vien);
  color: var(--chu); font-weight: 700; font-size: 18px;
}
.bang-nhac { margin-top: 10px; font-size: 14px; color: var(--sang); }

/* ---------- Khối tải bản dùng thử ---------- */
.tai { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.tai .nut { font-size: 17px; padding: 15px 28px; }
.tai-ghi { color: var(--mo); font-size: 14.5px; margin: 0; }
.khong p + p { margin-top: 12px; }