:root {
    --font: "Zen Kaku Gothic New", sans-serif;
    --fonten: "avenir-lt-pro", sans-serif;
    --pageW: 980px;

    --heroW: 980px;
    --gutter: 18px;

    --ink: #1b1b1b;
    --muted: rgba(27, 27, 27, .65);
    --blue: #76b8de;
}

* {
    box-sizing: border-box;
}

.page {
    width: 980px;
    margin: 0 auto;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: #fff;
    -webkit-text-size-adjust: 100%;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    body {
        background: #f3f3f3;
    }
}

/* page frame (980 max) */
.page {
    max-width: var(--pageW);
    margin: 0 auto;
    padding: 0;
}

/* HERO frame: always portrait column centered */
.hero {
    width: min(100%, var(--heroW));
    margin: 0 auto;
    position: relative;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 24px 60px rgba(0, 0, 0, .10);
}

/* background photo */
.hero__photo {
    width: 100%;
    height: 100%;
}

/* overlay */
.hero__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px var(--gutter) 16px;
}

/* award */
.hero__award {
    width: 100%;
    margin-top: 6px;
}

.hero__ranking {
    width: 100%;
    height: auto;
}


/* hashtags */
.hero__hashtags {
    margin-top: 60px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.hero__hashtags span {
    font-size: 32px;
    letter-spacing: .2em;
    color: rgba(27, 27, 27, .70);
    padding: 8px 20px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    font-weight: 500;
}

/* lead */
.hero__lead {
    margin-top: 60px;
    font-size: 32px;
    line-height: 1.7;
    letter-spacing: .2em;
    font-weight: 400;
    font-family: var(--font);
}

/* 3.4 DEBUT */
.hero__debut {
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 40px;
}

.hero__dateWrap {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.hero__dateWrap {
    position: relative;
    display: inline-block;
    /* ���? absolute b���m theo ����ng kh?i ch? */
}

.hero__date {
    font-weight: 300;
    /* Avenir 65 Medium */
    font-size: 142px;
    line-height: 1;
    letter-spacing: .02em;
}

.hero__dow {
    position: absolute;
    left: 50%;
    top: 100%;
    /* ���?t d??i ch? s? r?i k���o l���n */
    transform: translate(40%, -80%);
    /* k���o l���n ���? ���� nh? m?u */
    z-index: 5;
    font-family: "Dancing Script", cursive;
    font-weight: 400;
    font-size: 68px;
    letter-spacing: .02em;
    /* script font kh���ng n���n letter-spacing l?n */
    color: rgba(27, 27, 27, .35);
    /* h?i nh?t nh? ?nh */
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

.hero__word {
    font-weight: 300;
    font-size: 142px;
    line-height: 1;
}

/* countdown */
.countdown {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 32px;
}

.cd-group {
    text-align: center;
}

.cd-digits {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.cd-digit {
    width: 74px;
    height: 84px;
    border-radius: 8px;
    display: grid;
    place-items: center;

    background: linear-gradient(#2f2f2f, #1f1f1f);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .10),
        inset 0 -2px 8px rgba(0, 0, 0, .55),
        0 10px 18px rgba(0, 0, 0, .18);

    font-family: "avenir-lt-pro", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 48px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
    position: relative;
}

.cd-digit::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, .45);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
    transform: translateY(-.5px);
}

.cd-digit::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 52%;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.cd-label {
    margin-top: 16px;
    font-family: "avenir-lt-pro", sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: rgba(27, 27, 27, .75);
}

/* badge */
.hero__badge {
    position: absolute;
    left: 7%;
    top: 56%;
    transform: translateY(-50%);

    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

    /* ���?i sang grid ���? x?p ����ng h���ng */
    display: grid;
    grid-template-columns: max-content max-content;
    grid-template-rows: auto auto;
    justify-content: center;
    align-content: center;
    column-gap: 6px;
    /* kho?ng c���ch gi?a 30 v��� �� */
    row-gap: 6px;
    /* kho?ng c���ch gi?a d���ng tr���n v��� d���ng s? */
}

/* "�δ��ޥ��ʥ�" n?m 1 d���ng, chi?m 2 c?t */
.hero__badge .badge__small:first-child {
    grid-column: 1 / 3;
    grid-row: 1;
    margin: 0;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: .08em;
    color: #6aaed6;
    font-weight: 500;
}

/* s? 30 ? c?t 1 h���ng 2 */
.hero__badge .badge__big {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: 100px;
    font-weight: 400;
    letter-spacing: .02em;
    color: #6aaed6;
    line-height: 1;
}

/* �� (badge__small th? 2) ���?t c?nh s? 30 */
.hero__badge .badge__small:last-child {
    grid-column: 2;
    grid-row: 2;
    margin: 0;

    font-size: 68px;
    /* ch?nh theo ��� */
    font-weight: 700;
    color: #6aaed6;
    line-height: 1;

    align-self: end;
    margin-left: -10px;
}



/* bottom product block */
.hero__product {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 60px;
    padding: 0 var(--gutter);
}

.hero__productTop {
    font-size: 32px;
    letter-spacing: .10em;
    color: rgba(27, 27, 27, .72);
    font-weight: 400;
    margin: 0;
}

.hero__brand {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    /* tr���nh kho?ng tr?ng th?a c?a th? p */
}

.hero__brandLogo {
    height: 120px;
    /* t??ng ���??ng c?m gi���c 100px ch? */
    width: auto;
    max-width: 100%;
    display: block;
}

.hero__sku {
    margin-top: 0px;
    font-size: 32px;
    letter-spacing: .10em;
    color: rgba(27, 27, 27, .72);
    font-weight: 400;
}

@media (max-width: 780px) {
    .hero__lead {
        margin-top: 12px;
        font-size: 20px;
        line-height: 1.7;
        letter-spacing: .2em;
        font-weight: 500;
    }

    .hero__photo {
        width: 100%;
        height: auto;
    }

    .hero__badge {
        position: absolute;
        left: 60px;
        top: 50%;
        width: 160px;
        height: 160px;

    }


}

@media (max-width: 610px) {

    .hero__badge {
        position: absolute;
        left: 12px;
        top: 50%;
        width: 120px;
        height: 120px;

    }
}

/* small adjustments for very small devices */
@media (max-width: 360px) {

    .hero__date,
    .hero__word {
        font-size: 48px;
    }

    .cd-digit {
        width: 48px;
        height: 56px;
        font-size: 36px;
    }

    .hero__badge {
        width: 110px;
        height: 110px;
    }
}



.mosaicStrip__wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.mosaicStrip__imgs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.mosaicStrip__imgs img {
    width: 100%;
    aspect-ratio: 1 / 1.3;
    object-fit: cover;
}

.mosaicStrip__title {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    letter-spacing: .12em;
    pointer-events: none;
    font-family: var(--fonten);
}

.mosaicStrip__ttl1 {
    font-size: 30px;
    opacity: .96;
    letter-spacing: .4em;
    font-weight: 350;
}

.mosaicStrip__ttl2 {
    font-size: 20px;
}

@media (max-width: 600px) {
    .mosaicStrip__ttl1 {
        font-size: 10px;
    }

    .mosaicStrip__ttl2 {
        font-size: 14px;
    }
}


/* -------------------------
   LINE button (image inside)
   ------------------------- */
.lineBtn {
    display: block;
    width: min(620px, 100%);
    margin: 0 auto;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .22);
    transform: translateZ(0);
}

.lineBtn img {
    width: 100%;
    height: auto;
}

@media (max-width: 460px) {
    .lineBtn {
        padding: 50px;
        box-shadow: none;
    }
}



/* =========================================================
   CTA BLOCK (dark) - PC layout like Image 2
   ========================================================= */
.ctaBlock {
    background: #3c3c3c;
    color: #fff;
    padding: 64px 0 130px;
}

.ctaBlock__inner {
    text-align: center;
    max-width: 980px;
    /* thu g?n b? c?c gi?ng ?nh 2 */
    margin: 0 auto;
    padding: 0 18px;
}

.ctaBlock__seats {
    display: block;
    width: min(840px, 100%);
    /* t���ng l���n */
    margin: 0 auto 18px;
}

.ctaBlock__title {
    margin: 0 0 14px;
    font-size: 34px;
    letter-spacing: .2em;
    font-weight: 400;
    color: rgba(255, 255, 255, .92);
    font-family: var(--fonten);
}

.ctaBlock__copy {
    margin: 0 0 14px;
    font-size: 34px;
    line-height: 1.9;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .92);
    font-weight: 350;
}

.ctaBlock__copyEm {
    margin: 0 0 14px;
    font-size: 42px;
    line-height: 1.9;
    letter-spacing: .10em;
    font-weight: 400;
    color: rgba(255, 255, 255, .90);
}

.ctaBlock__divider {
    margin: 0 0 14px;
    width: 64px;
    height: 2px;
    background: rgba(255, 255, 255, .28);
    margin: 18px auto 16px;
}

.ctaBlock__bonus {
    margin: 80px 0 28px;
    font-size: 32px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .92);
    font-weight: 350;
}


