/* QuảngCáoPro — giao diện chung (SPEC mục 5) */

:root {
  --kem: #f3ede3;          /* nền trang — màu vải Dust bag */
  --kem-dam: #e9e0d1;      /* nền khối phụ */
  --den: #000;             /* đầu trang, nút chính */
  --nga: #f7f2e8;          /* chữ trên nền đen */
  --champagne: #d6c29c;    /* vàng nhạt — chỉ dùng trên nền đen */
  --dong: #7a5d32;         /* vàng đồng — dùng trên nền kem (tương phản ~5,2:1) */
  --muc: #1f1c18;          /* chữ nội dung */
  --muc-nhat: #5e574d;     /* chữ phụ */
  --vien: #d9cdb8;         /* đường kẻ */
  --kem-xen: #ede5d7;      /* nền phần xen kẽ — chỉ đậm hơn nền trang rất nhẹ */

  /* thẻ dùng chung */
  --the-nen: #fbf8f2;
  --the-vien: rgba(122, 93, 50, 0.16);
  --bo: 14px;
  --bong: 0 1px 2px rgba(31, 28, 24, 0.05), 0 12px 28px -14px rgba(31, 28, 24, 0.18);

  --chu-tieu-de: "Playfair Display", Georgia, serif;
  --chu-noi-dung: "Be Vietnam Pro", system-ui, sans-serif;

  --le: 20px;              /* lề hai bên trên điện thoại */
  --rong-chu: 38rem;       /* độ rộng tối đa của khối chữ */
  --cao-nut-noi: 72px;     /* chừa chỗ cho nút nổi trên điện thoại */
}

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

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

body {
  margin: 0;
  background: var(--kem);
  color: var(--muc);
  font-family: var(--chu-noi-dung);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* trang ngắn (vd /cam-on) thì chân trang vẫn nằm sát đáy */
  min-height: 100vh;
  min-height: 100svh; /* Safari iPhone: không tính phần thanh địa chỉ che */
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  font-family: var(--chu-tieu-de);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance; /* tránh một chữ lẻ loi ở dòng cuối */
}

p {
  margin: 0;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 3px;
}

.khung {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  /* viewport-fit=cover: chừa thêm chỗ cho tai thỏ khi xoay ngang iPhone */
  padding-left: max(var(--le), env(safe-area-inset-left));
  padding-right: max(var(--le), env(safe-area-inset-right));
}

/* ---------- Thanh đầu trang ---------- */

.thanh-dau {
  background: var(--den);
  color: var(--nga);
}

.thanh-dau .khung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.logo {
  font-family: var(--chu-tieu-de);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--champagne);
  text-decoration: none;
}

.thanh-dau .cac-nut {
  display: none;
}

/* ---------- Nút ---------- */

.nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: var(--chu-noi-dung);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Nút chính trên nền đen: vàng champagne, chữ đen */
.nut-chinh {
  background: var(--champagne);
  color: var(--den);
  border: 1px solid var(--champagne);
}

/* Nút phụ trên nền đen: viền champagne */
.nut-phu {
  background: transparent;
  color: var(--champagne);
  border: 1px solid var(--champagne);
}

/* Nút trên nền kem: đen, chữ champagne */
.nut-den {
  background: var(--den);
  color: var(--champagne);
  border: 1px solid var(--den);
}

.nut-vien {
  background: transparent;
  color: var(--muc);
  border: 1px solid var(--muc);
}

.cac-nut {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Đầu trang (hero) ---------- */

.dau-trang {
  position: relative;
  overflow: hidden; /* quầng sáng không tràn ra gây cuộn ngang */
  background: var(--den);
  color: var(--nga);
  padding: 40px 0 56px;
}

.dau-trang > .khung {
  position: relative; /* nằm trên quầng sáng */
}

/* Quầng sáng vàng rất nhẹ phía sau; --x / --y do hieu-ung.js đổi theo chuột */
.quang-vang {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle 34rem at var(--x, 72%) var(--y, 28%),
    rgba(214, 194, 156, 0.16),
    rgba(214, 194, 156, 0.05) 45%,
    transparent 70%
  );
}

.dau-trang h1 {
  font-size: clamp(2.25rem, 9vw, 4rem);
  max-width: 14ch;
  color: var(--nga);
}

.dong-h1 {
  display: block;
}

/* "shop thu mua & bán đồ hiệu": champagne nghiêng (vệt sáng lướt qua do lam-hieu-ung thêm) */
.chu-vang {
  font-style: italic;
  color: var(--champagne);
}

.dau-trang .dong-phu {
  margin-top: 20px;
  max-width: var(--rong-chu);
  font-size: 1.125rem;
  color: var(--nga);
  opacity: 0.85;
}

.dau-trang .qua {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(214, 194, 156, 0.35);
  max-width: var(--rong-chu);
  color: var(--champagne);
}

.dau-trang .qua a {
  text-underline-offset: 4px;
  text-decoration-color: rgba(214, 194, 156, 0.5);
}

/* Khối 3 món quà — máy tính bên phải, điện thoại dưới 2 nút (khối "minh hoạ" dưới 900px) */
.qua-dau {
  display: none;
  border: 1px solid rgba(214, 194, 156, 0.4);
  padding: 32px;
}

.qua-dau-tieu-de {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champagne);
}

.qua-dau ol {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  counter-reset: qua;
}

.qua-dau li {
  counter-increment: qua;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  padding: 16px 0;
  border-top: 1px solid rgba(214, 194, 156, 0.25);
}

.qua-dau li:last-child {
  border-bottom: 1px solid rgba(214, 194, 156, 0.25);
}

.qua-dau li::before {
  content: "0" counter(qua);
  grid-row: span 2;
  font-family: var(--chu-tieu-de);
  color: var(--champagne);
}

.qua-dau-ten {
  font-family: var(--chu-tieu-de);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--nga);
  text-wrap: balance; /* tránh chữ "hiệu" rớt dòng một mình */
}

.qua-dau-mo-ta {
  grid-column: 2;
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--nga);
  opacity: 0.7;
}

.qua-dau-link {
  display: inline-block;
  margin-top: 20px;
  color: var(--champagne);
  font-size: 0.9375rem;
  text-underline-offset: 4px;
}

.dau-trang .cac-nut {
  margin-top: 28px;
}

.dau-trang .ghi-chu-nut {
  margin-top: 12px;
  font-size: 0.9375rem;
  color: var(--nga);
  opacity: 0.7;
}

/* ---------- Hiệu ứng đầu trang ("Ánh vàng sang trọng") ----------
   1. Vệt sáng lướt qua chữ vàng (.chu-vang) — CSS, chạy lặp chậm.
   2. Quầng sáng (.quang-vang): máy có chuột → hieu-ung.js cho đi theo chuột (đổi --x / --y);
      điện thoại → hieu-ung.js gắn .troi, quầng trôi chậm bằng transform (nhẹ, không vẽ lại).
   3. Mở trang: .co-vao (hieu-ung.js gắn) → chữ hiện dần lần lượt, xong trong ~1s.
   4. Khung "Tặng kèm": viền vàng quét quanh khung bo góc một lần, 3 món hiện lần lượt.
   5. Điện thoại minh hoạ: lơ lửng chậm, các dòng hiện lần lượt lúc mở trang.
   Tất cả chỉ chạy khi màn hình + không "giảm chuyển động"; không JS thì chữ hiện ngay. */

