@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Dancing+Script:wght@500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap');

/* ==========================================================================
   GHI CHÚ: BẢNG MÀU CHỦ ĐẠO & PHÔNG CHỮ ĐẸP
   - --font-heading:     Phông tiêu đề sang trọng, cổ điển (Cormorant Garamond)
   - --font-body:        Phông nội dung văn học, mềm mại (Lora)
   - --font-handwriting: Phông chữ viết tay lãng mạn (Dancing Script)
   - --font-sans:        Phông không chân thanh lịch cho nhãn, nút bấm (Plus Jakarta Sans)
   ========================================================================== */
:root {
    --cream: #f5efe4;
    --ink: #3c5348;
    --sage: #7f967c;
    --rose: #b86975;
    --pink: #e5b3b7;

    /* PHÔNG CHỮ NGHỆ THUẬT CAO CẤP HỖ TRỢ TIẾNG VIỆT */
    --font-heading: 'Cormorant Garamond', 'Lora', Georgia, serif;
    --font-body: 'Lora', 'Cormorant Garamond', Georgia, serif;
    --font-handwriting: 'Dancing Script', 'Caveat', cursive;
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

html {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    -webkit-touch-callout: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    -webkit-touch-callout: none;
}

:focus,
:active,
:focus-visible {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    -webkit-touch-callout: none;
}

button {
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    outline: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
}

button:focus,
button:active,
button:focus-visible,
button:disabled {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    box-shadow: none;
}

        [hidden] {
            display: none !important
        }

        h1,
        h2,
        p {
            margin-top: 0
        }

        h1 {
            font-family: var(--font-heading);
            font-size: clamp(48px, 6vw, 90px);
            font-weight: 600;
            line-height: 1.07;
            letter-spacing: -1.5px;
            margin-bottom: 25px
        }

        h1 em,
        h2 em {
            font-family: var(--font-handwriting);
            color: var(--rose);
            font-weight: 700;
            font-size: 1.15em;
            font-style: normal;
            display: inline-block;
        }

        h2 {
            font-family: var(--font-heading);
            font-size: clamp(32px, 4.2vw, 57px);
            line-height: 1.17;
            font-weight: 600;
            letter-spacing: -0.5px;
            margin-bottom: 18px
        }

        .eyebrow {
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 600;
            line-height: 1.7;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 23px;
            color: #7b8b74
        }

        .eyebrow:before {
            content: '✳';
            margin-right: 12px;
            color: #b86975
        }

        .lead {
            font-family: var(--font-sans);
            font-size: 14.5px;
            font-weight: 400;
            line-height: 1.9;
            color: #7a7f70;
            max-width: 380px
        }

        .scene {
            min-height: 100svh;
            animation: enter .8s ease both
        }

        .paper {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 25;
            opacity: .19;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.15' filter='url(%23n)'/%3E%3C/svg%3E")
        }

        .front {
            padding: 65px 6vw 35px;
            display: grid;
            grid-template-columns: .85fr 1.3fr;
            align-items: center;
            gap: 25px;
            max-width: 1500px;
            margin: auto;
            min-height: 100svh
        }

        .front-copy {
            padding-left: 3vw
        }

        .date-label {
            display: inline-block;
            border-bottom: 1px solid #b9bfae;
            padding-bottom: 12px;
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 2px;
            margin-bottom: 33px
        }

        .front .lead {
            margin-bottom: 28px
        }

        .tiny {
            font-family: var(--font-sans);
            font-size: 10.5px;
            font-weight: 500;
            line-height: 1.7;
            letter-spacing: 1.5px;
            color: #8f9382
        }

        .shop-wrap {
            position: relative;
            width: 100%;
            max-width: 750px;
            justify-self: center
        }

        .shop {
            width: 100%;
            height: auto;
            display: block;
            filter: drop-shadow(0 17px 14px #5c70500b)
        }

        .shop-glow {
            opacity: 0;
            transition: opacity 1.2s
        }

        .shop-wrap.open .shop-glow {
            opacity: 1
        }

        .shop-door {
            transform-box: fill-box;
            transform-origin: left center;
            transition: transform 1.3s cubic-bezier(.4, 0, .2, 1)
        }

        .shop-wrap.open .shop-door {
            transform: scaleX(.12);
            opacity: 1
        }

        .bell-button {
            position: absolute;
            right: 23%;
            top: 41%;
            width: 54px;
            height: 66px;
            border: 0;
            background: transparent !important;
            display: grid;
            place-items: center;
            border-radius: 50%;
            transition: transform .2s;
            filter: drop-shadow(0 3px 2px #7d613622);
            outline: none !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -webkit-touch-callout: none !important;
        }

        .bell-button:focus,
        .bell-button:active,
        .bell-button:focus-visible {
            outline: none !important;
            background: transparent !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
        }

        .bell-button svg {
            width: 38px;
            height: 46px;
            transform-origin: 50% 10%;
            animation: bellSway 3.5s ease-in-out infinite
        }

        .bell-button:after {
            content: '';
            position: absolute;
            inset: 5px;
            border: 1px solid #b19b6440;
            border-radius: 50%;
            animation: ringPulse 3s ease-out infinite
        }

        .shop-caption {
            text-align: center;
            font-family: var(--font-body);
            font-style: italic;
            font-size: 16.5px;
            line-height: 1.8;
            color: #7c806e;
            margin: 0
        }

        .sign-text {
            font-family: var(--font-handwriting);
            font-size: 15px;
            font-weight: 600;
            fill: #53674e
        }

        .welcome {
            position: absolute;
            left: 15%;
            right: 15%;
            bottom: 2%;
            text-align: center;
            background: #f5efdfec;
            border: 1px solid #d6c7ac;
            padding: 12px;
            border-radius: 8px;
            font-family: var(--font-body);
            font-size: 18px;
            animation: enter .7s both
        }

        .primary {
            border: 0;
            background: #596f58;
            color: #fff6e6;
            border-radius: 40px;
            padding: 15px 25px;
            font-family: var(--font-sans);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.5px;
            box-shadow: 0 8px 25px #566d4e13;
            transition: transform .2s;
            outline: none !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -webkit-touch-callout: none !important;
        }

        .primary:focus,
        .primary:active,
        .primary:focus-visible {
            outline: none !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
        }

        .text-button {
            border: 0;
            background: none;
            padding: 12px;
            color: #7d7068;
            font: 11px Arial, sans-serif;
            text-decoration: underline;
            text-underline-offset: 5px
        }

        .inside {
            padding: 50px 5vw 35px;
            max-width: 1200px;
            margin: auto;
            text-align: center
        }

        .inside-head {
            max-width: 680px;
            margin: auto
        }

        .inside-head p {
            margin-bottom: 16px
        }

        .choose-layout {
            display: grid;
            grid-template-columns: 1.25fr 1fr;
            align-items: center;
            gap: 35px;
            min-height: 440px;
            margin-top: 10px
        }

        .flower-shelf {
            display: flex;
            justify-content: center;
            align-items: end;
            gap: 5px;
            position: relative;
            padding: 35px 0 45px
        }

        .flower-shelf:after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 39px;
            height: 11px;
            border-radius: 8px;
            background: #c5af93;
            box-shadow: 0 14px 0 -4px #e3d4bf, 0 22px 35px #736e4512;
            z-index: -1
        }

        .flower-choice {
            width: 20%;
            max-width: 130px;
            border: 0;
            padding: 5px 0;
            background: transparent !important;
            background-color: transparent !important;
            color: var(--ink);
            transition: transform .35s, opacity .35s;
            position: relative;
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
            -webkit-focus-ring-color: transparent !important;
            -webkit-touch-callout: none !important;
            user-select: none !important;
            -webkit-user-select: none !important;
        }

        .flower-choice:focus,
        .flower-choice:active,
        .flower-choice:focus-visible,
        .flower-choice:disabled {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
            background-color: transparent !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
        }

        .flower-choice * {
            -webkit-tap-highlight-color: transparent !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -webkit-touch-callout: none !important;
        }

        .flower-choice svg {
            display: block;
            width: 100%;
            height: 230px;
            overflow: visible;
            filter: drop-shadow(3px 5px 2px #4763470e)
        }

        .flower-choice span {
            display: block;
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 500;
            margin-top: 15px;
            color: #75816d;
            white-space: nowrap
        }

        .flower-choice.selected {
            opacity: .24;
            transform: translateY(5px)
        }

        .flower-choice.selected:after {
            content: '✓';
            position: absolute;
            top: 35%;
            left: calc(50% - 15px);
            background: #6c8567;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-family: var(--font-sans);
            font-size: 14px
        }

        .bouquet-space {
            position: relative;
            width: 100%;
            max-width: 390px;
            margin: 0 auto;
            height: 370px
        }

        .bouquet-vase {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            overflow: visible
        }

        .bouquet-flower {
            position: absolute;
            left: 50%;
            top: 5%;
            width: 115px;
            height: 230px;
            transform-origin: 50% 93%;
            transform: translateX(-50%) rotate(var(--angle));
            animation: bloomIn .65s ease both;
            filter: drop-shadow(2px 4px 2px #586d4416)
        }

        .bouquet-flower svg {
            height: 100%;
            width: 100%;
            overflow: visible
        }

        .bouquet-paper {
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
            width: 100%;
            height: 100%;
            filter: drop-shadow(3px 10px 8px #9c806418)
        }

        .empty-bouquet {
            position: absolute;
            top: 55px;
            left: 15%;
            right: 15%;
            font-family: var(--font-body);
            font-style: italic;
            font-size: 21px;
            line-height: 1.5;
            color: #9ca48c
        }

        .selection-caption {
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 2px;
            color: #8c967e;
            margin: 0
        }

        .message-area {
            min-height: 105px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 10px auto 0;
            max-width: 660px
        }

        .flower-message {
            font-family: var(--font-body);
            font-style: italic;
            font-size: 22px;
            line-height: 1.6;
            color: #93636b;
            margin: 0 0 8px
        }

        .message-photo {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border: 4px solid white;
            transform: rotate(6deg);
            box-shadow: 0 4px 12px #52603c20;
            cursor: pointer
        }

        .next-area {
            min-height: 55px;
            margin-top: 12px
        }

        .flying-flower {
            position: fixed;
            width: 100px;
            height: 170px;
            pointer-events: none;
            z-index: 30;
            transition: transform .7s ease, opacity .7s
        }

        .flying-flower svg {
            width: 100%;
            height: 100%;
            overflow: visible
        }

        .wrap-scene {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 50px 24px;
            min-height: 100svh
        }

        .wrap-scene .bouquet-space {
            height: 400px;
            max-width: 420px;
            margin-top: 10px
        }

        .wrap-scene .bouquet-paper {
            animation: paperWrap 1.4s ease both
        }

        .bow-button {
            position: absolute;
            z-index: 5;
            left: calc(50% - 78px);
            bottom: 43px;
            width: 156px;
            height: 85px;
            background: transparent !important;
            border: 0;
            padding: 0;
            filter: drop-shadow(0 4px 3px #6e43491c);
            outline: none !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -webkit-touch-callout: none !important;
        }

        .bow-button:focus,
        .bow-button:active,
        .bow-button:focus-visible {
            outline: none !important;
            background: transparent !important;
            box-shadow: none !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
        }

        .bow-button svg {
            width: 100%;
            height: 100%;
            overflow: visible
        }

        .bow-loops {
            opacity: .35;
            transform: scaleX(.8);
            transform-origin: center;
            transition: transform 1s, opacity 1s
        }

        .tied .bow-loops {
            opacity: 1;
            transform: scaleX(1)
        }

        .bow-tails {
            transform-origin: 50% 0;
            animation: sway 4s ease-in-out infinite
        }

        .gift-tag {
            position: absolute;
            z-index: 10;
            top: 60%;
            left: 57%;
            min-width: 110px;
            padding: 12px 14px 10px;
            background: #fffdf9;
            border: 1px solid #ebd9c8;
            border-radius: 9px;
            box-shadow: 0 10px 25px rgba(92, 60, 40, 0.16), 0 2px 6px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transform: rotate(6deg);
            transform-origin: 20% 0%;
            animation: tagAppearBounce 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) both;
            cursor: pointer;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            outline: none !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -webkit-touch-callout: none !important;
        }

        .gift-tag:focus,
        .gift-tag:active,
        .gift-tag:focus-visible {
            outline: none !important;
            -webkit-tap-highlight-color: transparent !important;
        }

        .gift-tag::before {
            content: '';
            position: absolute;
            top: 2px;
            left: -22px;
            width: 28px;
            height: 20px;
            border-top: 2.5px solid #b56a79;
            border-left: 2.5px solid #b56a79;
            border-top-left-radius: 18px;
            transform: rotate(-10deg);
            pointer-events: none;
            z-index: -1;
        }

        .tag-eyelet {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #fdf5ea;
            border: 2px solid #caa87b;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
            margin-bottom: 3px;
            flex-shrink: 0;
        }

        .tag-message {
            font-family: var(--font-handwriting);
            font-size: 20px;
            font-weight: 700;
            line-height: 1.3;
            color: #8c4c58;
            text-align: center;
            margin-bottom: 5px;
            white-space: nowrap;
        }

        .tag-action {
            font-family: var(--font-sans);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 1.5px;
            color: #ffffff;
            background: linear-gradient(135deg, #c77b89, #b05c6d);
            padding: 4px 12px;
            border-radius: 20px;
            box-shadow: 0 3px 10px rgba(176, 92, 109, 0.35);
            text-transform: uppercase;
            animation: pulseBadge 2s ease-in-out infinite;
        }

        @keyframes tagAppearBounce {
            0% {
                opacity: 0;
                transform: scale(0.6) rotate(-8deg) translateY(-15px);
            }
            70% {
                opacity: 1;
                transform: scale(1.05) rotate(8deg) translateY(2px);
            }
            100% {
                opacity: 1;
                transform: scale(1) rotate(6deg) translateY(0);
            }
        }

        @keyframes pulseBadge {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 3px 10px rgba(176, 92, 109, 0.35);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 5px 16px rgba(176, 92, 109, 0.6);
            }
        }

        .wrap-hint {
            font-family: var(--font-body);
            font-style: italic;
            font-size: 16.5px;
            line-height: 1.8;
            color: #8d8776;
            margin: 10px 0 0;
            min-height: 30px
        }

        .card {
            border: 1px solid #dfc9b6;
            background: #fff9ee;
            color: var(--ink);
            border-radius: 5px;
            width: min(900px, calc(100% - 28px));
            max-height: 88svh;
            overflow: auto;
            padding: 45px;
            box-shadow: 0 25px 100px #253c3555
        }

        .card::backdrop,
        .photo-viewer::backdrop {
            background: #394e3d70;
            backdrop-filter: blur(7px)
        }

        .card-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 40px
        }

        .card h2 {
            font-family: var(--font-heading);
            font-style: italic;
            font-size: 32px;
            color: #ac6a75
        }

        .card p {
            font-family: var(--font-body);
            font-size: 15.5px;
            line-height: 1.95;
            white-space: pre-line
        }

        .card figure {
            margin: 45px 0 0;
            padding: 12px 12px 20px;
            background: #fffefa;
            transform: rotate(4deg);
            box-shadow: 0 7px 25px #5e6d4020;
            position: relative
        }

        .card figure:before {
            content: '';
            position: absolute;
            top: -12px;
            left: 35%;
            width: 80px;
            height: 25px;
            background: #ddcdaa90;
            transform: rotate(-7deg)
        }

        .card figure img {
            display: block;
            width: 100%;
            aspect-ratio: 3/4;
            object-fit: cover
        }

        .card figcaption {
            font-family: var(--font-body);
            font-style: italic;
            font-size: 14px;
            line-height: 1.6;
            text-align: center;
            color: #978774;
            margin-top: 15px
        }

        .card-footer {
            text-align: center;
            margin-top: 28px
        }

        .close {
            float: right;
            border: 0;
            background: none;
            color: #8a8c76;
            font-size: 24px;
            padding: 0 0 12px 12px
        }

        .garden {
            min-height: 100svh;
            position: relative;
            overflow: hidden;
            padding: 65px 20px 280px;
            background: linear-gradient(#f0e6d7, #e8e1c9 60%, #c4cdb0);
            text-align: center;
            isolation: isolate
        }

        .garden-sun {
            position: absolute;
            right: 13%;
            top: 7%;
            width: 100px;
            height: 100px;
            background: #fff4ce;
            border-radius: 50%;
            box-shadow: 0 0 80px #fff1baaa;
            z-index: -1
        }

        .garden-copy {
            position: relative;
            z-index: 3;
            max-width: 750px;
            margin: auto
        }

        .garden-copy h2 {
            font-size: clamp(35px, 5.5vw, 67px);
            text-shadow: 0 2px 15px #f5ead8
        }

        .garden-copy .lead {
            margin: 15px auto;
            max-width: 500px
        }

        .garden-ground {
            position: absolute;
            bottom: -80px;
            left: -10%;
            width: 120%;
            height: 290px;
            border-radius: 50%;
            background: #98ae83;
            box-shadow: 0 -35px 0 #b5c39c55;
            z-index: -1
        }

        .garden-flowers {
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 310px;
            z-index: 2;
            pointer-events: none
        }

        .garden-flower {
            position: absolute;
            bottom: 0;
            width: 100px;
            height: var(--height);
            transform-origin: 50% 100%;
            animation: gardenBloom 1.5s ease both;
            animation-delay: var(--delay);
            filter: drop-shadow(3px 5px 2px #4b634a16)
        }

        .garden-flower svg {
            width: 100%;
            height: 100%;
            overflow: visible;
            animation: sway 5s ease-in-out infinite alternate;
            animation-delay: var(--delay)
        }

        .photos-line {
            position: relative;
            max-width: 900px;
            display: flex;
            justify-content: center;
            gap: 25px;
            margin: 50px auto 20px;
            padding: 15px 10px 25px;
            z-index: 3
        }

        .photos-line:before {
            content: '';
            position: absolute;
            top: 0;
            left: -15%;
            width: 130%;
            height: 50px;
            border-top: 1px solid #8b987599;
            border-radius: 50%
        }

        .memory-photo {
            position: relative;
            width: 150px;
            border: 0;
            padding: 8px 8px 24px;
            background: #fffbf0;
            box-shadow: 0 8px 22px #45553320;
            transform: rotate(var(--r));
            animation: photoArrive 1s both;
            animation-delay: var(--d);
            color: #8a7b69;
            outline: none !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
        }

        .memory-photo:before {
            content: '';
            position: absolute;
            width: 9px;
            height: 25px;
            top: -15px;
            left: calc(50% - 4px);
            background: #b39e79;
            border: 1px solid #a38f69;
            border-radius: 2px;
            z-index: 2
        }

        .memory-photo img {
            width: 100%;
            height: 145px;
            object-fit: cover;
            display: block
        }

        .memory-photo span {
            display: block;
            font: italic 12px Georgia;
            margin-top: 12px
        }

        .garden-note {
            position: relative;
            z-index: 3;
            color: #60734f;
            font: italic 16px/1.7 Georgia
        }

        .petals {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: 4
        }

        .petal {
            position: absolute;
            top: -30px;
            width: 12px;
            height: 18px;
            background: #e4a6b4;
            border-radius: 70% 0 70% 10%;
            opacity: .7;
            animation: petalFall linear infinite;
            animation-delay: var(--d)
        }

        .firefly {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #ffffd8;
            box-shadow: 0 0 10px 4px #ffffb488;
            animation: firefly 4s ease-in-out infinite;
            pointer-events: none;
            z-index: 4
        }

        .garden-back {
            position: relative;
            z-index: 5;
            margin-top: 15px
        }

        .photo-viewer {
            border: 0;
            background: #fff8ea;
            color: var(--ink);
            padding: 20px;
            max-width: 600px;
            width: calc(100% - 35px);
            border-radius: 5px;
            max-height: 90svh
        }

        .photo-viewer img {
            width: 100%;
            max-height: 70svh;
            object-fit: contain;
            display: block
        }

        .photo-viewer p {
            text-align: center;
            margin: 14px 0 4px;
            font-style: italic
        }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap
        }

        .sleep * {
            animation-play-state: paused !important
        }

        @keyframes enter {
            from {
                opacity: 0;
                translate: 0 14px
            }

            to {
                opacity: 1;
                translate: 0 0
            }
        }

        @keyframes bellSway {

            0%,
            70%,
            100% {
                transform: rotate(0)
            }

            80% {
                transform: rotate(9deg)
            }

            90% {
                transform: rotate(-9deg)
            }
        }

        @keyframes ringPulse {
            0% {
                scale: .8;
                opacity: 0
            }

            40% {
                opacity: .7
            }

            100% {
                scale: 1.5;
                opacity: 0
            }
        }

        @keyframes bloomIn {
            from {
                opacity: 0;
                translate: 0 -25px
            }

            to {
                opacity: 1;
                translate: 0 0
            }
        }

        @keyframes paperWrap {
            from {
                transform: scaleX(.75);
                opacity: .4
            }

            to {
                transform: scaleX(1);
                opacity: 1
            }
        }

        @keyframes tagAppear {
            from {
                opacity: 0;
                translate: 0 -15px
            }

            to {
                opacity: 1;
                translate: 0 0
            }
        }

        @keyframes sway {
            50% {
                rotate: 3deg
            }

            100% {
                rotate: -2deg
            }
        }

        @keyframes gardenBloom {
            from {
                transform: scale(.05);
                opacity: 0
            }

            to {
                transform: scale(1);
                opacity: 1
            }
        }

        @keyframes photoArrive {
            from {
                opacity: 0;
                translate: 0 -25px
            }

            to {
                opacity: 1;
                translate: 0 0
            }
        }

        @keyframes petalFall {
            to {
                transform: translate(100px, 110svh) rotate(480deg)
            }
        }

        @keyframes firefly {
            50% {
                opacity: .2;
                transform: translate(12px, -20px)
            }
        }

        /* ==========================================================================
           HIỆU ỨNG HOVER CHỈ ÁP DỤNG TRÊN MÁY TÍNH (CHUỘT FINE POINTER)
           Tuyệt đối không chạy trên điện thoại cảm ứng để tránh dính bóng đen
           ========================================================================== */
        @media (hover: hover) and (pointer: fine) {
            .bell-button:hover {
                transform: scale(1.12);
            }

            .primary:hover {
                transform: translateY(-3px);
            }

            .flower-choice:hover {
                transform: translateY(-12px) rotate(-3deg);
            }

            .gift-tag:hover {
                transform: rotate(3deg) scale(1.06) translateY(-3px) !important;
                box-shadow: 0 16px 36px rgba(100, 60, 40, 0.22), 0 0 18px rgba(229, 179, 183, 0.45);
            }

            .memory-photo:hover {
                scale: 1.06;
            }

            #letter .close:hover {
                background: #e9dccb;
            }

            #letter figure:hover {
                transform: rotate(0deg) scale(1.03);
                box-shadow: 0 12px 28px rgba(104, 92, 66, 0.2);
            }
        }

        /* Triệt tiêu hoàn toàn hiệu ứng dính hover & bóng đen trên màn hình cảm ứng */
        @media (hover: none), (pointer: coarse) {
            .flower-choice:hover,
            .flower-choice:active,
            .flower-choice:focus {
                transform: none;
                background: transparent !important;
                background-color: transparent !important;
                box-shadow: none !important;
                outline: none !important;
            }

            .bell-button:hover,
            .bell-button:active,
            .bell-button:focus {
                transform: none;
                background: transparent !important;
                box-shadow: none !important;
                outline: none !important;
            }

            .primary:hover,
            .primary:active,
            .primary:focus {
                transform: none;
                outline: none !important;
            }

            .bow-button:hover,
            .bow-button:active,
            .bow-button:focus {
                background: transparent !important;
                outline: none !important;
                box-shadow: none !important;
            }

            .gift-tag:hover,
            .gift-tag:active,
            .gift-tag:focus {
                outline: none !important;
                background: #fffdf9 !important;
            }
        }

        @media(max-width:700px) {
            .front {
                display: flex;
                flex-direction: column;
                padding: 35px 20px 20px;
                gap: 0;
                justify-content: center
            }

            .front-copy {
                text-align: center;
                padding: 0
            }

            .date-label {
                font-size: 8px;
                margin-bottom: 20px
            }

            .front h1 {
                font-size: 49px;
                letter-spacing: -2px;
                margin-bottom: 16px
            }

            .front .lead {
                font-size: 12px;
                margin: 0 auto 6px
            }

            .front .tiny {
                display: none
            }

            .shop-wrap {
                max-width: 460px
            }

            .bell-button {
                width: 44px;
                height: 55px;
                right: 21%;
                top: 39%
            }

            .bell-button svg {
                width: 28px
            }

            .shop-caption {
                font-size: 13px
            }

            .inside {
                padding: 35px 15px
            }

            .inside-head h2 {
                font-size: 33px
            }

            .choose-layout {
                grid-template-columns: 1fr;
                gap: 0;
                min-height: 0
            }

            .flower-shelf {
                padding: 15px 0 27px;
                max-width: 440px;
                margin: auto;
                width: 100%
            }

            .flower-shelf:after {
                bottom: 25px
            }

            .flower-choice,
            .flower-choice:hover,
            .flower-choice:focus,
            .flower-choice:active,
            .flower-choice:disabled {
                background: transparent !important;
                background-color: transparent !important;
                outline: none !important;
                box-shadow: none !important;
                -webkit-tap-highlight-color: transparent !important;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
            }

            .flower-choice svg {
                height: 145px
            }

            .flower-choice span {
                font-size: 8px;
                margin-top: 6px
            }

            .bouquet-space {
                height: 260px;
                max-width: 285px
            }

            .bouquet-flower {
                width: 85px;
                height: 170px;
                top: 4%
            }

            .empty-bouquet {
                font-size: 17px;
                top: 30px
            }

            .flower-message {
                font-size: 17px
            }

            .message-area {
                min-height: 80px
            }

            .wrap-scene .bouquet-space {
                max-width: 360px;
                height: 360px
            }

            .wrap-scene .bouquet-flower {
                width: 105px;
                height: 217px
            }

            .card {
                padding: 28px 25px
            }

            .card-grid {
                grid-template-columns: 1fr;
                gap: 5px
            }

            .card h2 {
                font-size: 27px
            }

            .card p {
                font-size: 14px
            }

            .card figure {
                width: 70%;
                max-width: 250px;
                margin: 10px auto
            }

            .garden {
                padding-top: 45px;
                padding-bottom: 250px
            }

            .photos-line {
                gap: 12px;
                margin: 35px auto 15px;
                flex-wrap: wrap;
                max-width: 400px
            }

            .memory-photo {
                width: calc(45% - 10px);
                max-width: 145px;
                padding: 6px 6px 17px
            }

            .memory-photo img {
                height: 115px
            }

            .memory-photo:nth-child(n+5) {
                display: none
            }

            .garden-flowers {
                height: 260px
            }

            .garden-sun {
                width: 65px;
                height: 65px;
                right: 7%;
                top: 3%
            }

            .eyebrow {
                font-size: 8px;
                letter-spacing: 2px
            }

            .welcome {
                font-size: 14px;
                padding: 8px
            }
        }

        @media(prefers-reduced-motion:reduce) {

            *,
            *:before,
            *:after {
                animation: none !important;
                transition: none !important
            }

            .petal {
                display: none
            }

            .garden-flower {
                transform: scale(1)
            }

            .shop-wrap.open .shop-door {
                transform: none;
                opacity: .2
            }
        }

        /* Rounded florist bouquet: clustered blooms, foliage and layered wrapping. */
        .bouquet-space {
            aspect-ratio: 400/390;
            height: auto;
            width: 100%;
            max-width: 400px;
            isolation: isolate
        }

        .bouquet-cluster,
        .bouquet-foliage {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none
        }

        .bouquet-cluster {
            animation: bloomIn .7s ease both;
            filter: drop-shadow(1px 3px 2px #52624113)
        }

        .bouquet-cluster svg {
            display: block;
            width: 100%;
            height: 100%;
            overflow: visible
        }

        .bouquet-foliage {
            z-index: -1;
            opacity: .85
        }

        .bouquet-paper {
            z-index: 6
        }

        .empty-bouquet {
            z-index: 7;
            background: #f5efe4c9;
            border-radius: 30px;
            padding: 12px 3px
        }

        .wrap-scene .bouquet-space {
            max-width: 460px;
            height: auto;
            margin-top: 32px;
            margin-bottom: 10px
        }

        .bow-button {
            z-index: 8;
            left: calc(50% - 73px);
            bottom: 6%;
            width: 146px;
            height: 88px
        }
        .gift-tag:focus:not(:focus-visible) {
            outline: none
        }

        @media(max-width:700px) {
            .bouquet-space {
                max-width: 300px;
                height: auto
            }

            .wrap-scene .bouquet-space {
                max-width: 360px;
                width: calc(100vw - 50px);
                height: auto;
                margin-top: 28px
            }

            .bow-button {
                width: 120px;
                height: 72px;
                left: calc(50% - 60px);
                bottom: 5%
            }

            .wrap-scene {
                padding-left: 25px;
                padding-right: 25px
            }
        }

        /* Align the bow with the gathered waist of the wrapping. */
        .bow-button {
            top: 68%;
            bottom: auto;
            left: calc(50% - 66px);
            width: 132px;
            height: 80px
        }

        @media(max-width:700px) {
            .bow-button {
                top: 67%;
                bottom: auto;
                left: calc(50% - 55px);
                width: 110px;
                height: 70px
            }
        }

        /* Keep the bloom canopy open; contain stems within the paper sleeve. */
        .bouquet-cluster,
        .bouquet-foliage {
            clip-path: polygon(0 0, 100% 0, 100% 42%, 82% 42%, 77% 51%, 67% 65%, 58% 78%, 50% 88%, 42% 78%, 33% 65%, 23% 51%, 18% 42%, 0 42%)
        }

        #wrap {
            padding: 32px 24px;
            min-height: 100svh;
            gap: 0
        }

        #wrap .eyebrow {
            margin-bottom: 18px
        }

        #wrap h2 {
            margin-bottom: 12px
        }

        #wrap .bouquet-space {
            width: min(420px, calc(100vw - 64px));
            max-width: 100%;
            flex-shrink: 0;
            margin-top: 14px;
            margin-bottom: 8px
        }

        #wrap .wrap-hint {
            max-width: 400px;
            margin: 8px auto 0;
            padding: 0 8px
        }

        @media(min-height:650px) {
            #wrap .bouquet-space {
                width: min(420px, calc(100vw - 64px), calc((100svh - 250px)*1.0256))
            }
        }

        @media(max-width:700px) {
            #wrap {
                padding: 25px 22px
            }

            #wrap h2 {
                font-size: 32px
            }

            #wrap .bouquet-space {
                max-width: 340px
            }

            .gift-tag {
                top: 59%;
                left: 54%;
                min-width: 100px;
                padding: 10px 11px 8px;
            }

            .tag-message {
                font-size: 17px;
            }

            .tag-action {
                font-size: 8.5px;
                padding: 3.5px 10px;
            }

            #wrap .wrap-hint {
                font-size: 14px
            }
        }

        /* One shared silhouette: backing paper surrounds every bloom, sleeve covers stems. */
        .bouquet-back-wrap {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: -3;
            pointer-events: none;
            filter: drop-shadow(0 5px 5px #6d5b3714)
        }

        .bouquet-cluster {
            transform: translateY(12px) scale(.77);
            transform-origin: 50% 30%;
            clip-path: none
        }

        .bouquet-foliage {
            transform: translateY(14px) scale(.77);
            transform-origin: 50% 30%;
            clip-path: none
        }

        .bouquet-paper {
            z-index: 6
        }

        /* Rebalance the bouquet: flowers lead, paper forms a narrow supporting rim. */
        .bouquet-cluster {
            transform: translateY(-3px) scale(.9);
            transform-origin: 50% 30%
        }

        .bouquet-foliage {
            transform: translateY(4px) scale(.84);
            transform-origin: 50% 30%
        }

        .bouquet-back-wrap {
            transform: translateY(10px) scale(.82);
            transform-origin: 50% 76%
        }

        .bouquet-paper {
            transform: scaleX(.87);
            transform-origin: 50% 78%
        }

        .wrap-scene .bouquet-paper {
            animation: balancedPaperWrap 1.1s ease both
        }

        @keyframes balancedPaperWrap {
            from {
                transform: scaleX(.77);
                opacity: .4
            }

            to {
                transform: scaleX(.87);
                opacity: 1
            }
        }

        @media(prefers-reduced-motion:reduce) {
            .wrap-scene .bouquet-paper {
                animation: none !important;
                transform: scaleX(.87)
            }
        }

        .shop-wrap.open .bell-button {
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s
        }

        .next-area:has([hidden]) {
            display: none
        }

        #wrapButton {
            animation: enter .45s ease both
        }

        /* A centered letter with a compact photograph and continuous text flow. */
        #letter {
            position: fixed;
            inset: 0;
            margin: auto;
            width: min(780px, calc(100vw - 32px));
            height: fit-content;
            max-height: calc(100svh - 48px);
            padding: 40px 42px 32px;
            border: 1px solid #e1cfba;
            border-radius: 14px;
            background: #fffaf1;
            box-shadow: 0 24px 90px #283b3950;
            overflow: auto;
            scrollbar-width: thin;
            scrollbar-color: #c8b9a5 transparent;
            font-family: var(--font-body);
            color: #4b5147
        }

        #letter[open] {
            animation: letterAppear .35s ease both
        }

        #letter .card-grid {
            display: flow-root
        }

        #letter .close {
            position: absolute;
            right: 13px;
            top: 12px;
            float: none;
            width: 34px;
            height: 34px;
            padding: 0;
            border-radius: 50%;
            background: #f2eadd;
            color: #8c7b6a;
            font: 20px/1 var(--font-sans);
            display: grid;
            place-items: center;
            outline: none !important;
            -webkit-tap-highlight-color: transparent !important;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
            user-select: none;
            -webkit-user-select: none;
        }

        #letter .close:focus,
        #letter .close:active {
            outline: none !important;
            -webkit-tap-highlight-color: transparent !important;
        }

        #letter .eyebrow {
            font-family: var(--font-sans);
            font-size: 11px;
            font-weight: 600;
            line-height: 1.8;
            letter-spacing: 2px;
            color: #a17b68;
            margin: 0 28px 18px 0;
            white-space: normal
        }

        #letter h2 {
            font-family: var(--font-heading);
            font-style: italic;
            font-size: clamp(28px, 4.2vw, 36px);
            font-weight: 600;
            line-height: 1.35;
            letter-spacing: -.5px;
            margin: 0 0 24px;
            color: #ae6977
        }

        #letter figure {
            float: right;
            display: table;
            width: 32%;
            max-width: 220px;
            height: auto;
            margin: 3px 0 18px 24px;
            padding: 8px 8px 12px;
            transform: rotate(2deg);
            border: 1px solid #ebd8c8;
            border-radius: 6px;
            background: #fffefa;
            box-shadow: 0 8px 22px rgba(104, 92, 66, 0.14);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            -webkit-tap-highlight-color: transparent !important;
        }

        #letter figure:before {
            display: none
        }

        #letter figure img {
            width: 100%;
            height: auto;
            aspect-ratio: 3/4;
            object-fit: cover;
            border-radius: 3px;
            display: block;
            cursor: pointer;
        }

        #letter figcaption {
            font-family: var(--font-body);
            font-style: italic;
            font-size: 13.5px;
            line-height: 1.6;
            color: #9b8571;
            margin: 8px 2px 0
        }

        #letterText {
            font-family: var(--font-body);
            font-size: 16.5px;
            line-height: 2.1;
            letter-spacing: normal;
            white-space: pre-line;
            overflow-wrap: anywhere;
            margin: 0 0 20px
        }

        #letter .letter-signature {
            clear: both;
            text-align: right;
            font-family: var(--font-handwriting);
            font-size: 34px;
            font-weight: 700;
            line-height: 1.4;
            color: #ae6977;
            margin: 20px 0 0;
            white-space: normal
        }

        @keyframes letterAppear {
            from {
                opacity: 0;
                transform: translateY(10px) scale(.98)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        @media(max-width:520px) {
            #letter {
                width: calc(100vw - 24px);
                max-height: calc(100svh - 32px);
                padding: 36px 22px 26px;
                border-radius: 11px
            }

            #letter .eyebrow {
                font-size: 8px;
                letter-spacing: 1.5px
            }

            #letter h2 {
                margin-bottom: 20px
            }

            #letter figure {
                width: 38%;
                max-width: 145px;
                margin: 3px 0 13px 16px;
                padding: 5px 5px 7px
            }

            #letter figcaption {
                font-size: 10px
            }

            #letterText {
                font-size: 15px;
                line-height: 1.85
            }
        }