/* =========================================================
   QUOTE (review)
   ========================================================= */
.quote {
    background: #fff;
    padding: 260px 0 260px;
}

.quote__inner {
    text-align: center;
    position: relative;
}

.quote__text {
    font-size: 26px;
    line-height: 2.2;
    letter-spacing: .08em;
    color: rgba(27, 27, 27, .78);
    padding: 18px 0 8px;
    position: relative;
    font-weight: 500;
}

.quote__text::before,
.quote__text::after {
    content: "\201C";
    position: absolute;
    top: 0px;
    font-size: 48px;
    color: rgba(27, 27, 27, .18);
    line-height: 1;
}

.quote__text::before {
    left: 120px;
}

.quote__text::after {
    content: "\201D";
    right: 120px;
}

.quote__note {
    margin-top: 10px;
    font-size: 14px;
    letter-spacing: .06em;
}

@media (min-width: 768px) {
    .quote__text {
        font-size: 62px;
    }

    .quote__note {
        font-size: 24px;
    }
}

/* =========================================================
   FAN HERO (fan.jpg is an <img> layer under the text)
   ========================================================= */
.fanHero {
    padding-bottom: 140px;
    background: #fff;

}

/* ===== FAN HERO: th���m kho?ng tr?ng + tam gi���c ===== */
.fanHero {
    /* b?n ch?nh 2 bi?n n���y l��� ra ����ng ��� */
    --fanHeroSpace: 60px;
    /* kho?ng tr?ng th���m ���? nh���t ?nh (t���ng/gi?m ch? tr?ng) */
    --triH: 140px;
    /* chi?u cao v���ng tam gi���c */
    --triTip: 62%;
    /* ���? ��t?t�� ? gi?a (c���ng l?n c���ng th?p) */

    position: relative;
    padding-bottom: calc(var(--fanHeroSpace) + var(--triH));
    overflow: hidden;
    /* tr���nh l���i ra ngo���i */
}

/* ���?m b?o layer ch���nh n?m tr���n tam gi���c */
.fanHero__bg {
    position: relative;
    z-index: 1;
}

/* tam gi���c n?m ? ����y section fanHero */
.fanHero__sankaku {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: var(--triH);
    background: #EAF2F6;
    /* m���u xanh nh?t c?a n?n d??i (ph?i tr���ng v?i section k? ti?p) */

    /* V-shape gi?ng m?u */
    clip-path: polygon(0 0,
            50% var(--triTip),
            100% 0,
            100% 100%,
            0 100%);

    z-index: 2;
    /* n?m ���� l���n ph?n cu?i ?nh n?u c?n */
    pointer-events: none;
}


/* full-bleed = tr???n full m???n h???nh (tho???t kh?i .page max-width) */
.fanHero--fullbleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* background canvas */
.fanHero__bg {
    position: relative;
    width: 100%;

    /* gi? ?????ng t? l? ?nh: 547 x 2048 */
    aspect-ratio: 547 / 2048;

    /* chia v???ng: tr???n (head) v??? d??i (panel) */
    display: grid;
    grid-template-rows: 3fr 2fr;
    padding-bottom: 160px;
    overflow: hidden;
    /* crop theo khung */
}

/* image layer (under) */
.fanHero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ph? k???n khung v??? crop ph?n d? */
    object-position: center top;
    /* ?u ti???n ph?n tr???n ?nh */
    z-index: 0;
}

.fanHero__bg {
    position: relative;
    overflow: hidden;
    /* ���? c?t ph?n tam gi���c n?m trong khung */
}



/* overlay layers (over) */
.fanHero__head,
.fanHero__panel {
    position: relative;
    z-index: 1;
}

/* ---------- TOP HEAD ---------- */
.fanHero__head {
    padding: 28px 18px 0;
    text-align: center;
}

.fanHero__headInner {
    width: min(360px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 10px;
}

.sectionHead__eyebrow {
    margin: 20px;
    font-size: 16px;
    letter-spacing: .14em;
    color: #a08a82;
    font-family: var(--fonten);
}

.sectionHead__title {
    margin: 10px 0 10px;
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: .08em;
    color: rgba(27, 27, 27, .82);
}

.sectionHead__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: .06em;
    color: rgba(27, 27, 27, .62);
}

/* ---------- BOTTOM PANEL (text overlays on blue area in the image) ---------- */
.fanHero__panel {
    position: absolute;
    top: 22%;
    /* ch?nh s? n���y ���? l���n/xu?ng */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 0 18px calc(22px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    align-items: flex-start;
}



.fanHero__panelInner {
    width: min(360px, 100%);
    margin: 0 auto;
    color: #fff;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    padding-top: 0;
    /* b? ���?y xu?ng */
}

/* badge */
.fanHero__badge {
    position: absolute;
    top: -690px;
    left: 40px;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin: 0 0 12px;
    align-self: flex-start;
}

/* panel texts */
.fanHero__title {
    font-weight: 500;
    font-size: 18px;
    line-height: 1.55;
    letter-spacing: .08em;
    margin: 0;
}

.fanHero__note {
    margin: 6px 0 12px;
    font-size: 28px;
    opacity: .92;
    letter-spacing: .12em;
}

/* chips */
.fanHero__chips {
    display: grid;
    gap: 10px;
    justify-items: center;
    margin: 30px 0 12px;
}

.chip {
    width: min(280px, 100%);
    padding: 10px 20px;
    background: rgba(255, 255, 255, .92);
    color: #2f82b7;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    border: 1px solid rgba(255, 255, 255, .60);
}

.fanHero__desc {
    margin: 0;
    font-size: 13px;
    letter-spacing: .06em;
    opacity: .95;
}

/* Tablet tuning */
@media (min-width: 768px) {
    .fanHero__head {
        padding-top: 200px;
    }

    .fanHero__headInner {
        width: auto;
        margin: auto;
    }

    .sectionHead__eyebrow {
        font-size: 32px;
        font-weight: 300;
        letter-spacing: .2em;
    }

    .sectionHead__title {
        font-size: 58px;
        font-weight: 500;
        line-height: 1.6;
    }

    .sectionHead__desc {
        font-size: 32px;
        font-weight: 400;
        line-height: 2;
    }

    .fanHero__panelInner {
        padding-top: 64px;
        width: auto;
        margin: auto;
    }

    .fanHero__title {
        font-size: 52px;
        letter-spacing: .2em;
    }

    .fanHero__badge {
        width: 280px;
        height: 280px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .92);
        border: 1px solid rgba(0, 0, 0, .06);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

        display: grid;
        grid-template-columns: max-content max-content;
        grid-template-rows: auto auto;
        justify-content: center;
        align-content: center;
        column-gap: 6px;
        /* kho?ng c���ch gi?a 30 v��� �� */
        row-gap: 6px;
        /* kho?ng c���ch gi?a d���ng tr���n v��� d���ng s? */
    }

    /* "�δ��ޥ��ʥ�" = badge__small ���?u ti���n */
    .fanHero__badge .badge__small:first-child {
        grid-column: 1 / 3;
        grid-row: 1;
        margin: 0;
        font-size: 34px;
        line-height: 1.1;
        letter-spacing: .08em;
        color: #6aaed6;
        font-weight: 500;
    }

    /* "30" */
    .fanHero__badge .badge__big {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
        font-size: 100px;
        font-weight: 400;
        letter-spacing: .02em;
        color: #6aaed6;
        line-height: 1;
    }

    /* "��" = badge__small cu?i */
    .fanHero__badge .badge__small:last-child {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        font-size: 52px;
        /* ch?nh theo m?t */
        font-weight: 400;
        color: #6aaed6;
        line-height: 1;

        align-self: end;
        /* canh ch���n v?i s? 30 */
        margin-left: -10px
    }

    .fanHero__badge {
        top: -390px;
        width: 280px;
        height: 280px;
        font-weight: 400;
    }

    .fanHero__panel {
        top: 48%;
        left: 50%;
    }

    .chip {
        width: 100%;
        padding: 6px 80px;
        background: rgba(255, 255, 255, .92);
        color: #2f82b7;
        font-size: 68px;
        font-weight: 700;
        letter-spacing: 0.1em;
    }

    .fanHero__chips {
        margin: 700px 0 12px;
        gap: 18px
    }

    .fanHero__desc {
        margin-top: 40px;
        font-size: 30px;
        color: rgb(27 27 27 / 87%);
    }
}