/* vệt sáng chạy từ trái sang trong ~2,4s rồi nghỉ ~3,6s */
@keyframes anh-kim {
  0% {
    background-position: 100% 0;
  }

  40%,
  100% {
    background-position: 0 0;
  }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* 2. Điện thoại: quầng trôi chậm. Khung quầng to hơn 15% mỗi phía để lúc trôi không lộ mép;
     --x / --y chỉnh lại để vị trí ban đầu vẫn như cũ (72% 28% của đầu trang) */
  .quang-vang.troi {
    inset: -15%;
    --x: 67%;
    --y: 33%;
    animation: quang-troi 18s ease-in-out infinite alternate;
  }

  /* 3. Mở trang: hai dòng tiêu đề, rồi dòng phụ, nút… hiện lần lượt */
  .co-vao .nhan-muc,
  .co-vao .dong-h1,
  .co-vao .dong-phu,
  .co-vao .cac-nut,
  .co-vao .ghi-chu-nut,
  .co-vao .qua,
  .co-vao .qua-dau li {
    animation: vao-len 0.55s ease both;
  }

  .co-vao .dong-h1:nth-child(2) {
    animation-delay: 0.12s;
  }

  .co-vao .dong-phu {
    animation-delay: 0.28s;
  }

  .co-vao .cac-nut {
    animation-delay: 0.38s;
  }

  .co-vao .ghi-chu-nut,
  .co-vao .qua {
    animation-delay: 0.45s;
  }

  .co-vao .qua-dau li:nth-child(1) {
    animation-delay: 0.35s;
  }

  .co-vao .qua-dau li:nth-child(2) {
    animation-delay: 0.47s;
  }

  .co-vao .qua-dau li:nth-child(3) {
    animation-delay: 0.59s;
  }

  /* 4. Viền vàng quét quanh khung "Tặng kèm" (bo góc): một lớp viền champagne bo theo khung,
     lộ dần theo vòng quay kim đồng hồ bằng mặt nạ hình nón (--goc 0 → 360deg), xong thì dịu xuống.
     Khung vốn position:absolute nên lớp viền bám theo khung, không cần đổi vị trí khung.
     Trình duyệt không hiểu @property: viền hiện một lần ở giữa thời gian, không quét. */
  .co-vao .qua-dau::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 2px solid var(--champagne);
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask: conic-gradient(#000 var(--goc), transparent 0);
    mask: conic-gradient(#000 var(--goc), transparent 0);
    animation: vien-quet 1.2s ease-in-out 0.2s both, vien-diu 0.6s ease 1.5s forwards;
  }

  /* 5. Điện thoại minh hoạ: lơ lửng rất chậm; ảnh app trong màn hình hiện lên */
  .co-vao .dien-thoai {
    animation: lo-lung 7s ease-in-out 1.2s infinite alternate;
  }

  .co-vao .dt-man img {
    animation: vao-len 0.6s ease 0.3s both;
  }

  /* đầu trang khuất khỏi màn hình → dừng các chuyển động lặp cho nhẹ máy */
  .dau-trang.khuat .quang-vang,
  .dau-trang.khuat .dien-thoai {
    animation-play-state: paused;
  }
}

@property --goc {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}

@keyframes vien-quet {
  from {
    --goc: 0deg;
  }

  to {
    --goc: 360deg;
  }
}

@keyframes lo-lung {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-8px);
  }
}

/* 1. Trình duyệt không hiểu background-clip:text → bỏ cả khối, chữ vẫn champagne.
   Đặt sau khối "mở trang" để luật gộp (hiện dần + vệt sáng) thắng. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .chu-vang {
      /* chừa chỗ cho dấu tiếng Việt + nét nghiêng khỏi bị cắt, bù bằng lề âm → bố cục giữ nguyên */
      padding: 0.18em 0.14em 0.18em 0;
      margin: -0.18em -0.14em -0.18em 0;
      background-image: linear-gradient(105deg,
        var(--champagne) 0%, var(--champagne) 38%,
        #fffaf0 50%,
        var(--champagne) 62%, var(--champagne) 100%);
      background-size: 250% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: anh-kim 6s ease-in-out 1.4s infinite;
    }

    .co-vao .dong-h1.chu-vang {
      animation: vao-len 0.55s ease 0.12s both, anh-kim 6s ease-in-out 1.4s infinite;
    }

    /* đầu trang khuất → dừng vệt sáng cho đỡ tốn pin (đặt sau để thắng luật animation ở trên) */
    .dau-trang.khuat .chu-vang {
      animation-play-state: paused;
    }

    /* lúc mở trang: chỉ dừng vệt sáng, để hiệu ứng hiện lên (vao-len) chạy xong dù đầu trang khuất */
    .dau-trang.co-vao.khuat .dong-h1.chu-vang {
      animation-play-state: running, paused;
    }
  }
}

@keyframes quang-troi {
  0% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-8%, 5%, 0);
  }

  100% {
    transform: translate3d(5%, 9%, 0);
  }
}

/* chỉ có "from": điểm cuối là giá trị sẵn có của phần tử
   (dòng phụ 0.85, ghi chú 0.7 → không bị sáng hơn thiết kế) */
@keyframes vao-len {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* vẽ xong thì dịu xuống — vẫn rõ hơn viền mờ có sẵn một chút */
@keyframes vien-diu {
  to {
    opacity: 0.55;
  }
}

/* ---------- Các phần nội dung ---------- */

.phan {
  padding: 64px 0;
}

.phan h1,
.phan h2 {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  max-width: 20ch;
}

.phan .noi-dung {
  margin-top: 20px;
  max-width: var(--rong-chu);
}

.phan h3 {
  font-size: 1.375rem;
}

.phan > .khung > .cac-nut {
  margin-top: 32px;
}

/* nút trong nội dung có chữ dài: cho xuống dòng ở màn 320px */
.phan .nut {
  white-space: normal;
  text-align: center;
}

/* ---------- Bộ thành phần dùng chung ----------
   Cả trang một tông kem; phần .phan-xen đậm hơn rất nhẹ để tách phần.
   Màu đen chỉ làm điểm nhấn: đầu trang, hộp quà, nút, thẻ "sáng lên".
   1. Nhãn mục .nhan-muc — vạch vàng + chữ nhỏ, trên tiêu đề mọi phần.
   2. Đầu phần .dau-phan (.giua = canh giữa) — nhãn + h2 + câu mô tả.
   3. Thẻ .the — nền kem sáng, bo 14px, viền mảnh, bóng nhẹ. Nỗi lo, Dịch vụ dùng chung;
      hộp quà dùng cùng khuôn (bo, bóng, đệm) nhưng nền đen. */

.phan-xen {
  background: var(--kem-xen);
}

.nhan-muc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dong);
}

.nhan-muc::before {
  content: "";
  flex: none;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--dong), var(--champagne));
}

.dau-trang .nhan-muc {
  color: var(--champagne);
}

.dau-phan.giua {
  text-align: center;
}

.dau-phan.giua h2,
.dau-phan.giua .mo-ta-phan {
  margin-left: auto;
  margin-right: auto;
}

.mo-ta-phan {
  margin-top: 16px;
  max-width: var(--rong-chu);
  color: var(--muc-nhat);
}

.cac-nut.giua {
  justify-content: center;
}

.the {
  background: var(--the-nen);
  border: 1px solid var(--the-vien);
  border-radius: var(--bo);
  box-shadow: var(--bong);
}

/* ---------- Đầu trang: khung điện thoại minh hoạ (máy tính; điện thoại thu nhỏ dưới 2 nút) ----------
   Ảnh chụp app thật (dữ liệu mẫu) — trang "Hàng đang có". */

.minh-hoa {
  display: none;
}

.dien-thoai {
  width: 250px;
  padding: 10px;
  border-radius: 40px;
  background: #1c1914;
  border: 1px solid rgba(214, 194, 156, 0.35);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
}

