/* Bé Ham Học v4 — trang chủ */
.h-hero{background:#FFFDF8;position:relative;overflow:hidden;padding:26px 0 30px}
.h-hero:before{content:"";position:absolute;right:-120px;top:-160px;width:620px;height:620px;border-radius:50%;background:#E8F7EF}
.h-hero:after{content:"";position:absolute;left:-80px;bottom:-140px;width:300px;height:300px;border-radius:50%;background:#FFF1DC}
.h-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px;align-items:center;min-height:470px}
.h-hero h1{font-size:clamp(34px,5.2vw,60px);line-height:1.06;font-weight:950;letter-spacing:-1px;margin:16px 0 14px}
.h-hero h1 em{font-style:normal;color:var(--k-green-d);position:relative;white-space:nowrap}
.h-hero h1 em:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8c40-6 90-8 194-3' fill='none' stroke='%23FFC93C' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.h-hero .k-kick img{width:20px;height:20px}
.h-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.h-cta .k-btn img{width:24px;height:24px}
.h-note{margin:16px 0 0;font-size:14px;font-weight:800;color:var(--k-ink-2)}
.h-hero-art{position:relative;height:460px}
.h-blob{position:absolute;inset:40px 30px 30px 40px;border-radius:46% 54% 50% 50%/55% 45% 55% 45%;background:#FFF6D9}
.h-mascot{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(440px,92%);height:auto}
.h-float{position:absolute;background:#fff;border:2px solid var(--k-line);border-radius:18px;padding:10px 14px;box-shadow:none;font-size:13px;font-weight:800;color:var(--k-ink-2)}
.h-float b{display:block;color:var(--k-ink);font-size:15px;font-weight:950}
.h-f1{left:0;bottom:40px;width:210px;transform:rotate(-3deg)}
.h-f1 small{font-size:11px;color:var(--k-green-d);font-weight:900;text-transform:uppercase;letter-spacing:.3px}
.h-apples{display:flex;gap:2px;margin:6px 0}.h-apples img{width:30px;height:30px}
.h-ans{display:flex;gap:6px}.h-ans i{font-style:normal;width:30px;height:30px;border-radius:50%;border:2px solid var(--k-line);display:grid;place-items:center;font-weight:950;color:var(--k-ink)}
.h-ans i.ok{border-color:var(--k-green);background:var(--k-green-l);color:var(--k-green-dd)}
.h-f2{right:0;top:30px;display:flex;align-items:center;gap:8px;transform:rotate(3deg);color:#C98A00}
.h-f2 img,.h-f3 img{width:32px;height:32px}
.h-f3{right:20px;bottom:24px;display:flex;align-items:center;gap:8px}
.h-stats{position:relative;z-index:1;list-style:none;margin:16px 0 0;padding:14px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:#fff;border:2px solid var(--k-line);border-radius:24px}
.h-stats li{text-align:center;padding:6px 4px;border-right:2px dashed #EEF2EF}
.h-stats li:last-child{border-right:0}
.h-stats b{display:block;font-size:30px;font-weight:950;line-height:1.1}
.h-stats li:nth-child(1) b{color:var(--k-green-d)}.h-stats li:nth-child(2) b{color:var(--k-blue)}.h-stats li:nth-child(3) b{color:var(--k-orange)}.h-stats li:nth-child(4) b{color:#C98A00}.h-stats li:nth-child(5) b{color:var(--k-pink)}
.h-stats span{font-size:13px;font-weight:800;color:var(--k-mut)}
/* độ tuổi */
.h-age{background:var(--ac-l);border-color:transparent;display:flex;flex-direction:column}
.h-age-top{display:flex;justify-content:space-between;align-items:center}
.h-age .k-ico{background:#fff}
.h-age-no{font-size:22px;font-weight:950;color:var(--ac)}
.h-age h3{font-size:24px;color:var(--k-ink)}
.h-age p{flex:1}
.h-age-links{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;flex-wrap:wrap}
.h-age-links .k-btn{background:var(--ac)!important;box-shadow:none!important}
.h-age-links>a:not(.k-btn){font-weight:950;color:var(--ac);text-decoration:none;font-size:14.5px}
/* các bước */
.h-steps .k-card{padding-top:30px}
.h-step{position:absolute;top:-16px;left:22px;width:36px;height:36px;border-radius:50%;background:var(--ac);color:#fff;font-weight:950;font-size:18px;display:grid;place-items:center;box-shadow:none}
.h-steps .k-card{margin-top:16px}
/* mạch kỹ năng */
.h-strand .k-chips{margin-top:12px}
/* phiếu mẫu */
.h-demo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.h-ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.h-ticks li{display:flex;gap:10px;font-weight:750;color:var(--k-ink-2)}
.h-ticks li:before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;background:var(--k-green);color:#fff;font-weight:950;font-size:13px;display:grid;place-items:center}
.h-paper{position:relative;width:100%;max-width:520px;justify-self:center;background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.04),0 22px 50px rgba(64,48,20,.18);transform:rotate(1.2deg);min-height:200px}
.h-paper .bhh-sheet{display:block}
.h-paper .ws-page{transform-origin:0 0;position:absolute;left:0;top:0;box-shadow:none}
/* lộ trình */
.h-road{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:10px;counter-reset:w}
.h-road li{background:var(--ac-l);border-radius:18px;padding:12px 12px 14px;position:relative}
.h-road li span{display:inline-block;font-size:12px;font-weight:950;color:#fff;background:var(--ac);border-radius:999px;padding:2px 9px}
.h-road li b{display:block;margin-top:8px;font-size:14.5px;line-height:1.3;font-weight:900}
.h-center{text-align:center}
.h-small{margin-top:20px;font-weight:750;color:var(--k-ink-2)}
.h-small a{color:var(--k-green-d);font-weight:900}
/* giá */
.h-prices{align-items:stretch}
.h-prices .k-card{padding-top:26px}
/* bài viết */
.h-row-h{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.h-art{padding:0;overflow:hidden}
.h-art img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.h-art h3,.h-art p{padding:0 18px}.h-art h3{margin-top:14px}.h-art p{padding-bottom:18px}
/* lời mời cuối */
.h-final{margin:40px 0 0;background:var(--k-blue);border-radius:32px;padding:26px 34px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;color:#fff;box-shadow:none}
.h-final img{width:150px;height:auto;background:#fff;border-radius:50%;padding:10px}
.h-final h2{margin:0 0 6px;font-size:30px;font-weight:950}
.h-final p{margin:0;font-weight:700;color:#E3F7EC;font-size:16.5px}
.h-final .h-cta{margin:0}
@media (max-width:1040px){
  .h-hero-grid{grid-template-columns:1fr;min-height:0}
  .h-hero-art{height:360px;max-width:520px;width:100%;margin:0 auto}
  .h-stats{grid-template-columns:repeat(3,1fr)}
  .h-stats li:nth-child(3){border-right:0}
  .h-road{grid-template-columns:repeat(3,1fr)}
  .h-demo{grid-template-columns:1fr}
  .h-final{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media (max-width:760px){
  .h-hero:before{width:340px;height:340px;right:-140px;top:-120px}
  .h-hero{padding-top:14px}
  .h-hero h1{font-size:36px}
  .h-hero-art{height:300px}
  .h-f1{width:180px;bottom:10px}.h-f3{display:none}.h-f2{top:6px}
  .h-cta .k-btn{flex:1 1 auto}
  .h-stats{grid-template-columns:repeat(2,1fr)}
  .h-stats li{border-right:0;border-bottom:2px dashed #EEF2EF}.h-stats li:nth-last-child(-n+1){border-bottom:0}
  .h-stats li:last-child{grid-column:1/-1}
  .h-road{grid-template-columns:repeat(2,1fr)}
  .h-final{padding:22px;border-radius:24px}.h-final h2{font-size:24px}
}
.h-art-ph{display:grid;place-items:center;aspect-ratio:16/9;background:var(--ac-l)}.h-art-ph img{width:72px!important;height:72px;aspect-ratio:auto!important}

/* v4.10.5: mục "Học trên máy tính bảng" */
.h-online{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.h-tab{position:relative;background:#1F2A26;border-radius:34px;padding:16px;box-shadow:0 26px 60px rgba(20,60,45,.22);transform:rotate(-1.5deg)}
.h-tab:before{content:"";position:absolute;left:50%;top:6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#3b4a44}
.h-tab-screen{border-radius:20px;overflow:hidden;background:#fff;aspect-ratio:1200/833}
.h-tab-screen img{display:block;width:100%;height:100%;object-fit:cover}
.h-feats{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.h-feats li{position:relative;padding-left:34px}
.h-feats li:before{content:"✓";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--k-green);color:#fff;font-weight:950;font-size:13px;display:grid;place-items:center}
.h-feats b{display:block;font-size:15.5px;font-weight:950;color:var(--k-ink)}
.h-feats span{display:block;font-size:14px;color:var(--k-ink-2);font-weight:700;line-height:1.45}
@media (max-width:980px){.h-online{grid-template-columns:1fr;gap:28px}.h-tab{max-width:620px;margin:0 auto;transform:none}}
@media (max-width:560px){.h-feats{grid-template-columns:1fr}.h-tab{padding:10px;border-radius:24px}.h-tab-screen{border-radius:14px}}