/* Desktop fix: stop scaling too wide (PC ?n ????nh) */
@media (min-width: 980px) {

    .fanHero--fullbleed {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
    }

    .fanHero__bg {
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

}


.fanHero__panelInner {
    max-width: 980px;
    /* ho?c: none; n?u b?n mu?n th? t? do */
}

/* khung GIF ����ng size b?n ���o */
.fanHero__gifFrame {
    position: relative;
    width: 754px;
    /* ? ����ng W */
    height: 441px;
    /* ? ����ng H */
    margin: 0 auto;

    border-radius: 10px;
    overflow: hidden;
}

/* ���p cho c? img/video cho ch?c */
.fanHero__gifFrame :is(img, video) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* fanHero GIF block */
.fanHero__gif {
    margin-top: 1350px;
    text-align: center;
    position: absolute;
}

.fanHero__gifLead {
    margin-bottom: 16px;
    /* c���ch ch? v?i ?nh */
}

/* khung ?nh gi?ng ?nh m?u */
.fanHero__gifFrame {
    position: relative;
    height: 320px;
    /* t���ng/gi?m b?ng px ? ����y */
    margin: 0 auto;
    border-radius: 6px;
    overflow: hidden;
}

.fanHero__gifFrame :is(img, video) {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* mu?n kh���ng b? c?t th��� ���?i th���nh contain */
}


/* n���t ��GIFư��� m���u h?ng n?m tr���n ?nh */
.fanHero__gifBadge {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);

    background: #e6007aa3;
    color: #fff;
    font-weight: 700;
    letter-spacing: .12em;

    padding: 10px 58px;
    font-size: 14px;

    pointer-events: none;
    /* ch? l��� badge */
}

/* ===== fanHero GIF size (PX) ===== */
.fanHero__gifFrame {
    --gifW: 653px;
    /* ? ���?i width ? ����y */
    --gifH: 380px;
    /* ? ���?i height ? ����y */

    position: relative;
    width: min(var(--gifW), 100%);
    height: var(--gifH);
    margin: 0 auto;

    border-radius: 10px;
    overflow: hidden;
}

.fanHero__gifFrame :is(img, video) {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* -------------------sankaku------------------- */


/* -------------------poket------------------- */
/* RESET PH?N T? D? TH?A */
.pocket h2,
.pocket small,
.pocket strong {
    margin: 0;
    padding: 0;
    display: block;
}

.pocket {
    padding: 60px 0;
    background-color: #EAF2F6;
    /* M���u n?n xanh nh?t r?t nh? nh? ?nh */
    font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

.pocket__inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Ti���u ���? xanh */
.pocket__title {
    background: #76b8de;
    color: #fff;
    text-align: center;
    padding: 14px 10px !important;
    margin: 0 20px !important;
    font-size: 38px;
    letter-spacing: 0.15em;
    font-weight: 300;
    margin-bottom: 40px;
}

/* Layout ch���nh */
.pocket__content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    /* Ch���ng ta s? d���ng position ���? c���n line */
    position: relative;
}

.pocket__media {
    flex: 0 0 55%;
    /* T? l? ?nh b���n tr���i */
    padding-right: 5%;
}

.pocket__media img {
    width: 100%;
    height: auto;
}

/* Danh s���ch t���nh n���ng b���n ph?i */
.pocket__features {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: relative;
}

/* Box n?i dung tr?ng */
.feature__box {
    background: #fff;
    padding: 20px 48px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 2;
    text-align: center;
}

.feature__box small {
    font-size: 18px;
    color: #666;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.feature__box strong {
    font-size: 28px;
    color: #333;
    letter-spacing: 0.02em;
    font-weight: normal;
}

.feature__box strong span {
    font-size: 20px;
    margin-left: 2px;
    color: #666;
}

/* H? TH?NG ���??NG LINE CH? D?N (D���ng Pseudo-elements) */
.feature::before {
    content: "";
    position: absolute;
    background: #999;
    /* M���u line x���m m?ng */
    height: 1px;
    z-index: 1;
}

/* Line cho ���?u */
.feature--head::before {
    width: 120px;
    top: 10%;
    left: -110px;
    transform: rotate(15deg);
}

/* Line cho L?ng */
.feature--back::before {
    width: 100px;
    top: 50%;
    left: -90px;
    transform: rotate(0deg);
}

/* Line cho Ch���n */
.feature--foot::before {
    width: 150px;
    top: 110%;
    left: -120px;
    transform: rotate(-60deg);
}

/* Thanh Footer x���m */

/* RESPONSIVE: Khi l���n mobile s? ?n line v��� x?p ch?ng */
@media (max-width: 768px) {
    .pocket__content {
        flex-direction: column;
    }

    .pocket__media {
        padding-right: 0;
        margin-bottom: 30px;
    }

    .feature::before {
        display: none;
        /* ?n line tr���n mobile ���? tr���nh r?i */
    }

    .feature__box {
        text-align: center;
    }
}


/* =====================================
   EXPERIMENT SECTION
===================================== */
.exp {
    background: #EAF2F6;
    /* n?n xanh nh?t b���n ngo���i */
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
}

/* Kh?i tr?ng d?ng l?c gi���c (max 980) */
.exp__inner {
    --cut: 90%;
    /* v? tr��� b?t ���?u v���t xu?ng (c���ng nh? c���ng v���t nhi?u) */

    width: min(980px, calc(100% - 80px));
    margin: 0 auto;
    padding: 0px 0px 90px;
    /* ch?a ����y ���? th?y ��m���i nh?n�� */
    text-align: center;

    position: relative;
    z-index: 0;
    /* t?o stacking ���? n?n ::before n?m sau content */
}

/* N?n tr?ng d?ng polygon + ���? b���ng nh? */
@supports (clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%)) {
    .exp__inner {
        background: #fff;
        /* n?n tr?ng n?m tr���n ch���nh element */
        clip-path: polygon(0 0, 100% 0, 100% var(--cut), 50% 100%, 0 var(--cut));
    }

    /* T?T pseudo-element c��� ���? tr���nh ��vi?n tr?ng�� + l?ch layer */
    .exp__inner::before {
        content: none !important;
    }
}

/* Fallback n?u tr���nh duy?t kh���ng h? tr? clip-path */
@supports not (clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%)) {
    .exp__inner {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 14px 22px rgba(0, 0, 0, .08);
    }

    .exp__inner::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -28px;
        transform: translateX(-50%);
        border-left: 34px solid transparent;
        border-right: 34px solid transparent;
        border-top: 28px solid #fff;
    }
}

.exp__title {
    background: #6e6e6e;
    color: #fff;
    text-align: center;
    padding: 15px 10px;
    font-size: 38px;
    letter-spacing: 0.1em;
    margin: 0 0 40px 0;
    font-weight: 300;
}

/* Kh?i Card ch���nh */
.expCard {
    background: #fff;
    overflow: hidden;
    padding: 0 60px 0 60px;
}

/* Header so s���nh */
.expCard__header {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
}

.expCard__col-head {
    flex: 1;
}

.expCard__col-head .tag {
    display: block;
    color: #fff;
    font-size: 28px;
    font-weight: 500;
    padding: 10px 0;
    letter-spacing: 0.1em;
    font-family: var(--fonten);
}

.expCard__col-head--blue .tag {
    background: #7ba2cf;
}

.expCard__col-head--gray .tag {
    background: #bdbdbd;
}

