/* ===== App học Yin — T.Kim Yoga ===== */
:root{
  --kem:#FBF7F0; --kem-dam:#F3EADA; --giay:#FFFDF9;
  --muc:#2B2620; --muc-nhat:#5C5347; --vien:#E4D8C4;
  --vang:#B8892B; --vang-sang:#D9A93C; --vang-mo:#F6EBD3;
  --nau:#4A3A24; --do:#8C3A2B; --xanh:#2E7D53;
  --r:16px; --bong:0 10px 30px rgba(74,58,36,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--kem); color:var(--muc);
  font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; padding-bottom:76px;
}
h1,h2,h3,h4{font-family:"Noto Serif","Times New Roman",serif; font-style:normal; font-weight:700; line-height:1.28; text-wrap:balance; margin:0 0 .5em}
p{margin:0 0 1em; text-wrap:pretty}
a{color:var(--nau)}
img{max-width:100%; display:block}
.wrap{width:min(1080px,92vw); margin-inline:auto}
.hep{width:min(680px,92vw); margin-inline:auto}

/* thanh trên */
.topbar{position:sticky; top:0; z-index:60; background:rgba(251,247,240,.95); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--vien); display:flex; align-items:center; gap:.7rem; padding:.6rem min(4vw,1rem)}
.topbar .brand{display:flex; align-items:center; gap:.55rem; font-family:"Noto Serif",serif; font-weight:700; font-size:1rem; text-decoration:none; color:var(--muc)}
.topbar .brand img{width:34px; height:34px; object-fit:contain}
.topbar .sp{margin-left:auto}
.nutnho{background:var(--giay); border:1px solid var(--vien); border-radius:999px; padding:.35rem .8rem;
  font:inherit; font-size:.85rem; font-weight:600; color:var(--nau); cursor:pointer; text-decoration:none; display:inline-block}
.nutnho:hover{border-color:var(--vang)}

/* thanh dưới */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--giay); border-top:1px solid var(--vien);
  display:grid; grid-template-columns:repeat(4,1fr); padding:.35rem .2rem .5rem}
.tabbar a{display:flex; flex-direction:column; align-items:center; gap:.1rem; text-decoration:none;
  color:var(--muc-nhat); font-size:.74rem; font-weight:600; padding:.3rem 0; border-radius:12px}
.tabbar a b{font-size:1.25rem; font-weight:400; line-height:1}
.tabbar a.on{color:var(--nau); background:var(--vang-mo)}

section{padding:clamp(1.6rem,4vw,2.6rem) 0}
.eyebrow{font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--vang); font-weight:700; margin-bottom:.7rem}
.gach{width:56px; height:3px; background:var(--vang); border-radius:2px; margin:.2rem 0 1rem}
.lead{font-size:1.08rem; color:var(--muc-nhat)}

/* hero landing */
.hero{background:linear-gradient(180deg,var(--kem-dam),var(--kem)); border-bottom:1px solid var(--vien); padding:clamp(2rem,5vw,3.4rem) 0}
.hero h1{font-size:clamp(1.9rem,5vw,2.9rem)}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.4rem,4vw,3rem); align-items:center}
.hero img.chandung{width:min(300px,70vw); aspect-ratio:1/1; object-fit:cover; object-position:center 16%;
  border-radius:50%; border:6px solid var(--giay); box-shadow:0 16px 40px rgba(74,58,36,.2); margin-inline:auto}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr; text-align:center} .hero .btns{justify-content:center}}

.btns{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; cursor:pointer;
  font:inherit; font-weight:700; padding:.9rem 1.6rem; border-radius:999px; border:0; font-size:1.02rem; transition:.18s}
