/* Nhật Ký Bé — Pink Pastel UI v1.0. Static prototype, no external dependencies. */ :root{--rose:#C84678;--rose-dark:#A32F5C;--rose-soft:#FBE6EE;--rose-pale:#FFF5F8;--pink:#F4B3C9;--ink:#492A37;--muted:#7C6970;--line:#F1DEE4;--cream:#FFFCFA;--white:#fff;--mint:#EAF3ED;--peach:#FFF0E5;--shadow:0 14px 42px rgba(91,42,62,.065);--shadow-hover:0 18px 46px rgba(121,44,74,.13);--radius:20px;--max:1240px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font:15px/1.65 'Be Vietnam Pro',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}body:has(.modal[open]){overflow:hidden}h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{line-height:1.24;letter-spacing:-.036em}h1{font-size:clamp(2.55rem,4.7vw,4.65rem);font-weight:800}h2{font-size:clamp(1.8rem,3.2vw,2.65rem);font-weight:760}h3{font-size:1.3rem;font-weight:760}p{color:var(--muted)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{min-width:0}img,svg{max-width:100%}img{display:block}strong{font-weight:730}.container{width:min(calc(100% - 48px),var(--max));margin-inline:auto}.muted{color:var(--muted)}.eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--rose-dark);text-transform:uppercase;letter-spacing:.17em;font-size:.72rem;font-weight:800}.eyebrow:before{content:'';width:17px;height:2px;border-radius:4px;background:var(--rose)}.announcement{color:#fff;background:#AF4472;font-size:.78rem;text-align:center;padding:8px 18px;letter-spacing:.03em}.site-header{position:sticky;top:0;z-index:90;background:rgba(255,252,251,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}.header-top{height:82px;display:flex;align-items:center;gap:25px}.logo{flex:none;display:flex;align-items:center;gap:11px;font-weight:860;font-size:1.34rem;letter-spacing:-.04em;line-height:1.1}.logo-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(140deg,#FEE2EB,#F5B3CA);color:var(--rose-dark)}.logo small{display:block;letter-spacing:.07em;font-size:.54rem;font-weight:750;color:#9A687C;margin-top:5px}.logo em{font-style:normal;color:var(--rose)}.site-search{flex:1;max-width:450px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:100px;background:#FFF7FA;padding:5px 6px 5px 17px;color:var(--rose)}.site-search input{border:0;background:transparent;width:100%;outline:0;font-size:.84rem;color:var(--ink)}.search-submit{border:0;border-radius:100px;padding:8px 15px;background:#F8E1EA;color:var(--rose-dark)}.header-actions{display:flex;gap:10px;align-items:center;margin-left:auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:100px;padding:12px 20px;font-size:.875rem;font-weight:750;line-height:1.2;transition:all .2s ease;white-space:nowrap}.btn-primary{background:var(--rose);color:white;box-shadow:0 8px 22px rgba(200,70,120,.16)}.btn-primary:hover{background:var(--rose-dark);transform:translateY(-1px)}.btn-light{background:#fff;border-color:#EDC8D6;color:var(--rose-dark)}.btn-light:hover{background:#FFF0F6}.btn-soft{background:var(--rose-soft);color:var(--rose-dark)}.btn-soft:hover{background:#F6D4E0}.btn-quiet{background:transparent;color:var(--ink)}.btn-quiet:hover{background:var(--rose-pale)}.btn-sm{font-size:.79rem;padding:10px 15px}.btn-block{width:100%}.main-nav{height:47px;display:flex;align-items:center;gap:31px}.main-nav a{font-size:.83rem;font-weight:700;padding:12px 0;position:relative;white-space:nowrap;color:#62505B}.main-nav a:hover,.main-nav a.active{color:var(--rose-dark)}.main-nav a.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--rose);border-radius:4px 4px 0 0}.nav-note{margin-left:auto;color:#B88397;font-size:.76rem;font-style:italic}.mobile-toggle{display:none;background:#FCE6EE;color:var(--rose-dark);border:0;border-radius:12px;padding:11px;font-size:1.2rem}.main-content{min-height:65vh}.section{padding:74px 0}.section-tight{padding:48px 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}.section-heading p{margin-top:9px;max-width:680px}.section-heading .eyebrow{margin-bottom:12px}.section-title{max-width:780px}.more-link{font-size:.88rem;font-weight:750;color:var(--rose-dark);white-space:nowrap}.more-link:hover{text-decoration:underline}.surface-pink{background:linear-gradient(180deg,#FFF3F7 0%,#FFFCFA 100%)}.surface-cream{background:#FFF9F7}.surface-soft{background:#FFF4F7}.grid{display:grid;gap:22px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:white;border:1px solid #F1E2E6;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.card-pad{padding:26px}.card-hover{transition:box-shadow .2s,transform .2s}.card-hover:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #F1D8E2;background:#FFF2F7;color:var(--rose-dark);font-weight:750;border-radius:100px;padding:5px 11px;font-size:.74rem}.chip-green{background:var(--mint);border-color:#D9EADD;color:#50775B}.chip-peach{background:#FFF0E8;border-color:#F7DECE;color:#A56C4D}.icon-tile{flex:none;width:54px;height:54px;display:grid;place-items:center;background:#FCE8EF;border-radius:17px;font-size:1.6rem}.icon-tile.mint{background:#ECF5ED}.icon-tile.peach{background:#FFF0E5}.category-card{display:flex;flex-direction:column;align-items:start;gap:18px;min-height:188px;padding:23px}.category-card h3{font-size:1rem;letter-spacing:-.02em}.category-card p{font-size:.78rem;line-height:1.4;margin-top:6px}.category-card .arrow{margin-top:auto;color:var(--rose)}.hero-wrap{padding:26px 0 30px}.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.08fr .92fr;min-height:515px;background:linear-gradient(115deg,#FFF3F7,#FFE5EE 67%,#FCE7EB);border-radius:33px;border:1px solid #F7DFE7;box-shadow:0 19px 55px rgba(123,59,80,.07)}.hero:before,.hero:after{position:absolute;content:'';border-radius:50%;pointer-events:none}.hero:before{width:380px;height:380px;background:rgba(255,255,255,.32);right:-130px;top:-140px}.hero:after{width:210px;height:210px;background:rgba(255,255,255,.33);left:-90px;bottom:-130px}.hero-copy{padding:69px 0 60px 67px;position:relative;z-index:1}.hero h1{margin:18px 0 16px;max-width:650px}.hero h1 em,.pink-text{color:var(--rose);font-style:normal}.hero-copy>p{max-width:550px;font-size:1.01rem;line-height:1.8;color:#765762}.hero-buttons{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.mini-proof{display:flex;align-items:center;gap:12px;margin-top:27px;color:#825E6C;font-size:.82rem}.mini-avatars{display:flex;padding-left:6px}.mini-avatars b{display:grid;place-items:center;width:29px;height:29px;border:2px solid white;border-radius:50%;background:#DDA5B7;margin-left:-7px;font-size:.8rem}.hero-art{position:relative;display:flex;align-items:center;justify-content:center;padding:25px 35px 10px 0}.hero-art img{width:min(100%,460px);max-height:475px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(85,45,60,.06))}.float-note{position:absolute;bottom:60px;right:26px;background:#fff;border:1px solid #F5DEEA;border-radius:18px;padding:13px 17px;box-shadow:var(--shadow);font-size:.78rem;font-weight:750;color:var(--rose-dark)}.editorial-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;border:1px solid #F1E2E6;background:white;border-radius:16px}.editorial-bar b{font-size:.9rem}.editorial-bar p{font-size:.78rem}.icon-dot{display:grid;place-items:center;flex:none;border-radius:50%;width:38px;height:38px;background:#FCE6EF;color:var(--rose)}.feature-card{display:flex;flex-direction:column}.feature-visual{min-height:235px;background:radial-gradient(circle at 75% 25%,#ffe6c7 0 18%,transparent 19%),linear-gradient(125deg,#FDE5ED,#FFF1E9);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.feature-visual img{width:75%;max-height:230px;object-fit:contain}.feature-visual.mint{background:linear-gradient(125deg,#EAF4ED,#FFF6EE)}.feature-visual.peach{background:linear-gradient(125deg,#FFF0E2,#FFE6EB)}.feature-body{padding:24px}.feature-body h3{margin:13px 0 10px}.feature-body p{font-size:.88rem}.article-meta{display:flex;flex-wrap:wrap;gap:9px;align-items:center;color:#9B8290;font-size:.75rem;margin-top:17px}.feature-sm{display:grid;grid-template-columns:145px 1fr;min-height:150px}.feature-sm .feature-visual{min-height:0}.feature-sm .feature-visual img{width:93%}.feature-sm .feature-body{padding:18px}.feature-sm h3{font-size:1rem;margin:8px 0 5px}.feature-sm p{font-size:.77rem}.stack{display:grid;gap:20px}.split{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:start}.split-even{grid-template-columns:1fr 1fr}.community-row{display:flex;align-items:center;gap:15px;border-bottom:1px solid #F2E5E9;padding:17px 0}.community-row:last-child{border-bottom:0}.community-row h3{font-size:.96rem}.community-row p{font-size:.77rem;margin-top:4px}.community-row>.chip{margin-left:auto}.diary-box{background:linear-gradient(145deg,#FFF0F5,#FFE3EC);padding:26px;border:1px solid #F2DBE3;border-radius:22px}.diary-box h3{font-size:1.65rem;margin:12px 0 10px}.timeline-mini{position:relative;padding-left:23px;margin:21px 0;border-left:2px solid #F0B6CC}.timeline-mini>div{position:relative;margin-bottom:19px}.timeline-mini>div:last-child{margin-bottom:0}.timeline-mini>div:before{content:'♥';color:var(--rose);font-size:11px;position:absolute;top:1px;left:-31px;background:#FFF0F5;width:17px;height:17px;text-align:center}.timeline-mini b{font-size:.84rem}.timeline-mini p{font-size:.76rem}.quote-panel{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;background:#FFF1F5;border:1px solid #F5DCE5;border-radius:30px;padding:45px 55px}.quote-panel h2{margin:15px 0}.quote-panel p{line-height:1.8}.checklist{display:grid;gap:9px;margin-top:20px}.checklist div:before{content:'✓';color:var(--rose-dark);background:#F9D7E3;border-radius:50%;width:22px;height:22px;display:inline-grid;place-items:center;margin-right:10px;font-weight:bold}.polaroid{background:white;padding:14px 14px 25px;border-radius:7px;box-shadow:0 16px 32px rgba(104,54,66,.18);width:245px;max-width:100%;margin:auto;transform:rotate(7deg);text-align:center;font-weight:750;color:var(--rose-dark)}.polaroid:before{content:'🧸';display:grid;place-items:center;font-size:7rem;background:#FADCE6;height:220px;border-radius:3px;margin-bottom:10px}.site-footer{margin-top:60px;background:#AD4D78;color:#fff;padding:58px 0 23px}.site-footer p,.site-footer a{color:#FBE9EF}.site-footer h3{font-size:.98rem;margin:0 0 13px;color:#fff}.site-footer .logo small{color:#F9D5E3}.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.2fr;gap:35px}.footer-grid p{font-size:.84rem;line-height:1.9;max-width:345px}.footer-grid a{display:block;font-size:.84rem;margin:8px 0}.footer-grid a:hover{text-decoration:underline}.footer-bottom{border-top:1px solid #D08BA8;margin-top:35px;padding-top:20px;display:flex;justify-content:space-between;gap:15px;font-size:.76rem;color:#F9E0E9}.page-intro{padding:48px 0 38px;background:linear-gradient(150deg,#FFF4F8,#FFFDFC)}.page-intro h1{font-size:clamp(2.2rem,4vw,3.55rem);margin:12px 0 12px}.page-intro p{max-width:760px;font-size:1rem;line-height:1.8}.breadcrumb{font-size:.79rem;color:#A08492;display:flex;align-items:center;gap:9px;flex-wrap:wrap}.breadcrumb a:hover{color:var(--rose-dark)}.page-intro .controls-row{margin-top:23px}.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:27px;align-items:start}.sidebar{position:sticky;top:150px}.aside-panel{padding:24px}.aside-panel h3{font-size:1.1rem;margin-bottom:15px}.aside-panel a{display:block;font-size:.85rem;padding:9px 0;border-bottom:1px solid #F3E8EA;color:#6C5660}.aside-panel a:hover{color:var(--rose-dark)}.aside-panel a:last-child{border:0}.filters,.controls-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.filter-btn{background:white;border:1px solid var(--line);color:#6F5660;border-radius:100px;padding:10px 17px;font-size:.81rem;font-weight:700}.filter-btn.is-active,.filter-btn:hover{background:var(--rose);color:#fff;border-color:var(--rose)}.field{display:grid;gap:7px}.field label{font-size:.8rem;font-weight:750;color:#694B58}.input,.select,.textarea{border:1px solid #E9D5DD;border-radius:12px;padding:13px 15px;background:#fff;color:var(--ink);outline:none;width:100%}.input:focus,.select:focus,.textarea:focus{border-color:var(--rose);box-shadow:0 0 0 3px #F9DCE6}.textarea{resize:vertical;min-height:110px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.form-grid .full{grid-column:1/-1}.search-large{display:flex;gap:10px;max-width:780px}.search-large .input{flex:1}.search-list{display:grid;gap:13px;margin-top:25px}.search-result{display:grid;grid-template-columns:auto 1fr auto;gap:17px;align-items:center;padding:18px 21px}.search-result h3{font-size:1rem;margin:4px 0}.search-result p{font-size:.81rem}.empty-state{text-align:center;background:#FFF7F9;border:1px dashed #EFB6C9;padding:50px 20px;border-radius:20px;color:var(--muted)}.empty-state b{display:block;color:var(--ink);margin:10px}.calendar-note{border:1px solid #F0DBE3;background:#FFF7F9;color:#8B5067;border-radius:13px;padding:13px 16px;font-size:.8rem}.calendar-note strong{color:#833853}.metric-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.metric{padding:21px;background:white;border:1px solid var(--line);border-radius:17px}.metric b{font-size:1.4rem;display:block;color:var(--rose-dark)}.metric p{font-size:.8rem}.week-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;margin:20px 0}.week-btn{padding:10px 0;border:1px solid #EED8E0;background:#fff;color:#7D5969;border-radius:10px;font-size:.85rem;font-weight:750}.week-btn:hover,.week-btn.selected{background:var(--rose);border-color:var(--rose);color:white}.selector-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.selector-head h3{font-size:1.55rem}.selector-head .btn{padding:10px 14px}.progress-track{height:9px;border-radius:99px;background:#F6E2E9;overflow:hidden}.progress-track div{height:100%;background:linear-gradient(90deg,#E8A3BA,var(--rose));border-radius:99px;transition:width .2s}.phase-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.phase-card{border:1px solid var(--line);border-radius:17px;background:white;padding:17px;text-align:left}.phase-card.is-active{border-color:#D76490;background:#FFF0F6;box-shadow:inset 0 0 0 1px #D76490}.phase-card b{font-size:.89rem;display:block}.phase-card small{font-size:.76rem;color:var(--muted)}.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.info-card{padding:24px;min-height:170px}.info-card h3{font-size:1.03rem;margin:14px 0 8px}.info-card p{font-size:.85rem}.info-card .icon-tile{width:42px;height:42px;font-size:1.3rem}.article-page .article-title{font-size:clamp(2.25rem,4vw,3.5rem);margin:13px 0}.article-page .lead{font-size:1.08rem;color:#745B67;line-height:1.86}.article-page .article-cover{height:310px;border-radius:24px;background:linear-gradient(135deg,#FCE7F0,#FFF2E9);display:flex;justify-content:center;margin:30px 0;overflow:hidden}.article-cover img{height:100%;max-width:70%;object-fit:contain}.prose{font-size:1rem;line-height:1.95;color:#614B56}.prose p{margin:12px 0 20px;color:#614B56}.prose h2{font-size:1.57rem;margin:32px 0 12px;scroll-margin-top:160px}.prose li{margin-bottom:9px}.sources{border-top:1px solid var(--line);padding:25px 0;color:var(--muted);font-size:.83rem}.vertical-timeline{position:relative;margin:20px 0 0;padding-left:22px;border-left:2px solid #F1C6D5}.time-event{position:relative;padding:0 0 27px 20px}.time-event:before{content:'';position:absolute;left:-31px;top:3px;width:15px;height:15px;border-radius:50%;background:#D4668F;border:3px solid #FFF4F8}.time-event h3{font-size:1.05rem;margin:9px 0}.time-event p{font-size:.85rem}.day-tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px}.day-tab{min-width:95px;border-radius:14px;padding:13px 10px;background:#fff;border:1px solid var(--line);color:#6F5862;text-align:center;font-weight:700}.day-tab.selected,.day-tab:hover{background:var(--rose);color:#fff;border-color:var(--rose)}.meal-card{display:flex;gap:15px;justify-content:space-between;align-items:center;padding:17px;border-bottom:1px solid var(--line)}.meal-card:last-child{border-bottom:0}.meal-card b{display:block;font-size:.95rem}.meal-card p{font-size:.82rem}.meal-card .mini-icon{font-size:1.5rem}.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.month-grid .weekday{text-align:center;font-size:.7rem;text-transform:uppercase;color:#947482;font-weight:800;padding:6px 0}.date-cell{min-height:90px;border:1px solid #F2E1E7;background:white;border-radius:12px;padding:9px;display:flex;flex-direction:column;gap:4px}.date-cell.other{opacity:.3}.date-cell.today{border:2px solid #DA87A7}.date-cell b{font-size:.78rem}.date-tag{display:block;border-radius:5px;background:#FFE7EF;color:#A03B62;padding:2px 4px;font-size:.63rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.date-tag.completed{background:#E4F3E7;color:#38764E}.dashboard-shell{display:grid;grid-template-columns:245px minmax(0,1fr);gap:24px;padding-top:32px}.dashboard-side{align-self:start;position:sticky;top:151px;padding:17px}.dashboard-side a{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:11px;font-size:.86rem;font-weight:730;color:#745665}.dashboard-side a.active,.dashboard-side a:hover{background:#FBE8F0;color:var(--rose-dark)}.dashboard-side .profile-box{padding:16px;background:#FFF2F7;border-radius:13px;margin-bottom:13px}.dashboard-main h1{font-size:2.45rem}.dashboard-hero{padding:27px 31px;background:linear-gradient(115deg,#FFE8F0,#FFF4E9);border:1px solid #F4D7E1;border-radius:24px}.mini-chart{height:12px;background:#F8DCE7;border-radius:100px;overflow:hidden}.mini-chart div{height:100%;background:#C84678}.discussion-item{display:flex;gap:16px;padding:19px 0;border-bottom:1px solid var(--line)}.discussion-item:last-child{border-bottom:none}.discussion-item h3{font-size:1.04rem;margin:4px 0}.discussion-item p{font-size:.84rem}.avatar{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#FCE5EE;color:var(--rose-dark);font-weight:800}.reply{display:flex;gap:16px;padding:24px;border-bottom:1px solid var(--line)}.reply p{font-size:.87rem;color:#67535D;margin-top:7px}.journal-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.journal-timeline .card{padding:18px}.journal-pic{height:160px;background:#FFF0F6;border-radius:14px;display:grid;place-items:center;font-size:4.5rem;margin-bottom:13px}.signin-shell{max-width:480px;margin:45px auto}.signin-shell .card{padding:30px}.tabs{display:flex;gap:6px;background:#FFF1F5;border-radius:13px;padding:5px;margin-bottom:22px}.tabs button{border:0;background:transparent;border-radius:10px;padding:11px 12px;flex:1;font-size:.8rem;font-weight:740;color:#866773}.tabs button.active{background:white;color:var(--rose-dark);box-shadow:0 3px 9px rgba(85,46,66,.07)}.form-note{font-size:.76rem;line-height:1.7;color:#967482}.form-note a{color:var(--rose-dark);text-decoration:underline}.form-stack{display:grid;gap:17px}.step-progress{display:flex;gap:10px;margin-bottom:25px}.step-progress span{height:7px;background:#F6DCE5;border-radius:99px;flex:1}.step-progress span.active{background:var(--rose)}.profile-choice{display:grid;grid-template-columns:1fr 1fr;gap:15px}.choice-card{border:1px solid var(--line);background:#fff;border-radius:17px;padding:23px;text-align:left;cursor:pointer}.choice-card.selected{border-color:var(--rose);background:#FFF3F7;box-shadow:inset 0 0 0 1px var(--rose)}.choice-card .emoji{font-size:2rem}.choice-card b{display:block;margin-top:8px}.choice-card small{display:block;color:var(--muted);margin-top:4px}.faq-list details{border-bottom:1px solid #F0E0E6;padding:16px 0}.faq-list summary{cursor:pointer;font-weight:750}.faq-list p{margin-top:9px;font-size:.86rem}.modal{position:fixed;inset:0;z-index:150;border:0;padding:0;background:rgba(57,28,41,.40);width:100%;height:100%;display:none;place-items:center}.modal[open]{display:grid}.modal-dialog{width:min(520px,calc(100% - 34px));border-radius:24px;background:white;padding:28px;box-shadow:0 25px 100px #3E142A44;max-height:90vh;overflow-y:auto;overflow-x:hidden!important;box-sizing:border-box}.modal-head{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:19px}.modal-close{border:0;background:#FFF0F5;border-radius:50%;width:34px;height:34px;font-size:1.25rem;color:var(--rose-dark)}.toast{position:fixed;right:23px;bottom:23px;z-index:180;border-radius:13px;background:#432A36;color:white;max-width:min(420px,calc(100vw - 40px));padding:13px 20px;box-shadow:var(--shadow-hover);opacity:0;transform:translateY(15px);pointer-events:none;transition:all .2s}.toast.show{opacity:1;transform:none}.kbd{font:700 .72rem/1 monospace;background:#FBE5ED;border-radius:5px;padding:3px 6px;color:var(--rose-dark)}.small{font-size:.8rem}.spacer{height:25px}.divider{height:1px;background:var(--line);margin:22px 0}.hidden,[hidden]{display:none!important}:focus-visible{outline:3px solid #D96A96;outline-offset:3px} @media(max-width:1080px){.main-nav{gap:19px}.nav-note{display:none}.header-top{gap:15px}.site-search{max-width:300px}.hero-copy{padding-left:38px}.hero h1{font-size:3.6rem}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-grid>div:last-child{grid-column:1/-1}.week-grid{grid-template-columns:repeat(8,1fr)}} @media(max-width:800px){.container{width:min(calc(100% - 32px),var(--max))}.announcement{font-size:.67rem}.site-header{position:sticky}.header-top{height:70px}.header-top .site-search{display:none}.header-actions>.btn:not(.mobile-toggle){display:none}.mobile-toggle{display:block}.main-nav{display:none;height:auto;padding:10px 0 18px;flex-direction:column;align-items:stretch;gap:0}.main-nav.open{display:flex}.main-nav a{padding:12px;border-bottom:1px solid var(--line)}.main-nav a.active:after{width:3px;height:70%;left:0;right:auto;top:15%;bottom:auto}.section{padding:52px 0}.section-tight{padding:36px 0}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:42px 35px 0}.hero h1{font-size:clamp(2.6rem,7vw,4.15rem)}.hero-art{padding:0 30px}.hero-art img{max-height:330px}.float-note{bottom:40px;right:20px}.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}.split,.split-even,.quote-panel,.content-layout{grid-template-columns:1fr}.quote-panel{padding:35px}.sidebar{position:static}.feature-sm{grid-template-columns:140px 1fr}.footer-grid{grid-template-columns:1fr 1fr}.dashboard-shell{grid-template-columns:1fr}.dashboard-side{position:static;display:flex;flex-wrap:wrap;gap:6px}.dashboard-side .profile-box{width:100%}.dashboard-side a{padding:10px}.week-grid{grid-template-columns:repeat(8,1fr)}} @media(max-width:520px){.container{width:min(calc(100% - 26px),var(--max))}.logo{font-size:1.13rem}.logo-mark{width:40px;height:40px}.logo small{font-size:.46rem}.hero-wrap{padding-top:12px}.hero{border-radius:23px}.hero-copy{padding:34px 23px 0}.hero h1{font-size:2.72rem}.hero-copy>p{font-size:.9rem}.hero-buttons{display:grid}.hero-buttons .btn{width:100%}.hero-art img{max-height:280px}.float-note{font-size:.67rem;right:5px;bottom:15px}.section-heading{align-items:start;flex-direction:column;gap:13px}.grid-3,.grid-2{grid-template-columns:1fr}.grid-4{gap:10px}.category-card{padding:16px;min-height:182px}.icon-tile{width:45px;height:45px;border-radius:13px;font-size:1.3rem}.category-card h3{font-size:.92rem}.category-card p{font-size:.72rem}.editorial-bar{align-items:flex-start;flex-direction:column;padding:18px}.feature-sm{grid-template-columns:125px 1fr}.feature-sm .feature-body{padding:14px}.feature-sm .article-meta{display:none}.feature-sm h3{font-size:.87rem}.feature-visual{min-height:190px}.quote-panel{padding:23px}.footer-grid{grid-template-columns:1fr 1fr;gap:22px}.footer-grid>div:first-child,.footer-grid>div:last-child{grid-column:1/-1}.footer-bottom{flex-direction:column}.page-intro{padding:35px 0 29px}.page-intro h1{font-size:2.3rem}.form-grid{grid-template-columns:1fr}.metric-strip{grid-template-columns:repeat(3,1fr);gap:8px}.metric{padding:13px 9px}.metric b{font-size:1.05rem}.metric p{font-size:.7rem}.week-grid{grid-template-columns:repeat(5,1fr)}.phase-cards{grid-template-columns:1fr}.phase-card{padding:12px}.info-grid{grid-template-columns:1fr}.selector-head h3{font-size:1.23rem}.date-cell{min-height:70px;padding:4px;border-radius:6px}.date-tag{font-size:.55rem}.month-grid{gap:3px}.journal-timeline{grid-template-columns:1fr}.search-large{flex-direction:column}.search-result{grid-template-columns:auto 1fr}.search-result>a:last-child{grid-column:1/-1}.signin-shell{margin:25px auto}.signin-shell .card{padding:19px}.profile-choice{grid-template-columns:1fr}.card-pad{padding:20px}} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}} /* Prevent intrinsic widths of calendar controls from widening small screens. */ .content-layout > *, .dashboard-main, .card-pad {min-width:0} @media (max-width:800px){.content-layout{grid-template-columns:minmax(0,1fr)}.day-tabs{max-width:100%;width:100%}} @media (max-width:520px){.selector-head{flex-wrap:wrap}.selector-head>.btn{flex:0 1 auto;white-space:normal}.selector-head>a.btn{max-width:100%;white-space:normal;text-align:center}#babyMonthGrid{grid-template-columns:repeat(5,minmax(0,1fr))!important}.day-tabs{overflow-x:auto}} /* v1.1 pregnancy illustrations */ .pregnancy-overview-card,.pregnancy-detail-card{overflow:hidden} .pregnancy-hero,.pregnancy-detail-top{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:22px;align-items:center} .selector-stack{align-items:flex-start;gap:14px;flex-wrap:wrap} .selector-actions{display:flex;gap:10px;flex-wrap:wrap} .pregnancy-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .pregnancy-facts-compact{margin-top:18px} .fact-box{background:#fff;border:1px solid #F2D5E0;border-radius:16px;padding:14px 15px;box-shadow:0 10px 30px rgba(164,75,113,.06)} .fact-box span{display:block;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#9A7183;margin-bottom:8px} .fact-box strong{display:block;color:var(--ink);font-size:1rem;line-height:1.45} .pregnancy-visual-frame{background:linear-gradient(180deg,#FFF9FB,#FFEFF5);border:1px solid #F1D6E0;border-radius:24px;padding:18px;display:grid;gap:12px;justify-items:center;text-align:center} .pregnancy-visual-frame img{width:100%;max-width:420px;height:auto;display:block} .pregnancy-visual-frame p{font-size:.84rem;color:#725461;max-width:340px} .pregnancy-milestones{margin:18px 0 16px;padding:16px 18px;border-radius:18px;background:#FFF8FB;border:1px dashed #E8C4D2} .milestone-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:12px} .milestone-head h3{font-size:1.05rem} .milestone-pills{display:flex;flex-wrap:wrap;gap:10px} .milestone-pill{border:1px solid #F0D3DE;background:#fff;border-radius:999px;padding:10px 15px;font-size:.82rem;font-weight:800;color:#865B70} .milestone-pill:hover,.milestone-pill.is-active{background:#FCE8F0;color:var(--rose-dark);border-color:#D983A6;box-shadow:0 10px 20px rgba(180,78,119,.08)} .pregnancy-copy-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px} .detail-copy-block{background:#fff;border:1px solid #F1D6E1;border-radius:18px;padding:14px 16px} .detail-copy-block p{font-size:.87rem;color:#6C5260;margin-top:6px} .pregnancy-visual-frame-detail img{max-width:430px} @media(max-width:800px){.pregnancy-hero,.pregnancy-detail-top{grid-template-columns:1fr}.pregnancy-visual-frame{order:-1}.pregnancy-facts{grid-template-columns:1fr 1fr 1fr}.pregnancy-copy-grid{grid-template-columns:1fr}} @media(max-width:520px){.pregnancy-facts{grid-template-columns:1fr}.selector-actions{width:100%}.selector-actions .btn{flex:1 1 auto}.milestone-head{display:block}.pregnancy-milestones{padding:14px}.milestone-pills{gap:8px}.milestone-pill{padding:9px 12px}.pregnancy-visual-frame{padding:14px;border-radius:18px}} /* Stable v1.2.0 build. */ .pregnancy-metric-foot{margin-top:12px;font-size:.73rem;line-height:1.6;color:#8C6877} .pregnancy-version-tag{display:inline-flex;margin-top:13px;border:1px solid #F1C5D8;background:#fff8fb;border-radius:999px;padding:6px 12px;color:#9A4268;font-weight:750;font-size:.75rem} /* v1.3 — original 600x600 illustrations supplied by site owner; no crop or image alteration. */ body[data-page="C02"] .pregnancy-hero,body[data-page="C03"] .pregnancy-detail-top{display:flex;flex-direction:column;align-items:stretch;gap:20px} body[data-page="C02"] .pregnancy-hero-copy,body[data-page="C03"] .pregnancy-detail-main{width:100%} body[data-page="C02"] .pregnancy-visual-frame,body[data-page="C03"] .pregnancy-visual-frame{width:100%;max-width:720px;margin:0 auto;background:linear-gradient(145deg,#fffafb,#fff3f7);padding:20px 20px 24px} .pregnancy-image-link{display:block;width:100%;max-width:600px;margin:0 auto;cursor:zoom-in;border-radius:14px;outline-offset:5px;overflow:hidden} .pregnancy-image-link img.pregnancy-user-figure{display:block;width:100%;max-width:600px;height:auto;aspect-ratio:1/1;object-fit:contain;border-radius:14px;box-shadow:0 14px 30px rgba(122,64,88,.12)} .pregnancy-open-original{display:inline-flex;justify-content:center;align-items:center;margin-top:8px} .pregnancy-thumb-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;margin-top:10px} .pregnancy-thumb{min-width:0;text-align:center;display:grid;align-content:start;gap:7px;padding:8px;background:white;color:#6f4154;border:1.5px solid #efc9d9;border-radius:13px;cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:700;transition:border-color .16s,transform .16s,background .16s} .pregnancy-thumb:hover{transform:translateY(-2px);border-color:#cf6792;background:#fff6f9} .pregnancy-thumb.is-active{border:2px solid #bd3e70;background:#ffe7f1;box-shadow:0 5px 15px rgba(164,72,110,.17)} .pregnancy-thumb img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;border-radius:9px;background:#fff0f6} .pregnancy-thumb span{line-height:1.3} body[data-page="C02"] .pregnancy-hero-copy .pregnancy-facts,body[data-page="C03"] .pregnancy-detail-main .pregnancy-facts{margin-top:16px} @media(max-width:720px){.pregnancy-thumb-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.pregnancy-visual-frame{padding:12px!important}} @media(max-width:420px){.pregnancy-thumb-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pregnancy-thumb{padding:6px}.pregnancy-open-original{width:100%}} /* Keep control panel above large medical figure on narrow screens. */ @media(max-width:800px){body[data-page="C02"] .pregnancy-visual-frame,body[data-page="C03"] .pregnancy-visual-frame{order:0}} /* v1.4 — Hero 2 columns (left content / right illustration), compact button-only stages. */ body[data-page="C02"] .content-layout, body[data-page="C03"] .content-layout {grid-template-columns:minmax(0,1fr) 252px;gap:24px;align-items:start} body[data-page="C02"] .pregnancy-hero, body[data-page="C03"] .pregnancy-detail-top {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:start;gap:22px} body[data-page="C02"] .pregnancy-hero-copy, body[data-page="C03"] .pregnancy-detail-main {min-width:0;width:auto} body[data-page="C02"] .pregnancy-visual-frame, body[data-page="C03"] .pregnancy-visual-frame {min-width:0;width:auto;max-width:none;margin:0;padding:12px;border-radius:20px;align-self:start;gap:8px} body[data-page="C02"] .pregnancy-image-link, body[data-page="C03"] .pregnancy-image-link {max-width:100%;width:100%} body[data-page="C02"] .pregnancy-image-link img.pregnancy-user-figure, body[data-page="C03"] .pregnancy-image-link img.pregnancy-user-figure {max-width:100%;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;box-shadow:none} body[data-page="C02"] .pregnancy-visual-frame p, body[data-page="C03"] .pregnancy-visual-frame p {font-size:.76rem;line-height:1.5;max-width:100%} body[data-page="C02"] .pregnancy-open-original, body[data-page="C03"] .pregnancy-open-original {margin:0;font-size:.73rem;padding:8px 12px} body[data-page="C02"] .pregnancy-facts, body[data-page="C03"] .pregnancy-facts {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} body[data-page="C02"] .pregnancy-facts .fact-box:last-child, body[data-page="C03"] .pregnancy-facts .fact-box:last-child {grid-column:1/-1} body[data-page="C02"] .fact-box, body[data-page="C03"] .fact-box {padding:12px;border-radius:12px} body[data-page="C02"] .fact-box strong, body[data-page="C03"] .fact-box strong {font-size:.94rem} body[data-page="C02"] .fact-box span, body[data-page="C03"] .fact-box span {font-size:.66rem;letter-spacing:.03em} body[data-page="C02"] .selector-head, body[data-page="C03"] .selector-head {align-items:start} body[data-page="C02"] .selector-actions, body[data-page="C03"] .selector-actions {margin-top:12px} body[data-page="C02"] .pregnancy-milestones {margin:20px 0 16px;padding:16px 18px} body[data-page="C02"] .pregnancy-stage-buttons, body[data-page="C03"] .pregnancy-stage-buttons {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px} body[data-page="C02"] .pregnancy-stage-buttons .milestone-pill, body[data-page="C03"] .pregnancy-stage-buttons .milestone-pill {width:100%;padding:11px 7px;font-size:.78rem;line-height:1.2;white-space:nowrap} body[data-page="C02"] .pregnancy-stage-buttons .milestone-pill.is-active, body[data-page="C03"] .pregnancy-stage-buttons .milestone-pill.is-active {background:#C84678;color:white;border-color:#C84678;box-shadow:0 8px 16px rgba(200,70,120,.17)} body[data-page="C02"] .pregnancy-disclaimer {font-size:.77rem;padding:12px 15px;line-height:1.6} body[data-page="C03"] .pregnancy-copy-grid {grid-template-columns:1fr;gap:8px} body[data-page="C03"] .detail-copy-block {padding:11px 13px} body[data-page="C03"] .detail-copy-block p {font-size:.79rem} @media(max-width:1120px){ body[data-page="C02"] .content-layout, body[data-page="C03"] .content-layout{grid-template-columns:minmax(0,1fr)} body[data-page="C02"] .sidebar,body[data-page="C03"] .sidebar{display:grid;grid-template-columns:1fr 1fr;gap:14px} body[data-page="C02"] .sidebar .diary-box,body[data-page="C03"] .sidebar .diary-box{margin-top:0!important} body[data-page="C02"] .pregnancy-hero,body[data-page="C03"] .pregnancy-detail-top{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)} } @media(max-width:650px){ body[data-page="C02"] .pregnancy-hero,body[data-page="C03"] .pregnancy-detail-top{grid-template-columns:1fr;gap:18px} body[data-page="C02"] .pregnancy-visual-frame,body[data-page="C03"] .pregnancy-visual-frame{order:0;max-width:460px;width:100%;justify-self:center} body[data-page="C02"] .pregnancy-stage-buttons,body[data-page="C03"] .pregnancy-stage-buttons{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px} body[data-page="C02"] .pregnancy-stage-buttons .milestone-pill,body[data-page="C03"] .pregnancy-stage-buttons .milestone-pill{font-size:.72rem;padding:9px 3px} body[data-page="C02"] .sidebar,body[data-page="C03"] .sidebar{grid-template-columns:1fr} body[data-page="C02"] .milestone-head,body[data-page="C03"] .milestone-head{display:block} } @media(max-width:360px){body[data-page="C02"] .pregnancy-stage-buttons,body[data-page="C03"] .pregnancy-stage-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}} /* v1.5: dynamic four-card information under the week selector */ body[data-page="C02"] .pregnancy-dynamic-card{position:relative;overflow:hidden;min-height:180px;transition:border-color .18s ease,box-shadow .18s ease} body[data-page="C02"] .pregnancy-dynamic-card:hover{border-color:#edb7c9;box-shadow:0 12px 36px #bb607a16} body[data-page="C02"] .pregnancy-dynamic-card .pregnancy-card-badge{position:absolute;right:18px;top:18px;display:inline-flex;border-radius:20px;padding:5px 10px;background:#fde9f0;border:1px solid #f1c4d3;color:#9b2d5a;font-size:.74rem;font-weight:800} body[data-page="C02"] .pregnancy-dynamic-card h3{padding-right:66px;line-height:1.35} body[data-page="C02"] .pregnancy-dynamic-card p{font-size:.9rem;line-height:1.7;margin-top:11px} body[data-page="C02"] .pregnancy-dynamic-disclaimer{font-size:.78rem;line-height:1.6;color:#825668;margin:12px 0 0;padding-left:14px;border-left:3px solid #e8a1bc} @media(max-width:520px){body[data-page="C02"] .pregnancy-dynamic-card{min-height:0}body[data-page="C02"] .pregnancy-dynamic-card h3{font-size:1rem}} /* v1.6 - vaccination and dynamic meal context */ .context-note{margin-top:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-radius:16px;background:#FFF7FA;border:1px solid #F4DCE5;color:#805E6D;font-size:.82rem} .vacc-page-switch{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 24px} .vacc-switch{display:inline-flex;padding:13px 18px;border:1px solid #F1CEDB;background:white;border-radius:15px;font-weight:750;color:#864F67;font-size:.9rem} .vacc-switch.active,.vacc-switch:hover{background:#C84678;color:#fff;border-color:#C84678;box-shadow:0 8px 24px rgba(201,73,118,.16)} .vacc-main{display:grid;gap:20px;min-width:0;align-content:start} .vacc-panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .vacc-panel-title h2{font-size:1.55rem;margin:7px 0 10px;line-height:1.3} .vacc-panel-title p{font-size:.87rem;max-width:600px} .vacc-icon{width:50px;height:50px;flex:0 0 auto;display:grid;place-items:center;border-radius:18px;background:#FFE1EC;color:#B63666;font-size:1.5rem} .vacc-date-form,.vacc-week-select,.vacc-mother-checklist{background:#FFF8FB;border:1px solid #F5E0E8;padding:18px;border-radius:16px;margin-top:20px} .vacc-date-form label,.vacc-week-select label,.vacc-mother-checklist label{display:block;color:#714556;font-size:.83rem;font-weight:750;margin-bottom:9px} .vacc-date-row{display:flex;gap:10px;align-items:center} .vacc-date-row .input{max-width:250px;min-width:0} .vacc-date-form p,.vacc-mother-checklist p{margin-top:10px} .vacc-stage-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:22px} .vacc-stage{background:#fff;border:1px solid #F3D2DE;color:#93596D;font-weight:750;border-radius:13px;min-height:46px;padding:10px 7px;font-size:.78rem;cursor:pointer;line-height:1.35} .vacc-stage small{font-size:.68rem;color:inherit;display:block;margin-top:2px;font-weight:500} .vacc-stage.selected,.vacc-stage:hover{background:#C84678;color:#fff;border-color:#C84678} .vacc-summary{border-radius:18px;padding:22px;margin-top:22px;background:linear-gradient(135deg,#FFEDF4,#FFF7F9);border:1px solid #F2C4D5} .vacc-summary h3{font-size:1.4rem;margin:10px 0 6px} .vacc-summary p{font-size:.86rem} .vacc-calendar-date{display:block;color:#A13665;font-size:.8rem;font-weight:700;margin-top:10px} .vacc-filter-bar{display:flex;flex-wrap:wrap;gap:8px} .vacc-entries{display:grid;gap:12px} .vacc-entry{background:#fff;border:1px solid #F1DCE3;border-radius:19px;padding:20px;box-shadow:0 8px 32px rgba(136,70,92,.035)} .vacc-entry-head{display:flex;align-items:flex-start;gap:13px} .vacc-entry-icon{background:#FCE7EF;border-radius:15px;width:45px;height:45px;flex:0 0 auto;display:grid;place-items:center;font-size:1.2rem} .vacc-entry h3{font-size:1.04rem;margin:0 0 6px} .vacc-entry p{font-size:.85rem} .vacc-entry-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px} .vacc-pill{background:#FFF2F7;color:#AA456D;border:1px solid #F2D3DE;border-radius:99px;padding:6px 10px;font-size:.7rem;font-weight:750} .vacc-pill.service{background:#FFF7EC;color:#8C5A2C;border-color:#F4E1C6} .vacc-entry-actions{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:15px;padding-top:15px;border-top:1px solid #F4E8ED;flex-wrap:wrap} .vacc-entry-actions a{font-size:.8rem;color:#9A3D62;font-weight:700;text-decoration:underline} .vacc-entry-actions .btn{font-size:.78rem} .vacc-week-value{display:flex;align-items:baseline;gap:8px;color:#9B4667;margin:5px 0 13px} .vacc-week-value strong{font-size:2rem;color:#B63468} .vacc-week-value span{font-size:.8rem;margin-left:auto} .vacc-week-select input[type="range"]{width:100%;accent-color:#C84678} .vacc-week-ticks{display:flex;justify-content:space-between;margin-top:7px;color:#9F7586;font-size:.75rem} .vacc-context-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .vacc-context-grid>div+div{border-left:1px solid #F2DCE6;padding-left:18px} .vacc-context-grid h3{font-size:1.05rem;margin:9px 0} .vacc-context-grid p{font-size:.83rem} .vacc-sources{margin-top:6px} .vacc-sources h3{margin:10px 0} .vacc-sources>p{font-size:.83rem} .vacc-source-links{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0} .vacc-source-links a{font-size:.75rem;padding:10px 13px;border:1px solid #EFBFCE;border-radius:12px;background:#FFF6F9;color:#963B62;font-weight:700} .vacc-source-links a:hover{background:#FBE1EB} @media(max-width:800px){.vacc-stage-list{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:520px){.vacc-stage-list{grid-template-columns:repeat(3,minmax(0,1fr))}.vacc-context-grid{grid-template-columns:1fr}.vacc-context-grid>div+div{border:0;border-top:1px solid #F2DCE6;padding:16px 0 0}.vacc-page-switch{display:grid;grid-template-columns:1fr}.vacc-switch{justify-content:center}.vacc-date-row{flex-wrap:wrap}.vacc-date-row .input{width:100%;max-width:none}.vacc-panel-title h2{font-size:1.32rem}} /* v1.7: indicate the actual age of each interactive care tile */ .baby-age-chip{display:inline-flex;margin:12px 0 0 8px;padding:4px 11px;background:#FFF0F6;border:1px solid #F3D3DF;border-radius:999px;color:#A73C67;font-size:.73rem;font-weight:750;vertical-align:top} .info-card:has(.baby-age-chip){min-height:200px} .info-card:has(.baby-age-chip) h3{margin-top:13px} /* v1.8 - logo chính thức (mẹ và bé), tương phản footer và responsive */ .site-header .header-top{height:104px;gap:22px} .site-header .logo-image-link{display:inline-flex;flex:0 0 auto;align-items:center;line-height:1;margin:0;max-width:100%;text-decoration:none} .site-header .brand-logo-header{display:block;width:244px;max-width:100%;height:auto;object-fit:contain} .site-footer{background:linear-gradient(125deg,#512D42 0%,#68364F 55%,#7A405D 100%);color:#fff} .site-footer p,.site-footer a{color:#FCECF2} .site-footer h3{color:#fff} .site-footer .footer-bottom{border-top-color:rgba(255,255,255,.24);color:#FCE2EB} .site-footer .footer-logo-panel{display:inline-flex;align-items:center;justify-content:center;background:#FFF9FC;border:1px solid #F6DCE7;border-radius:18px;padding:12px 16px;box-shadow:0 8px 28px rgba(38,12,26,.12);margin:0;max-width:100%;vertical-align:top} .site-footer .brand-logo-footer{width:290px;max-width:100%;height:auto;display:block;object-fit:contain} .site-footer .footer-logo-panel:hover{background:#fff;text-decoration:none;box-shadow:0 10px 32px rgba(38,12,26,.18)} .site-footer .footer-grid>div:first-child>p{margin-top:18px} .site-footer .footer-contact-list{color:#FCECF2;margin-top:14px;font-size:.88rem;line-height:1.7} .site-footer .footer-contact-list div{color:#FCECF2} .site-footer .footer-contact-list a{color:#FCECF2;text-decoration:none;border-bottom:1px solid rgba(252,236,242,.45);transition:all .15s} .site-footer .footer-contact-list a:hover{color:#FFFFFF;border-bottom-color:#FFFFFF} @media(max-width:1080px){.site-header .header-top{height:98px;gap:16px}.site-header .brand-logo-header{width:218px}.site-header .site-search{max-width:340px}} @media(max-width:800px){.site-header .header-top{height:88px}.site-header .brand-logo-header{width:206px}.site-header .site-search{display:none}} @media(max-width:520px){.site-header .header-top{height:78px;gap:10px}.site-header .brand-logo-header{width:174px}.site-header .logo-image-link{min-width:0}.site-footer .brand-logo-footer{width:258px}.site-footer .footer-logo-panel{padding:11px 14px}} @media(max-width:355px){.site-header .brand-logo-header{width:158px}} /* v1.10.2 Interactive Policy Links & Diary Cards */ .footer-policy-links{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px} .policy-link-btn{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .policy-link-btn:hover{color:var(--pink-deep)} .diary-memory-card{transition:transform .18s ease,box-shadow .18s ease} .diary-memory-card:hover{transform:translateY(-3px)} /* ======================================================== v1.10.3 Phân trang bài viết chuẩn phong cách Nhật Ký Bé ======================================================== */ .nkb-pagination { margin-top: 36px; margin-bottom: 24px; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; } .nkb-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border-radius: 999px; background: #FFFFFF; border: 1.5px solid #F5D3DF; color: #8B4D68; font-size: 0.92rem; font-weight: 700; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(139, 77, 104, 0.05); } .nkb-pagination .page-numbers:hover { background: #FFF0F5; border-color: #E76F51; color: #E76F51; transform: translateY(-1px); } .nkb-pagination .page-numbers.current { background: linear-gradient(135deg, #E76F51 0%, #F08080 100%); border-color: transparent; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(231, 111, 81, 0.35); cursor: default; } .nkb-pagination .page-numbers.dots { border: none; background: transparent; box-shadow: none; color: #B88397; min-width: 20px; cursor: default; } .nkb-pagination .prev, .nkb-pagination .next { font-weight: 700; padding: 0 18px; } /* ======================================================== v1.10.4 Bộ lọc danh mục tự động (Category Filter Tabs) ======================================================== */ .filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .filters .filter-btn, a.filter-btn, button.filter-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: 999px; background: #FFFFFF; border: 1.5px solid #F5D3DF; color: #8B4D68; font-size: 0.88rem; font-weight: 700; text-decoration: none !important; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; box-shadow: 0 2px 6px rgba(139, 77, 104, 0.04); } .filters .filter-btn:hover, a.filter-btn:hover, button.filter-btn:hover { background: #FFF0F5; border-color: #E76F51; color: #E76F51; transform: translateY(-1px); } .filters .filter-btn.is-active, a.filter-btn.is-active, button.filter-btn.is-active { background: #C84678 !important; border-color: #C84678 !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(200, 70, 120, 0.28); } /* ======================================================== v1.10.5 Khử nhòe & Tối ưu độ sắc nét cho hình ảnh hiển thị ======================================================== */ .feature-visual img, .article-cover img, .feature-card img, .mag-ad-unit img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; transform: translateZ(0); backface-visibility: hidden; } /* ======================================================== v1.10.6 Tự động dùng Logo website làm ảnh thumb fallback ======================================================== */ img.nkb-fallback-logo { object-fit: contain !important; background: #FFF9FB !important; padding: 16px; box-sizing: border-box; } .article-cover img.nkb-fallback-logo { max-height: 220px !important; padding: 24px !important; } /* ======================================================== v1.10.8 Theme Tone Switcher: Nút chuyển bảng màu Vàng & Cam ấm áp (Warm Sun / Honey Amber) ======================================================== */ .btn-theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: #FFF7FA; border: 1.5px solid #F3CFDD; color: #8C395E; border-radius: 999px; padding: 8px 14px; font-size: 0.82rem; font-weight: 750; cursor: pointer; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; line-height: 1.2; } .btn-theme-toggle:hover { background: #FCE8F0; border-color: #E688A8; color: #6C1E43; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(200, 70, 120, 0.16); } .btn-theme-toggle .theme-icon { font-size: 1.05rem; line-height: 1; display: inline-block; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .btn-theme-toggle:hover .theme-icon { transform: rotate(20deg) scale(1.15); } @media(max-width: 600px) { .btn-theme-toggle .theme-label { display: none; } .btn-theme-toggle { padding: 8px 10px; } } /* Biến màu cho Theme Vàng & Cam Ấm Áp (Warm Sun) */ [data-theme="warm-sun"] { --rose: #E07A2A; --rose-dark: #C25E12; --rose-soft: #FEF0E2; --rose-pale: #FFF8F0; --pink: #F5B97A; --ink: #432818; --muted: #785E4F; --line: #F0DFD3; --cream: #FFFDF9; --shadow: 0 14px 42px rgba(90, 50, 20, 0.07); --shadow-hover: 0 18px 46px rgba(180, 80, 20, 0.14); } [data-theme="warm-sun"] body { background: var(--cream); color: var(--ink); } /* Nút chuyển đổi trong Theme Warm Sun */ [data-theme="warm-sun"] .btn-theme-toggle { background: #FFF6EE; border-color: #F8D3B4; color: #A34E14; } [data-theme="warm-sun"] .btn-theme-toggle:hover { background: #FEE7D1; border-color: #E07A2A; color: #7D370A; box-shadow: 0 4px 12px rgba(224, 122, 42, 0.2); } /* Header & Nav */ [data-theme="warm-sun"] .site-header { background: rgba(255, 253, 249, 0.97); border-bottom-color: var(--line); } [data-theme="warm-sun"] .announcement { background: #C25E12 !important; color: #FFFFFF !important; } [data-theme="warm-sun"] .site-search { background: #FFF9F3; border-color: #F0DFD3; color: #E07A2A; } [data-theme="warm-sun"] .site-search input { color: var(--ink); } [data-theme="warm-sun"] .search-submit { background: #FDE3CB; color: #C25E12; } [data-theme="warm-sun"] .search-submit:hover { background: #F8D1AE; } [data-theme="warm-sun"] .main-nav a { color: #6B5546; } [data-theme="warm-sun"] .main-nav a:hover, [data-theme="warm-sun"] .main-nav a.active { color: #C25E12; } [data-theme="warm-sun"] .main-nav a.active:after { background: #E07A2A; } [data-theme="warm-sun"] .nav-note { color: #BD8256; } [data-theme="warm-sun"] .mobile-toggle { background: #FEF0E2; color: #C25E12; } /* Buttons */ [data-theme="warm-sun"] .btn-primary { background: #E07A2A; box-shadow: 0 8px 22px rgba(224, 122, 42, 0.22); } [data-theme="warm-sun"] .btn-primary:hover { background: #C25E12; } [data-theme="warm-sun"] .btn-light { background: #FFFFFF; border-color: #F5D3B8; color: #C25E12; } [data-theme="warm-sun"] .btn-light:hover { background: #FFF6EE; } [data-theme="warm-sun"] .btn-soft { background: #FEF0E2; color: #C25E12; } [data-theme="warm-sun"] .btn-soft:hover { background: #FDE0C7; } [data-theme="warm-sun"] .btn-quiet:hover { background: #FFF8F0; } /* Surfaces */ [data-theme="warm-sun"] .surface-pink { background: linear-gradient(180deg, #FFF6EE 0%, #FFFDF9 100%); } [data-theme="warm-sun"] .surface-cream { background: #FFFDF9; } [data-theme="warm-sun"] .surface-soft { background: #FFF6EE; } /* Cards & Articles */ [data-theme="warm-sun"] .article-card, [data-theme="warm-sun"] .card { border-color: #F0DFD3; } [data-theme="warm-sun"] .article-card:hover, [data-theme="warm-sun"] .card:hover { border-color: #F8D1AE; box-shadow: 0 16px 40px rgba(180, 80, 20, 0.09); } [data-theme="warm-sun"] .article-tag, [data-theme="warm-sun"] .category-badge, [data-theme="warm-sun"] .badge { background: #FEF0E2; color: #C25E12; } [data-theme="warm-sun"] .article-meta, [data-theme="warm-sun"] .card-meta { color: #8C6F5E; } [data-theme="warm-sun"] .more-link { color: #C25E12; } /* Sapo Box */ [data-theme="warm-sun"] .nkb-post-sapo { background: linear-gradient(135deg, #FFFBF5 0%, #FEF4EA 100%); border: 1px solid #FCE5D0; border-left: 4px solid #E07A2A; color: #432818; } [data-theme="warm-sun"] .nkb-post-sapo:before { color: #E07A2A; } /* CTA Box */ [data-theme="warm-sun"] .nkb-cta-box { background: linear-gradient(135deg, #FFFBF5 0%, #FEF3E8 100%); border-color: #FCE0C6; } [data-theme="warm-sun"] .nkb-cta-icon { color: #E07A2A; } [data-theme="warm-sun"] .nkb-cta-title { color: #C25E12; } [data-theme="warm-sun"] .nkb-cta-desc { color: #6B5546; } [data-theme="warm-sun"] .nkb-cta-btn { background: #E07A2A; box-shadow: 0 4px 14px rgba(224, 122, 42, 0.25); } [data-theme="warm-sun"] .nkb-cta-btn:hover { background: #C25E12; } /* Disclaimer Box */ [data-theme="warm-sun"] .nkb-disclaimer-box { background: #FFFBF5; border-color: #FCD8B3; color: #875529; } [data-theme="warm-sun"] .nkb-disclaimer-title { color: #A64700; } /* TOC (Table of Contents) */ [data-theme="warm-sun"] .post-toc { background: #FFFBF6; border-color: #F5E3D3; } [data-theme="warm-sun"] .toc-header { color: #C25E12; } [data-theme="warm-sun"] .post-toc a { color: #6B5546; } [data-theme="warm-sun"] .post-toc a:hover, [data-theme="warm-sun"] .post-toc a.active { color: #E07A2A; } /* Pagination & Filters */ [data-theme="warm-sun"] .nkb-pagination .page-numbers.current { background: #E07A2A !important; border-color: #E07A2A !important; box-shadow: 0 4px 12px rgba(224, 122, 42, 0.3) !important; color: #FFFFFF !important; } [data-theme="warm-sun"] .nkb-pagination .page-numbers:hover:not(.dots):not(.current) { background: #FFF6EE; border-color: #E07A2A; color: #E07A2A; } [data-theme="warm-sun"] .filters .filter-btn.is-active, [data-theme="warm-sun"] a.filter-btn.is-active, [data-theme="warm-sun"] button.filter-btn.is-active { background: #E07A2A !important; border-color: #E07A2A !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(224, 122, 42, 0.28) !important; } [data-theme="warm-sun"] .filters .filter-btn:hover, [data-theme="warm-sun"] a.filter-btn:hover, [data-theme="warm-sun"] button.filter-btn:hover { background: #FFF6EE; border-color: #E07A2A; color: #E07A2A; } /* Footer Warm Sun (Cam Ấm Áp) */ [data-theme="warm-sun"] .site-footer { background: linear-gradient(125deg, #C24D00 0%, #D95D0F 40%, #E6721E 80%, #F07E26 100%); color: #FFFFFF; } [data-theme="warm-sun"] .site-footer p, [data-theme="warm-sun"] .site-footer a { color: #FFF2E8; } [data-theme="warm-sun"] .site-footer h3 { color: #FFFFFF; } [data-theme="warm-sun"] .site-footer .footer-bottom { border-top-color: rgba(255, 255, 255, 0.28); color: #FFE6D5; } [data-theme="warm-sun"] .site-footer .footer-logo-panel { background: #FFFFFF; border-color: #FCD5B5; box-shadow: 0 8px 28px rgba(120, 45, 0, 0.18); } [data-theme="warm-sun"] .site-footer .footer-contact-list { color: #FFF2E8; } [data-theme="warm-sun"] .site-footer .footer-contact-list div { color: #FFF2E8; } [data-theme="warm-sun"] .site-footer .footer-contact-list a { color: #FFF2E8; border-bottom-color: rgba(255, 242, 232, 0.5); } [data-theme="warm-sun"] .site-footer .footer-contact-list a:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; } /* Thanh kéo & Bộ đếm tuần thai sang màu Cam (Warm Sun) */ [data-theme="warm-sun"] input[type="range"], [data-theme="warm-sun"] .mag-week-control input, [data-theme="warm-sun"] .mag-week-slider input[type="range"], [data-theme="warm-sun"] .vacc-week-select input[type="range"] { accent-color: #E07A2A !important; } [data-theme="warm-sun"] input[type="range"]:focus-visible, [data-theme="warm-sun"] .mag-week-slider input[type="range"]:focus-visible { outline-color: #E07A2A !important; } [data-theme="warm-sun"] .mag-week-label span { color: #E07A2A !important; } [data-theme="warm-sun"] .mag-week-control strong, [data-theme="warm-sun"] .mag-week-control .mag-week-counter { background: #FEF0E2 !important; border-color: #F8D3B4 !important; color: #C25E12 !important; } [data-theme="warm-sun"] .mag-week-marks { color: #9C7863 !important; } /* Magazine & Trang chủ components */ [data-theme="warm-sun"] .mag-issue-kicker, [data-theme="warm-sun"] .mag-eyebrow, [data-theme="warm-sun"] .mag-issue-heading h1 em, [data-theme="warm-sun"] .mag-read, [data-theme="warm-sun"] .mag-more { color: #E07A2A; } [data-theme="warm-sun"] .mag-issue-heading h1 { color: #432818; } [data-theme="warm-sun"] .mag-lead-primary { background: linear-gradient(120deg, #FEF2E6 0%, #FFFDF9 68%); border-color: #F2DEC8; box-shadow: 0 13px 36px rgba(180, 80, 20, 0.08); } [data-theme="warm-sun"] .mag-story-tag { color: #C25E12; border-color: #F3DEC8; } [data-theme="warm-sun"] .mag-feature-mini { background: #FFF8F0; border-color: #F1DFCE; } [data-theme="warm-sun"] .mag-filters button:hover, [data-theme="warm-sun"] .mag-filters button.is-active { background: #E07A2A !important; border-color: #E07A2A !important; color: #FFFFFF !important; } [data-theme="warm-sun"] .mag-side-panel { border-color: #F0DFD3; } [data-theme="warm-sun"] .mag-side-panel > a > span:first-child, [data-theme="warm-sun"] .mag-side-panel > a > span:last-child { color: #E07A2A; } /* ======================================================== v1.10.9 Chuẩn hóa Căn lề Hình ảnh & Chú thích WordPress (Align Center/Left/Right & WP Caption) ======================================================== */ .aligncenter, div.aligncenter, figure.aligncenter, img.aligncenter, .wp-caption.aligncenter, .wp-block-image.aligncenter, .prose .aligncenter, .prose img.aligncenter { display: block !important; margin-left: auto !important; margin-right: auto !important; clear: both; text-align: center; } .aligncenter > img, .aligncenter img, .wp-caption.aligncenter img { display: block !important; margin-left: auto !important; margin-right: auto !important; } .alignleft, div.alignleft, figure.alignleft, img.alignleft, .wp-caption.alignleft, .wp-block-image.alignleft, .prose .alignleft, .prose img.alignleft { float: left; margin: 10px 24px 20px 0 !important; clear: left; } .alignright, div.alignright, figure.alignright, img.alignright, .wp-caption.alignright, .wp-block-image.alignright, .prose .alignright, .prose img.alignright { float: right; margin: 10px 0 20px 24px !important; clear: right; } .alignnone, div.alignnone, figure.alignnone, img.alignnone, .wp-caption.alignnone, .wp-block-image.alignnone, .prose .alignnone, .prose img.alignnone { display: block; margin: 18px 0; clear: both; } /* Khung chú thích ảnh (WordPress Caption Box) */ .wp-caption, figure.wp-caption, .wp-block-image { max-width: 100% !important; margin-top: 20px; margin-bottom: 24px; padding: 10px 10px 12px 10px; background: #FFF9FB; border: 1px solid #F5DDE7; border-radius: 16px; box-sizing: border-box; transition: all 0.2s ease; } .wp-caption:hover, figure.wp-caption:hover { border-color: #EDBCCF; box-shadow: 0 8px 24px rgba(200, 70, 120, 0.08); } .wp-caption img, figure.wp-caption img, .prose .wp-caption img { display: block; margin: 0 auto !important; max-width: 100% !important; height: auto !important; border-radius: 12px; } /* Dòng chữ chú thích bên dưới ảnh */ .wp-caption-text, figcaption, .wp-block-image figcaption { text-align: center !important; font-size: 0.88rem !important; color: #7A5B69 !important; font-style: italic; font-weight: 500; margin: 10px 0 2px 0 !important; line-height: 1.55; } /* Tương thích chế độ Tông Vàng & Cam Ấm Áp (Warm Sun) */ [data-theme="warm-sun"] .wp-caption, [data-theme="warm-sun"] figure.wp-caption { background: #FFFBF6; border-color: #F8DFCD; } [data-theme="warm-sun"] .wp-caption:hover, [data-theme="warm-sun"] figure.wp-caption:hover { border-color: #F5C596; box-shadow: 0 8px 24px rgba(224, 122, 42, 0.1); } [data-theme="warm-sun"] .wp-caption-text, [data-theme="warm-sun"] figcaption { color: #8C6A56 !important; } /* Tự động co giãn 100% trên màn hình nhỏ */ @media(max-width: 768px) { .alignleft, .alignright { float: none !important; margin: 16px auto !important; display: block !important; } .wp-caption { width: 100% !important; } } /* ======================================================== v1.10.10 Tối ưu hiển thị nội dung chuyên sâu (.prose) & Khối Bài viết liên quan ======================================================== */ .prose a:not(.btn):not(.nkb-cta-btn) { color: var(--rose-dark); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(200, 70, 120, 0.35); text-underline-offset: 3px; transition: all 0.15s ease; } .prose a:not(.btn):not(.nkb-cta-btn):hover { color: var(--rose); text-decoration-color: var(--rose); } [data-theme="warm-sun"] .prose a:not(.btn):not(.nkb-cta-btn) { color: #C25E12; text-decoration-color: rgba(224, 122, 42, 0.4); } [data-theme="warm-sun"] .prose a:not(.btn):not(.nkb-cta-btn):hover { color: #E07A2A; text-decoration-color: #E07A2A; } .prose ul, .prose ol { margin: 14px 0 20px 0; padding-left: 24px; color: var(--ink); } .prose li { margin-bottom: 9px; line-height: 1.75; font-size: 1rem; } .prose li strong { color: var(--rose-dark); } [data-theme="warm-sun"] .prose li strong { color: #B45309; } .prose table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 0.94rem; background: #FFFFFF; border: 1px solid #F3DCE4; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 16px rgba(91, 42, 62, 0.04); } .prose thead th { background: #FDECF2; color: #8F2450; font-weight: 750; text-align: left; padding: 12px 15px; border-bottom: 1.5px solid #F3C8D8; } .prose tbody td { padding: 11px 15px; border-bottom: 1px solid #F8EAF0; color: #492A37; line-height: 1.6; vertical-align: top; } .prose tbody tr:last-child td { border-bottom: 0; } .prose tbody tr:nth-child(even) { background: #FFF9FB; } [data-theme="warm-sun"] .prose table { border-color: #F4DFCE; } [data-theme="warm-sun"] .prose thead th { background: #FEF0E2; color: #B45309; border-bottom-color: #F7D1AF; } [data-theme="warm-sun"] .prose tbody td { border-bottom-color: #FAF0E6; color: #432818; } [data-theme="warm-sun"] .prose tbody tr:nth-child(even) { background: #FFFBF6; } .prose blockquote, .nkb-callout-tip { margin: 20px 0; padding: 14px 18px; background: #FFF6FA; border-left: 4px solid var(--rose); border-radius: 12px; color: #5C3344; font-size: 0.96rem; line-height: 1.7; } [data-theme="warm-sun"] .prose blockquote, [data-theme="warm-sun"] .nkb-callout-tip { background: #FFF9F2; border-left-color: #E07A2A; color: #5E3A1E; } /* Khối Bài viết liên quan cuối bài */ .nkb-related-posts { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); } .nkb-related-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .nkb-related-head h3 { font-size: 1.25rem; color: var(--ink); margin: 0; } .nkb-related-more { font-size: 0.86rem; font-weight: 700; color: var(--rose-dark); } .nkb-related-more:hover { text-decoration: underline; } .nkb-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .nkb-related-card { display: flex; gap: 13px; align-items: center; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; padding: 11px; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .nkb-related-card:hover { transform: translateY(-2px); border-color: var(--pink); box-shadow: 0 10px 26px rgba(121, 44, 74, 0.09); } .nkb-related-thumb { width: 96px; height: 72px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: var(--rose-pale); } .nkb-related-thumb img { width: 100%; height: 100%; object-fit: cover; } .nkb-related-body { min-width: 0; } .nkb-related-body h4 { font-size: 0.92rem; line-height: 1.4; color: var(--ink); margin: 0 0 5px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nkb-related-card:hover .nkb-related-body h4 { color: var(--rose-dark); } .nkb-related-date { font-size: 0.76rem; color: var(--muted); } @media(max-width: 640px) { .nkb-related-grid { grid-template-columns: 1fr; } } /* ===== E-E-A-T Author & Medical Reviewer Box ===== */ .nkb-eeat-box { display: flex; gap: 16px; align-items: flex-start; background: #FFF9FB; border: 1px solid #F3D5E2; border-radius: 16px; padding: 18px 20px; margin: 18px 0 22px; } .nkb-eeat-avatar { width: 48px; height: 48px; border-radius: 14px; background: #FDEAF2; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .nkb-eeat-info { flex: 1; min-width: 0; } .nkb-eeat-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; } .nkb-eeat-badge { display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 700; color: #166534; background: #DCFCE7; padding: 3px 10px; border-radius: 999px; } .nkb-eeat-date { font-size: 0.8rem; color: var(--muted); } .nkb-eeat-title { margin: 0 0 6px; font-size: 0.94rem; color: var(--ink); } .nkb-eeat-desc { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); } .nkb-eeat-link { background: none; border: none; padding: 0; font: inherit; color: var(--rose-dark); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } [data-theme="warm-sun"] .nkb-eeat-box { background: #FFF8F0; border-color: #F0DFD3; } [data-theme="warm-sun"] .nkb-eeat-avatar { background: #FEF0E2; } @media(max-width: 560px) { .nkb-eeat-box { flex-direction: column; gap: 12px; } } /* ============================================================ WARM SUN - COMPLETE COMPONENT OVERRIDES ============================================================ */ [data-theme="warm-sun"] .logo-mark { background: linear-gradient(140deg, #FEEBD6, #F6C594); color: var(--rose-dark); } [data-theme="warm-sun"] .logo small { color: #8C6F5E; } [data-theme="warm-sun"] .icon-tile { background: #FEF0E2; } [data-theme="warm-sun"] .hero { background: linear-gradient(115deg, #FFF8F0, #FEEBD6 67%, #FEF0E2); border-color: #F0DFD3; box-shadow: 0 19px 55px rgba(180, 80, 20, 0.08); } [data-theme="warm-sun"] .quote-panel { background: linear-gradient(115deg, #FFF8F0, #FEEBD6 67%, #FEF0E2); border-color: #F2D8C2; } [data-theme="warm-sun"] .polaroid { border-color: #F2D8C2; } [data-theme="warm-sun"] .diary-box { background: linear-gradient(145deg, #FFF8F0, #FDE8D3); border-color: #F2D8C2; } [data-theme="warm-sun"] .timeline-mini > div:before { color: var(--rose); background: #FFF8F0; } [data-theme="warm-sun"] .phase-card.is-active { border-color: #E07A2A; background: #FFF6EE; box-shadow: inset 0 0 0 1px #E07A2A; } [data-theme="warm-sun"] .dashboard-side .profile-box { background: var(--rose-pale); } [data-theme="warm-sun"] .dashboard-side a.active, [data-theme="warm-sun"] .dashboard-side a:hover { background: var(--rose-soft); color: var(--rose-dark); } [data-theme="warm-sun"] .date-cell { border-color: var(--line); } [data-theme="warm-sun"] .date-cell.today { border-color: var(--rose); } [data-theme="warm-sun"] .date-tag:not(.completed) { background: var(--rose-pale); color: var(--rose-dark); } [data-theme="warm-sun"] .dashboard-hero { background: linear-gradient(115deg, #FEEBD6, #FFF8F0); border-color: #F2D8C2; } [data-theme="warm-sun"] .mini-chart { background: #F8DFC8; } [data-theme="warm-sun"] .mini-chart div { background: #E07A2A; } [data-theme="warm-sun"] .journal-pic { background: #FFF6EE; } [data-theme="warm-sun"] .choice-card.selected { border-color: var(--rose); background: #FFF6EE; box-shadow: inset 0 0 0 1px var(--rose); } [data-theme="warm-sun"] .faq-list details { border-bottom-color: #F0DFD3; } [data-theme="warm-sun"] .modal-close { background: #FEF0E2; color: var(--rose-dark); } [data-theme="warm-sun"] .toast { background: #432818; } [data-theme="warm-sun"] .kbd { background: #FEF0E2; color: var(--rose-dark); } [data-theme="warm-sun"] :focus-visible { outline-color: #E07A2A; } [data-theme="warm-sun"] .chip:not(.chip-green):not(.chip-peach) { border-color: #F2D8C2 !important; background: #FEF0E2 !important; color: #C25E12 !important; } [data-theme="warm-sun"] .calendar-note { border-color: #F2D8C2; background: #FFF8F0; color: #785E4F; } [data-theme="warm-sun"] .calendar-note strong { color: #A34E14; } [data-theme="warm-sun"] .article-cover > div { background: #FFF8F0 !important; border-color: #F0DFD3 !important; } [data-theme="warm-sun"] .nkb-article-sapo { background: #FFF8F0 !important; border-left-color: #E07A2A !important; color: #432818 !important; box-shadow: 0 3px 12px rgba(224, 122, 42, 0.06) !important; } [data-theme="warm-sun"] .nkb-toc-box { background: #FFF8F0 !important; border-color: #F2D8C2 !important; } [data-theme="warm-sun"] .nkb-toc-box summary { color: #A34E14 !important; } [data-theme="warm-sun"] .nkb-toc-box nav a { color: #6B5546 !important; } [data-theme="warm-sun"] .nkb-toc-box nav a:hover { color: #C25E12 !important; } [data-theme="warm-sun"] .nkb-toc-box nav a span { color: #E07A2A !important; } [data-theme="warm-sun"] .nkb-article-cta-card { background: linear-gradient(135deg, #FFF0E2 0%, #FFF8F0 100%) !important; border-color: #F5CBA7 !important; } [data-theme="warm-sun"] .nkb-article-cta-card .nkb-cta-title { color: #A34E14 !important; } [data-theme="warm-sun"] .nkb-article-cta-card p { color: #785E4F !important; } [data-theme="warm-sun"] .nkb-article-cta-card a { background: #E07A2A !important; color: #FFFFFF !important; } [data-theme="warm-sun"] .nkb-article-cta-card a:hover { background: #C25E12 !important; } [data-theme="warm-sun"] .card[style*="FFF3F7"] { background: #FFF8F0 !important; } [data-theme="warm-sun"] .milestone-pill, [data-theme="warm-sun"] body[data-page="C02"] .pregnancy-stage-buttons .milestone-pill, [data-theme="warm-sun"] body[data-page="C03"] .pregnancy-stage-buttons .milestone-pill { border-color: #F0DFD3; color: #785E4F; } [data-theme="warm-sun"] .milestone-pill:hover, [data-theme="warm-sun"] .milestone-pill.is-active, [data-theme="warm-sun"] body[data-page="C02"] .pregnancy-stage-buttons .milestone-pill.is-active, [data-theme="warm-sun"] body[data-page="C03"] .pregnancy-stage-buttons .milestone-pill.is-active { background: #E07A2A; color: #FFFFFF; border-color: #E07A2A; box-shadow: 0 8px 16px rgba(224, 122, 42, 0.2); } [data-theme="warm-sun"] .pregnancy-milestones { background: #FFF8F0 !important; border-color: #F0DFD3 !important; } [data-theme="warm-sun"] .pregnancy-version-tag { background: #FFF6EE !important; border-color: #F3D4B8 !important; color: #C25E12 !important; } [data-theme="warm-sun"] .pregnancy-card-badge, [data-theme="warm-sun"] .pregnancy-dynamic-card .pregnancy-card-badge { background: #FEF0E2 !important; border-color: #F3D4B8 !important; color: #C25E12 !important; } [data-theme="warm-sun"] .pregnancy-visual-frame { background: linear-gradient(145deg, #FFFDF9, #FFF6EE) !important; border-color: #F0DFD3 !important; } [data-theme="warm-sun"] .fact-box { background: #FFF8F0 !important; border-color: #F0DFD3 !important; } [data-theme="warm-sun"] .progress-track { background: #F9E5D2 !important; } [data-theme="warm-sun"] .progress-track > div { background: linear-gradient(90deg, #E07A2A, #F39B4B) !important; } [data-theme="warm-sun"] .week-btn { border-color: #F0DFD3; } [data-theme="warm-sun"] .week-btn:hover { border-color: #E07A2A; background: #FFF6EE; color: #C25E12; } [data-theme="warm-sun"] .week-btn.selected { background: #E07A2A; border-color: #E07A2A; color: #FFFFFF; } [data-theme="warm-sun"] .icon-tile { background: #FEF0E2; } [data-theme="warm-sun"] .pregnancy-thumb img { background: #FFF6EE; } [data-theme="warm-sun"] body[data-page="C02"] .pregnancy-dynamic-disclaimer { color: #785E4F; } [data-theme="warm-sun"] .context-note { background: #FFF8F0; border-color: #F0DFD3; color: #785E4F; } [data-theme="warm-sun"] .vacc-switch:not(.active) { border-color: #F0D9C8; color: #8A5836; background: #FFFFFF; } [data-theme="warm-sun"] .vacc-switch.active, [data-theme="warm-sun"] .vacc-switch:hover, [data-theme="warm-sun"] .vacc-stage.selected, [data-theme="warm-sun"] .vacc-stage:hover { background: #E07A2A; color: #FFFFFF; border-color: #E07A2A; box-shadow: 0 8px 24px rgba(224, 122, 42, 0.2); } [data-theme="warm-sun"] .vacc-stage:not(.selected) { border-color: #F0D9C8; color: #8A5836; } [data-theme="warm-sun"] .vacc-icon, [data-theme="warm-sun"] .vacc-entry-icon { background: #FDE9D7; color: #C25E12; } [data-theme="warm-sun"] .vacc-date-form, [data-theme="warm-sun"] .vacc-week-select, [data-theme="warm-sun"] .vacc-mother-checklist { background: #FFF9F3; border-color: #F2DFCE; } [data-theme="warm-sun"] .vacc-date-form label, [data-theme="warm-sun"] .vacc-week-select label, [data-theme="warm-sun"] .vacc-mother-checklist label { color: #78523A; } [data-theme="warm-sun"] .vacc-summary { background: linear-gradient(135deg, #FFF1E3, #FFF9F4); border-color: #F2D5BD; } [data-theme="warm-sun"] .vacc-calendar-date, [data-theme="warm-sun"] .vacc-entry-actions a { color: #C25E12; } [data-theme="warm-sun"] .vacc-entry { border-color: #F0DFD3; } [data-theme="warm-sun"] .vacc-entry-actions { border-top-color: #F2E4D9; } [data-theme="warm-sun"] .vacc-week-value { color: #8A5836; } [data-theme="warm-sun"] .vacc-week-value strong { color: #D6691A; } [data-theme="warm-sun"] .vacc-week-ticks { color: #997A66; } [data-theme="warm-sun"] .vacc-context-grid > div + div { border-left-color: #F0DFD3; } [data-theme="warm-sun"] .vacc-source-links a { border-color: #F0D4BC; background: #FFF7EF; color: #B5550E; } [data-theme="warm-sun"] .vacc-source-links a:hover { background: #FDE9D7; } [data-theme="warm-sun"] .vacc-week-select input[type="range"] { accent-color: #E07A2A; } [data-theme="warm-sun"] .vacc-pill:not(.service):not(.chip-green) { background: #FEF0E2; color: #C25E12; border-color: #F2D8C2; } [data-theme="warm-sun"] .baby-age-chip { background: #FEF0E2; border-color: #F2D8C2; color: #C25E12; } [data-theme="warm-sun"] .tabs { background: #FFF6EE; } [data-theme="warm-sun"] .tabs button { color: #785E4F; } [data-theme="warm-sun"] .step-progress span { background: #F5DFCC; } [data-theme="warm-sun"] .avatar { background: #FEF0E2; color: var(--rose-dark); } [data-theme="warm-sun"] .reply p { color: #6B5546; } [data-theme="warm-sun"] .form-note { color: #785E4F; } [data-theme="warm-sun"] .wp-caption:hover, [data-theme="warm-sun"] figure.wp-caption:hover { border-color: #F5CBA7; box-shadow: 0 8px 24px rgba(224, 122, 42, 0.1); } [data-theme="warm-sun"] .prose table { border-color: #F0DFD3; box-shadow: 0 4px 16px rgba(90, 50, 20, 0.04); } [data-theme="warm-sun"] .prose tbody td { border-bottom-color: #F5E8DC; color: #432818; } [data-theme="warm-sun"] .nkb-related-card:hover { border-color: var(--pink); box-shadow: 0 10px 26px rgba(180, 80, 20, 0.09); } [data-theme="warm-sun"] .nkb-pagination .page-numbers.dots { color: #BD8256; } [data-theme="warm-sun"] .nkb-pagination .page-numbers:not(.dots):not(.current) { border-color: #F0DFD3; color: #785E4F; box-shadow: 0 2px 6px rgba(180, 80, 20, 0.06); } [data-theme="warm-sun"] .nkb-pagination + div[style*="8B4D68"] { color: #785E4F !important; } [data-theme="warm-sun"] .article-meta[style*="8B4D68"] { border-top-color: #F0DFD3 !important; color: #8C6F5E !important; } [data-theme="warm-sun"] .page-intro { background: linear-gradient(150deg, #FFF6EE, #FFFDF9); } [data-theme="warm-sun"] .filters .filter-btn:not(.is-active), [data-theme="warm-sun"] a.filter-btn:not(.is-active), [data-theme="warm-sun"] button.filter-btn:not(.is-active) { border-color: #F0DFD3; color: #785E4F; box-shadow: 0 2px 6px rgba(180, 80, 20, 0.05); } [data-theme="warm-sun"] .feature-visual { background: #FFF8F0 !important; border-bottom-color: #F0DFD3 !important; } [data-theme="warm-sun"] img.nkb-fallback-logo { background: #FFF8F0 !important; } [data-theme="warm-sun"] .vertical-timeline { border-left-color: #F2D8C2; } [data-theme="warm-sun"] .time-event:before { background: #E07A2A; border-color: #FFF8F0; } [data-theme="warm-sun"] .checklist div:before { color: #C25E12; background: #FEF0E2; } [data-theme="warm-sun"] .card[style*="FFF6F9"] { background: linear-gradient(145deg, #FFF8F0 0%, #FFFFFF 100%) !important; border-color: #F0DFD3 !important; } [data-theme="warm-sun"] .icon-tile[style*="FDE6EE"] { background: #FEF0E2 !important; } [data-theme="warm-sun"] .grid[style*="F2CCD9"] { border-top-color: #F0DFD3 !important; } [data-theme="warm-sun"] #replySection { background: #FFF8F0 !important; } [data-theme="warm-sun"] .diary-card-photo { background: #FFF8F0 !important; } /* ============================================================ C04: Lịch khám thai nâng cấp (Pink Pastel + Warm Sun) ============================================================ */ .kham-calc-card { background: linear-gradient(135deg, var(--rose-pale) 0%, #FFFFFF 100%); border: 1px solid var(--line); } .kham-calc-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-top: 14px; } .kham-calc-field { flex: 1 1 220px; display: grid; gap: 6px; } .kham-calc-field label { font-size: 0.82rem; font-weight: 750; color: var(--ink); } .kham-calc-status { margin-top: 14px; padding: 12px 15px; border-radius: 14px; background: var(--rose-soft); color: var(--rose-dark); font-size: 0.86rem; font-weight: 650; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .kham-tcn-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; } .kham-tcn-tab { border: 1px solid var(--line); background: #FFFFFF; color: var(--muted); border-radius: 999px; padding: 7px 14px; font-size: 0.8rem; font-weight: 750; transition: all 0.15s ease; } .kham-tcn-tab:hover { border-color: var(--rose); color: var(--rose-dark); background: var(--rose-pale); } .kham-tcn-tab.is-active { background: var(--rose); border-color: var(--rose); color: #FFFFFF; } .kham-meta-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .kham-date-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 0.74rem; font-weight: 750; background: var(--rose-pale); color: var(--rose-dark); border: 1px solid var(--line); } .kham-date-badge.is-upcoming { background: var(--rose); color: #FFFFFF; border-color: var(--rose); } .kham-date-badge.is-past { background: #F4F1EF; color: #7A706B; border-color: #E4DFDC; } .kham-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .kham-detail-box { padding: 12px 14px; border-radius: 13px; background: var(--rose-pale); border: 1px solid var(--line); font-size: 0.82rem; line-height: 1.55; } .kham-detail-box strong { display: block; font-size: 0.78rem; color: var(--rose-dark); margin-bottom: 4px; } .kham-detail-box ul { margin: 4px 0 0; padding-left: 16px; color: var(--muted); } .kham-detail-box .more-link { white-space: normal; overflow-wrap: anywhere; display: inline; line-height: 1.5; } .kham-event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; } .kham-tabs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 4px; } .kham-tabs-bar .kham-tcn-tabs { margin: 0; } .kham-milestone-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; color: inherit; cursor: pointer; } .kham-milestone-head:hover h3 { color: var(--rose-dark); } .kham-chevron { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--rose-pale); border: 1px solid var(--line); color: var(--rose-dark); font-size: 0.85rem; font-weight: 800; transition: transform 0.2s ease, background 0.15s ease; margin-top: 2px; } .kham-milestone.is-open .kham-chevron { transform: rotate(180deg); background: var(--rose-soft); } .kham-milestone-body { margin-top: 6px; } .kham-milestone:not(.is-open) .kham-milestone-body { display: none; } .kham-milestone:not(.is-open) { padding-bottom: 18px; } @media print { .kham-milestone-body { display: block !important; } .kham-chevron, #khamToggleAllBtn { display: none !important; } } /* ============================================================ C05: Dinh dưỡng mẹ bầu nâng cấp (Pink Pastel + Warm Sun) ============================================================ */ .nutri-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; } .nutri-micro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .nutri-micro-card { padding: 14px 16px; border-radius: 15px; background: var(--rose-pale); border: 1px solid var(--line); } .nutri-micro-card strong { display: block; color: var(--rose-dark); font-size: 0.9rem; margin-bottom: 4px; } .nutri-micro-card small { display: block; color: var(--ink); font-weight: 700; font-size: 0.8rem; margin-bottom: 4px; } .nutri-micro-card p { font-size: 0.8rem; line-height: 1.5; } .nutri-water-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--rose-pale); border: 1px solid var(--line); margin-top: 14px; } .nutri-water-cups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .nutri-cup { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: #FFFFFF; display: grid; place-items: center; font-size: 0.95rem; cursor: pointer; transition: all 0.15s ease; } .nutri-cup.is-filled { background: var(--rose); border-color: var(--rose); color: #FFFFFF; } .nutri-safety-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; } .nutri-safety-col { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: #FFFFFF; } .nutri-safety-col.is-good { background: #F4FAF6; border-color: #D2E8D8; } .nutri-safety-col.is-good h4 { color: #236B43; } .nutri-safety-col.is-avoid { background: #FFF5F8; border-color: #F5C6D6; } .nutri-safety-col.is-avoid h4 { color: #A92D5B; } [data-theme="warm-sun"] .nutri-safety-col.is-avoid { background: #FFF9F2; border-color: #F5D5B8; } [data-theme="warm-sun"] .nutri-safety-col.is-avoid h4 { color: #B4480E; } .nutri-safety-col ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.83rem; color: var(--muted); } @media (max-width: 720px) { .nutri-controls, .nutri-micro-grid, .nutri-safety-grid { grid-template-columns: 1fr; } } .nutri-portion-line { font-size: 0.8rem; color: var(--ink); margin: 4px 0 6px; font-weight: 600; } .nutri-macro-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .nutri-macro-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 750; background: var(--rose-pale); color: var(--rose-dark); border: 1px solid var(--line); } .nutri-macro-pill.is-kcal { background: var(--rose-soft); } .nutri-day-summary { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--rose-pale); border: 1px solid var(--line); display: grid; gap: 8px; } .nutri-day-summary-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.86rem; font-weight: 800; color: var(--rose-dark); } .nutri-day-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .nutri-sum-cell { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; text-align: center; } .nutri-sum-cell b { display: block; font-size: 0.95rem; color: var(--ink); } .nutri-sum-cell span { font-size: 0.72rem; color: var(--muted); } @media (max-width: 600px) { .nutri-day-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .nutri-roll-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--rose-pale); border: 1px dashed var(--line); } .nutri-roll-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .nutri-roll-bar .small { font-weight: 650; color: var(--rose-dark); } .preg-calc-bar { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(170px, 1fr) auto; align-items: end; gap: 10px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: var(--rose-pale); border: 1px solid var(--line); } .preg-calc-bar .field { min-width: 0; margin: 0; } .preg-calc-bar label { font-size: 0.74rem; margin-bottom: 4px; } .preg-calc-result { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: #FFFFFF; border: 1px solid var(--line); color: var(--rose-dark); font-size: 0.82rem; font-weight: 700; justify-self: start; } .preg-calc-result:empty { display: none; } @media (max-width: 720px) { .preg-calc-bar { grid-template-columns: 1fr; } } .nkb-back-to-top { position: fixed; right: 22px; bottom: 24px; z-index: 140; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: var(--rose); color: #FFFFFF; font-size: 1.2rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease; } .nkb-back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .nkb-back-to-top:hover { background: var(--rose-dark); transform: translateY(-2px); } [data-theme="warm-sun"] .nkb-back-to-top { background: #E07A2A; } [data-theme="warm-sun"] .nkb-back-to-top:hover { background: #C25E12; } .nutri-phase-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; margin-bottom: 18px; border-radius: 14px; background: var(--rose-pale); border: 1px solid var(--line); } .nutri-phase-tab { border: 0; border-radius: 10px; padding: 9px 15px; background: transparent; color: var(--muted); font-size: 0.84rem; font-weight: 740; line-height: 1.25; transition: all 0.18s ease; } .nutri-phase-tab:hover { color: var(--rose-dark); background: rgba(255, 255, 255, 0.7); } .nutri-phase-tab.is-active { background: var(--rose); color: #FFFFFF; box-shadow: 0 4px 12px rgba(200, 70, 120, 0.18); } [data-theme="warm-sun"] .nutri-phase-tabs { background: #FFF6EE; border-color: #F0DFD3; } [data-theme="warm-sun"] .nutri-phase-tab { color: #785E4F; } [data-theme="warm-sun"] .nutri-phase-tab:hover { color: #C25E12; background: #FFFFFF; } [data-theme="warm-sun"] .nutri-phase-tab.is-active { background: #E07A2A; color: #FFFFFF; box-shadow: 0 4px 12px rgba(224, 122, 42, 0.22); } .preg-fruit-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: var(--rose-soft); color: var(--rose-dark); font-size: 0.82rem; font-weight: 700; } .preg-trimester-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .preg-tri-card { padding: 14px; border-radius: 14px; background: var(--rose-pale); border: 1px solid var(--line); transition: border-color 0.2s, box-shadow 0.2s; } .preg-tri-card.is-active { border-color: var(--rose); box-shadow: 0 0 0 2px var(--rose-soft); } .preg-tri-card h4 { font-size: 0.94rem; color: var(--rose-dark); margin: 6px 0; } .preg-tri-card ul { margin: 8px 0 0; padding-left: 16px; font-size: 0.8rem; color: var(--muted); line-height: 1.55; } .preg-table-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; } .preg-growth-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .preg-growth-table th, .preg-growth-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; } .preg-growth-table th { background: var(--rose-pale); color: var(--rose-dark); font-weight: 750; } .preg-growth-table tr.is-current { background: var(--rose-soft); font-weight: 750; } @media (max-width: 780px) { .preg-trimester-grid { grid-template-columns: 1fr; } } .week-grid-legend { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; } .week-btn { position: relative; } .week-btn.is-milestone { border-color: var(--rose); background: var(--rose-pale); font-weight: 800; } .week-btn.is-milestone.selected { background: var(--rose); color: #FFFFFF; border-color: var(--rose); } .week-flower { position: absolute; top: 3px; right: 5px; font-size: 0.7rem; line-height: 1; pointer-events: none; } [data-theme="warm-sun"] .week-btn.is-milestone { border-color: #E5A978; background: #FFF6EE; color: #9E4A0E; } [data-theme="warm-sun"] .week-btn.is-milestone.selected { background: #E07A2A; border-color: #E07A2A; color: #FFFFFF; } .kham-interactive-checklist { display: grid; gap: 10px; margin-top: 16px; } .kham-check-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 13px; border: 1px solid var(--line); background: #FFFFFF; cursor: pointer; font-size: 0.86rem; color: var(--ink); transition: all 0.15s ease; } .kham-check-item:hover { border-color: var(--rose); background: var(--rose-pale); } .kham-check-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--rose); cursor: pointer; flex: none; } .kham-check-item.is-checked { background: var(--rose-pale); color: var(--muted); text-decoration: line-through; } .kham-redflags { background: #FFF5F8; border: 1px solid #F5C6D6; border-radius: var(--radius); padding: 24px 26px; } .kham-redflags h3 { color: #A92D5B; } .kham-redflags ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 7px; font-size: 0.86rem; color: #5D3749; } [data-theme="warm-sun"] .kham-redflags { background: #FFF9F2; border-color: #F5D5B8; } [data-theme="warm-sun"] .kham-redflags h3 { color: #B4480E; } [data-theme="warm-sun"] .kham-redflags ul { color: #5C3A24; } @media (max-width: 720px) { .kham-detail-grid { grid-template-columns: 1fr; } } @media print { .site-header, .announcement, .sidebar, .kham-tcn-tabs, .kham-event-actions, .site-footer { display: none !important; } .content-layout { grid-template-columns: 1fr !important; } } /* Vaccine post-injection reaction badges & summary box */ .vacc-pill.is-fever { background: #FDECEB; color: #B42318; border-color: #F6C5C1; } .vacc-pill.is-mild { background: #FFF4E5; color: #B45309; border-color: #F6D8AD; } .vacc-pill.is-local { background: #EDF7F1; color: #166534; border-color: #BCE3CA; } .vacc-pill.is-oral { background: #ECF5FF; color: #1D4ED8; border-color: #C3DDFD; } .vacc-reaction-box { margin-top: 12px; padding: 10px 13px; border-radius: 12px; background: #FFF9FB; border: 1px dashed #EED1DE; font-size: 0.82rem; line-height: 1.55; color: var(--ink); } [data-theme="warm-sun"] .vacc-reaction-box { background: #FFF9F3; border-color: #F0D9C8; } /* Instant hover/focus tooltip for abbreviations like TCMR */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%) translateY(4px); width: max-content; max-width: min(280px, 80vw); padding: 8px 12px; border-radius: 10px; background: #2f2329; color: #ffffff; font-size: 0.76rem; font-weight: 500; line-height: 1.45; text-align: left; white-space: normal; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; z-index: 60; } [data-tooltip]::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%) translateY(4px); border: 6px solid transparent; border-top-color: #2f2329; opacity: 0; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; z-index: 60; } [data-tooltip]:hover::after, [data-tooltip]:hover::before, [data-tooltip]:focus-visible::after, [data-tooltip]:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); } /* Equal-height cards in #calendarCards (C01) */ #calendarCards .calendar-list-card { display: flex; } #calendarCards .category-card { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; } #calendarCards .category-card > div { flex: 1; }