/* =====================================================================
   BANNER HERO — chữ "Theo yêu cầu" bị gạch đè, và dựng chiều sâu 3D
   =====================================================================
   Nạp sau cùng. Khối banner nằm trong section .b01 của mã nguồn (anh
   Thuận quen gọi là B02); ghi rõ ở đây để lần sau khỏi tìm nhầm file.

   LỖI 1 — GẠCH CHÂN CẮT NGANG CHỮ
   `.accent::after` là một vạch gradient cao 4px, đặt bằng `top: 70px`
   đếm từ hộp chữ. Con số 70px đó hợp với chữ Latin không dấu, nhưng
   tiếng Việt có phần đuôi đi xuống sâu hơn nhiều: chữ "y" thả đuôi, chữ
   "ầ" chồng hai dấu. Vạch rơi đúng vào đáy các chữ đó, nhìn như chữ bị
   cắt ngang.

   Đo được ở màn 1440px: hộp chữ "Theo yêu cầu" rộng 330px, nhưng vạch
   lại bắt đầu ở 49px và chỉ dài 284px — vừa cắt ngang chữ, vừa gạch lệch
   mất chữ "T" đầu câu.

   Nguyên nhân sâu hơn: `.accent` là `display: inline`. Phần tử inline có
   thể vỡ làm nhiều đoạn, nên mốc neo của lớp giả tính theo đoạn đầu chứ
   không theo cả cụm — ra những con số lẻ như trên. Đổi sang
   inline-block thì hộp chữ là một khối liền, neo mới đếm đúng.

   LỖI 2 — ẢNH LẤN ÁT PHẦN CHỮ
   Lưới chia 533px chữ / 707px ảnh: cột ảnh RỘNG HƠN cột chữ. Banner là
   chỗ nói doanh nghiệp làm gì, chữ phải là phần chính. Thêm nữa b01.css
   cho ảnh `width: 128%` ở dưới 1260px và `145%` ở dưới 1010px — ảnh
   tràn ra ngoài khung của nó để trông cho hoành tráng, nhưng đó chính
   là thứ làm nó chèn sang phần chữ ở màn hẹp.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. CHỮ "THEO YÊU CẦU"
   --------------------------------------------------------------------- */

.b01 h1 .accent {
  display: inline-block;
  /* Chừa chỗ dưới chân chữ cho vạch gạch, tính cả đuôi chữ "y" và dấu
     của chữ "ầ" — đây là phần mà con số 70px gõ cứng đã bỏ quên. */
  padding-bottom: 16px;

  /* CHỮ "cầu" BỊ CẮT MẤT MỘT NỬA — chừa thêm chỗ bên phải.

     b01.css tô cụm chữ này bằng chuyển sắc, dùng background-clip:text và
     -webkit-text-fill-color:transparent. Nghĩa là nét chữ KHÔNG có màu
     của riêng nó: cái nhìn thấy là mảng chuyển sắc, bị xén theo hình nét
     chữ. Mảng chuyển sắc đó chỉ phủ trong HỘP của phần tử.

     Chữ lại là chữ nghiêng. Chữ nghiêng ngả sang phải nên nét chữ cuối
     câu tràn ra NGOÀI bề rộng danh nghĩa của nó. Đo ở màn 1440px:

       hộp phần tử      330px
       nét mực chạy tới 352px

     22px cuối cùng nằm ngoài hộp nên không được tô gì, mà chữ thì đã
     trong suốt sẵn — thành ra biến mất. Đúng chỗ anh Thuận khoanh đỏ:
     chữ "u" cuối bị cắt dọc một nhát.

     0,45em nới hộp ra vừa đủ ôm hết phần nghiêng, và vì tính theo em nên
     cỡ chữ co giãn thế nào (clamp 30–52px) cũng vẫn đúng. Chữ nằm cuối
     dòng nên nới sang phải không đẩy gì cả. */
  padding-right: 0.45em;
}