/* chừa 34px trên cùng cho tai thỏ (như thanh trạng thái) để không che chữ trong ảnh */
.dt-man {
  position: relative;
  height: 480px;
  padding-top: 34px;
  border-radius: 31px;
  background: #fff;
  overflow: hidden;
}

.dt-man img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* tai thỏ */
.dt-man::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 76px;
  height: 20px;
  margin-left: -38px;
  border-radius: 10px;
  background: #1c1914;
}

/* điện thoại + máy tính bảng: hiện khối minh hoạ ngay dưới 2 nút (thay dòng chữ "Tặng kèm website và app…"),
   thu nhỏ theo đúng bố cục máy tính — điện thoại ảnh app bên phải, khối "Tặng kèm" đè góc dưới bên trái
   (chủ dự án chọn 2026-10-06) */
@media (max-width: 899px) {
  .dau-trang .qua {
    display: none;
  }

  .minh-hoa {
    display: block;
    position: relative;
    max-width: 380px;
    height: 452px;
    margin: 36px auto 0;
  }

  .minh-hoa .dien-thoai {
    position: absolute;
    top: 0;
    right: 0;
    width: min(210px, 62%);
    padding: 8px;
    border-radius: 34px;
  }

  .minh-hoa .dt-man {
    height: 400px;
    padding-top: 30px;
    border-radius: 27px;
  }

  .minh-hoa .dt-man::before {
    top: 8px;
    width: 62px;
    height: 18px;
    margin-left: -31px;
  }

  .qua-dau {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(196px, 58%);
    padding: 18px 16px 14px;
    border-radius: var(--bo);
    background: #12100c;
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.8);
  }

  .qua-dau-tieu-de {
    font-size: 0.75rem;
  }

  .qua-dau ol {
    margin-top: 12px;
  }

  .qua-dau li {
    grid-template-columns: 1.75rem 1fr;
    padding: 9px 0;
  }

  .qua-dau li::before {
    font-size: 0.875rem;
  }

  .qua-dau-ten {
    font-size: 1rem;
  }

  .qua-dau-mo-ta {
    margin-top: 2px;
    font-size: 0.8125rem;
    line-height: 1.4;
  }

  .qua-dau-link {
    margin-top: 12px;
    font-size: 0.875rem;
  }
}

/* ---------- Số liệu thật: mỗi khách một thẻ (chữ + số | ảnh báo cáo đã làm mờ tên) ---------- */

.ds-ca {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.ca {
  display: grid;
  gap: 24px;
  padding: 24px 20px;
}

.ca-dau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.ca-dau .nhan {
  margin: 0;
}

.ca-loai {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dong);
}

.so-to {
  display: block;
  font-family: var(--chu-tieu-de);
  line-height: 1.1;
}

.so-nhan {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ô số lớn: nền đen, số champagne */
.ca-so-lon {
  margin-top: 20px;
  padding: 20px 22px;
  border-radius: calc(var(--bo) - 2px);
  background: var(--den);
  color: var(--nga);
}

.ca-so-lon .so-to {
  font-size: clamp(1.625rem, 6vw, 2.25rem);
  color: var(--champagne);
}

/* 3 ô số nhỏ: champagne · đồng · kem */
.ca-so {
  display: grid;
  grid-auto-flow: column; /* 2 hay 3 ô đều chia đều hàng */
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.ca-so li {
  padding: 14px 12px;
  border-radius: calc(var(--bo) - 2px);
  background: var(--champagne);
  color: var(--den);
}

.ca-so li:nth-child(2) {
  background: var(--dong);
  color: var(--nga);
}

.ca-so li:nth-child(3) {
  background: var(--kem);
  border: 1px solid var(--the-vien);
}

.ca-so .so-to {
  font-size: clamp(1.125rem, 4.4vw, 1.5rem);
}

.ca-so .so-nhan {
  font-size: 0.75rem;
}

/* điện thoại: 3 ô số nhỏ thành 3 hàng gọn (số trái, chữ phải) cho khỏi chật */
@media (max-width: 599px) {
  .ca {
    gap: 16px;
    padding: 20px 16px;
  }

  .ca-so-lon {
    margin-top: 16px;
    padding: 16px 18px;
  }

  .ca-so {
    grid-auto-flow: row;
    gap: 6px;
    margin-top: 6px;
  }

  .ca-so li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
  }

  .ca-so .so-to {
    flex: none;
    white-space: nowrap;
  }

  .ca-so .so-nhan {
    margin-top: 0;
    font-size: 0.8125rem;
    text-align: right;
  }
}

/* điện thoại + máy tính bảng: 3 thẻ khách vuốt ngang (thẻ sau ló ra một mép để khách biết còn),
   chấm bên dưới báo đang xem thẻ nào (hieu-ung.js tạo, bấm chấm để chuyển). Máy tính: xếp dọc như cũ. */
@media screen and (max-width: 899px) {
  .ds-ca {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* tràn ra sát hai mép màn hình, thẻ đầu vẫn thẳng lề chữ */
    margin: 32px calc(-1 * max(var(--le), env(safe-area-inset-right))) 0
      calc(-1 * max(var(--le), env(safe-area-inset-left)));
    padding: 4px max(var(--le), env(safe-area-inset-right)) 28px max(var(--le), env(safe-area-inset-left));
    scroll-padding: 0 max(var(--le), env(safe-area-inset-left));
  }

  .ds-ca::-webkit-scrollbar {
    display: none;
  }

  .ds-ca .ca {
    flex: 0 0 min(88%, 440px);
    scroll-snap-align: start;
    align-content: start;
  }

  /* màn 320–359px: thẻ rộng hơn chút cho chữ cạnh số khỏi xuống dòng */
  @media (max-width: 359px) {
    .ds-ca .ca {
      flex-basis: 92%;
      padding: 20px 12px;
    }

    .ds-ca .ca-so .so-nhan {
      font-size: 0.75rem;
    }
  }

  /* thẻ nằm ngoài màn hình theo chiều ngang → bỏ hiệu ứng "hiện dần khi cuộn tới" cho thẻ khách,
     không thì mép thẻ sau (báo còn thẻ để vuốt) trống trơn, vuốt tới thẻ mới mờ dần lên */
  .ds-ca .ca.cho-hien {
    opacity: 1;
    transform: none;
  }

  /* thẻ hẹp hơn → giãn chữ ít lại cho "Khách hàng 2 · QUẢNG CÁO META" nằm một dòng */
  .ds-ca .ca-loai {
    letter-spacing: 0.06em;
  }

  .ds-ca-cham {
    display: flex;
    justify-content: center;
    gap: 4px;
  }

  .ds-ca-cham[hidden] {
    display: none;
  }

  /* chỗ bấm 32px, chấm vẽ 8px; chấm đang xem dài ra, màu đồng */
  .ds-ca-cham button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .ds-ca-cham button::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--vien);
    transition: width 0.25s ease, background-color 0.25s ease;
  }

  .ds-ca-cham button[aria-current="true"]::before {
    width: 22px;
    background: var(--dong);
  }

  .ghi-chu-so {
    margin-top: 16px;
  }
}

@media (min-width: 900px) {
  .ds-ca-cham {
    display: none;
  }
}

.ca-anh {
  display: block;
  align-self: center;
  padding: 6px;
  border: 1px solid var(--the-vien);
  border-radius: var(--bo);
  background: #fff;
}

.ca-anh img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--bo) - 6px);
}

.ca-xem-to {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dong);
}

.ca-xem-to svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Khung xem ảnh báo cáo to (<dialog class="xem-anh">) ---------- */

