/* betaller.app styles, shared by the home page and the age pages
   (chieu-cao-tre-*-tuoi.html, generated by mobile/scripts/build-age-pages.mjs). */
:root{
  --bamboo-50:#EAF3DE; --bamboo-100:#C0DD97; --bamboo-200:#97C459;
  --bamboo-400:#639922; --bamboo-600:#3B6D11; --bamboo-800:#27500A; --bamboo-900:#173404;
  --cream-bg:#FBF7EF; --cream-card:#FAEEDA; --white:#FFFFFF;
  --text-body:#2C2C2A; --warning:#BA7517;
  --radius-control:16px; --radius-card:14px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
#download{scroll-margin-top:96px;}
body{
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--cream-bg); color:var(--text-body);
  font-size:16px; line-height:1.6;
}
h1,h2,h3{color:var(--bamboo-900); line-height:1.35; font-weight:600;}
.container{max-width:1080px; margin:0 auto; padding:0 20px;}
/* Nav */
nav{position:sticky; top:0; background:rgba(251,247,239,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--bamboo-50); z-index:50;}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 20px; max-width:1080px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand span{font-size:20px; color:var(--bamboo-800);}
.brand span b{font-weight:600;}
.nav-links{display:flex; gap:24px; align-items:center;}
.nav-links a{text-decoration:none; color:var(--bamboo-600); font-size:15px;}
.nav-links a:hover{color:var(--bamboo-800);}
.lang-toggle{border:1px solid var(--bamboo-100); border-radius:999px; background:var(--white); display:flex; overflow:hidden; cursor:pointer;}
.lang-toggle button{border:0; background:transparent; padding:6px 12px; font-family:inherit; font-size:13px; font-weight:500; color:var(--bamboo-600); cursor:pointer;}
.lang-toggle button.active{background:var(--bamboo-400); color:var(--bamboo-50);}
/* Hero */
/* Side padding kept: the shorthand used to zero the container's 20px, so on
   a phone the hero text ran to the screen edge. */
