/* ==========================================================================
   TRANG CHỦ v2
   --------------------------------------------------------------------------
   Nạp SAU css/style.css và CHỈ ở trang chủ. Muốn quay lại giao diện cũ thì gỡ
   một dòng <link> trong public/index.php — không phải sửa gì trong style.css.

   Hai luật tự đặt khi viết file này:

   1. KHÔNG viết màu cứng. Mọi màu đi qua biến (--accent, --surface, --text...).
      Nhờ vậy theme mùa vẫn chảy qua được: body.trungthu-mode đổi biến là hero
      đổi theo, không phải viết lại một bộ rule riêng cho từng mùa.

   2. KHÔNG hiệu ứng nào bắt đầu ở trạng thái vô hình. Trình duyệt không hỗ trợ
      scroll-timeline, người bật giảm chuyển động, bot đọc trang — đều phải thấy
      đủ nội dung. Cuộn chỉ THÊM chuyển động, không phải điều kiện để hiện ra.
   ========================================================================== */

/* ---------------------------------------------------------------- hero */

/* Hero cũ để một khối nội dung nhỏ giữa khoảng trống 82vh nên trông rỗng. Nội dung
   giờ xếp ngang nên chiếm chỗ hơn; kéo padding trên xuống cho bớt hụt. */
/* Không còn tiêu đề và câu giới thiệu, hero chỉ còn nền với hai nút. Giữ 86svh là
   để một khoảng trống rất lớn quanh một cụm rất nhỏ. 68svh vừa đủ để bức nền là bức
   nền, và để mục dưới ló lên mép màn hình — người ta biết còn nội dung để cuộn. */
.bleed-hero.hv2 {
    min-height: 68vh;
    min-height: 68svh;
    padding-top: clamp(40px, 5vh, 64px);
}

.bleed-hero.hv2 .bleed-content {
    max-width: 880px;
}

/* Ẩn khỏi mắt nhưng trình đọc màn hình và công cụ tìm kiếm vẫn thấy.
   Không dùng display:none — cái đó là giấu khỏi cả hai. */
.u-sronly {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}



/* ---------------------------------------------------------------- hàng hành động */

/* Copy IP và Ủng hộ nằm CÙNG một hàng. Trước đây Ủng hộ tụt xuống một dòng riêng,
   một mình giữa khoảng trống, không dính vào khối nào. */
.hv2-actions {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

/* Khối IP — hành động chính của cả trang chủ.
   Giữ div bọc button vì js/home.js:76 bám .bleed-ip-btn rồi tìm .bleed-ip-addr và
   .bleed-ip-action span.copy BÊN TRONG nó. */
.hv2-ipcard {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--radius);
    background: rgba(20, 10, 29, .74);
    background: color-mix(in srgb, var(--surface) 74%, transparent);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(232, 165, 209, .34);
    border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .09);
    overflow: hidden;
}

.bleed-hero.hv2 .hv2-ipcard .bleed-ip-btn {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    gap: 0;
    flex-direction: row;
    align-items: stretch;
    min-height: 76px;
}

.hv2-ip-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 22px 12px 26px;
    text-align: left;
}

.hv2-ipcard .hv2-ip-label {
    font-family: 'Montserrat', sans-serif;
    font-size: .7rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .04em;
    margin-bottom: 3px;
}

.bleed-hero.hv2 .hv2-ipcard .bleed-ip-addr {
    font-size: clamp(1.25rem, 2.4vw, 1.72rem);
    letter-spacing: -.02em;
    line-height: 1.1;
}

/* Nút Copy IP: to nhất trang. Trang cũ để "Tham gia ngay" to nhất nhưng nó chỉ
   nhảy tới #join — nút to nhất phải làm việc chính. */
.bleed-hero.hv2 .hv2-ipcard .bleed-ip-action {
    display: flex;
    align-items: center;
    gap: 9px;
    align-self: stretch;
    border: 0;
    border-left: 1px solid rgba(232, 165, 209, .26);
    border-left: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    padding: 0 26px;
    font-family: 'Montserrat', sans-serif;
    font-size: .95rem;
    font-weight: 800;
    color: #2a0f1f;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    white-space: nowrap;
}

.hv2-ipcard .bleed-ip-btn.copied .bleed-ip-action {
    background: linear-gradient(135deg, var(--lime), var(--mint));
}

