/* Meet Note — trang giới thiệu.
   Một tệp kiểu dùng chung cho cả ba trang. Màu lấy từ bộ giao diện của app. */

:root {
  --nen: #ffffff;
  --nen-2: #f7f6fb;
  --the: #ffffff;
  --chu: #14131a;
  --chu-mo: #5d5a6b;
  --vien: #e7e4f0;
  --tim: #5b3df5;
  --tim-nhat: #f0ecff;
  --tim-dam: #3d24c9;
  --xanh: #0f9d76;
  --bong: 0 1px 2px rgba(20, 19, 26, .04), 0 12px 32px -12px rgba(20, 19, 26, .12);
  --bong-cao: 0 2px 4px rgba(20, 19, 26, .04), 0 28px 60px -20px rgba(20, 19, 26, .22);
  --r: 16px;
  --khung: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --nen: #0d0c12;
    --nen-2: #131119;
    --the: #17151f;
    --chu: #f4f2f8;
    --chu-mo: #a49fb4;
    --vien: #272334;
    --tim: #a893ff;
    --tim-nhat: #1d1730;
    --tim-dam: #c4b5ff;
    --xanh: #35c79b;
    --bong: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
    --bong-cao: 0 2px 4px rgba(0, 0, 0, .4), 0 28px 60px -20px rgba(0, 0, 0, .8);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "Be Vietnam Pro",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { letter-spacing: -.02em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(34px, 5.2vw, 58px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: 19px; line-height: 1.3; }
p { margin: 0; }
a { color: inherit; }

.mo { color: var(--chu-mo); }

/* ── thanh trên cùng ─────────────────────────────────────────────────── */
header.thanh {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--nen) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--vien);
}
.thanh .khung {
  display: flex; align-items: center; gap: 24px;
  height: 68px;
}
.hieu { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; }
.hieu img { width: 32px; height: 32px; border-radius: 9px; }
nav.dieu-huong { margin-left: auto; display: flex; gap: 28px; }
nav.dieu-huong a {
  text-decoration: none; color: var(--chu-mo); font-size: 15px; font-weight: 500;
}
nav.dieu-huong a:hover { color: var(--chu); }
/* Nut doi tieng: o san tren thanh ca khi dien thoai an menu — nguoi doc nham
   trang can thay loi ra ngay dau trang, khong phai cuon xuong chan trang. */
.doi-tieng {
  display: inline-flex; align-items: center; gap: 6px; margin-right: -12px;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--vien);
  color: var(--chu-mo); font-size: 14px; font-weight: 600; text-decoration: none;
}
.doi-tieng:hover { color: var(--chu); border-color: var(--chu-mo); }
.doi-tieng svg { width: 16px; height: 16px; }
@media (max-width: 820px) { nav.dieu-huong { display: none; } .thanh .doi-tieng { margin-left: auto; } }

/* ── nút ──────────────────────────────────────────────────────────────── */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.nut.chinh { background: var(--tim); color: #fff; box-shadow: 0 8px 20px -8px rgba(91, 61, 245, .7); }
.nut.chinh:hover { background: var(--tim-dam); transform: translateY(-1px); }
.nut.phu { background: var(--the); color: var(--chu); border-color: var(--vien); }
.nut.phu:hover { border-color: var(--chu-mo); }
.thanh .nut { padding: 10px 18px; }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { padding: 84px 0 40px; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30% 40% 40% -10%;
  background: radial-gradient(closest-side, rgba(91, 61, 245, .16), transparent);
  pointer-events: none;
}
.hero .khung { position: relative; display: grid; gap: 56px; grid-template-columns: 1.05fr .95fr; align-items: center; }
@media (max-width: 940px) {
  .hero { padding-top: 56px; }
  .hero .khung { grid-template-columns: 1fr; gap: 40px; }
}
.nhan {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--tim-nhat); color: var(--tim-dam);
  font-size: 13.5px; font-weight: 600;
}
.hero h1 { margin: 20px 0 18px; }
.hero .dan { font-size: 19px; color: var(--chu-mo); max-width: 540px; }
.hero .nut-bo { display: flex; gap: 12px; margin: 30px 0 18px; flex-wrap: wrap; }
.tai-chu .nut-bo { display: flex; gap: 12px; flex-wrap: wrap; }
.gach-tin { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14.5px; color: var(--chu-mo); }
.gach-tin span { display: inline-flex; align-items: center; gap: 7px; }
.cham { width: 6px; height: 6px; border-radius: 50%; background: var(--xanh); flex: none; }