.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; padding:64px 20px 48px;}
.hero h1{font-size:clamp(32px,5vw,48px);}
.hero h1 em{font-style:normal; color:var(--bamboo-400);}
.hero p.sub{margin:16px 0 24px; font-size:18px; color:var(--bamboo-600); max-width:46ch;}
.badges{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px;}
.badge{display:flex; align-items:center; gap:8px; border:1px solid var(--bamboo-100); background:var(--white); border-radius:12px; padding:10px 16px; font-size:14px; color:var(--bamboo-800);}
.badge small{display:block; font-size:11px; color:var(--bamboo-600);}
.btn{border:0; border-radius:var(--radius-control); background:var(--bamboo-400); color:#EAF3DE; font-family:inherit; font-size:15px; font-weight:500; padding:13px 22px; cursor:pointer; white-space:nowrap;}
.btn:hover{background:var(--bamboo-600);}
/* Phone frame with real screenshot */
.phone{width:280px; margin:0 auto; border:10px solid var(--bamboo-900); border-radius:36px; overflow:hidden; box-shadow:0 24px 48px rgba(23,52,4,.18); background:var(--cream-bg);}
.phone img{display:block; width:100%; height:auto;}
/* Screenshot gallery */
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; max-width:920px; margin:0 auto;}
.shot{text-align:center;}
.shot .frame{border:6px solid var(--bamboo-900); border-radius:24px; overflow:hidden; box-shadow:0 14px 28px rgba(23,52,4,.14); background:var(--cream-bg);}
.shot img{display:block; width:100%; height:auto;}
.shot p{margin-top:10px; font-size:14px; color:var(--bamboo-600); font-weight:500;}
.badge-live{border-color:var(--bamboo-400); background:var(--bamboo-400); color:var(--bamboo-50); text-decoration:none;}
.badge-live small{color:var(--bamboo-50);}
.badge-live:hover{background:var(--bamboo-600);}
a.badge{text-decoration:none;}
/* Sections */
section{padding:56px 0;}
.section-head{text-align:center; max-width:60ch; margin:0 auto 40px;}
.section-head h2{font-size:clamp(26px,3.5vw,34px); margin-bottom:10px;}
.section-head p{color:var(--bamboo-600);}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.card{background:var(--white); border:1px solid var(--bamboo-50); border-radius:var(--radius-card); padding:24px;}
.card .icon{width:44px; height:44px; border-radius:12px; background:var(--bamboo-50); display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:22px; color:var(--bamboo-400);}
.card h3{font-size:17px; margin-bottom:6px;}
.card p{font-size:14px; color:var(--bamboo-600);}
/* Steps */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; counter-reset:step;}
.step{background:var(--cream-card); border-radius:var(--radius-card); padding:24px; position:relative;}
.step::before{counter-increment:step; content:counter(step); position:absolute; top:-14px; left:20px; width:32px; height:32px; border-radius:50%; background:var(--bamboo-400); color:var(--bamboo-50); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px;}
.step h3{font-size:16px; margin:8px 0 6px;}
.step p{font-size:14px; color:var(--bamboo-600);}
/* Pricing */
.pricing{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; align-items:stretch;}
.price-card{background:var(--white); border:1px solid var(--bamboo-100); border-radius:var(--radius-card); padding:28px 24px; display:flex; flex-direction:column;}
.price-card.featured{border:2px solid var(--bamboo-400); position:relative;}
.pill{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--bamboo-400); color:var(--bamboo-50); font-size:12px; font-weight:500; border-radius:999px; padding:4px 14px; white-space:nowrap;}
.price-card h3{font-size:16px;}
.price{font-size:32px; font-weight:600; color:var(--bamboo-800); margin:10px 0 2px;}
.price small{font-size:14px; font-weight:400; color:var(--bamboo-600);}
.price-card ul{list-style:none; margin:16px 0 20px; flex:1;}
.price-card li{font-size:14px; color:var(--text-body); padding:5px 0 5px 24px; position:relative;}
.price-card li::before{content:"✓"; position:absolute; left:0; color:var(--bamboo-400); font-weight:600;}
.store-note{text-align:center; font-size:13px; color:var(--bamboo-600); margin-top:18px;}
/* FAQ */
details{background:var(--white); border:1px solid var(--bamboo-50); border-radius:var(--radius-card); padding:18px 22px; margin-bottom:10px;}
summary{cursor:pointer; font-weight:500; color:var(--bamboo-900); font-size:16px;}
details p{margin-top:10px; font-size:15px; color:var(--bamboo-600);}
/* Disclaimer + footer */
.disclaimer{background:var(--cream-card); border-radius:var(--radius-card); padding:20px 24px; font-size:13px; color:var(--warning); max-width:760px; margin:0 auto;}
footer{border-top:1px solid var(--bamboo-50); padding:32px 0 40px; margin-top:40px;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
footer a{color:var(--bamboo-600); text-decoration:none; font-size:14px; margin-right:18px;}
footer a:hover{color:var(--bamboo-800);}
footer p{font-size:13px; color:var(--bamboo-600);}
@media (max-width:820px){
  .hero{grid-template-columns:1fr; text-align:center;}
  .hero p.sub{margin-left:auto; margin-right:auto;}
  .badges{justify-content:center; margin-left:auto; margin-right:auto;}
  .nav-links a{display:none;}
}
/* Hand-over hero (parent arriving from the child's link) */
.hero.handover > div > h1:not(.ho-h1), .hero.handover p.sub{display:none;}
.ho{text-align:left;}
.ho-eyebrow{margin:0 0 10px; font-size:14px; font-weight:500; color:var(--bamboo-400); text-transform:uppercase; letter-spacing:.04em;}
.ho-h1{font-size:clamp(28px,4.2vw,42px); margin:0 0 18px;}
.ho-h1 em{font-style:normal; color:var(--bamboo-400); white-space:nowrap;}
.ho-bar{position:relative; height:12px; border-radius:999px; background:var(--bamboo-50); margin:4px 0 46px; max-width:440px;}
.ho-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--bamboo-100),var(--bamboo-400)); width:0; transition:width .9s ease-out;}
.ho-marker{position:absolute; top:-6px; width:24px; height:24px; border-radius:50%; background:var(--white); border:3px solid var(--bamboo-600); transform:translateX(-50%); left:0; transition:left .9s ease-out;}
.ho-marker span{position:absolute; top:26px; left:50%; transform:translateX(-50%); font-size:13px; font-weight:600; color:var(--bamboo-800); white-space:nowrap;}
.ho-pct{margin:0 0 20px; font-size:17px; color:var(--bamboo-800); max-width:48ch;}
.ho-lead{margin:0 0 10px; font-size:16px; font-weight:600; color:var(--bamboo-900);}
.ho-locked{list-style:none; padding:0; margin:0 0 20px; display:grid; gap:8px; max-width:48ch;}
.ho-locked li{position:relative; padding-left:30px; font-size:15px; color:var(--bamboo-800);}
.ho-locked li::before{content:""; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:6px; background:var(--bamboo-50) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B6D11' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") center/13px no-repeat;}
.ho-window{margin:0 0 16px; padding:12px 16px; border-left:3px solid var(--bamboo-200); background:var(--cream-card); border-radius:0 12px 12px 0; font-size:15px; color:var(--bamboo-800); max-width:48ch;}
.ho-price{margin:0 0 22px; font-size:15px; color:var(--bamboo-600); max-width:52ch;}
@media (max-width:820px){
  .hero.handover{text-align:left;}
  .hero.handover .badges{justify-content:flex-start;}
  /* Stacked under a result, the sample screenshot reads as a second, different
     result for the same child (it shows another child's range). */
  .hero.handover .phone{display:none;}
}
/* Free predictor */
.tool-cta{display:inline-block; margin:0 0 20px; font-size:15px; color:var(--bamboo-600); text-decoration:none;}
.tool-cta b{color:var(--bamboo-800); font-weight:600; border-bottom:2px solid var(--bamboo-200);}
.hero.handover .tool-cta{display:none;}
#tinh{scroll-margin-top:72px;}
.tool{max-width:620px; margin:0 auto; background:var(--white); border:1px solid var(--bamboo-50); border-radius:var(--radius-card); padding:24px; display:grid; grid-template-columns:1fr 1fr; gap:16px 18px;}
.tool .full{grid-column:1 / -1;}
.tool label, .tool legend{display:block; font-size:14px; font-weight:500; color:var(--bamboo-900); margin-bottom:6px;}
.tool fieldset{border:0; padding:0; margin:0;}
.tool input, .tool select{width:100%; font-family:inherit; font-size:16px; color:var(--text-body); background:var(--cream-bg); border:1px solid var(--bamboo-100); border-radius:12px; padding:11px 12px;}
.tool input:focus, .tool select:focus{outline:2px solid var(--bamboo-200); outline-offset:1px;}
.tool .pair{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.seg{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.seg input{position:absolute; opacity:0; width:1px; height:1px;}
.seg label{margin:0; text-align:center; border:1px solid var(--bamboo-100); border-radius:12px; padding:11px 8px; background:var(--cream-bg); cursor:pointer; font-weight:500; color:var(--bamboo-800);}
.seg input:checked + label{background:var(--bamboo-400); border-color:var(--bamboo-400); color:var(--bamboo-50);}
.seg input:focus-visible + label{outline:2px solid var(--bamboo-200); outline-offset:1px;}
.tool .hint{font-size:12px; color:var(--bamboo-600); margin-top:4px;}
.tool .btn{width:100%; font-size:16px; padding:15px 22px;}
.tool-err{color:var(--warning); font-size:14px; min-height:0;}
.tool-err:empty{display:none;}
.tool-note{font-size:13px; color:var(--bamboo-600); text-align:center;}
@media (max-width:560px){ .tool{grid-template-columns:1fr; padding:20px 16px;} }
/* Result page extras */
.ho-doctor{margin:0 0 18px; padding:12px 16px; border-left:3px solid var(--warning); background:#FFF6E6; border-radius:0 12px 12px 0; font-size:15px; color:var(--text-body); max-width:48ch;}
.ho-doctor b{display:block; color:var(--warning); font-size:14px; margin-bottom:2px;}
.ho-share{margin:4px 0 0; padding:18px 0 0; border-top:1px solid var(--bamboo-50); max-width:48ch; text-align:left;}
.ho-share p{font-size:15px; color:var(--bamboo-800); margin:0 0 12px;}
.ho-share-btns{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.btn-ghost{background:var(--white); color:var(--bamboo-800); border:1px solid var(--bamboo-100);}
.btn-ghost:hover{background:var(--bamboo-50);}
.btn-ghost.done{background:var(--bamboo-50);}
.ho-again{font-size:14px; color:var(--bamboo-600);}
.ho-tester{display:block; margin:16px 0 0; padding:14px 16px; max-width:48ch; background:var(--cream-card); border-radius:var(--radius-card); text-align:left; text-decoration:none; font-size:14px; line-height:1.45; color:var(--bamboo-800);}
.ho-tester[hidden]{display:none;}
.ho-tester b{display:block; margin-bottom:2px; font-size:15px; color:var(--bamboo-900);}
/* In-app browser banner (TikTok, Instagram, Facebook, Zalo block store hand-offs) */
/* Sticky: it used to scroll away, so by the time someone reached the download
   buttons the only explanation of why they fail was off screen. */
.iab{display:none; position:sticky; top:0; z-index:40; background:var(--bamboo-900); color:var(--bamboo-50); padding:12px 16px;}
.iab.show{display:block;}
/* Tap-intercept sheet. A store tap inside an in-app browser cannot work, so the
   tap is answered with the way out instead of a silent failure. */
.iabm{position:fixed; inset:0; z-index:100; display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.55);}
.iabm.show{display:flex;}
.iabm-card{width:100%; max-width:520px; background:var(--white); border-radius:18px 18px 0 0; padding:22px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow:0 -8px 40px rgba(0,0,0,.25);}
@media (min-width:560px){.iabm{align-items:center;} .iabm-card{border-radius:18px;}}
.iabm-card h3{margin:0 0 8px; font-size:19px; line-height:1.3; color:var(--bamboo-900);}
.iabm-card p{margin:0 0 16px; font-size:14px; line-height:1.55; color:var(--ink-600, #4a5a46);}
.iabm-card p b{color:var(--bamboo-900);}
.iabm-btn{display:block; width:100%; border:0; border-radius:999px; font-family:inherit; font-size:15px; font-weight:600; padding:13px 16px; margin-bottom:9px; cursor:pointer;}
.iabm-primary{background:var(--bamboo-600, #3f6b35); color:#fff;}
.iabm-secondary{background:var(--bamboo-100, #e8f0e4); color:var(--bamboo-900);}
.iabm-secondary.done{background:var(--bamboo-400); color:var(--bamboo-50);}
.iabm-text{display:block; width:100%; background:none; border:0; font-family:inherit; font-size:13px; color:var(--ink-600, #6b7a67); padding:8px; cursor:pointer; text-decoration:underline;}
.iab-inner{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:10px 12px; align-items:start;}
.iab-text{font-size:14px; line-height:1.5;}
.iab-text b{color:var(--bamboo-100); font-weight:600;}
.iab-text strong{display:block; font-size:15px; font-weight:600; color:var(--white); margin-bottom:2px;}
.iab-arrow{color:var(--bamboo-200);}
.iab-copy{grid-column:1 / -1; justify-self:start; border:0; border-radius:999px; background:var(--bamboo-400); color:var(--bamboo-50); font-family:inherit; font-size:13px; font-weight:500; padding:9px 14px; cursor:pointer; white-space:nowrap;}
.iab-copy.done{background:var(--bamboo-100); color:var(--bamboo-900);}
.iab.pulse{animation:iab-pulse .6s ease 2;}
@keyframes iab-pulse{50%{background:var(--bamboo-600);}}
@media (prefers-reduced-motion:reduce){.iab.pulse{animation:none;}}
/* Age pages (generated by mobile/scripts/build-age-pages.mjs) */
.nav-cta{padding:9px 16px; font-size:14px; text-decoration:none;}
.age{max-width:760px; padding-top:32px; padding-bottom:16px;}
.age h1{font-size:clamp(28px,4.5vw,40px); margin:6px 0 14px;}
.age h2{font-size:22px; margin:34px 0 10px;}
.age p{margin:0 0 12px;}
.age-crumbs{font-size:13px; color:var(--bamboo-600);}
.age-crumbs a{color:var(--bamboo-600);}
.age-lead{font-size:18px; color:var(--bamboo-800);}
.age-lead b{color:var(--bamboo-900);}
.age-table-wrap{overflow-x:auto; margin:18px 0 8px;}
.age-table{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--bamboo-50); border-radius:var(--radius-card); overflow:hidden; font-size:15px;}
.age-table caption{text-align:left; font-size:13px; color:var(--bamboo-600); padding:0 0 6px;}
.age-table th, .age-table td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--bamboo-50);}
.age-table thead th{background:var(--bamboo-50); color:var(--bamboo-900); font-weight:600;}
.age-table tbody th{font-weight:500; color:var(--bamboo-900);}
.age-table td{color:var(--text-body); white-space:nowrap;}
.age-table-all td, .age-table-all th{text-align:center;}
.age-table-all tbody th{text-align:left;}
.age-note{font-size:14px; color:var(--bamboo-600);}
.age-list{margin:0 0 12px; padding-left:22px;}
.age-list li{margin-bottom:6px;}
.age-links{display:flex; flex-wrap:wrap; gap:8px;}
.age-links a, .age-links span{border:1px solid var(--bamboo-100); border-radius:999px; padding:6px 14px; font-size:14px; text-decoration:none; color:var(--bamboo-800); background:var(--white);}
.age-links span{background:var(--bamboo-400); border-color:var(--bamboo-400); color:var(--bamboo-50);}
.age-app{background:var(--white);}
.age-app .badges{justify-content:center;}
.age-source{font-size:12px; color:var(--bamboo-600); margin-bottom:16px; max-width:760px;}
.tool-more{text-align:center; margin-top:16px; font-size:15px;}
.tool-more a{color:var(--bamboo-600);}
@media (max-width:560px){ .age-table{font-size:14px;} .age-table th, .age-table td{padding:9px 8px;} }