/* =====================================================================
   MỘT NỀN LIỀN MẠCH CHO CẢ TRANG
   =====================================================================
   Nạp sau cùng, sau tất cả file khác.

   HAI LẦN TRƯỚC SỬA CHƯA TỚI — ghi lại để không lặp lại cách làm sai.

   Lần 1: gom background-color của các block về một giá trị. Không ăn
   thua, vì màu nền gốc nằm dưới cùng.

   Lần 2: gỡ cả background-image của thẻ <section>. Vẫn còn vệt.

   Lần 3 (lần này): quét từng phần tử VÀ từng lớp giả ::before / ::after
   trong mười block mới ra thủ phạm thật. Mỗi block có thêm một hoặc hai
   LỚP GIẢ PHỦ KÍN CẢ KHỐI, nằm ngoài thuộc tính background của section
   nên hai lần trước không chạm tới:

     b01::before   1425x795   lớp chuyển sắc
     b03::before   1425x988   trắng 53%
     b04::before   1425x769   xanh 46%
     b04::after    1425x769   xanh lơ 55%
     b05::before   1425x1064  chuyển sắc
     b05::after    1425x1064  chuyển sắc
     b06::before   1425x1102  chuyển sắc
     b06::after    1425x1102  chuyển sắc
     b07::before   1425x992   chuyển sắc
     b08::before   1425x930   MỘT MẢNG MÀU ĐẶC #EBF3FF
     b08::after    1425x930   chuyển sắc

   Mỗi lớp là một hình chữ nhật phủ đúng chiều cao một block rồi dừng
   đứt ở mép. Đó là lý do cuộn qua thấy từng mảng nền khác nhau, như thể
   mỗi block là một trang riêng dán nối lại.

   CÁCH LÀM LẦN NÀY
   Bỏ hết. Cả trang chỉ còn MỘT nền duy nhất vẽ một lần trên .site-main.
   Các block không còn nền riêng, không còn lớp phủ, không còn sóng cắt
   ngang. Phân biệt giữa các mục dựa vào khoảng trắng và thẻ nội dung —
   đó là cách trang web chuyên nghiệp làm, không phải tô mỗi mục một màu.

   Giữ lại những mảng sáng nhỏ bám theo nội dung (quầng sáng sau hình
   minh hoạ, viên nhãn, nút bấm, thẻ) vì chúng đi theo nội dung chứ
   không cắt ngang trang.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. NỀN DUY NHẤT
   ---------------------------------------------------------------------
   Các mảng sáng đặt theo phần trăm chiều cao của CẢ TRANG (gần 10.000px)
   nên mỗi mảng trải trên nhiều nghìn pixel, chuyển màu cực chậm, không
   có mép nào để mắt bắt được.

   Mảng đầu tiên đặt ở góc trên phải, ngay sau hình minh hoạ hero, để
   phần banner vẫn có chiều sâu mà không cần nền riêng.
   --------------------------------------------------------------------- */

.site-main {
  background-color: var(--bg);
  background-image:
    radial-gradient(1500px 1100px at 82% 3%, rgba(188, 223, 255, 0.72), transparent 58%),
    radial-gradient(1200px 900px at 12% 14%, rgba(206, 233, 255, 0.5), transparent 60%),
    radial-gradient(1300px 1000px at 92% 32%, rgba(199, 228, 255, 0.42), transparent 62%),
    radial-gradient(1200px 950px at 6% 50%, rgba(210, 236, 255, 0.44), transparent 63%),
    radial-gradient(1300px 1000px at 90% 68%, rgba(201, 230, 255, 0.4), transparent 62%),
    radial-gradient(1200px 950px at 10% 86%, rgba(208, 235, 255, 0.42), transparent 63%);
  background-repeat: no-repeat;
}

/* ---------------------------------------------------------------------
   2. GỠ NỀN RIÊNG CỦA TỪNG BLOCK
   --------------------------------------------------------------------- */

.b01,
.b02,
.b03,
.b04,
.b05,
.b06,
.b07,
.b08,
.b09 {
  background: none;
}

/* ---------------------------------------------------------------------
   3. GỠ CÁC LỚP GIẢ PHỦ KÍN KHỐI
   ---------------------------------------------------------------------
   Đây là phần hai lần trước bỏ sót. Mỗi lớp là một hình chữ nhật đúng
   bằng một block, dừng đứt ở mép trên và mép dưới.
   --------------------------------------------------------------------- */

.b01::before,
.b01::after,
.b03::before,
.b03::after,
.b04::before,
.b04::after,
.b05::before,
.b05::after,
.b06::before,
.b06::after,
.b07::before,
.b07::after,
.b08::before,
.b08::after,
.b09::before,
.b09::after {
  display: none;
}

/* ---------------------------------------------------------------------
   4. GỠ HÌNH TRANG TRÍ CẮT NGANG TRANG
   ---------------------------------------------------------------------
   Sóng ở chân block vốn sinh ra để che chỗ hai nền khác màu gặp nhau.
   Nền đã liền một mạch nên chúng không còn việc, mà lại chính là thứ vẽ
   ra đường cắt — rõ nhất là sóng ở chân hero và dải clip-path của b03.

   Giữ .waves của chân trang: đó là chỗ chuyển thật từ vùng sáng xuống
   chân trang nền tối.
   --------------------------------------------------------------------- */

.b01 .bottom-wave,
.b02__wave,
.b03__wave,
.b04 .wave,
.b02__glow,
.b06__heading::after {
  display: none;
}

/* Khối bọc bên trong cũng tự sơn nền, để lại mảng vuông nhạt hơn */
.b02__inner,
.b03__inner,
.b04 .wrap,
.b05 .wrap,
.b06__wrap,
.b07 .container,
.b08-inner,
.b09 .wrap {
  background: none;
}

/* ---------------------------------------------------------------------
   5. KHOẢNG CÁCH GIỮA CÁC MỤC ĐỀU NHAU
   ---------------------------------------------------------------------
   layout.css từng cho b02, b07 và chân trang thêm 32px đáy để chừa chỗ
   cho sóng. Sóng đã bỏ nên khoản thừa đó làm nhịp dọc lệch đi.
   --------------------------------------------------------------------- */

.b02,
.b07 {
  padding-bottom: var(--section-y);
}

/* Hero tự lo khoảng cách bên trong, nhưng vẫn cần chừa đáy cho đều với
   nhịp chung thay vì dính sát mục dưới */
.site-main > section.b01 {
  padding-bottom: calc(var(--section-y) * 0.5);
}