/* Ủng hộ: cao bằng khối IP để hai cái đọc ra một hàng, nhưng viền mỏng nền mờ để
   không tranh chỗ với nút Copy IP. */
.hv2-support {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    padding: 0 30px;
    border-radius: var(--radius);
    font-family: 'Montserrat', sans-serif;
    font-size: .98rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--text);
    background: rgba(20, 10, 29, .58);
    background: color-mix(in srgb, var(--surface) 58%, transparent);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .38);
    transition: transform .25s cubic-bezier(.2, .65, .3, 1), border-color .25s;
}

.hv2-support:hover {
    transform: translateY(-2px);
    border-color: rgba(232, 165, 209, .5);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

/* ---------------------------------------------------------------- dải số liệu */

/* .mk-stats gốc (css/home.css:985) là một khối ĐẶC: nền var(--surface), viền, bo 24px —
   đúng cho lúc nó còn là mục riêng nằm trên nền phẳng. Đặt thẳng lên ảnh thì khối đặc
   che mất ảnh, nên ở đây chuyển sang nền mờ giống thanh thông tin ngay trên.

   Vạch ngăn giữa các ô và cách rơi về 2 cột trên máy nhỏ đã có sẵn trong css/home.css
   (.mk-stat + .mk-stat::before), không viết lại. */
.hv2-stats {
    margin-top: 22px;
    padding: 18px 24px;
    gap: 10px;
    border-radius: 20px;
    background: rgba(20, 10, 29, .5);
    background: color-mix(in srgb, var(--surface) 50%, transparent);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .10);
}

/* Cỡ chữ gốc tính cho một mục chiếm cả bề ngang trang. Trong hero nó nằm gọn hơn. */
.hv2-stats .mk-stat {
    padding: 2px 4px;
}

.hv2-stats .mk-stat-num {
    font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.hv2-stats .mk-stat-label {
    margin-top: 4px;
    font-size: .66rem;
    letter-spacing: .1em;
}

/* ---------------------------------------------------------------- thanh thông tin */

/* Ba viên rời trước đây trông như mảnh vụn rơi dưới khối IP: ba hộp lệch chiều rộng,
   mỗi hộp một viền. Gom vào MỘT thanh có vách ngăn — mắt đọc ra một vật, không phải ba. */
.hv2-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 4px;
    border-radius: 99px;
    background: rgba(20, 10, 29, .55);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .10);
}

.hv2-meta-item,
.bleed-hero.hv2 .hv2-meta-btn.bleed-ip-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 17px;
    border: 0;
    border-radius: 99px;
    background: none;
    box-shadow: none;
    font-size: .84rem;
    color: var(--muted);
    white-space: nowrap;
}

.hv2-meta-item strong,
.hv2-meta-item .ip {
    color: var(--text);
    font-weight: 700;
}

/* Vách ngăn vẽ ở mép trái từng mục kể từ mục thứ hai, nên không thừa vạch ở hai đầu.
   Dùng ::before định vị tuyệt đối thay vì border-left: viên bọc bo tròn 99px nên
   border-left sẽ cong theo mép. */
.hv2-meta-item + .hv2-meta-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, .14);
}

.hv2-meta-btn .bleed-ip-action {
    color: var(--accent);
    font-weight: 700;
    font-size: .8rem;
}

.hv2-meta-btn.copied .bleed-ip-action {
    color: var(--lime);
}

.hv2-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 9px rgba(184, 232, 197, .8);
    box-shadow: 0 0 9px color-mix(in srgb, var(--lime) 80%, transparent);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------- lớp nền thêm */

/* Lớp phủ tối dày dần khi cuộn — trời tối đi như mặt trời lặn.
   Bắt đầu ở opacity 0 là NGOẠI LỆ DUY NHẤT của luật số 2, vì lớp này vốn là hư
   không: không cuộn thì nó không tồn tại, không giấu mất nội dung nào. */
.hv2-sky {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(6, 3, 11, .55) 0%, rgba(6, 3, 11, .86) 60%, #06030b 100%);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--bg) 55%, transparent) 0%,
        color-mix(in srgb, var(--bg) 86%, transparent) 60%,
        var(--bg) 100%);
}

