/* =========================================================
   Hướng dẫn sử dụng Robot BSR
   Thiết kế: Figma "Trang chủ • Desktop" (1440) / "Trang chủ • Mobile" (375)
   Đơn vị: rem — 1rem = 16px × ratio (ratio do js/main.js đặt)
   Design tokens lấy từ Figma variables.
   ========================================================= */

:root {
  /* --- Màu --- */
  --cyan:  #15c7e5;            /* Color/Bright Turquoise */
  --ink:   #000000;            /* Color Scheme 1/Text    */
  --paper: #ffffff;            /* Color Scheme 1/Background */
  --line:  rgba(0, 0, 0, .15); /* Color Scheme 1/Border  */

  /* --- Bo góc / viền --- */
  --radius-card: 1rem;         /* Radius/Medium 16 */
  --radius-btn: .375rem;       /* Button 6         */
  --bw: 1px;                   /* Stroke/Border Width */

  /* --- Cỡ chữ (desktop) --- */
  --h1:        4.5rem;         /* Heading 1   72 */
  --h2:        3.25rem;        /* Heading 2   52 */
  --h4:        2.25rem;        /* Heading 4   36 */
  --h5:        1.75rem;        /* Heading 5   28 */
  --t-large:   1.375rem;       /* Text Large  22 */
  --t-medium:  1.125rem;       /* Text Medium 18 */
  --t-regular: 1rem;           /* Text Regular 16 */
  --tbl:       1.125rem;       /* chữ trong bảng */

  /* --- Chiều cao dòng --- */
  --lh-h1: 1.2;
  --lh-h2: 1.2;
  --lh-h4: 1.3;
  --lh-h5: 1.4;
  --lh-text: 1.5;
  --tracking: -.01em;          /* letterSpacing -1% của H1/H2/H4/H5 */

  /* --- Khoảng cách --- */
  --pad-page: 5rem;            /* padding-section 80 */
  --pad-card: 1.5rem;          /* 24 */
  --tbl-pad:  1.5rem;
  --gap-md:   2rem;            /* 32 */
  --gap-lg:   4.75rem;         /* 76 */

  /* --- Thụt lề số thứ tự --- */
  --num-indent: 2.625rem;      /* 42 — tiêu đề mục  */
  --num-width:  2.125rem;
  --toc-indent: 1.5rem;        /* 24 — mục lục      */
  --toc-width:  1.0625rem;
}

html { font-size: 16px; }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: none;
  font-size: var(--t-medium);
  line-height: var(--lh-text);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.page {
  width: 100%;
  max-width: 90rem;              /* 1440px */
  margin-inline: auto;
}

.c-cyan { color: var(--cyan); }

.link {
  text-decoration: underline;
  text-underline-offset: .1875rem;
}
.link:hover { color: var(--cyan); }

/* =========================================================
   HERO — Header / 1 /
   ========================================================= */
.hero { padding: var(--pad-page); }

.hero__inner {
  display: flex;
  align-items: center;
  gap: var(--pad-page);
}

/* Thiết kế 07/10 thu cột chữ lại và phóng to hẳn ảnh robot: 718→565 và 380→635. */
.hero__col { flex: 0 0 35.295rem; }        /* 564.72px */

.hero__title {
  font-size: var(--h1);
  line-height: var(--lh-h1);
  font-weight: 700;
  letter-spacing: var(--tracking);
}

.hero__sub {
  margin-top: 1.5rem;
  font-size: var(--t-medium);
  line-height: var(--lh-text);
  font-weight: 500;                        /* Text/Medium/Medium */
}

/* Dòng biến thể tên, chữ nghiêng. Figma: cách dòng trên 24 (y 309 -> 333). */
.hero__note {
  margin-top: 1.5rem;
  font-size: var(--t-medium);
  line-height: var(--lh-text);
  font-style: italic;
}

