/* ===== dangkimtoan.com — T.Kim Yoga | editorial kem/vàng nâu ===== */
: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-tram:#8C3A2B;
  --r:14px; --bong:0 10px 30px rgba(74,58,36,.08);
  --w:1120px;
}
*{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.75; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Noto Serif","Times New Roman",serif; font-style:normal; font-weight:700; line-height:1.25; text-wrap:balance; margin:0 0 .5em}
p{text-wrap:pretty; margin:0 0 1em}
a{color:var(--nau)}
img{max-width:100%; display:block}
.wrap{width:min(var(--w),92vw); margin-inline:auto}
.eyebrow{font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--vang); font-weight:600; margin-bottom:.9rem}
.lead{font-size:1.12rem; color:var(--muc-nhat)}

/* ---- thanh điều hướng ---- */
header.nav{position:sticky; top:0; z-index:50; background:rgba(251,247,240,.93); backdrop-filter:blur(10px); border-bottom:1px solid var(--vien)}
.nav-in{display:flex; align-items:center; gap:1.2rem; padding:.7rem 0}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--muc); font-family:"Noto Serif",serif; font-weight:700; letter-spacing:.02em}
.brand img{width:38px; height:38px; object-fit:contain}
.brand small{display:block; font-family:"Be Vietnam Pro",sans-serif; font-weight:400; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--vang)}
nav.menu{margin-left:auto; display:flex; gap:1.3rem; flex-wrap:wrap; align-items:center}
nav.menu a{text-decoration:none; color:var(--muc-nhat); font-size:.94rem; font-weight:500; padding:.3rem 0; border-bottom:2px solid transparent}
nav.menu a:hover{color:var(--nau); border-color:var(--vang)}
.nav-cta{background:var(--nau); color:#fff !important; padding:.55rem 1.05rem; border-radius:999px; border-bottom:0 !important; font-weight:600}
.nav-cta:hover{background:var(--vang)}
@media(max-width:1000px){nav.menu{gap:.9rem} nav.menu a{font-size:.88rem}}
@media(max-width:860px){
  .nav-in{flex-wrap:wrap; gap:.5rem}
  nav.menu{margin-left:0; width:100%; flex-wrap:nowrap; overflow-x:auto; gap:1.1rem; padding-bottom:.15rem; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  nav.menu::-webkit-scrollbar{display:none}
  .portrait img{width:min(260px,62vw)}
  nav.menu a{white-space:nowrap}
  nav.menu .nav-cta{display:none}
}

/* ---- đầu trang ---- */
.hero{background:linear-gradient(180deg,var(--kem-dam),var(--kem)); padding:clamp(2.6rem,6vw,5rem) 0 clamp(2rem,5vw,4rem); border-bottom:1px solid var(--vien)}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:center}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.4rem); margin-bottom:.35em}
.hero h1 em{font-style:normal; color:var(--vang); display:block; font-size:.36em; letter-spacing:.2em; text-transform:uppercase; font-family:"Be Vietnam Pro",sans-serif; font-weight:600; margin-bottom:.7em}
.titles{list-style:none; padding:0; margin:0 0 1.6rem; display:flex; flex-wrap:wrap; gap:.5rem}
.titles li{font-size:.85rem; background:var(--giay); border:1px solid var(--vien); border-radius:999px; padding:.32rem .85rem; color:var(--muc-nhat)}
.btns{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.4rem}
.btn{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:600; padding:.85rem 1.5rem; border-radius:999px; font-size:1rem; transition:.18s}
.btn-chinh{background:var(--nau); color:#fff; box-shadow:var(--bong)}
.btn-chinh:hover{background:var(--vang); transform:translateY(-1px)}
.btn-phu{background:transparent; color:var(--nau); border:1.5px solid var(--nau)}
.btn-phu:hover{background:var(--vang-mo)}
.portrait{position:relative; justify-self:center}
.portrait img{width:min(340px,72vw); aspect-ratio:1/1; object-fit:cover; object-position:center 18%; border-radius:50%; border:6px solid var(--giay); box-shadow:0 18px 44px rgba(74,58,36,.20)}
.portrait::after{content:""; position:absolute; inset:-14px; border:1.5px solid var(--vang); border-radius:50%; opacity:.5}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr; text-align:center} .titles,.btns{justify-content:center} .portrait{order:-1}}

/* ---- dải số liệu ---- */
.stats{background:var(--nau); color:var(--kem)}
.stats-in{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:2rem 0; text-align:center}
.stats b{display:block; font-family:"Noto Serif",serif; font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--vang-sang)}
.stats span{font-size:.86rem; opacity:.88}
@media(max-width:700px){.stats-in{grid-template-columns:repeat(2,1fr); gap:1.4rem}}

/* ---- khối nội dung ---- */
section{padding:clamp(3rem,7vw,5.2rem) 0}
section.alt{background:var(--giay); border-block:1px solid var(--vien)}
.head{max-width:730px; margin-bottom:2.6rem}
.head.giua{margin-inline:auto; text-align:center}
.head h2{font-size:clamp(1.7rem,3.6vw,2.4rem)}
.gach{width:64px; height:3px; background:var(--vang); border-radius:2px; margin:.2rem 0 1.2rem}
.head.giua .gach{margin-inline:auto}

