/* ═══════════════════════════════════════════════════════════════
   TRANG "ĐỐI TÁC" (#partners) — prefix `pt-`
   Cùng khuôn trang "Về chúng mình": dùng lại token (css/tbq/), khối chung
   của trang chủ v3 (.hp-wrap, .hp-head, .hp-line, .hp-rule…) và của
   about.css (.ab-photo, .ab-checks, .ab-paths, .ab-next, chuyển động
   .ab-motion). File này chỉ thêm phần riêng. js/partners.js vẽ quán.
   ═══════════════════════════════════════════════════════════════ */

/* Công tắc ẩn/hiện cả trang: partners.js (PUBLIC = true) gắn <html class="partners-on">.
   Chưa bật thì mọi lối vào [data-partners] (menu, chân trang, đoạn "từ quán" ở #about…) ẩn ngay từ đầu, không nháy. */
html:not(.partners-on) [data-partners] { display: none !important; }
/* Nấc thứ hai: đã hợp tác thật chưa (partners.js LIVE = true gắn <html class="partners-live">).
   [data-partners-live] = câu nói đã có quán đối tác / công cụ tại quán — ẩn tới khi LIVE.
   [data-partners-soon] = bản "Coming soon" thay cho câu đó — ẩn khi LIVE. */
html:not(.partners-live) [data-partners-live] { display: none !important; }
html.partners-live [data-partners-soon] { display: none !important; }

#partnersPage section {
    padding: clamp(56px, 7vw, 96px) 0;
}
#partnersPage section + section:not([data-surface]) { border-top: var(--hairline) solid var(--border); }

.pt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ① Mở đầu: chữ + ảnh lớn */
#partnersPage section.pt-hero { padding: clamp(56px, 7vw, 104px) 0; overflow: hidden; }
.pt-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: center;
}
.pt-hero-title { margin-top: var(--space-6); }
.pt-hero .tbq-lead { max-width: 46ch; }
.pt-hero-cta { margin-top: var(--space-8); }
.pt-hero-photo { aspect-ratio: 4 / 4.6; max-height: 540px; }
.pt-hero-media .ab-hero-side { aspect-ratio: 4 / 5; width: 36%; }

/* ② Thẻ đối tác — "Bamos ✕ TBQ Space · COLLAB"
   Nguyên lý: thẻ duy nhất có sân khấu tối (hiệu ứng Von Restorff — khác biệt thì được nhớ);
   bên phải chỉ 1 hành động chính "Chỉ đường" (luật Hick), link phụ thu thành icon. */
.pt-cards { display: grid; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.pt-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    overflow: hidden;
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
}
.pt-stage {
    position: relative;
    display: grid;
    place-content: center;
    gap: var(--space-5);
    padding: var(--space-10) var(--space-8);
    background: var(--bg);
    overflow: hidden;
    isolation: isolate;
}
/* Quầng sáng 2 màu (màu quán + vàng TBQ) — đứng yên khi tĩnh, trôi chậm / theo chuột khi có chuyển động */
.pt-stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -30%;
    background:
        radial-gradient(closest-side at var(--gx, 30%) var(--gy, 45%), rgb(98 184 204 / .20), transparent 70%),
        radial-gradient(closest-side at calc(100% - var(--gx, 30%)) calc(100% - var(--gy, 45%)), rgb(212 176 106 / .18), transparent 70%);
    pointer-events: none;
}
/* Ảnh thật của quán phía sau logo: phủ nền tối dày để chữ, logo vẫn đọc rõ (đây vẫn là sân khấu tối) */
.pt-stage-photo {
    position: absolute;
    z-index: -3;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.85);
}
.pt-stage.has-photo::after {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 74%, transparent), color-mix(in srgb, var(--bg) 88%, transparent));
    pointer-events: none;
}
.pt-stage { grid-template-columns: minmax(0, 560px); justify-content: center; align-content: center; gap: var(--space-8); }
/* Lockup "quán ✕ TBQ": lưới 3 cột (2 bên bằng nhau, ✕ ở giữa) → ✕ và chữ COLLAB luôn ở đúng tâm;
   ô logo 2 bên cao bằng nhau (--mark-h) → 2 chú thích thẳng hàng dù logo dài/ngắn khác nhau */
