/* Trang chủ AntiTask — các khối riêng của trang giới thiệu.
 *
 * Vì sao là tệp RIÊNG chứ không sửa thẳng styles.css: `styles.css` đang được
 * dùng chung bởi updates.html và cả ba trang /premium/. Viết đè lên đó là sửa
 * một tệp mà ba trang khác đang đứng lên. Tệp này chỉ nạp ở index.html, nên
 * hỏng cũng chỉ hỏng đúng trang chủ.
 *
 * Token màu, header, footer, .section, .eyebrow, .faq-list… vẫn lấy từ
 * styles.css — để trang chủ và trang Premium trông như một sản phẩm.
 */

/* ══ Ảnh chụp tự chuyển sáng ↔ tối ═══════════════════════════════════════════
 *
 * Hai ảnh cùng khung hình xếp chồng, bản tối mờ dần hiện lên rồi lui đi. Ảnh
 * chụp trong CÙNG một lượt (xem scripts/capture-site-shots.js) nên chỉ khác
 * màu — nếu dữ liệu lệch, mắt sẽ đọc thành giật hình chứ không phải đổi màu.
 *
 * Ba điều kiện bắt buộc, không phải tuỳ chọn:
 *  1. `prefers-reduced-motion` → đứng yên. Chuyển động lặp vô hạn gây khó chịu
 *     thật cho người nhạy cảm tiền đình, không phải chuyện thẩm mỹ.
 *  2. Ảnh thứ hai `loading="lazy"` — không tải gấp đôi dữ liệu ngay khi mở trang.
 *  3. Ảnh to là điểm bán hàng: khung ảnh chiếm phần lớn chiều ngang của khối.
 */
.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1800 / 1125;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 20px;
  background: #eef2fa;
  box-shadow:
    0 2px 5px rgba(20, 38, 92, .06),
    0 18px 34px rgba(28, 52, 120, .14),
    0 44px 80px rgba(28, 52, 120, .16);
}
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

/* Hero: ảnh tràn ra ngoài mép phải của khung nền để trông lớn hơn khổ thật —
   thủ pháp quen thuộc, và ở đây an toàn vì phần bị cắt là vùng trống bên phải
   của lưới lịch, không phải nội dung. */
.shot-hero { margin-right: -46px; }

.shot-dark {
  opacity: 0;
  animation: shot-swap 14s ease-in-out infinite;
  animation-delay: var(--shot-delay, 0s);
}

/* Lệch pha giữa các khối để cả trang không cùng chớp một nhịp — nhìn như đèn
   nhấp nháy chứ không như một sản phẩm đang đổi chủ đề. */
.shot-b { --shot-delay: 2.8s; }
.shot-c { --shot-delay: 5.6s; }
.shot-d { --shot-delay: 8.4s; }
.shot-e { --shot-delay: 11.2s; }

