/*! thenote-hero.css — HERO DÙNG CHUNG cho mọi trang (10/10/2026, ToànQV). Theme PHP: enqueue toàn site, sau thenote-motion.css.
 *  Mọi hero cùng một chiều cao, một bố cục, một hiệu ứng. Trang KHÔNG tự đặt cỡ chữ / khoảng cách / nền cho hero — chỉ gắn các thuộc tính dưới đây.
 *
 *  <section data-tn-hero="list" data-norv>            Kiểu A — trang danh mục (căn giữa, vòng nét đứt xoay chậm)
 *  <section data-tn-hero="item" data-norv>            Kiểu B — một mục: họ hương, vibe, thương hiệu, nhà chế tác, note (chữ trái, ảnh phải)
 *    <div data-tn-hero-in>
 *      <div data-tn-crumb>Trang chủ / …</div>        breadcrumb — luôn nằm trên cùng
 *      <div data-tn-hero-body>                        nội dung, căn giữa theo chiều dọc
 *        (kiểu B: <div data-tn-hero-text> … </div> <div data-tn-visual> … </div>)
 *        <div data-tn-eyebrow>Tên mục</div>          kiểu A: 2 gạch hai bên (tự vẽ) · kiểu B: chấm màu đặt trong <span data-tn-dot>
 *        <h1 data-tn-h1>Từ <em>nhấn</em></h1>
 *        <div data-tn-sub>Tên tiếng Anh</div>         (tuỳ chọn)
 *        <p data-tn-lede>Mô tả ngắn</p>               tối đa 3 dòng
 *        <label data-tn-search>…</label>             (tuỳ chọn) ô tìm
 *        <p data-tn-tags>gỗ · khô · nhựa thơm</p>     (tuỳ chọn, kiểu B) một dòng đặc tính, nghiêng màu nhấn
 *        <div data-tn-chips>…</div>                   (tuỳ chọn) chip — máy tính: xuống dòng, căn giữa · điện thoại: một hàng cuộn ngang
 *        <div data-tn-actions>…</div>                 (tuỳ chọn) nút
 *  Hiệu ứng: các dòng hiện dần lần lượt khi vào trang (1.1s, cách nhau 90ms); vòng nét đứt xoay 120s; ảnh kiểu B lắng nhẹ rồi trôi (9s). Tắt hết khi máy bật "giảm chuyển động".
 *  data-norv: thenote-motion.js không xử lý hero (hero tự có nhịp vào trang ở đây). */
:root {
  --tn-hero-h: clamp(520px, 62vh, 600px);  /* chiều cao chung (máy tính) */
  --tn-hero-w: 820px;                       /* bề rộng chữ kiểu A */
  --tn-hero-pad: clamp(18px, 4vw, 44px);
}
@media (max-width: 760px) { :root { --tn-hero-h: 512px; } }