/* giữ chỗ thanh cuộn → trang phía sau không xê dịch khi khoá cuộn (máy tính) */
html.dang-xem-anh {
  overflow: hidden;
  scrollbar-gutter: stable;
  background: #000; /* chỗ chừa thanh cuộn tối theo nền, không lộ sọc kem */
}

/* trình duyệt cũ không hiểu <dialog> (iOS ≤ 15.3) → tự giấu khi chưa mở */
.xem-anh:not([open]) {
  display: none;
}

.xem-anh {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.92);
  color: var(--nga);
}

.xem-anh::backdrop {
  background: transparent;
}

.xem-anh-khung {
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* chừa chỗ trên cho nút đóng, dưới cho dòng gợi ý */
  padding: calc(64px + env(safe-area-inset-top)) 12px calc(56px + env(safe-area-inset-bottom));
}

/* điện thoại: ảnh giữ cỡ lớn để đọc được số, vuốt ngang xem hết bảng */
.xem-anh-khung img {
  display: block;
  width: 1200px;
  max-width: none;
  height: auto;
  border-radius: 6px;
  background: #fff;
}

.xem-anh-dong {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  z-index: 1;
  width: 48px;
  height: 48px;
  border: 1px solid var(--champagne);
  border-radius: 50%;
  background: var(--den);
  color: var(--champagne);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

/* dải tối dưới đáy → màn thấp ảnh tràn xuống dưới vẫn đọc được, không đè lên số */
.xem-anh-goi-y {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.82);
  font-size: 0.875rem;
  text-align: center;
  color: var(--champagne);
  pointer-events: none;
}

/* chữ "Đang tải ảnh…" nằm giữa màn hình, ẩn khi ảnh tải xong (.da-tai) */
.xem-anh-dang-tai {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  font-size: 0.9375rem;
  text-align: center;
  color: var(--champagne);
  pointer-events: none;
}

.xem-anh.da-tai .xem-anh-dang-tai {
  display: none;
}

/* máy tính: ảnh vừa khung màn hình, nằm giữa, không cần vuốt */
@media (min-width: 900px) {
  .xem-anh-khung {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 40px 40px;
  }

  .xem-anh-khung img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
  }

  .xem-anh-goi-y {
    display: none;
  }
}

.ghi-chu-so {
  max-width: var(--rong-chu);
  margin: 28px auto 0;
  font-size: 0.875rem;
  text-align: center;
  color: var(--muc-nhat);
}

/* ---------- App quản lý: video trong khung điện thoại + danh sách tính năng ----------
   Điện thoại: video trên, chữ dưới. Máy tính: video trái, chữ phải. */

.khung-app {
  display: grid;
  gap: 36px;
}

.app-chu .ds-tinh-nang {
  margin-top: 0;
}

.app-video {
  margin: 0;
}

/* khung điện thoại — cùng kiểu .dien-thoai ở đầu trang */
/* rộng tối đa 300px, và thấp hơn màn hình (màn ngang / màn thấp vẫn thấy trọn video):
   cao khung = (rộng − 20px viền) × 16/9 + 20px ≤ màn − 40px. Trình duyệt chưa hiểu svh dùng dòng trên. */
.dt-video {
  position: relative;
  width: min(300px, 78vw);
  width: min(300px, 78vw, calc((100vh - 60px) * 9 / 16 + 20px));
  width: min(300px, 78vw, calc((100svh - 60px) * 9 / 16 + 20px));
  margin: 0 auto;
  padding: 10px;
  border-radius: 40px;
  background: #1c1914;
  border: 1px solid rgba(214, 194, 156, 0.35);
  box-shadow: 0 30px 60px -20px rgba(31, 28, 24, 0.55);
}

.dt-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 31px;
  background: #000;
}

/* nút phát lớn đè lên ảnh bìa — hieu-ung.js hiện (bỏ hidden), bấm thì phát rồi ẩn */
.nut-phat {
  position: absolute;
  top: 10px; /* top/right/bottom/left cho Safari cũ (iOS ≤ 14) chưa hiểu inset */
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 31px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--nga);
  font: inherit;
  cursor: pointer;
}

.nut-phat[hidden] {
  display: none;
}

/* nút phát nổi bật (chủ dự án 2026-10-06): vàng sáng hơn champagne, viền trắng, vầng sáng toả ra nhịp chậm */
.nut-phat svg {
  width: 80px;
  height: 80px;
  padding: 19px 16px 19px 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #f3d58c, #c99a3e);
  fill: var(--den);
  box-shadow: 0 0 0 0 rgba(243, 213, 140, 0.7), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.nut-phat span {
  padding: 6px 16px;
  border-radius: 999px;
  background: #f3d58c;
  color: var(--den);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

@media screen and (prefers-reduced-motion: no-preference) {
  .nut-phat svg {
    animation: phat-toa 2s ease-out infinite;
  }
}

@keyframes phat-toa {
  0% {
    box-shadow: 0 0 0 0 rgba(243, 213, 140, 0.7), 0 10px 30px rgba(0, 0, 0, 0.5);
  }

  70%,
  100% {
    box-shadow: 0 0 0 22px rgba(243, 213, 140, 0), 0 10px 30px rgba(0, 0, 0, 0.5);
  }
}

.nut-phat:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: -4px;
}

/* nút "Bật tiếng" lớn ở đáy video lúc tự chạy không tiếng (chủ dự án 2026-10-07) — cùng màu vàng nút phát */
.nut-tieng {
  position: absolute;
  left: 50%;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px 12px 16px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: linear-gradient(145deg, #f3d58c, #c99a3e);
  color: var(--den);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
  box-shadow: 0 0 0 0 rgba(243, 213, 140, 0.7), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.nut-tieng[hidden] {
  display: none;
}

.nut-tieng svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .nut-tieng {
    animation: phat-toa 2s ease-out infinite;
  }
}

.nut-tieng:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 4px;
}

.app-video figcaption {
  margin-top: 14px;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--muc-nhat);
}

.ds-tinh-nang {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.ds-tinh-nang li {
  padding: 18px 20px;
  background: var(--the-nen);
  border: 1px solid var(--the-vien);
  border-radius: var(--bo);
  box-shadow: var(--bong);
}

.phan .ds-tinh-nang h3 {
  font-size: 1.125rem;
}

.ds-tinh-nang p {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--muc-nhat);
}

.app-chu .cac-nut {
  margin-top: 28px;
}

@media (min-width: 900px) {
  /* video bên trái chiếm 2 hàng; bên phải: tiêu đề trên, tính năng dưới */
  .khung-app {
    grid-template-columns: 340px minmax(0, 1fr);
    grid-template-areas:
      "video dau"
      "video chu";
    grid-template-rows: auto 1fr;
    gap: 28px 72px;
  }

  .app-dau {
    grid-area: dau;
    align-self: end;
  }

  .app-video {
    grid-area: video;
    align-self: center;
  }

  .app-chu {
    grid-area: chu;
  }

  .dt-video {
    width: min(100%, calc((100vh - 60px) * 9 / 16 + 20px));
  }
}

/* ---------- Quy trình: 6 thẻ "Bước 01–06", cam kết có dấu tích ---------- */

.luoi-buoc {
  display: grid;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: buoc;
}

.luoi-buoc li {
  counter-increment: buoc;
  padding: 24px 22px;
  background: var(--the-nen);
  border: 1px solid var(--the-vien);
  border-radius: var(--bo);
  box-shadow: var(--bong);
}

.luoi-buoc li::before {
  content: "Bước " counter(buoc, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dong);
}

.phan .luoi-buoc h3 {
  font-size: 1.25rem;
}

.luoi-buoc p {
  margin-top: 8px;
  color: var(--muc-nhat);
}

