/* ═══════════════════════════════════════════════════════════ NML Framework Library — styles (v2.2.0) Scope: .nml-fw-app (library) · .nml-fw-detail (trang riêng) Tokens trên wrapper (không :root). !important cho interactive states vì Hello Elementor đè màu đỏ/pink mặc định. ═══════════════════════════════════════════════════════════ */ .nml-fw-app, .nml-fw-detail{ --blue:#2F6BFF; --blue-dark:#1A56E8; --green:#22C55E; --green-dark:#16A34A; --amber:#F59E0B; --rose:#E11D48; --tx:#0F172A; --tx2:#475569; --tx3:#94A3B8; --bg:#F8FAFC; --border:#E2E8F0; --trade:#1E2D40; --ecom:#A0522D; --brand:#3B0764; --sales:#0F766E; --strat:#2F6BFF; --sw-s:#16A34A; --sw-s-bg:rgba(34,197,94,.09); --sw-w:#E11D48; --sw-w-bg:rgba(225,29,72,.07); --sw-o:#2F6BFF; --sw-o-bg:rgba(47,107,255,.08); --sw-t:#D97706; --sw-t-bg:rgba(245,158,11,.10); --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --sh-sm:0 2px 8px rgba(15,23,42,.06); --sh-md:0 10px 28px -16px rgba(15,23,42,.18); --sh-lg:0 26px 56px -30px rgba(47,107,255,.28),0 8px 20px -14px rgba(15,23,42,.10); --t-hover:150ms; --t-trans:250ms; --t-reveal:420ms; --e-out:cubic-bezier(.16,1,.3,1); font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif; color:var(--tx); line-height:1.6; position:relative; } .nml-fw-app *, .nml-fw-app *::before, .nml-fw-app *::after, .nml-fw-detail *, .nml-fw-detail *::before, .nml-fw-detail *::after{ box-sizing:border-box; } .nml-fw-app a, .nml-fw-detail a{ text-decoration:none; } /* Host cho drawer khi portal ra — giữ scope .nml-fw-app + design tokens */ .nml-fw-portal{position:static!important;margin:0!important;padding:0!important;background:none!important;} .nml-fw-portal > *{position:static;} /* bg orbs — aurora */ .nml-fw-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;} .nml-fw-orb{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;} .nml-fw-orb--blue{width:720px;height:720px;background:radial-gradient(circle,rgba(47,107,255,.30),rgba(47,107,255,.10) 45%,transparent 70%);top:-180px;right:-160px;animation:nmlfw-drift1 26s ease-in-out infinite;} .nml-fw-orb--green{width:620px;height:620px;background:radial-gradient(circle,rgba(34,197,94,.24),rgba(34,197,94,.08) 45%,transparent 70%);bottom:-220px;left:-160px;animation:nmlfw-drift2 32s ease-in-out infinite;} .nml-fw-orb--purple{width:520px;height:520px;background:radial-gradient(circle,rgba(124,58,237,.20),rgba(124,58,237,.07) 45%,transparent 70%);top:34%;left:40%;animation:nmlfw-drift3 38s ease-in-out infinite;} .nml-fw-orb--teal{width:460px;height:460px;background:radial-gradient(circle,rgba(15,118,110,.16),transparent 68%);top:8%;left:6%;animation:nmlfw-drift2 34s ease-in-out infinite reverse;} @keyframes nmlfw-drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-40px,50px) scale(1.08);}} @keyframes nmlfw-drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(50px,-40px) scale(1.06);}} @keyframes nmlfw-drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-50px,-30px) scale(1.10);}} @media(prefers-reduced-motion:reduce){.nml-fw-orb{animation:none!important;}} .nml-fw-app > *:not(.nml-fw-bg), .nml-fw-detail > *:not(.nml-fw-bg){position:relative;z-index:1;} .nml-reveal{opacity:0;transform:translateY(24px);transition:opacity var(--t-reveal) var(--e-out),transform var(--t-reveal) var(--e-out);} .nml-reveal.in-view{opacity:1;transform:none;} .nml-fw-wrap{max-width:1280px;margin:0 auto;padding:0 32px;} /* buttons (library) */ .nml-fw-app .nml-btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:600;border-radius:var(--r-pill);cursor:pointer;border:none;white-space:nowrap;transition:all var(--t-hover) ease;text-decoration:none;} .nml-fw-app .nml-btn svg{width:15px;height:15px;} .nml-fw-app .nml-btn--md{font-size:15px;padding:12px 24px;} .nml-fw-app .nml-btn--primary{background:var(--blue)!important;color:#fff!important;box-shadow:0 4px 12px rgba(47,107,255,.30);} .nml-fw-app .nml-btn--primary:hover{background:var(--blue-dark)!important;box-shadow:0 6px 18px rgba(47,107,255,.40)!important;transform:translateY(-1px);} .nml-fw-app .nml-btn--secondary{background:#fff!important;color:var(--tx)!important;border:1.5px solid var(--border)!important;box-shadow:var(--sh-sm);} .nml-fw-app .nml-btn--secondary:hover{border-color:var(--blue)!important;color:var(--blue)!important;} .nml-fw-app .nml-crumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:inherit;font-size:13px;color:var(--tx3);margin:0 0 16px;} .nml-fw-app .nml-crumbs a{color:var(--tx2)!important;text-decoration:none!important;transition:color var(--t-hover) ease;} .nml-fw-app .nml-crumbs a:hover{color:var(--blue)!important;} .nml-fw-app .nml-crumbs span[aria-current]{color:var(--tx2);font-weight:600;} /* HERO (library) */ .nml-fw-app .hero{display:grid;grid-template-columns:1fr 440px;gap:64px;align-items:center;padding:72px 0 64px;} .nml-fw-app .hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);margin-bottom:18px;} .nml-fw-app .hero__eyebrow::before{content:'';width:20px;height:2px;background:var(--blue);border-radius:1px;} .nml-fw-app .hero__title{font-size:44px;font-weight:800;line-height:1.10;letter-spacing:-.025em;margin:0 0 18px;} .nml-fw-app .hero__title em{font-style:normal;background:linear-gradient(135deg,var(--blue),#6366F1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .nml-fw-app .hero__desc{font-size:17px;color:var(--tx2);line-height:1.65;max-width:520px;margin:0 0 30px;} .nml-fw-app .hero__stats{display:inline-flex;align-items:center;flex-wrap:wrap;background:rgba(255,255,255,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.85);border-radius:var(--r-pill);padding:10px 20px;box-shadow:var(--sh-sm);margin-bottom:32px;} .nml-fw-app .hstat{display:flex;align-items:center;gap:7px;padding:0 16px;font-size:13px;color:var(--tx2);} .nml-fw-app .hstat:first-child{padding-left:0;} .nml-fw-app .hstat:last-child{padding-right:0;} .nml-fw-app .hstat__n{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:600;color:var(--tx);} .nml-fw-app .hstat__sep{width:1px;height:18px;background:var(--border);} .nml-fw-app .hero__actions{display:flex;gap:12px;flex-wrap:wrap;} /* hero mock */ .nml-fw-app .fw-scene{perspective:1100px;perspective-origin:50% 40%;display:flex;justify-content:center;} .nml-fw-app .fw-mock{transform:rotateY(-14deg) rotateX(7deg);border-radius:var(--r-md);overflow:hidden;box-shadow:0 32px 64px rgba(30,45,64,.20),0 4px 8px rgba(0,0,0,.08);width:420px;background:#fff;transition:transform .6s var(--e-out);} .nml-fw-app .fw-scene:hover .fw-mock{transform:rotateY(-6deg) rotateX(3deg);} .nml-fw-app .fw-mock__bar{height:4px;background:var(--blue);} .nml-fw-app .fw-mock__head{padding:16px 18px 14px;border-bottom:1px solid var(--border);} .nml-fw-app .fw-mock__toprow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;} .nml-fw-app .fw-mock__icon{width:38px;height:38px;border-radius:11px;background:rgba(47,107,255,.09);display:grid;place-items:center;} .nml-fw-app .fw-mock__badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:var(--r-pill);background:rgba(47,107,255,.08);color:var(--blue);} .nml-fw-app .fw-mock__name{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:3px;} .nml-fw-app .fw-mock__tag{font-size:11.5px;color:var(--tx3);} .nml-fw-app .fw-mock__body{padding:8px 18px 14px;} .nml-fw-app .fw-mock__step{display:flex;gap:11px;padding:7px 8px;position:relative;} .nml-fw-app .fw-mock__step:not(:last-child)::after{content:'';position:absolute;left:19px;top:30px;bottom:-7px;width:1.5px;background:linear-gradient(to bottom,var(--blue),transparent);opacity:.18;} .nml-fw-app .fw-mock__n{width:23px;height:23px;border-radius:50%;background:rgba(47,107,255,.09);color:var(--blue);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;display:grid;place-items:center;flex-shrink:0;position:relative;z-index:1;} .nml-fw-app .fw-mock__sname{font-size:12.5px;font-weight:700;color:var(--tx);} .nml-fw-app .fw-mock__sdesc{font-size:10.5px;color:var(--tx3);line-height:1.4;} .nml-fw-app .fw-mock__foot{padding:8px 18px;display:flex;align-items:center;justify-content:space-between;background:rgba(248,250,252,.9);border-top:1px solid var(--border);} .nml-fw-app .fw-mock__mode{font-size:9.5px;font-weight:600;color:var(--tx3);background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:2px 9px;} .nml-fw-app .fw-mock__nml{font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--tx3);text-transform:uppercase;} /* library section */ .nml-fw-app .library-section{padding:48px 0 80px;} .nml-fw-app .library-head{padding:8px 0 30px;text-align:center;} .nml-fw-app .lib-eyebrow{font-size:11px!important;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--blue)!important;margin-bottom:12px;} .nml-fw-app .lib-title{font-size:var(--nml-text-h1,clamp(28px,5vw,40px))!important;font-weight:var(--nml-fw-semibold,600)!important;line-height:1.2!important;letter-spacing:-.01em!important;color:var(--nml-tx)!important;margin-bottom:10px!important;} .nml-fw-app .lib-desc{font-size:16px;color:var(--tx2);line-height:1.6;max-width:540px;margin:0 auto;} .nml-fw-app .nml-library{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start;} .nml-fw-app .nml-main{min-width:0;} /* sidenav */ .nml-fw-app .nml-sidenav{background:rgba(255,255,255,.80);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-xl);padding:24px 16px;position:sticky;top:120px;box-shadow:var(--sh-md);} .nml-fw-app .nml-sidenav .grp{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--tx3);padding:18px 12px 9px;} .nml-fw-app .nml-sidenav .grp:first-child{padding-top:2px;} .nml-fw-app .nml-sidenav a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:500;color:var(--tx2)!important;cursor:pointer;user-select:none;position:relative;transition:background var(--t-hover),color var(--t-hover);} .nml-fw-app .nml-sidenav a:hover{background:rgba(47,107,255,.06)!important;color:var(--tx)!important;} .nml-fw-app .nml-sidenav a.is-active{background:rgba(47,107,255,.10)!important;color:var(--blue)!important;font-weight:600;} .nml-fw-app .nml-sidenav a.is-active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--blue);} .nml-fw-app .nml-sidenav a.is-active .cnt{background:rgba(47,107,255,.14);color:var(--blue);} .nml-fw-app .sn-lbl{display:flex;align-items:center;gap:9px;min-width:0;} .nml-fw-app .sn-lbl svg{flex-shrink:0;color:var(--tx3);} .nml-fw-app .nml-sidenav a.is-active .sn-lbl svg{color:var(--blue);} .nml-fw-app .sn-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .nml-fw-app .dot-all{background:var(--tx3);} .nml-fw-app .dot-free{background:var(--green);} .nml-fw-app .dot-prem{background:var(--blue);} .nml-fw-app .dot-trade{background:var(--trade);} .nml-fw-app .dot-ecom{background:var(--ecom);} .nml-fw-app .dot-brand{background:var(--brand);} .nml-fw-app .dot-sales{background:var(--sales);} .nml-fw-app .dot-strat{background:var(--strat);} .nml-fw-app .cnt{font-size:11px;font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--tx3);background:var(--bg);padding:2px 9px;border-radius:var(--r-pill);flex-shrink:0;} .nml-fw-app .sn-div{height:1px;background:var(--border);margin:14px 4px;} /* ── FAB Bộ lọc + Bottom sheet (mobile) — ẩn ở desktop ── */ .nml-fw-app .nml-fw-fab{display:none;} .nml-fw-app .nml-fw-sheet{display:none;} .nml-fw-app .nml-fw-sheet-bd{display:none;} .nml-fw-app .is-hidden{display:none!important;} /* search + toolbar */ .nml-fw-app .nml-toolbar{margin-bottom:16px;} .nml-fw-app .toolbar-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .nml-fw-app .toolbar-row .results-count{margin-left:auto;font-size:13.5px;color:var(--tx3);white-space:nowrap;} .nml-fw-app .toolbar-row .results-count b{color:var(--tx);font-weight:600;} .nml-fw-app .nml-search{position:relative;display:flex;align-items:center;flex:0 1 320px;max-width:320px;} .nml-fw-app .nml-search input{width:100%;padding:7px 12px 7px 34px;border:1px solid rgba(226,232,240,.80)!important;border-radius:var(--r-sm);background:rgba(255,255,255,.72)!important;backdrop-filter:blur(12px);font-family:inherit;font-size:12px;color:var(--tx);outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(15,23,42,.05);transition:border-color var(--t-hover),box-shadow var(--t-hover);} .nml-fw-app .nml-search input::placeholder{color:var(--tx3)!important;} .nml-fw-app .nml-search input:focus{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(47,107,255,.10)!important;} .nml-fw-app .nml-search .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--tx3);pointer-events:none;display:flex;} .nml-fw-app .nml-search .ic svg{width:15px;height:15px;} .nml-fw-app .active-filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;} /* ── Dropdown sorting ── */ .nml-fw-app .nml-dropdown{position:relative;flex:0 0 auto;min-width:130px;} .nml-fw-app .nml-dropdown__trigger{width:100%;display:flex;align-items:center;gap:7px;font-family:inherit;font-size:12px;font-weight:500;color:var(--tx2)!important;padding:7px 12px;border:1px solid rgba(226,232,240,.80)!important;border-radius:var(--r-sm);background:rgba(255,255,255,.72)!important;backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(15,23,42,.05);cursor:pointer;transition:border-color var(--t-hover) ease,box-shadow var(--t-hover) ease;} .nml-fw-app .nml-dropdown__trigger:hover{border-color:#CBD5E1!important;} .nml-fw-app .nml-dropdown.open .nml-dropdown__trigger{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(47,107,255,.10)!important;} .nml-fw-app .nml-dropdown__trigger .sort-ic{display:flex;flex:0 0 auto;color:var(--tx3);} .nml-fw-app .nml-dropdown__trigger .sort-ic svg{width:13px;height:13px;} .nml-fw-app .nml-dropdown__trigger .val{color:var(--tx2);font-weight:500;flex:1;text-align:left;white-space:nowrap;} .nml-fw-app .nml-dropdown__trigger .caret{width:15px;height:15px;color:var(--tx3);flex:0 0 auto;transition:transform var(--t-trans) ease,color var(--t-hover) ease;} .nml-fw-app .nml-dropdown.open .nml-dropdown__trigger .caret{transform:rotate(180deg);color:var(--blue)!important;} .nml-fw-app .nml-dropdown.open .nml-dropdown__trigger .sort-ic{color:var(--blue);} .nml-fw-app .nml-dropdown__menu{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--sh-md);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t-hover) ease,transform var(--t-hover) ease;} .nml-fw-app .nml-dropdown.open .nml-dropdown__menu{opacity:1;visibility:visible;transform:none;} .nml-fw-app .nml-dropdown__opt{width:100%;text-align:left;font-family:inherit;font-size:13.5px;color:var(--tx2)!important;padding:10px 12px;border:none!important;background:none!important;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background var(--t-hover) ease,color var(--t-hover) ease;} .nml-fw-app .nml-dropdown__opt:hover{background:rgba(47,107,255,.06)!important;color:var(--tx)!important;} .nml-fw-app .nml-dropdown__opt.is-selected{background:rgba(47,107,255,.10)!important;color:var(--blue)!important;font-weight:600;} .nml-fw-app .nml-dropdown__opt.is-selected::after{content:"✓";color:var(--blue);} .nml-fw-app .filter-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;padding:4px 8px 4px 11px;border-radius:var(--r-pill);background:rgba(47,107,255,.08);color:var(--blue);} .nml-fw-app .filter-chip button{display:flex;align-items:center;border:none!important;background:none!important;cursor:pointer;color:var(--blue);opacity:.55;padding:0;margin-left:2px;transition:opacity var(--t-hover);} .nml-fw-app .filter-chip button:hover{opacity:1;} /* cards */ .nml-fw-app .fw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} .nml-fw-app .fw-card{background:rgba(255,255,255,.76);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.85);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:transform var(--t-trans) var(--e-out),box-shadow var(--t-trans) ease;} .nml-fw-app .fw-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);} .nml-fw-app .fw-card[data-func="trade"]{border-left:3px solid var(--trade);} .nml-fw-app .fw-card[data-func="ecom"]{border-left:3px solid var(--ecom);} .nml-fw-app .fw-card[data-func="brand"]{border-left:3px solid var(--brand);} .nml-fw-app .fw-card[data-func="sales"]{border-left:3px solid var(--sales);} .nml-fw-app .fw-card[data-func="strat"]{border-left:3px solid var(--strat);} .nml-fw-app .card-preview{height:72px;padding:14px 16px 14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,.045);position:relative;overflow:hidden;} .nml-fw-app .fw-card[data-func="trade"] .card-preview{background:rgba(30,45,64,.04);} .nml-fw-app .fw-card[data-func="ecom"] .card-preview{background:rgba(160,82,45,.04);} .nml-fw-app .fw-card[data-func="brand"] .card-preview{background:rgba(59,7,100,.04);} .nml-fw-app .fw-card[data-func="sales"] .card-preview{background:rgba(15,118,110,.04);} .nml-fw-app .fw-card[data-func="strat"] .card-preview{background:rgba(47,107,255,.04);} .nml-fw-app .card-fmt-icon{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;} .nml-fw-app .fi-trade{background:rgba(30,45,64,.09);} .nml-fw-app .fi-ecom{background:rgba(160,82,45,.09);} .nml-fw-app .fi-brand{background:rgba(59,7,100,.09);} .nml-fw-app .fi-sales{background:rgba(15,118,110,.09);} .nml-fw-app .fi-strat{background:rgba(47,107,255,.09);} .nml-fw-app .badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);line-height:1.5;} .nml-fw-app .b-trade{background:rgba(30,45,64,.10);color:var(--trade);} .nml-fw-app .b-ecom{background:rgba(160,82,45,.10);color:var(--ecom);} .nml-fw-app .b-brand{background:rgba(59,7,100,.10);color:var(--brand);} .nml-fw-app .b-sales{background:rgba(15,118,110,.10);color:var(--sales);} .nml-fw-app .b-strat{background:rgba(47,107,255,.10);color:var(--strat);} .nml-fw-app .b-new{background:rgba(34,197,94,.12);color:#15803D;} .nml-fw-app .b-pop{background:rgba(245,158,11,.12);color:#92400E;} .nml-fw-app .card-body{padding:15px 18px 17px 18px;display:flex;flex-direction:column;flex:1;} .nml-fw-app .card-badges{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px;min-height:0;} .nml-fw-app .card-title{font-size:14.5px;font-weight:700;color:var(--tx);line-height:1.35;margin-bottom:6px;} .nml-fw-app .card-desc{font-size:12.5px;color:var(--tx2);line-height:1.55;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .nml-fw-app .card-comp{margin-bottom:14px;flex:1;} .nml-fw-app .card-comp__lbl{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);margin-bottom:7px;display:block;} .nml-fw-app .comp-seq{display:flex;flex-wrap:wrap;align-items:center;gap:5px;} .nml-fw-app .comp-seq .it{font-size:11.5px;font-weight:700;} .nml-fw-app .comp-seq .sep{color:var(--tx3);font-size:10px;} .nml-fw-app .comp-dim{display:flex;flex-wrap:wrap;gap:5px;} .nml-fw-app .comp-dim .pl{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);} .nml-fw-app .card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;} .nml-fw-app .mode-label{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--tx3);font-weight:500;} .nml-fw-app .mode-label svg{width:13px;height:13px;} .nml-fw-app .tier-dot{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:var(--tx3);} .nml-fw-app .tier-dot svg{width:11px;height:11px;} .nml-fw-app .empty-state{grid-column:1/-1;text-align:center;padding:64px 24px;} .nml-fw-app .empty-state svg{margin:0 auto 14px;opacity:.4;} .nml-fw-app .empty-state h3{font-size:17px;color:var(--tx2);margin:0 0 6px;} .nml-fw-app .empty-state p{font-size:13.5px;color:var(--tx3);} /* MODAL (giới thiệu) */ .nml-fw-app .bk{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:999999;display:grid;place-items:start center;padding:100px 24px 32px;opacity:0;visibility:hidden;overflow-y:auto;transition:opacity var(--t-trans) ease;} .nml-fw-app .bk.is-open{opacity:1;visibility:visible;} .nml-fw-app .modal{width:100%;max-width:560px;background:rgba(255,255,255,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-xl);box-shadow:0 32px 80px rgba(15,23,42,.20);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 132px);transform:translateY(24px) scale(.98);transition:transform var(--t-trans) var(--e-out);} .nml-fw-app .bk.is-open .modal{transform:none;} .nml-fw-app .m-bar{height:4px;flex-shrink:0;background:var(--ac,var(--blue));} .nml-fw-app .m-head{padding:22px 24px 4px;flex-shrink:0;} .nml-fw-app .m-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;} .nml-fw-app .m-left{display:flex;align-items:center;gap:11px;flex-wrap:wrap;} .nml-fw-app .m-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--ac-light,rgba(47,107,255,.09));flex-shrink:0;} .nml-fw-app .m-icon svg{width:23px;height:23px;} .nml-fw-app .m-chip{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill);} .nml-fw-app .tier{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:4px;} .nml-fw-app .tier svg{width:10px;height:10px;} .nml-fw-app .tier.free{background:rgba(34,197,94,.12);color:#15803D;} .nml-fw-app .tier.premium{background:linear-gradient(135deg,rgba(47,107,255,.14),rgba(34,197,94,.14));color:var(--blue);} .nml-fw-app .m-close{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--bg)!important;border:none!important;cursor:pointer;color:var(--tx3);transition:background var(--t-hover),color var(--t-hover);} .nml-fw-app .m-close:hover{background:var(--border)!important;color:var(--tx);} .nml-fw-app .m-close svg{width:16px;height:16px;} .nml-fw-app .m-name{font-size:23px;font-weight:800;letter-spacing:-.025em;margin-bottom:6px;} .nml-fw-app .m-desc{font-size:14px;color:var(--tx2);line-height:1.65;} .nml-fw-app .m-body{padding:14px 24px 6px;overflow-y:auto;flex:1;} .nml-fw-app .m-lead{font-size:14px;color:var(--tx2);line-height:1.7;margin-bottom:16px;} .nml-fw-app .m-blbl{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx3);margin-bottom:10px;} .nml-fw-app .bd-seq{display:flex;flex-direction:column;} .nml-fw-app .bd-seq__it{display:flex;gap:13px;padding:9px 10px;border-radius:var(--r-sm);position:relative;transition:background var(--t-hover) ease;} .nml-fw-app .bd-seq__it:hover{background:var(--ac-light);} .nml-fw-app .bd-seq__it:not(:last-child)::after{content:'';position:absolute;left:21px;top:40px;bottom:-9px;width:1.5px;background:linear-gradient(to bottom,var(--ac),transparent);opacity:.18;z-index:0;} .nml-fw-app .bd-seq__n{width:24px;height:24px;border-radius:50%;flex-shrink:0;background:var(--ac-light);color:var(--ac);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:1px;position:relative;z-index:1;} .nml-fw-app .bd-seq__nm{font-size:14px;font-weight:700;margin-bottom:3px;} .nml-fw-app .bd-seq__d{font-size:12.5px;color:var(--tx2);line-height:1.55;} .nml-fw-app .bd-dim{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .nml-fw-app .bd-dim__it{background:var(--ac-light);border:1px solid transparent;border-radius:var(--r-md);padding:13px 14px;transition:border-color var(--t-hover) ease;} .nml-fw-app .bd-dim__it:hover{border-color:var(--ac);} .nml-fw-app .bd-dim__top{display:flex;align-items:center;gap:8px;margin-bottom:6px;} .nml-fw-app .bd-dim__k{width:22px;height:22px;border-radius:6px;background:var(--ac);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;flex-shrink:0;} .nml-fw-app .bd-dim__nm{font-size:13px;font-weight:700;color:var(--ac);} .nml-fw-app .bd-dim__d{font-size:11.5px;color:var(--tx2);line-height:1.5;} .nml-fw-app .m-foot{padding:16px 24px 20px;border-top:1px solid var(--border);flex-shrink:0;} .nml-fw-app .m-rel-lbl{font-size:10.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--tx3);margin-bottom:9px;} .nml-fw-app .m-rel{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;} .nml-fw-app .rel-chip{font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:var(--r-pill);background:var(--bg)!important;border:1px solid var(--border)!important;color:var(--tx2)!important;cursor:pointer;transition:border-color var(--t-hover),color var(--t-hover);} .nml-fw-app .rel-chip:hover{border-color:var(--blue)!important;color:var(--blue)!important;} .nml-fw-app .btn-full{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font-family:inherit;font-weight:700;font-size:14.5px;padding:13px 22px;border-radius:var(--r-pill);cursor:pointer;text-decoration:none;border:none!important;background:var(--ac,var(--blue))!important;color:#fff!important;box-shadow:0 4px 14px rgba(47,107,255,.24);transition:all var(--t-hover) ease;} .nml-fw-app .btn-full:hover{filter:brightness(1.08);box-shadow:0 6px 20px rgba(47,107,255,.34)!important;transform:translateY(-1px);} .nml-fw-app .btn-full svg{width:16px;height:16px;} /* how it works + subscription */ .nml-fw-app .section{padding:70px 0;} .nml-fw-app .section-header{text-align:center;margin-bottom:48px;} .nml-fw-app .section-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);margin-bottom:12px;} .nml-fw-app .section-title{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.18;margin:0;} .nml-fw-app .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .nml-fw-app .step-card{background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.85);border-radius:var(--r-lg);padding:28px 24px;text-align:center;transition:box-shadow var(--t-trans),transform var(--t-trans);} .nml-fw-app .step-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px);} .nml-fw-app .step-num{width:52px;height:52px;border-radius:50%;background:rgba(47,107,255,.08);color:var(--blue);font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:600;display:grid;place-items:center;margin:0 auto 18px;} .nml-fw-app .step-title{font-size:16px;font-weight:700;margin-bottom:8px;} .nml-fw-app .step-desc{font-size:13.5px;color:var(--tx2);line-height:1.6;margin:0;} .nml-fw-app .sub-section{background:rgba(255,255,255,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.85);border-radius:var(--r-xl);padding:56px;box-shadow:var(--sh-sm);} .nml-fw-app .sub-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} .nml-fw-app .sub-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);margin-bottom:14px;} .nml-fw-app .sub-title{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 16px;} .nml-fw-app .sub-desc{font-size:15px;color:var(--tx2);line-height:1.65;margin:0 0 24px;} .nml-fw-app .sub-price-box{display:flex;align-items:baseline;gap:6px;margin-bottom:24px;} .nml-fw-app .sub-price{font-family:'JetBrains Mono',monospace;font-size:36px;font-weight:600;color:var(--tx);} .nml-fw-app .sub-period{font-size:14px;color:var(--tx3);} .nml-fw-app .sub-actions{display:flex;gap:12px;flex-wrap:wrap;} .nml-fw-app .include-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-bottom:16px;} .nml-fw-app .include-list{display:flex;flex-direction:column;gap:12px;} .nml-fw-app .include-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;} .nml-fw-app .include-icon{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;} .nml-fw-app .ic-blue{background:rgba(47,107,255,.09);color:var(--blue);} .nml-fw-app .ic-green{background:rgba(34,197,94,.10);color:var(--green-dark);} .nml-fw-app .ic-amber{background:rgba(245,158,11,.10);color:#B45309;} .nml-fw-app .include-name{font-size:14px;font-weight:700;margin-bottom:2px;} .nml-fw-app .include-sub{font-size:11.5px;color:var(--tx3);line-height:1.45;} .nml-fw-app .include-tag{margin-left:auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:var(--r-pill);background:rgba(47,107,255,.08);color:var(--blue);flex-shrink:0;} /* ═══════════ DETAIL PAGE (.nml-fw-detail) ═══════════ */ .nml-fw-detail{padding-top:20px;padding-bottom:8px;display:block;width:100%;} /* reset chống theme (Hello Elementor) làm ul/section bị float/thu hẹp/đè nhau */ .nml-fw-detail ul,.nml-fw-detail ol{list-style:none;margin:0;padding:0;} .nml-fw-detail ul,.nml-fw-detail ol,.nml-fw-detail li{float:none!important;} .nml-fw-detail .d-sec,.nml-fw-detail section{display:flow-root!important;width:auto!important;float:none!important;clear:both!important;position:static!important;overflow:visible;} .nml-fw-detail .d-wrap{max-width:1120px;margin:0 auto;padding:0 32px;} .nml-fw-detail .d-crumb{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--tx3);flex-wrap:wrap;padding:0 0 4px;} .nml-fw-detail .d-crumb a{color:var(--tx3)!important;transition:color var(--t-hover);} .nml-fw-detail .d-crumb a:hover{color:var(--tx)!important;} .nml-fw-detail .d-crumb strong{color:var(--tx2);font-weight:600;} .nml-fw-detail .d-crumb span{color:var(--tx3);} /* hero */ .nml-fw-detail .d-hero{padding:24px 0 40px;display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:center;} .nml-fw-detail .d-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;} .nml-fw-detail .d-chip{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px;} .nml-fw-detail .d-chip svg{width:11px;height:11px;} .nml-fw-detail .d-chip--func{background:var(--ac-light);color:var(--ac);} .nml-fw-detail .d-chip--free{background:rgba(34,197,94,.12);color:#15803D;} .nml-fw-detail .d-chip--prem{background:linear-gradient(135deg,rgba(47,107,255,.14),rgba(34,197,94,.14));color:var(--blue);} .nml-fw-detail .d-chip--mode{background:#fff;border:1px solid var(--border);color:var(--tx2);} .nml-fw-detail .d-chip--pop{background:rgba(245,158,11,.12);color:#92400E;} .nml-fw-detail .d-h1{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:0 0 14px;} .nml-fw-detail .d-tag{font-size:18px;color:var(--tx2);line-height:1.55;margin:0 0 24px;max-width:520px;} .nml-fw-detail .d-meta{display:flex;gap:22px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--border);} .nml-fw-detail .d-meta__it{display:flex;flex-direction:column;gap:2px;} .nml-fw-detail .d-meta__k{font-size:11px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;} .nml-fw-detail .d-meta__v{font-size:15px;font-weight:700;color:var(--tx);} /* hero mock */ .nml-fw-detail .d-mock{border-radius:var(--r-lg);overflow:hidden;background:#fff;box-shadow:var(--sh-lg);border:1px solid rgba(255,255,255,.85);} .nml-fw-detail .d-mock__bar{height:4px;background:var(--ac);} .nml-fw-detail .d-mock__head{padding:16px 18px 14px;border-bottom:1px solid var(--border);} .nml-fw-detail .d-mock__toprow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;} .nml-fw-detail .d-mock__icon{width:38px;height:38px;border-radius:11px;background:var(--ac-light);display:grid;place-items:center;} .nml-fw-detail .d-mock__icon svg{width:20px;height:20px;} .nml-fw-detail .d-mock__badge{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:var(--r-pill);background:var(--ac-light);color:var(--ac);} .nml-fw-detail .d-mock__name{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:3px;} .nml-fw-detail .d-mock__tag{font-size:11px;color:var(--tx3);line-height:1.4;} .nml-fw-detail .d-mock__body{padding:10px 18px 12px;} .nml-fw-detail .d-mock__step{display:flex;align-items:center;gap:10px;padding:6px 8px;position:relative;} .nml-fw-detail .d-mock__step:not(:last-child)::after{content:'';position:absolute;left:19px;top:28px;bottom:-6px;width:1.5px;background:linear-gradient(to bottom,var(--ac),transparent);opacity:.18;} .nml-fw-detail .d-mock__n{width:22px;height:22px;border-radius:50%;background:var(--ac-light);color:var(--ac);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;display:grid;place-items:center;flex-shrink:0;position:relative;z-index:1;} .nml-fw-detail .d-mock__sname{font-size:12.5px;font-weight:700;color:var(--tx);} .nml-fw-detail .d-mock__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;} .nml-fw-detail .d-mock__cell{background:var(--ac-light);border-radius:var(--r-sm);padding:10px;} .nml-fw-detail .d-mock__ck{width:22px;height:22px;border-radius:6px;background:var(--ac);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;margin-bottom:6px;} .nml-fw-detail .d-mock__cn{font-size:11.5px;font-weight:700;color:var(--tx);line-height:1.3;} .nml-fw-detail .d-mock__foot{padding:8px 18px;display:flex;align-items:center;justify-content:space-between;background:var(--bg);border-top:1px solid var(--border);} .nml-fw-detail .d-mock__mode{font-size:9.5px;font-weight:600;color:var(--tx3);background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:2px 9px;} .nml-fw-detail .d-mock__nml{font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--tx3);text-transform:uppercase;} /* layout */ .nml-fw-detail .d-layout{display:grid;grid-template-columns:210px 1fr;gap:44px;align-items:start;padding-bottom:70px;overflow:visible!important;} /* sticky: mọi ancestor phải overflow:visible, và phần tử cần align-self:start */ .nml-fw-detail,.nml-fw-detail .d-wrap{overflow:visible!important;} .nml-fw-detail .d-toc{position:sticky!important;position:-webkit-sticky!important;top:96px;align-self:start!important;max-height:calc(100vh - 120px);overflow-y:auto;z-index:2;} .nml-fw-detail .d-toc::-webkit-scrollbar{width:3px;} .nml-fw-detail .d-toc::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;} .nml-fw-detail .d-toc__lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);margin-bottom:12px;} .nml-fw-detail .d-toc a{display:block;font-size:13px;color:var(--tx2)!important;padding:7px 0 7px 14px;border-left:2px solid var(--border);text-decoration:none!important;transition:color var(--t-hover) ease,border-color var(--t-hover) ease,background var(--t-hover) ease;} .nml-fw-detail .d-toc a:hover{color:var(--tx)!important;border-color:var(--tx3)!important;} .nml-fw-detail .d-toc a.active{color:var(--ac)!important;border-color:var(--ac)!important;border-left-width:2px;font-weight:600;background:linear-gradient(90deg,var(--ac-light),transparent);} .nml-fw-detail .d-article{min-width:0;max-width:720px;overflow:visible!important;} .nml-fw-detail .d-tldr{background:var(--ac-light);border:1px solid var(--ac);border-radius:var(--r-md);padding:18px 20px;margin-bottom:36px;} .nml-fw-detail .d-tldr__lbl{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ac);margin-bottom:8px;} .nml-fw-detail .d-tldr__lbl svg{width:14px;height:14px;} .nml-fw-detail .d-tldr p{font-size:15px;color:var(--tx);line-height:1.65;margin:0;} .nml-fw-detail .d-sec{margin:0 0 44px!important;scroll-margin-top:96px;} .nml-fw-detail .d-sec h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 16px!important;display:flex;align-items:center;gap:11px;min-height:30px;clear:both;} .nml-fw-detail .d-hn{width:30px;height:30px;border-radius:9px;background:var(--ac-light);color:var(--ac);font-size:14px;font-weight:800;display:grid;place-items:center;flex-shrink:0;} .nml-fw-detail .d-sec p{font-size:15.5px;color:var(--tx2);line-height:1.75;margin:0 0 16px;} .nml-fw-detail .d-sec p strong{color:var(--tx);font-weight:700;} /* breakdown */ .nml-fw-detail .d-bd-seq{display:flex;flex-direction:column;gap:2px;} .nml-fw-detail .d-bd-seq__it{display:flex;gap:13px;padding:11px 12px;border-radius:var(--r-sm);position:relative;} .nml-fw-detail .d-bd-seq__it:not(:last-child)::after{content:'';position:absolute;left:23px;top:44px;bottom:-2px;width:1.5px;background:linear-gradient(to bottom,var(--ac),transparent);opacity:.18;} .nml-fw-detail .d-bd-seq__n{width:26px;height:26px;border-radius:50%;flex-shrink:0;background:var(--ac-light);color:var(--ac);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;display:grid;place-items:center;position:relative;z-index:1;} .nml-fw-detail .d-bd-seq__nm{font-size:15px;font-weight:700;color:var(--ac);margin-bottom:3px;} .nml-fw-detail .d-bd-seq__d{font-size:13.5px;color:var(--tx2);line-height:1.55;} .nml-fw-detail .d-bd-dim{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .nml-fw-detail .d-bd-dim__it{background:var(--ac-light);border:1px solid transparent;border-radius:var(--r-md);padding:16px;transition:transform var(--t-hover);} .nml-fw-detail .d-bd-dim__it:hover{transform:translateY(-2px);} .nml-fw-detail .d-bd-dim__top{display:flex;align-items:center;gap:9px;margin-bottom:8px;} .nml-fw-detail .d-bd-dim__k{width:28px;height:28px;border-radius:8px;background:var(--ac);color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center;flex-shrink:0;} .nml-fw-detail .d-bd-dim__nm{font-size:15px;font-weight:800;color:var(--ac);} .nml-fw-detail .d-bd-dim__d{font-size:13px;color:var(--tx2);line-height:1.55;} /* lists — block chuẩn, marker định vị absolute (chống theme làm ul float/hẹp) */ .nml-fw-detail .ilist{list-style:none!important;margin:0!important;padding:0!important;display:flow-root!important;width:100%!important;float:none!important;clear:both!important;height:auto!important;min-height:0!important;position:static!important;} .nml-fw-detail .ilist li{position:relative!important;display:block!important;float:none!important;clear:both!important;width:auto!important;height:auto!important;min-height:24px;padding-left:34px;margin:0;font-size:15px;color:var(--tx2);line-height:1.6;list-style:none!important;} .nml-fw-detail .ilist li + li{margin-top:11px!important;} .nml-fw-detail .ilist .ln{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--ac-light);color:var(--ac);font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;display:grid;place-items:center;} .nml-fw-detail .ilist.dot li{padding-left:18px;min-height:0;} .nml-fw-detail .ilist.dot li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--ac);} /* paywall */ .nml-fw-detail .d-paywall{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:40px 28px;margin:8px 0 44px;background:rgba(255,255,255,.5);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-sm);} .nml-fw-detail .d-paywall__ic{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#2F6BFF,#22C55E);display:grid;place-items:center;box-shadow:0 10px 24px rgba(47,107,255,.32);} .nml-fw-detail .d-paywall__ic svg{width:26px;height:26px;color:#fff;} .nml-fw-detail .d-paywall__h{font-size:19px;font-weight:800;letter-spacing:-.01em;} .nml-fw-detail .d-paywall__d{font-size:14px;color:var(--tx2);line-height:1.6;max-width:42ch;} .nml-fw-detail .d-paywall__note{font-size:12.5px;color:var(--tx3);} .nml-fw-detail .d-paywall__note a{color:var(--blue)!important;font-weight:600;} .nml-fw-detail .d-paywall__cta{background:linear-gradient(135deg,#2F6BFF,#22C55E)!important;color:#fff!important;box-shadow:0 4px 14px rgba(47,107,255,.32);} .nml-fw-detail .d-paywall__cta:hover{box-shadow:0 8px 22px rgba(47,107,255,.42)!important;transform:translateY(-1px);} /* mistake / example / related */ .nml-fw-detail .d-mistake{background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.25);border-radius:var(--r-md);padding:20px 22px;} .nml-fw-detail .d-mistake .ilist li{color:#92400E;} .nml-fw-detail .d-mistake .ilist.dot li::before{background:var(--amber);} .nml-fw-detail .d-example{background:var(--ac-light);border-radius:var(--r-lg);padding:22px 24px;} .nml-fw-detail .d-example__brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;} .nml-fw-detail .d-example__logo{width:42px;height:42px;border-radius:11px;background:var(--ac);color:#fff;font-size:14px;font-weight:800;display:grid;place-items:center;} .nml-fw-detail .d-example__nm{font-size:17px;font-weight:800;color:var(--ac);} .nml-fw-detail .d-example__tx{font-size:15px;color:var(--tx2);line-height:1.7;} .nml-fw-detail .d-related{display:flex;gap:8px;flex-wrap:wrap;} .nml-fw-detail .d-rel{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:var(--r-pill);background:#fff!important;border:1px solid var(--border)!important;color:var(--tx)!important;transition:all var(--t-hover);} .nml-fw-detail .d-rel:hover{border-color:var(--blue)!important;color:var(--blue)!important;transform:translateY(-1px);} .nml-fw-detail .d-rd{width:8px;height:8px;border-radius:50%;background:var(--ac);flex-shrink:0;} /* CTA + buttons */ .nml-fw-detail .d-cta{background:linear-gradient(135deg,rgba(47,107,255,.06),rgba(34,197,94,.05));border:1px solid rgba(47,107,255,.16);border-radius:var(--r-xl);padding:32px;margin-top:8px;} .nml-fw-detail .d-cta__h{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px;} .nml-fw-detail .d-cta__d{font-size:14.5px;color:var(--tx2);line-height:1.6;margin-bottom:20px;} .nml-fw-detail .d-cta__row{display:flex;gap:12px;flex-wrap:wrap;} .nml-fw-detail .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:12px 22px;border-radius:var(--r-pill);cursor:pointer;border:none;transition:all var(--t-hover);text-decoration:none;} .nml-fw-detail .btn svg{width:15px;height:15px;} .nml-fw-detail .btn-primary{background:var(--blue)!important;color:#fff!important;box-shadow:0 4px 12px rgba(47,107,255,.28);} .nml-fw-detail .btn-primary:hover{background:var(--blue-dark)!important;transform:translateY(-1px);} .nml-fw-detail .btn-ghost{background:rgba(47,107,255,.08)!important;color:var(--blue)!important;border:1.5px solid transparent!important;} .nml-fw-detail .btn-ghost:hover{background:rgba(47,107,255,.14)!important;} /* note box + SWOT semantic (dùng bởi details/swot.php) */ .nml-fw-detail .d-note{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px;margin-top:16px;display:flex;gap:14px;} .nml-fw-detail .d-note__ic{width:34px;height:34px;border-radius:9px;background:var(--ac-light);color:var(--ac);display:grid;place-items:center;flex-shrink:0;} .nml-fw-detail .d-note__ic svg{width:18px;height:18px;} .nml-fw-detail .d-note__t{font-size:13.5px;font-weight:700;margin-bottom:4px;} .nml-fw-detail .d-note__d{font-size:13px;color:var(--tx2);line-height:1.6;} .nml-fw-detail .d-note__d b{color:var(--tx);} /* TOWS matrix */ .nml-fw-detail .tows{margin:20px 0 8px;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:#fff;} .nml-fw-detail .tows__row{display:grid;grid-template-columns:96px 1fr 1fr;} .nml-fw-detail .tows__row:not(:last-child){border-bottom:1px solid var(--border);} .nml-fw-detail .tows__cell{padding:14px;border-left:1px solid var(--border);} .nml-fw-detail .tows__cell:first-child{border-left:none;} .nml-fw-detail .tows__hd,.nml-fw-detail .tows__corner{background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:3px;} .nml-fw-detail .tows__hk{width:26px;height:26px;border-radius:7px;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;} .nml-fw-detail .tows__hl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--tx3);} .nml-fw-detail .tk-s{background:var(--sw-s);} .nml-fw-detail .tk-w{background:var(--sw-w);} .nml-fw-detail .tk-o{background:var(--sw-o);} .nml-fw-detail .tk-t{background:var(--sw-t);} .nml-fw-detail .tows__strat{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;margin-bottom:5px;display:inline-flex;align-items:center;gap:5px;} .nml-fw-detail .tows__strat .tg{width:15px;height:15px;border-radius:4px;color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center;} .nml-fw-detail .tows__so .tg{background:linear-gradient(135deg,var(--sw-s),var(--sw-o));} .nml-fw-detail .tows__st .tg{background:linear-gradient(135deg,var(--sw-s),var(--sw-t));} .nml-fw-detail .tows__wo .tg{background:linear-gradient(135deg,var(--sw-w),var(--sw-o));} .nml-fw-detail .tows__wt .tg{background:linear-gradient(135deg,var(--sw-w),var(--sw-t));} .nml-fw-detail .tows__strat span{color:var(--tx);} .nml-fw-detail .tows__sd{font-size:12.5px;color:var(--tx2);line-height:1.5;} .nml-fw-detail .tows__sd b{color:var(--tx);} /* worked example (SWOT) */ .nml-fw-detail .ex-lbl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin:4px 0 10px;} .nml-fw-detail .ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px;} .nml-fw-detail .ex-cell{background:#fff;border-radius:var(--r-md);padding:13px;border-top:3px solid;} .nml-fw-detail .ex-cell--s{border-color:var(--sw-s);} .nml-fw-detail .ex-cell--w{border-color:var(--sw-w);} .nml-fw-detail .ex-cell--o{border-color:var(--sw-o);} .nml-fw-detail .ex-cell--t{border-color:var(--sw-t);} .nml-fw-detail .ex-cell__h{font-size:12px;font-weight:800;margin-bottom:7px;display:flex;align-items:center;gap:6px;} .nml-fw-detail .ex-cell__h .k{width:19px;height:19px;border-radius:5px;color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;} .nml-fw-detail .ex-cell--s .k{background:var(--sw-s);} .nml-fw-detail .ex-cell--s .ex-cell__h{color:var(--sw-s);} .nml-fw-detail .ex-cell--w .k{background:var(--sw-w);} .nml-fw-detail .ex-cell--w .ex-cell__h{color:var(--sw-w);} .nml-fw-detail .ex-cell--o .k{background:var(--sw-o);} .nml-fw-detail .ex-cell--o .ex-cell__h{color:var(--sw-o);} .nml-fw-detail .ex-cell--t .k{background:var(--sw-t);} .nml-fw-detail .ex-cell--t .ex-cell__h{color:var(--sw-t);} .nml-fw-detail .ex-cell ul{list-style:none;display:flex;flex-direction:column;gap:5px;margin:0;padding:0;} .nml-fw-detail .ex-cell li{font-size:12px;color:var(--tx2);line-height:1.45;padding-left:11px;position:relative;} .nml-fw-detail .ex-cell li::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;position:absolute;left:0;top:7px;opacity:.5;} .nml-fw-detail .ex-moves__lbl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);margin-bottom:11px;} .nml-fw-detail .ex-move{display:flex;gap:12px;padding:12px 0;border-top:1px dashed var(--border);} .nml-fw-detail .ex-move:first-of-type{border-top:none;} .nml-fw-detail .ex-move__tag{flex-shrink:0;font-size:10px;font-weight:800;padding:4px 9px;border-radius:var(--r-pill);color:#fff;height:fit-content;letter-spacing:.03em;} .nml-fw-detail .ex-move--so .ex-move__tag{background:linear-gradient(135deg,var(--sw-s),var(--sw-o));} .nml-fw-detail .ex-move--wo .ex-move__tag{background:linear-gradient(135deg,var(--sw-w),var(--sw-o));} .nml-fw-detail .ex-move--wt .ex-move__tag{background:linear-gradient(135deg,var(--sw-w),var(--sw-t));} .nml-fw-detail .ex-move__tx{font-size:13px;color:var(--tx2);line-height:1.6;} .nml-fw-detail .ex-move__tx b{color:var(--tx);} .nml-fw-detail .ex-kicker{font-size:13.5px;color:var(--tx);line-height:1.65;margin-top:18px;padding-top:16px;border-top:1px solid var(--ac);font-weight:600;} /* ── worked example generic (mọi framework, dùng màu function --ac) ── */ .nml-fw-detail .d-example__sub{font-size:12px;color:var(--tx3);font-weight:600;margin-top:2px;} .nml-fw-detail .ex-cell__d{font-size:12.5px;color:var(--tx2);line-height:1.5;} /* sequential: các bước xếp dọc */ .nml-fw-detail .ex-flow{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;} .nml-fw-detail .ex-step{background:#fff;border-radius:var(--r-md);padding:13px 15px;border-left:3px solid var(--ac);} .nml-fw-detail .ex-step__h{font-size:13px;font-weight:800;color:var(--ac);margin-bottom:5px;display:flex;align-items:center;gap:8px;} .nml-fw-detail .ex-step__h .k{width:20px;height:20px;border-radius:6px;background:var(--ac);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;flex-shrink:0;} .nml-fw-detail .ex-step__d{font-size:13px;color:var(--tx2);line-height:1.55;} /* dimensional generic: ô dùng màu function (SWOT có màu semantic riêng, đè bên dưới) */ .nml-fw-detail .ex-cell{border-top-color:var(--ac);} .nml-fw-detail .ex-cell__h{color:var(--ac);} .nml-fw-detail .ex-cell__h .k{background:var(--ac);} /* SWOT giữ màu semantic — khai báo sau nên thắng */ .nml-fw-detail .ex-cell--s{border-top-color:var(--sw-s);} .nml-fw-detail .ex-cell--s .ex-cell__h{color:var(--sw-s);} .nml-fw-detail .ex-cell--s .k{background:var(--sw-s);} .nml-fw-detail .ex-cell--w{border-top-color:var(--sw-w);} .nml-fw-detail .ex-cell--w .ex-cell__h{color:var(--sw-w);} .nml-fw-detail .ex-cell--w .k{background:var(--sw-w);} .nml-fw-detail .ex-cell--o{border-top-color:var(--sw-o);} .nml-fw-detail .ex-cell--o .ex-cell__h{color:var(--sw-o);} .nml-fw-detail .ex-cell--o .k{background:var(--sw-o);} .nml-fw-detail .ex-cell--t{border-top-color:var(--sw-t);} .nml-fw-detail .ex-cell--t .ex-cell__h{color:var(--sw-t);} .nml-fw-detail .ex-cell--t .k{background:var(--sw-t);} /* move dùng màu function */ .nml-fw-detail .ex-move--ac .ex-move__tag{background:var(--ac);} /* responsive */ @media(max-width:1024px){ .nml-fw-app .hero{grid-template-columns:1fr;gap:48px;padding:56px 0;} .nml-fw-app .fw-scene{order:-1;} .nml-fw-app .fw-mock{width:100%;max-width:440px;margin:0 auto;} .nml-fw-app .fw-grid{grid-template-columns:repeat(2,1fr);} .nml-fw-app .nml-library{grid-template-columns:260px 1fr;gap:28px;} .nml-fw-app .sub-inner{grid-template-columns:1fr;gap:40px;} .nml-fw-app .sub-section{padding:44px 28px;} .nml-fw-detail .d-hero{grid-template-columns:1fr;gap:32px;} .nml-fw-detail .d-mock{order:-1;max-width:440px;} .nml-fw-detail .d-layout{grid-template-columns:1fr;gap:0;} .nml-fw-detail .d-toc{display:none;} } @media(max-width:860px){ .nml-fw-app .hero__title{font-size:34px;} .nml-fw-app .nml-library{grid-template-columns:1fr;} .nml-fw-app .nml-library > .nml-sidenav{display:none;} /* ── Bottom sheet filter (mobile) ── */ /* sidenav được portal vào .sheet-body → bỏ mọi style card của desktop */ .nml-fw-app .sheet-body .nml-sidenav{ position:static!important;background:none!important;border:none!important;box-shadow:none!important; border-radius:0!important;padding:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important; width:100%!important; } .nml-fw-app .sheet-body .nml-sidenav a{padding:13px 12px;font-size:15px;} .nml-fw-app .sheet-body .nml-sidenav a.is-active::before{top:10px;bottom:10px;} .nml-fw-app .sheet-body .grp:first-child{padding-top:4px;} /* FAB sticky đáy — luôn trong tầm ngón cái */ .nml-fw-app .nml-fw-fab{ display:inline-flex!important;align-items:center;gap:8px; position:fixed!important;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); font-family:inherit;font-size:14.5px;font-weight:700; padding:14px 24px;border:none!important;border-radius:var(--r-pill); background:var(--blue)!important;color:#fff!important; box-shadow:0 8px 24px rgba(47,107,255,.40),0 2px 6px rgba(15,23,42,.14); cursor:pointer;z-index:9998!important; transition:opacity var(--t-trans) ease,transform var(--t-trans) ease; } .nml-fw-app .nml-fw-fab:active{transform:translateX(-50%) scale(.97);} .nml-fw-app .nml-fw-fab.is-away{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(90px);} .nml-fw-app .nml-fw-fab svg{width:17px;height:17px;flex-shrink:0;} .nml-fw-app .fab-count{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:rgba(255,255,255,.26);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;} /* Backdrop */ .nml-fw-app .nml-fw-sheet-bd{ display:block!important;position:fixed!important;inset:0!important; background:rgba(15,23,42,.45);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); z-index:99998!important;opacity:0;visibility:hidden; transition:opacity var(--t-trans) ease,visibility var(--t-trans) ease; } .nml-fw-app .nml-fw-sheet-bd.is-open{opacity:1;visibility:visible;} /* Sheet */ .nml-fw-app .nml-fw-sheet{ display:flex!important;flex-direction:column; position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important; max-height:82vh; background:rgba(255,255,255,.98)!important; backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4); border-top:1px solid rgba(255,255,255,.9); border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:0 -20px 60px rgba(15,23,42,.24); transform:translateY(100%); transition:transform 320ms var(--e-out); z-index:99999!important; } .nml-fw-app .nml-fw-sheet.is-open{transform:translateY(0)!important;} .nml-fw-app .nml-fw-sheet.is-dragging{transition:none!important;} .nml-fw-app .sheet-grab{padding:10px 0 6px;display:flex;justify-content:center;cursor:grab;touch-action:none;flex-shrink:0;} .nml-fw-app .sheet-handle{width:44px;height:4px;border-radius:2px;background:var(--border);display:block;} .nml-fw-app .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 20px 12px;flex-shrink:0;} .nml-fw-app .sheet-title{font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--tx);} .nml-fw-app .sheet-clear{font-family:inherit;font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--r-pill);border:none!important;background:rgba(47,107,255,.08)!important;color:var(--blue)!important;cursor:pointer;} .nml-fw-app .sheet-clear:active{background:rgba(47,107,255,.16)!important;} .nml-fw-app .sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 14px;overscroll-behavior:contain;} .nml-fw-app .sheet-foot{padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:#fff;flex-shrink:0;} .nml-fw-app .sheet-apply{ width:100%;font-family:inherit;font-size:15px;font-weight:700; padding:15px 20px;border:none!important;border-radius:var(--r-pill); background:var(--blue)!important;color:#fff!important; box-shadow:0 4px 14px rgba(47,107,255,.32);cursor:pointer; } .nml-fw-app .sheet-apply:active{background:var(--blue-dark)!important;} .nml-fw-app .sheet-apply b{font-family:'JetBrains Mono',monospace;font-weight:600;} /* chừa chỗ cho FAB, tránh che card cuối */ .nml-fw-app .library-section{padding-bottom:110px;} .nml-fw-app .steps-grid{grid-template-columns:1fr;gap:14px;} .nml-fw-app .nml-fw-wrap{padding:0 20px;} .nml-fw-app .lib-title,.nml-fw-app .section-title,.nml-fw-app .sub-title{font-size:26px;} .nml-fw-app .bd-dim{grid-template-columns:1fr;} .nml-fw-detail .d-h1{font-size:34px;} } @media(max-width:600px){ .nml-fw-app .hero__title{font-size:28px;} .nml-fw-app .fw-grid{grid-template-columns:1fr;} .nml-fw-app .hero__stats{flex-direction:column;align-items:flex-start;gap:10px;border-radius:var(--r-lg);} .nml-fw-app .hstat{padding:0;} .nml-fw-app .hstat__sep{display:none;} .nml-fw-app .toolbar-row{flex-wrap:wrap;gap:8px;} .nml-fw-app .nml-search{flex:1 1 auto;max-width:none;} .nml-fw-app .nml-search input{font-size:16px;} .nml-fw-app .nml-dropdown{flex:0 0 auto;min-width:0;} .nml-fw-app .toolbar-row .results-count{margin-left:0;width:100%;order:3;text-align:right;} .nml-fw-detail{padding-top:80px;} .nml-fw-app .bk{padding:80px 16px 24px;} .nml-fw-app .modal{max-height:calc(100vh - 104px);} .nml-fw-detail .d-wrap{padding:0 20px;} .nml-fw-detail .d-h1{font-size:28px;} .nml-fw-detail .d-bd-dim,.nml-fw-detail .ex-grid{grid-template-columns:1fr;} .nml-fw-detail .tows__row{grid-template-columns:60px 1fr 1fr;} .nml-fw-detail .tows__cell{padding:10px;} .nml-fw-detail .d-cta__row{flex-direction:column;} .nml-fw-detail .d-cta__row .btn{width:100%;justify-content:center;} } @media(prefers-reduced-motion:reduce){.nml-reveal{transition:none;opacity:1;transform:none;} .nml-fw-app .nml-fw-sheet{transition:none!important;}}