.b01 h1 .accent::after {
  /* Neo theo đáy hộp chữ thay vì đếm pixel từ đỉnh: cỡ chữ co giãn theo
     khổ màn (clamp 30px–52px) nên mọi con số gõ cứng đều sai ở đâu đó. */
  top: auto;
  bottom: 2px;
  left: 0;
  right: 0;
  width: auto;
  height: 5px;
  border-radius: 5px;
  /* Giữ độ nghiêng nhẹ của bản gốc, chỉ xoay quanh đầu trái cho vạch
     bám sát chân chữ ở cả hai đầu. */
  transform: rotate(-1.2deg);
  transform-origin: left center;
}

/* ---------------------------------------------------------------------
   2. CÂN LẠI LƯỚI: CHỮ LÀ PHẦN CHÍNH
   --------------------------------------------------------------------- */

/* Lần chỉnh đầu em kéo về 55/45 cho chữ rộng hơn ảnh, nhưng nhìn thực
   tế thì ảnh bé quá so với cả khối. Nay trả ảnh về phần rộng hơn:

     1440px   ảnh 557 → 657   (to thêm 18%)
     1300px   ảnh 537 → 638

   Vẫn khác hẳn bản gốc: bản gốc để ảnh 707px VÀ cho nó tràn 128% ra
   ngoài khung nên mới chèn sang chữ. Nay ảnh to mà vẫn nằm gọn trong
   cột của nó — đã đo 0px chồng lấn ở mọi khổ.

   Đã kiểm ở 1300px (chỗ cột chữ hẹp nhất của nhánh này): tiêu đề vẫn
   đúng ba dòng, không vỡ thêm dòng nào, đoạn dẫn vẫn ba dòng. */
@media (min-width: 1261px) {
  .b01 .hero {
    grid-template-columns: 47% 53%;
    column-gap: clamp(24px, 2.5vw, 44px);
  }
}

@media (max-width: 1260px) {
  .b01 .hero {
    grid-template-columns: 48% 52%;
  }

  /* Bỏ 128%: ảnh về đúng khung của nó, hết chèn sang phần chữ. */
  .b01 .hero-art img {
    width: 100%;
  }
}

