/* Bé Ham Học v4.3 — Tạo phiếu: trang chọn nhóm + trình tạo phiếu theo nhóm.
   Thiết kế phẳng: không gờ bóng, ít viền; trạng thái chọn = nền nhạt cùng màu nhóm + dấu tích, để phần nội dung phiếu nổi bật. */
.tp-hub,.tp,.tp-modal{--c:#1FA866;--c-l:color-mix(in srgb,var(--c) 9%,#fff);--c-m:color-mix(in srgb,var(--c) 18%,#fff);--c-d:color-mix(in srgb,var(--c) 78%,#000);
  --soft:#F6F7F2;--soft2:#EEF1EA;--line:#E7ECE6;--ink:var(--k-ink,#1F3B33);--ink2:var(--k-ink-2,#4B6359);--mut:var(--k-mut,#6B7F77)}
.tp-hub{padding:8px 0 56px}
.tp-hub h1{font-size:clamp(30px,4.2vw,44px);font-weight:950;letter-spacing:-.6px;margin:10px 0 8px;color:var(--ink)}
.tp-hub-h .k-lead{max-width:760px;margin:0}
.tp-alert{margin:14px 0 0;background:#FFF4E5;color:#7A4A00;border-radius:14px;padding:10px 14px;font-weight:800}

/* ---------- thẻ nhóm ---------- */
.tp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:26px}
.tp-card{--c-l:color-mix(in srgb,var(--c) 9%,#fff);display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;text-decoration:none;color:var(--ink);
  box-shadow:0 1px 2px rgba(31,59,51,.06),0 6px 22px rgba(31,59,51,.05);transition:transform .15s,box-shadow .15s}
.tp-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(31,59,51,.06),0 14px 32px rgba(31,59,51,.1)}
.tp-card:focus-visible{outline:3px solid var(--c);outline-offset:3px}
.tp-prev{height:150px;background:var(--c-l);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;position:relative;overflow:hidden}
.tp-cb{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.tp-ico{width:44px;height:44px;border-radius:14px;background:var(--c-l);display:grid;place-items:center;flex:none}
.tp-ico img{width:28px;height:28px}
.tp-ico.lg{width:60px;height:60px;border-radius:18px}.tp-ico.lg img{width:40px;height:40px}
.tp-cb .tp-ico{position:relative;z-index:1;margin-top:-40px;background:#fff;box-shadow:0 2px 8px rgba(31,59,51,.1)}
.tp-card h2{margin:10px 0 6px;font-size:21px;font-weight:950;color:var(--c-d)}
.tp-card p{margin:0;color:var(--ink2);font-size:14.5px;line-height:1.5;flex:1}
.tp-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tp-meta span{font-size:12px;font-weight:850;color:var(--ink2);background:var(--soft);border-radius:999px;padding:3px 9px}
.tp-go{margin-top:14px;align-self:flex-start;display:inline-flex;gap:6px;align-items:center;background:var(--c);color:#fff;font-weight:900;border-radius:999px;padding:9px 18px;font-size:14.5px}
.tp-go i{font-style:normal;transition:transform .15s}.tp-card:hover .tp-go i{transform:translateX(3px)}
/* hình minh hoạ trong thẻ */
.m-row{display:flex;align-items:center;gap:6px;font-weight:950;font-size:22px;color:var(--ink)}
.m-row img{width:30px;height:30px}
.m-row.m-sm{font-size:17px;gap:8px}
.m-box{display:inline-block;width:30px;height:30px;border:2.5px dashed var(--c);border-radius:8px;background:#fff}
.m-sm .m-box{width:26px;height:26px}
.m-letters{display:flex;gap:16px}
.m-letters span{font-size:52px;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:2px var(--c);font-family:"BHH Nunito",sans-serif}
.m-cap{display:flex;align-items:center;gap:6px;font-weight:850;font-size:14px;color:var(--c-d)}
.m-cap img{width:20px;height:20px}.m-cap.left{align-self:flex-start;margin-left:18px}
.m-cols{display:flex;gap:18px}
.m-cols pre{margin:0;font:900 17px/1.15 "BHH Nunito",monospace;color:var(--ink);background:#fff;border-radius:10px;padding:8px 10px}
.m-cols pre i{display:inline-block;width:26px;height:16px;border-bottom:2.5px dashed var(--c)}
.m-w{background:#fff;border-radius:10px;padding:4px 10px;font-size:20px}.m-w i{display:inline-block;width:26px;border-bottom:2.5px dashed var(--c);height:18px}
.m-opt{width:40px;height:40px;border:2px solid var(--c);border-radius:50%;background:#fff;display:grid;place-items:center}.m-opt img{width:24px;height:24px}
.m-match{display:flex;align-items:center;gap:8px;width:220px}
.m-en{background:#fff;border-radius:10px;padding:5px 12px;font-weight:900;font-size:18px;min-width:62px;text-align:center}
.m-match i{flex:1;border-top:3px dotted var(--c)}.m-match img{width:36px;height:36px}
.m-mix{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:280px}
.m-mix span{display:flex;align-items:center;gap:6px;background:#fff;border-radius:12px;padding:8px 10px;font-weight:900;font-size:14px}.m-mix img{width:22px;height:22px}
.m-stack{position:relative;width:170px;height:96px}
.m-stack span{position:absolute;width:120px;height:84px;background:#fff;border-radius:10px;box-shadow:0 2px 6px rgba(31,59,51,.1);font-weight:900;font-size:13px;color:var(--c-d);padding:10px 12px}
.m-stack span:nth-child(1){left:0;top:12px;transform:rotate(-6deg)}.m-stack span:nth-child(2){left:24px;top:6px;transform:rotate(-1deg)}.m-stack span:nth-child(3){left:50px;top:0;transform:rotate(4deg)}
.m-train{position:absolute;right:22px;bottom:14px;width:46px;height:46px}
.m-lib{display:grid;grid-template-columns:repeat(4,52px);gap:10px}
.m-lib span{height:72px;background:#fff;border-radius:6px;box-shadow:0 2px 6px rgba(31,59,51,.1);position:relative}
.m-lib span:before,.m-lib span:after{content:"";position:absolute;left:8px;right:8px;height:5px;border-radius:3px;background:var(--c-m,#ddd)}
.m-lib span:before{top:10px;background:color-mix(in srgb,var(--c) 45%,#fff)}.m-lib span:after{top:22px;right:18px;background:var(--soft2)}
/* các bước */
.tp-how{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tp-how li{display:flex;gap:12px;background:#fff;border-radius:18px;padding:16px 18px}
.tp-how b{flex:none;width:32px;height:32px;border-radius:50%;background:var(--k-green-l,#E6F7EE);color:var(--k-green-dd,#0B5E3E);display:grid;place-items:center;font-weight:950}
.tp-how h3{margin:2px 0 4px;font-size:16px;font-weight:950}.tp-how p{margin:0;color:var(--ink2);font-size:14px}
.tp-open{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:22px 0 0}
.tp-open label{font-weight:850;color:var(--ink2);font-size:14px}
.tp-open input{border:0;background:var(--soft);border-radius:999px;padding:9px 14px;font:inherit;font-weight:800;min-width:180px}
.tp-open button{border:0;background:var(--ink);color:#fff;border-radius:999px;padding:9px 16px;font:inherit;font-weight:900;cursor:pointer}

/* ---------- trình tạo phiếu ---------- */
.tp{padding:6px 0 50px}
.tp .k-wrap{max-width:1380px}
.tp-head-row{display:flex;align-items:center;gap:16px;margin:10px 0 18px}
.tp-head-row .tp-ico{background:var(--c-l)}
.tp-head-t{flex:1;min-width:0}
.tp-head-t h1{margin:0;font-size:clamp(26px,3.2vw,36px);font-weight:950;color:var(--c-d);letter-spacing:-.4px}
.tp-head-t p{margin:4px 0 0;color:var(--ink2);font-size:15px}
.tp-gswitch{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:850;color:var(--mut)}
.tp-gswitch select{border:0;background:#fff;border-radius:12px;padding:10px 34px 10px 12px;font:inherit;font-size:14.5px;font-weight:900;color:var(--ink);box-shadow:0 1px 2px rgba(31,59,51,.08);cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234B6359' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:11px}
.tp-grid{display:grid;grid-template-columns:430px minmax(0,1fr);gap:22px;align-items:start}
.tp-panel{min-width:0;background:#fff;border-radius:22px;padding:6px 20px 18px;position:sticky;top:92px;max-height:calc(100vh - 108px);overflow:auto;scrollbar-width:thin;box-shadow:0 1px 2px rgba(31,59,51,.05)}
.tp-step{padding:16px 0;border-bottom:1px solid var(--line)}
.tp-step:last-of-type{border-bottom:0}
.tp-step h2{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16.5px;font-weight:950;color:var(--ink)}
.tp-step h2 i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:13.5px}
/* độ tuổi */
.tp-ages{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.tp-age{display:flex;align-items:center;gap:8px;border:0;background:var(--soft);border-radius:14px;padding:9px 10px;cursor:pointer;font:inherit;text-align:left;color:var(--ink);transition:background .12s}
.tp-age img{width:26px;height:26px;flex:none}
.tp-age b{display:block;font-weight:950;font-size:14.5px;line-height:1.1}.tp-age small{display:block;font-size:11.5px;color:var(--mut);font-weight:800}
.tp-age:hover{background:var(--soft2)}
.tp-age[aria-checked="true"]{background:var(--c-l);box-shadow:inset 0 0 0 2px var(--c)}
.tp-age[aria-checked="true"] b{color:var(--c-d)}
/* mức độ */
.tp-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tp-level{border:0;background:var(--soft);border-radius:14px;padding:10px 10px 11px;text-align:left;cursor:pointer;font:inherit;color:var(--ink);display:flex;flex-direction:column;gap:3px;transition:background .12s}
.tp-level:hover{background:var(--soft2)}
.tp-level b{font-weight:950;font-size:14.5px}.tp-level small{font-size:11.5px;line-height:1.35;color:var(--mut);font-weight:750}
.tp-lv-dots{display:flex;gap:3px;height:8px;margin-bottom:2px}.tp-lv-dots i{width:16px;height:6px;border-radius:3px;background:var(--c)}
.tp-level:not([aria-checked="true"]) .tp-lv-dots i{background:#C9D3CD}
.tp-level[aria-checked="true"]{background:var(--c-l);box-shadow:inset 0 0 0 2px var(--c)}
.tp-level[aria-checked="true"] b{color:var(--c-d)}
/* tab nội dung */
.tp-tabs{display:flex;background:var(--soft);border-radius:999px;padding:4px;gap:4px;margin-bottom:12px}
.tp-tabs button{flex:1;border:0;background:transparent;border-radius:999px;padding:8px 10px;font:inherit;font-weight:900;font-size:14px;color:var(--ink2);cursor:pointer}
.tp-tabs button[aria-selected="true"]{background:#fff;color:var(--c-d);box-shadow:0 1px 3px rgba(31,59,51,.12)}
/* đề mẫu */
.tp-plist{display:flex;flex-direction:column;gap:6px}
.tp-preset{display:flex;gap:12px;align-items:flex-start;border:0;background:transparent;border-radius:14px;padding:10px;cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:background .12s;position:relative}
.tp-preset:hover{background:var(--soft)}
.tp-pico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--soft);display:grid;place-items:center}.tp-pico img{width:26px;height:26px}
.tp-ptext{min-width:0;display:flex;flex-direction:column;gap:2px}
.tp-ptext b{font-weight:950;font-size:15px}
.tp-ptext small{color:var(--ink2);font-size:13px;line-height:1.4}
.tp-ptext em{font-style:normal;color:var(--mut);font-size:12px;font-weight:800;margin-top:2px}
.tp-preset[aria-checked="true"]{background:var(--c-l)}
.tp-preset[aria-checked="true"] .tp-pico{background:#fff}
.tp-preset[aria-checked="true"] b{color:var(--c-d)}
.tp-preset[aria-checked="true"]:after{content:"";position:absolute;right:12px;top:14px;width:18px;height:18px;border-radius:50%;background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.tp-preset[aria-checked="true"] .tp-ptext{padding-right:24px}
.tp-linkbtn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--c-d);font:inherit;font-weight:900;font-size:13.5px;padding:10px 6px 0;cursor:pointer}
.tp-linkbtn:hover{text-decoration:underline}
/* tự chọn dạng bài */
.tp-strands{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:8px}
.tp-strands::-webkit-scrollbar{display:none}
.tp-stab{flex:none;display:flex;align-items:center;gap:6px;border:0;background:var(--soft);border-radius:999px;padding:6px 12px 6px 8px;font:inherit;font-weight:900;font-size:13px;color:var(--ink2);cursor:pointer}
.tp-stab img{width:20px;height:20px}
.tp-stab i{font-style:normal;background:var(--c);color:#fff;border-radius:999px;font-size:11px;padding:0 6px;line-height:17px}
.tp-stab[aria-selected="true"]{background:var(--c-l);color:var(--c-d)}
.tp-hint{margin:2px 0 8px;color:var(--mut);font-size:12.5px;font-weight:750}
.tp-types{display:flex;flex-direction:column}
.tp-type{padding:10px 0;border-top:1px solid var(--line)}
.tp-type:first-of-type{border-top:0}
.tp-type-h{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.tp-tico{flex:none;width:32px;height:32px;border-radius:10px;background:var(--soft);display:grid;place-items:center}.tp-tico img{width:22px;height:22px}
.tp-type-h b{display:block;font-weight:950;font-size:14.5px}.tp-type-h small{display:block;color:var(--mut);font-size:12.5px;line-height:1.4}
.tp-vars{display:flex;flex-direction:column;gap:4px;padding-left:42px}
.tp-var{display:flex;align-items:center;gap:8px;border:0;background:transparent;border-radius:10px;padding:7px 8px;font:inherit;font-size:14px;font-weight:800;color:var(--ink);cursor:pointer;text-align:left}
.tp-var:hover{background:var(--soft)}
.tp-var>span:nth-child(2){flex:1}
.tp-var em{font-style:normal;display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--mut);font-weight:800}
.tp-var em .tp-svg{width:14px;height:14px}
.tp-chk{width:20px;height:20px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 2px #C9D3CD;display:grid;place-items:center;flex:none}
.tp-chk .tp-svg{width:14px;height:14px;opacity:0;color:#fff}
.tp-var[aria-checked="true"]{background:var(--c-l)}
.tp-var[aria-checked="true"] .tp-chk{background:var(--c);box-shadow:none}.tp-var[aria-checked="true"] .tp-chk .tp-svg{opacity:1}
/* số trang, tuỳ chọn */
.tp-pages{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-weight:900}
.tp-pages.off{opacity:.45}
.tp-stepper{display:flex;align-items:center;background:var(--soft);border-radius:999px;padding:3px}
.tp-stepper button{width:32px;height:32px;border:0;border-radius:50%;background:#fff;font:inherit;font-size:18px;font-weight:900;color:var(--ink);cursor:pointer}
.tp-stepper b{min-width:44px;text-align:center;font-size:16px}
.tp-lbl{display:block;font-weight:900;font-size:13.5px;color:var(--ink2);margin:14px 0 8px}
.tp-chips{display:flex;flex-wrap:wrap;gap:6px}
.tp-chip{border:0;background:var(--soft);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:850;color:var(--ink2);cursor:pointer}
.tp-chip[aria-checked="true"]{background:var(--c-l);color:var(--c-d);box-shadow:inset 0 0 0 1.5px var(--c)}
.tp-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px}
.tp-field span{display:block;font-weight:850;font-size:12.5px;color:var(--ink2);margin-bottom:5px}
.tp-field input{width:100%;border:0;background:var(--soft);border-radius:12px;padding:10px 12px;font:inherit;font-weight:800;color:var(--ink)}
.tp-field input:focus,.tp-open input:focus{outline:2px solid var(--c);background:#fff}
.tp-sw{display:flex;align-items:center;gap:10px;margin:10px 0 0;font-weight:800;font-size:14px;color:var(--ink);cursor:pointer}
.tp-sw input{position:absolute;opacity:0;pointer-events:none}
.tp-sw span{flex:none;width:38px;height:22px;border-radius:999px;background:#CFD8D3;position:relative;transition:background .15s}
.tp-sw span:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.tp-sw input:checked+span{background:var(--c)}.tp-sw input:checked+span:after{transform:translateX(16px)}
.tp-sw input:focus-visible+span{outline:2px solid var(--c);outline-offset:2px}
.tp-kidnote{margin:12px 0 0;font-size:13.5px;color:var(--ink2);background:var(--soft);border-radius:12px;padding:9px 12px}
.tp-kidnote a{color:var(--c-d);font-weight:900}
.tp-panel .tp-open{margin:8px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.tp-panel .tp-open input{min-width:0;flex:1}
.tp-muted{color:var(--mut);font-size:14px}
/* xem trước */
.tp-desk{min-width:0;background:#EEF1EA;border-radius:22px;padding:14px 16px 22px;min-height:70vh}
.tp-desk-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.tp-desk-t b{display:block;font-size:17px;font-weight:950}.tp-desk-t small{color:var(--mut);font-weight:800;font-size:12.5px}
.tp-toolbar{display:flex;flex-wrap:wrap;gap:6px}
.tp-btn{display:inline-flex;align-items:center;gap:6px;border:0;background:#fff;border-radius:999px;padding:9px 14px;font:inherit;font-size:13.5px;font-weight:900;color:var(--ink);cursor:pointer;text-decoration:none}
.tp-btn:hover{background:#F7F8F4}
.tp-btn[aria-pressed="true"]{background:var(--c-l);color:var(--c-d)}
.tp-btn.primary{background:var(--k-orange,#F7931E);color:#fff;padding:10px 18px;font-size:14.5px}
.tp-btn.primary:hover{filter:brightness(.94)}
.tp-btn.view{background:#1FA866;color:#fff;padding:10px 18px;font-size:14.5px}
.tp-btn.view:hover{background:#198C56;color:#fff;filter:none}
.tp-btn:disabled{opacity:.6;cursor:wait}
.tp-svg{width:18px;height:18px;fill:currentColor;flex:none}
.tp-parts{margin:0 0 8px}
.tp-parts-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px;margin:0 2px 6px}
.tp-parts-h span{color:var(--mut);font-weight:800}
.tp-parts ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tp-parts li{display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:4px 6px 4px 4px;font-size:13px;font-weight:800}
.tp-pno{width:22px;height:22px;border-radius:50%;background:var(--c-l);color:var(--c-d);display:grid;place-items:center;font-size:11.5px;font-weight:950}
.tp-pcnt{color:var(--mut);font-size:12px;padding-right:6px}
.tp-pdel{border:0;background:var(--soft);width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;color:var(--ink2)}
.tp-pdel:hover{background:#FDE4E4;color:#B42318}
.tp-step-n{display:inline-flex;align-items:center;gap:4px}.tp-step-n button{width:22px;height:22px;border:0;border-radius:50%;background:var(--soft);cursor:pointer;font-weight:900}
.tp-info{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.tp-info .pill{background:#fff!important;border:0!important;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:850;color:var(--ink2)!important;box-shadow:none!important}
.tp-info .pill.lv{color:var(--c-d)!important}.tp-info .pill.code{background:var(--ink)!important;color:#fff!important}
.tp-info .pill.warnp{background:#FFF1E0!important;color:#8A4B00!important}.tp-info .pill.good{background:#E6F7EE!important;color:#0B5E3E!important}
.tp-info .warn{background:#FFF7E0;color:#7A5600;border-radius:10px;padding:5px 10px;font-size:12.5px;font-weight:800}
.tp-wmnote{margin:0 0 12px;font-size:12.5px;color:var(--ink2);font-weight:750}.tp-wmnote a{color:var(--c-d);font-weight:900}
.tp-pageswrap{display:flex;flex-direction:column;align-items:center;gap:18px;transition:opacity .15s}
.tp-pageswrap.busy{opacity:.55}
.tp-pageswrap .bhh-sheet{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.tp-pageswrap .pg{position:relative;flex:none}
.tp-pageswrap .pg .ws-page{position:absolute;top:0;left:0;transform-origin:0 0;box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 34px rgba(30,45,55,.14);border-radius:3px}
.tp-loading{padding:80px 20px;text-align:center;color:var(--mut);font-weight:800}
.tp-probe{position:absolute;left:-10000px;top:0;width:188mm;visibility:hidden;pointer-events:none}
.ws-flag{position:absolute;right:1.5mm;top:1.5mm;display:none;align-items:center;gap:1mm;border:0;background:#fff;border-radius:999px;padding:1mm 2mm;font:800 2.6mm "BHH Nunito",sans-serif;color:#B42318;box-shadow:0 1px 3px rgba(0,0,0,.15);cursor:pointer}
.ws-flag .tp-svg{width:3mm;height:3mm}
.ws-q:hover .ws-flag{display:inline-flex}
/* hộp thoại */
.tp-modal{position:fixed;inset:0;z-index:200;background:rgba(20,35,30,.45);display:grid;place-items:center;padding:16px}
.tp-modal[hidden]{display:none}
.tp-modal-box{background:#fff;border-radius:22px;padding:20px;width:min(460px,100%);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.tp-modal-h{display:flex;justify-content:space-between;align-items:center;gap:10px}.tp-modal-h h3{margin:0;font-size:19px;font-weight:950}
.tp-x{border:0;background:var(--soft);width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer}
.tp-modal textarea,.tp-modal input{width:100%;border:0;background:var(--soft);border-radius:12px;padding:10px 12px;font:inherit;margin:8px 0 0}
.tp-modal-f{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.tp-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px;font-weight:850;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:300;max-width:90vw}
.tp-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:1100px){
  .tp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-grid{grid-template-columns:minmax(0,1fr)}
  .tp-panel{position:static;max-height:none}
}
@media (max-width:700px){
  .tp-cards{grid-template-columns:1fr;gap:14px}
  .tp-prev{height:124px}
  .tp-how{grid-template-columns:1fr}
  .tp-head-row{flex-wrap:wrap}
  .tp-gswitch{width:100%}
  .tp-levels{grid-template-columns:1fr}
  .tp-level{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 10px}.tp-level small{flex-basis:100%}
  .tp-two{grid-template-columns:1fr}
  .tp-panel{padding:4px 14px 14px;border-radius:18px}
  .tp-desk{padding:10px;border-radius:18px}
  .tp-toolbar{width:100%}.tp-toolbar .tp-btn{flex:1 1 auto;justify-content:center}
}
@media print{.tp-hub,.tp-head,.tp-panel,.tp-desk-h,.tp-parts,.tp-info{display:none}}
/* ---------- thư viện: phiếu có sẵn, bộ lộ trình ---------- */
.tp-lib .k-wrap{max-width:1180px}
.tp-filters{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:0 0 6px}
.tp-lvsel{display:flex;align-items:center;gap:8px;font-weight:850;font-size:13.5px;color:var(--ink2)}
.tp-lvsel select{border:0;background:#fff;border-radius:999px;padding:7px 12px;font:inherit;font-weight:900;box-shadow:0 1px 2px rgba(31,59,51,.08)}
.tp-libgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:8px 0 10px}
.tp-item{background:#fff;border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 2px rgba(31,59,51,.05);border-top:4px solid var(--c)}
.tp-item[hidden]{display:none}
.tp-item-h{display:flex;gap:10px;align-items:center}
.tp-item .tp-pico{background:color-mix(in srgb,var(--c) 10%,#fff)}
.tp-item small{display:block;font-size:12px;font-weight:850;color:color-mix(in srgb,var(--c) 78%,#000)}
.tp-item h3{margin:1px 0 0;font-size:16.5px;font-weight:950}
.tp-item p{margin:0;color:var(--ink2);font-size:14px;line-height:1.45;flex:1}
.tp-item em{font-style:normal;font-size:12px;color:var(--mut);font-weight:800}
.tp-item-a{display:flex;gap:8px;margin-top:4px}.tp-item-a .tp-btn{flex:1;justify-content:center;background:var(--soft)}
.tp-item-a .tp-btn.primary{background:var(--k-orange,#F7931E)}
.tp-agebar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.tp-agebar a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);background:#fff;border-radius:16px;padding:10px 14px;box-shadow:0 1px 2px rgba(31,59,51,.05)}
.tp-agebar a img{width:30px;height:30px}.tp-agebar b{display:block;font-weight:950;font-size:14.5px}.tp-agebar small{display:block;color:var(--mut);font-weight:800;font-size:12px}
.tp-agebar a[aria-selected="true"]{background:var(--c-l);box-shadow:inset 0 0 0 2px var(--c)}
.tp-bo-sum{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;background:#fff;border-radius:20px;padding:16px 18px;margin:10px 0}
.tp-bo-sum b{display:block;font-size:17px;font-weight:950}.tp-bo-sum span{color:var(--ink2);font-size:14px;font-weight:750}
.tp-bo-opts{display:flex;flex-wrap:wrap;gap:4px 18px}.tp-bo-opts .tp-sw{margin:0}
.tp-bo-ranges{display:flex;flex-wrap:wrap;gap:6px;width:100%}.tp-bo-ranges .tp-btn{background:var(--soft)}
.tp-bo-note{margin:4px 2px 14px}.tp-bo-note a{color:var(--c-d);font-weight:900}
.tp-weeks{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tp-week{background:#fff;border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 2px rgba(31,59,51,.05)}
.tp-week-h{display:flex;gap:10px;align-items:center}.tp-week-h>div{flex:1}
.tp-week-h small{display:block;font-size:12px;font-weight:850;color:var(--mut)}.tp-week h3{margin:1px 0 0;font-size:16px;font-weight:950}
.tp-week p{margin:0;font-size:13px;color:var(--ink2);line-height:1.45;flex:1}.tp-week .tp-home{color:var(--k-green-d,#11864F);font-weight:750;flex:none}
.tp-week .tp-btn{align-self:flex-start;background:var(--soft);margin-top:4px}
.tp-free,.tp-plus{font-style:normal;font-size:11.5px;font-weight:900;border-radius:999px;padding:3px 9px}
.tp-free{background:#E6F7EE;color:#0B5E3E}.tp-plus{background:#FFF4D6;color:#7A5600}
@media (max-width:1000px){.tp-libgrid,.tp-weeks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.tp-libgrid,.tp-weeks{grid-template-columns:1fr}}
.tp-preview{min-width:0}

/* ===== v4.4: trình tạo phiếu theo "các phần bài tập" ===== */
.tp-intro h2{margin:14px 0 4px;font-size:21px;font-weight:950;color:var(--c-d)}
.tp-intro p{margin:0 0 12px;color:var(--ink2);font-size:14px;line-height:1.5}
.tp-agelv{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.tp-lvseg{display:flex;align-items:center;gap:4px;background:var(--soft);border-radius:999px;padding:4px}
.tp-lvseg>span{font-size:12.5px;font-weight:900;color:var(--mut);padding:0 8px}
.tp-lvseg button{flex:1;border:0;background:transparent;border-radius:999px;padding:7px 6px;font:inherit;font-size:13.5px;font-weight:900;color:var(--ink2);cursor:pointer}
.tp-lvseg button[aria-checked="true"]{background:#fff;color:var(--c-d);box-shadow:0 1px 3px rgba(31,59,51,.12)}
.tp-big{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:0;border-radius:16px;padding:13px 14px;font:inherit;font-size:16px;font-weight:950;color:#fff;cursor:pointer;margin-bottom:8px}
.tp-big.green{background:#2C6E5E}.tp-big.orange{background:#E0602A}
.tp-big:hover{filter:brightness(.95)}.tp-big .tp-svg{width:20px;height:20px}
.tp-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 14px}
.tp-mini button{display:flex;align-items:center;justify-content:center;gap:5px;border:0;background:var(--soft);border-radius:12px;padding:9px 4px;font:inherit;font-size:13px;font-weight:900;color:var(--ink);cursor:pointer}
.tp-mini button:hover{background:var(--soft2)}.tp-mini .tp-svg{width:16px;height:16px}
.tp-panel .tp-field{display:block;margin:0 0 10px}
.tp-check{display:flex;align-items:center;gap:9px;margin:6px 0;font-weight:850;font-size:14px;cursor:pointer}
.tp-check input{position:absolute;opacity:0;pointer-events:none}
.tp-check span{flex:none;width:20px;height:20px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 2px #C9D3CD;display:grid;place-items:center}
.tp-check input:checked+span{background:var(--c);box-shadow:none}
.tp-check input:checked+span:after{content:"";width:9px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.tp-check input:focus-visible+span{outline:2px solid var(--c);outline-offset:2px}
.tp-more{margin:6px 0 2px;border-top:1px solid var(--line);padding-top:8px}
.tp-more summary{cursor:pointer;font-weight:900;font-size:13.5px;color:var(--ink2);padding:4px 0}
.tp-chips.kids{margin:-2px 0 8px}
.tp-sech{margin:16px 0 8px;padding-top:14px;border-top:1px solid var(--line);font-size:16px;font-weight:950}
.tp-parts2{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tp-empty{background:var(--soft);border-radius:14px;padding:14px;font-size:13.5px;color:var(--ink2)}
.tp-part{background:#FBFAF6;border-radius:16px;padding:12px 12px 14px;box-shadow:inset 0 0 0 1.5px var(--line)}
.tp-part-h{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.tp-part-h b{flex:1;font-size:13px;font-weight:950;letter-spacing:.6px;text-transform:uppercase;color:var(--c-d)}
.tp-pmove{border:0;background:transparent;width:28px;height:28px;border-radius:8px;color:var(--mut);cursor:pointer;display:grid;place-items:center}
.tp-pmove:hover{background:var(--soft2)}
.tp-pdel2{border:0;background:#FDECEC;color:#C0362C;width:30px;height:30px;border-radius:9px;font-size:19px;line-height:1;cursor:pointer}
.tp-pdel2:hover{background:#FAD7D5}
.tp-lab{display:block;margin:8px 0 6px;font-size:11.5px;font-weight:950;letter-spacing:.6px;text-transform:uppercase;color:var(--mut)}
.tp-lab em{font-style:normal;background:var(--soft2);border-radius:999px;padding:0 6px;margin-left:4px;letter-spacing:0}
.tp-chipset{display:flex;flex-wrap:wrap;gap:6px}
.tp-c{display:inline-flex;align-items:center;gap:5px;border:0;background:#fff;border-radius:999px;padding:6px 11px;font:inherit;font-size:13px;font-weight:800;color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line)}
.tp-c img{width:18px;height:18px}
.tp-chipset.sm .tp-c{padding:5px 10px;font-size:12.5px}
.tp-c:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 45%,#fff)}
.tp-c.on{background:var(--c-l);box-shadow:inset 0 0 0 2px var(--c);color:var(--c-d);font-weight:950}
.tp-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.tp-f span{display:block;font-size:12px;font-weight:900;color:var(--ink2);margin-bottom:4px}
.tp-f input,.tp-f select{width:100%;border:0;background:#fff;border-radius:10px;padding:8px 10px;font:inherit;font-weight:850;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.tp-f input:focus,.tp-f select:focus{outline:2px solid var(--c)}
.tp-addpart{width:100%;margin:10px 0 4px;border:2px dashed color-mix(in srgb,var(--c) 55%,#fff);background:var(--c-l);color:var(--c-d);border-radius:14px;padding:12px;font:inherit;font-size:15px;font-weight:950;cursor:pointer}
.tp-addpart:hover{background:var(--c-m)}
/* cột xem trước */
.tp-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.tp-act{display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:14px;padding:13px 10px;font:inherit;font-size:15.5px;font-weight:950;cursor:pointer}
.tp-act.orange{background:#E0602A;color:#fff}.tp-act.soft{background:#EEE9DD;color:var(--ink)}.tp-act.teal{background:#2C6E5E;color:#fff}
.tp-act:hover{filter:brightness(.95)}.tp-act:disabled{opacity:.6;cursor:wait}.tp-act .tp-svg{width:19px;height:19px}
.tp-sumrow{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;font-weight:800;color:var(--mut);margin:0 2px 6px}
.tp-sumrow b{color:#C25418}
.tp-tools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tp-tools button{display:inline-flex;align-items:center;gap:5px;border:0;background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:900;color:var(--ink2);cursor:pointer}
.tp-tools button[aria-pressed="true"]{background:var(--c-l);color:var(--c-d)}.tp-tools .tp-svg{width:15px;height:15px}
.tp-desk{display:none}
.tp-preview{background:#EEF1EA;border-radius:22px;padding:14px 16px 22px;min-height:70vh}
/* hộp thoại */
.tp-modal-box.wide{width:min(720px,100%);max-height:88vh;overflow:auto}
.tp-liblist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.tp-libi{display:flex;gap:12px;align-items:center;background:var(--soft);border-radius:14px;padding:12px}
.tp-libi>div{flex:1;min-width:0}.tp-libi b{display:block;font-weight:950}.tp-libi small{display:block;color:var(--ink2);font-size:13px}.tp-libi em{display:block;font-style:normal;color:var(--mut);font-size:12px;font-weight:800;margin-top:2px}
.tp-libb{display:flex;gap:6px;flex:none}
.tp-q-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.tp-q-row select{width:100%;border:0;background:var(--soft);border-radius:12px;padding:10px 12px;font:inherit;font-weight:850}
.tp-seg3{display:flex;background:var(--soft);border-radius:999px;padding:4px;gap:4px;margin-bottom:6px}
.tp-seg3 button{flex:1;border:0;background:transparent;border-radius:999px;padding:8px;font:inherit;font-weight:900;font-size:13.5px;color:var(--ink2);cursor:pointer}
.tp-seg3 button[aria-checked="true"]{background:#fff;color:var(--c-d);box-shadow:0 1px 3px rgba(31,59,51,.12)}
.tp-qtypes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
.tp-qt{display:flex;align-items:center;gap:8px;border:0;background:var(--soft);border-radius:12px;padding:9px 10px;font:inherit;font-size:13.5px;font-weight:850;text-align:left;cursor:pointer;color:var(--ink)}
.tp-qt img{width:20px;height:20px}
.tp-qt[aria-checked="true"]{background:var(--c-l);box-shadow:inset 0 0 0 2px var(--c)}
.tp-qt[aria-checked="true"] .tp-chk{background:var(--c);box-shadow:none}.tp-qt[aria-checked="true"] .tp-chk .tp-svg{opacity:1}
.tp-ulist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.tp-ui{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:14px;padding:10px 12px}
.tp-ui>div{flex:1;min-width:0}.tp-ui b{display:block;font-weight:950}.tp-ui small{color:var(--mut);font-size:12.5px;font-weight:750}
.tp-ui>span{display:flex;gap:6px;flex:none}
.tp-btn.primary{background:var(--k-orange,#F7931E);color:#fff}
@media (max-width:700px){
  .tp-fields{grid-template-columns:1fr 1fr}
  .tp-actions{grid-template-columns:1fr 1fr}.tp-act.teal{grid-column:1/-1}
  .tp-libi,.tp-ui{flex-wrap:wrap}.tp-q-row{grid-template-columns:1fr}
}


.tp-pay-summary{border:1px solid #dcece5;background:#f7fcf9;border-radius:14px;padding:12px 14px;margin-top:12px}
.tp-pay-summary p{margin:4px 0;color:#31564a}.tp-pay-summary b{color:#173b32}
.tp-pay-warn{background:#fff7e7;border:1px solid #f5d79b;color:#765100;border-radius:12px;padding:10px 12px;font-weight:800}


/* 2026-10: chuẩn hoá UI thư viện phiếu và bộ lộ trình */
.tp-lib .tp-head{padding-bottom:10px}
.tp-lib .tp-head-row{margin-bottom:14px}
.tp-filter-panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px 18px;margin:8px 0 10px;box-shadow:0 8px 24px rgba(31,59,51,.045)}
.tp-filter-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:start;padding:7px 0}
.tp-filter-row+.tp-filter-row{border-top:1px solid #EEF3F0}
.tp-filter-label{font-size:13px;font-weight:950;color:var(--ink2);padding-top:5px}
.tp-filter-row .tp-chips{gap:7px}
.tp-filter-row .tp-chip{background:#F5F7F3;border:1px solid transparent;padding:7px 13px}
.tp-filter-row .tp-chip[aria-checked="true"]{background:#E8F7EF;color:#137B4E;box-shadow:inset 0 0 0 1.5px #1FA866}
.tp-lvsel{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--ink2)}
.tp-lvsel select{border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 34px 8px 12px;font:inherit;font-weight:850;color:var(--ink)}
.tp-result-strip{display:flex;align-items:center;gap:8px;margin:12px 0 16px;background:#F2F8F5;border:1px solid #DDEDE5;border-radius:14px;padding:10px 14px;color:#597069;font-size:13.5px;font-weight:800}
.tp-result-strip b{color:#173F34}
.tp-libgrid{gap:18px}
.tp-item{border:1px solid #E3ECE7;border-top:1px solid #E3ECE7;border-radius:20px;padding:18px;gap:10px;box-shadow:0 10px 26px rgba(31,59,51,.055);min-height:255px;transition:transform .15s,box-shadow .15s,border-color .15s}
.tp-item:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(31,59,51,.09);border-color:#D4E5DC}
.tp-item-h{align-items:flex-start}.tp-item .tp-pico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none}
.tp-item small{font-size:12.5px;line-height:1.35}.tp-item h3{font-size:18px;line-height:1.25;margin-top:3px}
.tp-item p{font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px;flex:none}
.tp-item em{font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.tp-item-a{margin-top:auto;padding-top:4px}.tp-item-a .tp-btn{min-height:42px;background:#fff;border:1px solid #E4ECE8}
.tp-item-a .tp-btn.view{background:#1FA866!important;border-color:#1FA866!important;color:#fff!important}
.tp-item-a .tp-btn.view:hover{background:#198C56!important;border-color:#198C56!important}

.tp-bundle-shell{display:grid;gap:16px;margin-top:12px}
.tp-bundle-summary{background:linear-gradient(135deg,#F2FAF6,#FBFDFC);border:1px solid #DCECE5;border-radius:20px;padding:17px 19px;display:flex;justify-content:space-between;gap:18px;align-items:center}
.tp-bundle-summary strong{display:block;font-size:19px;font-weight:950;color:#173F34}.tp-bundle-summary span{display:block;color:#60756C;font-size:13.5px;font-weight:750;margin-top:3px}
.tp-bundle-controls{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:14px}
.tp-bundle-block{background:#fff;border:1px solid #E3ECE7;border-radius:20px;padding:16px 18px;box-shadow:0 8px 22px rgba(31,59,51,.035)}
.tp-bundle-block h2{font-size:14px;margin:0 0 10px;font-weight:950;color:#173F34}.tp-bundle-block p{margin:0;color:#6B7F77;font-size:12.5px}
.tp-bo-ranges{gap:8px}.tp-bo-ranges .tp-btn{background:#F4F7F5;border:1px solid #E3ECE7;min-height:38px}
.tp-bo-ranges .tp-btn:hover{border-color:#1FA866;color:#137B4E;background:#EAF8F1}
.tp-bo-opts{display:grid;gap:9px}.tp-bo-opts .tp-sw{margin:0}
.tp-bo-note{background:#FFF9EC;border:1px solid #F4E4B4;border-radius:14px;padding:11px 14px;margin:0;color:#62766E}
.tp-weeks{gap:16px;margin-top:4px}
.tp-week{border:1px solid #E3ECE7;border-radius:20px;padding:16px 17px;gap:9px;box-shadow:0 9px 24px rgba(31,59,51,.05);position:relative;min-height:245px}
.tp-week:hover{box-shadow:0 13px 30px rgba(31,59,51,.085);border-color:#D4E5DC}
.tp-week-h{align-items:flex-start}.tp-week .tp-pico{width:42px;height:42px;border-radius:13px;background:#F2F7F4;display:grid;place-items:center;flex:none}
.tp-week-h small{font-size:12.5px}.tp-week h3{font-size:18px;line-height:1.25;margin-top:2px}
.tp-week p{font-size:13.5px;line-height:1.48}.tp-week .tp-home{background:#F0FAF5;border-radius:11px;padding:8px 10px;margin-top:2px}
.tp-week .tp-btn{margin-top:auto;background:#fff;border:1px solid #DCE7E2;min-height:40px}
.tp-free,.tp-plus{font-size:11.5px;font-style:normal;font-weight:950;border-radius:999px;padding:5px 9px;white-space:nowrap}.tp-free{background:#E6F7EE;color:#0E8050}.tp-plus{background:#FFF3CC;color:#986400}
.bundle-quote-box{width:min(470px,100%)!important}
.bundle-quote-body{margin-top:10px!important}.bundle-quote-body .tp-pay-summary{margin-top:0}
.bundle-quote-after{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#EAF8F1;color:#176B49;font-weight:850}
.bundle-quote-note{font-size:13px;color:#6A7D75;margin:12px 0 0;line-height:1.55}
.bundle-quote-error{background:#FFF7E7;border:1px solid #F5D79B;color:#765100;border-radius:12px;padding:10px 12px;font-weight:800;margin:12px 0 0}

@media(max-width:800px){.tp-filter-row{grid-template-columns:1fr;gap:5px}.tp-filter-label{padding:0}.tp-bundle-controls{grid-template-columns:1fr}.tp-bundle-summary{align-items:flex-start;flex-direction:column}.tp-item{min-height:auto}}

.tp-section-label{font-size:12px;font-weight:950;color:#6A7D75;text-transform:uppercase;letter-spacing:.055em;margin:2px 0 8px}
.tp-section-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:18px 2px 10px}.tp-section-title strong{display:block;font-size:18px;font-weight:950;color:#173F34}.tp-section-title span{display:block;margin-top:2px;font-size:13px;color:#6B7F77;font-weight:750}

/* Phiếu có sẵn: tìm kiếm nhanh */
.tp-search-row{padding:0 0 13px;margin:0 0 6px;border-bottom:1px solid #EEF3F0}
.tp-search-box{position:relative;display:flex;align-items:center;width:100%;min-height:50px;background:#fff;border:1.5px solid #DCE8E2;border-radius:15px;transition:border-color .16s ease,box-shadow .16s ease}
.tp-search-box:focus-within{border-color:#1FA866;box-shadow:0 0 0 3px rgba(31,168,102,.10)}
.tp-search-icon{position:absolute;left:16px;width:21px;height:21px;fill:none;stroke:#6D817A;stroke-width:2;stroke-linecap:round;pointer-events:none}
.tp-search-box input{width:100%;height:48px;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0 48px 0 48px;font:inherit;font-size:15px;color:#173F34}
.tp-search-box input::placeholder{color:#8A9994}
.tp-search-box input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.tp-search-clear{position:absolute;right:10px;width:32px;height:32px;border:0;border-radius:9px;background:#F1F5F3;color:#667B74;font-size:24px;line-height:1;display:none;align-items:center;justify-content:center;cursor:pointer}
.tp-search-clear.show{display:flex}
.tp-search-clear:hover{background:#E8F7EF;color:#137B4E}
@media(max-width:600px){.tp-search-box input{font-size:14px}.tp-search-row{padding-bottom:11px}}

/* 2026-10 SEO P1.2: nội dung biên tập dưới trình tạo phiếu, không làm nặng khu vực thao tác */
.tp-seo{padding:28px 0 8px}
.tp-seo-card{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.75fr);gap:26px;align-items:start;background:linear-gradient(135deg,#F7FCF9 0%,#FFFFFF 72%);border:1px solid #DFECE5;border-radius:22px;padding:24px 26px;box-shadow:0 10px 30px rgba(31,59,51,.045)}
.tp-seo-kicker{margin:0 0 7px!important;color:#1B8A5A!important;font-size:12px!important;font-weight:950!important;text-transform:uppercase;letter-spacing:.06em}
.tp-seo-copy h2{margin:0 0 10px;font-size:24px;line-height:1.24;color:#173F34;font-weight:950}
.tp-seo-copy>p:not(.tp-seo-kicker){margin:0;color:#526B62;font-size:15px;line-height:1.72}
.tp-seo-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tp-seo-links a{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:7px 11px;border:1px solid #DCE9E3;border-radius:10px;background:#fff;color:#176B49;font-size:13px;font-weight:900;text-decoration:none}
.tp-seo-links a:hover{border-color:#1FA866;background:#F0FAF5}
.tp-seo-skills{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:9px}
.tp-seo-skills li{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #E5EEE9;color:#35584C;font-size:13.5px;font-weight:850;line-height:1.4}
.tp-seo-skills li span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#E5F7EE;color:#138253;font-size:12px;font-weight:950;flex:none}
.tp-seo-library{padding:22px 0 4px}
@media(max-width:800px){.tp-seo{padding-top:20px}.tp-seo-card{grid-template-columns:1fr;gap:18px;padding:20px}.tp-seo-copy h2{font-size:21px}.tp-seo-copy>p:not(.tp-seo-kicker){font-size:14px;line-height:1.65}}

/* v4.10: nút "Bé làm trên máy" */
.tp-actions:has(#tpPlay){grid-template-columns:repeat(4,1fr)}
.tp-act.green{background:#13a86b;color:#fff}
@media (max-width:1100px){.tp-actions:has(#tpPlay){grid-template-columns:1fr 1fr}.tp-actions:has(#tpPlay) .tp-act.teal{grid-column:auto}}

/* v4.10.2: thanh công cụ phiếu gọn trong một thẻ (nút phụ viền nhẹ, 2 nút chính tô màu; số phần/câu trong khung cam nhạt; dải số trang) */
.tp-bar{background:#fff;border-radius:18px;padding:12px;display:grid;gap:10px;margin-bottom:14px}
.tp-bar-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tp-bar-grp{display:flex;gap:8px;flex-wrap:wrap}
.tp-bar .tp-act{height:46px;padding:0 16px;font-size:15px;border-radius:12px}
.tp-act.ghost{background:#fff;color:var(--ink);border:2px solid var(--line)}
.tp-act.ghost:hover{border-color:var(--c);filter:none}
.tp-bar-row.sub{border-top:1px solid var(--line);padding-top:10px}
.tp-bar .tp-tools{margin:0;gap:8px}
.tp-bar .tp-tools button{background:var(--soft2);padding:7px 13px;font-size:13px}
.tp-bar .tp-tools button[aria-pressed="true"]{background:var(--c-l);color:var(--c-d)}
.tp-bar .tp-sum{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;background:#FFF1E0;color:#A04E00;border:1.5px solid #FFD9AE;font-size:13.5px;font-weight:900;white-space:nowrap}
.tp-bar .tp-sum:empty{display:none}
.tp-bar .tp-info{margin:0;background:var(--c-l);border-radius:12px;padding:8px 12px;align-items:center}
.tp-bar .tp-info:empty{display:none}
.tp-bar .tp-info .pill{background:transparent!important;padding:0;font-size:13.5px;color:var(--c-d)!important}
.tp-bar .tp-info .pill.code{background:var(--ink)!important;color:#fff!important;padding:3px 9px}
.tp-bar .tp-wmnote{margin:-2px 2px 0;font-size:12.5px;color:var(--mut)}
@media (max-width:700px){
  .tp-bar-row:first-child{display:grid;grid-template-columns:1fr}
  .tp-bar-grp{display:grid;grid-template-columns:1fr 1fr}
  .tp-bar-grp.main{order:-1}
  .tp-bar .tp-act.teal{grid-column:auto}
  .tp-bar .tp-act{height:auto;min-height:46px;padding:8px 10px;font-size:14.5px}
}
/* v4.11 — 10 nhóm: thẻ cuối (Phiếu có sẵn) nằm ngang cả hàng trên máy tính, không bị lẻ một thẻ */
@media (min-width:1101px){
  .tp-cards .tp-card:last-child:nth-child(3n+1){grid-column:1/-1;flex-direction:row}
  .tp-cards .tp-card:last-child:nth-child(3n+1) .tp-prev{height:auto;min-height:150px;flex:0 0 33%}
  .tp-cards .tp-card:last-child:nth-child(3n+1) .tp-cb .tp-ico{margin-top:0}
}