/* ═══════════════════════════════════════════════════════════════
   TRANG CHỦ v3 — concept "Bảng giá niêm yết"
   Bảng giá in cổ điển: tên — chấm dẫn — giá. Classical tokens
   (css/tbq/tokens.css). Prefix `hp-`.

   Chuyển động "mực & nét kẻ":
     phản hồi thao tác  var(--dur-fast)   150ms
     chuyển trạng thái  var(--dur-base)   250ms
     vào cảnh           450–900ms
   Hai điểm nhấn duy nhất: bảng giá (đổi tab bằng View Transitions)
   và đường nối các bước vẽ theo cuộn trang.
   ═══════════════════════════════════════════════════════════════ */

/* style.css có `#homePage section { max-width; padding }` (1,0,1) — thắng nó để
   các dải tối tràn hết chiều ngang. */
#homePage section[class*="hp-"] {
    --hp-y: clamp(56px, 7vw, 96px); /* nhịp dọc trang chủ — gọn hơn --section-y (tối đa 128px) */
    max-width: none;
    margin: 0;
    padding: var(--hp-y) 0;
}

.hp-wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* Dải "Xem tiếp" (catalog-plus.js) nằm ngay trên bảng giá: thoát quy tắc padding
   cũ của #homePage section và nối liền với bảng giá */
#homePage section.cp-recent--home {
    width: min(100% - 2 * var(--gutter), var(--container));
    max-width: none;
    margin: 0 auto;
    padding: var(--space-12) 0 0;
}
#homePage section.cp-recent--home + section.hp-board { padding-top: var(--space-12); }
.hp-ico { width: 18px; height: 18px; flex: none; }

/* style.css đặt `img { display: inline-block }` → đè [hidden] */
#homePage img[hidden], #homePage .hp-mono[hidden] { display: none; }

/* Đầu mục dùng chung */
.hp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-10);
    margin-bottom: var(--space-8);
}
.hp-head .tbq-title { margin-top: var(--space-2); }
.hp-head-note { max-width: 38ch; margin: 0; }

/* Chấm dẫn giữa tên và giá */
.hp-leader {
    align-self: center;
    min-width: var(--space-6);
    height: 0;
    border-bottom: 1px dotted var(--border-strong);
    transition: border-color var(--dur-fast) var(--ease);
}

/* ─────────────────────────── ① HERO ─────────────────────────── */

#homePage section.hp-hero {
    padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 8vw, 112px);
    overflow: hidden;
}
.hp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: end;
}
.hp-hero-title {
    margin: var(--space-6) 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    font-size: clamp(40px, 6.2vw, 80px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--ink);
}
/* Chữ hiện theo dòng. padding/margin trên bù cho dấu tiếng Việt (ẫ, ỗ, ặ)
   để overflow:hidden không cắt mất dấu. */
.hp-line { display: block; overflow: hidden; padding: 0.14em 0 0.06em; margin-top: -0.14em; }
.hp-line > span { display: inline-block; animation: hp-line-up 900ms var(--ease) calc(var(--d) * 90ms + 80ms) both; }

.hp-rule {
    width: var(--space-24);
    height: 0;
    margin: var(--space-8) 0;
    border: 0;
    border-top: var(--hairline) solid var(--accent-line);
    transform-origin: left;
    animation: hp-draw 800ms var(--ease) 420ms both;
}
.hp-rise { animation: hp-rise 700ms var(--ease) calc(var(--d) * 90ms + 80ms) both; }
.hp-hero-cta { margin-top: var(--space-10); }

