/* A quiet product studio. No ambient video, filters or perpetual animation. */
.motion-intro{--studio:#dce2c8;--deep:#253c2b;--accent:#65783f;background:#f5f1e7;color:#253c2b;position:relative;isolation:isolate}
.motion-stage{position:relative;max-width:1600px;margin:auto;min-height:620px;height:min(760px,calc(100svh - 112px));display:grid;grid-template-columns:49% 51%;overflow:hidden}
.studio-heading{position:absolute;top:34px;left:6%;font-size:9px;letter-spacing:.19em;z-index:4;display:flex;align-items:center;gap:12px}.studio-heading:before{content:'';width:28px;height:1px;background:currentColor}
.studio-copy{position:relative;align-self:center;padding:70px 6% 90px 12.3%;z-index:3}.studio-eyebrow{font-size:10px;letter-spacing:.16em;margin:0 0 20px;color:#72775f}.studio-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(64px,6.9vw,108px);font-weight:600;line-height:1.06;letter-spacing:-.065em;margin:0}.studio-title span{display:block}.studio-title em{font-weight:600;color:var(--accent)}
.studio-subtitle{font-family:'Playfair Display',Georgia,serif;font-size:clamp(21px,2.2vw,30px);margin:22px 0 0;letter-spacing:-.035em}.studio-description{font-size:12px;line-height:1.95;max-width:310px;margin:16px 0 0;color:#6b705e}.studio-actions{display:flex;align-items:center;gap:22px;margin-top:28px}.studio-order{display:inline-flex;gap:27px;align-items:center;background:#293e2d;color:#fff9e8;border-radius:3px;padding:15px 20px;font-size:11px;font-weight:600}.studio-order span{font-size:19px;font-weight:400}.studio-menu{font-size:10px;border-bottom:1px solid #929a7e;padding:7px 0}.studio-price{font-size:11px;margin-top:19px;color:#72775f}.studio-price strong{font-family:'JetBrains Mono',monospace;color:#33432c;font-weight:500}
.studio-art{position:relative;margin:22px 26px 22px 0;overflow:hidden;background:var(--studio);border-radius:230px 230px 4px 4px;isolation:isolate;transition:background-color .6s}.studio-art:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 27% 22%,#fff8,transparent 60%),linear-gradient(120deg,transparent 55%,#162b1714);pointer-events:none}.studio-art:after{content:'';position:absolute;width:120%;height:36%;left:8%;bottom:0;background:linear-gradient(170deg,#fff3,#122a1712);border-top:1px solid #ffffff38;transform:skewY(-9deg);transform-origin:100% 0;z-index:-1}
.studio-watermark{position:absolute;top:11%;left:0;width:100%;text-align:center;font-family:Georgia,serif;font-size:clamp(48px,7vw,115px);letter-spacing:-.07em;color:#243a2811;white-space:nowrap;pointer-events:none}.studio-series{position:absolute;right:25px;top:42%;writing-mode:vertical-rl;font-size:8px;letter-spacing:.22em;color:#40513080}
.studio-product{position:absolute;inset:9% 7% 17%;display:flex;align-items:end;justify-content:center;z-index:2;transform:translate3d(var(--px,0px),var(--py,0px),0);cursor:pointer;border:0;background:transparent;padding:0;color:inherit;touch-action:pan-y}.studio-product img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:none;user-select:none;-webkit-user-drag:none}.studio-product:focus-visible{outline:2px solid #475f37;outline-offset:-8px;border-radius:45%}.studio-product:after{content:'Tùy chỉnh ly của bạn ↗';position:absolute;bottom:-12%;font-size:9px;letter-spacing:.03em;opacity:.65}
.studio-podium{position:absolute;width:100%;height:39%;bottom:1%;pointer-events:none;z-index:1}.studio-podium canvas{width:100%;height:100%;display:block}.studio-podium:before{content:'';position:absolute;left:18%;right:18%;top:30%;height:36%;border-radius:50%;background:radial-gradient(ellipse,#17261835,transparent 68%)}.studio-podium-fallback{position:absolute;left:18%;right:18%;top:19%;height:43%;border-radius:50% / 22%;background:linear-gradient(90deg,#bbb79e,#ede9d4 40%,#c8c1a4);box-shadow:0 15px 26px #2b391820}.studio-podium-fallback:before{content:'';position:absolute;inset:0 0 48%;border-radius:50%;background:linear-gradient(120deg,#faf8eb,#ddd7bc)}.studio-podium.has-renderer .studio-podium-fallback{display:none}
.studio-contact{position:absolute;left:34%;right:34%;bottom:19%;height:3%;background:radial-gradient(ellipse,#23311b59,transparent 70%);z-index:1;pointer-events:none}.studio-flavor{position:absolute;bottom:25px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:end;z-index:3}.studio-flavor strong{display:block;font-family:'Playfair Display',Georgia,serif;font-size:22px;letter-spacing:-.03em;font-weight:600}.studio-flavor small{display:block;font-size:8px;margin-top:5px;color:#384c33a6;letter-spacing:.12em}.studio-flavor>span{font-family:Georgia,serif;font-size:44px;line-height:1;color:#3b4e3038}
.studio-controls{position:absolute;left:6%;bottom:32px;width:39%;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:18px}.studio-tabs{display:flex;gap:18px}.studio-tabs button{font-size:10px;color:#878c77;position:relative;padding:12px 0}.studio-tabs button[aria-selected=true]{color:#253c2b}.studio-tabs button:after{content:'';position:absolute;bottom:3px;left:0;width:100%;height:1px;transform:scaleX(0);transform-origin:left;background:#65783f;transition:transform .4s}.studio-tabs button[aria-selected=true]:after{transform:scaleX(1)}.studio-tabs button span{font-size:8px;margin-right:5px;opacity:.6}.studio-replay{font-size:17px;width:34px;height:34px;flex-shrink:0;border:1px solid #aab095;border-radius:50%}.studio-film{position:absolute;top:32px;right:50px;z-index:5;display:flex;align-items:center;gap:9px;font-size:9px;color:#394b2d}.studio-film i{display:grid;place-items:center;width:30px;height:30px;border:1px solid #71815966;border-radius:50%;font-size:9px;font-style:normal}
.studio-motion-toggle{position:absolute;bottom:12px;left:6%;z-index:5;font-size:8px;color:#737d65;padding:3px 0}.studio-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.motion-outro{padding:74px 24px 65px;text-align:center;background:#eeecdf;color:#30412e}.motion-outro-kicker{display:block;font-size:9px;letter-spacing:.2em;color:#7f896a}.motion-outro h2{font-family:'Playfair Display',Georgia,serif;font-size:clamp(32px,4vw,53px);line-height:1.15;letter-spacing:-.045em;margin:20px 0}.motion-outro h2 br{display:none}.motion-outro h2 em{color:#7b8854}.motion-outro p{font-size:12px;line-height:1.95;color:#6e765e}.motion-outro>a{display:inline-flex;gap:25px;font-size:11px;margin-top:25px;border-bottom:1px solid #8e9973;padding-bottom:10px}.motion-menu-status{display:block;margin-top:20px;font-size:9px;color:#838a72}
.motion-film-dialog{padding:0;width:min(1000px,94vw);max-width:94vw;background:#f4f0e4;color:#30412e;border:0;border-radius:5px}.motion-film-dialog::backdrop{background:#102418d9}.film-dialog-top{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:15px 20px}.film-dialog-top p{font-family:'Playfair Display',serif;font-size:21px}.film-dialog-top button{font-size:11px;padding:10px}.studio-film-tabs{display:flex;gap:22px;padding:0 20px 15px}.studio-film-tabs button{font-size:11px;padding:5px 0;border-bottom:1px solid transparent}.studio-film-tabs button[aria-selected=true]{border-color:#4c6738}.motion-film-dialog video{display:block;width:100%;max-height:70svh;background:#142b1c}.studio-film-caption{padding:12px 20px;font-size:10px;color:#6b765c}
@media(min-width:1400px){.studio-copy{padding-left:max(12.3%,calc((100vw - 1360px)/2))}}
@media(max-width:1000px) and (min-width:768px){.motion-stage{min-height:530px;grid-template-rows:minmax(0,1fr)}.studio-title{font-size:60px}.studio-copy{min-height:0;padding-top:60px;padding-bottom:90px}.studio-eyebrow{margin-bottom:14px;font-size:9px}.studio-subtitle{font-size:23px;margin-top:16px}.studio-description{font-size:11px;margin-top:12px}.studio-actions{gap:15px;margin-top:20px}.studio-order{padding:11px 16px;gap:20px}.studio-price{margin-top:12px}.studio-tabs{gap:11px}.studio-tabs button{font-size:9px}.studio-controls{bottom:34px}.studio-flavor strong{font-size:19px}}
@media(max-width:767px){.motion-stage{display:flex;flex-direction:column;min-height:0;height:auto;padding:0 20px 65px}.studio-heading{position:relative;top:auto;left:auto;padding-top:24px;font-size:8px}.studio-copy{padding:26px 0 23px;align-self:stretch}.studio-eyebrow{font-size:8px;margin-bottom:12px}.studio-title{font-size:clamp(48px,12vw,75px);line-height:1.08}.studio-title span{display:inline}.studio-title span+span:before{content:' '}.studio-subtitle{font-size:21px;margin-top:13px}.studio-description{font-size:11px;line-height:1.8;max-width:320px;margin-top:11px}.studio-actions{margin-top:18px;gap:23px}.studio-order{padding:12px 17px;font-size:10px;gap:24px}.studio-price{margin-top:12px;font-size:10px}.studio-art{margin:0;width:100%;height:clamp(340px,102vw,460px);border-radius:180px 180px 3px 3px;flex-shrink:0}.studio-product{inset:7% 8% 18%}.studio-flavor{left:22px;right:22px;bottom:22px}.studio-flavor strong{font-size:21px}.studio-flavor>span{font-size:37px}.studio-watermark{top:10%;font-size:16vw}.studio-series{font-size:7px;right:15px}.studio-product:after{font-size:8px;bottom:-11%}.studio-controls{position:relative;left:auto;bottom:auto;width:100%;margin-top:15px;gap:10px}.studio-tabs{gap:23px}.studio-tabs button{font-size:10px}.studio-replay{width:30px;height:30px;font-size:15px}.studio-motion-toggle{bottom:21px;left:20px;font-size:8px}.studio-film{top:15px;right:20px;font-size:8px}.studio-film i{width:26px;height:26px}.motion-outro{padding:48px 24px}.motion-outro h2 br{display:block}.motion-outro p{font-size:11px}.film-dialog-top p{font-size:17px}.studio-film-tabs{gap:17px}.studio-film-tabs button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.studio-art,.studio-tabs button:after{transition:none}}
@media(max-width:767px){.studio-title>span+span{margin-left:.14em}.studio-heading{padding-right:95px;line-height:1.7}.studio-title span+span:before{content:none}}
/* Graphic movement stays behind the product; the photographic cup stays grounded. */
.studio-moving-light{position:absolute;inset:-20%;background:linear-gradient(100deg,transparent 26%,#ffffec70 39%,#fff9df20 48%,transparent 61%);pointer-events:none;z-index:0}
.studio-motion-lines{position:absolute;inset:0;pointer-events:none;z-index:0;color:var(--accent);opacity:.23}.studio-motion-lines svg{width:100%;height:100%;overflow:visible}.studio-motion-lines path{fill:none;stroke:currentColor;stroke-width:1}.studio-motion-lines path+path{stroke-width:13;opacity:.14}
.studio-countdown{position:absolute;bottom:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:left;background:var(--accent);opacity:.65;z-index:4}
.motion-intro[data-motion=reduced] .studio-moving-light,.motion-intro[data-motion=reduced] .studio-motion-lines,.motion-intro[data-motion=reduced] .studio-countdown{display:none}

/* The whole product stage shares one WebGL canvas and one interaction surface. */
.studio-podium{inset:0;width:100%;height:100%;bottom:auto}.studio-podium-fallback{top:69%;height:17%}.studio-podium:before{top:72%;height:14%}.studio-podium.has-renderer:before{display:none}
.has-fluid-shader .studio-moving-light,.has-fluid-shader .studio-motion-lines{display:none}.studio-art{touch-action:pan-y;cursor:grab}.studio-product{cursor:grab}.studio-art.is-scrubbing,.is-scrubbing .studio-product{cursor:grabbing}.studio-art.is-scrubbing .studio-product{pointer-events:none}
.studio-product:after{content:'↔ Kéo ngang đổi vị · Chạm ly để chọn';font-size:9px;background:#fff7e8c9;padding:5px 9px;border-radius:20px;white-space:nowrap;opacity:.9}
@media(max-width:767px){.studio-product:after{font-size:8px;padding:4px 7px}}