.pt-collab {
    --mark-h: clamp(80px, 8.5vw, 112px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(8px, 2vw, 28px);
}
.pt-cb-side { display: grid; grid-template-rows: var(--mark-h) auto; justify-items: center; row-gap: var(--space-4); min-width: 0; margin: 0; }
.pt-cb-mark { display: grid; place-items: center; width: 100%; height: var(--mark-h); }
.pt-cb-side figcaption { font-size: var(--text-sm); letter-spacing: 0.06em; color: var(--ink-2); text-align: center; line-height: 1.4; white-space: nowrap; }
.pt-cb-side figcaption b { display: block; margin-bottom: 2px; font: var(--weight-regular) clamp(19px, 1.8vw, 23px)/1.2 var(--font-display); letter-spacing: 0; color: var(--ink); }
.pt-cb-cafe img { display: block; width: 100%; max-width: 230px; height: auto; max-height: var(--mark-h); object-fit: contain; }
.pt-cb-cafe .pt-mono { width: var(--mark-h); height: var(--mark-h); font-size: calc(var(--mark-h) * .45); }
.pt-cb-x { width: calc(var(--mark-h) * .8); height: var(--mark-h); flex: none; overflow: visible; }
.pt-cb-bean path { stroke: var(--bg); stroke-width: 1.6; stroke-linecap: round; }
.pt-cb-tag { width: auto; height: calc(var(--mark-h) * .95); overflow: visible; }
.pt-tag-string { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.pt-tag-body { fill: var(--accent-line); }
.pt-tag-t { fill: var(--bg); }
.pt-tag-swing { transform-origin: 20px 6px; transform-box: view-box; }
/* "— COLLAB —": 2 vạch ngắn 2 bên; span bù khoảng letter-spacing sau chữ cuối để chữ đúng tâm */
.pt-cb-word {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin: 0;
    font: var(--weight-regular) 15px/1 var(--font-display);
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--accent-line);
}
.pt-cb-word span { margin-right: -0.5em; }
.pt-cb-word::before, .pt-cb-word::after { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .55; }

.pt-mono {
    display: grid;
    place-items: center;
    width: 120px;
    height: 120px;
    font: var(--weight-regular) 56px/1 var(--font-display);
    color: var(--accent-text);
    border: var(--hairline) solid var(--accent-line);
    border-radius: var(--radius-round);
}
.pt-mono[hidden], .pt-stage img[hidden] { display: none; }

.pt-body { padding: clamp(24px, 3vw, 40px); align-self: center; }
/* Thẻ đối tác: chữ lớn hơn thẻ gợi ý 1 bậc trên thang chữ (đây là thẻ chính của trang) */
.pt-feature-card .pt-body { padding: clamp(28px, 3.6vw, 52px); }
.pt-feature-card .pt-name { font-size: clamp(30px, 3vw, 40px); margin-bottom: var(--space-3); }
.pt-feature-card .pt-about { font-size: var(--text-lg); }
.pt-feature-card .pt-perks { margin-top: var(--space-4); font-size: var(--text-md); }
.pt-feature-card .pt-tools { font-size: var(--text-base); }
.pt-area { margin: 0; }
.pt-name {
    margin: var(--space-1) 0 var(--space-2);
    font-family: var(--font-display);
    font-size: clamp(26px, 2.4vw, 32px);
    font-weight: var(--weight-regular);
}
.pt-about { margin: 0; max-width: 54ch; color: var(--ink-2); line-height: var(--leading-body); }
/* Tiện ích: 1 dòng chữ ngăn bằng chấm vàng — gọn hơn chip, đọc lướt được (giảm tải nhận thức) */
.pt-perks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) 0;
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    color: var(--ink-2);
}
.pt-perks li + li::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 10px 2px;
    vertical-align: middle;
    background: var(--accent-line);
    border-radius: var(--radius-round);
}
.pt-tools {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin: var(--space-5) 0 0;
    font-size: var(--text-md);
    color: var(--accent-text);
    line-height: 1.45;
}
.pt-pulse {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: var(--radius-round);
}
/* Hành động: 1 nút chữ + nút icon vuông, luôn 1 hàng */
.pt-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-6); }
.pt-go { gap: var(--space-2); }
.pt-go-arrow { transition: transform var(--dur-fast) var(--ease); }
.pt-go:hover .pt-go-arrow { transform: translateX(3px); }
.pt-icon-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--ink-2);
    border: var(--hairline) solid var(--border-strong);
    border-radius: var(--radius);
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.pt-icon-btn .hp-ico { width: 20px; height: 20px; }
.pt-icon-btn:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
.pt-icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Chuyển động thẻ đối tác (chỉ khi partners.js gắn .ab-motion) ── */
.ab-motion .pt-feature-card { transition: transform 500ms var(--ease), box-shadow 500ms var(--ease), border-color 500ms var(--ease); }
.ab-motion .pt-feature-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgb(0 0 0 / .45); border-color: var(--accent-line); }
.ab-motion .pt-stage::before { animation: pt-drift 14s ease-in-out infinite alternate; transition: background-position 600ms var(--ease); }
.ab-motion .pt-feature-card.is-lit .pt-stage::before { animation: none; }
@keyframes pt-drift { to { translate: 12% -10%; } }

