body {
    margin: 0;
    padding: 0;
   
}

#product-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    transition: background 0.6s ease;
}

.overlay-blue::before {
    background: linear-gradient(to right, rgba(210, 235, 255, 0.6) 0%, rgba(220, 240, 255, 0.3) 30%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0) 90%);
}

.overlay-purple::before {
    background: linear-gradient(to right, rgba(244, 226, 255, 0.65) 0%, rgba(232, 210, 255, 0.4) 30%, rgba(255, 255, 255, 0.1) 65%, rgba(255, 255, 255, 0) 90%);
}

.overlay-pink::before {
    background: linear-gradient(to right, rgba(255, 228, 252, 0.7) 0%, rgba(255, 212, 236, 0.4) 30%, rgba(255, 255, 255, 0.1) 65%, rgba(255, 255, 255, 0) 90%);
}

#product-section {
    width: 100%;
    min-height: 100vh;
    background: url('/TemplateWeb/assets/img/bg_blue.png') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: background-image 0.6s ease;
    padding-top: 40px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.buttons button {
    padding: 14px 32px;
    margin: 0 8px; /* ช่องว่างซ้าย–ขวา รวมระหว่างปุ่ม 16px */
    font-size: 16px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    color: #444;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(200, 200, 255, 0.2);
}

    .buttons button::before {
        content: "";
        position: absolute;
        top: -120%;
        left: -120%;
        width: 300%;
        height: 300%;
        background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 40%);
        transform: rotate(25deg);
        transition: all 0.6s ease;
    }

    .buttons button:hover::before {
        top: 0%;
        left: 0%;
    }

    .buttons button:hover {
        transform: scale(1.06);
        background: rgba(255, 255, 255, 0.2);
    }

    .buttons button.active.blue {
        background: linear-gradient(145deg, #a7d7ff, #d1ecff);
        color: #1a1a1a;
        border-color: #99d3ff;
        box-shadow: 0 0 12px rgba(100, 180, 255, 0.4);
    }

    .buttons button.active.purple {
        background: linear-gradient(145deg, #e4d0ff, #f3e8ff);
        color: #2a004f;
        border-color: #caaaff;
        box-shadow: 0 0 12px rgba(200, 150, 255, 0.3);
    }

    .buttons button.active.pink {
        background: linear-gradient(145deg, #ffcce8, #ffeaf5);
        color: #7c0033;
        border-color: #ffa8d5;
        box-shadow: 0 0 12px rgba(255, 120, 180, 0.3);
    }


.product-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 550px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 60px;
    padding-left: 10px;
    z-index: 10;
}

.product-img {
    position: absolute;
    transition: transform 0.6s ease, opacity 0.6s ease;
    cursor: pointer;
}

.move-left {
    transform: translateX(-200px) scale(0.6);
    opacity: 0.4;
    z-index: 1;
    height: 280px;
}

.move-center {
    transform: translateX(0) scale(1.3);
    opacity: 1;
    z-index: 3;
    height: 500px;
}

.move-right {
    transform: translateX(300px) scale(0.6);
    opacity: 0.4;
    z-index: 1;
    height: 280px;
}

.product-label {
    position: absolute;
    top: 220px;
    left: 260px;
    width: 320px;
    height: auto;
    z-index: 5;
    pointer-events: none;
    transform: scale(1.7);
    transform-origin: left top;
    transition: opacity 0.4s ease;
    opacity: 1;
}

.fade-out {
    opacity: 0;
}

.fade-in {
    opacity: 1;
}

/* 🎈 Bubble (ลอยลงจากบนตรงกลาง และลอยขึ้นหายไป) */
.bubble {
    position: absolute;
    top: 40px;
    left: 80%;
    transform: translateX(-50%);
    width: 200px;
    height: auto;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    background: transparent;
    mix-blend-mode: normal;
}

    .bubble.show {
        transition: all 0.8s ease;
        opacity: 1;
    }

    .bubble.enter-from-top {
        animation: bubbleEnterFromTop 0.6s ease-out forwards;
    }

    .bubble.floating {
        animation: floatBubble 6s ease-in-out infinite;
    }

    .bubble.fly-away {
        animation: bubbleFlyAwayTop 0.8s ease forwards;
    }
/* 🎈 Bubble ตำแหน่งเฉพาะ Relaxing */
.bubble-hand {
    top: 360px;
    left: 72%;
    width: 100px;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: floatBubble 3s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
}

.bubble-a {
    top: 0px;
    left: 30%;
    width: 80px;
    opacity: 0;
    transition: opacity 0.2s ease;
    animation: floatBubble 2s ease-in-out infinite;
}

.bubble-b {
    top: 400px;
    left: -10%;
    width: 200px;
    opacity: 0;
    transition: opacity 0.2s ease;
    animation: floatBubble 3s ease-in-out infinite;
}

.bubble-c {
    top: 460px;
    left: 60%;
    width: 70px;
    opacity: 0;
    transition: opacity 0.2s ease;
    animation: floatBubble 2s ease-in-out infinite;
}

.bubble-s {
    top: 0px;
    left: 60%;
    width: 280px;
    opacity: 0;
    transition: opacity 0.2s ease;
    animation: floatBubble 3s ease-in-out infinite;
}

/* Extra Mild */
.bubble-set-blue #bubble-a {
    top: -5px;
    left: 30%;
}

.bubble-set-blue #bubble-b {
    top: 40px;
    left: -9%;
}

