Guideline Đào tạo Hội nhập — Kaopiz :root{ --b50:#E6F1FB;--b100:#B5D4F4;--b200:#85B7EB;--b300:#5499E0; --b400:#378ADD;--b600:#185FA5;--b800:#0C447C;--b900:#042C53; --t50:#E1F5EE;--t100:#9FE1CB;--t400:#1D9E75;--t600:#0F6E56; --a50:#FAEEDA;--a400:#BA7517;--a600:#854F0B; --g50:#EAF3DE;--g100:#C0DD97;--g600:#3B6D11; --r50:#FCEBEB;--r100:#F7C1C1;--r400:#E24B4A;--r600:#A32D2D; --p50:#EEEDFE;--p100:#CECBF6;--p600:#534AB7; --amber50:#FAEEDA;--amber100:#FAC775;--amber600:#854F0B; --n50:#F8F9FA;--n100:#F1F3F5;--n200:#E9ECEF;--n300:#DEE2E6; --n400:#CED4DA;--n500:#ADB5BD;--n600:#6C757D;--n700:#495057;--n800:#343A40; --f:'Be Vietnam Pro',-apple-system,sans-serif; --ease:cubic-bezier(.25,.46,.45,.94); --rsm:6px;--rmd:10px;--rlg:14px; --green:#2EC27E;--accent:#F6A623; } *{box-sizing:border-box;margin:0;padding:0;} html,body{height:100%;} body{font-family:var(--f);background:#EEF2F7;color:var(--n800);font-size:15px;line-height:1.65;overflow-x:hidden;} a{color:var(--b600);text-decoration:none;}a:hover{text-decoration:underline;} @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes floatE{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes btnPulse{0%,100%{box-shadow:0 8px 28px rgba(246,166,35,.45)}50%{box-shadow:0 8px 44px rgba(246,166,35,.7)}} @keyframes cardPop{from{opacity:0;transform:scale(.82) translateY(36px)}to{opacity:1;transform:none}} .sr{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);} .sr.in{opacity:1;transform:translateY(0);} .d1{transition-delay:.07s;}.d2{transition-delay:.14s;} /* ══ POPUP ══ */ #popup{position:fixed;inset:0;z-index:9999;background:linear-gradient(135deg,#061D4A 0%,#0D3B7A 40%,#1A5FB4 75%,#2879CC 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity .75s ease,transform .75s ease;} #popup.hiding{opacity:0!important;transform:scale(1.06)!important;pointer-events:none;} #fw-canvas{position:absolute;inset:0;pointer-events:none;} .ov-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.07);pointer-events:none;} .popup-wrap{position:relative;z-index:2;width:92%;max-width:540px;text-align:center;} .popup-logo-txt{font-weight:800;font-size:26px;color:#fff;letter-spacing:-.5px;display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;} .popup-logo-mark{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#378ADD,#1D9E75);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(55,138,221,.4);} .popup-logo-mark svg{width:20px;height:20px;} .popup-card{background:rgba(255,255,255,.10);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.22);border-radius:28px;padding:32px 40px 44px;color:#fff;text-align:center;box-shadow:0 28px 80px rgba(0,0,0,.45);animation:cardPop .65s cubic-bezier(.34,1.52,.64,1) forwards;} .popup-icons{font-size:1.8rem;letter-spacing:6px;margin-bottom:14px;display:block;animation:floatE 3s ease-in-out infinite;} .popup-h1{font-size:clamp(1.35rem,4vw,1.9rem);font-weight:800;color:#fff;margin-bottom:10px;line-height:1.25;} .popup-sub{font-size:14px;opacity:.82;margin-bottom:32px;line-height:1.65;max-width:380px;margin-left:auto;margin-right:auto;} .popup-sub strong{color:#fff;} .popup-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:420px;background:linear-gradient(135deg,#F6A623,#E67E22);color:#fff;border:none;padding:17px 24px;border-radius:14px;cursor:pointer;font-size:14px;font-weight:700;line-height:1.4;box-shadow:0 8px 28px rgba(246,166,35,.45);transition:transform .22s,box-shadow .22s;animation:btnPulse 2.8s ease-in-out infinite;} .popup-btn:hover{transform:scale(1.03) translateY(-2px);} .popup-btn svg{width:20px;height:20px;flex-shrink:0;} /* ══ HEADER ══ */ .hdr{background:var(--b900);position:sticky;top:0;z-index:100;box-shadow:0 2px 14px rgba(4,44,83,.32);} .hdr-in{max-width:960px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:12px;} .hdr-mark{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,#378ADD,#1D9E75);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .hdr-mark svg{width:16px;height:16px;} .hdr-brand{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.3px;} .hdr-sep{width:1px;height:20px;background:rgba(255,255,255,.2);} .hdr-title{font-size:13px;font-weight:600;color:rgba(255,255,255,.78);flex:1;} .hdr-badge{font-size:11px;padding:3px 11px;background:rgba(55,138,221,.28);border:1px solid rgba(55,138,221,.45);border-radius:20px;color:var(--b100);white-space:nowrap;} /* ══ STEP PROGRESS ══ */ .step-prog{background:rgba(240,246,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--n200);padding:8px 20px;position:sticky;top:50px;z-index:80;} .step-prog-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:12px;} .step-prog-lbl{font-size:12px;font-weight:700;color:var(--b800);white-space:nowrap;} .step-prog-track{flex:1;height:7px;background:var(--n200);border-radius:999px;overflow:hidden;min-width:60px;} .step-prog-fill{height:100%;background:linear-gradient(90deg,var(--b400),var(--t400));border-radius:999px;transition:width .5s var(--ease);} .step-prog-pct{font-size:12px;font-weight:800;color:var(--b600);white-space:nowrap;} /* ══ MAIN ══ */ .wrap{max-width:960px;margin:0 auto;padding:28px 24px 72px;} /* ONBOARD CARD */ .ob{background:#fff;border-radius:var(--rlg);padding:22px 26px;margin-bottom:22px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:1px solid var(--n200);} .ob-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;} .ob-lbl{font-size:14px;font-weight:600;color:var(--n700);} .ob-inp{display:flex;align-items:center;gap:8px;background:var(--n50);border:1.5px solid var(--n200);border-radius:var(--rmd);padding:8px 16px;transition:border-color .2s,box-shadow .2s;} .ob-inp:focus-within{border-color:var(--b400);box-shadow:0 0 0 3px rgba(55,138,221,.1);} .ob-inp input[type=date]{border:none;background:transparent;font-size:14px;font-weight:600;color:var(--b600);outline:none;cursor:pointer;} .ob-reset{font-size:12px;color:var(--n500);cursor:pointer;padding:5px 10px;border-radius:var(--rsm);border:1px solid var(--n200);background:var(--n50);transition:all .2s;} .ob-reset:hover{color:var(--r600);border-color:var(--r100);background:var(--r50);} .prog-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:12px;flex-wrap:wrap;} .prog-txt h3{font-size:15px;font-weight:700;color:var(--n800);margin-bottom:3px;} .prog-txt p{font-size:13px;color:var(--n500);} .sbadge{font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px;white-space:nowrap;} .s-ok{background:var(--g50);color:var(--g600);border:1px solid var(--g100);} .s-warn{background:var(--amber50);color:var(--amber600);border:1px solid var(--amber100);} .s-danger{background:var(--r50);color:var(--r600);border:1px solid var(--r100);} .s-idle{background:var(--n100);color:var(--n600);border:1px solid var(--n300);} .bar-bg{background:var(--n100);border-radius:20px;height:8px;margin-bottom:16px;overflow:hidden;} .bar-fill{height:8px;border-radius:20px;background:linear-gradient(90deg,var(--b400),var(--t400));transition:width .6s var(--ease);} .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} .stat-box{background:var(--n50);border:1px solid var(--n200);border-radius:var(--rmd);padding:12px 16px;transition:transform .2s,box-shadow .2s;} .stat-box:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(55,138,221,.1);} .stat-box.dl{background:var(--r50);border-color:var(--r100);} .stat-box.dl .stat-val{color:var(--r600);} .stat-val{font-size:24px;font-weight:700;color:var(--b600);display:block;line-height:1.2;} .stat-lbl{font-size:12px;color:var(--n500);margin-top:2px;} .stat-box.dl .stat-lbl{color:var(--r600);opacity:.75;} .no-hint{font-size:14px;color:var(--n500);text-align:center;padding:20px;background:var(--n50);border-radius:var(--rmd);border:1.5px dashed var(--n300);} /* SELECTOR */ /* LBTN */ .lbtn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:9px 18px;border-radius:var(--rmd);border:1.5px solid var(--b200);color:var(--b600);background:var(--b50);text-decoration:none;margin-right:10px;margin-bottom:8px;transition:all .2s;} .lbtn:hover{background:var(--b100);border-color:var(--b400);box-shadow:0 3px 10px rgba(55,138,221,.18);transform:translateY(-1px);text-decoration:none;} .lbtn svg{width:13px;height:13px;flex-shrink:0;} /* 2-LEVEL ROLE SELECTOR */ .grp-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;} .grp-btn{padding:12px 20px;border-radius:var(--rmd);border:1.5px solid var(--n200);background:var(--n50);cursor:pointer;font-size:14px;font-weight:600;color:var(--n700);transition:all .22s;position:relative;overflow:hidden;} .grp-btn::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--b400);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);} .grp-btn:hover{border-color:var(--b300);background:var(--b50);color:var(--b800);transform:translateY(-2px);box-shadow:0 5px 16px rgba(55,138,221,.15);} .grp-btn:hover::after,.grp-btn.on::after{transform:scaleX(1);} .grp-btn.on{border-color:var(--b400);background:var(--b50);color:var(--b800);transform:translateY(-1px);box-shadow:0 4px 14px rgba(55,138,221,.16);} .role-section{display:none;margin-bottom:14px;} .role-section.show{display:block;animation:fadeIn .2s ease;} .role-section-hdr{font-size:11px;font-weight:700;color:var(--n500);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;} .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:7px;} .rbtn{padding:10px 8px;border-radius:var(--rmd);border:1.5px solid var(--n200);background:var(--n50);cursor:pointer;text-align:center;position:relative;overflow:hidden;transition:border-color .25s,box-shadow .25s,transform .22s,background .22s;} .rbtn::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--b400);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);} .rbtn:hover{border-color:var(--b300);box-shadow:0 6px 16px rgba(55,138,221,.15);transform:translateY(-2px);background:var(--b50);z-index:2;} .rbtn:hover::after,.rbtn.on::after{transform:scaleX(1);} .rbtn.on{border-color:var(--b400);background:var(--b50);box-shadow:0 4px 14px rgba(55,138,221,.16);transform:translateY(-1px);} .rbtn.on::after{background:var(--b600);} .rn{font-size:13px;font-weight:700;color:var(--n700);display:block;} .rbtn:hover .rn,.rbtn.on .rn{color:var(--b800);} .rbtn[data-c=teal]:hover,.rbtn[data-c=teal].on{background:var(--t50);border-color:var(--t400);} .rbtn[data-c=teal]::after,.rbtn[data-c=teal].on::after{background:var(--t400);} .rbtn[data-c=teal]:hover .rn,.rbtn[data-c=teal].on .rn{color:var(--t600);} .rbtn[data-c=purple]:hover,.rbtn[data-c=purple].on{background:var(--p50);border-color:var(--p600);} .rbtn[data-c=purple]::after,.rbtn[data-c=purple].on::after{background:var(--p600);} .rbtn[data-c=purple]:hover .rn,.rbtn[data-c=purple].on .rn{color:var(--p600);} .rbtn[data-c=coral]:hover,.rbtn[data-c=coral].on{background:#FAECE7;border-color:#993C1D;} .rbtn[data-c=coral]::after,.rbtn[data-c=coral].on::after{background:#993C1D;} .rbtn[data-c=coral]:hover .rn,.rbtn[data-c=coral].on .rn{color:#993C1D;} .rbtn[data-c=green]:hover,.rbtn[data-c=green].on{background:var(--g50);border-color:var(--g600);} .rbtn[data-c=green]::after,.rbtn[data-c=green].on::after{background:var(--g600);} .rbtn[data-c=green]:hover .rn,.rbtn[data-c=green].on .rn{color:var(--g600);} .rbtn[data-c=amber]:hover,.rbtn[data-c=amber].on{background:var(--amber50);border-color:var(--amber600);} .rbtn[data-c=amber]::after,.rbtn[data-c=amber].on::after{background:var(--amber600);} .rbtn[data-c=amber]:hover .rn,.rbtn[data-c=amber].on .rn{color:var(--amber600);} /* COURSE PANEL */ .cpanel{max-height:0;overflow:hidden;transition:max-height .44s var(--ease),opacity .3s ease;opacity:0;} .cpanel.on{max-height:3200px;opacity:1;} .cpanel-inner{background:var(--n50);border:1px solid var(--n200);border-radius:var(--rmd);padding:16px;margin-top:6px;} .cphdr{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;flex-wrap:wrap;} .cphdr h4{font-size:13px;font-weight:700;color:var(--n800);flex:1;line-height:1.55;} .ccnt{font-size:12px;color:var(--b600);background:var(--b50);border:1px solid var(--b100);padding:3px 10px;border-radius:20px;} .clist{display:flex;flex-direction:column;gap:7px;} .citem{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:11px 15px;background:#fff;border:1px solid var(--n200);border-radius:var(--rmd);transition:border-color .2s,box-shadow .2s,transform .15s;} .citem:hover{border-color:var(--b300);box-shadow:0 2px 10px rgba(55,138,221,.1);transform:translateX(3px);} .cleft{display:flex;align-items:flex-start;gap:11px;flex:1;min-width:0;} .cdot{width:7px;height:7px;border-radius:50%;background:var(--b300);flex-shrink:0;margin-top:5px;} .cright{flex-shrink:0;} .cname{font-size:14px;font-weight:500;color:var(--n800);} .cc-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;} .clnk{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:6px 13px;border-radius:var(--rmd);border:1.5px solid var(--b200);color:var(--b600);background:#fff;text-decoration:none;white-space:nowrap;transition:all .2s;} .clnk:hover{background:var(--b50);border-color:var(--b400);box-shadow:0 2px 8px rgba(55,138,221,.16);text-decoration:none;transform:translateY(-1px);} .clnk svg{width:11px;height:11px;} .clnk-na{display:inline-flex;align-items:center;font-size:12px;font-weight:500;padding:6px 13px;border-radius:var(--rmd);border:1.5px solid var(--n300);color:var(--n400);background:var(--n50);white-space:nowrap;} .cc-note{font-size:12px;color:var(--n500);margin-top:6px;font-style:italic;} /* JIRA INLINE */ .jira-inline{display:none;margin-top:16px;} .jira-inline.show{display:block;animation:fadeIn .25s ease;} .jira-card{background:var(--t50);border:1px solid var(--t100);border-radius:var(--rmd);padding:14px 16px;} .jira-card-hdr{display:flex;align-items:center;gap:10px;margin-bottom:10px;} .jira-card-ico{width:32px;height:32px;border-radius:var(--rsm);background:#fff;border:1px solid var(--t100);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .jira-card-ico svg{width:16px;height:16px;color:var(--t600);} .jira-card-title{font-size:13px;font-weight:700;color:var(--t600);} .jira-items{display:flex;flex-direction:column;gap:7px;} .jira-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--t600);line-height:1.6;} .jira-dot{width:5px;height:5px;border-radius:50%;background:var(--t400);flex-shrink:0;margin-top:6px;} .jira-item a{color:var(--t600);font-weight:600;} .jira-item a:hover{text-decoration:underline;} .sec-lbl{font-size:11px;font-weight:700;color:var(--n500);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;} /* ══ STEPS ══ */ .steps{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;} .step{background:#fff;border-radius:var(--rlg);border:1.5px solid var(--n200);overflow:hidden;cursor:pointer;transition:border-color .22s,box-shadow .22s,transform .18s;box-shadow:0 1px 4px rgba(0,0,0,.05);} .step:hover{border-color:var(--b200);box-shadow:0 6px 20px rgba(55,138,221,.11);transform:translateY(-2px);} .step.open{border-color:var(--b400);box-shadow:0 6px 22px rgba(55,138,221,.15);transform:translateY(-1px);} .step.done-step{border-color:var(--green);} .step.done-step>.step-hd{background:#F0FBF5;} .step-hd{display:flex;align-items:center;gap:14px;padding:16px 20px;user-select:none;transition:background .2s;} .step-hd:hover{background:var(--n50);} .step.open>.step-hd{background:var(--b50);} .step-num{width:34px;height:34px;border-radius:50%;background:var(--n100);border:1.5px solid var(--n300);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--n500);flex-shrink:0;transition:all .22s;} .step.open .step-num,.step:hover:not(.open) .step-num{background:var(--b400);border-color:var(--b400);color:#fff;} .step.done-step .step-num{background:var(--green)!important;border-color:var(--green)!important;color:#fff!important;} .step-hd-text{flex:1;} .step-title{font-size:15px;font-weight:600;color:var(--n800);} .step-sub{font-size:12px;color:var(--n500);margin-top:2px;} .step-timing{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--b50);border:1px solid var(--b100);color:var(--b600);white-space:nowrap;flex-shrink:0;} .done-tag{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;background:#E6F9F0;border:1px solid #A8EAC8;color:var(--green);display:none;white-space:nowrap;flex-shrink:0;} .step.done-step .step-timing{display:none;} .step.done-step .done-tag{display:inline-block;} .chevron{width:18px;height:18px;color:var(--n400);transition:transform .25s var(--ease);flex-shrink:0;} .step.open .chevron{transform:rotate(90deg);color:var(--b400);} .step-body{overflow:hidden;height:0;border-top:0px solid var(--n100);padding:0 22px;transition:height .3s cubic-bezier(.4,0,.2,1),padding .3s,border-top-width .3s;} .step.open .step-body{border-top:1px solid var(--n100);padding:20px 22px 22px 68px;} /* Notes */ .note{display:flex;gap:9px;border-radius:var(--rmd);padding:11px 14px;margin-top:10px;font-size:12px;line-height:1.65;} .nb{background:var(--b50);border:1px solid var(--b100);color:var(--b800);} .no{background:#FFF6E8;border:1px solid #FFCC88;color:#C05300;} .nr{background:var(--r50);border:1px solid var(--r100);color:#8B0000;font-weight:600;} /* ── COURSE LIST: clean, no icon ── */ .course-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;} .course-hdr h4{font-size:14px;font-weight:700;color:var(--n800);} .course-cnt{font-size:12px;color:var(--b600);background:var(--b50);border:1px solid var(--b100);padding:3px 10px;border-radius:20px;font-weight:600;} .course-list{display:flex;flex-direction:column;border:1px solid var(--n200);border-radius:var(--rmd);overflow:hidden;} .citem{display:flex;align-items:flex-start;gap:14px;padding:11px 16px;background:#fff;border-bottom:1px solid var(--n100);transition:background .15s;} .citem:last-child{border-bottom:none;} .citem:hover{background:var(--n50);} .c-num{min-width:24px;height:24px;border-radius:6px;background:var(--b50);border:1px solid var(--b100);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--b600);flex-shrink:0;margin-top:1px;} .c-body{flex:1;} .c-name{font-size:14px;font-weight:600;color:var(--n800);} .c-name a{color:var(--b600);font-weight:700;font-size:13px;} .c-name a:hover{text-decoration:underline;} .c-bdg-txt{font-size:11px;color:var(--n500);font-weight:500;margin-left:5px;} .c-meta{font-size:12px;color:var(--n500);margin-top:3px;line-height:1.5;} .c-note{font-size:11px;color:#7A5900;background:#FFF3E0;border:1px solid #FFCC80;border-radius:5px;padding:2px 8px;margin-top:5px;display:inline-block;} .c-tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;flex-shrink:0;align-self:flex-start;margin-top:3px;} .c-tag-req{background:var(--b50);color:var(--b600);border:1px solid var(--b100);} .c-tag-opt{background:var(--amber50);color:var(--amber600);border:1px solid var(--amber100);} /* Primary button */ .pbtn{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:12px;background:var(--b600);color:#fff;font-size:14px;font-weight:700;transition:background .2s,transform .2s;box-shadow:0 4px 16px rgba(26,95,180,.25);margin:12px 0;cursor:pointer;text-decoration:none;} .pbtn:hover{background:var(--b800);color:#fff;transform:scale(1.02);text-decoration:none;} .pbtn svg{width:17px;height:17px;flex-shrink:0;} /* Link list */ .ll{list-style:none;display:flex;flex-direction:column;gap:7px;margin:10px 0;} .ll li a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--b600);font-size:14px;} /* Done btn */ .done-btn{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:8px 20px;border-radius:999px;border:1.5px solid var(--b400);background:transparent;color:var(--b600);font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;} .done-btn:hover{background:var(--b400);color:#fff;} .done-btn.active{background:var(--green);border-color:var(--green);color:#fff;} /* Ref */ .ref-s{margin-top:16px;padding-top:14px;border-top:1px dashed var(--n200);} .ref-ttl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--n500);margin-bottom:8px;} .ref-item{display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:var(--rmd);background:#F8FAFF;border:1px solid var(--n200);margin-bottom:6px;font-size:13px;transition:background .2s;} .ref-item:hover{background:var(--b50);} .ref-item a{font-weight:600;flex:1;display:flex;align-items:center;justify-content:space-between;color:var(--b600);} .rbdg{font-size:11px;background:var(--n100);color:var(--n600);padding:2px 8px;border-radius:999px;font-weight:700;white-space:nowrap;border:1px solid var(--n200);} /* Buddy */ .buddy-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;} .bp{border-radius:var(--rmd);padding:14px 16px;} .bb{background:#E8F5F0;border:1px solid #A8EAC8;} .bt{background:#FFF8EE;border:1px solid #FFCC88;} .bp h4{font-size:13px;font-weight:800;margin-bottom:10px;} .bb h4{color:#1A5C35;}.bt h4{color:#9C4A00;} .blist{list-style:none;display:flex;flex-direction:column;gap:6px;} .blist li{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--n800);} .b-dot{width:6px;height:6px;border-radius:50%;background:var(--t400);flex-shrink:0;margin-top:6px;} .tl-item{display:flex;gap:10px;margin-bottom:10px;font-size:12px;} .tl-dot{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;} .tl-c strong{color:var(--n800);font-size:12px;} .tl-c p{color:var(--n600);font-size:12px;margin-top:1px;} /* Resources */ .res-stack{display:flex;flex-direction:column;gap:14px;margin-bottom:28px;} .res-ks{background:#fff;border-radius:var(--rlg);border:1px solid var(--n200);box-shadow:0 2px 8px rgba(0,0,0,.05);display:flex;overflow:hidden;transition:box-shadow .22s,transform .18s,border-color .18s;} .res-ks:hover{box-shadow:0 6px 20px rgba(83,74,183,.12);transform:translateY(-2px);border-color:#AFA9EC;} .res-ks-accent{width:5px;flex-shrink:0;background:linear-gradient(180deg,#534AB7,#7F77DD);align-self:stretch;} .res-ks-body{display:flex;align-items:center;gap:14px;padding:15px 20px;flex:1;} .res-ks-ico{width:36px;height:36px;border-radius:var(--rmd);background:var(--p50);border:1px solid #AFA9EC;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .res-ks-ico svg{width:17px;height:17px;color:var(--p600);} .res-ks-title{font-size:14px;font-weight:700;color:var(--n800);} .res-ks-desc{font-size:13px;color:var(--n600);margin-top:2px;} .res-ks-desc a{color:var(--p600);font-weight:600;} /* Notes section */ .notes{background:#fff;border-radius:var(--rlg);padding:22px 26px;margin-bottom:28px;box-shadow:0 2px 8px rgba(0,0,0,.05);border:1px solid var(--n200);} .notes h3{font-size:15px;font-weight:700;color:var(--n800);margin-bottom:16px;} .note-list{display:flex;flex-direction:column;border-radius:var(--rmd);overflow:hidden;border:1px solid var(--n200);} .note-row{display:flex;align-items:flex-start;background:#fff;transition:background .15s;} .note-row:hover{background:var(--n50);} .note-row+.note-row{border-top:1px solid var(--n100);} .note-num{flex-shrink:0;width:44px;display:flex;align-items:flex-start;justify-content:center;padding:14px 0;font-size:13px;font-weight:700;color:var(--n400);} .note-text{flex:1;padding:14px 16px 14px 0;font-size:14px;color:var(--n700);line-height:1.7;} .note-text strong{font-weight:700;color:var(--n800);} .note-text a{color:var(--b600);font-weight:600;} .dl-row{background:var(--r50)!important;border-left:3px solid var(--r600)!important;} .dl-row .note-num{color:var(--r600);} .dl-row .note-text{color:#5C1C1C;} /* ══ SUPPORT: line-art sketch style ══ */ .sup-sec{background:#fff;border-radius:var(--rlg);padding:22px 26px;margin-bottom:28px;box-shadow:0 2px 8px rgba(0,0,0,.05);border:1px solid var(--n200);} .sup-sec h3{font-size:15px;font-weight:700;color:var(--n800);margin-bottom:4px;} .sup-sub{font-size:13px;color:var(--n500);margin-bottom:14px;} .office-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;} .otbtn{font-size:13px;font-weight:600;padding:7px 16px;border-radius:var(--rmd);border:1.5px solid var(--n200);background:var(--n50);color:var(--n600);cursor:pointer;transition:all .2s;} .otbtn:hover{border-color:var(--b200);background:var(--b50);color:var(--b600);} .otbtn.on{background:var(--b50);border-color:var(--b400);color:var(--b800);} .office-panel{display:none;}.office-panel.on{display:block;animation:fadeIn .2s ease;} .sup-grid{display:grid;gap:12px;} /* Card: sketch/line-art vibe */ .sup-card{ border:1.5px solid var(--card-border,#D6E4F7); border-radius:16px;padding:0; display:flex;flex-direction:column;background:#fff; overflow:hidden;position:relative; transition:border-color .2s,box-shadow .2s,transform .18s; box-shadow:0 2px 8px rgba(0,0,0,.04); } .sup-card::before{ content:'';display:block;height:4px; background:var(--card-accent,var(--b400)); border-radius:16px 16px 0 0; } .sup-card:hover{ border-color:var(--card-accent,var(--b400)); box-shadow:0 8px 28px rgba(0,0,0,.10); transform:translateY(-4px); } .sup-card-top{ padding:16px 16px 12px; display:flex;flex-direction:column;align-items:flex-start; border-bottom:1px solid var(--n100); } /* sketch icon wrap — white bg, thin border, hand-drawn feel */ .sup-icon-wrap{ width:44px;height:44px; border-radius:12px; border:1.5px solid var(--card-border,#D6E4F7); background:#fff; display:flex;align-items:center;justify-content:center; margin-bottom:11px; box-shadow:2px 2px 0 var(--card-border,#D6E4F7); } .sup-icon-wrap svg{ width:22px;height:22px; stroke:var(--card-stroke,var(--b600)); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .sup-name{font-weight:800;font-size:14px;color:var(--n800);line-height:1.3;} .sup-role{font-size:11px;color:var(--n500);margin-top:3px;line-height:1.4;} .sup-card-bot{padding:10px 16px 14px;flex:1;} .sup-ask-lbl{ font-size:11px;font-weight:800; color:var(--card-stroke,var(--b600)); text-transform:uppercase;letter-spacing:.7px; display:block;margin-bottom:4px; opacity:.7; } .sup-ask{font-size:12px;color:var(--n700);line-height:1.6;} footer{background:var(--b900);padding:24px;text-align:center;} footer p{font-size:12px;color:rgba(255,255,255,.35);} @media(max-width:680px){ .wrap{padding:20px 16px 56px;} .hdr-title{display:none;} .stat-grid{grid-template-columns:1fr 1fr;} .step-body{padding:0 16px;} .step.open .step-body{padding:20px 16px 22px 20px;} .sel-row{grid-template-columns:1fr;} .buddy-grid{grid-template-columns:1fr;} .sup-grid{grid-template-columns:repeat(2,1fr)!important;} .popup-card{padding:28px 22px 34px;} } 🎉 ✨ 🚀 ✨ 🎊 Chào mừng bạngia nhập Kaopiz! Hành trình mới bắt đầu từ hôm nay.Chúng mình rất vui khi có bạn trong đội! 🤝 Bấm vào đây để xem hướng dẫn học và thi dành cho nhân sự mới Guideline Đào tạo Hội nhập Định hướng Nhân sự mới Tiến độ của bạn 0 / 3 bước Ngày onboard của bạn: Xóa —— — —Ngày còn lại —Ngày đã qua —Deadline bài học & test Chọn ngày onboard để tự động tính deadline — trình duyệt sẽ nhớ lần sau bạn quay lại. Hướng dẫn từng bước 1 Đọc hướng dẫn sử dụng hệ thống LMS Tất cả khóa học được học và thi trên LMS Kaopiz 📖 Trước khi bắt đầu ✓ Hoàn thành Tất cả khóa học được học và thi trên LMS Kaopiz. Đọc kỹ tài liệu trước để thao tác thật mượt mà. 20240229_Newbie_Hướng dẫn học và thi trên trang LMS.pptx Vào hệ thống LMS Click để ghi nhận đã đọc xong 2 Hoàn thành bài test & khóa học Chọn nhóm & role để xem danh sách khóa học của bạn ⏰ Trong 2 tuần đầu ✓ Hoàn thành Bước 1 — Chọn nhóm phòng ban: Nhóm 1KHN · KSO · KGO · KDN · Global Nhóm 2CST Nhóm 3KJP Chú thích: Bước 2 — Chọn vị trí: Dev / AI Tester PM BrSE PQA Giám sát HT Back-office, Web3-KSO AM/MKT/Sales Bước 2 — Chọn vị trí: Dev Tester Tư vấn tuyển sinh MKT Sales Bước 2 — Chọn vị trí: BrSE Sales PM Dev Tester HR —0 khóa Sau khi học xong Jira — Thực hành ngay tại đây Thực hành trên dự án demo jira.kaopiz.com/projects/NEWBIE ↗ Tìm tài liệu & tạo checklist review code trên Ksystem ↗ — Mã dự án: NEWBIE Sau khi đăng nhập, liên hệ HuongNTT1 để được add vào dự án demo Click để ghi nhận đã hoàn thành 3 Gặp bạn đồng hành Người đồng hành hỗ trợ bạn trong thời gian đầu tại Kaopiz 📅 4 tuần đầu tiên ✓ Hoàn thành Bạn đồng hành sẽ giúp bạn: Chia sẻ & giải đáp thắc mắc, khó khăn về công việc Tạo cầu nối với các hoạt động trong công ty Chia sẻ phong cách làm việc của team & quản lý Chia sẻ văn hóa công ty & cách ứng xử phù hợp ⚠ Bạn đồng hành không chịu trách nhiệm đào tạo chuyên môn cho newbie. Lịch trình 4 tuần (gợi ý) 1Ngày 1Làm quen, thêm contact, lên lịch gặp, thêm vào nhóm nội bộ 2Ngày 2–5Giải đáp thắc mắc, chia sẻ văn hóa team, tham quan công ty 3Tuần 2–3Hỗ trợ thắc mắc, lên lịch gặp nhau 1 bữa ăn trong tuần (công ty không hỗ trợ tiền bữa ăn) 4Tuần 4Kết thúc chương trình & khảo sát đánh giá Nếu bạn đồng hành chưa liên hệ, hãy nhắn trong group để Bộ phận Đào tạo kiểm tra và kết nối nhé! Click để ghi nhận đã gặp bạn đồng hành Lưu ý quan trọng ! Deadline hoàn thành bài học & test: Đúng 2 tuần kể từ ngày onboard. BPĐT sẽ tổng hợp kết quả và gửi cho quản lý trực tiếp — đây là căn cứ đánh giá thử việc. 1 Nếu không thao tác được HRM trong ngày đầu tiên, thử lại ngày hôm sau — thông tin chấm công có thể chưa kịp cập nhật. 2 Tự kiểm tra tiến độ: Vào My Course để xem % hoàn thành. Vào My Exam để xem kết quả bài test. Cần hỗ trợ? Ping đúng người nhé Chọn địa điểm của bạn: 🎊 Chúc mừng bạn chính thức là thành viên Kaopiz! Kaopiz — Bộ phận Đào tạo · Tài liệu nội bộ /* ══ LINE-ART SVG ICONS (sketch/mono style) ══ */ var ICONS={ training:'<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>', jira: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3"/><polyline points="9 12 11 14 15 10"/><line x1="3" y1="9" x2="21" y2="9"/></svg>', it: '<svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/><path d="M7 10h2M11 10h2M15 10h2"/></svg>', admin: '<svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>', cb: '<svg viewBox="0 0 24 24"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/><line x1="5" y1="15" x2="9" y2="15"/><line x1="12" y1="15" x2="16" y2="15"/></svg>', hr: '<svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>', }; var STYLES={ training:{accent:'#185FA5',bg:'#EBF3FC',border:'#B5D4F4',stroke:'#185FA5'}, jira: {accent:'#1D9E75',bg:'#E4F7EF',border:'#9FE1CB',stroke:'#0F6E56'}, it: {accent:'#534AB7',bg:'#EEEDFE',border:'#CECBF6',stroke:'#534AB7'}, admin: {accent:'#854F0B',bg:'#FBF0DC',border:'#FAC775',stroke:'#854F0B'}, cb: {accent:'#A32D2D',bg:'#FDEDED',border:'#F7C1C1',stroke:'#A32D2D'}, hr: {accent:'#3B6D11',bg:'#EAF3DE',border:'#C0DD97',stroke:'#3B6D11'}, }; /* ══ SUPPORT DATA ══ */ var SUPPORT={ khn:[ {ico:'training',n:'AnhVM', r:'Bộ phận Đào tạo', ask:'Vấn đề về khóa học, LMS, bài test, lịch học hội nhập'}, {ico:'jira', n:'HuongNTT1', r:'PQA / Jira demo', ask:'Cần được add vào dự án Jira NEWBIE'}, {ico:'it', n:'HuyND / MinhNQ', r:'Bộ phận IT', ask:'Lỗi đăng nhập, tài khoản, thiết bị, máy tính'}, {ico:'admin', n:'TrangNTT2', r:'Hành chính — Lễ tân', ask:'Vé xe tháng, chỗ ngồi, tủ giày, đồng phục'}, {ico:'cb', n:'TrangTTH', r:'Chế độ & Phúc lợi', ask:'Hợp đồng lao động, chế độ đãi ngộ, nội quy'}, ], kdn:[ {ico:'training',n:'AnhVM', r:'Bộ phận Đào tạo', ask:'Vấn đề về khóa học, LMS, bài test, lịch học hội nhập'}, {ico:'jira', n:'HuongNTT1', r:'PQA / Jira demo', ask:'Cần được add vào dự án Jira NEWBIE'}, {ico:'it', n:'HuyND / MinhNQ', r:'Bộ phận IT', ask:'Lỗi đăng nhập, tài khoản, thiết bị, máy tính'}, {ico:'admin', n:'ChungPT', r:'Hành chính nhân sự — ĐN', ask:'Chỗ ngồi, thiết bị, thủ tục hợp đồng lao động'}, ], kjp:[ {ico:'training',n:'AnhVM', r:'Bộ phận Đào tạo', ask:'Vấn đề về khóa học, LMS, bài test, lịch học hội nhập'}, {ico:'jira', n:'HuongNTT1', r:'PQA / Jira demo', ask:'Cần được add vào dự án Jira NEWBIE'}, {ico:'it', n:'YenVLN / LiHTH', r:'Hành chính nhân sự — KJP', ask:'Lỗi đăng nhập, tài khoản, thiết bị tại Nhật'}, {ico:'hr', n:'YenVLN / LiHTH', r:'Hành chính nhân sự — KJP', ask:'Hợp đồng lao động, chế độ đãi ngộ, thủ tục nhân sự'}, ], }; var OFFICE_LABELS={khn:'Hà Nội',kdn:'Đà Nẵng',kjp:'Nhật Bản'}; function renderSupport(activeCmp){ var tabsEl=document.getElementById('office-tabs'), panelsEl=document.getElementById('office-panels'); tabsEl.innerHTML=''; panelsEl.innerHTML=''; var keys=Object.keys(OFFICE_LABELS); keys.forEach(function(k,i){ var active=(activeCmp?k===activeCmp:i===0); var btn=document.createElement('button'); btn.className='otbtn'+(active?' on':''); btn.textContent=OFFICE_LABELS[k]; btn.onclick=function(){ tabsEl.querySelectorAll('.otbtn').forEach(function(b){b.classList.remove('on');});btn.classList.add('on'); panelsEl.querySelectorAll('.office-panel').forEach(function(p){p.classList.remove('on');}); var pnl=document.getElementById('op-'+k);if(pnl)pnl.classList.add('on'); }; tabsEl.appendChild(btn); var cards=SUPPORT[k]||SUPPORT.khn; var cols=cards.length>=5?'repeat(5,1fr)':'repeat('+cards.length+',1fr)'; var panel=document.createElement('div'); panel.className='office-panel'+(active?' on':'');panel.id='op-'+k; var grid=document.createElement('div'); grid.className='sup-grid';grid.style.gridTemplateColumns=cols; cards.forEach(function(c){ var st=STYLES[c.ico]||STYLES.training; grid.innerHTML+='<div class="sup-card" style="--card-accent:'+st.accent+';--card-bg:'+st.bg+';--card-border:'+st.border+';--card-stroke:'+st.stroke+'">' +'<div class="sup-card-top">' +'<div class="sup-icon-wrap">'+(ICONS[c.ico]||ICONS.training)+'</div>' +'<div class="sup-name">'+c.n+'</div>' +'<div class="sup-role">'+c.r+'</div>' +'</div>' +'<div class="sup-card-bot">' +'<span class="sup-ask-lbl">Hỏi khi</span>' +'<div class="sup-ask">'+c.ask+'</div>' +'</div>' +'</div>'; }); panel.appendChild(grid);panelsEl.appendChild(panel); }); } renderSupport(''); /* ══ THỜI LƯỢNG KHÓA HỌC ══ */ var DUR={ 'Hội nhập':'0,25 giờ', 'HRM':'0,5 giờ', 'ANTT':'1,25 giờ', 'Jira':'1,25 giờ', 'Tổng quan quy trình chất lượng':'1 giờ', 'Quy trình cho Dev':'1,5 giờ', 'Quy trình cho Tester':'1,5 giờ', 'Quy trình quản trị dự án':'1,5 giờ', 'GIT':'1 giờ', 'Coding Convention':'0,5 giờ', 'Logwork':'0,5 giờ', 'Quy trình dự án (Nhật Bản)':'—', }; /* ══ GRP DATA (từ HTML2 gốc) ══ */ var GRP={ 'nhom1':{l:'Nhóm 1',roles:{ 'n1_dev':{l:'Dev / AI',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/30'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'},{n:'Jira',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-jira-dev-pm-pqa/2'},{n:'Tổng quan quy trình chất lượng',u:'https://lms.kaopiz.com/home/course/t%E1%BB%95ng-quan-quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng/44'},{n:'Quy trình cho Dev',u:'https://lms.kaopiz.com/home/course/quy-tr%C3%ACnh-d%C3%A0nh-cho-dev/75'},{n:'GIT',u:'https://lms.kaopiz.com/home/exam_preview/46'},{n:'Coding Convention',u:'__cc__'}]}, 'n1_tst':{l:'Tester',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/30'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'},{n:'Jira',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-jira-dev-pm-pqa/2'},{n:'Tổng quan quy trình chất lượng',u:'https://lms.kaopiz.com/home/course/t%E1%BB%95ng-quan-quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng/44'},{n:'Quy trình cho Tester',u:'https://lms.kaopiz.com/home/course/quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng-d%C3%A0nh-cho-tester/74'}]}, 'n1_pm':{l:'PM',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/30'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'},{n:'Jira',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-jira-dev-pm-pqa/2'},{n:'Tổng quan quy trình chất lượng',u:'https://lms.kaopiz.com/home/course/t%E1%BB%95ng-quan-quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng/44'},{n:'Quy trình quản trị dự án',u:'https://lms.kaopiz.com/home/course/quy-tr%C3%ACnh-qu%E1%BA%A3n-tr%E1%BB%8B-d%E1%BB%B1-%C3%A1n-pm/67'},{n:'GIT',u:'https://lms.kaopiz.com/home/exam_preview/46'}]}, 'n1_brse':{l:'BrSE',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/30'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'},{n:'Jira',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-jira-dev-pm-pqa/2'},{n:'Tổng quan quy trình chất lượng',u:'https://lms.kaopiz.com/home/course/t%E1%BB%95ng-quan-quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng/44'},{n:'GIT',u:'https://lms.kaopiz.com/home/exam_preview/46'}]}, 'n1_pqa':{l:'PQA',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/30'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'},{n:'Jira',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-jira-dev-pm-pqa/2'},{n:'Tổng quan quy trình chất lượng',u:'https://lms.kaopiz.com/home/course/t%E1%BB%95ng-quan-quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng/44'}]}, 'n1_gs':{l:'Giám sát hệ thống',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/30'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'},{n:'Jira',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-jira-dev-pm-pqa/2'}]}, 'n1_bo':{l:'Back-office & Web3-KSO',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/30'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'},{n:'Logwork',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-logwork-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/51'}]}, 'n1_am':{l:'AM / Marketing / Sales',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/30'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'},{n:'Tổng quan quy trình chất lượng',u:'https://lms.kaopiz.com/home/course/t%E1%BB%95ng-quan-quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng/44'}]}, }}, 'nhom2':{l:'Nhóm 2',roles:{ 'n2_dev':{l:'Dev',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/31'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'},{n:'Jira',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-jira-dev-pm-pqa/2'},{n:'Tổng quan quy trình chất lượng',u:'https://lms.kaopiz.com/home/course/t%E1%BB%95ng-quan-quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng/44'},{n:'Quy trình cho Dev',u:'https://lms.kaopiz.com/home/course/quy-tr%C3%ACnh-d%C3%A0nh-cho-dev/75'},{n:'GIT',u:'https://lms.kaopiz.com/home/exam_preview/46'},{n:'Coding Convention',u:'__cc__'}]}, 'n2_tst':{l:'Tester',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/31'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'},{n:'Jira',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-jira-dev-pm-pqa/2'},{n:'Tổng quan quy trình chất lượng',u:'https://lms.kaopiz.com/home/course/t%E1%BB%95ng-quan-quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng/44'},{n:'Quy trình cho Tester',u:'https://lms.kaopiz.com/home/course/quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng-d%C3%A0nh-cho-tester/74'}]}, 'n2_tvts':{l:'Tư vấn tuyển sinh',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/31'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'}]}, 'n2_mkt':{l:'MKT',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/31'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'}]}, 'n2_sales':{l:'Sales',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/31'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi/16'}]}, }}, 'nhom3':{l:'Nhóm 3',roles:{ 'n3_brse':{l:'BrSE',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/32'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi-kjp/86'},{n:'Jira',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-jira-dev-pm-pqa/2'},{n:'Tổng quan quy trình chất lượng',u:'https://lms.kaopiz.com/home/course/t%E1%BB%95ng-quan-quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng/44'},{n:'GIT',u:'https://lms.kaopiz.com/home/exam_preview/46'},{n:'Quy trình dự án (Nhật Bản)',u:''}]}, 'n3_sales':{l:'Sales',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/32'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi-kjp/86'}]}, 'n3_pm':{l:'PM',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/32'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi-kjp/86'},{n:'Jira',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-jira-dev-pm-pqa/2'},{n:'Tổng quan quy trình chất lượng',u:'https://lms.kaopiz.com/home/course/t%E1%BB%95ng-quan-quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng/44'},{n:'Quy trình quản trị dự án',u:'https://lms.kaopiz.com/home/course/quy-tr%C3%ACnh-qu%E1%BA%A3n-tr%E1%BB%8B-d%E1%BB%B1-%C3%A1n-pm/67'},{n:'GIT',u:'https://lms.kaopiz.com/home/exam_preview/46'}]}, 'n3_dev':{l:'Dev',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/32'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi-kjp/86'},{n:'Jira',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-jira-dev-pm-pqa/2'},{n:'Tổng quan quy trình chất lượng',u:'https://lms.kaopiz.com/home/course/t%E1%BB%95ng-quan-quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng/44'},{n:'Quy trình cho Dev',u:'https://lms.kaopiz.com/home/course/quy-tr%C3%ACnh-d%C3%A0nh-cho-dev/75'},{n:'GIT',u:'https://lms.kaopiz.com/home/exam_preview/46'},{n:'Coding Convention',u:'__cc__'}]}, 'n3_tst':{l:'Tester',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/32'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi-kjp/86'},{n:'Jira',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-jira-dev-pm-pqa/2'},{n:'Tổng quan quy trình chất lượng',u:'https://lms.kaopiz.com/home/course/t%E1%BB%95ng-quan-quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng/44'},{n:'Quy trình cho Tester',u:'https://lms.kaopiz.com/home/course/quy-tr%C3%ACnh-ch%E1%BA%A5t-l%C6%B0%E1%BB%A3ng-d%C3%A0nh-cho-tester/74'}]}, 'n3_hr':{l:'HR',c:[{n:'Hội nhập',u:'https://lms.kaopiz.com/home/exam_preview/32'},{n:'HRM',u:'https://lms.kaopiz.com/home/course/h%C6%B0%E1%BB%9Bng-d%E1%BA%ABn-s%E1%BB%AD-d%E1%BB%A5ng-hrm-%C4%91%E1%BB%83-t%E1%BA%A1o-%C4%91%C6%A1n-t%E1%BB%AB/68'},{n:'ANTT',u:'https://lms.kaopiz.com/home/course/an-ninh-th%C3%B4ng-tin-d%C3%A0nh-cho-nh%C3%A2n-vi%C3%AAn-m%E1%BB%9Bi-kjp/86'}]}, }}, }; var JIRA_ROLES=new Set(['n1_dev','n1_tst','n1_pm','n1_brse','n1_pqa','n1_gs','n2_dev','n2_tst','n3_brse','n3_pm','n3_dev','n3_tst']); var CC_TESTS=[ {n:'Android Java',u:'https://lms.kaopiz.com/home/exam_preview/35'}, {n:'Java',u:'https://lms.kaopiz.com/home/exam_preview/33'}, {n:'PHP',u:'https://lms.kaopiz.com/home/exam_preview/38'}, {n:'Ruby',u:'https://lms.kaopiz.com/home/exam_preview/37'}, {n:'Swift iOS',u:'https://lms.kaopiz.com/home/exam_preview/36'}, {n:'Unity C#',u:'https://lms.kaopiz.com/home/exam_preview/34'}, ]; /* ══ GROUP + ROLE SELECTOR ══ */ var GRP_LEGENDS={ 'nhom1':'<strong>KHN</strong>: Kaopiz Hà Nội · <strong>KSO</strong>: Kaopiz Solutions · <strong>KDN</strong>: Kaopiz Đà Nẵng · <strong>Global</strong>: Kaopiz Global', 'nhom2':'<strong>CST</strong>: Codestar', 'nhom3':'<strong>KJP</strong>: Kaopiz Japan' }; function selGrp(btn,grp){ document.querySelectorAll('.grp-btn').forEach(function(b){b.classList.remove('on');}); btn.classList.add('on'); document.querySelectorAll('.role-section').forEach(function(s){s.classList.remove('show');}); document.getElementById('sec-'+grp).classList.add('show'); document.querySelectorAll('.rbtn').forEach(function(b){b.classList.remove('on');}); document.getElementById('cpanel').classList.remove('on'); document.getElementById('jira-inline').classList.remove('show'); /* Show group legend */ var leg=document.getElementById('grp-legend'); var legTxt=document.getElementById('grp-legend-txt'); if(leg&&legTxt){leg.style.display='block';legTxt.innerHTML=GRP_LEGENDS[grp]||'';} } function selRole(btn,roleKey){ var sec=btn.closest('.role-section'); sec.querySelectorAll('.rbtn').forEach(function(b){b.classList.remove('on');}); btn.classList.add('on'); var grpData=null; for(var g in GRP){if(GRP[g].roles[roleKey]){grpData=GRP[g].roles[roleKey];break;}} if(!grpData)return; var orderNames=grpData.c.map(function(x){return x.n==='Coding Convention'?'Coding Convention':x.n;}); document.getElementById('cp-title').textContent=grpData.l+' — Gợi ý thứ tự học'; document.getElementById('cp-cnt').textContent=grpData.c.length+' khóa học'; var list=document.getElementById('clist');list.innerHTML=''; grpData.c.forEach(function(x,i){ var el=document.createElement('div'); el.className='citem'; el.style.cssText='opacity:0;animation:fadeUp .3s ease '+(i*0.055)+'s both'; var isCC=(x.u==='__cc__'); var dur=DUR[x.n]?'<span style="font-size:11px;color:var(--n500);font-weight:500;margin-left:6px;">'+DUR[x.n]+'</span>':''; var orderBadge='<span style="font-size:11px;font-weight:700;color:var(--b600);background:var(--b50);border:1px solid var(--b100);border-radius:12px;padding:2px 8px;margin-right:8px;flex-shrink:0;">'+(i+1)+'</span>'; var CC_LEARN_URL='https://kaopizvn.sharepoint.com/sites/kaopiz-software/Shared%20Documents/Forms/AllItems.aspx?id=%2Fsites%2Fkaopiz%2Dsoftware%2FShared%20Documents%2F14%2E%20KHN%2ETRN%2F%C4%90%C3%A0o%20t%E1%BA%A1o%20n%E1%BB%99i%20b%E1%BB%99%2F1%2E%20%C4%90%C3%A0o%20t%E1%BA%A1o%20newbie%2FT%C3%A0i%20li%E1%BB%87u%20share%2FCoding%20convention&p=true&ga=1'; var svgExt='<svg viewBox="0 0 12 12" fill="none"><path d="M7 2h3v3M5 7l5-5M2 4h3v6H2z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>'; var leftHtml='<div class="cleft"><div class="cdot"></div><div>'+orderBadge+'<span class="cname">'+x.n+'</span>'+dur +(isCC?'<div style="margin-top:7px;"><div class="cc-note" style="margin-bottom:6px;">Sau khi học xong thì chọn bài test theo ngôn ngữ tương ứng, nếu không có ngôn ngữ thì bạn nhắn lên nhóm nha</div><div class="cc-links">'+CC_TESTS.map(function(t){return '<a class="clnk" href="'+t.u+'" target="_blank">'+svgExt+t.n+'</a>';}).join('')+'</div></div>':'') +'</div></div>'; var rightHtml=isCC ?'<a class="clnk" href="'+CC_LEARN_URL+'" target="_blank">'+svgExt+'Học ngay</a>' :(x.u?'<a class="clnk" href="'+x.u+'" target="_blank">'+svgExt+'Học ngay</a>':'<span class="clnk-na">Sắp có link</span>'); el.innerHTML=leftHtml+'<div class="cright">'+rightHtml+'</div>'; list.appendChild(el); }); document.getElementById('cpanel').classList.add('on'); if(JIRA_ROLES.has(roleKey)){document.getElementById('jira-inline').classList.add('show');} else{document.getElementById('jira-inline').classList.remove('show');} } /* ══ ACCORDION ══ */ function togStep(card){ var wasOpen=card.classList.contains('open'); /* Đóng tất cả step đang mở */ document.querySelectorAll('.step.open').forEach(function(s){ var body=s.querySelector('.step-body'); if(body){ body.style.height=body.scrollHeight+'px'; requestAnimationFrame(function(){ body.style.height='0'; }); } s.classList.remove('open'); }); /* Mở step được click (nếu trước đó đang đóng) */ if(!wasOpen){ card.classList.add('open'); var body=card.querySelector('.step-body'); if(body){ /* Đo chiều cao thực sau khi class open đã được thêm */ body.style.height='auto'; var h=body.scrollHeight; body.style.height='0'; requestAnimationFrame(function(){ requestAnimationFrame(function(){ body.style.height=h+'px'; }); }); /* Sau khi animation xong, set lại auto để responsive */ body.addEventListener('transitionend',function onEnd(){ body.style.height='auto'; body.removeEventListener('transitionend',onEnd); }); } } } /* ══ DONE (3 bước) ══ */ var LBLS={1:'Click để ghi nhận đã đọc xong',2:'Click để ghi nhận đã hoàn thành',3:'Click để ghi nhận đã gặp bạn đồng hành'}; function toggleDone(n,e){ if(e)e.stopPropagation(); var cur=localStorage.getItem('kpz_step_'+n)==='true'; localStorage.setItem('kpz_step_'+n,String(!cur)); applyDone(n,!cur);updStepProg(); if(!cur)setTimeout(function(){ var c=document.getElementById('step-'+n); if(c&&c.classList.contains('open')){ var body=c.querySelector('.step-body'); if(body){ body.style.height=body.scrollHeight+'px'; requestAnimationFrame(function(){ requestAnimationFrame(function(){body.style.height='0';}); }); body.addEventListener('transitionend',function onEnd2(){ body.removeEventListener('transitionend',onEnd2); }); } c.classList.remove('open'); } },600); } function applyDone(n,done){ var card=document.getElementById('step-'+n);if(!card)return; var btn=document.getElementById('db'+n); if(done){card.classList.add('done-step');if(btn){btn.classList.add('active');btn.textContent='✓ Đã ghi nhận';}} else{card.classList.remove('done-step');if(btn){btn.classList.remove('active');btn.textContent=LBLS[n]||'✓ Đánh dấu hoàn thành';}} } function updStepProg(){ var done=0;for(var i=1;i<=3;i++)if(localStorage.getItem('kpz_step_'+i)==='true')done++; document.getElementById('step-prog-fill').style.width=Math.round(done/3*100)+'%'; document.getElementById('step-prog-pct').textContent=done+' / 3 bước'; } function loadDone(){for(var i=1;i<=3;i++)applyDone(i,localStorage.getItem('kpz_step_'+i)==='true');updStepProg();} /* ══ ONBOARD DATE ══ */ var SK='kpz_ob'; function td(){var t=new Date();return t.getFullYear()+'-'+String(t.getMonth()+1).padStart(2,'0')+'-'+String(t.getDate()).padStart(2,'0');} function saveRender(){var v=document.getElementById('ob-date').value;if(v>td()){v=td();document.getElementById('ob-date').value=v;}if(v)localStorage.setItem(SK,v);render(v);} function resetDate(){localStorage.removeItem(SK);document.getElementById('ob-date').value='';document.getElementById('prog-wrap-ob').style.display='none';document.getElementById('no-hint').style.display='block';} function render(ds){ if(!ds){document.getElementById('prog-wrap-ob').style.display='none';document.getElementById('no-hint').style.display='block';return;} var ob=new Date(ds);ob.setHours(0,0,0,0); var dl=new Date(ob);dl.setDate(dl.getDate()+14); var now=new Date();now.setHours(0,0,0,0); var el=Math.max(0,Math.floor((now-ob)/86400000)); var rm=Math.max(0,Math.floor((dl-now)/86400000)); var dls=dl.toLocaleDateString('vi-VN',{day:'2-digit',month:'2-digit',year:'numeric'}); document.getElementById('s-rm').textContent=rm; document.getElementById('s-el').textContent=Math.min(el,14); document.getElementById('s-dl').textContent=dls; document.getElementById('pbar').style.width=Math.min(100,Math.round(el/14*100))+'%'; document.getElementById('no-hint').style.display='none';document.getElementById('prog-wrap-ob').style.display='block'; var bg=document.getElementById('sbadge'),pt=document.getElementById('ptitle'),ps=document.getElementById('psub'); if(el===0){bg.className='sbadge s-ok';bg.textContent='Ngày đầu tiên';pt.textContent='Chào mừng ngày đầu tiên tại Kaopiz!';ps.textContent='Deadline bài học & test: '+dls;} else if(rm>7){bg.className='sbadge s-ok';bg.textContent='Đúng hạn';pt.textContent='Ngày '+(el+1)+' — Đang đi đúng hướng!';ps.textContent='Còn '+rm+' ngày · Deadline: '+dls;} else if(rm>3){bg.className='sbadge s-warn';bg.textContent='Chú ý nhé';pt.textContent='Ngày '+(el+1)+' — Còn '+rm+' ngày!';ps.textContent='Đảm bảo đã hoàn thành các khóa chính. Deadline: '+dls;} else if(rm>0){bg.className='sbadge s-danger';bg.textContent='Gần deadline!';pt.textContent='Ngày '+(el+1)+' — Chỉ còn '+rm+' ngày!';ps.textContent='Hoàn thành ngay những khóa còn lại! Deadline: '+dls;} else{bg.className='sbadge s-danger';bg.textContent='Đã qua deadline';pt.textContent='Đã qua deadline bài học & test';ps.textContent='Liên hệ BPĐT nếu cần hỗ trợ thêm.';} } /* ══ FIREWORKS ══ */ var fwIv=null; function initFireworks(){ var c=document.getElementById('fw-canvas');if(!c)return; var ctx=c.getContext('2d');c.width=window.innerWidth;c.height=window.innerHeight; var COLS=['#FFD700','#FF6B6B','#4ECDC4','#A855F7','#F97316','#10B981','#3B82F6','#EC4899']; function P(x,y,col){this.x=x;this.y=y;var a=Math.random()*Math.PI*2,s=Math.random()*7+2;this.vx=Math.cos(a)*s;this.vy=Math.sin(a)*s-2;this.color=col;this.alpha=1;this.r=Math.random()*3+1.5;this.decay=0.013+Math.random()*.01;this.gravity=0.07;} P.prototype.update=function(){this.x+=this.vx;this.y+=this.vy;this.vy+=this.gravity;this.vx*=.97;this.alpha-=this.decay;}; P.prototype.draw=function(ctx){ctx.save();ctx.globalAlpha=Math.max(0,this.alpha);ctx.fillStyle=this.color;ctx.beginPath();ctx.arc(this.x,this.y,this.r,0,Math.PI*2);ctx.fill();ctx.restore();}; var parts=[],W=c.width,H=c.height; var POS=[[.15,.3],[.5,.15],[.85,.3],[.3,.55],[.7,.5],[.5,.65]]; function burst(x,y){var col=COLS[Math.floor(Math.random()*COLS.length)];for(var i=0;i<60;i++)parts.push(new P(x,y,col));} function burstGroup(){POS.sort(function(){return Math.random()-.5;}).slice(0,3).forEach(function(p){burst(p[0]*W,p[1]*H);});} burstGroup();fwIv=setInterval(burstGroup,1200); (function loop(){ctx.clearRect(0,0,W,H);parts=parts.filter(function(p){return p.alpha>0;});parts.forEach(function(p){p.update();p.draw(ctx);});requestAnimationFrame(loop);})(); } /* ══ POPUP ══ */ function startApp(){ if(fwIv){clearInterval(fwIv);fwIv=null;} var popup=document.getElementById('popup');popup.classList.add('hiding'); setTimeout(function(){popup.style.display='none';},750); } /* ══ SCROLL REVEAL ══ */ var io=new IntersectionObserver(function(entries){entries.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:0.06,rootMargin:'0px 0px -40px 0px'}); document.querySelectorAll('.sr').forEach(function(el){io.observe(el);}); /* ══ INIT ══ */ document.getElementById('ob-date').max=td(); (function(){var s=localStorage.getItem(SK);if(s){document.getElementById('ob-date').value=s;render(s);}})(); loadDone(); /* Set chiều cao thực cho step đang open ngay khi trang load */ document.addEventListener('DOMContentLoaded',function(){ initFireworks(); document.querySelectorAll('.step.open').forEach(function(s){ var body=s.querySelector('.step-body'); if(body){body.style.height='auto';} }); });