.btn-chinh{background:var(--nau); color:#fff; box-shadow:var(--bong)}
.btn-chinh:hover{background:var(--vang)}
.btn-phu{background:transparent; color:var(--nau); border:1.5px solid var(--nau)}
.btn-phu:hover{background:var(--vang-mo)}
.btn-zalo{background:var(--do); color:#fff}
.btn-zalo:hover{background:var(--nau)}
.btn-rong{width:100%}

/* thẻ */
.luoi{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem}
.the{background:var(--giay); border:1px solid var(--vien); border-radius:var(--r); padding:1.3rem 1.25rem; box-shadow:var(--bong);
  display:flex; flex-direction:column; text-decoration:none; color:inherit}
a.the:hover{border-color:var(--vang); transform:translateY(-2px); transition:.18s}
.the h3{font-size:1.12rem; margin-bottom:.35em}
.the p{font-size:.94rem; color:var(--muc-nhat); margin-bottom:.7rem}
.the .ic{font-size:1.8rem; line-height:1; margin-bottom:.5rem}
.the .them{margin-top:auto; font-weight:700; color:var(--nau); font-size:.92rem}
.nhan{display:inline-block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  border-radius:999px; padding:.2rem .7rem; margin-bottom:.6rem}
.nhan-free{background:#E7F3EC; color:var(--xanh)}
.nhan-phi{background:var(--vang-mo); color:var(--vang)}
.khoa{opacity:.75}

/* bảng giá */
.gia-luoi{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem}
.goi{background:var(--giay); border:2px solid var(--vien); border-radius:var(--r); padding:1.6rem 1.4rem; display:flex; flex-direction:column}
.goi.noibat{border-color:var(--vang); box-shadow:var(--bong)}
.goi .ten{font-family:"Noto Serif",serif; font-size:1.25rem; font-weight:700; margin-bottom:.3rem}
.goi .so{font-family:"Noto Serif",serif; font-size:2.1rem; font-weight:700; color:var(--nau); line-height:1.1}
.goi .so small{font-size:.9rem; font-weight:400; color:var(--muc-nhat); font-family:"Be Vietnam Pro",sans-serif}
.goi ul{margin:.9rem 0 1.2rem; padding-left:1.15rem; font-size:.95rem; color:var(--muc-nhat)}
.goi li{margin-bottom:.4rem}
.goi .btn{margin-top:auto}

/* form */
.form{background:var(--giay); border:1px solid var(--vien); border-radius:var(--r); padding:1.6rem 1.4rem; box-shadow:var(--bong)}
.form label{display:block; font-weight:600; font-size:.94rem; margin:.9rem 0 .35rem}
.form input,.form select,.form textarea{width:100%; font:inherit; padding:.85rem 1rem; border:1.5px solid var(--vien);
  border-radius:12px; background:#fff; color:var(--muc)}
.form input:focus,.form select:focus{outline:none; border-color:var(--vang)}
.loi{color:var(--do); font-size:.9rem; font-weight:600; margin-top:.6rem}

/* thanh toán */
.qr-hop{background:var(--giay); border:1px solid var(--vien); border-radius:var(--r); padding:1.4rem; text-align:center; box-shadow:var(--bong)}
.qr-hop img{width:min(280px,80vw); margin-inline:auto; border-radius:12px; border:1px solid var(--vien); background:#fff}
.ck{display:grid; gap:.6rem; margin:1.2rem 0}
.ck .dong{display:flex; justify-content:space-between; gap:.8rem; align-items:center; background:var(--kem);
  border:1px solid var(--vien); border-radius:12px; padding:.7rem .9rem; text-align:left}
.ck .dong small{display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vang); font-weight:700}
.ck .dong b{font-size:1.02rem; word-break:break-all}
.ck button{flex:0 0 auto}
.buoc{display:flex; gap:.8rem; align-items:flex-start; margin-bottom:.9rem; text-align:left}
.buoc .n{flex:0 0 30px; height:30px; border-radius:50%; background:var(--nau); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem}

/* thông báo */
.canh{background:var(--vang-mo); border-left:4px solid var(--vang); border-radius:0 12px 12px 0; padding:1rem 1.2rem; font-size:.94rem; color:var(--nau); margin:1.2rem 0}
.ok{background:#E7F3EC; border-left-color:var(--xanh); color:#1F5637}
.chucmung{text-align:center; padding:2rem 0}
.chucmung .tick{width:84px; height:84px; border-radius:50%; background:var(--xanh); color:#fff; display:grid; place-items:center;
  font-size:2.6rem; margin:0 auto 1.2rem}

/* video */
.vid-luoi{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.9rem}
.vid{display:block; text-decoration:none; color:inherit; background:var(--giay); border:1px solid var(--vien); border-radius:14px; overflow:hidden}
.vid:hover{border-color:var(--vang)}
.vid img{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--kem-dam)}
.vid span{display:block; padding:.6rem .8rem; font-size:.92rem; font-weight:500; line-height:1.4}
.vid em{display:block; padding:0 .8rem .7rem; font-style:normal; font-size:.8rem; color:var(--vang); font-weight:700}

/* tư thế */
.tt{background:var(--giay); border:1px solid var(--vien); border-radius:var(--r); padding:1.2rem; margin-bottom:1rem}
.tt h3{font-size:1.1rem; margin-bottom:.2em}
.tt .skt{font-size:.85rem; color:var(--vang); font-weight:600; margin-bottom:.7rem}
.tt ul{margin:.4rem 0 .8rem; padding-left:1.15rem; font-size:.94rem; color:var(--muc-nhat)}
.tt h4{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vang); margin:.8rem 0 .2rem}
.tt img{border-radius:12px; border:1px solid var(--vien); margin-bottom:.8rem; background:#fff}

.mientru{font-size:.85rem; color:var(--muc-nhat); border-top:1px solid var(--vien); padding-top:1rem; margin-top:2rem; line-height:1.65}
.giua{text-align:center}
.dsach{list-style:none; padding:0; margin:0}
.dsach li{background:var(--giay); border:1px solid var(--vien); border-radius:12px; padding:.85rem 1rem; margin-bottom:.6rem; display:flex; gap:.8rem; align-items:center}
.dsach li b{flex:0 0 30px; height:30px; border-radius:50%; background:var(--vang-mo); color:var(--nau); display:grid; place-items:center; font-size:.9rem}