/* cam kết: chữ đậm + dấu tích tròn champagne */
.luoi-buoc .cam-ket {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 600;
  color: var(--muc);
}

.luoi-buoc .cam-ket::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--den) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.5' fill='none' stroke='%23d6c29c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* điện thoại (1 cột): đường dọc nối các bước thay cho 6 thẻ — số bước trong vòng tròn đen bên trái */
@media (max-width: 599px) {
  .luoi-buoc {
    gap: 0;
    margin-top: 32px;
  }

  .luoi-buoc li {
    position: relative;
    padding: 0 0 26px 52px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* đường nối: từ dưới vòng tròn bước này xuống tới vòng tròn bước sau */
    background: linear-gradient(var(--vien), var(--vien)) 17px 42px / 2px calc(100% - 46px) no-repeat;
  }

  .luoi-buoc li:last-child {
    padding-bottom: 0;
    background: none;
  }

  .luoi-buoc li::before {
    content: counter(buoc, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 50%;
    background: var(--den);
    font-family: var(--chu-tieu-de);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--champagne);
  }

  .phan .luoi-buoc h3 {
    padding-top: 5px;
    font-size: 1.1875rem;
  }

  .luoi-buoc p {
    margin-top: 6px;
  }
}

@media (min-width: 600px) {
  .luoi-buoc {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .luoi-buoc {
    grid-template-columns: repeat(3, 1fr);
  }

  .luoi-buoc li {
    padding: 28px 26px 30px;
  }
}

/* ---------- Câu hỏi thường gặp: bấm mở từng câu (<details>) ---------- */

/* điện thoại + máy tính bảng: bỏ hẳn phần Hỏi đáp cho trang ngắn (chủ dự án chọn 2026-10-06) — chỉ máy tính có */
@media screen and (max-width: 899px) {
  #hoi-dap {
    display: none;
  }

  /* Hỏi đáp (nền xen) mất → Liên hệ nhận nền xen, không thì Quy trình + Liên hệ liền một màu */
  #lien-he {
    background: var(--kem-xen);
  }
}

.ds-hoi {
  display: grid;
  gap: 10px;
  max-width: 46rem;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
}

.ds-hoi details {
  background: var(--the-nen);
  border: 1px solid var(--the-vien);
  border-radius: var(--bo);
  box-shadow: var(--bong);
}

.ds-hoi details[open] {
  border-color: rgba(122, 93, 50, 0.4);
}

.ds-hoi summary {
  position: relative;
  padding: 18px 56px 18px 20px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.ds-hoi summary::-webkit-details-marker {
  display: none;
}

/* dấu + ở bên phải, mở ra xoay thành × */
.ds-hoi summary::after {
  content: "+";
  content: "+" / ""; /* máy đọc màn hình không đọc thừa chữ "cộng" (trình duyệt cũ dùng dòng trên) */
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -0.6em;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--dong);
  transition: transform 0.2s ease;
}

.ds-hoi details[open] summary::after {
  transform: rotate(45deg);
}

.ds-hoi summary:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
  border-radius: var(--bo);
}

.ds-hoi details p {
  padding: 0 20px 20px;
  color: var(--muc-nhat);
}

.ds-hoi details a {
  color: var(--dong);
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ds-hoi summary::after {
    transition: none;
  }
}

/* ---------- Liên hệ: form ---------- */

.form-lien-he {
  display: grid;
  gap: 22px;
  max-width: 36rem;
  margin: 40px auto 0;
  padding: 28px 22px;
}

/* "Hoặc nhắn thẳng:" + 2 nút dưới form */
.nhan-thang {
  max-width: 36rem;
  margin: 28px auto 0;
  text-align: center;
  color: var(--muc-nhat);
}

.nhan-thang .cac-nut {
  margin-top: 12px;
}

/* hộp "Chưa gửi được" đã có 2 nút Zalo / Messenger → ẩn dòng này cho khỏi lặp 4 nút
   (trình duyệt cũ không hiểu :has thì vẫn hiện cả hai — không hỏng gì) */
#lien-he:has(.bao-loi-gui[role="alert"]:not([hidden])) .nhan-thang {
  display: none;
}

.form-lien-he .o {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-lien-he label,
.form-lien-he legend {
  padding: 0;
  font-weight: 600;
}

.bat-buoc {
  color: var(--dong);
}

/* cỡ chữ 16px: iPhone không tự phóng to khi bấm vào ô */
.form-lien-he input[type="text"],
.form-lien-he input[type="tel"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--vien);
  border-radius: 10px;
  background: #fff;
  color: var(--muc);
  font: inherit;
  font-size: 1rem;
}

.form-lien-he input[type="text"]:focus-visible,
.form-lien-he input[type="tel"]:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 1px;
  border-color: var(--dong);
}

.form-lien-he input[aria-invalid="true"],
.form-lien-he input[aria-invalid="true"]:focus-visible {
  border-color: #a3341f;
  outline-color: #a3341f; /* đang chọn mà vẫn sai → viền vẫn đỏ */
}

/* hộp báo lỗi nhận focus bằng JS (tabindex -1) — không cần viền focus, đã có khung riêng */
.bao-loi-gui:focus {
  outline: none;
}

.goi-y-o {
  font-size: 0.875rem;
  color: var(--muc-nhat);
}

.loi-o {
  font-size: 0.875rem;
  font-weight: 600;
  color: #a3341f; /* đỏ gạch — tương phản ~6:1 trên nền thẻ */
}

/* nút chọn dạng viên thuốc, cả ô là chỗ bấm (cao ≥ 44px cho ngón tay) */
.lua-chon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.form-lien-he .lua-chon label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--vien);
  border-radius: 999px;
  background: #fff;
  font-weight: 400;
  cursor: pointer;
}

.lua-chon input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--den);
}

.form-lien-he .lua-chon label:has(input:checked) {
  border-color: var(--den);
  box-shadow: inset 0 0 0 1px var(--den);
  font-weight: 600;
}

.lua-chon input:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
}

