/* ===== 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}}

/* ═══════ BỔ SUNG: WEB NHIỀU KHU VỰC ═══════ */
nav.menu a.dang-xem{color:var(--nau); border-color:var(--vang)}

/* đầu trang con */
.trang-dau{background:linear-gradient(180deg,var(--kem-dam),var(--kem)); border-bottom:1px solid var(--vien); padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(1.8rem,4vw,2.8rem)}
.trang-dau h1{font-size:clamp(1.9rem,4.4vw,3rem); margin-bottom:.4em}
.trang-dau .lead{max-width:60ch}

/* thẻ dạng link */
.the-link{text-decoration:none; color:inherit; transition:.18s}
.the-link:hover{transform:translateY(-2px); border-color:var(--vang); box-shadow:0 14px 34px rgba(74,58,36,.12)}
.the-rong{padding:1.9rem 1.7rem}
.phu-hop{font-size:.9rem; color:var(--muc-nhat); background:var(--vang-mo); border-radius:10px; padding:.7rem .9rem; margin-bottom:1rem}
.nhan-claim{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vang); font-weight:600; margin-bottom:.5rem}
.luoi-2{grid-template-columns:repeat(auto-fit,minmax(370px,1fr))}
@media(max-width:800px){.luoi-2{grid-template-columns:1fr}}

/* cảnh báo YMYL */
.canh-bao{background:var(--vang-mo); border:1px solid var(--vien); border-left:4px solid var(--vang); border-radius:0 var(--r) var(--r) 0;
  padding:1.1rem 1.3rem; font-size:.94rem; color:var(--nau); margin-top:1.6rem}

/* dòng thời gian */
.thoi-gian{position:relative; padding-left:1.2rem; border-left:2px solid var(--vien)}
.moc{position:relative; display:grid; grid-template-columns:150px 1fr; gap:1.4rem; padding:0 0 1.8rem 1.4rem}
.moc::before{content:""; position:absolute; left:-1.55rem; top:.45rem; width:11px; height:11px; border-radius:50%; background:var(--vang); border:2px solid var(--giay)}
.moc-nam{font-family:"Noto Serif",serif; font-weight:700; color:var(--vang); font-size:1rem; padding-top:.1rem}
.moc-noi h3{font-size:1.12rem; margin-bottom:.3em}
.moc-noi p{font-size:.96rem; color:var(--muc-nhat); margin:0}
@media(max-width:700px){.moc{grid-template-columns:1fr; gap:.3rem}}

/* thư viện sách có bìa */
.sach-rong{grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.4rem}
.sach-the{display:block; text-decoration:none; color:inherit; background:var(--giay); border:1px solid var(--vien); border-radius:var(--r);
  padding:1rem 1rem 1.2rem; transition:.18s}
.sach-the:hover{transform:translateY(-2px); border-color:var(--vang); box-shadow:var(--bong)}
.sach-the img{width:100%; aspect-ratio:1/1.414; object-fit:cover; border-radius:10px; border:1px solid var(--vien); margin-bottom:.9rem; background:var(--kem-dam)}
.sach-the b{display:block; font-family:"Noto Serif",serif; font-size:1.02rem; line-height:1.35; margin-bottom:.25rem}
.sach-the span{display:block; font-size:.82rem; color:var(--vang); font-weight:600; margin-bottom:.5rem}
.sach-the p{font-size:.9rem; color:var(--muc-nhat); margin:0}

/* video */
.chu-de{margin-bottom:2.4rem}
.chu-de h3{font-size:1.2rem; margin-bottom:.9rem; padding-bottom:.5rem; border-bottom:1px solid var(--vien)}
.vid-luoi{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem}
.vid{display:block; text-decoration:none; color:inherit; background:var(--giay); border:1px solid var(--vien); border-radius:var(--r); overflow:hidden; transition:.18s}
.vid:hover{transform:translateY(-2px); border-color:var(--vang); box-shadow:var(--bong)}
.vid img{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--kem-dam)}
.vid-ten{display:block; font-size:.92rem; line-height:1.45; padding:.7rem .8rem .2rem; font-weight:500}
.vid-phut{display:block; font-size:.8rem; color:var(--vang); font-weight:600; padding:0 .8rem .8rem}

