/* 9Listening practice hub — hệ màu 9Reading (cream/coral/vàng) */
.mlp-hub{--cream:#FBFAF6;--card:#fff;--ink:#1A1816;--mut:#6F6A63;--line:#ECE8DF;--line2:#E2DDD2;
  --cor:#C8442C;--cor-deep:#A5361F;--cor-soft:#FAECE8;--cor-line:#EFC7BC;--yel:#FFE34A;
  --green:#1E7B4D;--green-soft:#E8F4ED;--navy:#1f4e8c;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);
  background:var(--cream);border-radius:18px;padding:10px 6px 26px;margin:0 auto;max-width:1060px}
.mlp-hub *{box-sizing:border-box}
.hub-hero{padding:24px 22px 26px}
.hub-hero h1{margin:0 0 6px;font-size:29px;letter-spacing:-.02em;line-height:1.2;font-weight:800;color:var(--ink)}
.hub-hero h1 em{font-family:"Newsreader",serif;font-style:italic;font-weight:500;color:var(--cor)}
.hub-hero p{margin:0;color:var(--mut);font-size:14.5px}
.hub-cards{padding:0 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.hub-cards{grid-template-columns:1fr}}
.hub-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:26px 24px 22px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(26,24,22,.04),0 8px 24px -18px rgba(26,24,22,.18);
  transition:transform .18s ease,box-shadow .18s ease}