.hero__media { flex: 0 0 39.705rem; }      /* 635.28px */
.hero__img { width: 100%; height: auto; }

/* =========================================================
   GIỚI THIỆU
   ========================================================= */
.intro { padding: 0 var(--pad-page) var(--pad-page); }

.intro__inner {
  display: flex;
  gap: 5.125rem;                           /* 82px */
  align-items: flex-start;
}

.intro__left  { flex: 0 0 30.4375rem; }    /* 487px */
.intro__right { flex: 0 0 44.4375rem; margin-top: 5.625rem; }  /* 711px */

.intro__title {
  margin-top: 5.625rem;                    /* 90px */
  text-align: center;
  font-size: var(--h2);
  line-height: var(--lh-h2);
  font-weight: 700;
  letter-spacing: var(--tracking);
}

.intro__cards {
  margin-top: 1.9375rem;                   /* 31px */
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.icard {
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
}
.icard__icon { height: 3rem; width: auto; }
.icard__text {
  margin-top: 1rem;
  font-size: var(--t-medium);
  line-height: var(--lh-text);
}

/* --- Thông số mặt trước / sau / bên --- */
.spec { display: flex; align-items: flex-start; }
.spec + .spec { margin-top: var(--pad-page); }

.spec__fig { flex: 0 0 50%; }
.spec__fig--back { flex: 0 0 44.3%; }      /* 315 / 711 */
/* khung ảnh giữ đúng tỉ lệ ô trong thiết kế, ảnh fit theo object-contain */
.spec__img { width: 100%; height: auto; object-fit: contain; }
.spec__img--front { aspect-ratio: 355.5 / 377.349; }
.spec__img--back  { aspect-ratio: 315 / 285; }
.spec__img--left  { aspect-ratio: 355.5 / 316; }
.spec__cap {
  margin-top: 1.375rem;
  text-align: center;
  font-size: var(--t-large);
  line-height: var(--lh-text);
  font-weight: 700;
}

.spec__body {
  flex: 1 1 auto;
  padding-block: 2.75rem;                  /* 44px */
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
.spec:nth-of-type(2) .spec__body { padding-block: 2.1875rem; }

.spec__label {
  font-size: var(--t-large);
  line-height: var(--lh-text);
  font-weight: 700;
  color: var(--cyan);
}
.spec__list {
  margin-top: 1rem;
  padding-left: 1.6875rem;                 /* ms-[27px] */
  list-style: disc;
  font-size: var(--t-medium);
  line-height: var(--lh-text);
}

.spec__body--side { gap: 1.75rem; padding-block: 2.1875rem; }
.spec__lanyard {
  position: relative;
  width: 12.3125rem;                       /* 197px */
  height: 12.3125rem;
  margin-left: 4.953rem;                   /* 79.25px */
  border-radius: 50%;
  overflow: hidden;
}
.spec__lanyard-img {
  position: absolute;
  left: -7.752rem;                         /* -124.03px */
  top: -12.503rem;                         /* -200.04px */
  width: 31.653rem;                        /* 506.44px  */
  height: 42.196rem;                       /* 675.13px  */
  max-width: none;
  object-fit: cover;
}

/* =========================================================
   DẢI ẢNH ỨNG DỤNG
   Figma desktop 10363:632: khung 1440×414, đệm 42 trên dưới / 64 hai bên.
   Ảnh vuông 265 cách nhau 84 (4×265 + 3×84 = 1312), bo góc 24.
   Dải ảnh -> dòng mô tả cách 32. KHÔNG còn tiêu đề "ĐA DẠNG ỨNG DỤNG".
   ========================================================= */
.usecase {
  padding: 2.625rem 4rem;                  /* 42 / 64 */
  text-align: center;
}
.usecase__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5.25rem;                            /* 84 */
}
.usecase__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1.5rem;                   /* 24 */
}
.usecase__lead {
  margin-top: 2rem;                        /* 32 */
  font-size: var(--t-large);
  line-height: var(--lh-text);
}

