/* Sống Khoẻ Tuổi Vàng — giao diện cho người cao tuổi.
   Luật: chữ >=20px, nút >=60px, tương phản cao, không chữ nghiêng, không xám nhạt. */

:root{
  --fs: 20px;               /* cỡ chữ nền — nút A- / A+ đổi biến này */
  --paper:#F7F3EA;
  --card:#FFFFFF;
  --ink:#1F1B16;
  --ink2:#4A4136;
  --clay:#A4623F;
  --sage:#5F7052;
  --slate:#33424D;
  --gold:#B5872F;
  --do:#B03A2E;
  --line:#DED3BE;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:rgba(164,98,63,.15)}
html{font-synthesis:none; -webkit-font-synthesis:none; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Be Vietnam Pro','Segoe UI',system-ui,sans-serif;
  font-size:var(--fs); line-height:1.62; font-weight:400;
  padding-bottom:110px;
}
h1,h2,h3,h4,.serif{font-family:'Noto Serif',Georgia,serif; font-weight:700; line-height:1.3; text-wrap:balance}
p{margin:0 0 .7em; text-wrap:pretty}
b,strong{font-weight:700}
img{max-width:100%; display:block}
button{font-family:inherit; font-size:inherit; cursor:pointer}
a{color:var(--clay)}

/* ─────────── khung ─────────── */
.wrap{max-width:760px; margin:0 auto; padding:0 16px}

.topbar{
  position:sticky; top:0; z-index:40; background:var(--paper);
  border-bottom:2px solid var(--line);
  display:flex; align-items:center; gap:10px; padding:8px 14px;
}
.topbar .brand{display:flex; align-items:center; gap:9px; flex:1; min-width:0}
.topbar .brand img{width:34px; height:auto; flex:none}
.topbar .brand span{font-family:'Noto Serif',Georgia,serif; font-weight:700;
  font-size:.82em; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fsbtn{
  width:52px; height:52px; flex:none; border:2px solid var(--slate); border-radius:12px;
  background:#fff; color:var(--slate); font-weight:700; font-size:.85em; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.fsbtn:active{background:var(--slate); color:#fff}

/* ─────────── trang chủ ─────────── */
.hero{text-align:center; padding:22px 0 6px}
.hero h1{font-size:2.05em; margin:.1em 0 .12em; color:var(--slate)}
.hero .sub{color:var(--clay); font-weight:600; font-size:1.02em; margin:0}
.hero .medal{width:112px; height:112px; border-radius:50%; object-fit:cover;
  border:5px solid var(--gold); margin:0 auto 12px; box-shadow:0 4px 16px rgba(0,0,0,.13)}

.today{
  background:#FFF9E9; border:3px solid var(--gold); border-radius:18px;
  padding:16px 18px; margin:18px 0 6px;
}
.today .lbl{font-size:.78em; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold); margin-bottom:6px}
.today .txt{font-family:'Noto Serif',Georgia,serif; font-weight:700; font-size:1.12em; line-height:1.45}

.menu{display:grid; gap:14px; margin:20px 0 8px}
.mbtn{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left;
  min-height:82px; padding:14px 18px; border-radius:18px;
  background:var(--card); border:3px solid var(--line); color:var(--ink);
}
.mbtn:active{border-color:var(--clay); background:#FDF6EE}
.mbtn .ic{font-size:2em; line-height:1; flex:none; width:48px; text-align:center}
.mbtn .tt{font-family:'Noto Serif',Georgia,serif; font-weight:700; font-size:1.1em; display:block}
.mbtn .dd{font-size:.82em; color:var(--ink2); display:block; margin-top:2px; line-height:1.4}
.mbtn.warn{border-color:var(--clay); background:#FDF3EC}

/* ─────────── tiêu đề màn ─────────── */
.ph{padding:20px 0 6px}
.ph h2{font-size:1.65em; margin:0 0 .18em; color:var(--slate)}
.ph .lead{color:var(--ink2); margin:0}

/* ─────────── thẻ chung ─────────── */
.card{background:var(--card); border:2px solid var(--line); border-radius:16px;
  padding:16px 18px; margin:14px 0}
.card h3{font-size:1.15em; margin:0 0 .4em; color:var(--slate)}
.card h4{font-size:1.02em; margin:0 0 .3em; color:var(--clay)}
.card > :last-child{margin-bottom:0}

.note{background:#FDF3EC; border-left:8px solid var(--clay); border-radius:12px;
  padding:14px 16px; margin:14px 0}
.note.red{background:#FCEDEB; border-left-color:var(--do)}
.note.red h4{color:var(--do)}
.note.green{background:#EFF3EA; border-left-color:var(--sage)}
.note.green h4{color:var(--sage)}
.note h4{margin:0 0 .3em; font-size:1.02em}
.note > :last-child{margin-bottom:0}

ul.li{margin:0; padding-left:0; list-style:none}
ul.li li{position:relative; padding:6px 0 6px 30px}
ul.li li::before{content:""; position:absolute; left:6px; top:.85em;
  width:10px; height:10px; border-radius:50%; background:var(--gold)}
ul.li.red li::before{background:var(--do)}
ul.li.green li::before{background:var(--sage)}
ol.li{margin:0; padding-left:1.4em}
ol.li li{padding:5px 0}

.tag{display:inline-block; font-size:.66em; font-weight:700; padding:2px 9px; border-radius:99px;
  vertical-align:middle; margin-left:5px; letter-spacing:.02em}
.tag.kn{background:#EFF3EA; color:#4A5B3F; border:1px solid #BFCDB1}
.tag.kh{background:#E9EFF5; color:#2C4A63; border:1px solid #AFC5D8}
.tag.qd{background:#F6EEDF; color:#7A5B1E; border:1px solid #DCC79A}

/* ─────────── chuỗi tập ─────────── */
.step{display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left;
  min-height:76px; padding:12px 14px; margin:10px 0; border-radius:16px;
  background:var(--card); border:2px solid var(--line); color:var(--ink)}
.step:active{border-color:var(--clay)}
.step img{width:84px; height:62px; object-fit:cover; border-radius:10px; flex:none; background:#EDE6D6}
.step .n{width:44px; height:44px; flex:none; border-radius:50%; background:var(--slate); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9em}
.step .tt{display:block; font-weight:600; font-size:.98em; line-height:1.35}
.step .dd{display:block; font-size:.76em; color:var(--ink2); line-height:1.35}

.poseimg{width:100%; border-radius:16px; border:3px solid var(--line); background:#fff; margin:6px 0 14px}

/* đồng hồ giữ tĩnh */
.timer{background:var(--slate); color:#fff; border-radius:20px; padding:18px; margin:16px 0; text-align:center}
.timer .num{font-family:'Noto Serif',Georgia,serif; font-size:3.1em; font-weight:700; line-height:1;
  letter-spacing:.02em; font-variant-numeric:lining-nums tabular-nums}
.timer .cap{font-size:.8em; opacity:.92; margin-top:4px}
.timer .row{display:flex; gap:10px; margin-top:14px}
.timer button{flex:1; min-height:62px; border-radius:14px; border:3px solid #fff;
  background:transparent; color:#fff; font-weight:700}
.timer button.go{background:#fff; color:var(--slate)}
.bar{height:10px; border-radius:99px; background:rgba(255,255,255,.28); margin-top:14px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--gold); width:0}

/* ─────────── nút điều hướng ─────────── */
.btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:66px; border-radius:16px; border:3px solid var(--slate);
  background:var(--slate); color:#fff; font-weight:700; font-size:1em; padding:10px 16px;
  text-decoration:none; margin:12px 0}
.btn.ghost{background:#fff; color:var(--slate)}
.btn.clay{background:var(--clay); border-color:var(--clay)}
.btn.sage{background:var(--sage); border-color:var(--sage)}
.btn:active{opacity:.85}
.btnrow{display:flex; gap:12px}
.btnrow .btn{margin:12px 0}

.homebar{position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--paper);
  border-top:2px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.homebar .inner{max-width:760px; margin:0 auto; display:flex; gap:10px}
.homebar button{flex:1; min-height:62px; border-radius:15px; border:3px solid var(--slate);
  background:#fff; color:var(--slate); font-weight:700; font-size:.92em}
.homebar button.main{background:var(--slate); color:#fff}

/* ─────────── ăn: 4 bước, đèn giao thông ─────────── */
.four{display:grid; gap:12px}
.fourc{display:flex; gap:14px; align-items:flex-start; background:var(--card);
  border:2px solid var(--line); border-left-width:10px; border-radius:14px; padding:14px 16px}
.fourc .n{width:44px; height:44px; flex:none; border-radius:50%; color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-family:'Noto Serif',Georgia,serif}
.fourc .tt{font-weight:700; font-size:1.02em; display:block; margin-bottom:2px}
.fourc .dd{font-size:.88em; color:var(--ink2); line-height:1.5}

.den{display:grid; gap:12px}
.denc{border:3px solid; border-radius:16px; padding:14px 16px; background:#fff}
.denc h4{margin:0 0 .35em; font-size:1.05em; display:flex; align-items:center; gap:9px}
.denc h4 .dot{width:22px; height:22px; border-radius:50%; flex:none}
.denc.xanh{border-color:#5F7052} .denc.xanh h4{color:#4A5B3F} .denc.xanh .dot{background:#5F7052}
.denc.vang{border-color:#B5872F} .denc.vang h4{color:#7A5B1E} .denc.vang .dot{background:#D9A93C}
.denc.do{border-color:#B03A2E}   .denc.do h4{color:#B03A2E}   .denc.do .dot{background:#B03A2E}
.denc ul{margin:0; padding-left:0; list-style:none}
.denc li{padding:4px 0 4px 24px; position:relative; font-size:.92em}
.denc li::before{content:"•"; position:absolute; left:6px; font-weight:700}

/* ─────────── nước: máy tính, màu nước tiểu ─────────── */
.calc{background:#EAF1F5; border:3px solid #7FA0B5; border-radius:18px; padding:18px}
.calc label{display:block; font-weight:700; margin-bottom:8px}
.calc .inrow{display:flex; align-items:center; gap:12px}
.calc input{flex:1; min-width:0; height:66px; font-size:1.25em; font-family:inherit; font-weight:700;
  text-align:center; border:3px solid #7FA0B5; border-radius:14px; background:#fff; color:var(--ink);
  font-variant-numeric:lining-nums}
.calc .kg{font-weight:700; font-size:1.1em; color:#33424D}
.calc .out{margin-top:16px; background:#fff; border-radius:14px; padding:14px 16px; text-align:center}
.calc .out .big{font-family:'Noto Serif',Georgia,serif; font-size:2.1em; font-weight:700; color:#2C4A63;
  line-height:1.15; font-variant-numeric:lining-nums}
.calc .out .sm{font-size:.86em; color:var(--ink2); margin-top:4px}
.calc .steps{display:flex; gap:10px; margin-top:12px}
.calc .steps button{flex:1; min-height:58px; border-radius:13px; border:3px solid #7FA0B5;
  background:#fff; color:#2C4A63; font-weight:700; font-size:1.1em}

.golden{display:grid; gap:12px}
.gc{display:flex; gap:14px; background:var(--card); border:2px solid var(--line); border-radius:16px; padding:14px 16px}
.gc .ic{font-size:2.1em; line-height:1; flex:none}
.gc .tt{font-family:'Noto Serif',Georgia,serif; font-weight:700; font-size:1.06em}
.gc .when{font-size:.78em; color:var(--clay); font-weight:600; margin-bottom:5px}
.gc .dose{display:inline-block; margin-top:6px; background:#EAF1F5; color:#2C4A63; font-weight:700;
  font-size:.8em; padding:4px 12px; border-radius:99px}
.gc .dd{font-size:.9em; line-height:1.55}

.urine{display:grid; gap:10px}
.uc{display:flex; align-items:center; gap:14px; background:#fff; border:2px solid var(--line);
  border-radius:14px; padding:12px 14px}
.uc .sw{width:52px; height:52px; border-radius:12px; flex:none; border:2px solid #C9BCA0}
.uc .tt{font-weight:700; font-size:.96em}
.uc .dd{font-size:.82em; color:var(--ink2)}
.uc.ok{border-color:var(--sage); background:#F2F6EE}
.uc.bad{border-color:var(--do); background:#FCEDEB}

/* ─────────── lịch ngày ─────────── */
.day{display:grid; gap:8px}
.dayr{display:flex; gap:14px; align-items:center; background:#fff; border:2px solid var(--line);
  border-radius:13px; padding:11px 14px}
.dayr .g{font-family:'Noto Serif',Georgia,serif; font-weight:700; color:var(--clay);
  width:74px; flex:none; font-variant-numeric:lining-nums; font-size:.95em}
.dayr .i{font-size:1.35em; flex:none}
.dayr .t{font-size:.9em; line-height:1.4}

/* ─────────── nhật ký ─────────── */
.jrow{background:var(--card); border:2px solid var(--line); border-radius:16px; padding:16px; margin:14px 0}
.jrow .q{font-weight:700; margin-bottom:10px; font-size:1.02em}
.opts{display:flex; gap:10px; flex-wrap:wrap}
.opts button{flex:1; min-width:92px; min-height:64px; border-radius:14px; border:3px solid var(--line);
  background:#fff; color:var(--ink); font-weight:700}
.opts button.on{border-color:var(--sage); background:var(--sage); color:#fff}
.opts.pain button.on{border-color:var(--clay); background:var(--clay)}
.num10{display:grid; grid-template-columns:repeat(5,1fr); gap:9px}
.num10 button{min-height:58px; border-radius:13px; border:3px solid var(--line); background:#fff;
  font-weight:700; color:var(--ink); font-variant-numeric:lining-nums}
.num10 button.on{border-color:var(--clay); background:var(--clay); color:#fff}

.streak{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px}
.streak i{width:22px; height:22px; flex:none; border-radius:6px; background:#E4DAC6; display:block}
.streak i.on{background:var(--sage)}
.streak i.today{outline:3px solid var(--gold); outline-offset:1px}

.report{background:#fff; border:3px solid var(--slate); border-radius:16px; padding:20px; margin:14px 0}
.report h3{margin-top:0; text-align:center; color:var(--slate)}
.report table{width:100%; border-collapse:collapse; font-size:.92em}
.report td{padding:9px 4px; border-bottom:1px solid var(--line)}
.report td:last-child{text-align:right; font-weight:700; font-variant-numeric:lining-nums}

/* ─────────── CTA cuối ─────────── */
.cta{background:var(--slate); color:#fff; border-radius:20px; padding:22px 20px; margin:22px 0 10px; text-align:center}
.cta img.p{width:96px; height:96px; border-radius:50%; object-fit:cover; border:4px solid var(--gold); margin:0 auto 12px}
.cta h3{color:#fff; margin:0 0 .35em; font-size:1.25em}
.cta p{font-size:.92em; opacity:.95}
.cta .hot{display:inline-block; background:var(--gold); color:#1F1B16; font-weight:700;
  font-size:1.25em; padding:12px 26px; border-radius:99px; margin:10px 0 6px;
  font-variant-numeric:lining-nums; text-decoration:none}
.cta .qrs{display:flex; gap:16px; justify-content:center; margin-top:14px}
.cta .qrs figure{margin:0; text-align:center}
.cta .qrs img{width:104px; background:#fff; padding:6px; border-radius:10px}
.cta .qrs figcaption{font-size:.72em; margin-top:5px; opacity:.9}
.legal{font-size:.8em; color:var(--ink2); text-align:center; margin:16px 0; line-height:1.55}
.legal b{color:var(--slate)}
.disc{font-size:.78em; color:var(--ink2); background:#F1EADC; border-radius:12px; padding:14px 16px;
  margin:14px 0 24px; line-height:1.55}

@media (max-width:420px){
  .btnrow{flex-direction:column; gap:0}
  .cta .qrs img{width:88px}
  .step img{width:70px; height:54px}
  .dayr .g{width:64px}
}
@media print{
  .topbar,.homebar,.btn,.btnrow{display:none !important}
  body{padding-bottom:0; background:#fff}
}

/* ═══════════ BẢN 2 — lưới ô vuông kiểu app gọi xe ═══════════ */
h3.sect{font-size:1.12em; color:var(--slate); margin:24px 0 10px}

.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:112px; padding:14px 8px; border-radius:18px;
  background:var(--card); border:3px solid var(--line); color:var(--ink); text-align:center}
.tile .i{font-size:2.2em; line-height:1}
.tile .l{font-family:'Noto Serif',Georgia,serif; font-weight:700; font-size:1em; line-height:1.25}
.tile:active{border-color:var(--clay); background:#FDF6EE}
.tile.alt{background:#F1EADC; border-style:dashed}

/* thẻ "bây giờ là lúc" — bấm một cái là vào tập */
.nowcard{display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%;
  text-align:left; padding:16px 20px; border-radius:18px; margin:12px 0 4px;
  background:var(--clay); border:3px solid var(--clay); color:#fff}
.nowcard .l{font-size:.78em; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.92}
.nowcard .t{font-family:'Noto Serif',Georgia,serif; font-weight:700; font-size:1.3em; line-height:1.25}
.nowcard .go{font-size:.86em; font-weight:700; margin-top:4px; opacity:.95}
.nowcard:active{opacity:.88}

/* băng Giờ Bác Sĩ trên cùng */
.bsbanner{display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%;
  text-align:left; padding:15px 20px; border-radius:18px; margin:14px 0 0;
  background:var(--slate); border:3px solid var(--slate); color:#fff}
.bsbanner .k{font-size:.76em; font-weight:700; letter-spacing:.07em; color:var(--gold)}
.bsbanner .t{font-family:'Noto Serif',Georgia,serif; font-weight:700; font-size:1.14em; line-height:1.3}
.bsbanner .d{font-size:.8em; color:#C9D3D8; line-height:1.4}
.bsbanner:active{opacity:.88}

/* thanh mức sức đang dùng */
.mucbar{display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  min-height:70px; padding:12px 18px; border-radius:16px; margin:20px 0 4px;
  background:#EFF3EA; border:3px solid var(--sage); color:var(--ink)}
.mucbar .i{font-size:1.9em; line-height:1; flex:none}
.mucbar b{display:block; font-size:.96em}
.mucbar .d{display:block; font-size:.8em; color:var(--ink2)}

/* bốn nút đổi mức sức ngay trong bài */
.mucrow{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0 0 14px}
.mucrow button{display:flex; flex-direction:column; align-items:center; gap:3px;
  min-height:74px; padding:8px 3px; border-radius:14px; background:#fff;
  border:3px solid var(--line); color:var(--ink); font-weight:700; font-size:.72em; line-height:1.2}
.mucrow button .i{font-size:1.5em; line-height:1}
.mucrow button.on{border-color:var(--sage); background:#EFF3EA; color:var(--sage)}

/* thanh tiến độ buổi tập */
.prog{margin:14px 0 2px}
.prog .pt{font-size:.84em; font-weight:700; color:var(--ink2)}
.prog .pbar{height:10px; border-radius:99px; background:#E4DAC6; overflow:hidden; margin:6px 0 6px}
.prog .pbar i{display:block; height:100%; background:var(--sage)}
.prog .plink{background:none; border:none; padding:0; color:var(--clay); font-weight:700;
  font-size:.82em; text-decoration:underline}

.step.now{border-color:var(--clay); background:#FDF3EC}
.mbtn.on{border-color:var(--sage); background:#EFF3EA}
p.mini,.mini{font-size:.84em; color:var(--ink2); margin:.7em 0 0; line-height:1.5}

/* ═══════════ khu Giờ Bác Sĩ ═══════════ */
.bscard{background:var(--slate); color:#fff; border-radius:18px; padding:20px; margin:14px 0}
.bscard .k{display:inline-block; background:var(--gold); color:#1F1B16; font-weight:700;
  font-size:.76em; padding:4px 14px; border-radius:99px; letter-spacing:.04em}
.bscard p{color:#DCE3E6}
.bscard b{color:#fff}
.bsmeta{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:16px}
.bsmeta div{background:rgba(255,255,255,.09); border-radius:12px; padding:11px 14px}
.bsmeta b{display:block; font-size:.76em; color:var(--gold); letter-spacing:.05em; text-transform:uppercase}
.bsmeta span{font-size:.9em; color:#fff}
.soon{margin-top:14px; background:rgba(255,255,255,.09); border:2px dashed rgba(255,255,255,.35);
  border-radius:12px; padding:12px 14px; font-size:.86em; color:#DCE3E6}

.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px; margin:14px 0}
.duo .ok{border:3px solid var(--sage); border-radius:16px; padding:16px 18px; background:var(--card)}
.duo .no{border:3px solid var(--do); border-radius:16px; padding:16px 18px; background:var(--card)}
.duo h4{margin:0 0 .4em; font-size:1.02em}
.duo .ok h4{color:var(--sage)}
.duo .no h4{color:var(--do)}

/* ô gửi câu hỏi */
textarea#qbox{width:100%; font-family:inherit; font-size:1em; line-height:1.5; color:var(--ink);
  background:#fff; border:3px solid var(--line); border-radius:14px; padding:14px; resize:vertical}
textarea#qbox:focus{outline:none; border-color:var(--clay)}
.qitem{background:var(--card); border:2px solid var(--line); border-radius:14px; padding:14px 16px; margin:10px 0}
.qitem p{margin:0 0 10px; font-size:.96em}
.qrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.qrow .qd{font-size:.8em; color:var(--ink2); flex:1}
.qrow button{min-height:48px; padding:0 16px; border-radius:12px; border:2px solid var(--slate);
  background:#fff; color:var(--slate); font-weight:700; font-size:.84em}

/* ═══════════ thanh 3 tab dưới đáy ═══════════ */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--paper);
  border-top:2px solid var(--line); padding:6px 12px calc(6px + env(safe-area-inset-bottom))}
.tabbar .inner{max-width:760px; margin:0 auto; display:flex; gap:8px}
.tabbar button{flex:1; display:flex; flex-direction:column; align-items:center; gap:1px;
  min-height:64px; border-radius:14px; border:2px solid transparent; background:none;
  color:var(--ink2); font-weight:700; font-size:.76em}
.tabbar button .i{font-size:1.5em; line-height:1.1}
.tabbar button.on{background:var(--slate); color:#fff; border-color:var(--slate)}

@media (max-width:360px){
  .tiles{gap:9px}
  .tile{min-height:100px}
  .mucrow button{font-size:.66em}
}
@media print{ .tabbar{display:none !important} }
.mucbar.cho{background:#FDF3EC; border-color:var(--clay)}

/* ═══════════ kho video ═══════════ */
.vid{display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left;
  padding:14px 16px; margin:10px 0; border-radius:16px; text-decoration:none;
  background:var(--card); border:2px solid var(--line); color:var(--ink)}
.vid:active{border-color:var(--clay); background:#FDF6EE}
.vid .pl{width:46px; height:46px; flex:none; border-radius:50%; background:var(--do); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.1em}
.vid .tt{display:block; font-weight:600; font-size:.94em; line-height:1.35}
.vid .dd{display:block; font-size:.78em; color:var(--ink2); margin-top:3px}

/* trình phát video nhúng */
.player{position:relative; width:100%; aspect-ratio:16/9; margin:10px 0 4px;
  border-radius:16px; overflow:hidden; background:#000; border:3px solid var(--line)}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ═══════════ thư viện 60 tư thế ═══════════ */
.mdo{border:3px solid var(--line); border-radius:14px; padding:14px 16px; margin:10px 0; background:var(--card)}
.mdo h4{margin:0 0 .3em; font-size:1.02em}
.mdo p{margin:0; font-size:.9em; color:var(--ink2); line-height:1.5}
.locrow{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0 4px;
  position:sticky; top:74px; z-index:30; background:var(--paper); padding:6px 0}
.locrow button{min-height:56px; border-radius:13px; border:3px solid var(--line); background:#fff;
  color:var(--ink); font-weight:700; font-size:.76em; line-height:1.2; padding:4px 2px}
.locrow button.on{border-color:var(--slate); background:var(--slate); color:#fff}

/* ═══════════ gói hội viên ═══════════ */
.goi{border:3px solid var(--line); border-radius:18px; padding:18px 20px; margin:14px 0; background:var(--card)}
.goi.mp{border-color:var(--sage)}
.goi.hv{border-color:var(--gold); background:#FFFCF4}
.goi .gh{display:flex; align-items:center; gap:14px; margin-bottom:12px;
  padding-bottom:12px; border-bottom:2px solid var(--line)}
.goi .gh .ic{font-size:2.2em; line-height:1; flex:none}
.goi .tt{display:block; font-family:'Noto Serif',Georgia,serif; font-weight:700; font-size:1.12em}
.goi .gia{display:block; font-family:'Noto Serif',Georgia,serif; font-weight:700; font-size:1.35em;
  color:var(--clay); font-variant-numeric:lining-nums; margin-top:2px}
.goi .gia small{font-size:.52em; font-weight:600; color:var(--ink2); font-family:'Be Vietnam Pro',sans-serif}
.goi.mp .gia{color:var(--sage)}
.goi .nam{background:#FFF4DC; border:2px dashed var(--gold); border-radius:12px; padding:9px 13px;
  font-weight:700; font-size:.88em; margin-bottom:12px; color:#7A5B1E}

.khoa{background:#FFFCF4; border:3px solid var(--gold); border-radius:18px; padding:18px 20px; margin:14px 0}
.khoa .k{font-weight:700; color:var(--gold); font-size:.92em; margin-bottom:6px}
.khoa p{font-size:.92em; margin-bottom:.8em}

input#mabox{width:100%; height:66px; font-family:'Noto Serif',Georgia,serif; font-size:1.15em;
  font-weight:700; text-align:center; letter-spacing:.06em; border:3px solid var(--line);
  border-radius:14px; background:#fff; color:var(--ink); text-transform:uppercase}
input#mabox:focus{outline:none; border-color:var(--clay)}

/* ═══════════ kết nối với thầy ═══════════ */
label.lb{display:block; font-weight:700; font-size:.88em; margin:14px 0 6px; color:var(--slate)}
.card input[type=text],.card input[type=tel],.card input[type=number]{
  width:100%; height:62px; font-family:inherit; font-size:1.02em; padding:0 14px;
  border:3px solid var(--line); border-radius:14px; background:#fff; color:var(--ink)}
.card input:focus{outline:none; border-color:var(--clay)}
#knma{font-family:'Noto Serif',Georgia,serif; font-weight:700; text-align:center;
  letter-spacing:.06em; text-transform:uppercase}
label.dongy{display:flex; gap:12px; align-items:flex-start; margin-top:18px;
  background:#EFF3EA; border:2px solid var(--sage); border-radius:14px; padding:14px 16px}
label.dongy input{width:30px; height:30px; flex:none; margin-top:2px; accent-color:#5F7052}
label.dongy span{font-size:.9em; line-height:1.5}