.fab-sheet-backdrop{display:none;position:fixed;inset:0;background:var(--overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:900;opacity:0;transition:opacity var(--d-base) var(--ease-out)}.fab-sheet-backdrop.open{display:block;opacity:1}.fab-sheet{position:fixed;left:0;right:0;bottom:0;z-index:901;background:var(--surface);border-radius:var(--r-6) var(--r-6) 0 0;padding:0 0 env(safe-area-inset-bottom,0);transform:translateY(100%);visibility:hidden;transition:transform var(--d-slow) var(--ease-out),visibility 0s linear var(--d-slow);box-shadow:var(--shadow-4);max-height:85vh;overflow-y:auto}.fab-sheet.open{transform:translateY(0);visibility:visible;transition:transform var(--d-slow) var(--ease-out),visibility 0s}.fab-sheet-handle{width:36px;height:4px;background:var(--border);border-radius:var(--r-pill);margin:10px auto 0}.fab-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:14px var(--s-5) 10px}.fab-sheet-title{font-size:var(--t-h3);font-weight:700;color:var(--text);letter-spacing:-.01em}.fab-sheet-close{width:36px;height:36px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--text2);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0}.fab-sheet-section-title{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;padding:8px var(--s-5) 4px}.fab-sheet-hubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);padding:var(--s-1) var(--s-3) var(--s-2)}.fab-sheet-hub{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-3);background:var(--surface2);border:1px solid var(--border);color:var(--text);text-decoration:none;transition:background var(--d-fast),border-color var(--d-fast)}.fab-sheet-hub:hover,.fab-sheet-hub:active{background:var(--primary-soft);border-color:var(--chau-hong)}.fab-sheet-hub-icon{width:36px;height:36px;border-radius:var(--r-2);background:var(--primary);color:var(--on-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.fab-sheet-hub-text{display:flex;flex-direction:column;min-width:0}.fab-sheet-hub-text b{font-size:14px;font-weight:700;color:var(--text)}.fab-sheet-hub-text small{font-size:12px;color:var(--text3);line-height:1.25;overflow-wrap:anywhere}body:has(#fabSheet.open) .note-fab{display:none}.fab-sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-1);padding:var(--s-2) var(--s-3) var(--s-5)}.fab-sheet-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--s-3) var(--s-2);border-radius:var(--r-3);cursor:pointer;background:none;border:none;color:var(--text);font-family:var(--font-ui);transition:background var(--d-fast);text-decoration:none}.fab-sheet-item:active,.fab-sheet-item:hover{background:var(--surface2)}.fab-sheet-icon{width:44px;height:44px;border-radius:var(--r-3);background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2)}.fab-sheet-item:hover .fab-sheet-icon,.fab-sheet-item:active .fab-sheet-icon{background:var(--primary-soft);border-color:var(--chau-hong);color:var(--accent-text)}.fab-sheet-label{font-size:12px;font-weight:500;color:var(--text2);text-align:center;line-height:1.3}

.hub-page{font-family:var(--font-display);font-size:var(--t-body);padding-bottom:var(--s-12)}.hub-header{position:relative;padding:var(--s-8) var(--s-6) var(--s-6);border-bottom:1px solid var(--border);margin-bottom:var(--s-6)}.hub-title{font-size:var(--t-h1);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--tracking-display);color:var(--text1);margin:0 0 var(--s-2)}.hub-sub{font-size:var(--t-body);color:var(--text2);margin:0}.hub-section-label{font-size:var(--t-small);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);padding:0 var(--s-6);margin:0 0 var(--s-3)}.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s-3);padding:0 var(--s-6) var(--s-6)}.hub-page[data-hub=learn]{--hub-accent: var(--thuy-luc)}.hub-page[data-hub=practice]{--hub-accent: var(--chau-hong)}.hub-page[data-hub=tools]{--hub-accent: var(--lam-thanh)}.hub-page[data-hub=profile]{--hub-accent: var(--hoang-kim)}#content[data-hub-tab=learn]{--hub-accent: var(--thuy-luc)}#content[data-hub-tab=practice]{--hub-accent: var(--chau-hong)}#content[data-hub-tab=tools]{--hub-accent: var(--lam-thanh)}#content[data-hub-tab=profile]{--hub-accent: var(--hoang-kim)}#content[data-hub-tab] h1{padding-bottom:var(--s-2);border-bottom:3px solid transparent;border-image:linear-gradient(to right,var(--hub-accent) 48px,transparent 48px) 1}#content[data-hub-tab] h1.hub-h1--c{border-image:linear-gradient(to right,transparent calc(50% - 24px),var(--hub-accent) calc(50% - 24px),var(--hub-accent) calc(50% + 24px),transparent calc(50% + 24px)) 1}.hub-page[data-hub] .hub-header:after{content:"";position:absolute;left:var(--s-6);bottom:-1px;width:48px;height:3px;border-radius:var(--r-pill);background:var(--hub-accent)}.hub-page[data-hub] .hub-section-label:before{content:"";display:inline-block;width:3px;height:.85em;margin-right:var(--s-2);vertical-align:-.1em;border-radius:2px;background:var(--hub-accent)}.hub-page[data-hub] .sec-title:before,.hub-page[data-hub] .prof-card-title:before{content:"";display:inline-block;width:3px;height:.85em;margin-right:var(--s-2);vertical-align:-.1em;border-radius:2px;background:var(--hub-accent)}.gt-course-head.hub-header{padding-left:0;padding-right:0}.hub-page[data-hub] .gt-course-head.hub-header:after{left:0}.hub-page[data-hub] .comm-card:hover{border-color:var(--hub-accent)}.comm-card{display:flex;align-items:center;gap:var(--s-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-4);padding:var(--s-4) var(--s-5);text-decoration:none;color:inherit;transition:border-color var(--d-fast),box-shadow var(--d-fast)}.comm-card:hover{border-color:var(--primary);box-shadow:0 2px 8px var(--primary-soft)}.comm-card--locked{opacity:1;background:var(--surface2);border-style:dashed;box-shadow:none;pointer-events:none;cursor:default}.comm-card--locked:hover{border-color:var(--border);box-shadow:none}.comm-card-icon{font-size:1.8rem;flex-shrink:0;width:44px;text-align:center}.comm-card-body{flex:1;min-width:0}.comm-card-name{font-size:var(--t-body);font-weight:600;color:var(--text1);margin-bottom:2px}.comm-card-desc{font-size:var(--t-small);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:480px){.comm-card{flex-wrap:wrap;row-gap:var(--s-2)}.comm-card-body{flex:1 1 150px}.comm-card .comm-badge{margin-left:calc(44px + var(--s-4))}.comm-card-desc{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}}.comm-badge{font-size:12px;font-weight:600;border-radius:var(--r-pill);padding:2px 8px;flex-shrink:0}.comm-badge--soon{background:var(--surface);color:var(--text2);border:1px solid var(--border)}.comm-badge--available{background:var(--success-bg);color:var(--success)}:is(.hub-section-label,.ph-bento-h,.cm-panel-h):has(>.hv-grp-art){display:flex;align-items:center;gap:var(--s-3)}:is(.hub-section-label,.ph-bento-h,.cm-panel-h)>.hv-grp-art{order:-1;flex:none;width:48px;height:48px;object-fit:contain;border:0;background:none}:root[data-density=thoang] .hub-page:not([data-density]) :is(.hub-section-label,.ph-bento-h,.cm-panel-h)>.hv-grp-art,.hub-page[data-density=thoang] :is(.hub-section-label,.ph-bento-h,.cm-panel-h)>.hv-grp-art{width:56px;height:56px}:root[data-density=gon] .hub-page:not([data-density]) :is(.hub-section-label,.ph-bento-h,.cm-panel-h)>.hv-grp-art,.hub-page[data-density=gon] :is(.hub-section-label,.ph-bento-h,.cm-panel-h)>.hv-grp-art{display:none}@container hv (max-width: 599.98px){.hub-page :is(.hub-section-label,.ph-bento-h,.cm-panel-h)>.hv-grp-art{width:40px;height:40px}}@media(max-width:600px){.hub-header{padding:var(--s-6) var(--s-4) var(--s-4)}.hub-grid{grid-template-columns:1fr;padding:0 var(--s-4) var(--s-4)}.hub-section-label{padding:0 var(--s-4)}.hub-page[data-hub] .hub-header:after{left:var(--s-4)}}.hub-page .tool-card,.hub-page .comm-card{box-shadow:var(--shadow-1)}.hub-page .tool-card--featured{box-shadow:var(--shadow-3);border-color:var(--border-mid)}.hub-page .lh-util-chip,.hub-page .ph-chip{box-shadow:none}.hub-page[data-hub] .tool-card--featured{border-top:3px solid var(--hub-accent)}.hub-page .prof-card{box-shadow:var(--shadow-1)}.hub-page .prof-hd{box-shadow:var(--shadow-3);border-color:var(--border-mid)}.hub-page[data-hub] .prof-hd{border-top:3px solid var(--hub-accent)}