/* =========================================================
   HƯỚNG DẪN SỬ DỤNG — 2 cột
   ========================================================= */
.guide { padding: 0 var(--pad-page) var(--pad-page); }
.guide__inner { display: flex; align-items: flex-start; }

.toc {
  flex: 0 0 24.375rem;                     /* 390px */
  align-self: stretch;                     /* cần cho position: sticky bên trong */
}
.toc__sticky {
  position: sticky;
  top: 3rem;
  padding-top: 5.625rem;                   /* 90px */
}
.toc__title {
  font-size: var(--t-large);
  line-height: var(--lh-text);
  font-weight: 700;
}
.toc__nav {
  margin-top: 1.9375rem;                   /* 31px */
  display: flex;
  flex-direction: column;
  gap: 2.0625rem;
}
.toc__link {
  display: block;
  position: relative;
  padding-left: var(--toc-indent);
  font-size: var(--t-regular);
  line-height: var(--lh-text);
  opacity: .8;
  transition: color .18s ease, opacity .18s ease;
}
.toc__link-num {
  position: absolute;
  left: 0;
  width: var(--toc-width);
  text-align: right;
}
.toc__link:hover,
.toc__link.is-active { color: var(--cyan); opacity: 1; }

.hdsd {
  flex: 0 0 55.625rem;                     /* 890px */
  padding-top: 5.625rem;
  min-width: 0;
}

.sec { scroll-margin-top: 2rem; }
.sec__head { margin-bottom: 1.75rem; }     /* 28px */

.sec__title {
  position: relative;
  padding-left: var(--num-indent);
  font-size: var(--h5);
  line-height: var(--lh-h5);
  font-weight: 700;
  letter-spacing: var(--tracking);
}
.sec__num {
  position: absolute;
  left: 0;
  width: var(--num-width);
  text-align: right;
}

.sec__lead {
  margin-top: .6875rem;                    /* 11px */
  padding-left: .875rem;                   /* 14px */
  font-size: var(--t-large);
  line-height: var(--lh-text);
}

.divider {
  width: 37.954rem;                        /* 607.26px */
  height: 1px;
  margin: var(--gap-lg) auto;
  background: var(--line);
}

/* --- Card --- */
.stack { display: flex; flex-direction: column; gap: var(--gap-md); }

.card {
  border: var(--bw) solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper);
}
.card__pad { padding: var(--pad-card); }
/* Bước 3 của mục 2: thiết kế để khoảng cách tiêu đề -> nội dung là 24 (các thẻ khác
   là 8), còn đệm dưới vẫn 24 như mọi thẻ. Figma 10216:448 — tiêu đề y=24 cao 39,
   nội dung y=87, thẻ cao 165.
   Bản cũ làm gần đúng CHIỀU CAO bằng cách nới đệm dưới lên 42 và giữ khoảng cách 8:
   tổng ra 167 so với 165, nhưng chữ nằm sai chỗ bên trong thẻ. */
.card__pad--gap > .card__text { margin-top: var(--pad-card); }

.card__title {
  font-size: var(--h5);
  line-height: var(--lh-h5);
  font-weight: 700;
  letter-spacing: var(--tracking);
}
.card__text {
  margin-top: .5rem;
  font-size: var(--t-medium);
  line-height: var(--lh-text);
}
.card__text + .card__text { margin-top: 1.6875rem; }

.card--split { display: flex; align-items: center; }
.card--split > .card__pad { flex: 0 0 50%; }
.card--split > .card__media { flex: 1 1 auto; align-self: stretch; }
.card--split-narrow > .card__pad { flex: 0 0 43%; }
.card--split-pad > .card__pad { flex: 0 0 49.6%; }
.card--split-pad > .card__media { padding: var(--pad-card) var(--pad-card) var(--pad-card) 0; }