/* Vào cảnh: 2 bên trượt vào giữa, ✕ xoay vào, hạt cà phê bật, chữ COLLAB khép lại */
.ab-motion .pt-feature-card .pt-cb-cafe { opacity: 0; transform: translateX(-28px); }
.ab-motion .pt-feature-card .pt-cb-tbq  { opacity: 0; transform: translateX(28px); }
.ab-motion .pt-feature-card .pt-cb-arms { transform: rotate(-135deg) scale(.3); opacity: 0; transform-box: fill-box; transform-origin: center; }
.ab-motion .pt-feature-card .pt-cb-bean { transform: scale(0); transform-box: fill-box; transform-origin: center; }
.ab-motion .pt-feature-card .pt-cb-word { opacity: 0; letter-spacing: 0.9em; }
.ab-motion .pt-feature-card.is-in .pt-cb-side { opacity: 1; transform: none; transition: opacity 700ms var(--ease) 250ms, transform 900ms var(--ease) 250ms; }
.ab-motion .pt-feature-card.is-in .pt-cb-arms {
    opacity: 1;
    transform: none;
    transition: opacity 400ms var(--ease) 450ms, transform 1100ms cubic-bezier(.2, 1.5, .4, 1) 450ms;
}
.ab-motion .pt-feature-card.is-in .pt-cb-bean { transform: none; transition: transform 600ms cubic-bezier(.3, 1.8, .5, 1) 1100ms; }
.ab-motion .pt-feature-card.is-in .pt-cb-word { opacity: 1; letter-spacing: 0.5em; transition: opacity 900ms var(--ease) 900ms, letter-spacing 1200ms var(--ease) 900ms; }
/* Sống: ✕ thở nhẹ, thẻ treo đung đưa; rê chuột thì ✕ xoay nửa vòng */
.ab-motion .pt-feature-card.is-in .pt-cb-x { animation: pt-breathe 6s ease-in-out 2.2s infinite; }
.ab-motion .pt-feature-card.is-in .pt-tag-swing { animation: pt-swing 5s ease-in-out 1.6s infinite; }
.ab-motion .pt-feature-card:hover .pt-cb-x { animation: none; transform: rotate(90deg); transition: transform 700ms var(--ease); }
@keyframes pt-breathe { 50% { transform: rotate(8deg) scale(1.05); } }
@keyframes pt-swing { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(5deg); } 65% { transform: rotate(-3deg); } }
/* Chấm "đang có tại quán" nhịp sáng như đèn trực tuyến */
.ab-motion .pt-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: ab-pulse 2.4s var(--ease) infinite;
}

/* Thẻ "Coming soon" (LIVE = false): thẻ treo TBQ đung đưa giữa sân khấu, chữ lớn bên dưới */
.pt-soon-card .pt-stage { min-height: clamp(320px, 34vw, 440px); }
.pt-soon-mark { display: grid; justify-items: center; gap: var(--space-5); --mark-h: clamp(96px, 9vw, 124px); }
.pt-soon-mark .pt-cb-mark { height: var(--mark-h); }
.pt-soon-word {
    margin: 0;
    font: italic var(--weight-regular) clamp(40px, 4.6vw, 60px)/1 var(--font-display);
    letter-spacing: -0.01em;
    color: var(--accent-text);
    text-shadow: 0 0 28px rgb(255 190 110 / .35);
}
.ab-motion .pt-soon-card .pt-tag-swing { animation: pt-swing 5s ease-in-out 1.2s infinite; }
.ab-motion .pt-soon-card .pt-soon-word { opacity: 0; letter-spacing: .2em; }
.ab-motion .pt-soon-card.is-in .pt-soon-word { opacity: 1; letter-spacing: -0.01em; transition: opacity 900ms var(--ease) 700ms, letter-spacing 1300ms var(--ease) 700ms; }

/* ── Cảnh "quán về đêm" trên sân khấu tối (partners.js: SCENE) ──
   Mượn bộ chuyển động trang O'renchi: dây đèn thả xuống (drop) rồi nhấp nháy (twinkle), quầng đèn thở (pulse),
   lá monstera trượt vào rồi đung đưa (left + sway), ly đá bật ra rồi nhấp nhô (pop + bob), hạt bụi sáng bay lên.
   Không chuyển động: cảnh đứng yên ở trạng thái cuối (không có hạt bụi). Màu lá/đèn lấy từ bảng màu trang O'renchi. */