.bubble-set-blue #bubble-c {
    top: 460px;
    left: 70%;
}

.bubble-set-blue #bubble-s {
    top: 420px;
    left: 50%;
}

.bubble-set-blue #bubble-purple {
    top: -70px;
    left: 75%;
}

.bubble-set-blue #bubble-hand {
    top: 99px;
    left: 58%;
}

/* Relaxing */
.bubble-set-purple #bubble-a {
    top: 0px;
    left: 28%;
}

.bubble-set-purple #bubble-b {
    top: 400px;
    left: -10%;
}

.bubble-set-purple #bubble-c {
    top: 460px;
    left: 60%;
}

.bubble-set-purple #bubble-s {
    top: -10px;
    left: 58%;
}

.bubble-set-purple #bubble-purple {
    top: 150px;
    left: 70%;
}

.bubble-set-purple #bubble-hand {
    top: 370px;
    left: 70%;
}

/* Moisturizing */
.bubble-set-pink #bubble-a {
    top: 5px;
    left: 25%;
}

.bubble-set-pink #bubble-b {
    top: 380px;
    left: -10%;
}

.bubble-set-pink #bubble-s {
    top: -10px;
    left: 53%;
}

.bubble-set-pink #bubble-c {
    top: 480px;
    left: 50%;
}

.bubble-set-pink #bubble-purple {
    top: 90px;
    left: 78%;
}

.bubble-set-pink #bubble-hand {
    top: 350px;
    left: 68%;
}


@keyframes bubbleEnterFromTop {
    0% {
        opacity: 0;
        transform: translate(-50%, -120px) scale(0.6);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

@keyframes bubbleFlyAwayTop {
    0% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -120px) scale(0.5);
    }
}

@keyframes floatBubble {
    0% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, -12px);
    }

    100% {
        transform: translate(-50%, 0);
    }
}

@keyframes bubbleInRight {
    0% {
        opacity: 0;
        transform: translateX(100px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes bubbleOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(-100px) scale(0.8);
    }
}

.bubble-a.enter-from-right {
    animation: bubbleInRight 0.6s ease-out forwards;
}

.bubble-a.exit-to-left {
    animation: bubbleOutLeft 0.5s ease-in forwards;
}


/* 🎯 เพิ่ม Media Queries สำหรับ Responsive Design */
@media (max-width: 1024px) {
    .product-wrapper {
        flex-direction: column;
        align-items: center;
        padding-left: 0;
        height: auto;
    }

    .product-img {
        position: relative;
        margin: 10px 0;
        transform: none !important;
        height: 320px !important;
    }

    .product-label {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 20px;
        transform: scale(1);
        width: 220px;
    }

    .bubble {
        top: 20px;
        left: 50%;
        width: 140px;
    }
}

@media (max-width: 600px) {
    .buttons {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

        .buttons button {
            width: 80%;
            font-size: 14px;
            padding: 10px 20px;
        }

    .product-img {
        height: 240px !important;
    }

    .product-label {
        width: 180px;
    }

    .bubble {
        width: 100px;
    }
}
.product-label,
.bubble {
    pointer-events: none;
}
#bubble-purple {
    animation: purpleMove 3s ease-in-out infinite !important;
}

@keyframes purpleMove {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 10px -18px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .product-wrapper {
        padding: 24px 16px;
    }

    .product-img {
        height: 240px !important;
        margin: 8px 0;
    }

    .product-label {
        width: 180px;
        margin-top: 16px;
    }

    .bubble {
        top: 0px;
        width: 100px;
    }
    .buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

        /*.buttons > button {
            position: static;
            margin: 0 !important;
        }*/
}