:root{
    --yellow:#FCE552;
    --yellow-pale:#FFF6CB;
    --pink:#E1007A;
    --pink-band:#DE1C82;
    --magenta:#E5398C;
    --purple:#684F5A;
    --cream:#FFFDF7;
    --kv-pink:#FBE3F0;
    --green:#33c72a;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  #promo,#journey,#products{scroll-margin-top:96px}
  body{
    font-family: "Manrope", sans-serif !important;
    color:var(--purple);
    background:#fff;
    overflow-x:hidden;
  }
  .customer-appreciation .sticky{display: none;}
  /* ── GLOBAL PETAL CANVAS ─────────────────────────── */
#sakura-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    width: 100%;
    height: 100%;
}
  img{display:block;max-width:100%}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
  h1,h2,h3,.display{line-height:1.3}
  .full{display:block;width:100%;height:auto}
  .pc{display: block;}
  .sp{display: none;}

  /* ---------- TOP BAR ---------- */
  header{position:sticky;top:0;z-index:50;background:var(--cream);transition:box-shadow .3s ease}
  header.is-scrolled{box-shadow:0 6px 18px rgba(225,0,122,.18)}
  .topbar{background:var(--cream);padding:14px 0;    display: flex;
    justify-content: space-between;
    align-items: center;}
  .topbar .in{display:flex;align-items:center;justify-content:center;gap:20px}
  .topbar .in img{height:72px;width:auto}
  .topbar .brand b{display:block;font-weight:700;font-size:14px;color:var(--purple)}
  .topbar .brand span{display:block;font-size:11px;letter-spacing:.14em;color:var(--purple)}
  .topbar-btns{display:flex;align-items:center;gap:10px}
  .topbar-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
    background:linear-gradient(180deg,#e83495 0%,#EE6FA8 100%);color:#fff;
    font-weight:800;font-size:12px;letter-spacing:.02em;text-decoration:none;text-align:center;
    padding:11px 18px;border-radius:20px;box-shadow:0 4px 10px rgba(225,0,122,.25);
    transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s}
  .topbar-btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(225,0,122,.35)}

  /* ---------- HERO ---------- */
  .hero{background:linear-gradient(180deg,#FBDAEC 0%,#FFFFFF 42%,#FFFFFF 100%);position:relative;padding-top:56px}
  .hero .row{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-bottom:20px}
  .hero-left{flex:1;}
  .pill-badge{display:inline-block;background:var(--pink);color:#fff;font-weight:500;font-size:17px;letter-spacing:.05em;
    padding:8px 22px;border-radius:20px;margin-bottom:14px}
  .hero-left h1{font-size:56px;font-weight:700;color:var(--purple);margin-bottom:12px}
  .hero-left p{font-size:17px;color:var(--purple);line-height:1.5; font-weight: 500;}

  .countdown{display:flex;align-items:flex-start;gap:10px;padding-right:20px}
  .cd-unit{text-align:center}
  .cd-box{width:92px;height:92px;border-radius:18px;
    background:linear-gradient(180deg, #e514824a 0%, #e51482de 100%);
    display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
  .cd-box span{font-weight:700;font-size:52px;color:#fff}
  .cd-label{margin-top:10px;font-size:12px;letter-spacing:.1em;color:#9a7f8a;font-weight:500}
  .cd-colon{font-weight:700;font-size:44px;color:#e79bbb;align-self:flex-start;margin-top:22px}
  .cd-progress{height:6px;border-radius:6px;margin:14px 20px 0 0;background:#f0d7e2}
  .cd-progress i{display:block;height:100%;width:62%;border-radius:6px;
    background:linear-gradient(90deg,#cbb1e8,#8cc0ec)}

  .badges{display:flex;justify-content:center;align-items: center;position:relative;z-index:3;margin-top:-10%;}
  .badge:first-child{margin-right: -4px;}
  .badge:last-child{margin-left: -10px;}
  /* .badge img{height:100%;width:100%;} */

  /* ---------- PROMO (yellow) ---------- */

  .sun-block {position: relative;}
  .promo{padding:96px 0 14%;text-align:center;position: relative;
    background:url(image/bg-yellow.png) no-repeat;
    background-size: cover;
    background-position: center;}
     .promo::before{position: absolute; content: "";bottom: -15px; left: 0;width: 100%;height: 234px;background: url(image/bg-yellow_b.png) no-repeat bottom / 100%; z-index: 0;}
  
    .promo::after{position: absolute; content: "";bottom: 0; left: 0;width: 100%;height: 50px;background: url(image/line.jpg) no-repeat bottom / cover; z-index: -1;}
  
  
  .promo .kicker {color: var(--pink); font-weight: 700;
    font-size: 20px;
    text-align: center;margin-top: 60px; margin-bottom: 20px;}
      .promo .promo-img{width:100%;max-width:1000px;height:auto;margin:0 auto 26px}
  .promo p.lead{max-width:720px;margin:0 auto;font-size:17px;color:#6b5a52;line-height:1.6}
  .btn-pink{display:inline-flex;align-items:center;gap:12px;margin-top:10px;margin-bottom: 10px;
    background:var(--pink);color:#fff;font-weight:600;
    font-size:18px;padding:12px 40px;border-radius:30px;border:none;cursor:pointer;
    box-shadow:0 8px 18px rgba(230,24,127,.3)}
  .btn-pink .arw{font-size:24px; line-height: 30px;}


  /* ---------- INTRO ---------- */
    .intro-journey{position: relative;background: url(image/bg-ll.png) no-repeat bottom / 100%;}
  .intro-journey::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #fcdf34 45%, #fbd001 100%);
    z-index: -1;
  }
  .intro{padding:40px 0 0; position: relative;}
  .intro .grid{display:flex;align-items:center;gap:40px}
  .intro .txt{flex:1;padding-left:32px}
  .intro .kicker{color:var(--pink);font-weight:700;font-size:20px;
    text-align:center;margin:0 0 46px}
  .intro h2{font-size:52px;color:var(--purple);font-weight: 400;line-height: 1.4;margin-bottom:22px}
  .intro h2 b{font-weight:800;color:var(--purple)}
  .intro .divline{height:2px;width:330px;background:linear-gradient(90deg,rgba(244,184,213,0), var(--pink),rgba(244,184,213,0));margin:6px 0 22px}
  .intro h3{font-size:32px;color:#8a7580;line-height:1.3;font-weight: 400;}
  .intro h3 b{font-weight:700;color:var(--purple)}
  .intro .tbu{flex:1;min-height:280px;border-radius:14px;
    background:linear-gradient(180deg,#FFFCEB,#FFF3C7);
    display:none;align-items:center;justify-content:center;text-align:center}
  .intro .tbu span{font-weight:800;font-size:44px;color:var(--green);line-height:1.15}

  /* ---------- JOURNEY (3 chặng) ---------- */
  .journey{padding:70px 0 200px;text-align:center}
  .journey .kicker{color:var(--pink);font-weight:700;font-size:20px;margin-bottom:16px}
  .journey h2{font-size:44px;font-weight:700;color:#6b5563;margin-bottom:16px}
  .journey .sub{font-size:20px;color:#6b5a52;line-height:1.6;max-width:640px;margin:0 auto 44px}
  .journey .sub b{color:var(--purple)}

  .card{position:relative;background:#fff;border-radius:16px;overflow:hidden;text-align:left;
    box-shadow:0 18px 40px rgba(120,90,60,.12);margin-bottom:0;margin-left:auto;margin-right:auto;
    touch-action:pan-y;user-select:none}
  .card-pane{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;
    transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .card-pane.is-active{transform:translateX(0)}
  .card .info{flex:1.05;padding:40px 44px}
  .card .kv{flex:1;display:flex;align-items:center;justify-content:center;
    font-weight:600;font-size:26px;color:#5cc24f;text-align:center;line-height:1.3;min-height:360px}
    .card .kv img{object-fit: cover;
    width: 100%;
    height: 100%;}
  .tag{display:inline-flex;align-items:center;gap:6px;background:#FBD9EC;color:#d63b8f;width: fit-content;
    font-size:12px;font-weight:600;padding:6px 12px;border-radius:14px;margin-bottom:20px}
  .tag::before{content:"★";color:#e05fa0;font-size:11px}
  .card h3{font-weight:800;font-size:60px;color:#6b5563;line-height:1.3;margin-bottom:20px}
  .card ul{list-style:none;margin:0 0 24px}
  .card ul li{position:relative;padding-left:22px;margin-bottom:14px;font-size:15.5px;color:#7a6a62;line-height:1.5}
  .card ul li::before{content:"★";position:absolute;left:0;top:1px;color:#e05fa0;font-size:12px}
  .card p{font-size:15.5px;color:#7a6a62;line-height:1.5;margin-bottom:10px}
  .card b{color:var(--purple)}
  .card .dots li{list-style:none;position:relative;padding-left:22px;margin-bottom:6px;font-size:15px}
  .card .dots li::before{content:"★";position:absolute;left:4px;color:#e05fa0}
  .btn-card{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,#EC4C99,#E00C77);width: fit-content;text-decoration: none;
    color:#fff;font-weight:500;font-size:16px;padding:12px 24px;border-radius:22px;border:none;cursor:pointer}
  .btn-card .arw{width:20px;height:20px; display:inline-flex;align-items:center;justify-content:center;font-size:11px}

  /* ---------- CTA (pink) ---------- */
  .cta{
    background: url(image/bg-yl-1.png)no-repeat bottom center / cover;
    text-align:center;color:#fff;padding-bottom: 100px; padding-top: 30px;
  }
  .cta .datepill{display:inline-block;border:1.5px solid rgba(255,255,255,.6);border-radius:20px;
    padding:7px 24px;font-size:15px;letter-spacing:.04em;margin:6px 0 26px;color:#ffe3f1}
  .cta h2{font-weight:400;font-size:46px;margin-bottom:24px}
  .cta h2 b{font-weight:800}
  .cta .l1{font-size:20px;line-height:1.7;margin-bottom:20px}
  .cta .l1 b{font-weight:700}
  .cta .l2{font-size:20px;line-height:1.6;color:#ffdcee;margin-bottom:30px}
  .btn-white{display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--magenta);
    font-weight:600;font-size:20px;padding:12px 42px;border-radius:30px;border:none;cursor:pointer;
    box-shadow:0 10px 22px rgba(0,0,0,.18)}
  .btn-white .arw{width:26px;height:26px;color:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:14px}

  /* ---------- PRODUCTS ---------- */
  .products{position:relative;padding:64px 0 70px;
    background: url(image/bg-sp.png)no-repeat bottom center / contain;}
  .products .kicker{color:var(--pink);font-weight:700;font-size:20px;text-align:center;margin-bottom:16px}
  .products h2{font-weight:700;font-size:44px;text-align:center;color:var(--purple);margin-bottom:16px}
  .products .sub{font-size:16.5px;color:#6b5a52;line-height:1.6;max-width:640px;margin:0 auto 40px}
  .carousel{position:relative;max-width:1300px;margin:0 auto}
  .nav-arw{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
    background:linear-gradient(180deg,#F04E9A,#E5147F);color:#fff;font-size:22px;
    display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(229,20,127,.3)}
  .nav-arw:hover{transform:translateY(-50%) scale(1.1)}
  .nav-prev{left:0}
  .nav-next{right:0}
  .pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .pcard{background: linear-gradient(0deg, #fff 85%, #feed92 100%);
    border:1px solid #f6e6b8;border-radius:22px; min-height: 370px; min-width: 0;box-shadow: 0 6px 10px -5px #f8c14a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;align-items: flex-start;}
  /* .pcard .ptag{display:inline-flex;align-items:center;gap:6px;background:#FFF6DA;border:1px solid #eddba7;margin: 10px 20px;
    color:#8a6a3a;font-size:10px;font-weight:600;letter-spacing:.03em;padding:5px 12px;border-radius:12px;
    background: linear-gradient(89deg, #fff 70%, #fde14d 100%);}
  .pcard .ptag::before{content:"●";color:#e6a11e;font-size:8px} */
  .pcard .ptag{display:inline-flex;align-items:center;gap:6px;margin: 10px auto 0;}
  .pcard .ptag img{width: 70%; height: auto;}
  .pcard img{height:100%;width:auto; margin: 0 auto 20px;}
  .pcard-bl {
    background: linear-gradient(180deg, #fde14d 0%, #fef0a6 60%, #fff 100%);
    border-radius: 22px;padding:12px 20px;text-align:center; width: 100%;
}
  .pcard .pname{font-size:15px;font-weight:500;color:#6b5a52;margin-bottom:6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    height: 42px;
    -webkit-box-orient: vertical;
    overflow: hidden;}
    .pcard .pimg {
        margin: 0 auto;padding: 12px 20px;max-height: 150px;
    }
  .pcard .price{display:inline-block;color:#fff;width: 100%;white-space: nowrap;
    font-weight:700;font-size:22px;padding:4px 20px;border-radius:999px;
  background: linear-gradient(180deg, #fa336e 0%, #fa4d8f 100%);}
  .pcard .price span{font-size: 12px;}
  .pcard .old{margin-top: 4px;
    font-size: 14px;
    color: #939393;
    text-decoration: line-through;
    font-weight: 800;}
  .cta-prod {background: linear-gradient(180deg, #fecee8 40%, #fff 54%);margin-top:-2px}
  .products-btn{display: flex;}
  .products .btn-pink {margin: 40px auto;}
  .badges-sp{display: none;}

  @media(max-width:900px){
    .topbar .in img{height:46px;}
    .topbar-btns{max-width:56%;overflow-x:auto;-webkit-overflow-scrolling:touch;
      scrollbar-width:none;-ms-overflow-style:none}
    .topbar-btns::-webkit-scrollbar{display:none}
    .topbar-btn{flex:0 0 auto}
    .hero .row{flex-direction:column;align-items:center}
    .hero-left{text-align: center;padding-left:0;}
    .countdown{align-self:center}
    .badges{gap:12px;flex-wrap:wrap;}
    /* .badges img{height:96px} */
    .pill-badge {font-size: 14px;}
    .intro .grid,.card{flex-direction:column}
    .card .kv{width:100%;min-height:220px}
    .intro .txt{padding-left:0}
    .intro .divline{width:60%}
    .hero-left h1{font-size:40px}
    .intro h2{font-size:36px}
    .intro h3{font-size:26px}
    .journey h2,.products h2{font-size:32px}
    .cta h2{font-size:34px}
    .pcards{grid-template-columns:repeat(3,1fr)}
  }
    @media(max-width:767px) {
        .card-pane {grid-template-columns: 1fr;}
        .card .info{min-height:var(--journey-info-h,auto);display:flex;flex-direction:column;justify-content:center}
        .pcards{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
          -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#F8C14A #F0D889;
          padding-bottom:14px}
        .pcards::-webkit-scrollbar{height:7px}
        .pcards::-webkit-scrollbar-track{background:#F0D889;border-radius:6px}
        .pcards::-webkit-scrollbar-thumb{background:#F8C14A;border-radius:6px}
        .pcard{flex:0 0 86%;scroll-snap-align:center}
    }
  @media(max-width:560px){
    .pc{display: none;}
  .sp{display: block;}
    .topbar {
      padding-top: 4px;
      padding-bottom: 4px;
      justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    }
    .promo .kicker, .intro .kicker, .journey .kicker {font-size: 14px;}
    .topbar-btns{max-width:100%;width:100%}
    .cd-box{width:62px;height:62px;border-radius:12px}
    .cd-box span{font-size:34px}
    .cd-colon{font-size:30px;margin-top:0}
    .cd-label{font-size:10px;margin-top:6px}
    .countdown{gap:6px;padding-right:0}
    .badges {margin-top: -21%;flex-wrap:wrap;row-gap:10px;}
    .badge.big{width: 80%;}
    /* .badges img{height:74px} */
    .badges-sp{display: flex;gap: 16px;}
     .badges-pc{display: none;}
     .badge:first-child{margin-right: 0;}
     .badge:last-child{margin-left: 0;}
    .hero {padding-top: 36px;}
    .hero-left h1{font-size:34px}
    .promo {padding-bottom: 16%;}
    .promo::before {height: 70px;}
    .promo .promo-img {margin-bottom: 16px;}
    .promo p.lead {font-size: 14px;}
    .journey .nav-arw {display: none;}
    .promo .kicker{margin-bottom: 12px; margin-top: 35px;}
    .products .btn-pink{margin-bottom: 20px;}
    .card .info{padding:26px 22px}
    .card h3{font-size:34px}
    .card p, .card ul li {font-size: 14px;}
    .journey h2{font-size:26px}
     .journey {padding-bottom: 80px;}
    .cta h2{font-size:26px}
    .cta .l1, .cta .l2 {font-size: 14px;}
    .btn-card{font-size:12px;padding:11px 18px}
    .pcard{max-width:100%;flex:0 0 100%}
    .wrap{padding:0 16px}
    .btn-white {font-size: 14px;padding: 8px 22px;}
    .btn-pink{font-size: 14px;padding: 10px 25px;margin-bottom: 0;margin-top: 5px;}
    .btn-pink .arw{font-size:18px; line-height: 11px;}
  }

  /* ---------- ANIMATIONS ---------- */
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  @keyframes tick{0%{transform:scale(1)}30%{transform:scale(1.09)}100%{transform:scale(1)}}
  @keyframes softpulse{0%,100%{box-shadow:0 0 0 0 rgba(227,22,129,.35)}50%{box-shadow:0 0 0 7px rgba(227,22,129,0)}}
  @keyframes shine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(320%)}}

  /* live countdown pulse */
  .cd-box.tick{animation:tick .45s ease}
  /* attention pulse on the "coming soon" pill */
  .pill-badge, .btn-pink, .btn-white{animation:softpulse 2.6s ease-in-out infinite}

  /* button micro-interactions */
  .btn-pink,.btn-white,.btn-card,.nav-arw{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,filter .22s}
  .btn-pink .arw,.btn-white .arw,.btn-card .arw{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
  .btn-pink:hover,.btn-white:hover,.btn-card:hover{transform:translateY(-3px)}
  .btn-pink:hover .arw,.btn-white:hover .arw,.btn-card:hover .arw{transform:translateX(4px)}
  .btn-pink:active,.btn-white:active,.btn-card:active{transform:translateY(-1px)}

  /* card + product hover lift */
  .card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .pcard{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
  .pcard img{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .pcard:hover img{transform:scale(1.05)}

  /* sweeping shine on the main CTAs */
  .btn-pink,.btn-white{position:relative;overflow:hidden}
  .btn-pink::before,.btn-white::before{content:"";position:absolute;top:0;left:0;width:35%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%)}
  .btn-pink:hover::before,.btn-white:hover::before{animation:shine .9s ease}

  /* scroll reveal (only when JS active, so no-JS shows everything) */
  .js .promo-img,.js .promo .lead,.js .intro .txt,.js .intro .tbu,
  .js .journey .kicker,.js .journey h2,.js .journey .sub,
  .js .cta .datepill,.js .cta h2,.js .cta .l1,.js .cta .l2,.js .cta .btn-white,
  .js .products .kicker,.js .products h2,.js .products .sub{
    opacity:0;transform:translateY(30px);
    transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);
    will-change:opacity,transform;
  }
  .js .is-in{opacity:1 !important;transform:none !important}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
      transition-duration:.001ms !important;scroll-behavior:auto !important}
    .js .promo-img,.js .promo .lead,.js .intro .txt,.js .intro .tbu,
    .js .journey .kicker,.js .journey h2,.js .journey .sub,
    .js .cta .datepill,.js .cta h2,.js .cta .l1,.js .cta .l2,.js .cta .btn-white,
    .js .products .kicker,.js .products h2,.js .products .sub{opacity:1;transform:none}
  }