.card__media { display: flex; align-items: center; }
.card__img { width: 100%; height: auto; }
.card__media--stack { flex-direction: column; padding: var(--pad-card); gap: 0; }
.card__img--w1 { width: 100%; }
.card__img--w2 { width: 81.7%; }

.card__inimg { margin-top: 1.375rem; width: 100%; height: auto; }
.card__inimg--sm { width: 57.8%; margin-inline: auto; }

.card--note .card__text { margin-top: 0; }

/* --- Bullet --- */
.bullets {
  margin-top: 1.5rem;
  padding-left: 1.6875rem;
  list-style: disc;
  font-size: var(--t-medium);
  line-height: var(--lh-text);
}
.bullets li + li { margin-top: 1.6875rem; }
.bullets--tight { margin-top: 0; }
.bullets--tight li + li { margin-top: 0; }
.bullets--plain { margin-top: .5rem; }
.bullets--plain li + li { margin-top: 0; }

/* --- Lưới 2 cột ---
   `align-items: stretch` (mặc định của grid) để HAI THẺ CÙNG HÀNG CAO BẰNG NHAU.
   Bản cũ đặt `start` nên mỗi thẻ co đúng theo nội dung, thẻ chữ ít thì thấp hơn hẳn
   thẻ bên cạnh. Thiết kế thì hàng nào cũng bằng nhau — đo trên Figma:
       mục 3: 176|176 rồi 203|203      mục 4: 176|176, 176|176, 122|122
       mục 5.3: 354|354 rồi 366|366    mục 5.4: 398|398
   Thẻ phải tự là hộp dọc thì phần đệm bên trong mới kéo theo được chiều cao mới. */
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md);
}
.grid2 > .card { display: flex; flex-direction: column; }
.grid2 > .card > .card__pad { flex: 1 1 auto; }

/* --- Nhóm phụ 5.1 … 5.5 --- */
.sub + .sub, .sec__head + .sub { margin-top: 2.9375rem; }   /* 47px */
.sub__title,
.sub__lead {
  padding-left: .875rem;
  font-size: var(--t-large);
  line-height: var(--lh-text);
}
.sub__lead { margin-top: .5rem; }
.sub__title + .tbl,
.sub__lead + .tbl,
.sub__lead + .grid2,
.sub__title + .grid2 { margin-top: 2rem; }
.sub .card--note,
.sub .card--split { margin-top: 2rem; }
.sub .bullets--plain { padding-left: 2.5625rem; }

/* --- Bảng --- */
.tbl {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: var(--bw) solid var(--line);
}
.tbl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tbl--3 { grid-template-columns: 323.64fr 323.64fr 242.73fr; }

