/* ══════════════════════════════════════════════════════════════
   honestaistack.com — bản dựng lại 22/08/2026

   BỐN ĐIỀU ĐÃ KHOÁ, đừng đổi nếu chưa hỏi:

   1. HERO TỐI, THÂN TRANG SÁNG. Hero nền #0E0E0F, phần còn lại nền ngà
      #FAF8F4. Nền thân KHÔNG trắng tinh: ảnh ephemera là giấy ố vàng, đặt
      trên trắng tinh trông bẩn, trên ngà thì cùng một họ màu.
   2. MỘT MÀU NHẤN: hổ phách #EBA83A. Lấy từ vòng tròn của mẫu 21st.dev 4582,
      và tình cờ trùng họ với giấy cũ trong ảnh sản phẩm.
   3. CHỮ HERO DÙNG WEIGHT 700, KHÔNG PHẢI 800. File inter-tight-*.woff2 chỉ
      khai `font-weight: 500 700` — không có 800. Bù lại bằng letter-spacing
      âm (-0.045em); ở cỡ chữ 9rem thì mắt không phân biệt được với ExtraBold.
      Nếu sau này thêm file weight 800 thì bỏ phần siết giãn chữ đi.
   4. `color-scheme: light` là BẮT BUỘC. Thiếu dòng này thì máy đang bật dark
      mode sẽ vẽ ô nhập nền đen nằm giữa thẻ đăng ký nền trắng.
   ══════════════════════════════════════════════════════════════ */

/* ---------- 1. Font tự host ----------
   KHÔNG chuyển sang Google Fonts. Tự host để không phụ thuộc bên thứ ba và
   không rò referrer của người đọc sang máy chủ khác. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Token ---------- */

:root {
  color-scheme: light;            /* xem chú thích 4 ở đầu file */

  --dark:    #0E0E0F;
  --dark-2:  #1A1A1C;
  --paper:   #FAF8F4;
  --card:    #FFFFFF;
  --ink:     #17161A;
  --ink-2:   #56545C;
  --line:    #E6E1D8;
  --amber:   #EBA83A;
  --amber-d: #8A5D00;             /* hổ phách đủ tối để đọc trên nền sáng: 4.6:1 */

  --wrap:    1180px;
  --gap:     clamp(2.5rem, 6vw, 5rem);

  /* Bóng ba lớp: tiếp xúc sắc — khuếch tán vừa — khuếch tán rộng.
     Một lớp duy nhất luôn trông rẻ vì thiếu độ suy giảm. */
  --shadow: 0 1px 1px rgba(23,22,26,.06),
            0 4px 10px rgba(23,22,26,.05),
            0 16px 32px rgba(23,22,26,.06);
  --shadow-up: 0 1px 1px rgba(23,22,26,.07),
               0 8px 18px rgba(23,22,26,.08),
               0 26px 50px rgba(23,22,26,.10);
}

/* ---------- 3. Nền tảng ---------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.measure { max-width: 62ch; }

.small { font-size: 15px; color: var(--ink-2); }

.h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 14px;
}

/* Bỏ qua phần nav bằng bàn phím */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amber); color: var(--dark);
  padding: 12px 20px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* Nhãn chỉ dành cho trình đọc màn hình. Dùng cách cắt 1px chứ không dùng
   display:none — display:none làm trình đọc màn hình bỏ qua luôn nhãn. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 4. Nút ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px; font-weight: 600;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--amber { background: var(--amber); color: #1A1200; }
.btn--amber:hover { background: #F5B94E; }

.btn--ghost-light { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.07); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2C2A32; }

.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn--ghost:hover { border-color: var(--ink-2); }

/* ---------- 5. Header ----------
   Header nằm ĐÈ lên hero, nền trong suốt. Khi cuộn qua hero, app.js gắn
   .is-stuck để đổi sang nền tối đặc — nếu không thì chữ trắng của nav sẽ
   nằm trên nền ngà và biến mất. */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center;
  height: 74px;
  transition: height .25s ease, background-color .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  height: 62px;
  background: rgba(14,14,15,.92);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255,255,255,.10);
}