[data-tn-hero] { position: relative; overflow: hidden; background: #FFFFFF; border-bottom: 1px solid #E1E1E1; min-height: var(--tn-hero-h); display: flex; flex-direction: column; }
[data-tn-hero-in] { position: relative; z-index: 1; flex: 1 1 auto; width: 100%; margin: 0 auto; padding: clamp(20px, 3vw, 32px) var(--tn-hero-pad) clamp(32px, 4vw, 52px); display: flex; flex-direction: column; }
[data-tn-hero="list"] [data-tn-hero-in] { max-width: calc(var(--tn-hero-w) + 2 * var(--tn-hero-pad)); align-items: center; text-align: center; }
[data-tn-hero="item"] [data-tn-hero-in] { max-width: 1320px; }

/* nền chung: vòng nét đứt xoay chậm + quầng màu nhấn rất nhạt */
[data-tn-hero]::before { content: ""; position: absolute; left: 50%; top: -360px; width: 760px; height: 760px; margin-left: -380px; border-radius: 999px; border: 1px dashed #D6D6D6; animation: tnSpin var(--tn-m-ring, 120s) linear infinite; pointer-events: none; }
[data-tn-hero]::after { content: ""; position: absolute; left: 50%; top: -220px; width: 900px; height: 520px; margin-left: -450px; border-radius: 999px; background: radial-gradient(closest-side, color-mix(in srgb, var(--tn-a1d, #7B4B2A) 7%, transparent), transparent); pointer-events: none; }
[data-tn-hero="item"]::before { left: auto; right: -200px; top: -300px; margin-left: 0; }
[data-tn-hero="item"]::after { left: auto; right: -260px; top: -160px; margin-left: 0; }

/* breadcrumb */
[data-tn-crumb] { align-self: stretch; display: flex; flex-wrap: wrap; gap: 8px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #666666; }
[data-tn-hero="list"] [data-tn-crumb] { justify-content: center; }
[data-tn-crumb] a { color: #666666; }
[data-tn-crumb] > span:last-child { color: #16150F; }
[data-tn-crumb] [data-sep] { color: #C5C5C5; }

/* thân hero: căn giữa theo chiều dọc phần còn lại */
[data-tn-hero-body] { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(20px, 3vw, 36px); }
[data-tn-hero="list"] [data-tn-hero-body] { align-items: center; }
[data-tn-hero="item"] [data-tn-hero-body] { flex-direction: row; align-items: center; gap: clamp(36px, 5vw, 80px); }
[data-tn-hero-text] { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
[data-tn-visual] { flex: 0 0 auto; width: min(38%, 350px); position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* chữ */
[data-tn-eyebrow] { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .34em; text-transform: uppercase; color: #666666; margin: 0 0 16px; }
[data-tn-hero="list"] [data-tn-eyebrow]::before, [data-tn-hero="list"] [data-tn-eyebrow]::after { content: ""; width: 24px; height: 1px; background: #C5C5C5; display: block; }
[data-tn-dot] { width: 12px; height: 12px; border-radius: 999px; background: var(--tn-dot, #C5C5C5); box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 5px var(--tn-dot, #C5C5C5); display: block; flex-shrink: 0; }
[data-tn-h1] { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: clamp(40px, 6vw, 80px); line-height: 1.02; letter-spacing: -.01em; margin: 0; color: #16150F; text-wrap: balance; font-variant-numeric: lining-nums; }
[data-tn-h1] em { font-style: italic; color: #7B4B2A; }
[data-tn-tags] { margin: 10px 0 0; max-width: 100%; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: #7B4B2A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-tn-sub] { margin: 10px 0 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.3; color: #515151; }
[data-tn-lede] { margin: 14px 0 0; max-width: 52ch; font-size: clamp(14px, 1.3vw, 16px); line-height: 1.8;   /* ≥1.8: Josefin cần chỗ cho dấu chồng (Ổ, Ẫ) khi bị cắt dòng */ color: #515151; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
[data-tn-search] { width: 100%; max-width: 520px; height: 54px; margin-top: clamp(20px, 2.8vw, 30px); display: flex; align-items: center; gap: 12px; padding: 0 20px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px #D6D6D6, 0 18px 40px -26px rgba(123, 75, 42, .45); }
[data-tn-search-wrap] { width: 100%; max-width: 560px; margin-top: clamp(20px, 2.8vw, 30px); }            /* ô tìm có gợi ý thả xuống */
[data-tn-search-wrap] [data-tn-search] { margin-top: 0; max-width: none; }
[data-tn-search] input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 15px; color: #16150F; }
[data-tn-chips] { margin-top: clamp(16px, 2.2vw, 24px); max-width: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding: 2px; }
[data-tn-hero="list"] [data-tn-chips] { justify-content: center; }
[data-tn-actions] { margin-top: clamp(22px, 3vw, 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
[data-tn-hero="list"] [data-tn-actions] { justify-content: center; }

/* hiệu ứng vào trang (một nhịp cho mọi hero) */
@keyframes tnHeroIn { from { opacity: 0; translate: 0 var(--tn-m-rise, 24px); } to { opacity: 1; translate: 0 0; } }
@keyframes tnHeroVis { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }
[data-tn-crumb], [data-tn-eyebrow], [data-tn-h1], [data-tn-sub], [data-tn-tags], [data-tn-lede], [data-tn-search], [data-tn-chips], [data-tn-actions] { animation: tnHeroIn var(--tn-m-slow, 1.1s) var(--tn-m-ease, cubic-bezier(.22, 1, .36, 1)) both; }
[data-tn-crumb] { animation-name: tnFade; }
[data-tn-eyebrow] { animation-delay: 90ms; }
[data-tn-h1] { animation-delay: 180ms; }
[data-tn-sub], [data-tn-tags] { animation-delay: 240ms; }
[data-tn-lede] { animation-delay: 300ms; }
[data-tn-search] { animation-delay: 390ms; }
[data-tn-chips], [data-tn-actions] { animation-delay: 480ms; }
[data-tn-visual] { animation: tnHeroVis var(--tn-m-image, 1.6s) var(--tn-m-ease, cubic-bezier(.22, 1, .36, 1)) 240ms both; }

/* điện thoại: mọi hero là một cột căn giữa; ảnh kiểu B thu nhỏ lên trên tiêu đề */
@media (max-width: 760px) {
  [data-tn-hero="item"] [data-tn-hero-body] { flex-direction: column-reverse; justify-content: center; gap: 12px; }
  [data-tn-hero="item"] [data-tn-hero-text] { width: 100%; align-items: center; text-align: center; }   /* width: hàng chip một dòng không kéo rộng cột chữ */
  [data-tn-hero="item"] [data-tn-crumb] { justify-content: center; }
  [data-tn-visual] { width: min(36%, 120px); }
  [data-tn-hero="item"] [data-tn-tags] { display: none; }
  [data-tn-chips] { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent); }
  [data-tn-chips]::-webkit-scrollbar { display: none; }
  [data-tn-chips] > * { flex-shrink: 0; }
  [data-tn-visual] > :not(:first-child) { display: none; }
  [data-tn-hero="item"] [data-tn-actions] { justify-content: center; }
  [data-tn-hero="item"]::before { left: 50%; right: auto; margin-left: -380px; }
  [data-tn-hero="item"]::after { left: 50%; right: auto; margin-left: -450px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-tn-hero]::before { animation: none; }
  [data-tn-crumb], [data-tn-eyebrow], [data-tn-h1], [data-tn-sub], [data-tn-tags], [data-tn-lede], [data-tn-search], [data-tn-chips], [data-tn-actions], [data-tn-visual] { animation: none; }
}