/* ══════════════════════════════════════════════════════════ NML Framework — Worksheet + Banner hub File RIÊNG. Không đụng nml-framework.css. Tokens khai báo lại trên .nml-ws / .wsb để hoạt động cả khi worksheet được portal ra lúc in. ══════════════════════════════════════════════════════════ */ /* Sprite logo: chỉ chứa , không được chiếm chỗ. Hello Elementor có rule cho nên khoá cứng ở đây lẫn ở inline style. */ .nml-ws-sprite{ position:absolute !important; width:0 !important; height:0 !important; overflow:hidden !important; visibility:hidden; } .nml-ws, .wsb { --ws-blue:#2F6BFF; --ws-blue-dark:#1A56E8; --ws-green:#22C55E; --ws-tx:#0F172A; --ws-tx2:#475569; --ws-tx3:#94A3B8; --ws-bg:#F8FAFC; --ws-border:#E2E8F0; --ws-s:#16A34A; --ws-w:#E11D48; --ws-o:#2F6BFF; --ws-t:#D97706; --ws-rxs:6px; --ws-rsm:10px; --ws-rmd:14px; --ws-rlg:20px; --ws-rxl:28px; --ws-rp:999px; --ws-sh:0 2px 8px rgba(15,23,42,.06); --ws-shm:0 10px 28px -16px rgba(15,23,42,.18); --ws-shl:0 26px 56px -30px rgba(47,107,255,.28),0 8px 20px -14px rgba(15,23,42,.10); --ws-e:cubic-bezier(.16,1,.3,1); font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ws-tx); line-height:1.6; } .nml-ws *, .nml-ws *::before, .nml-ws *::after, .wsb *, .wsb *::before, .wsb *::after { box-sizing:border-box; } /* Theme đặt svg{width:100%} → mọi icon trong hai khối này phải tự giới hạn */ .nml-ws svg:not(.ws-wm):not(.by-logo), .wsb svg{ max-width:100%; height:auto; } .wsb svg{ flex-shrink:0; } /* ═════════ WORKSHEET ═════════ */ .nml-ws{ position:relative; margin-top:52px; border-radius:var(--ws-rxl); overflow:hidden; background:rgba(255,255,255,.8); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(47,107,255,.18); box-shadow:var(--ws-shm); } .nml-ws .ws-wm{ display:none; } .nml-ws .ws-hd{ padding:26px 28px 22px; border-bottom:1px solid var(--ws-border); background:linear-gradient(135deg,rgba(47,107,255,.05),rgba(34,197,94,.03)); } .nml-ws .ws-hd__eb{ margin-bottom:10px; } .nml-ws .ws-tagnew{ font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:var(--ws-rp); background:rgba(34,197,94,.12); color:#15803D; } .nml-ws .ws-hd h2{ font-size:23px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; line-height:1.25; } .nml-ws .ws-hd p{ font-size:14px; color:var(--ws-tx2); margin:0 0 18px; max-width:60ch; } .nml-ws .ws-acts{ display:flex; gap:10px; flex-wrap:wrap; } .nml-ws .ws-btn{ display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-weight:600; font-size:13px; line-height:1; padding:10px 17px; border-radius:var(--ws-rp); border:none !important; cursor:pointer; white-space:nowrap; transition:background 150ms ease,color 150ms ease,border-color 150ms ease,transform 150ms ease,box-shadow 150ms ease; } .nml-ws .ws-btn svg{ width:14px; height:14px; flex-shrink:0; } .nml-ws .ws-btn--primary{ background:var(--ws-blue) !important; color:#fff !important; box-shadow:0 4px 12px rgba(47,107,255,.3); } .nml-ws .ws-btn--primary:hover{ background:var(--ws-blue-dark) !important; color:#fff !important; transform:translateY(-1px); box-shadow:0 6px 18px rgba(47,107,255,.4) !important; } .nml-ws .ws-btn--white{ background:#fff !important; color:var(--ws-tx2) !important; border:1.5px solid var(--ws-border) !important; } .nml-ws .ws-btn--white:hover{ border-color:var(--ws-blue) !important; color:var(--ws-blue) !important; background:#fff !important; } .nml-ws .ws-btn:focus-visible{ outline:2px solid var(--ws-blue); outline-offset:3px; } .nml-ws .ws-note{ display:flex; align-items:center; gap:7px; margin-top:12px; font-size:12px; color:var(--ws-tx3); } .nml-ws .ws-note svg{ width:13px; height:13px; flex-shrink:0; } .nml-ws .ws-note a{ color:var(--ws-blue) !important; font-weight:600; text-decoration:none !important; } .nml-ws .ws-note a:hover{ text-decoration:underline !important; } .nml-ws .ws-bd{ padding:26px 28px 30px; position:relative; z-index:1; } .nml-ws .ws-meta{ display:grid; grid-template-columns:2fr 1.2fr 1fr; gap:12px; margin-bottom:28px; } .nml-ws .ws-meta .f{ display:flex; flex-direction:column; gap:6px; } .nml-ws .ws-meta label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ws-tx3); } .nml-ws .ws-meta input{ font-family:inherit; font-size:14px; padding:10px 12px; width:100%; border:1.5px solid var(--ws-border) !important; border-radius:var(--ws-rsm); background:#fff !important; color:var(--ws-tx) !important; outline:none; transition:border-color 150ms ease,box-shadow 150ms ease; } .nml-ws .ws-meta input:focus{ border-color:var(--ws-blue) !important; box-shadow:0 0 0 3.5px rgba(47,107,255,.12) !important; } .nml-ws .ws-meta input::placeholder{ color:var(--ws-tx3) !important; } .nml-ws .ws-step{ margin-bottom:26px; display:flow-root; } .nml-ws .ws-sh{ display:flex; align-items:center; gap:11px; margin-bottom:5px; } .nml-ws .ws-sn{ width:28px; height:28px; border-radius:8px; flex-shrink:0; background:rgba(47,107,255,.1); color:var(--ws-blue); font-size:13px; font-weight:800; display:grid; place-items:center; } .nml-ws .ws-st{ font-size:19px; font-weight:800; letter-spacing:-.015em; } .nml-ws .ws-sd{ font-size:13.5px; color:var(--ws-tx2); margin:0 0 16px 39px; } .nml-ws .ws-cells{ display:grid; grid-template-columns:1fr 1fr; gap:13px; } .nml-ws .ws-cells.is-3col{ grid-template-columns:repeat(3,1fr); } .nml-ws .ws-cells.is-flow{ display:flex; flex-direction:column; gap:13px; } .nml-ws .ws-cell{ background:#fff; border:1px solid var(--ws-border); border-top:3px solid var(--ac,var(--ws-blue)); border-radius:var(--ws-rmd); padding:15px 16px; transition:box-shadow 150ms ease; } .nml-ws .ws-cell:focus-within{ box-shadow:var(--ws-shm); } .nml-ws .ws-ch{ display:flex; align-items:center; gap:9px; margin-bottom:9px; } .nml-ws .ws-ck{ width:24px; height:24px; border-radius:7px; flex-shrink:0; background:var(--ac,var(--ws-blue)); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; } .nml-ws .ws-cn{ font-size:14px; font-weight:800; color:var(--ac,var(--ws-blue)); } /* SWOT: 4 ô mang màu ngữ nghĩa riêng */ .nml-ws.is-swot .ws-cell:nth-child(1){ --ac:var(--ws-s); } .nml-ws.is-swot .ws-cell:nth-child(2){ --ac:var(--ws-w); } .nml-ws.is-swot .ws-cell:nth-child(3){ --ac:var(--ws-o); } .nml-ws.is-swot .ws-cell:nth-child(4){ --ac:var(--ws-t); } .nml-ws .ws-fld{ min-height:70px; font-size:13.5px; line-height:1.6; color:var(--ws-tx); outline:none; border-radius:var(--ws-rxs); white-space:pre-wrap; word-break:break-word; } .nml-ws .ws-fld:empty::before{ content:attr(data-ph); color:var(--ws-tx3); pointer-events:none; } .nml-ws .ws-fld:focus{ background:rgba(47,107,255,.03); } .nml-ws .ws-fld:focus-visible{ outline:2px solid rgba(47,107,255,.25); outline-offset:4px; } .nml-ws .ws-prog{ display:flex; align-items:center; gap:13px; margin:22px 0 6px; padding:13px 16px; border-radius:var(--ws-rmd); background:#fff; border:1px solid var(--ws-border); } .nml-ws .ws-pb{ flex:1; height:6px; border-radius:var(--ws-rp); background:var(--ws-border); overflow:hidden; } .nml-ws .ws-pf{ height:100%; width:0; border-radius:var(--ws-rp); background:linear-gradient(90deg,var(--ws-blue),var(--ws-green)); transition:width 400ms var(--ws-e); } .nml-ws .ws-pt{ font-size:13px; color:var(--ws-tx2); white-space:nowrap; } .nml-ws .ws-pt b{ font-family:'JetBrains Mono',monospace; color:var(--ws-tx); } /* Bước 2 — mở khoá */ .nml-ws .ws-step2{ position:relative; border-radius:var(--ws-rlg); padding:24px; background:linear-gradient(135deg,rgba(47,107,255,.05),rgba(34,197,94,.04)); border:1px solid rgba(47,107,255,.18); opacity:.5; transform:translateY(6px); transition:opacity 500ms var(--ws-e),transform 500ms var(--ws-e); } .nml-ws .ws-step2.is-ready{ opacity:1; transform:none; } /* Framework sản xuất (AIDA...): Bước 2 là rà soát tùy chọn, mở sẵn — không khoá, không dimmed */ .nml-ws.is-produce .ws-step2{ opacity:1; transform:none; } .nml-ws.is-produce .ws-rdy{ display:flex; } .nml-ws .ws-lock{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ws-tx2); margin-bottom:18px; padding:11px 14px; border-radius:var(--ws-rsm); background:rgba(255,255,255,.7); border:1px dashed var(--ws-border); } .nml-ws .ws-lock svg{ width:16px; height:16px; color:var(--ws-tx3); flex-shrink:0; } .nml-ws .ws-rdy{ display:none; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ws-blue); margin-bottom:18px; padding:11px 14px; border-radius:var(--ws-rsm); background:rgba(47,107,255,.07); } .nml-ws .ws-rdy svg{ width:16px; height:16px; flex-shrink:0; } .nml-ws .ws-step2.is-ready .ws-lock{ display:none; } .nml-ws .ws-step2.is-ready .ws-rdy{ display:flex; } /* Ma trận TOWS */ .nml-ws .ws-tows{ border:1px solid var(--ws-border); border-radius:var(--ws-rmd); overflow:hidden; background:#fff; } .nml-ws .ws-tr{ display:grid; grid-template-columns:92px 1fr 1fr; } .nml-ws .ws-tr + .ws-tr{ border-top:1px solid var(--ws-border); } .nml-ws .ws-tc{ padding:13px 14px; border-left:1px solid var(--ws-border); min-width:0; } .nml-ws .ws-tc:first-child{ border-left:none; } .nml-ws .ws-th{ background:var(--ws-bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; } .nml-ws .ws-tk{ width:26px; height:26px; border-radius:7px; color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; } .nml-ws .tk-s{ background:var(--ws-s); } .nml-ws .tk-w{ background:var(--ws-w); } .nml-ws .tk-o{ background:var(--ws-o); } .nml-ws .tk-t{ background:var(--ws-t); } .nml-ws .ws-tl{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ws-tx3); } .nml-ws .ws-tag{ display:inline-flex; align-items:center; gap:7px; margin-bottom:5px; } .nml-ws .ws-tag .g{ min-width:34px; height:18px; border-radius:var(--ws-rp); color:#fff; font-size:9.5px; font-weight:800; letter-spacing:.03em; display:grid; place-items:center; padding:0 7px; } .nml-ws .ws-tag .g.so{ background:linear-gradient(135deg,var(--ws-s),var(--ws-o)); } .nml-ws .ws-tag .g.st{ background:linear-gradient(135deg,var(--ws-s),var(--ws-t)); } .nml-ws .ws-tag .g.wo{ background:linear-gradient(135deg,var(--ws-w),var(--ws-o)); } .nml-ws .ws-tag .g.wt{ background:linear-gradient(135deg,var(--ws-w),var(--ws-t)); } .nml-ws .ws-tag .nm{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ws-tx); } .nml-ws .ws-tq{ font-size:11px; color:var(--ws-tx3); line-height:1.45; margin-bottom:7px; } .nml-ws .ws-tc .ws-fld{ min-height:60px; font-size:13px; } /* Bước 2 dạng dòng (framework không phải SWOT) */ .nml-ws .ws-move{ display:flex; gap:12px; padding:14px 0; border-top:1px dashed rgba(47,107,255,.2); } .nml-ws .ws-move:first-of-type{ border-top:none; padding-top:2px; } .nml-ws .ws-mtag{ flex-shrink:0; min-width:64px; height:fit-content; text-align:center; font-size:10.5px; font-weight:800; letter-spacing:.03em; padding:5px 10px; border-radius:var(--ws-rp); color:#fff; background:linear-gradient(135deg,var(--ws-blue),#6366F1); } .nml-ws .ws-mbody{ flex:1; min-width:0; } .nml-ws .ws-mq{ font-size:12px; color:var(--ws-tx3); margin-bottom:5px; } .nml-ws .ws-mbody .ws-fld{ min-height:56px; } .nml-ws .ws-kick{ margin-top:20px; padding-top:16px; border-top:2px solid var(--ws-blue); } .nml-ws .ws-kl{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ws-blue); margin-bottom:8px; } .nml-ws .ws-kick .ws-fld{ min-height:52px; } .nml-ws .ws-print-head, .nml-ws .ws-print-foot{ display:none; } /* ═════════ BANNER HUB ═════════ */ .wsb{ position:relative; overflow:hidden; background:rgba(255,255,255,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.9); border-radius:var(--ws-rxl); box-shadow:var(--ws-sh); padding:50px; } .wsb::before{ content:''; position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(47,107,255,.1),transparent 68%); top:-220px; right:-160px; pointer-events:none; } .wsb__in{ display:grid; grid-template-columns:1fr 1.05fr; gap:54px; align-items:center; position:relative; } .wsb__col{ min-width:0; } .wsb__eb{ display:inline-flex; align-items:center; gap:9px; margin-bottom:16px; } .wsb__new{ font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:var(--ws-rp); background:rgba(34,197,94,.12); color:#15803D; } .wsb__t{ font-size:31px; font-weight:800; letter-spacing:-.025em; line-height:1.16; margin:0 0 14px; } .wsb__t em{ font-style:normal; background:linear-gradient(135deg,var(--ws-blue),#6366F1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .wsb__d{ font-size:15.5px; color:var(--ws-tx2); line-height:1.68; margin:0 0 26px; max-width:48ch; } .wsb__list{ display:flex; flex-direction:column; gap:15px; margin-bottom:28px; } .wsb__it{ display:flex; gap:13px; } .wsb__ic{ width:32px; height:32px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; background:rgba(47,107,255,.09); color:var(--ws-blue); } .wsb__ic svg{ width:16px; height:16px; } .wsb__ic--g{ background:rgba(34,197,94,.1); color:#16A34A; } .wsb__it b{ display:block; font-size:14px; font-weight:700; margin-bottom:2px; } .wsb__it span{ font-size:13px; color:var(--ws-tx2); line-height:1.55; } .wsb__acts{ display:flex; gap:12px; flex-wrap:wrap; } /* Nút riêng của banner. KHÔNG dùng .btn — class đó chỉ sống dưới .nml-fw-detail. Hello Elementor tô link màu hồng + để bung full width → chặn cả hai. */ .wsb__btn{ display:inline-flex !important; align-items:center; gap:8px; font-family:inherit; font-weight:600; font-size:15px; line-height:1; padding:13px 24px; border-radius:var(--ws-rp); background:var(--ws-blue) !important; color:#fff !important; border:none !important; text-decoration:none !important; box-shadow:0 4px 12px rgba(47,107,255,.3); cursor:pointer; white-space:nowrap; transition:background 150ms ease,transform 150ms ease,box-shadow 150ms ease; } .wsb__btn:hover, .wsb__btn:focus, .wsb__btn:active, .wsb__btn:visited{ color:#fff !important; text-decoration:none !important; } .wsb__btn:hover{ background:var(--ws-blue-dark) !important; transform:translateY(-1px); box-shadow:0 6px 18px rgba(47,107,255,.4) !important; } .wsb__btn:focus-visible{ outline:2px solid var(--ws-blue); outline-offset:3px; } .wsb__btn svg{ width:16px !important; height:16px !important; flex:0 0 auto; display:block; stroke:currentColor; } /* Mock hoạt cảnh */ .wsb__mock{ background:#fff; border:1px solid var(--ws-border); border-radius:var(--ws-rlg); box-shadow:var(--ws-shl); overflow:hidden; cursor:pointer; transform:perspective(1400px) rotateY(-5deg) rotateX(2deg); transition:transform 700ms var(--ws-e); } .wsb__mock:hover{ transform:perspective(1400px) rotateY(-2deg) rotateX(1deg); } .wsb .mk-bar{ height:4px; background:linear-gradient(90deg,var(--ws-blue),var(--ws-green)); } .wsb .mk-top{ padding:13px 16px; border-bottom:1px solid var(--ws-border); display:flex; align-items:center; justify-content:space-between; gap:12px; } .wsb .mk-proj{ font-size:12px; font-weight:700; } .wsb .mk-proj span{ display:block; font-size:9px; font-weight:600; color:var(--ws-tx3); text-transform:uppercase; letter-spacing:.07em; } .wsb .mk-pdf{ display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; padding:5px 11px; border-radius:var(--ws-rp); background:var(--ws-bg); color:var(--ws-tx3); border:1px solid var(--ws-border); transition:all 400ms var(--ws-e); } .wsb .mk-pdf svg{ width:11px; height:11px; } .wsb .mk-bd{ padding:15px 16px; } .wsb .mk-l{ font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ws-tx3); margin-bottom:9px; } .wsb .mk-g{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .wsb .mk-c{ border:1px solid var(--ws-border); border-top:2.5px solid var(--mc,var(--ws-blue)); border-radius:var(--ws-rsm); padding:9px 10px; min-height:54px; } .wsb .mk-c--s{ --mc:var(--ws-s); } .wsb .mk-c--w{ --mc:var(--ws-w); } .wsb .mk-c--o{ --mc:var(--ws-o); } .wsb .mk-c--t{ --mc:var(--ws-t); } .wsb .mk-ch{ display:flex; align-items:center; gap:6px; margin-bottom:5px; } .wsb .mk-ck{ width:16px; height:16px; border-radius:5px; background:var(--mc); color:#fff; font-size:9px; font-weight:800; display:grid; place-items:center; } .wsb .mk-cn{ font-size:10px; font-weight:800; color:var(--mc); } .wsb .mk-tx{ font-size:9.5px; color:var(--ws-tx2); line-height:1.45; opacity:0; transform:translateY(3px); } .wsb .mk-pg{ display:flex; align-items:center; gap:9px; margin:12px 0 4px; } .wsb .mk-pb{ flex:1; height:4px; border-radius:var(--ws-rp); background:var(--ws-border); overflow:hidden; } .wsb .mk-pf{ height:100%; width:0; border-radius:var(--ws-rp); background:linear-gradient(90deg,var(--ws-blue),var(--ws-green)); } .wsb .mk-pn{ font-size:9.5px; font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--ws-tx3); } .wsb .mk-s2{ margin-top:12px; padding:12px; border-radius:var(--ws-rmd); background:linear-gradient(135deg,rgba(47,107,255,.05),rgba(34,197,94,.04)); border:1px solid rgba(47,107,255,.16); opacity:.42; transform:translateY(5px); } .wsb .mk-note{ display:flex; align-items:center; gap:7px; font-size:9.5px; color:var(--ws-tx3); padding:6px 9px; border-radius:var(--ws-rxs); background:rgba(255,255,255,.7); border:1px dashed var(--ws-border); margin-bottom:10px; } .wsb .mk-note svg{ width:11px; height:11px; flex-shrink:0; } .wsb .mk-note--rdy{ color:var(--ws-blue); background:rgba(47,107,255,.07); border:1px solid rgba(47,107,255,.2); font-weight:700; display:none; } .wsb .mk-tw{ border:1px solid var(--ws-border); border-radius:var(--ws-rsm); overflow:hidden; background:#fff; } .wsb .mk-tr{ display:grid; grid-template-columns:32px 1fr 1fr; } .wsb .mk-tr + .mk-tr{ border-top:1px solid var(--ws-border); } .wsb .mk-tc{ padding:7px 8px; border-left:1px solid var(--ws-border); min-width:0; } .wsb .mk-tc:first-child{ border-left:none; } .wsb .mk-th{ background:var(--ws-bg); display:grid; place-items:center; } .wsb .mk-tk{ width:16px; height:16px; border-radius:5px; color:#fff; font-size:8.5px; font-weight:800; display:grid; place-items:center; } .wsb .tk-s{ background:var(--ws-s); } .wsb .tk-w{ background:var(--ws-w); } .wsb .tk-o{ background:var(--ws-o); } .wsb .tk-t{ background:var(--ws-t); } .wsb .mk-tg{ display:inline-block; font-size:8px; font-weight:800; color:#fff; padding:2px 6px; border-radius:var(--ws-rp); margin-bottom:4px; } .wsb .g-so{ background:linear-gradient(135deg,var(--ws-s),var(--ws-o)); } .wsb .g-wo{ background:linear-gradient(135deg,var(--ws-w),var(--ws-o)); } .wsb .g-st{ background:linear-gradient(135deg,var(--ws-s),var(--ws-t)); } .wsb .g-wt{ background:linear-gradient(135deg,var(--ws-w),var(--ws-t)); } .wsb .mk-tt{ font-size:8.5px; color:var(--ws-tx2); line-height:1.4; opacity:0; } .wsb .mk-rp{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:13px; font-size:11px; color:var(--ws-tx3); font-weight:600; opacity:0; transition:opacity 400ms ease; } .wsb .mk-rp svg{ width:12px; height:12px; } .wsb__mock.is-done .mk-rp{ opacity:1; } .wsb__mock.is-play .mk-tx{ animation:wsbUp 460ms var(--ws-e) forwards; } .wsb__mock.is-play .mk-c:nth-child(1) .mk-tx{ animation-delay:250ms; } .wsb__mock.is-play .mk-c:nth-child(2) .mk-tx{ animation-delay:450ms; } .wsb__mock.is-play .mk-c:nth-child(3) .mk-tx{ animation-delay:650ms; } .wsb__mock.is-play .mk-c:nth-child(4) .mk-tx{ animation-delay:850ms; } .wsb__mock.is-play .mk-pf{ animation:wsbFill 1100ms var(--ws-e) 300ms forwards; } .wsb__mock.is-play .mk-s2{ animation:wsbUnlock 620ms var(--ws-e) 1700ms forwards; } .wsb__mock.is-play .mk-note:not(.mk-note--rdy){ animation:wsbHide 300ms ease 1700ms forwards; } .wsb__mock.is-play .mk-note--rdy{ animation:wsbShow 420ms var(--ws-e) 1900ms forwards; } .wsb__mock.is-play .mk-tt{ animation:wsbUp 400ms var(--ws-e) forwards; } .wsb__mock.is-play .c1 .mk-tt{ animation-delay:2150ms; } .wsb__mock.is-play .c2 .mk-tt{ animation-delay:2300ms; } .wsb__mock.is-play .c3 .mk-tt{ animation-delay:2450ms; } .wsb__mock.is-play .c4 .mk-tt{ animation-delay:2600ms; } .wsb__mock.is-play .mk-pdf{ animation:wsbReady 600ms var(--ws-e) 2900ms forwards; } @keyframes wsbUp{ to{ opacity:1; transform:none; } } @keyframes wsbFill{ to{ width:100%; } } @keyframes wsbUnlock{ to{ opacity:1; transform:none; } } @keyframes wsbHide{ to{ opacity:0; height:0; margin:0; padding:0; border-width:0; overflow:hidden; } } @keyframes wsbShow{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; display:flex; } } @keyframes wsbReady{ to{ background:rgba(47,107,255,.09); color:var(--ws-blue); border-color:rgba(47,107,255,.25); } } /* ═════════ PRINT — chỉ in worksheet ═════════ JS portal .nml-ws vào .nml-ws-portal (con trực tiếp của body) rồi gắn body.nml-ws-printing. Nhờ đó ẩn được cả header/footer của theme. */ @media print{ @page{ size:A4; margin:14mm 12mm; } body.nml-ws-printing{ background:#fff !important; } body.nml-ws-printing > *:not(.nml-ws-portal){ display:none !important; } .nml-ws-portal{ display:block !important; } .nml-ws{ margin:0; border:none; box-shadow:none; background:#fff; border-radius:0; backdrop-filter:none; } .nml-ws .ws-hd, .nml-ws .ws-screen{ display:none !important; } .nml-ws .ws-bd{ padding:0; } /* Watermark: lặp mọi trang, sau nội dung, không cản đọc. Chỉ bản Free. */ .nml-ws .ws-wm{ display:block !important; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:118mm; height:auto; opacity:.05; z-index:0; pointer-events:none; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .nml-ws.is-premium .ws-wm{ display:none !important; } .nml-ws .ws-print-head{ display:flex !important; align-items:flex-end; justify-content:space-between; gap:16px; border-bottom:2px solid var(--ws-blue); padding-bottom:12px; margin-bottom:16px; } .nml-ws .ws-print-head .t{ font-size:19px; font-weight:800; letter-spacing:-.02em; } .nml-ws .ws-print-head .s{ font-size:11px; color:var(--ws-tx2); } .nml-ws .ws-print-head .by{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; margin:0 0 1.5mm 6.5mm; } .nml-ws .by-l{ font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ws-tx3); } /* min size Brand DNA v3: lockup 1 dòng ≥ 30mm khi in */ .nml-ws .by-logo{ width:32mm; height:auto; display:block; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .nml-ws .ws-print-foot{ display:block !important; margin-top:14px; padding-top:8px; border-top:1px solid var(--ws-border); font-size:9.5px; color:var(--ws-tx3); text-align:center; } .nml-ws .ws-print-foot b{ color:var(--ws-tx2); font-weight:600; } /* Premium: xoá sạch mọi dấu vết NML */ .nml-ws.is-premium .ws-print-head .by{ display:none !important; } .nml-ws.is-premium .ws-print-foot{ display:none !important; } .nml-ws.is-premium .ws-print-head{ padding-bottom:10px; } .nml-ws .ws-meta{ margin-bottom:18px; gap:10px; } .nml-ws .ws-meta input{ border:none !important; border-bottom:1px solid var(--ws-border) !important; border-radius:0; padding:4px 0; font-weight:600; } .nml-ws .ws-step{ margin-bottom:18px; break-inside:avoid; } /* giữ đúng lưới khi in — viewport lúc in hẹp, đừng để rơi về 1 cột */ .nml-ws .ws-cells{ grid-template-columns:1fr 1fr !important; } .nml-ws .ws-cells.is-3col{ grid-template-columns:1fr 1fr !important; } .nml-ws .ws-cells.is-flow{ display:flex !important; } .nml-ws .ws-cell{ box-shadow:none; break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .nml-ws .ws-fld{ min-height:auto; } .nml-ws .ws-fld:empty::before{ content:''; } .nml-ws .ws-step2{ opacity:1 !important; transform:none !important; background:#fff; border:1.5px solid var(--ws-blue); break-inside:avoid; padding:16px; } .nml-ws .ws-lock, .nml-ws .ws-rdy{ display:none !important; } .nml-ws .ws-tows{ break-inside:avoid; } .nml-ws .ws-tr{ grid-template-columns:80px 1fr 1fr !important; } .nml-ws .ws-th, .nml-ws .ws-tk, .nml-ws .ws-tag .g, .nml-ws .ws-ck, .nml-ws .ws-sn, .nml-ws .ws-mtag{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } .nml-ws .ws-move{ break-inside:avoid; } } /* ═════════ RESPONSIVE (chỉ màn hình — KHÔNG áp khi in) ═════════ */ @media screen and (max-width:1024px){ .wsb{ padding:36px 26px; } .wsb__in{ grid-template-columns:1fr; gap:40px; } .wsb__mock{ transform:none; } .wsb__mock:hover{ transform:none; } } @media screen and (max-width:760px){ .nml-ws{ border-radius:var(--ws-rlg); } .nml-ws .ws-hd{ padding:22px 18px 18px; } .nml-ws .ws-hd h2{ font-size:20px; } .nml-ws .ws-bd{ padding:20px 18px 24px; } .nml-ws .ws-meta{ grid-template-columns:1fr; } .nml-ws .ws-meta input{ font-size:16px; } /* chống iOS auto-zoom */ .nml-ws .ws-cells, .nml-ws .ws-cells.is-3col{ grid-template-columns:1fr; } .nml-ws .ws-step2{ padding:16px; } .nml-ws .ws-tr{ grid-template-columns:1fr; } .nml-ws .ws-tr + .ws-tr{ border-top:none; } .nml-ws .ws-th{ display:none; } .nml-ws .ws-tc{ border-left:none; border-top:1px solid var(--ws-border); } .nml-ws .ws-acts{ flex-direction:column; align-items:stretch; } .nml-ws .ws-btn{ justify-content:center; } .nml-ws .ws-move{ flex-direction:column; gap:7px; } .nml-ws .ws-mtag{ align-self:flex-start; } .wsb__t{ font-size:24px; } .wsb .mk-g{ grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ .wsb__mock *{ animation:none !important; } .wsb .mk-tx, .wsb .mk-tt{ opacity:1; transform:none; } .wsb .mk-pf{ width:100%; } .wsb .mk-s2{ opacity:1; transform:none; } .wsb .mk-note:not(.mk-note--rdy){ display:none; } .wsb .mk-note--rdy{ display:flex; } .nml-ws .ws-step2{ transition:none !important; } }