/* hỏi đáp */
.faq details{background:var(--giay); border:1px solid var(--vien); border-radius:var(--r); padding:1rem 1.2rem; margin-bottom:.8rem}
.faq summary{cursor:pointer; font-weight:600; font-family:"Noto Serif",serif; font-size:1.04rem; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ "; color:var(--vang); font-weight:700}
.faq details[open] summary::before{content:"– "}
.faq details p{margin:.8rem 0 0; color:var(--muc-nhat); font-size:.96rem}

/* ═══════ BÀI VIẾT ═══════ */
.bai-luoi{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1.4rem}
.bai-the{display:block; text-decoration:none; color:inherit; background:var(--giay); border:1px solid var(--vien); border-radius:var(--r); overflow:hidden; transition:.18s}
.bai-the:hover{transform:translateY(-2px); border-color:var(--vang); box-shadow:var(--bong)}
.bai-the img{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 22%; background:var(--kem-dam)}
.bai-noi{padding:1.3rem 1.4rem 1.5rem}
.bai-meta{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--vang); font-weight:600; margin-bottom:.5rem}
.bai-the b{display:block; font-family:"Noto Serif",serif; font-size:1.16rem; line-height:1.35; margin-bottom:.45rem}
.bai-the p{font-size:.94rem; color:var(--muc-nhat); margin-bottom:.9rem}
.bai-the .them{font-weight:600; color:var(--nau); font-size:.92rem}

/* trang một bài */
.bai{padding:clamp(2.2rem,5vw,3.4rem) 0 clamp(2.6rem,6vw,4rem)}
.bai .wrap{width:min(760px,92vw)}
.bai h1{font-size:clamp(1.9rem,4.4vw,2.7rem); margin-bottom:.4em}
.bai > .wrap > .lead{margin-bottom:1.8rem}
.bai-anh-lon{margin:0 0 2rem}
.bai-anh-lon img{width:100%; max-height:400px; object-fit:cover; object-position:center 12%; border-radius:var(--r); border:1px solid var(--vien)}
.bai-than{font-size:1.06rem}
.bai-than h2{font-size:1.5rem; margin:2.2rem 0 .7rem}
.bai-than h3{font-size:1.2rem; margin:1.8rem 0 .6rem}
.bai-than p{margin-bottom:1.15rem}
.bai-than ul,.bai-than ol{margin:0 0 1.3rem; padding-left:1.3rem}
.bai-than li{margin-bottom:.5rem}
.bai-than blockquote{margin:1.6rem 0; padding:1.1rem 1.4rem; background:var(--vang-mo); border-left:4px solid var(--vang);
  border-radius:0 var(--r) var(--r) 0; font-family:"Noto Serif",serif; font-size:1.1rem; color:var(--nau)}
.bai-than hr{border:0; border-top:1px solid var(--vien); margin:2.2rem 0 1.4rem}
.bai-than em{color:var(--muc-nhat)}
.bai-anh{margin:1.6rem 0}
.bai-anh img{width:100%; border-radius:var(--r); border:1px solid var(--vien)}
.bai-anh figcaption{font-size:.85rem; color:var(--muc-nhat); padding-top:.5rem; text-align:center}

/* điều hướng bài trước / bài sau */
.dieu-huong{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:2.4rem 0 0}
.dh{display:block; text-decoration:none; color:inherit; background:var(--giay); border:1px solid var(--vien); border-radius:var(--r);
  padding:1rem 1.2rem; font-family:"Noto Serif",serif; font-size:1rem; line-height:1.35}
.dh:hover{border-color:var(--vang)}
.dh small{display:block; font-family:"Be Vietnam Pro",sans-serif; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--vang); font-weight:600; margin-bottom:.3rem}
.dh-sau{text-align:right}
@media(max-width:640px){.dieu-huong{grid-template-columns:1fr} .dh-sau{text-align:left}}

/* hộp tác giả */
.bai-tacgia{display:flex; gap:1.1rem; align-items:flex-start; margin-top:2.4rem; padding:1.4rem 1.5rem;
  background:var(--vang-mo); border-radius:var(--r); border:1px solid var(--vien)}
.bai-tacgia img{width:64px; height:64px; flex:0 0 64px; border-radius:50%; object-fit:cover; object-position:center 18%; border:2px solid var(--giay)}
.bai-tacgia b{display:block; font-family:"Noto Serif",serif; font-size:1.06rem; margin-bottom:.3rem}
.bai-tacgia p{font-size:.92rem; color:var(--muc-nhat); margin:0}

/* ═══════ BỔ SUNG RIÊNG: yinyogavn.com — thư viện tư thế ═══════ */
.tt-loc{display:flex; gap:.55rem; flex-wrap:wrap; margin:0 0 1.6rem}
.tt-loc button{font-family:inherit; font-size:.9rem; font-weight:500; cursor:pointer;
  background:var(--giay); color:var(--muc-nhat); border:1px solid var(--vien);
  border-radius:999px; padding:.5rem 1.05rem; transition:.16s}