.tbl__cell {
  background: var(--paper);
  padding: var(--tbl-pad);
  font-size: var(--tbl);
  line-height: var(--lh-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tbl__cell--top { justify-content: flex-start; }
.tbl__cell--th,
.tbl__cell--key { align-items: center; text-align: center; font-weight: 700; }
.tbl__cell--c   { align-items: center; text-align: center; }
.tbl__cell p + p { margin-top: 1.6875rem; }
.tbl__cell--ex p + p { margin-top: 1.875rem; }
.tbl__cell p + ul { margin-top: 0; }
.tbl__cell .bullets {
  margin-top: 0;
  font-size: inherit;
  line-height: inherit;
}
.tbl__cell .bullets li + li { margin-top: 0; }
.ex { font-style: italic; }

/* --- CTA --- */
.cta { margin-top: var(--gap-lg); text-align: center; }
.cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39.0625rem;                       /* 625px */
  min-height: 6.625rem;                    /* 106px */
  padding: .375rem .75rem;                 /* 6 / 12 */
  background: var(--cyan);
  border: var(--bw) solid var(--cyan);
  color: var(--ink);
  border-radius: var(--radius-btn);
  font-size: var(--h4);
  line-height: var(--lh-h4);
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-align: center;
  transition: filter .18s ease;
}
.cta__btn:hover { filter: brightness(1.06); }

/* =========================================================
   Thanh trên + menu mobile (ẩn ở desktop)
   ========================================================= */
.m-topbar, .m-menu { display: none; }

/* =========================================================
   MOBILE  (< 768px) — thiết kế 375px
   ========================================================= */
@media (max-width: 767.98px) {

  :root {
    --h1:        2.5rem;       /* 40 */
    --h2:        2.25rem;      /* 36 */
    --h4:        1.125rem;     /* 18 */
    --h5:        1.25rem;      /* 20 */
    --t-large:   1.125rem;     /* 18 */
    --t-medium:  1rem;         /* 16 */
    --t-regular: .875rem;      /* 14 */
    --tbl:       .75rem;       /* 12 */

    --pad-page: 1.25rem;       /* 20 */
    --tbl-pad:  1.5rem;

    --num-indent: 1.875rem;
    --num-width:  1.5rem;
  }

  .page { max-width: 23.4375rem; }         /* 375px */

  /* ---- Thanh trên (Navbar đóng) ---- */
  .m-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 23.4375rem;
    height: 4.5rem;                        /* 72 */
    padding-right: .75rem;                 /* 12 */
    background: var(--paper);
    z-index: 40;
    transition: transform .3s ease, opacity .3s ease;
  }
  .m-topbar.is-hidden { transform: translateX(-50%) translateY(-100%); opacity: 0; }
  .m-topbar__btn { width: 3rem; height: 3rem; }
  .m-topbar__btn img { width: 3rem; height: 3rem; }

  /* ---- Menu (Navbar / 6 /) ---- */
  .m-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 23.4375rem;
    background: var(--paper);
    z-index: 50;
    overflow-y: auto;
    opacity: 0;
    transition: opacity .22s ease;
  }
  .m-menu[hidden] { display: none; }
  .m-menu.is-open { opacity: 1; }

  .m-menu__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 4.5rem;                        /* 72 */
    padding-left: var(--pad-page);
    padding-right: .75rem;
    flex: none;
  }
  .m-menu__close { width: 3rem; height: 3rem; }
  .m-menu__close img { width: 3rem; height: 3rem; }

  .m-menu__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem var(--pad-page) 5rem;    /* 16 / 20 / 80 */
  }

  .m-menu__toplink {
    display: flex;
    align-items: center;
    gap: .25rem;
    width: 100%;
    padding-block: .75rem;                 /* 12 */
    font-size: var(--t-medium);            /* 16 */
    line-height: var(--lh-text);
    font-weight: 700;
    text-align: left;
  }
  .m-menu__toplink span { flex: 1 1 auto; }
  .m-menu__chevron {
    width: 1.5rem; height: 1.5rem;
    transition: transform .22s ease;
  }
  .m-menu__toplink[aria-expanded="false"] .m-menu__chevron { transform: rotate(-90deg); }

  .m-menu__group { width: 100%; }
  .m-menu__group-inner { overflow: hidden; }

  .m-menu__title {
    font-size: 1.125rem;                   /* 18 */
    line-height: var(--lh-text);
    font-weight: 700;
  }
  .m-menu__nav {
    margin-top: .75rem;                    /* 12 */
    display: flex;
    flex-direction: column;
    gap: 1.0625rem;
  }
  .m-menu__link {
    display: block;
    position: relative;
    padding-left: 1.3125rem;               /* ms-[21px] */
    font-size: var(--t-regular);           /* 14 */
    line-height: var(--lh-text);
    opacity: .8;
  }
  .m-menu__link-num {
    position: absolute;
    left: 0;
    width: .9375rem;
    text-align: right;
  }
  .m-menu__link.is-active { color: var(--cyan); opacity: 1; }

  /* ---- Hero ---- */
  .hero { padding: 4rem var(--pad-page); }
  .hero__inner { flex-direction: column-reverse; gap: 3rem; }
  .hero__col, .hero__media { flex: 0 0 auto; width: 100%; }
  /* Thiết kế 07/10 phóng to ảnh robot trên mobile: 184,94 -> 331,17 (gần kín bề ngang). */
  .hero__media { width: 20.698rem; margin-inline: auto; }   /* 331.17 */
  /* Mobile căn GIỮA cả ba dòng chữ — desktop vẫn căn trái (xem thiết kế mobile). */
  .hero__col { text-align: center; }

  /* ---- Dải ảnh ứng dụng ----
     Figma mobile 10363:751: dải ảnh nằm NGAY SAU hero, không có đệm trên dưới; ảnh vuông
     335 (đúng bề ngang nội dung) xếp dọc cách nhau 15, mô tả cách ảnh cuối cũng 15.
     Khoảng 48 ngăn với phần giới thiệu nằm ở .intro bên dưới. */
  .usecase { padding: 0 var(--pad-page); }
  .usecase__grid { grid-template-columns: minmax(0, 1fr); gap: .9375rem; }
  .usecase__lead { margin-top: .9375rem; }   /* 15 */
  .intro { padding-top: 3rem; }              /* 48 — tách khỏi dải ảnh */

  /* ---- Giới thiệu ---- */
  .intro { padding: 0 var(--pad-page) 4rem; }
  .intro__inner { flex-direction: column; gap: 3rem; }
  .intro__left, .intro__right { flex: 0 0 auto; width: 100%; margin-top: 0; }
  .intro__title { margin-top: 0; }

  .spec { flex-direction: column; align-items: stretch; }
  .spec + .spec { margin-top: 3rem; }
  .spec__fig, .spec__fig--back { flex: 0 0 auto; width: 100%; }
  .spec__fig  { order: 1; }
  .spec__body { order: 2; }
  .spec__body,
  .spec:nth-of-type(2) .spec__body { padding-block: 1.0625rem 0; gap: 1.9375rem; }

  /* mặt bên + mặt trái giữ 2 cột như thiết kế mobile */
  .spec--side { flex-direction: row; align-items: flex-start; }
  .spec--side .spec__fig  { order: 2; flex: 0 0 50%; width: 50%; }
  .spec--side .spec__body { order: 1; }
  .spec__body--side { flex: 0 0 50%; max-width: 50%; padding-block: 2.1875rem 0; gap: 1.75rem; }
  .spec__lanyard { margin-left: -.921875rem; flex: none; }

  /* ---- Guide ---- */
  .guide { padding: 0 var(--pad-page) 4rem; }
  .guide__inner { display: block; }
  .toc { display: none; }
  .hdsd { width: 100%; padding-top: 0; }

  .sec { scroll-margin-top: 5rem; }
  .sec__lead { padding-left: 0; }

  .divider { width: 100%; margin: var(--gap-lg) 0; }

  .card--split { flex-direction: column; align-items: stretch; }
  .card--split > .card__pad,
  .card--split-narrow > .card__pad,
  .card--split-pad > .card__pad { flex: 0 0 auto; }
  .card--split > .card__media { align-self: auto; }
  .card--split-pad > .card__media,
  .card__media--stack { padding: 0 var(--pad-card) var(--pad-card); }
  .card__img--w2 { width: 100%; }
  .card__inimg--sm { width: 100%; }

  .card__text + .card__text { margin-top: 1.5rem; }
  .bullets { margin-top: 1.5rem; }
  .bullets li + li { margin-top: 1.5rem; }
  .bullets--tight, .bullets--plain { margin-top: 0; }
  .bullets--tight li + li, .bullets--plain li + li { margin-top: 0; }
  .tbl__cell .bullets, .tbl__cell .bullets li + li { margin-top: 0; }

  .grid2 { grid-template-columns: minmax(0, 1fr); }

  .sub__title, .sub__lead { padding-left: 0; }
  .sub .bullets--plain { padding-left: 1.6875rem; }

  /* Bảng mobile */
  .tbl--3 { grid-template-columns: 121.82fr 121.82fr 91.36fr; }
  .tbl--tight { --tbl-pad: .5rem; }        /* mục 6 & 7: padding 8 */
  .tbl__cell p + p,
  .tbl__cell--ex p + p { margin-top: 1.125rem; }
  #section-8 .tbl__cell p + p { margin-top: .5rem; }

  /* CTA */
  .cta__btn { width: 100%; min-height: 3.75rem; }   /* 60 */
}

