/* Practice dashboard v2 — shared by the Pro and Free views. Generated from the approved mockups; keep edits here, not inline. */ :root { --bg: #F8FAFC; --panel: #FFFFFF; --ink: #0F172A; --soft: #475569; --muted: #64748B; --line: #E2E8F0; --line-strong: #CBD5E1; --accent: #E04D36; --accent-dark: #BE3A25; --accent-soft: #FEF2F2; --easy: #059669; --easy-bg: #D1FAE5; --head: 'Plus Jakarta Sans', 'Manrope', 'Noto Sans', system-ui, sans-serif; --body: 'Noto Sans', system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font: inherit; } :focus-visible { outline: 3px solid rgba(224, 77, 54, 0.35); outline-offset: 3px; border-radius: 8px; } .revbar { background: #0F172A; color: #fff; padding: 9px 18px; font-size: 12.5px; } .revbar b { font-weight: 700; color: #38BDF8; } .revbar span { color: #94A3B8; } .revbar button { margin-left: 10px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; transition: 0.2s; } .revbar button:hover { background: rgba(255,255,255,0.2); } .mrp-topbar { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .top-inner { max-width: 1360px; height: 68px; margin: auto; padding: 0 24px; display: flex; align-items: center; gap: 36px; } .logo { font: 800 24px/1 var(--head); letter-spacing: -0.03em; white-space: nowrap; } .logo b { color: var(--accent); } .logo span { font-size: 16px; color: var(--muted); font-weight: 600; } .mrp-nav { display: flex; gap: 28px; flex: 1; min-width: 0; } .mrp-nav a { font-size: 15px; font-weight: 600; color: var(--soft); padding: 22px 0; position: relative; transition: 0.2s; white-space: nowrap; } .mrp-nav a:hover { color: var(--ink); } .mrp-nav a.active { color: var(--ink); } .mrp-nav a.active:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); border-radius: 4px 4px 0 0; } .mrp-shell { max-width: 1360px; margin: auto; padding: 32px 24px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; } .mrp-shell > * { min-width: 0; } .mrp-side, .mrp-col { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02); } .mrp-side { position: sticky; top: 100px; padding: 20px 16px 16px; } .side-head { padding: 0 8px 16px; } .eyebrow { font-size: 12.5px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .side-head h1 { margin: 0 0 6px; font: 800 22px/1.2 var(--head); letter-spacing: -0.02em; } .side-head p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; } .mrp-types { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .type-btn { width: 100%; border: 0; background: transparent; border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; color: var(--soft); font-size: 14.5px; font-weight: 600; min-width: 0; transition: 0.15s; } .type-btn:hover { background: #F1F5F9; color: var(--ink); } .type-btn[aria-current="true"] { background: var(--accent-soft); color: var(--accent-dark); font-weight: 800; } .type-btn > span:nth-child(2) { min-width: 0; } .type-prog { display: flex; gap: 4px; flex: none; } .type-prog i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); } .type-prog i.on { background: var(--easy); box-shadow: none; } .type-btn[aria-current="true"] .type-prog i { background: #FCA5A5; } .type-btn[aria-current="true"] .type-prog i.on { background: var(--accent); } .group-label { padding: 18px 12px 6px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .side-cta { margin: 20px 8px 4px; padding-top: 16px; border-top: 1px solid var(--line); } .side-cta p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--soft); } .side-cta-btn { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; transition: 0.2s; box-shadow: 0 4px 12px rgba(15,23,42,0.15); } .side-cta-btn:hover { background: #334155; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,0.2); } /* PRO account info */ .mrp-side { display: flex; flex-direction: column; max-height: calc(100vh - 120px); } .mrp-side .mrp-types { overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .side-acct { margin-top: auto; border-top: 1px solid var(--line); padding: 20px 8px 4px; background: transparent; flex: none; } .acct-row { display: flex; align-items: center; gap: 12px; } .acct-av { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex: none; box-shadow: 0 2px 8px rgba(224, 77, 54, 0.3); } .acct-meta { min-width: 0; flex: 1; } .acct-name { font-weight: 700; font-size: 14.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acct-plan { display: inline-flex; align-items: center; padding: 2px 8px; margin-top: 4px; border-radius: 999px; background: var(--easy-bg); color: var(--easy); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-family: 'JetBrains Mono', monospace; } .acct-exp { font-size: 12.5px; color: var(--muted); margin-top: 10px; } .acct-btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--line-strong); color: var(--soft); font-size: 13px; font-weight: 700; transition: 0.15s; width: 100%; text-decoration: none; } .acct-btn:hover { border-color: var(--ink); color: var(--ink); } .acct-links { display: flex; gap: 12px; justify-content: center; margin-top: 12px; font-size: 12.5px; color: var(--muted); } .acct-links a { color: var(--muted); text-decoration: none; } .acct-links a:hover { color: var(--accent); } .mrp-col { padding: 36px 40px; } /* Type Header */ .type-top { padding-bottom: 28px; border-bottom: 1px solid var(--line); } .type-copy h2 { margin: 0; font: 800 clamp(28px, 2.5vw, 36px)/1.2 var(--head); letter-spacing: -0.03em; } .type-copy > p { margin: 12px 0 0; color: var(--soft); font-size: 16px; line-height: 1.6; max-width: 800px; } /* Pro Stats */ .pro-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0 8px; } .pro-stat { border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; background: #F8FAFC; transition: 0.2s; } .pro-stat:hover { border-color: var(--line-strong); background: #fff; box-shadow: 0 4px 12px rgba(15,23,42,0.03); } .pro-stat .k { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .pro-stat .v { font-size: 24px; font-weight: 800; margin-top: 8px; line-height: 1; font-family: var(--head); } .pro-stat .v.up { color: var(--easy); } .pro-stat .v.mid { color: #D97706; } .pro-stat .v.low { color: #DC2626; } .spark { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 12px; } .spark i { display: block; height: 100%; background: var(--easy); border-radius: 3px; } .pro-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } .pro-primary { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14.5px; font-weight: 700; box-shadow: 0 4px 12px rgba(224, 77, 54, 0.25); transition: 0.2s; white-space: nowrap; line-height: 1; } .pro-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(224, 77, 54, 0.3); color: #fff; } .pro-primary svg, .pro-ghost svg { width: 15px; height: 15px; flex: none; } .pro-ghost { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; background: #fff; border: 1px solid var(--line-strong); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: 0.2s; } .pro-ghost:hover { border-color: var(--accent); color: var(--accent); } /* Free specific (kept for layout consistency if needed) */ .prog-row { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .prog-locked { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; background: #F1F5F9; color: var(--muted); border: 1px dashed var(--line-strong); font-size: 13.5px; font-weight: 700; font-family: inherit; cursor: pointer; transition: 0.15s; white-space: nowrap; line-height: 1; } .prog-locked svg { width: 15px; height: 15px; flex: none; } .prog-locked:hover { background: #fff; border-color: var(--accent); color: var(--accent); } .prog-locked .pro { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; background: #FEF2F2; color: var(--accent); border: 1px solid #FECACA; border-radius: 999px; padding: 3px 8px; } /* Demos */ .demo-section { padding-top: 32px; } .section-head { margin-bottom: 20px; } .section-head h3 { margin: 0; font: 800 20px/1.2 var(--head); color: var(--ink); } .section-head p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; } .demo-src { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--easy); background: var(--easy-bg); border-radius: 99px; padding: 4px 10px; vertical-align: middle; margin-left: 10px; } .demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .demo-card { position: relative; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 22px; display: flex; flex-direction: column; min-width: 0; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 6px rgba(15,23,42,0.02); } .demo-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 12px 24px -8px rgba(15,23,42,0.1); } .demo-card:hover .start { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .demo-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; } .demo-num { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--body); color: var(--muted); } .demo-num b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #F1F5F9; font: 800 13px/1 var(--head); color: var(--soft); } .demo-title { margin: 0; font: 800 18px/1.35 var(--head); letter-spacing: -0.01em; } .demo-desc { margin-top: 10px; color: var(--soft); font-size: 14.5px; line-height: 1.6; } .done { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--easy-bg); color: var(--easy); font-size: 12px; font-weight: 700; white-space: nowrap; } .done svg { width: 12px; height: 12px; } .card-body { flex: 1; margin-bottom: 20px; } .start { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 700; transition: 0.2s; } .stretch:after { content: ""; position: absolute; inset: 0; } /* Upgrade & About (Free) */ .upgrade { margin-top: 36px; border: 1px solid #FECACA; background: #FEF2F2; border-radius: 16px; padding: 24px 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 30px; } .upgrade h4 { margin: 0; font: 800 18px/1.3 var(--head); color: var(--ink); } .upgrade p { margin: 6px 0 0; color: var(--soft); font-size: 14.5px; } .upgrade-btn { flex: none; min-height: 48px; padding: 0 24px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(224, 77, 54, 0.25); transition: 0.2s; } .upgrade-btn:hover { background: var(--accent-dark); transform: translateY(-1px); } .about { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; } .about h4 { margin: 0; font: 800 17px/1.3 var(--head); } .about p { margin: 8px 0 0; color: var(--soft); font-size: 14.5px; max-width: 730px; } .benefits { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; } .benefit { font-size: 13.5px; color: var(--soft); } .benefit:before { content: "✓"; color: var(--easy); font-weight: 800; margin-right: 6px; } .about-link { font-size: 14.5px; font-weight: 800; color: var(--accent); white-space: nowrap; } .about-link:hover { color: var(--accent-dark); } /* Charts (Pro) */ .chartbox { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 20px 24px 16px; margin-top: 16px; box-shadow: 0 2px 8px rgba(15,23,42,0.02); } .chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .chart-head h4 { margin: 0; font-size: 16px; font-weight: 800; font-family: var(--head); } .chart-head span { font-size: 13px; color: var(--muted); } .chart-legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--muted); } .chart-legend b { color: var(--ink); font-weight: 700; } .hist { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-top: 16px; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,0.02); } .hist-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line); transition: 0.15s; } .hist-row:first-child { border-top: 0; } .hist-row:hover { background: #F8FAFC; } .hist-t { flex: 1; min-width: 0; } .hist-t b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); } .hist-t span { font-size: 12.5px; color: var(--muted); margin-top: 2px; display: block; } .pct { font-size: 13.5px; font-weight: 800; border-radius: 8px; padding: 4px 10px; } .pct.hi { background: var(--easy-bg); color: var(--easy); } .pct.mid { background: #FEF3C7; color: #D97706; } .pct.lo { background: #FEE2E2; color: #DC2626; } .hist-link { font-size: 13.5px; font-weight: 700; color: var(--accent); transition: 0.15s; white-space: nowrap; } .hist-link:hover { color: var(--accent-dark); } /* Responsive */ @media(min-width: 981px) { /* Each column scrolls on its own, like the mockup — but WITHOUT the mockup's `body{overflow:hidden}`, which would lock the whole WordPress page (header, footer, everything). Instead both columns are sticky and capped to the viewport, so the shell never grows taller than the screen and the page itself keeps scrolling normally. --mrp-top = space reserved for a sticky theme header; JS measures it. */ .mrp-dash2 { --mrp-top: 100px; } .mrp-dash2 .mrp-shell { width: 100%; align-items: start; } /* CHỈ cột trái cố định. Cột phải phải chảy tự do: nội dung của nó (biểu đồ + lịch sử làm bài) dài hơn màn hình, mà một phần tử sticky cao hơn viewport sẽ bị ghim lại nên phần dưới không bao giờ cuộn tới — đúng lỗi đã gặp ở cột trái. Cột phải cuộn theo trang như nội dung bình thường. */ .mrp-dash2 .mrp-side { position: sticky; top: var(--mrp-top); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .mrp-dash2 .mrp-col { position: static; max-height: none; overflow: visible; } /* Sidebar như mockup: chỉ DANH SÁCH dạng bài cuộn bên trong, còn khối tài khoản / CTA luôn ghim ở đáy cột — không trôi mất khi cuộn. */ /* padding-bottom = 0 để khối dính chạm đáy thật của vùng cuộn; nếu không sẽ hở một khe và dòng cuối của danh sách lộ ra phía dưới. */ .mrp-dash2 .mrp-side { display: flex; flex-direction: column; overflow: hidden; } .mrp-dash2 .mrp-side .mrp-types { overflow: visible; flex: 0 0 auto; min-height: 0; padding-right: 4px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .mrp-dash2 .side-acct, .mrp-dash2 .side-cta { flex: none; margin-top: auto; } /* Lớp bảo hiểm: dù phép tính chiều cao có sai vì zoom trình duyệt, admin bar hay container của theme, khối tài khoản/CTA vẫn dính đáy cột và luôn thấy. */ .mrp-dash2 .side-acct, .mrp-dash2 .side-cta { position: sticky; bottom: 0; z-index: 3; /* nền ĐỤC + phủ hết bề ngang cột, nếu không danh sách phía sau sẽ lộ xuyên qua khi cuộn */ background: #fff; margin-left: -16px; margin-right: -16px; padding-left: 24px; padding-right: 24px; padding-bottom: 14px; box-shadow: 0 -8px 12px -8px rgba(15, 23, 42, .12); } .mrp-types::-webkit-scrollbar, .mrp-col::-webkit-scrollbar { width: 11px; } .mrp-types::-webkit-scrollbar-track, .mrp-col::-webkit-scrollbar-track { background: transparent; } .mrp-types::-webkit-scrollbar-thumb, .mrp-col::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid #fff; background-clip: padding-box; } .mrp-types:hover::-webkit-scrollbar-thumb, .mrp-col:hover::-webkit-scrollbar-thumb { background: #94A3B8; background-clip: padding-box; } } @media(max-width: 1100px) { .demo-grid { grid-template-columns: 1fr 1fr; } } @media(max-width: 980px) { .mrp-shell { grid-template-columns: 1fr; padding: 20px 16px; gap: 20px; } .mrp-side { position: static; padding: 16px; } .side-head { display: none; } .mrp-types { flex-direction: row; gap: 8px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: none; } .mrp-types::-webkit-scrollbar { display: none; } .type-btn { flex: 0 0 auto; width: auto; border: 1px solid var(--line); background: #fff; padding: 8px 14px; } .group-label { display: none; } .side-cta { display: none; } .mrp-col { padding: 24px 20px; } } @media(max-width: 700px) { .mrp-nav { display: none; } .top-inner { padding: 0 16px; gap: 16px; } .mrp-shell { padding: 16px; gap: 16px; } .mrp-col { padding: 24px 16px; } .demo-grid { grid-template-columns: 1fr; } .upgrade { grid-template-columns: 1fr; } .upgrade-btn { width: 100%; } .about { grid-template-columns: 1fr; } .about-link { justify-self: start; } .pro-stats { grid-template-columns: 1fr 1fr; } } /* Modals */ .ov { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,0.6); backdrop-filter: blur(4px); } .ov.open { display: flex; } .modal { position: relative; width: 100%; max-width: 500px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 24px; padding: 32px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); animation: pop .22s ease-out; } @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } .modal-x { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: 0.2s; } .modal-x:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .modal-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: #FEF3C7; border: 1px solid #FDE68A; color: #92400E; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } .modal-tag svg { width: 14px; height: 14px; } .modal h3 { margin: 16px 0 10px; font: 800 24px/1.3 var(--head); letter-spacing: -0.02em; } .modal .lede { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--soft); } .modal ul { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 14px; } .modal li { position: relative; padding-left: 28px; font-size: 14.5px; line-height: 1.55; color: var(--soft); } .modal li:before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .modal li b { color: var(--ink); font-weight: 700; } .modal-go { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 15.5px; font-weight: 800; box-shadow: 0 4px 12px rgba(224, 77, 54, 0.25); transition: 0.2s; } .modal-go:hover { background: var(--accent-dark); transform: translateY(-1px); } .modal-later { display: block; width: 100%; margin-top: 12px; padding: 8px; border: 0; background: none; color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: 0.2s; } .modal-later:hover { color: var(--ink); } @media(max-width: 520px) { .modal { padding: 24px 20px 20px; } .modal h3 { font-size: 21px; } } @media(prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ===== trang Thông tin tài khoản (hiện ở cột phải) ===== */ .acct-btn.is-active{background:#C8442C !important;border-color:#C8442C !important;color:#fff !important} .acc-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line,#E8E2D2);margin-bottom:22px} .acc-hero .av{width:64px;height:64px;border-radius:50%;background:var(--accent,#C8442C);color:#fff;display:flex;align-items:center; justify-content:center;font-size:24px;font-weight:800;flex:none} .acc-hero .who{flex:1;min-width:200px} .acc-hero .nm{font-size:24px;font-weight:800;letter-spacing:-.4px;line-height:1.2} .acc-hero .em{font-size:13.5px;color:#8b857c;margin-top:3px} .acc-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px} .acc-tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; border-radius:99px;padding:4px 10px} .acc-tag.pro{background:#eef4ee;color:#2F5D3A} .acc-tag.exp{background:#F4F1E8;color:#6B6258} .acc-hero-actions{display:flex;gap:8px;flex-wrap:wrap;flex:none} .acc-act{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:11px;font-size:12.5px;font-weight:700; text-decoration:none;font-family:inherit;cursor:pointer;background:#fff;border:1px solid rgba(15,23,42,.16);color:#0f172a} .acc-act:hover{border-color:var(--accent,#C8442C);color:var(--accent,#C8442C)} .acc-act.primary{background:var(--accent,#C8442C);color:#fff;border-color:transparent} .acc-act.primary:hover{background:#A23420;color:#fff} .acc-act.danger{color:#b32d2e;border-color:rgba(179,45,46,.28)} .acc-act.danger:hover{background:#fdecea;border-color:#b32d2e;color:#b32d2e} .acc-bars{display:flex;flex-direction:column;gap:10px} .acc-bar{display:flex;align-items:center;gap:13px;font-size:13px} .acc-bar .nm{flex:0 0 210px;color:#2D2A26} .acc-bar .tr{flex:1;height:9px;border-radius:5px;background:#F1EDE3;overflow:hidden} .acc-bar .tr i{display:block;height:100%;border-radius:5px} .acc-bar .pc{width:46px;text-align:right;font-weight:800} .acc-bar.best .tr i{background:#2F5D3A}.acc-bar.best .pc{color:#2F5D3A} .acc-bar.worst .tr i{background:#b32d2e}.acc-bar.worst .pc{color:#b32d2e} .acc-two{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:900px){.acc-two{grid-template-columns:1fr}} .acc-panel{border:1px solid var(--line,#E8E2D2);border-radius:14px;padding:15px 16px;background:#fff} .acc-panel h4{margin:0 0 4px;font-size:13.5px;font-weight:800} .acc-panel .sub{font-size:11.5px;color:#8b857c;margin-bottom:12px} .acc-plan-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:9px 0;border-top:1px solid #F1EDE3} .acc-plan-row:first-of-type{border-top:0} .acc-plan-row b{font-weight:700} /* ===== bản FREE ===== */ .mrp-side .side-cta-btn{background:#C8442C !important;color:#fff !important;box-shadow:0 4px 12px rgba(200,68,44,.22) !important} .mrp-side .side-cta-btn:hover{background:#A23420 !important;transform:translateY(-1px)} .locked{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 17px;border-radius:12px;background:#F4F1E8; color:#9b948a;border:1px dashed #ddd5c2;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer; white-space:nowrap;line-height:1;transition:.15s} .locked:hover{background:#fffbea;border-color:#e2cf93;color:#8B6F00} .locked svg{width:15px;height:15px;flex:none} .locked .pro{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.07em;text-transform:uppercase; background:#fffbea;color:#8B6F00;border:1px solid #f0dd9a;border-radius:99px;padding:2px 7px} .demo-src{display:inline-flex;align-items:center;gap:6px;margin-left:9px;font-family:'JetBrains Mono',monospace;font-size:9px; font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#2F5D3A;background:#eef4ee;border-radius:99px;padding:3px 9px} .upg{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:22px; border:1px solid #f0dd9a;background:#fffdf5;border-radius:16px;padding:18px 20px} .upg h4{margin:0 0 5px;font-size:15px;font-weight:800} .upg p{margin:0;font-size:13px;color:#6B6258;line-height:1.6;max-width:640px} .upg a{flex:none;display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:12px;background:#C8442C; color:#fff;font-size:13.5px;font-weight:800;text-decoration:none} .upg a:hover{background:#A23420;color:#fff} /* popup Pro */ .acc-ov{position:fixed;inset:0;background:rgba(15,23,42,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); display:none;align-items:center;justify-content:center;padding:20px;z-index:9999} .acc-ov.open{display:flex} .acc-modal{position:relative;background:#fff;border-radius:22px;width:100%;max-width:520px;max-height:92vh;overflow-y:auto; box-shadow:0 30px 70px rgba(0,0,0,.34);padding:30px 28px 26px;animation:accPop .26s cubic-bezier(.2,.9,.3,1.2)} @keyframes accPop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}} .acc-x{position:absolute;top:14px;right:16px;width:30px;height:30px;border-radius:50%;border:1px solid #E8E2D2;background:#fff; color:#6B6258;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0} .acc-x:hover{border-color:#C8442C;color:#C8442C} .acc-tag{display:inline-flex;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;border-radius:99px;padding:5px 11px;background:#fffbea;color:#8B6F00;border:1px solid #f0dd9a} .acc-li{font-size:13.5px;line-height:1.6;color:#5C5853;margin-bottom:9px} .acc-li b{color:#1A1816} .acc-go{display:flex;align-items:center;justify-content:center;height:48px;border-radius:12px;background:#C8442C;color:#fff; font-size:15px;font-weight:800;text-decoration:none;margin-top:4px} .acc-go:hover{background:#A23420;color:#fff} .acc-later{display:block;margin:12px auto 0;background:none;border:0;color:#6B6258;font-size:13px;font-family:inherit; cursor:pointer;text-decoration:underline;text-underline-offset:3px} /* ===== khối tính năng nổi bật (bản FREE) ===== */ .feat-sec{margin-top:26px;padding-top:24px;border-top:1px solid var(--line,#E8E2D2)} .feat-kicker{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:#C8442C;margin-bottom:8px} .feat-sec h3{margin:0 0 6px;font-size:21px;font-weight:800;letter-spacing:-.3px;line-height:1.3} .feat-sec .feat-lede{margin:0 0 18px;font-size:13.5px;color:#6B6258;line-height:1.65;max-width:680px} .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:900px){.feat-grid{grid-template-columns:1fr}} .feat{border:1px solid var(--line,#E8E2D2);border-radius:14px;padding:16px 17px;background:#fff;transition:.15s} .feat:hover{border-color:#d8cfbc;box-shadow:0 8px 20px rgba(15,23,42,.06);transform:translateY(-1px)} .feat-top{display:flex;align-items:center;gap:10px;margin-bottom:7px} .feat-ic{width:32px;height:32px;border-radius:9px;background:#fbe9e4;color:#C8442C;display:flex;align-items:center; justify-content:center;font-size:15px;flex:none} .feat h4{margin:0;font-size:14.5px;font-weight:800;line-height:1.3} .feat p{margin:0;font-size:13px;color:#6B6258;line-height:1.6} .feat p b{color:#1A1816;font-weight:700} .feat-proof{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;padding:16px 18px;border-radius:14px; background:#fffdf5;border:1px solid #f0dd9a} .feat-proof div{min-width:120px} .feat-proof .num{font-family:'Newsreader',Georgia,serif;font-style:italic;font-size:26px;font-weight:500;color:#C8442C;line-height:1.1} .feat-proof .lbl{font-size:11.5px;color:#6B6258;margin-top:3px;line-height:1.45} .feat-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px} .feat-cta p{margin:0;font-size:13px;color:#6B6258;max-width:600px;line-height:1.6} .feat-cta a{flex:none;display:inline-flex;align-items:center;height:46px;padding:0 24px;border-radius:12px;background:#C8442C; color:#fff;font-size:14.5px;font-weight:800;text-decoration:none;box-shadow:0 4px 12px rgba(200,68,44,.25)} .feat-cta a:hover{background:#A23420;color:#fff;transform:translateY(-1px)} /* nút ẩn/hiện khối giới thiệu tính năng */ .feat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap} .feat-toggle{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:99px; background:#fff;border:1px solid rgba(15,23,42,.16);color:#6B6258;font-size:11.5px;font-weight:700; font-family:inherit;cursor:pointer;white-space:nowrap} .feat-toggle:hover{border-color:#C8442C;color:#C8442C} .feat-show{display:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--line,#E8E2D2); font-size:12.5px;color:#8b857c;align-items:center;gap:10px;flex-wrap:wrap} .feat-show.on{display:flex} .feat-show button{background:none;border:0;padding:0;color:#C8442C;font-size:12.5px;font-weight:700; font-family:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px} /* ============================================================ THEME GUARD — chạy sau cùng để thắng CSS của theme (Flatsome…) Theme hay ép chữ hoa, giãn chữ, cỡ chữ và chiều cao cho mọi button/a, làm sidebar phình và chữ nhảy lung tung. ============================================================ */ .mrp-dash2, .mrp-dash2 * { text-transform: none !important; letter-spacing: normal !important; box-sizing: border-box; } .mrp-dash2 button, .mrp-dash2 a, .mrp-dash2 input, .mrp-dash2 select { font-family: inherit !important; text-shadow: none !important; box-shadow: none !important; min-height: 0 !important; line-height: 1.4 !important; margin: 0; } .mrp-dash2 button { -webkit-appearance: none; appearance: none; } .mrp-dash2 a { text-decoration: none !important; } /* các nhãn cố ý viết hoa — khai lại sau khi đã reset ở trên */ .mrp-dash2 .eyebrow, .mrp-dash2 .group-label, .mrp-dash2 .pro-stat .k, .mrp-dash2 .acc-tag, .mrp-dash2 .acct-plan, .mrp-dash2 .demo-src, .mrp-dash2 .locked .pro, .mrp-dash2 .feat-kicker, .mrp-dash2 .acc-sec-t { text-transform: uppercase !important; letter-spacing: .07em !important; } /* sidebar: danh sách dạng bài */ .mrp-dash2 .mrp-types { gap: 4px; } .mrp-dash2 .type-btn { flex: none !important; /* không co lại khi danh sách cuộn */ align-items: flex-start !important; min-height: 0 !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important; padding: 9px 12px !important; height: auto !important; color: var(--soft) !important; background: transparent !important; border: 0 !important; border-radius: 12px !important; } .mrp-dash2 .type-btn:hover { background: #F1F5F9 !important; color: var(--ink) !important; } .mrp-dash2 .type-btn[aria-current="true"] { background: var(--accent-soft) !important; color: var(--accent-dark) !important; font-weight: 700 !important; } .mrp-dash2 .type-btn > span:nth-child(2) { display: block; min-width: 0; padding-top: 1px; } .mrp-dash2 .type-prog { flex: none !important; margin-top: 5px; } /* sidebar: khối tài khoản luôn nhìn thấy, không bị cắt */ .mrp-dash2 .side-acct, .mrp-dash2 .side-cta { flex: none !important; } .mrp-dash2 .acct-links { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; } .mrp-dash2 .acct-links a { font-size: 12.5px !important; font-weight: 600 !important; color: var(--muted) !important; } .mrp-dash2 .acct-links a:hover { color: var(--accent) !important; } .mrp-dash2 .acct-btn { height: 40px !important; font-size: 13px !important; } /* Dưới 980px: xếp dọc, cuộn theo trang như bình thường. */ @media (max-width: 980px) { .mrp-dash2 .mrp-side, .mrp-dash2 .mrp-col { position: static !important; max-height: none !important; overflow: visible !important; } } /* ============================================================ BỐ CỤC CỘT — bản dứt điểm, đúng mockup ------------------------------------------------------------ Mockup: cột trái CAO CỐ ĐỊNH bằng màn hình, khối tài khoản ghim đáy, chỉ DANH SÁCH dạng bài cuộn bên trong. Vì sao các bản trước hỏng: tôi dùng `max-height` và để danh sách `flex: 0 0 auto`. Danh sách không co được nên cột phình cao hơn màn hình; mà cột lại `sticky` → bị ghim, phần đáy (khối tài khoản) không bao giờ cuộn tới. Cách đúng, gồm đủ 3 điều kiện — thiếu một là hỏng: 1. Cột có chiều cao XÁC ĐỊNH (`height`, không phải `max-height`). 2. Danh sách `flex: 1 1 auto` + `min-height: 0` để CO ĐƯỢC (không có min-height:0 thì flex item không co dưới nội dung). 3. Khối tài khoản `flex: none` để giữ nguyên kích thước. ============================================================ */ @media (min-width: 981px) { .mrp-dash2 .mrp-side { position: sticky !important; top: var(--mrp-top, 100px) !important; height: calc(100vh - var(--mrp-top, 100px) - 24px); /* dự phòng; JS đo lại chính xác */ max-height: none !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; /* chỉ danh sách bên trong mới cuộn */ padding: 20px 16px 16px !important; } .mrp-dash2 .mrp-side .side-head { flex: none !important; } .mrp-dash2 .mrp-side .mrp-types { flex: 1 1 auto !important; min-height: 0 !important; /* bắt buộc, nếu không sẽ không co */ overflow-y: auto !important; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .mrp-dash2 .mrp-side .side-acct, .mrp-dash2 .mrp-side .side-cta { flex: none !important; margin: 0 !important; padding: 16px 0 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 0 !important; background: transparent !important; box-shadow: none !important; position: static !important; } } /* Dưới 981px: xếp dọc, danh sách cuộn ngang, mọi thứ theo luồng trang. */ @media (max-width: 980px) { .mrp-dash2 .mrp-side { position: static !important; height: auto !important; max-height: none !important; overflow: visible !important; display: block !important; } .mrp-dash2 .mrp-side .mrp-types { display: flex !important; flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; max-height: none !important; } .mrp-dash2 .mrp-side .side-acct { display: block !important; margin-top: 14px !important; padding-top: 14px !important; border-top: 1px solid var(--line) !important; } } /* Bỏ dòng mô tả dưới tiêu đề sidebar → thu gọn phần đầu, nhường chỗ cho danh sách dạng bài (vốn là thứ dùng nhiều nhất trong cột này). */ .mrp-dash2 .mrp-side .side-head { margin-bottom: 14px !important; padding-bottom: 12px !important; } .mrp-dash2 .mrp-side .side-head h1 { margin-bottom: 0 !important; } .mrp-dash2 .mrp-side .side-head p { display: none !important; } /* Nút hành động trong trang tài khoản — theme (Flatsome) ép màu nền, màu chữ và padding cho mọi