.pt-scene { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.pt-glow {
    position: absolute;
    top: -26%;
    left: -22%;
    width: 64%;
    aspect-ratio: 1;
    border-radius: var(--radius-round);
    background: radial-gradient(closest-side, rgb(255 180 94 / .42), rgb(255 180 94 / .12) 55%, transparent);
    mix-blend-mode: screen;
}
.pt-lights { position: absolute; top: -2px; left: -3%; width: 106%; height: auto; overflow: visible; }
.pt-wire { fill: none; stroke: #ffcf86; stroke-opacity: .5; stroke-width: 1.2; }
.pt-bulb { fill: #ffcf86; opacity: .8; filter: drop-shadow(0 0 2px rgb(255 190 110 / .9)); }
.pt-leaf {
    position: absolute;
    bottom: -44px;
    left: -30px;
    width: clamp(150px, 34%, 210px);
    overflow: visible;
    rotate: -125deg;
}
.pt-leaf-sway { fill: #2f5e40; transform-box: view-box; transform-origin: 34% 2%; }
.pt-leaf-vein { fill: none; stroke: #000; stroke-opacity: .28; stroke-width: 1.6; }
.pt-leaf-stem { fill: none; stroke: #2f5e40; stroke-width: 3.2; stroke-linecap: round; }
.pt-cup {
    position: absolute;
    right: 7%;
    bottom: 7%;
    width: clamp(34px, 4vw, 46px);
    fill: none;
    stroke: var(--palette-gold-light);
    stroke-width: 3.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .7;
}
.pt-cup-tea { fill: var(--palette-gold-light); fill-opacity: .25; stroke: none; }
.pt-cup circle { stroke-width: 2.4; }
.pt-mote { display: none; }

.ab-motion .pt-mote {
    display: block;
    position: absolute;
    bottom: 6%;
    left: calc(14% + var(--m) * 14%);
    width: 3px;
    height: 3px;
    border-radius: var(--radius-round);
    background: #ffdca6;
    box-shadow: 0 0 6px #ffdca6;
    opacity: 0;
}
/* Vào cảnh (trạng thái chờ) */
.ab-motion .pt-feature-card .pt-glow { opacity: 0; }
.ab-motion .pt-feature-card .pt-lights { opacity: 0; transform: translateY(-28px); }
.ab-motion .pt-feature-card .pt-leaf { opacity: 0; translate: -48px 24px; }
.ab-motion .pt-feature-card .pt-cup { opacity: 0; scale: .4; }
/* Vào cảnh: quầng đèn bật → dây đèn thả xuống (nảy nhẹ) → lá trượt vào → ly bật ra */
.ab-motion .pt-feature-card.is-in .pt-glow { opacity: 1; transition: opacity 1400ms var(--ease) 100ms; animation: pt-glow 5s ease-in-out 1.6s infinite; }
.ab-motion .pt-feature-card.is-in .pt-lights { opacity: 1; transform: none; transition: opacity 500ms var(--ease) 200ms, transform 1000ms cubic-bezier(.3, 1.45, .5, 1) 200ms; }
.ab-motion .pt-feature-card.is-in .pt-leaf { opacity: 1; translate: 0 0; transition: opacity 700ms var(--ease) 500ms, translate 1100ms var(--ease) 500ms; }
.ab-motion .pt-feature-card.is-in .pt-cup { opacity: .7; scale: 1; transition: opacity 400ms var(--ease) 1300ms, scale 700ms cubic-bezier(.3, 1.8, .5, 1) 1300ms; }
/* Sống: bóng đèn sáng lần lượt, lá đung đưa, ly nhấp nhô, bụi sáng bay lên */
.ab-motion .pt-feature-card.is-in .pt-bulb { animation: pt-twinkle 3.2s ease-in-out calc(var(--b) * .38s + 1.2s) infinite; }
.ab-motion .pt-feature-card.is-in .pt-leaf-sway { animation: pt-sway 6s ease-in-out 1.6s infinite; }
.ab-motion .pt-feature-card.is-in .pt-cup { animation: pt-bob 3.6s ease-in-out 2s infinite; }
.ab-motion .pt-feature-card.is-in .pt-mote { animation: pt-mote 9s linear calc(var(--m) * 1.5s + 1s) infinite; }
.ab-motion .pt-feature-card.is-in .pt-mote:nth-child(odd) { animation-duration: 11s; }
/* Rê chuột vào thẻ: bật sáng cả dây đèn */
.ab-motion .pt-feature-card:hover .pt-bulb { animation: none; opacity: 1; filter: drop-shadow(0 0 4px rgb(255 200 120)); transition: opacity 300ms var(--ease), filter 300ms var(--ease); }
@keyframes pt-twinkle { 0%, 100% { opacity: .55; filter: drop-shadow(0 0 1px rgb(255 190 110 / .5)); } 50% { opacity: 1; filter: drop-shadow(0 0 4px rgb(255 200 120)); } }
@keyframes pt-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes pt-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes pt-glow { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .7; scale: 1.08; } }
@keyframes pt-mote { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 70% { opacity: .5; } 100% { opacity: 0; transform: translate(18px, -260px); } }

/* Chữ bên phải lên lần lượt (rise, nhịp 100ms — --k do partners.js gắn); 2 dòng chi nhánh nối đuôi sau cùng */
.ab-motion .pt-feature-card .pt-body > *,
.ab-motion .pt-feature-card .pt-branch-row { opacity: 0; transform: translateY(16px); }
.ab-motion .pt-feature-card.is-in .pt-body > * {
    opacity: 1;
    transform: none;
    transition: opacity 700ms var(--ease) calc(var(--k, 0) * 100ms + 350ms), transform 900ms var(--ease) calc(var(--k, 0) * 100ms + 350ms);
}
.ab-motion .pt-feature-card.is-in .pt-branch-row {
    opacity: 1;
    transform: none;
    transition: opacity 700ms var(--ease) calc(var(--k, 0) * 120ms + 950ms), transform 900ms var(--ease) calc(var(--k, 0) * 120ms + 950ms),
                border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

/* ③ Danh sách quán theo khu vực — mỗi quán 1 ô có ảnh (bấm → khung chi tiết thả xuống ngay dưới nhóm)
   Nguyên lý: nhận diện hơn hồi tưởng (ảnh quán thật > tên chữ), mùi thông tin (giờ mở + tiện ích hiện sẵn trên ô,
   biết quán có hợp mình không trước khi bấm), số thứ tự 01–05 dẫn mắt đi hết danh sách.
   Desktop: tên khu vực cột trái (dính khi cuộn), ô quán + khung chi tiết cột phải. */
#ptCount { font-style: italic; color: var(--accent-text); }
.pt-group {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 64px);
    align-items: start;
    padding: var(--space-10) 0;
    border-top: var(--hairline) solid var(--border);
}
.pt-group:first-child { border-top: 0; padding-top: var(--space-4); }
.pt-group-title {
    grid-row: 1 / span 2;
    position: sticky;
    top: 112px;
    display: grid;
    gap: var(--space-2);
    margin: 0;
    font: var(--weight-regular) clamp(30px, 3.2vw, 44px)/1.05 var(--font-display);
    color: var(--ink);
}
.pt-group-title::before {
    content: "";
    width: 32px;
    height: 2px;
    margin-bottom: var(--space-3);
    background: var(--accent-line);
}
.pt-group-title .tbq-meta { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.pt-group > .pt-tags { grid-column: 2; }
.pt-tags {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.pt-tags > li { display: flex; flex-direction: column; }
.pt-tag {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* giãn bằng ô cao nhất cùng hàng → hàng "Địa chỉ · Đường đi" thẳng nhau (.pt-tile-cta margin-top: auto) */
    width: 100%;
    padding: 0;
    font: inherit;
    text-align: left;
    color: var(--ink);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 450ms var(--ease), box-shadow 450ms var(--ease), border-color var(--dur-fast) var(--ease);
}
.pt-tag:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: 0 22px 40px -26px rgb(0 0 0 / .5); }
.pt-tag:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Đang mở: viền mực dày + gạch vàng đáy ô (hệ thiết kế: vàng là nét, không tô nền) */
.pt-tag[aria-expanded="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); transform: none; }
.pt-tag::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--accent-line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms var(--ease);
}
.pt-tag:hover::after, .pt-tag[aria-expanded="true"]::after { transform: scaleX(1); }

.pt-tile-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wash);
}
.pt-tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease), filter 600ms var(--ease); filter: saturate(.9); }
.pt-tag:hover .pt-tile-media img { transform: scale(1.07); filter: saturate(1.05); }
/* Lớp tối mờ đáy ảnh để số thứ tự/ảnh và thân ô nối nhau mềm */
.pt-tile-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .28), transparent 38%, transparent 70%, rgb(0 0 0 / .18)); pointer-events: none; }
.pt-tile-no {
    position: absolute;
    z-index: 1;
    top: var(--space-3);
    left: var(--space-4);
    font: italic var(--weight-regular) 20px/1 var(--font-display);
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 1px 2px rgb(0 0 0 / .6), 0 0 14px rgb(0 0 0 / .55);
}
/* Quán chưa có ảnh quán tự đăng: ô tối "quán về đêm" — dây đèn + chữ cái đầu lớn (không dùng ảnh không rõ nguồn) */
.pt-tile-media.is-mono { display: grid; place-items: center; background: var(--bg); }
.pt-tile-media.is-mono::after { background: radial-gradient(60% 70% at 50% 60%, rgb(255 180 94 / .2), transparent 70%); }
.pt-tile-media .pt-lights { top: -4px; }
.pt-tile-mono {
    position: relative;
    z-index: 1;
    margin-top: 8%;
    font: italic var(--weight-regular) clamp(72px, 7vw, 96px)/1 var(--font-display);
    color: var(--accent-text);
    text-shadow: 0 0 32px rgb(255 190 110 / .35);
    transition: transform 900ms var(--ease);
}
.pt-tag:hover .pt-tile-mono { transform: scale(1.08) rotate(-4deg); }
.pt-tag:hover .pt-bulb { opacity: 1; filter: drop-shadow(0 0 4px rgb(255 200 120)); }