/* Dãy khối Minecraft dưới đáy hero, trôi chậm nhất để tạo chiều sâu. */
.hv2-ridge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    z-index: 2;
    opacity: .85;
    pointer-events: none;
    background: linear-gradient(90deg,
        var(--bg) 0 118px, transparent 118px 182px,
        var(--bg) 182px 296px, transparent 296px 372px,
        var(--bg) 372px 470px, transparent 470px 552px,
        var(--bg) 552px 706px, transparent 706px 778px,
        var(--bg) 778px 902px, transparent 902px 986px,
        var(--bg) 986px 1146px, transparent 1146px 1218px,
        var(--bg) 1218px 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 62%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 62%);
}

/* ---------------------------------------------------------------- chuyển động cuộn */

@keyframes hv2Zoom  { to { transform: scale(1.16) translateY(-4%); } }
@keyframes hv2Lift  { to { transform: translateY(-58px); opacity: .22; } }
@keyframes hv2Sky   { from { opacity: 0; } to { opacity: .9; } }
@keyframes hv2Ridge { to { transform: translateY(-52px); } }
@keyframes hv2Glow  { to { transform: translate3d(70px, -110px, 0); } }

/* @supports: trình duyệt chưa có scroll-timeline thì bỏ qua sạch, trang vẫn
   đầy đủ và tĩnh. Không polyfill, không JS dự phòng. */
@supports (animation-timeline: scroll()) {
    .bleed-hero.hv2 .bleed-video,
    .bleed-hero.hv2 .bleed-video-poster {
        transform-origin: 50% 40%;
        will-change: transform;
        animation: hv2Zoom linear both;
        animation-timeline: scroll(root);
        animation-range: 0 900px;
    }

    .bleed-hero.hv2 .bleed-content {
        will-change: transform, opacity;
        animation: hv2Lift linear both;
        animation-timeline: scroll(root);
        animation-range: 100px 760px;
    }

    .hv2-sky {
        animation: hv2Sky linear both;
        animation-timeline: scroll(root);
        animation-range: 0 820px;
    }

    .hv2-ridge {
        will-change: transform;
        animation: hv2Ridge linear both;
        animation-timeline: scroll(root);
        animation-range: 0 900px;
    }

    .bleed-hero.hv2 .mk-aurora i {
        will-change: transform;
        animation: hv2Glow linear both;
        animation-timeline: scroll(root);
        animation-range: 0 1300px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bleed-hero.hv2 .bleed-video,
    .bleed-hero.hv2 .bleed-video-poster,
    .bleed-hero.hv2 .bleed-content,
    .bleed-hero.hv2 .mk-aurora i,
    .hv2-sky,
    .hv2-ridge {
        animation: none !important;
    }
}

/* ---------------------------------------------------------------- điện thoại */

@media (max-width: 720px) {
    .hv2-ipcard {
        flex-direction: column;
        width: 100%;
        max-width: 420px;
    }

    .bleed-hero.hv2 .hv2-ipcard .bleed-ip-action {
        border-left: 0;
        border-top: 1px solid rgba(232, 165, 209, .26);
        border-top: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
        justify-content: center;
        min-height: 50px;
        padding: 0 20px;
    }

    .hv2-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hv2-support {
        min-height: 54px;
    }

    /* Xuống dòng thì vạch ngăn rơi vào đầu dòng mới, trông như gạch thừa. */
    .hv2-meta-item + .hv2-meta-item::before { display: none; }

    .hv2-meta {
        border-radius: 22px;
        padding: 6px 4px;
    }

    .hv2-ridge { height: 62px; }
}

/* ============================================================
   BA CÁCH NHẬN XU
   Ba thẻ dùng lại .mk-card/.mk-card-mini nên phần lớn hình thức đã có sẵn
   trong css/home.css. Ở đây chỉ thêm số thứ tự, thu nhỏ đồng hồ đếm ngược
   cho vừa một thẻ 1/3, và dựng thanh ủng hộ bên dưới.
   ============================================================ */

.hv2-earn-no {
    font-family: 'Roboto Mono', monospace;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--accent);
    opacity: .55;
}

/* Đồng hồ gốc (css/style.css:1760) to gấp đôi bề ngang một thẻ: số 3rem,
   mỗi ô min-width 80px + padding 16px. Thu lại vừa thẻ. */