/* ô ẩn chống spam: đẩy ra ngoài màn hình (không dùng display:none — một số máy spam bỏ qua ô bị ẩn hẳn) */
.o-an {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nut-gui {
  width: 100%;
  margin-top: 4px;
}

.nut-gui:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.form-lien-he[aria-busy] .nut-gui {
  cursor: progress;
}

/* nhóm nút chọn đang sai: viền viên thuốc đỏ nhạt (thay cho khung vuông quanh ô tròn) */
.form-lien-he .lua-chon label:has(input[aria-invalid="true"]) {
  border-color: rgba(163, 52, 31, 0.55);
}

.lua-chon input[aria-invalid="true"] {
  outline: none;
}

.lua-chon input[aria-invalid="true"]:focus-visible {
  outline: 2px solid #a3341f;
}

/* máy tính: thanh đầu trang dính trên cùng (64px) → ô sai cuộn tới không bị che nhãn / câu lỗi */
@media (min-width: 900px) {
  .form-lien-he .o {
    scroll-margin-top: 88px;
  }
}

.bao-loi-gui {
  padding: 16px 18px;
  border: 1px solid rgba(163, 52, 31, 0.35);
  border-radius: 10px;
  background: #fbefe9;
  font-weight: 600;
  color: var(--muc);
}

.bao-loi-gui[hidden] {
  display: none;
}

.bao-loi-gui .cac-nut {
  margin-top: 12px;
}

@media (min-width: 600px) {
  .form-lien-he {
    padding: 36px 40px;
  }
}

/* ---------- Trang cảm ơn (/cam-on/) ---------- */

.cam-on .cam-on-the {
  max-width: 34rem;
  margin: 0 auto;
  padding: 40px 24px;
  text-align: center;
}

.cam-on-dau {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  fill: var(--den);
  stroke: var(--champagne);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cam-on-dau circle {
  stroke: none;
}

.cam-on h1 {
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.2;
}

.cam-on-the > p {
  margin-top: 16px;
  color: var(--muc-nhat);
}

.cam-on-the .cac-nut {
  margin-top: 12px;
}

.cam-on-ve a {
  color: var(--dong);
  text-underline-offset: 3px;
}

/* ---------- Nỗi lo: tiêu đề bên trái, 5 thẻ đánh số bên phải ---------- */

/* "01 / 05" dưới tiêu đề — chỉ máy tính (điện thoại tiêu đề không đứng yên nên bỏ) */
.dem-noi-lo {
  display: none;
  margin-top: 28px;
  font-family: var(--chu-tieu-de);
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  color: var(--muc-nhat);
}

.dem-hien {
  display: inline-block;
  font-size: 1.75rem;
  color: var(--dong);
}

.ds-noi-dau {
  display: grid;
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: noi-lo;
}

.ds-noi-dau li {
  counter-increment: noi-lo;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0 8px;
  padding: 22px 22px;
  background: var(--the-nen);
  border: 1px solid var(--the-vien);
  border-radius: var(--bo);
  box-shadow: var(--bong);
  font-size: 1.125rem;
  line-height: 1.5;
}

.ds-noi-dau li::before {
  content: "0" counter(noi-lo);
  font-family: var(--chu-tieu-de);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--dong);
}

.ds-noi-dau strong {
  font-weight: 600;
  color: var(--dong);
}

/* ---------- Dịch vụ: lưới 8 thẻ đánh số, thẻ 06 + 07 có nhãn "Thế mạnh" ---------- */

.luoi-dv {
  display: grid;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: dv;
}

.luoi-dv li {
  counter-increment: dv;
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-content: start;
  padding: 24px 22px;
  background: var(--the-nen);
  border: 1px solid var(--the-vien);
  border-radius: var(--bo);
  box-shadow: var(--bong);
}

.luoi-dv li::before {
  content: "0" counter(dv);
  grid-row: span 2;
  font-family: var(--chu-tieu-de);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--dong);
}

.luoi-dv h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

.luoi-dv p {
  grid-column: 2;
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--muc-nhat);
}

/* nhãn nằm trên tiêu đề → số bên trái kéo dài 3 hàng */
.luoi-dv .the-manh::before {
  grid-row: span 3;
}

/* 06 + 07: viền đồng rõ hơn thẻ thường */
.luoi-dv .the-manh {
  border-color: rgba(122, 93, 50, 0.45);
}

.nhan-the-manh {
  justify-self: start;
  margin-bottom: 8px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--den);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--champagne);
}

.luoi-dv a {
  white-space: nowrap; /* "Xem quà tặng" không gãy dòng ở màn 320px */
  color: var(--dong);
  text-underline-offset: 3px;
}

/* điện thoại (1 cột): ô thường thành danh sách gọn, kẻ vạch mảnh giữa các ô; chỉ 06 + 07 "Thế mạnh" giữ khung thẻ.
   Đặt TRƯỚC luật "thẻ sáng lên" → ô đang giữa màn hình vẫn sáng thành thẻ đen như cũ. */
@media (max-width: 599px) {
  .luoi-dv {
    gap: 0;
    margin-top: 28px;
  }

  .luoi-dv li {
    padding: 14px 14px 15px;
  }

  .luoi-dv li:not(.the-manh) {
    position: relative;
    background: none;
    border-color: transparent;
    box-shadow: none;
  }

  /* vạch nằm trên đầu ô đứng ngay sau một ô thường (01–05) → ô 08 sau thẻ "Thế mạnh" không có vạch.
     Vẽ bằng lớp ::after (không dùng nền — luật "thẻ sáng lên" phải đổi được nền; không dùng :has() — Safari < 15.4).
     Ô sáng lên (hoặc ô ngay trước nó sáng) thì giấu vạch cho khỏi kẻ ngang mép thẻ đen. */
  .luoi-dv li:not(.the-manh) + li:not(.the-manh)::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 14px;
    right: 14px;
    height: 1px;
    background: var(--vien);
    transition: opacity 0.3s ease;
  }

  .luoi-dv li:not(.the-manh) + li:is(.dang-xem, :focus-within)::after,
  .luoi-dv li.dang-xem + li:not(.the-manh)::after,
  .luoi-dv li:focus-within + li:not(.the-manh)::after {
    opacity: 0;
  }

  /* máy có chuột, cửa sổ hẹp: ô đang rê chuột cũng sáng → giấu vạch như trên */
  @media (hover: hover) and (pointer: fine) {
    .luoi-dv li:not(.the-manh) + li:not(.the-manh):hover::after,
    .luoi-dv li:hover + li:not(.the-manh)::after {
      opacity: 0;
    }
  }

  .luoi-dv .the-manh {
    margin: 6px 0;
    padding: 18px 14px 19px;
  }

  .luoi-dv li::before {
    font-size: 1.5rem;
  }

  .luoi-dv h3 {
    font-size: 1.1875rem;
  }

  .luoi-dv p {
    margin-top: 4px;
  }
}

/* ---------- Quà tặng: 3 hộp quà nền đen, cùng khuôn với thẻ ---------- */

.ds-qua {
  display: grid;
  gap: 16px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: qua-tang;
}

.the-qua {
  counter-increment: qua-tang;
  position: relative;
  padding: 32px 28px 36px;
  background: var(--den);
  color: var(--nga);
  border: 1px solid rgba(214, 194, 156, 0.28);
  border-radius: var(--bo);
  box-shadow: 0 18px 40px -18px rgba(31, 28, 24, 0.55);
}

.the-qua::before {
  content: "0" counter(qua-tang);
  position: absolute;
  top: 26px;
  right: 28px;
  font-family: var(--chu-tieu-de);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--champagne);
  opacity: 0.85;
}

.hinh-qua {
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 28px;
  fill: none;
  stroke: var(--champagne);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.the-qua h3 {
  color: var(--nga);
}

.the-qua p {
  margin-top: 10px;
  color: rgba(247, 242, 232, 0.72);
}

.the-qua a {
  color: var(--champagne);
  text-underline-offset: 3px;
}

/* nhãn trên thẻ đen: nền champagne chữ đen / viền champagne */
.the-qua .nhan {
  display: table; /* xuống dòng riêng, rộng vừa chữ */
  background: var(--champagne);
  color: var(--den);
}

.the-qua .nhan-phu {
  background: transparent;
  color: var(--champagne);
  border: 1px solid var(--champagne);
}

.nhan {
  display: inline-block;
  margin-bottom: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--den);
  color: var(--champagne);
  font-size: 0.8125rem;
  font-weight: 600;
}

.nhan-phu {
  background: transparent;
  color: var(--dong);
  border: 1px solid var(--dong);
}

.cho-trong {
  color: var(--muc-nhat);
  font-style: italic;
}