@media (max-width: 1010px) {
  .b01 .hero {
    grid-template-columns: 47% 53%;
  }

  /* Bỏ 145% và cú đẩy translate(5%, 4%) — ở khổ này ảnh tràn sang chữ
     nhiều nhất. Phép xoay 3D ở mục 3 lo phần chiều sâu thay cho nó. */
  .b01 .hero-art img {
    width: 100%;
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   3. CHIỀU SÂU 3D
   ---------------------------------------------------------------------
   Ảnh minh hoạ có nền trong suốt (đã kiểm: bốn góc đều alpha = 5/255),
   nên dùng được drop-shadow — bóng bám theo đúng hình dáng máy tính,
   điện thoại, các thẻ nổi, chứ không phải bóng của một ô chữ nhật.
   Đây mới là thứ tạo cảm giác vật thể nằm trong không gian; box-shadow
   chỉ đổ bóng cho cái khung vuông.

   Ba lớp hợp lại:
     xoay nhẹ   vật thể hơi quay đi, không dán phẳng lên mặt giấy
     bóng đổ    theo hình thật của vật thể
     bóng nền   một vệt mờ nằm dưới, để vật thể có chỗ "đậu" xuống

   Góc xoay để rất nhỏ (4 độ). Bản thân hình minh hoạ đã có phối cảnh
   riêng; xoay mạnh sẽ đánh nhau với phối cảnh sẵn có, nhìn ra ngay là
   đồ giả.
   --------------------------------------------------------------------- */

/* Khai báo kiểu cho hai biến góc xoay mà js/b01-hero.js ghi vào mỗi
   khung hình. Biến không khai báo kiểu thì mỗi lần ghi, trình duyệt
   phải tính lại kiểu cho cả nhánh bên dưới — gồm cả thẻ <img> đang chạy
   hoạt ảnh float. Khai báo rồi thì việc tính lại dừng ngay ở phần tử
   này. Trình duyệt chưa hỗ trợ @property sẽ bỏ qua cả khối, biến vẫn
   chạy như thường. */
@property --xoay-doc {
  syntax: "<angle>";
  inherits: false;
  initial-value: -4deg;
}

@property --xoay-ngang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 2deg;
}

.b01 .hero-art {
  perspective: 1500px;
  perspective-origin: 60% 45%;
}

/* PHÉP XOAY ĐẶT Ở LỚP BỌC, KHÔNG ĐẶT THẲNG LÊN ẢNH
   b01.css cho ảnh chạy `animation: float 8s` (keyframes nhún lên xuống
   9px). Hoạt ảnh đang chạy thì GHI ĐÈ thuộc tính transform của ảnh —
   viết rotate lên ảnh bao nhiêu cũng bị nuốt sạch, đã đo: computed
   transform chỉ còn đúng phép tịnh tiến của float.

   Nên bọc thêm một lớp: lớp bọc lo xoay 3D, ảnh bên trong giữ nguyên
   nhịp nhún. Hai chuyển động chồng lên nhau mà không giẫm chân nhau. */
.b01 .hero-art__3d {
  --xoay-doc: -4deg;
  --xoay-ngang: 2deg;
  transform: rotateY(var(--xoay-doc)) rotateX(var(--xoay-ngang));
  /* KHÔNG đặt transform-style: preserve-3d. Bên trong chỉ có đúng một
     thẻ <img> phẳng nên nó chẳng đem lại gì, mà lại dựng một không gian
     3D bao quanh phần tử đang mang mặt nạ — WebKit từng vẽ sai đúng tổ
     hợp đó. Phép nghiêng là do `perspective` ở thẻ cha, không phải nó.
     (Lúc còn drop-shadow thì dòng này vô hiệu sẵn: có filter là
     transform-style bị ép về flat. Bỏ filter đi nó mới thật sự chạy,
     nên phải gỡ luôn.) */
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* ĐỪNG DÙNG drop-shadow CHO ẢNH HERO NÀY
   Lần trước em đặt drop-shadow ở đây và nó tạo ra đúng cái "khung ảnh"
   anh Thuận nhìn thấy. drop-shadow vẽ bóng theo KÊNH ALPHA của ảnh. Ảnh
   này alpha lại là một hình chữ nhật mép mờ (xem ghi chú mục 4), nên
   bóng cũng ra một hình chữ nhật mép mờ — tức là một cái khung.

   Chiều sâu lấy từ quầng sáng và vệt bóng nền ở dưới, cả hai đều là
   hình bầu dục nên không vẽ ra cạnh thẳng nào. */

/* Bóng gốc của b01.css nhạt hơn nhiều (#087dff13) và nay nằm chồng lên
   bóng mới, làm viền ảnh hơi bệt. Gỡ đi, chỉ giữ bóng ở lớp bọc. */
/* ---------------------------------------------------------------------
   4. LÀM TAN MÉP TẤM NỀN CỦA ẢNH
   ---------------------------------------------------------------------
   Quét toàn bộ 1.353.880 điểm ảnh của media/b01-hero-approved.webp:

     alpha 200–255   1.088.472   80%   ← gần như đục
     alpha  64–199     176.631
     alpha  16–63       64.633
     alpha   1–15       19.382
     alpha       0       4.762   0,35% ← trong suốt hẳn

   Nghĩa là ảnh KHÔNG phải hình cắt nền. Nó là một tấm nền xanh nhạt phủ
   kín khung 1448x935, vật thể 3D vẽ đè lên trên. Vùng đục hoàn toàn
   trải từ x 94→1358 và y 50→860, mép chỉ mờ dần trong 50–94px.

   (Commit trước em kết luận ngược lại — "nền trong suốt, bốn góc
   alpha = 5". Bốn góc đó nằm đúng trong vùng mép mờ nên cho số sai. Lẽ
   ra phải quét cả ảnh ngay từ đầu.)

   50–94px trên khung 1448px là quãng chuyển quá gấp, mắt bắt được ngay
   đường biên. Mặt nạ này kéo dài quãng đó ra, tấm nền tan dần vào nền
   trang thay vì dừng đứt ở mép.

   Các mốc chọn sao cho vùng đặc (52%) vẫn trùm hết vật thể — thẻ "AI",
   biểu tượng cloud, biểu đồ, biểu tượng code đều nằm trong đó.
   --------------------------------------------------------------------- */

.b01 .hero-art img {
  --mat-na: radial-gradient(
    118% 112% at 52% 46%,
    #000 52%,
    rgba(0, 0, 0, 0.72) 72%,
    rgba(0, 0, 0, 0.28) 87%,
    transparent 100%
  );
  -webkit-mask-image: var(--mat-na);
  mask-image: var(--mat-na);
  /* Ghi rõ từng thuộc tính con: viết tắt `mask` sẽ xoá hết phần còn lại
     về mặc định, mà mặc định `mask-repeat: repeat` thì mặt nạ lặp lại
     thành nhiều ô, hỏng hẳn. */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  /* Gỡ bóng gốc #087dff13 của b01.css: cũng là drop-shadow, cũng vẽ
     theo hình chữ nhật, chỉ nhạt hơn. */
  filter: none;
}

/* VỆT BÓNG NỀN: ĐÃ THỬ RỒI BỎ
   Em từng thêm một vệt bóng bầu dục dưới chân ảnh cho vật thể có chỗ
   "đậu". Đo lại thì nó nằm lệch: .hero-art là ô lưới `align-self:
   stretch` nên cao bằng CỘT CHỮ (553px), trong khi ảnh chỉ cao 365px và
   được căn giữa ô. Mọi phần trăm tính theo ô đó, nên vệt bóng rơi xuống
   dưới đáy ảnh 29px — thành một vệt mờ lơ lửng, không dính vào đâu.

   Mà bản thân hình minh hoạ đã có sẵn vòng sáng dưới chân laptop rồi.
   Thêm một vệt nữa vừa thừa vừa đục. Bỏ hẳn, để quầng sáng ở mục 5 lo
   phần chiều sâu. */

/* ---------------------------------------------------------------------
   5. QUẦNG SÁNG PHÍA SAU
   ---------------------------------------------------------------------
   b01.css đã có sẵn một quầng (`inset: 15% 5% 7%`, blur 30px) nhưng nó
   nhỏ hơn cả ảnh, nên rìa ảnh không có gì đỡ và lộ ra là một mảng dán
   lên mặt phẳng. Nới rộng hơn khổ ảnh, mờ sâu hơn, phối cùng hệ xanh
   với tấm nền — vật thể nằm trong một vũng sáng chứ không dán lên nền.
   --------------------------------------------------------------------- */

.b01 .hero-art::after {
  inset: -14% -10% -8% -10%;
  width: auto;
  height: auto;
  background: radial-gradient(
    52% 48% at 54% 46%,
    rgba(86, 186, 255, 0.3),
    rgba(120, 170, 255, 0.16) 55%,
    rgba(0, 0, 0, 0) 78%
  );
  filter: blur(46px);
}

/* Màn cảm ứng không rê chuột được nên không có hiệu ứng nghiêng theo
   tay; để ảnh thẳng cho gọn, giữ lại bóng đổ. */
@media (hover: none), (pointer: coarse) {
  .b01 .hero-art__3d {
    --xoay-doc: 0deg;
    --xoay-ngang: 0deg;
  }
}

@media (max-width: 710px) {
  .b01 .hero-art__3d {
    --xoay-doc: 0deg;
    --xoay-ngang: 0deg;
  }

}

@media (prefers-reduced-motion: reduce) {
  .b01 .hero-art__3d {
    --xoay-doc: 0deg;
    --xoay-ngang: 0deg;
    transition: none;
  }
}