.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.wordmark {
  font-family: 'Inter Tight', sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: -0.02em;
  color: #fff; text-decoration: none;
}
.wordmark span { color: var(--amber); }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
  text-decoration: none;
  transition: color .18s ease;
}
.nav a:hover { color: #fff; }
.nav .btn { letter-spacing: 0; text-transform: none; font-size: 14px; padding: 10px 18px; }

/* ---------- 6. Hero ----------
   Dựng lại bố cục của 21st.dev component 4582 "Minimalist Hero" bằng CSS
   grid thuần. Bản gốc là React + framer-motion + Tailwind; ở đây không có
   npm nên không dùng được, chỉ mượn bố cục và tinh thần.

   Cao 85vh chứ KHÔNG phải 100vh: cần hở mép khối sản phẩm bên dưới, nếu
   không thì toàn bộ phần bán hàng bị giấu dưới nếp gấp. */

.hero {
  background: var(--dark);
  color: #fff;
  min-height: 85vh;
  padding: 118px 0 40px;
  position: relative;
  overflow: hidden;

  /* PHẢI là column. `.hero` chứa hai khối `.wrap`: lưới nội dung và hàng nút.
     Để row thì ở mobile — nơi hàng nút thôi không còn absolute — nó biến
     thành CỘT THỨ HAI nằm bên phải lưới thay vì nằm dưới. */
  display: flex; flex-direction: column; justify-content: center;
}

.hero__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr 1.15fr;
  align-items: center;
  gap: 28px;
  width: 100%;
}

.hero__intro p { color: rgba(255,255,255,.72); font-size: 15px; max-width: 27ch; margin: 0; }
.hero__intro .hero__meta {
  margin-top: 22px; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.56);
}

/* Cột giữa: vòng hổ phách nằm SAU chân dung đã tách nền — đúng bố cục mẫu 4582.

   ⚠ ẢNH PHẢI CÓ NỀN TRONG SUỐT. `portrait-cutout.webp` có kênh alpha thật
   (55,7% pixel trong suốt, đã đo). Thay bằng ảnh nền đặc là hỏng cả bố cục:
   vòng tròn hổ phách sẽ bị một khối chữ nhật che mất.

   ⚠ Viền bán trong suốt của ảnh mang giá trị RGB TỐI. Trên nền hero #0E0E0F
   thì hoà vào không thấy. ĐỪNG dùng lại ảnh này trên nền sáng — viền sẽ hiện
   thành quầng xám quanh người.

   Chọn kích thước theo CHIỀU CAO chứ không theo chiều rộng: người phải vừa
   đúng dải hero, còn chiều rộng thì tuỳ ảnh. */
.hero__figure {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: min(58vh, 520px);
}
.hero__circle {
  position: absolute;
  top: 34%; left: 50%;             /* 34% — tâm vòng tròn nằm sau đầu và vai */
  width: clamp(230px, 26vw, 395px);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: var(--amber);
  border-radius: 50%;
  z-index: 0;
}
.hero__portrait {
  position: relative; z-index: 1;
  height: min(62vh, 560px);
  width: auto;
  filter: grayscale(1) contrast(1.08);
}

/* Cột phải: câu khổng lồ. Weight 700 + siết giãn chữ — xem chú thích 3. */
.hero__statement {
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: .92;
  margin: 0;
}

.hero__actions {
  position: absolute; left: 0; right: 0; bottom: 34px;
  display: flex; align-items: center; gap: 14px;
}
.hero__scroll {
  margin-left: auto;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.56);
  display: flex; align-items: center; gap: 10px;
}
.hero__scroll::after {
  content: ''; width: 1px; height: 26px;
  background: linear-gradient(rgba(255,255,255,.5), transparent);
}

/* ---------- 7. Mục chung ---------- */

/* padding-block, KHÔNG dùng shorthand `padding`. Hầu hết mục là
   `class="section wrap"`; shorthand sẽ ghi đè padding-inline của .wrap về 0 và
   chữ dính sát mép màn hình. Ở màn rộng lỗi này vô hình vì .wrap đã tự căn
   giữa trong max-width — chỉ lộ ra dưới khoảng 1228px. */
.section { padding-block: var(--gap); }

/* Header cao 62px khi đã dính. Không có dòng này thì bấm "Products" trên nav
   sẽ nhảy tới nơi nhưng tiêu đề nằm KHUẤT SAU header. */
section[id] { scroll-margin-top: 84px; }
.section--line { border-top: 1px solid var(--line); }
.section__head { margin-bottom: 34px; }
.section__head p { color: var(--ink-2); margin: 12px 0 0; }

/* ---------- 8. Sản phẩm ----------
   Lưới tự giãn: thêm sản phẩm thứ ba chỉ cần thêm một thẻ, không phải
   sửa CSS. */

.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 26px; }

.product {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-up); }

