:root{--ink:#543e3a;--muted:#a18d84;--rose:#c97b79}*{box-sizing:border-box}body{margin:0;background:#f8f5ee;color:var(--ink);font:14px 'DM Sans',sans-serif}button{font:inherit;cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}header{height:78px;border-bottom:1px solid #eee4dc;display:flex;align-items:center;justify-content:space-between;padding:0 7%;background:#fbf9f4}.brand{text-decoration:none;color:#674d48;font:700 25px/1 'Playfair Display',serif}.brand i{color:#d88b88;font:normal 29px sans-serif}.brand span{font:700 10px 'DM Sans';margin-left:3px}.brand small{display:block;font:8px 'DM Sans';letter-spacing:.16em;margin:4px 0 0 36px;text-transform:uppercase;color:#ad9991}.made,.live{font-size:9px;letter-spacing:.16em;font-weight:700;color:#b49d94}.sound{border:1px solid #eaded7;border-radius:30px;background:#fffaf6;color:#8b716a;padding:9px 14px;font-size:11px;margin-left:35px}.sound b{color:#c66e70;font-size:9px}main{max-width:1290px;margin:auto}.intro{text-align:center;padding:65px 20px 54px;position:relative}.eyebrow{color:#bd7776;font-weight:700;font-size:10px;letter-spacing:.18em}.intro h1,.result-copy h2{font:500 52px/1.16 'Playfair Display',serif;letter-spacing:-.035em;margin:20px 0 16px}.intro h1 em,.result-copy em{color:#c87979;font-weight:500}.intro sup{font:28px sans-serif;color:#e3a8a0}.intro p,.result-copy p{color:#9d8980;line-height:1.8;margin:0}.sticker{position:absolute;right:12%;top:95px;transform:rotate(12deg);color:#cf8580;font-size:30px}.sticker small{display:block;font-size:8px;letter-spacing:.12em;font-weight:700}.studio{background:#fffdfa;border:1px solid #efe4dd;border-radius:20px;padding:28px;box-shadow:0 20px 70px #a47d6812;margin:0 5%}.studio-top,.heading{display:flex;align-items:center}.studio-top{justify-content:space-between;margin-bottom:22px}.heading{gap:13px}.number{height:37px;width:37px;border-radius:50%;background:#f8e8e3;color:#cb8180;display:grid;place-items:center;font:italic 15px 'Playfair Display'}.studio-top h2,.control-head h3{font:600 21px 'Playfair Display';margin:0}.studio-top h2 em,.control-head em{color:#d58e89;font-style:normal}.studio-top p,.control-head p{font-size:11px;color:#b19d94;margin:5px 0 0}.studio-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,1fr);gap:26px}.camera{height:510px;border-radius:12px;background:#e9dfd6;overflow:hidden;position:relative;display:grid;place-items:center}.camera:before{content:'';position:absolute;inset:12px;border:1px solid #ffffff80;border-radius:7px;z-index:1;pointer-events:none}.camera video{width:100%;height:100%;object-fit:cover;display:none;transform:scaleX(-1)}.placeholder{text-align:center;color:#9f877d;z-index:2}.doodle{font-size:35px;color:#d19a91}.placeholder h3{font:600 24px 'Playfair Display';color:#806b61;margin:14px 0 8px}.placeholder p{line-height:1.7;font-size:12px;margin:0 0 22px}.placeholder small{display:block;font-size:10px;margin-top:17px;color:#b49f94}.primary{border:0;background:#c97b79;color:white;border-radius:8px;padding:15px 22px;font-weight:700;box-shadow:0 6px 14px #bd77762b}.primary:hover:not(:disabled){background:#b96b69}.camera-label,.camera-corner{position:absolute;z-index:2;color:#fffaf1;font-size:9px;letter-spacing:.13em;font-weight:700}.camera-label{left:26px;top:25px}.camera-corner{right:28px;bottom:25px;text-align:center;line-height:1.3;font:italic 13px 'Playfair Display';letter-spacing:0}.camera-bottom{display:flex;justify-content:space-between;align-items:center;padding:14px 3px 0;color:#b39e94;font-size:9px;font-weight:700;letter-spacing:.12em}.camera-bottom button{background:none;border:0;color:#9d877d;font-size:11px}aside{padding:4px 3px}.control-head>span{color:#c78580;font-size:9px;letter-spacing:.16em;font-weight:700}.control-head h3{margin-top:7px;font-size:20px}.filters{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:17px}.filter{background:none;border:0;color:#9c8880;padding:0;font-size:10px}.filter-art{height:64px;border-radius:8px;border:3px solid transparent;margin-bottom:7px;background:linear-gradient(135deg,#efd3c1,#d89f94 48%,#b99282);display:grid;place-items:center;color:#fff8e9aa;font-size:35px}.filter.active{color:#bc7171;font-weight:700}.filter.active .filter-art{border-color:#d38c88}.divider{height:1px;background:#f0e8e2;margin:20px 0}.frames{display:flex;gap:11px;margin-top:15px}.frame{border:1px solid #eee4dd;background:#fff;border-radius:8px;padding:5px;width:48px;height:58px;color:#fff}.frame:before{content:'';display:block;width:100%;height:34px;background:#e9d8cd;border-radius:3px}.frame.active{outline:2px solid #d48f8a;outline-offset:2px}.frame[data-frame=pink]{background:#f2c9c8}.frame[data-frame=lavender]{background:#dcd2e8}.frame[data-frame=choco]{background:#98746a}.settings{display:flex;justify-content:space-between;align-items:center}.settings strong,.settings small{display:block}.settings strong{font-size:12px}.settings small{font-size:10px;color:#b19d94;margin-top:5px}.segmented{background:#f8f2ee;border-radius:8px;padding:3px;display:flex}.segmented button{border:0;background:transparent;color:#aa9189;padding:7px 11px;border-radius:6px;font-size:10px}.segmented button.active{background:white;color:#c47878}.shoot{width:100%;margin-top:21px;display:flex;justify-content:space-between;align-items:center}.shoot span{font-size:17px}.shoot-note{text-align:center;color:#c8aaa0;font-size:9px}.countdown{position:absolute;z-index:4;color:#fff;font:130px 'Playfair Display';text-shadow:0 4px 25px #0005}.flash{position:absolute;inset:0;background:white;z-index:5;animation:flash .35s forwards;pointer-events:none}@keyframes flash{to{opacity:0}}.result-section{margin:90px 10% 70px;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:380px}.result-copy h2{font-size:40px;margin:20px 0}.result-copy p{font-size:13px}.actions{display:flex;gap:10px;margin-top:25px}.outline{border:1px solid #dec9c1;background:transparent;color:#a07871;border-radius:8px;padding:14px 20px;font-weight:700}.result-copy>small{display:block;font-size:10px;color:#c3a69b;margin-top:27px}.result-display{position:relative;display:flex;justify-content:center}.result-display:before{content:'✳';position:absolute;left:18%;top:20%;font-size:48px;color:#e5b3aa}.strip{width:190px;background:#fff;padding:12px;box-shadow:0 12px 35px #81635525;transform:rotate(4deg);min-height:310px}.strip-empty{height:250px;background:#eee2db;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#c49e94;text-align:center}.strip-empty span{font-size:40px}.strip-empty b{font:600 16px/1.3 'Playfair Display'}.strip-empty small{font-size:7px;letter-spacing:.12em;margin-top:15px}.strip img{width:100%;display:block;margin-bottom:7px}.strip-foot{text-align:center;font:700 16px 'Playfair Display';padding:7px 0 1px}.strip-foot span{font:7px 'DM Sans'}.strip-foot small{display:block;font:7px 'DM Sans';letter-spacing:.1em;margin-top:4px}.tape{position:absolute;background:#eed6cbac;width:72px;height:24px;top:-10px;z-index:2;transform:rotate(-5deg)}.scribble{position:absolute;right:5%;bottom:15%;font:italic 15px 'Playfair Display';color:#c9938a;transform:rotate(-10deg)}.bottom-message{text-align:center;border-block:1px solid #eaded7;padding:20px;color:#c89e94;font-size:9px;letter-spacing:.2em;font-weight:700}footer{padding:30px 7%;display:flex;align-items:center;justify-content:space-between;color:#b8a39a}footer .brand{font-size:19px}footer p{font-size:11px}footer>span{font-size:9px;letter-spacing:.13em}@media(max-width:800px){.made{display:none}.intro h1{font-size:38px}.sticker{right:4%}.studio{margin:0 3%;padding:18px}.studio-grid{grid-template-columns:1fr}.camera{height:min(65vw,480px);min-height:300px}.result-section{margin:65px 7%;gap:40px}.result-copy h2{font-size:32px}.scribble{display:none}}@media(max-width:550px){header{padding:0 5%}.brand{font-size:21px}.sound{margin-left:0}.intro{padding:48px 15px}.intro h1{font-size:31px}.intro p{font-size:12px}.intro p br{display:none}.sticker{display:none}.live{font-size:7px}.camera{min-height:270px}.result-section{grid-template-columns:1fr;text-align:center}.actions{justify-content:center}.result-display{margin:20px 0}footer{gap:15px;flex-wrap:wrap}footer>span{display:none}}
.frames{flex-wrap:wrap}.frame[data-frame=flowers]{background:#fff3e5;color:#d88f89}.frame[data-frame=hearts]{background:#ffe2e5;color:#d87f91}.frame[data-frame=stars]{background:#e4e2f7;color:#9a8dc9}.frame[data-frame=cherry]{background:#f9f0e1;color:#cb6263}.strip{position:relative}.decoration{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* Khung thiết kế và bố cục */
.frames{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}.frame-card{border:0;padding:0;background:none;color:#9b847b;font-size:10px;text-align:center}.frame-card canvas{display:block;width:100%;height:90px;object-fit:contain;background:#f8f1ec;border:2px solid transparent;border-radius:7px;padding:5px;transition:.2s}.frame-card span{display:block;margin-top:5px}.frame-card.active{color:#b76168;font-weight:700}.frame-card.active canvas{border-color:#ce8684;background:#fff8f5}.count-options,.layout-options{display:flex;gap:7px;margin-top:13px}.count-options button,.layout-options button{flex:1;border:1px solid #eadcd4;border-radius:8px;background:#fff;color:#9a8178;font-size:11px;padding:10px 4px}.count-options button.active,.layout-options button.active{border-color:#ce8684;background:#fcf0ed;color:#b76268;font-weight:700}.layout-options button span{font-size:16px;vertical-align:middle}.result-display .strip{width:min(250px,70vw);box-shadow:0 12px 35px #81635525}.result-display .strip img{width:100%;display:block}.result-section{min-height:450px}@media(max-width:550px){.frame-card canvas{height:84px}}
.layout-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.layout-options button{display:flex;align-items:center;gap:10px;text-align:left;padding:7px 10px}.layout-options button .layout-icon{position:relative;display:block;width:30px;height:38px;flex:none;background:#f2e7e1;border-radius:3px}.layout-options button .layout-icon i{position:absolute;display:block;background:#bd9690;border-radius:1px}.layout-options button>span:last-child{font-size:11px}