/* ---- giới thiệu ---- */
.gt{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.2rem); align-items:start}
.trichdan{background:var(--vang-mo); border-left:4px solid var(--vang); border-radius:0 var(--r) var(--r) 0; padding:1.3rem 1.5rem; font-family:"Noto Serif",serif; font-size:1.08rem; color:var(--nau)}
.trichdan small{display:block; font-family:"Be Vietnam Pro",sans-serif; font-size:.8rem; color:var(--muc-nhat); margin-top:.6rem; letter-spacing:.06em}
@media(max-width:860px){.gt{grid-template-columns:1fr}}

/* ---- thẻ ---- */
.luoi{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1.3rem}
.the{background:var(--giay); border:1px solid var(--vien); border-radius:var(--r); padding:1.7rem 1.5rem; box-shadow:var(--bong); display:flex; flex-direction:column}
.the:hover{border-color:var(--vang)}
.the .so{font-family:"Noto Serif",serif; color:var(--vang); font-size:.95rem; letter-spacing:.14em; margin-bottom:.5rem}
.the h3{font-size:1.18rem}
.the p{font-size:.95rem; color:var(--muc-nhat); margin-bottom:.9rem}
.the ul{margin:0 0 1rem; padding-left:1.1rem; font-size:.93rem; color:var(--muc-nhat)}
.the ul li{margin-bottom:.3rem}
.the .them{margin-top:auto; font-weight:600; text-decoration:none; color:var(--nau); font-size:.94rem}
.the .them:hover{color:var(--vang)}
.nhan{display:inline-block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; background:var(--vang-mo); color:var(--vang); border-radius:999px; padding:.2rem .7rem; font-weight:600; margin-bottom:.7rem}

/* ---- sách ---- */
.sach{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:1rem}
.sach article{background:var(--giay); border:1px solid var(--vien); border-radius:var(--r); padding:1.15rem 1.15rem 1rem; transition:.18s}
.sach article:hover{transform:translateY(-2px); border-color:var(--vang); box-shadow:var(--bong)}
.sach b{display:block; font-family:"Noto Serif",serif; font-size:1rem; line-height:1.35; margin-bottom:.35rem}
.sach span{font-size:.83rem; color:var(--muc-nhat)}

/* ---- ảnh sự kiện ---- */
.anh{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.9rem}
.anh figure{margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--vien); background:var(--giay)}
.anh img{aspect-ratio:4/3; object-fit:cover; width:100%}
.anh figcaption{font-size:.79rem; color:var(--muc-nhat); padding:.6rem .8rem}

/* ---- kênh ---- */
.kenh{display:grid; grid-template-columns:repeat(auto-fit,minmax(244px,1fr)); gap:1.2rem}
.kenh a{display:flex; gap:.9rem; align-items:center; text-decoration:none; color:inherit; background:var(--giay); border:1px solid var(--vien); border-radius:var(--r); padding:1.1rem 1.2rem}
.kenh a:hover{border-color:var(--vang)}
.kenh .ico{width:42px; height:42px; flex:0 0 42px; border-radius:12px; background:var(--vang-mo); display:grid; place-items:center; color:var(--nau); font-weight:700; font-family:"Noto Serif",serif}
.kenh b{display:block; font-size:1rem}
.kenh span{font-size:.85rem; color:var(--muc-nhat)}

/* ---- liên hệ ---- */
.lh{background:var(--nau); color:var(--kem); border-radius:var(--r); padding:clamp(2rem,5vw,3.4rem); display:grid; grid-template-columns:1.1fr .9fr; gap:2.2rem; align-items:center}
.lh h2{color:#fff}
.lh p{color:#EFE4D2}
.lh .eyebrow{color:var(--vang-sang)}
.lh .hop{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--r); padding:1.4rem}
.lh .hop div{margin-bottom:1rem}
.lh .hop div:last-child{margin-bottom:0}
.lh .hop small{display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--vang-sang); margin-bottom:.15rem}
.lh .hop a{color:#fff; text-decoration:none; font-size:1.06rem; font-weight:600}
.lh .hop a:hover{color:var(--vang-sang)}
.lh .btn-chinh{background:var(--vang-sang); color:var(--nau)}
.lh .btn-chinh:hover{background:#fff}
@media(max-width:860px){.lh{grid-template-columns:1fr}}

/* ---- chân trang ---- */
footer{background:var(--kem-dam); border-top:1px solid var(--vien); padding:2.6rem 0 2rem; font-size:.9rem; color:var(--muc-nhat)}
.ft{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem}
footer h4{font-size:1rem; margin-bottom:.6rem}
footer a{color:var(--muc-nhat); text-decoration:none; display:block; margin-bottom:.35rem}
footer a:hover{color:var(--nau)}
.mientru{margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--vien); font-size:.81rem; line-height:1.7}
@media(max-width:760px){.ft{grid-template-columns:1fr}}

/* ---- nút Zalo nổi ---- */
.zalo-noi{position:fixed; right:18px; bottom:18px; z-index:60; display:flex; align-items:center; gap:.5rem; background:var(--do-tram); color:#fff; text-decoration:none; font-weight:600; padding:.8rem 1.15rem; border-radius:999px; box-shadow:0 10px 26px rgba(0,0,0,.24)}
.zalo-noi:hover{background:var(--nau)}
@media(max-width:520px){.zalo-noi{padding:.75rem .95rem; font-size:.92rem}}