/* =====================================================================
   EFFECTS.CSS — lớp hiệu ứng/trải nghiệm, nạp SAU styles.css và mobile.css.

   Nguyên tắc: file này CHỈ thêm chuyển động, đổ bóng, con trỏ và vài phần tử
   nổi mới (thanh tiến trình, nút về đầu trang). Không đụng vào bố cục đã
   duyệt — không sửa width/height/left/top/gap/font-size của bất kỳ phần tử
   nào có sẵn. Xoá file này đi thì web vẫn chạy y như bản HTML gốc.

   Vì #stage bị transform:scale() trên desktop, mọi phần tử position:fixed
   phải nằm NGOÀI #page-outer (xem includes/header.php), nếu không chúng sẽ
   neo theo #stage chứ không theo màn hình.
   ===================================================================== */

:root {
  --fx-ease: cubic-bezier(.22, .61, .36, 1);
  --fx-dur: .55s;
}

/* ---------------------------------------------------------------------
   2. Thanh tiến trình cuộn (trên cùng màn hình)
   --------------------------------------------------------------------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 100;
  pointer-events: none;
  background: transparent;
}
#scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue, #071372), var(--green, #00ad51));
  transform-origin: left center;
  transition: width .1s linear;
}

/* ---------------------------------------------------------------------
   3. Nút về đầu trang
   --------------------------------------------------------------------- */
#to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--blue, #071372);
  color: #fff;
  cursor: pointer;
  z-index: 99;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
  box-shadow: 0 6px 18px rgba(7, 19, 114, .28);
}
#to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#to-top:hover { background: #152f82; transform: translateY(-3px); }
#to-top svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 767px) {
  #to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}

/* ---------------------------------------------------------------------
   4. Hiện dần khi cuộn tới

   Chỉ gắn cho phần tử được JS chọn (class .fx-rv). JS cố tình BỎ QUA mọi
   phần tử nằm trong .carousel-viewport hoặc trong khối [hidden]: những chỗ
   đó bị cắt/ẩn nên IntersectionObserver không bao giờ báo "đã vào màn hình",
   gắn vào sẽ khiến nội dung ẩn vĩnh viễn.
   --------------------------------------------------------------------- */
html.has-js .fx-rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--fx-dur) var(--fx-ease), transform var(--fx-dur) var(--fx-ease);
  transition-delay: calc(var(--fx-i, 0) * 70ms);
  will-change: opacity, transform;
}
html.has-js .fx-rv.fx-in {
  opacity: 1;
  transform: none;
}
/* sau khi hiện xong thì trả will-change để không giữ layer thừa */
html.has-js .fx-rv.fx-done { will-change: auto; transition-delay: 0s; }

/* ---------------------------------------------------------------------
   5. Hover — card sản phẩm
   (bóng đổ khi hover đã có sẵn trong styles.css, ở đây chỉ thêm nhấc nhẹ
   và phóng ảnh; .product-img vốn đã có overflow:hidden nên ảnh không tràn)
   --------------------------------------------------------------------- */
.product-card { transition: transform .3s var(--fx-ease); }
.product-card .product-img { transition: box-shadow .3s ease; }
.product-card .product-img img { transition: transform .45s var(--fx-ease); }
.product-card:hover { transform: translateY(-6px); }
.product-card:hover .product-img img { transform: scale(1.07); }

/* ---------------------------------------------------------------------
   6. Hover — ô vật liệu
   --------------------------------------------------------------------- */
.materials-grid figure { transition: transform .3s var(--fx-ease); }
.materials-grid figure > img,
.materials-grid figure img { transition: transform .5s var(--fx-ease), filter .3s ease; }
.materials-grid figure figcaption { transition: color .25s ease; }
.materials-grid figure:hover { transform: translateY(-4px); }
.materials-grid figure:hover img { transform: scale(1.08); }
.materials-grid figure:hover figcaption { color: var(--blue, #071372); }
/* khung ảnh vật liệu cần cắt để phần phóng to không tràn ra ngoài */
.materials-grid figure { overflow: hidden; }

/* ---------------------------------------------------------------------
   7. Hover — logo thương hiệu đối tác
   --------------------------------------------------------------------- */
.brand-logo { transition: transform .3s var(--fx-ease), box-shadow .3s ease; }
.brand-logo img { filter: grayscale(1); opacity: .78; transition: filter .35s ease, opacity .35s ease, transform .4s var(--fx-ease); }
.brand-logo:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(135,135,135,.18); }
.brand-logo:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.04); }

/* ---------------------------------------------------------------------
   8. Hover — thẻ quy trình hợp tác / danh sách chứng nhận / ô số liệu
   --------------------------------------------------------------------- */
.collab-card { transition: transform .3s var(--fx-ease); }
.collab-card:hover { transform: translateY(-5px); }
.collab-card h4 .num { transition: transform .3s var(--fx-ease); }
.collab-card:hover h4 .num { transform: scale(1.12); }

.certs-list li { transition: transform .28s var(--fx-ease); }
.certs-list li:hover { transform: translateX(6px); }
.certs-list li img { transition: transform .28s var(--fx-ease); }
.certs-list li:hover img { transform: scale(1.1); }

.stat-item img { transition: transform .35s var(--fx-ease); }
.stat-item:hover img { transform: translateY(-4px) scale(1.06); }

/* ---------------------------------------------------------------------
   9. Nút và link
   --------------------------------------------------------------------- */
.btn-primary {
  transition: background .22s ease, transform .22s var(--fx-ease), box-shadow .22s ease;
}
.btn-primary:hover {
  background: var(--blue-deep, #152f82);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(7, 19, 114, .25);
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }

.link-txt { transition: color .2s ease, letter-spacing .2s ease; }
.link-txt:hover { color: var(--blue-deep, #152f82); letter-spacing: .3px; }

/* KHÔNG thêm hiệu ứng cho menu chính và dropdown — giữ đúng như bản đã duyệt.
   Đã thử gạch chân chạy ngang dưới mục menu: hỏng, vì `.hdr-nav .dd-wrap a.dd`
   được styles.css đặt `position:static`, nên `::after` của nó neo vào
   `.dd-wrap` (phần tử positioned gần nhất) chứ không neo vào chính chữ —
   vạch gạch rơi xuống đúng mép trên của panel dropdown, trông như bị dính.
   Hover/active của menu đã có sẵn trong styles.css (đổi màu + đổi weight),
   thế là đủ. */

/* link ở chân trang */
.footer-col-links a { display: inline-block; transition: transform .22s var(--fx-ease), opacity .22s ease; }
.footer-col-links a:hover { transform: translateX(4px); opacity: .85; }
.social-icons a { display: inline-flex; transition: transform .25s var(--fx-ease), opacity .25s ease; }
.social-icons a:hover { transform: translateY(-3px) scale(1.1); }

/* ---------------------------------------------------------------------
   10. Card có data-href thì phải trông bấm được
   --------------------------------------------------------------------- */
[data-href] { cursor: pointer; }
[data-href]:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--green, #00ad51);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   11. Tôn trọng cài đặt "giảm chuyển động" của hệ điều hành
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.has-js .fx-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}