.hv2-earn-give .countdown-wrapper {
    margin-top: auto;
    padding-top: 16px;
    width: 100%;
}

.hv2-earn-give .countdown-label {
    text-align: left;
    font-size: .66rem;
    letter-spacing: .14em;
    margin-bottom: 10px;
}

.hv2-earn-give .countdown {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
}

.hv2-earn-give .countdown-item {
    flex: 1 1 0;
    min-width: 0;
    gap: 5px;
}

.hv2-earn-give .countdown-number {
    font-size: 1.32rem;
    min-width: 0;
    width: 100%;
    padding: 9px 4px;
    border-radius: 11px;
    box-shadow: none;
}

/* Thẻ này là một link — di chuột lên là cả thẻ đã nhấc rồi. Để từng ô số
   nhấc thêm lần nữa thì bốn ô rung riêng lẻ bên trong một thẻ đang trượt. */
.hv2-earn-give .countdown-item:hover .countdown-number {
    transform: none;
    box-shadow: none;
}

.hv2-earn-give .countdown-label-small {
    font-size: .58rem;
    letter-spacing: .1em;
}

/* .mk-card-link có margin-top:auto để dính đáy; đồng hồ ở trên đã chiếm chỗ
   đó rồi nên trả lại khoảng cách thường. */
.hv2-earn-give .mk-card-link {
    margin-top: 14px;
}

/* ---------- Thanh ủng hộ ----------
   Tách khỏi ba thẻ trên vì đây không phải cách miễn phí. */

.hv2-donate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 20px 24px;
    border-radius: 20px;
    text-decoration: none;
    color: var(--text);
    background: rgba(20, 10, 29, .70);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    border: 1px solid rgba(232, 165, 209, .20);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    transition: border-color .3s, transform .3s cubic-bezier(.2, .65, .3, 1);
}

.hv2-donate:hover {
    border-color: rgba(232, 165, 209, .50);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    transform: translateY(-2px);
}

.hv2-donate-txt {
    flex: 1 1 320px;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--muted);
}

.hv2-donate-txt strong {
    display: block;
    margin-bottom: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.hv2-donate-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-size: .88rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--bg);
    background: linear-gradient(135deg, var(--accent), var(--mint));
}

@media (max-width: 640px) {
    .hv2-donate {
        padding: 18px;
    }

    .hv2-donate-cta {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   NỀN KHỐI CTA CUỐI TRANG
   Dùng chung cặp ảnh với dải banner đầu trang (.hero-header trong css/style.css),
   cùng đổi theo giao diện. .mk-cta-bg giữ nguyên z-index:-1 của nó trong
   css/home.css; .mk-scene-bg chỉ góp phần ảnh.

   Dùng background-image chứ không dùng <img>: hai thẻ <img> là trình duyệt tải cả
   hai ảnh dù chỉ hiện một, còn url() nằm trong một biến CSS không được thay vào đâu
   thì nó không đi lấy.
   ============================================================ */

.mk-scene-bg {
    background-image: var(--banner-bg);
    background-position: center 62%;
    background-size: cover;
    background-repeat: no-repeat;
}

html[data-theme="trungthu"] .mk-scene-bg {
    background-image: var(--banner-bg-season, var(--banner-bg));
}

/* Lớp phủ của khối này (.mk-cta-bg::after trong css/home.css) tính cho ảnh tối.
   Cùng lý do như lớp phủ hero: ảnh làng kẹo sáng nên phủ dày thêm, ảnh Trung Thu
   tối sẵn nên phủ mỏng lại. Cùng độ đặc specificity với home.css nhưng file này
   nạp sau nên đè được. */
.mk-cta-bg::after {
    background:
        radial-gradient(ellipse 70% 90% at center, rgba(6, 3, 11, .62), rgba(6, 3, 11, .92)),
        linear-gradient(180deg, rgba(6, 3, 11, .5), rgba(6, 3, 11, .8));
}

html[data-theme="trungthu"] .mk-cta-bg::after {
    background:
        radial-gradient(ellipse 72% 92% at center, rgba(6, 3, 11, .38), rgba(6, 3, 11, .8)),
        linear-gradient(180deg, rgba(6, 3, 11, .3), rgba(6, 3, 11, .66));
}