@keyframes shot-swap {
  0%, 34% { opacity: 0; }
  46%, 80% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shot-dark { animation: none; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) and (prefers-color-scheme: dark) {
  .shot-dark { opacity: 1; }
}

/* ══ Nút bấm ═════════════════════════════════════════════════════════════════
 *
 * Một khuôn nút duy nhất `.cta` cho mọi lời kêu gọi: icon bên trái, nhãn bên
 * phải, bóng đổ hai tầng. Hai tầng chứ không một: tầng gần tạo mép, tầng xa tạo
 * độ nổi — một tầng duy nhất cho ra vệt xám phẳng, nhìn như nút bị mờ.
 *
 * Trạng thái nhấn (`:active`) hạ nút xuống và thu bóng lại. Đây là thứ khiến
 * nút "có cảm giác bấm được": mắt thấy nó lún xuống dưới ngón tay.
 */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px 13px 15px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: 780 14.5px var(--sans);
  letter-spacing: -.2px;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), box-shadow .18s, background .18s, border-color .18s;
}
.cta:active { transform: translateY(1px) scale(.995); }
.cta:focus-visible { outline: 3px solid #b8c9ff; outline-offset: 3px; }
.cta-sm { padding: 8px 15px 8px 9px; border-radius: 11px; font-size: 12.5px; gap: 8px; }
.cta-sm .cta-mark { width: 25px; height: 25px; border-radius: 8px; }
.cta-sm .cta-mark svg { width: 15px; height: 15px; }

.cta-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
}
.cta-mark svg { width: 18px; height: 18px; display: block; }
.cta-mark.is-plain { background: rgba(255, 255, 255, .14); color: #fff; }
.cta-mark.is-store { background: #eaf0ff; color: #3a63d8; }

.cta-stack { display: block; }
.cta-stack b { display: block; font-size: 14px; font-weight: 780; letter-spacing: -.2px; }
.cta-stack small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; opacity: .72; }
.cta-stacked { padding: 11px 20px 11px 13px; }

/* Nút chính — đăng nhập Google. Nền trắng, viền và bóng xanh: nút Google quen
   mắt là nút sáng, đổi sang nền tối thì người dùng phải đọc mới nhận ra. */
.cta-primary {
  border-color: #d7e0f7;
  background: #fff;
  color: #17224a;
  box-shadow: 0 2px 4px rgba(30, 52, 120, .06), 0 12px 24px rgba(46, 76, 168, .16);
}
.cta-primary:hover {
  transform: translateY(-2px);
  border-color: #b6c8f4;
  box-shadow: 0 4px 8px rgba(30, 52, 120, .08), 0 20px 34px rgba(46, 76, 168, .22);
}
.cta-primary .cta-mark { background: #f4f7ff; }

.cta-dark {
  background: linear-gradient(180deg, #1b2647, #0f1730);
  color: #fff;
  box-shadow: 0 2px 4px rgba(9, 17, 40, .18), 0 14px 26px rgba(9, 17, 40, .28);
}
.cta-dark:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 9px rgba(9, 17, 40, .22), 0 22px 38px rgba(9, 17, 40, .34);
}

.cta-store {
  border-color: #d9e1f0;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(30, 52, 120, .05), 0 10px 22px rgba(30, 52, 120, .1);
}
.cta-store:hover { transform: translateY(-2px); border-color: #a9bdec; box-shadow: 0 4px 8px rgba(30, 52, 120, .08), 0 18px 32px rgba(30, 52, 120, .16); }

.cta-light {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 3px 6px rgba(10, 20, 55, .1), 0 16px 30px rgba(10, 20, 55, .2);
}
.cta-light:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(10, 20, 55, .14), 0 24px 42px rgba(10, 20, 55, .26); }

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 0; }

/* Nút phụ ở header — chỉ viền, có icon, không tranh chỗ với nút chính. */
.btn-ghost-icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid #d9e1f0;
  border-radius: 11px;
  background: #fff;
  color: #35446a;
  font: 720 12.5px var(--sans);
  transition: border-color .18s, background .18s, transform .18s;
}
.btn-ghost-icon svg { width: 15px; height: 15px; }
.btn-ghost-icon:hover { transform: translateY(-1px); border-color: #a9bdec; background: #f6f9ff; }
.btn-ghost-icon:focus-visible { outline: 3px solid #b8c9ff; outline-offset: 3px; }

/* ══ Hero ════════════════════════════════════════════════════════════════════ */
.home-hero {
  width: min(1260px, calc(100% - 48px));
  margin: 16px auto 0;
  padding: 62px 0 62px 62px;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: 44px;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(130deg, #eef1ff 0%, #eef4ff 51%, #dae7ff 100%);
}
.home-hero h1 {
  margin: 0;
  font-size: clamp(38px, 4.3vw, 58px);
  letter-spacing: -2.4px;
  line-height: 1.05;
}
/* KHÔNG dùng Georgia cho chữ tiếng Việt.
 *
 * Georgia thiếu các glyph tiếng Việt dựng sẵn như "ầ" (U+1EA7). Trình duyệt
 * phải chắp vá: lấy chữ cái gốc từ Georgia rồi mượn dấu thanh từ font khác, và
 * dấu rơi lệch sang bên — "nhẹ đầu hơn" hiện thành "nhẹ đâ ̀u hơn" ngay trên
 * dòng chữ lớn nhất trang. Dùng lại font hệ thống, chỉ nghiêng và nhạt nét. */
.home-hero h1 em {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -1.6px;
  color: #516dda;
}
.home-hero-summary {
  max-width: 460px;
  margin: 22px 0 0;
  color: #53617a;
  font-size: 16px;
  line-height: 1.7;
}
.home-hero .release-note { margin: 22px 0 0; }

/* ══ Bốn tiện ích ngay dưới đầu trang ════════════════════════════════════════ */
.utility-cards {
  width: min(1260px, calc(100% - 48px));
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.utility-card {
  display: block;
  padding: 22px 20px;
  border: 1px solid #e2e8f3;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 52, 120, .04), 0 10px 22px rgba(30, 52, 120, .06);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.utility-card:hover {
  transform: translateY(-3px);
  border-color: #c8d5f2;
  box-shadow: 0 3px 6px rgba(30, 52, 120, .07), 0 20px 34px rgba(30, 52, 120, .12);
}
.utility-card strong { display: block; margin: 14px 0 0; font-size: 14.5px; letter-spacing: -.35px; }
.utility-card > span:last-child { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.6; }

.utility-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
.utility-icon svg { width: 20px; height: 20px; }
.utility-icon.is-blue { background: #e7edff; color: #4262d0; }
.utility-icon.is-violet { background: #f0e9ff; color: #7a55d8; }
.utility-icon.is-green { background: #e0f6ee; color: #17916c; }
.utility-icon.is-amber { background: #fdf0dd; color: #b8791c; }

/* ══ Khối tính năng: chữ gọn, ảnh to ═════════════════════════════════════════
 *
 * Cột ảnh rộng hơn cột chữ khá nhiều (1.42 so với .58). Trang giới thiệu một
 * ứng dụng thì thứ thuyết phục là NHÌN THẤY nó, không phải đọc mô tả — nên chữ
 * rút còn một tiêu đề ngắn và một đoạn ba dòng. */
.feature-section { padding-top: 64px; }
.feature-row {
  display: grid;
  grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr);
  align-items: center;
  gap: 54px;
  padding: 54px 0;
  border-top: 1px solid #e6ebf4;
}
.feature-row:first-of-type { border-top: 0; padding-top: 0; }
/* Hàng đảo: phải đảo LUÔN tỉ lệ cột, không chỉ đảo thứ tự.

    đẩy khối chữ sang phải, nhưng khung lưới vẫn giữ nguyên cột đầu
   hẹp — nên ảnh rơi vào cột hẹp và co lại còn bằng một phần ba, trong khi chữ
   chiếm hết chỗ rộng. Đúng ngược lại điều đang muốn. */
.feature-row.is-flipped { grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr); }
.feature-row.is-flipped .feature-row-copy { order: 2; }
.feature-row h2 {
  margin: 0;
  font-size: clamp(26px, 2.7vw, 35px);
  letter-spacing: -1.3px;
  line-height: 1.14;
}
.feature-row-copy > p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.72;
}
.feature-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e4ebff;
  color: #4a63c8;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1px;
}

/* ══ Hai cách dùng ═══════════════════════════════════════════════════════════ */
.dual-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.dual-panel article {
  padding: 30px 30px 26px;
  border: 1px solid #e2e8f3;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 52, 120, .04), 0 12px 26px rgba(30, 52, 120, .07);
}
.dual-panel h3 { margin: 16px 0 0; font-size: 20px; letter-spacing: -.6px; }
.dual-panel p { margin: 10px 0 16px; color: var(--muted); font-size: 14px; line-height: 1.7; }

/* ══ Premium ═════════════════════════════════════════════════════════════════ */
.premium-block {
  padding: 58px 62px;
  border-radius: 25px;
  background: var(--navy);
  color: #fff;
}
.premium-block h2 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -1.6px; }
.premium-block > p { max-width: 560px; margin: 20px 0 0; color: #b3bed4; font-size: 15px; line-height: 1.75; }
.premium-free {
  display: inline-block;
  margin: 22px 0 0;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(158, 223, 207, .14);
  color: #a9ead7;
  font-size: 13px;
  font-weight: 750;
}
.premium-four {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.premium-four li {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
}
.premium-four strong { display: block; font-size: 14px; letter-spacing: -.3px; }
.premium-four span { display: block; margin-top: 7px; color: #aeb9cf; font-size: 12px; line-height: 1.6; }
.premium-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 32px; }

/* ══ Tải về ══════════════════════════════════════════════════════════════════ */
.download-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  align-items: center;
  gap: 60px;
}
.download-title { margin: 0; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -1.6px; line-height: 1.1; }
.download-lead { max-width: 520px; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.download-more { margin: 18px 0 0; }

/* ══ Bố cục hẹp ══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .utility-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premium-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .home-hero { grid-template-columns: 1fr; padding: 48px 34px 40px; gap: 32px; }
  .shot-hero { margin-right: 0; }
  .feature-row { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .feature-row.is-flipped .feature-row-copy { order: 0; }
  .dual-panel, .download-row { grid-template-columns: 1fr; gap: 26px; }
  .premium-block { padding: 42px 32px; }
}
/* Ở 390px, "Đăng nhập bằng Google" + "Tải về" đẩy khối nút vượt mép phải 11px.
   Đo được bằng scrollWidth − clientWidth, không phải đoán. Cắt phần chữ thừa
   của nhãn và bỏ chữ ở nút phụ — icon tải xuống tự nói được nó là gì. */
@media (max-width: 620px) {
  .cta-label-more { display: none; }
  .btn-ghost-icon { padding: 8px 10px; font-size: 0; gap: 0; }
  .btn-ghost-icon svg { width: 17px; height: 17px; }
  .header-actions { gap: 8px; }
}

@media (max-width: 560px) {
  .home-hero, .utility-cards { width: calc(100% - 32px); }
  .home-hero { padding: 38px 20px 32px; border-radius: 21px; }
  .home-hero h1 { font-size: 36px; letter-spacing: -1.5px; }
  .home-hero-summary { font-size: 15px; }
  .utility-cards { grid-template-columns: 1fr; }
  .premium-four { grid-template-columns: 1fr; }
  .premium-block { padding: 34px 22px; border-radius: 19px; }
  .cta { flex: 1 1 100%; justify-content: center; }
  .cta-sm { flex: none; }
  .nav { display: none; }
}