/* =========================================================
   ANIMATION
   - Hiệu ứng luôn kết thúc đúng trạng thái tĩnh của thiết kế.
   - .reveal dùng thuộc tính `translate`, hover dùng `transform`
     → hai hiệu ứng không đè lên nhau.
   - Chỉ bật khi có JS (.js-anim) để nội dung không bị ẩn nếu JS lỗi.
   ========================================================= */

.js-anim .reveal {
  opacity: 0;
  translate: 0 1.5rem;
  transition:
    opacity   .62s cubic-bezier(.22, .61, .36, 1),
    translate .62s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, translate;
}
.js-anim .reveal.is-in {
  opacity: 1;
  translate: 0 0;
  will-change: auto;
}

/* Ảnh hero + ảnh thiết bị vào chậm hơn một nhịp, kèm phóng nhẹ */
.js-anim .hero__media.reveal,
.js-anim .spec__fig.reveal { translate: 0 2rem; }
.js-anim .hero__img,
.js-anim .spec__img {
  scale: 1.04;
  transition: scale .9s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--d, 0ms);
}
.js-anim .reveal.is-in .hero__img,
.js-anim .hero__media.is-in .hero__img,
.js-anim .spec__fig.is-in .spec__img { scale: 1; }

/* --- Hover: card nhấc nhẹ --- */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .card, .icard {
    transition:
      transform    .28s cubic-bezier(.22, .61, .36, 1),
      box-shadow   .28s ease,
      border-color .28s ease;
  }
  .card:hover, .icard:hover {
    transform: translateY(-.25rem);
    border-color: rgba(0, 0, 0, .28);
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .07);
  }
}