.expCard__col-head p {
    font-size: 32px;
    color: #333;
    margin: 0px;
    font-weight: 500;
}

/* ?nh Visual */
.expCard__visual {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

.visual-box {
    flex: 1;
    border: 1px solid #eee;
}

.visual-box img {
    width: 100%;
    display: block;
}

/* K?t qu? nhi?t ���? */
.expCard__result {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.result-label {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 90%;
    height: 76px;
    /* gi?ng thanh trong ?nh */
    background: #efefef;
    border: 1px solid #e6e6e6;

    font-size: 28px;
    font-weight: 500;
    letter-spacing: .04em;
    color: #333;
}



/* M���i t���n n?m ����ng gi?a 2 c?t */
.result-arrows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 360px;
    padding: 0;
    /* b? padding 15% */
    margin: 6px 0 10px;
    /* ch?nh l���n/xu?ng tu? ��� */
    justify-items: center;
    font-size: 12px;
    line-height: 1;
    color: #333;
}

/* 2 box nhi?t ���? */
.result-display {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    justify-items: center;
}

/* Hi?u ?ng Box nhi?t ���? n?i */
/* === Base: gi? nguy���n nh? CSS c��� === */
.temp-display {
    flex: 1;
    max-width: 180px;
    padding: 16px 140px;
    border-radius: 4px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);

    /* Hi?u ?ng hi?n th? m??t (kh���ng l���m l?ch layout) */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
    will-change: opacity, transform;
}

.temp-display.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* === Tr?ng th���i L?nh: GI? M���U CSS C��� === */
.temp-display--cool {
    background: #eef2f9;
    color: #5c88c4;
    border: 1px solid #d0deef;
}

/* === Tr?ng th���i N���ng: GI? M���U CSS C��� === */
.temp-display--hot {
    background: #fef1f0;
    color: #e96d6d;
    border: 1px solid #fbdada;
}

/* Glow nh? m?c ���?nh (gi? tone c���, ch? t���ng ��?m/ l?nh�� nh?) */
.temp-display--cool .temp-val,
.temp-display--cool .temp-unit {
    text-shadow: 0 0 6px rgba(92, 136, 196, 0.18);
}

.temp-display--hot .temp-val,
.temp-display--hot .temp-unit {
    text-shadow: 0 0 6px rgba(233, 109, 109, 0.18);
}

/* =========================================================
   FINISHED: KH���NG zoom c? kh?i
   - ch? l���m n?i (shadow nh?) ���? kh���ng ���?i layout
   ========================================================= */
.temp-display.finished {
    animation: none;
    /* b? nh���n/zoom to���n kh?i */
    transform: translateY(0);
    /* tr���nh xung ���?t transform */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

/* =========================================================
   Zoom ���?ng th?i: CH? s? (v��� c��� th? c? ��C n?u b?n mu?n)
   - 2 kh?i s? c���ng nh?p v��� d���ng c���ng keyframes + duration
   ========================================================= */

/* N?u b?n mu?n zoom c? s? + ��C: gi? c? 2 d���ng d??i
   N?u ch? mu?n zoom s?: x���a d���ng .temp-unit */
.temp-display.finished .temp-val,
.temp-display.finished .temp-unit {
    display: inline-block;
    transform-origin: center;
    animation: temp-sync-pulse 0.9s ease-in-out infinite;
    will-change: transform, filter;
}

/* Zoom nh? + t���ng t??ng ph?n nh? ���? c��� c?m gi���c ��nhi?t ���ang ph���t ra�� */
@keyframes temp-sync-pulse {
    0% {
        transform: scale(1);
        filter: none;
    }

    45% {
        transform: scale(1.12);
        filter: saturate(1.08) contrast(1.10);
    }

    100% {
        transform: scale(1);
        filter: none;
    }
}

/* =========================================================
   T���ng glow/���?m khi finished (c?m gi���c ph���t nhi?t r��� h?n)
   ========================================================= */
.temp-display--cool.finished .temp-val,
.temp-display--cool.finished .temp-unit {
    font-weight: 700;
    text-shadow:
        0 0 8px rgba(92, 136, 196, 0.45),
        0 0 18px rgba(92, 136, 196, 0.28);
}

.temp-display--hot.finished .temp-val,
.temp-display--hot.finished .temp-unit {
    font-weight: 700;
    text-shadow:
        0 0 8px rgba(233, 109, 109, 0.50),
        0 0 20px rgba(233, 109, 109, 0.32);
}

/* Gi?m chuy?n ���?ng cho ng??i d���ng b?t Reduce Motion */
@media (prefers-reduced-motion: reduce) {

    .temp-display,
    .temp-display.is-visible {
        transition: none;
        transform: none;
    }

    .temp-display.finished .temp-val,
    .temp-display.finished .temp-unit {
        animation: none;
        filter: none;
    }
}


/* Icon nhi?t k? */
.temp-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    margin-left: 4px;
    /* ch?nh 0~8px */
}

/* S? nhi?t ���? n?i b?t */
.temp-val {
    font-size: 56px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    line-height: 1;
    text-shadow: 1px 1px 0px #fff;
    /* T?o ���? n?i nh? */
}

.temp-unit {
    font-size: 18px;
    font-weight: bold;
    margin-top: 5px;
}

.exp__note {
    font-size: 11px;
    color: #888;
    margin-top: 20px;
}

/* Mobile */
@media (max-width: 480px) {
    .temp-val {
        font-size: 24px;
    }

    .temp-display {
        padding: 8px 5px;
    }

}

/* =========================================
   MINUS 30 (img/30.png)
========================================= */



.minus30__card {
    position: relative;
    width: 100%;
    /* <- quan tr?ng */
    max-width: var(--pageW);
    /* <- 980px */
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
}

/* d?i che line */
.minus30__card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 70px;
    /* ch?nh 40~90px t���y ���? line */
    background: linear-gradient(to bottom,
            #eaf2f6 0%,
            /* m���u n?n b���n ngo���i (m���u xanh b?n ���ang d���ng) */
            rgba(234, 242, 246, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ���?m b?o text overlay v?n n?m tr���n d?i che */
.minus30__overlay {
    z-index: 2;
}

.minus30__img {
    position: relative;
    z-index: 0;
}

.minus30__img {
    display: block;
    width: 100%;
    height: auto;
}

/* text overlay (center top) */
.minus30__overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: clamp(18px, 6vw, 42px);
    text-align: center;
    padding: 0 14px;
}

.minus30__kicker {
    margin: 64px 0 10px;
    font-size: 32px;
    line-height: 2;
    letter-spacing: .14em;
    color: rgba(27, 27, 27, .55);
}

.minus30__brand {
    letter-spacing: .16em;
}

.minus30__title {
    display: inline-flex;
    align-items: baseline;
    gap: .18em;

    padding: 0px 58px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);

    font-size: 52px;
    font-weight: 580 !important;
    letter-spacing: .06em;
    color: #1b1b1b;
    font-weight: 500;
}


.minus30__titleBlue {
    color: #5c88c4;
}

.minus30__titleTemp {
    font-size: 82px;
    color: #5c88c4;
}



@media (min-width: 768px) {
    .minus30 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* =========================================
   T5 Mosaic block
   ========================================= */

.t5 {
    padding: 0;
    background: #fff;
}

/* PC/SP ���?u gi? ��poster feel�� gi?ng ?nh m?u */
.t5__wrap {
    width: min(980px, 100%);
    margin: 0 auto;
}

/* khung ?nh (gi? ����ng c?m gi���c d?c nh? ?nh m?u) */
.t5__bg {
    position: relative;
    width: 100%;
    overflow: hidden;

    /* ?nh m?u d?ng 3:4 (960x1280). N?u ?nh b?n kh���c t? l?, ���?i s? n���y */
    aspect-ratio: 3 / 4;
}

/* ?nh n?n n?m l?p d??i */
.t5__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* l?p ph? ���? canh gi?a box */
.t5__overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(14px, 3.2vw, 28px);
    z-index: 1;
}

/* h?p n?n ���en m? nh? ?nh m?u */
.t5__box {
    width: min(78%, 560px);
    background: rgba(60, 53, 51, 0.8);
    padding: 62px 42px;
    text-align: center;
}

/* ch? */
.t5__title {
    margin: 0 0 8px;
    color: #fff;
    font-weight: 300;
    letter-spacing: .18em;
    font-size: 36px;
}