/* ---------- Hiệu ứng thẻ (bộ chung cho cả trang) ----------
   A. "Thẻ sáng lên" — thẻ Nỗi lo + thẻ Dịch vụ: nền đen, chữ ngà / champagne, nhấc lên, bóng sâu.
      Khi nào sáng:
      - Nỗi lo: .dang-xem do hieu-ung.js gắn (câu giữa màn hình, hoặc câu đang rê chuột — ưu tiên);
        khi có câu sáng (.co-cau-sang) các câu khác mờ đi.
      - Dịch vụ: máy có chuột → :hover; điện thoại 1 cột → .dang-xem; mọi máy → :focus-within (Tab).
   B. Hộp quà (vốn nền đen): nhấc lên + viền champagne bo theo góc + hình vẽ được vẽ lại nét.
   C. Hiện dần khi cuộn tới — mọi thẻ + nhãn mục / tiêu đề / câu mô tả của từng phần:
      .cho-hien do hieu-ung.js gắn sau khi bộ theo dõi đã sẵn sàng, .hien khi cuộn tới.
   Nhấc lên dùng thuộc tính "translate", hiện dần dùng "transform" → hai cái không đè nhau.
   Màu / nền đổi cả khi "giảm chuyển động" (không phải chuyển động), nhưng không nhấc, không trượt,
   không vẽ nét. In trang: không hiệu ứng nào. */

/* A. Thẻ sáng lên */
@media screen {
  :is(.ds-noi-dau li.dang-xem, .luoi-dv li.dang-xem, .luoi-dv li:focus-within) {
    background: var(--den);
    border-color: rgba(214, 194, 156, 0.35);
    box-shadow: 0 22px 40px -18px rgba(31, 28, 24, 0.6);
    color: var(--nga);
  }

  :is(.ds-noi-dau li.dang-xem, .luoi-dv li.dang-xem, .luoi-dv li:focus-within)::before,
  :is(.ds-noi-dau li.dang-xem, .luoi-dv li.dang-xem, .luoi-dv li:focus-within) :is(strong, a) {
    color: var(--champagne);
  }

  :is(.luoi-dv li.dang-xem, .luoi-dv li:focus-within) h3 {
    color: var(--nga);
  }

  :is(.luoi-dv li.dang-xem, .luoi-dv li:focus-within) p {
    color: rgba(247, 242, 232, 0.78);
  }

  :is(.luoi-dv li.dang-xem, .luoi-dv li:focus-within) .nhan-the-manh {
    background: var(--champagne);
    color: var(--den);
  }

  /* Nỗi lo: có câu sáng thì các câu khác mờ đi (chỉ câu đã hiện xong — câu chưa hiện vẫn ẩn).
     Mờ 0.75; chữ đậm chuyển sang màu chữ thường để chữ mờ vẫn đạt tương phản ≥ 4,5:1
     (chữ đồng --dong ở độ mờ 0.75 chỉ còn ~3,4:1). */
  .ds-noi-dau.co-cau-sang li.hien:not(.dang-xem) {
    opacity: 0.75;
  }

  .ds-noi-dau.co-cau-sang li.hien:not(.dang-xem) strong {
    color: var(--muc);
  }

  /* B. Hộp quà sáng lên — điện thoại giữa màn hình / Tab */
  :is(.ds-qua .the-qua.dang-xem, .ds-qua .the-qua:focus-within) {
    border-color: var(--champagne);
    box-shadow: 0 0 0 1px var(--champagne), 0 26px 46px -18px rgba(31, 28, 24, 0.7);
  }

  :is(.ds-qua .the-qua.dang-xem, .ds-qua .the-qua:focus-within)::before {
    opacity: 1;
  }

  :is(.ds-qua .the-qua.dang-xem, .ds-qua .the-qua:focus-within) .hinh-qua {
    stroke: #f1e4c8; /* champagne sáng hơn */
  }

  /* khung Tab trên nền đen: dùng champagne cho dễ thấy (đồng trên đen chỉ ~3,6:1) */
  :is(.luoi-dv li:focus-within, .the-qua) a:focus-visible {
    outline-color: var(--champagne);
  }
}

/* Rê chuột — chỉ máy có chuột thật; phải khớp điều kiện trong hieu-ung.js.
   (Nỗi lo rê chuột do hieu-ung.js gắn .dang-xem nên không cần luật :hover riêng.) */
@media screen and (hover: hover) and (pointer: fine) {
  .luoi-dv li:hover {
    background: var(--den);
    border-color: rgba(214, 194, 156, 0.35);
    box-shadow: 0 22px 40px -18px rgba(31, 28, 24, 0.6);
    color: var(--nga);
  }

  .luoi-dv li:hover::before,
  .luoi-dv li:hover a {
    color: var(--champagne);
  }

  .luoi-dv li:hover h3 {
    color: var(--nga);
  }

  .luoi-dv li:hover p {
    color: rgba(247, 242, 232, 0.78);
  }

  .luoi-dv li:hover .nhan-the-manh {
    background: var(--champagne);
    color: var(--den);
  }

  .ds-qua .the-qua:hover {
    border-color: var(--champagne);
    box-shadow: 0 0 0 1px var(--champagne), 0 26px 46px -18px rgba(31, 28, 24, 0.7);
  }

  .ds-qua .the-qua:hover::before {
    opacity: 1;
  }

  .ds-qua .the-qua:hover .hinh-qua {
    stroke: #f1e4c8;
  }
}

/* Chuyển động: đổi màu mượt, nhấc lên, vẽ nét, hiện dần */
@media screen and (prefers-reduced-motion: no-preference) {
  .ds-noi-dau li,
  .luoi-dv li,
  .ds-qua .the-qua {
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease,
      color 0.4s ease, translate 0.4s ease,
      opacity 0.6s ease var(--tre, 0s), transform 0.6s ease var(--tre, 0s);
  }

  .ds-noi-dau li::before,
  .ds-noi-dau strong,
  .luoi-dv li::before,
  .luoi-dv h3,
  .luoi-dv p,
  .luoi-dv a,
  .nhan-the-manh,
  .the-qua::before,
  .hinh-qua {
    transition: color 0.4s ease, background-color 0.4s ease, opacity 0.4s ease, stroke 0.4s ease;
  }

  /* nhấc lên — trình duyệt cũ không hiểu "translate" thì bỏ qua, thẻ vẫn sáng */
  :is(.ds-noi-dau li.dang-xem, .luoi-dv li.dang-xem, .luoi-dv li:focus-within,
      .ds-qua .the-qua.dang-xem, .ds-qua .the-qua:focus-within) {
    translate: 0 -4px;
  }

  /* hộp quà: hình vẽ được vẽ lại nét */
  :is(.ds-qua .the-qua.dang-xem, .ds-qua .the-qua:focus-within) .hinh-qua > * {
    stroke-dasharray: 160;
    animation: ve-net 1.1s ease-out both;
  }

  /* C. Hiện dần khi cuộn tới (một luật chung cho mọi phần tử .cho-hien) */
  .cho-hien:not(.hien) {
    opacity: 0;
    transform: translateY(18px);
  }

  /* :where → độ ưu tiên 0, để luật transition của thẻ (đủ màu, nền, nhấc) thắng */
  :where(.phan .cho-hien) {
    transition: opacity 0.6s ease var(--tre, 0s), transform 0.6s ease var(--tre, 0s);
  }

  /* số "01 / 05": số mới trượt lên + hiện dần */
  .dem-hien.doi-so {
    animation: so-truot-len 0.4s ease;
  }
}

@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .luoi-dv li:hover,
  .ds-qua .the-qua:hover {
    translate: 0 -4px;
  }

  .ds-qua .the-qua:hover .hinh-qua > * {
    stroke-dasharray: 160;
    animation: ve-net 1.1s ease-out both;
  }
}