/* --- Mục lục: thanh chỉ báo + dịch nhẹ khi hover --- */
.toc__link { transition: color .2s ease, opacity .2s ease, transform .26s cubic-bezier(.22,.61,.36,1); }
.toc__link::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: .2rem;
  bottom: .2rem;
  width: .1875rem;
  border-radius: 1rem;
  background: var(--cyan);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.toc__link.is-active::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) {
  .toc__link:hover { transform: translateX(.25rem); }
}

/* --- Liên kết trong nội dung --- */
.link { transition: color .18s ease; }

/* --- Nút CTA --- */
.cta__btn {
  transition:
    filter     .2s ease,
    transform  .2s cubic-bezier(.22, .61, .36, 1),
    box-shadow .2s ease;
}
.cta__btn:hover {
  filter: brightness(1.06);
  transform: translateY(-.125rem);
  box-shadow: 0 .625rem 1.5rem rgba(21, 199, 229, .38);
}
.cta__btn:active { transform: translateY(0); box-shadow: none; }

/* --- Thanh trên + menu mobile --- */
@media (max-width: 767.98px) {
  .m-topbar__btn {
    transition: transform .22s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
  }
  .m-topbar__btn:active { transform: scale(.92); }

  /* các dòng trong menu trượt lên lần lượt khi mở */
  .m-menu__toplink,
  .m-menu__title,
  .m-menu__link {
    opacity: 0;
    translate: 0 .625rem;
    transition:
      opacity   .34s cubic-bezier(.22, .61, .36, 1),
      translate .34s cubic-bezier(.22, .61, .36, 1);
  }
  .m-menu.is-open .m-menu__toplink,
  .m-menu.is-open .m-menu__title,
  .m-menu.is-open .m-menu__link { opacity: 1; translate: 0 0; }

  .m-menu.is-open .m-menu__toplink:nth-child(1) { transition-delay: 40ms; }
  .m-menu.is-open .m-menu__toplink:nth-child(2) { transition-delay: 80ms; }
  .m-menu.is-open .m-menu__title                  { transition-delay: 120ms; }
  .m-menu.is-open .m-menu__link:nth-child(1) { transition-delay: 155ms; }
  .m-menu.is-open .m-menu__link:nth-child(2) { transition-delay: 185ms; }
  .m-menu.is-open .m-menu__link:nth-child(3) { transition-delay: 215ms; }
  .m-menu.is-open .m-menu__link:nth-child(4) { transition-delay: 245ms; }
  .m-menu.is-open .m-menu__link:nth-child(5) { transition-delay: 275ms; }
  .m-menu.is-open .m-menu__link:nth-child(6) { transition-delay: 305ms; }
  .m-menu.is-open .m-menu__link:nth-child(7) { transition-delay: 335ms; }
  .m-menu.is-open .m-menu__link:nth-child(8) { transition-delay: 365ms; }

  .m-menu__close { transition: transform .22s cubic-bezier(.22, .61, .36, 1); }
  .m-menu__close:active { transform: scale(.9); }

  /* nhóm "Hướng dẫn sử dụng" gập/mở — chiều cao do JS đo và đặt */
  .m-menu__group {
    overflow: hidden;
    transition:
      height  .32s cubic-bezier(.22, .61, .36, 1),
      opacity .24s ease;
  }
  .m-menu__group.is-collapsed { opacity: 0; }
}