/* ── khung điện thoại: dựng lại BA MÀN THẬT của app ────────────────────
   Vẽ bằng CSS chứ không chụp màn hình: mọi ảnh chụp từ máy đang dùng đều mang
   tên cuộc họp và nội dung nội bộ, đăng lên trang công khai là rò dữ liệu họp.
   Nội dung trong khung là ví dụ bịa, nhưng bố cục, màu và cỡ chữ theo đúng app
   nên người xem nhận ra ngay đây là sản phẩm gì.                            */
.dien-thoai {
  width: 320px; max-width: 100%; margin: 0 auto;
  border-radius: 44px; padding: 10px;
  background: linear-gradient(160deg, #cfc9e6, #8f88ad);
  box-shadow: var(--bong-cao);
}
.man {
  position: relative; height: 600px; overflow: hidden;
  border-radius: 36px; background: #ffffff; color: #17161d;
  font-size: 13px; line-height: 1.45;
}
.khe {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 24px; border-radius: 999px; background: #17161d; z-index: 3;
}
/* Ba màn chồng lên nhau. KHÔNG có hiệu ứng (tắt JS, hoặc máy xin giảm chuyển
   động) thì chỉ màn đầu hiện — chồng ba màn tĩnh lên nhau là một đống chữ. */
.canh { position: absolute; inset: 0; padding: 46px 18px 18px; }
.canh-2, .canh-3 { display: none; }

.man .nho { font-size: 11.5px; color: #75718a; }
.man b { font-weight: 650; }

.dinh { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ten-app { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.quay { font-size: 22px; line-height: 1; color: #75718a; }
.nut-tron {
  width: 26px; height: 26px; border-radius: 50%; background: #f1eff8; flex: none;
}
.nut-tron:first-of-type { margin-left: auto; }

.vien-chon, .the-tab { display: flex; gap: 6px; margin-bottom: 14px; }
.vien-chon span, .the-tab span {
  padding: 6px 12px; border-radius: 999px; background: #f1eff8;
  font-size: 12px; color: #5f5b73;
}
.vien-chon .on, .the-tab .on { background: #5b3df5; color: #fff; font-weight: 650; }

.hang-ngay { display: flex; justify-content: space-between; align-items: flex-start; }
.ngay-to { font-size: 34px; font-weight: 300; letter-spacing: -.02em; line-height: 1.05; }
.thang { font-size: 13px; color: #5b3df5; letter-spacing: .06em; }
.phai-so { text-align: right; }
.so-to { font-size: 14px; font-weight: 650; }

.o-tim {
  margin: 14px 0 0; padding: 10px 14px; border-radius: 999px;
  background: #f4f3f9; color: #8c8899; font-size: 12px;
}

.the-hop {
  border-radius: 18px; padding: 14px;
  background: linear-gradient(120deg, #5b6bff, #a259ff); color: #fff;
}
.the-hop.mo { background: linear-gradient(120deg, #8a5bff, #c264ff); margin-top: 10px; opacity: .45; }
.ten-hop { font-size: 14.5px; font-weight: 650; }
.chan-hop { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 10.5px; }
.chan-hop b { font-size: 14px; }
.chan-hop .cuoi { text-align: right; }
.vien-phut { background: #fff; color: #2a2440; border-radius: 999px; padding: 4px 10px; font-weight: 650; }

.nut-ghi {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  padding: 11px 22px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(120deg, #7c6bff, #a98bff); color: #fff;
  font-size: 13px; font-weight: 650; box-shadow: 0 10px 24px -10px #7c6bff;
}

.hang-do { display: flex; gap: 8px; margin-bottom: 14px; }
.hang-do > div {
  flex: 1; background: #f4f3f9; border-radius: 14px; padding: 10px 8px; text-align: center;
}
.hang-do b { display: block; font-size: 18px; font-weight: 600; }
.hang-do span { font-size: 10.5px; color: #75718a; }

.nhan-tim { color: #5b3df5; font-size: 12px; font-weight: 650; }
.van-nho { margin-top: 6px; font-size: 12.5px; color: #3f3c4d; }
.dong-qd { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: #3f3c4d; }
.man .moc {
  display: inline-block; background: #ece7ff; color: #4b2fd6;
  border-radius: 6px; padding: 3px 7px;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.nut-nghe {
  margin-top: 16px; padding: 10px 16px; border-radius: 999px; display: inline-block;
  background: #ece7ff; color: #4b2fd6; font-size: 12.5px; font-weight: 600;
}
.song { display: flex; align-items: center; gap: 3px; height: 34px; margin-top: 16px; }
.song i { flex: 1; background: #ddd8ee; border-radius: 2px; height: 30%; }
.song i:nth-child(3n) { height: 70%; }
.song i:nth-child(4n) { height: 45%; background: #7c5cff; }
.song i:nth-child(5n) { height: 90%; }

.bong-hoi {
  margin-left: auto; max-width: 84%; width: fit-content;
  background: linear-gradient(120deg, #6d5bff, #b06bff); color: #fff;
  border-radius: 16px; padding: 10px 14px; font-size: 12.5px; font-weight: 600;
}
.bong-dap {
  margin-top: 10px; background: #eef1ff; border: 1px solid #dfe4ff; border-radius: 16px;
  padding: 12px 14px; font-size: 12.5px; color: #24284a;
}
.bong-dap p { margin: 0; }
.bong-dap .moc { background: #dbe1ff; color: #2b3a8f; }
.nguon { margin-top: 10px; font-size: 11px; color: #6b74a8; display: flex; align-items: center; gap: 6px; }
.o-hoi {
  position: absolute; left: 18px; right: 18px; bottom: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px; border-radius: 999px; border: 1px solid #e4e1ef;
  color: #8c8899; font-size: 12px;
}
.mic { width: 24px; height: 24px; border-radius: 50%; background: #5b3df5; flex: none; }
.canh-3 .nho { position: absolute; left: 18px; right: 18px; bottom: 20px; }

/* Nền tối của trang: màn app vẫn giữ nền trắng — đó là bộ "Mặc định" của chính
   app, và một màn sáng trên nền tối nhìn như một chiếc máy đang bật thật. Chỉ
   hạ độ chói của vỏ máy để nó không chọi với nền. */
@media (prefers-color-scheme: dark) {
  :root:not([data-sang]) .dien-thoai { background: linear-gradient(160deg, #4a4463, #211d2e); }
}

/* ── khối chung ───────────────────────────────────────────────────────── */
section { padding: 76px 0; }
section.xam { background: var(--nen-2); border-block: 1px solid var(--vien); }
.dau-khoi { max-width: 660px; margin-bottom: 44px; }
.dau-khoi h2 { margin-bottom: 14px; }
.dau-khoi p { color: var(--chu-mo); font-size: 18px; }

.luoi { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 940px) { .luoi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .luoi { grid-template-columns: 1fr; } }

.the {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--r);
  padding: 26px 24px; box-shadow: var(--bong);
}
.the h3 { margin-bottom: 8px; }
.the p { color: var(--chu-mo); font-size: 15.5px; }
.the .bieu {
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: 16px;
  display: grid; place-items: center; background: var(--tim-nhat); color: var(--tim-dam);
}
.the .bieu svg { width: 21px; height: 21px; }

/* ── ba bước ─────────────────────────────────────────────────────────── */
.buoc { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); counter-reset: b; }
@media (max-width: 800px) { .buoc { grid-template-columns: 1fr; } }
.buoc > div { padding-top: 22px; border-top: 2px solid var(--vien); }
.buoc > div::before {
  counter-increment: b; content: counter(b, decimal-leading-zero);
  display: block; font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--tim); margin-bottom: 10px;
}
.buoc h3 { margin-bottom: 6px; }
.buoc p { color: var(--chu-mo); font-size: 15.5px; }

/* ── giá ──────────────────────────────────────────────────────────────── */
.gia { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); align-items: stretch; }
@media (max-width: 1000px) { .gia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gia { grid-template-columns: 1fr; } }
.goi { display: flex; flex-direction: column; position: relative; }
.goi.noi { border-color: var(--tim); box-shadow: var(--bong-cao); }
.goi .ten { font-size: 14px; font-weight: 650; color: var(--chu-mo); }
.goi .so { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 10px 0 2px; }
.goi .don { font-size: 14px; color: var(--chu-mo); }
.goi ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; color: var(--chu-mo); }
.goi li { display: flex; gap: 9px; }
.goi li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--xanh); }
.the-nhan {
  position: absolute; top: -12px; left: 24px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--tim); color: #fff; font-size: 12px; font-weight: 650;
  box-shadow: 0 6px 16px -6px rgba(91, 61, 245, .8);
}

/* ── hỏi đáp ──────────────────────────────────────────────────────────── */
details {
  border-bottom: 1px solid var(--vien); padding: 20px 0;
}
details summary {
  cursor: pointer; font-weight: 600; font-size: 17px; list-style: none;
  display: flex; justify-content: space-between; gap: 20px; align-items: center;
}
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--tim); font-weight: 400; font-size: 22px; }
details[open] summary::after { content: "–"; }
details p { color: var(--chu-mo); margin-top: 12px; font-size: 16px; }

/* ── kêu gọi cuối ─────────────────────────────────────────────────────── */
.keu {
  border-radius: 24px; padding: 54px 44px; text-align: center;
  /* Mau CO DINH, khong theo nen toi: khoi nay tu co nen tim rieng, chu trang
     tren --tim cua nen toi (#a893ff) chi con tuong phan ~2:1. */
  background: linear-gradient(140deg, #5b3df5, #9a6bff);
  color: #fff; box-shadow: var(--bong-cao);
}
.keu h2 { margin-bottom: 12px; }
.keu p { color: rgba(255, 255, 255, .86); max-width: 520px; margin: 0 auto 26px; }
.keu .nut.chinh { background: #fff; color: #3d24c9; box-shadow: none; }
.keu .nut.chinh:hover { background: #f1eeff; }

/* ── tải ứng dụng: nút CH Play + mã QR ────────────────────────────────── */
.keu.tai {
  display: grid; grid-template-columns: 1fr auto; gap: 44px; align-items: center;
  text-align: left;
}
.keu.tai p { margin: 0 0 24px; }
.keu .tai-phu { margin: 20px 0 0; font-size: 14.5px; }
.keu .tai-phu a { color: #fff; font-weight: 600; }
/* Nen trang CO DINH, ke ca o nen toi: may quet can o den tren nen sang. */
.tai-qr {
  margin: 0; background: #fff; border-radius: 20px; padding: 16px 16px 12px;
  text-align: center; box-shadow: 0 16px 32px -16px rgba(20, 19, 26, .5);
}
.tai-qr img { display: block; width: 168px; height: 168px; }
.tai-qr figcaption { margin-top: 8px; max-width: 168px; font-size: 13px; color: #5d5a6b; }
@media (max-width: 760px) {
  .keu.tai { grid-template-columns: 1fr; text-align: center; }
  .keu.tai p { margin-left: auto; margin-right: auto; }
  /* Tren dien thoai khong ai quet duoc chinh man hinh minh — chi can nut. */
  .tai-qr { display: none; }
}

/* ── chân trang ───────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--vien); padding: 40px 0; margin-top: 76px;
  font-size: 14.5px; color: var(--chu-mo);
}
footer .khung { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
footer a { text-decoration: none; }
footer a:hover { color: var(--chu); }
footer .phai { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
@media (max-width: 640px) { footer .phai { margin-left: 0; } }

/* ── trang chữ (chính sách, điều khoản) ───────────────────────────────── */
.van { max-width: 720px; margin: 0 auto; padding: 60px 0 20px; }
.van h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 10px; }
.van .ngay { color: var(--chu-mo); font-size: 15px; }
.van h2 { font-size: 22px; margin: 40px 0 12px; }
.van p, .van li { color: var(--chu); font-size: 16.5px; }
.van p { margin: 12px 0; }
.van ul { padding-left: 22px; display: grid; gap: 8px; }
.van .khung-nhan {
  margin: 26px 0; padding: 18px 20px; border-radius: 14px;
  background: var(--nen-2); border: 1px solid var(--vien); font-size: 15.5px;
}
.van code {
  background: var(--nen-2); border: 1px solid var(--vien); border-radius: 6px;
  padding: 1px 6px; font-size: 14px;
}

/* ══ CHUYỂN ĐỘNG ══════════════════════════════════════════════════════════
   Chỉ dùng `transform` và `opacity` — hai thứ trình duyệt vẽ được trên GPU.
   Đổi `height`, `top` hay `margin` là ép tính lại bố cục mỗi khung hình, và
   trên máy yếu thì thành giật.

   MỌI THỨ DƯỚI ĐÂY TẮT khi máy đặt "giảm chuyển động" — xem khối cuối tệp.  */

/* ── hiện dần khi cuộn tới ──────────────────────────────────────────────
   Trạng thái đầu đặt bằng JS (thêm lớp `co-hieu-ung` vào <html>). Không có
   JS thì trang hiện đầy đủ như thường — không ai gặp một trang trắng vì một
   tệp script hỏng. */
.co-hieu-ung [data-hien] {
  opacity: 0;
  transform: translateY(16px);
}
.co-hieu-ung [data-hien].hien {
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--tre, 0) * 70ms);
}

/* ── phần mở đầu chạy ngay khi tải ─────────────────────────────────────── */
@keyframes len {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.co-hieu-ung .hero .khung > div > * { animation: len .7s cubic-bezier(.22,.61,.36,1) backwards; }
.co-hieu-ung .hero .nhan     { animation-delay: .05s; }
.co-hieu-ung .hero h1        { animation-delay: .12s; }
.co-hieu-ung .hero .dan      { animation-delay: .2s; }
.co-hieu-ung .hero .nut-bo   { animation-delay: .28s; }
.co-hieu-ung .hero .gach-tin { animation-delay: .36s; }
.co-hieu-ung .dien-thoai {
  animation: len .8s cubic-bezier(.22,.61,.36,1) .18s backwards;
}

/* ── khung điện thoại: tự lật qua ba màn ────────────────────────────────
   15 giây một vòng, mỗi màn 5 giây — đủ đọc hết một màn mà không kịp chán.
   Chỉ bật khi JS chạy được (lớp `co-hieu-ung`), vì lúc đó mới an toàn để chồng
   ba màn lên nhau: tắt JS thì CSS nền chỉ hiện màn đầu.                     */
.co-hieu-ung .canh-2, .co-hieu-ung .canh-3 { display: block; }
@keyframes lat-canh {
  0%      { opacity: 0; transform: translateY(10px); }
  3%, 30% { opacity: 1; transform: none; }
  34%,100%{ opacity: 0; transform: translateY(-10px); }
}
/* `backwards` LÀ BẮT BUỘC, không phải cho đẹp: thiếu nó thì trong quãng chờ
   (`animation-delay`) hai màn sau vẫn giữ trạng thái gốc — tức hiện đầy đủ — và
   ba màn chồng lên nhau thành một đống chữ. `backwards` bắt chúng nhận giá trị
   của khung 0% ngay từ giây đầu. */
.co-hieu-ung .canh { animation: lat-canh 15s ease-in-out infinite backwards; }
.co-hieu-ung .canh-2 { animation-delay: 5s; }
.co-hieu-ung .canh-3 { animation-delay: 10s; }

/* Mốc dẫn chứng trong câu trả lời nảy lên đúng lúc màn hỏi đáp vừa hiện —
   đó là thứ cần người xem nhìn thấy nhất trên cả trang. */
@keyframes nay-moc {
  0%, 68%   { opacity: .35; transform: scale(.88); }
  71%       { opacity: 1; transform: scale(1.14); }
  74%, 96%  { opacity: 1; transform: scale(1); }
  100%      { opacity: .35; transform: scale(.88); }
}
.co-hieu-ung .bong-dap .moc { animation: nay-moc 15s ease-in-out infinite; }
.co-hieu-ung .bong-dap .moc:nth-of-type(2) { animation-delay: .2s; }

/* Sóng âm ở màn biên bản nhấp nhẹ cho ra dáng đang phát. */
@keyframes song-len { 0%, 100% { transform: scaleY(.6); } 50% { transform: scaleY(1); } }
.co-hieu-ung .song i { transform-origin: center; animation: song-len 1.6s ease-in-out infinite; }
.co-hieu-ung .song i:nth-child(2n) { animation-delay: .18s; }
.co-hieu-ung .song i:nth-child(3n) { animation-delay: .36s; }
.co-hieu-ung .song i:nth-child(5n) { animation-delay: .54s; }

/* Chấm đỏ báo đang ghi — nhịp chậm, không nhấp nháy chói mắt. */
.dang-ghi { display: inline-flex; align-items: center; gap: 7px; }
.dang-ghi::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #e5484d; flex: none;
}
@keyframes tho { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.co-hieu-ung .dang-ghi::before { animation: tho 2.4s ease-in-out infinite; }

/* ── tương tác nhỏ ─────────────────────────────────────────────────────── */
.the { transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, border-color .22s ease; }
@media (hover: hover) {
  section:not(.xam) .the:hover, section.xam .the:hover {
    transform: translateY(-3px);
    box-shadow: var(--bong-cao);
    border-color: color-mix(in srgb, var(--tim) 35%, var(--vien));
  }
  .goi:hover { transform: none; }
  nav.dieu-huong a { position: relative; }
  nav.dieu-huong a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    background: var(--tim); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
  }
  nav.dieu-huong a:hover::after { transform: scaleX(1); }
}
details summary::after { transition: transform .2s ease; }
details[open] summary::after { transform: rotate(180deg); }

/* ── máy đặt "giảm chuyển động" thì tắt hết ─────────────────────────────
   Không phải chuyện chiều lòng: chuyển động lặp có thể gây chóng mặt thật
   với người bị rối loạn tiền đình. Trang vẫn đầy đủ nội dung, chỉ đứng yên. */
@media (prefers-reduced-motion: reduce) {
  .co-hieu-ung [data-hien] { opacity: 1 !important; transform: none !important; }
  /* Ba màn chồng nhau mà đứng yên thì thành một đống chữ — hiện đúng màn đầu. */
  .co-hieu-ung .canh-2, .co-hieu-ung .canh-3 { display: none !important; }
  .co-hieu-ung *,
  .co-hieu-ung *::before,
  .co-hieu-ung *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ── dải số dưới phần mở đầu ───────────────────────────────────────────── */
.dai-so { padding: 0 0 56px; }
.so-luoi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  padding: 26px 28px; border-radius: var(--r);
  background: var(--the); border: 1px solid var(--vien); box-shadow: var(--bong);
}
.so-luoi > div { display: grid; gap: 4px; }
.so-luoi b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--tim-dam); }
.so-luoi span { font-size: 14px; color: var(--chu-mo); line-height: 1.4; }
@media (max-width: 860px) { .so-luoi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .so-luoi { grid-template-columns: 1fr; padding: 22px; } }

.noi-kho { padding-top: 20px; }

/* ── bảng so sánh ──────────────────────────────────────────────────────── */
.bang {
  border: 1px solid var(--vien); border-radius: var(--r); overflow: hidden;
  background: var(--the); box-shadow: var(--bong);
}
.bang .hang {
  display: grid; grid-template-columns: 1.1fr 1fr 1.3fr;
  gap: 16px; padding: 16px 22px; font-size: 15.5px;
  border-top: 1px solid var(--vien);
}
.bang .hang:first-child { border-top: 0; }
.bang .dau {
  background: var(--nen-2); font-size: 13px; font-weight: 650;
  color: var(--chu-mo); text-transform: uppercase; letter-spacing: .04em;
}
.bang .hang > span:nth-child(2) { color: var(--chu-mo); }
.bang .tot { font-weight: 600; }
.bang .tot::before { content: "✓ "; color: var(--xanh); font-weight: 700; }
@media (max-width: 760px) {
  .bang .hang { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .bang .dau { display: none; }
  .bang .hang > span:first-child { font-weight: 650; }
  .bang .hang > span:nth-child(2)::before { content: "Nơi khác: "; }
}

.nho-mo { font-size: 13px; color: var(--chu-mo); margin-top: 2px; }

/* Thuoc tinh hidden phai thang moi `display` cua lop — cong tac mua (muc 55) dua vao no. */
[hidden] { display: none !important; }