/* Trích bảng giá */
.hp-excerpt {
    padding: var(--space-6) var(--space-8) var(--space-5);
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
}
.hp-excerpt-list { list-style: none; margin: var(--space-3) 0 var(--space-4); padding: 0; }
.hp-ex-row {
    display: grid;
    grid-template-columns: auto minmax(var(--space-6), 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    min-height: 48px;
    border-bottom: var(--hairline) solid var(--border);
    color: var(--ink);
    text-decoration: none;
}
.hp-excerpt-list li:last-child .hp-ex-row { border-bottom: 0; }
.hp-ex-name { font: var(--weight-medium) 20px/1.2 var(--font-display); transition: color var(--dur-fast) var(--ease); }
.hp-ex-price { font-size: var(--text-md); color: var(--accent-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-ex-price small, .hp-price small { font-size: var(--text-xs); color: var(--ink-3); margin-right: 2px; }
.hp-ex-row:hover .hp-ex-name { color: var(--accent-text); }
.hp-ex-row:hover .hp-leader { border-bottom-color: var(--accent-line); }
.hp-excerpt-note { margin: 0; }

/* ─────────────────────────── DẢI DỊCH VỤ CHỦ ĐẠO ─────────────── */
/*
 * Băng trượt ngang (dùng chung .hp-marquee bên dưới) chỉ gồm dịch vụ chủ đạo.
 * - Logo trong mỗi ô tự lật quay quanh trục dọc, lệch nhịp theo --i (không quay
 *   cùng lúc cho đỡ rối), phần lớn thời gian đứng yên để còn đọc được.
 * - Rê chuột: băng dừng, home-v3.js (bindDock) đặt `scale`/`translate` cho từng ô
 *   → phóng to kiểu Dock của Apple. Chỉ ô, không đụng `transform` của băng.
 * - padding-block chừa chỗ cho ô phóng to không bị mask/overflow cắt mất.
 */

.hp-dock {
    --gap: var(--space-4);
    margin-top: clamp(40px, 6vw, 80px);
    padding-block: var(--space-5);
}
.hp-tile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 220px;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
    color: var(--ink);
    text-decoration: none;
    background: var(--surface);
    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),
        scale 180ms var(--ease), translate 180ms var(--ease);
}
.hp-tile .hp-logo {
    background: var(--palette-paper);
    border-color: transparent;
    animation: hp-logo-flip 7s var(--ease) infinite;
    animation-delay: calc(var(--i, 0) * 0.85s);
}
.hp-tile-text { display: grid; gap: 2px; white-space: nowrap; }
.hp-tile-name { font: var(--weight-medium) 18px/1.2 var(--font-display); }
.hp-tile-price { font-size: var(--text-sm); color: var(--accent-text); font-variant-numeric: tabular-nums; }
.hp-tile:hover { color: var(--ink); border-color: var(--accent-line); background: var(--wash); z-index: 1; position: relative; }
.hp-tile:hover .hp-logo { animation: hp-logo-spin 1.2s linear infinite; }
.hp-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Không có Dock (cảm ứng, bàn phím): nhấc nhẹ như trước */
.hp-dock:not(.is-magnifying) .hp-tile:hover { translate: 0 -3px; }

/* Lật 1 vòng trong ~15% chu kỳ, còn lại đứng yên */
@keyframes hp-logo-flip {
    0%, 85% { transform: perspective(240px) rotateY(0); }
    100%    { transform: perspective(240px) rotateY(360deg); }
}
@keyframes hp-logo-spin { to { transform: perspective(240px) rotateY(360deg); } }

/* ─────────────────────────── BĂNG TRƯỢT (ảnh phản hồi) ──────── */
/* 2 bản nội dung nối liền (.hp-set × 2), trượt đúng −50% → vòng lặp không đường nối.
   padding-right = gap để khoảng cách ở chỗ nối bằng khoảng cách giữa các ô. */

.hp-marquee {
    --gap: var(--space-4);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.hp-marquee-track { display: flex; width: max-content; animation: hp-marquee var(--dur, 60s) linear infinite; }
.hp-marquee[data-dir="right"] .hp-marquee-track { animation-direction: reverse; }
/* Dừng để đọc/bấm: rê chuột, focus bàn phím */
.hp-marquee:hover .hp-marquee-track,
.hp-marquee:focus-within .hp-marquee-track { animation-play-state: paused; }
.hp-set { display: flex; gap: var(--gap); margin: 0; padding: 0 var(--gap) 0 0; list-style: none; }
@keyframes hp-marquee { to { transform: translateX(-50%); } }

/* Ảnh tin nhắn: băng chậm; bỏ lưới cuộn ngang cũ khi đã thành băng trượt */
.hp-marquee--shots { --gap: var(--space-5); padding: var(--space-2) 0 var(--space-3); }
.hp-marquee--shots .hp-shots { display: flex; overflow: visible; scroll-snap-type: none; padding: 0 var(--gap) 0 0; }
.hp-marquee--shots .hp-shots li { flex: none; width: clamp(180px, 21vw, 240px); }

/* ─────────────────────────── ② SỐ LIỆU ─────────────────────── */

#homePage section.hp-facts { padding: var(--space-12) 0; border-bottom: var(--hairline) solid var(--border); }
.hp-facts-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin: 0 auto; }
.hp-fact { padding-left: var(--space-5); border-left: var(--hairline) solid var(--border); }
.hp-fact dt {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--ink-2);
}
.hp-fact dd {
    margin: var(--space-2) 0 0;
    font: var(--weight-regular) clamp(30px, 3.4vw, 44px)/1 var(--font-display);
    color: var(--accent-text);
    font-variant-numeric: lining-nums tabular-nums;
}