.t5__sub {
    margin: 0;
    color: #fff;
    letter-spacing: .12em;
    line-height: 1.7;
    font-size: 26px;
    font-weight: 300;
}

/* optional: n?u site b?n hay b? tr??t ngang v��� layout kh���c */
body {
    overflow-x: clip;
}




/* =========================
   QUALITY: 4-layer layout
   PC = 2 columns, SP = stack
   ========================= */

.quality {
    background: #fff;
}

.quality__sub {
    text-align: center;
    letter-spacing: .18em;
    font-size: 24px;
    color: #a08a82;
    margin: 0;
    margin-bottom: 18px;
    padding-top: 120px;
    font-weight: 300;
}

.quality__h3 {
    text-align: center;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: .06em;
    margin: 0 0 10px;
    color: rgba(0, 0, 0, .82);
}

.quality__lead {
    text-align: center;
    font-size: 24px;
    letter-spacing: .08em;
    color: #666;
    margin: 24px 0 22px;
}

/* wrapper */
.quality__two {
    display: grid;
    gap: 18px;
}

/* LEFT image */
.quality__layerVisual {
    margin: 0;
    display: grid;
    place-items: center;
}

.quality__layerImg {
    width: min(520px, 100%);
    height: auto;
    display: block;
}

/* RIGHT */
.quality__layerText {
    display: grid;
    gap: 14px;
}

/* default (SP): callouts stacked */
.quality__callouts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.quality__callout {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .10);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .06em;
    color: rgba(0, 0, 0, .75);
}

/* note */
.quality__note {
    margin: 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: .06em;
    color: rgba(0, 0, 0, .65);
}

/* ===== PC (>=768px): 2 columns + callouts positioned + connector lines ===== */
/* ===== PC (>=768px): callout ���� l���n ?nh gi?ng m?u ===== */
@media (min-width: 768px) {

    .quality__two {
        position: relative;
        display: block;
        /* b? grid 2 c?t */
        max-width: 760px;
        /* gi?ng m?u: c?m kh���ng qu��� r?ng */
        margin: 0 auto;
    }

    /* ?nh n?m tr���i */
    .quality__layerVisual {
        width: 520px;
        /* theo ?nh */
        margin: 0;
    }

    .quality__layerImg {
        width: 520px;
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* callout ���� l���n b���n ph?i ?nh (ch?ng l���n v���ng ?nh) */
    .quality__layerText {
        position: absolute;
        top: 0;
        left: 0;
        /* c���ng g?c v?i ?nh */
        width: 520px;
        /* c���ng width ?nh ���? canh line */
        height: 100%;
        pointer-events: none;
        /* n?u kh���ng c?n click */
    }

    .quality__callouts {
        position: absolute;
        right: -290px;
        /* ���?y callout ra b���n ph?i ?nh */
        top: 52%;
        /* canh gi?a theo ?nh */
        transform: translateY(-50%);
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 14px;
        width: 260px;
        /* gi?ng m?u */
        pointer-events: auto;
    }

    .quality__callout {
        position: relative;
        width: 100%;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, .10);
        box-shadow: 0 10px 18px rgba(0, 0, 0, .10);
        padding: 12px 14px;

        font-size: 24px;
        line-height: 1.55;
        letter-spacing: .05em;
        color: rgba(0, 0, 0, .55);
        text-align: center;

        overflow: visible;
        /* ���? line/dot v??n ra ngo���i */
    }

    /* ==============================
   Connector: line ch���o + dot (gi?ng ?nh 2)
   ============================== */

    /* line */
    .quality__callout::before {
        content: "";
        position: absolute;

        /* ���i?m g?n ? c?nh tr���i box */
        right: 100%;
        top: 50%;

        width: 126px;
        /* ���? d���i line */
        height: 1px;
        background: rgba(0, 0, 0, .28);

        /* kho?ng c���ch t? box sang tr���i */
        margin-right: 10px;

        /* xoay line theo t?ng item */
        transform-origin: right center;
        transform: translateY(-50%) rotate(var(--ang, 0deg));
    }

    /* dot */


    /* G���c + ���? l?ch dot cho t?ng box (tinh ch?nh theo ?nh) */
    .quality__callout:nth-child(1) {
        --ang: -22deg;
        /* ch���o l���n */
        --dy: -18px;
    }

    .quality__callout:nth-child(2) {
        --ang: -10deg;
        --dy: -8px;
    }

    .quality__callout:nth-child(3) {
        --ang: 10deg;
        /* ch���o xu?ng */
        --dy: 8px;
    }

    .quality__callout:nth-child(4) {
        --ang: 22deg;
        --dy: 18px;
    }

    /* N?u b?n v?n c?n l?ch nh? theo chi?u d?c (gi? l?i ����ng logic b?n ���ang d���ng) */
    .quality__callout:nth-child(1) {
        margin-top: -10px;
    }

    .quality__callout:nth-child(2) {
        margin-top: 0;
    }

    .quality__callout:nth-child(3) {
        margin-top: 0;
    }

    .quality__callout:nth-child(4) {
        margin-top: 0;
    }


}

/* ===== PC l?n (>=980px): gi? nguy���n b? c?c, ch? n?i ch? ch���t ===== */
@media (min-width: 980px) {
    .quality__h3 {
        font-size: 48px;
        font-weight: 400;
    }

}


/* =========================================
   Kiji block (980px, PC/SP gi? 2 c?t nh? nhau)
========================================= */
.kijiBlock {
    padding: 80px 0;
    background: #fff;
}

/* box n?n be: lu���n theo khung 980 */
.kijiBlock__box {
    width: 100%;
    max-width: var(--pageW);
    /* 980px */
    margin: 0 auto;

    padding: clamp(16px, 2.4vw, 26px);
    background: #f0e8e3;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2.4vw, 26px);

    flex-wrap: nowrap;
    /* lu���n 1 h���ng */
}

/* text tr���i */
.kijiBlock__text {
    flex: 1 1 0;
    min-width: 0;

    text-align: center;
    display: flex;
    flex-direction: column;

    color: rgba(27, 27, 27, .72);
    letter-spacing: .14em;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 2;
}

.kijiBlock__line {
    margin: 0;
    font-size: 32px;
    font-weight: 500;
}

/* ?nh ph?i trong khung tr?ng (co gi���n nh?ng lu���n ? b���n ph?i) */
.kijiBlock__media {
    flex: 0 0 auto;
    width: 100%;
    max-width: 480px;
    /* Gi?i h?n ���? r?ng ?nh tr���n mobile */
    padding: 20px;
}

.kijiBlock__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 50%;
}


/* =========================================
   FEATURES 4 (2x2 grid, PC/SP gi? nguy���n layout)
========================================= */
.features4 {
    padding: 28px 0 46px;
    background: #fff;
}

.features4__inner {
    width: 100%;
    max-width: var(--pageW);
    /* 980px */
    margin: 0 auto;
}

.features4__head {
    text-align: center;
    padding: 0 14px;
}

.features4__lead {
    margin: 0;
    color: var(--muted);
    letter-spacing: .14em;
    line-height: 1.8;
    font-size: 32px;
    padding-bottom: 36px;
}

.features4__rule {
    display: inline-block;
    width: 160px;
    height: 1px;
    background: rgba(0, 0, 0, .18);
    margin-top: 14px;
}

/* Grid lu���n 2 c?t, k? c? SP */
.features4__grid {
    margin-top: 30px;
    padding: 0 70px;
    /* nh? th���i ���? kh���ng s���t m���p */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 70px;
}

.features4__item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* kho?ng c���ch caption ? ?nh */
}

/* caption nh? nh? m?u */
.features4__txt {
    margin: 0;
    text-align: center;
    color: rgba(27, 27, 27, 0.966);
    letter-spacing: .12em;
    line-height: 1.75;
    font-size: 24px;
    /* <<< nh? nh? ?nh 2 */
    padding-top: 40px;
}

.features4__linecolor {
    color: #a08a82;
}

.features4__line {
    display: block;
    /* m?i d���ng 1 line */
}

/* tag xu?ng d���ng ri���ng, ���?m h?n */
.features4__tag {
    display: inline-block;
    margin-top: 4px;
    color: var(--ink);
    font-weight: 400;
    letter-spacing: .10em;
}