.pt-tile-body { display: flex; flex-direction: column; flex: 1; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.pt-tile-name {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font: var(--weight-regular) var(--text-xl)/1.2 var(--font-display);
    color: var(--ink);
}
.pt-tile-name .pt-dot { flex: none; transform: translateY(-3px); }
.pt-tag .pt-count { align-self: flex-start; margin: 0; padding: 2px 10px; border: var(--hairline) solid var(--border-strong); border-radius: var(--radius-pill); }
.pt-tile-meta { display: grid; gap: 4px; font-size: var(--text-md); color: var(--ink-2); line-height: 1.45; }
.pt-tile-meta > span { display: flex; align-items: center; gap: 6px; }
.pt-tile-meta .hp-ico { flex: none; width: 15px; height: 15px; color: var(--accent-text); }
.pt-tile-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    border-top: var(--hairline) solid var(--border);
    transition: color var(--dur-fast) var(--ease);
}
.pt-tag:hover .pt-tile-cta, .pt-tag[aria-expanded="true"] .pt-tile-cta { color: var(--ink); }
.pt-caret {
    box-sizing: content-box;
    flex: none;
    width: 14px;
    height: 14px;
    padding: 7px;
    border: var(--hairline) solid var(--border-strong);
    border-radius: var(--radius-round);
    transition: transform var(--dur-base) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pt-tag:hover .pt-caret { transform: translateX(3px); border-color: var(--ink); }
.pt-tag[aria-expanded="true"] .pt-caret { transform: rotate(90deg); color: var(--bg); background: var(--ink); border-color: var(--ink); }

/* Hiện lần lượt khi nhóm cuộn tới (nhóm có data-reveal do partners.js gắn) */
.ab-motion .pt-group[data-reveal] .pt-tags > li { opacity: 0; transform: translateY(24px); }
.ab-motion .pt-group.is-in .pt-tags > li {
    opacity: 1;
    transform: none;
    transition: opacity 700ms var(--ease) calc(var(--t, 0) * 110ms + 150ms), transform 900ms var(--ease) calc(var(--t, 0) * 110ms + 150ms);
}
.ab-motion .pt-group.is-in .pt-bulb { animation: pt-twinkle 3.2s ease-in-out calc(var(--b) * .38s + 1.2s) infinite; }
.ab-motion .pt-group .pt-tag:hover .pt-bulb { animation: none; }

.pt-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: none;
    background: var(--accent-line);
    border-radius: var(--radius-round);
    vertical-align: middle;
}