.product__media { aspect-ratio: 16 / 10; background: #EFEAE1; overflow: hidden; }
.product__media img { width: 100%; height: 100%; object-fit: cover; }

.product__body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.product__name { font-size: 1.45rem; }
.product__line { color: var(--ink-2); margin: 10px 0 0; font-size: 15.5px; }
.product__foot { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.product__price {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700; font-size: 1.3rem;
  margin-right: auto;
}
.product__price small { font-weight: 500; font-size: 12px; color: var(--ink-2); display: block; letter-spacing: .1em; text-transform: uppercase; }

/* Ô giữ chỗ khi chưa có ảnh thật */
.product__media--todo {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #EFEAE1 0 12px, #E7E1D6 12px 24px);
  color: var(--ink-2); font-size: 13px; text-align: center; padding: 20px;
}

/* ---------- 9. Gallery ----------
   Đây là khối "khoe", khác khối sản phẩm ở trên là khối "bán": ảnh rời,
   không giá, không nút. Bo góc 2px thôi — giấy thật không bo tròn. */

/* Mỗi sản phẩm một cụm riêng, có nhãn. Không trộn ảnh hai sản phẩm vào chung
   một lưới: người xem cần biết ngay thứ mình đang nhìn do hệ nào tạo ra, và
   hai phong cách ảnh rất khác nhau nên trộn vào là trông lộn xộn. */
.gallery-group + .gallery-group { margin-top: 44px; }
.gallery-group__label {
  font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.gallery { columns: 3; column-gap: 18px; }
.gallery figure { break-inside: avoid; margin: 0 0 18px; }
.gallery img {
  width: 100%; border-radius: 2px;
  box-shadow: var(--shadow);
  background: #EFEAE1;
}
.gallery figcaption {
  font-size: 12.5px; color: var(--ink-2);
  margin-top: 8px; letter-spacing: .02em;
}

/* ---------- 10. Cách làm việc ---------- */

.method { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.method__item { border-top: 2px solid var(--amber); padding-top: 18px; }
.method__item h3 { font-size: 1.1rem; }
.method__item p { color: var(--ink-2); font-size: 15.5px; margin: 8px 0 0; }

/* ---------- 11. Giới thiệu ---------- */

.about { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.about__photo {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 3px; box-shadow: var(--shadow);
}
.about p { color: var(--ink-2); }
.about p + p { margin-top: 14px; }

/* ---------- 12. Thẻ đăng ký ----------
   Thẻ này CỐ Ý không trượt khi hiện ra, chỉ mờ dần tại chỗ: nó là thứ cần
   bấm sớm nhất, đừng để nó còn đang di chuyển lúc con trỏ tới nơi. */

.signup {
  background: var(--dark);
  color: #fff;
  border-radius: 5px;
  padding: clamp(30px, 5vw, 52px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.signup h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.signup p { color: rgba(255,255,255,.72); margin: 12px 0 0; font-size: 15.5px; }
.signup ul { margin: 16px 0 0; padding: 0; list-style: none; }
.signup li { position: relative; padding-left: 20px; font-size: 15px; color: rgba(255,255,255,.78); margin-top: 7px; }
.signup li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--amber); border-radius: 50%; }

/* Đoạn giải thích vì sao tặng được nguyên một source mà không lấy mất gì của
   người đã trả tiền. Nhỏ và mờ hơn phần trên — nó là lời giải thích, không
   phải lời chào hàng. */
.signup__aside {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 14px; line-height: 1.6;
  color: rgba(255,255,255,.56);
}

.form { display: flex; flex-direction: column; gap: 10px; }
.form input {
  font: inherit; font-size: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 3px;
  background: rgba(255,255,255,.06);
  color: #fff;
}
.form input::placeholder { color: rgba(255,255,255,.45); }
.form input:focus { border-color: var(--amber); background: rgba(255,255,255,.10); }
.form__note { font-size: 13px; color: rgba(255,255,255,.5); margin: 4px 0 0; }
.form__note a { color: rgba(255,255,255,.8); }
.form__status { font-size: 14px; min-height: 1.2em; }
.form__status[data-tone="ok"]  { color: var(--amber); }
.form__status[data-tone="err"] { color: #FF9B8A; }

/* ---------- 13. Footer ---------- */

.footer { background: var(--dark); color: rgba(255,255,255,.66); padding: 54px 0 34px; margin-top: var(--gap); }
.footer a { color: rgba(255,255,255,.66); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
.footer h3 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.56); font-weight: 600; }
.footer ul { list-style: none; margin: 14px 0 0; padding: 0; }
.footer li { margin-top: 8px; font-size: 15px; }
.footer__base {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 13.5px; color: rgba(255,255,255,.56);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ---------- 14. Nút support nổi ----------
   Vai trò như nút Messenger của các trang bán hàng, nhưng dẫn về trang FAQ
   thay vì mở chat: khách của site này nói tiếng Anh và mua qua WarriorPlus,
   một widget chat tiếng Việt sẽ làm giảm độ tin chứ không tăng. */

.support-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 999px;
  font-family: 'Inter Tight', sans-serif; font-size: 14.5px; font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-up);
  transition: transform .2s ease, background-color .2s ease;
}
.support-fab:hover { transform: translateY(-2px); background: #2C2A32; }
.support-fab svg { width: 17px; height: 17px; }

/* ---------- 15. Trang phụ (support, pháp lý) ---------- */

.page-head { background: var(--dark); color: #fff; padding: 130px 0 56px; }
.page-head h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.page-head p { color: rgba(255,255,255,.66); margin: 14px 0 0; max-width: 58ch; }

.prose { max-width: 68ch; }
.prose h2 { font-size: 1.4rem; margin-top: 40px; }
.prose h3 { font-size: 1.1rem; margin-top: 28px; }
.prose p, .prose li { color: var(--ink-2); }
.prose p { margin: 12px 0 0; }
.prose ul { margin: 12px 0 0; padding-left: 20px; }
.prose li { margin-top: 6px; }
.prose a { color: var(--amber-d); text-underline-offset: 3px; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary {
  font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.08rem;
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--amber-d); line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { color: var(--ink-2); margin: 12px 0 0; max-width: 68ch; }

/* ---------- 16. Hiệu ứng ----------
   Trần là 90ms mỗi bậc. Khối nhiều con nhất có 4 ô → con cuối chờ 270ms,
   vừa dưới ngưỡng 300ms mà người ta bắt đầu đọc ra là "trang chậm". */

[data-reveal] { opacity: 0; transform: translateY(26px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
[data-reveal="fade"] { transform: none; }        /* thẻ đăng ký: mờ dần tại chỗ */

[data-reveal-stagger] > * { transition-delay: calc(var(--i, 0) * 90ms); }

.hero__intro, .hero__statement, .hero__actions { animation: rise .7s cubic-bezier(.22,1,.36,1) both; }
.hero__statement { animation-delay: .10s; }
.hero__actions   { animation-delay: .22s; }
.hero__circle    { animation: pop .85s cubic-bezier(.22,1,.36,1) both; }
.hero__portrait  { animation: rise .9s cubic-bezier(.22,1,.36,1) .18s both; }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes pop  { from { opacity: 0; transform: translate(-50%,-52%) scale(.82); } to { opacity: 1; } }

/* ---------- 17. Thu nhỏ màn hình ---------- */

@media (max-width: 940px) {
  .hero { min-height: auto; padding: 104px 0 96px; }
  .hero__grid { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .hero__figure { order: 1; min-height: 340px; }
  .hero__statement { order: 2; }
  .hero__intro { order: 3; }
  .hero__intro p { max-width: none; margin-inline: auto; }
  .hero__actions { position: static; margin-top: 26px; justify-content: center; flex-wrap: wrap; }
  .hero__scroll { display: none; }

  /* Mobile: giấu ba link cuộn trong trang — hero đã có nút "See the products",
     và footer có đủ mọi link. NHƯNG GIỮ LẠI "Support": không có menu bung ra
     trên site này, nên đây là đường duy nhất tới trang hỗ trợ từ header.
     (Nút nổi góc phải dưới cũng dẫn tới đó — hai đường, cố ý.) */
  .nav { gap: 18px; }
  .nav a[href^="#"]:not(.btn) { display: none; }   /* :not(.btn) — nút Free download cũng trỏ tới #free */

  .gallery { columns: 2; }
  .signup { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .about__photo { max-width: 240px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .gallery { columns: 1; }
  .footer__grid { grid-template-columns: 1fr; }
  /* Màn hình nhỏ: nút nổi thu còn biểu tượng. Nó nằm đè lên góc phải dưới,
     mà đó đúng chỗ nút CTA của hero rơi vào ở khổ hẹp — chữ "Support" ăn mất
     một nút bán hàng thì không đáng. Nhãn cho trình đọc màn hình vẫn còn. */
  .support-fab { right: 14px; bottom: 14px; padding: 13px; border-radius: 50%; }
  .support-fab .support-fab__label { display: none; }
  .support-fab svg { width: 19px; height: 19px; }
  .hero__figure { min-height: 290px; }
}

/* ---------- 18. Tắt chuyển động ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}