<style>
  :root{
    --kem:#FBF9F3;--trang-nga:#FFFFFF;
    --xanh-reu:#5A7044;--xanh-reu-nhat:#7DA063;
    --nau-dat:#3D2F23;--nau-dat-nhat:#6B5744;
    --vang:#E0B048;--vang-sang:#F2D68F;--nau-go:#B3854A;--dao:#EBA075;
    --vien:rgba(149,110,66,.20);--bong:rgba(76,59,46,.12);
    --serif:'Cormorant Garamond',serif;--sans:'Be Vietnam Pro',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  body{background:var(--kem);font-family:var(--sans);color:var(--nau-dat);min-height:100dvh;}

  .app{position:relative;width:100%;max-width:480px;margin:0 auto;min-height:100dvh;background:var(--kem);display:flex;flex-direction:column;overflow:hidden;}
  @media(min-width:520px){
    body{background:#E5DECF;display:flex;align-items:center;justify-content:center;padding:20px;}
    .app{height:880px;min-height:0;border-radius:40px;box-shadow:0 40px 80px -20px rgba(76,59,46,.45);}
  }
  .grain{position:fixed;inset:0;pointer-events:none;z-index:60;mix-blend-mode:multiply;opacity:.2;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");}

  .stage{flex:1;position:relative;overflow:hidden;}
  .screen{position:absolute;inset:0;overflow-y:auto;padding:max(18px,env(safe-area-inset-top)) 22px calc(env(safe-area-inset-bottom) + 178px);scrollbar-width:none;display:none;-webkit-overflow-scrolling:touch;}
  .screen::-webkit-scrollbar{display:none;}
  .screen.active{display:block;animation:fade .45s ease both;}
  @keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

  .eyebrow{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--vang);font-weight:600;}
  .pagetitle{font-family:var(--serif);font-weight:500;font-size:30px;color:var(--xanh-reu);line-height:1.12;margin-top:5px;}
  .divider{display:flex;align-items:center;gap:10px;margin:28px 0 14px;}
  .divider .line{height:1px;flex:1;background:var(--vien);}
  .divider span{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--nau-dat-nhat);font-weight:600;}
  .backbtn{display:inline-flex;align-items:center;gap:7px;background:none;border:none;color:var(--nau-go);font-family:var(--sans);font-weight:600;font-size:15.5px;cursor:pointer;margin-top:8px;}
  .backbtn svg{width:18px;height:18px;}

  .greet{margin-top:10px;}
  .greet .date{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--dao);font-weight:600;margin-bottom:6px;}
  .greet h1{font-family:var(--serif);font-weight:500;font-size:30px;color:var(--xanh-reu);line-height:1.15;}
  .greet h1 .name{font-style:italic;color:var(--nau-go);}
  .greet-whisper{margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--nau-dat);font-style:italic;padding-left:13px;border-left:2px solid var(--vang);}
  .breathe{margin-top:22px;background:linear-gradient(160deg,#66785A,#525F43);border-radius:26px;padding:24px 22px;color:var(--trang-nga);position:relative;overflow:hidden;box-shadow:0 18px 30px -14px rgba(82,93,65,.6);}
  .breathe::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(216,182,121,.35),transparent 70%);}
  .breathe .label{font-size:13px;letter-spacing:2px;text-transform:uppercase;opacity:.75;font-weight:500;margin-bottom:3px;}
  .breathe .title{font-family:var(--serif);font-size:21px;font-weight:500;margin-bottom:16px;}
  .breath-row{display:flex;align-items:center;gap:16px;}
  .orb-wrap{width:70px;height:70px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .orb{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--vang-sang),var(--vang));display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--nau-dat);font-weight:600;cursor:pointer;}
  .orb.run{animation:breath 8s ease-in-out infinite;}
  @keyframes breath{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(216,182,121,.45);}50%{transform:scale(1.5);box-shadow:0 0 0 24px rgba(216,182,121,0);}}
  .breath-cta{flex:1;}
  .breath-cta p{font-size:14.5px;line-height:1.55;opacity:.9;font-weight:450;}
  .breath-cta .start{margin-top:9px;font-size:14.5px;font-weight:600;color:var(--vang-sang);background:none;border:none;cursor:pointer;}

  .seed-card{background:var(--trang-nga);border-radius:28px;padding:24px;border:1px solid var(--vien);box-shadow:0 20px 40px -22px var(--bong);}
  .seed-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
  .seed-icon{width:54px;height:54px;border-radius:18px;flex-shrink:0;background:linear-gradient(150deg,#F8E8CA,#F2D49A);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(196,155,90,.4);}
  .seed-icon svg{width:28px;height:28px;}
  .seed-name h2{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--xanh-reu);line-height:1;}
  .seed-name .en{font-size:14.5px;color:var(--vang);font-weight:500;font-style:italic;margin-top:3px;}
  .seed-quote{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--nau-dat);padding:2px 2px 16px;}
  .task{background:var(--kem);border-radius:20px;padding:17px;border:1px dashed rgba(149,110,66,.35);}
  .task .tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--nau-go);background:rgba(196,155,90,.16);padding:4px 11px;border-radius:20px;margin-bottom:9px;}
  .task p{font-size:16px;line-height:1.6;color:var(--nau-dat);}
  /* ===== THẺ HÔM NAY NÂNG TẦM ===== */
  .today-head{text-align:center;}
  .today-card{position:relative;background:linear-gradient(180deg,#FFFFFF,#FDFBF6);border:1px solid rgba(149,110,66,.14);border-radius:28px;padding:24px 22px 22px;text-align:center;margin-top:20px;overflow:hidden;box-shadow:0 24px 52px -30px rgba(76,59,46,.42),0 3px 10px -6px rgba(76,59,46,.12);}
  .today-card::before{content:"";position:absolute;top:0;left:0;right:0;height:130px;background:radial-gradient(120% 100% at 50% 0%,rgba(201,160,90,.12),transparent 70%);pointer-events:none;}
  .tcd-eyebrow{display:flex;align-items:center;justify-content:center;gap:12px;}
  .tcd-eyebrow span{font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;color:var(--vang);font-weight:700;white-space:nowrap;}
  .tcd-eyebrow::before,.tcd-eyebrow::after{content:"";height:1px;width:30px;background:linear-gradient(90deg,transparent,rgba(201,160,90,.6));}
  .tcd-eyebrow::after{background:linear-gradient(90deg,rgba(201,160,90,.6),transparent);}
  .tcd-applewrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:116px;height:116px;margin:10px auto 0;}
  .tcd-applewrap::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 44%,rgba(201,160,90,.30),rgba(201,160,90,0) 66%);}
  .today-card .tc-apple{position:relative;margin:0;filter:drop-shadow(0 7px 11px rgba(76,59,46,.20));}
  .today-card .tc-apple svg{width:76px;height:76px;}
  .today-card .tc-name{margin-top:2px;}
  .today-card .tc-rule{margin:13px auto;}
  .today-card .tc-whisper{margin:12px auto 0;}
  .tcd-task{margin-top:18px;background:linear-gradient(180deg,#F6F3EA,#F6F0E2);border:1px solid rgba(149,110,66,.12);border-radius:18px;padding:15px 16px 16px;text-align:left;}
  .tcd-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.2px;color:var(--nau-go);background:rgba(201,160,90,.18);padding:5px 11px;border-radius:999px;margin-bottom:10px;}
  .tcd-task p{font-size:16px;line-height:1.58;color:var(--nau-dat);}
  .why{margin-top:18px;text-align:left;}
  .why:empty{display:none;}
  .why-h{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--nau-go);font-weight:700;margin-bottom:11px;}
  .why-h::after{content:"";height:1px;flex:1;background:rgba(149,110,66,.16);}
  .grow{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;border-radius:14px;margin-bottom:9px;}
  .grow.con{background:rgba(110,139,87,.10);}
  .grow.minh{background:rgba(208,138,99,.11);}
  .gbadge{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
  .grow.con .gbadge{background:rgba(110,139,87,.20);}
  .grow.minh .gbadge{background:rgba(208,138,99,.20);}
  .gtx{font-size:14.5px;line-height:1.5;color:var(--nau-dat);}
  .gtx b{font-weight:700;}
  .grow.con .gtx b{color:var(--xanh-reu);}
  .grow.minh .gtx b{color:var(--nau-go);}
  .today-card #doneBtn{box-shadow:0 15px 28px -12px rgba(154,110,64,.6),inset 0 1px 0 rgba(255,255,255,.38);}
  .today-card .tc-open{margin-top:11px;background:#fff;}
  .big-btn{margin-top:18px;width:100%;border:none;cursor:pointer;background:linear-gradient(135deg,var(--vang-sang),var(--nau-go));color:var(--trang-nga);font-family:var(--sans);font-weight:600;font-size:16px;padding:17px;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 14px 26px -10px rgba(149,110,66,.6);transition:transform .15s;}
  .big-btn:active{transform:scale(.97);}
  .big-btn.done{background:linear-gradient(135deg,#7E9067,var(--xanh-reu));}
  .big-btn svg{width:20px;height:20px;}
  .ghost-btn{margin-top:12px;width:100%;background:none;border:1.5px solid var(--vien);color:var(--nau-go);font-family:var(--sans);font-weight:600;font-size:15.5px;padding:14px;border-radius:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
  .ghost-btn svg{width:17px;height:17px;}
  .progress{margin-top:24px;background:var(--trang-nga);border-radius:24px;padding:20px 22px;border:1px solid var(--vien);display:flex;align-items:center;gap:16px;}
  .tree{width:52px;height:52px;flex-shrink:0;}
  .progress .h{font-family:var(--serif);font-size:20px;color:var(--xanh-reu);font-weight:600;}
  .progress .s{font-size:13px;color:var(--nau-dat-nhat);margin-top:2px;}
  .bar{height:8px;border-radius:8px;background:rgba(149,110,66,.16);margin-top:10px;overflow:hidden;}
  .bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--vang-sang),var(--vang));transition:width .8s ease;}

  .garden-hero{margin-top:16px;border-radius:26px;padding:24px 22px 18px;background:linear-gradient(165deg,#7E9067,#61724E);color:var(--trang-nga);position:relative;overflow:hidden;}
  .garden-hero .gh-title{font-family:var(--serif);font-size:25px;font-weight:600;position:relative;}
  .garden-hero .gh-sub{font-size:14.5px;opacity:.85;margin-top:5px;font-weight:450;position:relative;}
  .group-tabs{display:flex;gap:8px;overflow-x:auto;margin:18px 0 6px;scrollbar-width:none;}
  .group-tabs::-webkit-scrollbar{display:none;}
  .gtab{flex-shrink:0;font-size:14.5px;font-weight:500;color:var(--nau-dat-nhat);background:var(--trang-nga);border:1px solid var(--vien);padding:8px 15px;border-radius:20px;cursor:pointer;white-space:nowrap;}
  .gtab.on{background:var(--xanh-reu);color:var(--trang-nga);border-color:var(--xanh-reu);}
  .seed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:14px;}
  .seed-cell{background:var(--trang-nga);border:1px solid var(--vien);border-radius:20px;padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:transform .15s,box-shadow .15s;}
  .seed-cell:active{transform:scale(.95);}
  .apple-wrap{display:flex;align-items:center;justify-content:center;height:46px;}
  .apple-wrap .seed-svg{filter:drop-shadow(0 4px 6px rgba(76,59,46,.16));}
  .seed-cell .nm{font-size:13px;font-weight:500;color:var(--nau-dat);text-align:center;line-height:1.25;}

  .age-tabs{display:flex;gap:8px;margin:20px 0 16px;}
  .atab{flex:1;text-align:center;font-size:14.5px;font-weight:600;color:var(--nau-dat-nhat);background:var(--trang-nga);border:1px solid var(--vien);padding:11px 4px;border-radius:16px;cursor:pointer;}
  .atab.on{background:var(--vang);color:var(--trang-nga);border-color:var(--vang);box-shadow:0 8px 16px -8px rgba(196,155,90,.6);}
  .tqp-brand{text-align:center;font-size:13px;letter-spacing:.3px;color:var(--nau-dat-nhat);margin:2px 0 16px;font-weight:500;}
  .tqp-brand b{color:var(--vang);font-weight:800;}
  .tqp-tag{font-family:var(--sans);font-weight:800;letter-spacing:.7px;color:var(--vang);}
  .block{background:var(--trang-nga);border:1px solid var(--vien);border-radius:22px;padding:20px;margin-bottom:14px;box-shadow:0 14px 30px -24px var(--bong);}
  .block .bh{display:flex;align-items:center;gap:9px;flex-wrap:nowrap;white-space:nowrap;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--nau-go);font-weight:600;margin-bottom:4px;}
  .block .bh svg{width:17px;height:17px;flex-shrink:0;}
  .block .bh-sub{font-size:14px;font-weight:500;color:var(--nau-dat-nhat);letter-spacing:.2px;line-height:1.4;margin-bottom:13px;}
  .block p{font-size:16.5px;line-height:1.65;color:var(--nau-dat);}
  .qa{display:flex;flex-direction:column;gap:12px;}
  .q{background:var(--kem);border-radius:14px;padding:13px 15px;}
  .q .who{font-size:13px;font-weight:600;color:var(--dao);margin-bottom:3px;}
  .q .txt{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--nau-dat);line-height:1.55;}

  .mirror-wrap{margin-top:22px;text-align:center;}
  .mirror-frame{margin:0 auto;max-width:300px;background:radial-gradient(circle at 50% 35%,#FAF9F5,#EFE9DB);border-radius:140px 140px 36px 36px;border:8px solid var(--vang);box-shadow:0 22px 40px -18px rgba(149,110,66,.5),inset 0 0 40px rgba(196,155,90,.12);padding:48px 30px 40px;}
  .mirror-frame .lbl{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--vang);font-weight:600;margin-bottom:18px;}
  .mirror-frame .mq{font-family:var(--serif);font-size:24px;font-weight:500;color:var(--xanh-reu);line-height:1.55;font-style:italic;}
  .mirror-list{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
  .mirror-list .ml-h{font-size:12.5px;letter-spacing:.5px;color:var(--nau-dat-nhat);margin:4px 2px 2px;font-weight:600;}
  .mirror-list .ml-item{position:relative;background:var(--trang-nga,#FAF9F5);border:1px solid var(--vien,#E7DECF);border-radius:14px;padding:12px 14px;text-align:left;}
  .mirror-list .ml-meta{font-size:12px;color:var(--nau-dat-nhat);margin-bottom:6px;}
  .mirror-list .ml-text{font-size:14.5px;color:var(--nau-dat);line-height:1.55;white-space:pre-wrap;word-break:break-word;}
  .mirror-list .ml-del{position:absolute;top:10px;right:10px;border:1px solid var(--vien,#E7DECF);background:transparent;color:#9a3b2e;border-radius:10px;padding:3px 9px;font-size:11.5px;cursor:pointer;}
  .mood-label{text-align:center;font-size:14.5px;color:var(--nau-dat-nhat);margin:26px 0 12px;}
  .moods{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
  .chip{font-size:14.5px;font-weight:500;color:var(--nau-dat);background:var(--trang-nga);border:1px solid var(--vien);padding:9px 15px;border-radius:20px;cursor:pointer;transition:.15s;}
  .chip.on{background:var(--xanh-reu-nhat);color:var(--trang-nga);border-color:var(--xanh-reu-nhat);}
  .journal{margin-top:20px;}
  .journal .priv{font-size:13px;color:var(--nau-dat-nhat);display:flex;align-items:center;gap:6px;justify-content:center;margin-bottom:9px;}
  .journal textarea{width:100%;background:var(--trang-nga);border:1px solid var(--vien);border-radius:18px;padding:15px;font-family:var(--sans);font-size:15.5px;color:var(--nau-dat);resize:none;outline:none;line-height:1.55;}
  .journal textarea:focus{border-color:var(--vang);}

  .wallet-card{margin-top:16px;background:linear-gradient(140deg,var(--nau-go),#6E4F30);border-radius:26px;padding:24px;color:var(--trang-nga);position:relative;overflow:hidden;box-shadow:0 20px 34px -16px rgba(149,110,66,.6);}
  .wallet-card::after{content:"";position:absolute;right:-20px;bottom:-30px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(216,182,121,.4),transparent 70%);}
  .wallet-card .wl{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;opacity:.8;}
  .wallet-card .amt{font-family:var(--serif);font-size:46px;font-weight:600;display:flex;align-items:center;gap:10px;margin-top:4px;}
  .wallet-card .amt svg{width:34px;height:34px;}
  .wallet-card .sub{font-size:14.5px;opacity:.85;font-weight:450;margin-top:2px;}
  .chal{display:flex;flex-direction:column;gap:11px;}
  .chal-item{background:var(--trang-nga);border:1px solid var(--vien);border-radius:18px;padding:15px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;}
  .chal-num{width:46px;height:46px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--trang-nga);background:linear-gradient(145deg,var(--vang-sang),var(--vang));}
  .chal-item.on7 .chal-num{background:linear-gradient(145deg,#7E9067,var(--xanh-reu));}
  .chal-info{flex:1;}
  .chal-info .ct{font-size:16.5px;font-weight:600;color:var(--nau-dat);}
  .chal-info .cs{font-size:13px;color:var(--nau-dat-nhat);margin-top:2px;}
  .chal-info .cbar{height:6px;border-radius:6px;background:rgba(149,110,66,.16);margin-top:8px;overflow:hidden;}
  .chal-info .cbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--vang-sang),var(--vang));}
  .badges{display:flex;gap:14px;justify-content:center;margin-top:6px;}
  .badge{display:flex;flex-direction:column;align-items:center;gap:6px;}
  .badge .bc{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 38% 32%,#FAF4E8,#F0E4CC);box-shadow:inset 0 0 0 1.5px rgba(196,155,90,.55),0 8px 16px -8px rgba(196,155,90,.45);}
  .badge.lock .bc{background:#EEEAE2;box-shadow:inset 0 0 0 1.5px rgba(120,106,90,.22);}
  .badge.lock .bc .seed-svg{opacity:.45;}
  .badge .bn{font-size:13px;color:var(--nau-dat-nhat);font-weight:500;}

  #s-login{padding:0;}
  #s-login.active{display:flex;flex-direction:column;}
  .login-top{flex:1;background:linear-gradient(165deg,#7E9067,#525F43);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--trang-nga);padding:40px;position:relative;overflow:hidden;}
  .logo-apple{width:104px;height:104px;border-radius:50%;background:var(--trang-nga);display:flex;align-items:center;justify-content:center;box-shadow:0 18px 36px -12px rgba(149,110,66,.55);position:relative;z-index:2;}
  .logo-apple img{width:82px;height:82px;object-fit:contain;}
  .login-top h1{font-family:var(--serif);font-size:34px;font-weight:600;margin-top:22px;z-index:2;}
  .login-top p{font-size:15.5px;opacity:.85;font-weight:450;margin-top:8px;text-align:center;line-height:1.5;z-index:2;max-width:240px;}
  .login-bottom{background:var(--kem);padding:30px 26px 40px;border-radius:34px 34px 0 0;margin-top:-26px;position:relative;z-index:3;}
  .gbtn{width:100%;background:var(--trang-nga);border:1px solid var(--vien);border-radius:18px;padding:16px;display:flex;align-items:center;justify-content:center;gap:11px;font-family:var(--sans);font-weight:600;font-size:16.5px;color:var(--nau-dat);cursor:pointer;box-shadow:0 10px 22px -14px var(--bong);}
  .gbtn svg{width:21px;height:21px;}
  .or{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--nau-dat-nhat);font-size:13px;}
  .or .line{flex:1;height:1px;background:var(--vien);}
  .field{background:var(--trang-nga);border:1px solid var(--vien);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:11px;margin-bottom:12px;}
  .field svg{width:18px;height:18px;stroke:var(--nau-dat-nhat);}
  .field input{border:none;background:none;outline:none;flex:1;font-family:var(--sans);font-size:16px;color:var(--nau-dat);}
  .field input::placeholder{color:var(--nau-dat-nhat);opacity:.7;}
  .login-bottom .big-btn{margin-top:6px;}
  .terms{text-align:center;font-size:13px;color:var(--nau-dat-nhat);margin-top:16px;line-height:1.6;}
  .terms a{color:var(--nau-go);font-weight:600;}
  /* Chân trang: một dòng nhẹ, chi tiết doanh nghiệp nằm ở trang riêng /thong-tin.html
     (luật TMĐT chỉ yêu cầu công khai và có đường dẫn tới, không bắt phải in hết ra đây) */
  .bizinfo{margin-top:20px;text-align:center;font-size:12px;line-height:1.6;
    color:var(--nau-dat-nhat);opacity:.62;font-style:normal;}
  .bizinfo a{color:var(--nau-dat-nhat);text-decoration:none;border-bottom:1px solid var(--vien);}

  .prod-card{background:var(--trang-nga);border:1px solid var(--vien);border-radius:22px;padding:18px;margin-bottom:13px;display:flex;gap:15px;align-items:center;box-shadow:0 14px 30px -24px var(--bong);cursor:pointer;}
  .prod-thumb{width:58px;height:58px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .prod-thumb svg{width:30px;height:30px;}
  .prod-card .pt{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--xanh-reu);line-height:1.1;}
  .prod-card .pd{font-size:13px;color:var(--nau-dat-nhat);margin-top:4px;line-height:1.55;}
  .prod-grp{font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:var(--nau-dat-nhat);font-weight:700;margin:24px 3px 12px;}
  .prod-grp:first-child{margin-top:6px;}
  .prod-badge{display:inline-block;background:var(--vang);color:#3a2f1c;font-size:10.5px;font-weight:800;border-radius:999px;padding:1px 8px;margin-left:8px;vertical-align:2px;letter-spacing:.4px;}

  .acc-head{margin-top:14px;display:flex;align-items:center;gap:16px;}
  .acc-ava{width:66px;height:66px;border-radius:50%;background:linear-gradient(145deg,#F8E8CA,var(--vang));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:28px;font-weight:600;color:var(--nau-dat);box-shadow:0 10px 20px -10px rgba(196,155,90,.6);}
  .acc-head .an{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--xanh-reu);}
  .acc-head .ae{font-size:14.5px;color:var(--nau-dat-nhat);margin-top:2px;}
  .acc-status{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
  .acc-tile{background:var(--trang-nga);border:1px solid var(--vien);border-radius:18px;padding:15px 15px 13px;box-shadow:0 8px 18px -14px rgba(93,80,60,.4);transition:transform .15s var(--ease-out,ease),box-shadow .15s;}
  .acc-tile-seed{cursor:pointer;}
  .acc-tile-seed:active{transform:translateY(1px);}
  .acc-tile-lbl{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--nau-dat-nhat);letter-spacing:.2px;}
  .acc-tile-lbl svg{width:16px;height:16px;stroke:var(--nau-go);flex:none;}
  .acc-tile-val{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--xanh-reu);line-height:1.15;margin-top:9px;}
  .acc-tile-unit{font-family:var(--sans,inherit);font-size:14px;font-weight:600;color:var(--nau-go);}
  .acc-tile-sub{font-size:12px;color:var(--nau-dat-nhat);margin-top:4px;}
  .acc-tile-ok .acc-tile-val{color:var(--xanh-reu);}
  .acc-tile-soon{border-color:var(--vang);background:linear-gradient(150deg,#FFFBF2,var(--trang-nga));}
  .acc-tile-soon .acc-tile-val{color:var(--nau-go);}
  .acc-tile-warn{border-color:#E0B4A0;background:linear-gradient(150deg,#FDF3EE,var(--trang-nga));}
  .acc-tile-warn .acc-tile-val{color:#B15A3E;}
  .menu{background:var(--trang-nga);border:1px solid var(--vien);border-radius:22px;overflow:hidden;margin-top:20px;}
  .menu-sec{padding:13px 18px 6px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--nau-dat-nhat);opacity:.72;background:var(--kem);}
  .menu-item{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;border-bottom:1px solid var(--vien);}
  .menu-item:last-child{border-bottom:none;}
  .menu-item svg{width:20px;height:20px;stroke:var(--nau-go);}
  .menu-item .mt{flex:1;font-size:16.5px;font-weight:500;color:var(--nau-dat);}
  .menu-item .ar{width:8px;height:8px;border-right:2px solid var(--nau-dat-nhat);border-bottom:2px solid var(--nau-dat-nhat);transform:rotate(-45deg);opacity:.5;}

  .tabbar{position:relative;height:calc(76px + env(safe-area-inset-bottom));background:var(--trang-nga);border-top:1px solid var(--vien);display:flex;justify-content:space-around;align-items:flex-start;padding-top:11px;z-index:40;box-shadow:0 -10px 30px -12px var(--bong);flex-shrink:0;}
  .tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;color:var(--nau-dat-nhat);cursor:pointer;font-weight:500;flex:1;transition:color .2s;}
  .tab svg{width:23px;height:23px;stroke:var(--nau-dat-nhat);fill:none;}
  .tab.active{color:var(--xanh-reu);}
  .tab.active svg{stroke:var(--xanh-reu);}
  .tab.center{position:relative;}
  .apple-btn{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:60px;height:60px;border-radius:50%;background:var(--trang-nga);border:1px solid var(--vien);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px -8px rgba(149,110,66,.5),0 0 0 6px var(--trang-nga);cursor:pointer;transition:transform .2s;}
  .apple-btn:active{transform:translateX(-50%) scale(.92);}
  .apple-btn img{width:46px;height:46px;object-fit:contain;}
  .tab.center .lbl{margin-top:34px;color:var(--nau-go);font-weight:600;}
  .tabbar.hidden{display:none;}

  .toast{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 96px);left:50%;transform:translateX(-50%) translateY(20px);max-width:86%;background:var(--xanh-reu);color:var(--trang-nga);padding:13px 20px;border-radius:16px;font-size:15.5px;font-weight:500;line-height:1.4;text-align:center;box-shadow:0 16px 30px -10px rgba(82,93,65,.6);opacity:0;pointer-events:none;transition:.4s;z-index:90;display:flex;gap:9px;align-items:center;justify-content:center;}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .hint{text-align:center;font-size:13px;color:#9a8b76;margin-top:14px;font-style:italic;}
  /* Biết ơn (Hôm nay) */
  .grat-card{margin-top:18px;background:var(--trang-nga);border:1px solid var(--vien);border-radius:22px;padding:20px;}
  .grat-card .gh2{font-family:var(--serif);font-size:20px;color:var(--xanh-reu);font-weight:600;margin-bottom:12px;}
  .grat-row{display:flex;gap:8px;}
  .grat-row input{flex:1;background:var(--kem);border:1px solid var(--vien);border-radius:14px;padding:12px 14px;font-family:var(--sans);font-size:15.5px;color:var(--nau-dat);outline:none;}
  .grat-row input:focus{border-color:var(--vang);}
  .grat-row button{background:linear-gradient(135deg,var(--vang-sang),var(--nau-go));border:none;color:var(--trang-nga);border-radius:14px;padding:0 16px;font-weight:600;cursor:pointer;}
  .grat-list{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:7px;}
  .grat-list li{font-size:15px;color:var(--nau-dat);display:flex;gap:8px;align-items:flex-start;}
  .grat-list li::before{content:"🌱";font-size:13px;line-height:1.55;}
  .grat-empty{color:var(--nau-dat-nhat);font-style:italic;font-size:14.5px;}

  /* Nút Bình tĩnh (SOS) + màn dẫn thở */
  .app{position:relative;}
  .sos-btn{position:absolute;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:7px;background:rgba(82,93,65,.94);color:var(--trang-nga);border:none;border-radius:30px;padding:11px 16px;font-family:var(--sans);font-weight:600;font-size:14.5px;cursor:pointer;box-shadow:0 10px 24px -8px rgba(82,93,65,.75);}
  .sos-btn svg{width:17px;height:17px;}
  .sos-btn.hidden{display:none;}
  .sos-overlay{position:absolute;inset:0;z-index:95;background:linear-gradient(165deg,#66785A,#3A4530);color:var(--trang-nga);display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 28px;}
  .sos-overlay.open{display:flex;animation:fade .4s ease both;}
  .sos-label{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;opacity:.8;margin-bottom:30px;}
  .sos-circle{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(216,182,121,.55),rgba(216,182,121,.1));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:22px;font-weight:500;color:var(--trang-nga);box-shadow:0 0 70px rgba(216,182,121,.28);animation:sosBreath 8s ease-in-out infinite;}
  @keyframes sosBreath{0%,100%{transform:scale(.78);}50%{transform:scale(1.18);}}
  .sos-anchor{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;margin:36px 0 0;max-width:300px;min-height:66px;transition:opacity .6s;}
  .sos-done{margin-top:34px;background:rgba(250,249,245,.16);border:1.5px solid rgba(250,249,245,.45);color:var(--trang-nga);font-family:var(--sans);font-weight:600;font-size:16.5px;padding:14px 30px;border-radius:30px;cursor:pointer;}

  /* Thư viện Audio */
  .audio-group{margin-bottom:22px;}
  .audio-group .agh{font-family:var(--serif);font-size:20px;color:var(--xanh-reu);font-weight:600;margin:0 0 10px;}
  .au-item{display:flex;align-items:center;gap:13px;background:var(--trang-nga);border:1px solid var(--vien);border-radius:18px;padding:14px 16px;margin-bottom:9px;}
  .au-play{width:44px;height:44px;flex-shrink:0;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(145deg,var(--vang-sang),var(--vang));color:var(--nau-dat);display:flex;align-items:center;justify-content:center;}
  .au-play svg{width:18px;height:18px;fill:currentColor;}
  .au-meta{flex:1;}
  .au-meta .at{font-size:16px;font-weight:600;color:var(--nau-dat);}
  .au-meta .ad{font-size:13px;color:var(--nau-dat-nhat);margin-top:2px;}
  .au-info{background:none;border:none;padding:3px 0 0;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--vang);cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
  .desc-box{background:var(--trang-nga);border-radius:26px;max-width:360px;width:100%;padding:26px 24px;box-shadow:0 24px 60px -20px rgba(44,38,30,.6);max-height:80vh;overflow:auto;}
  .oracle-card{display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;padding:16px 18px;border:none;border-radius:22px;cursor:pointer;background:linear-gradient(135deg,#3b3a52,#61724E);box-shadow:0 14px 30px -14px rgba(44,38,30,.6);}
  .oracle-orb{width:46px;height:46px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6e6b0,#D2A24C 60%,#7a6a3a);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 0 18px 2px rgba(196,155,90,.5);animation:oracleGlow 2.6s ease-in-out infinite;}
  @keyframes oracleGlow{0%,100%{box-shadow:0 0 14px 1px rgba(196,155,90,.4)}50%{box-shadow:0 0 24px 5px rgba(246,230,176,.7)}}
  .oracle-card .oc-t{font-family:var(--serif);font-size:20px;font-weight:600;color:#FAF4E8;}
  .oracle-card .oc-s{font-size:13px;color:rgba(250,244,232,.8);margin-top:2px;}
  .oracle-box{background:linear-gradient(165deg,#fbf7ee,#f3ead8);border-radius:28px;max-width:360px;width:100%;padding:28px 24px;text-align:center;box-shadow:0 24px 60px -18px rgba(44,38,30,.65);}
  .oracle-box .o-eyebrow{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--vang);font-weight:700;}
  .oracle-box .o-icon{width:74px;height:74px;margin:14px auto 6px;display:flex;align-items:center;justify-content:center;animation:oraclePop .5s cubic-bezier(.2,1.4,.4,1);}
  @keyframes oraclePop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
  .oracle-box .o-name{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--xanh-reu);}
  .oracle-box .o-msg{font-size:16.5px;line-height:1.6;color:var(--nau-dat);font-style:italic;margin-top:10px;}
  .oracle-box .o-act{font-size:14.5px;color:var(--nau-go);margin-top:12px;line-height:1.5;}
  .desc-box .dt{font-family:var(--serif);font-size:20px;color:var(--xanh-reu);font-weight:600;}
  .desc-box .db{font-size:15.5px;color:var(--nau-dat);line-height:1.6;margin-top:12px;}
  .au-soon{font-size:13px;color:var(--nau-go);border:1px solid var(--vien);padding:3px 9px;border-radius:12px;white-space:nowrap;}

  /* Người Đồng Hành (chat AI) */
  #s-companion{padding:0;}
  #s-companion.active{display:flex;flex-direction:column;}
  .chat-head{padding:16px 22px 6px;flex-shrink:0;}
  .chat-note{font-size:13px;color:var(--nau-dat-nhat);margin-top:4px;}
  .chat-log{flex:1;overflow-y:auto;padding:10px 18px 14px;display:flex;flex-direction:column;gap:10px;scrollbar-width:none;}
  .chat-log::-webkit-scrollbar{display:none;}
  .bubble{max-width:82%;padding:11px 15px;border-radius:18px;font-size:16px;line-height:1.55;}
  .bubble.me{align-self:flex-end;background:linear-gradient(135deg,var(--vang-sang),var(--nau-go));color:var(--trang-nga);border-bottom-right-radius:6px;}
  .bubble.bot{align-self:flex-start;background:var(--trang-nga);border:1px solid var(--vien);color:var(--nau-dat);border-bottom-left-radius:6px;}
  .bubble.typing{color:var(--nau-dat-nhat);font-style:italic;}
  .chat-bar{display:flex;gap:8px;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--vien);background:var(--trang-nga);flex-shrink:0;}
  .chat-bar input{flex:1;background:var(--kem);border:1px solid var(--vien);border-radius:22px;padding:12px 16px;font-family:var(--sans);font-size:16px;color:var(--nau-dat);outline:none;}
  .chat-bar input:focus{border-color:var(--vang);}
  .chat-bar button{width:46px;height:46px;flex-shrink:0;border:none;border-radius:50%;background:linear-gradient(135deg,var(--vang-sang),var(--nau-go));color:var(--trang-nga);cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .chat-bar button svg{width:20px;height:20px;fill:currentColor;}

  /* Video YouTube */
  .video-wrap{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 14px 30px -18px var(--bong);}
  .video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .vid-thumb{width:104px;height:60px;border-radius:12px;object-fit:cover;flex-shrink:0;background:var(--bone-2);}

  /* Audio theo hạt giống (trong chi tiết) */
  .seed-audio{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px;}
  .au-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--nau-go);background:rgba(196,155,90,.15);border:1px solid var(--vien);border-radius:20px;padding:10px 15px;cursor:pointer;}
  .au-pill svg{width:15px;height:15px;fill:currentColor;}
  .au-pill.off{color:var(--nau-dat-nhat);opacity:.7;cursor:default;background:var(--kem);}
  .au-pill.playing{background:var(--xanh-reu);border-color:var(--xanh-reu);color:#FAF9F5;}
  .au-pill.playing svg{fill:#FAF9F5;}
  .au-play.playing{background:linear-gradient(145deg,#8A9C77,#61724E);color:#FAF9F5;animation:auPulse 1.4s ease-in-out infinite;}
  .au-item.playing{border-color:var(--xanh-reu);background:linear-gradient(150deg,#F3F1E6,#EAE7D6);}
  .au-item.playing .at{color:var(--xanh-reu);}
  @keyframes auPulse{0%,100%{box-shadow:0 0 0 3px rgba(82,93,65,.16);}50%{box-shadow:0 0 0 8px rgba(82,93,65,.04);}}

  /* ===== MÀN HÌNH CHÀO (Đất Và Cây) — chạm để bước vào ===== */
  #welcomeScreen{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
    background:radial-gradient(125% 90% at 50% 16%,#FFFDF8 0%,var(--kem) 46%,#EFE8D6 100%);
    cursor:pointer;overflow:hidden;text-align:center;padding:40px 30px;
    -webkit-tap-highlight-color:transparent;animation:wsIn .8s ease both;}
  #welcomeScreen.ws-leaving{animation:wsOut .55s ease forwards;}
  .ws-glow{position:absolute;top:-18%;left:50%;width:520px;height:520px;border-radius:50%;margin-left:-260px;
    background:radial-gradient(circle,rgba(211,166,72,.22),transparent 62%);pointer-events:none;
    animation:wsBreathe 7s ease-in-out infinite;}
  .ws-inner{position:relative;max-width:360px;display:flex;flex-direction:column;align-items:center;}
  .ws-eyebrow{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--vang);font-weight:600;
    animation:wsRise .8s ease .2s both;}
  .ws-logo{width:106px;height:106px;margin:18px 0 4px;animation:wsRise .9s ease .35s both;}
  .ws-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(90,112,68,.25));
    animation:wsFloat 5.5s ease-in-out infinite;}
  .ws-brand{font-weight:600;font-size:14px;letter-spacing:5px;text-transform:uppercase;color:var(--xanh-reu);
    animation:wsRise .8s ease .5s both;}
  .ws-slogan{font-family:var(--serif);font-weight:500;color:var(--nau-dat);line-height:1.08;margin-top:16px;
    font-size:clamp(34px,11vw,46px);}
  .ws-slogan span{display:block;animation:wsRise .9s ease both;}
  .ws-slogan span:nth-child(1){animation-delay:.7s;}
  .ws-slogan span:nth-child(2){animation-delay:.92s;color:var(--xanh-reu);}
  .ws-sub{margin-top:20px;font-size:15.5px;line-height:1.65;color:var(--nau-dat-nhat);font-style:italic;
    animation:wsRise .9s ease 1.2s both;}
  .ws-cta{margin-top:32px;animation:wsRise .9s ease 1.55s both;}
  .ws-cta-pill{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--trang-nga);
    background:linear-gradient(135deg,var(--vang-sang),var(--nau-go));padding:15px 30px;border-radius:30px;
    box-shadow:0 14px 28px -10px rgba(168,122,70,.7);animation:wsPulse 2.4s ease-in-out infinite;}
  .ws-cta-pill::after{content:"\2192";font-size:17px;}
  @keyframes wsIn{from{opacity:0;}to{opacity:1;}}
  @keyframes wsOut{to{opacity:0;transform:scale(1.05);}}
  @keyframes wsRise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
  @keyframes wsFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
  @keyframes wsBreathe{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.08);}}
  @keyframes wsPulse{0%,100%{box-shadow:0 14px 28px -10px rgba(168,122,70,.7);}50%{box-shadow:0 16px 34px -6px rgba(168,122,70,.45);}}

  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

  /* Chữ chắc hơn (2026-07-07): chữ thường dày hơn, tiêu đề serif đậm hơn cho cảm giác vững */
  body,.screen{font-weight:500;}
  .pagetitle,.ws-slogan,.tc-name,.seed-name,.gd-welcome-t,.dt,.today-card .tc-name{font-weight:600;}
</style>
<link rel="stylesheet" href="vth-skin.css?v=46">
<link rel="stylesheet" href="habit.css?v=46">
<link rel="stylesheet" href="journey.css?v=47">
<link rel="stylesheet" href="garden.css?v=48">
<link rel="stylesheet" href="mood.css?v=46">
<link rel="stylesheet" href="diemtua.css?v=8">
<!-- LỚP ÁO MỚI — nạp SAU cùng để thắng cascade. Gỡ dòng này là quay về giao diện cũ. -->
<link rel="stylesheet" href="skin2.css?v=38">
<link rel="stylesheet" href="cungcon.css?v=1">
</head>
<body>
<!-- MÀN HÌNH CHÀO (cover) — chạm để bước vào -->
<div id="welcomeScreen" role="button" tabindex="0" aria-label="Chạm để bước vào khu vườn" onclick="VTHWelcome.enter()">
  <div class="ws-glow"></div>
  <div class="ws-inner">
    <div class="ws-logo"><img src="logo-datvacay.png?v=1" alt="Đất Và Cây" width="106" height="106"></div>
    <div class="ws-brand">Đất&nbsp;Và&nbsp;Cây</div>
    <h1 class="ws-slogan"><span>Cha mẹ là đất,</span><span>con là cây.</span></h1>
    <p class="ws-sub" id="wsSub">Đất lành thì cây tự xanh.<br>Mỗi ngày, mình vun một hạt yêu thương cho con.</p>
    <div class="ws-cta"><span class="ws-cta-pill">Chạm để bước vào khu vườn</span></div>
  </div>
</div>
<script>
  window.VTHWelcome = {
    enter: function(){
      var el = document.getElementById('welcomeScreen');
      if(!el || el._gone) return;
      el._gone = true;
      try{ if(window.VTHMotion && VTHMotion.chime) VTHMotion.chime('bloom'); }catch(e){}
      el.classList.add('ws-leaving');
      setTimeout(function(){ el.style.display='none'; }, 620);
    }
  };
  (function(){
    var el = document.getElementById('welcomeScreen');
    if(el) el.addEventListener('keydown', function(e){
      if(e.key==='Enter' || e.key===' '){ e.preventDefault(); VTHWelcome.enter(); }
    });
  })();

  // Châm ngôn "Đất và Cây" — mỗi ngày một câu, xoay vòng để cha mẹ luôn ngấm triết lý chăm đất–chăm cây
  (function(){
    var sub = document.getElementById('wsSub');
    if(!sub) return;
    var CAU = [
      ['Đất lành thì cây tự xanh.','Hôm nay, mình làm đất dịu lại một chút.'],
      ['Cây không lớn nhanh hơn vì bị quát.','Cây lớn vì đất đủ ấm.'],
      ['Muốn con đổi, mình tưới gốc trước.','Gốc là sự bình an của cha mẹ.'],
      ['Đất giận thì cây co lại.','Hôm nay mình hít thở, cho đất mát lành.'],
      ['Con là cây đang vươn về phía ánh sáng.','Cha mẹ chính là ánh sáng đó.'],
      ['Không có cây xấu, chỉ có đất chưa đủ lành.','Mình chăm đất, cây sẽ tự tìm cách xanh.'],
      ['Mỗi lời dịu dàng là một giọt nước cho cây.','Mỗi lần mình bình tĩnh, đất thêm màu mỡ.'],
      ['Cây cần thời gian để bén rễ.','Đất kiên nhẫn thì cây vững vàng.'],
      ['Trước khi sửa cây, hãy ngồi xuống với đất.','Đất an thì cây an.'],
      ['Biết ơn là gốc rễ.','Gốc sâu thì giông bão nào cây cũng đứng.'],
      ['Con cong vì gió, không phải vì hư.','Đất ôm lấy gốc, cây sẽ thẳng lại.'],
      ['Mình không trồng được trái ngay hôm nay.','Mình chỉ cần tưới đều mỗi ngày.'],
      ['Cây nhìn đất mà lớn.','Con nhìn cách cha mẹ sống mà nên người.'],
      ['Đất không kéo cây lên cho nhanh.','Đất chỉ ở đó, ấm và vững.'],
      ['Một ngày đất dịu là một ngày cây bớt sợ.','Hôm nay mình chọn dịu dàng.'],
      ['Rễ con cắm sâu vào sự an toàn của mình.','Mình bình an, con mới dám lớn.'],
      ['Cây héo không cần thêm lời mắng.','Cây héo cần đất được tưới.'],
      ['Lắng nghe con là cách đất hỏi cây: con cần gì?','Kết nối trước, dạy dỗ sau.'],
      ['Đất tốt không vội.','Hạt yêu thương gieo hôm nay, mai con gặt.'],
      ['Khi mình nóng, đất nứt.','Khi mình lặng, đất liền lại.'],
      ['Con không phải cái cây mình tưởng tượng.','Con là cái cây con vốn là — mình chỉ vun đất.'],
      ['Chăm cây bắt đầu từ chăm đất.','Hôm nay, đất của mình thế nào rồi?'],
      ['Đất bao dung thì cây dám sai, dám thử.','Cho con một mảnh đất an toàn để lớn.'],
      ['Cây mạnh không nhờ bị uốn, mà nhờ rễ sâu.','Rễ sâu lớn từ tình thương mỗi ngày.'],
      ['Mỗi sáng, làm đất ấm lên một chút.','Cây sẽ cảm được, dù chưa nói thành lời.'],
      ['Đừng so cây nhà mình với cây nhà bên.','Mỗi mảnh đất một mùa, mỗi cây một dáng.'],
      ['Bình tĩnh – Kết nối – Đồng hành.','Ba mùa đất nuôi cây lớn.'],
      ['Cha mẹ là đất, con là cây.','Đất đổi thì cây đổi — và đất luôn đổi được.'],
      ['Hôm nay con khó, không phải con chống lại mình.','Con đang cần đất ôm lấy gốc.'],
      ['Vun một hạt yêu thương mỗi ngày.','Khu vườn không xanh trong một đêm, nhưng chắc chắn sẽ xanh.'],
      ['Nhìn cây sửa đất,','nhìn con sửa mình.'],
      ['Đất nào cây nấy.','Mình gieo gì hôm nay, con thành nấy mai sau.'],
      ['Cây nghiêng về phía được tưới.','Con hướng về nơi có yêu thương.'],
      ['Đừng trách cây chậm ra hoa.','Hỏi đất đã đủ nắng đủ nước chưa.'],
      ['Mỗi cơn giận là một trận hạn.','Mỗi lần ôm con là một cơn mưa lành.'],
      ['Đất im lặng nuôi cây.','Có khi thương con là bớt nói, ngồi gần.'],
      ['Cây cần khoảng trời riêng để vươn.','Đất giữ gốc, không giữ ngọn.'],
      ['Gió bão rồi sẽ qua.','Đất vẫn ở đó, cây lại xanh.'],
      ['Không mùa nào đất nghỉ thương cây.','Con khó tới đâu, mình vẫn là đất.'],
      ['Sửa mình là cách cày xới đất.','Đất tơi thì rễ con thở được.'],
      ['Cây lớn từ những ngày không thấy gì đổi.','Cứ tưới đều, rễ đang đi sâu.'],
      ['Một mầm xanh hôm nay,','bắt đầu từ một việc tử tế của mình hôm qua.'],
      ['Đất không hoàn hảo, cây vẫn lớn được.','Mình chỉ cần đủ ấm, không cần đủ giỏi.'],
      ['Yêu con là nghề làm vườn cả đời.','Không vội mùa nào, chỉ chăm từng ngày.'],
      ['Cây ngả theo hướng nắng quen.','Hôm nay mình là nắng dịu cho con.']
    ];
    var ngay = Math.floor(Date.now()/86400000);
    var c = CAU[((ngay % CAU.length) + CAU.length) % CAU.length];
    sub.innerHTML = c[0] + '<br>' + c[1];
  })();
</script>
<div class="grain"></div>
<div class="app">
  <div class="stage">

    <!-- ĐĂNG NHẬP -->
    <section class="screen active" id="s-login">
      <div class="login-top">
        <div class="logo-apple"><img src="logo-datvacay.png?v=1" alt="Đất Và Cây"></div>
        <h1>Đất Và Cây</h1>
        <p>Cha mẹ là đất, con là cây.</p>
      </div>
      <div class="login-bottom">
        <div id="authError" style="display:none;color:#9a3b2e;background:#F6EDE6;border-radius:14px;padding:10px 14px;font-size:14.5px;text-align:center;margin-bottom:12px"></div>
        <div class="field reg-only" style="display:none"><svg viewBox="0 0 24 24" fill="none" stroke-width="1.7"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg><input id="lg-name" type="text" placeholder="Tên của bạn" autocomplete="name"></div>
        <div class="field"><svg viewBox="0 0 24 24" fill="none" stroke-width="1.7"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg><input id="lg-email" type="email" placeholder="Email của bạn" autocomplete="email"></div>
        <div class="field reg-only" style="display:none"><svg viewBox="0 0 24 24" fill="none" stroke-width="1.7"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L14 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg><input id="lg-phone" type="tel" placeholder="Số điện thoại" autocomplete="tel"></div>
        <div class="field"><svg viewBox="0 0 24 24" fill="none" stroke-width="1.7"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg><input id="lg-pass" type="password" placeholder="Mật khẩu" autocomplete="current-password"></div>
        <div class="field reg-only" style="display:none"><svg viewBox="0 0 24 24" fill="none" stroke-width="1.7"><path d="M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6"/><path d="M2 7h20v5H2z"/><path d="M12 22V7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></svg><input id="lg-ref" type="text" placeholder="Mã giới thiệu (nếu có)" autocomplete="off" autocapitalize="characters" spellcheck="false"></div>
        <button class="big-btn" id="authBtn" onclick="VTHA.authSubmit()">Đăng nhập</button>
        <p style="text-align:center;margin-top:12px"><a onclick="VTHA.forgotOpen()" style="color:var(--nau-go);font-size:14.5px;cursor:pointer">Quên mật khẩu?</a></p>
        <div class="oldcust-note" id="oldUserNote">
          <div class="ocn-t">Bạn là khách cũ của Đất Và Cây (trước đây là Vườn Tâm Hồn) / Táo Vàng?</div>
          <div class="ocn-s">Tài khoản và hạt táo của bạn đã có sẵn ở đây. Bấm nút dưới, nhập đúng email cũ để đặt lại mật khẩu rồi vào tiếp.</div>
          <button class="oldcust-btn" onclick="VTHA.forgotOpen()">Khách cũ: lấy lại mật khẩu</button>
        </div>
        <p class="terms" style="margin-top:6px"><span id="authSwitchText">Chưa có tài khoản?</span> <a id="authSwitch" style="color:var(--vang);font-weight:700;cursor:pointer;text-decoration:none" onclick="VTHA.authToggle()">Đăng ký ngay</a></p>
      </div>

      <!-- Ba dòng uy tín: người lạ vừa mở đã thấy đây là chỗ tử tế -->
      <div class="dn-uytin">
        <div><b id="dnSoNguoi">13.500</b><span>Cha mẹ</span></div>
        <div><b>52</b><span>Hạt giống</span></div>
        <div><b>Kỷ lục<br>thế giới</b><span>WorldKings</span></div>
      </div>
      <p class="bizinfo" style="margin-top:14px">VFC Family Coaching · <a href="thong-tin.html">Thông tin doanh nghiệp</a></p>
    </section>

    <!-- HÔM NAY -->
    <section class="screen" id="s-today">
      <!-- KHỐI TỐI: neo thị giác đầu màn (skin2.css) -->
      <div class="hero-toi">
        <div class="masthead"><span class="mh-brand">Đất Và Cây</span><span class="mh-day" id="mhDay"></span></div>
        <span id="mhMeta" style="display:none"></span>
        <span id="todayDate" style="display:none"></span>

        <!-- HEADER: lời chào + thì thầm cho mình -->
        <div class="today-head">
          <span id="greetHi" style="display:none"></span>
          <span id="greetName" style="display:none"></span>
          <!-- Câu thì thầm nay ĐỨNG MỘT MÌNH làm tiêu đề. Bỏ khẩu hiệu
               "Một ngày mới để gieo" vì trùng ý — trang chủ chỉ nên nói một điều. -->
          <h1 class="tc-title greet-whisper" id="greetWhisper"></h1>
        </div>
      </div>

      <!-- THẺ HÔM NAY.
           VIỆC NHỎ đứng ĐẦU và là chữ to nhất: hồ sơ chân dung Luồng D ghi rõ
           cha mẹ ở lại vì "mở app là biết ngay tối nay làm gì với con".
           Tên hạt giống lùi xuống làm dòng phụ — nó là cái nhãn, không phải việc. -->
      <div class="today-card">
        <div class="tcd-task"><span class="tcd-pill"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#B3854A" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>Việc nhỏ hôm nay · 5-10 phút</span><p id="tdTask"></p></div>

        <div class="hat-phu">
          <div class="tcd-applewrap"><div class="tc-apple float-soft" id="tdIcon"></div></div>
          <div><h2 class="tc-name" id="tdVn">—</h2><span class="tc-en" id="tdEn"></span><div class="tc-rule"></div></div></div>
        <div class="hat-phu-duoi"><span id="tdTenDuoi"></span><button class="td-nhan-tuoi" id="tdNhanTuoi" onclick="VTHTuoi.moHoi()" title="Đổi tuổi con"></button></div>
        <div style="display:none">
        </div>
        <span id="tdQuote" style="display:none"></span>
        <span id="tdQuoteEn" style="display:none"></span>

        <button class="why-mo" id="whyMo" onclick="VTHThe.moViSao(this)">Vì sao việc nhỏ này? ›</button>
        <div class="why" id="tdWhy" style="display:none"></div>
        <span class="tc-songs" id="tdSongs" style="display:none"></span>
        <button class="big-btn" id="doneBtn" onclick="VTHA.markDone()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>Đã làm cùng con</button>
        <button class="ghost-btn tc-open" onclick="VTHA.openToday()">Xem cách làm theo tuổi con →</button>
        <button class="tc-hint" onclick="VTH2.openSOS()">○ Hoặc dừng lại, hít thở một nhịp</button>
      </div>

      <!-- CHO PHÉP DỪNG. Hồ sơ Về Nhà: thứ VFC bán mà không ai bán là
           "chị được phép dừng lại". Cả thị trường bảo cố lên. -->
      <p class="duoc-dung">Hôm nay mệt quá thì để mai cũng được.<br>Vườn vẫn ở đây, không đi đâu cả.</p>

      <!-- HAI CỬA RẼ: một cho con (Luồng A/D), một cho chính mình (Luồng B) -->
      <div class="hai-cua">
        <button class="cua" onclick="VTHA.go('situations')">
          <span class="cua-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#5A7044" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span>
          <span class="cua-t">Con đang xa mình?</span>
          <span class="cua-s">Tình huống giống nhà mình</span>
        </button>
        <button class="cua minh" onclick="VTHMood.open()">
          <span class="cua-ic"><svg width="20" height="20" viewBox="0 0 24 24" fill="#EBA075"><path d="M12 20s-6.5-4.2-6.5-9.2A3.7 3.7 0 0 1 12 8.2 3.7 3.7 0 0 1 18.5 10.8C18.5 15.8 12 20 12 20z"/></svg></span>
          <span class="cua-t">Hôm nay mình mệt</span>
          <span class="cua-s">Ngồi thở · nghe một đoạn</span>
        </button>
      </div>

      
      <!-- CỬA VÀO NHÀ CHUNG (trang /nha) — Tín Điều, ngày thứ N, Ngày mùng 6. -->
      <a class="cua-nha" href="/nha/" style="display:flex;align-items:center;gap:13px;margin-top:18px;padding:16px 18px;border:1px solid #e2d8c4;border-radius:18px;background:#FAF7F0;text-decoration:none;box-shadow:0 1px 6px rgba(76,59,46,.05)">
        <span style="flex:0 0 42px;height:42px;border-radius:50%;background:#EFEADD;display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#525D41" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10.5 12 3l9 7.5"/><path d="M5.5 9.5V20h13V9.5"/><path d="M10 20v-5h4v5"/></svg></span>
        <span style="flex:1;min-width:0">
          <span style="display:block;font-family:var(--serif,Georgia,serif);font-size:18px;font-weight:600;color:#525D41">Nhà</span>
          <span style="display:block;font-size:13.5px;line-height:1.5;color:#7a6a53;margin-top:2px">Tín Điều · Ngày mùng 6 · chỗ của người đang trở về</span>
        </span>
        <span style="color:#C49B5A;font-size:20px;line-height:1">›</span>
      </a>

      <!-- DẢI NHẮC: hành trình đang đi dở (JS điền, ẩn nếu không có) -->
      <div id="todayJourneyStrip"></div>
      <div class="grat-card">
        <!-- Hồ sơ Về Nhà dặn KHÔNG dùng "biết ơn" kiểu khẩu hiệu lặp (đang bị một
             học viện cùng ngách làm nhiễm nghĩa) — chỉ nói bằng tình huống đời cụ thể. -->
        <div class="gh2">Chuyện nhỏ nào hôm nay làm mình thấy ấm?</div>
        <div class="grat-row"><input id="gratIn" type="text" placeholder="Một điều nhỏ cũng được…"><button onclick="VTH2.addGrat()">Thêm</button></div>
        <ul class="grat-list" id="gratList"></ul>
      </div>
      <!-- KHU VƯỜN SỐNG ĐỘNG (cây 6 chặng lớn theo hành trình) -->
      <div class="vgarden" id="vgarden" role="button" tabindex="0" onclick="VTHGarden.openBig()">
        <div class="vg-sky"><span class="vg-sun"></span><div class="vg-tree" id="vgTree"></div><div class="vg-whisper" id="vgWhisper"></div><div class="vg-tip" id="vgTip"></div></div>
        <div class="vg-foot">
          <div><span class="vg-name" id="vgName">Cây của bạn</span><span class="vg-hint" id="vgHint"></span></div>
          <div class="vg-count" id="vgCount"></div>
          <div class="vg-dots" id="vgDots"></div>
          <div class="vg-remind" id="vgRemind"></div>
          <div class="vg-tapmore">Chạm để xem cây lớn →</div>
        </div>
      </div>
      <button class="vg-song-btn" onclick="VTHCards.playSong(event,this)" data-src="audio/Bai_hat_hat_giong/00-DatVaCay-ChuDe.mp3" aria-label='Nghe khúc ca Đất Và Cây'>
        <span class="csb-ico">&#9658;</span><span class="vsb-tx">Nghe khúc ca <i>“Đất Và Cây”</i></span>
      </button>
      <button class="vg-song-btn" onclick="VTHCards.playSong(event,this)" data-src="audio/Bai_hat_hat_giong/00-DatVaCay-ChuDe-v2.mp3" aria-label='Nghe khúc Cánh Cửa – giọng cha'>
        <span class="csb-ico">&#9658;</span><span class="vsb-tx">Khúc <i>“Cánh Cửa”</i> · giọng cha</span>
      </button>
      <button class="vg-song-btn" onclick="VTHCards.playSong(event,this)" data-src="audio/Bai_hat_hat_giong/00-DatVaCay-ChuDe-v2-GiongMe.mp3" aria-label='Nghe khúc Cánh Cửa – giọng mẹ'>
        <span class="csb-ico">&#9658;</span><span class="vsb-tx">Khúc <i>“Cánh Cửa”</i> · giọng mẹ</span>
      </button>
      <span id="tdProg" style="display:none"></span><span id="todayBar" style="display:none"></span>

      <!-- ĐI SÂU HƠN (hành trình cần cam kết, người dùng chủ động cuộn xuống) -->
      <div class="divider"><span>Đi sâu hơn</span><div class="line"></div></div>
      <button class="hb-entry" onclick="VTHHabit.open()">
        <span class="he-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#A07847" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10z"/></svg></span>
        <span class="he-tx"><span class="he-t">Hành trình của con</span><span class="he-s">Cùng con xây thói quen tốt mỗi ngày</span></span>
        <span class="he-ar">→</span>
      </button>
      <button class="jn-entry" onclick="VTHJourney.open()" style="margin-top:10px">
        <span class="je-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#E5C383" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 21c0-8 5-13 14-14 0 9-5 14-14 14z"/><path d="M5 21c3-5 6-8 10-10"/></svg></span>
        <span class="je-tx"><span class="je-t">Hành trình của mình</span><span class="je-s">Các chặng chữa lành cho cha mẹ</span></span>
        <span class="je-ar">→</span>
      </button>

      <!-- KHÁM PHÁ THÊM (phụ) -->
      <div class="divider"><span>Khám phá thêm</span><div class="line"></div></div>
      <button class="ic-entry" onclick="IMAP.open()">
        <span class="ic-entry-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#A07847" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg></span>
        <span class="ic-entry-tx"><span class="ic-entry-t">Năng lượng hôm nay của bạn</span><span class="ic-entry-s">I-MAP · hiểu mình &amp; hiểu con mỗi ngày ✨</span></span>
        <span class="ar"></span>
      </button>
      <button class="ic-entry" style="margin-top:10px" onclick="VTHCards.openMinh()">
        <span class="ic-entry-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#A07847" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10z"/></svg></span>
        <span class="ic-entry-tx"><span class="ic-entry-t">Rút thẻ Hạt Giống Nội Tâm</span><span class="ic-entry-s">Mỗi ngày một thẻ để chiêm nghiệm ✨</span></span>
        <span class="ar"></span>
      </button>
      <button class="ghost-btn" style="margin-top:14px" onclick="VTHA.go('mirror')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18"/></svg>Soi gương · một phút cho riêng mẹ</button>
      <button class="ghost-btn" onclick="VTHA.go('situations')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>Con đang làm mình khó xử? · Tủ tình huống</button>
      <button class="ghost-btn" onclick="VTH2.openCompanion()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M8 9h8M8 13h5"/></svg>Trò chuyện với Người Đồng Hành</button>
    </section>

    <!-- HÔM NAY LÒNG MÌNH THẾ NÀO? (check-in cảm xúc, JS điền) -->
    <section class="screen" id="s-mood"><div id="moodBody"></div></section>

    <!-- VƯỜN 52 -->
    <section class="screen" id="s-garden">
      <div class="deck-switch">
        <button class="ds-opt on" data-d="con" onclick="VTHCards.setDeck('con')">🌱 Cho con</button>
        <button class="ds-opt" data-d="minh" onclick="VTHCards.setDeck('minh')">🌿 Cho mình</button>
        <button class="ds-opt" data-d="tinhthan" onclick="VTHCards.setDeck('tinhthan')">💞 Cho tình thân</button>
      </div>

      <!-- BỘ NUÔI CON (52 thẻ theo độ tuổi) -->
      <div id="deckCon">
        <div class="mag-head" style="margin-top:14px"><div class="eyebrow">Bộ sưu tập · Gieo cho con</div><div class="pagetitle">50 hạt giống Vườn Tâm Hồn</div></div>
        <div class="garden-hero"><div class="gh-title">Mỗi quả táo là một phẩm chất</div><div class="gh-sub">50 phẩm chất cốt lõi, cùng 2 hạt giống báu vật. Chạm để xem hướng dẫn theo tuổi con.</div></div>
        <button class="jn-entry" onclick="VTHHabit.open()">
          <span class="je-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#E5C383" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10z"/></svg></span>
          <span class="je-tx"><span class="je-t">Hành trình của con</span><span class="je-s">Cùng con xây thói quen tốt mỗi ngày</span></span>
          <span class="je-ar">→</span>
        </button>
        <button class="vg-song-btn" onclick="VTHCards.playSong(event,this)" data-src="audio/Bai_hat_hat_giong/00-VuonTamHon-BaiHat.mp3" aria-label='Nghe bài hát Vườn Tâm Hồn'>
          <span class="csb-ico">&#9658;</span><span class="vsb-tx">Nghe bài hát <i>“Vườn Tâm Hồn”</i></span>
        </button>
        <button class="oracle-card" onclick="VTHA.drawOracle()">
          <div class="oracle-orb"><svg viewBox="0 0 64 64" fill="none" aria-hidden="true"><circle cx="32" cy="32" r="27" stroke="rgba(242,214,143,.55)" stroke-width="1"/><circle cx="32" cy="32" r="21" stroke="rgba(242,214,143,.28)" stroke-width="1"/><path d="M32 44V28" stroke="#F2D68F" stroke-width="2.2" stroke-linecap="round"/><path d="M32 30c0-6 4.6-9.4 11-9.4 0 6.4-4 10-11 9.4z" fill="#F2D68F" opacity=".92"/><path d="M32 33c0-5.4-4.2-8.6-10-8.6 0 5.8 3.6 9.2 10 8.6z" fill="#E0B048" opacity=".85"/><circle cx="16" cy="18" r="1.5" fill="rgba(242,214,143,.75)"/><circle cx="48" cy="46" r="1.2" fill="rgba(242,214,143,.6)"/><circle cx="50" cy="16" r="1" fill="rgba(242,214,143,.5)"/></svg></div>
          <div style="text-align:left"><div class="oc-t">Thông điệp vũ trụ hôm nay</div><div class="oc-s">Chạm để vũ trụ chọn một hạt giống gieo cho con</div></div>
        </button>
        <div class="group-tabs" id="groupTabs"></div>
        <div class="seed-grid" id="seedGrid"></div>
        <p class="hint">Chạm một quả táo bất kỳ để mở chi tiết.</p>
      </div>

      <!-- BỘ NỘI TÂM (cho mình) -->
      <div id="deckMinh" style="display:none">
        <div class="ic-head" style="margin-top:14px">
          <div class="eyebrow">Bộ thẻ · Cho mình</div>
          <div class="pagetitle">Hạt Giống Nội Tâm</div>
          <p class="ic-sub">Mỗi ngày rút một thẻ — để chiêm nghiệm, định hướng và nuôi dưỡng những hạt giống tốt trong mình.</p>
        </div>
        <div class="garden-hero"><div class="gh-title">Mỗi thẻ là một điều để ngẫm</div><div class="gh-sub">Rút một thẻ mỗi ngày, đọc chậm, rồi mang theo cả ngày hôm đó.</div></div>
        <button class="jn-entry" onclick="VTHJourney.open()">
          <span class="je-ic"><svg viewBox="0 0 24 24" fill="none" stroke="#E5C383" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 21c0-8 5-13 14-14 0 9-5 14-14 14z"/><path d="M5 21c3-5 6-8 10-10"/></svg></span>
          <span class="je-tx"><span class="je-t">Hành trình của mình</span><span class="je-s">Các chặng chữa lành, đi từng ngày</span></span>
          <span class="je-ar">→</span>
        </button>
        <button class="vg-song-btn" onclick="VTHCards.playSong(event,this)" data-src="audio/Bai_hat_hat_giong/00-DatVaCay-ChuDe.mp3" aria-label='Nghe khúc ca Đất Và Cây'>
          <span class="csb-ico">&#9658;</span><span class="vsb-tx">Nghe khúc ca <i>“Đất Và Cây”</i></span>
        </button>
        <div class="ic-tabs">
          <button class="ic-tab on" data-t="today" onclick="VTHCards.tab('today')">Hôm nay</button>
          <button class="ic-tab" data-t="all" onclick="VTHCards.tab('all')">Tất cả</button>
          <button class="ic-tab" data-t="favs" onclick="VTHCards.tab('favs')">Yêu thích</button>
          <button class="ic-tab" data-t="history" onclick="VTHCards.tab('history')">Lịch sử</button>
        </div>
        <div id="icToday"></div>
        <div id="icList" style="display:none"></div>
      </div>

      <!-- BỘ TÌNH THÂN (vợ chồng — hành trình 30 ngày) -->
      <div id="deckTinhThan" style="display:none"></div>
    </section>

    <!-- NĂNG LƯỢNG MỖI NGÀY (I-MAP LITE) -->
    <section class="screen" id="s-imap">
      <button class="backbtn" onclick="VTHA.go('today')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>Về Hôm nay</button>
      <div class="ic-head" style="margin-top:6px">
        <div class="eyebrow">I-MAP · Bản đồ nội tâm</div>
        <div class="pagetitle">Năng lượng mỗi ngày</div>
        <p class="ic-sub">Hiểu năng lượng của mình và của con mỗi ngày, để đồng hành đúng nhịp.</p>
      </div>
      <div id="imapBox"></div>
    </section>

    <!-- LANDING BÁN I-MAP (AIDA · taste-skill) -->
    <section class="screen sell" id="s-imapsell">
      <button class="backbtn" onclick="VTHA.go('imap')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>Quay lại</button>

      <!-- ATTENTION: editorial manifesto -->
      <header class="sell-hero">
        <span class="sell-mark"><svg viewBox="0 0 24 24" width="74" height="74" aria-hidden="true"><defs><linearGradient id="imapMark" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#F2D49A"/><stop offset="1" stop-color="#C99A52"/></linearGradient></defs><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10z" fill="url(#imapMark)"/><path d="M13.4 5.7c1.2-1.4 3.1-1.7 3.1-1.7s-.2 1.9-1.6 3.1c-.9.8-2.1.8-2.1.8s-.1-1.2.6-2.2z" fill="#8A9C77"/></svg></span>
        <span class="eyebrow">Bản đồ I-MAP</span>
        <h1 class="sell-h1">Con bạn sinh ra đã mang sẵn <em>một bản đồ riêng.</em></h1>
        <p class="sell-lead">Đọc được bản đồ ấy, việc nuôi con bỗng nhẹ đi rất nhiều.</p>
        <a class="sell-btn" href="https://imap.datvacay.com" target="_blank" rel="noopener">Nhận bản đồ cho con</a>
      </header>

      <!-- ẢNH BẢN ĐỒ THẬT (hé lộ một phần) -->
      <figure class="imap-shot"><img src="imap-sample.jpg?v=14" alt="Một phần Bản đồ I-MAP thật" loading="lazy"></figure>
      <p class="imap-shot-cap">Một phần Bản đồ I-MAP thật của một bé. Bản đầy đủ gồm 32 chỉ số, phác đồ tình huống và phân tích tên gọi.</p>

      <!-- XEM TRƯỚC theo ngày sinh con (render bằng JS) -->
      <div id="imapPreview"></div>

      <!-- INTEREST: key / value reveal -->
      <section class="sell-sec">
        <p class="sell-p">Sao con bướng? Sao con nhạy cảm? Sao con mãi không tập trung? Không phải con sai. Chỉ là ta chưa có tấm bản đồ để hiểu con.</p>
        <h2 class="sell-h2">I-MAP đọc nội tâm con từ ngày sinh và tên gọi</h2>
        <ul class="sell-reveal">
          <li><span class="sr-k">32 chỉ số</span><span class="sr-v">bản đồ nội tâm cốt lõi của con</span></li>
          <li><span class="sr-k">Thế mạnh</span><span class="sr-v">thiên bẩm và những hạt giống con cần gieo</span></li>
          <li><span class="sr-k">Phác đồ</span><span class="sr-v">xử lý tình huống thực chiến: bướng, nhút nhát, mê điện thoại, dễ xúc động</span></li>
          <li><span class="sr-k">Tên gọi</span><span class="sr-v">phân tích năng lượng cái tên của con</span></li>
        </ul>
      </section>

      <!-- KHÁC BIỆT -->
      <section class="sell-sec">
        <h2 class="sell-h2">I-MAP khác gì biểu đồ năng lượng thường?</h2>
        <p class="sell-p" style="margin-top:8px">Biểu đồ thường dừng ở việc "đọc tính cách". I-MAP đi tiếp tới việc cha mẹ cần làm mỗi ngày.</p>
        <ul class="sell-diff">
          <li><b>Biến chỉ số thành hạt giống.</b> Mỗi điểm mạnh, điểm yếu được nối thẳng với hạt giống cần gieo và một việc nhỏ cụ thể.</li>
          <li><b>Phác đồ tình huống thực chiến.</b> Con bướng, nhút nhát, mê điện thoại… có kịch bản xử lý theo đúng bản đồ của con, không phải lời khuyên chung chung.</li>
          <li><b>Giải thích bằng não bộ.</b> Cơ chế "đèn giao thông tâm thức" giúp hiểu phản ứng của con một cách khoa học, không mê tín.</li>
          <li><b>Đọc theo tuổi của con.</b> Nội dung thích ứng cho Dưới 6, 6–11 và 12+.</li>
          <li><b>Kèm câu khai vấn.</b> Có sẵn câu hỏi để cha mẹ trò chuyện và gợi mở cho con.</li>
        </ul>
      </section>

      <!-- DESIRE: tinted panel -->
      <section class="sell-desire">
        <h2 class="sell-h2 sell-h2c">Khi hiểu con tận gốc</h2>
        <ul class="sell-benefits">
          <li>Thôi ép con thành "con nhà người ta", nuôi đúng thế mạnh trời cho con</li>
          <li>Bớt xung đột, vì hiểu được vì sao con phản ứng như vậy</li>
          <li>Biết hôm nay nên gieo cho con hạt giống nào</li>
          <li>Có lời nói và cử chỉ cụ thể cho từng tình huống khó</li>
        </ul>
        <p class="sell-quote">"Một đứa trẻ được hiểu đúng là một đứa trẻ được thương đúng cách."</p>
      </section>

      <!-- ACTION -->
      <section class="sell-cta">
        <h2 class="sell-cta-t">Nhận Bản đồ I-MAP riêng cho con</h2>
        <p class="sell-cta-s">Cá nhân hoá theo đúng ngày sinh và tên của con.</p>
        <a class="sell-btn" href="https://imap.datvacay.com" target="_blank" rel="noopener">Nhận bản đồ cho con</a>
      </section>
    </section>

    <!-- CHI TIẾT HẠT GIỐNG -->
    <section class="screen" id="s-seed">
      <button class="backbtn" onclick="VTHA.go('garden')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg>Vườn hạt giống</button>
      <div class="seed-top" style="margin-top:16px"><div class="seed-icon" id="sdIcon"><svg viewBox="0 0 24 24" fill="none" stroke="#A07847" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 11c0 5.5-7 10-7 10z"/></svg></div><div class="seed-name"><h2 id="sdVn">—</h2><div class="en" id="sdEn"></div><div class="sd-desc-en" id="sdDescEn" style="display:none"></div></div><button class="sd-xemthe" onclick="VTHThe.hienLaiHat()" title="Mở lại lá thẻ để chụp"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="3" width="13" height="18" rx="3"/><path d="M3 7v11a3 3 0 0 0 3 3"/></svg>Xem thẻ</button></div>
      <div class="seed-audio" id="seedAudio"></div>
      <div class="age-tabs">
        <div class="atab on" onclick="VTHA.setAge(this,'under6')">Dưới 6</div>
        <div class="atab" onclick="VTHA.setAge(this,'age6_11')">6–11</div>
        <div class="atab" onclick="VTHA.setAge(this,'age12')">12–17</div>
        <div class="atab" onclick="VTHA.setAge(this,'age18_25')">18+</div>
      </div>
      <div id="ageBody"></div>
    </section>

    <!-- SOI GƯƠNG -->
    <section class="screen" id="s-mirror">
      <div style="margin-top:6px"><div class="eyebrow">Connect · Soi gương</div><div class="pagetitle">Một phút cho riêng mẹ</div></div>
      <div class="mirror-wrap"><div class="mirror-frame"><div class="lbl">Tự vấn hôm nay</div><div class="mq" id="mirrorQ"></div></div></div>
      <div class="mood-label">Lúc này, lòng mẹ đang thế nào?</div>
      <div class="moods" id="moods"></div>
      <div class="journal"><div class="priv"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7C6A5A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg>Nhật ký riêng tư. Chỉ mình mẹ đọc, lưu trong tài khoản của mẹ nên đổi máy vẫn còn</div><textarea id="mirrorText" rows="3" placeholder="Viết ra điều đang ở trong lòng…"></textarea></div>
      <button class="big-btn" onclick="VTHA.saveMirror()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><path d="M17 21v-8H7v8M7 3v5h8"/></svg>Lưu lại</button>
      <div id="mirrorList" class="mirror-list"></div>
    </section>
      <style>
        .combo-tier{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
          border:1.5px solid rgba(160,120,71,.35);background:var(--trang-nga);border-radius:14px;padding:12px 15px;cursor:pointer;
          transition:transform .12s ease,box-shadow .18s ease,border-color .18s ease;-webkit-tap-highlight-color:transparent}
        .combo-tier:hover{border-color:var(--vang);box-shadow:0 8px 20px -12px rgba(160,120,71,.55)}
        .combo-tier:active{transform:scale(.985)}
        .combo-tier .ct-dur{font-family:var(--serif);font-size:16.5px;color:var(--nau-dat);font-weight:600;line-height:1.2}
        .combo-tier .ct-sub{display:block;font-size:12px;color:var(--nau-dat-nhat);margin-top:2px}
        .combo-tier .ct-price{font-family:var(--serif);font-size:19px;color:var(--vang);font-weight:700;white-space:nowrap}
        .combo-tier .ct-price small{font-size:12.5px;font-weight:500;color:var(--nau-dat-nhat)}
        .combo-tier.is-best{border-color:var(--vang);border-width:2px;background:linear-gradient(135deg,#FCF5E4,#F7EBCF)}
        .combo-tier .ct-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#fff;background:var(--vang);
          border-radius:999px;padding:2px 8px;margin-left:7px;vertical-align:middle}
      </style>
      <style>
        /* Thẻ MUA BẰNG TIỀN — cố ý nặng hơn, tối hơn thẻ hạt bên dưới để mắt dừng ở đây trước. */
        .buy-card{margin-top:14px;position:relative;overflow:hidden;border-radius:20px;
          background:linear-gradient(158deg,#5F7448,#425134);color:#FFFDF8;padding:22px 20px 20px;
          box-shadow:0 16px 34px -18px rgba(66,81,52,.95)}
        .buy-card::after{content:"";position:absolute;top:-58%;right:-18%;width:280px;height:280px;border-radius:50%;
          background:radial-gradient(circle,rgba(224,176,72,.26),transparent 66%);pointer-events:none}
        .buy-card .bc-eye{position:relative;z-index:2;font-size:10.5px;font-weight:600;letter-spacing:.2em;
          text-transform:uppercase;opacity:.72}
        .buy-card .bc-name{position:relative;z-index:2;font-family:var(--serif);font-size:26px;font-weight:600;
          line-height:1.15;margin-top:7px}
      <style>
        .install-hero{display:flex;align-items:center;gap:13px;width:100%;text-align:left;margin:14px 0 4px;
          border:none;border-radius:18px;padding:15px 16px;cursor:pointer;color:#fff;
          background:linear-gradient(135deg,#6E8B57,#525D41);box-shadow:0 10px 24px -10px rgba(82,93,65,.7);
          transition:transform .12s ease,box-shadow .18s ease;-webkit-tap-highlight-color:transparent}
        .install-hero:active{transform:scale(.99)}
        .install-hero .ih-ic{flex:0 0 auto;font-size:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
        .install-hero .ih-tx{flex:1;min-width:0}
        .install-hero .ih-t{display:block;font-family:var(--serif);font-size:17px;font-weight:700;line-height:1.2}
        .install-hero .ih-s{display:block;font-size:12.5px;opacity:.92;margin-top:3px;line-height:1.35}
        .install-hero .ih-ar{flex:0 0 auto;font-size:20px;opacity:.85}
      </style>
      <!-- CÀI APP — nổi bật, đứng riêng (anh Phúc yêu cầu) -->
      <button class="install-hero" onclick="VTHInstall.open()">
        <span class="ih-ic">📲</span>
    <style>
      .his-fbtn{flex:1;border:1.5px solid var(--vien);background:var(--trang-nga);color:var(--nau-dat-nhat);border-radius:999px;padding:8px 0;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .15s ease}
      .his-fbtn.is-on{background:var(--xanh-reu);color:#fff;border-color:var(--xanh-reu)}
      .his-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 4px;border-bottom:1px solid var(--vien)}
      .his-row .hr-when{font-size:11.5px;color:var(--nau-dat-nhat)}
      .his-row .hr-what{font-size:14px;color:var(--nau-dat);font-weight:600;margin-top:1px}
      .his-row .hr-amt{font-family:var(--serif);font-size:17px;font-weight:700;white-space:nowrap}
      .his-row .hr-amt.plus{color:#3c7a4e}
      .his-row .hr-amt.minus{color:#9a3b2e}
    </style>


/* Legacy screen positioning rule for modern Aura app */
#legacy-overlays-container .screen {
  display: none !important;
}
#legacy-overlays-container .screen.active {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 15000 !important;
  background: #FAF7F0 !important;
  overflow-y: auto !important;
  padding: 20px 16px !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  box-shadow: 0 0 40px rgba(0,0,0,0.3) !important;
}
