/* ════════════════════════════════════════════════════════════════
   Flerfi landing — base + motion
   Phần "TỪ DESIGN" là <style> trong <helmet> của LandingPage.dc.html,
   giữ nguyên văn. Phần "SITE ADDITIONS" là những gì cần thêm để chạy
   ngoài design tool (skip link, anchor offset, trạng thái reveal).
   ════════════════════════════════════════════════════════════════ */

/* ─────────── TỪ DESIGN ─────────── */
body{margin:0;background:#0E2226;color:#2C2C2A;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#B9D5D9;color:#0E2226}
:focus-visible{outline:2px solid #B9D5D9;outline-offset:3px}
@keyframes fRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes fScanR{0%{transform:translateX(0);opacity:0}10%{opacity:.85}100%{transform:translateX(48vw);opacity:0}}
@keyframes fScanL{0%{transform:translateX(0);opacity:0}10%{opacity:.85}100%{transform:translateX(-48vw);opacity:0}}
@keyframes fInR{0%{opacity:0;transform:translateX(46px)}20%,72%{opacity:1;transform:translateX(0)}92%,100%{opacity:0;transform:translateX(0)}}
@keyframes fInL{0%{opacity:0;transform:translateX(-46px)}20%,72%{opacity:1;transform:translateX(0)}92%,100%{opacity:0;transform:translateX(0)}}
@keyframes fHalo{0%{transform:scale(.5);opacity:.45}100%{transform:scale(2.1);opacity:0}}
@keyframes fBeat{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fBar{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes fTravel{0%{left:2%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:98%;opacity:0}}
@keyframes fDrift{from{background-position:0 0}to{background-position:32px 32px}}
@keyframes fDriftB{from{background-position:0 0}to{background-position:-36px 30px}}
@keyframes fBlip{0%,86%,100%{opacity:0;transform:scale(.3)}42%{opacity:1;transform:scale(1)}}
@keyframes fBand{0%{transform:translateX(-8vw);opacity:0}14%,86%{opacity:.55}100%{transform:translateX(108vw);opacity:0}}
@keyframes fPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes fDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fSpin{to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════════════════════════
   ▼▼▼ SITE ADDITIONS ▼▼▼
   ════════════════════════════════════════════════════════════════ */

/* anchor không chui dưới header sticky */
[id]{scroll-margin-top:86px}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

/* Scroll-reveal — dc-runtime set opacity bằng JS (nội dung nháy 1 nhịp trước
   khi JS chạy). Ở đây trạng thái ẩn nằm trong CSS, gate bằng .js nên tắt JS
   vẫn đọc được toàn bộ trang; JS chỉ thêm .in khi block vào tầm nhìn.
   Là hiệu ứng xuất hiện một lần nên vẫn chạy khi người dùng bật reduce. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 700ms cubic-bezier(.2,0,0,1),transform 700ms cubic-bezier(.2,0,0,1);
}
.js [data-reveal="1"]{transition-delay:90ms}
.js [data-reveal="2"]{transition-delay:180ms}
.js [data-reveal="3"]{transition-delay:270ms}
.js [data-reveal="4"]{transition-delay:360ms}
.js [data-reveal="5"]{transition-delay:450ms}
.js [data-reveal].in{opacity:1;transform:none}

/* Reduce motion → hạ xuống 'subtle', KHÔNG tắt sạch (xem ghi chú đầu main.js):
   bỏ mọi chuyển động lặp vô hạn — radar quét, chip trôi, lưới chấm trôi, nhịp
   đập — giữ lại hiệu ứng xuất hiện một lần. Canvas radar do main.js lo. */
@media (prefers-reduced-motion: reduce){
  [data-anim="loop"]{animation:none !important}
}

/* Hero — khối radar là absolute, neo theo đáy: chiếm khoảng 315px tính từ đáy
   (bottom clamp 70–124px + đường kính clamp 146–200px + nhãn). padding-bottom
   của design tối đa 300px nên dòng eyebrow "NCC xác minh…" đè lên vòng radar ở
   mọi màn cao dưới ~1185px. Nâng đáy hero lên vừa đủ, không đổi gì khác. */
#top{padding-bottom:clamp(322px,36vh,382px) !important}

/* skip link */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:#FCFBF7;color:#0E2226;
  padding:10px 16px;border-radius:2px;
  font-size:13px;font-weight:700;text-decoration:none;
  transition:top 150ms ease-out;
}
.skip-link:focus{top:12px}

/* hàng lĩnh vực: bàn phím dùng được như chuột */
[data-row]{outline-offset:-2px}

/* Mobile — design dùng clamp() + auto-fit nên tự co; chỉ chỉnh vài chỗ
   header wrap và bảng 3 cột bị chật dưới 560px. */
@media (max-width: 700px){
  header nav{row-gap:12px}
  header nav > a:last-child{margin-left:0 !important;width:100%;text-align:center}

  /* 4 chip "… trả lời" ở hero là absolute neo trái/phải — dưới 700px chúng
     chồng lên nhau và lên vòng radar. Cho 2 chip chạy theo luồng bình thường
     ngay dưới nội dung, ẩn 2 chip còn lại. */
  [data-chip]{
    position:static !important;
    margin:8px auto 0 !important;
    animation:none !important;
    opacity:1 !important;
  }
  [data-chip="2"],[data-chip="4"]{display:none !important}
}
@media (max-width: 560px){
  [data-side-panel]{gap:26px !important}
}

/* Print — bản đọc được, không nền tối */
@media print{
  body{background:#FFFFFF}
  header,[data-progress],[data-field],.skip-link{display:none !important}
  section{background:#FFFFFF !important;color:#2C2C2A !important;min-height:0 !important;padding:20px 0 !important}
  section h1,section h2,section h3,section h4,section p,footer,footer *{color:#0E2226 !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  [data-anim]{animation:none !important}
}