/* ?nh vu���ng g?n nh? m?u */
.features4__img {
    background: #f6f6f6;
    overflow: hidden;
}

.features4__img img {
    width: 100%;
    height: auto;
    display: block;
}


/* =========================================
   SAFETY
   max width 980, SP/PC gi?ng ?nh (stack)
   ========================================= */

.safety {
    padding: 44px 0 54px;
    background: #fff;
}

.safety__inner {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 0 18px;
    text-align: center;
}

.safety__eyebrow {
    margin: 0 0 20px;
    font-size: 32px;
    letter-spacing: .22em;
    color: #a08a82;
    font-weight: 300;
    font-family: var(--fonten);
}

.safety__lead {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.55;
    letter-spacing: .08em;
    color: rgba(0, 0, 0, .82);
    font-weight: 400;
}

.safety__copy {
    margin: 20px 0 80px;
    font-size: 32px;
    letter-spacing: .08em;
    color: rgba(0, 0, 0, .70);
}

/* shared card */
.safetyCard {
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
    padding: 18px 16px;
}

/* ch? ���p cho safetyCard */
.safetyCard--doc .safetyList strong {
    display: inline-flex;
    align-items: baseline;
    gap: .25em;
    white-space: nowrap;
    letter-spacing: .15em;
}

.safetyCard--doc .safetyList strong .color {
    display: inline;
    color: #a08a82;
    font-weight: 500;
    font-size: 46px;
    letter-spacing: .15em;
}

/* spacing between cards */
.safetyCard+.safetyCard {
    margin-top: 36px;
}

/* list inside doc card */
.safetyList {
    list-style: none;
    padding: 50px 50px 30px 50px;
    display: grid;
    gap: 12px;
    text-align: center;
}

.safetyList li strong {
    display: block;
    font-size: 46px;
    letter-spacing: .06em;
    color: rgba(0, 0, 0, .78);
    margin-bottom: 8px;
    font-weight: 500;
}

.safetyList li span {
    display: block;
    font-size: 28px;
    letter-spacing: .15em;
    color: rgba(0, 0, 0, .50);
}

.safetyCard--doc .safetyList li+li {
    border-top: none;
    position: relative;
    margin-top: 12px;
    padding-top: 42px;
}

.safetyCard--doc .safetyList li+li::before {
    content: "";
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0;
    height: 2px;
    background: rgba(0, 0, 0, .18);
}

/* doc image */
.safetyDoc {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;

}

.safetyDoc img {
    display: block;
    width: 100%;
    height: auto;
    padding: 0 60px 60px 60px;
}

/* support card */
.support__kicker {
    margin: 50px 0 10px;
    font-size: 28px;
    letter-spacing: .08em;
    color: rgba(0, 0, 0, .55);
}

.support__title {
    margin: 0 0 14px;
    font-size: 46px;
    letter-spacing: .08em;
    color: rgba(0, 0, 0, .80);
    font-weight: 400;
}

.support__banner {
    margin: 0 auto 12px;
    width: 100%;
    overflow: hidden;
}

.support__banner img {
    display: block;
    width: 100%;
    height: auto;
    padding: 20px 40px;
}

.support__note {
    margin: 0;
    font-size: 28px;
    line-height: 1.7;
    letter-spacing: .1em;
    color: rgba(0, 0, 0, .55);
    padding: 0 36px;
    text-align: left !important;
}

.support__chyui {
    margin: 0;
    font-size: 28px;
    line-height: 1.7;
    letter-spacing: .15em;
    color: rgba(0, 0, 0, .55);
    padding: 12px 36px 46px 36px;
}


/* PC tuning (gi? layout gi?ng ?nh, ch? n?i ch?) */
@media (min-width: 980px) {
    .safety {
        padding: 56px 0 10px;
    }

    .safety__inner {
        padding: 0 60px;
    }

    .safety__lead {
        font-size: 62px;
    }
}


/* =========================================
   BATTERY poster overlay (mb.jpg already has visuals)
   - fixed container width: 980px
   - SP/PC keep same relative positions
   ========================================= */

.battery2__inner {
    width: min(980px, 100%);
    margin: 0 auto;
}

/* Poster frame (gi? t? l? gi?ng ?nh m?u d?c) */
.battery2__poster {
    position: relative;
    width: 100%;
    overflow: hidden;

    /* ?nh m?u d?c ~ 3:4 */
    aspect-ratio: 3 / 4;

    /* n?u b?n mu?n c��� b���ng nh? nh? m?u, b?t 2 d���ng d??i */
    border-radius: 0;
}

/* image layer */
.battery2__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* common overlay */
.battery2__top,
.battery2__mid,
.battery2__grid {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 1;
    width: min(92%, 680px);
}

/* ===== TOP TEXT (canh theo %) ===== */
.battery2__top {
    top: 6.5%;
}

.battery2__eyebrow {
    margin: 0 0 8px;
    font-size: 28px;
    letter-spacing: .22em;
    color: #a08a82;
    font-family: var(--fonten);
}

.battery2__title {
    margin: 0 0 10px;
    font-size: 48px;
    line-height: 1.55;
    letter-spacing: .12em;
    color: rgba(0, 0, 0, .80);
    font-weight: 500;
}

.battery2__desc {
    margin: 0;
    font-size: 28px;
    line-height: 1.7;
    letter-spacing: .06em;
}

/* ===== MID TEXT ===== */
.battery2__mid {
    top: 73%;
    margin: 0;
    font-size: 24px;
    letter-spacing: .08em;
    color: rgba(0, 0, 0, .55);
}

/* ===== BOTTOM BADGES 2x2 ===== */
.battery2__grid {
    top: 79%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    width: min(92%, 720px);
}

.battery2__pill {
    background: #b59782;
    color: #fff;
    padding: 12px 10px;
    font-size: 28px;
    letter-spacing: .08em;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .10);
    letter-spacing: .15em;
}

/* PC tuning: gi? nguy���n b? c?c, ch? n?i kho?ng c���ch ch���t */
@media (min-width: 980px) {

    .battery2__top {
        top: 6%;
    }

    .battery2__mid {
        top: 76.5%;
        margin: 0;
        font-size: 28px;
        letter-spacing: .1em;

    }

    .battery2__grid {
        top: 81%;
    }
}


/* =========================================================
   DESIGN (match reference)
   ========================================================= */

/* section */
.design {
    background: #fff;
    /* ?nh m?u n?n tr?ng */
    padding: 44px 0 56px;
}

