/* Bản thử "theo ref thewatch.60fps.fr" (08/10). Chỉ nạp khi URL có ?bg=ref, kèm bg-ref.js.
   Tông đơn sắc kim loại của ref: bạc sáng #ebebeb, xám bạc #a1a1a1, đen #0a0a0a. Cả trang đổi nền mượt theo section đang
   ở giữa màn (bg-ref.js đặt data-tone lên .mlp); chữ đổi màu qua biến. Thẻ sản phẩm / thẻ nội dung / form giữ nền trắng. */

.mlp {
  --stage: #f1f3f6; --glow: .7; /* bạc sáng khách chốt 08/10 (ref gốc #ebebeb) */ --ref-em: #0b5ed7; /* chữ nhấn + PHILIPS: xanh Philips (khách chốt 08/10), đậm/sáng theo tông để đọc được */
  position: relative; isolation: isolate;
  background: var(--stage); transition: background-color .8s cubic-bezier(.4, 0, .2, 1);
  --mlp-title: #0a0a0a; --mlp-ink: #1d1d1d; --mlp-muted: #5a5a5a; --mlp-line: rgba(0, 0, 0, .12);
}
/* Xám bạc: #a1a1a1 của ref làm xanh Philips và nút tải PDF chìm → nhạt lên #c4c4c4 (khách chốt 08/10) */
.mlp[data-tone="mid"] { --stage: #c4c4c4; --glow: .4; --ref-em: #0b5ed7; --mlp-title: #0a0a0a; --mlp-ink: #141414; --mlp-muted: #2b2b2b; --mlp-line: rgba(0, 0, 0, .18); }
.mlp[data-tone="dark"] { --stage: #0a0a0a; --glow: .06; --ref-em: #4b93ff; --mlp-title: #f4f4f4; --mlp-ink: #e6e6e6; --mlp-muted: rgba(255, 255, 255, .66); --mlp-line: rgba(255, 255, 255, .14); }

/* Vệt sáng studio: lớp cố định nằm trên nền .mlp, dưới nội dung (z-index -1 trong .mlp đã isolate). */
.mlp::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* khách muốn đèn sáng hơn (08/10): lõi trắng gần đặc + quầng rộng hơn, trước chỉ 70% và hẹp */
    radial-gradient(34% 30% at 50% 36%, rgba(255, 255, 255, calc(.95 * var(--glw, 1))), rgba(255, 255, 255, 0) 100%),
    radial-gradient(70% 62% at 50% 36%, rgba(255, 255, 255, calc(.8 * var(--glw, 1))), rgba(255, 255, 255, calc(.35 * var(--glw, 1))) 45%, rgba(255, 255, 255, 0) 78%),
    radial-gradient(120% 80% at 50% 115%, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0) 60%);
  transition: opacity .8s ease;
}