/* ─────────────────────────── ③ BẢNG GIÁ ────────────────────── */

/* Nút "Xem bảng giá" cuộn tới đây — chừa chỗ cho header dính (64px) */
#bang-gia { scroll-margin-top: calc(var(--header-h) - var(--space-8)); }

.hp-tabs {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: var(--hairline) solid var(--border);
    scroll-snap-type: x proximity;
}
.hp-tabs::-webkit-scrollbar { display: none; }
.hp-tab {
    position: relative;
    flex: none;
    min-height: 44px;
    padding: 0 var(--space-4);
    font: var(--text-md)/1 var(--font-body);
    color: var(--ink-2);
    background: none;
    border: 0;
    scroll-snap-align: start;
    transition: color var(--dur-fast) var(--ease);
}
.hp-tab::after {
    content: "";
    position: absolute;
    inset: auto var(--space-4) -1px;
    height: 2px;
    background: var(--accent-line);
    transform: scaleX(0);
    transition: transform var(--dur-base) var(--ease);
}
.hp-tab:hover { color: var(--ink); }
.hp-tab[aria-selected="true"] { color: var(--ink); }
.hp-tab[aria-selected="true"]::after { transform: scaleX(1); }
.hp-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-line); border-radius: var(--radius); }
.hp-tab-count { margin-left: 6px; font-size: var(--text-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

.hp-board-panel:focus { outline: none; }
.hp-price-list { list-style: none; margin: 0; padding: 0; }

.hp-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 44ch) minmax(var(--space-8), 1fr) auto 18px;
    gap: var(--space-5);
    align-items: center;
    min-height: 76px;
    padding: var(--space-3) var(--space-3);
    border-bottom: var(--hairline) solid var(--border);
    color: var(--ink);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease);
}
.hp-row:hover { background: color-mix(in srgb, var(--accent-line) 6%, transparent); color: var(--ink); }
.hp-row:hover .hp-leader { border-bottom-color: var(--accent-line); }
.hp-row:hover .hp-row-name { color: var(--accent-text); }
.hp-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-line); }
.hp-row:active { background: color-mix(in srgb, var(--accent-line) 12%, transparent); }

/* 64×40: đủ rộng cho logo chữ ngang (Claude, Netflix, Adobe) — ô vuông 40px
   thu chúng thành một chấm */
.hp-logo {
    display: grid;
    place-items: center;
    width: 64px;
    height: 40px;
    padding: 4px 6px;
    overflow: hidden;
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
}
/* Chiều cao cố định = 40 − 2×4 padding − 2×1 viền. `height:100%` không ăn trong
   ô grid auto → logo vuông cao 42px và bị cắt đáy. */
.hp-logo img { width: 100%; height: 30px; object-fit: contain; display: block; }
.hp-mono { font: var(--weight-medium) 20px/1 var(--font-display); color: var(--accent-text); }