/* container fixed 980 */
.design__inner.l-container,
.l-container.design__inner {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

/* header typography */
.design__title {
    margin: 60px 0 10px;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: .3em;
    color: #a08a82;
    font-family: var(--fonten);
}

.design__lead {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .10em;
    line-height: 1.6;
    color: rgba(27, 27, 27, .82);
}

.design__copy {
    margin: 0 0 80px;
    font-size: 28px;
    line-height: 2;
    letter-spacing: .08em;
    color: rgba(27, 27, 27, .58);
}

/* =========================================================
   COLOR GRID + LABELS (like reference)
   ========================================================= */
.colorGrid {
    margin: 18px auto 0;
    width: 100%;
    /* theo khung 980 */
    max-width: 980px;
    position: relative;

    border-radius: 0;
    /* ?nh m?u kh���ng bo g���c */
    overflow: hidden;
    box-shadow: none;
    /* ?nh m?u kh���ng shadow */
    background: transparent;
}

.colorGrid__img {
    width: 100%;
    height: auto;
    display: block;
}

/* overlay labels = grid 2x2 ph? to���n ?nh */
.colorGrid__labels {
    position: absolute;
    inset: 0;
    pointer-events: none;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* label base: KH���NG n?n, ch? m?nh + spacing nh? m?u */
.colorLabel {
    --label: rgba(27, 27, 27, .55);
    --sub: rgba(27, 27, 27, .40);

    align-self: end;
    /* n?m s���t ����y m?i ��� */
    justify-self: center;
    /* c���n gi?a theo chi?u ngang */

    margin-bottom: 12px;
    /* kho?ng c���ch v?i ����y ��� (SP) */

    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;

    font-size: 12px;
    letter-spacing: .22em;
    line-height: 1.15;
    color: var(--label);
    text-align: center;
}

.colorLabel small {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    letter-spacing: .12em;
    color: rgba(0, 0, 0, .70);
}

/* ���?t label v���o ����ng ��� (2x2) */
.colorLabel--tl {
    grid-column: 1;
    grid-row: 1;
}

.colorLabel--tr {
    grid-column: 2;
    grid-row: 1;
}

.colorLabel--bl {
    grid-column: 1;
    grid-row: 2;
}

.colorLabel--br {
    grid-column: 2;
    grid-row: 2;
}

/* h���ng tr���n: label n?m g?n �ȏ��??ng chia gi?a�� nh? m?u */
.colorLabel--tl,
.colorLabel--tr {
    margin-bottom: 10px;
}

/* h���ng d??i: n���ng nh? l���n kh?i ����y ?nh */
.colorLabel--bl,
.colorLabel--br {
    margin-bottom: 16px;
}

/* n?u b?n mu?n gi?ng ����ng ��tone ch? t?i tr���n n?n t?i�� c?a m?u:
   gi? m���u t?i nh?ng th���m 1 ch���t glow s���ng r?t nh? ���? ���?c ���??c */
.colorLabel--tr,
.colorLabel--bl {
    text-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

.colorLabel--tl {
    color: #c7b7a2;
}

/* DEEP BLACK (x���m l?nh) */
.colorLabel--tr {
    color: #1b1b1b;
}

/* SUMMER BROWN (n���u) */
.colorLabel--bl {
    color: #6e4e3a;
}

/* LIGHT GRAY (x���m nh?t) */
.colorLabel--br {
    color: #bfc5cc;
}

/* =========================================================
   PC tune (>=980): n?i ch? nh?, gi? b? c?c y nh? SP
   ========================================================= */
@media (min-width: 980px) {
    .design {
        padding: 56px 0 70px;
    }

    .design__lead {
        font-size: 48px;
    }

    .colorLabel {
        margin-bottom: 14px;
    }

    .colorLabel--tl,
    .colorLabel--tr {
        margin-bottom: 72px;
        margin-left: 260px;
        font-size: 36px;
        text-align: left;
        font-family: var(--fonten);
    }

    .colorLabel--bl,
    .colorLabel--br {
        margin-bottom: 72px;
        margin-left: 260px;
        font-size: 36px;
        text-align: left;
        font-family: var(--fonten);
    }

}

/* =========================
   LIMITED EDITION (pixel-like banner)
   ========================= */
.limitedLE {
    background: #fff;
    padding: 22px 0 80px 0;
}

/* khung 980 + line tr���n/d??i */
.limitedLE__inner {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 46px 56px;
    /* kho?ng th? ����ng ki?u banner */
    position: relative;

    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    min-height: 300px;
    /* gi?ng ��banner�� */
}

/* line tr���n/d??i */
.limitedLE__inner::before,
.limitedLE__inner::after {
    content: "";
    position: absolute;
    left: 40px;
    right: 40px;
    height: 2px;
    background: rgba(0, 0, 0, .15);
}

.limitedLE__inner::before {
    top: 0;
}

.limitedLE__inner::after {
    bottom: 0;
}

/* ===== TEXT: n?m gi?a n?a tr���i (����y l��� ���i?m b?n ���ang thi?u) ===== */
.limitedLE__text {
    justify-self: center;
    /* center trong c?t tr���i -> gi?ng ?nh m?u */
    text-align: center;
    margin-left: 80px;
    margin-top: 60px;
}

/* LIMITED EDITION */
.limitedLE__en {
    margin: 0 0 10px;
    font-size: 32px;
    font-weight: 300;
    letter-spacing: .2em;
    color: #a08a82;
    font-family: var(--fonten);
}

/* ���̸������� (d���ng l?n) */
.limitedLE__jp {
    margin: 0;
    font-size: 48px;
    font-weight: 500;
    letter-spacing: .22em;
}

/* kho?ng c���ch xu?ng ph?n t���n (gi?ng ?nh m?u c��� kho?ng tr?ng l?n) */
.limitedLE__nameEn {
    margin: 52px 0 6px;
    /* kho?ng c���ch �ȏ���ng banner�� */
    font-size: 24px;
    font-weight: 400;
    letter-spacing: .28em;
    color: #B98D6F;
    text-align: right;
    font-family: var(--fonten);
}

.limitedLE__nameJp {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .14em;
    color: rgba(27, 27, 27, .45);
    text-align: right;
}

/* ===== IMAGE: neo ph?i trong n?a ph?i ===== */
.limitedLE__media {
    margin: 0;
    justify-self: end;
    align-self: center;
}

.limitedLE__media img {
    width: 260px;
    max-width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .10));
    margin-right: 50px;
}

/* ===== SP ===== */
@media (max-width: 767px) {
    .limitedLE__inner {
        padding: 34px 18px;
        grid-template-columns: 1fr;
        row-gap: 18px;
        min-height: unset;
    }

    .limitedLE__text {
        transform: none;
    }

    .limitedLE__nameEn {
        margin-top: 26px;
    }

    .limitedLE__media {
        justify-self: center;
    }

    .limitedLE__media img {
        width: 200px;
    }
}

/* =========================================
   POUCH overlay on bp.jpg
========================================= */
.pouchHero {
    padding: 0 0 24px;
    background: #fff;
}

.pouchHero__wrap {
    width: 100%;
    max-width: var(--pageW);
    /* 980 */
    margin: 0 auto;
    position: relative;
}

.pouchHero__bg {
    display: block;
    width: 100%;
    height: auto;
    padding-top: 10px;
}

/* common overlay */
.pouchHero__icon,
.pouchHero__copy,
.pouchHero__title,
.pouchHero__circle {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

/* gift icon (top center) */
.pouchHero__icon {
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    color: #9b7a22;
}

.pouchHero__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* copy (under icon) */
.pouchHero__copy {
    left: 50%;
    top: 22%;
    transform: translateX(-50%) !important;
    margin: 0;
    text-align: center;
    font-size: 26px;
    line-height: 1.9;
    letter-spacing: .10em;
    color: rgba(27, 27, 27, .70);
    white-space: nowrap;
}

/* title (center) */
.pouchHero__title {
    left: 50%;
    top: 34%;
    transform: translateX(-50%) !important;
    margin: 0;
    text-align: center;
    font-weight: 400;
    font-size: 42px;
    line-height: 1.6;
    letter-spacing: .22em;
    color: rgba(27, 27, 27, .72);
    white-space: nowrap;
}

.pouchHero__brand {
    letter-spacing: .34em;
}

/* gold circle (left) */
.pouchHero__circle {
    left: 29%;
    top: 72%;
    transform: translate(-50%, -50%);
    width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #9b7a22;

    display: grid;
    place-items: center;

    text-align: center;
    color: rgba(255, 255, 255, .92);
    font-size: 28px;
    line-height: 1.7;
    letter-spacing: .10em;
    font-weight: 350;
}

/* Gift lid open animation */
.gift__lid {
    transform-box: fill-box;
    transform-origin: 12% 100%;
    animation: giftOpenClose 1.6s ease-in-out .2s infinite;
}

@keyframes giftOpenClose {

    0%,
    100% {
        transform: rotate(0deg) translateY(0);
    }

    45% {
        transform: rotate(-35deg) translateY(-2px);
    }
}

/* ? N?: m? theo n?p + bounce nh? (c���ng nh?p, infinite) */
.gift__bowL,
.gift__bowR {
    transform-box: fill-box;

    /* Cho n? �ȏ��i theo n?p��: d���ng c���ng b?n l? v?i lid */
    transform-origin: 12% 100%;

    animation: giftBowOpenClose 1.6s ease-in-out .2s infinite;
}

@keyframes giftBowOpenClose {

    /* ����ng */
    0%,
    100% {
        transform: rotate(0deg) translateY(0) scale(1);
    }

    /* m? theo n?p + ph?ng nh? */
    45% {
        transform: rotate(-35deg) translateY(-2px) scale(1.10);
    }

    /* n?y nh? khi ���� m? */
    58% {
        transform: rotate(-32deg) translateY(-1px) scale(1.03);
    }
}

/* T���n tr?ng ng??i d���ng gi?m chuy?n ���?ng */
@media (prefers-reduced-motion: reduce) {

    .gift__lid,
    .gift__bowL,
    .gift__bowR {
        animation: none;
    }
}




/* =========================================================
   FOOTER
   ========================================================= */
.footer {
    background: #fff;
    padding: 22px 0 26px;
}

.footer__inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px;
    /* ���? mobile kh���ng d���nh s���t m���p */
    text-align: center;
}

.footer small {
    font-size: 12px;
    color: rgba(27, 27, 27, .55);
    letter-spacing: .10em;
}




/* =========================================================
   animation ����
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */



/* 2. HI?U ?NG ���NH KIM (SHINE) - Cho n���t LINE v��� c���c th? quan tr?ng */
.lineBtn,
.feature__box {
    position: relative;
    overflow: hidden !important;
}

.lineBtn::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(30deg);
    transition: none;
    pointer-events: none;
}

