/* MrboAds — hiệu ứng. Chỉ dùng opacity/transform (chạy trên GPU, không gây reflow).
   Thanh tiến độ dùng scroll-timeline của CSS (không JS). Phần reveal và đếm số
   do /style/fx.js gán class qua IntersectionObserver — không có listener scroll. */

/* ── 1. Thanh tiến độ đọc trên header ──────────────── */
@supports (animation-timeline: scroll()){
  header{position:sticky}
  header::after{
    content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:linear-gradient(90deg,var(--vang),var(--vang2));
    transform:scaleX(0);transform-origin:0 50%;
    animation:fx-tien linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes fx-tien{to{transform:scaleX(1)}}

@media(prefers-reduced-motion:reduce){
  header::after{display:none}
}

/* ── 2. Khối nội dung trôi lên khi lọt vào khung nhìn ─
   Do fx.js gán class, và chỉ gán cho khối đang nằm dưới màn hình → không có
   nhấp nháy, và nếu JS không chạy thì không có gì bị ẩn. */
@media(prefers-reduced-motion:no-preference){
  .fx-cho{opacity:0;transform:translate3d(0,16px,0)}
  .fx-chay{animation:fx-hien .5s cubic-bezier(.22,.8,.3,1) both}
}
@keyframes fx-hien{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:none}
}

/* ── 3. Thẻ: dấu ngắm 4 góc hiện khi rê chuột ───────── */
.the,.he-o,.tool,.hop{position:relative}
.the::before,.he-o::before,.tool::before,.hop::before,
.the::after,.he-o::after,.tool::after,.hop::after{
  content:'';position:absolute;width:9px;height:9px;pointer-events:none;
  opacity:0;transition:opacity .2s ease;border-color:var(--vang2);border-style:solid;border-width:0;
}
.the::before,.he-o::before,.tool::before,.hop::before{
  top:-1px;left:-1px;border-top-width:1.5px;border-left-width:1.5px;
}
.the::after,.he-o::after,.tool::after,.hop::after{
  bottom:-1px;right:-1px;border-bottom-width:1.5px;border-right-width:1.5px;
}
.the:hover::before,.he-o:hover::before,.tool:hover::before,.hop:hover::before,
.the:hover::after,.he-o:hover::after,.tool:hover::after,.hop:hover::after{opacity:1}

/* ── 4. Nút chính: vệt sáng quét qua khi rê chuột ───── */
.nut-chinh{position:relative;overflow:hidden;isolation:isolate}
.nut-chinh::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);
  transform:translate3d(-120%,0,0);transition:transform .55s ease;
}
.nut-chinh:hover::after{transform:translate3d(120%,0,0)}
@media(prefers-reduced-motion:reduce){.nut-chinh::after{display:none}}

/* ── 5. Liên kết điều hướng: gạch chân chạy từ trái ─── */
.hd nav a{position:relative}
.hd nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:var(--vang);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .22s ease;
}
.hd nav a:hover::after{transform:scaleX(1)}

/* ── 6. Con trỏ nhấp nháy sau tiêu đề hero ──────────── */
@media(prefers-reduced-motion:no-preference){
  .hero h1::after{
    content:'';display:inline-block;width:.5em;height:.9em;margin-left:.12em;
    background:var(--vang2);vertical-align:-.08em;
    animation:fx-nhay 1.15s steps(1) infinite;
  }
}
@keyframes fx-nhay{0%,55%{opacity:1}56%,100%{opacity:0}}

/* ── 7. Số liệu: khe sáng chạy dưới dải thống kê ────── */
.so{position:relative;overflow:hidden}
@media(prefers-reduced-motion:no-preference){
  .so::after{
    content:'';position:absolute;left:0;bottom:0;height:1px;width:40%;
    background:linear-gradient(90deg,transparent,var(--vang2),transparent);
    animation:fx-quet 7s linear infinite;
    animation-play-state:var(--fx-chay,running);  /* fx.js tắt khi ra khỏi màn hình */
  }
}
@keyframes fx-quet{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(350%,0,0)}}

/* body đang để overflow-x:hidden → tự biến thành vùng cuộn, làm view-timeline
   chết cứng (khối bị kẹt ở opacity 0). overflow-x:clip cắt tràn ngang y hệt
   nhưng KHÔNG tạo vùng cuộn. Trình duyệt cũ không hiểu "clip" thì bỏ qua dòng
   này và giữ nguyên "hidden" như trước. */
body{overflow-x:clip}

/* Trên màn hình hẹp, con trỏ nhấp nháy chiếm nguyên một dòng của tiêu đề → bỏ */
@media(max-width:620px){
  .hero h1::after{display:none}
}