/* =========================================================
   Tôn trọng cài đặt giảm chuyển động của hệ thống
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal,
  .m-menu__toplink,
  .m-menu__title,
  .m-menu__link {
    opacity: 1 !important;
    translate: none !important;
  }
  .js-anim .hero__img,
  .js-anim .spec__img { scale: 1 !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}

/* =========================================================
   HOTLINE (mục 9)
   ---------------------------------------------------------
   Số điện thoại là thứ người ta tìm lúc đang bí, nên nó phải
   là thứ ĐẬP VÀO MẮT trước tiên trong khối này — không phải
   câu dẫn. Dùng đúng màu nhấn của trang (--cyan, cũng là màu
   nút CTA) thay vì bịa màu mới.
   Xếp NGANG ở máy tính để khối không cao lênh khênh giữa
   những bảng hai cột xung quanh; dồn DỌC ở điện thoại.
   ========================================================= */
.hotline__pad {
  display: flex;
  align-items: center;
  gap: var(--pad-card);
  padding: var(--pad-card);
}

/* Huy hiệu tròn — nhắc lại hình tròn của số thứ tự mục và nút CTA. */
.hotline__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--ink);
}
.hotline__badge svg { width: 2.125rem; height: 2.125rem; }

.hotline__text { min-width: 0; }
.hotline__lead {
  font-size: var(--t-medium);
  line-height: var(--lh-text);
}
.hotline__num {
  display: inline-block;
  margin-top: .5rem;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--h4);
  line-height: var(--lh-h4);
  font-weight: 700;
  letter-spacing: .02em;
  /* Chữ số cùng bề ngang -> dãy số không nhảy khi đọc. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color .18s ease;
}
.hotline__num:hover,
.hotline__num:focus-visible { color: var(--cyan); }

@media (max-width: 767.98px) {
  .hotline__pad {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .hotline__badge { width: 3.5rem; height: 3.5rem; }
  .hotline__badge svg { width: 1.625rem; height: 1.625rem; }
  /* Ở mobile --h4 tụt xuống 18px, nhỏ hơn cả câu dẫn -> đặt cỡ riêng
     để số vẫn là thứ nổi nhất trong khối. */
  .hotline__num { font-size: 1.75rem; }
}

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