.lineBtn:hover::after {
    left: 120%;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 3. N���NG C?P H? TH?NG REVEAL (XU?T HI?N TINH T?) */
.reveal-text,
.reveal-box,
.reveal-img {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    /* Apple-style ease */
    will-change: transform, opacity;
}

.reveal-text.show,
.reveal-box.show,
.reveal-img.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Hi?u ?ng m? d?n cho ?nh (Fade-in Zoom) */
.reveal-img {
    transform: scale(1.05) translateY(20px);
}

.reveal-img.show {
    transform: scale(1) translateY(0);
}

/* 4. T?I ?U HOVER CHO N���T (MAGNETIC FEEL) */
.lineBtn {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.lineBtn:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* 5. SMOOTH SCROLL (D���nh cho tr���nh duy?t hi?n ���?i) */
html {
    scroll-behavior: smooth;
}

/* Thanh ti?n tr���nh ���?c (Reading Progress Bar) */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(to right, #76b8de, #fff);
    z-index: 9999;
    width: 0%;
}


/* ========================= */
/* ADVANCED MICRO ANIMATION */
/* ========================= */

[data-animate] {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate].is-show {
    opacity: 1;
    transform: translateY(0);
}

/* stagger */
[data-delay="1"] {
    transition-delay: 0.1s;
}

[data-delay="2"] {
    transition-delay: 0.2s;
}

[data-delay="3"] {
    transition-delay: 0.3s;
}

[data-delay="4"] {
    transition-delay: 0.4s;
}

[data-delay="5"] {
    transition-delay: 0.5s;
}

/* image depth */
img {
    transition: transform 1s ease, filter 1s ease;
}

img[data-animate].is-show {
    transform: scale(1);
}

img[data-animate] {
    transform: scale(1.05);
    filter: brightness(1.05);
}



@keyframes floatBadge {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

/* exp temperature glow */
.temp-display--cool.is-show {
    box-shadow: 0 0 25px rgba(0, 160, 255, 0.4);
    transition: box-shadow 1s ease;
}

.temp-display--hot.is-show {
    box-shadow: 0 0 25px rgba(255, 80, 0, 0.4);
    transition: box-shadow 1s ease;
}

/* feature card hover */
.features4__item {
    opacity: 0;
    transform: translateY(30px);
    transition: .6s ease;
}

.features4__item.is-show {
    opacity: 1;
    transform: translateY(0);
}

.card-inner {
    transition: transform .3s ease;
}

.features4__item.is-show:hover .card-inner {
    transform: translateY(-10px);
}


/* quality callout reveal slide */
.quality__callout {
    transform: translateX(40px);
    opacity: 0;
    transition: all .8s ease;
}

.quality__callout.is-show {
    transform: translateX(0);
    opacity: 1;
}


/* ===== CHIP ANIMATION ===== */

.chip {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
    transition: all 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.chip.is-show {
    opacity: 1;
    transform: translateY(0) scale(1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* ===== POCKET FEATURE ANIMATION ===== */

.feature {
    opacity: 0;
    transform: translateX(40px);
    transition: all .8s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature.is-show {
    opacity: 1;
    transform: translateX(0);
}

/* box n?i nh? khi hi?n */
.feature__box {
    transition: transform .5s ease, box-shadow .5s ease;
}

.feature.is-show .feature__box {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* ===== FIX ANIMATION FOR ABSOLUTE CENTER BLOCK ===== */

.battery2__top[data-animate],
.battery2__mid[data-animate],
.battery2__grid[data-animate] {
    opacity: 0;
    transform: translateX(-50%) translateY(40px);
    transition: all .8s cubic-bezier(0.22, 1, 0.36, 1);
}

.battery2__top.is-show,
.battery2__mid.is-show,
.battery2__grid.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}






/* ===============================
   BODY LOCK
================================= */
body.is-loading {
    overflow: hidden;
}

body.is-loading main,
body.is-loading section {
    opacity: 0;
}


/* ===============================
   INTRO OVERLAY
================================= */
#intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(circle at 50% 40%,
            rgba(0, 0, 0, 0.03),
            transparent 60%),
        linear-gradient(180deg,
            #ffffff 0%,
            #f6f6f6 100%);

    transition:
        opacity 0.9s ease,
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}





/* ===============================
   HIDE ANIMATION
================================= */
#intro-overlay.hide {
    opacity: 0;
    transform: scale(1.08) translateY(-30px);
}


/* ===============================
   INTRO CONTENT
================================= */
.intro-content {
    text-align: center;
    position: relative;
}


/* gi?i h?n v���ng shine ����ng theo logo */
.intro-logo {
    font-size: 120px;
    line-height: 1;
    margin: 0;
    text-align: center;

    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* logo img reveal */
.intro-logoImg {
    height: 1em;
    width: auto;
    display: block;
    margin: 0 auto;

    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px) scale(.98);
    animation: logoReveal .6s ease .1s forwards;
    will-change: opacity, transform, filter;
}

/* sub reveal (sau logo) */

/* Shine sweep effect (gi? nh? b?n ���ang d���ng) */
.intro-logo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
            transparent 30%,
            rgba(255, 255, 255, 0.7) 50%,
            transparent 70%);
    transform: translateX(-120%);
    animation: shine 1.5s ease 1s forwards;
}

/* keyframes */
@keyframes logoReveal {
    to {
        opacity: 1;
        filter: blur(0);
        transform: none;
    }
}

@keyframes subReveal {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes shine {
    to {
        transform: translateX(120%);
    }
}



/*--------------- Sticky CTA --------------*/

:root {
    --ctaSticky-h: 0px;
}

.ctaSticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;

    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: rgba(60, 60, 60, .92);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, .10);

    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
}

.ctaSticky.is-show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ? Grid fix: mobile x?p d?c, desktop: text tr���i - n���t ph?i */
.ctaSticky__inner {
    max-width: 820px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;
    /* mobile: 1 c?t */
    row-gap: 12px;
    align-items: center;
    justify-items: center;
    /* ? tr���nh item b? stretch */
}

/* ? N���t: ���m ����ng ?nh, kh���ng b? k���o r?ng */
.ctaSticky__btn {
    position: relative;
    overflow: hidden;
    /* c?t hi?u ?ng trong ph?m vi n���t */
    display: inline-block;
    padding: 0;
    line-height: 0;
    text-decoration: none;
    border-radius: 999px;
    /* n?u n���t bo tr���n */

    justify-self: center;
    /* ? quan tr?ng: kh���ng stretch trong grid */
}

/* ? ?nh n���t: ���? 100% theo n���t */
.ctaSticky__btnImg{
  width: 520px;
  height: auto;
  display: block;
}


@media (max-width: 1024px){
  .ctaSticky__btnImg{
    width: 86vw;
  }
}

/* ? Shine nh? g?n, v?a n���t */
.ctaSticky__btn::after {
    content: "";
    position: absolute;
    top: -10%;
    left: -30%;
    height: 120%;
    width: clamp(18px, 7%, 44px);
    /* lu���n h?p, kh���ng th���nh m?ng to */
    pointer-events: none;

    border-radius: inherit;
    transform: rotate(25deg);
    opacity: 0;
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(30deg);
    transition: none;
    pointer-events: none;
}

.ctaSticky__btn:hover::after,
.ctaSticky__btn:active::after,
.ctaSticky__btn:focus-visible::after {
    left: 120%;
    opacity: 1;
    transition: left .55s cubic-bezier(.23, 1, .32, 1), opacity .12s ease;
}

.ctaSticky__bonus {
    margin: 10px 0 10px;
    font-size: 32px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .92);
    font-weight: 350;
}