/* Section trong suốt để thấy nền chung đang đổi màu. Banner, chạy chữ, storytelling giữ nền riêng. */
/* Section trong suốt: nền là lớp cố định của .mlp đổi theo cuộn. Banner, chạy chữ, storytelling giữ nền riêng. */
.mlp :is(.mlp-what, .mlp-film, .mlp-line, .mlp-line:nth-child(even), .mlp-promise, .mlp-cert, .mlp-video, .mlp-wall, .mlp-gift, .mlp-steps, .mlp-faq, .mlp-cta2) { background: transparent !important; }
.mlp .mlp-marquee { background: #0a0a0a; }
.mlp .mlp-gift::before, .mlp .mlp-gift::after { display: none; }
.mlp .mlp-line + .mlp-line::before { background: var(--mlp-line); opacity: 1; }

/* Chữ đổi màu mượt cùng nền */
.mlp :is(.mlp-h2, .mlp-gift__title, .mlp-line__title, .mlp-lead, .mlp-line__desc, .mlp-kicker, .mlp-what__p, .mlp-what__big, .mlp-tl__h, .mlp-tl__p, .mlp-faq__item summary, .mlp-faq__item p) { transition: color .6s ease; }

/* Tiêu đề: chữ thường đen/trắng theo tông, chữ nhấn xanh Philips; nhãn kicker: PHILIPS xanh, phần còn lại xám */
.mlp :is(.mlp-h2, .mlp-gift__title, .mlp-line__title) { color: var(--mlp-title); }
.mlp :is(.mlp-h2, .mlp-gift__title, .mlp-line__title) em { color: var(--ref-em); transition: color .6s ease; }
.mlp .mlp-kicker { color: var(--mlp-muted); letter-spacing: .16em; }
.mlp .mlp-kicker b { color: var(--ref-em); transition: color .6s ease; }
.mlp .mlp-what__big { color: var(--mlp-gb); } /* số lớn: đỏ Gia Bảo (khách chốt 08/10) */
.mlp .mlp-what__lead span { color: rgba(127, 127, 127, .55); }
.mlp .mlp-what__lead span.is-lit { color: var(--mlp-title); }
.mlp .mlp-film__points li { color: var(--mlp-ink); }
.mlp .mlp-film__points .ph, .mlp :is(.mlp-film__tag, .mlp-film__ptag) { color: var(--mlp-muted); } /* .mlp-rl__kind nằm trên ảnh tối: giữ màu gốc */
.mlp .mlp-gift__sub { color: var(--mlp-muted); }
.mlp .mlp-line__mark { -webkit-text-stroke-color: color-mix(in srgb, var(--mlp-title) 14%, transparent); }

/* FAQ trên nền tối */
.mlp .mlp-faq__item { background: color-mix(in srgb, var(--mlp-title) 6%, transparent); }
.mlp .mlp-faq__item[open] { background: color-mix(in srgb, var(--mlp-title) 10%, transparent); border-color: var(--mlp-line); }
.mlp .mlp-faq__item summary { color: var(--mlp-title); }
.mlp .mlp-faq__item summary .ph, .mlp .mlp-faq .mlp-lead a { color: var(--mlp-title) !important; }

/* Quà tặng: bỏ xanh, thẻ đầu thành khối đen kim loại */
.mlp .mlp-gift { --g-blue: #1d1d1d; --g-soft: #ececec; --g-deep: #0a0a0a; --g-line: #e2e2e2; --g-ink: #1d1d1d; }
.mlp .mlp-gift__card--top { background: linear-gradient(160deg, #3b3b3b 0%, #161616 55%, #0a0a0a 100%); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.mlp .mlp-gift__card { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35); }

/* Thẻ nền sáng: luôn chữ tối, không theo tông trang */
.mlp :is(.mlp-lmedia, .mlp-pc, .mlp-bento__cell:not(.mlp-bento__cell--lead), .mlp-cert__card, .mlp-rv, .mlp-cta2__form, .mlp-tl__cta, .mlp-gift__card:not(.mlp-gift__card--top)) {
  --mlp-title: #111; --mlp-ink: #16191d; --mlp-muted: #565e69; --mlp-line: #dfe3e8; color: #16191d;
}
.mlp :is(.mlp-lmedia, .mlp-pc, .mlp-bento__cell:not(.mlp-bento__cell--lead), .mlp-cert__card, .mlp-rv, .mlp-cta2__form, .mlp-tl__cta) :is(h3, .mlp-h2) { color: #111; }

/* Tiêu đề sáng dần theo cuộn (bg-ref.js tách chữ thành .ref-w) */
.mlp .ref-w { opacity: .16; transition: opacity .45s ease; }
.mlp .ref-w.is-on { opacity: 1; }

.mlp-foot { background: #0a0a0a; }

@media (prefers-reduced-motion: reduce) {
  .mlp, .mlp::before { transition: none; }
  .mlp .ref-w { opacity: 1; transition: none; }
}

/* Thanh liên hệ dính + mọi popup nằm trong .mlp: khoá màu gốc, không đổi theo tông trang */
.mlp :is(.mlp-dock, dialog) {
  --mlp-title: #111; --mlp-ink: #16191d; --mlp-muted: #565e69; --mlp-line: #dfe3e8;
}
.mlp dialog .ref-w { opacity: 1; }

/* Nút tải tài liệu PDF: nền trắng đặc để không chìm trên nền xám */
.mlp .mlp-docs__item { background: #fff; border-color: #fff; color: #111; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4); }
.mlp .mlp-docs__item:hover { border-color: var(--ref-em); color: var(--ref-em) !important; }
.mlp .mlp-docs__label { color: var(--mlp-ink); }


/* Nền đổi màu BÁM THEO CUỘN như ref (08/10): lớp cố định ::after vẽ gradient dọc --bg-top → --bg-bot; bg-ref.js nội suy hai
   biến này liên tục giữa bảng màu của section trước và section sau theo vị trí ranh giới trên màn (không dùng transition
   theo thời gian). z-index -2: nằm dưới vệt sáng studio ::before. */
.mlp { --bg-top: #eef1f4; --bg-bot: #e9ecef; --fw: 1; --glw: .4; background: var(--bg-top); transition: none; }
.mlp::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  /* Nấc bạc sáng = nền radial lấy từ ảnh sản phẩm (#F5F6F7 giữa → #EEF1F4 → #E9ECEF góc, khách chốt 08/10).
     --fw (0–1, JS nội suy theo cuộn) là độ hiện của lớp radial này trên lớp linear của các nấc xám. */
  background:
    radial-gradient(ellipse 75% 70% at 50% 42%, rgba(245, 246, 247, var(--fw)) 0%, rgba(238, 241, 244, var(--fw)) 60%, rgba(233, 236, 239, var(--fw)) 100%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
}