.hp-row-main { display: grid; gap: 2px; min-width: 0; }
.hp-row-name { font: var(--weight-medium) 22px/1.2 var(--font-display); transition: color var(--dur-fast) var(--ease); }
.hp-row-tag { font-size: var(--text-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hp-price {
    display: grid;
    justify-items: end;
    font-size: var(--text-lg);
    color: var(--ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hp-price-main { white-space: nowrap; }
.hp-plans { display: block; margin: 2px 0 0; font-size: var(--text-xs); color: var(--ink-3); }
.hp-price--off { font-size: var(--text-md); color: var(--ink-3); }
.hp-row-go { color: var(--ink-3); transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.hp-row:hover .hp-row-go { color: var(--accent-text); transform: translateX(4px); }

/* Đổi tab: View Transitions (tên chỉ gắn trong lúc đổi, xem home-v3.js) … */
.hp-price-list.hp-vt .hp-row { view-transition-name: var(--vtn); }
/* … hoặc stagger nhẹ khi trình duyệt không hỗ trợ */
.hp-price-list.hp-enter li { animation: hp-rise 450ms var(--ease) calc(var(--i) * 35ms) both; }

.hp-board-all { margin-top: var(--space-6); }

/* ─────────────────────────── ④ QUY TRÌNH ───────────────────── */

.hp-steps-list {
    --dot: 44px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-10);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}
/* Đường nối: nét mảnh làm nền + nét vàng vẽ theo cuộn (scroll-driven) */
.hp-steps-list::before,
.hp-steps-list::after {
    content: "";
    position: absolute;
    top: calc(var(--dot) / 2);
    left: calc(var(--dot) / 2);
    right: calc((100% - 2 * var(--space-10)) / 3 - var(--dot) / 2);
    height: 1px;
    background: var(--border);
}
.hp-steps-list::after { background: var(--accent-line); transform-origin: left; }
@supports (animation-timeline: view()) {
    .hp-steps-list::after {
        animation: hp-draw linear both;
        animation-timeline: view();
        animation-range: entry 30% cover 55%;
    }
}
.hp-step { position: relative; counter-increment: step; }
.hp-step::before {
    content: counter(step, decimal-leading-zero);
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--dot);
    height: var(--dot);
    font: var(--weight-regular) 18px/1 var(--font-display);
    color: var(--accent-text);
    background: var(--bg);
    border: var(--hairline) solid var(--accent-line);
    border-radius: var(--radius-round);
}
.hp-step h3 { margin: var(--space-5) 0 var(--space-2); }
.hp-step p { margin: 0; max-width: 34ch; color: var(--ink-2); font-size: var(--text-md); line-height: var(--leading-body); }

/* ─────────────────────────── ⑤ PHẢN HỒI ────────────────────── */

.hp-shots {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(180px, 21vw, 240px);
    gap: var(--space-5);
    overflow-x: auto;
    list-style: none;
    margin: 0;
    padding: var(--space-1) var(--space-1) var(--space-4);
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.hp-shots li { scroll-snap-align: start; }
.hp-shot {
    display: block;
    width: 100%;
    padding: 0;
    aspect-ratio: 5 / 8;
    overflow: hidden;
    background: var(--surface);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius);
    cursor: zoom-in;
    transition: transform var(--dur-base) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hp-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hp-shot:hover { transform: translateY(-4px); border-color: var(--accent-line); }
.hp-shot:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.hp-lightbox {
    width: min(92vw, 560px);
    max-height: 94vh;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease),
        overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete;
}
@starting-style { .hp-lightbox[open] { opacity: 0; transform: scale(.97); } }
.hp-lightbox::backdrop { background: color-mix(in srgb, var(--palette-colophon) 86%, transparent); }
.hp-lightbox-fig { margin: 0; display: grid; gap: var(--space-2); justify-items: center; }
.hp-lightbox-fig img { max-width: 100%; max-height: 86vh; object-fit: contain; border-radius: var(--radius); }
.hp-lightbox-fig figcaption { color: var(--palette-paper); }
.hp-lb-btn {
    position: fixed;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--palette-ink);
    background: var(--palette-paper);
    border: 0;
    border-radius: var(--radius-round);
    transition: transform var(--dur-fast) var(--ease);
}
.hp-lb-btn:hover { transform: scale(1.06); }
.hp-lb-btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 3px; }
.hp-lb-close { top: var(--space-4); right: var(--space-4); }
.hp-lb-prev { left: var(--space-4); top: 50%; translate: 0 -50%; }
.hp-lb-next { right: var(--space-4); top: 50%; translate: 0 -50%; }

/* ─────────────────────────── ⑥ FAQ ─────────────────────────── */

.hp-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--space-16); align-items: start; }
.hp-faq-head { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
.hp-faq-head .tbq-title { margin: var(--space-2) 0 var(--space-3); }
.hp-faq-list { border-top: var(--hairline) solid var(--border); }
.hp-qa { border-bottom: var(--hairline) solid var(--border); interpolate-size: allow-keywords; }
.hp-qa summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 64px;
    padding: var(--space-3) 0;
    font: var(--weight-medium) 21px/1.3 var(--font-display);
    color: var(--ink);
    list-style: none;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease);
}
.hp-qa summary::-webkit-details-marker { display: none; }
.hp-qa summary:hover { color: var(--accent-text); }
.hp-qa summary:focus-visible { outline: none; box-shadow: inset 0 -2px 0 var(--accent-line); }
.hp-qa summary .hp-ico { color: var(--accent-text); transition: transform var(--dur-base) var(--ease); }
.hp-qa[open] summary .hp-ico { transform: rotate(45deg); }
.hp-qa-body p { margin: 0 0 var(--space-5); max-width: 62ch; color: var(--ink-2); line-height: var(--leading-body); }
/* Mở/đóng mượt khi có ::details-content; trình duyệt cũ mở ngay (vẫn dùng được) */
.hp-qa::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur-base) var(--ease), content-visibility var(--dur-base) allow-discrete;
}
.hp-qa[open]::details-content { block-size: auto; }

