/* Tự phục vụ font để dấu tiếng Việt hiển thị đồng nhất khi trang được mở hoặc triển khai. */
@font-face{font-family:'Be Vietnam Pro';src:url('assets/BeVietnamPro-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('assets/BeVietnamPro-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('assets/BeVietnamPro-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('assets/BeVietnamPro-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('assets/BeVietnamPro-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
:root{--cream:#fff8ef;--cream-deep:#fff0db;--ink:#3b261e;--muted:#705f56;--orange:#e95713;--orange-dark:#c8430b;--green:#2f8769;--line:#f0dfca;--shadow:0 22px 55px rgba(101,57,21,.11)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Be Vietnam Pro',Arial,sans-serif;font-size:16px;line-height:1.6}
body,button,a{-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:3px solid #438e7b;outline-offset:4px}
[hidden]{display:none!important}
.container{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.skip-link{position:absolute;left:16px;top:-60px;z-index:30;background:#fff;padding:10px 16px;border-radius:10px}
.skip-link:focus{top:12px}
.site-header{position:relative;z-index:10;background:rgba(255,248,239,.92);border-bottom:1px solid rgba(232,209,183,.6)}
.header-inner{height:88px;display:flex;justify-content:space-between;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font:800 25px/1 'Be Vietnam Pro',sans-serif;letter-spacing:-.8px}
.brand img{width:46px;height:46px;border-radius:13px;object-fit:cover;object-position:22% 36%}
.brand-accent{color:var(--orange)}
.site-nav{display:flex;align-items:center;gap:37px;font-size:14px;font-weight:800}
.site-nav>a:not(.nav-download):hover,.text-link:hover,.inline-link:hover{color:var(--orange)}
.nav-download{background:var(--orange);color:#fff;padding:12px 19px;border-radius:12px;box-shadow:0 5px 0 #b83907;transition:transform .2s,box-shadow .2s}
.nav-download:hover,.button-primary:hover{transform:translateY(-3px);box-shadow:0 8px 0 #b83907}
.menu-toggle{display:none}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 43%,#ffe5c4 0,#fff2e2 32%,var(--cream) 62%);padding:72px 0 106px}
.hero-sun{position:absolute;width:310px;height:310px;right:-155px;top:-160px;border-radius:50%;background:#ffdda9;opacity:.55}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;min-height:574px}
.hero-copy{position:relative;z-index:2;padding:20px 0 32px}
.eyebrow,.section-kicker{color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.16em;margin:0 0 18px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #f4d9bd;border-radius:100px;padding:9px 16px;letter-spacing:.11em;box-shadow:0 4px 18px rgba(143,87,37,.06)}
.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:#f4aa33}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:'Be Vietnam Pro',sans-serif;line-height:1.17;letter-spacing:-.045em}
h1{font-size:clamp(56px,6vw,88px);font-weight:800;margin:0 0 22px}
h1 span,h2 em{color:var(--orange);font-style:normal}
.hero-description{max-width:535px;font-size:18px;line-height:1.75;color:#665349;margin-bottom:28px}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;border-radius:15px;font-weight:900;transition:transform .2s,box-shadow .2s}
.button-primary{background:var(--orange);color:white;padding:15px 24px;box-shadow:0 6px 0 #b83907}
.text-link,.inline-link{font-weight:900;color:var(--ink)}
.text-link span,.inline-link span{display:inline-block;transition:transform .2s}
.text-link:hover span,.inline-link:hover span{transform:translate(3px,-2px)}
.hero-note{display:flex;align-items:center;gap:14px;margin-top:46px;font-size:14px;color:#8b7261;font-weight:700}
.note-stars{color:#f2a532;font-size:22px;letter-spacing:5px}
.hero-visual{position:relative;min-height:590px;display:grid;place-items:center}
.hero-blob{position:absolute;width:515px;height:495px;border-radius:47% 53% 51% 49%/48% 43% 57% 52%;background:#ffd6ad;transform:rotate(-14deg);top:43px;left:50%;translate:-50% 0}
.phone-frame{position:relative;z-index:1;width:294px;height:552px;border:10px solid #3d2721;border-radius:43px;background:#fff9f0;box-shadow:15px 28px 0 rgba(137,75,35,.13),0 32px 65px rgba(90,49,18,.22);transform:rotate(6deg);overflow:hidden}
.phone-speaker{position:absolute;top:10px;left:50%;width:68px;height:13px;transform:translateX(-50%);background:#3d2721;border-radius:0 0 12px 12px;z-index:2}
.phone-content{padding:42px 18px 16px;height:100%;background:#fff8f0}
.phone-top{display:flex;justify-content:space-between;font-size:12px;font-weight:900;color:#b36136}
.phone-content h2{font-size:29px;margin:15px 0 3px}
.phone-content>p{font-size:11px;color:#8f796b;margin-bottom:21px}
.phone-task{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #f4e9dc;border-radius:15px;padding:11px 10px;margin-bottom:10px;box-shadow:0 5px 12px rgba(95,63,31,.04)}
.phone-task>span:nth-child(2){flex:1;min-width:0}
.phone-task strong,.floating-card strong{font-size:11px;display:block;white-space:nowrap}
.phone-task small,.floating-card small{display:block;font-size:9px;color:#957f6b}
.task-emoji{font-size:22px}
.task-check,.mini-check{display:grid;place-items:center;background:#d7f4e6;color:var(--green);border-radius:50%;width:24px;height:24px;font-weight:900}
.task-circle{border:2px solid #e6d7c5;border-radius:50%;width:20px;height:20px}
.phone-fox{margin-top:18px;border-radius:17px;background:#fce9cc;text-align:center;padding:11px 8px 8px;color:#a46034;font-size:10px;font-weight:900}
.phone-fox img{width:121px;height:121px;object-fit:cover;object-position:22% 37%;border-radius:27px;margin:-2px auto 3px}
.phone-fox span{display:block}
.floating-card{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;background:white;border-radius:14px;padding:11px 14px;box-shadow:var(--shadow);transform:rotate(-5deg)}
.card-task{top:118px;left:-13px}.card-reward{bottom:93px;right:-7px;transform:rotate(6deg)}
.floating-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:10px;font-size:17px;font-weight:900}.floating-icon.green{background:#d9f2df;color:#38885d}.floating-icon.yellow{background:#fff1c5;color:#e6a31e}
.hero-spark{position:absolute;color:#f0a640;font-size:37px}.spark-one{top:40px;right:16px}.spark-two{bottom:66px;left:15px}
.wave-divider{position:absolute;bottom:-1px;left:0;width:100%;height:42px;background:#fff;clip-path:polygon(0 36%,9% 23%,19% 41%,29% 25%,40% 43%,52% 25%,64% 37%,75% 18%,86% 39%,100% 22%,100% 100%,0 100%)}
.section{padding:100px 0}.intro{background:#fff}.section-heading h2,.feature-copy h2,.fox-copy h2,.download-copy h2{font-size:clamp(39px,4.3vw,58px);margin-bottom:14px}.centered{text-align:center;max-width:690px;margin:0 auto 45px}.section-heading>p:last-child{color:var(--muted);font-size:17px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}.step-card{position:relative;padding:31px 29px 30px;border:1px solid #f1e3d4;border-radius:26px;background:#fffaf4;min-height:286px;transition:transform .2s,box-shadow .2s}.step-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.step-number{position:absolute;top:27px;right:26px;color:#ecc9a9;font:800 32px/1 'Be Vietnam Pro',sans-serif}.step-illustration{display:grid;place-items:center;width:68px;height:68px;border-radius:21px;font-size:35px;margin-bottom:19px}.step-illustration.peach{background:#ffe3ce}.step-illustration.mint{background:#e2f2de}.step-illustration.butter{background:#fff0c6}.step-card h3{font-size:23px;margin-bottom:9px}.step-card p{font-size:15px;color:var(--muted);margin:0}
.feature-section{background:#f3f8f1}.feature-grid,.fox-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.feature-copy>p:not(.section-kicker),.fox-copy>p:not(.section-kicker),.download-copy>p:not(.section-kicker){font-size:17px;line-height:1.8;color:var(--muted)}
.feature-art{position:relative;min-height:430px;display:grid;place-items:center}.feature-art-circle{position:absolute;width:420px;height:420px;max-width:90%;border-radius:50%;background:#ddecce}.feature-art-card{position:relative;width:345px;max-width:90%;padding:25px;background:#fff;border-radius:27px;box-shadow:0 26px 53px rgba(73,104,58,.17);transform:rotate(-4deg)}.feature-art-header{display:flex;justify-content:space-between;align-items:center;color:var(--ink);font-weight:900;font-size:17px;margin-bottom:19px}.feature-art-header span:first-child{color:var(--orange);font-size:28px}.feature-art-header span:last-child{color:#b6a699;letter-spacing:3px}.feature-art-row{display:flex;align-items:center;gap:12px;padding:11px;margin:9px 0;border-radius:14px;background:#fff8ee}.feature-art-row>span:first-child{font-size:24px}.feature-art-row>div{flex:1}.feature-art-row strong,.feature-art-row small{display:block}.feature-art-row strong{font-size:13px}.feature-art-row small{font-size:10px;color:#927968}.mini-check{width:22px;height:22px}.feature-progress{padding:17px 3px 2px;font-size:12px;color:#957b69}.feature-progress strong{float:right;color:var(--orange)}.feature-progress>div{height:9px;border-radius:10px;background:#f0e6d9;margin-top:8px;overflow:hidden}.feature-progress i{display:block;width:68%;height:100%;background:var(--orange);border-radius:10px}.art-burst{position:absolute;right:20px;top:28px;color:#eab854;font-size:40px}
.check-list{padding:0;margin:20px 0 25px;list-style:none}.check-list li{display:flex;gap:12px;align-items:flex-start;margin:12px 0;font-weight:800;font-size:15px}.check-list li:before{content:'✓';display:grid;place-items:center;flex:none;width:23px;height:23px;border-radius:50%;background:#daebdb;color:#318562;font-size:14px}.inline-link{display:inline-block;color:var(--orange);font-size:15px}
.fox-section{background:#fff}.fox-copy h2 span{color:#e9a93e;font-size:.67em}.fox-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.fox-tags span{padding:9px 14px;border-radius:100px;background:#fff3e6;border:1px solid #f5ddc4;font-size:13px;font-weight:900;color:#794e32}.fox-image-wrap{position:relative;display:flex;justify-content:center;align-items:center;padding:24px}.fox-image-wrap:before{content:'';position:absolute;width:430px;height:430px;max-width:100%;border-radius:50%;background:#ffead5}.fox-image-wrap img{position:relative;width:270px;border:8px solid #fff;border-radius:30px;box-shadow:var(--shadow);transform:rotate(5deg)}.fox-deco{position:absolute;color:#e9a12f;font-size:46px}.fox-deco-one{top:0;right:20px}.fox-deco-two{bottom:13px;left:28px}
.download-section{background:#fff;padding-top:25px;padding-bottom:100px}.download-panel{position:relative;display:flex;align-items:center;gap:55px;padding:60px 74px;background:#ffe4c8;border-radius:37px;overflow:hidden}.download-panel:before,.download-panel:after{content:'';position:absolute;border:2px solid #ffce9f;border-radius:50%;width:400px;height:400px;right:-170px;top:-200px}.download-panel:after{width:280px;height:280px;right:-80px;top:-140px}.download-decoration{position:absolute;bottom:20px;right:60px;color:#f8b45f;font-size:75px}.download-icon{flex:none;width:184px;height:184px;padding:15px;background:white;border-radius:45px;transform:rotate(-7deg);box-shadow:var(--shadow)}.download-icon img{width:100%;height:100%;object-fit:cover;object-position:22% 37%;border-radius:32px}.download-copy{position:relative;z-index:1;max-width:600px}.download-copy h2{margin-bottom:8px}.download-copy>p:not(.section-kicker){margin-bottom:22px}.store-links{display:flex;gap:12px;flex-wrap:wrap}.store-link,.coming-soon{display:inline-flex;align-items:center;gap:13px;min-height:56px;padding:8px 18px;border-radius:13px;background:#3b261e;color:#fff}.store-link>span:first-child{font-size:25px}.store-link small,.store-link strong{display:block;line-height:1.2}.store-link small{font-size:10px}.store-link strong{font-size:17px}.store-link:hover{background:#5b3324}.coming-soon{font-weight:900;background:#fff;color:#8b4c23;border:1px solid #f2c496}
.site-footer{background:#fff;border-top:1px solid var(--line)}.footer-inner{min-height:104px;display:flex;align-items:center;gap:25px}.footer-inner p{color:#957c6a;margin:0 auto 0 0;font-size:14px}.footer-inner>a:last-child{font-weight:800;font-size:13px;color:var(--orange)}
/* Màn hình vừa: giảm khoảng cách trước khi chuyển sang bố cục một cột. */
@media(max-width:1000px){.hero-grid{gap:0}.hero-visual{transform:scale(.85);transform-origin:center}.hero-description{font-size:16px}.feature-grid,.fox-grid{gap:35px}.site-nav{gap:20px}}
/* Màn hình nhỏ: menu thu gọn, thẻ và hình minh họa xếp dọc để chữ luôn dễ đọc. */
@media(max-width:760px){.container{width:min(100% - 36px,560px)}.header-inner{height:70px}.brand{font-size:22px}.brand img{width:40px;height:40px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:9px;border:1px solid #ecd8c4;background:#fff;border-radius:11px;cursor:pointer}.menu-toggle span{display:block;height:2px;background:var(--ink);border-radius:2px}.site-nav{display:none;position:absolute;top:70px;left:0;right:0;background:#fff8ef;padding:18px 24px 24px;box-shadow:0 15px 22px rgba(74,43,25,.1);flex-direction:column;align-items:stretch;gap:0}.site-nav.is-open{display:flex}.site-nav a{padding:12px}.nav-download{text-align:center;margin-top:8px}.hero{padding:45px 0 55px}.hero-grid{display:block}.hero-copy{padding:0}.eyebrow{font-size:10px}.hero-description{font-size:16px}.hero-note{margin-top:28px}.hero-visual{min-height:510px;margin-top:10px;transform:scale(.88)}.hero-blob{width:470px;height:440px}.phone-frame{width:277px;height:510px}.card-task{left:-14px;top:95px}.card-reward{right:-4px;bottom:70px}.section{padding:72px 0}.section-heading h2,.feature-copy h2,.fox-copy h2,.download-copy h2{font-size:43px}.steps-grid,.feature-grid,.fox-grid{grid-template-columns:1fr}.steps-grid{gap:14px}.step-card{min-height:0;padding:24px}.step-illustration{margin-bottom:10px}.feature-art{order:2;min-height:390px}.feature-copy{order:1}.fox-image-wrap{min-height:480px}.download-section{padding:5px 0 70px}.download-panel{padding:40px 30px;gap:25px;align-items:flex-start;flex-direction:column}.download-icon{width:102px;height:102px;padding:7px;border-radius:25px}.download-icon img{border-radius:18px}.footer-inner{flex-wrap:wrap;gap:10px;padding:20px 0}.footer-inner p{width:100%;order:3}}
@media(max-width:430px){h1{font-size:57px}.hero-actions{gap:21px}.hero-visual{margin-left:-18px;margin-right:-18px;transform:scale(.76);transform-origin:center top;height:460px;min-height:460px}.card-task{left:-25px}.card-reward{right:-26px}.section-heading h2,.feature-copy h2,.fox-copy h2,.download-copy h2{font-size:39px}.feature-art-card{max-width:95%}.fox-image-wrap{min-height:430px}.fox-image-wrap img{width:245px}}
/* Không để nội dung thẻ minh họa kéo rộng cột ở điện thoại 320 px. */
@media(max-width:760px){.feature-grid,.fox-grid{grid-template-columns:minmax(0,1fr)}.feature-art,.feature-copy,.fox-copy,.fox-image-wrap{min-width:0}.feature-art-card{width:min(345px,calc(100vw - 72px));max-width:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}