/* =========================================================================
   method.css — style dùng chung cho loạt bài NGẮN ở kệ "Cách học".
   Mỗi bài chỉ cần khai --c / --c2 trong <style> của nó là đổi được cả tông màu.

   Khác với các cuốn dài: loạt này chỉ 5 chặng, đọc 5–7 phút, và luôn có
   một khối "thử ngay" để áp dụng được lập tức.
   ========================================================================= */

:root{
  --ink:#1E2233;
  --soft:#5A6180;
  --bg:#F5F6FA;
  --card:#FFFFFF;
  --line:#E1E4EF;
  --c:#4A6FA5;
  --c2:#26364F;
  --ok:#2E8A52;
  --no:#C4503A;
  --gold:#E0A02E;
  --sh:0 10px 28px rgba(30,34,51,.10);
  --sh-lg:0 22px 48px rgba(30,34,51,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  font-size:18px; line-height:1.8; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Baloo 2","Be Vietnam Pro",sans-serif; font-weight:700; margin:0; line-height:1.28}
p{margin:0 0 1.05em}
b,strong{font-weight:600}
svg{max-width:100%; height:auto; display:block}
.wrap{max-width:680px; margin:0 auto; padding:0 22px}
.band{padding:52px 0}
.band--w{background:var(--card)}

/* ------------------------------- BÌA ------------------------------- */
.hero{
  background:linear-gradient(163deg,
    color-mix(in srgb, var(--c) 78%, #000) 0%, var(--c2) 62%,
    color-mix(in srgb, var(--c2) 70%, #000) 100%);
  color:#fff; padding:60px 0 46px; position:relative; overflow:hidden;
  min-height:74vh; display:flex; align-items:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(440px 230px at 84% 6%, rgba(224,160,46,.26), transparent 70%),
    radial-gradient(400px 250px at 6% 94%, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%);
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:52px;
  background:linear-gradient(to bottom,transparent,var(--bg));
}
.hero .wrap{position:relative; z-index:2; width:100%}
.kit{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.24);
  color:#fff; font-size:12px; font-weight:600; letter-spacing:.14em;
  padding:6px 14px; border-radius:99px;
}
.hero h1{font-size:clamp(30px,6.6vw,50px); font-weight:800; margin-top:16px; letter-spacing:-.012em}
.hero h1 span{color:#FFD48A}
.hero .sub{margin:16px 0 0; color:rgba(255,255,255,.82); font-size:clamp(16px,2.2vw,19px); font-weight:300}
.hero .who{
  margin:22px 0 0; display:inline-flex; align-items:center; gap:11px;
  background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:11px 16px; font-size:14px; color:rgba(255,255,255,.78); font-weight:300;
}
.hero .who b{color:#FFD48A; font-weight:600}
.hero .who .av{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.13); font-size:17px;
}

/* ------------------------------ CHUNG ------------------------------ */
.lv{
  display:inline-block; font-family:"Baloo 2",sans-serif; font-weight:600;
  font-size:12px; letter-spacing:.14em; color:var(--c);
  background:color-mix(in srgb, var(--c) 11%, #fff);
  border:1px solid color-mix(in srgb, var(--c) 26%, #fff);
  padding:5px 13px; border-radius:99px;
}
h2.t{font-size:clamp(24px,5vw,34px); margin:15px 0 11px; letter-spacing:-.008em}
p.big{font-size:clamp(17.5px,2.5vw,20px); color:var(--c); font-weight:500; margin-bottom:1.15em}
h3{font-size:clamp(18.5px,3.1vw,22px); margin:30px 0 9px; color:var(--c)}
h4{font-size:17px; margin:0 0 7px}

figure{margin:24px 0; background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:20px 18px; box-shadow:var(--sh)}
.band--w figure{background:#F8F9FC}
figcaption{margin-top:13px; font-size:14.5px; color:var(--soft); text-align:center; line-height:1.6; font-weight:300}

/* khoảnh khắc AHA — điểm nhấn của cả loạt bài */
.aha{
  position:relative; margin:30px 0;
  background:linear-gradient(150deg, color-mix(in srgb, var(--gold) 16%, #fff), #fff);
  border:2px solid color-mix(in srgb, var(--gold) 42%, #fff);
  border-radius:20px; padding:24px 24px 22px; box-shadow:var(--sh);
}
.aha::before{
  content:"💡"; position:absolute; top:-17px; left:22px;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold); font-size:17px; box-shadow:0 4px 12px rgba(224,160,46,.4);
}
.aha .k{
  display:block; font-family:"Baloo 2",sans-serif; font-weight:600; font-size:11.5px;
  letter-spacing:.16em; color:#9A6A0A; margin:4px 0 8px;
}
.aha p{margin:0; font-size:17.5px; line-height:1.65; color:#4A3A14}
.aha p + p{margin-top:9px}
.aha b{color:#2E2208; font-weight:600}

.tip{
  background:var(--card); border:1px solid var(--line); border-left:5px solid var(--c);
  border-radius:0 16px 16px 0; padding:19px 21px; margin:24px 0; box-shadow:var(--sh);
}
.band--w .tip{background:#F8F9FC}
.tip p:last-child{margin-bottom:0}
.tip p{font-size:16.5px; color:#37405C}

.say{
  font-family:"Baloo 2",sans-serif; font-weight:600;
  font-size:clamp(19px,3.4vw,25px); line-height:1.45; color:var(--c2);
  border-top:2px solid var(--line); border-bottom:2px solid var(--line);
  padding:21px 0; margin:28px 0; text-align:center;
}
.say em{font-style:normal; color:var(--c)}

.two{display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:24px 0}
.bx{border-radius:16px; padding:17px 18px; font-size:15.5px; line-height:1.7}
.bx .h{display:block; font-family:"Baloo 2",sans-serif; font-weight:600; font-size:12.5px;
  letter-spacing:.09em; margin-bottom:8px}
.bx.a{background:#FDEDEA; border:1px solid #F8D2CA; color:#8A3A2A}
.bx.a .h{color:var(--no)}
.bx.b{background:#E9F6EE; border:1px solid #C6E7D2; color:#1F5B39}
.bx.b .h{color:var(--ok)}

ol.steps{margin:22px 0; padding:0; list-style:none; counter-reset:s}
ol.steps > li{position:relative; padding:0 0 0 46px; margin-bottom:20px; counter-increment:s}
ol.steps > li::before{
  content:counter(s); position:absolute; left:0; top:2px;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--c); color:#fff; font-family:"Baloo 2",sans-serif;
  font-weight:700; font-size:16px;
}
ol.steps h4{margin-bottom:4px}
ol.steps p{margin:0; font-size:16.5px; color:#37405C}

ul.thoughts{margin:20px 0; padding:0; list-style:none}
ul.thoughts li{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:12px 16px; margin-bottom:9px; font-size:16.5px; color:#37405C;
  box-shadow:0 3px 10px rgba(30,34,51,.05); font-style:italic;
}
.band--w ul.thoughts li{background:#F8F9FC}

/* --------------------------- KHỐI THỬ NGAY --------------------------- */
.ia{
  background:linear-gradient(158deg, var(--c2), color-mix(in srgb, var(--c2) 62%, #000));
  color:#fff; border-radius:22px; padding:25px 23px; margin:26px 0; box-shadow:var(--sh-lg);
}
.ia h4{color:#FFD48A; font-size:18px; margin-bottom:5px}
.ia > p{color:rgba(255,255,255,.72); font-size:15.5px; font-weight:300}
.ia button{
  font-family:"Baloo 2",sans-serif; font-weight:600; font-size:16px; cursor:pointer;
  background:var(--gold); color:#3A2600; border:0; border-radius:99px; padding:12px 25px;
  transition:transform .18s ease;
}
.ia button:hover{transform:translateY(-2px)}
.ia button:focus-visible{outline:3px solid #fff; outline-offset:3px}
.ia button.ghost{background:rgba(255,255,255,.14); color:#fff; font-size:14px; padding:9px 18px}
.ia input, .ia textarea{
  width:100%; font-family:inherit; font-size:16px; color:#fff;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  border-radius:12px; padding:11px 14px; margin:4px 0 13px; line-height:1.6; resize:vertical;
}
.ia input::placeholder, .ia textarea::placeholder{color:rgba(255,255,255,.42)}
.ia input:focus, .ia textarea:focus{outline:2px solid #FFD48A; outline-offset:1px}
.ia label{display:block; font-size:13.5px; font-weight:600; color:#FFD48A; margin-bottom:2px}
.ia .out{
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  border-radius:15px; padding:18px 20px; margin-top:14px;
  font-size:16px; line-height:1.7; font-weight:300;
}
.ia .out b{color:#FFD48A; font-weight:600}
.ia .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* --------------------------------- KẾT --------------------------------- */
.end{
  background:linear-gradient(163deg, color-mix(in srgb, var(--c) 72%, #000), var(--c2));
  color:#fff; padding:56px 0 42px;
}
.end h2{font-size:clamp(24px,5vw,34px); margin-bottom:14px}
.end p{color:rgba(255,255,255,.78); font-weight:300}
.end .hi{
  font-family:"Baloo 2",sans-serif; font-size:clamp(20px,3.8vw,26px);
  font-weight:700; color:#FFD48A; line-height:1.42;
}
.foot{font-size:13.5px; color:rgba(255,255,255,.5); border-top:1px solid rgba(255,255,255,.16);
  margin-top:28px; padding-top:17px}

.rv{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}
@media (max-width:520px){ .two{grid-template-columns:1fr} }

/* =========================================================================
   LINH VẬT — mỗi bài một con, đứng ở bìa và nhúc nhích.
   Bài nào cũng chỉ cần đặt <div class="mascot"> ... </div> trong .hero.
   ========================================================================= */
.mascot{
  width:clamp(130px,34vw,180px); margin:22px 0 0;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.34));
}
.mascot svg{width:100%; height:auto; display:block; overflow:visible}

.m-bob{animation:m-bob 3.2s ease-in-out infinite; transform-origin:center bottom}
@keyframes m-bob{0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-7px) rotate(1deg)}}

.m-blink{animation:m-blink 4.2s steps(1,end) infinite; transform-box:fill-box; transform-origin:center}
@keyframes m-blink{0%,90%,100%{transform:scaleY(1)} 94%{transform:scaleY(.08)}}

.m-wag{animation:m-wag 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:left center}
@keyframes m-wag{0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(9deg)}}

.m-wave{animation:m-wave 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:bottom left}
@keyframes m-wave{0%,100%{transform:rotate(0deg)} 30%{transform:rotate(-20deg)} 60%{transform:rotate(12deg)}}

.m-swing{animation:m-swing 3.6s ease-in-out infinite; transform-box:fill-box; transform-origin:top center}
@keyframes m-swing{0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)}}

.m-pop{animation:m-pop 2.6s ease-in-out infinite}
@keyframes m-pop{0%,72%,100%{transform:scale(1)} 82%{transform:scale(1.16)}}

/* bóng đèn AHA nhấp nháy nhẹ */
@media (prefers-reduced-motion:no-preference){
  .aha::before{animation:bulb 3.4s ease-in-out infinite}
  @keyframes bulb{
    0%,100%{box-shadow:0 4px 12px rgba(224,160,46,.4)}
    50%{box-shadow:0 4px 24px rgba(224,160,46,.85)}
  }
}
@media (prefers-reduced-motion:reduce){
  .mascot *{animation:none !important}
}