/* ─────────────────────────── ⑦ KẾT ─────────────────────────── */

/* Thẳng mép trái với lưới các section khác; chỉ giới hạn độ dài dòng chữ */
.hp-close-title, .hp-close .tbq-lead { max-width: 760px; }
.hp-close .hp-rule { animation: none; margin-top: 0; }
.hp-close-title {
    margin: 0 0 var(--space-4);
    font: var(--weight-regular) clamp(32px, 4.4vw, 54px)/1.08 var(--font-display);
    letter-spacing: -0.015em;
    color: var(--ink);
    text-wrap: balance;
}
.hp-close-cta { margin-top: var(--space-8); }
.hp-copy .hp-copy-done { display: none; }
.hp-copy.is-done { color: var(--accent-text); border-color: var(--accent-line); }
.hp-copy.is-done .hp-copy-idle { display: none; }
.hp-copy.is-done .hp-copy-done { display: block; animation: hp-pop var(--dur-base) var(--ease); }
.hp-copy-status { min-height: 1.4em; margin: var(--space-3) 0 0; }

/* ─────────────────────────── Keyframes ─────────────────────── */

@keyframes hp-line-up { from { transform: translateY(105%); } }
@keyframes hp-rise    { from { opacity: 0; transform: translateY(12px); } }
@keyframes hp-draw    { from { transform: scaleX(0); } }
@keyframes hp-pop     { from { transform: scale(.6); opacity: 0; } }

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

@media (max-width: 1024px) {
    .hp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: start; }
    .hp-excerpt { max-width: 560px; }
    .hp-faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .hp-faq-head { position: static; }
}

@media (max-width: 480px) {
    /* Nút CTA rộng hết hàng: cùng độ rộng, dễ bấm bằng ngón cái */
    .hp-hero-cta .tbq-btn, .hp-close-cta .tbq-btn { width: 100%; }
}

@media (max-width: 768px) {
    .hp-facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }

    .hp-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--space-3); padding-inline: 0; }
    .hp-logo { width: 56px; }
    .hp-row .hp-leader, .hp-row-go { display: none; }
    .hp-row-name { font-size: 20px; }

    /* Quy trình: dọc, đường nối bên trái */
    .hp-steps-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .hp-steps-list::before, .hp-steps-list::after {
        top: calc(var(--dot) / 2);
        bottom: calc(var(--dot) / 2);
        left: calc(var(--dot) / 2);
        right: auto;
        width: 1px;
        height: auto;
        transform-origin: top;
    }
    @supports (animation-timeline: view()) {
        .hp-steps-list::after { animation-name: hp-draw-y; animation-range: entry 10% cover 60%; }
    }
    .hp-step { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: var(--space-4); }
    .hp-step::before { grid-row: span 2; }
    .hp-step h3 { margin-top: 10px; }

    .hp-shots { grid-auto-columns: 62%; }
    .hp-lb-prev, .hp-lb-next { top: auto; bottom: var(--space-4); translate: none; }
    .hp-lb-prev { left: calc(50% - 52px); }
    .hp-lb-next { right: calc(50% - 52px); }
}
@keyframes hp-draw-y { from { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
    /* Băng trượt → dải vuốt tay; bỏ bản sao */
    .hp-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .hp-marquee-track { animation: none; }
    .hp-marquee-track > [aria-hidden="true"] { display: none; }
    .hp-tile .hp-logo, .hp-tile:hover .hp-logo { animation: none; }
    .hp-tile { transition: none; }
    .hp-line > span, .hp-rise, .hp-rule, .hp-price-list.hp-enter li, .hp-copy.is-done .hp-copy-done { animation: none; }
    .hp-steps-list::after { animation: none; transform: none; }
    .hp-shot:hover, .hp-row:hover .hp-row-go { transform: none; }
    .hp-qa::details-content { transition: none; }
}