/* Thẻ chi tiết quán: <dialog> giữa màn hình — partners.js cho khung đi từ ô quán vừa bấm tới đây (và thu về khi đóng) */
.pt-drop {
    width: min(760px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    color: var(--ink);
    background: var(--surface);
    border: var(--hairline) solid var(--accent-line);
    border-radius: var(--radius);
    box-shadow: 0 24px 80px rgb(0 0 0 / .28);
    transform-origin: 0 0;
}
/* Chỉ phủ tối — backdrop-filter: blur làm khung hình đầu nặng tới ~2s trên trang dài này */
.pt-drop::backdrop { background: rgb(20 16 10 / .6); }
/* Trang sau không cuộn theo khi lăn chuột trong thẻ */
html.pt-modal-open { overflow: hidden; }
/* Ô quán "bay lên" thành thẻ → chỗ cũ để trống tới khi thẻ thu về */
.pt-tag.is-lifted { visibility: hidden; }
.pt-drop-card { position: relative; padding: clamp(20px, 3vw, 36px); }
.pt-drop-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding-right: 48px;
}
.pt-drop-head .pt-name { flex-basis: 100%; margin: 0 0 var(--space-3); }
/* Dính góc phải trên khi cuộn trong thẻ dài (float + sticky: khối chứa là cả .pt-drop-card) */
.pt-close {
    position: sticky;
    z-index: 2;
    top: var(--space-3);
    float: right;
    margin: calc(var(--space-3) - clamp(20px, 3vw, 36px)) calc(var(--space-3) - clamp(20px, 3vw, 36px)) 0 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--ink-2);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 0;
    border-radius: var(--radius-round);
    cursor: pointer;
}
.pt-close:hover { color: var(--ink); background: var(--wash); }
.pt-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pt-facts { display: grid; gap: var(--space-2); margin: var(--space-5) 0 0; }
.pt-facts div { display: flex; gap: var(--space-3); align-items: flex-start; }
.pt-facts dt { flex: none; color: var(--accent-text); }
.pt-facts .hp-ico { width: 20px; height: 20px; margin-top: 2px; }
.pt-facts dd { margin: 0; color: var(--ink); line-height: var(--leading-body); }
.pt-note { margin: var(--space-8) 0 0; max-width: 72ch; }

/* ─────────────────────────── Responsive ────────────────────── */

@media (max-width: 1024px) {
    .pt-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
    .pt-hero-media { max-width: 560px; }
}