.tt-loc button:hover{border-color:var(--vang); color:var(--nau)}
.tt-loc button.chon{background:var(--nau); color:#fff; border-color:var(--nau)}

.tt-luoi{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:1.15rem}
.tt-the{display:flex; flex-direction:column; background:var(--giay); border:1px solid var(--vien);
  border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit; transition:.18s}
.tt-the:hover{border-color:var(--vang); transform:translateY(-2px); box-shadow:0 14px 30px rgba(74,58,36,.13)}
.tt-the .anh-o{aspect-ratio:4/3; background:var(--kem-dam); overflow:hidden}
.tt-the img{width:100%; height:100%; object-fit:cover; object-position:center}
.tt-the .noi{padding:.85rem 1rem 1.05rem}
.tt-the .so{font-size:.74rem; letter-spacing:.16em; color:var(--vang); font-weight:600}
.tt-the h3{font-size:1.02rem; margin:.2rem 0 .15rem; font-family:"Noto Serif",serif}
.tt-the .skt{font-size:.82rem; color:var(--muc-nhat); font-style:italic}
@media(max-width:520px){.tt-luoi{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.8rem}
  .tt-the .noi{padding:.7rem .8rem .9rem} .tt-the h3{font-size:.94rem}}

/* trang một tư thế */
.tt-dau{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(1.4rem,3.5vw,2.8rem); align-items:start}
.tt-dau .anh-lon{border-radius:var(--r); overflow:hidden; border:1px solid var(--vien); box-shadow:var(--bong); background:var(--kem-dam)}
.tt-dau h1{font-size:clamp(1.8rem,4vw,2.7rem); margin-bottom:.15em}
.tt-dau .skt{font-style:italic; color:var(--vang); font-size:1.05rem; margin-bottom:1rem}
@media(max-width:820px){.tt-dau{grid-template-columns:1fr}}
.tt-khoi{background:var(--giay); border:1px solid var(--vien); border-radius:var(--r); padding:1.5rem 1.6rem; margin-bottom:1.2rem}
.tt-khoi h2{font-size:1.18rem; margin-bottom:.7rem}
.tt-khoi ol,.tt-khoi ul{margin:0; padding-left:1.15rem; color:var(--muc-nhat)}
.tt-khoi li{margin-bottom:.5rem}
.tt-khoi.loi{background:var(--vang-mo); border-left:4px solid var(--vang)}
.video-o{position:relative; padding-top:56.25%; border-radius:var(--r); overflow:hidden; border:1px solid var(--vien); background:#000; margin-top:1rem}
.video-o iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.dh-tt{display:flex; justify-content:space-between; gap:1rem; margin-top:2.2rem; padding-top:1.2rem; border-top:1px solid var(--vien); font-size:.94rem}
.dh-tt a{text-decoration:none; font-weight:600; color:var(--nau); max-width:46%}
.dh-tt a:hover{color:var(--vang)}

/* bước lộ trình */
.buoc{display:grid; grid-template-columns:76px 1fr; gap:1.3rem; padding:1.4rem 0; border-bottom:1px solid var(--vien)}
.buoc:last-child{border-bottom:0}
.buoc .stt{font-family:"Noto Serif",serif; font-weight:700; color:var(--vang); font-size:1.5rem; line-height:1.2}
.buoc .stt small{display:block; font-family:"Be Vietnam Pro",sans-serif; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muc-nhat); font-weight:500}
.buoc h3{font-size:1.14rem; margin-bottom:.35em}
.buoc p{margin-bottom:.5rem; color:var(--muc-nhat)}
@media(max-width:600px){.buoc{grid-template-columns:1fr; gap:.4rem}}

/* bảng gọn */
.bang-gon{width:100%; border-collapse:collapse; margin:1.2rem 0; font-size:.96rem; background:var(--giay); border:1px solid var(--vien); border-radius:var(--r); overflow:hidden}
.bang-gon th,.bang-gon td{padding:.75rem .95rem; text-align:left; border-bottom:1px solid var(--vien); vertical-align:top}
.bang-gon th{background:var(--vang-mo); font-family:"Noto Serif",serif; font-size:.95rem}
.bang-gon tr:last-child td{border-bottom:0}
.bang-o{overflow-x:auto}

/* ảnh lớn ở đầu trang chủ */
.hero-anh{margin:0; align-self:center}
.hero-anh img{width:100%; border-radius:var(--r); border:1px solid var(--vien); box-shadow:0 18px 40px rgba(74,58,36,.16)}
.hero-anh figcaption{font-size:.83rem; color:var(--muc-nhat); padding-top:.55rem; text-align:center}
.tt-dau{grid-template-columns:1.12fr .88fr}
@media(max-width:820px){.tt-dau{grid-template-columns:1fr}}