.hub-card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(26,24,22,.05),0 16px 34px -18px rgba(26,24,22,.26)}
.hub-card.weak{border-color:var(--cor-line)}
.hub-flag{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:5px;
  background:var(--yel);border:1px solid #EED43A;color:var(--ink);font-size:11px;font-weight:800;border-radius:999px;padding:4px 11px}
.hub-flag .material-symbols-outlined{font-size:13px}
.hub-emblem{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px}
.hub-emblem .material-symbols-outlined{font-size:26px}
.hub-emblem.e1{background:#EEF3FA}.hub-emblem.e1 .material-symbols-outlined{color:var(--navy)}
.hub-emblem.e2{background:var(--cor-soft)}.hub-emblem.e2 .material-symbols-outlined{color:var(--cor)}
.hub-emblem.e3{background:var(--green-soft)}.hub-emblem.e3 .material-symbols-outlined{color:var(--green)}
.hub-card h3{margin:0 0 5px;font-size:18px;letter-spacing:-.01em;font-weight:800;color:var(--ink)}
.hub-desc{margin:0 0 20px;color:var(--mut);font-size:13px;line-height:1.55;min-height:41px}
.hub-prog{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.hub-lvl{display:flex;flex-direction:column;gap:6px}
.hub-lvl .lab{font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.06em;text-transform:uppercase}
.hub-lvl .bars{display:flex;align-items:flex-end;gap:4px;height:26px}
.hub-lvl .bars i{width:9px;border-radius:3px;background:var(--line2)}
.hub-lvl .bars i:nth-child(1){height:9px}.hub-lvl .bars i:nth-child(2){height:13px}
.hub-lvl .bars i:nth-child(3){height:17px}.hub-lvl .bars i:nth-child(4){height:21px}.hub-lvl .bars i:nth-child(5){height:26px}
.hub-lvl .bars i.on{background:var(--cor)}
.hub-lvl .num{font-size:12px;color:var(--mut)}
.hub-lvl .num b{color:var(--ink);font-size:13px}
.hub-ring{position:relative;width:64px;height:64px}
.hub-ring svg{display:block}
.hub-ring .bg{stroke:var(--line);fill:none;stroke-width:6}
.hub-ring .fg{fill:none;stroke-width:6;stroke-linecap:round}
.hub-ring .val{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:800;text-align:center}
.hub-ring .val small{display:block;font-size:8.5px;color:var(--mut);font-weight:700;line-height:1;margin-top:1px}
.hub-go{border:0;border-radius:12px;background:var(--cor);color:#fff;width:100%;
  font:800 14px "Plus Jakarta Sans",sans-serif;padding:14px 16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 6px 16px -8px rgba(200,68,44,.5);transition:background .15s,transform .12s}
.hub-go:hover{background:var(--cor-deep);transform:translateY(-1px)}
.hub-go .material-symbols-outlined{font-size:18px}
.hub-pickwrap{margin-top:auto}
.hub-picking{display:none;align-items:center;gap:9px;color:var(--mut);font-size:13px;padding:14px 2px 2px;justify-content:center}
.hub-picking.show{display:flex}
.hub-spin{width:16px;height:16px;border:2.5px solid var(--line2);border-top-color:var(--cor);border-radius:50%;animation:mlpsp .7s linear infinite}
@keyframes mlpsp{to{transform:rotate(360deg)}}
.hub-picked{display:none;margin-top:14px;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:14px 15px}
.hub-picked.show{display:block;animation:mlpfade .25s ease}
@keyframes mlpfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.hub-picked .pt{font-size:13.5px;font-weight:800;margin:0 0 3px;color:var(--ink)}
.hub-picked .why{font-size:12px;color:var(--mut);margin:0 0 11px;font-family:"Newsreader",serif;font-style:italic}
.hub-picked .start{width:100%;border:1.5px solid var(--cor);background:#fff;color:var(--cor);border-radius:10px;
  font:800 13px "Plus Jakarta Sans",sans-serif;padding:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.hub-picked .start:hover{background:var(--cor-soft);color:var(--cor)}
.hub-picked .start .material-symbols-outlined{font-size:16px}
.hub-err{display:none;margin-top:12px;font-size:12.5px;color:var(--cor-deep);background:var(--cor-soft);border:1px solid var(--cor-line);border-radius:10px;padding:9px 12px}
.hub-err.show{display:block}
.hub-note{padding:0 22px;margin:26px 0 0;color:var(--mut);font-size:12.5px;text-align:center}
.hub-note em{font-family:"Newsreader",serif}
.mlp-hub-login{max-width:560px;margin:30px auto;background:#fff;border:1px solid #ECE8DF;border-radius:14px;padding:22px;text-align:center;font-family:"Plus Jakarta Sans",sans-serif}
.mlp-hub .material-symbols-outlined{font-variation-settings:'FILL' 1;font-family:'Material Symbols Outlined'}
/* v0.42.1 — guard chống CSS theme phá vòng %: khoá kích thước + fill */
.mlp-hub .hub-ring{width:64px;height:64px;flex-shrink:0}
.mlp-hub .hub-ring svg{width:64px !important;height:64px !important;max-width:none !important;display:block}
.mlp-hub .hub-ring circle{fill:none !important}
.mlp-hub .hub-ring .bg{stroke:var(--line) !important;stroke-width:6}
.mlp-hub .hub-ring .val{line-height:1.1}
.mlp-hub .hub-ring .val small{letter-spacing:.02em}
/* v0.43 — chế độ tự động toàn cục */
.hub-auto{margin:0 22px 8px;background:linear-gradient(135deg,#1A1816 0%,#33291f 100%);border-radius:20px;
  padding:22px 24px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  box-shadow:0 10px 28px -16px rgba(26,24,22,.5)}
.hub-auto-l{display:flex;align-items:center;gap:15px;flex:1;min-width:240px}
.hub-auto-ic{width:48px;height:48px;border-radius:14px;background:rgba(255,227,74,.15);display:grid;place-items:center;flex-shrink:0}
.hub-auto-ic .material-symbols-outlined{color:var(--yel);font-size:24px}
.hub-auto h3{margin:0 0 3px;font-size:17px;font-weight:800;color:#fff;letter-spacing:-.01em}
.hub-auto p{margin:0;font-size:12.5px;color:#C9C2B6}
.hub-auto-r{width:280px;max-width:100%}
.hub-auto-r .hub-go{background:var(--yel);color:var(--ink);box-shadow:0 6px 16px -8px rgba(255,227,74,.55)}
.hub-auto-r .hub-go:hover{background:#F2D63C}
.hub-auto-r .hub-picking{color:#C9C2B6}
.hub-auto-r .hub-picked{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.hub-auto-r .hub-picked .pt{color:#fff}
.hub-auto-r .hub-picked .why{color:#C9C2B6}
.hub-auto-r .hub-picked .start{background:var(--yel);border-color:var(--yel);color:var(--ink)}
.hub-auto-r .hub-picked .start:hover{background:#F2D63C;color:var(--ink)}
.hub-auto-r .hub-err{background:rgba(200,68,44,.18);border-color:rgba(200,68,44,.4);color:#F2B4A5}
.hub-picked .skl{display:none;margin:0 0 7px;background:var(--cor-soft);border:1px solid var(--cor-line);color:var(--cor-deep);
  font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 10px;letter-spacing:.03em;text-transform:uppercase}
.hub-picked .skl.show{display:inline-block}
.hub-auto-r .hub-picked .skl{background:rgba(255,227,74,.15);border-color:rgba(255,227,74,.35);color:var(--yel)}
.hub-or{padding:0 24px;margin:20px 0 10px;color:var(--mut);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
@media(max-width:700px){.hub-auto{margin:0 16px 8px}.hub-auto-r{width:100%}}

/* ===== v0.54.19 — Thẻ tài khoản (port từ 9reading) ===== */
.hub-acc{margin:0 22px 22px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:15px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hub-acc-l{display:flex;align-items:center;gap:13px;min-width:0;flex:1}
.hub-avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--cor-soft);color:var(--cor);font-weight:800;font-size:19px}
.hub-acc-info{min-width:0;display:flex;flex-direction:column;gap:2px}
.hub-acc-info b{font-size:15.5px;font-weight:700;line-height:1.3}
.hub-acc-mail{font-size:12.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-acc-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px}
.hub-badge{font-size:11.5px;font-weight:700;border-radius:20px;padding:2px 10px;letter-spacing:.01em}
.hub-badge.is-free{background:#F1EFE9;color:var(--mut)}
.hub-badge.is-paid{background:var(--green-soft);color:var(--green)}
.hub-exp{font-size:11.5px;color:var(--mut)}
.hub-exp.soon{color:var(--cor);font-weight:700}
.hub-acc-r{display:flex;gap:8px;flex-wrap:wrap}
/* v0.54.20 — <button> và <a> phải trông HỆT nhau: Flatsome style riêng cho
   button (text-transform:uppercase, letter-spacing, line-height, min-height,
   margin-bottom) khiến "Sửa thông tin" hoa toàn bộ và lệch cao so với thẻ <a>
   "Đăng xuất". Reset cứng các thuộc tính đó cho cả hai. */
.mlp-hub .hub-abtn,
.mlp-hub button.hub-abtn,
.mlp-hub a.hub-abtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line2);background:#fff;border-radius:10px;padding:0 14px;
  height:38px;min-height:38px;line-height:1;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:13.5px;font-weight:600;
  text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;text-decoration:none;
  margin:0;box-shadow:none;text-shadow:none;transition:border-color .12s,color .12s,background .12s}
.mlp-hub .hub-abtn:hover,
.mlp-hub button.hub-abtn:hover,
.mlp-hub a.hub-abtn:hover{border-color:var(--cor-line);color:var(--cor);background:var(--cor-soft)}
.mlp-hub .hub-abtn:focus{outline:none;border-color:var(--cor)}
.mlp-hub .hub-abtn .material-symbols-outlined{font-size:18px;line-height:1}

/* modal sửa thông tin */
/* ===== v0.54.21 — MODAL SỬA THÔNG TIN =====
   QUAN TRỌNG: modal được JS chuyển ra thẳng <body> (để thoát containing block
   của Flatsome), nên NÓ KHÔNG CÒN NẰM TRONG .mlp-hub -> mọi rule/biến scope
   trong .mlp-hub sẽ KHÔNG áp dụng. Vì vậy khối này tự khai lại biến màu và
   dùng selector độc lập .hub-modal. (Bug v0.54.20: nút Lưu mất nền coral.) */
.hub-modal{--cor:#C8442C;--cor-deep:#A5361F;--cor-soft:#FAECE8;--cor-line:#EFC7BC;
  --ink:#1A1816;--mut:#6F6A63;--line:#ECE8DF;--line2:#E2DDD2;--green:#1E7B4D;
  position:fixed;inset:0;background:rgba(26,24,22,.5);z-index:2147483000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased}
.hub-modal[hidden]{display:none}          /* [hidden] phải thắng display:flex */
.hub-modal *{box-sizing:border-box}
.hub-modal-box{background:#fff;border-radius:18px;width:min(400px,100%);
  padding:22px 24px 24px;max-height:88vh;overflow:auto;
  box-shadow:0 24px 60px rgba(26,24,22,.28)}
.hub-modal-head{display:flex;justify-content:space-between;align-items:center;
  margin:0 0 4px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.hub-modal-head b{font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.hub-modal-x{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;
  color:var(--mut);padding:2px 4px;margin:0;min-height:0}
.hub-modal-x:hover{color:var(--cor)}

.hub-modal .hub-fl{display:block;font-size:12.5px;font-weight:700;color:var(--ink);
  margin:15px 0 6px;text-transform:none;letter-spacing:0}
.hub-modal .hub-fl small{font-weight:500;color:var(--mut);font-size:11.5px}
.hub-modal input{width:100%;border:1.5px solid var(--line2);border-radius:10px;
  padding:0 12px;height:42px;line-height:1;font-family:inherit;font-size:14px;
  color:var(--ink);background:#fff;outline:none;margin:0;box-shadow:none;
  transition:border-color .12s,background .12s}
.hub-modal input:focus{border-color:var(--cor);background:#FFFDFC}
.hub-modal .hub-fs{display:block;font-size:11.5px;color:var(--mut);margin-top:5px}
.hub-modal .hub-fdiv{height:1px;background:var(--line);margin:20px 0 4px}

.hub-modal .hub-facts{display:flex;gap:10px;align-items:center;margin-top:22px}
.hub-modal .hub-save,.hub-modal button.hub-save{flex:1;border:0;background:var(--cor);
  color:#fff;font-family:inherit;font-size:14px;font-weight:700;text-transform:none;
  letter-spacing:0;line-height:1;height:42px;min-height:42px;border-radius:11px;
  padding:0 18px;cursor:pointer;margin:0;box-shadow:none;text-shadow:none;
  transition:background .12s}
.hub-modal .hub-save:hover{background:var(--cor-deep)}
.hub-modal .hub-save:disabled{opacity:.55;cursor:default}
.hub-modal .hub-abtn,.hub-modal button.hub-abtn{display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--line2);background:#fff;border-radius:11px;
  height:42px;min-height:42px;padding:0 18px;font-family:inherit;font-size:14px;
  font-weight:600;text-transform:none;letter-spacing:0;line-height:1;color:var(--ink);
  cursor:pointer;margin:0;box-shadow:none;text-decoration:none}
.hub-modal .hub-abtn:hover{border-color:var(--cor-line);color:var(--cor);background:var(--cor-soft)}
.hub-modal .hub-amsg{margin-top:12px;font-size:12.5px;min-height:16px;text-align:center}
.hub-modal .hub-amsg.ok{color:var(--green)}
.hub-modal .hub-amsg.err{color:var(--cor)}
@media(max-width:480px){
  .hub-modal{padding:12px}
  .hub-modal-box{padding:18px 16px 20px;border-radius:16px;max-height:92vh}
}

@media(max-width:640px){
  .hub-acc{margin:0 14px 18px;padding:13px 14px}
  .hub-acc-r{width:100%}
  .hub-abtn{flex:1;justify-content:center}
}

/* v0.54.20: khoá cuộn nền khi modal mở (tránh cuộn trang phía sau trên mobile) */
body.mlp-modal-open{overflow:hidden}

/* ===== v0.54.25 — Lịch sử luyện tập ===== */
.hub-hist{margin:26px 22px 0}
.hub-hist-h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;
  color:var(--mut);letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.hub-hist-h .material-symbols-outlined{font-size:18px}
.hub-hist-list{display:flex;flex-direction:column;gap:8px}
.hub-hrow{display:flex;align-items:center;gap:14px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:12px 15px;
  text-decoration:none;color:var(--ink);transition:border-color .12s,transform .12s}
a.hub-hrow:hover{border-color:var(--cor-line);transform:translateX(2px)}
.hub-hpct{flex:none;width:52px;height:52px;border-radius:13px;display:grid;place-items:center;
  font-size:17px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.hub-hpct small{font-size:10px;font-weight:700;margin-left:1px}
.hub-hpct.hi{background:var(--green-soft);color:var(--green)}
.hub-hpct.mid{background:#FFF6DC;color:#9A6B00}
.hub-hpct.lo{background:var(--cor-soft);color:var(--cor)}
.hub-hmid{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.hub-hmid b{font-size:14.5px;font-weight:700;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-hmeta{font-size:12px;color:var(--mut);line-height:1.35}
.hub-hwhen{flex:none;font-size:12px;color:var(--mut);white-space:nowrap}
.hub-harrow{flex:none;font-size:20px;color:var(--line2)}
a.hub-hrow:hover .hub-harrow{color:var(--cor)}
@media(max-width:640px){
  .hub-hist{margin:22px 14px 0}
  .hub-hrow{padding:11px 12px;gap:11px}
  .hub-hpct{width:46px;height:46px;border-radius:11px;font-size:15px}
  .hub-hwhen{display:none}          /* giờ đã có trong tooltip; nhường chỗ cho tên bài */
  .hub-hmid b{white-space:normal}
}

/* ===== v0.54.26 — Bài đang làm dở ===== */
.hub-resume{display:flex;align-items:center;gap:14px;margin:0 22px 22px;padding:14px 16px;
  background:var(--cor-soft);border:1.5px solid var(--cor-line);border-radius:16px;
  text-decoration:none;color:var(--ink);transition:border-color .12s,transform .12s}
.hub-resume:hover{border-color:var(--cor);transform:translateY(-1px)}
.hub-res-ic{flex:none;width:44px;height:44px;border-radius:12px;background:#fff;
  display:grid;place-items:center}
.hub-res-ic .material-symbols-outlined{font-size:26px;color:var(--cor)}
.hub-res-mid{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.hub-res-lb{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cor)}
.hub-res-mid b{font-size:15px;font-weight:700;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-res-meta{font-size:12.5px;color:var(--mut)}
.hub-res-go{flex:none;display:inline-flex;align-items:center;gap:2px;font-size:13.5px;
  font-weight:700;color:var(--cor)}
.hub-res-go .material-symbols-outlined{font-size:19px}
.hub-picked.is-resume .pt{color:var(--cor)}
@media(max-width:640px){
  .hub-resume{margin:0 14px 18px;padding:12px 13px;gap:11px}
  .hub-res-go span{display:none}
  .hub-res-go{font-size:0}
  .hub-res-go .material-symbols-outlined{display:inline;font-size:22px}
}

/* ===== v0.54.27 — Thống kê tổng (gộp từ dashboard) ===== */
.hub-sum{margin:0 22px 20px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 20px}
.hub-sumitem{display:flex;flex-direction:column;gap:1px}
.hub-sumitem b{font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.hub-sumitem b small{font-size:13px;font-weight:700;margin-left:1px}
.hub-sumitem span{font-size:12px;color:var(--mut)}
.hub-sumnote{margin-left:auto;font-size:12px;color:var(--mut);
  background:#F5F2EC;border-radius:20px;padding:5px 12px}

/* ===== v0.54.29 — Bảng màu sáng theo trang affiliate 9reading =====
   Thẻ trắng trên nền kem, kicker mono, highlight vàng vệt bút dạ, nút viên
   thuốc coral/viền. Đã BỎ toàn bộ nền tối + gradient của v0.54.27. */
.hub-kick{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.hub-hl{background:linear-gradient(transparent 58%,#FFE9A8 58%);padding:0 3px}
.hub-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:700;border-radius:999px;height:50px;padding:0 28px;
  text-decoration:none;line-height:1;text-transform:none;letter-spacing:0}
.hub-btn .material-symbols-outlined{font-size:19px}
.hub-btn-p{background:var(--cor);color:#fff}
.hub-btn-p:hover{background:var(--cor-deep);color:#fff}
.hub-btn-g{background:#fff;color:var(--ink);border:1.5px solid var(--line2)}
.hub-btn-g:hover{border-color:var(--cor-line);color:var(--cor)}

/* Thẻ HỌC THỬ MIỄN PHÍ — nổi nhất trang: viền coral + dải coral bên trái */
.hub-demo{position:relative;margin:0 22px 22px;background:#FFFCF7;border:1.5px solid var(--cor-line);
  border-radius:18px;padding:26px 28px 26px 32px;display:flex;align-items:center;gap:24px;
  flex-wrap:wrap;overflow:hidden}
.hub-demo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--cor)}
.hub-demo .hub-kick{color:var(--cor)}
.hub-demo-t{flex:1;min-width:250px}
.hub-demo-t h2{margin:0 0 8px;font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.hub-demo-t p{margin:0;font-size:14.5px;color:var(--mut);line-height:1.6;max-width:520px}
.hub-demo .hub-btn{height:52px;font-size:15.5px;box-shadow:0 6px 18px -8px rgba(200,68,44,.55)}

/* Nút bị khoá + nhãn PRO */
.hub-go.is-locked{opacity:.5;filter:grayscale(.4)}
.hub-go.is-locked:hover{opacity:.68}
.hub-prolock{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:4px;
  background:#FFE9A8;border:1px solid #F4D97F;border-radius:20px;padding:2px 9px;
  font-size:10.5px;font-weight:800;color:#6B5314;letter-spacing:.04em}
.hub-prolock .material-symbols-outlined{font-size:13px}

/* Popup nâng cấp */
/* v0.54.30 — FIX popup mất màu: JS đẩy .hub-ov ra <body> nên nó KHÔNG còn nằm
   trong .mlp-hub — nơi khai --cor/--ink/--line. Biến rỗng => nút coral thành nền
   trong suốt, chữ trắng trên nền trắng (đúng lỗi trong ảnh). Khai lại tại đây. */
.hub-ov{--ink:#1A1816;--mut:#6F6A63;--line:#ECE8DF;--line2:#E2DDD2;
  --cor:#C8442C;--cor-deep:#A5361F;--cor-line:#EFC7BC;
  position:fixed;inset:0;background:rgba(26,24,22,.42);z-index:2147483000;display:flex;
  align-items:center;justify-content:center;padding:20px;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.hub-ov[hidden]{display:none}
.hub-mod{width:min(500px,100%);background:#fff;border-radius:20px;padding:34px 34px 32px;position:relative;
  box-shadow:0 24px 60px rgba(26,24,22,.22);color:var(--ink)}
.hub-mod-x{position:absolute;top:14px;right:16px;border:0;background:none;color:#B4AEA6;font-size:24px;
  cursor:pointer;line-height:1;padding:2px 6px;min-height:0}
.hub-mod-x:hover{color:var(--ink)}
.hub-mod h3{margin:0 0 12px;font-size:27px;font-weight:800;letter-spacing:-.025em;line-height:1.25}
.hub-mod p{margin:0 0 26px;font-size:15px;color:var(--mut);line-height:1.65}
.hub-mod-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* thắng style button/a mặc định của theme trong phạm vi popup */
.hub-ov .hub-btn,.hub-ov a.hub-btn{margin:0;box-shadow:none;text-shadow:none;min-height:0}
.hub-ov .hub-btn-p,.hub-ov a.hub-btn-p{background:var(--cor);color:#fff}
.hub-ov .hub-btn-p:hover{background:var(--cor-deep);color:#fff}
.hub-ov .hub-btn-g,.hub-ov a.hub-btn-g{background:#fff;color:var(--ink);border:1.5px solid var(--line2)}

/* Khối giới thiệu Pro — thẻ sáng */
.hub-up{margin:26px 22px 0;background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:30px 30px 28px;color:var(--ink)}
.hub-up h2{margin:0 0 10px;font-size:25px;line-height:1.3;font-weight:800;letter-spacing:-.02em;max-width:640px}
.hub-up-sub{margin:0 0 24px;font-size:14.5px;color:var(--mut);max-width:620px;line-height:1.65}
.hub-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 28px;margin-bottom:26px;max-width:800px}
.hub-feat{display:flex;gap:12px;align-items:flex-start}
.hub-feat .material-symbols-outlined{font-size:21px;color:var(--cor);flex:none;margin-top:1px}
.hub-feat b{display:block;font-size:14px;font-weight:700;margin-bottom:3px}
.hub-feat span{font-size:12.5px;color:var(--mut);line-height:1.55}
.hub-upstats{display:flex;gap:30px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.hub-upstats b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em}
.hub-upstats span{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;color:var(--mut);
  letter-spacing:.06em;text-transform:uppercase}
/* v0.54.31: nút trong khối Pro/thẻ Demo là <a> -> Flatsome style link (màu xanh,
   gạch chân, không padding). Ép lại để hiện đúng dạng viên thuốc coral. */
.mlp-hub a.hub-btn,.mlp-hub a.hub-btn:hover,.mlp-hub a.hub-btn:focus{text-decoration:none;box-shadow:none}
.mlp-hub a.hub-btn-p,.mlp-hub a.hub-btn-p:visited{background:var(--cor);color:#fff}
.mlp-hub a.hub-btn-p:hover{background:var(--cor-deep);color:#fff}
.mlp-hub a.hub-btn-g,.mlp-hub a.hub-btn-g:visited{background:#fff;color:var(--ink)}
.mlp-hub a.hub-btn-g:hover{border-color:var(--cor-line);color:var(--cor)}
@media(max-width:900px){.hub-feats{grid-template-columns:1fr}}
@media(max-width:640px){
  .hub-demo{margin:0 14px 18px;padding:20px 18px 20px 22px;gap:16px}
  .hub-demo-t h2{font-size:20px}
  .hub-demo .hub-btn,.hub-mod-acts .hub-btn{width:100%}
  .hub-up{margin:22px 14px 0;padding:24px 18px}
  .hub-up h2{font-size:21px}
  .hub-mod{padding:26px 20px 24px}
  .hub-mod h3{font-size:22px}
  .hub-upstats{gap:18px}
}

/* v0.54.28 — hết bài demo: đổi dòng lỗi đỏ thành hộp mời nâng cấp */
.hub-err.is-paywall{display:block;background:#241F1C;color:#EDE7E1;border:0;border-radius:14px;
  padding:15px 17px;font-size:13.5px;line-height:1.6;text-align:left}
.hub-errcta{display:inline-flex;align-items:center;gap:6px;margin-top:11px;background:var(--yel);
  color:#241F1C;border-radius:10px;height:40px;padding:0 18px;font-size:14px;font-weight:800;
  text-decoration:none}
.hub-errcta:hover{filter:brightness(.95);color:#241F1C}

/* v0.54.30 — FIX: dải "Để hệ thống chọn giúp bạn" khi bị khoá.
   Bản trước dùng :has() và nhắm sai phần tử chữ (b/span) trong khi markup thật là
   h3/p -> nền chuyển sáng mà CHỮ VẪN TRẮNG, không đọc được. Nay gắn thẳng class
   .is-locked từ PHP và nhắm đúng h3/p. */
.mlp-hub .hub-auto.is-locked{background:#F7F5F0;border:1px solid var(--line)}
.mlp-hub .hub-auto.is-locked h3{color:var(--ink)}
.mlp-hub .hub-auto.is-locked p{color:var(--mut)}
.mlp-hub .hub-auto.is-locked .hub-auto-ic{background:#EDE9E1}
.mlp-hub .hub-auto.is-locked .hub-auto-ic .material-symbols-outlined{color:var(--mut)}
/* nút khoá trên nền sáng: vàng nhạt sẽ chìm -> chuyển coral mờ cho vẫn đọc được */
.mlp-hub .hub-auto.is-locked .hub-auto-r .hub-go{background:var(--cor);color:#fff;box-shadow:none}

/* ===== v0.54.33 — Thẻ yêu cầu đăng nhập (mẫu 9reading /affiliate) ===== */
.hub-logincard{background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:38px 40px 36px;max-width:760px;margin:0 auto}
.hub-logincard h2{margin:0 0 14px;font-size:31px;font-weight:800;letter-spacing:-.025em;
  line-height:1.22;color:var(--ink)}
.hub-logincard p{margin:0 0 28px;font-size:15.5px;color:var(--mut);line-height:1.65;max-width:560px}
.hub-login-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
@media(max-width:640px){
  .hub-logincard{padding:26px 20px 24px;border-radius:16px}
  .hub-logincard h2{font-size:24px}
  .hub-login-acts .hub-btn{width:100%}
}

/* ===== v0.54.35 — Dải đặt mật khẩu (khách mua Pro qua Woo) ===== */
.hub-pw{position:relative;margin:0 22px 22px;background:#FFFCF7;border:1.5px solid var(--cor-line);
  border-radius:18px;padding:26px 28px 26px 32px;overflow:hidden}
.hub-pw::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--cor)}
.hub-pw .hub-kick{color:var(--cor)}
.hub-pw h2{margin:0 0 8px;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.hub-pw p{margin:0 0 18px;font-size:14.5px;color:var(--mut);line-height:1.6;max-width:560px}
.hub-pw-form{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.hub-pw-field{position:relative;flex:1;min-width:240px;max-width:360px}
.hub-pw-field input{width:100%;font-family:inherit;font-size:14.5px;height:50px;padding:0 44px 0 15px;
  border:1.5px solid var(--line2);border-radius:999px;background:#fff;color:var(--ink);outline:none}
.hub-pw-field input:focus{border-color:var(--cor)}
.hub-pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;
  cursor:pointer;color:var(--mut);padding:6px;line-height:1;min-height:0}
.hub-pw-eye:hover{color:var(--cor)}
.hub-pw-eye .material-symbols-outlined{font-size:20px}
.hub-pw-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:13px}
.hub-pw-strength{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.hub-pw-strength.w{color:var(--cor)}
.hub-pw-strength.m{color:#9A6B00}
.hub-pw-strength.s{color:var(--green)}
.hub-pw-later{border:0;background:none;color:var(--mut);font-family:inherit;font-size:13px;
  text-decoration:underline;cursor:pointer;padding:0;min-height:0}
.hub-pw-later:hover{color:var(--cor)}
.hub-pw-err{color:var(--cor);font-size:13px;margin-top:11px;display:none}
.hub-pw.ok{border-color:#BFE0CD;background:#F4FAF6}
.hub-pw.ok::before{background:var(--green)}
.hub-pw.ok .hub-kick{color:var(--green)}
@media(max-width:640px){
  .hub-pw{margin:0 14px 18px;padding:20px 18px 20px 22px}
  .hub-pw h2{font-size:19px}
  .hub-pw-field{max-width:none;min-width:0;width:100%}
  .hub-pw-form .hub-btn{width:100%}
}