@media (max-width: 768px) {
    .pt-card { grid-template-columns: minmax(0, 1fr); }
    .pt-stage { padding: var(--space-8) var(--space-5); }
    /* Sân khấu thấp: chừa chỗ cho dây đèn ở trên (bóng đèn xuống tới ~26% bề ngang), lá nhỏ lại để không che chú thích */
    .pt-stage { padding-top: calc(26vw + var(--space-4)); }
    .pt-leaf { width: 96px; bottom: -40px; left: -30px; }
    .pt-cup { right: 5%; bottom: 6%; }
    .pt-hero-photo { aspect-ratio: 4 / 3.4; }
    /* Khu vực: tên trên, ô quán dưới (bỏ cột trái dính) */
    .pt-group { grid-template-columns: minmax(0, 1fr); padding: var(--space-8) 0; }
    .pt-group-title { grid-row: auto; position: static; display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5); font-size: 30px; }
    .pt-group-title::before { display: none; }
    .pt-group > .pt-tags { grid-column: 1; }
    /* Tablet + điện thoại: ô quán nằm ngang 1 cột (ảnh trái, chữ phải) — 5 quán gọn trong vài lần cuộn */
    .pt-tags { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
    .pt-tag { flex-direction: row; }
    .pt-tile-media { flex: none; width: clamp(112px, 26vw, 200px); aspect-ratio: auto; min-height: 132px; }
    .pt-tile-no { top: var(--space-2); left: var(--space-3); font-size: 16px; }
    .pt-tile-mono { font-size: 56px; }
    .pt-tile-body { padding: var(--space-3) var(--space-4); gap: 6px; min-width: 0; }
    .pt-tile-name { font-size: 20px; }
    .pt-tile-meta { font-size: var(--text-sm); }
}

@media (max-width: 480px) {
    .pt-hero-cta .tbq-btn { width: 100%; }
    .pt-go { flex: 1; justify-content: center; }
    .pt-tile-meta > span:nth-child(2) { display: none; }
}
}

@media (prefers-reduced-motion: reduce) {
    .pt-tag, .pt-caret, .pt-icon-btn, .pt-go-arrow { transition: none; }
    .pt-icon-btn:hover { transform: none; }
    /* partners.js không gắn .ab-motion khi giảm chuyển động — đây là lớp chặn thứ hai */
    .ab-motion .pt-feature-card .pt-cb-side, .ab-motion .pt-feature-card .pt-cb-arms,
    .ab-motion .pt-feature-card .pt-cb-bean, .ab-motion .pt-feature-card .pt-cb-word { opacity: 1; transform: none; letter-spacing: 0.5em; transition: none; animation: none; }
    .ab-motion .pt-stage::before, .ab-motion .pt-pulse::after, .ab-motion .pt-cb-x, .ab-motion .pt-tag-swing { animation: none; }
    .ab-motion .pt-soon-card .pt-soon-word { opacity: 1; letter-spacing: -0.01em; transition: none; }
    .ab-motion .pt-feature-card .pt-glow, .ab-motion .pt-feature-card .pt-lights, .ab-motion .pt-feature-card .pt-leaf,
    .ab-motion .pt-feature-card .pt-cup, .ab-motion .pt-feature-card .pt-body > *, .ab-motion .pt-feature-card .pt-branch-row,
    .ab-motion .pt-feature-card .pt-bulb, .ab-motion .pt-feature-card .pt-leaf-sway {
        opacity: 1; transform: none; translate: none; scale: none; transition: none; animation: none;
    }
    .ab-motion .pt-feature-card .pt-cup { opacity: .7; }
    .ab-motion .pt-mote { display: none; }
    .pt-tag:hover, .pt-tag:hover .pt-tile-media img, .pt-tag:hover .pt-tile-mono, .pt-tag:hover .pt-caret { transform: none; }
    .pt-tag, .pt-tag::after, .pt-tile-media img, .pt-tile-mono { transition: none; }
    .ab-motion .pt-group .pt-tags > li { opacity: 1; transform: none; transition: none; }
    .ab-motion .pt-group .pt-bulb { animation: none; }
}

/* ⑤ Câu chào cuối trang */
.pt-signoff {
    margin: var(--space-10) 0 0;
    font: var(--weight-regular) clamp(24px, 3.2vw, 32px)/1.25 var(--font-display);
    color: var(--ink);
    text-align: center;
}

/* ═══ Chi nhánh (quán có branches trong partners.js) ═══════════════
   Nguyên lý:
   • Mùi thông tin: tag ghi sẵn "2 chi nhánh" → bấm vào biết sẽ ra danh sách, không bất ngờ.
   • Luật Hick + chọn theo nhu cầu: chỉ 2 lựa chọn, mỗi thẻ mở bằng "Hợp với…" — khách chọn theo việc
     mình cần (học nhóm / ngồi một mình), không phải dò địa chỉ trước.
   • Nhận diện hơn hồi tưởng: ảnh mặt tiền/sân của chính chi nhánh → tới nơi nhận ra ngay.
   • Thẻ cùng khuôn, đặt cạnh nhau (so sánh song song) — mắt đối chiếu theo hàng, không phải nhớ.
   • Chuẩn mực xã hội: "Khách thường ngồi 1,5–4 tiếng" (Google Maps) gỡ ngại "ngồi lâu có kỳ không".
   • Mỗi chi nhánh đúng 1 nút chính "Chỉ đường" (Fitts: nút to, cuối thẻ, mobile kéo hết ngang). */

