/*! thenote-motion.css — NGÔN NGỮ CHUYỂN ĐỘNG CHUNG cho toàn site (10/10/2026, ToànQV).
 *  Theme PHP: enqueue toàn site, nạp trong <head> (cần có mặt trước lần vẽ đầu để chuyển trang mềm hoạt động).
 *  Đi kèm assets/js/thenote-motion.js. Mọi trang dùng đúng một nhịp này — KHÔNG viết hiệu ứng riêng trong từng trang.
 *
 *  Nguyên tắc (chuẩn ngành cho site biên tập / sang trọng):
 *  1. Chậm và êm: vào bằng đường cong "ra êm" (--tn-m-ease), không nảy, không lắc.
 *  2. Chỉ mờ/hiện + dịch/phóng rất nhẹ (opacity, translate, scale) → card đồ hoạ xử lý, không giật. Không blur, không parallax.
 *  3. Phần nhìn thấy đầu tiên hiện ngay; chỉ phần bên dưới mới hiện dần khi cuộn tới.
 *  4. Mỗi thao tác đều có phản hồi: cuộn → khối hiện dần; bấm → nút lún nhẹ + vòng sáng mảnh; đổi trang → mờ dần.
 *  5. Tôn trọng "giảm chuyển động" của máy người xem: tắt hết.
 */
:root {
  --tn-m-ease: cubic-bezier(.22, 1, .36, 1);   /* ra êm — mọi chuyển động vào */
  --tn-m-ease-out: cubic-bezier(.4, 0, .6, 1); /* rời đi — mờ ra khi chuyển trang */
  --tn-m-fast: .35s;    /* hover màu, viền, nhấn */
  --tn-m-base: .7s;     /* đổi tab, mở/đóng, thanh đầu trang ẩn/hiện */
  --tn-m-slow: 1.4s;    /* hiện dần khi cuộn (11/10: 1.1s → 1.4s) */
  --tn-m-image: 1.8s;   /* ảnh lắng lại */
  --tn-m-rise: 40px;    /* quãng dịch khi hiện (11/10: 24 → 40px) */
  --tn-m-stagger: 120ms; /* trễ giữa các mục cùng lượt */
  --tn-m-ring: 120s;    /* vòng nét đứt xoay (motif chung) */
  --tn-m-float: 9s;     /* trôi nhẹ (bong bóng, ảnh nổi) */
  --tn-head-vis: 0px;   /* 11/10: thanh đầu trang tĩnh → luôn 0 (phần tử dính không cần chừa chỗ) */
}

html { scroll-behavior: smooth; }

/* ---- Chuyển trang mềm (View Transitions giữa các trang; trình duyệt chưa hỗ trợ thì bỏ qua, không lỗi) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: tn-vt-out .38s var(--tn-m-ease-out) both; }
::view-transition-new(root) { animation: tn-vt-in .8s var(--tn-m-ease) both; }
[data-tn-header] { view-transition-name: tn-header; }
::view-transition-old(tn-header), ::view-transition-new(tn-header) { animation: none; }
@keyframes tn-vt-out { to { opacity: 0; } }
@keyframes tn-vt-in { from { opacity: 0; translate: 0 12px; } }

/* ---- Thanh đầu trang (11/10): TĨNH — nằm trong dòng chảy, cuộn đi cùng trang; KHÔNG sticky, không ẩn / hiện, không bóng, không chuyển động.
   transform / translate !important: chặn mọi mã cũ của trang còn đặt translateY(-100%) lên header. ---- */
[data-tn-header] {
  position: relative !important; top: auto !important; z-index: 80;
  transform: none !important; translate: none !important; transition: none !important; will-change: auto !important;
}

/* ---- Chuyển động nền dùng chung (một bộ keyframes cho cả site) ---- */
@keyframes tnSpin { to { transform: rotate(360deg); } }
@keyframes tnSpinR { to { transform: rotate(-360deg); } }
@keyframes tnFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes tnBreath { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
@keyframes tnPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes tnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tnIn { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes tnZoom { from { scale: 1; } to { scale: 1.08; } }
@keyframes tnDrift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(5%,-4%,0) scale(1.08); } 100% { transform: translate3d(-4%,4%,0) scale(.95); } }
@keyframes tnLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tnRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---- Nút / viên có nền hoặc viền: bóng nhẹ khi rê chuột (JS gắn [data-tn-bt]; phần tử đã có bóng riêng thì giữ của nó) ---- */
[data-tn-bt] { transition-property: color, background-color, border-color, box-shadow, opacity; transition-duration: var(--tn-m-fast); transition-timing-function: ease; }
@media (hover: hover) { [data-tn-bt]:hover { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--tn-a1d, #7B4B2A) 45%, transparent); } }

/* ---- Vòng sáng khi bấm (tạo bằng JS) ---- */
.tn-tap { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; border-radius: 999px; border: 1px solid currentColor; opacity: 0; }

/* ---- Viền tập trung khi dùng bàn phím (thống nhất, mảnh) ---- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  [data-tn-header] { position: static !important; translate: none !important; box-shadow: none !important; }
  .tn-tap { display: none; }
}

/* ---- Thanh đầu trang (11/10): logo đúng TÂM trang, thẳng hàng menu bên dưới ----
   Trước: logo căn giữa trong phần còn lại sau cụm nút phải → lệch trái ~nửa bề rộng cụm nút (~100px).
   Từ 768px: cụm nút ([data-tn-hact]) đặt tuyệt đối sát phải, logo chiếm trọn hàng. Dưới 768px giữ cách xếp cũ (tránh logo đè nút). */
@media (min-width: 768px) {
  [data-tn-hrow] { position: relative; }
  [data-tn-hrow] > [data-tn-hact] { position: absolute; top: 50%; right: clamp(18px, 4vw, 44px); transform: translateY(-50%); }
}