@keyframes ve-net {
  from {
    stroke-dashoffset: 160;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* D. Vệt sáng lướt qua một lần (cùng kiểu vệt sáng chữ vàng đầu trang):
   - nhãn "Thế mạnh" (thẻ 06 + 07 Dịch vụ): khi thẻ vừa hiện xong (.hien do hieu-ung.js gắn);
   - nút "Nhắn Zalo hỏi về quà tặng": khi cuộn tới (.vet-sang do hieu-ung.js gắn).
   Vệt là một lớp phụ trượt ngang (chỉ đổi transform), bị cắt gọn trong viền bo của nhãn / nút. */
@media screen and (prefers-reduced-motion: no-preference) {
  .luoi-dv li.hien .nhan-the-manh,
  #qua-tang .cac-nut .nut.vet-sang {
    position: relative;
    overflow: hidden;
  }

  .luoi-dv li.hien .nhan-the-manh::after,
  #qua-tang .cac-nut .nut.vet-sang::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
      transparent 30%, rgba(255, 250, 240, 0.7) 50%, transparent 70%);
    transform: translateX(-100%);
    pointer-events: none;
    animation: vet-luot 1.1s ease-in-out 0.7s both;
  }

  #qua-tang .cac-nut .nut.vet-sang::after {
    animation-delay: 0.2s;
  }
}

@keyframes vet-luot {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes so-truot-len {
  from {
    opacity: 0;
    transform: translateY(0.4em);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Chân trang ---------- */

.chan-trang {
  background: var(--den);
  color: var(--nga);
  /* chừa chỗ dưới cùng để nút nổi không che chữ chân trang */
  padding: 40px 0 calc(40px + var(--cao-nut-noi) + env(safe-area-inset-bottom));
  font-size: 0.9375rem;
}

.chan-trang .khung {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chan-trang a {
  color: var(--champagne);
}

.chan-trang .ban-quyen {
  opacity: 0.6;
}

/* ---------- Thanh nút dưới đáy (điện thoại) ----------
   Thanh nền kem dính đáy màn hình, rộng hết ngang: Messenger trái, Zalo (nút chính, rộng hơn) phải — gần ngón cái.
   Chừa chỗ vạch vuốt của iPhone (safe-area). Chân trang chừa --cao-nut-noi để thanh không che chữ cuối trang. */

.nut-noi {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  background: rgba(243, 237, 227, 0.96); /* --kem, hơi trong */
  border-top: 1px solid var(--the-vien);
  box-shadow: 0 -8px 24px -12px rgba(31, 28, 24, 0.25);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nut-noi {
    background: rgba(243, 237, 227, 0.86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.nut-noi .nut {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
}

.nut-noi .nut-den {
  flex-grow: 1.5;
}

/* màn 320px: chữ "Messenger" vừa khít nút → bớt đệm hai bên */
@media (max-width: 359px) {
  .nut-noi .nut {
    padding: 0 8px;
  }
}

.nut-noi .nut-messenger {
  background: var(--nga);
  color: var(--den);
  border: 1px solid var(--den);
}

/* Nút nổi ẩn khi 2 nút đầu trang còn trên màn hình (SPEC mục 2) — .an-nut-noi do hieu-ung.js gắn,
   không JS thì nút nổi luôn hiện */
.nut-noi {
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.nut-noi.an-nut-noi,
.nut-noi.gan-form {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce) {
  .nut-noi {
    transition: none;
  }
}

/* ---------- Máy tính bảng ---------- */

@media (min-width: 600px) {
  .luoi-dv {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Máy tính ---------- */

@media (min-width: 900px) {
  :root {
    --le: 40px;
    --cao-nut-noi: 0px;
  }

  .thanh-dau {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .thanh-dau .cac-nut {
    display: flex;
  }

  .thanh-dau .nut {
    min-height: 40px;
    padding: 0 18px;
    font-size: 0.9375rem;
  }

  .nut-noi {
    display: none;
  }

  .dau-trang {
    padding: 96px 0 112px;
  }

  .dau-trang .khung {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); /* cột phải đủ rộng để khối quà ít che ảnh app */
    gap: 48px;
    align-items: center;
  }

  /* trên máy tính 3 món quà đã ở khối bên phải → bỏ dòng tóm tắt */
  .dau-trang .qua {
    display: none;
  }

  /* điện thoại minh hoạ bên phải, khối "Tặng kèm" đè lên góc dưới trái */
  .minh-hoa {
    display: block;
    position: relative;
    min-height: 520px;
  }

  .dien-thoai {
    position: absolute;
    top: 0;
    right: 0;
  }

  /* hẹp + thấp xuống dưới đáy điện thoại → chỉ đè mép trái dưới, không che tiêu đề / món đầu trong ảnh app */
  .qua-dau {
    display: block;
    position: absolute;
    left: -24px; /* lấn vào khoảng trống giữa 2 cột (48px) */
    bottom: -56px;
    width: min(215px, 52%);
    padding: 24px 24px 20px;
    border-radius: var(--bo);
    background: #12100c;
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.8);
  }

  .qua-dau-ten {
    font-size: 1.125rem;
  }

  .qua-dau li {
    padding: 12px 0;
  }

  /* máy tính: 4 cột, số nằm trên tiêu đề */
  .luoi-dv {
    grid-template-columns: repeat(4, 1fr);
  }

  .luoi-dv li {
    grid-template-columns: 1fr;
    padding: 28px 24px 32px;
  }

  .luoi-dv li::before,
  .luoi-dv .the-manh::before {
    grid-row: auto;
    margin-bottom: 20px;
    font-size: 2.25rem;
  }

  .luoi-dv p {
    grid-column: 1;
    margin-top: 10px;
  }

  .ds-qua {
    grid-template-columns: repeat(3, 1fr);
  }

  /* thẻ khách: chữ + số bên trái, ảnh bên phải; thẻ .ca-dao đổi bên */
  .ds-ca {
    gap: 28px;
  }

  /* 900–1199px: chia đôi, cho 3 ô số nhỏ đủ rộng (số không xuống dòng) */
  .ca {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 36px;
  }

  .ca-dao .ca-chu {
    order: 2;
  }

  .ca-so li {
    padding: 14px 12px;
  }

  .ca-so .so-to {
    font-size: 1.3125rem;
    white-space: nowrap;
  }

  /* Nỗi lo: tiêu đề bên trái đứng yên khi cuộn, 5 câu bên phải */
  .khung-noi-dau {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    gap: 64px;
    align-items: start;
  }

  .noi-dau-dau {
    position: sticky;
    top: 128px; /* dưới thanh đầu trang 64px */
  }

  .khung-noi-dau h2 {
    font-size: clamp(2.5rem, 4.4vw, 3.5rem);
  }

  .dem-noi-lo {
    display: block;
  }

  .ds-noi-dau {
    margin-top: 0;
  }

  .ds-noi-dau li {
    grid-template-columns: 4.25rem 1fr;
    padding: 28px 32px;
    font-size: 1.25rem;
  }

  .ds-noi-dau li::before {
    font-size: 2.5rem;
  }

  .phan {
    padding: 96px 0;
    scroll-margin-top: 64px; /* không bị thanh đầu trang che khi bấm link tới phần */
  }
}

/* màn rộng: ảnh báo cáo rộng hơn phần chữ; thẻ .ca-dao đổi bên */
@media (min-width: 1200px) {
  .ca {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .ca-dao {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

}

/* ---------- In trang ---------- */

@media print {
  /* nút nổi, chữ "bấm để xem to" vô nghĩa trên giấy */
  .nut-noi,
  .ds-ca-cham,
  .ca-xem-to,
  .nut-phat,
  .nut-tieng,
  .xem-anh {
    display: none !important;
  }

  /* giữ nền đen / champagne khi in, không thì chữ sáng thành trắng trên giấy trắng */
  .thanh-dau,
  .dau-trang,
  .ca-so-lon,
  .ca-so li,
  .the-qua,
  .nhan,
  .nhan-the-manh,
  .nut,
  .dt-video,
  .luoi-buoc .cam-ket::before,
  .chan-trang {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}