/* Tag: số chi nhánh, chữ nhỏ ngăn bằng vạch */
.pt-count {
    padding-left: var(--space-2);
    margin-left: 2px;
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    letter-spacing: 0.02em;
    color: var(--ink-2);
    border-left: var(--hairline) solid var(--border-strong);
}

/* Thẻ lớn: danh sách chi nhánh gọn */
.pt-branch-rows { display: grid; gap: var(--space-3); list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.pt-branch-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3);
    padding-right: var(--space-4);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.pt-branch-row:hover { border-color: var(--border-strong); background: var(--wash); }
.pt-branch-row img { width: 72px; height: 72px; object-fit: cover; border-radius: calc(var(--radius) - 2px); background: var(--wash); }
.pt-branch-row-text { display: grid; gap: 2px; min-width: 0; }
.pt-branch-row-text strong { font: var(--weight-regular) var(--text-xl)/1.2 var(--font-display); color: var(--ink); }
.pt-branch-row-text span { font-size: var(--text-base); color: var(--ink-2); line-height: 1.4; }
.pt-branch-rows + .pt-links { margin-top: var(--space-4); }

/* Khung thả xuống: 2 thẻ chi nhánh cạnh nhau */
.pt-branches {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-5);
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
}
.pt-branch {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.pt-branch:hover { border-color: var(--border-strong); }
.pt-branch:focus { outline: none; }
.pt-branch { scroll-margin-top: 112px; } /* chừa thanh menu dính đầu trang khi cuộn tới */
.pt-branch:focus-visible { box-shadow: var(--focus-ring); }
/* Mở bằng link #partners/<quán>/<chi nhánh>: viền vàng giữ lại để khách biết "đây là chỗ được gửi" */
.pt-branch.is-target { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.pt-branch-media { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wash); }
.pt-branch-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.pt-branch:hover .pt-branch-media img { transform: scale(1.04); }
.pt-branch-media figcaption {
    position: absolute;
    left: var(--space-3);
    top: var(--space-3);
    padding: 4px 10px;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgb(0 0 0 / .55);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(4px);
}
/* Quán đối tác 1 địa điểm: ảnh quán đầu thẻ chi tiết (cùng khuôn 16:10 với ảnh chi nhánh) */
.pt-drop-cover { max-width: 480px; margin-top: var(--space-4); border: var(--hairline) solid var(--border); border-radius: var(--radius); }
.pt-branch-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); }
.pt-branch-name { margin: 0; font: var(--weight-regular) clamp(24px, 2.2vw, 28px)/1.15 var(--font-display); color: var(--ink); }
.pt-branch-fit { margin: var(--space-2) 0 0; font-size: var(--text-base); color: var(--ink); line-height: 1.45; }
.pt-branch-fit span {
    margin-right: 4px;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
}
.pt-branch .pt-facts { margin-top: var(--space-4); }
.pt-branch .pt-facts dd { font-size: var(--text-md); }
.pt-branch .pt-perks { font-size: var(--text-md); }
.pt-branch-stay { margin: var(--space-3) 0 0; }
/* Nút đi luôn nằm đáy thẻ → 2 nút "Chỉ đường" thẳng hàng dù nội dung dài ngắn khác nhau */
.pt-branch .pt-links { margin-top: auto; padding-top: var(--space-5); }
.pt-brand-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: var(--hairline) solid var(--border);
}
.pt-brand-links .pt-links { margin: 0 0 0 auto; }
.pt-feature-card .pt-brand-links { margin-top: var(--space-5); padding-top: var(--space-4); }

/* Thẻ chi nhánh hiện lần lượt khi khung mở (chỉ khi có chuyển động) */
.ab-motion .pt-drop.is-open .pt-branch { animation: pt-branch-in 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 140ms); }
@keyframes pt-branch-in { from { opacity: 0; transform: translateY(10px); } }
.ab-motion .pt-branch.is-target { animation: pt-branch-in 520ms var(--ease) both, pt-target 1.6s var(--ease) 600ms 2; }
@keyframes pt-target { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-line) 35%, transparent); } }

@media (max-width: 480px) {
    /* Lockup hẹp: ô logo thấp lại, ✕ nhỏ lại, chừa khe 2 bên ✕ — không để logo chạm ✕ */
    .pt-collab { --mark-h: 64px; column-gap: 14px; }
    .pt-cb-x { width: calc(var(--mark-h) * .7); }
    .pt-cb-side figcaption { font-size: var(--text-xs); letter-spacing: 0.04em; }
    .pt-cb-side figcaption b { font-size: 18px; }
    .pt-branch-row { grid-template-columns: 56px minmax(0, 1fr); }
    .pt-branch-row img { width: 56px; height: 56px; }
    .pt-branch-row .pt-go { grid-column: 1 / -1; justify-content: center; }
    .pt-branch .pt-go { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .pt-branch, .pt-branch-media img, .pt-branch-row { transition: none; }
    .pt-branch:hover .pt-branch-media img { transform: none; }
}