@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');
:root{font-family:'Noto Sans Thai',sans-serif;color:#16372d;background:#f8f6ee}*{box-sizing:border-box}body{margin:0}.thankyou-page{--green:#064d35;--gold:#c7a35b;min-height:100vh;overflow:hidden;background:linear-gradient(180deg,#fbfaf5,#f4f7ee 44%,#fff)}.thankyou-header{max-width:1120px;height:90px;margin:auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}.thankyou-header img,footer img{width:150px}.secure-pill{padding:9px 15px;color:var(--green);background:#edf5ed;border:1px solid #d6e7d9;border-radius:99px;font-size:13px;font-weight:600}.thankyou-hero{max-width:850px;margin:30px auto 36px;padding:0 24px;text-align:center}.success-mark{width:72px;height:72px;margin:0 auto 18px;display:grid;place-items:center;color:#fff;font-size:30px;background:linear-gradient(145deg,#12815a,#064d35);border-radius:50%;box-shadow:0 15px 36px #064d3538,0 0 0 9px #0f714d14}.eyebrow{margin:0 0 8px;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.18em}.thankyou-hero h1{margin:0;color:var(--green);font-size:clamp(34px,5vw,58px);line-height:1.18}.thankyou-hero h1 small{display:block;color:#1a342c;font-size:.58em;font-weight:600}.thankyou-hero>p:last-child{color:#63736d;line-height:1.8}.order-card{max-width:980px;margin:0 auto 90px;padding:26px 30px;display:flex;align-items:center;justify-content:space-between;gap:28px;background:#fff;border:1px solid #e4e8df;border-radius:24px;box-shadow:0 22px 65px #1f3e311a}.order-product{display:flex;align-items:center;gap:24px}.product-visual{width:150px;height:130px;flex:none;display:grid;place-items:center;background:linear-gradient(145deg,#eef4e8,#f9f8ef);border-radius:18px;position:relative}.product-visual img{width:122px;height:112px;object-fit:contain}.product-visual span{position:absolute;top:-9px;right:-9px;padding:5px 10px;color:#fff;background:var(--green);border:3px solid #fff;border-radius:99px;font-size:11px;font-weight:700}.promo-label{margin:0;color:var(--gold);font-size:12px;font-weight:800}.order-product h2{margin:0;color:var(--green);font-size:22px}.order-product p:not(.promo-label){margin:4px 0;color:#718078;font-size:14px}.benefits{display:flex;gap:8px;margin-top:13px}.benefits span{padding:6px 10px;background:#f1f6ef;border-radius:7px;font-size:11px}.order-total{min-width:185px;padding-left:28px;border-left:1px solid #e4e8df;text-align:right}.order-total span,.order-total small{display:block;color:#7c8983;font-size:12px}.order-total strong{display:block;color:var(--green);font-size:36px}.vip-section{padding:76px 24px 92px;background:var(--green);color:#fff;text-align:center}.vip-section h2{margin:0;font-size:36px}.vip-section>p:not(.eyebrow){color:#cbded6}.care-grid{max-width:980px;margin:38px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.care-grid article{padding:28px 20px;background:#ffffff14;border:1px solid #ffffff26;border-radius:18px}.care-grid b{font-size:27px}.care-grid h3{margin:13px 0 5px}.care-grid p{margin:0;color:#c9ddd5;font-size:13px}.line-card{max-width:980px;margin:80px auto;padding:52px 60px;display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:center;background:#fff;border-radius:28px;box-shadow:0 20px 60px #1f3e311a}.line-logo{display:inline-block;margin-bottom:18px;padding:5px 13px;color:#fff;background:#06c755;border-radius:7px;font-size:12px;font-weight:800}.line-card h2{margin:0 0 26px;color:var(--green);font-size:30px}.line-card ol{list-style:none;padding:0}.line-card li{display:flex;gap:12px;margin:12px 0;color:#566a61}.line-card li span{width:27px;height:27px;display:grid;place-items:center;flex:none;background:#edf6ee;border-radius:50%;font-weight:800}.qr-panel{text-align:center}.qr-panel img{width:210px;max-width:100%;padding:10px;border:1px solid #e1e8e1;border-radius:16px}.qr-panel p{color:#738179;font-size:12px}.qr-panel a,.mobile-line-bar a{display:block;padding:14px 20px;color:#fff;background:#06c755;border-radius:11px;text-decoration:none;font-weight:700}.delivery-note{max-width:760px;margin:0 auto 80px;padding:22px 28px;display:flex;justify-content:center;gap:18px;background:#f1f6ed;border:1px solid #dce8d8;border-radius:18px;color:var(--green)}.delivery-note span{color:#6f7f77;font-size:12px}footer{padding:45px 24px 55px;text-align:center;border-top:1px solid #e6ebe4}footer p{color:#4d695d;font-size:13px}footer small{color:#94a099}.mobile-line-bar{display:none}.pixel{display:none}
@media(max-width:760px){.thankyou-header{height:72px;padding:14px 18px}.thankyou-header img{width:118px}.secure-pill{padding:7px 9px;font-size:10px}.thankyou-hero{margin:26px auto 28px}.success-mark{width:60px;height:60px}.thankyou-hero h1{font-size:34px}.thankyou-hero>p:last-child{font-size:14px}.order-card{margin:0 16px 72px;padding:18px;display:block}.order-product{gap:14px}.product-visual{width:105px;height:105px}.product-visual img{width:88px;height:90px}.order-product h2{font-size:17px}.order-product p:not(.promo-label){font-size:11px}.benefits{gap:4px}.benefits span{padding:4px 6px;font-size:9px}.order-total{margin-top:17px;padding:14px 2px 0;display:flex;align-items:baseline;justify-content:space-between;border:0;border-top:1px solid #e4e8df;text-align:left}.order-total strong{font-size:28px}.order-total small{display:none}.vip-section{padding:68px 16px 66px}.vip-section h2{font-size:29px}.care-grid{grid-template-columns:1fr;gap:10px;margin-top:26px}.care-grid article{padding:20px}.line-card{margin:45px 16px;padding:30px 21px;grid-template-columns:1fr;gap:30px}.line-card>div:first-child{text-align:center}.line-card h2{font-size:23px}.line-card li{text-align:left;font-size:12px}.qr-panel>a{display:none}.delivery-note{margin:0 16px 55px;padding:17px;display:block;text-align:center}.delivery-note span{display:block;margin-top:4px}footer{padding-bottom:100px}.mobile-line-bar{display:block;position:fixed;z-index:20;left:0;right:0;bottom:0;padding:10px 14px;background:#fffffff0;border-top:1px solid #dfe7df}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* The source logo has a near-square canvas; constrain its rendered height to the navbar. */
.thankyou-header img{display:block;width:auto;max-width:150px;height:54px;object-fit:contain}
.thankyou-page footer img{width:150px;height:auto}
@media(max-width:760px){.thankyou-header img{width:auto;max-width:118px;height:44px}}

/* Layered entrance + ambient motion for key sections on first load. */
.thankyou-header{animation:fade-slide-down .7s cubic-bezier(.2,.8,.2,1) both}
.thankyou-hero{animation:fade-up .75s cubic-bezier(.2,.8,.2,1) .08s both}
.success-mark{animation:pop-in .75s cubic-bezier(.2,.85,.25,1.1) .16s both,soft-float 4.6s ease-in-out 1.2s infinite}
.order-card{animation:fade-up .85s cubic-bezier(.2,.8,.2,1) .22s both}
.line-card{animation:fade-up .85s cubic-bezier(.2,.8,.2,1) .3s both}
.vip-section{animation:fade-up .85s cubic-bezier(.2,.8,.2,1) .24s both}
.delivery-note{animation:fade-up .75s cubic-bezier(.2,.8,.2,1) .34s both}

/* Gentle depth/motion cues on interaction. */
.order-card,.line-card,.care-grid article{transition:transform .35s ease,box-shadow .35s ease}
.order-card:hover,.line-card:hover{transform:translateY(-3px);box-shadow:0 28px 72px #1f3e3126}
.care-grid article:hover{transform:translateY(-4px);box-shadow:0 16px 34px #0000001f}

/* Product image gets a tiny reveal motion and badge pulse for attention. */
.product-visual img{animation:soft-zoom .9s cubic-bezier(.2,.8,.2,1) .26s both}
.product-visual span{animation:pulse-badge 2.8s ease-in-out 1.5s infinite}

/* Subtle sheen pass on LINE CTA for better discoverability. */
.qr-panel a,.mobile-line-bar a{position:relative;overflow:hidden}
.qr-panel a::after,.mobile-line-bar a::after{content:"";position:absolute;inset:0;transform:translateX(-130%);background:linear-gradient(100deg,transparent 20%,#ffffff5e 50%,transparent 80%);animation:cta-shine 3.2s ease-in-out 1.8s infinite}

@keyframes fade-slide-down{
	from{opacity:0;transform:translateY(-14px)}
	to{opacity:1;transform:translateY(0)}
}
@keyframes fade-up{
	from{opacity:0;transform:translateY(18px)}
	to{opacity:1;transform:translateY(0)}
}
@keyframes pop-in{
	0%{opacity:0;transform:scale(.8)}
	65%{opacity:1;transform:scale(1.06)}
	100%{opacity:1;transform:scale(1)}
}
@keyframes soft-zoom{
	from{opacity:0;transform:scale(.9) translateY(6px)}
	to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes pulse-badge{
	0%,100%{transform:scale(1)}
	50%{transform:scale(1.06)}
}
@keyframes soft-float{
	0%,100%{transform:translateY(0)}
	50%{transform:translateY(-6px)}
}
@keyframes cta-shine{
	0%,45%{transform:translateX(-130%)}
	60%,100%{transform:translateX(130%)}
}

.tracking-card{max-width:980px;margin:-52px auto 90px;padding:30px;background:#fff;border:1px solid #e4e8df;border-radius:24px;box-shadow:0 20px 58px #1f3e3117;animation:fade-up .85s cubic-bezier(.2,.8,.2,1) .28s both}
.tracking-head h2{margin:0;color:var(--green);font-size:28px}
.tracking-grid{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tracking-grid article{padding:14px 16px;background:#f6f8f3;border:1px solid #e4e9de;border-radius:14px}
.tracking-grid span{display:block;color:#6b7a73;font-size:12px}
.tracking-grid strong{display:block;margin-top:4px;color:#1a4b39;font-size:16px;line-height:1.35;word-break:break-word}
.tracking-provider{display:flex;align-items:center;gap:8px}
.tracking-provider img{width:auto;max-width:88px;height:22px;object-fit:contain}
.tracking-link{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#eef6ee;color:#0f5a3f;text-decoration:none;border:1px solid #d6e7d8;font-size:13px}
.tracking-link:hover{background:#e4f1e6}
.tracking-actions{margin-top:14px}
.tracking-cta{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;background:#0f6948;color:#fff;text-decoration:none;font-weight:700}
.tracking-cta:hover{background:#0b573c}
.tracking-items{margin-top:18px;padding-top:18px;border-top:1px dashed #d8e2d6}
.tracking-items h3{margin:0 0 10px;color:#14543e;font-size:18px}
.tracking-item-list{display:grid;gap:9px}
.tracking-item-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;background:#fbfcf9;border:1px solid #e9eee6;border-radius:12px}
.tracking-item-name{font-weight:700;color:#1f4b3b}
.tracking-item-meta{margin-top:3px;color:#74827c;font-size:12px}
.tracking-item-price{font-weight:800;color:#0d5d41;white-space:nowrap}
.tracking-empty{margin:0;color:#718078}

@media(max-width:760px){.tracking-card{margin:-38px 16px 58px;padding:20px}.tracking-head h2{font-size:24px}.tracking-grid{grid-template-columns:1fr}.tracking-provider img{max-width:76px;height:20px}.tracking-link{font-size:12px}.tracking-cta{display:flex;width:100%}.tracking-item-row{align-items:flex-start;flex-direction:column}.tracking-item-price{white-space:normal}}